From f4e39426b7e07f48e557c0824d55da34cfd43a70 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 9 Jul 2026 15:04:33 -0500
Subject: [PATCH 01/16] docs: add Phase A key-lifecycle expansion spec

---
 ...-09-devkey-phase-a-key-lifecycle-design.md | 204 ++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md

diff --git a/docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md b/docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md
new file mode 100644
index 0000000..157af44
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md
@@ -0,0 +1,204 @@
+# DevKey Expansion — Phase A: Key Lifecycle
+
+**Date:** 2026-07-09
+**Status:** Approved design, pending implementation plan
+**Scope:** Phase A of the DevKey coverage-expansion roadmap (below).
+
+## Context
+
+DevKey is a Vuetify0 reference project — an "API key dashboard" whose real job is
+to demonstrate idiomatic v0 patterns in a realistic app. Today it exercises ~5 of
+40 v0 components (`Button`, `Toggle`, `Tabs`, `Collapsible`, `Input`) plus
+`createDataTable`, `createFilter`, `useVirtualFocus`, `useHotkey`, and 5 plugins.
+Most product surfaces are stubs: New Key / Rotate / Revoke are `alert()` calls, and
+the Analytics and Settings tabs say "coming soon."
+
+The expansion goal chosen with the user is **breadth-first coverage** organized as a
+**hybrid**: map every primitive that plausibly fits the dashboard into real product
+flows, and reserve a later `/components` gallery route for primitives with no honest
+product home. The overriding constraint: every primitive must be used the **canonical,
+documented way** — DevKey is held up as reference, so no contrived usage and no
+hand-rolled logic where a v0 primitive exists.
+
+### House pattern (the "parameters" to stay within)
+
+- Thin `Dk*` wrapper components over v0 **compound** primitives (Root + sub-components).
+- `<script setup lang="ts">`, `defineOptions({ name })`, `defineModel`, destructured
+  `defineProps` with defaults (never `withDefaults`).
+- Scoped CSS keyed on `--v0-theme-*` variables; state via `data-*` attributes.
+- Reactivity: `shallowRef` primitives, `ref` objects, `toRef` derived.
+- Precedent already in-repo: `DkCommandPalette` uses `Dialog.Root`/`Dialog.Content`
+  idiomatically; `DkInput` wraps `Input` with `rules`; the rules plugin ships
+  `required`/`email` aliases; the permissions plugin ships `admin`/`developer`/`viewer`.
+
+### Full roadmap (for orientation — only Phase A is specced here)
+
+| Phase | Theme | Primitives retired from "unused" |
+|-------|-------|----------------------------------|
+| **A** | Key lifecycle | Dialog, AlertDialog, Form, Select, Switch, NumberField, Checkbox, Snackbar, Pagination, Tooltip + createForm/createValidation/useRules/useNotifications/createQueue/createGroup/createPagination/usePopover/useStorage |
+| B | Navigation & chrome | Treeview, Breadcrumbs, Overflow, Avatar, Popover, Splitter, Step + createNested/createBreadcrumbs/createOverflow/createStep/usePermissions |
+| C | Analytics tab | Progress, Slider, Carousel, Rating, ExpansionPanel + createSlider/createVirtual/createSortable/useDragDrop/useIntersectionObserver/useResizeObserver |
+| D | Settings tab | Radio, Select, Checkbox, Combobox, Image, AspectRatio, Locale + useLocale/useDate/useRtl/useStorage/createCombobox/useImage/createModel |
+| E | `/components` gallery | Atom, Portal, Presence, Group, Selection, Single, Scrim, Theme + leftover system/util composables |
+
+## Goals
+
+- Replace every Phase A stub with a working, persisted, canonical v0 flow.
+- Add reusable `Dk*` wrappers for each new primitive, matching the house pattern.
+- Persist key data so create/revoke/rotate survive reload (demonstrates `useStorage`).
+
+## Non-goals
+
+- Phases B–E (separate spec → plan cycles).
+- Migrating `DkCommandPalette` to the new `DkDialog` wrapper (out of scope; keep focused).
+- A backend. All data is client-side; "secrets" are demo strings.
+- New tests (per repo convention, tests are added only when explicitly requested).
+
+## Data layer — `useKeys()`
+
+Extract the hardcoded `apiKeys` array from `DashboardPage.vue` into a composable
+`src/composables/useKeys.ts`, backed by `useStorage` (the storage plugin is already
+registered). Shape:
+
+```ts
+interface ApiKey {
+  id: string
+  name: string
+  key: string          // e.g. dk_live_… / dk_test_…
+  env: 'live' | 'test'
+  autoRotate: boolean
+  expiresInDays: number
+  created: string       // ISO date
+  lastUsed: string      // ISO date
+}
+```
+
+API surface: `all` (reactive list), `add(input)`, `remove(id)`, `removeMany(ids)`,
+`rotate(id)` (regenerates the `key` string, bumps `lastUsed`). Seeded with the current
+five demo rows on first run. Key generation is a local helper (`dk_${env}_${random}`).
+
+> Note: persisting "secrets" to `localStorage` is unrealistic for a real product but
+> acceptable for a demo; it is the honest way to show `useStorage` driving CRUD.
+
+## New `Dk*` wrappers (verified compound structures)
+
+Each wraps the documented compound API. Structures below are confirmed against the
+current v0 source via Vuetify MCP.
+
+- **`DkDialog.vue`** — `Dialog.Root` (`v-model` open) › `Dialog.Content` › `Dialog.Title`,
+  `Dialog.Description`, body slot, `Dialog.Close`. Optional `Dialog.Activator` via slot.
+  Backdrop via `Scrim`. Slots: `activator`, `title`, default (body), `actions`.
+- **`DkForm.vue`** — wraps `Form` with `v-model` (`boolean | null` validity) and
+  `@submit` emitting `{ valid }`. Renders a `<form>`; children are validation-aware
+  fields that auto-register through the form's context.
+- **`DkSelect.vue`** — `Select.Root` (`v-model`) › `Select.Activator` (`Select.Value`
+  slot exposing `selectedValue` + `Select.Placeholder` + `Select.Cue`) › `Select.Content`
+  › `Select.Item` (`:id` + `:value`, `v-slot="{ isSelected, attrs }"`). Prop: `items`.
+- **`DkSwitch.vue`** — `Switch.Root` (`v-model`) › `Switch.Track` › `Switch.Thumb`,
+  wrapped in a `<label>` with slotted text.
+- **`DkNumberField.vue`** — `NumberField.Root` (`v-model`, `:min`/`:max`/`:step`) ›
+  `NumberField.Decrement`, `NumberField.Control`, `NumberField.Increment`, optional
+  `NumberField.Description`/`NumberField.Error`.
+- **`DkCheckbox.vue`** — `Checkbox.Root` (`v-model`, or `:value` inside a group) ›
+  `Checkbox.Indicator`. A `select-all` variant uses `Checkbox.SelectAll` +
+  `Checkbox.Indicator` with the `isMixed` slot prop for the tri-state header.
+- **`DkAlertDialog.vue`** — `AlertDialog.Root` › `AlertDialog.Content` › `AlertDialog.Title`,
+  `AlertDialog.Description`, `AlertDialog.Cancel`, `AlertDialog.Action` (confirm).
+  `v-model` open + `@confirm` emit. Slots: `title`, default, `confirm-label`.
+- **`DkSnackbar.vue`** — `Snackbar.Portal` › `Snackbar.Queue` (`v-slot="{ items }"`,
+  bound to `useNotifications` by namespace) › `Snackbar.Root :id` › `Snackbar.Content`
+  (`{{ item.subject }}`) + `Snackbar.Close`. Severity → styling via `data-severity`.
+  Mounted **once** in `DkLayout`.
+- **`DkPagination.vue`** — `Pagination.Root` (`v-model` page, `:size`) › `Pagination.First`,
+  `Pagination.Prev`, `Pagination.Item`/`Pagination.Ellipsis` (from the items slot),
+  `Pagination.Next`, `Pagination.Last`, `Pagination.Status` (sr-only).
+- **`DkTooltip.vue`** — `Tooltip.Root` › `Tooltip.Activator` (default slot) ›
+  `Tooltip.Content` (`text` prop / slot).
+
+## Feature wiring
+
+### New Key (Dialog + Form)
+`DkDialog` triggered by the existing "New Key" button, containing a `DkForm`:
+- `DkInput` — name, `rules: ['required']` (existing alias).
+- `DkSelect` — environment: `live` / `test`.
+- `DkSwitch` — auto-rotate.
+- `DkNumberField` — expiry days (`min 1`, `max 365`, default 90).
+
+On `@submit` with `valid === true`: `keys.add(form)`, close dialog,
+`notifications.send({ subject: 'API key created', severity: 'success' })`. Invalid
+submit keeps the dialog open and surfaces per-field errors (already handled by `DkInput`).
+
+### Revoke (AlertDialog)
+Each table row gets a Revoke action opening `DkAlertDialog`. `@confirm` →
+`keys.remove(id)` → `notifications.send({ subject: 'API key revoked', severity: 'info' })`.
+
+### Rotate
+Row action → `keys.rotate(id)` → success toast. No confirmation (non-destructive).
+
+### Table interactions (`DkTable` changes)
+`DkTable` already runs `createDataTable` with `pagination: { itemsPerPage: 10 }` and a
+hand-rolled Prev/Next footer. Changes:
+- **Selection column** — `Checkbox.Group` (`v-model` selected ids) with a
+  `Checkbox.SelectAll` header (tri-state) and a `DkCheckbox` per row. Reuses v0's
+  `createGroup` tri-state; do not hand-roll select-all math.
+- **Bulk actions bar** — appears when ≥1 selected: bulk Revoke → `DkAlertDialog` →
+  `keys.removeMany(ids)` → toast.
+- **Row actions** — Rotate + Revoke per row.
+- **Tooltip** — masked key cell wrapped in `DkTooltip` revealing the full value.
+- **Pagination** — replace the hand-rolled footer with `DkPagination` bound to
+  `table.pagination` (`page` model + page count as `size`).
+
+### Notifications infra
+Add `createNotificationsPlugin({ timeout: 4000 })` in `src/plugins/devkey.ts`. Consumers
+call `useNotifications().send(...)`. `DkSnackbar` renders the queue once in `DkLayout`.
+
+## Files
+
+**New**
+- `src/composables/useKeys.ts`
+- `src/components/DkDialog.vue`
+- `src/components/DkForm.vue`
+- `src/components/DkSelect.vue`
+- `src/components/DkSwitch.vue`
+- `src/components/DkNumberField.vue`
+- `src/components/DkCheckbox.vue`
+- `src/components/DkAlertDialog.vue`
+- `src/components/DkSnackbar.vue`
+- `src/components/DkPagination.vue`
+- `src/components/DkTooltip.vue`
+- `src/components/DkCreateKeyDialog.vue` (composes DkDialog + DkForm + fields)
+
+**Modified**
+- `src/plugins/devkey.ts` — register `createNotificationsPlugin`.
+- `src/components/DkLayout.vue` — mount `DkSnackbar`.
+- `src/components/DkTable.vue` — selection column, bulk bar, row actions, `DkTooltip`,
+  `DkPagination`.
+- `src/pages/DashboardPage.vue` — use `useKeys()`, wire `DkCreateKeyDialog`, replace
+  `alert()` command-palette actions with real calls + toasts.
+
+## Coverage delta
+
+Components: `Dialog` is already used inline in the command palette; Phase A adds a
+reusable `DkDialog` wrapper plus 9 net-new components (`AlertDialog`, `Form`, `Select`,
+`Switch`, `NumberField`, `Checkbox`, `Snackbar`, `Pagination`, `Tooltip`) — taking the
+demonstrated set from ≈6 to 15 of 40.
+Composables/plugins: +createForm, +createValidation (via fields), +useNotifications,
++createQueue, +createGroup, +useStorage, +usePopover (Select/Tooltip anchoring).
+
+## Sequencing (for the implementation plan)
+
+Two waves to keep increments small and verifiable:
+1. **Infra + New Key** — `useKeys`, notifications plugin, `DkSnackbar` in layout,
+   `DkDialog`/`DkForm`/`DkSelect`/`DkSwitch`/`DkNumberField`, `DkCreateKeyDialog`,
+   dashboard wiring for create + toasts.
+2. **Table interactions** — `DkCheckbox`, `DkAlertDialog`, `DkTooltip`, `DkPagination`,
+   `DkTable` refactor, revoke/rotate/bulk flows.
+
+## Verification
+
+- `pnpm type-check` clean after each wave.
+- Manual: create a key (valid + invalid submit), rotate, revoke (single + bulk),
+  reload to confirm persistence, hover key for tooltip, paginate, confirm toasts appear
+  and auto-dismiss (and pause on hover per Snackbar.Queue WCAG behavior).
+- DevKey ships directly to master (no PR) per ecosystem convention; each wave is a
+  separate commit.

From d369aac755e66d279136732b37aba7f99aa417aa Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:04:41 -0500
Subject: [PATCH 02/16] docs: add Phase A key-lifecycle implementation plan

---
 ...2026-07-09-devkey-phase-a-key-lifecycle.md | 1565 +++++++++++++++++
 1 file changed, 1565 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md

