From 7c3ded601fb41ebb3574fe2ebb5307f162d29ce1 Mon Sep 17 00:00:00 2001
From: Sergey <93754860+slaid098@users.noreply.github.com>
Date: Tue, 4 Aug 2026 22:08:58 +0300
Subject: [PATCH] feat(template): bake shadcn-svelte + Tailwind v4 + TS into
 fullstack cookiecutter (#265)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(template): fullstack cookiecutter — Tailwind v4 + TS + shadcn-svelte scaffold

* feat(template): fullstack — shadcn-svelte ui components + dashboard layout

* refactor(template): fullstack — remove counter/Header demo files

* feat(spec): add tailwind/shadcn/ts to STACK_REQUIRED fullstack

* test(template): update fullstack cookiecutter assertions for shadcn-svelte

* fix(ci): ruff format test_cookiecutter_templates

---------

Co-authored-by: opencode-agent <agent@opencode.local>
---
 .opencode/scripts/spec-status.py              |   3 +
 .opencode/skills/project-template/SKILL.md    |   2 +-
 .opencode/skills/spec/SKILL.md                |   8 +-
 .../templates/fullstack/cookiecutter.json     |   8 +-
 .../frontend/biome.json                       |  14 +-
 .../frontend/components.json                  |  17 +++
 .../frontend/jsconfig.json                    |  22 ---
 .../frontend/knip.json                        |   4 +-
 .../frontend/package.json                     |  20 ++-
 .../frontend/src/app.css                      | 136 +++++++++++++++---
 .../frontend/src/lib/components/Header.svelte |  23 ---
 .../src/lib/components/app-sidebar.svelte     |  45 ++++++
 .../src/lib/components/nav-main.svelte        |  30 ++++
 .../src/lib/components/nav-user.svelte        |  55 +++++++
 .../src/lib/components/section-cards.svelte   |  53 +++++++
 .../src/lib/components/site-header.svelte     |  22 +++
 .../lib/components/ui/button/button.svelte    |  80 +++++++++++
 .../src/lib/components/ui/button/index.ts     |  15 ++
 .../lib/components/ui/card/card-action.svelte |  20 +++
 .../components/ui/card/card-content.svelte    |  20 +++
 .../ui/card/card-description.svelte           |  20 +++
 .../lib/components/ui/card/card-footer.svelte |  20 +++
 .../lib/components/ui/card/card-header.svelte |  23 +++
 .../lib/components/ui/card/card-title.svelte  |  20 +++
 .../src/lib/components/ui/card/card.svelte    |  23 +++
 .../src/lib/components/ui/card/index.ts       |  24 ++++
 .../components/ui/checkbox/checkbox.svelte    |  35 +++++
 .../src/lib/components/ui/checkbox/index.ts   |   2 +
 .../ui/data-table/create-table.svelte         |  19 +++
 .../ui/data-table/flex-render.svelte          |  26 ++++
 .../src/lib/components/ui/data-table/index.ts |   5 +
 .../ui/data-table/render-helpers.svelte.ts    |  26 ++++
 .../src/lib/components/ui/dialog/index.ts     |  13 ++
 .../lib/components/ui/dropdown-menu/index.ts  |  20 +++
 .../components/ui/field/field-control.svelte  |  17 +++
 .../ui/field/field-description.svelte         |  17 +++
 .../components/ui/field/field-errors.svelte   |  17 +++
 .../components/ui/field/field-label.svelte    |  17 +++
 .../components/ui/field/field-legend.svelte   |  17 +++
 .../lib/components/ui/field/field-root.svelte |  26 ++++
 .../ui/field/field-validation.svelte          |  17 +++
 .../src/lib/components/ui/field/index.ts      |  24 ++++
 .../src/lib/components/ui/input/index.ts      |   2 +
 .../src/lib/components/ui/input/input.svelte  |  32 +++++
 .../src/lib/components/ui/label/index.ts      |   2 +
 .../src/lib/components/ui/label/label.svelte  |  20 +++
 .../src/lib/components/ui/separator/index.ts  |   2 +
 .../components/ui/separator/separator.svelte  |  28 ++++
 .../src/lib/components/ui/sheet/index.ts      |  13 ++
 .../lib/components/ui/sidebar/constants.ts    |   3 +
 .../lib/components/ui/sidebar/content.svelte  |  24 ++++
 .../components/ui/sidebar/context.svelte.ts   |  37 +++++
 .../lib/components/ui/sidebar/footer.svelte   |  21 +++
 .../components/ui/sidebar/group-action.svelte |  25 ++++
 .../ui/sidebar/group-content.svelte           |  21 +++
 .../components/ui/sidebar/group-label.svelte  |  25 ++++
 .../lib/components/ui/sidebar/group.svelte    |  24 ++++
 .../lib/components/ui/sidebar/header.svelte   |  21 +++
 .../src/lib/components/ui/sidebar/index.ts    |  82 +++++++++++
 .../lib/components/ui/sidebar/input.svelte    |  21 +++
 .../lib/components/ui/sidebar/inset.svelte    |  28 ++++
 .../components/ui/sidebar/menu-action.svelte  |  26 ++++
 .../components/ui/sidebar/menu-badge.svelte   |  26 ++++
 .../components/ui/sidebar/menu-button.svelte  |  28 ++++
 .../components/ui/sidebar/menu-item.svelte    |  24 ++++
 .../ui/sidebar/menu-skeleton.svelte           |  21 +++
 .../ui/sidebar/menu-sub-button.svelte         |  29 ++++
 .../ui/sidebar/menu-sub-item.svelte           |  21 +++
 .../ui/sidebar/menu-sub-trigger.svelte        |  25 ++++
 .../lib/components/ui/sidebar/menu-sub.svelte |  21 +++
 .../src/lib/components/ui/sidebar/menu.svelte |  21 +++
 .../lib/components/ui/sidebar/provider.svelte |  60 ++++++++
 .../src/lib/components/ui/sidebar/rail.svelte |  26 ++++
 .../src/lib/components/ui/sidebar/root.svelte |  55 +++++++
 .../components/ui/sidebar/separator.svelte    |  19 +++
 .../lib/components/ui/sidebar/trigger.svelte  |  31 ++++
 .../src/lib/components/ui/skeleton/index.ts   |   2 +
 .../components/ui/skeleton/skeleton.svelte    |  17 +++
 .../src/lib/components/ui/sonner/index.ts     |   3 +
 .../lib/components/ui/sonner/sonner.svelte    |  21 +++
 .../src/lib/components/ui/switch/index.ts     |   2 +
 .../lib/components/ui/switch/switch.svelte    |  36 +++++
 .../src/lib/components/ui/textarea/index.ts   |   2 +
 .../components/ui/textarea/textarea.svelte    |  24 ++++
 .../src/lib/components/ui/tooltip/index.ts    |   9 ++
 .../src/lib/hooks/is-mobile.svelte.ts         |  26 ++++
 .../frontend/src/lib/stores/counter.svelte.js |  22 ---
 .../frontend/src/lib/stores/counter.test.js   |  29 ----
 .../frontend/src/lib/utils/cn.svelte.ts       |  22 +++
 .../frontend/src/lib/utils/format.js          |  11 --
 .../frontend/src/lib/utils/format.test.js     |  20 ---
 .../frontend/src/routes/+error.svelte         |   4 +-
 .../frontend/src/routes/+layout.svelte        |  20 +++
 .../frontend/src/routes/+layout.ts            |   5 +
 .../frontend/src/routes/+page.js              |   4 -
 .../frontend/src/routes/+page.svelte          |  75 +++++++---
 .../frontend/src/routes/+page.ts              |   5 +
 .../frontend/svelte.config.js                 |  10 +-
 .../frontend/tests/e2e/app.spec.js            |  12 --
 .../frontend/tests/e2e/app.spec.ts            |   6 +
 .../frontend/tsconfig.json                    |  36 +++++
 .../{vite.config.js => vite.config.ts}        |   3 +-
 .../{vitest.config.js => vitest.config.ts}    |   4 +-
 tests/test_cookiecutter_templates.py          |  98 +++++++++++--
 104 files changed, 2206 insertions(+), 211 deletions(-)
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/components.json
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/jsconfig.json
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/Header.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/app-sidebar.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-main.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-user.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/section-cards.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/site-header.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/button.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-action.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-content.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-description.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-footer.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-header.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-title.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/create-table.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/flex-render.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/render-helpers.svelte.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dialog/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-control.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-description.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-errors.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-label.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-legend.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-root.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-validation.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/input.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/label.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/separator.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sheet/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/constants.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/content.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/context.svelte.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/footer.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-action.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-content.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-label.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/header.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/input.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/inset.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-action.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-badge.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-button.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-item.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-skeleton.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-button.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-item.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-trigger.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/provider.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/rail.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/root.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/separator.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/trigger.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/skeleton.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/sonner.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/switch.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/textarea.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/tooltip/index.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/hooks/is-mobile.svelte.ts
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.svelte.js
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.test.js
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/cn.svelte.ts
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.js
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.test.js
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.svelte
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.ts
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.js
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.ts
 delete mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.js
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.ts
 create mode 100644 .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tsconfig.json
 rename .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/{vite.config.js => vite.config.ts} (60%)
 rename .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/{vitest.config.js => vitest.config.ts} (56%)

diff --git a/.opencode/scripts/spec-status.py b/.opencode/scripts/spec-status.py
index 1f17c70..723955e 100644
--- a/.opencode/scripts/spec-status.py
+++ b/.opencode/scripts/spec-status.py
@@ -81,6 +81,9 @@ STACK_REQUIRED: dict[str, list[str]] = {
         "ruff",
         "mypy",
         "pytest",
+        "tailwind",
+        "shadcn",
+        "typescript",
     ],
     "mcp-server": ["fastapi", "mcp", "patchright", "uv"],
     "cli": ["typer", "uv", "hatchling", "ruff", "mypy", "pytest"],
diff --git a/.opencode/skills/project-template/SKILL.md b/.opencode/skills/project-template/SKILL.md
index 8069b0b..7e645d3 100644
--- a/.opencode/skills/project-template/SKILL.md
+++ b/.opencode/skills/project-template/SKILL.md
@@ -61,7 +61,7 @@ init flow.
 ```
 Выбери тип проекта (из spec-status VALID_TYPES):
 [1] backend       — FastAPI + Tortoise, REST API (cookiecutter template)
-[2] fullstack     — backend + SvelteKit frontend (cookiecutter template)
+[2] fullstack     — backend + SvelteKit + Tailwind v4 + shadcn-svelte dashboard (TypeScript, cookiecutter template)
 [3] cli           — Python CLI tool, Typer (cookiecutter template)
 [4] mcp-server    — MCP + REST сервер (нет cookiecutter template — ручная инициализация)
 [5] bot           — Telegram bot, aiogram 3 (нет cookiecutter template — ручная инициализация)
diff --git a/.opencode/skills/spec/SKILL.md b/.opencode/skills/spec/SKILL.md
index 706c97a..e45478b 100644
--- a/.opencode/skills/spec/SKILL.md
+++ b/.opencode/skills/spec/SKILL.md
@@ -42,7 +42,7 @@ truth для порядка и действий — `spec-status` tool. На в
 Общий для всех типов: Python 3.12+, uv, hatchling, ruff, mypy strict, pytest 90% cov, xenon, pre-commit, .editorconfig, .gitignore, LICENSE MIT, dependabot, CI.
 
 - **backend**: FastAPI + uvicorn, Tortoise ORM (встроенные миграции `tortoise makemigrations`, НЕ Aerich — legacy), Pydantic v2 + pydantic-settings, Loguru, опц. JWT-auth (`passlib[bcrypt]` + `pyjwt`)
-- **fullstack**: backend + frontend/ (SvelteKit + Svelte 5 runes (JS) + Biome + Vitest + Knip)
+- **fullstack**: backend + frontend/ (SvelteKit + Svelte 5 runes (TS) + Tailwind v4 + shadcn-svelte + Biome + Vitest + Knip)
 - **mcp-server**: FastAPI + MCP SDK, Patchright/Playwright over CDP, X-API-Key
 - **cli**: Typer (default) / click / argparse, hatchling build
 - **bot**: aiogram 3.x, FastAPI webhook/polling, Tortoise (опц.), Pydantic AI (опц.)
@@ -65,7 +65,7 @@ Prompt template A (см. ниже).
 ```
 Выбери тип проекта:
 [1] backend       — FastAPI + Tortoise, REST API, без frontend
-[2] fullstack     — backend + SvelteKit/Svelte 5 dashboard (monorepo)
+[2] fullstack     — backend + SvelteKit/Svelte 5 + Tailwind v4 + shadcn-svelte dashboard (TypeScript, monorepo)
 [3] mcp-server    — MCP + REST сервер (Patchright/Playwright over CDP)
 [4] cli           — Python CLI tool (Typer)
 [5] bot           — Telegram bot (aiogram 3)
@@ -88,7 +88,7 @@ backend:
 - Auth: [1] none v1 / [2] JWT / [3] X-API-Key
 
 fullstack:
-- frontend: [1] SvelteKit + Svelte 5 (default) / [2] add later
+- frontend: [1] SvelteKit + Svelte 5 + Tailwind v4 + shadcn-svelte (default) / [2] add later
 - DB: (same as backend)
 - Auth: (same as backend)
 
@@ -236,7 +236,7 @@ Spec complete. Issues: #N1, #N2, ...
 Default stack для типа (хардкод, добавить всегда):
 - Общий: Python 3.12+, uv, hatchling, ruff, mypy strict, pytest 90% cov, xenon, pre-commit, .editorconfig, .gitignore, LICENSE MIT, dependabot, CI
 - backend: FastAPI + uvicorn, Tortoise ORM (встроенные миграции `tortoise makemigrations`, НЕ Aerich), Pydantic v2 + pydantic-settings, Loguru, опц. JWT-auth (`passlib[bcrypt]` + `pyjwt`)
-- fullstack: + frontend/ (SvelteKit + Svelte 5 runes (JS) + Biome + Vitest + Knip)
+- fullstack: + frontend/ (SvelteKit + Svelte 5 runes (TS) + Tailwind v4 + shadcn-svelte + Biome + Vitest + Knip)
 - mcp-server: FastAPI + MCP SDK, Patchright/Playwright over CDP, X-API-Key
 - cli: Typer (default) / click / argparse, hatchling build
 - bot: aiogram 3.x, FastAPI webhook/polling, Tortoise (опц.), Pydantic AI (опц.)
diff --git a/.opencode/templates/fullstack/cookiecutter.json b/.opencode/templates/fullstack/cookiecutter.json
index 2702b94..9e2e932 100644
--- a/.opencode/templates/fullstack/cookiecutter.json
+++ b/.opencode/templates/fullstack/cookiecutter.json
@@ -4,5 +4,11 @@
   "description": "Fullstack project description",
   "use_auth": ["no", "yes"],
   "use_db": ["yes", "no"],
-  "python_version": "3.13"
+  "python_version": "3.13",
+  "_copy_without_render": [
+    "frontend/src/lib/components",
+    "frontend/src/routes/+page.svelte",
+    "frontend/src/routes/+layout.svelte",
+    "frontend/src/routes/+error.svelte"
+  ]
 }
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/biome.json b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/biome.json
index b226c35..219ad71 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/biome.json
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/biome.json
@@ -21,5 +21,17 @@
   },
   "files": {
     "ignore": ["build", ".svelte-kit", "playwright-report"]
-  }
+  },
+  "overrides": [
+    {
+      "include": ["src/lib/components/ui/**/*.svelte", "src/lib/components/ui/**/*.ts"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noExplicitAny": "off"
+          }
+        }
+      }
+    }
+  ]
 }
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/components.json b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/components.json
new file mode 100644
index 0000000..a4445af
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "css": "src/app.css",
+    "baseColor": "neutral"
+  },
+  "typescript": true,
+  "aliases": {
+    "lib": "$lib",
+    "utils": "$lib/utils",
+    "components": "$lib/components",
+    "hooks": "$lib/hooks",
+    "ui": "$lib/components/ui"
+  },
+  "registry": "https://shadcn-svelte.com/registry"
+}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/jsconfig.json b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/jsconfig.json
deleted file mode 100644
index 50a0836..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/jsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "checkJs": true,
-    "allowJs": true,
-    "moduleResolution": "bundler",
-    "target": "ESNext",
-    "module": "ESNext",
-    "resolveJsonModule": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "verbatimModuleSyntax": false,
-    "baseUrl": ".",
-    "paths": {
-      "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"],
-      "$components": ["src/lib/components"],
-      "$components/*": ["src/lib/components/*"]
-    }
-  },
-  "include": ["src/**/*.js", "src/**/*.svelte", "vite.config.js", "vitest.config.js"]
-}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/knip.json b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/knip.json
index 2a45a62..0664d93 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/knip.json
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/knip.json
@@ -1,6 +1,6 @@
 {
-  "entry": ["src/**/*.{js,svelte}", "!src/**/*.test.js"],
-  "project": ["src/**/*.{js,svelte}"],
+  "entry": ["src/**/*.{ts,svelte}", "!src/**/*.test.ts"],
+  "project": ["src/**/*.{ts,svelte}"],
   "ignore": ["build", ".svelte-kit"],
   "ignoreBinaries": true,
   "ignoreDependencies": false
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/package.json b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/package.json
index e5c9c75..9e6fb76 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/package.json
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/package.json
@@ -10,11 +10,22 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "lint": "biome check .",
     "format": "biome format --write .",
     "knip": "knip"
   },
