@morya-ui/mcp 0.4.3 → 0.4.5

package/data/catalog.json

@@ -1,12 +1,12 @@
 {
-  "generatedAt": "2026-10-09T11:44:49.138Z",
+  "generatedAt": "2026-10-12T07:47:04.752Z",
   "library": {
     "name": "morya-ui",
-    "version": "0.4.3"
+    "version": "0.4.5"
   },
   "mcp": {
     "name": "@morya-ui/mcp",
-    "version": "0.4.3"
+    "version": "0.4.5"
   },
   "components": [
     {
@@ -6106,7 +6106,31 @@
           "name": "shortcuts",
           "type": "DatePickerShortcut[]",
           "default": "[]",
-          "description": "面板快捷选项。"
+          "description": "面板快捷选项；与当前值匹配时高亮。"
+        },
+        {
+          "name": "status",
+          "type": "'default' | 'warning' | 'error'",
+          "default": "'default'",
+          "description": "视觉警示；`invalid` / `errorMessage` 自动视为 `error`。"
+        },
+        {
+          "name": "needConfirm",
+          "type": "boolean",
+          "default": "false",
+          "description": "选择后仅写入 draft，按「确认」提交、「取消」回滚。"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": "false",
+          "description": "多选日期（仅 `type='date'`）；`modelValue` 为 `string[]`。"
+        },
+        {
+          "name": "mask",
+          "type": "boolean",
+          "default": "false",
+          "description": "输入框可编辑，按 `format` 自动补分隔符；Enter 提交，Esc/失焦回滚。"
         },
         {
           "name": "fluid",
@@ -6206,6 +6230,14 @@
         {
           "name": "trigger",
           "description": "自定义触发器 `{ value, open }`。"
+        },
+        {
+          "name": "footer",
+          "description": "面板底部自定义操作区，作用域 `{ close }`。`need-confirm` 时若未提供则显示默认「取消/确认」。"
+        },
+        {
+          "name": "cell",
+          "description": "自定义日期单元格，作用域 `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`。"
         }
       ],
       "methods": [],
@@ -6309,6 +6341,123 @@
           "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>(null)\nconst shortcuts = [\n  { label: '今天', value: () => new Date() },\n  { label: '六月一日', value: '2024-06-01' },\n]\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"快捷选项\" :shortcuts=\"shortcuts\" />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "范围快捷键-1",
+          "section": "范围快捷键",
+          "sectionId": "范围快捷键",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst recent = ref<[string, string] | null>(null)\nconst month = ref<[string, string] | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nfunction daysAgo(n: number) {\n  const d = new Date()\n  d.setDate(d.getDate() - n)\n  return d\n}\n\nconst recentShortcuts = [\n  { label: '最近 7 天', value: () => [iso(daysAgo(6)), iso(new Date())] as [string, string] },\n  { label: '最近 30 天', value: () => [iso(daysAgo(29)), iso(new Date())] as [string, string] },\n  { label: '最近 90 天', value: () => [iso(daysAgo(89)), iso(new Date())] as [string, string] },\n]\n\nconst monthShortcuts = [\n  {\n    label: '本月',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth(), 1)\n      return [iso(start), iso(now)] as [string, string]\n    },\n  },\n  {\n    label: '上月',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)\n      const end = new Date(now.getFullYear(), now.getMonth(), 0)\n      return [iso(start), iso(end)] as [string, string]\n    },\n  },\n  {\n    label: '今年',\n    value: () => {\n      const now = new Date()\n      return [`${now.getFullYear()}-01-01`, iso(now)] as [string, string]\n    },\n  },\n]\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"recent\"\n      type=\"daterange\"\n      label=\"最近 N 天\"\n      :shortcuts=\"recentShortcuts\"\n      help-text=\"匹配当前值的快捷键会高亮\"\n    />\n    <MDatePicker\n      v-model=\"month\"\n      type=\"daterange\"\n      label=\"按月 / 按年\"\n      :shortcuts=\"monthShortcuts\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "自定义格式-1",
+          "section": "自定义格式",
+          "sectionId": "自定义格式",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst isoDate = ref<string | null>('2024-06-15')\nconst slashDate = ref<string | null>('2024-06-15')\nconst chineseDate = ref<string | null>('2024-06-15')\nconst time12 = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker v-model=\"isoDate\" label=\"默认 ISO（YYYY-MM-DD）\" />\n    <MDatePicker v-model=\"slashDate\" label=\"斜杠格式（YYYY/MM/DD）\" format=\"YYYY/MM/DD\" />\n    <MDatePicker v-model=\"chineseDate\" label=\"中文格式（YYYY年MM月DD日）\" format=\"YYYY年MM月DD日\" />\n    <MDatePicker\n      v-model=\"time12\"\n      type=\"datetime\"\n      label=\"日期时间带斜杠（YYYY/MM/DD HH:mm）\"\n      format=\"YYYY/MM/DD\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "日期时间-1",
+          "section": "日期时间",
+          "sectionId": "日期时间",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst datetimeSec = ref<string | null>('2024-06-15 14:30:45')\nconst range = ref<[string, string] | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"datetime\"\n      type=\"datetime\"\n      label=\"日期时间（分钟）\"\n      help-text=\"点击日期后再选时间，配合 need-confirm 体验更佳\"\n    />\n    <MDatePicker\n      v-model=\"datetimeSec\"\n      type=\"datetime\"\n      label=\"日期时间（含秒）\"\n      show-seconds\n      need-confirm\n    />\n    <MDatePicker\n      v-model=\"range\"\n      type=\"datetimerange\"\n      label=\"日期时间范围\"\n      need-confirm\n      help-text=\"两次点击选定日期，再用时间列调整起止时刻\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "自定义触发器-1",
+          "section": "自定义触发器",
+          "sectionId": "自定义触发器",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MIcon } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date1 = ref<string | null>('2024-06-15')\nconst date2 = ref<string | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 16px; max-width: 32rem\">\n    <MDatePicker v-model=\"date1\" label=\"按钮触发器\">\n      <template #trigger=\"{ value }\">\n        <MButton type=\"default\" size=\"small\">\n          <MIcon name=\"calendar\" size=\"sm\" style=\"margin-right: 4px\" />\n          {{ value || '选择日期' }}\n        </MButton>\n      </template>\n    </MDatePicker>\n\n    <MDatePicker v-model=\"date2\" label=\"纯图标触发器\">\n      <template #trigger=\"{ value }\">\n        <button\n          type=\"button\"\n          style=\"display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-control); background: var(--m-color-surface); cursor: pointer\"\n        >\n          <MIcon name=\"calendar\" size=\"sm\" />\n          <span v-if=\"value\">{{ value }}</span>\n          <span v-else style=\"color: var(--m-color-text-muted)\">未选择</span>\n        </button>\n      </template>\n    </MDatePicker>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "禁用区间-1",
+          "section": "禁用区间",
+          "sectionId": "禁用区间",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst weekdayOnly = ref<string | null>(null)\nconst futureOnly = ref<string | null>(null)\nconst next30 = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nconst today = computed(() => iso(new Date()))\nconst in30Days = computed(() => {\n  const d = new Date()\n  d.setDate(d.getDate() + 30)\n  return iso(d)\n})\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"weekdayOnly\"\n      label=\"只能选今天之前\"\n      :max-date=\"today\"\n      help-text=\"max-date = 今天\"\n    />\n    <MDatePicker\n      v-model=\"futureOnly\"\n      label=\"只能选未来日期\"\n      :min-date=\"today\"\n      help-text=\"min-date = 今天\"\n    />\n    <MDatePicker\n      v-model=\"next30\"\n      label=\"只能选未来 30 天内\"\n      :min-date=\"today\"\n      :max-date=\"in30Days\"\n      help-text=\"min-date 与 max-date 组合\"\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "内联面板-1",
+          "section": "内联面板",
+          "sectionId": "内联面板",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\n</script>\n\n<template>\n  <div style=\"max-width: 32rem\">\n    <p style=\"margin: 0 0 8px; color: var(--m-color-text-muted); font-size: 13px\">\n      使用 <code>:teleport=\"false\"</code> + <code>append-to=\"self\"</code> 让面板就地渲染，适合嵌入卡片或自定义布局。\n    </p>\n    <div style=\"border: 1px solid var(--m-color-border); border-radius: 8px; padding: 16px; background: var(--m-color-surface)\">\n      <MDatePicker v-model=\"date\" label=\"内联面板\" :teleport=\"false\" append-to=\"self\" />\n    </div>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "状态-status-1",
+          "section": "状态（status）",
+          "sectionId": "状态-status",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst warning = ref<string | null>('2024-06-15')\nconst error = ref<string | null>('2024-06-20')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"warning\" label=\"Warning 状态\" status=\"warning\" help-text=\"这是一个温馨提示\" />\n    <MDatePicker v-model=\"error\" label=\"Error 状态\" status=\"error\" help-text=\"字段存在错误\" />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "页脚与自定义单元格-1",
+          "section": "页脚与自定义单元格",
+          "sectionId": "页脚与自定义单元格",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>('2024-06-15')\n\nconst holidays = new Set(['2024-06-10', '2024-06-17'])\n\nfunction pad(n: number) {\n  return String(n).padStart(2, '0')\n}\nfunction iso(date: Date) {\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`\n}\nfunction today(): string {\n  return iso(new Date())\n}\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"带页脚与自定义单元格\">\n    <template #cell=\"{ date }\">\n      <span style=\"position: relative\">\n        {{ date.getDate() }}\n        <span\n          v-if=\"holidays.has(iso(date))\"\n          style=\"position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--m-color-primary)\"\n        />\n      </span>\n    </template>\n    <template #footer=\"{ close }\">\n      <MTag value=\"演示：圆点 = 节假日\" type=\"secondary\" />\n      <MButton size=\"small\" @click=\"value = today(); close()\">今天</MButton>\n    </template>\n  </MDatePicker>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "needconfirm-确认提交-1",
+          "section": "needConfirm 确认提交",
+          "sectionId": "needconfirm-确认提交",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst time = ref<string | null>('09:15')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"日期时间（需确认）\" need-confirm />\n    <MDatePicker v-model=\"time\" type=\"time\" label=\"时间（需确认）\" need-confirm />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "多选日期-1",
+          "section": "多选日期",
+          "sectionId": "多选日期",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst dates = ref<string[]>(['2024-06-10', '2024-06-15'])\n</script>\n\n<template>\n  <MDatePicker v-model=\"dates\" label=\"多选日期\" multiple />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "多选实战-排班-1",
+          "section": "多选实战：排班",
+          "sectionId": "多选实战-排班",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker, MTag } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst selectedDates = ref<string[]>([])\n\nconst sorted = computed(() =>\n  [...selectedDates.value].sort((a, b) => (a < b ? -1 : 1)),\n)\n\nconst weekdayMap = ['日', '一', '二', '三', '四', '五', '六']\nfunction formatDay(iso: string) {\n  const d = new Date(iso)\n  return `${iso.slice(5)} 周${weekdayMap[d.getDay()]}`\n}\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"selectedDates\"\n      label=\"选择排班日期\"\n      multiple\n      help-text=\"点击切换选中；可跨月选择多天\"\n    />\n    <div v-if=\"sorted.length\" style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n      <MTag v-for=\"iso in sorted\" :key=\"iso\" :value=\"formatDay(iso)\" type=\"primary\" />\n    </div>\n    <p v-else style=\"color: var(--m-color-text-muted); font-size: 13px; margin: 0\">\n      尚未选择任何日期\n    </p>\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "表单集成-1",
+          "section": "表单集成",
+          "sectionId": "表单集成",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker } from 'morya-ui'\nimport { reactive, ref } from 'vue'\n\nconst form = reactive({\n  name: '',\n  startDate: null as string | null,\n  endDate: null as string | null,\n})\n\nconst submitted = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\nconst today = iso(new Date())\n\nconst startError = ref('')\nconst endError = ref('')\n\nfunction submit() {\n  startError.value = form.startDate ? '' : '请选择开始日期'\n  endError.value = form.endDate ? '' : '请选择结束日期'\n  if (form.startDate && form.endDate && form.endDate < form.startDate) {\n    endError.value = '结束日期不能早于开始日期'\n  }\n  if (startError.value || endError.value) return\n  submitted.value = JSON.stringify(form, null, 2)\n}\n</script>\n\n<template>\n  <form style=\"display: grid; gap: 12px; max-width: 32rem\" @submit.prevent=\"submit\">\n    <MDatePicker\n      v-model=\"form.startDate\"\n      label=\"开始日期\"\n      required\n      :min-date=\"today\"\n      :error-message=\"startError\"\n    />\n    <MDatePicker\n      v-model=\"form.endDate\"\n      label=\"结束日期\"\n      required\n      :min-date=\"form.startDate ?? today\"\n      :error-message=\"endError\"\n    />\n    <div>\n      <MButton type=\"primary\" html-type=\"submit\">提交</MButton>\n    </div>\n    <pre v-if=\"submitted\" style=\"background: var(--m-color-surface-sunken); padding: 8px; border-radius: 4px; font-size: 12px\">{{ submitted }}</pre>\n  </form>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "输入掩码-1",
+          "section": "输入掩码",
+          "sectionId": "输入掩码",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\nconst datetime = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"date\" label=\"输入掩码（date）\" mask />\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"输入掩码（datetime）\" mask />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "类型-1",
           "section": "类型",
@@ -6417,6 +6566,123 @@
           "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>(null)\nconst shortcuts = [\n  { label: 'Today', value: () => new Date() },\n  { label: 'June 1', value: '2024-06-01' },\n]\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"Shortcuts\" :shortcuts=\"shortcuts\" />\n</template>",
           "locale": "en-US"
         },
+        {
+          "id": "range-shortcuts-1",
+          "section": "Range Shortcuts",
+          "sectionId": "range-shortcuts",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst recent = ref<[string, string] | null>(null)\nconst month = ref<[string, string] | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nfunction daysAgo(n: number) {\n  const d = new Date()\n  d.setDate(d.getDate() - n)\n  return d\n}\n\nconst recentShortcuts = [\n  { label: 'Last 7 days', value: () => [iso(daysAgo(6)), iso(new Date())] as [string, string] },\n  { label: 'Last 30 days', value: () => [iso(daysAgo(29)), iso(new Date())] as [string, string] },\n  { label: 'Last 90 days', value: () => [iso(daysAgo(89)), iso(new Date())] as [string, string] },\n]\n\nconst monthShortcuts = [\n  {\n    label: 'This month',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth(), 1)\n      return [iso(start), iso(now)] as [string, string]\n    },\n  },\n  {\n    label: 'Last month',\n    value: () => {\n      const now = new Date()\n      const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)\n      const end = new Date(now.getFullYear(), now.getMonth(), 0)\n      return [iso(start), iso(end)] as [string, string]\n    },\n  },\n  {\n    label: 'Year to date',\n    value: () => {\n      const now = new Date()\n      return [`${now.getFullYear()}-01-01`, iso(now)] as [string, string]\n    },\n  },\n]\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"recent\"\n      type=\"daterange\"\n      label=\"Recent N days\"\n      :shortcuts=\"recentShortcuts\"\n      help-text=\"Shortcuts matching the current value get highlighted\"\n    />\n    <MDatePicker\n      v-model=\"month\"\n      type=\"daterange\"\n      label=\"By month / year\"\n      :shortcuts=\"monthShortcuts\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "custom-format-1",
+          "section": "Custom Format",
+          "sectionId": "custom-format",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst isoDate = ref<string | null>('2024-06-15')\nconst slashDate = ref<string | null>('2024-06-15')\nconst usDate = ref<string | null>('2024-06-15')\nconst time = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker v-model=\"isoDate\" label=\"Default ISO (YYYY-MM-DD)\" />\n    <MDatePicker v-model=\"slashDate\" label=\"Slash (YYYY/MM/DD)\" format=\"YYYY/MM/DD\" />\n    <MDatePicker v-model=\"usDate\" label=\"US style (MM/DD/YYYY)\" format=\"MM/DD/YYYY\" />\n    <MDatePicker\n      v-model=\"time\"\n      type=\"datetime\"\n      label=\"Datetime with slash (YYYY/MM/DD HH:mm)\"\n      format=\"YYYY/MM/DD\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "datetime-1",
+          "section": "Datetime",
+          "sectionId": "datetime",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst datetimeSec = ref<string | null>('2024-06-15 14:30:45')\nconst range = ref<[string, string] | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"datetime\"\n      type=\"datetime\"\n      label=\"Datetime (minute)\"\n      help-text=\"Pick a date, then time; pair with need-confirm for a smoother flow\"\n    />\n    <MDatePicker\n      v-model=\"datetimeSec\"\n      type=\"datetime\"\n      label=\"Datetime (with seconds)\"\n      show-seconds\n      need-confirm\n    />\n    <MDatePicker\n      v-model=\"range\"\n      type=\"datetimerange\"\n      label=\"Datetime range\"\n      need-confirm\n      help-text=\"Pick two dates, then adjust start / end time in the time columns\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "custom-trigger-1",
+          "section": "Custom Trigger",
+          "sectionId": "custom-trigger",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MIcon } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date1 = ref<string | null>('2024-06-15')\nconst date2 = ref<string | null>(null)\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 16px; max-width: 32rem\">\n    <MDatePicker v-model=\"date1\" label=\"Button trigger\">\n      <template #trigger=\"{ value }\">\n        <MButton type=\"default\" size=\"small\">\n          <MIcon name=\"calendar\" size=\"sm\" style=\"margin-right: 4px\" />\n          {{ value || 'Pick a date' }}\n        </MButton>\n      </template>\n    </MDatePicker>\n\n    <MDatePicker v-model=\"date2\" label=\"Icon trigger\">\n      <template #trigger=\"{ value }\">\n        <button\n          type=\"button\"\n          style=\"display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--m-color-border); border-radius: var(--m-radius-control); background: var(--m-color-surface); cursor: pointer\"\n        >\n          <MIcon name=\"calendar\" size=\"sm\" />\n          <span v-if=\"value\">{{ value }}</span>\n          <span v-else style=\"color: var(--m-color-text-muted)\">Not set</span>\n        </button>\n      </template>\n    </MDatePicker>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "disabled-ranges-1",
+          "section": "Disabled Ranges",
+          "sectionId": "disabled-ranges",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst pastOnly = ref<string | null>(null)\nconst futureOnly = ref<string | null>(null)\nconst next30 = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nconst today = computed(() => iso(new Date()))\nconst in30Days = computed(() => {\n  const d = new Date()\n  d.setDate(d.getDate() + 30)\n  return iso(d)\n})\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"pastOnly\"\n      label=\"Past dates only\"\n      :max-date=\"today\"\n      help-text=\"max-date = today\"\n    />\n    <MDatePicker\n      v-model=\"futureOnly\"\n      label=\"Future dates only\"\n      :min-date=\"today\"\n      help-text=\"min-date = today\"\n    />\n    <MDatePicker\n      v-model=\"next30\"\n      label=\"Within next 30 days\"\n      :min-date=\"today\"\n      :max-date=\"in30Days\"\n      help-text=\"min-date + max-date combined\"\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "inline-panel-1",
+          "section": "Inline Panel",
+          "sectionId": "inline-panel",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\n</script>\n\n<template>\n  <div style=\"max-width: 32rem\">\n    <p style=\"margin: 0 0 8px; color: var(--m-color-text-muted); font-size: 13px\">\n      Use <code>:teleport=\"false\"</code> with <code>append-to=\"self\"</code> to render the panel inline — useful inside cards or custom layouts.\n    </p>\n    <div style=\"border: 1px solid var(--m-color-border); border-radius: 8px; padding: 16px; background: var(--m-color-surface)\">\n      <MDatePicker v-model=\"date\" label=\"Inline panel\" :teleport=\"false\" append-to=\"self\" />\n    </div>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "status-1",
+          "section": "Status",
+          "sectionId": "status",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst warning = ref<string | null>('2024-06-15')\nconst error = ref<string | null>('2024-06-20')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"warning\" label=\"Warning status\" status=\"warning\" help-text=\"A friendly reminder\" />\n    <MDatePicker v-model=\"error\" label=\"Error status\" status=\"error\" help-text=\"Something is wrong\" />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "footer-custom-cell-1",
+          "section": "Footer & Custom Cell",
+          "sectionId": "footer-custom-cell",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst value = ref<string | null>('2024-06-15')\n\nconst holidays = new Set(['2024-06-10', '2024-06-17'])\n\nfunction pad(n: number) {\n  return String(n).padStart(2, '0')\n}\nfunction iso(date: Date) {\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`\n}\nfunction today(): string {\n  return iso(new Date())\n}\n</script>\n\n<template>\n  <MDatePicker v-model=\"value\" label=\"Footer + custom cell\">\n    <template #cell=\"{ date }\">\n      <span style=\"position: relative\">\n        {{ date.getDate() }}\n        <span\n          v-if=\"holidays.has(iso(date))\"\n          style=\"position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--m-color-primary)\"\n        />\n      </span>\n    </template>\n    <template #footer=\"{ close }\">\n      <MTag value=\"Dot = holiday\" type=\"secondary\" />\n      <MButton size=\"small\" @click=\"value = today(); close()\">Today</MButton>\n    </template>\n  </MDatePicker>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "needconfirm-1",
+          "section": "needConfirm",
+          "sectionId": "needconfirm",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst datetime = ref<string | null>('2024-06-15 14:30')\nconst time = ref<string | null>('09:15')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"Datetime (need confirm)\" need-confirm />\n    <MDatePicker v-model=\"time\" type=\"time\" label=\"Time (need confirm)\" need-confirm />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "multiple-dates-1",
+          "section": "Multiple Dates",
+          "sectionId": "multiple-dates",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst dates = ref<string[]>(['2024-06-10', '2024-06-15'])\n</script>\n\n<template>\n  <MDatePicker v-model=\"dates\" label=\"Multiple dates\" multiple />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "multiple-in-practice-shift-planning-1",
+          "section": "Multiple in Practice: Shift Planning",
+          "sectionId": "multiple-in-practice-shift-planning",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker, MTag } from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst selectedDates = ref<string[]>([])\n\nconst sorted = computed(() =>\n  [...selectedDates.value].sort((a, b) => (a < b ? -1 : 1)),\n)\n\nconst weekdayMap = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\nfunction formatDay(iso: string) {\n  const d = new Date(iso)\n  return `${iso.slice(5)} ${weekdayMap[d.getDay()]}`\n}\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px; max-width: 32rem\">\n    <MDatePicker\n      v-model=\"selectedDates\"\n      label=\"Pick shift days\"\n      multiple\n      help-text=\"Click to toggle; you can pick across months\"\n    />\n    <div v-if=\"sorted.length\" style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n      <MTag v-for=\"iso in sorted\" :key=\"iso\" :value=\"formatDay(iso)\" type=\"primary\" />\n    </div>\n    <p v-else style=\"color: var(--m-color-text-muted); font-size: 13px; margin: 0\">\n      No days selected yet\n    </p>\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "form-integration-1",
+          "section": "Form Integration",
+          "sectionId": "form-integration",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MDatePicker } from 'morya-ui'\nimport { reactive, ref } from 'vue'\n\nconst form = reactive({\n  name: '',\n  startDate: null as string | null,\n  endDate: null as string | null,\n})\n\nconst submitted = ref<string | null>(null)\n\nfunction iso(date: Date) {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\nconst today = iso(new Date())\n\nconst startError = ref('')\nconst endError = ref('')\n\nfunction submit() {\n  startError.value = form.startDate ? '' : 'Start date is required'\n  endError.value = form.endDate ? '' : 'End date is required'\n  if (form.startDate && form.endDate && form.endDate < form.startDate) {\n    endError.value = 'End date cannot be earlier than start date'\n  }\n  if (startError.value || endError.value) return\n  submitted.value = JSON.stringify(form, null, 2)\n}\n</script>\n\n<template>\n  <form style=\"display: grid; gap: 12px; max-width: 32rem\" @submit.prevent=\"submit\">\n    <MDatePicker\n      v-model=\"form.startDate\"\n      label=\"Start date\"\n      required\n      :min-date=\"today\"\n      :error-message=\"startError\"\n    />\n    <MDatePicker\n      v-model=\"form.endDate\"\n      label=\"End date\"\n      required\n      :min-date=\"form.startDate ?? today\"\n      :error-message=\"endError\"\n    />\n    <div>\n      <MButton type=\"primary\" html-type=\"submit\">Submit</MButton>\n    </div>\n    <pre v-if=\"submitted\" style=\"background: var(--m-color-surface-sunken); padding: 8px; border-radius: 4px; font-size: 12px\">{{ submitted }}</pre>\n  </form>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "input-mask-1",
+          "section": "Input Mask",
+          "sectionId": "input-mask",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MDatePicker } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst date = ref<string | null>('2024-06-15')\nconst datetime = ref<string | null>('2024-06-15 14:30')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <MDatePicker v-model=\"date\" label=\"Mask (date)\" mask />\n    <MDatePicker v-model=\"datetime\" type=\"datetime\" label=\"Mask (datetime)\" mask />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
         {
           "id": "types-1",
           "section": "Types",
@@ -6497,10 +6763,80 @@
               "title": "Shortcuts",
               "body": "```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```"
             },
+            {
+              "id": "范围快捷键",
+              "title": "范围快捷键",
+              "body": "`shortcuts` 在 `daterange` / `datetimerange` 下更强大：返回 `[start, end]` 元组即可一键选定区间。与当前值匹配的快捷键会自动高亮。\n\n```vue preview src=\"./demos/RangeShortcuts.zh.vue\"\n```"
+            },
+            {
+              "id": "自定义格式",
+              "title": "自定义格式",
+              "body": "`format` 仅控制显示，提交值仍按 `type` 约定（`YYYY-MM-DD` 等）。支持任意 `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` 组合与自由文本。\n\n```vue preview src=\"./demos/Format.zh.vue\"\n```"
+            },
+            {
+              "id": "日期时间",
+              "title": "日期时间",
+              "body": "`datetime` 与 `datetimerange` 把日历与时间列放在同一面板；`show-seconds` 含秒；`need-confirm` 让用户从容完成两步选择后再提交。\n\n```vue preview src=\"./demos/Datetime.zh.vue\"\n```"
+            },
+            {
+              "id": "自定义触发器",
+              "title": "自定义触发器",
+              "body": "`#trigger` 插槽完全接管触发元素，作用域 `{ value, open }`。适合按钮、图标或复合排版。\n\n```vue preview src=\"./demos/CustomTrigger.zh.vue\"\n```"
+            },
+            {
+              "id": "禁用区间",
+              "title": "禁用区间",
+              "body": "`min-date` / `max-date` 之外的日期会在日历中置灰禁用。两者可单独或组合使用。\n\n```vue preview src=\"./demos/DisabledDates.zh.vue\"\n```"
+            },
+            {
+              "id": "内联面板",
+              "title": "内联面板",
+              "body": "`:teleport=\"false\"` + `append-to=\"self\"` 让面板嵌入文档流，不浮出层叠上下文，适合卡片、抽屉或复合表单内嵌。\n\n```vue preview src=\"./demos/InlinePanel.zh.vue\"\n```"
+            },
+            {
+              "id": "面板模式切换",
+              "title": "面板模式切换",
+              "body": "点击面板头部的月份/年份标签，可在 日 → 月 → 年 三个子面板间循环切换，方便快速跳到目标年份/月份再回到日视图。"
+            },
+            {
+              "id": "状态-status",
+              "title": "状态（status）",
+              "body": "`status` 提供 `'warning'` 与 `'error'` 两种视觉警示（`invalid` / `errorMessage` 会自动落到 `error`）。`warning` 通常配合 `helpText` 表达温和提醒，不阻断提交。\n\n```vue preview src=\"./demos/Status.zh.vue\"\n```"
+            },
+            {
+              "id": "页脚与自定义单元格",
+              "title": "页脚与自定义单元格",
+              "body": "`#footer` 插槽在面板底部渲染操作区（作用域 `{ close }`）；`#cell` 插槽自定义日期单元格内容（作用域含 `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`），适合加节假日标记、日程点、自定义排版。\n\n```vue preview src=\"./demos/FooterAndCell.zh.vue\"\n```"
+            },
+            {
+              "id": "needconfirm-确认提交",
+              "title": "needConfirm 确认提交",
+              "body": "`need-confirm` 启用后，选择值只写入暂存 draft，点击「确认」才提交并关闭，「取消」回滚。适合 `datetime` / `datetimerange` / `time` 等需要多步操作的场景。\n\n```vue preview src=\"./demos/NeedConfirm.zh.vue\"\n```"
+            },
+            {
+              "id": "多选日期",
+              "title": "多选日期",
+              "body": "`multiple` 仅在 `type='date'` 下生效。`modelValue` 变为 `string[]`，每次点击切换选中，面板保持打开。\n\n```vue preview src=\"./demos/Multiple.zh.vue\"\n```"
+            },
+            {
+              "id": "多选实战-排班",
+              "title": "多选实战：排班",
+              "body": "多选配合 `MTag` 展示所选日期，直观易读。\n\n```vue preview src=\"./demos/WorkSchedule.zh.vue\"\n```"
+            },
+            {
+              "id": "表单集成",
+              "title": "表单集成",
+              "body": "结合 `required` / `error-message` / `min-date`，实现一个完整的项目日期范围校验表单。\n\n```vue preview src=\"./demos/FormIntegration.zh.vue\"\n```"
+            },
+            {
+              "id": "输入掩码",
+              "title": "输入掩码",
+              "body": "`mask` 让输入框可编辑，按 `format` 自动插入 `-` `/` `:` 分隔符；`Enter` 提交，`Esc` 或失焦回滚。仅 `date` / `datetime` / `time` 类型支持。\n\n```vue preview src=\"./demos/Mask.zh.vue\"\n```"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项。                                                                              |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\n| `teleport`     | `boolean`                                                                               | `true`         | 面板 Teleport；默认挂到 `body`。                                                            |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | 挂载目标；`'self'` / `false` 就地渲染。                                                     |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。                           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |"
+              "body": "| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项；与当前值匹配时高亮。                                                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | 视觉警示；`invalid` / `errorMessage` 自动视为 `error`。                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | 选择后仅写入 draft，按「确认」提交、「取消」回滚。                                          |\n| `multiple`     | `boolean`                                                                               | `false`        | 多选日期（仅 `type='date'`）；`modelValue` 为 `string[]`。                                  |\n| `mask`         | `boolean`                                                                               | `false`        | 输入框可编辑，按 `format` 自动补分隔符；Enter 提交，Esc/失焦回滚。                          |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\n| `teleport`     | `boolean`                                                                               | `true`         | 面板 Teleport；默认挂到 `body`。                                                            |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | 挂载目标；`'self'` / `false` 就地渲染。                                                     |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。                           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |"
             },
             {
               "id": "events",
@@ -6510,7 +6846,7 @@
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| 插槽名    | 说明                             |\n| --------- | -------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。 |"
+              "body": "| 插槽名    | 说明                                                                                                                              |\n| --------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。                                                                                                  |\n| `footer`  | 面板底部自定义操作区，作用域 `{ close }`。`need-confirm` 时若未提供则显示默认「取消/确认」。                                       |\n| `cell`    | 自定义日期单元格，作用域 `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`。                         |"
             },
             {
               "id": "类型",
@@ -6523,7 +6859,7 @@
               "body": "用 `type` 区分日期/范围/时间模式（含 `daterange`、`datetime`、`time` 等）。"
             }
           ],
