@podosoft/podokit 0.2.0 → 0.4.0

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/i18n/ko.ts

@@ -1,8 +1,11 @@
-import type { Translation } from "typesafe-i18n";
+import type { BaseTranslation } from "typesafe-i18n";
 
+// Uses BaseTranslation until you generate typed runtimes with `npx typesafe-i18n`.
+// After generating, switch to `import type { Translation } from "../i18n-types"`
+// so this locale is checked against the base locale's keys.
 const ko = {
   appTitle: "{{projectName}}",
   checkHealth: "API 상태 확인",
-} satisfies Translation;
+} satisfies BaseTranslation;
 
 export default ko;

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/server/api.ts

@@ -0,0 +1,19 @@
+import type { RequestEvent } from "@sveltejs/kit";
+import { createApiClient, type ApiClient } from "@podosoft/podokit-api-client";
+import { backendBaseUrl } from "./backend-proxy";
+
+// Server-side client for load functions and hooks: points at the internal
+// backend URL and forwards the incoming request's cookies.
+export function serverApiClient(event: RequestEvent): ApiClient {
+  const cookie = event.request.headers.get("cookie") ?? "";
+  const fetchWithCookies: typeof fetch = (input, init) => {
+    const headers = new Headers(init?.headers);
+    if (cookie) headers.set("cookie", cookie);
+    return event.fetch(input, { ...init, headers });
+  };
+  return createApiClient({
+    baseUrl: backendBaseUrl(),
+    apiBasePath: "",
+    fetch: fetchWithCookies,
+  });
+}

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/server/backend-proxy.ts

@@ -1,16 +1,55 @@
 // Server-side proxy boundary. The browser never talks to the API directly:
-// only these allowlisted headers are forwarded to BACKEND_INTERNAL_URL.
-const FORWARDED_HEADERS = ["authorization", "cookie", "content-type"];
+// requests go through SvelteKit server routes, which forward an allowlist of
+// headers to BACKEND_INTERNAL_URL and relay the response (including Set-Cookie).
+const FORWARDED_HEADERS = ["authorization", "cookie", "content-type", "accept", "origin", "referer"];
+const RELAYED_RESPONSE_HEADERS = ["content-type", "location", "cache-control"];
 
 export function backendBaseUrl(): string {
   return process.env.BACKEND_INTERNAL_URL ?? "http://localhost:3000";
 }
 
