From d7626fd483884322a7d274ec37e65ba1bad796ff Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Fri, 16 Oct 2026 03:41:12 +0200
Subject: [PATCH] feat(*): init

---
 .claude/rules/svelte.md                       |  23 +
 .claude/rules/ultracite.md                    | 123 +++
 .claude/settings.json                         |  15 +
 .copier/caddy.yml                             |   5 +
 .copier/frontend.yml                          |   9 +
 .copier/infra.yml                             |   9 +
 .dockerignore                                 |   7 +
 .env.example                                  |   4 +
 .gitignore                                    |  18 +
 .lodge                                        |   6 +
 .mcp.json                                     |  12 +
 .npmrc                                        |   1 +
 .pre-commit-config.yaml                       |  13 +
 CLAUDE.md                                     |  16 +
 Dockerfile                                    |  34 +
 Makefile                                      |  42 +
 README.md                                     |   8 +
 biome.jsonc                                   |  45 +
 bun.lock                                      | 520 ++++++++++
 caddy/.env.example                            |   2 +
 caddy/.gitignore                              |   2 +
 caddy/Caddyfile.example                       |  14 +
 caddy/README.md                               |   3 +
 caddy/docker-compose.yml                      |  23 +
 caddy/site.caddy                              |   5 +
 components.json                               |  20 +
 docker-compose.override.yml.example           |  22 +
 docker-compose.yml                            |  30 +
 docs/agents/decisions.md                      |  15 +
 docs/agents/kickoff.md                        | 116 +++
 package.json                                  |  46 +
 renovate.jsonc                                |   4 +
 serve.ts                                      |  36 +
 src/app.d.ts                                  |  13 +
 src/app.html                                  |  13 +
 src/env.ts                                    |   5 +
 src/lib/api/client.ts                         |  56 ++
 .../ui/avatar/avatar-fallback.svelte          |  20 +
 .../components/ui/avatar/avatar-image.svelte  |  17 +
 src/lib/components/ui/avatar/avatar.svelte    |  22 +
 src/lib/components/ui/avatar/index.ts         |  13 +
 src/lib/components/ui/badge/badge.svelte      |  61 ++
 src/lib/components/ui/badge/index.ts          |   2 +
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  25 +
 .../ui/breadcrumb/breadcrumb-item.svelte      |  20 +
 .../ui/breadcrumb/breadcrumb-link.svelte      |  29 +
 .../ui/breadcrumb/breadcrumb-list.svelte      |  23 +
 .../ui/breadcrumb/breadcrumb-page.svelte      |  23 +
 .../ui/breadcrumb/breadcrumb-separator.svelte |  27 +
 .../ui/breadcrumb/breadcrumb.svelte           |  21 +
 src/lib/components/ui/breadcrumb/index.ts     |  25 +
 src/lib/components/ui/button/button.svelte    | 131 +++
 src/lib/components/ui/button/index.ts         |  21 +
 src/lib/components/ui/card/card-action.svelte |  23 +
 .../components/ui/card/card-content.svelte    |  20 +
 .../ui/card/card-description.svelte           |  20 +
 src/lib/components/ui/card/card-footer.svelte |  20 +
 src/lib/components/ui/card/card-header.svelte |  23 +
 src/lib/components/ui/card/card-title.svelte  |  20 +
 src/lib/components/ui/card/card.svelte        |  23 +
 src/lib/components/ui/card/index.ts           |  25 +
 .../components/ui/checkbox/checkbox.svelte    |  49 +
 src/lib/components/ui/checkbox/index.ts       |   6 +
 .../ui/collapsible/collapsible-content.svelte |  14 +
 .../ui/collapsible/collapsible-trigger.svelte |  14 +
 .../ui/collapsible/collapsible.svelte         |  16 +
 src/lib/components/ui/collapsible/index.ts    |  13 +
 .../context-menu-checkbox-item.svelte         |  42 +
 .../context-menu/context-menu-content.svelte  |  30 +
 .../context-menu-group-heading.svelte         |  24 +
 .../ui/context-menu/context-menu-group.svelte |  12 +
 .../ui/context-menu/context-menu-item.svelte  |  27 +
 .../ui/context-menu/context-menu-label.svelte |  27 +
 .../context-menu/context-menu-portal.svelte   |   7 +
 .../context-menu-radio-group.svelte           |  16 +
 .../context-menu-radio-item.svelte            |  35 +
 .../context-menu-separator.svelte             |  17 +
 .../context-menu/context-menu-shortcut.svelte |  23 +
 .../context-menu-sub-content.svelte           |  20 +
 .../context-menu-sub-trigger.svelte           |  29 +
 .../ui/context-menu/context-menu-sub.svelte   |   8 +
 .../context-menu/context-menu-trigger.svelte  |  14 +
 .../ui/context-menu/context-menu.svelte       |  10 +
 src/lib/components/ui/context-menu/index.ts   |  52 +
 .../components/ui/dialog/dialog-close.svelte  |   8 +
 .../ui/dialog/dialog-content.svelte           |  45 +
 .../ui/dialog/dialog-description.svelte       |  17 +
 .../components/ui/dialog/dialog-footer.svelte |  23 +
 .../components/ui/dialog/dialog-header.svelte |  20 +
 .../ui/dialog/dialog-overlay.svelte           |  17 +
 .../components/ui/dialog/dialog-portal.svelte |   7 +
 .../components/ui/dialog/dialog-title.svelte  |  17 +
 .../ui/dialog/dialog-trigger.svelte           |   8 +
 src/lib/components/ui/dialog/dialog.svelte    |   8 +
 src/lib/components/ui/dialog/index.ts         |  34 +
 .../dropdown-menu-checkbox-group.svelte       |  16 +
 .../dropdown-menu-checkbox-item.svelte        |  46 +
 .../dropdown-menu-content.svelte              |  31 +
 .../dropdown-menu-group-heading.svelte        |  25 +
 .../dropdown-menu/dropdown-menu-group.svelte  |  14 +
 .../dropdown-menu/dropdown-menu-item.svelte   |  28 +
 .../dropdown-menu/dropdown-menu-label.svelte  |  27 +
 .../dropdown-menu/dropdown-menu-portal.svelte |   7 +
 .../dropdown-menu-radio-group.svelte          |  16 +
 .../dropdown-menu-radio-item.svelte           |  35 +
 .../dropdown-menu-separator.svelte            |  17 +
 .../dropdown-menu-shortcut.svelte             |  23 +
 .../dropdown-menu-sub-content.svelte          |  20 +
 .../dropdown-menu-sub-trigger.svelte          |  29 +
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |  10 +
 .../dropdown-menu-trigger.svelte              |  14 +
 .../ui/dropdown-menu/dropdown-menu.svelte     |  10 +
 src/lib/components/ui/dropdown-menu/index.ts  |  54 +
 src/lib/components/ui/input/index.ts          |   7 +
 src/lib/components/ui/input/input.svelte      |  54 +
 src/lib/components/ui/label/index.ts          |   3 +
 src/lib/components/ui/label/label.svelte      |  27 +
 src/lib/components/ui/progress/index.ts       |   7 +
 .../components/ui/progress/progress.svelte    |  30 +
 src/lib/components/ui/select/index.ts         |  37 +
 .../ui/select/select-content.svelte           |  45 +
 .../ui/select/select-group-heading.svelte     |  24 +
 .../components/ui/select/select-group.svelte  |   8 +
 .../components/ui/select/select-item.svelte   |  41 +
 .../components/ui/select/select-label.svelte  |  23 +
 .../components/ui/select/select-portal.svelte |   7 +
 .../select/select-scroll-down-button.svelte   |  23 +
 .../ui/select/select-scroll-up-button.svelte  |  23 +
 .../ui/select/select-separator.svelte         |  21 +
 .../ui/select/select-trigger.svelte           |  29 +
 src/lib/components/ui/select/select.svelte    |  11 +
 src/lib/components/ui/separator/index.ts      |   7 +
 .../components/ui/separator/separator.svelte  |  21 +
 src/lib/components/ui/sheet/index.ts          |  34 +
 .../components/ui/sheet/sheet-close.svelte    |   8 +
 .../components/ui/sheet/sheet-content.svelte  |  62 ++
 .../ui/sheet/sheet-description.svelte         |  17 +
 .../components/ui/sheet/sheet-footer.svelte   |  20 +
 .../components/ui/sheet/sheet-header.svelte   |  20 +
 .../components/ui/sheet/sheet-overlay.svelte  |  17 +
 .../components/ui/sheet/sheet-portal.svelte   |   7 +
 .../components/ui/sheet/sheet-title.svelte    |  17 +
 .../components/ui/sheet/sheet-trigger.svelte  |   8 +
 src/lib/components/ui/sheet/sheet.svelte      |   8 +
 src/lib/components/ui/slider/index.ts         |   7 +
 src/lib/components/ui/slider/slider.svelte    |  54 +
 src/lib/components/ui/sonner/index.ts         |   1 +
 src/lib/components/ui/sonner/sonner.svelte    |  55 ++
 src/lib/components/ui/surface/index.ts        |   5 +
 .../components/ui/surface/surface-cut.svelte  |  38 +
 src/lib/components/ui/surface/surface.svelte  |  66 ++
 src/lib/components/ui/switch/index.ts         |   7 +
 src/lib/components/ui/switch/switch.svelte    |  63 ++
 src/lib/components/ui/table/index.ts          |  28 +
 src/lib/components/ui/table/table-body.svelte |  20 +
 .../components/ui/table/table-caption.svelte  |  20 +
 src/lib/components/ui/table/table-cell.svelte |  23 +
 .../components/ui/table/table-footer.svelte   |  23 +
 src/lib/components/ui/table/table-head.svelte |  23 +
 .../components/ui/table/table-header.svelte   |  23 +
 src/lib/components/ui/table/table-row.svelte  |  23 +
 src/lib/components/ui/table/table.svelte      |  22 +
 src/lib/components/ui/tabs/index.ts           |  16 +
 .../components/ui/tabs/tabs-content.svelte    |  17 +
 src/lib/components/ui/tabs/tabs-list.svelte   |  20 +
 .../components/ui/tabs/tabs-trigger.svelte    |  20 +
 src/lib/components/ui/tabs/tabs.svelte        |  19 +
 src/lib/components/ui/textarea/index.ts       |   7 +
 .../components/ui/textarea/textarea.svelte    |  23 +
 src/lib/components/ui/tooltip/index.ts        |  19 +
 .../ui/tooltip/tooltip-content.svelte         |  35 +
 .../ui/tooltip/tooltip-portal.svelte          |   7 +
 .../ui/tooltip/tooltip-provider.svelte        |   7 +
 .../ui/tooltip/tooltip-trigger.svelte         |   8 +
 src/lib/components/ui/tooltip/tooltip.svelte  |   8 +
 src/lib/index.ts                              |   2 +
 src/lib/utils.ts                              |  58 ++
 src/routes/+layout.svelte                     |  10 +
 src/routes/+layout.ts                         |   2 +
 src/routes/+page.svelte                       |  13 +
 src/routes/claddcn.css                        | 922 ++++++++++++++++++
 src/routes/layout.css                         |  15 +
 tsconfig.json                                 |   9 +
 vite.config.ts                                |  34 +
 184 files changed, 5558 insertions(+)
 create mode 100644 .claude/rules/svelte.md
 create mode 100644 .claude/rules/ultracite.md
 create mode 100644 .claude/settings.json
 create mode 100644 .copier/caddy.yml
 create mode 100644 .copier/frontend.yml
 create mode 100644 .copier/infra.yml
 create mode 100644 .dockerignore
 create mode 100644 .env.example
 create mode 100644 .gitignore
 create mode 100644 .lodge
 create mode 100644 .mcp.json
 create mode 100644 .npmrc
 create mode 100644 .pre-commit-config.yaml
 create mode 100644 CLAUDE.md
 create mode 100644 Dockerfile
 create mode 100644 Makefile
 create mode 100644 README.md
 create mode 100644 biome.jsonc
 create mode 100644 bun.lock
 create mode 100644 caddy/.env.example
 create mode 100644 caddy/.gitignore
 create mode 100644 caddy/Caddyfile.example
 create mode 100644 caddy/README.md
 create mode 100644 caddy/docker-compose.yml
 create mode 100644 caddy/site.caddy
 create mode 100644 components.json
 create mode 100644 docker-compose.override.yml.example
 create mode 100644 docker-compose.yml
 create mode 100644 docs/agents/decisions.md
 create mode 100644 docs/agents/kickoff.md
 create mode 100644 package.json
 create mode 100644 renovate.jsonc
 create mode 100644 serve.ts
 create mode 100644 src/app.d.ts
 create mode 100644 src/app.html
 create mode 100644 src/env.ts
 create mode 100644 src/lib/api/client.ts
 create mode 100644 src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/components/ui/avatar/index.ts
 create mode 100644 src/lib/components/ui/badge/badge.svelte
 create mode 100644 src/lib/components/ui/badge/index.ts
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/breadcrumb.svelte
 create mode 100644 src/lib/components/ui/breadcrumb/index.ts
 create mode 100644 src/lib/components/ui/button/button.svelte
 create mode 100644 src/lib/components/ui/button/index.ts
 create mode 100644 src/lib/components/ui/card/card-action.svelte
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 src/lib/components/ui/checkbox/index.ts
 create mode 100644 src/lib/components/ui/collapsible/collapsible-content.svelte
 create mode 100644 src/lib/components/ui/collapsible/collapsible-trigger.svelte
 create mode 100644 src/lib/components/ui/collapsible/collapsible.svelte
 create mode 100644 src/lib/components/ui/collapsible/index.ts
 create mode 100644 src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-content.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-group-heading.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-group.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-label.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-portal.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-radio-group.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-radio-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-separator.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-shortcut.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub-content.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-trigger.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu.svelte
 create mode 100644 src/lib/components/ui/context-menu/index.ts
 create mode 100644 src/lib/components/ui/dialog/dialog-close.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog.svelte
 create mode 100644 src/lib/components/ui/dialog/index.ts
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 src/lib/components/ui/input/index.ts
 create mode 100644 src/lib/components/ui/input/input.svelte
 create mode 100644 src/lib/components/ui/label/index.ts
 create mode 100644 src/lib/components/ui/label/label.svelte
 create mode 100644 src/lib/components/ui/progress/index.ts
 create mode 100644 src/lib/components/ui/progress/progress.svelte
 create mode 100644 src/lib/components/ui/select/index.ts
 create mode 100644 src/lib/components/ui/select/select-content.svelte
 create mode 100644 src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 src/lib/components/ui/select/select-group.svelte
 create mode 100644 src/lib/components/ui/select/select-item.svelte
 create mode 100644 src/lib/components/ui/select/select-label.svelte
 create mode 100644 src/lib/components/ui/select/select-portal.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 src/lib/components/ui/select/select-separator.svelte
 create mode 100644 src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 src/lib/components/ui/select/select.svelte
 create mode 100644 src/lib/components/ui/separator/index.ts
 create mode 100644 src/lib/components/ui/separator/separator.svelte
 create mode 100644 src/lib/components/ui/sheet/index.ts
 create mode 100644 src/lib/components/ui/sheet/sheet-close.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-content.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-description.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-footer.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-header.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-overlay.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-portal.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-title.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-trigger.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet.svelte
 create mode 100644 src/lib/components/ui/slider/index.ts
 create mode 100644 src/lib/components/ui/slider/slider.svelte
 create mode 100644 src/lib/components/ui/sonner/index.ts
 create mode 100644 src/lib/components/ui/sonner/sonner.svelte
 create mode 100644 src/lib/components/ui/surface/index.ts
 create mode 100644 src/lib/components/ui/surface/surface-cut.svelte
 create mode 100644 src/lib/components/ui/surface/surface.svelte
 create mode 100644 src/lib/components/ui/switch/index.ts
 create mode 100644 src/lib/components/ui/switch/switch.svelte
 create mode 100644 src/lib/components/ui/table/index.ts
 create mode 100644 src/lib/components/ui/table/table-body.svelte
 create mode 100644 src/lib/components/ui/table/table-caption.svelte
 create mode 100644 src/lib/components/ui/table/table-cell.svelte
 create mode 100644 src/lib/components/ui/table/table-footer.svelte
 create mode 100644 src/lib/components/ui/table/table-head.svelte
 create mode 100644 src/lib/components/ui/table/table-header.svelte
 create mode 100644 src/lib/components/ui/table/table-row.svelte
 create mode 100644 src/lib/components/ui/table/table.svelte
 create mode 100644 src/lib/components/ui/tabs/index.ts
 create mode 100644 src/lib/components/ui/tabs/tabs-content.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs-list.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs-trigger.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs.svelte
 create mode 100644 src/lib/components/ui/textarea/index.ts
 create mode 100644 src/lib/components/ui/textarea/textarea.svelte
 create mode 100644 src/lib/components/ui/tooltip/index.ts
 create mode 100644 src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 src/lib/components/ui/tooltip/tooltip-portal.svelte
 create mode 100644 src/lib/components/ui/tooltip/tooltip-provider.svelte
 create mode 100644 src/lib/components/ui/tooltip/tooltip-trigger.svelte
 create mode 100644 src/lib/components/ui/tooltip/tooltip.svelte
 create mode 100644 src/lib/index.ts
 create mode 100644 src/lib/utils.ts
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/+layout.ts
 create mode 100644 src/routes/+page.svelte
 create mode 100644 src/routes/claddcn.css
 create mode 100644 src/routes/layout.css
 create mode 100644 tsconfig.json
 create mode 100644 vite.config.ts

