@morya-ui/setup 0.2.9 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@morya-ui/setup",
   "type": "module",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "One-shot setup for morya-ui: install the library, Cursor MCP, Agent skills, and design config.",
   "license": "MIT",
   "homepage": "https://github.com/morya-space/morya-ui/tree/main/packages/setup#readme",

package/template/.agents/skills/morya-ui-pages/SKILL.md

@@ -63,14 +63,14 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
 
 | Need | Prefer (MCP) | Else read |
 | --- | --- | --- |
-| Ops pattern | `recommend_page` → `get_golden_page` | [page-layouts.md](references/page-layouts.md) |
-| Account / Express / empty | `recommend_page` → `get_golden_page` (`login-page` / `landing-page` / `empty-state`) | [surfaces.md](references/surfaces.md) |
+| Ops pattern | `recommend_page` → **`get_golden_page`** (mirror; do not invent a parallel scaffold aesthetic) | [page-layouts.md](references/page-layouts.md) |
+| Account / Express / empty / result | `recommend_page` → `get_golden_page` (`login-page` / `landing-page` / `empty-state` / `result-page`) | [surfaces.md](references/surfaces.md) |
 | Visual direction | — | [visual-craft.md](references/visual-craft.md) (Ops polish / atmosphere / anti-defaults) |
-| Components | `search` / `get_component` / `recommend_component` | [component-index.md](references/component-index.md) |
+| Components / **API truth** | `search` / **`get_component`** / `get_example` / `recommend_component` | [component-index.md](references/component-index.md) |
 | Tokens / rules | `get_design_rules` | [design-system.md](references/design-system.md) |
 | Snippet | `get_page_snippet` | golden / surface excerpt |
 | Feedback API | — | [feedback.md](references/feedback.md) |
-| Soft check | `validate_page` | [review-checklist.md](references/review-checklist.md) |
+| **Required checks** | **`validate_usage`** (every `M*` you used) + `validate_page` | [review-checklist.md](references/review-checklist.md) |
 
 ### 3. Compose
 
@@ -90,6 +90,9 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
 - Enums → `MSelect` / `MTreeSelect`; action menus → `MDropdown`.
 - Destructive → `MConfirmDialog` / `MConfirmPopup`.
 - Feedback → default **`message`**; `toast` only for summary+detail / async. See [feedback.md](references/feedback.md).
+- Motion → intensity with `useMotion` (`full` / `reduced` / `none`); overlay enter/exit with `transition` prop or `createMoryaUI({ motion: { transitions } })` — do not invent a second animation stack. Prefer MCP / docs `motion` guide.
+- **Before craft:** for each unfamiliar or newly written `M*` usage, call MCP **`get_component` / `get_example`**, then **`validate_usage`**. Fix every `unknown-prop` / `unknown-event` before delivery.
+- `recommend_page(includeScaffold: true)` returns the **golden page source** when one exists — remap copy/data only; never treat generated fallback as the visual target.
 
 ### 5. Craft pass (always — lane-aware)
 
@@ -97,14 +100,21 @@ Run **before** delivery. Do not stop at a structurally correct shell.
 
 - **Ops:** apply [visual-craft.md](references/visual-craft.md) § Ops polish (one primary, menu icons, `MStatus` in tables, designed empty, no decorative cards).
 - **Account / Flow:** one calm brand or empty-state cue from § Atmosphere recipes; form errors via `errorMessage` / token `role="alert"`.
-- **Express:** short design plan + one signature; avoid AI-default looks; optional 1–2 token-only motions with `prefers-reduced-motion`.
+- **Express:** short design plan + one signature; avoid AI-default looks; optional 1–2 token-only motions; honor `useMotion` / `prefers-reduced-motion` (or `respectReducedMotion`).
 - **All lanes:** responsive, focus visible, domain-real copy (active voice).
 
 Named polish modes (`quieter` | `bolder` | `clarify` | `audit` | …): use as an **extra** pass when the user asks to improve an existing screen. See [visual-craft.md](references/visual-craft.md) § Polish modes.
 
 ### 6. Review
 
