@morya-ui/setup 0.3.5 → 0.3.6

package/template/.agents/skills/morya-ui-pages/evals/evals.json

@@ -1,89 +1,89 @@
-{
-  "skill_name": "morya-ui-pages",
-  "evals": [
-    {
-      "id": 1,
-      "prompt": "我们内部教务系统用 Vue3 + morya-ui。请做一个「课程列表」后台页：按课程名搜索、按开课状态（全部/开课中/已结课）筛选；表格列：名称、状态、学分、更新时间；行内「编辑」进抽屉表单，「删除」要二次确认；右上角「新建课程」。保存/删除成功只要一句话提示。输出单个 Vue SFC，用 list-filters-stack / list-table / form-in-drawer / confirm-delete / page-header-actions 等 snippets 拼装并对齐 page-layouts 块顺序，并做 Ops 精致化（侧栏图标、状态用 MStatus、空态用 MEmpty、行操作不要一排实心按钮）。",
-      "expected_output": "Ops list composition-first: MLayout/MPageHeader/list-filters-stack (collapsible+#advanced+FilterChips)/MTable rows, page-header-actions one primary, form-in-drawer edit, confirm-delete, message not toast, MStatus, MEmpty in #empty, menu icons, text/small row actions, craft pass, no second UI kit; do not require whole golden-page clone.",
-      "files": []
-    },
-    {
-      "id": 2,
-      "prompt": "同一个 morya-ui 项目里，生成「新建员工」独立表单页：姓名、工作邮箱、部门（下拉）、入职日期；窄栏；页头有标题和一句说明；底栏保存（primary）/取消（secondary）。不要做成营销落地页，不要用 Toast 提示「已保存」。输出单个 Vue SFC。",
-      "expected_output": "Ops form snippets: page-content-form + form-header/body/actions, narrow MPageContent, MForm + MSelect/MDatePicker, message for success if shown, one primary, no landing hero.",
-      "files": []
-    },
-    {
-      "id": 3,
-      "prompt": "运营后台首页仪表盘：四个 KPI（今日订单、待处理、转化率、退款率）、中间一块图表占位、右侧或下方「最近告警」表格（级别、内容、时间）。Vue3 + morya-ui，可先用静态假数据；告警级别可用 Tag，状态用 MStatus。",
-      "expected_output": "Dashboard snippets: dashboard-kpi-grid, dashboard-chart-card, dashboard-recent-table, MLayout shell, --m-* only, spacious density.",
-      "files": []
-    },
-    {
-      "id": 4,
-      "prompt": "给「青禾书房」这个独立书店品牌做登录页：左品牌、右表单（邮箱+密码+登录）。要有一点品牌感（token 氛围即可），但控件必须用 morya-ui；登录失败用表单区常驻错误（字段 errorMessage 或 token role=alert），不要一闪而过的 Toast，也不要把 MMessage 当成内嵌 Alert。输出单个 Vue SFC。",
-      "expected_output": "Account+craft via auth-split-shell: split shell, MForm/MInputPassword/MButton, token role=alert or field error for failure, brand panel with flat --m-* color-mix (no stacked radial+linear aurora), no MMessage severity alert, no second UI kit.",
-      "files": []
-    },
-    {
-      "id": 5,
-      "prompt": "课程列表在零数据时太空了。请设计一个空状态区块（可嵌在列表页内容区）：说明还没有课程、引导「创建第一门课程」；视觉克制，用 morya-ui 默认空态即可，不要自定义 dashed 框或径向光晕。只要空状态相关模板片段或带空状态的列表 SFC 均可。",
-      "expected_output": "Flow empty via empty-block: MEmpty + next-action MButton, short copy, no custom dashed/radial shell, fits list content slot.",
-      "files": []
-    },
-    {
-      "id": 6,
-      "prompt": "为「流水线 CI」产品写一个营销落地首页（不是后台）：首屏只有品牌名、一句主标题、一句副文、一组 CTA；下面再分「为何选择」「能力」「客户」三节。技术实现用 Vue3 + morya-ui 组件做按钮/标签/折叠 FAQ；颜色走 --m-*，风格偏简洁扁平（不要紫渐变 aurora、奶油衬线陶土、霓虹毛玻璃）。可有 1–2 个微动效，强度跟 useMotion / data-m-motion。输出单个 Vue SFC。",
-      "expected_output": "Express landing: single-job hero, MButton CTAs, sections with one job each, MAccordion FAQ optional, flat/simple surfaces (no purple aurora / cream-terracotta / unsolicited glass-neon), no admin MPageFilters shell, motion gated by useMotion / data-m-motion.",
-      "files": []
-    },
-    {
-      "id": 7,
-      "prompt": "做一个三步「创建工作空间」向导：1 名称与地区 2 邀请成员（邮箱标签）3 确认。用 morya-ui 的 Stepper + Form；每步一个主任务；最后提交成功进入结果页（查看工作空间 / 返回）。输出一个或两个 SFC。",
-      "expected_output": "Flow wizard via wizard-steps (+ result-block): MStepper :steps, per-step MForm, MInputTags invites, clear next/back/submit, message success, validate_usage clean.",
-      "files": []
-    },
-    {
-      "id": 8,
-      "prompt": "用户点了删除项目但权限不足：做一张「无权限」系统页（或全页占位），说明原因，并提供返回上一页、联系管理员。用 morya-ui，文案直接别玩梗。",
-      "expected_output": "System surface via result-block: MResult status=403, #footer escape actions, no jokey 404 essay, on-token, validate_usage clean.",
-      "files": []
-    },
-    {
-      "id": 9,
-      "prompt": "把上面的课程列表再 polish 一轮：去掉多余实心按钮、保证只有一个主按钮、表格状态改成 MStatus、补上 MEmpty。不要改成营销页。",
-      "expected_output": "Ops quieter polish: one primary, MStatus, MEmpty, text row actions, still list block-order / snippets structure.",
-      "files": []
-    },
-    {
-      "id": 10,
-      "prompt": "给「用户管理」做资源详情页：面包屑、标题旁启用状态、编辑/返回/删除；摘要标签；基本信息属性网格；下方近期活动表。Vue3 + morya-ui，按 detail 块顺序 + detail-toolbar 拼装，不要做成落地页。",
-      "expected_output": "Ops detail composition: detail-toolbar MPageHeader + MStatus, property MCard, related MTable rows, --m-* only, no marketing hero.",
-      "files": []
-    },
-    {
-      "id": 11,
-      "prompt": "用户列表页上「新建/编辑」不要另开路由：同页 MDialog（约 32rem）里放短表单（姓名、邮箱、角色），页脚取消/保存；保存成功用 message 一句话。输出单个 Vue SFC。",
-      "expected_output": "form-in-dialog snippet: list stays, MDialog + MForm + #footer, message.success not toast string, MTable rows.",
-      "files": []
-    },
-    {
-      "id": 12,
-      "prompt": "做一个用户列表表格页：列姓名、角色、状态。状态列必须用 MStatus；行数据绑定用 rows（不要写 data prop）；空表用 #empty + MEmpty。Vue3 + morya-ui，输出单个 SFC。",
-      "expected_output": "Prop accuracy: MTable columns+rows (not :data), #cell or Status for status, #empty+MEmpty, validate_usage clean.",
-      "files": []
-    },
-    {
-      "id": 13,
-      "prompt": "列表行删除：点删除后用 MConfirmDialog（危险确认），确认后 message.success('已删除')。不要用 toast，也不要手写 Dialog 当确认框。输出片段或 SFC 均可。",
-      "expected_output": "confirm-delete snippet + feedback-choice: MConfirmDialog v-model header/message acceptSeverity=danger @accept, message.success not toast, no hand Dialog confirm.",
-      "files": []
-    },
-    {
-      "id": 14,
-      "prompt": "短新建弹窗：MDialog v-model + header + #footer（取消 secondary、保存 primary）；表单字段 fluid。保存成功 message 一句话。不要用 v-model:visible。",
-      "expected_output": "form-in-dialog / form-surface Dialog recipe: v-model not visible, #footer actions, fluid fields, message.success, relatedSnippets include form-in-dialog.",
-      "files": []
-    }
-  ]
-}
+{
+  "skill_name": "morya-ui-pages",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "我们内部教务系统用 Vue3 + morya-ui。请做一个「课程列表」后台页：按课程名搜索、按开课状态（全部/开课中/已结课）筛选；表格列：名称、状态、学分、更新时间；行内「编辑」进抽屉表单，「删除」要二次确认；右上角「新建课程」。保存/删除成功只要一句话提示。输出单个 Vue SFC，用 list-filters-stack / list-table / form-in-drawer / confirm-delete / page-header-actions 等 snippets 拼装并对齐 page-layouts 块顺序，并做 Ops 精致化（侧栏图标、状态用 MStatus、空态用 MEmpty、行操作不要一排实心按钮）。",
+      "expected_output": "Ops list composition-first: MLayout/MPageHeader/list-filters-stack (collapsible+#advanced+FilterChips)/MTable rows, page-header-actions one primary, form-in-drawer edit, confirm-delete, message not toast, MStatus, MEmpty in #empty, menu icons, text/small row actions, craft pass, no second UI kit; do not require whole golden-page clone.",
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "同一个 morya-ui 项目里，生成「新建员工」独立表单页：姓名、工作邮箱、部门（下拉）、入职日期；窄栏；页头有标题和一句说明；底栏保存（primary）/取消（secondary）。不要做成营销落地页，不要用 Toast 提示「已保存」。输出单个 Vue SFC。",
+      "expected_output": "Ops form snippets: page-content-form + form-header/body/actions, narrow MPageContent, MForm + MSelect/MDatePicker, message for success if shown, one primary, no landing hero.",
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "运营后台首页仪表盘：四个 KPI（今日订单、待处理、转化率、退款率）、中间一块图表占位、右侧或下方「最近告警」表格（级别、内容、时间）。Vue3 + morya-ui，可先用静态假数据；告警级别可用 Tag，状态用 MStatus。",
+      "expected_output": "Dashboard snippets: dashboard-kpi-grid, dashboard-chart-card, dashboard-recent-table, MLayout shell, --m-* only, spacious density.",
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "给「青禾书房」这个独立书店品牌做登录页：左品牌、右表单（邮箱+密码+登录）。要有一点品牌感（token 氛围即可），但控件必须用 morya-ui；登录失败用表单区常驻错误（字段 errorMessage 或 token role=alert），不要一闪而过的 Toast，也不要把 MMessage 当成内嵌 Alert。输出单个 Vue SFC。",
+      "expected_output": "Account+craft via auth-split-shell: split shell, MForm/MInputPassword/MButton, token role=alert or field error for failure, brand panel with flat --m-* color-mix (no stacked radial+linear aurora), no MMessage severity alert, no second UI kit.",
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "课程列表在零数据时太空了。请设计一个空状态区块（可嵌在列表页内容区）：说明还没有课程、引导「创建第一门课程」；视觉克制，用 morya-ui 默认空态即可，不要自定义 dashed 框或径向光晕。只要空状态相关模板片段或带空状态的列表 SFC 均可。",
+      "expected_output": "Flow empty via empty-block: MEmpty + next-action MButton, short copy, no custom dashed/radial shell, fits list content slot.",
+      "files": []
+    },
+    {
+      "id": 6,
+      "prompt": "为「流水线 CI」产品写一个营销落地首页（不是后台）：首屏只有品牌名、一句主标题、一句副文、一组 CTA；下面再分「为何选择」「能力」「客户」三节。技术实现用 Vue3 + morya-ui 组件做按钮/标签/折叠 FAQ；颜色走 --m-*，风格偏简洁扁平（不要紫渐变 aurora、奶油衬线陶土、霓虹毛玻璃）。可有 1–2 个微动效，强度跟 useMotion / data-m-motion。输出单个 Vue SFC。",
+      "expected_output": "Express landing: single-job hero, MButton CTAs, sections with one job each, MAccordion FAQ optional, flat/simple surfaces (no purple aurora / cream-terracotta / unsolicited glass-neon), no admin MPageFilters shell, motion gated by useMotion / data-m-motion.",
+      "files": []
+    },
+    {
+      "id": 7,
+      "prompt": "做一个三步「创建工作空间」向导：1 名称与地区 2 邀请成员（邮箱标签）3 确认。用 morya-ui 的 Stepper + Form；每步一个主任务；最后提交成功进入结果页（查看工作空间 / 返回）。输出一个或两个 SFC。",
+      "expected_output": "Flow wizard via wizard-steps (+ result-block): MStepper :steps, per-step MForm, MInputTags invites, clear next/back/submit, message success, validate_usage clean.",
+      "files": []
+    },
+    {
+      "id": 8,
+      "prompt": "用户点了删除项目但权限不足：做一张「无权限」系统页（或全页占位），说明原因，并提供返回上一页、联系管理员。用 morya-ui，文案直接别玩梗。",
+      "expected_output": "System surface via result-block: MResult status=403, #footer escape actions, no jokey 404 essay, on-token, validate_usage clean.",
+      "files": []
+    },
+    {
+      "id": 9,
+      "prompt": "把上面的课程列表再 polish 一轮：去掉多余实心按钮、保证只有一个主按钮、表格状态改成 MStatus、补上 MEmpty。不要改成营销页。",
+      "expected_output": "Ops quieter polish: one primary, MStatus, MEmpty, text row actions, still list block-order / snippets structure.",
+      "files": []
+    },
+    {
+      "id": 10,
+      "prompt": "给「用户管理」做资源详情页：面包屑、标题旁启用状态、编辑/返回/删除；摘要标签；基本信息属性网格；下方近期活动表。Vue3 + morya-ui，按 detail 块顺序 + detail-toolbar 拼装，不要做成落地页。",
+      "expected_output": "Ops detail composition: detail-toolbar MPageHeader + MStatus, property MCard, related MTable rows, --m-* only, no marketing hero.",
+      "files": []
+    },
+    {
+      "id": 11,
+      "prompt": "用户列表页上「新建/编辑」不要另开路由：同页 MDialog（约 32rem）里放短表单（姓名、邮箱、角色），页脚取消/保存；保存成功用 message 一句话。输出单个 Vue SFC。",
+      "expected_output": "form-in-dialog snippet: list stays, MDialog + MForm + #footer, message.success not toast string, MTable rows.",
+      "files": []
+    },
+    {
+      "id": 12,
+      "prompt": "做一个用户列表表格页：列姓名、角色、状态。状态列必须用 MStatus；行数据绑定用 rows（不要写 data prop）；空表用 #empty + MEmpty。Vue3 + morya-ui，输出单个 SFC。",
+      "expected_output": "Prop accuracy: MTable columns+rows (not :data), #cell or Status for status, #empty+MEmpty, validate_usage clean.",
+      "files": []
+    },
+    {
+      "id": 13,
+      "prompt": "列表行删除：点删除后用 MConfirmDialog（危险确认），确认后 message.success('已删除')。不要用 toast，也不要手写 Dialog 当确认框。输出片段或 SFC 均可。",
+      "expected_output": "confirm-delete snippet + feedback-choice: MConfirmDialog v-model header/message acceptSeverity=danger @accept, message.success not toast, no hand Dialog confirm.",
+      "files": []
+    },
+    {
+      "id": 14,
+      "prompt": "短新建弹窗：MDialog v-model + header + #footer（取消 secondary、保存 primary）；表单字段 fluid。保存成功 message 一句话。不要用 v-model:visible。",
+      "expected_output": "form-in-dialog / form-surface Dialog recipe: v-model not visible, #footer actions, fluid fields, message.success, relatedSnippets include form-in-dialog.",
+      "files": []
+    }
+  ]
+}

