@morya-ui/setup 0.3.5 → 0.3.6

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

@@ -1,68 +1,68 @@
-# Message / Toast / MMessage
-
-**Default rule:** operation feedback uses the `message` API. Use `toast` only when you need a title plus detail, or an async / background notification feel.
-
-Authoritative selection + key API notes also live in MCP / skill decision **`feedback-choice`** ([decision-recipes.md](./decision-recipes.md)). Keep this file and that decision aligned.
-
-## Three different things
-
-| Name | Shape | API | Typical use |
-| --- | --- | --- | --- |
-| Message service | Top-centered one-liner | `message.success('已保存')` | Most CRUD results |
-| Toast service | Corner notice with `summary` + optional `detail` | `toast.success({ summary, detail })` | Extra explanation, job results |
-| `MMessage` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
-
-## Decision tree
-
-```
-Need immediate feedback after a user action?
-├─ No → maybe confirm dialog or field errorMessage only
-└─ Yes → must the error stay in the form until fixed?
-    ├─ Yes → field invalid / errorMessage; form-level token alert (see login-page)
-    └─ No → only one short line (no separate detail)?
-        ├─ Yes → message.*          ← default
-        └─ No → summary + detail / async feel → toast.*
-```
-
-## Prefer `message`
-
-```ts
-import { message } from 'morya-ui'
-
-message.success('已创建')
-message.info('已移入回收站')
-message.error('操作失败')
-```
-
-## Prefer `toast`
-
-```ts
-import { toast } from 'morya-ui'
-
-toast.success({
-  summary: '导入完成',
-  detail: '成功 128 条，失败 2 条',
-})
-```
-
-## Prefer `<MMessage>` / form-level errors
-
-- Field validation: component `invalid` / `errorMessage` (preferred).
-- Form-level persistent errors (login/auth): token-styled `role="alert"` bar as in MCP `get_golden_page` `login-page`.
-- Note: `<MMessage>` today is primarily the **message service host** (`messages` / teleport). Do not invent a `severity` + default-slot Alert API unless docs add it.
-
-```vue
-<p v-if="formError" class="form-alert" role="alert">{{ formError }}</p>
-```
-
-```css
-.form-alert {
-  margin: 0 0 var(--m-space-4);
-  padding: var(--m-space-3) var(--m-space-4);
-  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
-  border-radius: var(--m-radius-md);
-  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
-  color: var(--m-color-danger);
-}
-```
-
+# Message / Toast / MMessage
+
+**Default rule:** operation feedback uses the `message` API. Use `toast` only when you need a title plus detail, or an async / background notification feel.
+
+Authoritative selection + key API notes also live in MCP / skill decision **`feedback-choice`** ([decision-recipes.md](./decision-recipes.md)). Keep this file and that decision aligned.
+
+## Three different things
+
+| Name | Shape | API | Typical use |
+| --- | --- | --- | --- |
+| Message service | Top-centered one-liner | `message.success('已保存')` | Most CRUD results |
+| Toast service | Corner notice with `summary` + optional `detail` | `toast.success({ summary, detail })` | Extra explanation, job results |
+| `MMessage` | Optional host for the `message` service | `<MMessage />` | Custom `appendTo` / placement only. Not an inline alert |
+
+## Decision tree
+
+```
+Need immediate feedback after a user action?
+├─ No → maybe confirm dialog or field errorMessage only
+└─ Yes → must the error stay in the form until fixed?
+    ├─ Yes → field invalid / errorMessage; form-level token alert (see login-page)
+    └─ No → only one short line (no separate detail)?
+        ├─ Yes → message.*          ← default
+        └─ No → summary + detail / async feel → toast.*
+```
+
+## Prefer `message`
+
+```ts
+import { message } from 'morya-ui'
+
+message.success('已创建')
+message.info('已移入回收站')
+message.error('操作失败')
+```
+
+## Prefer `toast`
+
+```ts
+import { toast } from 'morya-ui'
+
+toast.success({
+  summary: '导入完成',
+  detail: '成功 128 条，失败 2 条',
+})
+```
+
+## Prefer `<MMessage>` / form-level errors
+
+- Field validation: component `invalid` / `errorMessage` (preferred).
+- Form-level persistent errors (login/auth): token-styled `role="alert"` bar as in MCP `get_golden_page` `login-page`.
+- Note: `<MMessage>` today is primarily the **message service host** (`messages` / teleport). Do not invent a `severity` + default-slot Alert API unless docs add it.
+
+```vue
+<p v-if="formError" class="form-alert" role="alert">{{ formError }}</p>
+```
+
+```css
+.form-alert {
+  margin: 0 0 var(--m-space-4);
+  padding: var(--m-space-3) var(--m-space-4);
+  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
+  border-radius: var(--m-radius-md);
+  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
+  color: var(--m-color-danger);
+}
+```
+

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

