diff --git a/.changeset/rapid-input-number-icons.md b/.changeset/rapid-input-number-icons.md
new file mode 100644
index 00000000..03625a1d
--- /dev/null
+++ b/.changeset/rapid-input-number-icons.md
@@ -0,0 +1,10 @@
+---
+"@varo-ui/h5": patch
+"@varo-ui/weapp": patch
+"@varo/weapp-web": patch
+"@varo-ui/headless": patch
+"@varo-ui/cli": patch
+"@varo/registry": patch
+---
+
+Replace input-number ASCII steppers with named VIcon plus/minus controls and restore its compact inline geometry, pin textarea word-limit to the bottom-right, use a circular cancel-x on Input/Select without stretching Select on focus, avoid the native Input `focus` prop/handler collision, add dual-target multi-column Picker, DateField, PullRefresh, Signature, and Watermark Registry components while keeping Calendar independent, add shared motion tokens and Spectrum-inspired Button, Switch, Radio, Toast card, and VToastRegion interactions without changing the Varo palette, teach weapp-web native controls to preserve hover and ARIA semantics without Glass-Easel property warnings, pad docs API tables, preview compiled mini-program artifacts through weapp-web, and add a root `docs:dev` command with in-page H5 and Weapp primitive previews.
diff --git a/README.md b/README.md
index bbbbe08f..cddadeb4 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,14 @@ pnpm --filter @varo/playground-weapp dev:ai
 
 `dev:ai` prepares the WeChat DevTools project, starts the MCP HTTP service, and forwards DevTools console output and uncaught errors to the active terminal.
 
+## Documentation development
+
+```bash
+pnpm run docs:dev
+```
+
+This starts VitePress at `http://localhost:5173` with in-page H5 and Weapp component previews.
+
 ## Verification
 
 ```bash
diff --git a/README.zh-CN.md b/README.zh-CN.md
index f379f14a..84599ff9 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -70,6 +70,14 @@ pnpm --filter @varo/playground-weapp dev:ai
 
 `dev:ai` 会准备微信开发者工具项目、启动 MCP HTTP 服务，并将 DevTools console 与未捕获异常转发到当前终端。
 
+## 文档开发
+
+```bash
+pnpm run docs:dev
+```
+
+该命令会在 `http://localhost:5173` 启动 VitePress，并在文档页内提供 H5 与 Weapp 组件预览。
+
 ## 验证
 
 ```bash
diff --git a/apps/docs/.vitepress/config.test.ts b/apps/docs/.vitepress/config.test.ts
new file mode 100644
index 00000000..3f5525c3
--- /dev/null
+++ b/apps/docs/.vitepress/config.test.ts
@@ -0,0 +1,84 @@
+import { resolve } from 'node:path'
+import { createMarkdownRenderer, disposeMdItInstance } from 'vitepress'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { renderSearchMarkdown } from './config'
+
+const docsRoot = process.cwd()
+const searchDocumentPath = resolve(docsRoot, 'search-test.md')
+
+let markdown: Awaited<ReturnType<typeof createMarkdownRenderer>>
+
+beforeAll(async () => {
+  markdown = await createMarkdownRenderer(docsRoot, {
+    languages: ['ts', 'vue'],
+  })
+})
+
+afterAll(() => disposeMdItInstance())
+
+async function renderSearch(source: string) {
+  return renderSearchMarkdown(source, {
+    cleanUrls: true,
+    path: searchDocumentPath,
+    relativePath: 'search-test.md',
+  }, markdown)
+}
+
+describe('VitePress search rendering', () => {
+  it('removes fenced code nested in blockquotes and ordered lists', async () => {
+    const html = await renderSearch([
+      '# Visible heading',
+      '> Visible quote',
+      '> ```ts',
+      '> hiddenBlockquote()',
+      '> ```',
+      '1. Visible item',
+      '   ~~~vue',
+      '   <template>hiddenList</template>',
+      '   ~~~',
+      'Visible ending.',
+    ].join('\n'))
+
+    expect(html).toContain('Visible heading')
+    expect(html).toContain('Visible quote')
+    expect(html).toContain('Visible item')
+    expect(html).toContain('Visible ending.')
+    expect(html).not.toContain('hiddenBlockquote')
+    expect(html).not.toContain('hiddenList')
+  })
+
+  it('expands included prose while omitting code from included Markdown', async () => {
+    const html = await renderSearch('<!-- @include: ../../README.md -->')
+    expect(html).toContain('Published packages')
+    expect(html).toContain('The CLI does not overwrite existing files by default.')
+    expect(html).not.toContain('pnpm dlx @varo-ui/cli')
+  })
+
+  it('leaves the normal page code renderer intact', async () => {
+    const html = await markdown.renderAsync('```ts\nconst visibleNormalCode = true\n```', {
+      cleanUrls: true,
+      path: searchDocumentPath,
+      relativePath: 'search-test.md',
+    })
+    expect(html).toContain('visibleNormalCode')
+  })
+
+  it('keeps invalid backtick-info openers searchable', async () => {
+    const html = await renderSearch('Before\n```foo`bar\nAfter')
+    expect(html).toContain('Before')
+    expect(html).toContain('foo`bar')
+    expect(html).toContain('After')
+  })
+
+  it('removes indented code blocks from search', async () => {
+    const html = await renderSearch('Before\n\n    hiddenIndented()\n\nAfter')
+    expect(html).toContain('Before')
+    expect(html).toContain('After')
+    expect(html).not.toContain('hiddenIndented')
+  })
+
+  it('preserves the documented search false frontmatter contract', async () => {
+    const html = await renderSearch('---\nsearch: false\n---\n# Hidden page')
+    expect(html).toBe('')
+  })
+})
diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts
index dfd4750d..df5813a2 100644
--- a/apps/docs/.vitepress/config.ts
+++ b/apps/docs/.vitepress/config.ts
@@ -1,3 +1,4 @@
+import type { DefaultTheme } from 'vitepress'
 import { fileURLToPath } from 'node:url'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vitepress'
@@ -6,6 +7,48 @@ import { createComponentSidebarGroups } from '../src/component-catalog.js'
 const workspacePath = (relativePath: string) => fileURLToPath(new URL(relativePath, import.meta.url))
 const docsBase = process.env.DOCS_BASE || '/'
 const docsAsset = (path: string) => `${docsBase}${path.replace(/^\/+/, '')}`
+const docsPort = Number(process.env.DOCS_PORT || 5173)
+
+type LocalSearchRender = NonNullable<DefaultTheme.LocalSearchOptions['_render']>
+const searchRenderFlag = '__varoSearchRenderWithoutCode'
+const searchFilterInstalled = '__varoSearchCodeFilterInstalled'
+
+type SearchMarkdownEnvironment = Parameters<LocalSearchRender>[1] & {
+  [searchRenderFlag]?: boolean
+}
+
+type SearchMarkdownRenderer = Parameters<LocalSearchRender>[2] & {
+  [searchFilterInstalled]?: boolean
+}
+
+function installSearchCodeFilter(md: SearchMarkdownRenderer) {
+  if (md[searchFilterInstalled]) { return }
+
+  for (const ruleName of ['fence', 'code_block'] as const) {
+    const renderRule = md.renderer.rules[ruleName]
+    if (!renderRule) { continue }
+    md.renderer.rules[ruleName] = (tokens, index, options, env, self) => {
+      if ((env as SearchMarkdownEnvironment)[searchRenderFlag]) { return '' }
+      return renderRule(tokens, index, options, env, self)
+    }
+  }
+
+  // VitePress shares this renderer with page builds, so normal page envs must retain the original rules.
+  md[searchFilterInstalled] = true
+}
+
+export const renderSearchMarkdown: LocalSearchRender = async (source, env, md) => {
+  const searchEnvironment = env as SearchMarkdownEnvironment
+  installSearchCodeFilter(md)
+  searchEnvironment[searchRenderFlag] = true
+  try {
+    const html = await md.renderAsync(source, env)
+    return env.frontmatter?.search === false ? '' : html
+  }
+  finally {
+    delete searchEnvironment[searchRenderFlag]
+  }
+}
 
 export default defineConfig({
   title: 'Varo',
@@ -13,6 +56,9 @@ export default defineConfig({
   base: docsBase,
   cleanUrls: true,
   lastUpdated: true,
+  markdown: {
+    languages: ['bash', 'css', 'json', 'ts', 'vue'],
+  },
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: docsAsset('/brand-assets/varo-symbol.svg') }],
     ['link', { rel: 'alternate icon', href: docsAsset('/favicon.ico') }],
@@ -21,17 +67,21 @@ export default defineConfig({
     ['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#0b1016' }],
   ],
   vite: {
+    server: { host: 'localhost', port: docsPort, strictPort: true },
     plugins: [tailwindcss()],
     resolve: {
       alias: {
         '@varo-ui/ai': workspacePath('../../../packages/agent-core/src/index.ts'),
+        '@varo/hooks': workspacePath('../../../packages/hooks/src/index.ts'),
         '@varo/shared': workspacePath('../../../packages/shared/src/index.ts'),
         '@varo/utils': workspacePath('../../../packages/utils/src/index.ts'),
         '@varo-ui/theme': workspacePath('../../../packages/theme/src/index.ts'),
         '@varo-ui/headless': workspacePath('../../../packages/primitives-core/src/index.ts'),
         '@varo/primitives-h5': workspacePath('../../../packages/primitives-h5/src/index.ts'),
+        '@varo/primitives-weapp': workspacePath('../../../packages/primitives-weapp/src/index.ts'),
         '@varo-ui/h5/source/style.css': workspacePath('../../../packages/ui-h5/src/style.css'),
         '@varo-ui/h5': workspacePath('../../../packages/ui-h5/src/index.ts'),
+        '@varo-ui/weapp/primitives': workspacePath('../../../packages/ui-weapp/src/primitives.ts'),
         '@varo-ui/weapp': workspacePath('../../../packages/ui-weapp/src/index.ts'),
       },
     },
@@ -46,6 +96,7 @@ export default defineConfig({
     search: {
       provider: 'local',
       options: {
+        _render: renderSearchMarkdown,
         detailedView: true,
         translations: {
           button: { buttonText: '搜索文档', buttonAriaLabel: '搜索文档' },
@@ -214,6 +265,7 @@ export default defineConfig({
                   { text: 'AgentFlowchart', link: '/ai/flowchart' },
                   { text: 'AgentFineTune', link: '/ai/fine-tune' },
                   { text: 'AgentChat Block', link: '/ai/agent-chat' },
+                  { text: 'AgentWorkspace Block', link: '/ai/agent-workspace' },
                 ],
               },
             ],
@@ -427,6 +479,7 @@ export default defineConfig({
                   { text: 'AgentFlowchart', link: '/en/ai/flowchart' },
                   { text: 'AgentFineTune', link: '/en/ai/fine-tune' },
                   { text: 'AgentChat Block', link: '/en/ai/agent-chat' },
+                  { text: 'AgentWorkspace Block', link: '/en/ai/agent-workspace' },
                 ],
               },
             ],
diff --git a/apps/docs/.vitepress/theme/custom.css b/apps/docs/.vitepress/theme/custom.css
index c74c8e9d..fa036d1a 100644
--- a/apps/docs/.vitepress/theme/custom.css
+++ b/apps/docs/.vitepress/theme/custom.css
@@ -580,6 +580,14 @@ html:not(.dark) .VPFeature:hover {
   width: 100%;
   overflow: hidden;
   table-layout: fixed;
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.vp-doc > table th,
+.vp-doc > table td {
+  padding: 12px 16px;
+  vertical-align: top;
 }
 
 .vp-doc > table th {
@@ -1637,8 +1645,7 @@ html:not(.dark) .VPFeature:hover {
 .varo-color-token-card,
 .varo-role-card,
 .varo-color-component-system,
-.varo-token-grid div,
-.varo-primitive-stack section {
+.varo-token-grid div {
   background: var(--varo-card);
   border: 1px solid var(--varo-border);
   border-radius: var(--varo-radius-lg);
@@ -1655,16 +1662,14 @@ html:not(.dark) .VPFeature:hover {
 
 .varo-color-intro h2,
 .varo-color-scale h2,
-.varo-color-component-system h2,
-.varo-primitive-stack h2 {
+.varo-color-component-system h2 {
   margin: 0 0 8px;
   letter-spacing: 0;
 }
 
 .varo-color-intro p,
 .varo-color-scale p,
-.varo-color-component-system p,
-.varo-primitive-stack p {
+.varo-color-component-system p {
   margin: 0;
   color: var(--varo-muted);
 }
@@ -1877,30 +1882,6 @@ html:not(.dark) .VPFeature:hover {
   overflow-wrap: anywhere;
 }
 
-.varo-primitive-stack {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-  margin: 22px 0 30px;
-}
-
-.varo-primitive-stack section {
-  padding: 18px;
-}
-
-.varo-primitive-stack span {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--varo-bg);
-  background: var(--varo-foreground);
-  border-radius: var(--varo-radius);
-}
-
 @media (max-width: 960px) {
   .varo-package-grid,
   .varo-stat-grid,
@@ -1908,8 +1889,7 @@ html:not(.dark) .VPFeature:hover {
   .varo-color-matrix,
   .varo-color-roles,
   .varo-color-state-strip,
-  .varo-token-grid,
-  .varo-primitive-stack {
+  .varo-token-grid {
     grid-template-columns: 1fr;
   }
 
diff --git a/apps/docs/.vitepress/theme/index.ts b/apps/docs/.vitepress/theme/index.ts
index a33519e5..4958c422 100644
--- a/apps/docs/.vitepress/theme/index.ts
+++ b/apps/docs/.vitepress/theme/index.ts
@@ -5,6 +5,7 @@ import {
   VCascader,
   VCheckbox,
   VCheckboxGroup,
+  VDateField,
   VDatePicker,
   VForm,
   VFormItem,
@@ -28,18 +29,21 @@ import {
 import DefaultTheme from 'vitepress/theme'
 import AgentComponentDemo from '../../src/components/AgentComponentDemo.vue'
 import AgentComponentsDemo from '../../src/components/AgentComponentsDemo.vue'
-import ComponentCatalog from '../../src/components/ComponentCatalog.vue'
+import DateFieldDemo from '../../src/components/DateFieldDemo.vue'
 import FormComponentDemo from '../../src/components/FormComponentDemo.vue'
 import InteractivePreview from '../../src/components/InteractivePreview.vue'
+import ListDemo from '../../src/components/ListDemo.vue'
 import MapDemo from '../../src/components/MapDemo.vue'
 import MiniProgramBlocksGallery from '../../src/components/MiniProgramBlocksGallery.vue'
 import PlatformTabsDemo from '../../src/components/PlatformTabsDemo.vue'
-import PrimitiveCatalog from '../../src/components/PrimitiveCatalog.vue'
 import PrimitiveExample from '../../src/components/PrimitiveExample.vue'
 import PrimitiveInteractionDemo from '../../src/components/PrimitiveInteractionDemo.vue'
+import PullRefreshDemo from '../../src/components/PullRefreshDemo.vue'
 import RegistryCoverageEvidence from '../../src/components/RegistryCoverageEvidence.vue'
-import RegistryInstallStrip from '../../src/components/RegistryInstallStrip.vue'
 import RobotChatDemo from '../../src/components/RobotChatDemo.vue'
+import SignatureDemo from '../../src/components/SignatureDemo.vue'
+import ToastDemo from '../../src/components/ToastDemo.vue'
+import WatermarkDemo from '../../src/components/WatermarkDemo.vue'
 import DocsLayout from './DocsLayout.vue'
 import '@varo-ui/h5/source/style.css'
 import './tailwind.css'
@@ -52,16 +56,19 @@ const theme: Theme = {
   enhanceApp({ app }) {
     app.component('AgentComponentsDemo', AgentComponentsDemo)
     app.component('AgentComponentDemo', AgentComponentDemo)
+    app.component('DateFieldDemo', DateFieldDemo)
     app.component('FormComponentDemo', FormComponentDemo)
     app.component('InteractivePreview', InteractivePreview)
-    app.component('ComponentCatalog', ComponentCatalog)
+    app.component('ListDemo', ListDemo)
     app.component('MiniProgramBlocksGallery', MiniProgramBlocksGallery)
     app.component('MapDemo', MapDemo)
     app.component('RobotChatDemo', RobotChatDemo)
     app.component('PlatformTabsDemo', PlatformTabsDemo)
-    app.component('PrimitiveCatalog', PrimitiveCatalog)
+    app.component('PullRefreshDemo', PullRefreshDemo)
     app.component('PrimitiveExample', PrimitiveExample)
-    app.component('RegistryInstallStrip', RegistryInstallStrip)
+    app.component('SignatureDemo', SignatureDemo)
+    app.component('WatermarkDemo', WatermarkDemo)
+    app.component('ToastDemo', ToastDemo)
     app.component('RegistryCoverageEvidence', RegistryCoverageEvidence)
     app.component('PrimitiveInteractionDemo', PrimitiveInteractionDemo)
     app.component('VCalendar', VCalendar)
@@ -69,6 +76,7 @@ const theme: Theme = {
     app.component('VCascader', VCascader)
     app.component('VCheckbox', VCheckbox)
     app.component('VCheckboxGroup', VCheckboxGroup)
+    app.component('VDateField', VDateField)
     app.component('VDatePicker', VDatePicker)
     app.component('VForm', VForm)
     app.component('VFormItem', VFormItem)
diff --git a/apps/docs/ai/activity.md b/apps/docs/ai/activity.md
index 73fcefd2..c7925c64 100644
--- a/apps/docs/ai/activity.md
+++ b/apps/docs/ai/activity.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="activity" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -39,11 +29,11 @@ import { AgentActivity } from '@/components/agent-ui'
 
 无。
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                               |
 | ------ | ---------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`            |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentActivity.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/agent-chat.md b/apps/docs/ai/agent-chat.md
index f1a79e15..0021821e 100644
--- a/apps/docs/ai/agent-chat.md
+++ b/apps/docs/ai/agent-chat.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="agent-chat" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 blocks/agent-chat
-pnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -52,11 +42,11 @@ import AgentChat from '@/components/blocks/agent-chat.vue'
 | `submit`            | `string` | 提交       |
 | `update:modelValue` | `string` | 更新提示词 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                               |
 | ------ | ------------------------------------ |
 | H5     | `@/components/blocks/agent-chat.vue` |
 | weapp  | `@/components/blocks/agent-chat.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/agent-workspace.md b/apps/docs/ai/agent-workspace.md
new file mode 100644
index 00000000..a763b99d
--- /dev/null
+++ b/apps/docs/ai/agent-workspace.md
@@ -0,0 +1,82 @@
+# AgentWorkspace
+
+组合来源授权、会话版本、执行区和输入框的双端 Agent Block。
+
+## 基础用法
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import AgentWorkspace from '@/components/blocks/agent-workspace.vue'
+
+const open = shallowRef(true)
+const prompt = shallowRef('')
+
+function submit(value: string) {
+  console.log(value)
+}
+</script>
+
+<template>
+  <AgentWorkspace
+    v-model:prompt="prompt"
+    :open="open"
+    placement="docked"
+    title="问题分析"
+    @close="open = false"
+    @submit="submit"
+  />
+</template>
+```
+
+## Props
+
+| Prop              | 类型                            | 默认值                           | 说明           |
+| ----------------- | ------------------------------- | -------------------------------- | -------------- |
+| `activeVersionId` | `string`                        | `undefined`                      | 当前会话版本   |
+| `busy`            | `boolean`                       | `false`                          | 执行中状态     |
+| `contextUsage`    | `number`                        | `0`                              | 上下文占用比例 |
+| `messages`        | `AgentConversationMessage[]`    | `[]`                             | 对话消息       |
+| `open`            | `boolean`                       | `true`                           | 是否显示       |
+| `placement`       | `'page' \| 'docked' \| 'sheet'` | `'page'`                         | 布局模式       |
+| `prompt`          | `string`                        | `''`                             | 输入内容       |
+| `receipts`        | `AgentSourceReceiptItem[]`      | `[]`                             | 来源回执       |
+| `retrieval`       | `AgentRetrievalItem[]`          | `[]`                             | 检索进度       |
+| `sources`         | `AgentContextSource[]`          | `[]`                             | 可用来源       |
+| `subtitle`        | `string`                        | `'先确认可访问来源，再提交任务'` | 副标题         |
+| `tasks`           | `AgentTask[]`                   | `[]`                             | 执行任务       |
+| `title`           | `string`                        | `'Agent 工作区'`                 | 标题           |
+| `versions`        | `readonly AgentThreadVersion[]` | `[]`                             | 会话版本       |
+
+## Events
+
+| Event            | Payload                         | 说明         |
+| ---------------- | ------------------------------- | ------------ |
+| `submit`         | `string`                        | 提交输入     |
+| `update:prompt`  | `string`                        | 同步输入内容 |
+| `close`          | `void`                          | 关闭工作区   |
+| `toggleSource`   | `(AgentContextSource, boolean)` | 切换来源     |
+| `connectSource`  | `AgentContextSource`            | 连接来源     |
+| `retryRetrieval` | `AgentRetrievalItem`            | 重试检索     |
+| `retryTask`      | `AgentTask`                     | 重试任务     |
+| `approveTask`    | `AgentTask`                     | 批准任务     |
+| `cancelTask`     | `void`                          | 取消任务     |
+| `selectVersion`  | `AgentThreadVersion`            | 选择版本     |
+| `branchVersion`  | `AgentThreadVersion`            | 创建分支     |
+| `pinVersion`     | `AgentThreadVersion`            | 固定版本     |
+| `openReceipt`    | `AgentSourceReceiptItem`        | 打开回执     |
+| `connectReceipt` | `AgentSourceReceiptItem`        | 连接回执来源 |
+
+## Slots
+
+| Slot        | 说明                             |
+| ----------- | -------------------------------- |
+| `execution` | 替换默认对话、检索、任务和回执区 |
+
+::: warning Weapp 插槽配置
+使用无参数 `#execution` 时，在 `weapp-vite` 中设置 `weapp.vue.template.scopedSlotsRequireProps: true`，避免父级状态被泛型插槽转换遗漏。
+:::
+
+::: info 平台导入
+H5 使用 `vue`；小程序将示例中的 `vue` 替换为 `wevu`。两端都默认导入安装后的 `@/components/blocks/agent-workspace.vue`。
+:::
diff --git a/apps/docs/ai/approval.md b/apps/docs/ai/approval.md
index 043cdf71..cda20e5b 100644
--- a/apps/docs/ai/approval.md
+++ b/apps/docs/ai/approval.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="approval" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -53,11 +43,11 @@ import { AgentApproval } from '@/components/agent-ui'
 | --------- | -------- |
 | `default` | 补充内容 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentApproval.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/artifact.md b/apps/docs/ai/artifact.md
index d0354fd7..62d171b3 100644
--- a/apps/docs/ai/artifact.md
+++ b/apps/docs/ai/artifact.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="artifact" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -40,11 +30,11 @@ import { AgentArtifact } from '@/components/agent-ui'
 | ------ | ------------------- | -------- |
 | `open` | `AgentArtifactItem` | 打开产物 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentArtifact.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/attachments.md b/apps/docs/ai/attachments.md
index 8b3096b2..6f8b8eed 100644
--- a/apps/docs/ai/attachments.md
+++ b/apps/docs/ai/attachments.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="attachments" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -40,11 +30,11 @@ import { AgentAttachmentList } from '@/components/agent-ui'
 | -------- | --------------------- | -------- |
 | `remove` | `AgentAttachmentItem` | 移除附件 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                          |
 | ------ | ----------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`       |
 | weapp  | `@/components/agent-ui/AgentAttachmentList.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/citations.md b/apps/docs/ai/citations.md
index 4283ce49..411776f8 100644
--- a/apps/docs/ai/citations.md
+++ b/apps/docs/ai/citations.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="citations" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -43,11 +33,11 @@ import { AgentCitations } from '@/components/agent-ui'
 | `open`        | `AgentCitationItem` | 打开引用 |
 | `update:open` | `boolean`           | 展开变化 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                |
 | ------ | ----------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`             |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentCitations.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/code-block.md b/apps/docs/ai/code-block.md
index aeefc4c5..0d043ca6 100644
--- a/apps/docs/ai/code-block.md
+++ b/apps/docs/ai/code-block.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="code-block" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -51,11 +41,11 @@ import { AgentCodeBlock } from '@/components/agent-ui'
 | -------- | -------- |
 | `footer` | 底部扩展 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                |
 | ------ | ----------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`             |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentCodeBlock.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/command-search.md b/apps/docs/ai/command-search.md
index 067193d8..3763bee1 100644
--- a/apps/docs/ai/command-search.md
+++ b/apps/docs/ai/command-search.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="command-search" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentCommandSearch } from '@/components/agent-ui'
 | `select`            | `AgentSearchItem` | 选择命令   |
 | `update:modelValue` | `string`          | 更新搜索词 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                    |
 | ------ | --------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                 |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentCommandSearch.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/composer.md b/apps/docs/ai/composer.md
index 657b53bc..91102ba2 100644
--- a/apps/docs/ai/composer.md
+++ b/apps/docs/ai/composer.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="composer" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -54,11 +44,11 @@ import { AgentComposer } from '@/components/agent-ui'
 | `leading`  | 前置操作；H5 |
 | `trailing` | 后置操作；H5 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentComposer.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/context-card.md b/apps/docs/ai/context-card.md
index 5f53704b..111d6f17 100644
--- a/apps/docs/ai/context-card.md
+++ b/apps/docs/ai/context-card.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="context-card" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentContextCard } from '@/components/agent-ui'
 | ------ | ------------------- | -------- |
 | `open` | `AgentContextChunk` | 打开来源 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                  |
 | ------ | ------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`               |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentContextCard.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/conversation.md b/apps/docs/ai/conversation.md
index 5393f794..f9d88272 100644
--- a/apps/docs/ai/conversation.md
+++ b/apps/docs/ai/conversation.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="conversation" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -38,11 +28,11 @@ import { AgentConversation } from '@/components/agent-ui'
 
 无。
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                        |
 | ------ | --------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`     |
 | weapp  | `@/components/agent-ui/AgentConversation.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/diff-table.md b/apps/docs/ai/diff-table.md
index 3e60f111..4997a09d 100644
--- a/apps/docs/ai/diff-table.md
+++ b/apps/docs/ai/diff-table.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="diff-table" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentDiffTable } from '@/components/agent-ui'
 | `reject` | `void`          | 拒绝变更 |
 | `select` | `AgentTableRow` | 选择行   |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                |
 | ------ | ----------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`             |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentDiffTable.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/event-renderer.md b/apps/docs/ai/event-renderer.md
index a4f6db15..510c40bd 100644
--- a/apps/docs/ai/event-renderer.md
+++ b/apps/docs/ai/event-renderer.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="event-renderer" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -49,11 +39,11 @@ import { AgentEventRenderer } from '@/components/agent-ui'
 | `actions` | 回答完成操作 |
 | `default` | 后置扩展     |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                         |
 | ------ | ---------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`      |
 | weapp  | `@/components/agent-ui/AgentEventRenderer.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/file-diff.md b/apps/docs/ai/file-diff.md
index 1c6fe290..c58066aa 100644
--- a/apps/docs/ai/file-diff.md
+++ b/apps/docs/ai/file-diff.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="file-diff" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -89,17 +79,11 @@ const lines: AgentDiffLine[] = [
 | ------ | ----------------------- | ------------------------------------------- |
 | `line` | `{ line, index, side }` | 覆盖代码内容渲染；用于接入已有 token 高亮器 |
 
-## 设计边界
-
-视觉和交互参考 [@pierre/diffs](https://github.com/pierrecomputer/pierre/tree/main/packages/diffs)：中性代码面、低饱和新增/删除层、边栏指示、单栏/并排布局、行内变化和可展开 hunk。
-
-Varo 不是其移植版。`@pierre/diffs` 的 Shadow DOM、Shiki、Worker Pool 和大规模虚拟化针对浏览器代码审阅；这些能力不能直接运行在小程序。`AgentFileDiff` 保留适合 Agent 输出的轻量数据契约和双端一致交互。只做 H5 且需要超大 Diff、语法高亮、注释或编辑时，应直接使用 `@pierre/diffs`。
-
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                                                           |
 | ------ | ------------------------------------------------------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`                                                        |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentFileDiff.vue`；类型来自 `@/components/agent-ui/file-diff` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/filter-table.md b/apps/docs/ai/filter-table.md
index 19f173e9..cca45ab4 100644
--- a/apps/docs/ai/filter-table.md
+++ b/apps/docs/ai/filter-table.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="filter-table" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -46,11 +36,11 @@ import { AgentFilterTable } from '@/components/agent-ui'
 | `select`        | `AgentTableRow` | 选择行   |
 | `update:filter` | `string`        | 更新筛选 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                                                                |
 | ------ | ----------------------------------------------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                                                             |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentFilterTable.vue`；类型来自 `@/components/agent-ui/agent-table` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/fine-tune.md b/apps/docs/ai/fine-tune.md
index 09ead0c2..4435b48c 100644
--- a/apps/docs/ai/fine-tune.md
+++ b/apps/docs/ai/fine-tune.md
@@ -6,16 +6,6 @@ Agent 生成设计的属性检查器和调优面板。
 
 <AgentComponentDemo component="fine-tune" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -42,11 +32,11 @@ import { AgentFineTune } from '@/components/agent-ui'
 | `apply`           | `AgentFineTuneControl[]` | 应用       |
 | `update:controls` | `AgentFineTuneControl[]` | 更新控制项 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                               |
 | ------ | ---------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`            |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentFineTune.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/flowchart.md b/apps/docs/ai/flowchart.md
index 31b7d708..480cf31c 100644
--- a/apps/docs/ai/flowchart.md
+++ b/apps/docs/ai/flowchart.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="flowchart" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -42,11 +32,11 @@ import { AgentFlowchart } from '@/components/agent-ui'
 | `add`    | `string \| undefined` | 添加步骤 |
 | `select` | `AgentFlowNode`       | 选择节点 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                |
 | ------ | ----------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`             |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentFlowchart.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/image-generation.md b/apps/docs/ai/image-generation.md
index 648beb53..dc7dfe32 100644
--- a/apps/docs/ai/image-generation.md
+++ b/apps/docs/ai/image-generation.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="image-generation" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -46,11 +36,11 @@ import { AgentImageGeneration } from '@/components/agent-ui'
 | `retry`    | `void`   | 重试 |
 | `download` | `string` | 下载 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                      |
 | ------ | ----------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                   |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentImageGeneration.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/index.md b/apps/docs/ai/index.md
index 0d4c19b8..d85c31c5 100644
--- a/apps/docs/ai/index.md
+++ b/apps/docs/ai/index.md
@@ -1,151 +1,38 @@
 # AI Agent 组件
 
-Varo Agent UI 的基础 surface 按 **组件案例 → 基础用法 → Props → Events → Slots → 平台差异** 提供独立文档；本页同时记录 Agent Workspace contract。组件、Blocks 与两者合计的 surface 数量由下方 Registry inventory 统一计算，所有界面统一消费 `@varo-ui/ai` 事件与会话版本协议。
+`@varo-ui/ai` 提供事件、流式控制和 Markdown 协议；UI 通过 Registry 安装为可编辑源码。
 
-## 安装 Agent UI
-
-先安装无界面的事件协议，再选择目标端通过 Registry 写入可编辑 UI 源码：
+## 安装
 
 ```bash
 pnpm add @varo-ui/ai
 pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
 pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
+
+# Blocks
 pnpm dlx @varo-ui/cli add --target h5 blocks/agent-chat
 pnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat
 pnpm dlx @varo-ui/cli add --target h5 blocks/agent-workspace
 pnpm dlx @varo-ui/cli add --target weapp blocks/agent-workspace
 ```
 
-[浏览全部 Agent 组件](#agent-component-inventory)
+::: info 导入
+H5 从 `@/components/agent-ui` 命名导入；小程序从对应 `.vue` 文件导入。
+:::
 
-## 完整对话演示
+## 演示
 
 <AgentComponentsDemo locale="zh" />
 
-<span id="agent-component-inventory"></span>
-
-## 对话与流式内容
-
-| 组件                                       | 用途                         |
-| ------------------------------------------ | ---------------------------- |
-| [AgentLoading](./loading)                  | 加载、耗时和运行中反馈       |
-| [AgentThinking](./thinking)                | 推理、搜索和执行轨迹         |
-| [AgentMarkdown](./markdown)                | 安全增量 Markdown AST        |
-| [AgentStream](./stream)                    | 流式回答、错误、光标和操作区 |
-| [AgentMessage](./message)                  | 用户、助手和系统消息         |
-| [AgentConversation](./conversation)        | 消息历史组合                 |
-| [AgentMessageScroller](./message-scroller) | 感知阅读位置的会话视口       |
-
-## 执行、工具与审批
-
-| 组件                                    | 用途                         |
-| --------------------------------------- | ---------------------------- |
-| [AgentToolChip](./tool-chip)            | 紧凑工具状态                 |
-| [AgentToolResult](./tool-result)        | 可折叠终端与请求结果         |
-| [AgentTaskList](./task-list)            | Agent 计划与进度             |
-| `AgentTaskRunner`                       | 可重试、审批和取消的执行控制 |
-| [AgentActivity](./activity)             | 混合推理、搜索、工具活动流   |
-| [AgentApproval](./approval)             | 通用人工审批                 |
-| [AgentToolApproval](./tool-approval)    | 工具权限审批                 |
-| [AgentRecommendation](./recommendation) | 带置信度的 Agent 建议        |
-| [AgentEventRenderer](./event-renderer)  | 快照到完整回答 UI 的状态投影 |
-
-## 输入与回答操作
-
-| 组件                                           | 用途                         |
-| ---------------------------------------------- | ---------------------------- |
-| [AgentRadioGroup](./radio-group)               | 带动效指示器的单选决策       |
-| [AgentPromptSuggestions](./prompt-suggestions) | 提示词建议                   |
-| [AgentComposer](./composer)                    | Agent 输入和发送状态         |
-| `AgentComposerScope`                           | 提交前的来源授权与上下文预算 |
-| [AgentResponseActions](./response-actions)     | 复制、重试、赞、踩           |
-| [AgentSelectionActions](./selection-actions)   | 针对选中文本的 AI 操作       |
-| [AgentCommandSearch](./command-search)         | Agent 命令搜索               |
-
-## 上下文、引用与产物
-
-| 组件                                       | 用途                                 |
-| ------------------------------------------ | ------------------------------------ |
-| [AgentArtifact](./artifact)                | 代码、文档、文件和图片产物           |
-| [AgentAttachmentList](./attachments)       | 附件预览与移除                       |
-| [AgentSourceList](./sources)               | 来源列表                             |
-| [AgentCitations](./citations)              | 可折叠引用集合                       |
-| `AgentRetrievalProgress`                   | 可见检索队列与失败重试               |
-| [AgentRagPipeline](./rag-pipeline)         | 五阶段 RAG、上下文组装与流式引用联动 |
-| `AgentSourceReceipt`                       | 回答完成后的来源读取回执             |
-| [AgentContextCard](./context-card)         | 检索知识块                           |
-| [AgentCodeBlock](./code-block)             | 独立流式代码块                       |
-| [AgentFileDiff](./file-diff)               | 文件级差异                           |
-| [AgentImageGeneration](./image-generation) | 图片生成生命周期                     |
-
-## 结构化数据与工作区
-
-| 组件                                 | 用途                            |
-| ------------------------------------ | ------------------------------- |
-| [AgentSidebar](./sidebar)            | AI 工作区侧栏                   |
-| `AgentThreadVersions`                | 会话分支与版本选择              |
-| `AgentShell`                         | page / docked / sheet placement |
-| [AgentInsightCard](./insight-card)   | 可翻页 Agent 洞察               |
-| [AgentDiffTable](./diff-table)       | AI 表格修改建议                 |
-| [AgentRecordsTable](./records-table) | 可排序记录表格                  |
-| [AgentFilterTable](./filter-table)   | 状态过滤表格                    |
-| [AgentFlowchart](./flowchart)        | Agent 工作流                    |
-| [AgentFineTune](./fine-tune)         | 设计属性调优面板                |
-
-## Agent Workspace contract
-
-| 组件                     | 关键输入                              | 用户事件                                             |
-| ------------------------ | ------------------------------------- | ---------------------------------------------------- |
-| `AgentComposerScope`     | `sources`、`usagePercent`、`disabled` | `toggle(source, enabled)`、`connect(source)`         |
-| `AgentRetrievalProgress` | `items`                               | `retry(item)`                                        |
-| `AgentRagPipeline`       | `query`、`steps`、`sources`、`answer` | `run`、`cancel`、`selectSource(source)`              |
-| `AgentSourceReceipt`     | `items`、`summary`                    | `open(item)`、`connect(item)`                        |
-| `AgentTaskRunner`        | `tasks`、`busy`                       | `retry(task)`、`approve(task)`、`cancel`             |
-| `AgentThreadVersions`    | `versions`、`activeId`                | `select(version)`、`branch(version)`、`pin(version)` |
-| `AgentShell`             | `placement`、`open`、`title`          | `close`                                              |
-
-`createAgentThreadController()` 在 `@varo-ui/ai` 中拥有不可变、无环的版本图；组件只渲染 snapshot 并转发决策。`AgentWorkspace` 使用 `toggleSource`、`retryRetrieval`、`retryTask`、`selectVersion` 等 qualified events，避免不同 surface 的 `retry` / `connect` 冲突。
-
-### RAG 流程与动效
-
-`AgentRagPipeline` 随 `components/agent-ui` 安装。它只投影受控快照，不执行检索、模型请求或来源授权。业务层按实际进度替换输入：
-
-- `steps`：固定 `query`、`embed`、`retrieve`、`assemble`、`generate` 五个阶段；状态为 `waiting`、`running`、`completed` 或 `failed`。可提供 `detail` 与 `durationMs`。仍有阶段运行时，整体保持运行状态并允许停止；没有运行阶段后再呈现失败结果。
-- `sources`：稳定 `id` 与 `title`，可附带 `excerpt`、0–1 的 `score`、上下文 `tokens` 和 `blue/violet/rose` 色调。仅当所有来源都有有限正数 `tokens` 时按权重分配片段，否则等分；片段保留可读的最小宽度。
-- `answer`：带稳定 `id` 的文本片段 `{ type: 'text', text }` 或引用 `{ type: 'citation', sourceId }`。引用通过来源 ID 关联，不依赖数组位置。删除或更换引用映射会清理已失效的来源反馈，不重播未变化的引用。
-- `title`、`elapsedMs`、`className` 控制标题、总耗时与容器；`reducedMotion` 关闭非必要动效。
-
-新引用出现时，对应来源与上下文片段短暂高亮；H5 的悬停、键盘聚焦及点击均能联动来源，小程序使用点击选择。来源缺失时，H5 显示禁用引用按钮，小程序显示不可交互的 `[?]` 文本，并通过可访问标签说明来源不可用；正文仍可阅读。停止、重播与卸载会清理演示定时器；重播沿用当前查询，组件的业务状态不等待动画结束。
-
-H5 自动遵循 `prefers-reduced-motion`，小程序同时提供 `reducedMotion` 属性与媒体查询样式。动效使用主题中的 `--varo-agent-motion-*` 变量以及 transform/opacity，不引入动画运行时依赖。
-
-`AgentWorkspace` 的 `execution` 插槽可放入此组件，替换默认的对话、检索、任务与回执区域；来源授权、版本与输入区仍由 Workspace 组合。Weapp 的 `weapp-vite` 配置应设置 `weapp.vue.template.scopedSlotsRequireProps: true`，让没有插槽参数的 `#execution` 保持普通命名插槽，避免泛型插槽自动 `setData.pick` 遗漏父级状态。两端 playground 提供可取消、重播的演示数据流程。
-
-## 完整 Block
-
-- [AgentChat](./agent-chat)：组合消息历史、流式回答、推理、工具、审批和输入区。
-- `AgentWorkspace`：组合来源授权、检索进度、任务控制、版本分支、对话和三种 placement。
-
-## Beautiful UI / beUI / ReUI 对标
-
-Varo 没有直接复制 React/Framer Motion 源码，而是把交互能力重写为 Vue 3、`weapp-vite`、`wevu` 和 `weapp-tailwindcss` 可运行的双端组件。
-
-- Beautiful UI 的 20 类 Agent surface 已映射：Loading、Thinking、Streaming、Approval、Tool Chips、Task Rows、Chat、Prompt Bar、Recommendation、Context、Diff Table、Records Table、Filter Table、Sidebar、Search、Flowchart、Insight、Code Block、Fine-tune、Selection Actions。
-- beUI 的 Agent 能力已映射：Message / Bubble、Message Scroller、Prompt Input、Todo List、Code Block、Approval Card、File Diff、Tool Result、Streaming Response、Image Generation、Tool Approval、Citations、Agent Activity、Loading States、AI Sidebar、Chat App。
-- ReUI AI Chat 1 / 6 / 9 / 12 的关键闭环已映射为 `AgentComposerScope`、`AgentRetrievalProgress`、`AgentSourceReceipt`、`AgentTaskRunner`、`AgentThreadVersions`、`AgentShell` 与 `AgentWorkspace`；只借鉴交互结构，不复制 React/Radix 源码或桌面视觉壳。
-- React 专属的 `motion/layoutId`、DOM selection 和 browser clipboard 不原样带入小程序；对应能力使用 WXML 状态、CSS 动效、受控事件和业务回调实现。
-
-## 事件协议
-
-流式 surface 共享以下 transport 事件：
+::: warning RAG 边界
+`AgentRagPipeline` 只渲染受控状态并触发 `run`、`cancel`、`selectSource`；检索、模型请求和来源授权由业务层实现。
+:::
 
-- `message.start` / `message.end`
-- `text.delta`
-- `reasoning.*`
-- `tool.*`
-- `approval.*`
-- `data` / `error` / `done`
+## Blocks
 
-会话分支不进入流式 transport event：业务层通过 `createAgentThreadController()` 执行 `append`、`fork` 与 `select`，再把只读 versions snapshot 传给 `AgentThreadVersions`。来源授权、重试、审批和 shell close 同样是受控 UI callbacks。
+- [AgentChat](./agent-chat)：对话、流式回答、工具、审批和输入。
+- [AgentWorkspace](./agent-workspace)：来源、检索、任务、版本和多种布局。
 
-H5 使用 Markstream Core RAF 调度；小程序使用定时帧调度。两端共用安全 Markdown AST。
+::: info 平台
+H5 使用 RAF 调度；小程序使用定时帧调度。两端共用安全 Markdown AST。
+:::
diff --git a/apps/docs/ai/insight-card.md b/apps/docs/ai/insight-card.md
index 50442e23..2db7003a 100644
--- a/apps/docs/ai/insight-card.md
+++ b/apps/docs/ai/insight-card.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="insight-card" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -43,11 +33,11 @@ import { AgentInsightCard } from '@/components/agent-ui'
 | `action`         | `AgentInsightItem` | 执行建议   |
 | `update:current` | `number`           | 更新当前页 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                  |
 | ------ | ------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`               |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentInsightCard.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/loading.md b/apps/docs/ai/loading.md
index 1a124218..a05977d7 100644
--- a/apps/docs/ai/loading.md
+++ b/apps/docs/ai/loading.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="loading" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentLoading } from '@/components/agent-ui'
 
 无。
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentLoading.vue`  |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/markdown.md b/apps/docs/ai/markdown.md
index 0799873a..e596f17b 100644
--- a/apps/docs/ai/markdown.md
+++ b/apps/docs/ai/markdown.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="markdown" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -45,15 +35,15 @@ const markdownContent = '## Result\n\n**Ready**'
 | ------ | -------- | -------- |
 | `link` | `string` | 链接点击 |
 
-## 小程序渲染
-
+::: warning 小程序渲染
 小程序继续使用平台无关的 `stream-markdown-parser` 生成安全 AST。普通行内节点会转换为微信 `rich-text nodes`，标题、列表、代码块、表格、图片和引用继续使用原生小程序节点。链接不会交给 `rich-text`，仍通过 `link` 事件由业务决定如何打开；原始 HTML 不会直接注入。
+:::
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentMarkdown.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/message-scroller.md b/apps/docs/ai/message-scroller.md
index 91adf36f..0304a623 100644
--- a/apps/docs/ai/message-scroller.md
+++ b/apps/docs/ai/message-scroller.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="message-scroller" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -51,11 +41,11 @@ import { AgentMessageScroller } from '@/components/agent-ui'
 | --------- | -------- |
 | `default` | 会话内容 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                      |
 | ------ | ----------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                   |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentMessageScroller.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/message.md b/apps/docs/ai/message.md
index 4ec2848d..c22131b4 100644
--- a/apps/docs/ai/message.md
+++ b/apps/docs/ai/message.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="message" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -48,11 +38,11 @@ import { AgentMessage } from '@/components/agent-ui'
 | --------- | -------- |
 | `default` | 消息内容 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentMessage.vue`  |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/prompt-suggestions.md b/apps/docs/ai/prompt-suggestions.md
index 421e9691..460ba404 100644
--- a/apps/docs/ai/prompt-suggestions.md
+++ b/apps/docs/ai/prompt-suggestions.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="prompt-suggestions" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentPromptSuggestions } from '@/components/agent-ui'
 | -------- | -------- | ---------- |
 | `select` | `string` | 选中建议词 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                             |
 | ------ | -------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`          |
 | weapp  | `@/components/agent-ui/AgentPromptSuggestions.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/radio-group.md b/apps/docs/ai/radio-group.md
index 564dde19..0f62752a 100644
--- a/apps/docs/ai/radio-group.md
+++ b/apps/docs/ai/radio-group.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="radio-group" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -43,11 +33,11 @@ import { AgentRadioGroup } from '@/components/agent-ui'
 | `update:value` | `string` | 更新选中值 |
 | `change`       | `string` | 选择变化   |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                      |
 | ------ | ------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`   |
 | weapp  | `@/components/agent-ui/AgentRadioGroup.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/rag-pipeline.md b/apps/docs/ai/rag-pipeline.md
index 7c51fed4..339424f2 100644
--- a/apps/docs/ai/rag-pipeline.md
+++ b/apps/docs/ai/rag-pipeline.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="rag-pipeline" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。`AgentRagPipeline` 只投影受控快照，不执行检索、模型请求或来源授权。
-
 ## 基础用法
 
 ```vue
@@ -38,15 +28,16 @@ import { AgentRagPipeline } from '@/components/agent-ui'
 
 ## Props
 
-| Prop            | Type                   | Default        | 说明               |
-| --------------- | ---------------------- | -------------- | ------------------ |
-| `query`         | `string`               | `''`           | 当前查询           |
-| `steps`         | `AgentRagStep[]`       | `[]`           | 五阶段进度         |
-| `sources`       | `AgentRagSource[]`     | `[]`           | 检索来源           |
-| `answer`        | `AgentRagAnswerPart[]` | `[]`           | 文本片段与引用来源 |
-| `title`         | `string`               | `检索增强生成` | 标题               |
-| `elapsedMs`     | `number`               | `undefined`    | 总耗时             |
-| `reducedMotion` | `boolean`              | `false`        | 关闭非必要动效     |
+| Prop            | Type                            | Default          | 说明               |
+| --------------- | ------------------------------- | ---------------- | ------------------ |
+| `className`     | `ClassValue`                    | `undefined`      | 根节点样式         |
+| `query`         | `string`                        | `''`             | 当前查询           |
+| `steps`         | `readonly AgentRagStep[]`       | `[]`             | 五阶段进度         |
+| `sources`       | `readonly AgentRagSource[]`     | `[]`             | 检索来源           |
+| `answer`        | `readonly AgentRagAnswerPart[]` | `[]`             | 文本片段与引用来源 |
+| `title`         | `string`                        | `'检索增强生成'` | 标题               |
+| `elapsedMs`     | `number`                        | `undefined`      | 总耗时             |
+| `reducedMotion` | `boolean`                       | `false`          | 关闭非必要动效     |
 
 ## Events
 
@@ -56,11 +47,12 @@ import { AgentRagPipeline } from '@/components/agent-ui'
 | `cancel`       | `void`           | 停止当前流程 |
 | `selectSource` | `AgentRagSource` | 选中某个来源 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                  |
 | ------ | ------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`               |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentRagPipeline.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。文档演示使用本地快照，不调用模型或检索服务。
+文档演示使用本地快照，不调用模型或检索服务。
+:::
diff --git a/apps/docs/ai/recommendation.md b/apps/docs/ai/recommendation.md
index 1643610b..6ac2f80f 100644
--- a/apps/docs/ai/recommendation.md
+++ b/apps/docs/ai/recommendation.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="recommendation" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -50,11 +40,11 @@ import { AgentRecommendation } from '@/components/agent-ui'
 | `default`   | 扩展内容 |
 | `secondary` | 次要操作 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                          |
 | ------ | ----------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`       |
 | weapp  | `@/components/agent-ui/AgentRecommendation.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/records-table.md b/apps/docs/ai/records-table.md
index 715a7c19..32569950 100644
--- a/apps/docs/ai/records-table.md
+++ b/apps/docs/ai/records-table.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="records-table" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentRecordsTable } from '@/components/agent-ui'
 | `select` | `AgentTableRow`    | 选择记录 |
 | `sort`   | `AgentTableColumn` | 排序     |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                   |
 | ------ | -------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentRecordsTable.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/response-actions.md b/apps/docs/ai/response-actions.md
index 2c2e80b4..2c7a87c5 100644
--- a/apps/docs/ai/response-actions.md
+++ b/apps/docs/ai/response-actions.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="response-actions" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentResponseActions } from '@/components/agent-ui'
 | `like`    | `void`  | 有帮助 |
 | `dislike` | `void`  | 需改进 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                           |
 | ------ | ------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`        |
 | weapp  | `@/components/agent-ui/AgentResponseActions.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/selection-actions.md b/apps/docs/ai/selection-actions.md
index 0dd58d80..8b035d25 100644
--- a/apps/docs/ai/selection-actions.md
+++ b/apps/docs/ai/selection-actions.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="selection-actions" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentSelectionActions } from '@/components/agent-ui'
 | -------- | ------------------ | -------- |
 | `select` | `{ action; text }` | 选择操作 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                       |
 | ------ | ------------------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`                    |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentSelectionActions.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/sidebar.md b/apps/docs/ai/sidebar.md
index e504e9ea..3ddb4a4c 100644
--- a/apps/docs/ai/sidebar.md
+++ b/apps/docs/ai/sidebar.md
@@ -6,16 +6,6 @@ AI 工作区侧栏，支持分组、折叠、创建和选中状态。
 
 <AgentComponentDemo component="sidebar" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -52,11 +42,11 @@ import { AgentSidebar } from '@/components/agent-ui'
 | -------- | -------- |
 | `footer` | 底部内容 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                              |
 | ------ | --------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`           |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentSidebar.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/sources.md b/apps/docs/ai/sources.md
index 74572dcc..9488b358 100644
--- a/apps/docs/ai/sources.md
+++ b/apps/docs/ai/sources.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="sources" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentSourceList } from '@/components/agent-ui'
 | ------ | ----------------- | -------- |
 | `open` | `AgentSourceItem` | 打开来源 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                      |
 | ------ | ------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`   |
 | weapp  | `@/components/agent-ui/AgentSourceList.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/stream.md b/apps/docs/ai/stream.md
index ac2a2620..b1a5a4e7 100644
--- a/apps/docs/ai/stream.md
+++ b/apps/docs/ai/stream.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="stream" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -51,15 +41,15 @@ import { AgentStream } from '@/components/agent-ui'
 | --------- | ------------ |
 | `actions` | 完成后的操作 |
 
-## 流式调度
-
+::: info 流式调度
 `@varo-ui/ai` 对齐 `markstream-core 2.0.7` 和 `stream-markdown-parser 1.2.13`。H5 使用 RAF 调度；小程序使用定时帧调度，但保持 grapheme 边界、代码围栏原子提交、追赶延迟、启动延迟、burst reveal、暂停、恢复、flush 和 dispose 契约。
+:::
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentStream.vue`   |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/task-list.md b/apps/docs/ai/task-list.md
index 94b5b23f..2c4b0a53 100644
--- a/apps/docs/ai/task-list.md
+++ b/apps/docs/ai/task-list.md
@@ -6,16 +6,6 @@ Agent 计划、任务进度和完成计数。
 
 <AgentComponentDemo component="task-list" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -39,11 +29,11 @@ import { AgentTaskList } from '@/components/agent-ui'
 
 无。
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentTaskList.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/thinking.md b/apps/docs/ai/thinking.md
index a0bcbb09..4164595a 100644
--- a/apps/docs/ai/thinking.md
+++ b/apps/docs/ai/thinking.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="thinking" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentThinking } from '@/components/agent-ui'
 | ------------- | --------- | ------------ |
 | `update:open` | `boolean` | 展开状态变化 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentThinking.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/tool-approval.md b/apps/docs/ai/tool-approval.md
index 3c05ab33..b73ac008 100644
--- a/apps/docs/ai/tool-approval.md
+++ b/apps/docs/ai/tool-approval.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="tool-approval" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -45,11 +35,11 @@ import { AgentToolApproval } from '@/components/agent-ui'
 | `deny`            | `void`                  | 拒绝         |
 | `update:remember` | `boolean`               | 更新记忆选项 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                   |
 | ------ | -------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentToolApproval.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/tool-chip.md b/apps/docs/ai/tool-chip.md
index 06ef02eb..af4d793c 100644
--- a/apps/docs/ai/tool-chip.md
+++ b/apps/docs/ai/tool-chip.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="tool-chip" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -39,11 +29,11 @@ import { AgentToolChip } from '@/components/agent-ui'
 
 无。
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentToolChip.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/ai/tool-result.md b/apps/docs/ai/tool-result.md
index a1387d27..1444ab43 100644
--- a/apps/docs/ai/tool-result.md
+++ b/apps/docs/ai/tool-result.md
@@ -6,16 +6,6 @@
 
 <AgentComponentDemo component="tool-result" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。
-
 ## 基础用法
 
 ```vue
@@ -52,11 +42,11 @@ import { AgentToolResult } from '@/components/agent-ui'
 | --------- | ---------- |
 | `default` | 自定义输出 |
 
-## 平台差异
+::: info 平台差异
 
 | Target | Import                                                 |
 | ------ | ------------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`              |
 | weapp  | 默认导出自 `@/components/agent-ui/AgentToolResult.vue` |
 
-组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。
+:::
diff --git a/apps/docs/components/badge.md b/apps/docs/components/badge.md
index 89b5fdf8..c02e96ba 100644
--- a/apps/docs/components/badge.md
+++ b/apps/docs/components/badge.md
@@ -1,7 +1,5 @@
 # Badge 徽标
 
-<RegistryInstallStrip item="components/badge" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="badge" locale="zh" />
diff --git a/apps/docs/components/breadcrumb.md b/apps/docs/components/breadcrumb.md
index bb6854cf..4b1d16eb 100644
--- a/apps/docs/components/breadcrumb.md
+++ b/apps/docs/components/breadcrumb.md
@@ -1,7 +1,5 @@
 # Breadcrumb 面包屑
 
-<RegistryInstallStrip item="components/breadcrumb" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 基础用法
 
 ```vue
diff --git a/apps/docs/components/button.md b/apps/docs/components/button.md
index 5819f3d9..23ec69e0 100644
--- a/apps/docs/components/button.md
+++ b/apps/docs/components/button.md
@@ -1,11 +1,13 @@
 # Button
 
-<RegistryInstallStrip item="components/button" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="button" locale="zh" />
 
+::: info 交互
+按钮保留 44px 默认命中高度和现有语义色。按压使用 140ms 的轻量缩放与内阴影反馈；Ghost 默认透明，仅在 hover 或按压时出现弱背景。减少动态效果时不执行空间缩放。
+:::
+
 ## 基础用法
 
 ```vue
diff --git a/apps/docs/components/calendar-card.md b/apps/docs/components/calendar-card.md
index 62832163..5b8356b0 100644
--- a/apps/docs/components/calendar-card.md
+++ b/apps/docs/components/calendar-card.md
@@ -1,7 +1,5 @@
 # CalendarCard 日历卡片
 
-<RegistryInstallStrip item="components/calendar" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="calendar-card" locale="zh" />
diff --git a/apps/docs/components/calendar.md b/apps/docs/components/calendar.md
index 361315d4..e409ee3e 100644
--- a/apps/docs/components/calendar.md
+++ b/apps/docs/components/calendar.md
@@ -1,7 +1,5 @@
 # Calendar 日历
 
-<RegistryInstallStrip item="components/calendar" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="calendar" locale="zh" />
diff --git a/apps/docs/components/cascader.md b/apps/docs/components/cascader.md
index 02184eff..0866dcbf 100644
--- a/apps/docs/components/cascader.md
+++ b/apps/docs/components/cascader.md
@@ -1,7 +1,5 @@
 # Cascader 级联选择器
 
-<RegistryInstallStrip item="components/cascader" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="cascader" locale="zh" />
diff --git a/apps/docs/components/cell.md b/apps/docs/components/cell.md
index f3bd6555..87ae0779 100644
--- a/apps/docs/components/cell.md
+++ b/apps/docs/components/cell.md
@@ -1,7 +1,5 @@
 # Cell
 
-<RegistryInstallStrip item="components/cell" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="cell" locale="zh" />
diff --git a/apps/docs/components/checkbox.md b/apps/docs/components/checkbox.md
index 4a64474f..0dd29d92 100644
--- a/apps/docs/components/checkbox.md
+++ b/apps/docs/components/checkbox.md
@@ -1,7 +1,5 @@
 # Checkbox 复选按钮
 
-<RegistryInstallStrip item="components/checkbox" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="checkbox" locale="zh" />
diff --git a/apps/docs/components/date-field.md b/apps/docs/components/date-field.md
new file mode 100644
index 00000000..b13781fc
--- /dev/null
+++ b/apps/docs/components/date-field.md
@@ -0,0 +1,32 @@
+# DateField 日期字段
+
+年 / 月 / 日三列选择，底层复用 `VPicker`。月历网格继续用 [Calendar](/components/calendar)，不要把 DateField 当成日历。
+
+## 演示
+
+<DateFieldDemo locale="zh" />
+
+## Props
+
+| Prop          | 类型      | 默认值          | 描述                  |
+| ------------- | --------- | --------------- | --------------------- |
+| `visible`     | `boolean` | `false`         | Picker 是否展示       |
+| `value`       | `string`  | `undefined`     | 当前日期 `YYYY-MM-DD` |
+| `placeholder` | `string`  | `'Select date'` | 空值文案              |
+| `disabled`    | `boolean` | `false`         | 禁用字段              |
+| `readonly`    | `boolean` | `false`         | 只读字段              |
+| `minYear`     | `number`  | `1970`          | 起始年份              |
+| `maxYear`     | `number`  | `2100`          | 结束年份              |
+| `title`       | `string`  | `undefined`     | Picker 标题           |
+| `confirmText` | `string`  | `'Confirm'`     | 确认文案              |
+| `cancelText`  | `string`  | `'Cancel'`      | 取消文案              |
+
+## Events
+
+| Event            | Payload   | 描述           |
+| ---------------- | --------- | -------------- |
+| `update:value`   | `string`  | 确认后提交日期 |
+| `update:visible` | `boolean` | Picker 显隐    |
+| `change`         | `string`  | 草稿日期变化   |
+| `confirm`        | `string`  | 确认并提交     |
+| `cancel`         | `void`    | 取消并保留原值 |
diff --git a/apps/docs/components/date-picker.md b/apps/docs/components/date-picker.md
index 8b058794..c4372688 100644
--- a/apps/docs/components/date-picker.md
+++ b/apps/docs/components/date-picker.md
@@ -1,7 +1,5 @@
 # DatePicker 日期选择器
 
-<RegistryInstallStrip item="components/date-picker" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="date-picker" locale="zh" />
diff --git a/apps/docs/components/dialog.md b/apps/docs/components/dialog.md
index 909b78f5..0765fb63 100644
--- a/apps/docs/components/dialog.md
+++ b/apps/docs/components/dialog.md
@@ -1,75 +1,12 @@
 # Dialog
 
-Varo 的 Dialog 采用 parts 暴露方式：`VDialogRoot`、`VDialogTrigger`、`VDialogOverlay`、`VDialogContent` 与 `VDialogClose`。
-
-<RegistryInstallStrip item="components/dialog" :targets="['h5', 'weapp']" locale="zh" />
+由 `VDialogRoot`、`VDialogTrigger`、`VDialogOverlay`、`VDialogContent` 和 `VDialogClose` 组合。
 
 ## 演示
 
 <PlatformTabsDemo example="dialog" locale="zh" />
 
-## 何时使用
-
-- 需要模态确认或补充信息展示
-- 需要通过 parts 方式做企业内部二次封装
-- 需要统一 overlay click / escape close 等行为
-
-## Anatomy
-
-<div class="component-anatomy">
-  <strong>Dialog 不是单个大组件，而是一组可组合 parts。</strong>
-  <ul>
-    <li><code>VDialogRoot</code> 持有 open 状态与受控逻辑。</li>
-    <li><code>VDialogTrigger</code> 负责打开或切换状态。</li>
-    <li><code>VDialogOverlay</code> 负责遮罩与点击关闭。</li>
-    <li><code>VDialogContent</code> 承载弹层内容。</li>
-    <li><code>VDialogClose</code> 负责显式关闭动作。</li>
-  </ul>
-</div>
-
-## 小程序运行时说明
-
-微信小程序原生运行时没有浏览器 `document` 键盘事件，也不提供 DOM 焦点陷阱、`inert` 或 portal 语义。因此 Weapp 使用 `VDialogClose` 与 overlay 点击作为关闭入口。weapp Registry 安装的是 wevu SFC parts（`v-dialog-root.vue` 等），不依赖 `document`。reason/cancel 状态契约与 H5 保持一致。
-
-## Root Props
-
-| Prop          | 类型                   | 默认值      | 说明                   |
-| ------------- | ---------------------- | ----------- | ---------------------- |
-| `open`        | `boolean \| undefined` | `undefined` | 受控打开状态           |
-| `defaultOpen` | `boolean`              | `false`     | 非受控初始状态         |
-| `disabled`    | `boolean \| undefined` | `undefined` | 禁止触发打开或关闭行为 |
-
-## Root Events
-
-| Event         | Payload                                             | 说明                                              |
-| ------------- | --------------------------------------------------- | ------------------------------------------------- |
-| `openChange`  | `(open: boolean, details: DialogOpenChangeDetails)` | 状态写入前同步触发的变更请求，可通过 details 取消 |
-| `update:open` | `boolean`                                           | 仅在请求未取消时于 `openChange` 之后触发          |
-
-```ts
-type DialogOpenChangeReason
-  = | 'trigger-press'
-    | 'outside-press'
-    | 'escape-key'
-    | 'close-press'
-    | 'imperative-action'
-
-interface DialogOpenChangeDetails {
-  readonly reason: DialogOpenChangeReason
-  readonly canceled: boolean
-  cancel: () => void
-}
-```
-
-| `reason`            | 来源                                          |
-| ------------------- | --------------------------------------------- |
-| `trigger-press`     | Trigger，以及 core 的 `open` / `toggle` 事件  |
-| `outside-press`     | Overlay 点击                                  |
-| `escape-key`        | H5 的 `Escape` 键或 core 的 Escape 事件       |
-| `close-press`       | `VDialogClose`                                |
-| `imperative-action` | `useDialogRoot().api.setOpen(...)` 的默认原因 |
-
-`cancel()` 只在 `openChange` handler 返回前同步调用时生效：
+## 基础用法
 
 ```vue
 <script setup lang="ts">
@@ -80,59 +17,53 @@ const open = shallowRef(false)
 const hasUnsavedChanges = shallowRef(true)
 
 function handleOpenChange(nextOpen: boolean, details: DialogOpenChangeDetails) {
-  if (!nextOpen && hasUnsavedChanges.value) {
-    details.cancel()
-  }
+  if (!nextOpen && hasUnsavedChanges.value) { details.cancel() }
 }
 </script>
 
 <template>
   <VDialogRoot v-model:open="open" @open-change="handleOpenChange">
-    <!-- Trigger / Overlay / Content / Close -->
+    <VDialogTrigger>打开</VDialogTrigger>
+    <VDialogOverlay />
+    <VDialogContent>
+      内容
+      <VDialogClose>关闭</VDialogClose>
+    </VDialogContent>
   </VDialogRoot>
 </template>
 ```
 
-传入 `open` 后，受控 prop 始终是最终事实来源。未取消的请求会依次发出 `openChange`、`update:open`，但视图只在上层应用新 prop 后变化；取消会阻止内部非受控写入与 `update:open`。如果上层随后自行改变 `open`，组件仍遵循该 prop。
-
-## Parts 说明
-
-| Part             | 作用               |
-| ---------------- | ------------------ |
-| `VDialogTrigger` | 触发打开或切换     |
-| `VDialogOverlay` | 蒙层，点击时可关闭 |
-| `VDialogContent` | 弹层主体内容       |
-| `VDialogClose`   | 显式关闭动作       |
+::: warning 小程序运行时
+Weapp 没有 DOM 焦点陷阱、`inert`、portal 或 `Escape` 键语义；使用 `VDialogClose` 或点击 overlay 关闭。
+:::
 
-## 行为说明
+## Root Props
 
-- 支持受控与非受控两种模式
-- 未取消的状态转换只写入并发出一次 `update:open`
-- H5 支持 overlay、`Escape`、焦点陷阱、背景 `inert` 与关闭后的 Trigger 焦点恢复
-- Weapp 使用 wevu SFC parts 与显式 Close/overlay；不绑定 `document`，也不承诺原生运行时不存在的 DOM 键盘或焦点行为
-- parts 设计更适合企业内部继续收敛成统一 Modal API
+| Prop          | 类型                   | 默认值      | 说明           |
+| ------------- | ---------------------- | ----------- | -------------- |
+| `open`        | `boolean \| undefined` | `undefined` | 受控打开状态   |
+| `defaultOpen` | `boolean`              | `false`     | 非受控初始状态 |
+| `disabled`    | `boolean \| undefined` | `undefined` | 禁止状态切换   |
 
-## 组合建议
+## Root Events
 
-<div class="component-note">
-  <strong>推荐组合方式</strong>
-  <ul>
-    <li>先在业务侧确定 open 状态是否需要外部控制，再决定是否传入 <code>open</code>。</li>
-    <li>复杂弹层最好把标题区、内容区、底部操作区做成自己的 wrapper，而不是直接在业务里重复拼装。</li>
-    <li>不同端的 portal 策略可以留在适配层处理，不要把平台分支写进核心交互模型。</li>
-  </ul>
-</div>
+| Event         | Payload                                             | 说明                                       |
+| ------------- | --------------------------------------------------- | ------------------------------------------ |
+| `openChange`  | `(open: boolean, details: DialogOpenChangeDetails)` | 变更前触发，可通过 `details.cancel()` 取消 |
+| `update:open` | `boolean`                                           | 未取消时触发                               |
 
-## 无障碍与关闭约定
+`details.reason` 为 `trigger-press`、`outside-press`、`escape-key`、`close-press` 或 `imperative-action`。
 
-- overlay、`Escape`、Close 与 Trigger 都进入同一 pre-change reason/cancel 契约
-- 取消关闭时 Dialog 内容、H5 modal layer 与焦点归属保持不变
-- 显式关闭动作统一走 `VDialogClose`
-- 受控模式由 `open` prop 决定最终可见状态
+## Parts
 
-## 相关文档
+| Part             | 作用           |
+| ---------------- | -------------- |
+| `VDialogRoot`    | 状态与上下文   |
+| `VDialogTrigger` | 打开或切换     |
+| `VDialogOverlay` | 遮罩与点击关闭 |
+| `VDialogContent` | 弹层内容       |
+| `VDialogClose`   | 显式关闭       |
 
-- [Button](/components/button)
-- [Input](/components/input)
-- [主题配置](/guide/theme)
-- [跨端演示](/examples/)
+::: info 关闭约定
+受控模式以 `open` 为准；overlay、`Escape`、Close 和 Trigger 都进入同一 `openChange` / cancel 契约。
+:::
diff --git a/apps/docs/components/divider.md b/apps/docs/components/divider.md
index 98aede92..834f2407 100644
--- a/apps/docs/components/divider.md
+++ b/apps/docs/components/divider.md
@@ -1,7 +1,5 @@
 # Divider
 
-<RegistryInstallStrip item="components/divider" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="divider" locale="zh" />
diff --git a/apps/docs/components/elevator.md b/apps/docs/components/elevator.md
index 3e4b1518..6c08c72d 100644
--- a/apps/docs/components/elevator.md
+++ b/apps/docs/components/elevator.md
@@ -2,8 +2,6 @@
 
 `VElevator` 会在内容滚动时根据当前分组标题同步右侧索引；滚动到底部时固定到最后一组，点击索引只滚动组件内部列表，不移动浏览器页面。
 
-<RegistryInstallStrip item="components/elevator" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="elevator" locale="zh" />
diff --git a/apps/docs/components/fixed-nav.md b/apps/docs/components/fixed-nav.md
index bf8c67cc..1686f049 100644
--- a/apps/docs/components/fixed-nav.md
+++ b/apps/docs/components/fixed-nav.md
@@ -1,7 +1,5 @@
 # FixedNav 悬浮导航
 
-<RegistryInstallStrip item="components/fixed-nav" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="fixed-nav" locale="zh" />
diff --git a/apps/docs/components/form.md b/apps/docs/components/form.md
index 73d2e1f9..7d9aeaf0 100644
--- a/apps/docs/components/form.md
+++ b/apps/docs/components/form.md
@@ -1,7 +1,5 @@
 # Form 表单
 
-<RegistryInstallStrip item="components/form" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="form" locale="zh" />
diff --git a/apps/docs/components/grid.md b/apps/docs/components/grid.md
index 74ac4c7b..6b81218f 100644
--- a/apps/docs/components/grid.md
+++ b/apps/docs/components/grid.md
@@ -1,7 +1,5 @@
 # Grid
 
-<RegistryInstallStrip item="components/grid" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="grid" locale="zh" />
diff --git a/apps/docs/components/image.md b/apps/docs/components/image.md
index bf524f9b..4a640f3a 100644
--- a/apps/docs/components/image.md
+++ b/apps/docs/components/image.md
@@ -1,7 +1,5 @@
 # Image
 
-<RegistryInstallStrip item="components/image" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="image" locale="zh" />
@@ -74,6 +72,6 @@
 | `loading` | 自定义加载占位 |
 | `error`   | 自定义失败占位 |
 
-## Primitives
-
+::: info Primitives
 `ImageRoot` 分别由 `@varo-ui/h5/primitives` 与 `@varo-ui/weapp/primitives` 提供；`@varo-ui/headless` 只承载共享状态契约，UI 包的 `VImage` 负责 Varo 类名和 API 包装。
+:::
diff --git a/apps/docs/components/index.md b/apps/docs/components/index.md
index 0d21604f..af1df935 100644
--- a/apps/docs/components/index.md
+++ b/apps/docs/components/index.md
@@ -1,18 +1,9 @@
 ---
-title: 组件总览
-description: 按任务类型浏览 Varo 的 H5 与小程序组件，并在同一页面检查双端行为和代码。
+title: 组件
+description: Varo H5 与小程序组件的演示、用法和 API。
 outline: false
 ---
 
-# 组件总览
+# 组件
 
-按任务类型找到组件，再进入同一页面检查 H5 与小程序的演示、代码和平台差异。需要直接定位时，使用顶部文档搜索。
-
-<ComponentCatalog />
-
-## 继续探索
-
-- [AI Agent 组件](/ai/)：流式回答、工具、审批、产物与工作区界面。
-- [Primitives](/primitives/)：无样式行为、受控状态与可访问交互。
-- [Blocks](/blocks/build-your-own)：面向业务场景的可复制页面切片。
-- [跨端示例](/examples/)：查看组件组合后的 H5 与小程序效果。
+选择组件查看双端演示、用法和 API。
diff --git a/apps/docs/components/indicator.md b/apps/docs/components/indicator.md
index e9148ba8..2a4ef62b 100644
--- a/apps/docs/components/indicator.md
+++ b/apps/docs/components/indicator.md
@@ -1,7 +1,5 @@
 # Indicator 指示器
 
-<RegistryInstallStrip item="components/indicator" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="indicator" locale="zh" />
diff --git a/apps/docs/components/input-number.md b/apps/docs/components/input-number.md
index 06b2228a..4f78a18f 100644
--- a/apps/docs/components/input-number.md
+++ b/apps/docs/components/input-number.md
@@ -1,23 +1,26 @@
 # InputNumber 数字输入框
 
-<RegistryInstallStrip item="components/input-number" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="input-number" locale="zh" />
 
+InputNumber 默认使用紧凑的 128px 最小宽度，不会在横向商品行中挤压相邻内容；需要铺满容器时可通过 `class` 或父级布局显式设置宽度。
+
 ## 步进与精度
 
 通过 `step` 控制步进，通过 `precision` 控制小数精度。
 
 ## Props
 
-| Prop        | 类型      | 默认值      | 描述     |
-| ----------- | --------- | ----------- | -------- |
-| `value`     | `number`  | `0`         | 当前值   |
-| `min`       | `number`  | `-Infinity` | 最小值   |
-| `max`       | `number`  | `Infinity`  | 最大值   |
-| `step`      | `number`  | `1`         | 步进     |
-| `precision` | `number`  | `undefined` | 小数精度 |
-| `disabled`  | `boolean` | `false`     | 禁用     |
-| `readonly`  | `boolean` | `false`     | 只读     |
+| Prop                | 类型      | 默认值             | 描述                   |
+| ------------------- | --------- | ------------------ | ---------------------- |
+| `decreaseAriaLabel` | `string`  | `'Decrease value'` | 减少按钮的可访问名称   |
+| `increaseAriaLabel` | `string`  | `'Increase value'` | 增加按钮的可访问名称   |
+| `inputAriaLabel`    | `string`  | `'Numeric value'`  | 数值输入框的可访问名称 |
+| `value`             | `number`  | `0`                | 当前值                 |
+| `min`               | `number`  | `-Infinity`        | 最小值                 |
+| `max`               | `number`  | `Infinity`         | 最大值                 |
+| `step`              | `number`  | `1`                | 步进                   |
+| `precision`         | `number`  | `undefined`        | 小数精度               |
+| `disabled`          | `boolean` | `false`            | 禁用                   |
+| `readonly`          | `boolean` | `false`            | 只读                   |
diff --git a/apps/docs/components/input.md b/apps/docs/components/input.md
index 0d3e50b5..0cb840c4 100644
--- a/apps/docs/components/input.md
+++ b/apps/docs/components/input.md
@@ -1,7 +1,5 @@
 # Input
 
-<RegistryInstallStrip item="components/input" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="input" locale="zh" />
@@ -94,9 +92,13 @@ const digits = (value: string) => value.replace(/\D/g, '')
 | `suffixIcon`    | `string`                                            | `undefined` | 后缀内容                          |
 | `errorMessage`  | `string`                                            | `undefined` | 错误文案                          |
 
-> Weapp 的 property 系统无法区分省略 `value` 与显式传入 `:value="undefined"`；两者都会使用非受控 `defaultValue`。需要受控空值时请传入 `value=""`。`VTextarea` 遵循同一规则。
+::: warning Weapp 受控空值
+Weapp 无法区分省略 `value` 与 `:value="undefined"`，两者都会使用 `defaultValue`。受控空值请传入 `value=""`。
+:::
 
-Weapp 原生控件桥接使用显式 props：`name` 参与表单提交，`inputId` 设置内部 `<input>`/`<textarea>` 的 id，`className` 与 `customStyle` 设置组件外层；`ariaDescribedby`、`ariaLabelledby`、`form`、`focus`、`autoFocus`、`cursor`、`selectionStart`、`selectionEnd`、`adjustPosition` 与 `holdKeyboard` 会转发到内部原生控件。H5 仍可直接使用原生 attrs。
+::: info Weapp 原生 Props
+`name`、`inputId`、`className`、`customStyle`、ARIA、表单、焦点、光标和键盘相关 props 会转发到原生控件；H5 可直接使用原生 attrs。
+:::
 
 ## Events
 
diff --git a/apps/docs/components/layout.md b/apps/docs/components/layout.md
index 41c86802..687147a1 100644
--- a/apps/docs/components/layout.md
+++ b/apps/docs/components/layout.md
@@ -1,7 +1,5 @@
 # Layout
 
-<RegistryInstallStrip item="components/layout" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="layout" locale="zh" />
diff --git a/apps/docs/components/list.md b/apps/docs/components/list.md
new file mode 100644
index 00000000..cc99d82c
--- /dev/null
+++ b/apps/docs/components/list.md
@@ -0,0 +1,27 @@
+# List 列表加载
+
+`VList` 负责列表底部的触底/上拉加载；顶部下拉刷新使用 [PullRefresh](/components/pull-refresh)。
+
+## 演示
+
+<ListDemo locale="zh" />
+
+## Props
+
+| Prop             | 类型      | 默认值         | 描述           |
+| ---------------- | --------- | -------------- | -------------- |
+| `loading`        | `boolean` | `false`        | 正在加载       |
+| `finished`       | `boolean` | `false`        | 已加载全部数据 |
+| `disabled`       | `boolean` | `false`        | 禁止加载       |
+| `immediate`      | `boolean` | `true`         | 挂载后立即请求 |
+| `lowerThreshold` | `number`  | `80`           | 提前触发距离   |
+| `loadingText`    | `string`  | `'加载中'`     | 加载文案       |
+| `finishedText`   | `string`  | `'没有更多了'` | 完成文案       |
+| `errorText`      | `string`  | `undefined`    | 可重试错误文案 |
+
+## Events
+
+| Event   | Payload | 描述         |
+| ------- | ------- | ------------ |
+| `load`  | `void`  | 请求下一页   |
+| `retry` | `void`  | 重试失败加载 |
diff --git a/apps/docs/components/loading.md b/apps/docs/components/loading.md
index 2b807581..6ae3665f 100644
--- a/apps/docs/components/loading.md
+++ b/apps/docs/components/loading.md
@@ -2,8 +2,6 @@
 
 `VLoading` 是 Base Kit 的低层加载指示器。
 
-<RegistryInstallStrip item="components/loading" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="loading" locale="zh" />
diff --git a/apps/docs/components/menu.md b/apps/docs/components/menu.md
index 7b231f85..582d46f9 100644
--- a/apps/docs/components/menu.md
+++ b/apps/docs/components/menu.md
@@ -1,7 +1,5 @@
 # Menu 菜单
 
-<RegistryInstallStrip item="components/menu" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="menu" locale="zh" />
diff --git a/apps/docs/components/navbar.md b/apps/docs/components/navbar.md
index 22c9f6ef..ab20f564 100644
--- a/apps/docs/components/navbar.md
+++ b/apps/docs/components/navbar.md
@@ -1,7 +1,5 @@
 # Navbar 头部导航
 
-<RegistryInstallStrip item="components/navbar" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="navbar" locale="zh" />
diff --git a/apps/docs/components/number-keyboard.md b/apps/docs/components/number-keyboard.md
index a0683b7f..f2590c98 100644
--- a/apps/docs/components/number-keyboard.md
+++ b/apps/docs/components/number-keyboard.md
@@ -1,7 +1,5 @@
 # NumberKeyboard 数字键盘
 
-<RegistryInstallStrip item="components/number-keyboard" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="number-keyboard" locale="zh" />
diff --git a/apps/docs/components/overlay.md b/apps/docs/components/overlay.md
index 3d589c07..7a89bccd 100644
--- a/apps/docs/components/overlay.md
+++ b/apps/docs/components/overlay.md
@@ -1,7 +1,5 @@
 # Overlay
 
-<RegistryInstallStrip item="components/overlay" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="overlay" locale="zh" />
@@ -66,6 +64,6 @@ const visible = ref(false)
 | --------- | ---------------- |
 | `default` | 自定义遮罩层内容 |
 
-## Primitives
-
+::: info Primitives
 `OverlayRoot` 使用 `useOverlayRoot` 处理受控/非受控显隐和点击关闭；H5 与 Weapp primitives 都会复用 `useBodyScrollLock`。
+:::
diff --git a/apps/docs/components/pagination.md b/apps/docs/components/pagination.md
index 5ff0cbcd..63bde9ba 100644
--- a/apps/docs/components/pagination.md
+++ b/apps/docs/components/pagination.md
@@ -1,7 +1,5 @@
 # Pagination 分页
 
-<RegistryInstallStrip item="components/pagination" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="pagination" locale="zh" />
diff --git a/apps/docs/components/picker.md b/apps/docs/components/picker.md
index 6143a44b..ccd0ab31 100644
--- a/apps/docs/components/picker.md
+++ b/apps/docs/components/picker.md
@@ -1,28 +1,26 @@
 # Picker 选择器
 
-<RegistryInstallStrip item="components/picker" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="picker" locale="zh" />
 
 ## Props
 
-| Prop          | 类型               | 默认值      | 描述       |
-| ------------- | ------------------ | ----------- | ---------- |
-| `visible`     | `boolean`          | `false`     | 是否展示   |
-| `value`       | `string \| number` | `undefined` | 当前选中值 |
-| `columns`     | `PickerOption[]`   | `[]`        | 选项列表   |
-| `title`       | `string`           | `undefined` | 标题       |
-| `confirmText` | `string`           | `'Confirm'` | 确认文案   |
-| `cancelText`  | `string`           | `'Cancel'`  | 取消文案   |
+| Prop          | 类型                                 | 默认值      | 描述           |
+| ------------- | ------------------------------------ | ----------- | -------------- |
+| `visible`     | `boolean`                            | `false`     | 是否展示       |
+| `value`       | `string \| number \| Array`          | `undefined` | 当前选中值     |
+| `columns`     | `PickerOption[] \| PickerOption[][]` | `[]`        | 单列或多列选项 |
+| `title`       | `string`                             | `undefined` | 标题           |
+| `confirmText` | `string`                             | `'Confirm'` | 确认文案       |
+| `cancelText`  | `string`                             | `'Cancel'`  | 取消文案       |
 
 ## Events
 
-| Event            | Payload             | 描述         |
-| ---------------- | ------------------- | ------------ |
-| `update:value`   | `string \| number`  | 选中值变化   |
-| `update:visible` | `boolean`           | 展示状态变化 |
-| `change`         | `{ value, option }` | 选择变化     |
-| `confirm`        | `{ value, option }` | 点击确认     |
-| `cancel`         | `void`              | 点击取消     |
+| Event            | Payload                           | 描述           |
+| ---------------- | --------------------------------- | -------------- |
+| `update:value`   | `string \| number \| Array`       | 确认后提交值   |
+| `update:visible` | `boolean`                         | 展示状态变化   |
+| `change`         | `{ value, option, columnIndex? }` | 草稿选择变化   |
+| `confirm`        | `{ value, option }`               | 确认并提交     |
+| `cancel`         | `void`                            | 取消并恢复原值 |
diff --git a/apps/docs/components/popover.md b/apps/docs/components/popover.md
index 45350934..6100a0d8 100644
--- a/apps/docs/components/popover.md
+++ b/apps/docs/components/popover.md
@@ -1,7 +1,5 @@
 # Popover 气泡浮层
 
-<RegistryInstallStrip item="components/popover" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="popover" locale="zh" />
diff --git a/apps/docs/components/popup.md b/apps/docs/components/popup.md
index e383c11e..779238a4 100644
--- a/apps/docs/components/popup.md
+++ b/apps/docs/components/popup.md
@@ -1,7 +1,5 @@
 # Popup
 
-<RegistryInstallStrip item="components/popup" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="popup" locale="zh" />
@@ -91,6 +89,6 @@ const visible = ref(false)
 | `default`   | 弹层主体内容                          |
 | `closeIcon` | 替换默认 `VIcon` 的自定义关闭图标内容 |
 
-## Primitives
-
+::: info Primitives
 `PopupRoot` 使用 `usePopupRoot` 管理显隐、遮罩点击和 `Escape` 关闭；UI 包只保留 Varo 风格组件入口。
+:::
diff --git a/apps/docs/components/pull-refresh.md b/apps/docs/components/pull-refresh.md
new file mode 100644
index 00000000..14a56659
--- /dev/null
+++ b/apps/docs/components/pull-refresh.md
@@ -0,0 +1,31 @@
+# PullRefresh 下拉刷新
+
+`VPullRefresh` 负责顶部下拉刷新；列表底部的上拉/触底加载继续使用 [List](/components/list)。
+
+## 演示
+
+<PullRefreshDemo locale="zh" />
+
+## Props
+
+| Prop          | 类型      | 默认值       | 描述                 |
+| ------------- | --------- | ------------ | -------------------- |
+| `loading`     | `boolean` | `false`      | 受控刷新状态         |
+| `disabled`    | `boolean` | `false`      | 禁止下拉刷新         |
+| `threshold`   | `number`  | `64`         | 触发刷新距离         |
+| `headHeight`  | `number`  | `48`         | H5-only 提示区域高度 |
+| `pullText`    | `string`  | `'下拉刷新'` | H5-only 下拉提示     |
+| `releaseText` | `string`  | `'释放刷新'` | H5-only 阈值提示     |
+| `loadingText` | `string`  | `'加载中'`   | 刷新中提示           |
+
+## Events
+
+| Event     | Payload | 描述                     |
+| --------- | ------- | ------------------------ |
+| `refresh` | `void`  | 超过阈值释放或原生刷新时 |
+
+::: info 平台行为
+
+- H5：仅在滚动容器顶部响应向下拖动。
+- 小程序：使用 `scroll-view` 原生 `refresher-*` 能力，由 `loading` 控制结束时机。
+  :::
diff --git a/apps/docs/components/radio.md b/apps/docs/components/radio.md
index 21d8a75e..66d69d0d 100644
--- a/apps/docs/components/radio.md
+++ b/apps/docs/components/radio.md
@@ -1,11 +1,13 @@
 # Radio 单选按钮
 
-<RegistryInstallStrip item="components/radio" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="radio" locale="zh" />
 
+## 选中反馈
+
+Radio 始终保留内点节点，选中时使用 180ms scale/fade 显示 Varo 主色内点，避免切换时布局重建。按压仅提供短促缩放；减少动态效果时状态即时切换。
+
 ## Props
 
 | Prop       | 类型                          | 默认值      | 描述             |
diff --git a/apps/docs/components/range.md b/apps/docs/components/range.md
index 8613bd70..43d791b3 100644
--- a/apps/docs/components/range.md
+++ b/apps/docs/components/range.md
@@ -1,7 +1,5 @@
 # Range 区间选择器
 
-<RegistryInstallStrip item="components/range" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="range" locale="zh" />
diff --git a/apps/docs/components/rate.md b/apps/docs/components/rate.md
index 7157cc89..b340707d 100644
--- a/apps/docs/components/rate.md
+++ b/apps/docs/components/rate.md
@@ -1,7 +1,5 @@
 # Rate 评分
 
-<RegistryInstallStrip item="components/rate" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="rate" locale="zh" />
diff --git a/apps/docs/components/region-picker.md b/apps/docs/components/region-picker.md
index 2fe4cfb6..692240f2 100644
--- a/apps/docs/components/region-picker.md
+++ b/apps/docs/components/region-picker.md
@@ -2,8 +2,6 @@
 
 `VRegionPicker` 是受控的多级地区选择器。组件负责层级导航、快捷地区、禁用态、确认结果，以及根节点/子节点的异步加载反馈；接口实现、缓存、权限和坐标解析仍由业务层处理。
 
-<RegistryInstallStrip item="components/region-picker" :targets="['h5', 'weapp']" :wrapper-targets="[]" locale="zh" />
-
 ## 演示
 
 <RegionPickerDemo />
diff --git a/apps/docs/components/robot-chat.md b/apps/docs/components/robot-chat.md
index dac2d7a0..bdad6ee3 100644
--- a/apps/docs/components/robot-chat.md
+++ b/apps/docs/components/robot-chat.md
@@ -2,16 +2,13 @@
 
 `VRobotChat` 是 `chatbotwidget` 小程序插件的 Wevu 封装，仅支持 `weapp` target，提供初始化状态、事件转发和可编辑输入区。
 
-<RegistryInstallStrip item="components/robot-chat" :targets="['weapp']" :wrapper-targets="[]" locale="zh" />
-
 ## 演示
 
 <RobotChatDemo locale="zh" />
 
 文档站不能加载 chatbotwidget。演示画出欢迎语、operateCard、发送和 `queryCallback`。这是 Web Preview 的可见宿主，不是微信对话开放平台。
 
-## 前置配置
-
+::: warning 小程序配置
 小程序需先开通插件，并在 `app.json` 中使用固定别名 `varoRobot`：
 
 ```json
@@ -26,6 +23,7 @@
 ```
 
 版本按小程序后台已启用版本调整。插件配置详见 [chatbotwidget 插件文档](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx8c631f7e9f2465e1)。
+:::
 
 ## 使用
 
diff --git a/apps/docs/components/searchbar.md b/apps/docs/components/searchbar.md
index acafa4e0..cefd9b24 100644
--- a/apps/docs/components/searchbar.md
+++ b/apps/docs/components/searchbar.md
@@ -1,7 +1,5 @@
 # Searchbar 搜索栏
 
-<RegistryInstallStrip item="components/searchbar" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="searchbar" locale="zh" />
diff --git a/apps/docs/components/select.md b/apps/docs/components/select.md
index 440dcaed..e9dd1a5b 100644
--- a/apps/docs/components/select.md
+++ b/apps/docs/components/select.md
@@ -2,8 +2,6 @@
 
 `VSelect` 是 Base Kit 的低层选择组件，用于表单、筛选和业务组件二次封装。H5 / 完整 Vue 封装与 `--target weapp` 安装的原生 Registry 组件面向不同运行时，API 以各自章节为准。
 
-<RegistryInstallStrip item="components/select" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="select" locale="zh" />
@@ -93,6 +91,6 @@ H5 的 `filterable` 只读字段使用原生只读输入语义。
 
 原生 Registry Weapp 不提供 `mode`、`max`、`confirmable`、`filterOption`、`loading` 或 `emptyText`，也不触发 `valueChange`、`open`、`close`、`confirm`、`cancel` 或 `limit`。
 
-## 二次封装边界
-
+::: info 二次封装
 分组、远程搜索、异步分页属于二次封装组件能力，不属于 Base Kit。业务组件应基于 `VSelect` 封装 `UserSelect`、`DepartmentSelect`、`CitySelect`、`ProductSelect`。
+:::
diff --git a/apps/docs/components/short-password.md b/apps/docs/components/short-password.md
index c5a000b0..15a812d5 100644
--- a/apps/docs/components/short-password.md
+++ b/apps/docs/components/short-password.md
@@ -1,7 +1,5 @@
 # ShortPassword 短密码
 
-<RegistryInstallStrip item="components/short-password" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="short-password" locale="zh" />
diff --git a/apps/docs/components/side-navbar.md b/apps/docs/components/side-navbar.md
index 11dac16b..e67e5b39 100644
--- a/apps/docs/components/side-navbar.md
+++ b/apps/docs/components/side-navbar.md
@@ -1,7 +1,5 @@
 # SideNavbar 侧边栏导航
 
-<RegistryInstallStrip item="components/side-navbar" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="side-navbar" locale="zh" />
diff --git a/apps/docs/components/signature.md b/apps/docs/components/signature.md
new file mode 100644
index 00000000..5c07df28
--- /dev/null
+++ b/apps/docs/components/signature.md
@@ -0,0 +1,31 @@
+# Signature 签名
+
+`VSignature` 使用归一化笔画数据作为跨端受控值。H5 使用 pointer canvas；小程序使用原生 canvas touch 事件。
+
+## 演示
+
+<SignatureDemo locale="zh" />
+
+## Props
+
+| Prop         | 类型                | 默认值            | 描述           |
+| ------------ | ------------------- | ----------------- | -------------- |
+| `value`      | `SignatureStroke[]` | `[]`              | 受控签名笔画   |
+| `disabled`   | `boolean`           | `false`           | 禁止绘制与清除 |
+| `height`     | `number`            | `200`             | 画布高度       |
+| `lineColor`  | `string`            | `'#172033'`       | 画笔颜色       |
+| `lineWidth`  | `number`            | `2`               | 画笔宽度       |
+| `background` | `string`            | `'#ffffff'`       | 画布背景       |
+| `showClear`  | `boolean`           | `true`            | 显示清除按钮   |
+| `clearText`  | `string`            | `'清除签名'`      | 清除按钮文案   |
+| `ariaLabel`  | `string`            | `'Signature pad'` | 画布可访问名称 |
+
+## Events
+
+| Event          | Payload             | 描述         |
+| -------------- | ------------------- | ------------ |
+| `update:value` | `SignatureStroke[]` | 提交笔画     |
+| `change`       | `SignatureStroke[]` | 签名变化     |
+| `start`        | `void`              | 开始一笔     |
+| `end`          | `SignatureStroke`   | 完成一笔     |
+| `clear`        | `void`              | 清除全部笔画 |
diff --git a/apps/docs/components/skeleton.md b/apps/docs/components/skeleton.md
index 48c55039..9bf2f31a 100644
--- a/apps/docs/components/skeleton.md
+++ b/apps/docs/components/skeleton.md
@@ -2,8 +2,6 @@
 
 `VSkeleton` 默认延迟 `180ms` 再显示骨架，避免短请求闪烁；同时覆盖文章、图片和视频布局，内容就绪后淡入默认 slot。
 
-<RegistryInstallStrip item="components/skeleton" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="skeleton" locale="zh" />
@@ -42,8 +40,9 @@ const loading = shallowRef(true)
 | `rows`        | `number`                       | `3`        | 内容占位行数，负数按 `0` 处理                    |
 | `round`       | `boolean`                      | `false`    | 标题与内容行是否使用胶囊圆角                     |
 
-## 无障碍与动效
+::: info 无障碍与动效
 
 - 加载时输出 `aria-busy="true"` 和 Loading 名称。
 - `loading=false` 时移除占位节点，并按 `contentFade` 淡入真实内容。
 - 全局 `prefers-reduced-motion` 会关闭扫光和内容淡入动画。
+  :::
diff --git a/apps/docs/components/space.md b/apps/docs/components/space.md
index 24edad29..199b57cd 100644
--- a/apps/docs/components/space.md
+++ b/apps/docs/components/space.md
@@ -1,7 +1,5 @@
 # Space
 
-<RegistryInstallStrip item="components/space" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="space" locale="zh" />
diff --git a/apps/docs/components/sticky.md b/apps/docs/components/sticky.md
index e0de591e..59a97097 100644
--- a/apps/docs/components/sticky.md
+++ b/apps/docs/components/sticky.md
@@ -1,7 +1,5 @@
 # Sticky
 
-<RegistryInstallStrip item="components/sticky" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="sticky" locale="zh" />
@@ -63,6 +61,6 @@
 | --------- | --------------------------------- |
 | `default` | 吸顶内容，slot props 包含 `fixed` |
 
-## Primitives
-
+::: info Primitives
 `Sticky` 有滚动状态和事件，因此 H5 / Weapp 均提供 `StickyRoot` primitive；`Divider`、`Grid`、`Layout`、`Space` 是静态布局展示组件，直接在 UI 层实现。
+:::
diff --git a/apps/docs/components/switch.md b/apps/docs/components/switch.md
index bff6f1f9..78282520 100644
--- a/apps/docs/components/switch.md
+++ b/apps/docs/components/switch.md
@@ -2,12 +2,14 @@
 
 `VSwitch` 是 Base Kit 的布尔值切换组件，适合设置项和表单字段。
 
-<RegistryInstallStrip item="components/switch" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="switch" locale="zh" />
 
+::: info 动效
+Switch 的 thumb 使用 180ms 可逆位移。按住时 thumb 沿切换方向轻微拉伸，松开或快速反向操作会从当前视觉状态返回；减少动态效果时只保留即时位置变化。
+:::
+
 ## Props
 
 | Prop         | 类型      | 默认值  | 描述   |
diff --git a/apps/docs/components/tabbar.md b/apps/docs/components/tabbar.md
index f739ad5e..b478da25 100644
--- a/apps/docs/components/tabbar.md
+++ b/apps/docs/components/tabbar.md
@@ -1,7 +1,5 @@
 # Tabbar 标签栏
 
-<RegistryInstallStrip item="components/tabbar" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="tabbar" locale="zh" />
diff --git a/apps/docs/components/tabs.md b/apps/docs/components/tabs.md
index 35749804..2a68787a 100644
--- a/apps/docs/components/tabs.md
+++ b/apps/docs/components/tabs.md
@@ -1,7 +1,5 @@
 # Tabs 选项卡切换
 
-<RegistryInstallStrip item="components/tabs" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <PlatformTabsDemo example="tabs" locale="zh" />
diff --git a/apps/docs/components/textarea.md b/apps/docs/components/textarea.md
index fb2e132c..3060a2d8 100644
--- a/apps/docs/components/textarea.md
+++ b/apps/docs/components/textarea.md
@@ -1,7 +1,5 @@
 # Textarea 文本域
 
-<RegistryInstallStrip item="components/textarea" :targets="['h5', 'weapp']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="textarea" locale="zh" />
diff --git a/apps/docs/components/toast.md b/apps/docs/components/toast.md
index 03fb164b..3c639549 100644
--- a/apps/docs/components/toast.md
+++ b/apps/docs/components/toast.md
@@ -1,27 +1,35 @@
 # Toast 轻提示
 
-`VToast` 是 Base Kit 的受控轻提示组件。业务中的队列、全局调用和请求集成应在二次封装层实现。
-
-<RegistryInstallStrip item="components/toast" :targets="['h5', 'weapp']" locale="zh" />
+`VToast` 是受控的单条状态反馈，`VToastRegion` 负责多条提示的固定或行内布局。业务队列、自动关闭计时和请求集成仍由调用方持有。
 
 ## 演示
 
-<FormComponentDemo example="toast" locale="zh" />
+<ToastDemo locale="zh" />
+
+## VToast Props
 
-## Props
+| Prop          | 类型                                                        | 默认值       | 描述               |
+| ------------- | ----------------------------------------------------------- | ------------ | ------------------ |
+| `visible`     | `boolean`                                                   | `false`      | 是否显示           |
+| `message`     | `string`                                                    | `''`         | 提示说明           |
+| `title`       | `string`                                                    | —            | 可选标题           |
+| `type`        | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'`     | 状态类型           |
+| `position`    | `'top' \| 'middle' \| 'bottom'`                             | `'middle'`   | 独立使用时的位置   |
+| `actionText`  | `string`                                                    | —            | 可选操作文案       |
+| `actionLabel` | `string`                                                    | 操作文案     | 操作按钮无障碍名称 |
+| `closeable`   | `boolean`                                                   | `false`      | 是否显示关闭按钮   |
+| `closeLabel`  | `string`                                                    | `'关闭通知'` | 关闭按钮无障碍名称 |
 
-| Prop         | 类型                                                        | 默认值       | 描述                 |
-| ------------ | ----------------------------------------------------------- | ------------ | -------------------- |
-| `visible`    | `boolean`                                                   | `false`      | 是否显示             |
-| `message`    | `string`                                                    | `''`         | 提示文案             |
-| `type`       | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'`     | 类型                 |
-| `position`   | `'top' \| 'middle' \| 'bottom'`                             | `'middle'`   | 位置                 |
-| `closeable`  | `boolean`                                                   | `false`      | 是否显示关闭按钮     |
-| `closeLabel` | `string`                                                    | `'关闭通知'` | 关闭按钮的无障碍名称 |
+## VToastRegion Props
 
-## 动效与无障碍
+| Prop       | 类型                            | 默认值  | 描述                   |
+| ---------- | ------------------------------- | ------- | ---------------------- |
+| `position` | `'top' \| 'middle' \| 'bottom'` | `'top'` | 固定区域的位置         |
+| `inline`   | `boolean`                       | `false` | 作为普通文档流区域展示 |
 
-Toast 使用 220ms 进入和 160ms 退出过渡；顶部、居中和底部位置采用对应方向的轻量位移。`prefers-reduced-motion: reduce` 下仅保留即时淡入淡出。成功和普通反馈使用 `status`，警告和错误使用 `alert`。
+::: info 动效与无障碍
+Toast 使用主题 motion token：220ms 进入、160ms 退出、180ms 状态变化。更新同一实例的 `type`、`title` 和 `message` 会在原位置改变状态，不依赖动画结束更新业务状态。`prefers-reduced-motion: reduce` 下移除空间位移。成功和普通反馈使用 `status`，警告和错误使用 `alert`。
+:::
 
 ## Events
 
@@ -29,3 +37,4 @@ Toast 使用 220ms 进入和 160ms 退出过渡；顶部、居中和底部位置
 | ---------------- | --------- | ------------ |
 | `update:visible` | `boolean` | 显示状态更新 |
 | `close`          | `void`    | 关闭         |
+| `action`         | `void`    | 触发可选操作 |
diff --git a/apps/docs/components/uploader.md b/apps/docs/components/uploader.md
index 4f789dc7..6da8195e 100644
--- a/apps/docs/components/uploader.md
+++ b/apps/docs/components/uploader.md
@@ -1,7 +1,5 @@
 # Uploader 上传
 
-<RegistryInstallStrip item="components/uploader" :targets="['h5']" locale="zh" />
-
 ## 演示
 
 <FormComponentDemo example="uploader" locale="zh" />
diff --git a/apps/docs/components/watermark.md b/apps/docs/components/watermark.md
new file mode 100644
index 00000000..20f4873c
--- /dev/null
+++ b/apps/docs/components/watermark.md
@@ -0,0 +1,29 @@
+# Watermark 水印
+
+`VWatermark` 在容器内容上覆盖不可交互、不可访问的重复文本。覆盖层不会截获指针事件，适合文档预览、审批结果与敏感信息展示。
+
+水印仅用于视觉标记，不替代访问控制、内容加密或防篡改机制。
+
+## 演示
+
+<WatermarkDemo locale="zh" />
+
+## Props
+
+| Prop         | 类型               | 默认值      | 描述                             |
+| ------------ | ------------------ | ----------- | -------------------------------- |
+| `content`    | `string`           | `'Varo'`    | 重复水印文本；空值隐藏           |
+| `color`      | `string`           | `'#172033'` | 文本颜色                         |
+| `opacity`    | `number`           | `0.12`      | 透明度，限制为 0–1               |
+| `rotate`     | `number`           | `-22`       | 旋转角度（deg）                  |
+| `fontSize`   | `number`           | `14`        | 字号（px），最小 1               |
+| `fontWeight` | `number \| string` | `500`       | 字重                             |
+| `gapX`       | `number`           | `160`       | 水平单元宽度（px），最小 24      |
+| `gapY`       | `number`           | `96`        | 垂直单元高度（px），最小 24      |
+| `offsetX`    | `number`           | `0`         | 水平相位（px），按 `gapX` 归一化 |
+| `offsetY`    | `number`           | `0`         | 垂直相位（px），按 `gapY` 归一化 |
+| `zIndex`     | `number`           | `9`         | 容器内覆盖层级                   |
+
+平铺行会在高容器中均匀拉伸，保持从顶部到底部都有水印，同时以 `gapY` 作为最小单元高度。
+
+默认插槽承载被水印覆盖的内容。H5 使用 `class` 传入消费者样式；小程序 Registry SFC 使用 `className`。
diff --git a/apps/docs/e2e/docs-smoke.spec.ts b/apps/docs/e2e/docs-smoke.spec.ts
index 1a1f2e96..3a6fbe61 100644
--- a/apps/docs/e2e/docs-smoke.spec.ts
+++ b/apps/docs/e2e/docs-smoke.spec.ts
@@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest'
 const docsRoot = resolve(__dirname, '..')
 
 function firstH2(content: string) {
-  return content.split(/\n/).find((line) => line.startsWith('## '))
+  return content.split(/\n/).find(line => line.startsWith('## '))
 }
 
 describe('docs smoke baseline', () => {
@@ -23,13 +23,19 @@ describe('docs smoke baseline', () => {
     }
   })
 
-  it('keeps primitives catalog pages and authoring guide linked', () => {
+  it('keeps one concise headless install surface and linked detail pages', () => {
     const config = readFileSync(resolve(docsRoot, '.vitepress/config.ts'), 'utf8')
     const zhOverview = readFileSync(resolve(docsRoot, 'primitives/index.md'), 'utf8')
     const enOverview = readFileSync(resolve(docsRoot, 'en/primitives/index.md'), 'utf8')
+    const zhComponents = readFileSync(resolve(docsRoot, 'components/index.md'), 'utf8')
+    const enComponents = readFileSync(resolve(docsRoot, 'en/components/index.md'), 'utf8')
 
-    expect(zhOverview).toContain('<PrimitiveCatalog locale="zh" />')
-    expect(enOverview).toContain('<PrimitiveCatalog locale="en" />')
+    expect(zhOverview).toContain('pnpm add @varo-ui/headless @varo-ui/h5')
+    expect(enOverview).toContain('pnpm add @varo-ui/headless @varo-ui/weapp')
+    expect(zhOverview).not.toContain('<PrimitiveCatalog')
+    expect(enOverview).not.toContain('<PrimitiveCatalog')
+    expect(zhComponents).not.toContain('<ComponentCatalog')
+    expect(enComponents).not.toContain('<ComponentCatalog')
     expect(config).toContain('/blocks/build-your-own')
     expect(config).toContain('/en/blocks/build-your-own')
     expect(existsSync(resolve(docsRoot, 'blocks/build-your-own.md'))).toBe(true)
diff --git a/apps/docs/en/ai/activity.md b/apps/docs/en/ai/activity.md
index bb2d62f0..3a877987 100644
--- a/apps/docs/en/ai/activity.md
+++ b/apps/docs/en/ai/activity.md
@@ -6,16 +6,6 @@ Unified activity stream for reasoning, searches, tools, and traces.
 
 <AgentComponentDemo component="activity" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -39,11 +29,11 @@ import { AgentActivity } from '@/components/agent-ui'
 
 None.
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                        |
 | ------ | ------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                     |
 | weapp  | Default export from `@/components/agent-ui/AgentActivity.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/agent-chat.md b/apps/docs/en/ai/agent-chat.md
index 4b883d22..773fa389 100644
--- a/apps/docs/en/ai/agent-chat.md
+++ b/apps/docs/en/ai/agent-chat.md
@@ -6,16 +6,6 @@ Complete block composing header, history, events, approval, and prompt input.
 
 <AgentComponentDemo component="agent-chat" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 blocks/agent-chat
-pnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -52,11 +42,11 @@ import AgentChat from '@/components/blocks/agent-chat.vue'
 | `submit`            | `string` | Submit        |
 | `update:modelValue` | `string` | Update prompt |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                               |
 | ------ | ------------------------------------ |
 | H5     | `@/components/blocks/agent-chat.vue` |
 | weapp  | `@/components/blocks/agent-chat.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/agent-workspace.md b/apps/docs/en/ai/agent-workspace.md
new file mode 100644
index 00000000..65298729
--- /dev/null
+++ b/apps/docs/en/ai/agent-workspace.md
@@ -0,0 +1,82 @@
+# AgentWorkspace
+
+A dual-target Agent Block for source permissions, thread versions, execution, and input.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import AgentWorkspace from '@/components/blocks/agent-workspace.vue'
+
+const open = shallowRef(true)
+const prompt = shallowRef('')
+
+function submit(value: string) {
+  console.log(value)
+}
+</script>
+
+<template>
+  <AgentWorkspace
+    v-model:prompt="prompt"
+    :open="open"
+    placement="docked"
+    title="Issue analysis"
+    @close="open = false"
+    @submit="submit"
+  />
+</template>
+```
+
+## Props
+
+| Prop              | Type                            | Default                          | Description              |
+| ----------------- | ------------------------------- | -------------------------------- | ------------------------ |
+| `activeVersionId` | `string`                        | `undefined`                      | Active thread version    |
+| `busy`            | `boolean`                       | `false`                          | Running state            |
+| `contextUsage`    | `number`                        | `0`                              | Context usage percentage |
+| `messages`        | `AgentConversationMessage[]`    | `[]`                             | Conversation messages    |
+| `open`            | `boolean`                       | `true`                           | Visibility               |
+| `placement`       | `'page' \| 'docked' \| 'sheet'` | `'page'`                         | Layout mode              |
+| `prompt`          | `string`                        | `''`                             | Input value              |
+| `receipts`        | `AgentSourceReceiptItem[]`      | `[]`                             | Source receipts          |
+| `retrieval`       | `AgentRetrievalItem[]`          | `[]`                             | Retrieval progress       |
+| `sources`         | `AgentContextSource[]`          | `[]`                             | Available sources        |
+| `subtitle`        | `string`                        | `'先确认可访问来源，再提交任务'` | Subtitle                 |
+| `tasks`           | `AgentTask[]`                   | `[]`                             | Execution tasks          |
+| `title`           | `string`                        | `'Agent 工作区'`                 | Title                    |
+| `versions`        | `readonly AgentThreadVersion[]` | `[]`                             | Thread versions          |
+
+## Events
+
+| Event            | Payload                         | Description            |
+| ---------------- | ------------------------------- | ---------------------- |
+| `submit`         | `string`                        | Submit input           |
+| `update:prompt`  | `string`                        | Sync input value       |
+| `close`          | `void`                          | Close workspace        |
+| `toggleSource`   | `(AgentContextSource, boolean)` | Toggle source          |
+| `connectSource`  | `AgentContextSource`            | Connect source         |
+| `retryRetrieval` | `AgentRetrievalItem`            | Retry retrieval        |
+| `retryTask`      | `AgentTask`                     | Retry task             |
+| `approveTask`    | `AgentTask`                     | Approve task           |
+| `cancelTask`     | `void`                          | Cancel task            |
+| `selectVersion`  | `AgentThreadVersion`            | Select version         |
+| `branchVersion`  | `AgentThreadVersion`            | Create branch          |
+| `pinVersion`     | `AgentThreadVersion`            | Pin version            |
+| `openReceipt`    | `AgentSourceReceiptItem`        | Open receipt           |
+| `connectReceipt` | `AgentSourceReceiptItem`        | Connect receipt source |
+
+## Slots
+
+| Slot        | Description                                                            |
+| ----------- | ---------------------------------------------------------------------- |
+| `execution` | Replaces the default conversation, retrieval, task, and receipt region |
+
+::: warning Weapp slot configuration
+For an unscoped `#execution` slot, set `weapp.vue.template.scopedSlotsRequireProps: true` in `weapp-vite` so generic-slot conversion does not omit parent state.
+:::
+
+::: info Target import
+H5 uses `vue`; replace it with `wevu` on Weapp. Both targets default-import the installed `@/components/blocks/agent-workspace.vue` file.
+:::
diff --git a/apps/docs/en/ai/approval.md b/apps/docs/en/ai/approval.md
index d31f0441..f5034616 100644
--- a/apps/docs/en/ai/approval.md
+++ b/apps/docs/en/ai/approval.md
@@ -6,16 +6,6 @@ General human approval, choice, reject, and confirm card.
 
 <AgentComponentDemo component="approval" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -53,11 +43,11 @@ import { AgentApproval } from '@/components/agent-ui'
 | --------- | ------------------ |
 | `default` | Additional content |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentApproval.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/artifact.md b/apps/docs/en/ai/artifact.md
index 209576a0..8c34da45 100644
--- a/apps/docs/en/ai/artifact.md
+++ b/apps/docs/en/ai/artifact.md
@@ -6,16 +6,6 @@ Artifact card for code, documents, files, and images.
 
 <AgentComponentDemo component="artifact" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -40,11 +30,11 @@ import { AgentArtifact } from '@/components/agent-ui'
 | ------ | ------------------- | ------------- |
 | `open` | `AgentArtifactItem` | Open artifact |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentArtifact.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/attachments.md b/apps/docs/en/ai/attachments.md
index c2c91ff8..6be9da29 100644
--- a/apps/docs/en/ai/attachments.md
+++ b/apps/docs/en/ai/attachments.md
@@ -6,16 +6,6 @@ Attachment preview, size, and removal actions.
 
 <AgentComponentDemo component="attachments" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -40,11 +30,11 @@ import { AgentAttachmentList } from '@/components/agent-ui'
 | -------- | --------------------- | ----------------- |
 | `remove` | `AgentAttachmentItem` | Remove attachment |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                          |
 | ------ | ----------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`       |
 | weapp  | `@/components/agent-ui/AgentAttachmentList.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/citations.md b/apps/docs/en/ai/citations.md
index 08a1c4dd..c11cc659 100644
--- a/apps/docs/en/ai/citations.md
+++ b/apps/docs/en/ai/citations.md
@@ -6,16 +6,6 @@ Collapsible source collection for inline citations.
 
 <AgentComponentDemo component="citations" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -43,11 +33,11 @@ import { AgentCitations } from '@/components/agent-ui'
 | `open`        | `AgentCitationItem` | Open citation |
 | `update:open` | `boolean`           | Open changed  |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                         |
 | ------ | -------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                      |
 | weapp  | Default export from `@/components/agent-ui/AgentCitations.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/code-block.md b/apps/docs/en/ai/code-block.md
index 0daee35f..895790c2 100644
--- a/apps/docs/en/ai/code-block.md
+++ b/apps/docs/en/ai/code-block.md
@@ -6,16 +6,6 @@ Code surface with stable streaming, line numbers, focused lines, and copy feedba
 
 <AgentComponentDemo component="code-block" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -51,11 +41,11 @@ import { AgentCodeBlock } from '@/components/agent-ui'
 | -------- | ----------- |
 | `footer` | Footer      |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                         |
 | ------ | -------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                      |
 | weapp  | Default export from `@/components/agent-ui/AgentCodeBlock.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/command-search.md b/apps/docs/en/ai/command-search.md
index 0ec1d00e..c304b9bb 100644
--- a/apps/docs/en/ai/command-search.md
+++ b/apps/docs/en/ai/command-search.md
@@ -6,16 +6,6 @@ Live-filtered Agent command search with empty state.
 
 <AgentComponentDemo component="command-search" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentCommandSearch } from '@/components/agent-ui'
 | `select`            | `AgentSearchItem` | Select command |
 | `update:modelValue` | `string`          | Update query   |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                             |
 | ------ | ------------------------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`                          |
 | weapp  | Default export from `@/components/agent-ui/AgentCommandSearch.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/composer.md b/apps/docs/en/ai/composer.md
index f816b302..f4b4d325 100644
--- a/apps/docs/en/ai/composer.md
+++ b/apps/docs/en/ai/composer.md
@@ -6,16 +6,6 @@ Auto-growing prompt input, suggestions, keyboard submit, and send state.
 
 <AgentComponentDemo component="composer" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -54,11 +44,11 @@ import { AgentComposer } from '@/components/agent-ui'
 | `leading`  | Leading action; H5  |
 | `trailing` | Trailing action; H5 |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentComposer.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/context-card.md b/apps/docs/en/ai/context-card.md
index 39d35c1b..576ab26c 100644
--- a/apps/docs/en/ai/context-card.md
+++ b/apps/docs/en/ai/context-card.md
@@ -6,16 +6,6 @@ Retrieved knowledge chunks with source type and open actions.
 
 <AgentComponentDemo component="context-card" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentContextCard } from '@/components/agent-ui'
 | ------ | ------------------- | ----------- |
 | `open` | `AgentContextChunk` | Open source |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                           |
 | ------ | ---------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                        |
 | weapp  | Default export from `@/components/agent-ui/AgentContextCard.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/conversation.md b/apps/docs/en/ai/conversation.md
index 3328dff8..9634aa31 100644
--- a/apps/docs/en/ai/conversation.md
+++ b/apps/docs/en/ai/conversation.md
@@ -6,16 +6,6 @@ Conversation list for message history and active responses.
 
 <AgentComponentDemo component="conversation" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -38,11 +28,11 @@ import { AgentConversation } from '@/components/agent-ui'
 
 None.
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                        |
 | ------ | --------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`     |
 | weapp  | `@/components/agent-ui/AgentConversation.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/diff-table.md b/apps/docs/en/ai/diff-table.md
index e5389a25..d6144b7b 100644
--- a/apps/docs/en/ai/diff-table.md
+++ b/apps/docs/en/ai/diff-table.md
@@ -6,16 +6,6 @@ AI-proposed additions, removals, and updates for structured tables.
 
 <AgentComponentDemo component="diff-table" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentDiffTable } from '@/components/agent-ui'
 | `reject` | `void`          | Reject      |
 | `select` | `AgentTableRow` | Select row  |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                         |
 | ------ | -------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                      |
 | weapp  | Default export from `@/components/agent-ui/AgentDiffTable.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/event-renderer.md b/apps/docs/en/ai/event-renderer.md
index f302e5aa..5b888d83 100644
--- a/apps/docs/en/ai/event-renderer.md
+++ b/apps/docs/en/ai/event-renderer.md
@@ -6,16 +6,6 @@ Projects AgentStreamSnapshot into reasoning, tools, response, and approval UI.
 
 <AgentComponentDemo component="event-renderer" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -49,11 +39,11 @@ import { AgentEventRenderer } from '@/components/agent-ui'
 | `actions` | Completion actions |
 | `default` | Trailing content   |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                         |
 | ------ | ---------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`      |
 | weapp  | `@/components/agent-ui/AgentEventRenderer.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/file-diff.md b/apps/docs/en/ai/file-diff.md
index 0acd0c5a..8d73bc35 100644
--- a/apps/docs/en/ai/file-diff.md
+++ b/apps/docs/en/ai/file-diff.md
@@ -6,16 +6,6 @@ A dual-target review surface for Agent changes: unified/split layouts, inline ch
 
 <AgentComponentDemo component="file-diff" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -89,17 +79,11 @@ const lines: AgentDiffLine[] = [
 | ------ | ----------------------- | ------------------------------------------------------------------ |
 | `line` | `{ line, index, side }` | Overrides code-content rendering for an existing token highlighter |
 
-## Design Boundary
-
-The visual and interaction model draws from [@pierre/diffs](https://github.com/pierrecomputer/pierre/tree/main/packages/diffs): a neutral code surface, restrained addition/deletion layers, gutter indicators, unified/split layouts, inline changes, and expandable hunks.
-
-Varo is not a port. `@pierre/diffs` uses Shadow DOM, Shiki, worker pools, and large-scale virtualization for browser code review; those systems cannot run directly in a mini program. `AgentFileDiff` keeps the lighter data contract and consistent interactions appropriate for Agent output on both targets. For H5-only products needing huge diffs, syntax highlighting, annotations, or editing, use `@pierre/diffs` directly.
-
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                                                                      |
 | ------ | ----------------------------------------------------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                                                                   |
 | weapp  | Default export from `@/components/agent-ui/AgentFileDiff.vue`; types from `@/components/agent-ui/file-diff` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/filter-table.md b/apps/docs/en/ai/filter-table.md
index f13db714..599cdc28 100644
--- a/apps/docs/en/ai/filter-table.md
+++ b/apps/docs/en/ai/filter-table.md
@@ -6,16 +6,6 @@ Live Agent data filtering with status chips.
 
 <AgentComponentDemo component="filter-table" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -46,11 +36,11 @@ import { AgentFilterTable } from '@/components/agent-ui'
 | `select`        | `AgentTableRow` | Select row    |
 | `update:filter` | `string`        | Update filter |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                                                                           |
 | ------ | ---------------------------------------------------------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                                                                        |
 | weapp  | Default export from `@/components/agent-ui/AgentFilterTable.vue`; types from `@/components/agent-ui/agent-table` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/fine-tune.md b/apps/docs/en/ai/fine-tune.md
index b129b176..a88cf284 100644
--- a/apps/docs/en/ai/fine-tune.md
+++ b/apps/docs/en/ai/fine-tune.md
@@ -6,16 +6,6 @@ Property inspector and tuning panel for Agent-generated designs.
 
 <AgentComponentDemo component="fine-tune" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -42,11 +32,11 @@ import { AgentFineTune } from '@/components/agent-ui'
 | `apply`           | `AgentFineTuneControl[]` | Apply           |
 | `update:controls` | `AgentFineTuneControl[]` | Update controls |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                        |
 | ------ | ------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                     |
 | weapp  | Default export from `@/components/agent-ui/AgentFineTune.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/flowchart.md b/apps/docs/en/ai/flowchart.md
index 94463ed4..c9bafbe9 100644
--- a/apps/docs/en/ai/flowchart.md
+++ b/apps/docs/en/ai/flowchart.md
@@ -6,16 +6,6 @@ Agent workflow made of triggers, conditions, actions, and results.
 
 <AgentComponentDemo component="flowchart" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -42,11 +32,11 @@ import { AgentFlowchart } from '@/components/agent-ui'
 | `add`    | `string \| undefined` | Add step    |
 | `select` | `AgentFlowNode`       | Select node |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                         |
 | ------ | -------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                      |
 | weapp  | Default export from `@/components/agent-ui/AgentFlowchart.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/image-generation.md b/apps/docs/en/ai/image-generation.md
index 9e9b5309..54857ee3 100644
--- a/apps/docs/en/ai/image-generation.md
+++ b/apps/docs/en/ai/image-generation.md
@@ -6,16 +6,6 @@ Stable image surface from queued work through refinement to completion.
 
 <AgentComponentDemo component="image-generation" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -46,11 +36,11 @@ import { AgentImageGeneration } from '@/components/agent-ui'
 | `retry`    | `void`   | Retry       |
 | `download` | `string` | Download    |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                               |
 | ------ | -------------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                            |
 | weapp  | Default export from `@/components/agent-ui/AgentImageGeneration.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/index.md b/apps/docs/en/ai/index.md
index 9d95699f..bea25374 100644
--- a/apps/docs/en/ai/index.md
+++ b/apps/docs/en/ai/index.md
@@ -1,151 +1,38 @@
 # AI Agent Components
 
-Varo Agent UI provides standalone **Demo → Basic Usage → Props → Events → Slots → Target Notes** pages for its foundational surfaces; this overview also records the Agent Workspace contract. Components, Blocks, and their combined surface total are calculated from the Registry inventory below, and all interfaces consume the shared `@varo-ui/ai` event and thread-version contracts.
+`@varo-ui/ai` provides events, streaming control, and Markdown contracts. Registry installs editable UI source.
 
-## Install Agent UI
-
-Install the headless event protocol, then use the Registry to write editable UI source for your target:
+## Install
 
 ```bash
 pnpm add @varo-ui/ai
 pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
 pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
+
+# Blocks
 pnpm dlx @varo-ui/cli add --target h5 blocks/agent-chat
 pnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat
 pnpm dlx @varo-ui/cli add --target h5 blocks/agent-workspace
 pnpm dlx @varo-ui/cli add --target weapp blocks/agent-workspace
 ```
 
-[Browse every Agent component](#agent-component-inventory)
+::: info Imports
+Use named exports from `@/components/agent-ui` on H5. Mini programs import the matching `.vue` file.
+:::
 
-## Complete Conversation Demo
+## Demo
 
 <AgentComponentsDemo locale="en" />
 
-<span id="agent-component-inventory"></span>
-
-## Conversation and Streaming
-
-| Component                                  | Responsibility                                  |
-| ------------------------------------------ | ----------------------------------------------- |
-| [AgentLoading](./loading)                  | Loading, elapsed time, and running feedback     |
-| [AgentThinking](./thinking)                | Reasoning, search, and execution traces         |
-| [AgentMarkdown](./markdown)                | Safe incremental Markdown AST                   |
-| [AgentStream](./stream)                    | Streaming response, errors, cursor, and actions |
-| [AgentMessage](./message)                  | User, assistant, and system messages            |
-| [AgentConversation](./conversation)        | Message history composition                     |
-| [AgentMessageScroller](./message-scroller) | Reader-aware conversation viewport              |
-
-## Execution, Tools, and Approval
-
-| Component                               | Responsibility                             |
-| --------------------------------------- | ------------------------------------------ |
-| [AgentToolChip](./tool-chip)            | Compact tool state                         |
-| [AgentToolResult](./tool-result)        | Collapsible terminal and request output    |
-| [AgentTaskList](./task-list)            | Agent plan and progress                    |
-| `AgentTaskRunner`                       | Retry, approval, and cancellation controls |
-| [AgentActivity](./activity)             | Mixed reasoning, search, and tool activity |
-| [AgentApproval](./approval)             | General human approval                     |
-| [AgentToolApproval](./tool-approval)    | Tool permission approval                   |
-| [AgentRecommendation](./recommendation) | Agent suggestion with confidence           |
-| [AgentEventRenderer](./event-renderer)  | Snapshot-to-response state projection      |
-
-## Prompt and Response Actions
-
-| Component                                      | Responsibility                                  |
-| ---------------------------------------------- | ----------------------------------------------- |
-| [AgentRadioGroup](./radio-group)               | Animated single-choice decisions                |
-| [AgentPromptSuggestions](./prompt-suggestions) | Prompt suggestions                              |
-| [AgentComposer](./composer)                    | Agent input and send state                      |
-| `AgentComposerScope`                           | Pre-submit source permission and context budget |
-| [AgentResponseActions](./response-actions)     | Copy, retry, like, and dislike                  |
-| [AgentSelectionActions](./selection-actions)   | AI actions for selected text                    |
-| [AgentCommandSearch](./command-search)         | Agent command search                            |
-
-## Context, Citations, and Artifacts
-
-| Component                                  | Responsibility                                                   |
-| ------------------------------------------ | ---------------------------------------------------------------- |
-| [AgentArtifact](./artifact)                | Code, document, file, and image artifacts                        |
-| [AgentAttachmentList](./attachments)       | Attachment preview and removal                                   |
-| [AgentSourceList](./sources)               | Source list                                                      |
-| [AgentCitations](./citations)              | Collapsible citations                                            |
-| `AgentRetrievalProgress`                   | Visible retrieval queue and failed-item retry                    |
-| [AgentRagPipeline](./rag-pipeline)         | Five-stage RAG, context assembly, and linked streaming citations |
-| `AgentSourceReceipt`                       | Post-answer source read receipt                                  |
-| [AgentContextCard](./context-card)         | Retrieved knowledge chunks                                       |
-| [AgentCodeBlock](./code-block)             | Standalone streaming code block                                  |
-| [AgentFileDiff](./file-diff)               | File-level diff                                                  |
-| [AgentImageGeneration](./image-generation) | Image generation lifecycle                                       |
-
-## Structured Data and Workspace
-
-| Component                            | Responsibility                      |
-| ------------------------------------ | ----------------------------------- |
-| [AgentSidebar](./sidebar)            | AI workspace sidebar                |
-| `AgentThreadVersions`                | Thread branch and version selection |
-| `AgentShell`                         | Page, docked, and sheet placement   |
-| [AgentInsightCard](./insight-card)   | Paged Agent insight                 |
-| [AgentDiffTable](./diff-table)       | AI-proposed table changes           |
-| [AgentRecordsTable](./records-table) | Sortable records table              |
-| [AgentFilterTable](./filter-table)   | Status-filtered table               |
-| [AgentFlowchart](./flowchart)        | Agent workflow                      |
-| [AgentFineTune](./fine-tune)         | Design property tuning panel        |
-
-## Agent Workspace Contract
-
-| Component                | Key inputs                            | User events                                          |
-| ------------------------ | ------------------------------------- | ---------------------------------------------------- |
-| `AgentComposerScope`     | `sources`, `usagePercent`, `disabled` | `toggle(source, enabled)`, `connect(source)`         |
-| `AgentRetrievalProgress` | `items`                               | `retry(item)`                                        |
-| `AgentRagPipeline`       | `query`, `steps`, `sources`, `answer` | `run`, `cancel`, `selectSource(source)`              |
-| `AgentSourceReceipt`     | `items`, `summary`                    | `open(item)`, `connect(item)`                        |
-| `AgentTaskRunner`        | `tasks`, `busy`                       | `retry(task)`, `approve(task)`, `cancel`             |
-| `AgentThreadVersions`    | `versions`, `activeId`                | `select(version)`, `branch(version)`, `pin(version)` |
-| `AgentShell`             | `placement`, `open`, `title`          | `close`                                              |
-
-`createAgentThreadController()` in `@varo-ui/ai` owns the immutable acyclic version graph; components only render its snapshot and forward decisions. `AgentWorkspace` exposes qualified events such as `toggleSource`, `retryRetrieval`, `retryTask`, and `selectVersion` so unrelated `retry` and `connect` surfaces never collide.
-
-### RAG Pipeline and Motion
-
-`AgentRagPipeline` is installed with `components/agent-ui`. It projects controlled snapshots; it does not perform retrieval, model requests, or source authorization. Replace its inputs as real work progresses:
-
-- `steps`: the fixed `query`, `embed`, `retrieve`, `assemble`, and `generate` stages, each with `waiting`, `running`, `completed`, or `failed` status. Optional `detail` and `durationMs` describe progress. While any stage is running, the overall flow remains active and cancellable; failure takes precedence once no stage remains active.
-- `sources`: stable `id` and `title`, with optional `excerpt`, a 0–1 `score`, context `tokens`, and a `blue/violet/rose` tone. Segments use token weights only when every source has a finite positive token count; otherwise they share space equally and retain a readable minimum width.
-- `answer`: text parts `{ type: 'text', text }` or citations `{ type: 'citation', sourceId }`, each carrying a stable `id`. Citations resolve by source ID, not array position. Removing or remapping citations clears obsolete source feedback without replaying unchanged citations.
-- `title`, `elapsedMs`, and `className` control the heading, total elapsed time, and container; `reducedMotion` disables nonessential motion.
-
-A newly arriving citation briefly highlights its source and context segment. H5 links pointer hover, keyboard focus, and selection; Weapp uses tap selection. Missing sources produce a disabled citation button on H5 and noninteractive `[?]` text on Weapp, with an accessible label describing the unavailable source; readable answer text is preserved. Cancellation, replay, and unmount clean up demo timers. Replay retains the current query, and business state never waits for an animation to finish.
-
-H5 follows `prefers-reduced-motion` automatically. Weapp provides the `reducedMotion` prop and media-query styles. Motion uses theme `--varo-agent-motion-*` variables with transform/opacity and adds no animation runtime dependency.
-
-Place the component in the `AgentWorkspace` `execution` slot to replace its default conversation, retrieval, task, and receipt region while retaining source permissions, thread versions, and input. In Weapp, set `weapp.vue.template.scopedSlotsRequireProps: true` in the `weapp-vite` configuration so a `#execution` slot without scope parameters remains an ordinary named slot. This avoids generic-slot automatic `setData.pick` omitting parent state. Both playgrounds provide a cancellable, replayable demo-data flow.
-
-## Complete Block
-
-- [AgentChat](./agent-chat): composes history, streaming responses, reasoning, tools, approval, and prompt input.
-- `AgentWorkspace`: composes source permission, retrieval progress, task controls, thread versions, conversation, and three placement modes.
-
-## Beautiful UI / beUI / ReUI Coverage
-
-Varo does not copy React or Framer Motion source. It rewrites the interaction contracts for Vue 3, `weapp-vite`, `wevu`, and `weapp-tailwindcss`.
-
-- Beautiful UI’s 20 Agent surfaces are mapped: Loading, Thinking, Streaming, Approval, Tool Chips, Task Rows, Chat, Prompt Bar, Recommendation, Context, Diff Table, Records Table, Filter Table, Sidebar, Search, Flowchart, Insight, Code Block, Fine-tune, and Selection Actions.
-- beUI Agent capabilities are mapped: Message / Bubble, Message Scroller, Prompt Input, Todo List, Code Block, Approval Card, File Diff, Tool Result, Streaming Response, Image Generation, Tool Approval, Citations, Agent Activity, Loading States, AI Sidebar, and Chat App.
-- ReUI AI Chat 1 / 6 / 9 / 12 flows map to `AgentComposerScope`, `AgentRetrievalProgress`, `AgentSourceReceipt`, `AgentTaskRunner`, `AgentThreadVersions`, `AgentShell`, and `AgentWorkspace`. Varo adopts the interaction structure without copying React/Radix source or its desktop visual shell.
-- React-only `motion/layoutId`, DOM selection, and browser clipboard behavior are not carried into mini programs verbatim. Equivalent behavior uses WXML state, CSS motion, controlled events, and product callbacks.
-
-## Event Protocol
-
-Streaming surfaces share these transport events:
+::: warning RAG boundary
+`AgentRagPipeline` only renders controlled state and emits `run`, `cancel`, and `selectSource`. Product code owns retrieval, model requests, and source authorization.
+:::
 
-- `message.start` / `message.end`
-- `text.delta`
-- `reasoning.*`
-- `tool.*`
-- `approval.*`
-- `data` / `error` / `done`
+## Blocks
 
-Thread branches are not streaming transport events. Product code uses `createAgentThreadController()` to `append`, `fork`, and `select`, then passes the readonly versions snapshot to `AgentThreadVersions`. Source permission, retry, approval, and shell close remain controlled UI callbacks.
+- [AgentChat](./agent-chat): conversation, streaming, tools, approvals, and input.
+- [AgentWorkspace](./agent-workspace): sources, retrieval, tasks, versions, and layout.
 
-H5 uses Markstream Core RAF scheduling. Mini programs use timed-frame scheduling. Both consume the same safe Markdown AST.
+::: info Platforms
+H5 uses RAF scheduling; mini programs use timed frames. Both consume the same safe Markdown AST.
+:::
diff --git a/apps/docs/en/ai/insight-card.md b/apps/docs/en/ai/insight-card.md
index 12f8a7a4..8f536c09 100644
--- a/apps/docs/en/ai/insight-card.md
+++ b/apps/docs/en/ai/insight-card.md
@@ -6,16 +6,6 @@ Paged Agent insights with metrics and action suggestions.
 
 <AgentComponentDemo component="insight-card" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -43,11 +33,11 @@ import { AgentInsightCard } from '@/components/agent-ui'
 | `action`         | `AgentInsightItem` | Run action  |
 | `update:current` | `number`           | Update page |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                           |
 | ------ | ---------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                        |
 | weapp  | Default export from `@/components/agent-ui/AgentInsightCard.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/loading.md b/apps/docs/en/ai/loading.md
index ba61fa84..59a46223 100644
--- a/apps/docs/en/ai/loading.md
+++ b/apps/docs/en/ai/loading.md
@@ -6,16 +6,6 @@ Agent loading feedback with elapsed time and multiple motion variants.
 
 <AgentComponentDemo component="loading" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentLoading } from '@/components/agent-ui'
 
 None.
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentLoading.vue`  |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/markdown.md b/apps/docs/en/ai/markdown.md
index b87e4e7d..225ba5be 100644
--- a/apps/docs/en/ai/markdown.md
+++ b/apps/docs/en/ai/markdown.md
@@ -6,16 +6,6 @@ A streaming-safe Markdown AST renderer.
 
 <AgentComponentDemo component="markdown" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -45,15 +35,15 @@ const markdownContent = '## Result\n\n**Ready**'
 | ------ | -------- | ------------- |
 | `link` | `string` | Link selected |
 
-## Mini-program rendering
-
+::: warning Mini-program rendering
 The mini-program target keeps the platform-neutral `stream-markdown-parser` as its parser. Safe inline nodes become WeChat `rich-text nodes`; headings, lists, code blocks, tables, images, and quotes stay native mini-program nodes. Links bypass `rich-text` so applications retain the `link` event, and raw HTML is never injected.
+:::
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentMarkdown.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/message-scroller.md b/apps/docs/en/ai/message-scroller.md
index 9e49edc1..415ddcf4 100644
--- a/apps/docs/en/ai/message-scroller.md
+++ b/apps/docs/en/ai/message-scroller.md
@@ -6,16 +6,6 @@ Reader-aware streaming viewport with jump-to-latest control.
 
 <AgentComponentDemo component="message-scroller" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -51,11 +41,11 @@ import { AgentMessageScroller } from '@/components/agent-ui'
 | --------- | -------------------- |
 | `default` | Conversation content |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                               |
 | ------ | -------------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                            |
 | weapp  | Default export from `@/components/agent-ui/AgentMessageScroller.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/message.md b/apps/docs/en/ai/message.md
index 26e2346a..342456be 100644
--- a/apps/docs/en/ai/message.md
+++ b/apps/docs/en/ai/message.md
@@ -6,16 +6,6 @@ Alignment, avatar, and metadata container for user, assistant, and system messag
 
 <AgentComponentDemo component="message" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -48,11 +38,11 @@ None.
 | --------- | --------------- |
 | `default` | Message content |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentMessage.vue`  |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/prompt-suggestions.md b/apps/docs/en/ai/prompt-suggestions.md
index 4d74df24..05c0b8e0 100644
--- a/apps/docs/en/ai/prompt-suggestions.md
+++ b/apps/docs/en/ai/prompt-suggestions.md
@@ -6,16 +6,6 @@ Horizontally scrollable Agent prompt suggestions.
 
 <AgentComponentDemo component="prompt-suggestions" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentPromptSuggestions } from '@/components/agent-ui'
 | -------- | -------- | ------------------- |
 | `select` | `string` | Suggestion selected |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                             |
 | ------ | -------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`          |
 | weapp  | `@/components/agent-ui/AgentPromptSuggestions.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/radio-group.md b/apps/docs/en/ai/radio-group.md
index f19a0ddb..a05f0a50 100644
--- a/apps/docs/en/ai/radio-group.md
+++ b/apps/docs/en/ai/radio-group.md
@@ -6,16 +6,6 @@ Agent single-choice control with a shared active indicator.
 
 <AgentComponentDemo component="radio-group" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -43,11 +33,11 @@ import { AgentRadioGroup } from '@/components/agent-ui'
 | `update:value` | `string` | Update selected value |
 | `change`       | `string` | Selection changed     |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                      |
 | ------ | ------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`   |
 | weapp  | `@/components/agent-ui/AgentRadioGroup.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/rag-pipeline.md b/apps/docs/en/ai/rag-pipeline.md
index 4975e129..da38263c 100644
--- a/apps/docs/en/ai/rag-pipeline.md
+++ b/apps/docs/en/ai/rag-pipeline.md
@@ -6,16 +6,6 @@ Five-stage retrieval-augmented generation: progress, source cards, and citations
 
 <AgentComponentDemo component="rag-pipeline" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components. `AgentRagPipeline` projects a controlled snapshot; it does not retrieve, call a model, or authorize sources.
-
 ## Basic Usage
 
 ```vue
@@ -38,15 +28,16 @@ import { AgentRagPipeline } from '@/components/agent-ui'
 
 ## Props
 
-| Prop            | Type                   | Default        | Description                         |
-| --------------- | ---------------------- | -------------- | ----------------------------------- |
-| `query`         | `string`               | `''`           | Current query                       |
-| `steps`         | `AgentRagStep[]`       | `[]`           | Five-stage progress                 |
-| `sources`       | `AgentRagSource[]`     | `[]`           | Retrieved sources                   |
-| `answer`        | `AgentRagAnswerPart[]` | `[]`           | Text fragments and source citations |
-| `title`         | `string`               | `检索增强生成` | Title                               |
-| `elapsedMs`     | `number`               | `undefined`    | Elapsed time                        |
-| `reducedMotion` | `boolean`              | `false`        | Disable non-essential motion        |
+| Prop            | Type                            | Default          | Description                         |
+| --------------- | ------------------------------- | ---------------- | ----------------------------------- |
+| `className`     | `ClassValue`                    | `undefined`      | Root classes                        |
+| `query`         | `string`                        | `''`             | Current query                       |
+| `steps`         | `readonly AgentRagStep[]`       | `[]`             | Five-stage progress                 |
+| `sources`       | `readonly AgentRagSource[]`     | `[]`             | Retrieved sources                   |
+| `answer`        | `readonly AgentRagAnswerPart[]` | `[]`             | Text fragments and source citations |
+| `title`         | `string`                        | `'检索增强生成'` | Title                               |
+| `elapsedMs`     | `number`                        | `undefined`      | Elapsed time                        |
+| `reducedMotion` | `boolean`                       | `false`          | Disable non-essential motion        |
 
 ## Events
 
@@ -56,11 +47,12 @@ import { AgentRagPipeline } from '@/components/agent-ui'
 | `cancel`       | `void`           | Stop the current run |
 | `selectSource` | `AgentRagSource` | Select a source      |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                           |
 | ------ | ---------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                        |
 | weapp  | Default export from `@/components/agent-ui/AgentRagPipeline.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned. The docs demo uses a local snapshot and does not call a model or retrieval service.
+The docs demo uses a local snapshot and does not call a model or retrieval service.
+:::
diff --git a/apps/docs/en/ai/recommendation.md b/apps/docs/en/ai/recommendation.md
index 48cf3bf3..9c7f69a4 100644
--- a/apps/docs/en/ai/recommendation.md
+++ b/apps/docs/en/ai/recommendation.md
@@ -6,16 +6,6 @@ Agent recommendation card with confidence and accept action.
 
 <AgentComponentDemo component="recommendation" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -50,11 +40,11 @@ import { AgentRecommendation } from '@/components/agent-ui'
 | `default`   | Additional content |
 | `secondary` | Secondary action   |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                          |
 | ------ | ----------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`       |
 | weapp  | `@/components/agent-ui/AgentRecommendation.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/records-table.md b/apps/docs/en/ai/records-table.md
index 36c9ec8c..83d13b86 100644
--- a/apps/docs/en/ai/records-table.md
+++ b/apps/docs/en/ai/records-table.md
@@ -6,16 +6,6 @@ Agent records table with sorting and selection.
 
 <AgentComponentDemo component="records-table" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentRecordsTable } from '@/components/agent-ui'
 | `select` | `AgentTableRow`    | Select row  |
 | `sort`   | `AgentTableColumn` | Sort        |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                            |
 | ------ | ----------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                         |
 | weapp  | Default export from `@/components/agent-ui/AgentRecordsTable.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/response-actions.md b/apps/docs/en/ai/response-actions.md
index 741846b3..f5f1ed81 100644
--- a/apps/docs/en/ai/response-actions.md
+++ b/apps/docs/en/ai/response-actions.md
@@ -6,16 +6,6 @@ Response action bar for copy, retry, like, and dislike.
 
 <AgentComponentDemo component="response-actions" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentResponseActions } from '@/components/agent-ui'
 | `like`    | `void`  | Like        |
 | `dislike` | `void`  | Dislike     |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                           |
 | ------ | ------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`        |
 | weapp  | `@/components/agent-ui/AgentResponseActions.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/selection-actions.md b/apps/docs/en/ai/selection-actions.md
index 25880128..100902ed 100644
--- a/apps/docs/en/ai/selection-actions.md
+++ b/apps/docs/en/ai/selection-actions.md
@@ -6,16 +6,6 @@ Agent actions such as explain, improve, or shorten for selected text.
 
 <AgentComponentDemo component="selection-actions" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentSelectionActions } from '@/components/agent-ui'
 | -------- | ------------------ | --------------- |
 | `select` | `{ action; text }` | Action selected |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                                |
 | ------ | --------------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                             |
 | weapp  | Default export from `@/components/agent-ui/AgentSelectionActions.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/sidebar.md b/apps/docs/en/ai/sidebar.md
index 77a598c7..86086576 100644
--- a/apps/docs/en/ai/sidebar.md
+++ b/apps/docs/en/ai/sidebar.md
@@ -6,16 +6,6 @@ AI workspace sidebar with groups, collapse, create, and selection.
 
 <AgentComponentDemo component="sidebar" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -52,11 +42,11 @@ import { AgentSidebar } from '@/components/agent-ui'
 | -------- | ----------- |
 | `footer` | Footer      |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                       |
 | ------ | ------------------------------------------------------------ |
 | H5     | Named export from `@/components/agent-ui`                    |
 | weapp  | Default export from `@/components/agent-ui/AgentSidebar.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/sources.md b/apps/docs/en/ai/sources.md
index 87644f8e..04c15cb6 100644
--- a/apps/docs/en/ai/sources.md
+++ b/apps/docs/en/ai/sources.md
@@ -6,16 +6,6 @@ External link, citation, and source list.
 
 <AgentComponentDemo component="sources" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -41,11 +31,11 @@ import { AgentSourceList } from '@/components/agent-ui'
 | ------ | ----------------- | ----------- |
 | `open` | `AgentSourceItem` | Open source |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                      |
 | ------ | ------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`   |
 | weapp  | `@/components/agent-ui/AgentSourceList.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/stream.md b/apps/docs/en/ai/stream.md
index e639d713..24bb0a82 100644
--- a/apps/docs/en/ai/stream.md
+++ b/apps/docs/en/ai/stream.md
@@ -6,16 +6,6 @@ Response stream, cursor, errors, retry, and completion actions.
 
 <AgentComponentDemo component="stream" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -51,15 +41,15 @@ import { AgentStream } from '@/components/agent-ui'
 | --------- | ------------------ |
 | `actions` | Completion actions |
 
-## Streaming scheduler
-
+::: info Streaming scheduler
 `@varo-ui/ai` tracks `markstream-core 2.0.7` and `stream-markdown-parser 1.2.13`. H5 uses RAF; the mini-program target uses timed frames while preserving grapheme boundaries, atomic fence commits, catch-up latency, start delay, burst reveal, pause, resume, flush, and dispose contracts.
+:::
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentStream.vue`   |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/task-list.md b/apps/docs/en/ai/task-list.md
index 68e794e2..a34441a3 100644
--- a/apps/docs/en/ai/task-list.md
+++ b/apps/docs/en/ai/task-list.md
@@ -6,16 +6,6 @@ Agent plan, task progress, and completion count.
 
 <AgentComponentDemo component="task-list" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -39,11 +29,11 @@ import { AgentTaskList } from '@/components/agent-ui'
 
 None.
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentTaskList.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/thinking.md b/apps/docs/en/ai/thinking.md
index a31419bb..9d8e2e84 100644
--- a/apps/docs/en/ai/thinking.md
+++ b/apps/docs/en/ai/thinking.md
@@ -6,16 +6,6 @@ Collapsible reasoning, search, coding, and execution traces.
 
 <AgentComponentDemo component="thinking" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -44,11 +34,11 @@ import { AgentThinking } from '@/components/agent-ui'
 | ------------- | --------- | ------------------ |
 | `update:open` | `boolean` | Open state changed |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentThinking.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/tool-approval.md b/apps/docs/en/ai/tool-approval.md
index 0fc6098c..701eaa55 100644
--- a/apps/docs/en/ai/tool-approval.md
+++ b/apps/docs/en/ai/tool-approval.md
@@ -6,16 +6,6 @@ Review tool details, allow once, remember access, or deny execution.
 
 <AgentComponentDemo component="tool-approval" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -45,11 +35,11 @@ import { AgentToolApproval } from '@/components/agent-ui'
 | `deny`            | `void`                  | Deny            |
 | `update:remember` | `boolean`               | Update remember |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                            |
 | ------ | ----------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                         |
 | weapp  | Default export from `@/components/agent-ui/AgentToolApproval.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/tool-chip.md b/apps/docs/en/ai/tool-chip.md
index 2ec11344..e2837697 100644
--- a/apps/docs/en/ai/tool-chip.md
+++ b/apps/docs/en/ai/tool-chip.md
@@ -6,16 +6,6 @@ Compact tool name, summary, and execution status.
 
 <AgentComponentDemo component="tool-chip" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -39,11 +29,11 @@ import { AgentToolChip } from '@/components/agent-ui'
 
 None.
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                    |
 | ------ | ----------------------------------------- |
 | H5     | Named export from `@/components/agent-ui` |
 | weapp  | `@/components/agent-ui/AgentToolChip.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/ai/tool-result.md b/apps/docs/en/ai/tool-result.md
index b6f18f54..a0d65ae4 100644
--- a/apps/docs/en/ai/tool-result.md
+++ b/apps/docs/en/ai/tool-result.md
@@ -6,16 +6,6 @@ Collapsible tool result for terminal output and request responses.
 
 <AgentComponentDemo component="tool-result" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/ai
-pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
-pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
-```
-
-Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components.
-
 ## Basic Usage
 
 ```vue
@@ -52,11 +42,11 @@ import { AgentToolResult } from '@/components/agent-ui'
 | --------- | ------------- |
 | `default` | Custom output |
 
-## Target Notes
+::: info Target notes
 
 | Target | Import                                                          |
 | ------ | --------------------------------------------------------------- |
 | H5     | Named export from `@/components/agent-ui`                       |
 | weapp  | Default export from `@/components/agent-ui/AgentToolResult.vue` |
 
-The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned.
+:::
diff --git a/apps/docs/en/components/badge.md b/apps/docs/en/components/badge.md
index f78e46a9..be0e96d0 100644
--- a/apps/docs/en/components/badge.md
+++ b/apps/docs/en/components/badge.md
@@ -1,7 +1,5 @@
 # Badge
 
-<RegistryInstallStrip item="components/badge" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="badge" locale="en" />
diff --git a/apps/docs/en/components/breadcrumb.md b/apps/docs/en/components/breadcrumb.md
index 5b05fc47..c4f3f26f 100644
--- a/apps/docs/en/components/breadcrumb.md
+++ b/apps/docs/en/components/breadcrumb.md
@@ -1,7 +1,5 @@
 # Breadcrumb
 
-<RegistryInstallStrip item="components/breadcrumb" :targets="['h5', 'weapp']" locale="en" />
-
 ## Basic Usage
 
 ```vue
diff --git a/apps/docs/en/components/button.md b/apps/docs/en/components/button.md
index 71226f38..1481f60a 100644
--- a/apps/docs/en/components/button.md
+++ b/apps/docs/en/components/button.md
@@ -1,11 +1,13 @@
 # Button
 
-<RegistryInstallStrip item="components/button" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="button" locale="en" />
 
+::: info Interaction
+Buttons retain the 44px default target and existing semantic colors. Press feedback uses a short 140ms scale plus inset shadow; Ghost stays transparent until hover or press. Spatial scaling is removed under reduced motion.
+:::
+
 ## Basic Usage
 
 ```vue
diff --git a/apps/docs/en/components/calendar-card.md b/apps/docs/en/components/calendar-card.md
index 474fe9d0..19bf7015 100644
--- a/apps/docs/en/components/calendar-card.md
+++ b/apps/docs/en/components/calendar-card.md
@@ -1,7 +1,5 @@
 # CalendarCard
 
-<RegistryInstallStrip item="components/calendar" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="calendar-card" locale="en" />
diff --git a/apps/docs/en/components/calendar.md b/apps/docs/en/components/calendar.md
index 9a1ef6b9..865e2078 100644
--- a/apps/docs/en/components/calendar.md
+++ b/apps/docs/en/components/calendar.md
@@ -1,7 +1,5 @@
 # Calendar
 
-<RegistryInstallStrip item="components/calendar" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="calendar" locale="en" />
diff --git a/apps/docs/en/components/cascader.md b/apps/docs/en/components/cascader.md
index 8986fc5d..589363c0 100644
--- a/apps/docs/en/components/cascader.md
+++ b/apps/docs/en/components/cascader.md
@@ -1,7 +1,5 @@
 # Cascader
 
-<RegistryInstallStrip item="components/cascader" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="cascader" locale="en" />
diff --git a/apps/docs/en/components/cell.md b/apps/docs/en/components/cell.md
index df7b262e..b6c359aa 100644
--- a/apps/docs/en/components/cell.md
+++ b/apps/docs/en/components/cell.md
@@ -1,7 +1,5 @@
 # Cell
 
-<RegistryInstallStrip item="components/cell" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="cell" locale="en" />
diff --git a/apps/docs/en/components/checkbox.md b/apps/docs/en/components/checkbox.md
index 026290c4..9e799299 100644
--- a/apps/docs/en/components/checkbox.md
+++ b/apps/docs/en/components/checkbox.md
@@ -1,7 +1,5 @@
 # Checkbox
 
-<RegistryInstallStrip item="components/checkbox" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="checkbox" locale="en" />
diff --git a/apps/docs/en/components/date-field.md b/apps/docs/en/components/date-field.md
new file mode 100644
index 00000000..f6b713da
--- /dev/null
+++ b/apps/docs/en/components/date-field.md
@@ -0,0 +1,32 @@
+# DateField
+
+Year / month / day columns composed from `VPicker`. Keep the month grid on [Calendar](/en/components/calendar); DateField is not a calendar.
+
+## Demo
+
+<DateFieldDemo locale="en" />
+
+## Props
+
+| Prop          | Type      | Default         | Description               |
+| ------------- | --------- | --------------- | ------------------------- |
+| `visible`     | `boolean` | `false`         | Whether Picker is shown   |
+| `value`       | `string`  | `undefined`     | Current date `YYYY-MM-DD` |
+| `placeholder` | `string`  | `'Select date'` | Empty-value label         |
+| `disabled`    | `boolean` | `false`         | Disable the field         |
+| `readonly`    | `boolean` | `false`         | Make the field read-only  |
+| `minYear`     | `number`  | `1970`          | First year                |
+| `maxYear`     | `number`  | `2100`          | Last year                 |
+| `title`       | `string`  | `undefined`     | Picker title              |
+| `confirmText` | `string`  | `'Confirm'`     | Confirm label             |
+| `cancelText`  | `string`  | `'Cancel'`      | Cancel label              |
+
+## Events
+
+| Event            | Payload   | Description               |
+| ---------------- | --------- | ------------------------- |
+| `update:value`   | `string`  | Commit after confirm      |
+| `update:visible` | `boolean` | Picker visibility changed |
+| `change`         | `string`  | Draft date changed        |
+| `confirm`        | `string`  | Confirm and commit        |
+| `cancel`         | `void`    | Cancel and preserve value |
diff --git a/apps/docs/en/components/date-picker.md b/apps/docs/en/components/date-picker.md
index d967a6ef..106c4b5e 100644
--- a/apps/docs/en/components/date-picker.md
+++ b/apps/docs/en/components/date-picker.md
@@ -1,7 +1,5 @@
 # DatePicker
 
-<RegistryInstallStrip item="components/date-picker" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="date-picker" locale="en" />
diff --git a/apps/docs/en/components/dialog.md b/apps/docs/en/components/dialog.md
index ee638547..3bbda99d 100644
--- a/apps/docs/en/components/dialog.md
+++ b/apps/docs/en/components/dialog.md
@@ -1,75 +1,12 @@
 # Dialog
 
-Varo exposes Dialog through composable parts: `VDialogRoot`, `VDialogTrigger`, `VDialogOverlay`, `VDialogContent`, and `VDialogClose`.
-
-<RegistryInstallStrip item="components/dialog" :targets="['h5', 'weapp']" locale="en" />
+Compose `VDialogRoot`, `VDialogTrigger`, `VDialogOverlay`, `VDialogContent`, and `VDialogClose`.
 
 ## Demo
 
 <PlatformTabsDemo example="dialog" locale="en" />
 
-## When to use
-
-- Modal confirmations or supplemental content
-- Downstream wrapper composition in an internal design system
-- Shared overlay click and escape close behavior across teams
-
-## Anatomy
-
-<div class="component-anatomy">
-  <strong>Dialog is a composed parts model, not one monolithic widget.</strong>
-  <ul>
-    <li><code>VDialogRoot</code> owns open state and controlled behavior.</li>
-    <li><code>VDialogTrigger</code> opens or toggles the dialog.</li>
-    <li><code>VDialogOverlay</code> handles the backdrop and click-to-close behavior.</li>
-    <li><code>VDialogContent</code> renders modal content.</li>
-    <li><code>VDialogClose</code> performs explicit close actions.</li>
-  </ul>
-</div>
-
-## Mini-program runtime notes
-
-The native WeChat mini-program runtime has no browser `document` keyboard events and does not provide DOM focus trapping, `inert`, or portal semantics. Weapp therefore uses `VDialogClose` and overlay presses as close paths. The weapp Registry installs wevu SFC parts (`v-dialog-root.vue` and siblings) and does not bind `document`. The reason/cancel state contract remains the same as H5.
-
-## Root Props
-
-| Prop          | Type                   | Default     | Description                    |
-| ------------- | ---------------------- | ----------- | ------------------------------ |
-| `open`        | `boolean \| undefined` | `undefined` | Controlled open state          |
-| `defaultOpen` | `boolean`              | `false`     | Uncontrolled initial state     |
-| `disabled`    | `boolean \| undefined` | `undefined` | Blocks open and close behavior |
-
-## Root Events
-
-| Event         | Payload                                             | Description                                                      |
-| ------------- | --------------------------------------------------- | ---------------------------------------------------------------- |
-| `openChange`  | `(open: boolean, details: DialogOpenChangeDetails)` | Synchronous pre-change request; the handler may cancel it        |
-| `update:open` | `boolean`                                           | Emitted after `openChange` only when the request is not canceled |
-
-```ts
-type DialogOpenChangeReason
-  = | 'trigger-press'
-    | 'outside-press'
-    | 'escape-key'
-    | 'close-press'
-    | 'imperative-action'
-
-interface DialogOpenChangeDetails {
-  readonly reason: DialogOpenChangeReason
-  readonly canceled: boolean
-  cancel: () => void
-}
-```
-
-| `reason`            | Source                                         |
-| ------------------- | ---------------------------------------------- |
-| `trigger-press`     | Trigger and the core `open` / `toggle` events  |
-| `outside-press`     | Overlay press                                  |
-| `escape-key`        | H5 `Escape` key or the core Escape event       |
-| `close-press`       | `VDialogClose`                                 |
-| `imperative-action` | Default for `useDialogRoot().api.setOpen(...)` |
-
-Call `cancel()` synchronously before the `openChange` handler returns:
+## Basic Usage
 
 ```vue
 <script setup lang="ts">
@@ -80,59 +17,53 @@ const open = shallowRef(false)
 const hasUnsavedChanges = shallowRef(true)
 
 function handleOpenChange(nextOpen: boolean, details: DialogOpenChangeDetails) {
-  if (!nextOpen && hasUnsavedChanges.value) {
-    details.cancel()
-  }
+  if (!nextOpen && hasUnsavedChanges.value) { details.cancel() }
 }
 </script>
 
 <template>
   <VDialogRoot v-model:open="open" @open-change="handleOpenChange">
-    <!-- Trigger / Overlay / Content / Close -->
+    <VDialogTrigger>Open</VDialogTrigger>
+    <VDialogOverlay />
+    <VDialogContent>
+      Content
+      <VDialogClose>Close</VDialogClose>
+    </VDialogContent>
   </VDialogRoot>
 </template>
 ```
 
-When `open` is provided, that controlled prop remains authoritative. An allowed request emits `openChange` and then `update:open`, but visibility changes only after the parent applies the new prop. Cancellation prevents uncontrolled state mutation and suppresses `update:open`. If the parent changes `open` independently afterward, the component still follows that prop.
+::: warning Mini-program runtime
+Weapp has no DOM focus trap, `inert`, portal, or `Escape` key semantics. Close with `VDialogClose` or an overlay press.
+:::
+
+## Root Props
+
+| Prop          | Type                   | Default     | Description                |
+| ------------- | ---------------------- | ----------- | -------------------------- |
+| `open`        | `boolean \| undefined` | `undefined` | Controlled open state      |
+| `defaultOpen` | `boolean`              | `false`     | Initial uncontrolled state |
+| `disabled`    | `boolean \| undefined` | `undefined` | Blocks state changes       |
+
+## Root Events
+
+| Event         | Payload                                             | Description                                              |
+| ------------- | --------------------------------------------------- | -------------------------------------------------------- |
+| `openChange`  | `(open: boolean, details: DialogOpenChangeDetails)` | Fires before a change; call `details.cancel()` to cancel |
+| `update:open` | `boolean`                                           | Fires when the request is not cancelled                  |
+
+`details.reason` is `trigger-press`, `outside-press`, `escape-key`, `close-press`, or `imperative-action`.
 
 ## Parts
 
-| Part             | Purpose                               |
-| ---------------- | ------------------------------------- |
-| `VDialogTrigger` | Opens or toggles the dialog           |
-| `VDialogOverlay` | Overlay layer that can close on click |
-| `VDialogContent` | Modal content container               |
-| `VDialogClose`   | Explicit close action                 |
-
-## Behavior
-
-- supports controlled and uncontrolled modes
-- writes state and emits `update:open` exactly once for each allowed transition
-- H5 supports overlay close, `Escape`, focus trapping, background `inert`, and Trigger focus restoration
-- Weapp uses wevu SFC parts with explicit Close/overlay paths and does not bind `document` or promise unavailable native DOM keyboard or focus behavior
-- the parts model is a better base for an enterprise modal API than a single rigid component
-
-## Composition Guidance
-
-<div class="component-note">
-  <strong>Recommended composition</strong>
-  <ul>
-    <li>Decide first whether open state belongs to the parent before opting into controlled mode.</li>
-    <li>For more complex dialogs, create a stricter wrapper with header, body, and footer slots instead of repeating raw part assembly everywhere.</li>
-    <li>Keep platform-specific portal decisions in the adapter layer, not in the shared interaction model.</li>
-  </ul>
-</div>
-
-## Accessibility and Close Contracts
-
-- overlay, `Escape`, Close, and Trigger requests use the same pre-change reason/cancel contract
-- canceling a close preserves Dialog content, the H5 modal layer, and focus ownership
-- explicit close actions should go through `VDialogClose`
-- controlled visibility is ultimately determined by the `open` prop
-
-## Related Docs
-
-- [Button](/en/components/button)
-- [Input](/en/components/input)
-- [Theme](/en/guide/theme)
-- [Cross-platform Demo](/en/examples/)
+| Part             | Responsibility             |
+| ---------------- | -------------------------- |
+| `VDialogRoot`    | State and context          |
+| `VDialogTrigger` | Open or toggle             |
+| `VDialogOverlay` | Backdrop and outside close |
+| `VDialogContent` | Dialog content             |
+| `VDialogClose`   | Explicit close             |
+
+::: info Close contract
+Controlled mode follows `open`. Overlay, `Escape`, Close, and Trigger requests share the same `openChange` / cancel contract.
+:::
diff --git a/apps/docs/en/components/divider.md b/apps/docs/en/components/divider.md
index 9573c390..ece41c98 100644
--- a/apps/docs/en/components/divider.md
+++ b/apps/docs/en/components/divider.md
@@ -1,7 +1,5 @@
 # Divider
 
-<RegistryInstallStrip item="components/divider" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="divider" locale="en" />
diff --git a/apps/docs/en/components/elevator.md b/apps/docs/en/components/elevator.md
index 2abc896a..73ef2691 100644
--- a/apps/docs/en/components/elevator.md
+++ b/apps/docs/en/components/elevator.md
@@ -2,8 +2,6 @@
 
 `VElevator` keeps the index rail synchronized with the group header currently crossing the content viewport. Reaching the bottom activates the final group, while index clicks scroll only the component list and never move the browser document.
 
-<RegistryInstallStrip item="components/elevator" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="elevator" locale="en" />
diff --git a/apps/docs/en/components/fixed-nav.md b/apps/docs/en/components/fixed-nav.md
index ca03472c..a290ac8b 100644
--- a/apps/docs/en/components/fixed-nav.md
+++ b/apps/docs/en/components/fixed-nav.md
@@ -1,7 +1,5 @@
 # FixedNav
 
-<RegistryInstallStrip item="components/fixed-nav" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="fixed-nav" locale="en" />
diff --git a/apps/docs/en/components/form.md b/apps/docs/en/components/form.md
index a91092e6..c81de3a1 100644
--- a/apps/docs/en/components/form.md
+++ b/apps/docs/en/components/form.md
@@ -1,7 +1,5 @@
 # Form
 
-<RegistryInstallStrip item="components/form" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="form" locale="en" />
diff --git a/apps/docs/en/components/grid.md b/apps/docs/en/components/grid.md
index 8fe30ae9..6a0463e9 100644
--- a/apps/docs/en/components/grid.md
+++ b/apps/docs/en/components/grid.md
@@ -1,7 +1,5 @@
 # Grid
 
-<RegistryInstallStrip item="components/grid" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="grid" locale="en" />
diff --git a/apps/docs/en/components/image.md b/apps/docs/en/components/image.md
index a01f8312..34030857 100644
--- a/apps/docs/en/components/image.md
+++ b/apps/docs/en/components/image.md
@@ -1,7 +1,5 @@
 # Image
 
-<RegistryInstallStrip item="components/image" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="image" locale="en" />
@@ -74,6 +72,6 @@
 | `loading` | Custom loading placeholder |
 | `error`   | Custom error placeholder   |
 
-## Primitives
-
+::: info Primitives
 `ImageRoot` comes from `@varo-ui/h5/primitives` or `@varo-ui/weapp/primitives`; `@varo-ui/headless` only carries shared state contracts, while `VImage` adds the Varo API wrapper and classes.
+:::
diff --git a/apps/docs/en/components/index.md b/apps/docs/en/components/index.md
index b0dfb987..f34e5d55 100644
--- a/apps/docs/en/components/index.md
+++ b/apps/docs/en/components/index.md
@@ -1,18 +1,9 @@
 ---
-title: Component Overview
-description: Browse Varo H5 and mini-program components by task, then inspect both targets on one page.
+title: Components
+description: Demos, usage, and APIs for Varo H5 and mini-program components.
 outline: false
 ---
 
-# Component Overview
+# Components
 
-Start from the task category, then inspect H5 and mini-program demos, code, and platform differences on the same page. Use documentation search when you already know the component name.
-
-<ComponentCatalog locale="en" />
-
-## Continue Exploring
-
-- [AI Agent Components](/en/ai/): streaming responses, tools, approvals, artifacts, and workspace UI.
-- [Primitives](/en/primitives/): unstyled behavior, controlled state, and accessible interactions.
-- [Blocks](/en/blocks/build-your-own): editable page slices for product workflows.
-- [Cross-platform Examples](/en/examples/): composed H5 and mini-program experiences.
+Choose a component to view its demos, usage, and API.
diff --git a/apps/docs/en/components/indicator.md b/apps/docs/en/components/indicator.md
index 3d73713d..889e05be 100644
--- a/apps/docs/en/components/indicator.md
+++ b/apps/docs/en/components/indicator.md
@@ -1,7 +1,5 @@
 # Indicator
 
-<RegistryInstallStrip item="components/indicator" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="indicator" locale="en" />
diff --git a/apps/docs/en/components/input-number.md b/apps/docs/en/components/input-number.md
index f387e87f..4f729d11 100644
--- a/apps/docs/en/components/input-number.md
+++ b/apps/docs/en/components/input-number.md
@@ -1,26 +1,29 @@
 # InputNumber
 
-<RegistryInstallStrip item="components/input-number" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="input-number" locale="en" />
 
+InputNumber defaults to a compact 128px minimum width so it does not squeeze adjacent content in horizontal rows. Set width explicitly through `class` or the parent layout when a full-width control is required.
+
 ## Decimal
 
 Use `step` for increments and `precision` for decimal formatting.
 
 ## Props
 
-| Prop        | Type      | Default     | Description       |
-| ----------- | --------- | ----------- | ----------------- |
-| `value`     | `number`  | `0`         | Current value     |
-| `min`       | `number`  | `-Infinity` | Minimum value     |
-| `max`       | `number`  | `Infinity`  | Maximum value     |
-| `step`      | `number`  | `1`         | Step value        |
-| `precision` | `number`  | `undefined` | Decimal precision |
-| `disabled`  | `boolean` | `false`     | Disable component |
-| `readonly`  | `boolean` | `false`     | Readonly state    |
+| Prop                | Type      | Default            | Description                              |
+| ------------------- | --------- | ------------------ | ---------------------------------------- |
+| `decreaseAriaLabel` | `string`  | `'Decrease value'` | Accessible name for the decrement button |
+| `increaseAriaLabel` | `string`  | `'Increase value'` | Accessible name for the increment button |
+| `inputAriaLabel`    | `string`  | `'Numeric value'`  | Accessible name for the numeric input    |
+| `value`             | `number`  | `0`                | Current value                            |
+| `min`               | `number`  | `-Infinity`        | Minimum value                            |
+| `max`               | `number`  | `Infinity`         | Maximum value                            |
+| `step`              | `number`  | `1`                | Step value                               |
+| `precision`         | `number`  | `undefined`        | Decimal precision                        |
+| `disabled`          | `boolean` | `false`            | Disable component                        |
+| `readonly`          | `boolean` | `false`            | Readonly state                           |
 
 ## Events
 
diff --git a/apps/docs/en/components/input.md b/apps/docs/en/components/input.md
index 526a085f..eccd3a7f 100644
--- a/apps/docs/en/components/input.md
+++ b/apps/docs/en/components/input.md
@@ -1,7 +1,5 @@
 # Input
 
-<RegistryInstallStrip item="components/input" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="input" locale="en" />
@@ -94,9 +92,13 @@ const digits = (value: string) => value.replace(/\D/g, '')
 | `suffixIcon`    | `string`                                            | `undefined` | Suffix content                            |
 | `errorMessage`  | `string`                                            | `undefined` | Error message                             |
 
-> Weapp properties cannot distinguish an omitted `value` from an explicit `:value="undefined"`; both use the uncontrolled `defaultValue`. Pass `value=""` for a controlled empty value. `VTextarea` follows the same rule.
+::: warning Controlled empty values on Weapp
+Weapp cannot distinguish an omitted `value` from `:value="undefined"`; both use `defaultValue`. Pass `value=""` for a controlled empty value.
+:::
 
-The Weapp native-control bridge uses explicit props: `name` participates in form submission, `inputId` sets the inner `<input>`/`<textarea>` id, and `className`/`customStyle` style the component wrapper. `ariaDescribedby`, `ariaLabelledby`, `form`, `focus`, `autoFocus`, `cursor`, `selectionStart`, `selectionEnd`, `adjustPosition`, and `holdKeyboard` are forwarded to the inner native control. H5 continues to accept native attrs directly.
+::: info Native Weapp props
+`name`, `inputId`, `className`, `customStyle`, ARIA, form, focus, cursor, and keyboard props are forwarded to the native control. H5 accepts native attrs directly.
+:::
 
 ## Events
 
diff --git a/apps/docs/en/components/layout.md b/apps/docs/en/components/layout.md
index 085f9e70..3b36baf4 100644
--- a/apps/docs/en/components/layout.md
+++ b/apps/docs/en/components/layout.md
@@ -1,7 +1,5 @@
 # Layout
 
-<RegistryInstallStrip item="components/layout" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="layout" locale="en" />
diff --git a/apps/docs/en/components/list.md b/apps/docs/en/components/list.md
new file mode 100644
index 00000000..7b0c3f22
--- /dev/null
+++ b/apps/docs/en/components/list.md
@@ -0,0 +1,27 @@
+# List
+
+`VList` owns bottom-edge incremental loading. Use [PullRefresh](/en/components/pull-refresh) for top-edge refresh.
+
+## Demo
+
+<ListDemo locale="en" />
+
+## Props
+
+| Prop             | Type      | Default        | Description            |
+| ---------------- | --------- | -------------- | ---------------------- |
+| `loading`        | `boolean` | `false`        | Loading the next page  |
+| `finished`       | `boolean` | `false`        | All records loaded     |
+| `disabled`       | `boolean` | `false`        | Disable loading        |
+| `immediate`      | `boolean` | `true`         | Request once on mount  |
+| `lowerThreshold` | `number`  | `80`           | Early trigger distance |
+| `loadingText`    | `string`  | `'加载中'`     | Loading label          |
+| `finishedText`   | `string`  | `'没有更多了'` | Completion label       |
+| `errorText`      | `string`  | `undefined`    | Retryable error label  |
+
+## Events
+
+| Event   | Payload | Description       |
+| ------- | ------- | ----------------- |
+| `load`  | `void`  | Request next page |
+| `retry` | `void`  | Retry failed load |
diff --git a/apps/docs/en/components/loading.md b/apps/docs/en/components/loading.md
index 2c9d0378..376493f9 100644
--- a/apps/docs/en/components/loading.md
+++ b/apps/docs/en/components/loading.md
@@ -2,8 +2,6 @@
 
 `VLoading` is a low-level loading indicator.
 
-<RegistryInstallStrip item="components/loading" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="loading" locale="en" />
diff --git a/apps/docs/en/components/menu.md b/apps/docs/en/components/menu.md
index 0bfeb3e1..ea37d4f5 100644
--- a/apps/docs/en/components/menu.md
+++ b/apps/docs/en/components/menu.md
@@ -1,7 +1,5 @@
 # Menu
 
-<RegistryInstallStrip item="components/menu" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="menu" locale="en" />
diff --git a/apps/docs/en/components/navbar.md b/apps/docs/en/components/navbar.md
index 0ec7bde7..b7e8d6a5 100644
--- a/apps/docs/en/components/navbar.md
+++ b/apps/docs/en/components/navbar.md
@@ -1,7 +1,5 @@
 # Navbar
 
-<RegistryInstallStrip item="components/navbar" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="navbar" locale="en" />
diff --git a/apps/docs/en/components/number-keyboard.md b/apps/docs/en/components/number-keyboard.md
index f1ea53fb..eb6a3587 100644
--- a/apps/docs/en/components/number-keyboard.md
+++ b/apps/docs/en/components/number-keyboard.md
@@ -1,7 +1,5 @@
 # NumberKeyboard
 
-<RegistryInstallStrip item="components/number-keyboard" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="number-keyboard" locale="en" />
diff --git a/apps/docs/en/components/overlay.md b/apps/docs/en/components/overlay.md
index c7d35fd0..82579e98 100644
--- a/apps/docs/en/components/overlay.md
+++ b/apps/docs/en/components/overlay.md
@@ -1,7 +1,5 @@
 # Overlay
 
-<RegistryInstallStrip item="components/overlay" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="overlay" locale="en" />
@@ -66,6 +64,6 @@ const visible = ref(false)
 | --------- | ---------------------- |
 | `default` | Custom overlay content |
 
-## Primitives
-
+::: info Primitives
 `OverlayRoot` uses `useOverlayRoot` for controlled/uncontrolled state and click-close behavior. H5 and Weapp primitives both reuse `useBodyScrollLock`.
+:::
diff --git a/apps/docs/en/components/pagination.md b/apps/docs/en/components/pagination.md
index 85efb72a..ab4a8654 100644
--- a/apps/docs/en/components/pagination.md
+++ b/apps/docs/en/components/pagination.md
@@ -1,7 +1,5 @@
 # Pagination
 
-<RegistryInstallStrip item="components/pagination" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="pagination" locale="en" />
diff --git a/apps/docs/en/components/picker.md b/apps/docs/en/components/picker.md
index cd3c6a16..adeab2da 100644
--- a/apps/docs/en/components/picker.md
+++ b/apps/docs/en/components/picker.md
@@ -1,28 +1,26 @@
 # Picker
 
-<RegistryInstallStrip item="components/picker" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="picker" locale="en" />
 
 ## Props
 
-| Prop          | Type               | Default     | Description                   |
-| ------------- | ------------------ | ----------- | ----------------------------- |
-| `visible`     | `boolean`          | `false`     | Whether the picker is visible |
-| `value`       | `string \| number` | `undefined` | Selected value                |
-| `columns`     | `PickerOption[]`   | `[]`        | Option list                   |
-| `title`       | `string`           | `undefined` | Header title                  |
-| `confirmText` | `string`           | `'Confirm'` | Confirm button text           |
-| `cancelText`  | `string`           | `'Cancel'`  | Cancel button text            |
+| Prop          | Type                                 | Default     | Description                   |
+| ------------- | ------------------------------------ | ----------- | ----------------------------- |
+| `visible`     | `boolean`                            | `false`     | Whether the picker is visible |
+| `value`       | `string \| number \| Array`          | `undefined` | Selected value or values      |
+| `columns`     | `PickerOption[] \| PickerOption[][]` | `[]`        | Single or multiple columns    |
+| `title`       | `string`                             | `undefined` | Header title                  |
+| `confirmText` | `string`                             | `'Confirm'` | Confirm button text           |
+| `cancelText`  | `string`                             | `'Cancel'`  | Cancel button text            |
 
 ## Events
 
-| Event            | Payload             | Description            |
-| ---------------- | ------------------- | ---------------------- |
-| `update:value`   | `string \| number`  | Selected value changed |
-| `update:visible` | `boolean`           | Visibility changed     |
-| `change`         | `{ value, option }` | Selection changed      |
-| `confirm`        | `{ value, option }` | Click confirm          |
-| `cancel`         | `void`              | Click cancel           |
+| Event            | Payload                           | Description                           |
+| ---------------- | --------------------------------- | ------------------------------------- |
+| `update:value`   | `string \| number \| Array`       | Commit after confirm                  |
+| `update:visible` | `boolean`                         | Visibility changed                    |
+| `change`         | `{ value, option, columnIndex? }` | Draft selection changed               |
+| `confirm`        | `{ value, option }`               | Confirm and commit                    |
+| `cancel`         | `void`                            | Cancel and restore the original value |
diff --git a/apps/docs/en/components/popover.md b/apps/docs/en/components/popover.md
index 0bdd2614..47c96c6b 100644
--- a/apps/docs/en/components/popover.md
+++ b/apps/docs/en/components/popover.md
@@ -1,7 +1,5 @@
 # Popover
 
-<RegistryInstallStrip item="components/popover" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="popover" locale="en" />
diff --git a/apps/docs/en/components/popup.md b/apps/docs/en/components/popup.md
index fd280f2d..ce460eeb 100644
--- a/apps/docs/en/components/popup.md
+++ b/apps/docs/en/components/popup.md
@@ -1,7 +1,5 @@
 # Popup
 
-<RegistryInstallStrip item="components/popup" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="popup" locale="en" />
@@ -91,6 +89,6 @@ const visible = ref(false)
 | `default`   | Popup content                                               |
 | `closeIcon` | Custom close icon content that replaces the default `VIcon` |
 
-## Primitives
-
+::: info Primitives
 `PopupRoot` uses `usePopupRoot` for visibility, overlay click, and `Escape` close behavior; UI packages keep the Varo-style component entry.
+:::
diff --git a/apps/docs/en/components/pull-refresh.md b/apps/docs/en/components/pull-refresh.md
new file mode 100644
index 00000000..4062ee6f
--- /dev/null
+++ b/apps/docs/en/components/pull-refresh.md
@@ -0,0 +1,31 @@
+# PullRefresh
+
+`VPullRefresh` owns top-edge pull-to-refresh. Keep bottom-edge incremental loading on [List](/en/components/list).
+
+## Demo
+
+<PullRefreshDemo locale="en" />
+
+## Props
+
+| Prop          | Type      | Default      | Description              |
+| ------------- | --------- | ------------ | ------------------------ |
+| `loading`     | `boolean` | `false`      | Controlled refresh state |
+| `disabled`    | `boolean` | `false`      | Disable pull refresh     |
+| `threshold`   | `number`  | `64`         | Refresh trigger distance |
+| `headHeight`  | `number`  | `48`         | H5-only indicator height |
+| `pullText`    | `string`  | `'下拉刷新'` | H5-only pull hint        |
+| `releaseText` | `string`  | `'释放刷新'` | H5-only threshold hint   |
+| `loadingText` | `string`  | `'加载中'`   | Loading hint             |
+
+## Events
+
+| Event     | Payload | Description                             |
+| --------- | ------- | --------------------------------------- |
+| `refresh` | `void`  | Released after threshold or native pull |
+
+::: info Platform behavior
+
+- H5 responds to downward drag only at the scroll container's top edge.
+- Mini-program uses native `scroll-view` `refresher-*` behavior; `loading` controls completion.
+  :::
diff --git a/apps/docs/en/components/radio.md b/apps/docs/en/components/radio.md
index 9c882b07..9489792c 100644
--- a/apps/docs/en/components/radio.md
+++ b/apps/docs/en/components/radio.md
@@ -1,11 +1,13 @@
 # Radio
 
-<RegistryInstallStrip item="components/radio" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="radio" locale="en" />
 
+## Selection feedback
+
+Radio keeps its inner indicator mounted and reveals the Varo-primary dot with a 180ms scale/fade, avoiding layout reconstruction between states. Press feedback is brief; reduced motion switches state immediately.
+
 ## Props
 
 | Prop       | Type                          | Default     | Description                        |
diff --git a/apps/docs/en/components/range.md b/apps/docs/en/components/range.md
index bfcd234e..b6219dc7 100644
--- a/apps/docs/en/components/range.md
+++ b/apps/docs/en/components/range.md
@@ -1,7 +1,5 @@
 # Range
 
-<RegistryInstallStrip item="components/range" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="range" locale="en" />
diff --git a/apps/docs/en/components/rate.md b/apps/docs/en/components/rate.md
index 6004a8d9..684715ee 100644
--- a/apps/docs/en/components/rate.md
+++ b/apps/docs/en/components/rate.md
@@ -1,7 +1,5 @@
 # Rate
 
-<RegistryInstallStrip item="components/rate" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="rate" locale="en" />
diff --git a/apps/docs/en/components/region-picker.md b/apps/docs/en/components/region-picker.md
index 4564e270..a6190ecf 100644
--- a/apps/docs/en/components/region-picker.md
+++ b/apps/docs/en/components/region-picker.md
@@ -2,8 +2,6 @@
 
 `VRegionPicker` is a controlled hierarchical selector. It owns level navigation, shortcuts, disabled state, confirmation, and async root/child loading feedback; API implementation, caching policy, authorization, and coordinate resolution stay in application code.
 
-<RegistryInstallStrip item="components/region-picker" :targets="['h5', 'weapp']" :wrapper-targets="[]" locale="en" />
-
 ## Demo
 
 <RegionPickerDemo />
diff --git a/apps/docs/en/components/robot-chat.md b/apps/docs/en/components/robot-chat.md
index 43abf7e3..dbedac44 100644
--- a/apps/docs/en/components/robot-chat.md
+++ b/apps/docs/en/components/robot-chat.md
@@ -2,16 +2,13 @@
 
 `VRobotChat` is a Wevu wrapper for the `chatbotwidget` Mini Program plugin. It supports only the `weapp` target and provides initialization states, event forwarding, and an editable input area.
 
-<RegistryInstallStrip item="components/robot-chat" :targets="['weapp']" :wrapper-targets="[]" locale="en" />
-
 ## Demo
 
 <RobotChatDemo locale="en" />
 
 The docs site cannot load chatbotwidget. This demo shows welcome text, the operate card, send, and `queryCallback`. It is the Web Preview host, not WeChat Dialog Open Platform.
 
-## App configuration
-
+::: warning Mini-program configuration
 Enable the plugin for the Mini Program, then declare it under the fixed `varoRobot` alias in `app.json`:
 
 ```json
@@ -26,6 +23,7 @@ Enable the plugin for the Mini Program, then declare it under the fixed `varoRob
 ```
 
 Use the plugin version enabled for the Mini Program. See the [chatbotwidget plugin documentation](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx8c631f7e9f2465e1) for configuration details.
+:::
 
 ## Usage
 
diff --git a/apps/docs/en/components/searchbar.md b/apps/docs/en/components/searchbar.md
index d3f30363..2d803998 100644
--- a/apps/docs/en/components/searchbar.md
+++ b/apps/docs/en/components/searchbar.md
@@ -1,7 +1,5 @@
 # Searchbar
 
-<RegistryInstallStrip item="components/searchbar" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="searchbar" locale="en" />
diff --git a/apps/docs/en/components/select.md b/apps/docs/en/components/select.md
index 3f360d9d..8fc0cfe9 100644
--- a/apps/docs/en/components/select.md
+++ b/apps/docs/en/components/select.md
@@ -2,8 +2,6 @@
 
 `VSelect` is the low-level Base Kit select component for forms, filters, and secondary business wrappers. The H5 / full Vue wrapper and the native Registry component installed by `--target weapp` target different runtimes; use the API section for the version you consume.
 
-<RegistryInstallStrip item="components/select" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="select" locale="en" />
@@ -93,6 +91,6 @@ While open, the selected label uses the muted text color until search input star
 
 Native Registry Weapp does not provide `mode`, `max`, `confirmable`, `filterOption`, `loading`, or `emptyText`, and it does not emit `valueChange`, `open`, `close`, `confirm`, `cancel`, or `limit`.
 
-## Wrapper Boundary
-
+::: info Wrapper boundary
 Grouped options, remote search, and async paging belong in secondary wrappers. Business components should wrap `VSelect` to create `UserSelect`, `DepartmentSelect`, `CitySelect`, and `ProductSelect`.
+:::
diff --git a/apps/docs/en/components/short-password.md b/apps/docs/en/components/short-password.md
index 741169cb..4a9d9ce3 100644
--- a/apps/docs/en/components/short-password.md
+++ b/apps/docs/en/components/short-password.md
@@ -1,7 +1,5 @@
 # ShortPassword
 
-<RegistryInstallStrip item="components/short-password" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="short-password" locale="en" />
diff --git a/apps/docs/en/components/side-navbar.md b/apps/docs/en/components/side-navbar.md
index 62ab90bb..58a125c5 100644
--- a/apps/docs/en/components/side-navbar.md
+++ b/apps/docs/en/components/side-navbar.md
@@ -1,7 +1,5 @@
 # SideNavbar
 
-<RegistryInstallStrip item="components/side-navbar" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="side-navbar" locale="en" />
diff --git a/apps/docs/en/components/signature.md b/apps/docs/en/components/signature.md
new file mode 100644
index 00000000..12579688
--- /dev/null
+++ b/apps/docs/en/components/signature.md
@@ -0,0 +1,31 @@
+# Signature
+
+`VSignature` uses normalized stroke data as its cross-target controlled value. H5 uses pointer canvas input; mini-program uses native canvas touch events.
+
+## Demo
+
+<SignatureDemo locale="en" />
+
+## Props
+
+| Prop         | Type                | Default           | Description               |
+| ------------ | ------------------- | ----------------- | ------------------------- |
+| `value`      | `SignatureStroke[]` | `[]`              | Controlled signature      |
+| `disabled`   | `boolean`           | `false`           | Disable drawing and clear |
+| `height`     | `number`            | `200`             | Canvas height             |
+| `lineColor`  | `string`            | `'#172033'`       | Stroke color              |
+| `lineWidth`  | `number`            | `2`               | Stroke width              |
+| `background` | `string`            | `'#ffffff'`       | Canvas background         |
+| `showClear`  | `boolean`           | `true`            | Show the clear action     |
+| `clearText`  | `string`            | `'清除签名'`      | Clear action label        |
+| `ariaLabel`  | `string`            | `'Signature pad'` | Canvas accessible name    |
+
+## Events
+
+| Event          | Payload             | Description         |
+| -------------- | ------------------- | ------------------- |
+| `update:value` | `SignatureStroke[]` | Commit strokes      |
+| `change`       | `SignatureStroke[]` | Signature changed   |
+| `start`        | `void`              | Stroke started      |
+| `end`          | `SignatureStroke`   | Stroke completed    |
+| `clear`        | `void`              | All strokes cleared |
diff --git a/apps/docs/en/components/skeleton.md b/apps/docs/en/components/skeleton.md
index 97ab79f3..6f4d7e8f 100644
--- a/apps/docs/en/components/skeleton.md
+++ b/apps/docs/en/components/skeleton.md
@@ -2,8 +2,6 @@
 
 `VSkeleton` waits `180ms` before showing placeholders by default, preventing flashes on short requests. It covers article, image, and video layouts, then fades loaded slot content in.
 
-<RegistryInstallStrip item="components/skeleton" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="skeleton" locale="en" />
@@ -42,8 +40,9 @@ For mini-programs, replace `vue` and `@varo-ui/h5` with `wevu` and `@varo-ui/wea
 | `rows`        | `number`                       | `3`        | Number of content rows; negative values normalize to `0`                     |
 | `round`       | `boolean`                      | `false`    | Uses pill radii for title and content rows                                   |
 
-## Accessibility and motion
+::: info Accessibility and motion
 
 - Loading state exposes `aria-busy="true"` and a Loading name.
 - `loading=false` removes placeholders and fades real content according to `contentFade`.
 - Global `prefers-reduced-motion` disables both shimmer and content-fade motion.
+  :::
diff --git a/apps/docs/en/components/space.md b/apps/docs/en/components/space.md
index 48006155..d8949046 100644
--- a/apps/docs/en/components/space.md
+++ b/apps/docs/en/components/space.md
@@ -1,7 +1,5 @@
 # Space
 
-<RegistryInstallStrip item="components/space" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="space" locale="en" />
diff --git a/apps/docs/en/components/sticky.md b/apps/docs/en/components/sticky.md
index 8c242e85..e6ae8c8f 100644
--- a/apps/docs/en/components/sticky.md
+++ b/apps/docs/en/components/sticky.md
@@ -1,7 +1,5 @@
 # Sticky
 
-<RegistryInstallStrip item="components/sticky" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="sticky" locale="en" />
@@ -63,6 +61,6 @@
 | --------- | -------------------------------------- |
 | `default` | Sticky content, with `fixed` slot prop |
 
-## Primitives
-
+::: info Primitives
 `Sticky` has scroll state and events, so H5 and Weapp expose a `StickyRoot` primitive. `Divider`, `Grid`, `Layout`, and `Space` are static display/layout components implemented directly in the UI packages.
+:::
diff --git a/apps/docs/en/components/switch.md b/apps/docs/en/components/switch.md
index 9999e60d..80d09524 100644
--- a/apps/docs/en/components/switch.md
+++ b/apps/docs/en/components/switch.md
@@ -2,12 +2,14 @@
 
 `VSwitch` is a low-level boolean toggle for settings and form fields.
 
-<RegistryInstallStrip item="components/switch" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="switch" locale="en" />
 
+::: info Motion
+The thumb uses a reversible 180ms translation. Holding the control briefly stretches the thumb along its travel direction; release or rapid reversal retargets from the current visual state. Reduced motion keeps only the immediate position change.
+:::
+
 ## Props
 
 | Prop         | Type      | Default | Description    |
diff --git a/apps/docs/en/components/tabbar.md b/apps/docs/en/components/tabbar.md
index 59f55cd7..228d9b6b 100644
--- a/apps/docs/en/components/tabbar.md
+++ b/apps/docs/en/components/tabbar.md
@@ -1,7 +1,5 @@
 # Tabbar
 
-<RegistryInstallStrip item="components/tabbar" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="tabbar" locale="en" />
diff --git a/apps/docs/en/components/tabs.md b/apps/docs/en/components/tabs.md
index 93e58f81..4f8e6f8b 100644
--- a/apps/docs/en/components/tabs.md
+++ b/apps/docs/en/components/tabs.md
@@ -1,7 +1,5 @@
 # Tabs
 
-<RegistryInstallStrip item="components/tabs" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <PlatformTabsDemo example="tabs" locale="en" />
diff --git a/apps/docs/en/components/textarea.md b/apps/docs/en/components/textarea.md
index f391cd53..df838665 100644
--- a/apps/docs/en/components/textarea.md
+++ b/apps/docs/en/components/textarea.md
@@ -1,7 +1,5 @@
 # Textarea
 
-<RegistryInstallStrip item="components/textarea" :targets="['h5', 'weapp']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="textarea" locale="en" />
diff --git a/apps/docs/en/components/toast.md b/apps/docs/en/components/toast.md
index 3306b2b2..b6f9b687 100644
--- a/apps/docs/en/components/toast.md
+++ b/apps/docs/en/components/toast.md
@@ -1,31 +1,40 @@
 # Toast
 
-`VToast` is a controlled low-level toast component. Queues, global APIs, and request integration belong in secondary wrappers.
-
-<RegistryInstallStrip item="components/toast" :targets="['h5', 'weapp']" locale="en" />
+`VToast` owns one controlled status message. `VToastRegion` lays out multiple notifications in a fixed or inline region. The caller still owns queue state, auto-dismiss timers, and request integration.
 
 ## Demo
 
-<FormComponentDemo example="toast" locale="en" />
+<ToastDemo locale="en" />
+
+## VToast Props
 
-## Props
+| Prop          | Type                                                        | Default      | Description                   |
+| ------------- | ----------------------------------------------------------- | ------------ | ----------------------------- |
+| `visible`     | `boolean`                                                   | `false`      | Whether the toast is visible  |
+| `message`     | `string`                                                    | `''`         | Supporting message            |
+| `title`       | `string`                                                    | —            | Optional title                |
+| `type`        | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'`     | Status type                   |
+| `position`    | `'top' \| 'middle' \| 'bottom'`                             | `'middle'`   | Position when used standalone |
+| `actionText`  | `string`                                                    | —            | Optional action label         |
+| `actionLabel` | `string`                                                    | action text  | Accessible action name        |
+| `closeable`   | `boolean`                                                   | `false`      | Show the close button         |
+| `closeLabel`  | `string`                                                    | `'关闭通知'` | Accessible close name         |
 
-| Prop         | Type                                                        | Default      | Description                          |
-| ------------ | ----------------------------------------------------------- | ------------ | ------------------------------------ |
-| `visible`    | `boolean`                                                   | `false`      | Visibility                           |
-| `message`    | `string`                                                    | `''`         | Message text                         |
-| `type`       | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'`     | Toast type                           |
-| `position`   | `'top' \| 'middle' \| 'bottom'`                             | `'middle'`   | Position                             |
-| `closeable`  | `boolean`                                                   | `false`      | Show close button                    |
-| `closeLabel` | `string`                                                    | `'关闭通知'` | Accessible name for the close button |
+## VToastRegion Props
 
-## Motion and accessibility
+| Prop       | Type                            | Default | Description                    |
+| ---------- | ------------------------------- | ------- | ------------------------------ |
+| `position` | `'top' \| 'middle' \| 'bottom'` | `'top'` | Fixed-region position          |
+| `inline`   | `boolean`                       | `false` | Render in normal document flow |
 
-Toast uses a 220ms entrance and 160ms exit transition with position-aware movement. Under `prefers-reduced-motion: reduce`, it falls back to an immediate opacity change. Success and neutral feedback use `status`; warnings and errors use `alert`.
+::: info Motion and accessibility
+Toast motion resolves through theme tokens: 220ms enter, 160ms exit, and 180ms status changes. Updating `type`, `title`, and `message` on the same instance changes its status in place; product state never depends on animation completion. Under `prefers-reduced-motion: reduce`, spatial movement is removed. Success and neutral feedback use `status`; warning and danger use `alert`.
+:::
 
 ## Events
 
-| Event            | Payload   | Description        |
-| ---------------- | --------- | ------------------ |
-| `update:visible` | `boolean` | Visibility updated |
-| `close`          | `void`    | Closed             |
+| Event            | Payload   | Description               |
+| ---------------- | --------- | ------------------------- |
+| `update:visible` | `boolean` | Visibility update         |
+| `close`          | `void`    | Dismissed                 |
+| `action`         | `void`    | Optional action activated |
diff --git a/apps/docs/en/components/uploader.md b/apps/docs/en/components/uploader.md
index d5b86935..ad73000d 100644
--- a/apps/docs/en/components/uploader.md
+++ b/apps/docs/en/components/uploader.md
@@ -1,7 +1,5 @@
 # Uploader
 
-<RegistryInstallStrip item="components/uploader" :targets="['h5']" locale="en" />
-
 ## Demo
 
 <FormComponentDemo example="uploader" locale="en" />
diff --git a/apps/docs/en/components/watermark.md b/apps/docs/en/components/watermark.md
new file mode 100644
index 00000000..bc018769
--- /dev/null
+++ b/apps/docs/en/components/watermark.md
@@ -0,0 +1,29 @@
+# Watermark
+
+`VWatermark` places an inaccessible, non-interactive repeated text layer over container content. The overlay never intercepts pointer input, making it suitable for document previews, approvals, and sensitive data.
+
+A watermark is a visual marker, not a substitute for access control, encryption, or tamper resistance.
+
+## Demo
+
+<WatermarkDemo locale="en" />
+
+## Props
+
+| Prop         | Type               | Default     | Description                              |
+| ------------ | ------------------ | ----------- | ---------------------------------------- |
+| `content`    | `string`           | `'Varo'`    | Repeated text; empty content hides it    |
+| `color`      | `string`           | `'#172033'` | Text color                               |
+| `opacity`    | `number`           | `0.12`      | Opacity clamped to 0–1                   |
+| `rotate`     | `number`           | `-22`       | Rotation in degrees                      |
+| `fontSize`   | `number`           | `14`        | Font size in px, minimum 1               |
+| `fontWeight` | `number \| string` | `500`       | Font weight                              |
+| `gapX`       | `number`           | `160`       | Horizontal tile width in px, minimum 24  |
+| `gapY`       | `number`           | `96`        | Vertical tile height in px, minimum 24   |
+| `offsetX`    | `number`           | `0`         | Horizontal px phase normalized by `gapX` |
+| `offsetY`    | `number`           | `0`         | Vertical px phase normalized by `gapY`   |
+| `zIndex`     | `number`           | `9`         | Overlay stacking level in the container  |
+
+Rows stretch evenly across tall containers, preserving watermark coverage from top to bottom while using `gapY` as the minimum tile height.
+
+The default slot carries the protected content. H5 accepts consumer styles through `class`; the mini-program Registry SFC uses `className`.
diff --git a/apps/docs/en/guide/installation.md b/apps/docs/en/guide/installation.md
index ada98b36..26b3ff17 100644
--- a/apps/docs/en/guide/installation.md
+++ b/apps/docs/en/guide/installation.md
@@ -75,14 +75,6 @@ Copy-owned mini-program Registry components use native Wevu SFCs and consume Tai
 
 ## Preview mini-program artifacts in a browser
 
-Start the standalone Web compatibility preview from the Varo repository root:
-
-```bash
-pnpm --filter @varo/playground-weapp-preview dev
-```
-
-The development command builds the mini program first, then serves button, controlled-input, slot/lifecycle, and Agent scenarios at `http://127.0.0.1:5182`. After changing native examples, run `pnpm --filter @varo/playground-weapp-preview prepare:artifacts` to refresh their compiled artifacts.
-
 The wx runtime now lives in the private `@varo/weapp-web` package: a Vite plugin compiles Wevu artifacts into `virtual:varo-native-artifacts`, and a replaceable harness owns `wx` APIs and native elements. The playground is only a sandbox consumer; the package is not published yet. The host runs Wevu-generated JS, JSON, WXML, and WXSS through glass-easel's DOM backend rather than substituting H5 business components. Narrow windows scale the presentation while preserving the selected native viewport width. **This is not a WeChat-client or device emulator.** Unsupported capabilities such as login and payment fail explicitly instead of returning fabricated success.
 
 Build and verify the production surface:
diff --git a/apps/docs/en/primitives/accordion.md b/apps/docs/en/primitives/accordion.md
index fd90c52c..5f53670f 100644
--- a/apps/docs/en/primitives/accordion.md
+++ b/apps/docs/en/primitives/accordion.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="accordion" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Multiple mode
 
@@ -67,13 +59,8 @@ With `type="multiple"`, value is an array; item values must stay unique.
 - Item value associates Trigger/Content.
 - Disabled items cannot expand.
 
-## Platform notes
+::: info Platform notes
 
 - Both runtimes share single/multiple contracts.
 - Motion and icons belong to UI wrappers.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/button.md b/apps/docs/en/primitives/button.md
index bb3f14a1..0ab07ff7 100644
--- a/apps/docs/en/primitives/button.md
+++ b/apps/docs/en/primitives/button.md
@@ -10,19 +10,6 @@ The `usePressableRoot` machine comes from `@varo-ui/headless`; H5 and mini-progr
 
 <PrimitiveExample name="button" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Buttons, icon buttons, and clickable cards need one activation gate.
-- UI wrappers add visual tokens instead of rewriting interaction state.
-
 ## Parts
 
 | Part         | Role                                              |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`disabled`, `loading`, `size`, and `variant`
 - Events：`click`, plus `data-pressed` / `data-loading` state.
 
-## Platform notes
-
+::: info Platform notes
 H5 uses native button and keyboard activation; Weapp adapts tap and pressed feedback.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/cell.md b/apps/docs/en/primitives/cell.md
index 24a6eccc..8b586f41 100644
--- a/apps/docs/en/primitives/cell.md
+++ b/apps/docs/en/primitives/cell.md
@@ -10,19 +10,6 @@ H5 and Weapp adapters keep the same public API; keyboard and navigation details
 
 <PrimitiveExample name="cell" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Mobile products rely heavily on consistent information and settings rows.
-- Title, description, icon, and link affordance keep one structure.
-
 ## Parts
 
 | Part            | Role                                        |
@@ -35,11 +22,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`clickable`, `isLink`, `to`, `size`, and `center`
 - Events：`click`.
 
-## Platform notes
-
+::: info Platform notes
 H5 adds Enter/Space for clickable non-links; Weapp uses native tap.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/checkbox.md b/apps/docs/en/primitives/checkbox.md
index ce792fed..8e8b7da9 100644
--- a/apps/docs/en/primitives/checkbox.md
+++ b/apps/docs/en/primitives/checkbox.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="checkbox" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Disabled state
 
@@ -55,13 +47,8 @@ When `disabled` is set, `checkedChange` no longer fires. Indicator may still ref
 - Indicator is not the click target.
 - Disabled state must not emit checked changes.
 
-## Platform notes
+::: info Platform notes
 
 - H5 can be previewed live in docs.
 - Mini-program keeps the same `v-model:checked` and part composition; focus details stay page-owned.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/collapsible.md b/apps/docs/en/primitives/collapsible.md
index f518196f..e50e0349 100644
--- a/apps/docs/en/primitives/collapsible.md
+++ b/apps/docs/en/primitives/collapsible.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="collapsible" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Controlled open
 
@@ -55,13 +47,8 @@ Use `v-model:open` when routing/analytics need ownership; height animation stays
 - Trigger controls open.
 - Disabled state does not toggle.
 
-## Platform notes
+::: info Platform notes
 
 - Both runtimes share the open contract.
 - Motion stays outside the primitive.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/dialog.md b/apps/docs/en/primitives/dialog.md
index 414be16d..63a7680a 100644
--- a/apps/docs/en/primitives/dialog.md
+++ b/apps/docs/en/primitives/dialog.md
@@ -10,19 +10,6 @@ Modal interaction foundation composed from Root, Trigger, Overlay, Content, and
 
 <PrimitiveExample name="dialog" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Confirmation, approval, and high-risk actions need explicit entry and exit.
-- Separate Overlay and Content adapt cleanly to each runtime.
-
 ## Parts
 
 | Part            | Role                   |
@@ -82,11 +69,6 @@ const dialog = useDialogRoot({
 
 After cancellation, uncontrolled state is not written and adapters do not emit `update:open`. When `open` is provided, that prop remains authoritative: an allowed request changes visibility only after the parent applies the next prop. If the parent changes the prop independently after a canceled request, the component still follows the prop.
 
-## Platform notes
-
+::: info Platform notes
 The H5 adapter supports overlay close, Escape, focus trapping, background `inert`, and Trigger focus restoration. The native WeChat mini-program runtime has no browser `document` keyboard events or DOM focus/inert/portal semantics, so native Weapp uses explicit Close and overlay paths. The repository's current Vue-modeled Weapp adapter maps Escape to `escape-key` when it runs on a browser/test surface with `document`; that modeled behavior does not promise keyboard or DOM focus capabilities in native WeChat. The reason/cancel state contract remains the same on both surfaces.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/image.md b/apps/docs/en/primitives/image.md
index cbc94b5f..36329056 100644
--- a/apps/docs/en/primitives/image.md
+++ b/apps/docs/en/primitives/image.md
@@ -10,19 +10,6 @@ Image-state foundation that aligns loading, loaded, error, fit, sizing, and plac
 
 <PrimitiveExample name="image" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Avatars, product media, and generated images need stable load and failure states.
-- Wrappers or slots own placeholder and error visuals.
-
 ## Parts
 
 | Part        | Role                                                  |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`src`, `fit`, `width`, `height`, `round`, and `lazyLoad`
 - Events：`load`, `error`, and `click`.
 
-## Platform notes
-
+::: info Platform notes
 State aligns across targets; image elements, lazy loading, and fit stay runtime-owned.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/index.md b/apps/docs/en/primitives/index.md
index 48317158..bf4df878 100644
--- a/apps/docs/en/primitives/index.md
+++ b/apps/docs/en/primitives/index.md
@@ -1,64 +1,25 @@
 # Primitives
 
-Primitives are not another UI kit inventory. They are Varo runtime contracts for state, triggers, overlays, positioning, and dismiss behavior so H5 and mini-program wrappers share the same interaction semantics. Presentation components stay in the component docs; this section keeps the behavior building blocks.
+Cross-target unstyled interaction contracts: `@varo-ui/headless` owns state; target primitives own rendering.
 
-<div class="varo-primitive-stack">
-  <section>
-    <span>01</span>
-    <h2>Runtime contract</h2>
-    <p>Root owns state and context, Trigger owns entry, Content/Overlay owns the visible layer, and Close owns exit. Platforms may change rendering details, not the contract.</p>
-  </section>
-  <section>
-    <span>02</span>
-    <h2>Composition order</h2>
-    <p>Place Root first, then Trigger, then Overlay and Content. Stable composition keeps business blocks consistent across H5 and mini-programs.</p>
-  </section>
-  <section>
-    <span>03</span>
-    <h2>Controlled and uncontrolled</h2>
-    <p>Use internal state for local UI. Switch to controlled mode when routing, analytics, or form coordination needs an external source of truth.</p>
-  </section>
-</div>
+## Install
 
-## Catalog
+```bash
+# H5
+pnpm add @varo-ui/headless @varo-ui/h5
 
-Browse the current 17 public primitives by capability. Every page includes an H5 live preview, a mini-program runtime contract, copyable code, and API reference.
+# Mini Program
+pnpm add @varo-ui/headless @varo-ui/weapp
+```
 
-<PrimitiveCatalog locale="en" />
+::: info Mini Program setup
+See [Wevu Registry](/en/guide/shadcn-mode) for global styles and Tailwind configuration.
+:::
 
-## Next foundational candidates
+## Runtime
 
-More primitives are not automatically better. A behavior moves down only when state, keyboard/touch interaction, or dismiss logic would otherwise be repeated by several components.
-
-| Candidate               | Enables                                       | Why it belongs below UI                        |
-| ----------------------- | --------------------------------------------- | ---------------------------------------------- |
-| `Tooltip`               | Tooltips, chart hints, truncated-copy help    | Delayed open, hover/focus, and dismiss policy  |
-| `Menu` / `DropdownMenu` | Dropdown, context, and action menus           | Roving focus, arrow keys, and item activation  |
-| `ToggleGroup`           | Segmented controls, formatting bars, filters  | Single/multiple selection and roving focus     |
-| `Slider`                | Volume, range, and parameter controls         | Bounds, step, keyboard, and drag state         |
-| `Combobox` / `Listbox`  | Search select, remote select, command palette | Input, filtering, active option, and selection |
-| `Toast`                 | Global feedback, async results, undo          | Queue, lifecycle, pause, and dismiss behavior  |
-
-Prioritize `Menu`, `Tooltip`, `ToggleGroup`, and `Slider`, then evaluate `Combobox` and `Toast`; their cross-runtime input models need explicit H5 and mini-program boundaries first.
-
-## Product boundaries
-
-- **Primitives** own behavior contracts: controlled/uncontrolled state, disabled rules, ARIA, `data-*` attributes, and dismiss events.
-- **UI wrappers** own visuals and positioning: tokens, motion, icons, floating placement, and platform rendering details.
-- **Business wrappers** own data and product policy: remote search, permissions, pagination, domain models, and copy.
-
-This split keeps Base Kit source readable and editable. Teams can build their own UI packages on the same primitives without forking state machines.
-
-## Authoring rules
-
-- H5 and mini-program share the same part names and state model.
-- Values inside one `TabsRoot` / `AccordionRoot` must stay unique.
-- Mini-program docs never pretend a browser render is a real mini-program preview; they use a runtime contract table instead.
-- Build custom product UI upward from primitives, or continue with the [component docs](/en/components/button) and the upcoming Blocks authoring guide.
-
-## Related docs
-
-- [Installation](/en/guide/installation)
-- [Theme](/en/guide/theme)
-- [Components](/en/components/button)
-- [Examples](/en/examples/)
+| Package                     | Responsibility                    |
+| --------------------------- | --------------------------------- |
+| `@varo-ui/headless`         | Platform-neutral state and events |
+| `@varo-ui/h5/primitives`    | DOM, keyboard, and ARIA           |
+| `@varo-ui/weapp/primitives` | WXML, touch, and native events    |
diff --git a/apps/docs/en/primitives/input.md b/apps/docs/en/primitives/input.md
index 70066e01..69dc0a70 100644
--- a/apps/docs/en/primitives/input.md
+++ b/apps/docs/en/primitives/input.md
@@ -10,19 +10,6 @@ Text-input foundation for controlled values, formatting, readonly, invalid state
 
 <PrimitiveExample name="input" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Every form field needs one value and invalid contract.
-- Business wrappers can reuse formatter timing without replacing the primitive.
-
 ## Parts
 
 | Part        | Role                                              |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`value`, `defaultValue`, `disabled`, `readonly`, and `invalid`
 - Events：`update:value`, `valueChange`, `focus`, and `blur`.
 
-## Platform notes
-
+::: info Platform notes
 H5 supports textarea autosize; Weapp preserves the public contract on native inputs.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/number-field.md b/apps/docs/en/primitives/number-field.md
index 609cde1b..25d47c00 100644
--- a/apps/docs/en/primitives/number-field.md
+++ b/apps/docs/en/primitives/number-field.md
@@ -10,19 +10,6 @@ Numeric-input foundation where Root owns bounds, step, and precision while contr
 
 <PrimitiveExample name="number-field" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Quantity, currency, and rating controls need reliable min/max/step behavior.
-- Separate parts allow product-specific layouts and icons.
-
 ## Parts
 
 | Part                   | Role                          |
@@ -37,11 +24,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`value`, `min`, `max`, `step`, `precision`, and `readonly`
 - Events：`update:value` and `valueChange`.
 
-## Platform notes
-
+::: info Platform notes
 Bounds and precision align across targets; native input events stay runtime-owned.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/overlay.md b/apps/docs/en/primitives/overlay.md
index 9f99e877..3a420fa9 100644
--- a/apps/docs/en/primitives/overlay.md
+++ b/apps/docs/en/primitives/overlay.md
@@ -10,19 +10,6 @@ Overlay foundation aligning visibility, click dismiss, layering, duration, and s
 
 <PrimitiveExample name="overlay" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Popups, drawers, and modals all need one overlay behavior.
-- A standalone Overlay prevents duplicated dismiss logic.
-
 ## Parts
 
 | Part          | Role                                          |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`visible`, `defaultVisible`, `lockScroll`, and `closeOnClickOverlay`
 - Events：`update:visible`, `visibleChange`, `close`, and `click`.
 
-## Platform notes
-
+::: info Platform notes
 H5 locks body; Weapp handles scrolling through page capabilities.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/popover.md b/apps/docs/en/primitives/popover.md
index b85a1986..2e72c6dc 100644
--- a/apps/docs/en/primitives/popover.md
+++ b/apps/docs/en/primitives/popover.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="popover" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Dismiss contract
 
@@ -56,13 +48,8 @@ H5 may handle Escape/outside click; mini-programs lack browser `document`, so pr
 - Close provides explicit exit.
 - Disabled state does not open.
 
-## Platform notes
+::: info Platform notes
 
 - H5 and mini-program share open/close contracts.
 - Placement, collision, and portal stay in UI wrappers.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/popup.md b/apps/docs/en/primitives/popup.md
index ea8f3f3f..3e00440a 100644
--- a/apps/docs/en/primitives/popup.md
+++ b/apps/docs/en/primitives/popup.md
@@ -10,19 +10,6 @@ Popup foundation combining overlay, placement, close behavior, safe area, and de
 
 <PrimitiveExample name="popup" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Bottom sheets, drawers, and action panels share one visible contract.
-- Decoupled position and overlay support more UI wrappers.
-
 ## Parts
 
 | Part        | Role                                               |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`visible`, `position`, `overlay`, `closeable`, `round`, and `destroyOnClose`
 - Events：`update:visible`, `visibleChange`, `close`, and `clickOverlay`.
 
-## Platform notes
-
+::: info Platform notes
 Weapp safe area and H5 viewport adapt separately while public state stays aligned.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/radio-group.md b/apps/docs/en/primitives/radio-group.md
index 6833cdb9..303d9f9b 100644
--- a/apps/docs/en/primitives/radio-group.md
+++ b/apps/docs/en/primitives/radio-group.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="radio-group" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Disabled item
 
@@ -66,13 +58,8 @@ Set `disabled` on `RadioItem` to keep the group value contract while blocking on
 - Disabled items cannot be selected.
 - Indicator reflects state only.
 
-## Platform notes
+::: info Platform notes
 
 - H5 and mini-program share the value/disabled contract.
 - Mini-program keyboard focus stays page-owned.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/select.md b/apps/docs/en/primitives/select.md
index 515e02b6..39af2445 100644
--- a/apps/docs/en/primitives/select.md
+++ b/apps/docs/en/primitives/select.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="select" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Groups, Readonly, And Disabled
 
@@ -75,13 +67,8 @@ Use `SelectGroup/SelectLabel` for grouping. In `readonly`, the component can sti
 - Item performs selection; readonly/disabled must not change value.
 - The role owner exposes `aria-readonly` without reporting readonly as disabled.
 
-## Platform notes
+::: info Platform notes
 
 - H5 can preview open/select live.
 - Mini-program placement and portal strategy stay in the wrapper layer.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/sticky.md b/apps/docs/en/primitives/sticky.md
index 2bf67f95..c9911e34 100644
--- a/apps/docs/en/primitives/sticky.md
+++ b/apps/docs/en/primitives/sticky.md
@@ -10,19 +10,6 @@ H5 and Weapp adapters align state and event names; each runtime owns its scrolli
 
 <PrimitiveExample name="sticky" locale="en" />
 
-## Install
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## Why this is foundational
-
-- Filter bars, section headers, and action bars often need sticky behavior.
-- The fixed state can drive borders, shadows, and analytics.
-
 ## Parts
 
 | Part         | Role                                                    |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - State：`offsetTop`, `zIndex`, `disabled`, and `data-fixed`
 - Events：`change` and `scroll`.
 
-## Platform notes
-
+::: info Platform notes
 H5 observes window scroll; Weapp binds page or scroll-container state.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Component docs](/en/components/button)
+:::
diff --git a/apps/docs/en/primitives/switch.md b/apps/docs/en/primitives/switch.md
index 3bea81d3..a2d4623b 100644
--- a/apps/docs/en/primitives/switch.md
+++ b/apps/docs/en/primitives/switch.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="switch" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Loading
 
@@ -55,13 +47,8 @@ Both `loading` and `disabled` close interaction; loading fits short async locks.
 - Root defaults to button semantics.
 - Loading/disabled states are not toggleable.
 
-## Platform notes
+::: info Platform notes
 
 - Both runtimes share checked/loading contracts.
 - Track visuals and motion belong to UI wrappers.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+  :::
diff --git a/apps/docs/en/primitives/tabs.md b/apps/docs/en/primitives/tabs.md
index 02834090..67b0f8ae 100644
--- a/apps/docs/en/primitives/tabs.md
+++ b/apps/docs/en/primitives/tabs.md
@@ -10,17 +10,9 @@ State contracts come from `@varo-ui/headless`; rendered parts come from `@varo-u
 
 <PrimitiveExample name="tabs" locale="en" />
 
-## Installation
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# or
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## Basic usage
 
-Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code.
+Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
 
 ## Controlled unique values
 
@@ -68,13 +60,8 @@ Trigger/Content values must stay unique inside one `TabsRoot`; H5 automatic mode
 - H5 supports arrows/Home/End.
 - Weapp keeps ARIA and value association without browser focus simulation.
 
-## Platform notes
+::: info Platform notes
 
 - H5 can demonstrate keyboard behavior.
-- Mini-program docs show a runtime contract, not a fake device preview.
-
-## Related docs
-
-- [Primitives overview](/en/primitives/)
-- [Components](/en/components/button)
-- [Blocks](/en/blocks/profile-edit)
+- The mini-program tab uses the Weapp primitive runtime to render the current Tabs entry.
+  :::
diff --git a/apps/docs/guide/installation.md b/apps/docs/guide/installation.md
index 11fde709..ef010b64 100644
--- a/apps/docs/guide/installation.md
+++ b/apps/docs/guide/installation.md
@@ -75,14 +75,6 @@ copy-owned 小程序 Registry 组件使用真正的 Wevu SFC，并通过 `styleI
 
 ## 在浏览器预览小程序产物
 
-在 Varo 仓库根目录启动独立的 Web 兼容预览：
-
-```bash
-pnpm --filter @varo/playground-weapp-preview dev
-```
-
-开发服务先构建小程序，再在 `http://127.0.0.1:5182` 提供按钮、受控输入、插槽生命周期和 Agent 内容场景。修改原生示例后，可运行 `pnpm --filter @varo/playground-weapp-preview prepare:artifacts` 更新编译产物。
-
 wx 运行时已抽到私有包 `@varo/weapp-web`：Vite 插件负责把 Wevu 产物编进 `virtual:varo-native-artifacts`，运行时 harness 可替换 `wx` API 和原生元素。当前 playground 只是这个包的沙盒消费者；包暂不对外发布。该宿主使用 glass-easel 的 DOM 后端运行 Wevu 生成的 JS、JSON、WXML 和 WXSS，不会换成 H5 业务组件。窄窗口会缩放预览画面，但保留选定的原生视口宽度。**这不是微信客户端或真机模拟器**；登录、支付等未支持能力会失败，不会伪造成功结果。
 
 生产构建与真实浏览器回归：
diff --git a/apps/docs/primitives/accordion.md b/apps/docs/primitives/accordion.md
index 6f3897c2..259fa46c 100644
--- a/apps/docs/primitives/accordion.md
+++ b/apps/docs/primitives/accordion.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="accordion" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## multiple 模式
 
@@ -67,13 +59,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - Item value 关联 Trigger/Content。
 - disabled item 不可展开。
 
-## 平台说明
+::: info 平台差异
 
 - 双端共享 single/multiple 契约。
 - 动画与图标属于 UI wrapper。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/button.md b/apps/docs/primitives/button.md
index c5995dc5..2181e546 100644
--- a/apps/docs/primitives/button.md
+++ b/apps/docs/primitives/button.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="button" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 按钮、图标按钮和可点击卡片都需要一致的禁用与按压语义。
-- UI wrapper 只需增加视觉 token，不再重写事件门禁。
-
 ## Parts
 
 | Part         | 作用                                   |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`disabled`、`loading`、`size`、`variant`
 - 事件：`click`；并输出 `data-pressed` / `data-loading`。
 
-## 平台说明
-
+::: info 平台差异
 H5 使用原生 button/键盘激活；小程序适配 tap 与原生按压反馈。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/cell.md b/apps/docs/primitives/cell.md
index 4efd5507..325f08d9 100644
--- a/apps/docs/primitives/cell.md
+++ b/apps/docs/primitives/cell.md
@@ -10,19 +10,6 @@ H5 与小程序 adapters 保持相同公开 API；键盘和导航细节由目标
 
 <PrimitiveExample name="cell" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 移动端业务大量依赖统一的信息行与设置项。
-- 标题、描述、图标和链接提示保持结构稳定。
-
 ## Parts
 
 | Part            | 作用                       |
@@ -35,11 +22,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`clickable`、`isLink`、`to`、`size`、`center`
 - 事件：`click`。
 
-## 平台说明
-
+::: info 平台差异
 H5 为可点击非链接行补充 Enter/Space；小程序使用原生点击。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/checkbox.md b/apps/docs/primitives/checkbox.md
index 67d68e85..9d9ce168 100644
--- a/apps/docs/primitives/checkbox.md
+++ b/apps/docs/primitives/checkbox.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="checkbox" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## 禁用态
 
@@ -55,13 +47,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - Indicator 不单独承接点击。
 - disabled 时不应触发 checked 变化。
 
-## 平台说明
+::: info 平台差异
 
 - H5 可在文档中实时预览。
 - 小程序保持相同 `v-model:checked` 与 part 组合；焦点细节由页面容器处理。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/collapsible.md b/apps/docs/primitives/collapsible.md
index 27ef2695..de79048d 100644
--- a/apps/docs/primitives/collapsible.md
+++ b/apps/docs/primitives/collapsible.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="collapsible" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## 受控展开
 
@@ -55,13 +47,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - Trigger 控制 open。
 - disabled 时不切换。
 
-## 平台说明
+::: info 平台差异
 
 - 双端共享 open 契约。
 - 动画与过渡不进入 primitive。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/dialog.md b/apps/docs/primitives/dialog.md
index dc08e064..10d72d5e 100644
--- a/apps/docs/primitives/dialog.md
+++ b/apps/docs/primitives/dialog.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="dialog" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 确认、审批和高风险操作需要明确的进入与退出契约。
-- 拆分 Overlay 和 Content 可适配不同平台渲染。
-
 ## Parts
 
 | Part            | 作用              |
@@ -82,11 +69,6 @@ const dialog = useDialogRoot({
 
 取消后，非受控 state 不写入，adapter 也不发出 `update:open`。传入 `open` 时该 prop 始终是最终事实来源：未取消的请求仍需上层应用新 prop 才会改变可见状态；即使请求已取消，上层随后独立改变 prop 时组件仍遵循 prop。
 
-## 平台说明
-
+::: info 平台差异
 H5 adapter 支持 overlay、Escape、焦点陷阱、背景 `inert` 与关闭后的 Trigger 焦点恢复。微信小程序原生运行时没有浏览器 `document` 键盘事件或 DOM 焦点/inert/portal 语义，因此原生 Weapp 使用显式 Close 与 overlay。仓库当前 Vue-modeled Weapp adapter 在存在 `document` 的 browser/test surface 会把 Escape 映射为 `escape-key`；这不代表原生微信运行时具备键盘或 DOM 焦点能力。reason/cancel 状态契约在两种 surface 保持一致。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/image.md b/apps/docs/primitives/image.md
index c33f0d9d..7b9c6ce6 100644
--- a/apps/docs/primitives/image.md
+++ b/apps/docs/primitives/image.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="image" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 头像、商品图和生成图片都需要稳定的加载与失败状态。
-- 占位和错误视觉可由 wrapper 或 slot 决定。
-
 ## Parts
 
 | Part        | 作用                                       |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`src`、`fit`、`width`、`height`、`round`、`lazyLoad`
 - 事件：`load`、`error`、`click`。
 
-## 平台说明
-
+::: info 平台差异
 状态契约一致；图片元素、懒加载和 object fit 由目标运行时实现。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/index.md b/apps/docs/primitives/index.md
index e5ca27b1..b74917c8 100644
--- a/apps/docs/primitives/index.md
+++ b/apps/docs/primitives/index.md
@@ -1,64 +1,25 @@
 # Primitives
 
-Primitives 不是另一套 UI 组件清单，而是 Varo 的运行时契约：它们定义状态、触发器、遮罩、定位与关闭行为，让 H5 与小程序封装共享同一套交互语义。展示类组件继续留在组件文档；这里只保留会影响行为组合的底层能力。
+跨端无样式交互契约：`@varo-ui/headless` 管状态，目标端 primitives 管渲染。
 
-<div class="varo-primitive-stack">
-  <section>
-    <span>01</span>
-    <h2>运行时契约</h2>
-    <p>Root 负责状态与上下文，Trigger 负责入口，Content/Overlay 负责可见层，Close 负责退出动作。平台可以换渲染细节，但不能改变契约。</p>
-  </section>
-  <section>
-    <span>02</span>
-    <h2>组合顺序</h2>
-    <p>先放 Root，再放 Trigger，然后放 Overlay 与 Content。组合顺序稳定后，业务 blocks 才能在 H5 和小程序间保持一致。</p>
-  </section>
-  <section>
-    <span>03</span>
-    <h2>受控与非受控</h2>
-    <p>简单场景使用内部状态；需要埋点、路由同步或表单联动时，切换到受控写法。</p>
-  </section>
-</div>
+## 安装
 
-## 目录
+```bash
+# H5
+pnpm add @varo-ui/headless @varo-ui/h5
 
-当前 17 个公开 primitives 按能力分组。每个页面都包含 H5 实时预览、小程序运行时契约、可复制代码与 API。
+# 小程序
+pnpm add @varo-ui/headless @varo-ui/weapp
+```
 
-<PrimitiveCatalog locale="zh" />
+::: info 小程序接入
+全局样式与 Tailwind 配置见 [Wevu Registry](/guide/shadcn-mode)。
+:::
 
-## 下一批基础候选
+## 运行时
 
-基础能力不是越多越好：只有当状态、键盘/触摸行为或 dismiss 逻辑会被多个组件重复使用时，才下沉为 primitive。
-
-| 候选                    | 可支撑的上层组件             | 下沉价值                             |
-| ----------------------- | ---------------------------- | ------------------------------------ |
-| `Tooltip`               | Tooltip、图表提示、截断说明  | 延迟打开、悬停/聚焦与关闭策略        |
-| `Menu` / `DropdownMenu` | 下拉菜单、右键菜单、操作菜单 | roving focus、方向键与选项激活       |
-| `ToggleGroup`           | 分段控制、格式工具栏、筛选器 | 单选/多选集合与 roving focus         |
-| `Slider`                | 音量、范围、参数调节         | 边界、步进、键盘和拖动状态           |
-| `Combobox` / `Listbox`  | 搜索选择、远程选择、命令面板 | 输入、过滤、active option 与选择状态 |
-| `Toast`                 | 全局反馈、异步结果、撤销提示 | 队列、生命周期、暂停与关闭           |
-
-优先级应是 `Menu`、`Tooltip`、`ToggleGroup`、`Slider`，再评估 `Combobox` 与 `Toast`；它们的跨端输入模型更复杂，需要先锁定 H5 与小程序行为边界。
-
-## 产品边界
-
-- **primitive** 管行为契约：受控/非受控状态、disabled、ARIA、`data-*` 与 dismiss 事件。
-- **UI wrapper** 管视觉与定位：token、动画、图标、浮层位置与平台渲染细节。
-- **业务 wrapper** 管数据与场景：远程搜索、权限、分页、领域模型与业务文案。
-
-这个分层让 Base Kit 源码保持可读可改；团队可以基于相同 primitives 创建自己的 UI 包和业务组件，而不需要复制状态机。
-
-## 开发约定
-
-- H5 与小程序使用同一套 part 名称与状态模型。
-- 同一 `TabsRoot` / `AccordionRoot` 内的 value 必须唯一。
-- 小程序页不把浏览器渲染伪装成真实小程序预览；文档用「运行时契约」说明差异。
-- 自定义业务 UI 请从 primitives 向上封装，或参考 [组件文档](/components/button) 与后续 Blocks 作者指南。
-
-## 相关文档
-
-- [安装指南](/guide/installation)
-- [主题配置](/guide/theme)
-- [组件文档](/components/button)
-- [跨端演示](/examples/)
+| 包                          | 用途                 |
+| --------------------------- | -------------------- |
+| `@varo-ui/headless`         | 平台中立状态与事件   |
+| `@varo-ui/h5/primitives`    | DOM、键盘与 ARIA     |
+| `@varo-ui/weapp/primitives` | WXML、触摸与原生事件 |
diff --git a/apps/docs/primitives/input.md b/apps/docs/primitives/input.md
index f9b75720..c2db54f2 100644
--- a/apps/docs/primitives/input.md
+++ b/apps/docs/primitives/input.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="input" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 所有表单字段都需要同一套 value 与 invalid 契约。
-- formatter 和触发时机可被业务 wrapper 复用。
-
 ## Parts
 
 | Part        | 作用                           |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`value`、`defaultValue`、`disabled`、`readonly`、`invalid`
 - 事件：`update:value`、`valueChange`、`focus`、`blur`。
 
-## 平台说明
-
+::: info 平台差异
 H5 支持 textarea autosize；小程序保留同名状态和事件，使用原生输入组件。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/number-field.md b/apps/docs/primitives/number-field.md
index 7f1c6fbe..dc0af853 100644
--- a/apps/docs/primitives/number-field.md
+++ b/apps/docs/primitives/number-field.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="number-field" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 数量、金额和评分调节都依赖可靠的 min/max/step。
-- 拆分 Parts 后可以自由替换布局和图标。
-
 ## Parts
 
 | Part                   | 作用           |
@@ -37,11 +24,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`value`、`min`、`max`、`step`、`precision`、`readonly`
 - 事件：`update:value`、`valueChange`。
 
-## 平台说明
-
+::: info 平台差异
 边界和精度跨端一致；原生输入事件由各目标适配。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/overlay.md b/apps/docs/primitives/overlay.md
index 53a2415e..1739e9f0 100644
--- a/apps/docs/primitives/overlay.md
+++ b/apps/docs/primitives/overlay.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="overlay" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- Popup、抽屉和模态层都需要同一遮罩行为。
-- 独立 Overlay 可避免每个浮层重复关闭逻辑。
-
 ## Parts
 
 | Part          | 作用                       |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`visible`、`defaultVisible`、`lockScroll`、`closeOnClickOverlay`
 - 事件：`update:visible`、`visibleChange`、`close`、`click`。
 
-## 平台说明
-
+::: info 平台差异
 H5 锁定 body；小程序按页面能力处理滚动。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/popover.md b/apps/docs/primitives/popover.md
index 0c714987..6488eff8 100644
--- a/apps/docs/primitives/popover.md
+++ b/apps/docs/primitives/popover.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="popover" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## Dismiss 契约
 
@@ -56,13 +48,8 @@ H5 可处理 Escape/外部点击；小程序没有浏览器 `document`，应优
 - Close 提供显式退出。
 - disabled 时不打开。
 
-## 平台说明
+::: info 平台差异
 
 - H5 与小程序共享 open/close 契约。
 - 定位、碰撞检测与 portal 留给 UI wrapper。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/popup.md b/apps/docs/primitives/popup.md
index 228cb027..ef920207 100644
--- a/apps/docs/primitives/popup.md
+++ b/apps/docs/primitives/popup.md
@@ -10,19 +10,6 @@
 
 <PrimitiveExample name="popup" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 底部面板、抽屉和操作面板共享相同 visible 契约。
-- position 与 overlay 解耦后可支撑更多 UI wrapper。
-
 ## Parts
 
 | Part        | 作用                                 |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`visible`、`position`、`overlay`、`closeable`、`round`、`destroyOnClose`
 - 事件：`update:visible`、`visibleChange`、`close`、`clickOverlay`。
 
-## 平台说明
-
+::: info 平台差异
 小程序安全区和 H5 viewport 各自适配，公开状态保持一致。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/radio-group.md b/apps/docs/primitives/radio-group.md
index ed5440c8..efaa3627 100644
--- a/apps/docs/primitives/radio-group.md
+++ b/apps/docs/primitives/radio-group.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="radio-group" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## 禁用选项
 
@@ -66,13 +58,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 禁用 Item 不可被选中。
 - Indicator 只反映状态。
 
-## 平台说明
+::: info 平台差异
 
 - H5 与小程序共用 value/disabled 契约。
 - 小程序侧键盘焦点由页面管理。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/select.md b/apps/docs/primitives/select.md
index ce6b9061..38ccc20c 100644
--- a/apps/docs/primitives/select.md
+++ b/apps/docs/primitives/select.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="select" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## 分组、只读与禁用
 
@@ -75,13 +67,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - Item 负责选择；readonly/disabled 时不应改 value。
 - `aria-readonly` 由拥有选择语义的 role owner 暴露，不把 readonly 报告为 disabled。
 
-## 平台说明
+::: info 平台差异
 
 - H5 可实时预览打开/选择。
 - 小程序侧浮层定位与 portal 策略由封装层处理。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/sticky.md b/apps/docs/primitives/sticky.md
index ae2854b5..a2377bc0 100644
--- a/apps/docs/primitives/sticky.md
+++ b/apps/docs/primitives/sticky.md
@@ -10,19 +10,6 @@ H5 与小程序 adapters 共享状态与事件命名；滚动源由平台实现
 
 <PrimitiveExample name="sticky" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
-## 为什么是基础能力
-
-- 筛选栏、分段标题和提交栏经常需要吸顶。
-- fixed 状态可驱动边框、阴影和埋点。
-
 ## Parts
 
 | Part         | 作用                                |
@@ -34,11 +21,6 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - 状态：`offsetTop`、`zIndex`、`disabled`、`data-fixed`
 - 事件：`change`、`scroll`。
 
-## 平台说明
-
+::: info 平台差异
 H5 观察 window 滚动；小程序绑定页面或滚动容器。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
+:::
diff --git a/apps/docs/primitives/switch.md b/apps/docs/primitives/switch.md
index b8c10333..d7d5912a 100644
--- a/apps/docs/primitives/switch.md
+++ b/apps/docs/primitives/switch.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="switch" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## Loading
 
@@ -55,13 +47,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - Root 默认 button 语义。
 - loading/disabled 时不可切换。
 
-## 平台说明
+::: info 平台差异
 
 - 双端共享 checked/loading 契约。
 - 视觉轨道与动画由 UI wrapper 负责。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+  :::
diff --git a/apps/docs/primitives/tabs.md b/apps/docs/primitives/tabs.md
index 15d02f6c..3ae18e15 100644
--- a/apps/docs/primitives/tabs.md
+++ b/apps/docs/primitives/tabs.md
@@ -10,17 +10,9 @@
 
 <PrimitiveExample name="tabs" locale="zh" />
 
-## 安装
-
-```bash
-pnpm add @varo-ui/headless @varo-ui/h5
-# 或
-pnpm add @varo-ui/headless @varo-ui/weapp
-```
-
 ## 基础用法
 
-通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。
+通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。
 
 ## 受控与唯一 value
 
@@ -68,13 +60,8 @@ pnpm add @varo-ui/headless @varo-ui/weapp
 - H5 支持方向键/Home/End。
 - 小程序保留 ARIA 与 value 关联，不模拟浏览器焦点。
 
-## 平台说明
+::: info 平台差异
 
 - H5 可演示键盘行为。
-- 小程序文档展示运行时契约，不伪装成真机预览。
-
-## 相关文档
-
-- [Primitives 总览](/primitives/)
-- [组件文档](/components/button)
-- [Blocks](/blocks/profile-edit)
+- 小程序页签使用 Weapp primitive 运行时渲染当前 Tabs 条目。
+  :::
diff --git a/apps/docs/src/agent-component-catalog.ts b/apps/docs/src/agent-component-catalog.ts
index 3b6a9c97..64b5e568 100644
--- a/apps/docs/src/agent-component-catalog.ts
+++ b/apps/docs/src/agent-component-catalog.ts
@@ -1,7 +1,3 @@
-import agentChatManifest from '../../../registry/blocks/agent-chat/registry.json'
-import agentWorkspaceManifest from '../../../registry/blocks/agent-workspace/registry.json'
-import componentTiers from '../../../registry/component-tiers.v0.1.json'
-
 export interface AgentDemoDefinition {
   code: string
   example: string
@@ -264,28 +260,3 @@ const lines = [
     code: '<script setup lang="ts">\nimport AgentChat from \'@/components/blocks/agent-chat.vue\'\n</script>\n\n<template>\n  <AgentChat v-model="prompt" :messages="messages" :snapshot="snapshot" @submit="send" />\n</template>',
   },
 }
-
-function componentLabel(id: string) {
-  const catalogEntry = agentDemoCatalog[id]
-  if (catalogEntry) {
-    return catalogEntry.name
-  }
-  return `Agent${id.split('-').map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join('')}`
-}
-
-const components = componentTiers.agentUi.map(id => ({
-  id,
-  label: componentLabel(id),
-  type: 'component' as const,
-}))
-const blocks = [agentChatManifest, agentWorkspaceManifest].map(manifest => ({
-  id: manifest.name,
-  label: manifest.title,
-  type: 'block' as const,
-}))
-
-export const agentInventory = {
-  blocks,
-  components,
-  surfaces: [...components, ...blocks],
-}
diff --git a/apps/docs/src/component-catalog.ts b/apps/docs/src/component-catalog.ts
index d81da905..d1cb85e3 100644
--- a/apps/docs/src/component-catalog.ts
+++ b/apps/docs/src/component-catalog.ts
@@ -46,11 +46,12 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [
       { id: 'calendar-card', name: 'CalendarCard', label: { zh: '日历卡片', en: 'Calendar Card' }, targets: h5Only },
       { id: 'cascader', name: 'Cascader', label: { zh: '级联选择器', en: 'Cascader' }, targets: h5Only },
       { id: 'checkbox', name: 'Checkbox', label: { zh: '复选按钮', en: 'Checkbox' }, targets: dualTarget },
+      { id: 'date-field', name: 'DateField', label: { zh: '日期字段', en: 'Date Field' }, targets: dualTarget },
       { id: 'date-picker', name: 'DatePicker', label: { zh: '日期选择器', en: 'Date Picker' }, targets: h5Only },
       { id: 'form', name: 'Form', label: { zh: '表单', en: 'Form' }, targets: dualTarget },
       { id: 'input-number', name: 'InputNumber', label: { zh: '数字输入框', en: 'Input Number' }, targets: dualTarget },
       { id: 'number-keyboard', name: 'NumberKeyboard', label: { zh: '数字键盘', en: 'Number Keyboard' }, targets: h5Only },
-      { id: 'picker', name: 'Picker', label: { zh: '选择器', en: 'Picker' }, targets: h5Only },
+      { id: 'picker', name: 'Picker', label: { zh: '选择器', en: 'Picker' }, targets: dualTarget },
       { id: 'radio', name: 'Radio', label: { zh: '单选按钮', en: 'Radio' }, targets: dualTarget },
       { id: 'select', name: 'Select', label: { zh: '选择器', en: 'Select' }, targets: dualTarget },
       { id: 'switch', name: 'Switch', label: { zh: '开关', en: 'Switch' }, targets: dualTarget },
@@ -70,6 +71,7 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [
       { id: 'divider', name: 'Divider', label: { zh: '分割线', en: 'Divider' }, targets: dualTarget },
       { id: 'grid', name: 'Grid', label: { zh: '宫格', en: 'Grid' }, targets: dualTarget },
       { id: 'layout', name: 'Layout', label: { zh: '布局', en: 'Layout' }, targets: dualTarget },
+      { id: 'list', name: 'List', label: { zh: '列表加载', en: 'List Loading' }, targets: dualTarget },
       { id: 'space', name: 'Space', label: { zh: '间距', en: 'Space' }, targets: dualTarget },
       { id: 'sticky', name: 'Sticky', label: { zh: '粘性布局', en: 'Sticky' }, targets: dualTarget },
     ],
@@ -99,7 +101,9 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [
       { id: 'loading', name: 'Loading', label: { zh: '加载', en: 'Loading' }, targets: dualTarget },
       { id: 'skeleton', name: 'Skeleton', label: { zh: '骨架屏', en: 'Skeleton' }, targets: dualTarget },
       { id: 'overlay', name: 'Overlay', label: { zh: '遮罩层', en: 'Overlay' }, targets: dualTarget },
+      { id: 'watermark', name: 'Watermark', label: { zh: '水印', en: 'Watermark' }, targets: dualTarget },
       { id: 'popup', name: 'Popup', label: { zh: '弹出层', en: 'Popup' }, targets: dualTarget },
+      { id: 'pull-refresh', name: 'PullRefresh', label: { zh: '下拉刷新', en: 'Pull Refresh' }, targets: dualTarget },
       { id: 'toast', name: 'Toast', label: { zh: '轻提示', en: 'Toast' }, targets: dualTarget },
     ],
   },
@@ -111,6 +115,7 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [
       { id: 'popover', name: 'Popover', label: { zh: '气泡浮层', en: 'Popover' }, targets: dualTarget },
       { id: 'dialog', name: 'Dialog', label: { zh: '对话框', en: 'Dialog' }, targets: dualTarget },
       { id: 'region-picker', name: 'RegionPicker', label: { zh: '地区选择', en: 'Region Picker' }, targets: dualTarget },
+      { id: 'signature', name: 'Signature', label: { zh: '签名', en: 'Signature' }, targets: dualTarget },
       { id: 'map', name: 'Map', label: { zh: '小程序地图', en: 'Map' }, targets: weappOnly },
       { id: 'robot-chat', name: 'RobotChat', label: { zh: '机器人对话', en: 'Robot Chat' }, targets: weappOnly },
     ],
diff --git a/apps/docs/src/components/AgentComponentDemo.test.ts b/apps/docs/src/components/AgentComponentDemo.test.ts
index b9a3a5a6..5b16677e 100644
--- a/apps/docs/src/components/AgentComponentDemo.test.ts
+++ b/apps/docs/src/components/AgentComponentDemo.test.ts
@@ -91,13 +91,15 @@ describe('AgentComponentDemo', () => {
     expect(wrapper.get('.agent-component-demo__source').text()).toContain(':suggestions=\"suggestions\"')
   })
 
-  it('reruns a completed RAG pipeline from the footer action', async () => {
+  it('reruns a completed RAG pipeline from the header action', async () => {
     const wrapper = mount(AgentComponentDemo, { props: { component: 'rag-pipeline' } })
     expect(wrapper.get('[data-rag-stage="generate"]').attributes('data-status')).toBe('completed')
     expect(wrapper.get('[data-rag-source="support"]').text()).toContain('客服工单')
     await wrapper.get('[data-rag-citation="support"]').trigger('click')
     expect(wrapper.get('output').text()).toBe('客服工单')
 
+    expect(wrapper.findAll('.agent-rag__action')).toHaveLength(1)
+    expect(wrapper.get('.agent-rag__header').find('.agent-rag__action').exists()).toBe(true)
     await wrapper.get('.agent-rag__action').trigger('click')
     await flushPromises()
     expect(wrapper.get('[data-rag-stage="query"]').attributes('data-status')).not.toBe('completed')
diff --git a/apps/docs/src/components/AgentComponentsDemo.test.ts b/apps/docs/src/components/AgentComponentsDemo.test.ts
index 5125691c..63da6409 100644
--- a/apps/docs/src/components/AgentComponentsDemo.test.ts
+++ b/apps/docs/src/components/AgentComponentsDemo.test.ts
@@ -8,6 +8,12 @@ describe('AgentComponentsDemo', () => {
 
   it('streams output and lets readers resume live following', async () => {
     const wrapper = mount(AgentComponentsDemo, { props: { locale: 'zh' } })
+    const modes = wrapper.findAll('.ai-docs-demo__mode')
+    expect(modes).toHaveLength(2)
+    expect(modes[0]!.get('h3').text()).toBe('Chat 模式')
+    expect(modes[1]!.get('h3').text()).toBe('RAG 模式')
+    expect(wrapper.find('.ai-docs-demo__workspace').exists()).toBe(false)
+    expect(wrapper.find('.ai-docs-demo__ledger').exists()).toBe(false)
     const transcript = wrapper.get('.ai-docs-demo__transcript')
     const transcriptElement = transcript.element as HTMLElement
     Object.defineProperties(transcriptElement, {
@@ -18,7 +24,7 @@ describe('AgentComponentsDemo', () => {
 
     await vi.advanceTimersByTimeAsync(500)
     expect(wrapper.text()).toContain('varo.registry.inspect')
-    expect(wrapper.get('.ai-docs-demo__hero output').attributes('data-status')).toBe('streaming')
+    expect(wrapper.get('.ai-docs-demo__mode-head output').attributes('data-status')).toBe('streaming')
     expect(transcriptElement.scrollTop).toBe(900)
 
     transcriptElement.scrollTop = 100
diff --git a/apps/docs/src/components/AgentComponentsDemo.vue b/apps/docs/src/components/AgentComponentsDemo.vue
index aea7a584..44dd2a6c 100644
--- a/apps/docs/src/components/AgentComponentsDemo.vue
+++ b/apps/docs/src/components/AgentComponentsDemo.vue
@@ -1,19 +1,13 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
-import { agentInventory } from '../agent-component-catalog'
 import { useAgentDocsDemo } from '../composables/useAgentDocsDemo'
 import { useRagPipelineDemo } from '../composables/useRagPipelineDemo'
 import {
-  AgentArtifact,
-  AgentAttachmentList,
   AgentComposer,
   AgentConversation,
   AgentEventRenderer,
   AgentRagPipeline,
-  AgentRecommendation,
   AgentResponseActions,
-  AgentSourceList,
-  AgentTaskList,
 } from './agent-ui'
 
 type Locale = 'en' | 'zh'
@@ -77,27 +71,6 @@ onBeforeUnmount(() => {
   }
 })
 
-const tasks = [
-  { id: 'protocol', title: '统一事件协议', status: 'completed' as const, progress: 100, description: '业务只提供事件来源。' },
-  { id: 'renderer', title: '双端增量渲染', status: 'completed' as const, progress: 100, description: 'H5 与 Weapp 共用状态投影。' },
-  { id: 'approval', title: '人工审批门禁', status: 'running' as const, progress: 72, description: '等待发布动作确认。' },
-]
-const artifact = {
-  content: `const controller = createAgentStreamController()\nawait controller.connect(events)`,
-  id: 'controller',
-  kind: 'code' as const,
-  language: 'ts',
-  title: '@varo-ui/ai',
-}
-const sources = [
-  { domain: 'github.com/Simon-He95', id: 'markstream', title: 'Markstream Core', url: 'https://github.com/Simon-He95/markstream-vue' },
-  { domain: 'ui.shadcn.com', id: 'shadcn', title: 'shadcn Registry', url: 'https://ui.shadcn.com/docs/registry' },
-]
-const attachments = [
-  { id: 'schema', mimeType: 'application/json', name: 'agent-events.schema.json', size: '4.2 KB' },
-  { id: 'preview', mimeType: 'image/png', name: 'weapp-preview.png', size: '86 KB' },
-]
-
 function t(zh: string, en: string) {
   return props.locale === 'zh' ? zh : en
 }
@@ -105,27 +78,19 @@ function t(zh: string, en: string) {
 
 <template>
   <section class="ai-docs-demo" :aria-label="t('Varo Agent UI 实时演示', 'Varo Agent UI live demo')">
-    <header class="ai-docs-demo__hero">
-      <div>
-        <p>VARO AGENT UI</p>
-        <h2>{{ t('真实增量事件流，不是静态截图', 'A real incremental event stream, not a static screenshot') }}</h2>
-        <span>{{ t('H5 使用 Markstream RAF；小程序使用定时帧调度和相同 Markdown AST。', 'H5 uses Markstream RAF; mini programs use timed frames with the same Markdown AST.') }}</span>
-      </div>
-      <output :data-status="snapshot.status">{{ snapshot.status }}</output>
-    </header>
+    <section class="ai-docs-demo__mode" :aria-label="t('Chat 模式', 'Chat mode')">
+      <header class="ai-docs-demo__mode-head">
+        <span>
+          <small>CHAT</small>
+          <h3>{{ t('Chat 模式', 'Chat') }}</h3>
+        </span>
+        <output :data-status="snapshot.status">{{ snapshot.status }}</output>
+      </header>
 
-    <div class="ai-docs-demo__workspace">
       <div class="ai-docs-demo__chat">
         <header class="ai-docs-demo__chat-head">
           <i aria-hidden="true">V</i>
-          <span>
-            <strong>Varo Agent</strong>
-            <small>
-              {{ agentInventory.components.length }} {{ t('个双端组件', 'dual-target components') }}
-              · {{ agentInventory.blocks.length }} Blocks
-              · {{ agentInventory.surfaces.length }} {{ t('个 surface', 'surfaces') }}
-            </small>
-          </span>
+          <strong>Varo Agent</strong>
         </header>
 
         <div ref="transcript" class="ai-docs-demo__transcript" @scroll.passive="syncTranscriptLiveEdge">
@@ -161,23 +126,18 @@ function t(zh: string, en: string) {
           />
         </footer>
       </div>
+    </section>
 
-      <aside class="ai-docs-demo__specimens">
-        <header class="ai-docs-demo__specimens-head">
-          <span>
-            <small>CONTEXT RAIL</small>
-            <strong>{{ t('运行上下文', 'Run context') }}</strong>
-          </span>
-          <i>LIVE</i>
-        </header>
-        <AgentRecommendation
-          :title="t('推荐统一事件协议', 'Use the shared event protocol')"
-          :description="t('业务只负责事件来源，组件负责状态投影。', 'The product owns event sources; components own state projection.')"
-          :confidence="96"
-        />
-        <AgentTaskList :tasks="tasks" :title="t('实现进度', 'Implementation progress')" />
-        <AgentArtifact :artifact="artifact" />
-        <AgentSourceList :sources="sources" :title="t('参考来源', 'Sources')" />
+    <section class="ai-docs-demo__mode" :aria-label="t('RAG 模式', 'RAG mode')">
+      <header class="ai-docs-demo__mode-head">
+        <span>
+          <small>RAG</small>
+          <h3>{{ t('RAG 模式', 'RAG') }}</h3>
+        </span>
+        <i>LIVE</i>
+      </header>
+
+      <div class="ai-docs-demo__rag">
         <AgentRagPipeline
           :query="ragSnapshot.query"
           :steps="ragSnapshot.steps"
@@ -188,39 +148,17 @@ function t(zh: string, en: string) {
           @run="runRag"
           @cancel="cancelRag"
         />
-        <AgentAttachmentList :attachments="attachments" />
-      </aside>
-    </div>
-
-    <div class="ai-docs-demo__ledger">
-      <header>
-        <strong>{{ t('Registry Agent 清单', 'Registry Agent inventory') }}</strong>
-        <span>
-          {{ agentInventory.components.length }} {{ t('个组件', 'components') }}
-          · {{ agentInventory.blocks.length }} Blocks
-          · {{ agentInventory.surfaces.length }} {{ t('个 surface', 'surfaces') }}
-        </span>
-      </header>
-      <div>
-        <span v-for="component in agentInventory.components" :key="component.id">
-          {{ component.label }}
-        </span>
-        <span v-for="block in agentInventory.blocks" :key="block.id">
-          Block · {{ block.label }}
-        </span>
       </div>
-    </div>
+    </section>
   </section>
 </template>
 
 <style scoped>
 .ai-docs-demo {
   --ai-demo-surface: var(--varo-demo-surface);
-  --ai-demo-surface-strong: var(--varo-demo-surface-strong);
   --ai-demo-card: var(--varo-surface);
   --ai-demo-border: var(--varo-demo-border);
   --ai-demo-text: var(--varo-foreground);
-  --ai-demo-text-regular: var(--varo-text-regular);
   --ai-demo-muted: var(--varo-muted);
   --ai-demo-accent: var(--varo-primary);
   --ai-demo-accent-soft: var(--varo-primary-soft);
@@ -229,59 +167,52 @@ function t(zh: string, en: string) {
   --ai-demo-shadow: var(--varo-demo-shadow);
 
   display: grid;
-  gap: 20px;
+  gap: 28px;
   margin: 24px 0 40px;
   color: var(--ai-demo-text);
 }
 
-.ai-docs-demo__hero {
+.ai-docs-demo__mode {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.ai-docs-demo__mode-head {
   display: flex;
-  gap: 24px;
+  gap: 16px;
   align-items: end;
   justify-content: space-between;
-  padding: 22px;
-  background:
-    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--ai-demo-accent) 16%, transparent), transparent 28%),
-    linear-gradient(
-      145deg,
-      var(--ai-demo-surface-strong),
-      color-mix(in srgb, var(--ai-demo-accent) 7%, var(--ai-demo-surface))
-    );
-  border: 1px solid color-mix(in srgb, var(--ai-demo-accent) 24%, var(--ai-demo-border));
-  border-radius: 24px;
+  padding-inline: 4px;
 }
 
-.ai-docs-demo__hero p {
-  margin: 0 0 8px;
-  font-size: 11px;
+.ai-docs-demo__mode-head span {
+  display: grid;
+  gap: 2px;
+}
+
+.ai-docs-demo__mode-head small {
+  font-size: 10px;
   font-weight: 900;
   color: var(--ai-demo-accent);
-  letter-spacing: 0.16em;
+  letter-spacing: 0.14em;
 }
 
-.ai-docs-demo__hero h2 {
+.ai-docs-demo__mode-head h3 {
   padding: 0;
   margin: 0;
-  font-size: clamp(20px, 3vw, 30px);
-  line-height: 1.15;
+  font-size: 20px;
   color: var(--ai-demo-text);
-  letter-spacing: -0.035em;
-  text-wrap: balance;
   border: 0;
 }
 
-.ai-docs-demo__hero span {
-  display: block;
-  margin-top: 8px;
-  font-size: 13px;
-  color: var(--ai-demo-muted);
-}
-
-.ai-docs-demo__hero output {
+.ai-docs-demo__mode-head output,
+.ai-docs-demo__mode-head > i {
   flex: none;
-  min-width: 94px;
-  padding: 8px 12px;
-  font-size: 11px;
+  min-width: 72px;
+  padding: 6px 10px;
+  font-size: 10px;
+  font-style: normal;
   font-weight: 900;
   color: var(--ai-demo-muted);
   text-align: center;
@@ -292,31 +223,20 @@ function t(zh: string, en: string) {
   border-radius: 999px;
 }
 
-.ai-docs-demo__hero output[data-status='streaming'],
-.ai-docs-demo__hero output[data-status='waiting'] {
+.ai-docs-demo__mode-head output[data-status='streaming'],
+.ai-docs-demo__mode-head output[data-status='waiting'],
+.ai-docs-demo__mode-head > i {
   color: var(--ai-demo-accent);
   background: var(--ai-demo-accent-soft);
   border-color: color-mix(in srgb, var(--ai-demo-accent) 48%, var(--ai-demo-border));
 }
 
-.ai-docs-demo__hero output[data-status='completed'] {
+.ai-docs-demo__mode-head output[data-status='completed'] {
   color: var(--ai-demo-success);
   background: var(--ai-demo-success-soft);
   border-color: color-mix(in srgb, var(--ai-demo-success) 48%, var(--ai-demo-border));
 }
 
-.ai-docs-demo__workspace {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
-  gap: 16px;
-  align-items: start;
-}
-
-.ai-docs-demo__workspace > *,
-.ai-docs-demo__specimens > * {
-  min-width: 0;
-}
-
 .ai-docs-demo__chat {
   display: grid;
   min-width: 0;
@@ -349,26 +269,17 @@ function t(zh: string, en: string) {
   border-radius: 14px;
 }
 
-.ai-docs-demo__chat-head span {
-  display: grid;
-}
-
 .ai-docs-demo__chat-head strong {
   font-size: 14px;
 }
 
-.ai-docs-demo__chat-head small {
-  font-size: 11px;
-  color: var(--ai-demo-muted);
-}
-
 .ai-docs-demo__transcript {
   position: relative;
   display: grid;
   gap: 12px;
   align-content: start;
-  height: clamp(420px, 62vh, 560px);
-  padding: 16px;
+  height: clamp(420px, 58vh, 600px);
+  padding: 18px;
   overflow-y: auto;
   scrollbar-gutter: stable;
   scroll-behavior: smooth;
@@ -401,98 +312,15 @@ function t(zh: string, en: string) {
   border-top: 1px solid var(--ai-demo-border);
 }
 
-.ai-docs-demo__specimens {
-  position: sticky;
-  top: 88px;
-  display: grid;
-  gap: 12px;
-  max-height: calc(100vh - 112px);
-  padding: 12px;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  scrollbar-color: var(--ai-demo-muted) transparent;
-  scrollbar-width: thin;
-  background: var(--ai-demo-surface-strong);
+.ai-docs-demo__rag {
+  min-width: 0;
+  padding: 16px;
+  background: var(--ai-demo-surface);
   border: 1px solid var(--ai-demo-border);
   border-radius: 24px;
   box-shadow: var(--ai-demo-shadow);
 }
 
-.ai-docs-demo__specimens-head {
-  display: flex;
-  gap: 12px;
-  align-items: end;
-  justify-content: space-between;
-  padding: 2px 2px 4px;
-}
-
-.ai-docs-demo__specimens-head span {
-  display: grid;
-  gap: 1px;
-}
-
-.ai-docs-demo__specimens-head small {
-  font-size: 9px;
-  font-weight: 900;
-  color: var(--ai-demo-accent);
-  letter-spacing: 0.14em;
-}
-
-.ai-docs-demo__specimens-head strong {
-  font-size: 13px;
-  color: var(--ai-demo-text);
-}
-
-.ai-docs-demo__specimens-head i {
-  padding: 4px 8px;
-  font-size: 9px;
-  font-style: normal;
-  font-weight: 900;
-  color: var(--ai-demo-accent);
-  letter-spacing: 0.08em;
-  background: var(--ai-demo-accent-soft);
-  border-radius: 999px;
-}
-
-.ai-docs-demo__ledger {
-  overflow: hidden;
-  background: var(--ai-demo-card);
-  border: 1px solid var(--ai-demo-border);
-  border-radius: 20px;
-}
-
-.ai-docs-demo__ledger header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 48px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--ai-demo-border);
-}
-
-.ai-docs-demo__ledger header span {
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--ai-demo-accent);
-}
-
-.ai-docs-demo__ledger > div {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 16px;
-}
-
-.ai-docs-demo__ledger > div span {
-  padding: 6px 10px;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--ai-demo-text-regular);
-  background: var(--ai-demo-surface-strong);
-  border: 1px solid var(--ai-demo-border);
-  border-radius: 999px;
-}
-
 .ai-docs-demo :deep(button:focus-visible),
 .ai-docs-demo :deep(a:focus-visible) {
   outline: 2px solid var(--ai-demo-accent);
@@ -508,7 +336,7 @@ function t(zh: string, en: string) {
 
 .ai-docs-demo :deep(.agent-markdown__table) {
   width: 100%;
-  color: var(--ai-demo-text-regular);
+  color: var(--ai-demo-text);
   background: var(--ai-demo-card);
   border: 0;
   border-radius: 0;
@@ -517,42 +345,27 @@ function t(zh: string, en: string) {
 
 .ai-docs-demo :deep(.agent-markdown__table th),
 .ai-docs-demo :deep(.agent-markdown__table td) {
-  color: var(--ai-demo-text-regular);
+  color: var(--ai-demo-text);
   background: var(--ai-demo-card);
   border-color: var(--ai-demo-border);
 }
 
 .ai-docs-demo :deep(.agent-markdown__table th) {
-  color: var(--ai-demo-text);
-  background: var(--ai-demo-surface-strong);
+  background: var(--ai-demo-surface);
 }
 
 @media (max-width: 760px) {
   .ai-docs-demo {
-    gap: 16px;
+    gap: 24px;
     margin-bottom: 32px;
   }
 
-  .ai-docs-demo__hero {
-    flex-direction: column;
-    gap: 16px;
-    align-items: start;
-    padding: 18px;
-    border-radius: 20px;
-  }
-
-  .ai-docs-demo__workspace {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .ai-docs-demo__chat,
-  .ai-docs-demo__specimens {
+  .ai-docs-demo__rag {
     border-radius: 20px;
   }
 
-  .ai-docs-demo__specimens {
-    position: static;
-    max-height: none;
+  .ai-docs-demo__rag {
     padding: 10px;
   }
 
diff --git a/apps/docs/src/components/ComponentCatalog.vue b/apps/docs/src/components/ComponentCatalog.vue
deleted file mode 100644
index 6c05a2f5..00000000
--- a/apps/docs/src/components/ComponentCatalog.vue
+++ /dev/null
@@ -1,551 +0,0 @@
-<script setup lang="ts">
-import type { ComponentTarget, DocsLocale } from '../component-catalog'
-import { computed, shallowRef } from 'vue'
-import {
-  componentCatalog,
-  componentCatalogItems,
-  componentCount,
-  componentDocsRoute,
-} from '../component-catalog'
-
-type AvailabilityFilter = 'all' | 'dual' | ComponentTarget
-const props = withDefaults(defineProps<{ locale?: DocsLocale }>(), { locale: 'zh' })
-
-const withDocsBase = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
-
-const query = shallowRef('')
-const targetFilter = shallowRef<AvailabilityFilter>('all')
-
-const copy = computed(() => props.locale === 'zh'
-  ? {
-      all: '全部',
-      availability: '按支持端筛选',
-      count: '个组件',
-      dual: '双端',
-      empty: '没有匹配的组件',
-      emptyDetail: '尝试其他名称，或清除当前端筛选。',
-      eyebrow: 'Registry 组件目录',
-      h5: 'H5',
-      of: '共',
-      open: '查看文档',
-      reset: '清除筛选',
-      searchLabel: '搜索组件',
-      searchPlaceholder: '搜索名称，如 Badge、地图或 Picker',
-      summary: '从同一份目录浏览侧边栏中的全部组件，并按 H5、Weapp 或双端可用性缩小范围。',
-      targets: '支持端',
-      weapp: 'Weapp',
-    }
-  : {
-      all: 'All',
-      availability: 'Filter by target availability',
-      count: 'components',
-      dual: 'Dual',
-      empty: 'No components match',
-      emptyDetail: 'Try another name or clear the target filter.',
-      eyebrow: 'Registry component catalog',
-      h5: 'H5',
-      of: 'of',
-      open: 'Open documentation',
-      reset: 'Clear filters',
-      searchLabel: 'Search components',
-      searchPlaceholder: 'Search by name, such as Badge, Map, or Picker',
-      summary: 'Browse every component in the sidebar from one catalog, then narrow the list by H5, Weapp, or dual-target availability.',
-      targets: 'Targets',
-      weapp: 'Weapp',
-    })
-
-const targetCounts = {
-  h5: componentCatalogItems.filter(item => item.targets.includes('h5')).length,
-  weapp: componentCatalogItems.filter(item => item.targets.includes('weapp')).length,
-  dual: componentCatalogItems.filter(item => item.targets.length === 2).length,
-}
-
-const filterOptions = computed(() => [
-  { id: 'all' as const, label: copy.value.all, count: componentCount },
-  { id: 'h5' as const, label: copy.value.h5, count: targetCounts.h5 },
-  { id: 'weapp' as const, label: copy.value.weapp, count: targetCounts.weapp },
-  { id: 'dual' as const, label: copy.value.dual, count: targetCounts.dual },
-])
-
-function matchesTarget(targets: readonly ComponentTarget[]): boolean {
-  if (targetFilter.value === 'all') { return true }
-  if (targetFilter.value === 'dual') { return targets.length === 2 }
-  return targets.includes(targetFilter.value)
-}
-
-const groups = computed(() => {
-  const search = query.value.trim().toLowerCase()
-
-  return componentCatalog
-    .map(group => ({
-      id: group.id,
-      summary: group.summary[props.locale],
-      title: group.title[props.locale],
-      items: group.items
-        .filter(item => matchesTarget(item.targets))
-        .filter((item) => {
-          if (!search) { return true }
-          return [
-            item.id,
-            item.name,
-            item.label.en,
-            item.label.zh,
-          ].some(value => value.toLowerCase().includes(search))
-        })
-        .map(item => ({
-          ...item,
-          href: withDocsBase(componentDocsRoute(item.id, props.locale)),
-          label: item.label[props.locale],
-        })),
-    }))
-    .filter(group => group.items.length > 0)
-})
-
-const visibleComponentCount = computed(() =>
-  groups.value.reduce((count, group) => count + group.items.length, 0),
-)
-
-const hasActiveFilters = computed(() => query.value.trim().length > 0 || targetFilter.value !== 'all')
-
-function targetAvailabilityLabel(targets: readonly ComponentTarget[]): string {
-  const names = targets.map(target => target === 'h5' ? copy.value.h5 : copy.value.weapp)
-  return `${copy.value.targets}: ${names.join(' + ')}`
-}
-
-function resetFilters() {
-  query.value = ''
-  targetFilter.value = 'all'
-}
-</script>
-
-<template>
-  <div class="component-catalog">
-    <header class="component-catalog__intro">
-      <div>
-        <span>{{ copy.eyebrow }}</span>
-        <p>{{ copy.summary }}</p>
-      </div>
-      <output aria-live="polite">
-        <strong>{{ visibleComponentCount }}</strong>
-        <template v-if="hasActiveFilters"> {{ copy.of }} {{ componentCount }}</template>
-        {{ copy.count }}
-      </output>
-    </header>
-
-    <div class="component-catalog__toolbar">
-      <label class="component-catalog__search" for="component-catalog-search">
-        <span class="component-catalog__sr-only">{{ copy.searchLabel }}</span>
-        <input
-          id="component-catalog-search"
-          v-model="query"
-          class="component-catalog__search-input"
-          type="search"
-          name="component-search"
-          :placeholder="copy.searchPlaceholder"
-          autocomplete="off"
-          spellcheck="false"
-          @keydown.esc="query = ''"
-        >
-      </label>
-
-      <div
-        class="component-catalog__filters"
-        role="group"
-        :aria-label="copy.availability"
-      >
-        <button
-          v-for="option in filterOptions"
-          :key="option.id"
-          type="button"
-          :aria-pressed="targetFilter === option.id"
-          @click="targetFilter = option.id"
-        >
-          {{ option.label }}
-          <span>{{ option.count }}</span>
-        </button>
-      </div>
-    </div>
-
-    <div v-if="groups.length > 0" class="component-catalog__groups">
-      <section v-for="group in groups" :key="group.id" class="component-catalog__group">
-        <header>
-          <div>
-            <h2>{{ group.title }}</h2>
-            <p>{{ group.summary }}</p>
-          </div>
-          <span>{{ group.items.length }}</span>
-        </header>
-
-        <div class="component-catalog__links">
-          <a
-            v-for="item in group.items"
-            :key="item.id"
-            :href="item.href"
-            :aria-label="`${item.name}. ${targetAvailabilityLabel(item.targets)}. ${copy.open}`"
-          >
-            <span class="component-catalog__identity">
-              <strong>{{ item.name }}</strong>
-              <small>{{ item.label }}</small>
-            </span>
-            <span class="component-catalog__targets" aria-hidden="true">
-              <small v-for="target in item.targets" :key="target">
-                {{ target === 'h5' ? copy.h5 : copy.weapp }}
-              </small>
-            </span>
-            <svg
-              aria-hidden="true"
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="none"
-            >
-              <path d="M5 3h8v8M13 3 3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-          </a>
-        </div>
-      </section>
-    </div>
-
-    <div v-else class="component-catalog__empty" role="status">
-      <strong>{{ copy.empty }}</strong>
-      <p>{{ copy.emptyDetail }}</p>
-      <button type="button" @click="resetFilters">
-        {{ copy.reset }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.component-catalog {
-  display: grid;
-  gap: 18px;
-  margin: 24px 0 40px;
-}
-
-.component-catalog__intro {
-  display: flex;
-  gap: 20px;
-  align-items: flex-end;
-  justify-content: space-between;
-  padding: 18px 20px;
-  background: color-mix(in srgb, var(--varo-accent-soft) 56%, var(--varo-card-solid));
-  border: 1px solid var(--varo-border);
-  border-radius: var(--varo-radius-lg);
-}
-
-.component-catalog__intro > div {
-  min-width: 0;
-}
-
-.component-catalog__intro span {
-  font-size: 0.72rem;
-  font-weight: 800;
-  color: var(--varo-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-.component-catalog__intro p {
-  max-width: 68ch;
-  margin: 7px 0 0;
-  line-height: 1.65;
-  color: var(--varo-muted);
-}
-
-.component-catalog__intro output {
-  flex: none;
-  font-size: 0.82rem;
-  color: var(--varo-muted);
-}
-
-.component-catalog__intro output strong {
-  font-size: 1rem;
-  color: var(--varo-foreground);
-}
-
-.component-catalog__toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 14px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  background: color-mix(in srgb, var(--varo-card) 82%, transparent);
-  border: 1px solid var(--varo-border);
-  border-radius: var(--varo-radius-lg);
-}
-
-.component-catalog__search {
-  flex: 1 1 280px;
-  min-width: 0;
-}
-
-.component-catalog__search-input {
-  width: 100%;
-  height: 44px;
-  padding: 0 14px;
-  font: inherit;
-  color: var(--varo-foreground);
-  outline: none;
-  background: var(--varo-card-solid);
-  border: 1px solid var(--varo-border-strong);
-  border-radius: var(--varo-radius);
-}
-
-.component-catalog__search-input::placeholder {
-  color: var(--varo-placeholder);
-}
-
-.component-catalog__search-input:focus-visible {
-  border-color: var(--varo-accent);
-  box-shadow: 0 0 0 3px var(--varo-ring);
-}
-
-.component-catalog__filters {
-  display: flex;
-  flex: 0 1 auto;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.component-catalog__filters button,
-.component-catalog__empty button {
-  min-height: 44px;
-  padding: 0 11px;
-  font: inherit;
-  font-size: 0.76rem;
-  font-weight: 750;
-  color: var(--varo-text-regular);
-  cursor: pointer;
-  background: var(--varo-surface-strong);
-  border: 1px solid var(--varo-border);
-  border-radius: var(--varo-radius);
-}
-
-.component-catalog__filters button {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.component-catalog__filters button span {
-  font-size: 0.68rem;
-  color: var(--varo-muted);
-}
-
-.component-catalog__filters button:hover,
-.component-catalog__empty button:hover {
-  border-color: var(--varo-accent);
-}
-
-.component-catalog__filters button:focus-visible,
-.component-catalog__empty button:focus-visible {
-  outline: 2px solid var(--varo-accent);
-  outline-offset: 2px;
-}
-
-.component-catalog__filters button[aria-pressed='true'] {
-  color: var(--varo-primary-text);
-  background: var(--varo-primary-soft);
-  border-color: color-mix(in srgb, var(--varo-primary) 64%, var(--varo-border));
-}
-
-.component-catalog__filters button[aria-pressed='true'] span {
-  color: currentcolor;
-}
-
-.component-catalog__groups {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 14px;
-}
-
-.component-catalog__group {
-  min-width: 0;
-  padding: 18px;
-  background: color-mix(in srgb, var(--varo-card) 82%, transparent);
-  border: 1px solid var(--varo-border);
-  border-radius: var(--varo-radius-lg);
-}
-
-.component-catalog__group > header {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.component-catalog__group h2 {
-  padding: 0;
-  margin: 0;
-  font-size: 1.05rem;
-  color: var(--varo-foreground);
-  letter-spacing: -0.02em;
-  border: 0;
-}
-
-.component-catalog__group p {
-  margin: 5px 0 0;
-  font-size: 0.82rem;
-  line-height: 1.55;
-  color: var(--varo-muted);
-}
-
-.component-catalog__group > header > span {
-  display: inline-grid;
-  flex: none;
-  place-items: center;
-  min-width: 30px;
-  height: 26px;
-  font-size: 0.72rem;
-  font-weight: 800;
-  color: var(--varo-muted);
-  background: var(--varo-surface-strong);
-  border: 1px solid var(--varo-border);
-  border-radius: 7px;
-}
-
-.component-catalog__links {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 7px;
-}
-
-.component-catalog__links a {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto 16px;
-  gap: 9px;
-  align-items: center;
-  min-width: 0;
-  min-height: 68px;
-  padding: 9px 11px;
-  color: var(--varo-foreground);
-  text-decoration: none;
-  background: color-mix(in srgb, var(--varo-surface-strong) 72%, transparent);
-  border: 1px solid transparent;
-  border-radius: var(--varo-radius);
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease;
-}
-
-.component-catalog__links a:hover {
-  color: var(--varo-accent);
-  background: var(--varo-accent-soft);
-  border-color: color-mix(in srgb, var(--varo-accent) 36%, var(--varo-border));
-}
-
-.component-catalog__links a:focus-visible {
-  outline: 2px solid var(--varo-accent);
-  outline-offset: 2px;
-}
-
-.component-catalog__identity {
-  display: grid;
-  min-width: 0;
-}
-
-.component-catalog__identity strong {
-  font-size: 0.84rem;
-  color: inherit;
-  overflow-wrap: anywhere;
-}
-
-.component-catalog__identity small {
-  font-size: 0.72rem;
-  color: var(--varo-muted);
-}
-
-.component-catalog__targets {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  justify-content: flex-end;
-}
-
-.component-catalog__targets small {
-  padding: 2px 5px;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.58rem;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--varo-primary-text);
-  background: var(--varo-primary-soft);
-  border: 1px solid color-mix(in srgb, var(--varo-primary) 32%, var(--varo-border));
-  border-radius: 5px;
-}
-
-.component-catalog__links svg {
-  flex: none;
-  color: var(--varo-muted);
-}
-
-.component-catalog__empty {
-  display: grid;
-  justify-items: start;
-  padding: 28px;
-  color: var(--varo-foreground);
-  background: color-mix(in srgb, var(--varo-card) 82%, transparent);
-  border: 1px dashed var(--varo-border-strong);
-  border-radius: var(--varo-radius-lg);
-}
-
-.component-catalog__empty p {
-  margin: 6px 0 16px;
-  color: var(--varo-muted);
-}
-
-.component-catalog__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip-path: inset(50%);
-}
-
-@media (max-width: 960px) {
-  .component-catalog__links {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 760px) {
-  .component-catalog__groups {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .component-catalog__intro {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .component-catalog__toolbar {
-    align-items: stretch;
-  }
-
-  .component-catalog__search {
-    flex-basis: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  .component-catalog__group {
-    padding: 14px;
-  }
-
-  .component-catalog__links {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .component-catalog__links a {
-    grid-template-columns: minmax(0, 1fr) auto 16px;
-  }
-}
-</style>
diff --git a/apps/docs/src/components/DateFieldDemo.vue b/apps/docs/src/components/DateFieldDemo.vue
new file mode 100644
index 00000000..2a24df96
--- /dev/null
+++ b/apps/docs/src/components/DateFieldDemo.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { VDateField } from '@varo-ui/h5'
+import { computed, shallowRef } from 'vue'
+
+const props = withDefaults(defineProps<{ locale?: 'en' | 'zh' }>(), {
+  locale: 'zh',
+})
+
+const value = shallowRef('2026-05-18')
+const visible = shallowRef(false)
+const status = shallowRef('')
+const copy = computed(() => props.locale === 'en'
+  ? {
+      cancel: 'Cancel',
+      cancelled: 'Selection cancelled; the committed date was preserved.',
+      confirm: 'Confirm',
+      confirmed: 'Confirmed',
+      placeholder: 'Select date',
+      preview: 'Draft',
+      title: 'Invoice date',
+    }
+  : {
+      cancel: '取消',
+      cancelled: '已取消，保留原日期。',
+      confirm: '确认',
+      confirmed: '已确认',
+      placeholder: '请选择日期',
+      preview: '草稿',
+      title: '开票日期',
+    })
+
+function preview(next: string) {
+  status.value = `${copy.value.preview}：${next}`
+}
+
+function confirm(next: string) {
+  status.value = `${copy.value.confirmed}：${next}`
+}
+
+function cancel() {
+  status.value = copy.value.cancelled
+}
+</script>
+
+<template>
+  <section class="date-field-demo">
+    <VDateField
+      v-model:value="value"
+      v-model:visible="visible"
+      :cancel-text="copy.cancel"
+      :confirm-text="copy.confirm"
+      :max-year="2027"
+      :min-year="2025"
+      :placeholder="copy.placeholder"
+      :title="copy.title"
+      @cancel="cancel"
+      @change="preview"
+      @confirm="confirm"
+    />
+    <output class="date-field-demo__status" aria-live="polite">
+      {{ status || value }}
+    </output>
+  </section>
+</template>
+
+<style scoped>
+.date-field-demo {
+  display: grid;
+  gap: 10px;
+  width: min(100%, 360px);
+  margin: 16px 0 24px;
+}
+
+.date-field-demo__status {
+  min-height: 20px;
+  font-size: 13px;
+  color: var(--varo-muted);
+}
+</style>
diff --git a/apps/docs/src/components/FormComponentDemo.test.ts b/apps/docs/src/components/FormComponentDemo.test.ts
index 11857740..f2c215c0 100644
--- a/apps/docs/src/components/FormComponentDemo.test.ts
+++ b/apps/docs/src/components/FormComponentDemo.test.ts
@@ -23,7 +23,7 @@ describe('FormComponentDemo', () => {
     vi.useRealTimers()
   })
 
-  it('expands one active code sample and switches between H5 and mini-program code', async () => {
+  it('keeps expanded code synchronized with the upper runtime tabs', async () => {
     const writeText = vi.fn((text: string) => Promise.resolve(text))
     vi.stubGlobal('navigator', { clipboard: { writeText } })
 
@@ -44,22 +44,34 @@ describe('FormComponentDemo', () => {
 
     await toggle.trigger('click')
     const code = wrapper.get('.form-demo__code')
-    const tabs = code.findAll('.form-demo__tab')
+    const platformTabs = wrapper.findAll('.form-demo__platform-switch button')
+    const preview = wrapper.get('.form-demo__preview')
+
+    expect(platformTabs).toHaveLength(2)
+    expect(code.findAll('[role="tab"]')).toHaveLength(0)
+    expect(preview.attributes('id')).toBe('form-picker-platform-panel')
+    expect(preview.attributes('role')).toBe('tabpanel')
+    expect(preview.attributes('aria-labelledby')).toBe('form-picker-platform-tab-h5')
+    expect(platformTabs[0]!.attributes('aria-controls')).toBe('form-picker-platform-panel')
+    expect(platformTabs[0]!.attributes('tabindex')).toBe('0')
+    expect(platformTabs[1]!.attributes('tabindex')).toBe('-1')
 
     expect(toggle.attributes('aria-label')).toBe('收起代码')
     expect(toggle.text()).toContain('收起代码')
-    expect(tabs).toHaveLength(2)
-    expect(tabs[0]!.attributes('data-active')).toBe('true')
+    expect(platformTabs[0]!.attributes('data-active')).toBe('true')
     expect(code.get('code').text()).toContain('from \'@varo-ui/h5\'')
     expect(code.get('code').text()).not.toContain('from \'@varo-ui/weapp\'')
 
     const copyButton = code.get('.form-demo__code-copy')
     expect(copyButton.attributes('aria-label')).toBe('复制 H5 代码')
 
-    await tabs[1]!.trigger('click')
+    await platformTabs[0]!.trigger('keydown', { key: 'ArrowRight' })
 
-    expect(tabs[0]!.attributes('data-active')).toBe('false')
-    expect(tabs[1]!.attributes('data-active')).toBe('true')
+    expect(platformTabs[0]!.attributes('data-active')).toBe('false')
+    expect(platformTabs[1]!.attributes('data-active')).toBe('true')
+    expect(platformTabs[0]!.attributes('tabindex')).toBe('-1')
+    expect(platformTabs[1]!.attributes('tabindex')).toBe('0')
+    expect(preview.attributes('aria-labelledby')).toBe('form-picker-platform-tab-weapp')
     expect(code.get('code').text()).toContain('from \'@varo-ui/weapp\'')
     expect(code.get('code').text()).not.toContain('from \'@varo-ui/h5\'')
     expect(code.get('code').text()).toContain('from \'wevu\'')
@@ -74,7 +86,9 @@ describe('FormComponentDemo', () => {
     expect(copyButton.attributes('aria-label')).toBe('已复制')
     expect(code.get('.form-demo__code-toast').text()).toContain('已复制到剪贴板')
 
-    await tabs[0]!.trigger('click')
+    await platformTabs[1]!.trigger('keydown', { key: 'Home' })
+    expect(code.get('code').text()).toContain('from \'@varo-ui/h5\'')
+    expect(code.get('code').text()).not.toContain('from \'@varo-ui/weapp\'')
     expect(copyButton.attributes('aria-label')).toBe('复制 H5 代码')
     expect(code.find('.form-demo__code-toast').exists()).toBe(false)
   })
@@ -512,19 +526,6 @@ describe('FormComponentDemo', () => {
     await switches[0]!.trigger('click')
     expect(switchDemo.get('.form-demo__control-head output').text()).toBe('已关闭')
 
-    const toast = mount(FormComponentDemo, {
-      global: { plugins: [themePlugin] },
-      props: { example: 'toast', locale: 'zh' },
-    })
-    const toasts = toast.findAll('.varo-toast')
-    expect(toasts).toHaveLength(4)
-    expect(toasts.map(item => item.attributes('data-type'))).toEqual(['text', 'warning', 'danger', 'success'])
-    expect(toast.text()).toContain('信息已更新')
-    expect(toast.text()).toContain('请检查必填项')
-    expect(toast.text()).toContain('请求失败')
-    expect(toast.text()).toContain('保存成功')
-    expect(toast.find('.varo-toast__close').exists()).toBe(false)
-
     const loading = mount(FormComponentDemo, {
       global: { plugins: [themePlugin] },
       props: { example: 'loading', locale: 'en' },
diff --git a/apps/docs/src/components/FormComponentDemo.vue b/apps/docs/src/components/FormComponentDemo.vue
index a9ccf098..8af860bd 100644
--- a/apps/docs/src/components/FormComponentDemo.vue
+++ b/apps/docs/src/components/FormComponentDemo.vue
@@ -24,7 +24,6 @@ import {
   VSkeleton as H5Skeleton,
   VSwitch as H5Switch,
   VTextarea as H5Textarea,
-  VToast as H5Toast,
   VUploader as H5Uploader,
 } from '@varo-ui/h5'
 import {
@@ -52,7 +51,6 @@ import {
   VSkeleton as WeappSkeleton,
   VSwitch as WeappSwitch,
   VTextarea as WeappTextarea,
-  VToast as WeappToast,
   VUploader as WeappUploader,
 } from '@varo-ui/weapp'
 import { computed, onBeforeUnmount, reactive, ref, shallowRef, useId } from 'vue'
@@ -79,7 +77,6 @@ type FormDemoKind
     | 'short-password'
     | 'switch'
     | 'textarea'
-    | 'toast'
     | 'uploader'
 type Locale = 'zh' | 'en'
 type Platform = 'h5' | 'weapp'
@@ -96,6 +93,8 @@ const props = withDefaults(
 
 const codeExpanded = ref(false)
 const activePlatform = ref<Platform>('h5')
+const platforms: Platform[] = ['h5', 'weapp']
+const platformPanelId = computed(() => `form-${props.example}-platform-panel`)
 const VButton = computed(() => activePlatform.value === 'h5' ? H5Button : WeappButton)
 const VCalendar = computed(() => activePlatform.value === 'h5' ? H5Calendar : WeappCalendar)
 const VCalendarCard = computed(() => activePlatform.value === 'h5' ? H5CalendarCard : WeappCalendarCard)
@@ -120,7 +119,6 @@ const VSkeleton = computed(() => activePlatform.value === 'h5' ? H5Skeleton : We
 const VShortPassword = computed(() => activePlatform.value === 'h5' ? H5ShortPassword : WeappShortPassword)
 const VSwitch = computed(() => activePlatform.value === 'h5' ? H5Switch : WeappSwitch)
 const VTextarea = computed(() => activePlatform.value === 'h5' ? H5Textarea : WeappTextarea)
-const VToast = computed(() => activePlatform.value === 'h5' ? H5Toast : WeappToast)
 const VUploader = computed(() => activePlatform.value === 'h5' ? H5Uploader : WeappUploader)
 const copyState = ref<'idle' | 'copied' | 'unsupported'>('idle')
 let copyFeedbackTimer: number | undefined
@@ -142,12 +140,6 @@ const componentSearchResults = computed(() => {
   )
 })
 const textareaValue = shallowRef(props.locale === 'en' ? 'The confirmation button does not respond after selecting a date.' : '选择日期后点击确认按钮没有响应。')
-const toastItems = computed(() => [
-  { id: 'info', message: props.locale === 'en' ? 'Information updated' : '信息已更新', type: 'text' as const },
-  { id: 'warning', message: props.locale === 'en' ? 'Check required fields' : '请检查必填项', type: 'warning' as const },
-  { id: 'error', message: props.locale === 'en' ? 'Request failed' : '请求失败', type: 'danger' as const },
-  { id: 'success', message: props.locale === 'en' ? 'Saved successfully' : '保存成功', type: 'success' as const },
-])
 const formModel = reactive({
   account: '',
   budget: 40,
@@ -237,7 +229,6 @@ const copy = computed(() =>
   props.locale === 'en'
     ? {
         preview: 'Live Preview',
-        code: 'Example Code',
         codeExpand: 'Show code',
         codeCollapse: 'Hide code',
         copyCode: 'Copy code',
@@ -388,7 +379,6 @@ const copy = computed(() =>
       }
     : {
         preview: '演示效果',
-        code: '示例代码',
         codeExpand: '展开代码',
         codeCollapse: '收起代码',
         copyCode: '复制代码',
@@ -1201,23 +1191,6 @@ const marketingEnabled = shallowRef(true)
       <VSwitch :model-value="true" aria-label="${copy.value.orderNotice}" disabled />
     </label>
   </section>
-</template>
-      `.trim()
-    case 'toast':
-      return `
-<script setup lang="ts">
-import { VToast } from '${packageName}'
-
-const toasts = [
-  { message: '信息提示', type: 'text' },
-  { message: '警告提示', type: 'warning' },
-  { message: '错误提示', type: 'danger' },
-  { message: '成功提示', type: 'success' }
-] as const
-<\/script>
-
-<template>
-  <VToast v-for="toast in toasts" :key="toast.type" :visible="true" :type="toast.type" :message="toast.message" :closeable="false" />
 </template>
       `.trim()
     case 'loading':
@@ -1305,6 +1278,37 @@ function setPlatform(platform: Platform) {
   resetCopyState()
 }
 
+function platformTabId(platform: Platform) {
+  return `form-${props.example}-platform-tab-${platform}`
+}
+
+function handlePlatformTabKeydown(event: KeyboardEvent) {
+  const currentIndex = platforms.indexOf(activePlatform.value)
+  let nextIndex = currentIndex
+  if (event.key === 'ArrowRight') {
+    nextIndex = (currentIndex + 1) % platforms.length
+  }
+  else if (event.key === 'ArrowLeft') {
+    nextIndex = (currentIndex - 1 + platforms.length) % platforms.length
+  }
+  else if (event.key === 'Home') {
+    nextIndex = 0
+  }
+  else if (event.key === 'End') {
+    nextIndex = platforms.length - 1
+  }
+  else {
+    return
+  }
+
+  event.preventDefault()
+  setPlatform(platforms[nextIndex]!)
+  const tabs = (event.currentTarget as HTMLElement)
+    .closest('[role="tablist"]')
+    ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+  tabs?.[nextIndex]?.focus()
+}
+
 function toggleCodeExpanded() {
   codeExpanded.value = !codeExpanded.value
   if (!codeExpanded.value) {
@@ -1387,26 +1391,40 @@ function onFormArrayFailed() {
     <div class="form-demo__stage" :data-platform="activePlatform">
       <div class="form-demo__platform-switch" role="tablist" :aria-label="copy.preview">
         <button
+          :id="platformTabId('h5')"
           type="button"
           role="tab"
+          :aria-controls="platformPanelId"
           :aria-selected="activePlatform === 'h5'"
           :data-active="activePlatform === 'h5'"
+          :tabindex="activePlatform === 'h5' ? 0 : -1"
           @click="setPlatform('h5')"
+          @keydown="handlePlatformTabKeydown"
         >
           H5
         </button>
         <button
+          :id="platformTabId('weapp')"
           type="button"
           role="tab"
+          :aria-controls="platformPanelId"
           :aria-selected="activePlatform === 'weapp'"
           :data-active="activePlatform === 'weapp'"
+          :tabindex="activePlatform === 'weapp' ? 0 : -1"
           @click="setPlatform('weapp')"
+          @keydown="handlePlatformTabKeydown"
         >
           {{ locale === 'en' ? 'Mini Program' : '小程序' }}
         </button>
       </div>
 
-      <div class="form-demo__preview" :data-example="example">
+      <div
+        :id="platformPanelId"
+        class="form-demo__preview"
+        :data-example="example"
+        role="tabpanel"
+        :aria-labelledby="platformTabId(activePlatform)"
+      >
         <section
           v-if="example === 'checkbox'"
           class="form-demo__control-scenario"
@@ -1706,16 +1724,6 @@ function onFormArrayFailed() {
           <VLoading size="sm" tone="primary" />
           <VLoading size="lg" tone="success" />
         </div>
-        <section v-else-if="example === 'toast'" class="form-demo__toast-grid">
-          <VToast
-            v-for="toast in toastItems"
-            :key="toast.id"
-            :visible="true"
-            :type="toast.type"
-            :message="toast.message"
-            :closeable="false"
-          />
-        </section>
         <section
           v-else-if="example === 'uploader'"
           class="form-demo__control-scenario"
@@ -2295,28 +2303,6 @@ function onFormArrayFailed() {
 
     <div v-if="codeExpanded" class="form-demo__code" :data-expanded="String(codeExpanded)">
       <div class="form-demo__code-toolbar">
-        <div class="form-demo__tabs" role="tablist" :aria-label="copy.code">
-          <button
-            class="form-demo__tab"
-            :data-active="activePlatform === 'h5'"
-            type="button"
-            role="tab"
-            :aria-selected="activePlatform === 'h5'"
-            @click="setPlatform('h5')"
-          >
-            {{ copy.h5 }}
-          </button>
-          <button
-            class="form-demo__tab"
-            :data-active="activePlatform === 'weapp'"
-            type="button"
-            role="tab"
-            :aria-selected="activePlatform === 'weapp'"
-            @click="setPlatform('weapp')"
-          >
-            {{ copy.weapp }}
-          </button>
-        </div>
         <button
           class="form-demo__code-copy"
           type="button"
@@ -2354,7 +2340,6 @@ function onFormArrayFailed() {
   --form-demo-border: var(--varo-demo-border);
   --form-demo-shadow: var(--varo-demo-shadow);
   --form-demo-code-bg: #0f1722;
-  --form-demo-code-surface: #172231;
   --form-demo-code-border: #304056;
   --form-demo-code-text: #e8eef5;
   --form-demo-code-muted: #9eacc0;
@@ -2992,30 +2977,6 @@ function onFormArrayFailed() {
     0 14px 28px color-mix(in srgb, var(--varo-foreground) 8%, transparent);
 }
 
-.form-demo__preview[data-example='toast'] {
-  align-items: center;
-  justify-content: center;
-  min-height: 0;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-}
-
-.form-demo__toast-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: end;
-  justify-content: center;
-}
-
-.form-demo__toast-grid :deep(.varo-toast) {
-  position: relative;
-  inset: auto;
-  transform: none;
-}
-
 .form-demo__preview[data-example='calendar'] :deep(.varo-calendar),
 .form-demo__preview[data-example='date-picker'] :deep(.varo-date-picker),
 .form-demo__preview[data-example='cascader'] :deep(.varo-cascader),
@@ -3255,46 +3216,10 @@ function onFormArrayFailed() {
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 12px 12px 0;
 }
 
-.form-demo__tabs {
-  display: inline-flex;
-  gap: 4px;
-  padding: 3px;
-  margin: 0;
-  background: var(--form-demo-code-surface);
-  border: 1px solid var(--form-demo-code-border);
-  border-radius: 10px;
-}
-
-.form-demo__tab {
-  min-height: 36px;
-  padding: 0 14px;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--form-demo-code-muted);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 7px;
-  transition:
-    background 0.18s ease,
-    color 0.18s ease;
-}
-
-.form-demo__tab[data-active='true'] {
-  color: var(--form-demo-code-text);
-  background: #243247;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--varo-primary) 24%, transparent);
-}
-
-.form-demo__tab:hover:not([data-active='true']) {
-  color: var(--form-demo-code-text);
-  background: color-mix(in srgb, var(--varo-primary) 8%, transparent);
-}
-
 .form-demo__code-copy {
   display: inline-flex;
   gap: 6px;
@@ -3369,7 +3294,6 @@ function onFormArrayFailed() {
   line-height: 1;
 }
 
-.form-demo__tab:focus-visible,
 .form-demo__reopen:focus-visible,
 .form-demo__array-add:focus-visible,
 .form-demo__array-secondary:focus-visible,
@@ -3479,9 +3403,7 @@ function onFormArrayFailed() {
   border-radius: 999px;
 }
 
-.form-demo__code,
-.form-demo__tabs,
-.form-demo__tab {
+.form-demo__code {
   border-radius: var(--varo-radius);
 }
 
@@ -3523,15 +3445,6 @@ function onFormArrayFailed() {
   border-color: var(--varo-border-strong);
 }
 
-.form-demo__tabs {
-  background: color-mix(in srgb, var(--varo-card-solid) 8%, transparent);
-}
-
-.form-demo__tab[data-active='true'] {
-  color: var(--varo-foreground);
-  background: var(--varo-card-solid);
-}
-
 :deep(.varo-input__body),
 :deep(.varo-calendar),
 :deep(.varo-date-picker),
diff --git a/apps/docs/src/components/InteractivePreview.vue b/apps/docs/src/components/InteractivePreview.vue
index e3828649..045bd818 100644
--- a/apps/docs/src/components/InteractivePreview.vue
+++ b/apps/docs/src/components/InteractivePreview.vue
@@ -643,25 +643,12 @@ const copy = computed(() => {
 
 :deep(.varo-input__prefix),
 :deep(.varo-input__suffix),
-:deep(.varo-input__clear),
 :deep(.varo-input__word-limit) {
   flex: none;
   font-size: 0.82rem;
   color: var(--vp-c-text-2);
 }
 
-:deep(.varo-input__clear) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  background: color-mix(in srgb, var(--varo-muted) 14%, transparent);
-  border: 0;
-  border-radius: 999px;
-}
-
 :deep(.varo-input[data-invalid='true'] .varo-input__body) {
   border-color: color-mix(in srgb, var(--varo-danger) 52%, transparent);
 }
diff --git a/apps/docs/src/components/ListDemo.vue b/apps/docs/src/components/ListDemo.vue
new file mode 100644
index 00000000..c8232d19
--- /dev/null
+++ b/apps/docs/src/components/ListDemo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { VList } from '@varo-ui/h5'
+import { computed, onBeforeUnmount, shallowRef } from 'vue'
+
+const props = withDefaults(defineProps<{ locale?: 'en' | 'zh' }>(), {
+  locale: 'zh',
+})
+
+const items = shallowRef(Array.from({ length: 8 }, (_, index) => index + 1))
+const loading = shallowRef(false)
+const finished = shallowRef(false)
+let loadTimer: number | undefined
+const copy = computed(() => props.locale === 'en'
+  ? {
+      finished: 'No more records',
+      hint: 'Scroll to the bottom to load the next page.',
+      loading: 'Loading next page',
+      row: 'Record',
+    }
+  : {
+      finished: '没有更多了',
+      hint: '滚动到底部加载下一页。',
+      loading: '正在加载下一页',
+      row: '记录',
+    })
+
+function load() {
+  if (loading.value || finished.value) {
+    return
+  }
+  loading.value = true
+  loadTimer = window.setTimeout(() => {
+    const start = items.value.length
+    items.value = [...items.value, ...Array.from({ length: 5 }, (_, index) => start + index + 1)]
+    loading.value = false
+    finished.value = items.value.length >= 18
+    loadTimer = undefined
+  }, 400)
+}
+
+onBeforeUnmount(() => {
+  if (loadTimer !== undefined) {
+    window.clearTimeout(loadTimer)
+  }
+})
+</script>
+
+<template>
+  <section class="list-demo">
+    <p>{{ copy.hint }}</p>
+    <div class="list-demo__surface">
+      <VList
+        :finished="finished"
+        :finished-text="copy.finished"
+        :immediate="false"
+        :loading="loading"
+        :loading-text="copy.loading"
+        @load="load"
+      >
+        <article v-for="item in items" :key="item" class="list-demo__item">
+          {{ copy.row }} {{ item }}
+        </article>
+      </VList>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.list-demo {
+  display: grid;
+  gap: 8px;
+  width: min(100%, 420px);
+  margin: 16px 0 24px;
+}
+
+.list-demo > p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--varo-muted);
+}
+
+.list-demo__surface {
+  height: 240px;
+  overflow: auto;
+  background: var(--varo-card-solid);
+  border: 1px solid var(--varo-border);
+  border-radius: 16px;
+}
+
+.list-demo__item {
+  min-height: 52px;
+  padding: 14px 16px;
+  color: var(--varo-foreground);
+  border-bottom: 1px solid var(--varo-border);
+}
+</style>
diff --git a/apps/docs/src/components/PlatformTabsDemo.test.ts b/apps/docs/src/components/PlatformTabsDemo.test.ts
index 20079173..f278bb5b 100644
--- a/apps/docs/src/components/PlatformTabsDemo.test.ts
+++ b/apps/docs/src/components/PlatformTabsDemo.test.ts
@@ -74,16 +74,8 @@ describe('PlatformTabsDemo', () => {
     expect(toggle.attributes('aria-label')).toBe('收起代码')
     expect(toggle.text()).toContain('收起代码')
 
-    const codeTabs = codeShell.findAll('.platform-demo__code-tab')
-    expect(codeTabs).toHaveLength(2)
-    expect(codeTabs[0]!.text()).toBe('H5 写法')
-    expect(codeTabs[1]!.text()).toBe('小程序写法')
-    expect(codeTabs[0]!.find('svg').exists()).toBe(false)
-    expect(codeTabs[1]!.find('svg').exists()).toBe(false)
-    expect(codeTabs[0]!.attributes('data-active')).toBe('true')
-    expect(codeTabs[1]!.attributes('data-active')).toBe('false')
-    expect(codeTabs[0]!.attributes('aria-selected')).toBe('true')
-    expect(codeTabs[1]!.attributes('aria-selected')).toBe('false')
+    expect(codeShell.findAll('[role="tab"]')).toHaveLength(0)
+    expect(wrapper.findAll('.platform-demo__platform-switch [role="tab"]')).toHaveLength(2)
     expect(wrapper.findAll('.platform-demo__code-section')).toHaveLength(1)
     expect(codeSection.get('.platform-demo__code-head').text()).toContain('H5 写法')
     expect(codeSection.get('.platform-demo__code-head').text()).toContain('@varo-ui/h5')
@@ -494,8 +486,9 @@ describe('PlatformTabsDemo', () => {
 
     expect(wrapper.get('.platform-demo').attributes('data-platform')).toBe('weapp')
     expect(wrapper.find('.platform-demo__code-shell').exists()).toBe(true)
-    expect(wrapper.get('.platform-demo__evidence strong').text()).toBe('Weapp Contract Preview')
-    expect(wrapper.get('.platform-demo__evidence a').text()).toContain('Weapp DevTools Verified · 2026-08-28')
+    expect(wrapper.get('.platform-demo__evidence strong').text()).toBe('Weapp Preview')
+    expect(wrapper.get('.platform-demo__evidence span').text()).toBe('Browser contract')
+    expect(wrapper.get('.platform-demo__evidence a').text()).toContain('DevTools · 2026-08-28')
     expect(window.sessionStorage.getItem('varo.docs.platform')).toBe('weapp')
 
     await wrapper.findAll('.platform-demo__platform-tab')[0]!.trigger('click')
@@ -558,7 +551,7 @@ describe('PlatformTabsDemo', () => {
     expect(wrapper.get('.platform-demo').attributes('data-platform')).toBe('h5')
   })
 
-  it('expands and switches example code between H5 and mini-program snippets', async () => {
+  it('keeps expanded code synchronized with the upper runtime tabs', async () => {
     const writeText = vi.fn((text: string) => Promise.resolve(text))
     const clipboard = { writeText }
     vi.stubGlobal('navigator', { clipboard })
@@ -574,15 +567,11 @@ describe('PlatformTabsDemo', () => {
     })
 
     await wrapper.get('.platform-demo__code-toggle').trigger('click')
-    const codeShell = wrapper.get('.platform-demo__code-shell')
     const codeSection = wrapper.get('.platform-demo__code-section')
-    const codeTabs = codeShell.findAll('.platform-demo__code-tab')
-    await codeTabs[1]!.trigger('click')
-
-    expect(codeTabs[0]!.attributes('data-active')).toBe('false')
-    expect(codeTabs[1]!.attributes('data-active')).toBe('true')
-    expect(codeTabs[0]!.attributes('aria-selected')).toBe('false')
-    expect(codeTabs[1]!.attributes('aria-selected')).toBe('true')
+    const platformTabs = wrapper.findAll('.platform-demo__platform-tab')
+    expect(platformTabs).toHaveLength(2)
+    expect(codeSection.findAll('[role="tab"]')).toHaveLength(0)
+    await platformTabs[1]!.trigger('click')
     expect(wrapper.findAll('.platform-demo__code-section')).toHaveLength(1)
     expect(codeSection.get('.platform-demo__code-head').text()).toContain('小程序写法')
     expect(codeSection.get('.platform-demo__code-head').text()).toContain('@varo-ui/weapp')
@@ -601,7 +590,9 @@ describe('PlatformTabsDemo', () => {
     expect(copyButton.attributes('aria-label')).toBe('已复制')
     expect(wrapper.get('.platform-demo__code-toast').text()).toContain('已复制到剪贴板')
 
-    await codeTabs[0]!.trigger('click')
+    await platformTabs[0]!.trigger('click')
+    expect(codeSection.get('code').text()).toContain('from \'@varo-ui/h5\'')
+    expect(codeSection.get('code').text()).not.toContain('from \'@varo-ui/weapp\'')
     expect(copyButton.attributes('aria-label')).toBe('复制 H5 代码')
     expect(wrapper.find('.platform-demo__code-toast').exists()).toBe(false)
 
diff --git a/apps/docs/src/components/PlatformTabsDemo.vue b/apps/docs/src/components/PlatformTabsDemo.vue
index dc3be4ba..e7aa059c 100644
--- a/apps/docs/src/components/PlatformTabsDemo.vue
+++ b/apps/docs/src/components/PlatformTabsDemo.vue
@@ -624,23 +624,14 @@ const currentIndicatorItem = computed(
 const indicatorSlideStyle = computed(() => ({
   backgroundImage: `linear-gradient(135deg, rgb(5 8 10 / 92%), rgb(5 8 10 / 58%)), url("${currentIndicatorItem.value.image}")`,
 }))
-const codeExamples = computed(() => [
-  {
-    key: 'h5' as Platform,
-    title: copy.value.h5CodeTitle,
-    code: demo.value.platforms.h5.code,
-    packageName: demo.value.platforms.h5.packageName,
-  },
-  {
-    key: 'weapp' as Platform,
-    title: copy.value.weappCodeTitle,
-    code: demo.value.platforms.weapp.code,
-    packageName: demo.value.platforms.weapp.packageName,
-  },
-])
-const activeCodeExample = computed(
-  () => codeExamples.value.find(item => item.key === activePlatform.value) ?? codeExamples.value[0]!,
-)
+const activeCodeExample = computed(() => {
+  const platform = demo.value.platforms[activePlatform.value]
+  return {
+    code: platform.code,
+    packageName: platform.packageName,
+    title: activePlatform.value === 'h5' ? copy.value.h5CodeTitle : copy.value.weappCodeTitle,
+  }
+})
 const hasControls = computed(() => props.example === 'overview')
 const weappEvidenceHref = computed(() =>
   withDocsBase(`${props.locale === 'en' ? '/en' : ''}/examples/#weapp-devtools-evidence`),
@@ -740,10 +731,6 @@ function setPlatform(platform: Platform) {
   resetCopyState()
 }
 
-function codeTabId(platform: Platform) {
-  return `platform-${props.example}-code-tab-${platform}`
-}
-
 function platformTabId(platform: Platform) {
   return `platform-${props.example}-tab-${platform}`
 }
@@ -872,14 +859,14 @@ onBeforeUnmount(() => {
 
       <section class="platform-demo__panel platform-demo__panel--preview">
         <div class="platform-demo__evidence" :data-level="activePlatform === 'h5' ? 'live' : 'contract-preview'">
-          <strong>{{ activePlatform === 'h5' ? 'H5 Live' : 'Weapp Contract Preview' }}</strong>
+          <strong>{{ activePlatform === 'h5' ? 'H5 Live' : 'Weapp Preview' }}</strong>
           <span>
             {{ activePlatform === 'h5'
               ? (locale === 'en' ? 'Interactive browser runtime' : '浏览器运行时实时交互')
-              : (locale === 'en' ? 'Browser-rendered contract, not a mini-program runtime' : '浏览器渲染的组件契约，并非小程序运行时') }}
+              : (locale === 'en' ? 'Browser contract' : '浏览器契约预览') }}
           </span>
           <a v-if="activePlatform === 'weapp'" :href="weappEvidenceHref">
-            Weapp DevTools Verified · <time :datetime="blockGalleryCaptureDate">{{ blockGalleryCaptureDate }}</time>
+            DevTools · <time :datetime="blockGalleryCaptureDate">{{ blockGalleryCaptureDate }}</time>
           </a>
         </div>
         <div class="platform-demo__phone-frame" :data-platform="activePlatform">
@@ -2253,25 +2240,6 @@ onBeforeUnmount(() => {
 
         <div v-if="codeExpanded" class="platform-demo__code-shell">
           <div class="platform-demo__code-head-row">
-            <div class="platform-demo__code-tabs" role="tablist" :aria-label="copy.codeTitle">
-              <button
-                v-for="codeExample in codeExamples"
-                :id="codeTabId(codeExample.key)"
-                :key="codeExample.key"
-                class="platform-demo__code-tab"
-                :data-platform="codeExample.key"
-                :data-active="activePlatform === codeExample.key"
-                type="button"
-                role="tab"
-                :aria-controls="codePanelId"
-                :aria-selected="activePlatform === codeExample.key"
-                :tabindex="activePlatform === codeExample.key ? 0 : -1"
-                @click="setPlatform(codeExample.key)"
-                @keydown="handlePlatformTabKeydown"
-              >
-                {{ codeExample.title }}
-              </button>
-            </div>
             <button
               class="platform-demo__code-copy"
               type="button"
@@ -2287,8 +2255,8 @@ onBeforeUnmount(() => {
           <section
             :id="codePanelId"
             class="platform-demo__code-section"
-            role="tabpanel"
-            :aria-labelledby="codeTabId(activePlatform)"
+            role="region"
+            :aria-label="activeCodeExample.title"
           >
             <div class="platform-demo__code-head">
               <strong>{{ activeCodeExample.title }}</strong>
@@ -2325,7 +2293,6 @@ onBeforeUnmount(() => {
   --demo-phone-card: var(--varo-demo-phone-card);
   --demo-shadow: var(--varo-demo-shadow);
   --demo-code-bg: #0f1722;
-  --demo-code-surface: #172231;
   --demo-code-border: #304056;
   --demo-code-text: #e8eef5;
   --demo-code-muted: #9eacc0;
@@ -2652,46 +2619,10 @@ onBeforeUnmount(() => {
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 12px 12px 0;
 }
 
-.platform-demo__code-tabs {
-  display: inline-flex;
-  gap: 4px;
-  padding: 3px;
-  background: var(--demo-code-surface);
-  border: 1px solid var(--demo-code-border);
-  border-radius: 10px;
-}
-
-.platform-demo__code-tab {
-  min-height: 36px;
-  padding: 0 14px;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--demo-code-muted);
-  cursor: pointer;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  transition:
-    border-color var(--demo-duration-instant) var(--demo-ease-out),
-    background var(--demo-duration-instant) var(--demo-ease-out),
-    color var(--demo-duration-instant) var(--demo-ease-out);
-}
-
-.platform-demo__code-tab[data-active='true'] {
-  color: #0f1722;
-  background: #f8fafc;
-  border-color: #cbd5e1;
-}
-
-.platform-demo__code-tab:hover:not([data-active='true']) {
-  color: var(--demo-code-text);
-  background: color-mix(in srgb, var(--demo-brand) 10%, transparent);
-}
-
 .platform-demo__code-copy {
   display: inline-flex;
   gap: 8px;
@@ -2835,7 +2766,6 @@ onBeforeUnmount(() => {
 
   .platform-demo__platform-tab,
   .platform-demo__code-toggle,
-  .platform-demo__code-tab,
   .platform-demo__code-copy,
   .platform-demo__chip,
   .platform-demo__evidence a {
@@ -2930,7 +2860,6 @@ onBeforeUnmount(() => {
   border-color: color-mix(in srgb, var(--demo-brand) 40%, var(--demo-border));
 }
 
-.platform-demo__code-tab:focus-visible,
 .platform-demo__code-toggle:focus-visible,
 .platform-demo__code-copy:focus-visible,
 .platform-demo__chip:focus-visible {
@@ -4789,8 +4718,7 @@ onBeforeUnmount(() => {
 }
 
 .platform-demo__trigger,
-.platform-demo__dialog-close,
-:deep(.varo-button) {
+.platform-demo__dialog-close {
   display: inline-flex;
   gap: 8px;
   align-items: center;
@@ -4804,59 +4732,12 @@ onBeforeUnmount(() => {
   border-radius: 16px;
 }
 
-:deep(.varo-button[data-size='sm']) {
-  gap: 6px;
-  min-height: 36px;
-  padding: 0 12px;
-  font-size: 0.82rem;
-  border-radius: 12px;
-}
-
-:deep(.varo-button[data-size='md']) {
-  min-height: 44px;
-  padding: 0 16px;
-  font-size: 0.92rem;
-  border-radius: 16px;
-}
-
-:deep(.varo-button[data-size='lg']) {
-  gap: 10px;
-  min-height: 48px;
-  padding: 0 20px;
-  font-size: 1rem;
-  border-radius: 18px;
-}
-
 .platform-demo__trigger,
 .platform-demo__dialog-close {
   color: var(--varo-primary-foreground);
   background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
 }
 
-:deep(.varo-button[data-disabled='true']) {
-  cursor: not-allowed;
-  opacity: 0.72;
-}
-
-:deep(.varo-button[data-variant='outline']) {
-  color: var(--vp-c-text-1);
-  background: transparent;
-  border-color: var(--vp-c-divider);
-}
-
-:deep(.varo-button[data-variant='ghost']) {
-  color: var(--varo-foreground, var(--demo-brand));
-  background: var(--varo-card-muted, color-mix(in srgb, var(--demo-brand) 10%, transparent));
-}
-
-:deep(.varo-button[data-shape='square']) {
-  border-radius: 6px;
-}
-
-:deep(.varo-button[data-shape='round']) {
-  border-radius: 999px;
-}
-
 :deep(.varo-button[data-hairline='true']) {
   border-width: 0.5px;
 }
@@ -4918,25 +4799,12 @@ onBeforeUnmount(() => {
 
 :deep(.varo-input__prefix),
 :deep(.varo-input__suffix),
-:deep(.varo-input__clear),
 :deep(.varo-input__word-limit) {
   flex: none;
   font-size: 0.82rem;
   color: var(--vp-c-text-2);
 }
 
-:deep(.varo-input__clear) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  background: color-mix(in srgb, var(--varo-muted) 14%, transparent);
-  border: 0;
-  border-radius: 999px;
-}
-
 :deep(.varo-input[data-invalid='true'] .varo-input__body) {
   border-color: color-mix(in srgb, var(--varo-danger) 52%, transparent);
 }
@@ -5375,7 +5243,6 @@ onBeforeUnmount(() => {
 
 .platform-demo__stage:has(.platform-demo__preview-content[data-example='button']) .platform-demo__code-shell {
   --demo-code-bg: var(--demo-surface-strong);
-  --demo-code-surface: var(--demo-surface);
   --demo-code-border: var(--demo-border);
   --demo-code-text: var(--varo-foreground);
   --demo-code-muted: var(--demo-text-muted);
@@ -5524,7 +5391,6 @@ onBeforeUnmount(() => {
 
 .platform-demo__stage:has(.platform-demo__preview-content[data-example='badge']) .platform-demo__code-shell {
   --demo-code-bg: var(--demo-surface-strong);
-  --demo-code-surface: var(--demo-surface);
   --demo-code-border: var(--demo-border);
   --demo-code-text: var(--varo-foreground);
   --demo-code-muted: var(--demo-text-muted);
@@ -5735,7 +5601,6 @@ onBeforeUnmount(() => {
 
 .platform-demo__stage:has(.platform-demo__preview-content[data-example='popover']) .platform-demo__code-shell {
   --demo-code-bg: var(--demo-surface-strong);
-  --demo-code-surface: var(--demo-surface);
   --demo-code-border: var(--demo-border);
   --demo-code-text: var(--varo-foreground);
   --demo-code-muted: var(--demo-text-muted);
@@ -5963,71 +5828,12 @@ onBeforeUnmount(() => {
   padding-block: 12px;
 }
 
-.platform-demo__input-case[data-case='textarea'] :deep(.varo-input__word-limit) {
-  align-self: flex-end;
-  margin-bottom: 14px;
-}
-
-.platform-demo__input-sample :deep(.varo-input__clear) {
-  position: relative;
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  font-size: 0;
-  color: transparent;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 999px;
-}
-
-.platform-demo__input-sample :deep(.varo-input__clear::before) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 1rem;
-  line-height: 1;
-  color: var(--input-muted);
-  content: '×';
-  background: transparent;
-  border-radius: 999px;
-  transition:
-    color 120ms cubic-bezier(0.16, 1, 0.3, 1),
-    background 120ms cubic-bezier(0.16, 1, 0.3, 1),
-    transform 80ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.platform-demo__input-sample :deep(.varo-input__clear:hover::before) {
-  color: var(--input-text);
-  background: var(--input-field-hover);
-}
-
-.platform-demo__input-sample :deep(.varo-input__clear:focus-visible) {
-  outline: none;
-}
-
-.platform-demo__input-sample :deep(.varo-input__clear:focus-visible::before) {
-  color: var(--input-accent);
-  box-shadow: 0 0 0 2px var(--input-accent);
-}
-
-.platform-demo__input-sample :deep(.varo-input__clear:active::before) {
-  transform: scale(0.94);
-}
-
 .platform-demo__preview-content[data-example='input'] {
   display: block;
 }
 
 .platform-demo__stage:has(.platform-demo__preview-content[data-example='input']) .platform-demo__code-shell {
   --demo-code-bg: var(--demo-surface-strong);
-  --demo-code-surface: var(--demo-surface);
   --demo-code-border: var(--demo-border);
   --demo-code-text: var(--varo-foreground);
   --demo-code-muted: var(--demo-text-muted);
@@ -6098,7 +5904,7 @@ onBeforeUnmount(() => {
   }
 }
 
-.platform-demo button:active:not(:disabled) {
+.platform-demo button:not(.varo-button):active:not(:disabled) {
   transform: scale(0.97);
 }
 
diff --git a/apps/docs/src/components/PrimitiveCatalog.vue b/apps/docs/src/components/PrimitiveCatalog.vue
deleted file mode 100644
index a6c72c61..00000000
--- a/apps/docs/src/components/PrimitiveCatalog.vue
+++ /dev/null
@@ -1,377 +0,0 @@
-<script setup lang="ts">
-import { withBase } from 'vitepress'
-
-type Locale = 'zh' | 'en'
-type Category = 'foundation' | 'controls' | 'content' | 'disclosure' | 'layers'
-
-interface CatalogItemDefinition {
-  id: string
-  title: string
-  parts: string
-  summary: Record<Locale, string>
-  category: Category
-}
-
-const props = withDefaults(
-  defineProps<{
-    locale?: Locale
-  }>(),
-  {
-    locale: 'zh',
-  },
-)
-
-const copy = props.locale === 'en'
-  ? {
-      categories: {
-        foundation: 'Foundation',
-        controls: 'Selection & Toggle',
-        content: 'Content & Layout',
-        disclosure: 'Disclosure & Floating',
-        layers: 'Layers',
-      },
-      parts: 'Parts',
-      open: 'Open page',
-    }
-  : {
-      categories: {
-        foundation: '基础控件',
-        controls: '选择与切换',
-        content: '内容与布局',
-        disclosure: '展开与轻浮层',
-        layers: '遮罩与弹层',
-      },
-      parts: 'Parts',
-      open: '打开文档',
-    }
-
-const definitions: CatalogItemDefinition[] = [
-  {
-    id: 'button',
-    title: 'Button',
-    parts: 'ButtonRoot / usePressableRoot',
-    summary: {
-      zh: '统一 pressed、disabled、loading 与原生激活语义。',
-      en: 'Shared pressed, disabled, loading, and native activation semantics.',
-    },
-    category: 'foundation',
-  },
-  {
-    id: 'input',
-    title: 'Input',
-    parts: 'InputRoot / useFieldRoot',
-    summary: {
-      zh: '文本值、格式化、只读、校验与输入事件基座。',
-      en: 'Text value, formatting, readonly, invalid, and input-event foundation.',
-    },
-    category: 'foundation',
-  },
-  {
-    id: 'number-field',
-    title: 'Number Field',
-    parts: 'NumberFieldRoot / Decrement / Input / Increment',
-    summary: {
-      zh: '数值边界、步进、精度与组合式加减控件。',
-      en: 'Numeric bounds, step, precision, and composable increment controls.',
-    },
-    category: 'controls',
-  },
-  {
-    id: 'image',
-    title: 'Image',
-    parts: 'ImageRoot / useImageRoot',
-    summary: {
-      zh: '图片加载、失败、占位与尺寸适配状态。',
-      en: 'Image loading, failure, placeholder, and sizing state.',
-    },
-    category: 'content',
-  },
-  {
-    id: 'cell',
-    title: 'Cell',
-    parts: 'CellGroupRoot / CellRoot',
-    summary: {
-      zh: '列表行、设置项、链接行与键盘激活契约。',
-      en: 'List row, settings item, link row, and keyboard activation contract.',
-    },
-    category: 'content',
-  },
-  {
-    id: 'sticky',
-    title: 'Sticky',
-    parts: 'StickyRoot',
-    summary: {
-      zh: '吸顶状态、偏移量与滚动事件适配。',
-      en: 'Sticky state, offset, and runtime-specific scroll events.',
-    },
-    category: 'content',
-  },
-  {
-    id: 'checkbox',
-    title: 'Checkbox',
-    parts: 'CheckboxRoot / CheckboxIndicator',
-    summary: {
-      zh: '选中态、禁用态与 indicator 渲染契约。',
-      en: 'Checked state, disabled behavior, and indicator rendering.',
-    },
-    category: 'controls',
-  },
-  {
-    id: 'radio-group',
-    title: 'Radio Group',
-    parts: 'RadioGroup / RadioItem / RadioIndicator',
-    summary: {
-      zh: '单选组 value 与选项级 disabled 语义。',
-      en: 'Single-select group value with item-level disabled support.',
-    },
-    category: 'controls',
-  },
-  {
-    id: 'switch',
-    title: 'Switch',
-    parts: 'SwitchRoot / SwitchThumb',
-    summary: {
-      zh: '开关态、loading 与 disabled 契约。',
-      en: 'Binary toggle with loading and disabled contracts.',
-    },
-    category: 'controls',
-  },
-  {
-    id: 'tabs',
-    title: 'Tabs',
-    parts: 'TabsRoot / TabsList / TabsTrigger / TabsContent',
-    summary: {
-      zh: '当前 tab value、orientation 与 panel 关联。',
-      en: 'Tab value ownership, orientation, and panel association.',
-    },
-    category: 'controls',
-  },
-  {
-    id: 'select',
-    title: 'Select',
-    parts: 'SelectRoot / Trigger / Value / Content / Item',
-    summary: {
-      zh: '选择器状态、open 契约与选项组合。',
-      en: 'Composable select state, open contract, and option rendering.',
-    },
-    category: 'controls',
-  },
-  {
-    id: 'collapsible',
-    title: 'Collapsible',
-    parts: 'CollapsibleRoot / Trigger / Content',
-    summary: {
-      zh: '单个展开区域的 open 状态契约。',
-      en: 'Single disclosure open state for expandable content.',
-    },
-    category: 'disclosure',
-  },
-  {
-    id: 'accordion',
-    title: 'Accordion',
-    parts: 'AccordionRoot / Item / Trigger / Content',
-    summary: {
-      zh: 'single/multiple 展开集合与 item disabled。',
-      en: 'Single or multiple expandable sections with item disable.',
-    },
-    category: 'disclosure',
-  },
-  {
-    id: 'popover',
-    title: 'Popover',
-    parts: 'PopoverRoot / Trigger / Content / Close',
-    summary: {
-      zh: '轻量浮层开关与显式 dismiss 契约。',
-      en: 'Lightweight floating layer open/close and explicit dismiss contract.',
-    },
-    category: 'disclosure',
-  },
-  {
-    id: 'dialog',
-    title: 'Dialog',
-    parts: 'DialogRoot / Trigger / Overlay / Content / Close',
-    summary: {
-      zh: '模态打开态、遮罩、内容与退出动作。',
-      en: 'Modal open state, overlay, content, and exit actions.',
-    },
-    category: 'layers',
-  },
-  {
-    id: 'overlay',
-    title: 'Overlay',
-    parts: 'OverlayRoot',
-    summary: {
-      zh: '遮罩可见态、点击关闭与滚动锁定。',
-      en: 'Overlay visibility, click dismiss, and scroll locking.',
-    },
-    category: 'layers',
-  },
-  {
-    id: 'popup',
-    title: 'Popup',
-    parts: 'PopupRoot',
-    summary: {
-      zh: '带定位、遮罩、安全区与关闭行为的弹出层。',
-      en: 'Positioned popup with overlay, safe area, and close behavior.',
-    },
-    category: 'layers',
-  },
-]
-
-const routePrefix = props.locale === 'en' ? '/en' : ''
-const groups = (['foundation', 'controls', 'content', 'disclosure', 'layers'] as const).map(id => ({
-  id,
-  title: copy.categories[id],
-  items: definitions
-    .filter(item => item.category === id)
-    .map(item => ({
-      ...item,
-      href: `${routePrefix}/primitives/${item.id}`,
-      summary: item.summary[props.locale],
-    })),
-}))
-</script>
-
-<template>
-  <div class="primitive-catalog">
-    <section v-for="group in groups" :key="group.id" class="primitive-catalog__group">
-      <header class="primitive-catalog__group-head">
-        <h3>{{ group.title }}</h3>
-        <span>{{ group.items.length }}</span>
-      </header>
-      <div class="primitive-catalog__grid">
-        <a
-          v-for="item in group.items"
-          :key="item.id"
-          class="primitive-catalog__card"
-          :href="withBase(item.href)"
-        >
-          <div class="primitive-catalog__card-top">
-            <strong>{{ item.title }}</strong>
-            <span>{{ copy.open }}</span>
-          </div>
-          <p>{{ item.summary }}</p>
-          <small>
-            <em>{{ copy.parts }}</em>
-            {{ item.parts }}
-          </small>
-        </a>
-      </div>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-.primitive-catalog {
-  display: grid;
-  gap: 18px;
-  margin: 18px 0 28px;
-}
-
-.primitive-catalog__group {
-  display: grid;
-  gap: 12px;
-}
-
-.primitive-catalog__group-head {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.primitive-catalog__group-head h3 {
-  margin: 0;
-  font-size: 1rem;
-  letter-spacing: -0.02em;
-}
-
-.primitive-catalog__group-head span {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  padding: 0 10px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--varo-muted);
-  background: color-mix(in srgb, var(--varo-demo-surface-strong, var(--varo-card-solid)) 92%, transparent);
-  border: 1px solid var(--varo-demo-border, var(--varo-border));
-  border-radius: 999px;
-}
-
-.primitive-catalog__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px;
-}
-
-.primitive-catalog__card {
-  display: grid;
-  gap: 10px;
-  min-height: 132px;
-  padding: 14px;
-  color: inherit;
-  text-decoration: none;
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--varo-demo-surface, var(--varo-card-solid)) 94%, transparent),
-    var(--varo-demo-surface-strong, var(--varo-card-solid))
-  );
-  border: 1px solid var(--varo-demo-border, var(--varo-border));
-  border-radius: 16px;
-  box-shadow: var(--varo-demo-shadow, var(--varo-shadow-sm));
-  transition:
-    border-color 160ms ease,
-    transform 160ms ease,
-    box-shadow 160ms ease;
-}
-
-.primitive-catalog__card:hover {
-  border-color: color-mix(in srgb, var(--varo-primary) 42%, var(--varo-demo-border, var(--varo-border)));
-  box-shadow: 0 12px 28px color-mix(in srgb, var(--varo-primary) 12%, transparent);
-  transform: translateY(-1px);
-}
-
-.primitive-catalog__card:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--varo-primary) 70%, transparent);
-  outline-offset: 2px;
-}
-
-.primitive-catalog__card-top {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.primitive-catalog__card-top strong {
-  font-size: 0.98rem;
-}
-
-.primitive-catalog__card-top span {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--varo-demo-brand, var(--varo-primary));
-}
-
-.primitive-catalog__card p {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--varo-muted);
-}
-
-.primitive-catalog__card small {
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--varo-foreground);
-}
-
-.primitive-catalog__card small em {
-  display: block;
-  margin-bottom: 2px;
-  font-style: normal;
-  font-weight: 700;
-  color: var(--varo-muted);
-}
-</style>
diff --git a/apps/docs/src/components/PrimitiveExample.vue b/apps/docs/src/components/PrimitiveExample.vue
index 69cc3732..950117c9 100644
--- a/apps/docs/src/components/PrimitiveExample.vue
+++ b/apps/docs/src/components/PrimitiveExample.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Locale, PrimitiveExampleName } from './primitiveExamples'
-import { computed, onBeforeUnmount, ref, useSlots } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import PrimitiveExamplePreview from './PrimitiveExamplePreview.vue'
 import {
 
@@ -8,7 +8,7 @@ import {
 } from './primitiveExamples'
 
 type Platform = 'h5' | 'weapp'
-type ViewMode = 'preview' | 'code' | 'contract'
+type ViewMode = 'preview' | 'code'
 
 const props = withDefaults(
   defineProps<{
@@ -30,7 +30,6 @@ const props = withDefaults(
 
 const example = computed(() => resolvePrimitiveExample(props.name, props.locale))
 
-const slots = useSlots()
 const platform = ref<Platform>('h5')
 const view = ref<ViewMode>('preview')
 const copyState = ref<'idle' | 'copied' | 'unsupported'>('idle')
@@ -44,15 +43,12 @@ const copy = computed(() =>
         weapp: 'Mini-program',
         preview: 'Preview',
         code: 'Code',
-        contract: 'Runtime Contract',
         package: 'Package',
         copy: 'Copy code',
         copied: 'Copied',
         manual: 'Manual copy',
         success: 'Copied to clipboard',
         unsupported: 'Copy the code manually',
-        contractNote: 'Documentation contract only — not a mini-program runtime preview.',
-        noPreview: 'This example does not include a live H5 preview slot.',
       }
     : {
         platform: '运行时',
@@ -60,22 +56,17 @@ const copy = computed(() =>
         weapp: '小程序',
         preview: '预览',
         code: '代码',
-        contract: '运行时契约',
         package: '安装包',
         copy: '复制代码',
         copied: '已复制',
         manual: '手动复制',
         success: '已复制到剪贴板',
         unsupported: '请手动复制代码',
-        contractNote: '仅文档契约说明，不是小程序运行时预览。',
-        noPreview: '当前示例未提供 H5 实时预览插槽。',
       },
 )
 
 const activePackage = computed(
-  () =>
-    props.packageName
-    || (platform.value === 'h5' ? '@varo-ui/headless' : '@varo-ui/headless'),
+  () => props.packageName || '@varo-ui/headless',
 )
 
 const activeCode = computed(
@@ -89,18 +80,10 @@ const activeContractRows = computed(() =>
   props.contractRows?.length ? props.contractRows : example.value.contractRows,
 )
 
-const viewOptions = computed(() => {
-  if (platform.value === 'h5') {
-    return [
-      { id: 'preview' as const, label: copy.value.preview },
-      { id: 'code' as const, label: copy.value.code },
-    ]
-  }
-  return [
-    { id: 'contract' as const, label: copy.value.contract },
-    { id: 'code' as const, label: copy.value.code },
-  ]
-})
+const viewOptions = computed(() => [
+  { id: 'preview' as const, label: copy.value.preview },
+  { id: 'code' as const, label: copy.value.code },
+])
 
 const copyLabel = computed(() => {
   if (copyState.value === 'copied') {
@@ -112,8 +95,7 @@ const copyLabel = computed(() => {
   return copy.value.copy
 })
 
-const showPreview = computed(() => platform.value === 'h5' && view.value === 'preview')
-const showContract = computed(() => platform.value === 'weapp' && view.value === 'contract')
+const showPreview = computed(() => view.value === 'preview')
 const showCode = computed(() => view.value === 'code')
 
 function resetCopy() {
@@ -126,7 +108,7 @@ function resetCopy() {
 
 function setPlatform(next: Platform) {
   platform.value = next
-  view.value = next === 'h5' ? 'preview' : 'contract'
+  view.value = 'preview'
   resetCopy()
 }
 
@@ -198,16 +180,9 @@ onBeforeUnmount(() => resetCopy())
       <strong>{{ activePackage }}</strong>
     </div>
 
-    <div v-if="showPreview" class="primitive-example__preview">
-      <slot v-if="slots.preview" name="preview" />
-      <PrimitiveExamplePreview v-else :name="name" />
-    </div>
-
-    <div v-else-if="showContract" class="primitive-example__contract">
-      <p class="primitive-example__contract-note">
-        {{ copy.contractNote }}
-      </p>
-      <table>
+    <div v-if="showPreview" class="primitive-example__preview" :data-platform="platform">
+      <PrimitiveExamplePreview :name="name" :platform="platform" />
+      <table v-if="platform === 'weapp'" class="primitive-example__contract-table">
         <tbody>
           <tr v-for="row in activeContractRows" :key="row.label">
             <th>{{ row.label }}</th>
@@ -344,18 +319,12 @@ onBeforeUnmount(() => resetCopy())
 }
 
 .primitive-example__preview,
-.primitive-example__contract,
 .primitive-example__code {
   background: color-mix(in srgb, var(--pe-surface-strong) 90%, transparent);
   border: 1px solid var(--pe-border);
   border-radius: 16px;
 }
 
-.primitive-example__contract,
-.primitive-example__code {
-  overflow: hidden;
-}
-
 .primitive-example__preview {
   position: relative;
   min-height: 88px;
@@ -363,38 +332,26 @@ onBeforeUnmount(() => resetCopy())
   overflow: visible;
 }
 
-.primitive-example__empty {
-  margin: 0;
-  font-size: 13px;
-  color: var(--varo-muted);
-}
-
-.primitive-example__contract {
-  padding: 12px 14px 14px;
-}
-
-.primitive-example__contract-note {
-  margin: 0 0 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--varo-muted);
+.primitive-example__preview[data-platform='weapp'] {
+  display: grid;
+  gap: 14px;
 }
 
-.primitive-example__contract table {
+.primitive-example__contract-table {
   width: 100%;
   font-size: 13px;
   border-collapse: collapse;
 }
 
-.primitive-example__contract th,
-.primitive-example__contract td {
-  padding: 8px 0;
+.primitive-example__contract-table th,
+.primitive-example__contract-table td {
+  padding: 10px 12px;
   vertical-align: top;
   text-align: left;
   border-top: 1px solid var(--pe-border);
 }
 
-.primitive-example__contract th {
+.primitive-example__contract-table th {
   width: 34%;
   font-weight: 650;
   color: var(--varo-muted);
diff --git a/apps/docs/src/components/PrimitiveExamplePreview.test.ts b/apps/docs/src/components/PrimitiveExamplePreview.test.ts
index cebbfe85..01fc3f30 100644
--- a/apps/docs/src/components/PrimitiveExamplePreview.test.ts
+++ b/apps/docs/src/components/PrimitiveExamplePreview.test.ts
@@ -1,22 +1,44 @@
 import type { PrimitiveExampleName } from './primitiveExamples'
+import * as WeappPrimitives from '@varo-ui/weapp/primitives'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
+import PrimitiveExample from './PrimitiveExample.vue'
 import PrimitiveExamplePreview from './PrimitiveExamplePreview.vue'
 
 const wrappers: Array<ReturnType<typeof mount>> = []
-function mountPreview(name: PrimitiveExampleName) {
-  const wrapper = mount(PrimitiveExamplePreview, { props: { name } })
+function mountPreview(name: PrimitiveExampleName, platform: 'h5' | 'weapp' = 'h5') {
+  const wrapper = mount(PrimitiveExamplePreview, { props: { name, platform } })
   wrappers.push(wrapper)
   return wrapper
 }
 
+const weappPrimitiveRoots = {
+  'accordion': WeappPrimitives.AccordionRoot,
+  'button': WeappPrimitives.ButtonRoot,
+  'cell': WeappPrimitives.CellGroupRoot,
+  'checkbox': WeappPrimitives.CheckboxRoot,
+  'collapsible': WeappPrimitives.CollapsibleRoot,
+  'dialog': WeappPrimitives.DialogRoot,
+  'image': WeappPrimitives.ImageRoot,
+  'input': WeappPrimitives.InputRoot,
+  'number-field': WeappPrimitives.NumberFieldRoot,
+  'overlay': WeappPrimitives.OverlayRoot,
+  'popover': WeappPrimitives.PopoverRoot,
+  'popup': WeappPrimitives.PopupRoot,
+  'radio-group': WeappPrimitives.RadioGroup,
+  'select': WeappPrimitives.SelectRoot,
+  'sticky': WeappPrimitives.StickyRoot,
+  'switch': WeappPrimitives.SwitchRoot,
+  'tabs': WeappPrimitives.TabsRoot,
+} satisfies Record<PrimitiveExampleName, object>
+
 afterEach(() => {
   wrappers.splice(0).forEach(wrapper => wrapper.unmount())
 })
 
 describe('foundational primitive previews', () => {
-  it('renders every newly documented public primitive', () => {
+  it('renders every documented public primitive in both runtimes', async () => {
     const names = [
       'button',
       'input',
@@ -24,6 +46,14 @@ describe('foundational primitive previews', () => {
       'image',
       'cell',
       'sticky',
+      'checkbox',
+      'radio-group',
+      'switch',
+      'tabs',
+      'select',
+      'collapsible',
+      'accordion',
+      'popover',
       'dialog',
       'overlay',
       'popup',
@@ -32,6 +62,22 @@ describe('foundational primitive previews', () => {
     names.forEach((name) => {
       expect(mountPreview(name).get('.primitive-example-preview').element.children.length, name).toBeGreaterThan(0)
     })
+
+    for (const name of names) {
+      const preview = mountPreview(name, 'weapp')
+      expect(preview.get('.primitive-example-preview').attributes('data-name'), name).toBe(name)
+      expect(preview.get('.primitive-example-preview').attributes('data-platform'), name).toBe('weapp')
+      if (name === 'overlay') {
+        await preview.get('button').trigger('click')
+        await nextTick()
+      }
+      expect(preview.findComponent(weappPrimitiveRoots[name]).exists(), name).toBe(true)
+      if (name !== 'button' && name !== 'overlay' && name !== 'popup') {
+        expect(preview.findComponent(WeappPrimitives.ButtonRoot).exists(), name).toBe(false)
+      }
+    }
+
+    expect(mountPreview('image').get('img').attributes('src')).toBe('/logo.svg')
   })
 
   it('exercises press, input, numeric, and cell state', async () => {
@@ -73,3 +119,21 @@ describe('foundational primitive previews', () => {
     expect(popup.find('.varo-popup__content').exists()).toBe(false)
   })
 })
+
+describe('primitive example Weapp preview', () => {
+  it('renders the matching Weapp primitive inside VitePress', async () => {
+    const wrapper = mount(PrimitiveExample, { props: { name: 'button', locale: 'zh' } })
+    wrappers.push(wrapper)
+
+    await wrapper.findAll('[role="tab"]').find(tab => tab.text() === '小程序')!.trigger('click')
+    await nextTick()
+
+    const preview = wrapper.getComponent(PrimitiveExamplePreview)
+    expect(wrapper.find('iframe').exists()).toBe(false)
+    expect(preview.props('platform')).toBe('weapp')
+    expect(preview.attributes('data-name')).toBe('button')
+    expect(preview.findComponent(WeappPrimitives.ButtonRoot).exists()).toBe(true)
+    expect(preview.findComponent(WeappPrimitives.InputRoot).exists()).toBe(false)
+    expect(wrapper.find('.primitive-example__contract-table').exists()).toBe(true)
+  })
+})
diff --git a/apps/docs/src/components/PrimitiveExamplePreview.vue b/apps/docs/src/components/PrimitiveExamplePreview.vue
index 8510d3ae..1184cbb3 100644
--- a/apps/docs/src/components/PrimitiveExamplePreview.vue
+++ b/apps/docs/src/components/PrimitiveExamplePreview.vue
@@ -1,54 +1,70 @@
 <script setup lang="ts">
 import type { PrimitiveExampleName } from './primitiveExamples'
-import {
-  AccordionContent,
-  AccordionItem,
-  AccordionRoot,
-  AccordionTrigger,
-  ButtonRoot,
-  CellGroupRoot,
-  CellRoot,
-  CheckboxIndicator,
-  CheckboxRoot,
-  CollapsibleContent,
-  CollapsibleRoot,
-  CollapsibleTrigger,
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogRoot,
-  DialogTrigger,
-  ImageRoot,
-  InputRoot,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldInput,
-  NumberFieldRoot,
-  OverlayRoot,
-  PopoverClose,
-  PopoverContent,
-  PopoverRoot,
-  PopoverTrigger,
-  PopupRoot,
-  RadioGroup,
-  RadioIndicator,
-  RadioItem,
-  SelectContent,
-  SelectItem,
-  SelectRoot,
-  SelectTrigger,
-  SelectValue,
-  StickyRoot,
-  SwitchRoot,
-  SwitchThumb,
-  TabsContent,
-  TabsList,
-  TabsRoot,
-  TabsTrigger,
-} from '@varo/primitives-h5'
-import { shallowRef } from 'vue'
-
-defineProps<{ name: PrimitiveExampleName }>()
+import * as WeappPrimitives from '@varo-ui/weapp/primitives'
+import * as H5Primitives from '@varo/primitives-h5'
+import { computed, shallowRef } from 'vue'
+
+type PreviewPlatform = 'h5' | 'weapp'
+type PrimitiveRuntime = typeof H5Primitives
+
+const props = withDefaults(defineProps<{
+  name: PrimitiveExampleName
+  platform?: PreviewPlatform
+}>(), {
+  platform: 'h5',
+})
+
+const primitiveRuntime = computed<PrimitiveRuntime>(() =>
+  props.platform === 'weapp' ? WeappPrimitives as PrimitiveRuntime : H5Primitives,
+)
+function primitive<Name extends keyof PrimitiveRuntime>(name: Name) {
+  return computed(() => primitiveRuntime.value[name])
+}
+
+const AccordionContent = primitive('AccordionContent')
+const AccordionItem = primitive('AccordionItem')
+const AccordionRoot = primitive('AccordionRoot')
+const AccordionTrigger = primitive('AccordionTrigger')
+const ButtonRoot = primitive('ButtonRoot')
+const CellGroupRoot = primitive('CellGroupRoot')
+const CellRoot = primitive('CellRoot')
+const CheckboxIndicator = primitive('CheckboxIndicator')
+const CheckboxRoot = primitive('CheckboxRoot')
+const CollapsibleContent = primitive('CollapsibleContent')
+const CollapsibleRoot = primitive('CollapsibleRoot')
+const CollapsibleTrigger = primitive('CollapsibleTrigger')
+const DialogClose = primitive('DialogClose')
+const DialogContent = primitive('DialogContent')
+const DialogOverlay = primitive('DialogOverlay')
+const DialogRoot = primitive('DialogRoot')
+const DialogTrigger = primitive('DialogTrigger')
+const ImageRoot = primitive('ImageRoot')
+const InputRoot = primitive('InputRoot')
+const NumberFieldDecrement = primitive('NumberFieldDecrement')
+const NumberFieldIncrement = primitive('NumberFieldIncrement')
+const NumberFieldInput = primitive('NumberFieldInput')
+const NumberFieldRoot = primitive('NumberFieldRoot')
+const OverlayRoot = primitive('OverlayRoot')
+const PopoverClose = primitive('PopoverClose')
+const PopoverContent = primitive('PopoverContent')
+const PopoverRoot = primitive('PopoverRoot')
+const PopoverTrigger = primitive('PopoverTrigger')
+const PopupRoot = primitive('PopupRoot')
+const RadioGroup = primitive('RadioGroup')
+const RadioIndicator = primitive('RadioIndicator')
+const RadioItem = primitive('RadioItem')
+const SelectContent = primitive('SelectContent')
+const SelectItem = primitive('SelectItem')
+const SelectRoot = primitive('SelectRoot')
+const SelectTrigger = primitive('SelectTrigger')
+const SelectValue = primitive('SelectValue')
+const StickyRoot = primitive('StickyRoot')
+const SwitchRoot = primitive('SwitchRoot')
+const SwitchThumb = primitive('SwitchThumb')
+const TabsContent = primitive('TabsContent')
+const TabsList = primitive('TabsList')
+const TabsRoot = primitive('TabsRoot')
+const TabsTrigger = primitive('TabsTrigger')
 
 const buttonClicks = shallowRef(0)
 const inputValue = shallowRef('Editable primitive')
@@ -69,11 +85,11 @@ const selectOptions = [
 const collapsibleOpen = shallowRef(false)
 const accordionValue = shallowRef<string | string[] | undefined>('one')
 const popoverOpen = shallowRef(false)
-const imageSource = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E%3Crect width=%2296%22 height=%2296%22 rx=%2220%22 fill=%22%2307c160%22/%3E%3Cpath d=%22M24 28h18l14 20-14 20H24l14-20-14-20Zm32 0h16L58 48l14 20H56L42 48l14-20Z%22 fill=%22white%22/%3E%3C/svg%3E'
+const imageSource = '/logo.svg'
 </script>
 
 <template>
-  <div class="primitive-example-preview">
+  <div class="primitive-example-preview" :data-name="props.name" :data-platform="props.platform">
     <ButtonRoot v-if="name === 'button'" class="pe-chip" @click="buttonClicks += 1">
       Pressed {{ buttonClicks }} times
     </ButtonRoot>
@@ -500,17 +516,19 @@ const imageSource = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/s
 
 .pe-image {
   position: relative;
+  box-sizing: border-box;
   display: grid;
   place-items: center;
   overflow: hidden;
-  background: var(--varo-demo-surface-strong, var(--varo-card-solid));
+  background: var(--varo-card-solid, #fbfdfc);
   border: 1px solid var(--varo-demo-border, var(--varo-border));
 }
 
 .pe-image :deep(.varo-image__img) {
   display: block;
-  width: 100%;
-  height: 100%;
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
 }
 
 .pe-sticky {
diff --git a/apps/docs/src/components/PullRefreshDemo.vue b/apps/docs/src/components/PullRefreshDemo.vue
new file mode 100644
index 00000000..e8a6c8fa
--- /dev/null
+++ b/apps/docs/src/components/PullRefreshDemo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { VPullRefresh } from '@varo-ui/h5'
+import { computed, onBeforeUnmount, shallowRef } from 'vue'
+
+const props = withDefaults(defineProps<{ locale?: 'en' | 'zh' }>(), {
+  locale: 'zh',
+})
+
+const loading = shallowRef(false)
+const refreshCount = shallowRef(0)
+let refreshTimer: number | undefined
+const copy = computed(() => props.locale === 'en'
+  ? {
+      idle: 'Pull down inside the list, then release after the threshold.',
+      loading: 'Refreshing',
+      prefix: 'Update',
+      refreshed: 'Refresh completed',
+      release: 'Release to refresh',
+      pull: 'Pull to refresh',
+    }
+  : {
+      idle: '在列表内向下拖动，超过阈值后释放。',
+      loading: '正在刷新',
+      prefix: '动态',
+      refreshed: '刷新完成',
+      release: '释放刷新',
+      pull: '下拉刷新',
+    })
+const items = computed(() => Array.from({ length: 8 }, (_, index) => ({
+  id: `${refreshCount.value}-${index}`,
+  label: `${copy.value.prefix} ${refreshCount.value + 1}.${index + 1}`,
+})))
+const status = computed(() => loading.value
+  ? copy.value.loading
+  : refreshCount.value > 0
+    ? `${copy.value.refreshed} #${refreshCount.value}`
+    : copy.value.idle)
+
+function refresh() {
+  if (loading.value) {
+    return
+  }
+  loading.value = true
+  refreshTimer = window.setTimeout(() => {
+    refreshCount.value += 1
+    loading.value = false
+    refreshTimer = undefined
+  }, 500)
+}
+
+onBeforeUnmount(() => {
+  if (refreshTimer !== undefined) {
+    window.clearTimeout(refreshTimer)
+  }
+})
+</script>
+
+<template>
+  <section class="pull-refresh-demo">
+    <VPullRefresh
+      class="pull-refresh-demo__surface"
+      :loading="loading"
+      :loading-text="copy.loading"
+      :pull-text="copy.pull"
+      :release-text="copy.release"
+      @refresh="refresh"
+    >
+      <article v-for="item in items" :key="item.id" class="pull-refresh-demo__item">
+        {{ item.label }}
+      </article>
+    </VPullRefresh>
+    <output class="pull-refresh-demo__status" aria-live="polite">
+      {{ status }}
+    </output>
+  </section>
+</template>
+
+<style scoped>
+.pull-refresh-demo {
+  display: grid;
+  gap: 10px;
+  width: min(100%, 420px);
+  margin: 16px 0 24px;
+}
+
+.pull-refresh-demo__surface {
+  height: 240px;
+  background: var(--varo-card-solid);
+  border: 1px solid var(--varo-border);
+  border-radius: 16px;
+}
+
+.pull-refresh-demo__item {
+  min-height: 52px;
+  padding: 14px 16px;
+  color: var(--varo-foreground);
+  border-bottom: 1px solid var(--varo-border);
+}
+
+.pull-refresh-demo__status {
+  min-height: 20px;
+  font-size: 13px;
+  color: var(--varo-muted);
+}
+</style>
diff --git a/apps/docs/src/components/RegistryInstallStrip.vue b/apps/docs/src/components/RegistryInstallStrip.vue
deleted file mode 100644
index d39d5c07..00000000
--- a/apps/docs/src/components/RegistryInstallStrip.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { withBase } from 'vitepress'
-import { computed, onBeforeUnmount, shallowRef } from 'vue'
-
-type Locale = 'en' | 'zh'
-type RegistryTarget = 'h5' | 'weapp'
-type CopyState = 'copied' | 'idle' | 'unsupported'
-
-const props = withDefaults(
-  defineProps<{
-    item: `components/${string}`
-    locale?: Locale
-    targets: RegistryTarget[]
-    wrapperTargets?: RegistryTarget[]
-  }>(),
-  {
-    locale: 'zh',
-    wrapperTargets: undefined,
-  },
-)
-
-const copiedCommand = shallowRef('')
-const copyState = shallowRef<CopyState>('idle')
-let copyTimer: number | undefined
-
-const copy = computed(() => props.locale === 'zh'
-  ? {
-      copied: '已复制',
-      copy: '复制命令',
-      copyManual: '请手动复制命令',
-      description: '在项目根目录执行。CLI 会把目标端源码和 Registry 依赖写入项目。',
-      h5: 'H5',
-      title: 'Registry 优先安装',
-      weapp: '小程序',
-      weappSetup: '小程序 Registry 首次接入还需要一次性配置 Wevu 7 全局样式和 Tailwind。',
-      weappSetupLink: '查看接入步骤',
-      wrapper: '封装包导入（次选）',
-      wrapperDescription: '需要预构建封装时，再从对应运行时包导入。',
-    }
-  : {
-      copied: 'Copied',
-      copy: 'Copy command',
-      copyManual: 'Copy the command manually',
-      description: 'Run at the project root. The CLI writes target-specific source and Registry dependencies into your project.',
-      h5: 'H5',
-      title: 'Registry-first install',
-      weapp: 'Mini Program',
-      weappSetup: 'A first-time Mini Program Registry setup must configure the Wevu 7 global styles and Tailwind.',
-      weappSetupLink: 'Open the setup guide',
-      wrapper: 'Wrapper-package imports (secondary)',
-      wrapperDescription: 'Use the matching runtime package only when you prefer a prebuilt wrapper.',
-    })
-
-const installCommands = computed(() => props.targets.map(target => ({
-  command: `pnpm dlx @varo-ui/cli add --target ${target} ${props.item}`,
-  label: target === 'h5' ? copy.value.h5 : copy.value.weapp,
-  target,
-})))
-
-const hasWeappTarget = computed(() => props.targets.includes('weapp'))
-const weappSetupHref = computed(() => withBase(
-  props.locale === 'zh' ? '/guide/shadcn-mode' : '/en/guide/shadcn-mode',
-))
-
-const secondaryPackages = computed(() => {
-  const targets = props.wrapperTargets ?? props.targets
-  return targets.map(target => target === 'h5' ? '@varo-ui/h5' : '@varo-ui/weapp')
-})
-
-function copyButtonLabel(command: string) {
-  if (copiedCommand.value !== command) {
-    return copy.value.copy
-  }
-  return copyState.value === 'copied' ? copy.value.copied : copy.value.copyManual
-}
-
-async function copyCommand(command: string) {
-  copiedCommand.value = command
-  if (typeof navigator === 'undefined' || !navigator.clipboard) {
-    copyState.value = 'unsupported'
-    return
-  }
-
-  try {
-    await navigator.clipboard.writeText(command)
-    copyState.value = 'copied'
-  }
-  catch {
-    copyState.value = 'unsupported'
-  }
-
-  if (copyTimer !== undefined) {
-    window.clearTimeout(copyTimer)
-  }
-  copyTimer = window.setTimeout(() => {
-    copiedCommand.value = ''
-    copyState.value = 'idle'
-    copyTimer = undefined
-  }, 1400)
-}
-
-onBeforeUnmount(() => {
-  if (copyTimer !== undefined) {
-    window.clearTimeout(copyTimer)
-  }
-})
-</script>
-
-<template>
-  <aside class="custom-block tip registry-install-strip" :aria-label="copy.title">
-    <p class="custom-block-title">
-      {{ copy.title }}
-    </p>
-    <p>{{ copy.description }}</p>
-    <ul>
-      <li v-for="install in installCommands" :key="install.target">
-        <strong>{{ install.label }}</strong>
-        <code>{{ install.command }}</code>
-        <button
-          type="button"
-          :aria-label="`${copyButtonLabel(install.command)}: ${install.label}`"
-          @click="copyCommand(install.command)"
-        >
-          {{ copyButtonLabel(install.command) }}
-        </button>
-      </li>
-    </ul>
-    <p v-if="hasWeappTarget">
-      {{ copy.weappSetup }}
-      <a :href="weappSetupHref">{{ copy.weappSetupLink }}</a>
-    </p>
-    <p v-if="secondaryPackages.length">
-      <strong>{{ copy.wrapper }}:</strong>
-      {{ copy.wrapperDescription }}
-      <code v-for="packageName in secondaryPackages" :key="packageName">{{ packageName }}</code>
-    </p>
-    <output v-if="copyState === 'unsupported'" aria-live="polite">
-      {{ copy.copyManual }}
-    </output>
-  </aside>
-</template>
-
-<style scoped>
-.registry-install-strip button {
-  min-height: 44px;
-  padding: 0 10px;
-  font: inherit;
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--varo-primary-text);
-  cursor: pointer;
-  background: var(--varo-primary-soft);
-  border: 1px solid color-mix(in srgb, var(--varo-primary) 36%, var(--varo-border));
-  border-radius: var(--varo-radius);
-}
-
-.registry-install-strip button:focus-visible {
-  outline: 2px solid var(--varo-ui-focus, var(--varo-foreground));
-  outline-offset: 2px;
-}
-</style>
diff --git a/apps/docs/src/components/SignatureDemo.vue b/apps/docs/src/components/SignatureDemo.vue
new file mode 100644
index 00000000..04a10605
--- /dev/null
+++ b/apps/docs/src/components/SignatureDemo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { SignatureStroke } from '@varo-ui/h5'
+import { VSignature } from '@varo-ui/h5'
+import { computed, shallowRef } from 'vue'
+
+const props = withDefaults(defineProps<{ locale?: 'en' | 'zh' }>(), {
+  locale: 'zh',
+})
+
+const value = shallowRef<SignatureStroke[]>([])
+const status = shallowRef('')
+const copy = computed(() => props.locale === 'en'
+  ? {
+      aria: 'Draw signature',
+      clear: 'Clear signature',
+      empty: 'Draw in the canvas with a pointer or touch.',
+      strokes: 'Committed strokes',
+    }
+  : {
+      aria: '绘制签名',
+      clear: '清除签名',
+      empty: '请在画布中使用指针或触摸绘制。',
+      strokes: '已提交笔画',
+    })
+
+function change(strokes: SignatureStroke[]) {
+  status.value = `${copy.value.strokes}：${strokes.length}`
+}
+
+function clear() {
+  status.value = copy.value.empty
+}
+</script>
+
+<template>
+  <section class="signature-demo">
+    <VSignature
+      v-model:value="value"
+      :aria-label="copy.aria"
+      :clear-text="copy.clear"
+      @change="change"
+      @clear="clear"
+    />
+    <output class="signature-demo__status" aria-live="polite">
+      {{ status || copy.empty }}
+    </output>
+  </section>
+</template>
+
+<style scoped>
+.signature-demo {
+  display: grid;
+  gap: 10px;
+  width: min(100%, 480px);
+  margin: 16px 0 24px;
+}
+
+.signature-demo__status {
+  min-height: 20px;
+  font-size: 13px;
+  color: var(--varo-muted);
+}
+</style>
diff --git a/apps/docs/src/components/ToastDemo.vue b/apps/docs/src/components/ToastDemo.vue
new file mode 100644
index 00000000..9ce40333
--- /dev/null
+++ b/apps/docs/src/components/ToastDemo.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { VToastType } from '@varo-ui/h5'
+import { VButton, VToast, VToastRegion } from '@varo-ui/h5'
+import { computed, onBeforeUnmount, shallowRef } from 'vue'
+
+interface DemoToast {
+  actionText?: string
+  id: string
+  message: string
+  title: string
+  type: VToastType
+}
+
+const props = withDefaults(defineProps<{ locale?: 'en' | 'zh' }>(), {
+  locale: 'zh',
+})
+
+const copy = computed(() => props.locale === 'en'
+  ? {
+      deploy: 'Deploy update',
+      deploying: 'Deploying the latest component build.',
+      done: 'The component build is available.',
+      loading: 'Deploying',
+      success: 'Deployment complete',
+      retry: 'Retry',
+      close: 'Dismiss notification',
+      action: 'Toast action',
+    }
+  : {
+      deploy: '发布更新',
+      deploying: '正在发布最新组件构建。',
+      done: '组件构建已可用。',
+      loading: '正在发布',
+      success: '发布完成',
+      retry: '重试',
+      close: '关闭通知',
+      action: 'Toast 操作',
+    })
+
+const deployType = shallowRef<VToastType>('loading')
+const deployTitle = shallowRef(copy.value.loading)
+const deployMessage = shallowRef(copy.value.deploying)
+const actionStatus = shallowRef('')
+const visibleIds = shallowRef(new Set(['deploy', 'warning', 'danger']))
+let deployTimer: ReturnType<typeof setTimeout> | undefined
+
+const staticToasts = computed<DemoToast[]>(() => [
+  {
+    id: 'warning',
+    message: props.locale === 'en' ? 'Two fields still need attention.' : '还有两个字段需要检查。',
+    title: props.locale === 'en' ? 'Review required' : '需要检查',
+    type: 'warning',
+  },
+  {
+    actionText: copy.value.retry,
+    id: 'danger',
+    message: props.locale === 'en' ? 'The request did not complete.' : '请求未能完成。',
+    title: props.locale === 'en' ? 'Request failed' : '请求失败',
+    type: 'danger',
+  },
+])
+
+function deploy() {
+  clearTimeout(deployTimer)
+  visibleIds.value = new Set([...visibleIds.value, 'deploy'])
+  deployType.value = 'loading'
+  deployTitle.value = copy.value.loading
+  deployMessage.value = copy.value.deploying
+  deployTimer = setTimeout(() => {
+    deployTimer = undefined
+    deployType.value = 'success'
+    deployTitle.value = copy.value.success
+    deployMessage.value = copy.value.done
+  }, 900)
+}
+
+function dismiss(id: string) {
+  const next = new Set(visibleIds.value)
+  next.delete(id)
+  visibleIds.value = next
+}
+
+function act(id: string) {
+  actionStatus.value = `${copy.value.action}: ${id}`
+}
+
+onBeforeUnmount(() => clearTimeout(deployTimer))
+</script>
+
+<template>
+  <section class="toast-demo">
+    <div class="toast-demo__controls">
+      <VButton size="sm" @click="deploy">
+        {{ copy.deploy }}
+      </VButton>
+      <output aria-live="polite">{{ actionStatus }}</output>
+    </div>
+
+    <VToastRegion inline class="toast-demo__region">
+      <VToast
+        :visible="visibleIds.has('deploy')"
+        :type="deployType"
+        :title="deployTitle"
+        :message="deployMessage"
+        closeable
+        :close-label="copy.close"
+        @close="dismiss('deploy')"
+      />
+      <VToast
+        v-for="toast in staticToasts"
+        :key="toast.id"
+        :visible="visibleIds.has(toast.id)"
+        :type="toast.type"
+        :title="toast.title"
+        :message="toast.message"
+        :action-text="toast.actionText"
+        :action-label="toast.actionText"
+        closeable
+        :close-label="copy.close"
+        @action="act(toast.id)"
+        @close="dismiss(toast.id)"
+      />
+    </VToastRegion>
+  </section>
+</template>
+
+<style scoped>
+.toast-demo {
+  display: grid;
+  gap: 14px;
+  width: min(100%, 520px);
+  margin: 16px 0 24px;
+}
+
+.toast-demo__controls {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.toast-demo__controls output {
+  min-width: 0;
+  font-size: 12px;
+  color: var(--varo-muted);
+}
+
+.toast-demo__region {
+  min-height: 180px;
+}
+</style>
diff --git a/apps/docs/src/components/WatermarkDemo.vue b/apps/docs/src/components/WatermarkDemo.vue
new file mode 100644
index 00000000..adcae779
--- /dev/null
+++ b/apps/docs/src/components/WatermarkDemo.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { VWatermark } from '@varo-ui/h5'
+import { computed, shallowRef } from 'vue'
+
+const props = withDefaults(defineProps<{ locale?: 'en' | 'zh' }>(), {
+  locale: 'zh',
+})
+
+const actionCount = shallowRef(0)
+const copy = computed(() => props.locale === 'en'
+  ? {
+      action: 'Review document',
+      amount: 'Approved amount',
+      label: 'CONFIDENTIAL · VARO',
+      owner: 'Mobile platform team',
+      title: 'Quarterly settlement',
+    }
+  : {
+      action: '查看文档',
+      amount: '已审批金额',
+      label: '机密 · VARO',
+      owner: '移动平台团队',
+      title: '季度结算单',
+    })
+</script>
+
+<template>
+  <section class="watermark-demo">
+    <VWatermark
+      :content="copy.label"
+      color="var(--varo-ui-text)"
+      :font-size="13"
+      :gap-x="170"
+      :gap-y="92"
+      :opacity="0.18"
+      :rotate="-20"
+    >
+      <article class="watermark-demo__document">
+        <header>
+          <div>
+            <span>VARO FINANCE</span>
+            <h3>{{ copy.title }}</h3>
+          </div>
+          <strong>Q3 / 2026</strong>
+        </header>
+        <div class="watermark-demo__amount">
+          <span>{{ copy.amount }}</span>
+          <strong>¥ 482,600</strong>
+        </div>
+        <footer>
+          <span>{{ copy.owner }}</span>
+          <button type="button" @click="actionCount += 1">
+            {{ copy.action }} · {{ actionCount }}
+          </button>
+        </footer>
+      </article>
+    </VWatermark>
+  </section>
+</template>
+
+<style scoped>
+.watermark-demo {
+  width: min(100%, 620px);
+  margin: 16px 0 24px;
+  border: 1px solid var(--varo-border);
+  border-radius: 14px;
+}
+
+.watermark-demo__document {
+  display: grid;
+  gap: 24px;
+  min-height: 260px;
+  padding: 28px;
+  background: var(--varo-card-solid);
+}
+
+.watermark-demo__document header,
+.watermark-demo__document footer {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.watermark-demo__document header span,
+.watermark-demo__amount span,
+.watermark-demo__document footer > span {
+  font-size: 12px;
+  color: var(--varo-muted);
+}
+
+.watermark-demo__document h3 {
+  margin: 4px 0 0;
+  font-size: 22px;
+}
+
+.watermark-demo__amount {
+  display: grid;
+  gap: 6px;
+}
+
+.watermark-demo__amount strong {
+  font-size: 34px;
+  letter-spacing: -0.03em;
+}
+
+.watermark-demo__document button {
+  min-height: 38px;
+  padding: 0 14px;
+  font: inherit;
+  font-weight: 700;
+  color: var(--varo-primary-foreground);
+  cursor: pointer;
+  background: var(--varo-primary);
+  border: 0;
+  border-radius: 8px;
+}
+
+@media (max-width: 560px) {
+  .watermark-demo__document header,
+  .watermark-demo__document footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/apps/docs/src/components/agent-ui/AgentRagPipeline.vue b/apps/docs/src/components/agent-ui/AgentRagPipeline.vue
index 83179b2d..358a5500 100644
--- a/apps/docs/src/components/agent-ui/AgentRagPipeline.vue
+++ b/apps/docs/src/components/agent-ui/AgentRagPipeline.vue
@@ -202,7 +202,7 @@ const actionClass = computed(() =>
   ),
 )
 
-const footerStatusLabel = computed(() => {
+const statusLabel = computed(() => {
   if (isRunning.value) { return `处理中，${completedCount.value}/5 已完成` }
   if (hasFailed.value) { return '流程失败，可重试' }
   if (isCompleted.value) { return '流程已完成' }
@@ -218,7 +218,7 @@ const liveStatus = computed(() => {
   return '检索增强生成流程等待运行'
 })
 
-const footerDotClass = computed(() => {
+const statusDotClass = computed(() => {
   if (overallStatus.value === 'running') { return 'bg-[var(--varo-agent-primary)]' }
   if (overallStatus.value === 'failed') { return 'bg-[var(--varo-agent-danger)]' }
   if (overallStatus.value === 'completed') { return 'bg-[var(--varo-agent-success)]' }
@@ -393,26 +393,39 @@ onBeforeUnmount(clearAllPings)
   <section
     :class="rootClass"
     :data-status="overallStatus"
-    :aria-busy="isRunning"
     :aria-label="title"
   >
-    <header class="flex min-h-14 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
-      <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </h3>
-      <span
-        v-if="elapsedLabel"
-        class="flex-none text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
-        :aria-label="`总耗时 ${elapsedLabel}`"
-      >
-        {{ elapsedLabel }}
-      </span>
-      <p class="sr-only" aria-atomic="true" aria-live="polite">
-        {{ liveStatus }}
-      </p>
+    <header class="agent-rag__header flex min-h-16 flex-wrap items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
+      <div class="grid min-w-[140px] flex-1 gap-1">
+        <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
+          {{ title }}
+        </h3>
+        <span
+          class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          :aria-label="liveStatus"
+        >
+          <span class="h-2 w-2 flex-none rounded-full" :class="statusDotClass" aria-hidden="true" />
+          <span>{{ statusLabel }}</span>
+        </span>
+      </div>
+      <div class="flex flex-none items-center gap-2">
+        <span
+          v-if="elapsedLabel"
+          class="text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
+          :aria-label="`总耗时 ${elapsedLabel}`"
+        >
+          {{ elapsedLabel }}
+        </span>
+        <button :class="actionClass" type="button" @click="handleAction">
+          {{ actionLabel }}
+        </button>
+      </div>
     </header>
 
-    <ol class="m-0 grid list-none p-4">
+    <ol class="agent-rag__progress m-0 grid list-none p-4" :aria-busy="isRunning">
       <li
         v-for="stage in stageEntries"
         :key="stage.id"
@@ -609,16 +622,6 @@ onBeforeUnmount(clearAllPings)
         </section>
       </li>
     </ol>
-
-    <footer class="flex min-h-14 flex-wrap items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-4 py-2.5">
-      <span class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]">
-        <span class="h-2 w-2 flex-none rounded-full" :class="footerDotClass" aria-hidden="true" />
-        <span>{{ footerStatusLabel }}</span>
-      </span>
-      <button :class="actionClass" type="button" @click="handleAction">
-        {{ actionLabel }}
-      </button>
-    </footer>
   </section>
 </template>
 
diff --git a/apps/docs/src/components/demo/copy.ts b/apps/docs/src/components/demo/copy.ts
index 91992e10..126f0761 100644
--- a/apps/docs/src/components/demo/copy.ts
+++ b/apps/docs/src/components/demo/copy.ts
@@ -1,7 +1,6 @@
 import type { Locale } from './types'
 
 export const zhCopy = {
-  codeTitle: '示例代码',
   codeExpand: '展开代码',
   codeCollapse: '收起代码',
   copyCode: '复制代码',
@@ -80,7 +79,6 @@ export const zhCopy = {
 }
 
 export const enCopy = {
-  codeTitle: 'Example Code',
   codeExpand: 'Show code',
   codeCollapse: 'Hide code',
   copyCode: 'Copy code',
diff --git a/apps/docs/src/components/primitiveExamples.ts b/apps/docs/src/components/primitiveExamples.ts
index de3437f1..a0902828 100644
--- a/apps/docs/src/components/primitiveExamples.ts
+++ b/apps/docs/src/components/primitiveExamples.ts
@@ -398,9 +398,9 @@ import { ImageRoot } from '__PACKAGE__'
 
 <template>
   <ImageRoot
-    src="/avatar.png"
+    src="/logo.svg"
     alt="Profile"
-    fit="cover"
+    fit="contain"
     :width="96"
     :height="96"
     :radius="16"
diff --git a/apps/docs/src/docs-navigation.test.ts b/apps/docs/src/docs-navigation.test.ts
index a3bd1cc6..85435822 100644
--- a/apps/docs/src/docs-navigation.test.ts
+++ b/apps/docs/src/docs-navigation.test.ts
@@ -50,12 +50,10 @@ describe('docs navigation', () => {
     expect(skeletonEn).toContain('VSkeleton')
   })
 
-  it('adds a primitives catalog and dedicated pages for interactive behavior primitives', () => {
+  it('keeps primitive installation on the overview and detail pages focused on APIs', () => {
     const config = readFileSync(configPath, 'utf8')
     const primitiveZh = readFileSync(resolve(docsRoot, 'primitives/index.md'), 'utf8')
     const primitiveEn = readFileSync(resolve(docsRoot, 'en/primitives/index.md'), 'utf8')
-    const catalog = readFileSync(resolve(docsRoot, 'src/components/PrimitiveCatalog.vue'), 'utf8')
-    const example = readFileSync(resolve(docsRoot, 'src/components/PrimitiveExample.vue'), 'utf8')
     const dedicatedPages = [
       'button',
       'input',
@@ -78,57 +76,26 @@ describe('docs navigation', () => {
 
     expect(config).toContain('{ text: \'Primitives\', link: \'/primitives/\' }')
     expect(config).toContain('{ text: \'Primitives\', link: \'/en/primitives/\' }')
-    expect(config).toContain('{ text: \'总览\', link: \'/primitives/\' }')
-    expect(config).toContain('{ text: \'Overview\', link: \'/en/primitives/\' }')
-    expect(primitiveZh).toContain('<PrimitiveCatalog locale="zh" />')
-    expect(primitiveEn).toContain('<PrimitiveCatalog locale="en" />')
-    expect(primitiveZh).not.toContain('<PrimitiveInteractionDemo')
-    expect(primitiveEn).not.toContain('<PrimitiveInteractionDemo')
-    expect(primitiveZh).not.toContain('Reka-style anatomy')
-    expect(primitiveEn).not.toContain('Reka-style anatomy')
-    expect(catalog).toContain('title: \'Button\'')
-    expect(catalog).toContain('title: \'Dialog\'')
-    expect(catalog).toContain('const routePrefix = props.locale === \'en\' ? \'/en\' : \'\'')
-    expect(config).toContain('text: \'内容与布局\'')
-    expect(config).toContain('text: \'Content & Layout\'')
-    expect(catalog).toMatch(/id: 'number-field'[\s\S]*?category: 'controls'/)
-    expect(catalog).toMatch(/id: 'image'[\s\S]*?category: 'content'/)
-    expect(example).toContain('name: PrimitiveExampleName')
-    expect(example).toContain('resolvePrimitiveExample')
+    expect(primitiveZh).toContain('pnpm add @varo-ui/headless @varo-ui/h5')
+    expect(primitiveZh).toContain('pnpm add @varo-ui/headless @varo-ui/weapp')
+    expect(primitiveEn).toContain('pnpm add @varo-ui/headless @varo-ui/h5')
+    expect(primitiveEn).toContain('pnpm add @varo-ui/headless @varo-ui/weapp')
+    expect(primitiveZh).not.toContain('<PrimitiveCatalog')
+    expect(primitiveEn).not.toContain('<PrimitiveCatalog')
+    expect(primitiveZh).not.toContain('<RegistryInstallStrip')
+    expect(primitiveEn).not.toContain('<RegistryInstallStrip')
 
     dedicatedPages.forEach((page) => {
       expect(config).toContain(`/primitives/${page}`)
       expect(config).toContain(`/en/primitives/${page}`)
-      expect(existsSync(resolve(docsRoot, `primitives/${page}.md`))).toBe(true)
-      expect(existsSync(resolve(docsRoot, `en/primitives/${page}.md`))).toBe(true)
-      expect(readFileSync(resolve(docsRoot, `primitives/${page}.md`), 'utf8')).toContain(
-        `<PrimitiveExample name="${page}" locale="zh" />`,
-      )
-      expect(readFileSync(resolve(docsRoot, `en/primitives/${page}.md`), 'utf8')).toContain(
-        `<PrimitiveExample name="${page}" locale="en" />`,
-      )
-    })
-
-    ;[
-      'ButtonRoot / usePressableRoot',
-      'InputRoot / useFieldRoot',
-      'NumberFieldRoot / Decrement / Input / Increment',
-      'ImageRoot / useImageRoot',
-      'CellGroupRoot / CellRoot',
-      'StickyRoot',
-      'CheckboxRoot / CheckboxIndicator',
-      'RadioGroup / RadioItem / RadioIndicator',
-      'SwitchRoot / SwitchThumb',
-      'TabsRoot / TabsList / TabsTrigger / TabsContent',
-      'SelectRoot / Trigger / Value / Content / Item',
-      'CollapsibleRoot / Trigger / Content',
-      'AccordionRoot / Item / Trigger / Content',
-      'PopoverRoot / Trigger / Content / Close',
-      'DialogRoot / Trigger / Overlay / Content / Close',
-      'OverlayRoot',
-      'PopupRoot',
-    ].forEach((parts) => {
-      expect(catalog).toContain(parts)
+      const zhPage = readFileSync(resolve(docsRoot, `primitives/${page}.md`), 'utf8')
+      const enPage = readFileSync(resolve(docsRoot, `en/primitives/${page}.md`), 'utf8')
+      expect(zhPage).toContain(`<PrimitiveExample name="${page}" locale="zh" />`)
+      expect(enPage).toContain(`<PrimitiveExample name="${page}" locale="en" />`)
+      expect(zhPage).not.toMatch(/^## (?:安装|相关文档)$/m)
+      expect(enPage).not.toMatch(/^## (?:Install|Installation|Related docs)$/m)
+      expect(zhPage).toContain('::: info 平台差异')
+      expect(enPage).toContain('::: info Platform notes')
     })
 
     const checkboxZh = readFileSync(resolve(docsRoot, 'primitives/checkbox.md'), 'utf8')
@@ -137,25 +104,6 @@ describe('docs navigation', () => {
     expect(checkboxZh).toContain('CheckboxIndicator')
     expect(selectZh).toContain('SelectTrigger')
     expect(selectZh).toContain('SelectValue')
-
-    expect(primitiveZh).toContain('当前 17 个公开 primitives')
-    expect(primitiveZh).toContain('## 下一批基础候选')
-    expect(primitiveZh).toContain('`Menu` / `DropdownMenu`')
-    expect(primitiveEn).toContain('current 17 public primitives')
-    expect(primitiveEn).toContain('## Next foundational candidates')
-    expect(primitiveZh).toContain('## 产品边界')
-    expect(primitiveZh).toContain('**primitive** 管行为契约')
-    expect(primitiveZh).toContain('**UI wrapper** 管视觉与定位')
-    expect(primitiveZh).toContain('同一 `TabsRoot` / `AccordionRoot` 内的 value 必须唯一')
-    expect(primitiveEn).toContain('## Product boundaries')
-    expect(primitiveEn).toContain('**Primitives** own behavior contracts')
-    expect(primitiveEn).toContain('**UI wrappers** own visuals and positioning')
-    expect(primitiveEn).toContain('Values inside one `TabsRoot` / `AccordionRoot` must stay unique')
-    expect(primitiveZh).not.toContain('Divider')
-    expect(primitiveZh).not.toContain('Grid')
-    expect(primitiveZh).not.toContain('Layout')
-    expect(primitiveZh).not.toContain('Space')
-    expect(primitiveEn).toContain('behavior building blocks')
   })
 
   it('lists form components and has matching zh/en pages', () => {
@@ -168,6 +116,7 @@ describe('docs navigation', () => {
       'calendar-card',
       'cascader',
       'checkbox',
+      'date-field',
       'date-picker',
       'form',
       'input-number',
@@ -254,6 +203,7 @@ describe('docs navigation', () => {
     expect(css).toContain('--vp-sidebar-width: 224px')
     expect(css).toContain('--vp-aside-width: 188px')
     expect(css).toContain('--vp-content-container: 960px')
+    expect(css).toContain('.vp-doc > table th,\n.vp-doc > table td {\n  padding: 12px 16px;')
   })
 
   it('uses a precision-lab light palette and preserves dark demo contrast', () => {
@@ -355,18 +305,11 @@ describe('docs navigation', () => {
     })
   })
 
-  it('explains primitives as runtime contracts instead of a flat component list', () => {
-    const zhPrimitive = readFileSync(resolve(docsRoot, 'primitives/index.md'), 'utf8')
-    const enPrimitive = readFileSync(resolve(docsRoot, 'en/primitives/index.md'), 'utf8')
-
-    expect(zhPrimitive).toContain('运行时契约')
-    expect(zhPrimitive).toContain('组合顺序')
-    expect(zhPrimitive).toContain('受控与非受控')
-    expect(zhPrimitive).toContain('class="varo-primitive-stack"')
-    expect(enPrimitive).toContain('Runtime contract')
-    expect(enPrimitive).toContain('Composition order')
-    expect(enPrimitive).toContain('Controlled and uncontrolled')
-    expect(enPrimitive).toContain('class="varo-primitive-stack"')
+  it('keeps the removed Registry install strip out of styled component pages', () => {
+    const theme = readFileSync(resolve(docsRoot, '.vitepress/theme/index.ts'), 'utf8')
+    expect(theme).not.toContain('RegistryInstallStrip')
+    expect(readFileSync(resolve(docsRoot, 'components/textarea.md'), 'utf8')).not.toContain('RegistryInstallStrip')
+    expect(readFileSync(resolve(docsRoot, 'en/components/textarea.md'), 'utf8')).not.toContain('RegistryInstallStrip')
   })
 
   it('documents the dual-target component tiers', () => {
@@ -383,9 +326,13 @@ describe('docs navigation', () => {
     const requiredComponentIds = [
       'select',
       'switch',
+      'list',
       'loading',
       'toast',
       'region-picker',
+      'pull-refresh',
+      'signature',
+      'watermark',
       'map',
       'robot-chat',
     ]
@@ -411,7 +358,7 @@ describe('docs navigation', () => {
     })
     expect(phase1Manifest.targets).toEqual(['h5', 'weapp'])
     expect(phase1Manifest.components).toEqual(baseKitPhase1Components)
-    expect(componentTiers.registryCatalog).toEqual({ h5: 58, weappSfc: 47, weappSfcBaseKit: 15, weappVite: 48 })
+    expect(componentTiers.registryCatalog).toEqual({ h5: 62, weappSfc: 52, weappSfcBaseKit: 15, weappVite: 53 })
     expect(componentTiers.agentUi).toHaveLength(42)
   })
 
@@ -473,6 +420,10 @@ describe('docs navigation', () => {
     const aiEn = readFileSync(resolve(docsRoot, 'en/ai/index.md'), 'utf8')
     const loadingZh = readFileSync(resolve(docsRoot, 'ai/loading.md'), 'utf8')
     const loadingEn = readFileSync(resolve(docsRoot, 'en/ai/loading.md'), 'utf8')
+    const workspaceZh = readFileSync(resolve(docsRoot, 'ai/agent-workspace.md'), 'utf8')
+    const workspaceEn = readFileSync(resolve(docsRoot, 'en/ai/agent-workspace.md'), 'utf8')
+    const ragZh = readFileSync(resolve(docsRoot, 'ai/rag-pipeline.md'), 'utf8')
+    const ragEn = readFileSync(resolve(docsRoot, 'en/ai/rag-pipeline.md'), 'utf8')
     const packageJson = JSON.parse(readFileSync(resolve(docsRoot, 'package.json'), 'utf8')) as {
       dependencies: Record<string, string>
     }
@@ -480,6 +431,8 @@ describe('docs navigation', () => {
     expect(packageJson.dependencies.vitepress).toBe('2.0.0-alpha.19')
     expect(config).toContain('{ text: \'AI Agent\', link: \'/ai/\' }')
     expect(config).toContain('{ text: \'AI Agent\', link: \'/en/ai/\' }')
+    expect(config).toContain('{ text: \'AgentWorkspace Block\', link: \'/ai/agent-workspace\' }')
+    expect(config).toContain('{ text: \'AgentWorkspace Block\', link: \'/en/ai/agent-workspace\' }')
     expect(theme).toContain('app.component(\'AgentComponentsDemo\', AgentComponentsDemo)')
     expect(tailwind).toContain('@import "tailwindcss/utilities.css";')
     expect(tailwind).not.toContain('@import "tailwindcss/utilities.css" layer(utilities);')
@@ -488,25 +441,61 @@ describe('docs navigation', () => {
     expect(aiEn).toContain('<AgentComponentsDemo locale=\"en\" />')
     expect(aiZh).toContain('components/agent-ui')
     expect(aiEn).toContain('components/agent-ui')
-    expect(aiZh).toContain('Beautiful UI / beUI / ReUI 对标')
-    expect(aiEn).toContain('Beautiful UI / beUI / ReUI Coverage')
-    expect(aiZh).toContain('AgentWorkspace')
-    expect(aiEn).toContain('AgentWorkspace')
+    expect(aiZh).not.toContain('Beautiful UI / beUI / ReUI')
+    expect(aiEn).not.toContain('Beautiful UI / beUI / ReUI')
+    expect(aiZh).not.toContain('agent-component-inventory')
+    expect(aiEn).not.toContain('agent-component-inventory')
     expect(demo).toContain('AgentEventRenderer')
-    expect(demo).toContain('AgentArtifact')
-    expect(demo).toContain('AgentAttachmentList')
+    expect(demo).toContain('AgentRagPipeline')
+    expect(demo).toContain('Chat 模式')
+    expect(demo).toContain('RAG 模式')
+    expect(demo).not.toContain('ai-docs-demo__ledger')
+    expect(demo).not.toContain('AgentArtifact')
+    expect(demo).not.toContain('AgentAttachmentList')
     expect(demo).toContain('--ai-demo-card: var(--varo-surface)')
     expect(demo).not.toMatch(/background:\s*#(?:fff|f8fafc|eef2f6)\b/)
     expect(agentIndex).toContain('bg-[var(--varo-agent-surface)]')
     expect(agentIndex).not.toContain('from-white')
     expect(agentMarkdown).toContain('background: var(--varo-agent-surface-strong)')
     expect(agentMarkdown).not.toContain('background: #f8fafc')
-    expect(loadingZh).toContain('pnpm add @varo-ui/ai')
-    expect(loadingEn).toContain('pnpm add @varo-ui/ai')
+    expect(aiZh).toContain('pnpm add @varo-ui/ai')
+    expect(aiEn).toContain('pnpm add @varo-ui/ai')
+    for (const content of [aiZh, aiEn]) {
+      for (const target of ['h5', 'weapp']) {
+        expect(content).toContain(`pnpm dlx @varo-ui/cli add --target ${target} blocks/agent-chat`)
+        expect(content).toContain(`pnpm dlx @varo-ui/cli add --target ${target} blocks/agent-workspace`)
+      }
+    }
+    expect(aiZh).toContain('[AgentWorkspace](./agent-workspace)')
+    expect(aiEn).toContain('[AgentWorkspace](./agent-workspace)')
+    for (const content of [workspaceZh, workspaceEn]) {
+      expect(content).toMatch(/^\|\s*`prompt`\s*\|/m)
+      expect(content).toContain('`readonly AgentThreadVersion[]`')
+      expect(content).toContain('`\'先确认可访问来源，再提交任务\'`')
+      expect(content).toContain('`(AgentContextSource, boolean)`')
+      expect(content).toMatch(/^\|\s*`update:prompt`\s*\|/m)
+      expect(content).toContain('`wevu`')
+    }
+    for (const content of [ragZh, ragEn]) {
+      expect(content).toMatch(/^\|\s*`className`\s*\|\s*`ClassValue`\s*\|\s*`undefined`\s*\|/m)
+      expect(content).toContain('`readonly AgentRagStep[]`')
+      expect(content).toContain('`readonly AgentRagSource[]`')
+      expect(content).toContain('`readonly AgentRagAnswerPart[]`')
+    }
+    expect(workspaceZh).toContain('## Props')
+    expect(workspaceZh).toContain('## Events')
+    expect(workspaceZh).toContain('`execution`')
+    expect(workspaceZh).toContain('scopedSlotsRequireProps: true')
+    expect(workspaceEn).toContain('## Props')
+    expect(workspaceEn).toContain('## Events')
+    expect(workspaceEn).toContain('`execution`')
+    expect(workspaceEn).toContain('scopedSlotsRequireProps: true')
+    expect(workspaceZh).not.toMatch(/^## 安装$/m)
+    expect(workspaceEn).not.toMatch(/^## Install$/m)
+    expect(loadingZh).not.toMatch(/^## 安装$/m)
+    expect(loadingEn).not.toMatch(/^## Install$/m)
     expect(loadingZh).toContain('import { AgentLoading } from \'@/components/agent-ui\'')
     expect(loadingEn).toContain('import { AgentLoading } from \'@/components/agent-ui\'')
-    expect(loadingZh).toContain('`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力')
-    expect(loadingEn).toContain('`@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives')
     expect(loadingZh).not.toContain('import { AgentLoading } from \'@varo-ui/ai\'')
     expect(loadingEn).not.toContain('import { AgentLoading } from \'@varo-ui/ai\'')
 
@@ -528,6 +517,7 @@ describe('docs navigation', () => {
       'artifact',
       'sources',
       'attachments',
+      'rag-pipeline',
       'event-renderer',
       'message-scroller',
       'code-block',
@@ -558,10 +548,8 @@ describe('docs navigation', () => {
       expect(enPage).toContain('## Props')
       expect(zhPage).not.toContain('@/components/agent-ui/advanced')
       expect(enPage).not.toContain('@/components/agent-ui/advanced')
-      expect(zhPage).toContain('pnpm add @varo-ui/ai')
-      expect(enPage).toContain('pnpm add @varo-ui/ai')
-      expect(zhPage).toContain('不导出 Vue/Wevu UI 组件')
-      expect(enPage).toContain('not Vue/Wevu UI components')
+      expect(zhPage).not.toMatch(/^## 安装$/m)
+      expect(enPage).not.toMatch(/^## Install$/m)
     })
   })
 
diff --git a/apps/playground-h5/src/agent-rag.test.ts b/apps/playground-h5/src/agent-rag.test.ts
index 69975fb7..4cbbe520 100644
--- a/apps/playground-h5/src/agent-rag.test.ts
+++ b/apps/playground-h5/src/agent-rag.test.ts
@@ -66,6 +66,23 @@ describe('RAG source references', () => {
     expect(second.classes()).not.toContain('is-highlighted')
   })
 
+  it('keeps the run control in the header directly above progress', async () => {
+    const wrapper = mount(AgentRagPipeline)
+    const header = wrapper.get('.agent-rag__header')
+    expect(wrapper.findAll('.agent-rag__action')).toHaveLength(1)
+    const progress = wrapper.get('.agent-rag__progress')
+    expect(wrapper.attributes('aria-busy')).toBeUndefined()
+    expect(header.get('[role="status"]').attributes('aria-live')).toBe('polite')
+    expect(progress.attributes('aria-busy')).toBe('false')
+    expect(header.get('.agent-rag__action').text()).toBe('运行流程')
+    expect(wrapper.find('footer').exists()).toBe(false)
+
+    await header.get('.agent-rag__action').trigger('click')
+    await wrapper.setProps({ steps: [{ id: 'query', status: 'running' }] })
+    expect(progress.attributes('aria-busy')).toBe('true')
+    expect(wrapper.emitted('run')).toEqual([[]])
+  })
+
   it('preserves a submitted query across cancellation and completed replays', async () => {
     vi.useFakeTimers()
     let demo!: ReturnType<typeof useRagDemo>
diff --git a/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue b/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue
index 83179b2d..358a5500 100644
--- a/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue
+++ b/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue
@@ -202,7 +202,7 @@ const actionClass = computed(() =>
   ),
 )
 
-const footerStatusLabel = computed(() => {
+const statusLabel = computed(() => {
   if (isRunning.value) { return `处理中，${completedCount.value}/5 已完成` }
   if (hasFailed.value) { return '流程失败，可重试' }
   if (isCompleted.value) { return '流程已完成' }
@@ -218,7 +218,7 @@ const liveStatus = computed(() => {
   return '检索增强生成流程等待运行'
 })
 
-const footerDotClass = computed(() => {
+const statusDotClass = computed(() => {
   if (overallStatus.value === 'running') { return 'bg-[var(--varo-agent-primary)]' }
   if (overallStatus.value === 'failed') { return 'bg-[var(--varo-agent-danger)]' }
   if (overallStatus.value === 'completed') { return 'bg-[var(--varo-agent-success)]' }
@@ -393,26 +393,39 @@ onBeforeUnmount(clearAllPings)
   <section
     :class="rootClass"
     :data-status="overallStatus"
-    :aria-busy="isRunning"
     :aria-label="title"
   >
-    <header class="flex min-h-14 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
-      <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </h3>
-      <span
-        v-if="elapsedLabel"
-        class="flex-none text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
-        :aria-label="`总耗时 ${elapsedLabel}`"
-      >
-        {{ elapsedLabel }}
-      </span>
-      <p class="sr-only" aria-atomic="true" aria-live="polite">
-        {{ liveStatus }}
-      </p>
+    <header class="agent-rag__header flex min-h-16 flex-wrap items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
+      <div class="grid min-w-[140px] flex-1 gap-1">
+        <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
+          {{ title }}
+        </h3>
+        <span
+          class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          :aria-label="liveStatus"
+        >
+          <span class="h-2 w-2 flex-none rounded-full" :class="statusDotClass" aria-hidden="true" />
+          <span>{{ statusLabel }}</span>
+        </span>
+      </div>
+      <div class="flex flex-none items-center gap-2">
+        <span
+          v-if="elapsedLabel"
+          class="text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
+          :aria-label="`总耗时 ${elapsedLabel}`"
+        >
+          {{ elapsedLabel }}
+        </span>
+        <button :class="actionClass" type="button" @click="handleAction">
+          {{ actionLabel }}
+        </button>
+      </div>
     </header>
 
-    <ol class="m-0 grid list-none p-4">
+    <ol class="agent-rag__progress m-0 grid list-none p-4" :aria-busy="isRunning">
       <li
         v-for="stage in stageEntries"
         :key="stage.id"
@@ -609,16 +622,6 @@ onBeforeUnmount(clearAllPings)
         </section>
       </li>
     </ol>
-
-    <footer class="flex min-h-14 flex-wrap items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-4 py-2.5">
-      <span class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]">
-        <span class="h-2 w-2 flex-none rounded-full" :class="footerDotClass" aria-hidden="true" />
-        <span>{{ footerStatusLabel }}</span>
-      </span>
-      <button :class="actionClass" type="button" @click="handleAction">
-        {{ actionLabel }}
-      </button>
-    </footer>
   </section>
 </template>
 
diff --git a/apps/playground-h5/src/components/ui/input-number.ts b/apps/playground-h5/src/components/ui/input-number.ts
index b36fe65b..ec281e27 100644
--- a/apps/playground-h5/src/components/ui/input-number.ts
+++ b/apps/playground-h5/src/components/ui/input-number.ts
@@ -8,12 +8,16 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from '../../lib/varo-primitives'
+import { VIcon } from './icon'
 import '../../styles/varo.css'
 
 export const VInputNumber = defineComponent({
   name: 'VInputNumber',
   props: {
+    decreaseAriaLabel: { type: String, default: 'Decrease value' },
     disabled: Boolean,
+    increaseAriaLabel: { type: String, default: 'Increase value' },
+    inputAriaLabel: { type: String, default: 'Numeric value' },
     max: { type: Number, default: Number.POSITIVE_INFINITY },
     min: { type: Number, default: Number.NEGATIVE_INFINITY },
     precision: { type: Number as PropType<number | undefined>, default: undefined },
@@ -45,13 +49,14 @@ export const VInputNumber = defineComponent({
         },
         {
           default: () => [
-            h(NumberFieldDecrement, { class: 'varo-input-number__minus' }, () => '-'),
+            h(NumberFieldDecrement, { 'aria-label': props.decreaseAriaLabel, 'class': 'varo-input-number__minus' }, () => h(VIcon, { name: 'minus', size: 14 })),
             h(NumberFieldInput, {
-              class: 'varo-input-number__input',
-              onBlur: (event: FocusEvent) => emit('blur', event),
-              onFocus: (event: FocusEvent) => emit('focus', event),
+              'class': 'varo-input-number__input',
+              'aria-label': props.inputAriaLabel,
+              'onBlur': (event: FocusEvent) => emit('blur', event),
+              'onFocus': (event: FocusEvent) => emit('focus', event),
             }),
-            h(NumberFieldIncrement, { class: 'varo-input-number__plus' }, () => '+'),
+            h(NumberFieldIncrement, { 'aria-label': props.increaseAriaLabel, 'class': 'varo-input-number__plus' }, () => h(VIcon, { name: 'plus', size: 14 })),
           ],
         },
       )
diff --git a/apps/playground-h5/src/components/ui/input.ts b/apps/playground-h5/src/components/ui/input.ts
index ba6f96a0..f53bf120 100644
--- a/apps/playground-h5/src/components/ui/input.ts
+++ b/apps/playground-h5/src/components/ui/input.ts
@@ -253,6 +253,7 @@ export const VInput = defineComponent({
           'data-invalid': String(effectiveInvalid.value),
           'data-readonly': String(props.readonly),
           'data-size': props.size,
+          'data-type': props.type,
         },
         [
           labelVisible.value
@@ -309,7 +310,7 @@ export const VInput = defineComponent({
                     'onClick': clear,
                     'onMousedown': (event: MouseEvent) => event.preventDefault(),
                   },
-                  h(VIcon, { name: 'close', size: 14 }),
+                  h(VIcon, { name: 'danger', size: 16 }),
                 )
               : null,
             props.showWordLimit ? h('span', { class: 'varo-input__word-limit' }, wordLimit.value) : null,
diff --git a/apps/playground-h5/src/components/ui/select.ts b/apps/playground-h5/src/components/ui/select.ts
index 2659ea4b..d07170d4 100644
--- a/apps/playground-h5/src/components/ui/select.ts
+++ b/apps/playground-h5/src/components/ui/select.ts
@@ -364,7 +364,7 @@ export const VSelect = defineComponent({
                   'onClick': clear,
                   'onMousedown': (event: MouseEvent) => event.preventDefault(),
                 },
-                h(VIcon, { name: 'close', size: 14 }),
+                h(VIcon, { name: 'danger', size: 16 }),
               )
             : null,
           h('span', {
diff --git a/apps/playground-h5/src/styles/varo.css b/apps/playground-h5/src/styles/varo.css
index 144c1dbf..de56541d 100644
--- a/apps/playground-h5/src/styles/varo.css
+++ b/apps/playground-h5/src/styles/varo.css
@@ -69,6 +69,11 @@
   --varo-ui-radius-sm: var(--varo-ui-input-radius);
   --varo-ui-shadow-sm: 0 1px 2px rgb(48 49 51 / 6%);
   --varo-ui-shadow-md: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
+  --varo-ui-motion-feedback: 140ms;
+  --varo-ui-motion-state: 180ms;
+  --varo-ui-motion-enter: 220ms;
+  --varo-ui-motion-exit: 160ms;
+  --varo-ui-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
   --varo-ui-ring: rgb(7 193 96 / 16%);
   --varo-ui-focus: #000;
   --varo-agent-surface: var(--varo-ui-surface);
@@ -102,7 +107,7 @@
   --varo-agent-source-rose-soft: #fdf2f8;
 }
 
-:where(.varo-button, .varo-checkbox, .varo-radio, .varo-input-number button, .varo-select button, .varo-switch, .varo-toast button, .varo-rate__item, .varo-picker button, .varo-cascader button, .varo-calendar button, .varo-date-picker button, .varo-number-keyboard button, .varo-uploader button, .varo-indicator button, .varo-elevator button, .varo-menu button, .varo-pagination button) {
+:where(.varo-button, .varo-checkbox, .varo-radio, .varo-date-field button, .varo-input-number button, .varo-select button, .varo-signature button, .varo-switch, .varo-toast button, .varo-rate__item, .varo-picker button, .varo-cascader button, .varo-calendar button, .varo-date-picker button, .varo-number-keyboard button, .varo-uploader button, .varo-indicator button, .varo-elevator button, .varo-menu button, .varo-pagination button) {
   font: inherit;
 }
 
@@ -112,27 +117,32 @@
   --varo-button-foreground: var(--varo-ui-primary-foreground);
   --varo-button-hover-foreground: var(--varo-ui-primary-hover-foreground);
 
+  position: relative;
   display: inline-flex;
-  gap: 8px;
+  gap: 6px;
   align-items: center;
   justify-content: center;
   min-height: var(--varo-ui-button-height-md);
   padding: 0 16px;
-  font-weight: 650;
+  overflow: hidden;
+  font-weight: 600;
   line-height: 1;
   color: var(--varo-button-foreground);
+  touch-action: manipulation;
   cursor: pointer;
+  user-select: none;
   background: var(--varo-button-fill);
   border: 1px solid transparent;
   border-radius: var(--varo-ui-button-radius);
   box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: center;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    opacity 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    opacity var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
 .varo-button:focus-visible {
@@ -163,13 +173,11 @@
   background: var(--varo-button-hover-fill);
 }
 
-.varo-button:not([data-disabled='true'], [data-loading='true']):active {
-  transform: translateY(1px);
-}
-
+.varo-button:not([data-disabled='true'], [data-loading='true']):active,
 .varo-button[data-pressed='true'],
 .varo-button--pressed {
-  transform: translateY(1px);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  transform: scale(0.98);
 }
 
 .varo-button[data-size='sm'] {
@@ -194,10 +202,27 @@
 
 .varo-button[data-variant='ghost'] {
   color: var(--varo-ui-text);
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   box-shadow: none;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .varo-button[data-variant='outline']:not([data-disabled='true'], [data-loading='true']):hover,
+  .varo-button[data-variant='ghost']:not([data-disabled='true'], [data-loading='true']):hover {
+    background: var(--varo-ui-fill-light);
+    border-color: var(--varo-ui-border-strong);
+  }
+}
+
+.varo-button[data-variant='outline']:not([data-disabled='true'], [data-loading='true']):active,
+.varo-button[data-variant='outline'][data-pressed='true'],
+.varo-button[data-variant='outline'].varo-button--pressed,
+.varo-button[data-variant='ghost']:not([data-disabled='true'], [data-loading='true']):active,
+.varo-button[data-variant='ghost'][data-pressed='true'],
+.varo-button[data-variant='ghost'].varo-button--pressed {
+  background: var(--varo-ui-fill-light);
+}
+
 .varo-button[data-variant='text'] {
   --varo-button-text-fill: var(--varo-ui-primary-soft);
 
@@ -316,6 +341,18 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-button {
+    transition-duration: 1ms;
+  }
+
+  .varo-button:not([data-disabled='true'], [data-loading='true']):active,
+  .varo-button[data-pressed='true'],
+  .varo-button--pressed {
+    transform: none;
+  }
+}
+
 .varo-input {
   display: grid;
   gap: 6px;
@@ -345,6 +382,12 @@
     box-shadow 0.18s ease;
 }
 
+.varo-input[data-type='textarea'] .varo-input__body {
+  position: relative;
+  align-items: flex-start;
+  padding: 10px 12px 28px;
+}
+
 .varo-input[data-size='sm'] .varo-input__body {
   min-height: var(--varo-ui-input-height-sm);
 }
@@ -374,7 +417,7 @@
 
 textarea.varo-input__control {
   min-height: 72px;
-  padding: 10px 0;
+  padding: 0;
   resize: none;
 }
 
@@ -388,17 +431,36 @@ textarea.varo-input__control {
 }
 
 .varo-input__clear {
+  box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  overflow: visible;
+  color: var(--varo-ui-text-placeholder);
   cursor: pointer;
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   border: 0;
   border-radius: 999px;
 }
 
+.varo-input__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.varo-input[data-type='textarea'] .varo-input__word-limit {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  line-height: 1;
+}
+
 .varo-input__error {
   font-size: 12px;
   color: var(--varo-ui-danger);
@@ -429,6 +491,13 @@ textarea.varo-input__control {
   border: 0;
 }
 
+.varo-radio {
+  min-height: 44px;
+  padding: 0 2px;
+  touch-action: manipulation;
+  user-select: none;
+}
+
 .varo-checkbox__icon,
 .varo-radio__icon {
   position: relative;
@@ -471,17 +540,46 @@ textarea.varo-input__control {
 
 .varo-radio__icon {
   font-size: 10px;
+  background: var(--varo-ui-surface);
   border-radius: 999px;
+  transform-origin: center;
+}
+
+.varo-radio__dot {
+  width: 10px;
+  height: 10px;
+  background: var(--varo-ui-primary);
+  border-radius: 999px;
+  opacity: 0;
+  transform: scale(0.45);
+  transform-origin: center;
+  transition:
+    opacity var(--varo-ui-motion-feedback) linear,
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon,
-.varo-checkbox[data-state='checked'] .varo-checkbox__icon,
-.varo-radio[data-checked='true'] .varo-radio__icon {
+.varo-checkbox[data-state='checked'] .varo-checkbox__icon {
   color: var(--varo-ui-primary-foreground);
   background: var(--varo-ui-primary);
   border-color: var(--varo-ui-primary);
 }
 
+.varo-radio[data-checked='true'] .varo-radio__icon {
+  background: var(--varo-ui-surface);
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-primary-soft);
+}
+
+.varo-radio[data-checked='true'] .varo-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.varo-radio:not([data-disabled='true']):active .varo-radio__icon {
+  transform: scale(0.9);
+}
+
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon::before,
 .varo-checkbox[data-state='checked'] .varo-checkbox__icon::before {
   opacity: 1;
@@ -518,6 +616,17 @@ textarea.varo-input__control {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-radio__icon,
+  .varo-radio__dot {
+    transition-duration: 1ms;
+  }
+
+  .varo-radio:not([data-disabled='true']):active .varo-radio__icon {
+    transform: none;
+  }
+}
+
 .varo-checkbox[data-disabled='true'],
 .varo-radio[data-disabled='true'] {
   cursor: not-allowed;
@@ -527,9 +636,10 @@ textarea.varo-input__control {
 .varo-input-number {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  width: 100%;
-  min-width: min(128px, 100%);
+  width: 130px;
+  min-width: 128px;
   max-width: 100%;
   overflow: hidden;
   background: var(--varo-ui-surface);
@@ -580,10 +690,17 @@ textarea.varo-input__control {
 
 .varo-input-number__input::-webkit-inner-spin-button,
 .varo-input-number__input::-webkit-outer-spin-button {
+  display: none;
   margin: 0;
   appearance: none;
 }
 
+.varo-input-number__minus .varo-icon,
+.varo-input-number__plus .varo-icon {
+  display: block;
+  pointer-events: none;
+}
+
 .varo-select {
   position: relative;
   display: grid;
@@ -598,8 +715,10 @@ textarea.varo-input__control {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 42px;
   min-height: 42px;
   padding: 0 12px;
+  overflow: hidden;
   color: inherit;
   cursor: pointer;
   background: var(--varo-ui-surface, #fff);
@@ -615,9 +734,13 @@ textarea.varo-input__control {
   flex: 1;
   align-items: center;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -645,17 +768,39 @@ textarea.varo-input__control {
 }
 
 .varo-select__clear {
-  display: grid;
+  box-sizing: border-box;
+  display: inline-flex;
   flex: none;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  min-height: 16px;
   padding: 0;
-  color: var(--varo-ui-text-muted, #64748b);
+  margin: 0;
+  line-height: 1;
+  color: var(--varo-ui-text-placeholder);
+  pointer-events: none;
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 999px;
+  opacity: 0;
+}
+
+.varo-select:hover .varo-select__clear,
+.varo-select:focus-within .varo-select__clear,
+.varo-select[data-open='true'] .varo-select__clear {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.varo-select__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .varo-select__control::after,
@@ -728,9 +873,13 @@ textarea.varo-input__control {
 .varo-select__filter-input {
   flex: 1;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   cursor: text;
   outline: 0;
@@ -827,8 +976,8 @@ textarea.varo-input__control {
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--varo-ui-border);
   transition:
-    background 0.14s ease,
-    box-shadow 0.14s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch:not(:disabled):hover {
@@ -855,30 +1004,51 @@ textarea.varo-input__control {
 }
 
 .varo-switch__track {
-  display: flex;
-  align-items: center;
+  position: relative;
+  display: block;
   width: 100%;
   height: 20px;
 }
 
 .varo-switch__thumb {
-  flex: none;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 20px;
   height: 20px;
   background: var(--varo-ui-white);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(48 49 51 / 18%);
-  transition: transform 0.14s ease;
+  box-shadow: 0 1px 3px rgb(48 49 51 / 22%);
+  transform: translateX(0);
+  transform-origin: left center;
+  transition: transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] .varo-switch__thumb {
   transform: translateX(20px);
 }
 
+.varo-switch:not(:disabled):active .varo-switch__thumb {
+  transform: translateX(0) scaleX(1.16);
+}
+
+.varo-switch[data-state='checked']:not(:disabled):active .varo-switch__thumb {
+  transform: translateX(20px) scaleX(1.16);
+  transform-origin: right center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .varo-switch,
   .varo-switch__thumb {
-    transition: none;
+    transition-duration: 1ms;
+  }
+
+  .varo-switch:not(:disabled):active .varo-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .varo-switch[data-state='checked']:not(:disabled):active .varo-switch__thumb {
+    transform: translateX(20px);
   }
 }
 
@@ -916,39 +1086,35 @@ textarea.varo-input__control {
   z-index: 1000;
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: max-content;
-  min-width: 96px;
-  max-width: min(70vw, 240px);
-  padding: 8px 16px;
-  color: var(--varo-ui-white);
-  text-align: center;
+  min-width: 220px;
+  max-width: min(calc(100vw - 32px), 360px);
+  min-height: 52px;
+  padding: 10px 12px;
+  color: var(--varo-ui-text);
+  text-align: left;
   pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border: 0;
-  border-radius: 12px;
+  background: var(--varo-ui-surface-overlay);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: 16px;
+  box-shadow: var(--varo-ui-shadow-md);
   transform: translateX(-50%);
-}
-
-.varo-toast--success,
-.varo-toast--warning,
-.varo-toast--danger,
-.varo-toast--loading {
-  min-width: 88px;
-  min-height: 88px;
-  padding: 16px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-toast--text {
-  min-height: 0;
-  padding: 8px 16px;
+  min-width: 0;
 }
 
 .varo-toast--top {
-  top: 20%;
+  top: max(16px, env(safe-area-inset-top));
 }
 
 .varo-toast--middle {
@@ -958,62 +1124,123 @@ textarea.varo-input__control {
 
 .varo-toast--bottom {
   top: auto;
-  bottom: 20%;
+  bottom: max(16px, env(safe-area-inset-bottom));
 }
 
 .varo-toast__icon {
   display: inline-grid;
+  flex: none;
   place-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--varo-ui-white);
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
+}
+
+.varo-toast--success .varo-toast__icon {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.varo-toast--warning .varo-toast__icon {
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+}
+
+.varo-toast--danger .varo-toast__icon {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
 }
 
 .varo-toast__icon svg,
 .varo-toast__icon .varo-icon {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
+}
+
+.varo-toast__body {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.varo-toast__title {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
 }
 
 .varo-toast__message {
   min-width: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--varo-ui-white);
+  color: var(--varo-ui-text-regular);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-.varo-toast--success .varo-toast__message,
-.varo-toast--warning .varo-toast__message,
-.varo-toast--danger .varo-toast__message,
-.varo-toast--loading .varo-toast__message {
-  margin-top: 2px;
+.varo-toast__action,
+.varo-toast__close {
+  flex: none;
+  pointer-events: auto;
+  cursor: pointer;
+  border: 0;
+}
+
+.varo-toast__action {
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
+}
+
+.varo-toast__action:active {
+  transform: scale(0.96);
 }
 
 .varo-toast__close {
   display: inline-grid;
   place-items: center;
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  color: rgb(255 255 255 / 72%);
-  pointer-events: auto;
-  cursor: pointer;
+  color: var(--varo-ui-text-muted);
   background: transparent;
-  border: 0;
   border-radius: 999px;
 }
 
-.varo-toast__close:hover {
-  color: var(--varo-ui-white);
-  background: rgb(255 255 255 / 12%);
+@media (hover: hover) and (pointer: fine) {
+  .varo-toast__action:hover {
+    color: var(--varo-ui-primary-foreground);
+    background: var(--varo-ui-primary);
+  }
+
+  .varo-toast__close:hover {
+    color: var(--varo-ui-text);
+    background: var(--varo-ui-fill-light);
+  }
 }
 
+.varo-toast__action:focus-visible,
 .varo-toast__close:focus-visible {
-  outline: 2px solid var(--varo-ui-white);
+  outline: 2px solid var(--varo-ui-focus);
   outline-offset: 1px;
 }
 
@@ -1024,8 +1251,8 @@ textarea.varo-input__control {
 }
 
 .varo-toast__spinner {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
   animation: varo-toast-spin 0.9s linear infinite;
 }
 
@@ -1037,12 +1264,52 @@ textarea.varo-input__control {
   stroke-width: 2.2;
 }
 
+.varo-toast-region {
+  position: fixed;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(calc(100vw - 32px), 360px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.varo-toast-region[data-position='top'] {
+  top: max(16px, env(safe-area-inset-top));
+}
+
+.varo-toast-region[data-position='middle'] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.varo-toast-region[data-position='bottom'] {
+  bottom: max(16px, env(safe-area-inset-bottom));
+}
+
+.varo-toast-region[data-inline='true'] {
+  position: relative;
+  inset: auto;
+  width: min(100%, 360px);
+  transform: none;
+}
+
+.varo-toast-region .varo-toast {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-width: none;
+  transform: none;
+}
+
 .varo-toast-enter-active {
-  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: opacity var(--varo-ui-motion-enter) ease, transform var(--varo-ui-motion-enter) var(--varo-ui-motion-ease);
 }
 
 .varo-toast-leave-active {
-  transition: opacity 0.16s ease, transform 0.16s ease-in;
+  transition: opacity var(--varo-ui-motion-exit) ease, transform var(--varo-ui-motion-exit) ease-in;
 }
 
 .varo-toast-enter-from,
@@ -1065,6 +1332,16 @@ textarea.varo-input__control {
   transform: translate(-50%, 10px) scale(0.98);
 }
 
+.varo-toast-region .varo-toast.varo-toast-enter-from,
+.varo-toast-region .varo-toast.varo-toast-leave-to {
+  transform: translateY(-8px) scale(0.98);
+}
+
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-enter-from,
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-leave-to {
+  transform: translateY(8px) scale(0.98);
+}
+
 @keyframes varo-toast-spin {
   to {
     transform: rotate(360deg);
@@ -1087,6 +1364,11 @@ textarea.varo-input__control {
     transform: translate(-50%, -50%);
   }
 
+  .varo-toast-region .varo-toast.varo-toast-enter-from,
+  .varo-toast-region .varo-toast.varo-toast-leave-to {
+    transform: none;
+  }
+
   .varo-toast__spinner {
     animation-duration: 1.8s;
   }
@@ -1205,6 +1487,76 @@ textarea.varo-input__control {
   }
 }
 
+.varo-date-field {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+  color: var(--varo-ui-text);
+}
+
+.varo-date-field__control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-input-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__control {
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+.varo-date-field[data-disabled='true'] .varo-date-field__control {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.varo-date-field[data-readonly='true'] .varo-date-field__control {
+  cursor: default;
+}
+
+.varo-date-field__value,
+.varo-date-field__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.varo-date-field__placeholder {
+  color: var(--varo-ui-text-placeholder);
+}
+
+.varo-date-field__arrow {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  color: var(--varo-ui-text-muted);
+  border-right: 1.6px solid currentcolor;
+  border-bottom: 1.6px solid currentcolor;
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__arrow {
+  color: var(--varo-ui-primary);
+  transform: translateY(2px) rotate(225deg);
+}
+
+.varo-date-field__picker {
+  width: 100%;
+}
+
 .varo-calendar,
 .varo-date-picker,
 .varo-picker,
@@ -1352,12 +1704,25 @@ textarea.varo-input__control {
   color: var(--varo-ui-primary);
 }
 
-.varo-picker__columns,
+.varo-picker__columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  padding: 8px;
+}
+
 .varo-cascader__options {
   display: grid;
   padding: 8px;
 }
 
+.varo-picker__column {
+  display: grid;
+  align-content: start;
+  max-height: 240px;
+  overflow: auto;
+}
+
 .varo-picker__option,
 .varo-cascader__option {
   position: relative;
@@ -3081,6 +3446,130 @@ textarea.varo-input__control {
   transition: none;
 }
 
+.varo-signature {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.varo-signature__canvas {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  touch-action: none;
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-signature__canvas:focus-visible {
+  outline: 2px solid var(--varo-ui-primary);
+  outline-offset: 2px;
+}
+
+.varo-signature[data-disabled='true'] {
+  opacity: 0.58;
+}
+
+.varo-signature__clear {
+  justify-self: end;
+  min-height: 36px;
+  padding: 0 12px;
+  font-weight: 700;
+  color: var(--varo-ui-danger);
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.varo-signature__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.varo-watermark {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.varo-watermark__content {
+  position: relative;
+  z-index: 0;
+}
+
+.varo-watermark__overlay {
+  position: absolute;
+  inset: calc(0px - var(--varo-watermark-gap-y)) calc(0px - var(--varo-watermark-gap-x));
+  z-index: var(--varo-watermark-z-index);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(var(--varo-watermark-offset-x), var(--varo-watermark-offset-y));
+}
+
+.varo-watermark__item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--varo-watermark-gap-x);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--varo-watermark-gap-y);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--varo-watermark-font-size);
+  font-weight: var(--varo-watermark-font-weight);
+  line-height: 1;
+  color: var(--varo-watermark-color);
+  white-space: nowrap;
+  opacity: var(--varo-watermark-opacity);
+  transform: rotate(var(--varo-watermark-rotate));
+}
+
+.varo-pull-refresh {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.varo-pull-refresh__track {
+  min-height: 100%;
+}
+
+.varo-pull-refresh__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
+.varo-pull-refresh[data-state='ready'] .varo-pull-refresh__indicator,
+.varo-pull-refresh[data-state='loading'] .varo-pull-refresh__indicator {
+  font-weight: 700;
+  color: var(--varo-ui-primary);
+}
+
+.varo-pull-refresh__content {
+  min-height: 1px;
+}
+
+.varo-pull-refresh__native-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
 .varo-list {
   display: block;
   width: 100%;
diff --git a/apps/playground-weapp-preview/package.json b/apps/playground-weapp-preview/package.json
index 7c3fe10f..f02ddabb 100644
--- a/apps/playground-weapp-preview/package.json
+++ b/apps/playground-weapp-preview/package.json
@@ -5,10 +5,12 @@
   "private": true,
   "scripts": {
     "prepare:artifacts": "pnpm exec turbo run build --filter=@varo/playground-weapp",
-    "dev": "pnpm run prepare:artifacts && vite --host 127.0.0.1",
+    "dev": "pnpm run prepare:artifacts && vite",
     "build": "vite build",
-    "preview": "vite preview --host 127.0.0.1",
+    "preview": "vite preview",
     "smoke:browser": "node scripts/smoke-preview.mjs",
+    "smoke:pull-refresh": "node scripts/smoke-pull-refresh.mjs",
+    "smoke:motion-controls": "node scripts/smoke-motion-controls.mjs",
     "typecheck": "vue-tsc -p tsconfig.json --noEmit",
     "test": "vitest run --passWithNoTests"
   },
diff --git a/apps/playground-weapp-preview/scripts/smoke-motion-controls.mjs b/apps/playground-weapp-preview/scripts/smoke-motion-controls.mjs
new file mode 100644
index 00000000..b2fb6f2a
--- /dev/null
+++ b/apps/playground-weapp-preview/scripts/smoke-motion-controls.mjs
@@ -0,0 +1,176 @@
+import assert from 'node:assert/strict'
+import { mkdtemp } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { chromium, expect } from '@playwright/test'
+
+const baseUrl = process.env.PREVIEW_URL ?? 'http://127.0.0.1:4182/'
+const artifacts = await mkdtemp(join(tmpdir(), 'varo-motion-smoke-'))
+const browser = await chromium.launch({ channel: 'chrome', headless: true })
+const checks = []
+
+try {
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 }, deviceScaleFactor: 1 })
+  const page = await context.newPage()
+  const runtimeErrors = []
+  const runtimeWarnings = []
+  page.on('console', (message) => {
+    if (message.type() === 'warning' || message.type() === 'warn') {
+      runtimeWarnings.push(message.text())
+    }
+  })
+  page.on('pageerror', error => runtimeErrors.push(error.message))
+  await page.goto(baseUrl)
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  const runtime = page.frameLocator('iframe')
+  const state = runtime.locator('[data-preview-field="motion-state"]')
+  await expect.poll(() => page.evaluate(() => document.querySelector('iframe').contentWindow.innerWidth)).toBe(390)
+
+  const switchHost = runtime.locator('wx-button.varo-switch')
+  const switchControl = switchHost.locator('> button')
+  await switchControl.scrollIntoViewIfNeeded()
+  const switchBox = await switchControl.boundingBox()
+  assert.ok(switchBox)
+  await page.mouse.move(switchBox.x + switchBox.width / 2, switchBox.y + switchBox.height / 2)
+  await page.mouse.down()
+  await expect(switchHost).toHaveClass(/varo-switch--pressed/)
+  await expect.poll(() => switchHost.locator('.varo-switch__thumb').evaluate((element) => {
+    const matrix = new DOMMatrix(getComputedStyle(element).transform)
+    return matrix.a
+  })).toBeCloseTo(1.16, 2)
+  await expect(switchHost.locator('.varo-switch__thumb')).toHaveCSS('transition-duration', '0.18s')
+  await page.mouse.up()
+  await expect(switchHost).not.toHaveClass(/varo-switch--pressed/)
+  await expect(state).toHaveAttribute('data-preview-value', /switch=true/)
+  await expect(switchControl).toHaveAttribute('aria-checked', 'true')
+  checks.push('switch stretch, release and controlled toggle')
+
+  const radios = runtime.locator('.varo-radio-group').filter({ hasText: '站内信' }).locator('wx-button.varo-radio')
+  const radioControls = radios.locator('> button')
+  await expect(radios.locator('.varo-radio__dot')).toHaveCount(3)
+  await expect(radios.nth(1).locator('.varo-radio__dot')).toHaveCSS('opacity', '0')
+  await radioControls.nth(1).click()
+  await expect(state).toHaveAttribute('data-preview-value', /radio=email/)
+  await expect(radioControls.nth(0)).toHaveAttribute('aria-checked', 'false')
+  await expect(radioControls.nth(1)).toHaveAttribute('aria-checked', 'true')
+  await expect(radios.nth(1).locator('.varo-radio__dot')).toHaveCSS('opacity', '1')
+  await expect(radios.nth(1).locator('.varo-radio__dot')).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  await expect(radios.nth(0).locator('.varo-radio__dot')).toHaveCount(1)
+  checks.push('radio persistent-dot selection')
+
+  const inputGeometry = await runtime.locator('.varo-input-number').evaluate((element) => {
+    const host = element.parentElement
+    const row = host?.parentElement
+    const copy = host?.previousElementSibling
+    return {
+      copyWidth: copy?.getBoundingClientRect().width ?? 0,
+      rowClientWidth: row?.clientWidth ?? 0,
+      rowScrollWidth: row?.scrollWidth ?? 0,
+      width: element.getBoundingClientRect().width,
+    }
+  })
+  assert.ok(inputGeometry.width >= 128 && inputGeometry.width <= 132)
+  assert.ok(inputGeometry.copyWidth > 0)
+  assert.ok(inputGeometry.rowScrollWidth <= inputGeometry.rowClientWidth)
+  const decrementButton = runtime.getByRole('button', { name: 'Decrease value', exact: true })
+  const incrementButton = runtime.getByRole('button', { name: 'Increase value', exact: true })
+  await expect(runtime.locator('wx-input:has(input[aria-label="Hidden native input"])')).toHaveAttribute('hidden', '')
+  await expect(decrementButton).toHaveCount(1)
+  await expect(incrementButton).toHaveCount(1)
+  await expect(runtime.getByRole('textbox', { name: 'Numeric value', exact: true })).toHaveCount(1)
+  await incrementButton.click()
+  await expect(state).toHaveAttribute('data-preview-value', /quantity=3/)
+  checks.push('compact InputNumber geometry and increment')
+
+  const ghostHost = runtime.locator('wx-button.varo-button').filter({ hasText: 'Ghost 操作' })
+  await expect(ghostHost).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  const ghostControl = ghostHost.locator('> button')
+  await ghostControl.scrollIntoViewIfNeeded()
+  const ghostBox = await ghostControl.boundingBox()
+  assert.ok(ghostBox)
+  await page.mouse.move(ghostBox.x + ghostBox.width / 2, ghostBox.y + ghostBox.height / 2)
+  await page.mouse.down()
+  await expect.poll(() => ghostHost.evaluate(element => new DOMMatrix(getComputedStyle(element).transform).a)).toBeCloseTo(0.98, 2)
+  const pressedGhostBackground = await ghostHost.evaluate(element => getComputedStyle(element).backgroundColor)
+  assert.notEqual(pressedGhostBackground, 'rgba(0, 0, 0, 0)')
+  await page.mouse.up()
+  await expect(ghostHost).not.toHaveClass(/varo-button--pressed/)
+  await expect(state).toHaveAttribute('data-preview-value', /actions=1/)
+  checks.push('button transparent ghost and press scale')
+
+  const toastRegion = runtime.locator('.varo-toast-region')
+  await expect(toastRegion).toHaveAttribute('data-inline', 'true')
+  await expect(toastRegion).toHaveCSS('flex-direction', 'column')
+  await expect(toastRegion).toHaveCSS('gap', '8px')
+  await expect(toastRegion.locator('.varo-toast')).toHaveCount(2)
+  await expect(toastRegion.locator('.varo-toast').first()).toHaveCSS('flex-direction', 'row')
+  const toastRects = await toastRegion.locator('.varo-toast').evaluateAll(elements => elements.map(element => element.getBoundingClientRect().toJSON()))
+  assert.ok(toastRects[1].top >= toastRects[0].bottom)
+  assert.ok(Math.abs(toastRects[0].left - toastRects[1].left) < 1)
+  assert.ok(Math.abs(toastRects[0].width - toastRects[1].width) < 1)
+  await expect(toastRegion.locator('.varo-toast').first()).toHaveAttribute('aria-busy', 'true')
+  await expect(toastRegion.locator('.varo-toast').first().locator('.varo-toast__spinner')).toHaveCSS('width', '20px')
+  await expect(toastRegion.locator('.varo-toast').first().locator('.varo-toast__spinner')).toHaveCSS('height', '20px')
+  await toastRegion.locator('.varo-toast').first().evaluate((element) => { element.dataset.probe = 'same-node' })
+  await runtime.getByRole('button', { name: '状态切换', exact: true }).click()
+  await expect(state).toHaveAttribute('data-preview-value', /toast=success/)
+  await expect(toastRegion.locator('.varo-toast').first()).toHaveAttribute('data-probe', 'same-node')
+  await expect(toastRegion.locator('.varo-toast').first()).not.toHaveAttribute('aria-busy')
+  await expect(toastRegion.locator('.varo-toast').first().locator('.varo-toast__icon .varo-icon')).toHaveCSS('width', '20px')
+  await expect(toastRegion.locator('.varo-toast').first().locator('.varo-toast__icon .varo-icon')).toHaveCSS('height', '20px')
+  await runtime.getByRole('button', { name: '查看同步结果', exact: true }).click()
+  await expect(state).toHaveAttribute('data-preview-value', /actions=2/)
+  await toastRegion.getByRole('button', { name: '关闭通知', exact: true }).click()
+  await expect(state).toHaveAttribute('data-preview-value', /warning=false/)
+  await expect(toastRegion.locator('.varo-toast')).toHaveCount(1)
+  checks.push('toast stack, in-place status morph, action and transition-owned dismissal')
+
+  await page.emulateMedia({ reducedMotion: 'reduce' })
+  await switchControl.scrollIntoViewIfNeeded()
+  const reducedSwitchBox = await switchControl.boundingBox()
+  assert.ok(reducedSwitchBox)
+  await page.mouse.move(reducedSwitchBox.x + reducedSwitchBox.width / 2, reducedSwitchBox.y + reducedSwitchBox.height / 2)
+  await page.mouse.down()
+  await expect(switchHost).toHaveClass(/varo-switch--pressed/)
+  const reducedScale = await switchHost.locator('.varo-switch__thumb').evaluate((element) => {
+    const matrix = new DOMMatrix(getComputedStyle(element).transform)
+    return matrix.a
+  })
+  await page.mouse.up()
+  await expect(switchHost).not.toHaveClass(/varo-switch--pressed/)
+  assert.ok(Math.abs(reducedScale - 1) < 0.01)
+  checks.push('reduced-motion switch feedback')
+
+  const surface = await runtime.locator('html').evaluate((element) => {
+    element.ownerDocument.defaultView?.scrollTo(0, 0)
+    const themedControl = element.ownerDocument.querySelector('.varo-switch')
+    const motionCard = element.ownerDocument.querySelector('[data-preview-field="motion-state"]')?.closest('.varo-card')
+    return {
+      clientWidth: element.clientWidth,
+      invalidAriaAttributes: [...element.ownerDocument.querySelectorAll('*')].flatMap(node =>
+        [...node.attributes]
+          .filter(attribute => attribute.name.startsWith('aria-') && /^(?:null|undefined)$/u.test(attribute.value))
+          .map(attribute => `${node.tagName.toLowerCase()}[${attribute.name}=${attribute.value}]`),
+      ),
+      motionCardClientWidth: motionCard?.clientWidth ?? 0,
+      motionCardScrollWidth: motionCard?.scrollWidth ?? 0,
+      primary: themedControl ? getComputedStyle(themedControl).getPropertyValue('--varo-ui-primary').trim() : '',
+      scrollWidth: element.scrollWidth,
+    }
+  })
+  assert.equal(surface.primary, '#0f766e')
+  assert.deepEqual(surface.invalidAriaAttributes, [])
+  assert.ok(surface.scrollWidth <= surface.clientWidth)
+  assert.ok(surface.motionCardScrollWidth <= surface.motionCardClientWidth)
+  checks.push('Varo primary palette and horizontal fit')
+  assert.deepEqual(runtimeWarnings, [])
+  assert.deepEqual(runtimeErrors, [])
+  checks.push('warning-free Varo runtime console')
+  await page.evaluate(() => window.scrollTo(0, 0))
+
+  await page.screenshot({ path: join(artifacts, 'motion-controls.png'), fullPage: true })
+  console.log(JSON.stringify({ runtimeUrl: page.frames().find(frame => frame.url().includes('runtime.html'))?.url(), artifacts, checks }))
+}
+finally {
+  await browser.close()
+}
diff --git a/apps/playground-weapp-preview/scripts/smoke-pull-refresh.mjs b/apps/playground-weapp-preview/scripts/smoke-pull-refresh.mjs
new file mode 100644
index 00000000..6313a22b
--- /dev/null
+++ b/apps/playground-weapp-preview/scripts/smoke-pull-refresh.mjs
@@ -0,0 +1,78 @@
+import assert from 'node:assert/strict'
+import { chromium, expect } from '@playwright/test'
+
+const baseUrl = process.env.PREVIEW_URL ?? 'http://127.0.0.1:4182/'
+const runtimeUrl = new URL('runtime.html?scenario=controls&session=pull-refresh-smoke', baseUrl).toString()
+const browser = await chromium.launch({ channel: 'chrome', headless: true })
+const errors = []
+
+try {
+  const page = await browser.newPage({ viewport: { width: 430, height: 844 } })
+  page.on('pageerror', error => errors.push(error.message))
+  await page.goto(runtimeUrl)
+  await expect(page.getByText('PullRefresh 原生下拉刷新', { exact: true })).toBeVisible()
+  const field = page.locator('[data-preview-field="pull-refresh-state"]')
+
+  async function fire(type, clientY, pointerId = 1) {
+    await page.evaluate(({ type, clientY, pointerId }) => {
+      const pullRefresh = document.querySelector('.varo-pull-refresh')
+      const event = new MouseEvent(type, { bubbles: true, cancelable: true, clientY })
+      Object.defineProperties(event, {
+        pointerId: { value: pointerId },
+        pointerType: { value: 'mouse' },
+      })
+      pullRefresh.dispatchEvent(event)
+    }, { type, clientY, pointerId })
+  }
+
+  async function nativeState() {
+    return page.evaluate(() => {
+      const pullRefresh = document.querySelector('.varo-pull-refresh')
+      return {
+        distance: pullRefresh.dataset.nativeRefresherDistance,
+        state: pullRefresh.dataset.nativeRefresherState,
+      }
+    })
+  }
+
+  await fire('pointerdown', 0, 1)
+  await fire('pointermove', 160, 1)
+  assert.deepEqual(await nativeState(), { distance: '80', state: 'ready' })
+  await fire('pointercancel', 160, 1)
+  assert.deepEqual(await nativeState(), { distance: '0', state: 'idle' })
+  await expect(field).toHaveAttribute('data-preview-value', 'loading=false;count=0')
+
+  await page.evaluate(() => {
+    const pullRefresh = document.querySelector('.varo-pull-refresh')
+    pullRefresh.scrollTop = 10
+  })
+  await fire('pointerdown', 0, 2)
+  await fire('pointermove', 200, 2)
+  await fire('pointerup', 200, 2)
+  await expect(field).toHaveAttribute('data-preview-value', 'loading=false;count=0')
+  await page.evaluate(() => {
+    document.querySelector('.varo-pull-refresh').scrollTop = 0
+  })
+
+  await fire('pointerdown', 0, 3)
+  await fire('pointermove', 80, 3)
+  assert.deepEqual(await nativeState(), { distance: '40', state: 'pulling' })
+  await fire('pointerup', 80, 3)
+  await expect(field).toHaveAttribute('data-preview-value', 'loading=false;count=0')
+
+  await fire('pointerdown', 0, 4)
+  await fire('pointermove', 160, 4)
+  assert.deepEqual(await nativeState(), { distance: '80', state: 'ready' })
+  await fire('pointerup', 160, 4)
+  await expect(field).toHaveAttribute('data-preview-value', 'loading=true;count=0')
+  await fire('pointerdown', 0, 5)
+  await fire('pointermove', 160, 5)
+  await fire('pointerup', 160, 5)
+  await expect(field).toHaveAttribute('data-preview-value', 'loading=false;count=1')
+
+  assert.deepEqual(errors, [])
+  console.log(JSON.stringify({ runtimeUrl, checks: ['cancel', 'non-top', 'below-threshold', 'loading-gate', 'refresh-completion'] }))
+}
+finally {
+  await browser.close()
+}
diff --git a/apps/playground-weapp/scripts/verify-devtools-project.mjs b/apps/playground-weapp/scripts/verify-devtools-project.mjs
index 3abbb039..ebd847d2 100644
--- a/apps/playground-weapp/scripts/verify-devtools-project.mjs
+++ b/apps/playground-weapp/scripts/verify-devtools-project.mjs
@@ -19,6 +19,7 @@ const requiredRegistryCatalogComponents = [
   'v-dialog-overlay',
   'v-dialog-root',
   'v-dialog-trigger',
+  'v-date-field',
   'v-divider',
   'v-grid',
   'v-grid-item',
@@ -33,16 +34,20 @@ const requiredRegistryCatalogComponents = [
   'v-notice-bar',
   'v-overlay',
   'v-pagination',
+  'v-picker',
   'v-popover-close',
   'v-popover-content',
   'v-popover-root',
   'v-popover-trigger',
   'v-popup',
+  'v-pull-refresh',
   'v-radio',
   'v-radio-group',
   'v-rate',
   'v-row',
   'v-safe-area',
+  'v-signature',
+  'v-watermark',
   'v-searchbar',
   'v-space',
   'v-steps',
@@ -54,6 +59,7 @@ const requiredRegistryCatalogComponents = [
   'v-tabs',
   'v-textarea',
   'v-toast',
+  'v-toast-region',
 ]
 
 function pageJsonPaths(appJson) {
diff --git a/apps/playground-weapp/src/agent-rag.test.ts b/apps/playground-weapp/src/agent-rag.test.ts
index 4f04cf18..16407945 100644
--- a/apps/playground-weapp/src/agent-rag.test.ts
+++ b/apps/playground-weapp/src/agent-rag.test.ts
@@ -92,7 +92,13 @@ describe('Native RAG citation feedback', () => {
       props: { steps: [{ id: 'retrieve', status: 'failed' }, { id: 'generate', status: 'running' }] },
     })
     expect(wrapper.attributes('data-status')).toBe('running')
-    await wrapper.get('.agent-rag__action').trigger('click')
+    const header = wrapper.get('.agent-rag__header')
+    expect(wrapper.findAll('.agent-rag__action')).toHaveLength(1)
+    expect(header.get('.agent-rag__action').text()).toBe('停止')
+    expect(wrapper.attributes('aria-busy')).toBeUndefined()
+    expect(header.get('[role="status"]').attributes('aria-live')).toBe('polite')
+    expect(wrapper.get('.agent-rag__progress').attributes('aria-busy')).toBe('true')
+    await header.get('.agent-rag__action').trigger('click')
     expect(wrapper.emitted('cancel')).toEqual([[]])
   })
 })
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentRagPipeline.vue b/apps/playground-weapp/src/components/agent-ui/AgentRagPipeline.vue
index 5d89aa90..29935dc2 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentRagPipeline.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentRagPipeline.vue
@@ -314,14 +314,14 @@ const answerParts = computed<AnswerPartView[]>(() => {
   })
 })
 
-const footerActionLabel = computed(() => {
+const actionLabel = computed(() => {
   if (anyRunning.value) { return '停止' }
   if (hasFailure.value) { return '重试流程' }
   if (allCompleted.value) { return '重新运行' }
   return '运行流程'
 })
 
-const footerStatusLabel = computed(() => {
+const statusLabel = computed(() => {
   if (anyRunning.value) { return `流程运行中，已完成 ${completedCount.value}/5` }
   if (hasFailure.value) { return `流程失败，已完成 ${completedCount.value}/5` }
   if (allCompleted.value) { return '流程已完成，5/5' }
@@ -394,16 +394,39 @@ onBeforeUnmount(clearPing)
 
 <template>
   <view :class="rootClass" :data-status="overallStatus">
-    <view class="flex min-h-12 min-w-0 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="min-w-0 break-words text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text v-if="showElapsed" class="flex-none text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ elapsedLabel }}
-      </text>
+    <view class="agent-rag__header flex min-h-16 min-w-0 flex-wrap items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px] py-2">
+      <view class="grid min-w-[140px] flex-1 gap-1">
+        <text class="min-w-0 break-words text-xs font-bold text-[var(--varo-agent-foreground)]">
+          {{ title }}
+        </text>
+        <text
+          class="break-words text-[11px] text-[var(--varo-agent-muted)]"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {{ statusLabel }}
+        </text>
+      </view>
+      <view class="flex flex-none items-center gap-2">
+        <text v-if="showElapsed" class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
+          {{ elapsedLabel }}
+        </text>
+        <button
+          class="agent-native-button agent-rag__action inline-flex min-h-10 flex-none items-center justify-center rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]"
+          type="button"
+          :aria-label="actionLabel"
+          hover-class="agent-rag__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="handleAction"
+        >
+          {{ actionLabel }}
+        </button>
+      </view>
     </view>
 
-    <view class="grid min-w-0 p-3">
+    <view class="agent-rag__progress grid min-w-0 p-3" :aria-busy="anyRunning">
       <view
         v-for="stage in stageRows"
         :key="stage.id"
@@ -563,25 +586,6 @@ onBeforeUnmount(clearPing)
         </view>
       </view>
     </view>
-
-    <view class="flex min-h-14 min-w-0 items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px] py-2">
-      <view class="min-w-0" role="status" aria-live="polite" aria-atomic="true">
-        <text class="break-words text-[11px] text-[var(--varo-agent-muted)]">
-          {{ footerStatusLabel }}
-        </text>
-      </view>
-      <button
-        class="agent-native-button agent-rag__action inline-flex min-h-9 flex-none items-center justify-center rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]"
-        type="button"
-        :aria-label="footerActionLabel"
-        hover-class="agent-rag__action--pressed"
-        :hover-start-time="20"
-        :hover-stay-time="70"
-        @click="handleAction"
-      >
-        {{ footerActionLabel }}
-      </button>
-    </view>
   </view>
 </template>
 
diff --git a/apps/playground-weapp/src/components/ui/date-utils.ts b/apps/playground-weapp/src/components/ui/date-utils.ts
new file mode 100644
index 00000000..48808348
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/date-utils.ts
@@ -0,0 +1,102 @@
+export interface CalendarDay {
+  date: string
+  day: number
+  inMonth: boolean
+}
+
+function pad(value: number): string {
+  return String(value).padStart(2, '0')
+}
+
+export function toDateString(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+export function parseDate(value: string | undefined, fallback = new Date()): Date {
+  if (!value) { return new Date(fallback) }
+  const [year, month = '1', day = '1'] = value.split('-')
+  return new Date(Number(year), Number(month) - 1, Number(day))
+}
+
+export function normalizeMonth(value?: string): string {
+  const date = parseDate(value)
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}`
+}
+
+export function shiftMonth(value: string | undefined, offset: number): string {
+  const date = parseDate(normalizeMonth(value))
+  date.setMonth(date.getMonth() + offset)
+  return normalizeMonth(toDateString(date))
+}
+
+export function shiftYear(value: string | undefined, offset: number): string {
+  const date = parseDate(normalizeMonth(value))
+  date.setFullYear(date.getFullYear() + offset)
+  return normalizeMonth(toDateString(date))
+}
+
+export function buildMonthDays(month?: string): CalendarDay[] {
+  const normalized = normalizeMonth(month)
+  const [year, monthNumber] = normalized.split('-').map(Number)
+  const first = new Date(year, monthNumber - 1, 1)
+  const last = new Date(year, monthNumber, 0)
+  const days: CalendarDay[] = []
+
+  for (let day = 1; day <= last.getDate(); day += 1) {
+    const date = new Date(first)
+    date.setDate(day)
+    days.push({
+      date: toDateString(date),
+      day,
+      inMonth: true,
+    })
+  }
+
+  return days
+}
+
+export interface DateFieldOption {
+  label: string
+  value: number
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+export function clampDateParts(year: number, month: number, day: number): [number, number, number] {
+  const nextMonth = Math.min(12, Math.max(1, month))
+  const nextDay = Math.min(daysInMonth(year, nextMonth), Math.max(1, day))
+  return [year, nextMonth, nextDay]
+}
+
+export function dateFieldValue(year: number, month: number, day: number): string {
+  const [nextYear, nextMonth, nextDay] = clampDateParts(year, month, day)
+  return `${nextYear}-${pad(nextMonth)}-${pad(nextDay)}`
+}
+
+export function parseDateFieldValue(value: string | undefined, fallback = new Date()): [number, number, number] {
+  const date = parseDate(value, fallback)
+  return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
+}
+
+export function buildDateFieldColumns(
+  value: string | undefined,
+  minYear = 1970,
+  maxYear = 2100,
+): DateFieldOption[][] {
+  const [year, month] = parseDateFieldValue(value)
+  const years: DateFieldOption[] = []
+  for (let next = minYear; next <= maxYear; next += 1) {
+    years.push({ label: String(next), value: next })
+  }
+  const months: DateFieldOption[] = Array.from({ length: 12 }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  const days: DateFieldOption[] = Array.from({ length: daysInMonth(year, month) }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  return [years, months, days]
+}
diff --git a/apps/playground-weapp/src/components/ui/input-number.vue b/apps/playground-weapp/src/components/ui/input-number.vue
index 075003e8..628ce9f5 100644
--- a/apps/playground-weapp/src/components/ui/input-number.vue
+++ b/apps/playground-weapp/src/components/ui/input-number.vue
@@ -2,6 +2,7 @@
 import { useNumberFieldRoot } from '@varo-ui/headless'
 import { computed, shallowRef, toRef, watch } from 'wevu'
 import { varoReactiveRuntime } from '../../lib/varo-primitives'
+import VIcon from './v-icon.vue'
 
 // WeChat validates initial child bindings before Wevu applies setup defaults.
 defineOptions({
@@ -13,7 +14,10 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
+    decreaseAriaLabel?: string
     disabled?: boolean
+    increaseAriaLabel?: string
+    inputAriaLabel?: string
     max?: number
     min?: number
     precision?: number
@@ -22,7 +26,10 @@ const props = withDefaults(
     value?: number
   }>(),
   {
+    decreaseAriaLabel: 'Decrease value',
     disabled: false,
+    increaseAriaLabel: 'Increase value',
+    inputAriaLabel: 'Numeric value',
     max: Number.POSITIVE_INFINITY,
     min: Number.NEGATIVE_INFINITY,
     readonly: false,
@@ -96,25 +103,26 @@ function increment() {
 
 <template>
   <view class="varo-input-number" :data-disabled="String(fieldDisabled)" :data-readonly="String(readonly)">
-    <button v-if="canDecrease" class="varo-input-number__minus" @tap="decrement">
-      −
+    <button v-if="canDecrease" class="varo-input-number__minus" :aria-label="props.decreaseAriaLabel" @tap="decrement">
+      <VIcon name="minus" :size="14" />
+    </button>
+    <button v-else class="varo-input-number__minus varo-input-number__control--disabled" :aria-label="props.decreaseAriaLabel" aria-disabled="true" disabled>
+      <VIcon name="minus" :size="14" />
     </button>
-    <view v-else class="varo-input-number__minus varo-input-number__control--disabled" aria-disabled="true">
-      −
-    </view>
     <input
       class="varo-input-number__input"
+      :aria-label="props.inputAriaLabel"
       type="digit"
       :value="String(value)"
       :disabled="!interactive"
       @blur="input"
     >
-    <button v-if="canIncrease" class="varo-input-number__plus" @tap="increment">
-      +
+    <button v-if="canIncrease" class="varo-input-number__plus" :aria-label="props.increaseAriaLabel" @tap="increment">
+      <VIcon name="plus" :size="14" />
+    </button>
+    <button v-else class="varo-input-number__plus varo-input-number__control--disabled" :aria-label="props.increaseAriaLabel" aria-disabled="true" disabled>
+      <VIcon name="plus" :size="14" />
     </button>
-    <view v-else class="varo-input-number__plus varo-input-number__control--disabled" aria-disabled="true">
-      +
-    </view>
   </view>
 </template>
 
diff --git a/apps/playground-weapp/src/components/ui/select.vue b/apps/playground-weapp/src/components/ui/select.vue
index 8ba95954..1d340ab4 100644
--- a/apps/playground-weapp/src/components/ui/select.vue
+++ b/apps/playground-weapp/src/components/ui/select.vue
@@ -50,6 +50,7 @@ const emit = defineEmits<{
 
 const keyword = shallowRef<string | null>(null)
 const open = shallowRef(false)
+const clearActive = shallowRef(false)
 const controlled = computed(() => true)
 const normalizedValue = computed<SelectValue | SelectValue[] | undefined>(() => props.value ?? undefined)
 const selectRoot = useSelectRoot({
@@ -93,7 +94,7 @@ const selectedPreviewStyle = computed(() =>
     : '',
 )
 const showFilterInput = computed(() => props.filterable && !props.readonly)
-const showClear = computed(() => props.clearable && selectedValues.value.length > 0 && interactive.value && selectOpen.value)
+const showClear = computed(() => props.clearable && selectedValues.value.length > 0 && interactive.value)
 
 watch(selectOpen, (isOpen) => {
   if (!isOpen) { keyword.value = null }
@@ -146,7 +147,17 @@ function closePanel() {
 </script>
 
 <template>
-  <view :class="rootClass" :data-disabled="String(selectDisabled)" :data-readonly="String(props.readonly)" :data-multiple="String(multiple)" :data-open="String(selectOpen)">
+  <view
+    :class="rootClass"
+    :data-disabled="String(selectDisabled)"
+    :data-readonly="String(props.readonly)"
+    :data-multiple="String(multiple)"
+    :data-open="String(selectOpen)"
+    :data-clear-active="String(clearActive)"
+    @touchstart="clearActive = true"
+    @touchend="clearActive = selectOpen"
+    @touchcancel="clearActive = selectOpen"
+  >
     <view v-if="selectOpen" class="varo-select__dismiss fixed inset-0 -z-10" aria-hidden="true" @click="closePanel" />
     <view
       v-if="showFilterInput"
@@ -176,7 +187,7 @@ function closePanel() {
           aria-label="Clear selection"
           @click.stop="clear"
         >
-          <VIcon name="close" :size="14" />
+          <VIcon name="danger" :size="16" />
         </button>
         <text class="varo-select__arrow" aria-hidden="true" />
       </view>
@@ -211,7 +222,7 @@ function closePanel() {
           aria-label="Clear selection"
           @click.stop="clear"
         >
-          <VIcon name="close" :size="14" />
+          <VIcon name="danger" :size="16" />
         </button>
         <text class="varo-select__arrow" aria-hidden="true" />
       </view>
diff --git a/apps/playground-weapp/src/components/ui/v-button.vue b/apps/playground-weapp/src/components/ui/v-button.vue
index b0a7babc..a8542b6a 100644
--- a/apps/playground-weapp/src/components/ui/v-button.vue
+++ b/apps/playground-weapp/src/components/ui/v-button.vue
@@ -13,6 +13,7 @@ type ButtonShape = 'default' | 'square' | 'round'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     block?: boolean
     className?: ClassValue
     color?: string
@@ -31,6 +32,7 @@ const props = withDefaults(
     variant?: ButtonVariant
   }>(),
   {
+    ariaLabel: '',
     block: false,
     disabled: false,
     hairline: false,
@@ -127,6 +129,7 @@ function pressCancel() {
   <button
     :class="classes"
     :style="customStyle"
+    :aria-label="props.ariaLabel"
     :disabled="!interactive"
     :form-type="formType"
     :hover-class="hoverClass"
diff --git a/apps/playground-weapp/src/components/ui/v-card.vue b/apps/playground-weapp/src/components/ui/v-card.vue
index 3a6c1522..464cc399 100644
--- a/apps/playground-weapp/src/components/ui/v-card.vue
+++ b/apps/playground-weapp/src/components/ui/v-card.vue
@@ -7,14 +7,18 @@ import { varoReactiveRuntime } from '../../lib/varo-primitives'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     className?: ClassValue
     interactive?: boolean
     padding?: boolean
+    role?: string
     variant?: 'default' | 'outline' | 'elevated' | 'muted'
   }>(),
   {
+    ariaLabel: '',
     interactive: false,
     padding: true,
+    role: '',
     variant: 'default',
   },
 )
@@ -59,6 +63,8 @@ function pressCancel() {
 <template>
   <view
     :class="classes"
+    :aria-label="props.ariaLabel"
+    :role="props.role"
     :hover-class="hoverClass"
     :hover-start-time="20"
     :hover-stay-time="70"
diff --git a/apps/playground-weapp/src/components/ui/v-checkbox.vue b/apps/playground-weapp/src/components/ui/v-checkbox.vue
index 247207c4..a418b07e 100644
--- a/apps/playground-weapp/src/components/ui/v-checkbox.vue
+++ b/apps/playground-weapp/src/components/ui/v-checkbox.vue
@@ -8,12 +8,14 @@ import VIcon from './v-icon.vue'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     checked?: boolean
     disabled?: boolean
     label?: string
     value?: CheckboxValue
   }>(),
   {
+    ariaLabel: '',
     checked: false,
     disabled: false,
     label: '',
@@ -58,6 +60,7 @@ function toggle() {
 <template>
   <button
     class="varo-checkbox"
+    :aria-label="props.ariaLabel"
     type="button"
     role="checkbox"
     :disabled="!interactive"
diff --git a/apps/playground-weapp/src/components/ui/v-date-field.vue b/apps/playground-weapp/src/components/ui/v-date-field.vue
new file mode 100644
index 00000000..56654f91
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/v-date-field.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed, shallowRef, watch } from 'wevu'
+import { cn } from '../../lib/cn'
+import { buildDateFieldColumns, dateFieldValue, parseDateFieldValue } from './date-utils'
+import VPicker from './v-picker.vue'
+
+const props = withDefaults(
+  defineProps<{
+    cancelText?: string
+    className?: ClassValue
+    confirmText?: string
+    disabled?: boolean
+    maxYear?: number
+    minYear?: number
+    placeholder?: string
+    readonly?: boolean
+    title?: string
+    value?: string
+    visible?: boolean
+  }>(),
+  {
+    cancelText: 'Cancel',
+    className: undefined,
+    confirmText: 'Confirm',
+    disabled: false,
+    maxYear: 2100,
+    minYear: 1970,
+    placeholder: 'Select date',
+    readonly: false,
+    title: undefined,
+    value: undefined,
+    visible: false,
+  },
+)
+
+const emit = defineEmits<{
+  'cancel': []
+  'change': [value: string]
+  'confirm': [value: string]
+  'update:value': [value: string]
+  'update:visible': [visible: boolean]
+}>()
+
+const draftValue = shallowRef(props.value)
+const classes = computed(() => cn('varo-date-field', props.className))
+const columns = computed(() => buildDateFieldColumns(draftValue.value, props.minYear, props.maxYear))
+const pickerValue = computed(() => parseDateFieldValue(draftValue.value))
+const controlLabel = computed(() => props.value ?? props.placeholder)
+const valueClass = computed(() => props.value ? 'varo-date-field__value' : 'varo-date-field__placeholder')
+const dataDisabled = computed(() => String(props.disabled))
+const dataOpen = computed(() => String(props.visible))
+const dataReadonly = computed(() => String(props.readonly))
+
+watch(() => props.value, (value) => {
+  draftValue.value = value
+})
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    draftValue.value = props.value
+  }
+})
+
+function toDate(value: string | number | Array<string | number | undefined> | undefined): string {
+  const values = Array.isArray(value) ? value : [value]
+  const [year, month, day] = parseDateFieldValue(draftValue.value)
+  return dateFieldValue(Number(values[0] ?? year), Number(values[1] ?? month), Number(values[2] ?? day))
+}
+
+function open() {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  draftValue.value = props.value
+  emit('update:visible', true)
+}
+
+function onChange(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+  const next = toDate(payload.value)
+  draftValue.value = next
+  emit('change', next)
+}
+
+function onConfirm(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+  const next = toDate(payload.value)
+  draftValue.value = next
+  emit('update:value', next)
+  emit('confirm', next)
+}
+
+function onCancel() {
+  draftValue.value = props.value
+  emit('cancel')
+}
+
+function onUpdateVisible(visible: boolean) {
+  if (!visible) {
+    draftValue.value = props.value
+  }
+  emit('update:visible', visible)
+}
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :data-disabled="dataDisabled"
+    :data-open="dataOpen"
+    :data-readonly="dataReadonly"
+  >
+    <button
+      class="varo-date-field__control"
+      type="button"
+      :disabled="props.disabled"
+      :aria-expanded="props.visible"
+      :aria-readonly="props.readonly"
+      @click="open"
+    >
+      <text :class="valueClass">
+        {{ controlLabel }}
+      </text>
+      <text class="varo-date-field__arrow" aria-hidden="true" />
+    </button>
+    <VPicker
+      class-name="varo-date-field__picker"
+      :cancel-text="props.cancelText"
+      :columns="columns"
+      :confirm-text="props.confirmText"
+      :title="props.title"
+      :value="pickerValue"
+      :visible="props.visible"
+      @cancel="onCancel"
+      @change="onChange"
+      @confirm="onConfirm"
+      @update:visible="onUpdateVisible"
+    />
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/components/ui/v-input.vue b/apps/playground-weapp/src/components/ui/v-input.vue
index 6abfdd75..4257c855 100644
--- a/apps/playground-weapp/src/components/ui/v-input.vue
+++ b/apps/playground-weapp/src/components/ui/v-input.vue
@@ -384,7 +384,7 @@ function input(event: unknown) {
   return nextValue
 }
 
-function focus(event: unknown) {
+function handleFocus(event: unknown) {
   focused.value = true
   focusRequested.value = false
   emit('focus', event)
@@ -459,6 +459,7 @@ function touchstart(event: unknown) {
     :data-invalid="dataInvalid"
     :data-readonly="dataReadonly"
     :data-size="props.size"
+    :data-type="props.type"
   >
     <label
       v-if="labelVisible"
@@ -524,7 +525,7 @@ function touchstart(event: unknown) {
         :style="controlStyle"
         :value="currentValue"
         @input="input"
-        @focus="focus"
+        @focus="handleFocus"
         @blur="blur"
         @confirm="confirm"
         @keyboardheightchange="keyboardHeightChange"
@@ -586,7 +587,7 @@ function touchstart(event: unknown) {
         :type="nativeType"
         :value="currentValue"
         @input="input"
-        @focus="focus"
+        @focus="handleFocus"
         @blur="blur"
         @confirm="confirm"
         @keyboardheightchange="keyboardHeightChange"
@@ -604,7 +605,7 @@ function touchstart(event: unknown) {
         aria-label="Clear input"
         @click="clear"
       >
-        <VIcon name="close" :size="14" />
+        <VIcon name="danger" :size="16" />
       </button>
       <text v-if="props.showWordLimit" class="varo-input__word-limit">
         {{ wordLimit }}
diff --git a/apps/playground-weapp/src/components/ui/v-picker.vue b/apps/playground-weapp/src/components/ui/v-picker.vue
new file mode 100644
index 00000000..0004b4cb
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/v-picker.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed, shallowRef, watch } from 'wevu'
+import { cn } from '../../lib/cn'
+
+type PickerScalar = number | string
+
+interface PickerOption {
+  disabled?: boolean
+  label: string
+  value: PickerScalar
+}
+
+type PickerColumn = PickerOption[]
+type PickerValue = PickerScalar | PickerScalar[] | undefined
+
+interface ConfirmPayload {
+  option: PickerOption | Array<PickerOption | undefined> | undefined
+  value: PickerValue
+}
+
+interface ChangePayload {
+  columnIndex?: number
+  option: PickerOption
+  value: PickerValue
+}
+
+interface RenderedPickerOption {
+  activeData: string
+  disabled: boolean
+  id: string
+  key: string
+  label: string
+  option: PickerOption
+}
+
+interface RenderedPickerColumn {
+  activeId: string
+  index: number
+  key: string
+  options: RenderedPickerOption[]
+  scrollTop: number
+  style: string
+}
+
+defineOptions({
+  properties: {
+    columns: { type: null },
+    value: { type: null },
+  },
+})
+
+const props = withDefaults(
+  defineProps<{
+    cancelText?: string
+    className?: ClassValue
+    columns?: PickerColumn | PickerColumn[]
+    confirmText?: string
+    title?: string
+    value?: PickerValue
+    visible?: boolean
+  }>(),
+  {
+    cancelText: 'Cancel',
+    className: undefined,
+    columns: () => [],
+    confirmText: 'Confirm',
+    title: undefined,
+    value: undefined,
+    visible: false,
+  },
+)
+
+const emit = defineEmits<{
+  'cancel': []
+  'change': [payload: ChangePayload]
+  'confirm': [payload: ConfirmPayload]
+  'update:value': [value: PickerValue]
+  'update:visible': [visible: boolean]
+}>()
+
+function isOptionList(value: unknown): value is PickerOption[] {
+  return Array.isArray(value) && (value.length === 0 || (typeof value[0] === 'object' && value[0] !== null && 'label' in value[0]))
+}
+
+function normalizeColumns(columns: PickerColumn | PickerColumn[]): PickerColumn[] {
+  if (columns.length === 0) {
+    return [[]]
+  }
+  return isOptionList(columns) ? [columns] : columns
+}
+
+function firstEnabledValue(column: PickerColumn): PickerScalar | undefined {
+  return column.find(option => !option.disabled)?.value ?? column[0]?.value
+}
+
+function normalizeValue(value: PickerValue, columns: PickerColumn[]): Array<PickerScalar | undefined> {
+  const values = Array.isArray(value) ? value : [value]
+  return columns.map((column, index) => {
+    const next = values[index]
+    if (next !== undefined && column.some(option => option.value === next && !option.disabled)) {
+      return next
+    }
+    return firstEnabledValue(column)
+  })
+}
+
+const resolvedColumns = computed(() => normalizeColumns(props.columns))
+const selectedValues = shallowRef(normalizeValue(props.value, resolvedColumns.value))
+const classes = computed(() => cn('varo-picker', props.className))
+const columnCount = computed(() => String(resolvedColumns.value.length))
+const selectedOptions = computed(() =>
+  resolvedColumns.value.map((column, index) => column.find(option => option.value === selectedValues.value[index])),
+)
+const renderedColumns = computed<RenderedPickerColumn[]>(() =>
+  resolvedColumns.value.map((column, index) => {
+    const options = column.map((option, optionIndex) => ({
+      activeData: String(option.value === selectedValues.value[index]),
+      disabled: Boolean(option.disabled),
+      id: `varo-picker-${index}-${optionIndex}`,
+      key: `${index}-${String(option.value)}`,
+      label: option.label,
+      option,
+    }))
+    const activeIndex = Math.max(0, options.findIndex(option => option.activeData === 'true'))
+    const height = Math.min(Math.max(column.length, 1) * 42, 240)
+    return {
+      activeId: options[activeIndex]?.id ?? '',
+      index,
+      key: `column-${index}`,
+      options,
+      scrollTop: Math.max(0, activeIndex * 42 - (height - 42) / 2),
+      style: `height: ${height}px`,
+    }
+  }),
+)
+
+watch(
+  [() => props.value, resolvedColumns],
+  () => {
+    selectedValues.value = normalizeValue(props.value, resolvedColumns.value)
+  },
+)
+
+function publishedValue(values: Array<PickerScalar | undefined>): PickerValue {
+  return resolvedColumns.value.length === 1 ? values[0] : values as PickerScalar[]
+}
+
+function select(columnIndex: number, option: PickerOption) {
+  if (option.disabled) {
+    return
+  }
+
+  const next = selectedValues.value.slice()
+  next[columnIndex] = option.value
+  selectedValues.value = next
+  const value = publishedValue(next)
+  const payload = resolvedColumns.value.length === 1
+    ? { option, value }
+    : { columnIndex, option, value }
+  emit('change', payload)
+}
+
+function confirm() {
+  const value = publishedValue(selectedValues.value)
+  emit('update:value', value)
+  emit('confirm', {
+    option: resolvedColumns.value.length === 1 ? selectedOptions.value[0] : selectedOptions.value,
+    value,
+  })
+  emit('update:visible', false)
+}
+
+function cancel() {
+  selectedValues.value = normalizeValue(props.value, resolvedColumns.value)
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <view v-if="props.visible" :class="classes" :data-columns="columnCount">
+    <view class="varo-picker__toolbar">
+      <button class="varo-picker__cancel" type="button" @click="cancel">
+        {{ props.cancelText }}
+      </button>
+      <text v-if="props.title" class="varo-picker__title">
+        {{ props.title }}
+      </text>
+      <button class="varo-picker__confirm" type="button" @click="confirm">
+        {{ props.confirmText }}
+      </button>
+    </view>
+    <view class="varo-picker__columns">
+      <scroll-view
+        v-for="column in renderedColumns"
+        :key="column.key"
+        class="varo-picker__column"
+        scroll-y
+        :scroll-into-view="column.activeId"
+        :scroll-top="column.scrollTop"
+        :style="column.style"
+      >
+        <button
+          v-for="item in column.options"
+          :id="item.id"
+          :key="item.key"
+          class="varo-picker__option"
+          type="button"
+          :disabled="item.disabled"
+          :data-active="item.activeData"
+          @click="select(column.index, item.option)"
+        >
+          {{ item.label }}
+        </button>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/components/ui/v-pull-refresh.vue b/apps/playground-weapp/src/components/ui/v-pull-refresh.vue
new file mode 100644
index 00000000..3aa7a1d1
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/v-pull-refresh.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed } from 'wevu'
+import { cn } from '../../lib/cn'
+
+const props = withDefaults(
+  defineProps<{
+    className?: ClassValue
+    disabled?: boolean
+    loading?: boolean
+    loadingText?: string
+    threshold?: number
+  }>(),
+  {
+    className: undefined,
+    disabled: false,
+    loading: false,
+    loadingText: '加载中',
+    threshold: 64,
+  },
+)
+
+const emit = defineEmits<{
+  refresh: []
+}>()
+
+const classes = computed(() => cn('varo-pull-refresh', props.className))
+const dataDisabled = computed(() => String(props.disabled))
+const dataState = computed(() => props.loading ? 'loading' : 'idle')
+const refresherEnabled = computed(() => !props.disabled)
+
+function refresh() {
+  if (!props.disabled && !props.loading) {
+    emit('refresh')
+  }
+}
+</script>
+
+<template>
+  <scroll-view
+    :class="classes"
+    scroll-y
+    refresher-default-style="black"
+    :refresher-enabled="refresherEnabled"
+    :refresher-threshold="props.threshold"
+    :refresher-triggered="props.loading"
+    :aria-busy="props.loading"
+    :data-disabled="dataDisabled"
+    :data-state="dataState"
+    @refresherrefresh="refresh"
+  >
+    <slot />
+    <view v-if="props.loading" class="varo-pull-refresh__native-status" aria-live="polite">
+      {{ props.loadingText }}
+    </view>
+  </scroll-view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/components/ui/v-radio.vue b/apps/playground-weapp/src/components/ui/v-radio.vue
index 84c4b72d..69ded94a 100644
--- a/apps/playground-weapp/src/components/ui/v-radio.vue
+++ b/apps/playground-weapp/src/components/ui/v-radio.vue
@@ -58,6 +58,9 @@ function select() {
 <template>
   <button
     :class="classes"
+    hover-class="varo-radio--pressed"
+    :hover-start-time="20"
+    :hover-stay-time="70"
     type="button"
     role="radio"
     :aria-checked="checked"
@@ -69,7 +72,7 @@ function select() {
   >
     <view class="varo-radio__icon" aria-hidden="true">
       <slot name="icon">
-        <view v-if="checked" class="varo-radio__dot" />
+        <view class="varo-radio__dot" />
       </slot>
     </view>
     <text class="varo-radio__label">
@@ -83,15 +86,6 @@ function select() {
   </button>
 </template>
 
-<style>
-.varo-radio__dot {
-  width: 6px;
-  height: 6px;
-  background: currentcolor;
-  border-radius: 50%;
-}
-</style>
-
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/ui/v-signature.vue b/apps/playground-weapp/src/components/ui/v-signature.vue
new file mode 100644
index 00000000..02d9966f
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/v-signature.vue
@@ -0,0 +1,337 @@
+<script lang="ts">
+</script>
+
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useNativeInstance, watch } from 'wevu'
+import { cn } from '../../lib/cn'
+
+export interface SignaturePoint {
+  x: number
+  y: number
+}
+
+export interface SignatureStroke {
+  points: SignaturePoint[]
+}
+
+defineOptions({
+  properties: {
+    value: { type: null },
+  },
+})
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    background?: string
+    className?: ClassValue
+    clearText?: string
+    disabled?: boolean
+    height?: number
+    lineColor?: string
+    lineWidth?: number
+    showClear?: boolean
+    value?: SignatureStroke[]
+  }>(),
+  {
+    ariaLabel: 'Signature pad',
+    background: '#ffffff',
+    className: undefined,
+    clearText: '清除签名',
+    disabled: false,
+    height: 200,
+    lineColor: '#172033',
+    lineWidth: 2,
+    showClear: true,
+    value: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  'change': [value: SignatureStroke[]]
+  'clear': []
+  'end': [stroke: SignatureStroke]
+  'start': []
+  'update:value': [value: SignatureStroke[]]
+}>()
+
+let signatureSequence = 0
+
+function nextSignatureId() {
+  signatureSequence += 1
+  return `varo-signature-${signatureSequence}`
+}
+
+interface SignatureTouch {
+  identifier?: number
+  clientX?: number
+  clientY?: number
+  x?: number
+  y?: number
+}
+
+interface SignatureTouchDetail {
+  changedTouches?: ArrayLike<SignatureTouch>
+  touches?: ArrayLike<SignatureTouch>
+}
+function eventTouch(event: TouchEvent, changed = false, identifier?: number): SignatureTouch | undefined {
+  const directTouches = (changed ? event.changedTouches : event.touches) as unknown as ArrayLike<SignatureTouch> | undefined
+  const detail = (event as TouchEvent & { detail?: SignatureTouchDetail }).detail
+  const detailTouches = changed ? detail?.changedTouches : detail?.touches
+  const touches = directTouches?.length ? directTouches : detailTouches
+  if (identifier === undefined) {
+    return touches?.[0]
+  }
+  for (let index = 0; index < (touches?.length ?? 0); index += 1) {
+    const touch = touches?.[index]
+    if (touch?.identifier === identifier) {
+      return touch
+    }
+  }
+  return undefined
+}
+
+function cloneStrokes(strokes: SignatureStroke[]): SignatureStroke[] {
+  return strokes.map(stroke => ({ points: stroke.points.map(point => ({ ...point })) }))
+}
+
+const nativeInstance = useNativeInstance()
+const owner = nativeInstance as unknown as WechatMiniprogram.Component.TrivialInstance
+const canvasId = nextSignatureId()
+const classes = computed(() => cn('varo-signature', props.className))
+const canvasStyle = computed(() => `height: ${props.height}px; background: ${props.background}`)
+const strokes = shallowRef(cloneStrokes(props.value))
+const dataDisabled = computed<'true' | 'false'>(() => props.disabled ? 'true' : 'false')
+const dataEmpty = computed(() => String(strokes.value.length === 0))
+let context: WechatMiniprogram.CanvasContext | undefined
+let currentPoints: SignaturePoint[] = []
+let activeTouchId: number | undefined
+let canvasWidth = 320
+let canvasHeight = props.height
+let initializeTimer: ReturnType<typeof setTimeout> | undefined
+
+function prepareContext() {
+  if (!context) {
+    return
+  }
+  context.setStrokeStyle(props.lineColor)
+  context.setLineWidth(props.lineWidth)
+  context.setLineCap('round')
+  context.setLineJoin('round')
+}
+
+function drawStroke(stroke: SignatureStroke) {
+  if (!context || stroke.points.length === 0) {
+    return
+  }
+  prepareContext()
+  context.beginPath()
+  const first = stroke.points[0]
+  const firstX = first.x * canvasWidth
+  const firstY = first.y * canvasHeight
+  if (stroke.points.length === 1) {
+    context.setFillStyle(props.lineColor)
+    context.arc(firstX, firstY, Math.max(0.5, props.lineWidth / 2), 0, Math.PI * 2)
+    context.fill()
+    return
+  }
+  context.moveTo(firstX, firstY)
+  for (const point of stroke.points.slice(1)) {
+    context.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+  }
+  context.stroke()
+}
+
+function redraw() {
+  if (!context) {
+    return
+  }
+  context.clearRect(0, 0, canvasWidth, canvasHeight)
+  context.setFillStyle(props.background)
+  context.fillRect(0, 0, canvasWidth, canvasHeight)
+  for (const stroke of strokes.value) {
+    drawStroke(stroke)
+  }
+  context.draw()
+}
+
+function pointFromTouch(touch: SignatureTouch): SignaturePoint {
+  const x = touch.x ?? touch.clientX ?? 0
+  const y = touch.y ?? touch.clientY ?? 0
+  return {
+    x: Math.min(1, Math.max(0, x / canvasWidth)),
+    y: Math.min(1, Math.max(0, y / canvasHeight)),
+  }
+}
+
+function touchStart(event: TouchEvent) {
+  if (props.disabled || currentPoints.length > 0) {
+    return
+  }
+  const touch = eventTouch(event)
+  if (!touch) {
+    return
+  }
+  activeTouchId = touch.identifier
+  currentPoints = [pointFromTouch(touch)]
+  emit('start')
+}
+
+function touchCancel(event?: TouchEvent) {
+  if (event && activeTouchId !== undefined && !eventTouch(event, true, activeTouchId)) {
+    return
+  }
+  activeTouchId = undefined
+  currentPoints = []
+  redraw()
+}
+
+function touchMove(event: TouchEvent) {
+  if (props.disabled) {
+    if (currentPoints.length > 0) {
+      touchCancel()
+    }
+    return
+  }
+  if (currentPoints.length === 0) {
+    return
+  }
+  const touch = eventTouch(event, false, activeTouchId)
+  if (!touch) {
+    return
+  }
+  const point = pointFromTouch(touch)
+  const previous = currentPoints[currentPoints.length - 1]
+  currentPoints.push(point)
+  if (!context) {
+    return
+  }
+  prepareContext()
+  context.beginPath()
+  context.moveTo(previous.x * canvasWidth, previous.y * canvasHeight)
+  context.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+  context.stroke()
+  context.draw(true)
+}
+
+function samePoint(left: SignaturePoint, right: SignaturePoint) {
+  return left.x === right.x && left.y === right.y
+}
+
+function touchEnd(event: TouchEvent) {
+  if (props.disabled) {
+    touchCancel()
+    return
+  }
+  if (currentPoints.length === 0) {
+    return
+  }
+  const touch = eventTouch(event, true, activeTouchId)
+  if (activeTouchId !== undefined && !touch) {
+    return
+  }
+  const terminalPoint = touch ? pointFromTouch(touch) : undefined
+  const previousPoint = currentPoints[currentPoints.length - 1]
+  if (terminalPoint && !samePoint(previousPoint, terminalPoint)) {
+    currentPoints.push(terminalPoint)
+  }
+  activeTouchId = undefined
+  const stroke = { points: currentPoints.map(point => ({ ...point })) }
+  const next = [...strokes.value, stroke]
+  currentPoints = []
+  emit('update:value', cloneStrokes(next))
+  emit('change', cloneStrokes(next))
+  emit('end', { points: stroke.points.map(point => ({ ...point })) })
+  void nextTick(redraw)
+}
+
+function clear() {
+  if (props.disabled || strokes.value.length === 0) {
+    return
+  }
+  activeTouchId = undefined
+  currentPoints = []
+  emit('update:value', [])
+  emit('change', [])
+  emit('clear')
+  void nextTick(redraw)
+}
+
+function initialize() {
+  context = wx.createCanvasContext(canvasId, owner)
+  const query = nativeInstance.createSelectorQuery() ?? wx.createSelectorQuery().in(owner)
+  query.select(`#${canvasId}`).boundingClientRect((rect) => {
+    if (rect) {
+      canvasWidth = Math.max(1, rect.width)
+      canvasHeight = Math.max(1, rect.height)
+    }
+    redraw()
+  }).exec()
+}
+
+function scheduleInitialize() {
+  clearTimeout(initializeTimer)
+  initializeTimer = setTimeout(() => {
+    initializeTimer = undefined
+    initialize()
+  }, 0)
+}
+
+watch(() => props.value, (value) => {
+  strokes.value = cloneStrokes(value)
+  redraw()
+}, { deep: true })
+watch([() => props.background, () => props.lineColor, () => props.lineWidth], redraw)
+watch(() => props.height, scheduleInitialize)
+watch(() => props.disabled, (disabled) => {
+  if (disabled && currentPoints.length > 0) {
+    touchCancel()
+  }
+})
+
+onMounted(() => {
+  scheduleInitialize()
+  wx.onWindowResize?.(scheduleInitialize)
+})
+onBeforeUnmount(() => {
+  clearTimeout(initializeTimer)
+  wx.offWindowResize?.(scheduleInitialize)
+})
+
+defineExpose({ clear })
+</script>
+
+<template>
+  <view :class="classes" :data-disabled="dataDisabled" :data-empty="dataEmpty">
+    <canvas
+      :id="canvasId"
+      :canvas-id="canvasId"
+      class="varo-signature__canvas"
+      :style="canvasStyle"
+      :aria-label="props.ariaLabel"
+      :aria-disabled="dataDisabled"
+      :disable-scroll="true"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
+      @touchcancel="touchCancel"
+    />
+    <button
+      v-if="props.showClear"
+      class="varo-signature__clear"
+      type="button"
+      :disabled="props.disabled || strokes.length === 0"
+      @click="clear"
+    >
+      {{ props.clearText }}
+    </button>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/components/ui/v-switch.vue b/apps/playground-weapp/src/components/ui/v-switch.vue
index f1a6c37c..b2015c45 100644
--- a/apps/playground-weapp/src/components/ui/v-switch.vue
+++ b/apps/playground-weapp/src/components/ui/v-switch.vue
@@ -5,11 +5,13 @@ import { varoReactiveRuntime } from '../../lib/varo-primitives'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     disabled?: boolean
     loading?: boolean
     modelValue?: boolean
   }>(),
   {
+    ariaLabel: 'Switch',
     disabled: false,
     loading: false,
     modelValue: false,
@@ -33,6 +35,7 @@ const checked = computed(() => switchRoot.state.checked.value)
 const interactive = computed(() => switchRoot.state.interactive.value)
 const loading = computed(() => switchRoot.state.loading.value)
 const thumbState = computed(() => switchRoot.state.checked.value ? 'checked' : 'unchecked')
+const interactiveAttribute = computed(() => String(interactive.value))
 
 function update(value: boolean) {
   emit('update:modelValue', value)
@@ -47,12 +50,17 @@ function toggle() {
 <template>
   <button
     class="varo-switch"
+    :aria-label="props.ariaLabel"
+    hover-class="varo-switch--pressed"
+    :hover-start-time="20"
+    :hover-stay-time="70"
     type="button"
     role="switch"
     :disabled="!interactive"
     :aria-checked="checked"
     :data-state="thumbState"
     :data-loading="String(loading)"
+    :data-interactive="interactiveAttribute"
     @click="toggle"
   >
     <view class="varo-switch__track">
diff --git a/apps/playground-weapp/src/components/ui/v-toast-region.vue b/apps/playground-weapp/src/components/ui/v-toast-region.vue
new file mode 100644
index 00000000..05c5561f
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/v-toast-region.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed } from 'wevu'
+import { cn } from '../../lib/cn'
+
+type VToastPosition = 'top' | 'middle' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  className?: ClassValue
+  inline?: boolean
+  position?: VToastPosition
+}>(), {
+  className: undefined,
+  inline: false,
+  position: 'top',
+})
+
+const classes = computed(() => cn('varo-toast-region', props.className))
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :data-inline="String(props.inline)"
+    :data-position="props.position"
+  >
+    <slot />
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/components/ui/v-toast.vue b/apps/playground-weapp/src/components/ui/v-toast.vue
index b6a558b2..72d2f74a 100644
--- a/apps/playground-weapp/src/components/ui/v-toast.vue
+++ b/apps/playground-weapp/src/components/ui/v-toast.vue
@@ -10,80 +10,98 @@ type VToastType = 'text' | 'success' | 'warning' | 'danger' | 'loading'
 const props = withDefaults(
   defineProps<{
     className?: ClassValue
+    actionLabel?: string
+    actionText?: string
     closeable?: boolean
     closeLabel?: string
     message?: string
     position?: VToastPosition
     type?: VToastType
+    title?: string
     visible?: boolean
   }>(),
   {
+    actionLabel: undefined,
+    actionText: undefined,
     closeable: false,
     closeLabel: '关闭通知',
     message: '',
     position: 'middle',
     type: 'text',
+    title: undefined,
     visible: false,
   },
 )
 
 const emit = defineEmits<{
+  'action': []
   'close': []
   'update:visible': [visible: boolean]
 }>()
 
 type ToastTransitionPhase = 'idle' | 'enter-from' | 'enter-active' | 'leave-active' | 'leave-to'
-
-const ENTER_DURATION = 220
-const LEAVE_DURATION = 160
 const rendered = shallowRef(props.visible)
 const phase = shallowRef<ToastTransitionPhase>('idle')
-let transitionTimer: ReturnType<typeof setTimeout> | undefined
 let transitionVersion = 0
+const TRANSITION_SAFETY_TIMEOUT = 5000
+let transitionSafetyTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearTransitionSafetyTimer() {
+  if (transitionSafetyTimer === undefined) { return }
+  clearTimeout(transitionSafetyTimer)
+  transitionSafetyTimer = undefined
+}
+
+function finishTransition() {
+  clearTransitionSafetyTimer()
+  if (phase.value === 'enter-active' && props.visible) {
+    phase.value = 'idle'
+    return
+  }
+  if (phase.value === 'leave-to' && !props.visible) {
+    rendered.value = false
+    phase.value = 'idle'
+  }
+}
 
-function clearTransitionTimer() {
-  if (transitionTimer === undefined) { return }
-  clearTimeout(transitionTimer)
-  transitionTimer = undefined
+function scheduleTransitionSafety(version: number) {
+  transitionSafetyTimer = setTimeout(() => {
+    transitionSafetyTimer = undefined
+    if (version === transitionVersion) { finishTransition() }
+  }, TRANSITION_SAFETY_TIMEOUT)
 }
 
 async function enter() {
   transitionVersion += 1
   const version = transitionVersion
-  clearTransitionTimer()
+  clearTransitionSafetyTimer()
   rendered.value = true
   phase.value = 'enter-from'
   await nextTick()
   if (version !== transitionVersion || !props.visible) { return }
-
   phase.value = 'enter-active'
-  transitionTimer = setTimeout(() => {
-    transitionTimer = undefined
-    if (version !== transitionVersion || !props.visible) { return }
-    phase.value = 'idle'
-  }, ENTER_DURATION)
+  scheduleTransitionSafety(version)
 }
 
 async function leave() {
   transitionVersion += 1
   const version = transitionVersion
-  clearTransitionTimer()
+  clearTransitionSafetyTimer()
   if (!rendered.value) {
     phase.value = 'idle'
     return
   }
-
   phase.value = 'leave-active'
   await nextTick()
   if (version !== transitionVersion || props.visible) { return }
-
   phase.value = 'leave-to'
-  transitionTimer = setTimeout(() => {
-    transitionTimer = undefined
-    if (version !== transitionVersion || props.visible) { return }
-    rendered.value = false
-    phase.value = 'idle'
-  }, LEAVE_DURATION)
+  scheduleTransitionSafety(version)
+}
+
+function transitionFinish(event: unknown) {
+  const nativeEvent = event as { currentTarget?: unknown, target?: unknown }
+  if (nativeEvent.currentTarget && nativeEvent.target !== nativeEvent.currentTarget) { return }
+  finishTransition()
 }
 
 watch(
@@ -100,7 +118,7 @@ watch(
 
 onUnmounted(() => {
   transitionVersion += 1
-  clearTransitionTimer()
+  clearTransitionSafetyTimer()
 })
 
 const transitionClasses = computed(() => {
@@ -123,6 +141,7 @@ const classes = computed(() => cn(
 ))
 const role = computed(() => props.type === 'danger' || props.type === 'warning' ? 'alert' : 'status')
 const ariaBusy = computed(() => props.type === 'loading' ? 'true' : undefined)
+const ariaHidden = computed(() => props.visible ? undefined : 'true')
 const ariaLive = computed(() => props.type === 'danger' || props.type === 'warning' ? 'assertive' : 'polite')
 const iconName = computed(() => {
   if (props.type === 'success') { return 'success' }
@@ -132,9 +151,14 @@ const iconName = computed(() => {
 })
 
 function close() {
+  if (!props.visible) { return }
   emit('update:visible', false)
   emit('close')
 }
+
+function action() {
+  if (props.visible) { emit('action') }
+}
 </script>
 
 <template>
@@ -143,24 +167,41 @@ function close() {
     :class="classes"
     :role="role"
     aria-atomic="true"
+    :aria-hidden="ariaHidden"
     :aria-busy="ariaBusy"
     :aria-live="ariaLive"
     :data-type="props.type"
     :data-position="props.position"
+    @transitionend="transitionFinish"
   >
     <view v-if="props.type !== 'text'" class="varo-toast__icon" aria-hidden="true">
       <view v-if="props.type === 'loading'" class="varo-toast__spinner">
         <view class="varo-toast__spinner-track" />
         <view class="varo-toast__spinner-arc" />
       </view>
-      <VIcon v-else :name="iconName" :size="24" />
+      <VIcon v-else :name="iconName" :size="20" />
+    </view>
+    <view class="varo-toast__body">
+      <text v-if="props.title" class="varo-toast__title">
+        {{ props.title }}
+      </text>
+      <text class="varo-toast__message">
+        <slot>{{ props.message }}</slot>
+      </text>
     </view>
-    <text class="varo-toast__message">
-      <slot>{{ props.message }}</slot>
-    </text>
+    <button
+      v-if="props.actionText"
+      :aria-label="props.actionLabel || props.actionText"
+      :disabled="!props.visible"
+      class="varo-toast__action"
+      @click="action"
+    >
+      {{ props.actionText }}
+    </button>
     <button
       v-if="props.closeable"
       :aria-label="props.closeLabel"
+      :disabled="!props.visible"
       class="varo-toast__close"
       @click="close"
     >
@@ -169,28 +210,6 @@ function close() {
   </view>
 </template>
 
-<style>
-.varo-toast__spinner {
-  position: relative;
-  width: 36px;
-  height: 36px;
-}
-
-.varo-toast__spinner-track,
-.varo-toast__spinner-arc {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border: 2px solid currentcolor;
-  border-radius: 50%;
-}
-
-.varo-toast__spinner-arc {
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-}
-</style>
-
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/ui/v-watermark.vue b/apps/playground-weapp/src/components/ui/v-watermark.vue
new file mode 100644
index 00000000..5033a6e0
--- /dev/null
+++ b/apps/playground-weapp/src/components/ui/v-watermark.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ClassValue } from '@weapp-tailwindcss/merge'
+import { computed } from 'wevu'
+import { cn } from '../../lib/cn'
+
+const props = withDefaults(defineProps<{
+  className?: ClassValue
+  color?: string
+  content?: string
+  fontSize?: number
+  fontWeight?: number | string
+  gapX?: number
+  gapY?: number
+  offsetX?: number
+  offsetY?: number
+  opacity?: number
+  rotate?: number
+  zIndex?: number
+}>(), {
+  className: undefined,
+  color: '#172033',
+  content: 'Varo',
+  fontSize: 14,
+  fontWeight: 500,
+  gapX: 160,
+  gapY: 96,
+  offsetX: 0,
+  offsetY: 0,
+  opacity: 0.12,
+  rotate: -22,
+  zIndex: 9,
+})
+
+function normalizeOffset(offset: number, gap: number) {
+  const phase = ((offset % gap) + gap) % gap
+  return phase > gap / 2 ? phase - gap : phase
+}
+
+const watermarkTiles = Array.from({ length: 80 }, (_, index) => index)
+const classes = computed(() => cn('varo-watermark', props.className))
+const rootStyle = computed(() => {
+  const gapX = Math.max(24, props.gapX)
+  const gapY = Math.max(24, props.gapY)
+  return [
+    `--varo-watermark-color: ${props.color}`,
+    `--varo-watermark-font-size: ${Math.max(1, props.fontSize)}px`,
+    `--varo-watermark-font-weight: ${props.fontWeight}`,
+    `--varo-watermark-gap-x: ${gapX}px`,
+    `--varo-watermark-gap-y: ${gapY}px`,
+    `--varo-watermark-offset-x: ${normalizeOffset(props.offsetX, gapX)}px`,
+    `--varo-watermark-offset-y: ${normalizeOffset(props.offsetY, gapY)}px`,
+    `--varo-watermark-opacity: ${Math.min(1, Math.max(0, props.opacity))}`,
+    `--varo-watermark-rotate: ${props.rotate}deg`,
+    `--varo-watermark-z-index: ${props.zIndex}`,
+  ].join('; ')
+})
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :data-watermark="props.content"
+    :style="rootStyle"
+  >
+    <view class="varo-watermark__content">
+      <slot />
+    </view>
+    <view
+      v-if="props.content.length > 0"
+      aria-hidden="true"
+      class="varo-watermark__overlay"
+    >
+      <text
+        v-for="tile in watermarkTiles"
+        :key="tile"
+        class="varo-watermark__item"
+      >
+        {{ props.content }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview/index.vue b/apps/playground-weapp/src/pages/web-preview/index.vue
index 5ad977ca..2adf32f1 100644
--- a/apps/playground-weapp/src/pages/web-preview/index.vue
+++ b/apps/playground-weapp/src/pages/web-preview/index.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
-import { computed, shallowRef } from 'wevu'
+import { computed, onBeforeUnmount, shallowRef } from 'wevu'
+import VInputNumber from '../../components/ui/input-number.vue'
 import VButton from '../../components/ui/v-button.vue'
 import VCard from '../../components/ui/v-card.vue'
+import VDateField from '../../components/ui/v-date-field.vue'
 import VInput from '../../components/ui/v-input.vue'
+import VPullRefresh from '../../components/ui/v-pull-refresh.vue'
+import VRadio from '../../components/ui/v-radio.vue'
+import VSignature from '../../components/ui/v-signature.vue'
+import VSwitch from '../../components/ui/v-switch.vue'
+import VToastRegion from '../../components/ui/v-toast-region.vue'
+import VToast from '../../components/ui/v-toast.vue'
+import VWatermark from '../../components/ui/v-watermark.vue'
 import PreviewContextProvider from './PreviewContextProvider.vue'
 
 const buttonDisabled = shallowRef(false)
@@ -11,6 +20,18 @@ const buttonEventCount = shallowRef(0)
 const disabledButtonEventCount = shallowRef(0)
 const lastButtonEvent = shallowRef('尚未收到 click 事件')
 
+type PreviewToastType = 'loading' | 'success'
+
+const motionSwitchValue = shallowRef(false)
+const motionRadioValue = shallowRef<'message' | 'email' | 'none'>('message')
+const motionQuantity = shallowRef(2)
+const motionToastType = shallowRef<PreviewToastType>('loading')
+const motionToastTitle = shallowRef('正在同步')
+const motionToastMessage = shallowRef('正在同步组件设计。')
+const motionToastActionCount = shallowRef(0)
+const motionWarningVisible = shallowRef(true)
+let motionToastTimer: ReturnType<typeof setTimeout> | undefined
+
 const inputValue = shallowRef('Varo controlled value')
 const inputFocused = shallowRef(false)
 const inputFocusRequested = shallowRef(false)
@@ -20,6 +41,38 @@ const inputFocusEventCount = shallowRef(0)
 const inputBlurEventCount = shallowRef(0)
 const lastInputEvent = shallowRef('等待输入、聚焦或失焦')
 
+const dateValue = shallowRef('2026-01-31')
+const dateVisible = shallowRef(false)
+const dateStatus = shallowRef('等待选择日期')
+
+const pullRefreshLoading = shallowRef(false)
+const pullRefreshCount = shallowRef(0)
+let pullRefreshTimer: ReturnType<typeof setTimeout> | undefined
+
+interface PreviewSignatureStroke {
+  points: Array<{ x: number, y: number }>
+}
+
+const signatureValue = shallowRef<PreviewSignatureStroke[]>([{
+  points: [
+    { x: 0.18, y: 0.65 },
+    { x: 0.31, y: 0.38 },
+    { x: 0.43, y: 0.69 },
+    { x: 0.57, y: 0.31 },
+    { x: 0.72, y: 0.58 },
+    { x: 0.84, y: 0.42 },
+  ],
+}])
+const signatureStatus = shallowRef('已回放 1 笔签名')
+const secondarySignatureValue = shallowRef<PreviewSignatureStroke[]>([{
+  points: [
+    { x: 0.2, y: 0.25 },
+    { x: 0.8, y: 0.75 },
+  ],
+}])
+const secondarySignatureStatus = shallowRef('副签名保持独立')
+const watermarkActionCount = shallowRef(0)
+
 const contextMounted = shallowRef(true)
 const contextRevision = shallowRef(1)
 const contextValue = shallowRef('来自 Provider 的值 #1')
@@ -32,12 +85,27 @@ const buttonStateLabel = computed(() => buttonDisabled.value ? 'disabled' : 'ena
 const trackedButtonLabel = computed(() => `测试按钮：已点击 ${buttonClickCount.value} 次`)
 const toggleButtonLabel = computed(() => buttonDisabled.value ? '启用测试按钮' : '禁用测试按钮')
 const buttonDiagnostic = computed(() => `state=${buttonStateLabel.value};clicks=${buttonClickCount.value};events=${buttonEventCount.value}`)
+const motionDiagnostic = computed(() => `switch=${motionSwitchValue.value};radio=${motionRadioValue.value};toast=${motionToastType.value};warning=${motionWarningVisible.value};actions=${motionToastActionCount.value};quantity=${motionQuantity.value}`)
 const inputFocusState = computed(() => inputFocused.value ? 'focused' : inputFocusRequested.value ? 'requested' : 'blurred')
 const inputDiagnostic = computed(() => `value=${inputValue.value};focus=${inputFocusState.value};updates=${inputUpdateEventCount.value}`)
 const contextTreeState = computed(() => contextMounted.value ? 'mounted' : 'unmounted')
 const contextTreeToggleLabel = computed(() => contextMounted.value ? '卸载 Provider / Consumer' : '重新挂载 Provider / Consumer')
 const contextUpdateDisabled = computed(() => !contextMounted.value)
 const contextLifecycleDiagnostic = computed(() => `tree=${contextTreeState.value};provider=${providerMountedCount.value}/${providerUnmountedCount.value};consumer=${consumerMountedCount.value}/${consumerUnmountedCount.value}`)
+const dateDiagnostic = computed(() => `value=${dateValue.value};visible=${dateVisible.value};status=${dateStatus.value}`)
+const pullRefreshItems = shallowRef(createPullRefreshItems(0))
+const pullRefreshDiagnostic = computed(() => `loading=${pullRefreshLoading.value};count=${pullRefreshCount.value}`)
+const signatureDiagnostic = computed(() => {
+  const points = signatureValue.value.at(-1)?.points ?? []
+  const coordinates = points.map(point => `${point.x.toFixed(4)},${point.y.toFixed(4)}`).join('|')
+  return `strokes=${signatureValue.value.length};status=${signatureStatus.value};points=${coordinates}`
+})
+const secondarySignatureDiagnostic = computed(() => {
+  const points = secondarySignatureValue.value.at(-1)?.points ?? []
+  const coordinates = points.map(point => `${point.x.toFixed(4)},${point.y.toFixed(4)}`).join('|')
+  return `strokes=${secondarySignatureValue.value.length};status=${secondarySignatureStatus.value};points=${coordinates}`
+})
+const watermarkDiagnostic = computed(() => `actions=${watermarkActionCount.value}`)
 
 function recordTrackedButtonClick() {
   buttonClickCount.value += 1
@@ -55,6 +123,34 @@ function recordUnexpectedDisabledClick() {
   lastButtonEvent.value = `错误：禁用按钮发出了 click #${disabledButtonEventCount.value}`
 }
 
+function updateMotionRadio(value: string | number | boolean) {
+  motionRadioValue.value = value as 'message' | 'email' | 'none'
+}
+
+function updateMotionQuantity(value: number) {
+  motionQuantity.value = value
+}
+function morphMotionToast() {
+  clearTimeout(motionToastTimer)
+  motionToastType.value = 'loading'
+  motionToastTitle.value = '正在同步'
+  motionToastMessage.value = '正在同步组件设计。'
+  motionToastTimer = setTimeout(() => {
+    motionToastTimer = undefined
+    motionToastType.value = 'success'
+    motionToastTitle.value = '同步完成'
+    motionToastMessage.value = '按钮、开关与单选样式已更新。'
+  }, 700)
+}
+
+function useMotionToastAction() {
+  motionToastActionCount.value += 1
+}
+
+function updateMotionWarningVisible(visible: boolean) {
+  motionWarningVisible.value = visible
+}
+
 function updateInputValue(value: string) {
   inputValue.value = value
   inputUpdateEventCount.value += 1
@@ -90,6 +186,59 @@ function recordInputBlur() {
   lastInputEvent.value = `收到 blur 事件 #${inputBlurEventCount.value}`
 }
 
+function updateDateValue(value: string) {
+  dateValue.value = value
+  dateStatus.value = `日期列更新为 ${value}`
+}
+
+function updateDateVisible(visible: boolean) {
+  dateVisible.value = visible
+}
+
+function confirmDate(value: string) {
+  dateValue.value = value
+  dateStatus.value = `已确认 ${value}`
+}
+
+function cancelDate() {
+  dateStatus.value = '已取消日期选择'
+}
+
+function createPullRefreshItems(refreshCount: number) {
+  return Array.from({ length: 6 }, (_, index) => `刷新 ${refreshCount + 1}.${index + 1}`)
+}
+
+function refreshFeed() {
+  if (pullRefreshLoading.value) {
+    return
+  }
+  pullRefreshLoading.value = true
+  pullRefreshTimer = setTimeout(() => {
+    pullRefreshCount.value += 1
+    pullRefreshItems.value = createPullRefreshItems(pullRefreshCount.value)
+    pullRefreshLoading.value = false
+    pullRefreshTimer = undefined
+  }, 500)
+}
+
+function updateSignature(value: PreviewSignatureStroke[]) {
+  signatureValue.value = value
+  signatureStatus.value = value.length === 0 ? '签名为空' : `已提交 ${value.length} 笔签名`
+}
+
+function recordSignatureClear() {
+  signatureStatus.value = '已清除签名'
+}
+
+function updateSecondarySignature(value: PreviewSignatureStroke[]) {
+  secondarySignatureValue.value = value
+  secondarySignatureStatus.value = value.length === 0 ? '副签名为空' : `副签名已提交 ${value.length} 笔`
+}
+
+function useWatermarkedDocument() {
+  watermarkActionCount.value += 1
+}
+
 function updateContextValue() {
   contextRevision.value += 1
   contextValue.value = `来自 Provider 的值 #${contextRevision.value}`
@@ -114,6 +263,11 @@ function recordConsumerMounted() {
 function recordConsumerUnmounted() {
   consumerUnmountedCount.value += 1
 }
+
+onBeforeUnmount(() => {
+  clearTimeout(pullRefreshTimer)
+  clearTimeout(motionToastTimer)
+})
 </script>
 
 <template>
@@ -191,6 +345,12 @@ function recordConsumerUnmounted() {
           @focus="recordInputFocus"
           @update:value="updateInputValue"
         />
+        <VInput
+          aria-label="Hidden native input"
+          class-name="hidden"
+          hidden
+          value="hidden"
+        />
         <view
           class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
           data-preview-field="input-state"
@@ -222,6 +382,262 @@ function recordConsumerUnmounted() {
       </view>
     </VCard>
 
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        Varo 状态反馈与微动效
+      </template>
+      <template #description>
+        主题色不变；按钮 press、Switch 拉伸、Radio 内点和 Toast 原位状态变化使用统一 motion token。
+      </template>
+
+      <view class="grid min-w-0 gap-4">
+        <view class="flex items-center justify-between gap-3">
+          <view class="grid gap-1">
+            <text class="text-sm font-bold">
+              消息通知
+            </text>
+            <text class="text-xs text-[var(--varo-ui-text-muted)]">
+              按住开关可观察 thumb 拉伸反馈
+            </text>
+          </view>
+          <VSwitch v-model="motionSwitchValue" aria-label="消息通知" />
+        </view>
+
+        <view class="varo-radio-group" data-direction="horizontal">
+          <VRadio
+            :checked="motionRadioValue === 'message'"
+            label="站内信"
+            value="message"
+            @change="updateMotionRadio"
+          />
+          <VRadio
+            :checked="motionRadioValue === 'email'"
+            label="邮件"
+            value="email"
+            @change="updateMotionRadio"
+          />
+          <VRadio
+            :checked="motionRadioValue === 'none'"
+            label="不通知"
+            value="none"
+            @change="updateMotionRadio"
+          />
+        </view>
+
+        <view class="flex items-center justify-between gap-3 rounded-xl bg-[var(--varo-ui-fill)] p-3">
+          <view class="grid min-w-0 gap-1">
+            <text class="text-sm font-bold">
+              席位数量
+            </text>
+            <text class="text-xs text-[var(--varo-ui-text-muted)]">
+              紧凑步进器不挤压相邻文案
+            </text>
+          </view>
+          <VInputNumber
+            :min="1"
+            :max="5"
+            :value="motionQuantity"
+            @update:value="updateMotionQuantity"
+          />
+        </view>
+
+        <view class="grid grid-cols-2 gap-2">
+          <VButton block @click="morphMotionToast">
+            状态切换
+          </VButton>
+          <VButton block variant="ghost" @click="useMotionToastAction">
+            Ghost 操作 · {{ motionToastActionCount }}
+          </VButton>
+        </view>
+
+        <VToastRegion inline>
+          <VToast
+            :visible="true"
+            :type="motionToastType"
+            :title="motionToastTitle"
+            :message="motionToastMessage"
+            action-text="查看"
+            action-label="查看同步结果"
+            @action="useMotionToastAction"
+          />
+          <VToast
+            :visible="motionWarningVisible"
+            type="warning"
+            title="需要检查"
+            message="有两个字段仍需确认。"
+            closeable
+            @update:visible="updateMotionWarningVisible"
+          />
+        </VToastRegion>
+
+        <view
+          class="break-all rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="motion-state"
+          :data-preview-value="motionDiagnostic"
+        >
+          {{ motionDiagnostic }}
+        </view>
+      </view>
+    </VCard>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        DateField 与 Picker 组合
+      </template>
+      <template #description>
+        DateField 负责日期字段，Picker 负责年、月、日三列；Calendar 保持独立月历。
+      </template>
+
+      <view class="grid gap-3">
+        <VDateField
+          cancel-text="取消"
+          confirm-text="确认"
+          :max-year="2027"
+          :min-year="2025"
+          placeholder="请选择日期"
+          title="开票日期"
+          :value="dateValue"
+          :visible="dateVisible"
+          @cancel="cancelDate"
+          @confirm="confirmDate"
+          @update:value="updateDateValue"
+          @update:visible="updateDateVisible"
+        />
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="date-field-state"
+          :data-preview-value="dateDiagnostic"
+        >
+          <text>当前值：{{ dateValue }}</text>
+          <text>Picker：{{ dateVisible ? 'open' : 'closed' }}</text>
+          <text>{{ dateStatus }}</text>
+        </view>
+      </view>
+    </VCard>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        PullRefresh 原生下拉刷新
+      </template>
+      <template #description>
+        小程序使用 scroll-view refresher；loading 由父级完成后复位。
+      </template>
+
+      <view class="grid gap-3">
+        <VPullRefresh
+          class-name="h-56 overflow-hidden rounded-xl border border-[var(--varo-ui-border)]"
+          :loading="pullRefreshLoading"
+          loading-text="正在刷新"
+          @refresh="refreshFeed"
+        >
+          <view
+            v-for="item in (pullRefreshItems || [])"
+            :key="item"
+            class="border-b border-[var(--varo-ui-border)] px-4 py-3 text-sm"
+          >
+            {{ item }}
+          </view>
+        </VPullRefresh>
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="pull-refresh-state"
+          :data-preview-value="pullRefreshDiagnostic"
+        >
+          <text>刷新次数：{{ pullRefreshCount }}</text>
+          <text>状态：{{ pullRefreshLoading ? 'loading' : 'idle' }}</text>
+        </view>
+      </view>
+    </VCard>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        Signature 原生手写签名
+      </template>
+      <template #description>
+        小程序使用 canvas 与触摸事件；两个实例独立回放、绘制和清除。
+      </template>
+
+      <view class="grid gap-3">
+        <VSignature
+          aria-label="主手写签名板"
+          clear-text="清除主签名"
+          :height="168"
+          :value="signatureValue"
+          @clear="recordSignatureClear"
+          @update:value="updateSignature"
+        />
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="signature-state"
+          :data-preview-value="signatureDiagnostic"
+        >
+          <text>主签名笔画数：{{ signatureValue.length }}</text>
+          <text>{{ signatureStatus }}</text>
+        </view>
+        <VSignature
+          aria-label="副手写签名板"
+          clear-text="清除副签名"
+          :height="120"
+          :value="secondarySignatureValue"
+          @update:value="updateSecondarySignature"
+        />
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="secondary-signature-state"
+          :data-preview-value="secondarySignatureDiagnostic"
+        >
+          <text>副签名笔画数：{{ secondarySignatureValue.length }}</text>
+          <text>{{ secondarySignatureStatus }}</text>
+        </view>
+      </view>
+    </VCard>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        Watermark 原生内容水印
+      </template>
+      <template #description>
+        重复文本覆盖层不截获指针事件，插槽按钮保持可操作。
+      </template>
+
+      <view class="grid gap-3">
+        <VWatermark
+          class-name="rounded-xl border border-[var(--varo-ui-border)]"
+          color="#172033"
+          content="INTERNAL · VARO"
+          :font-size="12"
+          :gap-x="150"
+          :gap-y="76"
+          :opacity="0.14"
+          :rotate="-18"
+        >
+          <view class="grid min-h-44 gap-5 bg-[var(--varo-ui-surface)] p-5">
+            <view class="grid gap-1">
+              <text class="text-xs text-[var(--varo-ui-text-muted)]">
+                受保护文档
+              </text>
+              <text class="text-xl font-black">
+                订单结算报告
+              </text>
+            </view>
+            <text class="text-3xl font-black">
+              ¥ 482,600
+            </text>
+            <VButton @click="useWatermarkedDocument">
+              查看文档 · {{ watermarkActionCount }}
+            </VButton>
+          </view>
+        </VWatermark>
+        <view
+          class="rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="watermark-state"
+          :data-preview-value="watermarkDiagnostic"
+        >
+          插槽操作次数：{{ watermarkActionCount }}
+        </view>
+      </view>
+    </VCard>
+
     <view
       class="mb-3 grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
       data-preview-field="context-lifecycle"
diff --git a/apps/playground-weapp/src/registry-catalog/index/index.vue b/apps/playground-weapp/src/registry-catalog/index/index.vue
index c1a658d2..52daa33e 100644
--- a/apps/playground-weapp/src/registry-catalog/index/index.vue
+++ b/apps/playground-weapp/src/registry-catalog/index/index.vue
@@ -6,6 +6,7 @@ import VCell from '../../components/ui/v-cell.vue'
 import VCol from '../../components/ui/v-col.vue'
 import VCollapseItem from '../../components/ui/v-collapse-item.vue'
 import VCollapse from '../../components/ui/v-collapse.vue'
+import VDateField from '../../components/ui/v-date-field.vue'
 import VDialogClose from '../../components/ui/v-dialog-close.vue'
 import VDialogContent from '../../components/ui/v-dialog-content.vue'
 import VDialogOverlay from '../../components/ui/v-dialog-overlay.vue'
@@ -25,17 +26,20 @@ import VNavbar from '../../components/ui/v-navbar.vue'
 import VNoticeBar from '../../components/ui/v-notice-bar.vue'
 import VOverlay from '../../components/ui/v-overlay.vue'
 import VPagination from '../../components/ui/v-pagination.vue'
+import VPicker from '../../components/ui/v-picker.vue'
 import VPopoverClose from '../../components/ui/v-popover-close.vue'
 import VPopoverContent from '../../components/ui/v-popover-content.vue'
 import VPopoverRoot from '../../components/ui/v-popover-root.vue'
 import VPopoverTrigger from '../../components/ui/v-popover-trigger.vue'
 import VPopup from '../../components/ui/v-popup.vue'
+import VPullRefresh from '../../components/ui/v-pull-refresh.vue'
 import VRadioGroup from '../../components/ui/v-radio-group.vue'
 import VRadio from '../../components/ui/v-radio.vue'
 import VRate from '../../components/ui/v-rate.vue'
 import VRow from '../../components/ui/v-row.vue'
 import VSafeArea from '../../components/ui/v-safe-area.vue'
 import VSearchbar from '../../components/ui/v-searchbar.vue'
+import VSignature from '../../components/ui/v-signature.vue'
 import VSpace from '../../components/ui/v-space.vue'
 import VSteps from '../../components/ui/v-steps.vue'
 import VSticky from '../../components/ui/v-sticky.vue'
@@ -45,7 +49,9 @@ import VTabbarItem from '../../components/ui/v-tabbar-item.vue'
 import VTabbar from '../../components/ui/v-tabbar.vue'
 import VTabs from '../../components/ui/v-tabs.vue'
 import VTextarea from '../../components/ui/v-textarea.vue'
+import VToastRegion from '../../components/ui/v-toast-region.vue'
 import VToast from '../../components/ui/v-toast.vue'
+import VWatermark from '../../components/ui/v-watermark.vue'
 
 const renderCatalog = shallowRef(false)
 const actions = [{ name: 'Inspect', value: 'inspect' }]
@@ -69,6 +75,7 @@ const steps = ['Start', 'Complete']
         <VDialogClose>Close</VDialogClose>
       </VDialogContent>
     </VDialogRoot>
+    <VDateField value="2026-05-18" />
     <VDivider>Divider</VDivider>
     <VGrid>
       <VGridItem>Grid</VGridItem>
@@ -90,17 +97,23 @@ const steps = ['Start', 'Complete']
     <VNoticeBar text="Notice" />
     <VOverlay />
     <VPagination :total="2" />
+    <VPicker />
     <VPopoverRoot>
       <VPopoverTrigger>Open</VPopoverTrigger>
       <VPopoverContent><VPopoverClose>Close</VPopoverClose></VPopoverContent>
     </VPopoverRoot>
     <VPopup />
+    <VPullRefresh />
     <VRadioGroup value="one">
       <VRadio value="one">
         Radio
       </VRadio>
     </VRadioGroup>
     <VRate />
+    <VSignature :show-clear="false" />
+    <VWatermark content="Catalog">
+      <view>Watermark</view>
+    </VWatermark>
     <VSafeArea />
     <VSearchbar />
     <VTabs>
@@ -118,6 +131,6 @@ const steps = ['Start', 'Complete']
       </VTabbarItem>
     </VTabbar>
     <VTextarea />
-    <VToast />
+    <VToastRegion><VToast /></VToastRegion>
   </view>
 </template>
diff --git a/apps/playground-weapp/src/registry-expanded-smoke.ts b/apps/playground-weapp/src/registry-expanded-smoke.ts
index ec2de0e1..bb3e9a86 100644
--- a/apps/playground-weapp/src/registry-expanded-smoke.ts
+++ b/apps/playground-weapp/src/registry-expanded-smoke.ts
@@ -42,6 +42,7 @@ import VCell from './components/ui/v-cell.vue'
 import VCol from './components/ui/v-col.vue'
 import VCollapseItem from './components/ui/v-collapse-item.vue'
 import VCollapse from './components/ui/v-collapse.vue'
+import VDateField from './components/ui/v-date-field.vue'
 import VDialogClose from './components/ui/v-dialog-close.vue'
 import VDialogContent from './components/ui/v-dialog-content.vue'
 import VDialogOverlay from './components/ui/v-dialog-overlay.vue'
@@ -63,12 +64,14 @@ import VPopoverContent from './components/ui/v-popover-content.vue'
 import VPopoverRoot from './components/ui/v-popover-root.vue'
 import VPopoverTrigger from './components/ui/v-popover-trigger.vue'
 import VPopup from './components/ui/v-popup.vue'
+import VPullRefresh from './components/ui/v-pull-refresh.vue'
 import VRadioGroup from './components/ui/v-radio-group.vue'
 import VRadio from './components/ui/v-radio.vue'
 import VRate from './components/ui/v-rate.vue'
 import VRow from './components/ui/v-row.vue'
 import VSafeArea from './components/ui/v-safe-area.vue'
 import VSearchbar from './components/ui/v-searchbar.vue'
+import VSignature from './components/ui/v-signature.vue'
 import VSkeleton from './components/ui/v-skeleton.vue'
 import VSpace from './components/ui/v-space.vue'
 import VSteps from './components/ui/v-steps.vue'
@@ -79,7 +82,9 @@ import VTabbarItem from './components/ui/v-tabbar-item.vue'
 import VTabbar from './components/ui/v-tabbar.vue'
 import VTabs from './components/ui/v-tabs.vue'
 import VTextarea from './components/ui/v-textarea.vue'
+import VToastRegion from './components/ui/v-toast-region.vue'
 import VToast from './components/ui/v-toast.vue'
+import VWatermark from './components/ui/v-watermark.vue'
 
 export const extendedRegistryComponentCount = [
   AgentActivity,
@@ -127,6 +132,7 @@ export const extendedRegistryComponentCount = [
   VDialogContent,
   VDialogOverlay,
   VDialogRoot,
+  VDateField,
   VDialogTrigger,
   VDivider,
   VForm,
@@ -147,10 +153,13 @@ export const extendedRegistryComponentCount = [
   VPopoverRoot,
   VPopoverTrigger,
   VPopup,
+  VPullRefresh,
   VRadio,
   VRadioGroup,
   VRate,
   VSafeArea,
+  VSignature,
+  VWatermark,
   VSearchbar,
   VSkeleton,
   VSpace,
@@ -163,5 +172,6 @@ export const extendedRegistryComponentCount = [
   VTabs,
   VTextarea,
   VToast,
+  VToastRegion,
   AgentChat,
 ].length
diff --git a/apps/playground-weapp/src/registry-expanded.test.ts b/apps/playground-weapp/src/registry-expanded.test.ts
index 985d35de..f6e19850 100644
--- a/apps/playground-weapp/src/registry-expanded.test.ts
+++ b/apps/playground-weapp/src/registry-expanded.test.ts
@@ -12,10 +12,12 @@ import VButton from './components/ui/v-button.vue'
 import VCard from './components/ui/v-card.vue'
 import VCollapseItem from './components/ui/v-collapse-item.vue'
 import VCollapse from './components/ui/v-collapse.vue'
+import VDateField from './components/ui/v-date-field.vue'
 import VIcon from './components/ui/v-icon.vue'
 import VInput from './components/ui/v-input.vue'
 import VList from './components/ui/v-list.vue'
 import VNoticeBar from './components/ui/v-notice-bar.vue'
+import VPullRefresh from './components/ui/v-pull-refresh.vue'
 import VSteps from './components/ui/v-steps.vue'
 import VSwipeCell from './components/ui/v-swipe-cell.vue'
 import VSwitch from './components/ui/v-switch.vue'
@@ -133,7 +135,7 @@ describe('expanded weapp registry components', () => {
     })
     const filterInput = wrapper.get('.varo-select__filter-input')
     expect(filterInput.attributes('value')).toBe('Shanghai')
-    expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(false)
+    expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(true)
 
     await filterInput.trigger('focus')
     expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(true)
@@ -177,7 +179,7 @@ describe('expanded weapp registry components', () => {
     wrapper.unmount()
   })
 
-  it('hides the native Select clear action between interactions', async () => {
+  it('shows the native Select clear action while the field is open', async () => {
     const wrapper = mount(VSelect, {
       props: {
         clearable: true,
@@ -189,12 +191,13 @@ describe('expanded weapp registry components', () => {
       },
     })
 
-    expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(false)
+    expect(wrapper.get('.varo-select').attributes('data-open')).toBe('false')
+    expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(true)
     await wrapper.get('[role="combobox"]').trigger('click')
+    expect(wrapper.get('.varo-select').attributes('data-open')).toBe('true')
     expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(true)
     await wrapper.findAll('[role="option"]')[1].trigger('click')
     expect(wrapper.emitted('update:value')?.at(-1)).toEqual(['hangzhou'])
-    expect(wrapper.find('[aria-label="Clear selection"]').exists()).toBe(false)
 
     await wrapper.setProps({ value: 'hangzhou' })
     await wrapper.get('[role="combobox"]').trigger('click')
@@ -301,6 +304,47 @@ describe('expanded weapp registry components', () => {
     expect(toast.get('.varo-toast__icon .varo-icon').attributes('data-name')).toBe('success')
   })
 
+  it('runs the native DateField as a field plus three-column Picker', async () => {
+    const wrapper = mount(VDateField, {
+      props: {
+        value: '2026-01-31',
+        visible: false,
+        minYear: 2026,
+        maxYear: 2026,
+      },
+    })
+
+    expect(wrapper.get('.varo-date-field__control').text()).toContain('2026-01-31')
+    await wrapper.get('.varo-date-field__control').trigger('click')
+    expect(wrapper.emitted('update:visible')?.at(-1)).toEqual([true])
+
+    await wrapper.setProps({ visible: true })
+    expect(wrapper.findAll('.varo-picker__column')).toHaveLength(3)
+    await wrapper.findAll('.varo-picker__column')[1].findAll('.varo-picker__option')[1].trigger('click')
+    expect(wrapper.emitted('update:value')).toBeUndefined()
+    await wrapper.get('.varo-picker__confirm').trigger('click')
+    expect(wrapper.emitted('update:value')?.at(-1)).toEqual(['2026-02-28'])
+    expect(wrapper.emitted('confirm')?.at(-1)).toEqual(['2026-02-28'])
+    expect(wrapper.emitted('update:visible')?.at(-1)).toEqual([false])
+    wrapper.unmount()
+  })
+
+  it('uses the native mini-program refresher contract', async () => {
+    const wrapper = mount(VPullRefresh, {
+      props: { loading: false },
+      slots: { default: () => h('view', 'Rows') },
+    })
+
+    expect(wrapper.get('scroll-view').attributes('refresher-enabled')).toBe('true')
+    await wrapper.trigger('refresherrefresh')
+    expect(wrapper.emitted('refresh')).toHaveLength(1)
+    await wrapper.setProps({ loading: true })
+    await wrapper.trigger('refresherrefresh')
+    expect(wrapper.emitted('refresh')).toHaveLength(1)
+    expect(wrapper.attributes('data-state')).toBe('loading')
+    wrapper.unmount()
+  })
+
   it('renders the mini-program Agent Chat block and forwards prompts', async () => {
     const wrapper = mount(AgentChat, {
       props: {
diff --git a/apps/playground-weapp/src/signature.test.ts b/apps/playground-weapp/src/signature.test.ts
new file mode 100644
index 00000000..5a87bb5e
--- /dev/null
+++ b/apps/playground-weapp/src/signature.test.ts
@@ -0,0 +1,177 @@
+// @vitest-environment jsdom
+
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import VSignature from './components/ui/v-signature.vue'
+
+const context = {
+  arc: vi.fn(),
+  beginPath: vi.fn(),
+  clearRect: vi.fn(),
+  draw: vi.fn(),
+  fill: vi.fn(),
+  fillRect: vi.fn(),
+  lineTo: vi.fn(),
+  moveTo: vi.fn(),
+  setFillStyle: vi.fn(),
+  setLineCap: vi.fn(),
+  setLineJoin: vi.fn(),
+  setLineWidth: vi.fn(),
+  setStrokeStyle: vi.fn(),
+  stroke: vi.fn(),
+}
+
+let queryRect = { height: 168, width: 331 }
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  queryRect = { height: 168, width: 331 }
+  const query = {
+    in: vi.fn(() => query),
+    select: vi.fn(() => query),
+    boundingClientRect: vi.fn((callback: (rect: { height: number, width: number }) => void) => {
+      callback(queryRect)
+      return query
+    }),
+    exec: vi.fn(),
+  }
+  vi.stubGlobal('wx', {
+    createCanvasContext: vi.fn(() => context),
+    createSelectorQuery: vi.fn(() => query),
+  })
+})
+
+interface SignatureStroke {
+  points: Array<{ x: number, y: number }>
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+  Object.values(context).forEach(value => value.mockClear())
+})
+
+describe('native weapp signature', () => {
+  it('draws normalized touch strokes and clears them', async () => {
+    const events: string[] = []
+    const wrapper = mount(VSignature, {
+      props: {
+        'height': 168,
+        'onUpdate:value': (value: SignatureStroke[]) => events.push(`update:${value.length}`),
+        'onChange': (value: SignatureStroke[]) => events.push(`change:${value.length}`),
+        'onClear': () => events.push('clear'),
+        'onEnd': () => events.push('end'),
+      },
+    })
+    await vi.runAllTimersAsync()
+    const canvas = wrapper.get('canvas')
+
+    await canvas.trigger('touchstart', { touches: [{ x: 82.75, y: 42 }] })
+    await canvas.trigger('touchmove', { touches: [{ x: 165.5, y: 84 }] })
+    await canvas.trigger('touchend', { changedTouches: [{ x: 248.25, y: 126 }] })
+
+    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([[{
+      points: [
+        { x: 0.25, y: 0.25 },
+        { x: 0.5, y: 0.5 },
+        { x: 0.75, y: 0.75 },
+      ],
+    }]])
+    expect(wrapper.attributes('data-empty')).toBe('true')
+    expect(wrapper.get('.varo-signature__clear').attributes('disabled')).toBeDefined()
+
+    const accepted = wrapper.emitted('update:value')?.at(-1)?.[0] as SignatureStroke[]
+    await wrapper.setProps({ value: accepted })
+    expect(wrapper.attributes('data-empty')).toBe('false')
+    events.length = 0
+    await wrapper.get('.varo-signature__clear').trigger('click')
+    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([[]])
+    expect(events).toEqual(['update:0', 'change:0', 'clear'])
+    expect(wrapper.attributes('data-empty')).toBe('false')
+    await wrapper.setProps({ value: [] })
+    expect(wrapper.attributes('data-empty')).toBe('true')
+    wrapper.unmount()
+  })
+
+  it('remeasures the normalized coordinate space after height changes', async () => {
+    const wrapper = mount(VSignature, { props: { height: 168 } })
+    await vi.runAllTimersAsync()
+    queryRect = { height: 240, width: 430 }
+
+    await wrapper.setProps({ height: 240 })
+    await vi.runAllTimersAsync()
+    const canvas = wrapper.get('canvas')
+    await canvas.trigger('touchstart', { touches: [{ x: 107.5, y: 60 }] })
+    await canvas.trigger('touchmove', { touches: [{ x: 215, y: 120 }] })
+    await canvas.trigger('touchend', { changedTouches: [{ x: 322.5, y: 180 }] })
+
+    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([[{
+      points: [
+        { x: 0.25, y: 0.25 },
+        { x: 0.5, y: 0.5 },
+        { x: 0.75, y: 0.75 },
+      ],
+    }]])
+    wrapper.unmount()
+  })
+
+  it('discards touch cancellation without committing', async () => {
+    const wrapper = mount(VSignature)
+    await vi.runAllTimersAsync()
+    const canvas = wrapper.get('canvas')
+
+    await canvas.trigger('touchstart', { touches: [{ x: 32, y: 20 }] })
+    await canvas.trigger('touchmove', { touches: [{ x: 160, y: 100 }] })
+    await canvas.trigger('touchcancel')
+
+    expect(wrapper.emitted('update:value')).toBeUndefined()
+
+    await canvas.trigger('touchstart', { touches: [{ x: 32, y: 20 }] })
+    await canvas.trigger('touchmove', { touches: [{ x: 160, y: 100 }] })
+    await wrapper.setProps({ disabled: true })
+    await canvas.trigger('touchend', { changedTouches: [{ x: 288, y: 180 }] })
+    expect(wrapper.emitted('update:value')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('ignores terminal events from non-active touches', async () => {
+    const wrapper = mount(VSignature, { props: { height: 168 } })
+    await vi.runAllTimersAsync()
+    const canvas = wrapper.get('canvas')
+
+    await canvas.trigger('touchstart', { touches: [{ identifier: 11, x: 82.75, y: 42 }] })
+    await canvas.trigger('touchmove', {
+      touches: [
+        { identifier: 11, x: 165.5, y: 84 },
+        { identifier: 22, x: 250, y: 30 },
+      ],
+    })
+    await canvas.trigger('touchend', { changedTouches: [{ identifier: 22, x: 250, y: 30 }] })
+    await canvas.trigger('touchcancel', { changedTouches: [{ identifier: 22, x: 250, y: 30 }] })
+    expect(wrapper.emitted('update:value')).toBeUndefined()
+
+    await canvas.trigger('touchend', { changedTouches: [{ identifier: 11, x: 248.25, y: 126 }] })
+    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([[{
+      points: [
+        { x: 0.25, y: 0.25 },
+        { x: 0.5, y: 0.5 },
+        { x: 0.75, y: 0.75 },
+      ],
+    }]])
+    wrapper.unmount()
+  })
+
+  it('renders a visible dot for a one-point controlled stroke', async () => {
+    const wrapper = mount(VSignature, {
+      props: {
+        height: 168,
+        value: [{ points: [{ x: 0.5, y: 0.5 }] }],
+      },
+    })
+    await vi.runAllTimersAsync()
+
+    expect(context.arc).toHaveBeenCalledWith(165.5, 84, 1, 0, Math.PI * 2)
+    expect(context.fill).toHaveBeenCalled()
+    wrapper.unmount()
+  })
+})
diff --git a/apps/playground-weapp/src/styles/varo.css b/apps/playground-weapp/src/styles/varo.css
index d689284a..105ffb4a 100644
--- a/apps/playground-weapp/src/styles/varo.css
+++ b/apps/playground-weapp/src/styles/varo.css
@@ -69,6 +69,11 @@ page {
   --varo-ui-radius-sm: var(--varo-ui-input-radius);
   --varo-ui-shadow-sm: 0 1px 2px rgb(48 49 51 / 6%);
   --varo-ui-shadow-md: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
+  --varo-ui-motion-feedback: 140ms;
+  --varo-ui-motion-state: 180ms;
+  --varo-ui-motion-enter: 220ms;
+  --varo-ui-motion-exit: 160ms;
+  --varo-ui-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
   --varo-ui-ring: rgb(7 193 96 / 16%);
   --varo-ui-focus: #000;
   --varo-agent-surface: var(--varo-ui-surface);
@@ -105,8 +110,10 @@ page {
 .varo-button,
 .varo-checkbox,
 .varo-radio,
+.varo-date-field button,
 .varo-input-number button,
 .varo-select button,
+.varo-signature button,
 .varo-switch,
 .varo-toast__close,
 .varo-rate__item,
@@ -218,29 +225,33 @@ page {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  gap: 6px;
   align-items: center;
   justify-content: center;
   min-height: var(--varo-ui-button-height-md);
   padding: 0 16px;
   margin: 0;
   overflow: hidden;
-  font-weight: 650;
+  font-weight: 600;
   line-height: 1;
   vertical-align: middle;
   color: var(--varo-button-foreground);
   text-align: center;
+  touch-action: manipulation;
   cursor: pointer;
+  user-select: none;
   background: var(--varo-button-fill);
   border: 1px solid transparent;
   border-radius: var(--varo-ui-button-radius);
   box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: center;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    opacity 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    opacity var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
 .varo-button::after {
@@ -286,7 +297,8 @@ page {
 
 .varo-button[data-pressed='true'],
 .varo-button--pressed {
-  transform: translateY(1px);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  transform: scale(0.98);
 }
 
 .varo-button[data-variant='solid'][data-pressed='true'],
@@ -317,10 +329,17 @@ page {
 
 .varo-button[data-variant='ghost'] {
   color: var(--varo-ui-text);
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   box-shadow: none;
 }
 
+.varo-button[data-variant='outline'][data-pressed='true'],
+.varo-button[data-variant='outline'].varo-button--pressed,
+.varo-button[data-variant='ghost'][data-pressed='true'],
+.varo-button[data-variant='ghost'].varo-button--pressed {
+  background: var(--varo-ui-fill-light);
+}
+
 .varo-button[data-variant='text'] {
   --varo-button-text-fill: var(--varo-ui-primary-soft);
 
@@ -441,6 +460,17 @@ page {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-button {
+    transition-duration: 1ms;
+  }
+
+  .varo-button[data-pressed='true'],
+  .varo-button--pressed {
+    transform: none;
+  }
+}
+
 .varo-input {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -472,6 +502,12 @@ page {
     box-shadow 0.18s ease;
 }
 
+.varo-input[data-type='textarea'] .varo-input__body {
+  position: relative;
+  align-items: flex-start;
+  padding: 10px 12px 28px;
+}
+
 .varo-input[data-size='sm'] .varo-input__body {
   min-height: var(--varo-ui-input-height-sm);
 }
@@ -501,7 +537,7 @@ page {
 
 textarea.varo-input__control {
   min-height: 72px;
-  padding: 10px 0;
+  padding: 0;
   resize: none;
 }
 
@@ -517,18 +553,35 @@ textarea.varo-input__control {
 .varo-input__clear.varo-input__clear {
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   padding: 0;
   margin: 0;
+  overflow: visible;
+  color: var(--varo-ui-text-placeholder);
   cursor: pointer;
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   border: 0;
   border-radius: 999px;
 }
 
+.varo-input__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.varo-input[data-type='textarea'] .varo-input__word-limit {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  line-height: 1;
+}
+
 .varo-input__error {
   font-size: 12px;
   color: var(--varo-ui-danger);
@@ -567,6 +620,13 @@ textarea.varo-input__control {
   margin: 0;
 }
 
+.varo-radio {
+  min-height: 44px;
+  padding: 0 2px;
+  touch-action: manipulation;
+  user-select: none;
+}
+
 .varo-checkbox__icon,
 .varo-radio__icon {
   position: relative;
@@ -608,17 +668,46 @@ textarea.varo-input__control {
 
 .varo-radio__icon {
   font-size: 10px;
+  background: var(--varo-ui-surface);
   border-radius: 999px;
+  transform-origin: center;
+}
+
+.varo-radio__dot {
+  width: 10px;
+  height: 10px;
+  background: var(--varo-ui-primary);
+  border-radius: 999px;
+  opacity: 0;
+  transform: scale(0.45);
+  transform-origin: center;
+  transition:
+    opacity var(--varo-ui-motion-feedback) linear,
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon,
-.varo-checkbox[data-state='checked'] .varo-checkbox__icon,
-.varo-radio[data-checked='true'] .varo-radio__icon {
+.varo-checkbox[data-state='checked'] .varo-checkbox__icon {
   color: var(--varo-ui-primary-foreground);
   background: var(--varo-ui-primary);
   border-color: var(--varo-ui-primary);
 }
 
+.varo-radio[data-checked='true'] .varo-radio__icon {
+  background: var(--varo-ui-surface);
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-primary-soft);
+}
+
+.varo-radio[data-checked='true'] .varo-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.varo-radio.varo-radio--pressed:not([data-disabled='true']) .varo-radio__icon {
+  transform: scale(0.9);
+}
+
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon::before,
 .varo-checkbox[data-state='checked'] .varo-checkbox__icon::before {
   opacity: 1;
@@ -631,6 +720,17 @@ textarea.varo-input__control {
   z-index: 1;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-radio__icon,
+  .varo-radio__dot {
+    transition-duration: 1ms;
+  }
+
+  .varo-radio.varo-radio--pressed:not([data-disabled='true']) .varo-radio__icon {
+    transform: none;
+  }
+}
+
 .varo-checkbox[data-disabled='true'],
 .varo-radio[data-disabled='true'] {
   cursor: not-allowed;
@@ -640,9 +740,10 @@ textarea.varo-input__control {
 .varo-input-number {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  width: 100%;
-  min-width: min(128px, 100%);
+  width: 130px;
+  min-width: 128px;
   max-width: 100%;
   overflow: hidden;
   background: var(--varo-ui-surface);
@@ -701,10 +802,17 @@ textarea.varo-input__control {
 
 .varo-input-number__input::-webkit-inner-spin-button,
 .varo-input-number__input::-webkit-outer-spin-button {
+  display: none;
   margin: 0;
   appearance: none;
 }
 
+.varo-input-number__minus .varo-icon,
+.varo-input-number__plus .varo-icon {
+  display: block;
+  pointer-events: none;
+}
+
 .varo-select {
   position: relative;
   display: grid;
@@ -720,8 +828,10 @@ textarea.varo-input__control {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 42px;
   min-height: 42px;
   padding: 0 12px;
+  overflow: hidden;
   color: inherit;
   cursor: pointer;
   background: var(--varo-ui-surface, #fff);
@@ -739,10 +849,13 @@ textarea.varo-input__control {
   align-items: center;
   width: auto;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
   margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -771,18 +884,39 @@ textarea.varo-input__control {
 
 .varo-select__clear.varo-select__clear {
   box-sizing: border-box;
-  display: grid;
+  display: inline-flex;
   flex: none;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  max-width: 16px;
+  height: 16px;
+  min-height: 16px;
+  max-height: 16px;
   padding: 0;
   margin: 0;
-  color: var(--varo-ui-text-muted, #64748b);
+  line-height: 1;
+  color: var(--varo-ui-text-placeholder);
+  pointer-events: none;
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 999px;
+  opacity: 0;
+}
+
+.varo-select[data-open='true'] .varo-select__clear,
+.varo-select[data-clear-active='true'] .varo-select__clear {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.varo-select__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .varo-select__control.varo-select__control::after,
@@ -855,9 +989,13 @@ textarea.varo-input__control {
 .varo-select__filter-input {
   flex: 1;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   cursor: text;
   outline: 0;
@@ -962,8 +1100,8 @@ textarea.varo-input__control {
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--varo-ui-border);
   transition:
-    background 0.14s ease,
-    box-shadow 0.14s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] {
@@ -977,30 +1115,51 @@ textarea.varo-input__control {
 }
 
 .varo-switch__track {
-  display: flex;
-  align-items: center;
+  position: relative;
+  display: block;
   width: 100%;
   height: 20px;
 }
 
 .varo-switch__thumb {
-  flex: none;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 20px;
   height: 20px;
   background: var(--varo-ui-white);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(48 49 51 / 18%);
-  transition: transform 0.14s ease;
+  box-shadow: 0 1px 3px rgb(48 49 51 / 22%);
+  transform: translateX(0);
+  transform-origin: left center;
+  transition: transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] .varo-switch__thumb {
   transform: translateX(20px);
 }
 
+.varo-switch[data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+  transform: translateX(0) scaleX(1.16);
+}
+
+.varo-switch[data-state='checked'][data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+  transform: translateX(20px) scaleX(1.16);
+  transform-origin: right center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .varo-switch,
   .varo-switch__thumb {
-    transition: none;
+    transition-duration: 1ms;
+  }
+
+  .varo-switch[data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .varo-switch[data-state='checked'][data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+    transform: translateX(20px);
   }
 }
 
@@ -1038,39 +1197,35 @@ textarea.varo-input__control {
   z-index: 1000;
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: max-content;
-  min-width: 96px;
-  max-width: min(70vw, 240px);
-  padding: 8px 16px;
-  color: var(--varo-ui-white);
-  text-align: center;
+  min-width: 220px;
+  max-width: min(calc(100vw - 32px), 360px);
+  min-height: 52px;
+  padding: 10px 12px;
+  color: var(--varo-ui-text);
+  text-align: left;
   pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border: 0;
-  border-radius: 12px;
+  background: var(--varo-ui-surface-overlay);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: 16px;
+  box-shadow: var(--varo-ui-shadow-md);
   transform: translateX(-50%);
-}
-
-.varo-toast--success,
-.varo-toast--warning,
-.varo-toast--danger,
-.varo-toast--loading {
-  min-width: 88px;
-  min-height: 88px;
-  padding: 16px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-toast--text {
-  min-height: 0;
-  padding: 8px 16px;
+  min-width: 0;
 }
 
 .varo-toast--top {
-  top: 20%;
+  top: max(16px, env(safe-area-inset-top));
 }
 
 .varo-toast--middle {
@@ -1080,64 +1235,108 @@ textarea.varo-input__control {
 
 .varo-toast--bottom {
   top: auto;
-  bottom: 20%;
+  bottom: max(16px, env(safe-area-inset-bottom));
 }
 
 .varo-toast__icon {
   display: inline-grid;
+  flex: none;
   place-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--varo-ui-white);
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
+}
+
+.varo-toast--success .varo-toast__icon {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.varo-toast--warning .varo-toast__icon {
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+}
+
+.varo-toast--danger .varo-toast__icon {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
 }
 
 .varo-toast__icon .varo-icon {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
+}
+
+.varo-toast__body {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.varo-toast__title {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
 }
 
 .varo-toast__message {
   min-width: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--varo-ui-white);
+  color: var(--varo-ui-text-regular);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-.varo-toast--success .varo-toast__message,
-.varo-toast--warning .varo-toast__message,
-.varo-toast--danger .varo-toast__message,
-.varo-toast--loading .varo-toast__message {
-  margin-top: 2px;
-}
-
+.varo-toast__action.varo-toast__action,
 .varo-toast__close.varo-toast__close {
   box-sizing: border-box;
-  display: inline-grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
+  flex: none;
   padding: 0;
   margin: 0;
-  color: rgb(255 255 255 / 72%);
   pointer-events: auto;
   cursor: pointer;
-  background: transparent;
   border: 0;
+}
+
+.varo-toast__action.varo-toast__action {
+  width: auto;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
   border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
-.varo-toast__close:hover {
-  color: var(--varo-ui-white);
-  background: rgb(255 255 255 / 12%);
+.varo-toast__action.varo-toast__action:active {
+  transform: scale(0.96);
 }
 
-.varo-toast__close:focus-visible {
-  outline: 2px solid var(--varo-ui-white);
-  outline-offset: 1px;
+.varo-toast__close.varo-toast__close {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  color: var(--varo-ui-text-muted);
+  background: transparent;
+  border-radius: 999px;
 }
 
 .varo-toast__close .varo-icon {
@@ -1146,25 +1345,76 @@ textarea.varo-input__control {
 }
 
 .varo-toast__spinner {
-  width: 36px;
-  height: 36px;
+  position: relative;
+  width: 20px;
+  height: 20px;
   animation: varo-toast-spin 0.9s linear infinite;
 }
 
+.varo-toast__spinner-track,
+.varo-toast__spinner-arc {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+}
+
 .varo-toast__spinner-track {
   opacity: 0.24;
 }
 
 .varo-toast__spinner-arc {
-  stroke-width: 2.2;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.varo-toast-region {
+  position: fixed;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(calc(100vw - 32px), 360px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.varo-toast-region[data-position='top'] {
+  top: max(16px, env(safe-area-inset-top));
+}
+
+.varo-toast-region[data-position='middle'] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.varo-toast-region[data-position='bottom'] {
+  bottom: max(16px, env(safe-area-inset-bottom));
+}
+
+.varo-toast-region[data-inline='true'] {
+  position: relative;
+  inset: auto;
+  width: min(100%, 360px);
+  transform: none;
+}
+
+.varo-toast-region .varo-toast {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-width: none;
+  transform: none;
 }
 
 .varo-toast-enter-active {
-  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: opacity var(--varo-ui-motion-enter) ease, transform var(--varo-ui-motion-enter) var(--varo-ui-motion-ease);
 }
 
 .varo-toast-leave-active {
-  transition: opacity 0.16s ease, transform 0.16s ease-in;
+  transition: opacity var(--varo-ui-motion-exit) ease, transform var(--varo-ui-motion-exit) ease-in;
 }
 
 .varo-toast-enter-from,
@@ -1187,6 +1437,16 @@ textarea.varo-input__control {
   transform: translate(-50%, 10px) scale(0.98);
 }
 
+.varo-toast-region .varo-toast.varo-toast-enter-from,
+.varo-toast-region .varo-toast.varo-toast-leave-to {
+  transform: translateY(-8px) scale(0.98);
+}
+
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-enter-from,
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-leave-to {
+  transform: translateY(8px) scale(0.98);
+}
+
 @keyframes varo-toast-spin {
   to {
     transform: rotate(360deg);
@@ -1209,6 +1469,11 @@ textarea.varo-input__control {
     transform: translate(-50%, -50%);
   }
 
+  .varo-toast-region .varo-toast.varo-toast-enter-from,
+  .varo-toast-region .varo-toast.varo-toast-leave-to {
+    transform: none;
+  }
+
   .varo-toast__spinner {
     animation-duration: 1.8s;
   }
@@ -1335,6 +1600,79 @@ textarea.varo-input__control {
   }
 }
 
+.varo-date-field {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+  color: var(--varo-ui-text);
+}
+
+.varo-date-field__control.varo-date-field__control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
+  padding: 0 12px;
+  margin: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-input-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__control {
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+.varo-date-field[data-disabled='true'] .varo-date-field__control {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.varo-date-field[data-readonly='true'] .varo-date-field__control {
+  cursor: default;
+}
+
+.varo-date-field__value,
+.varo-date-field__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.varo-date-field__placeholder {
+  color: var(--varo-ui-text-placeholder);
+}
+
+.varo-date-field__arrow {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  color: var(--varo-ui-text-muted);
+  border-right: 1.6px solid currentcolor;
+  border-bottom: 1.6px solid currentcolor;
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__arrow {
+  color: var(--varo-ui-primary);
+  transform: translateY(2px) rotate(225deg);
+}
+
+.varo-date-field__picker {
+  width: 100%;
+}
+
 .varo-calendar,
 .varo-date-picker,
 .varo-picker,
@@ -1482,12 +1820,25 @@ textarea.varo-input__control {
   color: var(--varo-ui-primary);
 }
 
-.varo-picker__columns,
+.varo-picker__columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  padding: 8px;
+}
+
 .varo-cascader__options {
   display: grid;
   padding: 8px;
 }
 
+.varo-picker__column {
+  display: grid;
+  align-content: start;
+  max-height: 240px;
+  overflow: auto;
+}
+
 .varo-picker__option,
 .varo-cascader__option {
   position: relative;
@@ -3217,6 +3568,103 @@ textarea.varo-input__control {
   transition: none;
 }
 
+.varo-signature {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.varo-signature__canvas {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  touch-action: none;
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-signature[data-disabled='true'] {
+  opacity: 0.58;
+}
+
+.varo-signature__clear.varo-signature__clear {
+  box-sizing: border-box;
+  justify-self: end;
+  width: auto;
+  min-height: 36px;
+  padding: 0 12px;
+  margin: 0;
+  font-weight: 700;
+  color: var(--varo-ui-danger);
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.varo-signature__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.varo-watermark {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.varo-watermark__content {
+  position: relative;
+  z-index: 0;
+}
+
+.varo-watermark__overlay {
+  position: absolute;
+  inset: calc(0px - var(--varo-watermark-gap-y)) calc(0px - var(--varo-watermark-gap-x));
+  z-index: var(--varo-watermark-z-index);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(var(--varo-watermark-offset-x), var(--varo-watermark-offset-y));
+}
+
+.varo-watermark__item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--varo-watermark-gap-x);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--varo-watermark-gap-y);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--varo-watermark-font-size);
+  font-weight: var(--varo-watermark-font-weight);
+  line-height: 1;
+  color: var(--varo-watermark-color);
+  white-space: nowrap;
+  opacity: var(--varo-watermark-opacity);
+  transform: rotate(var(--varo-watermark-rotate));
+}
+
+.varo-pull-refresh {
+  display: block;
+  width: 100%;
+}
+
+.varo-pull-refresh__native-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
 .varo-list {
   display: block;
   width: 100%;
diff --git a/apps/playground-weapp/src/toast-motion.test.ts b/apps/playground-weapp/src/toast-motion.test.ts
new file mode 100644
index 00000000..356180e4
--- /dev/null
+++ b/apps/playground-weapp/src/toast-motion.test.ts
@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import VToastRegion from './components/ui/v-toast-region.vue'
+import VToast from './components/ui/v-toast.vue'
+
+afterEach(() => vi.useRealTimers())
+
+describe('native weapp toast motion', () => {
+  it('morphs status in place and exposes its optional action', async () => {
+    const wrapper = mount(VToast, {
+      props: {
+        actionLabel: '查看同步结果',
+        actionText: '查看',
+        message: '正在同步组件设计。',
+        title: '正在同步',
+        type: 'loading',
+        visible: true,
+      },
+    })
+    await wrapper.get('.varo-toast').trigger('transitionend')
+    const initial = wrapper.get('.varo-toast').element
+
+    await wrapper.setProps({
+      message: '按钮、开关与单选样式已更新。',
+      title: '同步完成',
+      type: 'success',
+    })
+
+    expect(wrapper.get('.varo-toast').element).toBe(initial)
+    expect(wrapper.get('.varo-toast').classes()).toContain('varo-toast--success')
+    expect(wrapper.get('.varo-toast__title').text()).toBe('同步完成')
+    expect(wrapper.get('.varo-toast__message').text()).toContain('样式已更新')
+    await wrapper.get('.varo-toast__action').trigger('click')
+    expect(wrapper.emitted('action')).toHaveLength(1)
+    wrapper.unmount()
+  })
+
+  it('lays multiple controlled toasts out in one inline region', async () => {
+    const wrapper = mount(VToastRegion, {
+      props: { inline: true },
+      slots: {
+        default: () => [
+          h(VToast, { message: '第一条', type: 'success', visible: true }),
+          h(VToast, { message: '第二条', type: 'warning', visible: true }),
+        ],
+      },
+    })
+
+    expect(wrapper.attributes('data-inline')).toBe('true')
+    expect(wrapper.findAll('.varo-toast')).toHaveLength(2)
+    expect(wrapper.text()).toContain('第一条')
+    expect(wrapper.text()).toContain('第二条')
+    wrapper.unmount()
+  })
+
+  it('unmounts a hidden toast when its CSS transition ends', async () => {
+    const wrapper = mount(VToast, {
+      props: {
+        message: '将要关闭',
+        visible: true,
+      },
+    })
+    await wrapper.get('.varo-toast').trigger('transitionend')
+
+    await wrapper.setProps({ visible: false })
+    await flushPromises()
+    expect(wrapper.get('.varo-toast').classes()).toContain('varo-toast-leave-to')
+
+    await wrapper.get('.varo-toast').trigger('transitionend')
+    expect(wrapper.find('.varo-toast').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('retargets rapid visibility reversals without stale cancel events', async () => {
+    const wrapper = mount(VToast, {
+      props: {
+        message: '快速切换',
+        visible: true,
+      },
+    })
+    await flushPromises()
+
+    await wrapper.setProps({ visible: false })
+    await flushPromises()
+    await wrapper.get('.varo-toast').trigger('transitioncancel')
+    expect(wrapper.get('.varo-toast').classes()).toContain('varo-toast-leave-to')
+
+    await wrapper.setProps({ visible: true })
+    await flushPromises()
+    await wrapper.get('.varo-toast').trigger('transitioncancel')
+    expect(wrapper.get('.varo-toast').classes()).toContain('varo-toast-enter-active')
+
+    await wrapper.get('.varo-toast').trigger('transitionend')
+    expect(wrapper.find('.varo-toast').exists()).toBe(true)
+    expect(wrapper.get('.varo-toast').classes()).not.toContain('varo-toast-enter-active')
+    wrapper.unmount()
+  })
+
+  it('uses a bounded fallback when no transition event fires', async () => {
+    vi.useFakeTimers()
+    const wrapper = mount(VToast, {
+      props: {
+        actionText: '查看',
+        closeable: true,
+        message: '无 CSS 过渡',
+        visible: true,
+      },
+    })
+    await wrapper.get('.varo-toast').trigger('transitionend')
+
+    await wrapper.setProps({ visible: false })
+    await flushPromises()
+    expect(wrapper.get('.varo-toast').attributes('aria-hidden')).toBe('true')
+    expect(wrapper.get('.varo-toast__action').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('.varo-toast__close').attributes('disabled')).toBeDefined()
+
+    await vi.advanceTimersByTimeAsync(5000)
+    expect(wrapper.find('.varo-toast').exists()).toBe(false)
+    wrapper.unmount()
+  })
+})
diff --git a/apps/playground-weapp/src/watermark.test.ts b/apps/playground-weapp/src/watermark.test.ts
new file mode 100644
index 00000000..b405191b
--- /dev/null
+++ b/apps/playground-weapp/src/watermark.test.ts
@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import VWatermark from './components/ui/v-watermark.vue'
+
+describe('native weapp watermark', () => {
+  it('renders a decorative repeated layer without replacing slot content', () => {
+    const wrapper = mount(VWatermark, {
+      props: {
+        content: 'INTERNAL',
+        gapX: 120,
+        gapY: 72,
+        offsetX: 500,
+        offsetY: -500,
+        opacity: 0.18,
+      },
+      slots: {
+        default: '<button type="button">Approve</button>',
+      },
+    })
+
+    expect(wrapper.get('button').text()).toBe('Approve')
+    expect(wrapper.get('.varo-watermark__overlay').attributes('aria-hidden')).toBe('true')
+    expect(wrapper.get('.varo-watermark__item').text()).toBe('INTERNAL')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-opacity: 0.18')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-offset-x: 20px')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-offset-y: 4px')
+  })
+
+  it('omits the repeated layer for empty content', () => {
+    const wrapper = mount(VWatermark, {
+      props: { content: '' },
+      slots: { default: 'Visible content' },
+    })
+
+    expect(wrapper.text()).toBe('Visible content')
+    expect(wrapper.find('.varo-watermark__overlay').exists()).toBe(false)
+  })
+})
diff --git a/apps/playground-weapp/test/wevu.ts b/apps/playground-weapp/test/wevu.ts
index 57ac00bb..23d83079 100644
--- a/apps/playground-weapp/test/wevu.ts
+++ b/apps/playground-weapp/test/wevu.ts
@@ -11,9 +11,9 @@ interface ElementIntersectionObserverOptions<T> {
 }
 
 function resolveBoolean(value: MaybeReactiveBoolean | undefined): boolean {
-  if (value === undefined) return true
-  if (typeof value === 'function') return value()
-  if (typeof value === 'object') return value.value
+  if (value === undefined) { return true }
+  if (typeof value === 'function') { return value() }
+  if (typeof value === 'object') { return value.value }
   return value
 }
 
@@ -31,7 +31,7 @@ export function useElementIntersectionObserver<T = { intersectionRatio: number }
   options: ElementIntersectionObserverOptions<T>,
 ) {
   onMounted(() => {
-    if (!resolveBoolean(options.enabled)) return
+    if (!resolveBoolean(options.enabled)) { return }
     options.onObserve?.({ intersectionRatio: 1 } as T)
   })
 
@@ -41,3 +41,9 @@ export function useElementIntersectionObserver<T = { intersectionRatio: number }
     observer: null,
   }
 }
+
+export function useNativeInstance() {
+  return {
+    createSelectorQuery: () => undefined,
+  }
+}
diff --git a/package.json b/package.json
index ebda2e4d..fb763996 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "build": "turbo run build",
     "clean": "turbo run clean",
     "dev": "turbo run dev --parallel",
+    "docs:dev": "pnpm --dir apps/docs dev",
     "dev:playground-h5": "pnpm --filter @varo/playground-h5 dev",
     "dev:playground-weapp": "pnpm --filter @varo/playground-weapp dev",
     "lint": "turbo run lint",
diff --git a/packages/primitives-h5/src/number-field/index.ts b/packages/primitives-h5/src/number-field/index.ts
index 3a560c13..8df6e5ea 100644
--- a/packages/primitives-h5/src/number-field/index.ts
+++ b/packages/primitives-h5/src/number-field/index.ts
@@ -87,8 +87,9 @@ export const NumberFieldInput = defineComponent({
         ...restAttrs,
         ...numberField.attrs.input,
         disabled: numberField.state.disabled.value || undefined,
+        inputmode: 'decimal',
         readonly: numberField.state.readonly.value || undefined,
-        type: 'number',
+        type: 'text',
         value: String(numberField.state.value.value),
         onBlur: (event: FocusEvent) => {
           numberField.events.input(eventValue(event))
diff --git a/packages/registry/src/index.ts b/packages/registry/src/index.ts
index 89dc690d..bd0a8e19 100644
--- a/packages/registry/src/index.ts
+++ b/packages/registry/src/index.ts
@@ -54,6 +54,7 @@ export const componentCatalogV01 = [
   'cell',
   'checkbox',
   'collapse',
+  'date-field',
   'date-picker',
   'dialog',
   'divider',
@@ -80,6 +81,7 @@ export const componentCatalogV01 = [
   'popover',
   'popup',
   'progress',
+  'pull-refresh',
   'radio',
   'range',
   'rate',
@@ -88,6 +90,7 @@ export const componentCatalogV01 = [
   'select',
   'short-password',
   'side-navbar',
+  'signature',
   'skeleton',
   'space',
   'steps',
@@ -100,6 +103,7 @@ export const componentCatalogV01 = [
   'textarea',
   'toast',
   'uploader',
+  'watermark',
 ] as const
 
 export const weappComponentCatalogV01 = [
@@ -112,6 +116,7 @@ export const weappComponentCatalogV01 = [
   'cell',
   'checkbox',
   'collapse',
+  'date-field',
   'dialog',
   'divider',
   'empty',
@@ -130,14 +135,17 @@ export const weappComponentCatalogV01 = [
   'notice-bar',
   'overlay',
   'pagination',
+  'picker',
   'popover',
   'popup',
   'progress',
+  'pull-refresh',
   'radio',
   'rate',
   'safe-area',
   'searchbar',
   'select',
+  'signature',
   'skeleton',
   'space',
   'steps',
@@ -149,6 +157,7 @@ export const weappComponentCatalogV01 = [
   'tag',
   'textarea',
   'toast',
+  'watermark',
 ] as const
 
 const allowedTargets: readonly RegistryTarget[] = ['h5', 'weapp']
diff --git a/packages/registry/tests/registry.test.ts b/packages/registry/tests/registry.test.ts
index 94c2f9a4..7657ed2a 100644
--- a/packages/registry/tests/registry.test.ts
+++ b/packages/registry/tests/registry.test.ts
@@ -92,7 +92,7 @@ describe('registry catalog', () => {
 
   it('publishes every maintained runtime component through the v0.1 registry catalog', () => {
     expect([...componentCatalogV01].sort()).toEqual(runtimeComponentNames())
-    expect(componentCatalogV01).toHaveLength(57)
+    expect(componentCatalogV01).toHaveLength(61)
   })
 
   it('partitions the mini-program registry into high-consensus and specialized tiers', () => {
@@ -105,8 +105,8 @@ describe('registry catalog', () => {
       weappSpecializedPendingRegistry: string[]
     }>('registry/component-tiers.v0.1.json')
 
-    expect(tiers.runtimeCatalog).toEqual({ h5: 57, weappVite: 57 })
-    expect(tiers.registryCatalog).toEqual({ h5: 58, weappSfc: 47, weappSfcBaseKit: 15, weappVite: 48 })
+    expect(tiers.runtimeCatalog).toEqual({ h5: 61, weappVite: 60 })
+    expect(tiers.registryCatalog).toEqual({ h5: 62, weappSfc: 52, weappSfcBaseKit: 15, weappVite: 53 })
     expect(tiers.registryExtensions).toEqual(['map', 'region-picker'])
     expect(tiers.weappHighConsensus).toEqual(weappComponentCatalogV01)
     expect(
@@ -354,7 +354,7 @@ describe('registry catalog', () => {
   })
 
   it('keeps the full H5 catalog, high-consensus weapp catalog, and executable SFC Base Kit aligned', () => {
-    expect(weappComponentCatalogV01).toHaveLength(46)
+    expect(weappComponentCatalogV01).toHaveLength(51)
     const baseKitNames = new Set<string>(baseKitPhase1)
     const weappComponentNames = new Set<string>(weappComponentCatalogV01)
 
@@ -499,6 +499,26 @@ describe('registry catalog', () => {
     })
     expect(readText('registry/utils/cn/weapp-vite.ts')).toContain('from \'@weapp-tailwindcss/merge\'')
   })
+
+  it('publishes a native weapp picker SFC with confirm, cancel, and disabled option gates', () => {
+    const manifest = readJson<RegistryItem>('registry/components/picker/registry.json')
+    const weappFile = manifest.files.find(file => file.target === 'weapp')
+    const source = readText(weappFile!.from)
+
+    expect(manifest.targets).toEqual(['h5', 'weapp'])
+    expect(weappFile).toEqual({
+      target: 'weapp',
+      from: 'registry/components/picker/v-picker.vue',
+      to: 'src/components/ui/v-picker.vue',
+    })
+    expect(source).toContain('from \'wevu\'')
+    expect(source).toContain('value: { type: null }')
+    expect(source).toContain('if (option.disabled)')
+    expect(source).toContain('emit(\'confirm\'')
+    expect(source).toContain('emit(\'cancel\')')
+    expect(source).toContain('emit(\'update:visible\', false)')
+    expect(source).toContain('"styleIsolation": "apply-shared"')
+  })
 })
 
 describe('registry validation', () => {
diff --git a/packages/theme/src/css.ts b/packages/theme/src/css.ts
index 4754e373..a74aeaee 100644
--- a/packages/theme/src/css.ts
+++ b/packages/theme/src/css.ts
@@ -71,6 +71,11 @@ export interface ThemeCssVariables {
   '--varo-ui-input-height-lg': string
   '--varo-ui-shadow-sm': string
   '--varo-ui-shadow-md': string
+  '--varo-ui-motion-feedback': string
+  '--varo-ui-motion-state': string
+  '--varo-ui-motion-enter': string
+  '--varo-ui-motion-exit': string
+  '--varo-ui-motion-ease': string
   '--varo-ui-ring': string
   '--varo-ui-focus': string
   [name: `--${string}`]: string
@@ -246,6 +251,11 @@ export function createThemeCssVariables(
     '--varo-ui-shadow-md': theme.seed.mode === 'dark'
       ? '0 12px 32px 4px rgb(0 0 0 / 36%), 0 8px 20px rgb(0 0 0 / 72%)'
       : '0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%)',
+    '--varo-ui-motion-feedback': '140ms',
+    '--varo-ui-motion-state': '180ms',
+    '--varo-ui-motion-enter': '220ms',
+    '--varo-ui-motion-exit': '160ms',
+    '--varo-ui-motion-ease': 'cubic-bezier(0.2, 0.8, 0.2, 1)',
     '--varo-ui-ring': colorWithAlpha(theme.semantic.primaryBase, 16),
     '--varo-ui-focus': contrastSafeForeground(theme.semantic.surfaceBase),
     ...overrides,
diff --git a/packages/theme/tests/theme.test.ts b/packages/theme/tests/theme.test.ts
index 1f842fe9..fbdf5200 100644
--- a/packages/theme/tests/theme.test.ts
+++ b/packages/theme/tests/theme.test.ts
@@ -290,6 +290,11 @@ describe('theme', () => {
       '--varo-ui-ring': 'rgb(37 99 235 / 16%)',
       '--varo-ui-focus': '#000000',
       '--varo-ui-shadow-sm': '0 1px 2px rgb(48 49 51 / 6%)',
+      '--varo-ui-motion-feedback': '140ms',
+      '--varo-ui-motion-state': '180ms',
+      '--varo-ui-motion-enter': '220ms',
+      '--varo-ui-motion-exit': '160ms',
+      '--varo-ui-motion-ease': 'cubic-bezier(0.2, 0.8, 0.2, 1)',
     })
   })
 
diff --git a/packages/ui-h5/src/date-field.ts b/packages/ui-h5/src/date-field.ts
new file mode 100644
index 00000000..b1142a41
--- /dev/null
+++ b/packages/ui-h5/src/date-field.ts
@@ -0,0 +1,133 @@
+import type { PropType } from 'vue'
+import type { PickerOption } from './picker'
+import { computed, defineComponent, h, shallowRef, watch } from 'vue'
+import { buildDateFieldColumns, dateFieldValue, parseDateFieldValue } from './date-utils'
+import { VPicker } from './picker'
+
+export const VDateField = defineComponent({
+  name: 'VDateField',
+  props: {
+    cancelText: {
+      type: String,
+      default: 'Cancel',
+    },
+    confirmText: {
+      type: String,
+      default: 'Confirm',
+    },
+    disabled: Boolean,
+    maxYear: {
+      type: Number,
+      default: 2100,
+    },
+    minYear: {
+      type: Number,
+      default: 1970,
+    },
+    placeholder: {
+      type: String,
+      default: 'Select date',
+    },
+    readonly: Boolean,
+    title: {
+      type: String,
+      default: undefined,
+    },
+    value: {
+      type: String as PropType<string | undefined>,
+      default: undefined,
+    },
+    visible: Boolean,
+  },
+  emits: ['update:value', 'update:visible', 'confirm', 'cancel', 'change'],
+  setup(props, { attrs, emit }) {
+    const draftValue = shallowRef(props.value)
+    const columns = computed(() => buildDateFieldColumns(draftValue.value, props.minYear, props.maxYear))
+    const pickerValue = computed(() => parseDateFieldValue(draftValue.value))
+
+    watch(() => props.value, (value) => {
+      draftValue.value = value
+    })
+    watch(() => props.visible, (visible) => {
+      if (visible) {
+        draftValue.value = props.value
+      }
+    })
+
+    function toDate(values: Array<string | number | undefined>): string {
+      const [year, month, day] = parseDateFieldValue(draftValue.value)
+      return dateFieldValue(Number(values[0] ?? year), Number(values[1] ?? month), Number(values[2] ?? day))
+    }
+
+    function open() {
+      if (props.disabled || props.readonly) {
+        return
+      }
+      draftValue.value = props.value
+      emit('update:visible', true)
+    }
+
+    function onChange(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+      const values = Array.isArray(payload.value) ? payload.value : [payload.value]
+      const next = toDate(values)
+      draftValue.value = next
+      emit('change', next)
+    }
+
+    function onConfirm(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+      const values = Array.isArray(payload.value) ? payload.value : [payload.value]
+      const next = toDate(values)
+      draftValue.value = next
+      emit('update:value', next)
+      emit('confirm', next)
+    }
+
+    function onCancel() {
+      draftValue.value = props.value
+      emit('cancel')
+    }
+
+    function onUpdateVisible(visible: boolean) {
+      if (!visible) {
+        draftValue.value = props.value
+      }
+      emit('update:visible', visible)
+    }
+
+    return () =>
+      h('div', {
+        ...attrs,
+        'class': ['varo-date-field', attrs.class],
+        'data-disabled': String(props.disabled),
+        'data-open': String(props.visible),
+        'data-readonly': String(props.readonly),
+      }, [
+        h('button', {
+          'aria-expanded': String(props.visible),
+          'aria-readonly': props.readonly || undefined,
+          'class': 'varo-date-field__control',
+          'disabled': props.disabled,
+          'type': 'button',
+          'onClick': open,
+        }, [
+          h('span', {
+            class: props.value ? 'varo-date-field__value' : 'varo-date-field__placeholder',
+          }, props.value ?? props.placeholder),
+          h('span', { 'aria-hidden': 'true', 'class': 'varo-date-field__arrow' }),
+        ]),
+        h(VPicker, {
+          'cancelText': props.cancelText,
+          'class': 'varo-date-field__picker',
+          'columns': columns.value as PickerOption[][],
+          'confirmText': props.confirmText,
+          'title': props.title,
+          'value': pickerValue.value,
+          'visible': props.visible,
+          'onCancel': onCancel,
+          'onChange': onChange,
+          'onConfirm': onConfirm,
+          'onUpdate:visible': onUpdateVisible,
+        }),
+      ])
+  },
+})
diff --git a/packages/ui-h5/src/date-utils.ts b/packages/ui-h5/src/date-utils.ts
index 67baf70a..48808348 100644
--- a/packages/ui-h5/src/date-utils.ts
+++ b/packages/ui-h5/src/date-utils.ts
@@ -13,7 +13,7 @@ export function toDateString(date: Date): string {
 }
 
 export function parseDate(value: string | undefined, fallback = new Date()): Date {
-  if (!value) return new Date(fallback)
+  if (!value) { return new Date(fallback) }
   const [year, month = '1', day = '1'] = value.split('-')
   return new Date(Number(year), Number(month) - 1, Number(day))
 }
@@ -48,9 +48,55 @@ export function buildMonthDays(month?: string): CalendarDay[] {
     days.push({
       date: toDateString(date),
       day,
-      inMonth: true
+      inMonth: true,
     })
   }
 
   return days
 }
+
+export interface DateFieldOption {
+  label: string
+  value: number
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+export function clampDateParts(year: number, month: number, day: number): [number, number, number] {
+  const nextMonth = Math.min(12, Math.max(1, month))
+  const nextDay = Math.min(daysInMonth(year, nextMonth), Math.max(1, day))
+  return [year, nextMonth, nextDay]
+}
+
+export function dateFieldValue(year: number, month: number, day: number): string {
+  const [nextYear, nextMonth, nextDay] = clampDateParts(year, month, day)
+  return `${nextYear}-${pad(nextMonth)}-${pad(nextDay)}`
+}
+
+export function parseDateFieldValue(value: string | undefined, fallback = new Date()): [number, number, number] {
+  const date = parseDate(value, fallback)
+  return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
+}
+
+export function buildDateFieldColumns(
+  value: string | undefined,
+  minYear = 1970,
+  maxYear = 2100,
+): DateFieldOption[][] {
+  const [year, month] = parseDateFieldValue(value)
+  const years: DateFieldOption[] = []
+  for (let next = minYear; next <= maxYear; next += 1) {
+    years.push({ label: String(next), value: next })
+  }
+  const months: DateFieldOption[] = Array.from({ length: 12 }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  const days: DateFieldOption[] = Array.from({ length: daysInMonth(year, month) }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  return [years, months, days]
+}
diff --git a/packages/ui-h5/src/index.ts b/packages/ui-h5/src/index.ts
index bf5f51f1..32fc57a0 100644
--- a/packages/ui-h5/src/index.ts
+++ b/packages/ui-h5/src/index.ts
@@ -9,6 +9,7 @@ export * from './cascader'
 export * from './cell'
 export * from './checkbox'
 export * from './collapse'
+export * from './date-field'
 export * from './date-picker'
 export * from './dialog'
 export * from './divider'
@@ -35,6 +36,7 @@ export * from './picker'
 export * from './popover'
 export * from './popup'
 export * from './progress'
+export * from './pull-refresh'
 export * from './radio'
 export * from './range'
 export * from './rate'
@@ -43,6 +45,7 @@ export * from './searchbar'
 export * from './select'
 export * from './short-password'
 export * from './side-navbar'
+export * from './signature'
 export * from './skeleton'
 export * from './space'
 export * from './steps'
@@ -55,3 +58,4 @@ export * from './tag'
 export * from './textarea'
 export * from './toast'
 export * from './uploader'
+export * from './watermark'
diff --git a/packages/ui-h5/src/input-number.ts b/packages/ui-h5/src/input-number.ts
index 8ed70f6c..41a39535 100644
--- a/packages/ui-h5/src/input-number.ts
+++ b/packages/ui-h5/src/input-number.ts
@@ -8,11 +8,15 @@ import {
 } from '@varo/primitives-h5'
 import { createVariantClass } from '@varo/shared'
 import { computed, defineComponent, h } from 'vue'
+import { VIcon } from './icon'
 
 export const VInputNumber = defineComponent({
   name: 'VInputNumber',
   props: {
+    decreaseAriaLabel: { type: String, default: 'Decrease value' },
     disabled: Boolean,
+    increaseAriaLabel: { type: String, default: 'Increase value' },
+    inputAriaLabel: { type: String, default: 'Numeric value' },
     max: { type: Number, default: Number.POSITIVE_INFINITY },
     min: { type: Number, default: Number.NEGATIVE_INFINITY },
     precision: { type: Number as PropType<number | undefined>, default: undefined },
@@ -44,13 +48,14 @@ export const VInputNumber = defineComponent({
         },
         {
           default: () => [
-            h(NumberFieldDecrement, { class: 'varo-input-number__minus' }, () => '-'),
+            h(NumberFieldDecrement, { 'aria-label': props.decreaseAriaLabel, 'class': 'varo-input-number__minus' }, () => h(VIcon, { name: 'minus', size: 14 })),
             h(NumberFieldInput, {
-              class: 'varo-input-number__input',
-              onBlur: (event: FocusEvent) => emit('blur', event),
-              onFocus: (event: FocusEvent) => emit('focus', event),
+              'class': 'varo-input-number__input',
+              'aria-label': props.inputAriaLabel,
+              'onBlur': (event: FocusEvent) => emit('blur', event),
+              'onFocus': (event: FocusEvent) => emit('focus', event),
             }),
-            h(NumberFieldIncrement, { class: 'varo-input-number__plus' }, () => '+'),
+            h(NumberFieldIncrement, { 'aria-label': props.increaseAriaLabel, 'class': 'varo-input-number__plus' }, () => h(VIcon, { name: 'plus', size: 14 })),
           ],
         },
       )
diff --git a/packages/ui-h5/src/input.ts b/packages/ui-h5/src/input.ts
index 1eeae9f5..cf9159e2 100644
--- a/packages/ui-h5/src/input.ts
+++ b/packages/ui-h5/src/input.ts
@@ -252,6 +252,7 @@ export const VInput = defineComponent({
           'data-invalid': String(effectiveInvalid.value),
           'data-readonly': String(props.readonly),
           'data-size': props.size,
+          'data-type': props.type,
         },
         [
           labelVisible.value
@@ -308,7 +309,7 @@ export const VInput = defineComponent({
                     'onClick': clear,
                     'onMousedown': (event: MouseEvent) => event.preventDefault(),
                   },
-                  h(VIcon, { name: 'close', size: 14 }),
+                  h(VIcon, { name: 'danger', size: 16 }),
                 )
               : null,
             props.showWordLimit ? h('span', { class: 'varo-input__word-limit' }, wordLimit.value) : null,
diff --git a/packages/ui-h5/src/picker.ts b/packages/ui-h5/src/picker.ts
index e8c86dc3..6ce331cd 100644
--- a/packages/ui-h5/src/picker.ts
+++ b/packages/ui-h5/src/picker.ts
@@ -1,4 +1,5 @@
-import { computed, defineComponent, h, shallowRef, watch, type PropType } from 'vue'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted, shallowRef, watch } from 'vue'
 
 export interface PickerOption {
   disabled?: boolean
@@ -6,84 +7,170 @@ export interface PickerOption {
   value: string | number
 }
 
+export type PickerColumn = PickerOption[]
+export type PickerValue = string | number | Array<string | number> | undefined
+
+function isOptionList(value: unknown): value is PickerOption[] {
+  return Array.isArray(value) && (value.length === 0 || (typeof value[0] === 'object' && value[0] !== null && 'label' in value[0]))
+}
+
+export function normalizePickerColumns(columns: PickerColumn | PickerColumn[]): PickerColumn[] {
+  if (columns.length === 0) {
+    return [[]]
+  }
+  return isOptionList(columns) ? [columns] : columns
+}
+
+function firstEnabledValue(column: PickerColumn): string | number | undefined {
+  return column.find(option => !option.disabled)?.value ?? column[0]?.value
+}
+
+export function normalizePickerValue(
+  value: PickerValue,
+  columns: PickerColumn[],
+): Array<string | number | undefined> {
+  const values = Array.isArray(value) ? value : [value]
+  return columns.map((column, index) => {
+    const next = values[index]
+    if (next !== undefined && column.some(option => option.value === next && !option.disabled)) {
+      return next
+    }
+    return firstEnabledValue(column)
+  })
+}
+
 export const VPicker = defineComponent({
   name: 'VPicker',
   props: {
     cancelText: {
       type: String,
-      default: 'Cancel'
+      default: 'Cancel',
     },
     columns: {
-      type: Array as PropType<PickerOption[]>,
-      default: () => []
+      type: Array as PropType<PickerColumn | PickerColumn[]>,
+      default: () => [],
     },
     confirmText: {
       type: String,
-      default: 'Confirm'
+      default: 'Confirm',
     },
     title: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     value: {
-      type: [String, Number] as PropType<string | number | undefined>,
-      default: undefined
+      type: [String, Number, Array] as PropType<PickerValue>,
+      default: undefined,
     },
-    visible: Boolean
+    visible: Boolean,
   },
   emits: ['update:value', 'update:visible', 'confirm', 'cancel', 'change'],
   setup(props, { emit }) {
-    const selectedValue = shallowRef<string | number | undefined>(props.value ?? props.columns[0]?.value)
-    const selectedOption = computed(() => props.columns.find((item) => item.value === selectedValue.value))
+    const resolvedColumns = computed(() => normalizePickerColumns(props.columns))
+    const selectedValues = shallowRef(normalizePickerValue(props.value, resolvedColumns.value))
+    const rootElement = shallowRef<HTMLElement | null>(null)
 
     watch(
-      () => props.value,
-      (value) => {
-        selectedValue.value = value ?? props.columns[0]?.value
-      }
+      [() => props.value, resolvedColumns],
+      () => {
+        selectedValues.value = normalizePickerValue(props.value, resolvedColumns.value)
+      },
     )
 
-    function select(option: PickerOption) {
-      if (option.disabled) return
-      selectedValue.value = option.value
-      emit('change', { option, value: option.value })
-      emit('update:value', option.value)
+    const selectedOptions = computed(() =>
+      resolvedColumns.value.map((column, index) =>
+        column.find(option => option.value === selectedValues.value[index]),
+      ),
+    )
+
+    function syncColumnScroll() {
+      if (!props.visible) {
+        return
+      }
+      void nextTick(() => {
+        rootElement.value?.querySelectorAll<HTMLElement>('.varo-picker__column').forEach((column) => {
+          const selected = column.querySelector<HTMLElement>('.varo-picker__option[data-active="true"]')
+          if (!selected) {
+            return
+          }
+          column.scrollTop = Math.max(0, selected.offsetTop - (column.clientHeight - selected.offsetHeight) / 2)
+        })
+      })
+    }
+
+    watch([selectedValues, () => props.visible], syncColumnScroll, { flush: 'post' })
+    onMounted(syncColumnScroll)
+
+    function emitChange(values: Array<string | number | undefined>, option?: PickerOption, columnIndex?: number) {
+      const singleColumn = resolvedColumns.value.length === 1
+      const next = singleColumn ? values[0] : values
+      if (option !== undefined && columnIndex !== undefined) {
+        emit('change', singleColumn ? { option, value: next } : { columnIndex, option, value: next })
+      }
+    }
+
+    function select(columnIndex: number, option: PickerOption) {
+      if (option.disabled) {
+        return
+      }
+      const next = selectedValues.value.slice()
+      next[columnIndex] = option.value
+      selectedValues.value = next
+      emitChange(next, option, columnIndex)
     }
 
     function confirm() {
-      emit('confirm', {
-        option: selectedOption.value,
-        value: selectedValue.value
-      })
+      const option = resolvedColumns.value.length === 1 ? selectedOptions.value[0] : selectedOptions.value
+      const value = resolvedColumns.value.length === 1 ? selectedValues.value[0] : selectedValues.value
+      emit('update:value', value)
+      emit('confirm', { option, value })
+      emit('update:visible', false)
+    }
+
+    function cancel() {
+      selectedValues.value = normalizePickerValue(props.value, resolvedColumns.value)
+      emit('cancel')
       emit('update:visible', false)
     }
 
     return () =>
       props.visible
-        ? h('div', { class: 'varo-picker' }, [
+        ? h('div', {
+            'class': 'varo-picker',
+            'data-columns': String(resolvedColumns.value.length),
+            'ref': (element: unknown) => {
+              rootElement.value = element instanceof HTMLElement ? element : null
+            },
+          }, [
             h('div', { class: 'varo-picker__toolbar' }, [
-              h('button', { class: 'varo-picker__cancel', type: 'button', onClick: () => emit('cancel') }, props.cancelText),
+              h('button', { class: 'varo-picker__cancel', type: 'button', onClick: cancel }, props.cancelText),
               props.title ? h('strong', { class: 'varo-picker__title' }, props.title) : null,
-              h('button', { class: 'varo-picker__confirm', type: 'button', onClick: confirm }, props.confirmText)
+              h('button', { class: 'varo-picker__confirm', type: 'button', onClick: confirm }, props.confirmText),
             ]),
             h(
               'div',
               { class: 'varo-picker__columns' },
-              props.columns.map((option) =>
+              resolvedColumns.value.map((column, columnIndex) =>
                 h(
-                  'button',
-                  {
-                    class: 'varo-picker__option',
-                    type: 'button',
-                    disabled: option.disabled,
-                    'data-active': String(option.value === selectedValue.value),
-                    onClick: () => select(option)
-                  },
-                  option.label
-                )
-              )
-            )
+                  'div',
+                  { class: 'varo-picker__column', key: columnIndex },
+                  column.map(option =>
+                    h(
+                      'button',
+                      {
+                        'class': 'varo-picker__option',
+                        'type': 'button',
+                        'disabled': option.disabled,
+                        'data-active': String(option.value === selectedValues.value[columnIndex]),
+                        'onClick': () => select(columnIndex, option),
+                      },
+                      option.label,
+                    ),
+                  ),
+                ),
+              ),
+            ),
           ])
         : null
-  }
+  },
 })
diff --git a/packages/ui-h5/src/pull-refresh.ts b/packages/ui-h5/src/pull-refresh.ts
new file mode 100644
index 00000000..361fbaa2
--- /dev/null
+++ b/packages/ui-h5/src/pull-refresh.ts
@@ -0,0 +1,226 @@
+import { computed, defineComponent, h, nextTick, shallowRef, watch } from 'vue'
+
+type PullRefreshState = 'idle' | 'loading' | 'pulling' | 'ready'
+
+export const VPullRefresh = defineComponent({
+  name: 'VPullRefresh',
+  props: {
+    disabled: Boolean,
+    headHeight: {
+      type: Number,
+      default: 48,
+    },
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '加载中',
+    },
+    pullText: {
+      type: String,
+      default: '下拉刷新',
+    },
+    releaseText: {
+      type: String,
+      default: '释放刷新',
+    },
+    threshold: {
+      type: Number,
+      default: 64,
+    },
+  },
+  emits: ['refresh'],
+  setup(props, { attrs, emit, slots }) {
+    const rootElement = shallowRef<HTMLElement | null>(null)
+    const distance = shallowRef(props.loading ? props.headHeight : 0)
+    const dragging = shallowRef(false)
+    let startY: number | undefined
+    let pointerId: number | undefined
+
+    const state = computed<PullRefreshState>(() => {
+      if (props.loading) {
+        return 'loading'
+      }
+      if (distance.value >= props.threshold) {
+        return 'ready'
+      }
+      return distance.value > 0 ? 'pulling' : 'idle'
+    })
+    const indicatorText = computed(() => {
+      if (state.value === 'loading') {
+        return props.loadingText
+      }
+      if (state.value === 'ready') {
+        return props.releaseText
+      }
+      return props.pullText
+    })
+    const trackStyle = computed(() => ({
+      transform: `translate3d(0, ${distance.value}px, 0)`,
+      transition: dragging.value ? 'none' : 'transform 180ms ease',
+    }))
+    const indicatorStyle = computed(() => ({
+      height: `${props.headHeight}px`,
+      marginTop: `${-props.headHeight}px`,
+    }))
+
+    function releaseCapturedPointer(activePointerId: number | undefined) {
+      if (activePointerId === undefined) {
+        return
+      }
+      try {
+        rootElement.value?.releasePointerCapture?.(activePointerId)
+      }
+      catch {
+        // Synthetic events and interrupted pointers may not own capture.
+      }
+    }
+
+    function resetGesture() {
+      const activePointerId = pointerId
+      startY = undefined
+      pointerId = undefined
+      dragging.value = false
+      distance.value = 0
+      releaseCapturedPointer(activePointerId)
+    }
+
+    watch(() => props.loading, (loading) => {
+      resetGesture()
+      distance.value = loading ? props.headHeight : 0
+    })
+
+    function begin(clientY: number): boolean {
+      if (
+        startY !== undefined
+        || props.disabled
+        || props.loading
+        || (rootElement.value?.scrollTop ?? 0) > 0
+      ) {
+        return false
+      }
+      distance.value = 0
+      startY = clientY
+      dragging.value = false
+      return true
+    }
+
+    function move(clientY: number, event: Event) {
+      if (startY === undefined || props.disabled || props.loading) {
+        return
+      }
+      if ((rootElement.value?.scrollTop ?? 0) > 0) {
+        resetGesture()
+        return
+      }
+      const delta = clientY - startY
+      if (delta <= 0) {
+        distance.value = 0
+        return
+      }
+      event.preventDefault()
+      dragging.value = true
+      distance.value = Math.min(delta * 0.5, props.threshold * 1.5)
+    }
+
+    function finish(allowRefresh: boolean, endingPointerId?: number) {
+      if (startY === undefined) {
+        return
+      }
+      if (endingPointerId !== undefined && pointerId !== endingPointerId) {
+        return
+      }
+      const shouldRefresh = allowRefresh
+        && distance.value >= props.threshold
+        && !props.disabled
+        && !props.loading
+        && (rootElement.value?.scrollTop ?? 0) <= 0
+      const activePointerId = pointerId
+      startY = undefined
+      pointerId = undefined
+      dragging.value = false
+      releaseCapturedPointer(activePointerId)
+      if (!shouldRefresh) {
+        distance.value = 0
+        return
+      }
+      emit('refresh')
+      void nextTick(() => {
+        distance.value = props.loading ? props.headHeight : 0
+      })
+    }
+
+    function touchStart(event: TouchEvent) {
+      const touch = event.touches[0]
+      if (touch) {
+        begin(touch.clientY)
+      }
+    }
+
+    function touchMove(event: TouchEvent) {
+      const touch = event.touches[0]
+      if (touch) {
+        move(touch.clientY, event)
+      }
+    }
+
+    function pointerDown(event: PointerEvent) {
+      if (event.pointerType === 'touch' || !begin(event.clientY)) {
+        return
+      }
+      pointerId = event.pointerId
+      try {
+        rootElement.value?.setPointerCapture?.(event.pointerId)
+      }
+      catch {
+        // Synthetic events do not own an active browser pointer.
+      }
+    }
+
+    function pointerMove(event: PointerEvent) {
+      if (pointerId === event.pointerId) {
+        move(event.clientY, event)
+      }
+    }
+
+    function pointerUp(event: PointerEvent) {
+      if (event.pointerType !== 'touch') {
+        finish(true, event.pointerId)
+      }
+    }
+
+    function pointerCancel(event: PointerEvent) {
+      if (event.pointerType !== 'touch') {
+        finish(false, event.pointerId)
+      }
+    }
+
+    return () => h('div', {
+      ...attrs,
+      'aria-busy': String(props.loading),
+      'class': ['varo-pull-refresh', attrs.class],
+      'data-disabled': String(props.disabled),
+      'data-state': state.value,
+      'onPointercancel': pointerCancel,
+      'onPointerdown': pointerDown,
+      'onPointermove': pointerMove,
+      'onPointerup': pointerUp,
+      'onTouchcancel': () => finish(false),
+      'onTouchend': () => finish(true),
+      'onTouchmove': touchMove,
+      'onTouchstart': touchStart,
+      'ref': (element: unknown) => {
+        rootElement.value = element instanceof HTMLElement ? element : null
+      },
+    }, [
+      h('div', { class: 'varo-pull-refresh__track', style: trackStyle.value }, [
+        h('div', {
+          'aria-live': 'polite',
+          'class': 'varo-pull-refresh__indicator',
+          'role': 'status',
+          'style': indicatorStyle.value,
+        }, slots.indicator?.({ distance: distance.value, state: state.value }) ?? indicatorText.value),
+        h('div', { class: 'varo-pull-refresh__content' }, slots.default?.()),
+      ]),
+    ])
+  },
+})
diff --git a/packages/ui-h5/src/select.ts b/packages/ui-h5/src/select.ts
index cbe87e71..d82fc2ba 100644
--- a/packages/ui-h5/src/select.ts
+++ b/packages/ui-h5/src/select.ts
@@ -364,7 +364,7 @@ export const VSelect = defineComponent({
                   'onClick': clear,
                   'onMousedown': (event: MouseEvent) => event.preventDefault(),
                 },
-                h(VIcon, { name: 'close', size: 14 }),
+                h(VIcon, { name: 'danger', size: 16 }),
               )
             : null,
           h('span', {
diff --git a/packages/ui-h5/src/selection.ts b/packages/ui-h5/src/selection.ts
index 3ebba0a6..0f1f64d1 100644
--- a/packages/ui-h5/src/selection.ts
+++ b/packages/ui-h5/src/selection.ts
@@ -227,7 +227,9 @@ export const VRadio = defineComponent({
           'onClick': select,
         },
         [
-          h('span', { 'class': 'varo-radio__icon', 'aria-hidden': 'true' }, isChecked.value ? [h(VIcon, { name: 'dot', size: 10 })] : []),
+          h('span', { 'class': 'varo-radio__icon', 'aria-hidden': 'true' }, [
+            h('span', { class: 'varo-radio__dot' }),
+          ]),
           h('span', { class: 'varo-radio__label' }, slots.default?.() ?? props.label),
         ],
       )
diff --git a/packages/ui-h5/src/signature.ts b/packages/ui-h5/src/signature.ts
new file mode 100644
index 00000000..ce7543cf
--- /dev/null
+++ b/packages/ui-h5/src/signature.ts
@@ -0,0 +1,294 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+
+export interface SignaturePoint {
+  x: number
+  y: number
+}
+
+export interface SignatureStroke {
+  points: SignaturePoint[]
+}
+
+function cloneStrokes(strokes: SignatureStroke[]): SignatureStroke[] {
+  return strokes.map(stroke => ({ points: stroke.points.map(point => ({ ...point })) }))
+}
+
+export const VSignature = defineComponent({
+  name: 'VSignature',
+  props: {
+    ariaLabel: {
+      type: String,
+      default: 'Signature pad',
+    },
+    background: {
+      type: String,
+      default: '#ffffff',
+    },
+    clearText: {
+      type: String,
+      default: '清除签名',
+    },
+    disabled: Boolean,
+    height: {
+      type: Number,
+      default: 200,
+    },
+    lineColor: {
+      type: String,
+      default: '#172033',
+    },
+    lineWidth: {
+      type: Number,
+      default: 2,
+    },
+    showClear: {
+      type: Boolean,
+      default: true,
+    },
+    value: {
+      type: Array as PropType<SignatureStroke[]>,
+      default: () => [],
+    },
+  },
+  emits: ['update:value', 'change', 'start', 'end', 'clear'],
+  setup(props, { attrs, emit, expose }) {
+    const canvas = shallowRef<HTMLCanvasElement | null>(null)
+    const strokes = shallowRef(cloneStrokes(props.value))
+    let currentPoints: SignaturePoint[] = []
+    let activePointerId: number | undefined
+    let resizeObserver: ResizeObserver | undefined
+    let canvasWidth = 0
+    let canvasHeight = props.height
+
+    const empty = computed(() => strokes.value.length === 0)
+    const canvasStyle = computed(() => ({
+      background: props.background,
+      height: `${props.height}px`,
+    }))
+
+    function context(): CanvasRenderingContext2D | null {
+      return canvas.value?.getContext('2d') ?? null
+    }
+
+    function prepareContext(ctx: CanvasRenderingContext2D) {
+      ctx.lineCap = 'round'
+      ctx.lineJoin = 'round'
+      ctx.lineWidth = props.lineWidth
+      ctx.strokeStyle = props.lineColor
+    }
+
+    function drawStroke(ctx: CanvasRenderingContext2D, stroke: SignatureStroke) {
+      if (stroke.points.length === 0) {
+        return
+      }
+      prepareContext(ctx)
+      ctx.beginPath()
+      const first = stroke.points[0]
+      const firstX = first.x * canvasWidth
+      const firstY = first.y * canvasHeight
+      if (stroke.points.length === 1) {
+        ctx.fillStyle = props.lineColor
+        ctx.arc(firstX, firstY, Math.max(0.5, props.lineWidth / 2), 0, Math.PI * 2)
+        ctx.fill()
+        return
+      }
+      ctx.moveTo(firstX, firstY)
+      for (const point of stroke.points.slice(1)) {
+        ctx.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+      }
+      ctx.stroke()
+    }
+
+    function redraw() {
+      const ctx = context()
+      if (!ctx) {
+        return
+      }
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      ctx.fillStyle = props.background
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+      for (const stroke of strokes.value) {
+        drawStroke(ctx, stroke)
+      }
+    }
+
+    function resizeCanvas() {
+      const element = canvas.value
+      if (!element) {
+        return
+      }
+      const rect = element.getBoundingClientRect()
+      canvasWidth = Math.max(1, rect.width)
+      canvasHeight = Math.max(1, props.height)
+      const ratio = Math.max(1, window.devicePixelRatio || 1)
+      element.width = Math.round(canvasWidth * ratio)
+      element.height = Math.round(canvasHeight * ratio)
+      const ctx = context()
+      ctx?.setTransform(ratio, 0, 0, ratio, 0, 0)
+      redraw()
+    }
+
+    function pointFromEvent(event: PointerEvent): SignaturePoint | undefined {
+      const element = canvas.value
+      if (!element || canvasWidth <= 0 || canvasHeight <= 0) {
+        return undefined
+      }
+      const rect = element.getBoundingClientRect()
+      return {
+        x: Math.min(1, Math.max(0, (event.clientX - rect.left) / canvasWidth)),
+        y: Math.min(1, Math.max(0, (event.clientY - rect.top) / canvasHeight)),
+      }
+    }
+
+    function pointerDown(event: PointerEvent) {
+      if (props.disabled || activePointerId !== undefined) {
+        return
+      }
+      const point = pointFromEvent(event)
+      if (!point) {
+        return
+      }
+      activePointerId = event.pointerId
+      currentPoints = [point]
+      try {
+        canvas.value?.setPointerCapture?.(event.pointerId)
+      }
+      catch {
+        // Synthetic pointer events may not own browser capture.
+      }
+      emit('start')
+    }
+
+    function pointerMove(event: PointerEvent) {
+      if (props.disabled || activePointerId !== event.pointerId || currentPoints.length === 0) {
+        return
+      }
+      const point = pointFromEvent(event)
+      if (!point) {
+        return
+      }
+      event.preventDefault()
+      const previous = currentPoints[currentPoints.length - 1]
+      currentPoints.push(point)
+      const ctx = context()
+      if (!ctx) {
+        return
+      }
+      prepareContext(ctx)
+      ctx.beginPath()
+      ctx.moveTo(previous.x * canvasWidth, previous.y * canvasHeight)
+      ctx.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+      ctx.stroke()
+    }
+
+    function samePoint(left: SignaturePoint, right: SignaturePoint) {
+      return left.x === right.x && left.y === right.y
+    }
+
+    function releaseActivePointer() {
+      if (activePointerId === undefined) {
+        return
+      }
+      const pointerId = activePointerId
+      activePointerId = undefined
+      try {
+        canvas.value?.releasePointerCapture?.(pointerId)
+      }
+      catch {
+        // Interrupted pointers may already have released capture.
+      }
+    }
+
+    function cancelActiveStroke() {
+      releaseActivePointer()
+      currentPoints = []
+      redraw()
+    }
+
+    function finish(event: PointerEvent, commit: boolean) {
+      if (activePointerId !== event.pointerId) {
+        return
+      }
+      if (props.disabled || !commit || currentPoints.length === 0) {
+        cancelActiveStroke()
+        return
+      }
+      const terminalPoint = pointFromEvent(event)
+      const previousPoint = currentPoints[currentPoints.length - 1]
+      if (terminalPoint && !samePoint(previousPoint, terminalPoint)) {
+        currentPoints.push(terminalPoint)
+      }
+      releaseActivePointer()
+      const stroke = { points: currentPoints.map(point => ({ ...point })) }
+      const next = [...strokes.value, stroke]
+      currentPoints = []
+      emit('update:value', cloneStrokes(next))
+      emit('change', cloneStrokes(next))
+      emit('end', { points: stroke.points.map(point => ({ ...point })) })
+      void nextTick(redraw)
+    }
+    function clear() {
+      if (props.disabled || strokes.value.length === 0) {
+        return
+      }
+      currentPoints = []
+      emit('update:value', [])
+      emit('change', [])
+      emit('clear')
+      void nextTick(redraw)
+    }
+
+    watch(() => props.value, (value) => {
+      strokes.value = cloneStrokes(value)
+      void nextTick(redraw)
+    }, { deep: true })
+    watch(() => props.disabled, (disabled) => {
+      if (disabled && activePointerId !== undefined) {
+        cancelActiveStroke()
+      }
+    })
+    watch([() => props.background, () => props.height, () => props.lineColor, () => props.lineWidth], () => {
+      void nextTick(resizeCanvas)
+    })
+
+    onMounted(() => {
+      resizeCanvas()
+      if (typeof ResizeObserver !== 'undefined' && canvas.value) {
+        resizeObserver = new ResizeObserver(resizeCanvas)
+        resizeObserver.observe(canvas.value)
+      }
+    })
+    onBeforeUnmount(() => resizeObserver?.disconnect())
+    expose({ clear })
+
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-signature', attrs.class],
+      'data-disabled': String(props.disabled),
+      'data-empty': String(empty.value),
+    }, [
+      h('canvas', {
+        'aria-disabled': props.disabled || undefined,
+        'aria-label': props.ariaLabel,
+        'class': 'varo-signature__canvas',
+        'onPointercancel': (event: PointerEvent) => finish(event, false),
+        'onPointerdown': pointerDown,
+        'onPointermove': pointerMove,
+        'onPointerup': (event: PointerEvent) => finish(event, true),
+        'ref': (element: unknown) => {
+          canvas.value = element instanceof HTMLCanvasElement ? element : null
+        },
+        'style': canvasStyle.value,
+      }),
+      props.showClear
+        ? h('button', {
+            class: 'varo-signature__clear',
+            disabled: props.disabled || empty.value,
+            type: 'button',
+            onClick: clear,
+          }, props.clearText)
+        : null,
+    ])
+  },
+})
diff --git a/packages/ui-h5/src/style.css b/packages/ui-h5/src/style.css
index 144c1dbf..de56541d 100644
--- a/packages/ui-h5/src/style.css
+++ b/packages/ui-h5/src/style.css
@@ -69,6 +69,11 @@
   --varo-ui-radius-sm: var(--varo-ui-input-radius);
   --varo-ui-shadow-sm: 0 1px 2px rgb(48 49 51 / 6%);
   --varo-ui-shadow-md: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
+  --varo-ui-motion-feedback: 140ms;
+  --varo-ui-motion-state: 180ms;
+  --varo-ui-motion-enter: 220ms;
+  --varo-ui-motion-exit: 160ms;
+  --varo-ui-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
   --varo-ui-ring: rgb(7 193 96 / 16%);
   --varo-ui-focus: #000;
   --varo-agent-surface: var(--varo-ui-surface);
@@ -102,7 +107,7 @@
   --varo-agent-source-rose-soft: #fdf2f8;
 }
 
-:where(.varo-button, .varo-checkbox, .varo-radio, .varo-input-number button, .varo-select button, .varo-switch, .varo-toast button, .varo-rate__item, .varo-picker button, .varo-cascader button, .varo-calendar button, .varo-date-picker button, .varo-number-keyboard button, .varo-uploader button, .varo-indicator button, .varo-elevator button, .varo-menu button, .varo-pagination button) {
+:where(.varo-button, .varo-checkbox, .varo-radio, .varo-date-field button, .varo-input-number button, .varo-select button, .varo-signature button, .varo-switch, .varo-toast button, .varo-rate__item, .varo-picker button, .varo-cascader button, .varo-calendar button, .varo-date-picker button, .varo-number-keyboard button, .varo-uploader button, .varo-indicator button, .varo-elevator button, .varo-menu button, .varo-pagination button) {
   font: inherit;
 }
 
@@ -112,27 +117,32 @@
   --varo-button-foreground: var(--varo-ui-primary-foreground);
   --varo-button-hover-foreground: var(--varo-ui-primary-hover-foreground);
 
+  position: relative;
   display: inline-flex;
-  gap: 8px;
+  gap: 6px;
   align-items: center;
   justify-content: center;
   min-height: var(--varo-ui-button-height-md);
   padding: 0 16px;
-  font-weight: 650;
+  overflow: hidden;
+  font-weight: 600;
   line-height: 1;
   color: var(--varo-button-foreground);
+  touch-action: manipulation;
   cursor: pointer;
+  user-select: none;
   background: var(--varo-button-fill);
   border: 1px solid transparent;
   border-radius: var(--varo-ui-button-radius);
   box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: center;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    opacity 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    opacity var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
 .varo-button:focus-visible {
@@ -163,13 +173,11 @@
   background: var(--varo-button-hover-fill);
 }
 
-.varo-button:not([data-disabled='true'], [data-loading='true']):active {
-  transform: translateY(1px);
-}
-
+.varo-button:not([data-disabled='true'], [data-loading='true']):active,
 .varo-button[data-pressed='true'],
 .varo-button--pressed {
-  transform: translateY(1px);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  transform: scale(0.98);
 }
 
 .varo-button[data-size='sm'] {
@@ -194,10 +202,27 @@
 
 .varo-button[data-variant='ghost'] {
   color: var(--varo-ui-text);
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   box-shadow: none;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .varo-button[data-variant='outline']:not([data-disabled='true'], [data-loading='true']):hover,
+  .varo-button[data-variant='ghost']:not([data-disabled='true'], [data-loading='true']):hover {
+    background: var(--varo-ui-fill-light);
+    border-color: var(--varo-ui-border-strong);
+  }
+}
+
+.varo-button[data-variant='outline']:not([data-disabled='true'], [data-loading='true']):active,
+.varo-button[data-variant='outline'][data-pressed='true'],
+.varo-button[data-variant='outline'].varo-button--pressed,
+.varo-button[data-variant='ghost']:not([data-disabled='true'], [data-loading='true']):active,
+.varo-button[data-variant='ghost'][data-pressed='true'],
+.varo-button[data-variant='ghost'].varo-button--pressed {
+  background: var(--varo-ui-fill-light);
+}
+
 .varo-button[data-variant='text'] {
   --varo-button-text-fill: var(--varo-ui-primary-soft);
 
@@ -316,6 +341,18 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-button {
+    transition-duration: 1ms;
+  }
+
+  .varo-button:not([data-disabled='true'], [data-loading='true']):active,
+  .varo-button[data-pressed='true'],
+  .varo-button--pressed {
+    transform: none;
+  }
+}
+
 .varo-input {
   display: grid;
   gap: 6px;
@@ -345,6 +382,12 @@
     box-shadow 0.18s ease;
 }
 
+.varo-input[data-type='textarea'] .varo-input__body {
+  position: relative;
+  align-items: flex-start;
+  padding: 10px 12px 28px;
+}
+
 .varo-input[data-size='sm'] .varo-input__body {
   min-height: var(--varo-ui-input-height-sm);
 }
@@ -374,7 +417,7 @@
 
 textarea.varo-input__control {
   min-height: 72px;
-  padding: 10px 0;
+  padding: 0;
   resize: none;
 }
 
@@ -388,17 +431,36 @@ textarea.varo-input__control {
 }
 
 .varo-input__clear {
+  box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  overflow: visible;
+  color: var(--varo-ui-text-placeholder);
   cursor: pointer;
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   border: 0;
   border-radius: 999px;
 }
 
+.varo-input__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.varo-input[data-type='textarea'] .varo-input__word-limit {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  line-height: 1;
+}
+
 .varo-input__error {
   font-size: 12px;
   color: var(--varo-ui-danger);
@@ -429,6 +491,13 @@ textarea.varo-input__control {
   border: 0;
 }
 
+.varo-radio {
+  min-height: 44px;
+  padding: 0 2px;
+  touch-action: manipulation;
+  user-select: none;
+}
+
 .varo-checkbox__icon,
 .varo-radio__icon {
   position: relative;
@@ -471,17 +540,46 @@ textarea.varo-input__control {
 
 .varo-radio__icon {
   font-size: 10px;
+  background: var(--varo-ui-surface);
   border-radius: 999px;
+  transform-origin: center;
+}
+
+.varo-radio__dot {
+  width: 10px;
+  height: 10px;
+  background: var(--varo-ui-primary);
+  border-radius: 999px;
+  opacity: 0;
+  transform: scale(0.45);
+  transform-origin: center;
+  transition:
+    opacity var(--varo-ui-motion-feedback) linear,
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon,
-.varo-checkbox[data-state='checked'] .varo-checkbox__icon,
-.varo-radio[data-checked='true'] .varo-radio__icon {
+.varo-checkbox[data-state='checked'] .varo-checkbox__icon {
   color: var(--varo-ui-primary-foreground);
   background: var(--varo-ui-primary);
   border-color: var(--varo-ui-primary);
 }
 
+.varo-radio[data-checked='true'] .varo-radio__icon {
+  background: var(--varo-ui-surface);
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-primary-soft);
+}
+
+.varo-radio[data-checked='true'] .varo-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.varo-radio:not([data-disabled='true']):active .varo-radio__icon {
+  transform: scale(0.9);
+}
+
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon::before,
 .varo-checkbox[data-state='checked'] .varo-checkbox__icon::before {
   opacity: 1;
@@ -518,6 +616,17 @@ textarea.varo-input__control {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-radio__icon,
+  .varo-radio__dot {
+    transition-duration: 1ms;
+  }
+
+  .varo-radio:not([data-disabled='true']):active .varo-radio__icon {
+    transform: none;
+  }
+}
+
 .varo-checkbox[data-disabled='true'],
 .varo-radio[data-disabled='true'] {
   cursor: not-allowed;
@@ -527,9 +636,10 @@ textarea.varo-input__control {
 .varo-input-number {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  width: 100%;
-  min-width: min(128px, 100%);
+  width: 130px;
+  min-width: 128px;
   max-width: 100%;
   overflow: hidden;
   background: var(--varo-ui-surface);
@@ -580,10 +690,17 @@ textarea.varo-input__control {
 
 .varo-input-number__input::-webkit-inner-spin-button,
 .varo-input-number__input::-webkit-outer-spin-button {
+  display: none;
   margin: 0;
   appearance: none;
 }
 
+.varo-input-number__minus .varo-icon,
+.varo-input-number__plus .varo-icon {
+  display: block;
+  pointer-events: none;
+}
+
 .varo-select {
   position: relative;
   display: grid;
@@ -598,8 +715,10 @@ textarea.varo-input__control {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 42px;
   min-height: 42px;
   padding: 0 12px;
+  overflow: hidden;
   color: inherit;
   cursor: pointer;
   background: var(--varo-ui-surface, #fff);
@@ -615,9 +734,13 @@ textarea.varo-input__control {
   flex: 1;
   align-items: center;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -645,17 +768,39 @@ textarea.varo-input__control {
 }
 
 .varo-select__clear {
-  display: grid;
+  box-sizing: border-box;
+  display: inline-flex;
   flex: none;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  min-height: 16px;
   padding: 0;
-  color: var(--varo-ui-text-muted, #64748b);
+  margin: 0;
+  line-height: 1;
+  color: var(--varo-ui-text-placeholder);
+  pointer-events: none;
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 999px;
+  opacity: 0;
+}
+
+.varo-select:hover .varo-select__clear,
+.varo-select:focus-within .varo-select__clear,
+.varo-select[data-open='true'] .varo-select__clear {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.varo-select__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .varo-select__control::after,
@@ -728,9 +873,13 @@ textarea.varo-input__control {
 .varo-select__filter-input {
   flex: 1;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   cursor: text;
   outline: 0;
@@ -827,8 +976,8 @@ textarea.varo-input__control {
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--varo-ui-border);
   transition:
-    background 0.14s ease,
-    box-shadow 0.14s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch:not(:disabled):hover {
@@ -855,30 +1004,51 @@ textarea.varo-input__control {
 }
 
 .varo-switch__track {
-  display: flex;
-  align-items: center;
+  position: relative;
+  display: block;
   width: 100%;
   height: 20px;
 }
 
 .varo-switch__thumb {
-  flex: none;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 20px;
   height: 20px;
   background: var(--varo-ui-white);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(48 49 51 / 18%);
-  transition: transform 0.14s ease;
+  box-shadow: 0 1px 3px rgb(48 49 51 / 22%);
+  transform: translateX(0);
+  transform-origin: left center;
+  transition: transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] .varo-switch__thumb {
   transform: translateX(20px);
 }
 
+.varo-switch:not(:disabled):active .varo-switch__thumb {
+  transform: translateX(0) scaleX(1.16);
+}
+
+.varo-switch[data-state='checked']:not(:disabled):active .varo-switch__thumb {
+  transform: translateX(20px) scaleX(1.16);
+  transform-origin: right center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .varo-switch,
   .varo-switch__thumb {
-    transition: none;
+    transition-duration: 1ms;
+  }
+
+  .varo-switch:not(:disabled):active .varo-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .varo-switch[data-state='checked']:not(:disabled):active .varo-switch__thumb {
+    transform: translateX(20px);
   }
 }
 
@@ -916,39 +1086,35 @@ textarea.varo-input__control {
   z-index: 1000;
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: max-content;
-  min-width: 96px;
-  max-width: min(70vw, 240px);
-  padding: 8px 16px;
-  color: var(--varo-ui-white);
-  text-align: center;
+  min-width: 220px;
+  max-width: min(calc(100vw - 32px), 360px);
+  min-height: 52px;
+  padding: 10px 12px;
+  color: var(--varo-ui-text);
+  text-align: left;
   pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border: 0;
-  border-radius: 12px;
+  background: var(--varo-ui-surface-overlay);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: 16px;
+  box-shadow: var(--varo-ui-shadow-md);
   transform: translateX(-50%);
-}
-
-.varo-toast--success,
-.varo-toast--warning,
-.varo-toast--danger,
-.varo-toast--loading {
-  min-width: 88px;
-  min-height: 88px;
-  padding: 16px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-toast--text {
-  min-height: 0;
-  padding: 8px 16px;
+  min-width: 0;
 }
 
 .varo-toast--top {
-  top: 20%;
+  top: max(16px, env(safe-area-inset-top));
 }
 
 .varo-toast--middle {
@@ -958,62 +1124,123 @@ textarea.varo-input__control {
 
 .varo-toast--bottom {
   top: auto;
-  bottom: 20%;
+  bottom: max(16px, env(safe-area-inset-bottom));
 }
 
 .varo-toast__icon {
   display: inline-grid;
+  flex: none;
   place-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--varo-ui-white);
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
+}
+
+.varo-toast--success .varo-toast__icon {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.varo-toast--warning .varo-toast__icon {
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+}
+
+.varo-toast--danger .varo-toast__icon {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
 }
 
 .varo-toast__icon svg,
 .varo-toast__icon .varo-icon {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
+}
+
+.varo-toast__body {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.varo-toast__title {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
 }
 
 .varo-toast__message {
   min-width: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--varo-ui-white);
+  color: var(--varo-ui-text-regular);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-.varo-toast--success .varo-toast__message,
-.varo-toast--warning .varo-toast__message,
-.varo-toast--danger .varo-toast__message,
-.varo-toast--loading .varo-toast__message {
-  margin-top: 2px;
+.varo-toast__action,
+.varo-toast__close {
+  flex: none;
+  pointer-events: auto;
+  cursor: pointer;
+  border: 0;
+}
+
+.varo-toast__action {
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
+}
+
+.varo-toast__action:active {
+  transform: scale(0.96);
 }
 
 .varo-toast__close {
   display: inline-grid;
   place-items: center;
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  color: rgb(255 255 255 / 72%);
-  pointer-events: auto;
-  cursor: pointer;
+  color: var(--varo-ui-text-muted);
   background: transparent;
-  border: 0;
   border-radius: 999px;
 }
 
-.varo-toast__close:hover {
-  color: var(--varo-ui-white);
-  background: rgb(255 255 255 / 12%);
+@media (hover: hover) and (pointer: fine) {
+  .varo-toast__action:hover {
+    color: var(--varo-ui-primary-foreground);
+    background: var(--varo-ui-primary);
+  }
+
+  .varo-toast__close:hover {
+    color: var(--varo-ui-text);
+    background: var(--varo-ui-fill-light);
+  }
 }
 
+.varo-toast__action:focus-visible,
 .varo-toast__close:focus-visible {
-  outline: 2px solid var(--varo-ui-white);
+  outline: 2px solid var(--varo-ui-focus);
   outline-offset: 1px;
 }
 
@@ -1024,8 +1251,8 @@ textarea.varo-input__control {
 }
 
 .varo-toast__spinner {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
   animation: varo-toast-spin 0.9s linear infinite;
 }
 
@@ -1037,12 +1264,52 @@ textarea.varo-input__control {
   stroke-width: 2.2;
 }
 
+.varo-toast-region {
+  position: fixed;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(calc(100vw - 32px), 360px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.varo-toast-region[data-position='top'] {
+  top: max(16px, env(safe-area-inset-top));
+}
+
+.varo-toast-region[data-position='middle'] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.varo-toast-region[data-position='bottom'] {
+  bottom: max(16px, env(safe-area-inset-bottom));
+}
+
+.varo-toast-region[data-inline='true'] {
+  position: relative;
+  inset: auto;
+  width: min(100%, 360px);
+  transform: none;
+}
+
+.varo-toast-region .varo-toast {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-width: none;
+  transform: none;
+}
+
 .varo-toast-enter-active {
-  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: opacity var(--varo-ui-motion-enter) ease, transform var(--varo-ui-motion-enter) var(--varo-ui-motion-ease);
 }
 
 .varo-toast-leave-active {
-  transition: opacity 0.16s ease, transform 0.16s ease-in;
+  transition: opacity var(--varo-ui-motion-exit) ease, transform var(--varo-ui-motion-exit) ease-in;
 }
 
 .varo-toast-enter-from,
@@ -1065,6 +1332,16 @@ textarea.varo-input__control {
   transform: translate(-50%, 10px) scale(0.98);
 }
 
+.varo-toast-region .varo-toast.varo-toast-enter-from,
+.varo-toast-region .varo-toast.varo-toast-leave-to {
+  transform: translateY(-8px) scale(0.98);
+}
+
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-enter-from,
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-leave-to {
+  transform: translateY(8px) scale(0.98);
+}
+
 @keyframes varo-toast-spin {
   to {
     transform: rotate(360deg);
@@ -1087,6 +1364,11 @@ textarea.varo-input__control {
     transform: translate(-50%, -50%);
   }
 
+  .varo-toast-region .varo-toast.varo-toast-enter-from,
+  .varo-toast-region .varo-toast.varo-toast-leave-to {
+    transform: none;
+  }
+
   .varo-toast__spinner {
     animation-duration: 1.8s;
   }
@@ -1205,6 +1487,76 @@ textarea.varo-input__control {
   }
 }
 
+.varo-date-field {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+  color: var(--varo-ui-text);
+}
+
+.varo-date-field__control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-input-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__control {
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+.varo-date-field[data-disabled='true'] .varo-date-field__control {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.varo-date-field[data-readonly='true'] .varo-date-field__control {
+  cursor: default;
+}
+
+.varo-date-field__value,
+.varo-date-field__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.varo-date-field__placeholder {
+  color: var(--varo-ui-text-placeholder);
+}
+
+.varo-date-field__arrow {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  color: var(--varo-ui-text-muted);
+  border-right: 1.6px solid currentcolor;
+  border-bottom: 1.6px solid currentcolor;
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__arrow {
+  color: var(--varo-ui-primary);
+  transform: translateY(2px) rotate(225deg);
+}
+
+.varo-date-field__picker {
+  width: 100%;
+}
+
 .varo-calendar,
 .varo-date-picker,
 .varo-picker,
@@ -1352,12 +1704,25 @@ textarea.varo-input__control {
   color: var(--varo-ui-primary);
 }
 
-.varo-picker__columns,
+.varo-picker__columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  padding: 8px;
+}
+
 .varo-cascader__options {
   display: grid;
   padding: 8px;
 }
 
+.varo-picker__column {
+  display: grid;
+  align-content: start;
+  max-height: 240px;
+  overflow: auto;
+}
+
 .varo-picker__option,
 .varo-cascader__option {
   position: relative;
@@ -3081,6 +3446,130 @@ textarea.varo-input__control {
   transition: none;
 }
 
+.varo-signature {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.varo-signature__canvas {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  touch-action: none;
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-signature__canvas:focus-visible {
+  outline: 2px solid var(--varo-ui-primary);
+  outline-offset: 2px;
+}
+
+.varo-signature[data-disabled='true'] {
+  opacity: 0.58;
+}
+
+.varo-signature__clear {
+  justify-self: end;
+  min-height: 36px;
+  padding: 0 12px;
+  font-weight: 700;
+  color: var(--varo-ui-danger);
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.varo-signature__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.varo-watermark {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.varo-watermark__content {
+  position: relative;
+  z-index: 0;
+}
+
+.varo-watermark__overlay {
+  position: absolute;
+  inset: calc(0px - var(--varo-watermark-gap-y)) calc(0px - var(--varo-watermark-gap-x));
+  z-index: var(--varo-watermark-z-index);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(var(--varo-watermark-offset-x), var(--varo-watermark-offset-y));
+}
+
+.varo-watermark__item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--varo-watermark-gap-x);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--varo-watermark-gap-y);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--varo-watermark-font-size);
+  font-weight: var(--varo-watermark-font-weight);
+  line-height: 1;
+  color: var(--varo-watermark-color);
+  white-space: nowrap;
+  opacity: var(--varo-watermark-opacity);
+  transform: rotate(var(--varo-watermark-rotate));
+}
+
+.varo-pull-refresh {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.varo-pull-refresh__track {
+  min-height: 100%;
+}
+
+.varo-pull-refresh__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
+.varo-pull-refresh[data-state='ready'] .varo-pull-refresh__indicator,
+.varo-pull-refresh[data-state='loading'] .varo-pull-refresh__indicator {
+  font-weight: 700;
+  color: var(--varo-ui-primary);
+}
+
+.varo-pull-refresh__content {
+  min-height: 1px;
+}
+
+.varo-pull-refresh__native-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
 .varo-list {
   display: block;
   width: 100%;
diff --git a/packages/ui-h5/src/toast.ts b/packages/ui-h5/src/toast.ts
index f333f677..6a361303 100644
--- a/packages/ui-h5/src/toast.ts
+++ b/packages/ui-h5/src/toast.ts
@@ -47,6 +47,10 @@ export const VToast = defineComponent({
       type: String,
       default: '',
     },
+    title: {
+      type: String,
+      default: undefined,
+    },
     type: {
       type: String as PropType<VToastType>,
       default: 'text',
@@ -55,6 +59,14 @@ export const VToast = defineComponent({
       type: String as PropType<VToastPosition>,
       default: 'middle',
     },
+    actionText: {
+      type: String,
+      default: undefined,
+    },
+    actionLabel: {
+      type: String,
+      default: undefined,
+    },
     closeable: {
       type: Boolean,
       default: false,
@@ -64,13 +76,17 @@ export const VToast = defineComponent({
       default: '关闭通知',
     },
   },
-  emits: ['update:visible', 'close'],
+  emits: ['update:visible', 'close', 'action'],
   setup(props, { attrs, emit, slots }) {
     function close() {
       emit('update:visible', false)
       emit('close')
     }
 
+    function action() {
+      emit('action')
+    }
+
     return () =>
       h(
         Transition,
@@ -91,7 +107,18 @@ export const VToast = defineComponent({
                 },
                 [
                   props.type === 'text' ? null : renderToastIcon(props.type),
-                  h('span', { class: 'varo-toast__message' }, slots.default?.() ?? props.message),
+                  h('span', { class: 'varo-toast__body' }, [
+                    props.title ? h('strong', { class: 'varo-toast__title' }, props.title) : null,
+                    h('span', { class: 'varo-toast__message' }, slots.default?.() ?? props.message),
+                  ]),
+                  props.actionText
+                    ? h('button', {
+                        'aria-label': props.actionLabel ?? props.actionText,
+                        'class': 'varo-toast__action',
+                        'type': 'button',
+                        'onClick': action,
+                      }, props.actionText)
+                    : null,
                   props.closeable
                     ? h('button', {
                         'aria-label': props.closeLabel,
@@ -107,3 +134,22 @@ export const VToast = defineComponent({
       )
   },
 })
+
+export const VToastRegion = defineComponent({
+  name: 'VToastRegion',
+  props: {
+    inline: Boolean,
+    position: {
+      type: String as PropType<VToastPosition>,
+      default: 'top',
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-toast-region', attrs.class],
+      'data-inline': String(props.inline),
+      'data-position': props.position,
+    }, slots.default?.() ?? [])
+  },
+})
diff --git a/packages/ui-h5/src/watermark.ts b/packages/ui-h5/src/watermark.ts
new file mode 100644
index 00000000..ea68b116
--- /dev/null
+++ b/packages/ui-h5/src/watermark.ts
@@ -0,0 +1,95 @@
+import type { PropType, StyleValue } from 'vue'
+import { computed, defineComponent, h } from 'vue'
+
+const watermarkTiles = Array.from({ length: 80 }, (_, index) => index)
+
+function normalizeOffset(offset: number, gap: number) {
+  const phase = ((offset % gap) + gap) % gap
+  return phase > gap / 2 ? phase - gap : phase
+}
+
+export const VWatermark = defineComponent({
+  name: 'VWatermark',
+  props: {
+    color: {
+      type: String,
+      default: '#172033',
+    },
+    content: {
+      type: String,
+      default: 'Varo',
+    },
+    fontSize: {
+      type: Number,
+      default: 14,
+    },
+    fontWeight: {
+      type: [Number, String] as PropType<number | string>,
+      default: 500,
+    },
+    gapX: {
+      type: Number,
+      default: 160,
+    },
+    gapY: {
+      type: Number,
+      default: 96,
+    },
+    offsetX: {
+      type: Number,
+      default: 0,
+    },
+    offsetY: {
+      type: Number,
+      default: 0,
+    },
+    opacity: {
+      type: Number,
+      default: 0.12,
+    },
+    rotate: {
+      type: Number,
+      default: -22,
+    },
+    zIndex: {
+      type: Number,
+      default: 9,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const rootStyle = computed(() => {
+      const gapX = Math.max(24, props.gapX)
+      const gapY = Math.max(24, props.gapY)
+      return {
+        '--varo-watermark-color': props.color,
+        '--varo-watermark-font-size': `${Math.max(1, props.fontSize)}px`,
+        '--varo-watermark-font-weight': props.fontWeight,
+        '--varo-watermark-gap-x': `${gapX}px`,
+        '--varo-watermark-gap-y': `${gapY}px`,
+        '--varo-watermark-offset-x': `${normalizeOffset(props.offsetX, gapX)}px`,
+        '--varo-watermark-offset-y': `${normalizeOffset(props.offsetY, gapY)}px`,
+        '--varo-watermark-opacity': Math.min(1, Math.max(0, props.opacity)),
+        '--varo-watermark-rotate': `${props.rotate}deg`,
+        '--varo-watermark-z-index': props.zIndex,
+      }
+    })
+
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-watermark', attrs.class],
+      'data-watermark': props.content,
+      'style': [rootStyle.value, attrs.style as StyleValue],
+    }, [
+      h('div', { class: 'varo-watermark__content' }, slots.default?.()),
+      props.content.length > 0
+        ? h('div', {
+            'aria-hidden': 'true',
+            'class': 'varo-watermark__overlay',
+          }, watermarkTiles.map(tile => h('span', {
+            class: 'varo-watermark__item',
+            key: tile,
+          }, props.content)))
+        : null,
+    ])
+  },
+})
diff --git a/packages/ui-h5/tests/advanced-form-controls.test.ts b/packages/ui-h5/tests/advanced-form-controls.test.ts
index 6d0f13c4..a777f6dd 100644
--- a/packages/ui-h5/tests/advanced-form-controls.test.ts
+++ b/packages/ui-h5/tests/advanced-form-controls.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 import { VCalendar, VCalendarCard } from '../src/calendar'
 import { VCascader } from '../src/cascader'
+import { VDateField } from '../src/date-field'
 import { VDatePicker } from '../src/date-picker'
 import { VNumberKeyboard } from '../src/number-keyboard'
 import { VPicker } from '../src/picker'
@@ -49,6 +50,82 @@ describe('ui-h5 advanced form controls', () => {
     })
   })
 
+  it('confirms multi-column picker values as an array', async () => {
+    const onConfirm = vi.fn()
+    const wrapper = mount(VPicker, {
+      props: {
+        columns: [
+          [
+            { label: '2026', value: 2026 },
+            { label: '2027', value: 2027 },
+          ],
+          [
+            { label: '05', value: 5 },
+            { label: '06', value: 6 },
+          ],
+        ],
+        value: [2026, 5],
+        visible: true,
+        onConfirm,
+      },
+    })
+
+    await wrapper.findAll('.varo-picker__column')[1].findAll('.varo-picker__option')[1].trigger('click')
+    await wrapper.get('.varo-picker__confirm').trigger('click')
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      option: [
+        { label: '2026', value: 2026 },
+        { label: '06', value: 6 },
+      ],
+      value: [2026, 6],
+    })
+    wrapper.unmount()
+  })
+
+  it('composes DateField year-month-day columns from Picker', async () => {
+    const onConfirm = vi.fn()
+    const onChange = vi.fn()
+    const onCancel = vi.fn()
+    const onUpdateVisible = vi.fn()
+    const onUpdateValue = vi.fn()
+    const wrapper = mount(VDateField, {
+      props: {
+        'value': '2026-05-18',
+        'visible': true,
+        'minYear': 2025,
+        'maxYear': 2027,
+        onChange,
+        onConfirm,
+        onCancel,
+        'onUpdate:value': onUpdateValue,
+        'onUpdate:visible': onUpdateVisible,
+      },
+    })
+
+    expect(wrapper.get('.varo-date-field__control').text()).toContain('2026-05-18')
+    expect(wrapper.get('.varo-date-field__control').attributes('aria-expanded')).toBe('true')
+    expect(wrapper.get('.varo-date-field__control').attributes('aria-haspopup')).toBeUndefined()
+    expect(wrapper.findAll('.varo-picker__column')).toHaveLength(3)
+    await wrapper.findAll('.varo-picker__column')[1].findAll('.varo-picker__option')[5].trigger('click')
+    expect(onChange).toHaveBeenCalledWith('2026-06-18')
+    expect(onUpdateValue).not.toHaveBeenCalled()
+    expect(wrapper.get('.varo-date-field__control').text()).toContain('2026-05-18')
+    await wrapper.get('.varo-picker__confirm').trigger('click')
+    expect(onUpdateValue).toHaveBeenCalledWith('2026-06-18')
+    expect(onConfirm).toHaveBeenCalledWith('2026-06-18')
+    expect(onUpdateVisible).toHaveBeenLastCalledWith(false)
+
+    await wrapper.setProps({ visible: false })
+    await wrapper.get('.varo-date-field__control').trigger('click')
+    expect(onUpdateVisible).toHaveBeenLastCalledWith(true)
+    await wrapper.setProps({ visible: true })
+    await wrapper.get('.varo-picker__cancel').trigger('click')
+    expect(onCancel).toHaveBeenCalledTimes(1)
+    expect(onUpdateVisible).toHaveBeenLastCalledWith(false)
+    wrapper.unmount()
+  })
+
   it('walks cascader levels and confirms selected path', async () => {
     const onConfirm = vi.fn()
     const wrapper = mount(VCascader, {
diff --git a/packages/ui-h5/tests/base-kit-missing.test.ts b/packages/ui-h5/tests/base-kit-missing.test.ts
index 62106331..fd27f963 100644
--- a/packages/ui-h5/tests/base-kit-missing.test.ts
+++ b/packages/ui-h5/tests/base-kit-missing.test.ts
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
 import { VLoading } from '../src/loading'
 import { VSwitch } from '../src/switch'
-import { VToast } from '../src/toast'
+import { VToast, VToastRegion } from '../src/toast'
 
 describe('ui-h5 missing base kit components', () => {
   it('toggles VSwitch values', async () => {
@@ -40,6 +41,7 @@ describe('ui-h5 missing base kit components', () => {
 
   it('renders controlled VToast feedback', async () => {
     const onUpdate = vi.fn()
+    const onAction = vi.fn()
     const wrapper = mount(VToast, {
       props: {
         'visible': true,
@@ -48,6 +50,10 @@ describe('ui-h5 missing base kit components', () => {
         'position': 'top',
         'closeable': true,
         'closeLabel': '关闭保存通知',
+        'title': '设置已保存',
+        'actionText': '查看',
+        'actionLabel': '查看保存结果',
+        'onAction': onAction,
         'onUpdate:visible': onUpdate,
       },
     })
@@ -62,9 +68,29 @@ describe('ui-h5 missing base kit components', () => {
     expect(toast.attributes('aria-live')).toBe('polite')
     expect(toast.get('.varo-toast__icon svg').attributes('viewBox')).toBe('0 0 24 24')
     expect(toast.get('.varo-toast__close').attributes('aria-label')).toBe('关闭保存通知')
+    expect(toast.get('.varo-toast__title').text()).toBe('设置已保存')
+    expect(toast.get('.varo-toast__action').attributes('aria-label')).toBe('查看保存结果')
 
+    await toast.get('.varo-toast__action').trigger('click')
+    expect(onAction).toHaveBeenCalledTimes(1)
     await wrapper.get('.varo-toast__close').trigger('click')
 
     expect(onUpdate).toHaveBeenCalledWith(false)
   })
+
+  it('lays out controlled toasts inside an inline region', () => {
+    const wrapper = mount(VToastRegion, {
+      props: {
+        inline: true,
+        position: 'top',
+      },
+      slots: {
+        default: () => h(VToast, { message: '同步完成', type: 'success', visible: true }),
+      },
+    })
+
+    expect(wrapper.attributes('data-inline')).toBe('true')
+    expect(wrapper.attributes('data-position')).toBe('top')
+    expect(wrapper.get('.varo-toast').text()).toContain('同步完成')
+  })
 })
diff --git a/packages/ui-h5/tests/form-controls.test.ts b/packages/ui-h5/tests/form-controls.test.ts
index fb347a70..306b88a9 100644
--- a/packages/ui-h5/tests/form-controls.test.ts
+++ b/packages/ui-h5/tests/form-controls.test.ts
@@ -49,8 +49,12 @@ describe('ui-h5 form controls', () => {
         ],
       },
     })
+    const radios = wrapper.findAll('.varo-radio')
+    expect(radios[0].attributes('aria-checked')).toBe('true')
+    expect(radios[1].attributes('aria-checked')).toBe('false')
+    expect(radios.every(radio => radio.find('.varo-radio__dot').exists())).toBe(true)
 
-    await wrapper.findAll('.varo-radio')[1].trigger('click')
+    await radios[1].trigger('click')
 
     expect(onUpdate).toHaveBeenCalledWith('alipay')
   })
@@ -59,6 +63,9 @@ describe('ui-h5 form controls', () => {
     const onUpdate = vi.fn()
     const wrapper = mount(VInputNumber, {
       props: {
+        'decreaseAriaLabel': '减少数量',
+        'increaseAriaLabel': '增加数量',
+        'inputAriaLabel': '数量',
         'max': 3,
         'min': 1,
         'step': 2,
@@ -67,6 +74,14 @@ describe('ui-h5 form controls', () => {
       },
     })
 
+    expect(wrapper.get('.varo-input-number__minus .varo-icon').attributes('data-name')).toBe('minus')
+    expect(wrapper.get('.varo-input-number__plus .varo-icon').attributes('data-name')).toBe('plus')
+    expect(wrapper.get('.varo-input-number__minus').attributes('aria-label')).toBe('减少数量')
+    expect(wrapper.get('.varo-input-number__input').attributes('aria-label')).toBe('数量')
+    expect(wrapper.get('.varo-input-number__plus').attributes('aria-label')).toBe('增加数量')
+    expect(wrapper.get('.varo-input-number__input').attributes('type')).toBe('text')
+    expect(wrapper.get('.varo-input-number__input').attributes('inputmode')).toBe('decimal')
+
     await wrapper.get('.varo-input-number__plus').trigger('click')
     expect(onUpdate).toHaveBeenLastCalledWith(3)
 
@@ -141,6 +156,7 @@ describe('ui-h5 form controls', () => {
     })
 
     expect(wrapper.find('textarea').exists()).toBe(true)
+    expect(wrapper.attributes('data-type')).toBe('textarea')
     expect(wrapper.get('.varo-input__word-limit').text()).toBe('5/20')
   })
 })
diff --git a/packages/ui-h5/tests/input.test.ts b/packages/ui-h5/tests/input.test.ts
index 5e7d4875..ffeffa10 100644
--- a/packages/ui-h5/tests/input.test.ts
+++ b/packages/ui-h5/tests/input.test.ts
@@ -62,6 +62,7 @@ describe('ui-h5 input', () => {
     })
 
     expect(wrapper.find('.varo-input__clear').exists()).toBe(true)
+    expect(wrapper.get('.varo-input__clear .varo-icon').attributes('data-name')).toBe('danger')
 
     await wrapper.get('.varo-input__clear').trigger('click')
 
@@ -93,6 +94,7 @@ describe('ui-h5 input', () => {
     expect(textarea.attributes('rows')).toBe('2')
     expect(textarea.attributes('data-autosize')).toBe('true')
     expect(wrapper.attributes('data-readonly')).toBe('true')
+    expect(wrapper.attributes('data-type')).toBe('textarea')
     expect(wrapper.get('.varo-input__error').text()).toBe('Required')
   })
 
diff --git a/packages/ui-h5/tests/pull-refresh.test.ts b/packages/ui-h5/tests/pull-refresh.test.ts
new file mode 100644
index 00000000..c4942e43
--- /dev/null
+++ b/packages/ui-h5/tests/pull-refresh.test.ts
@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { VPullRefresh } from '../src/pull-refresh'
+
+function pointerEvent(type: string, clientY: number, pointerId: number): MouseEvent {
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    clientY,
+  })
+  Object.defineProperties(event, {
+    pointerId: { value: pointerId },
+    pointerType: { value: 'mouse' },
+  })
+  return event
+}
+
+describe('ui-h5 pull refresh', () => {
+  it('emits only for a matching release above the threshold', async () => {
+    const onRefresh = vi.fn()
+    const wrapper = mount(VPullRefresh, {
+      props: { threshold: 64, onRefresh },
+      slots: { default: () => 'Rows' },
+    })
+    const root = wrapper.get('.varo-pull-refresh')
+    const element = root.element as HTMLElement
+    const setPointerCapture = vi.fn()
+    const releasePointerCapture = vi.fn()
+    Object.defineProperties(element, {
+      setPointerCapture: { value: setPointerCapture },
+      releasePointerCapture: { value: releasePointerCapture },
+    })
+
+    element.dispatchEvent(pointerEvent('pointerdown', 0, 1))
+    element.dispatchEvent(pointerEvent('pointermove', 80, 1))
+    await nextTick()
+    expect(wrapper.attributes('data-state')).toBe('pulling')
+    element.dispatchEvent(pointerEvent('pointerup', 80, 1))
+    await nextTick()
+    expect(onRefresh).not.toHaveBeenCalled()
+
+    element.dispatchEvent(pointerEvent('pointerdown', 0, 2))
+    element.dispatchEvent(pointerEvent('pointermove', 160, 2))
+    await nextTick()
+    expect(wrapper.attributes('data-state')).toBe('ready')
+    element.dispatchEvent(pointerEvent('pointerup', 160, 99))
+    await nextTick()
+    expect(wrapper.attributes('data-state')).toBe('ready')
+    expect(onRefresh).not.toHaveBeenCalled()
+    element.dispatchEvent(pointerEvent('pointercancel', 160, 2))
+    await nextTick()
+    expect(wrapper.attributes('data-state')).toBe('idle')
+    expect(onRefresh).not.toHaveBeenCalled()
+
+    element.dispatchEvent(pointerEvent('pointerdown', 0, 3))
+    element.dispatchEvent(pointerEvent('pointermove', 160, 3))
+    element.dispatchEvent(pointerEvent('pointerup', 160, 3))
+    await nextTick()
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+    expect(setPointerCapture).toHaveBeenCalledWith(3)
+    expect(releasePointerCapture).toHaveBeenCalledWith(3)
+    wrapper.unmount()
+  })
+
+  it('cancels the gesture if the container leaves the top edge', async () => {
+    const onRefresh = vi.fn()
+    const wrapper = mount(VPullRefresh, { props: { onRefresh } })
+    const root = wrapper.get('.varo-pull-refresh')
+    const element = root.element as HTMLElement
+
+    element.scrollTop = 0
+    element.dispatchEvent(pointerEvent('pointerdown', 0, 1))
+    element.scrollTop = 10
+    element.dispatchEvent(pointerEvent('pointermove', 200, 1))
+    element.dispatchEvent(pointerEvent('pointerup', 200, 1))
+    await nextTick()
+
+    expect(wrapper.attributes('data-state')).toBe('idle')
+    expect(onRefresh).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+
+  it('reflects controlled loading and blocks disabled refreshes', async () => {
+    const onRefresh = vi.fn()
+    const wrapper = mount(VPullRefresh, {
+      props: { disabled: true, loading: false, onRefresh },
+    })
+    const root = wrapper.get('.varo-pull-refresh')
+
+    root.element.dispatchEvent(pointerEvent('pointerdown', 0, 1))
+    root.element.dispatchEvent(pointerEvent('pointermove', 200, 1))
+    root.element.dispatchEvent(pointerEvent('pointerup', 200, 1))
+    await nextTick()
+    expect(onRefresh).not.toHaveBeenCalled()
+
+    await wrapper.setProps({ disabled: false, loading: true })
+    expect(wrapper.attributes('aria-busy')).toBe('true')
+    expect(wrapper.attributes('data-state')).toBe('loading')
+    expect(wrapper.get('.varo-pull-refresh__indicator').text()).toBe('加载中')
+    wrapper.unmount()
+  })
+})
diff --git a/packages/ui-h5/tests/select.test.ts b/packages/ui-h5/tests/select.test.ts
index 4144ef2e..d1fe2361 100644
--- a/packages/ui-h5/tests/select.test.ts
+++ b/packages/ui-h5/tests/select.test.ts
@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { VSelect } from '../src/select'
@@ -153,6 +155,7 @@ describe('ui-h5 select', () => {
     expect(wrapper.get('.varo-select__control').element.tagName).toBe('BUTTON')
     expect(wrapper.get('.varo-select__control').find('.varo-select__clear').exists()).toBe(false)
     expect(wrapper.get('.varo-select__clear').element.tagName).toBe('BUTTON')
+    expect(wrapper.get('.varo-select__clear .varo-icon').attributes('data-name')).toBe('danger')
 
     await wrapper.get('.varo-select__trigger').trigger('click')
     expect(wrapper.findAll('.varo-select__option').every(option => option.attributes('role') === 'option')).toBe(true)
@@ -374,4 +377,29 @@ describe('ui-h5 select', () => {
     expect(document.activeElement).toBe(trigger.element)
     wrapper.unmount()
   })
+
+  it('keeps the trigger height stable when the clear action appears on focus', async () => {
+    const wrapper = mount(VSelect, {
+      props: {
+        clearable: true,
+        filterable: true,
+        options,
+        value: 'shanghai',
+      },
+    })
+
+    const stylesheet = readFileSync(resolve(__dirname, '../src/style.css'), 'utf8')
+
+    expect(wrapper.find('.varo-select__clear').exists()).toBe(true)
+    expect(stylesheet).toMatch(/\.varo-select__trigger \{[\s\S]*?height: 42px;/)
+    expect(stylesheet).toMatch(/\.varo-select__clear \{[\s\S]*?display: inline-flex;[\s\S]*?opacity: 0;/)
+    expect(stylesheet).toContain('.varo-select:focus-within .varo-select__clear')
+    expect(stylesheet).toMatch(/\.varo-select:focus-within \.varo-select__clear,[\s\S]*?opacity: 1;/)
+    expect(stylesheet).not.toMatch(/\.varo-select:focus-within \.varo-select__clear \{[\s\S]*?display: inline-flex;/)
+
+    await wrapper.get('.varo-select__filter-input').trigger('focus')
+    expect(wrapper.find('.varo-select__clear').exists()).toBe(true)
+    expect(wrapper.attributes('data-open')).toBe('true')
+    wrapper.unmount()
+  })
 })
diff --git a/packages/ui-h5/tests/signature.test.ts b/packages/ui-h5/tests/signature.test.ts
new file mode 100644
index 00000000..cb10de38
--- /dev/null
+++ b/packages/ui-h5/tests/signature.test.ts
@@ -0,0 +1,146 @@
+import type { SignatureStroke } from '../src/signature'
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { VSignature } from '../src/signature'
+
+function pointerEvent(type: string, clientX: number, clientY: number, pointerId = 1): MouseEvent {
+  const event = new MouseEvent(type, { bubbles: true, cancelable: true, clientX, clientY })
+  Object.defineProperties(event, {
+    pointerId: { value: pointerId },
+    pointerType: { value: 'mouse' },
+  })
+  return event
+}
+
+const context = {
+  arc: vi.fn(),
+  beginPath: vi.fn(),
+  clearRect: vi.fn(),
+  fill: vi.fn(),
+  fillRect: vi.fn(),
+  lineTo: vi.fn(),
+  moveTo: vi.fn(),
+  setTransform: vi.fn(),
+  stroke: vi.fn(),
+  fillStyle: '',
+  lineCap: 'round',
+  lineJoin: 'round',
+  lineWidth: 2,
+  strokeStyle: '',
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  Object.values(context).forEach(value => typeof value === 'function' && value.mockClear())
+})
+
+describe('ui-h5 signature', () => {
+  it('commits normalized strokes and clears them', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context as unknown as CanvasRenderingContext2D)
+    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      bottom: 200,
+      height: 200,
+      left: 0,
+      right: 320,
+      top: 0,
+      width: 320,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    })
+    const events: string[] = []
+    const onUpdate = vi.fn((value: SignatureStroke[]) => events.push(`update:${value.length}`))
+    const wrapper = mount(VSignature, {
+      props: {
+        'onUpdate:value': onUpdate,
+        'onChange': (value: SignatureStroke[]) => events.push(`change:${value.length}`),
+        'onClear': () => events.push('clear'),
+        'onEnd': () => events.push('end'),
+      },
+    })
+    const canvas = wrapper.get('canvas').element as HTMLCanvasElement
+    Object.defineProperties(canvas, {
+      setPointerCapture: { value: vi.fn() },
+      releasePointerCapture: { value: vi.fn() },
+    })
+
+    canvas.dispatchEvent(pointerEvent('pointerdown', 32, 20))
+    canvas.dispatchEvent(pointerEvent('pointermove', 160, 100))
+    canvas.dispatchEvent(pointerEvent('pointerup', 288, 180))
+    await nextTick()
+
+    expect(onUpdate).toHaveBeenLastCalledWith([{
+      points: [
+        { x: 0.1, y: 0.1 },
+        { x: 0.5, y: 0.5 },
+        { x: 0.9, y: 0.9 },
+      ],
+    }])
+    expect(wrapper.attributes('data-empty')).toBe('true')
+    expect(wrapper.get('.varo-signature__clear').attributes('disabled')).toBeDefined()
+
+    const accepted = onUpdate.mock.calls.at(-1)?.[0]
+    await wrapper.setProps({ value: accepted })
+    expect(wrapper.attributes('data-empty')).toBe('false')
+    events.length = 0
+    await wrapper.get('.varo-signature__clear').trigger('click')
+    expect(events).toEqual(['update:0', 'change:0', 'clear'])
+    expect(wrapper.attributes('data-empty')).toBe('false')
+    await wrapper.setProps({ value: [] })
+    expect(wrapper.attributes('data-empty')).toBe('true')
+    wrapper.unmount()
+  })
+
+  it('discards cancelled strokes and blocks disabled input', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context as unknown as CanvasRenderingContext2D)
+    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      bottom: 200,
+      height: 200,
+      left: 0,
+      right: 320,
+      top: 0,
+      width: 320,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    })
+    const wrapper = mount(VSignature)
+    const canvas = wrapper.get('canvas').element
+
+    canvas.dispatchEvent(pointerEvent('pointerdown', 20, 20))
+    canvas.dispatchEvent(pointerEvent('pointermove', 80, 80))
+    canvas.dispatchEvent(pointerEvent('pointercancel', 80, 80))
+    await nextTick()
+    expect(wrapper.emitted('update:value')).toBeUndefined()
+
+    canvas.dispatchEvent(pointerEvent('pointerdown', 20, 20, 2))
+    canvas.dispatchEvent(pointerEvent('pointermove', 80, 80, 2))
+    await wrapper.setProps({ disabled: true })
+    canvas.dispatchEvent(pointerEvent('pointerup', 120, 120, 2))
+    expect(wrapper.emitted('update:value')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('renders a visible dot for a one-point controlled stroke', () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context as unknown as CanvasRenderingContext2D)
+    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      bottom: 200,
+      height: 200,
+      left: 0,
+      right: 320,
+      top: 0,
+      width: 320,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    })
+    const wrapper = mount(VSignature, {
+      props: { value: [{ points: [{ x: 0.5, y: 0.5 }] }] },
+    })
+
+    expect(context.arc).toHaveBeenCalledWith(160, 100, 1, 0, Math.PI * 2)
+    expect(context.fill).toHaveBeenCalled()
+    wrapper.unmount()
+  })
+})
diff --git a/packages/ui-h5/tests/watermark.test.ts b/packages/ui-h5/tests/watermark.test.ts
new file mode 100644
index 00000000..32960095
--- /dev/null
+++ b/packages/ui-h5/tests/watermark.test.ts
@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { VWatermark } from '../src/watermark'
+
+describe('VWatermark', () => {
+  it('covers slotted content with an inaccessible non-interactive text pattern', () => {
+    const wrapper = mount(VWatermark, {
+      props: {
+        color: '#123456',
+        content: 'ACME CONFIDENTIAL',
+        gapX: 120,
+        offsetX: 500,
+        offsetY: -500,
+        opacity: 0.2,
+        rotate: -18,
+      },
+      slots: {
+        default: () => h('button', { type: 'button' }, 'Continue'),
+      },
+    })
+
+    expect(wrapper.get('button').text()).toBe('Continue')
+    expect(wrapper.get('.varo-watermark__overlay').attributes('aria-hidden')).toBe('true')
+    expect(wrapper.get('.varo-watermark__item').text()).toBe('ACME CONFIDENTIAL')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-gap-x: 120px')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-opacity: 0.2')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-offset-x: 20px')
+    expect(wrapper.attributes('style')).toContain('--varo-watermark-offset-y: -20px')
+  })
+
+  it('removes the decorative overlay for empty content', () => {
+    const wrapper = mount(VWatermark, {
+      props: { content: '' },
+      slots: { default: 'Protected content' },
+    })
+
+    expect(wrapper.text()).toBe('Protected content')
+    expect(wrapper.find('.varo-watermark__overlay').exists()).toBe(false)
+  })
+})
diff --git a/packages/ui-weapp/src/date-field.ts b/packages/ui-weapp/src/date-field.ts
new file mode 100644
index 00000000..b1142a41
--- /dev/null
+++ b/packages/ui-weapp/src/date-field.ts
@@ -0,0 +1,133 @@
+import type { PropType } from 'vue'
+import type { PickerOption } from './picker'
+import { computed, defineComponent, h, shallowRef, watch } from 'vue'
+import { buildDateFieldColumns, dateFieldValue, parseDateFieldValue } from './date-utils'
+import { VPicker } from './picker'
+
+export const VDateField = defineComponent({
+  name: 'VDateField',
+  props: {
+    cancelText: {
+      type: String,
+      default: 'Cancel',
+    },
+    confirmText: {
+      type: String,
+      default: 'Confirm',
+    },
+    disabled: Boolean,
+    maxYear: {
+      type: Number,
+      default: 2100,
+    },
+    minYear: {
+      type: Number,
+      default: 1970,
+    },
+    placeholder: {
+      type: String,
+      default: 'Select date',
+    },
+    readonly: Boolean,
+    title: {
+      type: String,
+      default: undefined,
+    },
+    value: {
+      type: String as PropType<string | undefined>,
+      default: undefined,
+    },
+    visible: Boolean,
+  },
+  emits: ['update:value', 'update:visible', 'confirm', 'cancel', 'change'],
+  setup(props, { attrs, emit }) {
+    const draftValue = shallowRef(props.value)
+    const columns = computed(() => buildDateFieldColumns(draftValue.value, props.minYear, props.maxYear))
+    const pickerValue = computed(() => parseDateFieldValue(draftValue.value))
+
+    watch(() => props.value, (value) => {
+      draftValue.value = value
+    })
+    watch(() => props.visible, (visible) => {
+      if (visible) {
+        draftValue.value = props.value
+      }
+    })
+
+    function toDate(values: Array<string | number | undefined>): string {
+      const [year, month, day] = parseDateFieldValue(draftValue.value)
+      return dateFieldValue(Number(values[0] ?? year), Number(values[1] ?? month), Number(values[2] ?? day))
+    }
+
+    function open() {
+      if (props.disabled || props.readonly) {
+        return
+      }
+      draftValue.value = props.value
+      emit('update:visible', true)
+    }
+
+    function onChange(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+      const values = Array.isArray(payload.value) ? payload.value : [payload.value]
+      const next = toDate(values)
+      draftValue.value = next
+      emit('change', next)
+    }
+
+    function onConfirm(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+      const values = Array.isArray(payload.value) ? payload.value : [payload.value]
+      const next = toDate(values)
+      draftValue.value = next
+      emit('update:value', next)
+      emit('confirm', next)
+    }
+
+    function onCancel() {
+      draftValue.value = props.value
+      emit('cancel')
+    }
+
+    function onUpdateVisible(visible: boolean) {
+      if (!visible) {
+        draftValue.value = props.value
+      }
+      emit('update:visible', visible)
+    }
+
+    return () =>
+      h('div', {
+        ...attrs,
+        'class': ['varo-date-field', attrs.class],
+        'data-disabled': String(props.disabled),
+        'data-open': String(props.visible),
+        'data-readonly': String(props.readonly),
+      }, [
+        h('button', {
+          'aria-expanded': String(props.visible),
+          'aria-readonly': props.readonly || undefined,
+          'class': 'varo-date-field__control',
+          'disabled': props.disabled,
+          'type': 'button',
+          'onClick': open,
+        }, [
+          h('span', {
+            class: props.value ? 'varo-date-field__value' : 'varo-date-field__placeholder',
+          }, props.value ?? props.placeholder),
+          h('span', { 'aria-hidden': 'true', 'class': 'varo-date-field__arrow' }),
+        ]),
+        h(VPicker, {
+          'cancelText': props.cancelText,
+          'class': 'varo-date-field__picker',
+          'columns': columns.value as PickerOption[][],
+          'confirmText': props.confirmText,
+          'title': props.title,
+          'value': pickerValue.value,
+          'visible': props.visible,
+          'onCancel': onCancel,
+          'onChange': onChange,
+          'onConfirm': onConfirm,
+          'onUpdate:visible': onUpdateVisible,
+        }),
+      ])
+  },
+})
diff --git a/packages/ui-weapp/src/date-utils.ts b/packages/ui-weapp/src/date-utils.ts
index 67baf70a..48808348 100644
--- a/packages/ui-weapp/src/date-utils.ts
+++ b/packages/ui-weapp/src/date-utils.ts
@@ -13,7 +13,7 @@ export function toDateString(date: Date): string {
 }
 
 export function parseDate(value: string | undefined, fallback = new Date()): Date {
-  if (!value) return new Date(fallback)
+  if (!value) { return new Date(fallback) }
   const [year, month = '1', day = '1'] = value.split('-')
   return new Date(Number(year), Number(month) - 1, Number(day))
 }
@@ -48,9 +48,55 @@ export function buildMonthDays(month?: string): CalendarDay[] {
     days.push({
       date: toDateString(date),
       day,
-      inMonth: true
+      inMonth: true,
     })
   }
 
   return days
 }
+
+export interface DateFieldOption {
+  label: string
+  value: number
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+export function clampDateParts(year: number, month: number, day: number): [number, number, number] {
+  const nextMonth = Math.min(12, Math.max(1, month))
+  const nextDay = Math.min(daysInMonth(year, nextMonth), Math.max(1, day))
+  return [year, nextMonth, nextDay]
+}
+
+export function dateFieldValue(year: number, month: number, day: number): string {
+  const [nextYear, nextMonth, nextDay] = clampDateParts(year, month, day)
+  return `${nextYear}-${pad(nextMonth)}-${pad(nextDay)}`
+}
+
+export function parseDateFieldValue(value: string | undefined, fallback = new Date()): [number, number, number] {
+  const date = parseDate(value, fallback)
+  return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
+}
+
+export function buildDateFieldColumns(
+  value: string | undefined,
+  minYear = 1970,
+  maxYear = 2100,
+): DateFieldOption[][] {
+  const [year, month] = parseDateFieldValue(value)
+  const years: DateFieldOption[] = []
+  for (let next = minYear; next <= maxYear; next += 1) {
+    years.push({ label: String(next), value: next })
+  }
+  const months: DateFieldOption[] = Array.from({ length: 12 }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  const days: DateFieldOption[] = Array.from({ length: daysInMonth(year, month) }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  return [years, months, days]
+}
diff --git a/packages/ui-weapp/src/index.ts b/packages/ui-weapp/src/index.ts
index bf5f51f1..0fd53bcf 100644
--- a/packages/ui-weapp/src/index.ts
+++ b/packages/ui-weapp/src/index.ts
@@ -9,6 +9,7 @@ export * from './cascader'
 export * from './cell'
 export * from './checkbox'
 export * from './collapse'
+export * from './date-field'
 export * from './date-picker'
 export * from './dialog'
 export * from './divider'
@@ -35,6 +36,7 @@ export * from './picker'
 export * from './popover'
 export * from './popup'
 export * from './progress'
+export * from './pull-refresh'
 export * from './radio'
 export * from './range'
 export * from './rate'
@@ -55,3 +57,4 @@ export * from './tag'
 export * from './textarea'
 export * from './toast'
 export * from './uploader'
+export * from './watermark'
diff --git a/packages/ui-weapp/src/input-number.ts b/packages/ui-weapp/src/input-number.ts
index 901f0caf..6454354c 100644
--- a/packages/ui-weapp/src/input-number.ts
+++ b/packages/ui-weapp/src/input-number.ts
@@ -8,11 +8,15 @@ import {
 } from '@varo/primitives-weapp'
 import { createVariantClass } from '@varo/shared'
 import { computed, defineComponent, h } from 'vue'
+import { VIcon } from './icon'
 
 export const VInputNumber = defineComponent({
   name: 'VInputNumber',
   props: {
+    decreaseAriaLabel: { type: String, default: 'Decrease value' },
     disabled: Boolean,
+    increaseAriaLabel: { type: String, default: 'Increase value' },
+    inputAriaLabel: { type: String, default: 'Numeric value' },
     max: { type: Number, default: Number.POSITIVE_INFINITY },
     min: { type: Number, default: Number.NEGATIVE_INFINITY },
     precision: { type: Number as PropType<number | undefined>, default: undefined },
@@ -44,13 +48,14 @@ export const VInputNumber = defineComponent({
         },
         {
           default: () => [
-            h(NumberFieldDecrement, { class: 'varo-input-number__minus' }, () => '-'),
+            h(NumberFieldDecrement, { 'aria-label': props.decreaseAriaLabel, 'class': 'varo-input-number__minus' }, () => h(VIcon, { name: 'minus', size: 14 })),
             h(NumberFieldInput, {
-              class: 'varo-input-number__input',
-              onBlur: (event: FocusEvent) => emit('blur', event),
-              onFocus: (event: FocusEvent) => emit('focus', event),
+              'class': 'varo-input-number__input',
+              'aria-label': props.inputAriaLabel,
+              'onBlur': (event: FocusEvent) => emit('blur', event),
+              'onFocus': (event: FocusEvent) => emit('focus', event),
             }),
-            h(NumberFieldIncrement, { class: 'varo-input-number__plus' }, () => '+'),
+            h(NumberFieldIncrement, { 'aria-label': props.increaseAriaLabel, 'class': 'varo-input-number__plus' }, () => h(VIcon, { name: 'plus', size: 14 })),
           ],
         },
       )
diff --git a/packages/ui-weapp/src/input.ts b/packages/ui-weapp/src/input.ts
index 78fadffc..206bad3e 100644
--- a/packages/ui-weapp/src/input.ts
+++ b/packages/ui-weapp/src/input.ts
@@ -252,6 +252,7 @@ export const VInput = defineComponent({
           'data-invalid': String(effectiveInvalid.value),
           'data-readonly': String(props.readonly),
           'data-size': props.size,
+          'data-type': props.type,
         },
         [
           labelVisible.value
@@ -308,7 +309,7 @@ export const VInput = defineComponent({
                     'onClick': clear,
                     'onMousedown': (event: MouseEvent) => event.preventDefault(),
                   },
-                  h(VIcon, { name: 'close', size: 14 }),
+                  h(VIcon, { name: 'danger', size: 16 }),
                 )
               : null,
             props.showWordLimit ? h('span', { class: 'varo-input__word-limit' }, wordLimit.value) : null,
diff --git a/packages/ui-weapp/src/picker.ts b/packages/ui-weapp/src/picker.ts
index e8c86dc3..6dea7fa4 100644
--- a/packages/ui-weapp/src/picker.ts
+++ b/packages/ui-weapp/src/picker.ts
@@ -1,4 +1,5 @@
-import { computed, defineComponent, h, shallowRef, watch, type PropType } from 'vue'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, shallowRef, watch } from 'vue'
 
 export interface PickerOption {
   disabled?: boolean
@@ -6,84 +7,145 @@ export interface PickerOption {
   value: string | number
 }
 
+export type PickerColumn = PickerOption[]
+export type PickerValue = string | number | Array<string | number> | undefined
+
+function isOptionList(value: unknown): value is PickerOption[] {
+  return Array.isArray(value) && (value.length === 0 || (typeof value[0] === 'object' && value[0] !== null && 'label' in value[0]))
+}
+
+export function normalizePickerColumns(columns: PickerColumn | PickerColumn[]): PickerColumn[] {
+  if (columns.length === 0) {
+    return [[]]
+  }
+  return isOptionList(columns) ? [columns] : columns
+}
+
+function firstEnabledValue(column: PickerColumn): string | number | undefined {
+  return column.find(option => !option.disabled)?.value ?? column[0]?.value
+}
+
+export function normalizePickerValue(
+  value: PickerValue,
+  columns: PickerColumn[],
+): Array<string | number | undefined> {
+  const values = Array.isArray(value) ? value : [value]
+  return columns.map((column, index) => {
+    const next = values[index]
+    if (next !== undefined && column.some(option => option.value === next && !option.disabled)) {
+      return next
+    }
+    return firstEnabledValue(column)
+  })
+}
+
 export const VPicker = defineComponent({
   name: 'VPicker',
   props: {
     cancelText: {
       type: String,
-      default: 'Cancel'
+      default: 'Cancel',
     },
     columns: {
-      type: Array as PropType<PickerOption[]>,
-      default: () => []
+      type: Array as PropType<PickerColumn | PickerColumn[]>,
+      default: () => [],
     },
     confirmText: {
       type: String,
-      default: 'Confirm'
+      default: 'Confirm',
     },
     title: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     value: {
-      type: [String, Number] as PropType<string | number | undefined>,
-      default: undefined
+      type: [String, Number, Array] as PropType<PickerValue>,
+      default: undefined,
     },
-    visible: Boolean
+    visible: Boolean,
   },
   emits: ['update:value', 'update:visible', 'confirm', 'cancel', 'change'],
   setup(props, { emit }) {
-    const selectedValue = shallowRef<string | number | undefined>(props.value ?? props.columns[0]?.value)
-    const selectedOption = computed(() => props.columns.find((item) => item.value === selectedValue.value))
+    const resolvedColumns = computed(() => normalizePickerColumns(props.columns))
+    const selectedValues = shallowRef(normalizePickerValue(props.value, resolvedColumns.value))
 
     watch(
-      () => props.value,
-      (value) => {
-        selectedValue.value = value ?? props.columns[0]?.value
-      }
+      [() => props.value, resolvedColumns],
+      () => {
+        selectedValues.value = normalizePickerValue(props.value, resolvedColumns.value)
+      },
     )
 
-    function select(option: PickerOption) {
-      if (option.disabled) return
-      selectedValue.value = option.value
-      emit('change', { option, value: option.value })
-      emit('update:value', option.value)
+    const selectedOptions = computed(() =>
+      resolvedColumns.value.map((column, index) =>
+        column.find(option => option.value === selectedValues.value[index]),
+      ),
+    )
+
+    function emitChange(values: Array<string | number | undefined>, option?: PickerOption, columnIndex?: number) {
+      const singleColumn = resolvedColumns.value.length === 1
+      const next = singleColumn ? values[0] : values
+      if (option !== undefined && columnIndex !== undefined) {
+        emit('change', singleColumn ? { option, value: next } : { columnIndex, option, value: next })
+      }
+    }
+
+    function select(columnIndex: number, option: PickerOption) {
+      if (option.disabled) {
+        return
+      }
+      const next = selectedValues.value.slice()
+      next[columnIndex] = option.value
+      selectedValues.value = next
+      emitChange(next, option, columnIndex)
     }
 
     function confirm() {
-      emit('confirm', {
-        option: selectedOption.value,
-        value: selectedValue.value
-      })
+      const option = resolvedColumns.value.length === 1 ? selectedOptions.value[0] : selectedOptions.value
+      const value = resolvedColumns.value.length === 1 ? selectedValues.value[0] : selectedValues.value
+      emit('update:value', value)
+      emit('confirm', { option, value })
+      emit('update:visible', false)
+    }
+
+    function cancel() {
+      selectedValues.value = normalizePickerValue(props.value, resolvedColumns.value)
+      emit('cancel')
       emit('update:visible', false)
     }
 
     return () =>
       props.visible
-        ? h('div', { class: 'varo-picker' }, [
+        ? h('div', { 'class': 'varo-picker', 'data-columns': String(resolvedColumns.value.length) }, [
             h('div', { class: 'varo-picker__toolbar' }, [
-              h('button', { class: 'varo-picker__cancel', type: 'button', onClick: () => emit('cancel') }, props.cancelText),
+              h('button', { class: 'varo-picker__cancel', type: 'button', onClick: cancel }, props.cancelText),
               props.title ? h('strong', { class: 'varo-picker__title' }, props.title) : null,
-              h('button', { class: 'varo-picker__confirm', type: 'button', onClick: confirm }, props.confirmText)
+              h('button', { class: 'varo-picker__confirm', type: 'button', onClick: confirm }, props.confirmText),
             ]),
             h(
               'div',
               { class: 'varo-picker__columns' },
-              props.columns.map((option) =>
+              resolvedColumns.value.map((column, columnIndex) =>
                 h(
-                  'button',
-                  {
-                    class: 'varo-picker__option',
-                    type: 'button',
-                    disabled: option.disabled,
-                    'data-active': String(option.value === selectedValue.value),
-                    onClick: () => select(option)
-                  },
-                  option.label
-                )
-              )
-            )
+                  'div',
+                  { class: 'varo-picker__column', key: columnIndex },
+                  column.map(option =>
+                    h(
+                      'button',
+                      {
+                        'class': 'varo-picker__option',
+                        'type': 'button',
+                        'disabled': option.disabled,
+                        'data-active': String(option.value === selectedValues.value[columnIndex]),
+                        'onClick': () => select(columnIndex, option),
+                      },
+                      option.label,
+                    ),
+                  ),
+                ),
+              ),
+            ),
           ])
         : null
-  }
+  },
 })
diff --git a/packages/ui-weapp/src/pull-refresh.ts b/packages/ui-weapp/src/pull-refresh.ts
new file mode 100644
index 00000000..ab864c30
--- /dev/null
+++ b/packages/ui-weapp/src/pull-refresh.ts
@@ -0,0 +1,43 @@
+import { defineComponent, h } from 'vue'
+
+export const VPullRefresh = defineComponent({
+  name: 'VPullRefresh',
+  props: {
+    disabled: Boolean,
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '加载中',
+    },
+    threshold: {
+      type: Number,
+      default: 64,
+    },
+  },
+  emits: ['refresh'],
+  setup(props, { attrs, emit, slots }) {
+    function refresh() {
+      if (!props.disabled && !props.loading) {
+        emit('refresh')
+      }
+    }
+
+    return () => h('scroll-view', {
+      ...attrs,
+      'aria-busy': String(props.loading),
+      'class': ['varo-pull-refresh', attrs.class],
+      'data-disabled': String(props.disabled),
+      'data-state': props.loading ? 'loading' : 'idle',
+      'onRefresherrefresh': refresh,
+      'refresherEnabled': !props.disabled,
+      'refresherThreshold': props.threshold,
+      'refresherTriggered': props.loading,
+      'scrollY': true,
+    }, [
+      slots.default?.(),
+      props.loading
+        ? h('view', { 'class': 'varo-pull-refresh__native-status', 'aria-live': 'polite' }, props.loadingText)
+        : null,
+    ])
+  },
+})
diff --git a/packages/ui-weapp/src/select.ts b/packages/ui-weapp/src/select.ts
index cbe87e71..d82fc2ba 100644
--- a/packages/ui-weapp/src/select.ts
+++ b/packages/ui-weapp/src/select.ts
@@ -364,7 +364,7 @@ export const VSelect = defineComponent({
                   'onClick': clear,
                   'onMousedown': (event: MouseEvent) => event.preventDefault(),
                 },
-                h(VIcon, { name: 'close', size: 14 }),
+                h(VIcon, { name: 'danger', size: 16 }),
               )
             : null,
           h('span', {
diff --git a/packages/ui-weapp/src/selection.ts b/packages/ui-weapp/src/selection.ts
index ba636d74..baf51c6d 100644
--- a/packages/ui-weapp/src/selection.ts
+++ b/packages/ui-weapp/src/selection.ts
@@ -227,7 +227,9 @@ export const VRadio = defineComponent({
           'onClick': select,
         },
         [
-          h('span', { 'class': 'varo-radio__icon', 'aria-hidden': 'true' }, isChecked.value ? [h(VIcon, { name: 'dot', size: 10 })] : []),
+          h('span', { 'class': 'varo-radio__icon', 'aria-hidden': 'true' }, [
+            h('span', { class: 'varo-radio__dot' }),
+          ]),
           h('span', { class: 'varo-radio__label' }, slots.default?.() ?? props.label),
         ],
       )
diff --git a/packages/ui-weapp/src/style.css b/packages/ui-weapp/src/style.css
index d689284a..61fd2eb7 100644
--- a/packages/ui-weapp/src/style.css
+++ b/packages/ui-weapp/src/style.css
@@ -69,6 +69,11 @@ page {
   --varo-ui-radius-sm: var(--varo-ui-input-radius);
   --varo-ui-shadow-sm: 0 1px 2px rgb(48 49 51 / 6%);
   --varo-ui-shadow-md: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
+  --varo-ui-motion-feedback: 140ms;
+  --varo-ui-motion-state: 180ms;
+  --varo-ui-motion-enter: 220ms;
+  --varo-ui-motion-exit: 160ms;
+  --varo-ui-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
   --varo-ui-ring: rgb(7 193 96 / 16%);
   --varo-ui-focus: #000;
   --varo-agent-surface: var(--varo-ui-surface);
@@ -105,8 +110,10 @@ page {
 .varo-button,
 .varo-checkbox,
 .varo-radio,
+.varo-date-field button,
 .varo-input-number button,
 .varo-select button,
+.varo-signature button,
 .varo-switch,
 .varo-toast__close,
 .varo-rate__item,
@@ -218,29 +225,33 @@ page {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  gap: 6px;
   align-items: center;
   justify-content: center;
   min-height: var(--varo-ui-button-height-md);
   padding: 0 16px;
   margin: 0;
   overflow: hidden;
-  font-weight: 650;
+  font-weight: 600;
   line-height: 1;
   vertical-align: middle;
   color: var(--varo-button-foreground);
   text-align: center;
+  touch-action: manipulation;
   cursor: pointer;
+  user-select: none;
   background: var(--varo-button-fill);
   border: 1px solid transparent;
   border-radius: var(--varo-ui-button-radius);
   box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: center;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    opacity 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    opacity var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
 .varo-button::after {
@@ -286,7 +297,8 @@ page {
 
 .varo-button[data-pressed='true'],
 .varo-button--pressed {
-  transform: translateY(1px);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  transform: scale(0.98);
 }
 
 .varo-button[data-variant='solid'][data-pressed='true'],
@@ -317,10 +329,17 @@ page {
 
 .varo-button[data-variant='ghost'] {
   color: var(--varo-ui-text);
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   box-shadow: none;
 }
 
+.varo-button[data-variant='outline'][data-pressed='true'],
+.varo-button[data-variant='outline'].varo-button--pressed,
+.varo-button[data-variant='ghost'][data-pressed='true'],
+.varo-button[data-variant='ghost'].varo-button--pressed {
+  background: var(--varo-ui-fill-light);
+}
+
 .varo-button[data-variant='text'] {
   --varo-button-text-fill: var(--varo-ui-primary-soft);
 
@@ -441,6 +460,17 @@ page {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-button {
+    transition-duration: 1ms;
+  }
+
+  .varo-button[data-pressed='true'],
+  .varo-button--pressed {
+    transform: none;
+  }
+}
+
 .varo-input {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -472,6 +502,12 @@ page {
     box-shadow 0.18s ease;
 }
 
+.varo-input[data-type='textarea'] .varo-input__body {
+  position: relative;
+  align-items: flex-start;
+  padding: 10px 12px 28px;
+}
+
 .varo-input[data-size='sm'] .varo-input__body {
   min-height: var(--varo-ui-input-height-sm);
 }
@@ -501,7 +537,7 @@ page {
 
 textarea.varo-input__control {
   min-height: 72px;
-  padding: 10px 0;
+  padding: 0;
   resize: none;
 }
 
@@ -517,18 +553,35 @@ textarea.varo-input__control {
 .varo-input__clear.varo-input__clear {
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   padding: 0;
   margin: 0;
+  overflow: visible;
+  color: var(--varo-ui-text-placeholder);
   cursor: pointer;
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   border: 0;
   border-radius: 999px;
 }
 
+.varo-input__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.varo-input[data-type='textarea'] .varo-input__word-limit {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  line-height: 1;
+}
+
 .varo-input__error {
   font-size: 12px;
   color: var(--varo-ui-danger);
@@ -567,6 +620,13 @@ textarea.varo-input__control {
   margin: 0;
 }
 
+.varo-radio {
+  min-height: 44px;
+  padding: 0 2px;
+  touch-action: manipulation;
+  user-select: none;
+}
+
 .varo-checkbox__icon,
 .varo-radio__icon {
   position: relative;
@@ -608,17 +668,46 @@ textarea.varo-input__control {
 
 .varo-radio__icon {
   font-size: 10px;
+  background: var(--varo-ui-surface);
   border-radius: 999px;
+  transform-origin: center;
+}
+
+.varo-radio__dot {
+  width: 10px;
+  height: 10px;
+  background: var(--varo-ui-primary);
+  border-radius: 999px;
+  opacity: 0;
+  transform: scale(0.45);
+  transform-origin: center;
+  transition:
+    opacity var(--varo-ui-motion-feedback) linear,
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon,
-.varo-checkbox[data-state='checked'] .varo-checkbox__icon,
-.varo-radio[data-checked='true'] .varo-radio__icon {
+.varo-checkbox[data-state='checked'] .varo-checkbox__icon {
   color: var(--varo-ui-primary-foreground);
   background: var(--varo-ui-primary);
   border-color: var(--varo-ui-primary);
 }
 
+.varo-radio[data-checked='true'] .varo-radio__icon {
+  background: var(--varo-ui-surface);
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-primary-soft);
+}
+
+.varo-radio[data-checked='true'] .varo-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.varo-radio.varo-radio--pressed:not([data-disabled='true']) .varo-radio__icon {
+  transform: scale(0.9);
+}
+
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon::before,
 .varo-checkbox[data-state='checked'] .varo-checkbox__icon::before {
   opacity: 1;
@@ -631,6 +720,17 @@ textarea.varo-input__control {
   z-index: 1;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-radio__icon,
+  .varo-radio__dot {
+    transition-duration: 1ms;
+  }
+
+  .varo-radio.varo-radio--pressed:not([data-disabled='true']) .varo-radio__icon {
+    transform: none;
+  }
+}
+
 .varo-checkbox[data-disabled='true'],
 .varo-radio[data-disabled='true'] {
   cursor: not-allowed;
@@ -640,9 +740,10 @@ textarea.varo-input__control {
 .varo-input-number {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  width: 100%;
-  min-width: min(128px, 100%);
+  width: 130px;
+  min-width: 128px;
   max-width: 100%;
   overflow: hidden;
   background: var(--varo-ui-surface);
@@ -701,10 +802,17 @@ textarea.varo-input__control {
 
 .varo-input-number__input::-webkit-inner-spin-button,
 .varo-input-number__input::-webkit-outer-spin-button {
+  display: none;
   margin: 0;
   appearance: none;
 }
 
+.varo-input-number__minus .varo-icon,
+.varo-input-number__plus .varo-icon {
+  display: block;
+  pointer-events: none;
+}
+
 .varo-select {
   position: relative;
   display: grid;
@@ -714,14 +822,15 @@ textarea.varo-input__control {
 }
 
 .varo-select__trigger {
-  box-sizing: border-box;
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 42px;
   min-height: 42px;
   padding: 0 12px;
+  overflow: hidden;
   color: inherit;
   cursor: pointer;
   background: var(--varo-ui-surface, #fff);
@@ -739,10 +848,13 @@ textarea.varo-input__control {
   align-items: center;
   width: auto;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
   margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -771,18 +883,39 @@ textarea.varo-input__control {
 
 .varo-select__clear.varo-select__clear {
   box-sizing: border-box;
-  display: grid;
+  display: inline-flex;
   flex: none;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  max-width: 16px;
+  height: 16px;
+  min-height: 16px;
+  max-height: 16px;
   padding: 0;
   margin: 0;
-  color: var(--varo-ui-text-muted, #64748b);
+  line-height: 1;
+  color: var(--varo-ui-text-placeholder);
+  pointer-events: none;
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 999px;
+  opacity: 0;
+}
+
+.varo-select[data-open='true'] .varo-select__clear,
+.varo-select[data-clear-active='true'] .varo-select__clear {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.varo-select__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .varo-select__control.varo-select__control::after,
@@ -855,9 +988,13 @@ textarea.varo-input__control {
 .varo-select__filter-input {
   flex: 1;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   cursor: text;
   outline: 0;
@@ -962,8 +1099,8 @@ textarea.varo-input__control {
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--varo-ui-border);
   transition:
-    background 0.14s ease,
-    box-shadow 0.14s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] {
@@ -977,30 +1114,51 @@ textarea.varo-input__control {
 }
 
 .varo-switch__track {
-  display: flex;
-  align-items: center;
+  position: relative;
+  display: block;
   width: 100%;
   height: 20px;
 }
 
 .varo-switch__thumb {
-  flex: none;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 20px;
   height: 20px;
   background: var(--varo-ui-white);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(48 49 51 / 18%);
-  transition: transform 0.14s ease;
+  box-shadow: 0 1px 3px rgb(48 49 51 / 22%);
+  transform: translateX(0);
+  transform-origin: left center;
+  transition: transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] .varo-switch__thumb {
   transform: translateX(20px);
 }
 
+.varo-switch[data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+  transform: translateX(0) scaleX(1.16);
+}
+
+.varo-switch[data-state='checked'][data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+  transform: translateX(20px) scaleX(1.16);
+  transform-origin: right center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .varo-switch,
   .varo-switch__thumb {
-    transition: none;
+    transition-duration: 1ms;
+  }
+
+  .varo-switch[data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .varo-switch[data-state='checked'][data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+    transform: translateX(20px);
   }
 }
 
@@ -1038,39 +1196,35 @@ textarea.varo-input__control {
   z-index: 1000;
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: max-content;
-  min-width: 96px;
-  max-width: min(70vw, 240px);
-  padding: 8px 16px;
-  color: var(--varo-ui-white);
-  text-align: center;
+  min-width: 220px;
+  max-width: min(calc(100vw - 32px), 360px);
+  min-height: 52px;
+  padding: 10px 12px;
+  color: var(--varo-ui-text);
+  text-align: left;
   pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border: 0;
-  border-radius: 12px;
+  background: var(--varo-ui-surface-overlay);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: 16px;
+  box-shadow: var(--varo-ui-shadow-md);
   transform: translateX(-50%);
-}
-
-.varo-toast--success,
-.varo-toast--warning,
-.varo-toast--danger,
-.varo-toast--loading {
-  min-width: 88px;
-  min-height: 88px;
-  padding: 16px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-toast--text {
-  min-height: 0;
-  padding: 8px 16px;
+  min-width: 0;
 }
 
 .varo-toast--top {
-  top: 20%;
+  top: max(16px, env(safe-area-inset-top));
 }
 
 .varo-toast--middle {
@@ -1080,64 +1234,108 @@ textarea.varo-input__control {
 
 .varo-toast--bottom {
   top: auto;
-  bottom: 20%;
+  bottom: max(16px, env(safe-area-inset-bottom));
 }
 
 .varo-toast__icon {
   display: inline-grid;
+  flex: none;
   place-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--varo-ui-white);
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
+}
+
+.varo-toast--success .varo-toast__icon {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.varo-toast--warning .varo-toast__icon {
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+}
+
+.varo-toast--danger .varo-toast__icon {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
 }
 
 .varo-toast__icon .varo-icon {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
+}
+
+.varo-toast__body {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.varo-toast__title {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
 }
 
 .varo-toast__message {
   min-width: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--varo-ui-white);
+  color: var(--varo-ui-text-regular);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-.varo-toast--success .varo-toast__message,
-.varo-toast--warning .varo-toast__message,
-.varo-toast--danger .varo-toast__message,
-.varo-toast--loading .varo-toast__message {
-  margin-top: 2px;
-}
-
+.varo-toast__action.varo-toast__action,
 .varo-toast__close.varo-toast__close {
   box-sizing: border-box;
-  display: inline-grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
+  flex: none;
   padding: 0;
   margin: 0;
-  color: rgb(255 255 255 / 72%);
   pointer-events: auto;
   cursor: pointer;
-  background: transparent;
   border: 0;
+}
+
+.varo-toast__action.varo-toast__action {
+  width: auto;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
   border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
-.varo-toast__close:hover {
-  color: var(--varo-ui-white);
-  background: rgb(255 255 255 / 12%);
+.varo-toast__action.varo-toast__action:active {
+  transform: scale(0.96);
 }
 
-.varo-toast__close:focus-visible {
-  outline: 2px solid var(--varo-ui-white);
-  outline-offset: 1px;
+.varo-toast__close.varo-toast__close {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  color: var(--varo-ui-text-muted);
+  background: transparent;
+  border-radius: 999px;
 }
 
 .varo-toast__close .varo-icon {
@@ -1146,25 +1344,76 @@ textarea.varo-input__control {
 }
 
 .varo-toast__spinner {
-  width: 36px;
-  height: 36px;
+  position: relative;
+  width: 20px;
+  height: 20px;
   animation: varo-toast-spin 0.9s linear infinite;
 }
 
+.varo-toast__spinner-track,
+.varo-toast__spinner-arc {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+}
+
 .varo-toast__spinner-track {
   opacity: 0.24;
 }
 
 .varo-toast__spinner-arc {
-  stroke-width: 2.2;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.varo-toast-region {
+  position: fixed;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(calc(100vw - 32px), 360px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.varo-toast-region[data-position='top'] {
+  top: max(16px, env(safe-area-inset-top));
+}
+
+.varo-toast-region[data-position='middle'] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.varo-toast-region[data-position='bottom'] {
+  bottom: max(16px, env(safe-area-inset-bottom));
+}
+
+.varo-toast-region[data-inline='true'] {
+  position: relative;
+  inset: auto;
+  width: min(100%, 360px);
+  transform: none;
+}
+
+.varo-toast-region .varo-toast {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-width: none;
+  transform: none;
 }
 
 .varo-toast-enter-active {
-  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: opacity var(--varo-ui-motion-enter) ease, transform var(--varo-ui-motion-enter) var(--varo-ui-motion-ease);
 }
 
 .varo-toast-leave-active {
-  transition: opacity 0.16s ease, transform 0.16s ease-in;
+  transition: opacity var(--varo-ui-motion-exit) ease, transform var(--varo-ui-motion-exit) ease-in;
 }
 
 .varo-toast-enter-from,
@@ -1187,6 +1436,16 @@ textarea.varo-input__control {
   transform: translate(-50%, 10px) scale(0.98);
 }
 
+.varo-toast-region .varo-toast.varo-toast-enter-from,
+.varo-toast-region .varo-toast.varo-toast-leave-to {
+  transform: translateY(-8px) scale(0.98);
+}
+
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-enter-from,
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-leave-to {
+  transform: translateY(8px) scale(0.98);
+}
+
 @keyframes varo-toast-spin {
   to {
     transform: rotate(360deg);
@@ -1209,6 +1468,11 @@ textarea.varo-input__control {
     transform: translate(-50%, -50%);
   }
 
+  .varo-toast-region .varo-toast.varo-toast-enter-from,
+  .varo-toast-region .varo-toast.varo-toast-leave-to {
+    transform: none;
+  }
+
   .varo-toast__spinner {
     animation-duration: 1.8s;
   }
@@ -1335,6 +1599,79 @@ textarea.varo-input__control {
   }
 }
 
+.varo-date-field {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+  color: var(--varo-ui-text);
+}
+
+.varo-date-field__control.varo-date-field__control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
+  padding: 0 12px;
+  margin: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-input-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__control {
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+.varo-date-field[data-disabled='true'] .varo-date-field__control {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.varo-date-field[data-readonly='true'] .varo-date-field__control {
+  cursor: default;
+}
+
+.varo-date-field__value,
+.varo-date-field__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.varo-date-field__placeholder {
+  color: var(--varo-ui-text-placeholder);
+}
+
+.varo-date-field__arrow {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  color: var(--varo-ui-text-muted);
+  border-right: 1.6px solid currentcolor;
+  border-bottom: 1.6px solid currentcolor;
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__arrow {
+  color: var(--varo-ui-primary);
+  transform: translateY(2px) rotate(225deg);
+}
+
+.varo-date-field__picker {
+  width: 100%;
+}
+
 .varo-calendar,
 .varo-date-picker,
 .varo-picker,
@@ -1482,12 +1819,25 @@ textarea.varo-input__control {
   color: var(--varo-ui-primary);
 }
 
-.varo-picker__columns,
+.varo-picker__columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  padding: 8px;
+}
+
 .varo-cascader__options {
   display: grid;
   padding: 8px;
 }
 
+.varo-picker__column {
+  display: grid;
+  align-content: start;
+  max-height: 240px;
+  overflow: auto;
+}
+
 .varo-picker__option,
 .varo-cascader__option {
   position: relative;
@@ -3217,6 +3567,103 @@ textarea.varo-input__control {
   transition: none;
 }
 
+.varo-signature {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.varo-signature__canvas {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  touch-action: none;
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-signature[data-disabled='true'] {
+  opacity: 0.58;
+}
+
+.varo-signature__clear.varo-signature__clear {
+  box-sizing: border-box;
+  justify-self: end;
+  width: auto;
+  min-height: 36px;
+  padding: 0 12px;
+  margin: 0;
+  font-weight: 700;
+  color: var(--varo-ui-danger);
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.varo-signature__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.varo-watermark {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.varo-watermark__content {
+  position: relative;
+  z-index: 0;
+}
+
+.varo-watermark__overlay {
+  position: absolute;
+  inset: calc(0px - var(--varo-watermark-gap-y)) calc(0px - var(--varo-watermark-gap-x));
+  z-index: var(--varo-watermark-z-index);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(var(--varo-watermark-offset-x), var(--varo-watermark-offset-y));
+}
+
+.varo-watermark__item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--varo-watermark-gap-x);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--varo-watermark-gap-y);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--varo-watermark-font-size);
+  font-weight: var(--varo-watermark-font-weight);
+  line-height: 1;
+  color: var(--varo-watermark-color);
+  white-space: nowrap;
+  opacity: var(--varo-watermark-opacity);
+  transform: rotate(var(--varo-watermark-rotate));
+}
+
+.varo-pull-refresh {
+  display: block;
+  width: 100%;
+}
+
+.varo-pull-refresh__native-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
 .varo-list {
   display: block;
   width: 100%;
diff --git a/packages/ui-weapp/src/toast.ts b/packages/ui-weapp/src/toast.ts
index f333f677..be611180 100644
--- a/packages/ui-weapp/src/toast.ts
+++ b/packages/ui-weapp/src/toast.ts
@@ -43,67 +43,66 @@ export const VToast = defineComponent({
   name: 'VToast',
   props: {
     visible: Boolean,
-    message: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String as PropType<VToastType>,
-      default: 'text',
-    },
-    position: {
-      type: String as PropType<VToastPosition>,
-      default: 'middle',
-    },
-    closeable: {
-      type: Boolean,
-      default: false,
-    },
-    closeLabel: {
-      type: String,
-      default: '关闭通知',
-    },
+    message: { type: String, default: '' },
+    title: { type: String, default: undefined },
+    type: { type: String as PropType<VToastType>, default: 'text' },
+    position: { type: String as PropType<VToastPosition>, default: 'middle' },
+    actionText: { type: String, default: undefined },
+    actionLabel: { type: String, default: undefined },
+    closeable: { type: Boolean, default: false },
+    closeLabel: { type: String, default: '关闭通知' },
   },
-  emits: ['update:visible', 'close'],
+  emits: ['update:visible', 'close', 'action'],
   setup(props, { attrs, emit, slots }) {
     function close() {
       emit('update:visible', false)
       emit('close')
     }
+    function action() {
+      emit('action')
+    }
+
+    return () => h(Transition, { appear: true, name: 'varo-toast' }, {
+      default: () => props.visible
+        ? h('div', {
+            ...attrs,
+            'class': ['varo-toast', `varo-toast--${props.type}`, `varo-toast--${props.position}`, attrs.class],
+            'role': props.type === 'danger' || props.type === 'warning' ? 'alert' : 'status',
+            'aria-atomic': 'true',
+            'aria-busy': props.type === 'loading' || undefined,
+            'aria-live': props.type === 'danger' || props.type === 'warning' ? 'assertive' : 'polite',
+            'data-type': props.type,
+            'data-position': props.position,
+          }, [
+            props.type === 'text' ? null : renderToastIcon(props.type),
+            h('span', { class: 'varo-toast__body' }, [
+              props.title ? h('strong', { class: 'varo-toast__title' }, props.title) : null,
+              h('span', { class: 'varo-toast__message' }, slots.default?.() ?? props.message),
+            ]),
+            props.actionText
+              ? h('button', { 'aria-label': props.actionLabel ?? props.actionText, 'class': 'varo-toast__action', 'type': 'button', 'onClick': action }, props.actionText)
+              : null,
+            props.closeable
+              ? h('button', { 'aria-label': props.closeLabel, 'class': 'varo-toast__close', 'type': 'button', 'onClick': close }, renderCloseIcon())
+              : null,
+          ])
+        : null,
+    })
+  },
+})
 
-    return () =>
-      h(
-        Transition,
-        { appear: true, name: 'varo-toast' },
-        {
-          default: () => props.visible
-            ? h(
-                'div',
-                {
-                  ...attrs,
-                  'class': ['varo-toast', `varo-toast--${props.type}`, `varo-toast--${props.position}`, attrs.class],
-                  'role': props.type === 'danger' || props.type === 'warning' ? 'alert' : 'status',
-                  'aria-atomic': 'true',
-                  'aria-busy': props.type === 'loading' || undefined,
-                  'aria-live': props.type === 'danger' || props.type === 'warning' ? 'assertive' : 'polite',
-                  'data-type': props.type,
-                  'data-position': props.position,
-                },
-                [
-                  props.type === 'text' ? null : renderToastIcon(props.type),
-                  h('span', { class: 'varo-toast__message' }, slots.default?.() ?? props.message),
-                  props.closeable
-                    ? h('button', {
-                        'aria-label': props.closeLabel,
-                        'class': 'varo-toast__close',
-                        'type': 'button',
-                        'onClick': close,
-                      }, renderCloseIcon())
-                    : null,
-                ],
-              )
-            : null,
-        },
-      )
+export const VToastRegion = defineComponent({
+  name: 'VToastRegion',
+  props: {
+    inline: Boolean,
+    position: { type: String as PropType<VToastPosition>, default: 'top' },
+  },
+  setup(props, { attrs, slots }) {
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-toast-region', attrs.class],
+      'data-inline': String(props.inline),
+      'data-position': props.position,
+    }, slots.default?.() ?? [])
   },
 })
diff --git a/packages/ui-weapp/src/watermark.ts b/packages/ui-weapp/src/watermark.ts
new file mode 100644
index 00000000..9adf4684
--- /dev/null
+++ b/packages/ui-weapp/src/watermark.ts
@@ -0,0 +1,95 @@
+import type { PropType, StyleValue } from 'vue'
+import { computed, defineComponent, h } from 'vue'
+
+const watermarkTiles = Array.from({ length: 80 }, (_, index) => index)
+
+function normalizeOffset(offset: number, gap: number) {
+  const phase = ((offset % gap) + gap) % gap
+  return phase > gap / 2 ? phase - gap : phase
+}
+
+export const VWatermark = defineComponent({
+  name: 'VWatermark',
+  props: {
+    color: {
+      type: String,
+      default: '#172033',
+    },
+    content: {
+      type: String,
+      default: 'Varo',
+    },
+    fontSize: {
+      type: Number,
+      default: 14,
+    },
+    fontWeight: {
+      type: [Number, String] as PropType<number | string>,
+      default: 500,
+    },
+    gapX: {
+      type: Number,
+      default: 160,
+    },
+    gapY: {
+      type: Number,
+      default: 96,
+    },
+    offsetX: {
+      type: Number,
+      default: 0,
+    },
+    offsetY: {
+      type: Number,
+      default: 0,
+    },
+    opacity: {
+      type: Number,
+      default: 0.12,
+    },
+    rotate: {
+      type: Number,
+      default: -22,
+    },
+    zIndex: {
+      type: Number,
+      default: 9,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const rootStyle = computed(() => {
+      const gapX = Math.max(24, props.gapX)
+      const gapY = Math.max(24, props.gapY)
+      return {
+        '--varo-watermark-color': props.color,
+        '--varo-watermark-font-size': `${Math.max(1, props.fontSize)}px`,
+        '--varo-watermark-font-weight': props.fontWeight,
+        '--varo-watermark-gap-x': `${gapX}px`,
+        '--varo-watermark-gap-y': `${gapY}px`,
+        '--varo-watermark-offset-x': `${normalizeOffset(props.offsetX, gapX)}px`,
+        '--varo-watermark-offset-y': `${normalizeOffset(props.offsetY, gapY)}px`,
+        '--varo-watermark-opacity': Math.min(1, Math.max(0, props.opacity)),
+        '--varo-watermark-rotate': `${props.rotate}deg`,
+        '--varo-watermark-z-index': props.zIndex,
+      }
+    })
+
+    return () => h('view', {
+      ...attrs,
+      'class': ['varo-watermark', attrs.class],
+      'data-watermark': props.content,
+      'style': [rootStyle.value, attrs.style as StyleValue],
+    }, [
+      h('view', { class: 'varo-watermark__content' }, slots.default?.()),
+      props.content.length > 0
+        ? h('view', {
+            'aria-hidden': 'true',
+            'class': 'varo-watermark__overlay',
+          }, watermarkTiles.map(tile => h('text', {
+            class: 'varo-watermark__item',
+            key: tile,
+          }, props.content)))
+        : null,
+    ])
+  },
+})
diff --git a/packages/ui-weapp/tests/advanced-form-controls.test.ts b/packages/ui-weapp/tests/advanced-form-controls.test.ts
index 31b44286..58b3d9e7 100644
--- a/packages/ui-weapp/tests/advanced-form-controls.test.ts
+++ b/packages/ui-weapp/tests/advanced-form-controls.test.ts
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { VCalendarCard } from '../src/calendar'
 import { VCascader } from '../src/cascader'
+import { VDateField } from '../src/date-field'
 import { VDatePicker } from '../src/date-picker'
 import { VNumberKeyboard } from '../src/number-keyboard'
 import { VPicker } from '../src/picker'
@@ -51,6 +52,62 @@ describe('ui-weapp advanced form controls', () => {
     expect(dateConfirm).toHaveBeenCalledWith('2026-05-20')
   })
 
+  it('ignores disabled picker options and closes on cancel', async () => {
+    const onChange = vi.fn()
+    const onCancel = vi.fn()
+    const onUpdateVisible = vi.fn()
+    const wrapper = mount(VPicker, {
+      props: {
+        'columns': [
+          { label: 'Apple', value: 'apple' },
+          { disabled: true, label: 'Hidden', value: 'hidden' },
+        ],
+        'value': 'apple',
+        'visible': true,
+        onChange,
+        onCancel,
+        'onUpdate:visible': onUpdateVisible,
+      },
+    })
+
+    await wrapper.findAll('.varo-picker__option')[1].trigger('click')
+    expect(onChange).not.toHaveBeenCalled()
+    await wrapper.get('.varo-picker__cancel').trigger('click')
+    expect(onCancel).toHaveBeenCalledTimes(1)
+    expect(onUpdateVisible).toHaveBeenCalledWith(false)
+    wrapper.unmount()
+  })
+
+  it('confirms and cancels DateField year-month-day columns', async () => {
+    const onConfirm = vi.fn()
+    const onCancel = vi.fn()
+    const onUpdateVisible = vi.fn()
+    const onUpdateValue = vi.fn()
+    const wrapper = mount(VDateField, {
+      props: {
+        'value': '2026-01-31',
+        'visible': true,
+        'minYear': 2026,
+        'maxYear': 2026,
+        onConfirm,
+        onCancel,
+        'onUpdate:visible': onUpdateVisible,
+        'onUpdate:value': onUpdateValue,
+      },
+    })
+
+    await wrapper.findAll('.varo-picker__column')[1].findAll('.varo-picker__option')[1].trigger('click')
+    expect(onUpdateValue).not.toHaveBeenCalled()
+    await wrapper.get('.varo-picker__confirm').trigger('click')
+    expect(onUpdateValue).toHaveBeenCalledWith('2026-02-28')
+    expect(onConfirm).toHaveBeenCalledWith('2026-02-28')
+    expect(onUpdateVisible).toHaveBeenLastCalledWith(false)
+    await wrapper.get('.varo-picker__cancel').trigger('click')
+    expect(onCancel).toHaveBeenCalledTimes(1)
+    expect(onUpdateVisible).toHaveBeenLastCalledWith(false)
+    wrapper.unmount()
+  })
+
   it('hydrates cascader selections from controlled values', async () => {
     const wrapper = mount(VCascader, {
       props: {
diff --git a/packages/ui-weapp/tests/base-kit-missing.test.ts b/packages/ui-weapp/tests/base-kit-missing.test.ts
index 9fc84be0..e76be359 100644
--- a/packages/ui-weapp/tests/base-kit-missing.test.ts
+++ b/packages/ui-weapp/tests/base-kit-missing.test.ts
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
 import { VLoading } from '../src/loading'
 import { VSwitch } from '../src/switch'
-import { VToast } from '../src/toast'
+import { VToast, VToastRegion } from '../src/toast'
 
 describe('ui-weapp missing base kit components', () => {
   it('toggles VSwitch values', async () => {
@@ -40,6 +41,7 @@ describe('ui-weapp missing base kit components', () => {
 
   it('renders controlled VToast feedback', async () => {
     const onUpdate = vi.fn()
+    const onAction = vi.fn()
     const wrapper = mount(VToast, {
       props: {
         'visible': true,
@@ -48,6 +50,10 @@ describe('ui-weapp missing base kit components', () => {
         'position': 'top',
         'closeable': true,
         'closeLabel': '关闭保存通知',
+        'title': '设置已保存',
+        'actionText': '查看',
+        'actionLabel': '查看保存结果',
+        'onAction': onAction,
         'onUpdate:visible': onUpdate,
       },
     })
@@ -62,9 +68,29 @@ describe('ui-weapp missing base kit components', () => {
     expect(toast.attributes('aria-live')).toBe('polite')
     expect(toast.get('.varo-toast__icon svg').attributes('viewBox')).toBe('0 0 24 24')
     expect(toast.get('.varo-toast__close').attributes('aria-label')).toBe('关闭保存通知')
+    expect(toast.get('.varo-toast__title').text()).toBe('设置已保存')
+    expect(toast.get('.varo-toast__action').attributes('aria-label')).toBe('查看保存结果')
 
+    await toast.get('.varo-toast__action').trigger('click')
+    expect(onAction).toHaveBeenCalledTimes(1)
     await wrapper.get('.varo-toast__close').trigger('click')
 
     expect(onUpdate).toHaveBeenCalledWith(false)
   })
+
+  it('lays out controlled toasts inside an inline region', () => {
+    const wrapper = mount(VToastRegion, {
+      props: {
+        inline: true,
+        position: 'top',
+      },
+      slots: {
+        default: () => h(VToast, { message: '同步完成', type: 'success', visible: true }),
+      },
+    })
+
+    expect(wrapper.attributes('data-inline')).toBe('true')
+    expect(wrapper.attributes('data-position')).toBe('top')
+    expect(wrapper.get('.varo-toast').text()).toContain('同步完成')
+  })
 })
diff --git a/packages/ui-weapp/tests/form-controls.test.ts b/packages/ui-weapp/tests/form-controls.test.ts
index 9629c6fc..6b7cee1c 100644
--- a/packages/ui-weapp/tests/form-controls.test.ts
+++ b/packages/ui-weapp/tests/form-controls.test.ts
@@ -37,9 +37,13 @@ describe('ui-weapp form controls', () => {
         ],
       },
     })
+    const radios = radio.findAll('.varo-radio')
+    expect(radios[0].attributes('aria-checked')).toBe('true')
+    expect(radios[1].attributes('aria-checked')).toBe('false')
+    expect(radios.every(item => item.find('.varo-radio__dot').exists())).toBe(true)
 
     await checkbox.findAll('.varo-checkbox')[1].trigger('click')
-    await radio.findAll('.varo-radio')[1].trigger('click')
+    await radios[1].trigger('click')
 
     expect(checkboxUpdate).toHaveBeenCalledWith(['apple', 'pear'])
     expect(radioUpdate).toHaveBeenCalledWith('alipay')
@@ -51,6 +55,9 @@ describe('ui-weapp form controls', () => {
     const rangeUpdate = vi.fn()
     const number = mount(VInputNumber, {
       props: {
+        'decreaseAriaLabel': '减少数量',
+        'increaseAriaLabel': '增加数量',
+        'inputAriaLabel': '数量',
         'max': 5,
         'min': 1,
         'value': 4,
@@ -71,6 +78,12 @@ describe('ui-weapp form controls', () => {
       },
     })
 
+    expect(number.get('.varo-input-number__minus .varo-icon').attributes('data-name')).toBe('minus')
+    expect(number.get('.varo-input-number__plus .varo-icon').attributes('data-name')).toBe('plus')
+    expect(number.get('.varo-input-number__minus').attributes('aria-label')).toBe('减少数量')
+    expect(number.get('.varo-input-number__input').attributes('aria-label')).toBe('数量')
+    expect(number.get('.varo-input-number__plus').attributes('aria-label')).toBe('增加数量')
+
     await number.get('.varo-input-number__plus').trigger('click')
     await rate.findAll('.varo-rate__item')[2].trigger('click')
     await range.get('input').setValue('6')
diff --git a/packages/ui-weapp/tests/input.test.ts b/packages/ui-weapp/tests/input.test.ts
index 4ffcca0d..9c1e7d9d 100644
--- a/packages/ui-weapp/tests/input.test.ts
+++ b/packages/ui-weapp/tests/input.test.ts
@@ -8,8 +8,8 @@ describe('ui-weapp input', () => {
       props: {
         size: 'sm',
         invalid: true,
-        defaultValue: 'hello'
-      }
+        defaultValue: 'hello',
+      },
     })
 
     expect(wrapper.attributes('data-invalid')).toBe('true')
@@ -22,21 +22,22 @@ describe('ui-weapp input', () => {
     const onUpdateValue = vi.fn()
     const wrapper = mount(VInput, {
       props: {
-        defaultValue: 'Varo',
-        maxLength: 6,
-        showWordLimit: true,
-        clearable: true,
-        clearTrigger: 'always',
-        prefixIcon: '#',
-        suffixIcon: 'ok',
-        'onUpdate:value': onUpdateValue
-      }
+        'defaultValue': 'Varo',
+        'maxLength': 6,
+        'showWordLimit': true,
+        'clearable': true,
+        'clearTrigger': 'always',
+        'prefixIcon': '#',
+        'suffixIcon': 'ok',
+        'onUpdate:value': onUpdateValue,
+      },
     })
 
     expect(wrapper.get('.varo-input__prefix').text()).toBe('#')
     expect(wrapper.get('.varo-input__suffix').text()).toBe('ok')
     expect(wrapper.get('.varo-input__word-limit').text()).toBe('4/6')
-
+    expect(wrapper.attributes('data-type')).toBe('text')
+    expect(wrapper.get('.varo-input__clear .varo-icon').attributes('data-name')).toBe('danger')
     await wrapper.get('.varo-input__clear').trigger('click')
 
     expect(onUpdateValue).toHaveBeenCalledWith('')
diff --git a/packages/ui-weapp/tests/p0-components.test.ts b/packages/ui-weapp/tests/p0-components.test.ts
index 6de65ff8..3b619c24 100644
--- a/packages/ui-weapp/tests/p0-components.test.ts
+++ b/packages/ui-weapp/tests/p0-components.test.ts
@@ -12,6 +12,7 @@ import { VList } from '../src/list'
 import { VNoticeBar } from '../src/notice-bar'
 import { VPopoverContent, VPopoverRoot, VPopoverTrigger } from '../src/popover'
 import { VProgress } from '../src/progress'
+import { VPullRefresh } from '../src/pull-refresh'
 import { VSafeArea } from '../src/safe-area'
 import { VSkeleton } from '../src/skeleton'
 import { VSteps } from '../src/steps'
@@ -169,6 +170,21 @@ describe('P0 interaction components', () => {
     expect(wrapper.attributes('data-open')).toBe('left')
   })
 
+  it('requests native pull refresh only while idle and enabled', async () => {
+    const wrapper = mount(VPullRefresh, {
+      props: { loading: false },
+      slots: { default: () => h('view', 'Rows') },
+    })
+
+    await wrapper.trigger('refresherrefresh')
+    expect(wrapper.emitted('refresh')).toHaveLength(1)
+    await wrapper.setProps({ loading: true })
+    await wrapper.trigger('refresherrefresh')
+    expect(wrapper.emitted('refresh')).toHaveLength(1)
+    expect(wrapper.attributes('aria-busy')).toBe('true')
+    wrapper.unmount()
+  })
+
   it('requests initial list data once and supports retry feedback', async () => {
     const onLoad = vi.fn()
     const wrapper = mount(VList, {
diff --git a/packages/ui-weapp/tests/select.test.ts b/packages/ui-weapp/tests/select.test.ts
index 74eda43a..36b4bb0e 100644
--- a/packages/ui-weapp/tests/select.test.ts
+++ b/packages/ui-weapp/tests/select.test.ts
@@ -153,6 +153,7 @@ describe('ui-weapp select', () => {
     expect(wrapper.get('.varo-select__control').element.tagName).toBe('BUTTON')
     expect(wrapper.get('.varo-select__control').find('.varo-select__clear').exists()).toBe(false)
     expect(wrapper.get('.varo-select__clear').element.tagName).toBe('BUTTON')
+    expect(wrapper.get('.varo-select__clear .varo-icon').attributes('data-name')).toBe('danger')
 
     await wrapper.get('.varo-select__trigger').trigger('click')
     expect(wrapper.findAll('.varo-select__option').every(option => option.attributes('role') === 'option')).toBe(true)
diff --git a/packages/weapp-web/src/runtime/native-elements.css b/packages/weapp-web/src/runtime/native-elements.css
index 89693e91..2be757b9 100644
--- a/packages/weapp-web/src/runtime/native-elements.css
+++ b/packages/weapp-web/src/runtime/native-elements.css
@@ -138,6 +138,18 @@ wx-image[data-native-image-mode='heightFix'] > .varo-native-image__control {
   width: auto;
 }
 
+wx-canvas {
+  box-sizing: border-box;
+  display: block;
+  min-width: 0;
+}
+
+wx-canvas > .varo-native-canvas__control {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 wx-scroll-view {
   box-sizing: border-box;
   display: block;
diff --git a/packages/weapp-web/src/runtime/native-elements.ts b/packages/weapp-web/src/runtime/native-elements.ts
index 6bf19de8..58c374d5 100644
--- a/packages/weapp-web/src/runtime/native-elements.ts
+++ b/packages/weapp-web/src/runtime/native-elements.ts
@@ -18,6 +18,7 @@ type NativeTag
     | 'input'
     | 'textarea'
     | 'label'
+    | 'canvas'
     | 'image'
     | 'scroll-view'
     | 'rich-text'
@@ -42,14 +43,19 @@ interface TextControlState extends ManagedState {
   composing: boolean
 }
 
-interface ButtonState extends ManagedState {
+interface HoverState extends ManagedState {
   component: NativeComponent
-  control: HTMLButtonElement
-  host: HTMLElement
   hoverActive: boolean
-  hoverTokens: string[]
   hoverStartTimer: number | undefined
   hoverStayTimer: number | undefined
+  hoverTokens: string[]
+  isDisabled: () => boolean
+}
+
+interface ButtonState extends ManagedState {
+  component: NativeComponent
+  control: HTMLButtonElement
+  host: HTMLElement
 }
 
 interface LabelState extends ManagedState {
@@ -64,6 +70,15 @@ interface ImageState extends ManagedState {
   source: string | undefined
 }
 
+interface CanvasState extends ManagedState {
+  activePointerId: number | undefined
+  canvasId: string
+  component: NativeComponent
+  control: HTMLCanvasElement
+  host: HTMLElement
+  resizeObserver: ResizeObserver | undefined
+}
+
 interface ScrollState extends ManagedState {
   component: NativeComponent
   host: HTMLElement
@@ -71,6 +86,9 @@ interface ScrollState extends ManagedState {
   lastTop: number
   atLower: boolean
   atUpper: boolean
+  refreshDistance: number
+  refreshPointerId: number | undefined
+  refreshStartY: number | undefined
 }
 
 interface RichTextState extends ManagedState {
@@ -117,7 +135,11 @@ type RichTextTag = 'br' | 'code' | 'del' | 'em' | 'ins' | 'mark' | 'span' | 'str
 
 const textControlStates = new WeakMap<NativeComponent, TextControlState>()
 const buttonStates = new WeakMap<NativeComponent, ButtonState>()
+const hoverStates = new WeakMap<NativeComponent, HoverState>()
+const viewTransitionCleanups = new WeakMap<NativeComponent, () => void>()
 const labelStates = new WeakMap<NativeComponent, LabelState>()
+const canvasStates = new WeakMap<NativeComponent, CanvasState>()
+const canvasStatesById = new Map<string, Set<CanvasState>>()
 const imageStates = new WeakMap<NativeComponent, ImageState>()
 const scrollStates = new WeakMap<NativeComponent, ScrollState>()
 const richTextStates = new WeakMap<NativeComponent, RichTextState>()
@@ -127,27 +149,32 @@ const robotChatSessions = new Map<string, RobotChatState>()
 let activeRobotChat: RobotChatElementState | undefined
 
 const semanticProperties = {
-  ariaBusy: { type: String, value: '' },
-  ariaChecked: { type: String, value: '' },
-  ariaControls: { type: String, value: '' },
-  ariaDescribedby: { type: String, value: '' },
-  ariaExpanded: { type: String, value: '' },
-  ariaHidden: { type: String, value: '' },
-  ariaInvalid: { type: String, value: '' },
-  ariaLabel: { type: String, value: '' },
-  ariaLabelledby: { type: String, value: '' },
-  ariaLive: { type: String, value: '' },
-  ariaPressed: { type: String, value: '' },
+  ariaAtomic: { type: null, value: '' },
+  ariaBusy: { type: null, value: '' },
+  ariaChecked: { type: null, value: '' },
+  ariaControls: { type: null, value: '' },
+  ariaDisabled: { type: null, value: '' },
+  ariaDescribedby: { type: null, value: '' },
+  ariaExpanded: { type: null, value: '' },
+  ariaHidden: { type: null, value: '' },
+  ariaInvalid: { type: null, value: '' },
+  ariaLabel: { type: null, value: '' },
+  ariaLabelledby: { type: null, value: '' },
+  ariaLive: { type: null, value: '' },
+  ariaPressed: { type: null, value: '' },
+  ariaReadonly: { type: null, value: '' },
   hidden: { type: Boolean, value: false },
-  role: { type: String, value: '' },
-  tabindex: { type: String, value: '' },
-  title: { type: String, value: '' },
+  role: { type: null, value: '' },
+  tabindex: { type: null, value: '' },
+  title: { type: null, value: '' },
 }
 
 const semanticAttributes = [
+  ['ariaAtomic', 'aria-atomic'],
   ['ariaBusy', 'aria-busy'],
   ['ariaChecked', 'aria-checked'],
   ['ariaControls', 'aria-controls'],
+  ['ariaDisabled', 'aria-disabled'],
   ['ariaDescribedby', 'aria-describedby'],
   ['ariaExpanded', 'aria-expanded'],
   ['ariaHidden', 'aria-hidden'],
@@ -156,11 +183,18 @@ const semanticAttributes = [
   ['ariaLabelledby', 'aria-labelledby'],
   ['ariaLive', 'aria-live'],
   ['ariaPressed', 'aria-pressed'],
+  ['ariaReadonly', 'aria-readonly'],
   ['role', 'role'],
   ['tabindex', 'tabindex'],
   ['title', 'title'],
 ] as const
 
+const hoverProperties = {
+  hoverClass: { type: null, value: '' },
+  hoverStartTime: { type: null, value: 20 },
+  hoverStayTime: { type: null, value: 70 },
+}
+
 const inputProperties = {
   ...semanticProperties,
   adjustPosition: { type: Boolean, value: true },
@@ -169,39 +203,39 @@ const inputProperties = {
   autoFocus: { type: Boolean, value: false },
   autoHeight: { type: Boolean, value: false },
   confirmHold: { type: Boolean, value: false },
-  confirmType: { type: String, value: '' },
+  confirmType: { type: null, value: '' },
   controlled: { type: Boolean, value: false },
-  cursor: { type: Number, value: -1 },
-  cursorSpacing: { type: Number, value: 0 },
+  cursor: { type: null, value: -1 },
+  cursorSpacing: { type: null, value: 0 },
   disableDefaultPadding: { type: Boolean, value: false },
   disabled: { type: Boolean, value: false },
   fixed: { type: Boolean, value: false },
   focus: { type: Boolean, value: false },
-  form: { type: String, value: '' },
+  form: { type: null, value: '' },
   holdKeyboard: { type: Boolean, value: false },
   ignoreCompositionEvent: { type: Boolean, value: true },
-  inputmode: { type: String, value: '' },
-  maxlength: { type: Number, value: -1 },
-  name: { type: String, value: '' },
+  inputmode: { type: null, value: '' },
+  maxlength: { type: null, value: -1 },
+  name: { type: null, value: '' },
   nickNameReview: { type: Boolean, value: false },
   password: { type: Boolean, value: false },
-  placeholder: { type: String, value: '' },
-  placeholderClass: { type: String, value: '' },
-  placeholderStyle: { type: String, value: '' },
+  placeholder: { type: null, value: '' },
+  placeholderClass: { type: null, value: '' },
+  placeholderStyle: { type: null, value: '' },
   randomNumber: { type: Boolean, value: false },
   readOnly: { type: Boolean, value: false },
   readonly: { type: Boolean, value: false },
-  safePasswordCertPath: { type: String, value: '' },
-  safePasswordCustomHash: { type: String, value: '' },
-  safePasswordLength: { type: Number, value: 0 },
-  safePasswordNonce: { type: String, value: '' },
-  safePasswordSalt: { type: String, value: '' },
-  safePasswordTimeStamp: { type: Number, value: 0 },
-  selectionEnd: { type: Number, value: -1 },
-  selectionStart: { type: Number, value: -1 },
+  safePasswordCertPath: { type: null, value: '' },
+  safePasswordCustomHash: { type: null, value: '' },
+  safePasswordLength: { type: null, value: 0 },
+  safePasswordNonce: { type: null, value: '' },
+  safePasswordSalt: { type: null, value: '' },
+  safePasswordTimeStamp: { type: null, value: 0 },
+  selectionEnd: { type: null, value: -1 },
+  selectionStart: { type: null, value: -1 },
   showConfirmBar: { type: Boolean, value: true },
-  type: { type: String, value: 'text' },
-  value: { type: String, value: '' },
+  type: { type: null, value: 'text' },
+  value: { type: null, value: '' },
 }
 
 const richTextTags: Record<RichTextTag, true> = {
@@ -248,12 +282,21 @@ function property(component: NativeComponent, name: string): unknown {
 
 function stringProperty(component: NativeComponent, name: string): string {
   const value = property(component, name)
-  return typeof value === 'string' ? value : ''
+  if (typeof value === 'string') { return value }
+  if (typeof value === 'boolean' || (typeof value === 'number' && Number.isFinite(value))) {
+    return String(value)
+  }
+  return ''
 }
 
 function numberProperty(component: NativeComponent, name: string, fallback = 0): number {
   const value = property(component, name)
-  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
+  if (typeof value === 'number') { return Number.isFinite(value) ? value : fallback }
+  if (typeof value === 'string' && value.trim()) {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) { return parsed }
+  }
+  return fallback
 }
 
 function booleanProperty(component: NativeComponent, name: string): boolean {
@@ -346,6 +389,13 @@ function imageElement(component: NativeComponent, options: NativeElementRegistra
   return undefined
 }
 
+function canvasElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLCanvasElement !== 'undefined' && backend instanceof HTMLCanvasElement) { return backend }
+  reportBackendError(options, 'canvas', 'canvas')
+  return undefined
+}
+
 function richTextElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
   const backend = internalBackendElement(component)
   if (typeof HTMLElement !== 'undefined' && backend instanceof HTMLElement) { return backend }
@@ -635,6 +685,7 @@ function syncTextControlConfig(
   if (!isTextControlStateCurrent(state)) { return }
   const { component, control, host } = state
   syncSemanticAttributes(component, control)
+  host.hidden = booleanProperty(component, 'hidden')
   setOptionalAttribute(control, 'name', stringProperty(component, 'name'))
   setOptionalAttribute(control, 'form', stringProperty(component, 'form'))
   control.placeholder = stringProperty(component, 'placeholder')
@@ -823,23 +874,23 @@ function isButtonStateCurrent(state: ButtonState) {
   return buttonStates.get(state.component) === state
 }
 
-function clearButtonTimer(state: ButtonState, timer: 'hoverStartTimer' | 'hoverStayTimer') {
+function clearHoverTimer(state: HoverState, timer: 'hoverStartTimer' | 'hoverStayTimer') {
   const handle = state[timer]
   if (handle !== undefined) { window.clearTimeout(handle) }
   state[timer] = undefined
 }
 
-function setButtonHover(state: ButtonState, active: boolean) {
-  if (!isButtonStateCurrent(state) || state.hoverActive === active) { return }
+function setHover(state: HoverState, active: boolean) {
+  if (hoverStates.get(state.component) !== state || state.hoverActive === active) { return }
   state.hoverActive = active
   for (const token of state.hoverTokens) {
     state.component.classList?.toggle(token, active, STYLE_SEGMENT_TEMP_EXTRA)
   }
 }
 
-function scheduleButtonHover(state: ButtonState, active: boolean) {
-  clearButtonTimer(state, 'hoverStartTimer')
-  clearButtonTimer(state, 'hoverStayTimer')
+function scheduleHover(state: HoverState, active: boolean) {
+  clearHoverTimer(state, 'hoverStartTimer')
+  clearHoverTimer(state, 'hoverStayTimer')
   const delay = Math.max(0, numberProperty(
     state.component,
     active ? 'hoverStartTime' : 'hoverStayTime',
@@ -848,10 +899,63 @@ function scheduleButtonHover(state: ButtonState, active: boolean) {
   const timer = active ? 'hoverStartTimer' : 'hoverStayTimer'
   state[timer] = window.setTimeout(() => {
     state[timer] = undefined
-    if (isButtonStateCurrent(state)) { setButtonHover(state, active) }
+    if (hoverStates.get(state.component) === state) { setHover(state, active) }
   }, delay)
 }
 
+function hoverTokens(component: NativeComponent) {
+  return stringProperty(component, 'hoverClass')
+    .split(/\s+/u)
+    .filter(token => token && token !== 'none')
+}
+
+function syncHover(component: NativeComponent) {
+  const state = hoverStates.get(component)
+  if (!state) { return }
+  const nextHoverTokens = hoverTokens(component)
+  if (nextHoverTokens.join('\0') !== state.hoverTokens.join('\0')) {
+    setHover(state, false)
+    state.hoverTokens = nextHoverTokens
+  }
+  if (state.isDisabled()) {
+    clearHoverTimer(state, 'hoverStartTimer')
+    clearHoverTimer(state, 'hoverStayTimer')
+    setHover(state, false)
+  }
+}
+
+function detachHover(component: NativeComponent) {
+  const state = hoverStates.get(component)
+  if (!state) { return }
+  clearHoverTimer(state, 'hoverStartTimer')
+  clearHoverTimer(state, 'hoverStayTimer')
+  setHover(state, false)
+  hoverStates.delete(component)
+  cleanState(state)
+}
+
+function attachHover(component: NativeComponent, target: HTMLElement, isDisabled: () => boolean) {
+  detachHover(component)
+  const state: HoverState = {
+    cleanups: [],
+    component,
+    hoverActive: false,
+    hoverStartTimer: undefined,
+    hoverStayTimer: undefined,
+    hoverTokens: [],
+    isDisabled,
+    reported: new Set(),
+  }
+  hoverStates.set(component, state)
+  addDomListener(state, target, 'pointerdown', () => {
+    if (!state.isDisabled()) { scheduleHover(state, true) }
+  }, true)
+  addDomListener(state, target, 'pointerup', () => scheduleHover(state, false), true)
+  addDomListener(state, target, 'pointercancel', () => scheduleHover(state, false), true)
+  addDomListener(state, target, 'pointerleave', () => scheduleHover(state, false), true)
+  syncHover(component)
+}
+
 function syncButton(state: ButtonState, options: NativeElementRegistrationOptions) {
   if (!isButtonStateCurrent(state)) { return }
   const { component, control } = state
@@ -874,26 +978,13 @@ function syncButton(state: ButtonState, options: NativeElementRegistrationOption
     )
   }
 
-  const nextHoverTokens = stringProperty(component, 'hoverClass')
-    .split(/\s+/u)
-    .filter(token => token && token !== 'none')
-  if (nextHoverTokens.join('\0') !== state.hoverTokens.join('\0')) {
-    setButtonHover(state, false)
-    state.hoverTokens = nextHoverTokens
-  }
-  if (control.disabled) {
-    clearButtonTimer(state, 'hoverStartTimer')
-    clearButtonTimer(state, 'hoverStayTimer')
-    setButtonHover(state, false)
-  }
+  syncHover(component)
 }
 
 function detachButton(component: NativeComponent) {
   const state = buttonStates.get(component)
   if (!state) { return }
-  clearButtonTimer(state, 'hoverStartTimer')
-  clearButtonTimer(state, 'hoverStayTimer')
-  setButtonHover(state, false)
+  detachHover(component)
   buttonStates.delete(component)
   cleanState(state)
 }
@@ -909,25 +1000,16 @@ function attachButton(component: NativeComponent, options: NativeElementRegistra
     component,
     control,
     host,
-    hoverActive: false,
-    hoverStartTimer: undefined,
-    hoverStayTimer: undefined,
-    hoverTokens: [],
     reported: new Set(),
   }
   buttonStates.set(component, state)
+  attachHover(component, control, () => control.disabled)
 
   addDomListener(state, control, 'click', (event) => {
     if (!isButtonStateCurrent(state) || !booleanProperty(component, 'disabled')) { return }
     event.preventDefault()
     event.stopImmediatePropagation()
   }, true)
-  addDomListener(state, control, 'pointerdown', () => {
-    if (isButtonStateCurrent(state) && !control.disabled) { scheduleButtonHover(state, true) }
-  }, true)
-  addDomListener(state, control, 'pointerup', () => scheduleButtonHover(state, false), true)
-  addDomListener(state, control, 'pointercancel', () => scheduleButtonHover(state, false), true)
-  addDomListener(state, control, 'pointerleave', () => scheduleButtonHover(state, false), true)
 
   syncButton(state, options)
 }
@@ -1068,6 +1150,210 @@ function detachImage(component: NativeComponent) {
   cleanState(state)
 }
 
+function addCanvasRegistration(state: CanvasState, canvasId: string) {
+  const states = canvasStatesById.get(canvasId) ?? new Set<CanvasState>()
+  states.add(state)
+  canvasStatesById.set(canvasId, states)
+}
+
+function removeCanvasRegistration(state: CanvasState, canvasId: string) {
+  const states = canvasStatesById.get(canvasId)
+  if (!states) { return }
+  states.delete(state)
+  if (states.size === 0) {
+    canvasStatesById.delete(canvasId)
+  }
+}
+
+function canvasOwnerMatches(state: CanvasState, owner: unknown) {
+  if (owner === null || (typeof owner !== 'object' && typeof owner !== 'function')) {
+    return false
+  }
+  const hostNode = state.component.ownerShadowRoot?.getHostNode()
+  const methodCaller = (hostNode as { getMethodCaller?: () => unknown } | undefined)?.getMethodCaller?.()
+  const ownerRecord = owner as Record<string, unknown>
+  return owner === hostNode || owner === methodCaller || ownerRecord._$ === hostNode
+}
+
+function resolveCanvasState(canvasId: string, owner?: unknown): CanvasState | undefined {
+  const states = canvasStatesById.get(canvasId)
+  if (!states || states.size === 0) { return undefined }
+  const matches = owner === undefined
+    ? [...states]
+    : [...states].filter(state => canvasOwnerMatches(state, owner))
+  if (matches.length > 1) {
+    throw new Error(`Web 兼容预览中的 canvas-id "${canvasId}" 在当前 owner 内不唯一`)
+  }
+  return matches[0]
+}
+
+function syncCanvas(state: CanvasState) {
+  const { component, control, host } = state
+  const nextCanvasId = stringProperty(component, 'canvasId')
+  if (state.canvasId && state.canvasId !== nextCanvasId) {
+    removeCanvasRegistration(state, state.canvasId)
+  }
+  state.canvasId = nextCanvasId
+  if (nextCanvasId) {
+    addCanvasRegistration(state, nextCanvasId)
+  }
+  syncSemanticAttributes(component, control)
+  const width = Math.max(1, Math.round(host.clientWidth || 300))
+  const height = Math.max(1, Math.round(host.clientHeight || 150))
+  const ratio = Math.max(1, window.devicePixelRatio || 1)
+  const pixelWidth = Math.round(width * ratio)
+  const pixelHeight = Math.round(height * ratio)
+  if (control.width !== pixelWidth || control.height !== pixelHeight) {
+    control.width = pixelWidth
+    control.height = pixelHeight
+    control.getContext('2d')?.setTransform(ratio, 0, 0, ratio, 0, 0)
+  }
+}
+
+function detachCanvas(component: NativeComponent) {
+  const state = canvasStates.get(component)
+  if (!state) { return }
+  canvasStates.delete(component)
+  if (state.canvasId) {
+    removeCanvasRegistration(state, state.canvasId)
+  }
+  state.resizeObserver?.disconnect()
+  cleanState(state)
+}
+
+function canvasTouch(state: CanvasState, event: PointerEvent) {
+  const rect = state.host.getBoundingClientRect()
+  return {
+    clientX: event.clientX,
+    clientY: event.clientY,
+    identifier: event.pointerId,
+    x: Math.min(rect.width, Math.max(0, event.clientX - rect.left)),
+    y: Math.min(rect.height, Math.max(0, event.clientY - rect.top)),
+  }
+}
+
+function setCanvasTouches(
+  event: PointerEvent,
+  touches: ReturnType<typeof canvasTouch>[],
+  changedTouches: ReturnType<typeof canvasTouch>[],
+) {
+  Object.defineProperties(event, {
+    changedTouches: { configurable: true, value: changedTouches },
+    touches: { configurable: true, value: touches },
+  })
+}
+
+function releaseCanvasPointer(state: CanvasState, event: PointerEvent, type: 'touchcancel' | 'touchend') {
+  if (state.activePointerId !== event.pointerId) { return }
+  const point = canvasTouch(state, event)
+  state.activePointerId = undefined
+  setCanvasTouches(event, [], [point])
+  try {
+    state.host.releasePointerCapture?.(event.pointerId)
+  }
+  catch {
+    // Synthetic and interrupted pointers may not own capture.
+  }
+  state.component.triggerEvent(type, { changedTouches: [point], touches: [] }, {
+    bubbles: false,
+    composed: false,
+    originalEvent: event,
+  })
+}
+
+function attachCanvas(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachCanvas(component)
+  const host = hostElement(component, 'canvas', options)
+  const control = canvasElement(component, options)
+  if (!host || !control) { return }
+  const state: CanvasState = {
+    activePointerId: undefined,
+    canvasId: '',
+    cleanups: [],
+    component,
+    control,
+    host,
+    reported: new Set(),
+    resizeObserver: undefined,
+  }
+  canvasStates.set(component, state)
+  if (typeof ResizeObserver !== 'undefined') {
+    state.resizeObserver = new ResizeObserver(() => syncCanvas(state))
+    state.resizeObserver.observe(host)
+  }
+  addDomListener(state, host, 'pointerdown', (nativeEvent) => {
+    const event = nativeEvent as PointerEvent
+    if (state.activePointerId !== undefined) { return }
+    state.activePointerId = event.pointerId
+    const point = canvasTouch(state, event)
+    setCanvasTouches(event, [point], [point])
+    try {
+      host.setPointerCapture?.(event.pointerId)
+    }
+    catch {
+      // Synthetic pointer events do not own browser capture.
+    }
+    component.triggerEvent('touchstart', { changedTouches: [point], touches: [point] }, {
+      bubbles: false,
+      composed: false,
+      originalEvent: event,
+    })
+  }, true)
+  addDomListener(state, host, 'pointermove', (nativeEvent) => {
+    const event = nativeEvent as PointerEvent
+    if (state.activePointerId !== event.pointerId) { return }
+    if (booleanProperty(component, 'disableScroll')) { event.preventDefault() }
+    const point = canvasTouch(state, event)
+    setCanvasTouches(event, [point], [point])
+    component.triggerEvent('touchmove', { changedTouches: [point], touches: [point] }, {
+      bubbles: false,
+      composed: false,
+      originalEvent: event,
+    })
+  }, true)
+  addDomListener(state, host, 'pointerup', event => releaseCanvasPointer(state, event as PointerEvent, 'touchend'), true)
+  addDomListener(state, host, 'pointercancel', event => releaseCanvasPointer(state, event as PointerEvent, 'touchcancel'), true)
+  syncCanvas(state)
+}
+
+export function findPreviewSelectorElement(selector: string, owner?: unknown): HTMLElement | null {
+  const canvasId = /^#([\w-]+)$/.exec(selector)?.[1]
+  if (canvasId) {
+    const canvasState = resolveCanvasState(canvasId, owner)
+    if (canvasState) {
+      return canvasState.host
+    }
+  }
+  return document.querySelector<HTMLElement>(selector)
+}
+
+export function createPreviewCanvasContext(canvasId: string, owner?: unknown) {
+  const context = resolveCanvasState(canvasId, owner)?.control.getContext('2d')
+  if (!context) {
+    throw new Error(`Web 兼容预览找不到 canvas: ${canvasId}`)
+  }
+  const complete = (reserveOrCallback?: boolean | (() => void), callback?: () => void) => {
+    const handler = typeof reserveOrCallback === 'function' ? reserveOrCallback : callback
+    handler?.()
+  }
+  return {
+    arc: (x: number, y: number, radius: number, startAngle: number, endAngle: number) => context.arc(x, y, radius, startAngle, endAngle),
+    beginPath: () => context.beginPath(),
+    clearRect: (x: number, y: number, width: number, height: number) => context.clearRect(x, y, width, height),
+    draw: complete,
+    fill: () => context.fill(),
+    fillRect: (x: number, y: number, width: number, height: number) => context.fillRect(x, y, width, height),
+    lineTo: (x: number, y: number) => context.lineTo(x, y),
+    moveTo: (x: number, y: number) => context.moveTo(x, y),
+    setFillStyle: (value: string) => { context.fillStyle = value },
+    setLineCap: (value: CanvasLineCap) => { context.lineCap = value },
+    setLineJoin: (value: CanvasLineJoin) => { context.lineJoin = value },
+    setLineWidth: (value: number) => { context.lineWidth = value },
+    setStrokeStyle: (value: string) => { context.strokeStyle = value },
+    stroke: () => context.stroke(),
+  }
+}
+
 function attachImage(component: NativeComponent, options: NativeElementRegistrationOptions) {
   detachImage(component)
   const host = hostElement(component, 'image', options)
@@ -1108,9 +1394,20 @@ function isScrollStateCurrent(state: ScrollState) {
 function syncScrollConfig(state: ScrollState) {
   if (!isScrollStateCurrent(state)) { return }
   const { component, host } = state
+  const refresherEnabled = booleanProperty(component, 'refresherEnabled')
+  const refresherTriggered = booleanProperty(component, 'refresherTriggered')
   host.dataset.nativeScrollX = String(booleanProperty(component, 'scrollX'))
   host.dataset.nativeScrollY = String(booleanProperty(component, 'scrollY'))
   host.dataset.nativeScrollbar = booleanProperty(component, 'showScrollbar') ? 'visible' : 'hidden'
+  host.dataset.nativeRefresherEnabled = String(refresherEnabled)
+  host.dataset.nativeRefresherTriggered = String(refresherTriggered)
+  if (refresherTriggered) {
+    host.dataset.nativeRefresherState = 'loading'
+  }
+  else if (state.refreshPointerId === undefined) {
+    host.dataset.nativeRefresherState = 'idle'
+    host.dataset.nativeRefresherDistance = '0'
+  }
 }
 
 function syncScrollPosition(state: ScrollState) {
@@ -1123,6 +1420,46 @@ function syncScrollPosition(state: ScrollState) {
   })
 }
 
+function resetScrollRefresh(state: ScrollState) {
+  state.refreshDistance = 0
+  state.refreshPointerId = undefined
+  state.refreshStartY = undefined
+  state.host.dataset.nativeRefresherDistance = '0'
+  state.host.dataset.nativeRefresherState = booleanProperty(state.component, 'refresherTriggered') ? 'loading' : 'idle'
+}
+
+function releaseScrollPointerCapture(state: ScrollState, pointerId: number) {
+  try {
+    state.host.releasePointerCapture?.(pointerId)
+  }
+  catch {
+    // The pointer may already have been released by the browser.
+  }
+}
+
+function cancelScrollRefresh(state: ScrollState, event: Event) {
+  const pointer = event as PointerEvent
+  if (state.refreshPointerId === undefined || state.refreshPointerId !== pointer.pointerId) { return }
+  const pointerId = state.refreshPointerId
+  resetScrollRefresh(state)
+  releaseScrollPointerCapture(state, pointerId)
+}
+
+function releaseScrollRefresh(state: ScrollState, event: Event) {
+  const pointer = event as PointerEvent
+  if (state.refreshPointerId === undefined || state.refreshPointerId !== pointer.pointerId) { return }
+  const shouldRefresh = booleanProperty(state.component, 'refresherEnabled')
+    && !booleanProperty(state.component, 'refresherTriggered')
+    && state.host.scrollTop <= 0
+    && state.refreshDistance >= numberProperty(state.component, 'refresherThreshold', 45)
+  const pointerId = state.refreshPointerId
+  resetScrollRefresh(state)
+  releaseScrollPointerCapture(state, pointerId)
+  if (shouldRefresh) {
+    state.component.triggerEvent('refresherrefresh', {}, { bubbles: false, composed: false, originalEvent: event })
+  }
+}
+
 function detachScroll(component: NativeComponent) {
   const state = scrollStates.get(component)
   if (!state) { return }
@@ -1142,6 +1479,9 @@ function attachScroll(component: NativeComponent, options: NativeElementRegistra
     host,
     lastLeft: host.scrollLeft,
     lastTop: host.scrollTop,
+    refreshDistance: 0,
+    refreshPointerId: undefined,
+    refreshStartY: undefined,
     reported: new Set(),
   }
   scrollStates.set(component, state)
@@ -1177,6 +1517,55 @@ function attachScroll(component: NativeComponent, options: NativeElementRegistra
     state.atUpper = upper
     state.atLower = lower
   }, true)
+  addDomListener(state, host, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent
+    if (
+      state.refreshPointerId !== undefined
+      || !booleanProperty(component, 'refresherEnabled')
+      || booleanProperty(component, 'refresherTriggered')
+      || host.scrollTop > 0
+      || pointer.button > 0
+    ) {
+      return
+    }
+    state.refreshPointerId = pointer.pointerId
+    state.refreshStartY = pointer.clientY
+    state.refreshDistance = 0
+    host.dataset.nativeRefresherDistance = '0'
+    host.dataset.nativeRefresherState = 'pulling'
+    try {
+      host.setPointerCapture?.(pointer.pointerId)
+    }
+    catch {
+      // Synthetic preview events do not own an active browser pointer.
+    }
+  }, true)
+  addDomListener(state, host, 'pointermove', (event) => {
+    const pointer = event as PointerEvent
+    if (state.refreshPointerId !== pointer.pointerId || state.refreshStartY === undefined) { return }
+    if (
+      !booleanProperty(component, 'refresherEnabled')
+      || booleanProperty(component, 'refresherTriggered')
+      || host.scrollTop > 0
+    ) {
+      cancelScrollRefresh(state, event)
+      return
+    }
+    const delta = pointer.clientY - state.refreshStartY
+    if (delta <= 0) {
+      state.refreshDistance = 0
+      host.dataset.nativeRefresherDistance = '0'
+      host.dataset.nativeRefresherState = 'pulling'
+      return
+    }
+    event.preventDefault()
+    const threshold = numberProperty(component, 'refresherThreshold', 45)
+    state.refreshDistance = Math.min(delta * 0.5, threshold * 1.5)
+    host.dataset.nativeRefresherDistance = String(Math.round(state.refreshDistance))
+    host.dataset.nativeRefresherState = state.refreshDistance >= threshold ? 'ready' : 'pulling'
+  }, true)
+  addDomListener(state, host, 'pointerup', event => releaseScrollRefresh(state, event), true)
+  addDomListener(state, host, 'pointercancel', event => cancelScrollRefresh(state, event), true)
   syncScrollConfig(state)
   syncScrollPosition(state)
 }
@@ -1575,6 +1964,70 @@ function registerSlotDefinition(
     .general()
 }
 
+function detachViewTransitionEvents(component: NativeComponent) {
+  viewTransitionCleanups.get(component)?.()
+  viewTransitionCleanups.delete(component)
+}
+
+function syncViewTransitionEvents(component: NativeComponent, host: HTMLElement) {
+  if (viewTransitionCleanups.has(component) || !host.hasAttribute('data-wi-transitionend')) { return }
+  const listener = (event: Event) => {
+    if (event.target !== host) { return }
+    const transitionEvent = event as TransitionEvent
+    component.triggerEvent('transitionend', {
+      elapsedTime: transitionEvent.elapsedTime,
+      propertyName: transitionEvent.propertyName,
+      pseudoElement: transitionEvent.pseudoElement,
+    }, { bubbles: false, composed: false, originalEvent: event })
+  }
+  host.addEventListener('transitionend', listener)
+  viewTransitionCleanups.set(component, () => host.removeEventListener('transitionend', listener))
+}
+
+function syncView(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const host = hostElement(component, 'view', options)
+  if (!host) { return }
+  syncSemanticAttributes(component, host)
+  syncViewTransitionEvents(component, host)
+  if (hoverTokens(component).length > 0) {
+    if (hoverStates.has(component)) { syncHover(component) }
+    else { attachHover(component, host, () => false) }
+  }
+  else {
+    detachHover(component)
+  }
+}
+
+function registerViewDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('view')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        ...hoverProperties,
+      },
+      attached() {
+        syncView(this.general(), options)
+      },
+      detached() {
+        const component = this.general()
+        detachHover(component)
+        detachViewTransitionEvents(component)
+      },
+    })
+    .observer('**', function () {
+      syncView(this.general(), options)
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
 function registerButtonDefinition(
   space: glassEasel.ComponentSpace,
   template: glassEasel.template.ComponentTemplate,
@@ -1587,13 +2040,11 @@ function registerButtonDefinition(
       properties: {
         ...semanticProperties,
         disabled: { type: Boolean, value: false },
-        form: { type: String, value: '' },
-        formType: { type: String, value: '' },
-        hoverClass: { type: String, value: '' },
-        hoverStartTime: { type: Number, value: 20 },
-        hoverStayTime: { type: Number, value: 70 },
-        name: { type: String, value: '' },
-        type: { type: String, value: 'button' },
+        form: { type: null, value: '' },
+        formType: { type: null, value: '' },
+        ...hoverProperties,
+        name: { type: null, value: '' },
+        type: { type: null, value: 'button' },
       },
       attached() {
         attachButton(this.general(), options)
@@ -1619,7 +2070,7 @@ function registerTextControlDefinition(
 ) {
   return space
     .define(tag)
-    .options(componentOptions())
+    .options({ ...componentOptions(), reflectToAttributes: false })
     .definition({
       properties: inputProperties,
       attached() {
@@ -1671,6 +2122,37 @@ function registerLabelDefinition(
     .general()
 }
 
+function registerCanvasDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('canvas')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        canvasId: { type: null, value: '' },
+        disableScroll: { type: Boolean, value: false },
+        type: { type: null, value: '' },
+      },
+      attached() {
+        attachCanvas(this.general(), options)
+      },
+      detached() {
+        detachCanvas(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = canvasStates.get(this.general())
+      if (state) { syncCanvas(state) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
 function registerImageDefinition(
   space: glassEasel.ComponentSpace,
   template: glassEasel.template.ComponentTemplate,
@@ -1682,12 +2164,12 @@ function registerImageDefinition(
     .definition({
       properties: {
         ...semanticProperties,
-        alt: { type: String, value: '' },
+        alt: { type: null, value: '' },
         draggable: { type: Boolean, value: false },
         lazyLoad: { type: Boolean, value: false },
-        mode: { type: String, value: 'scaleToFill' },
+        mode: { type: null, value: 'scaleToFill' },
         showMenuByLongpress: { type: Boolean, value: false },
-        src: { type: String, value: '' },
+        src: { type: null, value: '' },
       },
       attached() {
         attachImage(this.general(), options)
@@ -1721,14 +2203,18 @@ function registerScrollDefinition(
       properties: {
         ...semanticProperties,
         enableFlex: { type: Boolean, value: false },
-        lowerThreshold: { type: Number, value: 50 },
-        scrollLeft: { type: Number, value: 0 },
-        scrollTop: { type: Number, value: 0 },
+        lowerThreshold: { type: null, value: 50 },
+        refresherDefaultStyle: { type: null, value: 'black' },
+        refresherEnabled: { type: Boolean, value: false },
+        refresherThreshold: { type: null, value: 45 },
+        refresherTriggered: { type: Boolean, value: false },
+        scrollLeft: { type: null, value: 0 },
+        scrollTop: { type: null, value: 0 },
         scrollWithAnimation: { type: Boolean, value: false },
         scrollX: { type: Boolean, value: false },
         scrollY: { type: Boolean, value: false },
         showScrollbar: { type: Boolean, value: true },
-        upperThreshold: { type: Number, value: 50 },
+        upperThreshold: { type: null, value: 50 },
       },
       attached() {
         attachScroll(this.general(), options)
@@ -1797,22 +2283,22 @@ function registerMapDefinition(
         enableScroll: { type: Boolean, value: true },
         enableTraffic: { type: Boolean, value: false },
         enableZoom: { type: Boolean, value: true },
-        id: { type: String, value: '' },
+        id: { type: null, value: '' },
         includePoints: { type: Array, default: () => [] },
-        latitude: { type: Number, value: 0 },
-        longitude: { type: Number, value: 0 },
+        latitude: { type: null, value: 0 },
+        longitude: { type: null, value: 0 },
         markers: { type: Array, default: () => [] },
-        maxScale: { type: Number, value: 20 },
-        minScale: { type: Number, value: 3 },
+        maxScale: { type: null, value: 20 },
+        minScale: { type: null, value: 3 },
         polygons: { type: Array, default: () => [] },
         polyline: { type: Array, default: () => [] },
-        rotate: { type: Number, value: 0 },
-        scale: { type: Number, value: 16 },
+        rotate: { type: null, value: 0 },
+        scale: { type: null, value: 16 },
         showCompass: { type: Boolean, value: false },
         showLocation: { type: Boolean, value: false },
         showScale: { type: Boolean, value: false },
-        skew: { type: Number, value: 0 },
-        subkey: { type: String, value: '' },
+        skew: { type: null, value: 0 },
+        subkey: { type: null, value: '' },
       },
       attached() {
         attachMap(this.general(), options)
@@ -1842,7 +2328,7 @@ function registerRobotChatDefinition(
     .definition({
       properties: {
         ...semanticProperties,
-        appid: { type: String, value: '' },
+        appid: { type: null, value: '' },
       },
       attached() {
         attachRobotChat(this.general(), options)
@@ -1867,12 +2353,13 @@ export function registerNativeElements(
 ): NativeDefinitionMap {
   const space = env.getGlobalCodeSpace().getComponentSpace()
   return {
-    'view': registerSlotDefinition(space, 'view', templateFor(templates, 'view')),
+    'view': registerViewDefinition(space, templateFor(templates, 'view'), options),
     'text': registerSlotDefinition(space, 'text', templateFor(templates, 'text')),
     'button': registerButtonDefinition(space, templateFor(templates, 'button'), options),
     'input': registerTextControlDefinition(space, 'input', templateFor(templates, 'input'), options),
     'textarea': registerTextControlDefinition(space, 'textarea', templateFor(templates, 'textarea'), options),
     'label': registerLabelDefinition(space, templateFor(templates, 'label'), options),
+    'canvas': registerCanvasDefinition(space, templateFor(templates, 'canvas'), options),
     'image': registerImageDefinition(space, templateFor(templates, 'image'), options),
     'scroll-view': registerScrollDefinition(space, templateFor(templates, 'scroll-view'), options),
     'rich-text': registerRichTextDefinition(space, templateFor(templates, 'rich-text'), options),
diff --git a/packages/weapp-web/src/runtime/native-templates.ts b/packages/weapp-web/src/runtime/native-templates.ts
index c76da329..ad7f253a 100644
--- a/packages/weapp-web/src/runtime/native-templates.ts
+++ b/packages/weapp-web/src/runtime/native-templates.ts
@@ -5,6 +5,7 @@ export const nativeTemplates: Record<string, string> = {
   'input': '<input id="control" class="varo-native-input__control" />',
   'textarea': '<textarea id="control" class="varo-native-textarea__control"></textarea>',
   'label': '<label id="control" class="varo-native-label__control"><slot /></label>',
+  'canvas': '<canvas id="control" class="varo-native-canvas__control"></canvas>',
   'image': '<img id="control" class="varo-native-image__control" />',
   'scroll-view': '<slot />',
   'rich-text': '<span id="control" class="varo-native-rich-text__content"></span><slot />',
diff --git a/packages/weapp-web/src/runtime/wx-host.ts b/packages/weapp-web/src/runtime/wx-host.ts
index 137a06e9..ef849054 100644
--- a/packages/weapp-web/src/runtime/wx-host.ts
+++ b/packages/weapp-web/src/runtime/wx-host.ts
@@ -1,3 +1,5 @@
+import { createPreviewCanvasContext, findPreviewSelectorElement } from './native-elements.ts'
+
 export interface WxHostOptions {
   pagePath: string
   getPage: () => Record<string, unknown> | undefined
@@ -5,6 +7,24 @@ export interface WxHostOptions {
   apis?: Record<string, unknown>
 }
 
+interface PreviewSelectorRect {
+  bottom: number
+  dataset: DOMStringMap
+  height: number
+  id: string
+  left: number
+  right: number
+  top: number
+  width: number
+}
+
+interface PreviewSelectorQuery {
+  boundingClientRect: (callback: (result: PreviewSelectorRect | null) => void) => PreviewSelectorQuery
+  exec: (callback?: (results: Array<PreviewSelectorRect | null>) => void) => void
+  in: (owner?: unknown) => PreviewSelectorQuery
+  select: (selector: string) => PreviewSelectorQuery
+}
+
 function asRecord(value: unknown): Record<string, unknown> | undefined {
   return value !== null && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : undefined
 }
@@ -45,11 +65,45 @@ export function createWxHost({ pagePath, getPage, enqueue, apis }: WxHostOptions
     },
   })
   const resize = listeners(resizeListeners)
-  const invokePage = (method: string, args: unknown[]) => {
-    const page = getPage()
-    const handler = page?.[method]
-    if (!page || typeof handler !== 'function') { throw new Error(`当前预览页面无法提供 wx.${method}`) }
-    return Reflect.apply(handler, page, args)
+  const createSelectorQuery = (): PreviewSelectorQuery => {
+    let selector = ''
+    let owner: unknown
+    let rectCallback: ((result: PreviewSelectorRect | null) => void) | undefined
+    const query: PreviewSelectorQuery = {
+      boundingClientRect(handler) {
+        rectCallback = handler
+        return query
+      },
+      exec(handler) {
+        enqueue(() => {
+          const element = selector ? findPreviewSelectorElement(selector, owner) : null
+          const bounds = element?.getBoundingClientRect()
+          const result = bounds && element
+            ? {
+                bottom: bounds.bottom,
+                dataset: element.dataset,
+                height: bounds.height,
+                id: element.id,
+                left: bounds.left,
+                right: bounds.right,
+                top: bounds.top,
+                width: bounds.width,
+              }
+            : null
+          rectCallback?.(result)
+          handler?.([result])
+        })
+      },
+      in(value) {
+        owner = value
+        return query
+      },
+      select(value) {
+        selector = value
+        return query
+      },
+    }
+    return query
   }
   const supported: Record<string, unknown> = {
     getWindowInfo: windowInfo,
@@ -74,7 +128,11 @@ export function createWxHost({ pagePath, getPage, enqueue, apis }: WxHostOptions
         callback(options, 'complete', result)
       })
     },
-    createSelectorQuery: () => invokePage('createSelectorQuery', []),
+    createCanvasContext: (canvasId: unknown, owner?: unknown) => {
+      if (typeof canvasId !== 'string' || !canvasId) { throw new TypeError('wx.createCanvasContext 需要 canvasId') }
+      return createPreviewCanvasContext(canvasId, owner)
+    },
+    createSelectorQuery,
     onWindowResize: resize.add,
     offWindowResize: resize.remove,
   }
diff --git a/packages/weapp-web/tests/wx-host.test.ts b/packages/weapp-web/tests/wx-host.test.ts
new file mode 100644
index 00000000..58859aac
--- /dev/null
+++ b/packages/weapp-web/tests/wx-host.test.ts
@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createWxHost } from '../src/runtime/wx-host'
+
+afterEach(() => {
+  document.body.replaceChildren()
+})
+
+describe('wx host selector query', () => {
+  it('measures a selected native control through the queued callback contract', () => {
+    const target = document.createElement('div')
+    target.id = 'varo-signature-1'
+    target.dataset.surface = 'signature'
+    target.getBoundingClientRect = vi.fn(() => ({
+      bottom: 188,
+      height: 168,
+      left: 20,
+      right: 351,
+      top: 20,
+      width: 331,
+      x: 20,
+      y: 20,
+      toJSON: () => ({}),
+    }))
+    document.body.append(target)
+
+    const queued: Array<() => void> = []
+    const { dispose, wx } = createWxHost({
+      enqueue: callback => queued.push(callback),
+      getPage: () => undefined,
+      pagePath: 'pages/web-preview/index',
+    })
+    const measure = vi.fn()
+    const complete = vi.fn()
+    const createSelectorQuery = wx.createSelectorQuery as () => {
+      boundingClientRect: (callback: typeof measure) => unknown
+      exec: (callback: typeof complete) => void
+      in: (owner: unknown) => unknown
+      select: (selector: string) => unknown
+    }
+    const query = createSelectorQuery()
+
+    query.in({})
+    query.select('#varo-signature-1')
+    query.boundingClientRect(measure)
+    query.exec(complete)
+    expect(measure).not.toHaveBeenCalled()
+
+    queued.shift()?.()
+    expect(measure).toHaveBeenCalledWith(expect.objectContaining({
+      dataset: target.dataset,
+      height: 168,
+      id: 'varo-signature-1',
+      width: 331,
+    }))
+    expect(complete).toHaveBeenCalledWith([
+      expect.objectContaining({ height: 168, width: 331 }),
+    ])
+    dispose()
+  })
+})
diff --git a/registry/component-tiers.v0.1.json b/registry/component-tiers.v0.1.json
index 1e5f9439..097085a6 100644
--- a/registry/component-tiers.v0.1.json
+++ b/registry/component-tiers.v0.1.json
@@ -1,13 +1,13 @@
 {
   "version": "0.2",
   "runtimeCatalog": {
-    "h5": 57,
-    "weappVite": 57
+    "h5": 61,
+    "weappVite": 60
   },
   "registryCatalog": {
-    "h5": 58,
-    "weappVite": 48,
-    "weappSfc": 47,
+    "h5": 62,
+    "weappVite": 53,
+    "weappSfc": 52,
     "weappSfcBaseKit": 15
   },
   "registryExtensions": [
@@ -24,6 +24,7 @@
     "cell",
     "checkbox",
     "collapse",
+    "date-field",
     "dialog",
     "divider",
     "empty",
@@ -42,14 +43,17 @@
     "notice-bar",
     "overlay",
     "pagination",
+    "picker",
     "popover",
     "popup",
     "progress",
+    "pull-refresh",
     "radio",
     "rate",
     "safe-area",
     "searchbar",
     "select",
+    "signature",
     "skeleton",
     "space",
     "steps",
@@ -60,7 +64,8 @@
     "tabs",
     "tag",
     "textarea",
-    "toast"
+    "toast",
+    "watermark"
   ],
   "weappSpecializedPendingRegistry": [
     "calendar",
@@ -69,7 +74,6 @@
     "elevator",
     "fixed-nav",
     "number-keyboard",
-    "picker",
     "range",
     "short-password",
     "side-navbar",
diff --git a/registry/components/agent-ui/AgentRagPipeline.vue b/registry/components/agent-ui/AgentRagPipeline.vue
index 5d89aa90..29935dc2 100644
--- a/registry/components/agent-ui/AgentRagPipeline.vue
+++ b/registry/components/agent-ui/AgentRagPipeline.vue
@@ -314,14 +314,14 @@ const answerParts = computed<AnswerPartView[]>(() => {
   })
 })
 
-const footerActionLabel = computed(() => {
+const actionLabel = computed(() => {
   if (anyRunning.value) { return '停止' }
   if (hasFailure.value) { return '重试流程' }
   if (allCompleted.value) { return '重新运行' }
   return '运行流程'
 })
 
-const footerStatusLabel = computed(() => {
+const statusLabel = computed(() => {
   if (anyRunning.value) { return `流程运行中，已完成 ${completedCount.value}/5` }
   if (hasFailure.value) { return `流程失败，已完成 ${completedCount.value}/5` }
   if (allCompleted.value) { return '流程已完成，5/5' }
@@ -394,16 +394,39 @@ onBeforeUnmount(clearPing)
 
 <template>
   <view :class="rootClass" :data-status="overallStatus">
-    <view class="flex min-h-12 min-w-0 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="min-w-0 break-words text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text v-if="showElapsed" class="flex-none text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ elapsedLabel }}
-      </text>
+    <view class="agent-rag__header flex min-h-16 min-w-0 flex-wrap items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px] py-2">
+      <view class="grid min-w-[140px] flex-1 gap-1">
+        <text class="min-w-0 break-words text-xs font-bold text-[var(--varo-agent-foreground)]">
+          {{ title }}
+        </text>
+        <text
+          class="break-words text-[11px] text-[var(--varo-agent-muted)]"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {{ statusLabel }}
+        </text>
+      </view>
+      <view class="flex flex-none items-center gap-2">
+        <text v-if="showElapsed" class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
+          {{ elapsedLabel }}
+        </text>
+        <button
+          class="agent-native-button agent-rag__action inline-flex min-h-10 flex-none items-center justify-center rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]"
+          type="button"
+          :aria-label="actionLabel"
+          hover-class="agent-rag__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="handleAction"
+        >
+          {{ actionLabel }}
+        </button>
+      </view>
     </view>
 
-    <view class="grid min-w-0 p-3">
+    <view class="agent-rag__progress grid min-w-0 p-3" :aria-busy="anyRunning">
       <view
         v-for="stage in stageRows"
         :key="stage.id"
@@ -563,25 +586,6 @@ onBeforeUnmount(clearPing)
         </view>
       </view>
     </view>
-
-    <view class="flex min-h-14 min-w-0 items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px] py-2">
-      <view class="min-w-0" role="status" aria-live="polite" aria-atomic="true">
-        <text class="break-words text-[11px] text-[var(--varo-agent-muted)]">
-          {{ footerStatusLabel }}
-        </text>
-      </view>
-      <button
-        class="agent-native-button agent-rag__action inline-flex min-h-9 flex-none items-center justify-center rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]"
-        type="button"
-        :aria-label="footerActionLabel"
-        hover-class="agent-rag__action--pressed"
-        :hover-start-time="20"
-        :hover-stay-time="70"
-        @click="handleAction"
-      >
-        {{ footerActionLabel }}
-      </button>
-    </view>
   </view>
 </template>
 
diff --git a/registry/components/agent-ui/h5/AgentRagPipeline.vue b/registry/components/agent-ui/h5/AgentRagPipeline.vue
index 83179b2d..358a5500 100644
--- a/registry/components/agent-ui/h5/AgentRagPipeline.vue
+++ b/registry/components/agent-ui/h5/AgentRagPipeline.vue
@@ -202,7 +202,7 @@ const actionClass = computed(() =>
   ),
 )
 
-const footerStatusLabel = computed(() => {
+const statusLabel = computed(() => {
   if (isRunning.value) { return `处理中，${completedCount.value}/5 已完成` }
   if (hasFailed.value) { return '流程失败，可重试' }
   if (isCompleted.value) { return '流程已完成' }
@@ -218,7 +218,7 @@ const liveStatus = computed(() => {
   return '检索增强生成流程等待运行'
 })
 
-const footerDotClass = computed(() => {
+const statusDotClass = computed(() => {
   if (overallStatus.value === 'running') { return 'bg-[var(--varo-agent-primary)]' }
   if (overallStatus.value === 'failed') { return 'bg-[var(--varo-agent-danger)]' }
   if (overallStatus.value === 'completed') { return 'bg-[var(--varo-agent-success)]' }
@@ -393,26 +393,39 @@ onBeforeUnmount(clearAllPings)
   <section
     :class="rootClass"
     :data-status="overallStatus"
-    :aria-busy="isRunning"
     :aria-label="title"
   >
-    <header class="flex min-h-14 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
-      <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </h3>
-      <span
-        v-if="elapsedLabel"
-        class="flex-none text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
-        :aria-label="`总耗时 ${elapsedLabel}`"
-      >
-        {{ elapsedLabel }}
-      </span>
-      <p class="sr-only" aria-atomic="true" aria-live="polite">
-        {{ liveStatus }}
-      </p>
+    <header class="agent-rag__header flex min-h-16 flex-wrap items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
+      <div class="grid min-w-[140px] flex-1 gap-1">
+        <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
+          {{ title }}
+        </h3>
+        <span
+          class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          :aria-label="liveStatus"
+        >
+          <span class="h-2 w-2 flex-none rounded-full" :class="statusDotClass" aria-hidden="true" />
+          <span>{{ statusLabel }}</span>
+        </span>
+      </div>
+      <div class="flex flex-none items-center gap-2">
+        <span
+          v-if="elapsedLabel"
+          class="text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
+          :aria-label="`总耗时 ${elapsedLabel}`"
+        >
+          {{ elapsedLabel }}
+        </span>
+        <button :class="actionClass" type="button" @click="handleAction">
+          {{ actionLabel }}
+        </button>
+      </div>
     </header>
 
-    <ol class="m-0 grid list-none p-4">
+    <ol class="agent-rag__progress m-0 grid list-none p-4" :aria-busy="isRunning">
       <li
         v-for="stage in stageEntries"
         :key="stage.id"
@@ -609,16 +622,6 @@ onBeforeUnmount(clearAllPings)
         </section>
       </li>
     </ol>
-
-    <footer class="flex min-h-14 flex-wrap items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-4 py-2.5">
-      <span class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]">
-        <span class="h-2 w-2 flex-none rounded-full" :class="footerDotClass" aria-hidden="true" />
-        <span>{{ footerStatusLabel }}</span>
-      </span>
-      <button :class="actionClass" type="button" @click="handleAction">
-        {{ actionLabel }}
-      </button>
-    </footer>
   </section>
 </template>
 
diff --git a/registry/components/button/weapp-vite.vue b/registry/components/button/weapp-vite.vue
index b0a7babc..a8542b6a 100644
--- a/registry/components/button/weapp-vite.vue
+++ b/registry/components/button/weapp-vite.vue
@@ -13,6 +13,7 @@ type ButtonShape = 'default' | 'square' | 'round'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     block?: boolean
     className?: ClassValue
     color?: string
@@ -31,6 +32,7 @@ const props = withDefaults(
     variant?: ButtonVariant
   }>(),
   {
+    ariaLabel: '',
     block: false,
     disabled: false,
     hairline: false,
@@ -127,6 +129,7 @@ function pressCancel() {
   <button
     :class="classes"
     :style="customStyle"
+    :aria-label="props.ariaLabel"
     :disabled="!interactive"
     :form-type="formType"
     :hover-class="hoverClass"
diff --git a/registry/components/card/weapp-vite.vue b/registry/components/card/weapp-vite.vue
index 3a6c1522..464cc399 100644
--- a/registry/components/card/weapp-vite.vue
+++ b/registry/components/card/weapp-vite.vue
@@ -7,14 +7,18 @@ import { varoReactiveRuntime } from '../../lib/varo-primitives'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     className?: ClassValue
     interactive?: boolean
     padding?: boolean
+    role?: string
     variant?: 'default' | 'outline' | 'elevated' | 'muted'
   }>(),
   {
+    ariaLabel: '',
     interactive: false,
     padding: true,
+    role: '',
     variant: 'default',
   },
 )
@@ -59,6 +63,8 @@ function pressCancel() {
 <template>
   <view
     :class="classes"
+    :aria-label="props.ariaLabel"
+    :role="props.role"
     :hover-class="hoverClass"
     :hover-start-time="20"
     :hover-stay-time="70"
diff --git a/registry/components/checkbox/weapp-vite.vue b/registry/components/checkbox/weapp-vite.vue
index 247207c4..a418b07e 100644
--- a/registry/components/checkbox/weapp-vite.vue
+++ b/registry/components/checkbox/weapp-vite.vue
@@ -8,12 +8,14 @@ import VIcon from './v-icon.vue'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     checked?: boolean
     disabled?: boolean
     label?: string
     value?: CheckboxValue
   }>(),
   {
+    ariaLabel: '',
     checked: false,
     disabled: false,
     label: '',
@@ -58,6 +60,7 @@ function toggle() {
 <template>
   <button
     class="varo-checkbox"
+    :aria-label="props.ariaLabel"
     type="button"
     role="checkbox"
     :disabled="!interactive"
diff --git a/registry/components/date-field/date-field.ts b/registry/components/date-field/date-field.ts
new file mode 100644
index 00000000..3257dcc7
--- /dev/null
+++ b/registry/components/date-field/date-field.ts
@@ -0,0 +1,134 @@
+import type { PropType } from 'vue'
+import type { PickerOption } from './picker'
+import { computed, defineComponent, h, shallowRef, watch } from 'vue'
+import { buildDateFieldColumns, dateFieldValue, parseDateFieldValue } from './date-utils'
+import { VPicker } from './picker'
+import '../../styles/varo.css'
+
+export const VDateField = defineComponent({
+  name: 'VDateField',
+  props: {
+    cancelText: {
+      type: String,
+      default: 'Cancel',
+    },
+    confirmText: {
+      type: String,
+      default: 'Confirm',
+    },
+    disabled: Boolean,
+    maxYear: {
+      type: Number,
+      default: 2100,
+    },
+    minYear: {
+      type: Number,
+      default: 1970,
+    },
+    placeholder: {
+      type: String,
+      default: 'Select date',
+    },
+    readonly: Boolean,
+    title: {
+      type: String,
+      default: undefined,
+    },
+    value: {
+      type: String as PropType<string | undefined>,
+      default: undefined,
+    },
+    visible: Boolean,
+  },
+  emits: ['update:value', 'update:visible', 'confirm', 'cancel', 'change'],
+  setup(props, { attrs, emit }) {
+    const draftValue = shallowRef(props.value)
+    const columns = computed(() => buildDateFieldColumns(draftValue.value, props.minYear, props.maxYear))
+    const pickerValue = computed(() => parseDateFieldValue(draftValue.value))
+
+    watch(() => props.value, (value) => {
+      draftValue.value = value
+    })
+    watch(() => props.visible, (visible) => {
+      if (visible) {
+        draftValue.value = props.value
+      }
+    })
+
+    function toDate(values: Array<string | number | undefined>): string {
+      const [year, month, day] = parseDateFieldValue(draftValue.value)
+      return dateFieldValue(Number(values[0] ?? year), Number(values[1] ?? month), Number(values[2] ?? day))
+    }
+
+    function open() {
+      if (props.disabled || props.readonly) {
+        return
+      }
+      draftValue.value = props.value
+      emit('update:visible', true)
+    }
+
+    function onChange(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+      const values = Array.isArray(payload.value) ? payload.value : [payload.value]
+      const next = toDate(values)
+      draftValue.value = next
+      emit('change', next)
+    }
+
+    function onConfirm(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+      const values = Array.isArray(payload.value) ? payload.value : [payload.value]
+      const next = toDate(values)
+      draftValue.value = next
+      emit('update:value', next)
+      emit('confirm', next)
+    }
+
+    function onCancel() {
+      draftValue.value = props.value
+      emit('cancel')
+    }
+
+    function onUpdateVisible(visible: boolean) {
+      if (!visible) {
+        draftValue.value = props.value
+      }
+      emit('update:visible', visible)
+    }
+
+    return () =>
+      h('div', {
+        ...attrs,
+        'class': ['varo-date-field', attrs.class],
+        'data-disabled': String(props.disabled),
+        'data-open': String(props.visible),
+        'data-readonly': String(props.readonly),
+      }, [
+        h('button', {
+          'aria-expanded': String(props.visible),
+          'aria-readonly': props.readonly || undefined,
+          'class': 'varo-date-field__control',
+          'disabled': props.disabled,
+          'type': 'button',
+          'onClick': open,
+        }, [
+          h('span', {
+            class: props.value ? 'varo-date-field__value' : 'varo-date-field__placeholder',
+          }, props.value ?? props.placeholder),
+          h('span', { 'aria-hidden': 'true', 'class': 'varo-date-field__arrow' }),
+        ]),
+        h(VPicker, {
+          'cancelText': props.cancelText,
+          'class': 'varo-date-field__picker',
+          'columns': columns.value as PickerOption[][],
+          'confirmText': props.confirmText,
+          'title': props.title,
+          'value': pickerValue.value,
+          'visible': props.visible,
+          'onCancel': onCancel,
+          'onChange': onChange,
+          'onConfirm': onConfirm,
+          'onUpdate:visible': onUpdateVisible,
+        }),
+      ])
+  },
+})
diff --git a/registry/components/date-field/registry.json b/registry/components/date-field/registry.json
new file mode 100644
index 00000000..d4d3afcc
--- /dev/null
+++ b/registry/components/date-field/registry.json
@@ -0,0 +1,43 @@
+{
+  "name": "date-field",
+  "type": "component",
+  "title": "VDateField",
+  "description": "Year-month-day field composed from the multi-column Picker. Calendar remains a separate month-grid control.",
+  "exportName": "VDateField",
+  "targets": [
+    "h5",
+    "weapp"
+  ],
+  "dependencies": [],
+  "targetDependencies": {
+    "h5": [
+      "vue"
+    ],
+    "weapp": [
+      "wevu"
+    ]
+  },
+  "registryDependencies": [
+    "themes/base",
+    "components/picker",
+    "utils/date-utils"
+  ],
+  "targetRegistryDependencies": {
+    "weapp": [
+      "utils/cn"
+    ]
+  },
+  "files": [
+    {
+      "target": "h5",
+      "from": "registry/components/date-field/date-field.ts",
+      "to": "src/components/ui/date-field.ts"
+    },
+    {
+      "target": "weapp",
+      "from": "registry/components/date-field/v-date-field.vue",
+      "to": "src/components/ui/v-date-field.vue"
+    }
+  ],
+  "docs": "/components/date-field"
+}
diff --git a/registry/components/date-field/v-date-field.vue b/registry/components/date-field/v-date-field.vue
new file mode 100644
index 00000000..56654f91
--- /dev/null
+++ b/registry/components/date-field/v-date-field.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed, shallowRef, watch } from 'wevu'
+import { cn } from '../../lib/cn'
+import { buildDateFieldColumns, dateFieldValue, parseDateFieldValue } from './date-utils'
+import VPicker from './v-picker.vue'
+
+const props = withDefaults(
+  defineProps<{
+    cancelText?: string
+    className?: ClassValue
+    confirmText?: string
+    disabled?: boolean
+    maxYear?: number
+    minYear?: number
+    placeholder?: string
+    readonly?: boolean
+    title?: string
+    value?: string
+    visible?: boolean
+  }>(),
+  {
+    cancelText: 'Cancel',
+    className: undefined,
+    confirmText: 'Confirm',
+    disabled: false,
+    maxYear: 2100,
+    minYear: 1970,
+    placeholder: 'Select date',
+    readonly: false,
+    title: undefined,
+    value: undefined,
+    visible: false,
+  },
+)
+
+const emit = defineEmits<{
+  'cancel': []
+  'change': [value: string]
+  'confirm': [value: string]
+  'update:value': [value: string]
+  'update:visible': [visible: boolean]
+}>()
+
+const draftValue = shallowRef(props.value)
+const classes = computed(() => cn('varo-date-field', props.className))
+const columns = computed(() => buildDateFieldColumns(draftValue.value, props.minYear, props.maxYear))
+const pickerValue = computed(() => parseDateFieldValue(draftValue.value))
+const controlLabel = computed(() => props.value ?? props.placeholder)
+const valueClass = computed(() => props.value ? 'varo-date-field__value' : 'varo-date-field__placeholder')
+const dataDisabled = computed(() => String(props.disabled))
+const dataOpen = computed(() => String(props.visible))
+const dataReadonly = computed(() => String(props.readonly))
+
+watch(() => props.value, (value) => {
+  draftValue.value = value
+})
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    draftValue.value = props.value
+  }
+})
+
+function toDate(value: string | number | Array<string | number | undefined> | undefined): string {
+  const values = Array.isArray(value) ? value : [value]
+  const [year, month, day] = parseDateFieldValue(draftValue.value)
+  return dateFieldValue(Number(values[0] ?? year), Number(values[1] ?? month), Number(values[2] ?? day))
+}
+
+function open() {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  draftValue.value = props.value
+  emit('update:visible', true)
+}
+
+function onChange(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+  const next = toDate(payload.value)
+  draftValue.value = next
+  emit('change', next)
+}
+
+function onConfirm(payload: { value: string | number | Array<string | number | undefined> | undefined }) {
+  const next = toDate(payload.value)
+  draftValue.value = next
+  emit('update:value', next)
+  emit('confirm', next)
+}
+
+function onCancel() {
+  draftValue.value = props.value
+  emit('cancel')
+}
+
+function onUpdateVisible(visible: boolean) {
+  if (!visible) {
+    draftValue.value = props.value
+  }
+  emit('update:visible', visible)
+}
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :data-disabled="dataDisabled"
+    :data-open="dataOpen"
+    :data-readonly="dataReadonly"
+  >
+    <button
+      class="varo-date-field__control"
+      type="button"
+      :disabled="props.disabled"
+      :aria-expanded="props.visible"
+      :aria-readonly="props.readonly"
+      @click="open"
+    >
+      <text :class="valueClass">
+        {{ controlLabel }}
+      </text>
+      <text class="varo-date-field__arrow" aria-hidden="true" />
+    </button>
+    <VPicker
+      class-name="varo-date-field__picker"
+      :cancel-text="props.cancelText"
+      :columns="columns"
+      :confirm-text="props.confirmText"
+      :title="props.title"
+      :value="pickerValue"
+      :visible="props.visible"
+      @cancel="onCancel"
+      @change="onChange"
+      @confirm="onConfirm"
+      @update:visible="onUpdateVisible"
+    />
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/registry/components/input-number/input-number.ts b/registry/components/input-number/input-number.ts
index b36fe65b..ec281e27 100644
--- a/registry/components/input-number/input-number.ts
+++ b/registry/components/input-number/input-number.ts
@@ -8,12 +8,16 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from '../../lib/varo-primitives'
+import { VIcon } from './icon'
 import '../../styles/varo.css'
 
 export const VInputNumber = defineComponent({
   name: 'VInputNumber',
   props: {
+    decreaseAriaLabel: { type: String, default: 'Decrease value' },
     disabled: Boolean,
+    increaseAriaLabel: { type: String, default: 'Increase value' },
+    inputAriaLabel: { type: String, default: 'Numeric value' },
     max: { type: Number, default: Number.POSITIVE_INFINITY },
     min: { type: Number, default: Number.NEGATIVE_INFINITY },
     precision: { type: Number as PropType<number | undefined>, default: undefined },
@@ -45,13 +49,14 @@ export const VInputNumber = defineComponent({
         },
         {
           default: () => [
-            h(NumberFieldDecrement, { class: 'varo-input-number__minus' }, () => '-'),
+            h(NumberFieldDecrement, { 'aria-label': props.decreaseAriaLabel, 'class': 'varo-input-number__minus' }, () => h(VIcon, { name: 'minus', size: 14 })),
             h(NumberFieldInput, {
-              class: 'varo-input-number__input',
-              onBlur: (event: FocusEvent) => emit('blur', event),
-              onFocus: (event: FocusEvent) => emit('focus', event),
+              'class': 'varo-input-number__input',
+              'aria-label': props.inputAriaLabel,
+              'onBlur': (event: FocusEvent) => emit('blur', event),
+              'onFocus': (event: FocusEvent) => emit('focus', event),
             }),
-            h(NumberFieldIncrement, { class: 'varo-input-number__plus' }, () => '+'),
+            h(NumberFieldIncrement, { 'aria-label': props.increaseAriaLabel, 'class': 'varo-input-number__plus' }, () => h(VIcon, { name: 'plus', size: 14 })),
           ],
         },
       )
diff --git a/registry/components/input-number/registry.json b/registry/components/input-number/registry.json
index d7f29015..062a7761 100644
--- a/registry/components/input-number/registry.json
+++ b/registry/components/input-number/registry.json
@@ -22,7 +22,8 @@
   },
   "registryDependencies": [
     "themes/base",
-    "utils/primitives"
+    "utils/primitives",
+    "components/icon"
   ],
   "files": [
     {
diff --git a/registry/components/input-number/weapp-vite.vue b/registry/components/input-number/weapp-vite.vue
index 075003e8..628ce9f5 100644
--- a/registry/components/input-number/weapp-vite.vue
+++ b/registry/components/input-number/weapp-vite.vue
@@ -2,6 +2,7 @@
 import { useNumberFieldRoot } from '@varo-ui/headless'
 import { computed, shallowRef, toRef, watch } from 'wevu'
 import { varoReactiveRuntime } from '../../lib/varo-primitives'
+import VIcon from './v-icon.vue'
 
 // WeChat validates initial child bindings before Wevu applies setup defaults.
 defineOptions({
@@ -13,7 +14,10 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
+    decreaseAriaLabel?: string
     disabled?: boolean
+    increaseAriaLabel?: string
+    inputAriaLabel?: string
     max?: number
     min?: number
     precision?: number
@@ -22,7 +26,10 @@ const props = withDefaults(
     value?: number
   }>(),
   {
+    decreaseAriaLabel: 'Decrease value',
     disabled: false,
+    increaseAriaLabel: 'Increase value',
+    inputAriaLabel: 'Numeric value',
     max: Number.POSITIVE_INFINITY,
     min: Number.NEGATIVE_INFINITY,
     readonly: false,
@@ -96,25 +103,26 @@ function increment() {
 
 <template>
   <view class="varo-input-number" :data-disabled="String(fieldDisabled)" :data-readonly="String(readonly)">
-    <button v-if="canDecrease" class="varo-input-number__minus" @tap="decrement">
-      −
+    <button v-if="canDecrease" class="varo-input-number__minus" :aria-label="props.decreaseAriaLabel" @tap="decrement">
+      <VIcon name="minus" :size="14" />
+    </button>
+    <button v-else class="varo-input-number__minus varo-input-number__control--disabled" :aria-label="props.decreaseAriaLabel" aria-disabled="true" disabled>
+      <VIcon name="minus" :size="14" />
     </button>
-    <view v-else class="varo-input-number__minus varo-input-number__control--disabled" aria-disabled="true">
-      −
-    </view>
     <input
       class="varo-input-number__input"
+      :aria-label="props.inputAriaLabel"
       type="digit"
       :value="String(value)"
       :disabled="!interactive"
       @blur="input"
     >
-    <button v-if="canIncrease" class="varo-input-number__plus" @tap="increment">
-      +
+    <button v-if="canIncrease" class="varo-input-number__plus" :aria-label="props.increaseAriaLabel" @tap="increment">
+      <VIcon name="plus" :size="14" />
+    </button>
+    <button v-else class="varo-input-number__plus varo-input-number__control--disabled" :aria-label="props.increaseAriaLabel" aria-disabled="true" disabled>
+      <VIcon name="plus" :size="14" />
     </button>
-    <view v-else class="varo-input-number__plus varo-input-number__control--disabled" aria-disabled="true">
-      +
-    </view>
   </view>
 </template>
 
diff --git a/registry/components/input/input.ts b/registry/components/input/input.ts
index ba6f96a0..f53bf120 100644
--- a/registry/components/input/input.ts
+++ b/registry/components/input/input.ts
@@ -253,6 +253,7 @@ export const VInput = defineComponent({
           'data-invalid': String(effectiveInvalid.value),
           'data-readonly': String(props.readonly),
           'data-size': props.size,
+          'data-type': props.type,
         },
         [
           labelVisible.value
@@ -309,7 +310,7 @@ export const VInput = defineComponent({
                     'onClick': clear,
                     'onMousedown': (event: MouseEvent) => event.preventDefault(),
                   },
-                  h(VIcon, { name: 'close', size: 14 }),
+                  h(VIcon, { name: 'danger', size: 16 }),
                 )
               : null,
             props.showWordLimit ? h('span', { class: 'varo-input__word-limit' }, wordLimit.value) : null,
diff --git a/registry/components/input/v-input.vue b/registry/components/input/v-input.vue
index 6abfdd75..4257c855 100644
--- a/registry/components/input/v-input.vue
+++ b/registry/components/input/v-input.vue
@@ -384,7 +384,7 @@ function input(event: unknown) {
   return nextValue
 }
 
-function focus(event: unknown) {
+function handleFocus(event: unknown) {
   focused.value = true
   focusRequested.value = false
   emit('focus', event)
@@ -459,6 +459,7 @@ function touchstart(event: unknown) {
     :data-invalid="dataInvalid"
     :data-readonly="dataReadonly"
     :data-size="props.size"
+    :data-type="props.type"
   >
     <label
       v-if="labelVisible"
@@ -524,7 +525,7 @@ function touchstart(event: unknown) {
         :style="controlStyle"
         :value="currentValue"
         @input="input"
-        @focus="focus"
+        @focus="handleFocus"
         @blur="blur"
         @confirm="confirm"
         @keyboardheightchange="keyboardHeightChange"
@@ -586,7 +587,7 @@ function touchstart(event: unknown) {
         :type="nativeType"
         :value="currentValue"
         @input="input"
-        @focus="focus"
+        @focus="handleFocus"
         @blur="blur"
         @confirm="confirm"
         @keyboardheightchange="keyboardHeightChange"
@@ -604,7 +605,7 @@ function touchstart(event: unknown) {
         aria-label="Clear input"
         @click="clear"
       >
-        <VIcon name="close" :size="14" />
+        <VIcon name="danger" :size="16" />
       </button>
       <text v-if="props.showWordLimit" class="varo-input__word-limit">
         {{ wordLimit }}
diff --git a/registry/components/list/registry.json b/registry/components/list/registry.json
index a4b86bdd..be7e0bf2 100644
--- a/registry/components/list/registry.json
+++ b/registry/components/list/registry.json
@@ -38,5 +38,5 @@
       "to": "src/components/ui/v-list.vue"
     }
   ],
-  "docs": "/guide/shadcn-mode"
+  "docs": "/components/list"
 }
diff --git a/registry/components/picker/picker.ts b/registry/components/picker/picker.ts
index 4a3fa2e4..d08c5f95 100644
--- a/registry/components/picker/picker.ts
+++ b/registry/components/picker/picker.ts
@@ -1,5 +1,6 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted, shallowRef, watch } from 'vue'
 import '../../styles/varo.css'
-import { computed, defineComponent, h, shallowRef, watch, type PropType } from 'vue'
 
 export interface PickerOption {
   disabled?: boolean
@@ -7,84 +8,170 @@ export interface PickerOption {
   value: string | number
 }
 
+export type PickerColumn = PickerOption[]
+export type PickerValue = string | number | Array<string | number> | undefined
+
+function isOptionList(value: unknown): value is PickerOption[] {
+  return Array.isArray(value) && (value.length === 0 || (typeof value[0] === 'object' && value[0] !== null && 'label' in value[0]))
+}
+
+export function normalizePickerColumns(columns: PickerColumn | PickerColumn[]): PickerColumn[] {
+  if (columns.length === 0) {
+    return [[]]
+  }
+  return isOptionList(columns) ? [columns] : columns
+}
+
+function firstEnabledValue(column: PickerColumn): string | number | undefined {
+  return column.find(option => !option.disabled)?.value ?? column[0]?.value
+}
+
+export function normalizePickerValue(
+  value: PickerValue,
+  columns: PickerColumn[],
+): Array<string | number | undefined> {
+  const values = Array.isArray(value) ? value : [value]
+  return columns.map((column, index) => {
+    const next = values[index]
+    if (next !== undefined && column.some(option => option.value === next && !option.disabled)) {
+      return next
+    }
+    return firstEnabledValue(column)
+  })
+}
+
 export const VPicker = defineComponent({
   name: 'VPicker',
   props: {
     cancelText: {
       type: String,
-      default: 'Cancel'
+      default: 'Cancel',
     },
     columns: {
-      type: Array as PropType<PickerOption[]>,
-      default: () => []
+      type: Array as PropType<PickerColumn | PickerColumn[]>,
+      default: () => [],
     },
     confirmText: {
       type: String,
-      default: 'Confirm'
+      default: 'Confirm',
     },
     title: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     value: {
-      type: [String, Number] as PropType<string | number | undefined>,
-      default: undefined
+      type: [String, Number, Array] as PropType<PickerValue>,
+      default: undefined,
     },
-    visible: Boolean
+    visible: Boolean,
   },
   emits: ['update:value', 'update:visible', 'confirm', 'cancel', 'change'],
   setup(props, { emit }) {
-    const selectedValue = shallowRef<string | number | undefined>(props.value ?? props.columns[0]?.value)
-    const selectedOption = computed(() => props.columns.find((item) => item.value === selectedValue.value))
+    const resolvedColumns = computed(() => normalizePickerColumns(props.columns))
+    const selectedValues = shallowRef(normalizePickerValue(props.value, resolvedColumns.value))
+    const rootElement = shallowRef<HTMLElement | null>(null)
 
     watch(
-      () => props.value,
-      (value) => {
-        selectedValue.value = value ?? props.columns[0]?.value
-      }
+      [() => props.value, resolvedColumns],
+      () => {
+        selectedValues.value = normalizePickerValue(props.value, resolvedColumns.value)
+      },
     )
 
-    function select(option: PickerOption) {
-      if (option.disabled) return
-      selectedValue.value = option.value
-      emit('change', { option, value: option.value })
-      emit('update:value', option.value)
+    const selectedOptions = computed(() =>
+      resolvedColumns.value.map((column, index) =>
+        column.find(option => option.value === selectedValues.value[index]),
+      ),
+    )
+
+    function syncColumnScroll() {
+      if (!props.visible) {
+        return
+      }
+      void nextTick(() => {
+        rootElement.value?.querySelectorAll<HTMLElement>('.varo-picker__column').forEach((column) => {
+          const selected = column.querySelector<HTMLElement>('.varo-picker__option[data-active="true"]')
+          if (!selected) {
+            return
+          }
+          column.scrollTop = Math.max(0, selected.offsetTop - (column.clientHeight - selected.offsetHeight) / 2)
+        })
+      })
+    }
+
+    watch([selectedValues, () => props.visible], syncColumnScroll, { flush: 'post' })
+    onMounted(syncColumnScroll)
+
+    function emitChange(values: Array<string | number | undefined>, option?: PickerOption, columnIndex?: number) {
+      const singleColumn = resolvedColumns.value.length === 1
+      const next = singleColumn ? values[0] : values
+      if (option !== undefined && columnIndex !== undefined) {
+        emit('change', singleColumn ? { option, value: next } : { columnIndex, option, value: next })
+      }
+    }
+
+    function select(columnIndex: number, option: PickerOption) {
+      if (option.disabled) {
+        return
+      }
+      const next = selectedValues.value.slice()
+      next[columnIndex] = option.value
+      selectedValues.value = next
+      emitChange(next, option, columnIndex)
     }
 
     function confirm() {
-      emit('confirm', {
-        option: selectedOption.value,
-        value: selectedValue.value
-      })
+      const option = resolvedColumns.value.length === 1 ? selectedOptions.value[0] : selectedOptions.value
+      const value = resolvedColumns.value.length === 1 ? selectedValues.value[0] : selectedValues.value
+      emit('update:value', value)
+      emit('confirm', { option, value })
+      emit('update:visible', false)
+    }
+
+    function cancel() {
+      selectedValues.value = normalizePickerValue(props.value, resolvedColumns.value)
+      emit('cancel')
       emit('update:visible', false)
     }
 
     return () =>
       props.visible
-        ? h('div', { class: 'varo-picker' }, [
+        ? h('div', {
+            'class': 'varo-picker',
+            'data-columns': String(resolvedColumns.value.length),
+            'ref': (element: unknown) => {
+              rootElement.value = element instanceof HTMLElement ? element : null
+            },
+          }, [
             h('div', { class: 'varo-picker__toolbar' }, [
-              h('button', { class: 'varo-picker__cancel', type: 'button', onClick: () => emit('cancel') }, props.cancelText),
+              h('button', { class: 'varo-picker__cancel', type: 'button', onClick: cancel }, props.cancelText),
               props.title ? h('strong', { class: 'varo-picker__title' }, props.title) : null,
-              h('button', { class: 'varo-picker__confirm', type: 'button', onClick: confirm }, props.confirmText)
+              h('button', { class: 'varo-picker__confirm', type: 'button', onClick: confirm }, props.confirmText),
             ]),
             h(
               'div',
               { class: 'varo-picker__columns' },
-              props.columns.map((option) =>
+              resolvedColumns.value.map((column, columnIndex) =>
                 h(
-                  'button',
-                  {
-                    class: 'varo-picker__option',
-                    type: 'button',
-                    disabled: option.disabled,
-                    'data-active': String(option.value === selectedValue.value),
-                    onClick: () => select(option)
-                  },
-                  option.label
-                )
-              )
-            )
+                  'div',
+                  { class: 'varo-picker__column', key: columnIndex },
+                  column.map(option =>
+                    h(
+                      'button',
+                      {
+                        'class': 'varo-picker__option',
+                        'type': 'button',
+                        'disabled': option.disabled,
+                        'data-active': String(option.value === selectedValues.value[columnIndex]),
+                        'onClick': () => select(columnIndex, option),
+                      },
+                      option.label,
+                    ),
+                  ),
+                ),
+              ),
+            ),
           ])
         : null
-  }
+  },
 })
diff --git a/registry/components/picker/registry.json b/registry/components/picker/registry.json
index ccd484a9..720162c8 100644
--- a/registry/components/picker/registry.json
+++ b/registry/components/picker/registry.json
@@ -2,22 +2,39 @@
   "name": "picker",
   "type": "component",
   "title": "VPicker",
-  "description": "Single-column mobile picker with controlled value and option states.",
+  "description": "Single- and multi-column mobile picker with draft selection, controlled values, confirm, and cancel.",
   "exportName": "VPicker",
   "targets": [
-    "h5"
-  ],
-  "dependencies": [
-    "vue"
+    "h5",
+    "weapp"
   ],
+  "dependencies": [],
+  "targetDependencies": {
+    "h5": [
+      "vue"
+    ],
+    "weapp": [
+      "wevu"
+    ]
+  },
   "registryDependencies": [
     "themes/base"
   ],
+  "targetRegistryDependencies": {
+    "weapp": [
+      "utils/cn"
+    ]
+  },
   "files": [
     {
       "target": "h5",
       "from": "registry/components/picker/picker.ts",
       "to": "src/components/ui/picker.ts"
+    },
+    {
+      "target": "weapp",
+      "from": "registry/components/picker/v-picker.vue",
+      "to": "src/components/ui/v-picker.vue"
     }
   ],
   "docs": "/components/picker"
diff --git a/registry/components/picker/v-picker.vue b/registry/components/picker/v-picker.vue
new file mode 100644
index 00000000..0004b4cb
--- /dev/null
+++ b/registry/components/picker/v-picker.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed, shallowRef, watch } from 'wevu'
+import { cn } from '../../lib/cn'
+
+type PickerScalar = number | string
+
+interface PickerOption {
+  disabled?: boolean
+  label: string
+  value: PickerScalar
+}
+
+type PickerColumn = PickerOption[]
+type PickerValue = PickerScalar | PickerScalar[] | undefined
+
+interface ConfirmPayload {
+  option: PickerOption | Array<PickerOption | undefined> | undefined
+  value: PickerValue
+}
+
+interface ChangePayload {
+  columnIndex?: number
+  option: PickerOption
+  value: PickerValue
+}
+
+interface RenderedPickerOption {
+  activeData: string
+  disabled: boolean
+  id: string
+  key: string
+  label: string
+  option: PickerOption
+}
+
+interface RenderedPickerColumn {
+  activeId: string
+  index: number
+  key: string
+  options: RenderedPickerOption[]
+  scrollTop: number
+  style: string
+}
+
+defineOptions({
+  properties: {
+    columns: { type: null },
+    value: { type: null },
+  },
+})
+
+const props = withDefaults(
+  defineProps<{
+    cancelText?: string
+    className?: ClassValue
+    columns?: PickerColumn | PickerColumn[]
+    confirmText?: string
+    title?: string
+    value?: PickerValue
+    visible?: boolean
+  }>(),
+  {
+    cancelText: 'Cancel',
+    className: undefined,
+    columns: () => [],
+    confirmText: 'Confirm',
+    title: undefined,
+    value: undefined,
+    visible: false,
+  },
+)
+
+const emit = defineEmits<{
+  'cancel': []
+  'change': [payload: ChangePayload]
+  'confirm': [payload: ConfirmPayload]
+  'update:value': [value: PickerValue]
+  'update:visible': [visible: boolean]
+}>()
+
+function isOptionList(value: unknown): value is PickerOption[] {
+  return Array.isArray(value) && (value.length === 0 || (typeof value[0] === 'object' && value[0] !== null && 'label' in value[0]))
+}
+
+function normalizeColumns(columns: PickerColumn | PickerColumn[]): PickerColumn[] {
+  if (columns.length === 0) {
+    return [[]]
+  }
+  return isOptionList(columns) ? [columns] : columns
+}
+
+function firstEnabledValue(column: PickerColumn): PickerScalar | undefined {
+  return column.find(option => !option.disabled)?.value ?? column[0]?.value
+}
+
+function normalizeValue(value: PickerValue, columns: PickerColumn[]): Array<PickerScalar | undefined> {
+  const values = Array.isArray(value) ? value : [value]
+  return columns.map((column, index) => {
+    const next = values[index]
+    if (next !== undefined && column.some(option => option.value === next && !option.disabled)) {
+      return next
+    }
+    return firstEnabledValue(column)
+  })
+}
+
+const resolvedColumns = computed(() => normalizeColumns(props.columns))
+const selectedValues = shallowRef(normalizeValue(props.value, resolvedColumns.value))
+const classes = computed(() => cn('varo-picker', props.className))
+const columnCount = computed(() => String(resolvedColumns.value.length))
+const selectedOptions = computed(() =>
+  resolvedColumns.value.map((column, index) => column.find(option => option.value === selectedValues.value[index])),
+)
+const renderedColumns = computed<RenderedPickerColumn[]>(() =>
+  resolvedColumns.value.map((column, index) => {
+    const options = column.map((option, optionIndex) => ({
+      activeData: String(option.value === selectedValues.value[index]),
+      disabled: Boolean(option.disabled),
+      id: `varo-picker-${index}-${optionIndex}`,
+      key: `${index}-${String(option.value)}`,
+      label: option.label,
+      option,
+    }))
+    const activeIndex = Math.max(0, options.findIndex(option => option.activeData === 'true'))
+    const height = Math.min(Math.max(column.length, 1) * 42, 240)
+    return {
+      activeId: options[activeIndex]?.id ?? '',
+      index,
+      key: `column-${index}`,
+      options,
+      scrollTop: Math.max(0, activeIndex * 42 - (height - 42) / 2),
+      style: `height: ${height}px`,
+    }
+  }),
+)
+
+watch(
+  [() => props.value, resolvedColumns],
+  () => {
+    selectedValues.value = normalizeValue(props.value, resolvedColumns.value)
+  },
+)
+
+function publishedValue(values: Array<PickerScalar | undefined>): PickerValue {
+  return resolvedColumns.value.length === 1 ? values[0] : values as PickerScalar[]
+}
+
+function select(columnIndex: number, option: PickerOption) {
+  if (option.disabled) {
+    return
+  }
+
+  const next = selectedValues.value.slice()
+  next[columnIndex] = option.value
+  selectedValues.value = next
+  const value = publishedValue(next)
+  const payload = resolvedColumns.value.length === 1
+    ? { option, value }
+    : { columnIndex, option, value }
+  emit('change', payload)
+}
+
+function confirm() {
+  const value = publishedValue(selectedValues.value)
+  emit('update:value', value)
+  emit('confirm', {
+    option: resolvedColumns.value.length === 1 ? selectedOptions.value[0] : selectedOptions.value,
+    value,
+  })
+  emit('update:visible', false)
+}
+
+function cancel() {
+  selectedValues.value = normalizeValue(props.value, resolvedColumns.value)
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <view v-if="props.visible" :class="classes" :data-columns="columnCount">
+    <view class="varo-picker__toolbar">
+      <button class="varo-picker__cancel" type="button" @click="cancel">
+        {{ props.cancelText }}
+      </button>
+      <text v-if="props.title" class="varo-picker__title">
+        {{ props.title }}
+      </text>
+      <button class="varo-picker__confirm" type="button" @click="confirm">
+        {{ props.confirmText }}
+      </button>
+    </view>
+    <view class="varo-picker__columns">
+      <scroll-view
+        v-for="column in renderedColumns"
+        :key="column.key"
+        class="varo-picker__column"
+        scroll-y
+        :scroll-into-view="column.activeId"
+        :scroll-top="column.scrollTop"
+        :style="column.style"
+      >
+        <button
+          v-for="item in column.options"
+          :id="item.id"
+          :key="item.key"
+          class="varo-picker__option"
+          type="button"
+          :disabled="item.disabled"
+          :data-active="item.activeData"
+          @click="select(column.index, item.option)"
+        >
+          {{ item.label }}
+        </button>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/registry/components/pull-refresh/h5.ts b/registry/components/pull-refresh/h5.ts
new file mode 100644
index 00000000..bb5576fb
--- /dev/null
+++ b/registry/components/pull-refresh/h5.ts
@@ -0,0 +1,227 @@
+import { computed, defineComponent, h, nextTick, shallowRef, watch } from 'vue'
+import '../../styles/varo.css'
+
+type PullRefreshState = 'idle' | 'loading' | 'pulling' | 'ready'
+
+export const VPullRefresh = defineComponent({
+  name: 'VPullRefresh',
+  props: {
+    disabled: Boolean,
+    headHeight: {
+      type: Number,
+      default: 48,
+    },
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '加载中',
+    },
+    pullText: {
+      type: String,
+      default: '下拉刷新',
+    },
+    releaseText: {
+      type: String,
+      default: '释放刷新',
+    },
+    threshold: {
+      type: Number,
+      default: 64,
+    },
+  },
+  emits: ['refresh'],
+  setup(props, { attrs, emit, slots }) {
+    const rootElement = shallowRef<HTMLElement | null>(null)
+    const distance = shallowRef(props.loading ? props.headHeight : 0)
+    const dragging = shallowRef(false)
+    let startY: number | undefined
+    let pointerId: number | undefined
+
+    const state = computed<PullRefreshState>(() => {
+      if (props.loading) {
+        return 'loading'
+      }
+      if (distance.value >= props.threshold) {
+        return 'ready'
+      }
+      return distance.value > 0 ? 'pulling' : 'idle'
+    })
+    const indicatorText = computed(() => {
+      if (state.value === 'loading') {
+        return props.loadingText
+      }
+      if (state.value === 'ready') {
+        return props.releaseText
+      }
+      return props.pullText
+    })
+    const trackStyle = computed(() => ({
+      transform: `translate3d(0, ${distance.value}px, 0)`,
+      transition: dragging.value ? 'none' : 'transform 180ms ease',
+    }))
+    const indicatorStyle = computed(() => ({
+      height: `${props.headHeight}px`,
+      marginTop: `${-props.headHeight}px`,
+    }))
+
+    function releaseCapturedPointer(activePointerId: number | undefined) {
+      if (activePointerId === undefined) {
+        return
+      }
+      try {
+        rootElement.value?.releasePointerCapture?.(activePointerId)
+      }
+      catch {
+        // Synthetic events and interrupted pointers may not own capture.
+      }
+    }
+
+    function resetGesture() {
+      const activePointerId = pointerId
+      startY = undefined
+      pointerId = undefined
+      dragging.value = false
+      distance.value = 0
+      releaseCapturedPointer(activePointerId)
+    }
+
+    watch(() => props.loading, (loading) => {
+      resetGesture()
+      distance.value = loading ? props.headHeight : 0
+    })
+
+    function begin(clientY: number): boolean {
+      if (
+        startY !== undefined
+        || props.disabled
+        || props.loading
+        || (rootElement.value?.scrollTop ?? 0) > 0
+      ) {
+        return false
+      }
+      distance.value = 0
+      startY = clientY
+      dragging.value = false
+      return true
+    }
+
+    function move(clientY: number, event: Event) {
+      if (startY === undefined || props.disabled || props.loading) {
+        return
+      }
+      if ((rootElement.value?.scrollTop ?? 0) > 0) {
+        resetGesture()
+        return
+      }
+      const delta = clientY - startY
+      if (delta <= 0) {
+        distance.value = 0
+        return
+      }
+      event.preventDefault()
+      dragging.value = true
+      distance.value = Math.min(delta * 0.5, props.threshold * 1.5)
+    }
+
+    function finish(allowRefresh: boolean, endingPointerId?: number) {
+      if (startY === undefined) {
+        return
+      }
+      if (endingPointerId !== undefined && pointerId !== endingPointerId) {
+        return
+      }
+      const shouldRefresh = allowRefresh
+        && distance.value >= props.threshold
+        && !props.disabled
+        && !props.loading
+        && (rootElement.value?.scrollTop ?? 0) <= 0
+      const activePointerId = pointerId
+      startY = undefined
+      pointerId = undefined
+      dragging.value = false
+      releaseCapturedPointer(activePointerId)
+      if (!shouldRefresh) {
+        distance.value = 0
+        return
+      }
+      emit('refresh')
+      void nextTick(() => {
+        distance.value = props.loading ? props.headHeight : 0
+      })
+    }
+
+    function touchStart(event: TouchEvent) {
+      const touch = event.touches[0]
+      if (touch) {
+        begin(touch.clientY)
+      }
+    }
+
+    function touchMove(event: TouchEvent) {
+      const touch = event.touches[0]
+      if (touch) {
+        move(touch.clientY, event)
+      }
+    }
+
+    function pointerDown(event: PointerEvent) {
+      if (event.pointerType === 'touch' || !begin(event.clientY)) {
+        return
+      }
+      pointerId = event.pointerId
+      try {
+        rootElement.value?.setPointerCapture?.(event.pointerId)
+      }
+      catch {
+        // Synthetic events do not own an active browser pointer.
+      }
+    }
+
+    function pointerMove(event: PointerEvent) {
+      if (pointerId === event.pointerId) {
+        move(event.clientY, event)
+      }
+    }
+
+    function pointerUp(event: PointerEvent) {
+      if (event.pointerType !== 'touch') {
+        finish(true, event.pointerId)
+      }
+    }
+
+    function pointerCancel(event: PointerEvent) {
+      if (event.pointerType !== 'touch') {
+        finish(false, event.pointerId)
+      }
+    }
+
+    return () => h('div', {
+      ...attrs,
+      'aria-busy': String(props.loading),
+      'class': ['varo-pull-refresh', attrs.class],
+      'data-disabled': String(props.disabled),
+      'data-state': state.value,
+      'onPointercancel': pointerCancel,
+      'onPointerdown': pointerDown,
+      'onPointermove': pointerMove,
+      'onPointerup': pointerUp,
+      'onTouchcancel': () => finish(false),
+      'onTouchend': () => finish(true),
+      'onTouchmove': touchMove,
+      'onTouchstart': touchStart,
+      'ref': (element: unknown) => {
+        rootElement.value = element instanceof HTMLElement ? element : null
+      },
+    }, [
+      h('div', { class: 'varo-pull-refresh__track', style: trackStyle.value }, [
+        h('div', {
+          'aria-live': 'polite',
+          'class': 'varo-pull-refresh__indicator',
+          'role': 'status',
+          'style': indicatorStyle.value,
+        }, slots.indicator?.({ distance: distance.value, state: state.value }) ?? indicatorText.value),
+        h('div', { class: 'varo-pull-refresh__content' }, slots.default?.()),
+      ]),
+    ])
+  },
+})
diff --git a/registry/components/pull-refresh/registry.json b/registry/components/pull-refresh/registry.json
new file mode 100644
index 00000000..9b084cde
--- /dev/null
+++ b/registry/components/pull-refresh/registry.json
@@ -0,0 +1,41 @@
+{
+  "name": "pull-refresh",
+  "type": "component",
+  "title": "VPullRefresh",
+  "description": "Top-edge pull-to-refresh with controlled loading, H5 gesture handling, and native mini-program refresher semantics.",
+  "exportName": "VPullRefresh",
+  "targets": [
+    "h5",
+    "weapp"
+  ],
+  "dependencies": [],
+  "targetDependencies": {
+    "h5": [
+      "vue"
+    ],
+    "weapp": [
+      "wevu"
+    ]
+  },
+  "registryDependencies": [
+    "themes/base"
+  ],
+  "targetRegistryDependencies": {
+    "weapp": [
+      "utils/cn"
+    ]
+  },
+  "files": [
+    {
+      "target": "h5",
+      "from": "registry/components/pull-refresh/h5.ts",
+      "to": "src/components/ui/pull-refresh.ts"
+    },
+    {
+      "target": "weapp",
+      "from": "registry/components/pull-refresh/v-pull-refresh.vue",
+      "to": "src/components/ui/v-pull-refresh.vue"
+    }
+  ],
+  "docs": "/components/pull-refresh"
+}
diff --git a/registry/components/pull-refresh/v-pull-refresh.vue b/registry/components/pull-refresh/v-pull-refresh.vue
new file mode 100644
index 00000000..3aa7a1d1
--- /dev/null
+++ b/registry/components/pull-refresh/v-pull-refresh.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed } from 'wevu'
+import { cn } from '../../lib/cn'
+
+const props = withDefaults(
+  defineProps<{
+    className?: ClassValue
+    disabled?: boolean
+    loading?: boolean
+    loadingText?: string
+    threshold?: number
+  }>(),
+  {
+    className: undefined,
+    disabled: false,
+    loading: false,
+    loadingText: '加载中',
+    threshold: 64,
+  },
+)
+
+const emit = defineEmits<{
+  refresh: []
+}>()
+
+const classes = computed(() => cn('varo-pull-refresh', props.className))
+const dataDisabled = computed(() => String(props.disabled))
+const dataState = computed(() => props.loading ? 'loading' : 'idle')
+const refresherEnabled = computed(() => !props.disabled)
+
+function refresh() {
+  if (!props.disabled && !props.loading) {
+    emit('refresh')
+  }
+}
+</script>
+
+<template>
+  <scroll-view
+    :class="classes"
+    scroll-y
+    refresher-default-style="black"
+    :refresher-enabled="refresherEnabled"
+    :refresher-threshold="props.threshold"
+    :refresher-triggered="props.loading"
+    :aria-busy="props.loading"
+    :data-disabled="dataDisabled"
+    :data-state="dataState"
+    @refresherrefresh="refresh"
+  >
+    <slot />
+    <view v-if="props.loading" class="varo-pull-refresh__native-status" aria-live="polite">
+      {{ props.loadingText }}
+    </view>
+  </scroll-view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/registry/components/radio/selection.ts b/registry/components/radio/selection.ts
index d6371a0f..c34ec0ee 100644
--- a/registry/components/radio/selection.ts
+++ b/registry/components/radio/selection.ts
@@ -235,7 +235,9 @@ export const VRadio = defineComponent({
           'onClick': select,
         },
         [
-          h('span', { 'class': 'varo-radio__icon', 'aria-hidden': 'true' }, isChecked.value ? [h(VIcon, { name: 'dot', size: 10 })] : []),
+          h('span', { 'class': 'varo-radio__icon', 'aria-hidden': 'true' }, [
+            h('span', { class: 'varo-radio__dot' }),
+          ]),
           h('span', { class: 'varo-radio__label' }, slots.default?.() ?? props.label),
         ],
       )
diff --git a/registry/components/radio/weapp-vite.vue b/registry/components/radio/weapp-vite.vue
index 84c4b72d..69ded94a 100644
--- a/registry/components/radio/weapp-vite.vue
+++ b/registry/components/radio/weapp-vite.vue
@@ -58,6 +58,9 @@ function select() {
 <template>
   <button
     :class="classes"
+    hover-class="varo-radio--pressed"
+    :hover-start-time="20"
+    :hover-stay-time="70"
     type="button"
     role="radio"
     :aria-checked="checked"
@@ -69,7 +72,7 @@ function select() {
   >
     <view class="varo-radio__icon" aria-hidden="true">
       <slot name="icon">
-        <view v-if="checked" class="varo-radio__dot" />
+        <view class="varo-radio__dot" />
       </slot>
     </view>
     <text class="varo-radio__label">
@@ -83,15 +86,6 @@ function select() {
   </button>
 </template>
 
-<style>
-.varo-radio__dot {
-  width: 6px;
-  height: 6px;
-  background: currentcolor;
-  border-radius: 50%;
-}
-</style>
-
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/select/select.ts b/registry/components/select/select.ts
index 2659ea4b..d07170d4 100644
--- a/registry/components/select/select.ts
+++ b/registry/components/select/select.ts
@@ -364,7 +364,7 @@ export const VSelect = defineComponent({
                   'onClick': clear,
                   'onMousedown': (event: MouseEvent) => event.preventDefault(),
                 },
-                h(VIcon, { name: 'close', size: 14 }),
+                h(VIcon, { name: 'danger', size: 16 }),
               )
             : null,
           h('span', {
diff --git a/registry/components/select/weapp-vite.vue b/registry/components/select/weapp-vite.vue
index 8ba95954..1d340ab4 100644
--- a/registry/components/select/weapp-vite.vue
+++ b/registry/components/select/weapp-vite.vue
@@ -50,6 +50,7 @@ const emit = defineEmits<{
 
 const keyword = shallowRef<string | null>(null)
 const open = shallowRef(false)
+const clearActive = shallowRef(false)
 const controlled = computed(() => true)
 const normalizedValue = computed<SelectValue | SelectValue[] | undefined>(() => props.value ?? undefined)
 const selectRoot = useSelectRoot({
@@ -93,7 +94,7 @@ const selectedPreviewStyle = computed(() =>
     : '',
 )
 const showFilterInput = computed(() => props.filterable && !props.readonly)
-const showClear = computed(() => props.clearable && selectedValues.value.length > 0 && interactive.value && selectOpen.value)
+const showClear = computed(() => props.clearable && selectedValues.value.length > 0 && interactive.value)
 
 watch(selectOpen, (isOpen) => {
   if (!isOpen) { keyword.value = null }
@@ -146,7 +147,17 @@ function closePanel() {
 </script>
 
 <template>
-  <view :class="rootClass" :data-disabled="String(selectDisabled)" :data-readonly="String(props.readonly)" :data-multiple="String(multiple)" :data-open="String(selectOpen)">
+  <view
+    :class="rootClass"
+    :data-disabled="String(selectDisabled)"
+    :data-readonly="String(props.readonly)"
+    :data-multiple="String(multiple)"
+    :data-open="String(selectOpen)"
+    :data-clear-active="String(clearActive)"
+    @touchstart="clearActive = true"
+    @touchend="clearActive = selectOpen"
+    @touchcancel="clearActive = selectOpen"
+  >
     <view v-if="selectOpen" class="varo-select__dismiss fixed inset-0 -z-10" aria-hidden="true" @click="closePanel" />
     <view
       v-if="showFilterInput"
@@ -176,7 +187,7 @@ function closePanel() {
           aria-label="Clear selection"
           @click.stop="clear"
         >
-          <VIcon name="close" :size="14" />
+          <VIcon name="danger" :size="16" />
         </button>
         <text class="varo-select__arrow" aria-hidden="true" />
       </view>
@@ -211,7 +222,7 @@ function closePanel() {
           aria-label="Clear selection"
           @click.stop="clear"
         >
-          <VIcon name="close" :size="14" />
+          <VIcon name="danger" :size="16" />
         </button>
         <text class="varo-select__arrow" aria-hidden="true" />
       </view>
diff --git a/registry/components/signature/h5.ts b/registry/components/signature/h5.ts
new file mode 100644
index 00000000..e0df3672
--- /dev/null
+++ b/registry/components/signature/h5.ts
@@ -0,0 +1,295 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import '../../styles/varo.css'
+
+export interface SignaturePoint {
+  x: number
+  y: number
+}
+
+export interface SignatureStroke {
+  points: SignaturePoint[]
+}
+
+function cloneStrokes(strokes: SignatureStroke[]): SignatureStroke[] {
+  return strokes.map(stroke => ({ points: stroke.points.map(point => ({ ...point })) }))
+}
+
+export const VSignature = defineComponent({
+  name: 'VSignature',
+  props: {
+    ariaLabel: {
+      type: String,
+      default: 'Signature pad',
+    },
+    background: {
+      type: String,
+      default: '#ffffff',
+    },
+    clearText: {
+      type: String,
+      default: '清除签名',
+    },
+    disabled: Boolean,
+    height: {
+      type: Number,
+      default: 200,
+    },
+    lineColor: {
+      type: String,
+      default: '#172033',
+    },
+    lineWidth: {
+      type: Number,
+      default: 2,
+    },
+    showClear: {
+      type: Boolean,
+      default: true,
+    },
+    value: {
+      type: Array as PropType<SignatureStroke[]>,
+      default: () => [],
+    },
+  },
+  emits: ['update:value', 'change', 'start', 'end', 'clear'],
+  setup(props, { attrs, emit, expose }) {
+    const canvas = shallowRef<HTMLCanvasElement | null>(null)
+    const strokes = shallowRef(cloneStrokes(props.value))
+    let currentPoints: SignaturePoint[] = []
+    let activePointerId: number | undefined
+    let resizeObserver: ResizeObserver | undefined
+    let canvasWidth = 0
+    let canvasHeight = props.height
+
+    const empty = computed(() => strokes.value.length === 0)
+    const canvasStyle = computed(() => ({
+      background: props.background,
+      height: `${props.height}px`,
+    }))
+
+    function context(): CanvasRenderingContext2D | null {
+      return canvas.value?.getContext('2d') ?? null
+    }
+
+    function prepareContext(ctx: CanvasRenderingContext2D) {
+      ctx.lineCap = 'round'
+      ctx.lineJoin = 'round'
+      ctx.lineWidth = props.lineWidth
+      ctx.strokeStyle = props.lineColor
+    }
+
+    function drawStroke(ctx: CanvasRenderingContext2D, stroke: SignatureStroke) {
+      if (stroke.points.length === 0) {
+        return
+      }
+      prepareContext(ctx)
+      ctx.beginPath()
+      const first = stroke.points[0]
+      const firstX = first.x * canvasWidth
+      const firstY = first.y * canvasHeight
+      if (stroke.points.length === 1) {
+        ctx.fillStyle = props.lineColor
+        ctx.arc(firstX, firstY, Math.max(0.5, props.lineWidth / 2), 0, Math.PI * 2)
+        ctx.fill()
+        return
+      }
+      ctx.moveTo(firstX, firstY)
+      for (const point of stroke.points.slice(1)) {
+        ctx.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+      }
+      ctx.stroke()
+    }
+
+    function redraw() {
+      const ctx = context()
+      if (!ctx) {
+        return
+      }
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      ctx.fillStyle = props.background
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+      for (const stroke of strokes.value) {
+        drawStroke(ctx, stroke)
+      }
+    }
+
+    function resizeCanvas() {
+      const element = canvas.value
+      if (!element) {
+        return
+      }
+      const rect = element.getBoundingClientRect()
+      canvasWidth = Math.max(1, rect.width)
+      canvasHeight = Math.max(1, props.height)
+      const ratio = Math.max(1, window.devicePixelRatio || 1)
+      element.width = Math.round(canvasWidth * ratio)
+      element.height = Math.round(canvasHeight * ratio)
+      const ctx = context()
+      ctx?.setTransform(ratio, 0, 0, ratio, 0, 0)
+      redraw()
+    }
+
+    function pointFromEvent(event: PointerEvent): SignaturePoint | undefined {
+      const element = canvas.value
+      if (!element || canvasWidth <= 0 || canvasHeight <= 0) {
+        return undefined
+      }
+      const rect = element.getBoundingClientRect()
+      return {
+        x: Math.min(1, Math.max(0, (event.clientX - rect.left) / canvasWidth)),
+        y: Math.min(1, Math.max(0, (event.clientY - rect.top) / canvasHeight)),
+      }
+    }
+
+    function pointerDown(event: PointerEvent) {
+      if (props.disabled || activePointerId !== undefined) {
+        return
+      }
+      const point = pointFromEvent(event)
+      if (!point) {
+        return
+      }
+      activePointerId = event.pointerId
+      currentPoints = [point]
+      try {
+        canvas.value?.setPointerCapture?.(event.pointerId)
+      }
+      catch {
+        // Synthetic pointer events may not own browser capture.
+      }
+      emit('start')
+    }
+
+    function pointerMove(event: PointerEvent) {
+      if (props.disabled || activePointerId !== event.pointerId || currentPoints.length === 0) {
+        return
+      }
+      const point = pointFromEvent(event)
+      if (!point) {
+        return
+      }
+      event.preventDefault()
+      const previous = currentPoints[currentPoints.length - 1]
+      currentPoints.push(point)
+      const ctx = context()
+      if (!ctx) {
+        return
+      }
+      prepareContext(ctx)
+      ctx.beginPath()
+      ctx.moveTo(previous.x * canvasWidth, previous.y * canvasHeight)
+      ctx.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+      ctx.stroke()
+    }
+
+    function samePoint(left: SignaturePoint, right: SignaturePoint) {
+      return left.x === right.x && left.y === right.y
+    }
+
+    function releaseActivePointer() {
+      if (activePointerId === undefined) {
+        return
+      }
+      const pointerId = activePointerId
+      activePointerId = undefined
+      try {
+        canvas.value?.releasePointerCapture?.(pointerId)
+      }
+      catch {
+        // Interrupted pointers may already have released capture.
+      }
+    }
+
+    function cancelActiveStroke() {
+      releaseActivePointer()
+      currentPoints = []
+      redraw()
+    }
+
+    function finish(event: PointerEvent, commit: boolean) {
+      if (activePointerId !== event.pointerId) {
+        return
+      }
+      if (props.disabled || !commit || currentPoints.length === 0) {
+        cancelActiveStroke()
+        return
+      }
+      const terminalPoint = pointFromEvent(event)
+      const previousPoint = currentPoints[currentPoints.length - 1]
+      if (terminalPoint && !samePoint(previousPoint, terminalPoint)) {
+        currentPoints.push(terminalPoint)
+      }
+      releaseActivePointer()
+      const stroke = { points: currentPoints.map(point => ({ ...point })) }
+      const next = [...strokes.value, stroke]
+      currentPoints = []
+      emit('update:value', cloneStrokes(next))
+      emit('change', cloneStrokes(next))
+      emit('end', { points: stroke.points.map(point => ({ ...point })) })
+      void nextTick(redraw)
+    }
+    function clear() {
+      if (props.disabled || strokes.value.length === 0) {
+        return
+      }
+      currentPoints = []
+      emit('update:value', [])
+      emit('change', [])
+      emit('clear')
+      void nextTick(redraw)
+    }
+
+    watch(() => props.value, (value) => {
+      strokes.value = cloneStrokes(value)
+      void nextTick(redraw)
+    }, { deep: true })
+    watch(() => props.disabled, (disabled) => {
+      if (disabled && activePointerId !== undefined) {
+        cancelActiveStroke()
+      }
+    })
+    watch([() => props.background, () => props.height, () => props.lineColor, () => props.lineWidth], () => {
+      void nextTick(resizeCanvas)
+    })
+
+    onMounted(() => {
+      resizeCanvas()
+      if (typeof ResizeObserver !== 'undefined' && canvas.value) {
+        resizeObserver = new ResizeObserver(resizeCanvas)
+        resizeObserver.observe(canvas.value)
+      }
+    })
+    onBeforeUnmount(() => resizeObserver?.disconnect())
+    expose({ clear })
+
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-signature', attrs.class],
+      'data-disabled': String(props.disabled),
+      'data-empty': String(empty.value),
+    }, [
+      h('canvas', {
+        'aria-disabled': props.disabled || undefined,
+        'aria-label': props.ariaLabel,
+        'class': 'varo-signature__canvas',
+        'onPointercancel': (event: PointerEvent) => finish(event, false),
+        'onPointerdown': pointerDown,
+        'onPointermove': pointerMove,
+        'onPointerup': (event: PointerEvent) => finish(event, true),
+        'ref': (element: unknown) => {
+          canvas.value = element instanceof HTMLCanvasElement ? element : null
+        },
+        'style': canvasStyle.value,
+      }),
+      props.showClear
+        ? h('button', {
+            class: 'varo-signature__clear',
+            disabled: props.disabled || empty.value,
+            type: 'button',
+            onClick: clear,
+          }, props.clearText)
+        : null,
+    ])
+  },
+})
diff --git a/registry/components/signature/registry.json b/registry/components/signature/registry.json
new file mode 100644
index 00000000..ad683e37
--- /dev/null
+++ b/registry/components/signature/registry.json
@@ -0,0 +1,41 @@
+{
+  "name": "signature",
+  "type": "component",
+  "title": "VSignature",
+  "description": "Controlled signature pad with normalized stroke data, clear action, H5 pointer input, and native mini-program canvas input.",
+  "exportName": "VSignature",
+  "targets": [
+    "h5",
+    "weapp"
+  ],
+  "dependencies": [],
+  "targetDependencies": {
+    "h5": [
+      "vue"
+    ],
+    "weapp": [
+      "wevu"
+    ]
+  },
+  "registryDependencies": [
+    "themes/base"
+  ],
+  "targetRegistryDependencies": {
+    "weapp": [
+      "utils/cn"
+    ]
+  },
+  "files": [
+    {
+      "target": "h5",
+      "from": "registry/components/signature/h5.ts",
+      "to": "src/components/ui/signature.ts"
+    },
+    {
+      "target": "weapp",
+      "from": "registry/components/signature/v-signature.vue",
+      "to": "src/components/ui/v-signature.vue"
+    }
+  ],
+  "docs": "/components/signature"
+}
diff --git a/registry/components/signature/v-signature.vue b/registry/components/signature/v-signature.vue
new file mode 100644
index 00000000..02d9966f
--- /dev/null
+++ b/registry/components/signature/v-signature.vue
@@ -0,0 +1,337 @@
+<script lang="ts">
+</script>
+
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useNativeInstance, watch } from 'wevu'
+import { cn } from '../../lib/cn'
+
+export interface SignaturePoint {
+  x: number
+  y: number
+}
+
+export interface SignatureStroke {
+  points: SignaturePoint[]
+}
+
+defineOptions({
+  properties: {
+    value: { type: null },
+  },
+})
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    background?: string
+    className?: ClassValue
+    clearText?: string
+    disabled?: boolean
+    height?: number
+    lineColor?: string
+    lineWidth?: number
+    showClear?: boolean
+    value?: SignatureStroke[]
+  }>(),
+  {
+    ariaLabel: 'Signature pad',
+    background: '#ffffff',
+    className: undefined,
+    clearText: '清除签名',
+    disabled: false,
+    height: 200,
+    lineColor: '#172033',
+    lineWidth: 2,
+    showClear: true,
+    value: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  'change': [value: SignatureStroke[]]
+  'clear': []
+  'end': [stroke: SignatureStroke]
+  'start': []
+  'update:value': [value: SignatureStroke[]]
+}>()
+
+let signatureSequence = 0
+
+function nextSignatureId() {
+  signatureSequence += 1
+  return `varo-signature-${signatureSequence}`
+}
+
+interface SignatureTouch {
+  identifier?: number
+  clientX?: number
+  clientY?: number
+  x?: number
+  y?: number
+}
+
+interface SignatureTouchDetail {
+  changedTouches?: ArrayLike<SignatureTouch>
+  touches?: ArrayLike<SignatureTouch>
+}
+function eventTouch(event: TouchEvent, changed = false, identifier?: number): SignatureTouch | undefined {
+  const directTouches = (changed ? event.changedTouches : event.touches) as unknown as ArrayLike<SignatureTouch> | undefined
+  const detail = (event as TouchEvent & { detail?: SignatureTouchDetail }).detail
+  const detailTouches = changed ? detail?.changedTouches : detail?.touches
+  const touches = directTouches?.length ? directTouches : detailTouches
+  if (identifier === undefined) {
+    return touches?.[0]
+  }
+  for (let index = 0; index < (touches?.length ?? 0); index += 1) {
+    const touch = touches?.[index]
+    if (touch?.identifier === identifier) {
+      return touch
+    }
+  }
+  return undefined
+}
+
+function cloneStrokes(strokes: SignatureStroke[]): SignatureStroke[] {
+  return strokes.map(stroke => ({ points: stroke.points.map(point => ({ ...point })) }))
+}
+
+const nativeInstance = useNativeInstance()
+const owner = nativeInstance as unknown as WechatMiniprogram.Component.TrivialInstance
+const canvasId = nextSignatureId()
+const classes = computed(() => cn('varo-signature', props.className))
+const canvasStyle = computed(() => `height: ${props.height}px; background: ${props.background}`)
+const strokes = shallowRef(cloneStrokes(props.value))
+const dataDisabled = computed<'true' | 'false'>(() => props.disabled ? 'true' : 'false')
+const dataEmpty = computed(() => String(strokes.value.length === 0))
+let context: WechatMiniprogram.CanvasContext | undefined
+let currentPoints: SignaturePoint[] = []
+let activeTouchId: number | undefined
+let canvasWidth = 320
+let canvasHeight = props.height
+let initializeTimer: ReturnType<typeof setTimeout> | undefined
+
+function prepareContext() {
+  if (!context) {
+    return
+  }
+  context.setStrokeStyle(props.lineColor)
+  context.setLineWidth(props.lineWidth)
+  context.setLineCap('round')
+  context.setLineJoin('round')
+}
+
+function drawStroke(stroke: SignatureStroke) {
+  if (!context || stroke.points.length === 0) {
+    return
+  }
+  prepareContext()
+  context.beginPath()
+  const first = stroke.points[0]
+  const firstX = first.x * canvasWidth
+  const firstY = first.y * canvasHeight
+  if (stroke.points.length === 1) {
+    context.setFillStyle(props.lineColor)
+    context.arc(firstX, firstY, Math.max(0.5, props.lineWidth / 2), 0, Math.PI * 2)
+    context.fill()
+    return
+  }
+  context.moveTo(firstX, firstY)
+  for (const point of stroke.points.slice(1)) {
+    context.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+  }
+  context.stroke()
+}
+
+function redraw() {
+  if (!context) {
+    return
+  }
+  context.clearRect(0, 0, canvasWidth, canvasHeight)
+  context.setFillStyle(props.background)
+  context.fillRect(0, 0, canvasWidth, canvasHeight)
+  for (const stroke of strokes.value) {
+    drawStroke(stroke)
+  }
+  context.draw()
+}
+
+function pointFromTouch(touch: SignatureTouch): SignaturePoint {
+  const x = touch.x ?? touch.clientX ?? 0
+  const y = touch.y ?? touch.clientY ?? 0
+  return {
+    x: Math.min(1, Math.max(0, x / canvasWidth)),
+    y: Math.min(1, Math.max(0, y / canvasHeight)),
+  }
+}
+
+function touchStart(event: TouchEvent) {
+  if (props.disabled || currentPoints.length > 0) {
+    return
+  }
+  const touch = eventTouch(event)
+  if (!touch) {
+    return
+  }
+  activeTouchId = touch.identifier
+  currentPoints = [pointFromTouch(touch)]
+  emit('start')
+}
+
+function touchCancel(event?: TouchEvent) {
+  if (event && activeTouchId !== undefined && !eventTouch(event, true, activeTouchId)) {
+    return
+  }
+  activeTouchId = undefined
+  currentPoints = []
+  redraw()
+}
+
+function touchMove(event: TouchEvent) {
+  if (props.disabled) {
+    if (currentPoints.length > 0) {
+      touchCancel()
+    }
+    return
+  }
+  if (currentPoints.length === 0) {
+    return
+  }
+  const touch = eventTouch(event, false, activeTouchId)
+  if (!touch) {
+    return
+  }
+  const point = pointFromTouch(touch)
+  const previous = currentPoints[currentPoints.length - 1]
+  currentPoints.push(point)
+  if (!context) {
+    return
+  }
+  prepareContext()
+  context.beginPath()
+  context.moveTo(previous.x * canvasWidth, previous.y * canvasHeight)
+  context.lineTo(point.x * canvasWidth, point.y * canvasHeight)
+  context.stroke()
+  context.draw(true)
+}
+
+function samePoint(left: SignaturePoint, right: SignaturePoint) {
+  return left.x === right.x && left.y === right.y
+}
+
+function touchEnd(event: TouchEvent) {
+  if (props.disabled) {
+    touchCancel()
+    return
+  }
+  if (currentPoints.length === 0) {
+    return
+  }
+  const touch = eventTouch(event, true, activeTouchId)
+  if (activeTouchId !== undefined && !touch) {
+    return
+  }
+  const terminalPoint = touch ? pointFromTouch(touch) : undefined
+  const previousPoint = currentPoints[currentPoints.length - 1]
+  if (terminalPoint && !samePoint(previousPoint, terminalPoint)) {
+    currentPoints.push(terminalPoint)
+  }
+  activeTouchId = undefined
+  const stroke = { points: currentPoints.map(point => ({ ...point })) }
+  const next = [...strokes.value, stroke]
+  currentPoints = []
+  emit('update:value', cloneStrokes(next))
+  emit('change', cloneStrokes(next))
+  emit('end', { points: stroke.points.map(point => ({ ...point })) })
+  void nextTick(redraw)
+}
+
+function clear() {
+  if (props.disabled || strokes.value.length === 0) {
+    return
+  }
+  activeTouchId = undefined
+  currentPoints = []
+  emit('update:value', [])
+  emit('change', [])
+  emit('clear')
+  void nextTick(redraw)
+}
+
+function initialize() {
+  context = wx.createCanvasContext(canvasId, owner)
+  const query = nativeInstance.createSelectorQuery() ?? wx.createSelectorQuery().in(owner)
+  query.select(`#${canvasId}`).boundingClientRect((rect) => {
+    if (rect) {
+      canvasWidth = Math.max(1, rect.width)
+      canvasHeight = Math.max(1, rect.height)
+    }
+    redraw()
+  }).exec()
+}
+
+function scheduleInitialize() {
+  clearTimeout(initializeTimer)
+  initializeTimer = setTimeout(() => {
+    initializeTimer = undefined
+    initialize()
+  }, 0)
+}
+
+watch(() => props.value, (value) => {
+  strokes.value = cloneStrokes(value)
+  redraw()
+}, { deep: true })
+watch([() => props.background, () => props.lineColor, () => props.lineWidth], redraw)
+watch(() => props.height, scheduleInitialize)
+watch(() => props.disabled, (disabled) => {
+  if (disabled && currentPoints.length > 0) {
+    touchCancel()
+  }
+})
+
+onMounted(() => {
+  scheduleInitialize()
+  wx.onWindowResize?.(scheduleInitialize)
+})
+onBeforeUnmount(() => {
+  clearTimeout(initializeTimer)
+  wx.offWindowResize?.(scheduleInitialize)
+})
+
+defineExpose({ clear })
+</script>
+
+<template>
+  <view :class="classes" :data-disabled="dataDisabled" :data-empty="dataEmpty">
+    <canvas
+      :id="canvasId"
+      :canvas-id="canvasId"
+      class="varo-signature__canvas"
+      :style="canvasStyle"
+      :aria-label="props.ariaLabel"
+      :aria-disabled="dataDisabled"
+      :disable-scroll="true"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
+      @touchcancel="touchCancel"
+    />
+    <button
+      v-if="props.showClear"
+      class="varo-signature__clear"
+      type="button"
+      :disabled="props.disabled || strokes.length === 0"
+      @click="clear"
+    >
+      {{ props.clearText }}
+    </button>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/registry/components/switch/weapp-vite.vue b/registry/components/switch/weapp-vite.vue
index f1a6c37c..b2015c45 100644
--- a/registry/components/switch/weapp-vite.vue
+++ b/registry/components/switch/weapp-vite.vue
@@ -5,11 +5,13 @@ import { varoReactiveRuntime } from '../../lib/varo-primitives'
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
     disabled?: boolean
     loading?: boolean
     modelValue?: boolean
   }>(),
   {
+    ariaLabel: 'Switch',
     disabled: false,
     loading: false,
     modelValue: false,
@@ -33,6 +35,7 @@ const checked = computed(() => switchRoot.state.checked.value)
 const interactive = computed(() => switchRoot.state.interactive.value)
 const loading = computed(() => switchRoot.state.loading.value)
 const thumbState = computed(() => switchRoot.state.checked.value ? 'checked' : 'unchecked')
+const interactiveAttribute = computed(() => String(interactive.value))
 
 function update(value: boolean) {
   emit('update:modelValue', value)
@@ -47,12 +50,17 @@ function toggle() {
 <template>
   <button
     class="varo-switch"
+    :aria-label="props.ariaLabel"
+    hover-class="varo-switch--pressed"
+    :hover-start-time="20"
+    :hover-stay-time="70"
     type="button"
     role="switch"
     :disabled="!interactive"
     :aria-checked="checked"
     :data-state="thumbState"
     :data-loading="String(loading)"
+    :data-interactive="interactiveAttribute"
     @click="toggle"
   >
     <view class="varo-switch__track">
diff --git a/registry/components/toast/registry.json b/registry/components/toast/registry.json
index 561f730e..d5df184a 100644
--- a/registry/components/toast/registry.json
+++ b/registry/components/toast/registry.json
@@ -1,8 +1,8 @@
 {
   "name": "toast",
   "type": "component",
-  "title": "VToast",
-  "description": "Controlled transient feedback for success, warning, error, and loading states.",
+  "title": "VToast and VToastRegion",
+  "description": "Controlled status-morphing toast cards plus a target-native region for stacked feedback.",
   "exportName": "VToast",
   "targets": [
     "h5",
@@ -36,6 +36,11 @@
       "target": "weapp",
       "from": "registry/components/toast/v-toast.vue",
       "to": "src/components/ui/v-toast.vue"
+    },
+    {
+      "target": "weapp",
+      "from": "registry/components/toast/v-toast-region.vue",
+      "to": "src/components/ui/v-toast-region.vue"
     }
   ],
   "docs": "/components/toast"
diff --git a/registry/components/toast/toast.ts b/registry/components/toast/toast.ts
index d83b8594..241125a1 100644
--- a/registry/components/toast/toast.ts
+++ b/registry/components/toast/toast.ts
@@ -44,67 +44,66 @@ export const VToast = defineComponent({
   name: 'VToast',
   props: {
     visible: Boolean,
-    message: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String as PropType<VToastType>,
-      default: 'text',
-    },
-    position: {
-      type: String as PropType<VToastPosition>,
-      default: 'middle',
-    },
-    closeable: {
-      type: Boolean,
-      default: false,
-    },
-    closeLabel: {
-      type: String,
-      default: '关闭通知',
-    },
+    message: { type: String, default: '' },
+    title: { type: String, default: undefined },
+    type: { type: String as PropType<VToastType>, default: 'text' },
+    position: { type: String as PropType<VToastPosition>, default: 'middle' },
+    actionText: { type: String, default: undefined },
+    actionLabel: { type: String, default: undefined },
+    closeable: { type: Boolean, default: false },
+    closeLabel: { type: String, default: '关闭通知' },
   },
-  emits: ['update:visible', 'close'],
+  emits: ['update:visible', 'close', 'action'],
   setup(props, { attrs, emit, slots }) {
     function close() {
       emit('update:visible', false)
       emit('close')
     }
+    function action() {
+      emit('action')
+    }
+
+    return () => h(Transition, { appear: true, name: 'varo-toast' }, {
+      default: () => props.visible
+        ? h('div', {
+            ...attrs,
+            'class': ['varo-toast', `varo-toast--${props.type}`, `varo-toast--${props.position}`, attrs.class],
+            'role': props.type === 'danger' || props.type === 'warning' ? 'alert' : 'status',
+            'aria-atomic': 'true',
+            'aria-busy': props.type === 'loading' || undefined,
+            'aria-live': props.type === 'danger' || props.type === 'warning' ? 'assertive' : 'polite',
+            'data-type': props.type,
+            'data-position': props.position,
+          }, [
+            props.type === 'text' ? null : renderToastIcon(props.type),
+            h('span', { class: 'varo-toast__body' }, [
+              props.title ? h('strong', { class: 'varo-toast__title' }, props.title) : null,
+              h('span', { class: 'varo-toast__message' }, slots.default?.() ?? props.message),
+            ]),
+            props.actionText
+              ? h('button', { 'aria-label': props.actionLabel ?? props.actionText, 'class': 'varo-toast__action', 'type': 'button', 'onClick': action }, props.actionText)
+              : null,
+            props.closeable
+              ? h('button', { 'aria-label': props.closeLabel, 'class': 'varo-toast__close', 'type': 'button', 'onClick': close }, renderCloseIcon())
+              : null,
+          ])
+        : null,
+    })
+  },
+})
 
-    return () =>
-      h(
-        Transition,
-        { appear: true, name: 'varo-toast' },
-        {
-          default: () => props.visible
-            ? h(
-                'div',
-                {
-                  ...attrs,
-                  'class': ['varo-toast', `varo-toast--${props.type}`, `varo-toast--${props.position}`, attrs.class],
-                  'role': props.type === 'danger' || props.type === 'warning' ? 'alert' : 'status',
-                  'aria-atomic': 'true',
-                  'aria-busy': props.type === 'loading' || undefined,
-                  'aria-live': props.type === 'danger' || props.type === 'warning' ? 'assertive' : 'polite',
-                  'data-type': props.type,
-                  'data-position': props.position,
-                },
-                [
-                  props.type === 'text' ? null : renderToastIcon(props.type),
-                  h('span', { class: 'varo-toast__message' }, slots.default?.() ?? props.message),
-                  props.closeable
-                    ? h('button', {
-                        'aria-label': props.closeLabel,
-                        'class': 'varo-toast__close',
-                        'type': 'button',
-                        'onClick': close,
-                      }, renderCloseIcon())
-                    : null,
-                ],
-              )
-            : null,
-        },
-      )
+export const VToastRegion = defineComponent({
+  name: 'VToastRegion',
+  props: {
+    inline: Boolean,
+    position: { type: String as PropType<VToastPosition>, default: 'top' },
+  },
+  setup(props, { attrs, slots }) {
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-toast-region', attrs.class],
+      'data-inline': String(props.inline),
+      'data-position': props.position,
+    }, slots.default?.() ?? [])
   },
 })
diff --git a/registry/components/toast/v-toast-region.vue b/registry/components/toast/v-toast-region.vue
new file mode 100644
index 00000000..05c5561f
--- /dev/null
+++ b/registry/components/toast/v-toast-region.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ClassValue } from '../../lib/cn'
+import { computed } from 'wevu'
+import { cn } from '../../lib/cn'
+
+type VToastPosition = 'top' | 'middle' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  className?: ClassValue
+  inline?: boolean
+  position?: VToastPosition
+}>(), {
+  className: undefined,
+  inline: false,
+  position: 'top',
+})
+
+const classes = computed(() => cn('varo-toast-region', props.className))
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :data-inline="String(props.inline)"
+    :data-position="props.position"
+  >
+    <slot />
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/registry/components/toast/v-toast.vue b/registry/components/toast/v-toast.vue
index b6a558b2..72d2f74a 100644
--- a/registry/components/toast/v-toast.vue
+++ b/registry/components/toast/v-toast.vue
@@ -10,80 +10,98 @@ type VToastType = 'text' | 'success' | 'warning' | 'danger' | 'loading'
 const props = withDefaults(
   defineProps<{
     className?: ClassValue
+    actionLabel?: string
+    actionText?: string
     closeable?: boolean
     closeLabel?: string
     message?: string
     position?: VToastPosition
     type?: VToastType
+    title?: string
     visible?: boolean
   }>(),
   {
+    actionLabel: undefined,
+    actionText: undefined,
     closeable: false,
     closeLabel: '关闭通知',
     message: '',
     position: 'middle',
     type: 'text',
+    title: undefined,
     visible: false,
   },
 )
 
 const emit = defineEmits<{
+  'action': []
   'close': []
   'update:visible': [visible: boolean]
 }>()
 
 type ToastTransitionPhase = 'idle' | 'enter-from' | 'enter-active' | 'leave-active' | 'leave-to'
-
-const ENTER_DURATION = 220
-const LEAVE_DURATION = 160
 const rendered = shallowRef(props.visible)
 const phase = shallowRef<ToastTransitionPhase>('idle')
-let transitionTimer: ReturnType<typeof setTimeout> | undefined
 let transitionVersion = 0
+const TRANSITION_SAFETY_TIMEOUT = 5000
+let transitionSafetyTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearTransitionSafetyTimer() {
+  if (transitionSafetyTimer === undefined) { return }
+  clearTimeout(transitionSafetyTimer)
+  transitionSafetyTimer = undefined
+}
+
+function finishTransition() {
+  clearTransitionSafetyTimer()
+  if (phase.value === 'enter-active' && props.visible) {
+    phase.value = 'idle'
+    return
+  }
+  if (phase.value === 'leave-to' && !props.visible) {
+    rendered.value = false
+    phase.value = 'idle'
+  }
+}
 
-function clearTransitionTimer() {
-  if (transitionTimer === undefined) { return }
-  clearTimeout(transitionTimer)
-  transitionTimer = undefined
+function scheduleTransitionSafety(version: number) {
+  transitionSafetyTimer = setTimeout(() => {
+    transitionSafetyTimer = undefined
+    if (version === transitionVersion) { finishTransition() }
+  }, TRANSITION_SAFETY_TIMEOUT)
 }
 
 async function enter() {
   transitionVersion += 1
   const version = transitionVersion
-  clearTransitionTimer()
+  clearTransitionSafetyTimer()
   rendered.value = true
   phase.value = 'enter-from'
   await nextTick()
   if (version !== transitionVersion || !props.visible) { return }
-
   phase.value = 'enter-active'
-  transitionTimer = setTimeout(() => {
-    transitionTimer = undefined
-    if (version !== transitionVersion || !props.visible) { return }
-    phase.value = 'idle'
-  }, ENTER_DURATION)
+  scheduleTransitionSafety(version)
 }
 
 async function leave() {
   transitionVersion += 1
   const version = transitionVersion
-  clearTransitionTimer()
+  clearTransitionSafetyTimer()
   if (!rendered.value) {
     phase.value = 'idle'
     return
   }
-
   phase.value = 'leave-active'
   await nextTick()
   if (version !== transitionVersion || props.visible) { return }
-
   phase.value = 'leave-to'
-  transitionTimer = setTimeout(() => {
-    transitionTimer = undefined
-    if (version !== transitionVersion || props.visible) { return }
-    rendered.value = false
-    phase.value = 'idle'
-  }, LEAVE_DURATION)
+  scheduleTransitionSafety(version)
+}
+
+function transitionFinish(event: unknown) {
+  const nativeEvent = event as { currentTarget?: unknown, target?: unknown }
+  if (nativeEvent.currentTarget && nativeEvent.target !== nativeEvent.currentTarget) { return }
+  finishTransition()
 }
 
 watch(
@@ -100,7 +118,7 @@ watch(
 
 onUnmounted(() => {
   transitionVersion += 1
-  clearTransitionTimer()
+  clearTransitionSafetyTimer()
 })
 
 const transitionClasses = computed(() => {
@@ -123,6 +141,7 @@ const classes = computed(() => cn(
 ))
 const role = computed(() => props.type === 'danger' || props.type === 'warning' ? 'alert' : 'status')
 const ariaBusy = computed(() => props.type === 'loading' ? 'true' : undefined)
+const ariaHidden = computed(() => props.visible ? undefined : 'true')
 const ariaLive = computed(() => props.type === 'danger' || props.type === 'warning' ? 'assertive' : 'polite')
 const iconName = computed(() => {
   if (props.type === 'success') { return 'success' }
@@ -132,9 +151,14 @@ const iconName = computed(() => {
 })
 
 function close() {
+  if (!props.visible) { return }
   emit('update:visible', false)
   emit('close')
 }
+
+function action() {
+  if (props.visible) { emit('action') }
+}
 </script>
 
 <template>
@@ -143,24 +167,41 @@ function close() {
     :class="classes"
     :role="role"
     aria-atomic="true"
+    :aria-hidden="ariaHidden"
     :aria-busy="ariaBusy"
     :aria-live="ariaLive"
     :data-type="props.type"
     :data-position="props.position"
+    @transitionend="transitionFinish"
   >
     <view v-if="props.type !== 'text'" class="varo-toast__icon" aria-hidden="true">
       <view v-if="props.type === 'loading'" class="varo-toast__spinner">
         <view class="varo-toast__spinner-track" />
         <view class="varo-toast__spinner-arc" />
       </view>
-      <VIcon v-else :name="iconName" :size="24" />
+      <VIcon v-else :name="iconName" :size="20" />
+    </view>
+    <view class="varo-toast__body">
+      <text v-if="props.title" class="varo-toast__title">
+        {{ props.title }}
+      </text>
+      <text class="varo-toast__message">
+        <slot>{{ props.message }}</slot>
+      </text>
     </view>
-    <text class="varo-toast__message">
-      <slot>{{ props.message }}</slot>
-    </text>
+    <button
+      v-if="props.actionText"
+      :aria-label="props.actionLabel || props.actionText"
+      :disabled="!props.visible"
+      class="varo-toast__action"
+      @click="action"
+    >
+      {{ props.actionText }}
+    </button>
     <button
       v-if="props.closeable"
       :aria-label="props.closeLabel"
+      :disabled="!props.visible"
       class="varo-toast__close"
       @click="close"
     >
@@ -169,28 +210,6 @@ function close() {
   </view>
 </template>
 
-<style>
-.varo-toast__spinner {
-  position: relative;
-  width: 36px;
-  height: 36px;
-}
-
-.varo-toast__spinner-track,
-.varo-toast__spinner-arc {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border: 2px solid currentcolor;
-  border-radius: 50%;
-}
-
-.varo-toast__spinner-arc {
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-}
-</style>
-
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/watermark/h5.ts b/registry/components/watermark/h5.ts
new file mode 100644
index 00000000..fc7510ca
--- /dev/null
+++ b/registry/components/watermark/h5.ts
@@ -0,0 +1,96 @@
+import type { PropType, StyleValue } from 'vue'
+import { computed, defineComponent, h } from 'vue'
+import '../../styles/varo.css'
+
+const watermarkTiles = Array.from({ length: 80 }, (_, index) => index)
+
+function normalizeOffset(offset: number, gap: number) {
+  const phase = ((offset % gap) + gap) % gap
+  return phase > gap / 2 ? phase - gap : phase
+}
+
+export const VWatermark = defineComponent({
+  name: 'VWatermark',
+  props: {
+    color: {
+      type: String,
+      default: '#172033',
+    },
+    content: {
+      type: String,
+      default: 'Varo',
+    },
+    fontSize: {
+      type: Number,
+      default: 14,
+    },
+    fontWeight: {
+      type: [Number, String] as PropType<number | string>,
+      default: 500,
+    },
+    gapX: {
+      type: Number,
+      default: 160,
+    },
+    gapY: {
+      type: Number,
+      default: 96,
+    },
+    offsetX: {
+      type: Number,
+      default: 0,
+    },
+    offsetY: {
+      type: Number,
+      default: 0,
+    },
+    opacity: {
+      type: Number,
+      default: 0.12,
+    },
+    rotate: {
+      type: Number,
+      default: -22,
+    },
+    zIndex: {
+      type: Number,
+      default: 9,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const rootStyle = computed(() => {
+      const gapX = Math.max(24, props.gapX)
+      const gapY = Math.max(24, props.gapY)
+      return {
+        '--varo-watermark-color': props.color,
+        '--varo-watermark-font-size': `${Math.max(1, props.fontSize)}px`,
+        '--varo-watermark-font-weight': props.fontWeight,
+        '--varo-watermark-gap-x': `${gapX}px`,
+        '--varo-watermark-gap-y': `${gapY}px`,
+        '--varo-watermark-offset-x': `${normalizeOffset(props.offsetX, gapX)}px`,
+        '--varo-watermark-offset-y': `${normalizeOffset(props.offsetY, gapY)}px`,
+        '--varo-watermark-opacity': Math.min(1, Math.max(0, props.opacity)),
+        '--varo-watermark-rotate': `${props.rotate}deg`,
+        '--varo-watermark-z-index': props.zIndex,
+      }
+    })
+
+    return () => h('div', {
+      ...attrs,
+      'class': ['varo-watermark', attrs.class],
+      'data-watermark': props.content,
+      'style': [rootStyle.value, attrs.style as StyleValue],
+    }, [
+      h('div', { class: 'varo-watermark__content' }, slots.default?.()),
+      props.content.length > 0
+        ? h('div', {
+            'aria-hidden': 'true',
+            'class': 'varo-watermark__overlay',
+          }, watermarkTiles.map(tile => h('span', {
+            class: 'varo-watermark__item',
+            key: tile,
+          }, props.content)))
+        : null,
+    ])
+  },
+})
diff --git a/registry/components/watermark/registry.json b/registry/components/watermark/registry.json
new file mode 100644
index 00000000..d0b0f324
--- /dev/null
+++ b/registry/components/watermark/registry.json
@@ -0,0 +1,41 @@
+{
+  "name": "watermark",
+  "type": "component",
+  "title": "VWatermark",
+  "description": "Non-interactive repeated text watermark overlay with responsive spacing and target-native H5 and mini-program rendering.",
+  "exportName": "VWatermark",
+  "targets": [
+    "h5",
+    "weapp"
+  ],
+  "dependencies": [],
+  "targetDependencies": {
+    "h5": [
+      "vue"
+    ],
+    "weapp": [
+      "wevu"
+    ]
+  },
+  "registryDependencies": [
+    "themes/base"
+  ],
+  "targetRegistryDependencies": {
+    "weapp": [
+      "utils/cn"
+    ]
+  },
+  "files": [
+    {
+      "target": "h5",
+      "from": "registry/components/watermark/h5.ts",
+      "to": "src/components/ui/watermark.ts"
+    },
+    {
+      "target": "weapp",
+      "from": "registry/components/watermark/v-watermark.vue",
+      "to": "src/components/ui/v-watermark.vue"
+    }
+  ],
+  "docs": "/components/watermark"
+}
diff --git a/registry/components/watermark/v-watermark.vue b/registry/components/watermark/v-watermark.vue
new file mode 100644
index 00000000..5033a6e0
--- /dev/null
+++ b/registry/components/watermark/v-watermark.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ClassValue } from '@weapp-tailwindcss/merge'
+import { computed } from 'wevu'
+import { cn } from '../../lib/cn'
+
+const props = withDefaults(defineProps<{
+  className?: ClassValue
+  color?: string
+  content?: string
+  fontSize?: number
+  fontWeight?: number | string
+  gapX?: number
+  gapY?: number
+  offsetX?: number
+  offsetY?: number
+  opacity?: number
+  rotate?: number
+  zIndex?: number
+}>(), {
+  className: undefined,
+  color: '#172033',
+  content: 'Varo',
+  fontSize: 14,
+  fontWeight: 500,
+  gapX: 160,
+  gapY: 96,
+  offsetX: 0,
+  offsetY: 0,
+  opacity: 0.12,
+  rotate: -22,
+  zIndex: 9,
+})
+
+function normalizeOffset(offset: number, gap: number) {
+  const phase = ((offset % gap) + gap) % gap
+  return phase > gap / 2 ? phase - gap : phase
+}
+
+const watermarkTiles = Array.from({ length: 80 }, (_, index) => index)
+const classes = computed(() => cn('varo-watermark', props.className))
+const rootStyle = computed(() => {
+  const gapX = Math.max(24, props.gapX)
+  const gapY = Math.max(24, props.gapY)
+  return [
+    `--varo-watermark-color: ${props.color}`,
+    `--varo-watermark-font-size: ${Math.max(1, props.fontSize)}px`,
+    `--varo-watermark-font-weight: ${props.fontWeight}`,
+    `--varo-watermark-gap-x: ${gapX}px`,
+    `--varo-watermark-gap-y: ${gapY}px`,
+    `--varo-watermark-offset-x: ${normalizeOffset(props.offsetX, gapX)}px`,
+    `--varo-watermark-offset-y: ${normalizeOffset(props.offsetY, gapY)}px`,
+    `--varo-watermark-opacity: ${Math.min(1, Math.max(0, props.opacity))}`,
+    `--varo-watermark-rotate: ${props.rotate}deg`,
+    `--varo-watermark-z-index: ${props.zIndex}`,
+  ].join('; ')
+})
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :data-watermark="props.content"
+    :style="rootStyle"
+  >
+    <view class="varo-watermark__content">
+      <slot />
+    </view>
+    <view
+      v-if="props.content.length > 0"
+      aria-hidden="true"
+      class="varo-watermark__overlay"
+    >
+      <text
+        v-for="tile in watermarkTiles"
+        :key="tile"
+        class="varo-watermark__item"
+      >
+        {{ props.content }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/registry/themes/base/h5.css b/registry/themes/base/h5.css
index 144c1dbf..de56541d 100644
--- a/registry/themes/base/h5.css
+++ b/registry/themes/base/h5.css
@@ -69,6 +69,11 @@
   --varo-ui-radius-sm: var(--varo-ui-input-radius);
   --varo-ui-shadow-sm: 0 1px 2px rgb(48 49 51 / 6%);
   --varo-ui-shadow-md: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
+  --varo-ui-motion-feedback: 140ms;
+  --varo-ui-motion-state: 180ms;
+  --varo-ui-motion-enter: 220ms;
+  --varo-ui-motion-exit: 160ms;
+  --varo-ui-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
   --varo-ui-ring: rgb(7 193 96 / 16%);
   --varo-ui-focus: #000;
   --varo-agent-surface: var(--varo-ui-surface);
@@ -102,7 +107,7 @@
   --varo-agent-source-rose-soft: #fdf2f8;
 }
 
-:where(.varo-button, .varo-checkbox, .varo-radio, .varo-input-number button, .varo-select button, .varo-switch, .varo-toast button, .varo-rate__item, .varo-picker button, .varo-cascader button, .varo-calendar button, .varo-date-picker button, .varo-number-keyboard button, .varo-uploader button, .varo-indicator button, .varo-elevator button, .varo-menu button, .varo-pagination button) {
+:where(.varo-button, .varo-checkbox, .varo-radio, .varo-date-field button, .varo-input-number button, .varo-select button, .varo-signature button, .varo-switch, .varo-toast button, .varo-rate__item, .varo-picker button, .varo-cascader button, .varo-calendar button, .varo-date-picker button, .varo-number-keyboard button, .varo-uploader button, .varo-indicator button, .varo-elevator button, .varo-menu button, .varo-pagination button) {
   font: inherit;
 }
 
@@ -112,27 +117,32 @@
   --varo-button-foreground: var(--varo-ui-primary-foreground);
   --varo-button-hover-foreground: var(--varo-ui-primary-hover-foreground);
 
+  position: relative;
   display: inline-flex;
-  gap: 8px;
+  gap: 6px;
   align-items: center;
   justify-content: center;
   min-height: var(--varo-ui-button-height-md);
   padding: 0 16px;
-  font-weight: 650;
+  overflow: hidden;
+  font-weight: 600;
   line-height: 1;
   color: var(--varo-button-foreground);
+  touch-action: manipulation;
   cursor: pointer;
+  user-select: none;
   background: var(--varo-button-fill);
   border: 1px solid transparent;
   border-radius: var(--varo-ui-button-radius);
   box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: center;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    opacity 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    opacity var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
 .varo-button:focus-visible {
@@ -163,13 +173,11 @@
   background: var(--varo-button-hover-fill);
 }
 
-.varo-button:not([data-disabled='true'], [data-loading='true']):active {
-  transform: translateY(1px);
-}
-
+.varo-button:not([data-disabled='true'], [data-loading='true']):active,
 .varo-button[data-pressed='true'],
 .varo-button--pressed {
-  transform: translateY(1px);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  transform: scale(0.98);
 }
 
 .varo-button[data-size='sm'] {
@@ -194,10 +202,27 @@
 
 .varo-button[data-variant='ghost'] {
   color: var(--varo-ui-text);
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   box-shadow: none;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .varo-button[data-variant='outline']:not([data-disabled='true'], [data-loading='true']):hover,
+  .varo-button[data-variant='ghost']:not([data-disabled='true'], [data-loading='true']):hover {
+    background: var(--varo-ui-fill-light);
+    border-color: var(--varo-ui-border-strong);
+  }
+}
+
+.varo-button[data-variant='outline']:not([data-disabled='true'], [data-loading='true']):active,
+.varo-button[data-variant='outline'][data-pressed='true'],
+.varo-button[data-variant='outline'].varo-button--pressed,
+.varo-button[data-variant='ghost']:not([data-disabled='true'], [data-loading='true']):active,
+.varo-button[data-variant='ghost'][data-pressed='true'],
+.varo-button[data-variant='ghost'].varo-button--pressed {
+  background: var(--varo-ui-fill-light);
+}
+
 .varo-button[data-variant='text'] {
   --varo-button-text-fill: var(--varo-ui-primary-soft);
 
@@ -316,6 +341,18 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-button {
+    transition-duration: 1ms;
+  }
+
+  .varo-button:not([data-disabled='true'], [data-loading='true']):active,
+  .varo-button[data-pressed='true'],
+  .varo-button--pressed {
+    transform: none;
+  }
+}
+
 .varo-input {
   display: grid;
   gap: 6px;
@@ -345,6 +382,12 @@
     box-shadow 0.18s ease;
 }
 
+.varo-input[data-type='textarea'] .varo-input__body {
+  position: relative;
+  align-items: flex-start;
+  padding: 10px 12px 28px;
+}
+
 .varo-input[data-size='sm'] .varo-input__body {
   min-height: var(--varo-ui-input-height-sm);
 }
@@ -374,7 +417,7 @@
 
 textarea.varo-input__control {
   min-height: 72px;
-  padding: 10px 0;
+  padding: 0;
   resize: none;
 }
 
@@ -388,17 +431,36 @@ textarea.varo-input__control {
 }
 
 .varo-input__clear {
+  box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  overflow: visible;
+  color: var(--varo-ui-text-placeholder);
   cursor: pointer;
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   border: 0;
   border-radius: 999px;
 }
 
+.varo-input__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.varo-input[data-type='textarea'] .varo-input__word-limit {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  line-height: 1;
+}
+
 .varo-input__error {
   font-size: 12px;
   color: var(--varo-ui-danger);
@@ -429,6 +491,13 @@ textarea.varo-input__control {
   border: 0;
 }
 
+.varo-radio {
+  min-height: 44px;
+  padding: 0 2px;
+  touch-action: manipulation;
+  user-select: none;
+}
+
 .varo-checkbox__icon,
 .varo-radio__icon {
   position: relative;
@@ -471,17 +540,46 @@ textarea.varo-input__control {
 
 .varo-radio__icon {
   font-size: 10px;
+  background: var(--varo-ui-surface);
   border-radius: 999px;
+  transform-origin: center;
+}
+
+.varo-radio__dot {
+  width: 10px;
+  height: 10px;
+  background: var(--varo-ui-primary);
+  border-radius: 999px;
+  opacity: 0;
+  transform: scale(0.45);
+  transform-origin: center;
+  transition:
+    opacity var(--varo-ui-motion-feedback) linear,
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon,
-.varo-checkbox[data-state='checked'] .varo-checkbox__icon,
-.varo-radio[data-checked='true'] .varo-radio__icon {
+.varo-checkbox[data-state='checked'] .varo-checkbox__icon {
   color: var(--varo-ui-primary-foreground);
   background: var(--varo-ui-primary);
   border-color: var(--varo-ui-primary);
 }
 
+.varo-radio[data-checked='true'] .varo-radio__icon {
+  background: var(--varo-ui-surface);
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-primary-soft);
+}
+
+.varo-radio[data-checked='true'] .varo-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.varo-radio:not([data-disabled='true']):active .varo-radio__icon {
+  transform: scale(0.9);
+}
+
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon::before,
 .varo-checkbox[data-state='checked'] .varo-checkbox__icon::before {
   opacity: 1;
@@ -518,6 +616,17 @@ textarea.varo-input__control {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-radio__icon,
+  .varo-radio__dot {
+    transition-duration: 1ms;
+  }
+
+  .varo-radio:not([data-disabled='true']):active .varo-radio__icon {
+    transform: none;
+  }
+}
+
 .varo-checkbox[data-disabled='true'],
 .varo-radio[data-disabled='true'] {
   cursor: not-allowed;
@@ -527,9 +636,10 @@ textarea.varo-input__control {
 .varo-input-number {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  width: 100%;
-  min-width: min(128px, 100%);
+  width: 130px;
+  min-width: 128px;
   max-width: 100%;
   overflow: hidden;
   background: var(--varo-ui-surface);
@@ -580,10 +690,17 @@ textarea.varo-input__control {
 
 .varo-input-number__input::-webkit-inner-spin-button,
 .varo-input-number__input::-webkit-outer-spin-button {
+  display: none;
   margin: 0;
   appearance: none;
 }
 
+.varo-input-number__minus .varo-icon,
+.varo-input-number__plus .varo-icon {
+  display: block;
+  pointer-events: none;
+}
+
 .varo-select {
   position: relative;
   display: grid;
@@ -598,8 +715,10 @@ textarea.varo-input__control {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 42px;
   min-height: 42px;
   padding: 0 12px;
+  overflow: hidden;
   color: inherit;
   cursor: pointer;
   background: var(--varo-ui-surface, #fff);
@@ -615,9 +734,13 @@ textarea.varo-input__control {
   flex: 1;
   align-items: center;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -645,17 +768,39 @@ textarea.varo-input__control {
 }
 
 .varo-select__clear {
-  display: grid;
+  box-sizing: border-box;
+  display: inline-flex;
   flex: none;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  min-height: 16px;
   padding: 0;
-  color: var(--varo-ui-text-muted, #64748b);
+  margin: 0;
+  line-height: 1;
+  color: var(--varo-ui-text-placeholder);
+  pointer-events: none;
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 999px;
+  opacity: 0;
+}
+
+.varo-select:hover .varo-select__clear,
+.varo-select:focus-within .varo-select__clear,
+.varo-select[data-open='true'] .varo-select__clear {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.varo-select__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .varo-select__control::after,
@@ -728,9 +873,13 @@ textarea.varo-input__control {
 .varo-select__filter-input {
   flex: 1;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   cursor: text;
   outline: 0;
@@ -827,8 +976,8 @@ textarea.varo-input__control {
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--varo-ui-border);
   transition:
-    background 0.14s ease,
-    box-shadow 0.14s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch:not(:disabled):hover {
@@ -855,30 +1004,51 @@ textarea.varo-input__control {
 }
 
 .varo-switch__track {
-  display: flex;
-  align-items: center;
+  position: relative;
+  display: block;
   width: 100%;
   height: 20px;
 }
 
 .varo-switch__thumb {
-  flex: none;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 20px;
   height: 20px;
   background: var(--varo-ui-white);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(48 49 51 / 18%);
-  transition: transform 0.14s ease;
+  box-shadow: 0 1px 3px rgb(48 49 51 / 22%);
+  transform: translateX(0);
+  transform-origin: left center;
+  transition: transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] .varo-switch__thumb {
   transform: translateX(20px);
 }
 
+.varo-switch:not(:disabled):active .varo-switch__thumb {
+  transform: translateX(0) scaleX(1.16);
+}
+
+.varo-switch[data-state='checked']:not(:disabled):active .varo-switch__thumb {
+  transform: translateX(20px) scaleX(1.16);
+  transform-origin: right center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .varo-switch,
   .varo-switch__thumb {
-    transition: none;
+    transition-duration: 1ms;
+  }
+
+  .varo-switch:not(:disabled):active .varo-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .varo-switch[data-state='checked']:not(:disabled):active .varo-switch__thumb {
+    transform: translateX(20px);
   }
 }
 
@@ -916,39 +1086,35 @@ textarea.varo-input__control {
   z-index: 1000;
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: max-content;
-  min-width: 96px;
-  max-width: min(70vw, 240px);
-  padding: 8px 16px;
-  color: var(--varo-ui-white);
-  text-align: center;
+  min-width: 220px;
+  max-width: min(calc(100vw - 32px), 360px);
+  min-height: 52px;
+  padding: 10px 12px;
+  color: var(--varo-ui-text);
+  text-align: left;
   pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border: 0;
-  border-radius: 12px;
+  background: var(--varo-ui-surface-overlay);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: 16px;
+  box-shadow: var(--varo-ui-shadow-md);
   transform: translateX(-50%);
-}
-
-.varo-toast--success,
-.varo-toast--warning,
-.varo-toast--danger,
-.varo-toast--loading {
-  min-width: 88px;
-  min-height: 88px;
-  padding: 16px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-toast--text {
-  min-height: 0;
-  padding: 8px 16px;
+  min-width: 0;
 }
 
 .varo-toast--top {
-  top: 20%;
+  top: max(16px, env(safe-area-inset-top));
 }
 
 .varo-toast--middle {
@@ -958,62 +1124,123 @@ textarea.varo-input__control {
 
 .varo-toast--bottom {
   top: auto;
-  bottom: 20%;
+  bottom: max(16px, env(safe-area-inset-bottom));
 }
 
 .varo-toast__icon {
   display: inline-grid;
+  flex: none;
   place-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--varo-ui-white);
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
+}
+
+.varo-toast--success .varo-toast__icon {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.varo-toast--warning .varo-toast__icon {
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+}
+
+.varo-toast--danger .varo-toast__icon {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
 }
 
 .varo-toast__icon svg,
 .varo-toast__icon .varo-icon {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
+}
+
+.varo-toast__body {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.varo-toast__title {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
 }
 
 .varo-toast__message {
   min-width: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--varo-ui-white);
+  color: var(--varo-ui-text-regular);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-.varo-toast--success .varo-toast__message,
-.varo-toast--warning .varo-toast__message,
-.varo-toast--danger .varo-toast__message,
-.varo-toast--loading .varo-toast__message {
-  margin-top: 2px;
+.varo-toast__action,
+.varo-toast__close {
+  flex: none;
+  pointer-events: auto;
+  cursor: pointer;
+  border: 0;
+}
+
+.varo-toast__action {
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
+}
+
+.varo-toast__action:active {
+  transform: scale(0.96);
 }
 
 .varo-toast__close {
   display: inline-grid;
   place-items: center;
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  color: rgb(255 255 255 / 72%);
-  pointer-events: auto;
-  cursor: pointer;
+  color: var(--varo-ui-text-muted);
   background: transparent;
-  border: 0;
   border-radius: 999px;
 }
 
-.varo-toast__close:hover {
-  color: var(--varo-ui-white);
-  background: rgb(255 255 255 / 12%);
+@media (hover: hover) and (pointer: fine) {
+  .varo-toast__action:hover {
+    color: var(--varo-ui-primary-foreground);
+    background: var(--varo-ui-primary);
+  }
+
+  .varo-toast__close:hover {
+    color: var(--varo-ui-text);
+    background: var(--varo-ui-fill-light);
+  }
 }
 
+.varo-toast__action:focus-visible,
 .varo-toast__close:focus-visible {
-  outline: 2px solid var(--varo-ui-white);
+  outline: 2px solid var(--varo-ui-focus);
   outline-offset: 1px;
 }
 
@@ -1024,8 +1251,8 @@ textarea.varo-input__control {
 }
 
 .varo-toast__spinner {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
   animation: varo-toast-spin 0.9s linear infinite;
 }
 
@@ -1037,12 +1264,52 @@ textarea.varo-input__control {
   stroke-width: 2.2;
 }
 
+.varo-toast-region {
+  position: fixed;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(calc(100vw - 32px), 360px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.varo-toast-region[data-position='top'] {
+  top: max(16px, env(safe-area-inset-top));
+}
+
+.varo-toast-region[data-position='middle'] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.varo-toast-region[data-position='bottom'] {
+  bottom: max(16px, env(safe-area-inset-bottom));
+}
+
+.varo-toast-region[data-inline='true'] {
+  position: relative;
+  inset: auto;
+  width: min(100%, 360px);
+  transform: none;
+}
+
+.varo-toast-region .varo-toast {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-width: none;
+  transform: none;
+}
+
 .varo-toast-enter-active {
-  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: opacity var(--varo-ui-motion-enter) ease, transform var(--varo-ui-motion-enter) var(--varo-ui-motion-ease);
 }
 
 .varo-toast-leave-active {
-  transition: opacity 0.16s ease, transform 0.16s ease-in;
+  transition: opacity var(--varo-ui-motion-exit) ease, transform var(--varo-ui-motion-exit) ease-in;
 }
 
 .varo-toast-enter-from,
@@ -1065,6 +1332,16 @@ textarea.varo-input__control {
   transform: translate(-50%, 10px) scale(0.98);
 }
 
+.varo-toast-region .varo-toast.varo-toast-enter-from,
+.varo-toast-region .varo-toast.varo-toast-leave-to {
+  transform: translateY(-8px) scale(0.98);
+}
+
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-enter-from,
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-leave-to {
+  transform: translateY(8px) scale(0.98);
+}
+
 @keyframes varo-toast-spin {
   to {
     transform: rotate(360deg);
@@ -1087,6 +1364,11 @@ textarea.varo-input__control {
     transform: translate(-50%, -50%);
   }
 
+  .varo-toast-region .varo-toast.varo-toast-enter-from,
+  .varo-toast-region .varo-toast.varo-toast-leave-to {
+    transform: none;
+  }
+
   .varo-toast__spinner {
     animation-duration: 1.8s;
   }
@@ -1205,6 +1487,76 @@ textarea.varo-input__control {
   }
 }
 
+.varo-date-field {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+  color: var(--varo-ui-text);
+}
+
+.varo-date-field__control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-input-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__control {
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+.varo-date-field[data-disabled='true'] .varo-date-field__control {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.varo-date-field[data-readonly='true'] .varo-date-field__control {
+  cursor: default;
+}
+
+.varo-date-field__value,
+.varo-date-field__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.varo-date-field__placeholder {
+  color: var(--varo-ui-text-placeholder);
+}
+
+.varo-date-field__arrow {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  color: var(--varo-ui-text-muted);
+  border-right: 1.6px solid currentcolor;
+  border-bottom: 1.6px solid currentcolor;
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__arrow {
+  color: var(--varo-ui-primary);
+  transform: translateY(2px) rotate(225deg);
+}
+
+.varo-date-field__picker {
+  width: 100%;
+}
+
 .varo-calendar,
 .varo-date-picker,
 .varo-picker,
@@ -1352,12 +1704,25 @@ textarea.varo-input__control {
   color: var(--varo-ui-primary);
 }
 
-.varo-picker__columns,
+.varo-picker__columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  padding: 8px;
+}
+
 .varo-cascader__options {
   display: grid;
   padding: 8px;
 }
 
+.varo-picker__column {
+  display: grid;
+  align-content: start;
+  max-height: 240px;
+  overflow: auto;
+}
+
 .varo-picker__option,
 .varo-cascader__option {
   position: relative;
@@ -3081,6 +3446,130 @@ textarea.varo-input__control {
   transition: none;
 }
 
+.varo-signature {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.varo-signature__canvas {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  touch-action: none;
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-signature__canvas:focus-visible {
+  outline: 2px solid var(--varo-ui-primary);
+  outline-offset: 2px;
+}
+
+.varo-signature[data-disabled='true'] {
+  opacity: 0.58;
+}
+
+.varo-signature__clear {
+  justify-self: end;
+  min-height: 36px;
+  padding: 0 12px;
+  font-weight: 700;
+  color: var(--varo-ui-danger);
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.varo-signature__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.varo-watermark {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.varo-watermark__content {
+  position: relative;
+  z-index: 0;
+}
+
+.varo-watermark__overlay {
+  position: absolute;
+  inset: calc(0px - var(--varo-watermark-gap-y)) calc(0px - var(--varo-watermark-gap-x));
+  z-index: var(--varo-watermark-z-index);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(var(--varo-watermark-offset-x), var(--varo-watermark-offset-y));
+}
+
+.varo-watermark__item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--varo-watermark-gap-x);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--varo-watermark-gap-y);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--varo-watermark-font-size);
+  font-weight: var(--varo-watermark-font-weight);
+  line-height: 1;
+  color: var(--varo-watermark-color);
+  white-space: nowrap;
+  opacity: var(--varo-watermark-opacity);
+  transform: rotate(var(--varo-watermark-rotate));
+}
+
+.varo-pull-refresh {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.varo-pull-refresh__track {
+  min-height: 100%;
+}
+
+.varo-pull-refresh__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
+.varo-pull-refresh[data-state='ready'] .varo-pull-refresh__indicator,
+.varo-pull-refresh[data-state='loading'] .varo-pull-refresh__indicator {
+  font-weight: 700;
+  color: var(--varo-ui-primary);
+}
+
+.varo-pull-refresh__content {
+  min-height: 1px;
+}
+
+.varo-pull-refresh__native-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
 .varo-list {
   display: block;
   width: 100%;
diff --git a/registry/themes/base/weapp-vite.css b/registry/themes/base/weapp-vite.css
index d689284a..61fd2eb7 100644
--- a/registry/themes/base/weapp-vite.css
+++ b/registry/themes/base/weapp-vite.css
@@ -69,6 +69,11 @@ page {
   --varo-ui-radius-sm: var(--varo-ui-input-radius);
   --varo-ui-shadow-sm: 0 1px 2px rgb(48 49 51 / 6%);
   --varo-ui-shadow-md: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
+  --varo-ui-motion-feedback: 140ms;
+  --varo-ui-motion-state: 180ms;
+  --varo-ui-motion-enter: 220ms;
+  --varo-ui-motion-exit: 160ms;
+  --varo-ui-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
   --varo-ui-ring: rgb(7 193 96 / 16%);
   --varo-ui-focus: #000;
   --varo-agent-surface: var(--varo-ui-surface);
@@ -105,8 +110,10 @@ page {
 .varo-button,
 .varo-checkbox,
 .varo-radio,
+.varo-date-field button,
 .varo-input-number button,
 .varo-select button,
+.varo-signature button,
 .varo-switch,
 .varo-toast__close,
 .varo-rate__item,
@@ -218,29 +225,33 @@ page {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  gap: 6px;
   align-items: center;
   justify-content: center;
   min-height: var(--varo-ui-button-height-md);
   padding: 0 16px;
   margin: 0;
   overflow: hidden;
-  font-weight: 650;
+  font-weight: 600;
   line-height: 1;
   vertical-align: middle;
   color: var(--varo-button-foreground);
   text-align: center;
+  touch-action: manipulation;
   cursor: pointer;
+  user-select: none;
   background: var(--varo-button-fill);
   border: 1px solid transparent;
   border-radius: var(--varo-ui-button-radius);
   box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: center;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease,
-    opacity 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    opacity var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
 .varo-button::after {
@@ -286,7 +297,8 @@ page {
 
 .varo-button[data-pressed='true'],
 .varo-button--pressed {
-  transform: translateY(1px);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
+  transform: scale(0.98);
 }
 
 .varo-button[data-variant='solid'][data-pressed='true'],
@@ -317,10 +329,17 @@ page {
 
 .varo-button[data-variant='ghost'] {
   color: var(--varo-ui-text);
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   box-shadow: none;
 }
 
+.varo-button[data-variant='outline'][data-pressed='true'],
+.varo-button[data-variant='outline'].varo-button--pressed,
+.varo-button[data-variant='ghost'][data-pressed='true'],
+.varo-button[data-variant='ghost'].varo-button--pressed {
+  background: var(--varo-ui-fill-light);
+}
+
 .varo-button[data-variant='text'] {
   --varo-button-text-fill: var(--varo-ui-primary-soft);
 
@@ -441,6 +460,17 @@ page {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-button {
+    transition-duration: 1ms;
+  }
+
+  .varo-button[data-pressed='true'],
+  .varo-button--pressed {
+    transform: none;
+  }
+}
+
 .varo-input {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -472,6 +502,12 @@ page {
     box-shadow 0.18s ease;
 }
 
+.varo-input[data-type='textarea'] .varo-input__body {
+  position: relative;
+  align-items: flex-start;
+  padding: 10px 12px 28px;
+}
+
 .varo-input[data-size='sm'] .varo-input__body {
   min-height: var(--varo-ui-input-height-sm);
 }
@@ -501,7 +537,7 @@ page {
 
 textarea.varo-input__control {
   min-height: 72px;
-  padding: 10px 0;
+  padding: 0;
   resize: none;
 }
 
@@ -517,18 +553,35 @@ textarea.varo-input__control {
 .varo-input__clear.varo-input__clear {
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   padding: 0;
   margin: 0;
+  overflow: visible;
+  color: var(--varo-ui-text-placeholder);
   cursor: pointer;
-  background: var(--varo-ui-surface-muted);
+  background: transparent;
   border: 0;
   border-radius: 999px;
 }
 
+.varo-input__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.varo-input[data-type='textarea'] .varo-input__word-limit {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  line-height: 1;
+}
+
 .varo-input__error {
   font-size: 12px;
   color: var(--varo-ui-danger);
@@ -567,6 +620,13 @@ textarea.varo-input__control {
   margin: 0;
 }
 
+.varo-radio {
+  min-height: 44px;
+  padding: 0 2px;
+  touch-action: manipulation;
+  user-select: none;
+}
+
 .varo-checkbox__icon,
 .varo-radio__icon {
   position: relative;
@@ -608,17 +668,46 @@ textarea.varo-input__control {
 
 .varo-radio__icon {
   font-size: 10px;
+  background: var(--varo-ui-surface);
   border-radius: 999px;
+  transform-origin: center;
+}
+
+.varo-radio__dot {
+  width: 10px;
+  height: 10px;
+  background: var(--varo-ui-primary);
+  border-radius: 999px;
+  opacity: 0;
+  transform: scale(0.45);
+  transform-origin: center;
+  transition:
+    opacity var(--varo-ui-motion-feedback) linear,
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon,
-.varo-checkbox[data-state='checked'] .varo-checkbox__icon,
-.varo-radio[data-checked='true'] .varo-radio__icon {
+.varo-checkbox[data-state='checked'] .varo-checkbox__icon {
   color: var(--varo-ui-primary-foreground);
   background: var(--varo-ui-primary);
   border-color: var(--varo-ui-primary);
 }
 
+.varo-radio[data-checked='true'] .varo-radio__icon {
+  background: var(--varo-ui-surface);
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-primary-soft);
+}
+
+.varo-radio[data-checked='true'] .varo-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.varo-radio.varo-radio--pressed:not([data-disabled='true']) .varo-radio__icon {
+  transform: scale(0.9);
+}
+
 .varo-checkbox[data-checked='true'] .varo-checkbox__icon::before,
 .varo-checkbox[data-state='checked'] .varo-checkbox__icon::before {
   opacity: 1;
@@ -631,6 +720,17 @@ textarea.varo-input__control {
   z-index: 1;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .varo-radio__icon,
+  .varo-radio__dot {
+    transition-duration: 1ms;
+  }
+
+  .varo-radio.varo-radio--pressed:not([data-disabled='true']) .varo-radio__icon {
+    transform: none;
+  }
+}
+
 .varo-checkbox[data-disabled='true'],
 .varo-radio[data-disabled='true'] {
   cursor: not-allowed;
@@ -640,9 +740,10 @@ textarea.varo-input__control {
 .varo-input-number {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  width: 100%;
-  min-width: min(128px, 100%);
+  width: 130px;
+  min-width: 128px;
   max-width: 100%;
   overflow: hidden;
   background: var(--varo-ui-surface);
@@ -701,10 +802,17 @@ textarea.varo-input__control {
 
 .varo-input-number__input::-webkit-inner-spin-button,
 .varo-input-number__input::-webkit-outer-spin-button {
+  display: none;
   margin: 0;
   appearance: none;
 }
 
+.varo-input-number__minus .varo-icon,
+.varo-input-number__plus .varo-icon {
+  display: block;
+  pointer-events: none;
+}
+
 .varo-select {
   position: relative;
   display: grid;
@@ -714,14 +822,15 @@ textarea.varo-input__control {
 }
 
 .varo-select__trigger {
-  box-sizing: border-box;
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 42px;
   min-height: 42px;
   padding: 0 12px;
+  overflow: hidden;
   color: inherit;
   cursor: pointer;
   background: var(--varo-ui-surface, #fff);
@@ -739,10 +848,13 @@ textarea.varo-input__control {
   align-items: center;
   width: auto;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
   margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -771,18 +883,39 @@ textarea.varo-input__control {
 
 .varo-select__clear.varo-select__clear {
   box-sizing: border-box;
-  display: grid;
+  display: inline-flex;
   flex: none;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  max-width: 16px;
+  height: 16px;
+  min-height: 16px;
+  max-height: 16px;
   padding: 0;
   margin: 0;
-  color: var(--varo-ui-text-muted, #64748b);
+  line-height: 1;
+  color: var(--varo-ui-text-placeholder);
+  pointer-events: none;
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 999px;
+  opacity: 0;
+}
+
+.varo-select[data-open='true'] .varo-select__clear,
+.varo-select[data-clear-active='true'] .varo-select__clear {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.varo-select__clear .varo-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .varo-select__control.varo-select__control::after,
@@ -855,9 +988,13 @@ textarea.varo-input__control {
 .varo-select__filter-input {
   flex: 1;
   min-width: 0;
+  height: 40px;
   min-height: 40px;
+  max-height: 40px;
   padding: 0;
+  margin: 0;
   font: inherit;
+  line-height: 1;
   color: inherit;
   cursor: text;
   outline: 0;
@@ -962,8 +1099,8 @@ textarea.varo-input__control {
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--varo-ui-border);
   transition:
-    background 0.14s ease,
-    box-shadow 0.14s ease;
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    box-shadow var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] {
@@ -977,30 +1114,51 @@ textarea.varo-input__control {
 }
 
 .varo-switch__track {
-  display: flex;
-  align-items: center;
+  position: relative;
+  display: block;
   width: 100%;
   height: 20px;
 }
 
 .varo-switch__thumb {
-  flex: none;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 20px;
   height: 20px;
   background: var(--varo-ui-white);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(48 49 51 / 18%);
-  transition: transform 0.14s ease;
+  box-shadow: 0 1px 3px rgb(48 49 51 / 22%);
+  transform: translateX(0);
+  transform-origin: left center;
+  transition: transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-switch[data-state='checked'] .varo-switch__thumb {
   transform: translateX(20px);
 }
 
+.varo-switch[data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+  transform: translateX(0) scaleX(1.16);
+}
+
+.varo-switch[data-state='checked'][data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+  transform: translateX(20px) scaleX(1.16);
+  transform-origin: right center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .varo-switch,
   .varo-switch__thumb {
-    transition: none;
+    transition-duration: 1ms;
+  }
+
+  .varo-switch[data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .varo-switch[data-state='checked'][data-interactive='true'].varo-switch--pressed .varo-switch__thumb {
+    transform: translateX(20px);
   }
 }
 
@@ -1038,39 +1196,35 @@ textarea.varo-input__control {
   z-index: 1000;
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: max-content;
-  min-width: 96px;
-  max-width: min(70vw, 240px);
-  padding: 8px 16px;
-  color: var(--varo-ui-white);
-  text-align: center;
+  min-width: 220px;
+  max-width: min(calc(100vw - 32px), 360px);
+  min-height: 52px;
+  padding: 10px 12px;
+  color: var(--varo-ui-text);
+  text-align: left;
   pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border: 0;
-  border-radius: 12px;
+  background: var(--varo-ui-surface-overlay);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: 16px;
+  box-shadow: var(--varo-ui-shadow-md);
   transform: translateX(-50%);
-}
-
-.varo-toast--success,
-.varo-toast--warning,
-.varo-toast--danger,
-.varo-toast--loading {
-  min-width: 88px;
-  min-height: 88px;
-  padding: 16px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    border-color var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
 }
 
 .varo-toast--text {
-  min-height: 0;
-  padding: 8px 16px;
+  min-width: 0;
 }
 
 .varo-toast--top {
-  top: 20%;
+  top: max(16px, env(safe-area-inset-top));
 }
 
 .varo-toast--middle {
@@ -1080,64 +1234,108 @@ textarea.varo-input__control {
 
 .varo-toast--bottom {
   top: auto;
-  bottom: 20%;
+  bottom: max(16px, env(safe-area-inset-bottom));
 }
 
 .varo-toast__icon {
   display: inline-grid;
+  flex: none;
   place-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--varo-ui-white);
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-state) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-state) var(--varo-ui-motion-ease);
+}
+
+.varo-toast--success .varo-toast__icon {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.varo-toast--warning .varo-toast__icon {
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+}
+
+.varo-toast--danger .varo-toast__icon {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
 }
 
 .varo-toast__icon .varo-icon {
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
+}
+
+.varo-toast__body {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.varo-toast__title {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
 }
 
 .varo-toast__message {
   min-width: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--varo-ui-white);
+  color: var(--varo-ui-text-regular);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-.varo-toast--success .varo-toast__message,
-.varo-toast--warning .varo-toast__message,
-.varo-toast--danger .varo-toast__message,
-.varo-toast--loading .varo-toast__message {
-  margin-top: 2px;
-}
-
+.varo-toast__action.varo-toast__action,
 .varo-toast__close.varo-toast__close {
   box-sizing: border-box;
-  display: inline-grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
+  flex: none;
   padding: 0;
   margin: 0;
-  color: rgb(255 255 255 / 72%);
   pointer-events: auto;
   cursor: pointer;
-  background: transparent;
   border: 0;
+}
+
+.varo-toast__action.varo-toast__action {
+  width: auto;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
   border-radius: 999px;
+  transition:
+    color var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    background var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease),
+    transform var(--varo-ui-motion-feedback) var(--varo-ui-motion-ease);
 }
 
-.varo-toast__close:hover {
-  color: var(--varo-ui-white);
-  background: rgb(255 255 255 / 12%);
+.varo-toast__action.varo-toast__action:active {
+  transform: scale(0.96);
 }
 
-.varo-toast__close:focus-visible {
-  outline: 2px solid var(--varo-ui-white);
-  outline-offset: 1px;
+.varo-toast__close.varo-toast__close {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  color: var(--varo-ui-text-muted);
+  background: transparent;
+  border-radius: 999px;
 }
 
 .varo-toast__close .varo-icon {
@@ -1146,25 +1344,76 @@ textarea.varo-input__control {
 }
 
 .varo-toast__spinner {
-  width: 36px;
-  height: 36px;
+  position: relative;
+  width: 20px;
+  height: 20px;
   animation: varo-toast-spin 0.9s linear infinite;
 }
 
+.varo-toast__spinner-track,
+.varo-toast__spinner-arc {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+}
+
 .varo-toast__spinner-track {
   opacity: 0.24;
 }
 
 .varo-toast__spinner-arc {
-  stroke-width: 2.2;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.varo-toast-region {
+  position: fixed;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(calc(100vw - 32px), 360px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.varo-toast-region[data-position='top'] {
+  top: max(16px, env(safe-area-inset-top));
+}
+
+.varo-toast-region[data-position='middle'] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.varo-toast-region[data-position='bottom'] {
+  bottom: max(16px, env(safe-area-inset-bottom));
+}
+
+.varo-toast-region[data-inline='true'] {
+  position: relative;
+  inset: auto;
+  width: min(100%, 360px);
+  transform: none;
+}
+
+.varo-toast-region .varo-toast {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-width: none;
+  transform: none;
 }
 
 .varo-toast-enter-active {
-  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: opacity var(--varo-ui-motion-enter) ease, transform var(--varo-ui-motion-enter) var(--varo-ui-motion-ease);
 }
 
 .varo-toast-leave-active {
-  transition: opacity 0.16s ease, transform 0.16s ease-in;
+  transition: opacity var(--varo-ui-motion-exit) ease, transform var(--varo-ui-motion-exit) ease-in;
 }
 
 .varo-toast-enter-from,
@@ -1187,6 +1436,16 @@ textarea.varo-input__control {
   transform: translate(-50%, 10px) scale(0.98);
 }
 
+.varo-toast-region .varo-toast.varo-toast-enter-from,
+.varo-toast-region .varo-toast.varo-toast-leave-to {
+  transform: translateY(-8px) scale(0.98);
+}
+
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-enter-from,
+.varo-toast-region[data-position='bottom'] .varo-toast.varo-toast-leave-to {
+  transform: translateY(8px) scale(0.98);
+}
+
 @keyframes varo-toast-spin {
   to {
     transform: rotate(360deg);
@@ -1209,6 +1468,11 @@ textarea.varo-input__control {
     transform: translate(-50%, -50%);
   }
 
+  .varo-toast-region .varo-toast.varo-toast-enter-from,
+  .varo-toast-region .varo-toast.varo-toast-leave-to {
+    transform: none;
+  }
+
   .varo-toast__spinner {
     animation-duration: 1.8s;
   }
@@ -1335,6 +1599,79 @@ textarea.varo-input__control {
   }
 }
 
+.varo-date-field {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+  color: var(--varo-ui-text);
+}
+
+.varo-date-field__control.varo-date-field__control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
+  padding: 0 12px;
+  margin: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-input-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__control {
+  border-color: var(--varo-ui-primary);
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+.varo-date-field[data-disabled='true'] .varo-date-field__control {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.varo-date-field[data-readonly='true'] .varo-date-field__control {
+  cursor: default;
+}
+
+.varo-date-field__value,
+.varo-date-field__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.varo-date-field__placeholder {
+  color: var(--varo-ui-text-placeholder);
+}
+
+.varo-date-field__arrow {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  color: var(--varo-ui-text-muted);
+  border-right: 1.6px solid currentcolor;
+  border-bottom: 1.6px solid currentcolor;
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.varo-date-field[data-open='true'] .varo-date-field__arrow {
+  color: var(--varo-ui-primary);
+  transform: translateY(2px) rotate(225deg);
+}
+
+.varo-date-field__picker {
+  width: 100%;
+}
+
 .varo-calendar,
 .varo-date-picker,
 .varo-picker,
@@ -1482,12 +1819,25 @@ textarea.varo-input__control {
   color: var(--varo-ui-primary);
 }
 
-.varo-picker__columns,
+.varo-picker__columns {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  padding: 8px;
+}
+
 .varo-cascader__options {
   display: grid;
   padding: 8px;
 }
 
+.varo-picker__column {
+  display: grid;
+  align-content: start;
+  max-height: 240px;
+  overflow: auto;
+}
+
 .varo-picker__option,
 .varo-cascader__option {
   position: relative;
@@ -3217,6 +3567,103 @@ textarea.varo-input__control {
   transition: none;
 }
 
+.varo-signature {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.varo-signature__canvas {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  touch-action: none;
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.varo-signature[data-disabled='true'] {
+  opacity: 0.58;
+}
+
+.varo-signature__clear.varo-signature__clear {
+  box-sizing: border-box;
+  justify-self: end;
+  width: auto;
+  min-height: 36px;
+  padding: 0 12px;
+  margin: 0;
+  font-weight: 700;
+  color: var(--varo-ui-danger);
+  cursor: pointer;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.varo-signature__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.varo-watermark {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.varo-watermark__content {
+  position: relative;
+  z-index: 0;
+}
+
+.varo-watermark__overlay {
+  position: absolute;
+  inset: calc(0px - var(--varo-watermark-gap-y)) calc(0px - var(--varo-watermark-gap-x));
+  z-index: var(--varo-watermark-z-index);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  transform: translate(var(--varo-watermark-offset-x), var(--varo-watermark-offset-y));
+}
+
+.varo-watermark__item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--varo-watermark-gap-x);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--varo-watermark-gap-y);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--varo-watermark-font-size);
+  font-weight: var(--varo-watermark-font-weight);
+  line-height: 1;
+  color: var(--varo-watermark-color);
+  white-space: nowrap;
+  opacity: var(--varo-watermark-opacity);
+  transform: rotate(var(--varo-watermark-rotate));
+}
+
+.varo-pull-refresh {
+  display: block;
+  width: 100%;
+}
+
+.varo-pull-refresh__native-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  font-size: 12px;
+  color: var(--varo-ui-text-muted);
+}
+
 .varo-list {
   display: block;
   width: 100%;
diff --git a/registry/utils/date-utils/date-utils.ts b/registry/utils/date-utils/date-utils.ts
index 67baf70a..48808348 100644
--- a/registry/utils/date-utils/date-utils.ts
+++ b/registry/utils/date-utils/date-utils.ts
@@ -13,7 +13,7 @@ export function toDateString(date: Date): string {
 }
 
 export function parseDate(value: string | undefined, fallback = new Date()): Date {
-  if (!value) return new Date(fallback)
+  if (!value) { return new Date(fallback) }
   const [year, month = '1', day = '1'] = value.split('-')
   return new Date(Number(year), Number(month) - 1, Number(day))
 }
@@ -48,9 +48,55 @@ export function buildMonthDays(month?: string): CalendarDay[] {
     days.push({
       date: toDateString(date),
       day,
-      inMonth: true
+      inMonth: true,
     })
   }
 
   return days
 }
+
+export interface DateFieldOption {
+  label: string
+  value: number
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+export function clampDateParts(year: number, month: number, day: number): [number, number, number] {
+  const nextMonth = Math.min(12, Math.max(1, month))
+  const nextDay = Math.min(daysInMonth(year, nextMonth), Math.max(1, day))
+  return [year, nextMonth, nextDay]
+}
+
+export function dateFieldValue(year: number, month: number, day: number): string {
+  const [nextYear, nextMonth, nextDay] = clampDateParts(year, month, day)
+  return `${nextYear}-${pad(nextMonth)}-${pad(nextDay)}`
+}
+
+export function parseDateFieldValue(value: string | undefined, fallback = new Date()): [number, number, number] {
+  const date = parseDate(value, fallback)
+  return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
+}
+
+export function buildDateFieldColumns(
+  value: string | undefined,
+  minYear = 1970,
+  maxYear = 2100,
+): DateFieldOption[][] {
+  const [year, month] = parseDateFieldValue(value)
+  const years: DateFieldOption[] = []
+  for (let next = minYear; next <= maxYear; next += 1) {
+    years.push({ label: String(next), value: next })
+  }
+  const months: DateFieldOption[] = Array.from({ length: 12 }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  const days: DateFieldOption[] = Array.from({ length: daysInMonth(year, month) }, (_, index) => ({
+    label: pad(index + 1),
+    value: index + 1,
+  }))
+  return [years, months, days]
+}
diff --git a/stylelint.config.js b/stylelint.config.js
index e687465a..71f9ceba 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -17,7 +17,7 @@ export default await defineStylelintConfig({
         ],
         rules: {
           'selector-type-no-unknown': [true, {
-            ignoreTypes: ['wx-page', 'wx-view', 'wx-text', 'wx-button', 'wx-input', 'wx-textarea', 'wx-label', 'wx-image', 'wx-scroll-view', 'wx-rich-text', 'wx-map', 'wx-wechat-robot-chat'],
+            ignoreTypes: ['wx-page', 'wx-view', 'wx-text', 'wx-button', 'wx-input', 'wx-textarea', 'wx-label', 'wx-image', 'wx-canvas', 'wx-scroll-view', 'wx-rich-text', 'wx-map', 'wx-wechat-robot-chat'],
           }],
         },
       },
diff --git a/vitest.config.ts b/vitest.config.ts
index f8a34290..344fad72 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -23,6 +23,7 @@ export default defineConfig({
       '@varo/primitives-h5': resolve(import.meta.dirname, 'packages/primitives-h5/src/index.ts'),
       '@varo/primitives-weapp': resolve(import.meta.dirname, 'packages/primitives-weapp/src/index.ts'),
       '@varo-ui/h5': resolve(import.meta.dirname, 'packages/ui-h5/src/index.ts'),
+      '@varo-ui/weapp/primitives': resolve(import.meta.dirname, 'packages/ui-weapp/src/primitives.ts'),
       '@varo-ui/weapp': resolve(import.meta.dirname, 'packages/ui-weapp/src/index.ts'),
     },
   },