@morya-ui/setup 0.2.5

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

@@ -0,0 +1,49 @@
+# Review checklist
+
+## Contract (all lanes)
+
+- [ ] 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)
+- [ ] Select vs Dropdown roles correct
+- [ ] One-line results use `message`; summary+detail / async use `toast`
+- [ ] Destructive flows use confirm dialogs
+
+## Ops
+
+- [ ] Matches golden / [page-layouts.md](page-layouts.md) block order
+- [ ] `MPage*` used instead of ad-hoc page chrome where applicable
+- [ ] Tables not wrapped in decorative `MCard` solely for borders
+- [ ] Filters / toolbar / form actions follow documented patterns
+- [ ] No marketing hero bolted onto a CRUD shell
+
+## Account / Flow / System
+
+- [ ] Primary CTA obvious; escape paths present (back / home / support)
+- [ ] Auth errors persistent via `<MMessage>` or field errors where appropriate
+- [ ] Empty uses `MEmpty` (or table `#empty` with `MEmpty`); success / HTTP errors use `MResult`
+- [ ] Empty / success states tell the user the next action
+- [ ] Inline status prefers `MStatus`; chip-like labels use `MTag`
+- [ ] Wizard steps: one job each; actions labeled clearly
+
+## Express
+
+- [ ] Short design plan existed (subject, palette roles, signature)
+- [ ] First viewport has one job (not a dashboard of promos)
+- [ ] Controls still `M*`; colors/spacing map to `--m-*` / theme
+- [ ] Avoided AI-default looks unless brief requested them ([visual-craft.md](visual-craft.md))
+- [ ] Motion limited and respectful of reduced-motion
+
+## Tokens, a11y, responsive
+
+- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline)
+- [ ] Labels visible; icon buttons have `aria-label`
+- [ ] Usable on a narrow viewport
+- [ ] Focus visible on interactive elements
+
+## Optional MCP
+
+- [ ] `validate_page` / `validate_usage` reviewed when available
+
+If the project has `pnpm check:colors`, suggest running it after edits.

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

