@podosoft/podokit 0.8.0 → 0.10.0

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),
+  };
+}

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

@@ -0,0 +1,81 @@
+// Built-in theme presets for the admin Appearance settings. A preset is a full
+// neutral+surface+accent base for light and dark; the admin can layer a
+// brand-color accent, a radius, and per-token overrides on top (see
+// apply-theme.ts). Two families ship:
+//  - shadcn bases/accents (hex from the official shadcn theme registry), and
+//  - popular code-editor palettes (Dracula, Nord, Solarized, Gruvbox,
+//    Catppuccin, Tokyo Night, Rosé Pine, One Dark, Everforest, Monokai, GitHub)
+//    that vary the background/foreground, not just the accent.
+// `default` = no override, so the app's own app.css tokens show through.
+
+/** The editable subset of theme tokens; apply-theme expands these to CSS vars. */
+export interface ThemeTokens {
+  background: string;
+  card: string;
+  foreground: string;
+  mutedForeground: string;
+  border: string;
+  secondary: string;
+  accent: string;
+  primary: string;
+  primaryForeground: string;
+}
+
+export interface ThemePreset {
+  key: string;
+  label: string;
+  /** null = leave this mode on the app.css defaults (the `default` preset). */
+  light: ThemeTokens | null;
+  dark: ThemeTokens | null;
+}
+
+export const themePresets: ThemePreset[] = [
+  { key: "default", label: "Default", light: null, dark: null },
+
+  // --- shadcn neutral bases (accent = neutral, background stays white/near-black) ---
+  { key: "zinc", label: "Zinc", light: { background: "#ffffff", card: "#ffffff", foreground: "#09090b", mutedForeground: "#71717a", border: "#e4e4e7", secondary: "#f4f4f5", accent: "#f4f4f5", primary: "#18181b", primaryForeground: "#fafafa" }, dark: { background: "#09090b", card: "#09090b", foreground: "#fafafa", mutedForeground: "#a1a1aa", border: "#27272a", secondary: "#27272a", accent: "#27272a", primary: "#fafafa", primaryForeground: "#18181b" } },
+  { key: "slate", label: "Slate", light: { background: "#ffffff", card: "#ffffff", foreground: "#020817", mutedForeground: "#64748b", border: "#e2e8f0", secondary: "#f1f5f9", accent: "#f1f5f9", primary: "#0f172a", primaryForeground: "#f8fafc" }, dark: { background: "#020817", card: "#020817", foreground: "#f8fafc", mutedForeground: "#94a3b8", border: "#1e293b", secondary: "#1e293b", accent: "#1e293b", primary: "#f8fafc", primaryForeground: "#0f172a" } },
+  { key: "stone", label: "Stone", light: { background: "#ffffff", card: "#ffffff", foreground: "#0c0a09", mutedForeground: "#78716c", border: "#e7e5e4", secondary: "#f5f5f4", accent: "#f5f5f4", primary: "#1c1917", primaryForeground: "#fafaf9" }, dark: { background: "#0c0a09", card: "#0c0a09", foreground: "#fafaf9", mutedForeground: "#a8a29e", border: "#292524", secondary: "#292524", accent: "#292524", primary: "#fafaf9", primaryForeground: "#1c1917" } },
+  { key: "gray", label: "Gray", light: { background: "#ffffff", card: "#ffffff", foreground: "#030712", mutedForeground: "#6b7280", border: "#e5e7eb", secondary: "#f3f4f6", accent: "#f3f4f6", primary: "#111827", primaryForeground: "#f9fafb" }, dark: { background: "#030712", card: "#030712", foreground: "#f9fafb", mutedForeground: "#9ca3af", border: "#1f2937", secondary: "#1f2937", accent: "#1f2937", primary: "#f9fafb", primaryForeground: "#111827" } },
+  { key: "neutral", label: "Neutral", light: { background: "#ffffff", card: "#ffffff", foreground: "#0a0a0a", mutedForeground: "#737373", border: "#e5e5e5", secondary: "#f5f5f5", accent: "#f5f5f5", primary: "#171717", primaryForeground: "#fafafa" }, dark: { background: "#0a0a0a", card: "#0a0a0a", foreground: "#fafafa", mutedForeground: "#a3a3a3", border: "#262626", secondary: "#262626", accent: "#262626", primary: "#fafafa", primaryForeground: "#171717" } },
+
+  // --- shadcn accent bases (colored primary on a neutral background) ---
+  { key: "blue", label: "Blue", light: { background: "#ffffff", card: "#ffffff", foreground: "#020817", mutedForeground: "#64748b", border: "#e2e8f0", secondary: "#f1f5f9", accent: "#f1f5f9", primary: "#2563eb", primaryForeground: "#f8fafc" }, dark: { background: "#020817", card: "#020817", foreground: "#f8fafc", mutedForeground: "#94a3b8", border: "#1e293b", secondary: "#1e293b", accent: "#1e293b", primary: "#3b82f6", primaryForeground: "#0f172a" } },
+  { key: "green", label: "Green", light: { background: "#ffffff", card: "#ffffff", foreground: "#09090b", mutedForeground: "#71717a", border: "#e4e4e7", secondary: "#f4f4f5", accent: "#f4f4f5", primary: "#16a34a", primaryForeground: "#f0fdf4" }, dark: { background: "#0c0a09", card: "#1c1917", foreground: "#f2f2f2", mutedForeground: "#a1a1aa", border: "#27272a", secondary: "#27272a", accent: "#292524", primary: "#22c55e", primaryForeground: "#052e16" } },
+  { key: "violet", label: "Violet", light: { background: "#ffffff", card: "#ffffff", foreground: "#030712", mutedForeground: "#6b7280", border: "#e5e7eb", secondary: "#f3f4f6", accent: "#f3f4f6", primary: "#7c3aed", primaryForeground: "#f9fafb" }, dark: { background: "#030712", card: "#030712", foreground: "#f9fafb", mutedForeground: "#9ca3af", border: "#1f2937", secondary: "#1f2937", accent: "#1f2937", primary: "#8b5cf6", primaryForeground: "#f9fafb" } },
+  { key: "rose", label: "Rose", light: { background: "#ffffff", card: "#ffffff", foreground: "#09090b", mutedForeground: "#71717a", border: "#e4e4e7", secondary: "#f4f4f5", accent: "#f4f4f5", primary: "#e11d48", primaryForeground: "#fff1f2" }, dark: { background: "#0c0a09", card: "#1c1917", foreground: "#f2f2f2", mutedForeground: "#a1a1aa", border: "#27272a", secondary: "#27272a", accent: "#292524", primary: "#e11d48", primaryForeground: "#fff1f2" } },
+
+  // --- popular code-editor palettes (distinct background/foreground, not just accent) ---
+  { key: "dracula", label: "Dracula", light: { background: "#f8f8f2", card: "#ffffff", foreground: "#282a36", mutedForeground: "#6272a4", border: "#e3e0f0", secondary: "#eeecf7", accent: "#e8e5f5", primary: "#7c5cbf", primaryForeground: "#ffffff" }, dark: { background: "#282a36", card: "#343746", foreground: "#f8f8f2", mutedForeground: "#6272a4", border: "#44475a", secondary: "#44475a", accent: "#4d5066", primary: "#bd93f9", primaryForeground: "#282a36" } },
+  { key: "nord", label: "Nord", light: { background: "#eceff4", card: "#ffffff", foreground: "#2e3440", mutedForeground: "#4c566a", border: "#d8dee9", secondary: "#e5e9f0", accent: "#dfe4ee", primary: "#5e81ac", primaryForeground: "#eceff4" }, dark: { background: "#2e3440", card: "#3b4252", foreground: "#eceff4", mutedForeground: "#7b88a1", border: "#434c5e", secondary: "#3b4252", accent: "#434c5e", primary: "#88c0d0", primaryForeground: "#2e3440" } },
+  { key: "solarized", label: "Solarized", light: { background: "#fdf6e3", card: "#fbf0d6", foreground: "#586e75", mutedForeground: "#93a1a1", border: "#eee8d5", secondary: "#eee8d5", accent: "#e7e0c8", primary: "#268bd2", primaryForeground: "#fdf6e3" }, dark: { background: "#002b36", card: "#073642", foreground: "#93a1a1", mutedForeground: "#657b83", border: "#0e4b59", secondary: "#073642", accent: "#0e4b59", primary: "#268bd2", primaryForeground: "#fdf6e3" } },
+  { key: "gruvbox", label: "Gruvbox", light: { background: "#fbf1c7", card: "#f9f5d7", foreground: "#3c3836", mutedForeground: "#7c6f64", border: "#ebdbb2", secondary: "#ebdbb2", accent: "#e3d5aa", primary: "#b57614", primaryForeground: "#fbf1c7" }, dark: { background: "#282828", card: "#32302f", foreground: "#ebdbb2", mutedForeground: "#a89984", border: "#504945", secondary: "#3c3836", accent: "#504945", primary: "#fabd2f", primaryForeground: "#282828" } },
+  { key: "catppuccin", label: "Catppuccin", light: { background: "#eff1f5", card: "#ffffff", foreground: "#4c4f69", mutedForeground: "#6c6f85", border: "#dce0e8", secondary: "#e6e9ef", accent: "#ccd0da", primary: "#8839ef", primaryForeground: "#eff1f5" }, dark: { background: "#1e1e2e", card: "#313244", foreground: "#cdd6f4", mutedForeground: "#a6adc8", border: "#45475a", secondary: "#313244", accent: "#45475a", primary: "#cba6f7", primaryForeground: "#1e1e2e" } },
+  { key: "tokyo-night", label: "Tokyo Night", light: { background: "#e1e2e7", card: "#ffffff", foreground: "#3760bf", mutedForeground: "#848cb5", border: "#c4c8da", secondary: "#d0d5e3", accent: "#c8cde0", primary: "#2e7de9", primaryForeground: "#ffffff" }, dark: { background: "#1a1b26", card: "#24283b", foreground: "#c0caf5", mutedForeground: "#565f89", border: "#292e42", secondary: "#24283b", accent: "#2f344d", primary: "#7aa2f7", primaryForeground: "#1a1b26" } },
+  { key: "rose-pine", label: "Rosé Pine", light: { background: "#faf4ed", card: "#fffaf3", foreground: "#575279", mutedForeground: "#797593", border: "#f2e9e1", secondary: "#fffaf3", accent: "#f2e9e1", primary: "#907aa9", primaryForeground: "#faf4ed" }, dark: { background: "#191724", card: "#1f1d2e", foreground: "#e0def4", mutedForeground: "#908caa", border: "#26233a", secondary: "#1f1d2e", accent: "#26233a", primary: "#c4a7e7", primaryForeground: "#191724" } },
+  { key: "one-dark", label: "One Dark", light: { background: "#fafafa", card: "#ffffff", foreground: "#383a42", mutedForeground: "#a0a1a7", border: "#e5e5e6", secondary: "#f0f0f0", accent: "#eaeaeb", primary: "#4078f2", primaryForeground: "#ffffff" }, dark: { background: "#282c34", card: "#21252b", foreground: "#abb2bf", mutedForeground: "#5c6370", border: "#3b4048", secondary: "#2c313a", accent: "#3b4048", primary: "#61afef", primaryForeground: "#282c34" } },
+  { key: "everforest", label: "Everforest", light: { background: "#fdf6e3", card: "#f4f0d9", foreground: "#5c6a72", mutedForeground: "#939f91", border: "#eae4cf", secondary: "#f4f0d9", accent: "#eae4cf", primary: "#8da101", primaryForeground: "#fdf6e3" }, dark: { background: "#2d353b", card: "#343f44", foreground: "#d3c6aa", mutedForeground: "#859289", border: "#3d484d", secondary: "#343f44", accent: "#3d484d", primary: "#a7c080", primaryForeground: "#2d353b" } },
+  { key: "monokai", label: "Monokai", light: { background: "#fafafa", card: "#ffffff", foreground: "#272822", mutedForeground: "#75715e", border: "#e6e6e6", secondary: "#f0f0f0", accent: "#eaeaea", primary: "#e6187f", primaryForeground: "#ffffff" }, dark: { background: "#272822", card: "#2f302a", foreground: "#f8f8f2", mutedForeground: "#75715e", border: "#414339", secondary: "#3e3d32", accent: "#414339", primary: "#f92672", primaryForeground: "#ffffff" } },
+  { key: "github", label: "GitHub", light: { background: "#ffffff", card: "#ffffff", foreground: "#1f2328", mutedForeground: "#656d76", border: "#d0d7de", secondary: "#f6f8fa", accent: "#eaeef2", primary: "#1f66d0", primaryForeground: "#ffffff" }, dark: { background: "#0d1117", card: "#161b22", foreground: "#e6edf3", mutedForeground: "#8b949e", border: "#30363d", secondary: "#161b22", accent: "#21262d", primary: "#2f81f7", primaryForeground: "#ffffff" } },
+];
+
+// Keep the first choice focused without removing any of the long-lived preset
+// keys. The Appearance screen shows these up front and puts the rest behind a
+// disclosure so a new user is not greeted by a 21-item wall of options.
+export const FEATURED_THEME_PRESET_KEYS = ["default", "neutral", "slate", "blue", "green", "violet"] as const;
+
+export const THEME_TOKEN_KEYS: readonly (keyof ThemeTokens)[] = [
+  "background",
+  "card",
+  "foreground",
+  "mutedForeground",
+  "border",
+  "secondary",
+  "accent",
+  "primary",
+  "primaryForeground",
+];
+
+export function findPreset(key: string | null | undefined): ThemePreset | undefined {
+  return themePresets.find((p) => p.key === key);
+}

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