-          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: 日历弹层选择日期、时间、月份或年份。单值或范围，字符串格式按 `type` 约定。支持 min/max、shortcuts、format、showSeconds、clearable。\n---\n\n# DatePicker\n\n带月份导航与日网格的日期选择器；也可切换为时间列、月/年面板。\n\n## 何时使用\n\n- 需要选择日期、日期范围、日期时间、月或年时。\n- 仅选时刻时优先使用独立入口 [TimePicker](/components/TimePicker)（仍可用 `type=\"time\"`）。\n\n## 引入\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\n超出范围的日期在日历中禁用。\n\n```vue preview src=\"./demos/MinMax.zh.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.zh.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.zh.vue\"\n```\n\n## Teleport\n\n面板默认 Teleport 到 `body`。可用 `append-to=\"self\"` 或 `teleport={false}` 就地渲染。\n\n```vue preview src=\"./demos/Teleport.zh.vue\"\n```\n\n## Range\n\n`type=\"daterange\"` 时先点起点、再点终点；值为 `[start, end]`（ISO 日期）。\n\n```vue preview src=\"./demos/Range.zh.vue\"\n```\n\n## 类型扩展\n\n`type` 支持 `month` / `year` / `time` / `datetime` / `datetimerange`。`showSeconds` 控制是否包含秒。\n\n仅时间场景优先用独立组件 [TimePicker](/components/TimePicker)；本页 `type=\"time\"` 仍可用。\n\n`datetimerange`：两次点击选定日期后以两端 `00:00`（或 `00:00:00`）发出；面板保持打开时可用时间列调整终点时刻，点选最细粒度单位后关闭。\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```\n\n## Props\n\n| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项。                                                                              |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\n| `teleport`     | `boolean`                                                                               | `true`         | 面板 Teleport；默认挂到 `body`。                                                            |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | 挂载目标；`'self'` / `false` 就地渲染。                                                     |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。                           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |\n\n## Events\n\n| 事件名              | 参数                                 | 说明             |\n| ------------------- | ------------------------------------ | ---------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | 值变化。         |\n| `clear`             | —                                    | 点击清除时触发。 |\n| `change`            | —                                    | —                |\n| `hide`              | —                                    | —                |\n| `show`              | —                                    | —                |\n\n## Slots\n\n| 插槽名    | 说明                             |\n| --------- | -------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。 |\n\n## 类型\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## 功能边界\n\n用 `type` 区分日期/范围/时间模式（含 `daterange`、`datetime`、`time` 等）。\n"
+          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: 日历弹层选择日期、时间、月份或年份。单值或范围，字符串格式按 `type` 约定。支持 min/max、shortcuts、format、showSeconds、clearable。\n---\n\n# DatePicker\n\n带月份导航与日网格的日期选择器；也可切换为时间列、月/年面板。\n\n## 何时使用\n\n- 需要选择日期、日期范围、日期时间、月或年时。\n- 仅选时刻时优先使用独立入口 [TimePicker](/components/TimePicker)（仍可用 `type=\"time\"`）。\n\n## 引入\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\n超出范围的日期在日历中禁用。\n\n```vue preview src=\"./demos/MinMax.zh.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.zh.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.zh.vue\"\n```\n\n## Teleport\n\n面板默认 Teleport 到 `body`。可用 `append-to=\"self\"` 或 `teleport={false}` 就地渲染。\n\n```vue preview src=\"./demos/Teleport.zh.vue\"\n```\n\n## Range\n\n`type=\"daterange\"` 时先点起点、再点终点；值为 `[start, end]`（ISO 日期）。\n\n```vue preview src=\"./demos/Range.zh.vue\"\n```\n\n## 类型扩展\n\n`type` 支持 `month` / `year` / `time` / `datetime` / `datetimerange`。`showSeconds` 控制是否包含秒。\n\n仅时间场景优先用独立组件 [TimePicker](/components/TimePicker)；本页 `type=\"time\"` 仍可用。\n\n`datetimerange`：两次点击选定日期后以两端 `00:00`（或 `00:00:00`）发出；面板保持打开时可用时间列调整终点时刻，点选最细粒度单位后关闭。\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.zh.vue\"\n```\n\n## 范围快捷键\n\n`shortcuts` 在 `daterange` / `datetimerange` 下更强大：返回 `[start, end]` 元组即可一键选定区间。与当前值匹配的快捷键会自动高亮。\n\n```vue preview src=\"./demos/RangeShortcuts.zh.vue\"\n```\n\n## 自定义格式\n\n`format` 仅控制显示，提交值仍按 `type` 约定（`YYYY-MM-DD` 等）。支持任意 `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` 组合与自由文本。\n\n```vue preview src=\"./demos/Format.zh.vue\"\n```\n\n## 日期时间\n\n`datetime` 与 `datetimerange` 把日历与时间列放在同一面板；`show-seconds` 含秒；`need-confirm` 让用户从容完成两步选择后再提交。\n\n```vue preview src=\"./demos/Datetime.zh.vue\"\n```\n\n## 自定义触发器\n\n`#trigger` 插槽完全接管触发元素，作用域 `{ value, open }`。适合按钮、图标或复合排版。\n\n```vue preview src=\"./demos/CustomTrigger.zh.vue\"\n```\n\n## 禁用区间\n\n`min-date` / `max-date` 之外的日期会在日历中置灰禁用。两者可单独或组合使用。\n\n```vue preview src=\"./demos/DisabledDates.zh.vue\"\n```\n\n## 内联面板\n\n`:teleport=\"false\"` + `append-to=\"self\"` 让面板嵌入文档流，不浮出层叠上下文，适合卡片、抽屉或复合表单内嵌。\n\n```vue preview src=\"./demos/InlinePanel.zh.vue\"\n```\n\n## 面板模式切换\n\n点击面板头部的月份/年份标签，可在 日 → 月 → 年 三个子面板间循环切换，方便快速跳到目标年份/月份再回到日视图。\n\n## 状态（status）\n\n`status` 提供 `'warning'` 与 `'error'` 两种视觉警示（`invalid` / `errorMessage` 会自动落到 `error`）。`warning` 通常配合 `helpText` 表达温和提醒，不阻断提交。\n\n```vue preview src=\"./demos/Status.zh.vue\"\n```\n\n## 页脚与自定义单元格\n\n`#footer` 插槽在面板底部渲染操作区（作用域 `{ close }`）；`#cell` 插槽自定义日期单元格内容（作用域含 `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`），适合加节假日标记、日程点、自定义排版。\n\n```vue preview src=\"./demos/FooterAndCell.zh.vue\"\n```\n\n## needConfirm 确认提交\n\n`need-confirm` 启用后，选择值只写入暂存 draft，点击「确认」才提交并关闭，「取消」回滚。适合 `datetime` / `datetimerange` / `time` 等需要多步操作的场景。\n\n```vue preview src=\"./demos/NeedConfirm.zh.vue\"\n```\n\n## 多选日期\n\n`multiple` 仅在 `type='date'` 下生效。`modelValue` 变为 `string[]`，每次点击切换选中，面板保持打开。\n\n```vue preview src=\"./demos/Multiple.zh.vue\"\n```\n\n## 多选实战：排班\n\n多选配合 `MTag` 展示所选日期，直观易读。\n\n```vue preview src=\"./demos/WorkSchedule.zh.vue\"\n```\n\n## 表单集成\n\n结合 `required` / `error-message` / `min-date`，实现一个完整的项目日期范围校验表单。\n\n```vue preview src=\"./demos/FormIntegration.zh.vue\"\n```\n\n## 输入掩码\n\n`mask` 让输入框可编辑，按 `format` 自动插入 `-` `/` `:` 分隔符；`Enter` 提交，`Esc` 或失焦回滚。仅 `date` / `datetime` / `time` 类型支持。\n\n```vue preview src=\"./demos/Mask.zh.vue\"\n```\n\n## Props\n\n| 参数           | 类型                                                                                    | 默认值         | 说明                                                                                        |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | 按 `type`：`YYYY-MM-DD`、`[start,end]`、`YYYY-MM-DD HH:mm`、`HH:mm`、`YYYY-MM`、`YYYY` 等。 |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | 面板与值格式。                                                                              |\n| `showSeconds`  | `boolean`                                                                               | `false`        | `time` / `datetime` / `datetimerange` 是否含秒。                                            |\n| `label`        | `string`                                                                                | —              | 标签。                                                                                      |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | 可选下限。                                                                                  |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | 可选上限。                                                                                  |\n| `placeholder`  | `string`                                                                                | locale         | 占位。                                                                                      |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | 输入框展示格式（`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`）；提交值仍按 `type` 约定。                 |\n| `clearable`    | `boolean`                                                                               | `true`         | 显示清除按钮。                                                                              |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | 面板快捷选项；与当前值匹配时高亮。                                                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | 视觉警示；`invalid` / `errorMessage` 自动视为 `error`。                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | 选择后仅写入 draft，按「确认」提交、「取消」回滚。                                          |\n| `multiple`     | `boolean`                                                                               | `false`        | 多选日期（仅 `type='date'`）；`modelValue` 为 `string[]`。                                  |\n| `mask`         | `boolean`                                                                               | `false`        | 输入框可编辑，按 `format` 自动补分隔符；Enter 提交，Esc/失焦回滚。                          |\n| `fluid`        | `boolean`                                                                               | `false`        | 宽度撑满。                                                                                  |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`；可继承 ConfigProvider。                                                  |\n| `disabled`     | `boolean`                                                                               | `false`        | 禁用。                                                                                      |\n| `invalid`      | `boolean`                                                                               | `false`        | 校验失败态。                                                                                |\n| `teleport`     | `boolean`                                                                               | `true`         | 面板 Teleport；默认挂到 `body`。                                                            |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | 挂载目标；`'self'` / `false` 就地渲染。                                                     |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | 进出场动效预设；`false` / `'none'` 关闭。见[动效](/docs/motion)。                           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                           |\n| `helpText`     | `string`                                                                                | —              | —                                                                                           |\n| `id`           | `string`                                                                                | —              | —                                                                                           |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | DOM 透传，见 [样式与 attrs](/docs/attrs).                                                   |\n\n## Events\n\n| 事件名              | 参数                                 | 说明             |\n| ------------------- | ------------------------------------ | ---------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | 值变化。         |\n| `clear`             | —                                    | 点击清除时触发。 |\n| `change`            | —                                    | —                |\n| `hide`              | —                                    | —                |\n| `show`              | —                                    | —                |\n\n## Slots\n\n| 插槽名    | 说明                                                                                                                              |\n| --------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | 自定义触发器 `{ value, open }`。                                                                                                  |\n| `footer`  | 面板底部自定义操作区，作用域 `{ close }`。`need-confirm` 时若未提供则显示默认「取消/确认」。                                       |\n| `cell`    | 自定义日期单元格，作用域 `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`。                         |\n\n## 类型\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## 功能边界\n\n用 `type` 区分日期/范围/时间模式（含 `daterange`、`datetime`、`time` 等）。\n"
         },
         "en-US": {
           "title": "DatePicker",
@@ -6594,10 +6930,80 @@
               "title": "Shortcuts",
               "body": "```vue preview src=\"./demos/Shortcuts.en.vue\"\n```"
             },
+            {
+              "id": "range-shortcuts",
+              "title": "Range Shortcuts",
+              "body": "`shortcuts` shine for `daterange` / `datetimerange`: return a `[start, end]` tuple to select a range in one click. The shortcut matching the current value is highlighted automatically.\n\n```vue preview src=\"./demos/RangeShortcuts.en.vue\"\n```"
+            },
+            {
+              "id": "custom-format",
+              "title": "Custom Format",
+              "body": "`format` only affects display; the emitted value still follows the `type` convention (`YYYY-MM-DD`, etc.). Mix `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` with free text.\n\n```vue preview src=\"./demos/Format.en.vue\"\n```"
+            },
+            {
+              "id": "datetime",
+              "title": "Datetime",
+              "body": "`datetime` and `datetimerange` combine the calendar and time columns in one panel. `show-seconds` includes seconds; `need-confirm` lets users finish the two-step pick before committing.\n\n```vue preview src=\"./demos/Datetime.en.vue\"\n```"
+            },
+            {
+              "id": "custom-trigger",
+              "title": "Custom Trigger",
+              "body": "The `#trigger` slot takes full control of the trigger element with scope `{ value, open }` — handy for buttons, icons, or composite layouts.\n\n```vue preview src=\"./demos/CustomTrigger.en.vue\"\n```"
+            },
+            {
+              "id": "disabled-ranges",
+              "title": "Disabled Ranges",
+              "body": "Dates outside `min-date` / `max-date` are disabled in the calendar. Use them alone or together.\n\n```vue preview src=\"./demos/DisabledDates.en.vue\"\n```"
+            },
+            {
+              "id": "inline-panel",
+              "title": "Inline Panel",
+              "body": "`:teleport=\"false\"` with `append-to=\"self\"` renders the panel inline, outside the overlay stacking context — useful inside cards, drawers, or complex forms.\n\n```vue preview src=\"./demos/InlinePanel.en.vue\"\n```"
+            },
+            {
+              "id": "panel-mode-cycling",
+              "title": "Panel Mode Cycling",
+              "body": "Click the panel header label to cycle through days → months → years sub-panels, handy for jumping to a target year/month before returning to the day grid."
+            },
+            {
+              "id": "status",
+              "title": "Status",
+              "body": "`status` accepts `'warning'` or `'error'` for visual emphasis (`invalid` / `errorMessage` imply `error`). Use `warning` with `helpText` for friendly reminders that don't block submission.\n\n```vue preview src=\"./demos/Status.en.vue\"\n```"
+            },
+            {
+              "id": "footer-custom-cell",
+              "title": "Footer & Custom Cell",
+              "body": "The `#footer` slot renders an action area at the bottom of the panel (scope `{ close }`); `#cell` customizes the day cell (scope includes `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`) — great for holiday dots, schedule markers, or custom layouts.\n\n```vue preview src=\"./demos/FooterAndCell.en.vue\"\n```"
+            },
+            {
+              "id": "needconfirm",
+              "title": "needConfirm",
+              "body": "With `need-confirm`, picking a value only writes to a draft; **OK** commits and closes, **Cancel** rolls back. Recommended for `datetime` / `datetimerange` / `time` where selection takes multiple steps.\n\n```vue preview src=\"./demos/NeedConfirm.en.vue\"\n```"
+            },
+            {
+              "id": "multiple-dates",
+              "title": "Multiple Dates",
+              "body": "`multiple` (only valid for `type='date'`) makes `modelValue` a `string[]`; each click toggles selection and the panel stays open.\n\n```vue preview src=\"./demos/Multiple.en.vue\"\n```"
+            },
+            {
+              "id": "multiple-in-practice-shift-planning",
+              "title": "Multiple in Practice: Shift Planning",
+              "body": "Combine `multiple` with `MTag` to display picked days in a friendly, readable way.\n\n```vue preview src=\"./demos/WorkSchedule.en.vue\"\n```"
+            },
+            {
+              "id": "form-integration",
+              "title": "Form Integration",
+              "body": "Combine `required`, `error-message` and `min-date` for a complete date-range validation form.\n\n```vue preview src=\"./demos/FormIntegration.en.vue\"\n```"
+            },
+            {
+              "id": "input-mask",
+              "title": "Input Mask",
+              "body": "`mask` makes the input editable, auto-inserting `-` / `/` / `:` separators matching the display `format`. Press **Enter** to commit, **Esc** or blur to revert. Supported on `date` / `datetime` / `time` only.\n\n```vue preview src=\"./demos/Mask.en.vue\"\n```"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts.                                                                             |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel Teleport; mounts to `body` by default.                                                 |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | Mount target; `'self'` / `false` renders in place.                                           |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion).           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |"
+              "body": "| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts; the one matching the current value is highlighted.                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | Visual status; `invalid` / `errorMessage` imply `error`.                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | Defer commit until OK; Cancel rolls back.                                                    |\n| `multiple`     | `boolean`                                                                               | `false`        | Pick many dates (`type='date'` only); `modelValue` is `string[]`.                            |\n| `mask`         | `boolean`                                                                               | `false`        | Editable input with auto separators; Enter commits, Esc/blur reverts.                        |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel Teleport; mounts to `body` by default.                                                 |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | Mount target; `'self'` / `false` renders in place.                                           |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion).           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |"
             },
             {
               "id": "events",
@@ -6607,7 +7013,7 @@
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| Slot      | Description                       |\n| --------- | --------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`. |"
+              "body": "| Slot      | Description                                                                                                                  |\n| --------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`.                                                                                            |\n| `footer`  | Panel bottom action area, scope `{ close }`. When `need-confirm` is on and no footer is given, default OK/Cancel is shown.   |\n| `cell`    | Custom day cell, scope `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`.                       |"
             },
             {
               "id": "types",
@@ -6620,7 +7026,7 @@
               "body": "Date, range, and time modes are selected via `type` (`daterange`, `datetime`, `time`, etc.)."
             }
           ],
-          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: Calendar overlay for a date, time, month, or year. String shape follows `type`. Supports min/max, shortcuts, format, showSeconds, and clearable.\n---\n\n# DatePicker\n\nDate picker with month navigation and a day grid; also supports time columns and month/year panels.\n\n## When to use\n\n- Use for date, date range, date-time, month, or year selection.\n- For time-only, prefer the dedicated [TimePicker](/components/TimePicker) entry (`type=\"time\"` still works).\n\n## Import\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\nDates outside the range are disabled in the calendar.\n\n```vue preview src=\"./demos/MinMax.en.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.en.vue\"\n```\n\n## Teleport\n\nThe panel Teleports to `body` by default. Use `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.en.vue\"\n```\n\n## Range\n\nWith `type=\"daterange\"`, click the start date then the end date. The value is `[start, end]` (ISO dates).\n\n```vue preview src=\"./demos/Range.en.vue\"\n```\n\n## Type variants\n\n`type` also supports `month` / `year` / `time` / `datetime` / `datetimerange`. Use `showSeconds` to include seconds.\n\nFor time-only, prefer the dedicated [TimePicker](/components/TimePicker); `type=\"time\"` on this component still works.\n\n`datetimerange`: after two date clicks, emits both ends with `00:00` (or `00:00:00`); while the panel stays open, time columns adjust the end time and selecting the finest unit closes.\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.en.vue\"\n```\n\n## Props\n\n| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts.                                                                             |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel Teleport; mounts to `body` by default.                                                 |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | Mount target; `'self'` / `false` renders in place.                                           |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion).           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |\n\n## Events\n\n| Event               | Prop                                 | Description                             |\n| ------------------- | ------------------------------------ | --------------------------------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | Value change.                           |\n| `clear`             | —                                    | Fired when the clear button is clicked. |\n| `change`            | —                                    | —                                       |\n| `hide`              | —                                    | —                                       |\n| `show`              | —                                    | —                                       |\n\n## Slots\n\n| Slot      | Description                       |\n| --------- | --------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`. |\n\n## Types\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## Boundaries\n\nDate, range, and time modes are selected via `type` (`daterange`, `datetime`, `time`, etc.).\n"
+          "markdown": "---\ntitle: DatePicker\ncategory: 02 / FORM\ndescription: Calendar overlay for a date, time, month, or year. String shape follows `type`. Supports min/max, shortcuts, format, showSeconds, and clearable.\n---\n\n# DatePicker\n\nDate picker with month navigation and a day grid; also supports time columns and month/year panels.\n\n## When to use\n\n- Use for date, date range, date-time, month, or year selection.\n- For time-only, prefer the dedicated [TimePicker](/components/TimePicker) entry (`type=\"time\"` still works).\n\n## Import\n\n```ts\nimport { MDatePicker } from \"morya-ui\";\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Size\n\n```vue preview src=\"./demos/Size.vue\"\n```\n\n## Min / Max\n\nDates outside the range are disabled in the calendar.\n\n```vue preview src=\"./demos/MinMax.en.vue\"\n```\n\n## Invalid\n\n```vue preview src=\"./demos/Invalid.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Fluid\n\n```vue preview src=\"./demos/Fluid.en.vue\"\n```\n\n## Teleport\n\nThe panel Teleports to `body` by default. Use `append-to=\"self\"` or `teleport={false}` to render in place.\n\n```vue preview src=\"./demos/Teleport.en.vue\"\n```\n\n## Range\n\nWith `type=\"daterange\"`, click the start date then the end date. The value is `[start, end]` (ISO dates).\n\n```vue preview src=\"./demos/Range.en.vue\"\n```\n\n## Type variants\n\n`type` also supports `month` / `year` / `time` / `datetime` / `datetimerange`. Use `showSeconds` to include seconds.\n\nFor time-only, prefer the dedicated [TimePicker](/components/TimePicker); `type=\"time\"` on this component still works.\n\n`datetimerange`: after two date clicks, emits both ends with `00:00` (or `00:00:00`); while the panel stays open, time columns adjust the end time and selecting the finest unit closes.\n\n```vue preview src=\"./demos/Types.vue\"\n```\n\n## Shortcuts\n\n```vue preview src=\"./demos/Shortcuts.en.vue\"\n```\n\n## Range Shortcuts\n\n`shortcuts` shine for `daterange` / `datetimerange`: return a `[start, end]` tuple to select a range in one click. The shortcut matching the current value is highlighted automatically.\n\n```vue preview src=\"./demos/RangeShortcuts.en.vue\"\n```\n\n## Custom Format\n\n`format` only affects display; the emitted value still follows the `type` convention (`YYYY-MM-DD`, etc.). Mix `YYYY` / `MM` / `DD` / `HH` / `mm` / `ss` with free text.\n\n```vue preview src=\"./demos/Format.en.vue\"\n```\n\n## Datetime\n\n`datetime` and `datetimerange` combine the calendar and time columns in one panel. `show-seconds` includes seconds; `need-confirm` lets users finish the two-step pick before committing.\n\n```vue preview src=\"./demos/Datetime.en.vue\"\n```\n\n## Custom Trigger\n\nThe `#trigger` slot takes full control of the trigger element with scope `{ value, open }` — handy for buttons, icons, or composite layouts.\n\n```vue preview src=\"./demos/CustomTrigger.en.vue\"\n```\n\n## Disabled Ranges\n\nDates outside `min-date` / `max-date` are disabled in the calendar. Use them alone or together.\n\n```vue preview src=\"./demos/DisabledDates.en.vue\"\n```\n\n## Inline Panel\n\n`:teleport=\"false\"` with `append-to=\"self\"` renders the panel inline, outside the overlay stacking context — useful inside cards, drawers, or complex forms.\n\n```vue preview src=\"./demos/InlinePanel.en.vue\"\n```\n\n## Panel Mode Cycling\n\nClick the panel header label to cycle through days → months → years sub-panels, handy for jumping to a target year/month before returning to the day grid.\n\n## Status\n\n`status` accepts `'warning'` or `'error'` for visual emphasis (`invalid` / `errorMessage` imply `error`). Use `warning` with `helpText` for friendly reminders that don't block submission.\n\n```vue preview src=\"./demos/Status.en.vue\"\n```\n\n## Footer & Custom Cell\n\nThe `#footer` slot renders an action area at the bottom of the panel (scope `{ close }`); `#cell` customizes the day cell (scope includes `date / inMonth / selected / inRange / rangeStart / rangeEnd / isToday / disabled`) — great for holiday dots, schedule markers, or custom layouts.\n\n```vue preview src=\"./demos/FooterAndCell.en.vue\"\n```\n\n## needConfirm\n\nWith `need-confirm`, picking a value only writes to a draft; **OK** commits and closes, **Cancel** rolls back. Recommended for `datetime` / `datetimerange` / `time` where selection takes multiple steps.\n\n```vue preview src=\"./demos/NeedConfirm.en.vue\"\n```\n\n## Multiple Dates\n\n`multiple` (only valid for `type='date'`) makes `modelValue` a `string[]`; each click toggles selection and the panel stays open.\n\n```vue preview src=\"./demos/Multiple.en.vue\"\n```\n\n## Multiple in Practice: Shift Planning\n\nCombine `multiple` with `MTag` to display picked days in a friendly, readable way.\n\n```vue preview src=\"./demos/WorkSchedule.en.vue\"\n```\n\n## Form Integration\n\nCombine `required`, `error-message` and `min-date` for a complete date-range validation form.\n\n```vue preview src=\"./demos/FormIntegration.en.vue\"\n```\n\n## Input Mask\n\n`mask` makes the input editable, auto-inserting `-` / `/` / `:` separators matching the display `format`. Press **Enter** to commit, **Esc** or blur to revert. Supported on `date` / `datetime` / `time` only.\n\n```vue preview src=\"./demos/Mask.en.vue\"\n```\n\n## Props\n\n| Prop           | Type                                                                                    | Default        | Description                                                                                  |\n| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `modelValue`   | `string \\| Date \\| [string, string] \\| null`                                            | `null`         | By `type`: `YYYY-MM-DD`, `[start,end]`, `YYYY-MM-DD HH:mm`, `HH:mm`, `YYYY-MM`, `YYYY`, etc. |\n| `type`         | `'date' \\| 'daterange' \\| 'datetime' \\| 'datetimerange' \\| 'time' \\| 'month' \\| 'year'` | `'date'`       | Panel and value shape.                                                                       |\n| `showSeconds`  | `boolean`                                                                               | `false`        | Include seconds for `time` / `datetime` / `datetimerange`.                                   |\n| `label`        | `string`                                                                                | —              | Label.                                                                                       |\n| `minDate`      | `string \\| Date \\| null`                                                                | —              | Optional lower bound.                                                                        |\n| `maxDate`      | `string \\| Date \\| null`                                                                | —              | Optional upper bound.                                                                        |\n| `placeholder`  | `string`                                                                                | locale         | Placeholder.                                                                                 |\n| `format`       | `string`                                                                                | `'YYYY-MM-DD'` | Input display pattern (`YYYY`/`MM`/`DD`/`HH`/`mm`/`ss`); emitted value follows `type`.       |\n| `clearable`    | `boolean`                                                                               | `true`         | Show a clear button.                                                                         |\n| `shortcuts`    | `DatePickerShortcut[]`                                                                  | `[]`           | Panel shortcuts; the one matching the current value is highlighted.                          |\n| `status`       | `'default' \\| 'warning' \\| 'error'`                                                     | `'default'`    | Visual status; `invalid` / `errorMessage` imply `error`.                                     |\n| `needConfirm`  | `boolean`                                                                               | `false`        | Defer commit until OK; Cancel rolls back.                                                    |\n| `multiple`     | `boolean`                                                                               | `false`        | Pick many dates (`type='date'` only); `modelValue` is `string[]`.                            |\n| `mask`         | `boolean`                                                                               | `false`        | Editable input with auto separators; Enter commits, Esc/blur reverts.                        |\n| `fluid`        | `boolean`                                                                               | `false`        | Stretch to full width.                                                                       |\n| `size`         | [MSizeInput](/docs/types#MSizeInput)                                                    | —              | `small` / `large`; can inherit from ConfigProvider.                                          |\n| `disabled`     | `boolean`                                                                               | `false`        | Disabled.                                                                                    |\n| `invalid`      | `boolean`                                                                               | `false`        | Invalid state.                                                                               |\n| `teleport`     | `boolean`                                                                               | `true`         | Panel Teleport; mounts to `body` by default.                                                 |\n| `appendTo`     | `string \\| HTMLElement \\| 'self' \\| false`                                              | `'body'`       | Mount target; `'self'` / `false` renders in place.                                           |\n| `transition`   | `string \\| false`                                                                       | `'scale-fade'` | Enter/exit motion preset; `false` / `'none'` disables. See [Motion](/docs/motion).           |\n| `errorMessage` | `string`                                                                                | —              | —                                                                                            |\n| `helpText`     | `string`                                                                                | —              | —                                                                                            |\n| `id`           | `string`                                                                                | —              | —                                                                                            |\n| `pt`           | [FieldPassThrough](/docs/types#FieldPassThrough) `{ root?, label?, control?, input? }`  | —              | Pass-through; see [Styling & attrs](/docs/attrs).                                            |\n\n## Events\n\n| Event               | Prop                                 | Description                             |\n| ------------------- | ------------------------------------ | --------------------------------------- |\n| `update:modelValue` | `string \\| [string, string] \\| null` | Value change.                           |\n| `clear`             | —                                    | Fired when the clear button is clicked. |\n| `change`            | —                                    | —                                       |\n| `hide`              | —                                    | —                                       |\n| `show`              | —                                    | —                                       |\n\n## Slots\n\n| Slot      | Description                                                                                                                  |\n| --------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| `trigger` | Custom trigger `{ value, open }`.                                                                                            |\n| `footer`  | Panel bottom action area, scope `{ close }`. When `need-confirm` is on and no footer is given, default OK/Cancel is shown.   |\n| `cell`    | Custom day cell, scope `{ date, inMonth, selected, inRange, rangeStart, rangeEnd, isToday, disabled }`.                       |\n\n## Types\n\n<h4 id=\"DatePickerShortcut\">DatePickerShortcut</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ninterface DatePickerShortcut {\n  label: string;\n  value:\n    | DatePickerDateValue\n    | [DatePickerDateValue, DatePickerDateValue]\n    | (() => DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue]);\n}\n```\n\n## Boundaries\n\nDate, range, and time modes are selected via `type` (`daterange`, `datetime`, `time`, etc.).\n"
         }
       }
     },