@@ -1,62 +1,62 @@
-# Optional companions (craft bridge)
-
-`morya-ui-pages` is **standalone**: contract + page snippets / decision recipes + block-order checklists + [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) are enough. Golden pages are optional structure demos. **No named style-preset catalog.**
-
-Installed market skills are **soft upgrades** — never replace `M*` / `--m-*` / page-layout block order / MCP / the **user’s** style direction.
-
-## Conflict rule (hard)
-
-**morya-ui-pages + DESIGN.md + MCP win.**
-
-Forbidden from any companion:
-
-- Second UI kit  
-- Invented `M*` props or hex soup  
-- Replacing Ops block-order shell with a marketing hero  
-- Custom ARIA widgets replacing library overlays  
-- **Unearned AI atmosphere** the user did not ask for (aurora, cream-serif-terracotta, dual neon, frosted glass, neumorph on dense tables)  
-- Overriding an explicit user reference or description  
-
-## When to load
-
-| Need | Prefer companion | Else |
-| --- | --- | --- |
-| Express / brand POV | `frontend-design` | visual-craft design plan |
-| Named polish / audit / bolder / quieter | `impeccable` | visual-craft polish modes |
-| Mood keywords | `ui-ux-pro-max` (search only) | infer from prompt → `--m-*` |
-| a11y | `fixing-accessibility` | review-checklist |
-| Routine Ops | **none** | Ops polish + resolved direction |
-
-Load budget: max one visual companion; a11y may follow. If absent, do not ask to install mid-task.
-
-## Frontend Design bridge
-
-1. Ground subject / audience / job.  
-2. Resolve style direction first ([style-presets.md](style-presets.md)).  
-3. Short design plan; signature fits the **user’s** words.  
-4. Strip AI-default faces unless the user asked.  
-5. Remediate with `M*` + `--m-*`; flat shells by default.
-
-## Impeccable bridge
-
-| User intent | Pass | Constraint |
-| --- | --- | --- |
-| 太平 / 大胆一点 | `bolder` | One signature inside current direction; ask before changing the whole face |
-| 太花 / 太像 AI | `quieter` | Strip unearned gradients / glow / glass |
-| 提交前 | `polish` | Ops polish + direction + a11y basics |
-| 文案 | `clarify` | Domain verbs |
-| 微交互 | `delight` | 1–2 moments; `useMotion` |
-
-**Brief wins.**
-
-## Combined workflow
-
-```text
-1. Style direction   → user reference/description → cues → ask if uncertain
-2. Compose           → recommend_page.suggestedSnippets / get_page_snippet + recommend_component
-3. Optional structure → get_golden_page only for whole-page block-order check
-4. Contract          → get_component / validate_usage
-5. Craft             → visual-craft (flat shells by default)
-6. Companion (opt.)  → deepen inside the resolved direction
-7. Gate              → validate_usage + validate_page
-```
+# Optional companions (craft bridge)
+
+`morya-ui-pages` is **standalone**: contract + page snippets / decision recipes + block-order checklists + [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) are enough. Golden pages are optional structure demos. **No named style-preset catalog.**
+
+Installed market skills are **soft upgrades** — never replace `M*` / `--m-*` / page-layout block order / MCP / the **user’s** style direction.
+
+## Conflict rule (hard)
+
+**morya-ui-pages + DESIGN.md + MCP win.**
+
+Forbidden from any companion:
+
+- Second UI kit  
+- Invented `M*` props or hex soup  
+- Replacing Ops block-order shell with a marketing hero  
+- Custom ARIA widgets replacing library overlays  
+- **Unearned AI atmosphere** the user did not ask for (aurora, cream-serif-terracotta, dual neon, frosted glass, neumorph on dense tables)  
+- Overriding an explicit user reference or description  
+
+## When to load
+
+| Need | Prefer companion | Else |
+| --- | --- | --- |
+| Express / brand POV | `frontend-design` | visual-craft design plan |
+| Named polish / audit / bolder / quieter | `impeccable` | visual-craft polish modes |
+| Mood keywords | `ui-ux-pro-max` (search only) | infer from prompt → `--m-*` |
+| a11y | `fixing-accessibility` | review-checklist |
+| Routine Ops | **none** | Ops polish + resolved direction |
+
+Load budget: max one visual companion; a11y may follow. If absent, do not ask to install mid-task.
+
+## Frontend Design bridge
+
+1. Ground subject / audience / job.  
+2. Resolve style direction first ([style-presets.md](style-presets.md)).  
+3. Short design plan; signature fits the **user’s** words.  
+4. Strip AI-default faces unless the user asked.  
+5. Remediate with `M*` + `--m-*`; flat shells by default.
+
+## Impeccable bridge
+
+| User intent | Pass | Constraint |
+| --- | --- | --- |
+| 太平 / 大胆一点 | `bolder` | One signature inside current direction; ask before changing the whole face |
+| 太花 / 太像 AI | `quieter` | Strip unearned gradients / glow / glass |
+| 提交前 | `polish` | Ops polish + direction + a11y basics |
+| 文案 | `clarify` | Domain verbs |
+| 微交互 | `delight` | 1–2 moments; `useMotion` |
+
+**Brief wins.**
+
+## Combined workflow
+
+```text
+1. Style direction   → user reference/description → cues → ask if uncertain
+2. Compose           → recommend_page.suggestedSnippets / get_page_snippet + recommend_component
+3. Optional structure → get_golden_page only for whole-page block-order check
+4. Contract          → get_component / validate_usage
+5. Craft             → visual-craft (flat shells by default)
+6. Companion (opt.)  → deepen inside the resolved direction
+7. Gate              → validate_usage + validate_page
+```

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

