@podosoft/podokit 0.9.0 → 0.10.0

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/settings/appearance-card.svelte

@@ -0,0 +1,371 @@
+<script lang="ts">
+  // Admin Appearance settings. Pending values stay inside the preview until
+  // the user saves, then apply across the app through the shared theme helper.
+  import Check from "@lucide/svelte/icons/check";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import Moon from "@lucide/svelte/icons/moon";
+  import RotateCcw from "@lucide/svelte/icons/rotate-ccw";
+  import Sun from "@lucide/svelte/icons/sun";
+  import X from "@lucide/svelte/icons/x";
+  import * as Card from "$lib/components/ui/card";
+  import { Button } from "$lib/components/ui/button";
+  import * as Collapsible from "$lib/components/ui/collapsible";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { toast } from "svelte-sonner";
+  import { api } from "$lib/api";
+  import { getI18n } from "$lib/i18n";
+  import { site, type SiteSettings } from "$lib/site.svelte";
+  import {
+    FEATURED_THEME_PRESET_KEYS,
+    THEME_TOKEN_KEYS,
+    findPreset,
+    themePresets,
+    type ThemePreset,
+    type ThemeTokens,
+  } from "$lib/site/themes";
+  import {
+    applyTheme,
+    buildVarString,
+    effectiveTokens,
+    parseOverrides,
+    type ThemeConfig,
+    type ThemeMode,
+    type ThemeOverrides,
+  } from "$lib/site/apply-theme";
+
+  const i18n = getI18n();
+  const t = $derived(i18n.t.general);
+  const featuredKeys: readonly string[] = FEATURED_THEME_PRESET_KEYS;
+  const featuredPresets = featuredKeys
+    .map((key) => findPreset(key))
+    .filter((item): item is ThemePreset => item !== undefined);
+  const additionalPresets = themePresets.filter((item) => !featuredKeys.includes(item.key));
+
+  const s = $derived(site.value);
+  let preset = $state("default");
+  let brandColor = $state("");
+  let radius = $state("");
+  let overrides = $state<ThemeOverrides>({ light: {}, dark: {} });
+  let moreThemesOpen = $state(false);
+  let advancedOpen = $state(false);
+  let previewMode = $state<ThemeMode>("light");
+  let advancedMode = $state<ThemeMode>("light");
+  let seeded = $state(false);
+
+  $effect(() => {
+    if (seeded) return;
+    preset = s.themePreset || "default";
+    brandColor = s.brandColor ?? "";
+    radius = s.themeRadius ?? "";
+    const parsed = parseOverrides(s.themeOverrides);
+    overrides = { light: { ...(parsed?.light ?? {}) }, dark: { ...(parsed?.dark ?? {}) } };
+    seeded = true;
+  });
+
+  const config = $derived<ThemeConfig>({
+    preset,
+    brandColor: brandColor || null,
+    radius: radius || null,
+    overrides,
+  });
+  const lightVars = $derived(buildVarString(effectiveTokens(config, "light"), config.brandColor, config.radius));
+  const darkVars = $derived(buildVarString(effectiveTokens(config, "dark"), config.brandColor, config.radius));
+
+  function tokenValue(mode: ThemeMode, key: keyof ThemeTokens): string {
+    return overrides[mode]?.[key] ?? findPreset(preset)?.[mode]?.[key] ?? "#808080";
+  }
+
+  function setToken(mode: ThemeMode, key: keyof ThemeTokens, value: string): void {
+    overrides = { ...overrides, [mode]: { ...(overrides[mode] ?? {}), [key]: value } };
+  }
+
+  function selectPreset(key: string): void {
+    preset = key;
+    overrides = { light: {}, dark: {} };
+  }
+
+  function radiusLabel(value: string): string {
+    if (value === "") return t.radiusDefault;
+    if (value === "0") return t.radiusNone;
+    if (value === "0.25") return t.radiusSmall;
+    if (value === "0.5") return t.radiusMedium;
+    return t.radiusLarge;
+  }
+
+  function cleanOverrides(): ThemeOverrides {
+    const pick = (value?: Partial<ThemeTokens>): Partial<ThemeTokens> | undefined => {
+      if (!value) return undefined;
+      const entries = Object.entries(value).filter(([, token]) => Boolean(token));
+      return entries.length ? (Object.fromEntries(entries) as Partial<ThemeTokens>) : undefined;
+    };
+    const result: ThemeOverrides = {};
+    const light = pick(overrides.light);
+    const dark = pick(overrides.dark);
+    if (light) result.light = light;
+    if (dark) result.dark = dark;
+    return result;
+  }
+
+  let saving = $state(false);
+  async function save(): Promise<void> {
+    saving = true;
+    try {
+      const cleaned = cleanOverrides();
+      const payload: Record<string, string> = {
+        themePreset: preset === "default" ? "" : preset,
+        brandColor,
+        themeRadius: radius,
+        themeOverrides: cleaned.light || cleaned.dark ? JSON.stringify(cleaned) : "",
+      };
+      await api.put("/site/settings", payload);
+      site.patch(payload as Partial<SiteSettings>);
+      applyTheme(config);
+      toast.success(t.saved);
+    } catch {
+      toast.error(t.saveError);
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function restoreDefaults(): Promise<void> {
+    preset = "default";
+    brandColor = "";
+    radius = "";
+    overrides = { light: {}, dark: {} };
+    await save();
+  }
+</script>
+
+<Card.Root>
+  <Card.Header class="gap-1.5 border-b border-border">
+    <Card.Title role="heading" aria-level={2}>{t.appearanceTitle}</Card.Title>
+    <Card.Description>{t.appearanceDesc}</Card.Description>
+  </Card.Header>
+
+  <Card.Content class="flex flex-col gap-8 pt-6">
+    <section class="flex flex-col gap-3" aria-labelledby="featured-themes-heading">
+      <div>
+        <h3 id="featured-themes-heading" class="text-sm font-medium">{t.featuredThemes}</h3>
+        <p class="text-muted-foreground mt-0.5 text-xs">{t.themePreset}</p>
+      </div>
+      <div class="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+        {#each featuredPresets as item (item.key)}
+          {@render presetButton(item)}
+        {/each}
+      </div>
+
+      <Collapsible.Root bind:open={moreThemesOpen}>
+        <Collapsible.Trigger
+          class="border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition-colors"
+        >
+          {moreThemesOpen ? t.hideThemes : t.moreThemes}
+          <ChevronDown class="size-4 transition-transform {moreThemesOpen ? 'rotate-180' : ''}" />
+        </Collapsible.Trigger>
+        <Collapsible.Content class="pt-3">
+          <div class="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+            {#each additionalPresets as item (item.key)}
+              {@render presetButton(item)}
+            {/each}
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </section>
+
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,0.8fr)_minmax(22rem,1.2fr)]">
+      <section class="flex flex-col gap-5" aria-labelledby="quick-settings-heading">
+        <h3 id="quick-settings-heading" class="text-sm font-medium">{t.quickSettings}</h3>
+
+        <div class="flex flex-col gap-2">
+          <Label for="accent-color">{t.accentColor}</Label>
+          <div class="flex items-center gap-2">
+            <Input
+              type="color"
+              value={brandColor || "#6d28d9"}
+              oninput={(event) => (brandColor = event.currentTarget.value)}
+              aria-label={t.accentColor}
+              class="size-10 shrink-0 cursor-pointer p-1"
+            />
+            <Input id="accent-color" bind:value={brandColor} placeholder="#6d28d9" class="max-w-36 font-mono" />
+            {#if brandColor}
+              <Button type="button" variant="ghost" size="icon" onclick={() => (brandColor = "")} aria-label={t.clearColor}>
+                <X class="size-4" />
+              </Button>
+            {/if}
+          </div>
+          <p class="text-muted-foreground text-xs leading-relaxed">{t.accentColorHint}</p>
+        </div>
+
+        <fieldset class="flex flex-col gap-2">
+          <legend class="text-sm font-medium">{t.radius}</legend>
+          <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+            {#each ["", "0", "0.25", "0.5", "1"] as value (value)}
+              <Button
+                type="button"
+                variant={radius === value ? "secondary" : "outline"}
+                class="justify-center"
+                aria-pressed={radius === value}
+                onclick={() => (radius = value)}
+              >
+                {radiusLabel(value)}
+              </Button>
+            {/each}
+          </div>
+          {#if radius && !["0", "0.25", "0.5", "1"].includes(radius)}
+            <p class="text-muted-foreground text-xs">{radius}rem</p>
+          {/if}
+        </fieldset>
+      </section>
+
+      <section class="flex flex-col gap-3" aria-labelledby="theme-preview-heading">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <h3 id="theme-preview-heading" class="text-sm font-medium">{t.preview}</h3>
+          <div class="bg-muted flex rounded-lg p-1" role="group" aria-label={t.preview}>
+            <Button
+              type="button"
+              variant={previewMode === "light" ? "secondary" : "ghost"}
+              size="sm"
+              class="h-8 gap-1.5"
+              aria-pressed={previewMode === "light"}
+              onclick={() => (previewMode = "light")}
+            >
+              <Sun class="size-3.5" />{t.previewLight}
+            </Button>
+            <Button
+              type="button"
+              variant={previewMode === "dark" ? "secondary" : "ghost"}
+              size="sm"
+              class="h-8 gap-1.5"
+              aria-pressed={previewMode === "dark"}
+              onclick={() => (previewMode = "dark")}
+            >
+              <Moon class="size-3.5" />{t.previewDark}
+            </Button>
+          </div>
+        </div>
+        {@render previewPanel(previewMode === "light" ? lightVars : darkVars, previewMode === "dark")}
+      </section>
+    </div>
+
+    <Collapsible.Root bind:open={advancedOpen}>
+      <Collapsible.Trigger
+        class="border-border hover:bg-muted flex w-full items-center justify-between rounded-lg border px-4 py-3 text-left text-sm font-medium transition-colors"
+      >
+        <span>{advancedOpen ? t.advancedHide : t.advanced}</span>
+        <ChevronDown class="size-4 transition-transform {advancedOpen ? 'rotate-180' : ''}" />
+      </Collapsible.Trigger>
+      <Collapsible.Content class="pt-4">
+        <div class="bg-muted/40 flex flex-col gap-4 rounded-lg border border-border p-4">
+          <div class="flex w-fit rounded-md border border-border bg-background p-1" role="group" aria-label={t.advanced}>
+            {#each ["light", "dark"] as mode (mode)}
+              <Button
+                type="button"
+                variant={advancedMode === mode ? "secondary" : "ghost"}
+                size="sm"
+                class="h-8"
+                aria-pressed={advancedMode === mode}
+                onclick={() => (advancedMode = mode as ThemeMode)}
+              >
+                {mode === "light" ? t.previewLight : t.previewDark}
+              </Button>
+            {/each}
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {#each THEME_TOKEN_KEYS as key (key)}
+              <div class="flex flex-col gap-1.5">
+                <Label for={`theme-${advancedMode}-${key}`}>{t.themeTokens[key]}</Label>
+                <div class="flex items-center gap-2">
+                  <Input
+                    type="color"
+                    value={tokenValue(advancedMode, key)}
+                    oninput={(event) => setToken(advancedMode, key, event.currentTarget.value)}
+                    aria-label={`${t.themeTokens[key]} ${advancedMode}`}
+                    class="size-9 shrink-0 cursor-pointer p-1"
+                  />
+                  <Input
+                    id={`theme-${advancedMode}-${key}`}
+                    value={tokenValue(advancedMode, key)}
+                    oninput={(event) => setToken(advancedMode, key, event.currentTarget.value)}
+                    class="min-w-0 font-mono text-xs"
+                  />
+                </div>
+              </div>
+            {/each}
+          </div>
+
+          <Button type="button" variant="outline" size="sm" class="w-fit gap-2" onclick={() => (overrides = { light: {}, dark: {} })}>
+            <RotateCcw class="size-3.5" />{t.resetTheme}
+          </Button>
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+
+    <div class="flex flex-wrap items-center gap-2 border-t border-border pt-6">
+      <Button onclick={save} disabled={saving}>{saving ? t.saving : t.saveTheme}</Button>
+      <Button variant="outline" onclick={restoreDefaults} disabled={saving}>{t.restoreDefaults}</Button>
+    </div>
+  </Card.Content>
+</Card.Root>
+
+{#snippet presetButton(item: ThemePreset)}
+  <Button
+    type="button"
+    variant="outline"
+    class="h-auto min-h-16 justify-start gap-3 px-3 py-2.5 text-left {preset === item.key ? 'border-primary bg-primary/5 ring-1 ring-primary' : ''}"
+    aria-pressed={preset === item.key}
+    onclick={() => selectPreset(item.key)}
+  >
+    {@render presetSwatch(item)}
+    <span class="min-w-0 flex-1 truncate">{item.label}</span>
+    {#if preset === item.key}<Check class="text-primary size-4 shrink-0" />{/if}
+  </Button>
+{/snippet}
+
+{#snippet presetSwatch(item: ThemePreset)}
+  <span class="border-border flex size-9 shrink-0 overflow-hidden rounded-md border" aria-hidden="true">
+    {#if item.light}
+      <span class="h-full w-1/2" style={`background:${item.light.background}`}></span>
+      <span class="h-full w-1/2" style={`background:${item.light.primary}`}></span>
+    {:else}
+      <span class="bg-background h-full w-1/2"></span>
+      <span class="bg-primary h-full w-1/2"></span>
+    {/if}
+  </span>
+{/snippet}
+
+{#snippet previewPanel(vars: string, dark: boolean)}
+  <div class="border-border overflow-hidden rounded-xl border">
+    <div class="bg-background text-foreground grid min-h-72 grid-cols-[5.5rem_1fr] sm:grid-cols-[9rem_1fr] {dark ? 'dark' : ''}" style={vars}>
+      <aside class="bg-sidebar text-sidebar-foreground border-sidebar-border flex flex-col gap-4 border-r p-3">
+        <div class="flex items-center gap-2 text-xs font-semibold">
+          <span class="bg-primary size-5 rounded-md"></span>
+          <span class="hidden truncate sm:inline">{t.previewApp}</span>
+        </div>
+        <div class="flex flex-col gap-1 text-xs">
+          <span class="text-muted-foreground rounded-md px-2 py-1.5">{t.previewNav}</span>
+          <span class="bg-sidebar-accent text-sidebar-accent-foreground rounded-md px-2 py-1.5">{t.previewSettings}</span>
+        </div>
+      </aside>
+      <div class="flex flex-col gap-4 p-4 sm:p-6">
+        <div class="space-y-1">
+          <p class="text-base font-semibold">{t.previewHeading}</p>
+          <p class="text-muted-foreground max-w-md text-xs leading-relaxed">{t.previewBody}</p>
+        </div>
+        <div class="bg-card text-card-foreground border-border flex flex-col gap-4 rounded-lg border p-4">
+          <div class="space-y-2">
+            <div class="bg-muted h-2.5 w-2/3 rounded-full"></div>
+            <div class="bg-muted h-2.5 w-1/2 rounded-full"></div>
+          </div>
+          <div class="border-input bg-background h-9 rounded-md border"></div>
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="bg-primary text-primary-foreground rounded-md px-3 py-2 text-xs font-medium">{t.previewPrimary}</span>
+            <span class="border-border rounded-md border px-3 py-2 text-xs">{t.previewOutline}</span>
+            <span class="bg-secondary text-secondary-foreground rounded-full px-2 py-1 text-[11px]">{t.previewBadge}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/snippet}

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

@@ -35,7 +35,7 @@
         {/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.Item onSelect={() => goto("/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>

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { ModeWatcher } from "mode-watcher";
+  import { site, type SiteSettings } from "$lib/site.svelte";
+  import { applyTheme, themeConfigFromSettings } from "$lib/site/apply-theme";
+
+  const loadedSite = $derived(
+    (page.data as { site?: Partial<SiteSettings> | null }).site,
+  );
+
+  // Seed the reactive site settings for every route without taking ownership of
+  // the application's root layout or public pages.
+  $effect.pre(() => site.init(loadedSite));
+
+  const branding = $derived({
+    name: site.value.name ?? loadedSite?.name ?? "",
+    description: site.value.description ?? loadedSite?.description ?? "",
+    hasFavicon: site.value.hasFavicon || Boolean(loadedSite?.hasFavicon),
+    faviconVersion: site.value.faviconVersion ?? loadedSite?.faviconVersion ?? "",
+  });
+
+  $effect(() => {
+    applyTheme(themeConfigFromSettings(site.value));
+  });
+</script>
+
+<svelte:head>
+  {#if branding.name}
+    <title>{branding.name}</title>
+  {/if}
+  {#if branding.description}
+    <meta name="description" content={branding.description} />
+  {/if}
+  {#if branding.hasFavicon}
+    <link rel="icon" href={`/api/site/favicon?v=${branding.faviconVersion}`} />
+  {/if}
+</svelte:head>
+
+<ModeWatcher />

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

@@ -1,17 +1,22 @@
-import { getContext, setContext } from "svelte";
+import { page } from "$app/state";
 import { site } from "$lib/site.svelte";
-import type { Locale, Messages } from "./messages";
-
-const KEY = Symbol("i18n");
+import { messages, resolveLocale, type Locale, type Messages } from "./messages";
 
 export type I18nContext = { readonly t: Messages; readonly locale: Locale };
 
-export function setI18nContext(ctx: I18nContext): void {
-  setContext(KEY, ctx);
+function currentLocale(): Locale {
+  return resolveLocale((page.data as { locale?: string }).locale);
 }
 
 export function getI18n(): I18nContext {
-  return getContext(KEY) as I18nContext;
+  return {
+    get t() {
+      return messages[currentLocale()];
+    },
+    get locale() {
+      return currentLocale();
+    },
+  };
 }
 
 // Fill {name}-style placeholders in a message.

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/i18n/messages.ts

@@ -126,6 +126,22 @@ const en = {
     faviconHint: "SVG (recommended) or a square PNG 512×512, ≤ 1 MB. Applied to every page.",
     iconSaved: "Icon updated.", iconError: "Failed to upload the icon.", iconTooBig: "Icon must be 1 MB or smaller.",
     brandColor: "Brand color",
+    appearanceTitle: "Appearance", appearanceDesc: "Choose the base colors and corner style for the app. Changes apply after you save.",
+    themePreset: "Base theme", featuredThemes: "Featured themes", moreThemes: "Show more themes", hideThemes: "Show fewer themes",
+    quickSettings: "Quick settings",
+    accentColor: "Brand color", accentColorHint: "Replaces the theme's primary color. Leave it empty to use the theme color.", clearColor: "Clear brand color",
+    radius: "Corner style", radiusDefault: "App default", radiusNone: "Square", radiusSmall: "Small", radiusMedium: "Medium", radiusLarge: "Large",
+    advanced: "Fine-tune colors", advancedHide: "Close color settings",
+    resetTheme: "Clear color adjustments", saveTheme: "Save changes", restoreDefaults: "Restore defaults",
+    preview: "Preview", previewLight: "Light", previewDark: "Dark",
+    previewApp: "Workspace", previewNav: "Overview", previewSettings: "Settings",
+    previewHeading: "Theme preview", previewBody: "Colors and corner styles are shown here before you save.",
+    previewPrimary: "Save", previewOutline: "Cancel", previewBadge: "Active",
+    themeTokens: {
+      background: "Background", card: "Card", foreground: "Foreground",
+      mutedForeground: "Muted text", border: "Border", secondary: "Secondary",
+      accent: "Accent", primary: "Primary", primaryForeground: "Primary text",
+    },
     infoTitle: "Site info", infoDesc: "Optional details used in meta tags, the footer, and links.",
     description: "Description", descriptionPlaceholder: "A short tagline for your site",
     supportEmail: "Support email", footerText: "Footer text",
@@ -461,6 +477,22 @@ const ko: Messages = {
     faviconHint: "SVG(권장) 또는 정사각 PNG 512×512, 1 MB 이하. 모든 페이지에 적용됩니다.",
     iconSaved: "아이콘을 변경했습니다.", iconError: "아이콘 업로드에 실패했습니다.", iconTooBig: "아이콘은 1 MB 이하여야 합니다.",
     brandColor: "브랜드 색상",
+    appearanceTitle: "화면 테마", appearanceDesc: "앱의 기본 색상과 모서리 형태를 설정합니다. 저장하면 모든 화면에 적용됩니다.",
+    themePreset: "기본 테마", featuredThemes: "주요 테마", moreThemes: "테마 더 보기", hideThemes: "테마 접기",
+    quickSettings: "빠른 설정",
+    accentColor: "브랜드 색상", accentColorHint: "선택한 테마의 주요 색상을 바꿉니다. 비우면 테마 색상을 사용합니다.", clearColor: "브랜드 색상 지우기",
+    radius: "모서리 형태", radiusDefault: "앱 기본값", radiusNone: "각지게", radiusSmall: "작게", radiusMedium: "보통", radiusLarge: "크게",
+    advanced: "세부 색상 설정", advancedHide: "세부 설정 닫기",
+    resetTheme: "세부 색상 지우기", saveTheme: "변경 저장", restoreDefaults: "기본값으로 복원",
+    preview: "미리보기", previewLight: "라이트", previewDark: "다크",
+    previewApp: "워크스페이스", previewNav: "대시보드", previewSettings: "설정",
+    previewHeading: "테마 미리보기", previewBody: "저장하기 전에 색상과 모서리 형태를 확인할 수 있습니다.",
+    previewPrimary: "저장", previewOutline: "취소", previewBadge: "사용 중",
+    themeTokens: {
+      background: "배경", card: "카드", foreground: "전경(글자)",
+      mutedForeground: "흐린 글자", border: "테두리", secondary: "보조",
+      accent: "강조", primary: "기본", primaryForeground: "기본 글자",
+    },
     infoTitle: "사이트 정보", infoDesc: "메타 태그·푸터·링크에 쓰이는 선택 항목입니다.",
     description: "설명", descriptionPlaceholder: "사이트를 한 줄로 소개",
     supportEmail: "지원 이메일", footerText: "푸터 문구",

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

@@ -0,0 +1,29 @@
+const NON_INDEXABLE_PATH_PREFIXES = [
+  "/api",
+  "/admin",
+  "/account",
+  "/login",
+  "/signup",
+  "/forgot-password",
+  "/reset-password",
+  "/verify-email",
+  "/setup-2fa",
+  "/oauth2",
+  "/accept-invitation",
+  "/maintenance",
+] as const;
+
+function matchesPathPrefix(pathname: string, prefix: string): boolean {
+  return pathname === prefix || pathname.startsWith(`${prefix}/`);
+}
+
+export function shouldPreventSearchIndexing(pathname: string): boolean {
+  return NON_INDEXABLE_PATH_PREFIXES.some((prefix) => matchesPathPrefix(pathname, prefix));
+}
+
+export function applySearchIndexingHeaders(response: Response, pathname: string): Response {
+  if (shouldPreventSearchIndexing(pathname)) {
+    response.headers.set("X-Robots-Tag", "noindex, nofollow");
+  }
+  return response;
+}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/site/apply-theme.ts

@@ -0,0 +1,124 @@
+// Computes the effective theme (preset neutrals ⊕ brand-color accent ⊕ radius ⊕
+// per-token overrides) and applies it. Two outputs share one var builder:
+//  - applyTheme(): injects a mode-scoped <style> (`:root:not(.dark)` / `:root.dark`)
+//    so light edits never touch dark and vice-versa. Removes it when nothing is set.
+//  - buildVarString(): the same CSS var text, for an inline preview container.
+import { findPreset, type ThemeTokens } from "./themes";
+import type { SiteSettings } from "../site.svelte";
+
+export type ThemeMode = "light" | "dark";
+export interface ThemeOverrides {
+  light?: Partial<ThemeTokens>;
+  dark?: Partial<ThemeTokens>;
+}
+export interface ThemeConfig {
+  preset: string | null;
+  brandColor: string | null;
+  radius: string | null;
+  overrides: ThemeOverrides | null;
+}
+
+const STYLE_ID = "podokit-theme";
+
+/** Merge preset base with per-token overrides for one mode. */
+export function effectiveTokens(config: ThemeConfig, mode: ThemeMode): Partial<ThemeTokens> {
+  const preset = findPreset(config.preset);
+  const base = (preset ? preset[mode] : null) ?? {};
+  const over = config.overrides?.[mode] ?? {};
+  return { ...base, ...over };
+}
+
+/** Build the CSS custom-property text for a mode. brandColor overrides primary;
+ *  radius (a plain rem number) is appended with its unit. Only present tokens emit. */
+export function buildVarString(tokens: Partial<ThemeTokens>, brandColor?: string | null, radius?: string | null): string {
+  const lines: string[] = [];
+  const set = (name: string, value?: string): void => {
+    if (value) lines.push(`--${name}: ${value};`);
+  };
+  set("background", tokens.background);
+  set("foreground", tokens.foreground);
+  set("card", tokens.card);
+  set("card-foreground", tokens.foreground);
+  set("popover", tokens.card);
+  set("popover-foreground", tokens.foreground);
+  set("muted-foreground", tokens.mutedForeground);
+  set("border", tokens.border);
+  set("input", tokens.border);
+  set("secondary", tokens.secondary);
+  set("secondary-foreground", tokens.foreground);
+  set("muted", tokens.secondary);
+  set("accent", tokens.accent);
+  set("accent-foreground", tokens.foreground);
+  const primary = (brandColor ?? "").trim() || tokens.primary;
+  set("primary", primary);
+  set("ring", primary);
+  set("primary-foreground", tokens.primaryForeground);
+  // Sidebar tokens (admin dashboard) — derive the whole set so the sidebar
+  // re-themes with the rest of the app, not just its accent.
+  set("sidebar", tokens.card);
+  set("sidebar-foreground", tokens.foreground);
+  set("sidebar-primary", primary);
+  set("sidebar-primary-foreground", tokens.primaryForeground);
+  set("sidebar-accent", tokens.secondary);
+  set("sidebar-accent-foreground", tokens.foreground);
+  set("sidebar-border", tokens.border);
+  set("sidebar-ring", primary);
+  const r = (radius ?? "").trim();
+  if (r) lines.push(`--radius: ${r}rem;`);
+  return lines.join(" ");
+}
+
+/** True when the config would set no custom properties (falls back to app.css). */
+export function isEmptyTheme(config: ThemeConfig): boolean {
+  return (
+    !buildVarString(effectiveTokens(config, "light"), config.brandColor, config.radius) &&
+    !buildVarString(effectiveTokens(config, "dark"), config.brandColor, config.radius)
+  );
+}
+
+/** Apply the theme globally via a mode-scoped stylesheet (client only). */
+export function applyTheme(config: ThemeConfig): void {
+  if (typeof document === "undefined") return;
+  const lightVars = buildVarString(effectiveTokens(config, "light"), config.brandColor, config.radius);
+  const darkVars = buildVarString(effectiveTokens(config, "dark"), config.brandColor, config.radius);
+  const existing = document.getElementById(STYLE_ID);
+  if (!lightVars && !darkVars) {
+    existing?.remove();
+    return;
+  }
+  const css =
+    (lightVars ? `:root:not(.dark) { ${lightVars} }\n` : "") + (darkVars ? `:root.dark { ${darkVars} }` : "");
+  const el = existing ?? document.head.appendChild(Object.assign(document.createElement("style"), { id: STYLE_ID }));
+  el.textContent = css;
+}
+
+/** Safely parse the stored themeOverrides JSON string into a typed object. */
+export function parseOverrides(json: string | null | undefined): ThemeOverrides | null {
+  if (!json) return null;
+  try {
+    const parsed: unknown = JSON.parse(json);
+    if (!parsed || typeof parsed !== "object") return null;
+    const pick = (v: unknown): Partial<ThemeTokens> | undefined => {
+      if (!v || typeof v !== "object") return undefined;
+      const out: Record<string, string> = {};
+      for (const [k, val] of Object.entries(v as Record<string, unknown>)) {
+        if (typeof val === "string") out[k] = val;
+      }
+      return out as Partial<ThemeTokens>;
+    };
+    const rec = parsed as Record<string, unknown>;
+    return { light: pick(rec.light), dark: pick(rec.dark) };
+  } catch {
+    return null;
+  }
+}
+
+/** Build a ThemeConfig from persisted site settings. */
+export function themeConfigFromSettings(s: SiteSettings): ThemeConfig {
+  return {
+    preset: s.themePreset,
+    brandColor: s.brandColor,
+    radius: s.themeRadius,
+    overrides: parseOverrides(s.themeOverrides),
+  };
+}