@@ -0,0 +1,89 @@
+# Surface taxonomy
+
+Pick a lane, then a surface. Prefer project golden pages for **Ops**; use the recipes below for everything else. Always implement interactive controls with `morya-ui`.
+
+## Ops (admin / console)
+
+| Surface | Job | Compose from |
+| --- | --- | --- |
+| List | Scan, filter, act on many rows | Golden list + [page-layouts.md](page-layouts.md) |
+| Form | Create / edit one entity | Golden form |
+| Dashboard | Orient + jump to work | Golden dashboard |
+| Detail | Read-heavy record + secondary actions | `MPageHeader` + `MDescriptions`-style sections via `MCard`/`MPageSection`, actions in toolbar; edit via route or `MDrawer`/`MDialog` |
+| Settings | Grouped preferences | Narrow `MPageContent` + stacked `MPageSection` / `MTabs` + `MForm` |
+| Hybrid list | List + drawer/dialog | List golden + overlay recipe |
+
+## Account
+
+| Surface | Job | Recipe |
+| --- | --- | --- |
+| Login / register | Authenticate with trust | Golden: `docs/golden-pages/login-page.vue` — split brand + `MForm` (`MInput`, `MInputPassword`); form-level errors via token `role="alert"` (not Toast) |
+| Invite / accept | Join org | Same shell; show org name clearly |
+| Forgot / reset | Recover access | Short form + success state with next step |
+| Profile / account | Edit self | Settings-like sections; avatar via `MAvatar` |
+
+Keep credential forms quiet: one primary CTA, clear labels, no decorative noise beside the brand panel.
+
+## Flow
+
+| Surface | Job | Recipe |
+| --- | --- | --- |
+| Empty state | Invite first action | Golden: `docs/golden-pages/empty-state.vue` — `MEmpty` + primary/secondary `MButton` in `#extra` |
+| 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 (`查看详情` / `返回列表`) |
+
+Copy must tell the user **what to do next**, not celebrate the system.
+
+## System
+
+| Surface | Job | Recipe |
+| --- | --- | --- |
+| 404 / not found | Reorient | `MResult status="404"` + `返回首页` / `返回上一页` |
+| Permission denied | Explain + escape | `MResult status="403"` + request access / switch account / go home |
+| Maintenance / error | Honest status | `MResult status="500"` or persistent `<MMessage>` banner; what happened + retry + support |
+
+Avoid witty 404 essays that hide the exit paths.
+
+## Express (marketing / public)
+
+Use when the brief is landing, pricing, launch, or docs marketing — **not** for Ops CRUD shells.
+
+| Surface | Job | Recipe |
+| --- | --- | --- |
+| Landing | Convert / explain product | Golden: `docs/golden-pages/landing-page.vue` — one-job hero; CTAs → `MButton`; chips → `MTag`; FAQ → `MAccordion` |
+| Pricing | Choose a plan | Clear plan cards (`MCard`) + primary CTA; highlight recommended plan without clutter |
+| Feature showcase | Prove capability | Alternating media/copy; live `M*` demo only if lightweight |
+| Docs marketing chrome | Frame documentation | Header + nav using `M*` where suitable; content area stays readable |
+
+Before coding Express: short design plan in [visual-craft.md](visual-craft.md). Map colors to `--m-*` / theme overrides; do not paste a second kit.
+
+**Anti-patterns for Express:** inset hero cards instead of a full-bleed thesis; pill-stat strips in the first viewport; purple-on-white / cream-terracotta / broadsheet defaults when the brief did not ask for them.
+
+## Overlay
+
+When the dialog/drawer **is** the task:
+
+| Surface | Recipe |
+| --- | --- |
+| Edit / create dialog | `MDialog` + compact `MForm` + footer actions |
+| Detail drawer | `MDrawer` + header + sections + optional edit |
+| Confirm | `MConfirmDialog` / `MConfirmPopup` — do not reinvent |
+| Command menu | `MCommandMenu` for keyboard-first jump / actions |
+
+Host page stays stable; focus management comes from the overlay component.
+
+## Lane mixing
+
+| Ask | Treat as |
+| --- | --- |
+| “后台列表 + 好看一点” | Ops first, light craft (spacing/type), no landing hero |
+| “登录页有品牌感” | Account + Express craft on brand panel only |
+| “产品官网” | Express; Ops patterns do not apply |
+| “空状态设计精致一点” | Flow empty + visual-craft signature (one risk) |
+
+## MCP hints
+
+- Ops whole page: `recommend_page` → `get_golden_page` → `get_design_rules`
+- Section: `get_page_snippet`
+- Any lane: `search` / `get_component` before unfamiliar APIs

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