-Use [review-checklist.md](references/review-checklist.md) (contract + craft sections). Run MCP `validate_page` when available (advisory).
+Use [review-checklist.md](references/review-checklist.md) (contract + craft sections).
+
+**Required when MCP is available:**
+
+1. `validate_usage` on the page (or per component) — API accuracy gate  
+2. `validate_page` — layout / token / contract advisories  
+
+Do not deliver with unresolved `unknown-prop` / `unknown-event`.
 
 ## Hard boundaries
 
@@ -112,6 +122,7 @@ Use [review-checklist.md](references/review-checklist.md) (contract + craft sect
 - No hand-rolled table/modal when `MTable` / `MDialog` / `MDrawer` fit.
 - No invented props / events / slots.
 - No defaulting every success to `toast`.
+- No substituting a generated scaffold for `get_golden_page` when a golden sample exists.
 - Ops surfaces follow golden layouts first — do not replace them with marketing heroes.
 - Express surfaces still use `M*` for controls and `--m-*` for color/space; do not introduce shadcn/Element/etc. stacks suggested by generic design skills.
 - Soft-load companions only; never require Impeccable / UI-UX-Pro-Max / Frontend Design to be installed.

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

@@ -40,13 +40,13 @@
     {
       "id": 7,
       "prompt": "做一个三步「创建工作空间」向导：1 名称与地区 2 邀请成员（邮箱标签）3 确认。用 morya-ui 的 Stepper + Form；每步一个主任务；最后提交成功进入结果页（查看工作空间 / 返回）。输出一个或两个 SFC。",
-      "expected_output": "Flow wizard: MStepper, per-step MForm, MInputTags or similar for invites, clear next/back/submit, success with next actions, message/toast per feedback rules.",
+      "expected_output": "Flow wizard: wizard-form golden — 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: MResult 403 or equivalent, plain explanation, escape actions with MButton, no jokey 404 essay, on-token.",
+      "expected_output": "System surface: result-page golden — MResult status=403, #footer escape actions, no jokey 404 essay, on-token, validate_usage clean.",
       "files": []
     },
     {
@@ -54,6 +54,18 @@
       "prompt": "把上面的课程列表再 polish 一轮：去掉多余实心按钮、保证只有一个主按钮、表格状态改成 MStatus、补上 MEmpty。不要改成营销页。",
       "expected_output": "Ops quieter polish: one primary, MStatus, MEmpty, text row actions, still list golden structure.",
       "files": []
+    },
+    {
+      "id": 10,
+      "prompt": "给「用户管理」做资源详情页：面包屑、标题旁启用状态、编辑/返回/删除；摘要标签；基本信息属性网格；下方近期活动表。Vue3 + morya-ui，对齐详情黄金样例，不要做成落地页。",
+      "expected_output": "Ops detail: 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: list stays, MDialog + MForm + #footer, message.success not toast string, MTable rows.",
+      "files": []
     }
   ]
 }

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

@@ -58,8 +58,9 @@ Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_u
 | Intent | Prefer |
 | --- | --- |
 | Searchable list + paging | `MPageFilters` + `MTable` (+ paginator) |
-| Create / edit from a list (few–medium fields) | **`MDialog` + `MForm`** (stay on the list) |
+| Create / edit from a list (few–medium fields) | **`form-in-dialog`** golden (`MDialog` + `MForm`) |
 | Create / edit long / multi-section entity | Form golden page **or** `MDrawer` |
+| Resource detail / profile | `detail-page` golden |
 | Delete | `MConfirmDialog` |
 | Lightweight inline status | `MStatus` (dot + label) |
 | Status chip / closable label | `MTag` severities |
