v0.2 Phase 5: 11 primitives + gated design-system-v2 preview
Custom-styled primitives (no headless dep): LumotiaButton — primary/secondary/tertiary/destructive × sm/md/lg LumotiaIconButton — square icon-only; ghost/filled/destructive LumotiaNotice — info/caution/danger/success inline notice LumotiaProgress — native <progress> + token theming LumotiaField — plain + Formsnap modes share the same markup Bits UI 2.18.1 wrappers (warm-brutalist styling): LumotiaSelect — single-select, options=[] LumotiaCombobox — searchable; one-way inputValue + oninput LumotiaDialog — controlled open; closable + footer snippet LumotiaTabs — orchestrates List/Trigger/Content from a tabs array LumotiaTooltip — wraps Provider + Root + Trigger + Content LumotiaMenu — DropdownMenu items=[] with destructive variant design-system-v2 preview route: src/routes/design-system-v2/+page.ts gates with VITE_LUMOTIA_DESIGN_SYSTEM_V2=1. Without the flag the load() throws 404 — route-level gate, not nav- hidden. Run via VITE_LUMOTIA_DESIGN_SYSTEM_V2=1 npm run dev:frontend to see the showcase. Browser-mode component test: src/lib/ui/LumotiaButton.browser.test.ts. Covers render, click, and disabled-blocks-click. Validates that vitest-browser-svelte + the @vitest/browser-playwright provider land Phase 1's tooling contract end-to-end. 3/3 passing in Chromium. Type fix: LumotiaIconButton and LumotiaMenu accept icon: any so lucide-svelte's legacy SvelteComponentTyped shape composes with our Svelte 5 wrappers without forcing a // @ts-nocheck escape hatch on every call site. Tightens to Component<…> once lucide-svelte ships a Svelte 5 build. Type fix: LumotiaCombobox honours Bits UI 2.x Combobox.Root's one-way inputValue contract. The wrapper drops bind:inputValue and exposes an oninput callback so caller-owned filter pipelines (HistoryPage FTS5, ModelDownloader) can drive options upstream. Phase 5 per-page gate green: npm run check (0/0/5700 files), npm test, npm run test:browser (3/3 in Chromium), npm run test:e2e (16/16), guard-no-skeleton clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -96,17 +96,17 @@ Filled progressively during Phases 4–5. Wrappers live in `src/lib/ui/`; bespok
|
||||
|
||||
| Wrapper | Implementation | Status |
|
||||
|---|---|---|
|
||||
| `LumotiaButton` | native + `.btn-*` class system; primary / secondary / tertiary / destructive | pending |
|
||||
| `LumotiaIconButton` | native + lucide-svelte; standard sizing + tooltip slot | pending |
|
||||
| `LumotiaNotice` | custom; info / caution / danger / success inline notices | pending |
|
||||
| `LumotiaProgress` | native `<progress>` + tokens; fall back to `role="progressbar"` only if native styling proves inconsistent | pending |
|
||||
| `LumotiaField` | native + Formsnap Field integration; text + textarea + label + error wrapper | pending |
|
||||
| `LumotiaSelect` | Bits UI Select | pending |
|
||||
| `LumotiaCombobox` | Bits UI Combobox | pending |
|
||||
| `LumotiaDialog` | Bits UI Dialog | pending |
|
||||
| `LumotiaTabs` | Bits UI Tabs | pending |
|
||||
| `LumotiaTooltip` | Bits UI Tooltip | pending |
|
||||
| `LumotiaMenu` / `LumotiaPopover` | Bits UI DropdownMenu / Popover | pending |
|
||||
| `LumotiaButton` | native + `.btn-*` class system; primary / secondary / tertiary / destructive | ✅ Phase 5 |
|
||||
| `LumotiaIconButton` | native + lucide-svelte; standard sizing + tooltip slot | ✅ Phase 5 |
|
||||
| `LumotiaNotice` | custom; info / caution / danger / success inline notices | ✅ Phase 5 |
|
||||
| `LumotiaProgress` | native `<progress>` + tokens; fall back to `role="progressbar"` only if native styling proves inconsistent | ✅ Phase 5 (native `<progress>` held up; no fallback needed) |
|
||||
| `LumotiaField` | native + Formsnap Field integration; text + textarea + label + error wrapper | ✅ Phase 5 |
|
||||
| `LumotiaSelect` | Bits UI Select | ✅ Phase 5 |
|
||||
| `LumotiaCombobox` | Bits UI Combobox | ✅ Phase 5 |
|
||||
| `LumotiaDialog` | Bits UI Dialog | ✅ Phase 5 |
|
||||
| `LumotiaTabs` | Bits UI Tabs | ✅ Phase 5 |
|
||||
| `LumotiaTooltip` | Bits UI Tooltip | ✅ Phase 5 |
|
||||
| `LumotiaMenu` (DropdownMenu) | Bits UI DropdownMenu | ✅ Phase 5 (Popover deferred — DropdownMenu covers the v0.2 use cases) |
|
||||
|
||||
### 6.3 Bespoke surfaces — DO NOT wrap, DO NOT rewrite
|
||||
|
||||
@@ -202,7 +202,7 @@ Filled during execution. Each entry: phase #, date, what landed, what's next.
|
||||
| 2 | ✅ complete | bits-ui 2.18.1, formsnap 2.0.1, sveltekit-superforms 2.30.1, zod 4.4.3, @internationalized/date 3.12.1. `npm audit signatures` 273 verified + 93 attestations. |
|
||||
| 3 | ✅ complete | New tokens `--color-caution`, `--color-info`, `--color-accent-environment` (dark + light), `--color-warning` aliased to `var(--color-caution)`. KI-05 resolved: `theme` dropped from SettingsState type + defaults, all four route-layout migration `$effect`s deleted, two SettingsPage SegmentedButton bindings repointed to `preferences.theme` via Svelte 5 function bindings, one-shot legacy-theme migration on first mount strips the field after copying. Gate green (check 0/0, vitest 13/13, e2e 16/16). |
|
||||
| 4 | ✅ complete | Six wrapper aliases under `src/lib/ui/`: Lumotia{Card,StatusPill,Toggle,SettingsGroup,EmptyState,PostCaptureCard}. Same prop APIs, $bindable forwarded for Toggle. Underlying `src/lib/components/*.svelte` untouched. |
|
||||
| 5 | pending | New primitives + design-system-v2 preview |
|
||||
| 5 | ✅ complete | 11 primitives shipped under `src/lib/ui/`. `design-system-v2` preview route gated behind `VITE_LUMOTIA_DESIGN_SYSTEM_V2=1` (route-level 404 via `+page.ts` load, not nav-hidden). Browser-mode component test (LumotiaButton): 3/3 passing in Chromium. Gate green (check 0/0/5700 files, vitest 0/0, test:browser 3/3, e2e 16/16). |
|
||||
| 6 | pending | Shell split |
|
||||
| 7.1 ShutdownRitualPage | pending | |
|
||||
| 7.2 FilesPage | pending | |
|
||||
|
||||
Reference in New Issue
Block a user