-export function backendProxyHeaders(request: Request): Headers {
+// Normalize the resolved client IP for the forwarded header. better-auth stores
+// IPv4 as-is but anonymizes IPv6 (masks the host bits), so an IPv6 loopback would
+// be recorded as "::" — map loopback to 127.0.0.1 for a clean local value, and
+// unwrap IPv4-mapped addresses.
+function normalizeClientIp(address: string | undefined): string | undefined {
+  if (!address) return undefined;
+  if (address === "::1" || address === "::") return "127.0.0.1";
+  if (address.startsWith("::ffff:")) return address.slice("::ffff:".length);
+  return address;
+}
+
+export async function proxyRequest(
+  request: Request,
+  targetUrl: string,
+  clientAddress?: string,
+): Promise<Response> {
   const headers = new Headers();
   for (const name of FORWARDED_HEADERS) {
     const value = request.headers.get(name);
     if (value) headers.set(name, value);
   }
-  return headers;
+  // Forward the resolved client IP so the API (better-auth) can record it.
+  const forwardedIp = normalizeClientIp(clientAddress);
+  if (forwardedIp) headers.set("x-forwarded-for", forwardedIp);
+
+  const hasBody = request.method !== "GET" && request.method !== "HEAD";
+  const upstream = await fetch(targetUrl, {
+    method: request.method,
+    headers,
+    body: hasBody ? await request.text() : undefined,
+    redirect: "manual",
+  });
+
+  const responseHeaders = new Headers();
+  for (const name of RELAYED_RESPONSE_HEADERS) {
+    const value = upstream.headers.get(name);
+    if (value) responseHeaders.set(name, value);
+  }
+  // Relay Set-Cookie so auth session cookies reach the browser.
+  for (const cookie of upstream.headers.getSetCookie()) {
+    responseHeaders.append("set-cookie", cookie);
+  }
+
+  return new Response(upstream.body, { status: upstream.status, headers: responseHeaders });
 }

package/dist/templates/fullstack-nest-svelte/apps/web/src/routes/+page.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
+  import { api } from "$lib/api";
+  import { ApiError } from "@podosoft/podokit-api-client";
 
   type Health = { status: string } | { error: string };
 
   let health = $state<Health | null>(null);
 
   async function check(): Promise<void> {
-    const res = await fetch("/api/health");
-    health = res.ok ? await res.json() : { error: `HTTP ${res.status}` };
+    try {
+      health = await api.get<{ status: string }>("/health");
+    } catch (err) {
+      health = { error: err instanceof ApiError ? `${err.code} (${err.statusCode})` : "Request failed" };
+    }
   }
 </script>
 
@@ -21,7 +26,7 @@
   <Card.Root>
     <Card.Header>
       <Card.Title>API health</Card.Title>
-      <Card.Description>Check the NestJS API through the SvelteKit server proxy.</Card.Description>
+      <Card.Description>Check the NestJS API through the typed ApiClient.</Card.Description>
     </Card.Header>
     <Card.Content class="flex flex-col gap-4">
       <Button class="w-fit" onclick={check}>Check API health</Button>

package/dist/templates/fullstack-nest-svelte/apps/web/src/routes/api/[...path]/+server.ts

@@ -0,0 +1,12 @@
+import type { RequestHandler } from "@sveltejs/kit";
+import { backendBaseUrl, proxyRequest } from "$lib/server/backend-proxy";
+
+// Proxy the app's REST API, stripping the /api prefix (backend routes are at root).
+const handler: RequestHandler = ({ request, params, url, getClientAddress }) =>
+  proxyRequest(request, `${backendBaseUrl()}/${params.path}${url.search}`, getClientAddress());
+
+export const GET = handler;
+export const POST = handler;
+export const PUT = handler;
+export const PATCH = handler;
+export const DELETE = handler;

package/dist/templates/fullstack-nest-svelte/apps/web/src/routes/api/auth/[...all]/+server.ts

@@ -0,0 +1,12 @@
+import type { RequestHandler } from "@sveltejs/kit";
+import { backendBaseUrl, proxyRequest } from "$lib/server/backend-proxy";
+
+// Proxy the better-auth handler, keeping the /api/auth prefix.
+const handler: RequestHandler = ({ request, params, url, getClientAddress }) =>
+  proxyRequest(request, `${backendBaseUrl()}/api/auth/${params.all}${url.search}`, getClientAddress());
+
+export const GET = handler;
+export const POST = handler;
+export const PUT = handler;
+export const PATCH = handler;
+export const DELETE = handler;

package/dist/templates/fullstack-nest-svelte/dot-gitignore

@@ -7,3 +7,8 @@ build/
 !.env.example
 .DS_Store
 *.log
+
+# e2e test artifacts
+tests/playwright/
+tests/playwright-report/
+tests/test-results/

package/dist/templates/fullstack-nest-svelte/package.json

@@ -2,12 +2,20 @@
   "name": "{{projectName}}",
   "version": "0.0.0",
   "private": true,
-  "engines": { "node": ">=20" },
-  "workspaces": ["apps/*"],
+  "engines": {
+    "node": ">=20"
+  },
+  "workspaces": [
+    "apps/*",
+    "tests"
+  ],
   "scripts": {
     "dev": "npm run dev --workspaces --if-present",
     "build": "npm run build --workspaces --if-present",
     "lint": "npm run lint --workspaces --if-present",
-    "test": "npm run test --workspaces --if-present"
+    "test": "npm run test --workspaces --if-present",
+    "test:e2e": "npm run test:e2e -w tests",
+    "test:e2e:ui": "npm run test:e2e:ui -w tests",
+    "test:e2e:api": "npm run test:e2e:api -w tests"
   }
 }

package/dist/templates/fullstack-nest-svelte/tests/README.md