@@ -1,133 +1,133 @@
-# Page layouts
-
-When generating a full page, pick a type and follow the **block-order checklist** below. Fill each block with MCP **`get_page_snippet`** / `recommend_page.suggestedSnippets` (composition-first). Optional: `get_golden_page` only to cross-check whole-page order or when the user asks to mirror a golden sample.
-
-Golden pages are **assembly demos / structure baselines**, not the default clone source. Do not add new craft variants (`list-page-*`); density / sider cues inform polish via style direction.
-
-| Type | Checklist below | Optional `get_golden_page` | Typical snippets |
-| --- | --- | --- | --- |
-| List | List page | `list-page` (`list-page-dense` / `list-page-rail` craft only) | `layout-app-shell`, `page-header-actions`, **`list-filters-stack`** (dense → `list-filters-dense`), `list-table`, `form-in-dialog`, `confirm-delete` |
-| Form (long / dedicated) | Form page | `form-page` | `page-content-form`, `form-header`, `form-body`, `form-actions` |
-| List create/edit dialog | List create/edit dialog | `form-in-dialog` | **`form-in-dialog`** (preferred) |
-| Detail | Detail page | `detail-page` | `detail-toolbar`, `form-in-dialog` |
-| Dashboard | Dashboard | `dashboard-page` | `dashboard-kpi-grid`, `dashboard-chart-card`, `dashboard-recent-table` |
-| Login | — (see [surfaces.md](surfaces.md)) | `login-page` | **`auth-split-shell`** |
-| Landing | — (see [surfaces.md](surfaces.md)) | `landing-page` | — |
-| Empty | — | `empty-state` | **`empty-block`** |
-| Result / 403 / terminal | — | `result-page` | **`result-block`** |
-| Settings | Settings page | `settings-page` | `form-header`, `form-body`, `form-actions` |
-| Wizard | Wizard | `wizard-form` | **`wizard-steps`** |
-
-Via MCP: `recommend_page({ style? })` → use **`suggestedSnippets`** + `recommend_component` / `get_page_snippet`; apply `styleDirection` (user reference/description — no preset catalog). Call `get_golden_page` only when needed for block-order check. Style: `get_style_direction`.
-
-**List craft variants** share the same block order; only density / chrome / copy change. Prefer style-direction cues over inventing new golden ids.
-
-## Product defaults
-
-- **Short create/edit** (about ≤8 fields, single section): same-page `MDialog` + `MForm` — snippet `form-in-dialog`; do not invent a new route form for every entity.
-- **Long / multi-section / wizard**: dedicated form page (`form-page`) or `MDrawer` (`form-in-drawer`).
-- **One-line success/error**: `message` API; title + detail or async notify → `toast` (see [feedback.md](feedback.md)).
-
-## List page — block order
-
-1. `MLayout fillViewport` + optional `MLayoutSider bordered` → snippet `layout-app-shell`
-2. Sider `MMenu` (**every item has `icon`**)
-3. `MLayoutHeader` → `MBreadcrumb`
-4. `MLayoutContent` → `MPageContent` (**add `fill` only when the height rule below applies**) → `page-content-list`
-5. `MPageHeader` — page title + `#actions` primary (**one** filled primary in viewport) → `page-header-actions`
-6. `MPageFilters` — 默认 **`list-filters-stack`**（`#actions` 查询/重置 + collapsible「高级筛选/收起」chevron + `#advanced` + FilterChips）；条件少无高级区用 `list-filters`；dense craft 用 `list-filters-dense`
-7. Optional `MPageFilterChips` — 已含在 `list-filters-stack`；单独增量用 `list-filter-chips`
-8. Optional `MPageToolbar` — batch actions only → `list-toolbar` / `list-batch-toolbar`
-9. `MTable` directly in content; status → `MStatus`; `#empty` → `MEmpty` → `list-table` + `list-status-dot` + `empty-block`
-10. Pagination via `MTable paginator` or sibling `MPagination`
-11. Short create/edit → same-page `MDialog` + `MForm` → **`form-in-dialog`**; delete → **`confirm-delete`**
-
-### List height — decide, don’t always fill
-
-Use **`MPageContent fill` + `MTable fill paginator`** only when **most** of these are true:
-
-- The screen is a **full-viewport admin list** (`MLayout fillViewport`) whose **main job** is browsing one data table
-- Leaving the table content-sized would leave a large empty band with pagination floating mid-page
-- You want **table-body scroll** and pagination pinned to the **bottom of the page**
-
-Skip `fill` when any of these apply:
-
-- Embedded / secondary tables (dashboard “recent”, detail related lists, cards)
-- Short or sparse pages where a content-sized table looks fine
-- The page should **scroll as a whole document** (long filters + notes + table)
-- Tables inside `MDialog` / `MDrawer`
-- Mixed layouts where the table is not the sole middle region
-
-Do not invent `min-height` / `calc` hacks when `fill` is the right tool — and do not force `fill` when it isn’t.
-
-Craft: [visual-craft.md](visual-craft.md) § Ops polish.
-
-## Form page — block order
-
-1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
-2. `MPageContent width="narrow"` → `page-content-form`
-3. `MPageHeader` (title + description) → `form-header`
-4. `MPageSection variant="form"` → `MForm` → `form-body`
-5. `MPageSection variant="actions"` — save (`primary`) + cancel (`secondary`) → `form-actions`
-
-## Dashboard — block order
-
-1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
-2. `MPageContent density="spacious"` → `MPageHeader` (title + short domain description when useful)
-3. KPI row: `MGrid` + `MPageStat` (4 columns or responsive) — `dashboard-kpi-grid`
-4. Main split: `MCard shadow="always"` + `MEmpty` (chart pending) and/or recent `MTable` — `dashboard-chart-card` / `dashboard-recent-table`
-
-Craft: spacious density + Ops polish; do not turn the first viewport into a marketing hero.
-
-## Composition standards
-
-| Topic | Prefer | Usually avoid |
-| --- | --- | --- |
-| Shell | `MLayout fillViewport` + `MPageContent` | Padding on `MLayoutContent` |
-| Sections | `MPageFilters` / `MPageToolbar` / `MPageSection` | Custom `.page-*`; extra `MCard` wrappers |
-| List table | `MTable` in `MPageContent`; add `fill` only when the height rule applies | Border card solely to wrap the table; forcing `fill` on every table |
-| Spacing | `MSpace` / `MFlex` for peers; page gap from `MPageContent` | Nested padded divs stacking gaps |
-| Scroll | Full-viewport main lists may use table-body scroll via `fill`; otherwise layout / local `MScrollbar` | Forcing overflow on every content slot; stacked page + table scrollbars without reason |
-| Color | `--m-*` | Page-level hex / rgb |
-| Feedback | One-line → `message`; danger → confirm dialog | Toast for a single short string |
-| A11y | Labels + icon `aria-label` | Unlabeled icon controls |
-
-Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
-
-## Detail page — block order
-
-1. Same admin chrome as list (breadcrumb → `MPageContent`)
-2. `MPageHeader` — title, `MStatus` in `#actions`, primary/secondary/danger → `detail-toolbar`
-3. Summary `MPageSection` + property `MCard` (definition grid with `--m-*` only)
-4. Related data: `MCard` + `MTable` / tabs / timeline
-5. Short edit → `form-in-dialog`; long edit → form page / `form-in-drawer`
-
-## List create/edit dialog — block order
-
-1. Stay on the list page (`MPageHeader` + filters/table; optional batch `MPageToolbar`)
-2. `MDialog` ~`28–36rem` + `MForm` fields → snippet **`form-in-dialog`**
-3. Actions in Dialog `#footer` (cancel secondary/text + save primary)
-4. Success → `message.success` one-liner, then close
-
-## 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
-
-## Wizard — block order
-
-1. Narrow `MPageContent` + `MPageHeader`
-2. `MStepper v-model` + **`:steps`** (not `:items`) → snippet **`wizard-steps`**
-3. One form/job per step; sticky `上一步` / `下一步` / `创建`
-4. Success → `result-block` / `MResult`
-
-## Hybrids
-
-- List + row edit dialog → `form-in-dialog` snippet on the list.
-- List + side detail → list + `form-in-drawer`.
-- Resource detail → detail checklist + `detail-toolbar`.
-- 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) + matching snippets, not Ops list chrome.
+# Page layouts
+
+When generating a full page, pick a type and follow the **block-order checklist** below. Fill each block with MCP **`get_page_snippet`** / `recommend_page.suggestedSnippets` (composition-first). Optional: `get_golden_page` only to cross-check whole-page order or when the user asks to mirror a golden sample.
+
+Golden pages are **assembly demos / structure baselines**, not the default clone source. Do not add new craft variants (`list-page-*`); density / sider cues inform polish via style direction.
+
+| Type | Checklist below | Optional `get_golden_page` | Typical snippets |
+| --- | --- | --- | --- |
+| List | List page | `list-page` (`list-page-dense` / `list-page-rail` craft only) | `layout-app-shell`, `page-header-actions`, **`list-filters-stack`** (dense → `list-filters-dense`), `list-table`, `form-in-dialog`, `confirm-delete` |
+| Form (long / dedicated) | Form page | `form-page` | `page-content-form`, `form-header`, `form-body`, `form-actions` |
+| List create/edit dialog | List create/edit dialog | `form-in-dialog` | **`form-in-dialog`** (preferred) |
+| Detail | Detail page | `detail-page` | `detail-toolbar`, `form-in-dialog` |
+| Dashboard | Dashboard | `dashboard-page` | `dashboard-kpi-grid`, `dashboard-chart-card`, `dashboard-recent-table` |
+| Login | — (see [surfaces.md](surfaces.md)) | `login-page` | **`auth-split-shell`** |
+| Landing | — (see [surfaces.md](surfaces.md)) | `landing-page` | — |
+| Empty | — | `empty-state` | **`empty-block`** |
+| Result / 403 / terminal | — | `result-page` | **`result-block`** |
+| Settings | Settings page | `settings-page` | `form-header`, `form-body`, `form-actions` |
+| Wizard | Wizard | `wizard-form` | **`wizard-steps`** |
+
+Via MCP: `recommend_page({ style? })` → use **`suggestedSnippets`** + `recommend_component` / `get_page_snippet`; apply `styleDirection` (user reference/description — no preset catalog). Call `get_golden_page` only when needed for block-order check. Style: `get_style_direction`.
+
+**List craft variants** share the same block order; only density / chrome / copy change. Prefer style-direction cues over inventing new golden ids.
+
+## Product defaults
+
+- **Short create/edit** (about ≤8 fields, single section): same-page `MDialog` + `MForm` — snippet `form-in-dialog`; do not invent a new route form for every entity.
+- **Long / multi-section / wizard**: dedicated form page (`form-page`) or `MDrawer` (`form-in-drawer`).
+- **One-line success/error**: `message` API; title + detail or async notify → `toast` (see [feedback.md](feedback.md)).
+
+## List page — block order
+
+1. `MLayout fillViewport` + optional `MLayoutSider bordered` → snippet `layout-app-shell`
+2. Sider `MMenu` (**every item has `icon`**)
+3. `MLayoutHeader` → `MBreadcrumb`
+4. `MLayoutContent` → `MPageContent` (**add `fill` only when the height rule below applies**) → `page-content-list`
+5. `MPageHeader` — page title + `#actions` primary (**one** filled primary in viewport) → `page-header-actions`
+6. `MPageFilters` — 默认 **`list-filters-stack`**（`#actions` 查询/重置 + collapsible「高级筛选/收起」chevron + `#advanced` + FilterChips）；条件少无高级区用 `list-filters`；dense craft 用 `list-filters-dense`
+7. Optional `MPageFilterChips` — 已含在 `list-filters-stack`；单独增量用 `list-filter-chips`
+8. Optional `MPageToolbar` — batch actions only → `list-toolbar` / `list-batch-toolbar`
+9. `MTable` directly in content; status → `MStatus`; `#empty` → `MEmpty` → `list-table` + `list-status-dot` + `empty-block`
+10. Pagination via `MTable paginator` or sibling `MPagination`
+11. Short create/edit → same-page `MDialog` + `MForm` → **`form-in-dialog`**; delete → **`confirm-delete`**
+
+### List height — decide, don’t always fill
+
+Use **`MPageContent fill` + `MTable fill paginator`** only when **most** of these are true:
+
+- The screen is a **full-viewport admin list** (`MLayout fillViewport`) whose **main job** is browsing one data table
+- Leaving the table content-sized would leave a large empty band with pagination floating mid-page
+- You want **table-body scroll** and pagination pinned to the **bottom of the page**
+
+Skip `fill` when any of these apply:
+
+- Embedded / secondary tables (dashboard “recent”, detail related lists, cards)
+- Short or sparse pages where a content-sized table looks fine
+- The page should **scroll as a whole document** (long filters + notes + table)
+- Tables inside `MDialog` / `MDrawer`
+- Mixed layouts where the table is not the sole middle region
+
+Do not invent `min-height` / `calc` hacks when `fill` is the right tool — and do not force `fill` when it isn’t.
+
+Craft: [visual-craft.md](visual-craft.md) § Ops polish.
+
+## Form page — block order
+
+1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
+2. `MPageContent width="narrow"` → `page-content-form`
+3. `MPageHeader` (title + description) → `form-header`
+4. `MPageSection variant="form"` → `MForm` → `form-body`
+5. `MPageSection variant="actions"` — save (`primary`) + cancel (`secondary`) → `form-actions`
+
+## Dashboard — block order
+
+1. `MLayout fillViewport` → `MLayoutHeader` → `MBreadcrumb`
+2. `MPageContent density="spacious"` → `MPageHeader` (title + short domain description when useful)
+3. KPI row: `MGrid` + `MPageStat` (4 columns or responsive) — `dashboard-kpi-grid`
+4. Main split: `MCard shadow="always"` + `MEmpty` (chart pending) and/or recent `MTable` — `dashboard-chart-card` / `dashboard-recent-table`
+
+Craft: spacious density + Ops polish; do not turn the first viewport into a marketing hero.
+
+## Composition standards
+
+| Topic | Prefer | Usually avoid |
+| --- | --- | --- |
+| Shell | `MLayout fillViewport` + `MPageContent` | Padding on `MLayoutContent` |
+| Sections | `MPageFilters` / `MPageToolbar` / `MPageSection` | Custom `.page-*`; extra `MCard` wrappers |
+| List table | `MTable` in `MPageContent`; add `fill` only when the height rule applies | Border card solely to wrap the table; forcing `fill` on every table |
+| Spacing | `MSpace` / `MFlex` for peers; page gap from `MPageContent` | Nested padded divs stacking gaps |
+| Scroll | Full-viewport main lists may use table-body scroll via `fill`; otherwise layout / local `MScrollbar` | Forcing overflow on every content slot; stacked page + table scrollbars without reason |
+| Color | `--m-*` | Page-level hex / rgb |
+| Feedback | One-line → `message`; danger → confirm dialog | Toast for a single short string |
+| A11y | Labels + icon `aria-label` | Unlabeled icon controls |
+
+Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
+
+## Detail page — block order
+
+1. Same admin chrome as list (breadcrumb → `MPageContent`)
+2. `MPageHeader` — title, `MStatus` in `#actions`, primary/secondary/danger → `detail-toolbar`
+3. Summary `MPageSection` + property `MCard` (definition grid with `--m-*` only)
+4. Related data: `MCard` + `MTable` / tabs / timeline
+5. Short edit → `form-in-dialog`; long edit → form page / `form-in-drawer`
+
+## List create/edit dialog — block order
+
+1. Stay on the list page (`MPageHeader` + filters/table; optional batch `MPageToolbar`)
+2. `MDialog` ~`28–36rem` + `MForm` fields → snippet **`form-in-dialog`**
+3. Actions in Dialog `#footer` (cancel secondary/text + save primary)
+4. Success → `message.success` one-liner, then close
+
+## 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
+
+## Wizard — block order
+
+1. Narrow `MPageContent` + `MPageHeader`
+2. `MStepper v-model` + **`:steps`** (not `:items`) → snippet **`wizard-steps`**
+3. One form/job per step; sticky `上一步` / `下一步` / `创建`
+4. Success → `result-block` / `MResult`
+
+## Hybrids
+
+- List + row edit dialog → `form-in-dialog` snippet on the list.
+- List + side detail → list + `form-in-drawer`.
+- Resource detail → detail checklist + `detail-toolbar`.
+- 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) + matching snippets, not Ops list chrome.