@podosoft/podokit 0.9.0 → 0.10.1

package/dist/templates/fullstack-nest-svelte/apps/web/src/app.css

@@ -23,6 +23,14 @@
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.705 0.015 286.067);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
@@ -44,6 +52,14 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.92 0.004 286.32);
+  --sidebar-primary-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
 @theme inline {
@@ -69,6 +85,14 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --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 {
@@ -79,3 +103,21 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* shadcn-svelte sidebar active-state correction.
+ * Upstream (shadcn-svelte registry, `nova` style) styles the active item with
+ * the `data-active:` Tailwind variant, which matches attribute PRESENCE
+ * (`[data-active]`). The menu buttons always render `data-active="true|false"`,
+ * so the active look (accent background, accent text, medium weight) leaks onto
+ * EVERY item — nearly invisible in the default palette but glaring once a theme
+ * raises the contrast. We keep `ui/sidebar/*` as a pristine mirror of upstream
+ * (so `shadcn-svelte` updates apply cleanly) and correct the behaviour here:
+ * neutralize the resting state of non-active items, leaving hover/press feedback
+ * (their `:hover`/`:active` rules) untouched. Drop this once shadcn-svelte ships
+ * value-matching `data-[active=true]:` (canonical shadcn/ui already does). */
+[data-sidebar="menu-button"][data-active="false"]:not(:hover):not(:active),
+[data-sidebar="menu-sub-button"][data-active="false"]:not(:hover):not(:active) {
+  background-color: transparent;
+  color: var(--sidebar-foreground);
+  font-weight: 400;
+}

package/dist/templates/fullstack-nest-svelte/apps/web/src/lib/components/site-runtime.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // Modules can replace this managed component with global site behavior while
+  // the surrounding route layout remains application-owned.
+  import { ModeWatcher } from "mode-watcher";
+</script>
+
+<ModeWatcher />

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

@@ -1,14 +1,16 @@
 import type { RequestEvent } from "@sveltejs/kit";
 import { createApiClient, type ApiClient } from "@podosoft/podokit-api-client";
-import { backendBaseUrl } from "./backend-proxy";
+import { backendBaseUrl, normalizeClientIp } 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 clientIp = normalizeClientIp(event.getClientAddress());
   const fetchWithCookies: typeof fetch = (input, init) => {
     const headers = new Headers(init?.headers);
     if (cookie) headers.set("cookie", cookie);
+    if (clientIp) headers.set("x-forwarded-for", clientIp);
     return event.fetch(input, { ...init, headers });
   };
   return createApiClient({

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

@@ -12,7 +12,7 @@ export function backendBaseUrl(): string {
 // 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 {
+export 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);
@@ -37,7 +37,9 @@ export async function proxyRequest(
   const upstream = await fetch(targetUrl, {
     method: request.method,
     headers,
-    body: hasBody ? await request.text() : undefined,
+    // Preserve multipart uploads and other binary bodies byte-for-byte. Reading
+    // them as text corrupts bytes that are not valid UTF-8 before forwarding.
+    body: hasBody ? await request.arrayBuffer() : undefined,
     redirect: "manual",
   });
 

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

@@ -1,9 +1,9 @@
 <script lang="ts">
   import "../app.css";
-  import { ModeWatcher } from "mode-watcher";
+  import SiteRuntime from "$lib/components/site-runtime.svelte";
 
   let { children } = $props();
 </script>
 
-<ModeWatcher />
+<SiteRuntime />
 {@render children()}

package/dist/templates/fullstack-nest-svelte/compose.dev.yaml

@@ -48,6 +48,10 @@ services:
     environment:
       - VITE_DOCKER=1
       - BACKEND_INTERNAL_URL=http://api:5002
+      # One trusted Traefik proxy sits in front of SvelteKit. This keeps
+      # getClientAddress() tied to the visitor instead of the proxy container.
+      - ADDRESS_HEADER=x-forwarded-for
+      - XFF_DEPTH=1
       # Match Traefik's published port so HMR's WebSocket targets the right port
       # (default 80). Without this, HMR connects to :80 and a non-80 stack falls
       # back to a full page reload on every edit.

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

@@ -12,3 +12,9 @@ build/
 tests/playwright/
 tests/playwright-report/
 tests/test-results/
+playwright/.auth/
+playwright-report/
+test-results/
+
+# local performance reports
+output/lighthouse/

package/dist/templates/fullstack-nest-svelte/infra/k3s/configmap.yaml

@@ -8,3 +8,5 @@ data:
   PORT: "3000"
   CORS_ORIGIN: "https://example.com"
   BACKEND_INTERNAL_URL: "http://api:3000"
+  ADDRESS_HEADER: "x-forwarded-for"
+  XFF_DEPTH: "1"

package/dist/templates/fullstack-nest-svelte/infra/k3s/ingress.yaml

@@ -1,8 +1,18 @@
+apiVersion: traefik.io/v1alpha1
+kind: Middleware
+metadata:
+  name: compression
+  namespace: podokit
+spec:
+  compress: {}
+---
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
   name: app
   namespace: podokit
+  annotations:
+    traefik.ingress.kubernetes.io/router.middlewares: podokit-compression@kubernetescrd
 spec:
   rules:
     - host: example.com

package/dist/templates/fullstack-nest-svelte/infra/traefik/dynamic.yml

@@ -5,7 +5,11 @@ http:
     web:
       rule: "PathPrefix(`/`)"  # any host on this dedicated proxy -> web
       entryPoints: [web]
+      middlewares: [compression]
       service: web
+  middlewares:
+    compression:
+      compress: {}
   services:
     web:
       loadBalancer:

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

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "engines": {
-    "node": ">=20"
+    "node": ">=22.22.1"
   },
   "workspaces": [
     "apps/*",

package/dist/templates/modules/admin-dashboard/files/apps/api/src/site-settings/site-settings.controller.ts

@@ -26,6 +26,65 @@ const ALLOWED = new Set<string>(PUBLIC_SITE_KEYS);
 const MAX_ICON_BYTES = 1024 * 1024; // 1 MB
 const ICON_TYPES = new Set(["image/svg+xml", "image/png", "image/x-icon", "image/vnd.microsoft.icon"]);
 
+// Theme values are injected into a client-side <style>, so validate them to
+// prevent CSS injection. Colors must be hex, radius a bounded rem number,
+// preset a slug, and overrides a JSON map of hex colors under known token keys.
+const HEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const PRESET = /^[a-z0-9-]{1,32}$/;
+const THEME_TOKEN_KEYS = new Set([
+  "background",
+  "card",
+  "foreground",
+  "mutedForeground",
+  "border",
+  "secondary",
+  "accent",
+  "primary",
+  "primaryForeground",
+]);
+
+/** Validate/normalize a single theme setting value. Empty string clears it. */
+function validateThemeValue(key: string, value: string): string {
+  if (value === "") return "";
+  if (key === "brandColor") {
+    if (!HEX.test(value)) throw new BadRequestException("brandColor must be a hex color");
+    return value;
+  }
+  if (key === "themePreset") {
+    if (!PRESET.test(value)) throw new BadRequestException("Invalid themePreset");
+    return value;
+  }
+  if (key === "themeRadius") {
+    const n = Number(value);
+    if (!Number.isFinite(n) || n < 0 || n > 4) throw new BadRequestException("themeRadius must be 0–4");
+    return String(n);
+  }
+  if (key === "themeOverrides") {
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(value);
+    } catch {
+      throw new BadRequestException("themeOverrides must be valid JSON");
+    }
+    if (!parsed || typeof parsed !== "object") throw new BadRequestException("themeOverrides must be an object");
+    const out: Record<string, Record<string, string>> = {};
+    for (const mode of ["light", "dark"] as const) {
+      const block = (parsed as Record<string, unknown>)[mode];
+      if (block === undefined) continue;
+      if (!block || typeof block !== "object") throw new BadRequestException(`themeOverrides.${mode} must be an object`);
+      const clean: Record<string, string> = {};
+      for (const [k, v] of Object.entries(block as Record<string, unknown>)) {
+        if (!THEME_TOKEN_KEYS.has(k)) throw new BadRequestException(`Unknown theme token: ${k}`);
+        if (typeof v !== "string" || !HEX.test(v)) throw new BadRequestException(`themeOverrides.${mode}.${k} must be a hex color`);
+        clean[k] = v;
+      }
+      if (Object.keys(clean).length) out[mode] = clean;
+    }
+    return JSON.stringify(out);
+  }
+  return value;
+}
+
 @ApiTags("site")
 @Controller("site")
 export class SiteSettingsController {
@@ -53,7 +112,7 @@ export class SiteSettingsController {
     const update: Record<string, string> = {};
     for (const [key, value] of Object.entries(body ?? {})) {
       if (!ALLOWED.has(key)) throw new BadRequestException(`Unknown setting: ${key}`);
-      update[key] = String(value ?? "");
+      update[key] = validateThemeValue(key, String(value ?? ""));
     }
     return this.site.setMany(update);
   }

package/dist/templates/modules/admin-dashboard/files/apps/api/src/site-settings/site-settings.service.ts

@@ -18,6 +18,9 @@ export const PUBLIC_SITE_KEYS = [
   "supportEmail",
   "footerText",
   "brandColor",
+  "themePreset",
+  "themeRadius",
+  "themeOverrides",
   "termsUrl",
   "privacyUrl",
   "locale",

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

@@ -1,9 +1,18 @@
 import type { Handle } from "@sveltejs/kit";
 import { serverApiClient } from "$lib/server/api";
 import { resolveLocale } from "$lib/i18n/messages";
+import { applySearchIndexingHeaders } from "$lib/server/search-indexing";
 import type { SiteSettings } from "$lib/site.svelte";
 
 export const handle: Handle = async ({ event, resolve }) => {
+  // Static assets and API proxy requests do not render application layouts.
+  // Avoid multiplying settings/session API calls for every asset and proxied
+  // request; page and data routes still receive the complete runtime context.
+  if (event.route.id === null || event.url.pathname.startsWith("/api/")) {
+    const response = await resolve(event);
+    return applySearchIndexingHeaders(response, event.url.pathname);
+  }
+
   // Public site settings (branding, locale/timezone defaults, maintenance, …),
   // loaded once here and reused by the layout load. A visitor with no locale
   // cookie falls back to the admin-configured site locale, then the app default.
@@ -25,7 +34,8 @@ export const handle: Handle = async ({ event, resolve }) => {
     event.locals.user = null;
     event.locals.session = null;
   }
-  return resolve(event, {
+  const response = await resolve(event, {
     transformPageChunk: ({ html }) => html.replace('lang="en"', `lang="${event.locals.locale}"`),
   });
+  return applySearchIndexingHeaders(response, event.url.pathname);
 };

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/account-data.server.ts

@@ -0,0 +1,42 @@
+import type { Capabilities } from "@podosoft/podokit-api-client";
+
+type ServerFetch = (input: string | URL | Request, init?: RequestInit) => Promise<Response>;
+
+const defaultCapabilities: Capabilities = {
+  twoFactor: false,
+  providers: [],
+  deleteAccount: false,
+  auditLog: false,
+  emailVerification: false,
+  passwordBreachCheck: false,
+  magicLink: false,
+  emailOtp: false,
+  username: false,
+  multiSession: false,
+  phoneNumber: false,
+  apiKey: false,
+  passkey: false,
+  organization: false,
+  oidcProvider: false,
+  roles: ["admin", "user"],
+};
+
+export async function loadAccountData(locals: App.Locals, fetch: ServerFetch): Promise<{
+  user: App.Locals["user"];
+  currentSessionId: string | null;
+  capabilities: Capabilities;
+}> {
+  let capabilities = defaultCapabilities;
+  try {
+    const response = await fetch("/api/account/capabilities");
+    if (response.ok) capabilities = (await response.json()) as Capabilities;
+  } catch {
+    /* Keep safe defaults if the capability endpoint is unavailable. */
+  }
+
+  return {
+    user: locals.user,
+    currentSessionId: locals.session?.id ?? null,
+    capabilities,
+  };
+}

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { Button } from "$lib/components/ui/button";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import LayoutDashboardIcon from "@lucide/svelte/icons/layout-dashboard";
+  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";
+  import UserAvatar from "./user-avatar.svelte";
+
+  let { user }: { user: SessionUser | null } = $props();
+  const i18n = getI18n();
+
+  async function signOut(): Promise<void> {
+    await api.auth.signOut();
+    await goto("/login", { invalidateAll: true });
+  }
+</script>
+
+{#if user}
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger
+      class="hover:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 inline-flex size-8 items-center justify-center rounded-full outline-none focus-visible:ring-3"
+      aria-label={i18n.t.nav.account}
+    >
+      <UserAvatar {user} class="size-8" />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end" class="w-56">
+      <DropdownMenu.Label>
+        <span class="block truncate font-medium">{user.name}</span>
+        <span class="text-muted-foreground block truncate text-xs font-normal">{user.email}</span>
+      </DropdownMenu.Label>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item onSelect={() => goto("/account")}><UserIcon class="mr-2 size-4" /> {i18n.t.nav.account}</DropdownMenu.Item>
+      {#if user.role === "admin"}
+        <DropdownMenu.Item onSelect={() => goto("/admin")}><LayoutDashboardIcon class="mr-2 size-4" /> {i18n.t.common.appName}</DropdownMenu.Item>
+      {/if}
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item onSelect={signOut}><LogOutIcon class="mr-2 size-4" /> {i18n.t.nav.signOut}</DropdownMenu.Item>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+{:else}
+  <Button href="/login" variant="ghost">{i18n.t.auth.signIn}</Button>
+{/if}