@@ -0,0 +1,15 @@
+# tests
+
+End-to-end tests for this app, run with [`@playwright/test`](https://playwright.dev):
+
+```bash
+npm run test:e2e         # all specs (api + ui)
+npm run test:e2e:api     # backend endpoints (request-only)
+npm run test:e2e:ui      # pages (chromium)
+npm run test:e2e:report  # open the HTML report
+```
+
+The suite runs against a live stack (web on `E2E_BASE_URL`, default
+`http://localhost:5173`, proxying `/api/*` to the API). Start PostgreSQL, run the
+auth migration, and start the API + web first. Files ending in `*.api.spec.ts` run
+in the request-only `api` project; `*.ui.spec.ts` run in the chromium `ui` project.

package/dist/templates/fullstack-nest-svelte/tests/api/health.api.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "@playwright/test";
+
+// Health endpoints are public and present in every generated app.
+test("GET /health is public and ok @smoke", async ({ request }) => {
+  const res = await request.get("/api/health");
+  expect(res.ok()).toBeTruthy();
+  expect((await res.json()).status).toBe("ok");
+});
+
+test("GET /health/ready reports the database", async ({ request }) => {
+  const res = await request.get("/api/health/ready");
+  expect(res.status()).toBe(200);
+  expect((await res.json()).status).toBe("ready");
+});

package/dist/templates/fullstack-nest-svelte/tests/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{projectName}}-tests",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --project=ui",
+    "test:e2e:api": "playwright test --project=api",
+    "test:e2e:report": "playwright show-report"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1"
+  }
+}

package/dist/templates/fullstack-nest-svelte/tests/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// The suite runs against a live stack: web on E2E_BASE_URL (proxying /api/* to
+// the API). Start it first (see docs/testing.md) — locally via the dev harness,
+// in CI via scripts/e2e-ci.mjs. Two projects: `api` (request-only, backend e2e)
+// and `ui` (chromium, pages). Files are routed by suffix (*.api/*.ui.spec.ts).
+const baseURL = process.env.E2E_BASE_URL ?? "http://localhost:5173";
+
+export default defineConfig({
+  testDir: ".",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+  },
+  projects: [
+    { name: "api", testMatch: /.*\.api\.spec\.ts/ },
+    { name: "ui", testMatch: /.*\.ui\.spec\.ts/, use: { ...devices["Desktop Chrome"] } },
+  ],
+});

package/dist/templates/fullstack-nest-svelte/tests/ui/smoke.ui.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "@playwright/test";
+
+// Module-agnostic: the app responds at "/" (a page or a redirect to it).
+test("app is reachable @smoke", async ({ page }) => {
+  const res = await page.goto("/");
+  expect(res?.status()).toBeLessThan(400);
+  await expect(page.locator("body")).toBeVisible();
+});

package/dist/templates/modules/admin-dashboard/files/apps/web/src/app.d.ts

@@ -0,0 +1,23 @@
+import type { Locale } from "$lib/i18n/messages";
+
+export type SessionUser = {
+  id: string;
+  email: string;
+  name: string;
+  role?: string | null;
+  image?: string | null;
+  emailVerified?: boolean;
+  twoFactorEnabled?: boolean | null;
+};
+
+declare global {
+  namespace App {
+    interface Locals {
+      user: SessionUser | null;
+      session: { id: string; impersonatedBy?: string | null } | null;
+      locale: Locale;
+    }
+  }
+}
+
+export {};

package/dist/templates/modules/admin-dashboard/files/apps/web/src/hooks.server.ts

