@morya-ui/setup 0.3.3 → 0.3.5

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

@@ -1,119 +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 | `list-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`, …).
-
-## 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`
-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)
-
-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` | Border card solely to wrap the table |
-| Spacing | `MSpace` / `MFlex` for peers; page gap from `MPageContent` | Nested padded divs stacking gaps |
-| Scroll | Rely on layout scroll; explicit `MScrollbar` for local panes | Forcing overflow on every content slot |
-| 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,61 +1,63 @@
-# 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)
-
-- [ ] Lane craft from [visual-craft.md](visual-craft.md) applied (Ops polish and/or atmosphere)
-- [ ] 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
-- [ ] 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 (advisory suggestions addressed or consciously waived)
+
+## 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**
+- [ ] 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
+- [ ] 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`
+
+## 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

@@ -0,0 +1,45 @@
+# 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? })` → `styleDirection`.  
+`resolution: "ask"` means **ask the user**, not free-style.
+
+## 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`.
+
+## 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. Mirror golden **structure** via `recommend_page` / `get_golden_page`.  
+2. Apply the resolved direction with tokens + layout/type — see [visual-craft.md](visual-craft.md).  
+3. Run Ops polish when on Operate surfaces.  
+4. Companions deepen **inside** the resolved direction only ([optional-companions.md](optional-companions.md)).