From 600186aed2498b836e84cb4f4550f3d0aecdfbb2 Mon Sep 17 00:00:00 2001
From: Corrin Lakeland <corrin.lakeland@cmeconnect.com>
Date: Fri, 19 Jun 2026 14:28:57 +1200
Subject: [PATCH 1/2] docs: add design sync extraction

---
 .design-sync/EXTRACTION_SPEC.md               |  73 +++++++
 .design-sync/NOTES.md                         |  28 +++
 .design-sync/config.json                      |   9 +
 .design-sync/conventions.md                   |  72 +++++++
 .design-sync/ds-bundle/README.md              | 120 ++++++++++++
 .../components/alert/Alert/Alert.d.ts         |  23 +++
 .../components/alert/Alert/Alert.html         |  36 ++++
 .../components/alert/Alert/Alert.prompt.md    |  39 ++++
 .../components/avatar/Avatar/Avatar.d.ts      |  36 ++++
 .../components/avatar/Avatar/Avatar.html      |  35 ++++
 .../components/avatar/Avatar/Avatar.prompt.md |  38 ++++
 .../components/badge/Badge/Badge.d.ts         |  27 +++
 .../components/badge/Badge/Badge.html         |  35 ++++
 .../components/badge/Badge/Badge.prompt.md    |  37 ++++
 .../components/button/Button/Button.d.ts      |  35 ++++
 .../components/button/Button/Button.html      |  52 +++++
 .../components/button/Button/Button.prompt.md |  51 +++++
 .../calendar/Calendar/Calendar.d.ts           |  95 +++++++++
 .../calendar/Calendar/Calendar.html           |  48 +++++
 .../calendar/Calendar/Calendar.prompt.md      |  53 +++++
 .../ds-bundle/components/card/Card/Card.d.ts  |  32 +++
 .../ds-bundle/components/card/Card/Card.html  |  42 ++++
 .../components/card/Card/Card.prompt.md       |  52 +++++
 .../checkbox/Checkbox/Checkbox.d.ts           |  26 +++
 .../checkbox/Checkbox/Checkbox.html           |  46 +++++
 .../checkbox/Checkbox/Checkbox.prompt.md      |  41 ++++
 .../collapsible/Collapsible/Collapsible.d.ts  |  40 ++++
 .../collapsible/Collapsible/Collapsible.html  |  34 ++++
 .../Collapsible/Collapsible.prompt.md         |  41 ++++
 .../CustomDatePicker/CustomDatePicker.d.ts    |  25 +++
 .../CustomDatePicker/CustomDatePicker.html    |  31 +++
 .../CustomDatePicker.prompt.md                |  39 ++++
 .../date-picker/DatePicker/DatePicker.d.ts    |  29 +++
 .../date-picker/DatePicker/DatePicker.html    |  41 ++++
 .../DatePicker/DatePicker.prompt.md           |  44 +++++
 .../components/dialog/Dialog/Dialog.d.ts      |  98 ++++++++++
 .../components/dialog/Dialog/Dialog.html      |  44 +++++
 .../components/dialog/Dialog/Dialog.prompt.md |  67 +++++++
 .../components/drawer/Drawer/Drawer.d.ts      |  92 +++++++++
 .../components/drawer/Drawer/Drawer.html      |  44 +++++
 .../components/drawer/Drawer/Drawer.prompt.md |  65 +++++++
 .../DropdownMenu/DropdownMenu.d.ts            | 154 +++++++++++++++
 .../DropdownMenu/DropdownMenu.html            |  43 ++++
 .../DropdownMenu/DropdownMenu.prompt.md       |  73 +++++++
 .../components/input/Input/Input.d.ts         |  24 +++
 .../components/input/Input/Input.html         |  39 ++++
 .../components/input/Input/Input.prompt.md    |  37 ++++
 .../components/label/Label/Label.d.ts         |  20 ++
 .../components/label/Label/Label.html         |  30 +++
 .../components/label/Label/Label.prompt.md    |  37 ++++
 .../LoadingState/LoadingState.d.ts            |  30 +++
 .../LoadingState/LoadingState.html            |  34 ++++
 .../LoadingState/LoadingState.prompt.md       |  58 ++++++
 .../pagination/Pagination/Pagination.d.ts     |  31 +++
 .../pagination/Pagination/Pagination.html     |  43 ++++
 .../Pagination/Pagination.prompt.md           |  38 ++++
 .../components/popover/Popover/Popover.d.ts   |  57 ++++++
 .../components/popover/Popover/Popover.html   |  39 ++++
 .../popover/Popover/Popover.prompt.md         |  49 +++++
 .../progress/Progress/Progress.d.ts           |  21 ++
 .../progress/Progress/Progress.html           |  29 +++
 .../progress/Progress/Progress.prompt.md      |  35 ++++
 .../RangeCalendar/RangeCalendar.d.ts          |  90 +++++++++
 .../RangeCalendar/RangeCalendar.html          |  49 +++++
 .../RangeCalendar/RangeCalendar.prompt.md     |  52 +++++
 .../components/select/Select/Select.d.ts      |  96 +++++++++
 .../components/select/Select/Select.html      |  40 ++++
 .../components/select/Select/Select.prompt.md |  63 ++++++
 .../skeleton/Skeleton/Skeleton.d.ts           |  11 ++
 .../skeleton/Skeleton/Skeleton.html           |  36 ++++
 .../skeleton/Skeleton/Skeleton.prompt.md      |  34 ++++
 .../components/sonner/Sonner/Sonner.d.ts      |  37 ++++
 .../components/sonner/Sonner/Sonner.html      |  33 ++++
 .../components/sonner/Sonner/Sonner.prompt.md |  52 +++++
 .../components/switch/Switch/Switch.d.ts      |  26 +++
 .../components/switch/Switch/Switch.html      |  43 ++++
 .../components/switch/Switch/Switch.prompt.md |  40 ++++
 .../components/table/Table/Table.d.ts         |  67 +++++++
 .../components/table/Table/Table.html         |  42 ++++
 .../components/table/Table/Table.prompt.md    |  54 +++++
 .../ds-bundle/components/tabs/Tabs/Tabs.d.ts  |  39 ++++
 .../ds-bundle/components/tabs/Tabs/Tabs.html  |  38 ++++
 .../components/tabs/Tabs/Tabs.prompt.md       |  43 ++++
 .../textarea/Textarea/Textarea.d.ts           |  24 +++
 .../textarea/Textarea/Textarea.html           |  33 ++++
 .../textarea/Textarea/Textarea.prompt.md      |  37 ++++
 .../components/tooltip/Tooltip/Tooltip.d.ts   |  67 +++++++
 .../components/tooltip/Tooltip/Tooltip.html   |  33 ++++
 .../tooltip/Tooltip/Tooltip.prompt.md         |  51 +++++
 .design-sync/ds-bundle/styles.css             | 184 ++++++++++++++++++
 .design-sync/ds-bundle/tokens/colors.json     |  52 +++++
 .design-sync/ds-bundle/tokens/radius.json     |  16 ++
 .design-sync/ds-bundle/tokens/typography.json |  20 ++
 93 files changed, 4338 insertions(+)
 create mode 100644 .design-sync/EXTRACTION_SPEC.md
 create mode 100644 .design-sync/NOTES.md
 create mode 100644 .design-sync/config.json
 create mode 100644 .design-sync/conventions.md
 create mode 100644 .design-sync/ds-bundle/README.md
 create mode 100644 .design-sync/ds-bundle/components/alert/Alert/Alert.d.ts
 create mode 100644 .design-sync/ds-bundle/components/alert/Alert/Alert.html
 create mode 100644 .design-sync/ds-bundle/components/alert/Alert/Alert.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/avatar/Avatar/Avatar.d.ts
 create mode 100644 .design-sync/ds-bundle/components/avatar/Avatar/Avatar.html
 create mode 100644 .design-sync/ds-bundle/components/avatar/Avatar/Avatar.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/badge/Badge/Badge.d.ts
 create mode 100644 .design-sync/ds-bundle/components/badge/Badge/Badge.html
 create mode 100644 .design-sync/ds-bundle/components/badge/Badge/Badge.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/button/Button/Button.d.ts
 create mode 100644 .design-sync/ds-bundle/components/button/Button/Button.html
 create mode 100644 .design-sync/ds-bundle/components/button/Button/Button.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/calendar/Calendar/Calendar.d.ts
 create mode 100644 .design-sync/ds-bundle/components/calendar/Calendar/Calendar.html
 create mode 100644 .design-sync/ds-bundle/components/calendar/Calendar/Calendar.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/card/Card/Card.d.ts
 create mode 100644 .design-sync/ds-bundle/components/card/Card/Card.html
 create mode 100644 .design-sync/ds-bundle/components/card/Card/Card.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.d.ts
 create mode 100644 .design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.html
 create mode 100644 .design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.d.ts
 create mode 100644 .design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.html
 create mode 100644 .design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.d.ts
 create mode 100644 .design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.html
 create mode 100644 .design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.d.ts
 create mode 100644 .design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.html
 create mode 100644 .design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/dialog/Dialog/Dialog.d.ts
 create mode 100644 .design-sync/ds-bundle/components/dialog/Dialog/Dialog.html
 create mode 100644 .design-sync/ds-bundle/components/dialog/Dialog/Dialog.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/drawer/Drawer/Drawer.d.ts
 create mode 100644 .design-sync/ds-bundle/components/drawer/Drawer/Drawer.html
 create mode 100644 .design-sync/ds-bundle/components/drawer/Drawer/Drawer.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.d.ts
 create mode 100644 .design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.html
 create mode 100644 .design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/input/Input/Input.d.ts
 create mode 100644 .design-sync/ds-bundle/components/input/Input/Input.html
 create mode 100644 .design-sync/ds-bundle/components/input/Input/Input.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/label/Label/Label.d.ts
 create mode 100644 .design-sync/ds-bundle/components/label/Label/Label.html
 create mode 100644 .design-sync/ds-bundle/components/label/Label/Label.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.d.ts
 create mode 100644 .design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.html
 create mode 100644 .design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/pagination/Pagination/Pagination.d.ts
 create mode 100644 .design-sync/ds-bundle/components/pagination/Pagination/Pagination.html
 create mode 100644 .design-sync/ds-bundle/components/pagination/Pagination/Pagination.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/popover/Popover/Popover.d.ts
 create mode 100644 .design-sync/ds-bundle/components/popover/Popover/Popover.html
 create mode 100644 .design-sync/ds-bundle/components/popover/Popover/Popover.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/progress/Progress/Progress.d.ts
 create mode 100644 .design-sync/ds-bundle/components/progress/Progress/Progress.html
 create mode 100644 .design-sync/ds-bundle/components/progress/Progress/Progress.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.d.ts
 create mode 100644 .design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.html
 create mode 100644 .design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/select/Select/Select.d.ts
 create mode 100644 .design-sync/ds-bundle/components/select/Select/Select.html
 create mode 100644 .design-sync/ds-bundle/components/select/Select/Select.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.d.ts
 create mode 100644 .design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.html
 create mode 100644 .design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/sonner/Sonner/Sonner.d.ts
 create mode 100644 .design-sync/ds-bundle/components/sonner/Sonner/Sonner.html
 create mode 100644 .design-sync/ds-bundle/components/sonner/Sonner/Sonner.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/switch/Switch/Switch.d.ts
 create mode 100644 .design-sync/ds-bundle/components/switch/Switch/Switch.html
 create mode 100644 .design-sync/ds-bundle/components/switch/Switch/Switch.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/table/Table/Table.d.ts
 create mode 100644 .design-sync/ds-bundle/components/table/Table/Table.html
 create mode 100644 .design-sync/ds-bundle/components/table/Table/Table.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/tabs/Tabs/Tabs.d.ts
 create mode 100644 .design-sync/ds-bundle/components/tabs/Tabs/Tabs.html
 create mode 100644 .design-sync/ds-bundle/components/tabs/Tabs/Tabs.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/textarea/Textarea/Textarea.d.ts
 create mode 100644 .design-sync/ds-bundle/components/textarea/Textarea/Textarea.html
 create mode 100644 .design-sync/ds-bundle/components/textarea/Textarea/Textarea.prompt.md
 create mode 100644 .design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.d.ts
 create mode 100644 .design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.html
 create mode 100644 .design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.prompt.md
 create mode 100644 .design-sync/ds-bundle/styles.css
 create mode 100644 .design-sync/ds-bundle/tokens/colors.json
 create mode 100644 .design-sync/ds-bundle/tokens/radius.json
 create mode 100644 .design-sync/ds-bundle/tokens/typography.json

