@podosoft/podokit 0.5.0 → 0.6.0

package/dist/templates/modules/admin-dashboard/files/dot-claude/skills/podokit-data-table/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: podokit-data-table
+description: Use when building ANY list or table view in this project (users, sessions, orders, any collection) — including inside dialogs. PodoKit requires the shared DataTable component; never assemble a table by hand.
+---
+
+# Build a list with the shared DataTable
+
+**Every** list/table in this project must use `$lib/components/data-table.svelte`
+(`DataTable`) — it provides sortable headers and a footer pagination, consistently.
+Do **not** assemble `Table.Root` / `Table.Header` / `Table.Body` by hand, and don't
+put pagination outside the table.
+
+```svelte
+<script lang="ts">
+  import DataTable from "$lib/components/data-table.svelte";
+  const columns = [
+    { key: "name", label: "Name", sortable: true },
+    { key: "email", label: "Email", sortable: true },
+    { key: "role", label: "Role", sortable: true },     // action/status columns: no `sortable`
+  ];
+  let { rows } = $props();   // Svelte 5 runes only
+</script>
+
+<DataTable {columns} {rows} label="{rows.length} users">
+  {#snippet row(item)}
+    <Table.Cell>{item.name}</Table.Cell>
+    <Table.Cell>{item.email}</Table.Cell>
+    <Table.Cell>{item.role}</Table.Cell>
+  {/snippet}
+</DataTable>
+```
+
+- **Client data** (bounded): pass `rows`; DataTable sorts/paginates internally.
+- **Server data** (huge lists): use `manualSort` + `manualPagination` + `total`
+  + `onChange` (re-fetch with `sortBy`/`sortDirection`/`page`).
+- Nested/derived sort keys: give the column a `value` accessor.
+- No footer needed: `perPage={0}`.
+- **Search & filters**: put the shared `table-toolbar.svelte` (`TableToolbar`)
+  above the DataTable. Filters + search apply together on the Search button/Enter
+  (don't query on every keystroke); the search field is a `select` of columns.
+
+The `/admin/users` page is the reference implementation. See `docs/development.md`
+("Data tables", "Search & filters") on the PodoKit repo.

package/dist/templates/modules/admin-dashboard/files/tests/ui/general-effects.ui.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test, type Page } from "@playwright/test";
+import { anonState } from "../helpers/accounts";
+import { ready } from "../helpers/hydration";
+
+// Verifies that the General settings actually take effect (not just persist).
+// The admin storageState (project default) drives the toggles; a fresh anonymous
+// context checks the public-facing result. Serial workers (workers:1) make the
+// toggle-then-restore pattern safe for the rest of the suite; restores run in a
+// `finally` so a mid-test failure still leaves the shared site settings clean.
+
+async function saveGeneral(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Save changes" }).click();
+  await expect(page.getByText("General settings saved.")).toBeVisible();
+}
+
+test("general: footer text and links render on public pages @smoke", async ({ page }) => {
+  await ready(page, "/admin/settings");
+  const footer = page.getByLabel("Footer text");
+  const support = page.getByLabel("Support email");
+  const origFooter = await footer.inputValue();
+  const origSupport = await support.inputValue();
+  await footer.fill("© 2026 PodoKit Test");
+  await support.fill("help@example.com");
+  await saveGeneral(page);
+  try {
+    await page.goto("/");
+    await expect(page.getByText("© 2026 PodoKit Test")).toBeVisible();
+    await expect(page.getByRole("link", { name: "Support" })).toHaveAttribute("href", "mailto:help@example.com");
+  } finally {
+    await ready(page, "/admin/settings");
+    await page.getByLabel("Footer text").fill(origFooter);
+    await page.getByLabel("Support email").fill(origSupport);
+    await saveGeneral(page);
+  }
+});
+
+test("general: maintenance mode holds non-admins on the maintenance page @smoke", async ({ page, browser }) => {
+  await ready(page, "/admin/settings");
+  const origin = new URL(page.url()).origin;
+  await page.getByRole("switch", { name: "Maintenance mode" }).click();
+  await saveGeneral(page);
+  try {
+    const ctx = await browser.newContext({ storageState: anonState });
+    const anon = await ctx.newPage();
+    await anon.goto(`${origin}/`);
+    await expect(anon).toHaveURL(/\/maintenance$/);
+    await expect(anon.getByRole("heading", { name: "Under maintenance" })).toBeVisible();
+    await ctx.close();
+    // the admin is not held back
+    await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+  } finally {
+    await ready(page, "/admin/settings");
+    const t = page.getByRole("switch", { name: "Maintenance mode" });
+    if (await t.isChecked()) {
+      await t.click();
+      await saveGeneral(page);
+    }
+  }
+});
+
+test("general: closing sign-up redirects /signup and hides the link @smoke", async ({ page, browser }) => {
+  await ready(page, "/admin/settings");
+  const origin = new URL(page.url()).origin;
+  await page.getByRole("switch", { name: "Allow public sign-up" }).click();
+  await saveGeneral(page);
+  try {
+    const ctx = await browser.newContext({ storageState: anonState });
+    const anon = await ctx.newPage();
+    await anon.goto(`${origin}/signup`);
+    await expect(anon).toHaveURL(/\/login/);
+    await expect(anon.getByRole("link", { name: "Sign up" })).toHaveCount(0);
+    await ctx.close();
+  } finally {
+    await ready(page, "/admin/settings");
+    const t = page.getByRole("switch", { name: "Allow public sign-up" });
+    if (!(await t.isChecked())) {
+      await t.click();
+      await saveGeneral(page);
+    }
+  }
+});