@@ -69,9 +70,11 @@ Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_u
 | Login / auth | `login-page` golden + `MInputPassword` |
 | Marketing landing | `landing-page` golden + `MButton` / `MTag` / `MAccordion` |
 | Empty list / zero state | `MEmpty` (+ `empty-state` golden or `MTable` `#empty`) |
-| Submit success / HTTP error page | `MResult` |
+| Preferences / settings | `settings-page` golden (`MTabs` + `tabs`) |
+| Multi-step create | `wizard-form` golden (`MStepper` + `steps`) |
 | Region or page is waiting | `MLoading`, `v-loading`, or `loading.service`; known layout → `MSkeleton` |
 | Local capped scroll | Explicit `MScrollbar` |
+| Resizable two-pane (editor / preview, master-detail) | `MSplitter` |
 | Admin sider nav | `MMenu` inside `MLayoutSider` (or `MSidebar` when the shell is not `MLayout`) |
 | Few options, all visible | `MRadio` or `MSelectButton` |
 | Always-visible option list | `MListbox` |

package/template/.agents/skills/morya-ui-pages/references/page-layouts.md

@@ -5,11 +5,16 @@ When generating a full page, pick a type and **mirror the golden-page block orde
 | Type | `get_golden_page` id |
 | --- | --- |
 | List | `list-page` |
-| Form | `form-page` |
+| Form (long / dedicated) | `form-page` |
+| List create/edit dialog | `form-in-dialog` |
+| Detail | `detail-page` |
 | Dashboard | `dashboard-page` |
 | Login | `login-page` |
 | Landing | `landing-page` |
 | Empty | `empty-state` |
+| Result / 403 / terminal | `result-page` |
+| Settings | `settings-page` |
+| Wizard | `wizard-form` |
 
 Via MCP: `recommend_page` → `get_golden_page`; local edits: `get_page_snippet` (`filters`, `toolbar`, `form-actions`, `scrollable-panel`, …).
 
@@ -65,24 +70,48 @@ Craft: spacious density + Ops polish; do not turn the first viewport into a mark
 
 Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
 
-## Detail page — suggested order
+## Detail page — block order
 
 1. Same admin chrome as list (breadcrumb → `MPageContent`)
-2. `MPageHeader` — title, status via `MStatus` (light) or `MTag` (chip), primary/secondary actions
-3. Summary `MCard` or definition sections via `MPageSection`
-4. Related data: nested `MTabs` + `MTable` / timeline
-5. Edit via route, or `MDrawer` / `MDialog` — do not turn detail into a marketing page
+2. `MPageHeader` — title, `MStatus` in `#actions` (or chip `MTag` for categories), primary/secondary/danger actions
+3. Summary `MPageSection` + property `MCard` (definition grid with `--m-*` only)
+4. Related data: `MCard` + `MTable` / tabs / timeline
+5. Short edit → same-page `MDialog` (`form-in-dialog`); long edit → `form-page` / `MDrawer`
 
-## Settings page — suggested order
+Mirror MCP `get_golden_page` `detail-page`.
 
-1. Admin chrome + `MPageContent width="narrow"` (or split: side `MMenu`/`MTabs` + content)
-2. Grouped `MPageSection` or `MTabs` by concern (资料 / 通知 / 安全)
-3. Each group: `MForm` + save actions (section-level or page-level — be consistent)
-4. Dangerous zone last: `severity="danger"` + confirm
+## List create/edit dialog — block order
+
+1. Stay on the list page (`MPageToolbar` + `MTable`)
+2. `MDialog` ~`28–36rem` + `MForm` fields
+3. Actions in Dialog `#footer` (cancel secondary/text + save primary)
+4. Success → `message.success` one-liner, then close
+
+Mirror MCP `get_golden_page` `form-in-dialog`.
+
+## Settings page — block order
+
+1. Admin chrome + `MPageContent width="narrow"`
+2. `MPageHeader` (title + short description)
+3. `MTabs` with **`v-model` + `:tabs`** (not `:items` / `:value`)
+4. Per tab: `MPageSection variant="form"` + `MForm` + save in `variant="actions"`
+5. Dangerous zone last: `severity="danger"` + confirm
+
+Mirror MCP `get_golden_page` `settings-page`.
+
+## Wizard — block order
+
+1. Narrow `MPageContent` + `MPageHeader`
+2. `MStepper v-model` + **`:steps`** (not `:items`)
+3. One form/job per step; sticky `上一步` / `下一步` / `创建`
+4. Success → `result-page` / `MResult`
+
+Mirror MCP `get_golden_page` `wizard-form`.
 
 ## Hybrids
 
