diff --git a/.codefuse/skills/components/SKILL.md b/.codefuse/skills/components/SKILL.md
deleted file mode 100644
index cc35a011e5..0000000000
--- a/.codefuse/skills/components/SKILL.md
+++ /dev/null
@@ -1,572 +0,0 @@
-# Ant Design X 组件开发规范指南
-
-基于 antd 组件库最佳实践的完整开发规范，涵盖命名、架构、样式、测试等各个方面。
-
-## 1. 项目架构规范
-
-### 1.1 目录结构
-
-```
-components/[组件名]/
-├── index.tsx           # 组件入口文件
-├── [组件名].tsx        # 主组件实现
-├── [子组件].tsx        # 子组件实现
-├── style/
-│   ├── index.ts        # 样式入口
-│   ├── token.ts        # Token 定义
-│   └── [其他样式文件].ts
-├── demo/               # 示例代码
-│   ├── basic.tsx       # 基础示例
-│   └── [其他示例].tsx
-├── __tests__/          # 测试文件
-│   └── index.test.tsx  # 单元测试
-└── index.zh-CN.md      # 中文文档
-```
-
-### 1.2 文件命名规范
-
-- 组件文件：PascalCase（如 `Button.tsx`）
-- 样式文件：camelCase（如 `buttonStyle.ts`）
-- 测试文件：`index.test.tsx` 或 `[组件名].test.tsx`
-- 示例文件：kebab-case（如 `basic.tsx`、`custom-filter.tsx`）
-
-## 2. 命名规范与语义化
-
-### 2.1 组件命名
-
-- **完整名称**：使用完整单词，避免缩写
-- **PascalCase**：组件名使用大驼峰命名
-- **语义化**：名称应准确描述组件功能
-
-```typescript
-// ✅ 正确
-interface ButtonProps {}
-interface TypographyTextProps {}
-
-// ❌ 错误
-interface BtnProps {} // 缩写
-interface TxtProps {} // 缩写
-interface MyComponentProps {} // 语义不清
-```
-
-### 2.2 Props 命名规范
-
-#### 基础属性
-
-- **类型属性**：`type`（如 `type="primary"`）
-- **状态属性**：`disabled`、`loading`、`open`
-- **尺寸属性**：`size`（`large` | `middle` | `small`）
-- **默认值**：`default` + 属性名（如 `defaultValue`）
-
-#### 功能属性
-
-- **可编辑**：`editable`（布尔或配置对象）
-- **可复制**：`copyable`（布尔或配置对象）
-- **可展开**：`expandable`（布尔或配置对象）
-
-#### 事件属性
-
-- **触发事件**：`on` + 事件名（如 `onClick`、`onChange`）
-- **子组件事件**：`on` + 子组件名 + 事件名（如 `onPanelClick`）
-- **前置事件**：`before` + 事件名（如 `beforeUpload`）
-- **后置事件**：`after` + 事件名（如 `afterClose`）
-
-### 2.3 CSS 类名规范
-
-```typescript
-// 组件前缀
-const prefixCls = getPrefixCls('button', customizePrefixCls);
-
-// 状态类名
-`${prefixCls}-${type}` // 类型类名
-`${prefixCls}-disabled` // 禁用状态
-`${prefixCls}-loading` // 加载状态
-`${prefixCls}-${sizeCls}` // 尺寸类名
-// 组合类名
-`${prefixCls}-icon-only` // 仅图标按钮
-`${prefixCls}-two-chinese-chars`; // 中文字符间距
-```
-
-## 3. TypeScript 类型设计
-
-### 3.1 Props 接口定义
-
-```typescript
-// 基础 Props 接口
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  // 类型定义
-  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
-  size?: 'large' | 'middle' | 'small';
-
-  // 状态控制
-  loading?: boolean | { delay?: number };
-  disabled?: boolean;
-
-  // 内容相关
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
-
-  // 样式相关
-  className?: string;
-  style?: React.CSSProperties;
-
-  // 事件处理
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-// 配置对象类型
-export interface CopyConfig {
-  text?: string | (() => string | Promise<string>);
-  onCopy?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-  icon?: React.ReactNode;
-  tooltips?: React.ReactNode;
-  format?: 'text/plain' | 'text/html';
-}
-```
-
-### 3.2 泛型组件设计
-
-```typescript
-// 泛型组件支持不同元素类型
-export interface BlockProps<
-  C extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
-> extends TypographyProps<C> {
-  component?: C;
-  // 其他属性...
-}
-
-// 使用示例
-const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
-  const { component = 'div' as C, ...rest } = props;
-  return React.createElement(component, rest);
-});
-```
-
-### 3.3 类型安全实践
-
-```typescript
-// 使用联合类型而非 enum
-type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
-
-// 使用 as const 定义常量
-const BUTTON_TYPES = ['primary', 'default', 'dashed', 'text', 'link'] as const;
-
-// 精确的类型定义
-interface EllipsisConfig {
-  rows?: number;
-  expandable?: boolean | 'collapsible';
-  suffix?: string;
-  symbol?: React.ReactNode | ((expanded: boolean) => React.ReactNode);
-}
-```
-
-## 4. 组件架构模式
-
-### 4.1 复合组件模式
-
-```typescript
-// 主组件
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  // 实现...
-});
-
-// 子组件
-Button.Group = ButtonGroup;
-Button.__ANT_BUTTON = true;
-
-// 使用
-<Button.Group>
-  <Button>按钮1</Button>
-  <Button>按钮2</Button>
-</Button.Group>
-```
-
-### 4.2 配置合并模式
-
-```typescript
-// 使用 useMergedConfig 合并布尔值和配置对象
-const [enableEdit, editConfig] = useMergedConfig<EditConfig>(editable);
-
-// 实现 useMergedConfig
-function useMergedConfig<T>(config: boolean | T): [boolean, T] {
-  const enable = Boolean(config);
-  const mergedConfig = React.useMemo(() => {
-    if (config === true) return {} as T;
-    if (config === false) return {} as T;
-    return config || ({} as T);
-  }, [config]);
-  return [enable, mergedConfig];
-}
-```
-
-### 4.3 受控与非受控模式
-
-```typescript
-// 使用 useControlledState 处理受控/非受控状态
-const [editing, setEditing] = useControlledState(false, editConfig.editing);
-
-// useControlledState 实现
-function useControlledState<T>(defaultValue: T, controlledValue?: T): [T, (value: T) => void] {
-  const [internalValue, setInternalValue] = React.useState<T>(defaultValue);
-  const isControlled = controlledValue !== undefined;
-  const value = isControlled ? controlledValue : internalValue;
-
-  const setValue = React.useCallback(
-    (newValue: T) => {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-    },
-    [isControlled],
-  );
-
-  return [value, setValue];
-}
-```
-
-## 5. 样式系统规范
-
-### 5.1 CSS-in-JS 架构
-
-```typescript
-// Token 定义
-export interface ComponentToken {
-  // 颜色相关
-  colorPrimary?: string;
-  colorBgContainer?: string;
-
-  // 尺寸相关
-  controlHeight?: number;
-  controlHeightSM?: number;
-  controlHeightLG?: number;
-
-  // 间距相关
-  padding?: number;
-  paddingSM?: number;
-  paddingLG?: number;
-}
-
-// 样式生成函数
-const genButtonStyle = (token: ButtonToken): CSSInterpolation => {
-  return [
-    // 基础样式
-    genSharedButtonStyle(token),
-    // 尺寸样式
-    genSizeBaseButtonStyle(token),
-    genSizeSmallButtonStyle(token),
-    genSizeLargeButtonStyle(token),
-    // 变体样式
-    genVariantStyle(token),
-  ];
-};
-
-// 样式导出
-export default genStyleHooks('Button', genButtonStyle, prepareComponentToken, {
-  unitless: { fontWeight: true },
-});
-```
-
-### 5.2 响应式设计
-
-```typescript
-// 使用 CSS 逻辑属性支持 RTL
-const styles = {
-  marginInlineStart: token.marginXS, // 替代 marginLeft
-  marginInlineEnd: token.marginXS, // 替代 marginRight
-  paddingBlock: token.paddingSM, // 替代 paddingTop/paddingBottom
-  paddingInline: token.paddingSM, // 替代 paddingLeft/paddingRight
-};
-
-// 响应式断点
-const responsiveStyles = {
-  [token.screenXS]: {
-    fontSize: token.fontSizeSM,
-  },
-  [token.screenMD]: {
-    fontSize: token.fontSize,
-  },
-  [token.screenLG]: {
-    fontSize: token.fontSizeLG,
-  },
-};
-```
-
-### 5.3 主题定制支持
-
-```typescript
-// 支持 ConfigProvider 主题定制
-const { getPrefixCls, direction } = React.useContext(ConfigContext);
-const prefixCls = getPrefixCls('button', customizePrefixCls);
-
-// 支持语义化 className 和 style
-export interface ButtonSemanticClassNames {
-  root?: string;
-  icon?: string;
-  content?: string;
-}
-
-export interface ButtonSemanticStyles {
-  root?: React.CSSProperties;
-  icon?: React.CSSProperties;
-  content?: React.CSSProperties;
-}
-```
-
-## 6. 可访问性规范
-
-### 6.1 ARIA 属性
-
-```typescript
-// 正确的 ARIA 属性使用
-<button
-  aria-label={ariaLabel}
-  aria-disabled={mergedDisabled}
-  aria-expanded={expanded}
-  aria-busy={innerLoading}
-  tabIndex={mergedDisabled ? -1 : 0}
->
-  {children}
-</button>
-
-// 键盘导航支持
-const handleKeyDown = (event: React.KeyboardEvent) => {
-  switch (event.key) {
-    case 'Enter':
-    case ' ':
-      event.preventDefault();
-      handleClick();
-      break;
-    case 'Escape':
-      handleCancel();
-      break;
-  }
-};
-```
-
-### 6.2 焦点管理
-
-```typescript
-// 焦点状态样式
-const focusStyles = {
-  '&:focus-visible': {
-    outline: `${token.lineWidthFocus}px solid ${token.colorPrimaryBorder}`,
-    outlineOffset: 1,
-  },
-};
-
-// 程序化焦点管理
-const buttonRef = React.useRef<HTMLButtonElement>(null);
-React.useEffect(() => {
-  if (autoFocus && buttonRef.current) {
-    buttonRef.current.focus();
-  }
-}, [autoFocus]);
-```
-
-## 7. 性能优化规范
-
-### 7.1 React 优化
-
-```typescript
-// 使用 React.memo 避免不必要的重渲染
-const Button = React.memo(
-  React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    // 组件实现
-  }),
-);
-
-// 使用 useMemo 缓存计算结果
-const classes = React.useMemo(() => {
-  return clsx(prefixCls, `${prefixCls}-${type}`, `${prefixCls}-${size}`, className);
-}, [prefixCls, type, size, className]);
-
-// 使用 useCallback 缓存函数
-const handleClick = React.useCallback(
-  (event: React.MouseEvent) => {
-    if (!disabled && !loading) {
-      onClick?.(event);
-    }
-  },
-  [disabled, loading, onClick],
-);
-```
-
-### 7.2 样式优化
-
-```typescript
-// 避免不必要的样式重计算
-const useStyle = genStyleHooks(
-  'Button',
-  (token) => {
-    // 样式计算逻辑
-  },
-  prepareComponentToken,
-);
-
-// 使用 CSS containment
-const containerStyles = {
-  contain: 'layout style paint',
-  contentVisibility: 'auto',
-};
-```
-
-## 8. 测试规范
-
-### 8.1 测试文件结构
-
-```typescript
-// __tests__/index.test.tsx
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import Button from '../index';
-
-describe('Button', () => {
-  it('should render correctly', () => {
-    const { container } = render(<Button>Test</Button>);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('should handle click events', () => {
-    const handleClick = jest.fn();
-    render(<Button onClick={handleClick}>Click me</Button>);
-
-    fireEvent.click(screen.getByText('Click me'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should be disabled when disabled prop is true', () => {
-    render(<Button disabled>Disabled</Button>);
-    expect(screen.getByText('Disabled')).toBeDisabled();
-  });
-});
-```
-
-### 8.2 测试覆盖率要求
-
-- 单元测试覆盖率：100%
-- 集成测试：主要使用场景
-- 可访问性测试：键盘导航、屏幕阅读器
-- 视觉回归测试：UI 变化检测
-
-## 9. 文档规范
-
-### 9.1 API 文档格式
-
-```markdown
-| 参数     | 说明             | 类型                                                   | 默认值    |
-| -------- | ---------------- | ------------------------------------------------------ | --------- |
-| type     | 设置按钮类型     | `primary` \| `default` \| `dashed` \| `text` \| `link` | `default` |
-| size     | 设置按钮大小     | `large` \| `middle` \| `small`                         | `middle`  |
-| disabled | 按钮失效状态     | boolean                                                | false     |
-| loading  | 设置按钮载入状态 | boolean \| { delay: number }                           | false     |
-| onClick  | 点击按钮时的回调 | (event) => void                                        | -         |
-```
-
-### 9.2 示例代码规范
-
-```typescript
-// demo/basic.tsx
-import React from 'react';
-import { Button } from 'antd';
-
-const App: React.FC = () => (
-  <>
-    <Button type="primary">Primary Button</Button>
-    <Button>Default Button</Button>
-    <Button type="dashed">Dashed Button</Button>
-    <Button type="text">Text Button</Button>
-    <Button type="link">Link Button</Button>
-  </>
-);
-
-export default App;
-```
-
-## 10. 国际化规范
-
-### 10.1 本地化配置
-
-```typescript
-// locale/zh_CN.ts
-export default {
-  Text: {
-    edit: '编辑',
-    copy: '复制',
-    copied: '复制成功',
-    expand: '展开',
-    collapse: '收起',
-  },
-};
-
-// 使用 useLocale 获取本地化
-const [textLocale] = useLocale('Text', enUS.Text);
-```
-
-### 10.2 动态文本处理
-
-```typescript
-// 支持模板变量的本地化
-const messages = {
-  selected: '已选择 ${count} 项',
-};
-
-// 使用
-const message = messages.selected.replace('${count}', count.toString());
-```
-
-## 11. 版本兼容规范
-
-### 11.1 向下兼容
-
-- 避免破坏性变更
-- 提供迁移指南
-- 保持 API 稳定性
-- 使用废弃警告
-
-```typescript
-// 废弃警告
-if (process.env.NODE_ENV !== 'production') {
-  const warning = devUseWarning('Button');
-  warning.deprecated(!iconPosition, 'iconPosition', 'iconPlacement');
-}
-```
-
-### 11.2 浏览器兼容
-
-- 支持 Chrome 80+
-- 支持服务端渲染
-- 支持 TypeScript 4.0+
-- 支持 React 18 ~ 19
-
-## 12. 发布规范
-
-### 12.1 版本管理
-
-- 遵循语义化版本（SemVer）
-- 主版本：破坏性变更
-- 次版本：新功能
-- 修订版本：Bug 修复
-
-### 12.2 变更日志
-
-```markdown
-## 5.0.0
-
-### 重大变更
-
-- 移除废弃的 `icon` 字符串用法
-- 重构样式系统，使用 CSS-in-JS
-
-### 新功能
-
-- 新增 `variant` 属性支持多种按钮变体
-- 新增语义化 className 和 style 支持
-
-### Bug 修复
-
-- 修复按钮在 disabled 状态下仍可点击的问题
-```
-
----
-
-这套规范基于 antd 组件库的最佳实践，涵盖了从项目结构到发布流程的完整开发规范。遵循这些规范可以确保组件的一致性、可维护性和高质量。
diff --git a/README-zh_CN.md b/README-zh_CN.md
index d6609af0d4..c9ac3beb7e 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -91,6 +91,10 @@
 
 `@ant-design/x-markdown` 旨在提供流式友好、强拓展性和高性能的 Markdown 渲染器。提供流式渲染公式、代码高亮、mermaid 等能力，详情点击[这里](packages/x-markdown/README-zh_CN.md)。
 
+## 🎴 动态卡片渲染器
+
+`@ant-design/x-card` 是一个基于 A2UI 协议的动态卡片渲染组件，让 AI Agent 能够通过结构化的 JSON 消息流，动态构建和渲染交互式界面。支持流式渲染、数据绑定和响应式更新，详情点击[这里](packages/x-card/README.md)。
+
 ## 🚀 Skill
 
 `@ant-design/x-skill` 是专为 Ant Design X 打造的智能技能库，提供了一系列精心设计的 Agent 技能。这些技能能够显著提升开发效率，帮助您快速构建高质量的 AI 对话应用，并有效解决开发过程中遇到的各种问题，详情点击[这里](packages/x-skill/README-zh_CN.md)。
diff --git a/README.md b/README.md
index f8631d5767..e616cc9d10 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,10 @@ Build excellent AI interfaces and pioneer intelligent new experiences.
 
 `@ant-design/x-markdown` aims to provide a streaming-friendly, highly extensible, and high-performance Markdown renderer. It supports streaming rendering of formulas, code highlighting, mermaid, and more. See details [here](packages/x-markdown/README.md).
 
+## 🎴 Dynamic Card Renderer
+
+`@ant-design/x-card` is a dynamic card rendering component based on the A2UI protocol, enabling AI Agents to dynamically build and render interactive interfaces through structured JSON message streams. It supports streaming rendering, data binding, and reactive updates. See details [here](packages/x-card/README.md).
+
 ## 🚀 Skill
 
 `@ant-design/x-skill` is an intelligent skill library specially designed for Ant Design X, providing a series of carefully designed Agent skills. These skills can significantly improve development efficiency, help you quickly build high-quality AI conversation applications, and effectively solve various problems encountered during development. See details [here](packages/x-skill/README.md).
diff --git a/packages/x-card/.fatherrc.ts b/packages/x-card/.fatherrc.ts
new file mode 100644
index 0000000000..2c9c584715
--- /dev/null
+++ b/packages/x-card/.fatherrc.ts
@@ -0,0 +1,38 @@
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+  targets: {
+    chrome: 80,
+  },
+  esm: {
+    input: 'src',
+    ignores: ['**/demo/**', '**/__tests__/**'],
+  },
+  cjs: {
+    input: 'src/',
+    ignores: ['**/demo/**', '**/__tests__/**'],
+  },
+  umd: {
+    entry: 'src/index.ts',
+    name: 'XCard',
+    output: {
+      path: 'dist/',
+      filename: 'x-card',
+    },
+    sourcemap: true,
+    generateUnminified: true,
+    externals: {
+      react: {
+        root: 'React',
+        commonjs: 'react',
+        commonjs2: 'react',
+      },
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs: 'react-dom',
+        commonjs2: 'react-dom',
+      },
+    },
+  },
+});
diff --git a/packages/x-card/.jest.js b/packages/x-card/.jest.js
new file mode 100644
index 0000000000..7383987ddc
--- /dev/null
+++ b/packages/x-card/.jest.js
@@ -0,0 +1,73 @@
+const compileModules = [
+  '@rc-component',
+  'react-sticky-box',
+  'rc-tween-one',
+  '@babel',
+  '@ant-design',
+  'countup.js',
+  '.pnpm',
+];
+
+const resolve = (p) => require.resolve(`@ant-design/tools/lib/jest/${p}`);
+
+const ignoreList = [];
+
+// cnpm use `_` as prefix
+['', '_'].forEach((prefix) => {
+  compileModules.forEach((module) => {
+    ignoreList.push(`${prefix}${module}`);
+  });
+});
+
+const transformIgnorePatterns = [
+  // Ignore modules without es dir.
+  // Update: @babel/runtime should also be transformed
+  `[/\\\\]node_modules[/\\\\](?!${ignoreList.join('|')})[^/\\\\]+?[/\\\\](?!(es)[/\\\\])`,
+];
+
+function getTestRegex(libDir) {
+  if (['dist', 'lib', 'es', 'dist-min'].includes(libDir)) {
+    return 'demo\\.test\\.(j|t)sx?$';
+  }
+  return '.*\\.test\\.(j|t)sx?$';
+}
+
+module.exports = {
+  verbose: true,
+  testEnvironment: '@happy-dom/jest-environment',
+  setupFiles: ['./tests/setup.ts'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
+  modulePathIgnorePatterns: [],
+  moduleNameMapper: {
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
+  transform: {
+    '\\.tsx?$': resolve('codePreprocessor'),
+    '\\.(m?)js$': resolve('codePreprocessor'),
+    '\\.md$': resolve('demoPreprocessor'),
+    '\\.(jpg|png|gif|svg)$': resolve('imagePreprocessor'),
+  },
+  testRegex: getTestRegex(process.env.LIB_DIR),
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/demo/**',
+    '!src/**/__tests__/**',
+    '!src/version.ts',
+    '!src/index.ts',  // 纯重导出文件
+    '!src/A2UI/types/**',  // 纯类型文件
+  ],
+  transformIgnorePatterns,
+  globals: {
+    'ts-jest': {
+      tsConfig: './tsconfig.json',
+    },
+  },
+  testEnvironmentOptions: {
+    url: 'http://localhost/x-card',
+  },
+  bail: true,
+  maxWorkers: '50%',
+};
diff --git a/packages/x-card/.lintstagedrc.json b/packages/x-card/.lintstagedrc.json
new file mode 100644
index 0000000000..8b50598b6b
--- /dev/null
+++ b/packages/x-card/.lintstagedrc.json
@@ -0,0 +1,4 @@
+{
+  "*.{ts,tsx}": ["biome lint --fix"],
+  "*.{ts,tsx,less,md}": ["prettier --write"]
+}
\ No newline at end of file
diff --git a/packages/x-card/README.md b/packages/x-card/README.md
new file mode 100644
index 0000000000..135d81d133
--- /dev/null
+++ b/packages/x-card/README.md
@@ -0,0 +1,184 @@
+# @ant-design/x-card
+
+React card loader for dynamic content loading and management.
+
+## Features
+
+- 🚀 **Dynamic Loading**: Load cards asynchronously with configurable concurrency
+- 🔄 **Retry Mechanism**: Automatic retry with exponential backoff
+- ⚡ **Performance**: Optimized for large datasets with virtual scrolling support
+- 🎨 **Customizable**: Fully customizable card rendering and loading states
+- 📱 **Responsive**: Mobile-friendly responsive design
+- 🔧 **TypeScript**: Full TypeScript support
+
+## Installation
+
+```bash
+npm install @ant-design/x-card
+# or
+yarn add @ant-design/x-card
+# or
+pnpm add @ant-design/x-card
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { CardLoader } from '@ant-design/x-card';
+
+const App = () => {
+  const cards = [
+    {
+      id: '1',
+      title: 'Card 1',
+      content: 'This is card content',
+    },
+    {
+      id: '2',
+      title: 'Card 2',
+      content: 'Another card content',
+    },
+  ];
+
+  return <CardLoader cards={cards} />;
+};
+```
+
+### Advanced Usage
+
+```tsx
+import React from 'react';
+import { CardLoader, useCardLoader } from '@ant-design/x-card';
+
+const App = () => {
+  const { state, actions } = useCardLoader({
+    config: {
+      maxConcurrent: 5,
+      retryCount: 3,
+      timeout: 10000,
+    },
+    customLoader: async (card) => {
+      // Custom loading logic
+      const response = await fetch(`/api/cards/${card.id}`);
+      const data = await response.json();
+      return data.content;
+    },
+  });
+
+  React.useEffect(() => {
+    actions.loadCards([
+      { id: '1', title: 'Dynamic Card 1' },
+      { id: '2', title: 'Dynamic Card 2' },
+    ]);
+  }, []);
+
+  return (
+    <CardLoader
+      cards={state.cards}
+      renderLoading={(card) => <div>Loading {card.title}...</div>}
+      renderError={(error, card) => <div>Error: {error.message}</div>}
+    />
+  );
+};
+```
+
+### Using Hooks
+
+```tsx
+import React from 'react';
+import { useCardLoader } from '@ant-design/x-card';
+
+const App = () => {
+  const { state, actions } = useCardLoader();
+
+  const addNewCard = () => {
+    actions.addCard({
+      id: Date.now().toString(),
+      title: 'New Card',
+      content: 'Dynamic content',
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={addNewCard}>Add Card</button>
+      {state.cards.map((card) => (
+        <div key={card.id}>
+          <h3>{card.title}</h3>
+          <p>{card.content}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+```
+
+## API
+
+### CardLoader Props
+
+| Property         | Type               | Default | Description                   |
+| ---------------- | ------------------ | ------- | ----------------------------- |
+| cards            | CardLoaderConfig[] | []      | Array of card configurations  |
+| config           | CardLoaderConfig   | -       | Loader configuration          |
+| customLoader     | function           | -       | Custom card loading function  |
+| renderEmpty      | function           | -       | Custom empty state renderer   |
+| renderLoading    | function           | -       | Custom loading state renderer |
+| renderError      | function           | -       | Custom error state renderer   |
+| onLoadingChange  | function           | -       | Loading state change callback |
+| onCardLoad       | function           | -       | Card load success callback    |
+| onCardError      | function           | -       | Card load error callback      |
+| onAllCardsLoaded | function           | -       | All cards loaded callback     |
+
+### CardLoaderConfig
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | string | - | Unique card identifier |
+| title | string | - | Card title |
+| content | ReactNode | - | Card content |
+| type | 'default' \| 'info' \| 'success' \| 'warning' \| 'error' | 'default' | Card type |
+| loading | boolean | false | Loading state |
+| closable | boolean | false | Whether card can be closed |
+| size | 'small' \| 'middle' \| 'large' | 'middle' | Card size |
+| disabled | boolean | false | Whether card is disabled |
+| className | string | - | Custom CSS class |
+| style | CSSProperties | - | Custom inline style |
+| extra | ReactNode | - | Extra content in card header |
+
+### useCardLoader Hook
+
+Returns an object with:
+
+- `state`: Current loader state
+- `actions`: Available actions
+  - `addCard(card)`: Add a new card
+  - `removeCard(id)`: Remove a card
+  - `updateCard(id, updates)`: Update a card
+  - `reloadCard(id)`: Reload a card
+  - `clearCards()`: Clear all cards
+  - `getCardState(id)`: Get card state
+  - `loadCards(cards)`: Load multiple cards
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development
+npm run start
+
+# Run tests
+npm test
+
+# Build
+npm run compile
+```
+
+## License
+
+MIT
diff --git a/packages/x-card/package.json b/packages/x-card/package.json
new file mode 100644
index 0000000000..3acbeb8f92
--- /dev/null
+++ b/packages/x-card/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@ant-design/x-card",
+  "version": "2.3.0-beta.2",
+  "description": "React card loader for dynamic content loading and management",
+  "keywords": [
+    "A2UI",
+    "loader",
+    "react",
+    "ant-design"
+  ],
+  "homepage": "https://x.ant.design/x-card",
+  "bugs": {
+    "url": "https://github.com/ant-design/x/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ant-design/x"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
+  "scripts": {
+    "compile": "father build",
+    "prepublishOnly": "tsx ../../scripts/pre-publish.ts x-card",
+    "tsc": "tsc --noEmit",
+    "lint": "npm run version && npm run tsc && npm run lint:script && npm run lint:md",
+    "lint:md": "remark . -f -q",
+    "predist": "npm run prestart",
+    "prestart": "npm run version",
+    "pretest": "npm run prestart",
+    "precompile": "npm run prestart",
+    "lint:script": "biome lint",
+    "test": "jest --config .jest.js --no-cache --collect-coverage",
+    "coverage": "jest --config .jest.js --no-cache --collect-coverage --coverage",
+    "version": "tsx scripts/generate-version.ts",
+    "test:dekko": "tsx ./tests/dekko/index.test.ts",
+    "clean": "rm -rf es lib coverage dist",
+    "test:package-diff": "antd-tools run package-diff"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@babel/runtime": "^7.25.6",
+    "classnames": "^2.5.1",
+    "rc-util": "^5.43.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}
diff --git a/packages/x-card/scripts/generate-version.ts b/packages/x-card/scripts/generate-version.ts
new file mode 100644
index 0000000000..7b9fdc08ad
--- /dev/null
+++ b/packages/x-card/scripts/generate-version.ts
@@ -0,0 +1,10 @@
+import fs from 'fs';
+import path from 'path';
+
+const packageJson = require('../package.json');
+
+const versionFileContent = `// This file is auto generated by npm run version
+export default '${packageJson.version}';
+`;
+
+fs.writeFileSync(path.join(__dirname, '../src/version.ts'), versionFileContent, 'utf8');
diff --git a/packages/x-card/src/A2UI/Box.tsx b/packages/x-card/src/A2UI/Box.tsx
new file mode 100644
index 0000000000..e1ea805570
--- /dev/null
+++ b/packages/x-card/src/A2UI/Box.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { BoxProps } from './types/box';
+import Context from './Context';
+import { loadCatalog, type Catalog } from './catalog';
+import type { A2UICommand_v0_9 } from './types/command_v0.9';
+import type { A2UICommand_v0_8 } from './types/command_v0.8';
+
+const Box: React.FC<BoxProps> = ({ children, commands = [], components, onAction }) => {
+  const [catalogMap, setCatalogMap] = useState<Map<string, Catalog>>(new Map());
+  // Store surfaceId -> catalogId mapping
+  const [surfaceCatalogMap, setSurfaceCatalogMap] = useState<Map<string, string>>(new Map());
+  // Track the number of already-processed commands to avoid re-processing on every render
+  const processedCommandsCount = useRef(0);
+
+  /**
+   * Listen to command queue changes, handle createSurface (load catalog) and deleteSurface (clear mapping).
+   * The commands array is maintained by external demo, reference changes after each new command is appended, triggering this effect.
+   * Only new commands (appended since last render) are processed to avoid redundant work as the queue grows.
+   */
+  useEffect(() => {
+    // commands was cleared or reset — reset the counter and bail out
+    if (!commands || commands.length === 0) {
+      processedCommandsCount.current = 0;
+      return;
+    }
+
+    // commands array was replaced with a shorter one (e.g. reset by parent) — reset counter and reprocess from scratch
+    if (commands.length < processedCommandsCount.current) {
+      processedCommandsCount.current = 0;
+    }
+
+    // Only process commands added since the last effect run
+    const newCommands = commands.slice(processedCommandsCount.current);
+    if (newCommands.length === 0) return;
+
+    for (const cmd of newCommands) {
+      if ('createSurface' in cmd) {
+        const { surfaceId, catalogId } = (cmd as A2UICommand_v0_9 & { createSurface: any })
+          .createSurface;
+
+        if (catalogId) {
+          setSurfaceCatalogMap((prev) => {
+            if (prev.get(surfaceId) === catalogId) return prev;
+            return new Map(prev).set(surfaceId, catalogId);
+          });
+
+          // Load catalog (cached ones will be hit directly, no duplicate requests)
+          loadCatalog(catalogId)
+            .then((catalog) => {
+              setCatalogMap((prev) => {
+                if (prev.has(catalogId)) return prev;
+                return new Map(prev).set(catalogId, catalog);
+              });
+            })
+            .catch((error) => {
+              console.error(`Failed to load catalog ${catalogId}:`, error);
+            });
+        }
+      }
+
+      // Clear mapping in surfaceCatalogMap when deleteSurface
+      if ('deleteSurface' in cmd) {
+        const surfaceId = (cmd as { deleteSurface: { surfaceId: string } }).deleteSurface.surfaceId;
+        setSurfaceCatalogMap((prev) => {
+          if (!prev.has(surfaceId)) return prev;
+          const next = new Map(prev);
+          next.delete(surfaceId);
+          return next;
+        });
+      }
+    }
+
+    // Advance the pointer to the end of the current commands array
+    processedCommandsCount.current = commands.length;
+  }, [commands]);
+
+  return (
+    <Context.Provider
+      value={{
+        components,
+        commandQueue: commands as (A2UICommand_v0_9 | A2UICommand_v0_8)[],
+        onAction,
+        catalogMap,
+        surfaceCatalogMap,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};
+export default Box;
diff --git a/packages/x-card/src/A2UI/Card.tsx b/packages/x-card/src/A2UI/Card.tsx
new file mode 100644
index 0000000000..c80842a31f
--- /dev/null
+++ b/packages/x-card/src/A2UI/Card.tsx
@@ -0,0 +1,371 @@
+import React, { useEffect, useRef, useState } from 'react';
+import BoxContext from './Context';
+import { createComponentTransformer } from './format/components';
+import type { ComponentTransformer, ReactComponentTree } from './format/components';
+import type { Catalog } from './catalog';
+
+// v0.8 specific logic
+import { resolvePropsV08, extractDataUpdatesV08, applyDataModelUpdateV08 } from './Card.v0.8';
+
+// v0.9 specific logic
+import { resolvePropsV09, extractDataUpdatesV09, applyDataModelUpdateV09 } from './Card.v0.9';
+
+// Shared logic
+import { setValueByPath, validateComponentAgainstCatalog } from './utils';
+
+export interface CardProps {
+  id: string;
+}
+
+/** Recursively render a single node, child nodes are found via getById */
+function renderNode(
+  nodeId: string,
+  transformer: ComponentTransformer,
+  components: Record<string, React.ComponentType<any>>,
+  dataModel: Record<string, any>,
+  onAction?: (name: string, context: Record<string, any>, actionConfig?: any) => void,
+  onDataChange?: (path: string, value: any) => void,
+  catalog?: Catalog,
+  commandVersion?: 'v0.8' | 'v0.9',
+): React.ReactNode {
+  const node = transformer.getById(nodeId);
+
+  if (!node) return null;
+  return (
+    <NodeRenderer
+      key={nodeId}
+      node={node}
+      transformer={transformer}
+      components={components}
+      dataModel={dataModel}
+      onAction={onAction}
+      onDataChange={onDataChange}
+      catalog={catalog}
+      commandVersion={commandVersion}
+    />
+  );
+}
+
+interface NodeRendererProps {
+  node: ReactComponentTree;
+  transformer: ComponentTransformer;
+  components: Record<string, React.ComponentType<any>>;
+  dataModel: Record<string, any>;
+  onAction?: (name: string, context: Record<string, any>, actionConfig?: any) => void;
+  /** Callback when component writes back to dataModel via onChange, path is the binding path */
+  onDataChange?: (path: string, value: any) => void;
+  /** catalog for component validation */
+  catalog?: Catalog;
+  /** command version */
+  commandVersion?: 'v0.8' | 'v0.9';
+}
+
+const NodeRenderer: React.FC<NodeRendererProps> = ({
+  node,
+  transformer,
+  components,
+  dataModel,
+  onAction,
+  onDataChange,
+  catalog,
+  commandVersion = 'v0.8',
+}) => {
+  const { type, props, children } = node;
+
+  // Validate if component conforms to catalog definition
+  const validation = validateComponentAgainstCatalog(catalog, type, props);
+  if (!validation.valid || validation.errors.length > 0) {
+    // Output warnings in development environment
+    if (process.env.NODE_ENV === 'development') {
+      validation.errors.forEach((error) => {
+        console.warn(error);
+      });
+    }
+  }
+
+  // Find corresponding component from registered component mapping
+  const Component = components[type];
+
+  if (!Component) {
+    // Check if defined in catalog
+    if (catalog?.components && !catalog.components[type]) {
+      if (process.env.NODE_ENV === 'development') {
+        console.error(
+          `Component "${type}" is not registered and not defined in catalog. It will not be rendered.`,
+        );
+      }
+      return null;
+    }
+    // If defined in catalog but not registered, show warning
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(
+        `Component "${type}" is defined in catalog but not registered. Please provide a component implementation.`,
+      );
+    }
+    return null;
+  }
+
+  // Use different resolveProps based on version
+  const resolvedProps =
+    commandVersion === 'v0.9'
+      ? resolvePropsV09(props, dataModel)
+      : resolvePropsV08(props, dataModel);
+
+  // Inject onAction to all custom components, let component decide when and how to trigger
+  if (typeof Component !== 'string') {
+    // Wrap onAction to pass action configuration
+    resolvedProps.onAction = (name: string, context: Record<string, any>) => {
+      // Get action configuration from resolvedProps (path binding already resolved)
+      const actionConfig = resolvedProps.action;
+      onAction?.(name, context, actionConfig);
+    };
+
+    // Inject onDataChange for components to directly update dataModel
+    resolvedProps.onDataChange = onDataChange;
+  }
+
+  const childNodes = children?.map((childId) =>
+    renderNode(
+      childId,
+      transformer,
+      components,
+      dataModel,
+      onAction,
+      onDataChange,
+      catalog,
+      commandVersion,
+    ),
+  );
+
+  return <Component {...resolvedProps}>{childNodes}</Component>;
+};
+
+const Card: React.FC<CardProps> = ({ id }) => {
+  const {
+    commandQueue,
+    components = {},
+    onAction,
+    catalogMap,
+    surfaceCatalogMap,
+  } = React.useContext(BoxContext);
+
+  // Each Card instance holds independent transformer, maintaining their own component cache
+  const transformerRef = useRef<ComponentTransformer | null>(null);
+  if (transformerRef.current === null) {
+    transformerRef.current = createComponentTransformer();
+  }
+
+  // Get catalog corresponding to current surface
+  const catalogId = surfaceCatalogMap ? surfaceCatalogMap.get(id) : undefined;
+  const catalog = catalogId && catalogMap ? catalogMap.get(catalogId) : undefined;
+
+  // Use rootNode to drive re-render
+  const [rootNode, setRootNode] = useState<ReactComponentTree | null>(null);
+
+  // Data model, storing values written by updateDataModel
+  const [dataModel, setDataModel] = useState<Record<string, any>>({});
+
+  // Track command version of current surface (per-surface, avoid global shared pollution)
+  const [commandVersion, setCommandVersion] = useState<'v0.8' | 'v0.9'>('v0.8');
+
+  // Used to track if beginRendering command is received (v0.8), use ref to avoid triggering useEffect re-execution
+  const pendingRenderRef = useRef<{ surfaceId: string; root: string } | null>(null);
+  // Store converted component tree, waiting for beginRendering to trigger rendering
+  const pendingNodeTreeRef = useRef<ReactComponentTree | null>(null);
+  // Track if already rendered (use ref to avoid dependency cycle)
+  const hasRenderedRef = useRef(false);
+
+  /**
+   * Listen to command queue changes, consume all commands related to this Card (surfaceId === id).
+   * Use for...of to iterate through the entire queue, ensuring all commands in the same render cycle are processed.
+   */
+  useEffect(() => {
+    if (commandQueue.length === 0) return;
+
+    // Filter out commands belonging to this surface
+    const myCommands = commandQueue.filter((cmd) => {
+      if ('createSurface' in cmd) return cmd.createSurface.surfaceId === id;
+      if ('updateComponents' in cmd) return cmd.updateComponents.surfaceId === id;
+      if ('updateDataModel' in cmd) return cmd.updateDataModel.surfaceId === id;
+      if ('deleteSurface' in cmd) return cmd.deleteSurface.surfaceId === id;
+      if ('surfaceUpdate' in cmd) return cmd.surfaceUpdate.surfaceId === id;
+      if ('dataModelUpdate' in cmd) return cmd.dataModelUpdate.surfaceId === id;
+      if ('beginRendering' in cmd) return cmd.beginRendering.surfaceId === id;
+      return false;
+    });
+
+    if (myCommands.length === 0) return;
+
+    // Batch process all commands of this surface, execute in order
+    let nextDataModel = dataModel;
+    let nextRootNode = rootNode;
+    let nextCommandVersion = commandVersion;
+    let hasDataModelChange = false;
+    let hasRootNodeChange = false;
+
+    for (const cmd of myCommands) {
+      // ===== v0.9 command processing =====
+      if ('version' in cmd && cmd.version === 'v0.9') {
+        nextCommandVersion = 'v0.9';
+
+        if ('createSurface' in cmd) {
+          // createSurface is only for initialization, catalog loading is handled by Box
+          // If recreating (previously deleted), reset state
+          if (!hasRenderedRef.current) {
+            nextRootNode = null;
+            nextDataModel = {};
+            hasRootNodeChange = true;
+            hasDataModelChange = true;
+          }
+        }
+
+        if ('updateComponents' in cmd) {
+          const nodeTree = transformerRef.current!.transform(
+            cmd.updateComponents.components,
+            'v0.9',
+          );
+          if (nodeTree) {
+            nextRootNode = nodeTree;
+            hasRenderedRef.current = true;
+            hasRootNodeChange = true;
+          }
+        }
+
+        if ('updateDataModel' in cmd) {
+          const { path, value } = cmd.updateDataModel;
+          nextDataModel = applyDataModelUpdateV09(nextDataModel, path, value);
+          hasDataModelChange = true;
+        }
+
+        if ('deleteSurface' in cmd) {
+          nextRootNode = null;
+          nextDataModel = {};
+          hasRenderedRef.current = false;
+          hasRootNodeChange = true;
+          hasDataModelChange = true;
+          transformerRef.current!.reset();
+          pendingRenderRef.current = null;
+          pendingNodeTreeRef.current = null;
+        }
+
+        continue;
+      }
+
+      // ===== v0.8 command processing =====
+      nextCommandVersion = 'v0.8';
+
+      // surfaceUpdate: define component structure
+      if ('surfaceUpdate' in cmd) {
+        const nodeTree = transformerRef.current!.transform(cmd.surfaceUpdate.components, 'v0.8');
+        pendingNodeTreeRef.current = nodeTree;
+
+        // If already rendered, update directly
+        if (hasRenderedRef.current) {
+          const rootNodeFromCache = transformerRef.current!.getById('root');
+          if (rootNodeFromCache) {
+            nextRootNode = rootNodeFromCache;
+            hasRootNodeChange = true;
+          }
+        }
+      }
+
+      // dataModelUpdate: update data model (v0.8 format)
+      if ('dataModelUpdate' in cmd) {
+        const { contents } = cmd.dataModelUpdate;
+        nextDataModel = applyDataModelUpdateV08(nextDataModel, contents);
+        hasDataModelChange = true;
+      }
+
+      // beginRendering: start rendering
+      if ('beginRendering' in cmd) {
+        const { root } = cmd.beginRendering;
+        const nodeTree = transformerRef.current!.getById(root);
+        if (nodeTree) {
+          nextRootNode = nodeTree;
+          pendingRenderRef.current = null;
+          hasRenderedRef.current = true;
+          hasRootNodeChange = true;
+        } else {
+          pendingRenderRef.current = { surfaceId: id, root };
+        }
+      }
+
+      // deleteSurface: delete surface
+      if ('deleteSurface' in cmd) {
+        nextRootNode = null;
+        nextDataModel = {};
+        hasRenderedRef.current = false;
+        hasRootNodeChange = true;
+        hasDataModelChange = true;
+        transformerRef.current!.reset();
+        pendingRenderRef.current = null;
+        pendingNodeTreeRef.current = null;
+      }
+    }
+
+    // Batch submit state changes, reduce re-render count
+    if (nextCommandVersion !== commandVersion) {
+      setCommandVersion(nextCommandVersion);
+    }
+    if (hasRootNodeChange) {
+      setRootNode(nextRootNode);
+    }
+    if (hasDataModelChange) {
+      setDataModel(nextDataModel);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [commandQueue, id]);
+
+  if (!rootNode) {
+    return null;
+  }
+
+  /**
+   * Handler when action is triggered
+   * Use different extractDataUpdates and resolveActionContext based on version
+   */
+  const handleAction = (name: string, context: Record<string, any>, actionConfig?: any) => {
+    // Use different extractDataUpdates based on version
+    const dataUpdates =
+      commandVersion === 'v0.9'
+        ? extractDataUpdatesV09(actionConfig, context)
+        : extractDataUpdatesV08(actionConfig, context);
+
+    // Update dataModel first
+    let newDataModel = dataModel;
+    if (dataUpdates.length > 0) {
+      newDataModel = dataUpdates.reduce((prev, { path, value }) => {
+        return setValueByPath(prev, path, value);
+      }, dataModel);
+
+      setDataModel(newDataModel);
+    }
+
+    // Report event to upper layer
+    onAction?.({
+      name,
+      surfaceId: id,
+      context: { ...context },
+    });
+  };
+
+  /** Component onChange writes back to dataModel (two-way binding) */
+  const handleDataChange = (path: string, value: any) => {
+    setDataModel((prev) => setValueByPath(prev, path, value));
+  };
+
+  return (
+    <NodeRenderer
+      node={rootNode}
+      transformer={transformerRef.current!}
+      components={components as Record<string, React.ComponentType<any>>}
+      dataModel={dataModel}
+      onAction={handleAction}
+      onDataChange={handleDataChange}
+      catalog={catalog}
+      commandVersion={commandVersion}
+    />
+  );
+};
+
+export default Card;
diff --git a/packages/x-card/src/A2UI/Card.v0.8.ts b/packages/x-card/src/A2UI/Card.v0.8.ts
new file mode 100644
index 0000000000..fd15571cfd
--- /dev/null
+++ b/packages/x-card/src/A2UI/Card.v0.8.ts
@@ -0,0 +1,207 @@
+/**
+ * Card v0.8 版本专用逻辑
+ *
+ * v0.8 命令格式：
+ * - surfaceUpdate: { surfaceId, components }
+ * - dataModelUpdate: { surfaceId, contents: [{ key, valueMap: [{ key, valueString }] }] }
+ * - beginRendering: { surfaceId, root }
+ *
+ * v0.8 action 格式：
+ * - action.name: string
+ * - action.context: [{ key: string, value: { path: string } }]
+ *
+ * v0.8 特殊处理：
+ * - props 中的 { literalString: string } 需要解析为字符串
+ * - action.context 中的 { path } 是写入目标，不应被 resolveProps 解析
+ */
+
+import {
+  getValueByPath,
+  setValueByPath,
+  isPathValue,
+  isPathObject,
+  validateComponentAgainstCatalog,
+} from './utils';
+
+/** 判断一个值是否为 { literalString: string } 形式的字面字符串对象 */
+export function isLiteralStringObject(val: any): val is { literalString: string } {
+  return val !== null && typeof val === 'object' && typeof val.literalString === 'string';
+}
+
+/** 将 props 中的路径值替换为 dataModel 中的真实值（v0.8 版本） */
+export function resolvePropsV08(
+  props: Record<string, any>,
+  dataModel: Record<string, any>,
+): Record<string, any> {
+  const resolved: Record<string, any> = {};
+  for (const [key, val] of Object.entries(props)) {
+    resolved[key] = resolveValueV08(val, dataModel);
+  }
+  return resolved;
+}
+
+/**
+ * 递归解析值中的路径引用（v0.8 版本）
+ *
+ * 特殊处理：
+ * - { literalString: string } → 解析为字符串
+ * - { path: string } → 从 dataModel 读取值
+ * - action.context 中的 { key, value: { path } } → 保留 { path } 结构（写入目标）
+ */
+function resolveValueV08(val: any, dataModel: Record<string, any>, isActionContext = false): any {
+  // 处理 { literalString: string } 形式的字面字符串
+  if (isLiteralStringObject(val)) {
+    return val.literalString;
+  }
+  // 处理 { path: string } 形式的路径对象
+  // 但在 action.context 中，value 字段的 { path } 是写入目标，需要保留
+  if (isPathObject(val)) {
+    if (isActionContext) {
+      // 在 action.context 中，保留 { path } 结构
+      return val;
+    }
+    return getValueByPath(dataModel, val.path);
+  }
+  // 处理字符串路径（向后兼容）
+  if (isPathValue(val)) {
+    return getValueByPath(dataModel, val);
+  }
+  // 数组递归处理
+  if (Array.isArray(val)) {
+    return val.map((item) => resolveValueV08(item, dataModel, false));
+  }
+  // 对象递归处理
+  if (val && typeof val === 'object') {
+    const result: Record<string, any> = {};
+    for (const [k, v] of Object.entries(val)) {
+      // 特殊处理：如果当前在 action.context 的 item 中（有 key 和 value 字段），
+      // 则 value 字段应该保留 { path } 结构
+      if (k === 'value' && 'key' in val) {
+        result[k] = resolveValueV08(v, dataModel, true);
+      } else {
+        result[k] = resolveValueV08(v, dataModel, false);
+      }
+    }
+    return result;
+  }
+  // 字面值直接使用
+  return val;
+}
+
+/**
+ * 解析 action.context 中的路径绑定，从 dataModel 中提取实际值
+ * v0.8 格式: action.context 是数组 [{ key, value: { path: string } | literal }]
+ */
+export function resolveActionContextV08(
+  action: any,
+  dataModel: Record<string, any>,
+): Record<string, any> | undefined {
+  const context = action?.context;
+  if (!Array.isArray(context)) {
+    return undefined;
+  }
+
+  const resolved: Record<string, any> = {};
+  for (const item of context) {
+    if (item && typeof item === 'object' && 'key' in item && 'value' in item) {
+      const pathObj = item.value;
+      // 处理 { path: string } 形式的路径绑定
+      if (isPathObject(pathObj)) {
+        resolved[item.key] = getValueByPath(dataModel, pathObj.path);
+      }
+      // 处理 { literalString: string } 形式的字面字符串
+      else if (isLiteralStringObject(pathObj)) {
+        resolved[item.key] = pathObj.literalString;
+      }
+      // 字面值直接使用
+      else {
+        resolved[item.key] = item.value;
+      }
+    }
+  }
+  return Object.keys(resolved).length > 0 ? resolved : undefined;
+}
+
+/**
+ * 根据 action.context 中的路径配置，将组件传递的值写入 dataModel
+ * v0.8 格式: action.context 是数组 [{ key, value: { path: string } }]
+ *
+ * 注意：v0.8 的 action.context 中的 { path } 是写入目标路径
+ *
+ * @param action action 配置对象
+ * @param componentContext 组件传递的上下文数据
+ * @returns 需要更新的数据路径和值的数组
+ */
+export function extractDataUpdatesV08(
+  action: any,
+  componentContext: Record<string, any>,
+): Array<{ path: string; value: any }> {
+  const context = action?.context;
+  if (!Array.isArray(context)) {
+    return [];
+  }
+
+  const updates: Array<{ path: string; value: any }> = [];
+  for (const item of context) {
+    if (item && typeof item === 'object' && 'key' in item && 'value' in item) {
+      const pathObj = item.value;
+      // 只处理 { path: string } 形式的路径绑定
+      if (isPathObject(pathObj)) {
+        // 从组件传递的 context 中查找对应 key 的值
+        const componentValue = componentContext[item.key];
+        if (componentValue !== undefined) {
+          updates.push({ path: pathObj.path, value: componentValue });
+        }
+      }
+    }
+  }
+  return updates;
+}
+
+/**
+ * 处理 v0.8 的 dataModelUpdate 命令
+ * v0.8 格式: contents 支持:
+ *   - [{ key, valueString }] - 直接存储字符串值
+ *   - [{ key, valueMap: [{ key, valueString }] }] - 转换为对象
+ *
+ * 示例输入:
+ * contents: [
+ *   { key: 'products', valueString: '[...]' },
+ *   { key: 'res', valueMap: [{ key: 'time', valueString: '...' }] }
+ * ]
+ *
+ * 输出 dataModel:
+ * { products: '[...]', res: { time: '...' } }
+ */
+export function applyDataModelUpdateV08(
+  prevDataModel: Record<string, any>,
+  contents: Array<{
+    key: string;
+    valueString?: string;
+    valueMap?: Array<{ key: string; valueString: string }>;
+  }>,
+): Record<string, any> {
+  const next = { ...prevDataModel };
+  for (const item of contents) {
+    if ('valueString' in item && item.valueString !== undefined) {
+      // 直接存储字符串值
+      next[item.key] = item.valueString;
+    } else if (Array.isArray(item.valueMap)) {
+      // valueMap 转换为对象
+      const valueObj: Record<string, any> = {};
+      for (const { key, valueString } of item.valueMap) {
+        valueObj[key] = valueString;
+      }
+      next[item.key] = valueObj;
+    }
+  }
+  return next;
+}
+
+export {
+  getValueByPath,
+  setValueByPath,
+  isPathValue,
+  isPathObject,
+  validateComponentAgainstCatalog,
+};
diff --git a/packages/x-card/src/A2UI/Card.v0.9.ts b/packages/x-card/src/A2UI/Card.v0.9.ts
new file mode 100644
index 0000000000..c81e532ae1
--- /dev/null
+++ b/packages/x-card/src/A2UI/Card.v0.9.ts
@@ -0,0 +1,190 @@
+/**
+ * Card v0.9 版本专用逻辑
+ *
+ * v0.9 命令格式：
+ * - version: 'v0.9'
+ * - updateComponents: { surfaceId, components }
+ * - updateDataModel: { surfaceId, path, value }
+ * - deleteSurface: { surfaceId }
+ *
+ * v0.9 action 格式：
+ * - action.event.name: string
+ * - action.event.context: { [key]: { path: string } | literal }
+ */
+
+import {
+  getValueByPath,
+  setValueByPath,
+  isPathValue,
+  isPathObject,
+  validateComponentAgainstCatalog,
+} from './utils';
+
+/** 将 props 中的路径值替换为 dataModel 中的真实值 */
+export function resolvePropsV09(
+  props: Record<string, any>,
+  dataModel: Record<string, any>,
+): Record<string, any> {
+  const resolved: Record<string, any> = {};
+  for (const [key, val] of Object.entries(props)) {
+    if (key === 'action') {
+      // action.event.context 中的 { path } 是写入目标，需要精确处理，不能走通用路径解析
+      resolved[key] = resolveActionPropV09(val, dataModel);
+    } else {
+      resolved[key] = resolveValueV09(val, dataModel);
+    }
+  }
+  return resolved;
+}
+
+/**
+ * 精确处理 action prop：
+ * - action.event.name / 其他字段 → 正常解析路径引用
+ * - action.event.context → 保留所有 { path } 结构（写入目标，不做读取替换）
+ */
+function resolveActionPropV09(action: any, dataModel: Record<string, any>): any {
+  if (!action || typeof action !== 'object') return action;
+
+  const result: Record<string, any> = {};
+  for (const [k, v] of Object.entries(action)) {
+    if (k === 'event') {
+      result[k] = resolveActionEventV09(v, dataModel);
+    } else {
+      result[k] = resolveValueV09(v, dataModel);
+    }
+  }
+  return result;
+}
+
+/**
+ * 精确处理 action.event：
+ * - event.context → 原样保留（{ path } 是写入目标）
+ * - event 其他字段（如 name）→ 正常解析
+ */
+function resolveActionEventV09(event: any, dataModel: Record<string, any>): any {
+  if (!event || typeof event !== 'object') return event;
+
+  const result: Record<string, any> = {};
+  for (const [k, v] of Object.entries(event)) {
+    if (k === 'context') {
+      // context 中的 { path } 是写入目标，原样保留，不做路径读取
+      result[k] = v;
+    } else {
+      result[k] = resolveValueV09(v, dataModel);
+    }
+  }
+  return result;
+}
+
+/**
+ * 递归解析值中的路径引用（v0.9 版本）
+ *
+ * - { path: string } → 从 dataModel 读取值
+ * - 字符串路径（/xxx）→ 从 dataModel 读取值（向后兼容）
+ * - 数组 / 对象 → 递归处理
+ * - 字面值 → 原样返回
+ *
+ * 注意：action.event.context 的特殊处理已在 resolvePropsV09 入口处分支，
+ * 此函数无需感知 action 上下文，保持纯粹的递归解析逻辑。
+ */
+function resolveValueV09(val: any, dataModel: Record<string, any>): any {
+  // 处理 { path: string } 形式的路径对象
+  if (isPathObject(val)) {
+    return getValueByPath(dataModel, val.path);
+  }
+  // 处理字符串路径（向后兼容）
+  if (isPathValue(val)) {
+    return getValueByPath(dataModel, val);
+  }
+  // 数组递归处理
+  if (Array.isArray(val)) {
+    return val.map((item) => resolveValueV09(item, dataModel));
+  }
+  // 对象递归处理
+  if (val && typeof val === 'object') {
+    const result: Record<string, any> = {};
+    for (const [k, v] of Object.entries(val)) {
+      result[k] = resolveValueV09(v, dataModel);
+    }
+    return result;
+  }
+  // 字面值直接使用
+  return val;
+}
+
+/**
+ * 解析 action.event.context 中的路径绑定，从 dataModel 中提取实际值
+ * v0.9 格式: action.event.context 是对象 { key: { path: string } | literal }
+ */
+export function resolveActionContextV09(
+  action: any,
+  dataModel: Record<string, any>,
+): Record<string, any> | undefined {
+  const context = action?.event?.context;
+  if (!context || typeof context !== 'object' || Array.isArray(context)) {
+    return undefined;
+  }
+
+  const resolved: Record<string, any> = {};
+  for (const [key, val] of Object.entries(context)) {
+    // 处理 { path: string } 形式的路径绑定
+    if (isPathObject(val)) {
+      resolved[key] = getValueByPath(dataModel, (val as { path: string }).path);
+    }
+    // 字面值直接使用
+    else {
+      resolved[key] = val;
+    }
+  }
+  return resolved;
+}
+
+/**
+ * 根据 action.event.context 中的路径配置，将组件传递的值写入 dataModel
+ * v0.9 格式: action.event.context 是对象 { key: { path: string } }
+ * @param action action 配置对象
+ * @param componentContext 组件传递的上下文数据
+ * @returns 需要更新的数据路径和值的数组
+ */
+export function extractDataUpdatesV09(
+  action: any,
+  componentContext: Record<string, any>,
+): Array<{ path: string; value: any }> {
+  const context = action?.event?.context;
+  if (!context || typeof context !== 'object' || Array.isArray(context)) {
+    return [];
+  }
+
+  const updates: Array<{ path: string; value: any }> = [];
+  for (const [key, val] of Object.entries(context)) {
+    // 只处理 { path: string } 形式的路径绑定
+    if (isPathObject(val)) {
+      // 从组件传递的 context 中查找对应 key 的值
+      const componentValue = componentContext[key];
+      if (componentValue !== undefined) {
+        updates.push({ path: (val as { path: string }).path, value: componentValue });
+      }
+    }
+  }
+  return updates;
+}
+
+/**
+ * 处理 v0.9 的 updateDataModel 命令
+ * 将路径值写入 dataModel
+ */
+export function applyDataModelUpdateV09(
+  prevDataModel: Record<string, any>,
+  path: string,
+  value: any,
+): Record<string, any> {
+  return setValueByPath(prevDataModel, path, value);
+}
+
+export {
+  getValueByPath,
+  setValueByPath,
+  isPathValue,
+  isPathObject,
+  validateComponentAgainstCatalog,
+};
diff --git a/packages/x-card/src/A2UI/Context.tsx b/packages/x-card/src/A2UI/Context.tsx
new file mode 100644
index 0000000000..0be4613548
--- /dev/null
+++ b/packages/x-card/src/A2UI/Context.tsx
@@ -0,0 +1,26 @@
+import { createContext } from 'react';
+import { BoxProps, ActionPayload } from './types/box';
+import type { Catalog } from './catalog';
+import type { A2UICommand_v0_9 } from './types/command_v0.9';
+import type { A2UICommand_v0_8 } from './types/command_v0.8';
+
+interface IBoxContext {
+  components: BoxProps['components'];
+  /**
+   * Command queue: maintained by external demo, entire array reference changes after each new command is appended.
+   * Card listens to this queue, filters commands belonging to its surfaceId and processes them in batch.
+   */
+  commandQueue: (A2UICommand_v0_9 | A2UICommand_v0_8)[];
+  onAction?: (payload: ActionPayload) => void;
+  /** catalogId -> Catalog mapping */
+  catalogMap?: Map<string, Catalog>;
+  /** surfaceId -> catalogId mapping */
+  surfaceCatalogMap?: Map<string, string>;
+}
+
+const BoxContext = createContext<IBoxContext>({
+  components: {},
+  commandQueue: [],
+});
+
+export default BoxContext;
diff --git a/packages/x-card/src/A2UI/__tests__/Box.coverage.test.tsx b/packages/x-card/src/A2UI/__tests__/Box.coverage.test.tsx
new file mode 100644
index 0000000000..86cda19ef1
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/Box.coverage.test.tsx
@@ -0,0 +1,419 @@
+/**
+ * Box.tsx 和 components.ts 覆盖率补充测试用例
+ * 覆盖：Box loadCatalog 错误处理、components transform 空数组分支、explicitList 分支
+ */
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Box from '../Box';
+import Card from '../Card';
+import { registerCatalog, clearCatalogCache } from '../catalog';
+import { createComponentTransformer } from '../format/components';
+import type { ComponentWrapper_v0_8 } from '../types/command_v0.8';
+
+// Mock fetch
+const mockFetch = jest.fn();
+global.fetch = mockFetch;
+
+// Mock console
+const originalConsole = { ...console };
+beforeEach(() => {
+  console.log = jest.fn();
+  console.warn = jest.fn();
+  console.error = jest.fn();
+  mockFetch.mockClear();
+});
+
+afterEach(() => {
+  console.log = originalConsole.log;
+  console.warn = originalConsole.warn;
+  console.error = originalConsole.error;
+  clearCatalogCache();
+});
+
+describe('Box.tsx coverage', () => {
+  describe('createSurface without catalogId', () => {
+    it('should handle createSurface without catalogId', async () => {
+      // 测试覆盖 Box.tsx 行 34: catalogId 为 falsy 的分支
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: '', // 空 catalogId 测试 falsy 分支
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 不应该打印 catalog loaded 日志（因为 catalogId 为空）
+      expect(console.log).not.toHaveBeenCalledWith(
+        'Box: catalog loaded',
+        expect.anything(),
+        expect.anything(),
+      );
+    });
+  });
+
+  describe('loadCatalog error handling', () => {
+    it('should handle catalog load failure', async () => {
+      // 测试覆盖 Box.tsx 行 53: loadCatalog 失败时的错误处理
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'https://example.com/fail-catalog.json',
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalledWith(
+          expect.stringContaining('Failed to load catalog'),
+          expect.any(Error),
+        );
+      });
+    });
+
+    it('should skip setting catalog if already cached', async () => {
+      // 测试覆盖 Box.tsx 行 47: catalog 已缓存时跳过 setCatalogMap
+      const catalogUrl = 'https://example.com/cached-catalog.json';
+
+      // 先注册 catalog 到缓存
+      registerCatalog({
+        $id: catalogUrl,
+        components: {
+          TestComponent: { type: 'object' },
+        },
+      });
+
+      const TestComponent: React.FC = () => <div data-testid="test">Test</div>;
+
+      // 第一次渲染，catalog 已在缓存中
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: catalogUrl,
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 等待 useEffect 执行完成（catalog 从缓存加载）
+      await waitFor(() => {
+        // 由于 catalog 已注册，loadCatalog 会直接返回缓存
+        expect(mockFetch).not.toHaveBeenCalled();
+      });
+
+      // 清除 console.log mock
+      (console.log as jest.Mock).mockClear();
+
+      // 重新渲染相同的命令，catalog 已缓存
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: catalogUrl,
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 由于 catalog 已缓存，不应该再调用 fetch
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+
+    it('should return prev map when catalogId already exists', async () => {
+      // 专门测试 Box.tsx 行 46-48: prev.has(catalogId) 返回 true 的分支
+      const catalogUrl = 'https://example.com/duplicate-catalog.json';
+
+      registerCatalog({
+        $id: catalogUrl,
+        components: {
+          TestComponent: { type: 'object' },
+        },
+      });
+
+      const TestComponent: React.FC = () => <div data-testid="test">Test</div>;
+
+      // 使用 act 来确保状态更新完成
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: catalogUrl,
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 等待第一次加载完成
+      await waitFor(() => {
+        // catalog 从缓存加载，不需要 fetch
+        expect(mockFetch).not.toHaveBeenCalled();
+      });
+
+      // 清空 mock
+      (console.log as jest.Mock).mockClear();
+
+      // 再次触发相同的 createSurface 命令（新数组引用）
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: catalogUrl,
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 等待 useEffect 执行
+      await waitFor(() => {
+        // 由于 catalog 已缓存，fetch 不应该被调用
+        expect(mockFetch).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
+
+describe('components.ts coverage', () => {
+  describe('transform with empty components', () => {
+    it('should return null when components array is empty', () => {
+      // 测试覆盖行 112-113: 空数组时返回缓存的 root 或 null
+      const transformer = createComponentTransformer();
+
+      // 初始空数组应返回 null
+      const result1 = transformer.transform([], 'v0.9');
+      expect(result1).toBeNull();
+
+      // 先添加一些组件
+      transformer.transform(
+        [
+          {
+            id: 'root',
+            component: 'Container',
+          },
+        ],
+        'v0.9',
+      );
+
+      // 再用空数组调用，应该返回缓存的 root
+      const result2 = transformer.transform([], 'v0.9');
+      expect(result2).not.toBeNull();
+      expect(result2!.type).toBe('Container');
+    });
+
+    it('should return null for undefined/null components', () => {
+      const transformer = createComponentTransformer();
+
+      // @ts-ignore - 测试边界情况
+      const result = transformer.transform(null, 'v0.9');
+      expect(result).toBeNull();
+    });
+
+    it('should return cached root for non-array input', () => {
+      const transformer = createComponentTransformer();
+
+      // 先添加组件
+      transformer.transform(
+        [
+          {
+            id: 'root',
+            component: 'Test',
+          },
+        ],
+        'v0.9',
+      );
+
+      // @ts-ignore - 测试边界情况
+      const result = transformer.transform('not-an-array', 'v0.9');
+      expect(result).not.toBeNull();
+    });
+  });
+
+  describe('explicitList children parsing', () => {
+    it('should parse explicitList children in v0.8', () => {
+      // 测试覆盖行 50: isExplicitList 分支
+      const transformer = createComponentTransformer();
+
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              children: {
+                explicitList: ['child1', 'child2'],
+              },
+            },
+          },
+        },
+        {
+          id: 'child1',
+          component: {
+            Text: { text: 'Child 1' },
+          },
+        },
+        {
+          id: 'child2',
+          component: {
+            Text: { text: 'Child 2' },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+      expect(result!.children).toEqual(['child1', 'child2']);
+
+      // 验证子节点
+      const child1 = transformer.getById('child1');
+      expect(child1).toBeDefined();
+      expect(child1!.type).toBe('Text');
+    });
+
+    it('should parse array children in v0.8 (not explicitList)', () => {
+      // 测试覆盖行 51-52: children 是数组但不是 explicitList 的分支
+      const transformer = createComponentTransformer();
+
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              // 普通数组形式，不是 explicitList
+              children: ['child1'],
+            },
+          },
+        },
+        {
+          id: 'child1',
+          component: {
+            Text: { text: 'Child 1' },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+      expect(result!.children).toEqual(['child1']);
+    });
+
+    it('should handle non-array, non-explicitList children in v0.8', () => {
+      // 测试覆盖行 51 的 false 分支: children 存在但既不是 explicitList 也不是数组
+      const transformer = createComponentTransformer();
+
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              // children 是一个对象但不是 explicitList，也不是数组
+              // 这种情况下 children 会被跳过
+              children: { someOtherProperty: 'value' } as any,
+            },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+      // children 应该是 undefined，因为不是 explicitList 也不是数组
+      expect(result!.children).toBeUndefined();
+    });
+
+    it('should handle child property instead of children', () => {
+      // 测试覆盖行 54-55: 使用 child 而不是 children
+      const transformer = createComponentTransformer();
+
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              child: 'singleChild',
+            },
+          },
+        },
+        {
+          id: 'singleChild',
+          component: {
+            Text: { text: 'Single Child' },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+      expect(result!.children).toEqual(['singleChild']);
+    });
+  });
+
+  describe('transform with default version', () => {
+    it('should default to v0.8 when version not specified', () => {
+      const transformer = createComponentTransformer();
+
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Test: { value: 'test' },
+          },
+        },
+      ];
+
+      // @ts-ignore - 测试默认版本
+      const result = transformer.transform(components);
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Test');
+    });
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/Card.coverage.test.tsx b/packages/x-card/src/A2UI/__tests__/Card.coverage.test.tsx
new file mode 100644
index 0000000000..de30125431
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/Card.coverage.test.tsx
@@ -0,0 +1,729 @@
+/**
+ * Card.tsx 覆盖率补充测试用例
+ * 覆盖：v0.8 hasRenderedRef 分支、dataModelUpdate、handleAction dataUpdates reduce、handleDataChange
+ */
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Box from '../Box';
+import Card from '../Card';
+import { registerCatalog, clearCatalogCache } from '../catalog';
+
+// Mock console
+const originalConsole = { ...console };
+const originalEnv = process.env;
+
+beforeEach(() => {
+  console.log = jest.fn();
+  console.warn = jest.fn();
+  console.error = jest.fn();
+});
+
+afterEach(() => {
+  console.log = originalConsole.log;
+  console.warn = originalConsole.warn;
+  console.error = originalConsole.error;
+  clearCatalogCache();
+  process.env = originalEnv;
+});
+
+describe('Card.tsx coverage', () => {
+  describe('development environment branches', () => {
+    it('should warn in development mode when component not registered but in catalog', async () => {
+      // 测试覆盖行 79-83, 92-100: process.env.NODE_ENV === 'development' 分支
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development' as any;
+
+      // 注册 catalog，但不注册组件
+      registerCatalog({
+        $id: 'test-catalog',
+        components: {
+          TestComponent: { type: 'object' },
+        },
+      });
+
+      const { unmount } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'test-catalog',
+              },
+            },
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        // 在开发模式下，组件在 catalog 中定义但未注册时应该有警告
+        expect(console.warn).toHaveBeenCalledWith(
+          expect.stringContaining('is defined in catalog but not registered'),
+        );
+      });
+
+      process.env.NODE_ENV = originalEnv;
+      unmount();
+    });
+
+    it('should error in development mode when component not in catalog', async () => {
+      // 测试覆盖行 92-97: 组件不在 catalog 中时应该有错误
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development' as any;
+
+      // 注册 catalog，但不包含目标组件
+      registerCatalog({
+        $id: 'test-catalog-2',
+        components: {
+          OtherComponent: { type: 'object' },
+        },
+      });
+
+      const { unmount } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'test-catalog-2',
+              },
+            },
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'UnknownComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        // 在开发模式下，组件不在 catalog 中且未注册时应该有错误
+        expect(console.error).toHaveBeenCalledWith(
+          expect.stringContaining('is not registered and not defined in catalog'),
+        );
+      });
+
+      process.env.NODE_ENV = originalEnv;
+      unmount();
+    });
+  });
+
+  describe('NodeRenderer branches', () => {
+    it('should not inject onAction when Component is a string (HTML element)', async () => {
+      // 测试覆盖行 115: typeof Component !== 'string' 的 false 分支
+      // 当 Component 是字符串（如 'div'）时，不应该注入 onAction
+
+      // 使用 'div' 作为组件
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'div',
+                  },
+                ],
+              },
+            },
+          ]}
+          // @ts-ignore - 测试字符串组件
+          components={{ div: 'div' }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 应该渲染成功
+      await waitFor(() => {
+        expect(screen.queryByText('div')).toBeNull(); // div 不会渲染文本
+      });
+    });
+
+    it('should return null when node not found in renderNode', async () => {
+      // 测试覆盖行 33: renderNode 中 node 不存在时返回 null
+      // 这发生在 children 引用的节点不存在时
+
+      const ParentComponent: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+        <div data-testid="parent">{children}</div>
+      );
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'ParentComponent',
+                    children: ['nonExistentChild'], // 引用不存在的子节点
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ ParentComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 应该渲染父组件，但子节点为空（因为不存在）
+      await waitFor(() => {
+        expect(screen.getByTestId('parent')).toBeInTheDocument();
+        expect(screen.getByTestId('parent').children.length).toBe(0);
+      });
+    });
+  });
+
+  describe('v0.8 hasRenderedRef branch', () => {
+    it('should update from cache when hasRenderedRef is true after rerender', async () => {
+      // 测试覆盖行 214-216: v0.8 中已经渲染过后，收到新的 surfaceUpdate 时直接从缓存更新
+      const TestComponent: React.FC<{ text?: string }> = ({ text }) => (
+        <div data-testid="test-component">{text || 'empty'}</div>
+      );
+
+      // 先进行初始渲染并触发 beginRendering
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: {
+                      TestComponent: {
+                        text: 'initial',
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              beginRendering: {
+                surfaceId: 'card1',
+                root: 'root',
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      expect(screen.getByTestId('test-component').textContent).toBe('initial');
+
+      // 发送新的 surfaceUpdate 命令，此时 hasRenderedRef 为 true
+      rerender(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: {
+                      TestComponent: {
+                        text: 'updated',
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 由于 hasRenderedRef 为 true，应该从缓存更新 root 节点
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component').textContent).toBe('updated');
+      });
+    });
+  });
+
+  describe('v0.8 dataModelUpdate command', () => {
+    it('should apply dataModelUpdate in v0.8 mode', async () => {
+      // 测试覆盖行 223-224: v0.8 dataModelUpdate 命令
+      const TestComponent: React.FC<{ value?: string }> = ({ value }) => (
+        <div data-testid="bound-value">{value || 'no value'}</div>
+      );
+
+      // 先设置组件结构和数据绑定
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: {
+                      TestComponent: {
+                        value: { path: '/data/time' },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              beginRendering: {
+                surfaceId: 'card1',
+                root: 'root',
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 初始应该显示 no value
+      expect(screen.getByTestId('bound-value').textContent).toBe('no value');
+
+      // 发送 dataModelUpdate 命令 - 使用正确的 v0.8 格式
+      // v0.8 dataModelUpdate 格式: contents: [{ key: string, valueMap: [{ key: string, valueString: string }] }]
+      rerender(
+        <Box
+          commands={[
+            {
+              dataModelUpdate: {
+                surfaceId: 'card1',
+                contents: [
+                  {
+                    key: 'data',
+                    valueMap: [{ key: 'time', valueString: 'data from update' }],
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 等待数据更新
+      await waitFor(() => {
+        expect(screen.getByTestId('bound-value').textContent).toBe('data from update');
+      });
+    });
+  });
+
+  describe('handleAction dataUpdates reduce', () => {
+    it('should apply dataUpdates in handleAction with reduce', async () => {
+      // 测试覆盖行 281-286: handleAction 中 dataUpdates.length > 0 时的 reduce 逻辑
+      const onAction = jest.fn();
+
+      // 创建一个带有 action 配置的组件
+      const ClickableComponent: React.FC<{
+        onAction?: (name: string, ctx: any) => void;
+        action?: any;
+      }> = ({ onAction: componentOnAction }) => (
+        <button
+          type="button"
+          data-testid="click-btn"
+          onClick={() =>
+            componentOnAction?.('click', {
+              resultValue: 'clicked-value',
+            })
+          }
+        >
+          Click
+        </button>
+      );
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'ClickableComponent',
+                    // action 配置，包含 path 绑定
+                    // v0.9 格式: action.event.context
+                    action: {
+                      event: {
+                        context: {
+                          resultValue: { path: '/result/value' },
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ ClickableComponent }}
+          onAction={onAction}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 点击按钮触发 action
+      fireEvent.click(screen.getByTestId('click-btn'));
+
+      await waitFor(() => {
+        expect(onAction).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: 'click',
+            surfaceId: 'card1',
+            context: expect.objectContaining({
+              resultValue: 'clicked-value',
+            }),
+          }),
+        );
+      });
+    });
+
+    it('should apply dataUpdates in v0.8 mode', async () => {
+      // 测试 v0.8 的 extractDataUpdatesV08 分支
+      const onAction = jest.fn();
+
+      const ClickableComponent: React.FC<{
+        onAction?: (name: string, ctx: any) => void;
+        action?: any;
+      }> = ({ onAction: componentOnAction }) => (
+        <button
+          type="button"
+          data-testid="click-btn"
+          onClick={() =>
+            componentOnAction?.('click', {
+              inputValue: 'test-value',
+            })
+          }
+        >
+          Click
+        </button>
+      );
+
+      render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: {
+                      ClickableComponent: {
+                        // v0.8 格式: action.context 是数组
+                        action: {
+                          context: [
+                            {
+                              key: 'inputValue',
+                              value: { path: '/input/value' },
+                            },
+                          ],
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              beginRendering: {
+                surfaceId: 'card1',
+                root: 'root',
+              },
+            },
+          ]}
+          components={{ ClickableComponent }}
+          onAction={onAction}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 点击按钮触发 action
+      fireEvent.click(screen.getByTestId('click-btn'));
+
+      await waitFor(() => {
+        expect(onAction).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: 'click',
+            surfaceId: 'card1',
+          }),
+        );
+      });
+    });
+  });
+
+  describe('handleDataChange', () => {
+    it('should handle data change via onDataChange', async () => {
+      // 测试覆盖行 305: handleDataChange 函数
+      // onDataChange 会被注入到组件中，组件可以调用它来更新 dataModel
+
+      const InputComponent: React.FC<{
+        value?: string;
+        onDataChange?: (path: string, value: any) => void;
+        onAction?: (name: string, ctx: any) => void;
+      }> = ({ value, onDataChange, onAction }) => (
+        <input
+          data-testid="test-input"
+          value={value || ''}
+          onChange={(e) => {
+            // 调用 onDataChange 更新 dataModel
+            onDataChange?.('/form/input', e.target.value);
+            // 同时触发 action 通知外部
+            onAction?.('change', { value: e.target.value });
+          }}
+        />
+      );
+
+      const onAction = jest.fn();
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'InputComponent',
+                    value: { path: '/form/input' },
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ InputComponent }}
+          onAction={onAction}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      const input = screen.getByTestId('test-input');
+
+      // 输入新值，触发 onDataChange
+      fireEvent.change(input, { target: { value: 'new value' } });
+
+      await waitFor(() => {
+        expect(onAction).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: 'change',
+            surfaceId: 'card1',
+          }),
+        );
+      });
+    });
+  });
+
+  describe('additional branches', () => {
+    it('should handle surfaceCatalogMap not existing', async () => {
+      // 测试覆盖行 161: surfaceCatalogMap 不存在时返回 undefined
+      const TestComponent: React.FC = () => <div data-testid="test">Test</div>;
+
+      // 不使用 createSurface，直接使用 updateComponents
+      // 此时 surfaceCatalogMap 应该为空，catalogId 应该为 undefined
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test')).toBeInTheDocument();
+      });
+    });
+
+    it('should use default commandVersion v0.8 when version not specified', async () => {
+      // 测试覆盖行 71, 151: commandVersion 默认值 'v0.8'
+      // 当 commands 对象没有 version 字段时，默认使用 v0.8
+      const TestComponent: React.FC = () => <div data-testid="test">Test</div>;
+
+      render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: { TestComponent: {} },
+                  },
+                ],
+              },
+            },
+            {
+              beginRendering: {
+                surfaceId: 'card1',
+                root: 'root',
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle nodeTree not existing in v0.9 updateComponents', async () => {
+      // 测试覆盖行 188: nodeTree 不存在时不更新渲染
+      const TestComponent: React.FC = () => <div data-testid="test">Test</div>;
+
+      // 使用 updateComponents 但不提供有效的组件
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [], // 空组件列表
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 由于没有组件，不应该渲染任何内容
+      await waitFor(() => {
+        expect(screen.queryByTestId('test')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle rootNodeFromCache not existing in v0.8', async () => {
+      // 测试覆盖行 218: rootNodeFromCache 不存在时不更新
+      const TestComponent: React.FC<{ text?: string }> = ({ text }) => (
+        <div data-testid="test">{text || 'default'}</div>
+      );
+
+      // 先渲染一次建立 hasRenderedRef
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: { TestComponent: { text: 'initial' } },
+                  },
+                ],
+              },
+            },
+            {
+              beginRendering: {
+                surfaceId: 'card1',
+                root: 'root',
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test').textContent).toBe('initial');
+      });
+
+      // 更新但提供空的组件列表，此时 rootNodeFromCache 会返回 undefined
+      rerender(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [], // 空组件，不会更新 root
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 应该保持原有内容
+      await waitFor(() => {
+        expect(screen.getByTestId('test').textContent).toBe('initial');
+      });
+    });
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/Card.v0.8.test.ts b/packages/x-card/src/A2UI/__tests__/Card.v0.8.test.ts
new file mode 100644
index 0000000000..0b153a916d
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/Card.v0.8.test.ts
@@ -0,0 +1,328 @@
+/**
+ * Card.v0.8.ts 测试用例
+ * 覆盖 isLiteralStringObject, resolvePropsV08, resolveActionContextV08, extractDataUpdatesV08, applyDataModelUpdateV08
+ */
+import {
+  isLiteralStringObject,
+  resolvePropsV08,
+  resolveActionContextV08,
+  extractDataUpdatesV08,
+  applyDataModelUpdateV08,
+} from '../Card.v0.8';
+
+describe('isLiteralStringObject', () => {
+  it('should return true for { literalString: string }', () => {
+    expect(isLiteralStringObject({ literalString: 'hello' })).toBe(true);
+  });
+
+  it('should return false for null', () => {
+    expect(isLiteralStringObject(null)).toBe(false);
+  });
+
+  it('should return false for undefined', () => {
+    expect(isLiteralStringObject(undefined)).toBe(false);
+  });
+
+  it('should return false for string', () => {
+    expect(isLiteralStringObject('hello')).toBe(false);
+  });
+
+  it('should return false for object without literalString', () => {
+    expect(isLiteralStringObject({ path: '/name' })).toBe(false);
+  });
+
+  it('should return false for object with non-string literalString', () => {
+    expect(isLiteralStringObject({ literalString: 123 })).toBe(false);
+  });
+
+  it('should return true for object with extra fields', () => {
+    expect(isLiteralStringObject({ literalString: 'hello', extra: 'value' })).toBe(true);
+  });
+});
+
+describe('resolvePropsV08', () => {
+  it('should resolve literal string values', () => {
+    const props = {
+      text: { literalString: 'Hello World' },
+    };
+    const result = resolvePropsV08(props, {});
+    expect(result.text).toBe('Hello World');
+  });
+
+  it('should resolve path values from dataModel', () => {
+    const props = {
+      name: { path: '/user/name' },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolvePropsV08(props, dataModel);
+    expect(result.name).toBe('Alice');
+  });
+
+  it('should resolve string path values', () => {
+    const props = {
+      name: '/user/name',
+    };
+    const dataModel = { user: { name: 'Bob' } };
+    const result = resolvePropsV08(props, dataModel);
+    expect(result.name).toBe('Bob');
+  });
+
+  it('should keep literal values unchanged', () => {
+    const props = {
+      count: 42,
+      enabled: true,
+      text: 'hello',
+    };
+    const result = resolvePropsV08(props, {});
+    expect(result.count).toBe(42);
+    expect(result.enabled).toBe(true);
+    expect(result.text).toBe('hello');
+  });
+
+  it('should resolve array values recursively', () => {
+    const props = {
+      items: [{ path: '/a' }, { literalString: 'literal' }],
+    };
+    const dataModel = { a: 'value' };
+    const result = resolvePropsV08(props, dataModel);
+    expect(result.items[0]).toBe('value');
+    expect(result.items[1]).toBe('literal');
+  });
+
+  it('should resolve nested object values recursively', () => {
+    const props = {
+      config: {
+        nested: { path: '/user/name' },
+        value: 'static',
+      },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolvePropsV08(props, dataModel);
+    expect(result.config.nested).toBe('Alice');
+    expect(result.config.value).toBe('static');
+  });
+
+  it('should preserve { path } in action.context items', () => {
+    const props = {
+      action: {
+        context: [{ key: 'userName', value: { path: '/user/name' } }],
+      },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolvePropsV08(props, dataModel);
+    // context 中的 { path } 应该被保留（是写入目标）
+    expect(result.action.context[0].value).toEqual({ path: '/user/name' });
+  });
+
+  it('should resolve undefined path values', () => {
+    const props = {
+      missing: { path: '/not/exist' },
+    };
+    const result = resolvePropsV08(props, {});
+    expect(result.missing).toBeUndefined();
+  });
+});
+
+describe('resolveActionContextV08', () => {
+  it('should return undefined for non-array context', () => {
+    expect(resolveActionContextV08({ context: {} }, {})).toBeUndefined();
+    expect(resolveActionContextV08({ context: null }, {})).toBeUndefined();
+    expect(resolveActionContextV08({ context: 'string' }, {})).toBeUndefined();
+    expect(resolveActionContextV08({}, {})).toBeUndefined();
+  });
+
+  it('should resolve path values from dataModel', () => {
+    const action = {
+      context: [{ key: 'userName', value: { path: '/user/name' } }],
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolveActionContextV08(action, dataModel);
+    expect(result).toEqual({ userName: 'Alice' });
+  });
+
+  it('should resolve literalString values', () => {
+    const action = {
+      context: [{ key: 'greeting', value: { literalString: 'Hello' } }],
+    };
+    const result = resolveActionContextV08(action, {});
+    expect(result).toEqual({ greeting: 'Hello' });
+  });
+
+  it('should use literal values directly', () => {
+    const action = {
+      context: [{ key: 'count', value: 42 }],
+    };
+    const result = resolveActionContextV08(action, {});
+    expect(result).toEqual({ count: 42 });
+  });
+
+  it('should skip invalid context items', () => {
+    const action = {
+      context: [{ key: 'valid', value: 'test' }, { invalid: 'item' }, null, 'string'],
+    };
+    const result = resolveActionContextV08(action, {});
+    expect(result).toEqual({ valid: 'test' });
+  });
+
+  it('should return undefined for empty resolved object', () => {
+    const action = {
+      context: [{ invalid: 'item' }],
+    };
+    const result = resolveActionContextV08(action, {});
+    expect(result).toBeUndefined();
+  });
+
+  it('should handle multiple context items', () => {
+    const action = {
+      context: [
+        { key: 'name', value: { path: '/user/name' } },
+        { key: 'age', value: { literalString: '25' } },
+        { key: 'active', value: true },
+      ],
+    };
+    const dataModel = { user: { name: 'Bob' } };
+    const result = resolveActionContextV08(action, dataModel);
+    expect(result).toEqual({
+      name: 'Bob',
+      age: '25',
+      active: true,
+    });
+  });
+});
+
+describe('extractDataUpdatesV08', () => {
+  it('should return empty array for non-array context', () => {
+    expect(extractDataUpdatesV08({ context: {} }, {})).toEqual([]);
+    expect(extractDataUpdatesV08({ context: null }, {})).toEqual([]);
+    expect(extractDataUpdatesV08({}, {})).toEqual([]);
+  });
+
+  it('should extract updates from path bindings', () => {
+    const action = {
+      context: [{ key: 'userName', value: { path: '/user/name' } }],
+    };
+    const componentContext = { userName: 'Alice' };
+    const result = extractDataUpdatesV08(action, componentContext);
+    expect(result).toEqual([{ path: '/user/name', value: 'Alice' }]);
+  });
+
+  it('should skip non-path values', () => {
+    const action = {
+      context: [
+        { key: 'name', value: 'literal' },
+        { key: 'age', value: { path: '/user/age' } },
+      ],
+    };
+    const componentContext = { name: 'test', age: 25 };
+    const result = extractDataUpdatesV08(action, componentContext);
+    expect(result).toEqual([{ path: '/user/age', value: 25 }]);
+  });
+
+  it('should skip when componentContext does not have key', () => {
+    const action = {
+      context: [{ key: 'userName', value: { path: '/user/name' } }],
+    };
+    const componentContext = { otherKey: 'value' };
+    const result = extractDataUpdatesV08(action, componentContext);
+    expect(result).toEqual([]);
+  });
+
+  it('should skip when value is undefined', () => {
+    const action = {
+      context: [{ key: 'userName', value: { path: '/user/name' } }],
+    };
+    const componentContext = { userName: undefined };
+    const result = extractDataUpdatesV08(action, componentContext);
+    expect(result).toEqual([]);
+  });
+
+  it('should handle multiple updates', () => {
+    const action = {
+      context: [
+        { key: 'name', value: { path: '/user/name' } },
+        { key: 'email', value: { path: '/user/email' } },
+      ],
+    };
+    const componentContext = { name: 'Alice', email: 'alice@example.com' };
+    const result = extractDataUpdatesV08(action, componentContext);
+    expect(result).toEqual([
+      { path: '/user/name', value: 'Alice' },
+      { path: '/user/email', value: 'alice@example.com' },
+    ]);
+  });
+
+  it('should skip invalid context items', () => {
+    const action = {
+      context: [{ key: 'valid', value: { path: '/valid' } }, { invalid: 'item' }, null],
+    };
+    const componentContext = { valid: 'test' };
+    const result = extractDataUpdatesV08(action, componentContext);
+    expect(result).toEqual([{ path: '/valid', value: 'test' }]);
+  });
+});
+
+describe('applyDataModelUpdateV08', () => {
+  it('should apply single content item', () => {
+    const prev = { existing: 'value' };
+    const contents = [
+      {
+        key: 'res',
+        valueMap: [{ key: 'time', valueString: '2024-01-01' }],
+      },
+    ];
+    const result = applyDataModelUpdateV08(prev, contents);
+    expect(result.res).toEqual({ time: '2024-01-01' });
+    expect(result.existing).toBe('value');
+  });
+
+  it('should apply multiple content items', () => {
+    const prev = {};
+    const contents = [
+      {
+        key: 'user',
+        valueMap: [
+          { key: 'name', valueString: 'Alice' },
+          { key: 'age', valueString: '25' },
+        ],
+      },
+      {
+        key: 'settings',
+        valueMap: [{ key: 'theme', valueString: 'dark' }],
+      },
+    ];
+    const result = applyDataModelUpdateV08(prev, contents);
+    expect(result.user).toEqual({ name: 'Alice', age: '25' });
+    expect(result.settings).toEqual({ theme: 'dark' });
+  });
+
+  it('should override existing keys', () => {
+    const prev = { user: { oldKey: 'oldValue' } };
+    const contents = [
+      {
+        key: 'user',
+        valueMap: [{ key: 'newKey', valueString: 'newValue' }],
+      },
+    ];
+    const result = applyDataModelUpdateV08(prev, contents);
+    expect(result.user).toEqual({ newKey: 'newValue' });
+  });
+
+  it('should handle empty contents', () => {
+    const prev = { existing: 'value' };
+    const result = applyDataModelUpdateV08(prev, []);
+    expect(result).toEqual({ existing: 'value' });
+  });
+
+  it('should be immutable', () => {
+    const prev = { existing: 'value' };
+    const contents = [
+      {
+        key: 'new',
+        valueMap: [{ key: 'data', valueString: 'test' }],
+      },
+    ];
+    const result = applyDataModelUpdateV08(prev, contents);
+    expect(prev).toEqual({ existing: 'value' });
+    expect(result.new).toBeDefined();
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/Card.v0.9.test.ts b/packages/x-card/src/A2UI/__tests__/Card.v0.9.test.ts
new file mode 100644
index 0000000000..6153a30b65
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/Card.v0.9.test.ts
@@ -0,0 +1,319 @@
+/**
+ * Card.v0.9.ts 测试用例
+ * 覆盖 resolvePropsV09, resolveActionContextV09, extractDataUpdatesV09, applyDataModelUpdateV09
+ */
+import {
+  resolvePropsV09,
+  resolveActionContextV09,
+  extractDataUpdatesV09,
+  applyDataModelUpdateV09,
+} from '../Card.v0.9';
+
+describe('resolvePropsV09', () => {
+  it('should resolve path values from dataModel', () => {
+    const props = {
+      name: { path: '/user/name' },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolvePropsV09(props, dataModel);
+    expect(result.name).toBe('Alice');
+  });
+
+  it('should resolve string path values', () => {
+    const props = {
+      name: '/user/name',
+    };
+    const dataModel = { user: { name: 'Bob' } };
+    const result = resolvePropsV09(props, dataModel);
+    expect(result.name).toBe('Bob');
+  });
+
+  it('should keep literal values unchanged', () => {
+    const props = {
+      count: 42,
+      enabled: true,
+      text: 'hello',
+    };
+    const result = resolvePropsV09(props, {});
+    expect(result.count).toBe(42);
+    expect(result.enabled).toBe(true);
+    expect(result.text).toBe('hello');
+  });
+
+  it('should resolve array values recursively', () => {
+    const props = {
+      items: [{ path: '/a' }, 'literal'],
+    };
+    const dataModel = { a: 'value' };
+    const result = resolvePropsV09(props, dataModel);
+    expect(result.items[0]).toBe('value');
+    expect(result.items[1]).toBe('literal');
+  });
+
+  it('should resolve nested object values recursively', () => {
+    const props = {
+      config: {
+        nested: { path: '/user/name' },
+        value: 'static',
+      },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolvePropsV09(props, dataModel);
+    expect(result.config.nested).toBe('Alice');
+    expect(result.config.value).toBe('static');
+  });
+
+  it('should preserve { path } in action.event.context', () => {
+    const props = {
+      action: {
+        event: {
+          name: 'submit',
+          context: {
+            userName: { path: '/user/name' },
+          },
+        },
+      },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolvePropsV09(props, dataModel);
+    // context 中的 { path } 应该被保留（是写入目标）
+    expect(result.action.event.context.userName).toEqual({ path: '/user/name' });
+  });
+
+  it('should resolve undefined path values', () => {
+    const props = {
+      missing: { path: '/not/exist' },
+    };
+    const result = resolvePropsV09(props, {});
+    expect(result.missing).toBeUndefined();
+  });
+
+  it('should handle null values', () => {
+    const props = {
+      value: null,
+    };
+    const result = resolvePropsV09(props, {});
+    expect(result.value).toBeNull();
+  });
+
+  it('should preserve { path } when inside action.event', () => {
+    const props = {
+      action: {
+        event: {
+          name: 'click',
+          context: {
+            userId: { path: '/user/id' },
+            timestamp: 12345,
+          },
+        },
+      },
+    };
+    const dataModel = { user: { id: 'user123' } };
+    const result = resolvePropsV09(props, dataModel);
+    // path 应该被保留
+    expect(result.action.event.context.userId).toEqual({ path: '/user/id' });
+    // 字面值保持不变
+    expect(result.action.event.context.timestamp).toBe(12345);
+  });
+});
+
+describe('resolveActionContextV09', () => {
+  it('should return undefined for non-object context', () => {
+    expect(resolveActionContextV09({ event: { context: [] } }, {})).toBeUndefined();
+    expect(resolveActionContextV09({ event: { context: 'string' } }, {})).toBeUndefined();
+    expect(resolveActionContextV09({ event: { context: null } }, {})).toBeUndefined();
+    expect(resolveActionContextV09({ event: {} }, {})).toBeUndefined();
+    expect(resolveActionContextV09({}, {})).toBeUndefined();
+  });
+
+  it('should resolve path values from dataModel', () => {
+    const action = {
+      event: {
+        context: {
+          userName: { path: '/user/name' },
+        },
+      },
+    };
+    const dataModel = { user: { name: 'Alice' } };
+    const result = resolveActionContextV09(action, dataModel);
+    expect(result).toEqual({ userName: 'Alice' });
+  });
+
+  it('should use literal values directly', () => {
+    const action = {
+      event: {
+        context: {
+          count: 42,
+          text: 'hello',
+          enabled: true,
+        },
+      },
+    };
+    const result = resolveActionContextV09(action, {});
+    expect(result).toEqual({
+      count: 42,
+      text: 'hello',
+      enabled: true,
+    });
+  });
+
+  it('should handle multiple context keys', () => {
+    const action = {
+      event: {
+        context: {
+          name: { path: '/user/name' },
+          age: 25,
+          active: true,
+        },
+      },
+    };
+    const dataModel = { user: { name: 'Bob' } };
+    const result = resolveActionContextV09(action, dataModel);
+    expect(result).toEqual({
+      name: 'Bob',
+      age: 25,
+      active: true,
+    });
+  });
+
+  it('should handle empty context object', () => {
+    const action = {
+      event: {
+        context: {},
+      },
+    };
+    const result = resolveActionContextV09(action, {});
+    expect(result).toEqual({});
+  });
+});
+
+describe('extractDataUpdatesV09', () => {
+  it('should return empty array for non-object context', () => {
+    expect(extractDataUpdatesV09({ event: { context: [] } }, {})).toEqual([]);
+    expect(extractDataUpdatesV09({ event: { context: null } }, {})).toEqual([]);
+    expect(extractDataUpdatesV09({ event: {} }, {})).toEqual([]);
+    expect(extractDataUpdatesV09({}, {})).toEqual([]);
+  });
+
+  it('should extract updates from path bindings', () => {
+    const action = {
+      event: {
+        context: {
+          userName: { path: '/user/name' },
+        },
+      },
+    };
+    const componentContext = { userName: 'Alice' };
+    const result = extractDataUpdatesV09(action, componentContext);
+    expect(result).toEqual([{ path: '/user/name', value: 'Alice' }]);
+  });
+
+  it('should skip non-path values', () => {
+    const action = {
+      event: {
+        context: {
+          name: 'literal',
+          age: { path: '/user/age' },
+        },
+      },
+    };
+    const componentContext = { name: 'test', age: 25 };
+    const result = extractDataUpdatesV09(action, componentContext);
+    expect(result).toEqual([{ path: '/user/age', value: 25 }]);
+  });
+
+  it('should skip when componentContext does not have key', () => {
+    const action = {
+      event: {
+        context: {
+          userName: { path: '/user/name' },
+        },
+      },
+    };
+    const componentContext = { otherKey: 'value' };
+    const result = extractDataUpdatesV09(action, componentContext);
+    expect(result).toEqual([]);
+  });
+
+  it('should skip when value is undefined', () => {
+    const action = {
+      event: {
+        context: {
+          userName: { path: '/user/name' },
+        },
+      },
+    };
+    const componentContext = { userName: undefined };
+    const result = extractDataUpdatesV09(action, componentContext);
+    expect(result).toEqual([]);
+  });
+
+  it('should handle multiple updates', () => {
+    const action = {
+      event: {
+        context: {
+          name: { path: '/user/name' },
+          email: { path: '/user/email' },
+          literal: 'ignored',
+        },
+      },
+    };
+    const componentContext = { name: 'Alice', email: 'alice@example.com', literal: 'value' };
+    const result = extractDataUpdatesV09(action, componentContext);
+    expect(result).toEqual([
+      { path: '/user/name', value: 'Alice' },
+      { path: '/user/email', value: 'alice@example.com' },
+    ]);
+  });
+});
+
+describe('applyDataModelUpdateV09', () => {
+  it('should set value at path', () => {
+    const prev = {};
+    const result = applyDataModelUpdateV09(prev, '/user/name', 'Alice');
+    expect((result as any).user.name).toBe('Alice');
+  });
+
+  it('should preserve existing data', () => {
+    const prev = { existing: 'value' };
+    const result = applyDataModelUpdateV09(prev, '/new/key', 'test');
+    expect(result.existing).toBe('value');
+    expect((result as any).new.key).toBe('test');
+  });
+
+  it('should override existing path', () => {
+    const prev = { user: { name: 'Bob' } };
+    const result = applyDataModelUpdateV09(prev, '/user/name', 'Alice');
+    expect((result as any).user.name).toBe('Alice');
+  });
+
+  it('should be immutable', () => {
+    const prev = { user: { name: 'Bob' } };
+    applyDataModelUpdateV09(prev, '/user/name', 'Alice');
+    expect((prev as any).user.name).toBe('Bob');
+  });
+
+  it('should handle nested paths', () => {
+    const prev = {};
+    const result = applyDataModelUpdateV09(prev, '/a/b/c/d', 'deep');
+    expect((result as any).a.b.c.d).toBe('deep');
+  });
+
+  it('should handle null value', () => {
+    const prev = {};
+    const result = applyDataModelUpdateV09(prev, '/key', null);
+    expect(result.key).toBeNull();
+  });
+
+  it('should handle object value', () => {
+    const prev = {};
+    const result = applyDataModelUpdateV09(prev, '/data', { nested: 'value' });
+    expect((result as any).data.nested).toBe('value');
+  });
+
+  it('should handle array value', () => {
+    const prev = {};
+    const result = applyDataModelUpdateV09(prev, '/items', [1, 2, 3]);
+    expect((result as any).items).toEqual([1, 2, 3]);
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/catalog.test.ts b/packages/x-card/src/A2UI/__tests__/catalog.test.ts
new file mode 100644
index 0000000000..740e8d34ae
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/catalog.test.ts
@@ -0,0 +1,261 @@
+/**
+ * catalog.ts 测试用例
+ * 覆盖 registerCatalog, loadCatalog, validateComponent, getComponentPropsSchema, clearCatalogCache
+ */
+import {
+  registerCatalog,
+  loadCatalog,
+  validateComponent,
+  getComponentPropsSchema,
+  clearCatalogCache,
+  type Catalog,
+} from '../catalog';
+
+// Mock fetch
+const mockFetch = jest.fn();
+global.fetch = mockFetch;
+
+beforeEach(() => {
+  clearCatalogCache();
+  mockFetch.mockReset();
+  jest.spyOn(console, 'warn').mockImplementation(() => {});
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('registerCatalog', () => {
+  it('should register catalog with $id', () => {
+    const catalog: Catalog = {
+      $id: 'test-catalog',
+      components: { Button: { type: 'object' } },
+    };
+    registerCatalog(catalog);
+    // 验证可以通过 loadCatalog 获取
+    return loadCatalog('test-catalog').then((result) => {
+      expect(result).toBe(catalog);
+    });
+  });
+
+  it('should register catalog with catalogId', () => {
+    const catalog: Catalog = {
+      catalogId: 'my-catalog',
+      components: { Input: { type: 'object' } },
+    };
+    registerCatalog(catalog);
+    return loadCatalog('my-catalog').then((result) => {
+      expect(result).toBe(catalog);
+    });
+  });
+
+  it('should not register catalog without id', () => {
+    const catalog: Catalog = {
+      components: { Button: { type: 'object' } },
+    };
+    registerCatalog(catalog);
+    // 没有 id，不应该被注册，fetch 会被调用
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      statusText: 'Not Found',
+    });
+    return loadCatalog('undefined-catalog').catch(() => {
+      // 预期会失败
+    });
+  });
+});
+
+describe('loadCatalog', () => {
+  it('should return cached catalog', async () => {
+    const catalog: Catalog = {
+      $id: 'cached-catalog',
+      components: { Button: { type: 'object' } },
+    };
+    registerCatalog(catalog);
+    const result = await loadCatalog('cached-catalog');
+    expect(result).toBe(catalog);
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it('should return empty catalog for unregistered local:// schema', async () => {
+    const result = await loadCatalog('local://my-catalog');
+    expect(result.$id).toBe('local://my-catalog');
+    expect(result.components).toEqual({});
+    expect(console.warn).toHaveBeenCalled();
+  });
+
+  it('should fetch remote catalog', async () => {
+    const remoteCatalog: Catalog = {
+      $id: 'https://example.com/catalog.json',
+      components: { Button: { type: 'object' } },
+    };
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(remoteCatalog),
+    });
+
+    const result = await loadCatalog('https://example.com/catalog.json');
+    expect(result).toEqual(remoteCatalog);
+    expect(mockFetch).toHaveBeenCalledWith('https://example.com/catalog.json');
+  });
+
+  it('should cache fetched remote catalog', async () => {
+    const remoteCatalog: Catalog = {
+      $id: 'https://example.com/catalog2.json',
+      components: {},
+    };
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(remoteCatalog),
+    });
+
+    await loadCatalog('https://example.com/catalog2.json');
+    // 第二次调用不应该再 fetch
+    const result2 = await loadCatalog('https://example.com/catalog2.json');
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+    expect(result2).toEqual(remoteCatalog);
+  });
+
+  it('should throw error when fetch fails with non-ok response', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      statusText: 'Not Found',
+    });
+
+    await expect(loadCatalog('https://example.com/bad-catalog.json')).rejects.toThrow();
+    expect(console.error).toHaveBeenCalled();
+  });
+
+  it('should throw error when fetch throws', async () => {
+    mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+    await expect(loadCatalog('https://example.com/error-catalog.json')).rejects.toThrow(
+      'Network error',
+    );
+    expect(console.error).toHaveBeenCalled();
+  });
+});
+
+describe('validateComponent', () => {
+  it('should return false when component not in catalog', () => {
+    const catalog: Catalog = {
+      components: { Input: { type: 'object' } },
+    };
+    const result = validateComponent(catalog, 'Button', {});
+    expect(result).toBe(false);
+    expect(console.warn).toHaveBeenCalled();
+  });
+
+  it('should return true when component has no required fields', () => {
+    const catalog: Catalog = {
+      components: {
+        Button: {
+          type: 'object',
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponent(catalog, 'Button', { label: 'Click' });
+    expect(result).toBe(true);
+  });
+
+  it('should return false when required field is missing', () => {
+    const catalog: Catalog = {
+      components: {
+        Button: {
+          type: 'object',
+          required: ['label'],
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponent(catalog, 'Button', {});
+    expect(result).toBe(false);
+    expect(console.warn).toHaveBeenCalled();
+  });
+
+  it('should return true when all required fields present', () => {
+    const catalog: Catalog = {
+      components: {
+        Button: {
+          type: 'object',
+          required: ['label'],
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponent(catalog, 'Button', { label: 'Click' });
+    expect(result).toBe(true);
+  });
+
+  it('should handle catalog with no components', () => {
+    const catalog: Catalog = {};
+    const result = validateComponent(catalog, 'Button', {});
+    expect(result).toBe(false);
+  });
+});
+
+describe('getComponentPropsSchema', () => {
+  it('should return properties for existing component', () => {
+    const catalog: Catalog = {
+      components: {
+        Button: {
+          type: 'object',
+          properties: {
+            label: { type: 'string' },
+            disabled: { type: 'boolean' },
+          },
+        },
+      },
+    };
+    const schema = getComponentPropsSchema(catalog, 'Button');
+    expect(schema).toEqual({
+      label: { type: 'string' },
+      disabled: { type: 'boolean' },
+    });
+  });
+
+  it('should return undefined for non-existing component', () => {
+    const catalog: Catalog = {
+      components: { Input: { type: 'object' } },
+    };
+    const schema = getComponentPropsSchema(catalog, 'Button');
+    expect(schema).toBeUndefined();
+  });
+
+  it('should return undefined when catalog has no components', () => {
+    const catalog: Catalog = {};
+    const schema = getComponentPropsSchema(catalog, 'Button');
+    expect(schema).toBeUndefined();
+  });
+
+  it('should return undefined when component has no properties', () => {
+    const catalog: Catalog = {
+      components: { Button: { type: 'object' } },
+    };
+    const schema = getComponentPropsSchema(catalog, 'Button');
+    expect(schema).toBeUndefined();
+  });
+});
+
+describe('clearCatalogCache', () => {
+  it('should clear all cached catalogs', async () => {
+    const catalog: Catalog = {
+      $id: 'clear-test-catalog',
+      components: {},
+    };
+    registerCatalog(catalog);
+
+    clearCatalogCache();
+
+    // 清除后，再次加载应该走 fetch
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ $id: 'clear-test-catalog', components: {} }),
+    });
+
+    await loadCatalog('clear-test-catalog');
+    expect(mockFetch).toHaveBeenCalledWith('clear-test-catalog');
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/components.test.ts b/packages/x-card/src/A2UI/__tests__/components.test.ts
new file mode 100644
index 0000000000..554994f590
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/components.test.ts
@@ -0,0 +1,451 @@
+/**
+ * format/components.ts 测试用例
+ * 覆盖 createComponentTransformer, parseV08Node, parseV09Node, transformToReactTree
+ */
+import { createComponentTransformer } from '../format/components';
+import type { ComponentWrapper_v0_8 } from '../types/command_v0.8';
+import type { BaseComponent_v0_9 } from '../types/command_v0.9';
+
+describe('createComponentTransformer', () => {
+  describe('v0.8', () => {
+    it('should transform simple v0.8 component', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              children: ['child1'],
+            },
+          },
+        },
+        {
+          id: 'child1',
+          component: {
+            Text: {
+              text: 'Hello',
+            },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+      expect(result!.children).toContain('child1');
+
+      const child = transformer.getById('child1');
+      expect(child).toBeDefined();
+      expect(child!.type).toBe('Text');
+      expect(child!.props.text).toBe('Hello');
+    });
+
+    it('should parse { path: string } binding in v0.8', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Text: {
+              text: { path: '/user/name' },
+            },
+          },
+        },
+      ];
+
+      transformer.transform(components, 'v0.8');
+      const node = transformer.getById('root');
+      expect(node!.props.text).toBe('/user/name');
+    });
+
+    it('should parse { literalString: string } in v0.8', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Text: {
+              text: { literalString: 'Hello World' },
+            },
+          },
+        },
+      ];
+
+      transformer.transform(components, 'v0.8');
+      const node = transformer.getById('root');
+      expect(node!.props.text).toBe('Hello World');
+    });
+
+    it('should parse children array in v0.8', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              children: ['child1', 'child2'],
+            },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result!.children).toEqual(['child1', 'child2']);
+    });
+
+    it('should parse { explicitList: string[] } children in v0.8', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              children: { explicitList: ['child1', 'child2'] },
+            },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result!.children).toEqual(['child1', 'child2']);
+    });
+
+    it('should parse child (singular) in v0.8', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              child: 'singleChild',
+            },
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result!.children).toEqual(['singleChild']);
+    });
+
+    it('should skip child/children in props', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {
+              child: 'singleChild',
+              children: ['other'],
+            },
+          },
+        },
+      ];
+
+      transformer.transform(components, 'v0.8');
+      const node = transformer.getById('root');
+      expect(node!.props.child).toBeUndefined();
+      expect(node!.props.children).toBeUndefined();
+    });
+
+    it('should return null when no root component', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'notRoot',
+          component: {
+            Text: {},
+          },
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.8');
+      expect(result).toBeNull();
+    });
+
+    it('should return cached root when called with empty array', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {},
+          },
+        },
+      ];
+
+      transformer.transform(components, 'v0.8');
+      const result = transformer.transform([], 'v0.8');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+    });
+
+    it('should handle mixed literal and binding values', () => {
+      const transformer = createComponentTransformer();
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Input: {
+              placeholder: { literalString: 'Enter name' },
+              value: { path: '/form/name' },
+              disabled: false,
+            },
+          },
+        },
+      ];
+
+      transformer.transform(components, 'v0.8');
+      const node = transformer.getById('root');
+      expect(node!.props.placeholder).toBe('Enter name');
+      expect(node!.props.value).toBe('/form/name');
+      expect(node!.props.disabled).toBe(false);
+    });
+  });
+
+  describe('v0.9', () => {
+    it('should transform simple v0.9 component', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+          children: ['child1'],
+        },
+        {
+          id: 'child1',
+          component: 'Text',
+          text: 'Hello',
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.9');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+      expect(result!.children).toContain('child1');
+
+      const child = transformer.getById('child1');
+      expect(child).toBeDefined();
+      expect(child!.type).toBe('Text');
+      expect(child!.props.text).toBe('Hello');
+    });
+
+    it('should parse { path: string } binding in v0.9', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Text',
+          text: { path: '/user/name' },
+        },
+      ];
+
+      transformer.transform(components, 'v0.9');
+      const node = transformer.getById('root');
+      expect(node!.props.text).toBe('/user/name');
+    });
+
+    it('should parse children array in v0.9', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+          children: ['child1', 'child2'],
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.9');
+      expect(result!.children).toEqual(['child1', 'child2']);
+    });
+
+    it('should parse child (singular) in v0.9', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+          child: 'singleChild',
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.9');
+      expect(result!.children).toEqual(['singleChild']);
+    });
+
+    it('should skip id, component, child, children in props', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+          child: 'singleChild',
+          extraProp: 'value',
+        },
+      ];
+
+      transformer.transform(components, 'v0.9');
+      const node = transformer.getById('root');
+      expect(node!.props.id).toBeUndefined();
+      expect(node!.props.component).toBeUndefined();
+      expect(node!.props.child).toBeUndefined();
+      expect(node!.props.extraProp).toBe('value');
+    });
+
+    it('should return null when no root component in v0.9', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'notRoot',
+          component: 'Text',
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.9');
+      expect(result).toBeNull();
+    });
+
+    it('should not have children when no children or child defined', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Text',
+          text: 'Hello',
+        },
+      ];
+
+      const result = transformer.transform(components, 'v0.9');
+      expect(result!.children).toBeUndefined();
+    });
+  });
+
+  describe('getById', () => {
+    it('should return undefined for non-existent id', () => {
+      const transformer = createComponentTransformer();
+      const result = transformer.getById('nonexistent');
+      expect(result).toBeUndefined();
+    });
+
+    it('should return correct node after transform', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'myNode',
+          component: 'Text',
+          text: 'Hello',
+        },
+      ];
+
+      transformer.transform(components, 'v0.9');
+      const node = transformer.getById('myNode');
+      expect(node).toBeDefined();
+      expect(node!.type).toBe('Text');
+    });
+  });
+
+  describe('reset', () => {
+    it('should clear all cached components', () => {
+      const transformer = createComponentTransformer();
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+        },
+      ];
+
+      transformer.transform(components, 'v0.9');
+      expect(transformer.getById('root')).toBeDefined();
+
+      transformer.reset();
+      expect(transformer.getById('root')).toBeUndefined();
+    });
+  });
+
+  describe('transformToReactTree (deprecated)', () => {
+    it('should work as factory function result', () => {
+      const components: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+        },
+      ];
+
+      // transformToReactTree 是默认导出
+      const transformerModule = require('../format/components');
+      const result = transformerModule.default(components, 'v0.9');
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+    });
+
+    it('should default to v0.8 version', () => {
+      const components: ComponentWrapper_v0_8[] = [
+        {
+          id: 'root',
+          component: {
+            Container: {},
+          },
+        },
+      ];
+
+      const transformerModule = require('../format/components');
+      const result = transformerModule.default(components);
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('Container');
+    });
+  });
+
+  describe('incremental transform', () => {
+    it('should merge new components with existing', () => {
+      const transformer = createComponentTransformer();
+      const components1: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Container',
+          children: ['child1'],
+        },
+      ];
+
+      transformer.transform(components1, 'v0.9');
+      expect(transformer.getById('root')).toBeDefined();
+
+      const components2: BaseComponent_v0_9[] = [
+        {
+          id: 'child1',
+          component: 'Text',
+          text: 'Hello',
+        },
+      ];
+
+      transformer.transform(components2, 'v0.9');
+      expect(transformer.getById('child1')).toBeDefined();
+      expect(transformer.getById('root')).toBeDefined();
+    });
+
+    it('should update existing component', () => {
+      const transformer = createComponentTransformer();
+      const components1: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Text',
+          text: 'Hello',
+        },
+      ];
+
+      transformer.transform(components1, 'v0.9');
+      const node1 = transformer.getById('root');
+      expect(node1!.props.text).toBe('Hello');
+
+      const components2: BaseComponent_v0_9[] = [
+        {
+          id: 'root',
+          component: 'Text',
+          text: 'Updated',
+        },
+      ];
+
+      transformer.transform(components2, 'v0.9');
+      const node2 = transformer.getById('root');
+      expect(node2!.props.text).toBe('Updated');
+    });
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/integration.test.tsx b/packages/x-card/src/A2UI/__tests__/integration.test.tsx
new file mode 100644
index 0000000000..9cf87eb09e
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/integration.test.tsx
@@ -0,0 +1,890 @@
+/**
+ * Box.tsx 和 Card.tsx 集成测试用例
+ * 覆盖 Box, Card, NodeRenderer 组件的各种场景
+ */
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import Box from '../Box';
+import Card from '../Card';
+import type { A2UICommand_v0_9 } from '../types/command_v0.9';
+import type { XAgentCommand_v0_8 } from '../types/command_v0.8';
+import { registerCatalog, clearCatalogCache } from '../catalog';
+
+// Mock console
+const originalConsole = { ...console };
+beforeEach(() => {
+  console.log = jest.fn();
+  console.warn = jest.fn();
+  console.error = jest.fn();
+});
+
+afterEach(() => {
+  console.log = originalConsole.log;
+  console.warn = originalConsole.warn;
+  console.error = originalConsole.error;
+  clearCatalogCache();
+  mockFetch.mockClear();
+});
+
+// Mock fetch
+const mockFetch = jest.fn();
+global.fetch = mockFetch;
+
+// 简单测试组件
+const TestText: React.FC<{
+  text?: string;
+  onAction?: (name: string, context: Record<string, any>) => void;
+}> = ({ text, onAction }) => (
+  <div data-testid="test-text" onClick={() => onAction?.('click', { value: 'clicked' })}>
+    {text}
+  </div>
+);
+
+const TestContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div data-testid="test-container">{children}</div>
+);
+
+describe('Box Component', () => {
+  describe('v0.8', () => {
+    it('should render children without commands', () => {
+      render(
+        <Box>
+          <div data-testid="child">Child</div>
+        </Box>,
+      );
+      expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    it('should render Card children', () => {
+      render(
+        <Box>
+          <Card id="test-card" />
+        </Box>,
+      );
+      // Card 应该被渲染，但内容为空（没有 commands）
+    });
+
+    it('should provide context with v0.8 default version', () => {
+      const TestComponent = () => {
+        const context = React.useContext(require('../Context').default) as {
+          commandQueue: any[];
+        };
+        // v0.8 是默认版本，当没有命令或命令中没有 version 字段时
+        return <div data-testid="version">{context.commandQueue.length === 0 ? 'v0.8' : ''}</div>;
+      };
+
+      render(
+        <Box>
+          <TestComponent />
+        </Box>,
+      );
+      expect(screen.getByTestId('version').textContent).toBe('v0.8');
+    });
+
+    it('should handle surfaceUpdate command', async () => {
+      const commands: XAgentCommand_v0_8[] = [
+        {
+          surfaceUpdate: {
+            surfaceId: 'card1',
+            components: [
+              {
+                id: 'root',
+                component: {
+                  TestContainer: {
+                    children: ['text1'],
+                  },
+                },
+              },
+              {
+                id: 'text1',
+                component: {
+                  TestText: {
+                    text: 'Hello World',
+                  },
+                },
+              },
+            ],
+          },
+        },
+      ];
+
+      const components = {
+        TestContainer,
+        TestText,
+      };
+
+      render(
+        <Box commands={commands} components={components}>
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // v0.8 需要 beginRendering 才会渲染
+      // 没有 beginRendering，不应该渲染内容
+    });
+
+    it('should handle beginRendering command', async () => {
+      const commands: XAgentCommand_v0_8[] = [
+        {
+          beginRendering: {
+            surfaceId: 'card1',
+            root: 'root',
+          },
+        },
+      ];
+
+      render(
+        <Box commands={commands}>
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 没有 surfaceUpdate，root 不存在
+    });
+
+    it('should handle dataModelUpdate command', async () => {
+      const TestComponent: React.FC<{ value?: string }> = ({ value }) => (
+        <div data-testid="data-value">{value || 'empty'}</div>
+      );
+
+      // 先通过 surfaceUpdate 设置组件
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: {
+                      TestComponent: {
+                        value: { path: '/data/field' },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 更新 dataModel
+      rerender(
+        <Box
+          commands={[
+            {
+              beginRendering: { surfaceId: 'card1', root: 'root' },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+    });
+
+    it('should handle deleteSurface command', async () => {
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              surfaceUpdate: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: {
+                      TestContainer: {},
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              beginRendering: {
+                surfaceId: 'card1',
+                root: 'root',
+              },
+            },
+          ]}
+          components={{ TestContainer }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      expect(screen.getByTestId('test-container')).toBeInTheDocument();
+
+      // 删除 surface
+      rerender(
+        <Box
+          commands={[
+            {
+              deleteSurface: {
+                surfaceId: 'card1',
+              },
+            },
+          ]}
+          components={{ TestContainer }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      expect(screen.queryByTestId('test-container')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('v0.9', () => {
+    it('should detect v0.9 version from commands', () => {
+      const TestComponent = () => {
+        const context = React.useContext(require('../Context').default) as {
+          commandQueue: any[];
+        };
+        // 检查命令队列中是否有 v0.9 版本的命令
+        const hasV09 = context.commandQueue.some(
+          (cmd: any) => 'version' in cmd && cmd.version === 'v0.9',
+        );
+        return <div data-testid="version">{hasV09 ? 'v0.9' : ''}</div>;
+      };
+
+      const commands: A2UICommand_v0_9[] = [
+        {
+          version: 'v0.9',
+          updateComponents: {
+            surfaceId: 'card1',
+            components: [],
+          },
+        },
+      ];
+
+      render(
+        <Box commands={commands}>
+          <TestComponent />
+        </Box>,
+      );
+      expect(screen.getByTestId('version').textContent).toBe('v0.9');
+    });
+
+    it('should handle updateComponents command', async () => {
+      const commands: A2UICommand_v0_9[] = [
+        {
+          version: 'v0.9',
+          updateComponents: {
+            surfaceId: 'card1',
+            components: [
+              {
+                id: 'root',
+                component: 'TestContainer',
+                children: ['text1'],
+              },
+              {
+                id: 'text1',
+                component: 'TestText',
+                text: 'Hello v0.9',
+              },
+            ],
+          },
+        },
+      ];
+
+      render(
+        <Box commands={commands} components={{ TestContainer, TestText }}>
+          <Card id="card1" />
+        </Box>,
+      );
+
+      expect(screen.getByTestId('test-container')).toBeInTheDocument();
+      expect(screen.getByText('Hello v0.9')).toBeInTheDocument();
+    });
+
+    it('should handle updateDataModel command', async () => {
+      const TestComponent: React.FC<{ value?: string }> = ({ value }) => (
+        <div data-testid="data-value">{value || 'empty'}</div>
+      );
+
+      // 先渲染组件
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestComponent',
+                    value: { path: '/data/field' },
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 初始应该显示 empty（因为 dataModel 中没有值）
+      expect(screen.getByTestId('data-value').textContent).toBe('empty');
+
+      // 更新 dataModel
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateDataModel: {
+                surfaceId: 'card1',
+                path: '/data/field',
+                value: 'updated value',
+              },
+            },
+          ]}
+          components={{ TestComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 注意：由于 React 的状态更新机制，这里可能需要 waitFor
+    });
+
+    it('should handle deleteSurface command in v0.9', async () => {
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestContainer',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestContainer }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      expect(screen.getByTestId('test-container')).toBeInTheDocument();
+
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              deleteSurface: {
+                surfaceId: 'card1',
+              },
+            },
+          ]}
+          components={{ TestContainer }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      expect(screen.queryByTestId('test-container')).not.toBeInTheDocument();
+    });
+
+    it('should handle createSurface command', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            $id: 'test-catalog',
+            components: {
+              TestContainer: { type: 'object' },
+            },
+          }),
+      });
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'https://example.com/catalog.json',
+              },
+            },
+          ]}
+          components={{ TestContainer }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('https://example.com/catalog.json');
+      });
+    });
+
+    it('should handle createSurface with local catalog', async () => {
+      // 在测试前注册 catalog
+      const localCatalogId = 'local://my-catalog-2';
+      registerCatalog({
+        $id: localCatalogId,
+        components: {
+          TestContainer: { type: 'object' },
+        },
+      });
+
+      // 先创建一个 Box，触发 createSurface
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: localCatalogId,
+              },
+            },
+          ]}
+          components={{ TestContainer }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 等待 catalog 加载
+      await waitFor(() => {
+        // 由于已经在缓存中，fetch 不应该被调用
+        expect(mockFetch).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('onAction callback', () => {
+    it('should call onAction when component triggers action', async () => {
+      const onAction = jest.fn();
+
+      const ClickableComponent: React.FC<{ onAction?: (name: string, ctx: any) => void }> = ({
+        onAction: componentOnAction,
+      }) => (
+        <button
+          type="button"
+          data-testid="click-btn"
+          onClick={() => componentOnAction?.('click', { value: 'clicked' })}
+        >
+          Click
+        </button>
+      );
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'ClickableComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ ClickableComponent }}
+          onAction={onAction}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      const btn = screen.getByTestId('click-btn');
+      btn.click();
+
+      await waitFor(() => {
+        expect(onAction).toHaveBeenCalled();
+      });
+    });
+
+    it('should pass action name and surfaceId in callback', async () => {
+      const onAction = jest.fn();
+
+      const ActionComponent: React.FC<{ onAction?: (name: string, ctx: any) => void }> = ({
+        onAction: componentOnAction,
+      }) => (
+        <button
+          type="button"
+          data-testid="action-btn"
+          onClick={() => componentOnAction?.('submit', { formData: 'test' })}
+        >
+          Submit
+        </button>
+      );
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'test-surface',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'ActionComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ ActionComponent }}
+          onAction={onAction}
+        >
+          <Card id="test-surface" />
+        </Box>,
+      );
+
+      screen.getByTestId('action-btn').click();
+
+      await waitFor(() => {
+        expect(onAction).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: 'submit',
+            surfaceId: 'test-surface',
+          }),
+        );
+      });
+    });
+  });
+
+  describe('catalog validation', () => {
+    it('should validate component against catalog in development', async () => {
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+
+      registerCatalog({
+        $id: 'validation-catalog',
+        components: {
+          ValidComponent: {
+            type: 'object',
+            required: ['requiredField'],
+            properties: {
+              requiredField: { type: 'string' },
+            },
+          },
+        },
+      });
+
+      const ValidComponent: React.FC<{ requiredField?: string }> = ({ requiredField }) => (
+        <div data-testid="valid-component">{requiredField}</div>
+      );
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'validation-catalog',
+              },
+            },
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'ValidComponent',
+                    // 缺少 requiredField
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ ValidComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 应该有警告输出
+      await waitFor(() => {
+        expect(console.warn).toHaveBeenCalled();
+      });
+
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('should warn when component not registered but in catalog', async () => {
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+
+      registerCatalog({
+        $id: 'missing-component-catalog',
+        components: {
+          MissingComponent: { type: 'object' },
+        },
+      });
+
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'missing-component-catalog',
+              },
+            },
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'MissingComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(console.warn).toHaveBeenCalled();
+      });
+
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('should error when component not in catalog and not registered', async () => {
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+
+      // 首先创建一个带有 catalog 的 surface
+      registerCatalog({
+        $id: 'error-test-catalog',
+        components: {
+          // 空的 catalog，不包含 UnknownComponent
+        },
+      });
+
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              createSurface: {
+                surfaceId: 'card1',
+                catalogId: 'error-test-catalog',
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 等待 catalog 加载完成（使用 setTimeout 让 useEffect 执行完成）
+      await waitFor(() => {
+        // 由于 catalog 已通过 registerCatalog 注册，loadCatalog 会直接返回缓存的 catalog
+        // 不需要检查 console.log，只需等待足够时间让 effect 执行
+        expect(true).toBe(true);
+      });
+
+      // 然后发送 updateComponents 命令
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'UnknownComponent',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{}}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalled();
+      });
+
+      process.env.NODE_ENV = originalEnv;
+    });
+  });
+
+  describe('multiple cards', () => {
+    it('should render multiple cards independently', async () => {
+      render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestText',
+                    text: 'Card 1',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestText }}
+        >
+          <Card id="card1" />
+          <Card id="card2" />
+        </Box>,
+      );
+
+      // card1 应该渲染内容
+      expect(screen.getByText('Card 1')).toBeInTheDocument();
+      // card2 没有收到命令，不应该渲染
+    });
+
+    it('should handle different cards with different commands', async () => {
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestText',
+                    text: 'Card 1',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestText }}
+        >
+          <Card id="card1" />
+          <Card id="card2" />
+        </Box>,
+      );
+
+      expect(screen.getByText('Card 1')).toBeInTheDocument();
+
+      // 更新 card2
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card2',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'TestText',
+                    text: 'Card 2',
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ TestText }}
+        >
+          <Card id="card1" />
+          <Card id="card2" />
+        </Box>,
+      );
+
+      // card1 内容应该保留（被缓存在 transformer 中）
+      // card2 应该渲染新内容
+    });
+  });
+
+  describe('data binding', () => {
+    it('should resolve data binding in v0.9', async () => {
+      const DataComponent: React.FC<{ value?: string }> = ({ value }) => (
+        <div data-testid="bound-value">{value || 'no value'}</div>
+      );
+
+      const { rerender } = render(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateComponents: {
+                surfaceId: 'card1',
+                components: [
+                  {
+                    id: 'root',
+                    component: 'DataComponent',
+                    value: { path: '/user/name' },
+                  },
+                ],
+              },
+            },
+          ]}
+          components={{ DataComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      // 初始没有值
+      expect(screen.getByTestId('bound-value').textContent).toBe('no value');
+
+      // 更新 dataModel
+      rerender(
+        <Box
+          commands={[
+            {
+              version: 'v0.9',
+              updateDataModel: {
+                surfaceId: 'card1',
+                path: '/user/name',
+                value: 'Alice',
+              },
+            },
+          ]}
+          components={{ DataComponent }}
+        >
+          <Card id="card1" />
+        </Box>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('bound-value').textContent).toBe('Alice');
+      });
+    });
+  });
+});
diff --git a/packages/x-card/src/A2UI/__tests__/utils.test.ts b/packages/x-card/src/A2UI/__tests__/utils.test.ts
new file mode 100644
index 0000000000..5c2567d6e4
--- /dev/null
+++ b/packages/x-card/src/A2UI/__tests__/utils.test.ts
@@ -0,0 +1,312 @@
+/**
+ * utils.ts 测试用例
+ * 覆盖 getValueByPath, setValueByPath, isPathValue, isPathObject, validateComponentAgainstCatalog
+ */
+import {
+  getValueByPath,
+  setValueByPath,
+  isPathValue,
+  isPathObject,
+  validateComponentAgainstCatalog,
+} from '../utils';
+
+describe('getValueByPath', () => {
+  it('should get top-level value', () => {
+    const obj = { name: 'Alice' };
+    expect(getValueByPath(obj, '/name')).toBe('Alice');
+  });
+
+  it('should get nested value', () => {
+    const obj = { booking: { date: '2024-01-01' } };
+    expect(getValueByPath(obj, '/booking/date')).toBe('2024-01-01');
+  });
+
+  it('should get deeply nested value', () => {
+    const obj = { a: { b: { c: 42 } } };
+    expect(getValueByPath(obj, '/a/b/c')).toBe(42);
+  });
+
+  it('should return undefined for missing path', () => {
+    const obj = { name: 'Alice' };
+    expect(getValueByPath(obj, '/missing')).toBeUndefined();
+  });
+
+  it('should return undefined for nested missing path', () => {
+    const obj = { a: {} };
+    expect(getValueByPath(obj, '/a/b/c')).toBeUndefined();
+  });
+
+  it('should handle path without leading slash', () => {
+    const obj = { name: 'Alice' };
+    expect(getValueByPath(obj, 'name')).toBe('Alice');
+  });
+
+  it('should return null value correctly', () => {
+    const obj = { value: null };
+    expect(getValueByPath(obj, '/value')).toBeNull();
+  });
+
+  it('should return false value correctly', () => {
+    const obj = { flag: false };
+    expect(getValueByPath(obj, '/flag')).toBe(false);
+  });
+
+  it('should return 0 value correctly', () => {
+    const obj = { count: 0 };
+    expect(getValueByPath(obj, '/count')).toBe(0);
+  });
+});
+
+describe('setValueByPath', () => {
+  it('should set top-level value', () => {
+    const obj = { name: 'Alice' };
+    const result = setValueByPath(obj, '/name', 'Bob');
+    expect(result.name).toBe('Bob');
+  });
+
+  it('should set nested value', () => {
+    const obj = { booking: { date: '2024-01-01' } };
+    const result = setValueByPath(obj, '/booking/date', '2024-12-31');
+    expect(result.booking.date).toBe('2024-12-31');
+  });
+
+  it('should create nested path if not exists', () => {
+    const obj = {};
+    const result = setValueByPath(obj, '/a/b/c', 'value');
+    expect((result as any).a.b.c).toBe('value');
+  });
+
+  it('should be immutable (not mutate original)', () => {
+    const obj = { name: 'Alice' };
+    const result = setValueByPath(obj, '/name', 'Bob');
+    expect(obj.name).toBe('Alice');
+    expect(result.name).toBe('Bob');
+  });
+
+  it('should handle path without leading slash', () => {
+    const obj = { name: 'Alice' };
+    const result = setValueByPath(obj, 'name', 'Bob');
+    expect(result.name).toBe('Bob');
+  });
+
+  it('should preserve other keys', () => {
+    const obj = { name: 'Alice', age: 30 };
+    const result = setValueByPath(obj, '/name', 'Bob');
+    expect(result.age).toBe(30);
+  });
+
+  it('should set null value', () => {
+    const obj = { name: 'Alice' };
+    const result = setValueByPath(obj, '/name', null);
+    expect(result.name).toBeNull();
+  });
+
+  it('should handle deeply nested existing path', () => {
+    const obj = { a: { b: { c: 1, d: 2 } } };
+    const result = setValueByPath(obj, '/a/b/c', 99);
+    expect((result as any).a.b.c).toBe(99);
+    expect((result as any).a.b.d).toBe(2);
+  });
+});
+
+describe('isPathValue', () => {
+  it('should return true for string starting with /', () => {
+    expect(isPathValue('/user/name')).toBe(true);
+  });
+
+  it('should return true for simple path', () => {
+    expect(isPathValue('/name')).toBe(true);
+  });
+
+  it('should return false for string not starting with /', () => {
+    expect(isPathValue('name')).toBe(false);
+  });
+
+  it('should return false for empty string', () => {
+    expect(isPathValue('')).toBe(false);
+  });
+
+  it('should return false for number', () => {
+    expect(isPathValue(42)).toBe(false);
+  });
+
+  it('should return false for null', () => {
+    expect(isPathValue(null)).toBe(false);
+  });
+
+  it('should return false for undefined', () => {
+    expect(isPathValue(undefined)).toBe(false);
+  });
+
+  it('should return false for object', () => {
+    expect(isPathValue({ path: '/name' })).toBe(false);
+  });
+
+  it('should return false for boolean', () => {
+    expect(isPathValue(true)).toBe(false);
+  });
+});
+
+describe('isPathObject', () => {
+  it('should return true for { path: string }', () => {
+    expect(isPathObject({ path: '/user/name' })).toBe(true);
+  });
+
+  it('should return true for path object with other fields', () => {
+    expect(isPathObject({ path: '/name', extra: 'value' })).toBe(true);
+  });
+
+  it('should return false for null', () => {
+    expect(isPathObject(null)).toBe(false);
+  });
+
+  it('should return false for undefined', () => {
+    expect(isPathObject(undefined)).toBe(false);
+  });
+
+  it('should return false for string', () => {
+    expect(isPathObject('/name')).toBe(false);
+  });
+
+  it('should return false for object without path', () => {
+    expect(isPathObject({ name: 'Alice' })).toBe(false);
+  });
+
+  it('should return false for object with non-string path', () => {
+    expect(isPathObject({ path: 42 })).toBe(false);
+  });
+
+  it('should return false for array', () => {
+    expect(isPathObject(['/name'])).toBe(false);
+  });
+
+  it('should return false for number', () => {
+    expect(isPathObject(42)).toBe(false);
+  });
+});
+
+describe('validateComponentAgainstCatalog', () => {
+  it('should return valid when no catalog', () => {
+    const result = validateComponentAgainstCatalog(undefined, 'Button', { label: 'Click' });
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+
+  it('should return valid when catalog has no components', () => {
+    const result = validateComponentAgainstCatalog({}, 'Button', { label: 'Click' });
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+
+  it('should return invalid when component not in catalog', () => {
+    const catalog = { components: { Input: { type: 'object' as const } } };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', {});
+    expect(result.valid).toBe(false);
+    expect(result.errors).toHaveLength(1);
+    expect(result.errors[0]).toContain('Button');
+  });
+
+  it('should return valid when component in catalog with no required fields', () => {
+    const catalog = {
+      components: {
+        Button: { type: 'object' as const, properties: { label: { type: 'string' } } },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', { label: 'Click' });
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+
+  it('should return errors for missing required fields', () => {
+    const catalog = {
+      components: {
+        Button: {
+          type: 'object' as const,
+          required: ['label'],
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', {});
+    expect(result.valid).toBe(false);
+    expect(result.errors.some((e) => e.includes('label'))).toBe(true);
+  });
+
+  it('should return errors for undefined props not in schema', () => {
+    const catalog = {
+      components: {
+        Button: {
+          type: 'object' as const,
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', {
+      label: 'Click',
+      unknownProp: 'value',
+    });
+    expect(result.errors.some((e) => e.includes('unknownProp'))).toBe(true);
+  });
+
+  it('should ignore id, children, component fields in prop validation', () => {
+    const catalog = {
+      components: {
+        Button: {
+          type: 'object' as const,
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', {
+      label: 'Click',
+      id: 'btn1',
+      children: [],
+      component: 'Button',
+    });
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+
+  it('should handle multiple required fields', () => {
+    const catalog = {
+      components: {
+        Form: {
+          type: 'object' as const,
+          required: ['title', 'onSubmit'],
+          properties: {
+            title: { type: 'string' },
+            onSubmit: { type: 'object' },
+          },
+        },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Form', {});
+    expect(result.valid).toBe(false);
+    expect(result.errors.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('should return valid when all required fields present', () => {
+    const catalog = {
+      components: {
+        Button: {
+          type: 'object' as const,
+          required: ['label'],
+          properties: { label: { type: 'string' } },
+        },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', { label: 'Click' });
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+
+  it('should handle component with no properties defined', () => {
+    const catalog = {
+      components: {
+        Button: { type: 'object' as const },
+      },
+    };
+    const result = validateComponentAgainstCatalog(catalog, 'Button', { label: 'Click' });
+    expect(result.valid).toBe(true);
+  });
+});
diff --git a/packages/x-card/src/A2UI/catalog.ts b/packages/x-card/src/A2UI/catalog.ts
new file mode 100644
index 0000000000..e7853c358c
--- /dev/null
+++ b/packages/x-card/src/A2UI/catalog.ts
@@ -0,0 +1,129 @@
+/**
+ * Catalog 管理模块
+ * 用于加载和管理远程/本地组件定义
+ */
+
+/** Catalog 组件定义 */
+export interface CatalogComponent {
+  type: 'object';
+  allOf?: any[];
+  properties?: Record<string, any>;
+  required?: string[];
+  [key: string]: any;
+}
+
+/** Catalog 定义 */
+export interface Catalog {
+  $schema?: string;
+  $id?: string;
+  title?: string;
+  description?: string;
+  catalogId?: string;
+  components?: Record<string, CatalogComponent>;
+  functions?: Record<string, any>;
+  $defs?: Record<string, any>;
+}
+
+/** Catalog 缓存 */
+const catalogCache = new Map<string, Catalog>();
+
+/**
+ * 注册本地 catalog
+ * @param catalog catalog 定义
+ */
+export function registerCatalog(catalog: Catalog): void {
+  const catalogId = catalog.$id || catalog.catalogId;
+  if (catalogId) {
+    catalogCache.set(catalogId, catalog);
+  }
+}
+
+/**
+ * 加载 catalog（支持远程 URL 或本地注册的 schema）
+ * @param catalogId catalog 的 URL 或本地 ID
+ * @returns catalog 定义
+ */
+export async function loadCatalog(catalogId: string): Promise<Catalog> {
+  // 检查缓存
+  if (catalogCache.has(catalogId)) {
+    return catalogCache.get(catalogId)!;
+  }
+
+  // 检查是否是本地 schema
+  if (catalogId.startsWith('local://')) {
+    console.warn(
+      `Local catalog "${catalogId}" not registered. Use registerCatalog() to register it.`,
+    );
+    // 返回空 catalog
+    return {
+      $id: catalogId,
+      components: {},
+    };
+  }
+
+  // 从远程加载
+  try {
+    const response = await fetch(catalogId);
+    if (!response.ok) {
+      throw new Error(`Failed to load catalog from ${catalogId}: ${response.statusText}`);
+    }
+
+    const catalog: Catalog = await response.json();
+    catalogCache.set(catalogId, catalog);
+    return catalog;
+  } catch (error) {
+    console.error('Error loading catalog:', error);
+    throw error;
+  }
+}
+
+/**
+ * 验证组件是否符合 catalog 定义
+ * @param catalog catalog 定义
+ * @param componentName 组件名称
+ * @param componentProps 组件属性
+ * @returns 是否有效
+ */
+export function validateComponent(
+  catalog: Catalog,
+  componentName: string,
+  componentProps: Record<string, any>,
+): boolean {
+  const componentDef = catalog.components?.[componentName];
+  if (!componentDef) {
+    console.warn(`Component "${componentName}" not found in catalog`);
+    return false;
+  }
+
+  // 简单的必填字段验证
+  if (componentDef.required) {
+    for (const field of componentDef.required) {
+      if (!(field in componentProps)) {
+        console.warn(`Missing required field "${field}" for component "${componentName}"`);
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+/**
+ * 获取组件的属性定义
+ * @param catalog catalog 定义
+ * @param componentName 组件名称
+ * @returns 属性定义
+ */
+export function getComponentPropsSchema(
+  catalog: Catalog,
+  componentName: string,
+): Record<string, any> | undefined {
+  return catalog.components?.[componentName]?.properties;
+}
+
+/**
+ * 清除 catalog 缓存
+ */
+export function clearCatalogCache(): void {
+  catalogCache.clear();
+}
diff --git a/packages/x-card/src/A2UI/format/components.ts b/packages/x-card/src/A2UI/format/components.ts
new file mode 100644
index 0000000000..f60b1b3074
--- /dev/null
+++ b/packages/x-card/src/A2UI/format/components.ts
@@ -0,0 +1,149 @@
+import type { ComponentWrapper_v0_8 } from '../types/command_v0.8';
+import type { BaseComponent_v0_9 } from '../types/command_v0.9';
+
+export interface ReactComponentTree {
+  type: string;
+  props: Record<string, any>; // 不含 id、component、children、child 等结构性字段；{ path } 绑定已提取为路径字符串
+  children?: string[]; // 子节点 id 列表，由调用方去 componentMap 中查找对应节点
+}
+
+// ─── 内部解析辅助 ────────────────────────────────────────────────────────────
+
+/** 判断一个值是否为 { path: string } 形式的路径对象 */
+function isPathObject(val: any): val is { path: string } {
+  return val !== null && typeof val === 'object' && typeof val.path === 'string';
+}
+
+/** 判断一个值是否为 { literalString: string } 形式的字面字符串对象（v0.8 特有） */
+function isLiteralStringValue(val: any): val is { literalString: string } {
+  return val !== null && typeof val === 'object' && typeof val.literalString === 'string';
+}
+
+/** 判断一个值是否为 { explicitList: string[] } 形式（v0.8 children 格式） */
+function isExplicitList(val: any): val is { explicitList: string[] } {
+  return val !== null && typeof val === 'object' && Array.isArray(val.explicitList);
+}
+
+function parseV08Node(comp: ComponentWrapper_v0_8): ReactComponentTree {
+  const [type, config] = Object.entries(comp.component)[0];
+
+  const props: Record<string, any> = {};
+  for (const [key, val] of Object.entries(config)) {
+    if (['child', 'children'].includes(key)) continue;
+    // v0.8 中支持三种格式：
+    // 1. { path: string } - 数据绑定路径
+    // 2. { literalString: string } - 字面字符串
+    // 3. 字面值直接使用
+    if (isPathObject(val)) {
+      props[key] = val.path;
+    } else if (isLiteralStringValue(val)) {
+      props[key] = val.literalString;
+    } else {
+      props[key] = val;
+    }
+  }
+
+  // 解析 children 字段，支持 string[] 或 { explicitList: string[] }
+  let childIds: string[] = [];
+  if (config.children) {
+    if (isExplicitList(config.children)) {
+      childIds = config.children.explicitList;
+    } else if (Array.isArray(config.children)) {
+      childIds = config.children;
+    }
+  } else if (config.child) {
+    childIds = [config.child];
+  }
+
+  return {
+    type,
+    props,
+    ...(childIds.length > 0 && { children: childIds }),
+  };
+}
+
+function parseV09Node(comp: BaseComponent_v0_9): ReactComponentTree {
+  const type = comp.component;
+
+  const props: Record<string, any> = {};
+  for (const [key, val] of Object.entries(comp)) {
+    // 跳过结构性内部字段，其余字段（包括 value）统一处理
+    if (['id', 'component', 'child', 'children'].includes(key)) continue;
+    // 字面值直接使用，{ path } 形式提取路径字符串供 resolveProps 解析
+    props[key] = isPathObject(val) ? val.path : val;
+  }
+
+  const childIds: string[] = comp.children ?? (comp.child ? [comp.child] : []);
+
+  return {
+    type,
+    props,
+    ...(childIds.length > 0 && { children: childIds }),
+  };
+}
+
+// ─── 工厂函数 ────────────────────────────────────────────────────────────────
+
+export interface ComponentTransformer {
+  /**
+   * 将新增/更新的 components 合并进内部缓存，并返回以 root 节点为根的树。
+   * 若缓存中尚无 id === 'root' 的节点则返回 null。
+   */
+  transform(
+    components: ComponentWrapper_v0_8[] | BaseComponent_v0_9[],
+    version?: 'v0.8' | 'v0.9',
+  ): ReactComponentTree | null;
+
+  /** 按 id 查找已缓存的节点，不存在时返回 undefined */
+  getById(id: string): ReactComponentTree | undefined;
+
+  /** 清空内部缓存 */
+  reset(): void;
+}
+
+export function createComponentTransformer(): ComponentTransformer {
+  // id → 解析后的节点（children 为子节点 id 列表）
+  const componentMap = new Map<string, ReactComponentTree>();
+
+  function transform(
+    components: ComponentWrapper_v0_8[] | BaseComponent_v0_9[],
+    version: 'v0.8' | 'v0.9' = 'v0.8',
+  ): ReactComponentTree | null {
+    if (!Array.isArray(components) || components.length === 0) {
+      return componentMap.get('root') ?? null;
+    }
+
+    if (version === 'v0.8') {
+      for (const comp of components as ComponentWrapper_v0_8[]) {
+        componentMap.set(comp.id, parseV08Node(comp));
+      }
+    } else {
+      for (const comp of components as BaseComponent_v0_9[]) {
+        componentMap.set(comp.id, parseV09Node(comp));
+      }
+    }
+
+    return componentMap.get('root') ?? null;
+  }
+
+  function getById(id: string): ReactComponentTree | undefined {
+    return componentMap.get(id);
+  }
+
+  function reset(): void {
+    componentMap.clear();
+  }
+
+  return { transform, getById, reset };
+}
+
+// ─── 向后兼容的默认导出 ───────────────────────────────────────────────────────
+
+/** @deprecated 请使用 createComponentTransformer() 工厂函数 */
+export default function transformToReactTree(
+  componentsCommand: ComponentWrapper_v0_8[] | BaseComponent_v0_9[],
+  version: 'v0.8' | 'v0.9' = 'v0.8',
+): ReactComponentTree | null {
+  const transformer = createComponentTransformer();
+  return transformer.transform(componentsCommand, version);
+}
diff --git a/packages/x-card/src/A2UI/index.ts b/packages/x-card/src/A2UI/index.ts
new file mode 100644
index 0000000000..6444eda5ff
--- /dev/null
+++ b/packages/x-card/src/A2UI/index.ts
@@ -0,0 +1,11 @@
+import Card from './Card';
+import Box from './Box';
+export type { BoxProps, ActionPayload } from './types/box';
+export type { XAgentCommand_v0_9 } from './types/command_v0.9';
+export type { XAgentCommand_v0_8 } from './types/command_v0.8';
+export type { Catalog, CatalogComponent } from './catalog';
+export { loadCatalog, registerCatalog, validateComponent, clearCatalogCache } from './catalog';
+
+const XCard = { Card, Box };
+
+export default XCard;
diff --git a/packages/x-card/src/A2UI/types/box.ts b/packages/x-card/src/A2UI/types/box.ts
new file mode 100644
index 0000000000..be61e261bd
--- /dev/null
+++ b/packages/x-card/src/A2UI/types/box.ts
@@ -0,0 +1,31 @@
+import type { XAgentCommand_v0_8 } from './command_v0.8';
+import type { A2UICommand_v0_9 } from './command_v0.9';
+
+type ComponentName = `${Uppercase<string>}${string}`;
+
+/** action 事件载荷，由 Button 等组件触发 */
+export interface ActionPayload {
+  /** 事件名称，对应 action.event.name */
+  name: string;
+  /** 触发该 action 的 surfaceId */
+  surfaceId: string;
+  /** 当前 surface 的完整 dataModel 快照，作为 context */
+  context: Record<string, any>;
+}
+
+export interface BoxProps {
+  children?: React.ReactNode;
+  /**
+   * @description 配置组件需要遵循 React 组件规范， 组件名称必须以大写字母开头
+   */
+  components?: Record<ComponentName, React.ComponentType<any>>;
+  /**
+   * @description 命令队列，每次追加新命令到数组末尾，Box 按顺序处理所有命令。
+   * 使用数组而非单值，避免 React 批量更新时同一渲染周期内多条命令被合并丢失。
+   */
+  commands?: (A2UICommand_v0_9 | XAgentCommand_v0_8)[];
+  /**
+   * @description 当 Card 内部组件触发 action 时回调，携带事件名称、surfaceId 及当前数据快照
+   */
+  onAction?: (payload: ActionPayload) => void;
+}
diff --git a/packages/x-card/src/A2UI/types/command_v0.8.ts b/packages/x-card/src/A2UI/types/command_v0.8.ts
new file mode 100644
index 0000000000..341cdb58de
--- /dev/null
+++ b/packages/x-card/src/A2UI/types/command_v0.8.ts
@@ -0,0 +1,80 @@
+// A2UI Component System v0.8 Type Definitions
+// Flexible component system supporting dynamic component types
+
+/** 数据绑定路径对象 */
+export interface PathValue {
+  path: string;
+}
+
+/** 字面字符串值对象（v0.8 特有） */
+export interface LiteralStringValue {
+  literalString: string;
+}
+
+/** v0.8 children 字段格式，支持数组或 explicitList 对象 */
+export interface ExplicitList {
+  explicitList: string[];
+}
+
+// Component wrapper structure with standard fields and custom properties
+export interface ComponentWrapper_v0_8 {
+  id: string;
+  component: {
+    [componentType: string]: {
+      // Standard fields for component relationships
+      child?: string;
+      children?: string[] | ExplicitList;
+      // 任何字段均支持字面值或 PathValue / LiteralStringValue 数据绑定形式
+      // 例：{ "text": "Hello" } 或 { "text": { "path": "/user/name" } } 或 { "text": { "literalString": "Hello" } }
+      [key: string]: any;
+    };
+  };
+}
+
+// Command to update surface components
+interface SurfaceUpdateCommand {
+  surfaceUpdate: {
+    surfaceId: string;
+    components: ComponentWrapper_v0_8[];
+  };
+}
+
+// Command to update data model
+interface DataModelUpdateCommand {
+  dataModelUpdate: {
+    surfaceId: string;
+    contents: Array<{
+      key: string;
+      valueString?: string;
+      valueMap?: Array<{
+        key: string;
+        valueString: string;
+      }>;
+    }>;
+  };
+}
+
+// Command to begin rendering
+interface BeginRenderingCommand {
+  beginRendering: {
+    surfaceId: string;
+    root: string; // Root component ID
+  };
+}
+
+// Command to delete a surface
+interface DeleteSurfaceCommand {
+  deleteSurface: {
+    surfaceId: string;
+  };
+}
+
+// Union type for all possible commands
+export type A2UICommand_v0_8 =
+  | SurfaceUpdateCommand
+  | DataModelUpdateCommand
+  | BeginRenderingCommand
+  | DeleteSurfaceCommand;
+
+// Backward compatible type alias
+export type XAgentCommand_v0_8 = A2UICommand_v0_8;
diff --git a/packages/x-card/src/A2UI/types/command_v0.9.ts b/packages/x-card/src/A2UI/types/command_v0.9.ts
new file mode 100644
index 0000000000..43eec9878f
--- /dev/null
+++ b/packages/x-card/src/A2UI/types/command_v0.9.ts
@@ -0,0 +1,87 @@
+// A2UI Command System v0.9 Type Definitions
+// Structured command system with explicit versioning and strict typing
+
+/** 数据绑定路径对象，任何组件字段均可使用此形式实现响应式绑定 */
+export interface PathValue {
+  path: string;
+}
+
+/** Action 事件的 context 字段结构，支持路径绑定 */
+export interface ActionContext {
+  /** context 中的每个字段都可以是路径绑定或字面值 */
+  [key: string]: PathValue | any;
+}
+
+/** Action 事件定义 */
+export interface ActionEvent {
+  /** 事件名称 */
+  name: string;
+  /**
+   * 事件上下文，包含需要上报的数据路径绑定
+   * 组件触发 action 时，会自动将组件传递的值写入这些路径
+   */
+  context?: ActionContext;
+}
+
+/** Action 配置 */
+export interface ActionConfig {
+  /** 事件配置 */
+  event?: ActionEvent;
+}
+
+// Base component structure for v0.9
+export interface BaseComponent_v0_9 {
+  id: string;
+  component: string; // Component type identifier
+  child?: string;
+  children?: string[]; // Reference to children component ID
+  // 任何字段均支持字面值或 PathValue（{ path: string }）数据绑定形式
+  // 例：{ "text": "Hello" } 或 { "text": { "path": "/user/name" } }
+  [key: string]: any;
+}
+
+// Command to create a new surface
+interface CreateSurfaceCommand {
+  version: 'v0.9';
+  createSurface: {
+    surfaceId: string;
+    catalogId: string; // 必需，组件目录 URL 或本地标识
+  };
+}
+
+// Command to update components on a surface
+interface UpdateComponentsCommand {
+  version: 'v0.9';
+  updateComponents: {
+    surfaceId: string;
+    components: BaseComponent_v0_9[];
+  };
+}
+
+// Command to update data model
+interface UpdateDataModelCommand {
+  version: 'v0.9';
+  updateDataModel: {
+    surfaceId: string;
+    path: string;
+    value: any;
+  };
+}
+
+// Command to delete a surface
+interface DeleteSurfaceCommand {
+  version: 'v0.9';
+  deleteSurface: {
+    surfaceId: string;
+  };
+}
+
+// Union type for all possible commands
+export type A2UICommand_v0_9 =
+  | CreateSurfaceCommand
+  | UpdateComponentsCommand
+  | UpdateDataModelCommand
+  | DeleteSurfaceCommand;
+
+// Backward compatible type alias
+export type XAgentCommand_v0_9 = A2UICommand_v0_9;
diff --git a/packages/x-card/src/A2UI/utils.ts b/packages/x-card/src/A2UI/utils.ts
new file mode 100644
index 0000000000..d091a5a84a
--- /dev/null
+++ b/packages/x-card/src/A2UI/utils.ts
@@ -0,0 +1,90 @@
+/**
+ * Card shared utility functions
+ * Utility functions shared by v0.8 and v0.9 versions
+ */
+
+/** Get value from nested object by path, path format like /booking/date */
+export function getValueByPath(obj: Record<string, any>, path: string): any {
+  const parts = path.replace(/^\//, '').split('/');
+  return parts.reduce((cur, key) => (cur != null ? cur[key] : undefined), obj as any);
+}
+
+/** Write value to nested object by path (immutable), path format like /booking/selectedCoffee */
+export function setValueByPath(
+  obj: Record<string, any>,
+  path: string,
+  value: any,
+): Record<string, any> {
+  const parts = path.replace(/^\//, '').split('/');
+  const next = { ...obj };
+  let cur: Record<string, any> = next;
+  for (let i = 0; i < parts.length - 1; i++) {
+    cur[parts[i]] = cur[parts[i]] ? { ...cur[parts[i]] } : {};
+    cur = cur[parts[i]];
+  }
+  cur[parts[parts.length - 1]] = value;
+  return next;
+}
+
+/** Check if string is a data binding path (starts with /) */
+export function isPathValue(val: any): val is string {
+  return typeof val === 'string' && val.startsWith('/');
+}
+
+/** Check if a value is a path object in { path: string } format */
+export function isPathObject(val: any): val is { path: string } {
+  return val !== null && typeof val === 'object' && typeof val.path === 'string';
+}
+
+/**
+ * Validate if component conforms to catalog definition
+ * @param catalog catalog definition
+ * @param componentName component name
+ * @param componentProps component properties
+ * @returns { valid: boolean, errors: string[] }
+ */
+export function validateComponentAgainstCatalog(
+  catalog: any,
+  componentName: string,
+  componentProps: Record<string, any>,
+): { valid: boolean; errors: string[] } {
+  const errors: string[] = [];
+
+  // If no catalog, pass by default
+  if (!catalog || !catalog.components) {
+    return { valid: true, errors: [] };
+  }
+
+  // Check if component is defined in catalog
+  const componentDef = catalog.components[componentName];
+  if (!componentDef) {
+    errors.push(`Component "${componentName}" is not defined in catalog`);
+    return { valid: false, errors };
+  }
+
+  // Check required fields
+  const requiredFields = componentDef.required || [];
+  for (const field of requiredFields) {
+    if (!(field in componentProps)) {
+      errors.push(`Missing required field "${field}" for component "${componentName}"`);
+    }
+  }
+
+  // Check if properties are defined in schema (warning level, does not block rendering)
+  if (componentDef.properties) {
+    const definedProps = Object.keys(componentDef.properties);
+    const actualProps = Object.keys(componentProps).filter(
+      (key) => !['id', 'children', 'component'].includes(key),
+    );
+
+    for (const prop of actualProps) {
+      if (!definedProps.includes(prop)) {
+        errors.push(
+          `Warning: Property "${prop}" is not defined in catalog for component "${componentName}"`,
+        );
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
diff --git a/packages/x-card/src/index.ts b/packages/x-card/src/index.ts
new file mode 100644
index 0000000000..2f6dfdda9c
--- /dev/null
+++ b/packages/x-card/src/index.ts
@@ -0,0 +1,15 @@
+export { default as version } from './version';
+export {
+  default as XCard,
+  type XAgentCommand_v0_9,
+  type XAgentCommand_v0_8,
+  type ActionPayload,
+  type Catalog,
+  type CatalogComponent,
+  registerCatalog,
+  loadCatalog,
+  validateComponent,
+  clearCatalogCache,
+} from './A2UI';
+export { default as Card } from './A2UI/Card';
+export { default as Box } from './A2UI/Box';
diff --git a/packages/x-card/src/version.ts b/packages/x-card/src/version.ts
new file mode 100644
index 0000000000..e0291fa0ee
--- /dev/null
+++ b/packages/x-card/src/version.ts
@@ -0,0 +1,2 @@
+// This file is auto generated by npm run version
+export default '2.3.0-beta.2';
diff --git a/packages/x-card/tests/dekko/index.test.ts b/packages/x-card/tests/dekko/index.test.ts
new file mode 100644
index 0000000000..ad1326e3c1
--- /dev/null
+++ b/packages/x-card/tests/dekko/index.test.ts
@@ -0,0 +1,7 @@
+import $ from 'dekko';
+
+$('lib').isDirectory().hasFile('index.js').hasFile('index.d.ts');
+
+$('es').isDirectory().hasFile('index.js').hasFile('index.d.ts');
+
+$('dist').isDirectory().hasFile('x-card.js').hasFile('x-card.min.js');
diff --git a/packages/x-card/tests/setup.ts b/packages/x-card/tests/setup.ts
new file mode 100644
index 0000000000..9424ab49d1
--- /dev/null
+++ b/packages/x-card/tests/setup.ts
@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+import util from 'util';
+
+type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
+// This function can not move to external file since jest setup not support
+export function fillWindowEnv(window: Window) {
+  const win = window as Writeable<Window> & typeof globalThis;
+  win.resizeTo = (width, height) => {
+    win.innerWidth = width || win.innerWidth;
+    win.innerHeight = height || win.innerHeight;
+    win.dispatchEvent(new Event('resize'));
+  };
+  win.scrollTo = () => {};
+  // ref: https://github.com/ant-design/ant-design/issues/18774
+  if (!win.matchMedia) {
+    Object.defineProperty(win, 'matchMedia', {
+      writable: true,
+      configurable: true,
+      value: jest.fn((query) => ({
+        matches: query.includes('max-width'),
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      })),
+    });
+  }
+  // Fix css-animation or @rc-component/motion deps on these
+  win.AnimationEvent = win.AnimationEvent || win.Event;
+  win.TransitionEvent = win.TransitionEvent || win.Event;
+  // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  // ref: https://github.com/jsdom/jsdom/issues/2524
+  Object.defineProperty(win, 'TextEncoder', {
+    writable: true,
+    value: util.TextEncoder,
+  });
+  Object.defineProperty(win, 'TextDecoder', {
+    writable: true,
+    value: util.TextDecoder,
+  });
+}
+
+if (typeof window !== 'undefined') {
+  fillWindowEnv(window);
+}
+
+global.requestAnimationFrame = global.requestAnimationFrame || global.setTimeout;
+global.cancelAnimationFrame = global.cancelAnimationFrame || global.clearTimeout;
diff --git a/packages/x-card/tsconfig.json b/packages/x-card/tsconfig.json
new file mode 100644
index 0000000000..23ca6649d0
--- /dev/null
+++ b/packages/x-card/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*", "typings/**/*"],
+  "exclude": ["node_modules", "lib", "es", "dist"]
+}
\ No newline at end of file
diff --git a/packages/x-markdown/src/plugins/Latex/__tests__/__snapshots__/index.test.tsx.snap b/packages/x-markdown/src/plugins/Latex/__tests__/__snapshots__/index.test.tsx.snap
index 946775fc19..2c194a7153 100644
--- a/packages/x-markdown/src/plugins/Latex/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/x-markdown/src/plugins/Latex/__tests__/__snapshots__/index.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`LaTeX Plugin should handle LaTeX with surrounding text 1`] = `
                 />
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.05764em;"
+                  style="margin-right: 0.0576em;"
                 >
                   E
                 </span>
@@ -137,7 +137,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
               >
                 <span
                   class="strut"
-                  style="height: 1.5em; vertical-align: -0.5em;"
+                  style="height: 1.2em; vertical-align: -0.35em;"
                 />
                 <span
                   class="mord"
@@ -156,10 +156,10 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                         >
                           <span
                             class="vlist"
-                            style="height: 1em;"
+                            style="height: 0.85em;"
                           >
                             <span
-                              style="top: -3.16em;"
+                              style="top: -3.01em;"
                             >
                               <span
                                 class="pstrut"
@@ -187,7 +187,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                         >
                           <span
                             class="vlist"
-                            style="height: 0.5em;"
+                            style="height: 0.35em;"
                           >
                             <span />
                           </span>
@@ -205,10 +205,10 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                         >
                           <span
                             class="vlist"
-                            style="height: 1em;"
+                            style="height: 0.85em;"
                           >
                             <span
-                              style="top: -3.16em;"
+                              style="top: -3.01em;"
                             >
                               <span
                                 class="pstrut"
@@ -235,7 +235,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                                 />
                                 <span
                                   class="mord mathnormal"
-                                  style="margin-right: 0.03588em;"
+                                  style="margin-right: 0.0359em;"
                                 >
                                   y
                                 </span>
@@ -245,7 +245,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                                 </span>
                                 <span
                                   class="mord mathnormal"
-                                  style="margin-right: 0.03588em;"
+                                  style="margin-right: 0.0359em;"
                                 >
                                   y
                                 </span>
@@ -263,7 +263,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                         >
                           <span
                             class="vlist"
-                            style="height: 0.5em;"
+                            style="height: 0.35em;"
                           >
                             <span />
                           </span>
@@ -285,10 +285,10 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                         >
                           <span
                             class="vlist"
-                            style="height: 1em;"
+                            style="height: 0.85em;"
                           >
                             <span
-                              style="top: -3.16em;"
+                              style="top: -3.01em;"
                             >
                               <span
                                 class="pstrut"
@@ -308,7 +308,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                                 />
                                 <span
                                   class="mord mathnormal"
-                                  style="margin-right: 0.04398em;"
+                                  style="margin-right: 0.044em;"
                                 >
                                   z
                                 </span>
@@ -326,7 +326,7 @@ exports[`LaTeX Plugin should handle align* syntax replacement 1`] = `
                         >
                           <span
                             class="vlist"
-                            style="height: 0.5em;"
+                            style="height: 0.35em;"
                           >
                             <span />
                           </span>
@@ -581,7 +581,7 @@ exports[`LaTeX Plugin should handle complex LaTeX expressions 1`] = `
                             >
                               <span
                                 class="mord mathnormal mtight"
-                                style="margin-right: 0.05724em;"
+                                style="margin-right: 0.0572em;"
                               >
                                 j
                               </span>
@@ -662,7 +662,7 @@ exports[`LaTeX Plugin should handle complex LaTeX expressions 1`] = `
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     y
                   </span>
@@ -691,7 +691,7 @@ exports[`LaTeX Plugin should handle complex LaTeX expressions 1`] = `
                             >
                               <span
                                 class="mord mathnormal mtight"
-                                style="margin-right: 0.05724em;"
+                                style="margin-right: 0.0572em;"
                               >
                                 j
                               </span>
@@ -842,7 +842,7 @@ exports[`LaTeX Plugin should handle mixed LaTeX syntaxes 1`] = `
                 >
                   <span
                     class="mop op-symbol large-op"
-                    style="margin-right: 0.44445em; position: relative; top: -0.0011em;"
+                    style="margin-right: 0.4445em; position: relative; top: -0.0011em;"
                   >
                     ∫
                   </span>
@@ -919,7 +919,7 @@ exports[`LaTeX Plugin should handle mixed LaTeX syntaxes 1`] = `
                 />
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.10764em;"
+                  style="margin-right: 0.1076em;"
                 >
                   f
                 </span>
@@ -1198,7 +1198,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1230,7 +1230,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                               >
                                 <span
                                   class="mord mathnormal mtight"
-                                  style="margin-right: 0.13889em;"
+                                  style="margin-right: 0.1389em;"
                                 >
                                   P
                                 </span>
@@ -1293,7 +1293,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1362,7 +1362,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 />
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.05278em;"
+                  style="margin-right: 0.0528em;"
                 >
                   β
                 </span>
@@ -1392,7 +1392,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1421,7 +1421,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                             >
                               <span
                                 class="mord mathnormal mtight"
-                                style="margin-right: 0.13889em;"
+                                style="margin-right: 0.1389em;"
                               >
                                 P
                               </span>
@@ -1473,7 +1473,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1571,7 +1571,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1603,7 +1603,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                               >
                                 <span
                                   class="mord mathnormal mtight"
-                                  style="margin-right: 0.13889em;"
+                                  style="margin-right: 0.1389em;"
                                 >
                                   P
                                 </span>
@@ -1666,7 +1666,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1735,7 +1735,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 />
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.05278em;"
+                  style="margin-right: 0.0528em;"
                 >
                   β
                 </span>
@@ -1765,7 +1765,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -1794,7 +1794,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                             >
                               <span
                                 class="mord mathnormal mtight"
-                                style="margin-right: 0.13889em;"
+                                style="margin-right: 0.1389em;"
                               >
                                 P
                               </span>
@@ -1846,7 +1846,7 @@ exports[`LaTeX Plugin should parse consecutive block formulas with indentation (
                 >
                   <span
                     class="mord mathnormal"
-                    style="margin-right: 0.03588em;"
+                    style="margin-right: 0.0359em;"
                   >
                     v
                   </span>
@@ -2181,7 +2181,7 @@ exports[`LaTeX Plugin should render inline LaTeX with $$\\n..\\n$$ syntax 1`] =
                 />
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.10764em;"
+                  style="margin-right: 0.1076em;"
                 >
                   f
                 </span>
@@ -2264,7 +2264,7 @@ exports[`LaTeX Plugin should render inline LaTeX with $$\\n..\\n$$ syntax 1`] =
                 </span>
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.03588em;"
+                  style="margin-right: 0.0359em;"
                 >
                   y
                 </span>
@@ -2301,7 +2301,7 @@ exports[`LaTeX Plugin should render inline LaTeX with $$\\n..\\n$$ syntax 1`] =
                 </span>
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.10764em;"
+                  style="margin-right: 0.1076em;"
                 >
                   f
                 </span>
@@ -2384,7 +2384,7 @@ exports[`LaTeX Plugin should render inline LaTeX with $$\\n..\\n$$ syntax 1`] =
                 </span>
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.10764em;"
+                  style="margin-right: 0.1076em;"
                 >
                   f
                 </span>
@@ -2395,7 +2395,7 @@ exports[`LaTeX Plugin should render inline LaTeX with $$\\n..\\n$$ syntax 1`] =
                 </span>
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.03588em;"
+                  style="margin-right: 0.0359em;"
                 >
                   y
                 </span>
@@ -2442,7 +2442,7 @@ exports[`LaTeX Plugin should render inline LaTeX with $..$ syntax 1`] = `
                 />
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.05764em;"
+                  style="margin-right: 0.0576em;"
                 >
                   E
                 </span>
@@ -2588,7 +2588,7 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                               >
                                 <span
                                   class="mord mathnormal mtight"
-                                  style="margin-right: 0.07153em;"
+                                  style="margin-right: 0.0715em;"
                                 >
                                   C
                                 </span>
@@ -2599,13 +2599,13 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                                 </span>
                                 <span
                                   class="mord mathnormal mtight"
-                                  style="margin-right: 0.07847em;"
+                                  style="margin-right: 0.0785em;"
                                 >
                                   I
                                 </span>
                                 <span
                                   class="mord mathnormal mtight"
-                                  style="margin-right: 0.13889em;"
+                                  style="margin-right: 0.1389em;"
                                 >
                                   P
                                 </span>
@@ -2624,7 +2624,7 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                 </span>
                 <span
                   class="mord mathnormal"
-                  style="margin-right: 0.02778em;"
+                  style="margin-right: 0.0278em;"
                 >
                   θ
                 </span>
@@ -2756,7 +2756,7 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                     >
                       <span
                         class="mord mathnormal"
-                        style="margin-right: 0.02778em;"
+                        style="margin-right: 0.0278em;"
                       >
                         r
                       </span>
@@ -2817,7 +2817,7 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                     </span>
                     <span
                       class="mord mathnormal"
-                      style="margin-right: 0.02778em;"
+                      style="margin-right: 0.0278em;"
                     >
                       θ
                     </span>
@@ -2955,7 +2955,7 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                     >
                       <span
                         class="mord mathnormal"
-                        style="margin-right: 0.02778em;"
+                        style="margin-right: 0.0278em;"
                       >
                         r
                       </span>
@@ -3016,7 +3016,7 @@ exports[`LaTeX Plugin should render inline LaTeX with [\\n..\\n] syntax 1`] = `
                     </span>
                     <span
                       class="mord mathnormal"
-                      style="margin-right: 0.02778em;"
+                      style="margin-right: 0.0278em;"
                     >
                       θ
                     </span>
diff --git a/packages/x-skill/scripts/generate-meta.ts b/packages/x-skill/scripts/generate-meta.ts
index 060aedefd2..7f13d6db19 100644
--- a/packages/x-skill/scripts/generate-meta.ts
+++ b/packages/x-skill/scripts/generate-meta.ts
@@ -268,4 +268,4 @@ if (require.main === module) {
   generateSkillMeta();
 }
 
-export { generateSkillMeta, scanSkills, extractSkillMetadata };
+export { extractSkillMetadata, generateSkillMeta, scanSkills };
diff --git a/packages/x/.dumi/theme/builtins/Sandpack/index.tsx b/packages/x/.dumi/theme/builtins/Sandpack/index.tsx
index e84c9f2f26..f60ca75bc9 100644
--- a/packages/x/.dumi/theme/builtins/Sandpack/index.tsx
+++ b/packages/x/.dumi/theme/builtins/Sandpack/index.tsx
@@ -62,6 +62,7 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
       antd: '^6.1.1',
       '@ant-design/x': '^2.0.0',
       '@ant-design/x-markdown': '^2.0.0',
+      '@ant-design/x-card': '^2.0.0',
       '@ant-design/x-sdk': '^2.0.0',
       ...dependencies,
     },
diff --git a/packages/x/.dumi/theme/slots/Header/Navigation.tsx b/packages/x/.dumi/theme/slots/Header/Navigation.tsx
index 7117a61b26..e4c29d5e1b 100644
--- a/packages/x/.dumi/theme/slots/Header/Navigation.tsx
+++ b/packages/x/.dumi/theme/slots/Header/Navigation.tsx
@@ -21,6 +21,7 @@ const locales = {
     blog: '博客',
     sdk: 'X SDK',
     skill: 'X Skill',
+    card: 'X Card',
     markdown: 'X Markdown',
     resources: '资源',
   },
@@ -33,6 +34,7 @@ const locales = {
     blog: 'Blog',
     sdk: 'X SDK',
     skill: 'X Skill',
+    card: 'X Card',
     markdown: 'X Markdown',
     resources: 'Resources',
   },
@@ -64,6 +66,11 @@ const defaultItems = [
     basePath: '/x-sdk',
     key: 'sdk',
   },
+  {
+    path: '/x-cards/introduce',
+    basePath: '/x-card',
+    key: 'card',
+  },
   {
     path: '/x-skills/introduce',
     basePath: '/x-skill',
diff --git a/packages/x/.dumirc.ts b/packages/x/.dumirc.ts
index 8463059293..75adece52e 100644
--- a/packages/x/.dumirc.ts
+++ b/packages/x/.dumirc.ts
@@ -39,6 +39,7 @@ export default defineConfig({
       { type: 'doc', dir: 'docs' },
       { type: 'x-sdk', dir: 'docs/x-sdk' },
       { type: 'x-markdown', dir: 'docs/x-markdown' },
+      { type: 'x-card', dir: 'docs/x-card' },
       { type: 'x-skill', dir: 'docs/x-skill' },
     ],
     atomDirs: [{ type: 'component', dir: 'components' }],
@@ -60,6 +61,7 @@ export default defineConfig({
     '@ant-design/x/lib': path.join(__dirname, 'components'),
     '@ant-design/x/es': path.join(__dirname, 'components'),
     '@ant-design/x': path.join(__dirname, 'components'),
+    '@ant-design/x-card': path.join(__dirname, '../x-card/src'),
     '@ant-design/x-markdown': path.join(__dirname, '../x-markdown/src'),
     '@ant-design/x-sdk': path.join(__dirname, '../x-sdk/src'),
     '@ant-design/x-skill': path.join(__dirname, '../x-skill/src'),
diff --git a/packages/x/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/x/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
index f69c98f448..7fb68a4411 100644
--- a/packages/x/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/packages/x/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,13 +2,13 @@
 
 exports[`renders components/attachments/demo/basic.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-_r_1b_"
+  class="ant-app css-var-_r_29_"
 >
   <div
-    class="ant-flex css-var-_r_1b_ ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
+    class="ant-flex css-var-_r_29_ ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
   >
     <div
-      class="ant-sender css-var-_r_1b_ ant-sender-main"
+      class="ant-sender css-var-_r_29_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
@@ -17,7 +17,7 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
           class="ant-sender-prefix"
         >
           <span
-            class="ant-upload-wrapper css-var-_r_1b_"
+            class="ant-upload-wrapper css-var-_r_29_"
           >
             <div
               class="ant-upload ant-upload-select"
@@ -32,7 +32,7 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
                   type="file"
                 />
                 <button
-                  class="ant-btn css-var-_r_1b_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+                  class="ant-btn css-var-_r_29_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
                   type="button"
                 >
                   <span
@@ -64,17 +64,17 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
           </span>
         </div>
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_1b_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_29_ ant-input-css-var ant-sender-input"
           style="overflow-y: hidden; resize: none;"
         />
         <div
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_1b_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_29_"
           >
             <button
-              class="ant-btn css-var-_r_1b_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              class="ant-btn css-var-_r_29_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
               disabled=""
               type="button"
             >
@@ -108,7 +108,7 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
     </div>
     <button
       aria-checked="false"
-      class="ant-switch css-var-_r_1b_"
+      class="ant-switch css-var-_r_29_"
       role="switch"
       type="button"
     >
@@ -131,14 +131,14 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
       </span>
     </button>
     <div
-      class="ant-attachment-drop-area css-var-_r_1b_"
+      class="ant-attachment-drop-area css-var-_r_29_"
       style="display: none;"
     >
       <div
         class="ant-attachment-placeholder"
       >
         <span
-          class="ant-upload-wrapper css-var-_r_1b_"
+          class="ant-upload-wrapper css-var-_r_29_"
         >
           <div
             class="ant-upload ant-upload-drag"
@@ -159,10 +159,10 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
                 class="ant-upload-drag-container"
               >
                 <div
-                  class="ant-attachment-placeholder-inner ant-flex css-var-_r_1b_ ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
+                  class="ant-attachment-placeholder-inner ant-flex css-var-_r_29_ ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
                 >
                   <span
-                    class="ant-typography ant-attachment-placeholder-icon css-var-_r_1b_"
+                    class="ant-typography ant-attachment-placeholder-icon css-var-_r_29_"
                   >
                     <span
                       aria-label="cloud-upload"
@@ -188,12 +188,12 @@ exports[`renders components/attachments/demo/basic.tsx extend context correctly
                     </span>
                   </span>
                   <h5
-                    class="ant-typography ant-attachment-placeholder-title css-var-_r_1b_"
+                    class="ant-typography ant-attachment-placeholder-title css-var-_r_29_"
                   >
                     Drag & Drop files here
                   </h5>
                   <span
-                    class="ant-typography ant-typography-secondary ant-attachment-placeholder-description css-var-_r_1b_"
+                    class="ant-typography ant-typography-secondary ant-attachment-placeholder-description css-var-_r_29_"
                   >
                     Support file type: image, video, audio, document, etc.
                   </span>
@@ -345,7 +345,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-0.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-0.jpg"
@@ -393,7 +396,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-1.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-1.jpg"
@@ -441,7 +447,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-2.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-2.jpg"
@@ -489,7 +498,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-3.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-3.jpg"
@@ -537,7 +549,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-4.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-4.jpg"
@@ -585,7 +600,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-5.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-5.jpg"
@@ -633,7 +651,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-6.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-6.jpg"
@@ -681,7 +702,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-7.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-7.jpg"
@@ -729,7 +753,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-8.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-8.jpg"
@@ -777,7 +804,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-9.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-9.jpg"
@@ -825,7 +855,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-10.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-10.jpg"
@@ -873,7 +906,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-11.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-11.jpg"
@@ -921,7 +957,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-12.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-12.jpg"
@@ -969,7 +1008,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-13.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-13.jpg"
@@ -1017,7 +1059,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-14.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-14.jpg"
@@ -1065,7 +1110,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-15.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-15.jpg"
@@ -1113,7 +1161,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-16.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-16.jpg"
@@ -1161,7 +1212,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-17.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-17.jpg"
@@ -1209,7 +1263,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-18.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-18.jpg"
@@ -1257,7 +1314,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-19.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-19.jpg"
@@ -1305,7 +1365,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-20.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-20.jpg"
@@ -1353,7 +1416,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-21.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-21.jpg"
@@ -1401,7 +1467,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-22.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-22.jpg"
@@ -1449,7 +1518,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-23.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-23.jpg"
@@ -1497,7 +1569,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-24.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-24.jpg"
@@ -1545,7 +1620,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-25.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-25.jpg"
@@ -1593,7 +1671,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-26.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-26.jpg"
@@ -1641,7 +1722,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-27.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-27.jpg"
@@ -1689,7 +1773,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-28.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-28.jpg"
@@ -1737,7 +1824,10 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
               class="ant-file-card-image ant-attachment-list-card-status-done"
             >
               <div
+                aria-label="file-29.jpg"
                 class="ant-image ant-file-card-image-img css-var-_r_b_ ant-image-css-var"
+                role="button"
+                tabindex="0"
               >
                 <img
                   alt="file-29.jpg"
diff --git a/packages/x/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/x/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3989750924..cfe31cffdb 100644
--- a/packages/x/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/packages/x/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,16 +2,16 @@
 
 exports[`renders components/bubble/demo/animation.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_3v_ ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+  class="ant-flex css-var-_r_40_ ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-flex css-var-_r_3v_ ant-flex-align-center ant-flex-gap-small"
+    class="ant-flex css-var-_r_40_ ant-flex-align-center ant-flex-gap-small"
   >
     <span>
       非流式数据 / Non-streaming data:
     </span>
     <button
-      class="ant-btn css-var-_r_3v_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+      class="ant-btn css-var-_r_40_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -19,7 +19,7 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 1
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_3v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_40_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -28,17 +28,17 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 1
     </button>
   </div>
   <div
-    class="ant-flex css-var-_r_3v_ ant-flex-align-center ant-flex-gap-small"
+    class="ant-flex css-var-_r_40_ ant-flex-align-center ant-flex-gap-small"
   >
     <span>
       动画效果 / Animation effects:
     </span>
     <div
-      class="ant-radio-group ant-radio-group-outline css-var-_r_3v_ ant-radio-css-var"
+      class="ant-radio-group ant-radio-group-outline css-var-_r_40_ ant-radio-css-var"
       role="radiogroup"
     >
       <label
-        class="ant-radio-wrapper ant-radio-wrapper-checked css-var-_r_3v_ ant-radio-css-var"
+        class="ant-radio-wrapper ant-radio-wrapper-checked css-var-_r_40_ ant-radio-css-var"
       >
         <span
           class="ant-radio ant-wave-target ant-radio-checked"
@@ -58,7 +58,7 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 1
         </span>
       </label>
       <label
-        class="ant-radio-wrapper css-var-_r_3v_ ant-radio-css-var"
+        class="ant-radio-wrapper css-var-_r_40_ ant-radio-css-var"
       >
         <span
           class="ant-radio ant-wave-target"
@@ -77,7 +77,7 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 1
         </span>
       </label>
       <label
-        class="ant-radio-wrapper css-var-_r_3v_ ant-radio-css-var"
+        class="ant-radio-wrapper css-var-_r_40_ ant-radio-css-var"
       >
         <span
           class="ant-radio ant-wave-target"
@@ -98,14 +98,14 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 1
     </div>
   </div>
   <div
-    class="ant-flex css-var-_r_3v_ ant-flex-align-center ant-flex-gap-small"
+    class="ant-flex css-var-_r_40_ ant-flex-align-center ant-flex-gap-small"
   >
     <span>
       保留公共前缀 / Preserve common prefix:
     </span>
     <button
       aria-checked="false"
-      class="ant-switch css-var-_r_3v_"
+      class="ant-switch css-var-_r_40_"
       role="switch"
       type="button"
     >
@@ -125,20 +125,20 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 1
     </button>
   </div>
   <div
-    class="ant-divider css-var-_r_3v_ ant-divider-horizontal ant-divider-rail"
+    class="ant-divider css-var-_r_40_ ant-divider-horizontal ant-divider-rail"
     role="separator"
   />
   <div
-    class="ant-flex css-var-_r_3v_ ant-flex-align-center ant-flex-gap-small"
+    class="ant-flex css-var-_r_40_ ant-flex-align-center ant-flex-gap-small"
   >
     <div
-      class="ant-bubble css-var-_r_41_ ant-bubble-start ant-bubble-loading"
+      class="ant-bubble css-var-_r_42_ ant-bubble-start ant-bubble-loading"
     >
       <div
         class="ant-bubble-avatar"
       >
         <span
-          class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-_r_41_ ant-avatar-css-var"
+          class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-_r_42_ ant-avatar-css-var"
         >
           <span
             aria-label="user"
@@ -183,13 +183,13 @@ exports[`renders components/bubble/demo/animation.tsx extend context correctly 2
 
 exports[`renders components/bubble/demo/basic.tsx extend context correctly 1`] = `
 <div
-  class="ant-bubble css-var-_r_3o_ ant-bubble-start"
+  class="ant-bubble css-var-_r_3p_ ant-bubble-start"
 >
   <div
     class="ant-bubble-avatar"
   >
     <span
-      class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-_r_3o_ ant-avatar-css-var"
+      class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-_r_3p_ ant-avatar-css-var"
     >
       <span
         aria-label="ant-design"
@@ -233,13 +233,13 @@ exports[`renders components/bubble/demo/basic.tsx extend context correctly 1`] =
       class="ant-bubble-footer ant-bubble-footer-start"
     >
       <div
-        class="ant-actions css-var-_r_3o_"
+        class="ant-actions css-var-_r_3p_"
       >
         <div
           class="ant-actions-list ant-actions-variant-borderless"
         >
           <span
-            class="ant-actions-copy ant-actions ant-actions-item css-var-_r_3o_ css-var-_r_3o_"
+            class="ant-actions-copy ant-actions ant-actions-item css-var-_r_3p_ css-var-_r_3p_"
           >
             <span
               class="ant-actions-copy-actions"
@@ -271,7 +271,7 @@ exports[`renders components/bubble/demo/basic.tsx extend context correctly 1`] =
                 </span>
               </button>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3o_ ant-tooltip-placement-top"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3p_ ant-tooltip-placement-top"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -320,7 +320,7 @@ exports[`renders components/bubble/demo/basic.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3o_ ant-tooltip-placement-top"
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3p_ ant-tooltip-placement-top"
               style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
             >
               <div
@@ -367,7 +367,9 @@ exports[`renders components/bubble/demo/custom-content.tsx extend context correc
         >
           <div
             class="ant-image css-var-_r_3m_ ant-image-css-var"
+            role="button"
             style="height: 50px;"
+            tabindex="0"
           >
             <img
               class="ant-image-img"
diff --git a/packages/x/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/packages/x/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 15e18fc3e6..583773e283 100644
--- a/packages/x/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/packages/x/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -327,7 +327,9 @@ Array [
           >
             <div
               class="ant-image css-var-_R_0_ ant-image-css-var"
+              role="button"
               style="height:50px"
+              tabindex="0"
             >
               <img
                 class="ant-image-img"
diff --git a/packages/x/components/file-card/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/x/components/file-card/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2ab43b8c49..31cd6e2f15 100644
--- a/packages/x/components/file-card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/packages/x/components/file-card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`renders components/file-card/demo/audio.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_2a_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_4a_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-file-card css-var-_r_2a_"
+    class="ant-file-card css-var-_r_4a_"
   >
     <audio
       class="ant-file-card-audio"
@@ -14,7 +14,7 @@ exports[`renders components/file-card/demo/audio.tsx extend context correctly 1`
     />
   </div>
   <div
-    class="ant-file-card css-var-_r_2a_"
+    class="ant-file-card css-var-_r_4a_"
   >
     <video
       class="ant-file-card-video"
@@ -23,7 +23,7 @@ exports[`renders components/file-card/demo/audio.tsx extend context correctly 1`
     />
   </div>
   <div
-    class="ant-file-card css-var-_r_2a_"
+    class="ant-file-card css-var-_r_4a_"
   >
     <div
       class="ant-file-card-file"
@@ -85,7 +85,7 @@ exports[`renders components/file-card/demo/audio.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_2a_"
+    class="ant-file-card css-var-_r_4a_"
   >
     <div
       class="ant-file-card-file"
@@ -153,10 +153,10 @@ exports[`renders components/file-card/demo/audio.tsx extend context correctly 2`
 
 exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_29_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_49_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -211,7 +211,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -266,7 +266,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -321,7 +321,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -376,7 +376,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -431,7 +431,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -486,7 +486,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -541,7 +541,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -597,7 +597,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -653,7 +653,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -712,7 +712,7 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_29_"
+    class="ant-file-card css-var-_r_49_"
   >
     <div
       class="ant-file-card-file"
@@ -774,10 +774,10 @@ exports[`renders components/file-card/demo/basic.tsx extend context correctly 2`
 
 exports[`renders components/file-card/demo/custom-description.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_28_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_48_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-file-card css-var-_r_28_"
+    class="ant-file-card css-var-_r_48_"
   >
     <div
       class="ant-file-card-file"
@@ -829,17 +829,17 @@ exports[`renders components/file-card/demo/custom-description.tsx extend context
           style="margin-top: 4px; line-height: 1.5;"
         >
           <div
-            class="ant-flex css-var-_r_28_ ant-flex-align-center ant-flex-justify-space-between"
+            class="ant-flex css-var-_r_48_ ant-flex-align-center ant-flex-justify-space-between"
             style="width: 100%;"
           >
             <span
-              class="ant-typography ant-typography-secondary css-var-_r_28_"
+              class="ant-typography ant-typography-secondary css-var-_r_48_"
               style="font-size: 12px;"
             >
               Size: 2 MB
             </span>
             <button
-              class="ant-btn css-var-_r_28_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
+              class="ant-btn css-var-_r_48_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
               style="font-size: 12px; padding: 2px 8px; height: auto; line-height: 1.5;"
               type="button"
             >
@@ -876,7 +876,7 @@ exports[`renders components/file-card/demo/custom-description.tsx extend context
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_28_"
+    class="ant-file-card css-var-_r_48_"
   >
     <div
       class="ant-file-card-file"
@@ -928,17 +928,17 @@ exports[`renders components/file-card/demo/custom-description.tsx extend context
           style="margin-top: 4px; line-height: 1.5;"
         >
           <div
-            class="ant-flex css-var-_r_28_ ant-flex-align-center ant-flex-justify-space-between"
+            class="ant-flex css-var-_r_48_ ant-flex-align-center ant-flex-justify-space-between"
             style="width: 100%;"
           >
             <span
-              class="ant-typography ant-typography-secondary css-var-_r_28_"
+              class="ant-typography ant-typography-secondary css-var-_r_48_"
               style="font-size: 12px;"
             >
               Size: 10 MB
             </span>
             <button
-              class="ant-btn css-var-_r_28_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
+              class="ant-btn css-var-_r_48_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
               style="font-size: 12px; padding: 2px 8px; height: auto; line-height: 1.5;"
               type="button"
             >
@@ -975,7 +975,7 @@ exports[`renders components/file-card/demo/custom-description.tsx extend context
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_28_"
+    class="ant-file-card css-var-_r_48_"
   >
     <div
       class="ant-file-card-file"
@@ -1027,17 +1027,17 @@ exports[`renders components/file-card/demo/custom-description.tsx extend context
           style="margin-top: 4px; line-height: 1.5;"
         >
           <div
-            class="ant-flex css-var-_r_28_ ant-flex-align-center ant-flex-justify-space-between"
+            class="ant-flex css-var-_r_48_ ant-flex-align-center ant-flex-justify-space-between"
             style="width: 100%;"
           >
             <span
-              class="ant-typography ant-typography-secondary css-var-_r_28_"
+              class="ant-typography ant-typography-secondary css-var-_r_48_"
               style="font-size: 12px;"
             >
               Size: 5 MB
             </span>
             <button
-              class="ant-btn css-var-_r_28_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
+              class="ant-btn css-var-_r_48_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
               style="font-size: 12px; padding: 2px 8px; height: auto; line-height: 1.5;"
               type="button"
             >
@@ -1080,10 +1080,10 @@ exports[`renders components/file-card/demo/custom-description.tsx extend context
 
 exports[`renders components/file-card/demo/icon.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_27_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_47_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-file-card css-var-_r_27_"
+    class="ant-file-card css-var-_r_47_"
   >
     <div
       class="ant-file-card-file"
@@ -1138,7 +1138,7 @@ exports[`renders components/file-card/demo/icon.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_27_"
+    class="ant-file-card css-var-_r_47_"
   >
     <div
       class="ant-file-card-file"
@@ -1200,16 +1200,19 @@ exports[`renders components/file-card/demo/icon.tsx extend context correctly 2`]
 
 exports[`renders components/file-card/demo/image.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_21_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_3t_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-file-card css-var-_r_21_"
+    class="ant-file-card css-var-_r_3t_"
   >
     <div
       class="ant-file-card-image"
     >
       <div
-        class="ant-image ant-file-card-image-img css-var-_r_21_ ant-image-css-var"
+        aria-label="image-file.png"
+        class="ant-image ant-file-card-image-img css-var-_r_3t_ ant-image-css-var"
+        role="button"
+        tabindex="0"
       >
         <img
           alt="image-file.png"
@@ -1223,15 +1226,18 @@ exports[`renders components/file-card/demo/image.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_21_"
+    class="ant-file-card css-var-_r_3t_"
   >
     <div
       class="ant-file-card-image"
       style="width: 100px; height: 100px;"
     >
       <div
-        class="ant-image ant-file-card-image-img css-var-_r_21_ ant-image-css-var"
+        aria-label="image-file.png"
+        class="ant-image ant-file-card-image-img css-var-_r_3t_ ant-image-css-var"
+        role="button"
         style="width: 100px; height: 100px;"
+        tabindex="0"
       >
         <img
           alt="image-file.png"
@@ -1248,7 +1254,7 @@ exports[`renders components/file-card/demo/image.tsx extend context correctly 1`
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_21_"
+    class="ant-file-card css-var-_r_3t_"
   >
     <div
       class="ant-file-card-file"
@@ -1309,16 +1315,16 @@ exports[`renders components/file-card/demo/image.tsx extend context correctly 2`
 
 exports[`renders components/file-card/demo/image-loading.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_24_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_42_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-_r_24_"
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-_r_42_"
   >
     <div
       class="ant-space-item"
     >
       <button
-        class="ant-btn css-var-_r_24_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+        class="ant-btn css-var-_r_42_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         disabled=""
         type="button"
       >
@@ -1331,7 +1337,7 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
       class="ant-space-item"
     >
       <button
-        class="ant-btn css-var-_r_24_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+        class="ant-btn css-var-_r_42_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>
@@ -1341,15 +1347,18 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_24_"
+    class="ant-file-card css-var-_r_42_"
   >
     <div
       class="ant-file-card-image ant-file-card-loading"
       style="width: 200px;"
     >
       <div
-        class="ant-image ant-file-card-image-img css-var-_r_24_ ant-image-css-var"
+        aria-label="image-file.png"
+        class="ant-image ant-file-card-image-img css-var-_r_42_ ant-image-css-var"
+        role="button"
         style="width: 200px;"
+        tabindex="0"
       >
         <img
           alt="image-file.png"
@@ -1361,13 +1370,13 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
           class="ant-image-placeholder"
         >
           <div
-            class="ant-file-card css-var-_r_24_"
+            class="ant-file-card css-var-_r_42_"
           >
             <div
               class="ant-file-card-image"
             >
               <div
-                class="ant-image ant-file-card-image-img css-var-_r_24_ ant-image-css-var"
+                class="ant-image ant-file-card-image-img css-var-_r_42_ ant-image-css-var"
               >
                 <img
                   alt="placeholder image"
@@ -1386,7 +1395,7 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
         style="width: 200px;"
       >
         <div
-          class="ant-skeleton ant-skeleton-element ant-skeleton-active ant-file-card-image-skeleton css-var-_r_24_"
+          class="ant-skeleton ant-skeleton-element ant-skeleton-active ant-file-card-image-skeleton css-var-_r_42_"
           style="width: 100%; height: 100%;"
         >
           <div
@@ -1394,12 +1403,12 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
             style="width: 100%; height: 100%;"
           >
             <div
-              class="ant-file-card-image-spin ant-file-card-image-spin-small ant-flex css-var-_r_24_ ant-flex-align-center ant-flex-gap-small"
+              class="ant-file-card-image-spin ant-file-card-image-spin-small ant-flex css-var-_r_42_ ant-flex-align-center ant-flex-gap-small"
             >
               <div
                 aria-busy="true"
                 aria-live="polite"
-                class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-section css-var-_r_24_"
+                class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-section css-var-_r_42_"
               >
                 <span
                   class="ant-spin-dot-holder"
@@ -1455,13 +1464,16 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_24_"
+    class="ant-file-card css-var-_r_42_"
   >
     <div
       class="ant-file-card-image ant-file-card-loading"
     >
       <div
-        class="ant-image ant-file-card-image-img css-var-_r_24_ ant-image-css-var"
+        aria-label="image-file.png"
+        class="ant-image ant-file-card-image-img css-var-_r_42_ ant-image-css-var"
+        role="button"
+        tabindex="0"
       >
         <img
           alt="image-file.png"
@@ -1472,13 +1484,13 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
           class="ant-image-placeholder"
         >
           <div
-            class="ant-file-card css-var-_r_24_"
+            class="ant-file-card css-var-_r_42_"
           >
             <div
               class="ant-file-card-image"
             >
               <div
-                class="ant-image ant-file-card-image-img css-var-_r_24_ ant-image-css-var"
+                class="ant-image ant-file-card-image-img css-var-_r_42_ ant-image-css-var"
               >
                 <img
                   alt="placeholder image"
@@ -1496,7 +1508,7 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
         class="ant-file-card-image-loading"
       >
         <div
-          class="ant-skeleton ant-skeleton-element ant-skeleton-active ant-file-card-image-skeleton css-var-_r_24_"
+          class="ant-skeleton ant-skeleton-element ant-skeleton-active ant-file-card-image-skeleton css-var-_r_42_"
           style="width: 100%; height: 100%;"
         >
           <div
@@ -1504,12 +1516,12 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
             style="width: 100%; height: 100%;"
           >
             <div
-              class="ant-file-card-image-spin ant-file-card-image-spin-middle ant-flex css-var-_r_24_ ant-flex-align-center ant-flex-gap-small"
+              class="ant-file-card-image-spin ant-file-card-image-spin-middle ant-flex css-var-_r_42_ ant-flex-align-center ant-flex-gap-small"
             >
               <div
                 aria-busy="true"
                 aria-live="polite"
-                class="ant-spin ant-spin-spinning ant-spin-section css-var-_r_24_"
+                class="ant-spin ant-spin-spinning ant-spin-section css-var-_r_42_"
               >
                 <span
                   class="ant-spin-dot-holder"
@@ -1575,11 +1587,11 @@ exports[`renders components/file-card/demo/image-loading.tsx extend context corr
 
 exports[`renders components/file-card/demo/list.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_1n_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_3a_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   style="width: 900px;"
 >
   <div
-    class="ant-file-card-list css-var-_r_1n_"
+    class="ant-file-card-list css-var-_r_3a_"
   >
     <div
       class="ant-file-card-list-content"
@@ -1588,7 +1600,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file"
@@ -1671,7 +1683,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file"
@@ -1754,7 +1766,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file"
@@ -1837,7 +1849,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file"
@@ -1920,7 +1932,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file"
@@ -2003,7 +2015,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file"
@@ -2085,7 +2097,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    class="ant-file-card-list css-var-_r_1n_"
+    class="ant-file-card-list css-var-_r_3a_"
   >
     <div
       class="ant-file-card-list-content ant-file-card-list-small"
@@ -2094,7 +2106,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file ant-file-card-file-small"
@@ -2177,7 +2189,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file ant-file-card-file-small"
@@ -2260,7 +2272,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file ant-file-card-file-small"
@@ -2343,7 +2355,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file ant-file-card-file-small"
@@ -2426,7 +2438,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file ant-file-card-file-small"
@@ -2509,7 +2521,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-file ant-file-card-file-small"
@@ -2591,7 +2603,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    class="ant-file-card-list css-var-_r_1n_"
+    class="ant-file-card-list css-var-_r_3a_"
   >
     <div
       class="ant-file-card-list-content"
@@ -2600,13 +2612,16 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2624,13 +2639,16 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2648,13 +2666,16 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2672,13 +2693,16 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2696,13 +2720,16 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2720,13 +2747,16 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2743,7 +2773,7 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    class="ant-file-card-list css-var-_r_1n_"
+    class="ant-file-card-list css-var-_r_3a_"
   >
     <div
       class="ant-file-card-list-content"
@@ -2752,15 +2782,18 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
             style="width: 230px; height: 230px;"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
               style="width: 230px; height: 230px;"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2781,15 +2814,18 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
             style="width: 230px; height: 230px;"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
               style="width: 230px; height: 230px;"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2810,15 +2846,18 @@ exports[`renders components/file-card/demo/list.tsx extend context correctly 1`]
         class="ant-file-card-list-item"
       >
         <div
-          class="ant-file-card css-var-_r_1n_"
+          class="ant-file-card css-var-_r_3a_"
         >
           <div
             class="ant-file-card-image"
             style="width: 230px; height: 230px;"
           >
             <div
-              class="ant-image ant-file-card-image-img css-var-_r_1n_ ant-image-css-var"
+              aria-label="image-file.png"
+              class="ant-image ant-file-card-image-img css-var-_r_3a_ ant-image-css-var"
+              role="button"
               style="width: 230px; height: 230px;"
+              tabindex="0"
             >
               <img
                 alt="image-file.png"
@@ -2847,7 +2886,7 @@ exports[`renders components/file-card/demo/mask.tsx extend context correctly 1`]
   style="display: flex; gap: 16px; flex-wrap: wrap;"
 >
   <div
-    class="ant-file-card css-var-_r_1l_"
+    class="ant-file-card css-var-_r_37_"
   >
     <div
       class="ant-file-card-file"
@@ -2952,13 +2991,16 @@ exports[`renders components/file-card/demo/mask.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_1l_"
+    class="ant-file-card css-var-_r_37_"
   >
     <div
       class="ant-file-card-image"
     >
       <div
-        class="ant-image ant-file-card-image-img css-var-_r_1l_ ant-image-css-var"
+        aria-label="image.jpg"
+        class="ant-image ant-file-card-image-img css-var-_r_37_ ant-image-css-var"
+        role="button"
+        tabindex="0"
       >
         <img
           alt="image.jpg"
@@ -2972,7 +3014,7 @@ exports[`renders components/file-card/demo/mask.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    class="ant-file-card css-var-_r_1l_"
+    class="ant-file-card css-var-_r_37_"
   >
     <video
       class="ant-file-card-video"
@@ -3064,7 +3106,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-0.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-0.png"
@@ -3112,7 +3157,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-1.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-1.png"
@@ -3160,7 +3208,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-2.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-2.png"
@@ -3208,7 +3259,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-3.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-3.png"
@@ -3256,7 +3310,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-4.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-4.png"
@@ -3304,7 +3361,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-5.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-5.png"
@@ -3352,7 +3412,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-6.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-6.png"
@@ -3400,7 +3463,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-7.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-7.png"
@@ -3448,7 +3514,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-8.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-8.png"
@@ -3496,7 +3565,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-9.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-9.png"
@@ -3544,7 +3616,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-10.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-10.png"
@@ -3592,7 +3667,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-11.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-11.png"
@@ -3640,7 +3718,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-12.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-12.png"
@@ -3688,7 +3769,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-13.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-13.png"
@@ -3736,7 +3820,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-14.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-14.png"
@@ -3784,7 +3871,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-15.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-15.png"
@@ -3832,7 +3922,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-16.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-16.png"
@@ -3880,7 +3973,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-17.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-17.png"
@@ -3928,7 +4024,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-18.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-18.png"
@@ -3976,7 +4075,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-19.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-19.png"
@@ -4024,7 +4126,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-20.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-20.png"
@@ -4072,7 +4177,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-21.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-21.png"
@@ -4120,7 +4228,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-22.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-22.png"
@@ -4168,7 +4279,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-23.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-23.png"
@@ -4216,7 +4330,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-24.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-24.png"
@@ -4264,7 +4381,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-25.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-25.png"
@@ -4312,7 +4432,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-26.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-26.png"
@@ -4360,7 +4483,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-27.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-27.png"
@@ -4408,7 +4534,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-28.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-28.png"
@@ -4456,7 +4585,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-29.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-29.png"
@@ -4504,7 +4636,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-30.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-30.png"
@@ -4552,7 +4687,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-31.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-31.png"
@@ -4600,7 +4738,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-32.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-32.png"
@@ -4648,7 +4789,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-33.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-33.png"
@@ -4696,7 +4840,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-34.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-34.png"
@@ -4744,7 +4891,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-35.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-35.png"
@@ -4792,7 +4942,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-36.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-36.png"
@@ -4840,7 +4993,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-37.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-37.png"
@@ -4888,7 +5044,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-38.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-38.png"
@@ -4936,7 +5095,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-39.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-39.png"
@@ -4984,7 +5146,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-40.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-40.png"
@@ -5032,7 +5197,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-41.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-41.png"
@@ -5080,7 +5248,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-42.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-42.png"
@@ -5128,7 +5299,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-43.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-43.png"
@@ -5176,7 +5350,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-44.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-44.png"
@@ -5224,7 +5401,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-45.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-45.png"
@@ -5272,7 +5452,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-46.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-46.png"
@@ -5320,7 +5503,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-47.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-47.png"
@@ -5368,7 +5554,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-48.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-48.png"
@@ -5416,7 +5605,10 @@ exports[`renders components/file-card/demo/overflow.tsx extend context correctly
             class="ant-file-card-image"
           >
             <div
+              aria-label="image-file-49.png"
               class="ant-image ant-file-card-image-img css-var-_r_1_ ant-image-css-var"
+              role="button"
+              tabindex="0"
             >
               <img
                 alt="image-file-49.png"
diff --git a/packages/x/components/file-card/__tests__/__snapshots__/demo.test.ts.snap b/packages/x/components/file-card/__tests__/__snapshots__/demo.test.ts.snap
index 59fa35d2e8..5e10c57c83 100644
--- a/packages/x/components/file-card/__tests__/__snapshots__/demo.test.ts.snap
+++ b/packages/x/components/file-card/__tests__/__snapshots__/demo.test.ts.snap
@@ -1213,7 +1213,10 @@ Array [
         class="ant-file-card-image"
       >
         <div
+          aria-label="image-file.png"
           class="ant-image ant-file-card-image-img css-var-_R_0_ ant-image-css-var"
+          role="button"
+          tabindex="0"
         >
           <img
             alt="image-file.png"
@@ -1234,8 +1237,11 @@ Array [
         style="width:100px;height:100px"
       >
         <div
+          aria-label="image-file.png"
           class="ant-image ant-file-card-image-img css-var-_R_0_ ant-image-css-var"
+          role="button"
           style="width:100px;height:100px"
+          tabindex="0"
         >
           <img
             alt="image-file.png"
@@ -1351,8 +1357,11 @@ exports[`renders components/file-card/demo/image-loading.tsx correctly 1`] = `
       style="width:200px"
     >
       <div
+        aria-label="image-file.png"
         class="ant-image ant-file-card-image-img css-var-_R_0_ ant-image-css-var"
+        role="button"
         style="width:200px"
+        tabindex="0"
       >
         <img
           alt="image-file.png"
@@ -1464,7 +1473,10 @@ exports[`renders components/file-card/demo/image-loading.tsx correctly 1`] = `
       class="ant-file-card-image ant-file-card-loading"
     >
       <div
+        aria-label="image-file.png"
         class="ant-image ant-file-card-image-img css-var-_R_0_ ant-image-css-var"
+        role="button"
+        tabindex="0"
       >
         <img
           alt="image-file.png"
@@ -1728,7 +1740,10 @@ Array [
         class="ant-file-card-image"
       >
         <div
+          aria-label="image.jpg"
           class="ant-image ant-file-card-image-img css-var-_R_0_ ant-image-css-var"
+          role="button"
+          tabindex="0"
         >
           <img
             alt="image.jpg"
diff --git a/packages/x/docs/react/introduce.en-US.md b/packages/x/docs/react/introduce.en-US.md
index 3dc996683f..7ee54f793c 100644
--- a/packages/x/docs/react/introduce.en-US.md
+++ b/packages/x/docs/react/introduce.en-US.md
@@ -14,6 +14,10 @@ A React UI library based on the Ant Design system, designed for AI-driven interf
 
 An optimized Markdown rendering solution for streaming content, with powerful extension capabilities. Supports formulas, code highlighting, mermaid charts, and delivers excellent performance for smooth content display. For details, click [here](/x-markdowns/introduce).
 
+**`@ant-design/x-card` - Dynamic Card Renderer**
+
+A dynamic card rendering component based on the A2UI protocol, enabling AI Agents to dynamically build interactive interfaces through structured JSON message streams. Supports streaming rendering, data binding, and reactive updates. Suitable for AI assistant interfaces, smart forms, data visualization, and more. For details, click [here](/x-cards/introduce).
+
 **`@ant-design/x-sdk` - AI Conversation Data Flow Management**
 
 Provides a complete set of tool APIs, out-of-the-box AI conversation data flow management, simplifying development and improving efficiency. For details, click [here](/x-sdks/introduce).
diff --git a/packages/x/docs/react/introduce.zh-CN.md b/packages/x/docs/react/introduce.zh-CN.md
index 9385252b27..573228c6b7 100644
--- a/packages/x/docs/react/introduce.zh-CN.md
+++ b/packages/x/docs/react/introduce.zh-CN.md
@@ -14,6 +14,10 @@ Ant Design X 是一款 AI 应用复合工具集，融合了 UI 组件库、流
 
 专为流式内容优化的 Markdown 渲染解决方案、强大的扩展能力，支持公式、代码高亮、mermaid 图表等极致性能表现，确保流畅的内容展示体验。查看详情请点击[这里](/x-markdowns/introduce-cn)。
 
+**`@ant-design/x-card` - 动态卡片渲染器**
+
+基于 A2UI 协议的动态卡片渲染组件，让 AI Agent 通过结构化 JSON 消息流动态构建交互式界面。支持流式渲染、数据绑定和响应式更新，适用于 AI 助手界面、智能表单、数据可视化等场景。查看详情请点击[这里](/x-cards/introduce-cn)。
+
 **`@ant-design/x-sdk` - AI 对话数据流管理**
 
 提供完整的工具 API 集合、开箱即用的 AI 对话应用数据流管理、简化开发流程，提升开发效率。查看详情请点击[这里](/x-sdks/introduce-cn)。
diff --git a/packages/x/docs/x-card/a2ui-v-0-8.en-US.md b/packages/x/docs/x-card/a2ui-v-0-8.en-US.md
new file mode 100644
index 0000000000..90aead0dad
--- /dev/null
+++ b/packages/x/docs/x-card/a2ui-v-0-8.en-US.md
@@ -0,0 +1,130 @@
+---
+order: 2
+title: A2UI v0.8
+---
+
+<!-- prettier-ignore -->
+<code src="./demo/A2UI_v0.8/basic.tsx">Basic</code>
+<code src="./demo/A2UI_v0.8/progressive.tsx">Progressive</code>
+<code src="./demo/A2UI_v0.8/streaming.tsx">Streaming</code>
+<code src="./demo/A2UI_v0.8/nested-interaction.tsx">Nested Interaction</code>
+<code src="./demo/A2UI_v0.8/multi-card-sync.tsx">Multi Card Sync</code>
+<code src="./demo/A2UI_v0.8/filter-search.tsx">Filter Search</code>
+<code src="./demo/A2UI_v0.8/form-validation.tsx">Form Validation</code>
+
+## API
+
+Common props ref: [Common Props](/docs/react/common-props)
+
+### BoxProps
+
+Box component serves as a container to manage Card instances and command dispatching.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| children | Child elements | React.ReactNode | - | - |
+| components | Custom component mapping, component names must start with uppercase letters | Record\<string, React.ComponentType\<any\>\> | - | - |
+| commands | A2UI command object | A2UICommand_v0_9 \| XAgentCommand_v0_8 | - | - |
+| onAction | Callback function when action is triggered inside Card | (payload: ActionPayload) => void | - | - |
+
+### CardProps
+
+Card component is used to render a single Surface.
+
+| Property | Description                                        | Type   | Default | Version |
+| -------- | -------------------------------------------------- | ------ | ------- | ------- |
+| id       | Surface ID, corresponding to surfaceId in commands | string | -       | -       |
+
+### ActionPayload
+
+Data structure for action events.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| name | Event name | string | - | - |
+| surfaceId | The surfaceId that triggered the action | string | - | - |
+| context | Complete dataModel snapshot of current surface | Record\<string, any\> | - | - |
+
+### XAgentCommand_v0_8
+
+Command type for v0.8 version, supporting the following commands:
+
+#### SurfaceUpdateCommand
+
+Update components on a Surface.
+
+| Property                 | Description    | Type                    | Default | Version |
+| ------------------------ | -------------- | ----------------------- | ------- | ------- |
+| surfaceUpdate.surfaceId  | Surface ID     | string                  | -       | -       |
+| surfaceUpdate.components | Component list | ComponentWrapper_v0_8[] | -       | -       |
+
+#### ComponentWrapper_v0_8
+
+Component wrapper structure for v0.8 version.
+
+```typescript
+interface ComponentWrapper_v0_8 {
+  id: string;
+  component: {
+    [componentType: string]: {
+      child?: string;
+      children?: string[] | ExplicitList;
+      [key: string]: any | PathValue | LiteralStringValue;
+    };
+  };
+}
+```
+
+#### ExplicitList
+
+```typescript
+interface ExplicitList {
+  explicitList: string[];
+}
+```
+
+#### DataModelUpdateCommand
+
+Update data model (v0.8 format).
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| dataModelUpdate.surfaceId | Surface ID | string | - | - |
+| dataModelUpdate.contents | Data content list | Array\<{ key: string; valueMap: Array\<{ key: string; valueString: string }\> }\> | - | - |
+
+#### BeginRenderingCommand
+
+Begin rendering.
+
+| Property                 | Description       | Type   | Default | Version |
+| ------------------------ | ----------------- | ------ | ------- | ------- |
+| beginRendering.surfaceId | Surface ID        | string | -       | -       |
+| beginRendering.root      | Root component ID | string | -       | -       |
+
+#### DeleteSurfaceCommand
+
+Delete a Surface.
+
+| Property                | Description | Type   | Default | Version |
+| ----------------------- | ----------- | ------ | ------- | ------- |
+| deleteSurface.surfaceId | Surface ID  | string | -       | -       |
+
+### PathValue
+
+Data binding path object.
+
+```typescript
+interface PathValue {
+  path: string;
+}
+```
+
+### LiteralStringValue
+
+Literal string value object (v0.8 specific).
+
+```typescript
+interface LiteralStringValue {
+  literalString: string;
+}
+```
diff --git a/packages/x/docs/x-card/a2ui-v-0-8.zh-CN.md b/packages/x/docs/x-card/a2ui-v-0-8.zh-CN.md
new file mode 100644
index 0000000000..3c57180411
--- /dev/null
+++ b/packages/x/docs/x-card/a2ui-v-0-8.zh-CN.md
@@ -0,0 +1,130 @@
+---
+order: 2
+title: A2UI v0.8
+---
+
+<!-- prettier-ignore -->
+<code src="./demo/A2UI_v0.8/basic.tsx">基础</code>
+<code src="./demo/A2UI_v0.8/progressive.tsx">渐进式</code>
+<code src="./demo/A2UI_v0.8/streaming.tsx">流式渲染</code>
+<code src="./demo/A2UI_v0.8/nested-interaction.tsx">嵌套交互</code>
+<code src="./demo/A2UI_v0.8/multi-card-sync.tsx">多卡片同步</code>
+<code src="./demo/A2UI_v0.8/filter-search.tsx">筛选搜索</code>
+<code src="./demo/A2UI_v0.8/form-validation.tsx">表单验证</code>
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### BoxProps
+
+Box 组件作为容器，用于管理 Card 实例和命令分发。
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| children | 子元素 | React.ReactNode | - | - |
+| components | 自定义组件映射，组件名称必须以大写字母开头 | Record\<string, React.ComponentType\<any\>\> | - | - |
+| commands | A2UI 命令对象 | A2UICommand_v0_9 \| XAgentCommand_v0_8 | - | - |
+| onAction | Card 内部组件触发 action 时的回调函数 | (payload: ActionPayload) => void | - | - |
+
+### CardProps
+
+Card 组件用于渲染单个 Surface。
+
+| 属性 | 说明                               | 类型   | 默认值 | 版本 |
+| ---- | ---------------------------------- | ------ | ------ | ---- |
+| id   | Surface ID，对应命令中的 surfaceId | string | -      | -    |
+
+### ActionPayload
+
+action 事件的数据结构。
+
+| 属性      | 说明                               | 类型                  | 默认值 | 版本 |
+| --------- | ---------------------------------- | --------------------- | ------ | ---- |
+| name      | 事件名称                           | string                | -      | -    |
+| surfaceId | 触发该 action 的 surfaceId         | string                | -      | -    |
+| context   | 当前 surface 的完整 dataModel 快照 | Record\<string, any\> | -      | -    |
+
+### XAgentCommand_v0_8
+
+v0.8 版本的命令类型，支持以下命令：
+
+#### SurfaceUpdateCommand
+
+更新 Surface 上的组件。
+
+| 属性                     | 说明       | 类型                    | 默认值 | 版本 |
+| ------------------------ | ---------- | ----------------------- | ------ | ---- |
+| surfaceUpdate.surfaceId  | Surface ID | string                  | -      | -    |
+| surfaceUpdate.components | 组件列表   | ComponentWrapper_v0_8[] | -      | -    |
+
+#### ComponentWrapper_v0_8
+
+v0.8 版本的组件包装结构。
+
+```typescript
+interface ComponentWrapper_v0_8 {
+  id: string;
+  component: {
+    [componentType: string]: {
+      child?: string;
+      children?: string[] | ExplicitList;
+      [key: string]: any | PathValue | LiteralStringValue;
+    };
+  };
+}
+```
+
+#### ExplicitList
+
+```typescript
+interface ExplicitList {
+  explicitList: string[];
+}
+```
+
+#### DataModelUpdateCommand
+
+更新数据模型（v0.8 格式）。
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| dataModelUpdate.surfaceId | Surface ID | string | - | - |
+| dataModelUpdate.contents | 数据内容列表 | Array\<{ key: string; valueMap: Array\<{ key: string; valueString: string }\> }\> | - | - |
+
+#### BeginRenderingCommand
+
+开始渲染。
+
+| 属性                     | 说明       | 类型   | 默认值 | 版本 |
+| ------------------------ | ---------- | ------ | ------ | ---- |
+| beginRendering.surfaceId | Surface ID | string | -      | -    |
+| beginRendering.root      | 根组件 ID  | string | -      | -    |
+
+#### DeleteSurfaceCommand
+
+删除 Surface。
+
+| 属性                    | 说明       | 类型   | 默认值 | 版本 |
+| ----------------------- | ---------- | ------ | ------ | ---- |
+| deleteSurface.surfaceId | Surface ID | string | -      | -    |
+
+### PathValue
+
+数据绑定路径对象。
+
+```typescript
+interface PathValue {
+  path: string;
+}
+```
+
+### LiteralStringValue
+
+字面字符串值对象（v0.8 特有）。
+
+```typescript
+interface LiteralStringValue {
+  literalString: string;
+}
+```
diff --git a/packages/x/docs/x-card/a2ui-v-0-9.en-US.md b/packages/x/docs/x-card/a2ui-v-0-9.en-US.md
new file mode 100644
index 0000000000..a69846b6df
--- /dev/null
+++ b/packages/x/docs/x-card/a2ui-v-0-9.en-US.md
@@ -0,0 +1,177 @@
+---
+order: 2
+title: A2UI v0.9
+---
+
+<!-- prettier-ignore -->
+<code src="./demo/A2UI_v0.9/basic.tsx">Basic</code>
+<code src="./demo/A2UI_v0.9/progressive.tsx">Progressive</code>
+<code src="./demo/A2UI_v0.9/streaming.tsx">Streaming</code>
+<code src="./demo/A2UI_v0.9/nested-interaction.tsx">Nested Interaction</code>
+<code src="./demo/A2UI_v0.9/multi-card-sync.tsx">Multi Card Sync</code>
+<code src="./demo/A2UI_v0.9/filter-search.tsx">Filter Search</code>
+<code src="./demo/A2UI_v0.9/form-validation.tsx">Form Validation</code>
+
+## API
+
+Common props ref: [Common Props](/docs/react/common-props)
+
+### BoxProps
+
+Box component serves as a container to manage Card instances and command dispatching.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| children | Child elements | React.ReactNode | - | - |
+| components | Custom component mapping, component names must start with uppercase letters | Record\<string, React.ComponentType\<any\>\> | - | - |
+| commands | A2UI command object | A2UICommand_v0_9 \| XAgentCommand_v0_8 | - | - |
+| onAction | Callback function when action is triggered inside Card | (payload: ActionPayload) => void | - | - |
+
+### CardProps
+
+Card component is used to render a single Surface.
+
+| Property | Description                                        | Type   | Default | Version |
+| -------- | -------------------------------------------------- | ------ | ------- | ------- |
+| id       | Surface ID, corresponding to surfaceId in commands | string | -       | -       |
+
+### ActionPayload
+
+Data structure for action events.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| name | Event name | string | - | - |
+| surfaceId | The surfaceId that triggered the action | string | - | - |
+| context | Complete dataModel snapshot of current surface | Record\<string, any\> | - | - |
+
+### A2UICommand_v0_9
+
+Command type for v0.9 version, supporting the following commands:
+
+#### CreateSurfaceCommand
+
+Create a new Surface.
+
+| Property                | Description                               | Type   | Default | Version |
+| ----------------------- | ----------------------------------------- | ------ | ------- | ------- |
+| version                 | Version number                            | 'v0.9' | -       | -       |
+| createSurface.surfaceId | Surface ID                                | string | -       | -       |
+| createSurface.catalogId | Component catalog URL or local identifier | string | -       | -       |
+
+#### UpdateComponentsCommand
+
+Update components on a Surface.
+
+| Property                    | Description    | Type                 | Default | Version |
+| --------------------------- | -------------- | -------------------- | ------- | ------- |
+| version                     | Version number | 'v0.9'               | -       | -       |
+| updateComponents.surfaceId  | Surface ID     | string               | -       | -       |
+| updateComponents.components | Component list | BaseComponent_v0_9[] | -       | -       |
+
+#### BaseComponent_v0_9
+
+```typescript
+interface BaseComponent_v0_9 {
+  id: string;
+  component: string;
+  child?: string;
+  children?: string[];
+  [key: string]: any | PathValue;
+}
+```
+
+#### UpdateDataModelCommand
+
+Update data model.
+
+| Property                  | Description    | Type   | Default | Version |
+| ------------------------- | -------------- | ------ | ------- | ------- |
+| version                   | Version number | 'v0.9' | -       | -       |
+| updateDataModel.surfaceId | Surface ID     | string | -       | -       |
+| updateDataModel.path      | Data path      | string | -       | -       |
+| updateDataModel.value     | Data value     | any    | -       | -       |
+
+#### DeleteSurfaceCommand
+
+Delete a Surface.
+
+| Property                | Description    | Type   | Default | Version |
+| ----------------------- | -------------- | ------ | ------- | ------- |
+| version                 | Version number | 'v0.9' | -       | -       |
+| deleteSurface.surfaceId | Surface ID     | string | -       | -       |
+
+### PathValue
+
+Data binding path object.
+
+```typescript
+interface PathValue {
+  path: string;
+}
+```
+
+### Catalog
+
+Component catalog definition.
+
+```typescript
+interface Catalog {
+  $schema?: string;
+  $id?: string;
+  title?: string;
+  description?: string;
+  catalogId?: string;
+  components?: Record<string, CatalogComponent>;
+  functions?: Record<string, any>;
+  $defs?: Record<string, any>;
+}
+```
+
+### CatalogComponent
+
+Component definition in Catalog.
+
+```typescript
+interface CatalogComponent {
+  type: 'object';
+  allOf?: any[];
+  properties?: Record<string, any>;
+  required?: string[];
+  [key: string]: any;
+}
+```
+
+### Catalog Methods
+
+#### registerCatalog
+
+Register a local catalog.
+
+```typescript
+registerCatalog(catalog: Catalog): void
+```
+
+#### loadCatalog
+
+Load a catalog (supports remote URL or locally registered schema).
+
+```typescript
+loadCatalog(catalogId: string): Promise<Catalog>
+```
+
+#### validateComponent
+
+Validate whether a component conforms to catalog definition.
+
+```typescript
+validateComponent(catalog: Catalog, componentName: string, componentProps: Record<string, any>): boolean
+```
+
+#### clearCatalogCache
+
+Clear catalog cache.
+
+```typescript
+clearCatalogCache(): void
+```
diff --git a/packages/x/docs/x-card/a2ui-v-0-9.zh-CN.md b/packages/x/docs/x-card/a2ui-v-0-9.zh-CN.md
new file mode 100644
index 0000000000..3d75326814
--- /dev/null
+++ b/packages/x/docs/x-card/a2ui-v-0-9.zh-CN.md
@@ -0,0 +1,177 @@
+---
+order: 2
+title: A2UI v0.9
+---
+
+<!-- prettier-ignore -->
+<code src="./demo/A2UI_v0.9/basic.tsx">基础</code>
+<code src="./demo/A2UI_v0.9/progressive.tsx">渐进式</code>
+<code src="./demo/A2UI_v0.9/streaming.tsx">流式渲染</code>
+<code src="./demo/A2UI_v0.9/nested-interaction.tsx">嵌套交互</code>
+<code src="./demo/A2UI_v0.9/multi-card-sync.tsx">多卡片同步</code>
+<code src="./demo/A2UI_v0.9/filter-search.tsx">筛选搜索</code>
+<code src="./demo/A2UI_v0.9/form-validation.tsx">表单验证</code>
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### BoxProps
+
+Box 组件作为容器，用于管理 Card 实例和命令分发。
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| children | 子元素 | React.ReactNode | - | - |
+| components | 自定义组件映射，组件名称必须以大写字母开头 | Record\<string, React.ComponentType\<any\>\> | - | - |
+| commands | A2UI 命令对象 | A2UICommand_v0_9 \| XAgentCommand_v0_8 | - | - |
+| onAction | Card 内部组件触发 action 时的回调函数 | (payload: ActionPayload) => void | - | - |
+
+### CardProps
+
+Card 组件用于渲染单个 Surface。
+
+| 属性 | 说明                               | 类型   | 默认值 | 版本 |
+| ---- | ---------------------------------- | ------ | ------ | ---- |
+| id   | Surface ID，对应命令中的 surfaceId | string | -      | -    |
+
+### ActionPayload
+
+action 事件的数据结构。
+
+| 属性      | 说明                               | 类型                  | 默认值 | 版本 |
+| --------- | ---------------------------------- | --------------------- | ------ | ---- |
+| name      | 事件名称                           | string                | -      | -    |
+| surfaceId | 触发该 action 的 surfaceId         | string                | -      | -    |
+| context   | 当前 surface 的完整 dataModel 快照 | Record\<string, any\> | -      | -    |
+
+### A2UICommand_v0_9
+
+v0.9 版本的命令类型，支持以下命令：
+
+#### CreateSurfaceCommand
+
+创建新的 Surface。
+
+| 属性                    | 说明                    | 类型   | 默认值 | 版本 |
+| ----------------------- | ----------------------- | ------ | ------ | ---- |
+| version                 | 版本号                  | 'v0.9' | -      | -    |
+| createSurface.surfaceId | Surface ID              | string | -      | -    |
+| createSurface.catalogId | 组件目录 URL 或本地标识 | string | -      | -    |
+
+#### UpdateComponentsCommand
+
+更新 Surface 上的组件。
+
+| 属性                        | 说明       | 类型                 | 默认值 | 版本 |
+| --------------------------- | ---------- | -------------------- | ------ | ---- |
+| version                     | 版本号     | 'v0.9'               | -      | -    |
+| updateComponents.surfaceId  | Surface ID | string               | -      | -    |
+| updateComponents.components | 组件列表   | BaseComponent_v0_9[] | -      | -    |
+
+#### BaseComponent_v0_9
+
+```typescript
+interface BaseComponent_v0_9 {
+  id: string;
+  component: string;
+  child?: string;
+  children?: string[];
+  [key: string]: any | PathValue;
+}
+```
+
+#### UpdateDataModelCommand
+
+更新数据模型。
+
+| 属性                      | 说明       | 类型   | 默认值 | 版本 |
+| ------------------------- | ---------- | ------ | ------ | ---- |
+| version                   | 版本号     | 'v0.9' | -      | -    |
+| updateDataModel.surfaceId | Surface ID | string | -      | -    |
+| updateDataModel.path      | 数据路径   | string | -      | -    |
+| updateDataModel.value     | 数据值     | any    | -      | -    |
+
+#### DeleteSurfaceCommand
+
+删除 Surface。
+
+| 属性                    | 说明       | 类型   | 默认值 | 版本 |
+| ----------------------- | ---------- | ------ | ------ | ---- |
+| version                 | 版本号     | 'v0.9' | -      | -    |
+| deleteSurface.surfaceId | Surface ID | string | -      | -    |
+
+### PathValue
+
+数据绑定路径对象。
+
+```typescript
+interface PathValue {
+  path: string;
+}
+```
+
+### Catalog
+
+组件目录定义。
+
+```typescript
+interface Catalog {
+  $schema?: string;
+  $id?: string;
+  title?: string;
+  description?: string;
+  catalogId?: string;
+  components?: Record<string, CatalogComponent>;
+  functions?: Record<string, any>;
+  $defs?: Record<string, any>;
+}
+```
+
+### CatalogComponent
+
+Catalog 中的组件定义。
+
+```typescript
+interface CatalogComponent {
+  type: 'object';
+  allOf?: any[];
+  properties?: Record<string, any>;
+  required?: string[];
+  [key: string]: any;
+}
+```
+
+### Catalog 相关方法
+
+#### registerCatalog
+
+注册本地 catalog。
+
+```typescript
+registerCatalog(catalog: Catalog): void
+```
+
+#### loadCatalog
+
+加载 catalog（支持远程 URL 或本地注册的 schema）。
+
+```typescript
+loadCatalog(catalogId: string): Promise<Catalog>
+```
+
+#### validateComponent
+
+验证组件是否符合 catalog 定义。
+
+```typescript
+validateComponent(catalog: Catalog, componentName: string, componentProps: Record<string, any>): boolean
+```
+
+#### clearCatalogCache
+
+清除 catalog 缓存。
+
+```typescript
+clearCatalogCache(): void
+```
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/basic.md b/packages/x/docs/x-card/demo/A2UI_v0.8/basic.md
new file mode 100644
index 0000000000..a29f17422a
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/basic.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的基础示例。演示了如何使用 `XAgentCommand_v0_8` 命令来创建咖啡预订场景的交互卡片。
+
+## en-US
+
+Basic example of implementing A2UI v0.8 protocol with XCard. Demonstrates how to use `XAgentCommand_v0_8` commands to create an interactive card for a coffee booking scenario.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/basic.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/basic.tsx
new file mode 100644
index 0000000000..5b5411bd7d
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/basic.tsx
@@ -0,0 +1,821 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, DatePicker, Radio, Space, Tag, Typography } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const contentHeader =
+  'Hello! Welcome to our online booking service 🎉\n\n Please select your preferred date and time, and we will arrange the best seat for you. We look forward to seeing you!';
+const orderConfirmation =
+  '✅ Booking confirmed! Your order has been confirmed. We look forward to seeing you!';
+
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── Text Component ────────────────────────────────────────────────────────
+interface TextProps {
+  text?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | 'success' | string;
+  children?: React.ReactNode;
+  status?: string;
+}
+
+const Text: React.FC<TextProps> = ({ text, variant, children, status }) => {
+  const content = text ?? children;
+  if (!content) return null;
+  const styleMap: Record<string, React.CSSProperties> = {
+    h1: { fontSize: 20, fontWeight: 700, margin: '0 0 12px' },
+    h2: { fontSize: 17, fontWeight: 600, margin: '0 0 8px' },
+    h3: { fontSize: 15, fontWeight: 600, margin: '0 0 6px' },
+    body: { fontSize: 14, margin: 0 },
+    success: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: '#52c41a',
+      margin: '4px 0 0',
+      padding: '6px 10px',
+      borderRadius: 8,
+      background: '#f6ffed',
+      border: '1px solid #b7eb8f',
+    },
+  };
+  const style = styleMap[variant ?? 'body'] ?? styleMap.body;
+
+  // If status is success, use success style
+  const finalStyle = status === 'success' ? styleMap.success : style;
+
+  return <p style={finalStyle}>{content}</p>;
+};
+
+// ─── DateTimeInput Component ───────────────────────────────────────────────────────
+interface DateTimeInputProps {
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+  status?: 'success';
+  onAction?: (name: string, context: Record<string, any>) => void;
+}
+
+const DateTimeInput: React.FC<DateTimeInputProps> = ({ action, onAction, status }) => {
+  const [dateValue, setDateValue] = useState<Dayjs | null>(dayjs());
+  const disabled = status === 'success';
+
+  const handleChange = (val: Dayjs | null) => {
+    setDateValue(val);
+    if (!action?.name || !val) return;
+
+    // v0.8 format: action.context is an array [{ key, value: { path } }]
+    const context: Record<string, any> = {};
+    if (action.context) {
+      action.context.forEach((item) => {
+        context[item.key] = val.toISOString();
+      });
+    }
+
+    onAction?.(action.name, context);
+  };
+
+  return (
+    <DatePicker
+      value={dateValue}
+      disabled={disabled}
+      onChange={handleChange}
+      format="YYYY-MM-DD"
+      placeholder="Select date"
+      style={{ width: '100%' }}
+    />
+  );
+};
+
+// ─── BookForm Component ────────────────────────────────────────────────────────────
+interface BookFormProps {
+  children?: React.ReactNode;
+}
+
+const BookForm: React.FC<BookFormProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px 20px 16px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        marginBlock: 16,
+        minWidth: 280,
+        maxWidth: 400,
+      }}
+    >
+      <Space vertical style={{ width: '100%' }} size={12}>
+        {children}
+      </Space>
+    </div>
+  );
+};
+
+// ─── ActionButton Component ────────────────────────────────────────────────────────
+interface ActionButtonProps {
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+  onAction?: (name: string, context: Record<string, any>) => void;
+  variant?: string;
+  children?: React.ReactNode;
+  status?: 'success' | 'error' | 'loading';
+  res?: any;
+  [key: string]: any;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  action,
+  onAction,
+  variant,
+  status: currentStatus,
+  children,
+  res,
+  ...rest
+}) => {
+  const handleClick = () => {
+    const eventName = action?.name;
+    if (!eventName || !onAction) return;
+
+    // v0.8 format: action.context is an array is an array
+    // Component has already received path-bound values via props (like res, status)
+    // Here we construct context to report to the upper layer
+    const context: Record<string, any> = {};
+
+    // Business logic validation
+    if (!res?.time || !res?.coffee) {
+      context.status = 'error';
+      context.errorMessage = 'Please select date and coffee first';
+    } else {
+      context.status = 'success';
+      context.res = res;
+    }
+
+    onAction(eventName, context);
+  };
+
+  return (
+    <Button
+      {...rest}
+      disabled={currentStatus === 'success'}
+      type={variant === 'primary' ? 'primary' : undefined}
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
+  );
+};
+
+// ─── CoffeeList Component ──────────────────────────────────────────────────────────
+interface CoffeeItem {
+  id?: string | number;
+  name: string;
+  description?: string;
+  price?: number | string;
+  image?: string;
+  tag?: string;
+}
+
+// Default coffee list data
+const DEFAULT_COFFEE_LIST: CoffeeItem[] = [
+  {
+    id: 1,
+    name: 'Latte',
+    description: 'Espresso + Steamed Milk, smooth and silky',
+    price: 32,
+    tag: 'Hot',
+  },
+  { id: 2, name: 'Americano', description: 'Pure bitter aroma, refreshing', price: 25 },
+  {
+    id: 3,
+    name: 'Cappuccino',
+    description: 'Rich foam, classic Italian style',
+    price: 30,
+    tag: 'Recommended',
+  },
+];
+
+interface CoffeeListProps {
+  list?: CoffeeItem[];
+  description?: string;
+  value?: string | number;
+  status?: 'success';
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+}
+
+const CoffeeList: React.FC<CoffeeListProps> = ({ list, description, onAction, status, action }) => {
+  // If no list is passed, use default data
+  const coffeeList = list && list.length > 0 ? list : DEFAULT_COFFEE_LIST;
+
+  const handleSelect = (itemId: string | number) => {
+    if (!action?.name) return;
+
+    const selectedCoffee = coffeeList.find((item, index) => (item.id ?? index) === itemId);
+    if (!selectedCoffee) return;
+
+    // v0.8 format: action.context is an array
+    const context: Record<string, any> = {};
+    if (action.context) {
+      action.context.forEach((item) => {
+        context[item.key] = selectedCoffee;
+      });
+    }
+
+    onAction?.(action.name, context);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {description && (
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          📋 {description}
+        </Typography.Text>
+      )}
+      <Radio.Group
+        onChange={(e) => handleSelect(e.target.value)}
+        style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}
+        disabled={status === 'success'}
+        options={coffeeList.map((item, index) => ({
+          value: item.id ?? index,
+          label: (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                width: 300,
+                gap: 12,
+                padding: '10px 12px',
+                borderRadius: 12,
+                background: '#fafafa',
+                border: '1px solid #f0f0f0',
+              }}
+            >
+              <div
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 10,
+                  background: 'linear-gradient(135deg, #6b3520 0%, #c8855a 100%)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                <span style={{ fontSize: 24 }}>☕</span>
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
+                  <Typography.Text strong style={{ fontSize: 14 }}>
+                    {item.name}
+                  </Typography.Text>
+                  {item.tag && (
+                    <Tag
+                      style={{
+                        fontSize: 11,
+                        padding: '0 6px',
+                        lineHeight: '18px',
+                        borderRadius: 8,
+                        color: '#d46b08',
+                        background: '#fff7e6',
+                        border: '1px solid #ffd591',
+                        margin: 0,
+                      }}
+                    >
+                      {item.tag}
+                    </Tag>
+                  )}
+                </div>
+                {item.description && (
+                  <Typography.Text type="secondary" style={{ fontSize: 12 }} ellipsis>
+                    {item.description}
+                  </Typography.Text>
+                )}
+              </div>
+              {item.price !== undefined && (
+                <Typography.Text style={{ fontSize: 15, fontWeight: 700, color: '#d46b08' }}>
+                  ¥{item.price}
+                </Typography.Text>
+              )}
+            </div>
+          ),
+        }))}
+      />
+    </div>
+  );
+};
+
+// ─── CoffeeResultCard Component ────────────────────────────────────────────────────
+interface CoffeeResultCardProps {
+  name?: string;
+  description?: string;
+  price?: number | string;
+  tag?: string;
+  image?: string;
+  date?: string;
+}
+
+const CoffeeResultCard: React.FC<CoffeeResultCardProps> = ({
+  name,
+  description,
+  price,
+  tag,
+  date,
+}) => {
+  const formattedDate = date ? dayjs(date).format('YYYY-MM-DD HH:mm') : '';
+
+  return (
+    <div
+      style={{
+        borderRadius: 20,
+        overflow: 'hidden',
+        background: 'linear-gradient(145deg, #3d1f0d 0%, #6b3520 50%, #8b5a2b 100%)',
+        boxShadow: '0 8px 32px rgba(61,31,13,0.35)',
+        minWidth: 280,
+        maxWidth: 380,
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'center', padding: '28px 24px 16px' }}>
+        <div
+          style={{
+            width: 80,
+            height: 80,
+            borderRadius: 20,
+            background: 'rgba(255,255,255,0.12)',
+            border: '2px solid rgba(255,255,255,0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span style={{ fontSize: 40 }}>☕</span>
+        </div>
+      </div>
+
+      <div style={{ padding: '0 24px 24px' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            marginBottom: 8,
+          }}
+        >
+          <Typography.Text style={{ fontSize: 22, fontWeight: 700, color: '#fff' }}>
+            {name ?? 'Unknown Coffee'}
+          </Typography.Text>
+          {tag && (
+            <Tag
+              style={{
+                background: 'rgba(255,200,100,0.25)',
+                border: '1px solid rgba(255,200,100,0.5)',
+                color: '#ffd580',
+                fontSize: 11,
+              }}
+            >
+              {tag}
+            </Tag>
+          )}
+        </div>
+
+        {description && (
+          <Typography.Text
+            style={{
+              display: 'block',
+              textAlign: 'center',
+              fontSize: 13,
+              color: 'rgba(255,255,255,0.65)',
+              marginBottom: 16,
+            }}
+          >
+            {description}
+          </Typography.Text>
+        )}
+
+        <div style={{ height: 1, background: 'rgba(255,255,255,0.12)', margin: '0 0 16px' }} />
+
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          {price !== undefined ? (
+            <div>
+              <Typography.Text
+                style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', display: 'block' }}
+              >
+                Price
+              </Typography.Text>
+              <Typography.Text style={{ fontSize: 20, fontWeight: 700, color: '#ffd580' }}>
+                ¥{price}
+              </Typography.Text>
+            </div>
+          ) : (
+            <div />
+          )}
+
+          {formattedDate && (
+            <div style={{ textAlign: 'right' }}>
+              <Typography.Text
+                style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', display: 'block' }}
+              >
+                Booking Time
+              </Typography.Text>
+              <Typography.Text style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>
+                {date ? dayjs(date).format('YYYY-MM-DD HH:mm') : ''}
+              </Typography.Text>
+            </div>
+          )}
+        </div>
+
+        <div
+          style={{
+            marginTop: 16,
+            padding: '8px 14px',
+            borderRadius: 12,
+            background: 'rgba(82,196,26,0.15)',
+            border: '1px solid rgba(82,196,26,0.35)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
+          <span style={{ fontSize: 14 }}>✅</span>
+          <Typography.Text style={{ fontSize: 13, color: '#95de64', fontWeight: 500 }}>
+            Booking confirmed! We look forward to seeing you!
+          </Typography.Text>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.8 Agent Command Definition
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// v0.8 Command 1: surfaceUpdate - Define component structure
+const SurfaceUpdateCommand: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'booking',
+    components: [
+      {
+        id: 'title',
+        component: {
+          Text: {
+            text: { literalString: 'Coffee Shop Order' },
+            variant: { literalString: 'h1' },
+          },
+        },
+      },
+      {
+        id: 'datetime',
+        component: {
+          DateTimeInput: {
+            status: { path: '/status' },
+            action: {
+              name: 'select_date',
+              context: [
+                {
+                  key: 'time',
+                  value: { path: '/res/time' },
+                },
+              ],
+            },
+          },
+        },
+      },
+      {
+        id: 'coffee_list',
+        component: {
+          CoffeeList: {
+            description: { literalString: 'Please select your favorite coffee' },
+            status: { path: '/status' },
+            action: {
+              name: 'select_coffee',
+              context: [
+                {
+                  key: 'coffee',
+                  value: { path: '/res/coffee' },
+                },
+              ],
+            },
+          },
+        },
+      },
+      {
+        id: 'status-text',
+        component: {
+          Text: {
+            status: { path: '/status' },
+            variant: { literalString: 'success' },
+          },
+        },
+      },
+      {
+        id: 'submit-text',
+        component: {
+          Text: {
+            text: { literalString: 'Confirm Order' },
+          },
+        },
+      },
+      {
+        id: 'submit-btn',
+        component: {
+          ActionButton: {
+            child: 'submit-text',
+            variant: { literalString: 'primary' },
+            status: { path: '/status' },
+            res: { path: '/res' },
+            action: {
+              name: 'confirm_booking',
+              context: [
+                { key: 'status', value: { path: '/status' } },
+                { key: 'res', value: { path: '/res' } },
+              ],
+            },
+          },
+        },
+      },
+      {
+        id: 'root',
+        component: {
+          BookForm: {
+            children: {
+              explicitList: ['title', 'datetime', 'coffee_list', 'status-text', 'submit-btn'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+// v0.8 Command 2: dataModelUpdate - Update data model
+const DataModelUpdateCommand: XAgentCommand_v0_8 = {
+  dataModelUpdate: {
+    surfaceId: 'booking',
+    contents: [
+      {
+        key: 'res',
+        valueMap: [{ key: 'time', valueString: new Date().toISOString() }],
+      },
+    ],
+  },
+};
+
+// v0.8 Command 3: beginRendering - Start rendering
+const BeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'booking',
+    root: 'root',
+  },
+};
+
+// Result card command
+const ResultSurfaceUpdateCommand = (res: any): XAgentCommand_v0_8 => ({
+  surfaceUpdate: {
+    surfaceId: 'result',
+    components: [
+      {
+        id: 'result-card',
+        component: {
+          CoffeeResultCard: {
+            name: { literalString: res?.coffee?.name ?? '' },
+            description: { literalString: res?.coffee?.description ?? '' },
+            price: { literalString: String(res?.coffee?.price ?? '') },
+            tag: { literalString: res?.coffee?.tag ?? '' },
+            date: { literalString: res?.time ?? '' },
+          },
+        },
+      },
+      {
+        id: 'root',
+        component: {
+          BookForm: {
+            children: { explicitList: ['result-card'] },
+          },
+        },
+      },
+    ],
+  },
+});
+
+const ResultBeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'result',
+    root: 'root',
+  },
+};
+
+// v0.8 Command: Delete booking card
+const DeleteBookingCommand: XAgentCommand_v0_8 = {
+  deleteSurface: {
+    surfaceId: 'booking',
+  },
+};
+
+// ─── App Component ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  // Command queue: each time a new command is appended, the entire array reference changes to trigger Box/Card's useEffect
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    // Append to end of queue, ensuring every command is processed by Box/Card
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  /** Handle Card internal action events */
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'confirm_booking') {
+      const { res, status } = payload.context || {};
+
+      if (status === 'success' && res) {
+        runFooter();
+
+        // v0.8: Delete booking card first
+        onAgentCommand(DeleteBookingCommand);
+        // Create result card — command queue guarantees order, no setTimeout needed
+        onAgentCommand(ResultSurfaceUpdateCommand(res));
+        onAgentCommand(ResultBeginRenderingCommand);
+      } else if (status === 'error') {
+        console.log('❌ Booking failed:', payload.context?.errorMessage);
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    timestamp: timestampHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  const {
+    text: textFooter,
+    timestamp: timestampFooter,
+    run: runFooter,
+    reset: resetFooter,
+  } = useStreamText(orderConfirmation);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      // v0.8 command sequence: surfaceUpdate → dataModelUpdate → beginRendering
+      // Command queue guarantees sequential processing, no setTimeout magic numbers needed
+      onAgentCommand(SurfaceUpdateCommand);
+      onAgentCommand(DataModelUpdateCommand);
+      onAgentCommand(BeginRenderingCommand);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    resetFooter();
+    const deleteCommands: XAgentCommand_v0_8[] = [
+      { deleteSurface: { surfaceId: 'booking' } },
+      { deleteSurface: { surfaceId: 'result' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader, resetFooter]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: timestampHeader },
+          { text: textFooter, timestamp: timestampFooter },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          Text,
+          DateTimeInput,
+          BookForm,
+          ActionButton,
+          CoffeeList,
+          CoffeeResultCard,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 620 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/filter-search.md b/packages/x/docs/x-card/demo/A2UI_v0.8/filter-search.md
new file mode 100644
index 0000000000..cbef62963c
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/filter-search.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的动态数据筛选与搜索示例。演示了如何使用 antd 组件实现实时搜索、多条件筛选和结果动态更新。
+
+## en-US
+
+Dynamic data filtering and search example implementing A2UI v0.8 protocol with XCard. Demonstrates how to use antd components for real-time search, multi-condition filtering, and dynamic result updates.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/filter-search.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/filter-search.tsx
new file mode 100644
index 0000000000..51f6447ff4
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/filter-search.tsx
@@ -0,0 +1,768 @@
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Input,
+  Rate,
+  Row,
+  Slider,
+  Space,
+  Tag,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const { Title, Text } = Typography;
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const contentHeader =
+  'Welcome to Product Search! 🔍\n\nFind the perfect product by filtering by category, price, and rating. Results will update in real-time as you adjust filters.';
+
+// ─── Product Data ─────────────────────────────────────────────────────────────────
+interface Product {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+  rating: number;
+  stock: number;
+  tags: string[];
+  image?: string;
+}
+
+const allProducts: Product[] = [
+  {
+    id: 1,
+    name: 'Wireless Bluetooth Earphones',
+    category: 'Electronics',
+    price: 299,
+    rating: 4.5,
+    stock: 156,
+    tags: ['Hot', 'Wireless'],
+  },
+  {
+    id: 2,
+    name: 'Mechanical Keyboard RGB',
+    category: 'Electronics',
+    price: 459,
+    rating: 4.8,
+    stock: 89,
+    tags: ['Gaming'],
+  },
+  {
+    id: 3,
+    name: 'Smart Watch Pro',
+    category: 'Wearable',
+    price: 1299,
+    rating: 4.7,
+    stock: 45,
+    tags: ['New', 'Smart'],
+  },
+  {
+    id: 4,
+    name: 'Portable Power Bank',
+    category: 'Accessories',
+    price: 99,
+    rating: 4.2,
+    stock: 234,
+    tags: ['Portable'],
+  },
+  {
+    id: 5,
+    name: 'Noise Cancelling Headphones',
+    category: 'Electronics',
+    price: 899,
+    rating: 4.9,
+    stock: 67,
+    tags: ['Premium', 'Hot'],
+  },
+  {
+    id: 6,
+    name: 'Wireless Charger Pad',
+    category: 'Accessories',
+    price: 149,
+    rating: 4.3,
+    stock: 178,
+    tags: ['Wireless'],
+  },
+  {
+    id: 7,
+    name: 'Smart Speaker Mini',
+    category: 'Home',
+    price: 399,
+    rating: 4.4,
+    stock: 112,
+    tags: ['Smart Home'],
+  },
+  {
+    id: 8,
+    name: 'Fitness Tracker Band',
+    category: 'Wearable',
+    price: 199,
+    rating: 4.1,
+    stock: 256,
+    tags: ['Fitness'],
+  },
+  {
+    id: 9,
+    name: 'USB-C Hub Multiport',
+    category: 'Accessories',
+    price: 249,
+    rating: 4.6,
+    stock: 143,
+    tags: ['Hot'],
+  },
+  {
+    id: 10,
+    name: 'Gaming Mouse Pro',
+    category: 'Electronics',
+    price: 399,
+    rating: 4.7,
+    stock: 98,
+    tags: ['Gaming', 'RGB'],
+  },
+];
+
+// ─── Role Configuration ────────────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── JSON String Parser Utility ─────────────────────────────────────────────────────
+function parseJsonString<T>(val: any, fallback: T): T {
+  if (typeof val === 'string') {
+    try {
+      return JSON.parse(val) as T;
+    } catch {
+      return fallback;
+    }
+  }
+  return val ?? fallback;
+}
+
+// ─── ColWrapper Component (for column layout within Row) ────────────────────────────────────
+interface ColWrapperProps {
+  span?: number | string;
+  children?: React.ReactNode;
+}
+
+const ColWrapper: React.FC<ColWrapperProps> = ({ span = 8, children }) => {
+  const numSpan = typeof span === 'string' ? parseInt(span, 10) : span;
+  return <Col span={numSpan}>{children}</Col>;
+};
+
+// ─── FilterPanel Component ─────────────────────────────────────────────────────────
+interface FilterPanelProps {
+  categories?: string[];
+  selectedCategories?: string[] | string;
+  priceRange?: [number, number] | string;
+  minRating?: number | string;
+  searchKeyword?: string;
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+}
+
+const FilterPanel: React.FC<FilterPanelProps> = ({
+  categories = ['Electronics', 'Wearable', 'Accessories', 'Home'],
+  selectedCategories = [],
+  priceRange = [0, 1500],
+  minRating = 0,
+  searchKeyword = '',
+  onAction,
+  action,
+}) => {
+  // dataModel stores each field as JSON string, needs to be parsed
+  const parsedSelectedCategories: string[] = parseJsonString(selectedCategories, []);
+  const parsedPriceRange: [number, number] = parseJsonString(priceRange, [0, 1500]);
+  const parsedMinRating: number =
+    typeof minRating === 'string' ? parseFloat(minRating) || 0 : (minRating ?? 0);
+  const parsedSearchKeyword: string =
+    typeof searchKeyword === 'string' ? searchKeyword : String(searchKeyword ?? '');
+
+  const [filters, setFilters] = useState({
+    categories: parsedSelectedCategories,
+    priceRange: parsedPriceRange,
+    minRating: parsedMinRating,
+    searchKeyword: parsedSearchKeyword,
+  });
+
+  // Sync local state when external props change (driven by dataModel update)
+  useEffect(() => {
+    setFilters({
+      categories: parsedSelectedCategories,
+      priceRange: parsedPriceRange,
+      minRating: parsedMinRating,
+      searchKeyword: parsedSearchKeyword,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCategories, priceRange, minRating, searchKeyword]);
+
+  const handleFilterChange = (newFilters: Partial<typeof filters>) => {
+    const updatedFilters = { ...filters, ...newFilters };
+    setFilters(updatedFilters);
+
+    // Report filter condition changes
+    if (action?.name && action.context) {
+      const context: Record<string, any> = {};
+      action.context.forEach((item) => {
+        context[item.key] = updatedFilters;
+      });
+      onAction?.(action.name, context);
+    }
+  };
+
+  return (
+    <Card
+      title={
+        <Space>
+          <SearchOutlined />
+          <span>Filters</span>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        height: '100%',
+      }}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size={20}>
+        {/* Search Input */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Search
+          </Text>
+          <Input
+            placeholder="Search products..."
+            prefix={<SearchOutlined />}
+            value={filters.searchKeyword}
+            onChange={(e) => handleFilterChange({ searchKeyword: e.target.value })}
+            allowClear
+          />
+        </div>
+
+        {/* Category Filter */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Category
+          </Text>
+          <Checkbox.Group
+            value={filters.categories}
+            onChange={(checked) => handleFilterChange({ categories: checked as string[] })}
+          >
+            <Row>
+              {(Array.isArray(categories)
+                ? categories
+                : ['Electronics', 'Wearable', 'Accessories', 'Home']
+              ).map((cat) => (
+                <Col span={12} key={cat} style={{ marginBottom: 8 }}>
+                  <Checkbox value={cat}>{cat}</Checkbox>
+                </Col>
+              ))}
+            </Row>
+          </Checkbox.Group>
+        </div>
+
+        {/* Price Range Filter */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Price Range: ¥{filters.priceRange[0]} - ¥{filters.priceRange[1]}
+          </Text>
+          <Slider
+            range
+            min={0}
+            max={1500}
+            value={filters.priceRange}
+            onChange={(value) => handleFilterChange({ priceRange: value as [number, number] })}
+            marks={{ 0: '¥0', 500: '¥500', 1000: '¥1000', 1500: '¥1500' }}
+          />
+        </div>
+
+        {/* Rating Filter */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Minimum Rating
+          </Text>
+          <Rate
+            value={filters.minRating}
+            onChange={(value) => handleFilterChange({ minRating: value })}
+          />
+          <Text type="secondary" style={{ marginLeft: 8 }}>
+            {filters.minRating > 0 ? `${filters.minRating}+ stars` : 'All ratings'}
+          </Text>
+        </div>
+      </Space>
+    </Card>
+  );
+};
+
+// ─── ProductList Component ──────────────────────────────────────────────────────────
+interface FiltersType {
+  categories: string[];
+  priceRange: [number, number];
+  minRating: number;
+  searchKeyword: string;
+}
+
+interface ProductListProps {
+  products?: Product[];
+  filters?: FiltersType | string;
+}
+
+const ProductList: React.FC<ProductListProps> = ({ products = allProducts, filters }) => {
+  // dataModel stores filters as valueMap object, each field value is string, needs to be parsed
+  const parsedFilters: FiltersType | undefined = (() => {
+    if (!filters) return undefined;
+    if (typeof filters === 'string') {
+      return parseJsonString<FiltersType>(filters, {
+        categories: [],
+        priceRange: [0, 1500],
+        minRating: 0,
+        searchKeyword: '',
+      });
+    }
+    // filters is an object, but each field may be a string (from valueMap)
+    return {
+      categories: parseJsonString((filters as any).categories, []),
+      priceRange: parseJsonString((filters as any).priceRange, [0, 1500]),
+      minRating:
+        typeof (filters as any).minRating === 'string'
+          ? parseFloat((filters as any).minRating) || 0
+          : ((filters as any).minRating ?? 0),
+      searchKeyword:
+        typeof (filters as any).searchKeyword === 'string'
+          ? (filters as any).searchKeyword
+          : String((filters as any).searchKeyword ?? ''),
+    };
+  })();
+
+  const [filteredProducts, setFilteredProducts] = useState<Product[]>(products);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+
+    // Simulate search delay
+    const timer = setTimeout(() => {
+      let result = products;
+
+      // Search keyword
+      if (parsedFilters?.searchKeyword) {
+        const keyword = parsedFilters.searchKeyword.toLowerCase();
+        result = result.filter(
+          (p) =>
+            p.name.toLowerCase().includes(keyword) ||
+            p.category.toLowerCase().includes(keyword) ||
+            p.tags.some((t) => t.toLowerCase().includes(keyword)),
+        );
+      }
+
+      // Category filter
+      if (parsedFilters?.categories && parsedFilters.categories.length > 0) {
+        result = result.filter((p) => parsedFilters.categories.includes(p.category));
+      }
+
+      // Price range
+      if (parsedFilters?.priceRange) {
+        result = result.filter(
+          (p) => p.price >= parsedFilters.priceRange[0] && p.price <= parsedFilters.priceRange[1],
+        );
+      }
+
+      // Minimum rating
+      if (parsedFilters?.minRating && parsedFilters.minRating > 0) {
+        result = result.filter((p) => p.rating >= parsedFilters.minRating);
+      }
+
+      setFilteredProducts(result);
+      setLoading(false);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [products, filters]);
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Space>
+          <Text strong>Results:</Text>
+          <Tag color="blue">{filteredProducts.length} products</Tag>
+        </Space>
+      </div>
+
+      <Row gutter={[16, 16]}>
+        {filteredProducts.map((product) => (
+          <Col xs={24} sm={12} key={product.id}>
+            <Card
+              hoverable
+              style={{ borderRadius: 12 }}
+              cover={
+                <div
+                  style={{
+                    height: 120,
+                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <span style={{ fontSize: 48 }}>📦</span>
+                </div>
+              }
+            >
+              <Card.Meta
+                title={
+                  <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                    <Text strong ellipsis style={{ fontSize: 14 }}>
+                      {product.name}
+                    </Text>
+                    <Space wrap size={4}>
+                      {product.tags.map((tag) => (
+                        <Tag key={tag} style={{ fontSize: 11, margin: 0 }}>
+                          {tag}
+                        </Tag>
+                      ))}
+                    </Space>
+                  </Space>
+                }
+                description={
+                  <Space direction="vertical" size={8} style={{ width: '100%', marginTop: 8 }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <Text strong style={{ fontSize: 16, color: '#1890ff' }}>
+                        ¥{product.price}
+                      </Text>
+                      <Rate disabled value={product.rating} style={{ fontSize: 12 }} />
+                    </div>
+                    <Text type="secondary" style={{ fontSize: 12 }}>
+                      Stock: {product.stock}
+                    </Text>
+                  </Space>
+                }
+              />
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      {filteredProducts.length === 0 && !loading && (
+        <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+          <div style={{ fontSize: 64, marginBottom: 16 }}>🔍</div>
+          <Title level={4} type="secondary">
+            No products found
+          </Title>
+          <Text type="secondary">Try adjusting your filters</Text>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── FilterContainer Component (left-right two-column layout container) ──────────────────────────────────
+interface FilterContainerProps {
+  children?: React.ReactNode;
+}
+
+const FilterContainer: React.FC<FilterContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+      }}
+    >
+      <Row gutter={24} align="stretch">
+        {children}
+      </Row>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.8 Agent Command Definition
+// FilterPanel (left 1/3) + ProductList (right 2/3) via ColWrapper for two-column layout
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const FilterSurfaceUpdateCommand: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'filter',
+    components: [
+      {
+        id: 'filter-panel',
+        component: {
+          FilterPanel: {
+            selectedCategories: { path: '/filters/categories' },
+            priceRange: { path: '/filters/priceRange' },
+            minRating: { path: '/filters/minRating' },
+            searchKeyword: { path: '/filters/searchKeyword' },
+            action: {
+              name: 'update_filters',
+              context: [
+                {
+                  key: 'filters',
+                  value: { path: '/filters' },
+                },
+              ],
+            },
+          },
+        },
+      },
+      {
+        id: 'product-list',
+        component: {
+          ProductList: {
+            filters: { path: '/filters' },
+          },
+        },
+      },
+      // Wrap with ColWrapper to implement left 1/3 filter panel + right 2/3 product list
+      {
+        id: 'col-filter',
+        component: {
+          ColWrapper: {
+            span: { literalString: '8' },
+            child: 'filter-panel',
+          },
+        },
+      },
+      {
+        id: 'col-products',
+        component: {
+          ColWrapper: {
+            span: { literalString: '16' },
+            child: 'product-list',
+          },
+        },
+      },
+      {
+        id: 'root',
+        component: {
+          FilterContainer: {
+            children: {
+              explicitList: ['col-filter', 'col-products'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+const FilterDataModelUpdateCommand: XAgentCommand_v0_8 = {
+  dataModelUpdate: {
+    surfaceId: 'filter',
+    contents: [
+      {
+        key: 'filters',
+        valueMap: [
+          { key: 'categories', valueString: '[]' },
+          { key: 'priceRange', valueString: '[0,1500]' },
+          { key: 'minRating', valueString: '0' },
+          { key: 'searchKeyword', valueString: '' },
+        ],
+      },
+    ],
+  },
+};
+
+const FilterBeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'filter',
+    root: 'root',
+  },
+};
+
+// ─── App Component ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'update_filters') {
+      // Update data model when filter changes
+      const { filters } = payload.context || {};
+      if (filters) {
+        onAgentCommand({
+          dataModelUpdate: {
+            surfaceId: 'filter',
+            contents: [
+              {
+                key: 'filters',
+                valueMap: [
+                  { key: 'categories', valueString: JSON.stringify(filters.categories || []) },
+                  {
+                    key: 'priceRange',
+                    valueString: JSON.stringify(filters.priceRange || [0, 1500]),
+                  },
+                  { key: 'minRating', valueString: String(filters.minRating || 0) },
+                  { key: 'searchKeyword', valueString: filters.searchKeyword || '' },
+                ],
+              },
+            ],
+          },
+        });
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(FilterSurfaceUpdateCommand);
+      onAgentCommand(FilterDataModelUpdateCommand);
+      onAgentCommand(FilterBeginRenderingCommand);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_8[] = [{ deleteSurface: { surfaceId: 'filter' } }];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: streamStatusHeader === 'RUNNING' ? Date.now() : 0 },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          FilterPanel,
+          ProductList,
+          FilterContainer,
+          ColWrapper,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 700 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/form-validation.md b/packages/x/docs/x-card/demo/A2UI_v0.8/form-validation.md
new file mode 100644
index 0000000000..28bb6e3619
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/form-validation.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的表单验证与错误处理示例。演示了如何使用 antd Form 组件实现实时验证、错误状态管理和多步骤表单流程。
+
+## en-US
+
+Form validation and error handling example implementing A2UI v0.8 protocol with XCard. Demonstrates how to use antd Form components for real-time validation, error state management, and multi-step form workflows.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/form-validation.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/form-validation.tsx
new file mode 100644
index 0000000000..4180767cc9
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/form-validation.tsx
@@ -0,0 +1,594 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, Form, Input, message, Select, Space, Steps, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const { Title, Text } = Typography;
+const { Option } = Select;
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const contentHeader =
+  'Welcome to register! 🎉\n\nPlease fill in your information to create an account. We will verify your information step by step.';
+
+// ─── Role Configuration ────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── RegistrationForm Component ─────────────────────────────────────────────────────
+interface RegistrationFormProps {
+  step?: number;
+  status?: 'error' | 'success' | 'loading';
+  errorMessage?: string;
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+}
+
+const RegistrationForm: React.FC<RegistrationFormProps> = ({
+  step = 0,
+  status,
+  errorMessage,
+  onAction,
+  action,
+}) => {
+  const [form] = Form.useForm();
+  // step passed by literalString is a string, needs to be converted to number
+  const numericStep = typeof step === 'string' ? parseInt(step as string, 10) : step;
+  const [currentStep, setCurrentStep] = useState(numericStep);
+  const [formStatus, setFormStatus] = useState<'error' | 'success' | 'loading' | null>(null);
+
+  useEffect(() => {
+    setCurrentStep(numericStep);
+  }, [numericStep]);
+
+  useEffect(() => {
+    setFormStatus(status ?? null);
+  }, [status]);
+
+  const handleNext = async () => {
+    try {
+      // Validate corresponding fields based on current step
+      const fieldsToValidate =
+        currentStep === 0 ? ['username', 'email'] : ['password', 'confirmPassword'];
+
+      await form.validateFields(fieldsToValidate);
+
+      // Validation successful, submit data
+      const values = form.getFieldsValue();
+
+      if (action?.name && action.context) {
+        const context: Record<string, any> = {};
+        action.context.forEach((item) => {
+          context[item.key] = {
+            step: currentStep + 1,
+            values,
+          };
+        });
+        onAction?.(action.name, context);
+      }
+
+      // If this is the last step, submit the form
+      if (currentStep === 1) {
+        handleSubmit(values);
+      } else {
+        setCurrentStep(currentStep + 1);
+      }
+    } catch (error) {
+      // Validation failed, do nothing
+      console.log('Validation failed:', error);
+    }
+  };
+
+  const handlePrev = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  const handleSubmit = (values: any) => {
+    if (action?.name && action.context) {
+      const context: Record<string, any> = {};
+      action.context.forEach((item) => {
+        context[item.key] = {
+          step: 2,
+          values,
+          submit: true,
+        };
+      });
+      onAction?.(action.name, context);
+    }
+  };
+
+  const steps = [
+    {
+      title: 'Basic Info',
+      description: 'Username & Email',
+    },
+    {
+      title: 'Security',
+      description: 'Password',
+    },
+    {
+      title: 'Complete',
+      description: 'Account Created',
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '24px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        minWidth: 480,
+        maxWidth: 600,
+      }}
+    >
+      <Steps current={currentStep} items={steps} style={{ marginBottom: 24 }} />
+
+      {formStatus === 'error' && errorMessage && (
+        <div
+          style={{
+            padding: '12px 16px',
+            marginBottom: 16,
+            borderRadius: 8,
+            background: '#fff2f0',
+            border: '1px solid #ffccc7',
+          }}
+        >
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      )}
+
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{ username: '', email: '', password: '', confirmPassword: '' }}
+      >
+        {/* Step 0: Basic Info */}
+        <div style={{ display: currentStep === 0 ? 'block' : 'none' }}>
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[
+              { required: true, message: 'Please input your username!' },
+              { min: 3, message: 'Username must be at least 3 characters!' },
+              { pattern: /^[a-zA-Z0-9_]+$/, message: 'Only letters, numbers and underscores!' },
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input placeholder="Enter username" size="large" />
+          </Form.Item>
+
+          <Form.Item
+            label="Email"
+            name="email"
+            rules={[
+              { required: true, message: 'Please input your email!' },
+              { type: 'email', message: 'Please enter a valid email!' },
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input placeholder="Enter email" size="large" />
+          </Form.Item>
+        </div>
+
+        {/* Step 1: Security */}
+        <div style={{ display: currentStep === 1 ? 'block' : 'none' }}>
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[
+              { required: true, message: 'Please input your password!' },
+              { min: 8, message: 'Password must be at least 8 characters!' },
+              {
+                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+                message: 'Must contain uppercase, lowercase and number!',
+              },
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input.Password placeholder="Enter password" size="large" />
+          </Form.Item>
+
+          <Form.Item
+            label="Confirm Password"
+            name="confirmPassword"
+            dependencies={['password']}
+            rules={[
+              { required: true, message: 'Please confirm your password!' },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue('password') === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error('Passwords do not match!'));
+                },
+              }),
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input.Password placeholder="Confirm password" size="large" />
+          </Form.Item>
+
+          <Form.Item
+            label="Account Type"
+            name="accountType"
+            rules={[{ required: true, message: 'Please select account type!' }]}
+            initialValue="personal"
+          >
+            <Select size="large">
+              <Option value="personal">Personal</Option>
+              <Option value="business">Business</Option>
+              <Option value="developer">Developer</Option>
+            </Select>
+          </Form.Item>
+        </div>
+
+        {/* Step 2: Complete */}
+        {currentStep === 2 && (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '40px 20px',
+              background: '#f6ffed',
+              borderRadius: 12,
+              border: '1px solid #b7eb8f',
+            }}
+          >
+            <div style={{ fontSize: 48, marginBottom: 16 }}>✅</div>
+            <Title level={3} style={{ marginBottom: 8, color: '#52c41a' }}>
+              Registration Successful!
+            </Title>
+            <Text type="secondary">Your account has been created successfully.</Text>
+          </div>
+        )}
+      </Form>
+
+      {/* Action Buttons */}
+      {currentStep < 2 && (
+        <Space style={{ width: '100%', justifyContent: 'space-between', marginTop: 24 }}>
+          <Button size="large" disabled={currentStep === 0} onClick={handlePrev}>
+            Previous
+          </Button>
+          <Button
+            type="primary"
+            size="large"
+            onClick={handleNext}
+            loading={formStatus === 'loading'}
+          >
+            {currentStep === 1 ? 'Submit' : 'Next'}
+          </Button>
+        </Space>
+      )}
+    </div>
+  );
+};
+
+// ─── SuccessCard Component ──────────────────────────────────────────────────────────
+interface SuccessCardProps {
+  username?: string;
+  email?: string;
+  accountType?: string;
+}
+
+const SuccessCard: React.FC<SuccessCardProps> = ({ username, email, accountType }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #52c41a',
+        padding: '24px',
+        background: 'linear-gradient(135deg, #f6ffed 0%, #fff 100%)',
+        boxShadow: '0 2px 12px rgba(82,196,26,0.15)',
+        minWidth: 400,
+        maxWidth: 500,
+      }}
+    >
+      <div style={{ textAlign: 'center', marginBottom: 24 }}>
+        <div style={{ fontSize: 56, marginBottom: 16 }}>🎉</div>
+        <Title level={2} style={{ marginBottom: 8, color: '#52c41a' }}>
+          Welcome, {username}!
+        </Title>
+        <Text type="secondary">Your account has been created successfully.</Text>
+      </div>
+
+      <div
+        style={{
+          background: '#fff',
+          borderRadius: 12,
+          padding: '16px 20px',
+          marginBottom: 16,
+        }}
+      >
+        <Space direction="vertical" style={{ width: '100%' }} size={12}>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text type="secondary">Email:</Text>
+            <Text strong>{email}</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text type="secondary">Account Type:</Text>
+            <Text strong style={{ textTransform: 'capitalize' }}>
+              {accountType}
+            </Text>
+          </div>
+        </Space>
+      </div>
+
+      <Button type="primary" size="large" block>
+        Start Exploring
+      </Button>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.8 Agent Command Definitions
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// Command 1: surfaceUpdate - Define registration form
+const FormSurfaceUpdateCommand: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'registration',
+    components: [
+      {
+        id: 'registration-form',
+        component: {
+          RegistrationForm: {
+            step: { literalString: '0' },
+            status: { path: '/status' },
+            errorMessage: { path: '/errorMessage' },
+            action: {
+              name: 'submit_step',
+              context: [
+                {
+                  key: 'formData',
+                  value: { path: '/formData' },
+                },
+              ],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+// Command 2: dataModelUpdate - Initialize data model
+const FormDataModelUpdateCommand: XAgentCommand_v0_8 = {
+  dataModelUpdate: {
+    surfaceId: 'registration',
+    contents: [
+      {
+        key: 'status',
+        valueString: '',
+      },
+    ],
+  },
+};
+
+// Command 3: beginRendering - Start rendering
+const FormBeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'registration',
+    root: 'registration-form',
+  },
+};
+
+// Result card command
+const ResultSurfaceUpdateCommand = (formData: any): XAgentCommand_v0_8 => ({
+  surfaceUpdate: {
+    surfaceId: 'result',
+    components: [
+      {
+        id: 'success-card',
+        component: {
+          SuccessCard: {
+            username: { literalString: formData?.username ?? '' },
+            email: { literalString: formData?.email ?? '' },
+            accountType: { literalString: formData?.accountType ?? 'personal' },
+          },
+        },
+      },
+    ],
+  },
+});
+
+const ResultBeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'result',
+    root: 'success-card',
+  },
+};
+
+// ─── App ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  /** Handle Card internal action events */
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'submit_step') {
+      const { formData } = payload.context || {};
+
+      if (formData?.submit) {
+        // Final submission
+        message.success('Registration successful!');
+
+        // Delete registration form
+        onAgentCommand({
+          deleteSurface: {
+            surfaceId: 'registration',
+          },
+        });
+
+        // Create success card
+        setTimeout(() => {
+          onAgentCommand(ResultSurfaceUpdateCommand(formData.values));
+          onAgentCommand(ResultBeginRenderingCommand);
+        }, 300);
+      } else {
+        // Update form step
+        message.info(`Step ${formData.step} completed`);
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(FormSurfaceUpdateCommand);
+      onAgentCommand(FormDataModelUpdateCommand);
+      onAgentCommand(FormBeginRenderingCommand);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_8[] = [
+      { deleteSurface: { surfaceId: 'registration' } },
+      { deleteSurface: { surfaceId: 'result' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: streamStatusHeader === 'RUNNING' ? Date.now() : 0 },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          RegistrationForm,
+          SuccessCard,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 620 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/multi-card-sync.md b/packages/x/docs/x-card/demo/A2UI_v0.8/multi-card-sync.md
new file mode 100644
index 0000000000..b30228e57b
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/multi-card-sync.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的多卡片协同与状态同步示例。演示了购物车场景中多个 Surface 之间的数据共享、跨卡片通信和实时价格计算。
+
+## en-US
+
+Multi-card coordination and state synchronization example implementing A2UI v0.8 protocol with XCard. Demonstrates data sharing between multiple Surfaces, cross-card communication, and real-time price calculation in a shopping cart scenario.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/multi-card-sync.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/multi-card-sync.tsx
new file mode 100644
index 0000000000..70edbcb11d
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/multi-card-sync.tsx
@@ -0,0 +1,1084 @@
+import { DeleteOutlined, ReloadOutlined, ShoppingCartOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import {
+  Badge,
+  Button,
+  Card,
+  Col,
+  Divider,
+  Empty,
+  InputNumber,
+  List,
+  Row,
+  Space,
+  Tag,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const { Title, Text } = Typography;
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const contentHeader =
+  'Welcome to Smart Shopping Cart! 🛒\n\nBrowse products, add them to your cart, and see real-time price calculations. Experience the power of multi-surface collaboration!';
+
+// ─── Product Data ─────────────────────────────────────────────────────────────────
+interface Product {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  category: string;
+  image?: string;
+  tag?: string;
+  stock: number;
+}
+
+const allProducts: Product[] = [
+  {
+    id: 1,
+    name: 'iPhone 15 Pro',
+    description: 'A17 Pro chip, 48MP camera system',
+    price: 7999,
+    category: 'Electronics',
+    tag: 'Hot',
+    stock: 50,
+  },
+  {
+    id: 2,
+    name: 'MacBook Air M3',
+    description: 'M3 chip, 15-inch Liquid Retina display',
+    price: 10999,
+    category: 'Electronics',
+    tag: 'New',
+    stock: 30,
+  },
+  {
+    id: 3,
+    name: 'AirPods Pro 2',
+    description: 'Active Noise Cancellation, Adaptive Audio',
+    price: 1899,
+    category: 'Accessories',
+    tag: 'Popular',
+    stock: 100,
+  },
+  {
+    id: 4,
+    name: 'Apple Watch Ultra 2',
+    description: 'The most rugged Apple Watch, titanium case',
+    price: 6499,
+    category: 'Wearable',
+    stock: 25,
+  },
+  {
+    id: 5,
+    name: 'iPad Pro M2',
+    description: 'M2 chip, 12.9-inch Liquid Retina XDR display',
+    price: 9299,
+    category: 'Electronics',
+    tag: 'Recommended',
+    stock: 40,
+  },
+  {
+    id: 6,
+    name: 'Magic Keyboard',
+    description: 'Wireless, rechargeable, with Touch ID',
+    price: 1999,
+    category: 'Accessories',
+    stock: 80,
+  },
+];
+
+// ─── Cart Item Type ─────────────────────────────────────────────────────────────
+interface CartItem {
+  product: Product;
+  quantity: number;
+}
+
+// ─── Role Configuration ────────────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── JSON String Parser Utility ─────────────────────────────────────────────────────
+function parseJsonString<T>(val: any, fallback: T): T {
+  if (typeof val === 'string') {
+    try {
+      return JSON.parse(val) as T;
+    } catch {
+      return fallback;
+    }
+  }
+  return val ?? fallback;
+}
+
+// ─── ColWrapper Component (for column layout within Row) ────────────────────────────────────
+interface ColWrapperProps {
+  span?: number | string;
+  children?: React.ReactNode;
+}
+
+const ColWrapper: React.FC<ColWrapperProps> = ({ span = 8, children }) => {
+  const numSpan = typeof span === 'string' ? parseInt(span, 10) : span;
+  return <Col span={numSpan}>{children}</Col>;
+};
+
+// ─── ProductListCard Component ─────────────────────────────────────────────────────
+interface ProductListCardProps {
+  products?: Product[];
+  cart?: CartItem[];
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+}
+
+const ProductListCard: React.FC<ProductListCardProps> = ({
+  products = allProducts,
+  cart = [],
+  onAction,
+  action,
+}) => {
+  // products in dataModel is stored as JSON string, needs to be parsed
+  const parsedProducts: Product[] = parseJsonString(products, allProducts);
+  // cart in dataModel is stored as JSON string, needs to be parsed
+  const parsedCart: CartItem[] = parseJsonString(cart, []);
+
+  const handleAddToCart = (product: Product) => {
+    if (!action?.name) return;
+
+    const context: Record<string, any> = { product };
+    if (action.context) {
+      action.context.forEach((item) => {
+        context[item.key] = product;
+      });
+    }
+    onAction?.(action.name, context);
+  };
+
+  const getCartQuantity = (productId: number) => {
+    const item = parsedCart.find((c) => c.product.id === productId);
+    return item?.quantity || 0;
+  };
+
+  return (
+    <Card
+      title={
+        <Space>
+          <span style={{ fontSize: 18 }}>📦</span>
+          <span>Product List</span>
+          <Tag color="blue">{parsedProducts.length} items</Tag>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        height: '100%',
+      }}
+      styles={{
+        body: { maxHeight: 450, overflow: 'auto' },
+      }}
+    >
+      <List
+        dataSource={parsedProducts}
+        renderItem={(product) => {
+          const inCart = getCartQuantity(product.id);
+          return (
+            <List.Item style={{ padding: '12px 0' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  gap: 12,
+                }}
+              >
+                <div
+                  style={{
+                    width: 56,
+                    height: 56,
+                    borderRadius: 12,
+                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                  }}
+                >
+                  <span style={{ fontSize: 24 }}>
+                    {product.category === 'Electronics'
+                      ? '📱'
+                      : product.category === 'Accessories'
+                        ? '🎧'
+                        : product.category === 'Wearable'
+                          ? '⌚'
+                          : '📦'}
+                  </span>
+                </div>
+
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+                    <Text strong style={{ fontSize: 14 }} ellipsis>
+                      {product.name}
+                    </Text>
+                    {product.tag && (
+                      <Tag
+                        style={{
+                          fontSize: 11,
+                          padding: '0 6px',
+                          lineHeight: '18px',
+                          borderRadius: 6,
+                          margin: 0,
+                        }}
+                        color="orange"
+                      >
+                        {product.tag}
+                      </Tag>
+                    )}
+                  </div>
+                  <Text type="secondary" style={{ fontSize: 12 }} ellipsis>
+                    {product.description}
+                  </Text>
+                </div>
+
+                <div style={{ textAlign: 'right', flexShrink: 0 }}>
+                  <Text strong style={{ fontSize: 15, color: '#1890ff', display: 'block' }}>
+                    ¥{product.price.toLocaleString()}
+                  </Text>
+                  <Button
+                    type={inCart > 0 ? 'default' : 'primary'}
+                    size="small"
+                    onClick={() => handleAddToCart(product)}
+                    style={{ marginTop: 4, minWidth: 80 }}
+                    icon={
+                      inCart > 0 ? (
+                        <Badge count={inCart} size="small" offset={[6, -2]}>
+                          <ShoppingCartOutlined />
+                        </Badge>
+                      ) : (
+                        <ShoppingCartOutlined />
+                      )
+                    }
+                  >
+                    {inCart > 0 ? 'Add More' : 'Add'}
+                  </Button>
+                </div>
+              </div>
+            </List.Item>
+          );
+        }}
+      />
+    </Card>
+  );
+};
+
+// ─── CartCard Component ─────────────────────────────────────────────────────────────
+interface CartCardProps {
+  cart?: CartItem[];
+  onAction?: (name: string, context: Record<string, any>) => void;
+  updateAction?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+  removeAction?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+}
+
+const CartCard: React.FC<CartCardProps> = ({ cart = [], onAction, updateAction, removeAction }) => {
+  // cart in dataModel is stored as JSON string, needs to be parsed
+  const parsedCart: CartItem[] = parseJsonString(cart, []);
+
+  const handleQuantityChange = (productId: number, quantity: number) => {
+    if (!updateAction?.name) return;
+    onAction?.(updateAction.name, { productId, quantity });
+  };
+
+  const handleRemove = (productId: number) => {
+    if (!removeAction?.name) return;
+    onAction?.(removeAction.name, { productId });
+  };
+
+  const totalItems = parsedCart.reduce((sum, item) => sum + item.quantity, 0);
+  const subtotal = parsedCart.reduce((sum, item) => sum + item.product.price * item.quantity, 0);
+
+  return (
+    <Card
+      title={
+        <Space>
+          <Badge count={totalItems} size="small" offset={[4, -2]}>
+            <ShoppingCartOutlined style={{ fontSize: 18 }} />
+          </Badge>
+          <span>Shopping Cart</span>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        height: '100%',
+      }}
+      styles={{
+        body: { maxHeight: 380, overflow: 'auto' },
+      }}
+    >
+      {parsedCart.length === 0 ? (
+        <Empty
+          description="Cart is empty"
+          style={{ padding: '40px 0' }}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          <List
+            dataSource={parsedCart}
+            renderItem={(item) => (
+              <List.Item style={{ padding: '12px 0' }}>
+                <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: 12 }}>
+                  <div
+                    style={{
+                      width: 44,
+                      height: 44,
+                      borderRadius: 10,
+                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      flexShrink: 0,
+                    }}
+                  >
+                    <span style={{ fontSize: 18 }}>
+                      {item.product.category === 'Electronics'
+                        ? '📱'
+                        : item.product.category === 'Accessories'
+                          ? '🎧'
+                          : item.product.category === 'Wearable'
+                            ? '⌚'
+                            : '📦'}
+                    </span>
+                  </div>
+
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Text strong style={{ fontSize: 13 }} ellipsis>
+                      {item.product.name}
+                    </Text>
+                    <Text type="secondary" style={{ fontSize: 12, display: 'block' }}>
+                      ¥{item.product.price.toLocaleString()} x {item.quantity}
+                    </Text>
+                  </div>
+
+                  <Space.Compact size="small">
+                    <InputNumber
+                      min={1}
+                      max={item.product.stock}
+                      value={item.quantity}
+                      onChange={(val) => handleQuantityChange(item.product.id, val || 1)}
+                      style={{ width: 60 }}
+                      controls={{ upIcon: null, downIcon: null }}
+                    />
+                    <Button
+                      danger
+                      icon={<DeleteOutlined />}
+                      onClick={() => handleRemove(item.product.id)}
+                    />
+                  </Space.Compact>
+                </div>
+              </List.Item>
+            )}
+          />
+
+          <Divider style={{ margin: '12px 0' }} />
+
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Text strong>Subtotal:</Text>
+            <Text strong style={{ fontSize: 16, color: '#1890ff' }}>
+              ¥{subtotal.toLocaleString()}
+            </Text>
+          </div>
+        </>
+      )}
+    </Card>
+  );
+};
+
+// ─── OrderSummaryCard Component ─────────────────────────────────────────────────────
+interface OrderSummaryCardProps {
+  cart?: CartItem[];
+  onAction?: (name: string, context: Record<string, any>) => void;
+  checkoutAction?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+}
+
+const OrderSummaryCard: React.FC<OrderSummaryCardProps> = ({
+  cart = [],
+  onAction,
+  checkoutAction,
+}) => {
+  // cart in dataModel is stored as JSON string, needs to be parsed
+  const parsedCart: CartItem[] = parseJsonString(cart, []);
+
+  const subtotal = parsedCart.reduce((sum, item) => sum + item.product.price * item.quantity, 0);
+  const totalItems = parsedCart.reduce((sum, item) => sum + item.quantity, 0);
+
+  // Calculate discount
+  const discount = subtotal >= 10000 ? subtotal * 0.1 : subtotal >= 5000 ? subtotal * 0.05 : 0;
+  const discountRate = subtotal >= 10000 ? '10%' : subtotal >= 5000 ? '5%' : '0%';
+
+  // Shipping fee
+  const shipping = subtotal >= 1000 ? 0 : 15;
+
+  // Final total
+  const total = subtotal - discount + shipping;
+
+  const handleCheckout = () => {
+    if (!checkoutAction?.name) return;
+
+    onAction?.(checkoutAction.name, {
+      cart: parsedCart,
+      subtotal,
+      discount,
+      shipping,
+      total,
+      itemCount: totalItems,
+    });
+  };
+
+  return (
+    <Card
+      title={
+        <Space>
+          <span style={{ fontSize: 18 }}>📋</span>
+          <span>Order Summary</span>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
+        height: '100%',
+      }}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size={12}>
+        {/* Item count */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Text type="secondary">Items:</Text>
+          <Text>{totalItems} items</Text>
+        </div>
+
+        {/* Subtotal */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Text type="secondary">Subtotal:</Text>
+          <Text>¥{subtotal.toLocaleString()}</Text>
+        </div>
+
+        <Divider style={{ margin: '8px 0' }} />
+
+        {/* Discount */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Space>
+            <Text type="secondary">Discount:</Text>
+            {discount > 0 && (
+              <Tag color="green" style={{ margin: 0 }}>
+                {discountRate} off
+              </Tag>
+            )}
+          </Space>
+          <Text type="success">-¥{discount.toLocaleString()}</Text>
+        </div>
+
+        {/* Shipping */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Text type="secondary">Shipping:</Text>
+          {shipping === 0 ? <Text type="success">Free</Text> : <Text>¥{shipping}</Text>}
+        </div>
+
+        <Divider style={{ margin: '8px 0' }} />
+
+        {/* Total price */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Title level={4} style={{ margin: 0 }}>
+            Total:
+          </Title>
+          <Title level={3} style={{ margin: 0, color: '#ff4d4f' }}>
+            ¥{total.toLocaleString()}
+          </Title>
+        </div>
+
+        {/* Discount tip */}
+        {subtotal < 5000 && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#fff7e6',
+              borderRadius: 8,
+              border: '1px solid #ffd591',
+            }}
+          >
+            <Text style={{ fontSize: 12, color: '#d46b08' }}>
+              💡 Spend ¥{(5000 - subtotal).toLocaleString()} more for 5% off!
+            </Text>
+          </div>
+        )}
+        {subtotal >= 5000 && subtotal < 10000 && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#fff7e6',
+              borderRadius: 8,
+              border: '1px solid #ffd591',
+            }}
+          >
+            <Text style={{ fontSize: 12, color: '#d46b08' }}>
+              💡 Spend ¥{(10000 - subtotal).toLocaleString()} more for 10% off!
+            </Text>
+          </div>
+        )}
+        {subtotal >= 10000 && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#f6ffed',
+              borderRadius: 8,
+              border: '1px solid #b7eb8f',
+            }}
+          >
+            <Text style={{ fontSize: 12, color: '#52c41a' }}>
+              🎉 You've got the maximum discount!
+            </Text>
+          </div>
+        )}
+
+        {/* Checkout button */}
+        <Button
+          type="primary"
+          size="large"
+          block
+          disabled={parsedCart.length === 0}
+          onClick={handleCheckout}
+          style={{ marginTop: 8, height: 48, borderRadius: 8 }}
+        >
+          Checkout (¥{total.toLocaleString()})
+        </Button>
+      </Space>
+    </Card>
+  );
+};
+
+// ─── MultiCardContainer Component (three-column horizontal layout container) ──────────────────────────────
+interface MultiCardContainerProps {
+  children?: React.ReactNode;
+}
+
+const MultiCardContainer: React.FC<MultiCardContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '24px',
+        background: '#fff',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
+      }}
+    >
+      <Row gutter={16} align="stretch">
+        {children}
+      </Row>
+    </div>
+  );
+};
+
+// ─── CheckoutSuccessCard Component ──────────────────────────────────────────────────
+interface CheckoutSuccessCardProps {
+  total?: number;
+  itemCount?: number;
+  orderNumber?: string;
+}
+
+const CheckoutSuccessCard: React.FC<CheckoutSuccessCardProps> = ({
+  total = 0,
+  itemCount = 0,
+  orderNumber,
+}) => {
+  // literalString passes values as strings, needs to be converted to numbers
+  const numericTotal = typeof total === 'string' ? parseFloat(total as string) : total;
+  const numericItemCount =
+    typeof itemCount === 'string' ? parseInt(itemCount as string, 10) : itemCount;
+  return (
+    <Card
+      style={{
+        borderRadius: 16,
+        background: 'linear-gradient(145deg, #52c41a 0%, #73d13d 100%)',
+        border: 'none',
+        boxShadow: '0 8px 24px rgba(82,196,26,0.35)',
+        maxWidth: 400,
+        margin: '0 auto',
+      }}
+    >
+      <div style={{ textAlign: 'center', padding: '20px 0' }}>
+        <div
+          style={{
+            width: 80,
+            height: 80,
+            borderRadius: '50%',
+            background: 'rgba(255,255,255,0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            margin: '0 auto 16px',
+          }}
+        >
+          <span style={{ fontSize: 40 }}>✅</span>
+        </div>
+
+        <Title level={3} style={{ color: '#fff', margin: '0 0 8px' }}>
+          Order Placed!
+        </Title>
+        <Text style={{ color: 'rgba(255,255,255,0.85)', display: 'block', marginBottom: 24 }}>
+          Thank you for your purchase!
+        </Text>
+
+        <div
+          style={{
+            background: 'rgba(255,255,255,0.15)',
+            borderRadius: 12,
+            padding: 16,
+            marginBottom: 16,
+          }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+            <Text style={{ color: 'rgba(255,255,255,0.7)' }}>Order Number:</Text>
+            <Text strong style={{ color: '#fff' }}>
+              {orderNumber}
+            </Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+            <Text style={{ color: 'rgba(255,255,255,0.7)' }}>Items:</Text>
+            <Text style={{ color: '#fff' }}>{numericItemCount} items</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text style={{ color: 'rgba(255,255,255,0.7)' }}>Total:</Text>
+            <Text strong style={{ color: '#fff', fontSize: 18 }}>
+              ¥{numericTotal.toLocaleString()}
+            </Text>
+          </div>
+        </div>
+
+        <Button
+          ghost
+          size="large"
+          style={{ borderRadius: 8 }}
+          onClick={() => window.location.reload()}
+        >
+          Continue Shopping
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.8 Agent Command Definition
+// Three cards merged in one Surface, implementing three-column layout via MultiCardContainer + ColWrapper
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const ShopSurfaceUpdateCommand: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'shop',
+    components: [
+      // Product list card
+      {
+        id: 'product-list-card',
+        component: {
+          ProductListCard: {
+            products: { path: '/products' },
+            cart: { path: '/cart' },
+            action: {
+              name: 'add_to_cart',
+              context: [{ key: 'product', value: { path: '/addedProduct' } }],
+            },
+          },
+        },
+      },
+      // Shopping cart card
+      {
+        id: 'cart-card',
+        component: {
+          CartCard: {
+            cart: { path: '/cart' },
+            updateAction: {
+              name: 'update_quantity',
+              context: [
+                { key: 'productId', value: { path: '/updateProductId' } },
+                { key: 'quantity', value: { path: '/updateQuantity' } },
+              ],
+            },
+            removeAction: {
+              name: 'remove_from_cart',
+              context: [{ key: 'productId', value: { path: '/removeProductId' } }],
+            },
+          },
+        },
+      },
+      // Order summary card
+      {
+        id: 'order-summary-card',
+        component: {
+          OrderSummaryCard: {
+            cart: { path: '/cart' },
+            checkoutAction: {
+              name: 'checkout',
+              context: [{ key: 'orderData', value: { path: '/orderData' } }],
+            },
+          },
+        },
+      },
+      // Wrap each card with ColWrapper to implement equal-width three columns
+      {
+        id: 'col-products',
+        component: {
+          ColWrapper: {
+            span: { literalString: '8' },
+            child: 'product-list-card',
+          },
+        },
+      },
+      {
+        id: 'col-cart',
+        component: {
+          ColWrapper: {
+            span: { literalString: '8' },
+            child: 'cart-card',
+          },
+        },
+      },
+      {
+        id: 'col-summary',
+        component: {
+          ColWrapper: {
+            span: { literalString: '8' },
+            child: 'order-summary-card',
+          },
+        },
+      },
+      // Root container: MultiCardContainer contains three columns
+      {
+        id: 'root',
+        component: {
+          MultiCardContainer: {
+            children: {
+              explicitList: ['col-products', 'col-cart', 'col-summary'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+const ShopBeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'shop',
+    root: 'root',
+  },
+};
+
+// Initialize data model
+const InitialDataModelUpdateCommand: XAgentCommand_v0_8 = {
+  dataModelUpdate: {
+    surfaceId: 'shop',
+    contents: [
+      {
+        key: 'products',
+        valueString: JSON.stringify(allProducts),
+      },
+      {
+        key: 'cart',
+        valueString: '[]',
+      },
+    ],
+  },
+};
+
+// Create success card after checkout
+const CheckoutSuccessSurfaceUpdateCommand = (
+  total: number,
+  itemCount: number,
+  orderNumber: string,
+): XAgentCommand_v0_8 => ({
+  surfaceUpdate: {
+    surfaceId: 'checkout-success',
+    components: [
+      {
+        id: 'success-card',
+        component: {
+          CheckoutSuccessCard: {
+            total: { literalString: String(total) },
+            itemCount: { literalString: String(itemCount) },
+            orderNumber: { literalString: orderNumber },
+          },
+        },
+      },
+    ],
+  },
+});
+
+const CheckoutSuccessBeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'checkout-success',
+    root: 'success-card',
+  },
+};
+
+// ─── App ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  // Cart state (for cross-component data sharing)
+  const [cart, setCart] = useState<CartItem[]>([]);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  // Handle cart operations
+  const handleAction = (payload: ActionPayload) => {
+    const { name, context } = payload;
+
+    switch (name) {
+      case 'add_to_cart': {
+        const product = context?.product as Product;
+        if (!product) return;
+
+        setCart((prev) => {
+          const existing = prev.find((item) => item.product.id === product.id);
+          if (existing) {
+            return prev.map((item) =>
+              item.product.id === product.id ? { ...item, quantity: item.quantity + 1 } : item,
+            );
+          }
+          return [...prev, { product, quantity: 1 }];
+        });
+        break;
+      }
+
+      case 'update_quantity': {
+        const { productId, quantity } = context || {};
+        if (!productId || !quantity) return;
+
+        setCart((prev) =>
+          prev.map((item) => (item.product.id === productId ? { ...item, quantity } : item)),
+        );
+        break;
+      }
+
+      case 'remove_from_cart': {
+        const { productId } = context || {};
+        if (!productId) return;
+
+        setCart((prev) => prev.filter((item) => item.product.id !== productId));
+        break;
+      }
+
+      case 'checkout': {
+        const { total, itemCount } = context || {};
+        const orderNumber = `ORD-${Date.now().toString(36).toUpperCase()}`;
+
+        // Delete shopping Surface
+        onAgentCommand({ deleteSurface: { surfaceId: 'shop' } });
+
+        // Create checkout success card
+        setTimeout(() => {
+          onAgentCommand(CheckoutSuccessSurfaceUpdateCommand(total, itemCount, orderNumber));
+          onAgentCommand(CheckoutSuccessBeginRenderingCommand);
+        }, 100);
+
+        // Clear cart
+        setCart([]);
+        break;
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(ShopSurfaceUpdateCommand);
+      onAgentCommand(InitialDataModelUpdateCommand);
+      onAgentCommand(ShopBeginRenderingCommand);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  // Update Surface data model when cart changes
+  useEffect(() => {
+    if (card.some((c) => c.id === 'shop')) {
+      onAgentCommand({
+        dataModelUpdate: {
+          surfaceId: 'shop',
+          contents: [
+            {
+              key: 'cart',
+              valueString: JSON.stringify(cart),
+            },
+          ],
+        },
+      });
+    }
+  }, [cart]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_8[] = [
+      { deleteSurface: { surfaceId: 'shop' } },
+      { deleteSurface: { surfaceId: 'checkout-success' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setCart([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: streamStatusHeader === 'RUNNING' ? Date.now() : 0 },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          ProductListCard,
+          CartCard,
+          OrderSummaryCard,
+          CheckoutSuccessCard,
+          MultiCardContainer,
+          ColWrapper,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 700 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/nested-interaction.md b/packages/x/docs/x-card/demo/A2UI_v0.8/nested-interaction.md
new file mode 100644
index 0000000000..a30c70411f
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/nested-interaction.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的复杂交互与嵌套组件示例。演示了可展开的详情卡片、树形文件浏览器和手风琴折叠面板。
+
+## en-US
+
+Complex interaction and nested components example implementing A2UI v0.8 protocol with XCard. Demonstrates expandable detail cards, tree file browser, and accordion folding panels.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/nested-interaction.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/nested-interaction.tsx
new file mode 100644
index 0000000000..c658f9d6db
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/nested-interaction.tsx
@@ -0,0 +1,785 @@
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  FileOutlined,
+  FolderOpenOutlined,
+  FolderOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, Card, Collapse, CollapseProps, Space, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const { Text } = Typography;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Data Type Definitions
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface FileNode {
+  key: string;
+  name: string;
+  type: 'file' | 'folder';
+  children?: FileNode[];
+  size?: number;
+  modified?: string;
+  language?: string;
+  description?: string;
+}
+
+interface FileDetail {
+  name: string;
+  path: string;
+  size: number;
+  modified: string;
+  language: string;
+  description: string;
+  content?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mock Data
+// ─────────────────────────────────────────────────────────────────────────────
+
+const PROJECT_FILES: FileNode[] = [
+  {
+    key: 'src',
+    name: 'src',
+    type: 'folder',
+    children: [
+      {
+        key: 'src/components',
+        name: 'components',
+        type: 'folder',
+        children: [
+          {
+            key: 'src/components/Button.tsx',
+            name: 'Button.tsx',
+            type: 'file',
+            size: 2048,
+            modified: '2024-01-15',
+            language: 'TypeScript',
+            description: 'A reusable button component with multiple variants',
+          },
+          {
+            key: 'src/components/Card.tsx',
+            name: 'Card.tsx',
+            type: 'file',
+            size: 3584,
+            modified: '2024-01-14',
+            language: 'TypeScript',
+            description: 'Card component for displaying content in a container',
+          },
+          {
+            key: 'src/components/Modal.tsx',
+            name: 'Modal.tsx',
+            type: 'file',
+            size: 4096,
+            modified: '2024-01-13',
+            language: 'TypeScript',
+            description: 'Modal dialog component with overlay',
+          },
+        ],
+      },
+      {
+        key: 'src/hooks',
+        name: 'hooks',
+        type: 'folder',
+        children: [
+          {
+            key: 'src/hooks/useAuth.ts',
+            name: 'useAuth.ts',
+            type: 'file',
+            size: 1536,
+            modified: '2024-01-12',
+            language: 'TypeScript',
+            description: 'Authentication hook for user login/logout',
+          },
+          {
+            key: 'src/hooks/useTheme.ts',
+            name: 'useTheme.ts',
+            type: 'file',
+            size: 1024,
+            modified: '2024-01-11',
+            language: 'TypeScript',
+            description: 'Theme management hook',
+          },
+        ],
+      },
+      {
+        key: 'src/App.tsx',
+        name: 'App.tsx',
+        type: 'file',
+        size: 2560,
+        modified: '2024-01-10',
+        language: 'TypeScript',
+        description: 'Main application entry component',
+      },
+      {
+        key: 'src/index.tsx',
+        name: 'index.tsx',
+        type: 'file',
+        size: 512,
+        modified: '2024-01-09',
+        language: 'TypeScript',
+        description: 'Application bootstrap file',
+      },
+    ],
+  },
+  {
+    key: 'public',
+    name: 'public',
+    type: 'folder',
+    children: [
+      {
+        key: 'public/index.html',
+        name: 'index.html',
+        type: 'file',
+        size: 768,
+        modified: '2024-01-08',
+        language: 'HTML',
+        description: 'HTML template for the application',
+      },
+      {
+        key: 'public/favicon.ico',
+        name: 'favicon.ico',
+        type: 'file',
+        size: 4096,
+        modified: '2024-01-07',
+        language: 'Binary',
+        description: 'Application favicon',
+      },
+    ],
+  },
+  {
+    key: 'package.json',
+    name: 'package.json',
+    type: 'file',
+    size: 1280,
+    modified: '2024-01-16',
+    language: 'JSON',
+    description: 'Project dependencies and scripts configuration',
+  },
+  {
+    key: 'README.md',
+    name: 'README.md',
+    type: 'file',
+    size: 2048,
+    modified: '2024-01-17',
+    language: 'Markdown',
+    description: 'Project documentation and usage guide',
+  },
+];
+
+const PANEL_DATA = [
+  {
+    id: 'overview',
+    title: 'Project Overview',
+    content:
+      'This is a React-based web application built with TypeScript. It follows a component-based architecture with hooks for state management.',
+  },
+  {
+    id: 'tech-stack',
+    title: 'Tech Stack',
+    content:
+      '- React 18.x\n- TypeScript 5.x\n- Ant Design 5.x\n- Vite for build tooling\n- ESLint & Prettier for code quality',
+  },
+  {
+    id: 'structure',
+    title: 'Directory Structure',
+    content:
+      '- src/components: Reusable UI components\n- src/hooks: Custom React hooks\n- public: Static assets\n- package.json: Dependencies',
+  },
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Content rendering related
+// ─────────────────────────────────────────────────────────────────────────────
+
+const contentHeader =
+  'Welcome to Project File Browser! Browse the project structure below. Click on files to view details, expand folders to explore nested contents.';
+
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component Definitions
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Text Component
+interface TextProps {
+  text?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | string;
+  children?: React.ReactNode;
+}
+
+const TextComponent: React.FC<TextProps> = ({ text, variant, children }) => {
+  const content = text ?? children;
+  if (!content) return null;
+  const styleMap: Record<string, React.CSSProperties> = {
+    h1: { fontSize: 20, fontWeight: 700, margin: '0 0 12px' },
+    h2: { fontSize: 17, fontWeight: 600, margin: '0 0 8px' },
+    h3: { fontSize: 15, fontWeight: 600, margin: '0 0 6px' },
+    body: { fontSize: 14, margin: 0 },
+  };
+  const style = styleMap[variant ?? 'body'] ?? styleMap.body;
+  return <p style={style}>{content}</p>;
+};
+
+// File Tree Node Component
+interface TreeNodeProps {
+  node: FileNode;
+  level: number;
+  selectedKey?: string;
+  onFileClick: (file: FileNode) => void;
+}
+
+const TreeNode: React.FC<TreeNodeProps> = ({ node, level, selectedKey, onFileClick }) => {
+  const [expanded, setExpanded] = useState(false);
+  const isFolder = node.type === 'folder';
+  const isSelected = selectedKey === node.key;
+
+  const handleClick = () => {
+    if (isFolder) {
+      setExpanded(!expanded);
+    } else {
+      onFileClick(node);
+    }
+  };
+
+  return (
+    <div>
+      <div
+        onClick={handleClick}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '6px 8px',
+          cursor: 'pointer',
+          borderRadius: 6,
+          background: isSelected ? '#e6f4ff' : 'transparent',
+          borderLeft: `3px solid ${isSelected ? '#1677ff' : 'transparent'}`,
+          marginLeft: level * 12,
+          transition: 'all 0.2s',
+        }}
+      >
+        {isFolder ? (
+          expanded ? (
+            <FolderOpenOutlined style={{ color: '#faad14' }} />
+          ) : (
+            <FolderOutlined style={{ color: '#faad14' }} />
+          )
+        ) : (
+          <FileOutlined style={{ color: '#1677ff' }} />
+        )}
+        <Text style={{ flex: 1, fontSize: 13 }}>{node.name}</Text>
+        {isFolder && node.children && (
+          <Text type="secondary" style={{ fontSize: 11 }}>
+            {node.children.length}
+          </Text>
+        )}
+      </div>
+      {isFolder && expanded && node.children && (
+        <div>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.key}
+              node={child}
+              level={level + 1}
+              selectedKey={selectedKey}
+              onFileClick={onFileClick}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// File Tree Component
+interface FileTreeProps {
+  files?: FileNode[];
+  action?: {
+    name: string;
+    context?: Array<{ key: string; value: { path: string } }>;
+  };
+  onAction?: (name: string, context: Record<string, any>) => void;
+  selectedFile?: FileDetail;
+}
+
+const FileTree: React.FC<FileTreeProps> = ({ files, action, onAction, selectedFile }) => {
+  const treeData = files && files.length > 0 ? files : PROJECT_FILES;
+
+  const handleFileClick = (file: FileNode) => {
+    if (!action?.name) return;
+
+    const fileDetail: FileDetail = {
+      name: file.name,
+      path: file.key,
+      size: file.size || 0,
+      modified: file.modified || '',
+      language: file.language || 'Unknown',
+      description: file.description || '',
+    };
+
+    const context: Record<string, any> = {};
+    if (action.context) {
+      action.context.forEach((item) => {
+        context[item.key] = fileDetail;
+      });
+    }
+
+    onAction?.(action.name, context);
+  };
+
+  return (
+    <div
+      style={{
+        borderRadius: 12,
+        border: '1px solid #e8e8e8',
+        background: '#fff',
+        maxHeight: 400,
+        overflow: 'auto',
+      }}
+    >
+      <div style={{ padding: '12px 8px' }}>
+        {treeData.map((node) => (
+          <TreeNode
+            key={node.key}
+            node={node}
+            level={0}
+            selectedKey={selectedFile?.path}
+            onFileClick={handleFileClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// File Detail Card Component
+interface FileDetailCardProps {
+  file?: FileDetail;
+  onClose?: () => void;
+}
+
+const FileDetailCard: React.FC<FileDetailCardProps> = ({ file, onClose }) => {
+  if (!file) return null;
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const getLanguageColor = (lang: string) => {
+    const colors: Record<string, string> = {
+      TypeScript: '#3178c6',
+      JavaScript: '#f7df1e',
+      HTML: '#e34c26',
+      JSON: '#292929',
+      Markdown: '#083fa1',
+    };
+    return colors[lang] || '#666';
+  };
+
+  return (
+    <Card
+      size="small"
+      title={
+        <Space>
+          <FileOutlined style={{ color: '#1677ff' }} />
+          <Text strong>{file.name}</Text>
+        </Space>
+      }
+      extra={
+        onClose && <Button type="text" size="small" icon={<CloseOutlined />} onClick={onClose} />
+      }
+      style={{ borderRadius: 12 }}
+      styles={{ body: { padding: '16px' } }}
+    >
+      <Space direction="vertical" size={12} style={{ width: '100%' }}>
+        <div>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            Path
+          </Text>
+          <br />
+          <Text code style={{ fontSize: 13 }}>
+            {file.path}
+          </Text>
+        </div>
+
+        <div style={{ display: 'flex', gap: 24 }}>
+          <div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Size
+            </Text>
+            <br />
+            <Text style={{ fontSize: 13 }}>{formatSize(file.size)}</Text>
+          </div>
+          <div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Modified
+            </Text>
+            <br />
+            <Text style={{ fontSize: 13 }}>{file.modified}</Text>
+          </div>
+        </div>
+
+        <div>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            Language
+          </Text>
+          <br />
+          <Tag color={getLanguageColor(file.language)}>{file.language}</Tag>
+        </div>
+
+        {file.description && (
+          <div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Description
+            </Text>
+            <br />
+            <Text style={{ fontSize: 13 }}>{file.description}</Text>
+          </div>
+        )}
+      </Space>
+    </Card>
+  );
+};
+
+// Accordion Panel Component
+interface AccordionPanelProps {
+  panels?: Array<{ id: string; title: string; content: string }>;
+  children?: React.ReactNode;
+}
+
+const AccordionPanel: React.FC<AccordionPanelProps> = ({ panels, children }) => {
+  const panelData = panels && panels.length > 0 ? panels : PANEL_DATA;
+
+  const items: CollapseProps['items'] = panelData.map((panel, index) => ({
+    key: panel.id || String(index),
+    label: (
+      <Space>
+        <CheckCircleOutlined style={{ color: '#52c41a' }} />
+        <Text strong>{panel.title}</Text>
+      </Space>
+    ),
+    children: <Text style={{ fontSize: 13, whiteSpace: 'pre-wrap' }}>{panel.content}</Text>,
+    style: { marginBottom: 8, borderRadius: 8 },
+  }));
+
+  return (
+    <div style={{ minWidth: 300 }}>
+      <Collapse
+        accordion
+        items={items}
+        defaultActiveKey={['overview']}
+        style={{ background: '#fff' }}
+      />
+      {children}
+    </div>
+  );
+};
+
+// Main Container Component
+interface MainContainerProps {
+  children?: React.ReactNode;
+}
+
+const MainContainer: React.FC<MainContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        marginBlock: 16,
+        minWidth: 500,
+      }}
+    >
+      <Space vertical style={{ width: '100%' }} size={16}>
+        {children}
+      </Space>
+    </div>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Streaming Text Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// v0.8 Agent Command Definition
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SurfaceUpdateCommand: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'browser',
+    components: [
+      {
+        id: 'title',
+        component: {
+          Text: {
+            text: { literalString: 'Project File Browser' },
+            variant: { literalString: 'h1' },
+          },
+        },
+      },
+      {
+        id: 'file-tree',
+        component: {
+          FileTree: {
+            action: {
+              name: 'select_file',
+              context: [{ key: 'selectedFile', value: { path: '/browser/selectedFile' } }],
+            },
+            selectedFile: { path: '/browser/selectedFile' },
+          },
+        },
+      },
+      {
+        id: 'file-detail',
+        component: {
+          FileDetailCard: {
+            file: { path: '/browser/selectedFile' },
+          },
+        },
+      },
+      {
+        id: 'accordion-section',
+        component: {
+          AccordionPanel: {
+            panels: { path: '/browser/panels' },
+          },
+        },
+      },
+      {
+        id: 'root',
+        component: {
+          MainContainer: {
+            children: {
+              explicitList: ['title', 'file-tree', 'file-detail', 'accordion-section'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+const DataModelUpdateCommand: XAgentCommand_v0_8 = {
+  dataModelUpdate: {
+    surfaceId: 'browser',
+    contents: [
+      {
+        key: 'panels',
+        valueMap: PANEL_DATA.map((p) => ({
+          key: p.id,
+          valueString: JSON.stringify({
+            id: p.id,
+            title: p.title,
+            content: p.content,
+          }),
+        })),
+      },
+    ],
+  },
+};
+
+const BeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'browser',
+    root: 'root',
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// App Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'select_file') {
+      const { selectedFile } = payload.context || {};
+      if (selectedFile) {
+        onAgentCommand({
+          dataModelUpdate: {
+            surfaceId: 'browser',
+            contents: [
+              {
+                key: 'selectedFile',
+                valueMap: Object.entries(selectedFile).map(([k, v]) => ({
+                  key: k,
+                  valueString: String(v),
+                })),
+              },
+            ],
+          },
+        });
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    timestamp: timestampHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(SurfaceUpdateCommand);
+      onAgentCommand(DataModelUpdateCommand);
+      onAgentCommand(BeginRenderingCommand);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_8[] = [{ deleteSurface: { surfaceId: 'browser' } }];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [{ text: textHeader, timestamp: timestampHeader }].filter(
+          (item) => item.timestamp !== 0,
+        ),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          Text: TextComponent,
+          FileTree,
+          FileDetailCard,
+          AccordionPanel,
+          MainContainer,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 700 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/progressive.md b/packages/x/docs/x-card/demo/A2UI_v0.8/progressive.md
new file mode 100644
index 0000000000..133ddde952
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/progressive.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的渐进式加载示例。演示了如何分批次加载产品数据，并通过 `surfaceUpdate` 命令渐进式更新组件，实现流畅的加载动画效果。
+
+## en-US
+
+Progressive loading example of implementing A2UI v0.8 protocol with XCard. Demonstrates how to load product data in batches and progressively update components using `surfaceUpdate` commands to achieve smooth loading animations.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/progressive.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/progressive.tsx
new file mode 100644
index 0000000000..af0d8374da
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/progressive.tsx
@@ -0,0 +1,574 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Badge, Button, Card, Progress, Space, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+// ─── Mock Data: Product List (batch loading) ──────────────────────────────────────
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  category: string;
+  stock: number;
+  tag?: string;
+}
+
+const allProducts: Product[][] = [
+  [
+    {
+      id: 1,
+      name: 'Wireless Bluetooth Earphones',
+      price: 299,
+      category: 'Digital',
+      stock: 156,
+      tag: 'Hot',
+    },
+    { id: 2, name: 'Mechanical Keyboard', price: 459, category: 'Digital', stock: 89 },
+  ],
+  [
+    { id: 3, name: 'Smart Watch', price: 1299, category: 'Wearable', stock: 45, tag: 'New' },
+    { id: 4, name: 'Portable Power Bank', price: 99, category: 'Accessories', stock: 234 },
+  ],
+  [
+    {
+      id: 5,
+      name: 'Noise Cancelling Headphones',
+      price: 899,
+      category: 'Digital',
+      stock: 67,
+      tag: 'Recommended',
+    },
+    { id: 6, name: 'Wireless Charger', price: 149, category: 'Accessories', stock: 178 },
+  ],
+  [
+    { id: 7, name: 'Smart Speaker', price: 399, category: 'Home', stock: 112, tag: 'Hot' },
+    { id: 8, name: 'Fitness Tracker', price: 199, category: 'Wearable', stock: 256 },
+  ],
+];
+
+// ─── Role Configuration ────────────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── ProductCard Component (Product Card) ────────────────────────────────────────────
+interface ProductCardProps {
+  name?: string;
+  price?: number | string;
+  category?: string;
+  stock?: number | string;
+  tag?: string;
+  index?: number | string;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ name, price, category, stock, tag, index }) => {
+  const [visible, setVisible] = useState(false);
+
+  // v0.8 values may be passed as strings, needs conversion
+  const numPrice = typeof price === 'string' ? Number(price) : price;
+  const numStock = typeof stock === 'string' ? Number(stock) : stock;
+  const numIndex = typeof index === 'string' ? Number(index) : index;
+
+  useEffect(() => {
+    // Delayed display for progressive animation
+    const timer = setTimeout(
+      () => {
+        setVisible(true);
+      },
+      numIndex ? numIndex * 150 : 0,
+    );
+    return () => clearTimeout(timer);
+  }, [numIndex]);
+
+  return (
+    <Card
+      hoverable
+      style={{
+        width: '100%',
+        maxWidth: 320,
+        borderRadius: 12,
+        overflow: 'hidden',
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'translateY(0)' : 'translateY(20px)',
+        transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        border: '1px solid #f0f0f0',
+      }}
+      styles={{ body: { padding: 16 } }}
+    >
+      <Space vertical style={{ width: '100%' }} size={8}>
+        {/* Tag and name */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Typography.Text
+            strong
+            style={{ fontSize: 16, color: '#1a1a1a', flex: 1, lineHeight: '22px' }}
+          >
+            {name}
+          </Typography.Text>
+          {tag && (
+            <Tag
+              color="orange"
+              style={{
+                fontSize: 11,
+                padding: '0 8px',
+                lineHeight: '20px',
+                borderRadius: 8,
+                margin: 0,
+              }}
+            >
+              {tag}
+            </Tag>
+          )}
+        </div>
+
+        {/* Price */}
+        <div>
+          <Typography.Text style={{ fontSize: 20, fontWeight: 700, color: '#ff4d4f' }}>
+            ¥{numPrice}
+          </Typography.Text>
+        </div>
+
+        {/* Bottom info */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Badge
+            color="blue"
+            text={
+              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                {category}
+              </Typography.Text>
+            }
+          />
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            Stock: {numStock}
+          </Typography.Text>
+        </div>
+      </Space>
+    </Card>
+  );
+};
+
+// ─── ProductContainer Component (Product Container) ────────────────────────────────────────
+interface ProductContainerProps {
+  children?: React.ReactNode;
+}
+
+const ProductContainer: React.FC<ProductContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1px solid #e8e8e8',
+        padding: 20,
+        background: '#fafafa',
+        minWidth: 320,
+        maxWidth: 720,
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+          gap: 16,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+// ─── LoadingIndicator Component (Loading Indicator) ─────────────────────────────────────
+interface LoadingIndicatorProps {
+  progress?: number | string;
+  total?: number | string;
+  loading?: boolean | string;
+}
+
+const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
+  progress = 0,
+  total = 100,
+  loading,
+}) => {
+  // v0.8 values may be passed as strings, needs conversion
+  const numProgress = typeof progress === 'string' ? Number(progress) : progress;
+  const numTotal = typeof total === 'string' ? Number(total) : total;
+  const boolLoading = typeof loading === 'string' ? loading === 'true' : loading;
+
+  const percent = Math.round((numProgress / numTotal) * 100);
+
+  return (
+    <div
+      style={{
+        padding: '16px 20px',
+        background: '#fff',
+        borderRadius: 12,
+        marginBlock: 16,
+        border: '1px solid #e8e8e8',
+        minWidth: 320,
+        maxWidth: 720,
+      }}
+    >
+      <Space vertical style={{ width: '100%' }} size={12}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography.Text style={{ fontSize: 14, fontWeight: 500 }}>
+            {boolLoading ? 'Loading product data...' : 'Loading complete'}
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            {numProgress}/{numTotal} products
+          </Typography.Text>
+        </div>
+        <Progress
+          percent={percent}
+          status={boolLoading ? 'active' : 'success'}
+          strokeColor={{
+            '0%': '#108ee9',
+            '100%': '#87d068',
+          }}
+          showInfo={false}
+        />
+      </Space>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    // Clear previous timer
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    // Clear timer
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    // Reset state
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.8 Agent Command Definition
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// v0.8 command: Create loading indicator surface
+const CreateLoadingIndicatorSurface: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'loading-indicator',
+    components: [
+      {
+        id: 'root',
+        component: {
+          LoadingIndicator: {
+            progress: { literalString: '0' },
+            total: { literalString: '8' },
+            loading: { literalString: 'true' },
+          },
+        },
+      },
+    ],
+  },
+};
+
+// v0.8 command: Begin rendering loading indicator
+const BeginLoadingIndicator: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'loading-indicator',
+    root: 'root',
+  },
+};
+
+// v0.8 command: Update loading indicator
+const UpdateLoadingIndicator = (
+  progress: number,
+  total: number,
+  loading: boolean,
+): XAgentCommand_v0_8 => ({
+  surfaceUpdate: {
+    surfaceId: 'loading-indicator',
+    components: [
+      {
+        id: 'root',
+        component: {
+          LoadingIndicator: {
+            progress: { literalString: String(progress) },
+            total: { literalString: String(total) },
+            loading: { literalString: String(loading) },
+          },
+        },
+      },
+    ],
+  },
+});
+
+// v0.8 command: Delete loading indicator
+const DeleteLoadingIndicator: XAgentCommand_v0_8 = {
+  deleteSurface: {
+    surfaceId: 'loading-indicator',
+  },
+};
+
+// v0.8 command: Create product display surface (progressive update)
+const CreateProductSurface = (products: Product[]): XAgentCommand_v0_8 => {
+  const productComponents = products.map((product, idx) => ({
+    id: `product-${product.id}`,
+    component: {
+      ProductCard: {
+        name: { literalString: product.name },
+        price: { literalString: String(product.price) },
+        category: { literalString: product.category },
+        stock: { literalString: String(product.stock) },
+        tag: product.tag ? { literalString: product.tag } : undefined,
+        index: { literalString: String(idx) },
+      },
+    },
+  }));
+
+  return {
+    surfaceUpdate: {
+      surfaceId: 'progressive-demo',
+      components: [
+        ...productComponents,
+        {
+          id: 'root',
+          component: {
+            ProductContainer: {
+              children: { explicitList: products.map((p) => `product-${p.id}`) },
+            },
+          },
+        },
+      ],
+    },
+  };
+};
+
+// v0.8 command: Begin rendering product display
+const BeginProductSurface: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'progressive-demo',
+    root: 'root',
+  },
+};
+
+// v0.8 command: Delete product display
+const DeleteProductSurface: XAgentCommand_v0_8 = {
+  deleteSurface: {
+    surfaceId: 'progressive-demo',
+  },
+};
+
+// ─── App Component ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  // Command queue: Append new commands each time, entire array reference change triggers Box/Card useEffect
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const loadingTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const batchCountRef = useRef(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    // Append to end of queue, ensuring each command is processed by Box/Card
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  const welcomeText =
+    '🎉 Welcome to the progressive product showcase!\n\nProduct data will be loaded in batches, 2 products at a time. You can observe how components are displayed progressively.';
+  const completeText = '✅ All products loaded! Total 8 products loaded.';
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    timestamp: timestampHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(welcomeText);
+
+  const {
+    text: textFooter,
+    timestamp: timestampFooter,
+    run: runFooter,
+    reset: resetFooter,
+  } = useStreamText(completeText);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      // v0.8 command sequence: surfaceUpdate → beginRendering
+      // Command queue guarantees sequential processing, no setTimeout magic numbers needed
+      onAgentCommand(CreateLoadingIndicatorSurface);
+      onAgentCommand(BeginLoadingIndicator);
+      // Create product surface (initially empty) and start rendering immediately
+      onAgentCommand(CreateProductSurface([]));
+      onAgentCommand(BeginProductSurface);
+      // Start progressive loading
+      startProgressiveLoading();
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const startProgressiveLoading = useCallback(() => {
+    batchCountRef.current = 0;
+
+    // Accumulated loaded products
+    const loadedProducts: Product[] = [];
+
+    const loadNextBatch = () => {
+      if (batchCountRef.current >= allProducts.length) {
+        // Loading complete, update loading indicator state
+        onAgentCommand(UpdateLoadingIndicator(8, 8, false));
+        setTimeout(() => runFooter(), 500);
+        return;
+      }
+
+      const currentProducts = allProducts[batchCountRef.current];
+      // Accumulate products
+      loadedProducts.push(...currentProducts);
+
+      const progress = (batchCountRef.current + 1) * 2;
+      onAgentCommand(UpdateLoadingIndicator(progress, 8, true));
+
+      setTimeout(() => {
+        // v0.8: Use surfaceUpdate to update entire product list
+        onAgentCommand(CreateProductSurface([...loadedProducts]));
+      }, 50);
+
+      batchCountRef.current++;
+      loadingTimerRef.current = setTimeout(loadNextBatch, 1500);
+    };
+
+    loadNextBatch();
+  }, [runFooter]);
+
+  const handleReload = useCallback(() => {
+    if (loadingTimerRef.current) {
+      clearTimeout(loadingTimerRef.current);
+      loadingTimerRef.current = null;
+    }
+
+    resetHeader();
+    resetFooter();
+    batchCountRef.current = 0;
+
+    // Drive Surface cleanup via deleteSurface command, no longer directly manipulating setCard/setCommands
+    onAgentCommand(DeleteLoadingIndicator);
+    onAgentCommand(DeleteProductSurface);
+
+    // Reset command queue to avoid old command replay after key change
+    setCommandQueue([]);
+    setCard([]);
+    setSessionKey((prev) => prev + 1);
+  }, [resetHeader, resetFooter]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: timestampHeader },
+          { text: textFooter, timestamp: timestampFooter },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        components={{
+          ProductCard,
+          ProductContainer,
+          LoadingIndicator,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 800 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/streaming.md b/packages/x/docs/x-card/demo/A2UI_v0.8/streaming.md
new file mode 100644
index 0000000000..8e4394eabd
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/streaming.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.8 协议的流式内容与实时更新示例。演示了 AI 推荐结果的流式展示、组件逐步加载动画和加载进度指示。
+
+## en-US
+
+Streaming content and real-time updates example implementing A2UI v0.8 protocol with XCard. Demonstrates streaming display of AI recommendation results, progressive component loading animations, and loading progress indicators.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.8/streaming.tsx b/packages/x/docs/x-card/demo/A2UI_v0.8/streaming.tsx
new file mode 100644
index 0000000000..418caaf9f3
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.8/streaming.tsx
@@ -0,0 +1,751 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_8 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, Card, List, Progress, Rate, Spin, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── Restaurant Data ────────────────────────────────────────────────────────────────────
+interface RestaurantItem {
+  id: string;
+  name: string;
+  cuisine: string;
+  rating: number;
+  priceRange: string;
+  distance: string;
+  tags: string[];
+  description: string;
+  image?: string;
+}
+
+const RESTAURANT_DATA: RestaurantItem[] = [
+  {
+    id: 'r1',
+    name: 'Jiangnan Bistro',
+    cuisine: 'Jiangsu-Zhejiang',
+    rating: 4.8,
+    priceRange: '¥80-150',
+    distance: '500m',
+    tags: ['Local Cuisine', 'Elegant Atmosphere'],
+    description:
+      'Authentic Jiangsu-Zhejiang flavors, locally sourced ingredients, traditional cooking. Signature dishes: Braised Pork, Steamed Sea Bass.',
+  },
+  {
+    id: 'r2',
+    name: 'Sichuan House',
+    cuisine: 'Sichuan',
+    rating: 4.6,
+    priceRange: '¥60-120',
+    distance: '800m',
+    tags: ['Spicy & Flavorful', 'Great Value'],
+    description:
+      'Authentic Sichuan cuisine, spicy and aromatic. Recommended: Sliced Fish in Hot Chili Oil, Mapo Tofu, Twice-Cooked Pork.',
+  },
+  {
+    id: 'r3',
+    name: 'Sakura Japanese',
+    cuisine: 'Japanese',
+    rating: 4.9,
+    priceRange: '¥150-300',
+    distance: '1.2km',
+    tags: ['Exquisite Cuisine', 'Date Night'],
+    description:
+      'Fresh sashimi, exquisite sushi, fusion of traditional and modern Japanese. Chef from Tokyo Ginza.',
+  },
+  {
+    id: 'r4',
+    name: 'Italian Garden',
+    cuisine: 'Western',
+    rating: 4.5,
+    priceRange: '¥120-250',
+    distance: '900m',
+    tags: ['Romantic Atmosphere', 'Handmade Pasta'],
+    description:
+      'Authentic Italian flavors, handmade pasta, imported ingredients. Signature: Creamy Mushroom Pasta, Tiramisu.',
+  },
+];
+
+// ─── Text Component ────────────────────────────────────────────────────────────────
+interface TextProps {
+  text?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | 'success' | string;
+  children?: React.ReactNode;
+  status?: string;
+}
+
+const Text: React.FC<TextProps> = ({ text, variant, children, status }) => {
+  const content = text ?? children;
+  if (!content) return null;
+  const styleMap: Record<string, React.CSSProperties> = {
+    h1: { fontSize: 20, fontWeight: 700, margin: '0 0 12px' },
+    h2: { fontSize: 17, fontWeight: 600, margin: '0 0 8px' },
+    h3: { fontSize: 15, fontWeight: 600, margin: '0 0 6px' },
+    body: { fontSize: 14, margin: 0 },
+    success: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: '#52c41a',
+      margin: '4px 0 0',
+      padding: '6px 10px',
+      borderRadius: 8,
+      background: '#f6ffed',
+      border: '1px solid #b7eb8f',
+    },
+  };
+  const style = styleMap[variant ?? 'body'] ?? styleMap.body;
+  const finalStyle = status === 'success' ? styleMap.success : style;
+
+  return <p style={finalStyle}>{content}</p>;
+};
+
+// ─── LoadingProgress Component ──────────────────────────────────────────────────────
+interface LoadingProgressProps {
+  percent?: number;
+  status?: 'active' | 'success' | 'normal';
+  text?: string;
+}
+
+const LoadingProgress: React.FC<LoadingProgressProps> = ({
+  percent = 0,
+  status = 'active',
+  text,
+}) => {
+  // dataModel stores values as strings, needs to be converted to numbers
+  const numericPercent = typeof percent === 'string' ? parseFloat(percent as string) : percent;
+  return (
+    <div
+      style={{
+        padding: '16px 20px',
+        background: '#fff',
+        borderRadius: 12,
+        border: '1px solid #f0f0f0',
+        marginBottom: 16,
+        minWidth: 320,
+        maxWidth: 480,
+      }}
+    >
+      <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          {text || 'Loading recommendations...'}
+        </Typography.Text>
+        <Typography.Text style={{ fontSize: 13, fontWeight: 500 }}>
+          {Math.round(numericPercent)}%
+        </Typography.Text>
+      </div>
+      <Progress
+        percent={numericPercent}
+        status={status}
+        showInfo={false}
+        strokeColor={{
+          '0%': '#108ee9',
+          '100%': '#87d068',
+        }}
+      />
+    </div>
+  );
+};
+
+// ─── RestaurantCard Component ────────────────────────────────────────────────────────
+interface RestaurantCardProps {
+  restaurant?: RestaurantItem;
+  index?: number;
+  isLoading?: boolean;
+}
+
+const RestaurantCard: React.FC<RestaurantCardProps> = ({ restaurant, index = 0, isLoading }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!isLoading && restaurant) {
+      // Progressive loading animation delay
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, index * 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading, restaurant, index]);
+
+  if (isLoading) {
+    return (
+      <Card
+        style={{
+          width: '100%',
+          borderRadius: 12,
+          opacity: 0.6,
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'center', padding: 20 }}>
+          <Spin tip="Loading..." />
+        </div>
+      </Card>
+    );
+  }
+
+  if (!restaurant) return null;
+
+  return (
+    <Card
+      style={{
+        width: '100%',
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'translateY(0)' : 'translateY(20px)',
+        transition: 'all 0.4s ease-out',
+        marginBottom: 12,
+      }}
+      styles={{ body: { padding: '16px 20px' } }}
+    >
+      <div style={{ display: 'flex', gap: 16 }}>
+        {/* Left icon */}
+        <div
+          style={{
+            width: 64,
+            height: 64,
+            borderRadius: 12,
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            fontSize: 28,
+          }}
+        >
+          🍽️
+        </div>
+
+        {/* Right content */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+            <Typography.Text strong style={{ fontSize: 16 }}>
+              {restaurant.name}
+            </Typography.Text>
+            <Tag color="blue" style={{ margin: 0 }}>
+              {restaurant.cuisine}
+            </Tag>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
+            <Rate disabled defaultValue={restaurant.rating} style={{ fontSize: 12 }} />
+            <Typography.Text style={{ fontSize: 13, color: '#faad14' }}>
+              {restaurant.rating}
+            </Typography.Text>
+            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+              | {restaurant.distance}
+            </Typography.Text>
+            <Typography.Text style={{ fontSize: 13, color: '#52c41a' }}>
+              {restaurant.priceRange}
+            </Typography.Text>
+          </div>
+
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, display: 'block', marginBottom: 8 }}
+            ellipsis
+          >
+            {restaurant.description}
+          </Typography.Text>
+
+          <div style={{ display: 'flex', gap: 6 }}>
+            {restaurant.tags.map((tag, i) => (
+              <Tag
+                key={i}
+                style={{
+                  fontSize: 11,
+                  borderRadius: 6,
+                  background: '#f5f5f5',
+                  border: 'none',
+                  margin: 0,
+                }}
+              >
+                {tag}
+              </Tag>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+// ─── RestaurantList Component ────────────────────────────────────────────────────────
+interface RestaurantListProps {
+  restaurants?: RestaurantItem[];
+  loadingProgress?: number;
+  isStreaming?: boolean;
+}
+
+const RestaurantList: React.FC<RestaurantListProps> = ({
+  restaurants = [],
+  loadingProgress = 0,
+  isStreaming = false,
+}) => {
+  // dataModel stores values as JSON strings, needs to be parsed
+  const parsedRestaurants: RestaurantItem[] = (() => {
+    if (typeof restaurants === 'string') {
+      try {
+        return JSON.parse(restaurants);
+      } catch {
+        return [];
+      }
+    }
+    return Array.isArray(restaurants) ? restaurants : [];
+  })();
+
+  // dataModel stores values as strings, needs to be converted to numbers
+  const numericProgress =
+    typeof loadingProgress === 'string' ? parseFloat(loadingProgress) : loadingProgress;
+
+  // dataModel stores values as strings 'true'/'false', needs to be converted to booleans
+  const boolStreaming = typeof isStreaming === 'string' ? isStreaming === 'true' : isStreaming;
+
+  const visibleRestaurants = boolStreaming
+    ? parsedRestaurants.slice(0, Math.ceil((numericProgress / 100) * parsedRestaurants.length))
+    : parsedRestaurants;
+
+  return (
+    <div
+      style={{
+        minWidth: 320,
+        maxWidth: 480,
+      }}
+    >
+      {/* Progress bar */}
+      {boolStreaming && numericProgress < 100 && (
+        <LoadingProgress
+          percent={numericProgress}
+          text="AI is filtering recommendations for you..."
+        />
+      )}
+
+      {/* Restaurant list */}
+      <List
+        dataSource={visibleRestaurants}
+        renderItem={(item, index) => (
+          <RestaurantCard restaurant={item} index={index} isLoading={false} />
+        )}
+      />
+
+      {/* Loading complete message */}
+      {!boolStreaming && parsedRestaurants.length > 0 && (
+        <div
+          style={{
+            textAlign: 'center',
+            padding: '12px 0',
+            opacity: 0.8,
+          }}
+        >
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            ✅ Recommended {parsedRestaurants.length} restaurants for you
+          </Typography.Text>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── Container Component ────────────────────────────────────────────────────────────
+interface ContainerProps {
+  children?: React.ReactNode;
+}
+
+const Container: React.FC<ContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px 20px 16px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        marginBlock: 16,
+        minWidth: 320,
+        maxWidth: 520,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 80);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─── Progress Hook ────────────────────────────────────────────────────────────────
+const useProgress = () => {
+  const [progress, setProgress] = useState(0);
+  const [progressStatus, setProgressStatus] = useState<'active' | 'success'>('active');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const start = useCallback(() => {
+    setProgress(0);
+    setProgressStatus('active');
+
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          if (timerRef.current) clearInterval(timerRef.current);
+          setProgressStatus('success');
+          return 100;
+        }
+        // Simulate real loading: uneven speed
+        const increment = Math.random() * 8 + 2;
+        return Math.min(prev + increment, 100);
+      });
+    }, 150);
+  }, []);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setProgress(0);
+    setProgressStatus('active');
+  }, []);
+
+  return { progress, progressStatus, start, reset };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Streaming Recommendation Text Content
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const INTRO_TEXT = `Hello! I'm your food recommendation assistant 🍽️
+
+Based on your location and preferences, I'm filtering the best restaurants nearby...
+
+Here are my recommendation criteria:
+
+1. **Distance First**: Prioritize restaurants within 15 minutes walking distance
+2. **Quality Guaranteed**: Select top-rated restaurants with 4.5+ ratings
+3. **Diverse Flavors**: Covering Chinese, Japanese, Western and more cuisines
+
+Generating personalized recommendations for you...`;
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.8 Agent Command Definition
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// Create progress bar command
+const createProgressCommand = (percent: number): XAgentCommand_v0_8 => ({
+  dataModelUpdate: {
+    surfaceId: 'recommendation',
+    contents: [
+      {
+        key: 'progress',
+        valueString: String(percent),
+      },
+    ],
+  },
+});
+
+// Create restaurant card command (incremental update)
+const createRestaurantCommand = (restaurants: RestaurantItem[]): XAgentCommand_v0_8 => ({
+  dataModelUpdate: {
+    surfaceId: 'recommendation',
+    contents: [
+      {
+        key: 'restaurants',
+        valueString: JSON.stringify(
+          restaurants.map((r) => ({
+            id: r.id,
+            name: r.name,
+            cuisine: r.cuisine,
+            rating: r.rating,
+            priceRange: r.priceRange,
+            distance: r.distance,
+            description: r.description,
+            tags: r.tags,
+          })),
+        ),
+      },
+    ],
+  },
+});
+
+// Surface Update command
+const SurfaceUpdateCommand: XAgentCommand_v0_8 = {
+  surfaceUpdate: {
+    surfaceId: 'recommendation',
+    components: [
+      {
+        id: 'title',
+        component: {
+          Text: {
+            text: { literalString: 'AI Food Recommendations' },
+            variant: { literalString: 'h1' },
+          },
+        },
+      },
+      {
+        id: 'progress',
+        component: {
+          LoadingProgress: {
+            percent: { path: '/progress' },
+            status: { literalString: 'active' },
+          },
+        },
+      },
+      {
+        id: 'restaurant-list',
+        component: {
+          RestaurantList: {
+            restaurants: { path: '/restaurants' },
+            loadingProgress: { path: '/progress' },
+            isStreaming: { path: '/isStreaming' },
+          },
+        },
+      },
+      {
+        id: 'root',
+        component: {
+          Container: {
+            children: {
+              explicitList: ['title', 'progress', 'restaurant-list'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+// Begin Rendering command
+const BeginRenderingCommand: XAgentCommand_v0_8 = {
+  beginRendering: {
+    surfaceId: 'recommendation',
+    root: 'root',
+  },
+};
+
+// ─── App Component ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_8[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  // Streaming text state
+  const {
+    text: streamText,
+    streamStatus,
+    timestamp: textTimestamp,
+    run: runStream,
+    reset: resetStream,
+  } = useStreamText(INTRO_TEXT);
+
+  // Progress state
+  const { progress, progressStatus, start: startProgress, reset: resetProgress } = useProgress();
+
+  // Loaded restaurants
+  const [loadedRestaurants, setLoadedRestaurants] = useState<RestaurantItem[]>([]);
+
+  const onAgentCommand = (command: XAgentCommand_v0_8) => {
+    if ('surfaceUpdate' in command) {
+      const surfaceId = command.surfaceUpdate.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  // Handle action
+  const handleAction = (payload: ActionPayload) => {
+    console.log('Action:', payload);
+  };
+
+  // Reset entire flow
+  const handleReload = useCallback(() => {
+    resetStream();
+    resetProgress();
+    setLoadedRestaurants([]);
+
+    const deleteCommands: XAgentCommand_v0_8[] = [
+      { deleteSurface: { surfaceId: 'recommendation' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetStream, resetProgress]);
+
+  // Start streaming text
+  useEffect(() => {
+    runStream();
+  }, [sessionKey, runStream]);
+
+  // After text streaming is complete, start loading components
+  useEffect(() => {
+    if (streamStatus === 'FINISHED') {
+      // Send Surface Update and Begin Rendering
+      onAgentCommand(SurfaceUpdateCommand);
+
+      // Initialize data model: set isStreaming to true
+      onAgentCommand({
+        dataModelUpdate: {
+          surfaceId: 'recommendation',
+          contents: [
+            { key: 'isStreaming', valueString: 'true' },
+            { key: 'restaurants', valueString: '[]' },
+          ],
+        },
+      });
+
+      onAgentCommand(BeginRenderingCommand);
+
+      // Start progress animation
+      startProgress();
+    }
+  }, [streamStatus, sessionKey, startProgress]);
+
+  // When progress updates, incrementally add restaurant cards
+  useEffect(() => {
+    if (progress > 0 && progressStatus === 'active') {
+      // Update progress
+      onAgentCommand(createProgressCommand(progress));
+
+      // Calculate how many restaurants to show based on progress
+      const visibleCount = Math.ceil((progress / 100) * RESTAURANT_DATA.length);
+      const newRestaurants = RESTAURANT_DATA.slice(0, visibleCount);
+
+      // Incrementally update restaurant list
+      if (newRestaurants.length !== loadedRestaurants.length) {
+        setLoadedRestaurants(newRestaurants);
+        onAgentCommand(createRestaurantCommand(newRestaurants));
+      }
+    }
+  }, [progress, progressStatus]);
+
+  // Progress complete
+  useEffect(() => {
+    if (progressStatus === 'success' && loadedRestaurants.length === RESTAURANT_DATA.length) {
+      // Set isStreaming to false
+      onAgentCommand({
+        dataModelUpdate: {
+          surfaceId: 'recommendation',
+          contents: [{ key: 'isStreaming', valueString: 'false' }],
+        },
+      });
+    }
+  }, [progressStatus, loadedRestaurants.length]);
+
+  const items = [
+    {
+      content: {
+        texts: [{ text: streamText, timestamp: textTimestamp }].filter(
+          (item) => item.timestamp !== 0,
+        ),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Refresh Recommendations
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          Text,
+          LoadingProgress,
+          RestaurantCard,
+          RestaurantList,
+          Container,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 800 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/basic.md b/packages/x/docs/x-card/demo/A2UI_v0.9/basic.md
new file mode 100644
index 0000000000..8048cb3d57
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/basic.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的基础示例。演示了如何使用 `XAgentCommand_v0_9` 命令配合本地 `catalog.json` 来创建咖啡预订场景的交互卡片。v0.9 版本引入了更简洁的命令结构和 catalog 机制。
+
+## en-US
+
+Basic example of implementing A2UI v0.9 protocol with XCard. Demonstrates how to use `XAgentCommand_v0_9` commands with a local `catalog.json` to create an interactive card for a coffee booking scenario. The v0.9 version introduces a more concise command structure and catalog mechanism.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/basic.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/basic.tsx
new file mode 100644
index 0000000000..16f6cf46d5
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/basic.tsx
@@ -0,0 +1,913 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, Catalog, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { registerCatalog, XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, DatePicker, Radio, Space, Tag, Typography } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// Import local catalog schema
+import localCatalog from './catalog.json';
+
+// Register local catalog
+registerCatalog(localCatalog as unknown as Catalog);
+
+const contentHeader =
+  'Hello! Welcome to our online booking service 🎉\n\n Please select your preferred date and time, and we will arrange the best seat for you. We look forward to seeing you!';
+const orderConfirmation =
+  '✅ Booking confirmed! Your order has been confirmed. We look forward to seeing you!';
+
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── Text Component ────────────────────────────────────────────────────────────────
+interface TextProps {
+  text?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | string;
+  children?: React.ReactNode;
+}
+
+const Text: React.FC<TextProps> = ({ text, variant, children }) => {
+  const content = text ?? children;
+  if (!content) return null;
+  const styleMap: Record<string, React.CSSProperties> = {
+    h1: { fontSize: 20, fontWeight: 700, margin: '0 0 12px' },
+    h2: { fontSize: 17, fontWeight: 600, margin: '0 0 8px' },
+    h3: { fontSize: 15, fontWeight: 600, margin: '0 0 6px' },
+    body: { fontSize: 14, margin: 0 },
+    success: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: '#52c41a',
+      margin: '4px 0 0',
+      padding: '6px 10px',
+      borderRadius: 8,
+      background: '#f6ffed',
+      border: '1px solid #b7eb8f',
+    },
+  };
+  const style = styleMap[variant ?? 'body'] ?? styleMap.body;
+  return <p style={style}>{content}</p>;
+};
+
+// ─── DateTimeInput Component ───────────────────────────────────────────────────────
+interface DateTimeInputProps {
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+  status?: 'success';
+  onAction?: (name: string, context: Record<string, any>) => void;
+}
+
+const DateTimeInput: React.FC<DateTimeInputProps> = ({ action, onAction, status }) => {
+  const [dateValue, setDateValue] = useState<Dayjs | null>(dayjs());
+  const disabled = status === 'success';
+
+  const handleChange = (val: Dayjs | null) => {
+    setDateValue(val);
+    if (!action?.event?.name || !val) return;
+
+    // Construct context based on action.event.context keys
+    const context: Record<string, any> = {};
+    if (action.event.context) {
+      // The key in context is the data field that the component needs to pass
+      // For example, { time: { path: '/booking/res/time' } } contains 'time'
+      Object.keys(action.event.context).forEach((key) => {
+        context[key] = val.toISOString();
+      });
+    }
+
+    onAction?.(action.event.name, context);
+  };
+
+  return (
+    <DatePicker
+      value={dateValue}
+      disabled={disabled}
+      onChange={handleChange}
+      format="YYYY-MM-DD"
+      placeholder="Select date"
+      style={{ width: '100%' }}
+    />
+  );
+};
+
+// ─── BookForm Component ────────────────────────────────────────────────────────────
+interface BookFormProps {
+  children?: React.ReactNode;
+}
+
+const BookForm: React.FC<BookFormProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px 20px 16px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        minWidth: 280,
+        marginBlock: 16,
+        maxWidth: 400,
+      }}
+    >
+      <Space vertical style={{ width: '100%' }} size={12}>
+        {children}
+      </Space>
+    </div>
+  );
+};
+
+interface ActionButtonProps {
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+  onAction?: (name: string, context: Record<string, any>) => void;
+  variant?: string;
+  children?: React.ReactNode;
+  status?: 'success' | 'error' | 'loading';
+  res?: any; // res data bound from dataModel
+  [key: string]: any;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  action,
+  onAction,
+  variant,
+  status: currentStatus,
+  children,
+  res,
+  ...rest
+}) => {
+  const handleClick = () => {
+    const eventName = action?.event?.name;
+    if (!eventName || !onAction) return;
+
+    // Business logic validation: determine status based on res data
+    // res and status are both passed as props after being resolved from dataModel by resolvePropsV09
+    const context: Record<string, any> = {};
+    if (!res?.time || !res?.coffee) {
+      context.status = 'error';
+      context.errorMessage = 'Please select date and coffee first';
+    } else {
+      context.status = 'success';
+      context.res = res;
+    }
+
+    onAction(eventName, context);
+  };
+
+  return (
+    <Button
+      {...rest}
+      disabled={currentStatus === 'success'}
+      type={variant === 'primary' ? 'primary' : undefined}
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
+  );
+};
+
+// ─── CoffeeList Component ──────────────────────────────────────────────────────────
+interface CoffeeItem {
+  id?: string | number;
+  name: string;
+  description?: string;
+  price?: number | string;
+  image?: string;
+  tag?: string;
+}
+
+interface CoffeeListProps {
+  list?: CoffeeItem[];
+  description?: string;
+  /** Currently selected item id (controlled) */
+  value?: string | number;
+  status?: 'success';
+  /** Card internal action trigger */
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+}
+
+const CoffeeList: React.FC<CoffeeListProps> = ({ list, description, onAction, status, action }) => {
+  if (!list || list.length === 0) return null;
+
+  const handleSelect = (itemId: string | number) => {
+    if (!action?.event?.name) return;
+
+    const selectedCoffee = list.find((item, index) => (item.id ?? index) === itemId);
+    if (!selectedCoffee) return;
+
+    // Construct context based on action.event.context keys
+    const context: Record<string, any> = {};
+    if (action.event.context) {
+      Object.keys(action.event.context).forEach((key) => {
+        // The key in context is the data field that the component needs to pass
+        // For example, { coffee: { path: '/booking/res/coffee' } } contains 'coffee'
+        context[key] = selectedCoffee;
+      });
+    }
+
+    onAction?.(action.event.name, context);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+      }}
+    >
+      {description && (
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          📋 {description}
+        </Typography.Text>
+      )}
+      <Radio.Group
+        onChange={(e) => handleSelect(e.target.value)}
+        style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}
+        disabled={status === 'success'}
+        options={list.map((item, index) => ({
+          value: item.id ?? index,
+          label: (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                width: 300,
+                gap: 12,
+                padding: '10px 12px',
+                borderRadius: 12,
+                background: '#fafafa',
+                border: '1px solid #f0f0f0',
+                transition: 'background 0.2s',
+              }}
+            >
+              {/* Image / Placeholder icon */}
+              <div
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 10,
+                  background: 'linear-gradient(135deg, #6b3520 0%, #c8855a 100%)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                  overflow: 'hidden',
+                }}
+              >
+                {item.image ? (
+                  <img
+                    src={item.image}
+                    alt={item.name}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                ) : (
+                  <span style={{ fontSize: 24 }}>☕</span>
+                )}
+              </div>
+
+              {/* Text information */}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
+                  <Typography.Text
+                    strong
+                    style={{ fontSize: 14, color: '#1a1a1a', lineHeight: '20px' }}
+                  >
+                    {item.name}
+                  </Typography.Text>
+                  {item.tag && (
+                    <Tag
+                      style={{
+                        fontSize: 11,
+                        padding: '0 6px',
+                        lineHeight: '18px',
+                        borderRadius: 8,
+                        color: '#d46b08',
+                        background: '#fff7e6',
+                        border: '1px solid #ffd591',
+                        margin: 0,
+                      }}
+                    >
+                      {item.tag}
+                    </Tag>
+                  )}
+                </div>
+                {item.description && (
+                  <Typography.Text
+                    type="secondary"
+                    style={{ fontSize: 12, lineHeight: '18px', display: 'block' }}
+                    ellipsis
+                  >
+                    {item.description}
+                  </Typography.Text>
+                )}
+              </div>
+
+              {/* Price */}
+              {item.price !== undefined && (
+                <Typography.Text
+                  style={{
+                    fontSize: 15,
+                    fontWeight: 700,
+                    color: '#d46b08',
+                    flexShrink: 0,
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  ¥{item.price}
+                </Typography.Text>
+              )}
+            </div>
+          ),
+        }))}
+      />
+    </div>
+  );
+};
+
+// ─── CoffeeResultCard Component ────────────────────────────────────────────────────
+interface CoffeeResultCardProps {
+  name?: string;
+  description?: string;
+  price?: number | string;
+  tag?: string;
+  image?: string;
+  date?: string;
+}
+
+const CoffeeResultCard: React.FC<CoffeeResultCardProps> = ({
+  name,
+  description,
+  price,
+  tag,
+  image,
+  date,
+}) => {
+  const formattedDate = date ? dayjs(date).format('YYYY-MM-DD HH:mm') : '';
+
+  return (
+    <div
+      style={{
+        borderRadius: 20,
+        overflow: 'hidden',
+        background: 'linear-gradient(145deg, #3d1f0d 0%, #6b3520 50%, #8b5a2b 100%)',
+        boxShadow: '0 8px 32px rgba(61,31,13,0.35)',
+        minWidth: 280,
+        maxWidth: 380,
+        position: 'relative',
+      }}
+    >
+      {/* Top decorative glow */}
+      <div
+        style={{
+          position: 'absolute',
+          top: -40,
+          right: -40,
+          width: 160,
+          height: 160,
+          borderRadius: '50%',
+          background: 'rgba(255,255,255,0.06)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* Coffee icon area */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '28px 24px 16px',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            width: 80,
+            height: 80,
+            borderRadius: 20,
+            background: 'rgba(255,255,255,0.12)',
+            border: '2px solid rgba(255,255,255,0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
+          }}
+        >
+          {image ? (
+            <img
+              src={image}
+              alt={name}
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            />
+          ) : (
+            <span style={{ fontSize: 40 }}>☕</span>
+          )}
+        </div>
+      </div>
+
+      {/* Content area */}
+      <div style={{ padding: '0 24px 24px' }}>
+        {/* Title row */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            marginBottom: 8,
+          }}
+        >
+          <Typography.Text
+            style={{
+              fontSize: 22,
+              fontWeight: 700,
+              color: '#fff',
+              letterSpacing: 0.5,
+            }}
+          >
+            {name ?? 'Unknown Coffee'}
+          </Typography.Text>
+          {tag && (
+            <Tag
+              style={{
+                background: 'rgba(255,200,100,0.25)',
+                border: '1px solid rgba(255,200,100,0.5)',
+                color: '#ffd580',
+                fontSize: 11,
+                padding: '0 7px',
+                lineHeight: '20px',
+                borderRadius: 10,
+              }}
+            >
+              {tag}
+            </Tag>
+          )}
+        </div>
+
+        {/* Description */}
+        {description && (
+          <Typography.Text
+            style={{
+              display: 'block',
+              textAlign: 'center',
+              fontSize: 13,
+              color: 'rgba(255,255,255,0.65)',
+              marginBottom: 16,
+            }}
+          >
+            {description}
+          </Typography.Text>
+        )}
+
+        {/* Divider */}
+        <div
+          style={{
+            height: 1,
+            background: 'rgba(255,255,255,0.12)',
+            margin: '0 0 16px',
+          }}
+        />
+
+        {/* Price & date info */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          {price !== undefined ? (
+            <div>
+              <Typography.Text
+                style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', display: 'block' }}
+              >
+                Price
+              </Typography.Text>
+              <Typography.Text style={{ fontSize: 20, fontWeight: 700, color: '#ffd580' }}>
+                ¥{price}
+              </Typography.Text>
+            </div>
+          ) : (
+            <div />
+          )}
+
+          {formattedDate && (
+            <div style={{ textAlign: 'right' }}>
+              <Typography.Text
+                style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', display: 'block' }}
+              >
+                Booking Time
+              </Typography.Text>
+              <Typography.Text style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>
+                {formattedDate}
+              </Typography.Text>
+            </div>
+          )}
+        </div>
+
+        {/* Bottom success tag */}
+        <div
+          style={{
+            marginTop: 16,
+            padding: '8px 14px',
+            borderRadius: 12,
+            background: 'rgba(82,196,26,0.15)',
+            border: '1px solid rgba(82,196,26,0.35)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
+          <span style={{ fontSize: 14 }}>✅</span>
+          <Typography.Text style={{ fontSize: 13, color: '#95de64', fontWeight: 500 }}>
+            Booking confirmed! We look forward to seeing you!
+          </Typography.Text>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─── Agent Commands ───────────────────────────────────────────────────────────────
+const CreateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'booking',
+    catalogId: 'local://coffee_booking_catalog.json',
+  },
+};
+
+const UpdateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'booking',
+    components: [
+      {
+        id: 'title',
+        component: 'Text',
+        text: 'Coffee Shop Order',
+        variant: 'h1',
+      },
+      {
+        id: 'datetime',
+        component: 'DateTimeInput',
+        status: { path: '/booking/status' },
+        action: {
+          event: {
+            name: 'select_date',
+            context: {
+              time: {
+                path: '/booking/res/time',
+              },
+            },
+          },
+        },
+      },
+      {
+        id: 'submit-text',
+        component: 'Text',
+        text: 'Confirm Order',
+      },
+      {
+        component: 'CoffeeList',
+        status: { path: '/booking/status' },
+        list: { path: '/booking/list/data' },
+        description: { path: '/booking/list/description' },
+        id: 'coffee_list',
+        action: {
+          event: {
+            name: 'select_coffee',
+            context: {
+              coffee: {
+                path: '/booking/res/coffee',
+              },
+            },
+          },
+        },
+      },
+      {
+        id: 'status-text',
+        component: 'Text',
+        status: { path: '/booking/status' },
+        variant: 'success',
+      },
+      {
+        id: 'submit-btn',
+        component: 'ActionButton',
+        child: 'submit-text',
+        variant: 'primary',
+        status: { path: '/booking/status' },
+        res: { path: '/booking/res' },
+        action: {
+          event: {
+            name: 'confirm_booking',
+            context: {
+              status: {
+                path: '/booking/status',
+              },
+              res: {
+                path: '/booking/res',
+              },
+            },
+          },
+        },
+      },
+      {
+        id: 'root',
+        component: 'BookForm',
+        children: ['title', 'datetime', 'coffee_list', 'status-text', 'submit-btn'],
+      },
+    ],
+  },
+};
+
+const UpdateModel: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'booking',
+    path: '/booking',
+    value: {
+      res: {
+        time: new Date().toISOString(), // Initialize to current date
+      },
+      list: {
+        description: 'Coffee List',
+        data: [
+          {
+            id: 1,
+            name: 'Latte',
+            description: 'Espresso + Steamed Milk, smooth and silky',
+            price: 32,
+            tag: 'Hot',
+          },
+          { id: 2, name: 'Americano', description: 'Pure bitter aroma, refreshing', price: 25 },
+          {
+            id: 3,
+            name: 'Cappuccino',
+            description: 'Rich foam, classic Italian style',
+            price: 30,
+            tag: 'Recommended',
+          },
+        ],
+      },
+    },
+  },
+};
+
+// ─── Result Card Configuration ─────────────────────────────────────────────────────
+const CreateResultCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'result',
+    catalogId: 'local://coffee_booking_catalog.json',
+  },
+};
+
+const UpdateResultCard = (res: any): XAgentCommand_v0_9 => {
+  return {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'result',
+      components: [
+        {
+          id: 'result-card',
+          component: 'CoffeeResultCard',
+          name: res?.coffee?.name,
+          description: res?.coffee?.description,
+          price: res?.coffee?.price,
+          tag: res?.coffee?.tag,
+          image: res?.coffee?.image,
+          date: res?.time,
+        },
+        {
+          id: 'root',
+          component: 'BookForm',
+          children: ['result-card'],
+        },
+      ],
+    },
+  };
+};
+
+// ─── App ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  // Command queue: each time a new command is appended, the entire array reference changes to trigger Box/Card's useEffect
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    // Append to end of queue, ensuring each command is processed by Box/Card
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  /** Handle Card internal action events (fully automated) */
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'confirm_booking') {
+      const { res, status } = payload.context || {};
+
+      // Only show result card on success
+      if (status === 'success' && res) {
+        // 1. Show confirmation text
+        runFooter();
+
+        // 2. Delete booking form card
+        onAgentCommand({
+          version: 'v0.9',
+          deleteSurface: {
+            surfaceId: 'booking',
+          },
+        });
+
+        // 3. Create and update result card
+        onAgentCommand(CreateResultCard);
+        onAgentCommand(UpdateResultCard(res));
+      } else if (status === 'error') {
+        console.log('❌ Booking failed:', payload.context?.errorMessage);
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    timestamp: timestampHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  const {
+    text: textFooter,
+    timestamp: timestampFooter,
+    run: runFooter,
+    reset: resetFooter,
+  } = useStreamText(orderConfirmation);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      // Send commands in A2UI v0.9 spec order, command queue ensures sequential processing, no setTimeout needed
+      onAgentCommand(CreateCard);
+      onAgentCommand(UpdateCard);
+      onAgentCommand(UpdateModel);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  // Reload (complete reset)
+  const handleReload = useCallback(() => {
+    resetHeader();
+    resetFooter();
+
+    // Drive Surface cleanup via deleteSurface command
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'booking' } },
+      { version: 'v0.9', deleteSurface: { surfaceId: 'result' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader, resetFooter]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: timestampHeader },
+          { text: textFooter, timestamp: timestampFooter },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          Text,
+          DateTimeInput,
+          BookForm,
+          ActionButton,
+          CoffeeList,
+          CoffeeResultCard,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 620 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-cart.json b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-cart.json
new file mode 100644
index 0000000000..e939bdcbb6
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-cart.json
@@ -0,0 +1,384 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "local://cart_demo_catalog.json",
+  "title": "Shopping Cart Demo Catalog",
+  "description": "Custom catalog for shopping cart multi-card synchronization demo.",
+  "catalogId": "local://cart_demo_catalog.json",
+  "components": {
+    "Text": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "Text"
+        },
+        "text": {
+          "description": "The text content to display.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "variant": {
+          "type": "string",
+          "description": "A hint for the base text style.",
+          "enum": ["h1", "h2", "h3", "body", "success", "price", "discount"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "ProductListCard": {
+      "type": "object",
+      "description": "A card displaying available products for purchase.",
+      "properties": {
+        "component": {
+          "const": "ProductListCard"
+        },
+        "products": {
+          "description": "List of products to display.",
+          "oneOf": [
+            {
+              "type": "array"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "cartItems": {
+          "description": "Current items in cart for badge display.",
+          "oneOf": [
+            {
+              "type": "array"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for adding to cart.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context with path bindings",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "CartCard": {
+      "type": "object",
+      "description": "A card displaying shopping cart contents.",
+      "properties": {
+        "component": {
+          "const": "CartCard"
+        },
+        "items": {
+          "description": "Items in the shopping cart.",
+          "oneOf": [
+            {
+              "type": "array"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for cart operations.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context with path bindings",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "OrderSummaryCard": {
+      "type": "object",
+      "description": "A card displaying order summary with pricing.",
+      "properties": {
+        "component": {
+          "const": "OrderSummaryCard"
+        },
+        "items": {
+          "description": "Items in the shopping cart for calculation.",
+          "oneOf": [
+            {
+              "type": "array"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "discount": {
+          "description": "Discount percentage.",
+          "oneOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "shipping": {
+          "description": "Shipping fee.",
+          "oneOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for checkout.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "CardContainer": {
+      "type": "object",
+      "description": "A container component for layout.",
+      "properties": {
+        "component": {
+          "const": "CardContainer"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        },
+        "layout": {
+          "type": "string",
+          "description": "Layout direction.",
+          "enum": ["horizontal", "vertical"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "SuccessResult": {
+      "type": "object",
+      "description": "A success result display after checkout.",
+      "properties": {
+        "component": {
+          "const": "SuccessResult"
+        },
+        "orderNumber": {
+          "type": "string",
+          "description": "Order number"
+        },
+        "total": {
+          "type": "number",
+          "description": "Total amount paid"
+        },
+        "itemCount": {
+          "type": "number",
+          "description": "Number of items purchased"
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "ColWrapper": {
+      "type": "object",
+      "description": "A column wrapper for Row layout.",
+      "properties": {
+        "component": {
+          "const": "ColWrapper"
+        },
+        "span": {
+          "type": "number",
+          "description": "Column span (1-24)"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "MultiCardContainer": {
+      "type": "object",
+      "description": "A container with Row layout for multiple cards.",
+      "properties": {
+        "component": {
+          "const": "MultiCardContainer"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "CheckoutSuccessCard": {
+      "type": "object",
+      "description": "A success card displayed after checkout.",
+      "properties": {
+        "component": {
+          "const": "CheckoutSuccessCard"
+        },
+        "total": {
+          "type": "number",
+          "description": "Total amount paid"
+        },
+        "itemCount": {
+          "type": "number",
+          "description": "Number of items purchased"
+        },
+        "orderNumber": {
+          "type": "string",
+          "description": "Order number"
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    }
+  },
+  "functions": {},
+  "$defs": {
+    "DynamicValue": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "number"
+        },
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            }
+          },
+          "required": ["path"],
+          "additionalProperties": false
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-filter.json b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-filter.json
new file mode 100644
index 0000000000..9406bbafda
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-filter.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "local://filter_search_catalog.json",
+  "title": "Filter Search Catalog",
+  "description": "Custom catalog for filter and search demo components.",
+  "catalogId": "local://filter_search_catalog.json",
+  "components": {
+    "FilterPanel": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "FilterPanel"
+        },
+        "selectedCategories": {
+          "description": "Selected categories for filtering.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "priceRange": {
+          "description": "Price range filter.",
+          "type": "array",
+          "items": {
+            "type": "number"
+          },
+          "minItems": 2,
+          "maxItems": 2
+        },
+        "minRating": {
+          "description": "Minimum rating filter.",
+          "type": "number",
+          "minimum": 0,
+          "maximum": 5
+        },
+        "searchKeyword": {
+          "description": "Search keyword.",
+          "type": "string"
+        },
+        "action": {
+          "type": "object",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "context": {
+                  "type": "object"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "ProductList": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "ProductList"
+        },
+        "filters": {
+          "description": "Filter configuration object.",
+          "type": "object"
+        }
+      }
+    },
+    "FilterContainer": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "FilterContainer"
+        },
+        "children": {
+          "description": "Child component IDs.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-form.json b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-form.json
new file mode 100644
index 0000000000..c292c4aa77
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-form.json
@@ -0,0 +1,66 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "local://form_validation_catalog.json",
+  "title": "Form Validation Catalog",
+  "description": "Custom catalog for form validation demo components.",
+  "catalogId": "local://form_validation_catalog.json",
+  "components": {
+    "RegistrationForm": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "RegistrationForm"
+        },
+        "step": {
+          "description": "Current step of the form.",
+          "type": "integer"
+        },
+        "status": {
+          "description": "Form status.",
+          "type": "string",
+          "enum": ["error", "success", "loading", ""]
+        },
+        "errorMessage": {
+          "description": "Error message to display.",
+          "type": "string"
+        },
+        "action": {
+          "type": "object",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "context": {
+                  "type": "object"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "SuccessCard": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "SuccessCard"
+        },
+        "username": {
+          "description": "Registered username.",
+          "type": "string"
+        },
+        "email": {
+          "description": "Registered email.",
+          "type": "string"
+        },
+        "accountType": {
+          "description": "Account type.",
+          "type": "string"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-nested.json b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-nested.json
new file mode 100644
index 0000000000..fec9400b8f
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-nested.json
@@ -0,0 +1,278 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "local://nested_interaction_catalog.json",
+  "title": "Nested Interaction Catalog",
+  "description": "Custom catalog for nested interaction demo components - File Browser with Accordion.",
+  "catalogId": "local://nested_interaction_catalog.json",
+  "components": {
+    "Text": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "Text"
+        },
+        "text": {
+          "description": "The text content to display.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "variant": {
+          "type": "string",
+          "description": "A hint for the base text style.",
+          "enum": ["h1", "h2", "h3", "body", "success"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "FileTree": {
+      "type": "object",
+      "description": "A tree component for browsing file structure.",
+      "properties": {
+        "component": {
+          "const": "FileTree"
+        },
+        "files": {
+          "description": "File tree data structure.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "key": { "type": "string" },
+                  "name": { "type": "string" },
+                  "type": { "type": "string", "enum": ["file", "folder"] },
+                  "children": { "type": "array" },
+                  "size": { "type": "number" },
+                  "modified": { "type": "string" },
+                  "language": { "type": "string" },
+                  "description": { "type": "string" }
+                }
+              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "selectedFile": {
+          "description": "Currently selected file.",
+          "oneOf": [
+            {
+              "type": "object"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for file selection.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context with path bindings",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "FileDetailCard": {
+      "type": "object",
+      "description": "A card component to display file details.",
+      "properties": {
+        "component": {
+          "const": "FileDetailCard"
+        },
+        "file": {
+          "description": "File detail object.",
+          "oneOf": [
+            {
+              "type": "object",
+              "properties": {
+                "name": { "type": "string" },
+                "path": { "type": "string" },
+                "size": { "type": "number" },
+                "modified": { "type": "string" },
+                "language": { "type": "string" },
+                "description": { "type": "string" }
+              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "AccordionPanel": {
+      "type": "object",
+      "description": "An accordion panel component with collapsible sections.",
+      "properties": {
+        "component": {
+          "const": "AccordionPanel"
+        },
+        "panels": {
+          "description": "Array of panel data.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "id": { "type": "string" },
+                  "title": { "type": "string" },
+                  "content": { "type": "string" }
+                }
+              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "MainContainer": {
+      "type": "object",
+      "description": "A container component for nested layout.",
+      "properties": {
+        "component": {
+          "const": "MainContainer"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    }
+  },
+  "functions": {},
+  "$defs": {
+    "DynamicValue": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "number"
+        },
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            }
+          },
+          "required": ["path"],
+          "additionalProperties": false
+        }
+      ]
+    },
+    "FileNode": {
+      "type": "object",
+      "properties": {
+        "key": { "type": "string" },
+        "name": { "type": "string" },
+        "type": { "type": "string", "enum": ["file", "folder"] },
+        "children": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/FileNode" }
+        },
+        "size": { "type": "number" },
+        "modified": { "type": "string" },
+        "language": { "type": "string" },
+        "description": { "type": "string" }
+      }
+    },
+    "FileDetail": {
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "path": { "type": "string" },
+        "size": { "type": "number" },
+        "modified": { "type": "string" },
+        "language": { "type": "string" },
+        "description": { "type": "string" },
+        "content": { "type": "string" }
+      }
+    },
+    "PanelData": {
+      "type": "object",
+      "properties": {
+        "id": { "type": "string" },
+        "title": { "type": "string" },
+        "content": { "type": "string" }
+      }
+    }
+  }
+}
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-streaming.json b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-streaming.json
new file mode 100644
index 0000000000..78e2761211
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog-streaming.json
@@ -0,0 +1,262 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "local://restaurant_streaming_catalog.json",
+  "title": "Restaurant Streaming Catalog",
+  "description": "Custom catalog for restaurant streaming demo components.",
+  "catalogId": "local://restaurant_streaming_catalog.json",
+  "components": {
+    "Text": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "Text"
+        },
+        "text": {
+          "description": "The text content to display.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "variant": {
+          "type": "string",
+          "description": "A hint for the base text style.",
+          "enum": ["h1", "h2", "h3", "body", "success"]
+        },
+        "status": {
+          "description": "The status of the text (for conditional styling).",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "LoadingProgress": {
+      "type": "object",
+      "description": "A loading progress indicator with progress bar.",
+      "properties": {
+        "component": {
+          "const": "LoadingProgress"
+        },
+        "percent": {
+          "description": "Current progress percentage (0-100).",
+          "oneOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "status": {
+          "type": "string",
+          "description": "Progress bar status.",
+          "enum": ["active", "success", "normal"]
+        },
+        "text": {
+          "type": "string",
+          "description": "Optional text to display above the progress bar."
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "RestaurantCard": {
+      "type": "object",
+      "description": "A card to display restaurant information.",
+      "properties": {
+        "component": {
+          "const": "RestaurantCard"
+        },
+        "restaurant": {
+          "type": "object",
+          "description": "Restaurant data object.",
+          "properties": {
+            "id": {
+              "type": "string"
+            },
+            "name": {
+              "type": "string"
+            },
+            "cuisine": {
+              "type": "string"
+            },
+            "rating": {
+              "type": "number"
+            },
+            "priceRange": {
+              "type": "string"
+            },
+            "distance": {
+              "type": "string"
+            },
+            "tags": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "description": {
+              "type": "string"
+            }
+          }
+        },
+        "index": {
+          "type": "number",
+          "description": "Index for animation delay."
+        },
+        "isLoading": {
+          "type": "boolean",
+          "description": "Whether the card is in loading state."
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "RestaurantList": {
+      "type": "object",
+      "description": "A list container for restaurant cards with streaming support.",
+      "properties": {
+        "component": {
+          "const": "RestaurantList"
+        },
+        "restaurants": {
+          "description": "Array of restaurant items.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "object"
+              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "loadingProgress": {
+          "description": "Current loading progress (0-100).",
+          "oneOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "isStreaming": {
+          "description": "Whether currently in streaming mode.",
+          "oneOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "Container": {
+      "type": "object",
+      "description": "A container component for layout.",
+      "properties": {
+        "component": {
+          "const": "Container"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    }
+  },
+  "functions": {},
+  "$defs": {
+    "DynamicValue": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "number"
+        },
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            }
+          },
+          "required": ["path"],
+          "additionalProperties": false
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/catalog.json b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog.json
new file mode 100644
index 0000000000..a6898c67e7
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/catalog.json
@@ -0,0 +1,428 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "local://coffee_booking_catalog.json",
+  "title": "Coffee Booking Catalog",
+  "description": "Custom catalog for coffee booking demo components.",
+  "catalogId": "local://coffee_booking_catalog.json",
+  "components": {
+    "Text": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "Text"
+        },
+        "text": {
+          "description": "The text content to display.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "variant": {
+          "type": "string",
+          "description": "A hint for the base text style.",
+          "enum": ["h1", "h2", "h3", "body", "success"]
+        },
+        "status": {
+          "description": "The status of the text (for conditional styling).",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "DateTimeInput": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "DateTimeInput"
+        },
+        "status": {
+          "description": "The status of the input (success, error, loading).",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for date selection.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context with path bindings",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "CoffeeList": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "CoffeeList"
+        },
+        "list": {
+          "description": "Coffee list data.",
+          "oneOf": [
+            {
+              "type": "array"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "description": {
+          "description": "Description text for the coffee list.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "status": {
+          "description": "The status of the list.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for coffee selection.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context with path bindings",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "ActionButton": {
+      "type": "object",
+      "properties": {
+        "component": {
+          "const": "ActionButton"
+        },
+        "child": {
+          "type": "string",
+          "description": "The ID of the child component (e.g., text label)."
+        },
+        "variant": {
+          "type": "string",
+          "description": "Button style variant.",
+          "enum": ["default", "primary"]
+        },
+        "status": {
+          "description": "The status of the button.",
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "path": {
+                  "type": "string"
+                }
+              },
+              "required": ["path"],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "res": {
+          "description": "Result data from dataModel.",
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            }
+          },
+          "required": ["path"],
+          "additionalProperties": false
+        },
+        "action": {
+          "type": "object",
+          "description": "Action configuration for button click.",
+          "properties": {
+            "event": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "Event name"
+                },
+                "context": {
+                  "type": "object",
+                  "description": "Event context with path bindings or literal values",
+                  "additionalProperties": true
+                }
+              },
+              "required": ["name"]
+            }
+          },
+          "required": ["event"]
+        }
+      },
+      "required": ["component", "action"],
+      "additionalProperties": true
+    },
+    "BookForm": {
+      "type": "object",
+      "description": "A form container component.",
+      "properties": {
+        "component": {
+          "const": "BookForm"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "CoffeeResultCard": {
+      "type": "object",
+      "description": "A card to display booking result.",
+      "properties": {
+        "component": {
+          "const": "CoffeeResultCard"
+        },
+        "name": {
+          "type": "string",
+          "description": "Coffee name"
+        },
+        "description": {
+          "type": "string",
+          "description": "Coffee description"
+        },
+        "price": {
+          "oneOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "description": "Coffee price"
+        },
+        "tag": {
+          "type": "string",
+          "description": "Tag label (e.g., '热销')"
+        },
+        "image": {
+          "type": "string",
+          "description": "Coffee image URL"
+        },
+        "date": {
+          "type": "string",
+          "description": "Booking date"
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "ProductCard": {
+      "type": "object",
+      "description": "A card to display product information.",
+      "properties": {
+        "component": {
+          "const": "ProductCard"
+        },
+        "name": {
+          "type": "string",
+          "description": "Product name"
+        },
+        "price": {
+          "type": "number",
+          "description": "Product price"
+        },
+        "category": {
+          "type": "string",
+          "description": "Product category"
+        },
+        "stock": {
+          "type": "number",
+          "description": "Product stock quantity"
+        },
+        "tag": {
+          "type": "string",
+          "description": "Tag label (e.g., '热销')"
+        },
+        "index": {
+          "type": "number",
+          "description": "Index for animation delay"
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "ProductContainer": {
+      "type": "object",
+      "description": "A container for product cards.",
+      "properties": {
+        "component": {
+          "const": "ProductContainer"
+        },
+        "children": {
+          "type": "array",
+          "description": "Child component IDs.",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    },
+    "LoadingIndicator": {
+      "type": "object",
+      "description": "A loading progress indicator.",
+      "properties": {
+        "component": {
+          "const": "LoadingIndicator"
+        },
+        "progress": {
+          "type": "number",
+          "description": "Current progress count"
+        },
+        "total": {
+          "type": "number",
+          "description": "Total count"
+        },
+        "loading": {
+          "type": "boolean",
+          "description": "Loading status"
+        }
+      },
+      "required": ["component"],
+      "additionalProperties": true
+    }
+  },
+  "functions": {},
+  "$defs": {
+    "DynamicValue": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "number"
+        },
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            }
+          },
+          "required": ["path"],
+          "additionalProperties": false
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/filter-search.md b/packages/x/docs/x-card/demo/A2UI_v0.9/filter-search.md
new file mode 100644
index 0000000000..39cbafea4a
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/filter-search.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的动态数据筛选与搜索示例。演示了如何使用 antd 组件配合 catalog 机制实现实时搜索、多条件筛选和结果动态更新。
+
+## en-US
+
+Dynamic data filtering and search example implementing A2UI v0.9 protocol with XCard. Demonstrates how to use antd components with catalog mechanism for real-time search, multi-condition filtering, and dynamic result updates.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/filter-search.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/filter-search.tsx
new file mode 100644
index 0000000000..70f3716bb4
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/filter-search.tsx
@@ -0,0 +1,666 @@
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, Catalog, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { registerCatalog, XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Input,
+  Rate,
+  Row,
+  Slider,
+  Space,
+  Tag,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// Import local catalog schema
+import localCatalog from './catalog-filter.json';
+
+// Register local catalog
+registerCatalog(localCatalog as unknown as Catalog);
+
+const { Title, Text } = Typography;
+
+const contentHeader =
+  'Welcome to Product Search! 🔍\n\nFind the perfect product by filtering by category, price, and rating. Results will update in real-time as you adjust filters.';
+
+// ─── Product Data ─────────────────────────────────────────────────────────────────
+interface Product {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+  rating: number;
+  stock: number;
+  tags: string[];
+  image?: string;
+}
+
+const allProducts: Product[] = [
+  {
+    id: 1,
+    name: 'Wireless Bluetooth Earphones',
+    category: 'Electronics',
+    price: 299,
+    rating: 4.5,
+    stock: 156,
+    tags: ['Hot', 'Wireless'],
+  },
+  {
+    id: 2,
+    name: 'Mechanical Keyboard RGB',
+    category: 'Electronics',
+    price: 459,
+    rating: 4.8,
+    stock: 89,
+    tags: ['Gaming'],
+  },
+  {
+    id: 3,
+    name: 'Smart Watch Pro',
+    category: 'Wearable',
+    price: 1299,
+    rating: 4.7,
+    stock: 45,
+    tags: ['New', 'Smart'],
+  },
+  {
+    id: 4,
+    name: 'Portable Power Bank',
+    category: 'Accessories',
+    price: 99,
+    rating: 4.2,
+    stock: 234,
+    tags: ['Portable'],
+  },
+  {
+    id: 5,
+    name: 'Noise Cancelling Headphones',
+    category: 'Electronics',
+    price: 899,
+    rating: 4.9,
+    stock: 67,
+    tags: ['Premium', 'Hot'],
+  },
+  {
+    id: 6,
+    name: 'Wireless Charger Pad',
+    category: 'Accessories',
+    price: 149,
+    rating: 4.3,
+    stock: 178,
+    tags: ['Wireless'],
+  },
+  {
+    id: 7,
+    name: 'Smart Speaker Mini',
+    category: 'Home',
+    price: 399,
+    rating: 4.4,
+    stock: 112,
+    tags: ['Smart Home'],
+  },
+  {
+    id: 8,
+    name: 'Fitness Tracker Band',
+    category: 'Wearable',
+    price: 199,
+    rating: 4.1,
+    stock: 256,
+    tags: ['Fitness'],
+  },
+  {
+    id: 9,
+    name: 'USB-C Hub Multiport',
+    category: 'Accessories',
+    price: 249,
+    rating: 4.6,
+    stock: 143,
+    tags: ['Hot'],
+  },
+  {
+    id: 10,
+    name: 'Gaming Mouse Pro',
+    category: 'Electronics',
+    price: 399,
+    rating: 4.7,
+    stock: 98,
+    tags: ['Gaming', 'RGB'],
+  },
+];
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+// ─── Role Configuration ────────────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── FilterPanel Component ─────────────────────────────────────────────────────────
+interface FilterPanelProps {
+  categories?: string[];
+  selectedCategories?: string[];
+  priceRange?: [number, number];
+  minRating?: number;
+  searchKeyword?: string;
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+}
+
+const FilterPanel: React.FC<FilterPanelProps> = ({
+  categories = ['Electronics', 'Wearable', 'Accessories', 'Home'],
+  selectedCategories = [],
+  priceRange = [0, 1500],
+  minRating = 0,
+  searchKeyword = '',
+  onAction,
+  action,
+}) => {
+  const [filters, setFilters] = useState({
+    categories: selectedCategories,
+    priceRange,
+    minRating,
+    searchKeyword,
+  });
+
+  const handleFilterChange = (newFilters: Partial<typeof filters>) => {
+    const updatedFilters = { ...filters, ...newFilters };
+    setFilters(updatedFilters);
+
+    if (action?.event?.name) {
+      const context: Record<string, any> = {};
+      if (action.event.context) {
+        Object.keys(action.event.context).forEach((key) => {
+          context[key] = updatedFilters;
+        });
+      }
+      onAction?.(action.event.name, context);
+    }
+  };
+
+  return (
+    <Card
+      title={
+        <Space>
+          <SearchOutlined />
+          <span>Filters</span>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+      }}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size={20}>
+        {/* Search Input */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Search
+          </Text>
+          <Input
+            placeholder="Search products..."
+            prefix={<SearchOutlined />}
+            value={filters.searchKeyword}
+            onChange={(e) => handleFilterChange({ searchKeyword: e.target.value })}
+            allowClear
+          />
+        </div>
+
+        {/* Category Filter */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Category
+          </Text>
+          <Checkbox.Group
+            value={filters.categories}
+            onChange={(checked) => handleFilterChange({ categories: checked as string[] })}
+          >
+            <Row>
+              {categories.map((cat) => (
+                <Col span={12} key={cat} style={{ marginBottom: 8 }}>
+                  <Checkbox value={cat}>{cat}</Checkbox>
+                </Col>
+              ))}
+            </Row>
+          </Checkbox.Group>
+        </div>
+
+        {/* Price Range Filter */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Price Range: ¥{filters.priceRange[0]} - ¥{filters.priceRange[1]}
+          </Text>
+          <Slider
+            range
+            min={0}
+            max={1500}
+            value={filters.priceRange}
+            onChange={(value) => handleFilterChange({ priceRange: value as [number, number] })}
+            marks={{ 0: '¥0', 500: '¥500', 1000: '¥1000', 1500: '¥1500' }}
+          />
+        </div>
+
+        {/* Rating Filter */}
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            Minimum Rating
+          </Text>
+          <Rate
+            value={filters.minRating}
+            onChange={(value) => handleFilterChange({ minRating: value })}
+          />
+          <Text type="secondary" style={{ marginLeft: 8 }}>
+            {filters.minRating > 0 ? `${filters.minRating}+ stars` : 'All ratings'}
+          </Text>
+        </div>
+      </Space>
+    </Card>
+  );
+};
+
+// ─── ProductList Component ──────────────────────────────────────────────────────────
+interface ProductListProps {
+  products?: Product[];
+  filters?: {
+    categories: string[];
+    priceRange: [number, number];
+    minRating: number;
+    searchKeyword: string;
+  };
+}
+
+const ProductList: React.FC<ProductListProps> = ({ products = allProducts, filters }) => {
+  const [filteredProducts, setFilteredProducts] = useState<Product[]>(products);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+
+    const timer = setTimeout(() => {
+      let result = products;
+
+      if (filters?.searchKeyword) {
+        const keyword = filters.searchKeyword.toLowerCase();
+        result = result.filter(
+          (p) =>
+            p.name.toLowerCase().includes(keyword) ||
+            p.category.toLowerCase().includes(keyword) ||
+            p.tags.some((t) => t.toLowerCase().includes(keyword)),
+        );
+      }
+
+      if (filters?.categories && filters.categories.length > 0) {
+        result = result.filter((p) => filters.categories.includes(p.category));
+      }
+
+      if (filters?.priceRange) {
+        result = result.filter(
+          (p) => p.price >= filters.priceRange[0] && p.price <= filters.priceRange[1],
+        );
+      }
+
+      if (filters?.minRating && filters.minRating > 0) {
+        result = result.filter((p) => p.rating >= filters.minRating);
+      }
+
+      setFilteredProducts(result);
+      setLoading(false);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [products, filters]);
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Space>
+          <Text strong>Results:</Text>
+          <Tag color="blue">{filteredProducts.length} products</Tag>
+        </Space>
+      </div>
+
+      <Row gutter={[16, 16]}>
+        {filteredProducts.map((product) => (
+          <Col xs={24} sm={12} key={product.id}>
+            <Card
+              hoverable
+              style={{ borderRadius: 12 }}
+              cover={
+                <div
+                  style={{
+                    height: 120,
+                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <span style={{ fontSize: 48 }}>📦</span>
+                </div>
+              }
+            >
+              <Card.Meta
+                title={
+                  <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                    <Text strong ellipsis style={{ fontSize: 14 }}>
+                      {product.name}
+                    </Text>
+                    <Space wrap size={4}>
+                      {product.tags.map((tag) => (
+                        <Tag key={tag} style={{ fontSize: 11, margin: 0 }}>
+                          {tag}
+                        </Tag>
+                      ))}
+                    </Space>
+                  </Space>
+                }
+                description={
+                  <Space direction="vertical" size={8} style={{ width: '100%', marginTop: 8 }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <Text strong style={{ fontSize: 16, color: '#1890ff' }}>
+                        ¥{product.price}
+                      </Text>
+                      <Rate disabled value={product.rating} style={{ fontSize: 12 }} />
+                    </div>
+                    <Text type="secondary" style={{ fontSize: 12 }}>
+                      Stock: {product.stock}
+                    </Text>
+                  </Space>
+                }
+              />
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      {filteredProducts.length === 0 && !loading && (
+        <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+          <div style={{ fontSize: 64, marginBottom: 16 }}>🔍</div>
+          <Title level={4} type="secondary">
+            No products found
+          </Title>
+          <Text type="secondary">Try adjusting your filters</Text>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── FilterContainer Component ──────────────────────────────────────────────────────
+interface FilterContainerProps {
+  children?: React.ReactNode;
+}
+
+const FilterContainer: React.FC<FilterContainerProps> = ({ children }) => {
+  // Convert children to array, first child component (FilterPanel) takes 8 columns, second (ProductList) takes 16 columns
+  const childArray = React.Children.toArray(children);
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        minWidth: 600,
+      }}
+    >
+      <Row gutter={24}>
+        {childArray.map((child, index) => (
+          <Col key={index} span={index === 0 ? 8 : 16}>
+            {child}
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─── Agent Commands ───────────────────────────────────────────────────────────────
+const CreateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'filter',
+    catalogId: 'local://filter_search_catalog.json',
+  },
+};
+
+const UpdateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'filter',
+    components: [
+      {
+        id: 'filter-panel',
+        component: 'FilterPanel',
+        selectedCategories: { path: '/filter/filters/categories' },
+        priceRange: { path: '/filter/filters/priceRange' },
+        minRating: { path: '/filter/filters/minRating' },
+        searchKeyword: { path: '/filter/filters/searchKeyword' },
+        action: {
+          event: {
+            name: 'update_filters',
+            context: {
+              filters: {
+                path: '/filter/filters',
+              },
+            },
+          },
+        },
+      },
+      {
+        id: 'product-list',
+        component: 'ProductList',
+        filters: { path: '/filter/filters' },
+      },
+      {
+        id: 'root',
+        component: 'FilterContainer',
+        children: ['filter-panel', 'product-list'],
+      },
+    ],
+  },
+};
+
+const UpdateModel: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'filter',
+    path: '/filter',
+    value: {
+      filters: {
+        categories: [],
+        priceRange: [0, 1500],
+        minRating: 0,
+        searchKeyword: '',
+      },
+    },
+  },
+};
+
+// ─── App ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'update_filters') {
+      const { filters } = payload.context || {};
+      if (filters) {
+        onAgentCommand({
+          version: 'v0.9',
+          updateDataModel: {
+            surfaceId: 'filter',
+            path: '/filter/filters',
+            value: filters,
+          },
+        });
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(CreateCard);
+      onAgentCommand(UpdateCard);
+      onAgentCommand(UpdateModel);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'filter' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: streamStatusHeader === 'RUNNING' ? Date.now() : 0 },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          FilterPanel,
+          ProductList,
+          FilterContainer,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 700 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/form-validation.md b/packages/x/docs/x-card/demo/A2UI_v0.9/form-validation.md
new file mode 100644
index 0000000000..15107ffcb7
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/form-validation.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的表单验证与错误处理示例。演示了如何使用 antd Form 组件配合 catalog 机制实现实时验证、错误状态管理和多步骤表单流程。
+
+## en-US
+
+Form validation and error handling example implementing A2UI v0.9 protocol with XCard. Demonstrates how to use antd Form components with catalog mechanism for real-time validation, error state management, and multi-step form workflows.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/form-validation.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/form-validation.tsx
new file mode 100644
index 0000000000..3a64bc58f9
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/form-validation.tsx
@@ -0,0 +1,595 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, Catalog, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { registerCatalog, XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, Form, Input, message, Select, Space, Steps, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// Import local catalog schema
+import localCatalog from './catalog-form.json';
+
+// Register local catalog
+registerCatalog(localCatalog as unknown as Catalog);
+
+const { Title, Text } = Typography;
+const { Option } = Select;
+
+const contentHeader =
+  'Welcome to register! 🎉\n\nPlease fill in your information to create an account. We will verify your information step by step.';
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+// ─── Role Configuration ────────────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── RegistrationForm Component ─────────────────────────────────────────────────────
+interface RegistrationFormProps {
+  step?: number;
+  status?: 'error' | 'success' | 'loading';
+  errorMessage?: string;
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+}
+
+const RegistrationForm: React.FC<RegistrationFormProps> = ({
+  step = 0,
+  status,
+  errorMessage,
+  onAction,
+  action,
+}) => {
+  const [form] = Form.useForm();
+  const [currentStep, setCurrentStep] = useState(step);
+  const [formStatus, setFormStatus] = useState<'error' | 'success' | 'loading' | null>(null);
+
+  useEffect(() => {
+    setCurrentStep(step);
+  }, [step]);
+
+  useEffect(() => {
+    setFormStatus(status ?? null);
+  }, [status]);
+
+  const handleNext = async () => {
+    try {
+      const fieldsToValidate =
+        currentStep === 0 ? ['username', 'email'] : ['password', 'confirmPassword'];
+
+      await form.validateFields(fieldsToValidate);
+      const values = form.getFieldsValue();
+
+      if (action?.event?.name) {
+        const context: Record<string, any> = {};
+        if (action.event.context) {
+          Object.keys(action.event.context).forEach((key) => {
+            context[key] = {
+              step: currentStep + 1,
+              values,
+            };
+          });
+        }
+        onAction?.(action.event.name, context);
+      }
+
+      if (currentStep === 1) {
+        handleSubmit(values);
+      } else {
+        setCurrentStep(currentStep + 1);
+      }
+    } catch (error) {
+      console.log('Validation failed:', error);
+    }
+  };
+
+  const handlePrev = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  const handleSubmit = (values: any) => {
+    if (action?.event?.name) {
+      const context: Record<string, any> = {};
+      if (action.event.context) {
+        Object.keys(action.event.context).forEach((key) => {
+          context[key] = {
+            step: 2,
+            values,
+            submit: true,
+          };
+        });
+      }
+      onAction?.(action.event.name, context);
+    }
+  };
+
+  const steps = [
+    {
+      title: 'Basic Info',
+      description: 'Username & Email',
+    },
+    {
+      title: 'Security',
+      description: 'Password',
+    },
+    {
+      title: 'Complete',
+      description: 'Account Created',
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '24px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        minWidth: 480,
+        maxWidth: 600,
+      }}
+    >
+      <Steps current={currentStep} items={steps} style={{ marginBottom: 24 }} />
+
+      {formStatus === 'error' && errorMessage && (
+        <div
+          style={{
+            padding: '12px 16px',
+            marginBottom: 16,
+            borderRadius: 8,
+            background: '#fff2f0',
+            border: '1px solid #ffccc7',
+          }}
+        >
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      )}
+
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{ username: '', email: '', password: '', confirmPassword: '' }}
+      >
+        {/* Step 0: Basic Info */}
+        <div style={{ display: currentStep === 0 ? 'block' : 'none' }}>
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[
+              { required: true, message: 'Please input your username!' },
+              { min: 3, message: 'Username must be at least 3 characters!' },
+              { pattern: /^[a-zA-Z0-9_]+$/, message: 'Only letters, numbers and underscores!' },
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input placeholder="Enter username" size="large" />
+          </Form.Item>
+
+          <Form.Item
+            label="Email"
+            name="email"
+            rules={[
+              { required: true, message: 'Please input your email!' },
+              { type: 'email', message: 'Please enter a valid email!' },
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input placeholder="Enter email" size="large" />
+          </Form.Item>
+        </div>
+
+        {/* Step 1: Security */}
+        <div style={{ display: currentStep === 1 ? 'block' : 'none' }}>
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[
+              { required: true, message: 'Please input your password!' },
+              { min: 8, message: 'Password must be at least 8 characters!' },
+              {
+                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+                message: 'Must contain uppercase, lowercase and number!',
+              },
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input.Password placeholder="Enter password" size="large" />
+          </Form.Item>
+
+          <Form.Item
+            label="Confirm Password"
+            name="confirmPassword"
+            dependencies={['password']}
+            rules={[
+              { required: true, message: 'Please confirm your password!' },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue('password') === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error('Passwords do not match!'));
+                },
+              }),
+            ]}
+            validateTrigger="onBlur"
+          >
+            <Input.Password placeholder="Confirm password" size="large" />
+          </Form.Item>
+
+          <Form.Item
+            label="Account Type"
+            name="accountType"
+            rules={[{ required: true, message: 'Please select account type!' }]}
+            initialValue="personal"
+          >
+            <Select size="large">
+              <Option value="personal">Personal</Option>
+              <Option value="business">Business</Option>
+              <Option value="developer">Developer</Option>
+            </Select>
+          </Form.Item>
+        </div>
+
+        {/* Step 2: Complete */}
+        {currentStep === 2 && (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '40px 20px',
+              background: '#f6ffed',
+              borderRadius: 12,
+              border: '1px solid #b7eb8f',
+            }}
+          >
+            <div style={{ fontSize: 48, marginBottom: 16 }}>✅</div>
+            <Title level={3} style={{ marginBottom: 8, color: '#52c41a' }}>
+              Registration Successful!
+            </Title>
+            <Text type="secondary">Your account has been created successfully.</Text>
+          </div>
+        )}
+      </Form>
+
+      {/* Action Buttons */}
+      {currentStep < 2 && (
+        <Space style={{ width: '100%', justifyContent: 'space-between', marginTop: 24 }}>
+          <Button size="large" disabled={currentStep === 0} onClick={handlePrev}>
+            Previous
+          </Button>
+          <Button
+            type="primary"
+            size="large"
+            onClick={handleNext}
+            loading={formStatus === 'loading'}
+          >
+            {currentStep === 1 ? 'Submit' : 'Next'}
+          </Button>
+        </Space>
+      )}
+    </div>
+  );
+};
+
+// ─── SuccessCard Component ──────────────────────────────────────────────────────────
+interface SuccessCardProps {
+  username?: string;
+  email?: string;
+  accountType?: string;
+}
+
+const SuccessCard: React.FC<SuccessCardProps> = ({ username, email, accountType }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #52c41a',
+        padding: '24px',
+        background: 'linear-gradient(135deg, #f6ffed 0%, #fff 100%)',
+        boxShadow: '0 2px 12px rgba(82,196,26,0.15)',
+        minWidth: 400,
+        maxWidth: 500,
+      }}
+    >
+      <div style={{ textAlign: 'center', marginBottom: 24 }}>
+        <div style={{ fontSize: 56, marginBottom: 16 }}>🎉</div>
+        <Title level={2} style={{ marginBottom: 8, color: '#52c41a' }}>
+          Welcome, {username}!
+        </Title>
+        <Text type="secondary">Your account has been created successfully.</Text>
+      </div>
+
+      <div
+        style={{
+          background: '#fff',
+          borderRadius: 12,
+          padding: '16px 20px',
+          marginBottom: 16,
+        }}
+      >
+        <Space direction="vertical" style={{ width: '100%' }} size={12}>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text type="secondary">Email:</Text>
+            <Text strong>{email}</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text type="secondary">Account Type:</Text>
+            <Text strong style={{ textTransform: 'capitalize' }}>
+              {accountType}
+            </Text>
+          </div>
+        </Space>
+      </div>
+
+      <Button type="primary" size="large" block>
+        Start Exploring
+      </Button>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─── Agent Commands ───────────────────────────────────────────────────────────────
+const CreateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'registration',
+    catalogId: 'local://form_validation_catalog.json',
+  },
+};
+
+const UpdateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'registration',
+    components: [
+      {
+        id: 'root',
+        component: 'RegistrationForm',
+        step: 0,
+        status: { path: '/registration/status' },
+        errorMessage: { path: '/registration/errorMessage' },
+        action: {
+          event: {
+            name: 'submit_step',
+            context: {
+              formData: {
+                path: '/registration/formData',
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+const UpdateModel: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'registration',
+    path: '/registration',
+    value: {
+      status: '',
+      errorMessage: '',
+    },
+  },
+};
+
+// ─── Result Card Configuration ─────────────────────────────────────────────────────
+const CreateResultCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'result',
+    catalogId: 'local://form_validation_catalog.json',
+  },
+};
+
+const UpdateResultCard = (formData: any): XAgentCommand_v0_9 => {
+  return {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'result',
+      components: [
+        {
+          id: 'root',
+          component: 'SuccessCard',
+          username: formData?.username,
+          email: formData?.email,
+          accountType: formData?.accountType ?? 'personal',
+        },
+      ],
+    },
+  };
+};
+
+// ─── App ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  /** Handle Card internal action events */
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'submit_step') {
+      const { formData } = payload.context || {};
+
+      if (formData?.submit) {
+        message.success('Registration successful!');
+
+        onAgentCommand({
+          version: 'v0.9',
+          deleteSurface: {
+            surfaceId: 'registration',
+          },
+        });
+
+        setTimeout(() => {
+          onAgentCommand(CreateResultCard);
+          onAgentCommand(UpdateResultCard(formData.values));
+        }, 300);
+      } else {
+        message.info(`Step ${formData.step} completed`);
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(CreateCard);
+      onAgentCommand(UpdateCard);
+      onAgentCommand(UpdateModel);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'registration' } },
+      { version: 'v0.9', deleteSurface: { surfaceId: 'result' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: streamStatusHeader === 'RUNNING' ? Date.now() : 0 },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          RegistrationForm,
+          SuccessCard,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 620 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/multi-card-sync.md b/packages/x/docs/x-card/demo/A2UI_v0.9/multi-card-sync.md
new file mode 100644
index 0000000000..dd223a9d13
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/multi-card-sync.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的多卡片协同与状态同步示例。演示了购物车场景中多个 Surface 之间的数据共享、跨卡片通信和实时价格计算，配合 catalog 机制。
+
+## en-US
+
+Multi-card coordination and state synchronization example implementing A2UI v0.9 protocol with XCard. Demonstrates data sharing between multiple Surfaces, cross-card communication, and real-time price calculation in a shopping cart scenario with catalog mechanism.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/multi-card-sync.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/multi-card-sync.tsx
new file mode 100644
index 0000000000..f32861f2b0
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/multi-card-sync.tsx
@@ -0,0 +1,1037 @@
+import { DeleteOutlined, ReloadOutlined, ShoppingCartOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import {
+  Badge,
+  Button,
+  Card,
+  Col,
+  Divider,
+  Empty,
+  InputNumber,
+  List,
+  Row,
+  Space,
+  Tag,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const { Title, Text } = Typography;
+
+// ─── Type Definitions ───────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+interface Product {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  category: string;
+  image?: string;
+  tag?: string;
+  stock: number;
+}
+
+interface CartItem {
+  product: Product;
+  quantity: number;
+}
+
+// ─── Product Data ─────────────────────────────────────────────────────────────────
+const allProducts: Product[] = [
+  {
+    id: 1,
+    name: 'iPhone 15 Pro',
+    description: 'A17 Pro chip, 48MP camera system',
+    price: 7999,
+    category: 'Electronics',
+    tag: 'Hot',
+    stock: 50,
+  },
+  {
+    id: 2,
+    name: 'MacBook Air M3',
+    description: 'M3 chip, 15-inch Liquid Retina display',
+    price: 10999,
+    category: 'Electronics',
+    tag: 'New',
+    stock: 30,
+  },
+  {
+    id: 3,
+    name: 'AirPods Pro 2',
+    description: 'Active Noise Cancellation, Adaptive Audio',
+    price: 1899,
+    category: 'Accessories',
+    tag: 'Popular',
+    stock: 100,
+  },
+  {
+    id: 4,
+    name: 'Apple Watch Ultra 2',
+    description: 'The most rugged Apple Watch, titanium case',
+    price: 6499,
+    category: 'Wearable',
+    stock: 25,
+  },
+  {
+    id: 5,
+    name: 'iPad Pro M2',
+    description: 'M2 chip, 12.9-inch Liquid Retina XDR display',
+    price: 9299,
+    category: 'Electronics',
+    tag: 'Recommended',
+    stock: 40,
+  },
+  {
+    id: 6,
+    name: 'Magic Keyboard',
+    description: 'Wireless, rechargeable, with Touch ID',
+    price: 1999,
+    category: 'Accessories',
+    stock: 80,
+  },
+];
+
+const contentHeader =
+  'Welcome to Smart Shopping Cart! 🛒\n\nBrowse products, add them to your cart, and see real-time price calculations. Experience the power of multi-surface collaboration!';
+
+// ─── Role Definition ──────────────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── ColWrapper Component (for column layout within Row) ────────────────────────────────────
+interface ColWrapperProps {
+  span?: number | string;
+  children?: React.ReactNode;
+}
+
+const ColWrapper: React.FC<ColWrapperProps> = ({ span = 8, children }) => {
+  const numSpan = typeof span === 'string' ? parseInt(span, 10) : span;
+  return <Col span={numSpan}>{children}</Col>;
+};
+
+// ─── ProductListCard Component ─────────────────────────────────────────────────────
+interface ProductListCardProps {
+  products?: Product[];
+  cart?: CartItem[];
+  onAction?: (name: string, context: Record<string, any>) => void;
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+}
+
+const ProductListCard: React.FC<ProductListCardProps> = ({
+  products = allProducts,
+  cart = [],
+  onAction,
+  action,
+}) => {
+  const handleAddToCart = (product: Product) => {
+    if (!action?.event?.name) return;
+
+    const context: Record<string, any> = { product };
+    onAction?.(action.event.name, context);
+  };
+
+  const getCartQuantity = (productId: number) => {
+    const item = cart.find((c) => c.product.id === productId);
+    return item?.quantity || 0;
+  };
+
+  return (
+    <Card
+      title={
+        <Space>
+          <span style={{ fontSize: 18 }}>📦</span>
+          <span>Product List</span>
+          <Tag color="blue">{products.length} items</Tag>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        height: '100%',
+      }}
+      styles={{
+        body: { maxHeight: 450, overflow: 'auto' },
+      }}
+    >
+      <List
+        dataSource={products}
+        renderItem={(product) => {
+          const inCart = getCartQuantity(product.id);
+          return (
+            <List.Item style={{ padding: '12px 0' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  gap: 12,
+                }}
+              >
+                <div
+                  style={{
+                    width: 56,
+                    height: 56,
+                    borderRadius: 12,
+                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                  }}
+                >
+                  <span style={{ fontSize: 24 }}>
+                    {product.category === 'Electronics'
+                      ? '📱'
+                      : product.category === 'Accessories'
+                        ? '🎧'
+                        : product.category === 'Wearable'
+                          ? '⌚'
+                          : '📦'}
+                  </span>
+                </div>
+
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+                    <Text strong style={{ fontSize: 14 }} ellipsis>
+                      {product.name}
+                    </Text>
+                    {product.tag && (
+                      <Tag
+                        style={{
+                          fontSize: 11,
+                          padding: '0 6px',
+                          lineHeight: '18px',
+                          borderRadius: 6,
+                          margin: 0,
+                        }}
+                        color="orange"
+                      >
+                        {product.tag}
+                      </Tag>
+                    )}
+                  </div>
+                  <Text type="secondary" style={{ fontSize: 12 }} ellipsis>
+                    {product.description}
+                  </Text>
+                </div>
+
+                <div style={{ textAlign: 'right', flexShrink: 0 }}>
+                  <Text strong style={{ fontSize: 15, color: '#1890ff', display: 'block' }}>
+                    ¥{product.price.toLocaleString()}
+                  </Text>
+                  <Button
+                    type={inCart > 0 ? 'default' : 'primary'}
+                    size="small"
+                    onClick={() => handleAddToCart(product)}
+                    style={{ marginTop: 4, minWidth: 80 }}
+                    icon={
+                      inCart > 0 ? (
+                        <Badge count={inCart} size="small" offset={[6, -2]}>
+                          <ShoppingCartOutlined />
+                        </Badge>
+                      ) : (
+                        <ShoppingCartOutlined />
+                      )
+                    }
+                  >
+                    {inCart > 0 ? 'Add More' : 'Add'}
+                  </Button>
+                </div>
+              </div>
+            </List.Item>
+          );
+        }}
+      />
+    </Card>
+  );
+};
+
+// ─── CartCard Component ─────────────────────────────────────────────────────────────
+interface CartCardProps {
+  cart?: CartItem[];
+  onAction?: (name: string, context: Record<string, any>) => void;
+  updateAction?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+  removeAction?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+}
+
+const CartCard: React.FC<CartCardProps> = ({ cart = [], onAction, updateAction, removeAction }) => {
+  const handleQuantityChange = (productId: number, quantity: number) => {
+    if (!updateAction?.event?.name) return;
+    onAction?.(updateAction.event.name, { productId, quantity });
+  };
+
+  const handleRemove = (productId: number) => {
+    if (!removeAction?.event?.name) return;
+    onAction?.(removeAction.event.name, { productId });
+  };
+
+  const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
+  const subtotal = cart.reduce((sum, item) => sum + item.product.price * item.quantity, 0);
+
+  return (
+    <Card
+      title={
+        <Space>
+          <Badge count={totalItems} size="small" offset={[4, -2]}>
+            <ShoppingCartOutlined style={{ fontSize: 18 }} />
+          </Badge>
+          <span>Shopping Cart</span>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        height: '100%',
+      }}
+      styles={{
+        body: { maxHeight: 380, overflow: 'auto' },
+      }}
+    >
+      {cart.length === 0 ? (
+        <Empty
+          description="Cart is empty"
+          style={{ padding: '40px 0' }}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          <List
+            dataSource={cart}
+            renderItem={(item) => (
+              <List.Item style={{ padding: '12px 0' }}>
+                <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: 12 }}>
+                  <div
+                    style={{
+                      width: 44,
+                      height: 44,
+                      borderRadius: 10,
+                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      flexShrink: 0,
+                    }}
+                  >
+                    <span style={{ fontSize: 18 }}>
+                      {item.product.category === 'Electronics'
+                        ? '📱'
+                        : item.product.category === 'Accessories'
+                          ? '🎧'
+                          : item.product.category === 'Wearable'
+                            ? '⌚'
+                            : '📦'}
+                    </span>
+                  </div>
+
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Text strong style={{ fontSize: 13 }} ellipsis>
+                      {item.product.name}
+                    </Text>
+                    <Text type="secondary" style={{ fontSize: 12, display: 'block' }}>
+                      ¥{item.product.price.toLocaleString()} x {item.quantity}
+                    </Text>
+                  </div>
+
+                  <Space.Compact size="small">
+                    <InputNumber
+                      min={1}
+                      max={item.product.stock}
+                      value={item.quantity}
+                      onChange={(val) => handleQuantityChange(item.product.id, val || 1)}
+                      style={{ width: 60 }}
+                      controls={{ upIcon: null, downIcon: null }}
+                    />
+                    <Button
+                      danger
+                      icon={<DeleteOutlined />}
+                      onClick={() => handleRemove(item.product.id)}
+                    />
+                  </Space.Compact>
+                </div>
+              </List.Item>
+            )}
+          />
+
+          <Divider style={{ margin: '12px 0' }} />
+
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Text strong>Subtotal:</Text>
+            <Text strong style={{ fontSize: 16, color: '#1890ff' }}>
+              ¥{subtotal.toLocaleString()}
+            </Text>
+          </div>
+        </>
+      )}
+    </Card>
+  );
+};
+
+// ─── OrderSummaryCard Component ─────────────────────────────────────────────────────
+interface OrderSummaryCardProps {
+  cart?: CartItem[];
+  onAction?: (name: string, context: Record<string, any>) => void;
+  checkoutAction?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+}
+
+const OrderSummaryCard: React.FC<OrderSummaryCardProps> = ({
+  cart = [],
+  onAction,
+  checkoutAction,
+}) => {
+  const subtotal = cart.reduce((sum, item) => sum + item.product.price * item.quantity, 0);
+  const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
+
+  // Calculate discount
+  const discount = subtotal >= 10000 ? subtotal * 0.1 : subtotal >= 5000 ? subtotal * 0.05 : 0;
+  const discountRate = subtotal >= 10000 ? '10%' : subtotal >= 5000 ? '5%' : '0%';
+
+  // Shipping fee
+  const shipping = subtotal >= 1000 ? 0 : 15;
+
+  // Final total
+  const total = subtotal - discount + shipping;
+
+  const handleCheckout = () => {
+    if (!checkoutAction?.event?.name) return;
+
+    onAction?.(checkoutAction.event.name, {
+      cart,
+      subtotal,
+      discount,
+      shipping,
+      total,
+      itemCount: totalItems,
+    });
+  };
+
+  return (
+    <Card
+      title={
+        <Space>
+          <span style={{ fontSize: 18 }}>📋</span>
+          <span>Order Summary</span>
+        </Space>
+      }
+      style={{
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
+        height: '100%',
+      }}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size={12}>
+        {/* Item count */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Text type="secondary">Items:</Text>
+          <Text>{totalItems} items</Text>
+        </div>
+
+        {/* Subtotal */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Text type="secondary">Subtotal:</Text>
+          <Text>¥{subtotal.toLocaleString()}</Text>
+        </div>
+
+        <Divider style={{ margin: '8px 0' }} />
+
+        {/* Discount */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Space>
+            <Text type="secondary">Discount:</Text>
+            {discount > 0 && (
+              <Tag color="green" style={{ margin: 0 }}>
+                {discountRate} off
+              </Tag>
+            )}
+          </Space>
+          <Text type="success">-¥{discount.toLocaleString()}</Text>
+        </div>
+
+        {/* Shipping */}
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Text type="secondary">Shipping:</Text>
+          {shipping === 0 ? <Text type="success">Free</Text> : <Text>¥{shipping}</Text>}
+        </div>
+
+        <Divider style={{ margin: '8px 0' }} />
+
+        {/* Total price */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Title level={4} style={{ margin: 0 }}>
+            Total:
+          </Title>
+          <Title level={3} style={{ margin: 0, color: '#ff4d4f' }}>
+            ¥{total.toLocaleString()}
+          </Title>
+        </div>
+
+        {/* Discount tip */}
+        {subtotal < 5000 && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#fff7e6',
+              borderRadius: 8,
+              border: '1px solid #ffd591',
+            }}
+          >
+            <Text style={{ fontSize: 12, color: '#d46b08' }}>
+              💡 Spend ¥{(5000 - subtotal).toLocaleString()} more for 5% off!
+            </Text>
+          </div>
+        )}
+        {subtotal >= 5000 && subtotal < 10000 && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#fff7e6',
+              borderRadius: 8,
+              border: '1px solid #ffd591',
+            }}
+          >
+            <Text style={{ fontSize: 12, color: '#d46b08' }}>
+              💡 Spend ¥{(10000 - subtotal).toLocaleString()} more for 10% off!
+            </Text>
+          </div>
+        )}
+        {subtotal >= 10000 && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#f6ffed',
+              borderRadius: 8,
+              border: '1px solid #b7eb8f',
+            }}
+          >
+            <Text style={{ fontSize: 12, color: '#52c41a' }}>
+              🎉 You've got the maximum discount!
+            </Text>
+          </div>
+        )}
+
+        {/* Checkout button */}
+        <Button
+          type="primary"
+          size="large"
+          block
+          disabled={cart.length === 0}
+          onClick={handleCheckout}
+          style={{ marginTop: 8, height: 48, borderRadius: 8 }}
+        >
+          Checkout (¥{total.toLocaleString()})
+        </Button>
+      </Space>
+    </Card>
+  );
+};
+
+// ─── MultiCardContainer Component (three-column horizontal layout container) ──────────────────────────────
+interface MultiCardContainerProps {
+  children?: React.ReactNode;
+}
+
+const MultiCardContainer: React.FC<MultiCardContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '24px',
+        background: '#fff',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
+      }}
+    >
+      <Row gutter={16} align="stretch">
+        {children}
+      </Row>
+    </div>
+  );
+};
+
+// ─── CheckoutSuccessCard Component ──────────────────────────────────────────────────
+interface CheckoutSuccessCardProps {
+  total?: number;
+  itemCount?: number;
+  orderNumber?: string;
+}
+
+const CheckoutSuccessCard: React.FC<CheckoutSuccessCardProps> = ({
+  total = 0,
+  itemCount = 0,
+  orderNumber,
+}) => {
+  return (
+    <Card
+      style={{
+        borderRadius: 16,
+        background: 'linear-gradient(145deg, #52c41a 0%, #73d13d 100%)',
+        border: 'none',
+        boxShadow: '0 8px 24px rgba(82,196,26,0.35)',
+        maxWidth: 400,
+        margin: '0 auto',
+      }}
+    >
+      <div style={{ textAlign: 'center', padding: '20px 0' }}>
+        <div
+          style={{
+            width: 80,
+            height: 80,
+            borderRadius: '50%',
+            background: 'rgba(255,255,255,0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            margin: '0 auto 16px',
+          }}
+        >
+          <span style={{ fontSize: 40 }}>✅</span>
+        </div>
+
+        <Title level={3} style={{ color: '#fff', margin: '0 0 8px' }}>
+          Order Placed!
+        </Title>
+        <Text style={{ color: 'rgba(255,255,255,0.85)', display: 'block', marginBottom: 24 }}>
+          Thank you for your purchase!
+        </Text>
+
+        <div
+          style={{
+            background: 'rgba(255,255,255,0.15)',
+            borderRadius: 12,
+            padding: 16,
+            marginBottom: 16,
+          }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+            <Text style={{ color: 'rgba(255,255,255,0.7)' }}>Order Number:</Text>
+            <Text strong style={{ color: '#fff' }}>
+              {orderNumber}
+            </Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+            <Text style={{ color: 'rgba(255,255,255,0.7)' }}>Items:</Text>
+            <Text style={{ color: '#fff' }}>{itemCount} items</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text style={{ color: 'rgba(255,255,255,0.7)' }}>Total:</Text>
+            <Text strong style={{ color: '#fff', fontSize: 18 }}>
+              ¥{total.toLocaleString()}
+            </Text>
+          </div>
+        </div>
+
+        <Button
+          ghost
+          size="large"
+          style={{ borderRadius: 8 }}
+          onClick={() => window.location.reload()}
+        >
+          Continue Shopping
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.9 Agent Command Definition
+// Three cards merged in one Surface, implementing three-column layout via MultiCardContainer + ColWrapper
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// Create shopping Surface
+const CreateShopSurface: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'shop',
+    catalogId: 'local://cart_demo_catalog.json',
+  },
+};
+
+// Update shopping Surface components (three-column layout)
+const UpdateShopComponents: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'shop',
+    components: [
+      // Product list card
+      {
+        id: 'product-list-card',
+        component: 'ProductListCard',
+        products: { path: '/products' },
+        cart: { path: '/cart' },
+        action: {
+          event: {
+            name: 'add_to_cart',
+            context: { product: {} },
+          },
+        },
+      },
+      // Shopping cart card
+      {
+        id: 'cart-card',
+        component: 'CartCard',
+        cart: { path: '/cart' },
+        updateAction: {
+          event: {
+            name: 'update_quantity',
+            context: { productId: {}, quantity: {} },
+          },
+        },
+        removeAction: {
+          event: {
+            name: 'remove_from_cart',
+            context: { productId: {} },
+          },
+        },
+      },
+      // Order summary card
+      {
+        id: 'order-summary-card',
+        component: 'OrderSummaryCard',
+        cart: { path: '/cart' },
+        checkoutAction: {
+          event: {
+            name: 'checkout',
+            context: { orderData: {} },
+          },
+        },
+      },
+      // Wrap each card with ColWrapper to implement equal-width three columns
+      {
+        id: 'col-products',
+        component: 'ColWrapper',
+        span: 8,
+        children: ['product-list-card'],
+      },
+      {
+        id: 'col-cart',
+        component: 'ColWrapper',
+        span: 8,
+        children: ['cart-card'],
+      },
+      {
+        id: 'col-summary',
+        component: 'ColWrapper',
+        span: 8,
+        children: ['order-summary-card'],
+      },
+      // Root container: MultiCardContainer contains three columns
+      {
+        id: 'root',
+        component: 'MultiCardContainer',
+        children: ['col-products', 'col-cart', 'col-summary'],
+      },
+    ],
+  },
+};
+
+// Initialize data model
+const InitDataModel: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'shop',
+    path: '/',
+    value: {
+      products: allProducts,
+      cart: [],
+    },
+  },
+};
+
+// Create success card after checkout
+const CreateCheckoutSuccessSurface: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'checkout-success',
+    catalogId: 'local://cart_demo_catalog.json',
+  },
+};
+
+const UpdateCheckoutSuccessComponents = (
+  total: number,
+  itemCount: number,
+  orderNumber: string,
+): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'checkout-success',
+    components: [
+      {
+        id: 'root',
+        component: 'CheckoutSuccessCard',
+        total,
+        itemCount,
+        orderNumber,
+      },
+    ],
+  },
+});
+
+// ─── App Component ──────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  // Cart state (for cross-component data sharing)
+  const [cart, setCart] = useState<CartItem[]>([]);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  // Handle cart operations
+  const handleAction = (payload: ActionPayload) => {
+    const { name, context } = payload;
+
+    switch (name) {
+      case 'add_to_cart': {
+        const product = context?.product as Product;
+        if (!product) return;
+
+        setCart((prev) => {
+          const existing = prev.find((item) => item.product.id === product.id);
+          if (existing) {
+            return prev.map((item) =>
+              item.product.id === product.id ? { ...item, quantity: item.quantity + 1 } : item,
+            );
+          }
+          return [...prev, { product, quantity: 1 }];
+        });
+        break;
+      }
+
+      case 'update_quantity': {
+        const { productId, quantity } = context || {};
+        if (!productId || !quantity) return;
+
+        setCart((prev) =>
+          prev.map((item) => (item.product.id === productId ? { ...item, quantity } : item)),
+        );
+        break;
+      }
+
+      case 'remove_from_cart': {
+        const { productId } = context || {};
+        if (!productId) return;
+
+        setCart((prev) => prev.filter((item) => item.product.id !== productId));
+        break;
+      }
+
+      case 'checkout': {
+        const { total, itemCount } = context || {};
+        const orderNumber = `ORD-${Date.now().toString(36).toUpperCase()}`;
+
+        // Delete shopping Surface
+        onAgentCommand({ version: 'v0.9', deleteSurface: { surfaceId: 'shop' } });
+
+        // Create checkout success card
+        setTimeout(() => {
+          onAgentCommand(CreateCheckoutSuccessSurface);
+          onAgentCommand(UpdateCheckoutSuccessComponents(total, itemCount, orderNumber));
+        }, 100);
+
+        // Clear cart
+        setCart([]);
+        break;
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(CreateShopSurface);
+      onAgentCommand(UpdateShopComponents);
+      onAgentCommand(InitDataModel);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  // Update Surface data model when cart changes
+  useEffect(() => {
+    if (card.some((c) => c.id === 'shop')) {
+      onAgentCommand({
+        version: 'v0.9',
+        updateDataModel: {
+          surfaceId: 'shop',
+          path: '/cart',
+          value: cart,
+        },
+      });
+    }
+  }, [cart]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'shop' } },
+      { version: 'v0.9', deleteSurface: { surfaceId: 'checkout-success' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setCart([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: streamStatusHeader === 'RUNNING' ? Date.now() : 0 },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          ProductListCard,
+          CartCard,
+          OrderSummaryCard,
+          CheckoutSuccessCard,
+          MultiCardContainer,
+          ColWrapper,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 700 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/nested-interaction.md b/packages/x/docs/x-card/demo/A2UI_v0.9/nested-interaction.md
new file mode 100644
index 0000000000..50a0bef386
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/nested-interaction.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的复杂交互与嵌套组件示例。演示了可展开的详情卡片、树形文件浏览器和手风琴折叠面板，配合 catalog 机制。
+
+## en-US
+
+Complex interaction and nested components example implementing A2UI v0.9 protocol with XCard. Demonstrates expandable detail cards, tree file browser, and accordion folding panels with catalog mechanism.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/nested-interaction.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/nested-interaction.tsx
new file mode 100644
index 0000000000..5993c060d8
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/nested-interaction.tsx
@@ -0,0 +1,774 @@
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  FileOutlined,
+  FolderOpenOutlined,
+  FolderOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { ActionPayload, Catalog, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { registerCatalog, XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, Card, Collapse, CollapseProps, Space, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// Import local catalog schema
+import localCatalog from './catalog-nested.json';
+
+// Register local catalog
+registerCatalog(localCatalog as unknown as Catalog);
+
+const { Text } = Typography;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Data Type Definitions
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface FileNode {
+  key: string;
+  name: string;
+  type: 'file' | 'folder';
+  children?: FileNode[];
+  size?: number;
+  modified?: string;
+  language?: string;
+  description?: string;
+}
+
+interface FileDetail {
+  name: string;
+  path: string;
+  size: number;
+  modified: string;
+  language: string;
+  description: string;
+  content?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mock Data
+// ─────────────────────────────────────────────────────────────────────────────
+
+const PROJECT_FILES: FileNode[] = [
+  {
+    key: 'src',
+    name: 'src',
+    type: 'folder',
+    children: [
+      {
+        key: 'src/components',
+        name: 'components',
+        type: 'folder',
+        children: [
+          {
+            key: 'src/components/Button.tsx',
+            name: 'Button.tsx',
+            type: 'file',
+            size: 2048,
+            modified: '2024-01-15',
+            language: 'TypeScript',
+            description: 'A reusable button component with multiple variants',
+          },
+          {
+            key: 'src/components/Card.tsx',
+            name: 'Card.tsx',
+            type: 'file',
+            size: 3584,
+            modified: '2024-01-14',
+            language: 'TypeScript',
+            description: 'Card component for displaying content in a container',
+          },
+          {
+            key: 'src/components/Modal.tsx',
+            name: 'Modal.tsx',
+            type: 'file',
+            size: 4096,
+            modified: '2024-01-13',
+            language: 'TypeScript',
+            description: 'Modal dialog component with overlay',
+          },
+        ],
+      },
+      {
+        key: 'src/hooks',
+        name: 'hooks',
+        type: 'folder',
+        children: [
+          {
+            key: 'src/hooks/useAuth.ts',
+            name: 'useAuth.ts',
+            type: 'file',
+            size: 1536,
+            modified: '2024-01-12',
+            language: 'TypeScript',
+            description: 'Authentication hook for user login/logout',
+          },
+          {
+            key: 'src/hooks/useTheme.ts',
+            name: 'useTheme.ts',
+            type: 'file',
+            size: 1024,
+            modified: '2024-01-11',
+            language: 'TypeScript',
+            description: 'Theme management hook',
+          },
+        ],
+      },
+      {
+        key: 'src/App.tsx',
+        name: 'App.tsx',
+        type: 'file',
+        size: 2560,
+        modified: '2024-01-10',
+        language: 'TypeScript',
+        description: 'Main application entry component',
+      },
+      {
+        key: 'src/index.tsx',
+        name: 'index.tsx',
+        type: 'file',
+        size: 512,
+        modified: '2024-01-09',
+        language: 'TypeScript',
+        description: 'Application bootstrap file',
+      },
+    ],
+  },
+  {
+    key: 'public',
+    name: 'public',
+    type: 'folder',
+    children: [
+      {
+        key: 'public/index.html',
+        name: 'index.html',
+        type: 'file',
+        size: 768,
+        modified: '2024-01-08',
+        language: 'HTML',
+        description: 'HTML template for the application',
+      },
+      {
+        key: 'public/favicon.ico',
+        name: 'favicon.ico',
+        type: 'file',
+        size: 4096,
+        modified: '2024-01-07',
+        language: 'Binary',
+        description: 'Application favicon',
+      },
+    ],
+  },
+  {
+    key: 'package.json',
+    name: 'package.json',
+    type: 'file',
+    size: 1280,
+    modified: '2024-01-16',
+    language: 'JSON',
+    description: 'Project dependencies and scripts configuration',
+  },
+  {
+    key: 'README.md',
+    name: 'README.md',
+    type: 'file',
+    size: 2048,
+    modified: '2024-01-17',
+    language: 'Markdown',
+    description: 'Project documentation and usage guide',
+  },
+];
+
+const PANEL_DATA = [
+  {
+    id: 'overview',
+    title: 'Project Overview',
+    content:
+      'This is a React-based web application built with TypeScript. It follows a component-based architecture with hooks for state management.',
+  },
+  {
+    id: 'tech-stack',
+    title: 'Tech Stack',
+    content:
+      '- React 18.x\n- TypeScript 5.x\n- Ant Design 5.x\n- Vite for build tooling\n- ESLint & Prettier for code quality',
+  },
+  {
+    id: 'structure',
+    title: 'Directory Structure',
+    content:
+      '- src/components: Reusable UI components\n- src/hooks: Custom React hooks\n- public: Static assets\n- package.json: Dependencies',
+  },
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Content Rendering
+// ─────────────────────────────────────────────────────────────────────────────
+
+const contentHeader =
+  'Welcome to Project File Browser! Browse the project structure below. Click on files to view details, expand folders to explore nested contents.';
+
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component Definitions
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Text Component
+interface TextProps {
+  text?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | string;
+  children?: React.ReactNode;
+}
+
+const TextComponent: React.FC<TextProps> = ({ text, variant, children }) => {
+  const content = text ?? children;
+  if (!content) return null;
+  const styleMap: Record<string, React.CSSProperties> = {
+    h1: { fontSize: 20, fontWeight: 700, margin: '0 0 12px' },
+    h2: { fontSize: 17, fontWeight: 600, margin: '0 0 8px' },
+    h3: { fontSize: 15, fontWeight: 600, margin: '0 0 6px' },
+    body: { fontSize: 14, margin: 0 },
+  };
+  const style = styleMap[variant ?? 'body'] ?? styleMap.body;
+  return <p style={style}>{content}</p>;
+};
+
+// File Tree Node Component
+interface TreeNodeProps {
+  node: FileNode;
+  level: number;
+  selectedKey?: string;
+  onFileClick: (file: FileNode) => void;
+}
+
+const TreeNode: React.FC<TreeNodeProps> = ({ node, level, selectedKey, onFileClick }) => {
+  const [expanded, setExpanded] = useState(false);
+  const isFolder = node.type === 'folder';
+  const isSelected = selectedKey === node.key;
+
+  const handleClick = () => {
+    if (isFolder) {
+      setExpanded(!expanded);
+    } else {
+      onFileClick(node);
+    }
+  };
+
+  return (
+    <div>
+      <div
+        onClick={handleClick}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '6px 8px',
+          cursor: 'pointer',
+          borderRadius: 6,
+          background: isSelected ? '#e6f4ff' : 'transparent',
+          borderLeft: `3px solid ${isSelected ? '#1677ff' : 'transparent'}`,
+          marginLeft: level * 12,
+          transition: 'all 0.2s',
+        }}
+      >
+        {isFolder ? (
+          expanded ? (
+            <FolderOpenOutlined style={{ color: '#faad14' }} />
+          ) : (
+            <FolderOutlined style={{ color: '#faad14' }} />
+          )
+        ) : (
+          <FileOutlined style={{ color: '#1677ff' }} />
+        )}
+        <Text style={{ flex: 1, fontSize: 13 }}>{node.name}</Text>
+        {isFolder && node.children && (
+          <Text type="secondary" style={{ fontSize: 11 }}>
+            {node.children.length}
+          </Text>
+        )}
+      </div>
+      {isFolder && expanded && node.children && (
+        <div>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.key}
+              node={child}
+              level={level + 1}
+              selectedKey={selectedKey}
+              onFileClick={onFileClick}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// File Tree Component
+interface FileTreeProps {
+  files?: FileNode[];
+  action?: {
+    event?: {
+      name?: string;
+      context?: Record<string, any>;
+    };
+  };
+  onAction?: (name: string, context: Record<string, any>) => void;
+  selectedFile?: FileDetail;
+}
+
+const FileTree: React.FC<FileTreeProps> = ({ files, action, onAction, selectedFile }) => {
+  const treeData = files && files.length > 0 ? files : PROJECT_FILES;
+
+  const handleFileClick = (file: FileNode) => {
+    if (!action?.event?.name) return;
+
+    const fileDetail: FileDetail = {
+      name: file.name,
+      path: file.key,
+      size: file.size || 0,
+      modified: file.modified || '',
+      language: file.language || 'Unknown',
+      description: file.description || '',
+    };
+
+    const context: Record<string, any> = {};
+    if (action.event.context) {
+      Object.keys(action.event.context).forEach((key) => {
+        context[key] = fileDetail;
+      });
+    }
+
+    onAction?.(action.event.name, context);
+  };
+
+  return (
+    <div
+      style={{
+        borderRadius: 12,
+        border: '1px solid #e8e8e8',
+        background: '#fff',
+        maxHeight: 400,
+        overflow: 'auto',
+      }}
+    >
+      <div style={{ padding: '12px 8px' }}>
+        {treeData.map((node) => (
+          <TreeNode
+            key={node.key}
+            node={node}
+            level={0}
+            selectedKey={selectedFile?.path}
+            onFileClick={handleFileClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// File Detail Card Component
+interface FileDetailCardProps {
+  file?: FileDetail;
+  onClose?: () => void;
+}
+
+const FileDetailCard: React.FC<FileDetailCardProps> = ({ file, onClose }) => {
+  if (!file) return null;
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const getLanguageColor = (lang: string) => {
+    const colors: Record<string, string> = {
+      TypeScript: '#3178c6',
+      JavaScript: '#f7df1e',
+      HTML: '#e34c26',
+      JSON: '#292929',
+      Markdown: '#083fa1',
+    };
+    return colors[lang] || '#666';
+  };
+
+  return (
+    <Card
+      size="small"
+      title={
+        <Space>
+          <FileOutlined style={{ color: '#1677ff' }} />
+          <Text strong>{file.name}</Text>
+        </Space>
+      }
+      extra={
+        onClose && <Button type="text" size="small" icon={<CloseOutlined />} onClick={onClose} />
+      }
+      style={{ borderRadius: 12 }}
+      styles={{ body: { padding: '16px' } }}
+    >
+      <Space direction="vertical" size={12} style={{ width: '100%' }}>
+        <div>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            Path
+          </Text>
+          <br />
+          <Text code style={{ fontSize: 13 }}>
+            {file.path}
+          </Text>
+        </div>
+
+        <div style={{ display: 'flex', gap: 24 }}>
+          <div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Size
+            </Text>
+            <br />
+            <Text style={{ fontSize: 13 }}>{formatSize(file.size)}</Text>
+          </div>
+          <div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Modified
+            </Text>
+            <br />
+            <Text style={{ fontSize: 13 }}>{file.modified}</Text>
+          </div>
+        </div>
+
+        <div>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            Language
+          </Text>
+          <br />
+          <Tag color={getLanguageColor(file.language)}>{file.language}</Tag>
+        </div>
+
+        {file.description && (
+          <div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Description
+            </Text>
+            <br />
+            <Text style={{ fontSize: 13 }}>{file.description}</Text>
+          </div>
+        )}
+      </Space>
+    </Card>
+  );
+};
+
+// Accordion Panel Component
+interface AccordionPanelProps {
+  panels?: Array<{ id: string; title: string; content: string }>;
+  children?: React.ReactNode;
+}
+
+const AccordionPanel: React.FC<AccordionPanelProps> = ({ panels, children }) => {
+  const panelData = panels && panels.length > 0 ? panels : PANEL_DATA;
+
+  const items: CollapseProps['items'] = panelData.map((panel, index) => ({
+    key: panel.id || String(index),
+    label: (
+      <Space>
+        <CheckCircleOutlined style={{ color: '#52c41a' }} />
+        <Text strong>{panel.title}</Text>
+      </Space>
+    ),
+    children: <Text style={{ fontSize: 13, whiteSpace: 'pre-wrap' }}>{panel.content}</Text>,
+    style: { marginBottom: 8, borderRadius: 8 },
+  }));
+
+  return (
+    <div style={{ minWidth: 300 }}>
+      <Collapse
+        accordion
+        items={items}
+        defaultActiveKey={['overview']}
+        style={{ background: '#fff' }}
+      />
+      {children}
+    </div>
+  );
+};
+
+// Main Container Component
+interface MainContainerProps {
+  children?: React.ReactNode;
+}
+
+const MainContainer: React.FC<MainContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        marginBlock: 16,
+        minWidth: 500,
+      }}
+    >
+      <Space vertical style={{ width: '100%' }} size={16}>
+        {children}
+      </Space>
+    </div>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Streaming Text Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// v0.9 Agent Command Definitions
+// ─────────────────────────────────────────────────────────────────────────────
+
+const CreateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'browser',
+    catalogId: 'local://nested_interaction_catalog.json',
+  },
+};
+
+const UpdateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'browser',
+    components: [
+      {
+        id: 'title',
+        component: 'Text',
+        text: 'Project File Browser',
+        variant: 'h1',
+      },
+      {
+        id: 'file-tree',
+        component: 'FileTree',
+        selectedFile: { path: '/browser/selectedFile' },
+        action: {
+          event: {
+            name: 'select_file',
+            context: {
+              selectedFile: { path: '/browser/selectedFile' },
+            },
+          },
+        },
+      },
+      {
+        id: 'file-detail',
+        component: 'FileDetailCard',
+        file: { path: '/browser/selectedFile' },
+      },
+      {
+        id: 'accordion-section',
+        component: 'AccordionPanel',
+        panels: { path: '/browser/panels' },
+      },
+      {
+        id: 'root',
+        component: 'MainContainer',
+        children: ['title', 'file-tree', 'file-detail', 'accordion-section'],
+      },
+    ],
+  },
+};
+
+const UpdateModel: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'browser',
+    path: '/browser',
+    value: {
+      panels: PANEL_DATA,
+    },
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// App Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  const handleAction = (payload: ActionPayload) => {
+    if (payload.name === 'select_file') {
+      const { selectedFile } = payload.context || {};
+      if (selectedFile) {
+        onAgentCommand({
+          version: 'v0.9',
+          updateDataModel: {
+            surfaceId: 'browser',
+            path: '/browser/selectedFile',
+            value: selectedFile,
+          },
+        });
+      }
+    }
+  };
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    timestamp: timestampHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(contentHeader);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      onAgentCommand(CreateCard);
+      onAgentCommand(UpdateCard);
+      onAgentCommand(UpdateModel);
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const handleReload = useCallback(() => {
+    resetHeader();
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'browser' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader]);
+
+  const items = [
+    {
+      content: {
+        texts: [{ text: textHeader, timestamp: timestampHeader }].filter(
+          (item) => item.timestamp !== 0,
+        ),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        onAction={handleAction}
+        components={{
+          Text: TextComponent,
+          FileTree,
+          FileDetailCard,
+          AccordionPanel,
+          MainContainer,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 700 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/progressive.md b/packages/x/docs/x-card/demo/A2UI_v0.9/progressive.md
new file mode 100644
index 0000000000..b9b6583309
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/progressive.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的渐进式加载示例。演示了如何分批次加载产品数据，并通过 `updateComponents` 命令渐进式更新组件，配合加载指示器展示加载进度，实现流畅的加载体验。
+
+## en-US
+
+Progressive loading example of implementing A2UI v0.9 protocol with XCard. Demonstrates how to load product data in batches and progressively update components using `updateComponents` commands, combined with a loading indicator to show progress and achieve a smooth loading experience.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/progressive.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/progressive.tsx
new file mode 100644
index 0000000000..2f6c158406
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/progressive.tsx
@@ -0,0 +1,527 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { Catalog, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { registerCatalog, XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Badge, Button, Card, Progress, Space, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// Import local catalog schema
+import localCatalog from './catalog.json';
+
+// Register local catalog
+registerCatalog(localCatalog as unknown as Catalog);
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+// ─── Mock Data: Product List (Batch Loading) ──────────────────────────────────────
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  category: string;
+  stock: number;
+  tag?: string;
+}
+
+const allProducts: Product[][] = [
+  [
+    {
+      id: 1,
+      name: 'Wireless Bluetooth Earphones',
+      price: 299,
+      category: 'Digital',
+      stock: 156,
+      tag: 'Hot',
+    },
+    { id: 2, name: 'Mechanical Keyboard', price: 459, category: 'Digital', stock: 89 },
+  ],
+  [
+    { id: 3, name: 'Smart Watch', price: 1299, category: 'Wearable', stock: 45, tag: 'New' },
+    { id: 4, name: 'Portable Power Bank', price: 99, category: 'Accessories', stock: 234 },
+  ],
+  [
+    {
+      id: 5,
+      name: 'Noise Cancelling Headphones',
+      price: 899,
+      category: 'Digital',
+      stock: 67,
+      tag: 'Recommended',
+    },
+    { id: 6, name: 'Wireless Charger', price: 149, category: 'Accessories', stock: 178 },
+  ],
+  [
+    { id: 7, name: 'Smart Speaker', price: 399, category: 'Home', stock: 112, tag: 'Hot' },
+    { id: 8, name: 'Fitness Tracker', price: 199, category: 'Wearable', stock: 256 },
+  ],
+];
+
+// ─── Role Configuration ────────────────────────────────────────────────────────
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── ProductCard Component ────────────────────────────────────────────
+interface ProductCardProps {
+  name?: string;
+  price?: number;
+  category?: string;
+  stock?: number;
+  tag?: string;
+  index?: number;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ name, price, category, stock, tag, index }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    // Delayed display for progressive animation
+    const timer = setTimeout(
+      () => {
+        setVisible(true);
+      },
+      index ? index * 150 : 0,
+    );
+    return () => clearTimeout(timer);
+  }, [index]);
+
+  return (
+    <Card
+      hoverable
+      style={{
+        width: '100%',
+        maxWidth: 320,
+        borderRadius: 12,
+        overflow: 'hidden',
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'translateY(0)' : 'translateY(20px)',
+        transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        border: '1px solid #f0f0f0',
+      }}
+      styles={{ body: { padding: 16 } }}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size={8}>
+        {/* Tag and name */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Typography.Text
+            strong
+            style={{ fontSize: 16, color: '#1a1a1a', flex: 1, lineHeight: '22px' }}
+          >
+            {name}
+          </Typography.Text>
+          {tag && (
+            <Tag
+              color="orange"
+              style={{
+                fontSize: 11,
+                padding: '0 8px',
+                lineHeight: '20px',
+                borderRadius: 8,
+                margin: 0,
+              }}
+            >
+              {tag}
+            </Tag>
+          )}
+        </div>
+
+        {/* Price */}
+        <div>
+          <Typography.Text style={{ fontSize: 20, fontWeight: 700, color: '#ff4d4f' }}>
+            ¥{price}
+          </Typography.Text>
+        </div>
+
+        {/* Footer info */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Badge
+            color="blue"
+            text={
+              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                {category}
+              </Typography.Text>
+            }
+          />
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            Stock: {stock}
+          </Typography.Text>
+        </div>
+      </Space>
+    </Card>
+  );
+};
+
+// ─── ProductContainer Component ────────────────────────────────────────
+interface ProductContainerProps {
+  children?: React.ReactNode;
+}
+
+const ProductContainer: React.FC<ProductContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1px solid #e8e8e8',
+        padding: 20,
+        background: '#fafafa',
+        minWidth: 320,
+        maxWidth: 720,
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+          gap: 16,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+// ─── LoadingIndicator Component ─────────────────────────────────────
+interface LoadingIndicatorProps {
+  progress?: number;
+  total?: number;
+  loading?: boolean;
+}
+
+const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
+  progress = 0,
+  total = 100,
+  loading,
+}) => {
+  const percent = Math.round((progress / total) * 100);
+
+  return (
+    <div
+      style={{
+        padding: '16px 20px',
+        background: '#fff',
+        borderRadius: 12,
+        marginBlock: 16,
+        border: '1px solid #e8e8e8',
+        minWidth: 320,
+        maxWidth: 720,
+      }}
+    >
+      <Space vertical style={{ width: '100%' }} size={12}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography.Text style={{ fontSize: 14, fontWeight: 500 }}>
+            {loading ? 'Loading product data...' : 'Loading complete'}
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            {progress}/{total} products
+          </Typography.Text>
+        </div>
+        <Progress
+          percent={percent}
+          status={loading ? 'active' : 'success'}
+          strokeColor={{
+            '0%': '#108ee9',
+            '100%': '#87d068',
+          }}
+          showInfo={false}
+        />
+      </Space>
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    // Clear previous timer
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+      }
+    }, 100);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    // Clear timer
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    // Reset state
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─── Agent Commands ────────────────────────────────────────────────────────────────
+const CreateCard: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'progressive-demo',
+    catalogId: 'local://coffee_booking_catalog.json',
+  },
+};
+
+// Create update card command (based on product data)
+const UpdateProductCard = (products: Product[]): XAgentCommand_v0_9 => {
+  const productComponents = products.map((product, idx) => ({
+    id: `product-${product.id}`,
+    component: 'ProductCard',
+    name: product.name,
+    price: product.price,
+    category: product.category,
+    stock: product.stock,
+    tag: product.tag,
+    index: idx,
+  }));
+
+  return {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'progressive-demo',
+      components: [
+        ...productComponents,
+        {
+          id: 'root',
+          component: 'ProductContainer',
+          children: products.map((p) => `product-${p.id}`),
+        },
+      ],
+    },
+  };
+};
+
+// Create loading indicator command
+const CreateLoadingIndicator = (): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'loading-indicator',
+    catalogId: 'local://coffee_booking_catalog.json',
+  },
+});
+
+const UpdateLoadingIndicator = (
+  progress: number,
+  total: number,
+  loading: boolean,
+): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'loading-indicator',
+    components: [
+      {
+        id: 'root',
+        component: 'LoadingIndicator',
+        progress,
+        total,
+        loading,
+      },
+    ],
+  },
+});
+
+// ─── App ────────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  // Command queue: append new commands, array reference change triggers Box/Card useEffect
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const loadingTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const batchCountRef = useRef(0);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    // Append to queue end, ensure every command is processed by Box/Card
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  const welcomeText =
+    '🎉 Welcome to the progressive product showcase!\n\nProduct data will be loaded in batches, 2 products at a time. You can observe how components are displayed progressively.';
+  const completeText = '✅ All products loaded! Total 8 products loaded.';
+
+  const {
+    text: textHeader,
+    streamStatus: streamStatusHeader,
+    timestamp: timestampHeader,
+    run: runHeader,
+    reset: resetHeader,
+  } = useStreamText(welcomeText);
+
+  const {
+    text: textFooter,
+    timestamp: timestampFooter,
+    run: runFooter,
+    reset: resetFooter,
+  } = useStreamText(completeText);
+
+  useEffect(() => {
+    runHeader();
+  }, [sessionKey, runHeader]);
+
+  useEffect(() => {
+    if (streamStatusHeader === 'FINISHED') {
+      // Send commands in A2UI v0.9 spec order:
+      // 1. createSurface (initialize Surface)
+      // 2. updateComponents (define component structure)
+      // Command queue guarantees sequential processing, no setTimeout magic numbers needed
+      onAgentCommand(CreateLoadingIndicator());
+      onAgentCommand(UpdateLoadingIndicator(0, 8, true));
+      onAgentCommand(CreateCard);
+      startProgressiveLoading();
+    }
+  }, [streamStatusHeader, sessionKey]);
+
+  const startProgressiveLoading = useCallback(() => {
+    batchCountRef.current = 0;
+
+    // Accumulated loaded products
+    const loadedProducts: Product[] = [];
+
+    const loadNextBatch = () => {
+      if (batchCountRef.current >= allProducts.length) {
+        onAgentCommand(UpdateLoadingIndicator(8, 8, false));
+        setTimeout(() => runFooter(), 500);
+        return;
+      }
+
+      const currentProducts = allProducts[batchCountRef.current];
+      // Accumulate products
+      loadedProducts.push(...currentProducts);
+
+      const progress = (batchCountRef.current + 1) * 2;
+      onAgentCommand(UpdateLoadingIndicator(progress, 8, true));
+
+      setTimeout(() => {
+        // Pass all accumulated products
+        onAgentCommand(UpdateProductCard([...loadedProducts]));
+      }, 50);
+
+      batchCountRef.current++;
+      loadingTimerRef.current = setTimeout(loadNextBatch, 1500);
+    };
+
+    loadNextBatch();
+  }, [runFooter]);
+
+  const handleReload = useCallback(() => {
+    if (loadingTimerRef.current) {
+      clearTimeout(loadingTimerRef.current);
+      loadingTimerRef.current = null;
+    }
+
+    resetHeader();
+    resetFooter();
+    batchCountRef.current = 0;
+
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'loading-indicator' } },
+      { version: 'v0.9', deleteSurface: { surfaceId: 'progressive-demo' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetHeader, resetFooter]);
+
+  const items = [
+    {
+      content: {
+        texts: [
+          { text: textHeader, timestamp: timestampHeader },
+          { text: textFooter, timestamp: timestampFooter },
+        ].filter((item) => item.timestamp !== 0),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Reload
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        components={{
+          ProductCard,
+          ProductContainer,
+          LoadingIndicator,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 800 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/streaming.md b/packages/x/docs/x-card/demo/A2UI_v0.9/streaming.md
new file mode 100644
index 0000000000..f341c5afe1
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/streaming.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 XCard 实现 A2UI v0.9 协议的流式内容与实时更新示例。演示了 AI 推荐结果的流式展示、组件逐步加载动画和加载进度指示，配合 catalog 机制。
+
+## en-US
+
+Streaming content and real-time updates example implementing A2UI v0.9 protocol with XCard. Demonstrates streaming display of AI recommendation results, progressive component loading animations, and loading progress indicators with catalog mechanism.
diff --git a/packages/x/docs/x-card/demo/A2UI_v0.9/streaming.tsx b/packages/x/docs/x-card/demo/A2UI_v0.9/streaming.tsx
new file mode 100644
index 0000000000..bd6010e5cc
--- /dev/null
+++ b/packages/x/docs/x-card/demo/A2UI_v0.9/streaming.tsx
@@ -0,0 +1,714 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import type { Catalog, XAgentCommand_v0_9 } from '@ant-design/x-card';
+import { registerCatalog, XCard } from '@ant-design/x-card';
+import XMarkdown from '@ant-design/x-markdown';
+import { Button, Card, List, Progress, Rate, Spin, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+// Import local catalog schema
+import localCatalog from './catalog-streaming.json';
+
+// Register local catalog
+registerCatalog(localCatalog as unknown as Catalog);
+
+// ─── Type Definitions ────────────────────────────────────────────────────────────────────
+type TextNode = { text: string; timestamp: number };
+type CardNode = { timestamp: number; id: string };
+type ContentType = {
+  texts: TextNode[];
+  card: CardNode[];
+};
+
+const role = {
+  assistant: {
+    contentRender: (content: ContentType) => {
+      const contentList = [...content.texts, ...content.card].sort(
+        (a, b) => a.timestamp - b.timestamp,
+      );
+      return contentList.map((node, index) => {
+        if ('text' in node && node.text) {
+          return <XMarkdown key={index}>{node.text}</XMarkdown>;
+        }
+
+        if ('id' in node && node.id) {
+          return <XCard.Card key={index} id={node.id} />;
+        }
+        return null;
+      });
+    },
+  },
+};
+
+// ─── Restaurant Data ────────────────────────────────────────────────────────────────────
+interface RestaurantItem {
+  id: string;
+  name: string;
+  cuisine: string;
+  rating: number;
+  priceRange: string;
+  distance: string;
+  tags: string[];
+  description: string;
+  image?: string;
+}
+
+const RESTAURANT_DATA: RestaurantItem[] = [
+  {
+    id: 'r1',
+    name: 'Jiangnan Bistro',
+    cuisine: 'Jiangsu-Zhejiang',
+    rating: 4.8,
+    priceRange: '¥80-150',
+    distance: '500m',
+    tags: ['Local Cuisine', 'Elegant Ambiance'],
+    description:
+      'Authentic Jiangsu-Zhejiang flavors with locally sourced ingredients. Signature dishes: Braised Pork, Steamed Sea Bass.',
+  },
+  {
+    id: 'r2',
+    name: 'Sichuan House',
+    cuisine: 'Sichuan',
+    rating: 4.6,
+    priceRange: '¥60-120',
+    distance: '800m',
+    tags: ['Spicy & Flavorful', 'Great Value'],
+    description:
+      'Authentic Sichuan cuisine, spicy and aromatic. Recommended: Boiled Fish, Mapo Tofu, Twice-cooked Pork.',
+  },
+  {
+    id: 'r3',
+    name: 'Sakura Japanese',
+    cuisine: 'Japanese',
+    rating: 4.9,
+    priceRange: '¥150-300',
+    distance: '1.2km',
+    tags: ['Exquisite Cuisine', 'Perfect for Dates'],
+    description:
+      'Fresh sashimi, exquisite sushi, fusion of traditional and modern Japanese. Chef from Tokyo Ginza.',
+  },
+  {
+    id: 'r4',
+    name: 'Italian Garden',
+    cuisine: 'Western',
+    rating: 4.5,
+    priceRange: '¥120-250',
+    distance: '900m',
+    tags: ['Romantic Atmosphere', 'Handmade Pasta'],
+    description:
+      'Authentic Italian flavors, handmade pasta with imported ingredients. Signature: Creamy Mushroom Pasta, Tiramisu.',
+  },
+];
+
+// ─── Text Component ────────────────────────────────────────────────────────────────
+interface TextProps {
+  text?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | 'success' | string;
+  children?: React.ReactNode;
+  status?: string;
+}
+
+const Text: React.FC<TextProps> = ({ text, variant, children, status }) => {
+  const content = text ?? children;
+  if (!content) return null;
+  const styleMap: Record<string, React.CSSProperties> = {
+    h1: { fontSize: 20, fontWeight: 700, margin: '0 0 12px' },
+    h2: { fontSize: 17, fontWeight: 600, margin: '0 0 8px' },
+    h3: { fontSize: 15, fontWeight: 600, margin: '0 0 6px' },
+    body: { fontSize: 14, margin: 0 },
+    success: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: '#52c41a',
+      margin: '4px 0 0',
+      padding: '6px 10px',
+      borderRadius: 8,
+      background: '#f6ffed',
+      border: '1px solid #b7eb8f',
+    },
+  };
+  const style = styleMap[variant ?? 'body'] ?? styleMap.body;
+  const finalStyle = status === 'success' ? styleMap.success : style;
+
+  return <p style={finalStyle}>{content}</p>;
+};
+
+// ─── LoadingProgress Component ──────────────────────────────────────────────────────
+interface LoadingProgressProps {
+  percent?: number;
+  status?: 'active' | 'success' | 'normal';
+  text?: string;
+}
+
+const LoadingProgress: React.FC<LoadingProgressProps> = ({
+  percent = 0,
+  status = 'active',
+  text,
+}) => {
+  return (
+    <div
+      style={{
+        padding: '16px 20px',
+        background: '#fff',
+        borderRadius: 12,
+        border: '1px solid #f0f0f0',
+        marginBottom: 16,
+        minWidth: 320,
+        maxWidth: 480,
+      }}
+    >
+      <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          {text || 'Loading recommendations...'}
+        </Typography.Text>
+        <Typography.Text style={{ fontSize: 13, fontWeight: 500 }}>
+          {Math.round(percent)}%
+        </Typography.Text>
+      </div>
+      <Progress
+        percent={percent}
+        status={status}
+        showInfo={false}
+        strokeColor={{
+          '0%': '#108ee9',
+          '100%': '#87d068',
+        }}
+      />
+    </div>
+  );
+};
+
+// ─── RestaurantCard Component ────────────────────────────────────────────────────────
+interface RestaurantCardProps {
+  restaurant?: RestaurantItem;
+  index?: number;
+  isLoading?: boolean;
+}
+
+const RestaurantCard: React.FC<RestaurantCardProps> = ({ restaurant, index = 0, isLoading }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!isLoading && restaurant) {
+      // Staggered loading animation delay
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, index * 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading, restaurant, index]);
+
+  if (isLoading) {
+    return (
+      <Card
+        style={{
+          width: '100%',
+          borderRadius: 12,
+          opacity: 0.6,
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'center', padding: 20 }}>
+          <Spin tip="Loading..." />
+        </div>
+      </Card>
+    );
+  }
+
+  if (!restaurant) return null;
+
+  return (
+    <Card
+      style={{
+        width: '100%',
+        borderRadius: 12,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'translateY(0)' : 'translateY(20px)',
+        transition: 'all 0.4s ease-out',
+        marginBottom: 12,
+      }}
+      styles={{ body: { padding: '16px 20px' } }}
+    >
+      <div style={{ display: 'flex', gap: 16 }}>
+        {/* Left icon */}
+        <div
+          style={{
+            width: 64,
+            height: 64,
+            borderRadius: 12,
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            fontSize: 28,
+          }}
+        >
+          🍽️
+        </div>
+
+        {/* Right content */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+            <Typography.Text strong style={{ fontSize: 16 }}>
+              {restaurant.name}
+            </Typography.Text>
+            <Tag color="blue" style={{ margin: 0 }}>
+              {restaurant.cuisine}
+            </Tag>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
+            <Rate disabled defaultValue={restaurant.rating} style={{ fontSize: 12 }} />
+            <Typography.Text style={{ fontSize: 13, color: '#faad14' }}>
+              {restaurant.rating}
+            </Typography.Text>
+            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+              | {restaurant.distance}
+            </Typography.Text>
+            <Typography.Text style={{ fontSize: 13, color: '#52c41a' }}>
+              {restaurant.priceRange}
+            </Typography.Text>
+          </div>
+
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, display: 'block', marginBottom: 8 }}
+            ellipsis
+          >
+            {restaurant.description}
+          </Typography.Text>
+
+          <div style={{ display: 'flex', gap: 6 }}>
+            {restaurant.tags.map((tag, i) => (
+              <Tag
+                key={i}
+                style={{
+                  fontSize: 11,
+                  borderRadius: 6,
+                  background: '#f5f5f5',
+                  border: 'none',
+                  margin: 0,
+                }}
+              >
+                {tag}
+              </Tag>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+// ─── RestaurantList Component ────────────────────────────────────────────────────────
+interface RestaurantListProps {
+  restaurants?: RestaurantItem[];
+  loadingProgress?: number;
+  isStreaming?: boolean;
+}
+
+const RestaurantList: React.FC<RestaurantListProps> = ({
+  restaurants = [],
+  loadingProgress = 0,
+  isStreaming = false,
+}) => {
+  const safeRestaurants = Array.isArray(restaurants) ? restaurants : [];
+  const visibleRestaurants = isStreaming
+    ? safeRestaurants.slice(0, Math.ceil((loadingProgress / 100) * safeRestaurants.length))
+    : safeRestaurants;
+
+  return (
+    <div
+      style={{
+        minWidth: 320,
+        maxWidth: 480,
+      }}
+    >
+      {/* Progress bar */}
+      {isStreaming && loadingProgress < 100 && (
+        <LoadingProgress
+          percent={loadingProgress}
+          text="AI is selecting recommendations for you..."
+        />
+      )}
+
+      {/* Restaurant list */}
+      <List
+        dataSource={visibleRestaurants}
+        renderItem={(item, index) => (
+          <RestaurantCard restaurant={item} index={index} isLoading={false} />
+        )}
+      />
+
+      {/* Loading complete message */}
+      {!isStreaming && safeRestaurants.length > 0 && (
+        <div
+          style={{
+            textAlign: 'center',
+            padding: '12px 0',
+            opacity: 0.8,
+          }}
+        >
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            ✅ Recommended {safeRestaurants.length} restaurants for you
+          </Typography.Text>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── Container Component ────────────────────────────────────────────────────────────
+interface ContainerProps {
+  children?: React.ReactNode;
+}
+
+const Container: React.FC<ContainerProps> = ({ children }) => {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: '1.5px solid #e8e8e8',
+        padding: '20px 20px 16px',
+        background: '#fff',
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        marginBlock: 16,
+        minWidth: 320,
+        maxWidth: 520,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+// ─── Streaming Text Hook ────────────────────────────────────────────────────────────
+const useStreamText = (text: string) => {
+  const textRef = React.useRef(0);
+  const [textIndex, setTextIndex] = React.useState(0);
+  const textTimestamp = React.useRef(0);
+  const [streamStatus, setStreamStatus] = useState('INIT');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const run = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      if (textRef.current < text.length) {
+        if (textTimestamp.current === 0) {
+          textTimestamp.current = Date.now();
+          setStreamStatus('RUNNING');
+        }
+        textRef.current = Math.min(textRef.current + 3, text.length);
+        setTextIndex(textRef.current);
+      } else {
+        setStreamStatus('FINISHED');
+        if (timerRef.current) clearInterval(timerRef.current);
+      }
+    }, 80);
+  }, [text]);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    textRef.current = 0;
+    textTimestamp.current = 0;
+    setTextIndex(0);
+    setStreamStatus('INIT');
+  }, []);
+
+  return {
+    text: text.slice(0, textIndex),
+    streamStatus,
+    timestamp: textTimestamp.current,
+    run,
+    reset,
+  };
+};
+
+// ─── Progress Hook ────────────────────────────────────────────────────────────────
+const useProgress = () => {
+  const [progress, setProgress] = useState(0);
+  const [progressStatus, setProgressStatus] = useState<'active' | 'success'>('active');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const start = useCallback(() => {
+    setProgress(0);
+    setProgressStatus('active');
+
+    if (timerRef.current) clearInterval(timerRef.current);
+
+    timerRef.current = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          if (timerRef.current) clearInterval(timerRef.current);
+          setProgressStatus('success');
+          return 100;
+        }
+        // Simulate real loading: uneven speed
+        const increment = Math.random() * 8 + 2;
+        return Math.min(prev + increment, 100);
+      });
+    }, 150);
+  }, []);
+
+  const reset = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setProgress(0);
+    setProgressStatus('active');
+  }, []);
+
+  return { progress, progressStatus, start, reset };
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Streaming Recommendation Text Content
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const INTRO_TEXT = `Hello! I'm your food recommendation assistant 🍽️
+
+Based on your location and preferences, I'm selecting the best restaurants nearby for you...
+
+Here are my recommendation criteria:
+
+1. **Distance First**: Prioritizing restaurants within 15 minutes walking distance
+2. **Quality Guaranteed**: Selecting only restaurants with ratings above 4.5
+3. **Diverse Cuisines**: Covering Chinese, Japanese, Western, and more
+
+Generating personalized recommendations for you...`;
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// v0.9 Agent Command Definitions
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// Create Surface Command
+const CreateSurfaceCommand: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'recommendation',
+    catalogId: 'local://restaurant_streaming_catalog.json',
+  },
+};
+
+// Update Components Command
+const UpdateComponentsCommand: XAgentCommand_v0_9 = {
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'recommendation',
+    components: [
+      {
+        id: 'title',
+        component: 'Text',
+        text: 'AI Food Recommendations',
+        variant: 'h1',
+      },
+      {
+        id: 'progress',
+        component: 'LoadingProgress',
+        percent: { path: '/progress' },
+        status: { path: '/progressStatus' },
+      },
+      {
+        id: 'restaurant-list',
+        component: 'RestaurantList',
+        restaurants: { path: '/restaurants' },
+        loadingProgress: { path: '/progress' },
+        isStreaming: { path: '/isStreaming' },
+      },
+      {
+        id: 'root',
+        component: 'Container',
+        children: ['title', 'progress', 'restaurant-list'],
+      },
+    ],
+  },
+};
+
+// Create progress update command
+const createProgressUpdateCommand = (percent: number): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'recommendation',
+    path: '/progress',
+    value: percent,
+  },
+});
+
+// Create restaurant list update command (incremental update)
+const createRestaurantUpdateCommand = (restaurants: RestaurantItem[]): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'recommendation',
+    path: '/restaurants',
+    value: restaurants,
+  },
+});
+
+// Create streaming status update command
+const createStreamingStatusCommand = (isStreaming: boolean): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'recommendation',
+    path: '/isStreaming',
+    value: isStreaming,
+  },
+});
+
+// Create progress status update command
+const createProgressStatusCommand = (status: 'active' | 'success'): XAgentCommand_v0_9 => ({
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'recommendation',
+    path: '/progressStatus',
+    value: status,
+  },
+});
+
+// ─── App ────────────────────────────────────────────────────────────────────────
+const App = () => {
+  const [card, setCard] = useState<CardNode[]>([]);
+  const [commandQueue, setCommandQueue] = useState<XAgentCommand_v0_9[]>([]);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  // Streaming text state
+  const {
+    text: streamText,
+    streamStatus,
+    timestamp: textTimestamp,
+    run: runStream,
+    reset: resetStream,
+  } = useStreamText(INTRO_TEXT);
+
+  // Progress state
+  const { progress, progressStatus, start: startProgress, reset: resetProgress } = useProgress();
+
+  // Loaded restaurants
+  const [loadedRestaurants, setLoadedRestaurants] = useState<RestaurantItem[]>([]);
+
+  const onAgentCommand = (command: XAgentCommand_v0_9) => {
+    if ('createSurface' in command) {
+      const surfaceId = command.createSurface.surfaceId;
+      setCard((prev) => {
+        if (prev.some((c) => c.id === surfaceId)) return prev;
+        return [...prev, { id: surfaceId, timestamp: Date.now() }];
+      });
+    } else if ('deleteSurface' in command) {
+      setCard((prev) => prev.filter((c) => c.id !== command.deleteSurface.surfaceId));
+    }
+    setCommandQueue((prev) => [...prev, command]);
+  };
+
+  // Reset the entire process
+  const handleReload = useCallback(() => {
+    resetStream();
+    resetProgress();
+    setLoadedRestaurants([]);
+
+    const deleteCommands: XAgentCommand_v0_9[] = [
+      { version: 'v0.9', deleteSurface: { surfaceId: 'recommendation' } },
+    ];
+    setCommandQueue((prev) => [...prev, ...deleteCommands]);
+    setCard([]);
+
+    setTimeout(() => {
+      setSessionKey((prev) => prev + 1);
+    }, 50);
+  }, [resetStream, resetProgress]);
+
+  // Start streaming text
+  useEffect(() => {
+    runStream();
+  }, [sessionKey, runStream]);
+
+  // After streaming text completes, start loading components
+  useEffect(() => {
+    if (streamStatus === 'FINISHED') {
+      // Send commands in A2UI v0.9 spec order
+      // 1. Create Surface
+      onAgentCommand(CreateSurfaceCommand);
+
+      // 2. Update components configuration
+      onAgentCommand(UpdateComponentsCommand);
+
+      // 3. Initialize data model
+      onAgentCommand(createStreamingStatusCommand(true));
+      onAgentCommand(createRestaurantUpdateCommand([]));
+      onAgentCommand(createProgressStatusCommand('active'));
+
+      // 4. Start progress animation
+      startProgress();
+    }
+  }, [streamStatus, sessionKey, startProgress]);
+
+  // When progress updates, incrementally add restaurant cards
+  useEffect(() => {
+    if (progress > 0 && progressStatus === 'active') {
+      // Update progress
+      onAgentCommand(createProgressUpdateCommand(progress));
+
+      // Calculate how many restaurants to show based on progress
+      const visibleCount = Math.ceil((progress / 100) * RESTAURANT_DATA.length);
+      const newRestaurants = RESTAURANT_DATA.slice(0, visibleCount);
+
+      // Incrementally update restaurant list
+      if (newRestaurants.length !== loadedRestaurants.length) {
+        setLoadedRestaurants(newRestaurants);
+        onAgentCommand(createRestaurantUpdateCommand(newRestaurants));
+      }
+    }
+  }, [progress, progressStatus]);
+
+  // Progress complete
+  useEffect(() => {
+    if (progressStatus === 'success' && loadedRestaurants.length === RESTAURANT_DATA.length) {
+      // Set isStreaming to false, progress status to success
+      onAgentCommand(createStreamingStatusCommand(false));
+      onAgentCommand(createProgressStatusCommand('success'));
+    }
+  }, [progressStatus, loadedRestaurants.length]);
+
+  const items = [
+    {
+      content: {
+        texts: [{ text: streamText, timestamp: textTimestamp }].filter(
+          (item) => item.timestamp !== 0,
+        ),
+        card,
+      } as ContentType,
+      role: 'assistant',
+      key: sessionKey,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" icon={<ReloadOutlined />} onClick={handleReload}>
+          Recommend Again
+        </Button>
+      </div>
+
+      <XCard.Box
+        key={sessionKey}
+        commands={commandQueue}
+        components={{
+          Text,
+          LoadingProgress,
+          RestaurantCard,
+          RestaurantList,
+          Container,
+        }}
+      >
+        <Bubble.List items={items} style={{ height: 800 }} role={role} />
+      </XCard.Box>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/x/docs/x-card/introduce.en-US.md b/packages/x/docs/x-card/introduce.en-US.md
new file mode 100644
index 0000000000..411bac49bc
--- /dev/null
+++ b/packages/x/docs/x-card/introduce.en-US.md
@@ -0,0 +1,113 @@
+---
+order: 1
+title: Introduction
+---
+
+`@ant-design/x-skill` is an intelligent skill library specifically designed for Ant Design X, providing a series of carefully crafted Agent skills. These skills significantly enhance development efficiency, help you quickly build high-quality AI conversation applications, and effectively solve various problems encountered during development.
+
+## 🎯 Use Cases
+
+- **New Project Setup**: Quickly scaffold Ant Design X project framework
+- **Feature Development**: Get best practices and code examples for component usage
+- **Problem Troubleshooting**: Intelligent diagnosis and resolution of common development issues
+- **Performance Optimization**: Get professional advice on performance tuning
+
+## ✨ Core Advantages
+
+- **Intelligent Development**: Code generation and optimization suggestions based on best practices
+- **Efficiency Boost**: Reduce repetitive work and accelerate project development
+- **Quality Assurance**: Follow Ant Design X design specifications to ensure code quality
+- **Rich Scenarios**: Cover common scenarios like conversation components, data requests, and state management
+
+## 🔧 Included Skills
+
+- **use-x-chat**: Conversation SDK usage guide
+- **x-chat-provider**: Chat data flow management
+- **x-request**: Network request best practices
+
+## 🚀 Quick Start
+
+We provide multiple flexible installation methods, you can choose the most suitable option based on your actual needs:
+
+### Method 1: One-click Installation (Recommended)
+
+Supports mainstream AI IDEs like Claude Code, CodeFuse, Cursor, complete installation with a single command:
+
+### Basic Installation
+
+```bash
+# Install skill library globally
+npm i -g @ant-design/x-skill
+
+# Smart registration to current IDE (interactive installation)
+npx x-skill
+```
+
+### Version Management
+
+Supports installation with specific version tags to ensure getting specific version features:
+
+```bash
+# View all available versions
+x-skill --list-versions
+
+# or
+x-skill -l
+
+# Install specific version (replace <tag> with actual version number)
+x-skill --tag <tag>
+# or
+x-skill -t <tag>
+
+# View current installer version (not skill version)
+x-skill --version
+# or
+x-skill -V
+x-skill -v
+```
+
+### Usage Examples
+
+```bash
+# Install latest stable version
+x-skill
+
+# Install specific version to ensure compatibility
+x-skill --tag 2.3.0
+
+# View help information
+x-skill --help
+```
+
+### Method 2: Claude Code Integration
+
+#### Plugin Marketplace Installation (Official Recommendation)
+
+**Step 1: Register Plugin Marketplace**
+
+Execute the following command in Claude Code to add this repository as a plugin source:
+
+```bash
+/plugin marketplace add ant-design/x/blob/main/packages/x-skill/
+```
+
+**Step 2: Select and Install Skills**
+
+Install the skills included in x-skill.
+
+Click `Install now` to complete the installation.
+
+#### Quick Installation
+
+You can also directly install the complete skill package via command:
+
+```bash
+/plugin install x-sdk-skills@x-agent-skills
+```
+
+### Method 3: Manual Installation
+
+Suitable for scenarios requiring customized configuration, using `Claude Code` as an example:
+
+- **Global Installation**: Copy skill files to `~/.claude/skills` directory, available for all projects
+- **Project Installation**: Copy skill files to `.claude/skills` directory in the project root, available only for the current project
diff --git a/packages/x/docs/x-card/introduce.zh-CN.md b/packages/x/docs/x-card/introduce.zh-CN.md
new file mode 100644
index 0000000000..466feeb388
--- /dev/null
+++ b/packages/x/docs/x-card/introduce.zh-CN.md
@@ -0,0 +1,803 @@
+---
+order: 1
+title: 介绍
+---
+
+# @ant-design/x-card
+
+`@ant-design/x-card` 是一个基于 [A2UI 协议](https://a2ui.org/concepts/data-flow/) 的动态卡片渲染组件，让 AI Agent 能够通过结构化的 JSON 消息流，动态构建和渲染交互式界面。
+
+## 什么是 A2UI？
+
+A2UI（Agent-to-User Interface）是一个开放协议，允许 AI Agent 通过声明式的 JSON 消息序列描述交互意图，由前端运行时动态渲染为原生 UI 组件。
+
+### 核心设计理念
+
+A2UI 建立在三个核心思想之上：
+
+1. **流式消息（Streaming Messages）**：UI 更新以 JSON 消息序列的形式从 Agent 流向客户端
+2. **声明式组件（Declarative Components）**：UI 以数据形式描述，而非代码编程
+3. **数据绑定（Data Binding）**：UI 结构与应用状态分离，实现响应式更新
+
+### 为什么选择 A2UI？
+
+与传统让 AI 直接生成 HTML 不同，A2UI 采用结构化数据流的方式，具有显著优势：
+
+| 特性 | A2UI | AI 生成 HTML |
+| --- | --- | --- |
+| **安全性** | 仅使用预定义组件目录（Catalog），无代码执行风险 | 可能包含恶意脚本，存在注入风险 |
+| **跨平台** | 一套数据结构自动适配 Web、移动端等多端原生组件 | HTML 需额外适配不同设备，易出现样式错乱 |
+| **流式渲染** | 支持渐进式渲染，用户体验流畅 | 需等待完整响应，加载时间长 |
+| **LLM 友好** | 扁平 JSON 结构，支持增量生成，降低 AI 负担 | 需生成完整 HTML 结构，易出现语法错误 |
+| **维护成本** | 组件统一管理，更新只需修改客户端库 | 每个 HTML 界面需单独调试 |
+
+## 数据流架构
+
+A2UI 遵循单向数据流原则，确保数据流向清晰可预测：
+
+```
+Agent (LLM) → A2UI Generator → Transport (SSE/WebSocket/A2A)
+                    ↓
+Client (Stream Reader) → Message Parser → Renderer → Native UI
+```
+
+### 数据流生命周期
+
+以餐厅预订为例，展示完整的数据流过程：
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Client
+    participant Agent
+
+    User->>Client: "Book a table for 2 tomorrow at 7pm"
+    Client->>Agent: 发送用户请求
+
+    Note over Agent: 1. 创建界面容器
+    Agent->>Client: createSurface { surfaceId: "booking" }
+
+    Note over Agent: 2. 定义 UI 结构
+    Agent->>Client: updateComponents { components: [...] }
+
+    Note over Agent: 3. 填充初始数据
+    Agent->>Client: updateDataModel { datetime: "2025-12-16T19:00", guests: 2 }
+
+    Note over Client: 4. 渲染预订表单
+    Client->>User: 显示日期选择器和客人数量输入
+
+    User->>Client: 修改客人数量为 3
+    Note over Client: 自动更新 /reservation/guests
+
+    User->>Client: 点击"确认"按钮
+    Client->>Agent: userAction { name: "confirm", context: { guests: 3 } }
+
+    Note over Agent: 5. 处理用户操作
+    Agent->>Client: deleteSurface { surfaceId: "booking" }
+    Agent->>Client: 创建成功确认界面
+```
+
+## 协议版本
+
+`@ant-design/x-card` 同时支持 A2UI 协议的 v0.8 和 v0.9 两个版本。了解两个版本的差异有助于选择合适的协议版本并进行迁移。
+
+### 版本对比
+
+| 特性             | v0.8                                       | v0.9                          |
+| ---------------- | ------------------------------------------ | ----------------------------- |
+| **版本标识**     | 无显式 version 字段                        | 显式的 `version: 'v0.9'` 字段 |
+| **Surface 创建** | 隐式创建（首个 updateComponents 自动创建） | 显式 `createSurface` 命令     |
+| **数据模型更新** | 使用 `contents` 数组                       | 使用 `path` 和 `value` 字段   |
+| **组件定义**     | 较复杂的嵌套结构                           | 更简洁的扁平结构              |
+| **推荐程度**     | 已弃用，仅用于兼容                         | **推荐使用**                  |
+
+### v0.8 消息格式（已弃用）
+
+v0.8 使用隐式的 Surface 创建方式，当 Agent 发送第一个 `updateComponents` 时自动创建 Surface：
+
+```typescript
+// v0.8 没有显式的 version 字段
+{
+  updateComponents: {
+    surfaceId: 'booking',
+    catalogId: 'https://example.com/catalogs/booking/v1/catalog.json',
+    components: [
+      {
+        id: 'root',
+        component: 'Column',
+        children: ['header', 'content']
+      }
+    ]
+  }
+}
+```
+
+**数据模型更新**使用 `contents` 数组：
+
+```typescript
+{
+  updateDataModel: {
+    surfaceId: 'booking',
+    contents: [
+      {
+        op: 'replace',
+        path: '/reservation/guests',
+        value: 3
+      }
+    ]
+  }
+}
+```
+
+### v0.9 消息格式（推荐）
+
+v0.9 引入显式的版本标识和 Surface 创建命令，使协议更加清晰和可控：
+
+```typescript
+// 显式创建 Surface
+{
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'booking',
+    catalogId: 'https://example.com/catalogs/booking/v1/catalog.json'
+  }
+}
+
+// 更新组件
+{
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'booking',
+    components: [
+      {
+        id: 'root',
+        component: 'Column',
+        children: ['header', 'content']
+      }
+    ]
+  }
+}
+```
+
+**数据模型更新**使用更直观的 `path` 和 `value` 字段：
+
+```typescript
+{
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'booking',
+    path: '/reservation/guests',
+    value: 3
+  }
+}
+```
+
+### 迁移指南
+
+如果您正在使用 v0.8，建议按以下步骤迁移到 v0.9：
+
+#### 1. 添加版本标识
+
+所有消息添加 `version: 'v0.9'` 字段：
+
+```typescript
+// v0.8
+{ updateComponents: { ... } }
+
+// v0.9
+{ version: 'v0.9', updateComponents: { ... } }
+```
+
+#### 2. 显式创建 Surface
+
+在发送 `updateComponents` 之前，先发送 `createSurface`：
+
+```typescript
+// v0.8：隐式创建
+{ updateComponents: { surfaceId: 'booking', catalogId: '...', components: [...] } }
+
+// v0.9：显式创建
+[
+  { version: 'v0.9', createSurface: { surfaceId: 'booking', catalogId: '...' } },
+  { version: 'v0.9', updateComponents: { surfaceId: 'booking', components: [...] } }
+]
+```
+
+#### 3. 简化数据模型更新
+
+将 `contents` 数组改为 `path` + `value`：
+
+```typescript
+// v0.8
+{
+  updateDataModel: {
+    surfaceId: 'booking',
+    contents: [
+      { op: 'replace', path: '/guests', value: 3 }
+    ]
+  }
+}
+
+// v0.9
+{
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'booking',
+    path: '/guests',
+    value: 3
+  }
+}
+```
+
+#### 4. 批量更新数据
+
+v0.9 支持更新整个对象，减少消息数量：
+
+```typescript
+// v0.8：需要多条消息
+[
+  { updateDataModel: { surfaceId: 'booking', contents: [{ op: 'add', path: '/date', value: '2025-12-16' }] } },
+  { updateDataModel: { surfaceId: 'booking', contents: [{ op: 'add', path: '/guests', value: 2 }] } }
+]
+
+// v0.9：一条消息即可
+{
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'booking',
+    path: '/reservation',
+    value: { date: '2025-12-16', guests: 2 }
+  }
+}
+```
+
+### 向后兼容性
+
+`@ant-design/x-card` 同时支持两个版本，您可以：
+
+```tsx
+import type { XAgentCommand_v0_8, XAgentCommand_v0_9 } from '@ant-design/x-card';
+
+// 自动检测版本并正确处理
+const commands: (XAgentCommand_v0_8 | XAgentCommand_v0_9)[] = [
+  // v0.8 消息
+  {
+    updateComponents: {
+      /* ... */
+    },
+  },
+
+  // v0.9 消息
+  {
+    version: 'v0.9',
+    createSurface: {
+      /* ... */
+    },
+  },
+];
+
+<XCard.Box commands={commands}>{/* ... */}</XCard.Box>;
+```
+
+组件会根据是否存在 `version` 字段自动判断协议版本，并正确处理消息。
+
+## 核心消息类型
+
+`@ant-design/x-card` 完整实现了 A2UI 协议 v0.9 的核心命令系统：
+
+### 1. createSurface - 创建界面容器
+
+创建一个新的 UI 容器（Surface），每个 Surface 拥有独立的组件树和数据模型。
+
+```typescript
+{
+  version: 'v0.9',
+  createSurface: {
+    surfaceId: 'booking',  // 界面唯一标识
+    catalogId: 'https://example.com/catalogs/booking/v1/catalog.json'  // 组件目录
+  }
+}
+```
+
+### 2. updateComponents - 更新组件结构
+
+定义或更新 Surface 中的 UI 组件，采用邻接表模型（Adjacency List）。
+
+```typescript
+{
+  version: 'v0.9',
+  updateComponents: {
+    surfaceId: 'booking',
+    components: [
+      // 根容器
+      {
+        id: 'root',
+        component: 'Column',
+        children: ['header', 'guests-field', 'submit-btn']
+      },
+      // 标题
+      {
+        id: 'header',
+        component: 'Text',
+        text: 'Confirm Reservation',
+        variant: 'h1'
+      },
+      // 客人数量输入框
+      {
+        id: 'guests-field',
+        component: 'TextField',
+        label: 'Guests',
+        value: { path: '/reservation/guests' }  // 数据绑定
+      },
+      // 提交按钮
+      {
+        id: 'submit-btn',
+        component: 'Button',
+        variant: 'primary',
+        child: 'submit-text',
+        action: {
+          event: {
+            name: 'confirm',
+            context: {
+              details: { path: '/reservation' }  // 传递上下文
+            }
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+### 3. updateDataModel - 更新数据模型
+
+更新 Surface 的应用状态，触发响应式 UI 更新。
+
+```typescript
+{
+  version: 'v0.9',
+  updateDataModel: {
+    surfaceId: 'booking',
+    path: '/reservation',
+    value: {
+      datetime: '2025-12-16T19:00:00Z',
+      guests: 2
+    }
+  }
+}
+```
+
+### 4. deleteSurface - 删除界面
+
+移除指定的 Surface 及其所有组件和数据模型。
+
+```typescript
+{
+  version: 'v0.9',
+  deleteSurface: {
+    surfaceId: 'booking'
+  }
+}
+```
+
+## 数据绑定系统
+
+A2UI 将 UI 结构与应用状态分离，通过数据绑定实现响应式更新。
+
+### 数据模型（Data Model）
+
+每个 Surface 拥有独立的 JSON 数据模型：
+
+```json
+{
+  "user": {
+    "name": "Alice",
+    "email": "alice@example.com"
+  },
+  "reservation": {
+    "datetime": "2025-12-16T19:00:00Z",
+    "guests": 2
+  }
+}
+```
+
+### JSON Pointer 路径
+
+使用 RFC 6901 标准的 JSON Pointer 访问数据：
+
+- `/user/name` → `"Alice"`
+- `/reservation/guests` → `2`
+- `/reservation/datetime` → `"2025-12-16T19:00:00Z"`
+
+### 字面值 vs. 路径绑定
+
+组件属性可以使用字面值或数据绑定：
+
+```typescript
+// 字面值（静态）
+{
+  id: 'title',
+  component: 'Text',
+  text: 'Welcome'  // 固定文本
+}
+
+// 路径绑定（动态）
+{
+  id: 'username',
+  component: 'Text',
+  text: { path: '/user/name' }  // 从数据模型读取
+}
+```
+
+当 `/user/name` 从 `"Alice"` 变为 `"Bob"` 时，文本自动更新。
+
+### 响应式更新
+
+绑定到数据路径的组件会自动响应数据变化：
+
+```typescript
+// 初始状态
+updateDataModel({ path: '/order/status', value: 'Processing...' });
+// UI 显示 "Processing..."
+
+// 更新数据
+updateDataModel({ path: '/order/status', value: 'Shipped' });
+// UI 自动更新为 "Shipped"
+```
+
+无需重新发送组件定义，只需更新数据即可。
+
+### 动态列表渲染
+
+使用模板（template）渲染数组数据：
+
+```typescript
+{
+  id: 'product-list',
+  component: 'Column',
+  children: {
+    template: {
+      dataBinding: '/products',  // 数组路径
+      componentId: 'product-card'  // 模板组件
+    }
+  }
+}
+```
+
+数据模型：
+
+```json
+{
+  "products": [
+    { "name": "Widget", "price": 9.99 },
+    { "name": "Gadget", "price": 19.99 }
+  ]
+}
+```
+
+结果：自动渲染两个产品卡片。
+
+### 作用域路径
+
+在模板内部，路径相对于当前数组项：
+
+```typescript
+{
+  id: 'product-name',
+  component: 'Text',
+  text: { path: '/name' }  // 相对于 /products/0、/products/1 等
+}
+```
+
+对于 `/products/0`，`/name` 解析为 `/products/0/name` → `"Widget"`
+
+### 输入绑定（双向绑定）
+
+交互式组件可以自动更新数据模型：
+
+```typescript
+{
+  id: 'name-input',
+  component: 'TextField',
+  value: { path: '/form/name' }  // 读取和写入
+}
+```
+
+用户输入时，自动更新 `/form/name` 的值。
+
+## Action 事件处理
+
+用户交互通过 action 事件传递回 Agent。
+
+### 定义 Action
+
+组件可以定义 action，在用户交互时触发：
+
+```typescript
+{
+  id: 'submit-btn',
+  component: 'Button',
+  child: 'submit-text',
+  action: {
+    event: {
+      name: 'confirm_booking',
+      context: {
+        date: { path: '/reservation/datetime' },
+        guests: { path: '/reservation/guests' }
+      }
+    }
+  }
+}
+```
+
+### 客户端事件
+
+用户点击按钮时，客户端发送事件：
+
+```typescript
+{
+  version: 'v0.9',
+  action: {
+    name: 'confirm_booking',
+    surfaceId: 'booking',
+    sourceComponentId: 'submit-btn',
+    timestamp: '2025-12-16T19:05:00Z',
+    context: {
+      date: '2025-12-16T19:00:00Z',
+      guests: 3
+    }
+  }
+}
+```
+
+### Agent 响应
+
+Agent 收到事件后，可以：
+
+1. 更新 UI：发送 `updateComponents` 或 `updateDataModel`
+2. 关闭界面：发送 `deleteSurface`
+3. 创建新界面：发送新的 `createSurface`
+
+## 组件目录（Catalog）
+
+Catalog 定义了可用的组件及其属性 schema，确保类型安全和验证。
+
+### Catalog 结构
+
+```typescript
+{
+  "catalogId": "https://example.com/catalogs/booking/v1/catalog.json",
+  "components": {
+    "Text": {
+      "type": "object",
+      "properties": {
+        "text": { "type": "string" },
+        "variant": { "enum": ["h1", "h2", "h3", "body"] }
+      },
+      "required": ["text"]
+    },
+    "Button": {
+      "type": "object",
+      "properties": {
+        "variant": { "enum": ["primary", "default"] },
+        "action": { "type": "object" }
+      }
+    }
+  }
+}
+```
+
+### Catalog 协商
+
+Agent 和客户端通过协商确定使用的 Catalog：
+
+1. **客户端声明能力**：发送支持的 `supportedCatalogIds`
+2. **Agent 选择 Catalog**：从客户端列表中选择合适的 Catalog
+3. **创建 Surface**：在 `createSurface` 中指定 `catalogId`
+
+### 组件映射
+
+客户端将 Catalog 中的组件映射到实际实现：
+
+```tsx
+import { registerCatalog } from '@ant-design/x-card';
+
+// 注册 Catalog
+registerCatalog(catalog);
+
+// 提供组件实现
+<XCard.Box
+  components={{
+    Text: MyTextComponent,
+    Button: MyButtonComponent,
+    TextField: MyTextFieldComponent,
+  }}
+>
+  {/* ... */}
+</XCard.Box>;
+```
+
+## 核心特性
+
+### 1. 渐进式渲染
+
+用户无需等待完整响应，界面逐步构建：
+
+```typescript
+// 流式发送命令
+[createSurfaceCommand, updateComponentsCommand, updateDataModelCommand];
+```
+
+客户端收到每条消息后立即处理并渲染，提升用户体验。
+
+### 2. 邻接表模型
+
+采用扁平的组件列表，而非嵌套树结构：
+
+**优势**：
+
+- LLM 友好：可以按任意顺序生成组件
+- 增量更新：只需发送新增或修改的组件
+- 容错性强：单个组件错误不影响其他组件
+
+```typescript
+// 扁平列表
+[
+  { id: 'root', component: 'Column', children: ['child1', 'child2'] },
+  { id: 'child1', component: 'Text', text: 'Hello' },
+  { id: 'child2', component: 'Text', text: 'World' },
+];
+```
+
+### 3. 组件验证
+
+自动根据 Catalog 验证组件属性：
+
+```typescript
+validateComponent(catalog, 'Button', {
+  variant: 'primary',
+  text: 'Click me',
+});
+// 输出验证结果和警告
+```
+
+开发环境下提供友好的错误提示，生产环境下优雅降级。
+
+### 4. 类型安全
+
+完整的 TypeScript 类型定义：
+
+```typescript
+import type {
+  XAgentCommand_v0_9,
+  XAgentCommand_v0_8,
+  ActionPayload,
+  Catalog,
+  CatalogComponent,
+} from '@ant-design/x-card';
+```
+
+## 安装
+
+```bash
+npm install @ant-design/x-card
+# 或
+yarn add @ant-design/x-card
+# 或
+pnpm add @ant-design/x-card
+```
+
+## 快速开始
+
+```tsx
+import { XCard, registerCatalog } from '@ant-design/x-card';
+import type { XAgentCommand_v0_9, Catalog, ActionPayload } from '@ant-design/x-card';
+
+// 1. 定义 Catalog
+const catalog: Catalog = {
+  catalogId: 'my-app-catalog',
+  components: {
+    Text: {
+      /* ... */
+    },
+    Button: {
+      /* ... */
+    },
+  },
+};
+
+// 2. 注册 Catalog
+registerCatalog(catalog);
+
+// 3. 定义 Agent 命令
+const commands: XAgentCommand_v0_9[] = [
+  {
+    version: 'v0.9',
+    createSurface: {
+      surfaceId: 'booking',
+      catalogId: 'my-app-catalog',
+    },
+  },
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'booking',
+      components: [
+        /* ... */
+      ],
+    },
+  },
+];
+
+// 4. 渲染卡片
+function App() {
+  const [currentCommand, setCurrentCommand] = useState<XAgentCommand_v0_9>();
+
+  const handleAction = (payload: ActionPayload) => {
+    console.log('Action triggered:', payload.name, payload.context);
+    // 处理用户操作，可能触发新的命令
+  };
+
+  return (
+    <XCard.Box
+      commands={currentCommand}
+      onAction={handleAction}
+      components={{
+        Text: MyTextComponent,
+        Button: MyButtonComponent,
+      }}
+    >
+      <XCard.Card id="booking" />
+    </XCard.Box>
+  );
+}
+```
+
+## 适用场景
+
+- **AI 助手界面**：让 AI Agent 动态生成表单、卡片等交互界面
+- **智能表单**：根据用户输入动态调整表单结构和验证规则
+- **数据可视化**：动态生成图表、列表等数据展示组件
+- **工作流编排**：根据业务流程动态渲染不同阶段的 UI
+- **多轮对话**：在聊天界面中嵌入动态交互组件
+- **个性化界面**：根据用户偏好和使用场景定制 UI
+
+## 性能优化建议
+
+1. **细粒度更新**：只更新变化的数据路径，而非整个数据模型
+
+   ```typescript
+   updateDataModel({ path: '/user/name', value: 'Bob' });
+   // 而非更新整个 /user 对象
+   ```
+
+2. **按域组织数据**：将相关数据分组，避免命名冲突
+
+   ```json
+   {
+     "user": {
+       /* 用户相关 */
+     },
+     "cart": {
+       /* 购物车相关 */
+     },
+     "ui": {
+       /* UI 状态 */
+     }
+   }
+   ```
+
+3. **预计算显示值**：Agent 端格式化数据（货币、日期等）
+   ```typescript
+   // Agent 发送
+   {
+     price: '$19.99';
+   } // 而非 { price: 19.99 }
+   ```
+
+## 下一步
+
+- 查看 [A2UI v0.9](/x-card/a2ui-v0.9) 了解最新协议规范和示例
+- 阅读 [A2UI 官方文档](https://a2ui.org/concepts/data-flow/) 了解协议设计理念
+- 浏览 [组件结构](https://a2ui.org/concepts/component-structure/) 学习邻接表模型
+- 参考 [数据绑定](https://a2ui.org/concepts/data-binding/) 掌握响应式更新
diff --git a/packages/x/tsconfig.json b/packages/x/tsconfig.json
index 06340f1454..39ed21df0f 100644
--- a/packages/x/tsconfig.json
+++ b/packages/x/tsconfig.json
@@ -2,6 +2,9 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
     "paths": {
       "@@/*": [".dumi/tmp/*"],
       "@ant-design/x": ["components/index.ts"],
@@ -12,11 +15,13 @@
       "@ant-design/x-markdown/es/*": ["../x-markdown/src/*"],
       "@ant-design/x-markdown/lib/*": ["../x-markdown/src/*"],
       "@ant-design/x-markdown/plugins/*": ["../x-markdown/src/plugins/*"],
+      "@ant-design/x-card": ["../x-card/src/index.ts"],
       "@ant-design/x-sdk": ["../x-sdk/src/index.ts"],
       "@ant-design/x-skill/*": ["../x-skill/src/*"],
       "@ant-design/x-sdk/es/*": ["../x-sdk/src/*"],
       "@ant-design/x-sdk/lib/*": ["../x-sdk/src/*"]
     }
   },
-  "include": [".dumirc.ts", "**/*"]
+  "include": [".dumirc.ts", "**/*"],
+  "exclude": ["node_modules", "lib", "es", "dist"]
 }
diff --git a/scripts/check-repo.ts b/scripts/check-repo.ts
index c00d98c087..249c23522b 100644
--- a/scripts/check-repo.ts
+++ b/scripts/check-repo.ts
@@ -26,7 +26,7 @@ async function checkVersion() {
   spinner.start('正在检查当前版本是否已经存在');
   const version = getCurrentVersion();
 
-  type RaceUrlKey = 'x' | 'x-sdk' | 'x-markdown' | 'x-skill';
+  type RaceUrlKey = 'x' | 'x-sdk' | 'x-markdown' | 'x-skill' | 'x-card';
   const raceUrlObj: Record<RaceUrlKey, string[]> = {
     x: ['http://registry.npmjs.org/@ant-design/x', 'https://registry.npmmirror.com/@ant-design/x'],
     'x-sdk': [
@@ -41,6 +41,10 @@ async function checkVersion() {
       'http://registry.npmjs.org/@ant-design/x-skill',
       'https://registry.npmmirror.com/@ant-design/x-skill',
     ],
+    'x-card': [
+      'http://registry.npmjs.org/@ant-design/x-card',
+      'https://registry.npmmirror.com/@ant-design/x-card',
+    ],
   };
 
   const argKey = process.argv.slice(2)[0] as RaceUrlKey;
@@ -58,7 +62,19 @@ async function checkVersion() {
       // Ignore the error
       .catch(() => new Promise(() => {})),
   );
-  const { versions } = await Promise.race(promises);
+  const result = await Promise.race(promises);
+  const versions = result?.versions;
+
+  // If the package doesn't exist yet (404), skip version check
+  if (!versions) {
+    spinner.info(
+      chalk.cyan(
+        '😃 Package not found in npm registry. This is a new package, skip version check.',
+      ),
+    );
+    spinner.succeed('版本检查通过');
+    return;
+  }
 
   if (version in versions) {
     spinner.fail(