@@ -17783,7 +18189,7 @@
       "exportName": "MOrderList",
       "category": "03 / DATA",
       "description": "列表拖拽与上下按钮排序。",
-      "descriptionEn": "Reorder a list with drag-and-drop and up/down buttons.",
+      "descriptionEn": "Reorder a list with drag handles and up/down buttons.",
       "import": "import { MOrderList } from 'morya-ui'",
       "props": [
         {
@@ -17792,6 +18198,12 @@
           "default": "[]",
           "description": "列表数据。"
         },
+        {
+          "name": "selection",
+          "type": "number | null",
+          "default": "—",
+          "description": "受控选中下标，配合 `v-model:selection`。"
+        },
         {
           "name": "dataKey",
           "type": "string",
@@ -17810,15 +18222,21 @@
           "default": "true",
           "description": "是否启用拖拽。"
         },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "禁用全部交互（按钮、拖拽、选中）。"
+        },
         {
           "name": "emptyMessage",
           "type": "string",
           "default": "—",
-          "description": "—"
+          "description": "空态文案，默认取 locale `emptyMessage`。"
         },
         {
           "name": "pt",
-          "type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
+          "type": "[OrderListPassThrough](/docs/types#OrderListPassThrough)",
           "default": "—",
           "description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
         }
@@ -17827,22 +18245,27 @@
         {
           "name": "update:modelValue",
           "payload": "unknown[]",
-          "description": "顺序变化。"
+          "description": "顺序变化后的新数组。"
+        },
+        {
+          "name": "update:selection",
+          "payload": "number | null",
+          "description": "选中下标变化。"
         },
         {
           "name": "reorder",
-          "payload": "unknown[]",
-          "description": "拖拽或按钮重排后。"
+          "payload": "{ item, from, to }",
+          "description": "单次移动的详情（移动项、原下标、新下标）。"
         }
       ],
       "slots": [
         {
           "name": "item",
-          "description": "`{ item, index }` 自定义项。"
+          "description": "`{ item, index, selected, dragging }` 自定义项。"
         },
         {
           "name": "empty",
-          "description": "自定义 `empty` 内容。"
+          "description": "自定义空态内容。"
         }
       ],
       "methods": [],
@@ -17865,6 +18288,24 @@
           "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['设计', '开发', '测试', '发布'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "禁用-1",
+          "section": "禁用",
+          "sectionId": "禁用",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['设计', '开发', '测试', '发布'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" disabled />\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "自定义项-1",
+          "section": "自定义项",
+          "sectionId": "自定义项",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\ninterface Task {\n  id: number\n  title: string\n  tag: string\n}\n\nconst tasks = ref<Task[]>([\n  { id: 1, title: '需求评审', tag: '产品' },\n  { id: 2, title: '接口设计', tag: '后端' },\n  { id: 3, title: '页面开发', tag: '前端' },\n  { id: 4, title: '联调测试', tag: 'QA' },\n])\n</script>\n\n<template>\n  <MOrderList v-model=\"tasks\" data-key=\"id\">\n    <template #item=\"{ item, selected }\">\n      <span style=\"display:flex;justify-content:space-between;width:100%;gap:0.5rem\">\n        <span>{{ (item as Task).title }}</span>\n        <span\n          :style=\"{\n            fontSize: '0.75rem',\n            padding: '0 0.4rem',\n            borderRadius: '999px',\n            background: selected ? 'var(--m-color-primary)' : 'var(--m-color-border)',\n            color: selected ? 'var(--m-color-on-emphasis)' : 'var(--m-color-text-muted)',\n          }\"\n        >{{ (item as Task).tag }}</span>\n      </span>\n    </template>\n  </MOrderList>\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "import-1",
           "section": "Import",
@@ -17882,6 +18323,24 @@
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['Design', 'Development', 'Testing', 'Release'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" />\n</template>",
           "locale": "en-US"
+        },
+        {
+          "id": "disabled-1",
+          "section": "Disabled",
+          "sectionId": "disabled",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst items = ref(['Design', 'Develop', 'Test', 'Release'])\n</script>\n\n<template>\n  <MOrderList v-model=\"items\" disabled />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "custom-item-1",
+          "section": "Custom item",
+          "sectionId": "custom-item",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MOrderList } from 'morya-ui'\nimport { ref } from 'vue'\n\ninterface Task {\n  id: number\n  title: string\n  tag: string\n}\n\nconst tasks = ref<Task[]>([\n  { id: 1, title: 'Requirement review', tag: 'Product' },\n  { id: 2, title: 'API design', tag: 'Backend' },\n  { id: 3, title: 'Page development', tag: 'Frontend' },\n  { id: 4, title: 'Integration test', tag: 'QA' },\n])\n</script>\n\n<template>\n  <MOrderList v-model=\"tasks\" data-key=\"id\">\n    <template #item=\"{ item, selected }\">\n      <span style=\"display:flex;justify-content:space-between;width:100%;gap:0.5rem\">\n        <span>{{ (item as Task).title }}</span>\n        <span\n          :style=\"{\n            fontSize: '0.75rem',\n            padding: '0 0.4rem',\n            borderRadius: '999px',\n            background: selected ? 'var(--m-color-primary)' : 'var(--m-color-border)',\n            color: selected ? 'var(--m-color-on-emphasis)' : 'var(--m-color-text-muted)',\n          }\"\n        >{{ (item as Task).tag }}</span>\n      </span>\n    </template>\n  </MOrderList>\n</template>",
+          "locale": "en-US"
         }
       ],
       "locales": {
@@ -17892,7 +18351,7 @@
             {
               "id": "overview",
               "title": "",
-              "body": "# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下按钮作为键盘友好备选。"
+              "body": "# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下/置顶/置底按钮作为键盘友好备选。"
             },
             {
               "id": "引入",
@@ -17904,32 +18363,52 @@
               "title": "基础用法",
               "body": "```vue preview src=\"./demos/Basic.zh.vue\"\n```"
             },
+            {
+              "id": "禁用",
+              "title": "禁用",
+              "body": "```vue preview src=\"./demos/Disabled.zh.vue\"\n```"
+            },
+            {
+              "id": "自定义项",
+              "title": "自定义项",
+              "body": "通过 `#item` 插槽自定义渲染，作用域含 `{ item, index, selected, dragging }`。\n\n```vue preview src=\"./demos/CustomItem.zh.vue\"\n```"
+            },
+            {
+              "id": "键盘操作",
+              "title": "键盘操作",
+              "body": "| 按键 | 说明 |\n| --- | --- |\n| `↑` / `↓` | 移动选中项高亮。 |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | 将选中项上移 / 下移一位。 |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | 将选中项置顶 / 置底。 |\n| `Home` / `End` | 高亮首项 / 末项。 |"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `emptyMessage` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `selection` | `number \\| null` | — | 受控选中下标，配合 `v-model:selection`。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `disabled` | `boolean` | `false` | 禁用全部交互（按钮、拖拽、选中）。 |\n| `emptyMessage` | `string` | — | 空态文案，默认取 locale `emptyMessage`。 |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index }` 自定义项。 |\n| `empty` | 自定义 `empty` 内容。 |"
+              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` 自定义项。 |\n| `empty` | 自定义空态内容。 |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化。 |\n| `reorder` | `unknown[]` | 拖拽或按钮重排后。 |"
+              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化后的新数组。 |\n| `update:selection` | `number \\| null` | 选中下标变化。 |\n| `reorder` | `{ item, from, to }` | 单次移动的详情（移动项、原下标、新下标）。 |"
+            },
+            {
+              "id": "无障碍",
+              "title": "无障碍",
+              "body": "- 列表为 `role=\"listbox\"`，项为 `role=\"option\"`，选中项同步 `aria-selected`。\n- 拖拽仅在手柄 `pointerdown` 后启动，避免误触；键盘可完整完成所有排序操作。\n- `disabled` 时列表标记 `aria-disabled`，项不可聚焦、不可拖拽。"
             }
           ],
-          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: 列表拖拽与上下按钮排序。\n---\n\n# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下按钮作为键盘友好备选。\n\n## 引入\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `emptyMessage` | `string` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index }` 自定义项。 |\n| `empty` | 自定义 `empty` 内容。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化。 |\n| `reorder` | `unknown[]` | 拖拽或按钮重排后。 |\n"
+          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: 列表拖拽与上下按钮排序。\n---\n\n# OrderList\n\n支持拖拽手柄重排（原生 HTML5 DnD，无外部拖拽库），并保留上下/置顶/置底按钮作为键盘友好备选。\n\n## 引入\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 禁用\n\n```vue preview src=\"./demos/Disabled.zh.vue\"\n```\n\n## 自定义项\n\n通过 `#item` 插槽自定义渲染，作用域含 `{ item, index, selected, dragging }`。\n\n```vue preview src=\"./demos/CustomItem.zh.vue\"\n```\n\n## 键盘操作\n\n| 按键 | 说明 |\n| --- | --- |\n| `↑` / `↓` | 移动选中项高亮。 |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | 将选中项上移 / 下移一位。 |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | 将选中项置顶 / 置底。 |\n| `Home` / `End` | 高亮首项 / 末项。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | 列表数据。 |\n| `selection` | `number \\| null` | — | 受控选中下标，配合 `v-model:selection`。 |\n| `dataKey` | `string` | — | 对象项的唯一键。 |\n| `listStyle` | `string \\| object` | — | 列表样式。 |\n| `dragdrop` | `boolean` | `true` | 是否启用拖拽。 |\n| `disabled` | `boolean` | `false` | 禁用全部交互（按钮、拖拽、选中）。 |\n| `emptyMessage` | `string` | — | 空态文案，默认取 locale `emptyMessage`。 |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` 自定义项。 |\n| `empty` | 自定义空态内容。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | 顺序变化后的新数组。 |\n| `update:selection` | `number \\| null` | 选中下标变化。 |\n| `reorder` | `{ item, from, to }` | 单次移动的详情（移动项、原下标、新下标）。 |\n\n## 无障碍\n\n- 列表为 `role=\"listbox\"`，项为 `role=\"option\"`，选中项同步 `aria-selected`。\n- 拖拽仅在手柄 `pointerdown` 后启动，避免误触；键盘可完整完成所有排序操作。\n- `disabled` 时列表标记 `aria-disabled`，项不可聚焦、不可拖拽。\n"
         },
         "en-US": {
           "title": "OrderList",
-          "description": "Reorder a list with drag-and-drop and up/down buttons.",
+          "description": "Reorder a list with drag handles and up/down buttons.",
           "sections": [
             {
               "id": "overview",
               "title": "",
-              "body": "# OrderList\n\nReorder with a drag handle (native HTML5 DnD, no external library). Up and down buttons remain as a keyboard-friendly fallback."
+              "body": "# OrderList\n\nReorder items with drag handles (native HTML5 DnD, no external library), with up/down and top/bottom buttons as a keyboard-friendly alternative."
             },
             {
               "id": "import",
@@ -17941,23 +18420,43 @@
               "title": "Basic",
               "body": "```vue preview src=\"./demos/Basic.en.vue\"\n```"
             },
+            {
+              "id": "disabled",
+              "title": "Disabled",
+              "body": "```vue preview src=\"./demos/Disabled.en.vue\"\n```"
+            },
+            {
+              "id": "custom-item",
+              "title": "Custom item",
+              "body": "Customize rendering via the `#item` slot with scope `{ item, index, selected, dragging }`.\n\n```vue preview src=\"./demos/CustomItem.en.vue\"\n```"
+            },
+            {
+              "id": "keyboard",
+              "title": "Keyboard",
+              "body": "| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move the selection highlight. |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | Move the selected item up / down one step. |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | Move the selected item to top / bottom. |\n| `Home` / `End` | Highlight the first / last item. |"
+            },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List styles. |\n| `dragdrop` | `boolean` | `true` | Whether to enable drag-and-drop. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `selection` | `number \\| null` | — | Controlled selected index, with `v-model:selection`. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List style. |\n| `dragdrop` | `boolean` | `true` | Enable drag-and-drop reorder. |\n| `disabled` | `boolean` | `false` | Disable all interactions (buttons, drag, selection). |\n| `emptyMessage` | `string` | — | Empty state message; defaults to locale `emptyMessage`. |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index }` custom item. |"
+              "body": "| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` custom item. |\n| `empty` | Custom empty content. |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | Emitted when the order changes. |\n| `reorder` | `unknown[]` | Emitted after a drag or button reorder. |"
+              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | New order after reorder. |\n| `update:selection` | `number \\| null` | Selected index change. |\n| `reorder` | `{ item, from, to }` | Detail of a single move (item, original index, new index). |"
+            },
+            {
+              "id": "accessibility",
+              "title": "Accessibility",
+              "body": "- The list is `role=\"listbox\"` and items are `role=\"option\"` with `aria-selected`.\n- Dragging only starts after the handle is pressed, avoiding accidental drags; every reorder is fully keyboard-operable.\n- When `disabled`, the list is marked `aria-disabled`; items are not focusable or draggable."
             }
           ],
-          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: Reorder a list with drag-and-drop and up/down buttons.\n---\n\n# OrderList\n\nReorder with a drag handle (native HTML5 DnD, no external library). Up and down buttons remain as a keyboard-friendly fallback.\n\n## Import\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List styles. |\n| `dragdrop` | `boolean` | `true` | Whether to enable drag-and-drop. |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index }` custom item. |\n\n## Events\n\n| Event | Prop | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | Emitted when the order changes. |\n| `reorder` | `unknown[]` | Emitted after a drag or button reorder. |\n"
+          "markdown": "---\ntitle: OrderList\ncategory: 03 / DATA\ndescription: Reorder a list with drag handles and up/down buttons.\n---\n\n# OrderList\n\nReorder items with drag handles (native HTML5 DnD, no external library), with up/down and top/bottom buttons as a keyboard-friendly alternative.\n\n## Import\n\n```ts\nimport { MOrderList } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Disabled\n\n```vue preview src=\"./demos/Disabled.en.vue\"\n```\n\n## Custom item\n\nCustomize rendering via the `#item` slot with scope `{ item, index, selected, dragging }`.\n\n```vue preview src=\"./demos/CustomItem.en.vue\"\n```\n\n## Keyboard\n\n| Key | Action |\n| --- | --- |\n| `↑` / `↓` | Move the selection highlight. |\n| `Ctrl/⌘ + ↑` / `Ctrl/⌘ + ↓` | Move the selected item up / down one step. |\n| `Ctrl/⌘ + Home` / `Ctrl/⌘ + End` | Move the selected item to top / bottom. |\n| `Home` / `End` | Highlight the first / last item. |\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` | `unknown[]` | `[]` | List data. |\n| `selection` | `number \\| null` | — | Controlled selected index, with `v-model:selection`. |\n| `dataKey` | `string` | — | Unique key for object items. |\n| `listStyle` | `string \\| object` | — | List style. |\n| `dragdrop` | `boolean` | `true` | Enable drag-and-drop reorder. |\n| `disabled` | `boolean` | `false` | Disable all interactions (buttons, drag, selection). |\n| `emptyMessage` | `string` | — | Empty state message; defaults to locale `emptyMessage`. |\n| `pt` | [OrderListPassThrough](/docs/types#OrderListPassThrough) | — | DOM pass-through; see [Styling & attrs](/docs/attrs). |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `item` | `{ item, index, selected, dragging }` custom item. |\n| `empty` | Custom empty content. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `unknown[]` | New order after reorder. |\n| `update:selection` | `number \\| null` | Selected index change. |\n| `reorder` | `{ item, from, to }` | Detail of a single move (item, original index, new index). |\n\n## Accessibility\n\n- The list is `role=\"listbox\"` and items are `role=\"option\"` with `aria-selected`.\n- Dragging only starts after the handle is pressed, avoiding accidental drags; every reorder is fully keyboard-operable.\n- When `disabled`, the list is marked `aria-disabled`; items are not focusable or draggable.\n"
         }
       }
     },
@@ -25743,8 +26242,8 @@
       "name": "Table",
       "exportName": "MTable",
       "category": "03 / DATA",
-      "description": "数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。",
-      "descriptionEn": "Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.",
+      "description": "数据表格。支持排序、筛选、选择、分页、固定列、列拖拽、列设置、骨架屏与虚拟滚动。列宽支持 width / minWidth / fit。",
+      "descriptionEn": "Data table with sorting, filtering, selection, pagination, fixed columns, column drag, column settings, skeleton loading and virtual scrolling. Column widths support width / minWidth / fit.",
       "import": "import { MTable } from 'morya-ui'",
       "props": [
         {
@@ -25855,6 +26354,18 @@
           "default": "40",
           "description": "虚拟行高估算。"
         },
+        {
+          "name": "virtualDynamicRowHeight",
+          "type": "boolean",
+          "default": "false",
+          "description": "动态行高虚拟滚动（实测行高缓存，配合 `ResizeObserver`）。"
+        },
+        {
+          "name": "virtualOverscan",
+          "type": "number",
+          "default": "4",
+          "description": "虚拟滚动上下额外渲染的行数，减少白屏闪烁。"
+        },
         {
           "name": "hiddenColumns",
           "type": "string[] | null",
@@ -25867,6 +26378,30 @@
           "default": "null",
           "description": "叶列顺序（`v-model:column-order`）。"
         },
+        {
+          "name": "columnSetting",
+          "type": "boolean",
+          "default": "false",
+          "description": "显示列设置按钮（显示/隐藏列）。"
+        },
+        {
+          "name": "columnDrag",
+          "type": "boolean",
+          "default": "false",
+          "description": "表头拖拽排序。"
+        },
+        {
+          "name": "skeleton",
+          "type": "boolean",
+          "default": "false",
+          "description": "骨架屏加载态。"
+        },
+        {
+          "name": "skeletonRows",
+          "type": "number",
+          "default": "5",
+          "description": "骨架屏行数。"
+        },
         {
           "name": "showFooter",
           "type": "boolean",
@@ -25939,23 +26474,41 @@
           "default": "true",
           "description": "行 hover 高亮。"
         },
+        {
+          "name": "sortConfig",
+          "type": "TableSortConfig | null",
+          "default": "null",
+          "description": "统一排序配置 `{ field, order, multiple, must, mode }`。"
+        },
         {
           "name": "sortField",
-          "type": "—",
-          "default": "—",
-          "description": "受控排序字段与方向。"
+          "type": "string | null",
+          "default": "null",
+          "description": "（兼容）单字段排序。建议用 `sortConfig`。"
         },
         {
           "name": "sortOrder",
-          "type": "—",
-          "default": "—",
-          "description": "受控排序字段与方向。"
+          "type": "'asc' | 'desc' | null",
+          "default": "null",
+          "description": "（兼容）单字段排序方向。建议用 `sortConfig`。"
+        },
+        {
+          "name": "multiSort",
+          "type": "boolean",
+          "default": "false",
+          "description": "（兼容）多列排序。建议用 `sortConfig.multiple`。"
+        },
+        {
+          "name": "mustSort",
+          "type": "boolean",
+          "default": "false",
+          "description": "（兼容）禁止取消排序。建议用 `sortConfig.must`。"
         },
         {
           "name": "sortMode",
           "type": "'client' | 'emit'",
           "default": "'client'",
-          "description": "客户端排序或仅抛出排序事件。"
+          "description": "（兼容）排序模式。建议用 `sortConfig.mode`。"
         },
         {
           "name": "searchField",
@@ -25975,6 +26528,18 @@
           "default": "null",
           "description": "结构化筛选条件。"
         },
+        {
+          "name": "filterModel",
+          "type": "Record<string, unknown> | null",
+          "default": "null",
+          "description": "列筛选 v-model（与 `update:filter-model` 配合）。"
+        },
+        {
+          "name": "filters",
+          "type": "Record<string, unknown> | null",
+          "default": "null",
+          "description": "（兼容）旧筛选 v-model 名。"
+        },
         {
           "name": "loading",
           "type": "boolean",
@@ -26077,12 +26642,6 @@
           "default": "—",
           "description": "—"
         },
-        {
-          "name": "filters",
-          "type": "Record<string, unknown> | null",
-          "default": "—",
-          "description": "—"
-        },
         {
           "name": "fixedCheckbox",
           "type": "boolean",
@@ -26131,18 +26690,6 @@
           "default": "—",
           "description": "—"
         },
-        {
-          "name": "multiSort",
-          "type": "boolean",
-          "default": "—",
-          "description": "—"
-        },
-        {
-          "name": "mustSort",
-          "type": "boolean",
-          "default": "—",
-          "description": "—"
-        },
         {
           "name": "showIndex",
           "type": "boolean",
@@ -26175,17 +26722,27 @@
         },
         {
           "name": "pt",
-          "type": "[RootPassThrough](/docs/types#RootPassThrough) `{ root? }",
+          "type": "TablePassThrough",
           "default": "—",
-          "description": "DOM 透传，见 [样式与 attrs](/docs/attrs)."
+          "description": "多部分 DOM 透传：`{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`。"
         }
       ],
       "events": [
         {
-          "name": "sort",
+          "name": "sort-change",
           "payload": "{ sortField?, sortOrder? }",
           "description": "排序变化。"
         },
+        {
+          "name": "filter-change",
+          "payload": "Record<string, unknown> | null",
+          "description": "列筛选提交（与 `update:filter-model` 同步）。"
+        },
+        {
+          "name": "expand-change",
+          "payload": "{ row, expanded }",
+          "description": "行展开状态变化（详情展开或树节点展开）。"
+        },
         {
           "name": "row-click",
           "payload": "{ row, index }`, `Event",
@@ -26221,11 +26778,6 @@
           "payload": "row | null, oldRow | null",
           "description": "当前高亮行变化。"
         },
-        {
-          "name": "expand",
-          "payload": "{ row, expanded }",
-          "description": "行展开。"
-        },
         {
           "name": "update:selection",
           "payload": "TableItem[]",
@@ -26247,39 +26799,34 @@
           "description": "当前行键 v-model。"
         },
         {
-          "name": "filter",
-          "payload": "—",
-          "description": "—"
-        },
-        {
-          "name": "update:expandedRowKeys",
-          "payload": "—",
-          "description": "—"
+          "name": "update:expanded-row-keys",
+          "payload": "Array<string | number>",
+          "description": "树/详情展开键 v-model。"
         },
         {
-          "name": "update:filters",
-          "payload": "—",
-          "description": "—"
+          "name": "update:filter-model",
+          "payload": "Record<string, unknown> | null",
+          "description": "列筛选 v-model。"
         },
         {
-          "name": "update:columnWidths",
+          "name": "update:column-widths",
           "payload": "Record<string, number>",
           "description": "列宽 v-model。"
         },
         {
-          "name": "update:hiddenColumns",
+          "name": "update:hidden-columns",
           "payload": "string[]",
           "description": "隐藏列 v-model。"
         },
         {
-          "name": "update:columnOrder",
+          "name": "update:column-order",
           "payload": "string[]",
           "description": "列顺序 v-model。"
         },
         {
-          "name": "update:selectedItem",
-          "payload": "—",
-          "description": "—"
+          "name": "update:selected-item",
+          "payload": "TableItem | null",
+          "description": "单选 v-model。"
         }
       ],
       "slots": [
@@ -26305,7 +26852,7 @@
         },
         {
           "name": "loading",
-          "description": "自定义加载态。"
+          "description": "自定义加载态（`skeleton` 为 true 时不生效）。"
         },
         {
           "name": "pagination",
@@ -26501,7 +27048,7 @@
           "sectionId": "引入",
           "lang": "ts",
           "preview": false,
-          "code": "import type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
+          "code": "import type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
           "locale": "zh-CN"
         },
         {
@@ -26549,6 +27096,15 @@
           "code": "<script setup lang=\"ts\">\nimport type { TableItem } from 'morya-ui'\nimport { MTable } from 'morya-ui'\n\ntype Row = { id: number; name: string; role: string; extra: string }\n\nconst columns = [\n  { key: 'name', label: '姓名' },\n  { key: 'role', label: '角色' },\n]\nconst rows: Row[] = [{ id: 1, name: 'Ada', role: '设计师', extra: '设计系统细节' }]\n\nfunction extraOf(row: TableItem) {\n  return (row as Row).extra\n}\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" expandable bordered :paginator=\"false\">\n    <template #expansion=\"{ row }\">\n      {{ extraOf(row) }}\n    </template>\n  </MTable>\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "排序-sortconfig-1",
+          "section": "排序（sortConfig）",
+          "sectionId": "排序-sortconfig",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport type { TableSortConfig } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 160, sortable: true },\n  { key: 'owner', label: '负责人', minWidth: 100, sortable: true },\n  { key: 'progress', label: '进度', width: 110, align: 'end' as const, sortable: true },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', progress: 100 },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', progress: 62 },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', progress: 88 },\n  { id: 4, name: 'Billing Migration', owner: 'Ada', progress: 24 },\n]\n\nconst sortConfig = ref<TableSortConfig>({\n  field: 'progress',\n  order: 'desc',\n  mode: 'client',\n})\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" :sort-config=\"sortConfig\" bordered striped />\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "列宽拖拽与表头筛选-1",
           "section": "列宽拖拽与表头筛选",
@@ -26558,6 +27114,33 @@
           "code": "<script setup lang=\"ts\">\nimport type { TableColumnDefinition } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns: TableColumnDefinition[] = [\n  {\n    key: 'name',\n    label: '姓名',\n    width: 140,\n    resizable: true,\n    filterable: true,\n  },\n  {\n    key: 'status',\n    label: '状态',\n    width: 120,\n    resizable: true,\n    filterable: true,\n    filters: [\n      { label: '草稿', value: 'Draft' },\n      { label: '上线', value: 'Live' },\n    ],\n  },\n  { key: 'role', label: '角色', minWidth: 120 },\n]\n\nconst rows = [\n  { id: 1, name: 'Ada', status: 'Draft', role: 'Designer' },\n  { id: 2, name: 'Lin', status: 'Live', role: 'Engineer' },\n  { id: 3, name: 'Kai', status: 'Live', role: 'Engineer' },\n  { id: 4, name: 'Mia', status: 'Draft', role: 'Designer' },\n]\n\nconst columnWidths = ref<Record<string, number>>({})\n</script>\n\n<template>\n  <MTable\n    v-model:column-widths=\"columnWidths\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "列设置面板-1",