@@ -0,0 +1,20 @@
+import type { Handle } from "@sveltejs/kit";
+import { serverApiClient } from "$lib/server/api";
+import { resolveLocale } from "$lib/i18n/messages";
+
+export const handle: Handle = async ({ event, resolve }) => {
+  event.locals.locale = resolveLocale(event.cookies.get("locale"));
+  try {
+    const { data } = await serverApiClient(event).auth.getSession();
+    event.locals.user = (data?.user as App.Locals["user"]) ?? null;
+    event.locals.session = data?.session
+      ? { id: data.session.id, impersonatedBy: (data.session as { impersonatedBy?: string | null }).impersonatedBy ?? null }
+      : null;
+  } catch {
+    event.locals.user = null;
+    event.locals.session = null;
+  }
+  return resolve(event, {
+    transformPageChunk: ({ html }) => html.replace('lang="en"', `lang="${event.locals.locale}"`),
+  });
+};

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/app-sidebar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import * as Sidebar from "$lib/components/ui/sidebar";
+  import SidebarUserMenu from "./sidebar-user-menu.svelte";
+  import LayoutDashboardIcon from "@lucide/svelte/icons/layout-dashboard";
+  import UsersIcon from "@lucide/svelte/icons/users";
+  import MonitorSmartphoneIcon from "@lucide/svelte/icons/monitor-smartphone";
+  import ScrollTextIcon from "@lucide/svelte/icons/scroll-text";
+  import { getI18n } from "$lib/i18n";
+  import type { SessionUser } from "../../app.d.ts";
+  import type { Messages } from "$lib/i18n/messages";
+  import type { Component } from "svelte";
+
+  let { user, capabilities }: { user: SessionUser; capabilities?: { auditLog?: boolean } } = $props();
+  const i18n = getI18n();
+
+  type NavItem = { href: string; key: keyof Messages["nav"]; icon: Component; adminOnly?: boolean };
+  const items = $derived<NavItem[]>([
+    { href: "/admin", key: "overview", icon: LayoutDashboardIcon },
+    { href: "/admin/users", key: "users", icon: UsersIcon, adminOnly: true },
+    { href: "/admin/sessions", key: "sessions", icon: MonitorSmartphoneIcon, adminOnly: true },
+    ...(capabilities?.auditLog
+      ? [{ href: "/admin/audit", key: "audit", icon: ScrollTextIcon, adminOnly: true } as NavItem]
+      : []),
+  ]);
+  const visible = $derived(items.filter((item) => !item.adminOnly || user.role === "admin"));
+</script>
+
+<Sidebar.Root collapsible="icon">
+  <Sidebar.Header>
+    <div
+      data-testid="sidebar-brand"
+      class="flex items-center gap-2 overflow-hidden px-2 py-1 font-semibold whitespace-nowrap group-data-[collapsible=icon]:hidden"
+    >
+      {i18n.t.common.appName}
+    </div>
+  </Sidebar.Header>
+  <Sidebar.Content>
+    <Sidebar.Group>
+      <Sidebar.Menu>
+        {#each visible as item (item.href)}
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton isActive={page.url.pathname === item.href} tooltipContent={i18n.t.nav[item.key]}>
+              {#snippet child({ props })}
+                <a href={item.href} {...props}>
+                  <item.icon />
+                  <span>{i18n.t.nav[item.key]}</span>
+                </a>
+              {/snippet}
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+        {/each}
+      </Sidebar.Menu>
+    </Sidebar.Group>
+  </Sidebar.Content>
+  <Sidebar.Footer>
+    <SidebarUserMenu {user} />
+  </Sidebar.Footer>
+</Sidebar.Root>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/language-switch.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import { Button } from "$lib/components/ui/button";
+  import GlobeIcon from "@lucide/svelte/icons/globe";
+  import { getI18n } from "$lib/i18n";
+  import { LOCALES, localeNames, type Locale } from "$lib/i18n/messages";
+
+  const i18n = getI18n();
+
+  async function change(locale: Locale): Promise<void> {
+    document.cookie = `locale=${locale};path=/;max-age=31536000;samesite=lax`;
+    document.documentElement.lang = locale;
+    await invalidateAll();
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <Button {...props} variant="ghost" size="icon" aria-label={i18n.t.language.label}>
+        <GlobeIcon class="size-4" />
+      </Button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    {#each LOCALES as locale (locale)}
+      <DropdownMenu.Item onSelect={() => change(locale)} class={i18n.locale === locale ? "font-medium" : ""}>
+        {localeNames[locale]}
+      </DropdownMenu.Item>
+    {/each}
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/sidebar-user-menu.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import * as Sidebar from "$lib/components/ui/sidebar";
+  import UserAvatar from "./user-avatar.svelte";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import LogOutIcon from "@lucide/svelte/icons/log-out";
+  import UserIcon from "@lucide/svelte/icons/user";
+  import { api } from "$lib/api";
+  import { getI18n } from "$lib/i18n";
+  import type { SessionUser } from "../../app.d.ts";
+
+  let { user }: { user: SessionUser } = $props();
+  const i18n = getI18n();
+
+  async function signOut(): Promise<void> {
+    await api.auth.signOut();
+    await goto("/login", { invalidateAll: true });
+  }
+</script>
+
+<Sidebar.Menu>
+  <Sidebar.MenuItem>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Sidebar.MenuButton {...props} size="lg" class="data-[state=open]:bg-sidebar-accent">
+            <UserAvatar {user} class="size-8" />
+            <div class="flex flex-col text-left text-sm leading-tight">
+              <span class="truncate font-medium">{user.name}</span>
+              <span class="text-muted-foreground truncate text-xs">{user.email}</span>
+            </div>
+            <ChevronsUpDownIcon class="ml-auto size-4" />
+          </Sidebar.MenuButton>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" side="top" class="w-56">
+        <DropdownMenu.Item onSelect={() => goto("/admin/account")}><UserIcon class="mr-2 size-4" /> {i18n.t.nav.account}</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onSelect={signOut}><LogOutIcon class="mr-2 size-4" /> {i18n.t.nav.signOut}</DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/table-pagination.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import * as Pagination from "$lib/components/ui/pagination";
+
+  // Shared table footer: a count label plus shadcn-svelte pagination that appears
+  // only when the list spans more than one page. Bind `page` (1-based). For
+  // server-side lists pass `onPageChange` to refetch; client-side lists just bind.
+  type Props = {
+    count: number;
+    perPage?: number;
+    page?: number;
+    label?: string;
+    onPageChange?: (page: number) => void;
+  };
+  let { count, perPage = 5, page = $bindable(1), label, onPageChange }: Props = $props();
+</script>
+
+<div class="flex items-center justify-between gap-2">
+  {#if label}
+    <span class="text-muted-foreground shrink-0 text-sm whitespace-nowrap">{label}</span>
+  {/if}
+  {#if count > perPage}
+    <Pagination.Root {count} {perPage} bind:page {onPageChange}>
+      {#snippet children({ pages, currentPage })}
+        <Pagination.Content>
+          <Pagination.Item><Pagination.PrevButton /></Pagination.Item>
+          {#each pages as p (p.key)}
+            {#if p.type === "ellipsis"}
+              <Pagination.Item><Pagination.Ellipsis /></Pagination.Item>
+            {:else}
+              <Pagination.Item>
+                <Pagination.Link page={p} isActive={currentPage === p.value}>{p.value}</Pagination.Link>
+              </Pagination.Item>
+            {/if}
+          {/each}
+          <Pagination.Item><Pagination.NextButton /></Pagination.Item>
+        </Pagination.Content>
+      {/snippet}
+    </Pagination.Root>
+  {/if}
+</div>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/theme-toggle.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { setMode } from "mode-watcher";
+  import SunIcon from "@lucide/svelte/icons/sun";
+  import MoonIcon from "@lucide/svelte/icons/moon";
+  import MonitorIcon from "@lucide/svelte/icons/monitor";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import { Button } from "$lib/components/ui/button";
+  import { getI18n } from "$lib/i18n";
+
+  const i18n = getI18n();
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <Button {...props} variant="ghost" size="icon" aria-label={i18n.t.theme.toggle}>
+        <SunIcon class="size-4 dark:hidden" />
+        <MoonIcon class="hidden size-4 dark:block" />
+      </Button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    <DropdownMenu.Item onSelect={() => setMode("light")}><SunIcon class="mr-2 size-4" /> {i18n.t.theme.light}</DropdownMenu.Item>
+    <DropdownMenu.Item onSelect={() => setMode("dark")}><MoonIcon class="mr-2 size-4" /> {i18n.t.theme.dark}</DropdownMenu.Item>
+    <DropdownMenu.Item onSelect={() => setMode("system")}><MonitorIcon class="mr-2 size-4" /> {i18n.t.theme.system}</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/ui/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/ui/pagination/index.ts

@@ -0,0 +1,31 @@
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Previous from "./pagination-previous.svelte";
+import Next from "./pagination-next.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton, // old
+	NextButton, // old
+	Ellipsis,
+	Previous,
+	Next,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext,
+};