package/dist/templates/modules/admin-dashboard/files/tests/ui/organizations.ui.spec.ts

@@ -44,9 +44,12 @@ test("create an org with a non-ascii name, a parent, and a manager @smoke", asyn
   // child row shows the parent org name
   await expect(page.getByRole("row", { name: new RegExp(child) })).toContainText(parent);
 
-  // clean up both
-  for (const n of [child, parent]) {
-    await page.getByRole("row", { name: new RegExp(n) }).getByRole("button", { name: "Delete" }).click();
-    await expect(page.getByText("Organization deleted").first()).toBeVisible();
-  }
+  // Clean up. Delete the child first (its row also shows the parent name, so a
+  // parent-name match isn't unique until the child is gone), and wait for the
+  // child row to disappear before removing the parent.
+  await page.getByRole("row", { name: new RegExp(child) }).getByRole("button", { name: "Delete" }).click();
+  await expect(page.getByText("Organization deleted").first()).toBeVisible();
+  await expect(page.getByRole("cell", { name: child, exact: true })).toHaveCount(0);
+  await page.getByRole("row", { name: new RegExp(parent) }).getByRole("button", { name: "Delete" }).first().click();
+  await expect(page.getByText("Organization deleted").first()).toBeVisible();
 });

package/dist/templates/modules/admin-dashboard/files/tests/ui/settings.ui.spec.ts

@@ -2,9 +2,40 @@ import { expect, test } from "@playwright/test";
 import { ready } from "../helpers/hydration";
 
 // admin storageState (project default)