+          "section": "列设置面板",
+          "sectionId": "列设置面板",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 140 },\n  { key: 'status', label: '状态', width: 120 },\n  { key: 'owner', label: '负责人', minWidth: 100 },\n  { key: 'team', label: '团队', minWidth: 120 },\n  { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst hiddenColumns = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:hidden-columns=\"hiddenColumns\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-setting\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "列拖拽排序-1",
+          "section": "列拖拽排序",
+          "sectionId": "列拖拽排序",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 140 },\n  { key: 'status', label: '状态', width: 120 },\n  { key: 'owner', label: '负责人', minWidth: 100 },\n  { key: 'team', label: '团队', minWidth: 120 },\n  { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst columnOrder = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:column-order=\"columnOrder\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-drag\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "骨架屏加载-1",
+          "section": "骨架屏加载",
+          "sectionId": "骨架屏加载",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: '项目', minWidth: 160 },\n  { key: 'owner', label: '负责人', minWidth: 100 },\n  { key: 'team', label: '团队', minWidth: 120 },\n  { key: 'progress', label: '进度', width: 100, align: 'end' as const },\n]\n\nconst allRows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst rows = ref<typeof allRows>([])\nconst loading = ref(true)\n\nfunction reload() {\n  loading.value = true\n  rows.value = []\n  window.setTimeout(() => {\n    rows.value = allRows\n    loading.value = false\n  }, 1500)\n}\n\nreload()\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <div>\n      <MButton size=\"small\" @click=\"reload\">重新加载</MButton>\n    </div>\n    <MTable\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :loading=\"loading\"\n      :skeleton=\"loading\"\n      :skeleton-rows=\"4\"\n      bordered\n      striped\n    />\n  </div>\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "虚拟滚动-1",
           "section": "虚拟滚动",
@@ -26567,6 +27150,15 @@
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'name', label: '姓名', minWidth: 160 },\n]\n\nconst rows = Array.from({ length: 5000 }, (_, i) => ({\n  id: i + 1,\n  name: `行 ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    :virtual-row-height=\"40\"\n    :max-height=\"320\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "zh-CN"
         },
+        {
+          "id": "动态行高虚拟滚动-1",
+          "section": "动态行高虚拟滚动",
+          "sectionId": "动态行高虚拟滚动",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'title', label: '标题', minWidth: 200 },\n  { key: 'summary', label: '摘要', minWidth: 320 },\n]\n\n// 模拟内容长度不一的行：摘要字段长短不同 → 行高不同\nconst rows = Array.from({ length: 2000 }, (_, i) => ({\n  id: i + 1,\n  title: `任务 ${i + 1}`,\n  summary: i % 7 === 0\n    ? `这是一段比较长的摘要，用来演示动态行高。`.repeat((i % 5) + 2)\n    : `简短摘要 ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    virtual-dynamic-row-height\n    :virtual-row-height=\"44\"\n    :max-height=\"360\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
+          "locale": "zh-CN"
+        },
         {
           "id": "多级表头-表尾与合并-1",
           "section": "多级表头、表尾与合并",
@@ -26618,7 +27210,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableTextDirection = 'left' | 'center' | 'right'",
+          "code": "interface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}",
           "locale": "zh-CN"
         },
         {
@@ -26627,7 +27219,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }",
+          "code": "interface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}",
           "locale": "zh-CN"
         },
         {
@@ -26636,7 +27228,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)",
+          "code": "type TableTextDirection = 'left' | 'center' | 'right'",
           "locale": "zh-CN"
         },
         {
@@ -26645,7 +27237,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)",
+          "code": "type TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }",
           "locale": "zh-CN"
         },
         {
@@ -26654,7 +27246,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "type TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)",
+          "code": "type TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)",
           "locale": "zh-CN"
         },
         {
@@ -26663,7 +27255,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "interface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}",
+          "code": "type TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)",
           "locale": "zh-CN"
         },
         {
@@ -26672,7 +27264,7 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
-          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n}",
+          "code": "type TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)",
           "locale": "zh-CN"
         },
         {
@@ -26681,6 +27273,24 @@
           "sectionId": "类型",
           "lang": "ts",
           "preview": false,
+          "code": "interface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "类型-10",
+          "section": "类型",
+          "sectionId": "类型",
+          "lang": "ts",
+          "preview": false,
+          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}",
+          "locale": "zh-CN"
+        },
+        {
+          "id": "类型-11",
+          "section": "类型",
+          "sectionId": "类型",
+          "lang": "ts",
+          "preview": false,
           "code": "interface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}",
           "locale": "zh-CN"
         },
@@ -26690,7 +27300,7 @@
           "sectionId": "import",
           "lang": "ts",
           "preview": false,
-          "code": "import type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
+          "code": "import type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'",
           "locale": "en-US"
         },
         {
@@ -26703,72 +27313,117 @@
           "locale": "en-US"
         },
         {
-          "id": "selection-1",
-          "section": "Selection",
-          "sectionId": "selection",
+          "id": "row-selection-1",
+          "section": "Row Selection",
+          "sectionId": "row-selection",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Name', minWidth: 120 },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\nconst rows = [\n  { id: 1, name: 'Ada', role: 'Designer' },\n  { id: 2, name: 'Lin', role: 'Engineer' },\n]\nconst selection = ref<Record<string, unknown>[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:selection=\"selection\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    selection-mode=\"multiple\"\n    highlight-current\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "filter-and-pagination-1",
-          "section": "Filter and pagination",
-          "sectionId": "filter-and-pagination",
+          "id": "filtering-pagination-1",
+          "section": "Filtering & Pagination",
+          "sectionId": "filtering-pagination",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Name', sortable: true, minWidth: 120 },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\nconst rows = [\n  { id: 1, name: 'Ada', role: 'Designer' },\n  { id: 2, name: 'Lin', role: 'Engineer' },\n  { id: 3, name: 'Kai', role: 'Engineer' },\n  { id: 4, name: 'Mia', role: 'Designer' },\n]\nconst page = ref(1)\n</script>\n\n<template>\n  <MTable\n    v-model:page=\"page\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    paginator\n    :rows-per-page=\"2\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "expandable-rows-1",
-          "section": "Expandable rows",
-          "sectionId": "expandable-rows",
+          "id": "fixed-columns-1",
+          "section": "Fixed Columns",
+          "sectionId": "fixed-columns",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'name', label: 'Name', width: 120, fixed: 'left' as const },\n  { key: 'q1', label: 'Q1 Revenue', width: 140 },\n  { key: 'q2', label: 'Q2 Revenue', width: 140 },\n  { key: 'q3', label: 'Q3 Revenue', width: 140 },\n  { key: 'action', label: 'Action', width: 100, fixed: 'right' as const },\n]\nconst rows = [\n  { id: 1, name: 'Ada', q1: '124k', q2: '131k', q3: '140k', action: 'Edit' },\n  { id: 2, name: 'Lin', q1: '98k', q2: '102k', q3: '115k', action: 'Edit' },\n]\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" bordered :paginator=\"false\" />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "expandable-rows-cell-rendering-1",
+          "section": "Expandable Rows & Cell Rendering",
+          "sectionId": "expandable-rows-cell-rendering",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport type { TableItem } from 'morya-ui'\nimport { MTable } from 'morya-ui'\n\ntype Row = { id: number; name: string; role: string; extra: string }\n\nconst columns = [\n  { key: 'name', label: 'Name' },\n  { key: 'role', label: 'Role' },\n]\nconst rows: Row[] = [{ id: 1, name: 'Ada', role: 'Designer', extra: 'Design system' }]\n\nfunction extraOf(row: TableItem) {\n  return (row as Row).extra\n}\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" expandable bordered :paginator=\"false\">\n    <template #expansion=\"{ row }\">\n      {{ extraOf(row) }}\n    </template>\n  </MTable>\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "fixed-columns-1",
-          "section": "Fixed columns",
-          "sectionId": "fixed-columns",
+          "id": "sorting-sortconfig-1",
+          "section": "Sorting (sortConfig)",
+          "sectionId": "sorting-sortconfig",
           "lang": "vue",
           "preview": true,
