@morya-ui/setup 0.3.3 → 0.3.5

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

@@ -1,100 +1,101 @@
-# Design system (consumer summary)
-
-Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
-
-## Principles
-
-1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
-2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
-3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
-4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
-5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
-
-## App shell
-
-```vue
-<script setup lang="ts">
-import { MConfigProvider, zhCN } from 'morya-ui'
-import 'morya-ui/styles.css'
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout fill-viewport has-sider>
-      <MLayoutSider bordered>
-        <MMenu
-          :model="[
-            { key: 'users', label: 'Users', icon: 'user', to: '/users' },
-            { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
-          ]"
-        />
-      </MLayoutSider>
-      <MLayout>
-        <MLayoutHeader>...</MLayoutHeader>
-        <MLayoutContent>...</MLayoutContent>
-      </MLayout>
-    </MLayout>
-  </MConfigProvider>
-</template>
-```
-
-| Role | Prefer |
-| --- | --- |
-| Admin chrome | `MLayout fillViewport` + sider / header / content |
-| Sider nav | `MMenu` |
-| Page stack | `MPageContent` inside `MLayoutContent` |
-| List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
-| Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
-| Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
-| Module cards | `MCard` / `MPanel` / `MFieldset` |
-| Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
-
-## Forms
-
-- `MForm` + `MFormItem` with `name` aligned to rules.
-- Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
-- Default size medium; dense apps may use `size="small"` or ConfigProvider density.
-- Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
-
-## Data display
-
-- `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
-- Row status → `MStatus`; categories / closable labels → `MTag`.
-- Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
-- Pagination: table `paginator` or sibling `MPagination`.
-- Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
-- Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
-- Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
-
-## Overlays
-
-| Need | Component |
-| --- | --- |
-| Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
-| Detail / edit modal | `MDialog` |
-| Side filter / detail | `MDrawer` |
-| Field hint | `MTooltip` |
-
-## Token cheat sheet
-
-| Use | Variable |
-| --- | --- |
-| Page background | `--m-color-surface` |
-| Body text | `--m-color-text` |
-| Muted text | `--m-color-text-muted` |
-| Border | `--m-color-border` |
-| Brand / link | `--m-color-primary` |
-| Danger | `--m-color-danger` |
-| Section gap | `--m-space-4` / `--m-space-6` |
-| Card radius | `--m-radius-md` |
-| Card shadow | `--m-shadow-md` |
-
-Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
-
-## Bans
-
-- Second UI library on the same page.
-- Hard-coded theme colors that break `[data-theme="dark"]`.
-- `<div @click>` instead of `MButton` / `<button>`.
-- Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
-- Skipping `import 'morya-ui/styles.css'`.
+# Design system (consumer summary)
+
+Canonical long form lives in project-root `DESIGN.md` when the AI config pack is merged. This file is the portable subset for agents.
+
+## Principles
+
+1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
+2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
+3. **Semantic actions** — primary work uses `MButton severity="primary"`; destructive uses `severity="danger"` or confirm dialogs.
+4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
+5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
+
+## App shell
+
+```vue
+<script setup lang="ts">
+import { MConfigProvider, zhCN } from 'morya-ui'
+import 'morya-ui/styles.css'
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport has-sider>
+      <MLayoutSider bordered>
+        <MMenu
+          :model="[
+            { key: 'users', label: 'Users', icon: 'user', to: '/users' },
+            { key: 'roles', label: 'Roles', icon: 'shield', to: '/roles' },
+          ]"
+        />
+      </MLayoutSider>
+      <MLayout>
+        <MLayoutHeader>...</MLayoutHeader>
+        <MLayoutContent>...</MLayoutContent>
+      </MLayout>
+    </MLayout>
+  </MConfigProvider>
+</template>
+```
+
+| Role | Prefer |
+| --- | --- |
+| Admin chrome | `MLayout fillViewport` + sider / header / content |
+| Sider nav | `MMenu` |
+| Page stack | `MPageContent` inside `MLayoutContent` |
+| List chrome | `MPageHeader` + `MPageFilters` (+ optional batch `MPageToolbar`) |
+| Form surfaces | `MPageHeader` + `MPageSection variant="form|actions"` |
+| Dashboard KPI / chart pending | `MPageStat` + `MCard shadow="always"` + `MEmpty` |
+| Module cards | `MCard` / `MPanel` / `MFieldset` |
+| Grid / spacing | `MGrid` + `MGridItem`, or `MFlex` / `MSpace` |
+
+## Forms
+
+- `MForm` + `MFormItem` with `name` aligned to rules.
+- Prefer field props (`label`, `invalid`, `helpText`) when the control supports them; wrap with `MFormItem` for denser / complex forms.
+- Default size medium; dense apps may use `size="small"` or ConfigProvider density.
+- Form pages: keep the main column narrow (`MPageContent width="narrow"` or ~`40rem`).
+
+## Data display
+
+- `MTable` with `columns` + **`rows`** + `row-key` (default `id`). There is no `data` prop.
+- Height: only for **full-viewport admin lists** whose main job is one table, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded/short/document-scroll tables — see [page-layouts.md](page-layouts.md) § List height.
+- Row status → `MStatus`; categories / closable labels → `MTag`.
+- Row actions: text/link `MButton` or `MDropdown` (avoid a row of filled buttons).
+- Pagination: table `paginator` or sibling `MPagination`.
+- Empty states: `MEmpty` in `#empty` / Flow golden — never a silent blank table.
+- Terminal outcomes (success / 403 / 404 / 500): `MResult` — do not reuse `MEmpty` for errors.
+- Visual polish: [visual-craft.md](visual-craft.md) (Ops polish + atmosphere).
+
+## Overlays
+
+| Need | Component |
+| --- | --- |
+| Delete confirm | `MConfirmDialog` / `MConfirmPopup` |
+| Detail / edit modal | `MDialog` |
+| Side filter / detail | `MDrawer` |
+| Field hint | `MTooltip` |
+
+## Token cheat sheet
+
+| Use | Variable |
+| --- | --- |
+| Page background | `--m-color-surface` |
+| Body text | `--m-color-text` |
+| Muted text | `--m-color-text-muted` |
+| Border | `--m-color-border` |
+| Brand / link | `--m-color-primary` |
+| Danger | `--m-color-danger` |
+| Section gap | `--m-space-4` / `--m-space-6` |
+| Card radius | `--m-radius-md` |
+| Card shadow | `--m-shadow-md` |
+
+Full set: MCP `get_design_rules`. Runtime truth remains `morya-ui/styles.css`.
+
+## Bans
+
+- Second UI library on the same page.
+- Hard-coded theme colors that break `[data-theme="dark"]`.
+- `<div @click>` instead of `MButton` / `<button>`.
+- Using `MDropdown` for form enum selection (use `MSelect` / `MTreeSelect`).
+- Skipping `import 'morya-ui/styles.css'`.

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,34 +1,62 @@
-# Optional companions
-
-This skill is **standalone**. Distilled craft lives in [visual-craft.md](visual-craft.md). Companions are optional soft upgrades installed by `@morya-ui/setup` via the [skills CLI](https://skills.sh/) (always the latest published version).
-
-## Conflict rule
-
-`morya-ui-pages` + project `DESIGN.md` + MCP APIs **override** companion advice whenever they disagree (component choice, tokens, Ops layout, feedback API).
-
-## Install via setup
-
-```bash
-# Interactive (TTY): toggle optional skills
-npx @morya-ui/setup ai
-
-# Non-interactive
-npx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,fixing-accessibility,impeccable
-npx @morya-ui/setup ai --skills=all
-```
-
-| Companion | Source | Safe use | Unsafe use |
-| --- | --- | --- | --- |
-| `frontend-design` | `anthropics/skills` | Express / brand panel taste after surface + contract are fixed | Replacing Ops golden shell or introducing a second UI kit |
-| `fixing-accessibility` | `ibelick/ui-skills` | Names, keyboard, focus, form errors on top of `M*` | Replacing library dialogs/menus with custom ARIA widgets |
-| `impeccable` | `pbakaus/impeccable` | Named polish / audit passes aligned with [visual-craft.md](visual-craft.md) | New token schema or swapping `M*` for raw HTML controls |
-
-## Load budget
-
-- Default: **morya-ui-pages only**
-- Max: pages + **one** optional companion for a given task
-- Broad redesign review: pages + accessibility pass, or pages + one visual companion — still prefer one companion at a time
-
-## If companions are absent
-
-Do **not** tell the user to install them mid-task. Use [visual-craft.md](visual-craft.md) and continue.
+# 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
+```