diff --git a/.claude/rules/svelte.md b/.claude/rules/svelte.md
new file mode 100644
index 0000000..4711cd0
--- /dev/null
+++ b/.claude/rules/svelte.md
@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available Svelte MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
diff --git a/.claude/rules/ultracite.md b/.claude/rules/ultracite.md
new file mode 100644
index 0000000..05ab812
--- /dev/null
+++ b/.claude/rules/ultracite.md
@@ -0,0 +1,123 @@
+# Ultracite Code Standards
+
+This project uses **Ultracite**, a zero-config preset that enforces strict code quality standards through automated formatting and linting.
+
+## Quick Reference
+
+- **Format code**: `bun x ultracite fix`
+- **Check for issues**: `bun x ultracite check`
+- **Diagnose setup**: `bun x ultracite doctor`
+
+Biome (the underlying engine) provides robust linting and formatting. Most issues are automatically fixable.
+
+---
+
+## Core Principles
+
+Write code that is **accessible, performant, type-safe, and maintainable**. Focus on clarity and explicit intent over brevity.
+
+### Type Safety & Explicitness
+
+- Use explicit types for function parameters and return values when they enhance clarity
+- Prefer `unknown` over `any` when the type is genuinely unknown
+- Use const assertions (`as const`) for immutable values and literal types
+- Leverage TypeScript's type narrowing instead of type assertions
+- Use meaningful variable names instead of magic numbers - extract constants with descriptive names
+
+### Modern JavaScript/TypeScript
+
+- Use arrow functions for callbacks and short functions
+- Prefer `for...of` loops over `.forEach()` and indexed `for` loops
+- Use optional chaining (`?.`) and nullish coalescing (`??`) for safer property access
+- Prefer template literals over string concatenation
+- Use destructuring for object and array assignments
+- Use `const` by default, `let` only when reassignment is needed, never `var`
+
+### Async & Promises
+
+- Always `await` promises in async functions - don't forget to use the return value
+- Use `async/await` syntax instead of promise chains for better readability
+- Handle errors appropriately in async code with try-catch blocks
+- Don't use async functions as Promise executors
+
+### React & JSX
+
+- Use function components over class components
+- Call hooks at the top level only, never conditionally
+- Specify all dependencies in hook dependency arrays correctly
+- Use the `key` prop for elements in iterables (prefer unique IDs over array indices)
+- Nest children between opening and closing tags instead of passing as props
+- Don't define components inside other components
+- Use semantic HTML and ARIA attributes for accessibility:
+    - Provide meaningful alt text for images
+    - Use proper heading hierarchy
+    - Add labels for form inputs
+    - Include keyboard event handlers alongside mouse events
+    - Use semantic elements (`<button>`, `<nav>`, etc.) instead of divs with roles
+
+### Error Handling & Debugging
+
+- Remove `console.log`, `debugger`, and `alert` statements from production code
+- Throw `Error` objects with descriptive messages, not strings or other values
+- Use `try-catch` blocks meaningfully - don't catch errors just to rethrow them
+- Prefer early returns over nested conditionals for error cases
+
+### Code Organization
+
+- Keep functions focused and under reasonable cognitive complexity limits
+- Extract complex conditions into well-named boolean variables
+- Use early returns to reduce nesting
+- Prefer simple conditionals over nested ternary operators
+- Group related code together and separate concerns
+
+### Security
+
+- Add `rel="noopener"` when using `target="_blank"` on links
+- Avoid `dangerouslySetInnerHTML` unless absolutely necessary
+- Don't use `eval()` or assign directly to `document.cookie`
+- Validate and sanitize user input
+
+### Performance
+
+- Avoid spread syntax in accumulators within loops
+- Use top-level regex literals instead of creating them in loops
+- Prefer specific imports over namespace imports
+- Avoid barrel files (index files that re-export everything)
+- Use proper image components (e.g., Next.js `<Image>`) over `<img>` tags
+
+### Framework-Specific Guidance
+
+**Next.js:**
+- Use Next.js `<Image>` component for images
+- Use `next/head` or App Router metadata API for head elements
+- Use Server Components for async data fetching instead of async Client Components
+
+**React 19+:**
+- Use ref as a prop instead of `React.forwardRef`
+
+**Solid/Svelte/Vue/Qwik:**
+- Use `class` and `for` attributes (not `className` or `htmlFor`)
+
+---
+
+## Testing
+
+- Write assertions inside `it()` or `test()` blocks
+- Avoid done callbacks in async tests - use async/await instead
+- Don't use `.only` or `.skip` in committed code
+- Keep test suites reasonably flat - avoid excessive `describe` nesting
+
+## When Biome Can't Help
+
+Biome's linter will catch most issues automatically. Focus your attention on:
+
+1. **Business logic correctness** - Biome can't validate your algorithms
+2. **Meaningful naming** - Use descriptive names for functions, variables, and types
+3. **Architecture decisions** - Component structure, data flow, and API design
+4. **Edge cases** - Handle boundary conditions and error states
+5. **User experience** - Accessibility, performance, and usability considerations
+6. **Documentation** - Add comments for complex logic, but prefer self-documenting code
+
+---
+
+Most formatting and common issues are automatically fixed by Biome. Run `bun x ultracite fix` before committing to ensure compliance.
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..d767586
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,15 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "hooks": [
+          {
+            "command": "bun run fix --skip=correctness/noUnusedImports",
+            "type": "command"
+          }
+        ],
+        "matcher": "Write|Edit"
+      }
+    ]
+  }
+}
diff --git a/.copier/caddy.yml b/.copier/caddy.yml
new file mode 100644
index 0000000..4efeed3
--- /dev/null
+++ b/.copier/caddy.yml
@@ -0,0 +1,5 @@
+_commit: v0.1.4
+_src_path: https://git.kotikot.com/templates/caddy.git
+project_slug: firefly_ui
+routes:
+- frontend
diff --git a/.copier/frontend.yml b/.copier/frontend.yml
new file mode 100644
index 0000000..56addac
--- /dev/null
+++ b/.copier/frontend.yml
@@ -0,0 +1,9 @@
+_commit: v0.7.0
+_src_path: https://git.kotikot.com/templates/frontend-svelte.git
+install_deps: true
+layout: root
+linter: biome
+project_name: Firefly UI
+project_slug: firefly_ui
+serve: static
+ui_library: shadcn
diff --git a/.copier/infra.yml b/.copier/infra.yml
new file mode 100644
index 0000000..cb940e7
--- /dev/null
+++ b/.copier/infra.yml
@@ -0,0 +1,9 @@
+_commit: v0.6.0
+_src_path: https://git.kotikot.com/templates/infra.git
+init_git: true
+layout: single
+mcp_servers:
+- context7
+- svelte
+project_description: Keyboard-first SvelteKit client for Firefly III
+project_name: Firefly UI
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..ed46f37
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+.svelte-kit
+build
+# .env goes into the build: $env/static/public (and static/private) are
+# inlined at build time from it. It stays in the builder stage, the runtime
+# image gets build/ only. Local overrides (.env.local and the like) stay out.
+.env.*
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..637c1f2
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+COMPOSE_PROFILES=services
+
+PUBLIC_API_BASE_URL=/api
+ALLOWED_HOSTS=
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9cc0fcf
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,18 @@
+.env
+.env.*
+!.env.example
+docker-compose.override.yml
+.DS_Store
+.idea
+.venv/
+__pycache__/
+*.pyc
+.ruff_cache/
+.pytest_cache/
+sessions/*.session*
+node_modules/
+.svelte-kit/
+/build/
+
+# Local playground
+/t/
diff --git a/.lodge b/.lodge
new file mode 100644
index 0000000..a22f698
--- /dev/null
+++ b/.lodge
@@ -0,0 +1,6 @@
+shared docs/agents
+shared CLAUDE.local.md
+shared PRODUCT.md
+shared DESIGN.md
+shared .impeccable
+branch .agent
diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..54164dc
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    },
+    "svelte": {
+      "type": "http",
+      "url": "https://mcp.svelte.dev/mcp"
+    }
+  }
+}
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 0000000..e58c03a
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,13 @@
+repos:
+  - repo: local
+    hooks:
+      - id: fmt
+        name: fmt
+        entry: make fmt
+        language: system
+        pass_filenames: false
+      - id: check
+        name: check
+        entry: make check
+        language: system
+        pass_filenames: false
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..9333590
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,16 @@
+## Code Principles
+- **Simplicity**: Write simple, straightforward code
+- **Readability**: Make code easy to understand
+- **Performance**: Consider performance without sacrificing readability
+- **Maintainability**: Write code that's easy to update
+- **Reusability**: Create reusable components and functions
+- **Less Code = Less Debt**: Minimize code footprint
+- **NEVER write comments** - code should be self-documenting
+- **Docstrings ONLY if explicitly asked**
+
+## Checking commands
+After writing code, always run:
+```shell
+make fmt
+make check
+```
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..1b13c93
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,34 @@
+FROM oven/bun:1-alpine AS deps
+
+ENV TERM=xterm-256color
+ENV COLORTERM=truecolor
+ENV BUN_INSTALL_CACHE_DIR=/bun-cache
+
+WORKDIR /app
+
+COPY package.json bun.lock* ./
+
+RUN --mount=type=cache,target=/bun-cache bun install --frozen-lockfile
+
+
+FROM deps AS builder
+
+COPY . .
+
+RUN bun --bun svelte-kit sync
+RUN bun run build
+
+
+FROM oven/bun:1-alpine AS runtime
+
+ENV NODE_ENV=production
+
+WORKDIR /app
+
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/serve.ts ./serve.ts
+
+EXPOSE 3000
+
+ENTRYPOINT ["bun"]
+CMD ["run", "serve.ts"]
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..2e726d2
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,42 @@
+COMPOSE := docker compose
+
+.PHONY: env recreate rebuild restart logs down fmt check build dev
+
+fmt:
+	bun run fix
+
+check:
+	bun run check
+	bun run lint
+
+build:
+	$(COMPOSE) build frontend
+
+dev:
+	bun run dev
+
+env:
+	@fresh=; test -f .env || { cp .env.example .env; fresh=1; }; \
+	if ! test -f docker-compose.override.yml; then \
+		cp docker-compose.override.yml.example docker-compose.override.yml; \
+		for port in $$(sed -n 's/.*127\.0\.0\.1:\([0-9]*\):.*/\1/p' docker-compose.override.yml | sort -u); do \
+			random=$$((20000 + $$(od -An -N2 -tu2 /dev/urandom) % 40000)); \
+			sed "s/127\.0\.0\.1:$$port:/127.0.0.1:$$random:/" docker-compose.override.yml > docker-compose.override.yml.tmp && mv docker-compose.override.yml.tmp docker-compose.override.yml; \
+			test -z "$$fresh" || { sed "s|localhost:$$port/|localhost:$$random/|" .env > .env.tmp && mv .env.tmp .env; }; \
+		done; \
+	fi
+
+recreate:
+	$(COMPOSE) up -d --force-recreate
+
+rebuild: build
+	$(COMPOSE) up -d
+
+restart:
+	$(COMPOSE) restart
+
+logs:
+	$(COMPOSE) logs -f --tail=100
+
+down:
+	$(COMPOSE) down
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..225179c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,8 @@
+# Firefly UI
+
+```sh
+make env       # .env and docker-compose.override.yml from the examples
+make recreate  # the services in COMPOSE_PROFILES
+make dev       # vite on the host
+make check
+```
diff --git a/biome.jsonc b/biome.jsonc
new file mode 100644
index 0000000..603971a
--- /dev/null
+++ b/biome.jsonc
@@ -0,0 +1,45 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["ultracite/biome/core", "ultracite/biome/svelte"],
+  "files": {
+    "includes": [
+      "!.claude",
+      "!.svelte-kit",
+      "!build",
+      "!.mcp.json",
+      "!.impeccable",
+      "!src/lib/components/ui",
+      "!src/routes/claddcn.css"
+    ]
+  },
+  "javascript": { "globals": ["Bun"] },
+  "overrides": [
+    {
+      "includes": ["src/lib/components/ui/**"],
+      "linter": { "enabled": false },
+      "assist": { "enabled": false }
+    },
+    {
+      "includes": ["src/lib/utils.ts"],
+      "linter": { "rules": { "suspicious": { "noExplicitAny": "off" } } }
+    },
+    {
+      "includes": ["**/*.svelte"],
+      "linter": {
+        "rules": {
+          "a11y": { "useAnchorContent": "off" },
+          "style": {
+            "useFilenamingConvention": {
+              "level": "error",
+              "options": { "filenameCases": ["kebab-case", "PascalCase"] }
+            }
+          }
+        }
+      }
+    },
+    {
+      "includes": ["src/app.d.ts"],
+      "linter": { "rules": { "style": { "noNamespace": "off" } } }
+    }
+  ]
+}
diff --git a/bun.lock b/bun.lock
new file mode 100644
index 0000000..e437d9a
--- /dev/null
+++ b/bun.lock
@@ -0,0 +1,520 @@
+{
+  "lockfileVersion": 2,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "firefly_ui",
+      "devDependencies": {
+        "@biomejs/biome": "^2.5.15",
+        "@fontsource-variable/geist": "^5.3.0",
+        "@fontsource-variable/geist-mono": "^5.3.0",
+        "@internationalized/date": "^3.12.0",
+        "@lucide/svelte": "^1.23.0",
+        "@sveltejs/adapter-static": "^4.0.0",
+        "@sveltejs/kit": "^3.0.1",
+        "@sveltejs/vite-plugin-svelte": "^7.1.2",
+        "@tailwindcss/vite": "^4.3.0",
+        "@types/bun": "^1.3.0",
+        "bits-ui": "^2.16.3",
+        "clsx": "^2.1.1",
+        "mode-watcher": "^1.1.0",
+        "shadcn-svelte": "^1.3.0",
+        "svelte": "^5.57.1",
+        "svelte-check": "^4.7.6",
+        "svelte-sonner": "^1.1.0",
+        "tailwind-merge": "^3.5.0",
+        "tailwind-variants": "^3.2.2",
+        "tailwindcss": "^4.3.0",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^6.0.3",
+        "ultracite": "^7.12.4",
+        "vite": "^8.0.16",
+      },
+    },
+  },
+  "packages": {
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
+
+    "@babel/parser": ["@babel/parser@7.29.9", "", { "dependencies": { "@babel/types": "^7.29.8" }, "bin": "./bin/babel-parser.js" }, "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA=="],
+
+    "@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
+
+    "@biomejs/biome": ["@biomejs/biome@2.5.15", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.5.15", "@biomejs/cli-darwin-x64": "2.5.15", "@biomejs/cli-linux-arm64": "2.5.15", "@biomejs/cli-linux-arm64-musl": "2.5.15", "@biomejs/cli-linux-x64": "2.5.15", "@biomejs/cli-linux-x64-musl": "2.5.15", "@biomejs/cli-win32-arm64": "2.5.15", "@biomejs/cli-win32-x64": "2.5.15" }, "bin": { "biome": "bin/biome" } }, "sha512-WZTW4slm/pdkh92K6t/3aEN++44JD1PQ7squ7RCMLI1flHGl43DVOIGXvCjHiZgBMO1V4uYxoFNtqrIA4qGuIQ=="],
+
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.5.15", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BZVzFhJ/mUvTLMYbc9x6el0o2Uv5zP7bACYyhFb6fSc1giroXm7PL0a5KqMJ9F+/BnkYRjagD/ROSDVOZ6eapg=="],
+
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.5.15", "", { "os": "darwin", "cpu": "x64" }, "sha512-V5Kw63V+fVGNFhFrizDxMbGXAzZCh8kYzJpy3GI6gTapWDg7bZK9oYC9CbVgQSEdTnupz0U5Efz8Ev+5vdBBXw=="],
+
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.5.15", "", { "os": "linux", "cpu": "arm64" }, "sha512-XaG7P7eeSLYETD3K9grfB0mQmpLQZjygdbsxekWBJAg4am79fGAtRpfRyNnTvXB2fZFNnJZG3nXm7HBat0+VUw=="],
+
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.5.15", "", { "os": "linux", "cpu": "arm64" }, "sha512-tGzZUTcJCV7tj5Adh/Gn6nR4MycqA3iohq2LEcrarAgRBkU0h0OKd2UzCRkOsOYOuUGaUJb4YmqRqyy2feGGSw=="],
+
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.5.15", "", { "os": "linux", "cpu": "x64" }, "sha512-xE4iEW/3LqlYj9GFgGrFsFSH51dEEpUbYWBfeOv0q87WkUDxK2o/HhreSb7qMJqck70RVM6Lg96hgedcAYcOkA=="],
+
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.5.15", "", { "os": "linux", "cpu": "x64" }, "sha512-IlxUcyxilVGPsE008x13pWdkTbU3nQpP2i9b5UrbOYj6goBkKsRX1XB7yJLcV+O1H9LBchIIm4adOaVLZBX0ZQ=="],
+
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.5.15", "", { "os": "win32", "cpu": "arm64" }, "sha512-2kPKzhNlm8C+Ru3GcO0Me2ODkCBLrVOUNuyi84RJyWDVKAA4+Kjj3jMjL938lF6BRfvltC4vB2nPY9SvN51Ovg=="],
+
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.5.15", "", { "os": "win32", "cpu": "x64" }, "sha512-yAzh4UqEImV6Hcy0zjUqNfJAsUhoD64FBQCdTG8Md/Z2wQeVP/ZmJ3XRYAs1g8J9fjTFyl2fCtc5FB5til47+g=="],
+
+    "@clack/core": ["@clack/core@1.5.1", "", { "dependencies": { "fast-wrap-ansi": "^0.2.0", "sisteransi": "^1.0.5" } }, "sha512-iHTrHA8MtVuLl2TfZySmcKv1qO2PoyC9Z7pfSDozEuV5vtY3/wcOPKJXlqJ5Oq2Cx5DDGQGAMVx6HZfRRoVEbQ=="],
+
+    "@clack/prompts": ["@clack/prompts@1.8.1", "", { "dependencies": { "@clack/core": "1.5.1", "fast-string-width": "^3.0.2", "fast-wrap-ansi": "^0.2.0", "sisteransi": "^1.0.5" } }, "sha512-dlT1m5e/0yUL0kRNcQn7yGLVThkgbB0Ga/1AmfDDC/8ik6AIiSf2QLQO2zPYvefsHP0aFgxO93cVLCCfDp7kzQ=="],
+
+    "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="],
+
+    "@fontsource-variable/geist": ["@fontsource-variable/geist@5.3.0", "", {}, "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA=="],
+
+    "@fontsource-variable/geist-mono": ["@fontsource-variable/geist-mono@5.3.0", "", {}, "sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw=="],
+
+    "@internationalized/date": ["@internationalized/date@3.12.4", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.6.0", "", {}, "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@lucide/svelte": ["@lucide/svelte@1.57.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-KWO10Jo80+Rd/JGBQkVcwkF1czJH+CwjHtfjZzLfRsmcI42YuMai3SCiRtdo5+3yo7fhT3oHKHaSBvN8GHEVpQ=="],
+
+    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
+
+    "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
+
+    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
+
+    "@oxc-project/types": ["@oxc-project/types@0.154.0", "", {}, "sha512-KYOUGQFlLWR+s4QMV2Q9ko38TZm7EdO87Qm7rvZLqk/webse/cDjtyxKhg/47l0byCbs/k46LT8qc4PKjAikzA=="],
+
+    "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
+
+    "@rolldown/binding-android-arm-eabi": ["@rolldown/binding-android-arm-eabi@1.2.14", "", { "os": "android", "cpu": "arm" }, "sha512-aWR+XKH9+rW7m5fWq/5360J3mHycrx/o6xZM2DQFdJnTMdyP7/WzxPjhtLbVWdKo2y612/4U1bWqb3HQhiF7vg=="],
+
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.2.14", "", { "os": "android", "cpu": "arm64" }, "sha512-QiVxHofl6A8lQU7WAtOUY4QMVZXohxwz7WJJoeh8NBEUyKfIkMRKhYyq8az/1RypNiIXzNTtiS6KwHz0erxYRQ=="],
+
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.2.14", "", { "os": "darwin", "cpu": "arm64" }, "sha512-lTQOzHuBIooh3jIr5XINQkjPGEuGy+Dsy0meXDr6Sjty0b99kYgGh4uBC/8mJX1T0kC8d6S0aPP1Y+bHkh6aBw=="],
+
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.2.14", "", { "os": "darwin", "cpu": "x64" }, "sha512-hyMKEGatjmBYCs/Q4sbIcL/GqpFEqsX3wc+HYVQ/85A4rxc1o7rPm4DUI4GV4k/h0ITddwFSGpqQunI14GXjTA=="],
+
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.2.14", "", { "os": "freebsd", "cpu": "x64" }, "sha512-u371GbXoVXrEgP20PwzoGNOdAOqAMhzo19JzzY+V4YmmnC+DTOoqdbMu+O+54emM59Mik/UdrtWgcuEDKWRPKA=="],
+
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.2.14", "", { "os": "linux", "cpu": "arm" }, "sha512-BqwKsdZQf6EqVWr8fv2MrDYzAvOZ7+NYFSJESRGs87fkseEhs0TU9TXgRJTkZoRRkxTizyEg1LKUXfU3/78uqg=="],
+
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.2.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-SD9kY8M009x/7s57Z1dgUVlP5+uYBgKQK0Tkr1WIWngrtUJmRCW1RJFMY7QDla2khXhmg2i5Io7MUjcmZNZ/KQ=="],
+
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.2.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-BJ2CL19M6uuWesMgnqJzgxoI+N+eV7b0A9O9vLV42y+gitC41fNa8KElau1tHVzuLWX5GzEuxMPhAO0tQXQMkg=="],
+
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.2.14", "", { "os": "linux", "cpu": "ppc64" }, "sha512-4+Kl8daPV8NDHaD7mfCcc1pRM+Qg7ab8DyMm5FG5WoZgv4h2i3KFN1CybYBNbQqmuYm7ftJLvmMI1eHYJ22S/Q=="],
+
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.2.14", "", { "os": "linux", "cpu": "s390x" }, "sha512-V/h8ePq1fKDrmtFMz6xcCN3DKvuvMRrwwD1q0PkBeeo4DpK64biaKvqWGVxqCeYKqeRk7gE7/iKPxLCn08O97A=="],
+
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.2.14", "", { "os": "linux", "cpu": "x64" }, "sha512-WxalXzgrLVpKC93xfpaJ3gCXUWzeCr+FRCbDVD2mUAy4L6Vo3lNVz0epUEUpxPWJkLNYUwM4OSIikv36OJ9mLg=="],
+
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.2.14", "", { "os": "linux", "cpu": "x64" }, "sha512-3G3tnAmTpdk9jO3GQtyHXqeFD2SlecfTws/Y3M2mmj9nMBwwuLT4kur8sZKeu7ENUHSpVO3cIsm5A52LEWWwlg=="],
+
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.2.14", "", { "os": "none", "cpu": "arm64" }, "sha512-qyr5XiNGxm2ytx17vvtcJ9nXn6v1gENETi503bJx3OGwZ1tSonj7BosxbMa/xeAfSl5iS9X6KjEWYXLu6v1L7Q=="],
+
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.2.14", "", { "os": "win32", "cpu": "arm64" }, "sha512-oA4o5o0S2yB199YyYXDzKUv1Z56Rc+mgOjwm7Z/vJ9Z8igiDPYvoOuDyo6g7AK/ZaF09nPhDKVnGBcYHO11GXA=="],
+
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.2.14", "", { "os": "win32", "cpu": "x64" }, "sha512-9mE94bf2GZUaR/fUSXCMpBoWkctu421Mi0ORpm4zqfbkjKep7RxzPFa5etcGs5h+2KApoWBOA/hAJa/7saGgEQ=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
+
+    "@sec-ant/readable-stream": ["@sec-ant/readable-stream@0.4.1", "", {}, "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg=="],
+
+    "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@4.0.0", "", {}, "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ=="],
+
+    "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
+
+    "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.13", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-wgKggnhZVL9Bfx1OaKKTrYY9BFRk6C8UAkQNUcIv1+llzYrIqy+RZm5HPKzn0NpEBvTVhTqB4kQyllZywsRBRQ=="],
+
+    "@sveltejs/adapter-static": ["@sveltejs/adapter-static@4.0.0", "", { "peerDependencies": { "@sveltejs/kit": "^3.0.0-next.0" } }, "sha512-aF1J23R1ebKqUxQ4/qLr/Lxu63NFmLAtg8UZl3HFLxaoA1D/nhTVGcD9lTqx65iUbjNR2iOL0TgOxSX82x6Paw=="],
+
+    "@sveltejs/kit": ["@sveltejs/kit@3.1.0", "", { "dependencies": { "@rolldown/pluginutils": "^1.0.1", "@standard-schema/spec": "^1.1.0", "cookie": "^2.0.1", "devalue": "^5.9.4", "esm-env": "^1.2.2", "magic-string": "^1.2.3", "mrmime": "^2.0.1", "sirv": "^3.0.2" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^7.0.0", "svelte": "^5.57.1", "typescript": "^6.0.0", "vite": "^8.0.12" }, "optionalPeers": ["@opentelemetry/api", "typescript"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-JTWlq2HQlkqx6vIoxhC0R6sc4WVqbQoRyEmr5YlqKmiYbzY1U3awtSWTmjMLlS056a49AmkQR6rnNANXIE8B0Q=="],
+
+    "@sveltejs/load-config": ["@sveltejs/load-config@0.2.3", "", {}, "sha512-VT3qmUb8pRV2QrZjd8iAmtg8lf4W0TIjZbvXtz5MKei/q96teWZgGJyyidJzOjzZzvdq616eSRVeMYIQChUTAQ=="],
+
+    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@7.3.1", "", { "dependencies": { "deepmerge": "^4.3.1", "magic-string": "^1.0.0", "obug": "^2.1.0", "vitefu": "^1.1.2" }, "peerDependencies": { "svelte": "^5.46.4", "vite": "^8.0.0-beta.7 || ^8.0.0" } }, "sha512-ZPsLN8B1e/En+Ak5s4V7srFDT532oS0qieLsQwu63NGKsS+iAjoO2Js1BochlHlglcU+Pt7WAO3C5Ee+4f6gVA=="],
+
+    "@swc/helpers": ["@swc/helpers@0.5.23", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw=="],
+
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "dependencies": { "@emnapi/core": "^1.11.1", "@emnapi/runtime": "^1.11.1", "@emnapi/wasi-threads": "^1.2.2", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
+
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
+
+    "@types/bun": ["@types/bun@1.4.3", "", { "dependencies": { "bun-types": "1.4.3" } }, "sha512-N67Pqy8JXbAY/j0tNraS3V5mubGvc6rrrNDmDCtZLlFzccbUJPDb0tvgUBC5q4m8ybkP93Jcn1QB+RYQ6PvBhw=="],
+
+    "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
+
+    "@types/node": ["@types/node@26.6.5", "", { "dependencies": { "undici-types": "~8.9.0" } }, "sha512-uMzsv9stDdofIZBx4UGh4Z9ZgXnGC9seRDscilBcTHAeOFk67MZg/k9bWVfO+bk4qZmG+l52hRnLwUiH2LnJTg=="],
+
+    "acorn": ["acorn@8.19.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw=="],
+
+    "ansi-escapes": ["ansi-escapes@7.3.0", "", { "dependencies": { "environment": "^1.0.0" } }, "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg=="],
+
+    "ansi-regex": ["ansi-regex@6.4.0", "", {}, "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw=="],
+
+    "ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
+
+    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
+
+    "bits-ui": ["bits-ui@2.19.5", "", { "dependencies": { "@floating-ui/core": "^1.7.1", "@floating-ui/dom": "^1.7.1", "esm-env": "^1.1.2", "runed": "^0.35.1", "svelte-toolbelt": "^0.10.6", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-TEwkLSYElE5SE0fIdcItiFPfyg9vrR67N1Mt6VvZCqZo24dwTA1MpGVV3WeyIg7rfVAaZ0So8a0/dcnPngCoew=="],
+
+    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
+
+    "bun-types": ["bun-types@1.4.3", "", { "dependencies": { "@types/node": "*", "undici-types": "*" } }, "sha512-tinRJNGOmUN+tEAsn2y2e942n9JHRHR42iUYzDH75NmhJqVBokGSQkkfSFdNWwsANIdrK6ACH9t01M452YyTwg=="],
+
+    "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
+
+    "citty": ["citty@0.2.2", "", {}, "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w=="],
+
+    "cli-cursor": ["cli-cursor@5.0.0", "", { "dependencies": { "restore-cursor": "^5.0.0" } }, "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw=="],
+
+    "cli-truncate": ["cli-truncate@6.1.1", "", { "dependencies": { "slice-ansi": "^9.0.0", "string-width": "^8.2.0" } }, "sha512-06p9vyLahLa4zkGcgsGxU6iEkSOiuI4fhCH6Emhe2lPAcoUv73n72DnODsnHA+5wwXGnV0n9M9/qOQJSjYhFhw=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "cn": ["cn@0.3.3", "", { "bin": { "cn": "bin/cn.mjs" } }, "sha512-OEiyJkSpYm2kOuNOKQ+c2wmzZRG8orrb9fnObtHTbCGNx/E9KLnGcmcocItOzREKk5KzQN5I2e3BUCj563KEpw=="],
+
+    "commander": ["commander@14.0.3", "", {}, "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw=="],
+
+    "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
+
+    "cookie": ["cookie@2.0.1", "", {}, "sha512-yuToqVvRrj6pfDXREyQAAv8SkAEk/8GS3jQRTiUMm66TVtBYmqQeoEjL2Lmq8Rpo6271vH76InTChTitEAm65w=="],
+
+    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
+
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
+
+    "devalue": ["devalue@5.9.4", "", {}, "sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg=="],
+
+    "empathic": ["empathic@2.1.0", "", {}, "sha512-AnfC1ATldl49/cvZdLPDjBfrRNwbDO05aibiOtzQu3qtlbJtomNLhF30HEtn/7iBz50dlMECqATo3fG0LrdEgw=="],
+
+    "enhanced-resolve": ["enhanced-resolve@5.26.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw=="],
+
+    "environment": ["environment@1.1.0", "", {}, "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q=="],
+
+    "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
+
+    "esrap": ["esrap@2.4.0", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, "peerDependencies": { "@typescript-eslint/types": "^8.2.0" }, "optionalPeers": ["@typescript-eslint/types"] }, "sha512-CQPcneEHw/czj32uwQC52nYnax8H4SXt25FCM+LIwGZ49cMIxpOj3bP8wmzcI+Z0HIy5KkClaPhRLfCySzwHPA=="],
+
+    "execa": ["execa@10.1.1", "", { "dependencies": { "@sindresorhus/merge-streams": "^4.0.0", "figures": "^6.1.0", "get-stream": "^9.0.1", "human-signals": "^8.0.1", "is-plain-obj": "^4.1.0", "is-stream": "^4.0.1", "npm-run-path": "^6.0.0", "pretty-ms": "^9.3.1", "signal-exit": "^4.1.0", "strip-final-newline": "^4.0.0", "which-command": "^0.1.0", "yoctocolors": "^2.2.0" } }, "sha512-yJAC9ulsE6fU0K6wzJBIH+wI+KAtMeu6Ck8rs23OVzvEhqXjGADdI6K+YNIDAjcQQ6AwXTD96cKExJo6xFJXyg=="],
+
+    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
+
+    "fast-string-truncated-width": ["fast-string-truncated-width@3.0.3", "", {}, "sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g=="],
+
+    "fast-string-width": ["fast-string-width@3.0.2", "", { "dependencies": { "fast-string-truncated-width": "^3.0.2" } }, "sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg=="],
+
+    "fast-wrap-ansi": ["fast-wrap-ansi@0.2.2", "", { "dependencies": { "fast-string-width": "^3.0.2" } }, "sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q=="],
+
+    "fastq": ["fastq@1.20.3", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "figures": ["figures@6.1.0", "", { "dependencies": { "is-unicode-supported": "^2.0.0" } }, "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg=="],
+
+    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
+
+    "find-workspaces": ["find-workspaces@0.3.1", "", { "dependencies": { "fast-glob": "^3.3.2", "pkg-types": "^1.0.3", "yaml": "^2.3.4" } }, "sha512-UDkGILGJSA1LN5Aa7McxCid4sqW3/e+UYsVwyxki3dDT0F8+ym0rAfnCkEfkL0rO7M+8/mvkim4t/s3IPHmg+w=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "get-east-asian-width": ["get-east-asian-width@1.7.0", "", {}, "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q=="],
+
+    "get-stream": ["get-stream@9.0.1", "", { "dependencies": { "@sec-ant/readable-stream": "^0.4.1", "is-stream": "^4.0.1" } }, "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA=="],
+
+    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
+    "human-signals": ["human-signals@8.0.1", "", {}, "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ=="],
+
+    "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@5.1.0", "", { "dependencies": { "get-east-asian-width": "^1.3.1" } }, "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+
+    "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
+
+    "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
+
+    "is-stream": ["is-stream@4.0.1", "", {}, "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A=="],
+
+    "is-unicode-supported": ["is-unicode-supported@2.1.0", "", {}, "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ=="],
+
+    "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
+
+    "jsonc-parser": ["jsonc-parser@3.3.1", "", {}, "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ=="],
+
+    "lightningcss": ["lightningcss@1.33.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.33.0", "lightningcss-darwin-arm64": "1.33.0", "lightningcss-darwin-x64": "1.33.0", "lightningcss-freebsd-x64": "1.33.0", "lightningcss-linux-arm-gnueabihf": "1.33.0", "lightningcss-linux-arm64-gnu": "1.33.0", "lightningcss-linux-arm64-musl": "1.33.0", "lightningcss-linux-x64-gnu": "1.33.0", "lightningcss-linux-x64-musl": "1.33.0", "lightningcss-win32-arm64-msvc": "1.33.0", "lightningcss-win32-x64-msvc": "1.33.0" } }, "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.33.0", "", { "os": "android", "cpu": "arm64" }, "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.33.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.33.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.33.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.33.0", "", { "os": "linux", "cpu": "arm" }, "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.33.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.33.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.33.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.33.0", "", { "os": "linux", "cpu": "x64" }, "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.33.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.33.0", "", { "os": "win32", "cpu": "x64" }, "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA=="],
+
+    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
+
+    "log-update": ["log-update@8.0.0", "", { "dependencies": { "ansi-escapes": "^7.3.0", "cli-cursor": "^5.0.0", "slice-ansi": "^9.0.0", "string-width": "^8.2.0", "strip-ansi": "^7.2.0", "wrap-ansi": "^10.0.0" } }, "sha512-lddSgOt3bPASrylL54ZSpy8nBHns+vBVSoILlVOx+dei300pnLRN958rj/EdlVLKuWlSESU3qdnDZdAI7FXYGg=="],
+
+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
+    "magic-string": ["magic-string@1.4.3", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.6.0" } }, "sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ=="],
+
+    "magicast": ["magicast@0.5.5", "", { "dependencies": { "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7", "source-map-js": "^1.2.1" } }, "sha512-UicdXN8zQ3JHlxVq+28afMXPr1z7WNY6+7EJnzTdQWkTAlMLF5fNCCKxJHBQwGaNGR11581EiQmQzx73+MvszA=="],
+
+    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
+
+    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
+
+    "mimic-function": ["mimic-function@5.0.1", "", {}, "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA=="],
+
+    "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
+
+    "mode-watcher": ["mode-watcher@1.1.0", "", { "dependencies": { "runed": "^0.25.0", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.27.0" } }, "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g=="],
+
+    "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
+
+    "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
+
+    "nanoid": ["nanoid@3.3.20", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ=="],
+
+    "node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="],
+
+    "npm-run-path": ["npm-run-path@6.0.0", "", { "dependencies": { "path-key": "^4.0.0", "unicorn-magic": "^0.3.0" } }, "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA=="],
+
+    "nypm": ["nypm@0.6.10", "", { "dependencies": { "citty": "^0.2.2", "pathe": "^2.0.3", "tinyexec": "^1.3.1" }, "bin": { "nypm": "./dist/cli.mjs" } }, "sha512-W72Hrj1petq+b3Hk2aAC+9zswetlIFTnDW4s5djseZh2nYqBbyQLOtj472HwcbcWykPBUW1WpWpjOd4nK6gMRw=="],
+
+    "obug": ["obug@2.2.1", "", {}, "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q=="],
+
+    "onetime": ["onetime@7.0.0", "", { "dependencies": { "mimic-function": "^5.0.0" } }, "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ=="],
+
+    "parse-ms": ["parse-ms@4.0.0", "", {}, "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw=="],
+
+    "path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
+
+    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.7", "", {}, "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA=="],
+
+    "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
+
+    "postcss": ["postcss@8.5.30", "", { "dependencies": { "nanoid": "^3.3.20", "picocolors": "^1.1.1", "source-map-js": "^1.2.2" } }, "sha512-zkd+e9S1AQHhmaBKye9zlFHWjOwVgqXl1q3ECYy8561K7qxR2cREf/STLskulBFd78k6AOFeA+ff1TtEzk9bAA=="],
+
+    "pretty-ms": ["pretty-ms@9.3.1", "", { "dependencies": { "parse-ms": "^4.0.0" } }, "sha512-HzMy3Geq23nVALD/M2LliU+F+M+gVNsvkQWWqeBZ8HDiCgzo6YPJ/Omrmtq24EFrIsk0a3EkQGEd7bDOo+IhGA=="],
+
+    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
+
+    "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
+
+    "resolve.exports": ["resolve.exports@2.0.4", "", {}, "sha512-zepuGL0ulf+nt+XaFrlKeaiTJeyPFPLLY62+ncq1/VTHBdt3HsfXOH60priZ6tnXQozdGcDeIF5JVTanvIcYWQ=="],
+
+    "restore-cursor": ["restore-cursor@5.1.0", "", { "dependencies": { "onetime": "^7.0.0", "signal-exit": "^4.1.0" } }, "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA=="],
+
+    "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
+
+    "rolldown": ["rolldown@1.2.14", "", { "dependencies": { "@oxc-project/types": "=0.154.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.14", "@rolldown/binding-android-arm64": "1.2.14", "@rolldown/binding-darwin-arm64": "1.2.14", "@rolldown/binding-darwin-x64": "1.2.14", "@rolldown/binding-freebsd-x64": "1.2.14", "@rolldown/binding-linux-arm-gnueabihf": "1.2.14", "@rolldown/binding-linux-arm64-gnu": "1.2.14", "@rolldown/binding-linux-arm64-musl": "1.2.14", "@rolldown/binding-linux-ppc64-gnu": "1.2.14", "@rolldown/binding-linux-s390x-gnu": "1.2.14", "@rolldown/binding-linux-x64-gnu": "1.2.14", "@rolldown/binding-linux-x64-musl": "1.2.14", "@rolldown/binding-openharmony-arm64": "1.2.14", "@rolldown/binding-win32-arm64-msvc": "1.2.14", "@rolldown/binding-win32-x64-msvc": "1.2.14" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-eTBTTqMR6uHKLgcUqpJP8ntzDI6V4LYA8negAMBEI7gkgVvOdrx6VsvS2Ym+83KhOPdLCHWJu0w7UQFJZhHKNw=="],
+
+    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
+
+    "runed": ["runed@0.35.1", "", { "dependencies": { "dequal": "^2.0.3", "esm-env": "^1.0.0", "lz-string": "^1.5.0" }, "peerDependencies": { "@sveltejs/kit": "^2.21.0", "svelte": "^5.7.0" }, "optionalPeers": ["@sveltejs/kit"] }, "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q=="],
+
+    "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],
+
+    "semver": ["semver@7.8.5", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA=="],
+
+    "shadcn-svelte": ["shadcn-svelte@1.7.0", "", { "dependencies": { "cn": "^0.3.0", "commander": "^14.0.0", "node-fetch-native": "^1.6.4", "postcss": "^8.5.10" }, "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "shadcn-svelte": "dist/index.mjs" } }, "sha512-AK3ZsYOL8PN/RxcEBCHGvQj2TrLfaaBsbw0QohyEb3nn/yPNDRC/+9iSjnTp/uKEe+tAi0tBxB/Yhzno0N7EEg=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
+    "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
+
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+
+    "slice-ansi": ["slice-ansi@9.0.1", "", { "dependencies": { "ansi-styles": "^6.2.3", "is-fullwidth-code-point": "^5.1.0" } }, "sha512-aBY19bn/XA+hKOKX0qL7Z0UfdBsbQvc9hn993U8ALUjzxCvDcuZqLoRXjGJrUARWAlwMnsRVD9sw2AFNOYvalA=="],
+
+    "source-map-js": ["source-map-js@1.2.2", "", {}, "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw=="],
+
+    "string-width": ["string-width@8.3.0", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ=="],
+
+    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
+    "strip-final-newline": ["strip-final-newline@4.0.0", "", {}, "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw=="],
+
+    "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
+
+    "svelte": ["svelte@5.57.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-1YiPCAXT0Ct6g1vOMmSLa0Nsc3QRMvtDF32ihgglGVrugIuIK38RyDiFNXVDhtQ81TJjSO57NdMw6DyYLqSGDQ=="],
+
+    "svelte-check": ["svelte-check@4.7.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "@sveltejs/load-config": "^0.2.3", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.0.0 || ^6.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-t2scM//ZuVbSY/T2w6FSBw1v9s2NEmh/g+sy1lqtosW5ylBV5AF4wFb1Ts9Kf3MbfPDUDJDZ9L436YT0SPTdvw=="],
+
+    "svelte-sonner": ["svelte-sonner@1.2.1", "", { "dependencies": { "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-N00LOWb60fjKXULbpngku+7E9Krb16KpNq4/Eax5Vu7o1Dpbca55QpaLPsB+yp82JIEdFhfJuv5cVXLoe0ZtVA=="],
+
+    "svelte-toolbelt": ["svelte-toolbelt@0.10.6", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.35.1", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ=="],
+
+    "tabbable": ["tabbable@6.5.0", "", {}, "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA=="],
+
+    "tailwind-merge": ["tailwind-merge@3.7.0", "", {}, "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA=="],
+
+    "tailwind-variants": ["tailwind-variants@3.3.1", "", { "peerDependencies": { "tailwind-merge": ">=3.0.0", "tailwindcss": "*" }, "optionalPeers": ["tailwind-merge", "tailwindcss"] }, "sha512-4pAvwUtM4HKBiRZftncAbpn6V9Hhwoa5Fl7O2u5zbp7Z5Cvu+/o/6+176WY3WCEES209543quG8zFIcXCsc5Jw=="],
+
+    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
+
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
+
+    "tinyexec": ["tinyexec@1.3.1", "", {}, "sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA=="],
+
+    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
+
+    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
+
+    "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
+    "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
+
+    "ufo": ["ufo@1.6.4", "", {}, "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA=="],
+
+    "ultracite": ["ultracite@7.12.4", "", { "dependencies": { "@clack/prompts": "^1.8.1", "cli-truncate": "^6.1.1", "commander": "^15.0.0", "deepmerge": "^4.3.1", "empathic": "^2.1.0", "execa": "^10.0.1", "fast-glob": "^3.3.3", "find-workspaces": "^0.3.1", "jsonc-parser": "^3.3.1", "log-update": "^8.0.0", "magicast": "^0.5.5", "npm-run-path": "^6.0.0", "nypm": "^0.6.10", "resolve.exports": "^2.0.3", "semver": "^7.8.5", "string-width": "^8.3.0", "which-command": "^0.1.0", "yaml": "^2.9.1", "zod": "^4.6.5" }, "peerDependencies": { "@biomejs/biome": "^2.5.0", "eslint": "^10.9.0", "oxfmt": ">=0.59.0", "oxlint": "^1.86.0", "prettier": "^3.0.0", "stylelint": "^17.0.0" }, "optionalPeers": ["@biomejs/biome", "eslint", "oxfmt", "oxlint", "prettier", "stylelint"], "bin": { "ultracite": "dist/index.js" } }, "sha512-6jVEwaZBaytFm6XRoI3WGS2ZydrkrNvHTD0qTf7983ti2FlEWL1YcxnPaMaYuS6PkXqMhIK2XGr0cbsL4x5pQA=="],
+
+    "undici-types": ["undici-types@8.12.2", "", {}, "sha512-VoMeD2O0KdHhcn+oPqOrpivN+7aDOklVSwOLD7JNjbzV1CboAFek9IFOXnreoufTUtAsCsOK0iETiERPNR/fDA=="],
+
+    "unicorn-magic": ["unicorn-magic@0.3.0", "", {}, "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA=="],
+
+    "vite": ["vite@8.3.4", "", { "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", "postcss": "^8.5.29", "rolldown": "~1.2.12", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.7.1", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ=="],
+
+    "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],
+
+    "which-command": ["which-command@0.1.0", "", { "bin": { "which-command": "cli.js" } }, "sha512-XZyoF5/5hZtXitIwzrU4NKK+Wtbb9aB9CezUEw2Q0wlYK8NUYQxC1rRXgNueYLtBAJwXIb+/tFVk4dozciNJMA=="],
+
+    "wrap-ansi": ["wrap-ansi@10.0.2", "", { "dependencies": { "ansi-styles": "^6.2.3", "string-width": "^8.2.0" } }, "sha512-6OLRNZqRntVGBm26ghZ5eZhCuWWyOkRCSn8XsOIuq5stpCE/tjLbdozd93naILZig0lmD8ANfRwnhn0DLeXGlg=="],
+
+    "yaml": ["yaml@2.9.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw=="],
+
+    "yoctocolors": ["yoctocolors@2.2.0", "", {}, "sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg=="],
+
+    "zimmerframe": ["zimmerframe@1.1.5", "", {}, "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA=="],
+
+    "zod": ["zod@4.6.7", "", {}, "sha512-g8W2D2kU6a8untc053fX1uVBKzM7yqAxW/3zwk83+6RyF2+SKOuV+c0wBDhUwzV1PaGapmZH+rmcUzPf+3CGwg=="],
+
+    "@tailwindcss/node/lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "@tailwindcss/node/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.3", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.2.5", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.4", "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.4" }, "bundled": true }, "sha512-HshSvXzmBxNzqejd3k/KemgQ3hdREUYFRRrgxOZ+gPljDIsO2SDZrVZMd4Z/HsxudQbE62OVyVFE8z9BCurfjA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.4", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@types/node/undici-types": ["undici-types@8.9.0", "", {}, "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg=="],
+
+    "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
+    "mode-watcher/runed": ["runed@0.25.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg=="],
+
+    "mode-watcher/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
+
+    "svelte/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "svelte-sonner/runed": ["runed@0.28.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ=="],
+
+    "ultracite/commander": ["commander@15.0.0", "", {}, "sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
+    "mode-watcher/svelte-toolbelt/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
+  }
+}
diff --git a/caddy/.env.example b/caddy/.env.example
new file mode 100644
index 0000000..ea22f9c
--- /dev/null
+++ b/caddy/.env.example
@@ -0,0 +1,2 @@
+FIREFLY_UI_DOMAIN=firefly-ui.localhost
+CLOUDFLARE_API_TOKEN=
diff --git a/caddy/.gitignore b/caddy/.gitignore
new file mode 100644
index 0000000..a9e5752
--- /dev/null
+++ b/caddy/.gitignore
@@ -0,0 +1,2 @@
+.env
+/Caddyfile
diff --git a/caddy/Caddyfile.example b/caddy/Caddyfile.example
new file mode 100644
index 0000000..d38e81e
--- /dev/null
+++ b/caddy/Caddyfile.example
@@ -0,0 +1,14 @@
+{
+	admin localhost:2019
+
+	log {
+		format console
+	}
+
+	servers {
+		trusted_proxies cloudflare
+		client_ip_headers Cf-Connecting-Ip
+	}
+}
+
+import /etc/caddy/projects.d/*/site.caddy
diff --git a/caddy/README.md b/caddy/README.md
new file mode 100644
index 0000000..f571827
--- /dev/null
+++ b/caddy/README.md
@@ -0,0 +1,3 @@
+# caddy
+
+`site.caddy` routes `{$FIREFLY_UI_DOMAIN}` to the project over the external `caddy` network. In a shared Caddy, mount this directory as `/etc/caddy/projects.d/firefly-ui:ro` and set `FIREFLY_UI_DOMAIN`. Keep it portable: domain only from the env, no `tls`, snippets prefixed with `firefly_ui_`.
diff --git a/caddy/docker-compose.yml b/caddy/docker-compose.yml
new file mode 100644
index 0000000..9631df3
--- /dev/null
+++ b/caddy/docker-compose.yml
@@ -0,0 +1,23 @@
+services:
+  caddy:
+    image: ghcr.io/caddybuilds/caddy-cloudflare:latest
+    restart: unless-stopped
+    ports:
+      - "0.0.0.0:80:80"
+      - "0.0.0.0:443:443"
+      - "0.0.0.0:443:443/udp"
+    networks:
+      - caddy
+    env_file:
+      - .env
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - .:/etc/caddy/projects.d/firefly-ui:ro
+      - caddy_data:/data
+
+networks:
+  caddy:
+    external: true
+
+volumes:
+  caddy_data:
diff --git a/caddy/site.caddy b/caddy/site.caddy
new file mode 100644
index 0000000..eb2c5b9
--- /dev/null
+++ b/caddy/site.caddy
@@ -0,0 +1,5 @@
+{$FIREFLY_UI_DOMAIN} {
+	encode zstd gzip
+
+	reverse_proxy firefly-ui-frontend:3000
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..d36315d
--- /dev/null
+++ b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "tailwind": {
+    "css": "src/routes/layout.css",
+    "baseColor": "neutral"
+  },
+  "aliases": {
+    "components": "#lib/components",
+    "utils": "#lib/utils",
+    "ui": "#lib/components/ui",
+    "hooks": "#lib/hooks",
+    "lib": "#lib"
+  },
+  "typescript": true,
+  "registry": "https://shadcn-svelte.com/registry",
+  "style": "luma",
+  "iconLibrary": "lucide",
+  "menuColor": "default-translucent",
+  "menuAccent": "subtle"
+}
diff --git a/docker-compose.override.yml.example b/docker-compose.override.yml.example
new file mode 100644
index 0000000..7f50391
--- /dev/null
+++ b/docker-compose.override.yml.example
@@ -0,0 +1,22 @@
+services:
+  frontend:
+    networks:
+      default: {}
+      caddy:
+        aliases:
+          - firefly-ui-frontend
+#    ports:
+#      - "127.0.0.1:3000:3000"
+
+  frontend-dev:
+    networks:
+      default: {}
+      caddy:
+        aliases:
+          - firefly-ui-frontend
+#    ports:
+#      - "127.0.0.1:3000:3000"
+
+networks:
+  caddy:
+    external: true
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..6b51e97
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,30 @@
+services:
+  frontend:
+    build: .
+    image: firefly-ui/frontend
+    profiles: [frontend, services]
+    restart: unless-stopped
+    env_file:
+      - path: .env
+        required: false
+    command: [run, serve.ts]
+
+  frontend-dev:
+    image: oven/bun:alpine
+    profiles: [frontend-dev]
+    restart: unless-stopped
+    working_dir: /app
+    env_file:
+      - path: .env
+        required: false
+    environment:
+      API_PROXY_TARGET: http://api:8080
+    volumes:
+      - .:/app
+      - frontend_node_modules:/app/node_modules
+      - frontend_svelte_kit:/app/.svelte-kit
+    command: [sh, -c, "bun install && bun run dev --host 0.0.0.0 --port 3000"]
+
+volumes:
+  frontend_node_modules:
+  frontend_svelte_kit:
diff --git a/docs/agents/decisions.md b/docs/agents/decisions.md
new file mode 100644
index 0000000..374e89d
--- /dev/null
+++ b/docs/agents/decisions.md
@@ -0,0 +1,15 @@
+# Решения
+
+## 2026-10-16, до кикоффа
+
+- Отдельный клиент, а не форк Firefly и не PR в апстрим. Мотив: Firefly на проде на `:latest` с `auto_update`, а релизы выходят примерно дважды в неделю (v6.7.1 15.09, v6.7.9 11.10). Форк пришлось бы постоянно сливать руками. Большой фронт, написанный нейронкой, автор-одиночка в апстрим не возьмёт.
+- Клиент живёт на домене Firefly (`firefly.hhhhh.dev`) и ходит в `/api/v1` с кукой `laravel_token`. Вход, MFA и выход остаются за Firefly. Мотив: не нужны ни OAuth, ни токены в браузере.
+- Экраны занимают те же пути, что в Firefly; чего нет, отдаёт сам Firefly. Мотив человека: «не сломались пути».
+- Раскладка, меню и состав страниц как у Firefly v1, качество новое. Мотив человека: привык к раскладке, а пользоваться невозможно (таблицы, отчёты, поиск, редактор транзакций, клавиатура).
+- Объём: надмножество Firefly. Редактирование автоматизаций (правила, повторяющиеся, вебхуки) уходит в старый UI. Мотив человека: «ими всё равно не пользуюсь», скоуп не резать.
+- Без попапов, для power user, vim-навигация.
+- Тема claddcn-svelte (`lib/claddcn-svelte`), цвета от Firefly, не розовый msos.
+- Шаблон: `newproject --parts frontend,caddy --frontend svelte --serve static --mcp svelte,context7`, `ui_library=shadcn`, линтер biome. Потом `claddcn init --strip-vars`.
+- SvelteKit 3 даёт алиас `#lib` (subpath imports), а шаблонный `components.json` и компоненты claddcn писали `$lib`. Переписано на `#lib`, иначе `svelte-check` давал 87 ошибок. Это стоит поправить в шаблоне `frontend-svelte` и в claddcn-svelte.
+- Вендорный UI (`src/lib/components/ui`, `src/routes/claddcn.css`) исключён из biome целиком: правила ultracite спорили с кодом shadcn и claddcn.
+- Эталоны старого интерфейса: образ `fireflyiii/core:version-6.6.6`, последний с v1 и v2 (убраны в коммите `4c29d34ef7` 02.09.2026, первым без них вышел v6.7.0).
diff --git a/docs/agents/kickoff.md b/docs/agents/kickoff.md
new file mode 100644
index 0000000..bca203d
--- /dev/null
+++ b/docs/agents/kickoff.md
@@ -0,0 +1,116 @@
+$impeccable делаем Firefly UI: новый интерфейс к моему Firefly III. Это отдельный SvelteKit-клиент поверх его API, узнаваемый Firefly по раскладке, но красивый, быстрый и целиком управляемый с клавиатуры. К утру он должен работать на https://firefly.hhhhh.dev, на тех же адресах, что и сам Firefly. Пользователь один, я: power user, люблю vim-навигацию.
+
+Сначала 15 минут со мной, потом я сплю, дальше ты сам до утра.
+
+## Старт, пока я рядом
+
+1. Прочитай код Firefly (ниже, что и где), без скринов и без запуска. Составь для себя карту: страницы, что на каждой, какие эндпоинты API за ней стоят, чего в API нет.
+2. `impeccable init` с интервью, жёстко, минут на 15. Спрашивай про вкус, плотность, что меня бесит в Firefly и что я в нём люблю. Ответы в PRODUCT.md и `docs/agents/decisions.md`.
+3. Один раунд вопросов по «Что нужно от меня» (ниже), до 4 штук, у каждого дефолт. Не отвечу за 10 минут: бери дефолты и пиши их в decisions.md с пометкой «допущение».
+4. Дальше всё без меня.
+
+## Что это за продукт
+
+Мне нравится сама система Firefly III и его раскладка, к ней я привык. Пользоваться им невозможно: таблицы рендерятся криво, отчёты и способ их получения ужасны, поиск странный, редактор транзакций глючит, с клавиатуры не работает почти ничего. В v6.7 автор выкинул старый интерфейс (v1 на Twig и v2 на Alpine) и оставил только новый v3 (Blade, Alpine, AdminLTE 4). Сам он пишет, что v3 сырой (`changelog.md`, v6.7.1, Known issues).
+
+Нужно надмножество обычного Firefly. Всё, что он умеет, плюс то, чего ему не хватает. Это не «привет, Claude, сделай финансовое приложение». Человек, привыкший к Firefly, открывает его и сразу узнаёт: то же меню, те же страницы, те же блоки на тех же местах. Только сделано хорошо.
+
+Как работать над каждой страницей:
+1. Посмотри, как страница выглядела в v1 и как выглядит в v3: скрин со стенда, шаблон и контроллер.
+2. Пойми, что автор, вероятно, хотел этим сказать. Одна строка на страницу в `docs/agents/pages.md`.
+3. Сделай нашу версию. Раскладка и места элементов как в Firefly, чтобы рука находила. Таблицы, формы, навигация и клавиатура сделаны заново и хорошо.
+4. Где можно выпендриться, выпендрись: дашборд, страницы счетов, бюджетов, категорий, отчёты, всё со статистикой и графиками. Выпендрёж не должен ломать узнаваемость.
+5. Скрин нашей версии рядом со скрином v1 в `docs/agents/demos/<страница>/`.
+
+## Что читать
+
+- **Исходники Firefly III**: `~/projects/contributions/firefly-iii`. Если на машине его нет: `git clone https://github.com/firefly-iii/firefly-iii ~/projects/contributions/firefly-iii`. Это чужой репо, ничего в нём не меняй и рабочую копию не переключай. Старые версии читай через `git show <тег>:<путь>` или отдельный `git worktree` во временном каталоге.
+  - `v6.6.6`: последний релиз со старыми интерфейсами. v1 лежит в `resources/views/*.twig` (кроме `v2/`), v2 в `resources/views/v2` и `resources/assets/v2`. Отсюда раскладка, меню, состав страниц, формы.
+  - Последний тег (сейчас `v6.7.9`): v3 в `resources/views`, `resources/assets/v3`. Отсюда текущие возможности и новые экраны.
+  - `routes/web.php`: адреса страниц. Наши экраны живут по тем же путям.
+  - `routes/api.php`, `app/Api/V1`: что умеет API. Типы генерируй из OpenAPI-спеки (`https://github.com/firefly-iii/api-docs`, yaml), руками их не пиши.
+  - `changelog.md` и issues на GitHub с меткой про layout: что у людей болит в v3.
+- **Firefly Pico** (`https://github.com/cioraneanu/firefly-pico`): сторонний фронт на Nuxt поверх того же API. Бери только грабли API, которые они уже нашли. Вид оттуда не брать.
+- **claddcn-svelte** (`https://git.kotikot.com/lib/claddcn-svelte`): тема cladd для shadcn-svelte, уже поставлена в этот репо (`src/routes/claddcn.css`, `#lib/components/ui`). README там: утилиты `cladd-*`, акценты, Surface.
+- **Деплой**: `~/projects/infra/komodo` (если нет: `git clone git@git.kotikot.com:infra/komodo.git`).
+  - `fleet/personal/personal-main/fireflyiii/`: стек Firefly (`stack.toml`, `site.caddy`). Firefly на `:latest` с `auto_update`, так и остаётся.
+  - `scripts/new-app-stack.py` и `docs/architecture.md`, раздел «Деплой приложений»: как завести стек приложения из шаблона.
+  - `fleet/personal/personal-main/lodge/`: живой образец такого стека.
+
+Исследуй параллельными субагентами, быстро.
+
+## Устройство
+
+- SPA на SvelteKit (`adapter-static`), раздаётся `serve.ts` на Bun, как задал шаблон. Своего бэкенда нет, всё через `/api/v1` Firefly.
+- **Авторизация через Firefly.** Вход, MFA и выход остаются его страницами. После входа Firefly ставит куку `laravel_token` (`CreateFreshApiToken` в `bootstrap/app.php`), и API принимает её с CSRF-заголовком. Так ходит и сам v3: `resources/assets/v3/js/boot/axios.js`. Для этого клиент обязан жить на том же домене. На 401 полная перезагрузка на `/login`, после входа возврат туда, где был.
+- **Риск, проверить первым:** кука выдаётся только на web-ответах Laravel, а наши страницы отдаёт не Laravel. Узнай, сколько она живёт и как её продлевать, пока вкладка открыта. Решение и проверку запиши в decisions.md.
+- **Пути.** Каждый экран живёт по тому же адресу, что в Firefly (`/accounts/asset`, `/transactions/show/12`, `/budgets`). Закладки и ссылки продолжают работать. Всё, чего у нас нет, отдаёт сам Firefly: `/api`, `/oauth`, `/login`, `/profile`, `/two-factor`, cron-URL, автоматизации, POST-запросы его форм. Переход из клиента на такую страницу делается полной загрузкой. Нужен переключатель «открыть эту страницу в старом интерфейсе» (клавиша плюс пункт палитры), который работает на любом адресе. Маршрутизация живёт в `site.caddy` стека `fireflyiii`. Отказ от нового интерфейса это откат одного файла, опиши его в report.md.
+- Firefly обновляется сам, поэтому клиент не должен молча ломаться. Типы из спеки и `make smoke`: прогон основных запросов против локального `fireflyiii/core:latest`. Версию API клиент читает из `/api/v1/about`. Если она уехала вперёд, показывает это одной строкой в подвале.
+- В dev Vite проксирует на локальный Firefly всё, что не наше, чтобы вход и куки работали как на проде (`vite.config.ts`, `.env`).
+- SvelteKit здесь третий: алиас `#lib` (subpath imports в `package.json`), а не `$lib`. `components.json` уже переведён.
+
+## Стенд для отсмотра
+
+Поднимай на этой машине в докере. Имя compose-проекта `ffui-*`, порты случайные высокие, трогать только своё.
+- `fireflyiii/core:version-6.6.6` с `FIREFLY_III_LAYOUT=v1` (для сравнения можно и `v2`).
+- `fireflyiii/core:latest`: на нём v3 и на нём же разрабатывается клиент.
+- База у каждого своя: sqlite или mariadb, как быстрее заведётся.
+- Одни и те же демо-данные в обоих через `scripts/seed` по API. Это отдельный скрипт, моков во фронте нет. Данные правдоподобные: 6–12 месяцев истории; счета (основные, сберегательные, кредитка, кредит), расходные и доходные; сплиты, переводы, две-три валюты, бюджеты с лимитами, категории, теги, подписки (bills), копилки, группы объектов, повторяющиеся транзакции и пара правил. Снос данных тем же скриптом.
+- Эталонные скрины v1 и v3 каждой страницы: `docs/agents/reference/<страница>/{v1,v3}.png`.
+
+## Что должно быть к утру, по приоритету
+
+Объём не режь, делай всё по списку. Порядок нужен только на случай, если время кончится: тогда режь снизу. Первый пункт доведи до конца.
+
+1. **Каркас на проде.** Узнаваемая раскладка Firefly v1 (боковое меню того же состава и порядка, шапка, хлебные крошки, выбор периода как у Firefly). Вход через Firefly. Палитра команд (`⌘K` / `Ctrl+K`) по страницам, счетам, бюджетам, категориям, тегам и действиям. Vim-навигация: `j/k` по строкам, `gg/G`, `/` поиск, `g`-переходы (`g d` дашборд, `g t` транзакции и так далее), `?` шпаргалка. Переключатель в старый интерфейс. Маршрутизация путей, как описано выше.
+   Приёмка: на https://firefly.hhhhh.dev после входа открывается новый дашборд. `/rules` открывает старую страницу Firefly. `/api/v1/about` с токеном отвечает. Выход и повторный вход возвращают на страницу, где был. Клавишей открывается та же страница в старом интерфейсе.
+2. **Транзакции.** Списки по типам и по счёту. Нормальные таблицы: плотные, выравнивание сумм, валюты, сплиты раскрываются на месте. Множественный выбор с клавиатуры и массовые действия (категория, бюджет, теги, удаление). Поиск на языке запросов Firefly с автодополнением операторов и значений, запрос живёт в URL. Редактор транзакции страницей, без модалки: создание, правка, сплиты, клон, удаление, ссылки между транзакциями, вложения. Автодополнение счетов, категорий, бюджетов, тегов. Сохранение `⌘Enter`. Быстрый ввод с любой страницы.
+   Приёмка: на стенде ввести с клавиатуры, без мыши, расход со сплитом на две категории, найти его поиском, поменять категорию массовым действием, удалить.
+3. **Счета и дашборд.** Счета по типам (список, просмотр с графиком баланса и транзакциями за период, создание и правка). Дашборд с тем же составом блоков, что в Firefly, нарисованный заново.
+4. **Бюджеты** (лимиты по периодам, доступный бюджет, траты против лимита), **категории**, **теги**, **подписки (bills)**, **копилки**, **группы объектов**.
+5. **Отчёты.** Генератор как в Firefly (тип, счета, период), но сразу живая страница: параметры в URL, меняются на месте, графики красивые, данные из insight- и chart-эндпоинтов. Главное место для выпендрёжа.
+6. **Остальное с API:** валюты и курсы, вложения, типы ссылок, настройки (preferences), экспорт, финансовые группы (administrations).
+7. **Автоматизации** (правила, группы правил, повторяющиеся транзакции, вебхуки): списки и просмотр можно, создание и правка уходят полной загрузкой в старый интерфейс Firefly.
+
+Чего не делаем: редактирование автоматизаций (только старый UI); то, чего нет в API (профиль, пароль, MFA, OAuth-клиенты, админка пользователей): это ссылки в старый UI. Если сверку счёта (reconcile) или смену типа транзакции нельзя честно сделать через API, они тоже остаются в старом UI, а в decisions.md записано почему.
+
+## Данные
+
+Разработка и проверка идут только на стенде с демо-данными. Прод это мои настоящие финансы. На проде только чтение и один смоук записи: транзакция с тегом `ffui-smoke` создаётся и удаляется, после смоука на проде не остаётся ничего твоего.
+
+## Дизайн
+
+impeccable, режим Operate, claddcn-svelte (уже стоит). PRODUCT.md по итогам интервью.
+- Вкус: узнаваемый Firefly. Палитра «примерно как у Firefly, только не уродская»: возьми его синий и цвета сумм (доход, расход, перевод) из v1 и v3, приведи в порядок через акценты claddcn. Не розовый msos. Светлая и тёмная тема, по умолчанию как в системе.
+- Плотность как у инструмента для power user: таблицы плотные, числа моноширинные и выровнены, ничего не прячется за наведением.
+- Без попапов. Редактирование страницей или на месте. Подтверждение удаления повторным нажатием на месте, а не диалогом.
+- Силы вкладывать в: таблицы транзакций и редактор; дашборд и отчёты (графики); палитру и клавиатуру. Остальное спокойное.
+- Не надо: таблетки, пульсация, скелетоны, тосты, длинные тире, висячие предлоги, некликабельные кнопки, подписи под блоками, жаргон. Карточки одной высоты. Фильтры, период и вкладки в URL. ПКМ вместо трёх точек. Ответ там, где нажал.
+- Тексты интерфейса как в Firefly (язык решим в интервью). Числа и даты по локали из настроек Firefly пользователя.
+
+## Как работаем
+
+- Карта страниц и контракт API в `docs/agents/pages.md` и `docs/agents/api-contract.md`, потом экраны параллельно субагентами.
+- Ядро по приоритетам доводи до приёмки. Дальше пространство твоё: всё, что сделает продукт лучше, делай без вопроса, смелые ставки приветствуются. Условие одно: каждая такая вещь описана в tour.md в блоке «сверх кикоффа» со строкой «зачем».
+- Чего в кикоффе нет, не придумывай. Нашёл дыру, назови дыру. Если репо устроен иначе, чем тут написано, следуй репо.
+- Чужие процессы и контейнеры на машине не трогай. Только свои PID, своё дерево. Никаких `pkill -f`, `prune`, `git reset` в общих копиях. Субагентам то же.
+- Проверка глазами (`eyes`): headless chromium, 1440×900, 1920×1080 и 390×844. Каждый экран, рядом с эталоном v1. Посмотри сам, исправь одним заходом, сними ещё раз. Скрины в `docs/agents/demos`.
+- `make fmt` и `make check` после каждого куска.
+- Коммиты через `/commit` в `dev`. Деплой: сервер `personal-main`, домен `firefly.hhhhh.dev`. Новый стек приложения через `scripts/new-app-stack.py` в `infra/komodo`, маршрутизация в `fleet/personal/personal-main/fireflyiii/site.caddy`, выкатка через `kom`. После деплоя доказать, что доехало: `kom` и живой адрес.
+- Главный сценарий (пункты 1 и 2) пройди на проде целиком в рамках смоука выше, потом проверь, что твоих данных не осталось.
+- Не заканчивай ход, пока работают фоновые агенты или идёт деплой.
+
+## Что нужно от меня (спроси в раунде вопросов)
+
+1. Права на деплой: можно ли пушить в `infra/komodo` (`main`) новый стек и правку `site.caddy` у `fireflyiii` и выкатывать через `kom` без меня. Дефолт: да, только эти два каталога. Проверь `kom`-ключом этой машины, что он вообще разрешает. Если отказ, обходить нельзя: всё готовишь, а выкатку оставляешь мне с точной командой в report.md.
+2. Смоук на проде: одна транзакция с тегом `ffui-smoke`, создать и удалить. Дефолт: да.
+3. Язык интерфейса. Дефолт: английский, как подписи Firefly v1; форматы по локали пользователя.
+4. Что открывается на корне домена: новый интерфейс (старый по переключателю) или старый (новый на `/app`). Дефолт: новый на тех же путях.
+
+## Утром
+
+Два файла в `docs/agents` и короткий отчёт в чат простым языком:
+- `report.md`: адрес; что работает и чем проверено; что не проверено вживую; что не сделано и почему; где угадывал (особенно про API); как откатить маршрутизацию одним шагом; что бы ещё закрыл. Всё, что обещал в раунде вопросов, тут есть.
+- `tour.md`: по экрану одна строка «что это, как попасть (адрес, клавиша, ПКМ), зачем». Отдельно полная раскладка клавиш. Отдельно блок «сверх кикоффа» в том же формате. Все скрытые аффордансы перечислены: меню по ПКМ, клавиши, тумблеры, переключатель в старый UI.
+
+Когда я вернусь, первым ходом проведи меня по tour.md, потом правки.
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d77a9f9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "firefly_ui",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
+  },
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "fix": "ultracite fix",
+    "lint": "ultracite check",
+    "prepare": "svelte-kit sync || echo ''",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.15",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@internationalized/date": "^3.12.0",
+    "@lucide/svelte": "^1.23.0",
+    "@sveltejs/adapter-static": "^4.0.0",
+    "@sveltejs/kit": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/bun": "^1.3.0",
+    "bits-ui": "^2.16.3",
+    "clsx": "^2.1.1",
+    "mode-watcher": "^1.1.0",
+    "shadcn-svelte": "^1.3.0",
+    "svelte": "^5.57.1",
+    "svelte-check": "^4.7.6",
+    "svelte-sonner": "^1.1.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3",
+    "ultracite": "^7.12.4",
+    "vite": "^8.0.16"
+  }
+}
diff --git a/renovate.jsonc b/renovate.jsonc
new file mode 100644
index 0000000..25ddea3
--- /dev/null
+++ b/renovate.jsonc
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["local>templates/renovate"]
+}
diff --git a/serve.ts b/serve.ts
new file mode 100644
index 0000000..befdf7d
--- /dev/null
+++ b/serve.ts
@@ -0,0 +1,36 @@
+const ROOT = `${import.meta.dir}/build`;
+const PORT = Number(Bun.env.PORT ?? 3000);
+const IMMUTABLE = "/_app/immutable/";
+
+const fallback = Bun.file(`${ROOT}/index.html`);
+
+function headersFor(pathname: string): HeadersInit {
+  if (pathname.startsWith(IMMUTABLE)) {
+    return { "Cache-Control": "public, max-age=31536000, immutable" };
+  }
+  return { "Cache-Control": "no-cache" };
+}
+
+Bun.serve({
+  async fetch(request) {
+    const { pathname } = new URL(request.url);
+
+    if (pathname.includes("..")) {
+      return new Response("Bad Request", { status: 400 });
+    }
+
+    const file = Bun.file(`${ROOT}${pathname}`);
+    if (await file.exists()) {
+      return new Response(file, { headers: headersFor(pathname) });
+    }
+
+    return new Response(fallback, {
+      headers: {
+        "Cache-Control": "no-cache",
+        "Content-Type": "text/html; charset=utf-8",
+      },
+    });
+  },
+  idleTimeout: 30,
+  port: PORT,
+});
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..520c421
--- /dev/null
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..f498274
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <meta content="scale" name="text-scale">
+    <link href="%sveltekit.assets%/favicon.svg" rel="icon" type="image/svg+xml">
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/src/env.ts b/src/env.ts
new file mode 100644
index 0000000..f6966a0
--- /dev/null
+++ b/src/env.ts
@@ -0,0 +1,5 @@
+import { defineEnvVars } from "@sveltejs/kit/env";
+
+export const variables = defineEnvVars({
+  PUBLIC_API_BASE_URL: { public: true, schema: (input) => input ?? "/api" },
+});
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
new file mode 100644
index 0000000..423b466
--- /dev/null
+++ b/src/lib/api/client.ts
@@ -0,0 +1,56 @@
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
+
+const BASE = PUBLIC_API_BASE_URL;
+
+export class ApiError extends Error {
+  status: number;
+
+  constructor(status: number, message: string) {
+    super(message);
+    this.status = status;
+    this.name = "ApiError";
+  }
+}
+
+type Json = Record<string, unknown> | unknown[];
+
+async function handle<T>(res: Response): Promise<T> {
+  if (res.status === 204) {
+    return undefined as T;
+  }
+  if (res.ok) {
+    return (await res.json()) as T;
+  }
+  let detail = res.statusText;
+  try {
+    const { detail: parsed } = (await res.json()) as { detail?: string };
+    if (parsed) {
+      detail = parsed;
+    }
+  } catch {
+    detail = res.statusText;
+  }
+  throw new ApiError(res.status, detail);
+}
+
+async function request<T>(
+  method: string,
+  path: string,
+  body?: Json
+): Promise<T> {
+  const init: RequestInit = { credentials: "include", method };
+  if (body !== undefined) {
+    init.headers = { "Content-Type": "application/json" };
+    init.body = JSON.stringify(body);
+  }
+  const res = await fetch(BASE + path, init);
+  return handle<T>(res);
+}
+
+export const api = {
+  del: <T>(path: string) => request<T>("DELETE", path),
+  get: <T>(path: string) => request<T>("GET", path),
+  patch: <T>(path: string, body?: Json) => request<T>("PATCH", path, body),
+  post: <T>(path: string, body?: Json) => request<T>("POST", path, body),
+  put: <T>(path: string, body?: Json) => request<T>("PUT", path, body),
+};
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..e263f10
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+  bind:ref
+  data-slot="avatar-fallback"
+  class={cn(
+    "flex size-full items-center justify-center rounded-full font-semibold text-cladd-fg-soft text-cladd-xs uppercase",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..0a00e8d
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+  bind:ref
+  data-slot="avatar-image"
+  class={cn("aspect-square size-full", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..0f25887
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    loadingStatus = $bindable("loading"),
+    class: className,
+    ...restProps
+  }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+  bind:ref
+  bind:loadingStatus
+  data-slot="avatar"
+  class={cn(
+    "cladd-surface cladd-gradient cladd-outline relative flex size-cladd-lg shrink-0 overflow-hidden rounded-full",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..71f5b20
--- /dev/null
+++ b/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback,
+};
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..11f7c14
--- /dev/null
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from "tailwind-variants";
+
+  export const badgeVariants = tv({
+    base: "cladd-surface inline-flex h-cladd-nested-md w-fit shrink-0 select-none items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-cladd-sm px-2 font-semibold text-cladd-xs leading-none has-[>svg:first-child]:ps-1.5 has-[>svg:last-child]:pe-1.5 [&>svg]:pointer-events-none [&>svg]:size-3",
+    variants: {
+      variant: {
+        default:
+          "cladd-gradient cladd-outline cladd-color-brand text-cladd-primary",
+        secondary: "cladd-gradient cladd-outline text-cladd-fg",
+        destructive:
+          "cladd-gradient cladd-outline cladd-color-red text-cladd-primary",
+        success:
+          "cladd-gradient cladd-outline cladd-color-green text-cladd-primary",
+        warning:
+          "cladd-gradient cladd-outline cladd-color-yellow text-cladd-primary",
+        outline: "cladd-ghost text-cladd-fg shadow-cladd-outline",
+        fill: "cladd-gradient-fill cladd-outline cladd-color-brand",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import { withColor, type CladdColor } from "../button/button.svelte";
+
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = "default",
+    color,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+    color?: CladdColor;
+  } = $props();
+</script>
+
+<svelte:element
+  this={href ? "a" : "span"}
+  bind:this={ref}
+  data-slot="badge"
+  {href}
+  class={cn(
+    withColor(badgeVariants({ variant }), color),
+    href && "cladd-hoverable cladd-focusable",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..64e0aa9
--- /dev/null
+++ b/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 0000000..cae4660
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef, type WithoutChildren } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<
+    WithElementRef<HTMLAttributes<HTMLSpanElement>>
+  > = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-ellipsis"
+  role="presentation"
+  aria-hidden="true"
+  class={cn("flex size-9 items-center justify-center", className)}
+  {...restProps}
+>
+  <EllipsisIcon class="size-4" />
+  <span class="sr-only">More</span>
+</span>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 0000000..5e120a1
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLLiAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-item"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</li>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 0000000..1a27e41
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    href,
+    child,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+  } = $props();
+
+  const attrs = $derived({
+    "data-slot": "breadcrumb-link",
+    class: cn("transition-colors hover:text-foreground", className),
+    href,
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <a bind:this={ref} {...attrs}> {@render children?.()} </a>
+{/if}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 0000000..2922c34
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLOlAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+  bind:this={ref}
+  data-slot="breadcrumb-list"
+  class={cn(
+    "flex flex-wrap items-center gap-1.5 break-words font-medium text-cladd-fg-soft text-cladd-xs sm:gap-2.5",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</ol>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 0000000..139c3d4
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-page"
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={cn("font-medium text-cladd-fg", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 0000000..f7aff0d
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLLiAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-separator"
+  role="presentation"
+  aria-hidden="true"
+  class={cn("[&>svg]:size-3.5", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <ChevronRightIcon />
+  {/if}
+</li>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 0000000..2a89ff2
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+  bind:this={ref}
+  data-slot="breadcrumb"
+  class={className}
+  aria-label="хлебные крошки"
+  {...restProps}
+>
+  {@render children?.()}
+</nav>
diff --git a/src/lib/components/ui/breadcrumb/index.ts b/src/lib/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..72e5847
--- /dev/null
+++ b/src/lib/components/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+  Root,
+  Ellipsis,
+  Item,
+  Separator,
+  Link,
+  List,
+  Page,
+  //
+  Root as Breadcrumb,
+  Ellipsis as BreadcrumbEllipsis,
+  Item as BreadcrumbItem,
+  Separator as BreadcrumbSeparator,
+  Link as BreadcrumbLink,
+  List as BreadcrumbList,
+  Page as BreadcrumbPage,
+};
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..ffcb1fa
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,131 @@
+<script lang="ts" module>
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes,
+  } from "svelte/elements";
+  import { type VariantProps, tv } from "tailwind-variants";
+
+  export type CladdColor =
+    | "neutral"
+    | "brand"
+    | "red"
+    | "pink"
+    | "purple"
+    | "blue"
+    | "cyan"
+    | "lime"
+    | "green"
+    | "yellow"
+    | "orange";
+
+  export const buttonVariants = tv({
+    base: "cladd-clickable cladd-focusable relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap font-semibold disabled:pointer-events-none disabled:*:opacity-40 aria-disabled:pointer-events-none aria-disabled:*:opacity-40 aria-invalid:outline-destructive [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default:
+          "cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-color-brand text-cladd-primary",
+        destructive:
+          "cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-color-red text-cladd-primary",
+        outline:
+          "cladd-surface cladd-gradient cladd-outline cladd-hoverable text-cladd-fg",
+        secondary: "cladd-surface cladd-gradient cladd-hoverable text-cladd-fg",
+        ghost: "cladd-ghost cladd-hoverable text-cladd-fg",
+        fill: "cladd-surface cladd-gradient-fill cladd-outline cladd-hoverable",
+        link: "cladd-color-brand text-cladd-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-cladd-md rounded-cladd-md px-2.5 text-cladd-xs",
+        xs: "h-cladd-xs gap-1.5 rounded-cladd-xs px-2 text-cladd-xs [&_svg:not([class*=size-])]:size-3",
+        sm: "h-cladd-sm gap-1.5 rounded-cladd-sm px-2.5 text-cladd-xs",
+        lg: "h-cladd-lg rounded-cladd-lg px-3 text-cladd-xs",
+        xl: "h-cladd-xl rounded-cladd-xl px-3.5 text-cladd-sm",
+        icon: "size-cladd-md rounded-cladd-md",
+        "icon-xs":
+          "size-cladd-xs rounded-cladd-xs [&_svg:not([class*=size-])]:size-3",
+        "icon-sm": "size-cladd-sm rounded-cladd-sm",
+        "icon-lg": "size-cladd-lg rounded-cladd-lg",
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "",
+      },
+    },
+    compoundVariants: [{ variant: "link", class: "h-auto rounded-none px-0" }],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: false,
+    },
+  });
+
+  /** Swaps the variant's accent for an explicit one: `<Button color="green">`. */
+  export function withColor(classes: string, color?: CladdColor) {
+    if (!color) {
+      return classes;
+    }
+    return `${classes.replace(/\bcladd-color-\w+/g, "")} cladd-color-${color}`;
+  }
+
+  export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+  export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+      rounded?: boolean;
+      color?: CladdColor;
+    };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    variant = "default",
+    size = "default",
+    rounded = false,
+    color,
+    ref = $bindable(null),
+    href,
+    type = "button",
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
+
+  const classes = $derived(
+    cn(withColor(buttonVariants({ variant, size, rounded }), color), className)
+  );
+</script>
+
+<!-- Content sits in its own box so the press can shrink it while the surface stays put. -->
+{#if href}
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={classes}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    role={disabled ? "link" : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+  >
+    <span data-slot="button-content" class="cladd-button-content"
+      >{@render children?.()}</span
+    >
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={classes}
+    {type}
+    {disabled}
+    {...restProps}
+  >
+    <span data-slot="button-content" class="cladd-button-content"
+      >{@render children?.()}</span
+    >
+  </button>
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..761edcf
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,21 @@
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type CladdColor,
+  buttonVariants,
+  withColor,
+} from "./button.svelte";
+
+export {
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  withColor,
+  type CladdColor,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+};
diff --git a/src/lib/components/ui/card/card-action.svelte b/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..5ac9b13
--- /dev/null
+++ b/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-action"
+  class={cn(
+    "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..1d29484
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-content"
+  class={cn("px-4", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..d7f82db
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+  bind:this={ref}
+  data-slot="card-description"
+  class={cn("text-cladd-fg-soft text-cladd-xs leading-relaxed", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..e1ed303
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-footer"
+  class={cn("flex items-center gap-2 px-4 [.border-t]:pt-4", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..4a89145
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-header"
+  class={cn(
+    "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..ae4668a
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-title"
+  class={cn("font-semibold text-cladd-sm leading-tight", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..5297ab8
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card"
+  class={cn(
+    "cladd-surface cladd-outline flex flex-col gap-4 rounded-cladd-panel py-4 text-cladd-fg *:[form]:flex *:[form]:flex-col *:[form]:gap-4",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..406a5ce
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  Action,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle,
+  Action as CardAction,
+};
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..d7de6e1
--- /dev/null
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from "bits-ui";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import MinusIcon from "@lucide/svelte/icons/minus";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+  bind:ref
+  data-slot="checkbox"
+  class={cn(
+    "peer group/checkbox cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-clickable cladd-focusable relative flex size-cladd-thumb-sm shrink-0 items-center justify-center rounded-full text-cladd-fg-soft disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-destructive",
+    "cladd-fill-checked",
+    (checked || indeterminate) && "cladd-color-brand",
+    className
+  )}
+  bind:checked
+  bind:indeterminate
+  {...restProps}
+>
+  {#snippet children({
+    checked,
+    indeterminate,
+  })}
+    <span
+      data-slot="checkbox-indicator"
+      class={cn(
+        "flex items-center justify-center transition-[scale,color] duration-200",
+        checked || indeterminate
+          ? "text-cladd-on-primary group-active/checkbox:scale-90"
+          : "scale-75 group-active/checkbox:scale-65"
+      )}
+    >
+      {#if indeterminate}
+        <MinusIcon class="size-3" strokeWidth={3} />
+      {:else}
+        <CheckIcon class="size-3" strokeWidth={3} />
+      {/if}
+    </span>
+  {/snippet}
+</CheckboxPrimitive.Root>
diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..d1b2485
--- /dev/null
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+  Root,
+  //
+  Root as Checkbox,
+};
diff --git a/src/lib/components/ui/collapsible/collapsible-content.svelte b/src/lib/components/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000..6c9f34e
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content
+  bind:ref
+  data-slot="collapsible-content"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/collapsible/collapsible-trigger.svelte b/src/lib/components/ui/collapsible/collapsible-trigger.svelte
new file mode 100644
index 0000000..ab2ce1f
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger
+  bind:ref
+  data-slot="collapsible-trigger"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/collapsible/collapsible.svelte b/src/lib/components/ui/collapsible/collapsible.svelte
new file mode 100644
index 0000000..ac14155
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    open = $bindable(false),
+    ...restProps
+  }: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root
+  bind:ref
+  bind:open
+  data-slot="collapsible"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/collapsible/index.ts b/src/lib/components/ui/collapsible/index.ts
new file mode 100644
index 0000000..296a91b
--- /dev/null
+++ b/src/lib/components/ui/collapsible/index.ts
@@ -0,0 +1,13 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+  Root,
+  Content,
+  Trigger,
+  //
+  Root as Collapsible,
+  Content as CollapsibleContent,
+  Trigger as CollapsibleTrigger,
+};
diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100644
index 0000000..487dbf8
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+  import type { Snippet } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="context-menu-checkbox-item"
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full py-1 ps-9 pe-3 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-highlighted:bg-cladd-surface-next data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({
+    checked,
+  })}
+    <span
+      class="pointer-events-none absolute start-3 flex size-4 items-center justify-center"
+    >
+      {#if checked}
+        <CheckIcon class="size-4" />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
new file mode 100644
index 0000000..6d1555c
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+  import ContextMenuPortal from "./context-menu-portal.svelte";
+  import type { ComponentProps } from "svelte";
+  import type { WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    portalProps,
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<
+      ComponentProps<typeof ContextMenuPortal>
+    >;
+  } = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+  <ContextMenuPrimitive.Content
+    bind:ref
+    data-slot="context-menu-content"
+    class={cn(
+      "cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 max-h-(--bits-context-menu-content-available-height) min-w-[10rem] origin-(--bits-context-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none",
+      className
+    )}
+    {...restProps}
+  />
+</ContextMenuPortal>
diff --git a/src/lib/components/ui/context-menu/context-menu-group-heading.svelte b/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
new file mode 100644
index 0000000..78b70e1
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ContextMenuPrimitive.GroupHeadingProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="context-menu-group-heading"
+  data-inset={inset}
+  class={cn(
+    "cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-group.svelte b/src/lib/components/ui/context-menu/context-menu-group.svelte
new file mode 100644
index 0000000..7b769f3
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-group.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps =
+    $props();
+</script>
+
+<ContextMenuPrimitive.Group
+  bind:ref
+  data-slot="context-menu-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
new file mode 100644
index 0000000..b2ff4b9
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = "default",
+    ...restProps
+  }: ContextMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+  bind:ref
+  data-slot="context-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "data-[variant=destructive]:*:[svg]:!text-destructive relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full px-3 py-1 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[variant=destructive]:data-highlighted:bg-destructive/12 data-[disabled]:pointer-events-none data-highlighted:bg-cladd-surface-next data-[inset]:ps-8 data-[inset]:ps-9 data-[variant=destructive]:text-destructive data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-label.svelte b/src/lib/components/ui/context-menu/context-menu-label.svelte
new file mode 100644
index 0000000..db20296
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="context-menu-label"
+  data-inset={inset}
+  class={cn(
+    "cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/context-menu/context-menu-portal.svelte b/src/lib/components/ui/context-menu/context-menu-portal.svelte
new file mode 100644
index 0000000..8674d44
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+  let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 0000000..f043063
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(""),
+    ...restProps
+  }: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="context-menu-radio-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
new file mode 100644
index 0000000..12672a6
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import CircleIcon from "@lucide/svelte/icons/circle";
+  import { cn, type WithoutChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="context-menu-radio-item"
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full py-1 ps-9 pe-3 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-highlighted:bg-cladd-surface-next data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({
+    checked,
+  })}
+    <span
+      class="pointer-events-none absolute start-3 flex size-4 items-center justify-center"
+    >
+      {#if checked}
+        <CircleIcon class="size-2 fill-current" />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</ContextMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-separator.svelte b/src/lib/components/ui/context-menu/context-menu-separator.svelte
new file mode 100644
index 0000000..788533e
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+  bind:ref
+  data-slot="context-menu-separator"
+  class={cn("-mx-2 my-2 h-px bg-cladd-bg-outline", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
new file mode 100644
index 0000000..1ce50a0
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="context-menu-shortcut"
+  class={cn(
+    "ms-auto font-mono text-cladd-2xs text-cladd-fg-softer tracking-widest",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
new file mode 100644
index 0000000..665a417
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+  bind:ref
+  data-slot="context-menu-sub-content"
+  class={cn(
+    "cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 min-w-[10rem] origin-(--bits-context-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100644
index 0000000..592a080
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { cn, type WithoutChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="context-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full px-3 py-1 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-[state=open]:bg-cladd-surface-next data-highlighted:bg-cladd-surface-next data-[inset]:ps-8 data-[inset]:ps-9 data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ms-auto" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub.svelte b/src/lib/components/ui/context-menu/context-menu-sub.svelte
new file mode 100644
index 0000000..ddd0575
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps =
+    $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/src/lib/components/ui/context-menu/context-menu-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-trigger.svelte
new file mode 100644
index 0000000..e73751c
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-trigger.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+  bind:ref
+  data-slot="context-menu-trigger"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu.svelte b/src/lib/components/ui/context-menu/context-menu.svelte
new file mode 100644
index 0000000..c24489e
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+  let {
+    open = $bindable(false),
+    ...restProps
+  }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/components/ui/context-menu/index.ts b/src/lib/components/ui/context-menu/index.ts
new file mode 100644
index 0000000..1bca4fa
--- /dev/null
+++ b/src/lib/components/ui/context-menu/index.ts
@@ -0,0 +1,52 @@
+import Root from "./context-menu.svelte";
+import Sub from "./context-menu-sub.svelte";
+import Portal from "./context-menu-portal.svelte";
+import Trigger from "./context-menu-trigger.svelte";
+import Group from "./context-menu-group.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
+import Item from "./context-menu-item.svelte";
+import GroupHeading from "./context-menu-group-heading.svelte";
+import Content from "./context-menu-content.svelte";
+import Shortcut from "./context-menu-shortcut.svelte";
+import RadioItem from "./context-menu-radio-item.svelte";
+import Separator from "./context-menu-separator.svelte";
+import SubContent from "./context-menu-sub-content.svelte";
+import SubTrigger from "./context-menu-sub-trigger.svelte";
+import CheckboxItem from "./context-menu-checkbox-item.svelte";
+import Label from "./context-menu-label.svelte";
+
+export {
+  Root,
+  Sub,
+  Portal,
+  Item,
+  GroupHeading,
+  Label,
+  Group,
+  Trigger,
+  Content,
+  Shortcut,
+  Separator,
+  RadioItem,
+  SubContent,
+  SubTrigger,
+  RadioGroup,
+  CheckboxItem,
+  //
+  Root as ContextMenu,
+  Sub as ContextMenuSub,
+  Portal as ContextMenuPortal,
+  Item as ContextMenuItem,
+  GroupHeading as ContextMenuGroupHeading,
+  Group as ContextMenuGroup,
+  Content as ContextMenuContent,
+  Trigger as ContextMenuTrigger,
+  Shortcut as ContextMenuShortcut,
+  RadioItem as ContextMenuRadioItem,
+  Separator as ContextMenuSeparator,
+  RadioGroup as ContextMenuRadioGroup,
+  SubContent as ContextMenuSubContent,
+  SubTrigger as ContextMenuSubTrigger,
+  CheckboxItem as ContextMenuCheckboxItem,
+  Label as ContextMenuLabel,
+};
diff --git a/src/lib/components/ui/dialog/dialog-close.svelte b/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..a0b8586
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps =
+    $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..d15e5ea
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+  import DialogPortal from "./dialog-portal.svelte";
+  import XIcon from "@lucide/svelte/icons/x";
+  import type { Snippet } from "svelte";
+  import * as Dialog from "./index.js";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+  import type { ComponentProps } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    showCloseButton = true,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+    children: Snippet;
+    showCloseButton?: boolean;
+  } = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    bind:ref
+    data-slot="dialog-content"
+    class={cn(
+      "cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-dialog fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-cladd-dialog p-4 text-cladd-fg shadow-cladd-popover outline-none sm:max-w-lg",
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    {#if showCloseButton}
+      <DialogPrimitive.Close
+        class="cladd-ghost cladd-hoverable cladd-clickable cladd-focusable absolute end-3 top-3 flex size-cladd-md items-center justify-center rounded-full text-cladd-fg-soft disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <XIcon />
+        <span class="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    {/if}
+  </DialogPrimitive.Content>
+</DialogPortal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..e3d422e
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+  bind:ref
+  data-slot="dialog-description"
+  class={cn("text-cladd-fg-soft text-cladd-sm leading-relaxed", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..67b9fcb
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dialog-footer"
+  class={cn(
+    "mt-2 flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..450edae
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dialog-header"
+  class={cn("flex flex-col gap-1.5 text-start", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..ddc342b
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+  bind:ref
+  data-slot="dialog-overlay"
+  class={cn("cladd-backdrop cladd-anim-fade fixed inset-0 z-50", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..d208462
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+
+  let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..c5c8ccd
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+  bind:ref
+  data-slot="dialog-title"
+  class={cn("pe-8 font-semibold text-cladd-md leading-tight", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-trigger.svelte b/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..f7ae9b4
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps =
+    $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/src/lib/components/ui/dialog/dialog.svelte b/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 0000000..84ecf31
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from "bits-ui";
+
+  let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps =
+    $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..e366157
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+  Root,
+  Title,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  Close,
+  //
+  Root as Dialog,
+  Title as DialogTitle,
+  Portal as DialogPortal,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Trigger as DialogTrigger,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Description as DialogDescription,
+  Close as DialogClose,
+};
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..442ee4f
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable([]),
+    ...restProps
+  }: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-checkbox-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..319b15d
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import MinusIcon from "@lucide/svelte/icons/minus";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+  import type { Snippet } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="dropdown-menu-checkbox-item"
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full py-1 ps-9 pe-3 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-highlighted:bg-cladd-surface-next data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({
+    checked,
+    indeterminate,
+  })}
+    <span
+      class="pointer-events-none absolute start-3 flex size-4 items-center justify-center"
+    >
+      {#if indeterminate}
+        <MinusIcon class="size-4" />
+      {:else}
+        <CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..ee559c2
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+  import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import type { ComponentProps } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<
+      ComponentProps<typeof DropdownMenuPortal>
+    >;
+  } = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    data-slot="dropdown-menu-content"
+    {sideOffset}
+    class={cn(
+      "cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[10rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none",
+      className
+    )}
+    {...restProps}
+  />
+</DropdownMenuPortal>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..a47760f
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+  import type { ComponentProps } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="dropdown-menu-group-heading"
+  data-inset={inset}
+  class={cn(
+    "cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..2473b77
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group
+  bind:ref
+  data-slot="dropdown-menu-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..94138ae
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn } from "#lib/utils.js";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = "default",
+    ...restProps
+  }: DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+    asChild?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+  bind:ref
+  data-slot="dropdown-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "data-[variant=destructive]:*:[svg]:!text-destructive relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full px-3 py-1 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[variant=destructive]:data-highlighted:bg-destructive/12 data-[disabled]:pointer-events-none data-highlighted:bg-cladd-surface-next data-[inset]:ps-8 data-[inset]:ps-9 data-[variant=destructive]:text-destructive data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..92bfb38
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dropdown-menu-label"
+  data-inset={inset}
+  class={cn(
+    "cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-8 data-[inset]:ps-9",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..f9e1e2a
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..d4bbe25
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    ...restProps
+  }: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-radio-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..14cf302
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import CircleIcon from "@lucide/svelte/icons/circle";
+  import { cn, type WithoutChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="dropdown-menu-radio-item"
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full py-1 ps-9 pe-3 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-highlighted:bg-cladd-surface-next data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({
+    checked,
+  })}
+    <span
+      class="pointer-events-none absolute start-3 flex size-4 items-center justify-center"
+    >
+      {#if checked}
+        <CircleIcon class="size-2 fill-current" />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..2c18432
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  data-slot="dropdown-menu-separator"
+  class={cn("-mx-2 my-2 h-px bg-cladd-bg-outline", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..e3f7567
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    "ms-auto font-mono text-cladd-2xs text-cladd-fg-softer tracking-widest",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..0ac92c0
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+  bind:ref
+  data-slot="dropdown-menu-sub-content"
+  class={cn(
+    "cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 min-w-[10rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-cladd-popover p-2 text-cladd-fg shadow-cladd-popover outline-none",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..016e670
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="dropdown-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full px-3 py-1 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-[state=open]:bg-cladd-surface-next data-highlighted:bg-cladd-surface-next data-[inset]:ps-8 data-[inset]:ps-9 data-[disabled]:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ms-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..2ab8a41
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    open = $bindable(false),
+    ...restProps
+  }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..a52fb99
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+  bind:ref
+  data-slot="dropdown-menu-trigger"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..40b84e0
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    open = $bindable(false),
+    ...restProps
+  }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..5c4fe0c
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..ceb4b16
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+  Root,
+  //
+  Root as Input,
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..7e2715b
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type {
+    HTMLInputAttributes,
+    HTMLInputTypeAttribute,
+  } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, "type"> &
+      (
+        | { type: "file"; files?: FileList }
+        | { type?: InputType; files?: undefined }
+      )
+  >;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    "data-slot": dataSlot = "input",
+    ...restProps
+  }: Props = $props();
+</script>
+
+{#if type === "file"}
+  <input
+    bind:this={ref}
+    data-slot={dataSlot}
+    class={cn(
+      "cladd-cut cladd-hoverable cladd-focusable-input flex h-cladd-md w-full min-w-0 rounded-cladd-md px-2.5 pt-1.5 font-medium text-cladd-fg text-cladd-xs selection:bg-brand/30 file:me-2 file:font-semibold file:text-cladd-fg placeholder:text-cladd-fg-softer disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    type="file"
+    bind:files
+    bind:value
+    {...restProps}
+  >
+{:else}
+  <input
+    bind:this={ref}
+    data-slot={dataSlot}
+    class={cn(
+      "cladd-cut cladd-hoverable cladd-focusable-input flex h-cladd-md w-full min-w-0 rounded-cladd-md px-2.5 py-1 font-medium text-cladd-fg text-cladd-xs selection:bg-brand/30 placeholder:text-cladd-fg-softer disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {type}
+    bind:value
+    {...restProps}
+  >
+{/if}
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..0a67dab
--- /dev/null
+++ b/src/lib/components/ui/label/index.ts
@@ -0,0 +1,3 @@
+import Label from "./label.svelte";
+
+export { Label };
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..3775e58
--- /dev/null
+++ b/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Label as LabelPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: {
+    ref?: any;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<LabelPrimitive.Root
+  bind:ref
+  class={cn(
+    "font-medium text-cladd-fg-soft text-cladd-xs leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</LabelPrimitive.Root>
diff --git a/src/lib/components/ui/progress/index.ts b/src/lib/components/ui/progress/index.ts
new file mode 100644
index 0000000..1e415fc
--- /dev/null
+++ b/src/lib/components/ui/progress/index.ts
@@ -0,0 +1,7 @@
+import Root from "./progress.svelte";
+
+export {
+  Root,
+  //
+  Root as Progress,
+};
diff --git a/src/lib/components/ui/progress/progress.svelte b/src/lib/components/ui/progress/progress.svelte
new file mode 100644
index 0000000..ac3a563
--- /dev/null
+++ b/src/lib/components/ui/progress/progress.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Progress as ProgressPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    max = 100,
+    value,
+    ...restProps
+  }: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+</script>
+
+<ProgressPrimitive.Root
+  bind:ref
+  data-slot="progress"
+  class={cn(
+    "cladd-cut relative h-2 w-full overflow-hidden rounded-full",
+    className
+  )}
+  {value}
+  {max}
+  {...restProps}
+>
+  <div
+    data-slot="progress-indicator"
+    class="cladd-surface cladd-gradient-fill cladd-color-brand h-full w-full flex-1 rounded-full transition-all duration-300 ease-out"
+    style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
+  ></div>
+</ProgressPrimitive.Root>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..222d568
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Portal from "./select-portal.svelte";
+
+export {
+  Root,
+  Group,
+  Label,
+  Item,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  GroupHeading,
+  Portal,
+  //
+  Root as Select,
+  Group as SelectGroup,
+  Label as SelectLabel,
+  Item as SelectItem,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton,
+  GroupHeading as SelectGroupHeading,
+  Portal as SelectPortal,
+};
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..d47b90a
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from "bits-ui";
+  import SelectPortal from "./select-portal.svelte";
+  import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+  import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+  import { cn, type WithoutChild } from "#lib/utils.js";
+  import type { ComponentProps } from "svelte";
+  import type { WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    preventScroll = true,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+  } = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    {preventScroll}
+    data-slot="select-content"
+    class={cn(
+      "cladd-surface cladd-gradient cladd-outline cladd-level-1 cladd-anim-popover z-50 max-h-(--bits-select-content-available-height) min-w-[10rem] origin-(--bits-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-cladd-popover text-cladd-fg shadow-cladd-popover outline-none",
+      className
+    )}
+    {...restProps}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class={cn(
+        "h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-2 p-2"
+      )}
+    >
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPortal>
diff --git a/src/lib/components/ui/select/select-group-heading.svelte b/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..4c9be11
--- /dev/null
+++ b/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+  import type { ComponentProps } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn(
+    "cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-9",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/src/lib/components/ui/select/select-group.svelte b/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..d7d49b1
--- /dev/null
+++ b/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
+    $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..46b7877
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn, type WithoutChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(
+    "relative flex min-h-cladd-lg cursor-default select-none items-center gap-2 rounded-full py-1 ps-3 pe-9 font-medium text-cladd-xs outline-hidden transition-[background-color,box-shadow] duration-200 data-[disabled]:pointer-events-none data-[selected]:bg-cladd-surface-next data-highlighted:bg-cladd-surface-next data-[disabled]:opacity-40 data-[selected]:shadow-cladd-outline [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({
+    selected,
+    highlighted,
+  })}
+    <span class="absolute end-3 flex size-4 items-center justify-center">
+      {#if selected}
+        <CheckIcon class="size-4 text-cladd-fg" />
+      {/if}
+    </span>
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..e7c9633
--- /dev/null
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="select-label"
+  class={cn(
+    "cladd-section-title px-3 pt-2 pb-1.5 data-[inset]:ps-9",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/select/select-portal.svelte b/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 0000000..de6004b
--- /dev/null
+++ b/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from "bits-ui";
+
+  let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..8724ce0
--- /dev/null
+++ b/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+  bind:ref
+  data-slot="select-scroll-down-button"
+  class={cn(
+    "flex cursor-default items-center justify-center py-1 text-cladd-fg-softer",
+    className
+  )}
+  {...restProps}
+>
+  <ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..f4984e3
--- /dev/null
+++ b/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+  bind:ref
+  data-slot="select-scroll-up-button"
+  class={cn(
+    "flex cursor-default items-center justify-center py-1 text-cladd-fg-softer",
+    className
+  )}
+  {...restProps}
+>
+  <ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..f0e1439
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Separator as SeparatorPrimitive } from "bits-ui";
+  import { Separator } from "#lib/components/ui/separator/index.js";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+  bind:ref
+  data-slot="select-separator"
+  class={cn(
+    "pointer-events-none -mx-2 my-2 h-px bg-cladd-bg-outline",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..77abd88
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from "bits-ui";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import { cn, type WithoutChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size = "default",
+    ...restProps
+  }: WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: "sm" | "default";
+  } = $props();
+</script>
+
+<SelectPrimitive.Trigger
+  bind:ref
+  data-slot="select-trigger"
+  data-size={size}
+  class={cn(
+    "cladd-surface cladd-gradient cladd-outline cladd-hoverable cladd-clickable cladd-focusable flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-cladd-md px-2.5 font-semibold text-cladd-fg text-cladd-xs disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-destructive data-[size=default]:h-cladd-md data-[size=sm]:h-cladd-sm data-[placeholder]:text-cladd-fg-softer *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-cladd-fg-softer [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronsUpDownIcon class="size-3.5 text-cladd-fg-softer" />
+</SelectPrimitive.Trigger>
diff --git a/src/lib/components/ui/select/select.svelte b/src/lib/components/ui/select/select.svelte
new file mode 100644
index 0000000..e5fb6b2
--- /dev/null
+++ b/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from "bits-ui";
+
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    ...restProps
+  }: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..d66644e
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+  Root,
+  //
+  Root as Separator,
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..7aafcd5
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Separator as SeparatorPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    "data-slot": dataSlot = "separator",
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  data-slot={dataSlot}
+  class={cn(
+    "shrink-0 bg-cladd-bg-outline data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..c779a6e
--- /dev/null
+++ b/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+export {
+  Root,
+  Close,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Header,
+  Footer,
+  Title,
+  Description,
+  //
+  Root as Sheet,
+  Close as SheetClose,
+  Trigger as SheetTrigger,
+  Portal as SheetPortal,
+  Overlay as SheetOverlay,
+  Content as SheetContent,
+  Header as SheetHeader,
+  Footer as SheetFooter,
+  Title as SheetTitle,
+  Description as SheetDescription,
+};
diff --git a/src/lib/components/ui/sheet/sheet-close.svelte b/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..3edf368
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps =
+    $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..8db01fd
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from "tailwind-variants";
+  export const sheetVariants = tv({
+    base: "cladd-surface cladd-gradient cladd-outline cladd-level-1 fixed z-50 flex flex-col gap-4 overflow-hidden text-cladd-fg shadow-cladd-popover outline-none ease-[cubic-bezier(0,1,0.2,1.1)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-200 data-[state=open]:duration-500 data-[state=closed]:ease-in",
+    variants: {
+      side: {
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-2 top-2 h-auto rounded-cladd-panel",
+        bottom:
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-2 bottom-2 h-auto rounded-cladd-panel",
+        left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-2 start-2 w-3/4 rounded-cladd-panel sm:max-w-sm",
+        right:
+          "data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-2 end-2 w-3/4 rounded-cladd-panel sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  });
+
+  export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import XIcon from "@lucide/svelte/icons/x";
+  import type { Snippet } from "svelte";
+  import SheetPortal from "./sheet-portal.svelte";
+  import SheetOverlay from "./sheet-overlay.svelte";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+  import type { ComponentProps } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    side = "right",
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    side?: Side;
+    children: Snippet;
+  } = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+  <SheetOverlay />
+  <SheetPrimitive.Content
+    bind:ref
+    data-slot="sheet-content"
+    class={cn(sheetVariants({ side }), className)}
+    {...restProps}
+  >
+    {@render children?.()}
+    <SheetPrimitive.Close
+      class="cladd-ghost cladd-hoverable cladd-clickable cladd-focusable absolute end-3 top-3 flex size-cladd-md items-center justify-center rounded-full text-cladd-fg-soft disabled:pointer-events-none"
+    >
+      <XIcon class="size-4" />
+      <span class="sr-only">Закрыть</span>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPortal>
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..aff2a7e
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+  bind:ref
+  data-slot="sheet-description"
+  class={cn("text-cladd-fg-soft text-cladd-xs leading-relaxed", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-footer.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..cfd1d11
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-footer"
+  class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-header.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..12df1f7
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-header"
+  class={cn("flex flex-col gap-1.5 p-4", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..8fa17a8
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+  bind:ref
+  data-slot="sheet-overlay"
+  class={cn("cladd-backdrop cladd-anim-fade fixed inset-0 z-50", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-portal.svelte b/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..27812f0
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+
+  let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..833997e
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+  bind:ref
+  data-slot="sheet-title"
+  class={cn("font-semibold text-cladd-fg text-cladd-md", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-trigger.svelte b/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..417d73f
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps =
+    $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/src/lib/components/ui/sheet/sheet.svelte b/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 0000000..40537ae
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+
+  let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps =
+    $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/components/ui/slider/index.ts b/src/lib/components/ui/slider/index.ts
new file mode 100644
index 0000000..b3c90f9
--- /dev/null
+++ b/src/lib/components/ui/slider/index.ts
@@ -0,0 +1,7 @@
+import Root from "./slider.svelte";
+
+export {
+  Root,
+  //
+  Root as Slider,
+};
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
new file mode 100644
index 0000000..559acd7
--- /dev/null
+++ b/src/lib/components/ui/slider/slider.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = "horizontal",
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+  bind:ref
+  bind:value={value as never}
+  data-slot="slider"
+  {orientation}
+  class={cn(
+    "relative flex h-cladd-thumb-sm w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({
+    thumbs,
+  })}
+    <span
+      data-orientation={orientation}
+      data-slot="slider-track"
+      class={cn(
+        "cladd-cut relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5"
+      )}
+    >
+      <SliderPrimitive.Range
+        data-slot="slider-range"
+        class={cn(
+          "cladd-color-brand absolute rounded-full bg-cladd-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        )}
+      />
+    </span>
+    {#each thumbs as thumb (thumb)}
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        index={thumb}
+        class="cladd-surface cladd-gradient-fill cladd-outline cladd-hoverable cladd-focusable cladd-color-brand block size-cladd-thumb-sm shrink-0 rounded-full active:scale-90 disabled:pointer-events-none disabled:opacity-50"
+      />
+    {/each}
+  {/snippet}
+</SliderPrimitive.Root>
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..51bf42c
--- /dev/null
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import InfoIcon from "@lucide/svelte/icons/info";
+  import Loader2Icon from "@lucide/svelte/icons/loader-2";
+  import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
+  import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+
+  import {
+    Toaster as Sonner,
+    type ToasterProps as SonnerProps,
+  } from "svelte-sonner";
+  import { mode } from "mode-watcher";
+
+  let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+  theme={mode.current}
+  class="toaster group"
+  style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: transparent; --border-radius: var(--radius-cladd-toast);"
+  toastOptions={{
+    classes: {
+      toast:
+        "cladd-surface cladd-gradient cladd-outline cladd-level-3 !rounded-cladd-toast !py-3 !ps-4 !pe-4 !gap-3 !shadow-cladd-popover !text-cladd-fg",
+      title: "!text-cladd-sm !font-semibold",
+      description: "!text-cladd-xs !leading-relaxed !text-cladd-fg-soft",
+      actionButton:
+        "cladd-surface cladd-gradient cladd-outline cladd-color-brand !rounded-full !bg-cladd-surface !text-cladd-primary !font-semibold",
+      cancelButton:
+        "cladd-surface cladd-gradient !rounded-full !bg-cladd-surface !text-cladd-fg",
+      closeButton:
+        "cladd-surface cladd-gradient cladd-outline !bg-cladd-surface !text-cladd-fg-soft !border-0",
+      success: "[&_[data-icon]]:text-success",
+      error: "[&_[data-icon]]:text-destructive",
+      warning: "[&_[data-icon]]:text-warning",
+      info: "[&_[data-icon]]:text-brand",
+    },
+  }}
+  {...restProps}
+  >{#snippet loadingIcon()}
+    <Loader2Icon class="size-4 animate-spin" />
+  {/snippet}
+  {#snippet successIcon()}
+    <CircleCheckIcon class="size-4" />
+  {/snippet}
+  {#snippet errorIcon()}
+    <OctagonXIcon class="size-4" />
+  {/snippet}
+  {#snippet infoIcon()}
+    <InfoIcon class="size-4" />
+  {/snippet}
+  {#snippet warningIcon()}
+    <TriangleAlertIcon class="size-4" />
+  {/snippet}
+</Sonner>
diff --git a/src/lib/components/ui/surface/index.ts b/src/lib/components/ui/surface/index.ts
new file mode 100644
index 0000000..de74349
--- /dev/null
+++ b/src/lib/components/ui/surface/index.ts
@@ -0,0 +1,5 @@
+import Root from "./surface.svelte";
+import Cut from "./surface-cut.svelte";
+
+export { Root, Cut, Root as Surface, Cut as SurfaceCut };
+export type { SurfaceProps, SurfaceVariant } from "./surface.svelte";
diff --git a/src/lib/components/ui/surface/surface-cut.svelte b/src/lib/components/ui/surface/surface-cut.svelte
new file mode 100644
index 0000000..5ca6061
--- /dev/null
+++ b/src/lib/components/ui/surface/surface-cut.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { CladdColor } from "../button/button.svelte";
+
+  let {
+    ref = $bindable(null),
+    as = "div",
+    outline = true,
+    hoverable = false,
+    color,
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    as?: string;
+    outline?: boolean;
+    hoverable?: boolean;
+    color?: CladdColor;
+  } = $props();
+</script>
+
+<!-- A recessed well: sits below its parent surface instead of above it. -->
+<svelte:element
+  this={as}
+  bind:this={ref}
+  data-slot="surface-cut"
+  class={cn(
+    "cladd-cut text-cladd-fg",
+    !outline && "shadow-none",
+    hoverable && "cladd-hoverable",
+    color && `cladd-color-${color}`,
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>
diff --git a/src/lib/components/ui/surface/surface.svelte b/src/lib/components/ui/surface/surface.svelte
new file mode 100644
index 0000000..5a53fdd
--- /dev/null
+++ b/src/lib/components/ui/surface/surface.svelte
@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { CladdColor } from "../button/button.svelte";
+
+  export type SurfaceVariant =
+    | "solid"
+    | "gradient"
+    | "solid-fill"
+    | "gradient-fill"
+    | "transparent";
+
+  export type SurfaceProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    as?: string;
+    variant?: SurfaceVariant;
+    outline?: boolean;
+    hoverable?: boolean;
+    clickable?: boolean;
+    level?: 1 | 2 | 3 | 4 | 5;
+    color?: CladdColor;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    ref = $bindable(null),
+    as = "div",
+    variant = "solid",
+    outline = false,
+    hoverable = false,
+    clickable = false,
+    level,
+    color,
+    class: className,
+    children,
+    ...restProps
+  }: SurfaceProps = $props();
+
+  const variantClass: Record<SurfaceVariant, string> = {
+    solid: "cladd-surface",
+    gradient: "cladd-surface cladd-gradient",
+    "solid-fill": "cladd-surface cladd-fill",
+    "gradient-fill": "cladd-surface cladd-gradient-fill",
+    transparent: "cladd-ghost",
+  };
+</script>
+
+<!-- Nested surfaces step one level deeper automatically; `level` pins it. -->
+<svelte:element
+  this={as}
+  bind:this={ref}
+  data-slot="surface"
+  class={cn(
+    variantClass[variant],
+    outline && "cladd-outline",
+    hoverable && "cladd-hoverable",
+    clickable && "cladd-clickable",
+    level && `cladd-level-${level}`,
+    color && `cladd-color-${color}`,
+    "text-cladd-fg",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..99620eb
--- /dev/null
+++ b/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+  Root,
+  //
+  Root as Switch,
+};
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..342e547
--- /dev/null
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Switch as SwitchPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    checked = $bindable(false),
+    ...restProps
+  }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+  bind:ref
+  bind:checked
+  data-slot="switch"
+  class={cn(
+    "peer group/switch cladd-surface cladd-outline cladd-focusable inline-flex h-cladd-md w-12 shrink-0 items-center rounded-full p-1 disabled:cursor-not-allowed disabled:opacity-50",
+    className
+  )}
+  {...restProps}
+>
+  <SwitchPrimitive.Thumb data-slot="switch-thumb">
+    {#snippet child({
+      props,
+    })}
+      <span
+        {...props}
+        class={cn(
+          "cladd-surface cladd-gradient cladd-outline cladd-fill-checked pointer-events-none relative block size-cladd-thumb-sm rounded-full transition-[translate,background-color,box-shadow] duration-300",
+          checked
+            ? "cladd-color-brand translate-x-cladd-thumb-sm"
+            : "translate-x-0"
+        )}
+      >
+        <!-- Two bars: a × while off, folding into a ✓ when on. -->
+        <span
+          class={cn(
+            "absolute inset-0 transition-[rotate,scale] duration-300 group-active/switch:scale-90",
+            checked && "rotate-180"
+          )}
+        >
+          <span
+            class={cn(
+              "absolute top-1/2 left-1/2 -mt-px -ml-2 h-0.5 w-4 rotate-45 rounded-full transition-[translate,scale,rotate,background-color] duration-300",
+              checked
+                ? "translate-x-0.5 translate-y-[-1.75px] scale-x-40 bg-cladd-on-primary"
+                : "scale-x-75 bg-cladd-fg-soft"
+            )}
+          ></span>
+          <span
+            class={cn(
+              "absolute top-1/2 left-1/2 -mt-px -ml-2 h-0.5 w-4 -rotate-45 rounded-full transition-[translate,scale,rotate,background-color] duration-300",
+              checked
+                ? "translate-x-[-1.5px] -rotate-60 scale-x-60 bg-cladd-on-primary"
+                : "scale-x-75 bg-cladd-fg-soft"
+            )}
+          ></span>
+        </span>
+      </span>
+    {/snippet}
+  </SwitchPrimitive.Thumb>
+</SwitchPrimitive.Root>
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..3fe1e39
--- /dev/null
+++ b/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+  Root,
+  Body,
+  Caption,
+  Cell,
+  Footer,
+  Head,
+  Header,
+  Row,
+  //
+  Root as Table,
+  Body as TableBody,
+  Caption as TableCaption,
+  Cell as TableCell,
+  Footer as TableFooter,
+  Head as TableHead,
+  Header as TableHeader,
+  Row as TableRow,
+};
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..676c4ef
--- /dev/null
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+  bind:this={ref}
+  data-slot="table-body"
+  class={cn("[&_tr:last-child]:border-0", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</tbody>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..10b0f71
--- /dev/null
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+  bind:this={ref}
+  data-slot="table-caption"
+  class={cn("mt-4 text-cladd-fg-soft text-cladd-xs", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</caption>
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..487aec1
--- /dev/null
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLTdAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+  bind:this={ref}
+  data-slot="table-cell"
+  class={cn(
+    "whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pe-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</td>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..488de35
--- /dev/null
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+  bind:this={ref}
+  data-slot="table-footer"
+  class={cn(
+    "border-cladd-bg-outline border-t bg-cladd-surface-hover font-medium [&>tr]:last:border-b-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</tfoot>
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..e666755
--- /dev/null
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLThAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+  bind:this={ref}
+  data-slot="table-head"
+  class={cn(
+    "h-9 whitespace-nowrap bg-clip-padding px-2 text-start align-middle font-medium text-cladd-fg-soft text-cladd-xs uppercase [&:has([role=checkbox])]:pe-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</th>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..5642919
--- /dev/null
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+  bind:this={ref}
+  data-slot="table-header"
+  class={cn(
+    "[&_tr]:border-cladd-bg-outline [&_tr]:border-b [&_tr]:hover:bg-transparent",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</thead>
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..877f890
--- /dev/null
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "#lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+  bind:this={ref}
+  data-slot="table-row"
+  class={cn(
+    "border-cladd-bg-outline border-b transition-colors duration-200 data-[state=selected]:bg-cladd-surface-hover hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-cladd-surface-hover",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</tr>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..b392c69
--- /dev/null
+++ b/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { HTMLTableAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative">
+  <table
+    bind:this={ref}
+    data-slot="table"
+    class={cn("w-full caption-bottom text-cladd-sm", className)}
+    {...restProps}
+  >
+    {@render children?.()}
+  </table>
+</div>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..4c728b6
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,16 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+  Root,
+  Content,
+  List,
+  Trigger,
+  //
+  Root as Tabs,
+  Content as TabsContent,
+  List as TabsList,
+  Trigger as TabsTrigger,
+};
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..8233c31
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+  bind:ref
+  data-slot="tabs-content"
+  class={cn("flex-1 outline-none", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..2549dfa
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+  bind:ref
+  data-slot="tabs-list"
+  class={cn(
+    "cladd-surface cladd-gradient cladd-outline scrollbar-none inline-flex h-9 items-center gap-0.5 overflow-x-auto rounded-full p-1 text-cladd-fg",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..43ad6a0
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+  bind:ref
+  data-slot="tabs-trigger"
+  class={cn(
+    "cladd-segment cladd-focusable inline-flex h-full shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-2.5 font-semibold text-cladd-fg text-cladd-xs disabled:pointer-events-none disabled:opacity-40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs.svelte b/src/lib/components/ui/tabs/tabs.svelte
new file mode 100644
index 0000000..b7d7ae5
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(""),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+  bind:ref
+  bind:value
+  data-slot="tabs"
+  class={cn("flex flex-col gap-2", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/textarea/index.ts b/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..c14b903
--- /dev/null
+++ b/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+  Root,
+  //
+  Root as Textarea,
+};
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..3c3af54
--- /dev/null
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef, type WithoutChildren } from "#lib/utils.js";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    "data-slot": dataSlot = "textarea",
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+  bind:this={ref}
+  data-slot={dataSlot}
+  class={cn(
+    "cladd-cut cladd-hoverable cladd-focusable-input field-sizing-content flex min-h-16 w-full rounded-cladd-md px-2.5 py-1.5 font-medium text-cladd-fg text-cladd-xs leading-relaxed selection:bg-brand/30 placeholder:text-cladd-fg-softer disabled:cursor-not-allowed disabled:opacity-50",
+    className
+  )}
+  bind:value
+  {...restProps}
+></textarea>
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..9822ce1
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+  Root,
+  Trigger,
+  Content,
+  Provider,
+  Portal,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider,
+  Portal as TooltipPortal,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..f2b5421
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+  import { cn } from "#lib/utils.js";
+  import TooltipPortal from "./tooltip-portal.svelte";
+  import type { ComponentProps } from "svelte";
+  import type { WithoutChildrenOrChild } from "#lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 6,
+    side = "top",
+    children,
+    portalProps,
+    ...restProps
+  }: TooltipPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+  } = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+  <TooltipPrimitive.Content
+    bind:ref
+    data-slot="tooltip-content"
+    {sideOffset}
+    {side}
+    class={cn(
+      "cladd-surface cladd-gradient cladd-outline cladd-level-5 cladd-anim-tooltip z-50 w-fit max-w-72 origin-(--bits-tooltip-content-transform-origin) text-balance rounded-cladd-tooltip px-2 py-1 font-medium text-cladd-fg text-cladd-xs leading-normal",
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+  </TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/src/lib/components/ui/tooltip/tooltip-portal.svelte b/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 0000000..bd0b125
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+  let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/tooltip/tooltip-provider.svelte b/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 0000000..1c97e95
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+  let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />
diff --git a/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..5fac3c6
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps =
+    $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/src/lib/components/ui/tooltip/tooltip.svelte b/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 0000000..ccc3719
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+  let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps =
+    $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..0aa8ff8
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1,2 @@
+// place files you want to import through the `#lib` alias in this folder.
+// biome-ignore-all lint/suspicious/noEmptySource: temporary
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..d706b5e
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,58 @@
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const cladd = (...names: string[]) => names.map((n) => `cladd-${n}`);
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      radius: cladd(
+        "3xs",
+        "2xs",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "2xl",
+        "wrap-md",
+        "panel",
+        "popover",
+        "dialog",
+        "toast",
+        "tooltip"
+      ),
+      shadow: cladd("outline", "outline-fill", "cut-outline", "popover"),
+      spacing: cladd(
+        "3xs",
+        "2xs",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "2xl",
+        "thumb-xs",
+        "thumb-sm",
+        "thumb-md",
+        "nested-sm",
+        "nested-md",
+        "nested-lg"
+      ),
+      text: cladd("md", "sm", "xs", "2xs", "3xs"),
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends { children?: any }
+  ? Omit<T, "children">
+  : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+  ref?: U | null;
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..c7742e0
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import "./layout.css";
+  import { ModeWatcher } from "mode-watcher";
+
+  let { children } = $props();
+</script>
+
+<ModeWatcher />
+
+{@render children()}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..83addb7
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = false;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..85a2c65
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,13 @@
+<svelte:head>
+  <title>Firefly UI</title>
+</svelte:head>
+
+<main
+  class="flex min-h-dvh flex-col items-center justify-center gap-4 px-6 text-center bg-background text-foreground"
+>
+  <h1 class="font-bold text-4xl tracking-tight sm:text-5xl">Firefly UI</h1>
+  <p class="max-w-prose text-base text-muted-foreground">
+    Edit
+    <code class="font-mono">src/routes/+page.svelte</code>.
+  </p>
+</main>
diff --git a/src/routes/claddcn.css b/src/routes/claddcn.css
new file mode 100644
index 0000000..4bf74b7
--- /dev/null
+++ b/src/routes/claddcn.css
@@ -0,0 +1,922 @@
+/*
+claddcn — the cladd.io visual system as a shadcn-svelte theme.
+Tokens, surfaces and color math ported from cladd (MIT, © 2026 cladd-ui,
+https://github.com/cladd-ui/cladd). Adapted to the shadcn convention:
+light on :root, dark under `.dark`.
+
+Import after tailwindcss:
+  @import 'tailwindcss';
+  @import 'tw-animate-css';
+  @import './claddcn.css';
+*/
+
+@import "@fontsource-variable/geist/index.css";
+@import "@fontsource-variable/geist-mono/index.css";
+
+@property --cladd-overlay {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+
+/* ───────────────────────── accents ───────────────────────── */
+
+:root,
+.cladd-color-neutral {
+  --cladd-theme: #fff;
+}
+.cladd-color-brand {
+  --cladd-theme: #388aff;
+}
+.cladd-color-red {
+  --cladd-theme: #ff0b0b;
+}
+.cladd-color-pink {
+  --cladd-theme: #ff0bac;
+}
+.cladd-color-purple {
+  --cladd-theme: #a20bff;
+}
+.cladd-color-blue {
+  --cladd-theme: #0047ff;
+}
+.cladd-color-cyan {
+  --cladd-theme: #00f9ff;
+}
+.cladd-color-lime {
+  --cladd-theme: #7dff0b;
+}
+.cladd-color-green {
+  --cladd-theme: #0bff23;
+}
+.cladd-color-yellow {
+  --cladd-theme: #fff800;
+}
+.cladd-color-orange {
+  --cladd-theme: #ff7a00;
+}
+
+/* ───────────────────────── neutral light ───────────────────────── */
+
+:root,
+.cladd-color-neutral {
+  --cladd-bg: #fff;
+  --cladd-backdrop: oklch(0.91 0 0);
+  --cladd-primary: oklch(0.1 0 0);
+  --cladd-on-primary: oklch(0.96 0 0);
+  --cladd-surface: oklch(0.97 0 0);
+  --cladd-surface-cut: oklch(0.93 0 0);
+  --cladd-fg: oklch(0.32 0 0);
+  --cladd-fg-soft: oklch(0.5 0 0);
+  --cladd-fg-softer: oklch(0.65 0 0);
+  --cladd-fg-softest: oklch(0.75 0 0);
+  --cladd-surface-white: oklch(1 0 0);
+  --cladd-surface-black: oklch(0 0 0);
+  --cladd-bg-outline: oklch(0.89 0 0);
+  --cladd-outline: oklch(0.89 0 0);
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-black) 3%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 6%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 20%,
+    transparent
+  );
+  --cladd-surface-mix-color: var(--cladd-surface-black);
+  --cladd-surface-mix-amount: 4%;
+  --cladd-highlight-mix: 50%;
+  --cladd-fill-fade: 20%;
+
+  --shadow-cladd-cut-outline:
+    0.5px 0.5px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-black) 10%, transparent) inset,
+    0px 0px 0px 0.5px
+    color-mix(in oklab, var(--cladd-surface-black) 5%, transparent) inset;
+  --shadow-cladd-outline-fill:
+    0px 0px 0px 0.5px
+    color-mix(in oklab, var(--cladd-surface-black) 20%, transparent) inset,
+    1px 1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
+  --shadow-cladd-outline:
+    0px 0px 0px 1px var(--color-cladd-outline) inset,
+    1.5px 1.5px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 60%, transparent) inset;
+  --shadow-cladd-popover: 0 24px 64px -12px rgb(0 0 0 / 0.18);
+}
+
+/* ───────────────────────── neutral dark ───────────────────────── */
+
+.dark,
+.dark .cladd-color-neutral {
+  --cladd-bg: #0f0f0f;
+  --cladd-backdrop: #000;
+  --cladd-primary: oklch(0.95 0 0);
+  --cladd-on-primary: oklch(0.2 0 0);
+  --cladd-surface: oklch(0.21 0 0);
+  --cladd-surface-cut: oklch(0.19 0 0);
+  --cladd-fg: oklch(0.9 0 0);
+  --cladd-fg-soft: oklch(0.65 0 0);
+  --cladd-fg-softer: oklch(0.5 0 0);
+  --cladd-fg-softest: oklch(0.4 0 0);
+  --cladd-surface-white: oklch(1 0 0);
+  --cladd-surface-black: oklch(0 0 0);
+  --cladd-bg-outline: oklch(0.23 0 0);
+  --cladd-outline: oklch(0.3 0 0);
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 5%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 3%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 20%,
+    transparent
+  );
+  --cladd-surface-mix-color: var(--cladd-surface-white);
+  --cladd-surface-mix-amount: 6%;
+  --cladd-highlight-mix: 3%;
+  --cladd-fill-fade: 15%;
+
+  --shadow-cladd-cut-outline:
+    -1px -1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 2%, transparent) inset,
+    0px 0px 0px 1px
+    color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+  --shadow-cladd-outline:
+    1px 1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 8%, transparent) inset,
+    -1px -1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+  --shadow-cladd-outline-fill:
+    1px 1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 20%, transparent) inset,
+    -1px -1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 20%, transparent) inset;
+  --shadow-cladd-popover: 0 24px 64px -12px rgb(0 0 0 / 0.5);
+}
+
+/* ───────────────────────── colored light ───────────────────────── */
+
+[class*="cladd-color-"]:not(.cladd-color-neutral) {
+  --cladd-bg: oklch(from var(--cladd-theme) 1 0.015 h);
+  --cladd-backdrop: oklch(0.74 0.018 100);
+  --cladd-primary: oklch(from var(--cladd-theme) 0.5 0.18 h);
+  --cladd-on-primary: oklch(from var(--cladd-theme) 0.97 0.04 h);
+  --cladd-surface: oklch(from var(--cladd-theme) 0.97 0.015 h);
+  --cladd-surface-cut: oklch(from var(--cladd-theme) 0.93 0.02 h);
+  --cladd-fg: oklch(from var(--cladd-theme) 0.25 0.015 h);
+  --cladd-fg-soft: oklch(from var(--cladd-theme) 0.5 0.025 h);
+  --cladd-fg-softer: oklch(from var(--cladd-theme) 0.65 0.025 h);
+  --cladd-fg-softest: oklch(from var(--cladd-theme) 0.75 0.025 h);
+  --cladd-surface-white: oklch(from var(--cladd-theme) 0.98 0.04 h);
+  --cladd-surface-black: oklch(from var(--cladd-theme) 0.4 0.07 h);
+  --cladd-bg-outline: oklch(from var(--cladd-theme) 0.74 0.03 h);
+  --cladd-outline: oklch(from var(--cladd-theme) 0.88 0.025 h);
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-black) 6%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 10%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 6%,
+    transparent
+  );
+  --cladd-surface-mix-amount: 5%;
+  --cladd-surface-mix-color: var(--cladd-surface-black);
+
+  --shadow-cladd-cut-outline:
+    0.5px 0.5px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-black) 10%, transparent) inset,
+    0px 0px 0px 0.5px
+    color-mix(in oklab, var(--cladd-surface-black) 5%, transparent) inset;
+  --shadow-cladd-outline-fill:
+    0px 0px 0px 1px
+    color-mix(in oklab, var(--cladd-surface-black) 40%, transparent) inset,
+    1px 1px 0px 0.25px
+    color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
+  --shadow-cladd-outline:
+    0px 0px 0px 1px var(--color-cladd-outline) inset,
+    1.5px 1.5px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 80%, transparent) inset;
+}
+
+/* ───────────────────────── colored dark ───────────────────────── */
+
+.dark [class*="cladd-color-"]:not(.cladd-color-neutral),
+.dark[class*="cladd-color-"]:not(.cladd-color-neutral) {
+  --cladd-bg: oklch(from var(--cladd-theme) 0.18 0.02 h);
+  --cladd-backdrop: #000;
+  --cladd-primary: oklch(from var(--cladd-theme) 0.95 0.18 h);
+  --cladd-on-primary: oklch(from var(--cladd-theme) 0.2 0.05 h);
+  --cladd-surface: oklch(from var(--cladd-theme) 0.23 0.027 h);
+  --cladd-surface-cut: oklch(from var(--cladd-theme) 0.19 0.027 h);
+  --cladd-fg: oklch(from var(--cladd-theme) 0.9 0.04 h);
+  --cladd-fg-soft: oklch(from var(--cladd-theme) 0.65 0.04 h);
+  --cladd-fg-softer: oklch(from var(--cladd-theme) 0.5 0.04 h);
+  --cladd-fg-softest: oklch(from var(--cladd-theme) 0.4 0.04 h);
+  --cladd-surface-white: oklch(from var(--cladd-theme) 0.92 0.05 h);
+  --cladd-surface-black: oklch(from var(--cladd-theme) 0.08 0.02 h);
+  --cladd-bg-outline: oklch(from var(--cladd-theme) 0.25 0.02 h);
+  --cladd-outline: oklch(from var(--cladd-theme) 0.28 0.025 h);
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 5%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 3%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 40%,
+    transparent
+  );
+  --cladd-surface-mix-color: var(--cladd-surface-white);
+  --cladd-surface-mix-amount: 6%;
+
+  --shadow-cladd-cut-outline:
+    -1px -1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 2%, transparent) inset,
+    0px 0px 0px 1px
+    color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+  --shadow-cladd-outline:
+    1px 1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 8%, transparent) inset,
+    -1px -1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
+  --shadow-cladd-outline-fill:
+    1px 1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset,
+    -1px -1px 0px 0px
+    color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
+}
+
+/* ───────────────────────── surface levels ─────────────────────────
+Every .cladd-surface nested inside another bumps one level (up to 5), the same
+auto-nesting cladd does with React context, done here with selector depth. */
+
+.cladd-surface {
+  --cladd-surface-multiplier: 0;
+}
+.cladd-surface .cladd-surface {
+  --cladd-surface-multiplier: 1;
+}
+.cladd-surface .cladd-surface .cladd-surface {
+  --cladd-surface-multiplier: 2;
+}
+.cladd-surface .cladd-surface .cladd-surface .cladd-surface {
+  --cladd-surface-multiplier: 3;
+}
+.cladd-surface .cladd-surface .cladd-surface .cladd-surface .cladd-surface {
+  --cladd-surface-multiplier: 4;
+}
+.cladd-level-1.cladd-level-1.cladd-level-1.cladd-level-1.cladd-level-1.cladd-level-1 {
+  --cladd-surface-multiplier: 0;
+}
+.cladd-level-2.cladd-level-2.cladd-level-2.cladd-level-2.cladd-level-2.cladd-level-2 {
+  --cladd-surface-multiplier: 1;
+}
+.cladd-level-3.cladd-level-3.cladd-level-3.cladd-level-3.cladd-level-3.cladd-level-3 {
+  --cladd-surface-multiplier: 2;
+}
+.cladd-level-4.cladd-level-4.cladd-level-4.cladd-level-4.cladd-level-4.cladd-level-4 {
+  --cladd-surface-multiplier: 3;
+}
+.cladd-level-5.cladd-level-5.cladd-level-5.cladd-level-5.cladd-level-5.cladd-level-5 {
+  --cladd-surface-multiplier: 4;
+}
+
+:root,
+.dark,
+.cladd-surface,
+.cladd-cut,
+[class*="cladd-level-"],
+[class*="cladd-color-"] {
+  --cladd-step: calc(
+    var(--cladd-surface-mix-amount) *
+    var(--cladd-surface-multiplier, 0)
+  );
+  --color-cladd-bg: var(--cladd-bg);
+  --color-cladd-backdrop: var(--cladd-backdrop);
+  --color-cladd-primary: var(--cladd-primary);
+  --color-cladd-on-primary: var(--cladd-on-primary);
+  --color-cladd-surface-white: var(--cladd-surface-white);
+  --color-cladd-surface-black: var(--cladd-surface-black);
+  --color-cladd-surface-hover: var(--cladd-surface-hover);
+  --color-cladd-surface-hover-fill: var(--cladd-surface-hover-fill);
+  --color-cladd-surface-pressed: var(--cladd-surface-pressed);
+  --color-cladd-bg-outline: var(--cladd-bg-outline);
+  --color-cladd-surface: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-step),
+    var(--cladd-surface)
+  );
+  --color-cladd-surface-prev: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color)
+      calc(
+        var(--cladd-surface-mix-amount) *
+        (var(--cladd-surface-multiplier, 0) - 1)
+      ),
+    var(--cladd-surface)
+  );
+  --color-cladd-surface-next: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color)
+      calc(
+        var(--cladd-surface-mix-amount) *
+        (var(--cladd-surface-multiplier, 0) + 1)
+      ),
+    var(--cladd-surface)
+  );
+  --color-cladd-surface-cut: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-step),
+    var(--cladd-surface-cut)
+  );
+  --color-cladd-outline: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-step),
+    var(--cladd-outline)
+  );
+  --color-cladd-fg: var(--cladd-fg);
+  --color-cladd-fg-soft: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-step),
+    var(--cladd-fg-soft)
+  );
+  --color-cladd-fg-softer: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-step),
+    var(--cladd-fg-softer)
+  );
+  --color-cladd-fg-softest: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-step),
+    var(--cladd-fg-softest)
+  );
+  --color-cladd-surface-highlight: color-mix(
+    in oklab,
+    var(--cladd-surface-white) var(--cladd-highlight-mix),
+    var(--color-cladd-surface)
+  );
+}
+
+/* ───────────────────────── tailwind tokens ───────────────────────── */
+
+@theme {
+  --color-cladd-bg: var(--cladd-bg);
+  --color-cladd-backdrop: var(--cladd-backdrop);
+  --color-cladd-primary: var(--cladd-primary);
+  --color-cladd-on-primary: var(--cladd-on-primary);
+  --color-cladd-surface: var(--cladd-surface);
+  --color-cladd-surface-cut: var(--cladd-surface-cut);
+  --color-cladd-surface-prev: var(--cladd-surface);
+  --color-cladd-surface-next: var(--cladd-surface);
+  --color-cladd-surface-highlight: var(--cladd-surface);
+  --color-cladd-surface-white: var(--cladd-surface-white);
+  --color-cladd-surface-black: var(--cladd-surface-black);
+  --color-cladd-surface-hover: var(--cladd-surface-hover);
+  --color-cladd-surface-hover-fill: var(--cladd-surface-hover-fill);
+  --color-cladd-surface-pressed: var(--cladd-surface-pressed);
+  --color-cladd-fg: var(--cladd-fg);
+  --color-cladd-fg-soft: var(--cladd-fg-soft);
+  --color-cladd-fg-softer: var(--cladd-fg-softer);
+  --color-cladd-fg-softest: var(--cladd-fg-softest);
+  --color-cladd-bg-outline: var(--cladd-bg-outline);
+  --color-cladd-outline: var(--cladd-outline);
+
+  --shadow-cladd-outline: var(--shadow-cladd-outline);
+  --shadow-cladd-outline-fill: var(--shadow-cladd-outline-fill);
+  --shadow-cladd-cut-outline: var(--shadow-cladd-cut-outline);
+  --shadow-cladd-popover: var(--shadow-cladd-popover);
+
+  --spacing-cladd-3xs: 12px;
+  --spacing-cladd-2xs: 16px;
+  --spacing-cladd-xs: 20px;
+  --spacing-cladd-sm: 24px;
+  --spacing-cladd-md: 28px;
+  --spacing-cladd-lg: 32px;
+  --spacing-cladd-xl: 40px;
+  --spacing-cladd-2xl: 48px;
+  --spacing-cladd-thumb-xs: 16px;
+  --spacing-cladd-thumb-sm: 20px;
+  --spacing-cladd-thumb-md: 24px;
+  --spacing-cladd-nested-sm: 16px;
+  --spacing-cladd-nested-md: 20px;
+  --spacing-cladd-nested-lg: 24px;
+
+  --cladd-radius: 8px;
+  --radius-cladd: var(--cladd-radius);
+  --radius-cladd-3xs: calc(var(--cladd-radius) * 12 / 28);
+  --radius-cladd-2xs: calc(var(--cladd-radius) * 16 / 28);
+  --radius-cladd-xs: calc(var(--cladd-radius) * 20 / 28);
+  --radius-cladd-sm: calc(var(--cladd-radius) * 24 / 28);
+  --radius-cladd-md: var(--cladd-radius);
+  --radius-cladd-lg: calc(var(--cladd-radius) * 32 / 28);
+  --radius-cladd-xl: calc(var(--cladd-radius) * 40 / 28);
+  --radius-cladd-2xl: calc(var(--cladd-radius) * 48 / 28);
+  --radius-cladd-wrap-md: calc(var(--cladd-radius) + 4px);
+  --radius-cladd-panel: 24px;
+  --radius-cladd-popover: 24px;
+  --radius-cladd-dialog: 24px;
+  --radius-cladd-toast: 24px;
+  --radius-cladd-tooltip: 12px;
+
+  --text-cladd-md: 16px;
+  --text-cladd-sm: 14px;
+  --text-cladd-xs: 12px;
+  --text-cladd-2xs: 10px;
+  --text-cladd-3xs: 8px;
+
+  --ease-cladd-spring: cubic-bezier(0, 1, 0.2, 1.1);
+  --ease-cladd-pop: cubic-bezier(0, 1, 0, 1.025);
+  --animate-cladd-spinner: cladd-spinner 1.5s infinite linear;
+
+  @keyframes cladd-spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+/* ───────────────────────── shadcn mapping ─────────────────────────
+Every shadcn-svelte token resolves to a cladd token, so plain shadcn markup
+(bg-card, text-muted-foreground, border…) picks up the cladd palette too. */
+
+:root {
+  --radius: 8px;
+  --background: var(--cladd-bg);
+  --foreground: var(--cladd-fg);
+  --card: var(--cladd-surface);
+  --card-foreground: var(--cladd-fg);
+  --popover: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 50%,
+    var(--cladd-surface)
+  );
+  --popover-foreground: var(--cladd-fg);
+  --primary: var(--cladd-primary);
+  --primary-foreground: var(--cladd-on-primary);
+  --secondary: var(--cladd-surface);
+  --secondary-foreground: var(--cladd-fg);
+  --muted: var(--cladd-surface-cut);
+  --muted-foreground: var(--cladd-fg-soft);
+  --accent: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-surface-mix-amount),
+    var(--cladd-surface)
+  );
+  --accent-foreground: var(--cladd-fg);
+  --border: var(--cladd-bg-outline);
+  --input: var(--cladd-outline);
+
+  --brand: oklch(from #388aff 0.5 0.18 h);
+  --brand-foreground: oklch(from #388aff 0.97 0.04 h);
+  --brand-soft: oklch(from #388aff 0.95 0.03 h);
+  --destructive: oklch(from #ff0b0b 0.55 0.2 h);
+  --destructive-foreground: oklch(from #ff0b0b 0.97 0.04 h);
+  --success: oklch(from #0bff23 0.5 0.15 h);
+  --success-soft: oklch(from #0bff23 0.95 0.04 h);
+  --warning: oklch(from #ff7a00 0.58 0.15 h);
+  --warning-soft: oklch(from #fff800 0.96 0.05 h);
+  --ring: var(--brand);
+
+  --chart-1: var(--brand);
+  --chart-2: var(--success);
+  --chart-3: var(--cladd-fg-soft);
+  --chart-4: oklch(from #00f9ff 0.6 0.12 h);
+  --chart-5: var(--destructive);
+
+  --sidebar: var(--cladd-surface);
+  --sidebar-foreground: var(--cladd-fg);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--brand-foreground);
+  --sidebar-accent: color-mix(
+    in oklab,
+    var(--cladd-surface-mix-color) var(--cladd-surface-mix-amount),
+    var(--cladd-surface)
+  );
+  --sidebar-accent-foreground: var(--cladd-fg);
+  --sidebar-border: var(--cladd-bg-outline);
+  --sidebar-ring: var(--brand);
+}
+
+.dark {
+  --popover: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 12%,
+    var(--cladd-surface)
+  );
+  --brand: oklch(from #388aff 0.85 0.13 h);
+  --brand-foreground: oklch(from #388aff 0.2 0.05 h);
+  --brand-soft: oklch(from #388aff 0.23 0.027 h);
+  --destructive: oklch(from #ff0b0b 0.75 0.16 h);
+  --destructive-foreground: oklch(from #ff0b0b 0.2 0.05 h);
+  --success: oklch(from #0bff23 0.82 0.17 h);
+  --success-soft: oklch(from #0bff23 0.23 0.027 h);
+  --warning: oklch(from #fff800 0.88 0.16 h);
+  --warning-soft: oklch(from #fff800 0.23 0.027 h);
+}
+
+@theme inline {
+  --font-sans:
+    "Geist Variable", "Geist", system-ui, -apple-system, "Segoe UI", Roboto,
+    sans-serif;
+  --font-mono:
+    "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo,
+    monospace;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --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-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-soft: var(--brand-soft);
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --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);
+  --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);
+}
+
+/* ───────────────────────── surfaces ─────────────────────────
+Background is two layers over a base color: the hover/press overlay on top and
+the diagonal sheen below it. Base color stays a plain background-color, so a
+`bg-*` utility on a component recolors it without losing the cladd finish. */
+
+@layer components {
+  .cladd-surface,
+  .cladd-cut,
+  .cladd-ghost {
+    --cladd-sheen: linear-gradient(transparent, transparent);
+    background-color: var(--color-cladd-surface);
+    background-image:
+      linear-gradient(var(--cladd-overlay), var(--cladd-overlay)),
+      var(--cladd-sheen);
+    transition-timing-function: ease;
+    transition-duration: 200ms;
+    transition-property:
+      --cladd-overlay, background-color, color, box-shadow, opacity, scale,
+      outline-color, outline-offset;
+  }
+
+  .cladd-gradient {
+    --cladd-sheen: linear-gradient(
+      to bottom right,
+      color-mix(
+        in oklab,
+        var(--cladd-surface-white) var(--cladd-highlight-mix),
+        transparent
+      ),
+      transparent
+    );
+  }
+
+  /* `cladd-fill-checked` turns into a gradient fill while bits-ui marks it checked/on. */
+  .cladd-fill,
+  .cladd-gradient-fill,
+  .cladd-fill-checked:is([data-state="checked"], [data-state="indeterminate"]) {
+    color: var(--color-cladd-on-primary);
+    background-color: var(--color-cladd-primary);
+  }
+  .cladd-gradient-fill,
+  .cladd-fill-checked:is([data-state="checked"], [data-state="indeterminate"]) {
+    --cladd-sheen: linear-gradient(
+      to bottom right,
+      transparent,
+      color-mix(
+        in oklab,
+        var(--color-cladd-surface) var(--cladd-fill-fade),
+        transparent
+      )
+    );
+  }
+  :root:not(.dark)
+    :is(
+      .cladd-gradient-fill,
+      .cladd-fill-checked:is(
+        [data-state="checked"],
+        [data-state="indeterminate"]
+      )
+    ) {
+    --cladd-sheen: linear-gradient(
+      to bottom right,
+      color-mix(
+        in oklab,
+        var(--cladd-surface-white) var(--cladd-fill-fade),
+        transparent
+      ),
+      transparent
+    );
+  }
+
+  .cladd-outline {
+    box-shadow: var(--shadow-cladd-outline);
+  }
+  .cladd-outline:is(.cladd-fill, .cladd-gradient-fill),
+  .cladd-outline.cladd-fill-checked:is(
+    [data-state="checked"],
+    [data-state="indeterminate"]
+  ) {
+    box-shadow: var(--shadow-cladd-outline-fill);
+  }
+
+  .cladd-cut {
+    background-color: var(--color-cladd-surface-cut);
+    box-shadow: var(--shadow-cladd-cut-outline);
+  }
+
+  .cladd-ghost {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  @media (hover: hover) {
+    .cladd-hoverable:hover {
+      --cladd-overlay: var(--color-cladd-surface-hover);
+    }
+    .cladd-hoverable:is(.cladd-fill, .cladd-gradient-fill):hover,
+    .cladd-hoverable.cladd-fill-checked:is(
+        [data-state="checked"],
+        [data-state="indeterminate"]
+      ):hover {
+      --cladd-overlay: var(--color-cladd-surface-hover-fill);
+    }
+    .cladd-ghost.cladd-hoverable:hover {
+      --cladd-overlay: transparent;
+      background-color: var(--color-cladd-surface);
+    }
+  }
+
+  .cladd-clickable:active:not(:has(.cladd-clickable:active)),
+  .cladd-pressed {
+    --cladd-overlay: var(--color-cladd-surface-pressed);
+  }
+  .cladd-ghost.cladd-pressed,
+  .cladd-ghost.cladd-clickable:active {
+    background-color: var(--color-cladd-surface);
+  }
+  .cladd-clickable:active:not(:has(.cladd-clickable:active)) > *,
+  .cladd-press-content:active > * {
+    opacity: 0.75;
+    scale: 0.95;
+  }
+  .cladd-clickable > * {
+    transition:
+      scale 200ms ease,
+      opacity 200ms ease;
+  }
+
+  /* Button content inherits the host's flex layout, so `justify-between`, `gap-*`
+	   and friends on <Button> keep working through the extra wrapper. */
+  .cladd-button-content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: inherit;
+    flex-wrap: inherit;
+    gap: inherit;
+    align-items: inherit;
+    align-self: stretch;
+    justify-content: inherit;
+    min-width: 0;
+    overflow: inherit;
+    text-overflow: inherit;
+  }
+
+  /* Focus ring. Controls (buttons, switches…) get cladd's floating ring, 2px off
+	   the edge, keyboard focus only. Fields get the tight variant: a ring drawn
+	   inside the edge, so it never collides with a neighbouring button or gets
+	   clipped by an overflow container. */
+  .cladd-focusable,
+  .cladd-focusable-within {
+    outline: 2px solid transparent;
+    outline-offset: 0px;
+  }
+  .cladd-focusable:focus-visible,
+  .cladd-focusable-within:has(:focus-visible) {
+    outline: var(--cladd-focus-ring, 2px) solid var(--ring);
+    outline-offset: 2px;
+  }
+  .cladd-focusable-input {
+    outline: none;
+  }
+  .cladd-focusable-input:is(:focus, :has(:focus)) {
+    box-shadow:
+      inset 0 0 0 var(--cladd-field-ring, 1.5px) var(--ring),
+      var(--shadow-cladd-cut-outline);
+  }
+  .cladd-focusable-input:is(
+    [aria-invalid="true"],
+    :has([aria-invalid="true"])
+  ) {
+    box-shadow:
+      inset 0 0 0 var(--cladd-field-ring, 1.5px) var(--destructive),
+      var(--shadow-cladd-cut-outline);
+  }
+
+  /* Segment: a transparent pill inside a toolbar/list that rises one level on
+	   hover and becomes a raised gradient pill when active (tabs, nav items). */
+  .cladd-segment {
+    background-color: transparent;
+    transition-duration: 200ms;
+    transition-property:
+      background-color, box-shadow, color, opacity, scale, outline-color,
+      outline-offset;
+  }
+  @media (hover: hover) {
+    .cladd-segment:hover {
+      background-color: var(--color-cladd-surface-next);
+    }
+  }
+  .cladd-segment:is(
+    [data-state="active"],
+    [aria-current="page"],
+    [aria-selected="true"],
+    .cladd-active
+  ) {
+    background-color: var(--color-cladd-surface-next);
+    background-image: linear-gradient(
+      to bottom right,
+      color-mix(
+        in oklab,
+        var(--cladd-surface-white) var(--cladd-highlight-mix),
+        transparent
+      ),
+      transparent
+    );
+    box-shadow: var(--shadow-cladd-outline);
+  }
+  .cladd-segment:active {
+    scale: 0.97;
+  }
+
+  .cladd-section-title {
+    font-size: var(--text-cladd-xs);
+    font-weight: 500;
+    color: var(--color-cladd-fg-soft);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  .cladd-backdrop {
+    background-color: color-mix(
+      in oklab,
+      var(--cladd-backdrop) 50%,
+      transparent
+    );
+  }
+  .dark .cladd-backdrop {
+    background-color: color-mix(
+      in oklab,
+      var(--cladd-backdrop) 70%,
+      transparent
+    );
+  }
+
+  .cladd-anim-dialog[data-state="open"] {
+    animation: cladd-pop-in 500ms var(--ease-cladd-spring);
+  }
+  .cladd-anim-dialog[data-state="closed"] {
+    animation: cladd-pop-out 200ms ease-out forwards;
+  }
+  .cladd-anim-popover[data-state="open"] {
+    animation: cladd-grow-in 300ms var(--ease-cladd-pop);
+  }
+  .cladd-anim-popover[data-state="closed"] {
+    animation: cladd-grow-out 200ms ease-in-out forwards;
+  }
+  .cladd-anim-tooltip[data-state="delayed-open"],
+  .cladd-anim-tooltip[data-state="instant-open"] {
+    animation: cladd-tip-in 200ms ease;
+  }
+  .cladd-anim-tooltip[data-state="closed"] {
+    animation: cladd-tip-out 200ms ease forwards;
+  }
+  .cladd-anim-fade[data-state="open"] {
+    animation: cladd-fade-in 200ms ease;
+  }
+  .cladd-anim-fade[data-state="closed"] {
+    animation: cladd-fade-out 200ms ease forwards;
+  }
+}
+
+@keyframes cladd-pop-in {
+  from {
+    opacity: 0;
+    scale: 0.75;
+  }
+}
+@keyframes cladd-pop-out {
+  to {
+    opacity: 0;
+    scale: 0.75;
+  }
+}
+@keyframes cladd-grow-in {
+  from {
+    opacity: 0;
+    scale: 0;
+  }
+}
+@keyframes cladd-grow-out {
+  to {
+    opacity: 0;
+    scale: 0;
+  }
+}
+@keyframes cladd-tip-in {
+  from {
+    opacity: 0;
+    scale: 0.5;
+  }
+}
+@keyframes cladd-tip-out {
+  to {
+    opacity: 0;
+    scale: 0.5;
+  }
+}
+@keyframes cladd-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes cladd-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  ::selection {
+    background: color-mix(in oklab, var(--brand) 30%, transparent);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cladd-surface,
+    .cladd-cut,
+    .cladd-ghost,
+    .cladd-clickable > * {
+      transition-duration: 0ms;
+    }
+    [class*="cladd-anim-"] {
+      animation-duration: 1ms !important;
+    }
+  }
+}
diff --git a/src/routes/layout.css b/src/routes/layout.css
new file mode 100644
index 0000000..061750a
--- /dev/null
+++ b/src/routes/layout.css
@@ -0,0 +1,15 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+
+@import "./claddcn.css";
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f82bdf7
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "$app/tsconfig",
+  "compilerOptions": {
+    "rewriteRelativeImportExtensions": true,
+    "sourceMap": true,
+    "strict": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..c48e008
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,34 @@
+import adapter from "@sveltejs/adapter-static";
+import { sveltekit } from "@sveltejs/kit/vite";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+const allowedHosts = process.env.ALLOWED_HOSTS
+  ? process.env.ALLOWED_HOSTS.split(",")
+  : undefined;
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    sveltekit({
+      adapter: adapter({
+        assets: "build",
+        fallback: "index.html",
+        pages: "build",
+        precompress: false,
+        strict: false,
+      }),
+      preprocess: [vitePreprocess()],
+    }),
+  ],
+  server: {
+    allowedHosts,
+    proxy: {
+      "/api": {
+        changeOrigin: true,
+        target: process.env.API_PROXY_TARGET ?? "http://localhost:8080",
+      },
+    },
+  },
+});