@@ -0,0 +1,83 @@
+# Visual craft (distilled)
+
+Portable craft for morya-ui consumers. Inspired by **Frontend Design**, **Impeccable**, and **UI-UX-Pro-Max** — without requiring those skills to be installed. Implementation must still honor the morya-ui contract.
+
+## When to lean on craft
+
+| Lane | Craft intensity |
+| --- | --- |
+| Ops CRUD | Low — clarity, density, golden structure |
+| Account / Flow / System | Medium — trust, hierarchy, one calm brand cue |
+| Express | High — design plan + one signature risk |
+
+## Design plan (Express & branded moments)
+
+Before code, decide:
+
+1. **Color** — 4–6 roles (bg, surface, text, muted, accent, danger). Prefer existing `--m-*`. If the project already customizes theme, extend that system; do not invent a parallel hex soup in scoped CSS.
+2. **Type** — display vs body vs utility. For Ops, stick to theme fonts. For Express, a distinctive pairing is OK if fonts are loadable and fallbacks exist.
+3. **Layout concept** — one sentence + rough hierarchy (ASCII wireframe optional).
+4. **Signature** — the single memorable element (motion, crop, editorial type, product artifact). Everything else quieter.
+
+Critique the plan: if it looks like the plan you would write for *any* SaaS, revise until it fits **this** subject.
+
+## Anti-default looks (AI clusters)
+
+Avoid spending free axes on these unless the brief asks:
+
+1. Warm cream (~`#F4F1EA`) + high-contrast serif + terracotta
+2. Near-black + single acid-green / vermilion accent
+3. Broadsheet: hairline rules, zero radius, dense newspaper columns
+4. Purple-on-white / purple-to-indigo gradient SaaS cliché
+5. Glow stacks, pill chip clouds, emoji as decoration, multi-layer shadows as personality
+
+Also avoid: Inter/Roboto/Arial as the *expressive* display choice on Express surfaces when the brief allows character (utility UI may keep system/theme fonts).
+
+## Hierarchy & composition
+
+- **Hero is a thesis** (Express): one job in the first viewport — not stats + schedule + promos together.
+- **Structure encodes meaning**: numbered steps only when order is real information.
+- **Cards**: default off for Express heroes; use `MCard` when it groups an interaction or plan choice.
+- **Motion**: orchestrate 2–3 intentional moments max; respect `prefers-reduced-motion`. Prefer transform/opacity over layout thrash.
+- **Density**: Ops may be compact; Express needs breathing room — match the lane.
+
+## UX writing
+
+- Name controls by user intent (`保存更改`), not system guts (`提交表单实体`).
+- Active voice; same verb through the flow (Publish → Published).
+- Errors: what failed + how to fix; no vague apology.
+- Empty states: invitation to act, not a dead end.
+- Ops copy stays plain; Express may have voice, still specific to the product.
+
+## Polish modes (Impeccable-inspired)
+
+When the user asks to improve an existing surface, pick a mode:
+
+| Mode | Intent |
+| --- | --- |
+| `audit` | Hierarchy, contrast, a11y, spacing, anti-patterns — report then fix |
+| `clarify` | Labels, errors, empty copy, button verbs |
+| `quieter` | Remove competing accents, chips, shadows; keep one focus |
+| `bolder` | Strengthen the signature only; do not shout everywhere |
+| `typeset` | Scale, weight, line-length, truncation |
+| `adapt` | Responsive breakpoints; touch targets |
+| `delight` | One tasteful micro-interaction — never clutter |
+
+Always remediate with `M*` + tokens, not raw replacement controls.
+
+## Industry / mood (UI-UX-Pro-Max-inspired)
+
+For Express briefs that only say “modern / professional / playful”:
+
+1. Infer industry from the product (fintech ≠ kids education).
+2. Pick mood keywords (e.g. “editorial + precise”, “warm workshop”, “clinical calm”).
+3. Map mood → token roles and signature — **then** implement with morya-ui.
+4. Discard any suggestion to switch stacks (shadcn, generic Tailwind kit, etc.).
+
+## Quality floor (all lanes)
+
+- Responsive to a usable mobile layout
+- Visible `:focus-visible`
+- Keyboard reaches primary actions
+- No raw theme colors that break dark mode when the app supports it
+- Icons decorative vs informative handled correctly (`aria-hidden` vs `aria-label`)

package/template/.cursor/rules/coding-style.mdc

@@ -0,0 +1,41 @@
+---
+description: Vue 3 + TypeScript 业务代码风格（Morya UI 项目）
+globs: "**/*.{ts,vue}"
+alwaysApply: false
+---
+
+# 编码风格
+
+## Vue
+
+- 使用 `<script setup lang="ts">`。
+- 组件名 PascalCase；模板中用 `M*` 前缀组件。
+- `v-model` 与组件库 emit 对齐（如 `v-model:page`）。
+- 页面级样式 `scoped`；仅使用 `--m-*` 与设计令牌。
+
+## TypeScript
+
+- Props/emit 显式类型；避免 `any`。
+- 异步提交：`loading` ref + `try/finally`。
+
+## 文件组织
+
+```text
+src/
+  views/          # 路由页面
+  components/     # 业务组件
+  composables/    # 复用逻辑
+  api/            # 请求层
+```
+
+## 命名
+
+- 页面：`UserListView.vue` / `UserFormView.vue`
+- 路由 path kebab-case：`/users/create`
+
+## 检查
+
+```bash
+pnpm check:colors   # 裸色值扫描
+pnpm typecheck
+```

