diff --git a/.planning/phases/10.1-runtime-admin-extension-point/10.1-UI-SPEC.md b/.planning/phases/10.1-runtime-admin-extension-point/10.1-UI-SPEC.md new file mode 100644 index 0000000..859f91c --- /dev/null +++ b/.planning/phases/10.1-runtime-admin-extension-point/10.1-UI-SPEC.md @@ -0,0 +1,339 @@ +--- +phase: "10.1" +slug: "runtime-admin-extension-point" +status: draft +shadcn_initialized: false +preset: none +created: "2026-09-28" +--- + +# Phase 10.1 — UI Design Contract + +> Visual and interaction contract for frontend phases. Generated by gsd-ui-researcher, verified by gsd-ui-checker. + +**Scope of this contract.** Phase 10.1 adds four new surfaces to the Phase 10 admin SPA. It does not restyle anything that already exists. + +1. A **list header partial host**: a server-rendered strip between the list heading and the list card. +2. A **form `type: partial` host**: a server-rendered block inside a form row. +3. A **form `type: widget` host**: it mounts a plugin custom element in a form row. +4. **Custom toolbar action buttons** in the list toolbar. + +Each surface has a framework contract, which is app-agnostic and lives in `summercms.go`. The application proof lives in `fonoteka.go` (Albums stats strip, Discogs lookup widget, Discogs sync toolbar action). All framework copy below is neutral. Application copy appears only in the "Application proof" rows. + +**Design source of truth:** `.planning/phases/10-admin-vue-spa/design/README.md` (Direction C v2) and the tokens already in `admin/src/styles/main.css`. This contract reuses those tokens and adds none, except the partial style kit classes defined under Color/Spacing below. Those classes read only existing `--c-*` variables. + +--- + +## Design System + +| Property | Value | +|----------|-------| +| Tool | In-repo Direction C component set (Vue 3.5.35 SFCs + Tailwind 4.3.0 `@theme` tokens). shadcn is not applicable because this is a Vue project, not React/Next. No preset. | +| Preset | not applicable | +| Component library | reka-ui 2.9.10 (headless primitives, used by ConfirmDialog, RelationPickerModal and UserMenu). No new primitives in this phase. | +| Icon library | `@lucide/vue` 1.17.0, with named imports only. The framework host components use `CircleAlert` (failure box) and nothing else new. Plugin custom elements cannot import lucide and ship **no icons** in v1. | +| Font | DM Sans 400/500/600/700 and DM Mono 400/500 (self-hosted `@fontsource`). Base is 14px / 1.5. Plugin elements inherit `font-family` from the host. Buttons inside them must set `font: inherit`. | +| npm changes | **None.** T-10-SC exact-pin posture unchanged (source: RESEARCH §Standard Stack) | + +--- + +## Component Inventory + +Enumerated by `find admin/src/components -name '*.vue' | sort` — 29 components — summercms-admin (in-repo, `admin/package.json`, commit e51be35; reka-ui@2.9.10, @lucide/vue@1.17.0 resolved from `admin/node_modules`) — 2026-09-28. + +This is a **non-exhaustive** list of known-good components, not a closed allowlist. It shows the rows this phase reuses or extends. New components this phase adds are listed separately below. + +| Component | Import path | Notes | +|-----------|-------------|-------| +| Button | `admin/src/components/ui/Button.vue` | Custom toolbar actions use `variant="outline"` at size `md` (42px). The `primary` variant is **not** used by any new surface. | +| Toast | `admin/src/components/ui/Toast.vue` (queue: `admin/src/state/useToasts.ts`) | All action feedback. Tones are only `success` (role=status) and `danger` (role=alert). About 4s auto-dismiss. | +| ListToolbar | `admin/src/components/list/ListToolbar.vue` | Extended: it renders registered custom action names in declared order after the built-ins. | +| FormField | `admin/src/components/form/FormField.vue` | Extended: `widget` and `partial` rows render a visible label as `` (not `