@@ -7,6 +7,9 @@ export interface SiteSettings {
   supportEmail: string | null;
   footerText: string | null;
   brandColor: string | null;
+  themePreset: string | null;
+  themeRadius: string | null;
+  themeOverrides: string | null;
   termsUrl: string | null;
   privacyUrl: string | null;
   locale: string | null;
@@ -23,6 +26,9 @@ const empty: SiteSettings = {
   supportEmail: null,
   footerText: null,
   brandColor: null,
+  themePreset: null,
+  themeRadius: null,
+  themeOverrides: null,
   termsUrl: null,
   privacyUrl: null,
   locale: null,

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(app)/+layout.server.ts

@@ -1,3 +1,4 @@
+import { redirect } from "@sveltejs/kit";
 import type { LayoutServerLoad } from "./$types";
 import type { Capabilities } from "@podosoft/podokit-api-client";
 
@@ -26,5 +27,21 @@ export const load: LayoutServerLoad = async ({ locals, fetch }) => {
   } catch {
     /* keep defaults */
   }
+
+  // Require-two-factor policy: a signed-in user who hasn't enrolled is sent to the
+  // enrolment page until they do (the API's TwoFactorRequiredGuard is the real
+  // boundary; this is the UX). /setup-2fa lives outside this layout, so no loop.
+  const user = locals.user as (App.Locals["user"] & { twoFactorEnabled?: boolean }) | null;
+  let mustEnrol = false;
+  if (user && !user.twoFactorEnabled) {
+    try {
+      const res = await fetch("/api/account/require-2fa");
+      mustEnrol = res.ok && ((await res.json()) as { require2fa?: boolean }).require2fa === true;
+    } catch {
+      /* don't block the app if the policy check fails */
+    }
+  }
+  if (mustEnrol) redirect(302, "/setup-2fa");
+
   return { user: locals.user, impersonating: !!locals.session?.impersonatedBy, capabilities };
 };