package/template/.cursor/rules/component-usage.mdc

@@ -0,0 +1,41 @@
+---
+description: Morya UI 组件用法与选型（Vue 业务代码）
+globs: src/**/*.vue
+alwaysApply: false
+---
+
+# 组件用法
+
+## 引入
+
+```ts
+import { MButton, MInput } from 'morya-ui'
+// 按需：import MButton from 'morya-ui/button'
+//        import 'morya-ui/button/style'
+```
+
+## 必选模式
+
+- 表单：`MForm` + `MFormItem` + 字段组件；提交用 `@submit` + `type="submit"`。
+- 表格：`MTable` 的 `columns` + `data` + `row-key`；单元格用 `#cell-{key}` 插槽。
+- 浮层：详情/编辑 `MDialog`；侧栏 `MDrawer`；删除确认 `MConfirmDialog`。
+- 反馈（**默认 Message**）：
+  - 单行操作结果 → `message.success/info/warn/error('…')`
+  - 有标题 + 详情 / 异步通知 → `toast.*({ summary, detail })`
+  - 表单区常驻错误 → `<MMessage>` 或字段 `errorMessage`
+  - 详见 `docs/feedback-message-vs-toast.md`
+
+## Props 约定
+
+- 尺寸：`size="small" | "large"`（默认 medium）。
+- 危险：`severity="danger"` 或 `invalid` + `errorMessage`。
+- 清除：优先 `clearable`（Select 亦支持 `showClear` 别名）。
+- 宽度：表单字段 `fluid`；页面级宽度用 layout CSS + `max-width`。
+
+## 禁止
+
+- 同一页面混用其他 UI 库。
+- 用 `MDropdown` 代替 Select 做枚举选择。
+- 手写 table/modal 替代 `MTable` / `MDialog`。
+
+完整清单：`docs/components.md`

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

@@ -0,0 +1,17 @@
+---
+description: Morya UI 设计系统第一信源。生成或修改 UI 前必读 DESIGN.md 与 design-tokens。
+alwaysApply: true
+---
+
+# Morya UI 设计系统
+
+1. **先读** 项目根目录 `DESIGN.md`，再读 `docs/components.md`。
+2. **只用** `morya-ui` 的 `M*` 组件；全局样式 `morya-ui/styles.css`。
+3. **颜色/间距/圆角** 使用 `--m-*` CSS 变量，禁止裸 hex/rgb（见 `scripts/check-raw-colors.mjs`）。
+4. **页面结构** 对齐 `docs/golden-pages/`（列表 / 表单 / 仪表盘 / 登录 / 落地 / 空状态），不要发明新布局范式。
+5. **表单选项** 用 `MSelect` / `MTreeSelect`；**动作菜单** 用 `MDropdown`。
+6. 不确定 API 时查文档站或 MCP，**禁止臆造 prop**。
+7. 根节点用 `MConfigProvider`；后台布局用 `MLayout` 系列。
+8. **操作反馈默认 `message` API**；仅 `summary + detail` 或异步通知用 `toast`；表单常驻错误用 `<MMessage>`。见 `docs/feedback-message-vs-toast.md`。
+
+Token 参考：`design-tokens/tokens.json`

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