-          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'name', label: 'Name', width: 120, fixed: 'left' as const },\n  { key: 'q1', label: 'Q1 Revenue', width: 140 },\n  { key: 'q2', label: 'Q2 Revenue', width: 140 },\n  { key: 'q3', label: 'Q3 Revenue', width: 140 },\n  { key: 'action', label: 'Action', width: 100, fixed: 'right' as const },\n]\nconst rows = [\n  { id: 1, name: 'Ada', q1: '124k', q2: '131k', q3: '140k', action: 'Edit' },\n  { id: 2, name: 'Lin', q1: '98k', q2: '102k', q3: '115k', action: 'Edit' },\n]\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" bordered :paginator=\"false\" />\n</template>",
+          "code": "<script setup lang=\"ts\">\nimport type { TableSortConfig } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 160, sortable: true },\n  { key: 'owner', label: 'Owner', minWidth: 100, sortable: true },\n  { key: 'progress', label: 'Progress', width: 110, align: 'end' as const, sortable: true },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', progress: 100 },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', progress: 62 },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', progress: 88 },\n  { id: 4, name: 'Billing Migration', owner: 'Ada', progress: 24 },\n]\n\nconst sortConfig = ref<TableSortConfig>({\n  field: 'progress',\n  order: 'desc',\n  mode: 'client',\n})\n</script>\n\n<template>\n  <MTable :columns=\"columns\" :rows=\"rows\" :sort-config=\"sortConfig\" bordered striped />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "column-resize-and-header-filters-1",
-          "section": "Column resize and header filters",
-          "sectionId": "column-resize-and-header-filters",
+          "id": "column-resizing-header-filters-1",
+          "section": "Column Resizing & Header Filters",
+          "sectionId": "column-resizing-header-filters",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport type { TableColumnDefinition } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns: TableColumnDefinition[] = [\n  {\n    key: 'name',\n    label: 'Name',\n    width: 140,\n    resizable: true,\n    filterable: true,\n  },\n  {\n    key: 'status',\n    label: 'Status',\n    width: 120,\n    resizable: true,\n    filterable: true,\n    filters: [\n      { label: 'Draft', value: 'Draft' },\n      { label: 'Live', value: 'Live' },\n    ],\n  },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\n\nconst rows = [\n  { id: 1, name: 'Ada', status: 'Draft', role: 'Designer' },\n  { id: 2, name: 'Lin', status: 'Live', role: 'Engineer' },\n  { id: 3, name: 'Kai', status: 'Live', role: 'Engineer' },\n  { id: 4, name: 'Mia', status: 'Draft', role: 'Designer' },\n]\n\nconst columnWidths = ref<Record<string, number>>({})\n</script>\n\n<template>\n  <MTable\n    v-model:column-widths=\"columnWidths\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "virtual-scroll-1",
-          "section": "Virtual scroll",
-          "sectionId": "virtual-scroll",
+          "id": "column-settings-panel-1",
+          "section": "Column Settings Panel",
+          "sectionId": "column-settings-panel",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 140 },\n  { key: 'status', label: 'Status', width: 120 },\n  { key: 'owner', label: 'Owner', minWidth: 100 },\n  { key: 'team', label: 'Team', minWidth: 120 },\n  { key: 'progress', label: 'Progress', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst hiddenColumns = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:hidden-columns=\"hiddenColumns\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-setting\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "column-drag-1",
+          "section": "Column Drag",
+          "sectionId": "column-drag",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable, MTag } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 140 },\n  { key: 'status', label: 'Status', width: 120 },\n  { key: 'owner', label: 'Owner', minWidth: 100 },\n  { key: 'team', label: 'Team', minWidth: 120 },\n  { key: 'progress', label: 'Progress', width: 100, align: 'end' as const },\n]\n\nconst rows = [\n  { id: 1, name: 'Landing Redesign', status: 'Published', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', status: 'Draft', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', status: 'Review', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst columnOrder = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:column-order=\"columnOrder\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    column-drag\n    bordered\n    striped\n  >\n    <template #cell-status=\"{ value }\">\n      <MTag\n        :value=\"String(value)\"\n        :type=\"value === 'Published' ? 'success' : value === 'Review' ? 'warning' : 'secondary'\"\n      />\n    </template>\n  </MTable>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "skeleton-loading-1",
+          "section": "Skeleton Loading",
+          "sectionId": "skeleton-loading",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MButton, MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns = [\n  { key: 'name', label: 'Project', minWidth: 160 },\n  { key: 'owner', label: 'Owner', minWidth: 100 },\n  { key: 'team', label: 'Team', minWidth: 120 },\n  { key: 'progress', label: 'Progress', width: 100, align: 'end' as const },\n]\n\nconst allRows = [\n  { id: 1, name: 'Landing Redesign', owner: 'Ada', team: 'Design', progress: '100%' },\n  { id: 2, name: 'Dashboard v2', owner: 'Lin', team: 'Frontend', progress: '62%' },\n  { id: 3, name: 'Auth Gateway', owner: 'Kai', team: 'Backend', progress: '88%' },\n]\n\nconst rows = ref<typeof allRows>([])\nconst loading = ref(true)\n\nfunction reload() {\n  loading.value = true\n  rows.value = []\n  window.setTimeout(() => {\n    rows.value = allRows\n    loading.value = false\n  }, 1500)\n}\n\nreload()\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 12px\">\n    <div>\n      <MButton size=\"small\" @click=\"reload\">Reload</MButton>\n    </div>\n    <MTable\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :loading=\"loading\"\n      :skeleton=\"loading\"\n      :skeleton-rows=\"4\"\n      bordered\n      striped\n    />\n  </div>\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "virtual-scrolling-1",
+          "section": "Virtual Scrolling",
+          "sectionId": "virtual-scrolling",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'name', label: 'Name', minWidth: 160 },\n]\n\nconst rows = Array.from({ length: 5000 }, (_, i) => ({\n  id: i + 1,\n  name: `Row ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    :virtual-row-height=\"40\"\n    :max-height=\"320\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "multi-header-footer-and-merges-1",
-          "section": "Multi-header, footer, and merges",
-          "sectionId": "multi-header-footer-and-merges",
+          "id": "dynamic-row-height-virtual-scrolling-1",
+          "section": "Dynamic Row Height Virtual Scrolling",
+          "sectionId": "dynamic-row-height-virtual-scrolling",
+          "lang": "vue",
+          "preview": true,
+          "code": "<script setup lang=\"ts\">\nimport { MTable } from 'morya-ui'\n\nconst columns = [\n  { key: 'id', label: 'ID', width: 80 },\n  { key: 'title', label: 'Title', minWidth: 200 },\n  { key: 'summary', label: 'Summary', minWidth: 320 },\n]\n\n// Rows with variable content length → variable row height\nconst rows = Array.from({ length: 2000 }, (_, i) => ({\n  id: i + 1,\n  title: `Task ${i + 1}`,\n  summary: i % 7 === 0\n    ? 'A longer summary used to demonstrate dynamic row height. '.repeat((i % 5) + 2)\n    : `Short summary ${i + 1}`,\n}))\n</script>\n\n<template>\n  <MTable\n    :columns=\"columns\"\n    :rows=\"rows\"\n    virtual\n    virtual-dynamic-row-height\n    :virtual-row-height=\"44\"\n    :max-height=\"360\"\n    bordered\n    :paginator=\"false\"\n  />\n</template>",
+          "locale": "en-US"
+        },
+        {
+          "id": "multi-level-headers-footer-span-1",
+          "section": "Multi-level Headers, Footer & Span",
+          "sectionId": "multi-level-headers-footer-span",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst columns: TableColumnDefinition[] = [\n  {\n    key: 'info',\n    label: 'Info',\n    children: [\n      { key: 'name', label: 'Name' },\n      { key: 'role', label: 'Role' },\n    ],\n  },\n  { key: 'score', label: 'Score', align: 'end' },\n]\n\nconst rows = ref<TableItem[]>([\n  { id: 1, name: 'Ada', role: 'Designer', score: 96 },\n  { id: 2, name: 'Lin', role: 'Engineer', score: 88 },\n  { id: 3, name: 'Kai', role: 'Engineer', score: 91 },\n])\n\nconst hiddenColumns = ref<string[]>([])\n</script>\n\n<template>\n  <MTable\n    v-model:hidden-columns=\"hiddenColumns\"\n    :columns=\"columns\"\n    :rows=\"rows\"\n    bordered\n    show-footer\n    :footer-method=\"({ data }) => [[\n      'Total',\n      '',\n      data.reduce((sum, row) => sum + Number(row.score ?? 0), 0),\n    ]]\"\n    :span-method=\"({ column, rowIndex }) => {\n      if (column.value === 'role' && rowIndex === 1) return { rowspan: 2, colspan: 1 }\n      if (column.value === 'role' && rowIndex === 2) return { rowspan: 0, colspan: 0 }\n      return { rowspan: 1, colspan: 1 }\n    }\"\n    :paginator=\"false\"\n  />\n</template>",
           "locale": "en-US"
         },
         {
-          "id": "empty-and-loading-1",
-          "section": "Empty and loading",
-          "sectionId": "empty-and-loading",
+          "id": "empty-loading-1",
+          "section": "Empty & Loading",
+          "sectionId": "empty-loading",
           "lang": "vue",
           "preview": true,
           "code": "<script setup lang=\"ts\">\nimport { MButton, MTable } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst loading = ref(false)\nconst columns = [\n  { key: 'name', label: 'Name', minWidth: 120 },\n  { key: 'role', label: 'Role', minWidth: 120 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-3\">\n    <MButton :label=\"loading ? 'Stop loading' : 'Start loading'\" @click=\"loading = !loading\" />\n    <MTable\n      :columns=\"columns\"\n      :rows=\"[]\"\n      :loading=\"loading\"\n      empty-text=\"No data yet\"\n      empty-description=\"Records will appear here after you create the first one\"\n      :paginator=\"false\"\n    />\n  </div>\n</template>",
@@ -26776,7 +27431,7 @@
         },
         {
           "id": "tree-table-1",
-          "section": "Tree table",
+          "section": "Tree Table",
           "sectionId": "tree-table",
           "lang": "vue",
           "preview": true,
@@ -26785,7 +27440,7 @@
         },
         {
           "id": "server-mode-1",
-          "section": "Server mode",
+          "section": "Server Mode",
           "sectionId": "server-mode",
           "lang": "vue",
           "preview": true,
@@ -26807,7 +27462,7 @@
           "sectionId": "types",
           "lang": "ts",
           "preview": false,
-          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  resizable?: boolean\n  children?: TableColumnDefinition[]\n  showOverflowTooltip?: boolean\n}",
+          "code": "interface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}",
           "locale": "en-US"
         },
         {
@@ -26816,6 +27471,78 @@
           "sectionId": "types",
           "lang": "ts",
           "preview": false,
+          "code": "interface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-4",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableTextDirection = 'left' | 'center' | 'right'",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-5",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-6",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-7",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-8",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "type TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-9",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "interface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-10",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
+          "code": "interface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}",
+          "locale": "en-US"
+        },
+        {
+          "id": "types-11",
+          "section": "Types",
+          "sectionId": "types",
+          "lang": "ts",
+          "preview": false,
           "code": "interface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}",
           "locale": "en-US"
         }
@@ -26823,7 +27550,7 @@
       "locales": {
         "zh-CN": {
           "title": "Table",
-          "description": "数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。",
+          "description": "数据表格。支持排序、筛选、选择、分页、固定列、列拖拽、列设置、骨架屏与虚拟滚动。列宽支持 width / minWidth / fit。",
           "sections": [
             {
               "id": "overview",
@@ -26833,7 +27560,7 @@
             {
               "id": "引入",
               "title": "引入",
-              "body": "```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
+              "body": "```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
             },
             {
               "id": "基础用法",
@@ -26860,16 +27587,41 @@
               "title": "展开行与列渲染",
               "body": "列可通过 `render` 或 `#cell-{key}` 自定义单元格。展开行设置 `expandable`（或 `expandConfig`），详情由 `#expansion` 提供。树模式下 `expandedRowKeys` 用于树节点展开，不可同时用于详情展开。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```"
             },
+            {
+              "id": "排序-sortconfig",
+              "title": "排序（sortConfig）",
+              "body": "通过 `sort-config` 统一配置排序：`{ field, order, multiple, must, mode }`。`mode: 'client'`（默认）由表格内部对当前页数据排序；`mode: 'emit'` 时表格只触发 `sort-change` 事件，数据由外部接管（适合服务端排序）。多列排序设 `multiple: true`，禁止取消排序设 `must: true`。\n\n```vue preview src=\"./demos/Sorting.zh.vue\"\n```"
+            },
             {
               "id": "列宽拖拽与表头筛选",
               "title": "列宽拖拽与表头筛选",
-              "body": "列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，可选 `filters` 为多选选项，否则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filters`。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```"
+              "body": "列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，列定义里的 `filters` 为多选选项，省略则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filter-model`（旧 prop 名 `filters` 仍兼容）。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```"
+            },
+            {
+              "id": "列设置面板",
+              "title": "列设置面板",
+              "body": "开启 `column-setting` 在表头右上角显示「列设置」按钮，弹出面板可勾选显示/隐藏列，配合 `v-model:hidden-columns` 持久化。面板文案随 `MLocale` 切换。\n\n```vue preview src=\"./demos/ColumnSetting.zh.vue\"\n```"
+            },
+            {
+              "id": "列拖拽排序",
+              "title": "列拖拽排序",
+              "body": "开启 `column-drag` 后，拖拽表头单元格可调整叶列顺序，顺序由 `v-model:column-order` 同步。拖放仅在同一层级内进行，不会破坏多级表头结构。\n\n```vue preview src=\"./demos/ColumnDrag.zh.vue\"\n```"
+            },
+            {
+              "id": "骨架屏加载",
+              "title": "骨架屏加载",
+              "body": "通过 `skeleton` 启用骨架屏加载态，替代整页遮罩 spinner；`skeleton-rows` 控制骨架行数（默认 `5`）。骨架屏会让用户提前感知表格布局，加载体验更好。\n\n```vue preview src=\"./demos/Skeleton.zh.vue\"\n```"
             },
             {
               "id": "虚拟滚动",
               "title": "虚拟滚动",
               "body": "开启 `virtual`，并提供 `maxHeight` / `tableHeight` / `fill` 之一以形成滚动视口；缺高度时开发环境会 `console.warn`。展开行 / `#expansion` / `expandConfig` 与虚拟滚动互斥，会自动降级为普通渲染（开发环境会提示）。\n\n```vue preview src=\"./demos/VirtualScroll.zh.vue\"\n```"
             },
+            {
+              "id": "动态行高虚拟滚动",
+              "title": "动态行高虚拟滚动",
+              "body": "默认虚拟滚动要求所有行等高（由 `virtual-row-height` 估算）。如果某些行由于内容差异存在不同高度，可开启 `virtual-dynamic-row-height`：表格会通过 `ResizeObserver` 实测每行高度并缓存，配合前缀和 + 二分查找实现 O(log n) 滚动定位，长列表下滚动仍保持流畅。\n\n```vue preview src=\"./demos/DynamicRowHeight.zh.vue\"\n```"
+            },
             {
               "id": "多级表头-表尾与合并",
               "title": "多级表头、表尾与合并",
@@ -26893,7 +27645,7 @@
             {
               "id": "breaking-changes",
               "title": "Breaking changes",
-              "body": "- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`"
+              "body": "- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`sortChange` → `sort-change`；`expandRow` → `expand-change`；`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 新增事件：`filter-change`（列筛选提交）\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`\n- 排序 props 合并：`sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` 仍兼容，新代码请使用 `sortConfig: TableSortConfig`\n- 筛选 v-model：`v-model:filters` 仍兼容，新代码请使用 `v-model:filter-model`"
             },
             {
               "id": "tablecolumndefinition",
@@ -26903,17 +27655,17 @@
             {
               "id": "props",
               "title": "Props",
-              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |"
+              "body": "| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `virtualDynamicRowHeight` | `boolean` | `false` | 动态行高虚拟滚动（实测行高缓存，配合 `ResizeObserver`）。 |\n| `virtualOverscan` | `number` | `4` | 虚拟滚动上下额外渲染的行数，减少白屏闪烁。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `columnSetting` | `boolean` | `false` | 显示列设置按钮（显示/隐藏列）。 |\n| `columnDrag` | `boolean` | `false` | 表头拖拽排序。 |\n| `skeleton` | `boolean` | `false` | 骨架屏加载态。 |\n| `skeletonRows` | `number` | `5` | 骨架屏行数。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | 统一排序配置 `{ field, order, multiple, must, mode }`。 |\n| `sortField` | `string \\| null` | `null` | （兼容）单字段排序。建议用 `sortConfig`。 |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | （兼容）单字段排序方向。建议用 `sortConfig`。 |\n| `multiSort` | `boolean` | `false` | （兼容）多列排序。建议用 `sortConfig.multiple`。 |\n| `mustSort` | `boolean` | `false` | （兼容）禁止取消排序。建议用 `sortConfig.must`。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | （兼容）排序模式。建议用 `sortConfig.mode`。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | 列筛选 v-model（与 `update:filter-model` 配合）。 |\n| `filters` | `Record<string, unknown> \\| null` | `null` | （兼容）旧筛选 v-model 名。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | 多部分 DOM 透传：`{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`。 |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |"
+              "body": "| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态（`skeleton` 为 true 时不生效）。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `filter` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:columnWidths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hiddenColumns` | `string[]` | 隐藏列 v-model。 |\n| `update:columnOrder` | `string[]` | 列顺序 v-model。 |\n| `update:selectedItem` | — | — |"
+              "body": "| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `filter-change` | `Record<string, unknown> \\| null` | 列筛选提交（与 `update:filter-model` 同步）。 |\n| `expand-change` | `{ row, expanded }` | 行展开状态变化（详情展开或树节点展开）。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `update:expanded-row-keys` | `Array<string \\| number>` | 树/详情展开键 v-model。 |\n| `update:filter-model` | `Record<string, unknown> \\| null` | 列筛选 v-model。 |\n| `update:column-widths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hidden-columns` | `string[]` | 隐藏列 v-model。 |\n| `update:column-order` | `string[]` | 列顺序 v-model。 |\n| `update:selected-item` | `TableItem \\| null` | 单选 v-model。 |"
             },
             {
               "id": "实例方法",
@@ -26923,24 +27675,24 @@
             {
               "id": "类型",
               "title": "类型",
-              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。"
+              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\n统一排序配置；`field` / `order` 描述当前单列排序状态，`mode` 决定由表格内部或外部接管排序：\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\n多部分 DOM 透传，支持 class / style / 任意 attrs：\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。"
             }
           ],
-          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列与空/加载态。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。多选表头「全选」仅作用于当前页。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- 全视口主列表可用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）；嵌入表或短页不必使用 `fill`\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。表头全选仅选中当前页。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`（受控同步）。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left' | 'right'`（或 `fixed: true` 视为左固定）。\n\n```vue preview src=\"./demos/FixedColumns.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 或 `#cell-{key}` 自定义单元格。展开行设置 `expandable`（或 `expandConfig`），详情由 `#expansion` 提供。树模式下 `expandedRowKeys` 用于树节点展开，不可同时用于详情展开。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 列宽拖拽与表头筛选\n\n列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，可选 `filters` 为多选选项，否则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filters`。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```\n\n## 虚拟滚动\n\n开启 `virtual`，并提供 `maxHeight` / `tableHeight` / `fill` 之一以形成滚动视口；缺高度时开发环境会 `console.warn`。展开行 / `#expansion` / `expandConfig` 与虚拟滚动互斥，会自动降级为普通渲染（开发环境会提示）。\n\n```vue preview src=\"./demos/VirtualScroll.zh.vue\"\n```\n\n## 多级表头、表尾与合并\n\n列支持 `children` 多级表头；`show-footer` + `footer-method` 渲染合计（`footerMethod({ columns, data })` 返回行矩阵，或使用 `#footer` 插槽完全自定义）；`span-method` 合并单元格。\n\n```vue preview src=\"./demos/GridFeatures.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 树形表格\n\n传入 `tree-config` 启用树模式：嵌套 `children`，或 `transform` + `parentId` 扁平数据。展开状态用 `v-model:expanded-row-keys`。支持 `expandAll` / `expandRowKeys`、`accordion`、`trigger`、`toggleMethod`、懒加载 `lazy` + `loadMethod`。\n\n实例方法：`setTreeExpand`、`setAllTreeExpand`、`toggleTreeExpand`、`isTreeExpandByRow`、`getTreeExpandRecords`、`clearTreeExpand`。\n\n树 + 多选时默认父子级联与半选（`checkbox-config.check-strictly=false`）；`checkMethod` 可禁用单行勾选。\n\n```vue preview src=\"./demos/Tree.zh.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-total`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；`true` 等同 `'left'`。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n| `resizable` | `boolean` | 可拖拽调整列宽。 |\n| `filterable` | `boolean` | 显示表头筛选。 |\n| `filters` | `TableColumnFilter[]` | 表头筛选选项；省略则为文本筛选。 |\n| `children` | `TableColumnDefinition[]` | 多级表头子列。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortField` / `sortOrder` | — | — | 受控排序字段与方向。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | 客户端排序或仅抛出排序事件。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `filters` | `Record<string, unknown> \\| null` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `multiSort` | `boolean` | — | — |\n| `mustSort` | `boolean` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | DOM 透传，见 [样式与 attrs](/docs/attrs). |\n\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `expand` | `{ row, expanded }` | 行展开。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `filter` | — | — |\n| `update:expandedRowKeys` | — | — |\n| `update:filters` | — | — |\n| `update:columnWidths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hiddenColumns` | `string[]` | 隐藏列 v-model。 |\n| `update:columnOrder` | `string[]` | 列顺序 v-model。 |\n| `update:selectedItem` | — | — |\n\n## 实例方法\n\n通过 `ref` 可访问分页、筛选、选择、滚动与展开控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` / `clearFilter()` | 设置 / 清空筛选。 |\n| `setColumnWidths(widths)` | 设置列宽（等同 `v-model:column-widths`）。 |\n| `setHiddenColumns(keys)` | 设置隐藏列键（等同 `v-model:hidden-columns`）。 |\n| `setColumnOrder(keys)` | 设置叶列顺序（等同 `v-model:column-order`）。 |\n| `clearSort()` | 清空排序。 |\n| `getCheckboxRecords()` | 当前多选行。 |\n| `setCheckboxRow(rows, checked)` | 设置行选中状态。 |\n| `clearCheckboxRow()` | 清空多选。 |\n| `isCheckedByCheckboxRow(row)` | 行是否选中。 |\n| `isAllCheckboxChecked()` | 当前页是否全选。 |\n| `getCheckboxIndeterminateRecords()` | 半选行（树级联）。 |\n| `scrollTo(...)` / `scrollToRow(row)` | 滚动定位。 |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | 详情展开（非树模式）。 |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | 树节点展开。 |\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableFilterOption = | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n完整定义见源码 `types.ts`。\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
+          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: 数据表格。支持排序、筛选、选择、分页、固定列、列拖拽、列设置、骨架屏与虚拟滚动。列宽支持 width / minWidth / fit。\n---\n\n# Table\n\n`MTable` 用于展示结构化行数据。通过 `columns` 定义列、`rows` 传入数据；内置客户端排序、筛选、分页与行选择，也支持服务端分页模式。多选表头「全选」仅作用于当前页。\n\n列宽规则：\n\n- 设置了 `width` 的列为固定宽度\n- 未设 `width` 的列以 `minWidth`（默认 `80`）为弹性下限；`fit` 为 `true`（默认）时，剩余宽度按比例分配给弹性列\n- 总最小宽度超出容器时出现横向滚动\n- 需要表体自己滚动时用 `maxHeight` / `tableHeight`；与 `MLayout` 根滚动叠用时优先固定表高，避免双层滚动条\n- 全视口主列表可用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）；嵌入表或短页不必使用 `fill`\n\n## 引入\n\n```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## 基础用法\n\n```vue preview src=\"./demos/Basic.zh.vue\"\n```\n\n## 行选择\n\n多选配合 `selection-mode=\"multiple\"` 与 `v-model:selection`；单选使用 `selection-mode=\"single\"` 与 `v-model:selected-item`。表头全选仅选中当前页。\n\n```vue preview src=\"./demos/Selection.zh.vue\"\n```\n\n## 筛选与分页\n\n客户端筛选可通过 `search-value` / `filter-options`；分页开启 `paginator` 并配合 `v-model:page` 与 `rows-per-page`（受控同步）。\n\n```vue preview src=\"./demos/FilterAndPagination.zh.vue\"\n```\n\n## 固定列\n\n列定义中设置 `fixed: 'left' | 'right'`（或 `fixed: true` 视为左固定）。\n\n```vue preview src=\"./demos/FixedColumns.zh.vue\"\n```\n\n## 展开行与列渲染\n\n列可通过 `render` 或 `#cell-{key}` 自定义单元格。展开行设置 `expandable`（或 `expandConfig`），详情由 `#expansion` 提供。树模式下 `expandedRowKeys` 用于树节点展开，不可同时用于详情展开。\n\n```vue preview src=\"./demos/ExpandableRows.zh.vue\"\n```\n\n## 排序（sortConfig）\n\n通过 `sort-config` 统一配置排序：`{ field, order, multiple, must, mode }`。`mode: 'client'`（默认）由表格内部对当前页数据排序；`mode: 'emit'` 时表格只触发 `sort-change` 事件，数据由外部接管（适合服务端排序）。多列排序设 `multiple: true`，禁止取消排序设 `must: true`。\n\n```vue preview src=\"./demos/Sorting.zh.vue\"\n```\n\n## 列宽拖拽与表头筛选\n\n列设置 `resizable` 可拖拽改宽（`v-model:column-widths`）；`filterable` 显示表头筛选，列定义里的 `filters` 为多选选项，省略则为文本包含筛选。面板内 **清除** 仅重置草稿，**确认** 后才写入 `v-model:filter-model`（旧 prop 名 `filters` 仍兼容）。\n\n```vue preview src=\"./demos/ResizeAndFilter.zh.vue\"\n```\n\n## 列设置面板\n\n开启 `column-setting` 在表头右上角显示「列设置」按钮，弹出面板可勾选显示/隐藏列，配合 `v-model:hidden-columns` 持久化。面板文案随 `MLocale` 切换。\n\n```vue preview src=\"./demos/ColumnSetting.zh.vue\"\n```\n\n## 列拖拽排序\n\n开启 `column-drag` 后，拖拽表头单元格可调整叶列顺序，顺序由 `v-model:column-order` 同步。拖放仅在同一层级内进行，不会破坏多级表头结构。\n\n```vue preview src=\"./demos/ColumnDrag.zh.vue\"\n```\n\n## 骨架屏加载\n\n通过 `skeleton` 启用骨架屏加载态，替代整页遮罩 spinner；`skeleton-rows` 控制骨架行数（默认 `5`）。骨架屏会让用户提前感知表格布局，加载体验更好。\n\n```vue preview src=\"./demos/Skeleton.zh.vue\"\n```\n\n## 虚拟滚动\n\n开启 `virtual`，并提供 `maxHeight` / `tableHeight` / `fill` 之一以形成滚动视口；缺高度时开发环境会 `console.warn`。展开行 / `#expansion` / `expandConfig` 与虚拟滚动互斥，会自动降级为普通渲染（开发环境会提示）。\n\n```vue preview src=\"./demos/VirtualScroll.zh.vue\"\n```\n\n## 动态行高虚拟滚动\n\n默认虚拟滚动要求所有行等高（由 `virtual-row-height` 估算）。如果某些行由于内容差异存在不同高度，可开启 `virtual-dynamic-row-height`：表格会通过 `ResizeObserver` 实测每行高度并缓存，配合前缀和 + 二分查找实现 O(log n) 滚动定位，长列表下滚动仍保持流畅。\n\n```vue preview src=\"./demos/DynamicRowHeight.zh.vue\"\n```\n\n## 多级表头、表尾与合并\n\n列支持 `children` 多级表头；`show-footer` + `footer-method` 渲染合计（`footerMethod({ columns, data })` 返回行矩阵，或使用 `#footer` 插槽完全自定义）；`span-method` 合并单元格。\n\n```vue preview src=\"./demos/GridFeatures.zh.vue\"\n```\n\n## 空态与加载\n\n```vue preview src=\"./demos/EmptyAndLoading.zh.vue\"\n```\n\n## 树形表格\n\n传入 `tree-config` 启用树模式：嵌套 `children`，或 `transform` + `parentId` 扁平数据。展开状态用 `v-model:expanded-row-keys`。支持 `expandAll` / `expandRowKeys`、`accordion`、`trigger`、`toggleMethod`、懒加载 `lazy` + `loadMethod`。\n\n实例方法：`setTreeExpand`、`setAllTreeExpand`、`toggleTreeExpand`、`isTreeExpandByRow`、`getTreeExpandRecords`、`clearTreeExpand`。\n\n树 + 多选时默认父子级联与半选（`checkbox-config.check-strictly=false`）；`checkMethod` 可禁用单行勾选。\n\n```vue preview src=\"./demos/Tree.zh.vue\"\n```\n\n## 服务端模式\n\n传入 `server-options` 与 `server-total`，通过 `v-model:server-options` 同步页码、每页条数与排序字段。\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- 移除内置单元格编辑：`editConfig`、列 `editable`、`edit-change`、`#edit-{key}`；请用 `#cell-{key}` / `render` 自定义\n- 移除 `MTreeTable`（含 `morya-ui/tree-table`）；树表改用 `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`；`rowsItems` → `pageSizes`\n- `hideHeader` 移除；改用 `showHeader`（默认 `true`）\n- `hideRowsPerPage` 移除；改用 `showRowsPerPage`（默认 `true`）\n- 移除：`clickEventType`、`rowsPerPageMessage`、`rowsOfPageSeparatorMessage`、`preventContextMenuRow`、`tableNodeId`\n- 事件：`sortChange` → `sort-change`；`expandRow` → `expand-change`；`contextmenuRow` → `row-contextmenu`；`selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- 新增事件：`filter-change`（列筛选提交）\n- 移除事件：`updatePageItems`、`updateTotalItems`、`page`（保留 `update:page`）\n- 行交互：始终同时支持单击 / 双击（`row-click` / `row-dblclick`）；右键始终 `preventDefault` 并抛出 `row-contextmenu`\n- 排序 props 合并：`sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` 仍兼容，新代码请使用 `sortConfig: TableSortConfig`\n- 筛选 v-model：`v-model:filters` 仍兼容，新代码请使用 `v-model:filter-model`\n\n## TableColumnDefinition\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 列字段名（绑定行数据的键）。 |\n| `label` | `string` | 列头文案。 |\n| `width` | `number` | 固定列宽（px）。 |\n| `minWidth` | `number` | 弹性列最小宽度，默认 `80`。 |\n| `sortable` | `boolean` | 是否可排序。 |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | 固定列；`true` 等同 `'left'`。 |\n| `align` | `'start' \\| 'center' \\| 'end'` | 单元格对齐。 |\n| `render` | `(row) => unknown` | 自定义单元格渲染。 |\n| `showOverflowTooltip` | `boolean` | 该列文本溢出时显示 Tooltip。 |\n| `resizable` | `boolean` | 可拖拽调整列宽。 |\n| `filterable` | `boolean` | 显示表头筛选。 |\n| `filters` | `TableColumnFilter[]` | 表头筛选选项；省略则为文本筛选。 |\n| `children` | `TableColumnDefinition[]` | 多级表头子列。 |\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | 列定义。 |\n| `rows` | `TableItem[]` | — | 行数据。 |\n| `fit` | `boolean` | `true` | 弹性列是否撑满表格宽度。 |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | 行选择模式。 |\n| `selection` | `TableItem[] \\| null` | `null` | 多选绑定（`v-model:selection`）。 |\n| `selectedItem` | `TableItem \\| null` | `null` | 单选绑定（`v-model:selected-item`）。 |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | 服务端分页/排序选项。 |\n| `serverTotal` | `number` | `0` | 服务端总条数。 |\n| `paginator` | `boolean` | `false` | 显示内置分页页脚。 |\n| `page` | `number` | `1` | 当前页（`v-model:page`）。 |\n| `rowsPerPage` | `number` | `25` | 每页条数。 |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | 分页每页条数选项。 |\n| `showHeader` | `boolean` | `true` | 是否显示表头。 |\n| `showRowsPerPage` | `boolean` | `true` | 是否显示每页条数选择器。 |\n| `fill` | `boolean` | `false` | 撑满父级剩余高度（仅全视口主列表配 `MPageContent fill`）；表体滚动，分页贴底。设置 `maxHeight` / `tableHeight` 时忽略。 |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | 列宽（`v-model:column-widths`）。 |\n| `virtual` | `boolean` | `false` | 行虚拟滚动（需高度；展开行时跳过）。 |\n| `virtualRowHeight` | `number` | `40` | 虚拟行高估算。 |\n| `virtualDynamicRowHeight` | `boolean` | `false` | 动态行高虚拟滚动（实测行高缓存，配合 `ResizeObserver`）。 |\n| `virtualOverscan` | `number` | `4` | 虚拟滚动上下额外渲染的行数，减少白屏闪烁。 |\n| `hiddenColumns` | `string[] \\| null` | `null` | 隐藏列键（`v-model:hidden-columns`）。 |\n| `columnOrder` | `string[] \\| null` | `null` | 叶列顺序（`v-model:column-order`）。 |\n| `columnSetting` | `boolean` | `false` | 显示列设置按钮（显示/隐藏列）。 |\n| `columnDrag` | `boolean` | `false` | 表头拖拽排序。 |\n| `skeleton` | `boolean` | `false` | 骨架屏加载态。 |\n| `skeletonRows` | `number` | `5` | 骨架屏行数。 |\n| `showFooter` | `boolean` | `false` | 显示表尾。 |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | 表尾数据。 |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | 单元格合并。 |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | 树形行。 |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | 详情展开配置（与树互斥）。 |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | 多选：级联 / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`。 |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | 单选：`strict` / `checkMethod` / `trigger`。 |\n| `expandable` | `boolean` | `false` | 显示展开列（也可由 `#expansion` 或 `expandConfig` 启用）。 |\n| `striped` | `boolean` | `false` | 斑马纹行。 |\n| `bordered` | `boolean` | `false` | 单元格边框。 |\n| `highlightCurrent` | `boolean` | `false` | 高亮当前行，配合 `v-model:current-row-key`。 |\n| `rowHover` | `boolean` | `true` | 行 hover 高亮。 |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | 统一排序配置 `{ field, order, multiple, must, mode }`。 |\n| `sortField` | `string \\| null` | `null` | （兼容）单字段排序。建议用 `sortConfig`。 |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | （兼容）单字段排序方向。建议用 `sortConfig`。 |\n| `multiSort` | `boolean` | `false` | （兼容）多列排序。建议用 `sortConfig.multiple`。 |\n| `mustSort` | `boolean` | `false` | （兼容）禁止取消排序。建议用 `sortConfig.must`。 |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | （兼容）排序模式。建议用 `sortConfig.mode`。 |\n| `searchField` / `searchValue` | — | — | 客户端搜索。 |\n| `filterOptions` | `TableFilterOption[]` | `null` | 结构化筛选条件。 |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | 列筛选 v-model（与 `update:filter-model` 配合）。 |\n| `filters` | `Record<string, unknown> \\| null` | `null` | （兼容）旧筛选 v-model 名。 |\n| `loading` | `boolean` | `false` | 加载中。 |\n| `emptyText` | `string` | — | 空数据文案。 |\n| `emptyDescription` | `string` | — | 空数据补充说明。 |\n| `maxHeight` | `number \\| null` | `null` | 表格最大高度，超出滚动。 |\n| `showOverflowTooltip` | `boolean` | `false` | 全局单元格溢出 Tooltip。 |\n| `rowKey` | `string` | `'id'` | 行唯一键字段。 |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | 表格密度（`large`/`small` 同步单元格 padding）。 |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | 多部分 DOM 透传：`{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`。 |\n\n## Slots\n\n| 插槽 | 说明 |\n| --- | --- |\n| `cell-{key}` | 列 `{key}` 单元格，作用域 `{ row, value, column }`（可自行实现编辑器）。 |\n| `footer` | 自定义表尾。 |\n| `body-cell` | 任意单元格，作用域 `{ row, column, value }`。 |\n| `expansion` | 展开行内容，作用域 `{ row }`。 |\n| `empty` | 自定义空态。 |\n| `loading` | 自定义加载态（`skeleton` 为 true 时不生效）。 |\n| `pagination` | 自定义分页区域。 |\n| `body` | 自定义 `body` 内容。 |\n| `body-append` | 自定义 `body-append` 内容。 |\n| `body-prepend` | 自定义 `body-prepend` 内容。 |\n| `customize-headers` | 自定义 `customize-headers` 内容。 |\n| `header` | 自定义 `header` 内容。 |\n| `header-{key}` | 列头插槽（键名大小写与 `columns[].key` 一致）。 |\n\n## Events\n\n| 事件名 | 参数 | 说明 |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | 排序变化。 |\n| `filter-change` | `Record<string, unknown> \\| null` | 列筛选提交（与 `update:filter-model` 同步）。 |\n| `expand-change` | `{ row, expanded }` | 行展开状态变化（详情展开或树节点展开）。 |\n| `row-click` | `{ row, index }`, `Event` | 行单击。 |\n| `row-dblclick` | `{ row, index }`, `Event` | 行双击。 |\n| `row-contextmenu` | `item`, `MouseEvent` | 行右键。 |\n| `select-row` | `TableItem` | 选中一行。 |\n| `deselect-row` | `TableItem` | 取消选中一行。 |\n| `select-all` | — | 全选当前页。 |\n| `current-change` | `row \\| null, oldRow \\| null` | 当前高亮行变化。 |\n| `update:selection` | `TableItem[]` | 多选 v-model。 |\n| `update:page` | `number` | 页码 v-model。 |\n| `update:server-options` | `TableServerOptions` | 服务端选项 v-model。 |\n| `update:current-row-key` | `string \\| number \\| null` | 当前行键 v-model。 |\n| `update:expanded-row-keys` | `Array<string \\| number>` | 树/详情展开键 v-model。 |\n| `update:filter-model` | `Record<string, unknown> \\| null` | 列筛选 v-model。 |\n| `update:column-widths` | `Record<string, number>` | 列宽 v-model。 |\n| `update:hidden-columns` | `string[]` | 隐藏列 v-model。 |\n| `update:column-order` | `string[]` | 列顺序 v-model。 |\n| `update:selected-item` | `TableItem \\| null` | 单选 v-model。 |\n\n## 实例方法\n\n通过 `ref` 可访问分页、筛选、选择、滚动与展开控制：\n\n| 方法 / 属性 | 说明 |\n| --- | --- |\n| `currentPageFirstIndex` | 当前页首条记录的索引（无数据时为 `-1`）。 |\n| `currentPageLastIndex` | 当前页末条记录的索引。 |\n| `clientItemsLength` | 数据总条数（服务端模式下为服务端总数）。 |\n| `maxPaginationNumber` | 最大页码。 |\n| `currentPaginationNumber` | 当前页码。 |\n| `isLastPage` / `isFirstPage` | 是否末页 / 首页。 |\n| `nextPage()` / `prevPage()` | 下一页 / 上一页。 |\n| `updatePage(page)` | 跳到指定页码。 |\n| `rowsPerPageOptions` | 每页条数选项。 |\n| `rowsPerPageActiveOption` | 当前生效的每页条数。 |\n| `updateRowsPerPageActiveOption(n)` | 修改每页条数。 |\n| `setFilters(filters)` / `clearFilter()` | 设置 / 清空筛选。 |\n| `setColumnWidths(widths)` | 设置列宽（等同 `v-model:column-widths`）。 |\n| `setHiddenColumns(keys)` | 设置隐藏列键（等同 `v-model:hidden-columns`）。 |\n| `setColumnOrder(keys)` | 设置叶列顺序（等同 `v-model:column-order`）。 |\n| `clearSort()` | 清空排序。 |\n| `getCheckboxRecords()` | 当前多选行。 |\n| `setCheckboxRow(rows, checked)` | 设置行选中状态。 |\n| `clearCheckboxRow()` | 清空多选。 |\n| `isCheckedByCheckboxRow(row)` | 行是否选中。 |\n| `isAllCheckboxChecked()` | 当前页是否全选。 |\n| `getCheckboxIndeterminateRecords()` | 半选行（树级联）。 |\n| `scrollTo(...)` / `scrollToRow(row)` | 滚动定位。 |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | 详情展开（非树模式）。 |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | 树节点展开。 |\n\n## 类型\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\n统一排序配置；`field` / `order` 描述当前单列排序状态，`mode` 决定由表格内部或外部接管排序：\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\n多部分 DOM 透传，支持 class / style / 任意 attrs：\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\n列定义，传给 `columns`：\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\n服务端分页/排序时传给 `serverOptions`，配合 `serverTotal`：\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n更多见 [API 类型](/docs/types)。\n"
         },
         "en-US": {
           "title": "Table",
-          "description": "Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.",
+          "description": "Data table with sorting, filtering, selection, pagination, fixed columns, column drag, column settings, skeleton loading and virtual scrolling. Column widths support width / minWidth / fit.",
           "sections": [
             {
               "id": "overview",
               "title": "",
-              "body": "# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination. Header “select all” applies to the current page only.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- For full-viewport main lists, use `MPageContent fill` + `MTable fill paginator` (body scrolls; pagination at the bottom). Skip `fill` for embedded or short tables."
+              "body": "# Table\n\n`MTable` renders structured row data. Pass `columns` for column definitions and `rows` for data; built-in client-side sorting, filtering, pagination and row selection are included, with a server-side mode for remote sources. The header \"select all\" only applies to the current page.\n\nColumn width rules:\n\n- Columns with `width` are fixed.\n- Columns without `width` flex from `minWidth` (default `80`); when `fit` is `true` (default), remaining space is distributed proportionally.\n- Total minimum width beyond the container triggers horizontal scrolling.\n- Use `maxHeight` / `tableHeight` for body scrolling; with `MLayout` root scrolling prefer a fixed table height to avoid double scrollbars.\n- Full-viewport lists: `MPageContent fill` + `MTable fill paginator` (body scrolls, paginator pinned). Embedded tables and short pages don't need `fill`."
             },
             {
               "id": "import",
               "title": "Import",
-              "body": "```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
+              "body": "```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```"
             },
             {
               "id": "basic",
@@ -26948,92 +27700,117 @@
               "body": "```vue preview src=\"./demos/Basic.en.vue\"\n```"
             },
             {
-              "id": "selection",
-              "title": "Selection",
-              "body": "Use `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```"
+              "id": "row-selection",
+              "title": "Row Selection",
+              "body": "Multiple selection uses `selection-mode=\"multiple\"` with `v-model:selection`; single selection uses `selection-mode=\"single\"` with `v-model:selected-item`. Header \"select all\" only applies to the current page.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```"
             },
             {
-              "id": "filter-and-pagination",
-              "title": "Filter and pagination",
-              "body": "Use `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```"
+              "id": "filtering-pagination",
+              "title": "Filtering & Pagination",
+              "body": "Client-side filtering via `search-value` / `filter-options`; enable `paginator` with `v-model:page` and `rows-per-page` (controlled).\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```"
             },
             {
-              "id": "expandable-rows",
-              "title": "Expandable rows",
-              "body": "Customize cells with `render` or `#cell-{key}`. Set `expandable` (or `expandConfig`) and provide the `#expansion` slot. In tree mode, `expandedRowKeys` controls tree nodes and cannot be used for detail expansion at the same time.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```"
+              "id": "fixed-columns",
+              "title": "Fixed Columns",
+              "body": "Set `fixed: 'left' | 'right'` in the column definition (`fixed: true` equals left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```"
             },
             {
-              "id": "fixed-columns",
-              "title": "Fixed columns",
-              "body": "Set `fixed: 'left' | 'right'` on a column (or `fixed: true` for left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```"
+              "id": "expandable-rows-cell-rendering",
+              "title": "Expandable Rows & Cell Rendering",
+              "body": "Customize cells via `render` or `#cell-{key}`. Enable row details with `expandable` (or `expandConfig`) and provide content via `#expansion`. In tree mode `expandedRowKeys` is reserved for tree nodes and cannot also drive detail expansion.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```"
+            },
+            {
+              "id": "sorting-sortconfig",
+              "title": "Sorting (sortConfig)",
+              "body": "Use `sort-config` to configure sorting in one place: `{ field, order, multiple, must, mode }`. With `mode: 'client'` (default) the table sorts the current page itself; with `mode: 'emit'` only the `sort-change` event is emitted and the data is owned by the caller (useful for server-side sorting). Set `multiple: true` for multi-column sort and `must: true` to prevent clearing.\n\n```vue preview src=\"./demos/Sorting.en.vue\"\n```"
+            },
+            {
+              "id": "column-resizing-header-filters",
+              "title": "Column Resizing & Header Filters",
+              "body": "Set `resizable` to drag column widths (`v-model:column-widths`); `filterable` adds a header filter — column `filters` becomes a multi-select, otherwise a text-contains filter. **Clear** resets the draft, **OK** commits to `v-model:filter-model` (legacy `v-model:filters` still supported).\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```"
+            },
+            {
+              "id": "column-settings-panel",
+              "title": "Column Settings Panel",
+              "body": "Enable `column-setting` to show a settings button in the header corner. The popover lets users toggle column visibility, synced via `v-model:hidden-columns`. Panel copy follows `MLocale`.\n\n```vue preview src=\"./demos/ColumnSetting.en.vue\"\n```"
+            },
+            {
+              "id": "column-drag",
+              "title": "Column Drag",
+              "body": "Enable `column-drag` to reorder leaf columns by dragging header cells. Order is synced through `v-model:column-order`. Drag-and-drop stays within a single header level and never breaks multi-level headers.\n\n```vue preview src=\"./demos/ColumnDrag.en.vue\"\n```"
             },
             {
-              "id": "column-resize-and-header-filters",
-              "title": "Column resize and header filters",
-              "body": "Set `resizable` to drag column widths (`v-model:column-widths`). Set `filterable` for a header filter; optional `filters` for checkbox options, otherwise free-text contains. **Clear** resets the draft only; **Confirm** applies to `v-model:filters`.\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```"
+              "id": "skeleton-loading",
+              "title": "Skeleton Loading",
+              "body": "Enable `skeleton` for a skeleton loading state instead of a full-overlay spinner. `skeleton-rows` controls the number of placeholder rows (default `5`). Skeleton previews preserve the layout and feel much faster.\n\n```vue preview src=\"./demos/Skeleton.en.vue\"\n```"
             },
             {
-              "id": "virtual-scroll",
-              "title": "Virtual scroll",
-              "body": "Enable `virtual` with `maxHeight` / `tableHeight` / `fill` so the body scrolls; dev mode warns if height is missing. Expandable rows (`#expansion` / `expandConfig`) disable virtualization (dev warning when both are set).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```"
+              "id": "virtual-scrolling",
+              "title": "Virtual Scrolling",
+              "body": "Enable `virtual` and provide one of `maxHeight` / `tableHeight` / `fill` to form a scroll viewport; without one, the dev build warns. Expandable rows / `#expansion` / `expandConfig` are mutually exclusive with virtualization and fall back to plain rendering (with a dev warning).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```"
             },
             {
-              "id": "multi-header-footer-and-merges",
-              "title": "Multi-header, footer, and merges",
-              "body": "Use column `children` for grouped headers; `show-footer` + `footer-method` for summaries (`footerMethod({ columns, data })` matrix or `#footer` slot); `span-method` for merges.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```"
+              "id": "dynamic-row-height-virtual-scrolling",
+              "title": "Dynamic Row Height Virtual Scrolling",
+              "body": "By default virtual scrolling assumes all rows have equal height (estimated by `virtual-row-height`). If your rows vary in height due to content, enable `virtual-dynamic-row-height`: the table measures each row with `ResizeObserver`, caches the result, and uses prefix sums + binary search for O(log n) positioning, keeping long lists smooth.\n\n```vue preview src=\"./demos/DynamicRowHeight.en.vue\"\n```"
             },
             {
-              "id": "empty-and-loading",
-              "title": "Empty and loading",
+              "id": "multi-level-headers-footer-span",
+              "title": "Multi-level Headers, Footer & Span",
+              "body": "Columns support `children` for multi-level headers; `show-footer` + `footer-method` renders totals (`footerMethod({ columns, data })` returns a row matrix, or use `#footer` for full customization); `span-method` merges cells.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```"
+            },
+            {
+              "id": "empty-loading",
+              "title": "Empty & Loading",
               "body": "```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```"
             },
             {
               "id": "tree-table",
-              "title": "Tree table",
-              "body": "Pass `tree-config` for hierarchical rows: nested `children`, or flat `parentId` with `transform`. Bind expand state with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multi-select, parent/child cascade and indeterminate are on by default (`checkbox-config.check-strictly=false`). Use `checkMethod` to disable specific rows.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```"
+              "title": "Tree Table",
+              "body": "Pass `tree-config` to enable tree mode: nested `children`, or `transform` + `parentId` for flat data. Expansion state is bound with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy loading via `lazy` + `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multiple selection, parent-child cascading with half-check is enabled by default (`checkbox-config.check-strictly=false`); use `checkMethod` to disable a row's checkbox.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```"
             },
             {
               "id": "server-mode",
-              "title": "Server mode",
-              "body": "Pass `server-options` with `server-total`, and sync page / page size / sort via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```"
+              "title": "Server Mode",
+              "body": "Pass `server-options` and `server-total`, syncing page, rows-per-page and sort fields via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```"
             },
             {
               "id": "breaking-changes",
               "title": "Breaking changes",
-              "body": "- Removed built-in cell editing: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead\n- Removed `MTreeTable` (including `morya-ui/tree-table`); use `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`\n- `rowsItems` → `pageSizes`\n- Removed `hideHeader`; use `showHeader` (default `true`)\n- Removed `hideRowsPerPage`; use `showRowsPerPage` (default `true`)\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`\n- Events: `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (keep `update:page`)\n- Row interaction: click and dblclick always emit (`row-click` / `row-dblclick`); context menu always `preventDefault`s and emits `row-contextmenu`"
+              "body": "- Built-in cell editing removed: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead.\n- `MTreeTable` removed (including `morya-ui/tree-table`); use `MTable` + `treeConfig`.\n- `serverItemsLength` → `serverTotal`; `rowsItems` → `pageSizes`.\n- `hideHeader` removed; use `showHeader` (default `true`).\n- `hideRowsPerPage` removed; use `showRowsPerPage` (default `true`).\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`.\n- Events: `sortChange` → `sort-change`; `expandRow` → `expand-change`; `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`.\n- New event: `filter-change` (header filter commit).\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (`update:page` kept).\n- Row interactions: always support single / double click (`row-click` / `row-dblclick`); right-click always `preventDefault` and emits `row-contextmenu`.\n- Sorting props merged: `sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` still work, but new code should use `sortConfig: TableSortConfig`.\n- Filter v-model: `v-model:filters` still works; new code should use `v-model:filter-model`."
             },
             {
               "id": "tablecolumndefinition",
               "title": "TableColumnDefinition",
-              "body": "| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n| `resizable` | `boolean` | Drag to resize column width. |\n| `filterable` | `boolean` | Show header filter trigger. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Nested columns for multi-level headers. |"
+              "body": "| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name on the row. |\n| `label` | `string` | Header text. |\n| `width` | `number` | Fixed column width (px). |\n| `minWidth` | `number` | Flex column minimum width, default `80`. |\n| `sortable` | `boolean` | Sortable. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Fixed column; `true` equals `'left'`. |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Show tooltip on overflow. |\n| `resizable` | `boolean` | Allow drag resizing. |\n| `filterable` | `boolean` | Show header filter. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Multi-level sub-columns. |"
             },
             {
               "id": "props",
               "title": "Props",
-              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single-select (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server paging/sort options. |\n| `serverTotal` | `number` | `0` | Total row count in server mode. |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show table header. |\n| `showRowsPerPage` | `boolean` | `true` | Show page-size picker. |\n| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expand (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multi-select options. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single-select options. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Table density (`large`/`small` also adjust cell padding). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |"
+              "body": "| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Stretch flex columns to fill width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multiple selection (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single selection (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server pagination/sort options. |\n| `serverTotal` | `number` | `0` | Server total count. |\n| `paginator` | `boolean` | `false` | Show built-in paginator. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Rows per page. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show header. |\n| `showRowsPerPage` | `boolean` | `true` | Show rows-per-page selector. |\n| `fill` | `boolean` | `false` | Fill parent height (with `MPageContent fill`); body scrolls, paginator pinned. Ignored when `maxHeight` / `tableHeight` is set. |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | Column widths (`v-model:column-widths`). |\n| `virtual` | `boolean` | `false` | Row virtualization (requires a height; skipped with expand rows). |\n| `virtualRowHeight` | `number` | `40` | Estimated virtual row height. |\n| `virtualDynamicRowHeight` | `boolean` | `false` | Dynamic row-height virtualization (measured & cached via `ResizeObserver`). |\n| `virtualOverscan` | `number` | `4` | Extra rows rendered above/below the viewport to avoid flicker. |\n| `hiddenColumns` | `string[] \\| null` | `null` | Hidden column keys (`v-model:hidden-columns`). |\n| `columnOrder` | `string[] \\| null` | `null` | Leaf column order (`v-model:column-order`). |\n| `columnSetting` | `boolean` | `false` | Show column settings button (visibility toggle). |\n| `columnDrag` | `boolean` | `false` | Header drag reordering. |\n| `skeleton` | `boolean` | `false` | Skeleton loading state. |\n| `skeletonRows` | `number` | `5` | Skeleton row count. |\n| `showFooter` | `boolean` | `false` | Show footer. |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | Footer data. |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | Cell span. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expansion (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multiple selection: cascade / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single selection: `strict` / `checkMethod` / `trigger`. |\n| `expandable` | `boolean` | `false` | Show expand column (also enabled by `#expansion` or `expandConfig`). |\n| `striped` | `boolean` | `false` | Zebra rows. |\n| `bordered` | `boolean` | `false` | Cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row; pair with `v-model:current-row-key`. |\n| `rowHover` | `boolean` | `true` | Row hover highlight. |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | Unified sorting config `{ field, order, multiple, must, mode }`. |\n| `sortField` | `string \\| null` | `null` | (legacy) Single-field sort. Prefer `sortConfig`. |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | (legacy) Sort direction. Prefer `sortConfig`. |\n| `multiSort` | `boolean` | `false` | (legacy) Multi-column sort. Prefer `sortConfig.multiple`. |\n| `mustSort` | `boolean` | `false` | (legacy) Disallow clearing sort. Prefer `sortConfig.must`. |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | (legacy) Sort mode. Prefer `sortConfig.mode`. |\n| `searchField` / `searchValue` | — | — | Client-side search. |\n| `filterOptions` | `TableFilterOption[]` | `null` | Structured filter criteria. |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | Header filter v-model (`update:filter-model`). |\n| `filters` | `Record<string, unknown> \\| null` | `null` | (legacy) Old filter v-model name. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `emptyText` | `string` | — | Empty text. |\n| `emptyDescription` | `string` | — | Empty description. |\n| `maxHeight` | `number \\| null` | `null` | Max height, scrolls beyond. |\n| `showOverflowTooltip` | `boolean` | `false` | Global overflow tooltip. |\n| `rowKey` | `string` | `'id'` | Row unique key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Density (`large`/`small` adjust cell padding). |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | Multi-part DOM pass-through: `{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`. |"
             },
             {
               "id": "slots",
               "title": "Slots",
-              "body": "| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }` (use this for custom editors). |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n| `header-{key}` | Header slot (exact key case). |"
+              "body": "| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell of column `{key}`, scope `{ row, value, column }` (use it to build editors). |\n| `footer` | Custom footer. |\n| `body-cell` | Any cell, scope `{ row, column, value }`. |\n| `expansion` | Expanded row content, scope `{ row }`. |\n| `empty` | Custom empty state. |\n| `loading` | Custom loading state (ignored when `skeleton` is true). |\n| `pagination` | Custom pagination area. |\n| `body` | Custom `body` content. |\n| `body-append` | Custom `body-append` content. |\n| `body-prepend` | Custom `body-prepend` content. |\n| `customize-headers` | Custom `customize-headers` content. |\n| `header` | Custom `header` content. |\n| `header-{key}` | Header slot (case matches `columns[].key`). |"
             },
             {
               "id": "events",
               "title": "Events",
-              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `row-click` | `{ row, index }`, `Event` | Row clicked. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double-clicked. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row context menu. |\n| `select-row` / `deselect-row` | `TableItem` | Row selection toggled. |\n| `select-all` | — | Select all on current page. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |"
+              "body": "| Event | Payload | Description |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `filter-change` | `Record<string, unknown> \\| null` | Header filter committed (mirrors `update:filter-model`). |\n| `expand-change` | `{ row, expanded }` | Row expansion changed (detail or tree). |\n| `row-click` | `{ row, index }`, `Event` | Row click. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double click. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row right click. |\n| `select-row` | `TableItem` | Row selected. |\n| `deselect-row` | `TableItem` | Row deselected. |\n| `select-all` | — | All rows of current page selected. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Multiple selection v-model. |\n| `update:page` | `number` | Page v-model. |\n| `update:server-options` | `TableServerOptions` | Server options v-model. |\n| `update:current-row-key` | `string \\| number \\| null` | Current row key v-model. |\n| `update:expanded-row-keys` | `Array<string \\| number>` | Expanded row keys v-model. |\n| `update:filter-model` | `Record<string, unknown> \\| null` | Header filter v-model. |\n| `update:column-widths` | `Record<string, number>` | Column widths v-model. |\n| `update:hidden-columns` | `string[]` | Hidden columns v-model. |\n| `update:column-order` | `string[]` | Column order v-model. |\n| `update:selected-item` | `TableItem \\| null` | Single selection v-model. |"
             },
             {
-              "id": "instance",
-              "title": "Instance",
-              "body": "Pagination, filter, selection, scroll, and expand controls via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sort. |\n| `getCheckboxRecords()` / `setCheckboxRow` / `clearCheckboxRow` / `isCheckedByCheckboxRow` / `isAllCheckboxChecked` | Selection APIs. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll helpers. |\n| `setRowExpand` / `toggleRowExpand` / `clearRowExpand` / … | Detail expand (non-tree). |\n| `setTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / … | Tree expand. |"
+              "id": "instance-api",
+              "title": "Instance API",
+              "body": "Access via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` if empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total row count (server total in server mode). |\n| `maxPaginationNumber` | Maximum page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether on the last / first page. |\n| `nextPage()` / `prevPage()` | Go to next / previous page. |\n| `updatePage(page)` | Go to a specific page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Current rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Update rows-per-page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sorting. |\n| `getCheckboxRecords()` | Currently checked rows. |\n| `setCheckboxRow(rows, checked)` | Set row checked state. |\n| `clearCheckboxRow()` | Clear all checked rows. |\n| `isCheckedByCheckboxRow(row)` | Whether a row is checked. |\n| `isAllCheckboxChecked()` | Whether all rows on the current page are checked. |\n| `getCheckboxIndeterminateRecords()` | Indeterminate (half-checked) rows in tree cascade. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll positioning. |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | Detail expansion (non-tree). |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | Tree node expansion. |"
             },
             {
               "id": "types",
               "title": "Types",
-              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  resizable?: boolean\n  children?: TableColumnDefinition[]\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types)."
+              "body": "<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\nUnified sort config; `field` / `order` describe the current single-column sort, `mode` chooses between internal and external sorting:\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\nMulti-part DOM pass-through; supports class / style / any attrs:\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer pagination/sort options passed to `serverOptions`, paired with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\nSee more at [API Types](/docs/types)."
             }
           ],
-          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, frozen columns, and empty/loading states. Column width supports width / minWidth / fit.\n---\n\n# Table\n\n`MTable` displays structured row data. Define columns with `columns`, pass data with `rows`, and use built-in client-side sort, filter, pagination, and row selection—or switch to server-driven pagination. Header “select all” applies to the current page only.\n\nColumn width rules:\n\n- Columns with `width` use a fixed width\n- Columns without `width` are flexible with a `minWidth` lower bound (default `80`); when `fit` is `true` (default), remaining width is distributed proportionally\n- Horizontal scrolling appears when the total minimum width exceeds the container\n- Prefer `maxHeight` / `tableHeight` when the table body should scroll on its own; when nested under `MLayout` root scroll, fix the table height to avoid stacked scrollbars\n- For full-viewport main lists, use `MPageContent fill` + `MTable fill paginator` (body scrolls; pagination at the bottom). Skip `fill` for embedded or short tables.\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Selection\n\nUse `selection-mode=\"multiple\"` with `v-model:selection`, or `selection-mode=\"single\"` with `v-model:selected-item`.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filter and pagination\n\nUse `search-value` / `filter-options` for client filtering. Enable `paginator` with `v-model:page` and `rows-per-page`.\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Expandable rows\n\nCustomize cells with `render` or `#cell-{key}`. Set `expandable` (or `expandConfig`) and provide the `#expansion` slot. In tree mode, `expandedRowKeys` controls tree nodes and cannot be used for detail expansion at the same time.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Fixed columns\n\nSet `fixed: 'left' | 'right'` on a column (or `fixed: true` for left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```\n\n## Column resize and header filters\n\nSet `resizable` to drag column widths (`v-model:column-widths`). Set `filterable` for a header filter; optional `filters` for checkbox options, otherwise free-text contains. **Clear** resets the draft only; **Confirm** applies to `v-model:filters`.\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```\n\n## Virtual scroll\n\nEnable `virtual` with `maxHeight` / `tableHeight` / `fill` so the body scrolls; dev mode warns if height is missing. Expandable rows (`#expansion` / `expandConfig`) disable virtualization (dev warning when both are set).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```\n\n## Multi-header, footer, and merges\n\nUse column `children` for grouped headers; `show-footer` + `footer-method` for summaries (`footerMethod({ columns, data })` matrix or `#footer` slot); `span-method` for merges.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```\n\n## Empty and loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## Tree table\n\nPass `tree-config` for hierarchical rows: nested `children`, or flat `parentId` with `transform`. Bind expand state with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multi-select, parent/child cascade and indeterminate are on by default (`checkbox-config.check-strictly=false`). Use `checkMethod` to disable specific rows.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```\n\n## Server mode\n\nPass `server-options` with `server-total`, and sync page / page size / sort via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- Removed built-in cell editing: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead\n- Removed `MTreeTable` (including `morya-ui/tree-table`); use `MTable` + `treeConfig`\n- `serverItemsLength` → `serverTotal`\n- `rowsItems` → `pageSizes`\n- Removed `hideHeader`; use `showHeader` (default `true`)\n- Removed `hideRowsPerPage`; use `showRowsPerPage` (default `true`)\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`\n- Events: `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (keep `update:page`)\n- Row interaction: click and dblclick always emit (`row-click` / `row-dblclick`); context menu always `preventDefault`s and emits `row-contextmenu`\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name bound to row data. |\n| `label` | `string` | Column header text. |\n| `width` | `number` | Fixed width in px. |\n| `minWidth` | `number` | Flex column minimum width; default `80`. |\n| `sortable` | `boolean` | Enable sorting. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Freeze column (left freeze supported). |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Tooltip when cell text overflows. |\n| `resizable` | `boolean` | Drag to resize column width. |\n| `filterable` | `boolean` | Show header filter trigger. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Nested columns for multi-level headers. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Flexible columns fill remaining width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Row selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multi-select (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single-select (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server paging/sort options. |\n| `serverTotal` | `number` | `0` | Total row count in server mode. |\n| `paginator` | `boolean` | `false` | Built-in pagination footer. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Page size. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show table header. |\n| `showRowsPerPage` | `boolean` | `true` | Show page-size picker. |\n| `fill` | `boolean` | `false` | Fill remaining parent height (only for full-viewport main lists with `MPageContent fill`). Body scrolls; paginator stays at the bottom. Ignored when `maxHeight` / `tableHeight` is set. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expand (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multi-select options. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single-select options. |\n| `striped` / `bordered` | `boolean` | `false` | Striped rows / cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row. |\n| `loading` / `emptyText` / `emptyDescription` | — | — | Loading and empty states. |\n| `maxHeight` | `number \\| null` | `null` | Scrollable body max height. |\n| `rowKey` | `string` | `'id'` | Stable row key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Table density (`large`/`small` also adjust cell padding). |\n| `pt` | [RootPassThrough](/docs/types#RootPassThrough) `{ root? }` | — | Pass-through; see [Styling & attrs](/docs/attrs). |\n\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell for column `{key}`; scope `{ row, value, column }` (use this for custom editors). |\n| `body-cell` | Any cell; scope `{ row, column, value }`. |\n| `expansion` | Expanded row; scope `{ row }`. |\n| `empty` / `loading` | Empty and loading placeholders. |\n| `header-{key}` | Header slot (exact key case). |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `row-click` | `{ row, index }`, `Event` | Row clicked. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double-clicked. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row context menu. |\n| `select-row` / `deselect-row` | `TableItem` | Row selection toggled. |\n| `select-all` | — | Select all on current page. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Selection v-model. |\n| `update:page` | `number` | Page v-model. |\n\n## Instance\n\nPagination, filter, selection, scroll, and expand controls via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` when empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total item count (server total in server mode). |\n| `maxPaginationNumber` | Last page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether the current page is the last / first. |\n| `nextPage()` / `prevPage()` | Go to the next / previous page. |\n| `updatePage(page)` | Jump to a page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Active rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Change rows per page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sort. |\n| `getCheckboxRecords()` / `setCheckboxRow` / `clearCheckboxRow` / `isCheckedByCheckboxRow` / `isAllCheckboxChecked` | Selection APIs. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll helpers. |\n| `setRowExpand` / `toggleRowExpand` / `clearRowExpand` / … | Detail expand (non-tree). |\n| `setTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / … | Tree expand. |\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\nSee source `types.ts` for the full definition.\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  resizable?: boolean\n  children?: TableColumnDefinition[]\n  showOverflowTooltip?: boolean\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer-side paging/sorting payload for `serverOptions`, with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\n`TableItem` is `Record<string, unknown>`. See also [API types](/docs/types).\n"
+          "markdown": "---\ntitle: Table\ncategory: 03 / DATA\ndescription: Data table with sorting, filtering, selection, pagination, fixed columns, column drag, column settings, skeleton loading and virtual scrolling. Column widths support width / minWidth / fit.\n---\n\n# Table\n\n`MTable` renders structured row data. Pass `columns` for column definitions and `rows` for data; built-in client-side sorting, filtering, pagination and row selection are included, with a server-side mode for remote sources. The header \"select all\" only applies to the current page.\n\nColumn width rules:\n\n- Columns with `width` are fixed.\n- Columns without `width` flex from `minWidth` (default `80`); when `fit` is `true` (default), remaining space is distributed proportionally.\n- Total minimum width beyond the container triggers horizontal scrolling.\n- Use `maxHeight` / `tableHeight` for body scrolling; with `MLayout` root scrolling prefer a fixed table height to avoid double scrollbars.\n- Full-viewport lists: `MPageContent fill` + `MTable fill paginator` (body scrolls, paginator pinned). Embedded tables and short pages don't need `fill`.\n\n## Import\n\n```ts\nimport type { TableColumnDefinition, TableItem, TableSortConfig, TablePassThrough } from 'morya-ui'\nimport { MTable, MTag } from 'morya-ui'\n```\n\n## Basic\n\n```vue preview src=\"./demos/Basic.en.vue\"\n```\n\n## Row Selection\n\nMultiple selection uses `selection-mode=\"multiple\"` with `v-model:selection`; single selection uses `selection-mode=\"single\"` with `v-model:selected-item`. Header \"select all\" only applies to the current page.\n\n```vue preview src=\"./demos/Selection.en.vue\"\n```\n\n## Filtering & Pagination\n\nClient-side filtering via `search-value` / `filter-options`; enable `paginator` with `v-model:page` and `rows-per-page` (controlled).\n\n```vue preview src=\"./demos/FilterAndPagination.en.vue\"\n```\n\n## Fixed Columns\n\nSet `fixed: 'left' | 'right'` in the column definition (`fixed: true` equals left).\n\n```vue preview src=\"./demos/FixedColumns.en.vue\"\n```\n\n## Expandable Rows & Cell Rendering\n\nCustomize cells via `render` or `#cell-{key}`. Enable row details with `expandable` (or `expandConfig`) and provide content via `#expansion`. In tree mode `expandedRowKeys` is reserved for tree nodes and cannot also drive detail expansion.\n\n```vue preview src=\"./demos/ExpandableRows.en.vue\"\n```\n\n## Sorting (sortConfig)\n\nUse `sort-config` to configure sorting in one place: `{ field, order, multiple, must, mode }`. With `mode: 'client'` (default) the table sorts the current page itself; with `mode: 'emit'` only the `sort-change` event is emitted and the data is owned by the caller (useful for server-side sorting). Set `multiple: true` for multi-column sort and `must: true` to prevent clearing.\n\n```vue preview src=\"./demos/Sorting.en.vue\"\n```\n\n## Column Resizing & Header Filters\n\nSet `resizable` to drag column widths (`v-model:column-widths`); `filterable` adds a header filter — column `filters` becomes a multi-select, otherwise a text-contains filter. **Clear** resets the draft, **OK** commits to `v-model:filter-model` (legacy `v-model:filters` still supported).\n\n```vue preview src=\"./demos/ResizeAndFilter.en.vue\"\n```\n\n## Column Settings Panel\n\nEnable `column-setting` to show a settings button in the header corner. The popover lets users toggle column visibility, synced via `v-model:hidden-columns`. Panel copy follows `MLocale`.\n\n```vue preview src=\"./demos/ColumnSetting.en.vue\"\n```\n\n## Column Drag\n\nEnable `column-drag` to reorder leaf columns by dragging header cells. Order is synced through `v-model:column-order`. Drag-and-drop stays within a single header level and never breaks multi-level headers.\n\n```vue preview src=\"./demos/ColumnDrag.en.vue\"\n```\n\n## Skeleton Loading\n\nEnable `skeleton` for a skeleton loading state instead of a full-overlay spinner. `skeleton-rows` controls the number of placeholder rows (default `5`). Skeleton previews preserve the layout and feel much faster.\n\n```vue preview src=\"./demos/Skeleton.en.vue\"\n```\n\n## Virtual Scrolling\n\nEnable `virtual` and provide one of `maxHeight` / `tableHeight` / `fill` to form a scroll viewport; without one, the dev build warns. Expandable rows / `#expansion` / `expandConfig` are mutually exclusive with virtualization and fall back to plain rendering (with a dev warning).\n\n```vue preview src=\"./demos/VirtualScroll.en.vue\"\n```\n\n## Dynamic Row Height Virtual Scrolling\n\nBy default virtual scrolling assumes all rows have equal height (estimated by `virtual-row-height`). If your rows vary in height due to content, enable `virtual-dynamic-row-height`: the table measures each row with `ResizeObserver`, caches the result, and uses prefix sums + binary search for O(log n) positioning, keeping long lists smooth.\n\n```vue preview src=\"./demos/DynamicRowHeight.en.vue\"\n```\n\n## Multi-level Headers, Footer & Span\n\nColumns support `children` for multi-level headers; `show-footer` + `footer-method` renders totals (`footerMethod({ columns, data })` returns a row matrix, or use `#footer` for full customization); `span-method` merges cells.\n\n```vue preview src=\"./demos/GridFeatures.en.vue\"\n```\n\n## Empty & Loading\n\n```vue preview src=\"./demos/EmptyAndLoading.en.vue\"\n```\n\n## Tree Table\n\nPass `tree-config` to enable tree mode: nested `children`, or `transform` + `parentId` for flat data. Expansion state is bound with `v-model:expanded-row-keys`. Supports `expandAll` / `expandRowKeys`, `accordion`, `trigger`, `toggleMethod`, and lazy loading via `lazy` + `loadMethod`.\n\nInstance methods: `setTreeExpand`, `setAllTreeExpand`, `toggleTreeExpand`, `isTreeExpandByRow`, `getTreeExpandRecords`, `clearTreeExpand`.\n\nWith multiple selection, parent-child cascading with half-check is enabled by default (`checkbox-config.check-strictly=false`); use `checkMethod` to disable a row's checkbox.\n\n```vue preview src=\"./demos/Tree.en.vue\"\n```\n\n## Server Mode\n\nPass `server-options` and `server-total`, syncing page, rows-per-page and sort fields via `v-model:server-options`.\n\n```vue preview src=\"./demos/Demo7.vue\"\n```\n\n## Breaking changes\n\n- Built-in cell editing removed: `editConfig`, column `editable`, `edit-change`, `#edit-{key}`; use `#cell-{key}` / `render` instead.\n- `MTreeTable` removed (including `morya-ui/tree-table`); use `MTable` + `treeConfig`.\n- `serverItemsLength` → `serverTotal`; `rowsItems` → `pageSizes`.\n- `hideHeader` removed; use `showHeader` (default `true`).\n- `hideRowsPerPage` removed; use `showRowsPerPage` (default `true`).\n- Removed: `clickEventType`, `rowsPerPageMessage`, `rowsOfPageSeparatorMessage`, `preventContextMenuRow`, `tableNodeId`.\n- Events: `sortChange` → `sort-change`; `expandRow` → `expand-change`; `contextmenuRow` → `row-contextmenu`; `selectRow` / `deselectRow` / `selectAll` → `select-row` / `deselect-row` / `select-all`.\n- New event: `filter-change` (header filter commit).\n- Removed events: `updatePageItems`, `updateTotalItems`, `page` (`update:page` kept).\n- Row interactions: always support single / double click (`row-click` / `row-dblclick`); right-click always `preventDefault` and emits `row-contextmenu`.\n- Sorting props merged: `sortField` / `sortOrder` / `multiSort` / `mustSort` / `sortMode` still work, but new code should use `sortConfig: TableSortConfig`.\n- Filter v-model: `v-model:filters` still works; new code should use `v-model:filter-model`.\n\n## TableColumnDefinition\n\n| Field | Type | Description |\n| --- | --- | --- |\n| `key` | `string` | Field name on the row. |\n| `label` | `string` | Header text. |\n| `width` | `number` | Fixed column width (px). |\n| `minWidth` | `number` | Flex column minimum width, default `80`. |\n| `sortable` | `boolean` | Sortable. |\n| `fixed` | `boolean \\| 'left' \\| 'right'` | Fixed column; `true` equals `'left'`. |\n| `align` | `'start' \\| 'center' \\| 'end'` | Cell alignment. |\n| `render` | `(row) => unknown` | Custom cell renderer. |\n| `showOverflowTooltip` | `boolean` | Show tooltip on overflow. |\n| `resizable` | `boolean` | Allow drag resizing. |\n| `filterable` | `boolean` | Show header filter. |\n| `filters` | `TableColumnFilter[]` | Header filter options; omit for text filter. |\n| `children` | `TableColumnDefinition[]` | Multi-level sub-columns. |\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `columns` | `TableColumnDefinition[]` | — | Column definitions. |\n| `rows` | `TableItem[]` | — | Row data. |\n| `fit` | `boolean` | `true` | Stretch flex columns to fill width. |\n| `selectionMode` | `'single' \\| 'multiple' \\| null` | `null` | Selection mode. |\n| `selection` | `TableItem[] \\| null` | `null` | Multiple selection (`v-model:selection`). |\n| `selectedItem` | `TableItem \\| null` | `null` | Single selection (`v-model:selected-item`). |\n| `serverOptions` | `TableServerOptions \\| null` | `null` | Server pagination/sort options. |\n| `serverTotal` | `number` | `0` | Server total count. |\n| `paginator` | `boolean` | `false` | Show built-in paginator. |\n| `page` | `number` | `1` | Current page (`v-model:page`). |\n| `rowsPerPage` | `number` | `25` | Rows per page. |\n| `pageSizes` | `number[]` | `[25, 50, 100]` | Page size options. |\n| `showHeader` | `boolean` | `true` | Show header. |\n| `showRowsPerPage` | `boolean` | `true` | Show rows-per-page selector. |\n| `fill` | `boolean` | `false` | Fill parent height (with `MPageContent fill`); body scrolls, paginator pinned. Ignored when `maxHeight` / `tableHeight` is set. |\n| `columnWidths` | `Record<string, number> \\| null` | `null` | Column widths (`v-model:column-widths`). |\n| `virtual` | `boolean` | `false` | Row virtualization (requires a height; skipped with expand rows). |\n| `virtualRowHeight` | `number` | `40` | Estimated virtual row height. |\n| `virtualDynamicRowHeight` | `boolean` | `false` | Dynamic row-height virtualization (measured & cached via `ResizeObserver`). |\n| `virtualOverscan` | `number` | `4` | Extra rows rendered above/below the viewport to avoid flicker. |\n| `hiddenColumns` | `string[] \\| null` | `null` | Hidden column keys (`v-model:hidden-columns`). |\n| `columnOrder` | `string[] \\| null` | `null` | Leaf column order (`v-model:column-order`). |\n| `columnSetting` | `boolean` | `false` | Show column settings button (visibility toggle). |\n| `columnDrag` | `boolean` | `false` | Header drag reordering. |\n| `skeleton` | `boolean` | `false` | Skeleton loading state. |\n| `skeletonRows` | `number` | `5` | Skeleton row count. |\n| `showFooter` | `boolean` | `false` | Show footer. |\n| `footerMethod` | `TableFooterMethod \\| null` | `null` | Footer data. |\n| `spanMethod` | `TableSpanMethod \\| null` | `null` | Cell span. |\n| `treeConfig` | `TableTreeConfig \\| null` | `null` | Tree rows. |\n| `expandConfig` | `TableExpandConfig \\| null` | `null` | Detail expansion (mutually exclusive with tree). |\n| `checkboxConfig` | `TableCheckboxConfig \\| null` | `null` | Multiple selection: cascade / `checkMethod` / `checkRowKeys` / `trigger` / `reserve`. |\n| `radioConfig` | `TableRadioConfig \\| null` | `null` | Single selection: `strict` / `checkMethod` / `trigger`. |\n| `expandable` | `boolean` | `false` | Show expand column (also enabled by `#expansion` or `expandConfig`). |\n| `striped` | `boolean` | `false` | Zebra rows. |\n| `bordered` | `boolean` | `false` | Cell borders. |\n| `highlightCurrent` | `boolean` | `false` | Highlight current row; pair with `v-model:current-row-key`. |\n| `rowHover` | `boolean` | `true` | Row hover highlight. |\n| `sortConfig` | `TableSortConfig \\| null` | `null` | Unified sorting config `{ field, order, multiple, must, mode }`. |\n| `sortField` | `string \\| null` | `null` | (legacy) Single-field sort. Prefer `sortConfig`. |\n| `sortOrder` | `'asc' \\| 'desc' \\| null` | `null` | (legacy) Sort direction. Prefer `sortConfig`. |\n| `multiSort` | `boolean` | `false` | (legacy) Multi-column sort. Prefer `sortConfig.multiple`. |\n| `mustSort` | `boolean` | `false` | (legacy) Disallow clearing sort. Prefer `sortConfig.must`. |\n| `sortMode` | `'client' \\| 'emit'` | `'client'` | (legacy) Sort mode. Prefer `sortConfig.mode`. |\n| `searchField` / `searchValue` | — | — | Client-side search. |\n| `filterOptions` | `TableFilterOption[]` | `null` | Structured filter criteria. |\n| `filterModel` | `Record<string, unknown> \\| null` | `null` | Header filter v-model (`update:filter-model`). |\n| `filters` | `Record<string, unknown> \\| null` | `null` | (legacy) Old filter v-model name. |\n| `loading` | `boolean` | `false` | Loading state. |\n| `emptyText` | `string` | — | Empty text. |\n| `emptyDescription` | `string` | — | Empty description. |\n| `maxHeight` | `number \\| null` | `null` | Max height, scrolls beyond. |\n| `showOverflowTooltip` | `boolean` | `false` | Global overflow tooltip. |\n| `rowKey` | `string` | `'id'` | Row unique key field. |\n| `size` | `'small' \\| 'medium' \\| 'large' \\| 'sm' \\| 'md' \\| 'lg'` | — | Density (`large`/`small` adjust cell padding). |\n| `ariaLabel` | `string` | — | — |\n| `bodyExpandRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyItemClassName` | `TableBodyItemClassName` | — | — |\n| `bodyRowClassName` | `TableBodyRowClassName` | — | — |\n| `bodyTextDirection` | `TableTextDirection` | — | — |\n| `checkboxColumnWidth` | `number \\| null` | — | — |\n| `clickRowToExpand` | `boolean` | — | — |\n| `currentRowKey` | `string \\| number \\| null` | — | — |\n| `expandColumnWidth` | `number` | — | — |\n| `expandedRowKeys` | `Array<string \\| number>` | — | — |\n| `fixedCheckbox` | `boolean` | — | — |\n| `fixedExpand` | `boolean` | — | — |\n| `fixedHeader` | `boolean` | — | — |\n| `fixedIndex` | `boolean` | — | — |\n| `headerClassName` | `string` | — | — |\n| `headerItemClassName` | `TableHeaderItemClassName` | — | — |\n| `headerTextDirection` | `TableTextDirection` | — | — |\n| `indexColumnWidth` | `number` | — | — |\n| `showIndex` | `boolean` | — | — |\n| `showIndexSymbol` | `string` | — | — |\n| `tableClassName` | `string` | — | — |\n| `tableHeight` | `number \\| null` | — | — |\n| `tableMinHeight` | `number` | — | — |\n| `pt` | `TablePassThrough` | — | Multi-part DOM pass-through: `{ root, scrollbar, thead, tbody, tfoot, pagination, emptyMessage }`. |\n\n## Slots\n\n| Slot | Description |\n| --- | --- |\n| `cell-{key}` | Cell of column `{key}`, scope `{ row, value, column }` (use it to build editors). |\n| `footer` | Custom footer. |\n| `body-cell` | Any cell, scope `{ row, column, value }`. |\n| `expansion` | Expanded row content, scope `{ row }`. |\n| `empty` | Custom empty state. |\n| `loading` | Custom loading state (ignored when `skeleton` is true). |\n| `pagination` | Custom pagination area. |\n| `body` | Custom `body` content. |\n| `body-append` | Custom `body-append` content. |\n| `body-prepend` | Custom `body-prepend` content. |\n| `customize-headers` | Custom `customize-headers` content. |\n| `header` | Custom `header` content. |\n| `header-{key}` | Header slot (case matches `columns[].key`). |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `sort-change` | `{ sortField?, sortOrder? }` | Sort changed. |\n| `filter-change` | `Record<string, unknown> \\| null` | Header filter committed (mirrors `update:filter-model`). |\n| `expand-change` | `{ row, expanded }` | Row expansion changed (detail or tree). |\n| `row-click` | `{ row, index }`, `Event` | Row click. |\n| `row-dblclick` | `{ row, index }`, `Event` | Row double click. |\n| `row-contextmenu` | `item`, `MouseEvent` | Row right click. |\n| `select-row` | `TableItem` | Row selected. |\n| `deselect-row` | `TableItem` | Row deselected. |\n| `select-all` | — | All rows of current page selected. |\n| `current-change` | `row \\| null, oldRow \\| null` | Current row changed. |\n| `update:selection` | `TableItem[]` | Multiple selection v-model. |\n| `update:page` | `number` | Page v-model. |\n| `update:server-options` | `TableServerOptions` | Server options v-model. |\n| `update:current-row-key` | `string \\| number \\| null` | Current row key v-model. |\n| `update:expanded-row-keys` | `Array<string \\| number>` | Expanded row keys v-model. |\n| `update:filter-model` | `Record<string, unknown> \\| null` | Header filter v-model. |\n| `update:column-widths` | `Record<string, number>` | Column widths v-model. |\n| `update:hidden-columns` | `string[]` | Hidden columns v-model. |\n| `update:column-order` | `string[]` | Column order v-model. |\n| `update:selected-item` | `TableItem \\| null` | Single selection v-model. |\n\n## Instance API\n\nAccess via `ref`:\n\n| Method / Property | Description |\n| --- | --- |\n| `currentPageFirstIndex` | Index of the first record on the current page (`-1` if empty). |\n| `currentPageLastIndex` | Index of the last record on the current page. |\n| `clientItemsLength` | Total row count (server total in server mode). |\n| `maxPaginationNumber` | Maximum page number. |\n| `currentPaginationNumber` | Current page number. |\n| `isLastPage` / `isFirstPage` | Whether on the last / first page. |\n| `nextPage()` / `prevPage()` | Go to next / previous page. |\n| `updatePage(page)` | Go to a specific page. |\n| `rowsPerPageOptions` | Rows-per-page options. |\n| `rowsPerPageActiveOption` | Current rows-per-page value. |\n| `updateRowsPerPageActiveOption(n)` | Update rows-per-page. |\n| `setFilters(filters)` / `clearFilter()` | Set / clear filters. |\n| `setColumnWidths(widths)` | Set column widths (same as `v-model:column-widths`). |\n| `setHiddenColumns(keys)` | Set hidden column keys (same as `v-model:hidden-columns`). |\n| `setColumnOrder(keys)` | Set leaf column order (same as `v-model:column-order`). |\n| `clearSort()` | Clear sorting. |\n| `getCheckboxRecords()` | Currently checked rows. |\n| `setCheckboxRow(rows, checked)` | Set row checked state. |\n| `clearCheckboxRow()` | Clear all checked rows. |\n| `isCheckedByCheckboxRow(row)` | Whether a row is checked. |\n| `isAllCheckboxChecked()` | Whether all rows on the current page are checked. |\n| `getCheckboxIndeterminateRecords()` | Indeterminate (half-checked) rows in tree cascade. |\n| `scrollTo(...)` / `scrollToRow(row)` | Scroll positioning. |\n| `setRowExpand` / `setAllRowExpand` / `toggleRowExpand` / `clearRowExpand` / `isRowExpandByRow` / `getRowExpandRecords` | Detail expansion (non-tree). |\n| `setTreeExpand` / `setAllTreeExpand` / `toggleTreeExpand` / `clearTreeExpand` / `isTreeExpandByRow` / `getTreeExpandRecords` | Tree node expansion. |\n\n## Types\n\n<h4 id=\"TableItem\">TableItem</h4>\n\n```ts\ntype TableItem = Record<string, unknown>\n```\n\n<h4 id=\"TableSortConfig\">TableSortConfig</h4>\n\nUnified sort config; `field` / `order` describe the current single-column sort, `mode` chooses between internal and external sorting:\n\n```ts\ninterface TableSortConfig {\n  field?: string | null\n  order?: 'asc' | 'desc' | null\n  multiple?: boolean\n  must?: boolean\n  mode?: 'client' | 'emit'\n}\n```\n\n<h4 id=\"TablePassThrough\">TablePassThrough</h4>\n\nMulti-part DOM pass-through; supports class / style / any attrs:\n\n```ts\ninterface TablePassThrough {\n  root?: Record<string, unknown>\n  scrollbar?: Record<string, unknown>\n  thead?: Record<string, unknown>\n  tbody?: Record<string, unknown>\n  tfoot?: Record<string, unknown>\n  pagination?: Record<string, unknown>\n  emptyMessage?: Record<string, unknown>\n}\n```\n\n<h4 id=\"TableTextDirection\">TableTextDirection</h4>\n\n```ts\ntype TableTextDirection = 'left' | 'center' | 'right'\n```\n\n<h4 id=\"TableFilterOption\">TableFilterOption</h4>\n\n```ts\ntype TableFilterOption =\n  | { field: string; comparison: 'between'; criteria: [number, number] }\n  | { field: string; comparison: '=' | '!='; criteria: number | string }\n  | { field: string; comparison: '>' | '>=' | '<' | '<='; criteria: number }\n  | { field: number | string; comparison: 'in'; criteria: number[] | string[] }\n  | { field: string; comparison: (value: unknown, criteria: string) => boolean; criteria: string }\n```\n\n<h4 id=\"TableHeaderItemClassName\">TableHeaderItemClassName</h4>\n\n```ts\ntype TableHeaderItemClassName = string | ((header: TableHeader, columnNumber: number) => string)\n```\n\n<h4 id=\"TableBodyRowClassName\">TableBodyRowClassName</h4>\n\n```ts\ntype TableBodyRowClassName = string | ((item: TableItem, rowNumber: number) => string)\n```\n\n<h4 id=\"TableBodyItemClassName\">TableBodyItemClassName</h4>\n\n```ts\ntype TableBodyItemClassName = string | ((column: string, rowNumber: number) => string)\n```\n\n<h4 id=\"TableTreeConfig\">TableTreeConfig</h4>\n\n```ts\ninterface TableTreeConfig {\n  childrenField?: string // default 'children'\n  indent?: number // default 16\n  expandAll?: boolean\n  accordion?: boolean\n  trigger?: 'default' | 'row'\n  lazy?: boolean\n  hasChildField?: string // default 'hasChild'\n  loadMethod?: (row: TableItem) => Promise<TableItem[]> | TableItem[]\n  transform?: boolean // flat parentId → tree\n  rowField?: string\n  parentField?: string // default 'parentId'\n  treeNode?: string // column key for toggler; default first column\n  showLine?: boolean\n}\n```\n\n<h4 id=\"TableColumnDefinition\">TableColumnDefinition</h4>\n\nColumn definition passed to `columns`:\n\n```ts\ninterface TableColumnDefinition {\n  key: string\n  label: string\n  width?: number\n  minWidth?: number\n  sortable?: boolean\n  fixed?: boolean | 'left' | 'right'\n  align?: 'start' | 'center' | 'end'\n  render?: (row: TableItem) => unknown\n  showOverflowTooltip?: boolean\n  resizable?: boolean\n  filterable?: boolean\n  filters?: TableColumnFilter[]\n  children?: TableColumnDefinition[]\n}\n```\n\n<h4 id=\"TableServerOptions\">TableServerOptions</h4>\n\nServer pagination/sort options passed to `serverOptions`, paired with `serverTotal`:\n\n```ts\ninterface TableServerOptions {\n  page: number\n  rowsPerPage: number\n  sortBy?: string | string[]\n  sortType?: 'asc' | 'desc' | ('asc' | 'desc')[]\n}\n```\n\nSee more at [API Types](/docs/types).\n"
         }
       }
     },
@@ -31855,7 +32632,7 @@
         "zh-CN": {
           "title": "快速上手",
           "description": "安装依赖、引入样式，并渲染第一个组件。",
-          "markdown": "---\ntitle: 快速上手\norder: 2\ndescription: 安装依赖、引入样式，并渲染第一个组件。\n---\n\n# 快速上手\n\n> 在线文档：[morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · 源码：[GitHub](https://github.com/morya-space/morya-ui) · npm：[`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## 安装\n\n**在应用项目中（npm / pnpm / yarn）：**\n\n```bash\npnpm add morya-ui\n```\n\n也可以用：\n\n```bash\nnpx @morya-ui/setup app\n```\n\n会安装依赖，并尽量在入口注入样式。更多命令与选项见 [一键接入](/docs/setup)。需要 Vue 3（推荐 3.5 及以上）。主题 token、亮暗切换与动效 API 均包含在 `morya-ui` 中。Agent Skill / MCP 见 [AI 接入](/docs/ai-setup)。\n\n## 选择使用方式\n\n本库同时支持**全量**与**按需**两种消费方式，按项目需求任选其一（同一应用内建议保持一致）。\n\n| | 全量 | 按需 |\n| --- | --- | --- |\n| 典型场景 | 组件用得较多、希望快速上手 | 打包体积敏感、只用少量组件 |\n| 组件来源 | `app.use(MoryaUI)` 或 `morya-ui` 按名导入 | `morya-ui/button` 等子路径，或 Vite 自动解析 |\n| 样式 | 入口引入 `morya-ui/styles.css` | 子路径自动带入（含 theme + 依赖组件样式） |\n| JS 体积 | 全量注册会打入完整组件；按名导入可 tree-shake | 仅打入用到的组件及其依赖 |\n\n## 全量用法\n\n### 1. 插件注册（推荐的全量方式）\n\n在应用入口引入**全量样式**，并通过插件一次注册所有组件：\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\n模板中可直接使用 `<MButton>`、`<MInput>` 等，无需逐个 import。\n\n### 2. 按名导入 + 全量样式\n\n不注册插件、在 SFC 中按需写 import，JS 可由构建工具 tree-shake，但样式仍需全量 CSS：\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n    <MInput v-model=\"name\" label=\"名称\" placeholder=\"输入名称\" />\n    <MButton label=\"提交\" @click=\"() => undefined\" />\n  </div>\n</template>\n```\n\n## 按需用法\n\n### 1. 子路径导入\n\n从 kebab-case 子路径导入（如 `button`、`input-password`、`tree-select`）。会带上组件 JS、类型声明、内部依赖与对应样式，**无需**再引 `morya-ui/styles.css`。Props 等类型从同一路径导入，例如 `import type { ButtonProps } from 'morya-ui/button'`。\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\n仅要样式时：\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. 自动按需（Vite）\n\n安装 `unplugin-vue-components` 后，在 `vite.config.ts` 中配置解析器，模板里可直接写 `<MButton>`：\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    Components({\n      dts: 'src/components.d.ts',\n      resolvers: [MoryaUIResolver()],\n    }),\n  ],\n})\n```\n\n`dts` 会写出组件声明，编辑器和 `vue-tsc` 据此识别模板里的组件；该文件需落在 `tsconfig.json` 的 `include` 中。按需模式下，`createMoryaUI({ components: false })` 仍可注入全局配置而不注册组件。\n\n## 可选：应用级全局配置\n\n`createMoryaUI` 会写入全局默认值，并默认注册全部组件：\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      zIndex: 1100,\n    }),\n  )\n  .mount('#app')\n```\n\n仅配置、不注册组件时使用 `components: false`。\n\n更多说明见 [全局配置](/docs/config)。\n\n## 主题 API\n\n亮暗切换等能力从同一包引入：\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\n详见 [主题](/docs/theme)。\n\n## 启动本仓库文档站\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# 构建静态文档站\npnpm --filter morya-ui build:docs\n```\n",
+          "markdown": "---\ntitle: 快速上手\norder: 2\ndescription: 安装依赖、引入样式，并渲染第一个组件。\n---\n\n# 快速上手\n\n> 在线文档：[morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · 源码：[GitHub](https://github.com/morya-space/morya-ui) · npm：[`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## 安装\n\n**从零创建新项目（推荐）：**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\n脚手架 + 安装 + 完整接入一步到位。详见 [一键接入](/docs/setup)。\n\n**在已有应用项目中手动安装（npm / pnpm / yarn）：**\n\n```bash\npnpm add morya-ui\n```\n\n也可以用：\n\n```bash\nnpx @morya-ui/setup app\n```\n\n会安装依赖，并尽量在入口注入样式。更多命令与选项见 [一键接入](/docs/setup)。需要 Vue 3（推荐 3.5 及以上）。主题 token、亮暗切换与动效 API 均包含在 `morya-ui` 中。Agent Skill / MCP 见 [AI 接入](/docs/ai-setup)。\n\n## 选择使用方式\n\n本库同时支持**全量**与**按需**两种消费方式，按项目需求任选其一（同一应用内建议保持一致）。\n\n| | 全量 | 按需 |\n| --- | --- | --- |\n| 典型场景 | 组件用得较多、希望快速上手 | 打包体积敏感、只用少量组件 |\n| 组件来源 | `app.use(MoryaUI)` 或 `morya-ui` 按名导入 | `morya-ui/button` 等子路径，或 Vite 自动解析 |\n| 样式 | 入口引入 `morya-ui/styles.css` | 子路径自动带入（含 theme + 依赖组件样式） |\n| JS 体积 | 全量注册会打入完整组件；按名导入可 tree-shake | 仅打入用到的组件及其依赖 |\n\n## 全量用法\n\n### 1. 插件注册（推荐的全量方式）\n\n在应用入口引入**全量样式**，并通过插件一次注册所有组件：\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\n模板中可直接使用 `<MButton>`、`<MInput>` 等，无需逐个 import。\n\n### 2. 按名导入 + 全量样式\n\n不注册插件、在 SFC 中按需写 import，JS 可由构建工具 tree-shake，但样式仍需全量 CSS：\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n    <MInput v-model=\"name\" label=\"名称\" placeholder=\"输入名称\" />\n    <MButton label=\"提交\" @click=\"() => undefined\" />\n  </div>\n</template>\n```\n\n## 按需用法\n\n### 1. 子路径导入\n\n从 kebab-case 子路径导入（如 `button`、`input-password`、`tree-select`）。会带上组件 JS、类型声明、内部依赖与对应样式，**无需**再引 `morya-ui/styles.css`。Props 等类型从同一路径导入，例如 `import type { ButtonProps } from 'morya-ui/button'`。\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\n仅要样式时：\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. 自动按需（Vite）\n\n安装 `unplugin-vue-components` 后，在 `vite.config.ts` 中配置解析器，模板里可直接写 `<MButton>`：\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    Components({\n      dts: 'src/components.d.ts',\n      resolvers: [MoryaUIResolver()],\n    }),\n  ],\n})\n```\n\n`dts` 会写出组件声明，编辑器和 `vue-tsc` 据此识别模板里的组件；该文件需落在 `tsconfig.json` 的 `include` 中。按需模式下，`createMoryaUI({ components: false })` 仍可注入全局配置而不注册组件。\n\n## 可选：应用级全局配置\n\n`createMoryaUI` 会写入全局默认值，并默认注册全部组件：\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      zIndex: 1100,\n    }),\n  )\n  .mount('#app')\n```\n\n仅配置、不注册组件时使用 `components: false`。\n\n更多说明见 [全局配置](/docs/config)。\n\n## 主题 API\n\n亮暗切换等能力从同一包引入：\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\n详见 [主题](/docs/theme)。\n\n## 启动本仓库文档站\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# 构建静态文档站\npnpm --filter morya-ui build:docs\n```\n",
           "sections": [
             {
               "title": "",
@@ -31865,7 +32642,7 @@
             {
               "title": "安装",
               "id": "安装",
-              "body": "**在应用项目中（npm / pnpm / yarn）：**\n\n```bash\npnpm add morya-ui\n```\n\n也可以用：\n\n```bash\nnpx @morya-ui/setup app\n```\n\n会安装依赖，并尽量在入口注入样式。更多命令与选项见 [一键接入](/docs/setup)。需要 Vue 3（推荐 3.5 及以上）。主题 token、亮暗切换与动效 API 均包含在 `morya-ui` 中。Agent Skill / MCP 见 [AI 接入](/docs/ai-setup)。"
+              "body": "**从零创建新项目（推荐）：**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\n脚手架 + 安装 + 完整接入一步到位。详见 [一键接入](/docs/setup)。\n\n**在已有应用项目中手动安装（npm / pnpm / yarn）：**\n\n```bash\npnpm add morya-ui\n```\n\n也可以用：\n\n```bash\nnpx @morya-ui/setup app\n```\n\n会安装依赖，并尽量在入口注入样式。更多命令与选项见 [一键接入](/docs/setup)。需要 Vue 3（推荐 3.5 及以上）。主题 token、亮暗切换与动效 API 均包含在 `morya-ui` 中。Agent Skill / MCP 见 [AI 接入](/docs/ai-setup)。"
             },
             {
               "title": "选择使用方式",
@@ -31902,7 +32679,7 @@
         "en-US": {
           "title": "Quick start",
           "description": "Install the package, import styles, and render the first component.",
-          "markdown": "---\ntitle: Quick start\norder: 2\ndescription: Install the package, import styles, and render the first component.\n---\n\n# Quick start\n\n> Live docs: [morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · Source: [GitHub](https://github.com/morya-space/morya-ui) · npm: [`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## Install\n\n**In an application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`.\n\n## Choose an import mode\n\nThe library supports **full** and **on-demand** usage. Pick one per app (stay consistent within a project).\n\n| | Full | On-demand |\n| --- | --- | --- |\n| Best for | Many components, fastest setup | Bundle size, few components |\n| Components | `app.use(MoryaUI)` or named imports from `morya-ui` | `morya-ui/button` subpaths, or Vite auto-resolver |\n| Styles | Import `morya-ui/styles.css` at entry | Bundled with subpath imports (theme + deps) |\n| JS size | Full plugin bundles all components; named imports tree-shake | Only used components and their deps |\n\n## Full usage\n\n### 1. Plugin registration (recommended full mode)\n\nImport the **full stylesheet** and register all components once:\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\nTemplates can use `<MButton>`, `<MInput>`, etc. without per-file imports.\n\n### 2. Named imports + full CSS\n\nSkip the plugin; import components in SFCs. JS can tree-shake, but styles still need the full CSS file:\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n    <MInput v-model=\"name\" label=\"Name\" placeholder=\"Enter a name\" />\n    <MButton label=\"Submit\" @click=\"() => undefined\" />\n  </div>\n</template>\n```\n\n## On-demand usage\n\n### 1. Subpath imports\n\nImport from kebab-case subpaths (e.g. `button`, `input-password`, `tree-select`). Each entry bundles component JS, type declarations, internal dependencies, and styles — **no** `morya-ui/styles.css` required. Prop types come from the same path, for example `import type { ButtonProps } from 'morya-ui/button'`.\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\nStyles only:\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. Auto on-demand (Vite)\n\nWith `unplugin-vue-components`, add the resolver so templates can use `<MButton>` without manual imports:\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    Components({\n      dts: 'src/components.d.ts',\n      resolvers: [MoryaUIResolver()],\n    }),\n  ],\n})\n```\n\n`dts` writes component declarations so the editor and `vue-tsc` can resolve components used in templates. That file must be covered by `include` in `tsconfig.json`. In on-demand mode, `createMoryaUI({ components: false })` still applies global config without registering components.\n\n## Optional: app-level defaults\n\n`createMoryaUI` applies global defaults and registers all components by default:\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      zIndex: 1100,\n    }),\n  )\n  .mount('#app')\n```\n\nUse `components: false` for config-only install.\n\nSee [Configuration](/docs/config) for details.\n\n## Theme API\n\nColor-mode helpers come from the same package:\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\nSee [Theme](/docs/theme).\n\n## Run this docs site\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# Build the static docs site\npnpm --filter morya-ui build:docs\n```\n",
+          "markdown": "---\ntitle: Quick start\norder: 2\ndescription: Install the package, import styles, and render the first component.\n---\n\n# Quick start\n\n> Live docs: [morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · Source: [GitHub](https://github.com/morya-space/morya-ui) · npm: [`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## Install\n\n**Create a new project (recommended):**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\nScaffold + install + full setup in one step. See [One-shot setup](/docs/setup).\n\n**In an existing application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`.\n\n## Choose an import mode\n\nThe library supports **full** and **on-demand** usage. Pick one per app (stay consistent within a project).\n\n| | Full | On-demand |\n| --- | --- | --- |\n| Best for | Many components, fastest setup | Bundle size, few components |\n| Components | `app.use(MoryaUI)` or named imports from `morya-ui` | `morya-ui/button` subpaths, or Vite auto-resolver |\n| Styles | Import `morya-ui/styles.css` at entry | Bundled with subpath imports (theme + deps) |\n| JS size | Full plugin bundles all components; named imports tree-shake | Only used components and their deps |\n\n## Full usage\n\n### 1. Plugin registration (recommended full mode)\n\nImport the **full stylesheet** and register all components once:\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\nTemplates can use `<MButton>`, `<MInput>`, etc. without per-file imports.\n\n### 2. Named imports + full CSS\n\nSkip the plugin; import components in SFCs. JS can tree-shake, but styles still need the full CSS file:\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n  <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n    <MInput v-model=\"name\" label=\"Name\" placeholder=\"Enter a name\" />\n    <MButton label=\"Submit\" @click=\"() => undefined\" />\n  </div>\n</template>\n```\n\n## On-demand usage\n\n### 1. Subpath imports\n\nImport from kebab-case subpaths (e.g. `button`, `input-password`, `tree-select`). Each entry bundles component JS, type declarations, internal dependencies, and styles — **no** `morya-ui/styles.css` required. Prop types come from the same path, for example `import type { ButtonProps } from 'morya-ui/button'`.\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\nStyles only:\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. Auto on-demand (Vite)\n\nWith `unplugin-vue-components`, add the resolver so templates can use `<MButton>` without manual imports:\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    Components({\n      dts: 'src/components.d.ts',\n      resolvers: [MoryaUIResolver()],\n    }),\n  ],\n})\n```\n\n`dts` writes component declarations so the editor and `vue-tsc` can resolve components used in templates. That file must be covered by `include` in `tsconfig.json`. In on-demand mode, `createMoryaUI({ components: false })` still applies global config without registering components.\n\n## Optional: app-level defaults\n\n`createMoryaUI` applies global defaults and registers all components by default:\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n  .use(\n    createMoryaUI({\n      appendTo: 'body',\n      size: 'small',\n      zIndex: 1100,\n    }),\n  )\n  .mount('#app')\n```\n\nUse `components: false` for config-only install.\n\nSee [Configuration](/docs/config) for details.\n\n## Theme API\n\nColor-mode helpers come from the same package:\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\nSee [Theme](/docs/theme).\n\n## Run this docs site\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# Build the static docs site\npnpm --filter morya-ui build:docs\n```\n",
           "sections": [
             {
               "title": "",
@@ -31912,7 +32689,7 @@
             {
               "title": "Install",
               "id": "install",
-              "body": "**In an application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`."
+              "body": "**Create a new project (recommended):**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\nScaffold + install + full setup in one step. See [One-shot setup](/docs/setup).\n\n**In an existing application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`."
             },
             {
               "title": "Choose an import mode",
@@ -31959,22 +32736,27 @@
         "zh-CN": {
           "title": "一键接入",
           "description": "用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。",
-          "markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则、便携 `AGENTS.md` 与多编辑器 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、`AGENTS.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 MCP 配置（Cursor / VS Code / Zed + 根目录 `.mcp.json`），接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只写部分编辑器的 MCP（仍会写 .mcp.json）\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# 收窄 Skill 目标 agents（默认：cursor, github-copilot, zed, claude-code, windsurf）\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# companion 装到 skills CLI 支持的全部 agents（目录会很多）\nnpx @morya-ui/setup ai --agents=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**，并同步到默认 5 个 skill agents。完成后若写入了 MCP，请 **重启编辑器或重载 MCP**。Zed 需信任 worktree 后才会加载项目 skills。生成页面前让 Agent 先读 `DESIGN.md`（及 `AGENTS.md`）。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--editors <list>` | MCP 目标：`cursor`、`vscode`、`zed` 或 `all`（默认三者；始终另写 `.mcp.json`） |\n| `--agents <list>` | Skill agents：`cursor`、`github-copilot`、`zed`、`claude-code`、`windsurf`（默认），或 `all` |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件、`morya-ui` MCP 条目与 skill 目录链接 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `AGENTS.md` | 编辑器无关的常驻清单（VS Code / Zed / CLI 等） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.claude/skills/`、`.windsurf/skills/`、`.github/skills/` | 从 `.agents/skills` 同步的镜像（Claude Code / Windsurf / Copilot） |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP |\n| `.vscode/mcp.json` | VS Code MCP |\n| `.zed/settings.json` | Zed `context_servers`（合并，不覆盖其它设置） |\n| `.mcp.json` | 便携 MCP（Agent Host / 跨工具发现） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 依赖：默认将 `morya-ui@latest` 以及项目中已有的 `@morya-ui/*` 升到最新（可用 `--skip-install` 跳过）\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- MCP 配置：合并其它 server / 设置；已有 `morya-ui` 条目则跳过（除非 `--force`）；新建或强制覆盖时使用 `@morya-ui/mcp@latest`\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例  \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [组件](/components)：浏览 API 与预览\n",
+          "markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则、便携 `AGENTS.md` 与多编辑器 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 快速开始\n\n### 在现有项目中配置\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n### 从零创建新项目\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\n会从 create-vite 脚手架出 `./my-admin`，安装依赖，然后自动执行完整接入（组件库 + AI 配置 + MCP + 样式）。\n\n### 交互模式\n\n在终端（TTY）中裸跑 `npx @morya-ui/setup`，CLI 会按顺序询问：\n\n1. **做什么** — 配置当前项目，还是创建新项目\n2. **项目名** — 仅创建时（带校验）\n3. **包管理器** — 仅创建时（标出自动探测结果）\n4. **create-vite 模板** — `vue-ts` vs `vue`\n5. **可选 Agent Skills** — `full` / `ai` 模式\n\n每个提示都有合理默认值，直接回车即可。传 `--yes`（或在 CI 等非 TTY 环境）跳过全部提示。\n\n## 命令\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、`AGENTS.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 MCP 配置（Cursor / VS Code / Zed + 根目录 `.mcp.json`），接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只写部分编辑器的 MCP（仍会写 .mcp.json）\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# 收窄 Skill 目标 agents（默认：cursor, github-copilot, zed, claude-code, windsurf）\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# companion 装到 skills CLI 支持的全部 agents（目录会很多）\nnpx @morya-ui/setup ai --agents=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**，并同步到默认 5 个 skill agents。完成后若写入了 MCP，请 **重启编辑器或重载 MCP**。Zed 需信任 worktree 后才会加载项目 skills。生成页面前让 Agent 先读 `DESIGN.md`（及 `AGENTS.md`）。\n\n### 创建新项目\n\n```bash\n# 交互式：询问项目名、包管理器、模板\nnpx @morya-ui/setup --create\n\n# 显式指定\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / 非交互：全走默认值\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` 会自动完成：create-vite 脚手架 → `<pm> install` → 完整接入流程（相当于在新项目里再跑一次 `npx @morya-ui/setup`）。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--create <name>` | 从 create-vite 脚手架新项目，然后执行完整接入 |\n| `--template <tpl>` | create-vite 模板：`vue-ts`（默认）或 `vue`；仅配合 `--create` |\n| `--cwd <dir>` | 目标项目根（默认当前目录）；配合 `--create` 时为父目录 |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--editors <list>` | MCP 目标：`cursor`、`vscode`、`zed` 或 `all`（默认三者；始终另写 `.mcp.json`） |\n| `--agents <list>` | Skill agents：`cursor`、`github-copilot`、`zed`、`claude-code`、`windsurf`（默认），或 `all` |\n| `--yes` / `-y` | 跳过全部交互提示，使用默认值（CI 友好） |\n| `--force` | 覆盖已有模板文件、`morya-ui` MCP 条目与 skill 目录链接 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `AGENTS.md` | 编辑器无关的常驻清单（VS Code / Zed / CLI 等） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.claude/skills/`、`.windsurf/skills/`、`.github/skills/` | 从 `.agents/skills` 同步的镜像（Claude Code / Windsurf / Copilot） |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP |\n| `.vscode/mcp.json` | VS Code MCP |\n| `.zed/settings.json` | Zed `context_servers`（合并，不覆盖其它设置） |\n| `.mcp.json` | 便携 MCP（Agent Host / 跨工具发现） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 依赖：默认将 `morya-ui@latest` 以及项目中已有的 `@morya-ui/*` 升到最新（可用 `--skip-install` 跳过）\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- MCP 配置：合并其它 server / 设置；已有 `morya-ui` 条目则跳过（除非 `--force`）；新建或强制覆盖时使用 `@morya-ui/mcp@latest`\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例  \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [组件](/components)：浏览 API 与预览\n",
           "sections": [
             {
               "title": "",
               "id": "overview",
               "body": "# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则、便携 `AGENTS.md` 与多编辑器 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。"
             },
+            {
+              "title": "快速开始",
+              "id": "快速开始",
+              "body": "### 在现有项目中配置\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n### 从零创建新项目\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\n会从 create-vite 脚手架出 `./my-admin`，安装依赖，然后自动执行完整接入（组件库 + AI 配置 + MCP + 样式）。\n\n### 交互模式\n\n在终端（TTY）中裸跑 `npx @morya-ui/setup`，CLI 会按顺序询问：\n\n1. **做什么** — 配置当前项目，还是创建新项目\n2. **项目名** — 仅创建时（带校验）\n3. **包管理器** — 仅创建时（标出自动探测结果）\n4. **create-vite 模板** — `vue-ts` vs `vue`\n5. **可选 Agent Skills** — `full` / `ai` 模式\n\n每个提示都有合理默认值，直接回车即可。传 `--yes`（或在 CI 等非 TTY 环境）跳过全部提示。"
+            },
             {
               "title": "命令",
               "id": "命令",
-              "body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、`AGENTS.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 MCP 配置（Cursor / VS Code / Zed + 根目录 `.mcp.json`），接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只写部分编辑器的 MCP（仍会写 .mcp.json）\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# 收窄 Skill 目标 agents（默认：cursor, github-copilot, zed, claude-code, windsurf）\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# companion 装到 skills CLI 支持的全部 agents（目录会很多）\nnpx @morya-ui/setup ai --agents=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**，并同步到默认 5 个 skill agents。完成后若写入了 MCP，请 **重启编辑器或重载 MCP**。Zed 需信任 worktree 后才会加载项目 skills。生成页面前让 Agent 先读 `DESIGN.md`（及 `AGENTS.md`）。"
+              "body": "默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、`AGENTS.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 MCP 配置（Cursor / VS Code / Zed + 根目录 `.mcp.json`），接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只写部分编辑器的 MCP（仍会写 .mcp.json）\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# 收窄 Skill 目标 agents（默认：cursor, github-copilot, zed, claude-code, windsurf）\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# companion 装到 skills CLI 支持的全部 agents（目录会很多）\nnpx @morya-ui/setup ai --agents=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**，并同步到默认 5 个 skill agents。完成后若写入了 MCP，请 **重启编辑器或重载 MCP**。Zed 需信任 worktree 后才会加载项目 skills。生成页面前让 Agent 先读 `DESIGN.md`（及 `AGENTS.md`）。\n\n### 创建新项目\n\n```bash\n# 交互式：询问项目名、包管理器、模板\nnpx @morya-ui/setup --create\n\n# 显式指定\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / 非交互：全走默认值\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` 会自动完成：create-vite 脚手架 → `<pm> install` → 完整接入流程（相当于在新项目里再跑一次 `npx @morya-ui/setup`）。"
             },
             {
               "title": "选项",
               "id": "选项",
-              "body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--editors <list>` | MCP 目标：`cursor`、`vscode`、`zed` 或 `all`（默认三者；始终另写 `.mcp.json`） |\n| `--agents <list>` | Skill agents：`cursor`、`github-copilot`、`zed`、`claude-code`、`windsurf`（默认），或 `all` |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件、`morya-ui` MCP 条目与 skill 目录链接 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
+              "body": "| Flag | 说明 |\n| --- | --- |\n| `--create <name>` | 从 create-vite 脚手架新项目，然后执行完整接入 |\n| `--template <tpl>` | create-vite 模板：`vue-ts`（默认）或 `vue`；仅配合 `--create` |\n| `--cwd <dir>` | 目标项目根（默认当前目录）；配合 `--create` 时为父目录 |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--editors <list>` | MCP 目标：`cursor`、`vscode`、`zed` 或 `all`（默认三者；始终另写 `.mcp.json`） |\n| `--agents <list>` | Skill agents：`cursor`、`github-copilot`、`zed`、`claude-code`、`windsurf`（默认），或 `all` |\n| `--yes` / `-y` | 跳过全部交互提示，使用默认值（CI 友好） |\n| `--force` | 覆盖已有模板文件、`morya-ui` MCP 条目与 skill 目录链接 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
             },
             {
               "title": "会落到项目里的内容",
@@ -31996,22 +32778,27 @@
         "en-US": {
           "title": "One-shot setup",
           "description": "Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.",
-          "markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, portable `AGENTS.md`, and multi-editor MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, `AGENTS.md`, Agent skill, Cursor rules, and check scripts\n3. Merge MCP configs (Cursor / VS Code / Zed + root `.mcp.json`) for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Subset of MCP editor targets (still writes .mcp.json)\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# Narrow skill agents (default: cursor, github-copilot, zed, claude-code, windsurf)\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# Install companions to every skills-CLI agent (many dirs)\nnpx @morya-ui/setup ai --agents=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/) for the default five skill agents, and mirrored into agent-specific dirs. If MCP was written, **restart your editor or reload MCP**. Zed may require trusting the worktree before project skills load. Have the agent read `DESIGN.md` (and `AGENTS.md`) before generating pages.\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files, MCP `morya-ui` entry, and skill-dir links |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `AGENTS.md` | Portable always-on checklist (VS Code / Zed / CLI agents) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.claude/skills/`, `.windsurf/skills/`, `.github/skills/` | Mirrors from `.agents/skills` (Claude Code / Windsurf / Copilot) |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP |\n| `.vscode/mcp.json` | VS Code MCP |\n| `.zed/settings.json` | Zed `context_servers` (merged; other settings kept) |\n| `.mcp.json` | Portable MCP (Agent Host / cross-tool discovery) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Dependencies: always install / upgrade `morya-ui@latest` and any existing `@morya-ui/*` to `@latest` unless `--skip-install`\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- MCP configs: merge other servers / settings; skip an existing `morya-ui` entry unless `--force`; new or forced entries use `@morya-ui/mcp@latest`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example  \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [Components](/components): browse APIs and previews\n",
+          "markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, portable `AGENTS.md`, and multi-editor MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Quick start\n\n### Configure an existing project\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\n### Create a new project from scratch\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\nScaffolds `./my-admin` via create-vite, installs dependencies, then applies the full setup (library + AI pack + MCP + styles) inside it.\n\n### Interactive mode\n\nRun without arguments in a terminal (TTY) and the CLI prompts for:\n\n1. **What to do** — configure current project, or create a new one\n2. **Project name** — when creating (with validation)\n3. **Package manager** — when creating (auto-detected default highlighted)\n4. **create-vite template** — `vue-ts` vs `vue`\n5. **Optional Agent skills** — `full` / `ai` modes\n\nEvery prompt has a sensible default — press Enter to accept. Pass `--yes` (or run in a non-TTY environment like CI) to skip all prompts and use defaults.\n\n## Commands\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, `AGENTS.md`, Agent skill, Cursor rules, and check scripts\n3. Merge MCP configs (Cursor / VS Code / Zed + root `.mcp.json`) for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Subset of MCP editor targets (still writes .mcp.json)\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# Narrow skill agents (default: cursor, github-copilot, zed, claude-code, windsurf)\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# Install companions to every skills-CLI agent (many dirs)\nnpx @morya-ui/setup ai --agents=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/) for the default five skill agents, and mirrored into agent-specific dirs. If MCP was written, **restart your editor or reload MCP**. Zed may require trusting the worktree before project skills load. Have the agent read `DESIGN.md` (and `AGENTS.md`) before generating pages.\n\n### Create a new project\n\n```bash\n# Interactive: prompts for name, package manager, template\nnpx @morya-ui/setup --create\n\n# Explicit\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / non-interactive: all defaults\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` runs: create-vite scaffold → `<pm> install` → full setup (equivalent to running `npx @morya-ui/setup` inside the new project).\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--create <name>` | Scaffold a new project via create-vite, then run the full setup inside it |\n| `--template <tpl>` | create-vite template: `vue-ts` (default) or `vue`; only used with `--create` |\n| `--cwd <dir>` | Target project root (default: cwd); with `--create`, the parent directory |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` | Skip all interactive prompts and use defaults (CI-friendly) |\n| `--force` | Overwrite existing template files, MCP `morya-ui` entry, and skill-dir links |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `AGENTS.md` | Portable always-on checklist (VS Code / Zed / CLI agents) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.claude/skills/`, `.windsurf/skills/`, `.github/skills/` | Mirrors from `.agents/skills` (Claude Code / Windsurf / Copilot) |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP |\n| `.vscode/mcp.json` | VS Code MCP |\n| `.zed/settings.json` | Zed `context_servers` (merged; other settings kept) |\n| `.mcp.json` | Portable MCP (Agent Host / cross-tool discovery) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Dependencies: always install / upgrade `morya-ui@latest` and any existing `@morya-ui/*` to `@latest` unless `--skip-install`\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- MCP configs: merge other servers / settings; skip an existing `morya-ui` entry unless `--force`; new or forced entries use `@morya-ui/mcp@latest`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example  \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation  \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp)  \n- [Components](/components): browse APIs and previews\n",
           "sections": [
             {
               "title": "",
               "id": "overview",
               "body": "# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, portable `AGENTS.md`, and multi-editor MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup)."
             },
+            {
+              "title": "Quick start",
+              "id": "quick-start",
+              "body": "### Configure an existing project\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\n### Create a new project from scratch\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\nScaffolds `./my-admin` via create-vite, installs dependencies, then applies the full setup (library + AI pack + MCP + styles) inside it.\n\n### Interactive mode\n\nRun without arguments in a terminal (TTY) and the CLI prompts for:\n\n1. **What to do** — configure current project, or create a new one\n2. **Project name** — when creating (with validation)\n3. **Package manager** — when creating (auto-detected default highlighted)\n4. **create-vite template** — `vue-ts` vs `vue`\n5. **Optional Agent skills** — `full` / `ai` modes\n\nEvery prompt has a sensible default — press Enter to accept. Pass `--yes` (or run in a non-TTY environment like CI) to skip all prompts and use defaults."
+            },
             {
               "title": "Commands",
               "id": "commands",
-              "body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, `AGENTS.md`, Agent skill, Cursor rules, and check scripts\n3. Merge MCP configs (Cursor / VS Code / Zed + root `.mcp.json`) for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Subset of MCP editor targets (still writes .mcp.json)\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# Narrow skill agents (default: cursor, github-copilot, zed, claude-code, windsurf)\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# Install companions to every skills-CLI agent (many dirs)\nnpx @morya-ui/setup ai --agents=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/) for the default five skill agents, and mirrored into agent-specific dirs. If MCP was written, **restart your editor or reload MCP**. Zed may require trusting the worktree before project skills load. Have the agent read `DESIGN.md` (and `AGENTS.md`) before generating pages."
+              "body": "By default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, `AGENTS.md`, Agent skill, Cursor rules, and check scripts\n3. Merge MCP configs (Cursor / VS Code / Zed + root `.mcp.json`) for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Subset of MCP editor targets (still writes .mcp.json)\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# Narrow skill agents (default: cursor, github-copilot, zed, claude-code, windsurf)\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# Install companions to every skills-CLI agent (many dirs)\nnpx @morya-ui/setup ai --agents=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/) for the default five skill agents, and mirrored into agent-specific dirs. If MCP was written, **restart your editor or reload MCP**. Zed may require trusting the worktree before project skills load. Have the agent read `DESIGN.md` (and `AGENTS.md`) before generating pages.\n\n### Create a new project\n\n```bash\n# Interactive: prompts for name, package manager, template\nnpx @morya-ui/setup --create\n\n# Explicit\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / non-interactive: all defaults\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` runs: create-vite scaffold → `<pm> install` → full setup (equivalent to running `npx @morya-ui/setup` inside the new project)."
             },
             {
               "title": "Options",
               "id": "options",
-              "body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files, MCP `morya-ui` entry, and skill-dir links |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
+              "body": "| Flag | Meaning |\n| --- | --- |\n| `--create <name>` | Scaffold a new project via create-vite, then run the full setup inside it |\n| `--template <tpl>` | create-vite template: `vue-ts` (default) or `vue`; only used with `--create` |\n| `--cwd <dir>` | Target project root (default: cwd); with `--create`, the parent directory |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` | Skip all interactive prompts and use defaults (CI-friendly) |\n| `--force` | Overwrite existing template files, MCP `morya-ui` entry, and skill-dir links |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
             },
             {
               "title": "What lands in the project",
@@ -32957,24 +33744,24 @@
         "zh-CN": {
           "title": "API 类型",
           "description": "文档 Props 里常见类型名的结构与含义。",
-          "markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。\n",
+          "markdown": "---\ntitle: API 类型\norder: 8\ndescription: 文档 Props 里常见类型名的结构与含义。\n---\n\n# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) 在 `RootPassThrough` 上增加按钮组与列表项：\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // 左侧按钮组\n  list?: PassThroughPart      // 滚动列表\n  item?: PassThroughPart      // 单个列表项\n  handle?: PassThroughPart    // 拖拽手柄\n  label?: PassThroughPart     // 项文本容器\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。\n",
           "sections": [
             {
               "title": "",
               "id": "overview",
-              "body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
+              "body": "# API 类型\n\n组件文档 Props 表里出现的类型名，在这里查具体结构。包入口也导出同名类型，可在业务代码里 `import type { … } from 'morya-ui'`（以各组件 `types.ts` 为准）。\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\n单个 DOM 节点上要合并的属性 bag。`pt.<part>` 的值就是这个类型。\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\n常用键：`class`、`style`、`data-*`、`onClick` / `onKeydown`（Vue 事件监听写法）、以及该节点合法的原生 HTML 属性。\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\n单根容器（Card、Dialog 遮罩、Tabs 等）：\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch（可见根是 `<label>`，hidden input 单独一段）：\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // 一般是 label\n  input?: PassThroughPart  // 原生 input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\n表单字段（Input、Select、DatePicker 等）：\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // 外层 .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // 触发器 / 组合控件（Select 等）\n  input?: PassThroughPart   // 原生 input / textarea\n}\n```\n\n具体组件支持哪些键，见该组件文档的 **类型** 或 **pt** 小节。\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) 在 `FieldPassThrough` 基础上多了前后缀等：\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) 在 `RootPassThrough` 上增加分隔条与面板：\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\n分隔条外观也可用 `resizeTriggerClass` / `resizeTriggerStyle`，内容用 `#resize-trigger`（别名 `#gutter`）。\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) 在 `RootPassThrough` 上增加按钮组与列表项：\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // 左侧按钮组\n  list?: PassThroughPart      // 滚动列表\n  item?: PassThroughPart      // 单个列表项\n  handle?: PassThroughPart    // 拖拽手柄\n  label?: PassThroughPart     // 项文本容器\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\n控件尺寸，多数表单 / 按钮组件的 `size` prop：\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` 为兼容别名；未传时通常继承 [ConfigProvider](/docs/config) 的 `size`。\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n输入框视觉变体：\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\n按钮类型糖（[`Button`](/components/Button)）：\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\n按钮颜色轴（Button、ConfirmDialog `acceptColor`、Dialog `positiveColor` 等）：\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\n按钮变体轴：\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\n浮层 Teleport 挂载目标（Dialog、Select 菜单、Toast 等）：\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'`（默认）：挂到 document.body  \n- `'self'`：不 Teleport，就地渲染  \n- 也常见 `appendTo: false`（运行时兼容，同 `'self'`）\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\n关闭 / 确认前的拦截函数。返回 `false`（含 Promise 解析为 `false`）则**不继续**：\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\n用于 Dialog `beforeClose`、`onPositiveClick`，ConfirmDialog / ConfirmPopup 的 `beforeAccept` 等。\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) 选项项：\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) 选项分组（混入 `options` 渲染分组标题行）：\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\n单选为标量；`multiple` 时为数组。\n\n<h3 id=\"IconName\">IconName</h3>\n\n[`MIcon`](/components/Icon) / [`Button`](/components/Button) 的 `icon` / `name` 使用的注册名，例如 `'search'`、`'chevron-down'`。完整列表见 Icon 文档注册表。\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nMenu / Dropdown / ContextMenu 等导航项的公共字段：\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\n显示 / 反馈组件的语义色基集：\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status：`MToneType` 加上品牌色 `primary`。\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline 的语义色：\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\n更细的组件专属类型（如 `TableServerOptions`、`MenuItem`）写在对应组件页 **类型** 小节；这里只列跨组件复用的名字。"
             }
           ]
         },
         "en-US": {
           "title": "API types",
           "description": "Shapes behind type names in component Props tables.",
-          "markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only.\n",
+          "markdown": "---\ntitle: API types\norder: 8\ndescription: Shapes behind type names in component Props tables.\n---\n\n# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) extends `RootPassThrough` with the button group and list items:\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // left button group\n  list?: PassThroughPart      // scrollable list\n  item?: PassThroughPart      // single item\n  handle?: PassThroughPart    // drag handle\n  label?: PassThroughPart     // item label container\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only.\n",
           "sections": [
             {
               "title": "",
               "id": "overview",
-              "body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
+              "body": "# API types\n\nLook up structures for names that appear in Props tables. The package re-exports the same names as TypeScript types (`import type { … } from 'morya-ui'`), per component `types.ts`.\n\n<h3 id=\"PassThroughPart\">PassThroughPart</h3>\n\nAttribute bag merged onto one DOM node—the value of `pt.<part>`.\n\n```ts\ntype PassThroughPart = Record<string, unknown>\n```\n\nCommon keys: `class`, `style`, `data-*`, `onClick` / `onKeydown`, and valid native attributes for that element.\n\n<h3 id=\"RootPassThrough\">RootPassThrough</h3>\n\nSingle-root containers (Card, Dialog backdrop, Tabs, …):\n\n```ts\ninterface RootPassThrough {\n  root?: PassThroughPart\n}\n```\n\n<h3 id=\"ControlPassThrough\">ControlPassThrough</h3>\n\nCheckbox / Radio / Switch (visible `<label>` root + hidden input):\n\n```ts\ninterface ControlPassThrough {\n  root?: PassThroughPart   // usually the label\n  input?: PassThroughPart  // native input\n}\n```\n\n<h3 id=\"FieldPassThrough\">FieldPassThrough</h3>\n\nForm fields (Input, Select, DatePicker, …):\n\n```ts\ninterface FieldPassThrough {\n  root?: PassThroughPart    // outer .m-*-field\n  label?: PassThroughPart\n  control?: PassThroughPart // trigger / composite control\n  input?: PassThroughPart   // native input / textarea\n}\n```\n\nWhich keys a component accepts is listed on that component’s **Types** or **pt** section.\n\n<h3 id=\"InputPassThrough\">InputPassThrough</h3>\n\n[`Input`](/components/Input) extends `FieldPassThrough` with affixes:\n\n```ts\ntype InputPassThrough = FieldPassThrough & {\n  prefix?: PassThroughPart\n  suffix?: PassThroughPart\n  help?: PassThroughPart\n  count?: PassThroughPart\n}\n```\n\n<h3 id=\"SplitterPassThrough\">SplitterPassThrough</h3>\n\n[`Splitter`](/components/Splitter) extends `RootPassThrough` with gutter and panes:\n\n```ts\ntype SplitterPassThrough = RootPassThrough & {\n  gutter?: PassThroughPart\n  panel1?: PassThroughPart\n  panel2?: PassThroughPart\n}\n```\n\nGutter look can also use `resizeTriggerClass` / `resizeTriggerStyle`; content goes in `#resize-trigger` (alias `#gutter`).\n\n<h3 id=\"OrderListPassThrough\">OrderListPassThrough</h3>\n\n[`OrderList`](/components/order-list) extends `RootPassThrough` with the button group and list items:\n\n```ts\ntype OrderListPassThrough = RootPassThrough & {\n  controls?: PassThroughPart  // left button group\n  list?: PassThroughPart      // scrollable list\n  item?: PassThroughPart      // single item\n  handle?: PassThroughPart    // drag handle\n  label?: PassThroughPart     // item label container\n}\n```\n\n<h3 id=\"MSizeInput\">MSizeInput</h3>\n\nControl size for many form / button props:\n\n```ts\ntype MSizeInput = 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'\n```\n\n`sm` / `md` / `lg` are legacy aliases. Omitted `size` usually inherits [ConfigProvider](/docs/config).\n\n<h3 id=\"MInputVariant\">MInputVariant</h3>\n\n```ts\ntype MInputVariant = 'outlined' | 'filled'\n```\n\n<h3 id=\"ButtonType\">ButtonType</h3>\n\nButton type sugar ([`Button`](/components/Button)):\n\n```ts\ntype ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text'\n```\n\n<h3 id=\"ButtonColor\">ButtonColor</h3>\n\nButton color axis (Button, ConfirmDialog `acceptColor`, Dialog `positiveColor`, …):\n\n```ts\ntype ButtonColor =\n  | 'default'\n  | 'primary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'contrast'\n  | 'link'\n```\n\n<h3 id=\"ButtonVariant\">ButtonVariant</h3>\n\nButton variant axis:\n\n```ts\ntype ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link'\n```\n\n<h3 id=\"MAppendTo\">MAppendTo</h3>\n\nOverlay Teleport target:\n\n```ts\ntype MAppendTo = string | HTMLElement | 'self'\n```\n\n- `'body'` (default)  \n- `'self'` — render in place (no Teleport)  \n- `false` is accepted at runtime (same idea as `'self'`)\n\n<h3 id=\"AsyncGuard\">AsyncGuard</h3>\n\nGuard before close / confirm. Return `false` (including from a Promise) to **abort**:\n\n```ts\ntype AsyncGuard<T extends unknown[] = []> = (\n  ...args: T\n) => unknown | Promise<unknown>\n```\n\nUsed by Dialog `beforeClose`, ConfirmDialog `beforeAccept`, and similar.\n\n<h3 id=\"SelectOption\">SelectOption</h3>\n\n[`Select`](/components/Select) option row:\n\n```ts\ninterface SelectOption {\n  label: string\n  value: string | number\n  disabled?: boolean\n}\n```\n\n<h3 id=\"SelectOptionGroup\">SelectOptionGroup</h3>\n\n[`Select`](/components/Select) option group (mix into `options` to render a group header row):\n\n```ts\ninterface SelectOptionGroup {\n  label: string\n  items: SelectOption[]\n}\n```\n\n<h3 id=\"SelectModelValue\">SelectModelValue</h3>\n\n```ts\ntype SelectValue = string | number\ntype SelectModelValue = SelectValue | SelectValue[] | undefined\n```\n\nScalar when single-select; array when `multiple`.\n\n<h3 id=\"IconName\">IconName</h3>\n\nRegistered icon id for [`MIcon`](/components/Icon) / [`Button`](/components/Button), e.g. `'search'`. See the Icon registry.\n\n<h3 id=\"MenuNodeBase\">MenuNodeBase</h3>\n\nShared fields for Menu / Dropdown / ContextMenu items:\n\n```ts\ninterface MenuNodeBase {\n  key?: string\n  label?: string\n  value?: string\n  icon?: string\n  disabled?: boolean\n  separator?: boolean\n  shortcut?: string\n  command?: () => void\n  items?: MenuNodeBase[]\n}\n```\n\n<h3 id=\"MToneType\">MToneType</h3>\n\nBase semantic tones for display / feedback components:\n\n```ts\ntype MToneType =\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'help'\n  | 'danger'\n  | 'contrast'\n```\n\n<h3 id=\"MTagType\">MTagType</h3>\n\nTag / Badge / Chip / Status: `MToneType` plus brand `primary`.\n\n```ts\ntype MTagType = MToneType | 'primary'\n```\n\n<h3 id=\"MToastType\">MToastType</h3>\n\nMessage / Toast / Timeline tones:\n\n```ts\ntype MToastType =\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'secondary'\n  | 'contrast'\n```\n\n---\n\nComponent-only types (`TableServerOptions`, `MenuItem`, …) live under each component’s **Types** section; this page is for shared names only."
             }
           ]
         }