diff --git a/.design-sync/EXTRACTION_SPEC.md b/.design-sync/EXTRACTION_SPEC.md
new file mode 100644
index 000000000..acdac1859
--- /dev/null
+++ b/.design-sync/EXTRACTION_SPEC.md
@@ -0,0 +1,73 @@
+# Extraction spec for design-sync subagents
+
+You extract a **framework-agnostic** spec of shadcn-vue components for upload to claude.ai/design.
+The design tool renders React, so we DO NOT ship runnable component code — only contracts, docs, and a
+discoverable preview card. Everything you write must be derived by **reading** the real source under
+`/home/corrin/src/docketworks/frontend/src/components/ui/<group>/` (the `.vue` files + `index.ts`).
+Do not invent props, variants, or parts — read them from `defineProps`, the cva config in `index.ts`,
+and the reka-ui primitive each part wraps.
+
+## For each assigned group, write THREE files
+
+Output dir: `/home/corrin/src/docketworks/.design-sync/ds-bundle/components/<group>/<Name>/`
+where `<Name>` is the PascalCase group name (e.g. `dropdown-menu` -> `DropdownMenu`, `button` -> `Button`).
+
+### 1. `<Name>.d.ts` — the API contract
+- A TypeScript declaration for the component (and every exported sub-component/part).
+- Export a `<Name>Props` interface (and per-part `XProps` interfaces) with the REAL prop names and types
+  read from each `.vue`'s `defineProps`/`withDefaults`. Resolve cva `VariantProps` into literal unions
+  (e.g. `variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'`).
+- Include `class?: string` where the component forwards a class via `cn()`.
+- Note slots in a JSDoc comment per component (`@slot default`, named slots if any).
+- Re-export the cva helper type if one exists (e.g. `export type ButtonVariants = ...`).
+- Keep it pure declarations — no implementation.
+
+### 2. `<Name>.prompt.md` — usage reference for the design agent
+Sections, terse and concrete:
+- **`# <Name>`** one-line description + when to use it.
+- **Parts** — bullet list of the exported components from `index.ts` and what each is for.
+- **Props** — the key props/variants/sizes with their literal values and defaults (from `defaultVariants`).
+- **Usage** — ONE minimal composition example using the REAL import (`import { ... } from '@/components/ui/<group>'`)
+  and the REAL component/part names and slot structure. Vue SFC `<template>` snippet is fine — it documents
+  composition; the agent translates intent, not literal code.
+- **Notes** — gotchas: which reka-ui primitive backs it, controlled-vs-uncontrolled (`v-model`), required wrappers
+  (e.g. Trigger must be inside Root), accessibility behaviors. Only what you can verify from source.
+
+### 3. `<Name>.html` — discoverable preview card
+- **First line MUST be exactly:** `<!-- @dsCard group="<Group>" -->` where `<Group>` is the category you were
+  assigned (e.g. `Forms`, `Overlays`, `Display`, `Data & Navigation`, `Date & Time`).
+- A self-contained HTML fragment that renders a faithful static preview using the **real design tokens**.
+  Paste the token `:root` block below into a `<style>` so the card renders standalone (do NOT rely on an
+  external stylesheet being injected). Use the token CSS variables (`var(--primary)`, `var(--radius)`, etc.)
+  and the component's real geometry (heights/padding read from the cva size classes) so the preview looks right.
+- Show the component title, its main variants/sizes, and a representative instance. Keep it compact
+  (a card ~360px wide). This is a human-facing picker thumbnail, not a functional component.
+
+## Token `:root` block to embed in every card's `<style>`
+
+```css
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+```
+
+Radius scale: `--radius-sm: calc(var(--radius) - 4px)`, `-md: calc(var(--radius) - 2px)`, `-lg: var(--radius)`,
+`-xl: calc(var(--radius) + 4px)`. Default control height is `h-9` (2.25rem); sm `h-8`; lg `h-10`.
+
+## Rules
+- Read before you write. Never guess a prop or variant — open the file.
+- shadcn-vue groups bundle parts (Root/Trigger/Content/etc.). Document the GROUP as one component with parts.
+- If a group has no variants (e.g. `input`), say so; don't fabricate a variant axis.
+- Do not edit anything under `frontend/`. Write only under `.design-sync/ds-bundle/`.
+- Report back: a one-line-per-group summary of parts + variants found, and any anomaly. Keep file CONTENT out
+  of your reply — you wrote it to disk; just summarize.
diff --git a/.design-sync/NOTES.md b/.design-sync/NOTES.md
new file mode 100644
index 000000000..60b5c7522
--- /dev/null
+++ b/.design-sync/NOTES.md
@@ -0,0 +1,28 @@
+# design-sync notes
+
+## This is a manual, off-script extraction
+The repo (`frontend/`) is a **private application**, not a publishable component library — there is no
+library `dist/`, no Storybook, and the components are **Vue** (reka-ui). Claude Design renders **React**,
+so the standard converter (`package-build.mjs`) does not apply. Per user direction, we do NOT build an
+isolated Vite lib and do NOT stub-and-render-verify (couplings in `ui/` are minimal: Pinia is cache-only,
+all API access via the generated OpenAPI client).
+
+**Deliverable = framework-agnostic only:** `styles.css` + `tokens/`, per-component `.d.ts` + `.prompt.md`
++ a self-contained preview `.html` card, and a `conventions.md` header. **No `_ds_bundle.js`.**
+
+## Source of truth
+- Tokens: `frontend/src/assets/main.css` (`@theme inline` + `:root` + `.dark`, oklch).
+- Components: `frontend/src/components/ui/<group>/` — 28 groups (one standalone `LoadingState.vue`).
+- `cn()` = `frontend/src/lib/utils.ts`; cva only in `button`, `alert`, `badge`.
+
+## Re-sync procedure (manual)
+Re-run the extraction by re-reading `frontend/src/components/ui/` and rebuilding `.design-sync/ds-bundle/`.
+There is **no `_ds_sync.json` anchor** (the converter's hashing recipe doesn't fit this layout), so a
+re-sync re-extracts everything — correct for this flow. The build dir is regenerable; not committed.
+
+## Gotchas found during extraction
+- `LoadingState` uses hard-coded grays/blue, not design tokens.
+- `Drawer` is vaul-vue, not reka-ui. `Pagination` and `Collapsible` are custom (no upstream parts;
+  Collapsible has no Trigger part).
+- `Sonner` re-exports only `Toaster`; `toast()` comes straight from `vue-sonner`.
+- `sonner` group's component dir is named `Sonner` (PascalCase of the group), though the export is `Toaster`.
diff --git a/.design-sync/config.json b/.design-sync/config.json
new file mode 100644
index 000000000..b87385e6c
--- /dev/null
+++ b/.design-sync/config.json
@@ -0,0 +1,9 @@
+{
+  "projectId": "3511bfb4-deb6-409a-86ad-5f99e5382b32",
+  "pkg": "frontend",
+  "shape": "package",
+  "mode": "tokens-and-specs-only",
+  "note": "Vue (reka-ui) component kit. Claude Design renders React, so no _ds_bundle.js is produced. We extract framework-agnostic artifacts only: oklch token system, styles.css, per-component prop/variant/slot specs (.d.ts + .prompt.md), and a conventions header. Extraction is read-only from frontend/src/components/ui/ — no isolated lib build, no stub-and-render verification (per user direction: couplings are minimal; Pinia is cache-only, all API via the generated OpenAPI client).",
+  "source": "frontend/src/components/ui",
+  "readmeHeader": ".design-sync/conventions.md"
+}
diff --git a/.design-sync/conventions.md b/.design-sync/conventions.md
new file mode 100644
index 000000000..da5825d0b
--- /dev/null
+++ b/.design-sync/conventions.md
@@ -0,0 +1,72 @@
+# Docketworks Design System
+
+A **shadcn-vue** kit (new-york style, slate base) on **Tailwind v4**. The components are authored in
+Vue (reka-ui primitives); this design system ships their **design language and API contracts**, not a
+runnable bundle. Build on-brand UI by using the token vocabulary and idiom below, and read each
+component's spec for its parts and props.
+
+## Setup
+
+- Load `styles.css` — it defines every token as a CSS custom property on `:root` (light) and `.dark`
+  (dark), and, for Tailwind v4 pipelines, an `@theme inline` block that generates the matching utilities.
+- **Dark mode** is class-based: add `class="dark"` to a root element. There is no media-query auto-switch.
+- Font is **Inter** with `font-feature-settings: 'cv11','ss01'`. Default body size 15px.
+
+## The styling idiom — Tailwind utilities bound to semantic tokens
+
+Style with Tailwind utility classes whose color comes from **semantic tokens**, never raw hex. Every
+token below exists as `bg-<token>`, `text-<token>`, and `border-<token>`:
+
+| Token | Use for |
+|---|---|
+| `background` / `foreground` | page surface + default text |
+| `card` / `card-foreground` | raised panels |
+| `popover` / `popover-foreground` | floating surfaces (menus, popovers, tooltips) |
+| `primary` / `primary-foreground` | primary actions, emphasis |
+| `secondary` / `secondary-foreground` | secondary solid controls |
+| `muted` / `muted-foreground` | subdued backgrounds + secondary text |
+| `accent` / `accent-foreground` | hover/active surface |
+| `destructive` | danger actions, errors |
+| `border` / `input` / `ring` | hairlines, field borders, focus rings |
+| `chart-1`..`chart-5`, `sidebar*` | data viz, app sidebar |
+
+Pair a base with its `-foreground` (e.g. `bg-primary text-primary-foreground`). For opacity use the
+slash modifier (`bg-primary/90`, `ring-ring/50`). A fixed `gray/green/yellow/red/blue/slate` hex palette
+(see `tokens/colors.json`) is available for status accents only.
+
+Radius: `rounded-sm | -md | -lg | -xl`, all derived from one `--radius` base (0.625rem). Buttons/inputs
+use `rounded-md`; cards/popovers `rounded-lg`/`xl`.
+
+### Two helpers the kit relies on
+- **`cn(...)`** = `twMerge(clsx(...))` — merge/override classes safely. Every component forwards an optional
+  `class` prop through `cn()`, so consumer classes win over defaults.
+- **`cva`** (class-variance-authority) — declares variant→class maps. In this kit it is used sparingly:
+  `Button` (`buttonVariants`), `Alert`, and `Badge` have real cva variant axes; most components have **no
+  variant axis** and are styled purely by composition + `class`.
+
+## Where the truth lives
+
+- `styles.css` and `tokens/*.json` — the token system. Read before choosing any color/radius.
+- `components/<group>/<Name>/<Name>.prompt.md` — per-component usage, parts, props, gotchas.
+- `components/<group>/<Name>/<Name>.d.ts` — the typed API contract (props, variant unions, slots).
+
+## One idiomatic snippet
+
+```html
+<!-- A card with a primary action, using only semantic tokens -->
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
+  <h3 class="text-sm font-semibold">Job #J-1042</h3>
+  <p class="text-sm text-muted-foreground mt-1">Awaiting quote approval</p>
+  <div class="mt-4 flex gap-2">
+    <button class="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm
+                   font-medium text-primary-foreground hover:bg-primary/90">Approve</button>
+    <button class="inline-flex h-9 items-center rounded-md border bg-background px-4 text-sm
+                   font-medium hover:bg-accent hover:text-accent-foreground">Dismiss</button>
+  </div>
+</div>
+```
+
+Available components (read the per-component specs for parts/props): Button, Input, Textarea, Label,
+Checkbox, Switch, Select, Dialog, Drawer, Popover, Tooltip, DropdownMenu, Alert, Badge, Avatar, Card,
+Skeleton, Progress, Sonner (toaster), LoadingState, Table, Tabs, Pagination, Collapsible, Calendar,
+RangeCalendar, DatePicker, CustomDatePicker.
diff --git a/.design-sync/ds-bundle/README.md b/.design-sync/ds-bundle/README.md
new file mode 100644
index 000000000..bb8bf5bb1
--- /dev/null
+++ b/.design-sync/ds-bundle/README.md
@@ -0,0 +1,120 @@
+# Docketworks Design System
+
+A **shadcn-vue** kit (new-york style, slate base) on **Tailwind v4**. The components are authored in
+Vue (reka-ui primitives); this design system ships their **design language and API contracts**, not a
+runnable bundle. Build on-brand UI by using the token vocabulary and idiom below, and read each
+component's spec for its parts and props.
+
+## Setup
+
+- Load `styles.css` — it defines every token as a CSS custom property on `:root` (light) and `.dark`
+  (dark), and, for Tailwind v4 pipelines, an `@theme inline` block that generates the matching utilities.
+- **Dark mode** is class-based: add `class="dark"` to a root element. There is no media-query auto-switch.
+- Font is **Inter** with `font-feature-settings: 'cv11','ss01'`. Default body size 15px.
+
+## The styling idiom — Tailwind utilities bound to semantic tokens
+
+Style with Tailwind utility classes whose color comes from **semantic tokens**, never raw hex. Every
+token below exists as `bg-<token>`, `text-<token>`, and `border-<token>`:
+
+| Token | Use for |
+|---|---|
+| `background` / `foreground` | page surface + default text |
+| `card` / `card-foreground` | raised panels |
+| `popover` / `popover-foreground` | floating surfaces (menus, popovers, tooltips) |
+| `primary` / `primary-foreground` | primary actions, emphasis |
+| `secondary` / `secondary-foreground` | secondary solid controls |
+| `muted` / `muted-foreground` | subdued backgrounds + secondary text |
+| `accent` / `accent-foreground` | hover/active surface |
+| `destructive` | danger actions, errors |
+| `border` / `input` / `ring` | hairlines, field borders, focus rings |
+| `chart-1`..`chart-5`, `sidebar*` | data viz, app sidebar |
+
+Pair a base with its `-foreground` (e.g. `bg-primary text-primary-foreground`). For opacity use the
+slash modifier (`bg-primary/90`, `ring-ring/50`). A fixed `gray/green/yellow/red/blue/slate` hex palette
+(see `tokens/colors.json`) is available for status accents only.
+
+Radius: `rounded-sm | -md | -lg | -xl`, all derived from one `--radius` base (0.625rem). Buttons/inputs
+use `rounded-md`; cards/popovers `rounded-lg`/`xl`.
+
+### Two helpers the kit relies on
+- **`cn(...)`** = `twMerge(clsx(...))` — merge/override classes safely. Every component forwards an optional
+  `class` prop through `cn()`, so consumer classes win over defaults.
+- **`cva`** (class-variance-authority) — declares variant→class maps. In this kit it is used sparingly:
+  `Button` (`buttonVariants`), `Alert`, and `Badge` have real cva variant axes; most components have **no
+  variant axis** and are styled purely by composition + `class`.
+
+## Where the truth lives
+
+- `styles.css` and `tokens/*.json` — the token system. Read before choosing any color/radius.
+- `components/<group>/<Name>/<Name>.prompt.md` — per-component usage, parts, props, gotchas.
+- `components/<group>/<Name>/<Name>.d.ts` — the typed API contract (props, variant unions, slots).
+
+## One idiomatic snippet
+
+```html
+<!-- A card with a primary action, using only semantic tokens -->
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
+  <h3 class="text-sm font-semibold">Job #J-1042</h3>
+  <p class="text-sm text-muted-foreground mt-1">Awaiting quote approval</p>
+  <div class="mt-4 flex gap-2">
+    <button class="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm
+                   font-medium text-primary-foreground hover:bg-primary/90">Approve</button>
+    <button class="inline-flex h-9 items-center rounded-md border bg-background px-4 text-sm
+                   font-medium hover:bg-accent hover:text-accent-foreground">Dismiss</button>
+  </div>
+</div>
+```
+
+Available components (read the per-component specs for parts/props): Button, Input, Textarea, Label,
+Checkbox, Switch, Select, Dialog, Drawer, Popover, Tooltip, DropdownMenu, Alert, Badge, Avatar, Card,
+Skeleton, Progress, Sonner (toaster), LoadingState, Table, Tabs, Pagination, Collapsible, Calendar,
+RangeCalendar, DatePicker, CustomDatePicker.
+
+---
+
+## Component index
+
+Each component ships a typed contract (`.d.ts`), a usage reference (`.prompt.md`), and a preview card
+(`.html`) under `components/<group>/<Name>/`. Most are reka-ui primitives; exceptions noted.
+
+### Forms
+- **Button** — primary action control. cva variants (default/destructive/outline/secondary/ghost/link) × sizes (default/sm/lg/icon). Polymorphic via `as`/`asChild`.
+- **Input** — native text field, fixed `h-9`, `v-model`. No variants.
+- **Textarea** — auto-grow native textarea (`field-sizing-content`), `min-h-16`. No variants.
+- **Label** — reka-ui label, disabled-aware via peer/group. No variants.
+- **Checkbox** — reka-ui, tri-state (`boolean | 'indeterminate'`). No variants.
+- **Switch** — reka-ui toggle, optional `thumb` slot. No variants.
+- **Select** — 11 parts (Trigger/Value/Content/Group/Label/Item/Separator/scroll buttons). Trigger size axis (`default`/`sm`).
+
+### Overlays
+- **Dialog** — modal; parts incl. Content, ScrollContent, Header/Footer/Title/Description, Close. Content auto-portals + ships its X.
+- **Drawer** — **vaul-vue** (not reka-ui); placement via root `direction` (default bottom); `shouldScaleBackground` default true.
+- **Popover** — Trigger/Anchor/Content; Content `align='center'`, `sideOffset=4`.
+- **Tooltip** — Provider/Trigger/Content; `delayDuration` default **0**, built-in arrow.
+- **DropdownMenu** — full menu set incl. Checkbox/Radio items, Sub-menus, Shortcut. Item `variant` default/destructive + `inset`.
+
+### Display
+- **Alert** — cva variant default/destructive; leading svg auto-positioned.
+- **Badge** — cva variant default/secondary/destructive/outline; polymorphic.
+- **Avatar** — Avatar/AvatarImage/AvatarFallback; size via `class` (default `size-8`).
+- **Card** — Card + Header/Title/Description/Action/Content/Footer. Horizontal padding lives on inner parts.
+- **Skeleton** — pulse placeholder, sized via `class`.
+- **Progress** — reka-ui, `modelValue` 0–100, determinate.
+- **Sonner** — `Toaster` host wrapping vue-sonner; `toast()` imported directly from `vue-sonner` (not re-exported).
+- **LoadingState** — bespoke tri-state (loading/empty/content) wrapper; slots default/empty-icon/empty-actions. Uses some hard-coded grays (not tokens).
+
+### Data & Navigation
+- **Table** — native table elements; 9 parts incl. TableEmpty (`colspan`). Selected-row styling via `data-[state=selected]`. `valueUpdater` helper for @tanstack/vue-table.
+- **Tabs** — reka-ui; List/Trigger/Content; `v-model`, `orientation`, `activationMode`.
+- **Pagination** — custom (not reka-ui): ghost Buttons + chevrons, windowed (max 10), `page`/`total`, emits `update:page`.
+- **Collapsible** — custom provide/inject; Collapsible + CollapsibleContent; **no Trigger part** (wire your own); `v-model:open`.
+
+### Date & Time
+- **Calendar** — reka-ui CalendarRoot; 12 parts (Header/Heading/Prev/Next, Grid*, HeadCell, Cell, CellTrigger). v-model `DateValue` (`@internationalized/date`).
+- **RangeCalendar** — reka-ui RangeCalendarRoot; mirrors Calendar; v-model range `{ start, end }`.
+- **DatePicker** — composed Button + Popover + Calendar; v-model ISO string `'YYYY-MM-DD' | null` (`en-NZ` formatting).
+- **CustomDatePicker** — two native `<input type="date">`; v-model `DateRange { from?, to? }` ISO strings. Not a calendar.
+
+> **Note on rendering:** these are Vue components. Claude Design renders React, so no runnable component
+> bundle is shipped — use the tokens + idiom above to build on-brand, and the per-component specs for API shape.
diff --git a/.design-sync/ds-bundle/components/alert/Alert/Alert.d.ts b/.design-sync/ds-bundle/components/alert/Alert/Alert.d.ts
new file mode 100644
index 000000000..8ff55ea97
--- /dev/null
+++ b/.design-sync/ds-bundle/components/alert/Alert/Alert.d.ts
@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority'
+
+declare const alertVariants: (props?: {
+  variant?: 'default' | 'destructive'
+}) => string
+
+export type AlertVariants = VariantProps<typeof alertVariants>
+
+export interface AlertProps {
+  /** Visual style. @default 'default' */
+  variant?: 'default' | 'destructive'
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+
+/**
+ * Alert — a static callout box for inline messages.
+ * Renders a <div> with role-less alert styling; an optional leading <svg>
+ * is auto-positioned (absolute, top-left) and its sibling text is indented.
+ *
+ * @slot default — alert body (title, description, optional leading icon).
+ */
+export declare const Alert: import('vue').DefineComponent<AlertProps>
diff --git a/.design-sync/ds-bundle/components/alert/Alert/Alert.html b/.design-sync/ds-bundle/components/alert/Alert/Alert.html
new file mode 100644
index 000000000..23524ca1d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/alert/Alert/Alert.html
@@ -0,0 +1,36 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .alert{position:relative;width:100%;border-radius:var(--radius);border:1px solid var(--border);padding:16px}
+  .alert .title{font-weight:500;line-height:1;margin:0 0 4px 0;font-size:14px}
+  .alert .desc{font-size:13px}
+  .alert.default{background:var(--background);color:var(--foreground)}
+  .alert.destructive{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);color:var(--destructive)}
+</style>
+<div class="dscard">
+  <h4>Alert</h4>
+  <div class="sub">Static inline callout · variants: default, destructive</div>
+  <div class="alert default">
+    <p class="title">Update available</p>
+    <p class="desc">A new version is ready to install.</p>
+  </div>
+  <div class="alert destructive">
+    <p class="title">Something went wrong</p>
+    <p class="desc">Your changes could not be saved.</p>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/alert/Alert/Alert.prompt.md b/.design-sync/ds-bundle/components/alert/Alert/Alert.prompt.md
new file mode 100644
index 000000000..fc6e2e881
--- /dev/null
+++ b/.design-sync/ds-bundle/components/alert/Alert/Alert.prompt.md
@@ -0,0 +1,39 @@
+# Alert
+
+A static callout box for inline, non-blocking messages (info, warnings, errors). Use it to surface contextual feedback within page content — not for transient toasts (use Sonner) and not modal (use Dialog).
+
+## Parts
+
+- **Alert** — the only exported part. A `<div>` container. Compose the title/description as child markup. A leading `<svg>` placed inside is auto-positioned top-left (`absolute left-4 top-4`) and following content is indented (`pl-7`).
+
+## Props
+
+- `variant?: 'default' | 'destructive'` — default `'default'`.
+  - `default`: `bg-background text-foreground`.
+  - `destructive`: destructive-colored border + text; tints any leading icon destructive.
+- `class?: string` — extra classes (merged with `cn()`).
+
+Geometry: `w-full rounded-lg border p-4`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Alert } from '@/components/ui/alert'
+import { AlertCircle } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Alert variant="destructive">
+    <AlertCircle />
+    <h5 class="mb-1 font-medium leading-none tracking-tight">Heads up</h5>
+    <div class="text-sm">Something needs your attention.</div>
+  </Alert>
+</template>
+```
+
+## Notes
+
+- Plain `<div>`, no reka-ui primitive. No title/description sub-components in this kit — author them as child elements.
+- A direct child `<svg>` is treated as the alert icon (absolute-positioned); keep it as the first child.
+- Forwards unknown attributes onto the root div via `v-bind`.
diff --git a/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.d.ts b/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.d.ts
new file mode 100644
index 000000000..ab110366f
--- /dev/null
+++ b/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.d.ts
@@ -0,0 +1,36 @@
+import type { AvatarFallbackProps, AvatarImageProps } from 'reka-ui'
+
+export interface AvatarProps {
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+
+/**
+ * Avatar — root container (reka-ui AvatarRoot).
+ * Default geometry: size-8 (2rem) circle, overflow-hidden.
+ * @slot default — expects <AvatarImage> and/or <AvatarFallback>.
+ */
+export declare const Avatar: import('vue').DefineComponent<AvatarProps>
+
+/**
+ * AvatarImage — the photo (reka-ui AvatarImage).
+ * Hidden until the src loads; shows AvatarFallback meanwhile/on error.
+ */
+export interface AvatarImageProps_ extends AvatarImageProps {
+  /** Image source URL (reka-ui). */
+  src?: string
+}
+export declare const AvatarImage: import('vue').DefineComponent<AvatarImageProps>
+
+/**
+ * AvatarFallback — shown while the image is loading or has failed
+ * (reka-ui AvatarFallback). Typically initials.
+ * @slot default — fallback content (initials / icon).
+ */
+export interface AvatarFallbackProps_ extends AvatarFallbackProps {
+  /** Delay (ms) before fallback renders, to avoid flash (reka-ui). */
+  delayMs?: number
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+export declare const AvatarFallback: import('vue').DefineComponent<AvatarFallbackProps & { class?: string }>
diff --git a/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.html b/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.html
new file mode 100644
index 000000000..701c5bdd2
--- /dev/null
+++ b/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.html
@@ -0,0 +1,35 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .row{display:flex;gap:12px;align-items:center}
+  .avatar{position:relative;display:flex;flex-shrink:0;overflow:hidden;border-radius:9999px;align-items:center;justify-content:center;background:var(--muted);color:var(--muted-foreground);font-size:13px;font-weight:500}
+  .avatar.sm{width:24px;height:24px;font-size:11px}
+  .avatar.md{width:32px;height:32px}
+  .avatar.lg{width:40px;height:40px;font-size:15px}
+  .avatar.img{background:linear-gradient(135deg,var(--primary),var(--accent-foreground))}
+</style>
+<div class="dscard">
+  <h4>Avatar</h4>
+  <div class="sub">Circular image + initials fallback · default size 32px</div>
+  <div class="row">
+    <div class="avatar sm">AB</div>
+    <div class="avatar md">JD</div>
+    <div class="avatar lg">CL</div>
+    <div class="avatar md img"></div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.prompt.md b/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.prompt.md
new file mode 100644
index 000000000..446efe190
--- /dev/null
+++ b/.design-sync/ds-bundle/components/avatar/Avatar/Avatar.prompt.md
@@ -0,0 +1,38 @@
+# Avatar
+
+A circular user/entity image with an initials fallback. Use for profile photos, staff lists, comment authors.
+
+## Parts
+
+- **Avatar** — root container (`AvatarRoot`). Fixed circle, `size-8` (32px), `overflow-hidden rounded-full`. Resize via `class` (e.g. `class="size-10"`).
+- **AvatarImage** — the `<img>` (`AvatarImage`). `aspect-square size-full`. Hidden until `src` loads.
+- **AvatarFallback** — initials/icon shown while loading or on error (`AvatarFallback`). `bg-muted`, centered, full-size circle.
+
+## Props
+
+- **Avatar**: `class?: string`.
+- **AvatarImage**: `src?: string` (+ reka-ui AvatarImageProps); no `class` prop forwarded.
+- **AvatarFallback**: `delayMs?: number` (delay before showing, avoids flash), `class?: string`.
+
+No variant/size axes — geometry is set via Tailwind `class`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+</script>
+
+<template>
+  <Avatar>
+    <AvatarImage src="/staff/jane.jpg" alt="Jane Doe" />
+    <AvatarFallback>JD</AvatarFallback>
+  </Avatar>
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `AvatarRoot` / `AvatarImage` / `AvatarFallback`. Fallback visibility is managed by the primitive based on image load state.
+- `AvatarImage` and `AvatarFallback` must be inside `Avatar`.
+- Default size is 32px; override on the root with `class`.
diff --git a/.design-sync/ds-bundle/components/badge/Badge/Badge.d.ts b/.design-sync/ds-bundle/components/badge/Badge/Badge.d.ts
new file mode 100644
index 000000000..57a0df672
--- /dev/null
+++ b/.design-sync/ds-bundle/components/badge/Badge/Badge.d.ts
@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { PrimitiveProps } from 'reka-ui'
+
+declare const badgeVariants: (props?: {
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
+}) => string
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
+
+export interface BadgeProps extends PrimitiveProps {
+  /** Visual style. @default 'default' */
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  /** Extra classes merged via cn(). */
+  class?: string
+  /** PrimitiveProps: render as child element instead of <span>. @default false */
+  asChild?: boolean
+  /** PrimitiveProps: element/component to render as. */
+  as?: PrimitiveProps['as']
+}
+
+/**
+ * Badge — a small inline status/label pill.
+ * Renders a reka-ui <Primitive> (default tag is the kit's <span> wrapper).
+ *
+ * @slot default — badge label; a leading <svg> is sized to 12px (size-3).
+ */
+export declare const Badge: import('vue').DefineComponent<BadgeProps>
diff --git a/.design-sync/ds-bundle/components/badge/Badge/Badge.html b/.design-sync/ds-bundle/components/badge/Badge/Badge.html
new file mode 100644
index 000000000..010174ae8
--- /dev/null
+++ b/.design-sync/ds-bundle/components/badge/Badge/Badge.html
@@ -0,0 +1,35 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;--radius-md:calc(var(--radius) - 2px);
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+  .badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid transparent;padding:2px 8px;font-size:12px;font-weight:500;width:fit-content;white-space:nowrap}
+  .badge.default{background:var(--primary);color:var(--primary-foreground)}
+  .badge.secondary{background:var(--secondary);color:var(--secondary-foreground)}
+  .badge.destructive{background:var(--destructive);color:#fff}
+  .badge.outline{color:var(--foreground);border-color:var(--border)}
+</style>
+<div class="dscard">
+  <h4>Badge</h4>
+  <div class="sub">Status pill · variants: default, secondary, destructive, outline</div>
+  <div class="row">
+    <span class="badge default">Default</span>
+    <span class="badge secondary">Secondary</span>
+    <span class="badge destructive">Destructive</span>
+    <span class="badge outline">Outline</span>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/badge/Badge/Badge.prompt.md b/.design-sync/ds-bundle/components/badge/Badge/Badge.prompt.md
new file mode 100644
index 000000000..b782df86d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/badge/Badge/Badge.prompt.md
@@ -0,0 +1,37 @@
+# Badge
+
+A small inline pill for status, counts, or labels (e.g. "Active", "3", "Draft"). Use beside text/headings, in table cells, or on cards — not for interactive buttons.
+
+## Parts
+
+- **Badge** — the only exported part. Renders a reka-ui `<Primitive>` wrapped in a `<span class="app-badge">`. Pass `as` / `asChild` to render as a link (`<a>`) — hover styles for anchors are built in (`[a&]:hover:...`).
+
+## Props
+
+- `variant?: 'default' | 'secondary' | 'destructive' | 'outline'` — default `'default'`.
+  - `default`: `bg-primary text-primary-foreground`.
+  - `secondary`: `bg-secondary text-secondary-foreground`.
+  - `destructive`: `bg-destructive text-white`.
+  - `outline`: transparent, `text-foreground`, bordered; hover tints accent (anchors only).
+- `as?` / `asChild?` — reka-ui PrimitiveProps for polymorphic rendering.
+- `class?: string` — extra classes (merged with `cn()`).
+
+Geometry: `inline-flex rounded-md border px-2 py-0.5 text-xs font-medium w-fit`; leading icons are `size-3` with `gap-1`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Badge } from '@/components/ui/badge'
+</script>
+
+<template>
+  <Badge variant="secondary">In progress</Badge>
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `Primitive`; default element is a `<span>`.
+- For a clickable badge, use `as="a"` (or `asChild` with a router-link) so the anchor hover variants apply.
+- Icon-only or icon+text supported; SVGs are auto-sized to 12px and non-interactive.
diff --git a/.design-sync/ds-bundle/components/button/Button/Button.d.ts b/.design-sync/ds-bundle/components/button/Button/Button.d.ts
new file mode 100644
index 000000000..ae2c4d400
--- /dev/null
+++ b/.design-sync/ds-bundle/components/button/Button/Button.d.ts
@@ -0,0 +1,35 @@
+import type { PrimitiveProps } from 'reka-ui'
+
+/**
+ * Button — the primary action control.
+ * Backed by reka-ui `Primitive`, so it is polymorphic: renders a `<button>` by
+ * default, or any element via `as` / merges onto a child via `asChild`.
+ *
+ * @slot default - button label / icon content. A leading or trailing `<svg>` is
+ *   auto-sized to `size-4` and given `gap-2` spacing.
+ */
+export interface ButtonProps extends /* @vue-ignore */ PrimitiveProps {
+  /** Visual style. @default 'default' */
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  /** Control height / padding. @default 'default' */
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  /** Extra classes, merged over the variant classes via `cn()` (tailwind-merge). */
+  class?: string
+  /** Polymorphic element to render. @default 'button' */
+  as?: PrimitiveProps['as']
+  /** Merge props/classes onto the single child element instead of rendering a wrapper. */
+  asChild?: boolean
+}
+
+/** cva variant prop shape, for typing helpers that build button-styled elements. */
+export type ButtonVariants = {
+  variant?: ButtonProps['variant']
+  size?: ButtonProps['size']
+}
+
+/** The cva class generator exported alongside the component. */
+export declare const buttonVariants: (props?: ButtonVariants) => string
+
+declare const Button: import('vue').DefineComponent<ButtonProps>
+export { Button }
+export default Button
diff --git a/.design-sync/ds-bundle/components/button/Button/Button.html b/.design-sync/ds-bundle/components/button/Button/Button.html
new file mode 100644
index 000000000..2e2df4b34
--- /dev/null
+++ b/.design-sync/ds-bundle/components/button/Button/Button.html
@@ -0,0 +1,52 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+    }
+    .ds-card{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+      background:var(--background);color:var(--foreground);padding:20px;width:360px;box-sizing:border-box}
+    .ds-card h3{font-size:13px;font-weight:600;margin:0 0 12px;letter-spacing:.02em;color:var(--foreground)}
+    .ds-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
+    .ds-row:last-child{margin-bottom:0}
+    .b{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
+      border-radius:calc(var(--radius) - 2px);font-size:14px;font-weight:500;height:36px;padding:0 16px;
+      border:1px solid transparent;cursor:pointer;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.05)}
+    .b.sm{height:32px;padding:0 12px;font-size:13px}
+    .b.lg{height:40px;padding:0 24px}
+    .b.icon{width:36px;height:36px;padding:0}
+    .default{background:var(--primary);color:var(--primary-foreground)}
+    .destructive{background:var(--destructive);color:#fff}
+    .outline{background:var(--background);border-color:var(--border);color:var(--foreground)}
+    .secondary{background:var(--secondary);color:var(--secondary-foreground)}
+    .ghost{background:transparent;color:var(--foreground);box-shadow:none}
+    .link{background:transparent;color:var(--primary);box-shadow:none;text-decoration:underline;text-underline-offset:4px}
+    .lbl{font-size:11px;color:oklch(0.554 0.046 257.417);width:64px;flex:none}
+  </style>
+  <h3>Button</h3>
+  <div class="ds-row">
+    <span class="lbl">variants</span>
+    <span class="b default">Default</span>
+    <span class="b secondary">Secondary</span>
+    <span class="b outline">Outline</span>
+  </div>
+  <div class="ds-row">
+    <span class="lbl"></span>
+    <span class="b destructive">Destructive</span>
+    <span class="b ghost">Ghost</span>
+    <span class="b link">Link</span>
+  </div>
+  <div class="ds-row">
+    <span class="lbl">sizes</span>
+    <span class="b default sm">Small</span>
+    <span class="b default">Default</span>
+    <span class="b default lg">Large</span>
+    <span class="b default icon">+</span>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/button/Button/Button.prompt.md b/.design-sync/ds-bundle/components/button/Button/Button.prompt.md
new file mode 100644
index 000000000..6421c02af
--- /dev/null
+++ b/.design-sync/ds-bundle/components/button/Button/Button.prompt.md
@@ -0,0 +1,51 @@
+# Button
+
+The primary action control. Use for any clickable action; pair an icon with text for
+toolbar/inline actions, or use `size="icon"` for icon-only buttons. For link-styled
+navigation, use `variant="link"` (or render an anchor with `as="a"` / `asChild`).
+
+## Parts
+- `Button` — the only export. Also exports `buttonVariants` (the cva class generator),
+  reused elsewhere in the kit (e.g. calendar cells/nav apply `buttonVariants({ variant: 'ghost' })`).
+
+## Props
+- `variant`: `'default'` (solid primary) · `'destructive'` (solid red) · `'outline'`
+  (bordered, transparent bg) · `'secondary'` (muted solid) · `'ghost'` (no bg until hover) ·
+  `'link'` (text + underline). **default `'default'`**.
+- `size`: `'default'` (h-9, px-4) · `'sm'` (h-8, px-3) · `'lg'` (h-10, px-6) · `'icon'`
+  (square size-9). **default `'default'`**.
+- `class`: extra classes; merged over variant classes via `cn()` so you can override safely.
+- `as` / `asChild`: polymorphism from reka-ui `Primitive`. `as="a"` renders an anchor;
+  `asChild` merges button styling onto your own single child element.
+
+## Usage
+```vue
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { Plus } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Button @click="save">Save</Button>
+  <Button variant="outline" size="sm">
+    <Plus /> Add line
+  </Button>
+  <Button variant="destructive">Delete</Button>
+  <Button variant="ghost" size="icon" aria-label="Settings"><Settings /></Button>
+
+  <!-- polymorphic: render as a router link -->
+  <Button as-child variant="link">
+    <RouterLink to="/jobs">View jobs</RouterLink>
+  </Button>
+</template>
+```
+
+## Notes
+- A child `<svg>` is auto-sized to `size-4` (unless it already has a `size-*` class) and
+  pointer-events are disabled on it; `gap-2` spaces icon from text. Icon-only buttons should
+  set `aria-label`.
+- `disabled` dims to 50% opacity and removes pointer events.
+- Focus shows a 3px `ring` using the `--ring` token; `aria-invalid` switches the ring to
+  `--destructive`.
+- Backed by reka-ui `Primitive` — no native `type` default is forced, set `type="button"`
+  inside forms when you don't want submit behavior.
diff --git a/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.d.ts b/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.d.ts
new file mode 100644
index 000000000..d3e1a88e8
--- /dev/null
+++ b/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.d.ts
@@ -0,0 +1,95 @@
+// Calendar — single-date (or multiple) calendar built on reka-ui CalendarRoot.
+// Backed by reka-ui's Calendar primitives; v-model uses @internationalized/date DateValue.
+// The Calendar.vue root composes every part below into a ready-to-use month grid,
+// so most consumers only render <Calendar v-model="..." />. The parts are exported
+// for building a custom calendar layout.
+
+import type { HTMLAttributes } from 'vue'
+import type {
+  CalendarRootProps,
+  CalendarRootEmits,
+  CalendarCellProps,
+  CalendarCellTriggerProps,
+  CalendarGridProps,
+  CalendarGridBodyProps,
+  CalendarGridHeadProps,
+  CalendarGridRowProps,
+  CalendarHeadCellProps,
+  CalendarHeaderProps,
+  CalendarHeadingProps,
+  CalendarNextProps,
+  CalendarPrevProps,
+} from 'reka-ui'
+
+/**
+ * Root calendar. Wraps reka-ui CalendarRoot and renders the full month grid
+ * (header, heading, prev/next, weekday row, day cells).
+ * v-model binds a DateValue (or DateValue[] when `multiple`) from '@internationalized/date'.
+ * Common inherited props: modelValue, placeholder, multiple, disabled, readonly,
+ * minValue, maxValue, isDateDisabled, isDateUnavailable, weekdayFormat,
+ * numberOfMonths, fixedWeeks, initialFocus, locale.
+ * @slot default (forwarded internally to parts)
+ */
+export interface CalendarProps extends /* @vue-ignore */ CalendarRootProps {
+  class?: HTMLAttributes['class']
+}
+export type CalendarEmits = CalendarRootEmits
+
+/** Table cell wrapping a single date. @slot default */
+export interface CalendarCellPropsExt extends /* @vue-ignore */ CalendarCellProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Pressable day button inside a cell. Styled with buttonVariants({ variant: 'ghost' }).
+ *  `as` defaults to 'button'. @slot default */
+export interface CalendarCellTriggerPropsExt extends /* @vue-ignore */ CalendarCellTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+/** One month's <table>. @slot default */
+export interface CalendarGridPropsExt extends /* @vue-ignore */ CalendarGridProps {
+  class?: HTMLAttributes['class']
+}
+/** <tbody> for the day rows. @slot default */
+export interface CalendarGridBodyPropsExt extends /* @vue-ignore */ CalendarGridBodyProps {}
+/** <thead> holding the weekday row. @slot default */
+export interface CalendarGridHeadPropsExt extends /* @vue-ignore */ CalendarGridHeadProps {
+  class?: HTMLAttributes['class']
+}
+/** A week <tr>. @slot default */
+export interface CalendarGridRowPropsExt extends /* @vue-ignore */ CalendarGridRowProps {
+  class?: HTMLAttributes['class']
+}
+/** Weekday label cell (Mo/Tu/...). @slot default */
+export interface CalendarHeadCellPropsExt extends /* @vue-ignore */ CalendarHeadCellProps {
+  class?: HTMLAttributes['class']
+}
+/** Header bar (heading + prev/next). @slot default */
+export interface CalendarHeaderPropsExt extends /* @vue-ignore */ CalendarHeaderProps {
+  class?: HTMLAttributes['class']
+}
+/** Month/year heading text. @slot default exposes { headingValue: string } */
+export interface CalendarHeadingPropsExt extends /* @vue-ignore */ CalendarHeadingProps {
+  class?: HTMLAttributes['class']
+}
+/** Next-month button (outline icon button, ChevronRight default). @slot default */
+export interface CalendarNextButtonPropsExt extends /* @vue-ignore */ CalendarNextProps {
+  class?: HTMLAttributes['class']
+}
+/** Previous-month button (outline icon button, ChevronLeft default). @slot default */
+export interface CalendarPrevButtonPropsExt extends /* @vue-ignore */ CalendarPrevProps {
+  class?: HTMLAttributes['class']
+}
+
+export declare const Calendar: import('vue').DefineComponent<CalendarProps, {}, any>
+export declare const CalendarCell: import('vue').DefineComponent<CalendarCellPropsExt, {}, any>
+export declare const CalendarCellTrigger: import('vue').DefineComponent<CalendarCellTriggerPropsExt, {}, any>
+export declare const CalendarGrid: import('vue').DefineComponent<CalendarGridPropsExt, {}, any>
+export declare const CalendarGridBody: import('vue').DefineComponent<CalendarGridBodyPropsExt, {}, any>
+export declare const CalendarGridHead: import('vue').DefineComponent<CalendarGridHeadPropsExt, {}, any>
+export declare const CalendarGridRow: import('vue').DefineComponent<CalendarGridRowPropsExt, {}, any>
+export declare const CalendarHeadCell: import('vue').DefineComponent<CalendarHeadCellPropsExt, {}, any>
+export declare const CalendarHeader: import('vue').DefineComponent<CalendarHeaderPropsExt, {}, any>
+export declare const CalendarHeading: import('vue').DefineComponent<CalendarHeadingPropsExt, {}, any>
+export declare const CalendarNextButton: import('vue').DefineComponent<CalendarNextButtonPropsExt, {}, any>
+export declare const CalendarPrevButton: import('vue').DefineComponent<CalendarPrevButtonPropsExt, {}, any>
diff --git a/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.html b/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.html
new file mode 100644
index 000000000..a29ef9420
--- /dev/null
+++ b/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.html
@@ -0,0 +1,48 @@
+<!-- @dsCard group="Date & Time" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-cal-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-cal-title{font-size:13px;font-weight:600;color:var(--muted-foreground);margin:0 0 12px;}
+.ds-cal{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:12px;}
+.ds-cal-hdr{display:flex;align-items:center;justify-content:center;position:relative;padding-top:2px;margin-bottom:12px;}
+.ds-cal-heading{font-size:13px;font-weight:500;}
+.ds-nav{position:absolute;top:0;width:28px;height:28px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:transparent;opacity:.5;display:flex;align-items:center;justify-content:center;font-size:13px;}
+.ds-nav.prev{left:0;} .ds-nav.next{right:0;}
+.ds-grid{display:grid;grid-template-columns:repeat(7,32px);gap:0;}
+.ds-wd{height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted-foreground);}
+.ds-day{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:calc(var(--radius) - 2px);}
+.ds-day.muted{color:var(--muted-foreground);}
+.ds-day.today{background:var(--accent);color:var(--accent-foreground);}
+.ds-day.sel{background:var(--primary);color:var(--primary-foreground);}
+</style>
+
+<div class="ds-cal-card">
+  <p class="ds-cal-title">Calendar — single date · reka-ui CalendarRoot</p>
+  <div class="ds-cal">
+    <div class="ds-cal-hdr">
+      <button class="ds-nav prev">‹</button>
+      <span class="ds-cal-heading">June 2026</span>
+      <button class="ds-nav next">›</button>
+    </div>
+    <div class="ds-grid">
+      <div class="ds-wd">Su</div><div class="ds-wd">Mo</div><div class="ds-wd">Tu</div><div class="ds-wd">We</div><div class="ds-wd">Th</div><div class="ds-wd">Fr</div><div class="ds-wd">Sa</div>
+      <div class="ds-day muted">31</div><div class="ds-day">1</div><div class="ds-day">2</div><div class="ds-day">3</div><div class="ds-day">4</div><div class="ds-day">5</div><div class="ds-day">6</div>
+      <div class="ds-day">7</div><div class="ds-day">8</div><div class="ds-day">9</div><div class="ds-day">10</div><div class="ds-day">11</div><div class="ds-day">12</div><div class="ds-day">13</div>
+      <div class="ds-day">14</div><div class="ds-day">15</div><div class="ds-day">16</div><div class="ds-day">17</div><div class="ds-day today">18</div><div class="ds-day">19</div><div class="ds-day">20</div>
+      <div class="ds-day">21</div><div class="ds-day">22</div><div class="ds-day sel">23</div><div class="ds-day">24</div><div class="ds-day">25</div><div class="ds-day">26</div><div class="ds-day">27</div>
+      <div class="ds-day">28</div><div class="ds-day">29</div><div class="ds-day">30</div><div class="ds-day muted">1</div><div class="ds-day muted">2</div><div class="ds-day muted">3</div><div class="ds-day muted">4</div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.prompt.md b/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.prompt.md
new file mode 100644
index 000000000..f73508156
--- /dev/null
+++ b/.design-sync/ds-bundle/components/calendar/Calendar/Calendar.prompt.md
@@ -0,0 +1,53 @@
+# Calendar
+
+A standalone month-grid date picker for selecting one (or multiple) dates inline. Use it embedded in a page/panel, or inside a Popover to build a dropdown date field (see DatePicker). Built on reka-ui's `CalendarRoot`; values are `@internationalized/date` `DateValue`s, not JS `Date`s.
+
+## Parts
+
+The default `<Calendar>` root already wires all of these together; you only compose them by hand for a custom layout.
+
+- **Calendar** — root; renders header + month grid. `v-model` = `DateValue`.
+- **CalendarHeader** — top bar holding the heading and the prev/next buttons.
+- **CalendarHeading** — month/year label; default slot exposes `{ headingValue }`.
+- **CalendarPrevButton / CalendarNextButton** — outline icon buttons (ChevronLeft / ChevronRight) to page months.
+- **CalendarGrid** — one month's `<table>`; the root renders one per visible month.
+- **CalendarGridHead / CalendarHeadCell** — weekday header row and its cells (Mo, Tu, …).
+- **CalendarGridBody / CalendarGridRow** — week rows.
+- **CalendarCell** — `<td>` wrapping a date; gets the selected background.
+- **CalendarCellTrigger** — the pressable day button; styled `ghost`, `size-8`. Carries state via `data-selected`, `data-today`, `data-disabled`, `data-unavailable`, `data-outside-view`.
+
+## Props
+
+No cva variant axis — the calendar has no `variant`/`size` props. Behavior comes from `CalendarRoot` props (forwarded):
+
+- `modelValue` — `DateValue | DateValue[] | undefined` (use `v-model`).
+- `multiple` — `boolean`, select more than one date.
+- `minValue` / `maxValue` — `DateValue` bounds.
+- `isDateDisabled` / `isDateUnavailable` — `(date) => boolean` predicates.
+- `numberOfMonths` — render multiple months side by side (default 1).
+- `weekdayFormat` — `'narrow' | 'short' | 'long'`.
+- `disabled`, `readonly`, `fixedWeeks`, `initialFocus`, `locale`.
+- `class` — forwarded via `cn()` (root padding is `p-3`).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import { Calendar } from '@/components/ui/calendar'
+
+const value = ref<DateValue>()
+</script>
+
+<template>
+  <Calendar v-model="value" :weekday-format="'short'" initial-focus />
+</template>
+```
+
+## Notes
+
+- Backed by **reka-ui** `CalendarRoot` and its `Calendar*` primitives; this group is the shadcn-vue styling wrapper.
+- `v-model` is **controlled/uncontrolled** via reka-ui; the bound value is a `DateValue` from `@internationalized/date` (`parseDate('2026-06-18')`, `today(tz)`), **not** a JS `Date`. Convert with `.toDate(tz)`.
+- Selected days use `--primary`; today (when not selected) uses `--accent`; outside-month and disabled days use `--muted-foreground`; unavailable days are struck through in `--destructive-foreground`.
+- For range selection use **RangeCalendar**; for a popover field use **DatePicker**.
diff --git a/.design-sync/ds-bundle/components/card/Card/Card.d.ts b/.design-sync/ds-bundle/components/card/Card/Card.d.ts
new file mode 100644
index 000000000..01f6e11db
--- /dev/null
+++ b/.design-sync/ds-bundle/components/card/Card/Card.d.ts
@@ -0,0 +1,32 @@
+/**
+ * Card — a surface container grouping related content.
+ * Each part takes only an optional `class` (merged via cn()) and a default slot.
+ * No variants. Root geometry: flex-col gap-6 rounded-xl border py-6 shadow-sm,
+ * bg-card / text-card-foreground.
+ */
+
+export interface CardProps {
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+export type CardHeaderProps = CardProps
+export type CardTitleProps = CardProps
+export type CardDescriptionProps = CardProps
+export type CardActionProps = CardProps
+export type CardContentProps = CardProps
+export type CardFooterProps = CardProps
+
+/** Root surface. @slot default */
+export declare const Card: import('vue').DefineComponent<CardProps>
+/** Header grid (auto-fits a CardAction into a 2nd column). @slot default */
+export declare const CardHeader: import('vue').DefineComponent<CardHeaderProps>
+/** Title <h3>, font-semibold leading-none. @slot default */
+export declare const CardTitle: import('vue').DefineComponent<CardTitleProps>
+/** Description <p>, text-muted-foreground text-sm. @slot default */
+export declare const CardDescription: import('vue').DefineComponent<CardDescriptionProps>
+/** Top-right action slot inside the header grid. @slot default */
+export declare const CardAction: import('vue').DefineComponent<CardActionProps>
+/** Main body, px-6. @slot default */
+export declare const CardContent: import('vue').DefineComponent<CardContentProps>
+/** Footer row, flex items-center px-6. @slot default */
+export declare const CardFooter: import('vue').DefineComponent<CardFooterProps>
diff --git a/.design-sync/ds-bundle/components/card/Card/Card.html b/.design-sync/ds-bundle/components/card/Card/Card.html
new file mode 100644
index 000000000..9877ba185
--- /dev/null
+++ b/.design-sync/ds-bundle/components/card/Card/Card.html
@@ -0,0 +1,42 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;--radius-xl:calc(var(--radius) + 4px);
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .card{background:var(--card);color:var(--card-foreground);display:flex;flex-direction:column;gap:24px;border-radius:var(--radius-xl);border:1px solid var(--border);padding-top:24px;padding-bottom:24px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
+  .card .hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:0 24px;gap:6px}
+  .card .title{font-weight:600;line-height:1;font-size:15px}
+  .card .desc{color:var(--muted-foreground);font-size:13px;margin-top:6px}
+  .card .action{font-size:18px;color:var(--muted-foreground);line-height:1}
+  .card .content{padding:0 24px;font-size:13px}
+  .card .footer{display:flex;align-items:center;padding:24px 24px 0;border-top:1px solid var(--border)}
+  .card .btn{background:var(--primary);color:var(--primary-foreground);border-radius:var(--radius);padding:6px 14px;font-size:13px;font-weight:500}
+</style>
+<div class="dscard">
+  <h4>Card</h4>
+  <div class="sub">Surface · parts: Header/Title/Description/Action/Content/Footer</div>
+  <div class="card">
+    <div class="hdr">
+      <div>
+        <div class="title">Job #1042</div>
+        <div class="desc">Quoting · due Friday</div>
+      </div>
+      <div class="action">⋯</div>
+    </div>
+    <div class="content">Steel bracket fabrication, 12 units.</div>
+    <div class="footer"><span class="btn">Open</span></div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/card/Card/Card.prompt.md b/.design-sync/ds-bundle/components/card/Card/Card.prompt.md
new file mode 100644
index 000000000..d27507712
--- /dev/null
+++ b/.design-sync/ds-bundle/components/card/Card/Card.prompt.md
@@ -0,0 +1,52 @@
+# Card
+
+A bordered surface container that groups related content with a consistent header/body/footer rhythm. Use for dashboard panels, settings sections, list item cards, summaries.
+
+## Parts
+
+- **Card** — root surface. `bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm`. Note: vertical padding only (`py-6`); horizontal padding lives on the inner parts (`px-6`).
+- **CardHeader** — header region; CSS grid that becomes 2-column when a `CardAction` is present. Holds title + description.
+- **CardTitle** — `<h3>`, `font-semibold leading-none`.
+- **CardDescription** — `<p>`, `text-muted-foreground text-sm`.
+- **CardAction** — top-right action (e.g. a button/menu); auto-placed in the header's 2nd column.
+- **CardContent** — main body, `px-6`.
+- **CardFooter** — footer row, `flex items-center px-6`; adds top padding when given a `.border-t`.
+
+## Props
+
+Every part takes only `class?: string`. No variants, sizes, or v-model.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Card, CardHeader, CardTitle, CardDescription,
+  CardAction, CardContent, CardFooter,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Job #1042</CardTitle>
+      <CardDescription>Quoting · due Friday</CardDescription>
+      <CardAction>
+        <Button variant="ghost" size="icon">⋯</Button>
+      </CardAction>
+    </CardHeader>
+    <CardContent>Steel bracket fabrication, 12 units.</CardContent>
+    <CardFooter class="border-t">
+      <Button>Open</Button>
+    </CardFooter>
+  </Card>
+</template>
+```
+
+## Notes
+
+- Plain `<div>`/`<h3>`/`<p>` elements — no reka-ui primitive.
+- Horizontal padding is on `CardHeader`/`CardContent`/`CardFooter` (`px-6`), NOT the root; raw children of `Card` will be flush to the edge.
+- `CardAction` relies on being a child of `CardHeader` (it sits in the auto-generated 2nd grid column).
+- Add `class="border-t"` / `border-b` on footer/header to trigger the built-in extra padding.
diff --git a/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.d.ts b/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.d.ts
new file mode 100644
index 000000000..8118ad3a0
--- /dev/null
+++ b/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.d.ts
@@ -0,0 +1,26 @@
+// Checkbox — boolean / tri-state checkbox. shadcn-vue wrapper over reka-ui CheckboxRoot.
+// Source: frontend/src/components/ui/checkbox/Checkbox.vue
+
+import type { DefineComponent } from 'vue'
+import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui'
+
+export interface CheckboxProps extends /* reka-ui */ CheckboxRootProps {
+  /** Controlled checked state. true | false | 'indeterminate'. */
+  modelValue?: boolean | 'indeterminate'
+  /** Uncontrolled initial state. */
+  defaultValue?: boolean | 'indeterminate'
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+  id?: string
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+
+export type CheckboxEmits = CheckboxRootEmits // includes (e:'update:modelValue', v: boolean|'indeterminate')
+
+/**
+ * @slot default — overrides the indicator glyph (defaults to a Check icon).
+ */
+export declare const Checkbox: DefineComponent<CheckboxProps>
diff --git a/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.html b/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.html
new file mode 100644
index 000000000..a22151e2e
--- /dev/null
+++ b/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.html
@@ -0,0 +1,46 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+      --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    }
+    .ds-card{width:360px;box-sizing:border-box;padding:20px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);}
+    .ds-title{font-size:13px;font-weight:600;margin:0 0 14px;}
+    .ds-cb-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:12px;}
+    .ds-cb{width:1rem;height:1rem;box-sizing:border-box;border:1px solid var(--input);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
+    .ds-cb.checked{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);}
+    .ds-cb.indeterminate{background:var(--primary);border-color:var(--primary);}
+    .ds-cb.indeterminate::after{content:"";width:8px;height:2px;background:var(--primary-foreground);border-radius:1px;}
+    .ds-cb.disabled{opacity:0.5;}
+    .ds-cb svg{width:0.875rem;height:0.875rem;}
+    .ds-cb-text{font-size:14px;}
+    .ds-cb-text.muted{color:var(--muted-foreground);}
+  </style>
+  <p class="ds-title">Checkbox</p>
+  <div class="ds-cb-row">
+    <span class="ds-cb"></span>
+    <span class="ds-cb-text">Unchecked</span>
+  </div>
+  <div class="ds-cb-row">
+    <span class="ds-cb checked"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
+    <span class="ds-cb-text">Checked</span>
+  </div>
+  <div class="ds-cb-row">
+    <span class="ds-cb indeterminate"></span>
+    <span class="ds-cb-text">Indeterminate</span>
+  </div>
+  <div class="ds-cb-row" style="margin-bottom:0;">
+    <span class="ds-cb disabled"></span>
+    <span class="ds-cb-text muted">Disabled</span>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.prompt.md b/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.prompt.md
new file mode 100644
index 000000000..76ae2d2ba
--- /dev/null
+++ b/.design-sync/ds-bundle/components/checkbox/Checkbox/Checkbox.prompt.md
@@ -0,0 +1,41 @@
+# Checkbox
+
+A 16px boolean (or tri-state) checkbox. shadcn-vue wrapper over reka-ui `CheckboxRoot` + `CheckboxIndicator`. Use for opt-in toggles, multi-select lists, and "select all" (indeterminate) controls.
+
+## Parts
+
+- `Checkbox` — the whole control (only export). Renders `CheckboxRoot` with a `CheckboxIndicator` containing a lucide `Check` icon by default.
+
+## Props
+
+- `modelValue?: boolean | 'indeterminate'` — checked state (`v-model`).
+- `defaultValue?: boolean | 'indeterminate'` — initial state when uncontrolled.
+- `disabled?`, `required?`, `name?`, `value?`, `id?` — standard form props (reka-ui passthrough).
+- `class?: string` — extra classes, merged via `cn()`.
+
+No variants or sizes. Fixed `size-4` (1rem), `rounded-[4px]`. Checked state fills with `--primary` / `--primary-foreground`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import { ref } from 'vue'
+const agreed = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Checkbox id="terms" v-model="agreed" />
+    <Label for="terms">Accept terms</Label>
+  </div>
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `CheckboxRoot`; `v-model` is the controlled binding, otherwise uncontrolled via `defaultValue`.
+- Supports `'indeterminate'` as a third state.
+- Default check glyph is the lucide `Check` icon; override it via the default slot.
+- `:disabled` applies `cursor-not-allowed` + 50% opacity; focus shows a 3px `ring-ring/50`; `aria-invalid` switches to the destructive ring.
diff --git a/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.d.ts b/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.d.ts
new file mode 100644
index 000000000..667390ac8
--- /dev/null
+++ b/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.d.ts
@@ -0,0 +1,40 @@
+/**
+ * Collapsible — a custom show/hide container (NOT a reka-ui primitive).
+ * The root provides an `open` Ref and a toggle function via provide/inject;
+ * CollapsibleContent injects them and transitions its slot in/out.
+ *
+ * There is no built-in trigger part — you wire your own clickable element
+ * to flip `open` (via v-model:open) or to an injected `collapsible-toggle`.
+ *
+ * @slot default — your trigger element + a CollapsibleContent
+ */
+export interface CollapsibleProps {
+  /** Whether the content is shown. Controlled via v-model:open. @default false */
+  open?: boolean
+}
+
+export interface CollapsibleEmits {
+  /** Emitted when the open state changes (toggle or external prop change). */
+  (e: 'update:open', value: boolean): void
+}
+
+/**
+ * CollapsibleContent — the body that is mounted/unmounted with a fade+scale
+ * transition (200ms) when the parent's open state changes. Must be used
+ * inside a Collapsible (throws otherwise).
+ *
+ * @slot default — collapsible body content
+ */
+export type CollapsibleContentProps = Record<string, never>
+
+export declare const Collapsible: import('vue').DefineComponent<
+  CollapsibleProps,
+  object,
+  object,
+  object,
+  object,
+  object,
+  object,
+  CollapsibleEmits
+>
+export declare const CollapsibleContent: import('vue').DefineComponent<CollapsibleContentProps>
diff --git a/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.html b/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.html
new file mode 100644
index 000000000..e7aa889bf
--- /dev/null
+++ b/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.html
@@ -0,0 +1,34 @@
+<!-- @dsCard group="Data & Navigation" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-col-card{width:360px;box-sizing:border-box;background:var(--card);color:var(--card-foreground);
+  border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
+.ds-col-card h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--foreground);}
+.ds-col-trigger{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;
+  font-size:14px;font-weight:500;color:var(--foreground);background:transparent;border:none;
+  border-radius:calc(var(--radius) - 2px);cursor:pointer;}
+.ds-col-trigger:hover{background:var(--accent);}
+.ds-col-trigger svg{width:16px;height:16px;}
+.ds-col-content{margin-top:8px;padding:12px;font-size:14px;color:var(--foreground);
+  background:var(--muted);border-radius:calc(var(--radius) - 2px);}
+</style>
+<div class="ds-col-card">
+  <h3>Collapsible</h3>
+  <button class="ds-col-trigger">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
+    Hide details
+  </button>
+  <div class="ds-col-content">Extra job details revealed here — materials, labour, notes.</div>
+</div>
diff --git a/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.prompt.md b/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.prompt.md
new file mode 100644
index 000000000..71ed94595
--- /dev/null
+++ b/.design-sync/ds-bundle/components/collapsible/Collapsible/Collapsible.prompt.md
@@ -0,0 +1,41 @@
+# Collapsible
+
+Show or hide a region of content on demand (expandable sections, "show more" panels, advanced-options drawers). This is a **custom** implementation, not reka-ui — the root shares its open state with the content via Vue provide/inject.
+
+## Parts
+- **Collapsible** — root wrapper (`<div class="collapsible">`). Owns the boolean open state and provides it (and a toggle fn) to descendants. Renders whatever you put inside, including your own trigger.
+- **CollapsibleContent** — the body. Injects the open state and mounts/unmounts its slot (`v-if`) with a 200ms fade + scale transition. Throws if used outside a Collapsible.
+
+> There is **no** `CollapsibleTrigger` part. Provide your own clickable element and flip the open state yourself.
+
+## Props
+- **Collapsible**: `open?: boolean` (default `false`). Emits `update:open` — use `v-model:open`.
+- **CollapsibleContent**: no props.
+
+## Usage
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
+import { Button } from '@/components/ui/button'
+
+const open = ref(false)
+</script>
+
+<template>
+  <Collapsible v-model:open="open">
+    <Button variant="ghost" @click="open = !open">
+      {{ open ? 'Hide' : 'Show' }} details
+    </Button>
+    <CollapsibleContent>
+      <p>Extra job details revealed here…</p>
+    </CollapsibleContent>
+  </Collapsible>
+</template>
+```
+
+## Notes
+- Custom component (provide/inject), not reka-ui. The root injects `collapsible-open` (a `Ref<boolean>`) and `collapsible-toggle` (a function); a child trigger could `inject('collapsible-toggle')` instead of touching `open` directly.
+- Controlled via `v-model:open`; the root also keeps the internal ref in sync when the `open` prop changes externally.
+- `CollapsibleContent` unmounts its content when closed (not just hidden), and animates with opacity + scale/translate over ~200ms.
+- Because there is no trigger primitive, you own the toggle button and its accessibility (aria-expanded etc.).
diff --git a/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.d.ts b/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.d.ts
new file mode 100644
index 000000000..f0aeb23cc
--- /dev/null
+++ b/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.d.ts
@@ -0,0 +1,25 @@
+// CustomDatePicker — a lightweight from/to date-range field built from two native
+// <input type="date"> (shadcn Input) rather than the reka-ui calendar. v-model is a
+// DateRange { from?: string; to?: string } of ISO 'YYYY-MM-DD' strings.
+// No popover, no @internationalized/date — uses the browser-native date inputs.
+
+import type { DefineComponent } from 'vue'
+
+/** DateRange shape (from '@/constants/date-range'): both ends optional ISO strings. */
+export interface DateRange {
+  from?: string
+  to?: string
+}
+
+export interface CustomDatePickerProps {
+  /** Selected range; both ends are ISO 'YYYY-MM-DD' strings (or undefined). Use with v-model. */
+  modelValue: DateRange
+}
+
+export interface CustomDatePickerEmits {
+  /** Emits the updated { from, to } range on either input change. */
+  (e: 'update:modelValue', v: DateRange): void
+}
+
+/** No slots — renders two <Input type="date"> separated by an en-dash. */
+export declare const CustomDatePicker: DefineComponent<CustomDatePickerProps, {}, any>
diff --git a/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.html b/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.html
new file mode 100644
index 000000000..133b880ed
--- /dev/null
+++ b/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.html
@@ -0,0 +1,31 @@
+<!-- @dsCard group="Date & Time" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-cdp-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-cdp-title{font-size:13px;font-weight:600;color:var(--muted-foreground);margin:0 0 12px;}
+.ds-cdp-row{display:flex;align-items:center;gap:8px;}
+.ds-cdp-input{width:9rem;height:2.25rem;padding:0 10px;font-size:13px;background:var(--background);border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);box-shadow:0 1px 2px rgba(0,0,0,.05);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;}
+.ds-cdp-input .cal{width:14px;height:14px;border:1.5px solid var(--muted-foreground);border-radius:2px;opacity:.7;}
+.ds-cdp-dash{margin:0 4px;color:var(--muted-foreground);}
+</style>
+
+<div class="ds-cdp-card">
+  <p class="ds-cdp-title">CustomDatePicker — native from / to range</p>
+  <div class="ds-cdp-row">
+    <div class="ds-cdp-input"><span>01/06/2026</span><span class="cal"></span></div>
+    <span class="ds-cdp-dash">–</span>
+    <div class="ds-cdp-input"><span>18/06/2026</span><span class="cal"></span></div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.prompt.md b/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.prompt.md
new file mode 100644
index 000000000..cbef123ed
--- /dev/null
+++ b/.design-sync/ds-bundle/components/custom-date-picker/CustomDatePicker/CustomDatePicker.prompt.md
@@ -0,0 +1,39 @@
+# CustomDatePicker
+
+A minimal **from → to** date-range field built from two native `<input type="date">` (shadcn `Input`) joined by an en-dash. Use it for compact range filters (e.g. report/search date windows) where a full calendar popover is overkill. Deliberately does **not** use reka-ui's calendar or `@internationalized/date` — it relies on the browser's native date inputs.
+
+## Parts
+
+Single self-contained component (no exported sub-parts). Internally:
+
+- two **Input** (`type="date"`, `w-36`) — the from and to fields.
+- a literal `–` separator between them.
+
+## Props
+
+No variant axis. Props:
+
+- `modelValue` — `DateRange` = `{ from?: string; to?: string }` of ISO `'YYYY-MM-DD'` strings (use `v-model`).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import CustomDatePicker from '@/components/ui/custom-date-picker/CustomDatePicker.vue'
+import type { DateRange } from '@/constants/date-range'
+
+const range = ref<DateRange>({ from: undefined, to: undefined })
+</script>
+
+<template>
+  <CustomDatePicker v-model="range" />
+</template>
+```
+
+## Notes
+
+- **Not** built on reka-ui calendar — it is two native HTML date inputs (`<Input type="date">`), so the dropdown is the browser's own date picker.
+- `v-model` is a `DateRange` object (`{ from, to }`) of ISO strings, matching `DateRangeSchema` in `@/constants/date-range`; missing ends are `undefined`.
+- Internally keeps a `reactive` mirror of the range and emits `update:modelValue` whenever either input changes (deep watch both ways), so it stays in sync with the parent.
+- For a styled in-app range grid with span highlighting use **RangeCalendar**; for a single popover date field use **DatePicker**.
diff --git a/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.d.ts b/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.d.ts
new file mode 100644
index 000000000..586865c09
--- /dev/null
+++ b/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.d.ts
@@ -0,0 +1,29 @@
+// DatePicker — a single-component composition: an outline Button trigger inside a Popover
+// that opens a Calendar. Unlike the calendar primitives, its v-model is an ISO date
+// STRING ('YYYY-MM-DD') | null, not a DateValue — it parses/formats internally with
+// @internationalized/date (parseDate + DateFormatter 'en-NZ' dateStyle:'long', local tz).
+
+import type { DefineComponent } from 'vue'
+
+export interface DatePickerProps {
+  /** Selected date as ISO 'YYYY-MM-DD' string, or null when empty. Use with v-model. */
+  modelValue: string | null
+  /** Lower bound, ISO 'YYYY-MM-DD'. */
+  min?: string | null
+  /** Upper bound, ISO 'YYYY-MM-DD'. */
+  max?: string | null
+  /** Trigger text shown when no date is selected. Defaults to 'Pick a date'. */
+  placeholder?: string
+  /** Optional field label rendered above the trigger. */
+  label?: string
+  /** Forwarded to the outer wrapper. */
+  class?: string
+}
+
+export interface DatePickerEmits {
+  /** Emits ISO 'YYYY-MM-DD' on selection, or null when cleared. */
+  (e: 'update:modelValue', v: string | null): void
+}
+
+/** No slots — fully self-contained (Button + Popover + Calendar). */
+export declare const DatePicker: DefineComponent<DatePickerProps, {}, any>
diff --git a/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.html b/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.html
new file mode 100644
index 000000000..387893d40
--- /dev/null
+++ b/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.html
@@ -0,0 +1,41 @@
+<!-- @dsCard group="Date & Time" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-dp-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-dp-title{font-size:13px;font-weight:600;color:var(--muted-foreground);margin:0 0 12px;}
+.ds-dp-label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;}
+.ds-dp-btn{display:flex;align-items:center;width:100%;height:2.25rem;padding:0 12px;font-size:13px;font-weight:400;background:var(--background);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:0 1px 2px rgba(0,0,0,.05);box-sizing:border-box;}
+.ds-dp-ico{width:16px;height:16px;margin-right:8px;border:1.5px solid currentColor;border-radius:3px;position:relative;opacity:.8;flex:none;}
+.ds-dp-ico::before{content:"";position:absolute;top:-3px;left:3px;right:3px;height:3px;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor;}
+.ds-pop{margin-top:8px;width:220px;background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:10px;}
+.ds-pop-hdr{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500;margin-bottom:8px;}
+.ds-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
+.ds-mini span{height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:4px;}
+.ds-mini .sel{background:var(--primary);color:var(--primary-foreground);}
+.ds-mini .mut{color:var(--muted-foreground);}
+</style>
+
+<div class="ds-dp-card">
+  <p class="ds-dp-title">DatePicker — Button + Popover + Calendar</p>
+  <label class="ds-dp-label">Due date</label>
+  <div class="ds-dp-btn"><span class="ds-dp-ico"></span>18 June 2026</div>
+  <div class="ds-pop">
+    <div class="ds-pop-hdr"><span>‹</span><span>June 2026</span><span>›</span></div>
+    <div class="ds-mini">
+      <span class="mut">M</span><span class="mut">T</span><span class="mut">W</span><span class="mut">T</span><span class="mut">F</span><span class="mut">S</span><span class="mut">S</span>
+      <span>15</span><span>16</span><span>17</span><span class="sel">18</span><span>19</span><span>20</span><span>21</span>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.prompt.md b/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.prompt.md
new file mode 100644
index 000000000..7884b2c46
--- /dev/null
+++ b/.design-sync/ds-bundle/components/date-picker/DatePicker/DatePicker.prompt.md
@@ -0,0 +1,44 @@
+# DatePicker
+
+A ready-made single-date field: an outline `Button` (with a calendar icon) that opens a `Popover` containing a `Calendar`. Use it as a form control when you want a compact date input that drops down a month grid. Its value is a plain ISO date **string**, so it slots straight into API payloads without `DateValue` conversion.
+
+## Parts
+
+Single self-contained component (no exported sub-parts). Internally it composes:
+
+- **Button** (`variant="outline"`, full-width, left calendar icon) — the trigger showing the formatted date or placeholder.
+- **Popover / PopoverTrigger / PopoverContent** — the dropdown shell (`w-auto p-0`).
+- **Calendar** — the month grid inside the popover.
+- Optional **label** above the trigger.
+
+## Props
+
+No variant axis. Props:
+
+- `modelValue` — `string | null` ISO `'YYYY-MM-DD'` (use `v-model`); default `null`.
+- `min` / `max` — `string | null` ISO bounds, passed to the Calendar as `minValue`/`maxValue`.
+- `placeholder` — trigger text when empty; default `'Pick a date'`.
+- `label` — optional field label.
+- `class` — forwarded to the outer wrapper `<div>`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import DatePicker from '@/components/ui/date-picker/DatePicker.vue'
+
+const due = ref<string | null>(null) // '2026-06-18'
+</script>
+
+<template>
+  <DatePicker v-model="due" label="Due date" :min="'2026-01-01'" placeholder="Pick a date" />
+</template>
+```
+
+## Notes
+
+- Composition: **Popover** (reka-ui PopoverRoot) wrapping shadcn **Calendar** (reka-ui CalendarRoot), triggered by **Button**.
+- **Value boundary differs from Calendar/RangeCalendar:** `v-model` here is an **ISO string**, not a `DateValue`. It converts internally with `@internationalized/date` (`parseDate` in, `date.toDate(tz).toISOString().slice(0,10)` out) and formats the trigger label with `DateFormatter('en-NZ', { dateStyle: 'long' })` in the local timezone.
+- Single date only; there is no built-in range variant here — use **RangeCalendar** for ranges.
+- Default export is the component itself (`import DatePicker from '@/components/ui/date-picker/DatePicker.vue'`, also re-exported as `{ DatePicker }` from the group index).
diff --git a/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.d.ts b/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.d.ts
new file mode 100644
index 000000000..7274df514
--- /dev/null
+++ b/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.d.ts
@@ -0,0 +1,98 @@
+// Dialog — modal dialog group (shadcn-vue, backed by reka-ui DialogRoot).
+// Composed of parts; no cva variant axis. Props are the reka-ui primitive props.
+
+import type { DefineComponent } from 'vue'
+
+/** Root. Controls open state. Backed by reka-ui DialogRoot (v-model:open). */
+export interface DialogProps {
+  /** Controlled open state. */
+  open?: boolean
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean
+  /** Modal behavior (trap focus / block background). @default true */
+  modal?: boolean
+}
+export interface DialogEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+/** Button/element that opens the dialog. Must be inside Dialog. Backed by reka-ui DialogTrigger. */
+export interface DialogTriggerProps {
+  /** Render as child (merge props onto the single child element). */
+  asChild?: boolean
+  as?: string | object
+}
+
+/** Backdrop. Rendered automatically by DialogContent; rarely used directly. */
+export interface DialogOverlayProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+
+/**
+ * Portalled panel. Includes the built-in top-right close (X) button.
+ * Backed by reka-ui DialogContent inside DialogPortal + DialogOverlay.
+ * Fixed, centered, max-w-lg, rounded-lg, p-6, shadow-lg.
+ * @slot default — dialog body (compose Header/Title/Description/Footer here).
+ */
+export interface DialogContentProps {
+  forceMount?: boolean
+  trapFocus?: boolean
+  disableOutsidePointerEvents?: boolean
+  class?: string
+}
+export interface DialogContentEmits {
+  (e: 'escapeKeyDown', event: KeyboardEvent): void
+  (e: 'pointerDownOutside', event: Event): void
+  (e: 'focusOutside', event: Event): void
+  (e: 'interactOutside', event: Event): void
+  (e: 'openAutoFocus', event: Event): void
+  (e: 'closeAutoFocus', event: Event): void
+}
+
+/**
+ * Variant of Content that centers in a scrollable overlay (long content).
+ * Same props/emits as DialogContent; clicks in the scroll gutter don't close.
+ * @slot default
+ */
+export interface DialogScrollContentProps extends DialogContentProps {}
+export interface DialogScrollContentEmits extends DialogContentEmits {}
+
+/** Layout: header column. @slot default */
+export interface DialogHeaderProps {
+  class?: string
+}
+/** Layout: footer row (reversed on mobile, right-aligned on sm+). @slot default */
+export interface DialogFooterProps {
+  class?: string
+}
+
+/** Heading. text-lg semibold. Backed by reka-ui DialogTitle. @slot default */
+export interface DialogTitleProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+/** Muted small description text. Backed by reka-ui DialogDescription. @slot default */
+export interface DialogDescriptionProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+/** Element that closes the dialog. Backed by reka-ui DialogClose. @slot default */
+export interface DialogCloseProps {
+  asChild?: boolean
+  as?: string | object
+}
+
+export declare const Dialog: DefineComponent<DialogProps>
+export declare const DialogTrigger: DefineComponent<DialogTriggerProps>
+export declare const DialogContent: DefineComponent<DialogContentProps>
+export declare const DialogScrollContent: DefineComponent<DialogScrollContentProps>
+export declare const DialogOverlay: DefineComponent<DialogOverlayProps>
+export declare const DialogHeader: DefineComponent<DialogHeaderProps>
+export declare const DialogFooter: DefineComponent<DialogFooterProps>
+export declare const DialogTitle: DefineComponent<DialogTitleProps>
+export declare const DialogDescription: DefineComponent<DialogDescriptionProps>
+export declare const DialogClose: DefineComponent<DialogCloseProps>
diff --git a/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.html b/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.html
new file mode 100644
index 000000000..87599d312
--- /dev/null
+++ b/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.html
@@ -0,0 +1,44 @@
+<!-- @dsCard group="Overlays" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-dialog-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-dialog-card *{box-sizing:border-box;}
+.ds-title{font-size:13px;font-weight:600;margin:0 0 2px;}
+.ds-sub{font-size:11px;color:var(--muted-foreground);margin:0 0 12px;}
+.ds-stage{position:relative;background:rgba(0,0,0,0.80);border-radius:calc(var(--radius) - 2px);padding:22px 14px;display:flex;align-items:center;justify-content:center;}
+.ds-panel{position:relative;width:100%;max-width:280px;background:var(--background);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 10px 15px -3px rgba(0,0,0,.2);}
+.ds-x{position:absolute;top:12px;right:12px;width:16px;height:16px;color:var(--muted-foreground);opacity:.7;}
+.ds-dlg-title{font-size:16px;font-weight:600;line-height:1.1;margin:0 0 6px;color:var(--foreground);}
+.ds-dlg-desc{font-size:12px;color:var(--muted-foreground);margin:0 0 18px;line-height:1.35;}
+.ds-row{display:flex;justify-content:flex-end;gap:8px;}
+.ds-btn{height:32px;display:inline-flex;align-items:center;padding:0 12px;font-size:12px;font-weight:500;border-radius:calc(var(--radius) - 2px);cursor:default;}
+.ds-btn-outline{background:transparent;border:1px solid var(--border);color:var(--foreground);}
+.ds-btn-primary{background:var(--primary);color:var(--primary-foreground);border:1px solid var(--primary);}
+</style>
+<div class="ds-dialog-card">
+  <p class="ds-title">Dialog</p>
+  <p class="ds-sub">Modal overlay · centered · max-w-lg · built-in close</p>
+  <div class="ds-stage">
+    <div class="ds-panel">
+      <svg class="ds-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      <h3 class="ds-dlg-title">Edit job</h3>
+      <p class="ds-dlg-desc">Update details, then save your changes.</p>
+      <div class="ds-row">
+        <span class="ds-btn ds-btn-outline">Cancel</span>
+        <span class="ds-btn ds-btn-primary">Save</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.prompt.md b/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.prompt.md
new file mode 100644
index 000000000..9727c9dfe
--- /dev/null
+++ b/.design-sync/ds-bundle/components/dialog/Dialog/Dialog.prompt.md
@@ -0,0 +1,67 @@
+# Dialog
+
+A modal overlay that interrupts the user to show focused content (forms, confirmations, details). Use when the user must act on or dismiss content before continuing. Backed by reka-ui `DialogRoot` and portalled to the body.
+
+## Parts
+
+- **Dialog** — root; owns open state (`v-model:open`).
+- **DialogTrigger** — element that opens it (wrap a Button with `as-child`).
+- **DialogContent** — portalled, centered panel; renders the overlay and a built-in top-right X close button. Put the body here.
+- **DialogScrollContent** — alternative content for tall content; the whole panel scrolls inside the overlay and the scroll gutter doesn't close on click.
+- **DialogOverlay** — backdrop; emitted automatically by Content (rarely placed by hand).
+- **DialogHeader** / **DialogFooter** — layout wrappers (header is a column; footer is a right-aligned row on `sm+`, reversed on mobile).
+- **DialogTitle** — heading (`text-lg`, semibold). Include for accessibility.
+- **DialogDescription** — muted supporting text (`text-sm`).
+- **DialogClose** — closes the dialog (use for an explicit Cancel/Close button).
+
+## Props
+
+No cva variants. Key props (forwarded to reka-ui):
+
+- `Dialog`: `open?`, `defaultOpen?`, `modal?` (default `true`).
+- `DialogContent` / `DialogScrollContent`: `force-mount?`, `trap-focus?`, `disable-outside-pointer-events?`, plus `class?`. Emits `escape-key-down`, `pointer-down-outside`, `interact-outside`, `close-auto-focus`, etc.
+- `DialogTrigger` / `DialogClose` / `DialogTitle` / `DialogDescription`: `as?`, `as-child?`.
+
+Geometry (from source): Content is `fixed`, centered, `w-full max-w-[calc(100%-2rem)] sm:max-w-lg`, `rounded-lg`, `border`, `p-6`, `shadow-lg`, `gap-4`. Overlay is `bg-black/80`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Dialog, DialogTrigger, DialogContent, DialogHeader,
+  DialogTitle, DialogDescription, DialogFooter, DialogClose,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">Edit job</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Edit job</DialogTitle>
+        <DialogDescription>Update details, then save.</DialogDescription>
+      </DialogHeader>
+      <!-- form body -->
+      <DialogFooter>
+        <DialogClose as-child>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button>Save</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+```
+
+## Notes
+
+- Backed by **reka-ui** `Dialog*` primitives; `DialogContent` wraps `DialogPortal` + `DialogOverlay`, so it renders at the document root (escapes overflow/stacking contexts).
+- Controlled or uncontrolled: bind `v-model:open` on `Dialog`, or leave it to manage itself.
+- `DialogContent` ships its own X close button (top-right) — you don't add one.
+- `DialogTrigger`/`DialogClose` must be inside `Dialog`. Use `as-child` to project onto a Button rather than nesting buttons.
+- Always include a `DialogTitle` (a11y); add `DialogDescription` when context helps screen readers.
+- Use `DialogScrollContent` instead of `DialogContent` when the body can exceed the viewport.
diff --git a/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.d.ts b/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.d.ts
new file mode 100644
index 000000000..ff3d8b51f
--- /dev/null
+++ b/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.d.ts
@@ -0,0 +1,92 @@
+// Drawer — edge-anchored sliding panel group (shadcn-vue, backed by vaul-vue DrawerRoot).
+// No cva variant axis; placement is chosen via the `direction` prop on the root.
+
+import type { DefineComponent } from 'vue'
+
+/**
+ * Root. Owns open state (v-model:open) and slide direction.
+ * Backed by vaul-vue DrawerRoot. `shouldScaleBackground` defaults to true.
+ */
+export interface DrawerProps {
+  open?: boolean
+  defaultOpen?: boolean
+  modal?: boolean
+  /** Edge the drawer slides from. @default 'bottom' */
+  direction?: 'top' | 'bottom' | 'left' | 'right'
+  /** Scale the page behind the drawer when open. @default true */
+  shouldScaleBackground?: boolean
+  /** Enable swipe-to-dismiss snap points. */
+  snapPoints?: (string | number)[]
+  activeSnapPoint?: string | number | null
+  dismissible?: boolean
+  nested?: boolean
+}
+export interface DrawerEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+/** Element that opens the drawer. Backed by vaul-vue DrawerTrigger. */
+export interface DrawerTriggerProps {
+  asChild?: boolean
+  as?: string | object
+}
+
+/** Backdrop. Rendered automatically by DrawerContent. bg-black/80. */
+export interface DrawerOverlayProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+
+/**
+ * Portalled sliding panel. Geometry adapts to the root `direction`
+ * (rounded edge, 80vh for top/bottom, 3/4 width / sm:max-w-sm for left/right).
+ * For the bottom direction it shows a centered drag handle.
+ * @slot default — drawer body (compose Header/Title/Description/Footer here).
+ */
+export interface DrawerContentProps {
+  forceMount?: boolean
+  class?: string
+}
+export interface DrawerContentEmits {
+  (e: 'escapeKeyDown', event: KeyboardEvent): void
+  (e: 'pointerDownOutside', event: Event): void
+  (e: 'interactOutside', event: Event): void
+}
+
+/** Layout: header column (p-4). @slot default */
+export interface DrawerHeaderProps {
+  class?: string
+}
+/** Layout: footer pushed to the bottom (mt-auto, p-4). @slot default */
+export interface DrawerFooterProps {
+  class?: string
+}
+
+/** Heading. semibold. Backed by vaul-vue DrawerTitle. @slot default */
+export interface DrawerTitleProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+/** Muted small description. Backed by vaul-vue DrawerDescription. @slot default */
+export interface DrawerDescriptionProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+/** Closes the drawer. Backed by vaul-vue DrawerClose. @slot default */
+export interface DrawerCloseProps {
+  asChild?: boolean
+  as?: string | object
+}
+
+export declare const Drawer: DefineComponent<DrawerProps>
+export declare const DrawerTrigger: DefineComponent<DrawerTriggerProps>
+export declare const DrawerContent: DefineComponent<DrawerContentProps>
+export declare const DrawerOverlay: DefineComponent<DrawerOverlayProps>
+export declare const DrawerHeader: DefineComponent<DrawerHeaderProps>
+export declare const DrawerFooter: DefineComponent<DrawerFooterProps>
+export declare const DrawerTitle: DefineComponent<DrawerTitleProps>
+export declare const DrawerDescription: DefineComponent<DrawerDescriptionProps>
+export declare const DrawerClose: DefineComponent<DrawerCloseProps>
diff --git a/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.html b/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.html
new file mode 100644
index 000000000..614c5a6db
--- /dev/null
+++ b/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.html
@@ -0,0 +1,44 @@
+<!-- @dsCard group="Overlays" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-drawer-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-drawer-card *{box-sizing:border-box;}
+.ds-title{font-size:13px;font-weight:600;margin:0 0 2px;}
+.ds-sub{font-size:11px;color:var(--muted-foreground);margin:0 0 12px;}
+.ds-stage{position:relative;background:rgba(0,0,0,0.80);border-radius:calc(var(--radius) - 2px);height:150px;overflow:hidden;}
+.ds-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--background);border-top:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;padding:8px 16px 16px;}
+.ds-handle{width:100px;height:8px;margin:0 auto 12px;border-radius:9999px;background:var(--muted);}
+.ds-dw-title{font-size:15px;font-weight:600;margin:0 0 4px;color:var(--foreground);}
+.ds-dw-desc{font-size:11px;color:var(--muted-foreground);margin:0 0 14px;}
+.ds-row{display:flex;flex-direction:column;gap:8px;}
+.ds-btn{height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-size:12px;font-weight:500;border-radius:calc(var(--radius) - 2px);cursor:default;}
+.ds-btn-outline{background:transparent;border:1px solid var(--border);color:var(--foreground);}
+.ds-btn-primary{background:var(--primary);color:var(--primary-foreground);border:1px solid var(--primary);}
+</style>
+<div class="ds-drawer-card">
+  <p class="ds-title">Drawer</p>
+  <p class="ds-sub">Edge sheet · slide-in · drag handle (bottom)</p>
+  <div class="ds-stage">
+    <div class="ds-sheet">
+      <div class="ds-handle"></div>
+      <h3 class="ds-dw-title">Filters</h3>
+      <p class="ds-dw-desc">Narrow the job list.</p>
+      <div class="ds-row">
+        <span class="ds-btn ds-btn-primary">Apply</span>
+        <span class="ds-btn ds-btn-outline">Cancel</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.prompt.md b/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.prompt.md
new file mode 100644
index 000000000..a836766c8
--- /dev/null
+++ b/.design-sync/ds-bundle/components/drawer/Drawer/Drawer.prompt.md
@@ -0,0 +1,65 @@
+# Drawer
+
+An edge-anchored panel that slides in from a screen edge (bottom by default) with swipe-to-dismiss and a draggable handle. Use for mobile-first sheets, filters, or detail panels where a full modal is too heavy. Backed by **vaul-vue** `DrawerRoot` and portalled to the body.
+
+## Parts
+
+- **Drawer** — root; owns open state (`v-model:open`), the `direction`, and `shouldScaleBackground` (default `true`).
+- **DrawerTrigger** — element that opens it (wrap a Button with `as-child`).
+- **DrawerContent** — portalled sliding panel; geometry adapts to `direction`. Shows a centered drag handle for the bottom direction.
+- **DrawerOverlay** — backdrop (`bg-black/80`); rendered automatically by Content.
+- **DrawerHeader** / **DrawerFooter** — layout wrappers (`p-4`; footer is pushed to the bottom via `mt-auto`).
+- **DrawerTitle** — heading (semibold). **DrawerDescription** — muted `text-sm` text.
+- **DrawerClose** — closes the drawer.
+
+## Props
+
+No cva variants. Placement comes from `direction` on the root, not a variant.
+
+- `Drawer`: `direction?` `'top' | 'bottom' | 'left' | 'right'` (default `'bottom'`), `open?`, `defaultOpen?`, `modal?`, `shouldScaleBackground?` (default `true`), `snapPoints?`, `dismissible?`, `nested?`.
+- `DrawerContent`: `class?`, `force-mount?`; emits `escape-key-down`, `pointer-down-outside`, `interact-outside`.
+- `DrawerTrigger` / `DrawerClose` / `DrawerTitle` / `DrawerDescription`: `as?`, `as-child?`.
+
+Geometry (from source): top/bottom → full width, `max-h-[80vh]`, rounded on the inner edge; left/right → `w-3/4 sm:max-w-sm`, full height.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Drawer, DrawerTrigger, DrawerContent, DrawerHeader,
+  DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose,
+} from '@/components/ui/drawer'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Drawer>
+    <DrawerTrigger as-child>
+      <Button variant="outline">Open filters</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Filters</DrawerTitle>
+        <DrawerDescription>Narrow the job list.</DrawerDescription>
+      </DrawerHeader>
+      <!-- body -->
+      <DrawerFooter>
+        <Button>Apply</Button>
+        <DrawerClose as-child>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+</template>
+```
+
+## Notes
+
+- Backed by **vaul-vue** (not reka-ui) — it adds drag, snap points, and background scaling. `DrawerContent` wraps `DrawerPortal` + `DrawerOverlay`.
+- Choose the edge with `direction` on the root; `DrawerContent`'s styling keys off `data-vaul-drawer-direction`.
+- A drag handle appears only for the bottom direction.
+- Controlled or uncontrolled via `v-model:open`.
+- `DrawerTrigger`/`DrawerClose` must live inside `Drawer`; use `as-child` to avoid nested buttons.
+- Reach for Drawer over Dialog when the content is touch-driven or benefits from edge anchoring; use Dialog for centered desktop modals.
diff --git a/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.d.ts b/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.d.ts
new file mode 100644
index 000000000..1ba1bb326
--- /dev/null
+++ b/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.d.ts
@@ -0,0 +1,154 @@
+// DropdownMenu — action/selection menu group (shadcn-vue, backed by reka-ui DropdownMenuRoot).
+// Only DropdownMenuItem carries a variant axis ('default' | 'destructive').
+
+import type { DefineComponent } from 'vue'
+
+/** Root. Owns open state (v-model:open). Backed by reka-ui DropdownMenuRoot. */
+export interface DropdownMenuProps {
+  open?: boolean
+  defaultOpen?: boolean
+  modal?: boolean
+  dir?: 'ltr' | 'rtl'
+}
+export interface DropdownMenuEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+/** Element that opens the menu. Backed by reka-ui DropdownMenuTrigger. */
+export interface DropdownMenuTriggerProps {
+  asChild?: boolean
+  as?: string | object
+  disabled?: boolean
+}
+
+/**
+ * Portalled menu surface. bg-popover, rounded-md, border, p-1, shadow-md, min-w-[8rem].
+ * Backed by reka-ui DropdownMenuContent inside DropdownMenuPortal.
+ * @slot default — items, labels, separators, groups.
+ */
+export interface DropdownMenuContentProps {
+  /** @default 4 */
+  sideOffset?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  alignOffset?: number
+  avoidCollisions?: boolean
+  loop?: boolean
+  forceMount?: boolean
+  class?: string
+}
+
+/** Groups related items (a11y). Backed by reka-ui DropdownMenuGroup. @slot default */
+export interface DropdownMenuGroupProps {
+  asChild?: boolean
+  as?: string | object
+}
+
+/**
+ * Actionable row. The only part with a variant.
+ * @slot default
+ */
+export interface DropdownMenuItemProps {
+  /** @default 'default' */
+  variant?: 'default' | 'destructive'
+  /** Indent to align with checkbox/radio items. */
+  inset?: boolean
+  disabled?: boolean
+  textValue?: string
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+
+/** Section heading inside the menu (px-2 py-1.5, font-medium). `inset` indents it. @slot default */
+export interface DropdownMenuLabelProps {
+  inset?: boolean
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+
+/** Thin divider between sections (-mx-1 my-1 h-px). */
+export interface DropdownMenuSeparatorProps {
+  asChild?: boolean
+  as?: string | object
+  class?: string
+}
+
+/** Right-aligned muted keyboard hint (ml-auto, text-xs, tracking-widest). @slot default */
+export interface DropdownMenuShortcutProps {
+  class?: string
+}
+
+/** Toggle row with a left check indicator. v-model:checked. @slot default */
+export interface DropdownMenuCheckboxItemProps {
+  checked?: boolean | 'indeterminate'
+  disabled?: boolean
+  textValue?: string
+  class?: string
+}
+export interface DropdownMenuCheckboxItemEmits {
+  (e: 'update:checked', value: boolean): void
+  (e: 'select', event: Event): void
+}
+
+/** Group of mutually exclusive radio items. v-model. Backed by reka-ui DropdownMenuRadioGroup. @slot default */
+export interface DropdownMenuRadioGroupProps {
+  modelValue?: string
+}
+export interface DropdownMenuRadioGroupEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
+/** Radio row with a left dot indicator. @slot default */
+export interface DropdownMenuRadioItemProps {
+  value: string
+  disabled?: boolean
+  textValue?: string
+  class?: string
+}
+export interface DropdownMenuRadioItemEmits {
+  (e: 'select', event: Event): void
+}
+
+/** Submenu root. v-model:open. Backed by reka-ui DropdownMenuSub. @slot default */
+export interface DropdownMenuSubProps {
+  open?: boolean
+  defaultOpen?: boolean
+}
+export interface DropdownMenuSubEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+/** Row that opens a submenu; shows a trailing chevron. `inset` indents it. @slot default */
+export interface DropdownMenuSubTriggerProps {
+  inset?: boolean
+  disabled?: boolean
+  textValue?: string
+  class?: string
+}
+
+/** Portalled submenu surface. Same look as Content; shadow-lg. @slot default */
+export interface DropdownMenuSubContentProps {
+  sideOffset?: number
+  alignOffset?: number
+  forceMount?: boolean
+  class?: string
+}
+
+export declare const DropdownMenu: DefineComponent<DropdownMenuProps>
+export declare const DropdownMenuTrigger: DefineComponent<DropdownMenuTriggerProps>
+export declare const DropdownMenuContent: DefineComponent<DropdownMenuContentProps>
+export declare const DropdownMenuGroup: DefineComponent<DropdownMenuGroupProps>
+export declare const DropdownMenuItem: DefineComponent<DropdownMenuItemProps>
+export declare const DropdownMenuLabel: DefineComponent<DropdownMenuLabelProps>
+export declare const DropdownMenuSeparator: DefineComponent<DropdownMenuSeparatorProps>
+export declare const DropdownMenuShortcut: DefineComponent<DropdownMenuShortcutProps>
+export declare const DropdownMenuCheckboxItem: DefineComponent<DropdownMenuCheckboxItemProps>
+export declare const DropdownMenuRadioGroup: DefineComponent<DropdownMenuRadioGroupProps>
+export declare const DropdownMenuRadioItem: DefineComponent<DropdownMenuRadioItemProps>
+export declare const DropdownMenuSub: DefineComponent<DropdownMenuSubProps>
+export declare const DropdownMenuSubTrigger: DefineComponent<DropdownMenuSubTriggerProps>
+export declare const DropdownMenuSubContent: DefineComponent<DropdownMenuSubContentProps>
+/** Re-exported reka-ui portal primitive. */
+export declare const DropdownMenuPortal: DefineComponent
diff --git a/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.html b/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.html
new file mode 100644
index 000000000..ef045f5d7
--- /dev/null
+++ b/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.html
@@ -0,0 +1,43 @@
+<!-- @dsCard group="Overlays" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-dm-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-dm-card *{box-sizing:border-box;}
+.ds-title{font-size:13px;font-weight:600;margin:0 0 2px;}
+.ds-sub{font-size:11px;color:var(--muted-foreground);margin:0 0 14px;}
+.ds-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 6px;}
+.ds-trigger{height:36px;display:inline-flex;align-items:center;padding:0 14px;font-size:13px;font-weight:500;border-radius:calc(var(--radius) - 2px);background:transparent;border:1px solid var(--border);color:var(--foreground);}
+.ds-menu{width:200px;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:4px;box-shadow:0 4px 6px -1px rgba(0,0,0,.12);}
+.ds-label{padding:6px 8px;font-size:12px;font-weight:500;color:var(--foreground);}
+.ds-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:13px;border-radius:calc(var(--radius) - 4px);color:var(--foreground);}
+.ds-item.hl{background:var(--accent);color:var(--accent-foreground);}
+.ds-item.destr{color:var(--destructive);}
+.ds-kbd{font-size:11px;letter-spacing:.12em;color:var(--muted-foreground);}
+.ds-sep{height:1px;background:var(--border);margin:4px -4px;}
+</style>
+<div class="ds-dm-card">
+  <p class="ds-title">DropdownMenu</p>
+  <p class="ds-sub">Action menu · items · separator · destructive</p>
+  <div class="ds-stage">
+    <span class="ds-trigger">Actions</span>
+    <div class="ds-menu">
+      <div class="ds-label">Job</div>
+      <div class="ds-item hl"><span>Edit</span><span class="ds-kbd">⌘E</span></div>
+      <div class="ds-item"><span>Duplicate</span></div>
+      <div class="ds-sep"></div>
+      <div class="ds-item destr"><span>Delete</span></div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.prompt.md b/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.prompt.md
new file mode 100644
index 000000000..f2ae75f3d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/dropdown-menu/DropdownMenu/DropdownMenu.prompt.md
@@ -0,0 +1,73 @@
+# DropdownMenu
+
+A menu of actions or selections that opens from a trigger (row/kebab menus, toolbar menus, context actions). Supports labels, separators, checkbox/radio items, submenus, and keyboard shortcuts. Backed by **reka-ui** `DropdownMenuRoot` and portalled to the body.
+
+## Parts
+
+- **DropdownMenu** — root; owns open state (`v-model:open`).
+- **DropdownMenuTrigger** — element that opens it (wrap a Button with `as-child`).
+- **DropdownMenuContent** — portalled menu surface (`bg-popover`, `rounded-md`, `border`, `p-1`, `shadow-md`, `min-w-[8rem]`).
+- **DropdownMenuItem** — actionable row. Carries `variant` (`'default' | 'destructive'`) and `inset`.
+- **DropdownMenuGroup** — groups related items for a11y.
+- **DropdownMenuLabel** — section heading (`inset` to indent).
+- **DropdownMenuSeparator** — thin divider.
+- **DropdownMenuShortcut** — right-aligned muted keyboard hint.
+- **DropdownMenuCheckboxItem** — toggle row with left check indicator (`v-model:checked`).
+- **DropdownMenuRadioGroup** + **DropdownMenuRadioItem** — mutually exclusive choices (`v-model` on the group; dot indicator).
+- **DropdownMenuSub** + **DropdownMenuSubTrigger** + **DropdownMenuSubContent** — nested submenu (trigger shows a trailing chevron).
+- **DropdownMenuPortal** — re-exported reka-ui portal primitive for advanced placement.
+
+## Props
+
+The only variant axis in the group is on **DropdownMenuItem**:
+
+- `variant?`: `'default' | 'destructive'` — default `'default'`. `destructive` tints the row red.
+- `inset?`: `boolean` — indents (`pl-8`) to align with checkbox/radio/label rows.
+
+Other key props:
+
+- `DropdownMenuContent`: `sideOffset?` (default `4`), `align?`, `side?`, `class?`.
+- `DropdownMenuLabel` / `DropdownMenuSubTrigger`: `inset?`.
+- `DropdownMenuCheckboxItem`: `checked?` (`v-model:checked`).
+- `DropdownMenuRadioGroup`: `modelValue` (`v-model`); `DropdownMenuRadioItem`: `value` (required).
+- Triggers/items: `disabled?`, `as?`, `as-child?`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator,
+  DropdownMenuShortcut,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">Actions</Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-48" align="end">
+      <DropdownMenuLabel>Job</DropdownMenuLabel>
+      <DropdownMenuItem>
+        Edit
+        <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuItem>Duplicate</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+```
+
+## Notes
+
+- Backed by **reka-ui** `DropdownMenu*`; `DropdownMenuContent` and `DropdownMenuSubContent` wrap `DropdownMenuPortal`, so the menu renders at the document root.
+- Controlled or uncontrolled via `v-model:open` on the root.
+- Checkbox/radio items render their own indicator (check / dot) on the left — don't add icons there.
+- `DropdownMenuSubTrigger` auto-appends a trailing chevron; submenu open state is its own `v-model:open` on `DropdownMenuSub`.
+- Use `inset` on items/labels to keep text aligned in menus that mix plain items with checkbox/radio rows.
+- Reach for DropdownMenu (action/selection lists) over Popover (free-form content) or Dialog (modal flows).
diff --git a/.design-sync/ds-bundle/components/input/Input/Input.d.ts b/.design-sync/ds-bundle/components/input/Input/Input.d.ts
new file mode 100644
index 000000000..17f0fc69d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/input/Input/Input.d.ts
@@ -0,0 +1,24 @@
+// Input — single-line text field. shadcn-vue wrapper over a native <input>.
+// Source: frontend/src/components/ui/input/Input.vue
+
+import type { DefineComponent } from 'vue'
+
+export interface InputProps {
+  /** Initial value when uncontrolled. */
+  defaultValue?: string | number
+  /** v-model value. */
+  modelValue?: string | number
+  /** Extra classes merged via cn(). */
+  class?: string
+  // Native <input> attributes (type, placeholder, disabled, readonly,
+  // aria-invalid, name, id, etc.) are passed through via fallthrough attrs.
+}
+
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+}
+
+/**
+ * @slot (none) — renders a native <input data-slot="input">.
+ */
+export declare const Input: DefineComponent<InputProps>
diff --git a/.design-sync/ds-bundle/components/input/Input/Input.html b/.design-sync/ds-bundle/components/input/Input/Input.html
new file mode 100644
index 000000000..f46684247
--- /dev/null
+++ b/.design-sync/ds-bundle/components/input/Input/Input.html
@@ -0,0 +1,39 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+      --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    }
+    .ds-card{width:360px;box-sizing:border-box;padding:20px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);}
+    .ds-title{font-size:13px;font-weight:600;margin:0 0 14px;}
+    .ds-label{font-size:12px;color:var(--muted-foreground);margin:0 0 6px;}
+    .ds-input{display:block;width:100%;height:2.25rem;box-sizing:border-box;padding:0.25rem 0.75rem;font-size:14px;background:transparent;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,0.04);outline:none;}
+    .ds-input.placeholder{color:var(--muted-foreground);}
+    .ds-input.focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);}
+    .ds-input.invalid{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);}
+    .ds-row{margin-bottom:12px;}
+  </style>
+  <p class="ds-title">Input</p>
+  <div class="ds-row">
+    <p class="ds-label">Default</p>
+    <input class="ds-input placeholder" value="Placeholder text" readonly />
+  </div>
+  <div class="ds-row">
+    <p class="ds-label">Focused</p>
+    <input class="ds-input focus" value="hello@example.com" readonly />
+  </div>
+  <div class="ds-row" style="margin-bottom:0;">
+    <p class="ds-label">aria-invalid</p>
+    <input class="ds-input invalid" value="bad value" readonly />
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/input/Input/Input.prompt.md b/.design-sync/ds-bundle/components/input/Input/Input.prompt.md
new file mode 100644
index 000000000..271cca439
--- /dev/null
+++ b/.design-sync/ds-bundle/components/input/Input/Input.prompt.md
@@ -0,0 +1,37 @@
+# Input
+
+Single-line text field. A thin shadcn-vue wrapper over a native `<input>` with the design-system border, focus ring, and invalid styling. Use for any short text/number/email/password entry.
+
+## Parts
+
+- `Input` — the field itself (only export). Renders `<input data-slot="input">`.
+
+## Props
+
+- `modelValue?: string | number` — bound value (`v-model`).
+- `defaultValue?: string | number` — initial value when used uncontrolled.
+- `class?: string` — extra classes, merged via `cn()`.
+- All native `<input>` attributes pass through: `type`, `placeholder`, `disabled`, `readonly`, `name`, `id`, `aria-invalid`, etc.
+
+No variants or sizes. Fixed height `h-9` (2.25rem), full width, `rounded-md`, `px-3 py-1`, `text-base` (`md:text-sm`).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Input } from '@/components/ui/input'
+import { ref } from 'vue'
+const email = ref('')
+</script>
+
+<template>
+  <Input v-model="email" type="email" placeholder="you@example.com" />
+</template>
+```
+
+## Notes
+
+- Not backed by reka-ui — it's a plain `<input>` using `useVModel` (passive two-way binding).
+- `aria-invalid="true"` switches the border/ring to the destructive token.
+- `:disabled` applies `cursor-not-allowed` and 50% opacity.
+- Styles `file:` pseudo for file inputs; focus shows a 3px `ring-ring/50`.
diff --git a/.design-sync/ds-bundle/components/label/Label/Label.d.ts b/.design-sync/ds-bundle/components/label/Label/Label.d.ts
new file mode 100644
index 000000000..630b91f09
--- /dev/null
+++ b/.design-sync/ds-bundle/components/label/Label/Label.d.ts
@@ -0,0 +1,20 @@
+// Label — accessible form label. shadcn-vue wrapper over reka-ui Label.
+// Source: frontend/src/components/ui/label/Label.vue
+
+import type { DefineComponent } from 'vue'
+import type { LabelProps as RekaLabelProps } from 'reka-ui'
+
+export interface LabelProps extends /* reka-ui */ RekaLabelProps {
+  /** Associates the label with a control by id (native `for`). */
+  for?: string
+  /** Render as a different element / child (reka-ui asChild). */
+  as?: RekaLabelProps['as']
+  asChild?: boolean
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+
+/**
+ * @slot default — label text/content (may include icons; layout is flex gap-2).
+ */
+export declare const Label: DefineComponent<LabelProps>
diff --git a/.design-sync/ds-bundle/components/label/Label/Label.html b/.design-sync/ds-bundle/components/label/Label/Label.html
new file mode 100644
index 000000000..df223084c
--- /dev/null
+++ b/.design-sync/ds-bundle/components/label/Label/Label.html
@@ -0,0 +1,30 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+      --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    }
+    .ds-card{width:360px;box-sizing:border-box;padding:20px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);}
+    .ds-title{font-size:13px;font-weight:600;margin:0 0 14px;}
+    .ds-hint{font-size:12px;color:var(--muted-foreground);margin:0 0 6px;}
+    .ds-label{display:flex;align-items:center;gap:0.5rem;font-size:14px;font-weight:500;line-height:1;user-select:none;color:var(--foreground);}
+    .ds-input{display:block;width:100%;height:2.25rem;margin-top:6px;box-sizing:border-box;padding:0.25rem 0.75rem;font-size:14px;background:transparent;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);color:var(--muted-foreground);}
+    .ds-disabled{opacity:0.5;}
+  </style>
+  <p class="ds-title">Label</p>
+  <p class="ds-hint">Default</p>
+  <label class="ds-label" for="x">Email address</label>
+  <input class="ds-input" value="you@example.com" readonly />
+  <p class="ds-hint" style="margin-top:16px;">Disabled (peer-disabled)</p>
+  <label class="ds-label ds-disabled">Disabled field</label>
+</div>
diff --git a/.design-sync/ds-bundle/components/label/Label/Label.prompt.md b/.design-sync/ds-bundle/components/label/Label/Label.prompt.md
new file mode 100644
index 000000000..239bc890a
--- /dev/null
+++ b/.design-sync/ds-bundle/components/label/Label/Label.prompt.md
@@ -0,0 +1,37 @@
+# Label
+
+Accessible caption for a form control. shadcn-vue wrapper over the reka-ui `Label` primitive. Use to label inputs, checkboxes, switches, and selects; pair with `for` (or wrap the control) for click-to-focus.
+
+## Parts
+
+- `Label` — the label element (only export). Renders `data-slot="label"`.
+
+## Props
+
+- `for?: string` — id of the control this labels.
+- `as` / `asChild` — render as a different element/child (reka-ui passthrough).
+- `class?: string` — extra classes, merged via `cn()`.
+
+No variants or sizes. Styled `text-sm font-medium leading-none`, `flex items-center gap-2`, `select-none`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+</script>
+
+<template>
+  <div class="grid gap-2">
+    <Label for="email">Email</Label>
+    <Input id="email" type="email" />
+  </div>
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `Label`.
+- Disabled-aware: dims/blocks pointer events when inside a `group-data-[disabled=true]` group or a `peer:disabled` sibling.
+- Lays out children with `flex gap-2`, so an inline icon + text sits aligned.
diff --git a/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.d.ts b/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.d.ts
new file mode 100644
index 000000000..7bab7c307
--- /dev/null
+++ b/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.d.ts
@@ -0,0 +1,30 @@
+export interface LoadingStateProps {
+  /** REQUIRED. True while data is being fetched. */
+  isLoading: boolean
+  /** REQUIRED. True once data exists (decides loading vs empty vs content). */
+  hasData: boolean
+  /** Text shown during loading. @default 'Loading data, please wait' */
+  loadingMessage?: string
+  /** Text shown when not loading and no data. @default 'No data found' */
+  emptyMessage?: string
+  /** 'none' hides the default empty illustration; any other value shows it. @default 'none' */
+  emptyIcon?: string
+  /** Show the spinning indicator in the loading state. @default true */
+  showSpinner?: boolean
+  /** Center the loading/empty content horizontally. @default true */
+  centered?: boolean
+  /** CSS min-height applied to loading/empty containers. @default 'auto' */
+  minHeight?: string
+}
+
+/**
+ * LoadingState — a tri-state wrapper: loading → empty → content.
+ *  - isLoading && !hasData  → spinner + loadingMessage
+ *  - !isLoading && !hasData → empty icon + emptyMessage + #empty-actions
+ *  - otherwise              → renders the default slot (your content)
+ *
+ * @slot default      — actual content, rendered when data is present.
+ * @slot empty-icon   — overrides the default empty illustration (when emptyIcon !== 'none').
+ * @slot empty-actions— actions shown under the empty message (e.g. a "Create" button).
+ */
+export declare const LoadingState: import('vue').DefineComponent<LoadingStateProps>
diff --git a/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.html b/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.html
new file mode 100644
index 000000000..8238d34ef
--- /dev/null
+++ b/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.html
@@ -0,0 +1,34 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  @keyframes spin{to{transform:rotate(360deg)}}
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .panel{border:1px solid var(--border);border-radius:var(--radius);padding:16px}
+  .loading{display:flex;align-items:center;justify-content:center;gap:8px;color:#6b7280;font-size:13px;padding:16px 0}
+  .spinner{width:16px;height:16px;border-radius:9999px;border:2px solid transparent;border-bottom-color:#3b82f6;animation:spin 0.8s linear infinite}
+  .empty{text-align:center;color:#6b7280;font-size:13px;padding:16px 0}
+  .empty svg{width:32px;height:32px;color:#d1d5db;margin:0 auto 8px}
+</style>
+<div class="dscard">
+  <h4>LoadingState</h4>
+  <div class="sub">Tri-state wrapper: loading → empty → content</div>
+  <div class="panel loading"><span class="spinner"></span><span>Loading data, please wait</span></div>
+  <div class="panel empty">
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
+    <p>No data found</p>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.prompt.md b/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.prompt.md
new file mode 100644
index 000000000..c6f62e8eb
--- /dev/null
+++ b/.design-sync/ds-bundle/components/loading-state/LoadingState/LoadingState.prompt.md
@@ -0,0 +1,58 @@
+# LoadingState
+
+A tri-state content wrapper that switches between a loading spinner, an empty state, and your real content based on two booleans. Use to wrap any data-driven region (lists, tables, panels) so loading/empty UX is consistent.
+
+## Parts
+
+- **LoadingState** — a single bespoke component (not shadcn/reka-ui based). It picks one of three branches:
+  1. `isLoading && !hasData` → spinner + `loadingMessage`.
+  2. `!isLoading && !hasData` → empty illustration + `emptyMessage` + `#empty-actions`.
+  3. otherwise → the default slot (your content).
+
+## Props
+
+- `isLoading: boolean` — **required**.
+- `hasData: boolean` — **required**.
+- `loadingMessage?: string` — default `'Loading data, please wait'`.
+- `emptyMessage?: string` — default `'No data found'`.
+- `emptyIcon?: string` — default `'none'` (hides the default document SVG). Any other value shows it.
+- `showSpinner?: boolean` — default `true`.
+- `centered?: boolean` — default `true` (centers loading/empty content).
+- `minHeight?: string` — default `'auto'` (CSS min-height on the loading/empty containers).
+
+## Slots
+
+- `default` — content rendered once data is present.
+- `empty-icon` — override the empty illustration (only when `emptyIcon !== 'none'`).
+- `empty-actions` — buttons/links under the empty message.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import LoadingState from '@/components/ui/LoadingState.vue'
+</script>
+
+<template>
+  <LoadingState
+    :is-loading="pending"
+    :has-data="jobs.length > 0"
+    loading-message="Loading jobs…"
+    empty-message="No jobs yet"
+    empty-icon="show"
+    min-height="200px"
+  >
+    <template #empty-actions>
+      <Button>Create job</Button>
+    </template>
+
+    <JobList :jobs="jobs" />
+  </LoadingState>
+</template>
+```
+
+## Notes
+
+- Standalone top-level file (`@/components/ui/LoadingState.vue`), imported as a default export — not via a group `index.ts`.
+- Loading and empty text use `text-gray-500`; the spinner uses `border-blue-500` (hard-coded Tailwind colors, NOT design tokens).
+- `hasData` is the source of truth for "content vs empty" in both loading branches: while loading with data already present, the default slot keeps showing (no spinner flash on refetch).
diff --git a/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.d.ts b/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.d.ts
new file mode 100644
index 000000000..82d80f8a1
--- /dev/null
+++ b/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.d.ts
@@ -0,0 +1,31 @@
+/**
+ * Pagination — a self-contained numbered pager. NOT a reka-ui primitive:
+ * it is a single custom component built from ghost Buttons + chevron icons.
+ * Renders prev/next chevrons plus a windowed run of page-number buttons
+ * (max 10 visible, centered on the current page). The active page button
+ * is highlighted with the primary background.
+ *
+ * Single component — no parts.
+ */
+export interface PaginationProps {
+  /** Current page number (1-based). */
+  page: number
+  /** Total number of pages. */
+  total: number
+}
+
+export interface PaginationEmits {
+  /** Emitted when the user picks a page or uses the prev/next chevrons. */
+  (e: 'update:page', page: number): void
+}
+
+export declare const Pagination: import('vue').DefineComponent<
+  PaginationProps,
+  object,
+  object,
+  object,
+  object,
+  object,
+  object,
+  PaginationEmits
+>
diff --git a/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.html b/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.html
new file mode 100644
index 000000000..07e77e3f4
--- /dev/null
+++ b/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.html
@@ -0,0 +1,43 @@
+<!-- @dsCard group="Data & Navigation" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-pg-card{width:360px;box-sizing:border-box;background:var(--card);color:var(--card-foreground);
+  border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
+.ds-pg-card h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--foreground);}
+.ds-pg{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 0;}
+.ds-pg .btn{height:32px;min-width:32px;padding:0 8px;display:inline-flex;align-items:center;
+  justify-content:center;font-size:14px;font-weight:500;border:none;background:transparent;
+  color:var(--foreground);border-radius:calc(var(--radius) - 2px);cursor:pointer;}
+.ds-pg .btn:hover{background:var(--accent);}
+.ds-pg .btn.active{background:var(--primary);color:#fff;}
+.ds-pg .btn.dis{color:var(--muted-foreground);opacity:.5;}
+.ds-pg svg{width:16px;height:16px;}
+</style>
+<div class="ds-pg-card">
+  <h3>Pagination</h3>
+  <div class="ds-pg">
+    <button class="btn dis" aria-label="Previous">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
+    </button>
+    <button class="btn active">1</button>
+    <button class="btn">2</button>
+    <button class="btn">3</button>
+    <button class="btn">4</button>
+    <button class="btn">5</button>
+    <button class="btn" aria-label="Next">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
+    </button>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.prompt.md b/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.prompt.md
new file mode 100644
index 000000000..2e8e72b93
--- /dev/null
+++ b/.design-sync/ds-bundle/components/pagination/Pagination/Pagination.prompt.md
@@ -0,0 +1,38 @@
+# Pagination
+
+A compact numbered pager for stepping through pages of results (e.g. a paginated table or list). Use when you have a known total page count and want prev/next plus direct page selection.
+
+## Parts
+Single self-contained component — no sub-parts to compose. It is a custom wrapper (not a reka-ui primitive); internally it renders ghost-variant `Button`s and `ChevronLeft`/`ChevronRight` icons from lucide.
+
+## Props
+- **page**: `number` (required) — the current 1-based page.
+- **total**: `number` (required) — total page count.
+- Emits **`update:page`** with the new page number — use `v-model:page`.
+
+No variant or size props.
+
+## Behavior
+- Shows a left chevron, a run of page-number buttons, then a right chevron, centered with `gap-1`.
+- At most **10** page buttons are visible. With more pages, the window slides to keep the current page centered, clamped to the start/end.
+- The active page button gets `bg-primary text-white`; others are ghost buttons.
+- Prev is disabled on page 1; next is disabled on the last page; both chevrons disable when `total < 2`.
+
+## Usage
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Pagination } from '@/components/ui/pagination'
+
+const page = ref(1)
+</script>
+
+<template>
+  <Pagination v-model:page="page" :total="12" />
+</template>
+```
+
+## Notes
+- Not backed by reka-ui — it composes the local `Button` (size `sm`, variant `ghost`) and lucide chevrons.
+- Controlled only: it owns no internal page state; pass `page` and react to `update:page` (typically `v-model:page`).
+- Page numbers are 1-based. `total` is a page count, not an item count.
diff --git a/.design-sync/ds-bundle/components/popover/Popover/Popover.d.ts b/.design-sync/ds-bundle/components/popover/Popover/Popover.d.ts
new file mode 100644
index 000000000..7950655e0
--- /dev/null
+++ b/.design-sync/ds-bundle/components/popover/Popover/Popover.d.ts
@@ -0,0 +1,57 @@
+// Popover — floating panel anchored to a trigger (shadcn-vue, backed by reka-ui PopoverRoot).
+// No cva variant axis.
+
+import type { DefineComponent } from 'vue'
+
+/** Root. Owns open state (v-model:open). Backed by reka-ui PopoverRoot. */
+export interface PopoverProps {
+  open?: boolean
+  defaultOpen?: boolean
+  modal?: boolean
+}
+export interface PopoverEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+/** Element the popover opens from. Backed by reka-ui PopoverTrigger. */
+export interface PopoverTriggerProps {
+  asChild?: boolean
+  as?: string | object
+}
+
+/** Optional alternate anchor to position against (decoupled from the trigger). */
+export interface PopoverAnchorProps {
+  asChild?: boolean
+  as?: string | object
+  reference?: object
+}
+
+/**
+ * Portalled floating panel. w-72, rounded-md, border, p-4, shadow-md.
+ * Backed by reka-ui PopoverContent inside PopoverPortal.
+ * @slot default — panel content.
+ */
+export interface PopoverContentProps {
+  /** @default 'center' */
+  align?: 'start' | 'center' | 'end'
+  alignOffset?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  /** @default 4 */
+  sideOffset?: number
+  avoidCollisions?: boolean
+  forceMount?: boolean
+  class?: string
+}
+export interface PopoverContentEmits {
+  (e: 'escapeKeyDown', event: KeyboardEvent): void
+  (e: 'pointerDownOutside', event: Event): void
+  (e: 'focusOutside', event: Event): void
+  (e: 'interactOutside', event: Event): void
+  (e: 'openAutoFocus', event: Event): void
+  (e: 'closeAutoFocus', event: Event): void
+}
+
+export declare const Popover: DefineComponent<PopoverProps>
+export declare const PopoverTrigger: DefineComponent<PopoverTriggerProps>
+export declare const PopoverAnchor: DefineComponent<PopoverAnchorProps>
+export declare const PopoverContent: DefineComponent<PopoverContentProps>
diff --git a/.design-sync/ds-bundle/components/popover/Popover/Popover.html b/.design-sync/ds-bundle/components/popover/Popover/Popover.html
new file mode 100644
index 000000000..2e41e92d5
--- /dev/null
+++ b/.design-sync/ds-bundle/components/popover/Popover/Popover.html
@@ -0,0 +1,39 @@
+<!-- @dsCard group="Overlays" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-pop-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-pop-card *{box-sizing:border-box;}
+.ds-title{font-size:13px;font-weight:600;margin:0 0 2px;}
+.ds-sub{font-size:11px;color:var(--muted-foreground);margin:0 0 14px;}
+.ds-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 6px;}
+.ds-trigger{height:36px;display:inline-flex;align-items:center;padding:0 14px;font-size:13px;font-weight:500;border-radius:calc(var(--radius) - 2px);background:transparent;border:1px solid var(--border);color:var(--foreground);}
+.ds-content{width:240px;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.12);}
+.ds-c-title{font-size:13px;font-weight:600;margin:0 0 4px;}
+.ds-c-desc{font-size:11px;color:var(--muted-foreground);margin:0 0 10px;}
+.ds-field{height:30px;border:1px solid var(--input);border-radius:calc(var(--radius) - 4px);display:flex;align-items:center;padding:0 8px;font-size:11px;color:var(--muted-foreground);margin-top:6px;}
+</style>
+<div class="ds-pop-card">
+  <p class="ds-title">Popover</p>
+  <p class="ds-sub">Anchored panel · w-72 · p-4 · shadow-md</p>
+  <div class="ds-stage">
+    <span class="ds-trigger">Options</span>
+    <div class="ds-content">
+      <p class="ds-c-title">Dimensions</p>
+      <p class="ds-c-desc">Set width and height.</p>
+      <div class="ds-field">Width</div>
+      <div class="ds-field">Height</div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/popover/Popover/Popover.prompt.md b/.design-sync/ds-bundle/components/popover/Popover/Popover.prompt.md
new file mode 100644
index 000000000..9f3013504
--- /dev/null
+++ b/.design-sync/ds-bundle/components/popover/Popover/Popover.prompt.md
@@ -0,0 +1,49 @@
+# Popover
+
+A small floating panel anchored to a trigger, for rich content that doesn't warrant a modal (mini-forms, pickers, extra detail, settings). Non-blocking by default. Backed by **reka-ui** `PopoverRoot` and portalled to the body.
+
+## Parts
+
+- **Popover** — root; owns open state (`v-model:open`).
+- **PopoverTrigger** — element the panel opens from (wrap a Button with `as-child`).
+- **PopoverContent** — portalled floating panel (`w-72`, `rounded-md`, `border`, `p-4`, `shadow-md`); positioned with `align`/`side`/`sideOffset`.
+- **PopoverAnchor** — optional alternate anchor to position against, decoupled from the trigger.
+
+## Props
+
+No cva variants.
+
+- `Popover`: `open?`, `defaultOpen?`, `modal?`.
+- `PopoverContent`: `align?` `'start' | 'center' | 'end'` (default `'center'`), `sideOffset?` (default `4`), `side?` `'top' | 'right' | 'bottom' | 'left'`, `alignOffset?`, `avoidCollisions?`, `class?`. Emits `escape-key-down`, `interact-outside`, `close-auto-focus`, etc.
+- `PopoverTrigger` / `PopoverAnchor`: `as?`, `as-child?`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline">Options</Button>
+    </PopoverTrigger>
+    <PopoverContent>
+      <div class="grid gap-2">
+        <p class="text-sm font-medium">Dimensions</p>
+        <!-- fields -->
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+```
+
+## Notes
+
+- Backed by **reka-ui** `Popover*`; `PopoverContent` wraps `PopoverPortal`, so it renders at the document root and escapes overflow/stacking contexts.
+- `PopoverContent` sets `inherit-attrs: false` and forwards `$attrs` through to the primitive, so extra attributes (e.g. `id`, ARIA) land on the panel element.
+- Controlled or uncontrolled via `v-model:open`.
+- Use `PopoverAnchor` when the panel should position against an element other than the trigger.
+- Choose Popover over Dialog for non-blocking, lightweight overlays; over Tooltip when the content is interactive (Tooltip is hover-only, non-interactive).
diff --git a/.design-sync/ds-bundle/components/progress/Progress/Progress.d.ts b/.design-sync/ds-bundle/components/progress/Progress/Progress.d.ts
new file mode 100644
index 000000000..69fc772b5
--- /dev/null
+++ b/.design-sync/ds-bundle/components/progress/Progress/Progress.d.ts
@@ -0,0 +1,21 @@
+import type { ProgressRootProps } from 'reka-ui'
+
+export interface ProgressProps extends ProgressRootProps {
+  /**
+   * Current value, 0–100 (drives the indicator's translateX). @default 0
+   * (forwarded as ProgressRoot's modelValue; supports v-model).
+   */
+  modelValue?: number | null
+  /** Max value (reka-ui ProgressRootProps). @default 100 */
+  max?: number
+  /** Extra classes merged via cn() on the track. */
+  class?: string
+}
+
+/**
+ * Progress — a determinate horizontal progress bar.
+ * Track: bg-primary/20 h-2 w-full rounded-full; indicator: bg-primary,
+ * width animated via transform translateX(-(100 - value)%).
+ * No slot.
+ */
+export declare const Progress: import('vue').DefineComponent<ProgressProps>
diff --git a/.design-sync/ds-bundle/components/progress/Progress/Progress.html b/.design-sync/ds-bundle/components/progress/Progress/Progress.html
new file mode 100644
index 000000000..7bb56444a
--- /dev/null
+++ b/.design-sync/ds-bundle/components/progress/Progress/Progress.html
@@ -0,0 +1,29 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:14px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .track{position:relative;height:8px;width:100%;overflow:hidden;border-radius:9999px;background:color-mix(in oklab,var(--primary) 20%,transparent)}
+  .ind{height:100%;background:var(--primary);border-radius:9999px}
+  .lbl{font-size:11px;color:var(--muted-foreground);display:flex;justify-content:space-between}
+</style>
+<div class="dscard">
+  <h4>Progress</h4>
+  <div class="sub">Determinate bar · modelValue 0–100 (default 0)</div>
+  <div><div class="lbl"><span>33%</span></div><div class="track"><div class="ind" style="width:33%"></div></div></div>
+  <div><div class="lbl"><span>66%</span></div><div class="track"><div class="ind" style="width:66%"></div></div></div>
+  <div><div class="lbl"><span>100%</span></div><div class="track"><div class="ind" style="width:100%"></div></div></div>
+</div>
diff --git a/.design-sync/ds-bundle/components/progress/Progress/Progress.prompt.md b/.design-sync/ds-bundle/components/progress/Progress/Progress.prompt.md
new file mode 100644
index 000000000..98f0715c2
--- /dev/null
+++ b/.design-sync/ds-bundle/components/progress/Progress/Progress.prompt.md
@@ -0,0 +1,35 @@
+# Progress
+
+A determinate horizontal progress bar (0–100%). Use for uploads, multi-step completion, quota/usage meters. For indeterminate spinners use a Skeleton or LoadingState instead.
+
+## Parts
+
+- **Progress** — the only exported part. Wraps reka-ui `ProgressRoot` + `ProgressIndicator` internally; you don't compose sub-parts. Track is `bg-primary/20`, the filled indicator is `bg-primary` and animates with `transition-all`.
+
+## Props
+
+- `modelValue?: number | null` — current percent, 0–100. Default `0`. Bind with `v-model`.
+- `max?: number` — reka-ui max (default 100).
+- `class?: string` — extra classes on the track (e.g. height via `h-1`/`h-3`).
+
+Geometry: `h-2 w-full rounded-full overflow-hidden`. The fill is positioned by `translateX(-(100 - value)%)`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Progress } from '@/components/ui/progress'
+const value = ref(60)
+</script>
+
+<template>
+  <Progress v-model="value" />
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `ProgressRoot` / `ProgressIndicator`.
+- Value defaults to `0`; pass a number (or `v-model`) — passing `null` is treated as 0 for the transform.
+- Determinate only in this kit (the indicator width is computed from `modelValue`); no built-in indeterminate state.
diff --git a/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.d.ts b/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.d.ts
new file mode 100644
index 000000000..80921f91d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.d.ts
@@ -0,0 +1,90 @@
+// RangeCalendar — start/end date-range calendar built on reka-ui RangeCalendarRoot.
+// Mirrors Calendar but selects a { start, end } range of @internationalized/date DateValues.
+// The RangeCalendar.vue root composes every part below; most consumers render
+// <RangeCalendar v-model="..." /> only. Parts are exported for custom layouts.
+
+import type { HTMLAttributes } from 'vue'
+import type {
+  RangeCalendarRootProps,
+  RangeCalendarRootEmits,
+  RangeCalendarCellProps,
+  RangeCalendarCellTriggerProps,
+  RangeCalendarGridProps,
+  RangeCalendarGridBodyProps,
+  RangeCalendarGridHeadProps,
+  RangeCalendarGridRowProps,
+  RangeCalendarHeadCellProps,
+  RangeCalendarHeaderProps,
+  RangeCalendarHeadingProps,
+  RangeCalendarNextProps,
+  RangeCalendarPrevProps,
+} from 'reka-ui'
+
+/**
+ * Root range calendar. Wraps reka-ui RangeCalendarRoot and renders the full grid.
+ * v-model binds a DateRange `{ start: DateValue; end: DateValue }` from '@internationalized/date'.
+ * Common inherited props: modelValue, placeholder, disabled, readonly, minValue, maxValue,
+ * isDateDisabled, isDateUnavailable, weekdayFormat, numberOfMonths, fixedWeeks, locale.
+ * @slot default (forwarded internally to parts)
+ */
+export interface RangeCalendarProps extends /* @vue-ignore */ RangeCalendarRootProps {
+  class?: HTMLAttributes['class']
+}
+export type RangeCalendarEmits = RangeCalendarRootEmits
+
+/** Cell wrapping a date; renders range-fill + rounded start/end corners via data attrs. @slot default */
+export interface RangeCalendarCellPropsExt extends /* @vue-ignore */ RangeCalendarCellProps {
+  class?: HTMLAttributes['class']
+}
+/** Pressable day button. Styled buttonVariants({ variant: 'ghost' }), h-8 w-8. `as` defaults to 'button'.
+ *  Carries data-selection-start / data-selection-end for endpoint highlighting. @slot default */
+export interface RangeCalendarCellTriggerPropsExt extends /* @vue-ignore */ RangeCalendarCellTriggerProps {
+  class?: HTMLAttributes['class']
+}
+/** One month's <table>. @slot default */
+export interface RangeCalendarGridPropsExt extends /* @vue-ignore */ RangeCalendarGridProps {
+  class?: HTMLAttributes['class']
+}
+/** <tbody> for day rows. @slot default */
+export interface RangeCalendarGridBodyPropsExt extends /* @vue-ignore */ RangeCalendarGridBodyProps {}
+/** <thead> for weekday row. @slot default */
+export interface RangeCalendarGridHeadPropsExt extends /* @vue-ignore */ RangeCalendarGridHeadProps {
+  class?: HTMLAttributes['class']
+}
+/** Week <tr>. @slot default */
+export interface RangeCalendarGridRowPropsExt extends /* @vue-ignore */ RangeCalendarGridRowProps {
+  class?: HTMLAttributes['class']
+}
+/** Weekday label cell. @slot default */
+export interface RangeCalendarHeadCellPropsExt extends /* @vue-ignore */ RangeCalendarHeadCellProps {
+  class?: HTMLAttributes['class']
+}
+/** Header bar (heading + prev/next). @slot default */
+export interface RangeCalendarHeaderPropsExt extends /* @vue-ignore */ RangeCalendarHeaderProps {
+  class?: HTMLAttributes['class']
+}
+/** Month/year heading. @slot default exposes { headingValue: string }. @slot default */
+export interface RangeCalendarHeadingPropsExt extends /* @vue-ignore */ RangeCalendarHeadingProps {
+  class?: HTMLAttributes['class']
+}
+/** Next-month button (outline icon, ChevronRight). @slot default */
+export interface RangeCalendarNextButtonPropsExt extends /* @vue-ignore */ RangeCalendarNextProps {
+  class?: HTMLAttributes['class']
+}
+/** Previous-month button (outline icon, ChevronLeft). @slot default */
+export interface RangeCalendarPrevButtonPropsExt extends /* @vue-ignore */ RangeCalendarPrevProps {
+  class?: HTMLAttributes['class']
+}
+
+export declare const RangeCalendar: import('vue').DefineComponent<RangeCalendarProps, {}, any>
+export declare const RangeCalendarCell: import('vue').DefineComponent<RangeCalendarCellPropsExt, {}, any>
+export declare const RangeCalendarCellTrigger: import('vue').DefineComponent<RangeCalendarCellTriggerPropsExt, {}, any>
+export declare const RangeCalendarGrid: import('vue').DefineComponent<RangeCalendarGridPropsExt, {}, any>
+export declare const RangeCalendarGridBody: import('vue').DefineComponent<RangeCalendarGridBodyPropsExt, {}, any>
+export declare const RangeCalendarGridHead: import('vue').DefineComponent<RangeCalendarGridHeadPropsExt, {}, any>
+export declare const RangeCalendarGridRow: import('vue').DefineComponent<RangeCalendarGridRowPropsExt, {}, any>
+export declare const RangeCalendarHeadCell: import('vue').DefineComponent<RangeCalendarHeadCellPropsExt, {}, any>
+export declare const RangeCalendarHeader: import('vue').DefineComponent<RangeCalendarHeaderPropsExt, {}, any>
+export declare const RangeCalendarHeading: import('vue').DefineComponent<RangeCalendarHeadingPropsExt, {}, any>
+export declare const RangeCalendarNextButton: import('vue').DefineComponent<RangeCalendarNextButtonPropsExt, {}, any>
+export declare const RangeCalendarPrevButton: import('vue').DefineComponent<RangeCalendarPrevButtonPropsExt, {}, any>
diff --git a/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.html b/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.html
new file mode 100644
index 000000000..d7ebe9d45
--- /dev/null
+++ b/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.html
@@ -0,0 +1,49 @@
+<!-- @dsCard group="Date & Time" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-cal-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-cal-title{font-size:13px;font-weight:600;color:var(--muted-foreground);margin:0 0 12px;}
+.ds-cal{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:12px;}
+.ds-cal-hdr{display:flex;align-items:center;justify-content:center;position:relative;padding-top:2px;margin-bottom:12px;}
+.ds-cal-heading{font-size:13px;font-weight:500;}
+.ds-nav{position:absolute;top:0;width:28px;height:28px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:transparent;opacity:.5;display:flex;align-items:center;justify-content:center;font-size:13px;}
+.ds-nav.prev{left:0;} .ds-nav.next{right:0;}
+.ds-grid{display:grid;grid-template-columns:repeat(7,32px);gap:0;}
+.ds-wd{height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted-foreground);}
+.ds-day{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;}
+.ds-day.muted{color:var(--muted-foreground);}
+.ds-day.span{background:var(--accent);color:var(--accent-foreground);}
+.ds-day.start{background:var(--primary);color:var(--primary-foreground);border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px);}
+.ds-day.end{background:var(--primary);color:var(--primary-foreground);border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px);}
+</style>
+
+<div class="ds-cal-card">
+  <p class="ds-cal-title">RangeCalendar — start/end range · reka-ui RangeCalendarRoot</p>
+  <div class="ds-cal">
+    <div class="ds-cal-hdr">
+      <button class="ds-nav prev">‹</button>
+      <span class="ds-cal-heading">June 2026</span>
+      <button class="ds-nav next">›</button>
+    </div>
+    <div class="ds-grid">
+      <div class="ds-wd">Su</div><div class="ds-wd">Mo</div><div class="ds-wd">Tu</div><div class="ds-wd">We</div><div class="ds-wd">Th</div><div class="ds-wd">Fr</div><div class="ds-wd">Sa</div>
+      <div class="ds-day muted">31</div><div class="ds-day">1</div><div class="ds-day">2</div><div class="ds-day">3</div><div class="ds-day">4</div><div class="ds-day">5</div><div class="ds-day">6</div>
+      <div class="ds-day">7</div><div class="ds-day">8</div><div class="ds-day start">9</div><div class="ds-day span">10</div><div class="ds-day span">11</div><div class="ds-day span">12</div><div class="ds-day end">13</div>
+      <div class="ds-day">14</div><div class="ds-day">15</div><div class="ds-day">16</div><div class="ds-day">17</div><div class="ds-day">18</div><div class="ds-day">19</div><div class="ds-day">20</div>
+      <div class="ds-day">21</div><div class="ds-day">22</div><div class="ds-day">23</div><div class="ds-day">24</div><div class="ds-day">25</div><div class="ds-day">26</div><div class="ds-day">27</div>
+      <div class="ds-day">28</div><div class="ds-day">29</div><div class="ds-day">30</div><div class="ds-day muted">1</div><div class="ds-day muted">2</div><div class="ds-day muted">3</div><div class="ds-day muted">4</div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.prompt.md b/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.prompt.md
new file mode 100644
index 000000000..d7537c387
--- /dev/null
+++ b/.design-sync/ds-bundle/components/range-calendar/RangeCalendar/RangeCalendar.prompt.md
@@ -0,0 +1,52 @@
+# RangeCalendar
+
+A month-grid calendar for selecting a **start/end date range** inline (e.g. report filters, booking windows). Same structure as Calendar but highlights the span between two endpoints. Built on reka-ui's `RangeCalendarRoot`; values are `@internationalized/date` `DateValue`s.
+
+## Parts
+
+The `<RangeCalendar>` root wires all parts together; compose by hand only for a custom layout.
+
+- **RangeCalendar** — root; renders header + month grid. `v-model` = `{ start, end }` of `DateValue`.
+- **RangeCalendarHeader** — top bar (heading + prev/next).
+- **RangeCalendarHeading** — month/year label; slot exposes `{ headingValue }`.
+- **RangeCalendarPrevButton / RangeCalendarNextButton** — outline icon buttons (ChevronLeft / ChevronRight).
+- **RangeCalendarGrid** — one month's `<table>`.
+- **RangeCalendarGridHead / RangeCalendarHeadCell** — weekday header row + cells.
+- **RangeCalendarGridBody / RangeCalendarGridRow** — week rows.
+- **RangeCalendarCell** — `<td>`; fills with `--accent` across the selected span, rounds the start/end corners.
+- **RangeCalendarCellTrigger** — pressable day button (`ghost`, `h-8 w-8`); endpoints (`data-selection-start` / `data-selection-end`) get the `--primary` fill.
+
+## Props
+
+No cva variant axis. Behavior comes from `RangeCalendarRoot` props (forwarded):
+
+- `modelValue` — `{ start: DateValue; end: DateValue } | undefined` (use `v-model`).
+- `minValue` / `maxValue` — `DateValue` bounds.
+- `isDateDisabled` / `isDateUnavailable` — `(date) => boolean`.
+- `numberOfMonths` — show multiple months side by side.
+- `weekdayFormat` — `'narrow' | 'short' | 'long'`.
+- `disabled`, `readonly`, `fixedWeeks`, `locale`.
+- `class` — forwarded via `cn()` (root padding `p-3`).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import { RangeCalendar } from '@/components/ui/range-calendar'
+
+const range = ref<{ start: DateValue; end: DateValue }>()
+</script>
+
+<template>
+  <RangeCalendar v-model="range" :number-of-months="2" />
+</template>
+```
+
+## Notes
+
+- Backed by **reka-ui** `RangeCalendarRoot` and its `RangeCalendar*` primitives.
+- `v-model` is a **range object** `{ start, end }` of `@internationalized/date` `DateValue`s, not JS `Date`s.
+- Span cells use `--accent`; the two endpoints use `--primary`; outside-month/disabled use `--muted-foreground`; unavailable days are struck through in `--destructive-foreground`.
+- For single-date selection use **Calendar**; for a popover field use **DatePicker**.
diff --git a/.design-sync/ds-bundle/components/select/Select/Select.d.ts b/.design-sync/ds-bundle/components/select/Select/Select.d.ts
new file mode 100644
index 000000000..b86bd9d67
--- /dev/null
+++ b/.design-sync/ds-bundle/components/select/Select/Select.d.ts
@@ -0,0 +1,96 @@
+// Select — composable dropdown select. shadcn-vue wrappers over reka-ui Select primitives.
+// Source: frontend/src/components/ui/select/*.vue
+//
+// Compose: Select > SelectTrigger(+SelectValue) + SelectContent > (SelectGroup >
+//          SelectLabel + SelectItem...) [SelectSeparator, SelectScroll*Button].
+
+import type { DefineComponent } from 'vue'
+import type {
+  SelectRootProps,
+  SelectRootEmits,
+  SelectContentProps,
+  SelectContentEmits,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectLabelProps,
+  SelectSeparatorProps,
+  SelectValueProps,
+  SelectTriggerProps,
+  SelectScrollUpButtonProps,
+  SelectScrollDownButtonProps,
+} from 'reka-ui'
+
+/** Root. Controlled via v-model:modelValue / v-model:open. */
+export interface SelectProps extends SelectRootProps {
+  modelValue?: string | string[]
+  defaultValue?: string | string[]
+  open?: boolean
+  disabled?: boolean
+  multiple?: boolean
+  name?: string
+}
+export type SelectEmits = SelectRootEmits
+
+/** The button that opens the listbox. */
+export interface SelectTriggerProps_ extends SelectTriggerProps {
+  /** Height token: 'default' (h-9) | 'sm' (h-8). Default 'default'. */
+  size?: 'sm' | 'default'
+  class?: string
+}
+
+/** Displays the selected value; takes a `placeholder`. */
+export interface SelectValueProps_ extends SelectValueProps {
+  placeholder?: string
+}
+
+/** Floating popover containing the options. position defaults to 'popper'. */
+export interface SelectContentProps_ extends SelectContentProps {
+  position?: 'item-aligned' | 'popper'
+  class?: string
+}
+export type SelectContentEmits_ = SelectContentEmits
+
+export interface SelectGroupProps_ extends SelectGroupProps {}
+export interface SelectLabelProps_ extends SelectLabelProps {
+  class?: string
+}
+export interface SelectItemProps_ extends SelectItemProps {
+  /** Required value for this option. */
+  value: SelectItemProps['value']
+  disabled?: boolean
+  class?: string
+}
+export interface SelectItemTextProps_ extends SelectItemTextProps {}
+export interface SelectSeparatorProps_ extends SelectSeparatorProps {
+  class?: string
+}
+export interface SelectScrollUpButtonProps_ extends SelectScrollUpButtonProps {
+  class?: string
+}
+export interface SelectScrollDownButtonProps_ extends SelectScrollDownButtonProps {
+  class?: string
+}
+
+/** @slot default — SelectTrigger + SelectContent. */
+export declare const Select: DefineComponent<SelectProps>
+/** @slot default — SelectValue / icons. Default-slot before the chevron icon. */
+export declare const SelectTrigger: DefineComponent<SelectTriggerProps_>
+/** Renders the current value or placeholder text. */
+export declare const SelectValue: DefineComponent<SelectValueProps_>
+/** @slot default — items, groups, labels, separators. */
+export declare const SelectContent: DefineComponent<SelectContentProps_>
+/** @slot default — groups SelectItems under an optional SelectLabel. */
+export declare const SelectGroup: DefineComponent<SelectGroupProps_>
+/** @slot default — non-selectable group heading. */
+export declare const SelectLabel: DefineComponent<SelectLabelProps_>
+/** @slot default — option label; shows a Check indicator when selected. */
+export declare const SelectItem: DefineComponent<SelectItemProps_>
+/** @slot default — explicit text node for an item. */
+export declare const SelectItemText: DefineComponent<SelectItemTextProps_>
+/** Thin horizontal divider between groups. */
+export declare const SelectSeparator: DefineComponent<SelectSeparatorProps_>
+/** ChevronUp scroll affordance (auto-rendered inside SelectContent). */
+export declare const SelectScrollUpButton: DefineComponent<SelectScrollUpButtonProps_>
+/** ChevronDown scroll affordance (auto-rendered inside SelectContent). */
+export declare const SelectScrollDownButton: DefineComponent<SelectScrollDownButtonProps_>
diff --git a/.design-sync/ds-bundle/components/select/Select/Select.html b/.design-sync/ds-bundle/components/select/Select/Select.html
new file mode 100644
index 000000000..49d961f45
--- /dev/null
+++ b/.design-sync/ds-bundle/components/select/Select/Select.html
@@ -0,0 +1,40 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+      --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    }
+    .ds-card{width:360px;box-sizing:border-box;padding:20px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);}
+    .ds-title{font-size:13px;font-weight:600;margin:0 0 14px;}
+    .ds-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:200px;height:2.25rem;box-sizing:border-box;padding:0 0.75rem;font-size:14px;background:transparent;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,0.04);}
+    .ds-chev{width:1rem;height:1rem;opacity:0.5;flex:none;}
+    .ds-content{width:200px;margin-top:6px;box-sizing:border-box;padding:0.25rem;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:0 4px 12px rgba(0,0,0,0.12);}
+    .ds-grouplabel{padding:0.375rem 0.5rem;font-size:12px;font-weight:500;color:var(--muted-foreground);}
+    .ds-item{display:flex;align-items:center;gap:0.5rem;position:relative;padding:0.375rem 2rem 0.375rem 0.5rem;font-size:14px;border-radius:calc(var(--radius) - 4px);}
+    .ds-item.active{background:var(--accent);color:var(--accent-foreground);}
+    .ds-item .check{position:absolute;right:0.5rem;width:1rem;height:1rem;}
+  </style>
+  <p class="ds-title">Select</p>
+  <div class="ds-trigger">
+    <span>Banana</span>
+    <svg class="ds-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+  </div>
+  <div class="ds-content">
+    <div class="ds-grouplabel">Fruits</div>
+    <div class="ds-item">Apple</div>
+    <div class="ds-item active">Banana
+      <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+    </div>
+    <div class="ds-item">Cherry</div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/select/Select/Select.prompt.md b/.design-sync/ds-bundle/components/select/Select/Select.prompt.md
new file mode 100644
index 000000000..c2849a5fc
--- /dev/null
+++ b/.design-sync/ds-bundle/components/select/Select/Select.prompt.md
@@ -0,0 +1,63 @@
+# Select
+
+Composable single/multi dropdown select. shadcn-vue wrappers over the reka-ui `Select` primitives. Use when the user picks from a known list of options; for free text use Input instead.
+
+## Parts
+
+- `Select` — root; owns open/value state.
+- `SelectTrigger` — the button that opens the listbox; renders a trailing chevron. Has a `size` prop (`'default'` h-9 | `'sm'` h-8).
+- `SelectValue` — shows the selected option's text (or a `placeholder`). Goes inside `SelectTrigger`.
+- `SelectContent` — the floating popover holding the options (portalled; `position` defaults to `'popper'`). Auto-includes scroll buttons + viewport.
+- `SelectGroup` — groups related items.
+- `SelectLabel` — a non-selectable heading for a group.
+- `SelectItem` — a selectable option; requires a `value`, shows a `Check` when selected.
+- `SelectItemText` — explicit text node for an item (usually implicit).
+- `SelectSeparator` — thin divider between groups.
+- `SelectScrollUpButton` / `SelectScrollDownButton` — scroll affordances (rendered automatically inside `SelectContent`).
+
+## Props
+
+- Root (`Select`): `modelValue` / `defaultValue` (`v-model`), `open` (`v-model:open`), `disabled`, `multiple`, `name`.
+- `SelectTrigger`: `size?: 'sm' | 'default'` (default `'default'`), `class?`.
+- `SelectValue`: `placeholder?: string`.
+- `SelectContent`: `position?: 'item-aligned' | 'popper'` (default `'popper'`), `class?`.
+- `SelectItem`: `value` (required), `disabled?`, `class?`.
+
+No color variants. The only size axis is `SelectTrigger size` (h-9 / h-8).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Select, SelectTrigger, SelectValue,
+  SelectContent, SelectGroup, SelectLabel, SelectItem,
+} from '@/components/ui/select'
+import { ref } from 'vue'
+const fruit = ref('')
+</script>
+
+<template>
+  <Select v-model="fruit">
+    <SelectTrigger class="w-48">
+      <SelectValue placeholder="Pick a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="cherry">Cherry</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `SelectRoot`/`SelectTrigger`/`SelectContent`/`SelectItem` etc.
+- `SelectTrigger` and `SelectContent` MUST be inside `Select`; `SelectItem`/`SelectLabel` inside `SelectContent` (optionally within `SelectGroup`).
+- `SelectContent` is portalled to the body and animates on open/close; in `'popper'` mode it offsets from and matches the trigger width via reka CSS vars.
+- Value binding is via `v-model` on `Select`; selected items render a lucide `Check` indicator.
+- `SelectTrigger` shows `placeholder`-colored text (`text-muted-foreground`) until a value is chosen; disabled state dims and blocks pointer events.
diff --git a/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.d.ts b/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.d.ts
new file mode 100644
index 000000000..b6c76dab5
--- /dev/null
+++ b/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.d.ts
@@ -0,0 +1,11 @@
+export interface SkeletonProps {
+  /** Extra classes merged via cn() — set size/shape here (e.g. 'h-4 w-32 rounded-lg'). */
+  class?: string
+}
+
+/**
+ * Skeleton — an animated placeholder block for loading states.
+ * Renders an empty <div>: `animate-pulse rounded-md bg-primary/10`.
+ * No slot; size and shape are driven entirely by `class`.
+ */
+export declare const Skeleton: import('vue').DefineComponent<SkeletonProps>
diff --git a/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.html b/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.html
new file mode 100644
index 000000000..20878d4eb
--- /dev/null
+++ b/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.html
@@ -0,0 +1,36 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;--radius-md:calc(var(--radius) - 2px);
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .sk{background:color-mix(in oklab,var(--primary) 10%,transparent);border-radius:var(--radius-md);animation:pulse 1.6s ease-in-out infinite}
+  .row{display:flex;align-items:center;gap:12px}
+  .sk.avatar{width:40px;height:40px;border-radius:9999px}
+  .sk.l1{height:16px;width:160px}
+  .sk.l2{height:16px;width:96px;margin-top:8px}
+</style>
+<div class="dscard">
+  <h4>Skeleton</h4>
+  <div class="sub">Animated loading placeholder · sized via class</div>
+  <div class="row">
+    <div class="sk avatar"></div>
+    <div>
+      <div class="sk l1"></div>
+      <div class="sk l2"></div>
+    </div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.prompt.md b/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.prompt.md
new file mode 100644
index 000000000..2c98c50b0
--- /dev/null
+++ b/.design-sync/ds-bundle/components/skeleton/Skeleton/Skeleton.prompt.md
@@ -0,0 +1,34 @@
+# Skeleton
+
+An animated placeholder block shown while content loads. Use to mirror the shape of incoming text/image/card content and reduce layout shift.
+
+## Parts
+
+- **Skeleton** — the only exported part. An empty `<div>` with `animate-pulse rounded-md bg-primary/10`. It has no children; you size and shape it via `class`.
+
+## Props
+
+- `class?: string` — required in practice to give it dimensions (e.g. `h-4 w-40`, `size-12 rounded-full`). No variants.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Skeleton } from '@/components/ui/skeleton'
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <Skeleton class="size-10 rounded-full" />
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-40" />
+      <Skeleton class="h-4 w-24" />
+    </div>
+  </div>
+</template>
+```
+
+## Notes
+
+- Plain `<div>`; no reka-ui primitive, no slot.
+- Compose multiple Skeletons to mock a real layout. Override `rounded-md` (e.g. `rounded-full`) for avatars.
diff --git a/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.d.ts b/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.d.ts
new file mode 100644
index 000000000..54ebb941c
--- /dev/null
+++ b/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.d.ts
@@ -0,0 +1,37 @@
+import type { ToasterProps } from 'vue-sonner'
+
+/**
+ * Toaster — the toast host/region (wraps vue-sonner's <Toaster>).
+ * Mount ONCE near the app root. Renders nothing until onMounted (client only).
+ * Themed via CSS vars: --normal-bg=var(--popover),
+ * --normal-text=var(--popover-foreground), --normal-border=var(--border).
+ *
+ * Props are vue-sonner's ToasterProps, forwarded verbatim, including:
+ *  - position?: 'top-left'|'top-center'|'top-right'|'bottom-left'|'bottom-center'|'bottom-right'
+ *  - richColors?: boolean
+ *  - expand?: boolean
+ *  - duration?: number
+ *  - closeButton?: boolean
+ *  - theme?: 'light' | 'dark' | 'system'
+ *  - visibleToasts?: number
+ *  - offset?: string | number
+ */
+export type { ToasterProps }
+export declare const Toaster: import('vue').DefineComponent<ToasterProps>
+
+/**
+ * toast() — imperative API to fire toasts.
+ * NOT re-exported by '@/components/ui/sonner'; import from 'vue-sonner':
+ *   import { toast } from 'vue-sonner'
+ *
+ *   toast('Saved')
+ *   toast.success('Job created')
+ *   toast.error('Could not save')
+ *   toast.warning('Check the date')
+ *   toast.info('Synced with Xero')
+ *   toast.message('Title', { description: '...' })
+ *   toast.promise(p, { loading, success, error })
+ *   toast.loading('Working…')
+ *   toast.dismiss(id?)
+ */
+export declare const toast: typeof import('vue-sonner').toast
diff --git a/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.html b/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.html
new file mode 100644
index 000000000..3ae8017c4
--- /dev/null
+++ b/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.html
@@ -0,0 +1,33 @@
+<!-- @dsCard group="Display" -->
+<style>
+  :root{
+    --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+    --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+    --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+    --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+    --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+    --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+    --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+    --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+    --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+    --radius:0.625rem;
+    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+  }
+  .dscard{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
+  .dscard h4{margin:0;font-size:13px;font-weight:600}
+  .dscard .sub{font-size:11px;color:var(--muted-foreground);margin-top:-6px}
+  .toast{display:flex;align-items:center;gap:10px;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;box-shadow:0 4px 12px rgba(0,0,0,.08);font-size:13px}
+  .dot{width:8px;height:8px;border-radius:9999px;flex:none}
+  .dot.ok{background:oklch(0.6 0.17 150)}
+  .dot.err{background:var(--destructive)}
+  .dot.info{background:var(--primary)}
+  .toast .msg{font-weight:500}
+  .toast .x{margin-left:auto;color:var(--muted-foreground)}
+</style>
+<div class="dscard">
+  <h4>Sonner (Toast)</h4>
+  <div class="sub">Transient notifications · toast.success / error / info</div>
+  <div class="toast"><span class="dot ok"></span><span class="msg">Job created</span><span class="x">×</span></div>
+  <div class="toast"><span class="dot err"></span><span class="msg">Could not save</span><span class="x">×</span></div>
+  <div class="toast"><span class="dot info"></span><span class="msg">Synced with Xero</span><span class="x">×</span></div>
+</div>
diff --git a/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.prompt.md b/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.prompt.md
new file mode 100644
index 000000000..9625e71ba
--- /dev/null
+++ b/.design-sync/ds-bundle/components/sonner/Sonner/Sonner.prompt.md
@@ -0,0 +1,52 @@
+# Sonner (Toaster + toast)
+
+Transient toast notifications — brief, auto-dismissing feedback ("Saved", "Could not save"). Use for the result of an async action; use Alert for persistent inline messages, Dialog for blocking confirms.
+
+## Parts
+
+- **Toaster** — exported from `@/components/ui/sonner` (as `Toaster`). The host region; mount it ONCE near the app root. Wraps vue-sonner's `<Toaster>`. Renders nothing until `onMounted` (avoids SSR/hydration flash). Themed to the popover tokens.
+- **toast** — the imperative trigger. NOT re-exported by this kit module; import it directly: `import { toast } from 'vue-sonner'`.
+
+## Props (Toaster — vue-sonner ToasterProps)
+
+- `position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'`
+- `richColors?: boolean` — colored success/error/warning toasts
+- `expand?: boolean` — show all toasts expanded
+- `closeButton?: boolean`
+- `duration?: number` — ms before auto-dismiss
+- `theme?: 'light' | 'dark' | 'system'`
+- `visibleToasts?: number`, `offset?: string | number`
+
+All forwarded verbatim via `v-bind`. The kit pins `--normal-bg/text/border` to the popover tokens.
+
+## Usage
+
+```vue
+<!-- App.vue — mount once -->
+<script setup lang="ts">
+import { Toaster } from '@/components/ui/sonner'
+</script>
+<template>
+  <RouterView />
+  <Toaster position="bottom-right" rich-colors />
+</template>
+```
+
+```ts
+// anywhere — fire a toast
+import { toast } from 'vue-sonner'
+
+toast.success('Job created')
+toast.error('Could not save')
+toast.promise(saveJob(), {
+  loading: 'Saving…',
+  success: 'Saved',
+  error: 'Save failed',
+})
+```
+
+## Notes
+
+- Backed by `vue-sonner` (Vue port of Sonner). Variants (`success`/`error`/`warning`/`info`/`message`/`loading`/`promise`/`dismiss`) come from the `toast` function, not props.
+- Only one `<Toaster>` should exist per app; `toast()` calls route to it.
+- `toast` lives in `vue-sonner`, not the local sonner index — import paths differ for the host vs. the trigger.
diff --git a/.design-sync/ds-bundle/components/switch/Switch/Switch.d.ts b/.design-sync/ds-bundle/components/switch/Switch/Switch.d.ts
new file mode 100644
index 000000000..2ddf0639d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/switch/Switch/Switch.d.ts
@@ -0,0 +1,26 @@
+// Switch — on/off toggle. shadcn-vue wrapper over reka-ui SwitchRoot.
+// Source: frontend/src/components/ui/switch/Switch.vue
+
+import type { DefineComponent } from 'vue'
+import type { SwitchRootProps, SwitchRootEmits } from 'reka-ui'
+
+export interface SwitchProps extends /* reka-ui */ SwitchRootProps {
+  /** Controlled checked state. */
+  modelValue?: boolean
+  /** Uncontrolled initial state. */
+  defaultValue?: boolean
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+  id?: string
+  /** Extra classes merged via cn(). */
+  class?: string
+}
+
+export type SwitchEmits = SwitchRootEmits // includes (e:'update:modelValue', v: boolean)
+
+/**
+ * @slot thumb — optional content rendered inside the sliding thumb.
+ */
+export declare const Switch: DefineComponent<SwitchProps>
diff --git a/.design-sync/ds-bundle/components/switch/Switch/Switch.html b/.design-sync/ds-bundle/components/switch/Switch/Switch.html
new file mode 100644
index 000000000..bbb2758ff
--- /dev/null
+++ b/.design-sync/ds-bundle/components/switch/Switch/Switch.html
@@ -0,0 +1,43 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+      --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    }
+    .ds-card{width:360px;box-sizing:border-box;padding:20px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);}
+    .ds-title{font-size:13px;font-weight:600;margin:0 0 14px;}
+    .ds-sw-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:12px;}
+    .ds-sw{position:relative;width:2rem;height:1.15rem;border-radius:9999px;border:1px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,0.04);flex:none;}
+    .ds-sw.off{background:var(--input);}
+    .ds-sw.on{background:var(--primary);}
+    .ds-sw.disabled{opacity:0.5;}
+    .ds-thumb{position:absolute;top:50%;width:1rem;height:1rem;border-radius:9999px;background:var(--background);transform:translateY(-50%);}
+    .ds-sw.off .ds-thumb{left:1px;}
+    .ds-sw.on .ds-thumb{left:calc(100% - 1rem - 1px);}
+    .ds-sw-text{font-size:14px;}
+    .ds-sw-text.muted{color:var(--muted-foreground);}
+  </style>
+  <p class="ds-title">Switch</p>
+  <div class="ds-sw-row">
+    <span class="ds-sw off"><span class="ds-thumb"></span></span>
+    <span class="ds-sw-text">Off (unchecked)</span>
+  </div>
+  <div class="ds-sw-row">
+    <span class="ds-sw on"><span class="ds-thumb"></span></span>
+    <span class="ds-sw-text">On (checked)</span>
+  </div>
+  <div class="ds-sw-row" style="margin-bottom:0;">
+    <span class="ds-sw on disabled"><span class="ds-thumb"></span></span>
+    <span class="ds-sw-text muted">Disabled</span>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/switch/Switch/Switch.prompt.md b/.design-sync/ds-bundle/components/switch/Switch/Switch.prompt.md
new file mode 100644
index 000000000..74f0e6f4d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/switch/Switch/Switch.prompt.md
@@ -0,0 +1,40 @@
+# Switch
+
+A compact on/off toggle. shadcn-vue wrapper over reka-ui `SwitchRoot` + `SwitchThumb`. Use for immediate binary settings (enabled/disabled) where a checkbox would feel like form input.
+
+## Parts
+
+- `Switch` — the whole control (only export). Renders `SwitchRoot` with a sliding `SwitchThumb`.
+
+## Props
+
+- `modelValue?: boolean` — on/off state (`v-model`).
+- `defaultValue?: boolean` — initial state when uncontrolled.
+- `disabled?`, `required?`, `name?`, `value?`, `id?` — standard form props (reka-ui passthrough).
+- `class?: string` — extra classes, merged via `cn()`.
+
+No variants or sizes. Track is `h-[1.15rem] w-8`, fully rounded; thumb is `size-4` and translates right when checked. Checked track uses `--primary`; unchecked uses `--input`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { ref } from 'vue'
+const enabled = ref(true)
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Switch id="notify" v-model="enabled" />
+    <Label for="notify">Email notifications</Label>
+  </div>
+</template>
+```
+
+## Notes
+
+- Backed by reka-ui `SwitchRoot`; `v-model` is the controlled binding, otherwise uncontrolled via `defaultValue`.
+- Optional `thumb` slot lets you render content (e.g. an icon) inside the moving thumb.
+- `:disabled` applies `cursor-not-allowed` + 50% opacity; focus shows a 3px `ring-ring/50`.
diff --git a/.design-sync/ds-bundle/components/table/Table/Table.d.ts b/.design-sync/ds-bundle/components/table/Table/Table.d.ts
new file mode 100644
index 000000000..d35fc4453
--- /dev/null
+++ b/.design-sync/ds-bundle/components/table/Table/Table.d.ts
@@ -0,0 +1,67 @@
+import type { HTMLAttributes } from 'vue'
+
+/**
+ * Table — semantic data table built from plain HTML table elements
+ * (no reka-ui primitive). Compose the parts to build a table.
+ *
+ * @slot default — table parts (TableHeader, TableBody, TableFooter, TableCaption)
+ */
+export interface TableProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <thead>. @slot default — TableRow(s) of TableHead cells */
+export interface TableHeaderProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <tbody>. @slot default — TableRow(s) */
+export interface TableBodyProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <tfoot>, muted background. @slot default — TableRow(s) */
+export interface TableFooterProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <tr>; hover + selected (data-[state=selected]) styling. @slot default — cells */
+export interface TableRowProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <th> header cell. @slot default — header content */
+export interface TableHeadProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <td> data cell. @slot default — cell content */
+export interface TableCellProps {
+  class?: HTMLAttributes['class']
+}
+
+/** Wraps <caption>, muted text below the table. @slot default — caption text */
+export interface TableCaptionProps {
+  class?: HTMLAttributes['class']
+}
+
+/**
+ * Convenience row for an empty state. Renders a single full-width
+ * centered cell (TableRow > TableCell) spanning `colspan` columns.
+ * @slot default — empty-state content
+ */
+export interface TableEmptyProps {
+  class?: HTMLAttributes['class']
+  /** Number of columns to span. @default 1 */
+  colspan?: number
+}
+
+export declare const Table: import('vue').DefineComponent<TableProps>
+export declare const TableHeader: import('vue').DefineComponent<TableHeaderProps>
+export declare const TableBody: import('vue').DefineComponent<TableBodyProps>
+export declare const TableFooter: import('vue').DefineComponent<TableFooterProps>
+export declare const TableRow: import('vue').DefineComponent<TableRowProps>
+export declare const TableHead: import('vue').DefineComponent<TableHeadProps>
+export declare const TableCell: import('vue').DefineComponent<TableCellProps>
+export declare const TableCaption: import('vue').DefineComponent<TableCaptionProps>
+export declare const TableEmpty: import('vue').DefineComponent<TableEmptyProps>
diff --git a/.design-sync/ds-bundle/components/table/Table/Table.html b/.design-sync/ds-bundle/components/table/Table/Table.html
new file mode 100644
index 000000000..e6ad130fb
--- /dev/null
+++ b/.design-sync/ds-bundle/components/table/Table/Table.html
@@ -0,0 +1,42 @@
+<!-- @dsCard group="Data & Navigation" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-table-card{width:360px;box-sizing:border-box;background:var(--card);color:var(--card-foreground);
+  border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
+.ds-table-card h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--foreground);}
+.ds-table-card table{width:100%;border-collapse:collapse;caption-side:bottom;font-size:14px;}
+.ds-table-card thead tr{border-bottom:1px solid var(--border);}
+.ds-table-card th{height:40px;padding:0 8px;text-align:left;vertical-align:middle;
+  font-weight:500;white-space:nowrap;color:var(--muted-foreground);}
+.ds-table-card tbody tr{border-bottom:1px solid var(--border);transition:background .15s;}
+.ds-table-card tbody tr:last-child{border-bottom:0;}
+.ds-table-card tbody tr.sel{background:var(--muted);}
+.ds-table-card td{padding:8px;vertical-align:middle;white-space:nowrap;color:var(--foreground);}
+.ds-table-card caption{margin-top:16px;font-size:14px;color:var(--muted-foreground);}
+</style>
+<div class="ds-table-card">
+  <h3>Table</h3>
+  <table>
+    <thead>
+      <tr><th>Job</th><th>Status</th><th>Total</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Sheetmetal duct</td><td>In Progress</td><td>$1,240</td></tr>
+      <tr class="sel"><td>Bracket batch</td><td>Quoting</td><td>$480</td></tr>
+      <tr><td>Stair rail</td><td>Completed</td><td>$3,910</td></tr>
+    </tbody>
+    <caption>A list of recent jobs.</caption>
+  </table>
+</div>
diff --git a/.design-sync/ds-bundle/components/table/Table/Table.prompt.md b/.design-sync/ds-bundle/components/table/Table/Table.prompt.md
new file mode 100644
index 000000000..8289d573b
--- /dev/null
+++ b/.design-sync/ds-bundle/components/table/Table/Table.prompt.md
@@ -0,0 +1,54 @@
+# Table
+
+A semantic data table for tabular records (lists of jobs, line items, timesheets, etc.). Use when you need rows and columns with headers; not for layout. Built from native HTML table elements wrapped in an overflow-auto container, so no controlled state is involved.
+
+## Parts
+- **Table** — root; renders an `overflow-auto` container around a `<table>` (`w-full caption-bottom text-sm`).
+- **TableHeader** — `<thead>`; holds the header row(s).
+- **TableBody** — `<tbody>`; holds the data rows.
+- **TableFooter** — `<tfoot>`; muted background, medium weight (totals/summary rows).
+- **TableRow** — `<tr>`; hover highlight, `data-[state=selected]` highlight, bottom border.
+- **TableHead** — `<th>`; left-aligned, muted, medium, `h-10`.
+- **TableCell** — `<td>`; `p-2`, middle-aligned, nowrap.
+- **TableCaption** — `<caption>`; muted small text below the table.
+- **TableEmpty** — convenience row for empty state: a single centered cell spanning all columns.
+
+## Props
+No variant/size axes. Every part accepts only `class?: string` (merged via `cn()`), except:
+- **TableEmpty** — `colspan?: number` (default `1`); set it to the number of columns so the empty cell spans the full width.
+
+## Usage
+```vue
+<script setup lang="ts">
+import {
+  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableEmpty,
+} from '@/components/ui/table'
+</script>
+
+<template>
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Job</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Total</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="job in jobs" :key="job.id">
+        <TableCell>{{ job.name }}</TableCell>
+        <TableCell>{{ job.status }}</TableCell>
+        <TableCell>{{ job.total }}</TableCell>
+      </TableRow>
+      <TableEmpty v-if="!jobs.length" :colspan="3">No jobs found</TableEmpty>
+    </TableBody>
+  </Table>
+</template>
+```
+
+## Notes
+- Plain HTML table elements — no reka-ui primitive, no state, no `v-model`.
+- The root always wraps the `<table>` in a `relative w-full overflow-auto` container, so wide tables scroll horizontally on their own.
+- Selected-row styling keys off `data-[state=selected]` on `TableRow` — set that attribute (commonly via @tanstack/vue-table row state) to highlight selection.
+- `TableEmpty` renders its own `TableRow` + `TableCell`; place it directly inside `TableBody`, not inside another row.
+- Cells default to `whitespace-nowrap`; add a `class` to wrap long content.
diff --git a/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.d.ts b/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.d.ts
new file mode 100644
index 000000000..534fbf471
--- /dev/null
+++ b/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.d.ts
@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'vue'
+import type {
+  TabsRootProps,
+  TabsRootEmits,
+  TabsListProps as RekaTabsListProps,
+  TabsTriggerProps as RekaTabsTriggerProps,
+  TabsContentProps as RekaTabsContentProps,
+} from 'reka-ui'
+
+/**
+ * Tabs — wraps reka-ui TabsRoot. Switches between panels.
+ * Controlled/uncontrolled via `modelValue` / `defaultValue`.
+ *
+ * @slot default — TabsList + TabsContent(s)
+ */
+export interface TabsProps extends TabsRootProps {
+  class?: HTMLAttributes['class']
+}
+export type TabsEmits = TabsRootEmits
+
+/** Container for the triggers (reka-ui TabsList). @slot default — TabsTrigger(s) */
+export interface TabsListProps extends RekaTabsListProps {
+  class?: HTMLAttributes['class']
+}
+
+/** A single tab button (reka-ui TabsTrigger). `value` ties it to a TabsContent. @slot default — label */
+export interface TabsTriggerProps extends RekaTabsTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+/** A tab panel (reka-ui TabsContent). Shown when its `value` is active. @slot default — panel content */
+export interface TabsContentProps extends RekaTabsContentProps {
+  class?: HTMLAttributes['class']
+}
+
+export declare const Tabs: import('vue').DefineComponent<TabsProps>
+export declare const TabsList: import('vue').DefineComponent<TabsListProps>
+export declare const TabsTrigger: import('vue').DefineComponent<TabsTriggerProps>
+export declare const TabsContent: import('vue').DefineComponent<TabsContentProps>
diff --git a/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.html b/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.html
new file mode 100644
index 000000000..bae2202df
--- /dev/null
+++ b/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.html
@@ -0,0 +1,38 @@
+<!-- @dsCard group="Data & Navigation" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-tabs-card{width:360px;box-sizing:border-box;background:var(--card);color:var(--card-foreground);
+  border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
+.ds-tabs-card h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--foreground);}
+.ds-tabs{display:flex;flex-direction:column;gap:8px;}
+.ds-tabs-list{display:inline-flex;height:36px;width:fit-content;align-items:center;justify-content:center;
+  background:var(--muted);color:var(--muted-foreground);border-radius:var(--radius);padding:3px;box-sizing:border-box;}
+.ds-tab{display:inline-flex;height:calc(100% - 1px);align-items:center;justify-content:center;gap:6px;
+  border-radius:calc(var(--radius) - 2px);border:1px solid transparent;padding:4px 10px;font-size:14px;
+  font-weight:500;white-space:nowrap;color:var(--foreground);cursor:pointer;}
+.ds-tab.active{background:var(--background);box-shadow:0 1px 2px rgba(0,0,0,.08);}
+.ds-tabs-content{padding-top:6px;font-size:14px;color:var(--foreground);}
+</style>
+<div class="ds-tabs-card">
+  <h3>Tabs</h3>
+  <div class="ds-tabs">
+    <div class="ds-tabs-list">
+      <span class="ds-tab active">Estimate</span>
+      <span class="ds-tab">Quote</span>
+      <span class="ds-tab">Reality</span>
+    </div>
+    <div class="ds-tabs-content">Estimate cost set — 3 lines, $1,240 total.</div>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.prompt.md b/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.prompt.md
new file mode 100644
index 000000000..f7007c5b2
--- /dev/null
+++ b/.design-sync/ds-bundle/components/tabs/Tabs/Tabs.prompt.md
@@ -0,0 +1,43 @@
+# Tabs
+
+Switch between sibling panels of content under a single row of triggers. Use for section-level navigation within a page (e.g. job detail: Estimate / Quote / Reality / Invoices). Backed by reka-ui `TabsRoot`.
+
+## Parts
+- **Tabs** — root (`TabsRoot`); column flex with `gap-2`. Holds the value/state.
+- **TabsList** — the trigger bar: `bg-muted` pill, `h-9`, `rounded-lg`, `inline-flex`, `p-[3px]`.
+- **TabsTrigger** — one tab button. Active tab gets a `bg-background` raised pill with shadow. `value` matches a TabsContent.
+- **TabsContent** — one panel; rendered when its `value` is the active tab. `flex-1`, no outline.
+
+## Props
+No cva variants. Props come from reka-ui primitives:
+- **Tabs**: `modelValue?` / `defaultValue?` (active tab value), `orientation?: 'horizontal' | 'vertical'`, `activationMode?: 'automatic' | 'manual'`, `dir?`. Emits `update:modelValue`.
+- **TabsTrigger**: `value: string` (required, links to content), `disabled?: boolean`.
+- **TabsContent**: `value: string` (required, links to trigger), `forceMount?: boolean`.
+- All parts accept `class?: string`.
+
+## Usage
+```vue
+<script setup lang="ts">
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+</script>
+
+<template>
+  <Tabs default-value="estimate">
+    <TabsList>
+      <TabsTrigger value="estimate">Estimate</TabsTrigger>
+      <TabsTrigger value="quote">Quote</TabsTrigger>
+      <TabsTrigger value="reality">Reality</TabsTrigger>
+    </TabsList>
+    <TabsContent value="estimate">Estimate cost set…</TabsContent>
+    <TabsContent value="quote">Quote cost set…</TabsContent>
+    <TabsContent value="reality">Actuals…</TabsContent>
+  </Tabs>
+</template>
+```
+
+## Notes
+- Backed by reka-ui `TabsRoot` / `TabsList` / `TabsTrigger` / `TabsContent`.
+- Controlled with `v-model` (`modelValue`) or uncontrolled with `default-value`.
+- Every `TabsTrigger` must share a `value` with exactly one `TabsContent`.
+- Triggers and content must be inside `Tabs`; triggers inside `TabsList`.
+- Active state is exposed via `data-[state=active]` on the trigger (drives the raised-pill styling); disabled triggers are dimmed and non-interactive.
diff --git a/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.d.ts b/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.d.ts
new file mode 100644
index 000000000..a21544e3c
--- /dev/null
+++ b/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.d.ts
@@ -0,0 +1,24 @@
+// Textarea — multi-line text field. shadcn-vue wrapper over a native <textarea>.
+// Source: frontend/src/components/ui/textarea/Textarea.vue
+
+import type { DefineComponent } from 'vue'
+
+export interface TextareaProps {
+  /** Extra classes merged via cn(). */
+  class?: string
+  /** Initial value when uncontrolled. */
+  defaultValue?: string | number
+  /** v-model value. */
+  modelValue?: string | number
+  // Native <textarea> attributes (placeholder, disabled, rows, readonly,
+  // aria-invalid, name, id, etc.) pass through via fallthrough attrs.
+}
+
+export interface TextareaEmits {
+  (e: 'update:modelValue', payload: string | number): void
+}
+
+/**
+ * @slot (none) — renders a native <textarea data-slot="textarea">.
+ */
+export declare const Textarea: DefineComponent<TextareaProps>
diff --git a/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.html b/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.html
new file mode 100644
index 000000000..bfa1059b8
--- /dev/null
+++ b/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.html
@@ -0,0 +1,33 @@
+<!-- @dsCard group="Forms" -->
+<div class="ds-card">
+  <style>
+    :root{
+      --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+      --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+      --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+      --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+      --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+      --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+      --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+      --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+      --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+      --radius:0.625rem;
+      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    }
+    .ds-card{width:360px;box-sizing:border-box;padding:20px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);}
+    .ds-title{font-size:13px;font-weight:600;margin:0 0 14px;}
+    .ds-label{font-size:12px;color:var(--muted-foreground);margin:0 0 6px;}
+    .ds-ta{display:block;width:100%;min-height:4rem;box-sizing:border-box;padding:0.5rem 0.75rem;font-size:14px;font-family:inherit;background:transparent;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,0.04);outline:none;resize:vertical;}
+    .ds-ta.focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);}
+    .ds-row{margin-bottom:12px;}
+  </style>
+  <p class="ds-title">Textarea</p>
+  <div class="ds-row">
+    <p class="ds-label">Default</p>
+    <textarea class="ds-ta" readonly>Multi-line free text entry. Grows with content.</textarea>
+  </div>
+  <div class="ds-row" style="margin-bottom:0;">
+    <p class="ds-label">Focused</p>
+    <textarea class="ds-ta focus" readonly>Add notes…</textarea>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.prompt.md b/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.prompt.md
new file mode 100644
index 000000000..5b974cd3d
--- /dev/null
+++ b/.design-sync/ds-bundle/components/textarea/Textarea/Textarea.prompt.md
@@ -0,0 +1,37 @@
+# Textarea
+
+Multi-line text field. Thin shadcn-vue wrapper over a native `<textarea>` with design-system border, focus ring, and invalid styling. Use for longer free-text entry (notes, comments, descriptions).
+
+## Parts
+
+- `Textarea` — the field itself (only export). Renders `<textarea data-slot="textarea">`.
+
+## Props
+
+- `modelValue?: string | number` — bound value (`v-model`).
+- `defaultValue?: string | number` — initial value when uncontrolled.
+- `class?: string` — extra classes, merged via `cn()`.
+- All native `<textarea>` attributes pass through: `placeholder`, `disabled`, `rows`, `readonly`, `name`, `id`, `aria-invalid`, etc.
+
+No variants or sizes. Minimum height `min-h-16` (4rem), full width, `rounded-md`, `px-3 py-2`, `text-base` (`md:text-sm`). Auto-grows via `field-sizing-content`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Textarea } from '@/components/ui/textarea'
+import { ref } from 'vue'
+const notes = ref('')
+</script>
+
+<template>
+  <Textarea v-model="notes" placeholder="Add notes…" rows="4" />
+</template>
+```
+
+## Notes
+
+- Not backed by reka-ui — plain `<textarea>` using `useVModel` (passive two-way binding).
+- `field-sizing-content` lets the box grow to fit content (where supported).
+- `aria-invalid="true"` switches border/ring to the destructive token.
+- `:disabled` applies `cursor-not-allowed` and 50% opacity; focus shows a 3px `ring-ring/50`.
diff --git a/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.d.ts b/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.d.ts
new file mode 100644
index 000000000..174a90dc9
--- /dev/null
+++ b/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.d.ts
@@ -0,0 +1,67 @@
+// Tooltip — hover/focus hint bubble group (shadcn-vue, backed by reka-ui TooltipRoot).
+// No cva variant axis.
+
+import type { DefineComponent } from 'vue'
+
+/**
+ * Context provider. Wrap once near the app root (or around a cluster of tooltips)
+ * to share delay/skip timing. Backed by reka-ui TooltipProvider.
+ * `delayDuration` defaults to 0 in this kit (shows immediately).
+ */
+export interface TooltipProviderProps {
+  /** ms before a tooltip opens on hover. @default 0 */
+  delayDuration?: number
+  /** ms within which moving between triggers skips the delay. */
+  skipDelayDuration?: number
+  disableHoverableContent?: boolean
+  disabled?: boolean
+  ignoreNonKeyboardFocus?: boolean
+}
+
+/**
+ * Root for a single tooltip. Owns open state (v-model:open).
+ * Backed by reka-ui TooltipRoot. Exposes slot props (e.g. `open`) via default slot.
+ * @slot default — receives root slot props.
+ */
+export interface TooltipProps {
+  open?: boolean
+  defaultOpen?: boolean
+  delayDuration?: number
+  disableHoverableContent?: boolean
+  disabled?: boolean
+  ignoreNonKeyboardFocus?: boolean
+}
+export interface TooltipEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+/** Element that triggers the tooltip on hover/focus. Backed by reka-ui TooltipTrigger. */
+export interface TooltipTriggerProps {
+  asChild?: boolean
+  as?: string | object
+}
+
+/**
+ * Portalled hint bubble with a small arrow. Dark surface
+ * (bg-foreground / text-background), rounded-md, px-3 py-1.5, text-xs.
+ * @slot default — tooltip text.
+ */
+export interface TooltipContentProps {
+  /** @default 4 */
+  sideOffset?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  alignOffset?: number
+  avoidCollisions?: boolean
+  forceMount?: boolean
+  class?: string
+}
+export interface TooltipContentEmits {
+  (e: 'escapeKeyDown', event: KeyboardEvent): void
+  (e: 'pointerDownOutside', event: Event): void
+}
+
+export declare const TooltipProvider: DefineComponent<TooltipProviderProps>
+export declare const Tooltip: DefineComponent<TooltipProps>
+export declare const TooltipTrigger: DefineComponent<TooltipTriggerProps>
+export declare const TooltipContent: DefineComponent<TooltipContentProps>
diff --git a/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.html b/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.html
new file mode 100644
index 000000000..ff5292570
--- /dev/null
+++ b/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.html
@@ -0,0 +1,33 @@
+<!-- @dsCard group="Overlays" -->
+<style>
+:root{
+  --background:oklch(1 0 0);--foreground:oklch(0.129 0.042 264.695);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.129 0.042 264.695);
+  --popover:oklch(1 0 0);--popover-foreground:oklch(0.129 0.042 264.695);
+  --primary:oklch(0.208 0.042 265.755);--primary-foreground:oklch(0.984 0.003 247.858);
+  --secondary:oklch(0.968 0.007 247.896);--secondary-foreground:oklch(0.208 0.042 265.755);
+  --muted:oklch(0.968 0.007 247.896);--muted-foreground:oklch(0.554 0.046 257.417);
+  --accent:oklch(0.968 0.007 247.896);--accent-foreground:oklch(0.208 0.042 265.755);
+  --destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);
+  --border:oklch(0.929 0.013 255.508);--input:oklch(0.929 0.013 255.508);--ring:oklch(0.704 0.04 256.788);
+  --radius:0.625rem;
+  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+.ds-tip-card{width:360px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-sizing:border-box;}
+.ds-tip-card *{box-sizing:border-box;}
+.ds-title{font-size:13px;font-weight:600;margin:0 0 2px;}
+.ds-sub{font-size:11px;color:var(--muted-foreground);margin:0 0 16px;}
+.ds-stage{display:flex;flex-direction:column;align-items:center;gap:0;padding:14px 0 18px;}
+.ds-bubble{position:relative;background:var(--foreground);color:var(--background);border-radius:calc(var(--radius) - 2px);padding:6px 12px;font-size:12px;line-height:1;}
+.ds-arrow{width:9px;height:9px;background:var(--foreground);transform:rotate(45deg);border-radius:2px;margin-top:-4px;}
+.ds-trigger{margin-top:10px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;border-radius:calc(var(--radius) - 2px);color:var(--foreground);border:1px solid var(--border);background:transparent;}
+</style>
+<div class="ds-tip-card">
+  <p class="ds-title">Tooltip</p>
+  <p class="ds-sub">Hover hint · dark bubble · arrow · text-xs</p>
+  <div class="ds-stage">
+    <div class="ds-bubble">Charge-out rate per hour</div>
+    <div class="ds-arrow"></div>
+    <span class="ds-trigger">?</span>
+  </div>
+</div>
diff --git a/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.prompt.md b/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.prompt.md
new file mode 100644
index 000000000..d09b99775
--- /dev/null
+++ b/.design-sync/ds-bundle/components/tooltip/Tooltip/Tooltip.prompt.md
@@ -0,0 +1,51 @@
+# Tooltip
+
+A small hint bubble that appears on hover/focus to label or explain a control. Non-interactive — text only. Backed by **reka-ui** `TooltipRoot` and portalled to the body.
+
+## Parts
+
+- **TooltipProvider** — context wrapper that shares delay/skip timing across tooltips. Place once near the app root (or around a cluster). `delayDuration` defaults to **0** here (shows immediately).
+- **Tooltip** — root for a single tooltip; owns open state (`v-model:open`). Exposes root slot props.
+- **TooltipTrigger** — element that triggers it on hover/focus (wrap a Button/icon with `as-child`).
+- **TooltipContent** — portalled dark bubble with an arrow.
+
+## Props
+
+No cva variants.
+
+- `TooltipProvider`: `delayDuration?` (default `0`), `skipDelayDuration?`, `disableHoverableContent?`.
+- `Tooltip`: `open?`, `defaultOpen?`, `delayDuration?`, `disabled?`.
+- `TooltipContent`: `sideOffset?` (default `4`), `side?`, `align?`, `class?`. Emits `escape-key-down`, `pointer-down-outside`.
+- `TooltipTrigger`: `as?`, `as-child?`.
+
+Surface (from source): `bg-foreground` / `text-background`, `rounded-md`, `px-3 py-1.5`, `text-xs`, plus a matching `TooltipArrow`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  TooltipProvider, Tooltip, TooltipTrigger, TooltipContent,
+} from '@/components/ui/tooltip'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="icon">?</Button>
+      </TooltipTrigger>
+      <TooltipContent>Charge-out rate per hour</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+```
+
+## Notes
+
+- Backed by **reka-ui** `Tooltip*`; `TooltipContent` wraps `TooltipPortal` and renders a built-in `TooltipArrow`.
+- `TooltipProvider` is required around tooltips for timing; wrap it once high in the tree rather than per-tooltip.
+- `TooltipContent` sets `inherit-attrs: false` and forwards `$attrs` to the primitive.
+- Tooltips are not interactive — use **Popover** when the floating content needs buttons/fields, or **Dialog** for modal flows.
+- Always make the trigger a real focusable control (`as-child` onto a Button) so keyboard/screen-reader users get the hint too.
diff --git a/.design-sync/ds-bundle/styles.css b/.design-sync/ds-bundle/styles.css
new file mode 100644
index 000000000..aacf4c671
--- /dev/null
+++ b/.design-sync/ds-bundle/styles.css
@@ -0,0 +1,184 @@
+/*
+ * Docketworks Design System — token layer (framework-agnostic).
+ *
+ * This is the SOURCE OF TRUTH for the look: semantic colour tokens (oklch),
+ * the radius scale, and base typography. It is extracted verbatim from the
+ * app's `src/assets/main.css`.
+ *
+ * Two consumption paths, both supported by this one file:
+ *   1. Tailwind v4 pipelines read the `@theme inline` block and the `@custom-variant`
+ *      to generate utilities like `bg-primary`, `text-muted-foreground`, `rounded-lg`.
+ *   2. Plain CSS / any framework reads the `:root` (light) and `.dark` custom
+ *      properties directly, e.g. `background: var(--primary)`.
+ *
+ * Toggle dark mode by adding the `dark` class to a root element.
+ * The original kit is built on shadcn-vue (new-york style, slate base).
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Standard fixed palette (non-semantic; used for status accents) */
+  --color-white: #ffffff;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-yellow-50: #fefce8;
+  --color-yellow-200: #fef08a;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-red-50: #fef2f2;
+  --color-red-200: #fecaca;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.129 0.042 264.695);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.129 0.042 264.695);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.984 0.003 247.858);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.279 0.041 260.031);
+  --input: oklch(0.279 0.041 260.031);
+  --ring: oklch(0.446 0.043 257.281);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(0.279 0.041 260.031);
+  --sidebar-ring: oklch(0.446 0.043 257.281);
+}
+
+/* Base typography — Inter with the app's tabular/stylistic feature settings. */
+body {
+  font-family:
+    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-feature-settings: 'cv11', 'ss01';
+  font-variation-settings: 'opsz' 32;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+* {
+  border-color: var(--border);
+  outline-color: oklch(from var(--ring) l c h / 0.5);
+}
diff --git a/.design-sync/ds-bundle/tokens/colors.json b/.design-sync/ds-bundle/tokens/colors.json
new file mode 100644
index 000000000..521269a06
--- /dev/null
+++ b/.design-sync/ds-bundle/tokens/colors.json
@@ -0,0 +1,52 @@
+{
+  "$comment": "Semantic colour tokens. Each maps to a CSS var (--name) in styles.css and a Tailwind utility namespace (bg-/text-/border-<name>). Values are oklch; light + dark given. Foreground tokens are the on-color text/icon color paired with their base.",
+  "format": "oklch",
+  "semantic": {
+    "background":            { "light": "oklch(1 0 0)",                 "dark": "oklch(0.129 0.042 264.695)" },
+    "foreground":            { "light": "oklch(0.129 0.042 264.695)",   "dark": "oklch(0.984 0.003 247.858)" },
+    "card":                  { "light": "oklch(1 0 0)",                 "dark": "oklch(0.129 0.042 264.695)" },
+    "card-foreground":       { "light": "oklch(0.129 0.042 264.695)",   "dark": "oklch(0.984 0.003 247.858)" },
+    "popover":               { "light": "oklch(1 0 0)",                 "dark": "oklch(0.129 0.042 264.695)" },
+    "popover-foreground":    { "light": "oklch(0.129 0.042 264.695)",   "dark": "oklch(0.984 0.003 247.858)" },
+    "primary":               { "light": "oklch(0.208 0.042 265.755)",   "dark": "oklch(0.984 0.003 247.858)" },
+    "primary-foreground":    { "light": "oklch(0.984 0.003 247.858)",   "dark": "oklch(0.208 0.042 265.755)" },
+    "secondary":             { "light": "oklch(0.968 0.007 247.896)",   "dark": "oklch(0.279 0.041 260.031)" },
+    "secondary-foreground":  { "light": "oklch(0.208 0.042 265.755)",   "dark": "oklch(0.984 0.003 247.858)" },
+    "muted":                 { "light": "oklch(0.968 0.007 247.896)",   "dark": "oklch(0.279 0.041 260.031)" },
+    "muted-foreground":      { "light": "oklch(0.554 0.046 257.417)",   "dark": "oklch(0.704 0.04 256.788)" },
+    "accent":                { "light": "oklch(0.968 0.007 247.896)",   "dark": "oklch(0.279 0.041 260.031)" },
+    "accent-foreground":     { "light": "oklch(0.208 0.042 265.755)",   "dark": "oklch(0.984 0.003 247.858)" },
+    "destructive":           { "light": "oklch(0.577 0.245 27.325)",    "dark": "oklch(0.396 0.141 25.723)" },
+    "destructive-foreground":{ "light": "oklch(0.577 0.245 27.325)",    "dark": "oklch(0.637 0.237 25.331)" },
+    "border":                { "light": "oklch(0.929 0.013 255.508)",   "dark": "oklch(0.279 0.041 260.031)" },
+    "input":                 { "light": "oklch(0.929 0.013 255.508)",   "dark": "oklch(0.279 0.041 260.031)" },
+    "ring":                  { "light": "oklch(0.704 0.04 256.788)",    "dark": "oklch(0.446 0.043 257.281)" }
+  },
+  "chart": {
+    "chart-1": { "light": "oklch(0.646 0.222 41.116)",  "dark": "oklch(0.488 0.243 264.376)" },
+    "chart-2": { "light": "oklch(0.6 0.118 184.704)",   "dark": "oklch(0.696 0.17 162.48)" },
+    "chart-3": { "light": "oklch(0.398 0.07 227.392)",  "dark": "oklch(0.769 0.188 70.08)" },
+    "chart-4": { "light": "oklch(0.828 0.189 84.429)",  "dark": "oklch(0.627 0.265 303.9)" },
+    "chart-5": { "light": "oklch(0.769 0.188 70.08)",   "dark": "oklch(0.645 0.246 16.439)" }
+  },
+  "sidebar": {
+    "sidebar":                    { "light": "oklch(0.984 0.003 247.858)", "dark": "oklch(0.208 0.042 265.755)" },
+    "sidebar-foreground":         { "light": "oklch(0.129 0.042 264.695)", "dark": "oklch(0.984 0.003 247.858)" },
+    "sidebar-primary":            { "light": "oklch(0.208 0.042 265.755)", "dark": "oklch(0.488 0.243 264.376)" },
+    "sidebar-primary-foreground": { "light": "oklch(0.984 0.003 247.858)", "dark": "oklch(0.984 0.003 247.858)" },
+    "sidebar-accent":             { "light": "oklch(0.968 0.007 247.896)", "dark": "oklch(0.279 0.041 260.031)" },
+    "sidebar-accent-foreground":  { "light": "oklch(0.208 0.042 265.755)", "dark": "oklch(0.984 0.003 247.858)" },
+    "sidebar-border":             { "light": "oklch(0.929 0.013 255.508)", "dark": "oklch(0.279 0.041 260.031)" },
+    "sidebar-ring":               { "light": "oklch(0.704 0.04 256.788)",  "dark": "oklch(0.446 0.043 257.281)" }
+  },
+  "palette": {
+    "$comment": "Fixed (theme-independent) hex palette for status accents. Same values in light and dark.",
+    "white": "#ffffff",
+    "gray":   { "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db", "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151", "800": "#1f2937", "900": "#111827" },
+    "green":  { "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "600": "#16a34a", "700": "#15803d", "800": "#166534", "900": "#14532d" },
+    "yellow": { "50": "#fefce8", "200": "#fef08a", "600": "#ca8a04", "800": "#854d0e", "900": "#713f12" },
+    "red":    { "50": "#fef2f2", "200": "#fecaca", "600": "#dc2626", "700": "#b91c1c", "800": "#991b1b", "900": "#7f1d1d" },
+    "blue":   { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8" },
+    "slate":  { "800": "#1e293b", "900": "#0f172a" }
+  }
+}
diff --git a/.design-sync/ds-bundle/tokens/radius.json b/.design-sync/ds-bundle/tokens/radius.json
new file mode 100644
index 000000000..255049716
--- /dev/null
+++ b/.design-sync/ds-bundle/tokens/radius.json
@@ -0,0 +1,16 @@
+{
+  "$comment": "Border-radius scale, derived from a single base token --radius. Tailwind utilities: rounded-sm/md/lg/xl.",
+  "base": "0.625rem",
+  "scale": {
+    "sm": "calc(var(--radius) - 4px)",
+    "md": "calc(var(--radius) - 2px)",
+    "lg": "var(--radius)",
+    "xl": "calc(var(--radius) + 4px)"
+  },
+  "resolved": {
+    "sm": "0.625rem - 4px",
+    "md": "0.625rem - 2px",
+    "lg": "0.625rem",
+    "xl": "0.625rem + 4px"
+  }
+}
diff --git a/.design-sync/ds-bundle/tokens/typography.json b/.design-sync/ds-bundle/tokens/typography.json
new file mode 100644
index 000000000..4b2e45cce
--- /dev/null
+++ b/.design-sync/ds-bundle/tokens/typography.json
@@ -0,0 +1,20 @@
+{
+  "$comment": "Type system. The kit uses a single sans family (Inter) with OpenType feature settings; sizing is via Tailwind's default type scale (text-xs..text-base used across components).",
+  "fontFamily": {
+    "sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  },
+  "fontFeatureSettings": "'cv11', 'ss01'",
+  "fontVariationSettings": "'opsz' 32",
+  "baseFontSize": "15px",
+  "commonSizes": {
+    "$comment": "Tailwind type tokens most used by the components.",
+    "xs": "0.75rem / 1rem",
+    "sm": "0.875rem / 1.25rem",
+    "base": "1rem / 1.5rem"
+  },
+  "commonWeights": {
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600
+  }
+}

From 58c65ce158d95e13800eb9d8fb919da1d3011750 Mon Sep 17 00:00:00 2001
From: Corrin Lakeland <corrin.lakeland@cmeconnect.com>
Date: Fri, 19 Jun 2026 14:37:11 +1200
Subject: [PATCH 2/2] test: isolate item select debounce timers

---
 .../purchasing/__tests__/ItemSelect.test.ts   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/purchasing/__tests__/ItemSelect.test.ts b/frontend/src/views/purchasing/__tests__/ItemSelect.test.ts
index fd68af0c4..8a4ab86bd 100644
--- a/frontend/src/views/purchasing/__tests__/ItemSelect.test.ts
+++ b/frontend/src/views/purchasing/__tests__/ItemSelect.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises, enableAutoUnmount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 
 const { logSearchResultClick } = vi.hoisted(() => ({
@@ -119,11 +119,27 @@ function buildStockItem(over: Partial<Record<string, unknown>> = {}) {
   }
 }
 
+// Unmount every wrapper after each test. ItemSelect schedules a 300ms
+// useDebounceFn timer on every searchTerm change; a wrapper left mounted keeps
+// that timer pending across tests. A later test calling vi.useFakeTimers() +
+// advanceTimersByTime then fires the stale debounce with the previous test's
+// query, calling the server-search mock and breaking its assertions.
+enableAutoUnmount(afterEach)
+
 beforeEach(() => {
+  vi.clearAllTimers()
+  vi.useRealTimers()
   vi.clearAllMocks()
   setActivePinia(createPinia())
 })
 
+afterEach(() => {
+  // Drop any pending debounce timer left by the unmounted component and hand
+  // the next test a clean real-timer baseline.
+  vi.clearAllTimers()
+  vi.useRealTimers()
+})
+
 describe('ItemSelect server-side search and rendering', () => {
   it('renders one blue labour option per job labour rate in estimate context', async () => {
     const store = useStockStore()