@@ -0,0 +1,67 @@
+---
+description: 生成 Morya UI 业务页面（列表/表单/仪表盘）时的布局规范
+alwaysApply: false
+---
+
+# 页面布局（Agent Requested）
+
+生成完整页面时，先确定类型并 **复制黄金样例结构**：
+
+| 类型 | 模板 |
+| --- | --- |
+| 列表页 | `docs/golden-pages/list-page.vue` |
+| 表单页 | `docs/golden-pages/form-page.vue` |
+| 仪表盘 | `docs/golden-pages/dashboard-page.vue` |
+| 登录页 | `docs/golden-pages/login-page.vue` |
+| 营销落地 | `docs/golden-pages/landing-page.vue` |
+| 空状态 | `docs/golden-pages/empty-state.vue` |
+
+## 列表页区块顺序
+
+1. `MLayout fillViewport` + 可选 `MLayoutSider bordered`
+2. `MLayoutHeader` → `MBreadcrumb`
+3. `MLayoutContent` → `MPageContent`
+4. `MPageFilters`（内 `MSpace` + Input/Select + 查询/重置）
+5. `MPageToolbar`（标题 + `#actions` 主操作）
+6. `MTable`（直接放置，通常不必包 `MCard`）
+7. 分页由 `MTable paginator` 或同级 `MPagination`
+
+## 表单页区块顺序
+
+1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
+2. `MPageContent width="narrow"`
+3. `MPageHeader`（标题 + 说明）
+4. `MPageSection variant="form"` → `MForm`
+5. `MPageSection variant="actions"`：保存（primary）+ 取消（secondary）
+
+## 仪表盘区块顺序
+
+1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
+2. `MPageContent density="spacious"` → `MPageHeader`
+3. KPI：`MGrid` + `MPageStat`（4 列或响应式）
+4. 主区两栏：`MCard` + `MPagePlaceholder` / 最近列表 `MTable`
+
+## 页面标准
+
+推荐实践（非强制），完整列表见 MCP `get_design_rules` → `standards`：
+
+| 主题 | 推荐 | 通常不必 |
+| --- | --- | --- |
+| 骨架 | `MLayout fillViewport` + `MPageContent` | 手写 `min-height:100vh`；`MLayoutContent` 再写 padding |
+| 区块 | `MPageFilters` / `MPageToolbar` / `MPageSection` | 手写 `.page-*`；`MCard` 再包一层 |
+| 列表表格 | `MTable` 直接放在 `MPageContent` | 用 `MCard` 再包 bordered 表格 |
+| 控件间距 | 同行用 `MSpace` / `MFlex`；区块靠 `MPageContent` gap | 外包 padded `div` 叠间距 |
+| 滚动 | 组件内置滚动壳用 `MScrollbar`；Dialog/Drawer 等内容留给业务 | 在用户内容区强行内置滚动 |
+| 颜色 | `--m-*` Token | 页面级 hex / 裸 rgb() |
+| 反馈 | 单行结果用 `message`；危险操作用 `MConfirmDialog` | 仅一行文案却用 toast |
+| 无障碍 | 图标按钮 `aria-label`、表单可见 label | — |
+
+仅允许控件宽度等局部 inline style（如筛选项 `width: 14rem`）。
+
+## MCP
+
+- 整页：`recommend_page` → `get_golden_page` → `get_design_rules`
+- 局部：`get_page_snippet`（如 `filters` / `toolbar` / `form-actions` / `scrollable-panel`）
+- 可选：`validate_page`（参考建议，不阻断）
+
+引用可运行示例：`src/examples/*PageExample.vue`

package/template/DESIGN.md

