@morya-ui/setup 0.3.4 → 0.3.6

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

@@ -1,141 +1,133 @@
-# Page layouts
-
-When generating a full page, pick a type and **mirror the golden-page block order**. Source: MCP `get_golden_page`.
-
-| Type | `get_golden_page` id |
-| --- | --- |
-| List (structure · soft) | `list-page` |
-| List · dense craft | `list-page-dense` |
-| List · rail craft | `list-page-rail` |
-| 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({ style? })` → resolves list craft (`dense`→`list-page-dense`, `rail`→`list-page-rail`, else `list-page`) → `get_golden_page`; then apply `styleDirection` (or a user reference). Local edits: `get_page_snippet` (`filters`, `toolbar`, `form-actions`, `scrollable-panel`, …). Styles: `list_style_presets` / `get_style_preset`.
-
-**List craft variants** share the same block order; only density / chrome / copy change. Prefer `recommend_page` style routing over hand-picking unless the user named a variant id.
-
-## Product defaults
-
-- **Short create/edit** (about ≤8 fields, single section): same-page `MDialog` + `MForm` — do not invent a new route form for every entity.
-- **Long / multi-section / wizard**: dedicated form page (`form-page`) or `MDrawer`.
-- **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`
-2. Sider `MMenu` (**every item has `icon`**)
-3. `MLayoutHeader` → `MBreadcrumb`
-4. `MLayoutContent` → `MPageContent` (**add `fill` only when the height rule below applies**)
-5. `MPageHeader` — page title + `#actions` primary (**one** filled primary in viewport)
-6. `MPageFilters` — `variant="filled"` optional; inner `MSpace wrap` + Input/Select + query/reset (query/reset → secondary); optional `collapsible` + `#advanced` for secondary fields
-7. Optional `MPageFilterChips` + closable `MTag` when filters are applied (after filters, before table)
-8. Optional `MPageToolbar` — batch actions only (no page title)
-9. `MTable` directly in content (usually **no** wrapping `MCard`); status → `MStatus`; `#empty` → `MEmpty`
-10. Pagination via `MTable paginator` or sibling `MPagination`
-11. Short create/edit → `MDialog` + `MForm` on the same page (default)
-
-### 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"`
-3. `MPageHeader` (title + description)
-4. `MPageSection variant="form"` → `MForm`
-5. `MPageSection variant="actions"` — save (`primary`) + cancel (`secondary`)
-
-## 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) — real metric names, not “Metric 1”
-4. Main split: `MCard shadow="always"` + `MEmpty` (chart pending) and/or recent `MTable` (row status → `MStatus`)
-
-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` (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`
-
-Mirror MCP `get_golden_page` `detail-page`.
-
-## List create/edit dialog — block order
-
-1. Stay on the list page (`MPageHeader` + filters/table; optional batch `MPageToolbar`)
-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 → `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.
+# 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.

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

@@ -1,64 +1,76 @@
-# 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 `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)
-
-- [ ] Style direction resolved (reference / named preset / inferred / offered) — not silent `quiet` every time
-- [ ] Lane craft from [visual-craft.md](visual-craft.md) + [style-presets.md](style-presets.md) applied
-- [ ] If companions ran: still only `M*` + `--m-*`; no second kit ([optional-companions.md](optional-companions.md))
-- [ ] At most one primary filled button in the main viewport
-- [ ] Copy is domain-real; empty / error states say what to do next
-- [ ] No AI-default look clusters unless the brief asked for them
-- [ ] Motion (if any) is 1–3 intentional moments and follows `useMotion` / `data-m-motion` (not OS `prefers-reduced-motion`)
-
-## Ops
-
-- [ ] Matches golden / [page-layouts.md](page-layouts.md) block order
-- [ ] `MPage*` used instead of ad-hoc page chrome where applicable
-- [ ] List height: if this is a full-viewport main data list, consider `MPageContent fill` + `MTable fill`; if embedded/short/document-scroll, skip `fill`
-- [ ] Tables not wrapped in decorative `MCard` solely for borders
-- [ ] Filters / toolbar / form actions follow documented patterns
-- [ ] Sider `MMenu` items have icons; status cells use `MStatus` (not decorative `MTag`)
-- [ ] Empty table uses `MEmpty` (or equivalent next-action empty)
-- [ ] No marketing hero bolted onto a CRUD shell
-
-## Account / Flow / System
-
-- [ ] Primary CTA obvious; escape paths present (back / home / support)
-- [ ] Auth errors stay on the form via field `errorMessage` or a token `role="alert"` (`<MMessage>` is the message host, not an inline alert)
-- [ ] 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
-- [ ] Brand / empty atmosphere uses token-only CSS (see visual-craft recipes)
-
-## 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; `color-mix` from `--m-*` OK)
-- [ ] Labels visible; icon buttons have `aria-label`
-- [ ] Usable on a narrow viewport
-- [ ] Focus visible on interactive elements
-
-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.
+# 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 `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 — **`ok` must be true** (contract); craft suggestions addressed or consciously waived
+- [ ] Same **`brief`** as `map_reference` / `recommend_page` passed into `validate_page` when a reference exists
+
+## Craft (all lanes — default pass)
+
+- [ ] Style direction resolved: followed user reference/description, or inferred from clear cues, or **asked** when uncertain — never silent invent; **no preset catalog**
+- [ ] Reference fidelity: `map_reference` mapping blocks present (filters/table/status/… as required)
+- [ ] Signature shell from `get_style_shells` when Account / Express / Flow need presence
+- [ ] Lane craft from [visual-craft.md](visual-craft.md) applied
+- [ ] If companions ran: still only `M*` + `--m-*`; no second kit ([optional-companions.md](optional-companions.md))
+- [ ] At most one primary filled button in the main viewport
+- [ ] Copy is domain-real; empty / error states say what to do next
+- [ ] Numeric table columns use `align: 'end'` + tabular nums when amounts/counts are shown
+- [ ] No AI-default look clusters unless the user/reference asked for them
+- [ ] No unearned atmosphere: stacked radial+linear washes, purple mesh, frosted glass, neon glow stacks
+- [ ] Motion (if any) is 1–3 intentional moments and follows `useMotion` / `data-m-motion`
+- [ ] Brand differences via theme `--m-*` overrides, not page hex
+
+## Screenshot self-check (optional — when user gave a visual reference)
+
+1. Start the consumer app locally (Vite / Nuxt preview).
+2. Open the generated route; capture the first viewport.
+3. Compare to the reference: block order, primary CTA, density, status treatment — not pixel-perfect chrome.
+4. If blocks are missing, fix via snippets + re-run `validate_page({ brief })`.
+
+If Playwright / `webapp-testing` is available in the project, prefer an automated screenshot; otherwise a manual capture is enough.
+## Ops
+
+- [ ] Matches [page-layouts.md](page-layouts.md) block order (snippets composed; golden page optional check only)
+- [ ] `MPage*` used instead of ad-hoc page chrome where applicable
+- [ ] List height: if this is a full-viewport main data list, consider `MPageContent fill` + `MTable fill`; if embedded/short/document-scroll, skip `fill`
+- [ ] Tables not wrapped in decorative `MCard` solely for borders
+- [ ] Filters / toolbar / form actions follow documented patterns
+- [ ] Sider `MMenu` items have icons; status cells use `MStatus` (not decorative `MTag`)
+- [ ] Empty table uses `MEmpty` (or equivalent next-action empty)
+- [ ] No marketing hero bolted onto a CRUD shell
+
+## Account / Flow / System
+
+- [ ] Primary CTA obvious; escape paths present (back / home / support)
+- [ ] Auth errors stay on the form via field `errorMessage` or a token `role="alert"`
+- [ ] Empty uses `MEmpty`; success / HTTP errors use `MResult`
+- [ ] Brand / empty atmosphere follows the **resolved direction** (defaults are flat token shells)
+- [ ] Wizard steps: one job each; actions labeled clearly
+
+## Express
+
+- [ ] Short design plan existed (subject, palette roles, signature)
+- [ ] First viewport has one job
+- [ ] Controls still `M*`; colors/spacing map to `--m-*`
+- [ ] Avoided AI-default looks unless user/reference requested them
+- [ ] Motion limited and gated by `useMotion` / `data-m-motion`
+
+## Tokens, a11y, responsive
+
+- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline; `color-mix` from `--m-*` OK)
+- [ ] Labels visible; icon buttons have `aria-label`
+- [ ] Usable on a narrow viewport
+- [ ] Focus visible on interactive elements
+
+When MCP is available, contract checks (**`validate_usage`** / **`validate_page`**) are required.
+
+If the project has `pnpm check:colors`, suggest running it after edits.

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