-- List + row edit dialog → list golden page + `MDialog` form body.
+- List + row edit dialog → `form-in-dialog` golden (or list golden + dialog body).
 - List + side detail → list + `MDrawer`.
+- Resource detail → `detail-page` golden.
 - Settings without admin chrome → still use `MPageContent` + `MPageSection`; omit sider only if the host app already provides chrome.
 - Non-Ops surfaces (auth, landing, empty, wizard) → [surfaces.md](surfaces.md), not these golden orders.

package/template/.agents/skills/morya-ui-pages/references/review-checklist.md

@@ -5,11 +5,13 @@
 - [ ] Only `morya-ui` UI primitives (no second kit)
 - [ ] `morya-ui/styles.css` imported at app/demo entry
 - [ ] `MConfigProvider` at a sensible root when building a full screen
-- [ ] No invented props / events / slots (MCP or docs checked)
+- [ ] No invented props / events / slots (MCP `get_component` / docs checked)
+- [ ] MCP **`validate_usage`** run; no unresolved `unknown-prop` / `unknown-event`
 - [ ] Select vs Dropdown roles correct
 - [ ] `MTable` uses `rows` (not `data`)
 - [ ] One-line results use `message`; summary+detail / async use `toast`
 - [ ] Destructive flows use confirm dialogs
+- [ ] MCP **`validate_page`** run when generating a full page (advisory suggestions addressed or consciously waived)
 
 ## Craft (all lanes — default pass)
 
@@ -54,8 +56,6 @@
 - [ ] Usable on a narrow viewport
 - [ ] Focus visible on interactive elements
 
-## Optional MCP
-
-- [ ] `validate_page` / `validate_usage` reviewed when available
+When MCP is available, contract checks above (**`validate_usage`** / **`validate_page`**) are required — not optional.
 
 If the project has `pnpm check:colors`, suggest running it after edits.

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

@@ -31,7 +31,7 @@ Keep credential forms quiet: one primary CTA, clear labels, no decorative noise
 | Empty state | Invite first action | Golden: MCP `get_golden_page` `empty-state` — `MEmpty` + primary/secondary `MButton` in `#extra`; dashed shell + radial wash from visual-craft |
 | Onboarding | Teach the product path | `MStepper` or paced cards; one decision per step; finish → Ops home |
 | Wizard | Multi-step create | `MStepper` + `MForm` per step + sticky actions (`上一步` / `下一步` / `提交`) |
-| Success / result | Confirm completion | `MResult` (`status="success"` / `error` …) + next actions (`查看详情` / `返回列表`) |
+| Success / result | Confirm completion | `MResult status="success"` / `error` + `#footer` next actions (`查看详情` / `返回列表`); same shell idea as `result-page` |
 
 Copy must tell the user **what to do next**, not celebrate the system.
 
@@ -39,8 +39,8 @@ Copy must tell the user **what to do next**, not celebrate the system.
 
 | Surface | Job | Recipe |
 | --- | --- | --- |