@@ -0,0 +1,121 @@
+# Morya UI 设计系统（AI 第一信源）
+
+> 基于 `morya-ui` v0.1.x。生成或审查业务页面时，**必须先遵守本文**，再查阅 `docs/components.md` 与 `docs/golden-pages/`。
+
+## 1. 设计原则
+
+1. **组件优先**：布局、表单、表格、浮层一律使用库内 `M*` 组件，不手写等价 DOM 结构。
+2. **令牌优先**：颜色、间距、圆角、阴影、动效使用 `--m-*` CSS 变量；禁止裸 `#hex` / `rgb()`（`scripts/check-raw-colors.mjs` 会扫描）。
+3. **语义一致**：主操作 `MButton` `severity="primary"`；危险操作用 `severity="danger"` 或 `MConfirmDialog`。
+4. **可访问性**：表单控件带 `label`；图标按钮带 `aria-label`；浮层可 Esc 关闭（组件默认支持）。
+5. **ConfigProvider 包裹**：应用根节点使用 `MConfigProvider`，统一 locale、主题、密度、浮层挂载。
+
+## 2. 应用骨架
+
+```vue
+<script setup lang="ts">
+import { MConfigProvider, zhCN } from 'morya-ui'
+import 'morya-ui/styles.css'
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout has-sider>
+      <MLayoutSider>...</MLayoutSider>
+      <MLayout>
+        <MLayoutHeader>...</MLayoutHeader>
+        <MLayoutContent>...</MLayoutContent>
+      </MLayout>
+    </MLayout>
+  </MConfigProvider>
+</template>
+```
+
+- 管理后台：`MLayout fillViewport` + `MLayoutSider` + `MLayoutHeader` + `MLayoutContent`
+- 页面内容堆叠：`MPageContent`（内置于 `MLayoutContent`）
+- 列表筛选 / 工具栏：`MPageFilters` + `MPageToolbar`
+- 表单引导 / 表面：`MPageHeader` + `MPageSection variant="form|actions"`
+- 仪表盘 KPI / 占位：`MPageStat` + `MPagePlaceholder`
+- 其他分区：`MCard`（图表/明细模块）/ `MPanel` / `MFieldset`
+- 栅格：`MGrid` + `MGridItem` 或 `MFlex` + `MSpace`
+
+## 3. 页面类型与黄金样例
+
+| 类型 | 参考文件 | 必备区块 |
+| --- | --- | --- |
+| 列表页 | `docs/golden-pages/list-page.vue` | 面包屑、筛选区、工具栏、表格、分页 |
+| 表单页 | `docs/golden-pages/form-page.vue` | 面包屑、分组表单、`MForm` / `MFormItem`、提交/取消 |
+| 仪表盘 | `docs/golden-pages/dashboard-page.vue` | 统计卡片栅格、图表区占位、快捷入口 / 最近列表 |
+| 登录页 | `docs/golden-pages/login-page.vue` | 品牌区 + `MForm` / `MInputPassword`；表单级错误用 token 告警条 |
+| 营销落地 | `docs/golden-pages/landing-page.vue` | 单任务首屏、分节、`MButton` / `MTag` / `MAccordion` |
+| 空状态 | `docs/golden-pages/empty-state.vue` | `MEmpty` + 说明 + 主 CTA；可嵌列表 `#empty` |
+
+生成 **Ops** 页面时：结构对齐对应黄金样例，用 `MPage*` 拼装，尽量少写 scoped CSS。  
+生成 **Account / Express / Flow** 页面时：对齐上表样例；允许有节制的 scoped 布局，但颜色/间距仍用 `--m-*`。
+
+## 4. 表单约定
+
+- 使用 `MForm` + `MFormItem`，`name` 与校验规则对应。
+- 字段组件自带 `label` / `invalid` / `helpText` 时优先用组件 prop（如 `MInput`、`MSelect`），复杂表单再用 `MFormItem` 包一层。
+- 尺寸：默认 medium；密集后台可 `size="small"` 或 ConfigProvider `globalDensity`。
+- 宽度：筛选项 `fluid` 慎用；表单页主栏 `max-width: 40rem` 左右。
+
+## 5. 数据展示
+
+- 表格：`MTable` + 列定义；行操作放 `MButton` text/link 或 `MDropdown`。
+- 分页：`MPagination` 与表格同级，右对齐或居中。
+- 空态：表格 `emptyMessage` 或自定义 `#empty` 插槽；禁止空白区域无提示。
+
+## 6. 浮层与反馈
+
+| 场景 | 组件 |
+| --- | --- |
+| 确认删除 | `MConfirmDialog` 或 `MConfirmPopup` |
+| 详情 / 编辑弹窗 | `MDialog` |
+| 侧滑筛选 / 详情 | `MDrawer` |
+| **操作结果（默认）** | **`message` API**（单行：已保存 / 已删除） |
+| 标题 + 详情 / 异步通知 | `toast` API（`summary` + `detail`） |
+| 表单区常驻错误 | token 告警条 / 字段 `errorMessage` |
+| 字段说明 | `MTooltip` |
+
+**选型细则见 [`docs/feedback-message-vs-toast.md`](docs/feedback-message-vs-toast.md)。AI 生成代码时：无 `detail` 的操作回执一律用 `message`，不要默认 Toast。**
+
+## 7. 设计令牌（摘要）
+
+完整定义见 `design-tokens/tokens.json`。
+
+| 用途 | 变量 |
+| --- | --- |
+| 页面背景 | `--m-color-surface` |
+| 正文 | `--m-color-text` |
+| 次要文字 | `--m-color-text-muted` |
+| 边框 | `--m-color-border` |
+| 品牌 / 链接 | `--m-color-primary` |
+| 错误 | `--m-color-danger` |
+| 区块间距 | `--m-space-4` / `--m-space-6` |
+| 卡片圆角 | `--m-radius-md` |
+| 卡片阴影 | `--m-shadow-md` |
+
+## 8. 禁止项
+
+- 禁止引入第二套 UI 库（Element Plus、Naive UI 等）混用同一页面。
+- 禁止在业务 CSS 中写死主题色；暗色模式必须能随 `[data-theme="dark"]` 生效。
+- 禁止用 `<div onclick>` 代替 `<button>` / `MButton`。
+- 禁止 Select 与 Dropdown 混用：选项选择用 `MSelect` / `MTreeSelect`；动作菜单用 `MDropdown`。
+- 禁止跳过 `import 'morya-ui/styles.css'`。
+
+## 9. AI 工作流
+
+1. 读本文 → 确定页面类型（列表 / 表单 / 仪表盘）。
+2. 打开对应 `docs/golden-pages/*.vue` 与 `src/examples/*.vue`。
+3. 查 `docs/components.md` 选型。
+4. 不确定 API 时查文档站或 MCP，**不要臆造 prop 名**。
+5. 完成后运行 `pnpm check:colors`（若已配置）。
+6. 操作反馈见 `docs/feedback-message-vs-toast.md`：**默认 `message`，有 detail 才用 `toast`**。
+
+## 10. 相关资源
+
+- 包入口：`morya-ui`
+- 全局样式：`morya-ui/styles.css`
+- 按需引入：`morya-ui/button` 等 + 对应 `style`
+- 主题 API：`useTheme` / `useDensity` / `useMotion`（同包导出）