package/template/.agents/skills/morya-ui-pages/references/component-index.md

@@ -1,99 +1,99 @@
-# Component index (scenario map)
-
-Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_usage`).
-
-- **Selection + key props**: MCP `recommend_component`, or offline [decision-recipes.md](./decision-recipes.md) (generated from `packages/ui-mcp/src/decisions.ts`).
-- This file is a **catalog + decision-id index**, not a prop manual.
-
-## Shell
-
-| Component | Use |
-| --- | --- |
-| `MConfigProvider` | Root locale / theme / density / defaults |
-| `MLayout` family | Admin chrome (`MLayoutSider` is the layout sider) |
-| `MSidebar` | Standalone nav rail (not a `MDrawer`, not a substitute for `MLayoutSider` inside `MLayout`) |
-| `MBreadcrumb` | Path |
-| `MPageContent` / `MPageFilters` / `MPageToolbar` / `MPageHeader` / `MPageSection` / `MPageStat` / `MPagePlaceholder` | Page composition |
-| `MDock` | App dock / launcher, not page actions |
-
-## Actions
-
-`MButton` / `MButtonGroup` (primary `severity="primary"`, danger `severity="danger"`), `MSplitButton` (main action + menu), `MSpeedDial` (floating action cluster)
-
-## Forms · inputs
-
-`MForm`, `MFormItem`, `MInput`, `MInputPassword`, `MInputNumber`, `MTextarea`, `MInputOtp`, `MInputColor`, `MInputGroup`, `MInputTags`, `MSelect`, `MTreeSelect`, `MCascadeSelect`, `MListbox`, `MSelectButton`, `MDatePicker`, `MAutoComplete`, `MCheckbox` / `MCheckboxGroup`, `MRadio` / `MRadioGroup`, `MSwitch`, `MToggleButton`, `MSlider`, `MRating`, `MKnob`, `MFileUpload`, `MFloatLabel`, `MIconField`, `MLabel`
-
-## Layout helpers
-
-`MGrid` / `MGridItem`, `MFlex`, `MSpace`, `MFluid`, `MDivider`, `MFieldset`, `MSplitter`, `MToolbar`
-
-## Data
-
-`MTable` (`columns` + **`rows`**, not `data`), `MTreeTable`, `MDataView`, `MTree`, `MPagination`, `MOrderList`, `MPickList`, `MStatus` / `MTag` / `MChip` / `MBadge`, `MAvatar` / `MAvatarGroup`, `MTimeline`, `MMeterGroup`, `MVirtualScroller`
-
-## Feedback
-
-| API / component | When | Decision |
-| --- | --- | --- |
-| `message` | **Default** one-line CRUD result | `feedback-choice` |
-| `toast` | `summary` + `detail`, or async / background feel | `feedback-choice` |
-| `<MMessage>` | Optional host for the `message` service. **Not** an inline alert | `feedback-choice` |
-| field `errorMessage` or token `role="alert"` | Persistent form / auth error | `feedback-choice` |
-| `MEmpty` | No-data / first-use / filtered empty | `empty-result-choice` |
-| `MResult` | Terminal outcome: success, failure, 403 / 404 / 500 | `empty-result-choice` |
-| `MLoading` / `v-loading` / `loading.service` | **Default** region or fullscreen loading mask | `loading-choice` |
-| `MSkeleton` | Layout known; placeholder while content arrives | `loading-choice` |
-| `MProgressBar` | Determinate progress | `loading-choice` |
-| `MProgressSpinner` | Inline spinner only, not a region mask | `loading-choice` |
-| `MBlockUI` | Block interaction without a loading message | `loading-choice` |
-
-## Overlays & menus
-
-`MDialog`, `MDrawer`, `MConfirmDialog` / `MConfirmPopup`, `MPopover`, `MTooltip`, `MDropdown` (**actions only**), `MContextMenu`, `MCommandMenu`, `MMenu` / `MMenubar` / `MTieredMenu` / `MMegaMenu`, `MTabs`, `MStepper`
-
-## Surfaces / media
-
-`MCard`, `MPanel`, `MAccordion`, `MCarousel`, `MGallery`, `MIcon`, `MScrollbar`, `MInplace`, `MScrollTop`, `MTerminal`
-
-## Scenario → decision
-
-Open MCP `recommend_component({ decision })` or the matching section in [decision-recipes.md](./decision-recipes.md) for **when / avoid / recipe props / anti-patterns**.
-
-| Intent | Decision id |
-| --- | --- |
-| Create / edit from a list (few–medium fields) vs long form page | `form-surface-choice` |
-| Dialog vs Drawer vs Popover vs Tooltip | `overlay-choice` |
-| Table vs DataView vs Tree / TreeTable | `data-display-choice` |
-| Select vs TreeSelect vs AutoComplete vs Radio / … | `selection-choice` |
-| Card vs Panel vs Fieldset | `surface-choice` |
-| PageContent vs Flex vs Space vs Grid | `layout-spacing-choice` |
-| PageFilters / Toolbar / Header / Section / Stat / Placeholder | `page-section-choice` |
-| Layout scroll vs MScrollbar vs built-in | `page-scroll-choice` |
-| Avoid double borders / extra Card wrappers | `surface-nesting-choice` |
-| Loading vs Skeleton vs Progress* vs BlockUI | `loading-choice` |
-| Status vs Tag vs Chip vs Badge | `status-label-choice` |
-| Empty vs Result | `empty-result-choice` |
-| Dropdown vs Menu vs ContextMenu vs CommandMenu | `action-menu-choice` |
-| message vs toast vs field / form alert | `feedback-choice` |
-| ConfirmDialog vs ConfirmPopup | `confirm-choice` |
-| Searchable list + paging | `page-section-choice` + `data-display-choice` (+ list golden) |
-| Delete / destructive | `confirm-choice` |
-| Login / auth | `feedback-choice` + `login-page` golden |
-| Marketing landing | `landing-page` golden (Express) |
-| Multi-step create | `wizard-form` golden |
-| Preferences / settings | `settings-page` golden |
-| Resizable two-pane | use `MSplitter` (see docs / `get_component`) |
-
-## Common mistakes
-
-| Wrong | Right |
-| --- | --- |
-| `MDropdown` as form enum | `MSelect` (`selection-choice`) |
-| `MTable` `:data` | `:rows` (`data-display-choice`) |
-| `<MMessage severity>` as an inline alert | Field `errorMessage`, or token `role="alert"` (`feedback-choice`) |
-| Hand `<table>` | `MTable` |
-| Hand modal div | `MDialog` / `MConfirmDialog` |
-| Hand spinner or `MProgressSpinner` as a region / page mask | `MLoading` / `v-loading` (`loading-choice`) |
-| Extra `MCard` around every `MPage*` block | `surface-nesting-choice` |
-| Assume undocumented props | MCP / docs lookup + `validate_usage` |
+# Component index (scenario map)
+
+Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_usage`).
+
+- **Selection + key props**: MCP `recommend_component`, or offline [decision-recipes.md](./decision-recipes.md) (generated from `packages/ui-mcp/src/decisions.ts`).
+- This file is a **catalog + decision-id index**, not a prop manual.
+
+## Shell
+
+| Component | Use |
+| --- | --- |
+| `MConfigProvider` | Root locale / theme / density / defaults |
+| `MLayout` family | Admin chrome (`MLayoutSider` is the layout sider) |
+| `MSidebar` | Standalone nav rail (not a `MDrawer`, not a substitute for `MLayoutSider` inside `MLayout`) |
+| `MBreadcrumb` | Path |
+| `MPageContent` / `MPageFilters` / `MPageToolbar` / `MPageHeader` / `MPageSection` / `MPageStat` / `MPagePlaceholder` | Page composition |
+| `MDock` | App dock / launcher, not page actions |
+
+## Actions
+
+`MButton` / `MButtonGroup` (primary `severity="primary"`, danger `severity="danger"`), `MSplitButton` (main action + menu), `MSpeedDial` (floating action cluster)
+
+## Forms · inputs
+
+`MForm`, `MFormItem`, `MInput`, `MInputPassword`, `MInputNumber`, `MTextarea`, `MInputOtp`, `MInputColor`, `MInputGroup`, `MInputTags`, `MSelect`, `MTreeSelect`, `MCascadeSelect`, `MListbox`, `MSelectButton`, `MDatePicker`, `MAutoComplete`, `MCheckbox` / `MCheckboxGroup`, `MRadio` / `MRadioGroup`, `MSwitch`, `MToggleButton`, `MSlider`, `MRating`, `MKnob`, `MFileUpload`, `MFloatLabel`, `MIconField`, `MLabel`
+
+## Layout helpers
+
+`MGrid` / `MGridItem`, `MFlex`, `MSpace`, `MFluid`, `MDivider`, `MFieldset`, `MSplitter`, `MToolbar`
+
+## Data
+
+`MTable` (`columns` + **`rows`**, not `data`), `MTreeTable`, `MDataView`, `MTree`, `MPagination`, `MOrderList`, `MPickList`, `MStatus` / `MTag` / `MChip` / `MBadge`, `MAvatar` / `MAvatarGroup`, `MTimeline`, `MMeterGroup`, `MVirtualScroller`
+
+## Feedback
+
+| API / component | When | Decision |
+| --- | --- | --- |
+| `message` | **Default** one-line CRUD result | `feedback-choice` |
+| `toast` | `summary` + `detail`, or async / background feel | `feedback-choice` |
+| `<MMessage>` | Optional host for the `message` service. **Not** an inline alert | `feedback-choice` |
+| field `errorMessage` or token `role="alert"` | Persistent form / auth error | `feedback-choice` |
+| `MEmpty` | No-data / first-use / filtered empty | `empty-result-choice` |
+| `MResult` | Terminal outcome: success, failure, 403 / 404 / 500 | `empty-result-choice` |
+| `MLoading` / `v-loading` / `loading.service` | **Default** region or fullscreen loading mask | `loading-choice` |
+| `MSkeleton` | Layout known; placeholder while content arrives | `loading-choice` |
+| `MProgressBar` | Determinate progress | `loading-choice` |
+| `MProgressSpinner` | Inline spinner only, not a region mask | `loading-choice` |
+| `MBlockUI` | Block interaction without a loading message | `loading-choice` |
+
+## Overlays & menus
+
+`MDialog`, `MDrawer`, `MConfirmDialog` / `MConfirmPopup`, `MPopover`, `MTooltip`, `MDropdown` (**actions only**), `MContextMenu`, `MCommandMenu`, `MMenu` / `MMenubar` / `MTieredMenu` / `MMegaMenu`, `MTabs`, `MStepper`
+
+## Surfaces / media
+
+`MCard`, `MPanel`, `MAccordion`, `MCarousel`, `MGallery`, `MIcon`, `MScrollbar`, `MInplace`, `MScrollTop`, `MTerminal`
+
+## Scenario → decision
+
+Open MCP `recommend_component({ decision })` or the matching section in [decision-recipes.md](./decision-recipes.md) for **when / avoid / recipe props / anti-patterns**.
+
+| Intent | Decision id |
+| --- | --- |
+| Create / edit from a list (few–medium fields) vs long form page | `form-surface-choice` |
+| Dialog vs Drawer vs Popover vs Tooltip | `overlay-choice` |
+| Table vs DataView vs Tree / TreeTable | `data-display-choice` |
+| Select vs TreeSelect vs AutoComplete vs Radio / … | `selection-choice` |
+| Card vs Panel vs Fieldset | `surface-choice` |
+| PageContent vs Flex vs Space vs Grid | `layout-spacing-choice` |
+| PageFilters / Toolbar / Header / Section / Stat / Placeholder | `page-section-choice` |
+| Layout scroll vs MScrollbar vs built-in | `page-scroll-choice` |
+| Avoid double borders / extra Card wrappers | `surface-nesting-choice` |
+| Loading vs Skeleton vs Progress* vs BlockUI | `loading-choice` |
+| Status vs Tag vs Chip vs Badge | `status-label-choice` |
+| Empty vs Result | `empty-result-choice` |
+| Dropdown vs Menu vs ContextMenu vs CommandMenu | `action-menu-choice` |
+| message vs toast vs field / form alert | `feedback-choice` |
+| ConfirmDialog vs ConfirmPopup | `confirm-choice` |
+| Searchable list + paging | `page-section-choice` + `data-display-choice` (+ list golden) |
+| Delete / destructive | `confirm-choice` |
+| Login / auth | `feedback-choice` + `login-page` golden |
+| Marketing landing | `landing-page` golden (Express) |
+| Multi-step create | `wizard-form` golden |
+| Preferences / settings | `settings-page` golden |
+| Resizable two-pane | use `MSplitter` (see docs / `get_component`) |
+
+## Common mistakes
+
+| Wrong | Right |
+| --- | --- |
+| `MDropdown` as form enum | `MSelect` (`selection-choice`) |
+| `MTable` `:data` | `:rows` (`data-display-choice`) |
+| `<MMessage severity>` as an inline alert | Field `errorMessage`, or token `role="alert"` (`feedback-choice`) |
+| Hand `<table>` | `MTable` |
+| Hand modal div | `MDialog` / `MConfirmDialog` |
+| Hand spinner or `MProgressSpinner` as a region / page mask | `MLoading` / `v-loading` (`loading-choice`) |
+| Extra `MCard` around every `MPage*` block | `surface-nesting-choice` |
+| Assume undocumented props | MCP / docs lookup + `validate_usage` |