diff --git a/docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md b/docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md
new file mode 100644
index 0000000..af79f58
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md
@@ -0,0 +1,1565 @@
+# DevKey Phase A — Key Lifecycle 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:** Replace DevKey's `alert()`/static-data stubs with working, persisted, canonical Vuetify0 flows for creating, rotating, and revoking API keys.
+
+**Architecture:** A `useKeys()` composable (backed by v0 `useStorage`) owns key CRUD. New thin `Dk*` wrappers expose v0 compound primitives in DevKey's house style. Wave 1 delivers the create flow + toast infra; Wave 2 delivers table interactions (bulk select, revoke, rotate, tooltip, pagination).
+
+**Tech Stack:** Vue 3 + `<script setup lang="ts">`, `@vuetify/v0` (1.0.0-rc.6), Vite, pnpm.
+
+## Global Constraints
+
+- **No tests.** DevKey convention: never add test files unless explicitly asked. Each task verifies via `pnpm type-check` + manual browser check.
+- **Commit types:** `chore(scope):` for feature work, `docs`/`refactor` as appropriate. NEVER `feat`/`fix` (reserved for `packages/*` across the ecosystem). DevKey history uses only `chore`/`docs`.
+- **Never push.** Commit only; DevKey ships to master directly but pushing is a separate, explicit step.
+- **House pattern:** thin `Dk*` wrappers over v0 **compound** components; `defineOptions({ name })`; `defineModel`; destructured `defineProps` with defaults (never `withDefaults`); scoped CSS on `--v0-theme-*` vars; state via `data-*`; `shallowRef` primitives, `ref` objects, `toRef` derived.
+- **Idiomatic only:** use v0 primitives the documented way; never hand-roll logic a primitive provides (select-all math, validation, queue timing).
+
+---
+
+## File Structure
+
+**New**
+- `src/composables/useKeys.ts` — persisted key store (CRUD).
+- `src/components/DkDialog.vue` — `Dialog` wrapper.
+- `src/components/DkForm.vue` — `Form` wrapper.
+- `src/components/DkSelect.vue` — `Select` wrapper.
+- `src/components/DkSwitch.vue` — `Switch` wrapper.
+- `src/components/DkNumberField.vue` — `NumberField` wrapper.
+- `src/components/DkCheckbox.vue` — `Checkbox` leaf wrapper.
+- `src/components/DkAlertDialog.vue` — `AlertDialog` wrapper.
+- `src/components/DkSnackbar.vue` — `Snackbar` queue bound to `useNotifications`.
+- `src/components/DkPagination.vue` — `Pagination` wrapper.
+- `src/components/DkTooltip.vue` — `Tooltip` wrapper.
+- `src/components/DkCreateKeyDialog.vue` — composes DkDialog + DkForm + fields.
+
+**Modified**
+- `src/plugins/devkey.ts` — register `createNotificationsPlugin`.
+- `src/components/DkLayout.vue` — mount `DkSnackbar` once.
+- `src/components/DkTable.vue` — selection column, row/bulk actions, tooltip, pagination.
+- `src/pages/DashboardPage.vue` — use `useKeys()`, wire create dialog, real command-palette actions.
+
+---
+
+# WAVE 1 — Infrastructure + New Key
+
+## Task 1: `useKeys()` persisted key store
+
+**Files:**
+- Create: `src/composables/useKeys.ts`
+
+**Interfaces:**
+- Produces: `interface ApiKey { id: string; name: string; key: string; env: 'live' | 'test'; autoRotate: boolean; expiresInDays: number; created: string; lastUsed: string }`
+- Produces: `interface CreateKeyInput { name: string; env: 'live' | 'test'; autoRotate: boolean; expiresInDays: number }`
+- Produces: `useKeys(): { all: Ref<ApiKey[]>; add(input: CreateKeyInput): void; remove(id: string): void; removeMany(ids: string[]): void; rotate(id: string): void }`
+
+- [ ] **Step 1: Create the composable**
+
+```ts
+import { useStorage } from '@vuetify/v0'
+import type { Ref } from 'vue'
+
+export interface ApiKey {
+  id: string
+  name: string
+  key: string
+  env: 'live' | 'test'
+  autoRotate: boolean
+  expiresInDays: number
+  created: string
+  lastUsed: string
+}
+
+export interface CreateKeyInput {
+  name: string
+  env: 'live' | 'test'
+  autoRotate: boolean
+  expiresInDays: number
+}
+
+// NOTE: persisting "secret" keys to localStorage is unrealistic for a real
+// product — this is a demonstration of useStorage driving CRUD, not a security
+// pattern.
+const SEED: ApiKey[] = [
+  { id: 'seed-1', name: 'Production', key: 'dk_live_abc123', env: 'live', autoRotate: true, expiresInDays: 90, created: '2026-01-15', lastUsed: '2026-04-05' },
+  { id: 'seed-2', name: 'Staging', key: 'dk_test_def456', env: 'test', autoRotate: false, expiresInDays: 30, created: '2026-02-20', lastUsed: '2026-04-04' },
+  { id: 'seed-3', name: 'CI/CD', key: 'dk_live_ghi789', env: 'live', autoRotate: true, expiresInDays: 90, created: '2026-03-01', lastUsed: '2026-04-05' },
+  { id: 'seed-4', name: 'Development', key: 'dk_test_jkl012', env: 'test', autoRotate: false, expiresInDays: 30, created: '2026-03-10', lastUsed: '2026-04-03' },
+  { id: 'seed-5', name: 'Mobile App', key: 'dk_live_mno345', env: 'live', autoRotate: false, expiresInDays: 365, created: '2026-03-15', lastUsed: '2026-04-05' },
+]
+
+function today (): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function uid (): string {
+  return `key_${Math.random().toString(36).slice(2, 10)}`
+}
+
+function generate (env: 'live' | 'test'): string {
+  return `dk_${env}_${Math.random().toString(36).slice(2, 10)}`
+}
+
+export function useKeys () {
+  const storage = useStorage()
+  const all = storage.get<ApiKey[]>('devkey:keys', SEED) as Ref<ApiKey[]>
+
+  function add (input: CreateKeyInput) {
+    all.value = [
+      {
+        id: uid(),
+        name: input.name,
+        key: generate(input.env),
+        env: input.env,
+        autoRotate: input.autoRotate,
+        expiresInDays: input.expiresInDays,
+        created: today(),
+        lastUsed: today(),
+      },
+      ...all.value,
+    ]
+  }
+
+  function remove (id: string) {
+    all.value = all.value.filter(k => k.id !== id)
+  }
+
+  function removeMany (ids: string[]) {
+    const set = new Set(ids)
+    all.value = all.value.filter(k => !set.has(k.id))
+  }
+
+  function rotate (id: string) {
+    all.value = all.value.map(k =>
+      k.id === id ? { ...k, key: generate(k.env), lastUsed: today() } : k,
+    )
+  }
+
+  return { all, add, remove, removeMany, rotate }
+}
+```
+
+- [ ] **Step 2: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/composables/useKeys.ts
+git commit -m "chore(keys): add persisted useKeys store"
+```
+
+---
+
+## Task 2: Notifications plugin + `DkSnackbar`
+
+**Files:**
+- Modify: `src/plugins/devkey.ts`
+- Create: `src/components/DkSnackbar.vue`
+- Modify: `src/components/DkLayout.vue`
+
+**Interfaces:**
+- Produces: `useNotifications().send({ subject, severity, timeout? })` available app-wide; `DkSnackbar` renders the queue (mount once).
+
+- [ ] **Step 1: Register the notifications plugin**
+
+Edit `src/plugins/devkey.ts` — add the import and `app.use`:
+
+```ts
+import {
+  createBreakpointsPlugin,
+  createNotificationsPlugin,
+  createPermissionsPlugin,
+  createRulesPlugin,
+} from '@vuetify/v0'
+import type { App } from 'vue'
+
+export default function devkey (app: App) {
+  app.use(
+    createPermissionsPlugin({
+      permissions: {
+        admin: [['manage', '*']],
+        developer: [['read', 'keys'], ['create', 'keys']],
+        viewer: [['read', 'keys']],
+      },
+    })
+  )
+
+  app.use(
+    createRulesPlugin({
+      aliases: {
+        required: v => !!v || 'Required',
+        email: v => /.+@.+\..+/.test(String(v)) || 'Invalid email',
+      },
+    })
+  )
+
+  app.use(createBreakpointsPlugin())
+
+  app.use(createNotificationsPlugin({ timeout: 4000 }))
+}
+```
+
+- [ ] **Step 2: Create `DkSnackbar.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Snackbar } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkSnackbar' })
+</script>
+
+<template>
+  <Snackbar.Portal>
+    <Snackbar.Queue v-slot="{ items }">
+      <div class="dk-snackbar__queue">
+        <Snackbar.Root
+          v-for="item in items"
+          :id="item.id"
+          :key="item.id"
+          class="dk-snackbar"
+          :data-severity="item.severity ?? 'info'"
+        >
+          <Snackbar.Content class="dk-snackbar__content">{{ item.subject }}</Snackbar.Content>
+          <Snackbar.Close class="dk-snackbar__close">✕</Snackbar.Close>
+        </Snackbar.Root>
+      </div>
+    </Snackbar.Queue>
+  </Snackbar.Portal>
+</template>
+
+<style>
+  .dk-snackbar__queue {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    z-index: 9999;
+  }
+
+  .dk-snackbar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 240px;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--v0-theme-border);
+    border-left: 3px solid var(--v0-theme-primary);
+    border-radius: 0.5rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .dk-snackbar[data-severity='success'] { border-left-color: #22c55e; }
+  .dk-snackbar[data-severity='error'] { border-left-color: var(--v0-theme-error); }
+  .dk-snackbar[data-severity='warning'] { border-left-color: #f59e0b; }
+
+  .dk-snackbar__content {
+    flex: 1;
+    font-size: 0.875rem;
+  }
+
+  .dk-snackbar__close {
+    border: none;
+    background: transparent;
+    color: var(--v0-theme-muted);
+    cursor: pointer;
+    font-size: 0.75rem;
+  }
+</style>
+```
+
+- [ ] **Step 3: Mount `DkSnackbar` in `DkLayout.vue`**
+
+Edit `src/components/DkLayout.vue`. Add the import and render `<DkSnackbar />` at the end of the root `<div>`:
+
+```vue
+<script setup lang="ts">
+  import { useBreakpoints } from '@vuetify/v0'
+  import { toRef } from 'vue'
+  import DkSnackbar from './DkSnackbar.vue'
+
+  defineOptions({ name: 'DkLayout' })
+
+  const breakpoints = useBreakpoints()
+  const mobile = toRef(() => breakpoints.smAndDown.value)
+</script>
+
+<template>
+  <div class="dk-layout" :data-mobile="mobile || undefined">
+    <aside v-if="$slots.sidebar" class="dk-layout__sidebar">
+      <slot name="sidebar" />
+    </aside>
+
+    <main class="dk-layout__main">
+      <slot />
+    </main>
+
+    <DkSnackbar />
+  </div>
+</template>
+```
+(Styles unchanged from current file.)
+
+- [ ] **Step 4: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 5: Manual check**
+
+Run `pnpm dev`. In the browser console on the dashboard, run `window.__vue_app__` is not needed — instead temporarily add a button or use the command palette after Task 7. For now confirm no runtime errors on load and the snackbar container mounts (empty). 
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/plugins/devkey.ts src/components/DkSnackbar.vue src/components/DkLayout.vue
+git commit -m "chore(components): add notifications plugin and DkSnackbar"
+```
+
+---
+
+## Task 3: `DkDialog` wrapper
+
+**Files:**
+- Create: `src/components/DkDialog.vue`
+
+**Interfaces:**
+- Produces: `<DkDialog v-model="open" title="…" description="…">` with default (body) slot and `actions` slot (receives `{ close }`).
+
+- [ ] **Step 1: Create `DkDialog.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Dialog } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkDialog' })
+
+  const { title, description } = defineProps<{
+    title?: string
+    description?: string
+  }>()
+
+  const open = defineModel<boolean>({ default: false })
+
+  function close () {
+    open.value = false
+  }
+</script>
+
+<template>
+  <Dialog.Root v-model="open">
+    <Dialog.Content class="dk-dialog">
+      <header v-if="title || description" class="dk-dialog__header">
+        <Dialog.Title v-if="title" class="dk-dialog__title">{{ title }}</Dialog.Title>
+        <Dialog.Description v-if="description" class="dk-dialog__description">
+          {{ description }}
+        </Dialog.Description>
+      </header>
+
+      <div class="dk-dialog__body">
+        <slot :close="close" />
+      </div>
+
+      <footer v-if="$slots.actions" class="dk-dialog__actions">
+        <slot name="actions" :close="close" />
+      </footer>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
+
+<style>
+  .dk-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 440px;
+    padding: 1.5rem;
+    background: var(--v0-theme-surface);
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+  }
+
+  .dk-dialog__header {
+    margin-bottom: 1rem;
+  }
+
+  .dk-dialog__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-dialog__description {
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .dk-dialog__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+  }
+</style>
+```
+
+- [ ] **Step 2: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/DkDialog.vue
+git commit -m "chore(components): add DkDialog wrapper"
+```
+
+---
+
+## Task 4: Form field wrappers (`DkForm`, `DkSelect`, `DkSwitch`, `DkNumberField`)
+
+**Files:**
+- Create: `src/components/DkForm.vue`
+- Create: `src/components/DkSelect.vue`
+- Create: `src/components/DkSwitch.vue`
+- Create: `src/components/DkNumberField.vue`
+
+**Interfaces:**
+- Produces: `<DkForm v-model="valid" @submit="onSubmit">` (submit payload `{ valid: boolean }`, default slot receives `{ valid }`).
+- Produces: `<DkSelect v-model="value" :items="[{ id, label, value }]" placeholder="…" />`.
+- Produces: `<DkSwitch v-model="bool">label</DkSwitch>`.
+- Produces: `<DkNumberField v-model="num" :min :max :step />`.
+
+- [ ] **Step 1: Create `DkForm.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Form } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkForm' })
+
+  const valid = defineModel<boolean | null>({ default: null })
+
+  const emit = defineEmits<{
+    submit: [payload: { valid: boolean }]
+  }>()
+
+  function onSubmit (payload: { valid: boolean }) {
+    emit('submit', payload)
+  }
+</script>
+
+<template>
+  <Form v-model="valid" class="dk-form" @submit="onSubmit">
+    <slot :valid="valid" />
+  </Form>
+</template>
+
+<style scoped>
+  .dk-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+</style>
+```
+
+- [ ] **Step 2: Create `DkSelect.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Select } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkSelect' })
+
+  interface Option {
+    id: string
+    label: string
+    value: string
+  }
+
+  const { items, placeholder = 'Select…' } = defineProps<{
+    items: Option[]
+    placeholder?: string
+  }>()
+
+  const model = defineModel<string>()
+</script>
+
+<template>
+  <Select.Root v-model="model" class="dk-select">
+    <Select.Activator class="dk-select__activator">
+      <Select.Value v-slot="{ selectedValue }">{{ selectedValue }}</Select.Value>
+      <Select.Placeholder class="dk-select__placeholder">{{ placeholder }}</Select.Placeholder>
+      <Select.Cue v-slot="{ isOpen }">
+        <span class="dk-select__cue">{{ isOpen ? '▲' : '▼' }}</span>
+      </Select.Cue>
+    </Select.Activator>
+
+    <Select.Content class="dk-select__content">
+      <Select.Item
+        v-for="item in items"
+        :id="item.id"
+        :key="item.id"
+        :value="item.value"
+        v-slot="{ isSelected, attrs }"
+      >
+        <div v-bind="attrs" class="dk-select__item" :data-selected="isSelected || undefined">
+          {{ item.label }}
+        </div>
+      </Select.Item>
+    </Select.Content>
+  </Select.Root>
+</template>
+
+<style>
+  .dk-select__activator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.5rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    font-size: 1rem;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .dk-select__placeholder {
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-select__cue {
+    margin-left: auto;
+    font-size: 0.625rem;
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-select__content {
+    min-width: var(--v0-select-width, 12rem);
+    padding: 0.25rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.5rem;
+    background: var(--v0-theme-surface);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .dk-select__item {
+    padding: 0.5rem 0.625rem;
+    border-radius: 0.375rem;
+    color: var(--v0-theme-text);
+    font-size: 0.9375rem;
+    cursor: pointer;
+  }
+
+  .dk-select__item:hover,
+  .dk-select__item[data-selected] {
+    background: var(--v0-theme-background);
+  }
+</style>
+```
+
+- [ ] **Step 3: Create `DkSwitch.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Switch } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkSwitch' })
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <label class="dk-switch">
+    <Switch.Root v-model="model" class="dk-switch__root">
+      <Switch.Track class="dk-switch__track">
+        <Switch.Thumb class="dk-switch__thumb" />
+      </Switch.Track>
+    </Switch.Root>
+    <span v-if="$slots.default" class="dk-switch__label"><slot /></span>
+  </label>
+</template>
+
+<style>
+  .dk-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    cursor: pointer;
+  }
+
+  .dk-switch__root {
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .dk-switch__track {
+    display: inline-flex;
+    align-items: center;
+    width: 40px;
+    height: 22px;
+    padding: 2px;
+    border-radius: 999px;
+    background: var(--v0-theme-border);
+    transition: background 0.15s ease;
+  }
+
+  .dk-switch__track[data-state='checked'] {
+    background: var(--v0-theme-primary);
+  }
+
+  .dk-switch__thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.15s ease;
+  }
+
+  .dk-switch__thumb[data-state='checked'] {
+    transform: translateX(18px);
+  }
+
+  .dk-switch__label {
+    font-size: 0.875rem;
+    color: var(--v0-theme-text);
+  }
+</style>
+```
+
+- [ ] **Step 4: Create `DkNumberField.vue`**
+
+```vue
+<script setup lang="ts">
+  import { NumberField } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkNumberField' })
+
+  const { min, max, step = 1 } = defineProps<{
+    min?: number
+    max?: number
+    step?: number
+  }>()
+
+  const model = defineModel<number | null>({ default: null })
+</script>
+
+<template>
+  <NumberField.Root
+    v-model="model"
+    :min="min"
+    :max="max"
+    :step="step"
+    class="dk-number"
+  >
+    <NumberField.Decrement class="dk-number__btn">−</NumberField.Decrement>
+    <NumberField.Control class="dk-number__control" />
+    <NumberField.Increment class="dk-number__btn">+</NumberField.Increment>
+  </NumberField.Root>
+</template>
+
+<style>
+  .dk-number {
+    display: inline-flex;
+    align-items: stretch;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: var(--v0-theme-surface);
+  }
+
+  .dk-number__btn {
+    width: 2.25rem;
+    border: none;
+    background: var(--v0-theme-background);
+    color: var(--v0-theme-text);
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .dk-number__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .dk-number__control {
+    width: 4rem;
+    border: none;
+    background: transparent;
+    color: var(--v0-theme-text);
+    text-align: center;
+    font-size: 1rem;
+    outline: none;
+  }
+</style>
+```
+
+- [ ] **Step 5: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors. If `data-state` attribute names differ for Switch, adjust CSS selectors after visual check (Task 6) — do not change the component logic.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/components/DkForm.vue src/components/DkSelect.vue src/components/DkSwitch.vue src/components/DkNumberField.vue
+git commit -m "chore(components): add DkForm, DkSelect, DkSwitch, DkNumberField wrappers"
+```
+
+---
+
+## Task 5: `DkCreateKeyDialog` + dashboard create wiring
+
+**Files:**
+- Create: `src/components/DkCreateKeyDialog.vue`
+- Modify: `src/pages/DashboardPage.vue`
+
+**Interfaces:**
+- Consumes: `useKeys().add` (Task 1), `DkDialog` (Task 3), `DkForm`/`DkSelect`/`DkSwitch`/`DkNumberField` (Task 4), `DkInput` (existing), `useNotifications` (Task 2).
+- Produces: `<DkCreateKeyDialog v-model="open" @created="…" />`.
+
+- [ ] **Step 1: Create `DkCreateKeyDialog.vue`**
+
+```vue
+<script setup lang="ts">
+  import { useNotifications } from '@vuetify/v0'
+  import { reactive, shallowRef } from 'vue'
+  import DkDialog from './DkDialog.vue'
+  import DkForm from './DkForm.vue'
+  import DkInput from './DkInput.vue'
+  import DkSelect from './DkSelect.vue'
+  import DkSwitch from './DkSwitch.vue'
+  import DkNumberField from './DkNumberField.vue'
+  import DkButton from './DkButton.vue'
+  import { useKeys } from '../composables/useKeys'
+  import type { CreateKeyInput } from '../composables/useKeys'
+
+  defineOptions({ name: 'DkCreateKeyDialog' })
+
+  const open = defineModel<boolean>({ default: false })
+
+  const keys = useKeys()
+  const notifications = useNotifications()
+
+  const envItems = [
+    { id: 'live', label: 'Live', value: 'live' },
+    { id: 'test', label: 'Test', value: 'test' },
+  ]
+
+  function blank (): CreateKeyInput {
+    return { name: '', env: 'live', autoRotate: false, expiresInDays: 90 }
+  }
+
+  const form = reactive(blank())
+  const valid = shallowRef<boolean | null>(null)
+
+  function onSubmit (payload: { valid: boolean }) {
+    if (!payload.valid) return
+    keys.add({ ...form })
+    notifications.send({ subject: `API key "${form.name}" created`, severity: 'success' })
+    Object.assign(form, blank())
+    open.value = false
+  }
+</script>
+
+<template>
+  <DkDialog
+    v-model="open"
+    title="Create API Key"
+    description="Generate a new key for your application."
+  >
+    <DkForm v-model="valid" @submit="onSubmit">
+      <DkInput v-model="form.name" label="Name" placeholder="e.g. Production" :rules="['required']" />
+
+      <div class="dk-create__field">
+        <span class="dk-create__label">Environment</span>
+        <DkSelect v-model="form.env" :items="envItems" />
+      </div>
+
+      <DkNumberField v-model="form.expiresInDays" :min="1" :max="365" />
+
+      <DkSwitch v-model="form.autoRotate">Auto-rotate on expiry</DkSwitch>
+
+      <div class="dk-create__actions">
+        <DkButton type="button" @click="open = false">Cancel</DkButton>
+        <DkButton type="submit">Create Key</DkButton>
+      </div>
+    </DkForm>
+  </DkDialog>
+</template>
+
+<style scoped>
+  .dk-create__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .dk-create__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-create__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+  }
+</style>
+```
+
+> Note: `DkButton` prop/slot API is assumed to accept native `type`. If `DkButton` does not forward `type`, use plain `<button>` elements styled with `.dk-dashboard__new-key` class instead — check `src/components/DkButton.vue` before implementing this step.
+
+- [ ] **Step 2: Wire into `DashboardPage.vue`**
+
+In `src/pages/DashboardPage.vue`:
+1. Add imports: `import DkCreateKeyDialog from '../components/DkCreateKeyDialog.vue'` and `import { useKeys } from '../composables/useKeys'`.
+2. Replace the hardcoded `apiKeys` array with `const keys = useKeys()`.
+3. Replace `function onNewKey () { alert(...) }` with `const createOpen = shallowRef(false)` and `function onNewKey () { createOpen.value = true }`.
+4. Pass keys to the table: `<DkTable :items="keys.all.value" />` (Wave 2 extends DkTable; for now it still accepts `items`).
+5. Render the dialog inside `.dk-dashboard`: `<DkCreateKeyDialog v-model="createOpen" />`.
+
+```vue
+// script additions
+import DkCreateKeyDialog from '../components/DkCreateKeyDialog.vue'
+import { useKeys } from '../composables/useKeys'
+
+const keys = useKeys()
+const createOpen = shallowRef(false)
+
+function onNewKey () {
+  createOpen.value = true
+}
+```
+
+```vue
+// template: replace <DkTable :items="apiKeys" /> with
+<DkTable :items="keys.all.value" />
+
+// add near <DkCommandPalette ... />
+<DkCreateKeyDialog v-model="createOpen" />
+```
+
+- [ ] **Step 3: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 4: Manual check**
+
+Run `pnpm dev`. On the dashboard: click **New Key** → dialog opens. Submit empty → "Required" error on Name, dialog stays open. Fill Name, pick Test env, set expiry, toggle auto-rotate, submit → dialog closes, success toast appears bottom-right and auto-dismisses (~4s), new row appears at top of the table. Reload page → new key persists.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/components/DkCreateKeyDialog.vue src/pages/DashboardPage.vue
+git commit -m "chore(dashboard): wire real create-key dialog with validation and toast"
+```
+
+---
+
+## Task 6: Real command-palette actions
+
+**Files:**
+- Modify: `src/pages/DashboardPage.vue`
+
+**Interfaces:**
+- Consumes: `keys` (Task 5), `useNotifications` (Task 2), `createOpen` (Task 5).
+
+- [ ] **Step 1: Replace `alert()` command actions**
+
+In `src/pages/DashboardPage.vue`, add `import { useNotifications } from '@vuetify/v0'` and `const notifications = useNotifications()`. Rewrite the `commands` array actions:
+
+```ts
+const commands = [
+  { id: 'new-key', label: 'Create New API Key', group: 'Actions', action: () => { createOpen.value = true } },
+  { id: 'rotate', label: 'Rotate All Keys', group: 'Actions', action: () => {
+    for (const k of keys.all.value) keys.rotate(k.id)
+    notifications.send({ subject: 'All keys rotated', severity: 'success' })
+  } },
+  { id: 'analytics', label: 'View Analytics', group: 'Navigation', action: () => { tab.value = 'analytics' } },
+  { id: 'keys', label: 'View API Keys', group: 'Navigation', action: () => { tab.value = 'keys' } },
+  { id: 'settings', label: 'Open Settings', group: 'Navigation', action: () => { tab.value = 'settings' } },
+  { id: 'docs', label: 'Open Documentation', group: 'Links', action: () => window.open('https://0.vuetifyjs.com', '_blank') },
+  { id: 'github', label: 'View on GitHub', group: 'Links', action: () => window.open('https://github.com/vuetifyjs/0', '_blank') },
+]
+```
+(Remove the `revoke` command — revocation is per-row in Wave 2.)
+
+- [ ] **Step 2: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 3: Manual check**
+
+`pnpm dev`. Press Cmd+K → "Create New API Key" opens the dialog; "Rotate All Keys" changes every `key` value and fires a toast; navigation commands switch tabs.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/DashboardPage.vue
+git commit -m "chore(dashboard): replace alert stubs with real command-palette actions"
+```
+
+---
+
+# WAVE 2 — Table Interactions
+
+## Task 7: Leaf wrappers (`DkCheckbox`, `DkAlertDialog`, `DkTooltip`, `DkPagination`)
+
+**Files:**
+- Create: `src/components/DkCheckbox.vue`
+- Create: `src/components/DkAlertDialog.vue`
+- Create: `src/components/DkTooltip.vue`
+- Create: `src/components/DkPagination.vue`
+
+**Interfaces:**
+- Produces: `<DkCheckbox v-model="bool" />` (standalone) or `<DkCheckbox :value="id" />` inside a `Checkbox.Group`.
+- Produces: `<DkAlertDialog v-model="open" title description confirm-label @confirm />`.
+- Produces: `<DkTooltip text="…"><activator/></DkTooltip>`.
+- Produces: `<DkPagination v-model="page" :size="pages" />`.
+
+- [ ] **Step 1: Create `DkCheckbox.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Checkbox } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkCheckbox' })
+
+  const { value } = defineProps<{
+    value?: string
+  }>()
+
+  const model = defineModel<boolean>()
+</script>
+
+<template>
+  <Checkbox.Root v-model="model" :value="value" class="dk-checkbox">
+    <Checkbox.Indicator class="dk-checkbox__indicator">
+      <svg viewBox="0 0 24 24" width="14" height="14">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
+      </svg>
+    </Checkbox.Indicator>
+  </Checkbox.Root>
+</template>
+
+<style>
+  .dk-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.25rem;
+    background: var(--v0-theme-surface);
+    color: #fff;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .dk-checkbox[data-state='checked'],
+  .dk-checkbox[aria-checked='true'],
+  .dk-checkbox[data-state='mixed'] {
+    background: var(--v0-theme-primary);
+    border-color: var(--v0-theme-primary);
+  }
+
+  .dk-checkbox__indicator {
+    display: inline-flex;
+  }
+</style>
+```
+
+- [ ] **Step 2: Create `DkAlertDialog.vue`**
+
+```vue
+<script setup lang="ts">
+  import { AlertDialog } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkAlertDialog' })
+
+  const {
+    title = 'Are you sure?',
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+  } = defineProps<{
+    title?: string
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+  }>()
+
+  const open = defineModel<boolean>({ default: false })
+
+  const emit = defineEmits<{ confirm: [] }>()
+
+  function onConfirm () {
+    emit('confirm')
+    open.value = false
+  }
+</script>
+
+<template>
+  <AlertDialog.Root v-model="open">
+    <AlertDialog.Content class="dk-alert">
+      <AlertDialog.Title class="dk-alert__title">{{ title }}</AlertDialog.Title>
+      <AlertDialog.Description v-if="description" class="dk-alert__description">
+        {{ description }}
+      </AlertDialog.Description>
+      <div class="dk-alert__actions">
+        <AlertDialog.Cancel class="dk-alert__cancel">{{ cancelLabel }}</AlertDialog.Cancel>
+        <AlertDialog.Action class="dk-alert__confirm" @click="onConfirm">
+          {{ confirmLabel }}
+        </AlertDialog.Action>
+      </div>
+    </AlertDialog.Content>
+  </AlertDialog.Root>
+</template>
+
+<style>
+  .dk-alert {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 400px;
+    padding: 1.5rem;
+    background: var(--v0-theme-surface);
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+  }
+
+  .dk-alert__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-alert__description {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-alert__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+  }
+
+  .dk-alert__cancel,
+  .dk-alert__confirm {
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid var(--v0-theme-border);
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+  }
+
+  .dk-alert__confirm {
+    border-color: var(--v0-theme-error);
+    background: var(--v0-theme-error);
+    color: #fff;
+  }
+</style>
+```
+
+- [ ] **Step 3: Create `DkTooltip.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Tooltip } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkTooltip' })
+
+  const { text } = defineProps<{ text: string }>()
+</script>
+
+<template>
+  <Tooltip.Root class="dk-tooltip">
+    <Tooltip.Activator class="dk-tooltip__activator">
+      <slot />
+    </Tooltip.Activator>
+    <Tooltip.Content class="dk-tooltip__content">{{ text }}</Tooltip.Content>
+  </Tooltip.Root>
+</template>
+
+<style>
+  .dk-tooltip__activator {
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: default;
+    font: inherit;
+    color: inherit;
+  }
+
+  .dk-tooltip__content {
+    padding: 0.375rem 0.625rem;
+    border-radius: 0.375rem;
+    background: var(--v0-theme-text);
+    color: var(--v0-theme-surface);
+    font-size: 0.75rem;
+    font-family: monospace;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+</style>
+```
+
+- [ ] **Step 4: Create `DkPagination.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Pagination } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkPagination' })
+
+  const { size } = defineProps<{ size: number }>()
+
+  const page = defineModel<number>({ default: 1 })
+</script>
+
+<template>
+  <Pagination.Root v-model="page" :size="size" class="dk-pagination" v-slot="{ items }">
+    <Pagination.Status class="dk-pagination__status" />
+    <Pagination.Prev class="dk-pagination__btn">‹</Pagination.Prev>
+    <template v-for="item in items" :key="`${item.type}-${item.value}`">
+      <Pagination.Item
+        v-if="item.type === 'page'"
+        :value="item.value"
+        class="dk-pagination__item"
+      >
+        {{ item.value }}
+      </Pagination.Item>
+      <Pagination.Ellipsis v-else class="dk-pagination__ellipsis">…</Pagination.Ellipsis>
+    </template>
+    <Pagination.Next class="dk-pagination__btn">›</Pagination.Next>
+  </Pagination.Root>
+</template>
+
+<style>
+  .dk-pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .dk-pagination__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+
+  .dk-pagination__btn,
+  .dk-pagination__item {
+    min-width: 2rem;
+    height: 2rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.375rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+
+  .dk-pagination__item[data-selected] {
+    border-color: var(--v0-theme-primary);
+    color: var(--v0-theme-primary);
+  }
+
+  .dk-pagination__btn[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .dk-pagination__ellipsis {
+    padding: 0 0.25rem;
+    color: var(--v0-theme-muted);
+  }
+</style>
+```
+
+- [ ] **Step 5: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors. If the Pagination Root slot prop is not named `items`, or item objects lack `.type`/`.value`, adjust the template to the actual slot contract — verify with `get_vuetify0_component_guide` name=`Pagination` before changing.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/components/DkCheckbox.vue src/components/DkAlertDialog.vue src/components/DkTooltip.vue src/components/DkPagination.vue
+git commit -m "chore(components): add DkCheckbox, DkAlertDialog, DkTooltip, DkPagination wrappers"
+```
+
+---
+
+## Task 8: `DkTable` — selection, row/bulk actions, tooltip, pagination
+
+**Files:**
+- Modify: `src/components/DkTable.vue`
+
+**Interfaces:**
+- Consumes: `ApiKey` type (Task 1 — import for prop typing), `DkCheckbox`, `DkAlertDialog`, `DkTooltip`, `DkPagination` (Task 7), `Checkbox` (`Group`/`SelectAll`), `useNotifications` (Task 2).
+- Emits: `rotate: [id: string]`, `revoke: [ids: string[]]` — the parent (DashboardPage) performs the mutation so the store stays the single writer.
+
+- [ ] **Step 1: Rewrite `DkTable.vue`**
+
+```vue
+<script setup lang="ts">
+  import { Checkbox, createDataTable } from '@vuetify/v0'
+  import { shallowRef, ref, computed, watch } from 'vue'
+  import DkInput from './DkInput.vue'
+  import DkCheckbox from './DkCheckbox.vue'
+  import DkAlertDialog from './DkAlertDialog.vue'
+  import DkTooltip from './DkTooltip.vue'
+  import DkPagination from './DkPagination.vue'
+  import type { ApiKey } from '../composables/useKeys'
+
+  defineOptions({ name: 'DkTable' })
+
+  const { items } = defineProps<{
+    items: ApiKey[]
+  }>()
+
+  const emit = defineEmits<{
+    rotate: [id: string]
+    revoke: [ids: string[]]
+  }>()
+
+  const query = shallowRef('')
+  const selected = ref<string[]>([])
+
+  const table = createDataTable<ApiKey>({
+    pagination: { itemsPerPage: 5 },
+  })
+
+  const { items: rows, pagination, search } = table
+
+  table.columns.onboard([
+    { id: 'name', title: 'Name', filterable: true },
+    { id: 'key', title: 'API Key', filterable: true },
+    { id: 'created', title: 'Created', filterable: true },
+    { id: 'lastUsed', title: 'Last Used', filterable: true },
+  ])
+
+  watch(() => items, value => {
+    table.clear()
+    table.onboard(value.map(item => ({ id: item.id, value: item })))
+    selected.value = selected.value.filter(id => value.some(k => k.id === id))
+  }, { immediate: true })
+
+  watch(query, v => search(v))
+
+  const page = computed({
+    get: () => pagination.page.value,
+    set: v => { pagination.page.value = v },
+  })
+
+  const rowIds = computed(() => (rows.value as ApiKey[]).map(r => r.id))
+
+  function mask (key: string): string {
+    return `${key.slice(0, 10)}••••••`
+  }
+
+  // Revoke confirmation state
+  const confirmOpen = shallowRef(false)
+  const pendingIds = ref<string[]>([])
+
+  function askRevoke (ids: string[]) {
+    pendingIds.value = ids
+    confirmOpen.value = true
+  }
+
+  function onConfirmRevoke () {
+    emit('revoke', [...pendingIds.value])
+    selected.value = selected.value.filter(id => !pendingIds.value.includes(id))
+    pendingIds.value = []
+  }
+</script>
+
+<template>
+  <div class="dk-table">
+    <div class="dk-table__toolbar">
+      <DkInput v-model="query" placeholder="Search keys..." />
+      <button
+        v-if="selected.length"
+        class="dk-table__bulk"
+        type="button"
+        @click="askRevoke(selected)"
+      >
+        Revoke {{ selected.length }} selected
+      </button>
+    </div>
+
+    <Checkbox.Group v-model="selected">
+      <table class="dk-table__grid">
+        <thead>
+          <tr>
+            <th class="dk-table__check">
+              <Checkbox.SelectAll class="dk-checkbox">
+                <Checkbox.Indicator v-slot="{ isMixed }" class="dk-checkbox__indicator">
+                  <span v-if="isMixed">−</span>
+                  <svg v-else viewBox="0 0 24 24" width="14" height="14">
+                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
+                  </svg>
+                </Checkbox.Indicator>
+              </Checkbox.SelectAll>
+            </th>
+            <th>Name</th>
+            <th>API Key</th>
+            <th>Created</th>
+            <th>Last Used</th>
+            <th class="dk-table__actions-col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in (rows as ApiKey[])" :key="row.id">
+            <td class="dk-table__check">
+              <DkCheckbox :value="row.id" />
+            </td>
+            <td>{{ row.name }}</td>
+            <td>
+              <DkTooltip :text="row.key">
+                <code>{{ mask(row.key) }}</code>
+              </DkTooltip>
+            </td>
+            <td>{{ row.created }}</td>
+            <td>{{ row.lastUsed }}</td>
+            <td class="dk-table__actions">
+              <button type="button" @click="emit('rotate', row.id)">Rotate</button>
+              <button type="button" class="dk-table__danger" @click="askRevoke([row.id])">Revoke</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </Checkbox.Group>
+
+    <div class="dk-table__footer">
+      <span>{{ rowIds.length }} of {{ items.length }} shown</span>
+      <DkPagination v-model="page" :size="pagination.pages" />
+    </div>
+
+    <DkAlertDialog
+      v-model="confirmOpen"
+      title="Revoke API key?"
+      :description="pendingIds.length > 1
+        ? `This permanently revokes ${pendingIds.length} keys. This cannot be undone.`
+        : 'This permanently revokes the key. This cannot be undone.'"
+      confirm-label="Revoke"
+      @confirm="onConfirmRevoke"
+    />
+  </div>
+</template>
+
+<style scoped>
+  .dk-table {
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.75rem;
+    overflow: hidden;
+  }
+
+  .dk-table__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem;
+    border-bottom: 1px solid var(--v0-theme-border);
+  }
+
+  .dk-table__bulk {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--v0-theme-error);
+    border-radius: 0.375rem;
+    background: transparent;
+    color: var(--v0-theme-error);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .dk-table__grid {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .dk-table__grid th {
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-size: 0.8125rem;
+    color: var(--v0-theme-muted);
+    font-weight: 600;
+    border-bottom: 1px solid var(--v0-theme-border);
+  }
+
+  .dk-table__grid td {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--v0-theme-border);
+    color: var(--v0-theme-text);
+  }
+
+  .dk-table__check {
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  .dk-table__grid code {
+    font-size: 0.8125rem;
+    background: var(--v0-theme-background);
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+  }
+
+  .dk-table__actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .dk-table__actions button {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.375rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+
+  .dk-table__danger {
+    color: var(--v0-theme-error);
+  }
+
+  .dk-table__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    color: var(--v0-theme-muted);
+  }
+</style>
+```
+
+> Note: `pagination.pages` and `pagination.page` come from `createDataTable`'s pagination context (already used by the current file). If `pages` is a ref, use `pagination.pages.value` for `:size`. Confirm against the existing usage (`pagination.page.value`, `pagination.pages`) — the current file reads `pagination.pages` without `.value`, so keep that form.
+
+- [ ] **Step 2: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/DkTable.vue
+git commit -m "chore(components): add selection, row/bulk actions, tooltip, pagination to DkTable"
+```
+
+---
+
+## Task 9: Dashboard wiring for rotate/revoke + final verification
+
+**Files:**
+- Modify: `src/pages/DashboardPage.vue`
+
+**Interfaces:**
+- Consumes: `DkTable` emits `rotate`/`revoke` (Task 8), `keys.rotate`/`keys.removeMany` (Task 1), `useNotifications` (Task 2).
+
+- [ ] **Step 1: Handle table events**
+
+In `src/pages/DashboardPage.vue`, bind the new `DkTable` emits and mutate the store (store stays the single writer):
+
+```vue
+<DkTable
+  :items="keys.all.value"
+  @rotate="onRotate"
+  @revoke="onRevoke"
+/>
+```
+
+```ts
+function onRotate (id: string) {
+  keys.rotate(id)
+  notifications.send({ subject: 'API key rotated', severity: 'success' })
+}
+
+function onRevoke (ids: string[]) {
+  keys.removeMany(ids)
+  notifications.send({
+    subject: ids.length > 1 ? `${ids.length} keys revoked` : 'API key revoked',
+    severity: 'info',
+  })
+}
+```
+
+- [ ] **Step 2: Type-check**
+
+Run: `pnpm type-check`
+Expected: no errors.
+
+- [ ] **Step 3: Full manual verification pass**
+
+Run `pnpm dev` and confirm:
+- [ ] Create a key (valid) → toast + new top row + persists on reload.
+- [ ] Submit create form empty → "Required" on Name, dialog stays open.
+- [ ] Hover a masked key → tooltip shows full value.
+- [ ] Row **Rotate** → key value changes, success toast.
+- [ ] Row **Revoke** → AlertDialog → confirm → row gone, info toast, persists on reload.
+- [ ] Select-all header checkbox → all visible rows checked; partial selection shows mixed (−) state.
+- [ ] Select 2+ rows → bulk "Revoke N selected" → AlertDialog → confirm → rows gone.
+- [ ] Pagination (itemsPerPage 5) → page buttons navigate; prev/next disable at ends.
+- [ ] Cmd+K "Rotate All Keys" → all key values change + toast.
+- [ ] Toasts auto-dismiss ~4s and pause while hovered.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/DashboardPage.vue
+git commit -m "chore(dashboard): wire rotate and revoke handlers with toasts"
+```
+
+---
+
+## Self-Review Notes (author)
+
+- **Spec coverage:** Dialog (T3), Form/Select/Switch/NumberField (T4), Input (existing, reused T5), Snackbar/useNotifications (T2), AlertDialog/Checkbox/Tooltip/Pagination (T7), useStorage/useKeys (T1), createGroup via Checkbox.Group + SelectAll (T8), createDataTable pagination reused (T8). All Phase A primitives covered.
+- **Single writer:** DkTable emits; DashboardPage mutates `useKeys`. Avoids two components writing the store.
+- **Known verification points flagged inline (not placeholders):** Switch `data-state` selector names, `DkButton` `type` forwarding, Pagination Root slot contract, `pagination.pages` ref-vs-value. Each has an explicit fallback instruction — resolve against the running app / MCP guide, do not guess silently.
+- **Deferred to later phases:** Analytics/Settings tabs, sidebar nav, `/components` gallery (Phases B–E).

From 6766eb13db012486eee860469a6bce66190b12e7 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:10:33 -0500
Subject: [PATCH 03/16] chore(keys): add persisted useKeys store

---
 src/composables/useKeys.ts | 81 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/composables/useKeys.ts

diff --git a/src/composables/useKeys.ts b/src/composables/useKeys.ts
new file mode 100644
index 0000000..0a2560b
--- /dev/null
+++ b/src/composables/useKeys.ts
@@ -0,0 +1,81 @@
+import { useStorage } from '@vuetify/v0'
+import type { Ref } from 'vue'
+
+export interface ApiKey {
+  id: string
+  name: string
+  key: string
+  env: 'live' | 'test'
+  autoRotate: boolean
+  expiresInDays: number
+  created: string
+  lastUsed: string
+}
+
+export interface CreateKeyInput {
+  name: string
+  env: 'live' | 'test'
+  autoRotate: boolean
+  expiresInDays: number
+}
+
+// NOTE: persisting "secret" keys to localStorage is unrealistic for a real
+// product — this is a demonstration of useStorage driving CRUD, not a security
+// pattern.
+const SEED: ApiKey[] = [
+  { id: 'seed-1', name: 'Production', key: 'dk_live_abc123', env: 'live', autoRotate: true, expiresInDays: 90, created: '2026-01-15', lastUsed: '2026-04-05' },
+  { id: 'seed-2', name: 'Staging', key: 'dk_test_def456', env: 'test', autoRotate: false, expiresInDays: 30, created: '2026-02-20', lastUsed: '2026-04-04' },
+  { id: 'seed-3', name: 'CI/CD', key: 'dk_live_ghi789', env: 'live', autoRotate: true, expiresInDays: 90, created: '2026-03-01', lastUsed: '2026-04-05' },
+  { id: 'seed-4', name: 'Development', key: 'dk_test_jkl012', env: 'test', autoRotate: false, expiresInDays: 30, created: '2026-03-10', lastUsed: '2026-04-03' },
+  { id: 'seed-5', name: 'Mobile App', key: 'dk_live_mno345', env: 'live', autoRotate: false, expiresInDays: 365, created: '2026-03-15', lastUsed: '2026-04-05' },
+]
+
+function today (): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function uid (): string {
+  return `key_${Math.random().toString(36).slice(2, 10)}`
+}
+
+function generate (env: 'live' | 'test'): string {
+  return `dk_${env}_${Math.random().toString(36).slice(2, 10)}`
+}
+
+export function useKeys () {
+  const storage = useStorage()
+  const all = storage.get<ApiKey[]>('devkey:keys', SEED) as Ref<ApiKey[]>
+
+  function add (input: CreateKeyInput) {
+    all.value = [
+      {
+        id: uid(),
+        name: input.name,
+        key: generate(input.env),
+        env: input.env,
+        autoRotate: input.autoRotate,
+        expiresInDays: input.expiresInDays,
+        created: today(),
+        lastUsed: today(),
+      },
+      ...all.value,
+    ]
+  }
+
+  function remove (id: string) {
+    all.value = all.value.filter(k => k.id !== id)
+  }
+
+  function removeMany (ids: string[]) {
+    const set = new Set(ids)
+    all.value = all.value.filter(k => !set.has(k.id))
+  }
+
+  function rotate (id: string) {
+    all.value = all.value.map(k =>
+      k.id === id ? { ...k, key: generate(k.env), lastUsed: today() } : k,
+    )
+  }
+
+  return { all, add, remove, removeMany, rotate }
+}

From 9ecbb0a1efc20f569cd2c4b582c953ccd834091d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:13:14 -0500
Subject: [PATCH 04/16] chore(plugins): register storage plugin for useKeys
 persistence

---
 src/plugins/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index afcc797..45b296e 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -8,11 +8,13 @@
 import type { App } from 'vue'
 
 // Plugins
+import { createStoragePlugin } from '@vuetify/v0'
 import devkey from './devkey'
 import vuetify from './vuetify'
 import router from '../router'
 
 export function registerPlugins (app: App) {
+  app.use(createStoragePlugin())
   app.use(vuetify)
   app.use(router)
   devkey(app)

From 7534b723a0c3eec83cf41d8c48d63d85532029b9 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:14:58 -0500
Subject: [PATCH 05/16] chore(components): add notifications plugin and
 DkSnackbar

---
 src/components/DkLayout.vue   |  3 ++
 src/components/DkSnackbar.vue | 67 +++++++++++++++++++++++++++++++++++
 src/plugins/devkey.ts         |  3 ++
 3 files changed, 73 insertions(+)
 create mode 100644 src/components/DkSnackbar.vue

diff --git a/src/components/DkLayout.vue b/src/components/DkLayout.vue
index 8462dca..5803694 100644
--- a/src/components/DkLayout.vue
+++ b/src/components/DkLayout.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { useBreakpoints } from '@vuetify/v0'
   import { toRef } from 'vue'
+  import DkSnackbar from './DkSnackbar.vue'
 
   defineOptions({ name: 'DkLayout' })
 
@@ -17,6 +18,8 @@
     <main class="dk-layout__main">
       <slot />
     </main>
+
+    <DkSnackbar />
   </div>
 </template>
 
diff --git a/src/components/DkSnackbar.vue b/src/components/DkSnackbar.vue
new file mode 100644
index 0000000..a5dedec
--- /dev/null
+++ b/src/components/DkSnackbar.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import { Snackbar } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkSnackbar' })
+</script>
+
+<template>
+  <Snackbar.Portal>
+    <Snackbar.Queue v-slot="{ items }">
+      <div class="dk-snackbar__queue">
+        <Snackbar.Root
+          v-for="item in items"
+          :id="item.id"
+          :key="item.id"
+          class="dk-snackbar"
+          :data-severity="item.severity ?? 'info'"
+        >
+          <Snackbar.Content class="dk-snackbar__content">{{ item.subject }}</Snackbar.Content>
+          <Snackbar.Close class="dk-snackbar__close">✕</Snackbar.Close>
+        </Snackbar.Root>
+      </div>
+    </Snackbar.Queue>
+  </Snackbar.Portal>
+</template>
+
+<style>
+  .dk-snackbar__queue {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    z-index: 9999;
+  }
+
+  .dk-snackbar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 240px;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--v0-theme-border);
+    border-left: 3px solid var(--v0-theme-primary);
+    border-radius: 0.5rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .dk-snackbar[data-severity='success'] { border-left-color: var(--v0-theme-success); }
+  .dk-snackbar[data-severity='error'] { border-left-color: var(--v0-theme-error); }
+  .dk-snackbar[data-severity='warning'] { border-left-color: var(--v0-theme-warning); }
+
+  .dk-snackbar__content {
+    flex: 1;
+    font-size: 0.875rem;
+  }
+
+  .dk-snackbar__close {
+    border: none;
+    background: transparent;
+    color: var(--v0-theme-muted);
+    cursor: pointer;
+    font-size: 0.75rem;
+  }
+</style>
diff --git a/src/plugins/devkey.ts b/src/plugins/devkey.ts
index a216514..235f125 100644
--- a/src/plugins/devkey.ts
+++ b/src/plugins/devkey.ts
@@ -1,5 +1,6 @@
 import {
   createBreakpointsPlugin,
+  createNotificationsPlugin,
   createPermissionsPlugin,
   createRulesPlugin,
 } from '@vuetify/v0'
@@ -26,4 +27,6 @@ export default function devkey (app: App) {
   )
 
   app.use(createBreakpointsPlugin())
+
+  app.use(createNotificationsPlugin({ timeout: 4000 }))
 }

From 9d68ed4f62f2e11c435389634ded7e6355cee818 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:21:04 -0500
Subject: [PATCH 06/16] chore(components): add DkDialog wrapper

---
 src/components/DkDialog.vue | 82 +++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 src/components/DkDialog.vue

diff --git a/src/components/DkDialog.vue b/src/components/DkDialog.vue
new file mode 100644
index 0000000..cbcbca5
--- /dev/null
+++ b/src/components/DkDialog.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+  import { Dialog } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkDialog' })
+
+  const { title, description } = defineProps<{
+    title?: string
+    description?: string
+  }>()
+
+  const open = defineModel<boolean>({ default: false })
+
+  function close () {
+    open.value = false
+  }
+</script>
+
+<template>
+  <Dialog.Root v-model="open">
+    <Dialog.Content class="dk-dialog">
+      <header v-if="title || description" class="dk-dialog__header">
+        <Dialog.Title v-if="title" class="dk-dialog__title">{{ title }}</Dialog.Title>
+        <Dialog.Description v-if="description" class="dk-dialog__description">
+          {{ description }}
+        </Dialog.Description>
+      </header>
+
+      <div class="dk-dialog__body">
+        <slot :close="close" />
+      </div>
+
+      <footer v-if="$slots.actions" class="dk-dialog__actions">
+        <slot name="actions" :close="close" />
+      </footer>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
+
+<style>
+  .dk-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 440px;
+    padding: 1.5rem;
+    background: var(--v0-theme-surface);
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+  }
+
+  .dk-dialog__header {
+    margin-bottom: 1rem;
+  }
+
+  .dk-dialog__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-dialog__description {
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .dk-dialog__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+  }
+</style>

From e72738c32e869345d05d703e34f00c361ad46b48 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:24:49 -0500
Subject: [PATCH 07/16] chore(components): add DkForm, DkSelect, DkSwitch,
 DkNumberField wrappers

---
 src/components/DkForm.vue        | 29 ++++++++++
 src/components/DkNumberField.vue | 62 +++++++++++++++++++++
 src/components/DkSelect.vue      | 93 ++++++++++++++++++++++++++++++++
 src/components/DkSwitch.vue      | 66 +++++++++++++++++++++++
 4 files changed, 250 insertions(+)
 create mode 100644 src/components/DkForm.vue
 create mode 100644 src/components/DkNumberField.vue
 create mode 100644 src/components/DkSelect.vue
 create mode 100644 src/components/DkSwitch.vue

diff --git a/src/components/DkForm.vue b/src/components/DkForm.vue
new file mode 100644
index 0000000..f912b3f
--- /dev/null
+++ b/src/components/DkForm.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { Form } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkForm' })
+
+  const valid = defineModel<boolean | null>({ default: null })
+
+  const emit = defineEmits<{
+    submit: [payload: { valid: boolean }]
+  }>()
+
+  function onSubmit (payload: { valid: boolean }) {
+    emit('submit', payload)
+  }
+</script>
+
+<template>
+  <Form v-model="valid" class="dk-form" @submit="onSubmit">
+    <slot :valid="valid" />
+  </Form>
+</template>
+
+<style scoped>
+  .dk-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+</style>
diff --git a/src/components/DkNumberField.vue b/src/components/DkNumberField.vue
new file mode 100644
index 0000000..dbb5d2c
--- /dev/null
+++ b/src/components/DkNumberField.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+  import { NumberField } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkNumberField' })
+
+  const { min, max, step = 1 } = defineProps<{
+    min?: number
+    max?: number
+    step?: number
+  }>()
+
+  const model = defineModel<number | null>({ default: null })
+</script>
+
+<template>
+  <NumberField.Root
+    v-model="model"
+    :min="min"
+    :max="max"
+    :step="step"
+    class="dk-number"
+  >
+    <NumberField.Decrement class="dk-number__btn">−</NumberField.Decrement>
+    <NumberField.Control class="dk-number__control" />
+    <NumberField.Increment class="dk-number__btn">+</NumberField.Increment>
+  </NumberField.Root>
+</template>
+
+<style scoped>
+  .dk-number {
+    display: inline-flex;
+    align-items: stretch;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: var(--v0-theme-surface);
+  }
+
+  .dk-number__btn {
+    width: 2.25rem;
+    border: none;
+    background: var(--v0-theme-background);
+    color: var(--v0-theme-text);
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .dk-number__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .dk-number__control {
+    width: 4rem;
+    border: none;
+    background: transparent;
+    color: var(--v0-theme-text);
+    text-align: center;
+    font-size: 1rem;
+    outline: none;
+  }
+</style>
diff --git a/src/components/DkSelect.vue b/src/components/DkSelect.vue
new file mode 100644
index 0000000..351da23
--- /dev/null
+++ b/src/components/DkSelect.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+  import { Select } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkSelect' })
+
+  interface Option {
+    id: string
+    label: string
+    value: string
+  }
+
+  const { items, placeholder = 'Select…' } = defineProps<{
+    items: Option[]
+    placeholder?: string
+  }>()
+
+  const model = defineModel<string>()
+</script>
+
+<template>
+  <Select.Root v-model="model" class="dk-select">
+    <Select.Activator class="dk-select__activator">
+      <Select.Value v-slot="{ selectedValue }">{{ selectedValue }}</Select.Value>
+      <Select.Placeholder class="dk-select__placeholder">{{ placeholder }}</Select.Placeholder>
+      <Select.Cue v-slot="{ isOpen }">
+        <span class="dk-select__cue">{{ isOpen ? '▲' : '▼' }}</span>
+      </Select.Cue>
+    </Select.Activator>
+
+    <Select.Content class="dk-select__content">
+      <Select.Item
+        v-for="item in items"
+        :id="item.id"
+        :key="item.id"
+        :value="item.value"
+        v-slot="{ isSelected, attrs }"
+      >
+        <div v-bind="attrs" class="dk-select__item">
+          {{ item.label }}
+        </div>
+      </Select.Item>
+    </Select.Content>
+  </Select.Root>
+</template>
+
+<style>
+  .dk-select__activator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.5rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    font-size: 1rem;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .dk-select__placeholder {
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-select__cue {
+    margin-left: auto;
+    font-size: 0.625rem;
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-select__content {
+    min-width: var(--v0-select-width, 12rem);
+    padding: 0.25rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.5rem;
+    background: var(--v0-theme-surface);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .dk-select__item {
+    padding: 0.5rem 0.625rem;
+    border-radius: 0.375rem;
+    color: var(--v0-theme-text);
+    font-size: 0.9375rem;
+    cursor: pointer;
+  }
+
+  .dk-select__item:hover,
+  .dk-select__item[data-selected] {
+    background: var(--v0-theme-background);
+  }
+</style>
diff --git a/src/components/DkSwitch.vue b/src/components/DkSwitch.vue
new file mode 100644
index 0000000..eeae1ab
--- /dev/null
+++ b/src/components/DkSwitch.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import { Switch } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkSwitch' })
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <label class="dk-switch">
+    <Switch.Root v-model="model" class="dk-switch__root">
+      <Switch.Track class="dk-switch__track">
+        <Switch.Thumb class="dk-switch__thumb" />
+      </Switch.Track>
+    </Switch.Root>
+    <span v-if="$slots.default" class="dk-switch__label"><slot /></span>
+  </label>
+</template>
+
+<style scoped>
+  .dk-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    cursor: pointer;
+  }
+
+  .dk-switch__root {
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .dk-switch__track {
+    display: inline-flex;
+    align-items: center;
+    width: 40px;
+    height: 22px;
+    padding: 2px;
+    border-radius: 999px;
+    background: var(--v0-theme-border);
+    transition: background 0.15s ease;
+  }
+
+  .dk-switch__track[data-state='checked'] {
+    background: var(--v0-theme-primary);
+  }
+
+  .dk-switch__thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.15s ease;
+  }
+
+  .dk-switch__thumb[data-state='checked'] {
+    transform: translateX(18px);
+  }
+
+  .dk-switch__label {
+    font-size: 0.875rem;
+    color: var(--v0-theme-text);
+  }
+</style>

From 7b8be9dc13470f11bb53fdbe5861ba4e9b8f74b3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:36:53 -0500
Subject: [PATCH 08/16] chore(dashboard): wire real create-key dialog with
 validation and toast

---
 src/components/DkCreateKeyDialog.vue | 101 +++++++++++++++++++++++++++
 src/pages/DashboardPage.vue          |  26 ++++---
 2 files changed, 117 insertions(+), 10 deletions(-)
 create mode 100644 src/components/DkCreateKeyDialog.vue

diff --git a/src/components/DkCreateKeyDialog.vue b/src/components/DkCreateKeyDialog.vue
new file mode 100644
index 0000000..fbe90be
--- /dev/null
+++ b/src/components/DkCreateKeyDialog.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+  import { useNotifications } from '@vuetify/v0'
+  import { reactive, shallowRef, watch } from 'vue'
+  import DkDialog from './DkDialog.vue'
+  import DkForm from './DkForm.vue'
+  import DkInput from './DkInput.vue'
+  import DkSelect from './DkSelect.vue'
+  import DkSwitch from './DkSwitch.vue'
+  import DkNumberField from './DkNumberField.vue'
+  import { useKeys } from '../composables/useKeys'
+  import type { CreateKeyInput } from '../composables/useKeys'
+
+  defineOptions({ name: 'DkCreateKeyDialog' })
+
+  const open = defineModel<boolean>({ default: false })
+
+  const keys = useKeys()
+  const notifications = useNotifications()
+
+  const envItems = [
+    { id: 'live', label: 'Live', value: 'live' },
+    { id: 'test', label: 'Test', value: 'test' },
+  ]
+
+  function blank (): CreateKeyInput {
+    return { name: '', env: 'live', autoRotate: false, expiresInDays: 90 }
+  }
+
+  const form = reactive(blank())
+  const valid = shallowRef<boolean | null>(null)
+
+  watch(open, value => {
+    if (value) Object.assign(form, blank())
+  })
+
+  function onSubmit (payload: { valid: boolean }) {
+    if (!payload.valid) return
+    keys.add({ ...form })
+    notifications.send({ subject: `API key "${form.name}" created`, severity: 'success' })
+    open.value = false
+  }
+</script>
+
+<template>
+  <DkDialog
+    v-model="open"
+    title="Create API Key"
+    description="Generate a new key for your application."
+  >
+    <DkForm v-model="valid" @submit="onSubmit">
+      <DkInput v-model="form.name" label="Name" placeholder="e.g. Production" :rules="['required']" />
+
+      <div class="dk-create__field">
+        <span class="dk-create__label">Environment</span>
+        <DkSelect v-model="form.env" :items="envItems" />
+      </div>
+
+      <DkNumberField v-model="form.expiresInDays" :min="1" :max="365" />
+
+      <DkSwitch v-model="form.autoRotate">Auto-rotate on expiry</DkSwitch>
+
+      <div class="dk-create__actions">
+        <!--
+          Plain buttons instead of DkButton: Button.Root always forces
+          `type="button"` (it merges its own elementAttrs over $attrs and
+          never exposes an `as` override), so `<DkButton type="submit">`
+          can never trigger DkForm's native form submit event. The
+          `dk-button` classes come from DkButton.vue's unscoped <style>
+          block, so this renders visually identical to DkButton.
+        -->
+        <button type="button" class="dk-button" data-variant="outline" data-size="md" @click="open = false">
+          Cancel
+        </button>
+        <button type="submit" class="dk-button" data-variant="solid" data-size="md">
+          Create Key
+        </button>
+      </div>
+    </DkForm>
+  </DkDialog>
+</template>
+
+<style scoped>
+  .dk-create__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .dk-create__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-create__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+  }
+</style>
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index e564326..5462efc 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -18,11 +18,15 @@
   import DkTable from '../components/DkTable.vue'
   import DkCommandPalette from '../components/DkCommandPalette.vue'
   import DkLogo from '../components/DkLogo.vue'
+  import DkCreateKeyDialog from '../components/DkCreateKeyDialog.vue'
+  import { useKeys } from '../composables/useKeys'
 
   defineOptions({ name: 'DkDashboardPage' })
 
   const tab = shallowRef('keys')
 
+  const keys = useKeys()
+
   const stats = [
     { label: 'Total Requests', value: '1.2M', icon: mdiChartBar },
     { label: 'Active Keys', value: '24', icon: mdiKey },
@@ -30,22 +34,16 @@
     { label: 'Error Rate', value: '0.3%', icon: mdiAlertCircleOutline },
   ]
 
-  const apiKeys = [
-    { id: '1', name: 'Production', key: 'dk_live_abc123', created: '2026-01-15', lastUsed: '2026-04-05' },
-    { id: '2', name: 'Staging', key: 'dk_test_def456', created: '2026-02-20', lastUsed: '2026-04-04' },
-    { id: '3', name: 'CI/CD', key: 'dk_live_ghi789', created: '2026-03-01', lastUsed: '2026-04-05' },
-    { id: '4', name: 'Development', key: 'dk_test_jkl012', created: '2026-03-10', lastUsed: '2026-04-03' },
-    { id: '5', name: 'Mobile App', key: 'dk_live_mno345', created: '2026-03-15', lastUsed: '2026-04-05' },
-  ]
-
   const sidebarSections = [
     { label: 'Overview', icon: mdiViewDashboard, items: ['All Keys', 'Create New', 'Rotate'] },
     { label: 'Management', icon: mdiCog, items: ['Overview', 'Usage', 'Errors'] },
     { label: 'Account', icon: mdiAccount, items: ['Team', 'Billing', 'Security'] },
   ]
 
+  const createOpen = shallowRef(false)
+
   function onNewKey () {
-    alert('Creating new API key...')
+    createOpen.value = true
   }
 
   const paletteOpen = shallowRef(false)
@@ -136,7 +134,14 @@
         ]"
       >
         <template #keys>
-          <DkTable :items="apiKeys" />
+          <!--
+            Cast: useKeys.ApiKey has no string index signature, so it isn't
+            structurally assignable to DkTable's local ApiKey interface
+            (which declares `[key: string]: unknown`) even though every
+            field is unknown-compatible. DkTable's prop type is out of
+            scope here — Wave 2 extends it.
+          -->
+          <DkTable :items="(keys.all.value as any)" />
         </template>
         <template #analytics>
           <DkCard>
@@ -153,6 +158,7 @@
       </DkTabs>
 
       <DkCommandPalette v-model="paletteOpen" :commands="commands" />
+      <DkCreateKeyDialog v-model="createOpen" />
     </div>
   </DkLayout>
 </template>

From 607de8f33e842daef7ae4736567be831d7f4835c Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:43:01 -0500
Subject: [PATCH 09/16] chore(dashboard): replace alert stubs with real
 command-palette actions

---
 src/pages/DashboardPage.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index 5462efc..b9d810b 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
+  import { useNotifications } from '@vuetify/v0'
   import {
     mdiChartBar,
     mdiKey,
@@ -27,6 +28,8 @@
 
   const keys = useKeys()
 
+  const notifications = useNotifications()
+
   const stats = [
     { label: 'Total Requests', value: '1.2M', icon: mdiChartBar },
     { label: 'Active Keys', value: '24', icon: mdiKey },
@@ -49,9 +52,11 @@
   const paletteOpen = shallowRef(false)
 
   const commands = [
-    { id: 'new-key', label: 'Create New API Key', group: 'Actions', action: () => alert('Creating new API key...') },
-    { id: 'rotate', label: 'Rotate All Keys', group: 'Actions', action: () => alert('Rotating all API keys...') },
-    { id: 'revoke', label: 'Revoke a Key', group: 'Actions', action: () => alert('Select a key to revoke.') },
+    { id: 'new-key', label: 'Create New API Key', group: 'Actions', action: () => { createOpen.value = true } },
+    { id: 'rotate', label: 'Rotate All Keys', group: 'Actions', action: () => {
+      for (const k of keys.all.value) keys.rotate(k.id)
+      notifications.send({ subject: 'All keys rotated', severity: 'success' })
+    } },
     { id: 'analytics', label: 'View Analytics', group: 'Navigation', action: () => { tab.value = 'analytics' } },
     { id: 'keys', label: 'View API Keys', group: 'Navigation', action: () => { tab.value = 'keys' } },
     { id: 'settings', label: 'Open Settings', group: 'Navigation', action: () => { tab.value = 'settings' } },

From 0c85972017b11989cbe36f570428660bacc7c066 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 11:53:37 -0500
Subject: [PATCH 10/16] chore(components): add DkCheckbox, DkAlertDialog,
 DkTooltip, DkPagination wrappers

---
 src/components/DkAlertDialog.vue | 96 ++++++++++++++++++++++++++++++++
 src/components/DkCheckbox.vue    | 48 ++++++++++++++++
 src/components/DkPagination.vue  | 70 +++++++++++++++++++++++
 src/components/DkTooltip.vue     | 37 ++++++++++++
 4 files changed, 251 insertions(+)
 create mode 100644 src/components/DkAlertDialog.vue
 create mode 100644 src/components/DkCheckbox.vue
 create mode 100644 src/components/DkPagination.vue
 create mode 100644 src/components/DkTooltip.vue

diff --git a/src/components/DkAlertDialog.vue b/src/components/DkAlertDialog.vue
new file mode 100644
index 0000000..321ac5a
--- /dev/null
+++ b/src/components/DkAlertDialog.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+  import { AlertDialog } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkAlertDialog' })
+
+  const {
+    title = 'Are you sure?',
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+  } = defineProps<{
+    title?: string
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+  }>()
+
+  const open = defineModel<boolean>({ default: false })
+
+  const emit = defineEmits<{ confirm: [] }>()
+
+  function onConfirm () {
+    emit('confirm')
+    open.value = false
+  }
+</script>
+
+<template>
+  <AlertDialog.Root v-model="open">
+    <AlertDialog.Content class="dk-alert">
+      <AlertDialog.Title class="dk-alert__title">{{ title }}</AlertDialog.Title>
+      <AlertDialog.Description v-if="description" class="dk-alert__description">
+        {{ description }}
+      </AlertDialog.Description>
+      <div class="dk-alert__actions">
+        <AlertDialog.Cancel class="dk-alert__cancel">{{ cancelLabel }}</AlertDialog.Cancel>
+        <AlertDialog.Action class="dk-alert__confirm" @click="onConfirm">
+          {{ confirmLabel }}
+        </AlertDialog.Action>
+      </div>
+    </AlertDialog.Content>
+  </AlertDialog.Root>
+</template>
+
+<style>
+  .dk-alert {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 400px;
+    padding: 1.5rem;
+    background: var(--v0-theme-surface);
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+  }
+
+  .dk-alert__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-alert__description {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--v0-theme-muted);
+  }
+
+  .dk-alert__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+  }
+
+  .dk-alert__cancel,
+  .dk-alert__confirm {
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid var(--v0-theme-border);
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+  }
+
+  .dk-alert__confirm {
+    border-color: var(--v0-theme-error);
+    background: var(--v0-theme-error);
+    color: #fff;
+  }
+</style>
diff --git a/src/components/DkCheckbox.vue b/src/components/DkCheckbox.vue
new file mode 100644
index 0000000..2365a29
--- /dev/null
+++ b/src/components/DkCheckbox.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import { Checkbox } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkCheckbox' })
+
+  const { value } = defineProps<{
+    value?: string
+  }>()
+
+  const model = defineModel<boolean>()
+</script>
+
+<template>
+  <Checkbox.Root v-model="model" :value="value" class="dk-checkbox">
+    <Checkbox.Indicator class="dk-checkbox__indicator">
+      <svg viewBox="0 0 24 24" width="14" height="14">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
+      </svg>
+    </Checkbox.Indicator>
+  </Checkbox.Root>
+</template>
+
+<style scoped>
+  .dk-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.25rem;
+    background: var(--v0-theme-surface);
+    color: #fff;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .dk-checkbox[data-state='checked'],
+  .dk-checkbox[aria-checked='true'],
+  .dk-checkbox[data-state='mixed'] {
+    background: var(--v0-theme-primary);
+    border-color: var(--v0-theme-primary);
+  }
+
+  .dk-checkbox__indicator {
+    display: inline-flex;
+  }
+</style>
diff --git a/src/components/DkPagination.vue b/src/components/DkPagination.vue
new file mode 100644
index 0000000..a45ae2c
--- /dev/null
+++ b/src/components/DkPagination.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+  import { Pagination } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkPagination' })
+
+  const { size } = defineProps<{ size: number }>()
+
+  const page = defineModel<number>({ default: 1 })
+</script>
+
+<template>
+  <Pagination.Root v-model="page" :size="size" class="dk-pagination" v-slot="{ items }">
+    <Pagination.Status class="dk-pagination__status" />
+    <Pagination.Prev class="dk-pagination__btn">‹</Pagination.Prev>
+    <template v-for="item in items" :key="`${item.type}-${item.value}`">
+      <Pagination.Item
+        v-if="item.type === 'page'"
+        :value="item.value"
+        class="dk-pagination__item"
+      >
+        {{ item.value }}
+      </Pagination.Item>
+      <Pagination.Ellipsis v-else class="dk-pagination__ellipsis">…</Pagination.Ellipsis>
+    </template>
+    <Pagination.Next class="dk-pagination__btn">›</Pagination.Next>
+  </Pagination.Root>
+</template>
+
+<style scoped>
+  .dk-pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .dk-pagination__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+
+  .dk-pagination__btn,
+  .dk-pagination__item {
+    min-width: 2rem;
+    height: 2rem;
+    border: 1px solid var(--v0-theme-border);
+    border-radius: 0.375rem;
+    background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+
+  .dk-pagination__item[data-selected] {
+    border-color: var(--v0-theme-primary);
+    color: var(--v0-theme-primary);
+  }
+
+  .dk-pagination__btn[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .dk-pagination__ellipsis {
+    padding: 0 0.25rem;
+    color: var(--v0-theme-muted);
+  }
+</style>
diff --git a/src/components/DkTooltip.vue b/src/components/DkTooltip.vue
new file mode 100644
index 0000000..4b33022
--- /dev/null
+++ b/src/components/DkTooltip.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import { Tooltip } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkTooltip' })
+
+  const { text } = defineProps<{ text: string }>()
+</script>
+
+<template>
+  <Tooltip.Root class="dk-tooltip">
+    <Tooltip.Activator class="dk-tooltip__activator">
+      <slot />
+    </Tooltip.Activator>
+    <Tooltip.Content class="dk-tooltip__content">{{ text }}</Tooltip.Content>
+  </Tooltip.Root>
+</template>
+
+<style>
+  .dk-tooltip__activator {
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: default;
+    font: inherit;
+    color: inherit;
+  }
+
+  .dk-tooltip__content {
+    padding: 0.375rem 0.625rem;
+    border-radius: 0.375rem;
+    background: var(--v0-theme-text);
+    color: var(--v0-theme-surface);
+    font-size: 0.75rem;
+    font-family: monospace;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+</style>

From 8a50ac9f079709b3b2f97f7ceac28948071dce1f Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 12:05:06 -0500
Subject: [PATCH 11/16] chore(components): add selection, row/bulk actions,
 tooltip, pagination to DkTable

---
 src/components/DkTable.vue | 172 +++++++++++++++++++++++++++++--------
 1 file changed, 136 insertions(+), 36 deletions(-)

diff --git a/src/components/DkTable.vue b/src/components/DkTable.vue
index 6ce339e..0afbada 100644
--- a/src/components/DkTable.vue
+++ b/src/components/DkTable.vue
@@ -1,30 +1,38 @@
 <script setup lang="ts">
-  import { createDataTable } from '@vuetify/v0'
-  import { shallowRef, watch } from 'vue'
+  import { Checkbox, createDataTable } from '@vuetify/v0'
+  import { computed, ref, shallowRef, toRef, watch } from 'vue'
+  import DkAlertDialog from './DkAlertDialog.vue'
+  import DkCheckbox from './DkCheckbox.vue'
   import DkInput from './DkInput.vue'
+  import DkPagination from './DkPagination.vue'
+  import DkTooltip from './DkTooltip.vue'
+  import type { ApiKey } from '../composables/useKeys'
 
   defineOptions({ name: 'DkTable' })
 
-  interface ApiKey {
-    id: string
-    name: string
-    key: string
-    created: string
-    lastUsed: string
-    [key: string]: unknown
-  }
-
   const { items } = defineProps<{
     items: ApiKey[]
   }>()
 
+  const emit = defineEmits<{
+    rotate: [id: string]
+    revoke: [ids: string[]]
+  }>()
+
+  // createDataTable's generic is constrained to Record<string, unknown>.
+  // ApiKey (Task 1) is a closed interface with no index signature, so it
+  // doesn't satisfy that constraint on its own. Widen locally at this call
+  // boundary instead of re-adding a `[key: string]: unknown` index signature
+  // to the shared ApiKey type.
+  type Row = ApiKey & Record<string, unknown>
+
   const query = shallowRef('')
 
-  const table = createDataTable<ApiKey>({
-    pagination: { itemsPerPage: 10 },
+  const table = createDataTable<Row>({
+    pagination: { itemsPerPage: 5 },
   })
 
-  const { items: rows, pagination, search } = table
+  const { items: rows, pagination, search, selection, total } = table
 
   table.columns.onboard([
     { id: 'name', title: 'Name', filterable: true },
@@ -35,44 +43,115 @@
 
   watch(() => items, value => {
     table.clear()
-    table.onboard(value.map(item => ({ id: item.id, value: item })))
+    table.onboard(value.map(item => ({ id: item.id, value: item as Row })))
   }, { immediate: true })
 
   watch(query, v => search(v))
+
+  const page = computed({
+    get: () => pagination.page.value,
+    set: v => { pagination.page.value = v },
+  })
+
+  const selectedCount = toRef(() => selection.selectedIds.size)
+
+  function mask (key: string): string {
+    return `${key.slice(0, 10)}••••••`
+  }
+
+  // Revoke confirmation state
+  const confirmOpen = shallowRef(false)
+  const pendingIds = ref<string[]>([])
+
+  function askRevoke (ids: string[]) {
+    pendingIds.value = ids
+    confirmOpen.value = true
+  }
+
+  function onConfirmRevoke () {
+    emit('revoke', [...pendingIds.value])
+    for (const id of pendingIds.value) selection.unselect(id)
+    pendingIds.value = []
+  }
 </script>
 
 <template>
   <div class="dk-table">
     <div class="dk-table__toolbar">
       <DkInput v-model="query" placeholder="Search keys..." />
+      <button
+        v-if="selectedCount"
+        class="dk-table__bulk"
+        type="button"
+        @click="askRevoke([...selection.selectedIds] as string[])"
+      >
+        Revoke {{ selectedCount }} selected
+      </button>
     </div>
 
     <table class="dk-table__grid">
       <thead>
         <tr>
+          <th class="dk-table__check">
+            <Checkbox.Root
+              class="dk-checkbox"
+              :model-value="selection.isAllSelected.value"
+              :indeterminate="selection.isMixed.value"
+              @update:model-value="() => selection.toggleAll()"
+            >
+              <Checkbox.Indicator v-slot="{ isMixed }" class="dk-checkbox__indicator">
+                <span v-if="isMixed">−</span>
+                <svg v-else viewBox="0 0 24 24" width="14" height="14">
+                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
+                </svg>
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+          </th>
           <th>Name</th>
           <th>API Key</th>
           <th>Created</th>
           <th>Last Used</th>
+          <th class="dk-table__actions-col">Actions</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="row in rows" :key="row.id">
+          <td class="dk-table__check">
+            <DkCheckbox
+              :model-value="selection.isSelected(row.id)"
+              @update:model-value="() => selection.toggle(row.id)"
+            />
+          </td>
           <td>{{ row.name }}</td>
-          <td><code>{{ row.key }}</code></td>
+          <td>
+            <DkTooltip :text="row.key">
+              <code>{{ mask(row.key) }}</code>
+            </DkTooltip>
+          </td>
           <td>{{ row.created }}</td>
           <td>{{ row.lastUsed }}</td>
+          <td class="dk-table__actions">
+            <button type="button" @click="emit('rotate', row.id)">Rotate</button>
+            <button type="button" class="dk-table__danger" @click="askRevoke([row.id])">Revoke</button>
+          </td>
         </tr>
       </tbody>
     </table>
 
     <div class="dk-table__footer">
-      <span>Page {{ pagination.page.value }} of {{ pagination.pages }}</span>
-      <div class="dk-table__nav">
-        <button :disabled="pagination.page.value <= 1" @click="pagination.prev()">Prev</button>
-        <button :disabled="pagination.page.value >= pagination.pages" @click="pagination.next()">Next</button>
-      </div>
+      <span>{{ rows.length }} of {{ total }} shown</span>
+      <DkPagination v-model="page" :size="pagination.pages" />
     </div>
+
+    <DkAlertDialog
+      v-model="confirmOpen"
+      title="Revoke API key?"
+      :description="pendingIds.length > 1
+        ? `This permanently revokes ${pendingIds.length} keys. This cannot be undone.`
+        : 'This permanently revokes the key. This cannot be undone.'"
+      confirm-label="Revoke"
+      @confirm="onConfirmRevoke"
+    />
   </div>
 </template>
 
@@ -84,10 +163,25 @@
   }
 
   .dk-table__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
     padding: 1rem;
     border-bottom: 1px solid var(--v0-theme-border);
   }
 
+  .dk-table__bulk {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--v0-theme-error);
+    border-radius: 0.375rem;
+    background: transparent;
+    color: var(--v0-theme-error);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
   .dk-table__grid {
     width: 100%;
     border-collapse: collapse;
@@ -108,6 +202,11 @@
     color: var(--v0-theme-text);
   }
 
+  .dk-table__check {
+    width: 1px;
+    white-space: nowrap;
+  }
+
   .dk-table__grid code {
     font-size: 0.8125rem;
     background: var(--v0-theme-background);
@@ -115,30 +214,31 @@
     border-radius: 0.25rem;
   }
 
-  .dk-table__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    color: var(--v0-theme-muted);
-  }
-
-  .dk-table__nav {
+  .dk-table__actions {
     display: flex;
     gap: 0.5rem;
   }
 
-  .dk-table__nav button {
-    padding: 0.375rem 0.75rem;
+  .dk-table__actions button {
+    padding: 0.25rem 0.5rem;
     border: 1px solid var(--v0-theme-border);
     border-radius: 0.375rem;
     background: var(--v0-theme-surface);
+    color: var(--v0-theme-text);
+    font-size: 0.75rem;
     cursor: pointer;
   }
 
-  .dk-table__nav button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .dk-table__danger {
+    color: var(--v0-theme-error);
+  }
+
+  .dk-table__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    color: var(--v0-theme-muted);
   }
 </style>

From 7517174b3071f6a6edff615b2991f253d85cd8d6 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 12:22:54 -0500
Subject: [PATCH 12/16] chore(dashboard): wire rotate and revoke handlers with
 toasts

---
 src/pages/DashboardPage.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index b9d810b..88bd8f1 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -49,6 +49,19 @@
     createOpen.value = true
   }
 
+  function onRotate (id: string) {
+    keys.rotate(id)
+    notifications.send({ subject: 'API key rotated', severity: 'success' })
+  }
+
+  function onRevoke (ids: string[]) {
+    keys.removeMany(ids)
+    notifications.send({
+      subject: ids.length > 1 ? `${ids.length} keys revoked` : 'API key revoked',
+      severity: 'info',
+    })
+  }
+
   const paletteOpen = shallowRef(false)
 
   const commands = [
@@ -139,14 +152,11 @@
         ]"
       >
         <template #keys>
-          <!--
-            Cast: useKeys.ApiKey has no string index signature, so it isn't
-            structurally assignable to DkTable's local ApiKey interface
-            (which declares `[key: string]: unknown`) even though every
-            field is unknown-compatible. DkTable's prop type is out of
-            scope here — Wave 2 extends it.
-          -->
-          <DkTable :items="(keys.all.value as any)" />
+          <DkTable
+            :items="keys.all.value"
+            @rotate="onRotate"
+            @revoke="onRevoke"
+          />
         </template>
         <template #analytics>
           <DkCard>

From 295d753a9a059dc4b7228b6ed57d4489b1c43320 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 12:29:25 -0500
Subject: [PATCH 13/16] chore(components): fix pagination to use total item
 count for page calc

---
 src/components/DkPagination.vue | 4 ++--
 src/components/DkTable.vue      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DkPagination.vue b/src/components/DkPagination.vue
index a45ae2c..1324add 100644
--- a/src/components/DkPagination.vue
+++ b/src/components/DkPagination.vue
@@ -3,13 +3,13 @@
 
   defineOptions({ name: 'DkPagination' })
 
-  const { size } = defineProps<{ size: number }>()
+  const { size, itemsPerPage = 10 } = defineProps<{ size: number, itemsPerPage?: number }>()
 
   const page = defineModel<number>({ default: 1 })
 </script>
 
 <template>
-  <Pagination.Root v-model="page" :size="size" class="dk-pagination" v-slot="{ items }">
+  <Pagination.Root v-model="page" :size="size" :items-per-page="itemsPerPage" class="dk-pagination" v-slot="{ items }">
     <Pagination.Status class="dk-pagination__status" />
     <Pagination.Prev class="dk-pagination__btn">‹</Pagination.Prev>
     <template v-for="item in items" :key="`${item.type}-${item.value}`">
diff --git a/src/components/DkTable.vue b/src/components/DkTable.vue
index 0afbada..5c15673 100644
--- a/src/components/DkTable.vue
+++ b/src/components/DkTable.vue
@@ -140,7 +140,7 @@
 
     <div class="dk-table__footer">
       <span>{{ rows.length }} of {{ total }} shown</span>
-      <DkPagination v-model="page" :size="pagination.pages" />
+      <DkPagination v-model="page" :size="pagination.size" :items-per-page="pagination.itemsPerPage" />
     </div>
 
     <DkAlertDialog

From 0568e2edb6ee92916040f58cdddc137ef81fb6d8 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 Jul 2026 12:43:49 -0500
Subject: [PATCH 14/16] chore(components): style select-all header checkbox and
 show select labels

---
 src/components/DkCheckbox.vue | 10 ++++++----
 src/components/DkSelect.vue   |  6 +++++-
 src/components/DkTable.vue    | 14 +++-----------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/DkCheckbox.vue b/src/components/DkCheckbox.vue
index 2365a29..818cb49 100644
--- a/src/components/DkCheckbox.vue
+++ b/src/components/DkCheckbox.vue
@@ -3,17 +3,19 @@
 
   defineOptions({ name: 'DkCheckbox' })
 
-  const { value } = defineProps<{
+  const { value, indeterminate = false } = defineProps<{
     value?: string
+    indeterminate?: boolean
   }>()
 
   const model = defineModel<boolean>()
 </script>
 
 <template>
-  <Checkbox.Root v-model="model" :value="value" class="dk-checkbox">
-    <Checkbox.Indicator class="dk-checkbox__indicator">
-      <svg viewBox="0 0 24 24" width="14" height="14">
+  <Checkbox.Root v-model="model" :value="value" :indeterminate="indeterminate" class="dk-checkbox">
+    <Checkbox.Indicator v-slot="{ isMixed }" class="dk-checkbox__indicator">
+      <span v-if="isMixed">−</span>
+      <svg v-else viewBox="0 0 24 24" width="14" height="14">
         <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
       </svg>
     </Checkbox.Indicator>
diff --git a/src/components/DkSelect.vue b/src/components/DkSelect.vue
index 351da23..1dcc6e8 100644
--- a/src/components/DkSelect.vue
+++ b/src/components/DkSelect.vue
@@ -15,12 +15,16 @@
   }>()
 
   const model = defineModel<string>()
+
+  function label (value: unknown) {
+    return items.find(item => item.value === value)?.label ?? value
+  }
 </script>
 
 <template>
   <Select.Root v-model="model" class="dk-select">
     <Select.Activator class="dk-select__activator">
-      <Select.Value v-slot="{ selectedValue }">{{ selectedValue }}</Select.Value>
+      <Select.Value v-slot="{ selectedValue }">{{ label(selectedValue) }}</Select.Value>
       <Select.Placeholder class="dk-select__placeholder">{{ placeholder }}</Select.Placeholder>
       <Select.Cue v-slot="{ isOpen }">
         <span class="dk-select__cue">{{ isOpen ? '▲' : '▼' }}</span>
diff --git a/src/components/DkTable.vue b/src/components/DkTable.vue
index 5c15673..c1d78b3 100644
--- a/src/components/DkTable.vue
+++ b/src/components/DkTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Checkbox, createDataTable } from '@vuetify/v0'
+  import { createDataTable } from '@vuetify/v0'
   import { computed, ref, shallowRef, toRef, watch } from 'vue'
   import DkAlertDialog from './DkAlertDialog.vue'
   import DkCheckbox from './DkCheckbox.vue'
@@ -93,19 +93,11 @@
       <thead>
         <tr>
           <th class="dk-table__check">
-            <Checkbox.Root
-              class="dk-checkbox"
+            <DkCheckbox
               :model-value="selection.isAllSelected.value"
               :indeterminate="selection.isMixed.value"
               @update:model-value="() => selection.toggleAll()"
-            >
-              <Checkbox.Indicator v-slot="{ isMixed }" class="dk-checkbox__indicator">
-                <span v-if="isMixed">−</span>
-                <svg v-else viewBox="0 0 24 24" width="14" height="14">
-                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
-                </svg>
-              </Checkbox.Indicator>
-            </Checkbox.Root>
+            />
           </th>
           <th>Name</th>
           <th>API Key</th>

From 7f8cb377a5df15a78953e656f9ae73d7f9fc2205 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 Jul 2026 12:40:42 -0500
Subject: [PATCH 15/16] chore: drop agent plan/spec docs from the repo

docs/superpowers/* is session scaffolding, not product documentation.
Remove tracked plans/specs (including the Phase A ones this branch
added) and ignore the tree going forward. .superpowers/ was already ignored.
---
 .gitignore                                    |    3 +
 .../plans/2026-04-25-devkey-logo.md           |  688 --------
 ...2026-07-09-devkey-phase-a-key-lifecycle.md | 1565 -----------------
 .../specs/2026-04-25-devkey-logo-design.md    |  113 --
 ...-09-devkey-phase-a-key-lifecycle-design.md |  204 ---
 5 files changed, 3 insertions(+), 2570 deletions(-)
 delete mode 100644 docs/superpowers/plans/2026-04-25-devkey-logo.md
 delete mode 100644 docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md
 delete mode 100644 docs/superpowers/specs/2026-04-25-devkey-logo-design.md
 delete mode 100644 docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md

diff --git a/.gitignore b/.gitignore
index c608123..664e68c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,6 @@ dist/
 .vscode/
 *.local
 .superpowers/
+
+# Agent/session planning artifacts (not product docs)
+docs/superpowers/
diff --git a/docs/superpowers/plans/2026-04-25-devkey-logo.md b/docs/superpowers/plans/2026-04-25-devkey-logo.md
deleted file mode 100644
index 490afc3..0000000
--- a/docs/superpowers/plans/2026-04-25-devkey-logo.md
+++ /dev/null
@@ -1,688 +0,0 @@
-# DevKey Logo 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:** Ship the DevKey logo system — inline Vue component, static SVG mark + favicon, generated raster assets — and wire it into the app shell, README, and meta tags. Replace the scaffolded placeholder branding.
-
-**Architecture:** A single `DkLogo.vue` component is the canonical inline mark (uses `currentColor`, sized via prop). Static brand SVGs (`devkey-mark.svg`, `favicon.svg`) live in `public/brand/`. Two PNGs (`apple-touch-icon.png`, `og-image.png`) are produced by a one-shot Playwright-driven Node script (`scripts/generate-brand-assets.mjs`) that renders an HTML template with the real Geist webfont and screenshots at exact dimensions. Wordmark uses Geist 800 via the existing `unplugin-fonts` + `@fontsource/*` pipeline.
-
-**Tech Stack:** Vue 3 + Vite + TypeScript, Vuetify0, `unplugin-fonts` (fontsource provider), Playwright (one-shot raster generation), pnpm.
-
-**Commit conventions:** This repo follows the user's global rule that `feat`/`fix` are reserved for `packages/*` source. DevKey is a demo app, so all commits in this plan use `chore` (build/asset) or `docs` (README) types.
-
----
-
-## File Structure
-
-**Create:**
-- `src/components/DkLogo.vue` — inline SVG mark component
-- `public/brand/devkey-mark.svg` — standalone mark, `currentColor`
-- `public/brand/favicon.svg` — favicon with `prefers-color-scheme` switching
-- `public/brand/apple-touch-icon.png` — generated, 180×180
-- `public/brand/og-image.png` — generated, 1200×630
-- `scripts/generate-brand-assets.mjs` — Playwright-driven raster generator
-- `scripts/brand-template.html` — static HTML template the generator screenshots
-
-**Modify:**
-- `package.json` — add `@fontsource/geist`, add Playwright dev dep, add `gen:brand` script
-- `vite.config.mts` — register Geist 800 with `unplugin-fonts`
-- `index.html` — replace favicon link, add apple-touch-icon, update og:image path
-- `src/pages/LandingPage.vue` — add hero brand lockup
-- `src/pages/LoginPage.vue` — add mark to login card header
-- `src/pages/DashboardPage.vue` — add mark + wordmark to dashboard header
-- `README.md` — add brand header
-
-**Delete:**
-- `src/assets/logo.png`
-- `src/assets/logo.svg`
-- `public/0.png`
-- `public/og-image.png` (replaced by `public/brand/og-image.png`)
-
----
-
-## Task 1: Add Geist font and create the inline mark component
-
-**Files:**
-- Modify: `package.json`
-- Modify: `vite.config.mts`
-- Create: `src/components/DkLogo.vue`
-
-- [ ] **Step 1: Install Geist font**
-
-```bash
-cd ~/sites/devkey && pnpm add @fontsource/geist
-```
-
-Expected: `@fontsource/geist` added to `dependencies` in `package.json`. Lockfile updated.
-
-- [ ] **Step 2: Register Geist 800 in vite.config.mts**
-
-Open `vite.config.mts` and update the `Fonts` plugin call. Add a Geist family entry beside the existing Inter entry.
-
-```ts
-Fonts({
-  fontsource: {
-    families: [
-      {
-        name: 'Inter',
-        weights: [100, 300, 400, 500, 700, 900],
-        styles: ['normal', 'italic'],
-      },
-      {
-        name: 'Geist',
-        weights: [800],
-        styles: ['normal'],
-      },
-    ],
-  },
-}),
-```
-
-- [ ] **Step 3: Create the DkLogo component**
-
-Write `src/components/DkLogo.vue`. The mark uses `currentColor` for both stroke and fill so the parent context controls color. Size defaults to 32.
-
-```vue
-<script setup lang="ts">
-  defineOptions({ name: 'DkLogo' })
-
-  const { size = 32 } = defineProps<{
-    size?: number
-  }>()
-</script>
-
-<template>
-  <svg
-    :width="size"
-    :height="size"
-    viewBox="0 0 64 64"
-    fill="none"
-    role="img"
-    aria-label="DevKey"
-  >
-    <rect x="6" y="18" width="28" height="28" rx="8" stroke="currentColor" stroke-width="5" fill="none"/>
-    <circle cx="20" cy="32" r="3" fill="currentColor"/>
-    <rect x="34" y="29.5" width="26" height="5" fill="currentColor"/>
-    <rect x="46" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-    <rect x="55" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-  </svg>
-</template>
-```
-
-- [ ] **Step 4: Verify the build still passes**
-
-```bash
-cd ~/sites/devkey && pnpm build
-```
-
-Expected: PASS — `vue-tsc` succeeds, vite emits `dist/` with no errors. The new component compiles even though it's not referenced anywhere yet.
-
-- [ ] **Step 5: Commit**
-
-```bash
-cd ~/sites/devkey && git add package.json pnpm-lock.yaml vite.config.mts src/components/DkLogo.vue
-git commit -m "chore(brand): add Geist font and DkLogo component"
-```
-
----
-
-## Task 2: Create static SVG brand assets
-
-**Files:**
-- Create: `public/brand/devkey-mark.svg`
-- Create: `public/brand/favicon.svg`
-
-- [ ] **Step 1: Create the public/brand directory**
-
-```bash
-mkdir -p ~/sites/devkey/public/brand
-```
-
-- [ ] **Step 2: Create the mark SVG**
-
-Write `public/brand/devkey-mark.svg`:
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <rect x="6" y="18" width="28" height="28" rx="8" stroke="currentColor" stroke-width="5" fill="none"/>
-  <circle cx="20" cy="32" r="3" fill="currentColor"/>
-  <rect x="34" y="29.5" width="26" height="5" fill="currentColor"/>
-  <rect x="46" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-  <rect x="55" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-</svg>
-```
-
-- [ ] **Step 3: Create the favicon SVG with auto dark/light**
-
-The favicon needs an actual color since browsers don't reliably propagate `currentColor` to favicon contexts. Use a `<style>` block with a `prefers-color-scheme` media query so the favicon adapts to OS theme.
-
-Write `public/brand/favicon.svg`:
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <style>
-    .mark { color: #D18B1F; }
-    @media (prefers-color-scheme: dark) {
-      .mark { color: #F6B04E; }
-    }
-  </style>
-  <g class="mark">
-    <rect x="6" y="18" width="28" height="28" rx="8" stroke="currentColor" stroke-width="5" fill="none"/>
-    <circle cx="20" cy="32" r="3" fill="currentColor"/>
-    <rect x="34" y="29.5" width="26" height="5" fill="currentColor"/>
-    <rect x="46" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-    <rect x="55" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-  </g>
-</svg>
-```
-
-- [ ] **Step 4: Visually verify in a browser**
-
-```bash
-cd ~/sites/devkey && pnpm dev
-```
-
-Open `http://localhost:3000/brand/devkey-mark.svg` and `http://localhost:3000/brand/favicon.svg`. The mark.svg will appear black against white (no parent `color`) — that's correct, it's intentional for inline embedding. favicon.svg should render brass.
-
-Stop the dev server with Ctrl+C.
-
-- [ ] **Step 5: Commit**
-
-```bash
-cd ~/sites/devkey && git add public/brand/devkey-mark.svg public/brand/favicon.svg
-git commit -m "chore(brand): add mark and favicon SVGs"
-```
-
----
-
-## Task 3: Build the brand asset generation script
-
-**Files:**
-- Create: `scripts/brand-template.html`
-- Create: `scripts/generate-brand-assets.mjs`
-- Modify: `package.json`
-
-The script renders an HTML template in headless Chromium (via Playwright) at the exact target dimensions, then captures a screenshot of a specific element. The wordmark uses the real Geist webfont so the raster is pixel-perfect.
-
-The template renders both variants (apple-touch-icon and og-image) into the DOM at page load — visibility is controlled by a `data-variant` attribute on `<body>`, which the script sets via Playwright before each screenshot. This keeps everything as static HTML (no runtime DOM construction).
-
-- [ ] **Step 1: Create the HTML render template**
-
-Write `scripts/brand-template.html`:
-
-```html
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@800&display=swap">
-  <style>
-    html, body { margin: 0; padding: 0; background: transparent; }
-    body { font-family: 'Geist', system-ui, sans-serif; }
-
-    .stage { display: none; align-items: center; justify-content: center; }
-    body[data-variant="apple"] .stage.apple { display: flex; }
-    body[data-variant="og"] .stage.og { display: flex; }
-
-    .stage.apple {
-      width: 180px; height: 180px;
-      background: #0F1115;
-      border-radius: 36px;
-    }
-    .stage.apple svg { width: 112px; height: 112px; color: #F6B04E; }
-
-    .stage.og {
-      width: 1200px; height: 630px;
-      background: #0F1115;
-      gap: 36px;
-    }
-    .stage.og svg { width: 160px; height: 160px; color: #F6B04E; }
-    .stage.og .wm {
-      font-weight: 800;
-      font-size: 144px;
-      letter-spacing: -0.04em;
-      color: #F5F5F5;
-      line-height: 1;
-    }
-  </style>
-</head>
-<body>
-
-  <div class="stage apple">
-    <svg viewBox="0 0 64 64" fill="none">
-      <rect x="6" y="18" width="28" height="28" rx="8" stroke="currentColor" stroke-width="5" fill="none"/>
-      <circle cx="20" cy="32" r="3" fill="currentColor"/>
-      <rect x="34" y="29.5" width="26" height="5" fill="currentColor"/>
-      <rect x="46" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-      <rect x="55" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-    </svg>
-  </div>
-
-  <div class="stage og">
-    <svg viewBox="0 0 64 64" fill="none">
-      <rect x="6" y="18" width="28" height="28" rx="8" stroke="currentColor" stroke-width="5" fill="none"/>
-      <circle cx="20" cy="32" r="3" fill="currentColor"/>
-      <rect x="34" y="29.5" width="26" height="5" fill="currentColor"/>
-      <rect x="46" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-      <rect x="55" y="34.5" width="5" height="6" rx="1.5" fill="currentColor"/>
-    </svg>
-    <span class="wm">DevKey</span>
-  </div>
-
-</body>
-</html>
-```
-
-- [ ] **Step 2: Create the generation script**
-
-Write `scripts/generate-brand-assets.mjs`:
-
-```js
-import { chromium } from 'playwright'
-import { fileURLToPath } from 'node:url'
-import { dirname, resolve } from 'node:path'
-
-const here = dirname(fileURLToPath(import.meta.url))
-const templatePath = resolve(here, 'brand-template.html')
-const outDir = resolve(here, '..', 'public', 'brand')
-
-const targets = [
-  { variant: 'apple', selector: '.stage.apple', file: 'apple-touch-icon.png', width: 180, height: 180 },
-  { variant: 'og', selector: '.stage.og', file: 'og-image.png', width: 1200, height: 630 },
-]
-
-async function main () {
-  const browser = await chromium.launch()
-  const context = await browser.newContext({ deviceScaleFactor: 2 })
-  const page = await context.newPage()
-
-  for (const target of targets) {
-    await page.setViewportSize({ width: target.width, height: target.height })
-    await page.goto(`file://${templatePath}`)
-    await page.evaluate(variant => {
-      document.body.setAttribute('data-variant', variant)
-    }, target.variant)
-    await page.evaluate(() => document.fonts.ready)
-    const element = await page.$(target.selector)
-    const out = resolve(outDir, target.file)
-    await element.screenshot({ path: out, omitBackground: false })
-    console.log(`wrote ${out}`)
-  }
-
-  await browser.close()
-}
-
-main().catch(err => {
-  console.error(err)
-  process.exit(1)
-})
-```
-
-- [ ] **Step 3: Add Playwright as a devDependency**
-
-```bash
-cd ~/sites/devkey && pnpm add -D playwright
-cd ~/sites/devkey && pnpm exec playwright install chromium
-```
-
-Expected: Playwright installed; Chromium browser binaries downloaded.
-
-- [ ] **Step 4: Add the gen:brand script to package.json**
-
-Open `package.json`. In the `"scripts"` block, add `"gen:brand"` after `"preview"`:
-
-```json
-"scripts": {
-  "dev": "vite",
-  "build": "run-p type-check \"build-only {@}\" --",
-  "preview": "vite preview",
-  "gen:brand": "node scripts/generate-brand-assets.mjs",
-  "build-only": "vite build",
-  "type-check": "vue-tsc --build --force"
-},
-```
-
-- [ ] **Step 5: Run the generator and verify outputs**
-
-```bash
-cd ~/sites/devkey && pnpm gen:brand
-```
-
-Expected console output:
-
-```
-wrote /home/john/sites/devkey/public/brand/apple-touch-icon.png
-wrote /home/john/sites/devkey/public/brand/og-image.png
-```
-
-Then check dimensions:
-
-```bash
-file ~/sites/devkey/public/brand/apple-touch-icon.png ~/sites/devkey/public/brand/og-image.png
-```
-
-Expected: both files report PNG format. apple-touch-icon at 360×360 (2× DPR of 180×180), og-image at 2400×1260 (2× DPR of 1200×630).
-
-- [ ] **Step 6: Visual sanity check**
-
-Open both PNGs in an image viewer (or have the user open them):
-
-```bash
-xdg-open ~/sites/devkey/public/brand/apple-touch-icon.png &
-xdg-open ~/sites/devkey/public/brand/og-image.png &
-```
-
-Confirm:
-- `apple-touch-icon.png`: dark ink tile, brass mark centered, rounded corners
-- `og-image.png`: dark background, brass mark on the left, "DevKey" wordmark in Geist 800 (compressed, distinctive geometry — not Inter)
-
-If the OG image text appears in a generic system font instead of Geist, the Google Fonts request didn't load before the screenshot. Re-run; if it persists, increase wait by adding `await page.waitForTimeout(500)` after the `document.fonts.ready` promise.
-
-- [ ] **Step 7: Commit**
-
-```bash
-cd ~/sites/devkey && git add scripts/ package.json pnpm-lock.yaml public/brand/apple-touch-icon.png public/brand/og-image.png
-git commit -m "chore(brand): add asset generation script and rasters"
-```
-
----
-
-## Task 4: Wire favicon, apple-touch-icon, and OG image in index.html
-
-**Files:**
-- Modify: `index.html`
-
-- [ ] **Step 1: Update favicon and add apple-touch-icon**
-
-In `index.html`, find this line:
-
-```html
-<link rel="icon" type="image/png" href="/0.png">
-```
-
-Replace with:
-
-```html
-<link rel="icon" type="image/svg+xml" href="/brand/favicon.svg">
-<link rel="apple-touch-icon" href="/brand/apple-touch-icon.png">
-```
-
-- [ ] **Step 2: Update OG and Twitter image paths**
-
-In `index.html`, find:
-
-```html
-<meta property="og:image" content="https://devkey.vuetifyjs.com/og-image.png">
-```
-
-Replace with:
-
-```html
-<meta property="og:image" content="https://devkey.vuetifyjs.com/brand/og-image.png">
-```
-
-Then find:
-
-```html
-<meta name="twitter:image" content="https://devkey.vuetifyjs.com/og-image.png">
-```
-
-Replace with:
-
-```html
-<meta name="twitter:image" content="https://devkey.vuetifyjs.com/brand/og-image.png">
-```
-
-- [ ] **Step 3: Verify in browser**
-
-```bash
-cd ~/sites/devkey && pnpm dev
-```
-
-Open `http://localhost:3000`. Browser tab favicon should be the brass key. In DevTools → Network, reload and confirm `/brand/favicon.svg` returns 200. (Apple-touch-icon only loads under iOS UA, so not testable here directly — just verify the link tag is present in the rendered HTML.)
-
-Stop dev server.
-
-- [ ] **Step 4: Commit**
-
-```bash
-cd ~/sites/devkey && git add index.html
-git commit -m "chore(brand): wire favicon and og image to brand assets"
-```
-
----
-
-## Task 5: Place DkLogo across the app pages
-
-**Files:**
-- Modify: `src/pages/LandingPage.vue`
-- Modify: `src/pages/LoginPage.vue`
-- Modify: `src/pages/DashboardPage.vue`
-
-The component goes in different visual contexts on each page. Read each page's full template before editing to find the right insertion point — class names below assume the existing BEM-style scoping (`.dk-landing__*`, `.dk-login__*`, `.dk-dashboard__*`); confirm against actual file content.
-
-- [ ] **Step 1: Add DkLogo + wordmark to LandingPage hero**
-
-Read `src/pages/LandingPage.vue` first to identify the hero section.
-
-In the `<script setup>` block, add this import alongside the existing component imports:
-
-```ts
-import DkLogo from '../components/DkLogo.vue'
-```
-
-In the template's hero section, insert this lockup at the top — above the existing hero headline:
-
-```vue
-<div class="dk-landing__brand">
-  <DkLogo :size="40" class="dk-landing__brand-mark" />
-  <span class="dk-landing__brand-wordmark">DevKey</span>
-</div>
-```
-
-Add the matching styles to the page's `<style>` block (match the scoping convention used by the rest of the file — scoped or global):
-
-```css
-.dk-landing__brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 32px;
-}
-.dk-landing__brand-mark {
-  color: #F6B04E;
-}
-.dk-landing__brand-wordmark {
-  font-family: 'Geist', system-ui, sans-serif;
-  font-weight: 800;
-  font-size: 28px;
-  letter-spacing: -0.04em;
-}
-```
-
-- [ ] **Step 2: Add mark to LoginPage card header**
-
-Read `src/pages/LoginPage.vue` first to find the existing `<h1 class="dk-login__title">Sign in to DevKey</h1>`.
-
-In the `<script setup>` block, add:
-
-```ts
-import DkLogo from '../components/DkLogo.vue'
-```
-
-In the template, immediately inside `<DkCard class="dk-login__card">`, before the existing `<h1>`, add:
-
-```vue
-<DkLogo :size="40" class="dk-login__mark" />
-```
-
-Add to the page's `<style>` block:
-
-```css
-.dk-login__mark {
-  color: #F6B04E;
-  margin-bottom: 16px;
-}
-```
-
-- [ ] **Step 3: Inspect DkLayout for a brand slot**
-
-```bash
-grep -n 'slot' ~/sites/devkey/src/components/DkLayout.vue
-```
-
-Note any named slots (e.g. `#brand`, `#header`). If there is a brand-style slot exposed, prefer using it in the next step; otherwise use the inline placement described below.
-
-- [ ] **Step 4: Add mark + wordmark to DashboardPage**
-
-Read `src/pages/DashboardPage.vue` to find the main content area. The intent is a small brand block at the top of the dashboard surface.
-
-In the `<script setup>` block, add:
-
-```ts
-import DkLogo from '../components/DkLogo.vue'
-```
-
-In the template, at the top of the dashboard's main content area (or inside `DkLayout`'s brand slot if Step 3 found one), add:
-
-```vue
-<div class="dk-dashboard__brand">
-  <DkLogo :size="28" class="dk-dashboard__brand-mark" />
-  <span class="dk-dashboard__brand-text">DevKey</span>
-</div>
-```
-
-Add to the page's `<style>` block:
-
-```css
-.dk-dashboard__brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 24px;
-}
-.dk-dashboard__brand-mark {
-  color: #F6B04E;
-}
-.dk-dashboard__brand-text {
-  font-family: 'Geist', system-ui, sans-serif;
-  font-weight: 800;
-  font-size: 18px;
-  letter-spacing: -0.04em;
-}
-```
-
-(Brass is set on the mark only — the wordmark inherits from the page's normal text color so it stays paper/ink, not brass.)
-
-- [ ] **Step 5: Verify build and visual rendering**
-
-```bash
-cd ~/sites/devkey && pnpm build
-```
-
-Expected: PASS.
-
-Then:
-
-```bash
-cd ~/sites/devkey && pnpm dev
-```
-
-Visit each page in the browser:
-- `http://localhost:3000/` — landing — confirm brass key + "DevKey" wordmark above the hero headline
-- `http://localhost:3000/login` — login — confirm brass key inside the login card, above the title
-- `http://localhost:3000/dashboard` — dashboard — confirm brass key + smaller "DevKey" near the top
-
-The wordmark should render in Geist (compressed letterforms, distinct from Inter). If it looks like Inter or a system font, double-check `unfonts.css` is imported in `src/main.ts` and Geist was actually installed.
-
-Stop dev server.
-
-- [ ] **Step 6: Commit**
-
-```bash
-cd ~/sites/devkey && git add src/pages/LandingPage.vue src/pages/LoginPage.vue src/pages/DashboardPage.vue
-git commit -m "chore(brand): place DkLogo on landing, login, and dashboard pages"
-```
-
----
-
-## Task 6: Update README and remove orphan scaffold assets
-
-**Files:**
-- Modify: `README.md`
-- Delete: `src/assets/logo.png`, `src/assets/logo.svg`, `public/0.png`, `public/og-image.png`
-
-- [ ] **Step 1: Read current README**
-
-```bash
-cat ~/sites/devkey/README.md
-```
-
-Note the current top of the file so the brand header sits naturally above the existing intro.
-
-- [ ] **Step 2: Add brand header to README**
-
-Add this block at the very top of `README.md`, before the existing first heading:
-
-```markdown
-<p align="center">
-  <img src="public/brand/devkey-mark.svg" width="80" alt="DevKey" />
-</p>
-
-<h1 align="center">DevKey</h1>
-
-<p align="center">A Vuetify0 example project — developer API dashboard.</p>
-
----
-```
-
-If the existing README starts with `# DevKey` as the first H1, remove that duplicate so the centered version is the only top heading.
-
-- [ ] **Step 3: Delete orphan scaffold assets**
-
-```bash
-cd ~/sites/devkey && git rm src/assets/logo.png src/assets/logo.svg public/0.png public/og-image.png
-```
-
-Expected: 4 files removed from the index. None are referenced in source (verified during planning).
-
-- [ ] **Step 4: Final build verification**
-
-```bash
-cd ~/sites/devkey && pnpm build
-```
-
-Expected: PASS — no broken imports.
-
-- [ ] **Step 5: Final visual smoke test**
-
-```bash
-cd ~/sites/devkey && pnpm dev
-```
-
-Smoke-test all three pages plus the favicon one more time. No regressions, all logos in place.
-
-Stop dev server.
-
-- [ ] **Step 6: Commit**
-
-```bash
-cd ~/sites/devkey && git add README.md src/assets/ public/
-git commit -m "docs: add brand header to README and remove scaffold assets"
-```
-
-- [ ] **Step 7: Confirm clean working tree**
-
-```bash
-cd ~/sites/devkey && git status
-```
-
-Expected: `working tree clean`.
-
----
-
-## Done
-
-The DevKey logo system is live: an inline `DkLogo` component, two static brand SVGs, two generated PNGs, wired into the app shell, page UI, README, and meta tags. Scaffolded placeholder branding has been removed.
-
-If at any point a step's expected output doesn't match, stop and investigate before continuing — silent drift compounds.
diff --git a/docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md b/docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md
deleted file mode 100644
index af79f58..0000000
--- a/docs/superpowers/plans/2026-07-09-devkey-phase-a-key-lifecycle.md
+++ /dev/null
@@ -1,1565 +0,0 @@
-# DevKey Phase A — Key Lifecycle 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:** Replace DevKey's `alert()`/static-data stubs with working, persisted, canonical Vuetify0 flows for creating, rotating, and revoking API keys.
-
-**Architecture:** A `useKeys()` composable (backed by v0 `useStorage`) owns key CRUD. New thin `Dk*` wrappers expose v0 compound primitives in DevKey's house style. Wave 1 delivers the create flow + toast infra; Wave 2 delivers table interactions (bulk select, revoke, rotate, tooltip, pagination).
-
-**Tech Stack:** Vue 3 + `<script setup lang="ts">`, `@vuetify/v0` (1.0.0-rc.6), Vite, pnpm.
-
-## Global Constraints
-
-- **No tests.** DevKey convention: never add test files unless explicitly asked. Each task verifies via `pnpm type-check` + manual browser check.
-- **Commit types:** `chore(scope):` for feature work, `docs`/`refactor` as appropriate. NEVER `feat`/`fix` (reserved for `packages/*` across the ecosystem). DevKey history uses only `chore`/`docs`.
-- **Never push.** Commit only; DevKey ships to master directly but pushing is a separate, explicit step.
-- **House pattern:** thin `Dk*` wrappers over v0 **compound** components; `defineOptions({ name })`; `defineModel`; destructured `defineProps` with defaults (never `withDefaults`); scoped CSS on `--v0-theme-*` vars; state via `data-*`; `shallowRef` primitives, `ref` objects, `toRef` derived.
-- **Idiomatic only:** use v0 primitives the documented way; never hand-roll logic a primitive provides (select-all math, validation, queue timing).
-
----
-
-## File Structure
-
-**New**
-- `src/composables/useKeys.ts` — persisted key store (CRUD).
-- `src/components/DkDialog.vue` — `Dialog` wrapper.
-- `src/components/DkForm.vue` — `Form` wrapper.
-- `src/components/DkSelect.vue` — `Select` wrapper.
-- `src/components/DkSwitch.vue` — `Switch` wrapper.
-- `src/components/DkNumberField.vue` — `NumberField` wrapper.
-- `src/components/DkCheckbox.vue` — `Checkbox` leaf wrapper.
-- `src/components/DkAlertDialog.vue` — `AlertDialog` wrapper.
-- `src/components/DkSnackbar.vue` — `Snackbar` queue bound to `useNotifications`.
-- `src/components/DkPagination.vue` — `Pagination` wrapper.
-- `src/components/DkTooltip.vue` — `Tooltip` wrapper.
-- `src/components/DkCreateKeyDialog.vue` — composes DkDialog + DkForm + fields.
-
-**Modified**
-- `src/plugins/devkey.ts` — register `createNotificationsPlugin`.
-- `src/components/DkLayout.vue` — mount `DkSnackbar` once.
-- `src/components/DkTable.vue` — selection column, row/bulk actions, tooltip, pagination.
-- `src/pages/DashboardPage.vue` — use `useKeys()`, wire create dialog, real command-palette actions.
-
----
-
-# WAVE 1 — Infrastructure + New Key
-
-## Task 1: `useKeys()` persisted key store
-
-**Files:**
-- Create: `src/composables/useKeys.ts`
-
-**Interfaces:**
-- Produces: `interface ApiKey { id: string; name: string; key: string; env: 'live' | 'test'; autoRotate: boolean; expiresInDays: number; created: string; lastUsed: string }`
-- Produces: `interface CreateKeyInput { name: string; env: 'live' | 'test'; autoRotate: boolean; expiresInDays: number }`
-- Produces: `useKeys(): { all: Ref<ApiKey[]>; add(input: CreateKeyInput): void; remove(id: string): void; removeMany(ids: string[]): void; rotate(id: string): void }`
-
-- [ ] **Step 1: Create the composable**
-
-```ts
-import { useStorage } from '@vuetify/v0'
-import type { Ref } from 'vue'
-
-export interface ApiKey {
-  id: string
-  name: string
-  key: string
-  env: 'live' | 'test'
-  autoRotate: boolean
-  expiresInDays: number
-  created: string
-  lastUsed: string
-}
-
-export interface CreateKeyInput {
-  name: string
-  env: 'live' | 'test'
-  autoRotate: boolean
-  expiresInDays: number
-}
-
-// NOTE: persisting "secret" keys to localStorage is unrealistic for a real
-// product — this is a demonstration of useStorage driving CRUD, not a security
-// pattern.
-const SEED: ApiKey[] = [
-  { id: 'seed-1', name: 'Production', key: 'dk_live_abc123', env: 'live', autoRotate: true, expiresInDays: 90, created: '2026-01-15', lastUsed: '2026-04-05' },
-  { id: 'seed-2', name: 'Staging', key: 'dk_test_def456', env: 'test', autoRotate: false, expiresInDays: 30, created: '2026-02-20', lastUsed: '2026-04-04' },
-  { id: 'seed-3', name: 'CI/CD', key: 'dk_live_ghi789', env: 'live', autoRotate: true, expiresInDays: 90, created: '2026-03-01', lastUsed: '2026-04-05' },
-  { id: 'seed-4', name: 'Development', key: 'dk_test_jkl012', env: 'test', autoRotate: false, expiresInDays: 30, created: '2026-03-10', lastUsed: '2026-04-03' },
-  { id: 'seed-5', name: 'Mobile App', key: 'dk_live_mno345', env: 'live', autoRotate: false, expiresInDays: 365, created: '2026-03-15', lastUsed: '2026-04-05' },
-]
-
-function today (): string {
-  return new Date().toISOString().slice(0, 10)
-}
-
-function uid (): string {
-  return `key_${Math.random().toString(36).slice(2, 10)}`
-}
-
-function generate (env: 'live' | 'test'): string {
-  return `dk_${env}_${Math.random().toString(36).slice(2, 10)}`
-}
-
-export function useKeys () {
-  const storage = useStorage()
-  const all = storage.get<ApiKey[]>('devkey:keys', SEED) as Ref<ApiKey[]>
-
-  function add (input: CreateKeyInput) {
-    all.value = [
-      {
-        id: uid(),
-        name: input.name,
-        key: generate(input.env),
-        env: input.env,
-        autoRotate: input.autoRotate,
-        expiresInDays: input.expiresInDays,
-        created: today(),
-        lastUsed: today(),
-      },
-      ...all.value,
-    ]
-  }
-
-  function remove (id: string) {
-    all.value = all.value.filter(k => k.id !== id)
-  }
-
-  function removeMany (ids: string[]) {
-    const set = new Set(ids)
-    all.value = all.value.filter(k => !set.has(k.id))
-  }
-
-  function rotate (id: string) {
-    all.value = all.value.map(k =>
-      k.id === id ? { ...k, key: generate(k.env), lastUsed: today() } : k,
-    )
-  }
-
-  return { all, add, remove, removeMany, rotate }
-}
-```
-
-- [ ] **Step 2: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/composables/useKeys.ts
-git commit -m "chore(keys): add persisted useKeys store"
-```
-
----
-
-## Task 2: Notifications plugin + `DkSnackbar`
-
-**Files:**
-- Modify: `src/plugins/devkey.ts`
-- Create: `src/components/DkSnackbar.vue`
-- Modify: `src/components/DkLayout.vue`
-
-**Interfaces:**
-- Produces: `useNotifications().send({ subject, severity, timeout? })` available app-wide; `DkSnackbar` renders the queue (mount once).
-
-- [ ] **Step 1: Register the notifications plugin**
-
-Edit `src/plugins/devkey.ts` — add the import and `app.use`:
-
-```ts
-import {
-  createBreakpointsPlugin,
-  createNotificationsPlugin,
-  createPermissionsPlugin,
-  createRulesPlugin,
-} from '@vuetify/v0'
-import type { App } from 'vue'
-
-export default function devkey (app: App) {
-  app.use(
-    createPermissionsPlugin({
-      permissions: {
-        admin: [['manage', '*']],
-        developer: [['read', 'keys'], ['create', 'keys']],
-        viewer: [['read', 'keys']],
-      },
-    })
-  )
-
-  app.use(
-    createRulesPlugin({
-      aliases: {
-        required: v => !!v || 'Required',
-        email: v => /.+@.+\..+/.test(String(v)) || 'Invalid email',
-      },
-    })
-  )
-
-  app.use(createBreakpointsPlugin())
-
-  app.use(createNotificationsPlugin({ timeout: 4000 }))
-}
-```
-
-- [ ] **Step 2: Create `DkSnackbar.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Snackbar } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkSnackbar' })
-</script>
-
-<template>
-  <Snackbar.Portal>
-    <Snackbar.Queue v-slot="{ items }">
-      <div class="dk-snackbar__queue">
-        <Snackbar.Root
-          v-for="item in items"
-          :id="item.id"
-          :key="item.id"
-          class="dk-snackbar"
-          :data-severity="item.severity ?? 'info'"
-        >
-          <Snackbar.Content class="dk-snackbar__content">{{ item.subject }}</Snackbar.Content>
-          <Snackbar.Close class="dk-snackbar__close">✕</Snackbar.Close>
-        </Snackbar.Root>
-      </div>
-    </Snackbar.Queue>
-  </Snackbar.Portal>
-</template>
-
-<style>
-  .dk-snackbar__queue {
-    position: fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    z-index: 9999;
-  }
-
-  .dk-snackbar {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    min-width: 240px;
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--v0-theme-border);
-    border-left: 3px solid var(--v0-theme-primary);
-    border-radius: 0.5rem;
-    background: var(--v0-theme-surface);
-    color: var(--v0-theme-text);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  }
-
-  .dk-snackbar[data-severity='success'] { border-left-color: #22c55e; }
-  .dk-snackbar[data-severity='error'] { border-left-color: var(--v0-theme-error); }
-  .dk-snackbar[data-severity='warning'] { border-left-color: #f59e0b; }
-
-  .dk-snackbar__content {
-    flex: 1;
-    font-size: 0.875rem;
-  }
-
-  .dk-snackbar__close {
-    border: none;
-    background: transparent;
-    color: var(--v0-theme-muted);
-    cursor: pointer;
-    font-size: 0.75rem;
-  }
-</style>
-```
-
-- [ ] **Step 3: Mount `DkSnackbar` in `DkLayout.vue`**
-
-Edit `src/components/DkLayout.vue`. Add the import and render `<DkSnackbar />` at the end of the root `<div>`:
-
-```vue
-<script setup lang="ts">
-  import { useBreakpoints } from '@vuetify/v0'
-  import { toRef } from 'vue'
-  import DkSnackbar from './DkSnackbar.vue'
-
-  defineOptions({ name: 'DkLayout' })
-
-  const breakpoints = useBreakpoints()
-  const mobile = toRef(() => breakpoints.smAndDown.value)
-</script>
-
-<template>
-  <div class="dk-layout" :data-mobile="mobile || undefined">
-    <aside v-if="$slots.sidebar" class="dk-layout__sidebar">
-      <slot name="sidebar" />
-    </aside>
-
-    <main class="dk-layout__main">
-      <slot />
-    </main>
-
-    <DkSnackbar />
-  </div>
-</template>
-```
-(Styles unchanged from current file.)
-
-- [ ] **Step 4: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 5: Manual check**
-
-Run `pnpm dev`. In the browser console on the dashboard, run `window.__vue_app__` is not needed — instead temporarily add a button or use the command palette after Task 7. For now confirm no runtime errors on load and the snackbar container mounts (empty). 
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/plugins/devkey.ts src/components/DkSnackbar.vue src/components/DkLayout.vue
-git commit -m "chore(components): add notifications plugin and DkSnackbar"
-```
-
----
-
-## Task 3: `DkDialog` wrapper
-
-**Files:**
-- Create: `src/components/DkDialog.vue`
-
-**Interfaces:**
-- Produces: `<DkDialog v-model="open" title="…" description="…">` with default (body) slot and `actions` slot (receives `{ close }`).
-
-- [ ] **Step 1: Create `DkDialog.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Dialog } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkDialog' })
-
-  const { title, description } = defineProps<{
-    title?: string
-    description?: string
-  }>()
-
-  const open = defineModel<boolean>({ default: false })
-
-  function close () {
-    open.value = false
-  }
-</script>
-
-<template>
-  <Dialog.Root v-model="open">
-    <Dialog.Content class="dk-dialog">
-      <header v-if="title || description" class="dk-dialog__header">
-        <Dialog.Title v-if="title" class="dk-dialog__title">{{ title }}</Dialog.Title>
-        <Dialog.Description v-if="description" class="dk-dialog__description">
-          {{ description }}
-        </Dialog.Description>
-      </header>
-
-      <div class="dk-dialog__body">
-        <slot :close="close" />
-      </div>
-
-      <footer v-if="$slots.actions" class="dk-dialog__actions">
-        <slot name="actions" :close="close" />
-      </footer>
-    </Dialog.Content>
-  </Dialog.Root>
-</template>
-
-<style>
-  .dk-dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 90%;
-    max-width: 440px;
-    padding: 1.5rem;
-    background: var(--v0-theme-surface);
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.75rem;
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
-  }
-
-  .dk-dialog__header {
-    margin-bottom: 1rem;
-  }
-
-  .dk-dialog__title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--v0-theme-text);
-  }
-
-  .dk-dialog__description {
-    margin-top: 0.25rem;
-    font-size: 0.875rem;
-    color: var(--v0-theme-muted);
-  }
-
-  .dk-dialog__body {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .dk-dialog__actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 1.5rem;
-  }
-</style>
-```
-
-- [ ] **Step 2: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/components/DkDialog.vue
-git commit -m "chore(components): add DkDialog wrapper"
-```
-
----
-
-## Task 4: Form field wrappers (`DkForm`, `DkSelect`, `DkSwitch`, `DkNumberField`)
-
-**Files:**
-- Create: `src/components/DkForm.vue`
-- Create: `src/components/DkSelect.vue`
-- Create: `src/components/DkSwitch.vue`
-- Create: `src/components/DkNumberField.vue`
-
-**Interfaces:**
-- Produces: `<DkForm v-model="valid" @submit="onSubmit">` (submit payload `{ valid: boolean }`, default slot receives `{ valid }`).
-- Produces: `<DkSelect v-model="value" :items="[{ id, label, value }]" placeholder="…" />`.
-- Produces: `<DkSwitch v-model="bool">label</DkSwitch>`.
-- Produces: `<DkNumberField v-model="num" :min :max :step />`.
-
-- [ ] **Step 1: Create `DkForm.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Form } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkForm' })
-
-  const valid = defineModel<boolean | null>({ default: null })
-
-  const emit = defineEmits<{
-    submit: [payload: { valid: boolean }]
-  }>()
-
-  function onSubmit (payload: { valid: boolean }) {
-    emit('submit', payload)
-  }
-</script>
-
-<template>
-  <Form v-model="valid" class="dk-form" @submit="onSubmit">
-    <slot :valid="valid" />
-  </Form>
-</template>
-
-<style scoped>
-  .dk-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-</style>
-```
-
-- [ ] **Step 2: Create `DkSelect.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Select } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkSelect' })
-
-  interface Option {
-    id: string
-    label: string
-    value: string
-  }
-
-  const { items, placeholder = 'Select…' } = defineProps<{
-    items: Option[]
-    placeholder?: string
-  }>()
-
-  const model = defineModel<string>()
-</script>
-
-<template>
-  <Select.Root v-model="model" class="dk-select">
-    <Select.Activator class="dk-select__activator">
-      <Select.Value v-slot="{ selectedValue }">{{ selectedValue }}</Select.Value>
-      <Select.Placeholder class="dk-select__placeholder">{{ placeholder }}</Select.Placeholder>
-      <Select.Cue v-slot="{ isOpen }">
-        <span class="dk-select__cue">{{ isOpen ? '▲' : '▼' }}</span>
-      </Select.Cue>
-    </Select.Activator>
-
-    <Select.Content class="dk-select__content">
-      <Select.Item
-        v-for="item in items"
-        :id="item.id"
-        :key="item.id"
-        :value="item.value"
-        v-slot="{ isSelected, attrs }"
-      >
-        <div v-bind="attrs" class="dk-select__item" :data-selected="isSelected || undefined">
-          {{ item.label }}
-        </div>
-      </Select.Item>
-    </Select.Content>
-  </Select.Root>
-</template>
-
-<style>
-  .dk-select__activator {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 100%;
-    padding: 0.625rem 0.75rem;
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.5rem;
-    background: var(--v0-theme-surface);
-    color: var(--v0-theme-text);
-    font-size: 1rem;
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .dk-select__placeholder {
-    color: var(--v0-theme-muted);
-  }
-
-  .dk-select__cue {
-    margin-left: auto;
-    font-size: 0.625rem;
-    color: var(--v0-theme-muted);
-  }
-
-  .dk-select__content {
-    min-width: var(--v0-select-width, 12rem);
-    padding: 0.25rem;
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.5rem;
-    background: var(--v0-theme-surface);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  }
-
-  .dk-select__item {
-    padding: 0.5rem 0.625rem;
-    border-radius: 0.375rem;
-    color: var(--v0-theme-text);
-    font-size: 0.9375rem;
-    cursor: pointer;
-  }
-
-  .dk-select__item:hover,
-  .dk-select__item[data-selected] {
-    background: var(--v0-theme-background);
-  }
-</style>
-```
-
-- [ ] **Step 3: Create `DkSwitch.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Switch } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkSwitch' })
-
-  const model = defineModel<boolean>({ default: false })
-</script>
-
-<template>
-  <label class="dk-switch">
-    <Switch.Root v-model="model" class="dk-switch__root">
-      <Switch.Track class="dk-switch__track">
-        <Switch.Thumb class="dk-switch__thumb" />
-      </Switch.Track>
-    </Switch.Root>
-    <span v-if="$slots.default" class="dk-switch__label"><slot /></span>
-  </label>
-</template>
-
-<style>
-  .dk-switch {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.625rem;
-    cursor: pointer;
-  }
-
-  .dk-switch__root {
-    border: none;
-    background: transparent;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  .dk-switch__track {
-    display: inline-flex;
-    align-items: center;
-    width: 40px;
-    height: 22px;
-    padding: 2px;
-    border-radius: 999px;
-    background: var(--v0-theme-border);
-    transition: background 0.15s ease;
-  }
-
-  .dk-switch__track[data-state='checked'] {
-    background: var(--v0-theme-primary);
-  }
-
-  .dk-switch__thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #fff;
-    transition: transform 0.15s ease;
-  }
-
-  .dk-switch__thumb[data-state='checked'] {
-    transform: translateX(18px);
-  }
-
-  .dk-switch__label {
-    font-size: 0.875rem;
-    color: var(--v0-theme-text);
-  }
-</style>
-```
-
-- [ ] **Step 4: Create `DkNumberField.vue`**
-
-```vue
-<script setup lang="ts">
-  import { NumberField } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkNumberField' })
-
-  const { min, max, step = 1 } = defineProps<{
-    min?: number
-    max?: number
-    step?: number
-  }>()
-
-  const model = defineModel<number | null>({ default: null })
-</script>
-
-<template>
-  <NumberField.Root
-    v-model="model"
-    :min="min"
-    :max="max"
-    :step="step"
-    class="dk-number"
-  >
-    <NumberField.Decrement class="dk-number__btn">−</NumberField.Decrement>
-    <NumberField.Control class="dk-number__control" />
-    <NumberField.Increment class="dk-number__btn">+</NumberField.Increment>
-  </NumberField.Root>
-</template>
-
-<style>
-  .dk-number {
-    display: inline-flex;
-    align-items: stretch;
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background: var(--v0-theme-surface);
-  }
-
-  .dk-number__btn {
-    width: 2.25rem;
-    border: none;
-    background: var(--v0-theme-background);
-    color: var(--v0-theme-text);
-    font-size: 1rem;
-    cursor: pointer;
-  }
-
-  .dk-number__btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .dk-number__control {
-    width: 4rem;
-    border: none;
-    background: transparent;
-    color: var(--v0-theme-text);
-    text-align: center;
-    font-size: 1rem;
-    outline: none;
-  }
-</style>
-```
-
-- [ ] **Step 5: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors. If `data-state` attribute names differ for Switch, adjust CSS selectors after visual check (Task 6) — do not change the component logic.
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/components/DkForm.vue src/components/DkSelect.vue src/components/DkSwitch.vue src/components/DkNumberField.vue
-git commit -m "chore(components): add DkForm, DkSelect, DkSwitch, DkNumberField wrappers"
-```
-
----
-
-## Task 5: `DkCreateKeyDialog` + dashboard create wiring
-
-**Files:**
-- Create: `src/components/DkCreateKeyDialog.vue`
-- Modify: `src/pages/DashboardPage.vue`
-
-**Interfaces:**
-- Consumes: `useKeys().add` (Task 1), `DkDialog` (Task 3), `DkForm`/`DkSelect`/`DkSwitch`/`DkNumberField` (Task 4), `DkInput` (existing), `useNotifications` (Task 2).
-- Produces: `<DkCreateKeyDialog v-model="open" @created="…" />`.
-
-- [ ] **Step 1: Create `DkCreateKeyDialog.vue`**
-
-```vue
-<script setup lang="ts">
-  import { useNotifications } from '@vuetify/v0'
-  import { reactive, shallowRef } from 'vue'
-  import DkDialog from './DkDialog.vue'
-  import DkForm from './DkForm.vue'
-  import DkInput from './DkInput.vue'
-  import DkSelect from './DkSelect.vue'
-  import DkSwitch from './DkSwitch.vue'
-  import DkNumberField from './DkNumberField.vue'
-  import DkButton from './DkButton.vue'
-  import { useKeys } from '../composables/useKeys'
-  import type { CreateKeyInput } from '../composables/useKeys'
-
-  defineOptions({ name: 'DkCreateKeyDialog' })
-
-  const open = defineModel<boolean>({ default: false })
-
-  const keys = useKeys()
-  const notifications = useNotifications()
-
-  const envItems = [
-    { id: 'live', label: 'Live', value: 'live' },
-    { id: 'test', label: 'Test', value: 'test' },
-  ]
-
-  function blank (): CreateKeyInput {
-    return { name: '', env: 'live', autoRotate: false, expiresInDays: 90 }
-  }
-
-  const form = reactive(blank())
-  const valid = shallowRef<boolean | null>(null)
-
-  function onSubmit (payload: { valid: boolean }) {
-    if (!payload.valid) return
-    keys.add({ ...form })
-    notifications.send({ subject: `API key "${form.name}" created`, severity: 'success' })
-    Object.assign(form, blank())
-    open.value = false
-  }
-</script>
-
-<template>
-  <DkDialog
-    v-model="open"
-    title="Create API Key"
-    description="Generate a new key for your application."
-  >
-    <DkForm v-model="valid" @submit="onSubmit">
-      <DkInput v-model="form.name" label="Name" placeholder="e.g. Production" :rules="['required']" />
-
-      <div class="dk-create__field">
-        <span class="dk-create__label">Environment</span>
-        <DkSelect v-model="form.env" :items="envItems" />
-      </div>
-
-      <DkNumberField v-model="form.expiresInDays" :min="1" :max="365" />
-
-      <DkSwitch v-model="form.autoRotate">Auto-rotate on expiry</DkSwitch>
-
-      <div class="dk-create__actions">
-        <DkButton type="button" @click="open = false">Cancel</DkButton>
-        <DkButton type="submit">Create Key</DkButton>
-      </div>
-    </DkForm>
-  </DkDialog>
-</template>
-
-<style scoped>
-  .dk-create__field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-
-  .dk-create__label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--v0-theme-text);
-  }
-
-  .dk-create__actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 0.5rem;
-  }
-</style>
-```
-
-> Note: `DkButton` prop/slot API is assumed to accept native `type`. If `DkButton` does not forward `type`, use plain `<button>` elements styled with `.dk-dashboard__new-key` class instead — check `src/components/DkButton.vue` before implementing this step.
-
-- [ ] **Step 2: Wire into `DashboardPage.vue`**
-
-In `src/pages/DashboardPage.vue`:
-1. Add imports: `import DkCreateKeyDialog from '../components/DkCreateKeyDialog.vue'` and `import { useKeys } from '../composables/useKeys'`.
-2. Replace the hardcoded `apiKeys` array with `const keys = useKeys()`.
-3. Replace `function onNewKey () { alert(...) }` with `const createOpen = shallowRef(false)` and `function onNewKey () { createOpen.value = true }`.
-4. Pass keys to the table: `<DkTable :items="keys.all.value" />` (Wave 2 extends DkTable; for now it still accepts `items`).
-5. Render the dialog inside `.dk-dashboard`: `<DkCreateKeyDialog v-model="createOpen" />`.
-
-```vue
-// script additions
-import DkCreateKeyDialog from '../components/DkCreateKeyDialog.vue'
-import { useKeys } from '../composables/useKeys'
-
-const keys = useKeys()
-const createOpen = shallowRef(false)
-
-function onNewKey () {
-  createOpen.value = true
-}
-```
-
-```vue
-// template: replace <DkTable :items="apiKeys" /> with
-<DkTable :items="keys.all.value" />
-
-// add near <DkCommandPalette ... />
-<DkCreateKeyDialog v-model="createOpen" />
-```
-
-- [ ] **Step 3: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 4: Manual check**
-
-Run `pnpm dev`. On the dashboard: click **New Key** → dialog opens. Submit empty → "Required" error on Name, dialog stays open. Fill Name, pick Test env, set expiry, toggle auto-rotate, submit → dialog closes, success toast appears bottom-right and auto-dismisses (~4s), new row appears at top of the table. Reload page → new key persists.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/components/DkCreateKeyDialog.vue src/pages/DashboardPage.vue
-git commit -m "chore(dashboard): wire real create-key dialog with validation and toast"
-```
-
----
-
-## Task 6: Real command-palette actions
-
-**Files:**
-- Modify: `src/pages/DashboardPage.vue`
-
-**Interfaces:**
-- Consumes: `keys` (Task 5), `useNotifications` (Task 2), `createOpen` (Task 5).
-
-- [ ] **Step 1: Replace `alert()` command actions**
-
-In `src/pages/DashboardPage.vue`, add `import { useNotifications } from '@vuetify/v0'` and `const notifications = useNotifications()`. Rewrite the `commands` array actions:
-
-```ts
-const commands = [
-  { id: 'new-key', label: 'Create New API Key', group: 'Actions', action: () => { createOpen.value = true } },
-  { id: 'rotate', label: 'Rotate All Keys', group: 'Actions', action: () => {
-    for (const k of keys.all.value) keys.rotate(k.id)
-    notifications.send({ subject: 'All keys rotated', severity: 'success' })
-  } },
-  { id: 'analytics', label: 'View Analytics', group: 'Navigation', action: () => { tab.value = 'analytics' } },
-  { id: 'keys', label: 'View API Keys', group: 'Navigation', action: () => { tab.value = 'keys' } },
-  { id: 'settings', label: 'Open Settings', group: 'Navigation', action: () => { tab.value = 'settings' } },
-  { id: 'docs', label: 'Open Documentation', group: 'Links', action: () => window.open('https://0.vuetifyjs.com', '_blank') },
-  { id: 'github', label: 'View on GitHub', group: 'Links', action: () => window.open('https://github.com/vuetifyjs/0', '_blank') },
-]
-```
-(Remove the `revoke` command — revocation is per-row in Wave 2.)
-
-- [ ] **Step 2: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 3: Manual check**
-
-`pnpm dev`. Press Cmd+K → "Create New API Key" opens the dialog; "Rotate All Keys" changes every `key` value and fires a toast; navigation commands switch tabs.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/pages/DashboardPage.vue
-git commit -m "chore(dashboard): replace alert stubs with real command-palette actions"
-```
-
----
-
-# WAVE 2 — Table Interactions
-
-## Task 7: Leaf wrappers (`DkCheckbox`, `DkAlertDialog`, `DkTooltip`, `DkPagination`)
-
-**Files:**
-- Create: `src/components/DkCheckbox.vue`
-- Create: `src/components/DkAlertDialog.vue`
-- Create: `src/components/DkTooltip.vue`
-- Create: `src/components/DkPagination.vue`
-
-**Interfaces:**
-- Produces: `<DkCheckbox v-model="bool" />` (standalone) or `<DkCheckbox :value="id" />` inside a `Checkbox.Group`.
-- Produces: `<DkAlertDialog v-model="open" title description confirm-label @confirm />`.
-- Produces: `<DkTooltip text="…"><activator/></DkTooltip>`.
-- Produces: `<DkPagination v-model="page" :size="pages" />`.
-
-- [ ] **Step 1: Create `DkCheckbox.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Checkbox } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkCheckbox' })
-
-  const { value } = defineProps<{
-    value?: string
-  }>()
-
-  const model = defineModel<boolean>()
-</script>
-
-<template>
-  <Checkbox.Root v-model="model" :value="value" class="dk-checkbox">
-    <Checkbox.Indicator class="dk-checkbox__indicator">
-      <svg viewBox="0 0 24 24" width="14" height="14">
-        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
-      </svg>
-    </Checkbox.Indicator>
-  </Checkbox.Root>
-</template>
-
-<style>
-  .dk-checkbox {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.25rem;
-    background: var(--v0-theme-surface);
-    color: #fff;
-    cursor: pointer;
-    padding: 0;
-  }
-
-  .dk-checkbox[data-state='checked'],
-  .dk-checkbox[aria-checked='true'],
-  .dk-checkbox[data-state='mixed'] {
-    background: var(--v0-theme-primary);
-    border-color: var(--v0-theme-primary);
-  }
-
-  .dk-checkbox__indicator {
-    display: inline-flex;
-  }
-</style>
-```
-
-- [ ] **Step 2: Create `DkAlertDialog.vue`**
-
-```vue
-<script setup lang="ts">
-  import { AlertDialog } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkAlertDialog' })
-
-  const {
-    title = 'Are you sure?',
-    description,
-    confirmLabel = 'Confirm',
-    cancelLabel = 'Cancel',
-  } = defineProps<{
-    title?: string
-    description?: string
-    confirmLabel?: string
-    cancelLabel?: string
-  }>()
-
-  const open = defineModel<boolean>({ default: false })
-
-  const emit = defineEmits<{ confirm: [] }>()
-
-  function onConfirm () {
-    emit('confirm')
-    open.value = false
-  }
-</script>
-
-<template>
-  <AlertDialog.Root v-model="open">
-    <AlertDialog.Content class="dk-alert">
-      <AlertDialog.Title class="dk-alert__title">{{ title }}</AlertDialog.Title>
-      <AlertDialog.Description v-if="description" class="dk-alert__description">
-        {{ description }}
-      </AlertDialog.Description>
-      <div class="dk-alert__actions">
-        <AlertDialog.Cancel class="dk-alert__cancel">{{ cancelLabel }}</AlertDialog.Cancel>
-        <AlertDialog.Action class="dk-alert__confirm" @click="onConfirm">
-          {{ confirmLabel }}
-        </AlertDialog.Action>
-      </div>
-    </AlertDialog.Content>
-  </AlertDialog.Root>
-</template>
-
-<style>
-  .dk-alert {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 90%;
-    max-width: 400px;
-    padding: 1.5rem;
-    background: var(--v0-theme-surface);
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.75rem;
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
-  }
-
-  .dk-alert__title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--v0-theme-text);
-  }
-
-  .dk-alert__description {
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--v0-theme-muted);
-  }
-
-  .dk-alert__actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 1.5rem;
-  }
-
-  .dk-alert__cancel,
-  .dk-alert__confirm {
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid var(--v0-theme-border);
-    background: var(--v0-theme-surface);
-    color: var(--v0-theme-text);
-  }
-
-  .dk-alert__confirm {
-    border-color: var(--v0-theme-error);
-    background: var(--v0-theme-error);
-    color: #fff;
-  }
-</style>
-```
-
-- [ ] **Step 3: Create `DkTooltip.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Tooltip } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkTooltip' })
-
-  const { text } = defineProps<{ text: string }>()
-</script>
-
-<template>
-  <Tooltip.Root class="dk-tooltip">
-    <Tooltip.Activator class="dk-tooltip__activator">
-      <slot />
-    </Tooltip.Activator>
-    <Tooltip.Content class="dk-tooltip__content">{{ text }}</Tooltip.Content>
-  </Tooltip.Root>
-</template>
-
-<style>
-  .dk-tooltip__activator {
-    border: none;
-    background: transparent;
-    padding: 0;
-    cursor: default;
-    font: inherit;
-    color: inherit;
-  }
-
-  .dk-tooltip__content {
-    padding: 0.375rem 0.625rem;
-    border-radius: 0.375rem;
-    background: var(--v0-theme-text);
-    color: var(--v0-theme-surface);
-    font-size: 0.75rem;
-    font-family: monospace;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-  }
-</style>
-```
-
-- [ ] **Step 4: Create `DkPagination.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Pagination } from '@vuetify/v0'
-
-  defineOptions({ name: 'DkPagination' })
-
-  const { size } = defineProps<{ size: number }>()
-
-  const page = defineModel<number>({ default: 1 })
-</script>
-
-<template>
-  <Pagination.Root v-model="page" :size="size" class="dk-pagination" v-slot="{ items }">
-    <Pagination.Status class="dk-pagination__status" />
-    <Pagination.Prev class="dk-pagination__btn">‹</Pagination.Prev>
-    <template v-for="item in items" :key="`${item.type}-${item.value}`">
-      <Pagination.Item
-        v-if="item.type === 'page'"
-        :value="item.value"
-        class="dk-pagination__item"
-      >
-        {{ item.value }}
-      </Pagination.Item>
-      <Pagination.Ellipsis v-else class="dk-pagination__ellipsis">…</Pagination.Ellipsis>
-    </template>
-    <Pagination.Next class="dk-pagination__btn">›</Pagination.Next>
-  </Pagination.Root>
-</template>
-
-<style>
-  .dk-pagination {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  .dk-pagination__status {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-  }
-
-  .dk-pagination__btn,
-  .dk-pagination__item {
-    min-width: 2rem;
-    height: 2rem;
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.375rem;
-    background: var(--v0-theme-surface);
-    color: var(--v0-theme-text);
-    font-size: 0.8125rem;
-    cursor: pointer;
-  }
-
-  .dk-pagination__item[data-selected] {
-    border-color: var(--v0-theme-primary);
-    color: var(--v0-theme-primary);
-  }
-
-  .dk-pagination__btn[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .dk-pagination__ellipsis {
-    padding: 0 0.25rem;
-    color: var(--v0-theme-muted);
-  }
-</style>
-```
-
-- [ ] **Step 5: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors. If the Pagination Root slot prop is not named `items`, or item objects lack `.type`/`.value`, adjust the template to the actual slot contract — verify with `get_vuetify0_component_guide` name=`Pagination` before changing.
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/components/DkCheckbox.vue src/components/DkAlertDialog.vue src/components/DkTooltip.vue src/components/DkPagination.vue
-git commit -m "chore(components): add DkCheckbox, DkAlertDialog, DkTooltip, DkPagination wrappers"
-```
-
----
-
-## Task 8: `DkTable` — selection, row/bulk actions, tooltip, pagination
-
-**Files:**
-- Modify: `src/components/DkTable.vue`
-
-**Interfaces:**
-- Consumes: `ApiKey` type (Task 1 — import for prop typing), `DkCheckbox`, `DkAlertDialog`, `DkTooltip`, `DkPagination` (Task 7), `Checkbox` (`Group`/`SelectAll`), `useNotifications` (Task 2).
-- Emits: `rotate: [id: string]`, `revoke: [ids: string[]]` — the parent (DashboardPage) performs the mutation so the store stays the single writer.
-
-- [ ] **Step 1: Rewrite `DkTable.vue`**
-
-```vue
-<script setup lang="ts">
-  import { Checkbox, createDataTable } from '@vuetify/v0'
-  import { shallowRef, ref, computed, watch } from 'vue'
-  import DkInput from './DkInput.vue'
-  import DkCheckbox from './DkCheckbox.vue'
-  import DkAlertDialog from './DkAlertDialog.vue'
-  import DkTooltip from './DkTooltip.vue'
-  import DkPagination from './DkPagination.vue'
-  import type { ApiKey } from '../composables/useKeys'
-
-  defineOptions({ name: 'DkTable' })
-
-  const { items } = defineProps<{
-    items: ApiKey[]
-  }>()
-
-  const emit = defineEmits<{
-    rotate: [id: string]
-    revoke: [ids: string[]]
-  }>()
-
-  const query = shallowRef('')
-  const selected = ref<string[]>([])
-
-  const table = createDataTable<ApiKey>({
-    pagination: { itemsPerPage: 5 },
-  })
-
-  const { items: rows, pagination, search } = table
-
-  table.columns.onboard([
-    { id: 'name', title: 'Name', filterable: true },
-    { id: 'key', title: 'API Key', filterable: true },
-    { id: 'created', title: 'Created', filterable: true },
-    { id: 'lastUsed', title: 'Last Used', filterable: true },
-  ])
-
-  watch(() => items, value => {
-    table.clear()
-    table.onboard(value.map(item => ({ id: item.id, value: item })))
-    selected.value = selected.value.filter(id => value.some(k => k.id === id))
-  }, { immediate: true })
-
-  watch(query, v => search(v))
-
-  const page = computed({
-    get: () => pagination.page.value,
-    set: v => { pagination.page.value = v },
-  })
-
-  const rowIds = computed(() => (rows.value as ApiKey[]).map(r => r.id))
-
-  function mask (key: string): string {
-    return `${key.slice(0, 10)}••••••`
-  }
-
-  // Revoke confirmation state
-  const confirmOpen = shallowRef(false)
-  const pendingIds = ref<string[]>([])
-
-  function askRevoke (ids: string[]) {
-    pendingIds.value = ids
-    confirmOpen.value = true
-  }
-
-  function onConfirmRevoke () {
-    emit('revoke', [...pendingIds.value])
-    selected.value = selected.value.filter(id => !pendingIds.value.includes(id))
-    pendingIds.value = []
-  }
-</script>
-
-<template>
-  <div class="dk-table">
-    <div class="dk-table__toolbar">
-      <DkInput v-model="query" placeholder="Search keys..." />
-      <button
-        v-if="selected.length"
-        class="dk-table__bulk"
-        type="button"
-        @click="askRevoke(selected)"
-      >
-        Revoke {{ selected.length }} selected
-      </button>
-    </div>
-
-    <Checkbox.Group v-model="selected">
-      <table class="dk-table__grid">
-        <thead>
-          <tr>
-            <th class="dk-table__check">
-              <Checkbox.SelectAll class="dk-checkbox">
-                <Checkbox.Indicator v-slot="{ isMixed }" class="dk-checkbox__indicator">
-                  <span v-if="isMixed">−</span>
-                  <svg v-else viewBox="0 0 24 24" width="14" height="14">
-                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
-                  </svg>
-                </Checkbox.Indicator>
-              </Checkbox.SelectAll>
-            </th>
-            <th>Name</th>
-            <th>API Key</th>
-            <th>Created</th>
-            <th>Last Used</th>
-            <th class="dk-table__actions-col">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in (rows as ApiKey[])" :key="row.id">
-            <td class="dk-table__check">
-              <DkCheckbox :value="row.id" />
-            </td>
-            <td>{{ row.name }}</td>
-            <td>
-              <DkTooltip :text="row.key">
-                <code>{{ mask(row.key) }}</code>
-              </DkTooltip>
-            </td>
-            <td>{{ row.created }}</td>
-            <td>{{ row.lastUsed }}</td>
-            <td class="dk-table__actions">
-              <button type="button" @click="emit('rotate', row.id)">Rotate</button>
-              <button type="button" class="dk-table__danger" @click="askRevoke([row.id])">Revoke</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </Checkbox.Group>
-
-    <div class="dk-table__footer">
-      <span>{{ rowIds.length }} of {{ items.length }} shown</span>
-      <DkPagination v-model="page" :size="pagination.pages" />
-    </div>
-
-    <DkAlertDialog
-      v-model="confirmOpen"
-      title="Revoke API key?"
-      :description="pendingIds.length > 1
-        ? `This permanently revokes ${pendingIds.length} keys. This cannot be undone.`
-        : 'This permanently revokes the key. This cannot be undone.'"
-      confirm-label="Revoke"
-      @confirm="onConfirmRevoke"
-    />
-  </div>
-</template>
-
-<style scoped>
-  .dk-table {
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.75rem;
-    overflow: hidden;
-  }
-
-  .dk-table__toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem;
-    border-bottom: 1px solid var(--v0-theme-border);
-  }
-
-  .dk-table__bulk {
-    padding: 0.375rem 0.75rem;
-    border: 1px solid var(--v0-theme-error);
-    border-radius: 0.375rem;
-    background: transparent;
-    color: var(--v0-theme-error);
-    font-size: 0.8125rem;
-    cursor: pointer;
-    white-space: nowrap;
-  }
-
-  .dk-table__grid {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .dk-table__grid th {
-    text-align: left;
-    padding: 0.75rem 1rem;
-    font-size: 0.8125rem;
-    color: var(--v0-theme-muted);
-    font-weight: 600;
-    border-bottom: 1px solid var(--v0-theme-border);
-  }
-
-  .dk-table__grid td {
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--v0-theme-border);
-    color: var(--v0-theme-text);
-  }
-
-  .dk-table__check {
-    width: 1px;
-    white-space: nowrap;
-  }
-
-  .dk-table__grid code {
-    font-size: 0.8125rem;
-    background: var(--v0-theme-background);
-    padding: 0.125rem 0.375rem;
-    border-radius: 0.25rem;
-  }
-
-  .dk-table__actions {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .dk-table__actions button {
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--v0-theme-border);
-    border-radius: 0.375rem;
-    background: var(--v0-theme-surface);
-    color: var(--v0-theme-text);
-    font-size: 0.75rem;
-    cursor: pointer;
-  }
-
-  .dk-table__danger {
-    color: var(--v0-theme-error);
-  }
-
-  .dk-table__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    color: var(--v0-theme-muted);
-  }
-</style>
-```
-
-> Note: `pagination.pages` and `pagination.page` come from `createDataTable`'s pagination context (already used by the current file). If `pages` is a ref, use `pagination.pages.value` for `:size`. Confirm against the existing usage (`pagination.page.value`, `pagination.pages`) — the current file reads `pagination.pages` without `.value`, so keep that form.
-
-- [ ] **Step 2: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/components/DkTable.vue
-git commit -m "chore(components): add selection, row/bulk actions, tooltip, pagination to DkTable"
-```
-
----
-
-## Task 9: Dashboard wiring for rotate/revoke + final verification
-
-**Files:**
-- Modify: `src/pages/DashboardPage.vue`
-
-**Interfaces:**
-- Consumes: `DkTable` emits `rotate`/`revoke` (Task 8), `keys.rotate`/`keys.removeMany` (Task 1), `useNotifications` (Task 2).
-
-- [ ] **Step 1: Handle table events**
-
-In `src/pages/DashboardPage.vue`, bind the new `DkTable` emits and mutate the store (store stays the single writer):
-
-```vue
-<DkTable
-  :items="keys.all.value"
-  @rotate="onRotate"
-  @revoke="onRevoke"
-/>
-```
-
-```ts
-function onRotate (id: string) {
-  keys.rotate(id)
-  notifications.send({ subject: 'API key rotated', severity: 'success' })
-}
-
-function onRevoke (ids: string[]) {
-  keys.removeMany(ids)
-  notifications.send({
-    subject: ids.length > 1 ? `${ids.length} keys revoked` : 'API key revoked',
-    severity: 'info',
-  })
-}
-```
-
-- [ ] **Step 2: Type-check**
-
-Run: `pnpm type-check`
-Expected: no errors.
-
-- [ ] **Step 3: Full manual verification pass**
-
-Run `pnpm dev` and confirm:
-- [ ] Create a key (valid) → toast + new top row + persists on reload.
-- [ ] Submit create form empty → "Required" on Name, dialog stays open.
-- [ ] Hover a masked key → tooltip shows full value.
-- [ ] Row **Rotate** → key value changes, success toast.
-- [ ] Row **Revoke** → AlertDialog → confirm → row gone, info toast, persists on reload.
-- [ ] Select-all header checkbox → all visible rows checked; partial selection shows mixed (−) state.
-- [ ] Select 2+ rows → bulk "Revoke N selected" → AlertDialog → confirm → rows gone.
-- [ ] Pagination (itemsPerPage 5) → page buttons navigate; prev/next disable at ends.
-- [ ] Cmd+K "Rotate All Keys" → all key values change + toast.
-- [ ] Toasts auto-dismiss ~4s and pause while hovered.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/pages/DashboardPage.vue
-git commit -m "chore(dashboard): wire rotate and revoke handlers with toasts"
-```
-
----
-
-## Self-Review Notes (author)
-
-- **Spec coverage:** Dialog (T3), Form/Select/Switch/NumberField (T4), Input (existing, reused T5), Snackbar/useNotifications (T2), AlertDialog/Checkbox/Tooltip/Pagination (T7), useStorage/useKeys (T1), createGroup via Checkbox.Group + SelectAll (T8), createDataTable pagination reused (T8). All Phase A primitives covered.
-- **Single writer:** DkTable emits; DashboardPage mutates `useKeys`. Avoids two components writing the store.
-- **Known verification points flagged inline (not placeholders):** Switch `data-state` selector names, `DkButton` `type` forwarding, Pagination Root slot contract, `pagination.pages` ref-vs-value. Each has an explicit fallback instruction — resolve against the running app / MCP guide, do not guess silently.
-- **Deferred to later phases:** Analytics/Settings tabs, sidebar nav, `/components` gallery (Phases B–E).
diff --git a/docs/superpowers/specs/2026-04-25-devkey-logo-design.md b/docs/superpowers/specs/2026-04-25-devkey-logo-design.md
deleted file mode 100644
index 8c0afae..0000000
--- a/docs/superpowers/specs/2026-04-25-devkey-logo-design.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# DevKey Logo Design
-
-**Date:** 2026-04-25
-**Status:** Approved (concept) — ready for asset implementation
-
-## Purpose
-
-Give the DevKey demo project a primary visual identity: a logo system with a mark, wordmark, and lockups that can be dropped into the app shell, README, social cards, and tutorial screenshots.
-
-DevKey is the demo UI library at `~/sites/devkey/` built to validate the v0 alpha blog post tutorial. The logo needs its own identity (not visually tied to Vuetify or v0) so DevKey reads as an independent product the tutorial happens to use.
-
-## Concept
-
-**Modern flat key**, distinct from Vuetify. The mark is a literal, simplified key — bow on the left, shaft and teeth extending right.
-
-The bow is a **rounded square** with a small center dot — half keycap, half keyhole. The dot doubles as a status indicator at small sizes and gives the mark a focal point. The teeth are two soft, rounded rectangles, suggesting a real flat-key cut without going realistic.
-
-The wordmark is **Geist 800** with -4% letter-spacing — slightly compressed, geometric, current. The wordmark sits to the right of the mark with consistent spacing equal to half the icon width.
-
-## Color
-
-| Token | Hex | Use |
-|-------|-----|-----|
-| `brass-dark` | `#F6B04E` | Logo on dark backgrounds |
-| `brass-light` | `#D18B1F` | Logo on light backgrounds |
-| `ink` | `#0F1115` | Wordmark on light, tile background on dark |
-| `paper` | `#F5F5F5` | Wordmark on dark |
-
-Brass references the physical material of keys — warm, premium, immediately distinct from the cool-blue dev-tool landscape.
-
-## Mark geometry
-
-64×64 viewBox. All measurements are SVG units.
-
-**Bow** (rounded square outline)
-- Position: `x=6 y=18`
-- Size: `28×28`
-- Corner radius: `8`
-- Stroke: `5`, no fill
-
-**Center dot**
-- Position: `cx=20 cy=32`
-- Radius: `3`
-- Filled
-
-**Shaft** (filled rectangle)
-- Position: `x=34 y=29.5`
-- Size: `26×5`
-
-**Teeth** (two filled rounded rectangles)
-- First: `x=46 y=34.5`, size `5×6`, radius `1.5`
-- Second: `x=55 y=34.5`, size `5×6`, radius `1.5`
-
-All geometry uses `currentColor` so the mark adapts to context via CSS.
-
-## Lockups
-
-### Primary lockup
-Mark + wordmark, horizontal. Mark is 56px tall, wordmark is Geist 800 at 40px with -4% tracking. Gap between them is 14px (≈25% of mark height).
-
-### Icon-only mark
-The mark stands alone for favicons, dock icons, social avatars, and any context where the wordmark won't read. Tested at 64px, 40px, and 24px — center dot remains visible at 24px.
-
-### App icon tile
-The mark on a filled background, 12px corner radius:
-- **Ink tile:** `#0F1115` background, brass mark — primary social/avatar
-- **Brass tile:** `#F6B04E` background, ink mark — secondary, attention-grabbing
-
-## Typography
-
-- **Family:** Geist (Vercel)
-- **Weight:** 800
-- **Tracking:** -4% (-0.04em)
-- **Wordmark:** "DevKey" (capital D, capital K)
-
-Geist is loaded via the existing `unplugin-fonts` + `@fontsource/geist` setup (consistent with how Inter is currently wired). Fallback: `system-ui, sans-serif`.
-
-## File deliverables
-
-The implementation phase will produce these files in `public/brand/`:
-
-| File | Purpose |
-|------|---------|
-| `devkey-mark.svg` | Icon-only mark, `currentColor` — for inline embedding (README, etc.) |
-| `favicon.svg` | SVG favicon (mark with `prefers-color-scheme` media query for auto dark/light) |
-| `apple-touch-icon.png` | 180×180 PNG of the ink tile (mark only) |
-| `og-image.png` | 1200×630 OG card with primary lockup centered on ink |
-
-The PNGs are generated by `scripts/generate-brand-assets.mjs`, which uses Playwright (already available in the workspace) to render an HTML page with the real Geist webfont and screenshot it at the target dimensions. Modern browsers support SVG favicons; the `.ico` fallback is omitted.
-
-Lockup and tile SVGs are intentionally **not** shipped as standalone files — the inline `DkLogo` component covers in-app use, the OG image PNG covers external embedding, and shipping vector lockups would require font-to-path tooling that's not justified by current usage.
-
-A `DkLogo.vue` component (in `src/components/`, alongside the other `Dk*` components) renders the mark inline as SVG using `currentColor`, for use inside the app shell where the wordmark is already nearby. The component takes a `size` prop (default 32).
-
-## App integration
-
-- `index.html` `<title>` and favicon links point to the new files
-- `LandingPage.vue` hero uses `DkLogo` next to a "DevKey" wordmark in Geist 800
-- `LoginPage.vue` card header and `DashboardPage.vue` sidebar use `DkLogo` (mark-only, since context already names the product)
-- `README.md` adds the inline mark SVG and a Geist-styled wordmark via markdown image + heading
-- The scaffolded placeholder logos at `src/assets/logo.png` and `src/assets/logo.svg` are deleted in the same change (currently orphaned — no references in source)
-
-## Out of scope
-
-- Animated/motion variants
-- Print/embroidery files
-- Brand guidelines document beyond this spec
-- Sticker/merch assets
-- Wordmark-only variants (every lockup includes the mark)
-
-## Open questions
-
-None — all axes locked during brainstorm.
diff --git a/docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md b/docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md
deleted file mode 100644
index 157af44..0000000
--- a/docs/superpowers/specs/2026-07-09-devkey-phase-a-key-lifecycle-design.md
+++ /dev/null
@@ -1,204 +0,0 @@
-# DevKey Expansion — Phase A: Key Lifecycle
-
-**Date:** 2026-07-09
-**Status:** Approved design, pending implementation plan
-**Scope:** Phase A of the DevKey coverage-expansion roadmap (below).
-
-## Context
-
-DevKey is a Vuetify0 reference project — an "API key dashboard" whose real job is
-to demonstrate idiomatic v0 patterns in a realistic app. Today it exercises ~5 of
-40 v0 components (`Button`, `Toggle`, `Tabs`, `Collapsible`, `Input`) plus
-`createDataTable`, `createFilter`, `useVirtualFocus`, `useHotkey`, and 5 plugins.
-Most product surfaces are stubs: New Key / Rotate / Revoke are `alert()` calls, and
-the Analytics and Settings tabs say "coming soon."
-
-The expansion goal chosen with the user is **breadth-first coverage** organized as a
-**hybrid**: map every primitive that plausibly fits the dashboard into real product
-flows, and reserve a later `/components` gallery route for primitives with no honest
-product home. The overriding constraint: every primitive must be used the **canonical,
-documented way** — DevKey is held up as reference, so no contrived usage and no
-hand-rolled logic where a v0 primitive exists.
-
-### House pattern (the "parameters" to stay within)
-
-- Thin `Dk*` wrapper components over v0 **compound** primitives (Root + sub-components).
-- `<script setup lang="ts">`, `defineOptions({ name })`, `defineModel`, destructured
-  `defineProps` with defaults (never `withDefaults`).
-- Scoped CSS keyed on `--v0-theme-*` variables; state via `data-*` attributes.
-- Reactivity: `shallowRef` primitives, `ref` objects, `toRef` derived.
-- Precedent already in-repo: `DkCommandPalette` uses `Dialog.Root`/`Dialog.Content`
-  idiomatically; `DkInput` wraps `Input` with `rules`; the rules plugin ships
-  `required`/`email` aliases; the permissions plugin ships `admin`/`developer`/`viewer`.
-
-### Full roadmap (for orientation — only Phase A is specced here)
-
-| Phase | Theme | Primitives retired from "unused" |
-|-------|-------|----------------------------------|
-| **A** | Key lifecycle | Dialog, AlertDialog, Form, Select, Switch, NumberField, Checkbox, Snackbar, Pagination, Tooltip + createForm/createValidation/useRules/useNotifications/createQueue/createGroup/createPagination/usePopover/useStorage |
-| B | Navigation & chrome | Treeview, Breadcrumbs, Overflow, Avatar, Popover, Splitter, Step + createNested/createBreadcrumbs/createOverflow/createStep/usePermissions |
-| C | Analytics tab | Progress, Slider, Carousel, Rating, ExpansionPanel + createSlider/createVirtual/createSortable/useDragDrop/useIntersectionObserver/useResizeObserver |
-| D | Settings tab | Radio, Select, Checkbox, Combobox, Image, AspectRatio, Locale + useLocale/useDate/useRtl/useStorage/createCombobox/useImage/createModel |
-| E | `/components` gallery | Atom, Portal, Presence, Group, Selection, Single, Scrim, Theme + leftover system/util composables |
-
-## Goals
-
-- Replace every Phase A stub with a working, persisted, canonical v0 flow.
-- Add reusable `Dk*` wrappers for each new primitive, matching the house pattern.
-- Persist key data so create/revoke/rotate survive reload (demonstrates `useStorage`).
-
-## Non-goals
-
-- Phases B–E (separate spec → plan cycles).
-- Migrating `DkCommandPalette` to the new `DkDialog` wrapper (out of scope; keep focused).
-- A backend. All data is client-side; "secrets" are demo strings.
-- New tests (per repo convention, tests are added only when explicitly requested).
-
-## Data layer — `useKeys()`
-
-Extract the hardcoded `apiKeys` array from `DashboardPage.vue` into a composable
-`src/composables/useKeys.ts`, backed by `useStorage` (the storage plugin is already
-registered). Shape:
-
-```ts
-interface ApiKey {
-  id: string
-  name: string
-  key: string          // e.g. dk_live_… / dk_test_…
-  env: 'live' | 'test'
-  autoRotate: boolean
-  expiresInDays: number
-  created: string       // ISO date
-  lastUsed: string      // ISO date
-}
-```
-
-API surface: `all` (reactive list), `add(input)`, `remove(id)`, `removeMany(ids)`,
-`rotate(id)` (regenerates the `key` string, bumps `lastUsed`). Seeded with the current
-five demo rows on first run. Key generation is a local helper (`dk_${env}_${random}`).
-
-> Note: persisting "secrets" to `localStorage` is unrealistic for a real product but
-> acceptable for a demo; it is the honest way to show `useStorage` driving CRUD.
-
-## New `Dk*` wrappers (verified compound structures)
-
-Each wraps the documented compound API. Structures below are confirmed against the
-current v0 source via Vuetify MCP.
-
-- **`DkDialog.vue`** — `Dialog.Root` (`v-model` open) › `Dialog.Content` › `Dialog.Title`,
-  `Dialog.Description`, body slot, `Dialog.Close`. Optional `Dialog.Activator` via slot.
-  Backdrop via `Scrim`. Slots: `activator`, `title`, default (body), `actions`.
-- **`DkForm.vue`** — wraps `Form` with `v-model` (`boolean | null` validity) and
-  `@submit` emitting `{ valid }`. Renders a `<form>`; children are validation-aware
-  fields that auto-register through the form's context.
-- **`DkSelect.vue`** — `Select.Root` (`v-model`) › `Select.Activator` (`Select.Value`
-  slot exposing `selectedValue` + `Select.Placeholder` + `Select.Cue`) › `Select.Content`
-  › `Select.Item` (`:id` + `:value`, `v-slot="{ isSelected, attrs }"`). Prop: `items`.
-- **`DkSwitch.vue`** — `Switch.Root` (`v-model`) › `Switch.Track` › `Switch.Thumb`,
-  wrapped in a `<label>` with slotted text.
-- **`DkNumberField.vue`** — `NumberField.Root` (`v-model`, `:min`/`:max`/`:step`) ›
-  `NumberField.Decrement`, `NumberField.Control`, `NumberField.Increment`, optional
-  `NumberField.Description`/`NumberField.Error`.
-- **`DkCheckbox.vue`** — `Checkbox.Root` (`v-model`, or `:value` inside a group) ›
-  `Checkbox.Indicator`. A `select-all` variant uses `Checkbox.SelectAll` +
-  `Checkbox.Indicator` with the `isMixed` slot prop for the tri-state header.
-- **`DkAlertDialog.vue`** — `AlertDialog.Root` › `AlertDialog.Content` › `AlertDialog.Title`,
-  `AlertDialog.Description`, `AlertDialog.Cancel`, `AlertDialog.Action` (confirm).
-  `v-model` open + `@confirm` emit. Slots: `title`, default, `confirm-label`.
-- **`DkSnackbar.vue`** — `Snackbar.Portal` › `Snackbar.Queue` (`v-slot="{ items }"`,
-  bound to `useNotifications` by namespace) › `Snackbar.Root :id` › `Snackbar.Content`
-  (`{{ item.subject }}`) + `Snackbar.Close`. Severity → styling via `data-severity`.
-  Mounted **once** in `DkLayout`.
-- **`DkPagination.vue`** — `Pagination.Root` (`v-model` page, `:size`) › `Pagination.First`,
-  `Pagination.Prev`, `Pagination.Item`/`Pagination.Ellipsis` (from the items slot),
-  `Pagination.Next`, `Pagination.Last`, `Pagination.Status` (sr-only).
-- **`DkTooltip.vue`** — `Tooltip.Root` › `Tooltip.Activator` (default slot) ›
-  `Tooltip.Content` (`text` prop / slot).
-
-## Feature wiring
-
-### New Key (Dialog + Form)
-`DkDialog` triggered by the existing "New Key" button, containing a `DkForm`:
-- `DkInput` — name, `rules: ['required']` (existing alias).
-- `DkSelect` — environment: `live` / `test`.
-- `DkSwitch` — auto-rotate.
-- `DkNumberField` — expiry days (`min 1`, `max 365`, default 90).
-
-On `@submit` with `valid === true`: `keys.add(form)`, close dialog,
-`notifications.send({ subject: 'API key created', severity: 'success' })`. Invalid
-submit keeps the dialog open and surfaces per-field errors (already handled by `DkInput`).
-
-### Revoke (AlertDialog)
-Each table row gets a Revoke action opening `DkAlertDialog`. `@confirm` →
-`keys.remove(id)` → `notifications.send({ subject: 'API key revoked', severity: 'info' })`.
-
-### Rotate
-Row action → `keys.rotate(id)` → success toast. No confirmation (non-destructive).
-
-### Table interactions (`DkTable` changes)
-`DkTable` already runs `createDataTable` with `pagination: { itemsPerPage: 10 }` and a
-hand-rolled Prev/Next footer. Changes:
-- **Selection column** — `Checkbox.Group` (`v-model` selected ids) with a
-  `Checkbox.SelectAll` header (tri-state) and a `DkCheckbox` per row. Reuses v0's
-  `createGroup` tri-state; do not hand-roll select-all math.
-- **Bulk actions bar** — appears when ≥1 selected: bulk Revoke → `DkAlertDialog` →
-  `keys.removeMany(ids)` → toast.
-- **Row actions** — Rotate + Revoke per row.
-- **Tooltip** — masked key cell wrapped in `DkTooltip` revealing the full value.
-- **Pagination** — replace the hand-rolled footer with `DkPagination` bound to
-  `table.pagination` (`page` model + page count as `size`).
-
-### Notifications infra
-Add `createNotificationsPlugin({ timeout: 4000 })` in `src/plugins/devkey.ts`. Consumers
-call `useNotifications().send(...)`. `DkSnackbar` renders the queue once in `DkLayout`.
-
-## Files
-
-**New**
-- `src/composables/useKeys.ts`
-- `src/components/DkDialog.vue`
-- `src/components/DkForm.vue`
-- `src/components/DkSelect.vue`
-- `src/components/DkSwitch.vue`
-- `src/components/DkNumberField.vue`
-- `src/components/DkCheckbox.vue`
-- `src/components/DkAlertDialog.vue`
-- `src/components/DkSnackbar.vue`
-- `src/components/DkPagination.vue`
-- `src/components/DkTooltip.vue`
-- `src/components/DkCreateKeyDialog.vue` (composes DkDialog + DkForm + fields)
-
-**Modified**
-- `src/plugins/devkey.ts` — register `createNotificationsPlugin`.
-- `src/components/DkLayout.vue` — mount `DkSnackbar`.
-- `src/components/DkTable.vue` — selection column, bulk bar, row actions, `DkTooltip`,
-  `DkPagination`.
-- `src/pages/DashboardPage.vue` — use `useKeys()`, wire `DkCreateKeyDialog`, replace
-  `alert()` command-palette actions with real calls + toasts.
-
-## Coverage delta
-
-Components: `Dialog` is already used inline in the command palette; Phase A adds a
-reusable `DkDialog` wrapper plus 9 net-new components (`AlertDialog`, `Form`, `Select`,
-`Switch`, `NumberField`, `Checkbox`, `Snackbar`, `Pagination`, `Tooltip`) — taking the
-demonstrated set from ≈6 to 15 of 40.
-Composables/plugins: +createForm, +createValidation (via fields), +useNotifications,
-+createQueue, +createGroup, +useStorage, +usePopover (Select/Tooltip anchoring).
-
-## Sequencing (for the implementation plan)
-
-Two waves to keep increments small and verifiable:
-1. **Infra + New Key** — `useKeys`, notifications plugin, `DkSnackbar` in layout,
-   `DkDialog`/`DkForm`/`DkSelect`/`DkSwitch`/`DkNumberField`, `DkCreateKeyDialog`,
-   dashboard wiring for create + toasts.
-2. **Table interactions** — `DkCheckbox`, `DkAlertDialog`, `DkTooltip`, `DkPagination`,
-   `DkTable` refactor, revoke/rotate/bulk flows.
-
-## Verification
-
-- `pnpm type-check` clean after each wave.
-- Manual: create a key (valid + invalid submit), rotate, revoke (single + bulk),
-  reload to confirm persistence, hover key for tooltip, paginate, confirm toasts appear
-  and auto-dismiss (and pause on hover per Snackbar.Queue WCAG behavior).
-- DevKey ships directly to master (no PR) per ecosystem convention; each wave is a
-  separate commit.

From f31f93f6755a465f44672cd57fd16362bb43b51e Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Wed, 22 Jul 2026 14:37:51 -0500
Subject: [PATCH 16/16] chore(deps): update dependencies and bump @vuetify/v0
 to 1.0.0 (#11)

- @vuetify/v0 1.0.0-rc.6 -> 1.0.0 (stable)
- vue 3.5.40, vue-router 5.2.0, vite 8.1.5, unocss 66.7.5
- @vitejs/plugin-vue 6.0.8, vue-tsc 3.3.8, playwright 1.61.1
- @fontsource/geist & inter 5.3.0
- typescript ~5.9.3 -> ~6.0.3 (TS 7 held: vue-tsc 3.3.8 can't run the native compiler)
- unplugin-fonts 2.0.0; drop the vite override (v2 supports Vite 8 natively)
- hold npm-run-all2 at 8 (v9 requires node ^24.15 || >=26; .nvmrc pins 24.12.0)
- hold @types/node at ^24 to match the declared node target
---
 package.json   |   29 +-
 pnpm-lock.yaml | 1301 +++++++++++++++++++++++++++++-------------------
 2 files changed, 789 insertions(+), 541 deletions(-)

diff --git a/package.json b/package.json
index 6fd8609..c984c04 100644
--- a/package.json
+++ b/package.json
@@ -13,29 +13,24 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@fontsource/geist": "^5.2.8",
-    "@fontsource/inter": "^5.2.8",
+    "@fontsource/geist": "^5.3.0",
+    "@fontsource/inter": "^5.3.0",
     "@mdi/js": "^7.4.47",
-    "@vuetify/v0": "1.0.0-rc.6",
-    "vue": "^3.5.30",
-    "vue-router": "^5.0.4"
+    "@vuetify/v0": "1.0.0",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.5",
     "@types/node": "^24.12.0",
-    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/tsconfig": "^0.9.0",
     "npm-run-all2": "^8.0.4",
-    "playwright": "^1.59.1",
-    "typescript": "~5.9.3",
-    "unocss": "^66.6.6",
-    "unplugin-fonts": "^1.4.0",
-    "vite": "^8.0.0",
-    "vue-tsc": "^3.2.5"
-  },
-  "overrides": {
-    "unplugin-fonts": {
-      "vite": "^8.0.0"
-    }
+    "playwright": "^1.61.1",
+    "typescript": "~6.0.3",
+    "unocss": "^66.7.5",
+    "unplugin-fonts": "^2.0.0",
+    "vite": "^8.1.5",
+    "vue-tsc": "^3.3.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b6bc8c8..ac79f5e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,23 +9,23 @@ importers:
   .:
     dependencies:
       '@fontsource/geist':
-        specifier: ^5.2.8
-        version: 5.2.8
+        specifier: ^5.3.0
+        version: 5.3.0
       '@fontsource/inter':
-        specifier: ^5.2.8
-        version: 5.2.8
+        specifier: ^5.3.0
+        version: 5.3.0
       '@mdi/js':
         specifier: ^7.4.47
         version: 7.4.47
       '@vuetify/v0':
-        specifier: 1.0.0-rc.6
-        version: 1.0.0-rc.6(@js-temporal/polyfill@0.5.1)(vue@3.5.32(typescript@5.9.3))
+        specifier: 1.0.0
+        version: 1.0.0(@js-temporal/polyfill@0.5.1)(vue@3.5.40(typescript@6.0.3))
       vue:
-        specifier: ^3.5.30
-        version: 3.5.32(typescript@5.9.3)
+        specifier: ^3.5.40
+        version: 3.5.40(typescript@6.0.3)
       vue-router:
-        specifier: ^5.0.4
-        version: 5.0.4(@vue/compiler-sfc@3.5.32)(vue@3.5.32(typescript@5.9.3))
+        specifier: ^5.2.0
+        version: 5.2.0(@vue/compiler-sfc@3.5.40)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))
     devDependencies:
       '@tsconfig/node22':
         specifier: ^22.0.5
@@ -34,79 +34,126 @@ importers:
         specifier: ^24.12.0
         version: 24.12.2
       '@vitejs/plugin-vue':
-        specifier: ^6.0.5
-        version: 6.0.5(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))(vue@3.5.32(typescript@5.9.3))
+        specifier: ^6.0.8
+        version: 6.0.8(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))
       '@vue/tsconfig':
         specifier: ^0.9.0
-        version: 0.9.1(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3))
+        version: 0.9.1(typescript@6.0.3)(vue@3.5.40(typescript@6.0.3))
       npm-run-all2:
         specifier: ^8.0.4
         version: 8.0.4
       playwright:
-        specifier: ^1.59.1
-        version: 1.59.1
+        specifier: ^1.61.1
+        version: 1.61.1
       typescript:
-        specifier: ~5.9.3
-        version: 5.9.3
+        specifier: ~6.0.3
+        version: 6.0.3
       unocss:
-        specifier: ^66.6.6
-        version: 66.6.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))
+        specifier: ^66.7.5
+        version: 66.7.5(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))
       unplugin-fonts:
-        specifier: ^1.4.0
-        version: 1.4.0(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))
+        specifier: ^2.0.0
+        version: 2.0.0(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))
       vite:
-        specifier: ^8.0.0
-        version: 8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
+        specifier: ^8.1.5
+        version: 8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)
       vue-tsc:
-        specifier: ^3.2.5
-        version: 3.2.6(typescript@5.9.3)
+        specifier: ^3.3.8
+        version: 3.3.8(typescript@6.0.3)
 
 packages:
 
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
-    engines: {node: '>=6.9.0'}
+  '@babel/generator@8.0.0':
+    resolution: {integrity: sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==}
+    engines: {node: ^22.18.0 || >=24.11.0}
 
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@8.0.0':
+    resolution: {integrity: sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@8.0.4':
+    resolution: {integrity: sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
   '@babel/parser@7.29.2':
     resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/parser@8.0.4':
+    resolution: {integrity: sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+    hasBin: true
+
   '@babel/types@7.29.0':
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
-  '@emnapi/core@1.9.1':
-    resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@8.0.4':
+    resolution: {integrity: sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==}
+    engines: {node: ^22.18.0 || >=24.11.0}
+
+  '@capsizecss/unpack@4.0.1':
+    resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==}
+    engines: {node: '>=18'}
+
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@emnapi/runtime@1.9.1':
-    resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==}
+  '@emnapi/core@1.11.1':
+    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
 
-  '@emnapi/wasi-threads@1.2.0':
-    resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
-  '@fontsource/geist@5.2.8':
-    resolution: {integrity: sha512-pI54klK6vz8fVpAVyV+iODGLEzw73cs1XJqV9PIXgW8MYMmBcwK6lKKaWqJrNHwEx8ppz9cuhussb6arXQ/PVQ==}
+  '@emnapi/runtime@1.11.1':
+    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
 
-  '@fontsource/inter@5.2.8':
-    resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
+
+  '@fontsource/geist@5.3.0':
+    resolution: {integrity: sha512-u03ftlfVwb05uijq2jGDJ03/HKGqMKaNFk7KOhkpBUex8+BhrAOfMs/XciJ2UUNUX9fEsZbZQld/RWMA2oFU7g==}
+
+  '@fontsource/inter@5.3.0':
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@3.1.0':
-    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
+  '@iconify/utils@3.1.4':
+    resolution: {integrity: sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw==}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -131,8 +178,8 @@ packages:
   '@mdi/js@7.4.47':
     resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
 
-  '@napi-rs/wasm-runtime@1.1.2':
-    resolution: {integrity: sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==}
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
     peerDependencies:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
@@ -149,130 +196,130 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@oxc-parser/binding-android-arm-eabi@0.115.0':
-    resolution: {integrity: sha512-VoB2rhgoqgYf64d6Qs5emONQW8ASiTc0xp+aUE4JUhxjX+0pE3gblTYDO0upcN5vt9UlBNmUhAwfSifkfre7nw==}
+  '@oxc-parser/binding-android-arm-eabi@0.131.0':
+    resolution: {integrity: sha512-t2xicr9pfzkSRYx5aPqZqlLaayIwJTqgQ81Jor31Xep2nGyL2Aq3d0K5wOfeR7VevaSdxaS9dzSQP9xDwn8fDg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxc-parser/binding-android-arm64@0.115.0':
-    resolution: {integrity: sha512-lWRX75u+gqfB4TF3pWCHuvhaeneAmRl2b2qNBcl4S6yJ0HtnT4VXOMEZrq747i4Zby1ZTxj6mtOe678Bg8gRLw==}
+  '@oxc-parser/binding-android-arm64@0.131.0':
+    resolution: {integrity: sha512-nlGIod6gw75x1aEDgLS+srj+JRGY0HHm9MI9YgzE/B64l6d6+H3MSP9NOgp0+HTg8tp4vV9rVfgQGgd+TfVZcA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.115.0':
-    resolution: {integrity: sha512-ii/oOZjfGY1aszXTy29Z5DRyCEnBOrAXDVCvfdfXFQsOZlbbOa7NMHD7D+06YFe5qdxfmbWAYv4yn6QJi/0d2g==}
+  '@oxc-parser/binding-darwin-arm64@0.131.0':
+    resolution: {integrity: sha512-jukuV6xe5RbQKFo7QD34NDCLDZp4PSOm8rmckhNdH/60ymG5zXbDzGBEyc+nTkuLQNama2aSGCt+CPfpjNTqyw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.115.0':
-    resolution: {integrity: sha512-R/sW/p8l77wglbjpMcF+h/3rWbp9zk1mRP3U14mxTYIC2k3m+aLBpXXgk2zksqf9qKk5mcc4GIYsuCn9l8TgDg==}
+  '@oxc-parser/binding-darwin-x64@0.131.0':
+    resolution: {integrity: sha512-g3JOo4khe9rslHm5WYaVDWb0HS/M1MLR3I9S8560MkKIcC96VQY00QjOlsuRyfSj/JDXj8i9T7ryPO2RidiXVg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.115.0':
-    resolution: {integrity: sha512-CSJ5ldNm9wIGGkhaIJeGmxRMZbgxThRN+X1ufYQQUNi5jZDV/U3C2QDMywpP93fczNBj961hXtcUPO/oVGq4Pw==}
+  '@oxc-parser/binding-freebsd-x64@0.131.0':
+    resolution: {integrity: sha512-1hziITDTxjMePnX+dR9ocVT+EuZkQ8wm4FPAbmbEiKG+Phbo73J1ZnPAA6Y/aGsWF3McOFnQuZIktAFwalkfJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.115.0':
-    resolution: {integrity: sha512-uWFwssE5dHfQ8lH+ktrsD9JA49+Qa0gtxZHUs62z1e91NgGz6O7jefHGI6aygNyKNS45pnnBSDSP/zV977MsOQ==}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
+    resolution: {integrity: sha512-9uRxfXwyKG9+MwmGQBo2ncPNwZH5HTmCETFM2WiuDBNDCW4NC5ttSQkwCAMrTAWgwMzVBH1CP8pM0v7nebCWXQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.115.0':
-    resolution: {integrity: sha512-fZbqt8y/sKQ+v6bBCuv/mYYFoC0+fZI3mGDDEemmDOhT78+aUs2+4ZMdbd2btlXmnLaScl37r8IRbhnok5Ka9w==}
+  '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
+    resolution: {integrity: sha512-mgbLvzRShXOLBdWGInf08Af4q+pfj1xD8hSgLClDZ9of/BXkB6+LIhTH7fihiDUipqB3yoSkKBWaZ3Ejlf5Yag==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.115.0':
-    resolution: {integrity: sha512-1ej/MjuTY9tJEunU/hUPIFmgH5PqgMQoRjNOvOkibtJ3Zqlw/+Lc+HGHDNET8sjbgIkWzdhX+p4J96A5CPdbag==}
+  '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
+    resolution: {integrity: sha512-OPT8++4aN6j2GJ8+3IZHS/byXoZP4aSBn+FoG6rgBJ2fKwPKXWF3MqrFMNW7NKHM28FLY579xYLxJSfgobEqPA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.115.0':
-    resolution: {integrity: sha512-HjsZbJPH9mMd4swJRywVMsDZsJX0hyKb1iNHo5ijRl5yhtbO3lj7ImSrrL1oZ1VEg0te4iKmDGGz/6YPLd1G8w==}
+  '@oxc-parser/binding-linux-arm64-musl@0.131.0':
+    resolution: {integrity: sha512-vtPiwmfVTAXzaxDKsOXG+LwgRAA7WEnaeHzhS5z0GE89gAK18KSXnly7Z6saXXq6L3dVMyK44uoTI03zKxrpmw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.115.0':
-    resolution: {integrity: sha512-zhhePoBrd7kQx3oClX/W6NldsuCbuMqaN9rRsY+6/WoorAb4j490PG/FjqgAXscWp2uSW2WV9L+ksn0wHrvsrg==}
+  '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
+    resolution: {integrity: sha512-8AW8L7w5cGHSdZPcyZX2yR0+GUODsT15rbRjfdD54rv6DMbtuEB19ysLOpKJlRGfH6UNYNpCHaU1uJWgTWf1/w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.115.0':
-    resolution: {integrity: sha512-t/IRojvUE9XrKu+/H1b8YINug+7Q6FLls5rsm2lxB5mnS8GN/eYAYrPgHkcg9/1SueRDSzGpDYu3lGWTObk1zw==}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
+    resolution: {integrity: sha512-vvpjkjEOUsPcsYf8evE4MO3aGx9+3wodXEBOicGNnOwTuAik8eBONNkgSdhkGsAblQmfVHJyanRnpxglddTXIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.115.0':
-    resolution: {integrity: sha512-79jBHSSh/YpQRAmvYoaCfpyToRbJ/HBrdB7hxK2ku2JMehjopTVo+xMJss/RV7/ZYqeezgjvKDQzapJbgcjVZA==}
+  '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
+    resolution: {integrity: sha512-AqmcNC3fClXX+fxQ6VGEN1667xVFiRBkY0CZmDMSiaeFUsv1+UkBPYYi48IUKcA9/ivvoKNRzQl2I4//kT9F/w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.115.0':
-    resolution: {integrity: sha512-nA1TpxkhNTIOMMyiSSsa7XIVJVoOU/SsVrHIz3gHvWweB5PHCQfO7w+Lb2EP0lBWokv7HtA/KbF7aLDoXzmuMw==}
+  '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
+    resolution: {integrity: sha512-7d3jOMKy7RSQCcDLIci+ySll2FgsOMl/GiRux4q2JNv0zg4EdhFISa9idvrdN/HEUIQQJNg6dmveUeJl2YErGA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.115.0':
-    resolution: {integrity: sha512-9iVX789DoC3SaOOG+X6NcF/tVChgLp2vcHffzOC2/Z1JTPlz6bMG2ogvcW6/9s0BG2qvhNQImd+gbWYeQbOwVw==}
+  '@oxc-parser/binding-linux-x64-gnu@0.131.0':
+    resolution: {integrity: sha512-JHK/h95qVqVQ+ITER837kcTdwBDFpFaNnOTYGCP0zdUSX/mLKC7tXOoyrTb6vG7iRPwGlcgBil3v2IjYw1FqJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-x64-musl@0.115.0':
-    resolution: {integrity: sha512-RmQmk+mjCB0nMNfEYhaCxwofLo1Z95ebHw1AGvRiWGCd4zhCNOyskgCbMogIcQzSB3SuEKWgkssyaiQYVAA4hQ==}
+  '@oxc-parser/binding-linux-x64-musl@0.131.0':
+    resolution: {integrity: sha512-b2BO82O8azXAyf7EUgOPKu145nWypbNyk07HbU09fkzhm9lEA5oPvaN/M8Nlo7tOErVTa2WOgS4QbOnxAPXdDQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@oxc-parser/binding-openharmony-arm64@0.115.0':
-    resolution: {integrity: sha512-viigraWWQhhDvX5aGq+wrQq58k00Xq3MHz/0R4AFMxGlZ8ogNonpEfNc73Q5Ly87Z6sU9BvxEdG0dnYTfVnmew==}
+  '@oxc-parser/binding-openharmony-arm64@0.131.0':
+    resolution: {integrity: sha512-GHO9glZaX7LkX/OGfluEPf1yjg+ehiFbUdowbX6uNWOQhmwKWU4m4+nZ9FJkrHNKuxyI1KKertMdGjVKCApKWA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-parser/binding-wasm32-wasi@0.115.0':
-    resolution: {integrity: sha512-IzGCrMwXhpb4kTXy/8lnqqqwjI7eOvy+r9AhVw+hsr8t1ecBBEHprcNy0aKatFHN6hsX7UMHHQmBAQjVvL/p1A==}
-    engines: {node: '>=14.0.0'}
+  '@oxc-parser/binding-wasm32-wasi@0.131.0':
+    resolution: {integrity: sha512-3SkikPaEFoih1N83qLVEDLRLeY4nYsf6JT9SnWiMCQ5lGQdKup6bEuKCqkRiG9dD1IIaFeYz9RjlciPmYoFIWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.115.0':
-    resolution: {integrity: sha512-/ym+Absk/TLFvbhh3se9XYuI1D7BrUVHw4RaG/2dmWKgBenrZHaJsgnRb7NJtaOyjEOLIPtULx1wDdVL0SX2eg==}
+  '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
+    resolution: {integrity: sha512-Os5bEhryeA2jkH+ZrnZyAC1EP5gs+X4YB1Fjqml7UPD5kU7ecsK1MPEVMfCrdt/GDNpDbavYXiOXOdyJ5b3OPw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.115.0':
-    resolution: {integrity: sha512-AQSZjIR+b+Te7uaO/hGTMjT8/oxlYrvKrOTi4KTHF/O6osjHEatUQ3y6ZW2+8+lJxy20zIcGz6iQFmFq/qDKkg==}
+  '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
+    resolution: {integrity: sha512-m+jNz9EuF0NXoiptc6B9h5yompZQVW/a5MJeOu5zojfH5yWk82tvF2ccrHkfhgtrS9h9DD5l1Qv8dWlfY7Nz8g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxc-parser/binding-win32-x64-msvc@0.115.0':
-    resolution: {integrity: sha512-oxUl82N+fIO9jIaXPph8SPPHQXrA08BHokBBJW8ct9F/x6o6bZE6eUAhUtWajbtvFhL8UYcCWRMba+kww6MBlA==}
+  '@oxc-parser/binding-win32-x64-msvc@0.131.0':
+    resolution: {integrity: sha512-o14Hk8dAyiEUMFEWEgmAwFZvBt1RzAYLM3xeQ+5315JXgVYhoemivgYcbYVRbsFkS71ShMGlAFE0kPnr460rww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@oxc-project/types@0.115.0':
-    resolution: {integrity: sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw==}
+  '@oxc-project/types@0.131.0':
+    resolution: {integrity: sha512-PgnWDfV0h+b16XNKbXU7Daib/BFSt/J2mEzfYIBu6JB/wNdlU+kVYXCkGA1A9fWkTbOgbjh4e6NhPeQOYvFhEA==}
 
-  '@oxc-project/types@0.123.0':
-    resolution: {integrity: sha512-YtECP/y8Mj1lSHiUWGSRzy/C6teUKlS87dEfuVKT09LgQbUsBW1rNg+MiJ4buGu3yuADV60gbIvo9/HplA56Ew==}
+  '@oxc-project/types@0.139.0':
+    resolution: {integrity: sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==}
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -280,184 +327,181 @@ packages:
   '@quansync/fs@1.0.0':
     resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.13':
-    resolution: {integrity: sha512-5ZiiecKH2DXAVJTNN13gNMUcCDg4Jy8ZjbXEsPnqa248wgOVeYRX0iqXXD5Jz4bI9BFHgKsI2qmyJynstbmr+g==}
+  '@rolldown/binding-android-arm64@1.1.5':
+    resolution: {integrity: sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.13':
-    resolution: {integrity: sha512-tz/v/8G77seu8zAB3A5sK3UFoOl06zcshEzhUO62sAEtrEuW/H1CcyoupOrD+NbQJytYgA4CppXPzlrmp4JZKA==}
+  '@rolldown/binding-darwin-arm64@1.1.5':
+    resolution: {integrity: sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.13':
-    resolution: {integrity: sha512-8DakphqOz8JrMYWTJmWA+vDJxut6LijZ8Xcdc4flOlAhU7PNVwo2MaWBF9iXjJAPo5rC/IxEFZDhJ3GC7NHvug==}
+  '@rolldown/binding-darwin-x64@1.1.5':
+    resolution: {integrity: sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.13':
-    resolution: {integrity: sha512-4wBQFfjDuXYN/SVI8inBF3Aa+isq40rc6VMFbk5jcpolUBTe5cYnMsHZ51nFWsx3PVyyNN3vgoESki0Hmr/4BA==}
+  '@rolldown/binding-freebsd-x64@1.1.5':
+    resolution: {integrity: sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.13':
-    resolution: {integrity: sha512-JW/e4yPIXLms+jmnbwwy5LA/LxVwZUWLN8xug+V200wzaVi5TEGIWQlh8o91gWYFxW609euI98OCCemmWGuPrw==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
+    resolution: {integrity: sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-ZfKWpXiUymDnavepCaM6KG/uGydJ4l2nBmMxg60Ci4CbeefpqjPWpfaZM7PThOhk2dssqBAcwLc6rAyr0uTdXg==}
+  '@rolldown/binding-linux-arm64-gnu@1.1.5':
+    resolution: {integrity: sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.13':
-    resolution: {integrity: sha512-bmRg3O6Z0gq9yodKKWCIpnlH051sEfdVwt+6m5UDffAQMUUqU0xjnQqqAUm+Gu7ofAAly9DqiQDtKu2nPDEABA==}
+  '@rolldown/binding-linux-arm64-musl@1.1.5':
+    resolution: {integrity: sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-8Wtnbw4k7pMYN9B/mOEAsQ8HOiq7AZ31Ig4M9BKn2So4xRaFEhtCSa4ZJaOutOWq50zpgR4N5+L/opnlaCx8wQ==}
+  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
+    resolution: {integrity: sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-D/0Nlo8mQuxSMohNJUF2lDXWRsFDsHldfRRgD9bRgktj+EndGPj4DOV37LqDKPYS+osdyhZEH7fTakTAEcW7qg==}
+  '@rolldown/binding-linux-s390x-gnu@1.1.5':
+    resolution: {integrity: sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-eRrPvat2YaVQcwwKi/JzOP6MKf1WRnOCr+VaI3cTWz3ZoLcP/654z90lVCJ4dAuMEpPdke0n+qyAqXDZdIC4rA==}
+  '@rolldown/binding-linux-x64-gnu@1.1.5':
+    resolution: {integrity: sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.13':
-    resolution: {integrity: sha512-PsdONiFRp8hR8KgVjTWjZ9s7uA3uueWL0t74/cKHfM4dR5zXYv4AjB8BvA+QDToqxAFg4ZkcVEqeu5F7inoz5w==}
+  '@rolldown/binding-linux-x64-musl@1.1.5':
+    resolution: {integrity: sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.13':
-    resolution: {integrity: sha512-hCNXgC5dI3TVOLrPT++PKFNZ+1EtS0mLQwfXXXSUD/+rGlB65gZDwN/IDuxLpQP4x8RYYHqGomlUXzpO8aVI2w==}
+  '@rolldown/binding-openharmony-arm64@1.1.5':
+    resolution: {integrity: sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.13':
-    resolution: {integrity: sha512-viLS5C5et8NFtLWw9Sw3M/w4vvnVkbWkO7wSNh3C+7G1+uCkGpr6PcjNDSFcNtmXY/4trjPBqUfcOL+P3sWy/g==}
-    engines: {node: '>=14.0.0'}
+  '@rolldown/binding-wasm32-wasi@1.1.5':
+    resolution: {integrity: sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.13':
-    resolution: {integrity: sha512-Fqa3Tlt1xL4wzmAYxGNFV36Hb+VfPc9PYU+E25DAnswXv3ODDu/yyWjQDbXMo5AGWkQVjLgQExuVu8I/UaZhPQ==}
+  '@rolldown/binding-win32-arm64-msvc@1.1.5':
+    resolution: {integrity: sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.13':
-    resolution: {integrity: sha512-/pLI5kPkGEi44TDlnbio3St/5gUFeN51YWNAk/Gnv6mEQBOahRBh52qVFVBpmrnU01n2yysvBML9Ynu7K4kGAQ==}
+  '@rolldown/binding-win32-x64-msvc@1.1.5':
+    resolution: {integrity: sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-rc.13':
-    resolution: {integrity: sha512-3ngTAv6F/Py35BsYbeeLeecvhMKdsKm4AoOETVhAA+Qc8nrA2I0kF7oa93mE9qnIurngOSpMnQ0x2nQY2FPviA==}
-
-  '@rolldown/pluginutils@1.0.0-rc.2':
-    resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==}
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
   '@tsconfig/node22@22.0.5':
     resolution: {integrity: sha512-hLf2ld+sYN/BtOJjHUWOk568dvjFQkHnLNa6zce25GIH+vxKfvTgm3qpaH6ToF5tu/NN0IH66s+Bb5wElHrLcw==}
 
-  '@tybys/wasm-util@0.10.1':
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/jsesc@2.5.1':
+    resolution: {integrity: sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==}
+
   '@types/node@24.12.2':
     resolution: {integrity: sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==}
 
-  '@unocss/cli@66.6.7':
-    resolution: {integrity: sha512-m/yW5HMVyxfAOeyO4OyA4JB9dY+/gTsk25ucI8xVCFVDEENPEGr+vEqTDOA+vfe6pdURtyDYS7OrhikIRU1WNA==}
-    engines: {node: '>=14'}
+  '@unocss/cli@66.7.5':
+    resolution: {integrity: sha512-fgWkECRn2LGVo9sEpmjk/KJ3NSKUDitaZCNrJcEYM93DG+ELriTHcL+VWBlF4rcZf9fdGlq1nKbbRHUZirFCHQ==}
     hasBin: true
 
-  '@unocss/config@66.6.7':
-    resolution: {integrity: sha512-1uleyRLyJc6PNNc2L3hEaKL89zXwvQAtP36oFySgL47RAxZHPZ4vfqFpbwR0eEN4iSqTS24ZFr7CTRWCaEGjzQ==}
-    engines: {node: '>=14'}
+  '@unocss/config@66.7.5':
+    resolution: {integrity: sha512-dkPl9glhEahJ+Xoja5ZseKKnH+vZaeaKQzg8b0otcKcPPNrHQgu1nu3QgfeOjnXOGrjZIotHwUeVtt4ZA2Skgg==}
 
-  '@unocss/core@66.6.7':
-    resolution: {integrity: sha512-Q8456iWFtdwrUNYKVOQY8ygRggjZOVtLc6Jc8KIkxig7OiNlUWOgXJTfCh4I8g6jBYzC5eHaHFDLgJOmOrxBsg==}
+  '@unocss/core@66.7.5':
+    resolution: {integrity: sha512-UdJb8MiMywcau8QrWEVgUAz0kvoFHyR+sACwYCgmBh/BpKJGyR/zw/Ys3wvysbm0f+i/20VGBex/QQxYVlzdyQ==}
 
-  '@unocss/extractor-arbitrary-variants@66.6.7':
-    resolution: {integrity: sha512-PQiBHK0yUJ0BR+3GYnTPU6va6HVSRPV+O+s1zZmt23TWbyIeucoKCNR47TDtv+Z1xuksY8krIjtDYtufdrVWKw==}
+  '@unocss/extractor-arbitrary-variants@66.7.5':
+    resolution: {integrity: sha512-5zOkbnLIJc8E749qNjLXfPHl3FdHloop12h706/ojr6idK4ix0KLm43R//uLnphixCehdHJRuHnavnM4C/kQbA==}
 
-  '@unocss/inspector@66.6.7':
-    resolution: {integrity: sha512-4lA70A/wy9dfSDm7rJ5Uq5fKz+/Szm2rUcHjdbLCVNEc6vv2YXeI7aFvP5qDjTp4ClBSF2AMPnF1mtoMQOfDvA==}
+  '@unocss/inspector@66.7.5':
+    resolution: {integrity: sha512-WmTJMnj8bmRxvw/wGeShmL2eEHr2/L0BdGTXSxhfzwcO8y5XZEbBmVciLcM7pqaTXQ6JY4+KnITrDUf1urjZxQ==}
 
-  '@unocss/preset-attributify@66.6.7':
-    resolution: {integrity: sha512-thtoLQb53+Acy2QJYT6n+YhgNJ5ilhS8k9bqi+UzflbsuK4TJqOuQQjC9fRkULP5QjtNxgqN3d5Up7ms8tBPDA==}
+  '@unocss/preset-attributify@66.7.5':
+    resolution: {integrity: sha512-1Oi1Cp81pqYJwG3h4+OlP5A0FKyaa07MFBXaXc4Yr3faiTbsI8SKj2TqnZCb+NQvBsEqslEd+jKXGZ3lKzCVOQ==}
 
-  '@unocss/preset-icons@66.6.7':
-    resolution: {integrity: sha512-mGAOyI/qz1pZUV1BcOtWAMm5czdFCjhFCYcDk0KY+Jw37pKRVSQRFeh4gpHuYKmehGv36caLyVrWXpTAwRBdFQ==}
+  '@unocss/preset-icons@66.7.5':
+    resolution: {integrity: sha512-ZsxadWnGGtHdANTikuMnjkQaT1qwUFJHZBF4fzVsPMnUiiKGs8rzXukwM9w3Gi9ontM7nbG2FYi9clWETSlpFg==}
 
-  '@unocss/preset-mini@66.6.7':
-    resolution: {integrity: sha512-tf0mqiSEhPQ49WZOqjNhxlbZbNakiBLzCoxfLSzqfIGglOPYShP8mxsdp9Jv0n+Ntn0rHcBiX5KTLfax1/Bd9g==}
+  '@unocss/preset-mini@66.7.5':
+    resolution: {integrity: sha512-o37TSl4ecT0dKu+3/TYuTYht75h82SEwDNl476m9ve0KW4Pv1O2tT/9TWd7N5cutEpySr8/YtjMwtWBD+drxBg==}
 
-  '@unocss/preset-tagify@66.6.7':
-    resolution: {integrity: sha512-0WeQf+Dx9Ztv3aewkBKEnAfOauSjvWBlfkpsgLpXcCkyGMnCqq87UrAq3+b76TDJvQc8i2ADlvVGK7V1z0JZQg==}
+  '@unocss/preset-tagify@66.7.5':
+    resolution: {integrity: sha512-/8YB1tXVi+WmNKPhsCdtO1xnQKEkshSnWDp6AbvVP3f6qOF7adlMYpAt3kpWCoVUBsfOQ06ZQlnfricMjObyoQ==}
 
-  '@unocss/preset-typography@66.6.7':
-    resolution: {integrity: sha512-RA7MwPDD5N9xGrbWnguVm5tP+F4/n/9X1rJsq2nBjvvK2dbtIRJZjRFM1vBDsR0GIhtvbHMoTchZaSZed5I+Hw==}
+  '@unocss/preset-typography@66.7.5':
+    resolution: {integrity: sha512-2dxC8LT9KYa29UZT4muDFl7DbIXvKktTfeSMbUGMdZKbHcuMtKSP2U52wti1PL5I9duqp4v+8G33EeVutGTUaQ==}
 
-  '@unocss/preset-uno@66.6.7':
-    resolution: {integrity: sha512-imGCe6Yv2XgrJxP77gV8WZCz0xL99MsGov5rYn64lh2/tcsHF2rUIhTj/Urgxt0kwk8rLFtGbR1JuwPMNL5EDw==}
+  '@unocss/preset-uno@66.7.5':
+    resolution: {integrity: sha512-zaUlYgNngbt50fZA/LbtsEnmPKojPqeiXCyUUiKQMv2uJQhncR32xhLZXVQ+TJD7hlfZ+6FAqlco1NIiAcub9w==}
 
-  '@unocss/preset-web-fonts@66.6.7':
-    resolution: {integrity: sha512-GLjUoSL/kYt1Yw2zpzixKnxvpHgLHAg0JXiPglct4PZ9YmUzCPbvJ/vVn+0AnB8Fxr29Z8NAFSNoX625ZaRonQ==}
+  '@unocss/preset-web-fonts@66.7.5':
+    resolution: {integrity: sha512-OLLTK7kswdSu51qxEm6O+AehecgCfS08Ivqo+280lKzFW7V1jXr5okeJ1ty+85oHCprJqzcD9iG1khxNRLomcA==}
 
-  '@unocss/preset-wind3@66.6.7':
-    resolution: {integrity: sha512-PKyqeRzlIMd3Irdt6fCKMm73zgwweiXESk5edUK8dVWndvPIcZCOqrEq7yg6Pr/Q8tHdq26viYSkVY3a3t8RSg==}
+  '@unocss/preset-wind3@66.7.5':
+    resolution: {integrity: sha512-atFe/7Qein+oMdyZs0hEo+3EjV99Av2LVxDbzpCungxIfbS3TnQt70EIuHXMPNCVWLYwrMV+/P1n9Ntb0E3mow==}
 
-  '@unocss/preset-wind4@66.6.7':
-    resolution: {integrity: sha512-9grhWeBsFzpv8iER9AFATRaxLyXMCwGQ5HzeI4XZh2ZZ9O6vC7nYfGhns4/I+F/RpFglzU1bjqMWRS/DS8OpGQ==}
+  '@unocss/preset-wind4@66.7.5':
+    resolution: {integrity: sha512-n3jIvQv8x1jXpmWfvNFBIqHNARki4mKZXfxAA31gekpXsRRTg16u1+yC1+PBBJgoEDFEnnmKnG7EZP88S8LVXA==}
 
-  '@unocss/preset-wind@66.6.7':
-    resolution: {integrity: sha512-jxtAN96jljd+KglbhPv6Y/ujceI5rVdrLQimj4KUTPoYBPEiWadzsGKN3o8Q07hlPRg+hBlO0r4tGSUWl+/EZQ==}
+  '@unocss/preset-wind@66.7.5':
+    resolution: {integrity: sha512-LVKgGr0A9Lc7F85xGXrrb71DDXMlHGA8bcj/Kht8BCsuRdBZadNbLlnv5qnSJiHYhi3/blzcgVoaeRor6L9yNA==}
 
-  '@unocss/rule-utils@66.6.7':
-    resolution: {integrity: sha512-4PT/s8yKIShSqP9XPSw4EjbZopcu3wlIB9i3kbGbzQwF91H+0Yy10guK3kHDGtkmWVN6Np6VvaGIj2UcbmaivA==}
-    engines: {node: '>=14'}
+  '@unocss/rule-utils@66.7.5':
+    resolution: {integrity: sha512-/AKHBRF6ZOexE3EDDv8ZEYh40P5e2Eha41IYUbE1wjigW7++ssmvimSTdufJzZvU5DGP++E3B3WEsFPprZMjAg==}
 
-  '@unocss/transformer-attributify-jsx@66.6.7':
-    resolution: {integrity: sha512-r5bsnaPVe4iySLK5G5rA/QPSKmpPjYT9lixEv+KElvZcqZ+cPpkGoo+E+rnTcapu9KDMOVJItH/4Zy9m4AQ1ZQ==}
+  '@unocss/transformer-attributify-jsx@66.7.5':
+    resolution: {integrity: sha512-r8qDwNSt0eGSwWws3xsuIHb3PZYR2embFdYoE67hD/xlYgLjX1uPy/HUlGCSSh4uLc4vVYjurr0Oq5xF/B8YiA==}
 
-  '@unocss/transformer-compile-class@66.6.7':
-    resolution: {integrity: sha512-4uz4jCyq8VUaSPveXhelUWUNaTnetPFvEmXzmbYJ5BygAlUlipNynffUlUusDQmBBRrfZhJNB5J1Zif2Q6oUiA==}
+  '@unocss/transformer-compile-class@66.7.5':
+    resolution: {integrity: sha512-KuECgsGF7tGe808vIvKViEjI0UCUgYgneJfK+/TWBkjC7s8dLVaUtJzzcP9/r6OfGlgyn/x1YTdRqTaCENa7Xg==}
 
-  '@unocss/transformer-directives@66.6.7':
-    resolution: {integrity: sha512-z3gi8/cD2P0I+c6jOPZUtsPXknHwVNlMIitSh7LhyM6W3EqbqvDcYH2gFeGhdhoYcN2r5OpTBujq34iz4IdUxA==}
+  '@unocss/transformer-directives@66.7.5':
+    resolution: {integrity: sha512-VMJApXXOwlDubkW+cNMmOkfxLefFupJr+yU23gGYUB2NPsuVltc8H5CDM0gfVebpeL5CUW05evxzEAk2wsju+Q==}
 
-  '@unocss/transformer-variant-group@66.6.7':
-    resolution: {integrity: sha512-XouJuQCjYJpvR3sY4QDXnGXxtyJ4qgWFG+S9bAB01TTslhQLvNPE9o2+4gZlltnJLqxiPQWuLeJA1KdPD6ciww==}
+  '@unocss/transformer-variant-group@66.7.5':
+    resolution: {integrity: sha512-iDmP3mM8J+IxuQf5Uh33zsi528xnGxTpKRJ0c+LCrqBTTkR2tZr4aCzNmJ0g29Js2yEOsyNXRRc8BNTuvgn0AA==}
 
-  '@unocss/vite@66.6.7':
-    resolution: {integrity: sha512-8AHrVzAecnQaPLJv3/mpyFt5j2iL3gEwkZcZ8HzjH5ttK2XON1YE9vgujN5NS/yvZwlJxCMNPxn0S410/Ek61A==}
+  '@unocss/vite@66.7.5':
+    resolution: {integrity: sha512-1z1TBCNJCR2WzjPtjzmCHr8rtzXHosMjLdsCNe6Mzsfwiw044gzzLVuiEZO9vIjkI50lvQ+gIOxOiVQG0hGAeA==}
     peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0
+      vite: ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0
 
-  '@vitejs/plugin-vue@6.0.5':
-    resolution: {integrity: sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg==}
+  '@vitejs/plugin-vue@6.0.8':
+    resolution: {integrity: sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -472,8 +516,8 @@ packages:
   '@volar/typescript@2.4.28':
     resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
 
-  '@vue-macros/common@3.1.2':
-    resolution: {integrity: sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==}
+  '@vue-macros/common@3.1.4':
+    resolution: {integrity: sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       vue: ^2.7.0 || ^3.2.25
@@ -484,44 +528,57 @@ packages:
   '@vue/compiler-core@3.5.32':
     resolution: {integrity: sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ==}
 
+  '@vue/compiler-core@3.5.40':
+    resolution: {integrity: sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==}
+
   '@vue/compiler-dom@3.5.32':
     resolution: {integrity: sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q==}
 
+  '@vue/compiler-dom@3.5.40':
+    resolution: {integrity: sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==}
+
   '@vue/compiler-sfc@3.5.32':
     resolution: {integrity: sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg==}
 
+  '@vue/compiler-sfc@3.5.40':
+    resolution: {integrity: sha512-gIf497P4kpuALcvs5n3AEg1Vdn0pSY4XbjASIfHNYF1/MP3T2Mf2STERTubysBxCRxzJGJYtF/O7vwJrxFB3Vw==}
+
   '@vue/compiler-ssr@3.5.32':
     resolution: {integrity: sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw==}
 
-  '@vue/devtools-api@8.1.1':
-    resolution: {integrity: sha512-bsDMJ07b3GN1puVwJb/fyFnj/U2imyswK5UQVLZwVl7O05jDrt6BHxeG5XffmOOdasOj/bOmIjxJvGPxU7pcqw==}
+  '@vue/compiler-ssr@3.5.40':
+    resolution: {integrity: sha512-rrE5xiXG663+vHCHa3J9p2z5OcBRjXmoqenprJxAFQxg5pSshzeBiCE6pu46axapRJ2Adk0YDA2BRZVjiHXnhg==}
 
-  '@vue/devtools-kit@8.1.1':
-    resolution: {integrity: sha512-gVBaBv++i+adg4JpH71k9ppl4soyR7Y2McEqO5YNgv0BI1kMZ7BDX5gnwkZ5COYgiCyhejZG+yGNrBAjj6Coqg==}
+  '@vue/devtools-api@8.1.5':
+    resolution: {integrity: sha512-YJipMVAKe5wT5CWf5kTYCaNV7NMNjFVxJkIkJaJ4W/nCxEBzlZzrOsYKeCymdCrFZmBS/+wTWFoUs3Jf/Q6XSQ==}
 
-  '@vue/devtools-shared@8.1.1':
-    resolution: {integrity: sha512-+h4ttmJYl/txpxHKaoZcaKpC+pvckgLzIDiSQlaQ7kKthKh8KuwoLW2D8hPJEnqKzXOvu15UHEoGyngAXCz0EQ==}
+  '@vue/devtools-kit@8.1.5':
+    resolution: {integrity: sha512-FcSAxsi4eWuXLCB7Rv9lj0aIVHHPNVQ2BazGf4RJTc2JCqb4BQg0hk87ZFhminCfl+mD5OUI0rX2cgyu4kJOGA==}
 
-  '@vue/language-core@3.2.6':
-    resolution: {integrity: sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg==}
+  '@vue/devtools-shared@8.1.5':
+    resolution: {integrity: sha512-mhT4zcPFhF+Xk1O4BfhhrbXzpmfqY03fS6xGpcllbQG7lDjhQf8pQHcTIhqQIYx1hfwtHmk/6jM96ele0UxPqQ==}
 
-  '@vue/reactivity@3.5.32':
-    resolution: {integrity: sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ==}
+  '@vue/language-core@3.3.8':
+    resolution: {integrity: sha512-ieGT8jJdhhy0mGzStZhsg/qPw5bQZJg5yF+3+XU6saf4sM7yo9ZXy3h+nCwrm2+b4qS/SypkNdR2jAF3uei9tA==}
 
-  '@vue/runtime-core@3.5.32':
-    resolution: {integrity: sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ==}
+  '@vue/reactivity@3.5.40':
+    resolution: {integrity: sha512-B7ot9UlUZOi1zbq61/LvE88ZLTV8IlajTdiZTAEiDQgrnIMIZoPr9kGw0Zw46ObW62O9+H/Be3kMbfb7kYPQZA==}
 
-  '@vue/runtime-dom@3.5.32':
-    resolution: {integrity: sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ==}
+  '@vue/runtime-core@3.5.40':
+    resolution: {integrity: sha512-KAZLweuZ6uUJPK1PMSQPgBU5gCjgrrfjUhSglmU9NhH+Zjepa8cnwSydPWDWHDwOgY4g3VcZ+PljbiHlURNCbw==}
 
-  '@vue/server-renderer@3.5.32':
-    resolution: {integrity: sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ==}
-    peerDependencies:
-      vue: 3.5.32
+  '@vue/runtime-dom@3.5.40':
+    resolution: {integrity: sha512-ZfrX8ssZQds900L9pr8AuK05ddnMsR4MPMZr8cPN9GoqoPWcXLhjvvbIA2SMv+7a97sJ1vv9pj/zxK0Cq/eEFQ==}
+
+  '@vue/server-renderer@3.5.40':
+    resolution: {integrity: sha512-XNJym9WpevhTVt1HuwOrCRJ5Q+9z4BjTMrDtjTrvx74SmUll8spNTw6whWJa9mEkO4PKn5TihI/bm/8ds2QVJw==}
 
   '@vue/shared@3.5.32':
     resolution: {integrity: sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg==}
 
+  '@vue/shared@3.5.40':
+    resolution: {integrity: sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==}
+
   '@vue/tsconfig@0.9.1':
     resolution: {integrity: sha512-buvjm+9NzLCJL29KY1j1991YYJ5e6275OiK+G4jtmfIb+z4POywbdm0wXusT9adVWqe0xqg70TbI7+mRx4uU9w==}
     peerDependencies:
@@ -533,8 +590,8 @@ packages:
       vue:
         optional: true
 
-  '@vuetify/v0@1.0.0-rc.6':
-    resolution: {integrity: sha512-h4LP7LfpMOJKQWJJ5mnCHq1btZ9v8fwPziRuOj6OlMBq6QcbKzeKNYHi9pyceRW5A9Oo4MK+uIULp08251UBqQ==}
+  '@vuetify/v0@1.0.0':
+    resolution: {integrity: sha512-u/hlgeVgSBh0/0FCm0MFk2uV/LMJlRgy1qgODbjn/Y05pCK0uBpssx27Kf34EMKjz1O+5/mv88ly/0Mkzl0nbg==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': '>=1.0.0'
       '@ant-design/colors': '>=7.0.0'
@@ -568,8 +625,8 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  alien-signals@3.1.2:
-    resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==}
+  alien-signals@3.2.1:
+    resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
 
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
@@ -579,8 +636,8 @@ packages:
     resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
     engines: {node: '>=20.19.0'}
 
-  ast-walker-scope@0.8.3:
-    resolution: {integrity: sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==}
+  ast-walker-scope@0.9.0:
+    resolution: {integrity: sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==}
     engines: {node: '>=20.19.0'}
 
   birpc@2.9.0:
@@ -590,9 +647,9 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
+  cac@7.0.0:
+    resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==}
+    engines: {node: '>=20.19.0'}
 
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
@@ -668,6 +725,14 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  fontaine@0.8.0:
+    resolution: {integrity: sha512-eek1GbzOdWIj9FyQH/emqW1aEdfC3lYRCHepzwlFCm5T77fBSRSyNRKE6/antF1/B1M+SfJXVRQTY9GAr7lnDg==}
+    engines: {node: '>=18.12.0'}
+
+  fontkitten@1.0.3:
+    resolution: {integrity: sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==}
+    engines: {node: '>=20'}
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -689,6 +754,9 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -799,8 +867,8 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
-  local-pkg@1.1.2:
-    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+  local-pkg@1.2.1:
+    resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
     engines: {node: '>=14'}
 
   magic-regexp@0.10.0:
@@ -843,9 +911,17 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
+  nostics@1.2.0:
+    resolution: {integrity: sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==}
+
   npm-normalize-package-bin@4.0.0:
     resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -858,8 +934,8 @@ packages:
   ofetch@1.5.1:
     resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
 
-  oxc-parser@0.115.0:
-    resolution: {integrity: sha512-2w7Xn3CbS/zwzSY82S5WLemrRu3CT57uF7Lx8llrE/2bul6iMTcJE4Rbls7GDNbLn3ttATI68PfOz2Pt3KZ2cQ==}
+  oxc-parser@0.131.0:
+    resolution: {integrity: sha512-SJ3/7ZPbgie8dr5Z9BI/M51zZbpXba+hRSG0MDzVwMW5CRQg2fjYE0jHGlLX4eeiibGgC/mzoDFKSDHwVZEHRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   oxc-walker@0.7.0:
@@ -894,6 +970,10 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
   pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
@@ -905,16 +985,20 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  playwright-core@1.59.1:
-    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+  playwright-core@1.61.1:
+    resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.59.1:
-    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+  playwright@1.61.1:
+    resolution: {integrity: sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==}
     engines: {node: '>=18'}
     hasBin: true
 
+  postcss@8.5.22:
+    resolution: {integrity: sha512-KBDEIpLrvpv16pp3K0Fw+UCoZfopFjjgeB+0tA/aaThfEE74kKDLrgg603YvOWJyg3+WYtyq3xYsQWsIyZlPqQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postcss@8.5.8:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -944,8 +1028,8 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rolldown@1.0.0-rc.13:
-    resolution: {integrity: sha512-bvVj8YJmf0rq4pSFmH7laLa6pYrhghv3PRzrCdRAr23g66zOKVJ4wkvFtgohtPLWmthgg8/rkaqRHrpUEh0Zbw==}
+  rolldown@1.1.5:
+    resolution: {integrity: sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -975,12 +1059,15 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
   tinyexec@1.1.1:
     resolution: {integrity: sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==}
     engines: {node: '>=18'}
 
-  tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
   to-regex-range@5.0.1:
@@ -997,8 +1084,8 @@ packages:
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
-  typescript@5.9.3:
-    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -1014,13 +1101,12 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
-  unocss@66.6.7:
-    resolution: {integrity: sha512-TdZ/JnKhrqkknrMvLl0KOwrGzFThEspFIyYiylFYJki2JkMN/5EJIr+vIZEGRX69hFTjTLi6utIpbipueqzNbw==}
-    engines: {node: '>=14'}
+  unocss@66.7.5:
+    resolution: {integrity: sha512-nAdmU8TwnQoiLnQjZ6Hm1GmHy9lTexKsAZNEJtZnxN9wyFRc1eLjQgmh9r7UEGxBQMQLD8OZOgmk5HpwObbh0Q==}
     peerDependencies:
-      '@unocss/astro': 66.6.7
-      '@unocss/postcss': 66.6.7
-      '@unocss/webpack': 66.6.7
+      '@unocss/astro': 66.7.5
+      '@unocss/postcss': 66.7.5
+      '@unocss/webpack': 66.7.5
     peerDependenciesMeta:
       '@unocss/astro':
         optional: true
@@ -1029,11 +1115,11 @@ packages:
       '@unocss/webpack':
         optional: true
 
-  unplugin-fonts@1.4.0:
-    resolution: {integrity: sha512-TIJqr5rSlK/+3oL5nnrrEJ+Ty2taQ/bTJY1C5abYnksl553Q3HoHVqS4pnRLDkwpZq8AYqywib3kEVvHH+CtRQ==}
+  unplugin-fonts@2.0.0:
+    resolution: {integrity: sha512-MjyPgq9UVXYSQlcqG5Y/tYFCJvK0unURtT8+PdhrYV7u/8uwycqqLj5ouwpZ+oNQXRvemYqgnSLxGUv00r984g==}
     peerDependencies:
       '@nuxt/kit': ^3.0.0 || ^4.0.0
-      vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       '@nuxt/kit':
         optional: true
@@ -1042,25 +1128,58 @@ packages:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
+  unplugin-utils@0.3.2:
+    resolution: {integrity: sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==}
+    engines: {node: '>=20.19.0'}
+
   unplugin@2.3.11:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
 
-  unplugin@2.3.5:
-    resolution: {integrity: sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==}
-    engines: {node: '>=18.12.0'}
-
   unplugin@3.0.0:
     resolution: {integrity: sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  vite@8.0.7:
-    resolution: {integrity: sha512-P1PbweD+2/udplnThz3btF4cf6AgPky7kk23RtHUkJIU5BIxwPprhRGmOAHs6FTI7UiGbTNrgNP6jSYD6JaRnw==}
+  unplugin@3.3.0:
+    resolution: {integrity: sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@farmfe/core': '*'
+      '@rspack/core': '*'
+      bun-types-no-globals: '*'
+      esbuild: '*'
+      rolldown: '*'
+      rollup: '*'
+      unloader: '*'
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      '@farmfe/core':
+        optional: true
+      '@rspack/core':
+        optional: true
+      bun-types-no-globals:
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      unloader:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  vite@8.1.5:
+    resolution: {integrity: sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
-      '@vitejs/devtools': ^0.1.0
+      '@vitejs/devtools': ^0.3.0
       esbuild: ^0.27.0 || ^0.28.0
       jiti: '>=1.21.0'
       less: ^4.0.0
@@ -1100,13 +1219,14 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  vue-router@5.0.4:
-    resolution: {integrity: sha512-lCqDLCI2+fKVRl2OzXuzdSWmxXFLQRxQbmHugnRpTMyYiT+hNaycV0faqG5FBHDXoYrZ6MQcX87BvbY8mQ20Bg==}
+  vue-router@5.2.0:
+    resolution: {integrity: sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==}
     peerDependencies:
       '@pinia/colada': '>=0.21.2'
-      '@vue/compiler-sfc': ^3.5.17
-      pinia: ^3.0.4
-      vue: ^3.5.0
+      '@vue/compiler-sfc': ^3.5.34 || ^4.0.0
+      pinia: ^3.0.4 || ^4.0.2
+      vite: ^7.3.0 || ^8.0.0
+      vue: ^3.5.34 || ^4.0.0
     peerDependenciesMeta:
       '@pinia/colada':
         optional: true
@@ -1114,15 +1234,17 @@ packages:
         optional: true
       pinia:
         optional: true
+      vite:
+        optional: true
 
-  vue-tsc@3.2.6:
-    resolution: {integrity: sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q==}
+  vue-tsc@3.3.8:
+    resolution: {integrity: sha512-xXmYlVQpcwJDWyGlqbHrGVOl1h3UOsASymRibrHc+iy9j/UNnOrOn4u+fntHz4D6Cs74RtapeqVV6CzJeg+UlA==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue@3.5.32:
-    resolution: {integrity: sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==}
+  vue@3.5.40:
+    resolution: {integrity: sha512-+8PJ4SJXdn/cHGImF4CKdxlWHIN5Dkt7DoufRREM6h6uVCx2m7QxgcEQmmzyOK8A9mcafg7sFbJFYsdFVubTig==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -1142,8 +1264,8 @@ packages:
     engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
-  yaml@2.8.3:
-    resolution: {integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==}
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
@@ -1154,54 +1276,101 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.1.1
 
-  '@babel/generator@7.29.1':
+  '@babel/generator@8.0.0':
     dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
+      '@babel/parser': 8.0.4
+      '@babel/types': 8.0.4
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
+      '@types/jsesc': 2.5.1
       jsesc: 3.1.0
 
   '@babel/helper-string-parser@7.27.1': {}
 
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-string-parser@8.0.0': {}
+
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-identifier@8.0.4': {}
+
   '@babel/parser@7.29.2':
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/parser@8.0.4':
+    dependencies:
+      '@babel/types': 8.0.4
+
   '@babel/types@7.29.0':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@emnapi/core@1.9.1':
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@babel/types@8.0.4':
+    dependencies:
+      '@babel/helper-string-parser': 8.0.0
+      '@babel/helper-validator-identifier': 8.0.4
+
+  '@capsizecss/unpack@4.0.1':
+    dependencies:
+      fontkitten: 1.0.3
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/core@1.11.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.1':
     dependencies:
-      '@emnapi/wasi-threads': 1.2.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.9.1':
+  '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/wasi-threads@1.2.0':
+  '@emnapi/wasi-threads@1.2.2':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@fontsource/geist@5.2.8': {}
+  '@fontsource/geist@5.3.0': {}
 
-  '@fontsource/inter@5.2.8': {}
+  '@fontsource/inter@5.3.0': {}
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@3.1.0':
+  '@iconify/utils@3.1.4':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@iconify/types': 2.0.0
-      mlly: 1.8.2
+      import-meta-resolve: 4.2.0
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
@@ -1229,11 +1398,18 @@ snapshots:
 
   '@mdi/js@7.4.47': {}
 
-  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
     dependencies:
-      '@emnapi/core': 1.9.1
-      '@emnapi/runtime': 1.9.1
-      '@tybys/wasm-util': 0.10.1
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.3
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -1248,74 +1424,73 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.1
 
-  '@oxc-parser/binding-android-arm-eabi@0.115.0':
+  '@oxc-parser/binding-android-arm-eabi@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm64@0.115.0':
+  '@oxc-parser/binding-android-arm64@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.115.0':
+  '@oxc-parser/binding-darwin-arm64@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.115.0':
+  '@oxc-parser/binding-darwin-x64@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.115.0':
+  '@oxc-parser/binding-freebsd-x64@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.115.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.115.0':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.115.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.115.0':
+  '@oxc-parser/binding-linux-arm64-musl@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.115.0':
+  '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.115.0':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.115.0':
+  '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.115.0':
+  '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.115.0':
+  '@oxc-parser/binding-linux-x64-gnu@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-musl@0.115.0':
+  '@oxc-parser/binding-linux-x64-musl@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-openharmony-arm64@0.115.0':
+  '@oxc-parser/binding-openharmony-arm64@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@oxc-parser/binding-wasm32-wasi@0.131.0':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.115.0':
+  '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.115.0':
+  '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.115.0':
+  '@oxc-parser/binding-win32-x64-msvc@0.131.0':
     optional: true
 
-  '@oxc-project/types@0.115.0': {}
+  '@oxc-project/types@0.131.0': {}
 
-  '@oxc-project/types@0.123.0': {}
+  '@oxc-project/types@0.139.0': {}
 
   '@polka/url@1.0.0-next.29': {}
 
@@ -1323,209 +1498,206 @@ snapshots:
     dependencies:
       quansync: 1.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.13':
+  '@rolldown/binding-android-arm64@1.1.5':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.13':
+  '@rolldown/binding-darwin-arm64@1.1.5':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.13':
+  '@rolldown/binding-darwin-x64@1.1.5':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.13':
+  '@rolldown/binding-freebsd-x64@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.13':
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-arm64-gnu@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.13':
+  '@rolldown/binding-linux-arm64-musl@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-s390x-gnu@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-x64-gnu@1.1.5':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.13':
+  '@rolldown/binding-linux-x64-musl@1.1.5':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.13':
+  '@rolldown/binding-openharmony-arm64@1.1.5':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.13':
+  '@rolldown/binding-wasm32-wasi@1.1.5':
     dependencies:
-      '@emnapi/core': 1.9.1
-      '@emnapi/runtime': 1.9.1
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.13':
+  '@rolldown/binding-win32-arm64-msvc@1.1.5':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.13':
+  '@rolldown/binding-win32-x64-msvc@1.1.5':
     optional: true
 
-  '@rolldown/pluginutils@1.0.0-rc.13': {}
-
-  '@rolldown/pluginutils@1.0.0-rc.2': {}
+  '@rolldown/pluginutils@1.0.1': {}
 
   '@tsconfig/node22@22.0.5': {}
 
-  '@tybys/wasm-util@0.10.1':
+  '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1
     optional: true
 
   '@types/estree@1.0.8': {}
 
+  '@types/jsesc@2.5.1': {}
+
   '@types/node@24.12.2':
     dependencies:
       undici-types: 7.16.0
 
-  '@unocss/cli@66.6.7':
+  '@unocss/cli@66.7.5':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      '@unocss/config': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
-      '@unocss/preset-wind4': 66.6.7
-      '@unocss/transformer-directives': 66.6.7
-      cac: 6.7.14
+      '@unocss/config': 66.7.5
+      '@unocss/core': 66.7.5
+      '@unocss/preset-wind3': 66.7.5
+      '@unocss/preset-wind4': 66.7.5
+      '@unocss/transformer-directives': 66.7.5
+      cac: 7.0.0
       chokidar: 5.0.0
       colorette: 2.0.20
       consola: 3.4.2
       magic-string: 0.30.21
       pathe: 2.0.3
       perfect-debounce: 2.1.0
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.17
       unplugin-utils: 0.3.1
 
-  '@unocss/config@66.6.7':
+  '@unocss/config@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
       colorette: 2.0.20
       consola: 3.4.2
       unconfig: 7.5.0
 
-  '@unocss/core@66.6.7': {}
+  '@unocss/core@66.7.5': {}
 
-  '@unocss/extractor-arbitrary-variants@66.6.7':
+  '@unocss/extractor-arbitrary-variants@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
 
-  '@unocss/inspector@66.6.7':
+  '@unocss/inspector@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/rule-utils': 66.7.5
       colorette: 2.0.20
       gzip-size: 6.0.0
       sirv: 3.0.2
 
-  '@unocss/preset-attributify@66.6.7':
+  '@unocss/preset-attributify@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
 
-  '@unocss/preset-icons@66.6.7':
+  '@unocss/preset-icons@66.7.5':
     dependencies:
-      '@iconify/utils': 3.1.0
-      '@unocss/core': 66.6.7
+      '@iconify/utils': 3.1.4
+      '@unocss/core': 66.7.5
       ofetch: 1.5.1
 
-  '@unocss/preset-mini@66.6.7':
+  '@unocss/preset-mini@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/extractor-arbitrary-variants': 66.6.7
-      '@unocss/rule-utils': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/extractor-arbitrary-variants': 66.7.5
+      '@unocss/rule-utils': 66.7.5
 
-  '@unocss/preset-tagify@66.6.7':
+  '@unocss/preset-tagify@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
 
-  '@unocss/preset-typography@66.6.7':
+  '@unocss/preset-typography@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/rule-utils': 66.7.5
 
-  '@unocss/preset-uno@66.6.7':
+  '@unocss/preset-uno@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/preset-wind3': 66.7.5
 
-  '@unocss/preset-web-fonts@66.6.7':
+  '@unocss/preset-web-fonts@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
       ofetch: 1.5.1
 
-  '@unocss/preset-wind3@66.6.7':
+  '@unocss/preset-wind3@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/preset-mini': 66.6.7
-      '@unocss/rule-utils': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/preset-mini': 66.7.5
+      '@unocss/rule-utils': 66.7.5
 
-  '@unocss/preset-wind4@66.6.7':
+  '@unocss/preset-wind4@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/extractor-arbitrary-variants': 66.6.7
-      '@unocss/rule-utils': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/extractor-arbitrary-variants': 66.7.5
+      '@unocss/rule-utils': 66.7.5
 
-  '@unocss/preset-wind@66.6.7':
+  '@unocss/preset-wind@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/preset-wind3': 66.7.5
 
-  '@unocss/rule-utils@66.6.7':
+  '@unocss/rule-utils@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
       magic-string: 0.30.21
 
-  '@unocss/transformer-attributify-jsx@66.6.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@unocss/transformer-attributify-jsx@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      oxc-parser: 0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
-      oxc-walker: 0.7.0(oxc-parser@0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@unocss/core': 66.7.5
+      oxc-parser: 0.131.0
+      oxc-walker: 0.7.0(oxc-parser@0.131.0)
 
-  '@unocss/transformer-compile-class@66.6.7':
+  '@unocss/transformer-compile-class@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
 
-  '@unocss/transformer-directives@66.6.7':
+  '@unocss/transformer-directives@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
+      '@unocss/core': 66.7.5
+      '@unocss/rule-utils': 66.7.5
       css-tree: 3.2.1
 
-  '@unocss/transformer-variant-group@66.6.7':
+  '@unocss/transformer-variant-group@66.7.5':
     dependencies:
-      '@unocss/core': 66.6.7
+      '@unocss/core': 66.7.5
 
-  '@unocss/vite@66.6.7(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))':
+  '@unocss/vite@66.7.5(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      '@unocss/config': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/inspector': 66.6.7
+      '@unocss/config': 66.7.5
+      '@unocss/core': 66.7.5
+      '@unocss/inspector': 66.7.5
       chokidar: 5.0.0
       magic-string: 0.30.21
       pathe: 2.0.3
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.17
       unplugin-utils: 0.3.1
-      vite: 8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
+      vite: 8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)
 
-  '@vitejs/plugin-vue@6.0.5(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))(vue@3.5.32(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.8(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))':
     dependencies:
-      '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
-      vue: 3.5.32(typescript@5.9.3)
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)
+      vue: 3.5.40(typescript@6.0.3)
 
   '@volar/language-core@2.4.28':
     dependencies:
@@ -1539,15 +1711,15 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue-macros/common@3.1.2(vue@3.5.32(typescript@5.9.3))':
+  '@vue-macros/common@3.1.4(vue@3.5.40(typescript@6.0.3))':
     dependencies:
       '@vue/compiler-sfc': 3.5.32
       ast-kit: 2.2.0
-      local-pkg: 1.1.2
+      local-pkg: 1.2.1
       magic-string-ast: 1.0.3
-      unplugin-utils: 0.3.1
+      unplugin-utils: 0.3.2
     optionalDependencies:
-      vue: 3.5.32(typescript@5.9.3)
+      vue: 3.5.40(typescript@6.0.3)
 
   '@vue/compiler-core@3.5.32':
     dependencies:
@@ -1557,11 +1729,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.40':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.40
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.5.32':
     dependencies:
       '@vue/compiler-core': 3.5.32
       '@vue/shared': 3.5.32
 
+  '@vue/compiler-dom@3.5.40':
+    dependencies:
+      '@vue/compiler-core': 3.5.40
+      '@vue/shared': 3.5.40
+
   '@vue/compiler-sfc@3.5.32':
     dependencies:
       '@babel/parser': 7.29.2
@@ -1574,72 +1759,91 @@ snapshots:
       postcss: 8.5.8
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.40':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/compiler-core': 3.5.40
+      '@vue/compiler-dom': 3.5.40
+      '@vue/compiler-ssr': 3.5.40
+      '@vue/shared': 3.5.40
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.22
+      source-map-js: 1.2.1
+
   '@vue/compiler-ssr@3.5.32':
     dependencies:
       '@vue/compiler-dom': 3.5.32
       '@vue/shared': 3.5.32
 
-  '@vue/devtools-api@8.1.1':
+  '@vue/compiler-ssr@3.5.40':
+    dependencies:
+      '@vue/compiler-dom': 3.5.40
+      '@vue/shared': 3.5.40
+
+  '@vue/devtools-api@8.1.5':
     dependencies:
-      '@vue/devtools-kit': 8.1.1
+      '@vue/devtools-kit': 8.1.5
 
-  '@vue/devtools-kit@8.1.1':
+  '@vue/devtools-kit@8.1.5':
     dependencies:
-      '@vue/devtools-shared': 8.1.1
+      '@vue/devtools-shared': 8.1.5
       birpc: 2.9.0
       hookable: 5.5.3
       perfect-debounce: 2.1.0
 
-  '@vue/devtools-shared@8.1.1': {}
+  '@vue/devtools-shared@8.1.5': {}
 
-  '@vue/language-core@3.2.6':
+  '@vue/language-core@3.3.8':
     dependencies:
       '@volar/language-core': 2.4.28
       '@vue/compiler-dom': 3.5.32
       '@vue/shared': 3.5.32
-      alien-signals: 3.1.2
+      alien-signals: 3.2.1
       muggle-string: 0.4.1
       path-browserify: 1.0.1
       picomatch: 4.0.4
 
-  '@vue/reactivity@3.5.32':
+  '@vue/reactivity@3.5.40':
     dependencies:
-      '@vue/shared': 3.5.32
+      '@vue/shared': 3.5.40
 
-  '@vue/runtime-core@3.5.32':
+  '@vue/runtime-core@3.5.40':
     dependencies:
-      '@vue/reactivity': 3.5.32
-      '@vue/shared': 3.5.32
+      '@vue/reactivity': 3.5.40
+      '@vue/shared': 3.5.40
 
-  '@vue/runtime-dom@3.5.32':
+  '@vue/runtime-dom@3.5.40':
     dependencies:
-      '@vue/reactivity': 3.5.32
-      '@vue/runtime-core': 3.5.32
-      '@vue/shared': 3.5.32
+      '@vue/reactivity': 3.5.40
+      '@vue/runtime-core': 3.5.40
+      '@vue/shared': 3.5.40
       csstype: 3.2.3
 
-  '@vue/server-renderer@3.5.32(vue@3.5.32(typescript@5.9.3))':
+  '@vue/server-renderer@3.5.40':
     dependencies:
-      '@vue/compiler-ssr': 3.5.32
-      '@vue/shared': 3.5.32
-      vue: 3.5.32(typescript@5.9.3)
+      '@vue/compiler-ssr': 3.5.40
+      '@vue/runtime-dom': 3.5.40
+      '@vue/shared': 3.5.40
 
   '@vue/shared@3.5.32': {}
 
-  '@vue/tsconfig@0.9.1(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3))':
+  '@vue/shared@3.5.40': {}
+
+  '@vue/tsconfig@0.9.1(typescript@6.0.3)(vue@3.5.40(typescript@6.0.3))':
     optionalDependencies:
-      typescript: 5.9.3
-      vue: 3.5.32(typescript@5.9.3)
+      typescript: 6.0.3
+      vue: 3.5.40(typescript@6.0.3)
 
-  '@vuetify/v0@1.0.0-rc.6(@js-temporal/polyfill@0.5.1)(vue@3.5.32(typescript@5.9.3))':
+  '@vuetify/v0@1.0.0(@js-temporal/polyfill@0.5.1)(vue@3.5.40(typescript@6.0.3))':
     dependencies:
-      vue: 3.5.32(typescript@5.9.3)
+      vue: 3.5.40(typescript@6.0.3)
     optionalDependencies:
       '@js-temporal/polyfill': 0.5.1
 
   acorn@8.16.0: {}
 
-  alien-signals@3.1.2: {}
+  alien-signals@3.2.1: {}
 
   ansi-styles@6.2.3: {}
 
@@ -1648,9 +1852,10 @@ snapshots:
       '@babel/parser': 7.29.2
       pathe: 2.0.3
 
-  ast-walker-scope@0.8.3:
+  ast-walker-scope@0.9.0:
     dependencies:
       '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
       ast-kit: 2.2.0
 
   birpc@2.9.0: {}
@@ -1659,7 +1864,7 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  cac@6.7.14: {}
+  cac@7.0.0: {}
 
   chokidar@5.0.0:
     dependencies:
@@ -1716,14 +1921,28 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
-  fdir@6.5.0(picomatch@4.0.4):
+  fdir@6.5.0(picomatch@4.0.5):
     optionalDependencies:
-      picomatch: 4.0.4
+      picomatch: 4.0.5
 
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  fontaine@0.8.0:
+    dependencies:
+      '@capsizecss/unpack': 4.0.1
+      css-tree: 3.2.1
+      magic-regexp: 0.10.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      ufo: 1.6.3
+      unplugin: 2.3.11
+
+  fontkitten@1.0.3:
+    dependencies:
+      tiny-inflate: 1.0.3
+
   fsevents@2.3.2:
     optional: true
 
@@ -1740,6 +1959,8 @@ snapshots:
 
   hookable@5.5.3: {}
 
+  import-meta-resolve@4.2.0: {}
+
   is-extglob@2.1.1: {}
 
   is-glob@4.0.3:
@@ -1812,7 +2033,7 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
-  local-pkg@1.1.2:
+  local-pkg@1.2.1:
     dependencies:
       mlly: 1.8.2
       pkg-types: 2.3.0
@@ -1860,8 +2081,12 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.16: {}
+
   node-fetch-native@1.6.7: {}
 
+  nostics@1.2.0: {}
+
   npm-normalize-package-bin@4.0.0: {}
 
   npm-run-all2@8.0.4:
@@ -1881,38 +2106,35 @@ snapshots:
       node-fetch-native: 1.6.7
       ufo: 1.6.3
 
-  oxc-parser@0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1):
+  oxc-parser@0.131.0:
     dependencies:
-      '@oxc-project/types': 0.115.0
+      '@oxc-project/types': 0.131.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.115.0
-      '@oxc-parser/binding-android-arm64': 0.115.0
-      '@oxc-parser/binding-darwin-arm64': 0.115.0
-      '@oxc-parser/binding-darwin-x64': 0.115.0
-      '@oxc-parser/binding-freebsd-x64': 0.115.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.115.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.115.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.115.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.115.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.115.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-x64-musl': 0.115.0
-      '@oxc-parser/binding-openharmony-arm64': 0.115.0
-      '@oxc-parser/binding-wasm32-wasi': 0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
-      '@oxc-parser/binding-win32-arm64-msvc': 0.115.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.115.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.115.0
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-
-  oxc-walker@0.7.0(oxc-parser@0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)):
+      '@oxc-parser/binding-android-arm-eabi': 0.131.0
+      '@oxc-parser/binding-android-arm64': 0.131.0
+      '@oxc-parser/binding-darwin-arm64': 0.131.0
+      '@oxc-parser/binding-darwin-x64': 0.131.0
+      '@oxc-parser/binding-freebsd-x64': 0.131.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.131.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.131.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.131.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.131.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.131.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-x64-musl': 0.131.0
+      '@oxc-parser/binding-openharmony-arm64': 0.131.0
+      '@oxc-parser/binding-wasm32-wasi': 0.131.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.131.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.131.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.131.0
+
+  oxc-walker@0.7.0(oxc-parser@0.131.0):
     dependencies:
       magic-regexp: 0.10.0
-      oxc-parser: 0.115.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      oxc-parser: 0.131.0
 
   package-manager-detector@1.6.0: {}
 
@@ -1930,6 +2152,8 @@ snapshots:
 
   picomatch@4.0.4: {}
 
+  picomatch@4.0.5: {}
+
   pidtree@0.6.0: {}
 
   pkg-types@1.3.1:
@@ -1944,14 +2168,20 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
-  playwright-core@1.59.1: {}
+  playwright-core@1.61.1: {}
 
-  playwright@1.59.1:
+  playwright@1.61.1:
     dependencies:
-      playwright-core: 1.59.1
+      playwright-core: 1.61.1
     optionalDependencies:
       fsevents: 2.3.2
 
+  postcss@8.5.22:
+    dependencies:
+      nanoid: 3.3.16
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postcss@8.5.8:
     dependencies:
       nanoid: 3.3.11
@@ -1975,26 +2205,26 @@ snapshots:
 
   reusify@1.1.0: {}
 
-  rolldown@1.0.0-rc.13:
+  rolldown@1.1.5:
     dependencies:
-      '@oxc-project/types': 0.123.0
-      '@rolldown/pluginutils': 1.0.0-rc.13
+      '@oxc-project/types': 0.139.0
+      '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.13
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.13
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.13
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.13
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.13
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.13
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.13
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.13
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.13
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.13
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.13
+      '@rolldown/binding-android-arm64': 1.1.5
+      '@rolldown/binding-darwin-arm64': 1.1.5
+      '@rolldown/binding-darwin-x64': 1.1.5
+      '@rolldown/binding-freebsd-x64': 1.1.5
+      '@rolldown/binding-linux-arm-gnueabihf': 1.1.5
+      '@rolldown/binding-linux-arm64-gnu': 1.1.5
+      '@rolldown/binding-linux-arm64-musl': 1.1.5
+      '@rolldown/binding-linux-ppc64-gnu': 1.1.5
+      '@rolldown/binding-linux-s390x-gnu': 1.1.5
+      '@rolldown/binding-linux-x64-gnu': 1.1.5
+      '@rolldown/binding-linux-x64-musl': 1.1.5
+      '@rolldown/binding-openharmony-arm64': 1.1.5
+      '@rolldown/binding-wasm32-wasi': 1.1.5
+      '@rolldown/binding-win32-arm64-msvc': 1.1.5
+      '@rolldown/binding-win32-x64-msvc': 1.1.5
 
   run-parallel@1.2.0:
     dependencies:
@@ -2018,12 +2248,14 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  tiny-inflate@1.0.3: {}
+
   tinyexec@1.1.1: {}
 
-  tinyglobby@0.2.15:
+  tinyglobby@0.2.17:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
 
   to-regex-range@5.0.1:
     dependencies:
@@ -2036,7 +2268,7 @@ snapshots:
 
   type-level-regexp@0.1.17: {}
 
-  typescript@5.9.3: {}
+  typescript@6.0.3: {}
 
   ufo@1.6.3: {}
 
@@ -2055,41 +2287,48 @@ snapshots:
 
   undici-types@7.16.0: {}
 
-  unocss@66.6.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)):
-    dependencies:
-      '@unocss/cli': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/preset-attributify': 66.6.7
-      '@unocss/preset-icons': 66.6.7
-      '@unocss/preset-mini': 66.6.7
-      '@unocss/preset-tagify': 66.6.7
-      '@unocss/preset-typography': 66.6.7
-      '@unocss/preset-uno': 66.6.7
-      '@unocss/preset-web-fonts': 66.6.7
-      '@unocss/preset-wind': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
-      '@unocss/preset-wind4': 66.6.7
-      '@unocss/transformer-attributify-jsx': 66.6.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
-      '@unocss/transformer-compile-class': 66.6.7
-      '@unocss/transformer-directives': 66.6.7
-      '@unocss/transformer-variant-group': 66.6.7
-      '@unocss/vite': 66.6.7(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3))
+  unocss@66.7.5(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)):
+    dependencies:
+      '@unocss/cli': 66.7.5
+      '@unocss/core': 66.7.5
+      '@unocss/preset-attributify': 66.7.5
+      '@unocss/preset-icons': 66.7.5
+      '@unocss/preset-mini': 66.7.5
+      '@unocss/preset-tagify': 66.7.5
+      '@unocss/preset-typography': 66.7.5
+      '@unocss/preset-uno': 66.7.5
+      '@unocss/preset-web-fonts': 66.7.5
+      '@unocss/preset-wind': 66.7.5
+      '@unocss/preset-wind3': 66.7.5
+      '@unocss/preset-wind4': 66.7.5
+      '@unocss/transformer-attributify-jsx': 66.7.5
+      '@unocss/transformer-compile-class': 66.7.5
+      '@unocss/transformer-directives': 66.7.5
+      '@unocss/transformer-variant-group': 66.7.5
+      '@unocss/vite': 66.7.5(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))
     transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
       - vite
 
-  unplugin-fonts@1.4.0(vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)):
+  unplugin-fonts@2.0.0(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)):
     dependencies:
+      css-tree: 3.2.1
       fast-glob: 3.3.3
-      unplugin: 2.3.5
-      vite: 8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3)
+      fontaine: 0.8.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      unplugin: 3.0.0
+      vite: 8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)
 
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
       picomatch: 4.0.4
 
+  unplugin-utils@0.3.2:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.5
+
   unplugin@2.3.11:
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -2097,71 +2336,85 @@ snapshots:
       picomatch: 4.0.4
       webpack-virtual-modules: 0.6.2
 
-  unplugin@2.3.5:
+  unplugin@3.0.0:
     dependencies:
-      acorn: 8.16.0
+      '@jridgewell/remapping': 2.3.5
       picomatch: 4.0.4
       webpack-virtual-modules: 0.6.2
 
-  unplugin@3.0.0:
+  unplugin@3.3.0(rolldown@1.1.5)(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)):
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      picomatch: 4.0.4
+      picomatch: 4.0.5
       webpack-virtual-modules: 0.6.2
+    optionalDependencies:
+      rolldown: 1.1.5
+      vite: 8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)
 
-  vite@8.0.7(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.8.3):
+  vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.32.0
-      picomatch: 4.0.4
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.13
-      tinyglobby: 0.2.15
+      picomatch: 4.0.5
+      postcss: 8.5.22
+      rolldown: 1.1.5
+      tinyglobby: 0.2.17
     optionalDependencies:
       '@types/node': 24.12.2
       fsevents: 2.3.3
       jiti: 2.6.1
-      yaml: 2.8.3
+      yaml: 2.9.0
 
   vscode-uri@3.1.0: {}
 
-  vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(vue@3.5.32(typescript@5.9.3)):
+  vue-router@5.2.0(@vue/compiler-sfc@3.5.40)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3)):
     dependencies:
-      '@babel/generator': 7.29.1
-      '@vue-macros/common': 3.1.2(vue@3.5.32(typescript@5.9.3))
-      '@vue/devtools-api': 8.1.1
-      ast-walker-scope: 0.8.3
+      '@babel/generator': 8.0.0
+      '@vue-macros/common': 3.1.4(vue@3.5.40(typescript@6.0.3))
+      '@vue/devtools-api': 8.1.5
+      ast-walker-scope: 0.9.0
       chokidar: 5.0.0
       json5: 2.2.3
-      local-pkg: 1.1.2
+      local-pkg: 1.2.1
       magic-string: 0.30.21
       mlly: 1.8.2
       muggle-string: 0.4.1
+      nostics: 1.2.0
       pathe: 2.0.3
-      picomatch: 4.0.4
+      picomatch: 4.0.5
       scule: 1.3.0
-      tinyglobby: 0.2.15
-      unplugin: 3.0.0
-      unplugin-utils: 0.3.1
-      vue: 3.5.32(typescript@5.9.3)
-      yaml: 2.8.3
+      tinyglobby: 0.2.17
+      unplugin: 3.3.0(rolldown@1.1.5)(vite@8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0))
+      unplugin-utils: 0.3.2
+      vue: 3.5.40(typescript@6.0.3)
+      yaml: 2.9.0
     optionalDependencies:
-      '@vue/compiler-sfc': 3.5.32
+      '@vue/compiler-sfc': 3.5.40
+      vite: 8.1.5(@types/node@24.12.2)(jiti@2.6.1)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - rolldown
+      - rollup
+      - unloader
+      - webpack
 
-  vue-tsc@3.2.6(typescript@5.9.3):
+  vue-tsc@3.3.8(typescript@6.0.3):
     dependencies:
       '@volar/typescript': 2.4.28
-      '@vue/language-core': 3.2.6
-      typescript: 5.9.3
+      '@vue/language-core': 3.3.8
+      typescript: 6.0.3
 
-  vue@3.5.32(typescript@5.9.3):
+  vue@3.5.40(typescript@6.0.3):
     dependencies:
-      '@vue/compiler-dom': 3.5.32
-      '@vue/compiler-sfc': 3.5.32
-      '@vue/runtime-dom': 3.5.32
-      '@vue/server-renderer': 3.5.32(vue@3.5.32(typescript@5.9.3))
-      '@vue/shared': 3.5.32
+      '@vue/compiler-dom': 3.5.40
+      '@vue/compiler-sfc': 3.5.40
+      '@vue/runtime-dom': 3.5.40
+      '@vue/server-renderer': 3.5.40
+      '@vue/shared': 3.5.40
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   webpack-virtual-modules@0.6.2: {}
 
@@ -2173,4 +2426,4 @@ snapshots:
     dependencies:
       isexe: 3.1.5
 
-  yaml@2.8.3: {}
+  yaml@2.9.0: {}