package/template/design-tokens/tokens.css

@@ -0,0 +1,55 @@
+/**
+ * Morya UI design tokens (compiled view for AI / static tooling).
+ * Runtime source of truth: morya-ui/styles.css
+ * Do not hand-edit hex values in business code — use --m-* variables.
+ */
+:root {
+    --m-color-primary: #2563eb;
+    --m-color-primary-hover: #1d4ed8;
+    --m-color-surface: #ffffff;
+    --m-color-text: #0f172a;
+    --m-color-text-muted: #64748b;
+    --m-color-border: #e2e8f0;
+    --m-color-focus-ring: #2563eb;
+    --m-color-success: #159570;
+    --m-color-info: #2563eb;
+    --m-color-warning: #d97706;
+    --m-color-help: #9333ea;
+    --m-color-danger: #dc2626;
+    --m-color-contrast: #0f172a;
+    --m-color-contrast-fg: #ffffff;
+    --m-overlay-scrim: rgb(15 23 42 / 0.55);
+
+    --m-control-height-small: 28px;
+    --m-control-height-medium: 34px;
+    --m-control-height-large: 40px;
+    --m-radius-control: 3px;
+    --m-space-1: 0.25rem;
+    --m-space-2: 0.5rem;
+    --m-space-3: 0.75rem;
+    --m-space-4: 1rem;
+    --m-space-6: 1.5rem;
+    --m-space-8: 2rem;
+    --m-radius-sm: 0.25rem;
+    --m-radius-md: 0.5rem;
+    --m-radius-lg: 0.75rem;
+    --m-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.25);
+    --m-shadow-md: 0 0.75rem 2rem rgb(15 23 42 / 0.16);
+    --m-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
+    --m-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --m-motion-fast: 150ms;
+    --m-motion-normal: 250ms;
+    --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
+    --m-z-base: 1000;
+}
+
+[data-theme="dark"] {
+    --m-color-primary: #60a5fa;
+    --m-color-primary-hover: #93c5fd;
+    --m-color-surface: #0f172a;
+    --m-color-text: #f8fafc;
+    --m-color-text-muted: #94a3b8;
+    --m-color-border: #334155;
+    --m-color-danger: #fca5a5;
+    --m-overlay-scrim: rgb(2 6 23 / 0.72);
+}