+  "dependencies": {
+    "bits-ui": "^2.18.1",
+    "tailwind-variants": "^3.3.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "@lucide/svelte": "^1.28.0",
+    "@tanstack/table-core": "^8.21.3",
+    "svelte-sonner": "^1.1.1",
+    "mode-watcher": "^1.1.0"
+  },
   "devDependencies": {
     "@sveltejs/adapter-node": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
@@ -25,6 +36,11 @@
     "svelte-check": "^4.0.0",
     "vite": "^5.0.0",
     "vitest": "^2.0.0",
-    "@playwright/test": "^1.48.0"
+    "@playwright/test": "^1.48.0",
+    "tailwindcss": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "typescript": "^5.9.0",
+    "@tsconfig/svelte": "^5.0.0",
+    "tslib": "^2.8.0"
   }
 }
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/app.css b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/app.css
index 896926e..c8558ea 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/app.css
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/app.css
@@ -1,23 +1,123 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
 :root {
-  --bg: #ffffff;
-  --fg: #1a1a1a;
-  --accent: #646cff;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #1a1a1a;
-    --fg: #ffffff;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
-}
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--fg);
-  font-family: system-ui, sans-serif;
-}
-
-a {
-  color: var(--accent);
 }
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/Header.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/Header.svelte
deleted file mode 100644
index a15f41d..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/Header.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-  /**
-   * @prop {string} title
-   * @prop {import('svelte').Snippet} [children]
-   */
-  let { title, children } = $props();
-</script>
-
-<header>
-  <h1>{title}</h1>
-  {@render children?.()}
-</header>
-
-<style>
-  header {
-    padding: 1rem;
-    border-bottom: 1px solid #ccc;
-  }
-  h1 {
-    margin: 0;
-    font-size: 1.5rem;
-  }
-</style>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/app-sidebar.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/app-sidebar.svelte
new file mode 100644
index 0000000..66deef7
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/app-sidebar.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+  import NavMain from './nav-main.svelte';
+  import NavUser from './nav-user.svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    variant = 'inset',
+    collapsible = 'icon',
+    title = '',
+    children,
+  }: {
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    title?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<Sidebar.Provider {variant} {collapsible}>
+  <Sidebar.Root>
+    <Sidebar.Header>
+      <a
+        href="/"
+        class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium"
+      >
+        <span class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 11a9 9 0 0 1 9 9" />
+            <path d="M4 4a16 16 0 0 1 16 16" />
+            <circle cx="5" cy="19" r="1" />
+          </svg>
+        </span>
+        <span class="truncate">{title}</span>
+      </a>
+    </Sidebar.Header>
+    <Sidebar.Content>
+      <NavMain />
+    </Sidebar.Content>
+    <Sidebar.Footer>
+      <NavUser />
+    </Sidebar.Footer>
+  </Sidebar.Root>
+  {@render children?.()}
+</Sidebar.Provider>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-main.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-main.svelte
new file mode 100644
index 0000000..b95323f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-main.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+  import LayoutDashboardIcon from '@lucide/svelte/icons/layout-dashboard';
+  import RadioIcon from '@lucide/svelte/icons/radio';
+  import UploadIcon from '@lucide/svelte/icons/upload';
+  import SettingsIcon from '@lucide/svelte/icons/settings';
+
+  const items = [
+    { title: 'Dashboard', url: '/', icon: LayoutDashboardIcon },
+    { title: 'Channels', url: '/channels', icon: RadioIcon },
+    { title: 'Uploads', url: '/uploads', icon: UploadIcon },
+    { title: 'Settings', url: '/settings', icon: SettingsIcon },
+  ];
+</script>
+
+<Sidebar.Group>
+  <Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
+  <Sidebar.GroupContent>
+    <Sidebar.Menu>
+      {#each items as item (item.title)}
+        <Sidebar.MenuItem>
+          <a href={item.url} class="flex items-center gap-2">
+            <item.icon class="size-4" />
+            <span>{item.title}</span>
+          </a>
+        </Sidebar.MenuItem>
+      {/each}
+    </Sidebar.Menu>
+  </Sidebar.GroupContent>
+</Sidebar.Group>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-user.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-user.svelte
new file mode 100644
index 0000000..93c6c66
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/nav-user.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+  import UserIcon from '@lucide/svelte/icons/user';
+  import LogOutIcon from '@lucide/svelte/icons/log-out';
+  import SettingsIcon from '@lucide/svelte/icons/settings';
+  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+  const user = {
+    name: 'Operator',
+    email: 'operator@example.com',
+    avatar: '',
+  };
+</script>
+
+<Sidebar.Menu>
+  <Sidebar.MenuItem>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <button
+            {...props}
+            class="flex w-full items-center gap-2 rounded-md p-2 text-sm outline-none hover:bg-sidebar-accent"
+          >
+            <span class="bg-muted flex size-7 items-center justify-center rounded-md">
+              <UserIcon class="size-4" />
+            </span>
+            <div class="flex flex-col text-left">
+              <span class="text-sm font-medium">{user.name}</span>
+              <span class="text-xs text-muted-foreground">{user.email}</span>
+            </div>
+            <ChevronUpIcon class="ml-auto size-4" />
+          </button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content side="top" class="w-56">
+        <DropdownMenu.Group>
+          <DropdownMenu.Item href="/settings">
+            <SettingsIcon class="size-4" />
+            Settings
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            <UserIcon class="size-4" />
+            Profile
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item>
+          <LogOutIcon class="size-4" />
+          Sign out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/section-cards.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/section-cards.svelte
new file mode 100644
index 0000000..6c72244
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/section-cards.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import * as Card from '$lib/components/ui/card/index.js';
+  import UsersIcon from '@lucide/svelte/icons/users';
+  import UploadIcon from '@lucide/svelte/icons/upload';
+  import ListTodoIcon from '@lucide/svelte/icons/list-todo';
+  import TrendingUpIcon from '@lucide/svelte/icons/trending-up';
+
+  const cards = [
+    {
+      title: 'Total Channels',
+      value: '12',
+      delta: '+2 this week',
+      icon: UsersIcon,
+    },
+    {
+      title: 'Active Uploads',
+      value: '4',
+      delta: '+1 today',
+      icon: UploadIcon,
+    },
+    {
+      title: 'Pending Tasks',
+      value: '7',
+      delta: '-3 since yesterday',
+      icon: ListTodoIcon,
+    },
+    {
+      title: 'Success Rate',
+      value: '98.4%',
+      delta: '+0.6% mtd',
+      icon: TrendingUpIcon,
+    },
+  ];
+</script>
+
+<div class="grid grid-cols-1 gap-4 px-4 py-4 sm:grid-cols-2 lg:grid-cols-4">
+  {#each cards as card (card.title)}
+    <Card.Root>
+      <Card.Header>
+        <div class="flex items-center justify-between">
+          <Card.Title class="text-sm font-medium text-muted-foreground">
+            {card.title}
+          </Card.Title>
+          <card.icon class="text-muted-foreground size-4" />
+        </div>
+      </Card.Header>
+      <Card.Content>
+        <div class="text-2xl font-semibold">{card.value}</div>
+        <p class="text-muted-foreground mt-1 text-xs">{card.delta}</p>
+      </Card.Content>
+    </Card.Root>
+  {/each}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/site-header.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/site-header.svelte
new file mode 100644
index 0000000..6d3e71b
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/site-header.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+  import { cn } from '$lib/utils/cn.svelte.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    title = '',
+    children,
+  }: { title?: string; children?: Snippet } = $props();
+</script>
+
+<header class="bg-background sticky top-0 z-10 flex h-14 items-center gap-2 border-b px-4">
+  <Sidebar.Trigger class="-ml-1" />
+  <div class="flex items-center gap-2">
+    <h1 class={cn('text-sm font-medium', !title && 'hidden md:block')}>
+      {title}
+    </h1>
+  </div>
+  <div class="ml-auto flex items-center gap-2">
+    {@render children?.()}
+  </div>
+</header>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/button.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..6e58233
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,80 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+  export const buttonVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        outline:
+          'border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  });
+
+  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;
+    };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    variant = 'default',
+    size = 'default',
+    ref = $bindable(null),
+    href = undefined,
+    type = 'button',
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    role={disabled ? 'link' : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    {disabled}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
+{/if}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..39b5e2e
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/button/index.ts
@@ -0,0 +1,15 @@
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants,
+} from './button.svelte';
+
+export {
+  Root,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants,
+  Root as Button,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-action.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..318b374
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $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}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-content.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..aa5d8ef
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-content"
+  class={cn('px-6', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-description.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..ca1858f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-description"
+  class={cn('text-muted-foreground text-sm', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-footer.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..220f5f5
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-footer"
+  class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-header.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..10e3fce
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $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-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-title.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..e636f70
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-title"
+  class={cn('font-medium leading-none', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..ffaf46b
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card"
+  class={cn(
+    'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..c298ff5
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from './card.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Description from './card-description.svelte';
+import Action from './card-action.svelte';
+import Content from './card-content.svelte';
+import Footer from './card-footer.svelte';
+
+export {
+  Root,
+  Header,
+  Title,
+  Description,
+  Action,
+  Content,
+  Footer,
+  Root as Card,
+  Header as CardHeader,
+  Title as CardTitle,
+  Description as CardDescription,
+  Action as CardAction,
+  Content as CardContent,
+  Footer as CardFooter,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..130a308
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  type Props = WithoutChildren<Root.Checkbox.RootProps> & {
+    class?: string;
+  };
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Root.Checkbox.Root
+  bind:ref
+  bind:checked
+  data-slot="checkbox"
+  class={cn(
+    'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <div class="flex items-center justify-center text-current transition-none">
+      {#if checked}
+        <CheckIcon class="size-3.5" />
+      {/if}
+    </div>
+  {/snippet}
+</Root.Checkbox.Root>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..2675e62
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,2 @@
+import Root from './checkbox.svelte';
+export { Root, Root as Checkbox };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/create-table.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/create-table.svelte
new file mode 100644
index 0000000..3b65b83
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/create-table.svelte
@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  import {
+    type TableOptions,
+    type Table,
+    createTable,
+    type ColumnDef,
+  } from '@tanstack/table-core';
+
+  export type DataTableProps<TData, TValue> = {
+    data: TData[];
+    columns: ColumnDef<TData, TValue>[];
+  };
+
+  export function createTableInstance<TData, TValue>(
+    options: TableOptions<TData>
+  ): Table<TData> {
+    return createTable(options);
+  }
+</script>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/flex-render.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/flex-render.svelte
new file mode 100644
index 0000000..d6c8cfb
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/flex-render.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  import type { CellContext, HeaderContext, RowData } from '@tanstack/table-core';
+  import { type Snippet } from 'svelte';
+
+  export type FlexRenderProps<TData extends RowData, TValue> = {
+    ctx: CellContext<TData, TValue> | HeaderContext<TData, TValue>;
+    render: ((ctx: CellContext<TData, TValue> | HeaderContext<TData, TValue>) => unknown) | undefined;
+    snippet?: Snippet<[{ props: Record<string, unknown> }]>;
+  };
+</script>
+
+<script lang="ts">
+  let { ctx, render, snippet }: import('./flex-render.svelte').FlexRenderProps<any, any> = $props();
+
+  const cell = $derived(
+    typeof render === 'function' ? (render as any)(ctx) : render
+  );
+</script>
+
+{#if snippet}
+  {@render snippet({ props: ctx as any })}
+{:else if typeof cell === 'string' || typeof cell === 'number' || typeof cell === 'boolean'}
+  {cell}
+{:else if cell}
+  {@html (cell as { html?: string }).html ?? cell}
+{/if}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/index.ts
new file mode 100644
index 0000000..236d8ab
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/index.ts
@@ -0,0 +1,5 @@
+import { CreateTable } from './create-table.svelte';
+import FlexRender from './flex-render.svelte';
+import { renderCells, renderHeader } from './render-helpers.svelte';
+
+export { CreateTable, FlexRender, renderCells, renderHeader, CreateTable as DataTable };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/render-helpers.svelte.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/render-helpers.svelte.ts
new file mode 100644
index 0000000..c00e6a5
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/data-table/render-helpers.svelte.ts
@@ -0,0 +1,26 @@
+import type {
+  CellContext,
+  HeaderContext,
+  RowData,
+} from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+
+export function renderHeader<TData extends RowData, TValue>(
+  ctx: HeaderContext<TData, TValue>,
+  render: ((ctx: HeaderContext<TData, TValue>) => unknown) | undefined,
+  snippet?: Snippet<[{ props: Record<string, unknown> }]>
+): unknown {
+  if (snippet) return snippet;
+  if (typeof render === 'function') return render(ctx);
+  return render;
+}
+
+export function renderCells<TData extends RowData, TValue>(
+  ctx: CellContext<TData, TValue>,
+  render: ((ctx: CellContext<TData, TValue>) => unknown) | undefined,
+  snippet?: Snippet<[{ props: Record<string, unknown> }]>
+): unknown {
+  if (snippet) return snippet;
+  if (typeof render === 'function') return render(ctx);
+  return render;
+}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dialog/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..638ec31
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,13 @@
+import Root from 'bits-ui';
+
+export {
+  Root,
+  Root as Dialog,
+  Root.Trigger as DialogTrigger,
+  Root.Portal as DialogPortal,
+  Root.Overlay as DialogOverlay,
+  Root.Content as DialogContent,
+  Root.Title as DialogTitle,
+  Root.Description as DialogDescription,
+  Root.Close as DialogClose,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dropdown-menu/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..725008d
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,20 @@
+import Root from 'bits-ui';
+
+export {
+  Root,
+  Root as DropdownMenu,
+  Root.Trigger as DropdownMenuTrigger,
+  Root.Portal as DropdownMenuPortal,
+  Root.Content as DropdownMenuContent,
+  Root.Arrow as DropdownMenuArrow,
+  Root.Separator as DropdownMenuSeparator,
+  Root.Group as DropdownMenuGroup,
+  Root.GroupHeading as DropdownMenuGroupHeading,
+  Root.Item as DropdownMenuItem,
+  Root.CheckboxItem as DropdownMenuCheckboxItem,
+  Root.RadioGroup as DropdownMenuRadioGroup,
+  Root.RadioItem as DropdownMenuRadioItem,
+  Root.Sub as DropdownMenuSub,
+  Root.SubTrigger as DropdownMenuSubTrigger,
+  Root.SubContent as DropdownMenuSubContent,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-control.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-control.svelte
new file mode 100644
index 0000000..db3cc65
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-control.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Field.ControlProps> = $props();
+</script>
+
+<Root.Field.Control
+  bind:ref
+  data-slot="field-control"
+  class={cn('flex flex-col gap-2', className)}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-description.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-description.svelte
new file mode 100644
index 0000000..aee212d
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Field.DescriptionProps> = $props();
+</script>
+
+<Root.Field.Description
+  bind:ref
+  data-slot="field-description"
+  class={cn('text-muted-foreground text-sm', className)}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-errors.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-errors.svelte
new file mode 100644
index 0000000..bcface5
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-errors.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Field.ErrorsProps> = $props();
+</script>
+
+<Root.Field.Errors
+  bind:ref
+  data-slot="field-errors"
+  class={cn('text-destructive text-sm', className)}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-label.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-label.svelte
new file mode 100644
index 0000000..0c0c421
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-label.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Field.LabelProps> = $props();
+</script>
+
+<Root.Field.Label
+  bind:ref
+  data-slot="field-label"
+  class={cn('text-sm leading-none font-medium select-none', className)}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-legend.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-legend.svelte
new file mode 100644
index 0000000..3a6c343
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-legend.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Field.LegendProps> = $props();
+</script>
+
+<Root.Field.Legend
+  bind:ref
+  data-slot="field-legend"
+  class={cn('text-sm leading-none font-medium select-none', className)}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-root.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-root.svelte
new file mode 100644
index 0000000..8f1137f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-root.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChild } from '$lib/utils/cn.svelte.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = WithoutChild<Root.Field.RootProps> & {
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Root.Field.Root
+  bind:ref
+  data-slot="field-root"
+  class={cn('flex flex-col gap-2', className)}
+  {...restProps}
+>
+  {children}
+</Root.Field.Root>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-validation.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-validation.svelte
new file mode 100644
index 0000000..c10163e
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/field-validation.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Field.ValidationProps> = $props();
+</script>
+
+<Root.Field.Validation
+  bind:ref
+  data-slot="field-validation"
+  class={cn('text-destructive text-sm', className)}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/index.ts
new file mode 100644
index 0000000..07a79a0
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/field/index.ts
@@ -0,0 +1,24 @@
+import Root from 'bits-ui';
+
+import FieldRoot from './field-root.svelte';
+import FieldLabel from './field-label.svelte';
+import FieldDescription from './field-description.svelte';
+import FieldValidation from './field-validation.svelte';
+import FieldControl from './field-control.svelte';
+import FieldLegend from './field-legend.svelte';
+import FieldErrors from './field-errors.svelte';
+
+export {
+  Root,
+  FieldRoot,
+  FieldLabel,
+  FieldDescription,
+  FieldValidation,
+  FieldControl,
+  FieldLegend,
+  FieldErrors,
+  Root as Field,
+  FieldRoot as FieldRoot,
+  Root.Field.Set as FieldSet,
+  Root.Field.Set as FieldSetRoot,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..f1530a2
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/index.ts
@@ -0,0 +1,2 @@
+import Root from './input.svelte';
+export { Root, Root as Input };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/input.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..723b0b3
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  type InputProps = WithElementRef<
+    Omit<HTMLInputAttributes, 'value'> & {
+      value?: string | number | null;
+      files?: FileList | null;
+    }
+  >;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    class: className,
+    ...restProps
+  }: InputProps = $props();
+</script>
+
+<input
+  bind:this={ref}
+  bind:value
+  data-slot="input"
+  {type}
+  class={cn(
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    'file:text-foreground file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium',
+    className
+  )}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..9765015
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/index.ts
@@ -0,0 +1,2 @@
+import Root from './label.svelte';
+export { Root, Root as Label };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/label.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..938c85c
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<Root.Label.RootProps> = $props();
+</script>
+
+<Root.Label.Root
+  bind:ref
+  class={cn(
+    'flex items-center gap-2 text-sm leading-none font-medium select-none',
+    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50 group-data-[invalid]:text-destructive',
+    className
+  )}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..2ac4a4e
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,2 @@
+import Root from './separator.svelte';
+export { Root, Root as Separator };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/separator.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..9ea8ee9
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+
+  type Props = WithoutChildren<Root.Separator.RootProps> & {
+    class?: string;
+  };
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'horizontal',
+    decorative = true,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Root.Separator.Root
+  bind:ref
+  data-slot="separator"
+  {orientation}
+  {decorative}
+  class={cn(
+    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+    className
+  )}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sheet/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..cfec717
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,13 @@
+import Root from 'bits-ui';
+
+export {
+  Root,
+  Root as Sheet,
+  Root.Trigger as SheetTrigger,
+  Root.Portal as SheetPortal,
+  Root.Overlay as SheetOverlay,
+  Root.Content as SheetContent,
+  Root.Title as SheetTitle,
+  Root.Description as SheetDescription,
+  Root.Close as SheetClose,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/constants.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000..0706a1c
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,3 @@
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/content.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/content.svelte
new file mode 100644
index 0000000..c877f4f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-content"
+  data-sidebar="content"
+  class={cn(
+    'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/context.svelte.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 0000000..db31c4d
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,37 @@
+import { getContext, setContext } from 'svelte';
+import { browser } from '$app/environment';
+import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants.js';
+
+export const SIDEBAR_ID = Symbol('sidebar');
+
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+
+export type SidebarProps = {
+  variant?: SidebarVariant;
+  collapsible?: SidebarCollapsible;
+  side?: 'left' | 'right';
+};
+
+export type SidebarContextValue = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  variant: SidebarVariant;
+  collapsible: SidebarCollapsible;
+  side: 'left' | 'right';
+  toggleSidebar: () => void;
+};
+
+export function useSidebar() {
+  return getContext<SidebarContextValue>(SIDEBAR_ID);
+}
+
+export function setSidebarContext(value: SidebarContextValue) {
+  setContext(SIDEBAR_ID, value);
+}
+
+export { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/footer.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/footer.svelte
new file mode 100644
index 0000000..94c3b3d
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-footer"
+  data-sidebar="footer"
+  class={cn('flex flex-col gap-2 p-2', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-action.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-action.svelte
new file mode 100644
index 0000000..8550ee2
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-action.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="sidebar-group-action"
+  data-sidebar="group-action"
+  class={cn(
+    'text-sidebar-foreground/70 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+    'group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</button>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-content.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-content.svelte
new file mode 100644
index 0000000..9979ad9
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group-content"
+  data-sidebar="group-content"
+  class={cn('w-full text-sm', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-label.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-label.svelte
new file mode 100644
index 0000000..cb0c28f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group-label.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group-label"
+  data-sidebar="group-label"
+  class={cn(
+    'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:text-sidebar-accent-foreground',
+    'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group.svelte
new file mode 100644
index 0000000..a00ec0a
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group"
+  data-sidebar="group"
+  class={cn(
+    'group/sidebar-group relative flex w-full min-w-0 flex-col p-2',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/header.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/header.svelte
new file mode 100644
index 0000000..5f51f93
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-header"
+  data-sidebar="header"
+  class={cn('flex flex-col gap-2 p-2', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..aa36ec3
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,82 @@
+import { SIDEBAR_ID, setSidebarContext, useSidebar, type SidebarContextValue, type SidebarVariant, type SidebarCollapsible, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './context.svelte.js';
+
+import Provider from './provider.svelte';
+import Root from './root.svelte';
+import Header from './header.svelte';
+import Footer from './footer.svelte';
+import Content from './content.svelte';
+import Group from './group.svelte';
+import GroupLabel from './group-label.svelte';
+import GroupAction from './group-action.svelte';
+import GroupContent from './group-content.svelte';
+import Menu from './menu.svelte';
+import MenuItem from './menu-item.svelte';
+import MenuButton from './menu-button.svelte';
+import MenuAction from './menu-action.svelte';
+import MenuBadge from './menu-badge.svelte';
+import MenuSkeleton from './menu-skeleton.svelte';
+import MenuSub from './menu-sub.svelte';
+import MenuSubItem from './menu-sub-item.svelte';
+import MenuSubButton from './menu-sub-button.svelte';
+import MenuSubTrigger from './menu-sub-trigger.svelte';
+import Rail from './rail.svelte';
+import Separator from './separator.svelte';
+import Input from './input.svelte';
+import Trigger from './trigger.svelte';
+import Inset from './inset.svelte';
+
+export {
+  Provider,
+  Root,
+  Header,
+  Footer,
+  Content,
+  Group,
+  GroupLabel,
+  GroupAction,
+  GroupContent,
+  Menu,
+  MenuItem,
+  MenuButton,
+  MenuAction,
+  MenuBadge,
+  MenuSkeleton,
+  MenuSub,
+  MenuSubItem,
+  MenuSubButton,
+  MenuSubTrigger,
+  Rail,
+  Separator,
+  Input,
+  Trigger,
+  Inset,
+  useSidebar,
+  setSidebarContext,
+  SIDEBAR_ID,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  Root as Sidebar,
+  Provider as SidebarProvider,
+  Header as SidebarHeader,
+  Footer as SidebarFooter,
+  Content as SidebarContent,
+  Group as SidebarGroup,
+  GroupLabel as SidebarGroupLabel,
+  GroupAction as SidebarGroupAction,
+  GroupContent as SidebarGroupContent,
+  Menu as SidebarMenu,
+  MenuItem as SidebarMenuItem,
+  MenuButton as SidebarMenuButton,
+  MenuAction as SidebarMenuAction,
+  MenuBadge as SidebarMenuBadge,
+  MenuSkeleton as SidebarMenuSkeleton,
+  MenuSub as SidebarMenuSub,
+  MenuSubItem as SidebarMenuSubItem,
+  MenuSubButton as SidebarMenuSubButton,
+  MenuSubTrigger as SidebarMenuSubTrigger,
+  Rail as SidebarRail,
+  Separator as SidebarSeparator,
+  Input as SidebarInput,
+  Trigger as SidebarTrigger,
+  Inset as SidebarInset,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/input.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/input.svelte
new file mode 100644
index 0000000..dfa43d2
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLInputElement>> = $props();
+</script>
+
+<input
+  bind:this={ref}
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  class={cn(
+    'bg-background border-input ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full min-w-0 rounded-md border px-2 py-1 text-sm shadow-xs outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/inset.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/inset.svelte
new file mode 100644
index 0000000..43fb041
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/inset.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import { useSidebar } from './context.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-inset"
+  class={cn(
+    'bg-background relative flex min-h-svh flex-1 flex-col',
+    'peer-data-[variant=inset]:shadow-xs peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 peer-data-[variant=inset]:ml-0 peer-data-[variant=inset]:peer-data-[side=right]:ml-2 peer-data-[variant=inset]:peer-data-[side=right]:mr-2 peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2 md:peer-data-[variant=inset]:peer-data-[side=right]:ml-2 md:peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2 md:peer-data-[variant=inset]:peer-data-[side=right]:mr-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+    sidebar?.variant === 'inset' && 'ml-0',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-action.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-action.svelte
new file mode 100644
index 0000000..87b5cc1
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-action.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="sidebar-menu-action"
+  data-sidebar="menu-action"
+  class={cn(
+    'text-sidebar-foreground/70 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:text-sidebar-accent-foreground',
+    'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5',
+    'group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</button>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-badge.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-badge.svelte
new file mode 100644
index 0000000..5bf6da8
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-badge.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> & { children?: Snippet } = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="sidebar-menu-badge"
+  data-sidebar="menu-badge"
+  class={cn(
+    'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+    'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5',
+    'group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</span>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-button.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-button.svelte
new file mode 100644
index 0000000..abcea33
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-button.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { useSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="sidebar-menu-button"
+  data-sidebar="menu-button"
+  class={cn(
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-invalid:border-destructive aria-invalid:text-destructive group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    className
+  )}
+  onclick={() => sidebar?.setOpenMobile(false)}
+  {...restProps}
+>
+  {children}
+</button>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-item.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-item.svelte
new file mode 100644
index 0000000..6639687
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-item.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLLIElement>> & { children?: Snippet } = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-item"
+  data-sidebar="menu-item"
+  class={cn(
+    'group/menu-item relative',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</li>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-skeleton.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-skeleton.svelte
new file mode 100644
index 0000000..0b2d871
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-skeleton.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-menu-skeleton"
+  data-sidebar="menu-skeleton"
+  class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-button.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-button.svelte
new file mode 100644
index 0000000..bb4dc58
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+  import { useSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="sidebar-menu-sub-button"
+  data-sidebar="menu-sub-button"
+  class={cn(
+    'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground/70 outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:text-destructive [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    'group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  onclick={() => sidebar?.setOpenMobile(false)}
+  {...restProps}
+>
+  {children}
+</button>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-item.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-item.svelte
new file mode 100644
index 0000000..5645aa4
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLLIElement>> & { children?: Snippet } = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-sub-item"
+  data-sidebar="menu-sub-item"
+  class={cn('group/menu-sub-item relative', className)}
+  {...restProps}
+>
+  {children}
+</li>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-trigger.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-trigger.svelte
new file mode 100644
index 0000000..43acdd7
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub-trigger.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="sidebar-menu-sub-trigger"
+  data-sidebar="menu-sub-trigger"
+  class={cn(
+    'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground/70 outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:text-destructive [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    'group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</button>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub.svelte
new file mode 100644
index 0000000..e62f33d
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu-sub.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLLIElement>> & { children?: Snippet } = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-sub"
+  data-sidebar="menu-sub"
+  class={cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className)}
+  {...restProps}
+>
+  {children}
+</li>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu.svelte
new file mode 100644
index 0000000..f11f3b1
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLUListElement>> & { children?: Snippet } = $props();
+</script>
+
+<ul
+  bind:this={ref}
+  data-slot="sidebar-menu"
+  data-sidebar="menu"
+  class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+  {...restProps}
+>
+  {children}
+</ul>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/provider.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/provider.svelte
new file mode 100644
index 0000000..f15f24f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/provider.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import { setSidebarContext, type SidebarContextValue, type SidebarProps } from './context.svelte.js';
+
+  let {
+    variant = 'sidebar',
+    collapsible = 'offcanvas',
+    side = 'left',
+    open = $bindable(false),
+    openMobile = $bindable(false),
+    children,
+  }: SidebarProps & {
+    open?: boolean;
+    openMobile?: boolean;
+    children?: import('svelte').Snippet;
+  } = $props();
+
+  let isMobile = $state(false);
+
+  if (browser) {
+    const mq = window.matchMedia('(max-width: 767px)');
+    isMobile = mq.matches;
+    const handler = (e: MediaQueryListEvent) => (isMobile = e.matches);
+    mq.addEventListener('change', handler);
+  }
+
+  const setOpen = (v: boolean) => (open = v);
+  const setOpenMobile = (v: boolean) => (openMobile = v);
+  const toggleSidebar = () => {
+    if (isMobile) {
+      setOpenMobile(!openMobile);
+    } else {
+      setOpen(!open);
+    }
+  };
+
+  const ctx: SidebarContextValue = {
+    get state() {
+      return open ? 'expanded' : 'collapsed';
+    },
+    get open() {
+      return open;
+    },
+    setOpen,
+    get openMobile() {
+      return openMobile;
+    },
+    setOpenMobile,
+    get isMobile() {
+      return isMobile;
+    },
+    variant,
+    collapsible,
+    side,
+    toggleSidebar,
+  };
+  setSidebarContext(ctx);
+</script>
+
+{@render children?.()}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/rail.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/rail.svelte
new file mode 100644
index 0000000..6f76476
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/rail.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-rail"
+  data-sidebar="rail"
+  class={cn(
+    'bg-sidebar-border hover:bg-sidebar-border/50 absolute inset-y-0 z-20 hidden w-px transition-[opacity]',
+    'group-data-[side=left]:-right-4 group-data[side=right]:-left-4',
+    'group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {children}
+</div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/root.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/root.svelte
new file mode 100644
index 0000000..8e7a032
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/root.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import { useSidebar } from './context.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    style,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children?: Snippet } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+{#if sidebar?.isMobile}
+  <div
+    bind:this={ref}
+    data-slot="sidebar"
+    data-sidebar="sidebar"
+    data-mobile="true"
+    class={cn(
+      'bg-background text-foreground fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col transition-transform duration-300',
+      sidebar.side === 'right' ? 'right-0' : 'left-0',
+      sidebar.openMobile
+        ? 'translate-x-0'
+        : sidebar.side === 'right'
+          ? 'translate-x-full'
+          : '-translate-x-full',
+      className
+    )}
+    style={style}
+    {...restProps}
+  >
+    {children}
+  </div>
+{:else}
+  <div
+    bind:this={ref}
+    data-slot="sidebar"
+    data-sidebar="sidebar"
+    class={cn(
+      'bg-sidebar text-sidebar-foreground group/sidebar flex h-svh w-(--sidebar-width) flex-col transition-[width,transform] duration-200',
+      sidebar?.collapsible === 'icon' && !sidebar?.open && 'w-(--sidebar-width-icon)',
+      sidebar?.collapsible === 'offcanvas' && !sidebar?.open && '-translate-x-full',
+      sidebar?.side === 'right' ? 'ml-auto' : '',
+      className
+    )}
+    style={style}
+    {...restProps}
+  >
+    {children}
+  </div>
+{/if}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/separator.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/separator.svelte
new file mode 100644
index 0000000..5f9aa12
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import SeparatorPrimitive from './separator.svelte';
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-separator"
+  data-sidebar="separator"
+  class={cn('bg-sidebar-border mx-2 w-auto', className)}
+  {...restProps}
+></div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/trigger.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/trigger.svelte
new file mode 100644
index 0000000..45542a2
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sidebar/trigger.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import { useSidebar } from './context.svelte.js';
+  import type { HTMLAttributes, Snippet } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>> & { children?: Snippet } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="sidebar-trigger"
+  data-sidebar="trigger"
+  class={cn('size-7 inline-flex items-center justify-center rounded-md p-0 text-sidebar-foreground/70 outline-none transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring', className)}
+  onclick={sidebar?.toggleSidebar}
+  {...restProps}
+>
+  {children ?? (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="3" y1="6" x2="21" y2="6" />
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <line x1="3" y1="18" x2="21" y2="18" />
+    </svg>
+  )}
+</button>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..c3bc460
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,2 @@
+import Root from './skeleton.svelte';
+export { Root, Root as Skeleton };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..16980fc
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="skeleton"
+  class={cn('bg-muted animate-pulse rounded-md', className)}
+  {...restProps}
+></div>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000..cee8169
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1,3 @@
+import { Sonner } from './sonner.svelte';
+
+export { Sonner, Sonner as Toaster };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/sonner.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..3465b61
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  export { default as Sonner } from './sonner.svelte';
+</script>
+
+<script lang="ts">
+  import { Toaster as SonnerPrimitive } from 'svelte-sonner';
+  import { cn } from '$lib/utils/cn.svelte.js';
+  import { mode } from 'mode-watcher';
+
+  let {
+    class: className,
+    ...restProps
+  }: import('svelte-sonner').ToasterProps & { class?: string } = $props();
+</script>
+
+<SonnerPrimitive
+  data-slot="sonner"
+  class={cn('toaster group', className)}
+  theme={$mode}
+  {...restProps}
+/>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..64ed57f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/switch.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..f38ed28
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Root from 'bits-ui';
+  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = WithoutChildren<Root.Switch.RootProps> & {
+    children?: Snippet;
+    class?: string;
+  };
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Root.Switch.Root
+  bind:ref
+  bind:checked
+  data-slot="switch"
+  class={cn(
+    'peer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] data-[state=unchecked]:bg-input data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+>
+  <Root.Switch.Thumb
+    data-slot="switch-thumb"
+    class="bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+  >
+    {@render children?.()}
+  </Root.Switch.Thumb>
+</Root.Switch.Root>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..a998b0e
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/textarea.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..28ec49d
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils/cn.svelte.js';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  type TextareaProps = WithElementRef<HTMLTextareaAttributes>;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...restProps
+  }: TextareaProps = $props();
+</script>
+
+<textarea
+  bind:this={ref}
+  bind:value
+  data-slot="textarea"
+  class={cn(
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+></textarea>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/tooltip/index.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..3e80708
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,9 @@
+import Root from 'bits-ui';
+
+export {
+  Root,
+  Root as Tooltip,
+  Root.Provider as TooltipProvider,
+  Root.Trigger as TooltipTrigger,
+  Root.Content as TooltipContent,
+};
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/hooks/is-mobile.svelte.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/hooks/is-mobile.svelte.ts
new file mode 100644
index 0000000..f901a2f
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,26 @@
+import { browser } from '$app/environment';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const isMobile = $state(
+    browser ? window.innerWidth < MOBILE_BREAKPOINT : false
+  );
+
+  if (browser) {
+    const media = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const handler = (event: MediaQueryListEvent) => {
+      isMobile = event.matches;
+    };
+    media.addEventListener('change', handler);
+    $effect(() => {
+      return () => media.removeEventListener('change', handler);
+    });
+  }
+
+  return {
+    get current() {
+      return isMobile;
+    },
+  };
+}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.svelte.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.svelte.js
deleted file mode 100644
index 21a30f4..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.svelte.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Counter store — Svelte 5 runes ($state) in a *.svelte.js module.
- * Import the store and use `.count` and `.increment()`.
- */
-
-export function createCounter(initial = 0) {
-  let count = $state(initial);
-  return {
-    get count() {
-      return count;
-    },
-    increment() {
-      count += 1;
-    },
-    decrement() {
-      count -= 1;
-    },
-    reset() {
-      count = initial;
-    },
-  };
-}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.test.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.test.js
deleted file mode 100644
index 1b031e6..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/stores/counter.test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { createCounter } from './counter.svelte.js';
-
-describe('createCounter', () => {
-  it('starts at the initial value', () => {
-    const c = createCounter(5);
-    expect(c.count).toBe(5);
-  });
-
-  it('increments', () => {
-    const c = createCounter(0);
-    c.increment();
-    expect(c.count).toBe(1);
-  });
-
-  it('decrements', () => {
-    const c = createCounter(3);
-    c.decrement();
-    expect(c.count).toBe(2);
-  });
-
-  it('resets to initial', () => {
-    const c = createCounter(7);
-    c.increment();
-    c.increment();
-    c.reset();
-    expect(c.count).toBe(7);
-  });
-});
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/cn.svelte.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/cn.svelte.ts
new file mode 100644
index 0000000..1f58194
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/cn.svelte.ts
@@ -0,0 +1,22 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+  ref?: U | null;
+};
+
+export type WithoutChildren<T> = T extends any
+  ? 'children' extends keyof T
+    ? Omit<T, 'children'>
+    : T
+  : T;
+
+export type WithoutChild<T> = T extends any
+  ? 'child' extends keyof T
+    ? Omit<T, 'child'>
+    : T
+  : T;
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.js
deleted file mode 100644
index b0635aa..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Misc utility helpers.
- */
-
-export function formatDate(date) {
-  return new Date(date).toLocaleDateString();
-}
-
-export function truncate(str, n) {
-  return str.length > n ? `${str.slice(0, n)}…` : str;
-}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.test.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.test.js
deleted file mode 100644
index de25021..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/lib/utils/format.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { formatDate, truncate } from './format.js';
-
-describe('formatDate', () => {
-  it('formats a date string', () => {
-    const out = formatDate('2024-01-15');
-    expect(typeof out).toBe('string');
-    expect(out.length).toBeGreaterThan(0);
-  });
-});
-
-describe('truncate', () => {
-  it('returns the string when shorter than n', () => {
-    expect(truncate('abc', 10)).toBe('abc');
-  });
-
-  it('truncates with ellipsis when longer', () => {
-    expect(truncate('abcdef', 3)).toBe('abc…');
-  });
-});
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+error.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+error.svelte
index c142e42..7e45317 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+error.svelte
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+error.svelte
@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import { page } from '$app/state';
 </script>
 
 <svelte:head>
-  <title>{page.status} — {{ cookiecutter.project_name }}</title>
+  <title>{page.status}</title>
 </svelte:head>
 
 <h1>{page.status}</h1>
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.svelte
new file mode 100644
index 0000000..74987a1
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { ModeWatcher } from 'mode-watcher';
+  import AppSidebar from '$lib/components/app-sidebar.svelte';
+  import SiteHeader from '$lib/components/site-header.svelte';
+  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+  import type { Snippet } from 'svelte';
+
+  let { data, children }: { data: { title: string }; children?: Snippet } = $props();
+</script>
+
+<ModeWatcher />
+
+<AppSidebar variant="inset" collapsible="icon" title={data.title}>
+  <Sidebar.Inset>
+    <SiteHeader title={data.title} />
+    <main class="flex flex-1 flex-col">
+      {@render children?.()}
+    </main>
+  </Sidebar.Inset>
+</AppSidebar>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.ts
new file mode 100644
index 0000000..c7ec014
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+layout.ts
@@ -0,0 +1,5 @@
+import type { LayoutLoad } from './$types';
+
+export function load(): { title: string } {
+  return { title: '{{ cookiecutter.project_name }}' };
+}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.js
deleted file mode 100644
index 3d58f98..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('./$types').PageLoad} */
-export function load() {
-  return { title: '{{ cookiecutter.project_name }}' };
-}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.svelte b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.svelte
index 1e34cf2..068c63e 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.svelte
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.svelte
@@ -1,31 +1,62 @@
-<script>
-  import Header from '$components/Header.svelte';
-  import { createCounter } from '$lib/stores/counter.svelte.js';
+<script lang="ts">
+  import type { ColumnDef } from '@tanstack/table-core';
+  import SectionCards from '$lib/components/section-cards.svelte';
+  import * as Card from '$lib/components/ui/card/index.js';
+  import * as DataTable from '$lib/components/ui/data-table/index.js';
 
   let { data } = $props();
-  let counter = $state(createCounter(0));
+
+  type Channel = {
+    id: string;
+    name: string;
+    status: 'active' | 'paused' | 'archived';
+    uploaded: number;
+  };
+
+  const columns: ColumnDef<Channel>[] = [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'status', header: 'Status' },
+    { accessorKey: 'uploaded', header: 'Uploads' },
+  ];
+
+  const rows: Channel[] = [
+    { id: 'CH-001', name: 'Main feed', status: 'active', uploaded: 1248 },
+    { id: 'CH-002', name: 'Archive', status: 'paused', uploaded: 412 },
+    { id: 'CH-003', name: 'Outreach', status: 'active', uploaded: 89 },
+  ];
 </script>
 
 <svelte:head>
   <title>{data.title}</title>
 </svelte:head>
 
-<Header title={data.title}>
-  <p>{{ cookiecutter.description }}</p>
-</Header>
+<SectionCards />
 
-<main>
-  <p>Counter: {counter.count}</p>
-  <button onclick={() => counter.increment()}>+1</button>
-  <button onclick={() => counter.decrement()}>-1</button>
-  <button onclick={() => counter.reset()}>reset</button>
-</main>
-
-<style>
-  main {
-    padding: 1rem;
-  }
-  button {
-    margin: 0 0.25rem;
-  }
-</style>
\ No newline at end of file
+<Card.Root class="mx-4 mb-4">
+  <Card.Header>
+    <Card.Title>Channels</Card.Title>
+    <Card.Description>Recent channel activity.</Card.Description>
+  </Card.Header>
+  <Card.Content>
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="text-muted-foreground border-b text-left">
+          {#each columns as col}
+            <th class="py-2 pr-4 font-medium">{col.header as string}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row (row.id)}
+          <tr class="border-b last:border-0">
+            <td class="py-2 pr-4">{row.id}</td>
+            <td class="py-2 pr-4">{row.name}</td>
+            <td class="py-2 pr-4">{row.status}</td>
+            <td class="py-2 pr-4">{row.uploaded}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </Card.Content>
+</Card.Root>
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.ts
new file mode 100644
index 0000000..ee4a97b
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/src/routes/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export function load(): { title: string } {
+  return { title: '{{ cookiecutter.project_name }}' };
+}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/svelte.config.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/svelte.config.js
index 41f6844..123b0d6 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/svelte.config.js
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/svelte.config.js
@@ -8,7 +8,15 @@ const config = {
     adapter: adapter(),
     alias: {
       $lib: 'src/lib',
-      $components: 'src/lib/components',
+      '$lib/*': 'src/lib/*',
+      '$lib/utils': 'src/lib/utils',
+      '$lib/utils/*': 'src/lib/utils/*',
+      '$lib/hooks': 'src/lib/hooks',
+      '$lib/hooks/*': 'src/lib/hooks/*',
+      '$lib/components': 'src/lib/components',
+      '$lib/components/*': 'src/lib/components/*',
+      '$lib/components/ui': 'src/lib/components/ui',
+      '$lib/components/ui/*': 'src/lib/components/ui/*',
     },
   },
 };
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.js
deleted file mode 100644
index 2402220..0000000
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('homepage shows the project title', async ({ page }) => {
-  await page.goto('/');
-  await expect(page.locator('h1')).toContainText('{{ cookiecutter.project_name }}');
-});
-
-test('counter increments on click', async ({ page }) => {
-  await page.goto('/');
-  const buttons = page.getByRole('button');
-  await expect(buttons.first()).toBeVisible();
-});
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.ts b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.ts
new file mode 100644
index 0000000..0dee708
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tests/e2e/app.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('sidebar visible on dashboard load', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('[data-sidebar="sidebar"]')).toBeVisible();
+});
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tsconfig.json b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tsconfig.json
new file mode 100644
index 0000000..6fa1127
--- /dev/null
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "extends": "@tsconfig/svelte",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": false,
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["src/lib"],
+      "$lib/*": ["src/lib/*"],
+      "$lib/utils": ["src/lib/utils"],
+      "$lib/utils/*": ["src/lib/utils/*"],
+      "$lib/hooks": ["src/lib/hooks"],
+      "$lib/hooks/*": ["src/lib/hooks/*"],
+      "$lib/components": ["src/lib/components"],
+      "$lib/components/*": ["src/lib/components/*"],
+      "$lib/components/ui": ["src/lib/components/ui"],
+      "$lib/components/ui/*": ["src/lib/components/ui/*"]
+    }
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "tests/**/*.ts",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "playwright.config.js"
+  ]
+}
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vite.config.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vite.config.ts
similarity index 60%
rename from .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vite.config.js
rename to .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vite.config.ts
index 822e24e..09bde61 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vite.config.js
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vite.config.ts
@@ -1,6 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
 });
\ No newline at end of file
diff --git a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vitest.config.js b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vitest.config.ts
similarity index 56%
rename from .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vitest.config.js
rename to .opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vitest.config.ts
index 6b6bc7c..4ef1c32 100644
--- a/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vitest.config.js
+++ b/.opencode/templates/fullstack/{{cookiecutter.project_name}}/frontend/vitest.config.ts
@@ -1,12 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
-// Separate vitest config — the sveltekit() plugin forces SSR which
-// breaks jsdom-based component tests. Use the plain svelte() plugin.
 export default defineConfig({
   plugins: [svelte({ hot: !process.env.VITEST })],
   test: {
     environment: 'jsdom',
-    include: ['src/**/*.test.js'],
+    include: ['src/**/*.test.ts'],
   },
 });
\ No newline at end of file
diff --git a/tests/test_cookiecutter_templates.py b/tests/test_cookiecutter_templates.py
index 0ed94a1..d8d20e5 100644
--- a/tests/test_cookiecutter_templates.py
+++ b/tests/test_cookiecutter_templates.py
@@ -241,19 +241,26 @@ def test_fullstack_structure(render):
     assert (render / "backend/src/fs/api/v1/routes/users.py").exists()
     assert (render / "backend/src/fs/services/auth_service.py").exists()
     assert (render / "backend/migrations").is_dir()
-    # frontend has the SvelteKit stack
+    # frontend has the SvelteKit + Tailwind v4 + shadcn-svelte stack (TS)
     assert (render / "frontend/package.json").exists()
     assert (render / "frontend/svelte.config.js").exists()
-    assert (render / "frontend/vite.config.js").exists()
-    assert (render / "frontend/vitest.config.js").exists()
+    assert (render / "frontend/vite.config.ts").exists()
+    assert (render / "frontend/vitest.config.ts").exists()
     assert (render / "frontend/biome.json").exists()
     assert (render / "frontend/knip.json").exists()
-    assert (render / "frontend/jsconfig.json").exists()
+    assert (render / "frontend/tsconfig.json").exists()
+    assert (render / "frontend/components.json").exists()
     assert (render / "frontend/src/app.html").exists()
+    assert (render / "frontend/src/app.css").exists()
     assert (render / "frontend/src/hooks.server.js").exists()
+    assert (render / "frontend/src/routes/+layout.svelte").exists()
     assert (render / "frontend/src/routes/+page.svelte").exists()
-    assert (render / "frontend/src/lib/stores/counter.svelte.js").exists()
-    assert (render / "frontend/tests/e2e/app.spec.js").exists()
+    assert (render / "frontend/src/routes/+page.ts").exists()
+    assert (render / "frontend/src/lib/components/app-sidebar.svelte").exists()
+    assert (render / "frontend/src/lib/utils/cn.svelte.ts").exists()
+    assert (render / "frontend/src/lib/hooks/is-mobile.svelte.ts").exists()
+    assert (render / "frontend/tests/e2e/app.spec.ts").exists()
+    # removed: counter.svelte.js, Header.svelte, jsconfig.json, +page.js
     # root CI runs both
     assert (render / ".github/workflows/ci.yml").exists()
     assert (render / "README.md").exists()
@@ -282,9 +289,10 @@ def test_fullstack_conditional_stripped(render):
 
 @pytest.mark.parametrize("template_name, extra_context", [("fullstack", {"project_name": "fs"})])
 def test_fullstack_frontend_uses_svelte5(render):
-    """package.json pins svelte 5."""
+    """package.json pins svelte 5 (in dependencies or devDependencies)."""
     pkg = json.loads((render / "frontend/package.json").read_text())
-    svelte_dep = pkg.get("devDependencies", {}).get("svelte", "")
+    deps = {**pkg.get("dependencies", {}), **pkg.get("devDependencies", {})}
+    svelte_dep = deps.get("svelte", "")
     assert svelte_dep.startswith("^5.") or svelte_dep.startswith("5"), svelte_dep
 
 
@@ -308,9 +316,9 @@ def test_fullstack_error_page_is_fragment(render):
 def test_fullstack_page_uses_data_title(render):
     """+page.svelte must consume ``data.title`` from the load function."""
     page_svelte = (render / "frontend/src/routes/+page.svelte").read_text()
-    page_js = (render / "frontend/src/routes/+page.js").read_text()
+    page_ts = (render / "frontend/src/routes/+page.ts").read_text()
     # load returns { title: ... }
-    assert "title" in page_js
+    assert "title" in page_ts
     # +page.svelte consumes data.title (not a hardcoded cookiecutter literal)
     assert "data.title" in page_svelte, "+page.svelte must use data.title from load"
 
@@ -322,6 +330,76 @@ def test_fullstack_hooks_no_unused_redirect(render):
     assert "redirect" not in hooks, "hooks.server.js must not import unused redirect"
 
 
+@pytest.mark.parametrize("template_name, extra_context", [("fullstack", {"project_name": "fs"})])
+def test_fullstack_has_tailwind_config(render):
+    """vite.config.ts wires @tailwindcss/vite; package.json pins tailwindcss."""
+    vite = (render / "frontend/vite.config.ts").read_text()
+    assert "tailwindcss" in vite, "vite.config.ts must wire @tailwindcss/vite"
+    # tailwindcss() must run BEFORE sveltekit() (order matters)
+    assert vite.index("tailwindcss") < vite.index("sveltekit")
+    pkg = json.loads((render / "frontend/package.json").read_text())
+    deps = {**pkg.get("dependencies", {}), **pkg.get("devDependencies", {})}
+    assert "tailwindcss" in deps, "package.json must depend on tailwindcss"
+    assert "@tailwindcss/vite" in deps, "package.json must depend on @tailwindcss/vite"
+
+
+@pytest.mark.parametrize("template_name, extra_context", [("fullstack", {"project_name": "fs"})])
+def test_fullstack_has_shadcn_components_json(render):
+    """components.json configures shadcn-svelte (new-york, neutral, TS)."""
+    cfg_path = render / "frontend/components.json"
+    assert cfg_path.exists(), "components.json must exist"
+    cfg = json.loads(cfg_path.read_text())
+    assert cfg["style"] == "new-york", f"style must be new-york, got {cfg.get('style')}"
+    assert cfg["tailwind"]["baseColor"] == "neutral"
+    assert cfg["typescript"] is True, "typescript must be true"
+    aliases = cfg["aliases"]
+    assert aliases["lib"] == "$lib"
+    assert aliases["utils"] == "$lib/utils"
+    assert aliases["ui"] == "$lib/components/ui"
+    assert aliases["hooks"] == "$lib/hooks"
+
+
+@pytest.mark.parametrize("template_name, extra_context", [("fullstack", {"project_name": "fs"})])
+def test_fullstack_layout_has_sidebar_provider(render):
+    """+layout.svelte wires the sidebar around the content (directly or via
+    AppSidebar which embeds Sidebar.Provider)."""
+    layout = (render / "frontend/src/routes/+layout.svelte").read_text()
+    has_provider = "Sidebar.Provider" in layout or "SidebarProvider" in layout
+    has_app_sidebar = "AppSidebar" in layout
+    assert has_provider or has_app_sidebar, (
+        "+layout.svelte must wrap content in Sidebar.Provider (directly or via AppSidebar)"
+    )
+    # AppSidebar itself must contain the Sidebar.Provider
+    app_sidebar = (render / "frontend/src/lib/components/app-sidebar.svelte").read_text()
+    assert "Sidebar.Provider" in app_sidebar or "SidebarProvider" in app_sidebar, (
+        "app-sidebar.svelte must embed Sidebar.Provider"
+    )
+
+
+@pytest.mark.parametrize("template_name, extra_context", [("fullstack", {"project_name": "fs"})])
+def test_fullstack_uses_typescript(render):
+    """Frontend is TypeScript: tsconfig.json, no jsconfig.json, +page.ts, lang=ts."""
+    assert (render / "frontend/tsconfig.json").exists(), "tsconfig.json must exist"
+    assert not (render / "frontend/jsconfig.json").exists(), "jsconfig.json must be removed"
+    assert (render / "frontend/src/routes/+page.ts").exists(), "+page.ts must exist"
+    assert not (render / "frontend/src/routes/+page.js").exists(), "+page.js must be removed"
+    page_svelte = (render / "frontend/src/routes/+page.svelte").read_text()
+    assert 'lang="ts"' in page_svelte, '+page.svelte must use <script lang="ts">'
+    # @tanstack/table-core pinned to ^8 (NOT ^9 — shadcn-svelte pins v8)
+    pkg = json.loads((render / "frontend/package.json").read_text())
+    deps = {**pkg.get("dependencies", {}), **pkg.get("devDependencies", {})}
+    table_core = deps.get("@tanstack/table-core", "")
+    assert table_core.startswith("^8."), (
+        f"@tanstack/table-core must be ^8.x (shadcn-svelte pin), got {table_core}"
+    )
+    # @lucide/svelte (NOT deprecated lucide-svelte)
+    assert "@lucide/svelte" in deps, "must use @lucide/svelte (not lucide-svelte)"
+    assert "lucide-svelte" not in deps, "lucide-svelte is deprecated"
+    # tw-animate-css (NOT tw-animate)
+    assert "tw-animate-css" in deps, "must use tw-animate-css (not tw-animate)"
+    assert "tw-animate" not in deps or "tw-animate-css" in deps
+
+
 # ── README delimiter tags (create-readme standard) ──────────────────────────