@@ -1,73 +1,68 @@
-# Style direction & presets
-
-Golden pages lock **block order and APIs**. They are **not** the only allowed look. Pick a visual direction **before** coding so generated pages stop looking identical and stiff.
-
-## Resolution order (required)
-
-1. **Reference first** — user supplied a screenshot, mock, existing page, URL, or “像 XX / like X”.
-   - Extract: density, hierarchy, surfaces (flat vs filled), accent placement, copy tone.
-   - Remap onto `--m-*` + `M*` only. Do **not** switch UI kits or copy hex themes.
-2. **Named preset** — user asked for `soft` / 柔和留白 / `dense` / …
-3. **Prompt cues** — industry or mood words in the brief → infer the closest preset and **name it** in the reply.
-4. **Offer a choice** — still unclear → ask **one** short question with 3–4 options (ids below). If the user says “直接写 / just ship”, pick by domain heuristic — **do not always use `quiet`**.
-
-MCP: `list_style_presets` / `get_style_preset` / `recommend_page({ style })` → `styleDirection`.
-
-## Presets (user-selectable)
-
-| Id | 中文 | Best for | Distinct craft | List golden |
-| --- | --- | --- | --- | --- |
-| `quiet` | 克制经典 | Serious enterprise admin | Flat chrome, golden-like Ops polish | `list-page` |
-| `soft` | 柔和留白 | Ops / content admin | `density="spacious"`, filled filters, short descriptions | `list-page` |
-| `dense` | 高密度工具台 | Monitoring / power users | `density="compact"`, `size="small"` table, tight filters | `list-page-dense` |
-| `rail` | 侧栏强调 | Branded B2B shells | Token `color-mix` wash on sider/header only | `list-page-rail` |
-| `studio` | 工作室呼吸感 | Design / collab / knowledge | Stronger header hierarchy; optional one radial wash | `list-page` |
-| `ink` | 线框极简 | Tool / docs feel | Plain filters, bordered table, little fill | `list-page` |
-
-Full apply/avoid lists: MCP `get_style_preset` or `@morya-ui/mcp` `style-presets`. `recommend_page({ style })` routes list scaffolds to the matching golden when a craft variant exists.
-
-### Domain heuristics (when user says “直接写”)
-
-| Cue in brief | Prefer |
-| --- | --- |
-| 金融 / 合规 / 政务 | `quiet` or `ink` |
-| 运营 / 内容 / 教育 | `soft` |
-| 监控 / 运维 / 交易 | `dense` |
-| 强调品牌色 / LOGO | `rail` |
-| 设计 / 协作 / 知识库 | `studio` |
-| 登录 / 落地 / 品牌营销 | Account/Express atmosphere — not an Ops preset |
-
-## How to apply on Ops pages
-
-1. Mirror golden **structure** via `recommend_page` / `get_golden_page` (list: `list-page` / `list-page-dense` / `list-page-rail` by style).
-2. Apply the chosen preset’s density / filter surface / header copy / chrome wash (or follow the craft golden when one exists).
-3. Still run [visual-craft.md](visual-craft.md) § Ops polish (one primary, menu icons, `MStatus`, designed empty).
-4. Fill height remains **conditional** — see [page-layouts.md](page-layouts.md) § List height.
-
-## Reference style checklist
-
-When following a reference:
-
-- [ ] Hierarchy (what is loud vs quiet) matched with type/space, not random cards
-- [ ] Density matched (`compact` / default / `spacious`)
-- [ ] Surfaces matched (plain vs filled filters; bordered table or not)
-- [ ] Accent placement matched (chrome only vs content) using `--m-*` / `color-mix`
-- [ ] Interaction patterns stay morya-ui (`MTable` `rows`, `message`, etc.)
-
-## Anti-patterns
-
-- Treating the golden page as the only allowed aesthetic
-- Asking nothing and always emitting `quiet`
-- Inventing a second component library to “match the reference”
-- Turning Ops into a marketing landing to “look less stiff”
-- Letting Frontend Design / Impeccable / UI-UX-Pro-Max swap stacks or ignore `M*` / `--m-*` (see [optional-companions.md](optional-companions.md))
-
-## Companion pairing
-
-| Preset | Pairs well with |
-| --- | --- |
-| `quiet` / `ink` | Impeccable Operate + `quieter` / `polish` |
-| `soft` / `studio` | Frontend Design hierarchy cues; Impeccable `bolder` (one signature only) |
-| `dense` | Impeccable Operate — scanability over decoration |
-| `rail` | Frontend Design brand panel taste on **chrome only** |
-| Express (no Ops preset) | Frontend Design design plan → Impeccable `polish` |
+# Style direction (no preset catalog)
+
+Golden pages lock **block order and APIs**. They are **not** the only allowed look. There is **no** named style-preset table (`simple` / `glass` / …). Resolve the look from the **user**, then map onto `M*` + `--m-*`.
+
+## Resolution order (required)
+
+1. **User reference or explicit description (highest)**  
+   Screenshot / mock / existing page / URL / “像 XX”, or clear words (“毛玻璃一点”、“深蓝科技风”).  
+   **Must follow.** Remap to `--m-*` + `M*`. Do not switch kits, do not “improve” into another face.
+
+2. **Clear prompt cues (when not explicit)**  
+   Industry / mood words in the brief → infer and **state your reading in one sentence**.  
+   Decorative glass / neon / full-page gradients only when the prompt clearly asks.
+
+3. **Uncertain → ask (required)**  
+   No reference, vague cues → **ask once** for a short description or a reference.  
+   Do not invent the full look in silence.
+
+4. **Only if user declines**  
+   “你看着办 / 直接写” with still no cues → quiet flat on-token admin face, **say so**, continue.  
+   Never default to aurora / neon / unsolicited glass / cream-serif-terracotta.
+
+MCP: `get_style_direction` / `recommend_page({ style?, density?, brief? })` → `styleDirection` + optional `referenceMapping`.  
+`map_reference` turns a reference description / required blocks into snippet + shell mapping.  
+`resolution: "ask"` means **ask the user**, not free-style.
+
+## Density (explicit)
+
+Pass `density` to `recommend_page` / `map_reference` — do not rely only on regex in the intent string:
+
+| Value | Effect |
+| --- | --- |
+| `compact` | Prefer `list-filters-dense` / `list-page-dense` cues |
+| `default` | Standard Ops polish |
+| `spacious` | More section gap; avoid packing |
+
+## What `style` means
+
+- Free-text from the user (or a short paraphrase of their reference).  
+- **Not** a preset id.  
+- Optional craft cues for list goldens only: words like `dense` / `compact` / `高密` → `list-page-dense`; `rail` / `品牌侧栏` → `list-page-rail`.
+
+## Reference brief (fidelity)
+
+When the user provides a screenshot / mock / “像 XX”, call **`map_reference`** (or pass `brief` into `recommend_page`) with:
+
+- `description` — what you see (layout, density, primary CTA)
+- `requiredBlocks` — e.g. `filters`, `table`, `status`, `kpi`, `auth`
+- `requiredComponents` — e.g. `Table`, `Status`
+- `density` / `primaryAction` when visible
+
+Then compose **only** via returned `mapping[].snippetId`. Pass the **same brief** to `validate_page` so missing blocks fail as contract issues.
+
+## Anti-defaults (unless user/reference asks)
+
+- Purple→indigo / aurora / mesh washes  
+- Warm cream + serif + terracotta kit  
+- Broadsheet newspaper columns  
+- Unsolicited glassmorphism, neon glow stacks, neumorph on dense tables  
+- Companion “atmosphere” that overrides the user’s words  
+
+## How to apply
+
+1. Map reference → snippets (`map_reference` / `recommend_page.referenceMapping`).  
+2. Apply a signature shell when Account / Express / Flow need presence (`get_style_shells`).  
+3. Brand color via theme `--m-color-primary` (DESIGN.md § 主题覆盖), not page hex.  
+4. Run Ops polish when on Operate surfaces.  
+5. Companions deepen **inside** the resolved direction only ([optional-companions.md](optional-companions.md)).