-test("settings lists the auth features and their status @smoke", async ({ page }) => {
+
+test("settings has General and Authentication tabs @smoke", async ({ page }) => {
   await ready(page, "/admin/settings");
   await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+  await expect(page.getByRole("tab", { name: "General" })).toBeVisible();
+  await expect(page.getByRole("tab", { name: "Authentication" })).toBeVisible();
+  // General is the default tab: the site name field is shown.
+  await expect(page.getByLabel("Site name")).toBeVisible();
+});
+
+test("general settings: shows the favicon uploader @smoke", async ({ page }) => {
+  await ready(page, "/admin/settings");
+  await expect(page.getByText("Browser icon (favicon)")).toBeVisible();
+  await expect(page.locator('input[type="file"]')).toBeVisible();
+});
+
+test("general settings: edit the site name, save, and apply live @smoke", async ({ page }) => {
+  await ready(page, "/admin/settings");
+  const name = page.getByLabel("Site name");
+  const original = await name.inputValue();
+  await name.fill("PodoKit Test Site");
+  await page.getByRole("button", { name: "Save changes" }).click();
+  await expect(page.getByText("General settings saved.")).toBeVisible();
+  // the browser tab title reflects the new name live (no reload)
+  await expect(page).toHaveTitle("PodoKit Test Site");
+  // restore so other specs start clean
+  await name.fill(original);
+  await page.getByRole("button", { name: "Save changes" }).click();
+  await expect(page.getByText("General settings saved.")).toBeVisible();
+});
+
+test("settings lists the auth features under the Authentication tab @smoke", async ({ page }) => {
+  await ready(page, "/admin/settings");
+  await page.getByRole("tab", { name: "Authentication" }).click();
   await expect(page.getByText("Email & password")).toBeVisible();
   await expect(page.getByText("Two-factor authentication")).toBeVisible();
   await expect(page.getByText("Breached-password check")).toBeVisible();
@@ -13,6 +44,15 @@ test("settings lists the auth features and their status @smoke", async ({ page }
   await expect(page.getByText("Enabled", { exact: true }).first()).toBeVisible();
 });
 
+test("sidebar: back-to-home link returns to the landing page @smoke", async ({ page }) => {
+  await ready(page, "/admin/settings");
+  // the home link lives in the sidebar footer, above the user menu
+  await page.getByRole("link", { name: "Back to home" }).click();
+  await expect(page).toHaveURL(/\/$/);
+  // the landing page shows the "Open admin" entry point
+  await expect(page.getByRole("link", { name: "Open admin" })).toBeVisible();
+});
+
 test("settings is reachable from the sidebar @smoke", async ({ page }) => {
   await ready(page, "/admin");
   await page.getByRole("link", { name: "Settings" }).click();
@@ -21,6 +61,7 @@ test("settings is reachable from the sidebar @smoke", async ({ page }) => {
 
 test("admin can toggle a feature flag and it applies live @smoke", async ({ page }) => {
   await ready(page, "/admin/settings");
+  await page.getByRole("tab", { name: "Authentication" }).click();
   const toggle = page.getByRole("switch", { name: "Magic link" });
   test.skip((await toggle.count()) === 0, "magic link toggle not present");
   // Serial workers (workers:1) make toggle-then-restore safe for other specs.

package/dist/templates/modules/admin-dashboard/module.manifest.json

@@ -2,14 +2,16 @@
   "name": "admin-dashboard",
   "description": "Admin dashboard UI (SvelteKit + shadcn-svelte): login/signup/password-reset, a sidebar shell, and user + session management via the better-auth admin plugin. Requires auth.",
   "requires": [
-    "auth"
+    "auth",
+    "object-storage-s3"
   ],
   "targetApp": "web",
   "dependencies": {
     "qrcode": "^1.5.4"
   },
   "devDependencies": {
-    "@types/qrcode": "^1.5.5"
+    "@types/qrcode": "^1.5.5",
+    "@types/multer": "^1.4.12"
   },
   "env": [
     "# admin-dashboard: emails auto-promoted to the admin role on sign-up (comma-separated)",
@@ -35,6 +37,22 @@
       "file": "apps/api/src/auth/auth.ts",
       "marker": "// podokit:end:auth-options",
       "text": "trustedOrigins: (process.env.CORS_ORIGIN ?? \"http://localhost:5001\").split(\",\").map((origin) => origin.trim()),\n  databaseHooks: {\n    user: {\n      create: {\n        before: async (user) => ({\n          data: {\n            ...user,\n            role: (process.env.ADMIN_EMAILS ?? \"\")\n              .split(\",\")\n              .map((email) => email.trim().toLowerCase())\n              .includes(user.email.toLowerCase())\n              ? \"admin\"\n              : \"user\",\n          },\n        }),\n      },\n    },\n  },"
+    },
+    {
+      "file": "AGENTS.md",
+      "marker": "<!-- podokit:end:agents-modules -->",
+      "optional": true,
+      "text": "### admin-dashboard\n- Admin console lives at `/admin/*` (users, sessions, organizations, audit, settings, account). Emails in `ADMIN_EMAILS` become admins on sign-up.\n- **Every list/table MUST use the shared `$lib/components/data-table.svelte` (`DataTable`)** \u2014 it gives sortable headers + a footer pagination. Add search/filters with `$lib/components/table-toolbar.svelte`. Never assemble `Table.Root`/`Table.Header`/`Table.Body` by hand.\n"
+    },
+    {
+      "file": "apps/api/src/app.module.ts",
+      "marker": "// podokit:end:imports",
+      "text": "import { SiteSettingsModule } from \"./site-settings/site-settings.module\";"
+    },
+    {
+      "file": "apps/api/src/app.module.ts",
+      "marker": "// podokit:end:module-imports",
+      "text": "SiteSettingsModule,"
     }
   ],
   "instructions": [

package/dist/templates/modules/auth/files/apps/api/src/auth/feature-gate.ts

@@ -45,7 +45,34 @@ export function createFeatureGate(pool: Pool) {
     return cache;
   }
 
+  // Registration can be closed from the admin Settings ("Allow sign-up"). It is a
+  // site setting (`site.allowSignup`), so the row is absent until an admin turns
+  // it off — a missing/any-non-"false" value means open, matching the shipped
+  // default. Cached the same way as the feature flags.
+  let signupOpen = true;
+  let signupFetchedAt = 0;
+  async function isSignupOpen(): Promise<boolean> {
+    if (Date.now() - signupFetchedAt < CACHE_TTL_MS) return signupOpen;
+    try {
+      const res = await pool.query<{ value: string }>(
+        'SELECT "value" FROM "app_setting" WHERE "key" = $1',
+        ["site.allowSignup"],
+      );
+      signupOpen = res.rows[0]?.value !== "false";
+    } catch {
+      signupOpen = true;
+    }
+    signupFetchedAt = Date.now();
+    return signupOpen;
+  }
+
   return createAuthMiddleware(async (ctx) => {
+    // Block email/password registration when sign-up is closed. Social/invite
+    // flows are unaffected; admins create users from the dashboard.
+    if (ctx.path === "/sign-up/email" || ctx.path.startsWith("/sign-up/")) {
+      if (!(await isSignupOpen())) throw new APIError("FORBIDDEN", { message: "Sign-up is disabled." });
+      return;
+    }
     const feature = FEATURE_PATHS.find((f) =>
       f.prefixes.some((p) => ctx.path === p || ctx.path.startsWith(p)),
     );

package/dist/templates/modules/auth/module.manifest.json

@@ -91,6 +91,12 @@
       "file": "apps/api/src/app.module.ts",
       "marker": "// podokit:end:providers",
       "text": "{ provide: APP_GUARD, useClass: AuthGuard },"
+    },
+    {
+      "file": "AGENTS.md",
+      "marker": "<!-- podokit:end:agents-modules -->",
+      "optional": true,
+      "text": "### auth (better-auth)\n- The API is **secure by default**: every route needs a session except `/health` and `/api/auth/*`. Opt a route out with `@Public()`; read the user with `@Session()`.\n- Configure OAuth providers, SMTP, and the server toggles on the admin **Settings** page (DB-backed, applied live \u2014 not via env). Only `BETTER_AUTH_SECRET` and `BETTER_AUTH_URL` are required env vars.\n- Create the auth tables: `npx @better-auth/cli migrate -y --config apps/api/src/auth/auth.ts`.\n"
     }
   ],
   "instructions": [

package/dist/templates/modules/bullmq/module.manifest.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start:worker": "node dist/main-worker",
-    "dev:worker": "nest start --watch --entryFile main-worker"
+    "dev:worker": "nest start --watch --builder swc --entryFile main-worker"
   },
   "env": [
     "# bullmq uses REDIS_HOST / REDIS_PORT (already defined above)"

package/dist/templates/modules/file-upload/files/apps/api/src/files/files.controller.ts

@@ -1,3 +1,6 @@
+// The API tsconfig restricts `types` to ["node"], which suppresses @types/multer's
+// global augmentation of Express.Multer.File. Load it explicitly so the type resolves.
+/// <reference types="multer" />
 import { BadRequestException, Controller, Get, Param, Post, UploadedFile, UseInterceptors } from "@nestjs/common";
 import { FileInterceptor } from "@nestjs/platform-express";
 import { ApiConsumes, ApiTags } from "@nestjs/swagger";

package/dist/templates/todo/AGENTS.md

@@ -0,0 +1,80 @@
+# AGENTS.md — {{projectName}}
+
+Guidance for AI coding agents (Claude Code, Codex, Cursor, Copilot, …) working in
+this repository. It was generated by [PodoKit](https://github.com/podosoft-dev/podokit).
+Follow it so your changes match the project's conventions.
+
+## Project overview
+
+A full-stack TypeScript monorepo (npm workspaces):
+
+- `apps/api` — **NestJS** backend (`{{projectName}}-api`), TypeORM + PostgreSQL, Swagger at `/api-docs`.
+- `apps/web` — **SvelteKit** frontend (`{{projectName}}-web`), Tailwind v4 + shadcn-svelte + typesafe-i18n.
+- `infra/` — Docker Compose (PostgreSQL/Redis) and example k3s manifests.
+- `.podokit/` — PodoKit's generation lockfile (see "PodoKit tooling" below). Do not edit by hand.
+- **Todo example**: `apps/api/src/todos/` (controller/service/entity/DTO + migration) and the todo UI in `apps/web/src/routes/` show the end-to-end patterns to follow.
+
+## Setup & commands
+
+```bash
+npm install
+cp .env.example .env
+docker compose -f infra/docker/docker-compose.yml up -d   # PostgreSQL (+ Redis)
+npm run dev        # api on http://localhost:5002, web on http://localhost:5001
+```
+
+- **Ports: web = 5001, api = 5002.** The web app reaches the API only through its
+  SvelteKit server proxy (`/api/*`), never with a direct browser `fetch`.
+- Build: `npm run build`  ·  Type-check/lint: `npm run lint`  ·  Unit tests: `npm test`
+- Per workspace: `npm run build -w {{projectName}}-api` / `-w {{projectName}}-web`.
+- DB migrations (TypeORM): `npm run migration:run -w {{projectName}}-api`.
+- e2e (Playwright, ships in `tests/`): `npm run test:e2e`.
+
+**Always** verify a change by building the affected workspace (and `svelte-check`
+for web) before considering it done. UI changes need a Playwright test; API
+changes need an e2e/unit test.
+
+## Code style
+
+### TypeScript (both apps)
+- `strict` mode. **No `any`** — use `unknown` + narrowing. **No `@ts-ignore`/`@ts-expect-error`** and no `eslint-disable`.
+- Explicit function return types. DTOs use `class-validator` decorators.
+- Keep `noUnusedLocals`, `noUnusedParameters`, `noImplicitReturns`, `noUncheckedIndexedAccess`.
+
+### Svelte 5 (web)
+- **Runes only**: `$state()`, `$derived()`, `$effect()`, `$props()`. **Never** use `$:` (deprecated).
+- Reactive stores go in `.svelte.ts` files; don't destructure a getter-exported rune (it loses reactivity) — wrap in `$derived`.
+
+### UI — Tailwind + shadcn-svelte (web)
+- Prefer **shadcn-svelte components** over raw HTML (`<button>`, `<input>`, `<select>`, …).
+- **Do not edit `src/lib/components/ui/**`** (the shadcn primitives). Customize in a separate wrapper.
+- Tailwind v4 (CSS-first, no `tailwind.config`). Use semantic classes: `bg-background`, `text-foreground`, `border-border`. Dark mode via `mode-watcher`. Responsive (`sm:`/`md:`/`lg:`).
+
+### i18n & errors
+- **Every user-facing string goes through i18n** (`src/lib/i18n/messages.ts`) — no hardcoded text. Add keys to **all** locales at once.
+- The backend returns a stable **error envelope**: `{ success: false, error: { code, message, statusCode, path, timestamp, details? } }`. Throw `AppException("SOME_CODE", ...)` on the backend; **branch on `error.code`, not the message,** on the frontend.
+- Logging is structured; no emojis/icons. Start messages with an action verb.
+
+## PodoKit tooling & file ownership
+
+This project is managed by the `podo` CLI. Files have an ownership tier recorded
+in `.podokit/files.lock` — respect it:
+
+- **owned** (your code: `apps/web/src/routes/**`, your components/services, and this `AGENTS.md`) — edit freely.
+- **assembled** (e.g. `apps/api/src/app.module.ts`, `auth.ts`) — contain `// podokit:begin:… / …:end` fenced regions that the toolkit recomputes. Edit outside the fences only; **never hand-edit inside the fences**.
+- **managed** (bootstrap/config like `main.ts`) — the toolkit may update these; avoid gratuitous edits.
+
+Useful commands:
+
+- `podo add <module>` — add a feature (auth, admin-dashboard, redis, bullmq, …). It wires itself into the app; run `podo add` with no argument to list modules.
+- `podo status` / `podo diff` — see your local edits vs. what PodoKit generated.
+- `podo update` — pull in template/module improvements (3-way merges your edits; never touches owned files).
+
+## Commit conventions
+
+Conventional Commits (`feat|fix|docs|refactor|test|chore`), imperative mood,
+≤50-char subject, no trailing period, no emojis. One logical change per commit.
+
+<!-- podokit:begin:agents-modules -->
+<!-- Module-specific guidance is injected here by `podo add`. -->
+<!-- podokit:end:agents-modules -->

package/dist/templates/todo/CLAUDE.md

@@ -0,0 +1,6 @@
+# CLAUDE.md
+
+Agent guidance for this project lives in [AGENTS.md](./AGENTS.md). It is imported
+below so Claude Code loads the same rules the other AI tools read.
+
+@AGENTS.md

package/dist/templates/todo/Dockerfile.dev

@@ -0,0 +1,25 @@
+# Development image for the PodoKit monorepo (web + api).
+# Dependencies and source are baked in; `docker compose watch` syncs your
+# edits into the running container so the native file watchers fire.
+FROM node:22-bookworm-slim
+
+# git for the toolchain (editors, AI agents); build tools for native modules.
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends git python3 make g++ ca-certificates \
+  && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install workspace dependencies (cached unless a package.json changes).
+# NB: the host package-lock.json is intentionally NOT copied — a lockfile
+# generated on macOS/Windows prunes platform-specific optional deps and can drop
+# packages (e.g. @swc/cli) on linux. Resolving fresh in-container avoids that.
+COPY package.json ./
+COPY apps/api/package.json ./apps/api/package.json
+COPY apps/web/package.json ./apps/web/package.json
+RUN npm install
+
+# Baked source (kept in sync during development by `docker compose watch`).
+COPY . .
+
+EXPOSE 5001 5002

package/dist/templates/todo/apps/api/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "nest start --watch",
+    "dev": "nest start --watch --builder swc",
     "build": "nest build",
     "start": "node dist/main",
     "lint": "tsc -p tsconfig.json --noEmit",
@@ -40,7 +40,9 @@
     "supertest": "^7.0.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "@swc/core": "^1.7.0",
+    "@swc/cli": "^0.4.0"
   },
   "jest": {
     "moduleFileExtensions": [

package/dist/templates/todo/apps/web/src/app.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{projectName}}</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover" class="h-full">

package/dist/templates/todo/apps/web/src/lib/components/ui/tabs/index.ts

@@ -1,6 +1,6 @@
 import Root from "./tabs.svelte";
 import Content from "./tabs-content.svelte";
-import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
 
 export {
@@ -8,8 +8,6 @@ export {
 	Content,
 	List,
 	Trigger,
-	tabsListVariants,
-	type TabsListVariant,
 	//
 	Root as Tabs,
 	Content as TabsContent,

package/dist/templates/todo/apps/web/src/lib/components/ui/tabs/tabs-content.svelte

@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn("text-sm flex-1 outline-none", className)}
+	class={cn("flex-1 outline-none", className)}
 	{...restProps}
 />

package/dist/templates/todo/apps/web/src/lib/components/ui/tabs/tabs-list.svelte

@@ -1,40 +1,20 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const tabsListVariants = tv({
-		base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
-		variants: {
-			variant: {
-				default: "cn-tabs-list-variant-default bg-muted",
-				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
-</script>
-
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
-		variant = "default",
 		class: className,
 		...restProps
-	}: TabsPrimitive.ListProps & {
-		variant?: TabsListVariant;
-	} = $props();
+	}: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	data-slot="tabs-list"
-	data-variant={variant}
-	class={cn(tabsListVariants({ variant }), className)}
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		className
+	)}
 	{...restProps}
 />

package/dist/templates/todo/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -13,10 +13,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

package/dist/templates/todo/apps/web/src/lib/components/ui/tabs/tabs.svelte

@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	class={cn("flex flex-col gap-2", className)}
 	{...restProps}
 />

package/dist/templates/todo/apps/web/static/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="PodoKit">
+  <defs>
+    <linearGradient id="pk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#8b5cf6"/>
+      <stop offset="1" stop-color="#4f46e5"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="15" fill="url(#pk)"/>
+  <!-- layered stack: full-stack toolkit -->
+  <path d="M32 14 50 25 32 36 14 25Z" fill="#fff" fill-opacity="0.96"/>
+  <path d="M16 31 32 40.5 48 31" fill="none" stroke="#fff" stroke-opacity="0.78" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 38 32 47.5 48 38" fill="none" stroke="#fff" stroke-opacity="0.5" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/templates/todo/apps/web/vite.config.ts

@@ -2,6 +2,18 @@ import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 
+// Inside the dev container (compose.dev.yaml sets VITE_DOCKER=1): bind to all
+// interfaces, allow the Traefik hostname, and route HMR through Traefik on :80.
+const inDocker = process.env.VITE_DOCKER === "1";
+
 export default defineConfig({
   plugins: [tailwindcss(), sveltekit()],
+  server: inDocker
+    ? {
+        host: true,
+        port: 5001,
+        allowedHosts: true,
+        hmr: { clientPort: 80 },
+      }
+    : undefined,
 });