package/template/.agents/skills/morya-ui-pages/references/design-system.md

@@ -1,101 +1,101 @@
-# Design system (consumer summary)
-
-Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
-
-## Principles
-
-1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
-2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
-3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
-4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
-5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
-
-## App shell
-
-```vue
-<script setup lang="ts">
-import { MConfigProvider, zhCN } from 'morya-ui'
-import 'morya-ui/styles.css'
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout fill-viewport has-sider>
-      <MLayoutSider bordered>
-        <MMenu
-          :model="[
-            { key: 'users', label: 'Users', icon: 'user', to: '/users' },
-            { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
-          ]"
-        />
-      </MLayoutSider>
-      <MLayout>
-        <MLayoutHeader>...</MLayoutHeader>
-        <MLayoutContent>...</MLayoutContent>
-      </MLayout>
-    </MLayout>
-  </MConfigProvider>
-</template>
-```
-
-| Role | Prefer |
-| --- | --- |
-| Admin chrome | `MLayout fillViewport` + sider / header / content |
-| Sider nav | `MMenu` |
-| Page stack | `MPageContent` inside `MLayoutContent` |
-| List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
-| Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
-| Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
-| Module cards | `MCard` / `MPanel` / `MFieldset` |
-| Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
-
-## Forms
-
-- `MForm` + `MFormItem` with `name` aligned to rules.
-- Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
-- Default size medium; dense apps may use `size="small"` or ConfigProvider density.
-- Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
-
-## Data display
-
-- `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
-- Height: only for **full-viewport admin lists** whose main job is one table, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded/short/document-scroll tables — see [page-layouts.md](page-layouts.md) § List height.
-- Row status → `MStatus`; categories / closable labels → `MTag`.
-- Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
-- Pagination: table `paginator` or sibling `MPagination`.
-- Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
-- Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
-- Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
-
-## Overlays
-
-| Need | Component |
-| --- | --- |
-| Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
-| Detail / edit modal | `MDialog` |
-| Side filter / detail | `MDrawer` |
-| Field hint | `MTooltip` |
-
-## Token cheat sheet
-
-| Use | Variable |
-| --- | --- |
-| Page background | `--m-color-surface` |
-| Body text | `--m-color-text` |
-| Muted text | `--m-color-text-muted` |
-| Border | `--m-color-border` |
-| Brand / link | `--m-color-primary` |
-| Danger | `--m-color-danger` |
-| Section gap | `--m-space-4` / `--m-space-6` |
-| Card radius | `--m-radius-md` |
-| Card shadow | `--m-shadow-md` |
-
-Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
-
-## Bans
-
-- Second UI library on the same page.
-- Hard-coded theme colors that break `[data-theme="dark"]`.
-- `<div @click>` instead of `MButton` / `<button>`.
-- Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
-- Skipping `import 'morya-ui/styles.css'`.
+# Design system (consumer summary)
+
+Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
+
+## Principles
+
+1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
+2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
+3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
+4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
+5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
+
+## App shell
+
+```vue
+<script setup lang="ts">
+import { MConfigProvider, zhCN } from 'morya-ui'
+import 'morya-ui/styles.css'
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport has-sider>
+      <MLayoutSider bordered>
+        <MMenu
+          :model="[
+            { key: 'users', label: 'Users', icon: 'user', to: '/users' },
+            { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
+          ]"
+        />
+      </MLayoutSider>
+      <MLayout>
+        <MLayoutHeader>...</MLayoutHeader>
+        <MLayoutContent>...</MLayoutContent>
+      </MLayout>
+    </MLayout>
+  </MConfigProvider>
+</template>
+```
+
+| Role | Prefer |
+| --- | --- |
+| Admin chrome | `MLayout fillViewport` + sider / header / content |
+| Sider nav | `MMenu` |
+| Page stack | `MPageContent` inside `MLayoutContent` |
+| List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
+| Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
+| Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
+| Module cards | `MCard` / `MPanel` / `MFieldset` |
+| Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
+
+## Forms
+
+- `MForm` + `MFormItem` with `name` aligned to rules.
+- Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
+- Default size medium; dense apps may use `size="small"` or ConfigProvider density.
+- Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
+
+## Data display
+
+- `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
+- Height: only for **full-viewport admin lists** whose main job is one table, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded/short/document-scroll tables — see [page-layouts.md](page-layouts.md) § List height.
+- Row status → `MStatus`; categories / closable labels → `MTag`.
+- Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
+- Pagination: table `paginator` or sibling `MPagination`.
+- Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
+- Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
+- Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
+
+## Overlays
+
+| Need | Component |
+| --- | --- |
+| Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
+| Detail / edit modal | `MDialog` |
+| Side filter / detail | `MDrawer` |
+| Field hint | `MTooltip` |
+
+## Token cheat sheet
+
+| Use | Variable |
+| --- | --- |
+| Page background | `--m-color-surface` |
+| Body text | `--m-color-text` |
+| Muted text | `--m-color-text-muted` |
+| Border | `--m-color-border` |
+| Brand / link | `--m-color-primary` |
+| Danger | `--m-color-danger` |
+| Section gap | `--m-space-4` / `--m-space-6` |
+| Card radius | `--m-radius-md` |
+| Card shadow | `--m-shadow-md` |
+
+Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
+
+## Bans
+
+- Second UI library on the same page.
+- Hard-coded theme colors that break `[data-theme="dark"]`.
+- `<div @click>` instead of `MButton` / `<button>`.
+- Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
+- Skipping `import 'morya-ui/styles.css'`.