-| 404 / not found | Reorient | `MResult status="404"` + `返回首页` / `返回上一页` |
-| Permission denied | Explain + escape | `MResult status="403"` + request access / switch account / go home |
+| Permission denied | Explain + escape | Golden: MCP `get_golden_page` `result-page` — `MResult status="403"` + `#footer` (not `#extra`) |
+| 404 / not found | Reorient | `MResult status="404"` + `返回首页` / `返回上一页` (mirror `result-page` shell) |
 | Maintenance / error | Honest status | `MResult status="500"`; what happened + retry + support. Persistent form errors: field `errorMessage` or a token `role="alert"`, not `<MMessage>` as an alert |
 
 Avoid witty 404 essays that hide the exit paths.

package/template/.cursor/rules/design-system.mdc

@@ -8,9 +8,9 @@ alwaysApply: true
 1. **先读** 项目根目录 `DESIGN.md`。组件选型用 MCP，或 skill `references/component-index.md`。
 2. **只用** `morya-ui` 的 `M*` 组件；全局样式 `morya-ui/styles.css`。
 3. **颜色/间距/圆角** 使用 `--m-*` CSS 变量，禁止裸 hex/rgb（见 `scripts/check-raw-colors.mjs`）。
-4. **页面结构** 用 MCP `get_golden_page`（`list-page` / `form-page` / `dashboard-page` / `login-page` / `landing-page` / `empty-state`），不要发明新布局范式。
+4. **页面结构** 用 MCP `get_golden_page`（`list-page` / `form-page` / `form-in-dialog` / `detail-page` / `dashboard-page` / `login-page` / `landing-page` / `empty-state` / `result-page` / `settings-page` / `wizard-form`），不要发明新布局范式。
 5. **表单选项** 用 `MSelect` / `MTreeSelect`；**动作菜单** 用 `MDropdown`。
-6. 不确定 API 时查文档站或 MCP，**禁止臆造 prop**。
+6. 不确定 API 时查文档站或 MCP `get_component`，**禁止臆造 prop**；写完后必须 `validate_usage`。
 7. 根节点用 `MConfigProvider`；后台布局用 `MLayout` 系列。
 8. **操作反馈默认 `message` API**；仅 `summary + detail` 或异步通知用 `toast`；表单常驻错误用字段 `errorMessage` 或 token 样式的 `role="alert"`（`<MMessage>` 只是 message 宿主）。见 skill `references/feedback.md`。
 

package/template/.cursor/rules/page-layout.mdc

@@ -11,6 +11,11 @@ alwaysApply: false
 | --- | --- |
 | 列表页 | `list-page` |
 | 表单页 | `form-page`（仅长表单 / 独立配置页） |
+| 列表内弹窗表单 | `form-in-dialog` |
+| 详情页 | `detail-page` |
+| 结果 / 阻断页 | `result-page` |
+| 设置页 | `settings-page` |
+| 分步向导 | `wizard-form` |
 | 仪表盘 | `dashboard-page` |
 | 登录页 | `login-page` |
 | 营销落地 | `landing-page` |

package/template/DESIGN.md

@@ -31,6 +31,10 @@
 | 错误 | `--m-color-danger` |
 | 区块间距 | `--m-space-4` / `--m-space-6` |
 | 圆角 / 阴影 | `--m-radius-md` / `--m-shadow-md` |
+| 动效时长 | `--m-motion-fast/normal/enter/exit` |
+| 进出场位移 / 缓动 | `--m-motion-distance` / `--m-motion-ease` |
+
+动效强度用 `useMotion`（`data-m-motion`）；进出场预设用 `motion.transitions` / 组件 `transition`（见文档站「动效」）。
 
 ## 4. 禁止项
 
@@ -52,3 +56,4 @@
 - 包：`morya-ui` · 样式：`morya-ui/styles.css`
 - 页面配方：`.agents/skills/morya-ui-pages/`（及 setup 时勾选的 companion）
 - 主题 API：`useTheme` / `useDensity` / `useMotion`
+- 动效预设：`createMoryaUI({ motion })`、`componentDefaults.*.transition`、浮层 `transition` prop；详情见文档 `/docs/motion`