@podosoft/podokit 0.3.0 → 0.5.0

package/dist/templates/fullstack-nest-svelte/infra/docker/docker-compose.yml

@@ -1,4 +1,5 @@
 services:
+  # --- Runtime (always started by `docker compose up`) ---
   postgres:
     image: postgres:16-alpine
     environment:
@@ -15,8 +16,11 @@ services:
       timeout: 5s
       retries: 5
 
+  # --- Runtime, but only needed by cache/queue modules (redis, bullmq,
+  #     rate-limit, job-progress, sse). Start with: docker compose --profile cache up
   redis:
     image: redis:7-alpine
+    profiles: ["cache"]
     ports:
       - "${REDIS_PORT:-6379}:6379"
     healthcheck:
@@ -25,5 +29,38 @@ services:
       timeout: 5s
       retries: 5
 
+  # --- Development / testing tools (NOT for production) ---
+  #     Start with: docker compose --profile dev up
+  # Local email catcher: SMTP on 1025, web UI + REST API on 8025 (http://localhost:8025).
+  mailpit:
+    image: axllent/mailpit:latest
+    profiles: ["dev"]
+    ports:
+      - "${SMTP_PORT:-1025}:1025"
+      - "${MAILPIT_UI_PORT:-8025}:8025"
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:8025/readyz"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  # Local SMS catcher (the "Mailpit for SMS"): the app posts outgoing SMS here via
+  # SMS_WEBHOOK_URL and tests read them over REST. Development only.
+  sms-sink:
+    image: node:20-alpine
+    profiles: ["dev"]
+    command: ["node", "/app/sms-sink.mjs"]
+    environment:
+      PORT: "8095"
+    ports:
+      - "${SMS_SINK_PORT:-8095}:8095"
+    volumes:
+      - ./sms-sink.mjs:/app/sms-sink.mjs:ro
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:8095/readyz"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
 volumes:
   pgdata:

package/dist/templates/fullstack-nest-svelte/infra/docker/sms-sink.mjs