package/template/design-tokens/tokens.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "meta": {
+    "name": "morya-ui",
+    "version": "0.1.1",
+    "source": "morya-ui/src/theme/styles.css",
+    "prefix": "m"
+  },
+  "color": {
+    "primary": { "value": "#2563eb", "dark": "#60a5fa" },
+    "primary-hover": { "value": "#1d4ed8", "dark": "#93c5fd" },
+    "surface": { "value": "#ffffff", "dark": "#0f172a" },
+    "text": { "value": "#0f172a", "dark": "#f8fafc" },
+    "text-muted": { "value": "#64748b", "dark": "#94a3b8" },
+    "border": { "value": "#e2e8f0", "dark": "#334155" },
+    "focus-ring": { "value": "#2563eb", "dark": "#93c5fd" },
+    "success": { "value": "#159570", "dark": "#5eead4" },
+    "info": { "value": "#2563eb", "dark": "#93c5fd" },
+    "warning": { "value": "#d97706", "dark": "#fbbf24" },
+    "help": { "value": "#9333ea", "dark": "#c084fc" },
+    "danger": { "value": "#dc2626", "dark": "#fca5a5" },
+    "contrast": { "value": "#0f172a", "dark": "#f8fafc" },
+    "contrast-fg": { "value": "#ffffff", "dark": "#0f172a" },
+    "overlay-scrim": { "value": "rgb(15 23 42 / 0.55)", "dark": "rgb(2 6 23 / 0.72)" }
+  },
+  "control": {
+    "height": { "small": "28px", "medium": "34px", "large": "40px" },
+    "font": { "small": "14px", "medium": "14px", "large": "15px" },
+    "padding-x": { "small": "10px", "medium": "12px", "large": "14px" },
+    "affix-size": "2rem"
+  },
+  "space": {
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "6": "1.5rem",
+    "8": "2rem"
+  },
+  "radius": {
+    "control": "3px",
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "full": "9999px"
+  },
+  "shadow": {
+    "sm": "0 1px 2px rgb(15 23 42 / 0.25)",
+    "md": "0 0.75rem 2rem rgb(15 23 42 / 0.16)",
+    "lg": "0 1rem 3rem rgb(15 23 42 / 0.25)"
+  },
+  "font": {
+    "sans": "Inter, ui-sans-serif, system-ui, sans-serif",
+    "size": { "xs": "0.75rem", "sm": "0.8125rem", "md": "0.875rem", "lg": "1.125rem" }
+  },
+  "motion": {
+    "fast": "150ms",
+    "normal": "250ms",
+    "ease": "cubic-bezier(0.2, 0, 0, 1)"
+  },
+  "zIndex": {
+    "base": 1000,
+    "dropdown": "calc(var(--m-z-base) + 50)",
+    "toast": "calc(var(--m-z-base) + 100)"
+  },
+  "cssVarMap": {
+    "color.primary": "--m-color-primary",
+    "color.surface": "--m-color-surface",
+    "color.text": "--m-color-text",
+    "color.textMuted": "--m-color-text-muted",
+    "color.border": "--m-color-border",
+    "color.danger": "--m-color-danger",
+    "space.4": "--m-space-4",
+    "radius.md": "--m-radius-md",
+    "shadow.md": "--m-shadow-md"
+  }
+}