From b5212a33d021d0a5697139c564e859781e899990 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Thu, 11 Jun 2026 14:01:39 +1000
Subject: [PATCH 01/33] =?UTF-8?q?fix(web/hub):=20caret=20half=20of=20split?=
 =?UTF-8?q?=20New=20button=20was=20h-8=20vs=20Button=20md=20h-9=20?=
 =?UTF-8?q?=E2=80=94=20derive=20it=20from=20buttonClassName(primary)=20so?=
 =?UTF-8?q?=20the=20two=20segments=20can't=20drift?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/home/HomeView.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/src/components/home/HomeView.tsx b/web/src/components/home/HomeView.tsx
index 4de7d56a..a274792c 100644
--- a/web/src/components/home/HomeView.tsx
+++ b/web/src/components/home/HomeView.tsx
@@ -3,6 +3,7 @@ import type { Item, Folder, AppUser } from '../../domain/types';
 import {
   SearchInput,
   Button,
+  buttonClassName,
   Select,
   SelectTrigger,
   SelectContent,
@@ -187,12 +188,10 @@ export function HomeView({
                 <button
                   type="button"
                   aria-label="More new diagram options"
-                  className={cn(
-                    'grid place-items-center h-8 px-1.5 rounded-r-md rounded-l-none',
-                    'bg-accent hover:bg-accent-hover active:bg-accent-press text-white',
-                    'transition-colors duration-150 ease-draft ring-draft',
-                    'border-l border-white/20',
-                  )}
+                  className={buttonClassName({
+                    variant: 'primary',
+                    className: 'rounded-l-none px-1.5 border-l border-white/20',
+                  })}
                 >
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-3.5 w-3.5" aria-hidden="true">
                     <path d="M6 9l6 6 6-6" strokeLinecap="round" />

From ba6cd1a33aa57fc593d7600777ec0b2aca566572 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:21:30 +1000
Subject: [PATCH 02/33] =?UTF-8?q?docs(spec):=20editor-as-landing-page=20de?=
 =?UTF-8?q?sign=20=E2=80=94=20bare=20/=20lands=20in=20editor=20(resume=20l?=
 =?UTF-8?q?ast/sample),=20hub=20demoted=20to=20=3Fview=3Ddiagrams;=20pre/p?=
 =?UTF-8?q?ost=20telemetry=20not=20A/B=20(15=20weekly=20actives)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../specs/2026-06-13-editor-landing-design.md | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-13-editor-landing-design.md

diff --git a/docs/superpowers/specs/2026-06-13-editor-landing-design.md b/docs/superpowers/specs/2026-06-13-editor-landing-design.md
new file mode 100644
index 00000000..dec11b35
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-13-editor-landing-design.md
@@ -0,0 +1,90 @@
+# Editor as Landing Page — Design Spec
+
+Branch: `rewrite/web-foundation`, target `web/` React 19 codebase.
+Decision: bare `/` lands in the **editor** (resume last-opened diagram, else sample),
+demoting the hub (HomeView) to an explicit `?view=diagrams` address. This restores the
+legacy product's landing behavior on the rewrite's architecture.
+
+## Why (data, 2026-06-13)
+
+Mixpanel project Diagramly.Ai (3373228), web-sequence = `FireWeb` / `WA:*` events:
+
+- `WA:create_diagram`: **26 unique users / 54 events in 30 days** (~12–15/week)
+- `WA:download_png` 5–9 uniques/week; `WA:copy_png` 5–8/week; `WA:login_google` 1/30d
+- `WA:*` instrumentation only began reporting week of 2026-06-01; legacy events
+  (`pageView`, `userEdit`, `hasCode`) return zero rows — that pipeline is dead.
+
+Implications:
+
+1. **A/B testing is infeasible.** ~15 weekly actives split into two arms needs ~400
+   users/arm to detect even a large effect at 80% power → ~a year per verdict.
+2. **Essentially every visitor is new or occasional**, arriving to draw one diagram.
+   A dashboard front door is a lobby in front of the tool. Dashboards pay off when
+   users accumulate libraries; the data says almost nobody has one.
+
+## Confirmed decisions
+
+1. **Landing doc**: last-opened diagram (localStorage last-code), else the sample
+   diagram for first-timers. Exactly the legacy chain.
+2. **Hub address**: `?view=diagrams` search param (consistent with the existing
+   single-route `?id=`/`?embed` style; no Firebase hosting changes). Hub UI unchanged.
+3. **Validation**: pre/post telemetry, not A/B. Ship to 100%, compare 3–4 weeks
+   before/after.
+
+## Design
+
+### Routing (`web/src/app/router.tsx`, `web/src/app/AppRoot.tsx`)
+
+- `validateSearch` gains `view: s.view as string | undefined`.
+- `isHomeMode = search.view === 'diagrams' && !idParam && !shareToken && !isEmbed &&
+  !runtime.embedCode` — i.e. the hub is now opt-in; `id`/`share-token`/`embed` take
+  precedence over `view` if both appear.
+- `goHome()` navigates to `?view=diagrams` (today it clears params to `/`).
+- All existing deep links (`?id=`, `?share-token=`, `?embed`, `?code=`) untouched.
+
+### Boot on bare `/`
+
+No new machinery. `useBootItem` (`web/src/hooks/useBootItem.ts`) already resolves:
+share → `?code=` → `?id=` → last-code (`preserveLastCode`) → `newItem()` (sample).
+The hub previously skipped boot on bare `/` (`skip = isHomeMode`); with `isHomeMode`
+now opt-in, bare `/` flows through the chain. Returning users resume their last
+diagram; first-timers get the sample in the editor.
+
+### Hub stays, demoted
+
+HomeView is unchanged and reachable via the editor's "Your diagrams" breadcrumb
+(→ `?view=diagrams`), bookmarkable. Hub-internal navigation (card → `?id=`,
+New → editor) already works.
+
+### Telemetry (pre/post validation)
+
+Through the existing `track()` helper:
+
+- `landed_in_editor` `{ bootKind: 'lastcode'|'new'|'item'|'shared'|'code' }` — once
+  per boot when the editor is the landing surface.
+- `hub_opened` `{ source: 'landing-param'|'breadcrumb' }` — measures real demand for
+  the dashboard.
+- `first_edit` — once per session, on the first user-initiated code change.
+  (Verified: `web/` has no edit tracking today — the legacy `userEdit` event was
+  never ported — so this is a new event.)
+
+Decision metrics: % of sessions reaching an edit; time-to-first-edit; `hub_opened`
+rate. Compare 3–4 weeks pre/post alongside `WA:*` baselines.
+
+### Tests
+
+- AppRoot unit tests asserting `'/' → HomeView` flip to `'/' → editor` and
+  `'?view=diagrams' → HomeView`.
+- E2E helpers re-ground: `gotoHome` → `/?view=diagrams`; `openEditor` → `/` (the
+  staging-gate specs that click through HomeView to reach the editor get simpler).
+- `resolveBootItem` is pure and already unit-tested; landing logic needs no new
+  resolver tests, only the `isHomeMode` gate tests.
+
+## Risks / trade-offs
+
+- First-timers land on an editor with sample code instead of an explanatory empty
+  state — the original product's bet, restated deliberately. The sample is the
+  explanation.
+- Pre/post comparison has seasonal confounds; accepted at this traffic level.
+- Any bookmarks/links to the hub-as-`/` (pre-change staging) silently become editor
+  landings — acceptable; the hub was only the default for ~2 weeks on staging.

From c9fc9fa053107a94c7ceb146a5591b448c1bc15a Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:26:15 +1000
Subject: [PATCH 03/33] =?UTF-8?q?docs(plan):=20editor-as-landing-page=20?=
 =?UTF-8?q?=E2=80=94=206=20TDD=20tasks=20(router=20=3Fview,=20isHomeMode?=
 =?UTF-8?q?=20flip,=203=20telemetry=20events,=20test=20re-ground,=20live?=
 =?UTF-8?q?=20screenshot)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/2026-06-13-editor-landing-page.md   | 555 ++++++++++++++++++
 1 file changed, 555 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-13-editor-landing-page.md

diff --git a/docs/superpowers/plans/2026-06-13-editor-landing-page.md b/docs/superpowers/plans/2026-06-13-editor-landing-page.md
new file mode 100644
index 00000000..a81bd2c0
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-13-editor-landing-page.md
@@ -0,0 +1,555 @@
+# Editor as Landing Page — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make bare `/` land in the editor (resume last-opened diagram, else sample), demoting the hub (HomeView) to an explicit `?view=diagrams` address, and add pre/post telemetry to validate the change.
+
+**Architecture:** Invert one routing condition — `isHomeMode` becomes opt-in via a new `?view=diagrams` search param instead of being the default for bare `/`. The existing `useBootItem` boot chain (share → `?code=` → `?id=` → last-code → sample) already produces the resume-or-sample landing, so no resolver work is needed; we just stop skipping it on bare `/`. Three telemetry events ride the existing `track()` helper.
+
+**Tech Stack:** React 19, TanStack Router (search-param routing), Zustand stores, Vitest + Testing Library (unit), Playwright (e2e). Package manager: Yarn for unit/build, pnpm for e2e.
+
+Spec: `docs/superpowers/specs/2026-06-13-editor-landing-design.md`.
+
+**Working directory for all commands:** `web/` (the rewrite app). Run `cd web` first.
+
+---
+
+## File Structure
+
+| File | Responsibility | Change |
+|------|----------------|--------|
+| `web/src/app/router.tsx` | Route + search-param schema | Add `view` to `validateSearch` |
+| `web/src/app/AppRoot.tsx` | App shell, home/editor gating, navigation, telemetry | Flip `isHomeMode` to opt-in; `goHome` → `?view=diagrams`; wire 3 events |
+| `web/src/hooks/useBootItem.ts` | Boot item resolution | Add optional `onResolved(kind)` callback so AppRoot can fire `landed_in_editor` with the resolved `bootKind` |
+| `web/src/app/AppRoot.test.tsx` | AppRoot unit tests | Re-ground 5 home-view tests `/` → `/?view=diagrams`; add editor-on-`/` + telemetry tests |
+| `web/src/hooks/useBootItem.test.tsx` | Boot hook tests | Add `onResolved` callback test |
+| `web/e2e/helpers/editor.ts` | E2E seed helper | Simplify `seedAndOpen` comment; verify still green (already tolerant) |
+
+---
+
+## Task 1: Router — add `?view` search param
+
+**Files:**
+- Modify: `web/src/app/router.tsx:8-15` (the `validateSearch` object)
+
+- [ ] **Step 1: Write the failing test**
+
+Create `web/src/app/router.test.tsx`:
+
+```tsx
+import { describe, it, expect } from 'vitest';
+import { indexRoute } from './router';
+
+describe('indexRoute.validateSearch', () => {
+  const validate = indexRoute.options.validateSearch as (s: Record<string, unknown>) => Record<string, unknown>;
+
+  it('parses view=diagrams into the search shape', () => {
+    expect(validate({ view: 'diagrams' }).view).toBe('diagrams');
+  });
+
+  it('leaves view undefined when absent (bare /)', () => {
+    expect(validate({}).view).toBeUndefined();
+  });
+
+  it('still parses the existing id param', () => {
+    expect(validate({ id: 'abc' }).id).toBe('abc');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd web && yarn vitest run src/app/router.test.tsx`
+Expected: FAIL — `validate({ view: 'diagrams' }).view` is `undefined` (router does not yet read `view`).
+
+- [ ] **Step 3: Add the `view` param to validateSearch**
+
+In `web/src/app/router.tsx`, add the `view` line to the returned object (after `id`):
+
+```tsx
+  validateSearch: (s: Record<string, unknown>) => ({
+    id: s.id as string | undefined,
+    view: s.view as string | undefined,
+    'share-token': s['share-token'] as string | undefined,
+    embed: s.embed !== undefined ? true : undefined,
+    code: s.code as string | undefined,
+    title: s.title as string | undefined,
+    stickyOffset: s.stickyOffset !== undefined ? Number(s.stickyOffset) : undefined,
+  }),
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd web && yarn vitest run src/app/router.test.tsx`
+Expected: PASS (3 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/app/router.tsx web/src/app/router.test.tsx
+git commit -m "feat(web/router): add ?view search param (hub address for editor-landing change)"
+```
+
+---
+
+## Task 2: AppRoot — flip `isHomeMode` to opt-in, redirect bare `/` to the editor
+
+**Files:**
+- Modify: `web/src/app/AppRoot.tsx:352-358` (read `view`, redefine `isHomeMode`)
+- Modify: `web/src/app/AppRoot.tsx:667-681` (`goHome` → `?view=diagrams`)
+- Modify: `web/src/app/AppRoot.test.tsx` — re-ground 5 home-view tests + add an editor-on-`/` test
+
+**Context:** Today `isHomeMode = !idParam && !shareToken && !runtime.embedCode && !isEmbed` (`AppRoot.tsx:358`) — bare `/` is the hub. We make the hub opt-in: it requires `view === 'diagrams'`. Bare `/` then falls through to `useBootItem` (the boot is skipped only when `isHomeMode || embedByValue`, `AppRoot.tsx:383`), which resumes last-code or seeds the sample.
+
+- [ ] **Step 1: Write the failing test — bare `/` renders the editor**
+
+In `web/src/app/AppRoot.test.tsx`, add inside `describe('AppRoot', …)` (near the existing "renders editor and preview regions" test):
+
+```tsx
+  it("bare '/' lands in the editor, not the hub", async () => {
+    window.history.replaceState({}, '', '/');
+    render(<AppRoot />);
+    expect(await screen.findByTestId('editor-region')).toBeInTheDocument();
+    expect(screen.queryByTestId('home-view')).toBeNull();
+  });
+
+  it("'?view=diagrams' renders the hub", async () => {
+    window.history.replaceState({}, '', '/?view=diagrams');
+    render(<AppRoot />);
+    expect(await screen.findByTestId('home-view')).toBeInTheDocument();
+  });
+```
+
+- [ ] **Step 2: Run to verify the new tests fail**
+
+Run: `cd web && yarn vitest run src/app/AppRoot.test.tsx -t "lands in the editor"`
+Expected: FAIL — bare `/` still renders `home-view` (no `editor-region`), so `findByTestId('editor-region')` times out.
+
+- [ ] **Step 3: Redefine `isHomeMode` as opt-in**
+
+In `web/src/app/AppRoot.tsx`, replace the `isHomeMode` definition (around line 352-358). Add `viewParam` next to `idParam`:
+
+```tsx
+  const idParam = search.id ?? null;
+  const viewParam = search.view ?? null;
+  const shareToken = search['share-token'] ?? null;
+
+  // Editor-as-landing (2026-06-13): the hub is now OPT-IN via ?view=diagrams.
+  // Bare "/" falls through to useBootItem (resume last-code, else sample) — the
+  // legacy landing behavior. id/share-token/embed still take precedence: a deep
+  // link with both ?view=diagrams and ?id= opens the diagram, not the hub.
+  const isHomeMode =
+    viewParam === 'diagrams' && !idParam && !shareToken && !runtime.embedCode && !isEmbed;
+```
+
+- [ ] **Step 4: Point `goHome` at `?view=diagrams`**
+
+Replace `goHome` (around line 667-681). It must SET `view: 'diagrams'` and clear the editor params:
+
+```tsx
+  // Editor-as-landing: return to the hub by setting ?view=diagrams (and clearing
+  // the editor params). Previously this cleared everything to bare "/", which now
+  // lands in the editor.
+  function goHome() {
+    void navigate({
+      to: '/',
+      search: (prev) => ({
+        ...prev,
+        view: 'diagrams',
+        id: undefined,
+        'share-token': undefined,
+        embed: undefined,
+        code: undefined,
+        title: undefined,
+        stickyOffset: undefined,
+      }),
+    });
+  }
+```
+
+- [ ] **Step 5: Re-ground the 5 home-view unit tests**
+
+In `web/src/app/AppRoot.test.tsx`, these 5 tests navigate to bare `/` expecting the hub. Change each `window.history.replaceState({}, '', '/')` that is immediately followed by a `home-view`/`home-grid`/`lib-export-all`/`lib-import-input` assertion to `'/?view=diagrams'`. The lines (before your edits shift them) are:
+
+- ~311 (import-failed dialog on home) → `'/?view=diagrams'`
+- ~326 (ask-to-import on home) → `'/?view=diagrams'`
+- ~901 (`'exportItems' uses legacy category 'fn'`) → `'/?view=diagrams'`
+- ~921 (`'itemsImported' uses legacy category 'fn'`) → `'/?view=diagrams'`
+- ~955 (`'itemsImported' label is the newly-added count`) → `'/?view=diagrams'`
+
+Leave the `afterEach` reset at line ~200 (`replaceState({}, '', '/')`) and the `beforeEach` default `'/?id=t-boot'` (line ~160) UNCHANGED — the default editor URL still works because `id` takes precedence.
+
+Verify you caught them all:
+
+```bash
+cd web && grep -n "replaceState({}, '', '/')" src/app/AppRoot.test.tsx
+```
+
+Expected after edits: only the `afterEach` (line ~200) and the harness helper at line ~53 (`qs ? ... : '/'`) remain on bare `/`. Every test that then asserts `home-view`/`home-grid`/`lib-*` must be on `/?view=diagrams`.
+
+- [ ] **Step 6: Run the full AppRoot suite**
+
+Run: `cd web && yarn vitest run src/app/AppRoot.test.tsx`
+Expected: PASS (all tests, including the 2 new gating tests and the 5 re-grounded ones).
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add web/src/app/AppRoot.tsx web/src/app/AppRoot.test.tsx
+git commit -m "feat(web/hub)!: editor is the landing page — hub moves to ?view=diagrams; bare / resumes last diagram or seeds sample via existing boot chain"
+```
+
+---
+
+## Task 3: Telemetry — `landed_in_editor` with `bootKind`
+
+**Files:**
+- Modify: `web/src/hooks/useBootItem.ts` (add `onResolved` callback to `BootDeps` + call it in the hook)
+- Modify: `web/src/hooks/useBootItem.test.tsx` (test the callback)
+- Modify: `web/src/app/AppRoot.tsx:369-383` (pass `onResolved` that fires the event)
+
+**Context:** `useBootItem` resolves a `BootResult` with a `.kind` (`'shared' | 'item' | 'code' | 'lastcode' | 'share-error' | 'new'`) but only returns `{ shareError, clearShareError }`. We surface the resolved kind via an optional `onResolved(kind)` callback so AppRoot can fire `landed_in_editor` with `bootKind`. The callback is the minimal seam — the pure `resolveBootItem` stays untouched.
+
+- [ ] **Step 1: Write the failing test for `onResolved`**
+
+In `web/src/hooks/useBootItem.test.tsx`, add a new `describe` block (the hook needs a React renderer — use `@testing-library/react`'s `renderHook`):
+
+```tsx
+import { renderHook, waitFor } from '@testing-library/react';
+import { useBootItem } from './useBootItem';
+
+describe('useBootItem onResolved callback', () => {
+  it('calls onResolved with the resolved kind once auth is ready', async () => {
+    const onResolved = vi.fn();
+    const deps = {
+      idParam: null,
+      shareToken: null,
+      codeParam: null,
+      codeTitle: null,
+      preserveLastCode: false,
+      getItem: vi.fn(),
+      getSharedItem: vi.fn(),
+      getLastCode: vi.fn(),
+      onResolved,
+    };
+    renderHook(() => useBootItem(deps, true, false));
+    await waitFor(() => expect(onResolved).toHaveBeenCalledWith('new'));
+  });
+
+  it('does not call onResolved when skipped (embed-by-value)', async () => {
+    const onResolved = vi.fn();
+    const deps = {
+      idParam: null, shareToken: null, codeParam: null, codeTitle: null,
+      preserveLastCode: false,
+      getItem: vi.fn(), getSharedItem: vi.fn(), getLastCode: vi.fn(),
+      onResolved,
+    };
+    renderHook(() => useBootItem(deps, true, true)); // skip=true
+    // Give any pending microtasks a chance, then assert it never fired.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(onResolved).not.toHaveBeenCalled();
+  });
+});
+```
+
+- [ ] **Step 2: Run to verify it fails**
+
+Run: `cd web && yarn vitest run src/hooks/useBootItem.test.tsx -t "onResolved"`
+Expected: FAIL — `onResolved` is not part of `BootDeps` (TS error) and never called.
+
+- [ ] **Step 3: Add `onResolved` to `BootDeps` and call it in the hook**
+
+In `web/src/hooks/useBootItem.ts`, add to the `BootDeps` interface (after `getLastCode`):
+
+```tsx
+  getLastCode: () => Promise<Item | null>;
+  /**
+   * Editor-as-landing telemetry seam: fired once with the resolved boot kind after
+   * resolution completes (NOT on skip). AppRoot uses it to emit `landed_in_editor`
+   * with bootKind. Optional so the pure resolver and existing callers are unaffected.
+   */
+  onResolved?: (kind: BootResult['kind']) => void;
+```
+
+In the hook's `.then((result) => { … })` block, call `onResolved` after the switch, before the closing brace of `.then`:
+
+```tsx
+    resolveBootItem(deps).then((result) => {
+      switch (result.kind) {
+        case 'shared':
+        case 'item':
+        case 'code':
+        case 'lastcode':
+          loadItem(result.item);
+          break;
+        case 'share-error':
+          setShareError(true);
+          break;
+        case 'new':
+          newItem();
+          break;
+      }
+      deps.onResolved?.(result.kind);
+    }).catch(() => {
+      newItem();
+    });
+```
+
+- [ ] **Step 4: Run to verify it passes**
+
+Run: `cd web && yarn vitest run src/hooks/useBootItem.test.tsx`
+Expected: PASS (existing resolver tests + 2 new onResolved tests).
+
+- [ ] **Step 5: Wire `landed_in_editor` in AppRoot**
+
+In `web/src/app/AppRoot.tsx`, in the `useBootItem({ … })` deps object (around line 369-382), add an `onResolved` handler after `getLastCode`:
+
+```tsx
+    getLastCode: () => localStore.get<Item | null>(LS_KEYS.code, null),
+    // Editor-as-landing telemetry: one event per editor boot, tagged with how the
+    // diagram was resolved. Skipped on the hub (boot is skipped when isHomeMode) and
+    // on embed-by-value — so this fires only when the editor is the landing surface.
+    onResolved: (bootKind) =>
+      track('landed_in_editor', { category: 'navigation', label: bootKind }),
+  // Hub: skip boot when on home — we don't want newItem() seeding a blank diagram there.
+  }, authReady, isHomeMode || embedByValue);
+```
+
+- [ ] **Step 6: Add an AppRoot telemetry test**
+
+In `web/src/app/AppRoot.test.tsx`, add (the file already has `lastEnvelope(eventName)` + `trackMock`):
+
+```tsx
+  it("fires 'landed_in_editor' with bootKind on a bare '/' editor landing", async () => {
+    window.history.replaceState({}, '', '/');
+    render(<AppRoot />);
+    await screen.findByTestId('editor-region');
+    const env = await waitFor(() => {
+      const e = lastEnvelope('landed_in_editor');
+      expect(e).toBeDefined();
+      return e!;
+    });
+    // getItem is mocked to reject in this suite → boot resolves kind 'new'.
+    expect(env.label).toBe('new');
+    expect(env.category).toBe('navigation');
+  });
+```
+
+- [ ] **Step 7: Run the AppRoot + hook suites**
+
+Run: `cd web && yarn vitest run src/app/AppRoot.test.tsx src/hooks/useBootItem.test.tsx`
+Expected: PASS.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add web/src/hooks/useBootItem.ts web/src/hooks/useBootItem.test.tsx web/src/app/AppRoot.tsx web/src/app/AppRoot.test.tsx
+git commit -m "feat(web/telemetry): emit landed_in_editor{bootKind} via useBootItem onResolved seam"
+```
+
+---
+
+## Task 4: Telemetry — `hub_opened` and `first_edit`
+
+**Files:**
+- Modify: `web/src/app/AppRoot.tsx` — `goHome` (`hub_opened` source breadcrumb); a mount effect (`hub_opened` source landing-param); a `setDsl` wrapper (`first_edit`)
+- Modify: `web/src/app/AppRoot.test.tsx` — 2 tests
+
+**Context:**
+- `hub_opened` fires when the hub becomes the active surface, with `source`: `'breadcrumb'` (user clicked "Your diagrams" → `goHome`) or `'landing-param'` (arrived directly at `?view=diagrams`).
+- `first_edit` fires once per AppRoot mount on the first user-initiated DSL change. `setDsl` is wired to `CodeEditor onChange` at `AppRoot.tsx:1162` and `1252`. We wrap it.
+
+- [ ] **Step 1: Write the failing tests**
+
+In `web/src/app/AppRoot.test.tsx`:
+
+```tsx
+  it("fires 'hub_opened' with source 'landing-param' when arriving at ?view=diagrams", async () => {
+    window.history.replaceState({}, '', '/?view=diagrams');
+    render(<AppRoot />);
+    await screen.findByTestId('home-view');
+    const env = await waitFor(() => {
+      const e = lastEnvelope('hub_opened');
+      expect(e).toBeDefined();
+      return e!;
+    });
+    expect(env.label).toBe('landing-param');
+  });
+
+  it("fires 'first_edit' once on the first DSL change", async () => {
+    window.history.replaceState({}, '', '/?id=t-boot');
+    render(<AppRoot />);
+    await screen.findByTestId('editor-region');
+    const editor = screen.getByTestId('dsl-editor');
+    const textbox = editor.querySelector('[contenteditable], textarea, input') ?? editor;
+    await act(async () => { await userEvent.click(textbox); await userEvent.type(textbox, 'A.b'); });
+    await waitFor(() => expect(lastEnvelope('first_edit')).toBeDefined());
+    // Count: exactly one first_edit despite multiple keystrokes.
+    const count = trackMock.mock.calls.filter(
+      ([payload]) => (payload as { event?: string }).event === 'first_edit',
+    ).length;
+    expect(count).toBe(1);
+  });
+```
+
+NOTE: If the `dsl-editor`'s CodeMirror surface does not accept `userEvent.type` cleanly in jsdom, drive the change through the store action the editor calls instead: replace the type block with a direct invocation of the wrapped handler by simulating two `setDsl` calls. Inspect how existing tests in this file edit the DSL (search for `setDsl`, `dsl-editor`, or `fireEvent` usage) and mirror that exact mechanism — do not invent a new one.
+
+- [ ] **Step 2: Run to verify they fail**
+
+Run: `cd web && yarn vitest run src/app/AppRoot.test.tsx -t "hub_opened|first_edit"`
+Expected: FAIL — neither event is emitted yet.
+
+- [ ] **Step 3: Add the `first_edit` wrapper**
+
+In `web/src/app/AppRoot.tsx`, near the other handlers (after `goHome`), add a once-per-mount ref and a wrapped DSL handler. First, ensure `useRef` is imported (it is used elsewhere — confirm `import { … useRef … } from 'react'` at the top). Add:
+
+```tsx
+  const firstEditFired = useRef(false);
+  function handleDslChange(next: string) {
+    if (!firstEditFired.current) {
+      firstEditFired.current = true;
+      track('first_edit', { category: 'fn' });
+    }
+    setDsl(next);
+  }
+```
+
+Then replace the two `onChange={setDsl}` usages on the DSL `CodeEditor` (lines ~1162 and ~1252) with `onChange={handleDslChange}`. Verify there are exactly two:
+
+```bash
+cd web && grep -n "onChange={setDsl}\|onCodeChange={setDsl}" src/app/AppRoot.tsx
+```
+
+Match the prop name actually present (`onChange` at 1162, `onCodeChange` at 1252) and swap each to `handleDslChange`. CSS/HTML editors use different handlers (`handleSetCss`) — do NOT touch those; `first_edit` tracks DSL edits only.
+
+- [ ] **Step 4: Add the `hub_opened` events**
+
+For the breadcrumb source, add the track call inside `goHome` (first line of the function body):
+
+```tsx
+  function goHome() {
+    track('hub_opened', { category: 'navigation', label: 'breadcrumb' });
+    void navigate({ /* …unchanged… */ });
+  }
+```
+
+For the landing-param source, add an effect that fires once when `isHomeMode` is true on mount. Place it near other effects, after `isHomeMode` is defined:
+
+```tsx
+  // Editor-as-landing telemetry: arriving directly at ?view=diagrams (not via the
+  // breadcrumb) — fire once. goHome covers the breadcrumb path with its own source.
+  const hubLandingFired = useRef(false);
+  useEffect(() => {
+    if (isHomeMode && !hubLandingFired.current) {
+      hubLandingFired.current = true;
+      track('hub_opened', { category: 'navigation', label: 'landing-param' });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isHomeMode]);
+```
+
+- [ ] **Step 5: Run to verify they pass**
+
+Run: `cd web && yarn vitest run src/app/AppRoot.test.tsx -t "hub_opened|first_edit"`
+Expected: PASS.
+
+- [ ] **Step 6: Run the full AppRoot suite (guard against double-count regressions)**
+
+Run: `cd web && yarn vitest run src/app/AppRoot.test.tsx`
+Expected: PASS.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add web/src/app/AppRoot.tsx web/src/app/AppRoot.test.tsx
+git commit -m "feat(web/telemetry): emit hub_opened{source} and first_edit (once/mount) for editor-landing pre/post validation"
+```
+
+---
+
+## Task 5: E2E helper re-ground + full green
+
+**Files:**
+- Modify: `web/e2e/helpers/editor.ts:43-63` (`seedAndOpen` — update stale comment; the click-through is already tolerant)
+
+**Context:** `seedAndOpen` goes to `/`, and IF a `home-view` is visible clicks through to the editor, ELSE waits for editor content. After this change bare `/` lands in the editor directly, so the `home-view` branch is dead but harmless. Keep the tolerant branch (it documents intent and survives a revert), fix the comment.
+
+- [ ] **Step 1: Update the `seedAndOpen` doc comment**
+
+In `web/e2e/helpers/editor.ts`, replace the "Hub routing (PR #800/#801)" comment block (lines ~43-46) with:
+
+```ts
+ * Editor-as-landing (2026-06-13): "/" now lands directly in the editor (resume
+ * last diagram, else sample). The home-view click-through below is kept as a
+ * tolerant fallback — it no-ops on the current default but survives a revert and
+ * still works for any flow that opens the hub first (?view=diagrams).
+```
+
+- [ ] **Step 2: List the e2e specs to confirm collection is unaffected**
+
+Run: `cd web && pnpm exec playwright test --list 2>&1 | tail -20`
+Expected: the spec list prints without collection errors (no network needed). If `pnpm exec playwright` is unavailable, use `npx playwright test --list`.
+
+- [ ] **Step 3: Run the full unit suite (whole-app regression gate)**
+
+Run: `cd web && yarn test`
+Expected: PASS — all unit + integration tests green. Pay attention to `AppRoot.editorWiring.test.tsx` (it boots the editor and may have assumed bare `/`); if any test there navigated to bare `/` expecting the hub, re-ground it to `/?view=diagrams` the same way as Task 2 Step 5, then re-run.
+
+- [ ] **Step 4: Typecheck**
+
+Run: `cd web && yarn typecheck`
+Expected: no errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/e2e/helpers/editor.ts
+git commit -m "test(web/e2e): re-ground seedAndOpen comment for editor-as-landing; tolerant hub fallback retained"
+```
+
+---
+
+## Task 6: Live verification (Playwright screenshot, real browser)
+
+**Context:** Per the project's acceptance rule (memory: "Final acceptance = Playwright + screenshots"), capture the real landing behavior against the local dev server.
+
+**Files:** none (verification only).
+
+- [ ] **Step 1: Confirm the dev server is up**
+
+Run: `curl -s -o /dev/null -w "%{http_code}" --max-time 3 http://localhost:3000/`
+Expected: `200`. If not 200, start it: `cd web && yarn dev` (check CLAUDE.md — do not start a second server if one is already running).
+
+- [ ] **Step 2: Capture bare `/` (should be the editor)**
+
+Run:
+```bash
+cd /Users/pengxiao/workspaces/zenuml/web-sequence
+agent-browser set viewport 1440 900 && agent-browser open http://localhost:3000/ && agent-browser wait --load networkidle && agent-browser wait 1500 && agent-browser screenshot tmp/editor-landing/bare-root.png
+```
+Expected: editor chrome (DSL panel + preview), NOT the hub empty-state.
+
+- [ ] **Step 3: Capture `?view=diagrams` (should be the hub)**
+
+Run:
+```bash
+agent-browser open "http://localhost:3000/?view=diagrams" && agent-browser wait --load networkidle && agent-browser wait 1500 && agent-browser screenshot tmp/editor-landing/hub.png && agent-browser close
+```
+Expected: HomeView library grid / empty-state.
+
+- [ ] **Step 4: Read both screenshots and confirm**
+
+Read `tmp/editor-landing/bare-root.png` and `tmp/editor-landing/hub.png`. Confirm bare `/` shows the editor and `?view=diagrams` shows the hub. If either is wrong, STOP and diagnose before claiming done.
+
+- [ ] **Step 5: Final report**
+
+Summarize: behavior change, telemetry events added, test counts (unit pass count), and attach the two screenshot paths. Do NOT commit screenshots (they live under `tmp/`, which is gitignored).
+
+---
+
+## Self-Review notes (author)
+
+- **Spec coverage:** routing flip (Task 2) ✓; `?view=diagrams` hub (Tasks 1–2) ✓; resume-last/sample via existing boot (Task 2, no resolver change — confirmed `useBootItem.ts` already does this) ✓; `landed_in_editor` (Task 3) ✓; `hub_opened` (Task 4) ✓; `first_edit` as a NEW event (Task 4 — spec confirms `web/` has no edit tracking) ✓; test re-grounding (Tasks 2, 5) ✓; e2e helper (Task 5) ✓; live screenshot acceptance (Task 6) ✓.
+- **Precedence rule** (`id`/`share-token`/`embed` beat `view`) is encoded in the `isHomeMode` conjunction (Task 2 Step 3) and asserted indirectly by the unchanged `beforeEach` default `/?id=t-boot` staying in the editor.
+- **Naming consistency:** event names `landed_in_editor` / `hub_opened` / `first_edit`; `bootKind` label values match `BootResult['kind']`; handler `handleDslChange`; refs `firstEditFired` / `hubLandingFired` — used identically across tasks.
+- **Known soft spot:** Task 4 Step 1's `first_edit` test drives CodeMirror via `userEvent.type`, which can be flaky in jsdom — the step includes an explicit fallback instruction to mirror the file's existing DSL-edit mechanism.

From 9d2978573330e61cdba9bdcf9579da970a5044b0 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:29:30 +1000
Subject: [PATCH 04/33] feat(web/router): add ?view search param (hub address
 for editor-landing change)

---
 web/src/app/AppRoot.tsx     |  4 ++++
 web/src/app/router.test.tsx | 18 ++++++++++++++++++
 web/src/app/router.tsx      |  1 +
 3 files changed, 23 insertions(+)
 create mode 100644 web/src/app/router.test.tsx

diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 76f9fb12..5e3c45ef 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -633,6 +633,7 @@ export function AppRoot() {
     setActivePanel('editor');
     void navigate({ to: '/', search: (prev) => ({
       id: it.id,
+      view: prev.view,
       'share-token': prev['share-token'],
       embed: prev.embed,
       code: prev.code,
@@ -656,6 +657,7 @@ export function AppRoot() {
     setActivePanel('editor');
     void navigate({ to: '/', search: (prev) => ({
       id: newId,
+      view: prev.view,
       'share-token': prev['share-token'],
       embed: prev.embed,
       code: prev.code,
@@ -671,6 +673,7 @@ export function AppRoot() {
       search: (prev) => ({
         ...prev,
         id: undefined,
+        view: prev.view,
         'share-token': undefined,
         embed: undefined,
         code: undefined,
@@ -894,6 +897,7 @@ export function AppRoot() {
             const newId = useEditorStore.getState().currentItem?.id;
             if (newId) void navigate({ to: '/', search: (prev) => ({
               id: newId,
+              view: prev.view,
               'share-token': prev['share-token'],
               embed: prev.embed,
               code: prev.code,
diff --git a/web/src/app/router.test.tsx b/web/src/app/router.test.tsx
new file mode 100644
index 00000000..c5efc39a
--- /dev/null
+++ b/web/src/app/router.test.tsx
@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { indexRoute } from './router';
+
+describe('indexRoute.validateSearch', () => {
+  const validate = indexRoute.options.validateSearch as (s: Record<string, unknown>) => Record<string, unknown>;
+
+  it('parses view=diagrams into the search shape', () => {
+    expect(validate({ view: 'diagrams' }).view).toBe('diagrams');
+  });
+
+  it('leaves view undefined when absent (bare /)', () => {
+    expect(validate({}).view).toBeUndefined();
+  });
+
+  it('still parses the existing id param', () => {
+    expect(validate({ id: 'abc' }).id).toBe('abc');
+  });
+});
diff --git a/web/src/app/router.tsx b/web/src/app/router.tsx
index ee7beb07..09f4c399 100644
--- a/web/src/app/router.tsx
+++ b/web/src/app/router.tsx
@@ -7,6 +7,7 @@ const indexRoute = createRoute({
   path: '/',
   validateSearch: (s: Record<string, unknown>) => ({
     id: s.id as string | undefined,
+    view: s.view as string | undefined,
     'share-token': s['share-token'] as string | undefined,
     embed: s.embed !== undefined ? true : undefined,
     code: s.code as string | undefined,

From a21030c6577276a2fe7be4c1f11255516378a76c Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:34:54 +1000
Subject: [PATCH 05/33] =?UTF-8?q?feat(web/hub)!:=20editor=20is=20the=20lan?=
 =?UTF-8?q?ding=20page=20=E2=80=94=20hub=20moves=20to=20=3Fview=3Ddiagrams?=
 =?UTF-8?q?;=20bare=20/=20resumes=20last=20diagram=20or=20seeds=20sample?=
 =?UTF-8?q?=20via=20existing=20boot=20chain?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.test.tsx | 34 ++++++++++++++++++++++++----------
 web/src/app/AppRoot.tsx      | 23 ++++++++++++++---------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index 9e2f00f7..4e5bc63d 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -30,6 +30,7 @@ vi.mock('@tanstack/react-router', async (importOriginal) => {
     const p = new URLSearchParams(window.location.search);
     return {
       id: p.get('id') ?? undefined,
+      view: p.get('view') ?? undefined,
       'share-token': p.get('share-token') ?? undefined,
       embed: p.has('embed') ? true : undefined,
       code: p.get('code') ?? undefined,
@@ -218,6 +219,19 @@ describe('AppRoot', () => {
     expect(screen.getByTestId('preview-region')).toBeInTheDocument();
   });
 
+  it("bare '/' lands in the editor, not the hub", async () => {
+    window.history.replaceState({}, '', '/');
+    render(<AppRoot />);
+    expect(await screen.findByTestId('editor-region')).toBeInTheDocument();
+    expect(screen.queryByTestId('home-view')).toBeNull();
+  });
+
+  it("'?view=diagrams' renders the hub", async () => {
+    window.history.replaceState({}, '', '/?view=diagrams');
+    render(<AppRoot />);
+    expect(await screen.findByTestId('home-view')).toBeInTheDocument();
+  });
+
   it('seeds the DSL editor and mounts the preview iframe', async () => {
     const { container } = render(<AppRoot />);
     expect(await screen.findByTestId('editor-region')).toBeInTheDocument();
@@ -306,9 +320,9 @@ describe('AppRoot', () => {
     // Home view now ('/', no ?id=). The bulk import/export controls were re-homed
     // from the retired panel into HomeView's ALWAYS-present header row (HomeView.tsx
     // — not auth/readOnly-gated, so an empty or signed-out library can still import).
-    // Route to '/' via the file's existing history.replaceState URL pattern instead
-    // of the retired setActivePanel('library').
-    window.history.replaceState({}, '', '/');
+    // Route to '/?view=diagrams' via the file's existing history.replaceState URL
+    // pattern instead of the retired setActivePanel('library').
+    window.history.replaceState({}, '', '/?view=diagrams');
     render(<AppRoot />);
     expect(await screen.findByTestId('home-view')).toBeInTheDocument();
     expect(screen.getByTestId('lib-export-all')).toBeInTheDocument();
@@ -323,7 +337,7 @@ describe('AppRoot', () => {
     // view header — AppRoot's isHomeMode branch renders the SAME "Import failed"
     // ConfirmDialog as the editor branch (AppRoot.tsx), so the notice is asserted
     // on the Home view, where the import control now lives.
-    window.history.replaceState({}, '', '/');
+    window.history.replaceState({}, '', '/?view=diagrams');
     render(<AppRoot />);
     await screen.findByTestId('home-view');
 
@@ -897,8 +911,8 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
 
   it("'exportItems' uses legacy category 'fn'", async () => {
     // Hub (PRs #800/#801): export-all moved from the retired LibraryPanel to the
-    // Home view header row (HomeView.tsx) — route to '/' and click it there.
-    window.history.replaceState({}, '', '/');
+    // Home view header row (HomeView.tsx) — route to '/?view=diagrams' to land there.
+    window.history.replaceState({}, '', '/?view=diagrams');
     render(<AppRoot />);
     const exportBtn = await screen.findByTestId('lib-export-all');
     await act(async () => { await userEvent.click(exportBtn); });
@@ -917,8 +931,8 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
       { id: 'i2' } as never,
     ]);
     // Hub (PRs #800/#801): import moved from the retired LibraryPanel to the Home
-    // view header (HomeView.tsx) — route to '/' and drive the import input there.
-    window.history.replaceState({}, '', '/');
+    // view header (HomeView.tsx) — route to '/?view=diagrams' to land there.
+    window.history.replaceState({}, '', '/?view=diagrams');
     render(<AppRoot />);
     await screen.findByTestId('home-view');
     const input = screen.getByTestId('lib-import-input') as HTMLInputElement;
@@ -952,7 +966,7 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
       { id: 'brand-new' } as never,  // newly added
     ]);
     // Hub (PRs #800/#801): import lives on the Home view now (LibraryPanel retired).
-    window.history.replaceState({}, '', '/');
+    window.history.replaceState({}, '', '/?view=diagrams');
     render(<AppRoot />);
     await screen.findByTestId('home-view');
     await act(async () => {
@@ -988,7 +1002,7 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
     });
     vi.mocked(parseImportJson).mockReturnValueOnce([{ id: 'dup-1' } as never]); // all duplicates
     // Hub (PRs #800/#801): import lives on the Home view now (LibraryPanel retired).
-    window.history.replaceState({}, '', '/');
+    window.history.replaceState({}, '', '/?view=diagrams');
     render(<AppRoot />);
     await screen.findByTestId('home-view');
     await act(async () => {
diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 5e3c45ef..d4cfef3d 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -350,12 +350,15 @@ export function AppRoot() {
   // Read URL params reactively via TanStack Router so navigation (e.g. goHome) triggers a re-render.
   const search = useSearch({ from: indexRoute.id });
   const idParam = search.id ?? null;
+  const viewParam = search.view ?? null;
   const shareToken = search['share-token'] ?? null;
 
-  // Hub (Approach A): no id + no share + not an embed → home view shows the library grid.
-  // When true, useBootItem is skipped (no newItem seeded) and HomeView renders instead of
-  // the editor layout.
-  const isHomeMode = !idParam && !shareToken && !runtime.embedCode && !isEmbed;
+  // Editor-as-landing (2026-06-13): the hub is now OPT-IN via ?view=diagrams.
+  // Bare "/" falls through to useBootItem (resume last-code, else sample) — the
+  // legacy landing behavior. id/share-token/embed still take precedence: a deep
+  // link with both ?view=diagrams and ?id= opens the diagram, not the hub.
+  const isHomeMode =
+    viewParam === 'diagrams' && !idParam && !shareToken && !runtime.embedCode && !isEmbed;
 
   // M05 (REQ-EMB-1): embed-by-value — ?embed&code=<inline DSL>. When present we render
   // the diagram BY VALUE (no Firestore read) by seeding a transient read-only item from
@@ -633,7 +636,7 @@ export function AppRoot() {
     setActivePanel('editor');
     void navigate({ to: '/', search: (prev) => ({
       id: it.id,
-      view: prev.view,
+      view: undefined,
       'share-token': prev['share-token'],
       embed: prev.embed,
       code: prev.code,
@@ -657,7 +660,7 @@ export function AppRoot() {
     setActivePanel('editor');
     void navigate({ to: '/', search: (prev) => ({
       id: newId,
-      view: prev.view,
+      view: undefined,
       'share-token': prev['share-token'],
       embed: prev.embed,
       code: prev.code,
@@ -666,14 +669,16 @@ export function AppRoot() {
     }) });
   }
 
-  // Hub: return to home/library view by clearing the ?id= param.
+  // Editor-as-landing: return to the hub by setting ?view=diagrams (and clearing
+  // the editor params). Previously this cleared everything to bare "/", which now
+  // lands in the editor.
   function goHome() {
     void navigate({
       to: '/',
       search: (prev) => ({
         ...prev,
+        view: 'diagrams',
         id: undefined,
-        view: prev.view,
         'share-token': undefined,
         embed: undefined,
         code: undefined,
@@ -897,7 +902,7 @@ export function AppRoot() {
             const newId = useEditorStore.getState().currentItem?.id;
             if (newId) void navigate({ to: '/', search: (prev) => ({
               id: newId,
-              view: prev.view,
+              view: undefined,
               'share-token': prev['share-token'],
               embed: prev.embed,
               code: prev.code,

From 47ab41f6049a9a38ef8733e3bfa861e1aeaf5026 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:38:10 +1000
Subject: [PATCH 06/33] feat(web/telemetry): emit landed_in_editor{bootKind}
 via useBootItem onResolved seam

---
 web/src/app/AppRoot.test.tsx       | 14 +++++++++++
 web/src/app/AppRoot.tsx            |  5 ++++
 web/src/hooks/useBootItem.test.tsx | 40 ++++++++++++++++++++++++++++++
 web/src/hooks/useBootItem.ts       |  7 ++++++
 4 files changed, 66 insertions(+)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index 4e5bc63d..d1c16e49 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -1021,6 +1021,20 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
     expect(lastEnvelope('itemsImported')).toBeUndefined();
   });
 
+  it("fires 'landed_in_editor' with bootKind on a bare '/' editor landing", async () => {
+    window.history.replaceState({}, '', '/');
+    render(<AppRoot />);
+    await screen.findByTestId('editor-region');
+    const env = await waitFor(() => {
+      const e = lastEnvelope('landed_in_editor');
+      expect(e).toBeDefined();
+      return e!;
+    });
+    // getItem is mocked to reject in this suite → boot resolves kind 'new'.
+    expect(env.label).toBe('new');
+    expect(env.category).toBe('navigation');
+  });
+
   it("'loggedIn' uses legacy category 'fn' + provider label", async () => {
     render(<AppRoot />);
     await screen.findByTestId('header-title');
diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index d4cfef3d..33683c51 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -382,6 +382,11 @@ export function AppRoot() {
     getItem: itemService.getItem,
     getSharedItem,
     getLastCode: () => localStore.get<Item | null>(LS_KEYS.code, null),
+    // Editor-as-landing telemetry: one event per editor boot, tagged with how the
+    // diagram was resolved. Skipped on the hub (boot is skipped when isHomeMode) and
+    // on embed-by-value — so this fires only when the editor is the landing surface.
+    onResolved: (bootKind) =>
+      track('landed_in_editor', { category: 'navigation', label: bootKind }),
   // Hub: skip boot when on home — we don't want newItem() seeding a blank diagram there.
   }, authReady, isHomeMode || embedByValue);
 
diff --git a/web/src/hooks/useBootItem.test.tsx b/web/src/hooks/useBootItem.test.tsx
index 0556f50d..e8d4b511 100644
--- a/web/src/hooks/useBootItem.test.tsx
+++ b/web/src/hooks/useBootItem.test.tsx
@@ -370,3 +370,43 @@ describe('useBootItem hook', () => {
     expect(getItem).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('useBootItem onResolved callback', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  it('calls onResolved with the resolved kind once auth is ready', async () => {
+    const { useBootItem } = await import('./useBootItem');
+    const { useEditorStore } = await import('../state/editorStore');
+
+    useEditorStore.setState({ currentItem: null, dirty: false, unsavedCount: 0, saving: false });
+
+    const onResolved = vi.fn();
+    const deps = makeBaseDeps({ onResolved });
+
+    await act(async () => {
+      renderHook(() => useBootItem(deps, true, false));
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(onResolved).toHaveBeenCalledWith('new');
+  });
+
+  it('does not call onResolved when skipped (embed-by-value)', async () => {
+    const { useBootItem } = await import('./useBootItem');
+    const { useEditorStore } = await import('../state/editorStore');
+
+    useEditorStore.setState({ currentItem: null, dirty: false, unsavedCount: 0, saving: false });
+
+    const onResolved = vi.fn();
+    const deps = makeBaseDeps({ onResolved });
+
+    await act(async () => {
+      renderHook(() => useBootItem(deps, true, true)); // skip=true
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(onResolved).not.toHaveBeenCalled();
+  });
+});
diff --git a/web/src/hooks/useBootItem.ts b/web/src/hooks/useBootItem.ts
index aa0f4a65..7dca402b 100644
--- a/web/src/hooks/useBootItem.ts
+++ b/web/src/hooks/useBootItem.ts
@@ -16,6 +16,12 @@ export interface BootDeps {
   getItem: (id: string) => Promise<Item>;
   getSharedItem: (id: string, token: string) => Promise<Item>;
   getLastCode: () => Promise<Item | null>;
+  /**
+   * Editor-as-landing telemetry seam: fired once with the resolved boot kind after
+   * resolution completes (NOT on skip). AppRoot uses it to emit `landed_in_editor`
+   * with bootKind. Optional so the pure resolver and existing callers are unaffected.
+   */
+  onResolved?: (kind: BootResult['kind']) => void;
 }
 
 export type BootResult =
@@ -150,6 +156,7 @@ export function useBootItem(deps: BootDeps, authReady: boolean, skip = false): U
           newItem();
           break;
       }
+      deps.onResolved?.(result.kind);
     }).catch(() => {
       // Unexpected error — fall back to new
       newItem();

From aad853c31c5fa520aaa538991c5e7234d278f8e8 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:45:22 +1000
Subject: [PATCH 07/33] feat(web/telemetry): emit hub_opened{source} and
 first_edit (once/mount) for editor-landing pre/post validation

---
 web/src/app/AppRoot.test.tsx | 44 ++++++++++++++++++++++++++++++++++++
 web/src/app/AppRoot.tsx      | 28 +++++++++++++++++++++--
 2 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index d1c16e49..2081ec20 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -351,6 +351,38 @@ describe('AppRoot', () => {
     expect(await screen.findByText('Bad JSON at line 1')).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Import failed' })).toBeInTheDocument();
   });
+
+  it("fires 'first_edit' once on the first DSL change", async () => {
+    // Mechanism: drive the real CodeMirror DSL editor (dsl-editor) via
+    // userEvent.click + userEvent.keyboard — the same pattern used by the CSS-gate
+    // tests (lines ~521-529). This exercises AppRoot's handleDslChange wrapper
+    // (onChange prop of the DSL CodeEditor), not a direct store call, so first_edit
+    // genuinely fires from the wrapper. Non-vacuity guard: assert the store's js
+    // changed (proves the keystroke reached onChange). Two letters prove once-only.
+    window.history.replaceState({}, '', '/?id=t-boot');
+    render(<AppRoot />);
+    await screen.findByTestId('editor-region');
+    const before = useEditorStore.getState().currentItem?.js;
+    const cm = screen.getByTestId('dsl-editor').querySelector('.cm-content') as HTMLElement;
+    await act(async () => {
+      await userEvent.click(cm);
+      await userEvent.keyboard('xy');
+    });
+    // Non-vacuity guard: the keystroke reached onChange → store updated.
+    await waitFor(() => expect(useEditorStore.getState().currentItem?.js).not.toBe(before));
+    // first_edit fires exactly once (not twice for two keystrokes).
+    await waitFor(() => {
+      const count = trackMock.mock.calls.filter(
+        ([payload]) => (payload as { event?: string }).event === 'first_edit',
+      ).length;
+      expect(count).toBe(1);
+    });
+    // Verify category matches the spec.
+    const env = trackMock.mock.calls
+      .map((c) => c[0] as Record<string, unknown>)
+      .find((p) => p.event === 'first_edit');
+    expect(env?.category).toBe('fn');
+  });
 });
 
 // ───────────────────────────────────────────────────────────────────────────
@@ -1075,6 +1107,18 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
     // defaults to true, so toggling it sends false.
     expect(env!.label).toBe('false');
   });
+
+  it("fires 'hub_opened' with source 'landing-param' when arriving at ?view=diagrams", async () => {
+    window.history.replaceState({}, '', '/?view=diagrams');
+    render(<AppRoot />);
+    await screen.findByTestId('home-view');
+    const env = await waitFor(() => {
+      const e = lastEnvelope('hub_opened');
+      expect(e).toBeDefined();
+      return e!;
+    });
+    expect(env.label).toBe('landing-param');
+  });
 });
 
 // ───────────────────────────────────────────────────────────────────────────
diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 33683c51..15c1b9f8 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -360,6 +360,17 @@ export function AppRoot() {
   const isHomeMode =
     viewParam === 'diagrams' && !idParam && !shareToken && !runtime.embedCode && !isEmbed;
 
+  // Editor-as-landing telemetry: arriving directly at ?view=diagrams (not via the
+  // breadcrumb) — fire once. goHome covers the breadcrumb path with its own source.
+  const hubLandingFired = useRef(false);
+  useEffect(() => {
+    if (isHomeMode && !hubLandingFired.current) {
+      hubLandingFired.current = true;
+      track('hub_opened', { category: 'navigation', label: 'landing-param' });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isHomeMode]);
+
   // M05 (REQ-EMB-1): embed-by-value — ?embed&code=<inline DSL>. When present we render
   // the diagram BY VALUE (no Firestore read) by seeding a transient read-only item from
   // the inline code; the normal boot resolution is skipped (skipBoot) so getItem/
@@ -678,6 +689,7 @@ export function AppRoot() {
   // the editor params). Previously this cleared everything to bare "/", which now
   // lands in the editor.
   function goHome() {
+    track('hub_opened', { category: 'navigation', label: 'breadcrumb' });
     void navigate({
       to: '/',
       search: (prev) => ({
@@ -693,6 +705,18 @@ export function AppRoot() {
     });
   }
 
+  // first_edit: fires once per mount on the first user-initiated DSL change.
+  // Wraps setDsl so the event emits from AppRoot's boundary (not from the store
+  // action). CSS/HTML editors use separate handlers and are NOT tracked here.
+  const firstEditFired = useRef(false);
+  function handleDslChange(next: string) {
+    if (!firstEditFired.current) {
+      firstEditFired.current = true;
+      track('first_edit', { category: 'fn' });
+    }
+    setDsl(next);
+  }
+
   async function handleDeleteItem(id: string) {
     await itemService.removeItem(id);
     const uid = useAuthStore.getState().user?.uid;
@@ -1173,7 +1197,7 @@ export function AppRoot() {
                     DSL
                   </span>
                 </div>
-                <div className="flex-1 min-h-0"><CodeEditor key={`dsl-${item.currentPageId}`} value={item.js} language="dsl" onChange={setDsl} testId="dsl-editor" themeId={settings.editorTheme} fontSize={settings.fontSize} fontFamily={editorFontFamily} keymap={settings.keymap} /></div>
+                <div className="flex-1 min-h-0"><CodeEditor key={`dsl-${item.currentPageId}`} value={item.js} language="dsl" onChange={handleDslChange} testId="dsl-editor" themeId={settings.editorTheme} fontSize={settings.fontSize} fontFamily={editorFontFamily} keymap={settings.keymap} /></div>
               </div>
               {/* CSS pane → collapsible strip. Re-keyed per page so the collapsed
                   default re-derives from the new page's CSS emptiness (matches the
@@ -1263,7 +1287,7 @@ export function AppRoot() {
                   // (CSS transform; @zenuml/core untouched).
                   fit={fullscreen}
                   stickyOffset={stickyOffset}
-                  onCodeChange={setDsl}
+                  onCodeChange={handleDslChange}
                   onConsole={(e) => setConsoleEntries((prev) => [...prev, e])}
                   onError={(m) => setConsoleEntries((p) => [...p, { level: 'error', args: [m] }])}
                 />

From a6ab3d646987c3a899b1dd4cf56425ec745c655b Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:49:24 +1000
Subject: [PATCH 08/33] =?UTF-8?q?fix(web/telemetry):=20breadcrumb=E2=86=92?=
 =?UTF-8?q?hub=20emitted=20both=20hub=5Fopened{breadcrumb}=20AND=20{landin?=
 =?UTF-8?q?g-param}=20=E2=80=94=20goHome=20now=20marks=20the=20landing=20r?=
 =?UTF-8?q?ef=20consumed=20so=20source=20stays=20a=20clean=20signal;=20reg?=
 =?UTF-8?q?ression=20test=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.test.tsx | 23 +++++++++++++++++++++++
 web/src/app/AppRoot.tsx      |  4 ++++
 2 files changed, 27 insertions(+)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index 2081ec20..eba5700a 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -1119,6 +1119,29 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
     });
     expect(env.label).toBe('landing-param');
   });
+
+  // DISCRIMINATING (controller review): clicking the breadcrumb to reach the hub
+  // must emit EXACTLY ONE hub_opened, sourced 'breadcrumb' — NOT also 'landing-param'.
+  // goHome navigates to ?view=diagrams, which flips isHomeMode true and re-runs the
+  // landing-param effect on the still-mounted AppRoot. Without goHome marking the
+  // landing ref consumed, BOTH events fire and the source dimension is corrupted.
+  it("breadcrumb→hub fires exactly one hub_opened sourced 'breadcrumb' (no landing-param)", async () => {
+    window.history.replaceState({}, '', '/'); // start in the editor (bare /)
+    const { rerender } = render(<AppRoot />);
+    await screen.findByTestId('editor-region');
+    // Click the breadcrumb: goHome fires hub_opened{breadcrumb} and navigates to
+    // ?view=diagrams (the mock applies replaceState but does NOT itself re-render).
+    await act(async () => { await userEvent.click(screen.getByTestId('header-go-home')); });
+    // Simulate the router's post-navigate re-render on the still-mounted AppRoot —
+    // this is what flips isHomeMode true and re-runs the landing-param effect in prod.
+    await act(async () => { rerender(<AppRoot />); });
+    await screen.findByTestId('home-view');
+    const hubEvents = trackMock.mock.calls
+      .map((c) => c[0] as Record<string, unknown>)
+      .filter((p) => p.event === 'hub_opened');
+    expect(hubEvents).toHaveLength(1);
+    expect(hubEvents[0].label).toBe('breadcrumb');
+  });
 });
 
 // ───────────────────────────────────────────────────────────────────────────
diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 15c1b9f8..8363d26e 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -690,6 +690,10 @@ export function AppRoot() {
   // lands in the editor.
   function goHome() {
     track('hub_opened', { category: 'navigation', label: 'breadcrumb' });
+    // Mark the landing-param event consumed: navigating here flips isHomeMode true and
+    // re-runs the landing effect on the still-mounted AppRoot. Without this, a breadcrumb
+    // click would ALSO emit hub_opened{landing-param}, corrupting the source dimension.
+    hubLandingFired.current = true;
     void navigate({
       to: '/',
       search: (prev) => ({

From 521ba50ac88a18599b3d2a114cb209665ff6d40d Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 12:51:54 +1000
Subject: [PATCH 09/33] =?UTF-8?q?test(web/e2e):=20re-ground=20seedAndOpen?=
 =?UTF-8?q?=20for=20editor-as-landing=20=E2=80=94=20/=20lands=20in=20edito?=
 =?UTF-8?q?r=20now;=20keep=20tolerant=20hub=20fallback=20but=20trim=20its?=
 =?UTF-8?q?=20probe=20to=201s=20(rare=20path)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/e2e/helpers/editor.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/e2e/helpers/editor.ts b/web/e2e/helpers/editor.ts
index 7699cf9a..3d1dda29 100644
--- a/web/e2e/helpers/editor.ts
+++ b/web/e2e/helpers/editor.ts
@@ -40,10 +40,13 @@ export function editorRoot(page: Page): Locator {
  * interactive (content focusable). Uses a relative URL so the config's baseURL
  * drives where we point.
  *
- * Hub routing (PR #800/#801): "/" lands on the HomeView library when no diagram
- * id is in the URL — the editor is one "New" click away. Mirrors the same
- * click-through the root production-build spec uses; tolerant of flows that
- * land directly in the editor (?id= / embed) where home-view never appears.
+ * Editor-as-landing (2026-06-13): "/" now lands directly in the editor (resume
+ * last diagram, else sample). The home-view click-through below is kept as a
+ * tolerant fallback — it no-ops on the current default but survives a revert and
+ * still works for any flow that opens the hub first (?view=diagrams). The probe
+ * timeout is short because home-view is now the rare path: on the editor-landing
+ * default it will never appear, so we don't want to tax every editor test by
+ * waiting long for it.
  */
 export async function seedAndOpen(page: Page): Promise<void> {
   await page.addInitScript((flags: Record<string, string>) => {
@@ -51,7 +54,7 @@ export async function seedAndOpen(page: Page): Promise<void> {
   }, SEED_FLAGS);
   await page.goto('/', { waitUntil: 'networkidle' });
   const homeView = page.getByTestId('home-view');
-  if (await homeView.isVisible({ timeout: 3000 }).catch(() => false)) {
+  if (await homeView.isVisible({ timeout: 1000 }).catch(() => false)) {
     const emptyCta = page.getByTestId('home-empty-new');
     if (await emptyCta.isVisible({ timeout: 1000 }).catch(() => false)) {
       await emptyCta.click();

From 36f6714108ef25eabc1fbefca838234d2926057b Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 13:05:37 +1000
Subject: [PATCH 10/33] =?UTF-8?q?fix(web/telemetry):=20re-arm=20hub=5Fopen?=
 =?UTF-8?q?ed{landing-param}=20on=20leaving=20the=20hub=20=E2=80=94=20a=20?=
 =?UTF-8?q?permanent=20ref=20under-counted=20return=20visits=20(browser=20?=
 =?UTF-8?q?Back),=20an=20asymmetric=20bias=20against=20the=20hub=20in=20th?=
 =?UTF-8?q?e=20pre/post=20metric;=20mutation-tested=20regression=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.test.tsx | 25 +++++++++++++++++++++++++
 web/src/app/AppRoot.tsx      | 18 +++++++++++++-----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index eba5700a..addf47c0 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -1142,6 +1142,31 @@ describe('AppRoot — analytics envelope parity (REQ-ANL-1, adversarial review)'
     expect(hubEvents).toHaveLength(1);
     expect(hubEvents[0].label).toBe('breadcrumb');
   });
+
+  // DISCRIMINATING (controller review of final adversarial pass): leaving the hub and
+  // returning (e.g. hub → open a diagram → browser Back to ?view=diagrams) must emit a
+  // FRESH hub_opened{landing-param}. A permanently-consumed landing ref under-counts
+  // hub demand — an ASYMMETRIC bias that makes editor-landing look better than it is,
+  // skewing the pre/post decision. Leaving the hub must re-arm the landing event.
+  it('returning to the hub after leaving re-fires hub_opened{landing-param}', async () => {
+    window.history.replaceState({}, '', '/?view=diagrams'); // land on the hub
+    const { rerender } = render(<AppRoot />);
+    await screen.findByTestId('home-view');
+    // Leave the hub: open a diagram (?id=) — isHomeMode flips false. The real hub→editor
+    // path is handleOpenItem (a direct loadItem), so seed the item the same way; boot is
+    // skipped on the hub and won't re-resolve on a same-mount re-render.
+    window.history.replaceState({}, '', '/?id=t-boot');
+    await act(async () => { useEditorStore.getState().newItem(); rerender(<AppRoot />); });
+    await screen.findByTestId('editor-region');
+    // Return to the hub (browser Back / re-navigation to ?view=diagrams).
+    window.history.replaceState({}, '', '/?view=diagrams');
+    await act(async () => { rerender(<AppRoot />); });
+    await screen.findByTestId('home-view');
+    const landingEvents = trackMock.mock.calls
+      .map((c) => c[0] as Record<string, unknown>)
+      .filter((p) => p.event === 'hub_opened' && p.label === 'landing-param');
+    expect(landingEvents).toHaveLength(2); // once per hub arrival, not collapsed to one
+  });
 });
 
 // ───────────────────────────────────────────────────────────────────────────
diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 8363d26e..72b6f192 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -360,13 +360,21 @@ export function AppRoot() {
   const isHomeMode =
     viewParam === 'diagrams' && !idParam && !shareToken && !runtime.embedCode && !isEmbed;
 
-  // Editor-as-landing telemetry: arriving directly at ?view=diagrams (not via the
-  // breadcrumb) — fire once. goHome covers the breadcrumb path with its own source.
+  // Editor-as-landing telemetry: fire hub_opened{landing-param} once per hub ARRIVAL.
+  // The ref guards against re-firing on incidental re-renders while already on the hub,
+  // and goHome sets it true up-front so a breadcrumb-initiated arrival is attributed to
+  // 'breadcrumb' only (not also 'landing-param'). Crucially we RE-ARM it on leaving the
+  // hub, so a later return (e.g. browser Back to ?view=diagrams) counts as a fresh
+  // arrival — otherwise hub demand is under-counted, an asymmetric bias against the hub.
   const hubLandingFired = useRef(false);
   useEffect(() => {
-    if (isHomeMode && !hubLandingFired.current) {
-      hubLandingFired.current = true;
-      track('hub_opened', { category: 'navigation', label: 'landing-param' });
+    if (isHomeMode) {
+      if (!hubLandingFired.current) {
+        hubLandingFired.current = true;
+        track('hub_opened', { category: 'navigation', label: 'landing-param' });
+      }
+    } else {
+      hubLandingFired.current = false; // left the hub → re-arm for the next arrival
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isHomeMode]);

From 226795343edffd341299197a8fd5365cf06f0b12 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 19:51:46 +1000
Subject: [PATCH 11/33] =?UTF-8?q?fix(web/hub):=20template=20quick-picks=20?=
 =?UTF-8?q?create=20directly=20instead=20of=20reopening=20the=20picker=20?=
 =?UTF-8?q?=E2=80=94=20hub=20'Start=20something=20new'=20cards=20called=20?=
 =?UTF-8?q?onBrowseTemplates=20(forcing=20a=202nd=20template=20selection);?=
 =?UTF-8?q?=20now=20wire=20real=20templates=20to=20handleCreateAndOpen;=20?=
 =?UTF-8?q?modal=20onSelect=20DRY'd=20to=20the=20same=20handler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.tsx                   | 33 +++++++-----
 web/src/components/home/HomeView.test.tsx | 61 +++++++++++++++++++++++
 web/src/components/home/HomeView.tsx      | 33 ++++++++----
 3 files changed, 104 insertions(+), 23 deletions(-)
 create mode 100644 web/src/components/home/HomeView.test.tsx

diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 72b6f192..b0316e3d 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -653,6 +653,24 @@ export function AppRoot() {
     setActivePanel('editor');
   }
 
+  // Create a diagram from a template payload AND open it in the editor (navigate to
+  // ?id=). Shared by the CreateNewModal's onSelect and the hub's template quick-picks
+  // so both paths create-and-open identically (the quick-picks must not reopen the
+  // picker — a template click should land the user straight in the editor).
+  function handleCreateAndOpen(partial: Partial<Item>) {
+    handleCreateNew(partial);
+    const newId = useEditorStore.getState().currentItem?.id;
+    if (newId) void navigate({ to: '/', search: (prev) => ({
+      id: newId,
+      view: undefined,
+      'share-token': prev['share-token'],
+      embed: prev.embed,
+      code: prev.code,
+      title: prev.title,
+      stickyOffset: prev.stickyOffset,
+    }) });
+  }
+
   // M02 Task 16: library panel handlers (presentational — ItemListStub receives these).
   // Hub: also navigates to /?id= so the URL reflects which diagram is open.
   function handleOpenItem(it: Item) {
@@ -938,19 +956,7 @@ export function AppRoot() {
         <CreateNewModal
           open={activeModal === 'createNew'}
           onOpenChange={(o) => { if (!o) closeModal(); }}
-          onSelect={(partial) => {
-            handleCreateNew(partial);
-            const newId = useEditorStore.getState().currentItem?.id;
-            if (newId) void navigate({ to: '/', search: (prev) => ({
-              id: newId,
-              view: undefined,
-              'share-token': prev['share-token'],
-              embed: prev.embed,
-              code: prev.code,
-              title: prev.title,
-              stickyOffset: prev.stickyOffset,
-            }) });
-          }}
+          onSelect={handleCreateAndOpen}
         />
         <HelpModal
           open={activeModal === 'help'}
@@ -982,6 +988,7 @@ export function AppRoot() {
           onOpen={handleOpenItem}
           onNewDiagram={handleNewDiagramFromHome}
           onBrowseTemplates={() => openModal('createNew')}
+          onCreateFromTemplate={handleCreateAndOpen}
           onOpenSignIn={() => setLoginModalOpen(true)}
           onLogout={() => { track('loggedOut', { category: 'fn' }); logout(); }}
           onCreateFolder={(name) => void createFolder(name)}
diff --git a/web/src/components/home/HomeView.test.tsx b/web/src/components/home/HomeView.test.tsx
new file mode 100644
index 00000000..c0afd29a
--- /dev/null
+++ b/web/src/components/home/HomeView.test.tsx
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HomeView, type HomeViewProps } from './HomeView';
+import { useLibraryStore } from '../../state/libraryStore';
+import { TEMPLATES, blankTemplate } from '../../domain/templates';
+import type { Item } from '../../domain/types';
+
+// Minimal library item so the "Start something new" row renders (it is hidden when
+// the library is empty). Shape mirrors what the grid needs (id/title/updatedOn/pages).
+const SEED = [{ id: 'd1', title: 'Existing', updatedOn: 1, pages: [] } as unknown as Item];
+
+function makeProps(over: Partial<HomeViewProps> = {}): HomeViewProps {
+  return {
+    items: SEED,
+    folders: [],
+    user: null,
+    onOpen: vi.fn(),
+    onNewDiagram: vi.fn(),
+    onBrowseTemplates: vi.fn(),
+    onCreateFromTemplate: vi.fn(),
+    onOpenSignIn: vi.fn(),
+    onLogout: vi.fn(),
+    onCreateFolder: vi.fn(),
+    onRenameFolder: vi.fn(),
+    onDeleteFolder: vi.fn(),
+    ...over,
+  };
+}
+
+describe('HomeView template quick-picks', () => {
+  beforeEach(() => {
+    // Default store state shows the start block (empty query, no active folder).
+    useLibraryStore.setState({ query: '', activeFolderId: null, sort: 'updated' });
+  });
+
+  it('clicking a template quick-pick creates it directly — does NOT reopen the picker', async () => {
+    const onCreateFromTemplate = vi.fn();
+    const onBrowseTemplates = vi.fn();
+    render(<HomeView {...makeProps({ onCreateFromTemplate, onBrowseTemplates })} />);
+
+    const basic = TEMPLATES.find((t) => t.id === 'basic')!;
+    await userEvent.click(screen.getByTestId('home-template-basic'));
+
+    // The defect: cards used to call onBrowseTemplates (reopening the CreateNewModal
+    // picker), forcing a second template selection. They must now create directly.
+    expect(onCreateFromTemplate).toHaveBeenCalledTimes(1);
+    expect(onCreateFromTemplate).toHaveBeenCalledWith(basic.item);
+    expect(onBrowseTemplates).not.toHaveBeenCalled();
+  });
+
+  it('the Blank quick-pick creates a blank diagram directly', async () => {
+    const onCreateFromTemplate = vi.fn();
+    render(<HomeView {...makeProps({ onCreateFromTemplate })} />);
+
+    await userEvent.click(screen.getByTestId('home-template-blank'));
+
+    expect(onCreateFromTemplate).toHaveBeenCalledTimes(1);
+    expect(onCreateFromTemplate).toHaveBeenCalledWith(blankTemplate());
+  });
+});
diff --git a/web/src/components/home/HomeView.tsx b/web/src/components/home/HomeView.tsx
index a274792c..2421dacf 100644
--- a/web/src/components/home/HomeView.tsx
+++ b/web/src/components/home/HomeView.tsx
@@ -16,6 +16,7 @@ import {
   MenuItem,
 } from '../../ui';
 import { useLibraryStore } from '../../state/libraryStore';
+import { TEMPLATES, blankTemplate } from '../../domain/templates';
 import { FolderList } from '../library/FolderList';
 import { ImportExportBar } from '../library/ImportExportBar';
 import { DiagramCard } from './DiagramCard';
@@ -40,6 +41,11 @@ export interface HomeViewProps {
   onOpen(item: Item): void;
   onNewDiagram(): void;
   onBrowseTemplates(): void;
+  // Create a diagram directly from a template's content and open it in the editor.
+  // The hub's "Start something new" quick-pick cards use this so a single click
+  // creates the chosen template — they must NOT reopen the CreateNewModal picker
+  // (which would force the user to select a template a second time).
+  onCreateFromTemplate(item: Partial<Item>): void;
   onOpenSignIn(): void;
   onLogout(): void;
   onCreateFolder(name: string): void;
@@ -63,6 +69,7 @@ export function HomeView({
   onOpen,
   onNewDiagram,
   onBrowseTemplates,
+  onCreateFromTemplate,
   onOpenSignIn,
   onLogout,
   onCreateFolder,
@@ -271,18 +278,19 @@ export function HomeView({
                 </button>
               </div>
               <div className="flex gap-2 overflow-x-auto pb-1">
-                {TEMPLATE_STUBS.map((t) => (
+                {QUICK_TEMPLATES.map((t) => (
                   <button
                     key={t.id}
                     type="button"
-                    onClick={onBrowseTemplates}
+                    data-testid={`home-template-${t.id}`}
+                    onClick={() => onCreateFromTemplate(t.item)}
                     className={cn(
                       'flex flex-col items-start gap-1.5 rounded-lg border border-ink-line/40 p-3 shrink-0 w-36',
                       'bg-ink-900 hover:border-accent/60 hover:bg-ink-800 transition-colors duration-150 ring-draft text-left',
                     )}
                   >
                     <div className="h-16 w-full rounded bg-ink-800 flex items-center justify-center text-ondark-faint text-[9px] font-mono">
-                      {t.icon}
+                      {t.glyph}
                     </div>
                     <span className="font-sans text-[11px] font-medium text-ondark-strong">{t.label}</span>
                   </button>
@@ -430,11 +438,16 @@ function BrandIcon() {
   );
 }
 
-// Stub template cards — clicking any opens the full template picker (CreateNewModal).
-const TEMPLATE_STUBS = [
-  { id: 'blank', label: 'Blank', icon: '—' },
-  { id: 'api', label: 'REST API', icon: 'API' },
-  { id: 'auth', label: 'Auth flow', icon: '🔑' },
-  { id: 'microservices', label: 'Microservices', icon: '⬡' },
-  { id: 'ecommerce', label: 'Checkout', icon: '🛒' },
+// Quick-pick cards for the "Start something new" row. These are the REAL templates
+// (the same inventory the CreateNewModal offers) so a single click creates the chosen
+// diagram and opens it — no second selection. "Browse templates" still opens the full
+// picker for users who want to preview the styled looks before committing.
+const QUICK_TEMPLATES: { id: string; label: string; glyph: string; item: Partial<Item> }[] = [
+  { id: 'blank', label: 'Blank', glyph: '—', item: blankTemplate() },
+  ...TEMPLATES.map((t) => ({
+    id: t.id,
+    label: t.title,
+    glyph: t.id === 'basic' ? 'A→B' : 'Aa',
+    item: t.item,
+  })),
 ];

From 1b02156d61469aea7244e581d00f742ec79ef5bb Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 19:59:08 +1000
Subject: [PATCH 12/33] =?UTF-8?q?fix(web/brand):=20use=20the=20official=20?=
 =?UTF-8?q?ZenUML=20logo=20in=20hub=20+=20editor=20headers=20=E2=80=94=20r?=
 =?UTF-8?q?eplace=20the=20placeholder=20two-participant=20glyph=20with=20t?=
 =?UTF-8?q?he=20#outline-zenuml=20artwork=20(shared=20BrandLogo=20componen?=
 =?UTF-8?q?t)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/header/AppMenu.tsx | 22 ++------------
 web/src/components/home/HomeView.tsx  | 23 +++-----------
 web/src/ui/BrandLogo.tsx              | 44 +++++++++++++++++++++++++++
 web/src/ui/index.ts                   |  1 +
 4 files changed, 51 insertions(+), 39 deletions(-)
 create mode 100644 web/src/ui/BrandLogo.tsx

diff --git a/web/src/components/header/AppMenu.tsx b/web/src/components/header/AppMenu.tsx
index 49c5fa19..b6aa8e80 100644
--- a/web/src/components/header/AppMenu.tsx
+++ b/web/src/components/header/AppMenu.tsx
@@ -5,6 +5,7 @@ import {
   MenuContent,
   MenuItem,
   MenuSeparator,
+  BrandLogo,
   cn,
 } from '../../ui';
 
@@ -26,16 +27,6 @@ export interface AppMenuProps {
 // The "ZenUML" mark from the design's `.brand` tile — a small cobalt-gradient
 // square holding the column/arrow glyph. Used as the visual of the app-menu
 // trigger so the logo itself opens the document/app menu (Figma/Docs pattern).
-function BrandGlyph() {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-      <rect x="3" y="4" width="7" height="5" rx="1" />
-      <rect x="14" y="4" width="7" height="5" rx="1" />
-      <path d="M6.5 9v11M17.5 9v6" />
-      <path d="M6.5 13h9M15 11l2 2-2 2" />
-    </svg>
-  );
-}
 
 function Chevron({ className }: { className?: string }) {
   return (
@@ -90,16 +81,7 @@ export function AppMenu({
             'hover:bg-white/5 ring-draft',
           )}
         >
-          <span
-            className={cn(
-              'grid place-items-center h-[30px] w-[30px] rounded-lg text-white shadow-inset',
-              'bg-gradient-to-br from-accent to-accent-press',
-            )}
-          >
-            <span className="h-[17px] w-[17px]">
-              <BrandGlyph />
-            </span>
-          </span>
+          <BrandLogo className="h-[30px] w-[30px] shrink-0" />
           <Chevron className="text-ondark-muted" />
         </button>
       </MenuTrigger>
diff --git a/web/src/components/home/HomeView.tsx b/web/src/components/home/HomeView.tsx
index 2421dacf..5333bb76 100644
--- a/web/src/components/home/HomeView.tsx
+++ b/web/src/components/home/HomeView.tsx
@@ -4,6 +4,7 @@ import {
   SearchInput,
   Button,
   buttonClassName,
+  BrandLogo,
   Select,
   SelectTrigger,
   SelectContent,
@@ -416,26 +417,10 @@ export function HomeView({
   );
 }
 
-// ZenUML brand icon — cobalt rounded square with the two-participant sequence glyph.
+// ZenUML brand mark — the official logo (self-contained blue rounded square with the
+// Zen/UML wordmark). Sized to the prior 30px footprint so the header layout is unchanged.
 function BrandIcon() {
-  return (
-    <span
-      className={cn(
-        'grid place-items-center h-[30px] w-[30px] rounded-lg text-white shrink-0',
-        'bg-gradient-to-br from-accent to-accent-press shadow-inset',
-      )}
-      aria-hidden="true"
-    >
-      <span className="h-[17px] w-[17px]">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-          <rect x="3" y="4" width="7" height="5" rx="1" />
-          <rect x="14" y="4" width="7" height="5" rx="1" />
-          <path d="M6.5 9v11M17.5 9v6" />
-          <path d="M6.5 13h9M15 11l2 2-2 2" />
-        </svg>
-      </span>
-    </span>
-  );
+  return <BrandLogo className="h-[30px] w-[30px] shrink-0" />;
 }
 
 // Quick-pick cards for the "Start something new" row. These are the REAL templates
diff --git a/web/src/ui/BrandLogo.tsx b/web/src/ui/BrandLogo.tsx
new file mode 100644
index 00000000..06f3bbc0
--- /dev/null
+++ b/web/src/ui/BrandLogo.tsx
@@ -0,0 +1,44 @@
+// The official ZenUML logo — ported verbatim from the legacy app's inline SVG sprite
+// (`src/components/Icons.jsx`, `<symbol id="outline-zenuml">`). A #2E94D4 rounded square
+// with "Zen" (white) above "UML" (knocked out of a white bar). The artwork is fully
+// self-contained at a 300×300 viewBox — it carries its own rounded background, so render
+// it directly at the target size; do NOT wrap it in another colored square.
+interface BrandLogoProps {
+  className?: string;
+}
+
+export function BrandLogo({ className }: BrandLogoProps) {
+  return (
+    <svg viewBox="0 0 300 300" className={className} role="img" aria-label="ZenUML">
+      <rect width="100%" height="100%" rx="40" fill="#2E94D4" />
+      <path
+        d="M56.2239 129.063C69.2711 109.291 85.0918 89.9627 99.5824 71.2253C100.488 70.0234 101.054 69.1368 101.28 68.5654C102.186 66.1617 101.394 64.9598 98.9031 64.9598L59.5635 65.0189C59.0781 65.0191 58.5976 64.9175 58.1505 64.7201C57.7035 64.5226 57.299 64.2333 56.961 63.8694C56.6231 63.5055 56.3587 63.0744 56.1834 62.6017C56.0082 62.129 55.9257 61.6244 55.9409 61.1177L55.9692 59.9356C56.0635 56.6452 57.6862 55 60.8371 55H115.347C116.214 54.9994 117.069 55.2663 117.809 55.7684C120.299 57.522 120.507 59.8568 118.431 62.7728C104.054 83.047 89.2145 102.967 73.9126 122.531C73.5541 123.004 73.2899 123.458 73.1201 123.891C73.0003 124.209 72.9566 124.553 72.993 124.892C73.0293 125.232 73.1445 125.557 73.3286 125.84C73.5127 126.122 73.7601 126.354 74.0493 126.514C74.3385 126.674 74.6608 126.757 74.988 126.758L117.639 126.728C118.188 126.728 118.731 126.849 119.231 127.084C119.731 127.319 120.177 127.663 120.539 128.091C120.901 128.519 121.17 129.023 121.329 129.567C121.488 130.112 121.532 130.686 121.46 131.25L121.233 133.023C121.09 134.11 120.573 135.107 119.777 135.829C118.981 136.551 117.961 136.951 116.903 136.954L60.1579 136.924C59.2853 136.927 58.4295 136.679 57.6831 136.207C56.9367 135.736 56.328 135.059 55.923 134.249C55.5179 133.44 55.3318 132.529 55.3848 131.614C55.4379 130.7 55.728 129.818 56.2239 129.063Z"
+        fill="white"
+      />
+      <path
+        d="M136.007 113.872C135.429 113.994 134.895 114.281 134.463 114.7C134.031 115.12 133.719 115.656 133.561 116.249C133.403 116.843 133.405 117.47 133.567 118.063C133.729 118.655 134.045 119.189 134.479 119.605C146.564 131.25 155.819 128.708 169.149 122.708C169.998 122.334 170.838 122.354 171.668 122.768C175.064 124.541 175.036 128.885 172.205 131.368C162.611 139.879 145.092 138.934 135.102 133.318C120.3 124.984 116.139 103.794 124.517 89.1053C137.734 65.9938 174.073 70.0428 179.055 97.5873C180.13 103.557 176.847 105.626 171.922 106.572C159.488 108.976 147.517 111.409 136.007 113.872ZM132.3 106.276L168.073 98.9468C168.166 98.9255 168.248 98.8674 168.3 98.7847C168.353 98.7021 168.373 98.6013 168.356 98.5035L168.328 98.3853C167.89 96.0501 166.999 93.8315 165.703 91.8562C164.408 89.8809 162.735 88.1876 160.78 86.873C158.825 85.5584 156.625 84.6483 154.307 84.1946C151.99 83.7409 149.599 83.7525 147.271 84.2288L146.224 84.4652C141.527 85.4284 137.375 88.2233 134.679 92.2356C131.983 96.2479 130.964 101.149 131.847 105.863V105.981C131.857 106.032 131.877 106.08 131.905 106.123C131.934 106.166 131.97 106.203 132.013 106.23C132.055 106.258 132.102 106.276 132.152 106.284C132.201 106.292 132.251 106.289 132.3 106.276Z"
+        fill="white"
+      />
+      <path
+        d="M200.507 81.1259C203.479 79.1162 205.97 76.6928 209.224 75.5993C220.743 71.8163 235.177 74.358 241.149 85.9433C246.639 96.5237 244.347 119.812 243.894 133.112C243.857 134.175 243.43 135.183 242.701 135.921C241.973 136.66 241 137.073 239.989 137.072H238.715C235.036 137.072 233.224 135.151 233.281 131.309C233.451 121.054 235.715 96.4941 229.205 89.2238C222.045 81.2146 206.451 83.6676 201.215 93.2136C196.8 101.252 198.724 122.177 198.526 132.639C198.504 133.81 198.039 134.923 197.233 135.737C196.427 136.551 195.345 136.999 194.224 136.983H193.092C189.413 136.924 187.583 134.974 187.602 131.132L187.856 78.7025C187.855 77.8656 188.126 77.0532 188.625 76.3981C189.124 75.7431 189.821 75.2843 190.602 75.0968C194.866 74.0723 197.432 75.7569 198.3 80.1506C198.583 81.6086 199.319 81.9337 200.507 81.1259Z"
+        fill="white"
+      />
+      <path
+        d="M55.2339 188.881L55.2622 161.691C55.2622 160.029 55.8973 158.435 57.0278 157.26C58.1583 156.085 59.6917 155.425 61.2905 155.425L239.932 155.514C241.068 155.522 242.155 155.995 242.956 156.831C243.756 157.668 244.206 158.798 244.206 159.977L244.234 188.822C244.235 189.099 244.294 189.373 244.405 189.626C244.516 189.878 244.677 190.102 244.878 190.284C245.079 190.466 245.315 190.601 245.57 190.68C245.825 190.759 246.093 190.781 246.357 190.743C250.394 190.171 254.46 190.358 258.555 191.304C260.078 191.653 261.42 192.59 262.312 193.926C263.204 195.263 263.58 196.902 263.366 198.515C262.206 207.5 252.017 206.081 245.96 205.579C245.739 205.563 245.517 205.594 245.308 205.672C245.099 205.749 244.908 205.87 244.746 206.028C244.584 206.187 244.455 206.378 244.367 206.59C244.278 206.803 244.233 207.032 244.234 207.263L244.177 238.591C244.17 240.067 243.603 241.48 242.601 242.522C241.598 243.563 240.242 244.147 238.828 244.147H60.8942C60.1546 244.147 59.4223 243.995 58.7389 243.699C58.0556 243.404 57.4348 242.971 56.9118 242.425C56.3888 241.878 55.9739 241.23 55.6909 240.517C55.4079 239.803 55.2622 239.038 55.2622 238.266V207.086C55.2622 206.655 55.0952 206.242 54.798 205.937C54.5007 205.632 54.0976 205.461 53.6773 205.461L43.432 205.49C38.998 205.51 36.8565 203.205 37.0075 198.575L37.0641 197.54C37.215 192.949 39.498 190.634 43.9131 190.595L53.649 190.536C54.7056 190.516 55.2339 189.964 55.2339 188.881ZM116.932 201.234C116.79 192.25 116.96 183.265 116.904 174.931C116.904 172.882 115.923 171.848 113.96 171.828L108.385 171.769C107.936 171.761 107.491 171.847 107.074 172.021C106.658 172.196 106.278 172.455 105.957 172.785C105.636 173.114 105.38 173.508 105.204 173.942C105.028 174.377 104.936 174.843 104.932 175.315L104.819 205.904C104.812 207.275 104.542 208.63 104.023 209.89C103.505 211.149 102.749 212.287 101.801 213.235C100.854 214.184 99.7328 214.924 98.5057 215.411C97.2786 215.898 95.9702 216.122 94.6584 216.071L91.4886 215.923C89.5537 215.854 87.7192 215.007 86.3688 213.558C85.0184 212.11 84.2568 210.172 84.2433 208.15L83.9886 173.867C83.9886 173.597 83.9372 173.329 83.8373 173.08C83.7374 172.831 83.591 172.604 83.4066 172.415C83.2223 172.225 83.0037 172.075 82.7635 171.975C82.5233 171.874 82.2663 171.824 82.0075 171.828L74.2244 171.857C72.7527 171.857 71.998 172.636 71.9603 174.192C71.432 193.225 71.5735 205.254 72.3848 210.278C76.3471 235.192 117.555 234.187 116.932 201.234ZM139.29 196.653C139.687 196.988 140.177 197.826 140.762 199.166C144.045 206.712 147.375 213.667 150.753 220.031C151.23 220.919 151.932 221.655 152.781 222.158C153.63 222.66 154.593 222.909 155.566 222.879C156.54 222.848 157.484 222.539 158.298 221.984C159.111 221.43 159.761 220.652 160.177 219.735L170.253 197.747C171.951 194.043 172.79 194.24 172.772 198.338L172.658 225.617C172.64 226.582 173.102 227.075 174.045 227.094L183.272 227.124C183.647 227.124 184.007 226.971 184.272 226.7C184.538 226.428 184.687 226.06 184.687 225.676L184.658 173.66C184.658 172.518 184.102 171.946 182.989 171.946L170.479 172.005C169.177 172.005 168.253 172.626 167.706 173.867L156.3 199.727C156.212 199.92 156.075 200.084 155.903 200.2C155.731 200.317 155.533 200.38 155.33 200.383C155.128 200.386 154.931 200.329 154.762 200.218C154.592 200.107 154.458 199.947 154.375 199.757L142.687 173.601C142.234 172.577 141.47 172.054 140.394 172.035L127.743 171.739C127.508 171.731 127.274 171.773 127.054 171.861C126.835 171.95 126.635 172.084 126.466 172.255C126.297 172.426 126.162 172.63 126.071 172.856C125.979 173.083 125.932 173.326 125.932 173.572L125.989 225.705C125.989 226.69 126.46 227.183 127.404 227.183L136.658 227.065C137.583 227.045 138.036 226.553 138.017 225.587L137.79 197.599C137.79 196.122 138.29 195.806 139.29 196.653ZM207.13 215.568C206.903 215.568 206.679 215.522 206.469 215.431C206.26 215.34 206.07 215.208 205.909 215.04C205.749 214.873 205.622 214.674 205.535 214.455C205.448 214.237 205.404 214.002 205.404 213.765L205.63 173.631C205.63 173.153 205.448 172.694 205.124 172.356C204.801 172.018 204.362 171.828 203.904 171.828L195.441 171.739C195.21 171.735 194.98 171.78 194.765 171.871C194.551 171.961 194.356 172.096 194.192 172.267C194.028 172.438 193.899 172.642 193.812 172.866C193.726 173.09 193.683 173.33 193.687 173.572L193.885 225.351C193.885 225.829 194.067 226.287 194.39 226.625C194.714 226.964 195.153 227.153 195.611 227.153L226.121 227.124C226.569 227.124 227 226.942 227.322 226.617C227.644 226.292 227.832 225.848 227.847 225.38L228.158 217.519C228.166 217.277 228.127 217.036 228.044 216.811C227.96 216.585 227.834 216.379 227.673 216.206C227.512 216.032 227.319 215.894 227.106 215.8C226.893 215.705 226.664 215.657 226.432 215.657L207.13 215.568Z"
+        fill="white"
+      />
+      <path
+        d="M116.932 201.234C117.554 234.187 76.3468 235.192 72.3845 210.278C71.5732 205.254 71.4317 193.225 71.96 174.192C71.9977 172.635 72.7524 171.857 74.2241 171.857L82.0071 171.828C82.266 171.824 82.523 171.874 82.7632 171.974C83.0034 172.075 83.222 172.225 83.4063 172.414C83.5907 172.604 83.7371 172.83 83.837 173.08C83.9369 173.329 83.9883 173.597 83.9883 173.867L84.243 208.15C84.2565 210.171 85.0181 212.109 86.3685 213.558C87.7189 215.007 89.5534 215.854 91.4883 215.923L94.6581 216.07C95.9699 216.122 97.2783 215.897 98.5054 215.41C99.7325 214.923 100.853 214.184 101.801 213.235C102.749 212.287 103.505 211.149 104.023 209.889C104.541 208.63 104.812 207.275 104.818 205.904L104.932 175.315C104.935 174.843 105.028 174.376 105.204 173.942C105.38 173.508 105.636 173.114 105.957 172.785C106.278 172.455 106.657 172.195 107.074 172.021C107.491 171.847 107.936 171.761 108.385 171.769L113.96 171.828C115.922 171.847 116.903 172.882 116.903 174.931C116.96 183.265 116.79 192.25 116.932 201.234Z"
+        fill="#2E94D4"
+      />
+      <path
+        d="M139.29 196.653C138.29 195.806 137.79 196.122 137.79 197.599L138.017 225.587C138.035 226.553 137.583 227.045 136.658 227.065L127.403 227.183C126.46 227.183 125.988 226.69 125.988 225.705L125.932 173.572C125.932 173.326 125.979 173.083 126.07 172.856C126.162 172.63 126.296 172.426 126.465 172.255C126.634 172.084 126.835 171.95 127.054 171.861C127.274 171.773 127.508 171.731 127.743 171.739L140.394 172.035C141.469 172.054 142.234 172.577 142.686 173.601L154.375 199.757C154.458 199.947 154.592 200.107 154.761 200.218C154.93 200.329 155.128 200.386 155.33 200.383C155.532 200.38 155.731 200.317 155.903 200.2C156.074 200.084 156.212 199.92 156.3 199.727L167.705 173.867C168.252 172.626 169.177 172.005 170.479 172.005L182.988 171.946C184.101 171.946 184.658 172.518 184.658 173.66L184.686 225.676C184.686 226.06 184.537 226.428 184.272 226.7C184.006 226.971 183.647 227.124 183.271 227.124L174.045 227.094C173.101 227.075 172.639 226.582 172.658 225.617L172.771 198.338C172.79 194.24 171.951 194.043 170.252 197.747L160.177 219.735C159.761 220.652 159.111 221.43 158.297 221.984C157.484 222.539 156.539 222.848 155.566 222.879C154.593 222.909 153.629 222.66 152.78 222.157C151.931 221.655 151.23 220.919 150.752 220.031C147.375 213.667 144.045 206.712 140.762 199.166C140.177 197.826 139.686 196.988 139.29 196.653Z"
+        fill="#2E94D4"
+      />
+      <path
+        d="M207.13 215.568L226.432 215.657C226.664 215.657 226.893 215.705 227.106 215.799C227.319 215.894 227.512 216.032 227.673 216.205C227.834 216.379 227.96 216.585 228.044 216.811C228.127 217.036 228.166 217.277 228.158 217.519L227.847 225.38C227.832 225.848 227.644 226.291 227.322 226.617C227 226.942 226.569 227.124 226.121 227.124L195.611 227.153C195.153 227.153 194.714 226.963 194.391 226.625C194.067 226.287 193.885 225.829 193.885 225.35L193.687 173.571C193.683 173.33 193.726 173.09 193.813 172.865C193.899 172.641 194.028 172.438 194.192 172.267C194.356 172.096 194.551 171.961 194.765 171.87C194.98 171.78 195.21 171.735 195.441 171.739L203.904 171.828C204.362 171.828 204.801 172.018 205.125 172.356C205.448 172.694 205.63 173.152 205.63 173.63L205.404 213.765C205.404 214.002 205.448 214.236 205.535 214.455C205.622 214.674 205.749 214.873 205.909 215.04C206.07 215.207 206.26 215.34 206.469 215.431C206.679 215.521 206.903 215.568 207.13 215.568Z"
+        fill="#2E94D4"
+      />
+    </svg>
+  );
+}
diff --git a/web/src/ui/index.ts b/web/src/ui/index.ts
index 4996a3ff..7ed2c2e4 100644
--- a/web/src/ui/index.ts
+++ b/web/src/ui/index.ts
@@ -3,6 +3,7 @@
 // docs/superpowers/specs/2026-06-07-design-system.md.
 export { cn } from './cn';
 export { Button, buttonClassName, type ButtonProps } from './Button';
+export { BrandLogo } from './BrandLogo';
 export { IconButton, type IconButtonProps } from './IconButton';
 export { Dialog, DialogTrigger, DialogClose, DialogContent } from './Dialog';
 export { TextInput, type TextInputProps } from './TextInput';

From 73ab92c1304d3a483ce030a111c0c8ccfd0ede57 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 20:19:10 +1000
Subject: [PATCH 13/33] =?UTF-8?q?fix(web/theme):=20convert=20all=20modals?=
 =?UTF-8?q?=20+=20renderer=20header=20to=20the=20dark=20ink=20surface=20(P?=
 =?UTF-8?q?3/P4)=20and=20dismiss=20the=20login=20dialog=20on=20auth=20succ?=
 =?UTF-8?q?ess=20(P5)=20=E2=80=94=20DialogContent=20shell,=2014=20modals'?=
 =?UTF-8?q?=20inner=20tokens,=20Select=20dropdown,=20RendererHeader/page-t?=
 =?UTF-8?q?abs=20all=20flip=20onlight=E2=86=92ondark/paper=E2=86=92ink;=20?=
 =?UTF-8?q?diagram=20canvas=20+=20template=20previews=20stay=20paper;=20Ap?=
 =?UTF-8?q?pRoot=20effect=20closes=20login=20modal=20on=20null=E2=86=92use?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.tsx                       | 10 ++++-
 web/src/components/auth/LoginModal.tsx        | 12 +++---
 .../components/modals/AskToImportModal.tsx    |  4 +-
 .../modals/AtomicCssSettingsModal.tsx         |  4 +-
 web/src/components/modals/CheatSheetModal.tsx | 14 +++----
 web/src/components/modals/ConfirmDialog.tsx   |  6 +--
 web/src/components/modals/CreateNewModal.tsx  | 12 +++---
 web/src/components/modals/HelpModal.tsx       | 10 ++---
 .../modals/KeyboardShortcutsModal.tsx         |  8 ++--
 web/src/components/modals/OnboardingModal.tsx |  8 ++--
 web/src/components/modals/SettingsModal.tsx   | 15 +++----
 .../components/modals/ShareErrorNotice.tsx    |  2 +-
 .../components/modals/SupportPledgeModal.tsx  |  4 +-
 web/src/components/preview/RendererHeader.tsx | 14 +++----
 .../subscription/LimitReachedNotice.tsx       |  6 +--
 .../components/subscription/PricingModal.tsx  | 40 +++++++++----------
 web/src/ui/Dialog.tsx                         | 17 ++++----
 web/src/ui/Select.tsx                         | 17 ++++----
 18 files changed, 108 insertions(+), 95 deletions(-)

diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index b0316e3d..c16c63e5 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -140,6 +140,14 @@ export function AppRoot() {
   const loginModalOpen = useUiStore((s) => s.loginModalOpen);
   const setLoginModalOpen = useUiStore((s) => s.setLoginModalOpen);
 
+  // P5: dismiss the sign-in sheet once auth succeeds. The OAuth round-trip resolves
+  // asynchronously (popup → authStore.user), and nothing else closes the modal — so a
+  // signed-in user would otherwise stay stranded on the login dialog. Closing on the
+  // null→user transition covers every entry point (share-gate, save-gate, header).
+  useEffect(() => {
+    if (user && loginModalOpen) setLoginModalOpen(false);
+  }, [user, loginModalOpen, setLoginModalOpen]);
+
   // M04: subscription (load + derive plan on auth) — `loading` gates the plan-limit
   // race guard (§1). analytics.track binds the current userId. paddle = checkout.
   const { subscription, planType, subscribed, loading: subLoading, reload: reloadSubscription } =
@@ -1283,7 +1291,7 @@ export function AppRoot() {
                   onPresent={toggleFullscreen}
                   pageTabs={
                     <PageTabs
-                      surface="light"
+                      surface="dark"
                       pages={item.pages ?? []}
                       currentPageId={item.currentPageId ?? ''}
                       onSwitch={switchPageAction}
diff --git a/web/src/components/auth/LoginModal.tsx b/web/src/components/auth/LoginModal.tsx
index 853e7c96..d711c626 100644
--- a/web/src/components/auth/LoginModal.tsx
+++ b/web/src/components/auth/LoginModal.tsx
@@ -82,7 +82,7 @@ export function LoginModal({ open, onOpenChange, onLogin, lastProvider, error }:
       <Button
         key={id}
         variant={elevated ? 'primary' : 'subtle'}
-        surface="light"
+        surface="dark"
         className="w-full"
         data-testid={`login-${id}`}
         onClick={() => onLogin(id)}
@@ -93,7 +93,7 @@ export function LoginModal({ open, onOpenChange, onLogin, lastProvider, error }:
             data-chip={chip ? 'true' : undefined}
             className={
               chip
-                ? 'flex shrink-0 items-center justify-center rounded-[3px] bg-white p-0.5 text-onlight-strong'
+                ? 'flex shrink-0 items-center justify-center rounded-[3px] bg-white p-0.5 text-ondark-strong'
                 : 'shrink-0'
             }
           >
@@ -113,9 +113,9 @@ export function LoginModal({ open, onOpenChange, onLogin, lastProvider, error }:
     );
   }
 
-  // Eyelabel (.ret) section headers — onlight-muted keeps them AA-legible on paper
-  // (onlight-faint fails AA for small text per the contrast audit).
-  const eyelabel = 'font-mono text-[10px] uppercase tracking-[0.12em] text-onlight-muted';
+  // Eyelabel (.ret) section headers — ondark-muted keeps them AA-legible on paper
+  // (ondark-faint fails AA for small text per the contrast audit).
+  const eyelabel = 'font-mono text-[10px] uppercase tracking-[0.12em] text-ondark-muted';
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -127,7 +127,7 @@ export function LoginModal({ open, onOpenChange, onLogin, lastProvider, error }:
           <p
             data-testid="login-error"
             role="alert"
-            className="mb-3 rounded border border-danger-strong/40 bg-danger/10 px-3 py-2 text-[13px] text-danger-strong"
+            className="mb-3 rounded border border-danger/40 bg-danger/10 px-3 py-2 text-[13px] text-danger"
           >
             {error}
           </p>
diff --git a/web/src/components/modals/AskToImportModal.tsx b/web/src/components/modals/AskToImportModal.tsx
index 82224a34..485c9f3a 100644
--- a/web/src/components/modals/AskToImportModal.tsx
+++ b/web/src/components/modals/AskToImportModal.tsx
@@ -24,7 +24,7 @@ export function AskToImportModal({
         <div className="flex justify-end gap-2">
           <Button
             variant="subtle"
-            surface="light"
+            surface="dark"
             data-testid="import-dismiss"
             // Closing is driven by the controlled `open` (the hook flips `pending`
             // in dismiss()/doImport()). Do NOT also call onOpenChange(false): that
@@ -37,7 +37,7 @@ export function AskToImportModal({
           </Button>
           <Button
             variant="primary"
-            surface="light"
+            surface="dark"
             data-testid="import-confirm"
             onClick={onImport}
           >
diff --git a/web/src/components/modals/AtomicCssSettingsModal.tsx b/web/src/components/modals/AtomicCssSettingsModal.tsx
index 6165f81e..ca126f56 100644
--- a/web/src/components/modals/AtomicCssSettingsModal.tsx
+++ b/web/src/components/modals/AtomicCssSettingsModal.tsx
@@ -59,7 +59,7 @@ export function AtomicCssSettingsModal({
       >
         <div className="space-y-3" data-testid="acss-modal">
           <Textarea
-            surface="light"
+            surface="dark"
             rows={10}
             spellCheck={false}
             className="w-full font-mono text-[12px]"
@@ -76,7 +76,7 @@ export function AtomicCssSettingsModal({
           <div className="flex justify-end">
             <Button
               variant="primary"
-              surface="light"
+              surface="dark"
               data-testid="acss-save"
               onClick={handleSave}
             >
diff --git a/web/src/components/modals/CheatSheetModal.tsx b/web/src/components/modals/CheatSheetModal.tsx
index ae9b1b6e..7e45c286 100644
--- a/web/src/components/modals/CheatSheetModal.tsx
+++ b/web/src/components/modals/CheatSheetModal.tsx
@@ -44,24 +44,24 @@ export function CheatSheetModal({ open, onOpenChange }: CheatSheetModalProps) {
         <div data-testid="cheatsheet-modal" className="max-h-[60vh] overflow-y-auto">
           <table className="w-full border-collapse text-[13px]">
             <thead>
-              <tr className="border-b border-paper-line">
-                <th className="px-3 py-2 text-left font-mono uppercase tracking-[0.12em] text-[11px] text-onlight-muted">
+              <tr className="border-b border-ink-line">
+                <th className="px-3 py-2 text-left font-mono uppercase tracking-[0.12em] text-[11px] text-ondark-muted">
                   Feature
                 </th>
-                <th className="px-3 py-2 text-left font-mono uppercase tracking-[0.12em] text-[11px] text-onlight-muted">
+                <th className="px-3 py-2 text-left font-mono uppercase tracking-[0.12em] text-[11px] text-ondark-muted">
                   Example
                 </th>
               </tr>
             </thead>
             <tbody>
               {ROWS.map((row) => (
-                <tr key={row.feature} className="border-b border-paper-line/60">
-                  <td className="px-3 py-2 align-top text-onlight-strong">
+                <tr key={row.feature} className="border-b border-ink-line/60">
+                  <td className="px-3 py-2 align-top text-ondark-strong">
                     {row.feature}
                   </td>
                   <td className="px-3 py-2 align-top">
-                    <pre className="rounded bg-paper-200 p-2">
-                      <code className="font-mono text-[12px] text-onlight-strong whitespace-pre">
+                    <pre className="rounded bg-ink-900 p-2">
+                      <code className="font-mono text-[12px] text-ondark-strong whitespace-pre">
                         {row.example}
                       </code>
                     </pre>
diff --git a/web/src/components/modals/ConfirmDialog.tsx b/web/src/components/modals/ConfirmDialog.tsx
index cb5c0dde..7ceb2dac 100644
--- a/web/src/components/modals/ConfirmDialog.tsx
+++ b/web/src/components/modals/ConfirmDialog.tsx
@@ -30,12 +30,12 @@ export function ConfirmDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent title={title}>
         {message && (
-          <p className="text-[13px] text-onlight-muted">{message}</p>
+          <p className="text-[13px] text-ondark-muted">{message}</p>
         )}
         <div className="mt-4 flex justify-end gap-2">
           <Button
             variant="subtle"
-            surface="light"
+            surface="dark"
             data-testid="confirm-cancel"
             onClick={() => onOpenChange(false)}
           >
@@ -43,7 +43,7 @@ export function ConfirmDialog({
           </Button>
           <Button
             variant={tone === 'danger' ? 'danger' : 'primary'}
-            surface="light"
+            surface="dark"
             data-testid="confirm-ok"
             onClick={handleConfirm}
           >
diff --git a/web/src/components/modals/CreateNewModal.tsx b/web/src/components/modals/CreateNewModal.tsx
index 5ba93b36..eff7640f 100644
--- a/web/src/components/modals/CreateNewModal.tsx
+++ b/web/src/components/modals/CreateNewModal.tsx
@@ -92,6 +92,8 @@ function BlankThumb() {
         'border border-dashed border-paper-line bg-white',
       )}
     >
+      {/* On the white "blank canvas" thumbnail the + must stay DARK (onlight), even
+          though the modal chrome is now dark — this preview represents a paper canvas. */}
       <span className="grid h-6 w-6 place-items-center rounded-full border border-onlight-faint text-[15px] leading-none text-onlight-muted">
         +
       </span>
@@ -100,12 +102,12 @@ function BlankThumb() {
 }
 
 const cardClass = cn(
-  'flex flex-col items-stretch gap-2 rounded-md border border-paper-line bg-paper-50',
+  'flex flex-col items-stretch gap-2 rounded-md border border-ink-line bg-ink-700',
   'p-3 text-left transition hover:border-accent hover:shadow-pop',
   'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent',
 );
 
-const eyelabelClass = 'mb-2 font-mono text-[10px] uppercase tracking-[0.16em] text-onlight-faint';
+const eyelabelClass = 'mb-2 font-mono text-[10px] uppercase tracking-[0.16em] text-ondark-faint';
 
 // Presentational "Create New" picker (REQ-MOD-4 / §04). Two labelled sections —
 // Start (Blank + the 'basic' starter) and Styles (the themed templates) — each on
@@ -140,7 +142,7 @@ export function CreateNewModal({ open, onOpenChange, onSelect }: CreateNewModalP
                 className={cardClass}
               >
                 <BlankThumb />
-                <span className="font-serif text-[15px] text-onlight-strong">Blank</span>
+                <span className="font-serif text-[15px] text-ondark-strong">Blank</span>
               </button>
 
               {startTemplates.map((t) => (
@@ -152,7 +154,7 @@ export function CreateNewModal({ open, onOpenChange, onSelect }: CreateNewModalP
                   className={cardClass}
                 >
                   <Thumb tint={THUMB_TINTS[t.id]} />
-                  <span className="font-serif text-[15px] text-onlight-strong">{t.title}</span>
+                  <span className="font-serif text-[15px] text-ondark-strong">{t.title}</span>
                 </button>
               ))}
             </div>
@@ -171,7 +173,7 @@ export function CreateNewModal({ open, onOpenChange, onSelect }: CreateNewModalP
                   className={cardClass}
                 >
                   <Thumb tint={THUMB_TINTS[t.id]} />
-                  <span className="font-serif text-[15px] text-onlight-strong">{t.title}</span>
+                  <span className="font-serif text-[15px] text-ondark-strong">{t.title}</span>
                 </button>
               ))}
             </div>
diff --git a/web/src/components/modals/HelpModal.tsx b/web/src/components/modals/HelpModal.tsx
index 2a7c7344..4feeeef9 100644
--- a/web/src/components/modals/HelpModal.tsx
+++ b/web/src/components/modals/HelpModal.tsx
@@ -23,12 +23,12 @@ export function HelpModal({ open, onOpenChange, version }: HelpModalProps) {
       >
         <div
           data-testid="help-modal"
-          className="space-y-5 text-[14px] text-onlight-muted"
+          className="space-y-5 text-[14px] text-ondark-muted"
         >
           {version ? (
             <p
               data-testid="help-version"
-              className="font-mono uppercase tracking-[0.12em] text-[11px] text-onlight-muted"
+              className="font-mono uppercase tracking-[0.12em] text-[11px] text-ondark-muted"
             >
               Version {version}
             </p>
@@ -43,7 +43,7 @@ export function HelpModal({ open, onOpenChange, version }: HelpModalProps) {
           <ul className="space-y-2">
             <li>
               <a
-                className="text-accent-press hover:text-accent underline underline-offset-2 rounded ring-draft-light"
+                className="text-accent-press hover:text-accent underline underline-offset-2 rounded ring-draft"
                 href={DOCS_URL}
                 target="_blank"
                 rel="noreferrer noopener"
@@ -53,7 +53,7 @@ export function HelpModal({ open, onOpenChange, version }: HelpModalProps) {
             </li>
             <li>
               <a
-                className="text-accent-press hover:text-accent underline underline-offset-2 rounded ring-draft-light"
+                className="text-accent-press hover:text-accent underline underline-offset-2 rounded ring-draft"
                 href={CONTACT_URL}
                 target="_blank"
                 rel="noreferrer noopener"
@@ -63,7 +63,7 @@ export function HelpModal({ open, onOpenChange, version }: HelpModalProps) {
             </li>
             <li>
               <a
-                className="text-accent-press hover:text-accent underline underline-offset-2 rounded ring-draft-light"
+                className="text-accent-press hover:text-accent underline underline-offset-2 rounded ring-draft"
                 href={GITHUB_URL}
                 target="_blank"
                 rel="noreferrer noopener"
diff --git a/web/src/components/modals/KeyboardShortcutsModal.tsx b/web/src/components/modals/KeyboardShortcutsModal.tsx
index 16c00f6d..14c43bd9 100644
--- a/web/src/components/modals/KeyboardShortcutsModal.tsx
+++ b/web/src/components/modals/KeyboardShortcutsModal.tsx
@@ -38,15 +38,15 @@ const EDITOR: Shortcut[] = [
 function Section({ title, items }: { title: string; items: Shortcut[] }) {
   return (
     <div>
-      <h3 className="mb-2 font-mono uppercase tracking-[0.12em] text-[11px] text-onlight-muted">
+      <h3 className="mb-2 font-mono uppercase tracking-[0.12em] text-[11px] text-ondark-muted">
         {title}
       </h3>
       <table className="w-full border-collapse text-[13px]">
         <tbody>
           {items.map((s) => (
-            <tr key={s.action} className="border-b border-paper-line/60">
-              <td className="py-1.5 pr-3 text-onlight-muted">{s.action}</td>
-              <td className="py-1.5 pl-3 text-right font-mono text-[12px] text-onlight-strong whitespace-nowrap">
+            <tr key={s.action} className="border-b border-ink-line/60">
+              <td className="py-1.5 pr-3 text-ondark-muted">{s.action}</td>
+              <td className="py-1.5 pl-3 text-right font-mono text-[12px] text-ondark-strong whitespace-nowrap">
                 {s.keys}
               </td>
             </tr>
diff --git a/web/src/components/modals/OnboardingModal.tsx b/web/src/components/modals/OnboardingModal.tsx
index 335ab0f9..ea63d6e4 100644
--- a/web/src/components/modals/OnboardingModal.tsx
+++ b/web/src/components/modals/OnboardingModal.tsx
@@ -24,20 +24,20 @@ export function OnboardingModal({ open, onOpenChange, onDismiss }: OnboardingMod
         description="Turn plain text into clean UML sequence diagrams — no dragging, no fiddling."
       >
         <div className="space-y-4" data-testid="onboarding-modal">
-          <p className="text-[13px] leading-relaxed text-onlight-muted">
+          <p className="text-[13px] leading-relaxed text-ondark-muted">
             Write a few lines of the ZenUML DSL on the left and watch the diagram
             render live on the right. Describe who talks to whom:
           </p>
-          <pre className="rounded border border-paper-line bg-paper-100 p-3 font-mono text-[12px] leading-relaxed text-onlight-strong">
+          <pre className="rounded border border-ink-line bg-ink-900 p-3 font-mono text-[12px] leading-relaxed text-ondark-strong">
             {'Alice -> Bob: Hello\nBob -> Alice: Hi back'}
           </pre>
-          <p className="text-[13px] leading-relaxed text-onlight-muted">
+          <p className="text-[13px] leading-relaxed text-ondark-muted">
             Add return messages, nesting, alt/loop fragments and more as you go.
           </p>
           <div className="flex justify-end">
             <Button
               variant="primary"
-              surface="light"
+              surface="dark"
               data-testid="onboarding-get-started"
               onClick={onDismiss}
             >
diff --git a/web/src/components/modals/SettingsModal.tsx b/web/src/components/modals/SettingsModal.tsx
index 1c03202c..30506844 100644
--- a/web/src/components/modals/SettingsModal.tsx
+++ b/web/src/components/modals/SettingsModal.tsx
@@ -36,10 +36,10 @@ export interface SettingsModalProps {
 }
 
 const META_LABEL =
-  'font-mono uppercase tracking-[0.12em] text-[11px] text-onlight-muted';
+  'font-mono uppercase tracking-[0.12em] text-[11px] text-ondark-muted';
 const SECTION_LABEL = `${META_LABEL} mt-5 mb-2 first:mt-0`;
 const ROW = 'flex items-center justify-between gap-4 py-1.5';
-const ROW_LABEL = 'text-[13px] text-onlight-strong';
+const ROW_LABEL = 'text-[13px] text-ondark-strong';
 
 const FONT_SIZES = [12, 13, 14, 15, 16, 17, 18];
 const INDENT_SIZES = [2, 4, 8];
@@ -132,6 +132,7 @@ function SelectRow({
       <span className={ROW_LABEL}>{label}</span>
       <Select value={value} onValueChange={onValueChange}>
         <SelectTrigger
+          surface="dark"
           data-testid={testid}
           aria-label={label}
           className="min-w-[150px]"
@@ -179,7 +180,7 @@ export function SettingsModal({
             data-testid="settings-scroll"
             className="max-h-[calc(85vh-9rem)] overflow-y-auto pr-1"
           >
-            <div data-testid="settings-modal" className="text-onlight-strong">
+            <div data-testid="settings-modal" className="text-ondark-strong">
               {/* Two-column layout (design §04): Editor | Behavior. Stacks to one
                   column below sm, splits into two at sm+ to halve the height so
                   nothing falls below the fold. gap-x-8 ≈ the design's 30px gutter. */}
@@ -227,7 +228,7 @@ export function SettingsModal({
                     <div className={ROW}>
                       <span className={ROW_LABEL}>Custom font</span>
                       <TextInput
-                        surface="light"
+                        surface="dark"
                         data-testid="setting-editorCustomFont"
                         aria-label="Custom font"
                         className="min-w-[150px]"
@@ -366,11 +367,11 @@ export function SettingsModal({
               />
             </div>
           </div>
-          {/* Bottom fade: the scroll area sits on the paper surface, so fade to
-              paper-50 (not transparent) to keep the overflow edge discoverable. */}
+          {/* Bottom fade: the scroll area sits on the dark modal surface, so fade to
+              ink-800 (the modal bg, not transparent) to keep the overflow edge discoverable. */}
           <div
             aria-hidden
-            className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-paper-50 to-transparent"
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-ink-800 to-transparent"
           />
         </div>
       </DialogContent>
diff --git a/web/src/components/modals/ShareErrorNotice.tsx b/web/src/components/modals/ShareErrorNotice.tsx
index 8f7d3c38..6c4b65f2 100644
--- a/web/src/components/modals/ShareErrorNotice.tsx
+++ b/web/src/components/modals/ShareErrorNotice.tsx
@@ -26,7 +26,7 @@ export function ShareErrorNotice({
           <Button
             data-testid="share-error-fresh"
             variant="primary"
-            surface="light"
+            surface="dark"
             onClick={onStartFresh}
           >
             Start fresh
diff --git a/web/src/components/modals/SupportPledgeModal.tsx b/web/src/components/modals/SupportPledgeModal.tsx
index 2752ff3e..cc478bb3 100644
--- a/web/src/components/modals/SupportPledgeModal.tsx
+++ b/web/src/components/modals/SupportPledgeModal.tsx
@@ -31,7 +31,7 @@ export function SupportPledgeModal({
         description="Thanks for using ZenUML — it stays free and open thanks to people like you."
       >
         <div className="space-y-4" data-testid="pledge-modal">
-          <p className="text-[13px] leading-relaxed text-onlight-muted">
+          <p className="text-[13px] leading-relaxed text-ondark-muted">
             We just shipped a new version. If ZenUML saves you time, consider
             supporting the project so we can keep building it.
           </p>
@@ -50,7 +50,7 @@ export function SupportPledgeModal({
             </a>
             <Button
               variant="primary"
-              surface="light"
+              surface="dark"
               data-testid="pledge-dismiss"
               onClick={onDismiss}
             >
diff --git a/web/src/components/preview/RendererHeader.tsx b/web/src/components/preview/RendererHeader.tsx
index efba5e9f..bc7e489c 100644
--- a/web/src/components/preview/RendererHeader.tsx
+++ b/web/src/components/preview/RendererHeader.tsx
@@ -7,9 +7,9 @@ import { IconButton, Tooltip } from '../../ui';
 // right (the `.pv-tools` cluster): a zoom label, an optional Fit button, and a
 // Present button.
 //
-// This bar is the LIGHT paper surface (the diagram is rendered on warm paper, not
-// the dark ink chrome) — so every control here is `surface="light"` and the bar
-// itself is `bg-white border-b border-paper-line`.
+// This bar is the dark ink chrome (matching the editor side and the app header) —
+// every control here is `surface="dark"` and the bar itself is
+// `bg-ink-900 border-b border-ink-line`. Only the diagram canvas below stays warm paper.
 //
 // Zoom and Fit are presentational: PreviewFrame's imperative handle exposes only
 // `getPng`/`evalConsole`, so there is no zoom/fit API to wire in Phase 1. `zoomLabel`
@@ -33,14 +33,14 @@ export function RendererHeader({
   zoomLabel = '100%',
 }: RendererHeaderProps) {
   return (
-    <div className="flex items-center gap-2.5 h-11 px-3 bg-white border-b border-paper-line">
+    <div className="flex items-center gap-2.5 h-11 px-3 bg-ink-900 border-b border-ink-line">
       {/* .rtabs — left cluster, holds the page tabs slot */}
       <div className="flex items-center gap-1 min-w-0">{pageTabs}</div>
 
       {/* .pv-tools — right controls cluster */}
       <div className="ml-auto flex items-center gap-1">
         {/* .zz — zoom percentage (presentational) */}
-        <span className="font-mono text-[11px] text-onlight-muted px-1.5 select-none">
+        <span className="font-mono text-[11px] text-ondark-muted px-1.5 select-none">
           {zoomLabel}
         </span>
 
@@ -48,7 +48,7 @@ export function RendererHeader({
           <Tooltip label="Fit to screen">
             <IconButton
               size="md"
-              surface="light"
+              surface="dark"
               aria-label="Fit to screen"
               data-testid="renderer-fit"
               onClick={() => onFit()}
@@ -64,7 +64,7 @@ export function RendererHeader({
         <Tooltip label="Present">
           <IconButton
             size="md"
-            surface="light"
+            surface="dark"
             aria-label="Present"
             data-testid="renderer-present"
             onClick={() => onPresent()}
diff --git a/web/src/components/subscription/LimitReachedNotice.tsx b/web/src/components/subscription/LimitReachedNotice.tsx
index 21f60987..be4ed18a 100644
--- a/web/src/components/subscription/LimitReachedNotice.tsx
+++ b/web/src/components/subscription/LimitReachedNotice.tsx
@@ -23,13 +23,13 @@ export function LimitReachedNotice({
         description={`You've reached your ${limit}-diagram limit. Saved on this device.`}
       >
         <div data-testid="limit-notice" className="flex flex-col gap-3">
-          <p className="text-[13px] text-onlight-muted">
+          <p className="text-[13px] text-ondark-muted">
             Upgrade to keep saving and syncing more diagrams to the cloud.
           </p>
           <div className="flex justify-end gap-2">
             <Button
               variant="ghost"
-              surface="light"
+              surface="dark"
               data-testid="limit-dismiss"
               onClick={() => onOpenChange(false)}
             >
@@ -37,7 +37,7 @@ export function LimitReachedNotice({
             </Button>
             <Button
               variant="primary"
-              surface="light"
+              surface="dark"
               data-testid="limit-upgrade"
               onClick={onUpgrade}
             >
diff --git a/web/src/components/subscription/PricingModal.tsx b/web/src/components/subscription/PricingModal.tsx
index 766a53ee..92b510f3 100644
--- a/web/src/components/subscription/PricingModal.tsx
+++ b/web/src/components/subscription/PricingModal.tsx
@@ -113,17 +113,17 @@ export function PricingModal({
       >
         <div data-testid="pricing-modal">
           {/* Monthly / yearly toggle */}
-          <div className="mb-5 inline-flex items-center gap-0.5 rounded-md bg-paper-100 p-0.5">
+          <div className="mb-5 inline-flex items-center gap-0.5 rounded-md bg-ink-900 p-0.5">
             <button
               type="button"
               data-testid="pricing-period-monthly"
               aria-pressed={billingPeriod === 'monthly'}
               onClick={() => onPeriodChange('monthly')}
               className={cn(
-                'rounded px-4 py-1.5 text-[12px] font-medium transition-colors ring-draft-light',
+                'rounded px-4 py-1.5 text-[12px] font-medium transition-colors ring-draft',
                 billingPeriod === 'monthly'
-                  ? 'bg-paper-50 text-onlight-strong shadow-sm'
-                  : 'text-onlight-muted hover:text-onlight-strong',
+                  ? 'bg-ink-700 text-ondark-strong shadow-sm'
+                  : 'text-ondark-muted hover:text-ondark-strong',
               )}
             >
               Billed monthly
@@ -134,10 +134,10 @@ export function PricingModal({
               aria-pressed={billingPeriod === 'yearly'}
               onClick={() => onPeriodChange('yearly')}
               className={cn(
-                'rounded px-4 py-1.5 text-[12px] font-medium transition-colors ring-draft-light',
+                'rounded px-4 py-1.5 text-[12px] font-medium transition-colors ring-draft',
                 billingPeriod === 'yearly'
-                  ? 'bg-paper-50 text-onlight-strong shadow-sm'
-                  : 'text-onlight-muted hover:text-onlight-strong',
+                  ? 'bg-ink-700 text-ondark-strong shadow-sm'
+                  : 'text-ondark-muted hover:text-ondark-strong',
               )}
             >
               Billed yearly{' '}
@@ -157,11 +157,11 @@ export function PricingModal({
                 <div
                   key={tier.key}
                   className={cn(
-                    'flex flex-col rounded-lg border border-paper-line bg-paper-50 p-4',
+                    'flex flex-col rounded-lg border border-ink-line bg-ink-700 p-4',
                     tier.key === 'plus' && 'border-accent/40 ring-1 ring-accent/20',
                   )}
                 >
-                  <h3 className="font-serif text-[18px] text-onlight-strong">
+                  <h3 className="font-serif text-[18px] text-ondark-strong">
                     {tier.name}
                   </h3>
                   <div className="mt-2 flex items-baseline gap-1.5">
@@ -173,24 +173,24 @@ export function PricingModal({
                       tier.price.monthly !== tier.price.yearly && (
                         <span
                           data-testid={`pricing-struck-${tier.key}`}
-                          // onlight-muted (not faint): the struck "was" price is
+                          // ondark-muted (not faint): the struck "was" price is
                           // load-bearing (it proves the discount), so it must clear AA
                           // on paper. The line-through + smaller size de-emphasize it.
-                          className="font-serif text-[15px] text-onlight-muted line-through"
+                          className="font-serif text-[15px] text-ondark-muted line-through"
                         >
                           {tier.price.monthly}
                         </span>
                       )}
-                    <span className="font-serif text-[24px] text-onlight-strong">
+                    <span className="font-serif text-[24px] text-ondark-strong">
                       {tier.price[billingPeriod]}
                     </span>
                     {tier.priceTerm && (
-                      <span className="text-[12px] text-onlight-muted">
+                      <span className="text-[12px] text-ondark-muted">
                         {tier.priceTerm}
                       </span>
                     )}
                   </div>
-                  <p className="mt-0.5 min-h-[16px] text-[11px] text-onlight-muted">
+                  <p className="mt-0.5 min-h-[16px] text-[11px] text-ondark-muted">
                     {tier.priceNote[billingPeriod]}
                   </p>
                   {billingPeriod === 'yearly' && tier.savings && (
@@ -200,7 +200,7 @@ export function PricingModal({
                   )}
 
                   {tier.includeDesc && (
-                    <p className="mt-3 text-[12px] font-medium text-onlight-muted">
+                    <p className="mt-3 text-[12px] font-medium text-ondark-muted">
                       {tier.includeDesc}
                     </p>
                   )}
@@ -208,7 +208,7 @@ export function PricingModal({
                     {tier.features.map((f) => (
                       <li
                         key={f}
-                        className="flex gap-1.5 text-[12px] text-onlight-strong"
+                        className="flex gap-1.5 text-[12px] text-ondark-strong"
                       >
                         <span aria-hidden className="text-accent">✓</span>
                         <span>{f}</span>
@@ -220,18 +220,18 @@ export function PricingModal({
                     {isCurrent ? (
                       <p
                         data-testid={`pricing-current-${tier.key}`}
-                        className="font-mono text-[11px] uppercase tracking-[0.1em] text-onlight-muted"
+                        className="font-mono text-[11px] uppercase tracking-[0.1em] text-ondark-muted"
                       >
                         Current plan
                       </p>
                     ) : tier.key === 'free' ? (
-                      <p className="font-mono text-[11px] uppercase tracking-[0.1em] text-onlight-muted">
+                      <p className="font-mono text-[11px] uppercase tracking-[0.1em] text-ondark-muted">
                         Included
                       </p>
                     ) : tier.key === 'enterprise' ? (
                       <Button
                         variant="subtle"
-                        surface="light"
+                        surface="dark"
                         className="w-full"
                         data-testid="pricing-enterprise"
                         onClick={onContactEnterprise}
@@ -241,7 +241,7 @@ export function PricingModal({
                     ) : (
                       <Button
                         variant={tier.key === 'plus' ? 'primary' : 'subtle'}
-                        surface="light"
+                        surface="dark"
                         className="w-full"
                         data-testid={`pricing-upgrade-${tier.key}`}
                         onClick={() => onUpgrade(composedPlan)}
diff --git a/web/src/ui/Dialog.tsx b/web/src/ui/Dialog.tsx
index 94ca4447..bb5cf5e5 100644
--- a/web/src/ui/Dialog.tsx
+++ b/web/src/ui/Dialog.tsx
@@ -2,9 +2,10 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import { cn } from './cn';
 import { IconButton } from './IconButton';
 
-// Design-system modal shell over Radix Dialog. Modals sit on the paper surface
-// (light) so they read as "lifted off the table." Used by LoginModal,
-// AskToImportModal, ConfirmDialog (M02) and beyond.
+// Design-system modal shell over Radix Dialog. Modals sit on the dark ink surface
+// (the app's chrome) so they read as "lifted off the table" against the darker
+// overlay. Used by LoginModal, AskToImportModal, ConfirmDialog (M02) and beyond.
+// (The diagram canvas remains the only warm-paper surface.)
 export const Dialog = RadixDialog.Root;
 export const DialogTrigger = RadixDialog.Trigger;
 export const DialogClose = RadixDialog.Close;
@@ -29,15 +30,15 @@ export function DialogContent({
       <div className="fixed inset-0 z-50 grid place-items-center p-4">
         <RadixDialog.Content
           className={cn(
-            'relative w-[min(440px,calc(100vw-2rem))] rounded-lg border border-paper-line',
-            'bg-paper-50 text-onlight-strong shadow-pop animate-pop-in',
+            'relative w-[min(440px,calc(100vw-2rem))] rounded-lg border border-ink-line',
+            'bg-ink-800 text-ondark-strong shadow-pop animate-pop-in',
             'p-6 focus:outline-none',
             className,
           )}
         >
           <DialogClose asChild>
             <IconButton
-              surface="light"
+              surface="dark"
               size="sm"
               aria-label="Close"
               className="absolute right-3 top-3"
@@ -58,11 +59,11 @@ export function DialogContent({
               </svg>
             </IconButton>
           </DialogClose>
-          <RadixDialog.Title className="font-serif text-[26px] leading-tight tracking-tight text-onlight-strong">
+          <RadixDialog.Title className="font-serif text-[26px] leading-tight tracking-tight text-ondark-strong">
             {title}
           </RadixDialog.Title>
           {description ? (
-            <RadixDialog.Description className="mt-1 text-[13px] text-onlight-muted">
+            <RadixDialog.Description className="mt-1 text-[13px] text-ondark-muted">
               {description}
             </RadixDialog.Description>
           ) : (
diff --git a/web/src/ui/Select.tsx b/web/src/ui/Select.tsx
index 13ed5ec8..7d883e84 100644
--- a/web/src/ui/Select.tsx
+++ b/web/src/ui/Select.tsx
@@ -39,17 +39,16 @@ function CheckIcon({ className }: { className?: string }) {
 }
 
 // Design-system select — compound wrappers over Radix Select, mirroring the
-// Menu API shape (Root + Trigger + Content + Item). Content floats on the paper
-// surface with shadow-pop; the trigger matches TextInput's light field styling.
+// Menu API shape (Root + Trigger + Content + Item). Content floats on the dark ink
+// surface with shadow-pop; the trigger matches TextInput's field styling.
 // data-testid / aria-label forward through ...rest on each part.
 export const Select = RadixSelect.Root;
 export const SelectValue = RadixSelect.Value;
 
 // SelectTrigger is surface-aware so the same primitive reads correctly on the light
-// paper surface (modals — the default) AND the dark ink chrome (the editor mode
-// strip). The floating SelectContent stays on paper for both surfaces (a small
-// floating menu reads fine on paper over either backdrop, matching the Menu/Popover
-// primitives). `surface` is consumed here, not forwarded to the DOM.
+// paper surface AND the dark ink chrome (now the default for modals + chrome). The
+// floating SelectContent is dark ink (matching the Menu primitive) since every surface
+// that hosts a Select is now dark. `surface` is consumed here, not forwarded to the DOM.
 export const SelectTrigger = forwardRef<
   React.ElementRef<typeof RadixSelect.Trigger>,
   React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & { surface?: 'light' | 'dark' }
@@ -90,7 +89,9 @@ export function SelectContent({
         position={position}
         sideOffset={sideOffset}
         className={cn(
-          'bg-paper-50 text-onlight-strong border border-paper-line rounded-lg shadow-pop',
+          // Dark floating panel matching the Menu primitive — every surface that hosts
+          // a Select is now dark ink chrome, so the dropdown reads consistently.
+          'bg-ink-850 text-ondark-strong border border-ink-line rounded-lg shadow-pop',
           'p-1 min-w-[var(--radix-select-trigger-width)] animate-pop-in z-50',
           className,
         )}
@@ -111,7 +112,7 @@ export const SelectItem = forwardRef<
       ref={ref}
       className={cn(
         'relative flex cursor-pointer select-none items-center rounded py-1.5 pl-7 pr-2.5 text-[13px] outline-none',
-        'data-[highlighted]:bg-accent-tint data-[highlighted]:text-onlight-strong',
+        'data-[highlighted]:bg-accent-soft data-[highlighted]:text-ondark-strong',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className,
       )}

From a0b68d34ba185500243fc150a52d11288705e65e Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 20:19:10 +1000
Subject: [PATCH 14/33] =?UTF-8?q?test(web):=20P5=20regression=20=E2=80=94?=
 =?UTF-8?q?=20login=20modal=20closes=20once=20authenticated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.test.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index addf47c0..8ba624d0 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -315,6 +315,24 @@ describe('AppRoot', () => {
     expect(screen.queryByTestId('share-create')).not.toBeInTheDocument();
   });
 
+  // P5: after a successful sign-in the login dialog must dismiss itself — otherwise the
+  // user is stranded staring at the sign-in sheet even though they're already in.
+  it('closes the login modal once the user becomes authenticated', async () => {
+    render(<AppRoot />); // signed-out by default
+    await screen.findByTestId('header-title');
+    await act(async () => { await userEvent.click(screen.getByTestId('share-button')); });
+    expect(await screen.findByTestId('login-google')).toBeInTheDocument();
+    // Simulate the OAuth round-trip completing: the auth store gets a user.
+    await act(async () => {
+      useAuthStore.setState({
+        user: { uid: 'u1', email: 'e@x.com', displayName: 'U', photoURL: null },
+        authReady: true,
+        online: true,
+      });
+    });
+    await waitFor(() => expect(screen.queryByTestId('login-google')).not.toBeInTheDocument());
+  });
+
   it('renders the import/export actions on the Home view', async () => {
     // Hub (PRs #800/#801) retired the LibraryPanel side panel — the library IS the
     // Home view now ('/', no ?id=). The bulk import/export controls were re-homed

From edae7b6e1a9364b6baf999eb818ef5ff8d128590 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 23:22:33 +1000
Subject: [PATCH 15/33] =?UTF-8?q?feat(web):=20integrate=20@zenuml/core=20L?=
 =?UTF-8?q?SP=20into=20CM6=20DSL=20editor=20=E2=80=94=20hover,=20doc-sync,?=
 =?UTF-8?q?=20diagnostics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/package.json                          |   2 +-
 web/src/editor/CodeEditor.tsx             |  70 +++++++-
 web/src/editor/lsp/lspClient.ts           | 141 +++++++++++++++
 web/src/editor/lsp/zenumlLspExtensions.ts | 198 ++++++++++++++++++++++
 4 files changed, 409 insertions(+), 2 deletions(-)
 create mode 100644 web/src/editor/lsp/lspClient.ts
 create mode 100644 web/src/editor/lsp/zenumlLspExtensions.ts

diff --git a/web/package.json b/web/package.json
index 9fa48e5d..50f545ec 100644
--- a/web/package.json
+++ b/web/package.json
@@ -48,7 +48,7 @@
     "@uiw/codemirror-theme-solarized": "^4.25.10",
     "@uiw/codemirror-themes": "^4.25.10",
     "@uiw/react-codemirror": "^4.25.10",
-    "@zenuml/core": "^3.49.2",
+    "@zenuml/core": "^3.50.0",
     "atomizer": "^3.30.0",
     "clsx": "^2.1.1",
     "coffeescript": "^2.7.0",
diff --git a/web/src/editor/CodeEditor.tsx b/web/src/editor/CodeEditor.tsx
index be704367..4ce14317 100644
--- a/web/src/editor/CodeEditor.tsx
+++ b/web/src/editor/CodeEditor.tsx
@@ -2,7 +2,7 @@ import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { EditorView, keymap, type KeyBinding } from '@codemirror/view';
 import { defaultKeymap } from '@codemirror/commands';
 import { Compartment, Prec, type Extension } from '@codemirror/state';
-import { linter, lintGutter, type Diagnostic } from '@codemirror/lint';
+import { linter, lintGutter, forceLinting, type Diagnostic } from '@codemirror/lint';
 import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import { abbreviationTracker } from '@emmetio/codemirror6-plugin';
 import { vim } from '@replit/codemirror-vim';
@@ -12,6 +12,13 @@ import { languageExtension, type EditorLanguage } from './modes';
 import { editorKeymap, formatCss } from './keymap';
 import { resolveZone, zenumlCompletions, zenumlCompletionKeymap } from './zenumlAutocomplete';
 import type { SlashZone } from './slashCommands';
+import { createZenumlLspClient, type ZenumlLspClient, type LspDiagnostic } from './lsp/lspClient';
+import {
+  lspDocSync,
+  lspHover,
+  lspDiagnosticsLinter,
+  lspDiagnosticsChanged,
+} from './lsp/zenumlLspExtensions';
 
 export interface CodeEditorProps {
   value: string;
@@ -120,6 +127,12 @@ export const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(functi
   onZoneChangeRef.current = onZoneChange;
   // Last zone emitted, so the listener only fires onZoneChange on an actual change.
   const lastZoneRef = useRef<SlashZone | null>(null);
+  // ZenUML LSP worker (hover + doc-sync + diagnostics). Lazily created for the DSL
+  // editor only and disposed on unmount. Powered by @zenuml/core's published lsp-worker.
+  const lspClientRef = useRef<ZenumlLspClient | null>(null);
+  // Latest diagnostics pushed by the LSP (server publishDiagnostics). The DSL linter
+  // source reads this holder; the owning effect updates it and forces a re-lint.
+  const lspDiagnosticsRef = useRef<LspDiagnostic[]>([]);
 
   // Built once; theme/font/keymap are swapped via compartment reconfigure (no remount).
   const extensions = useMemo(() => {
@@ -157,6 +170,25 @@ export const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(functi
           cb(zone);
         }),
       );
+
+      // ZenUML LSP (@zenuml/core/lsp-worker): adds hover (a capability the editor
+      // lacks today) and keeps the document synced to the server so hover/position
+      // requests resolve. The hand-rolled zenumlCompletions + linter are kept
+      // intentionally — they are richer than the LSP's; LSP completion/diagnostics
+      // are available in ./lsp/zenumlLspExtensions for a later migration if wanted.
+      //
+      // The worker is created/disposed by the effect below (NOT here in the render-phase
+      // memo). These extensions read the live client lazily through `lspClientRef` so the
+      // memoized array — which is not rebuilt on a StrictMode remount — can never hold a
+      // disposed worker.
+      const getLspClient = () => lspClientRef.current;
+      languageExtensions.push(lspDocSync(getLspClient));
+      languageExtensions.push(lspHover(getLspClient));
+      // Server diagnostics (e.g. duplicate-participant warnings, syntax errors) as a
+      // linter() SOURCE — CM merges it with the prop-based linter above rather than
+      // clobbering it. The DSL editor passes no `diagnostics` prop today, so this is the
+      // editor's only DSL diagnostics source.
+      languageExtensions.push(lspDiagnosticsLinter(() => lspDiagnosticsRef.current));
     }
 
     // Emmet + Prettier are CSS-ONLY. The ZenUML DSL editor must never receive them
@@ -220,6 +252,42 @@ export const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(functi
     });
   }, [diagnostics]);
 
+  // Own the ZenUML LSP worker lifecycle for the DSL editor. Created in an effect
+  // (not in the render-phase `extensions` memo) so React StrictMode's
+  // mount→unmount→remount cycle disposes AND recreates it cleanly: on the simulated
+  // unmount the cleanup terminates the worker, then the effect re-runs on remount and
+  // spins up a fresh one, re-opening the current document. The memoized hover/doc-sync
+  // extensions read the live client lazily via `lspClientRef`, so they always talk to
+  // the current worker and never to a disposed one. (CodeMirror child effects run
+  // before this parent effect, so `viewRef` is populated by the time we open the doc.)
+  useEffect(() => {
+    if (language !== 'dsl') return;
+    const client = createZenumlLspClient();
+    lspClientRef.current = client;
+    // Subscribe BEFORE openDoc so the server's first publishDiagnostics isn't dropped.
+    // On each push: store the set, then nudge CM to re-run the lint sources now (the
+    // dispatched effect satisfies the linter's needsRefresh; forceLinting skips the
+    // idle debounce) so diagnostics appear promptly instead of on the next keystroke.
+    client.onDiagnostics = (diags) => {
+      lspDiagnosticsRef.current = diags;
+      const view = viewRef.current;
+      if (view) {
+        view.dispatch({ effects: lspDiagnosticsChanged.of(null) });
+        forceLinting(view);
+      }
+    };
+    const doc = viewRef.current?.state.doc.toString() ?? value;
+    void client.openDoc(doc);
+    return () => {
+      client.dispose();
+      if (lspClientRef.current === client) lspClientRef.current = null;
+      lspDiagnosticsRef.current = [];
+    };
+    // `value` is intentionally excluded: openDoc seeds the server with the doc at
+    // creation time; subsequent edits flow through lspDocSync's changeDoc.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [language]);
+
   return (
     <div data-testid={testId} className="h-full overflow-hidden">
       <CodeMirror
diff --git a/web/src/editor/lsp/lspClient.ts b/web/src/editor/lsp/lspClient.ts
new file mode 100644
index 00000000..ec975bd6
--- /dev/null
+++ b/web/src/editor/lsp/lspClient.ts
@@ -0,0 +1,141 @@
+/**
+ * Minimal LSP client over the ZenUML language-server Web Worker.
+ *
+ * The server ships in @zenuml/core (>=3.50.0) as `@zenuml/core/lsp-worker` — a
+ * self-contained browser Web Worker (completion, hover, diagnostics; no
+ * backend). It speaks JSON-RPC over `postMessage` (message OBJECTS, no
+ * Content-Length framing). This client correlates requests/responses by `id`,
+ * acks server→client requests so the handshake completes, and surfaces
+ * `publishDiagnostics`.
+ */
+export type LspDiagnostic = {
+  range: {
+    start: { line: number; character: number };
+    end: { line: number; character: number };
+  };
+  severity?: number; // 1=error 2=warning 3=info 4=hint
+  message: string;
+  source?: string;
+};
+
+type Pending = { resolve: (v: unknown) => void; reject: (e: unknown) => void };
+
+export class ZenumlLspClient {
+  private nextId = 1;
+  private readonly pending = new Map<number, Pending>();
+  private version = 0;
+  private disposed = false;
+  onDiagnostics: ((diags: LspDiagnostic[]) => void) | null = null;
+  private readonly ready: Promise<void>;
+
+  constructor(
+    private readonly worker: Worker,
+    private readonly uri = 'file:///editor.zenuml',
+  ) {
+    worker.onmessage = (ev: MessageEvent) => this.receive(ev.data);
+    this.ready = this.initialize();
+  }
+
+  private notify(method: string, params: unknown): void {
+    if (this.disposed) return;
+    this.worker.postMessage({ jsonrpc: '2.0', method, params });
+  }
+
+  private request<T = unknown>(method: string, params: unknown): Promise<T> {
+    const id = this.nextId++;
+    return new Promise<T>((resolve, reject) => {
+      this.pending.set(id, { resolve: resolve as (v: unknown) => void, reject });
+      this.worker.postMessage({ jsonrpc: '2.0', id, method, params });
+    });
+  }
+
+  private receive(msg: any): void {
+    if (!msg || msg.jsonrpc !== '2.0') return;
+    if (msg.id !== undefined && msg.method === undefined) {
+      const p = this.pending.get(msg.id);
+      if (p) {
+        this.pending.delete(msg.id);
+        if (msg.error) p.reject(msg.error);
+        else p.resolve(msg.result);
+      }
+      return;
+    }
+    if (msg.id !== undefined && msg.method !== undefined) {
+      // server -> client request (e.g. client/registerCapability): ack null
+      this.worker.postMessage({ jsonrpc: '2.0', id: msg.id, result: null });
+      return;
+    }
+    if (msg.method === 'textDocument/publishDiagnostics') {
+      this.onDiagnostics?.(msg.params?.diagnostics ?? []);
+    }
+  }
+
+  private async initialize(): Promise<void> {
+    await this.request('initialize', {
+      processId: null,
+      rootUri: null,
+      capabilities: {
+        textDocument: {
+          synchronization: { dynamicRegistration: false },
+          completion: { completionItem: { snippetSupport: false } },
+          hover: { contentFormat: ['markdown', 'plaintext'] },
+          publishDiagnostics: {},
+        },
+      },
+    });
+    this.notify('initialized', {});
+  }
+
+  async openDoc(text: string): Promise<void> {
+    await this.ready;
+    this.version = 1;
+    this.notify('textDocument/didOpen', {
+      textDocument: { uri: this.uri, languageId: 'zenuml', version: this.version, text },
+    });
+  }
+
+  async changeDoc(text: string): Promise<void> {
+    await this.ready;
+    this.version += 1;
+    this.notify('textDocument/didChange', {
+      textDocument: { uri: this.uri, version: this.version },
+      contentChanges: [{ text }],
+    });
+  }
+
+  async completion(line: number, character: number): Promise<any> {
+    await this.ready;
+    return this.request('textDocument/completion', {
+      textDocument: { uri: this.uri },
+      position: { line, character },
+    });
+  }
+
+  async hover(line: number, character: number): Promise<any> {
+    await this.ready;
+    return this.request('textDocument/hover', {
+      textDocument: { uri: this.uri },
+      position: { line, character },
+    });
+  }
+
+  dispose(): void {
+    this.disposed = true;
+    this.onDiagnostics = null;
+    this.pending.clear();
+    this.worker.terminate();
+  }
+}
+
+// Vite resolves the package's pre-built worker bundle to a served URL. NOTE: do
+// NOT use `new Worker(new URL('@zenuml/core/lsp-worker', import.meta.url))` —
+// vite only transforms the `new URL(...)` worker form for RELATIVE paths, not
+// bare package specifiers, so the worker silently never loads. The `?url` import
+// is the robust form for an already-bundled worker.
+import zenumlLspWorkerUrl from '@zenuml/core/lsp-worker?url';
+
+/** Spawn the worker from the published package and wrap it. */
+export function createZenumlLspClient(): ZenumlLspClient {
+  const worker = new Worker(zenumlLspWorkerUrl, { type: 'module' });
+  return new ZenumlLspClient(worker);
+}
diff --git a/web/src/editor/lsp/zenumlLspExtensions.ts b/web/src/editor/lsp/zenumlLspExtensions.ts
new file mode 100644
index 00000000..7058592e
--- /dev/null
+++ b/web/src/editor/lsp/zenumlLspExtensions.ts
@@ -0,0 +1,198 @@
+/**
+ * CodeMirror 6 extensions backed by the ZenUML LSP worker (@zenuml/core).
+ *
+ * Granular by design so each can be adopted independently:
+ *   - lspDocSync(getClient)              → keeps the doc synced to the server on
+ *                                          every edit (REQUIRED for hover/completion/
+ *                                          diagnostics to resolve positions).
+ *   - lspHover(getClient)                → hover tooltips (new capability)
+ *   - lspDiagnosticsLinter(getDiags)     → surfaces the server's diagnostics (e.g.
+ *                                          duplicate-participant warnings) as a CM
+ *                                          linter() SOURCE — it MERGES with any other
+ *                                          linter() rather than clobbering it.
+ *   - lspCompletionSource(client)        → a CompletionSource (opt-in; the editor's
+ *                                          hand-rolled zenumlCompletions is richer)
+ *
+ * NOTE on the `getClient`/`getDiags` accessors: these extensions take a `() => …`
+ * accessor rather than a value. The CodeMirror extensions array is memoized by the
+ * host (CodeEditor.tsx) and is NOT rebuilt on a React StrictMode mount→unmount→remount
+ * cycle, but the worker IS disposed and recreated across that cycle. Reading through an
+ * accessor means these extensions always talk to the LIVE worker / latest diagnostics
+ * and never to a terminated one. (The initial `didOpen` and the diagnostics subscription
+ * are owned by the host effect that owns the worker lifecycle.)
+ */
+import { StateEffect, type Extension } from '@codemirror/state';
+import { EditorView, hoverTooltip, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { linter, type Diagnostic } from '@codemirror/lint';
+import {
+  CompletionContext,
+  type Completion,
+  type CompletionResult,
+} from '@codemirror/autocomplete';
+import { ZenumlLspClient, type LspDiagnostic } from './lspClient';
+
+type Doc = EditorView['state']['doc'];
+
+function offsetToPos(doc: Doc, offset: number) {
+  const line = doc.lineAt(offset);
+  return { line: line.number - 1, character: offset - line.from };
+}
+function posToOffset(doc: Doc, pos: { line: number; character: number }) {
+  const lineNo = Math.min(pos.line + 1, doc.lines);
+  const line = doc.line(lineNo);
+  return Math.min(line.from + pos.character, line.to);
+}
+
+/**
+ * Keep the document synced on the server on every edit. No diagnostics emitted.
+ * The INITIAL didOpen is performed by the host effect that owns the worker (so a
+ * StrictMode-recreated worker is re-opened with the current doc); this plugin only
+ * pushes incremental changes. Reads the live client lazily — see file header.
+ */
+export function lspDocSync(getClient: () => ZenumlLspClient | null): Extension {
+  return ViewPlugin.fromClass(
+    class {
+      update(u: ViewUpdate) {
+        if (u.docChanged) void getClient()?.changeDoc(u.state.doc.toString());
+      }
+    },
+  );
+}
+
+// Tooltip styling. CodeMirror's default `.cm-tooltip` supplies the box (border +
+// background); this only styles the inner markdown so **bold** and `code` read right.
+const lspHoverTheme = EditorView.baseTheme({
+  '.cm-zenuml-lsp-hover': {
+    padding: '4px 8px',
+    maxWidth: '460px',
+    lineHeight: '1.45',
+  },
+  '.cm-zenuml-lsp-hover strong': { fontWeight: '600' },
+  '.cm-zenuml-lsp-hover code': {
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+    fontSize: '90%',
+    padding: '0 3px',
+    borderRadius: '3px',
+    backgroundColor: 'rgba(127, 127, 127, 0.18)',
+  },
+});
+
+// Render the tiny markdown subset the ZenUML LSP hover emits — **bold** and `code`,
+// everything else (incl. the → and — symbols) as plain text — into DOM nodes. Built
+// from text nodes / <strong> / <code> rather than innerHTML, so there is no HTML
+// injection surface even though the content originates from our own server.
+function appendInlineMarkdown(parent: Node, line: string): void {
+  const re = /\*\*([^*]+)\*\*|`([^`]+)`/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(line)) !== null) {
+    if (m.index > last) parent.appendChild(document.createTextNode(line.slice(last, m.index)));
+    if (m[1] !== undefined) {
+      const strong = document.createElement('strong');
+      strong.textContent = m[1];
+      parent.appendChild(strong);
+    } else {
+      const code = document.createElement('code');
+      code.textContent = m[2];
+      parent.appendChild(code);
+    }
+    last = re.lastIndex;
+  }
+  if (last < line.length) parent.appendChild(document.createTextNode(line.slice(last)));
+}
+
+/** LSP hover tooltips. The current editor has none — this is purely additive. */
+export function lspHover(getClient: () => ZenumlLspClient | null): Extension {
+  return [
+    lspHoverTheme,
+    hoverTooltip(async (view, pos) => {
+      const client = getClient();
+      if (!client) return null;
+      const p = offsetToPos(view.state.doc, pos);
+      const res = await client.hover(p.line, p.character);
+      const contents = res?.contents;
+      const md =
+        typeof contents === 'string'
+          ? contents
+          : Array.isArray(contents)
+            ? contents.map((c: any) => (typeof c === 'string' ? c : c.value)).join('\n')
+            : contents?.value;
+      if (!md) return null;
+      return {
+        pos,
+        create() {
+          const dom = document.createElement('div');
+          dom.className = 'cm-zenuml-lsp-hover';
+          // One <div> per markdown line so multi-line hovers wrap as blocks.
+          for (const line of String(md).split('\n')) {
+            const lineEl = document.createElement('div');
+            appendInlineMarkdown(lineEl, line);
+            dom.appendChild(lineEl);
+          }
+          return { dom };
+        },
+      };
+    }),
+  ];
+}
+
+/** LSP-backed completion source (opt-in). */
+export function lspCompletionSource(client: ZenumlLspClient) {
+  return async (ctx: CompletionContext): Promise<CompletionResult | null> => {
+    const p = offsetToPos(ctx.state.doc, ctx.pos);
+    const res = await client.completion(p.line, p.character);
+    const items: any[] = Array.isArray(res) ? res : (res?.items ?? []);
+    if (!items.length) return null;
+    const word = ctx.matchBefore(/[\w@.]+/);
+    return {
+      from: word ? word.from : ctx.pos,
+      options: items.map(
+        (it): Completion => ({
+          label: it.label,
+          type: it.kind === 6 ? 'variable' : 'keyword',
+          detail: it.detail,
+        }),
+      ),
+      validFor: /^[\w@.]*$/,
+    };
+  };
+}
+
+/**
+ * Dispatched by the host when fresh LSP diagnostics have arrived (server push). The
+ * linter below lists it in `needsRefresh` so CodeMirror re-runs the lint sources; the
+ * host pairs the dispatch with `forceLinting(view)` to make them appear immediately
+ * instead of after the 750ms idle debounce.
+ */
+export const lspDiagnosticsChanged = StateEffect.define<null>();
+
+/**
+ * Surface the server's diagnostics as a CodeMirror linter() SOURCE. Because CM merges
+ * every linter() source (lintConfig is a Facet), this composes with the host's existing
+ * prop-based linter instead of clobbering it. Diagnostics arrive by PUSH
+ * (textDocument/publishDiagnostics); the host stores the latest set and this source —
+ * pulled on doc change / `lspDiagnosticsChanged` / forceLinting — maps them to CM, so
+ * the push→pull bridge stays inside the documented lint lifecycle.
+ */
+export function lspDiagnosticsLinter(getDiagnostics: () => LspDiagnostic[]): Extension {
+  return linter(
+    (view): Diagnostic[] => {
+      const doc = view.state.doc;
+      return getDiagnostics().map((d) => {
+        const from = posToOffset(doc, d.range.start);
+        const to = Math.max(from + 1, posToOffset(doc, d.range.end));
+        return {
+          from,
+          to,
+          severity: d.severity === 1 ? 'error' : d.severity === 2 ? 'warning' : 'info',
+          message: d.message,
+          source: d.source || 'zenuml',
+        };
+      });
+    },
+    {
+      needsRefresh: (update) =>
+        update.transactions.some((tr) => tr.effects.some((e) => e.is(lspDiagnosticsChanged))),
+    },
+  );
+}

From 87ae78d87adecb23aaf7e919cdf5e2afbfa81eb7 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 13 Jun 2026 23:36:34 +1000
Subject: [PATCH 16/33] =?UTF-8?q?fix(web/editor):=20guard=20the=20LSP=20wo?=
 =?UTF-8?q?rker=20behind=20a=20Worker-availability=20check=20=E2=80=94=20n?=
 =?UTF-8?q?ew=20Worker()=20ran=20unconditionally=20on=20editor=20mount,=20?=
 =?UTF-8?q?throwing=20'Worker=20is=20not=20defined'=20in=20jsdom=20and=20c?=
 =?UTF-8?q?rashing=20the=20editor=20(49=20unit=20tests);=20createZenumlLsp?=
 =?UTF-8?q?Client=20now=20returns=20null=20without=20Worker=20so=20the=20e?=
 =?UTF-8?q?ditor=20degrades=20to=20no-LSP=20(extensions=20already=20no-op?=
 =?UTF-8?q?=20on=20null)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/editor/CodeEditor.tsx        |  4 ++++
 web/src/editor/lsp/lspClient.test.ts | 13 +++++++++++++
 web/src/editor/lsp/lspClient.ts      | 12 ++++++++++--
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 web/src/editor/lsp/lspClient.test.ts

diff --git a/web/src/editor/CodeEditor.tsx b/web/src/editor/CodeEditor.tsx
index 4ce14317..5b279209 100644
--- a/web/src/editor/CodeEditor.tsx
+++ b/web/src/editor/CodeEditor.tsx
@@ -264,6 +264,10 @@ export const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(functi
     if (language !== 'dsl') return;
     const client = createZenumlLspClient();
     lspClientRef.current = client;
+    // No Web Worker available (jsdom unit tests, SSR): createZenumlLspClient returned
+    // null. Render the editor WITHOUT a language server rather than crashing — the
+    // lazily-read hover/doc-sync/diagnostic extensions already no-op on a null client.
+    if (!client) return;
     // Subscribe BEFORE openDoc so the server's first publishDiagnostics isn't dropped.
     // On each push: store the set, then nudge CM to re-run the lint sources now (the
     // dispatched effect satisfies the linter's needsRefresh; forceLinting skips the
diff --git a/web/src/editor/lsp/lspClient.test.ts b/web/src/editor/lsp/lspClient.test.ts
new file mode 100644
index 00000000..23397448
--- /dev/null
+++ b/web/src/editor/lsp/lspClient.test.ts
@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { createZenumlLspClient } from './lspClient';
+
+describe('createZenumlLspClient — no-Worker guard', () => {
+  // The unit-test runtime is jsdom, which does not define Web Worker. Without the
+  // guard, `new Worker(...)` throws `ReferenceError: Worker is not defined` on editor
+  // mount and crashes the whole editor (and ~49 CodeEditor/AppRoot tests with it). The
+  // factory must degrade to "no LSP" by returning null when Worker is unavailable.
+  it('returns null when Worker is unavailable (jsdom / SSR) instead of throwing', () => {
+    expect(typeof Worker).toBe('undefined'); // precondition: this env has no Worker
+    expect(createZenumlLspClient()).toBeNull();
+  });
+});
diff --git a/web/src/editor/lsp/lspClient.ts b/web/src/editor/lsp/lspClient.ts
index ec975bd6..548529bf 100644
--- a/web/src/editor/lsp/lspClient.ts
+++ b/web/src/editor/lsp/lspClient.ts
@@ -134,8 +134,16 @@ export class ZenumlLspClient {
 // is the robust form for an already-bundled worker.
 import zenumlLspWorkerUrl from '@zenuml/core/lsp-worker?url';
 
-/** Spawn the worker from the published package and wrap it. */
-export function createZenumlLspClient(): ZenumlLspClient {
+/**
+ * Spawn the worker from the published package and wrap it. Returns `null` in
+ * environments without Web Workers — jsdom (the unit-test runtime) and any SSR
+ * path — so the editor renders WITHOUT LSP instead of throwing
+ * `ReferenceError: Worker is not defined` on mount. The doc-sync/hover/diagnostic
+ * extensions already no-op on a null client (they read it lazily), so "no Worker"
+ * degrades cleanly to "no language server".
+ */
+export function createZenumlLspClient(): ZenumlLspClient | null {
+  if (typeof Worker === 'undefined') return null;
   const worker = new Worker(zenumlLspWorkerUrl, { type: 'module' });
   return new ZenumlLspClient(worker);
 }

From 0286893439359e312731ea6f158f99998bc39fd6 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 14:07:18 +1000
Subject: [PATCH 17/33] =?UTF-8?q?feat(web/header):=20surface=20a=20Pricing?=
 =?UTF-8?q?=20link=20in=20the=20header=20for=20signed-out=20users=20?=
 =?UTF-8?q?=E2=80=94=20anonymous=20visitors=20have=20no=20account=20menu?=
 =?UTF-8?q?=20(which=20carries=20Upgrade/My=20Plan),=20so=20add=20a=20quie?=
 =?UTF-8?q?t=20ghost=20Pricing=20link=20left=20of=20Sign=20in,=20gated=20b?=
 =?UTF-8?q?y=20paymentEnabled=20like=20the=20app-menu=20item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/header/AppHeader.test.tsx | 25 +++++++++++++
 web/src/components/header/AppHeader.tsx      | 37 ++++++++++++++------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/web/src/components/header/AppHeader.test.tsx b/web/src/components/header/AppHeader.test.tsx
index 0f16670f..95a520e4 100644
--- a/web/src/components/header/AppHeader.test.tsx
+++ b/web/src/components/header/AppHeader.test.tsx
@@ -182,6 +182,31 @@ describe('AppHeader', () => {
     expect(onOpenPricing).toHaveBeenCalled();
   });
 
+  // ---- Header Pricing link (signed-out) ----
+  // Signed-in users reach pricing via the account menu (ProfileMenu "Upgrade plan" /
+  // "My Plan"). Signed-out users have no account menu, so the only pricing path was
+  // buried in the app menu (logo ▾). Surface a visible "Pricing" link in the header
+  // for signed-out users — gated by paymentEnabled, like the app-menu item.
+  it('shows a visible header Pricing link when signed out and paymentEnabled', async () => {
+    const onOpenPricing = vi.fn();
+    render(<AppHeader {...baseProps} user={null} paymentEnabled onOpenPricing={onOpenPricing} />);
+    const link = screen.getByTestId('header-pricing-link');
+    expect(link).toBeInTheDocument();
+    await userEvent.click(link);
+    expect(onOpenPricing).toHaveBeenCalled();
+  });
+
+  it('hides the header Pricing link when payments are disabled', () => {
+    render(<AppHeader {...baseProps} user={null} paymentEnabled={false} />);
+    expect(screen.queryByTestId('header-pricing-link')).not.toBeInTheDocument();
+  });
+
+  // No duplicate affordance when signed in: ProfileMenu already carries Upgrade/My Plan.
+  it('does not show the header Pricing link when signed in', () => {
+    render(<AppHeader {...baseProps} user={mockUser} paymentEnabled />);
+    expect(screen.queryByTestId('header-pricing-link')).not.toBeInTheDocument();
+  });
+
   // ---- Document menu (filename ▾) ----
 
   it('document menu Duplicate calls onFork', async () => {
diff --git a/web/src/components/header/AppHeader.tsx b/web/src/components/header/AppHeader.tsx
index 744c43b0..333e37ec 100644
--- a/web/src/components/header/AppHeader.tsx
+++ b/web/src/components/header/AppHeader.tsx
@@ -356,16 +356,33 @@ export function AppHeader({
               onManagePlan={onManagePlan}
             />
           ) : (
-            <Tooltip label="Sign in to save and sync across devices">
-              <Button
-                variant="subtle"
-                size="md"
-                data-testid="header-login"
-                onClick={() => setLoginOpen(true)}
-              >
-                Sign in
-              </Button>
-            </Tooltip>
+            <>
+              {/* Signed-out users have no account menu (which carries Upgrade/My Plan
+                  for signed-in users), so surface a visible Pricing affordance here —
+                  gated by paymentEnabled like the app-menu item. A quiet ghost link so
+                  "Sign in" stays the primary action. The pricing modal handles the
+                  not-signed-in upgrade by routing back to sign-in. */}
+              {paymentEnabled && (
+                <Button
+                  variant="ghost"
+                  size="md"
+                  data-testid="header-pricing-link"
+                  onClick={() => onOpenPricing?.()}
+                >
+                  Pricing
+                </Button>
+              )}
+              <Tooltip label="Sign in to save and sync across devices">
+                <Button
+                  variant="subtle"
+                  size="md"
+                  data-testid="header-login"
+                  onClick={() => setLoginOpen(true)}
+                >
+                  Sign in
+                </Button>
+              </Tooltip>
+            </>
           )}
         </div>
       </header>

From 5226132c3658c14ec22105594ba24c0110c690f8 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 14:40:07 +1000
Subject: [PATCH 18/33] =?UTF-8?q?feat(web/preview):=20render=20the=20nativ?=
 =?UTF-8?q?e=20SVG=20(fit-to-width)=20instead=20of=20HTML=20on=20mobile=20?=
 =?UTF-8?q?=E2=80=94=20the=20fixed-px=20HTML=20diagram=20overflows=20narro?=
 =?UTF-8?q?w=20viewports;=20svgMode=20(isMobile=20&&=20!fullscreen)=20driv?=
 =?UTF-8?q?es=20renderMode:'svg'=20=E2=86=92=20window.zenuml.renderToSvg?=
 =?UTF-8?q?=20into=20#svg-mount=20with=20width:100%/height:auto=20so=20the?=
 =?UTF-8?q?=20full=20diagram=20shows=20by=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.tsx                     |  8 +++
 web/src/preview/PreviewFrame.test.tsx       | 45 +++++++++++++++
 web/src/preview/PreviewFrame.tsx            | 20 ++++++-
 web/src/preview/previewBootstrap.runtime.js | 63 +++++++++++++++++++--
 web/src/preview/previewBootstrap.test.ts    | 10 ++++
 web/src/preview/previewProtocol.ts          |  4 ++
 6 files changed, 141 insertions(+), 9 deletions(-)

diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index c16c63e5..272dd88d 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -43,6 +43,7 @@ import { downloadText } from '../services/download';
 // M04 — subscription / settings / modals / analytics
 import { useSubscription } from '../hooks/useSubscription';
 import { useAnalytics } from '../hooks/useAnalytics';
+import { useIsMobile } from '../hooks/useMediaQuery';
 import { usePaddle, type CheckoutPlanType } from '../hooks/usePaddle';
 import { isOverFileLimit, limitFor } from '../domain/planLimit';
 import { isPlus } from '../domain/plan';
@@ -130,6 +131,11 @@ export function AppRoot() {
   const toggleConsole = useUiStore((s) => s.toggleConsole);
   const fullscreen = useUiStore((s) => s.fullscreen);
   const toggleFullscreen = useUiStore((s) => s.toggleFullscreen);
+  // Mobile (≤767px) renders the preview as the native vector SVG (fit-to-width) instead
+  // of the fixed-px HTML diagram, which overflows a phone viewport. Present/fullscreen
+  // keeps the HTML scale-to-fit-both-axes path (a deliberate "show it big" view), so SVG
+  // mode is the non-fullscreen mobile editor preview only.
+  const isMobile = useIsMobile();
   const setActivePanel = useUiStore((s) => s.setActivePanel);
 
   // M04: single-modal state + open/close. Login modal is separate shared state so
@@ -1313,6 +1319,8 @@ export function AppRoot() {
                   // Present (fullscreen) mode: scale-to-fit + center the diagram
                   // (CSS transform; @zenuml/core untouched).
                   fit={fullscreen}
+                  // Mobile editor preview: native SVG fit-to-width (see isMobile above).
+                  svgMode={isMobile && !fullscreen}
                   stickyOffset={stickyOffset}
                   onCodeChange={handleDslChange}
                   onConsole={(e) => setConsoleEntries((prev) => [...prev, e])}
diff --git a/web/src/preview/PreviewFrame.test.tsx b/web/src/preview/PreviewFrame.test.tsx
index 516012c9..5df8e12b 100644
--- a/web/src/preview/PreviewFrame.test.tsx
+++ b/web/src/preview/PreviewFrame.test.tsx
@@ -242,4 +242,49 @@ describe('PreviewFrame', () => {
     expect(iframe.style.transform).toBe('');
     expect(iframe.className).toBe('border-0');
   });
+
+  // ---- SVG render mode (mobile) ----
+  // On mobile the HTML diagram overflows the narrow viewport (fixed-px layout, no
+  // reflow). svgMode tells the iframe to render the native vector SVG instead, which
+  // fits-to-width and shows the full diagram. The host signals it via renderMode.
+  it('sends renderMode "svg" in the render options when svgMode is set', () => {
+    const { container } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} svgMode />);
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    const post = vi.fn();
+    Object.defineProperty(iframe, 'contentWindow', { value: { postMessage: post }, configurable: true });
+    act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'ready' } })); });
+    expect(post).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'render', options: expect.objectContaining({ renderMode: 'svg' }) }),
+      '*',
+    );
+  });
+
+  it('defaults renderMode to "html" when svgMode is not set', () => {
+    const { container } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} />);
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    const post = vi.fn();
+    Object.defineProperty(iframe, 'contentWindow', { value: { postMessage: post }, configurable: true });
+    act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'ready' } })); });
+    expect(post).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'render', options: expect.objectContaining({ renderMode: 'html' }) }),
+      '*',
+    );
+  });
+
+  it('re-renders with svg mode when svgMode flips on after ready (e.g. rotate to a narrow viewport)', () => {
+    const { container, rerender } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} svgMode={false} />);
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    const post = vi.fn();
+    Object.defineProperty(iframe, 'contentWindow', { value: { postMessage: post }, configurable: true });
+    act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'ready' } })); });
+    post.mockClear();
+    vi.useFakeTimers();
+    rerender(<PreviewFrame code="A.b" css="" stickyOffset={0} svgMode />);
+    act(() => { vi.runAllTimers(); });
+    vi.useRealTimers();
+    expect(post).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'render', options: expect.objectContaining({ renderMode: 'svg' }) }),
+      '*',
+    );
+  });
 });
diff --git a/web/src/preview/PreviewFrame.tsx b/web/src/preview/PreviewFrame.tsx
index 84bf9ceb..f3d2c60f 100644
--- a/web/src/preview/PreviewFrame.tsx
+++ b/web/src/preview/PreviewFrame.tsx
@@ -30,13 +30,21 @@ export interface PreviewFrameProps {
    * Has no effect in embed mode (embed sizing stays byte-identical). Default false.
    */
   fit?: boolean;
+  /**
+   * Render the native vector SVG instead of the HTML diagram. Used on mobile, where
+   * @zenuml/core's fixed-px HTML layout overflows the narrow viewport with no reflow.
+   * The SVG carries a viewBox and is sized fit-to-width inside the iframe, so the full
+   * diagram width is visible by default (tall diagrams scroll vertically; vector stays
+   * crisp at any zoom). Forwarded to the iframe as `renderMode: 'svg'`. Default false.
+   */
+  svgMode?: boolean;
   onCodeChange?: (code: string) => void;
   onConsole?: (entry: { level: string; args: string[] }) => void;
   onError?: (message: string) => void;
 }
 
 export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(function PreviewFrame(
-  { code, css, stickyOffset, autoPreview = true, embed, fit = false, onCodeChange, onConsole, onError },
+  { code, css, stickyOffset, autoPreview = true, embed, fit = false, svgMode = false, onCodeChange, onConsole, onError },
   ref,
 ) {
   // Self-determine embed from the runtime mode (same source AppRoot reads) so the
@@ -64,6 +72,7 @@ export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(functio
   const codeRef = useRef(code); codeRef.current = code;
   const cssRef = useRef(css); cssRef.current = css;
   const stickyRef = useRef(stickyOffset); stickyRef.current = stickyOffset;
+  const svgModeRef = useRef(svgMode); svgModeRef.current = svgMode;
   const cbRef = useRef({ onCodeChange, onConsole, onError });
   cbRef.current = { onCodeChange, onConsole, onError };
   // Build srcdoc ONCE with an EMPTY style; css is pushed via updateCss after
@@ -72,7 +81,12 @@ export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(functio
   // no chrome flash on first paint.
   const srcdoc = useMemo(() => getCompleteHtml({ embed: embedMode }), [embedMode]);
 
-  const renderOptions = (): RenderOptions => ({ enableMultiTheme: false, theme: 'theme-default', stickyOffset: stickyRef.current });
+  const renderOptions = (): RenderOptions => ({
+    enableMultiTheme: false,
+    theme: 'theme-default',
+    stickyOffset: stickyRef.current,
+    renderMode: svgModeRef.current ? 'svg' : 'html',
+  });
 
   const post = (msg: unknown) => iframeRef.current?.contentWindow?.postMessage(msg, '*');
 
@@ -123,7 +137,7 @@ export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(functio
     const t = setTimeout(() => post({ type: 'render', code: codeRef.current, options: renderOptions() }), PREVIEW_DEBOUNCE);
     return () => clearTimeout(t);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [code, stickyOffset, autoPreview]);
+  }, [code, stickyOffset, autoPreview, svgMode]);
 
   // CSS-only fast path (REQ-PRV-5): once ready, push CSS via postMessage on css
   // changes instead of rebuilding/reloading the iframe.
diff --git a/web/src/preview/previewBootstrap.runtime.js b/web/src/preview/previewBootstrap.runtime.js
index e5a18aa7..0c701df8 100644
--- a/web/src/preview/previewBootstrap.runtime.js
+++ b/web/src/preview/previewBootstrap.runtime.js
@@ -51,6 +51,46 @@
     }
   }
 
+  // ---- SVG render mode (mobile) ------------------------------------------------
+  // On mobile the HTML diagram (fixed-px React layout) overflows the narrow viewport.
+  // renderMode:'svg' renders @zenuml/core's NATIVE vector SVG (window.zenuml.renderToSvg)
+  // into a SEPARATE container (#svg-mount) — never the app's React root (#mounting-point),
+  // which must stay React-owned so a later switch back to HTML mode re-renders cleanly.
+  // The injected <svg> is sized fit-to-width (width:100% + height:auto on its viewBox) so
+  // the full diagram width shows by default; tall diagrams scroll vertically, and vector
+  // output stays crisp at any zoom.
+  function showSvgMount(svgString) {
+    var diagram = document.getElementById('diagram');
+    var mount = document.getElementById('mounting-point');
+    if (!diagram) return;
+    var svgMount = document.getElementById('svg-mount');
+    if (!svgMount) {
+      svgMount = document.createElement('div');
+      svgMount.id = 'svg-mount';
+      diagram.appendChild(svgMount);
+    }
+    svgMount.innerHTML = svgString || '';
+    var svgEl = svgMount.querySelector('svg');
+    if (svgEl) {
+      // Drop the intrinsic width/height attributes so the viewBox drives the aspect
+      // ratio and the style fit-to-width takes effect.
+      svgEl.removeAttribute('width');
+      svgEl.removeAttribute('height');
+      svgEl.style.width = '100%';
+      svgEl.style.maxWidth = '100%';
+      svgEl.style.height = 'auto';
+      svgEl.style.display = 'block';
+    }
+    svgMount.style.display = 'block';
+    if (mount) mount.style.display = 'none';
+  }
+  function showHtmlMount() {
+    var mount = document.getElementById('mounting-point');
+    var svgMount = document.getElementById('svg-mount');
+    if (mount) mount.style.display = '';
+    if (svgMount) svgMount.style.display = 'none';
+  }
+
   ['log', 'info', 'warn', 'error', 'debug'].forEach(function (level) {
     var orig = console[level];
     console[level] = function () {
@@ -84,12 +124,23 @@
     if (msg.type === 'render' && app) {
       (async function () {
         try {
-          await app.render(msg.code, {
-            enableMultiTheme: false,
-            theme: 'theme-default',
-            onContentChange: function (code) { post({ type: 'codeChange', code: code }); },
-            stickyOffset: Number((msg.options && msg.options.stickyOffset) || 0)
-          });
+          var renderMode = (msg.options && msg.options.renderMode) || 'html';
+          if (renderMode === 'svg' && window.zenuml && typeof window.zenuml.renderToSvg === 'function') {
+            // Native vector SVG (mobile). Pure render — no React commit, no
+            // onContentChange (the editor pane stays the source of truth on mobile).
+            var result = window.zenuml.renderToSvg(msg.code, { theme: 'theme-default' });
+            showSvgMount(result && result.svg);
+          } else {
+            // HTML diagram (desktop / default). Unhide the React mount in case we are
+            // switching back from SVG mode, then render as before.
+            showHtmlMount();
+            await app.render(msg.code, {
+              enableMultiTheme: false,
+              theme: 'theme-default',
+              onContentChange: function (code) { post({ type: 'codeChange', code: code }); },
+              stickyOffset: Number((msg.options && msg.options.stickyOffset) || 0)
+            });
+          }
           post({ type: 'rendered' });
           // Report the diagram's natural content size (width × height) in ALL modes
           // (embed shrink-wraps the iframe card; present/fit scales+centers; editor
diff --git a/web/src/preview/previewBootstrap.test.ts b/web/src/preview/previewBootstrap.test.ts
index 235f9c90..c30ac8d4 100644
--- a/web/src/preview/previewBootstrap.test.ts
+++ b/web/src/preview/previewBootstrap.test.ts
@@ -27,4 +27,14 @@ describe('previewBootstrap.runtime.js', () => {
     expect(BOOTSTRAP).toContain("'evalConsole'");
     expect(BOOTSTRAP).toContain("type: 'codeChange'");
   });
+  // Mobile SVG mode: when options.renderMode === 'svg', render the native vector SVG
+  // (window.zenuml.renderToSvg) instead of the HTML diagram, sized fit-to-width so the
+  // full diagram shows by default.
+  it('renders the native SVG (renderToSvg) fit-to-width when renderMode is svg', () => {
+    expect(BOOTSTRAP).toContain('renderToSvg');
+    expect(BOOTSTRAP).toContain('renderMode');
+    expect(BOOTSTRAP).toContain("'svg'");
+    // fit-to-width: width 100% + height auto on the injected <svg>.
+    expect(BOOTSTRAP).toContain("'100%'");
+  });
 });
diff --git a/web/src/preview/previewProtocol.ts b/web/src/preview/previewProtocol.ts
index 028e8f5f..0b47cb43 100644
--- a/web/src/preview/previewProtocol.ts
+++ b/web/src/preview/previewProtocol.ts
@@ -4,6 +4,10 @@ export interface RenderOptions {
   enableMultiTheme: false;
   theme: 'theme-default';
   stickyOffset: number; // from the host router search params — NOT window.location inside the iframe
+  // Renderer selection. 'html' (default) = @zenuml/core's interactive React diagram.
+  // 'svg' = the native vector SVG (renderToSvg), used on mobile where the fixed-px HTML
+  // layout overflows the narrow viewport; the SVG fits-to-width and shows the full diagram.
+  renderMode?: 'html' | 'svg';
 }
 
 // host → iframe

From 6f9cd2782ba8eee0b92c9f04c50a6f817d647b23 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 15:04:23 +1000
Subject: [PATCH 19/33] =?UTF-8?q?fix(web/pages):=20reconcile=20the=20top-l?=
 =?UTF-8?q?evel=20js/css=20mirror=20to=20currentPageId=20on=20load=20?=
 =?UTF-8?q?=E2=80=94=20migrateToPages=20trusted=20a=20stale=20persisted=20?=
 =?UTF-8?q?mirror,=20so=20a=20multi-page=20item=20whose=20item.js=20was=20?=
 =?UTF-8?q?out=20of=20sync=20with=20currentPageId=20rendered=20the=20wrong?=
 =?UTF-8?q?=20page=20(page=202=20showed=20page=201);=20pages[]=20is=20the?=
 =?UTF-8?q?=20source=20of=20truth,=20so=20re-derive=20js/css=20from=20the?=
 =?UTF-8?q?=20current=20page=20(fallback=20to=20first=20page=20if=20curren?=
 =?UTF-8?q?tPageId=20is=20invalid)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/domain/item.test.ts | 40 +++++++++++++++++++++++++++++++++++--
 web/src/domain/item.ts      | 11 +++++++++-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/web/src/domain/item.test.ts b/web/src/domain/item.test.ts
index 2a68a1ba..9e95bed8 100644
--- a/web/src/domain/item.test.ts
+++ b/web/src/domain/item.test.ts
@@ -15,10 +15,46 @@ describe('migrateToPages', () => {
     expect(m.pages[0]).toMatchObject({ title: 'Page 1', js: 'A.b', css: '.x{}', isDefault: true });
     expect(m.currentPageId).toBe(m.pages[0].id);
   });
-  it('is a no-op when pages already exist', () => {
-    const item = base({ pages: [{ id: 'p1', title: 'P', js: 'x', css: '', isDefault: true }], currentPageId: 'p1' });
+  it('leaves the pages array untouched when pages already exist (consistent mirror)', () => {
+    const item = base({
+      js: 'x', css: '',
+      pages: [{ id: 'p1', title: 'P', js: 'x', css: '', isDefault: true }],
+      currentPageId: 'p1',
+    });
     expect(migrateToPages(item)).toEqual(item);
   });
+  // REGRESSION (page 2 showing page 1): pages[] are the source of truth (REQ-DM-1);
+  // a persisted/legacy item may carry a STALE top-level js/css mirror. Loading must
+  // re-derive js/css from currentPageId so the editor and preview (both read item.js)
+  // can never render a different page than the active tab.
+  it('reconciles a STALE top-level js/css mirror to the current page', () => {
+    const item = base({
+      js: 'PAGE_ONE', css: '.one{}',                 // stale mirror = page 1
+      pages: [
+        { id: 'p1', title: 'Page 1', js: 'PAGE_ONE', css: '.one{}', isDefault: true },
+        { id: 'p2', title: 'Page 2', js: 'PAGE_TWO', css: '.two{}' },
+      ],
+      currentPageId: 'p2',                            // active page = 2
+    });
+    const m = migrateToPages(item);
+    expect(m.js).toBe('PAGE_TWO');
+    expect(m.css).toBe('.two{}');
+    expect(m.currentPageId).toBe('p2');
+    expect(m.pages).toHaveLength(2);                  // pages array untouched
+  });
+  it('falls back to the first page when currentPageId is missing/invalid', () => {
+    const item = base({
+      js: 'STALE', css: '',
+      pages: [
+        { id: 'p1', title: 'Page 1', js: 'FIRST', css: '', isDefault: true },
+        { id: 'p2', title: 'Page 2', js: 'SECOND', css: '' },
+      ],
+      currentPageId: 'does-not-exist',
+    });
+    const m = migrateToPages(item);
+    expect(m.currentPageId).toBe('p1');
+    expect(m.js).toBe('FIRST');
+  });
 });
 
 describe('applyPageEdit dual-write', () => {
diff --git a/web/src/domain/item.ts b/web/src/domain/item.ts
index 2bc8b805..ad11327d 100644
--- a/web/src/domain/item.ts
+++ b/web/src/domain/item.ts
@@ -12,7 +12,16 @@ function genId(prefix = 'p'): string {
 }
 
 export function migrateToPages(item: Item): Item {
-  if (Array.isArray(item.pages) && item.pages.length > 0) return item;
+  if (Array.isArray(item.pages) && item.pages.length > 0) {
+    // Pages are the source of truth (REQ-DM-1); the top-level js/css are only a mirror
+    // of the CURRENT page. A persisted/legacy item may carry a STALE mirror (saved out
+    // of sync, or currentPageId pointing at a page whose content differs). Re-derive the
+    // mirror from currentPageId on load — otherwise the editor + preview (both read
+    // item.js) render a different page than the active tab ("page 2 shows page 1").
+    // Fall back to the first page when currentPageId is missing/invalid.
+    const current = item.pages.find((p) => p.id === item.currentPageId) ?? item.pages[0];
+    return { ...item, currentPageId: current.id, js: current.js, css: current.css };
+  }
   const page: Page = { id: genId(), title: 'Page 1', js: item.js ?? '', css: item.css ?? '', isDefault: true };
   return { ...item, pages: [page], currentPageId: page.id };
 }

From 6f626044756c80b3845bd3a2a117c48d8cc0efa4 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 16:04:33 +1000
Subject: [PATCH 20/33] =?UTF-8?q?fix(web/preview):=20acknowledged=20render?=
 =?UTF-8?q?=20delivery=20so=20the=20preview=20re-renders=20on=20Safari/Web?=
 =?UTF-8?q?Kit=20=E2=80=94=20WebKit=20silently=20drops=20a=20single=20fire?=
 =?UTF-8?q?-and-forget=20render=20postMessage=20to=20the=20srcdoc=20iframe?=
 =?UTF-8?q?=20under=20prod-build=20timing,=20so=20live=20edits=20+=20page?=
 =?UTF-8?q?=20switches=20never=20updated=20the=20diagram=20(page=202=20sho?=
 =?UTF-8?q?wed=20page=201);=20each=20render=20now=20carries=20a=20token=20?=
 =?UTF-8?q?the=20iframe=20echoes=20in=20'rendered',=20and=20PreviewFrame?=
 =?UTF-8?q?=20re-posts=20unacked=20renders=20(Chromium=20acks=20first=20tr?=
 =?UTF-8?q?y)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/preview/PreviewFrame.test.tsx       | 58 +++++++++++++++++++++
 web/src/preview/PreviewFrame.tsx            | 46 ++++++++++++++--
 web/src/preview/previewBootstrap.runtime.js |  4 +-
 web/src/preview/previewProtocol.ts          | 10 +++-
 4 files changed, 112 insertions(+), 6 deletions(-)

diff --git a/web/src/preview/PreviewFrame.test.tsx b/web/src/preview/PreviewFrame.test.tsx
index 5df8e12b..ba663df6 100644
--- a/web/src/preview/PreviewFrame.test.tsx
+++ b/web/src/preview/PreviewFrame.test.tsx
@@ -271,6 +271,64 @@ describe('PreviewFrame', () => {
     );
   });
 
+  // ---- Acknowledged render delivery (WebKit dropped-postMessage fix) ----
+  // WebKit/Safari silently drops a single fire-and-forget render postMessage to the
+  // srcdoc iframe under tight prod timing, so the preview never re-renders after first
+  // paint. Each render carries a token; the iframe echoes it in `rendered`; an unacked
+  // render is re-posted.
+  it('render messages carry a token', () => {
+    const { container } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} />);
+    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+    const post = vi.fn();
+    Object.defineProperty(iframe, 'contentWindow', { value: { postMessage: post }, configurable: true });
+    act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'ready' } })); });
+    expect(post).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'render', token: expect.any(Number) }),
+      '*',
+    );
+  });
+
+  it('re-posts the render when no "rendered" ack arrives (dropped-message resilience)', () => {
+    vi.useFakeTimers();
+    try {
+      const { container } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} />);
+      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+      const post = vi.fn();
+      Object.defineProperty(iframe, 'contentWindow', { value: { postMessage: post }, configurable: true });
+      act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'ready' } })); });
+      // The first render was posted with a token; capture it.
+      const firstRender = post.mock.calls.find((c) => (c[0] as { type: string }).type === 'render')![0] as { token: number };
+      post.mockClear();
+      // No ack within the ack window → the same token is re-posted.
+      act(() => { vi.advanceTimersByTime(300); });
+      expect(post).toHaveBeenCalledWith(
+        expect.objectContaining({ type: 'render', token: firstRender.token }),
+        '*',
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('stops retrying once a matching "rendered" ack arrives', () => {
+    vi.useFakeTimers();
+    try {
+      const { container } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} />);
+      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+      const post = vi.fn();
+      Object.defineProperty(iframe, 'contentWindow', { value: { postMessage: post }, configurable: true });
+      act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'ready' } })); });
+      const firstRender = post.mock.calls.find((c) => (c[0] as { type: string }).type === 'render')![0] as { token: number };
+      // Iframe acks the render → no further re-posts.
+      act(() => { window.dispatchEvent(new MessageEvent('message', { source: iframe.contentWindow, data: { type: 'rendered', token: firstRender.token } })); });
+      post.mockClear();
+      act(() => { vi.advanceTimersByTime(2000); });
+      expect(post).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'render' }), '*');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it('re-renders with svg mode when svgMode flips on after ready (e.g. rotate to a narrow viewport)', () => {
     const { container, rerender } = render(<PreviewFrame code="A.b" css="" stickyOffset={0} svgMode={false} />);
     const iframe = container.querySelector('iframe') as HTMLIFrameElement;
diff --git a/web/src/preview/PreviewFrame.tsx b/web/src/preview/PreviewFrame.tsx
index f3d2c60f..b175e569 100644
--- a/web/src/preview/PreviewFrame.tsx
+++ b/web/src/preview/PreviewFrame.tsx
@@ -90,6 +90,35 @@ export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(functio
 
   const post = (msg: unknown) => iframeRef.current?.contentWindow?.postMessage(msg, '*');
 
+  // Acknowledged render delivery (WebKit fix). A single fire-and-forget render
+  // postMessage to the srcdoc iframe is silently dropped by WebKit/Safari under tight
+  // prod-build timing, leaving the preview stale (it never re-renders after first paint).
+  // So each render carries a token; the iframe echoes it in `rendered`; if the ack does
+  // not arrive within RENDER_ACK_MS we re-post (up to RENDER_MAX_RETRIES). Idempotent —
+  // a duplicate render that did land just re-renders the same code. Chromium acks on the
+  // first try, so the retry path is WebKit-only in practice.
+  const RENDER_ACK_MS = 250;
+  const RENDER_MAX_RETRIES = 4;
+  const renderSeq = useRef(0);
+  const pendingRender = useRef<{ token: number; code: string; tries: number } | null>(null);
+  const ackTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const armAck = () => {
+    if (ackTimer.current) clearTimeout(ackTimer.current);
+    ackTimer.current = setTimeout(() => {
+      const p = pendingRender.current;
+      if (!p || p.tries >= RENDER_MAX_RETRIES) { pendingRender.current = null; return; }
+      p.tries += 1;
+      post({ type: 'render', code: p.code, options: renderOptions(), token: p.token });
+      armAck();
+    }, RENDER_ACK_MS);
+  };
+  const postRender = (code: string) => {
+    const token = ++renderSeq.current;
+    pendingRender.current = { token, code, tries: 0 };
+    post({ type: 'render', code, options: renderOptions(), token });
+    armAck();
+  };
+
   useEffect(() => {
     function onMessage(e: MessageEvent) {
       if (e.source !== iframeRef.current?.contentWindow) return;
@@ -98,12 +127,20 @@ export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(functio
       switch (msg.type) {
         case 'ready':
           readyRef.current = true;
-          post({ type: 'render', code: codeRef.current, options: renderOptions() });
+          postRender(codeRef.current);
           // Push the LATEST css on ready so css that resolved before the heavy
           // @zenuml bundle fired `ready` (e.g. async-transpiled SCSS/LESS) is not
           // dropped — the empty initial <style> would otherwise stay empty.
           post({ type: 'updateCss', css: cssRef.current });
           break;
+        case 'rendered':
+          // Ack for acknowledged render delivery: the iframe applied this token's render,
+          // so stop retrying it (only when it matches the latest in-flight render).
+          if (pendingRender.current && msg.token === pendingRender.current.token) {
+            pendingRender.current = null;
+            if (ackTimer.current) clearTimeout(ackTimer.current);
+          }
+          break;
         case 'codeChange': cbRef.current.onCodeChange?.(msg.code); break;
         case 'console': cbRef.current.onConsole?.({ level: msg.level, args: msg.args }); break;
         case 'error': cbRef.current.onError?.(msg.message); break;
@@ -127,14 +164,17 @@ export const PreviewFrame = forwardRef<PreviewHandle, PreviewFrameProps>(functio
       }
     }
     window.addEventListener('message', onMessage);
-    return () => window.removeEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+      if (ackTimer.current) clearTimeout(ackTimer.current);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Debounced re-render on DSL change (only once ready + autoPreview on).
   useEffect(() => {
     if (!readyRef.current || !autoPreview) return;
-    const t = setTimeout(() => post({ type: 'render', code: codeRef.current, options: renderOptions() }), PREVIEW_DEBOUNCE);
+    const t = setTimeout(() => postRender(codeRef.current), PREVIEW_DEBOUNCE);
     return () => clearTimeout(t);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [code, stickyOffset, autoPreview, svgMode]);
diff --git a/web/src/preview/previewBootstrap.runtime.js b/web/src/preview/previewBootstrap.runtime.js
index 0c701df8..44e6fb7f 100644
--- a/web/src/preview/previewBootstrap.runtime.js
+++ b/web/src/preview/previewBootstrap.runtime.js
@@ -141,7 +141,9 @@
               stickyOffset: Number((msg.options && msg.options.stickyOffset) || 0)
             });
           }
-          post({ type: 'rendered' });
+          // Echo the token so the host can confirm THIS render landed (ack+retry for
+          // WebKit's dropped-postMessage race). undefined when the host sent no token.
+          post({ type: 'rendered', token: msg.token });
           // Report the diagram's natural content size (width × height) in ALL modes
           // (embed shrink-wraps the iframe card; present/fit scales+centers; editor
           // stores-but-ignores). Measure now AND re-measure once @zenuml's async layout
diff --git a/web/src/preview/previewProtocol.ts b/web/src/preview/previewProtocol.ts
index 0b47cb43..728e07b8 100644
--- a/web/src/preview/previewProtocol.ts
+++ b/web/src/preview/previewProtocol.ts
@@ -12,7 +12,12 @@ export interface RenderOptions {
 
 // host → iframe
 export type HostMessage =
-  | { type: 'render'; code: string; options: RenderOptions }
+  // `token` (optional) enables acknowledged delivery: the iframe echoes it back in
+  // `rendered` so the host can detect a dropped render and re-post. WebKit/Safari can
+  // silently drop a single fire-and-forget render postMessage to a srcdoc iframe under
+  // tight timing (prod build), leaving the preview stale — the ack+retry makes delivery
+  // reliable across engines. Optional so existing tests/callers still type-check.
+  | { type: 'render'; code: string; options: RenderOptions; token?: number }
   | { type: 'updateCss'; css: string }
   | { type: 'getPng'; id: number }
   | { type: 'evalConsole'; id: number; expr: string };
@@ -20,7 +25,8 @@ export type HostMessage =
 // iframe → host
 export type FrameMessage =
   | { type: 'ready' }
-  | { type: 'rendered' }
+  // `token` echoes the render message's token (acknowledged delivery — see HostMessage).
+  | { type: 'rendered'; token?: number }
   | { type: 'codeChange'; code: string }
   | { type: 'png'; id: number; dataUrl: string | null }
   | { type: 'console'; level: string; args: string[] }

From 575147956a7329c6ac532cb1831af4e2724a4801 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 17:50:50 +1000
Subject: [PATCH 21/33] =?UTF-8?q?fix(web/pricing):=20anonymous=20Upgrade?=
 =?UTF-8?q?=20opens=20sign-in=20then=20resumes=20Paddle=20checkout=20?=
 =?UTF-8?q?=E2=80=94=20handleUpgrade=20silently=20closed=20the=20modal=20f?=
 =?UTF-8?q?or=20signed-out=20users=20(never=20opened=20sign-in,=20never=20?=
 =?UTF-8?q?reached=20Paddle);=20now=20it=20captures=20the=20chosen=20plan,?=
 =?UTF-8?q?=20opens=20the=20login=20dialog,=20and=20fires=20openCheckout?=
 =?UTF-8?q?=20for=20that=20plan=20on=20auth=20success?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/AppRoot.test.tsx | 48 ++++++++++++++++++++++++++++++++++++
 web/src/app/AppRoot.tsx      | 30 +++++++++++++++++++---
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/web/src/app/AppRoot.test.tsx b/web/src/app/AppRoot.test.tsx
index 8ba624d0..a9c73318 100644
--- a/web/src/app/AppRoot.test.tsx
+++ b/web/src/app/AppRoot.test.tsx
@@ -1369,3 +1369,51 @@ describe('AppRoot — embed mode (RM-2 / REQ-EMB-1)', () => {
     expect(await screen.findByTestId('embed-empty')).toBeInTheDocument();
   });
 });
+
+describe('AppRoot — pricing upgrade → Paddle checkout', () => {
+  async function openPricing() {
+    const { useUiStore } = await import('../state/uiStore');
+    await act(async () => { useUiStore.getState().openModal('pricing'); });
+    return screen.findByTestId('pricing-modal');
+  }
+
+  // Signed-in: Upgrade opens Paddle checkout for the chosen plan (regression guard).
+  it('signed-in user clicking Upgrade opens Paddle checkout for the chosen plan', async () => {
+    render(<AppRoot />);
+    await screen.findByTestId('header-title');
+    await act(async () => {
+      useAuthStore.setState({ user: { uid: 'u1', email: 'e@x.com', displayName: 'U', photoURL: null }, authReady: true, online: true });
+    });
+    await openPricing();
+    await act(async () => { await userEvent.click(screen.getByTestId('pricing-upgrade-plus')); });
+    expect(paddle.openCheckout).toHaveBeenCalledWith(
+      expect.objectContaining({ planType: 'plus-monthly', userId: 'u1' }),
+    );
+  });
+
+  // Anonymous: Upgrade must NOT silently close — it opens sign-in and defers checkout.
+  it('anonymous user clicking Upgrade opens sign-in (not a silent close) and defers checkout', async () => {
+    const { useUiStore } = await import('../state/uiStore');
+    render(<AppRoot />); // signed-out by default
+    await screen.findByTestId('header-title');
+    await openPricing();
+    await act(async () => { await userEvent.click(screen.getByTestId('pricing-upgrade-plus')); });
+    expect(useUiStore.getState().loginModalOpen).toBe(true);
+    expect(paddle.openCheckout).not.toHaveBeenCalled();
+  });
+
+  // Anonymous → after sign-in, the deferred Paddle checkout fires for the chosen plan.
+  it('resumes the deferred Paddle checkout once the anonymous user signs in', async () => {
+    render(<AppRoot />);
+    await screen.findByTestId('header-title');
+    await openPricing();
+    await act(async () => { await userEvent.click(screen.getByTestId('pricing-upgrade-plus')); });
+    expect(paddle.openCheckout).not.toHaveBeenCalled();
+    await act(async () => {
+      useAuthStore.setState({ user: { uid: 'u2', email: 'z@x.com', displayName: 'Z', photoURL: null }, authReady: true, online: true });
+    });
+    await waitFor(() => expect(paddle.openCheckout).toHaveBeenCalledWith(
+      expect.objectContaining({ planType: 'plus-monthly', userId: 'u2' }),
+    ));
+  });
+});
diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 272dd88d..9af86b9d 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -162,6 +162,22 @@ export function AppRoot() {
   const { openCheckout } = usePaddle();
   const paymentEnabled = appConfig.features.payment;
 
+  // Anonymous upgrade → sign-in → resume checkout. Paddle checkout needs an account
+  // (the webhook links the subscription by userId), so an anonymous Upgrade click can't
+  // go straight to Paddle. handleUpgrade stashes the chosen plan here and opens sign-in;
+  // once the user authenticates we fire the deferred checkout for that plan. Previously
+  // the anonymous branch just closed the modal silently — the Upgrade buttons appeared
+  // dead (never reached Paddle).
+  const pendingCheckoutRef = useRef<CheckoutPlanType | null>(null);
+  useEffect(() => {
+    if (user && pendingCheckoutRef.current) {
+      const plan = pendingCheckoutRef.current;
+      pendingCheckoutRef.current = null;
+      openCheckout({ planType: plan, email: user.email ?? undefined, userId: user.uid, onSuccess: () => reloadSubscription() });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user]);
+
   // M04: settings live-apply via settingsStore.merge; persist split (syncStore + cloud).
   const settings = useSettingsStore((s) => s.settings);
   const mergeSettings = useSettingsStore((s) => s.merge);
@@ -631,11 +647,19 @@ export function AppRoot() {
   // first (close pricing; the header login affordance is the entry). Guarded by the
   // payment feature flag at the call site (pricing isn't reachable when off).
   function handleUpgrade(plan: PlanType) {
-    const currentUser = useAuthStore.getState().user;
-    if (!currentUser) { closeModal(); return; }
     if (plan === 'free' || plan === 'enterprise') return;
+    const checkoutPlan = plan as CheckoutPlanType;
+    const currentUser = useAuthStore.getState().user;
+    if (!currentUser) {
+      // Defer to sign-in: capture the plan, close pricing, open the login dialog. The
+      // null→user effect above resumes the Paddle checkout once authenticated.
+      pendingCheckoutRef.current = checkoutPlan;
+      closeModal();
+      setLoginModalOpen(true);
+      return;
+    }
     openCheckout({
-      planType: plan as CheckoutPlanType,
+      planType: checkoutPlan,
       email: currentUser.email ?? undefined,
       userId: currentUser.uid,
       onSuccess: () => reloadSubscription(),

From 8ea9591eebd4528139e38c9c8a453cbcfe4ab938 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:19:17 +1000
Subject: [PATCH 22/33] docs(web): design spec for prominent Report-a-bug entry
 point + Storybook bootstrap

---
 .../specs/2026-06-14-report-a-bug-design.md   | 219 ++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-14-report-a-bug-design.md

diff --git a/docs/superpowers/specs/2026-06-14-report-a-bug-design.md b/docs/superpowers/specs/2026-06-14-report-a-bug-design.md
new file mode 100644
index 00000000..79aca999
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-14-report-a-bug-design.md
@@ -0,0 +1,219 @@
+# Report a Bug — prefilled GitHub issue (+ Storybook bootstrap)
+
+**Date:** 2026-06-14
+**Branch:** `rewrite/web-foundation`
+**Status:** Design — pending implementation plan
+
+## Summary
+
+The web/ rewrite is a full redesign. New UI means new rough edges, and the only
+current path to report anything is buried three clicks deep (App menu → Help →
+"Contact us" / GitHub link). This adds a **prominent, persistent "Report a bug"
+entry point** that produces an **actionable, prefilled GitHub issue** — zero new
+backend, structured context auto-attached.
+
+It also **bootstraps Storybook** in the rewrite (none exists today), with the
+Report-a-bug components as its first inhabitants, establishing the pattern for the
+rest of the rewrite's UI primitives.
+
+## Goal & success criteria
+
+- A user who hits a bug can report it in **≤2 clicks** from any screen.
+- The resulting GitHub issue contains enough context (description + app version +
+  browser/OS + view + optional DSL) to **reproduce without a back-and-forth**.
+- No proprietary diagram leaks **without informed consent** (public-issue warning).
+- Storybook runs in `web/` (`pnpm storybook`) showing the new components' states
+  against the real Drafting Table tokens + dark ink surface.
+
+## Context & constraints
+
+- **Stack:** React 19 + Vite 8 + Tailwind 3 + Vitest/Testing Library. UI built
+  from `web/src/ui/*` primitives (Drafting Table design system: semantic tokens,
+  dark "ink" surfaces for chrome/modals, "paper" for the canvas).
+- **Backend is frozen** — no new Firebase cloud functions. This rules out a
+  server-side report sink and is *why* we use a client-only GitHub-prefill flow.
+- **Audience is developers**; the repo is public and already linked in Help
+  (`github.com/ZenUml/web-sequence`), so GitHub issues are a natural, zero-infra
+  destination.
+- **Global stylesheet:** `web/src/styles/globals.css` (imported in `main.tsx`).
+- **No Storybook today:** no `.storybook/`, no `*.stories.*`, no SB deps. Vite 8
+  needs **Storybook 9.x** (SB 8 topped out at Vite 6; Vite 8 / Rolldown support
+  landed and shipped — storybook#33789, closed "Done", Feb 2026).
+
+## Decisions (from brainstorming)
+
+| Question | Decision |
+|---|---|
+| Purpose | **Bug reports for the redesign rollout** — optimized for actionable, context-rich reports. |
+| Destination | **Prefilled GitHub issue** (client-only; no backend). |
+| Include diagram DSL? | **Yes, via an opt-in checkbox defaulted ON**, clearly labeled "will be public." |
+| Placement | **Floating button, bottom-right** (keeps the header's three-verb group pure). |
+| Storybook | **Bootstrap Storybook 9 in this feature**; ship the first stories here. |
+
+Reversible calls made by the author (not separately confirmed; cheap to change):
+- **FAB is app-wide** (editor + hub), so breakage on any screen is reportable.
+  DSL capture is only offered when there is editor content.
+- **Fallback links to the existing Contact us page** (`zenuml.com/docs/about/contact-us`),
+  not a `mailto:` — there is no verified support email to hardcode.
+
+## Architecture & components
+
+All new code under `web/src/`.
+
+| File | Responsibility |
+|---|---|
+| `services/bugReport.ts` | **Pure** `buildIssueUrl(input): string`. The only piece with real logic → the most-tested. Builds title + markdown body + `labels`, URL-encodes, and enforces the length budget (truncates DSL last). No DOM, no globals — takes everything as input. |
+| `components/feedback/ReportBugButton.tsx` | The FAB — fixed bottom-right pill (🐞 "Report a bug"), built from `ui/Button` + tokens. Icon-only below `md`. Opens the modal. |
+| `components/feedback/ReportBugModal.tsx` | `Dialog`/`DialogContent` (dark ink surface) holding: description `Textarea`; DSL toggle (`ui/Switch`, default **on**, "Include my diagram code — will be public"); an "Attached:" summary listing exactly what goes in the issue; primary **Open GitHub issue** button; quiet "No GitHub account? **Contact us**" link. |
+| `app/AppRoot.tsx` (wiring) | Renders `ReportBugButton` app-wide; supplies current DSL (from the editor store), `APP_VERSION`, current view, signed-in flag, and the analytics hook. On submit: `window.open(url, '_blank', 'noopener,noreferrer')`. |
+
+**Boundaries:** the button knows nothing about GitHub; the modal collects intent;
+`buildIssueUrl` is a pure transform; AppRoot is the only place that touches the
+store/window. Each is understandable and testable in isolation.
+
+## `buildIssueUrl` contract
+
+Input:
+
+```ts
+interface BuildIssueInput {
+  description: string;       // required, non-empty (UI gates this)
+  includeDsl: boolean;
+  dsl?: string;             // current editor source; omitted when no content
+  appVersion: string;       // e.g. "2026.6.7"
+  userAgent: string;        // navigator.userAgent
+  view: 'editor' | 'hub' | string;
+  signedIn: boolean;
+}
+```
+
+Output URL:
+`https://github.com/ZenUml/web-sequence/issues/new?title=<t>&body=<b>&labels=bug`
+
+- **Title** = first non-empty line of `description`, trimmed to ~80 chars.
+- **Body** (markdown):
+
+  ```markdown
+  **Describe the bug**
+  <description>
+
+  **Environment**
+  - App version: 2026.6.7
+  - Browser: <userAgent>
+  - View: editor · Signed in: no
+
+  <details><summary>Diagram DSL</summary>
+
+  ```
+  <dsl — only when includeDsl && dsl>
+  ```
+  </details>
+  ```
+
+- **`labels=bug`** — best-effort. GitHub applies it only if the label exists on
+  the repo and is ignored otherwise (never errors). (Plan: confirm a `bug` label
+  exists; if not, either create it once or drop the param.)
+
+### Edge cases
+
+- **URL length (414 URI Too Long).** GitHub rejects oversized prefills. The
+  builder caps the encoded URL to a safe budget (~6 KB). DSL is the elastic part:
+  if it overflows, it is truncated with a `… (truncated — please paste the rest)`
+  marker so the report still goes through. Description + environment are never
+  dropped.
+- **Empty description.** UI disables Open until there is text; `buildIssueUrl` is
+  not called.
+- **No DSL available.** When `dsl` is empty/whitespace, the modal hides the DSL
+  toggle entirely and the body omits the `<details>` block.
+
+## Visibility & telemetry
+
+- FAB rendered app-wide; styled quiet (low-emphasis until hover) so it doesn't
+  fight the diagram. Not dismissable — prominence is the point.
+- Two Mixpanel events via the existing `useAnalytics`:
+  - `bug_report_opened` — modal opened.
+  - `bug_report_submitted` — `{ included_dsl: boolean, view: string }`.
+  This tells us whether the redesign-QA channel is actually used.
+
+## Storybook bootstrap
+
+First Storybook in the rewrite. Keep it minimal and token-faithful.
+
+- **Deps (devDependencies):** `storybook`, `@storybook/react-vite` (latest 9.x),
+  `@storybook/addon-a11y` (cheap, useful for a contrast-sensitive design system).
+  Pin exact versions at install; **boot `storybook dev` once** to confirm the
+  Rolldown/Vite 8 builder starts before claiming done.
+- **`web/.storybook/main.ts`:** framework `@storybook/react-vite`; stories glob
+  `../src/**/*.stories.@(ts|tsx)`; addons `[a11y]`. Inherits the project Vite
+  config (Tailwind via the existing `postcss.config.js`, so utilities + tokens
+  resolve with no extra wiring).
+- **`web/.storybook/preview.ts`:** `import '../src/styles/globals.css'` so tokens
+  load; a global decorator that wraps every story in the **dark ink surface**
+  (matching where this UI lives) with the app base font; `parameters.backgrounds`
+  offering ink (default) + paper.
+- **Scripts (`web/package.json`):**
+  - `"storybook": "storybook dev -p 6006"`
+  - `"build-storybook": "storybook build"`
+- **Risk note:** Vite 8 is new; if an addon lags, drop to core + react-vite only.
+  CI wiring for `build-storybook` is **out of scope** here (left for a follow-up)
+  — this feature only stands up local Storybook + the first stories.
+
+### Stories to ship (colocated `*.stories.tsx`, matching the test-colocation pattern)
+
+`components/feedback/ReportBugButton.stories.tsx`:
+- **Default** — desktop pill.
+- **Compact** — icon-only (mobile viewport).
+
+`components/feedback/ReportBugModal.stories.tsx` (rendered `open`):
+- **Empty** — Open disabled.
+- **Filled** — description present, Open enabled.
+- **DslIncluded** — toggle on, summary shows DSL will be attached.
+- **DslExcluded** — toggle off.
+- **NoEditorContent** — DSL toggle hidden.
+- **Anonymous** vs **SignedIn** — environment summary differs.
+
+These stories double as the visual documentation of every state.
+
+## Build sequence
+
+1. **`buildIssueUrl` + unit tests** (TDD) — pure, no UI dependency. Lock the
+   contract (encoding, DSL on/off, truncation, title derivation, label) first.
+2. **`ReportBugModal`** — wired to `buildIssueUrl`; component tests.
+3. **`ReportBugButton`** — FAB; component test.
+4. **AppRoot wiring** — store/version/analytics/`window.open`; telemetry.
+5. **Storybook bootstrap** — deps, `.storybook/`, scripts; boot once.
+6. **Stories** for both components.
+7. **E2E + screenshot** — one Playwright pass: FAB visible → open modal → fill →
+   assert the opened URL contains the description (intercept `window.open`).
+   Capture the milestone screenshot.
+
+## Testing & acceptance
+
+- **Unit** `services/bugReport.test.ts`: URL encoding; DSL included vs excluded;
+  truncation past budget keeps description + appends marker; title from first
+  line; `labels=bug` present.
+- **Component** `ReportBugModal.test.tsx`: DSL toggle defaults on; Open disabled
+  when empty; Open calls the opener with a URL containing the description; DSL
+  toggle hidden when no editor content; Contact-us link present.
+  `ReportBugButton.test.tsx`: renders, opens modal on click.
+- **E2E** (`web/e2e/`): the journey above + screenshot (per the
+  ≥1-screenshot-per-milestone convention).
+- **Storybook**: `storybook dev` boots; both stories render against ink tokens.
+
+## Out of scope (YAGNI)
+
+- Server-side report sink / triage dashboard (backend frozen).
+- Screenshot attachment (GitHub prefill is URL-only; no file upload via query).
+- Category dropdowns / separate "steps to reproduce" field (body template carries
+  light structure instead).
+- Feature-request path (this entry point is bug-only).
+- `build-storybook` in CI (follow-up).
+
+## Risks & open questions
+
+- **Vite 8 ↔ Storybook addon lag.** Mitigation: minimal addon set; core +
+  react-vite is the floor.
+- **`bug` label may not exist** on the repo → param silently ignored. Plan
+  resolves: create the label once or drop the param.
+- **URL budget tuning** — 6 KB is a conservative starting point; verify against a
+  real long-DSL case during E2E.

From 99c75be922f0cfb1637edb1f1e32bc8f1b4bea44 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:30:21 +1000
Subject: [PATCH 23/33] docs(web): implementation plan for Report-a-bug entry
 point + Storybook bootstrap

---
 .../plans/2026-06-14-report-a-bug.md          | 978 ++++++++++++++++++
 1 file changed, 978 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-14-report-a-bug.md

diff --git a/docs/superpowers/plans/2026-06-14-report-a-bug.md b/docs/superpowers/plans/2026-06-14-report-a-bug.md
new file mode 100644
index 00000000..1424a73d
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-14-report-a-bug.md
@@ -0,0 +1,978 @@
+# Report a Bug — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a prominent, persistent "Report a bug" floating button that opens an in-app modal and produces a prefilled GitHub issue with auto-captured context — and bootstrap Storybook in the `web/` rewrite with this feature's components as its first stories.
+
+**Architecture:** A pure `buildIssueUrl` helper (no DOM/globals) turns user input + context into a GitHub `issues/new?title=&body=&labels=bug` URL with a length guard. `ReportBugModal` (Drafting Table `Dialog`) collects the description + a default-ON "include my diagram code (public)" toggle and shows exactly what will be attached. `ReportBugButton` is a fixed bottom-right FAB that owns the modal. `AppRoot` renders the FAB app-wide (hub + editor returns, not embed), feeding it the current DSL, app version, view, signed-in flag, and two Mixpanel events.
+
+**Tech Stack:** React 19, TypeScript, Vite 8, Tailwind 3 (Drafting Table tokens), Vitest + Testing Library, Radix (Dialog/Switch via `web/src/ui`), Storybook (current latest major, `@storybook/react-vite`), Playwright. Package manager for `web/` is **pnpm**.
+
+**Conventions:**
+- All `pnpm` commands shown as `pnpm -C web …` (run from repo root; `-C web` sets the project dir).
+- All `git` commands run from repo root; paths are `web/…`.
+- Commit messages are one line.
+
+---
+
+## File Structure
+
+| File | Responsibility |
+|---|---|
+| `web/src/services/bugReport.ts` (create) | Pure `buildIssueUrl(input)` → GitHub URL. Body markdown + title derivation + URL length guard/truncation. No DOM, no globals. |
+| `web/src/services/bugReport.test.ts` (create) | Unit tests for the builder. |
+| `web/src/components/feedback/ReportBugModal.tsx` (create) | The modal: description field, DSL toggle (default ON), attached-summary, submit, contact-us fallback. Calls `buildIssueUrl`, opens the URL via an injectable `openUrl` (defaults to `window.open`). |
+| `web/src/components/feedback/ReportBugModal.test.tsx` (create) | Component tests. |
+| `web/src/components/feedback/ReportBugButton.tsx` (create) | Fixed bottom-right FAB; owns modal open state; fires `onOpen`/`onSubmitted`. |
+| `web/src/components/feedback/ReportBugButton.test.tsx` (create) | Component test. |
+| `web/src/app/AppRoot.tsx` (modify) | Import + render the FAB in the hub and editor returns; wire DSL/version/view/auth + telemetry. |
+| `web/.storybook/main.ts` (create) | Storybook config (framework, stories glob, a11y addon). |
+| `web/.storybook/preview.ts` (create) | Global CSS import + dark ink decorator. |
+| `web/package.json` (modify) | Add `storybook`/`build-storybook` scripts + dev deps. |
+| `web/src/components/feedback/ReportBugButton.stories.tsx` (create) | Button stories. |
+| `web/src/components/feedback/ReportBugModal.stories.tsx` (create) | Modal state stories. |
+| `web/e2e/report-bug.spec.ts` (create) | Playwright journey + screenshot. |
+
+---
+
+## Task 1: `buildIssueUrl` pure helper
+
+**Files:**
+- Create: `web/src/services/bugReport.ts`
+- Test: `web/src/services/bugReport.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `web/src/services/bugReport.test.ts`:
+
+```ts
+import { describe, it, expect } from 'vitest';
+import { buildIssueUrl, type BuildIssueInput } from './bugReport';
+
+const base: BuildIssueInput = {
+  description: 'Arrows render upside down',
+  includeDsl: false,
+  appVersion: '2026.6.7',
+  userAgent: 'Mozilla/5.0 (Test)',
+  view: 'editor',
+  signedIn: false,
+};
+
+function body(url: string): string {
+  return new URL(url).searchParams.get('body') ?? '';
+}
+function title(url: string): string {
+  return new URL(url).searchParams.get('title') ?? '';
+}
+
+describe('buildIssueUrl', () => {
+  it('targets the repo new-issue endpoint with a bug label', () => {
+    const url = buildIssueUrl(base);
+    expect(url.startsWith('https://github.com/ZenUml/web-sequence/issues/new?')).toBe(true);
+    expect(new URL(url).searchParams.get('labels')).toBe('bug');
+  });
+
+  it('puts the first non-empty line in the title', () => {
+    const url = buildIssueUrl({ ...base, description: '  \n  Arrows broken  \nmore detail' });
+    expect(title(url)).toBe('Arrows broken');
+  });
+
+  it('falls back to a generic title when description is blank', () => {
+    expect(title(buildIssueUrl({ ...base, description: '   \n  ' }))).toBe('Bug report');
+  });
+
+  it('includes environment lines and the description', () => {
+    const b = body(buildIssueUrl(base));
+    expect(b).toContain('Arrows render upside down');
+    expect(b).toContain('App version: 2026.6.7');
+    expect(b).toContain('Browser: Mozilla/5.0 (Test)');
+    expect(b).toContain('View: editor · Signed in: no');
+  });
+
+  it('omits the DSL block when includeDsl is false', () => {
+    expect(body(buildIssueUrl({ ...base, includeDsl: false, dsl: 'A -> B: x' }))).not.toContain('<details>');
+  });
+
+  it('includes the DSL block when includeDsl is true and dsl is present', () => {
+    const b = body(buildIssueUrl({ ...base, includeDsl: true, dsl: 'A -> B: hello' }));
+    expect(b).toContain('<details><summary>Diagram DSL</summary>');
+    expect(b).toContain('A -> B: hello');
+  });
+
+  it('omits the DSL block when dsl is empty even if includeDsl is true', () => {
+    expect(body(buildIssueUrl({ ...base, includeDsl: true, dsl: '   ' }))).not.toContain('<details>');
+  });
+
+  it('truncates an oversized DSL so the URL stays within budget', () => {
+    const url = buildIssueUrl({ ...base, includeDsl: true, dsl: 'X'.repeat(20000) });
+    expect(url.length).toBeLessThanOrEqual(6000);
+    const b = body(url);
+    expect(b).toContain('truncated');
+    expect(b).toContain('Arrows render upside down'); // description is never dropped
+  });
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run: `pnpm -C web test src/services/bugReport.test.ts`
+Expected: FAIL — `Failed to resolve import './bugReport'` (module does not exist yet).
+
+- [ ] **Step 3: Write the implementation**
+
+Create `web/src/services/bugReport.ts`:
+
+```ts
+// Pure builder for a prefilled GitHub "new issue" URL. No DOM, no globals — every
+// input is passed in, so this is trivially unit-tested. The caller (ReportBugModal)
+// supplies navigator.userAgent and the current editor DSL.
+
+const REPO = 'https://github.com/ZenUml/web-sequence';
+
+// Conservative cap on total URL length. GitHub returns 414 (URI Too Long) on
+// oversized issue prefills; ~8 KB is the practical ceiling, so 6 KB leaves headroom.
+const URL_BUDGET = 6000;
+
+const TRUNCATION_MARKER = '\n… (truncated — please paste the rest)';
+
+export interface BuildIssueInput {
+  description: string;
+  includeDsl: boolean;
+  dsl?: string;
+  appVersion: string;
+  userAgent: string;
+  view: string;
+  signedIn: boolean;
+}
+
+function firstLine(description: string, max = 80): string {
+  const line = description
+    .split('\n')
+    .map((l) => l.trim())
+    .find((l) => l.length > 0);
+  if (!line) return 'Bug report';
+  return line.length > max ? `${line.slice(0, max - 1).trimEnd()}…` : line;
+}
+
+function environmentBlock(input: BuildIssueInput): string {
+  return [
+    '**Describe the bug**',
+    input.description.trim(),
+    '',
+    '**Environment**',
+    `- App version: ${input.appVersion}`,
+    `- Browser: ${input.userAgent}`,
+    `- View: ${input.view} · Signed in: ${input.signedIn ? 'yes' : 'no'}`,
+  ].join('\n');
+}
+
+function dslBlock(dsl: string): string {
+  return ['', '<details><summary>Diagram DSL</summary>', '', '```', dsl, '```', '</details>'].join('\n');
+}
+
+function composeUrl(title: string, body: string): string {
+  const params = new URLSearchParams({ title, body, labels: 'bug' });
+  return `${REPO}/issues/new?${params.toString()}`;
+}
+
+// Largest prefix of `dsl` whose composed URL still fits URL_BUDGET, with the
+// truncation marker appended when the full DSL doesn't fit. Binary search keeps
+// this O(log n) and deterministic.
+function fitDsl(title: string, baseBody: string, dsl: string): string {
+  const withDsl = (d: string) => `${baseBody}${dslBlock(d)}`;
+  if (composeUrl(title, withDsl(dsl)).length <= URL_BUDGET) return withDsl(dsl);
+  let lo = 0;
+  let hi = dsl.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    const candidate = dsl.slice(0, mid) + TRUNCATION_MARKER;
+    if (composeUrl(title, withDsl(candidate)).length <= URL_BUDGET) lo = mid;
+    else hi = mid - 1;
+  }
+  return withDsl(dsl.slice(0, lo) + TRUNCATION_MARKER);
+}
+
+export function buildIssueUrl(input: BuildIssueInput): string {
+  const title = firstLine(input.description);
+  const baseBody = environmentBlock(input);
+  const dsl = input.dsl?.trim() ? input.dsl : '';
+  if (!input.includeDsl || !dsl) return composeUrl(title, baseBody);
+  return composeUrl(title, fitDsl(title, baseBody, dsl));
+}
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+Run: `pnpm -C web test src/services/bugReport.test.ts`
+Expected: PASS (8 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/services/bugReport.ts web/src/services/bugReport.test.ts
+git commit -m "feat(web/feedback): pure buildIssueUrl helper for prefilled GitHub bug reports"
+```
+
+---
+
+## Task 2: `ReportBugModal` component
+
+**Files:**
+- Create: `web/src/components/feedback/ReportBugModal.tsx`
+- Test: `web/src/components/feedback/ReportBugModal.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `web/src/components/feedback/ReportBugModal.test.tsx`:
+
+```tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReportBugModal } from './ReportBugModal';
+
+const props = {
+  open: true,
+  onOpenChange: () => {},
+  appVersion: '2026.6.7',
+  view: 'editor',
+  signedIn: false,
+};
+
+describe('ReportBugModal', () => {
+  it('does not render content when closed', () => {
+    render(<ReportBugModal {...props} open={false} dsl="A -> B: x" />);
+    expect(screen.queryByTestId('report-bug-modal')).toBeNull();
+  });
+
+  it('disables submit until a description is entered', () => {
+    render(<ReportBugModal {...props} dsl="A -> B: x" />);
+    expect(screen.getByTestId('report-bug-submit')).toBeDisabled();
+    fireEvent.change(screen.getByTestId('report-bug-description'), {
+      target: { value: 'RenderGlitch' },
+    });
+    expect(screen.getByTestId('report-bug-submit')).not.toBeDisabled();
+  });
+
+  it('defaults the DSL toggle to ON when there is editor content', () => {
+    render(<ReportBugModal {...props} dsl="A -> B: x" />);
+    expect(screen.getByTestId('report-bug-include-dsl').getAttribute('data-state')).toBe('checked');
+  });
+
+  it('hides the DSL toggle when there is no editor content', () => {
+    render(<ReportBugModal {...props} dsl="" />);
+    expect(screen.queryByTestId('report-bug-include-dsl')).toBeNull();
+  });
+
+  it('opens a GitHub URL containing the description on submit', () => {
+    const openUrl = vi.fn();
+    render(<ReportBugModal {...props} dsl="A -> B: x" openUrl={openUrl} />);
+    fireEvent.change(screen.getByTestId('report-bug-description'), {
+      target: { value: 'RenderGlitch' },
+    });
+    fireEvent.click(screen.getByTestId('report-bug-submit'));
+    expect(openUrl).toHaveBeenCalledTimes(1);
+    const url = openUrl.mock.calls[0][0] as string;
+    expect(url).toContain('github.com/ZenUml/web-sequence/issues/new');
+    expect(url).toContain('RenderGlitch');
+  });
+
+  it('offers a contact-us fallback for users without GitHub', () => {
+    render(<ReportBugModal {...props} dsl="A -> B: x" />);
+    const link = screen.getByRole('link', { name: /contact us/i });
+    expect(link.getAttribute('href')).toBe('https://zenuml.com/docs/about/contact-us');
+  });
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run: `pnpm -C web test src/components/feedback/ReportBugModal.test.tsx`
+Expected: FAIL — cannot resolve `./ReportBugModal`.
+
+- [ ] **Step 3: Write the implementation**
+
+Create `web/src/components/feedback/ReportBugModal.tsx`:
+
+```tsx
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent, Button, Textarea, Switch } from '../../ui';
+import { buildIssueUrl } from '../../services/bugReport';
+
+// Verified contact page (same URL the Help modal links to). Used as the fallback
+// for reporters without a GitHub account.
+const CONTACT_URL = 'https://zenuml.com/docs/about/contact-us';
+
+export interface ReportBugModalProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  // Current editor source. Empty/whitespace => no DSL option (hub, or empty doc).
+  dsl?: string;
+  appVersion: string;
+  view: string;
+  signedIn: boolean;
+  // Side-effect injected for testability; defaults to opening a new tab.
+  openUrl?(url: string): void;
+  onSubmitted?(meta: { includedDsl: boolean }): void;
+}
+
+export function ReportBugModal({
+  open,
+  onOpenChange,
+  dsl,
+  appVersion,
+  view,
+  signedIn,
+  openUrl = (url) => window.open(url, '_blank', 'noopener,noreferrer'),
+  onSubmitted,
+}: ReportBugModalProps) {
+  const hasDsl = !!(dsl && dsl.trim());
+  const [description, setDescription] = useState('');
+  const [includeDsl, setIncludeDsl] = useState(true);
+
+  // Reset the form whenever the modal closes so a reopen starts clean.
+  useEffect(() => {
+    if (!open) {
+      setDescription('');
+      setIncludeDsl(true);
+    }
+  }, [open]);
+
+  const canSubmit = description.trim().length > 0;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    const included = hasDsl && includeDsl;
+    const url = buildIssueUrl({
+      description,
+      includeDsl: included,
+      dsl,
+      appVersion,
+      userAgent: navigator.userAgent,
+      view,
+      signedIn,
+    });
+    openUrl(url);
+    onSubmitted?.({ includedDsl: included });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        title="Report a bug"
+        description="Opens a prefilled GitHub issue — review it before submitting."
+      >
+        <div data-testid="report-bug-modal" className="space-y-4">
+          <Textarea
+            data-testid="report-bug-description"
+            aria-label="Describe the bug"
+            placeholder="What went wrong? What did you expect to happen?"
+            rows={5}
+            className="w-full"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+
+          {hasDsl && (
+            <label className="flex items-center justify-between gap-3 text-[13px] text-ondark-muted">
+              <span>
+                Include my diagram code{' '}
+                <span className="text-ondark-faint">(will be public)</span>
+              </span>
+              <Switch
+                data-testid="report-bug-include-dsl"
+                aria-label="Include my diagram code"
+                checked={includeDsl}
+                onCheckedChange={setIncludeDsl}
+              />
+            </label>
+          )}
+
+          <div
+            data-testid="report-bug-summary"
+            className="rounded border border-ink-line/50 bg-ink-900/40 p-3 text-[12px] text-ondark-faint space-y-1"
+          >
+            <p className="font-mono uppercase tracking-[0.12em] text-[10px]">Attached</p>
+            <p>
+              App version {appVersion} · {view} · {signedIn ? 'signed in' : 'anonymous'}
+            </p>
+            <p>{hasDsl && includeDsl ? 'Your diagram code (public)' : 'No diagram code'}</p>
+          </div>
+
+          <div className="flex items-center justify-between gap-3 pt-1">
+            <a
+              className="text-[12px] text-ondark-faint hover:text-ondark-muted underline underline-offset-2 rounded ring-draft"
+              href={CONTACT_URL}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              No GitHub account? Contact us
+            </a>
+            <Button
+              variant="primary"
+              size="md"
+              data-testid="report-bug-submit"
+              disabled={!canSubmit}
+              onClick={handleSubmit}
+            >
+              Open GitHub issue
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+Run: `pnpm -C web test src/components/feedback/ReportBugModal.test.tsx`
+Expected: PASS (6 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/components/feedback/ReportBugModal.tsx web/src/components/feedback/ReportBugModal.test.tsx
+git commit -m "feat(web/feedback): ReportBugModal — description + public-DSL toggle + GitHub submit"
+```
+
+---
+
+## Task 3: `ReportBugButton` FAB
+
+**Files:**
+- Create: `web/src/components/feedback/ReportBugButton.tsx`
+- Test: `web/src/components/feedback/ReportBugButton.test.tsx`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `web/src/components/feedback/ReportBugButton.test.tsx`:
+
+```tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReportBugButton } from './ReportBugButton';
+
+const props = {
+  appVersion: '2026.6.7',
+  view: 'editor',
+  signedIn: false,
+  dsl: 'A -> B: x',
+};
+
+describe('ReportBugButton', () => {
+  it('renders a labelled FAB and no modal initially', () => {
+    render(<ReportBugButton {...props} />);
+    expect(screen.getByTestId('report-bug-fab')).toHaveAttribute('aria-label', 'Report a bug');
+    expect(screen.queryByTestId('report-bug-modal')).toBeNull();
+  });
+
+  it('opens the modal and fires onOpen when clicked', () => {
+    const onOpen = vi.fn();
+    render(<ReportBugButton {...props} onOpen={onOpen} />);
+    fireEvent.click(screen.getByTestId('report-bug-fab'));
+    expect(screen.getByTestId('report-bug-modal')).toBeTruthy();
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run: `pnpm -C web test src/components/feedback/ReportBugButton.test.tsx`
+Expected: FAIL — cannot resolve `./ReportBugButton`.
+
+- [ ] **Step 3: Write the implementation**
+
+Create `web/src/components/feedback/ReportBugButton.tsx`:
+
+```tsx
+import { useState } from 'react';
+import { Button, cn } from '../../ui';
+import { ReportBugModal } from './ReportBugModal';
+
+export interface ReportBugButtonProps {
+  dsl?: string;
+  appVersion: string;
+  view: string;
+  signedIn: boolean;
+  onOpen?(): void;
+  onSubmitted?(meta: { includedDsl: boolean }): void;
+}
+
+function BugIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M9 9V5a3 3 0 0 1 6 0v4" />
+      <rect x="8" y="9" width="8" height="10" rx="4" />
+      <path d="M3 13h5M16 13h5M4 19l4-2M20 19l-4-2M4 7l4 2M20 7l-4 2" />
+    </svg>
+  );
+}
+
+// Persistent bottom-right FAB. position:fixed, so its DOM position within the app
+// tree is irrelevant — only z-index matters (sits below the Dialog overlay z-40).
+export function ReportBugButton({
+  dsl,
+  appVersion,
+  view,
+  signedIn,
+  onOpen,
+  onSubmitted,
+}: ReportBugButtonProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button
+        variant="primary"
+        size="md"
+        data-testid="report-bug-fab"
+        aria-label="Report a bug"
+        className={cn('fixed bottom-4 right-4 z-30 shadow-pop')}
+        onClick={() => {
+          setOpen(true);
+          onOpen?.();
+        }}
+      >
+        <BugIcon />
+        <span className="hidden md:inline">Report a bug</span>
+      </Button>
+      <ReportBugModal
+        open={open}
+        onOpenChange={setOpen}
+        dsl={dsl}
+        appVersion={appVersion}
+        view={view}
+        signedIn={signedIn}
+        onSubmitted={onSubmitted}
+      />
+    </>
+  );
+}
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+Run: `pnpm -C web test src/components/feedback/ReportBugButton.test.tsx`
+Expected: PASS (2 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/components/feedback/ReportBugButton.tsx web/src/components/feedback/ReportBugButton.test.tsx
+git commit -m "feat(web/feedback): ReportBugButton fixed FAB owning the bug-report modal"
+```
+
+---
+
+## Task 4: Wire the FAB into AppRoot (hub + editor, not embed)
+
+**Files:**
+- Modify: `web/src/app/AppRoot.tsx`
+
+The FAB is rendered in two of AppRoot's three return branches: the **hub** return (`if (isHomeMode) return (…)`) and the **editor** return (the final `return (…)`). The **embed** return is intentionally left untouched.
+
+- [ ] **Step 1: Add the import**
+
+In `web/src/app/AppRoot.tsx`, add this import next to the other component imports (e.g., right after the `HomeView` import line `import { HomeView } from '../components/home/HomeView';`):
+
+```tsx
+import { ReportBugButton } from '../components/feedback/ReportBugButton';
+```
+
+- [ ] **Step 2: Render the FAB in the hub return**
+
+Find the `<HomeView` element inside the hub-mode return and insert the FAB immediately before it. Replace:
+
+```tsx
+        <HomeView
+```
+
+with:
+
+```tsx
+        <ReportBugButton
+          dsl=""
+          appVersion={APP_VERSION}
+          view="hub"
+          signedIn={!!user}
+          onOpen={() => track('bug_report_opened', { category: 'feedback', label: 'hub' })}
+          onSubmitted={({ includedDsl }) =>
+            track('bug_report_submitted', { category: 'feedback', label: 'hub', included_dsl: includedDsl })
+          }
+        />
+        <HomeView
+```
+
+- [ ] **Step 3: Render the FAB in the editor return**
+
+At the very end of the file, the editor return closes with this exact sequence:
+
+```tsx
+      </div>
+    </div>
+  );
+}
+```
+
+Replace it with:
+
+```tsx
+      </div>
+      <ReportBugButton
+        dsl={item?.js ?? ''}
+        appVersion={APP_VERSION}
+        view="editor"
+        signedIn={!!user}
+        onOpen={() => track('bug_report_opened', { category: 'feedback', label: 'editor' })}
+        onSubmitted={({ includedDsl }) =>
+          track('bug_report_submitted', { category: 'feedback', label: 'editor', included_dsl: includedDsl })
+        }
+      />
+    </div>
+  );
+}
+```
+
+(`item`, `user`, `APP_VERSION`, and `track` are all already in scope in this component — confirmed at `AppRoot.tsx` lines 93, 111, 161, and the `APP_VERSION` import.)
+
+- [ ] **Step 4: Typecheck and run the full unit suite**
+
+Run: `pnpm -C web typecheck`
+Expected: no errors.
+
+Run: `pnpm -C web test`
+Expected: PASS — all existing suites plus the three new feedback suites. (No existing AppRoot test asserts the absence of a FAB, so nothing should break. If `AppRoot.test.tsx` fails because the FAB's modal portal adds DOM, scope the failing query — but expect green.)
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/app/AppRoot.tsx
+git commit -m "feat(web/feedback): render Report-a-bug FAB app-wide (hub + editor) with telemetry"
+```
+
+---
+
+## Task 5: Bootstrap Storybook
+
+**Files:**
+- Modify: `web/package.json`
+- Create: `web/.storybook/main.ts`, `web/.storybook/preview.ts`
+
+- [ ] **Step 1: Install Storybook dev dependencies**
+
+Run (from repo root):
+
+```bash
+pnpm -C web add -D storybook@latest @storybook/react-vite@latest @storybook/addon-a11y@latest
+```
+
+Expected: three packages added to `web/package.json` devDependencies; `web/pnpm-lock.yaml` updated. (`@latest` guarantees the Vite-8-capable release; the lockfile pins the exact version. Both Storybook 9.x and 10.x support Vite 8 and use the same config shape below.)
+
+- [ ] **Step 2: Add Storybook scripts**
+
+In `web/package.json`, add these two entries to `"scripts"` (e.g., after `"preview": "vite preview",`):
+
+```json
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+```
+
+- [ ] **Step 3: Create the Storybook main config**
+
+Create `web/.storybook/main.ts`:
+
+```ts
+import type { StorybookConfig } from '@storybook/react-vite';
+
+// react-vite inherits web/vite.config.ts automatically (Tailwind via postcss,
+// path resolution, plugins), so no viteFinal override is needed for these
+// components. In SB9+, viewport/controls/actions are part of core — only a11y is
+// listed here.
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-a11y'],
+  framework: { name: '@storybook/react-vite', options: {} },
+};
+
+export default config;
+```
+
+- [ ] **Step 4: Create the Storybook preview config**
+
+Create `web/.storybook/preview.ts`:
+
+```ts
+import type { Preview } from '@storybook/react-vite';
+import { createElement, type ReactNode } from 'react';
+import '../src/styles/globals.css';
+
+// This UI lives on the dark "ink" chrome surface, so wrap every story in it and
+// load the global stylesheet so Drafting Table tokens + fonts resolve.
+const preview: Preview = {
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) =>
+      createElement(
+        'div',
+        {
+          className: 'bg-ink-900 text-ondark-strong font-sans',
+          style: { minHeight: '100vh', width: '100%', padding: '2rem' },
+        },
+        createElement(Story as () => ReactNode),
+      ),
+  ],
+};
+
+export default preview;
+```
+
+- [ ] **Step 5: Boot Storybook once to confirm the Vite 8 builder starts**
+
+Run: `pnpm -C web storybook`
+Expected: Storybook builds and serves on `http://localhost:6006` with no Vite/Rolldown builder error. (There are no stories yet — an empty sidebar is fine. Stop the server with Ctrl-C.)
+
+If the dev server fails to boot due to a missing core package, run `pnpm -C web dlx storybook@latest init --builder vite` to let Storybook reconcile its own packages, then re-apply the minimal `main.ts`/`preview.ts` above and delete any generated example stories under `web/src/stories/`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add web/package.json web/pnpm-lock.yaml web/.storybook/main.ts web/.storybook/preview.ts
+git commit -m "chore(web): bootstrap Storybook (react-vite) on the dark ink surface"
+```
+
+---
+
+## Task 6: Stories for the feedback components
+
+**Files:**
+- Create: `web/src/components/feedback/ReportBugButton.stories.tsx`
+- Create: `web/src/components/feedback/ReportBugModal.stories.tsx`
+
+- [ ] **Step 1: Write the button stories**
+
+Create `web/src/components/feedback/ReportBugButton.stories.tsx`:
+
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ReportBugButton } from './ReportBugButton';
+
+const meta: Meta<typeof ReportBugButton> = {
+  title: 'Feedback/ReportBugButton',
+  component: ReportBugButton,
+  args: {
+    appVersion: '2026.6.7',
+    view: 'editor',
+    signedIn: false,
+    dsl: 'Alice -> Bob: Hello',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ReportBugButton>;
+
+// The FAB anchors bottom-right of the canvas. Click it to open the modal.
+export const Default: Story = {};
+export const Anonymous: Story = { args: { signedIn: false } };
+export const SignedIn: Story = { args: { signedIn: true } };
+// No active diagram (hub / empty doc): the modal hides the DSL toggle.
+export const NoEditorContent: Story = { args: { dsl: '', view: 'hub' } };
+```
+
+(The FAB collapses to icon-only below the `md` breakpoint; preview that with Storybook's built-in viewport toolbar — no separate story needed.)
+
+- [ ] **Step 2: Write the modal stories**
+
+Create `web/src/components/feedback/ReportBugModal.stories.tsx`:
+
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ReportBugModal } from './ReportBugModal';
+
+const meta: Meta<typeof ReportBugModal> = {
+  title: 'Feedback/ReportBugModal',
+  component: ReportBugModal,
+  args: {
+    open: true,
+    onOpenChange: () => {},
+    // Don't actually open a tab from a story.
+    openUrl: (url: string) => console.log('[story] would open', url),
+    appVersion: '2026.6.7',
+    view: 'editor',
+    signedIn: false,
+    dsl: 'Alice -> Bob: Hello\nBob -> Alice: Hi back',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ReportBugModal>;
+
+// Submit is disabled until the user types a description.
+export const Empty: Story = {};
+// With editor content, the public-DSL toggle defaults ON.
+export const WithDsl: Story = {};
+// Anonymous vs signed-in changes the attached-summary line.
+export const Anonymous: Story = { args: { signedIn: false } };
+export const SignedIn: Story = { args: { signedIn: true } };
+// No active diagram: the DSL toggle is hidden and the summary says "No diagram code".
+export const NoEditorContent: Story = { args: { dsl: '', view: 'hub' } };
+```
+
+- [ ] **Step 3: Verify the stories render**
+
+Run: `pnpm -C web storybook`
+Expected: the sidebar shows **Feedback/ReportBugButton** (4 stories) and **Feedback/ReportBugModal** (5 stories); each renders against the dark ink background. Stop the server with Ctrl-C.
+
+- [ ] **Step 4: Confirm the unit suite is unaffected by the new files**
+
+Run: `pnpm -C web test`
+Expected: PASS (stories are not collected by Vitest; the suite is green).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/components/feedback/ReportBugButton.stories.tsx web/src/components/feedback/ReportBugModal.stories.tsx
+git commit -m "docs(web/feedback): Storybook stories for ReportBugButton + ReportBugModal states"
+```
+
+---
+
+## Task 7: E2E journey + milestone screenshot
+
+**Files:**
+- Create: `web/e2e/report-bug.spec.ts`
+
+- [ ] **Step 1: Write the E2E spec**
+
+Create `web/e2e/report-bug.spec.ts`:
+
+```ts
+import { test, expect } from '@playwright/test';
+import { seedAndOpen } from './helpers/editor';
+
+test('Report-a-bug FAB opens the modal and builds a prefilled GitHub URL', async ({ page }) => {
+  // Capture window.open instead of spawning a real tab. addInitScript must run
+  // before navigation, so register it before seedAndOpen (which calls page.goto).
+  await page.addInitScript(() => {
+    (window as unknown as { __lastOpen?: string }).__lastOpen = undefined;
+    window.open = ((url?: string | URL) => {
+      (window as unknown as { __lastOpen?: string }).__lastOpen = String(url);
+      return null;
+    }) as typeof window.open;
+  });
+
+  await seedAndOpen(page);
+
+  const fab = page.getByTestId('report-bug-fab');
+  await expect(fab).toBeVisible();
+  await fab.click();
+
+  const modal = page.getByTestId('report-bug-modal');
+  await expect(modal).toBeVisible();
+
+  // Screenshot the open modal for the milestone gallery.
+  await page.screenshot({ path: 'test-results/report-bug-modal.png' });
+
+  await page.getByTestId('report-bug-description').fill('Arrows render upside down on page 2');
+  const submit = page.getByTestId('report-bug-submit');
+  await expect(submit).toBeEnabled();
+  await submit.click();
+
+  const opened = await page.evaluate(
+    () => (window as unknown as { __lastOpen?: string }).__lastOpen,
+  );
+  expect(opened).toContain('github.com/ZenUml/web-sequence/issues/new');
+  expect(opened).toContain('Arrows');
+});
+```
+
+- [ ] **Step 2: Confirm the spec is collected (no network needed)**
+
+Run: `pnpm -C web exec playwright test --list e2e/report-bug.spec.ts`
+Expected: lists exactly one test — "Report-a-bug FAB opens the modal and builds a prefilled GitHub URL".
+
+- [ ] **Step 3: Run the spec against the dev server**
+
+Run: `pnpm -C web exec playwright test e2e/report-bug.spec.ts`
+Expected: PASS (Playwright boots the dev server per `playwright.config.ts`). A screenshot is written to `web/test-results/report-bug-modal.png`.
+
+If the dev server is already running on :3000, Playwright reuses it; otherwise it starts one.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add web/e2e/report-bug.spec.ts
+git commit -m "test(web/feedback): e2e — FAB opens modal and builds prefilled GitHub URL"
+```
+
+---
+
+## Task 8: Final validation
+
+**Files:** none (verification only)
+
+- [ ] **Step 1: Lint**
+
+Run: `pnpm -C web lint`
+Expected: no errors in the new files. Fix any reported issues, then re-run.
+
+- [ ] **Step 2: Typecheck**
+
+Run: `pnpm -C web typecheck`
+Expected: no errors.
+
+- [ ] **Step 3: Full unit suite**
+
+Run: `pnpm -C web test`
+Expected: PASS (all suites, including the three new feedback suites).
+
+- [ ] **Step 4: Production build**
+
+Run: `pnpm -C web build`
+Expected: build succeeds. (Confirms the new modules + AppRoot wiring compile under the production Vite pipeline.)
+
+- [ ] **Step 5: Capture the screenshot deliverable**
+
+Confirm `web/test-results/report-bug-modal.png` exists from Task 7. This is the milestone screenshot (per the ≥1-screenshot-per-milestone convention). If it's missing, re-run `pnpm -C web exec playwright test e2e/report-bug.spec.ts`.
+
+- [ ] **Step 6: Final commit (if lint/typecheck required fixes)**
+
+```bash
+git add -A web/
+git commit -m "chore(web/feedback): lint/typecheck fixups for Report-a-bug"
+```
+
+(Skip if Steps 1–4 needed no changes.)
+
+---
+
+## Self-Review
+
+**Spec coverage** — every spec section maps to a task:
+- Prefilled GitHub issue destination → Task 1 (`buildIssueUrl`).
+- DSL opt-in, default ON, public label → Task 2 (modal toggle + summary).
+- FAB, bottom-right, app-wide → Task 3 (FAB) + Task 4 (hub + editor wiring, embed excluded).
+- Auto-captured context (version/browser/view/signed-in) → Task 1 body + Task 2 (`navigator.userAgent`) + Task 4 (`view`, `user`, `APP_VERSION`).
+- URL 414 length guard / truncation → Task 1 `fitDsl` + truncation test.
+- "No GitHub account" fallback → Task 2 Contact-us link.
+- Telemetry `bug_report_opened` / `bug_report_submitted{included_dsl}` → Task 4.
+- Storybook bootstrap (SB + react-vite + a11y, dark ink decorator, scripts) → Task 5.
+- Stories for both components (all states incl. NoEditorContent, anon/signed-in) → Task 6.
+- E2E + screenshot → Task 7; lint/typecheck/build/screenshot gate → Task 8.
+
+**Placeholder scan** — no TBD/TODO; every code step shows complete code; every command has expected output.
+
+**Type consistency** — `BuildIssueInput` (Task 1) matches the object passed in Task 2; `ReportBugModalProps` (Task 2) matches usage in Task 3; `ReportBugButtonProps` (Task 3) matches the JSX in Task 4 (`dsl`, `appVersion`, `view`, `signedIn`, `onOpen`, `onSubmitted`). `onSubmitted` payload `{ includedDsl }` is consistent across Tasks 2–4. `openUrl` injectable prop name is consistent across the modal impl, its test, and the stories.
+
+**Out of scope (unchanged from spec):** server-side sink, screenshot attachment to the issue, category/steps fields, feature-request path, `build-storybook` in CI.

From f9c64f8a28e015284b2f9cacb6fca1c8875cae83 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:38:25 +1000
Subject: [PATCH 24/33] feat(web/feedback): pure buildIssueUrl helper for
 prefilled GitHub bug reports

---
 web/src/services/bugReport.test.ts | 65 +++++++++++++++++++++++++
 web/src/services/bugReport.ts      | 76 ++++++++++++++++++++++++++++++
 2 files changed, 141 insertions(+)
 create mode 100644 web/src/services/bugReport.test.ts
 create mode 100644 web/src/services/bugReport.ts

diff --git a/web/src/services/bugReport.test.ts b/web/src/services/bugReport.test.ts
new file mode 100644
index 00000000..f888c8c5
--- /dev/null
+++ b/web/src/services/bugReport.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { buildIssueUrl, type BuildIssueInput } from './bugReport';
+
+const base: BuildIssueInput = {
+  description: 'Arrows render upside down',
+  includeDsl: false,
+  appVersion: '2026.6.7',
+  userAgent: 'Mozilla/5.0 (Test)',
+  view: 'editor',
+  signedIn: false,
+};
+
+function body(url: string): string {
+  return new URL(url).searchParams.get('body') ?? '';
+}
+function title(url: string): string {
+  return new URL(url).searchParams.get('title') ?? '';
+}
+
+describe('buildIssueUrl', () => {
+  it('targets the repo new-issue endpoint with a bug label', () => {
+    const url = buildIssueUrl(base);
+    expect(url.startsWith('https://github.com/ZenUml/web-sequence/issues/new?')).toBe(true);
+    expect(new URL(url).searchParams.get('labels')).toBe('bug');
+  });
+
+  it('puts the first non-empty line in the title', () => {
+    const url = buildIssueUrl({ ...base, description: '  \n  Arrows broken  \nmore detail' });
+    expect(title(url)).toBe('Arrows broken');
+  });
+
+  it('falls back to a generic title when description is blank', () => {
+    expect(title(buildIssueUrl({ ...base, description: '   \n  ' }))).toBe('Bug report');
+  });
+
+  it('includes environment lines and the description', () => {
+    const b = body(buildIssueUrl(base));
+    expect(b).toContain('Arrows render upside down');
+    expect(b).toContain('App version: 2026.6.7');
+    expect(b).toContain('Browser: Mozilla/5.0 (Test)');
+    expect(b).toContain('View: editor · Signed in: no');
+  });
+
+  it('omits the DSL block when includeDsl is false', () => {
+    expect(body(buildIssueUrl({ ...base, includeDsl: false, dsl: 'A -> B: x' }))).not.toContain('<details>');
+  });
+
+  it('includes the DSL block when includeDsl is true and dsl is present', () => {
+    const b = body(buildIssueUrl({ ...base, includeDsl: true, dsl: 'A -> B: hello' }));
+    expect(b).toContain('<details><summary>Diagram DSL</summary>');
+    expect(b).toContain('A -> B: hello');
+  });
+
+  it('omits the DSL block when dsl is empty even if includeDsl is true', () => {
+    expect(body(buildIssueUrl({ ...base, includeDsl: true, dsl: '   ' }))).not.toContain('<details>');
+  });
+
+  it('truncates an oversized DSL so the URL stays within budget', () => {
+    const url = buildIssueUrl({ ...base, includeDsl: true, dsl: 'X'.repeat(20000) });
+    expect(url.length).toBeLessThanOrEqual(6000);
+    const b = body(url);
+    expect(b).toContain('truncated');
+    expect(b).toContain('Arrows render upside down'); // description is never dropped
+  });
+});
diff --git a/web/src/services/bugReport.ts b/web/src/services/bugReport.ts
new file mode 100644
index 00000000..afd18166
--- /dev/null
+++ b/web/src/services/bugReport.ts
@@ -0,0 +1,76 @@
+// Pure builder for a prefilled GitHub "new issue" URL. No DOM, no globals — every
+// input is passed in, so this is trivially unit-tested. The caller (ReportBugModal)
+// supplies navigator.userAgent and the current editor DSL.
+
+const REPO = 'https://github.com/ZenUml/web-sequence';
+
+// Conservative cap on total URL length. GitHub returns 414 (URI Too Long) on
+// oversized issue prefills; ~8 KB is the practical ceiling, so 6 KB leaves headroom.
+const URL_BUDGET = 6000;
+
+const TRUNCATION_MARKER = '\n… (truncated — please paste the rest)';
+
+export interface BuildIssueInput {
+  description: string;
+  includeDsl: boolean;
+  dsl?: string;
+  appVersion: string;
+  userAgent: string;
+  view: string;
+  signedIn: boolean;
+}
+
+function firstLine(description: string, max = 80): string {
+  const line = description
+    .split('\n')
+    .map((l) => l.trim())
+    .find((l) => l.length > 0);
+  if (!line) return 'Bug report';
+  return line.length > max ? `${line.slice(0, max - 1).trimEnd()}…` : line;
+}
+
+function environmentBlock(input: BuildIssueInput): string {
+  return [
+    '**Describe the bug**',
+    input.description.trim(),
+    '',
+    '**Environment**',
+    `- App version: ${input.appVersion}`,
+    `- Browser: ${input.userAgent}`,
+    `- View: ${input.view} · Signed in: ${input.signedIn ? 'yes' : 'no'}`,
+  ].join('\n');
+}
+
+function dslBlock(dsl: string): string {
+  return ['', '<details><summary>Diagram DSL</summary>', '', '```', dsl, '```', '</details>'].join('\n');
+}
+
+function composeUrl(title: string, body: string): string {
+  const params = new URLSearchParams({ title, body, labels: 'bug' });
+  return `${REPO}/issues/new?${params.toString()}`;
+}
+
+// Largest prefix of `dsl` whose composed URL still fits URL_BUDGET, with the
+// truncation marker appended when the full DSL doesn't fit. Binary search keeps
+// this O(log n) and deterministic.
+function fitDsl(title: string, baseBody: string, dsl: string): string {
+  const withDsl = (d: string) => `${baseBody}${dslBlock(d)}`;
+  if (composeUrl(title, withDsl(dsl)).length <= URL_BUDGET) return withDsl(dsl);
+  let lo = 0;
+  let hi = dsl.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    const candidate = dsl.slice(0, mid) + TRUNCATION_MARKER;
+    if (composeUrl(title, withDsl(candidate)).length <= URL_BUDGET) lo = mid;
+    else hi = mid - 1;
+  }
+  return withDsl(dsl.slice(0, lo) + TRUNCATION_MARKER);
+}
+
+export function buildIssueUrl(input: BuildIssueInput): string {
+  const title = firstLine(input.description);
+  const baseBody = environmentBlock(input);
+  const dsl = input.dsl?.trim() ? input.dsl : '';
+  if (!input.includeDsl || !dsl) return composeUrl(title, baseBody);
+  return composeUrl(title, fitDsl(title, baseBody, dsl));
+}

From 966323f822323ee249615f5b4930b820b6dba6f7 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:41:53 +1000
Subject: [PATCH 25/33] =?UTF-8?q?feat(web/feedback):=20ReportBugModal=20?=
 =?UTF-8?q?=E2=80=94=20description=20+=20public-DSL=20toggle=20+=20GitHub?=
 =?UTF-8?q?=20submit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedback/ReportBugModal.test.tsx          |  56 ++++++++
 .../components/feedback/ReportBugModal.tsx    | 129 ++++++++++++++++++
 2 files changed, 185 insertions(+)
 create mode 100644 web/src/components/feedback/ReportBugModal.test.tsx
 create mode 100644 web/src/components/feedback/ReportBugModal.tsx

diff --git a/web/src/components/feedback/ReportBugModal.test.tsx b/web/src/components/feedback/ReportBugModal.test.tsx
new file mode 100644
index 00000000..01b0b93b
--- /dev/null
+++ b/web/src/components/feedback/ReportBugModal.test.tsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReportBugModal } from './ReportBugModal';
+
+const props = {
+  open: true,
+  onOpenChange: () => {},
+  appVersion: '2026.6.7',
+  view: 'editor',
+  signedIn: false,
+};
+
+describe('ReportBugModal', () => {
+  it('does not render content when closed', () => {
+    render(<ReportBugModal {...props} open={false} dsl="A -> B: x" />);
+    expect(screen.queryByTestId('report-bug-modal')).toBeNull();
+  });
+
+  it('disables submit until a description is entered', () => {
+    render(<ReportBugModal {...props} dsl="A -> B: x" />);
+    expect(screen.getByTestId('report-bug-submit')).toBeDisabled();
+    fireEvent.change(screen.getByTestId('report-bug-description'), {
+      target: { value: 'RenderGlitch' },
+    });
+    expect(screen.getByTestId('report-bug-submit')).not.toBeDisabled();
+  });
+
+  it('defaults the DSL toggle to ON when there is editor content', () => {
+    render(<ReportBugModal {...props} dsl="A -> B: x" />);
+    expect(screen.getByTestId('report-bug-include-dsl').getAttribute('data-state')).toBe('checked');
+  });
+
+  it('hides the DSL toggle when there is no editor content', () => {
+    render(<ReportBugModal {...props} dsl="" />);
+    expect(screen.queryByTestId('report-bug-include-dsl')).toBeNull();
+  });
+
+  it('opens a GitHub URL containing the description on submit', () => {
+    const openUrl = vi.fn();
+    render(<ReportBugModal {...props} dsl="A -> B: x" openUrl={openUrl} />);
+    fireEvent.change(screen.getByTestId('report-bug-description'), {
+      target: { value: 'RenderGlitch' },
+    });
+    fireEvent.click(screen.getByTestId('report-bug-submit'));
+    expect(openUrl).toHaveBeenCalledTimes(1);
+    const url = openUrl.mock.calls[0][0] as string;
+    expect(url).toContain('github.com/ZenUml/web-sequence/issues/new');
+    expect(url).toContain('RenderGlitch');
+  });
+
+  it('offers a contact-us fallback for users without GitHub', () => {
+    render(<ReportBugModal {...props} dsl="A -> B: x" />);
+    const link = screen.getByRole('link', { name: /contact us/i });
+    expect(link.getAttribute('href')).toBe('https://zenuml.com/docs/about/contact-us');
+  });
+});
diff --git a/web/src/components/feedback/ReportBugModal.tsx b/web/src/components/feedback/ReportBugModal.tsx
new file mode 100644
index 00000000..f1cc9717
--- /dev/null
+++ b/web/src/components/feedback/ReportBugModal.tsx
@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent, Button, Textarea, Switch } from '../../ui';
+import { buildIssueUrl } from '../../services/bugReport';
+
+// Verified contact page (same URL the Help modal links to). Used as the fallback
+// for reporters without a GitHub account.
+const CONTACT_URL = 'https://zenuml.com/docs/about/contact-us';
+
+export interface ReportBugModalProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  // Current editor source. Empty/whitespace => no DSL option (hub, or empty doc).
+  dsl?: string;
+  appVersion: string;
+  view: string;
+  signedIn: boolean;
+  // Side-effect injected for testability; defaults to opening a new tab.
+  openUrl?(url: string): void;
+  onSubmitted?(meta: { includedDsl: boolean }): void;
+}
+
+export function ReportBugModal({
+  open,
+  onOpenChange,
+  dsl,
+  appVersion,
+  view,
+  signedIn,
+  openUrl = (url) => window.open(url, '_blank', 'noopener,noreferrer'),
+  onSubmitted,
+}: ReportBugModalProps) {
+  const hasDsl = !!(dsl && dsl.trim());
+  const [description, setDescription] = useState('');
+  const [includeDsl, setIncludeDsl] = useState(true);
+
+  // Reset the form whenever the modal closes so a reopen starts clean.
+  useEffect(() => {
+    if (!open) {
+      setDescription('');
+      setIncludeDsl(true);
+    }
+  }, [open]);
+
+  const canSubmit = description.trim().length > 0;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    const included = hasDsl && includeDsl;
+    const url = buildIssueUrl({
+      description,
+      includeDsl: included,
+      dsl,
+      appVersion,
+      userAgent: navigator.userAgent,
+      view,
+      signedIn,
+    });
+    openUrl(url);
+    onSubmitted?.({ includedDsl: included });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        title="Report a bug"
+        description="Opens a prefilled GitHub issue — review it before submitting."
+      >
+        <div data-testid="report-bug-modal" className="space-y-4">
+          <Textarea
+            data-testid="report-bug-description"
+            aria-label="Describe the bug"
+            placeholder="What went wrong? What did you expect to happen?"
+            rows={5}
+            className="w-full"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+
+          {hasDsl && (
+            <label className="flex items-center justify-between gap-3 text-[13px] text-ondark-muted">
+              <span>
+                Include my diagram code{' '}
+                <span className="text-ondark-faint">(will be public)</span>
+              </span>
+              <Switch
+                data-testid="report-bug-include-dsl"
+                aria-label="Include my diagram code"
+                checked={includeDsl}
+                onCheckedChange={setIncludeDsl}
+              />
+            </label>
+          )}
+
+          <div
+            data-testid="report-bug-summary"
+            className="rounded border border-ink-line/50 bg-ink-900/40 p-3 text-[12px] text-ondark-faint space-y-1"
+          >
+            <p className="font-mono uppercase tracking-[0.12em] text-[10px]">Attached</p>
+            <p>
+              App version {appVersion} · {view} · {signedIn ? 'signed in' : 'anonymous'}
+            </p>
+            <p>{hasDsl && includeDsl ? 'Your diagram code (public)' : 'No diagram code'}</p>
+          </div>
+
+          <div className="flex items-center justify-between gap-3 pt-1">
+            <a
+              className="text-[12px] text-ondark-faint hover:text-ondark-muted underline underline-offset-2 rounded ring-draft"
+              href={CONTACT_URL}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              No GitHub account? Contact us
+            </a>
+            <Button
+              variant="primary"
+              size="md"
+              data-testid="report-bug-submit"
+              disabled={!canSubmit}
+              onClick={handleSubmit}
+            >
+              Open GitHub issue
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

From b9ac835423264eab98e889e6637cc799763a1208 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:45:03 +1000
Subject: [PATCH 26/33] feat(web/feedback): ReportBugButton fixed FAB owning
 the bug-report modal

---
 .../feedback/ReportBugButton.test.tsx         | 26 +++++++
 .../components/feedback/ReportBugButton.tsx   | 72 +++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 web/src/components/feedback/ReportBugButton.test.tsx
 create mode 100644 web/src/components/feedback/ReportBugButton.tsx

diff --git a/web/src/components/feedback/ReportBugButton.test.tsx b/web/src/components/feedback/ReportBugButton.test.tsx
new file mode 100644
index 00000000..b6fe4b98
--- /dev/null
+++ b/web/src/components/feedback/ReportBugButton.test.tsx
@@ -0,0 +1,26 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReportBugButton } from './ReportBugButton';
+
+const props = {
+  appVersion: '2026.6.7',
+  view: 'editor',
+  signedIn: false,
+  dsl: 'A -> B: x',
+};
+
+describe('ReportBugButton', () => {
+  it('renders a labelled FAB and no modal initially', () => {
+    render(<ReportBugButton {...props} />);
+    expect(screen.getByTestId('report-bug-fab')).toHaveAttribute('aria-label', 'Report a bug');
+    expect(screen.queryByTestId('report-bug-modal')).toBeNull();
+  });
+
+  it('opens the modal and fires onOpen when clicked', () => {
+    const onOpen = vi.fn();
+    render(<ReportBugButton {...props} onOpen={onOpen} />);
+    fireEvent.click(screen.getByTestId('report-bug-fab'));
+    expect(screen.getByTestId('report-bug-modal')).toBeTruthy();
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/web/src/components/feedback/ReportBugButton.tsx b/web/src/components/feedback/ReportBugButton.tsx
new file mode 100644
index 00000000..a60b0877
--- /dev/null
+++ b/web/src/components/feedback/ReportBugButton.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Button, cn } from '../../ui';
+import { ReportBugModal } from './ReportBugModal';
+
+export interface ReportBugButtonProps {
+  dsl?: string;
+  appVersion: string;
+  view: string;
+  signedIn: boolean;
+  onOpen?(): void;
+  onSubmitted?(meta: { includedDsl: boolean }): void;
+}
+
+function BugIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M9 9V5a3 3 0 0 1 6 0v4" />
+      <rect x="8" y="9" width="8" height="10" rx="4" />
+      <path d="M3 13h5M16 13h5M4 19l4-2M20 19l-4-2M4 7l4 2M20 7l-4 2" />
+    </svg>
+  );
+}
+
+// Persistent bottom-right FAB. position:fixed, so its DOM position within the app
+// tree is irrelevant — only z-index matters (sits below the Dialog overlay z-40).
+export function ReportBugButton({
+  dsl,
+  appVersion,
+  view,
+  signedIn,
+  onOpen,
+  onSubmitted,
+}: ReportBugButtonProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button
+        variant="primary"
+        size="md"
+        data-testid="report-bug-fab"
+        aria-label="Report a bug"
+        className={cn('fixed bottom-4 right-4 z-30 shadow-pop')}
+        onClick={() => {
+          setOpen(true);
+          onOpen?.();
+        }}
+      >
+        <BugIcon />
+        <span className="hidden md:inline">Report a bug</span>
+      </Button>
+      <ReportBugModal
+        open={open}
+        onOpenChange={setOpen}
+        dsl={dsl}
+        appVersion={appVersion}
+        view={view}
+        signedIn={signedIn}
+        onSubmitted={onSubmitted}
+      />
+    </>
+  );
+}

From 6a0fa26539c6698125a8fa7f27cbdf51fa9e2e75 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:47:36 +1000
Subject: [PATCH 27/33] feat(web/feedback): render Report-a-bug FAB app-wide
 (hub + editor) with telemetry

---
 web/src/app/AppRoot.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/web/src/app/AppRoot.tsx b/web/src/app/AppRoot.tsx
index 9af86b9d..8a9443ec 100644
--- a/web/src/app/AppRoot.tsx
+++ b/web/src/app/AppRoot.tsx
@@ -66,6 +66,7 @@ import { PricingModal, type BillingPeriod } from '../components/subscription/Pri
 import { LimitReachedNotice } from '../components/subscription/LimitReachedNotice';
 import { LoginModal } from '../components/auth/LoginModal';
 import { HomeView } from '../components/home/HomeView';
+import { ReportBugButton } from '../components/feedback/ReportBugButton';
 
 const CSS_MODES: { value: CssMode; label: string }[] = [
   { value: 'css', label: 'CSS' },
@@ -1019,6 +1020,16 @@ export function AppRoot() {
           lastProvider={lastProvider}
           error={loginError}
         />
+        <ReportBugButton
+          dsl=""
+          appVersion={APP_VERSION}
+          view="hub"
+          signedIn={!!user}
+          onOpen={() => track('bug_report_opened', { category: 'feedback', label: 'hub' })}
+          onSubmitted={({ includedDsl }) =>
+            track('bug_report_submitted', { category: 'feedback', label: 'hub', included_dsl: includedDsl })
+          }
+        />
         <HomeView
           items={items}
           folders={folders}
@@ -1367,6 +1378,16 @@ export function AppRoot() {
           }
         />
       </div>
+      <ReportBugButton
+        dsl={item?.js ?? ''}
+        appVersion={APP_VERSION}
+        view="editor"
+        signedIn={!!user}
+        onOpen={() => track('bug_report_opened', { category: 'feedback', label: 'editor' })}
+        onSubmitted={({ includedDsl }) =>
+          track('bug_report_submitted', { category: 'feedback', label: 'editor', included_dsl: includedDsl })
+        }
+      />
     </div>
   );
 }

From 12076a027e9f0bf23127a0af32c871531d9e4f2f Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:52:09 +1000
Subject: [PATCH 28/33] chore(web): bootstrap Storybook (react-vite) on the
 dark ink surface

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/.gitignore             |   1 +
 web/.storybook/main.ts     |  13 +++
 web/.storybook/preview.tsx |  20 +++++
 web/package.json           |   5 ++
 web/pnpm-lock.yaml         | 180 ++-----------------------------------
 5 files changed, 47 insertions(+), 172 deletions(-)
 create mode 100644 web/.storybook/main.ts
 create mode 100644 web/.storybook/preview.tsx

diff --git a/web/.gitignore b/web/.gitignore
index 57a462ab..54192386 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -10,3 +10,4 @@ extension.zip
 test-results/
 playwright-report/
 .playwright/
+storybook-static
diff --git a/web/.storybook/main.ts b/web/.storybook/main.ts
new file mode 100644
index 00000000..591e40ff
--- /dev/null
+++ b/web/.storybook/main.ts
@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+// react-vite inherits web/vite.config.ts automatically (Tailwind via postcss,
+// path resolution, plugins), so no viteFinal override is needed for these
+// components. In SB9+, viewport/controls/actions are part of core — only a11y is
+// listed here.
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-a11y'],
+  framework: { name: '@storybook/react-vite', options: {} },
+};
+
+export default config;
diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
new file mode 100644
index 00000000..80e6de6c
--- /dev/null
+++ b/web/.storybook/preview.tsx
@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react-vite';
+import '../src/styles/globals.css';
+
+// This UI lives on the dark "ink" chrome surface, so wrap every story in it and
+// load the global stylesheet so Drafting Table tokens + fonts resolve.
+const preview: Preview = {
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <div
+        className="bg-ink-900 text-ondark-strong font-sans"
+        style={{ minHeight: '100vh', width: '100%', padding: '2rem' }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;
diff --git a/web/package.json b/web/package.json
index 50f545ec..30f0f82c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,8 @@
     "build": "vite build",
     "build:extension": "node scripts/build-extension.mjs",
     "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
@@ -65,6 +67,8 @@
   },
   "devDependencies": {
     "@lezer/generator": "^1.8.0",
+    "@storybook/addon-a11y": "^10.4.4",
+    "@storybook/react-vite": "^10.4.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -81,6 +85,7 @@
     "jsdom": "^29.1.1",
     "msw": "^2.14.6",
     "postcss": "^8.5.15",
+    "storybook": "^10.4.4",
     "tailwindcss": "^3.4.19",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index b7062c97..8ec6691e 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -108,8 +108,8 @@ importers:
         specifier: ^4.25.10
         version: 4.25.10(@babel/runtime@7.29.7)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.6)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.0)(codemirror@6.0.2)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@zenuml/core':
-        specifier: ^3.49.2
-        version: 3.49.2(@types/react@19.2.17)
+        specifier: ^3.50.0
+        version: 3.50.0(@types/react@19.2.17)(tailwindcss@3.4.19)
       atomizer:
         specifier: ^3.30.0
         version: 3.30.0
@@ -1735,8 +1735,8 @@ packages:
   '@vitest/utils@4.1.8':
     resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
 
-  '@zenuml/core@3.49.2':
-    resolution: {integrity: sha512-qeQMapuE0XETML2mRw2MIIrMCjcZBhRDSwW10//q8XQ+VyExzkAn39VCBwxIbbPdTBt6gJnaBBixF9A4hsIxcA==}
+  '@zenuml/core@3.50.0':
+    resolution: {integrity: sha512-y+DhuUS7v3cpoZcOHf0VD3/68vS/Y999kazl3mz+rCIW0PJ75EKB9pW+m5BMdmND3m7N+DEF+4pvNjS0cK1org==}
     engines: {node: '>=20'}
     hasBin: true
     peerDependencies:
@@ -1745,10 +1745,6 @@ packages:
       playwright-core:
         optional: true
 
-  abort-controller@3.0.0:
-    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
-    engines: {node: '>=6.5'}
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1814,10 +1810,6 @@ packages:
   ast-v8-to-istanbul@1.0.3:
     resolution: {integrity: sha512-jCMQ6ZylLPudp0CDfBmQBZUsrh1/8psbmu9ibeVWKuHWD0YrH9YABwlKu5kVEFoT0GCQQW9Z/SxfuEbbkGQCRg==}
 
-  atomic-sleep@1.0.0:
-    resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
-    engines: {node: '>=8.0.0'}
-
   atomizer@3.30.0:
     resolution: {integrity: sha512-rog4Q1nGqmprrL6wJjT1C5r8vnyrQVqn6ROFCRGjvqUPbkaavo01KKRcwYHX0CSwH4G+Mt600VJlSFfW60GEAg==}
     engines: {node: '>=10.0'}
@@ -1837,9 +1829,6 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
-  base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-
   baseline-browser-mapping@2.10.34:
     resolution: {integrity: sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==}
     engines: {node: '>=6.0.0'}
@@ -1868,9 +1857,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  buffer@6.0.3:
-    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
-
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -2107,14 +2093,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  event-target-shim@5.0.1:
-    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
-    engines: {node: '>=6'}
-
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
-
   expect-type@1.3.0:
     resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
@@ -2132,10 +2110,6 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-redact@3.5.0:
-    resolution: {integrity: sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==}
-    engines: {node: '>=6'}
-
   fast-string-truncated-width@3.0.3:
     resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
 
@@ -2264,9 +2238,6 @@ packages:
   idb@7.1.1:
     resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
 
-  ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -2616,10 +2587,6 @@ packages:
     resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
     engines: {node: '>=12.20.0'}
 
-  on-exit-leak-free@2.1.2:
-    resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
-    engines: {node: '>=14.0.0'}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -2638,9 +2605,6 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
-
   parse-node-version@1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
@@ -2688,16 +2652,6 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pino-abstract-transport@1.2.0:
-    resolution: {integrity: sha512-Guhh8EZfPCfH+PMXAb6rKOjGQEoy0xlAIn+irODG5kgfYV+BQ0rGYYWTIel3P5mmyXqkYkPmdIkywsn6QKUR1Q==}
-
-  pino-std-serializers@6.2.2:
-    resolution: {integrity: sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==}
-
-  pino@8.21.0:
-    resolution: {integrity: sha512-ip4qdzjkAyDDZklUaZkcRFb2iA118H9SgRh8yzTkSQK8HilsOJF7rSY8HoW5+I0M46AZgX/pxbprf2vvzQCE0Q==}
-    hasBin: true
-
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
@@ -2762,13 +2716,6 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  process-warning@3.0.0:
-    resolution: {integrity: sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ==}
-
-  process@0.11.10:
-    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
-    engines: {node: '>= 0.6.0'}
-
   protobufjs@7.6.2:
     resolution: {integrity: sha512-N9EiLovGEQOJSPF26Ij7qUGvahfEnq0eeYZ02aigIedkmz1qZSwjnP9SBITHJuF/6MYbIW4HDN8zdYjsjqJKXQ==}
     engines: {node: '>=12.0.0'}
@@ -2783,9 +2730,6 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  quick-format-unescaped@4.0.4:
-    resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
-
   react-aria@3.49.0:
     resolution: {integrity: sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==}
     peerDependencies:
@@ -2842,10 +2786,6 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  readable-stream@4.7.0:
-    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -2854,10 +2794,6 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
-  real-require@0.2.0:
-    resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
-    engines: {node: '>= 12.13.0'}
-
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -2893,10 +2829,6 @@ packages:
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
-  safe-stable-stringify@2.5.0:
-    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
-    engines: {node: '>=10'}
-
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -2957,9 +2889,6 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  sonic-boom@3.8.1:
-    resolution: {integrity: sha512-y4Z8LCDBuum+PBP3lSV7RHrXscqksve/bi0as7mhwVnBW+/wUqKT/2Kb7um8yqcFy0duYbbPxzt89Zy2nOCaxg==}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2975,10 +2904,6 @@ packages:
   split.js@1.6.5:
     resolution: {integrity: sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==}
 
-  split2@4.2.0:
-    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
-    engines: {node: '>= 10.x'}
-
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
@@ -3000,9 +2925,6 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
-  string_decoder@1.3.0:
-    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
-
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -3061,9 +2983,6 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  thread-stream@2.7.0:
-    resolution: {integrity: sha512-qQiRWsU/wvNolI6tbbCKd9iKaTnCXsTwVxhhKM6nctPdujTyztjlbUkUTUymidWcMnZ5pWR0ej4a0tjsW021vw==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -5010,7 +4929,7 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  '@zenuml/core@3.49.2(@types/react@19.2.17)':
+  '@zenuml/core@3.50.0(@types/react@19.2.17)(tailwindcss@3.4.19)':
     dependencies:
       '@floating-ui/react': 0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@headlessui/react': 2.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -5022,28 +4941,18 @@ snapshots:
       dompurify: 3.4.8
       highlight.js: 11.11.1
       html-to-image: 1.11.13
-      immer: 10.2.0
       jotai: 2.20.0(@types/react@19.2.17)(react@19.2.7)
-      lodash: 4.18.1
       marked: 4.3.0
-      pako: 2.1.0
-      pino: 8.21.0
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
       tailwind-merge: 3.6.0
-      tailwindcss: 3.4.19
     optionalDependencies:
       '@napi-rs/canvas': 0.1.100
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/template'
       - '@types/react'
-      - tsx
-      - yaml
-
-  abort-controller@3.0.0:
-    dependencies:
-      event-target-shim: 5.0.1
+      - tailwindcss
 
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
@@ -5099,8 +5008,6 @@ snapshots:
       estree-walker: 3.0.3
       js-tokens: 10.0.0
 
-  atomic-sleep@1.0.0: {}
-
   atomizer@3.30.0:
     dependencies:
       chalk: 4.1.2
@@ -5124,8 +5031,6 @@ snapshots:
 
   balanced-match@4.0.4: {}
 
-  base64-js@1.5.1: {}
-
   baseline-browser-mapping@2.10.34: {}
 
   bidi-js@1.0.3:
@@ -5154,11 +5059,6 @@ snapshots:
       node-releases: 2.0.47
       update-browserslist-db: 1.2.3(browserslist@4.28.2)
 
-  buffer@6.0.3:
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-
   camelcase-css@2.0.1: {}
 
   caniuse-lite@1.0.30001797: {}
@@ -5390,10 +5290,6 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  event-target-shim@5.0.1: {}
-
-  events@3.3.0: {}
-
   expect-type@1.3.0: {}
 
   fast-deep-equal@3.1.3: {}
@@ -5410,8 +5306,6 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-redact@3.5.0: {}
-
   fast-string-truncated-width@3.0.3: {}
 
   fast-string-width@3.0.2:
@@ -5559,14 +5453,13 @@ snapshots:
 
   idb@7.1.1: {}
 
-  ieee754@1.2.1: {}
-
   ignore@5.3.2: {}
 
   image-size@0.5.5:
     optional: true
 
-  immer@10.2.0: {}
+  immer@10.2.0:
+    optional: true
 
   immutable@5.1.6: {}
 
@@ -5859,8 +5752,6 @@ snapshots:
 
   obug@2.1.2: {}
 
-  on-exit-leak-free@2.1.2: {}
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -5882,8 +5773,6 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
-  pako@2.1.0: {}
-
   parse-node-version@1.0.1: {}
 
   parse5@8.0.1:
@@ -5916,27 +5805,6 @@ snapshots:
   pify@4.0.1:
     optional: true
 
-  pino-abstract-transport@1.2.0:
-    dependencies:
-      readable-stream: 4.7.0
-      split2: 4.2.0
-
-  pino-std-serializers@6.2.2: {}
-
-  pino@8.21.0:
-    dependencies:
-      atomic-sleep: 1.0.0
-      fast-redact: 3.5.0
-      on-exit-leak-free: 2.1.2
-      pino-abstract-transport: 1.2.0
-      pino-std-serializers: 6.2.2
-      process-warning: 3.0.0
-      quick-format-unescaped: 4.0.4
-      real-require: 0.2.0
-      safe-stable-stringify: 2.5.0
-      sonic-boom: 3.8.1
-      thread-stream: 2.7.0
-
   pirates@4.0.7: {}
 
   postcss-import@15.1.0(postcss@8.5.15):
@@ -5986,10 +5854,6 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  process-warning@3.0.0: {}
-
-  process@0.11.10: {}
-
   protobufjs@7.6.2:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
@@ -6012,8 +5876,6 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  quick-format-unescaped@4.0.4: {}
-
   react-aria@3.49.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       '@internationalized/date': 3.12.2
@@ -6078,22 +5940,12 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
-  readable-stream@4.7.0:
-    dependencies:
-      abort-controller: 3.0.0
-      buffer: 6.0.3
-      events: 3.3.0
-      process: 0.11.10
-      string_decoder: 1.3.0
-
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.2
 
   readdirp@5.0.0: {}
 
-  real-require@0.2.0: {}
-
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -6141,8 +5993,6 @@ snapshots:
 
   safe-buffer@5.2.1: {}
 
-  safe-stable-stringify@2.5.0: {}
-
   safer-buffer@2.1.2:
     optional: true
 
@@ -6188,10 +6038,6 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  sonic-boom@3.8.1:
-    dependencies:
-      atomic-sleep: 1.0.0
-
   source-map-js@1.2.1: {}
 
   source-map@0.6.1:
@@ -6201,8 +6047,6 @@ snapshots:
 
   split.js@1.6.5: {}
 
-  split2@4.2.0: {}
-
   stackback@0.0.2: {}
 
   statuses@2.0.2: {}
@@ -6223,10 +6067,6 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.2.0
 
-  string_decoder@1.3.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -6311,10 +6151,6 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  thread-stream@2.7.0:
-    dependencies:
-      real-require: 0.2.0
-
   tinybench@2.9.0: {}
 
   tinyexec@1.2.4: {}

From 34044ddcc1ae455d2964caeb0397b5f9fee1a9f2 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 21:57:52 +1000
Subject: [PATCH 29/33] docs(web/feedback): Storybook stories for
 ReportBugButton + ReportBugModal states

---
 .../feedback/ReportBugButton.stories.tsx      | 23 ++++++++++++++
 .../feedback/ReportBugModal.stories.tsx       | 30 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 web/src/components/feedback/ReportBugButton.stories.tsx
 create mode 100644 web/src/components/feedback/ReportBugModal.stories.tsx

diff --git a/web/src/components/feedback/ReportBugButton.stories.tsx b/web/src/components/feedback/ReportBugButton.stories.tsx
new file mode 100644
index 00000000..ea1ad840
--- /dev/null
+++ b/web/src/components/feedback/ReportBugButton.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ReportBugButton } from './ReportBugButton';
+
+const meta: Meta<typeof ReportBugButton> = {
+  title: 'Feedback/ReportBugButton',
+  component: ReportBugButton,
+  args: {
+    appVersion: '2026.6.7',
+    view: 'editor',
+    signedIn: false,
+    dsl: 'Alice -> Bob: Hello',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ReportBugButton>;
+
+// The FAB anchors bottom-right of the canvas. Click it to open the modal.
+export const Default: Story = {};
+export const Anonymous: Story = { args: { signedIn: false } };
+export const SignedIn: Story = { args: { signedIn: true } };
+// No active diagram (hub / empty doc): the modal hides the DSL toggle.
+export const NoEditorContent: Story = { args: { dsl: '', view: 'hub' } };
diff --git a/web/src/components/feedback/ReportBugModal.stories.tsx b/web/src/components/feedback/ReportBugModal.stories.tsx
new file mode 100644
index 00000000..2a31f474
--- /dev/null
+++ b/web/src/components/feedback/ReportBugModal.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ReportBugModal } from './ReportBugModal';
+
+const meta: Meta<typeof ReportBugModal> = {
+  title: 'Feedback/ReportBugModal',
+  component: ReportBugModal,
+  args: {
+    open: true,
+    onOpenChange: () => {},
+    // Don't actually open a tab from a story.
+    openUrl: () => {},
+    appVersion: '2026.6.7',
+    view: 'editor',
+    signedIn: false,
+    dsl: 'Alice -> Bob: Hello\nBob -> Alice: Hi back',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ReportBugModal>;
+
+// Submit is disabled until the user types a description.
+export const Empty: Story = {};
+// With editor content, the public-DSL toggle defaults ON.
+export const WithDsl: Story = {};
+// Anonymous vs signed-in changes the attached-summary line.
+export const Anonymous: Story = { args: { signedIn: false } };
+export const SignedIn: Story = { args: { signedIn: true } };
+// No active diagram: the DSL toggle is hidden and the summary says "No diagram code".
+export const NoEditorContent: Story = { args: { dsl: '', view: 'hub' } };

From 9c322967390435422c9c7cafc96923bf91cdee54 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 22:02:36 +1000
Subject: [PATCH 30/33] =?UTF-8?q?test(web/feedback):=20e2e=20=E2=80=94=20F?=
 =?UTF-8?q?AB=20opens=20modal=20and=20builds=20prefilled=20GitHub=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/e2e/report-bug.spec.ts | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 web/e2e/report-bug.spec.ts

diff --git a/web/e2e/report-bug.spec.ts b/web/e2e/report-bug.spec.ts
new file mode 100644
index 00000000..37b5bfa1
--- /dev/null
+++ b/web/e2e/report-bug.spec.ts
@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+import { seedAndOpen } from './helpers/editor';
+
+test('Report-a-bug FAB opens the modal and builds a prefilled GitHub URL', async ({ page }) => {
+  // Capture window.open instead of spawning a real tab. addInitScript must run
+  // before navigation, so register it before seedAndOpen (which calls page.goto).
+  await page.addInitScript(() => {
+    (window as unknown as { __lastOpen?: string }).__lastOpen = undefined;
+    window.open = ((url?: string | URL) => {
+      (window as unknown as { __lastOpen?: string }).__lastOpen = String(url);
+      return null;
+    }) as typeof window.open;
+  });
+
+  await seedAndOpen(page);
+
+  const fab = page.getByTestId('report-bug-fab');
+  await expect(fab).toBeVisible();
+  await fab.click();
+
+  const modal = page.getByTestId('report-bug-modal');
+  await expect(modal).toBeVisible();
+
+  // Screenshot the open modal for the milestone gallery.
+  await page.screenshot({ path: 'test-results/report-bug-modal.png' });
+
+  await page.getByTestId('report-bug-description').fill('Arrows render upside down on page 2');
+  const submit = page.getByTestId('report-bug-submit');
+  await expect(submit).toBeEnabled();
+  await submit.click();
+
+  const opened = await page.evaluate(
+    () => (window as unknown as { __lastOpen?: string }).__lastOpen,
+  );
+  expect(opened).toContain('github.com/ZenUml/web-sequence/issues/new');
+  expect(opened).toContain('Arrows');
+});

From b3b6e4adc34cb38da28508c2a3e3e236e6ddeed1 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sun, 14 Jun 2026 22:15:45 +1000
Subject: [PATCH 31/33] fix(web): pin Storybook deps in standalone
 web/pnpm-lock.yaml (--ignore-workspace)

---
 web/pnpm-lock.yaml | 1539 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 1501 insertions(+), 38 deletions(-)

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 8ec6691e..54c11113 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -109,7 +109,7 @@ importers:
         version: 4.25.10(@babel/runtime@7.29.7)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.6)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.0)(codemirror@6.0.2)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@zenuml/core':
         specifier: ^3.50.0
-        version: 3.50.0(@types/react@19.2.17)(tailwindcss@3.4.19)
+        version: 3.50.0(@babel/core@7.29.7)(@babel/template@7.29.7)(@types/react@19.2.17)(tailwindcss@3.4.19)
       atomizer:
         specifier: ^3.30.0
         version: 3.30.0
@@ -153,6 +153,12 @@ importers:
       '@lezer/generator':
         specifier: ^1.8.0
         version: 1.8.0
+      '@storybook/addon-a11y':
+        specifier: ^10.4.4
+        version: 10.4.4(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))
+      '@storybook/react-vite':
+        specifier: ^10.4.4
+        version: 10.4.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.27.7)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
@@ -182,7 +188,7 @@ importers:
         version: 0.48.43
       '@vitejs/plugin-react':
         specifier: ^6.0.2
-        version: 6.0.2(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+        version: 6.0.2(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
       '@vitest/coverage-v8':
         specifier: ^4.1.8
         version: 4.1.8(vitest@4.1.8)
@@ -201,6 +207,9 @@ importers:
       postcss:
         specifier: ^8.5.15
         version: 8.5.15
+      storybook:
+        specifier: ^10.4.4
+        version: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       tailwindcss:
         specifier: ^3.4.19
         version: 3.4.19
@@ -209,10 +218,10 @@ importers:
         version: 6.0.3
       vite:
         specifier: ^8.0.16
-        version: 8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+        version: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
       vitest:
         specifier: ^4.1.8
-        version: 4.1.8(@types/node@25.9.2)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1)(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+        version: 4.1.8(@types/node@25.9.2)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1)(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
 
 packages:
 
@@ -245,6 +254,36 @@ packages:
     resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-string-parser@7.29.7':
     resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
     engines: {node: '>=6.9.0'}
@@ -253,6 +292,14 @@ packages:
     resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.29.7':
     resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
     engines: {node: '>=6.0.0'}
@@ -270,6 +317,14 @@ packages:
     resolution: {integrity: sha512-oFh9XoGL20UuHIeIuBQHOvF7r2dOCRnZW0r4SageGb9SWnt6HhbuPLREykNaEnP7/SRpMUwr50SSMJLrmeHvnQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.29.7':
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
@@ -381,12 +436,174 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -737,9 +954,21 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
+    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -884,9 +1113,242 @@ packages:
   '@open-draft/until@2.1.0':
     resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
   '@oxc-project/types@0.133.0':
     resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    resolution: {integrity: sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    resolution: {integrity: sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    resolution: {integrity: sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    resolution: {integrity: sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    resolution: {integrity: sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    resolution: {integrity: sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    resolution: {integrity: sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    resolution: {integrity: sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    resolution: {integrity: sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    resolution: {integrity: sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    resolution: {integrity: sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    resolution: {integrity: sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    resolution: {integrity: sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    resolution: {integrity: sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    resolution: {integrity: sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    resolution: {integrity: sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    resolution: {integrity: sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    resolution: {integrity: sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    resolution: {integrity: sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==}
+    cpu: [x64]
+    os: [win32]
+
   '@parcel/watcher-android-arm64@2.5.6':
     resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
     engines: {node: '>= 10.0.0'}
@@ -1493,17 +1955,103 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.3':
-    resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@storybook/addon-a11y@10.4.4':
+    resolution: {integrity: sha512-/eUCx/6Ozq5grauwm/NqKtlW0oJ26b6GNesXrMuFID8WLg/qLEKf79Awfz9XrmyWxe7loD40K952r7AA5Oc23A==}
+    peerDependencies:
+      storybook: ^10.4.4
+
+  '@storybook/builder-vite@10.4.4':
+    resolution: {integrity: sha512-VyuZ4mEvhhVXjJa1qXMWKH8ohnas0rgEuJDf6u4aJ54XeENFebPUEAHde1Qo2PflJ4rUdVdXieOZzKbYwP5RAQ==}
+    peerDependencies:
+      storybook: ^10.4.4
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/csf-plugin@10.4.4':
+    resolution: {integrity: sha512-1mzZyAwVUmAcw4WEUsJDVdSupkJf+Kf/f5uNAs4RzlBXA75P8YRkDKAb2EoMwsB5URiXFi9XoeAN/vWke0G6+w==}
+    peerDependencies:
+      esbuild: '*'
+      rollup: '*'
+      storybook: ^10.4.4
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@rolldown/pluginutils@1.0.1':
-    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+  '@storybook/icons@2.0.2':
+    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@standard-schema/spec@1.1.0':
-    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+  '@storybook/react-dom-shim@10.4.4':
+    resolution: {integrity: sha512-y6SObmoW78AydE6VfKQSUmCkuqiaMPy9LgMpMdMEyWfJ/pSxBDMIKycr9dlRMJP1cvNgByaJgrusWtA46ndSQw==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.4.4
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/react-vite@10.4.4':
+    resolution: {integrity: sha512-hXw1c9Jq2eFzwmJ3u9phmszbHoPjwPLYjcR1Grd6Xbe2g3bReGH35urm/fTZ0HNdjXAgQlUaXp2bWw6vz0BHQw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.4.4
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/react@10.4.4':
+    resolution: {integrity: sha512-6K5/uHrvjswrueyVpUt6IWGuSgYCMtMOYyVs86XJZYqKBV3Pv7nGsGNH7YSMLAVQBZW4CQqm2etd5Op0GHY9Kg==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.4.4
+      typescript: '>= 4.9.x'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+      typescript:
+        optional: true
 
   '@swc/helpers@0.5.23':
     resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
@@ -1605,6 +2153,9 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
+  '@types/doctrine@0.0.9':
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+
   '@types/esrecurse@4.3.1':
     resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
 
@@ -1631,6 +2182,9 @@ packages:
   '@types/react@19.2.17':
     resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
 
+  '@types/resolve@1.20.6':
+    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
+
   '@types/set-cookie-parser@2.4.10':
     resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
 
@@ -1706,6 +2260,9 @@ packages:
       '@vitest/browser':
         optional: true
 
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
   '@vitest/expect@4.1.8':
     resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
 
@@ -1720,6 +2277,9 @@ packages:
       vite:
         optional: true
 
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
   '@vitest/pretty-format@4.1.8':
     resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
 
@@ -1729,12 +2289,21 @@ packages:
   '@vitest/snapshot@4.1.8':
     resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
 
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
   '@vitest/spy@4.1.8':
     resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
 
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
   '@vitest/utils@4.1.8':
     resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
 
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
   '@zenuml/core@3.50.0':
     resolution: {integrity: sha512-y+DhuUS7v3cpoZcOHf0VD3/68vS/Y999kazl3mz+rCIW0PJ75EKB9pW+m5BMdmND3m7N+DEF+4pvNjS0cK1org==}
     engines: {node: '>=20'}
@@ -1807,6 +2376,10 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
   ast-v8-to-istanbul@1.0.3:
     resolution: {integrity: sha512-jCMQ6ZylLPudp0CDfBmQBZUsrh1/8psbmu9ibeVWKuHWD0YrH9YABwlKu5kVEFoT0GCQQW9Z/SxfuEbbkGQCRg==}
 
@@ -1822,6 +2395,10 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  axe-core@4.12.1:
+    resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
+    engines: {node: '>=4'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1857,6 +2434,10 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -1864,6 +2445,10 @@ packages:
   caniuse-lite@1.0.30001797:
     resolution: {integrity: sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -1872,6 +2457,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1981,9 +2570,25 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2001,6 +2606,10 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -2025,6 +2634,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  empathic@2.0.1:
+    resolution: {integrity: sha512-YGRs8knHhKHVShLkFET/rWAU8kmHbOV5LwN938RHI0pljAJ1Gf6SzXsSmRaEzcXTtOOmVqJ5+WtQPL5uigY50Q==}
+    engines: {node: '>=14'}
+
   entities@8.0.0:
     resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
     engines: {node: '>=20.19.0'}
@@ -2040,6 +2653,11 @@ packages:
   es-module-lexer@2.1.0:
     resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
 
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -2074,6 +2692,11 @@ packages:
     resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -2086,6 +2709,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -2175,6 +2801,10 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -2196,6 +2826,10 @@ packages:
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -2269,6 +2903,11 @@ packages:
     resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2281,6 +2920,11 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
   is-node-process@1.2.0:
     resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
 
@@ -2295,6 +2939,10 @@ packages:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
 
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isbot@5.1.41:
     resolution: {integrity: sha512-9WFV/Vhh0FEj6CQ7MoHweEL9/vLKPjeoD2I2htbAjX7kbW7VJs3OCpWOVyd+JraNTWVU6/DRx2MZy2KaUNXHcg==}
     engines: {node: '>=18'}
@@ -2354,6 +3002,11 @@ packages:
       canvas:
         optional: true
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -2363,6 +3016,11 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2469,6 +3127,9 @@ packages:
   long@5.3.2:
     resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -2476,6 +3137,9 @@ packages:
     resolution: {integrity: sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==}
     engines: {node: 20 || >=22}
 
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -2527,6 +3191,9 @@ packages:
     resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.3:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2587,6 +3254,10 @@ packages:
     resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
     engines: {node: '>=12.20.0'}
 
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -2594,6 +3265,13 @@ packages:
   outvariant@1.4.3:
     resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
 
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.20.0:
+    resolution: {integrity: sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -2627,12 +3305,20 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
+
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -2736,6 +3422,15 @@ packages:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
+  react-docgen-typescript@2.4.0:
+    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+
+  react-docgen@8.0.3:
+    resolution: {integrity: sha512-aEZ9qP+/M+58x2qgfSFEWH1BxLyHe5+qkLNJOZQb5iGS017jpbRnoKhNRrXPeA6RfBrZO5wZrT9DMC1UqE1f1w==}
+    engines: {node: ^20.9.0 || >=22}
+
   react-dom@19.2.7:
     resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
     peerDependencies:
@@ -2794,6 +3489,10 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -2823,6 +3522,10 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -2856,6 +3559,10 @@ packages:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
 
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
   semver@7.8.2:
     resolution: {integrity: sha512-c8jsqUZm3omBOI66G90z1Dyw5z622G8oLG+omfsHBJf3CWQTlOcwOjvOG6wtiNfW6anKm/eA39LMwMtMez2TiQ==}
     engines: {node: '>=10'}
@@ -2914,6 +3621,21 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
+  storybook@10.4.4:
+    resolution: {integrity: sha512-Nn0qFRxU5fyABa6dGRftfL3lz0Y+HkKOaAkfytF8S4Q2K6Szwwq7TwPAEs3Wsj8hBQbYhsobrKADcPsyXQpJaA==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
   strict-event-emitter@0.5.1:
     resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
@@ -2933,10 +3655,18 @@ packages:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
+    engines: {node: '>=12'}
+
   style-mod@4.1.3:
     resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
@@ -2983,6 +3713,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -2994,10 +3727,18 @@ packages:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.4.2:
     resolution: {integrity: sha512-nwEyF4vl4RSJjwSjBUmOSxc3BFPoIFdlRthJ6e+5v9P3bHNsoD06UjuqMUspqp7vsEZ1beaHi1km+optiE17yA==}
 
@@ -3017,9 +3758,17 @@ packages:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
 
+  ts-dedent@2.3.0:
+    resolution: {integrity: sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==}
+    engines: {node: '>=6.10'}
+
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3047,6 +3796,10 @@ packages:
     resolution: {integrity: sha512-uZsKNuzQxDMUY6M3pIMvy5tvlGmtq8XJ2oLAkfRKGNu+1VQAIvLy2xIVG5ATZl5wDXl/tddByAWCizRbOme+TA==}
     engines: {node: '>=20.18.1'}
 
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
   until-async@3.0.2:
     resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
 
@@ -3182,6 +3935,9 @@ packages:
     resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   websocket-driver@0.7.5:
     resolution: {integrity: sha512-ZL2+3c7kMBdIRCMz6l8jQMHyGVxj+UL+xVk74Ombiciboca8rHa15L86B19E5oh1pL9Ii/uj54gtsIrZGMo6zA==}
     engines: {node: '>=0.8.0'}
@@ -3220,6 +3976,22 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -3234,6 +4006,9 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -3298,10 +4073,73 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-string-parser@7.29.7': {}
 
   '@babel/helper-validator-identifier@7.29.7': {}
 
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
   '@babel/parser@7.29.7':
     dependencies:
       '@babel/types': 7.29.7
@@ -3314,6 +4152,24 @@ snapshots:
 
   '@babel/standalone@7.29.7': {}
 
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.29.7':
     dependencies:
       '@babel/helper-string-parser': 7.29.7
@@ -3461,22 +4317,111 @@ snapshots:
     dependencies:
       '@emmetio/scanner': 1.0.4
 
-  '@emmetio/scanner@1.0.4': {}
+  '@emmetio/scanner@1.0.4': {}
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm@0.27.7':
+    optional: true
+
+  '@esbuild/android-x64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.7':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.7':
+    optional: true
 
-  '@emnapi/core@1.10.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.1
-      tslib: 2.8.1
+  '@esbuild/win32-arm64@0.27.7':
     optional: true
 
-  '@emnapi/runtime@1.10.0':
-    dependencies:
-      tslib: 2.8.1
+  '@esbuild/win32-ia32@0.27.7':
     optional: true
 
-  '@emnapi/wasi-threads@1.2.1':
-    dependencies:
-      tslib: 2.8.1
+  '@esbuild/win32-x64@0.27.7':
     optional: true
 
   '@eslint-community/eslint-utils@4.9.1(eslint@10.4.1(jiti@1.21.7))':
@@ -3956,11 +4901,24 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
+    dependencies:
+      glob: 13.0.6
+      react-docgen-typescript: 2.4.0(typescript@6.0.3)
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+    optionalDependencies:
+      typescript: 6.0.3
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
@@ -4069,6 +5027,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4092,8 +5057,135 @@ snapshots:
 
   '@open-draft/until@2.1.0': {}
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-project/types@0.127.0': {}
+
   '@oxc-project/types@0.133.0': {}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    optional: true
+
   '@parcel/watcher-android-arm64@2.5.6':
     optional: true
 
@@ -4642,8 +5734,95 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.1': {}
 
+  '@rollup/pluginutils@5.4.0':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+
   '@standard-schema/spec@1.1.0': {}
 
+  '@storybook/addon-a11y@10.4.4(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      axe-core: 4.12.1
+      storybook: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+
+  '@storybook/builder-vite@10.4.4(esbuild@0.27.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
+    dependencies:
+      '@storybook/csf-plugin': 10.4.4(esbuild@0.27.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+      storybook: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      ts-dedent: 2.3.0
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
+  '@storybook/csf-plugin@10.4.4(esbuild@0.27.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
+    dependencies:
+      storybook: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.27.7
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/icons@2.0.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@storybook/react-dom-shim@10.4.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))':
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      storybook: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@storybook/react-vite@10.4.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.27.7)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+      '@rollup/pluginutils': 5.4.0
+      '@storybook/builder-vite': 10.4.4(esbuild@0.27.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+      '@storybook/react': 10.4.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(typescript@6.0.3)
+      empathic: 2.0.1
+      magic-string: 0.30.21
+      react: 19.2.7
+      react-docgen: 8.0.3
+      react-dom: 19.2.7(react@19.2.7)
+      resolve: 1.22.12
+      storybook: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      tsconfig-paths: 4.2.0
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - supports-color
+      - typescript
+      - webpack
+
+  '@storybook/react@10.4.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(typescript@6.0.3)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/react-dom-shim': 10.4.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))
+      react: 19.2.7
+      react-docgen: 8.0.3
+      react-docgen-typescript: 2.4.0(typescript@6.0.3)
+      react-dom: 19.2.7(react@19.2.7)
+      storybook: 10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@swc/helpers@0.5.23':
     dependencies:
       tslib: 2.8.1
@@ -4768,6 +5947,8 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
+  '@types/doctrine@0.0.9': {}
+
   '@types/esrecurse@4.3.1': {}
 
   '@types/estree@1.0.9': {}
@@ -4790,6 +5971,8 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/resolve@1.20.6': {}
+
   '@types/set-cookie-parser@2.4.10':
     dependencies:
       '@types/node': 25.9.2
@@ -4868,10 +6051,10 @@ snapshots:
       - '@codemirror/lint'
       - '@codemirror/search'
 
-  '@vitejs/plugin-react@6.0.2(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
+  '@vitejs/plugin-react@6.0.2(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
 
   '@vitest/coverage-v8@4.1.8(vitest@4.1.8)':
     dependencies:
@@ -4885,7 +6068,15 @@ snapshots:
       obug: 2.1.2
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.8(@types/node@25.9.2)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1)(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+      vitest: 4.1.8(@types/node@25.9.2)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1)(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
 
   '@vitest/expect@4.1.8':
     dependencies:
@@ -4896,14 +6087,18 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.8(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
+  '@vitest/mocker@4.1.8(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))':
     dependencies:
       '@vitest/spy': 4.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
       msw: 2.14.6(@types/node@25.9.2)(typescript@6.0.3)
-      vite: 8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
 
   '@vitest/pretty-format@4.1.8':
     dependencies:
@@ -4921,15 +6116,27 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.4
+
   '@vitest/spy@4.1.8': {}
 
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
   '@vitest/utils@4.1.8':
     dependencies:
       '@vitest/pretty-format': 4.1.8
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  '@zenuml/core@3.50.0(@types/react@19.2.17)(tailwindcss@3.4.19)':
+  '@webcontainer/env@1.1.1': {}
+
+  '@zenuml/core@3.50.0(@babel/core@7.29.7)(@babel/template@7.29.7)(@types/react@19.2.17)(tailwindcss@3.4.19)':
     dependencies:
       '@floating-ui/react': 0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@headlessui/react': 2.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -4941,7 +6148,7 @@ snapshots:
       dompurify: 3.4.8
       highlight.js: 11.11.1
       html-to-image: 1.11.13
-      jotai: 2.20.0(@types/react@19.2.17)(react@19.2.7)
+      jotai: 2.20.0(@babel/core@7.29.7)(@babel/template@7.29.7)(@types/react@19.2.17)(react@19.2.7)
       marked: 4.3.0
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
@@ -5002,6 +6209,10 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
   ast-v8-to-istanbul@1.0.3:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -5027,6 +6238,8 @@ snapshots:
       postcss: 8.5.15
       postcss-value-parser: 4.2.0
 
+  axe-core@4.12.1: {}
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
@@ -5059,10 +6272,22 @@ snapshots:
       node-releases: 2.0.47
       update-browserslist-db: 1.2.3(browserslist@4.28.2)
 
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
   camelcase-css@2.0.1: {}
 
   caniuse-lite@1.0.30001797: {}
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chai@6.2.2: {}
 
   chalk@4.1.2:
@@ -5070,6 +6295,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  check-error@2.1.3: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -5172,8 +6399,19 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@3.0.0: {}
+
   dequal@2.0.3: {}
 
   detect-libc@2.1.2: {}
@@ -5184,6 +6422,10 @@ snapshots:
 
   dlv@1.1.3: {}
 
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -5205,6 +6447,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  empathic@2.0.1: {}
+
   entities@8.0.0: {}
 
   errno@0.1.8:
@@ -5216,6 +6460,35 @@ snapshots:
 
   es-module-lexer@2.1.0: {}
 
+  esbuild@0.27.7:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
+
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -5274,6 +6547,8 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.16.0)
       eslint-visitor-keys: 5.0.1
 
+  esprima@4.0.1: {}
+
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
@@ -5284,6 +6559,8 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@2.0.2: {}
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.9
@@ -5395,6 +6672,8 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  gensync@1.0.0-beta.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-nonce@1.0.1: {}
@@ -5416,6 +6695,12 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
+  glob@13.0.6:
+    dependencies:
+      minimatch: 10.2.5
+      minipass: 7.1.3
+      path-scurry: 2.0.2
+
   graceful-fs@4.2.11:
     optional: true
 
@@ -5475,6 +6760,8 @@ snapshots:
     dependencies:
       hasown: 2.0.4
 
+  is-docker@3.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -5483,6 +6770,10 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
   is-node-process@1.2.0: {}
 
   is-number@7.0.0: {}
@@ -5491,6 +6782,10 @@ snapshots:
 
   is-what@4.1.16: {}
 
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isbot@5.1.41: {}
 
   isexe@2.0.0: {}
@@ -5516,8 +6811,10 @@ snapshots:
 
   jiti@1.21.7: {}
 
-  jotai@2.20.0(@types/react@19.2.17)(react@19.2.7):
+  jotai@2.20.0(@babel/core@7.29.7)(@babel/template@7.29.7)(@types/react@19.2.17)(react@19.2.7):
     optionalDependencies:
+      '@babel/core': 7.29.7
+      '@babel/template': 7.29.7
       '@types/react': 19.2.17
       react: 19.2.7
 
@@ -5551,12 +6848,16 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  jsesc@3.1.0: {}
+
   json-buffer@3.0.1: {}
 
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@2.2.3: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -5642,10 +6943,16 @@ snapshots:
 
   long@5.3.2: {}
 
+  loupe@3.2.1: {}
+
   lru-cache@10.4.3: {}
 
   lru-cache@11.5.1: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -5692,6 +6999,8 @@ snapshots:
     dependencies:
       brace-expansion: 2.1.1
 
+  minimist@1.2.8: {}
+
   minipass@7.1.3: {}
 
   ms@2.1.3: {}
@@ -5752,6 +7061,13 @@ snapshots:
 
   obug@2.1.2: {}
 
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -5763,6 +7079,53 @@ snapshots:
 
   outvariant@1.4.3: {}
 
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
+  oxc-resolver@11.20.0:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.20.0
+      '@oxc-resolver/binding-android-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-x64': 11.20.0
+      '@oxc-resolver/binding-freebsd-x64': 11.20.0
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-musl': 11.20.0
+      '@oxc-resolver/binding-openharmony-arm64': 11.20.0
+      '@oxc-resolver/binding-wasm32-wasi': 11.20.0
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.20.0
+      '@oxc-resolver/binding-win32-x64-msvc': 11.20.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -5790,10 +7153,17 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.3
 
+  path-scurry@2.0.2:
+    dependencies:
+      lru-cache: 11.5.1
+      minipass: 7.1.3
+
   path-to-regexp@6.3.0: {}
 
   pathe@2.0.3: {}
 
+  pathval@2.0.1: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -5890,6 +7260,25 @@ snapshots:
       react-stately: 3.47.0(react@19.2.7)
       use-sync-external-store: 1.6.0(react@19.2.7)
 
+  react-docgen-typescript@2.4.0(typescript@6.0.3):
+    dependencies:
+      typescript: 6.0.3
+
+  react-docgen@8.0.3:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
+      doctrine: 3.0.0
+      resolve: 1.22.12
+      strip-indent: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   react-dom@19.2.7(react@19.2.7):
     dependencies:
       react: 19.2.7
@@ -5946,6 +7335,14 @@ snapshots:
 
   readdirp@5.0.0: {}
 
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -5987,6 +7384,8 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.3
       '@rolldown/binding-win32-x64-msvc': 1.0.3
 
+  run-applescript@7.1.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -6018,6 +7417,8 @@ snapshots:
   semver@5.7.2:
     optional: true
 
+  semver@6.3.1: {}
+
   semver@7.8.2: {}
 
   seroval-plugins@1.5.4(seroval@1.5.4):
@@ -6040,8 +7441,7 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map@0.6.1:
-    optional: true
+  source-map@0.6.1: {}
 
   source-map@0.7.6: {}
 
@@ -6053,6 +7453,33 @@ snapshots:
 
   std-env@4.1.0: {}
 
+  storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.0.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.27.7
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.20.0
+      recast: 0.23.11
+      semver: 7.8.2
+      use-sync-external-store: 1.6.0(react@19.2.7)
+      ws: 8.21.0
+    optionalDependencies:
+      '@types/react': 19.2.17
+      prettier: 3.8.3
+    transitivePeerDependencies:
+      - '@testing-library/dom'
+      - bufferutil
+      - react
+      - react-dom
+      - utf-8-validate
+
   strict-event-emitter@0.5.1: {}
 
   string-width@4.2.3:
@@ -6075,10 +7502,14 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-bom@3.0.0: {}
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
 
+  strip-indent@4.1.1: {}
+
   style-mod@4.1.3: {}
 
   stylus@0.64.0:
@@ -6151,6 +7582,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tiny-invariant@1.3.3: {}
+
   tinybench@2.9.0: {}
 
   tinyexec@1.2.4: {}
@@ -6160,8 +7593,12 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyrainbow@2.0.0: {}
+
   tinyrainbow@3.1.0: {}
 
+  tinyspy@4.0.4: {}
+
   tldts-core@7.4.2: {}
 
   tldts@7.4.2:
@@ -6180,8 +7617,16 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  ts-dedent@2.3.0: {}
+
   ts-interface-checker@0.1.13: {}
 
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
   type-check@0.4.0:
@@ -6200,6 +7645,13 @@ snapshots:
 
   undici@7.27.2: {}
 
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
   until-async@3.0.2: {}
 
   update-browserslist-db@1.2.3(browserslist@4.28.2):
@@ -6233,7 +7685,7 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0):
+  vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -6242,16 +7694,17 @@ snapshots:
       tinyglobby: 0.2.17
     optionalDependencies:
       '@types/node': 25.9.2
+      esbuild: 0.27.7
       fsevents: 2.3.3
       jiti: 1.21.7
       less: 4.6.4
       sass: 1.100.0
       stylus: 0.64.0
 
-  vitest@4.1.8(@types/node@25.9.2)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1)(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)):
+  vitest@4.1.8(@types/node@25.9.2)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1)(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)):
     dependencies:
       '@vitest/expect': 4.1.8
-      '@vitest/mocker': 4.1.8(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
+      '@vitest/mocker': 4.1.8(msw@2.14.6(@types/node@25.9.2)(typescript@6.0.3))(vite@8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0))
       '@vitest/pretty-format': 4.1.8
       '@vitest/runner': 4.1.8
       '@vitest/snapshot': 4.1.8
@@ -6268,7 +7721,7 @@ snapshots:
       tinyexec: 1.2.4
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 8.0.16(@types/node@25.9.2)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
+      vite: 8.0.16(@types/node@25.9.2)(esbuild@0.27.7)(jiti@1.21.7)(less@4.6.4)(sass@1.100.0)(stylus@0.64.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.9.2
@@ -6285,6 +7738,8 @@ snapshots:
 
   webidl-conversions@8.0.1: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   websocket-driver@0.7.5:
     dependencies:
       http-parser-js: 0.5.10
@@ -6326,6 +7781,12 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.2.0
 
+  ws@8.21.0: {}
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.1
+
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}
@@ -6336,6 +7797,8 @@ snapshots:
 
   y18n@5.0.8: {}
 
+  yallist@3.1.1: {}
+
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:

From a42b2be1d55b60807c914984c73c5124bf787772 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Mon, 15 Jun 2026 08:23:13 +1000
Subject: [PATCH 32/33] fix(web/feedback): lift Report-a-bug FAB above the
 console status band (bottom-12)

---
 web/src/components/feedback/ReportBugButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/feedback/ReportBugButton.tsx b/web/src/components/feedback/ReportBugButton.tsx
index a60b0877..eeab5897 100644
--- a/web/src/components/feedback/ReportBugButton.tsx
+++ b/web/src/components/feedback/ReportBugButton.tsx
@@ -49,7 +49,10 @@ export function ReportBugButton({
         size="md"
         data-testid="report-bug-fab"
         aria-label="Report a bug"
-        className={cn('fixed bottom-4 right-4 z-30 shadow-pop')}
+        // bottom-12 (not bottom-4): clear the collapsed Console status band
+        // (h-8 = 32px, see preview/Console.tsx) docked at the editor's
+        // bottom-right so the FAB doesn't cover it.
+        className={cn('fixed bottom-12 right-4 z-30 shadow-pop')}
         onClick={() => {
           setOpen(true);
           onOpen?.();

From 2295c1ca886f45bc1e1566c9877bb0e67df9421e Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Mon, 15 Jun 2026 08:28:46 +1000
Subject: [PATCH 33/33] =?UTF-8?q?fix(web):=20add=20canonical=20ZenUML=20fa?=
 =?UTF-8?q?vicon=20(tab=20icon=20was=20empty=20=E2=80=94=20no=20icon=20lin?=
 =?UTF-8?q?k)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/index.html                 |   4 ++++
 web/public/favicon-128x128.png | Bin 0 -> 9424 bytes
 2 files changed, 4 insertions(+)
 create mode 100644 web/public/favicon-128x128.png

diff --git a/web/index.html b/web/index.html
index eac4ef31..c01eb329 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Canonical ZenUML favicon (served from web/public). Without an icon link the
+         browser requests a non-existent /favicon.ico and shows an empty tab icon. -->
+    <link rel="icon" type="image/png" href="/favicon-128x128.png" />
+    <link rel="apple-touch-icon" href="/favicon-128x128.png" />
     <title>ZenUML — Sequence Diagrams</title>
     <!-- Design system "Drafting Table": Hanken Grotesk (UI), IBM Plex Mono
          (code-adjacent metadata), Instrument Serif (editorial accents). -->
diff --git a/web/public/favicon-128x128.png b/web/public/favicon-128x128.png
new file mode 100644
index 0000000000000000000000000000000000000000..182af5896fce185897cce56c47c5e59d4a6c371e
GIT binary patch
literal 9424
zcmaiY1yo&2((XP4cXx+CAh_$nH9&B8IJmoW2ol`gosi%VTmwOaClK7-9Rh?$?%aQ7
z-n{wO+iP`qb=CJ(SM{#7_U?{QR+2$OCPoGT08LI-QuTR+{%MHt&wVf0WCQ?E?W`pv
zl;tEOD3x6tEv)Sz03aKYqJ^NXHiVz6mlz*EA)bcqgHwznDv!tvy`=t$C`VZkl8&i<
z2vO<z9Q8`mO+&J_68f|Db(HA|3M1oi>xU?`6kaNj!A;6Z&PkT<Q#Suao{Oc+2}tzf
zg%<UY%xB;gCV?CdjW}V^G$&!Pk|+osirxSfOruY#S>G@Nl6&q~ww4s3ua0N4@${dv
zpQ;Oc2?o6YN;9gl^${;P%sc=v8c33j0w@_THIpJ~k%dr94H!@{*He(Qi~0m{`QAjt
zq5h<$ucPXOffA>Tq-+EE&J_DZU)xCsi_VBlwb+el;YD5f`htY0(lBbNuh-z<LXq{6
zYK0rpL{T?D-zrY{Tz~iHarcdHZKIk%3||!DGbYNNx2XLdpL%d)7)-<XRTCP_m@G}l
zc>bQdJx7bMvRgg8?W<0$bEK}sgIJ%|3>lD2oh(!O>PQ7AHyZ5#;gZT@%T=O?iYJIq
zKbwN2Xvz{2^@Sg^cj=uHKAv+T6;Fs)kSKm?aorp(vx54a_(6S%U8;Ow?rXBsPp4PP
zxoKZi&$_UX`4|HfiX_vs;o0F#4@^~TnEHq@+Xl}Q3pIFX-h>?f6eB4YQo-ut?u&qN
zmJCm%cs-UHM*s0}1lc_J&NM58TB!p0gcX}khVdXcXWJQJ{e6qE7Obh}FlC%5kAMXm
zK_?}bLWbbAKBbbJ>X~0WZYV9|>^iPoK>ILx6Yi$WtIJeO-{Ht4b=$M=)Xn@U4_=MM
zufRG)^oEHeF_BvR!K`rXP&9GSi@~))m{3ZBaNRbN)-~2G1-?}nhCvX_YQ+?4l`Kg*
zR<AAgD^Q>)El^kBPW7T5Mj7?WD6C=l6Xzg#Iy1R;0z$61K2RtIeqg51eo20wikvGN
zvrDnu;&f`<e&_UR`>7*9`ChU2T_$0QG<Y|mfZs|El_m_ECSpwzVUZA{@9~V#3oWdd
z%yPXm*xRq3Ug%{57CDv!<~))oUHG<aV7Lpe)%%CFkGkgmMktH;E<S5iUV!=gZ_Qu_
z)NJRsyYE90#KsMkM>M}yen8$pIPQX+E=?=XB^V67nuC%mG(I_(gcXI&Vn!9ttjx*~
z+0H0;%t>&H{IU$x@&~ueJXu9BccUBc)Fl0cJ4BoT2!A?PVA=M>GM-Kx`*75>!FRkw
z?@L1PmV7!L(701qSKZb<nBV%P!>>h~u3yaObtpcBTmDK$yU)0%DHz&=b)g@|xoEJo
z1Sq%LCI=ch;=nIcg$IoAE-kKr5c!r@RswIcSoZmVd%x8)kxNC(aad73GU&y7FBj`t
z)%UMiU~gFqkltouvAxjjCg0vbZx0edgg2o??h7)HNAK@tL|Fr;y^}L0PDhg$<JU&k
z4Ek(L^ApAcx@0V31;}*EIpOQWXmz7GVI1cwonl`?J@YZdFtNoYcEhnuV}DXAg$sU>
zgh^ndg_o0@N>HFhz@l+6C*~kvkV&PnO&FC$tHa<A$(CfHv>zlZez7OMOqr*QT2k2h
zfx#v!Ry5-kN{n>Uq_Y*e02Z^@PC?Y9d;{@P=u8p)<eOcz1~UJMYg0gN;F2BX8<Cl*
z9TWOUcO5$e&x_Z+j5RhD=(g|1?}%q&-OVVRsg(wZnmHGH61<Sddg<3WPo-{k{SXY}
z^7^aS$h<Iqr-;&|V`d`;z@nRQQN3r2P?rBdX-7j!n;m3Xo^%>3OS_MA6b?RRD#dY)
zP>YBPKZx)Rrw_O98|X8{jxd*Wp@xfJm(^FrDo<_*Ylw2oc1!s#_bb1&%A#t!3co6~
zfKD^3NVA|(?I?X-<FloWzd3Uq+FTr|%yv>)d|G@{V%A{VP|hYelILqIwy0d`rmBS+
zBZGS~XYze=)BgT`>VD@w(mwT-&VI_i?~n0Mo*x2>_m#=Y?e?`lX1Aud=J>qxdH*X_
zx@d0doi$Md^}MMr+7a#%)lo3KL9bMBQO|68xk`yjwX?=X3Z2fhbW#bwVZCI%_yu$u
zGU~uwms*Lh7xjr-;*<PA{0wuYp?zy(mPfWn&^7f@&OAXw-a)*Zo%<KJTY(F=#@*~G
zZ-s$fO*ft#nY=eE@*)x^-(T*}@42|Sx{tVf9yIP>@9yn-@0aW=&U~5@{5V?`x3{qG
zdU<h`wtF($RsJ;8{T&LSWYe}%wsiWj+OfvgYb+6DlCehKOA?kBO(<<5?JYeLO&m>5
zxX~ZmkJO(O%}bcaeoS5}_$`poQG2fDvG+JLpDvazf=*4bF})%EGBYznI$d62Ha(Z)
zh-aD?g=d6Y&)VZ##YnaTxfKhCk#)f01Dr%$kLe~SBT*TVFg_iA0=`SsD1Ifrf2v0+
zL#iv&jW)QZP@BE7u2NH%TklFcOE0c2*TTToe>Tjnw*hOuqLJV7VtHnaXVjz9KKRI0
zP(m=)Ai|(>$=^5AKmJkj-sb)QT@s;GBDdG){p;8dMQKG7wZmt1IQyGNv@W_Q-+8jx
z7CoE2ysl35#?&oSU29z{UEfD_zKI?oO@mL<qN$KEkJjc{UktCVGOW6*(la<|*=v?+
z8FjXG@!dGy9doUA={gp>K)gxco7_E{pB_?MZRxpaBv`Udp7pD?sAgRTFRPvioUl;X
z<|*X4gPYP@zj<v_Z+jcPa|}OGSfS~pcx-=+e7L@U+&ekU+v%Eqx|3~7c$c6j14gew
zU4^$px56-owSad(w!^4HT!+^{5Jql9-bQdl3Fvn*-m3GcH4JSIla)XZYqz|wEvtVU
zVp@Pz04b<65insevF#-f(+k@PnGL&<^paAD;lq*(kB-&H_l`0fUURnL6IKDMOcyE1
zs1+p@&Pt0!I!7n;bH#|uNX6)~?*~*UR`4}aq4znjYxW6;H$~+U2J!`^W9BKRoN`Sv
zJL|5u(E3b;6z9mDBuXTv(XPCyeVb6mRc2Eft5_-LpNF5>C{*cx89q5JV<gY3L{P$O
z5znE@*$BCeMIx!UQP|P0t}QWhjIAf(^<E4;>)*H-pvcMR4-#AxrK93xcD3BLbRccY
zT*&%5q?`7m*X%;`!tgx!?)9C)JD|s<r~VLnxHUKK3ge==>4p>>g7?J%ORqumQh=Ak
z)9m=Zy}A9!`|-~D&KLPRG6xEJgnOU&`gEv8XcEc-tx}?@+`VL1#3#CI*`ksK^KiTD
zidtEMfbUI%M_VF8f{`zxK1GTs$mh5j*Ik>RZKg8Bs^KenYhoLokEr`GI@(-tMOoLE
zxhq&It_Z!zNZ>B=F8%S%n^VwI>f1bf7KfnYwWF*44pZL6>|#TU;)TM_Xy(mrS$Lk!
z8*cfMlBVtZ@s(!4h*Ec=b;4{dGt_A07D6y$F!Fj>gms;{^|pRtJVoS&b<A+Fwa<4b
ztfa4Gy@WRnj(MS0-`9KSeBiZo<p-l7ZJoyRY7HDsgAb<_Kbte_bURx+I7;iBW3Dnw
zY{AudRUImLs-G=$hFU`pmaBKFyIQHdB$lM7W41^{?6K`zJNQjq{Xg5gf5l%<U1xsV
zRO%pngL09UY2Uvv+~hyUvb@|$<2<lOoR^uILnoN_z3}t-e3gNjr@<UqYg_GDi^B!^
zqwtn*kKx@i!9B;#(jrAi*Bx*nx>U{6RV64ZqOBSC{cZV)H6~93Zz*phS){=C#myDB
z)0&aBBN?Vxb+R9Vt($~fKikb72j0Zq<i=<3f-_vtoi9SReaoctS_1^u+zv8!Id{gx
z@`T-E-H&hYpcgVMw+4J}3Es79i8m#`@T*gUySyJgYJRkR{#`e|)&IIvD|24Dk*tl_
z?P~M$gso+@Yn4$emT%FK#qj7tQ~$C}*J#({gVOJuS<k4G>!mFBJg2V1pqb#v_jDMa
z0zGg2-?n+)PsUEfrpn009Sd&@2i!?sZ@TWZmo=2(jepDgA><htQ2e_6U^t4MRlrEz
z@Y+4?cfsR8tJZaOz$54FcxvvXa87ke_5BKykL{($y-{u;_f7u|*iY-U>coEzp$J0|
z%psC{pM1Tivr;@>Jf31i+R5b~^V_GZE5FO=ONt8u7><o^;?NFQwnKoXq61{t_Q~wS
zhEAfGkS76Xci@-d0B6y5(1+la6QrfngKd1kx9Q6@%DL?qL+)I7(K=R9VWF@vdGk5)
zV|f<FLp4N<`}>tIxiJkeP}Vp1_xB&~@4M`RdcG{5g=o(OGln4ghAEmD)gjk)cVR&S
ze;LGzEC*4;ygl7`G(uvIpZl@a{CxTVLLl057K(}h<Fkwiz=Pm{7taz1fO+n)|CT||
zGBE)6mmUB#K_vf_4MDH|g@11i!2XS~cpm>evd`_A{r3oy5A#n1H2=lF<Ui1bDyio~
z4}jz(tK$j)C^&x_2*}JP1b`RB*6P}B+KLJSW{&nOCgzT&5Ed_cr#~z}$V=c^w1>Ev
zP<q+hIk*aV2~+=t5O|jVs9C8g|AM&L3R7z<DpN{0x<Dv-SlC$DsKLmTl$1g)<`x2~
zlG1<EpJ&3<R&H)i0<5f_o}Mh8oGgwmmaOdj{QRtJ9IPB1%+CmBS8oS56E9{5SDJq~
z`5!-$5LYu7YbQ5rM+eG3eoagr-Q9$#ssAkW&*vX;x>;NNYb6KQzteh7koAv+m7Rr+
z^}o>|Ue^B$?T_Ujw7>HD$8th{oC!!c+B>;GTwR~T0<#PKwZQ+S`&W4Xz^g)B9qruz
zWTD|;?FQ!foAMv(|72<Z%MRxKAI`rk|C6Be-w6M%{7-_im7|;E^GkKHHj{I3gSb2=
z<!16H%zuXXza#$B*IO5B$n#75i~T=)^6$ET!~fY?0cC41h@G~iwLQe)uYKfT<Kh!y
z{ja9~O4a$_ssCpBn<~Wmr+WUan*LF$e`%j<6^tyz`p>!tBhTkR=K%m$T~1O=-3xSN
z;2W>^!&~IWP_8Y}qoXaIdjp|Ixhtk4{w0r`b%#SHHb+L-LoEwreo7oA$T-Y8D;1rL
z>4u#sJzmZrtDovyaY@0R4c&B@%&UT{QZ&LO?trxz3c@U7-&)TOj1zfXxtrzb70;@M
z##!AxayhNkKK{mQ`J3E<o5#)*zn$z8zZ=7TbydVyu(&YDpiro|C{;eD^8Y*CrvM#A
z)(^Jy^Ke%B!cD{9`<6{ky9c$q-~Lkb+tnW3GbP?@lkLbTa<wv={95!FU9Wg+MclP%
zy7aWW$KLAUWTa*OzWUhPeaP4ogCO1Q1qp7(43fU4s(Iru7k<QUj%%0IVZdtYrJKO4
z-Q(B8W{WZQba0k)M~baxeZM#6QlZ#JYn<&OG$y@JZHM@As@Z;{nrh6|;y{3L`va8y
zVTb3@eDLF5GKmpOm6-rqOF)rPp{I+(MtJb_8}6mj_7BRW{H_6<4$g|R<*-c&{CX5W
zg2J39d7PO;ACNGGKrYhm{o~HPq>E1}KZ2(#MR%^jPsc$@QBqu!N{wLFSha2+75-rF
zlYNNviO=Y_nXdf|BR8AW7IK9Z<l@v|sCV<s$9ob&PCq`hIkA2<vH~XDVa>!8s+5s{
zaTn!274;yI3A7KmW~pE8IOVzqR2Bg6`%^Ol%TBV9ZBj46R+C_<%J`H+h(TjoBxMxp
z<Q8K>#yE24MjraOrRF*K657Vq+obP^%4x9>on`Gt?q}D-8egz1VODstq9H+GS$LMb
zjoYHyX*+$fGm>>Of9X^DgdeGR8Nu3GO2THU?2|_kHe&3-*yAPOj`~W{#I5uGnC4Tg
z3f>p$&6?clPpsRX4mFYG40`Y|yRjU?tzz}5J?-}`El8=i0W^#A-97m^N@C~no!!vG
z&uk}KWi)Tzx>FSFed&uYFFOg_M%nd|h@Y#yNF6;4oQdhixhL26iIlSPl3={3QPy0w
z=8$+tFQ8>Fc>A94Ll-1uLAT<T(A|Of$vSa^O*}(=I22%bVY16B&W!p~u`upo>-T#t
zhk|dW+Tj&>#HxGx4CQvn@h>ad+6MUA9lmxEucfvf_Q47W9tuU1hBN8um9Xh^LfEJK
zM3SsqR|p(TEbKN1m>k?so^)jn*VjI)2MkjuSDb1I*LNv4U6J`Tf9{Qp`ABZ`(JlL&
zi>ufK4W<VEgmXc+=_w&LX-oB8;wXE@qhUHNcBjRGzfVm|ZziE)kkvQ4<Q7kJ?J1-E
zV$f@z)F~2iUN(ckoql_SsuCm~_x3~^>9r|b;J}yoVkii-c0=5=O;T~|h1?HTW;FTu
zzy%8}&xtO%3Ud<lqk3v{S?HnL_fkvhwVqr0%_IkE)vCah7%ZqCG3sUt{EXeH_cLm=
z?CxmDYZ!4<cennCLg2F<OCyI$)h@rN2kQP$pH;)?yYU{$$@I4tMlVmWWbZQPVYY8i
zXRjUguVPdmV81c|3L;UGhgnVS(+>MVH*QPmaF*!IM)Gy9mNztcnJ4HH;Vp?%gRc`G
zNd#k~3i1&t#8hAoOtU2Uv+j6IB4F00Ro^0Yz1t6!qJC>u9wV23?fKn-;DA{^^&Fpa
z`d;v<-~`9I=nRpo7SuPPD%DwqOs(mun2;w*oBq!HSHFLt&vcJz1+-ztt<u#eP#$Fw
z0gZM|?L_NKbwij5CZ$XQR`yrBuHOLnibe=tDjw+;{phroqwqxaJxSX9UNP}KXb?}H
zhbPf3S1H$m;?SV(i6js+*o%^8UfDHmlS%Y#++f$Qy(L>N8eq-LtPHWzRVH(I3kH;v
z#emWo<UR8)rAg)YF?mZ%dNPdLRTD~-$^GTkseA!H3r~PP=Epj(PyjCH7Diz<dL^HZ
z1>@7mN=-71G82i$`}`Qa+7X)0?P^1VD^d^^S?G`a(#n!X9|ou-_0TJ5>fHWS(P#;q
z@b_p1Z=^bP%^O5Yak#o}UE|3q-#lB7bvO&e$RU+-Ur=NUx!D`?KxcHi{EOz7jl~f9
z1b$iNGI?<*6Er@QM@G+WNnb^)@A2ce4j4NRMsD!}TTJUYrZ3IeA953SwL;%WcI%+e
zXNmy4e%&fiJe66p=?)lkMs7c}dT!*^5DaWEFpHKlSjw170Lror%Oe66<<z-v<SlIK
zg6dM{7p<n<=EKIKksS0??}Q|Qo*hI+DRsXrJDMsyO1)Z#Q;WXtjWS<LiN*>6pAg_m
zia6H2L#GkW8gBI)qCiZu2hY${@i{>RwEr^NZc&S}641Vd3u$DyYm;fA=9j`PPtP9W
zqOS%#=yoL(pUj=AWDT`}Jwh>SxNhtTh9V|WsSw6##P%<4E1~L%n!q>SVv>YHSqKX;
z=r*Kyi@^Z+-m{i}7&xhVUPs9#+UVmAmoJwuuMr9T4vt?H(*^D3J~D0@CTR36XE(sG
zp<!4kmpfp_Ye8F0I>?C<C}2L$XD5{xU{vze59ng+rEU*brf=Q5YA^yId>B@1zn)<C
z&9X*~!k2wAG!4+c#1DuR?#3X*20(NHuSw@;SuG@7gjy<pS^W*ehz!No(e*&fB0~_Q
z>IDiWEQTY!-Sr{;!p}6p1%~hCsha^vm6ATg4Rbfkx8cGbUfGpF*b0dj>M9>UQbEao
z@z}X|_}0fgF5A266m@~KV{abkg|07aX_$NwVmt+uHzWX}8qjGCi`A;NoYHvpRt=6%
ze-t_xhHzMuXV;F>zMe9`w+wJ+gPjN{MJl%x8{QSeBT__C<-l_7LqR2>3pT{CJjWL`
zgwWoy(j6qPMltA@K-%%|;TpHTG8nCk+wSX;QRd_3qd#AY!`)HkQ-1<7m!{`CCmddG
z%OBbZxz5GW3;BZe4Mi)dSBQJm2;1S<${A?sGC`BVv!Uk(O3i+O*XkfjX|~E*PHhwl
zn)k9E(5`Hk9n{fVHZ?=ihJD7}Y)y{p0cZLYy*PX)?N|*75}z?xa;;;?xg;puT(?I}
zCcsr_w9`ogy5#Af9{S)VE5H(&Aq=5LYk4&}-tcu!!z51|Y~WVT(`9jc(bMp_fh=@{
z^98qkXC2-PQC4|dsP!o@N2!K)EXz(YsV6bRwk6WQM`_u@s}P{|qlT~&dT+V9>dX$$
zF%f>iC>tw*?mU02Pn?3|gdg<s2J^h<f5_m_`FfA*T(=3n|H*tBHIXa3rv6d_s32It
ztN*EI)S6mpaJX1OeK3(xTZSuL!00-7zCwCg+Xm*0`@DJ^IxAwD=Wt$|j?f#_K8y=Z
z^Ei{eU1_hCLR=};auD^E%jd|08U4NpAzEgr&Y4UXbja=fZD$gGl-+QOoFZ;Ff&qeP
z0c&5r@^uDSAK-rOi<fsnj7P~3z$g(+{miC|4{N2G!aEeD)+uQSV^xS!$UbL_B8Y*e
z@r4!8?i?ZVHd+ed)AwT)idGMT>qb!y*$~WiA*a~1IZng~iM#lW>V+d`9B~pVnB*6j
z%DN^`nSFEzU4FkQZEK)$TRV0+<7^yJLTjIxBA8+TS|@B0sEK`wTIxOQEr8`@bC?VX
z>*sVXK4AfGSzOA`?u6}>3z@D*SDG8&9J7wsi=0rH*^0wUWGe)zv-Lu@Mydcwn8N11
z)~lW;zMfcg1;jFRb_pDkro53?m1j5(cldWuJSp)bVQ~L(z?noNZT`j*yF+3-pRhA*
z!j279gYnx%(>K45`0jsAS<JArh9Kre(>u`_=JS~|3|cpM$Ys@#b3!UhF65e<Jju!N
zQ(0F65Q)5qcgzScR(`Yf|Gw@(YQ!}$A9X@%Ly1jk0?v`0s5H%_iJ%Br_dEm}Gk$)*
z_b0sj(N{-JLb35ey8H}$p&gAMK5yee!|brFU~ty2s&hTAVLl|a5)DrtIHCzU7<+!9
zcY19Cs;gEhxjrwBW(sW!WbS9Bpi-d})B34%nfmh72XD+EzmBmLHEPVk@vL6OF0y3~
zjdseKKc?F%p}kLh9%j{AQq?0Yc`2hESJO9B5Y_l=(ib*mM+W$vpWdfo1k?nzqX+nC
z43pvVTlW1@tTG;NQWe0gpAEud=fAyXRocV8^jMyUl~Kt-0a?RAMN}C?S!h44>%)Zs
zk^-;c;&DB;fTWZ0^Or)6KymLTY&oe_;uI5|V0uA{DEB#S2XeP-I4M{ty;9|C!%j{=
zBUFDdc~CfW+?$$1V~=A0b@4ZNQvOZq8!+8R7zw}-ckLAvVLv(ryA6E|dXo31)}Nkq
z0INlMC{#I$!X;2`-rX(vib}SWh?tU<n&>E%cXtXOh<kZ0dWoK-&JH)m5`?{YcP@9G
z5=v8nM9!|tuL_t*kSRcv%k2zJVYsH$=b%DitLRTzIP8tc&i<jiuJSK63_FVPy2Aul
zMkb>R5yf};O-Lz3IMyh27+JLHguDtYUrcla6_YHN%4-8cFXcZp%VaAf&<mGt=)w}t
z?BC{vBCu*0C!LdV>MdRrHNZh7+qKMV6l0p*seEHqN4Y4gt<QOiEV`9LTE+5Z;XZ_8
zIZ1R4yCT7yuP3tvbx^*1d?Q+2NFjANE&CdPw=4lPXfNK#u5HRCyqQ7<MB*P5Bx31O
z+GJsyt0ozB8HZj2^*OhFHlBmBJ<1pvlXpkacC<eeG=b(#RTc-81WGXoGY!lotw1?#
zCE%rUR9r8wMJI~9hipF6oD**^tqW>~3}io2Ud<@$)CiBfC3&fxt<#8?WZ(N4Mp8%p
zyM5LkJ4+aGtuW0(?(hi`%+G>)X1+Z|g4&xj>{VTmc3@L|UwSs__8zVMcscv3DpU0;
zYrFWeJf|Q89SdtR;O33{4RXy;ITyE&Pxyj|Lht>?MCxVh1#+Q!p5pW}YDkchbw)%%
zJ$h1>!NtBIh=c6+qx}sA^{dSai*SG15}>N!`V|eS>m`RHpVfQm`<ra6N=crU)F@xL
z{N>|zmVjiv8Fn9omUM5gzO;`s%rKad7<DyAI1(a0HiHQX_xWT*aK=k2&KE>Gdwt}K
zZA|K4m@^pjWDw)wpxljW5&l+GcnPR8@v6|nO;Z=QQ$;RW9I^6qa<S91Dts)?MTPpy
z+g%b^$-c)^R;MH!<34ugfzIDsU|){2f^CWJ+*#+?cM4aQ@URp2k73;W&JLTEPm2ua
zlACnfF33O;#ai}oHW&SX(T^7~TxiN!5}dLF7t`5#K9qwMl80Rgfpw4mGCaovfrW21
zLE0hG0mZkzzJbR5{dTA?+*q3qbm&tw$`uf;GEL~sm;&~9Q9evYnw!(8wKc$quC}+m
zC!z53++cYf@LNW@hA0?FTMkR6Qr#L21$bln=|-dDp2j1XZywYy0|x1|#{70R@qo`#
zZBnbpo2Q+#P3dQ~w9}z#qOE6sA?3E-Sinr?xO{Z|Sy5YOX!b?|wU5YW<zyK13gCV>
zRMC-sJZISkHp_}7zXG7r%`hh}z)vL>ygy`Z5}8`Sn-gn#i}wQ*r3SDOE#>P(@i?%@
zNrJn$xrI(ku`=OiDbtqYs!$Exza!I6Q(TwHfCZd(t3~cF3k7*feP|Arge92}P)qE0
z<1Lk^#e1^Ap3{ZCxeuO2<&aL{2ws|rKIM}0KYz+wTlI8iG-ZYX*PdZU3)gf^j_p5}
z-@@YCgJ3;P#eZ^U{Jc*Jw)A{hrFsnpSMY|&-VS3ULWghZY5W9<;_?oBuc#2aFiJ&q
zB2Ob)6Hl~{<D|WxPs<0p(>JJf{W`u97X(kOtc&xJOAK|e<|gv>9FV>m=}(2VOW%VP
z0~CHqj~xYE^-Pb8T>l!D9lsr?F=A>dN~r)~_q*S$)QZJ>uP?;q#^mtV)_Xhea0I@&
z|GcQsBhjsR=A~SMD78zWSiwzp@w%6k%<txVT-W32Dn{O~xx$$0XtIF)F?B3FL(Srf
zj{1w=N57X=yrG7;HO6N+)emwt{yh}IUREr}=MZIBwqVv0G{Ll5Wl#EvjiEN=9^NqS
z=o=w!zx_Ljw~L)<*}0-JB*KJq%J^$IE|6M42MhHuU?^7dc2jWZ_h$DE#mXr0LcsEb
zhaw6c3ol`h4txcO=^fg3$bI@u-CS1S$j5LUpO3%O&+@6W<IDs?Ng_b+$7SBlwm@w5
zYJ2ix4g>6`&zJ)*{VwXp(f#%^=w*DmS_^iG0$GHFUXagF!rDT$3~D}YKmA?_w3(UG
z3tX7xy4SkupCDaY0r0v%t<^-mTt~qgjRzHccs>^PfBZ$-$9(KNK#KI3tzrjfzlTk}
zd)8~==eBcqbKUN>-y&ljY-zP6u`ovAxBbandL&m!4JgE&5q(Mvj^pm4@K4OWnOLl`
zI&!}_Ztf~7cx-+9CA3}P24UMaY%<b7sw<q0n$2qL)ra%shPoFz&Ej>3mlT1<unb`s
zuC&vQM=BPj@T*h8*`(l>oo`Q4H~sg90<pjP@t5zc9@IPoErg!$H!PJJBl8s^F@>A?
z-Pnkc-m&|L@sa5f<NNz~j3^#dIkemK*a-`L`eB90O#}`MzkBeKi99A)k|<l1zzXE!
ztc(?b8Qhk;JKt<et>iGu&7R$z#B|EgTW1E?Jhh4SEU@3b)gI~#AtIqr#K<Ej7rdNN
ze(1K{nLw4g>_3xZ>9`r{+aEWgxKTaTX|#an&MNvQQ(@pQqeOw!7k7vneH{?DK5RuU
zPLWAEm0(qP;`U8y<<gb*He(D@4M{Qc0pq^p_g2l_AEUFOxi2_!{iR%8S~Tafuw=1u
z#aov8G|W7t+V1n=jldR+WNTs~a{i5*Owljnz&4&i_^VC+L#I)2QHB`}(LBC_hT}lp
zPN|Z{7J=|$szx)aKYd1ZNzDD2K`)8L+tdDOnuo9zyZWM~rG^|Zv!g~`arpoLg3g9G
a=m}x$P6$W6_0M%Y0LV!xNmhv)zxzKdLTTIp

literal 0
HcmV?d00001