@@ -0,0 +1,40 @@
+// Dev/test SMS sink — the "Mailpit for SMS". The app posts outgoing SMS here
+// (via SMS_WEBHOOK_URL) instead of a real provider, and tests read them back
+// over REST. Development only; never runs in production (see the `dev` profile
+// in docker-compose.yml). Uses only Node built-ins, run on a stock node image.
+import { createServer } from "node:http";
+
+const PORT = Number(process.env.PORT ?? 8095);
+/** @type {{to: string, body: string, receivedAt: string}[]} */
+let messages = [];
+
+const send = (res, status, body) => {
+  res.writeHead(status, { "content-type": "application/json" });
+  res.end(JSON.stringify(body));
+};
+
+createServer((req, res) => {
+  const { method, url } = req;
+  if (method === "GET" && url === "/readyz") return send(res, 200, { status: "ok" });
+  if (method === "GET" && url === "/messages") return send(res, 200, messages);
+  if (method === "DELETE" && url === "/messages") {
+    messages = [];
+    return send(res, 200, { cleared: true });
+  }
+  if (method === "POST" && url === "/sms") {
+    let raw = "";
+    req.on("data", (c) => (raw += c));
+    req.on("end", () => {
+      let payload = {};
+      try {
+        payload = raw ? JSON.parse(raw) : {};
+      } catch {
+        payload = { body: raw };
+      }
+      messages.unshift({ to: payload.to ?? payload.phoneNumber ?? "", body: payload.body ?? payload.code ?? raw, receivedAt: new Date().toISOString() });
+      send(res, 202, { accepted: true });
+    });
+    return;
+  }
+  send(res, 404, { error: "not found" });
+}).listen(PORT, () => console.log(`[sms-sink] listening on ${PORT}`));

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:5001`, 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,15 @@
+{
+  "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",
+    "otpauth": "^9.5.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:5001";
+
+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,26 @@
+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;
+  username?: string | null;
+  phoneNumber?: string | null;
+  phoneNumberVerified?: 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,65 @@
+<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 Building2Icon from "@lucide/svelte/icons/building-2";
+  import SettingsIcon from "@lucide/svelte/icons/settings";
+  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; organization?: 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?.organization
+      ? [{ href: "/admin/organizations", key: "organizations", icon: Building2Icon, adminOnly: true } as NavItem]
+      : []),
+    ...(capabilities?.auditLog
+      ? [{ href: "/admin/audit", key: "audit", icon: ScrollTextIcon, adminOnly: true } as NavItem]
+      : []),
+    { href: "/admin/settings", key: "settings", icon: SettingsIcon, adminOnly: true },
+  ]);
+  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/data-table.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+  export type DataTableColumn<Row> = {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    class?: string;
+    // Value used for client-side sorting (defaults to row[key]). Use for nested
+    // or derived fields, e.g. (s) => s.user.email.
+    value?: (row: Row) => string | number | boolean | Date | null | undefined;
+  };
+  export type SortState = { key: string; dir: "asc" | "desc" };
+
+  // Shared page size for all admin tables — sized so a desktop viewport shows a
+  // full list at a glance (rather than the old 5-row pages). Change it here to
+  // retune every table at once.
+  export const DEFAULT_PAGE_SIZE = 15;
+</script>
+
+<script lang="ts" generics="Row">
+  import type { Snippet } from "svelte";
+  import { Button } from "$lib/components/ui/button";
+  import * as Table from "$lib/components/ui/table";
+  import TablePagination from "$lib/components/table-pagination.svelte";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+
+  // The one table used across the admin console: sortable headers + a shared
+  // pagination footer. Two modes:
+  //  - client (default): pass all `rows`; sorting + paging happen here.
+  //  - manual (server): set manualSort/manualPagination, pass `total`, and refetch
+  //    in `onChange` using the emitted sort + page.
+  type Props = {
+    columns: DataTableColumn<Row>[];
+    rows: Row[];
+    row: Snippet<[Row]>; // renders the <Table.Cell>s for one row
+    getKey?: (row: Row, index: number) => string | number;
+    empty?: string;
+    sort?: SortState | null;
+    manualSort?: boolean;
+    page?: number;
+    perPage?: number; // 0 => no pagination footer
+    total?: number; // server total (defaults to rows.length)
+    label?: string;
+    manualPagination?: boolean;
+    onChange?: (state: { sort: SortState | null; page: number }) => void;
+  };
+  let {
+    columns,
+    rows,
+    row,
+    getKey = (_r, i) => i,
+    empty = "No data.",
+    sort = $bindable(null),
+    manualSort = false,
+    page = $bindable(1),
+    perPage = 0,
+    total,
+    label,
+    manualPagination = false,
+    onChange,
+  }: Props = $props();
+
+  function toggle(col: DataTableColumn<Row>): void {
+    if (!col.sortable) return;
+    sort =
+      sort?.key === col.key
+        ? { key: col.key, dir: sort.dir === "asc" ? "desc" : "asc" }
+        : { key: col.key, dir: "asc" };
+    if (!manualPagination) page = 1;
+    onChange?.({ sort, page });
+  }
+
+  function cmp(a: unknown, b: unknown): number {
+    if (a == null && b == null) return 0;
+    if (a == null) return -1;
+    if (b == null) return 1;
+    if (typeof a === "number" && typeof b === "number") return a - b;
+    if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+    return String(a).localeCompare(String(b), undefined, { numeric: true });
+  }
+
+  const sorted = $derived.by(() => {
+    if (manualSort || !sort) return rows;
+    const active = sort;
+    const col = columns.find((c) => c.key === active.key);
+    const read = (r: Row) => (col?.value ? col.value(r) : (r as Record<string, unknown>)[active.key]);
+    const factor = active.dir === "asc" ? 1 : -1;
+    return [...rows].sort((a, b) => cmp(read(a), read(b)) * factor);
+  });
+  const view = $derived.by(() =>
+    perPage && !manualPagination ? sorted.slice((page - 1) * perPage, page * perPage) : sorted,
+  );
+  const count = $derived(total ?? rows.length);
+</script>
+
+<div class="rounded-md border">
+  <Table.Root>
+    <Table.Header>
+      <Table.Row>
+        {#each columns as col (col.key)}
+          <Table.Head
+            class={col.class}
+            aria-sort={sort?.key === col.key ? (sort.dir === "asc" ? "ascending" : "descending") : undefined}
+          >
+            {#if col.sortable}
+              <Button variant="ghost" size="sm" class="-mx-2 h-auto gap-1 px-2 py-1 font-medium" onclick={() => toggle(col)}>
+                {col.label}
+                {#if sort?.key === col.key}
+                  {#if sort.dir === "asc"}<ChevronUpIcon class="size-3.5" />{:else}<ChevronDownIcon class="size-3.5" />{/if}
+                {:else}
+                  <ChevronsUpDownIcon class="size-3.5 opacity-40" />
+                {/if}
+              </Button>
+            {:else}
+              {col.label}
+            {/if}
+          </Table.Head>
+        {/each}
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {#each view as r, i (getKey(r, i))}
+        <Table.Row>{@render row(r)}</Table.Row>
+      {:else}
+        <Table.Row>
+          <Table.Cell colspan={columns.length} class="text-muted-foreground py-8 text-center">{empty}</Table.Cell>
+        </Table.Row>
+      {/each}
+    </Table.Body>
+    <!-- Pagination lives in the table footer so every DataTable is consistent
+         top-to-bottom (sortable header, rows, footer pager). -->
+    {#if perPage}
+      <Table.Footer class="bg-transparent">
+        <Table.Row class="hover:bg-transparent">
+          <Table.Cell colspan={columns.length} class="py-2">
+            <TablePagination
+              {count}
+              {perPage}
+              bind:page
+              {label}
+              onPageChange={manualPagination ? (p) => onChange?.({ sort, page: p }) : undefined}
+            />
+          </Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    {/if}
+  </Table.Root>
+</div>

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,39 @@
+<script lang="ts">
+  import * as Pagination from "$lib/components/ui/pagination";
+
+  // Shared table footer: a count label plus shadcn-svelte pagination. The pager
+  // is always shown (even for a single page or an empty list) so the footer stays
+  // consistent across tables. 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}
+  <Pagination.Root count={Math.max(count, 1)} {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>
+</div>