@svadmin/core 0.31.0 → 0.32.0

package/src/theme.svelte.ts

@@ -202,25 +202,6 @@ function resolvePreset(preset: ColorPreset | string): ColorPreset | undefined {
   return preset;
 }
 
-/** Apply a color preset's CSS variables based on current resolved theme. */
-let activePresetVars: string[] = [];
-
-function applyColorPreset(preset: ColorPreset): void {
-  if (typeof document === 'undefined') return;
-  const resolved = mode === 'system' ? getSystemPreference() : mode;
-  const vars = resolved === 'dark' ? preset.dark : preset.light;
-  const root = document.documentElement;
-  for (const key of activePresetVars) {
-    root.style.removeProperty(key);
-  }
-  activePresetVars = [];
-  for (const [key, value] of Object.entries(vars)) {
-    const cssVar = key.startsWith('--') ? key : `--${key}`;
-    root.style.setProperty(cssVar, value);
-    activePresetVars.push(cssVar);
-  }
-}
-
 /** Get all available color presets (built-in + registered). */
 export function getColorPresets(): ColorPreset[] {
   return Object.values(builtinPresets);
@@ -239,136 +220,224 @@ export interface ThemeConfig {
   layoutPreset?: 'default' | 'clean-flat';
 }
 
+/** Explicit document-level values contributed by one mounted AdminApp. */
+export interface ThemeOwnerOptions {
+  themeConfig?: ThemeConfig;
+  defaultTheme?: ThemeMode;
+}
+
+/** Opaque identity used to update or unregister a mounted theme owner. */
+export type ThemeOwnerToken = symbol;
+
 const STORAGE_KEY = 'svadmin-theme';
 const COLOR_STORAGE_KEY = 'svadmin-color-theme';
 
-// ── Theme configuration ──────────────────────────────────
+interface ThemeOwnerEntry {
+  token: ThemeOwnerToken;
+  options: ThemeOwnerOptions;
+}
+
+let legacyThemeConfig: ThemeConfig = {};
 let themeConfig: ThemeConfig = {};
+let themeOwners: ThemeOwnerEntry[] = [];
+let activePresetVars: string[] = [];
+let activeCssOverrideVars: string[] = [];
+let colorSelectionOverridesConfig = false;
+
+function cloneColorPreset(preset: ColorPreset): ColorPreset {
+  return {
+    ...preset,
+    light: { ...preset.light },
+    dark: { ...preset.dark },
+  };
+}
 
-/**
- * Configure the theme system. Must be called before setTheme() or
- * automatically via AdminApp's themeConfig prop.
- */
-export function configureTheme(config: ThemeConfig): void {
-  themeConfig = { ...themeConfig, ...config };
-  applyTheme(mode);
-  if (config.colorPreset) {
-    const preset = resolvePreset(config.colorPreset);
-    if (preset) {
-      colorTheme = preset.name as ColorTheme;
-      if (typeof window !== 'undefined') {
-        try { localStorage.setItem(COLOR_STORAGE_KEY, preset.name); } catch { /* intentional */}
-      }
-      applyColorTheme(preset.name as ColorTheme);
-      applyColorPreset(preset);
-    }
-  }
-  if (config.cssOverrides) {
-    applyCssOverrides(config.cssOverrides);
-  }
+function cloneThemeConfig(config: ThemeConfig = {}): ThemeConfig {
+  const cloned = { ...config };
+  if (config.cssOverrides) cloned.cssOverrides = { ...config.cssOverrides };
+  if (typeof config.colorPreset === 'object') cloned.colorPreset = cloneColorPreset(config.colorPreset);
+  return cloned;
 }
 
-/** Get current theme configuration */
-export function getThemeConfig(): ThemeConfig {
-  return { ...themeConfig };
+function cloneOwnerOptions(options: ThemeOwnerOptions): ThemeOwnerOptions {
+  return {
+    defaultTheme: options.defaultTheme,
+    themeConfig: options.themeConfig === undefined
+      ? undefined
+      : cloneThemeConfig(options.themeConfig),
+  };
 }
 
-function applyCssOverrides(overrides: Record<string, string>): void {
-  if (typeof document === 'undefined') return;
-  const root = document.documentElement;
-  for (const [key, value] of Object.entries(overrides)) {
-    const cssVar = key.startsWith('--') ? key : `--${key}`;
-    root.style.setProperty(cssVar, value);
-  }
+function isExplicitOwner(options: ThemeOwnerOptions): boolean {
+  return options.themeConfig !== undefined || options.defaultTheme !== undefined;
 }
 
-/** Remove previously applied CSS overrides */
-export function clearCssOverrides(keys?: string[]): void {
-  if (typeof document === 'undefined') return;
-  const root = document.documentElement;
-  if (keys) {
-    for (const key of keys) {
-      const cssVar = key.startsWith('--') ? key : `--${key}`;
-      root.style.removeProperty(cssVar);
-    }
-  } else if (themeConfig.cssOverrides) {
-    for (const key of Object.keys(themeConfig.cssOverrides)) {
-      const cssVar = key.startsWith('--') ? key : `--${key}`;
-      root.style.removeProperty(cssVar);
-    }
+function getActiveOwner(): ThemeOwnerEntry | undefined {
+  for (let index = themeOwners.length - 1; index >= 0; index -= 1) {
+    const owner = themeOwners[index];
+    if (isExplicitOwner(owner.options)) return owner;
   }
+  return undefined;
 }
 
-// ── Color themes (display metadata, derived from presets) ──
-const _colorThemesCache: { id: ColorTheme | string; label: string; color: string }[] = $derived(Object.values(builtinPresets).map(p => ({
-  id: p.name as ColorTheme,
-  label: p.label,
-  color: p.color,
-})));
+function getStorage(): Storage | undefined {
+  if (typeof window === 'undefined') return undefined;
+  try {
+    return window.localStorage;
+  } catch {
+    return undefined;
+  }
+}
 
-export function getColorThemes() {
-  return _colorThemesCache;
+function readStoredTheme(): ThemeMode | undefined {
+  const stored = getStorage()?.getItem(STORAGE_KEY);
+  return stored === 'light' || stored === 'dark' || stored === 'system' ? stored : undefined;
 }
 
-// ── Dark/Light mode ──────────────────────────────────────
+function readStoredColorTheme(): ColorTheme {
+  const stored = getStorage()?.getItem(COLOR_STORAGE_KEY);
+  return stored && builtinPresets[stored] ? stored as ColorTheme : 'blue';
+}
 
-function getStoredTheme(): ThemeMode {
-  if (typeof window === 'undefined') return 'system';
-  try { return (localStorage.getItem(STORAGE_KEY) as ThemeMode) ?? 'system'; } catch { return 'system'; }
+function persistSelection(key: string, value: string): void {
+  const storage = getStorage();
+  if (!storage || storage.getItem(key) === value) return;
+  storage.setItem(key, value);
 }
 
+let selectedMode = readStoredTheme();
+let mode = $state<ThemeMode>(selectedMode ?? 'system');
+const initialColorTheme = readStoredColorTheme();
+let selectedColorTheme = $state<ColorTheme>(initialColorTheme);
+let colorTheme = $state<ColorTheme>(initialColorTheme);
+
 function getSystemPreference(): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'light';
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
-let mode = $state<ThemeMode>(getStoredTheme());
+function removeCssProperties(keys: string[]): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  for (const key of keys) root.style.removeProperty(key);
+}
 
-function applyTheme(m: ThemeMode): void {
-  const resolved = m === 'system' ? getSystemPreference() : m;
+function clearAppliedArtifacts(): void {
   if (typeof document === 'undefined') return;
+  const root = document.documentElement;
 
-  const strategy = themeConfig.strategy ?? 'standard';
-  const el = document.documentElement;
-  
-  // Apply clean-flat layout preset class to html
-  if (themeConfig.layoutPreset === 'clean-flat') {
-    el.classList.add('layout-clean-flat');
-  } else {
-    el.classList.remove('layout-clean-flat');
-  }
+  removeCssProperties(activeCssOverrideVars);
+  removeCssProperties(activePresetVars);
+  activeCssOverrideVars = [];
+  activePresetVars = [];
+  root.classList.remove('layout-clean-flat', 'light', 'dark');
+  root.style.removeProperty('color-scheme');
+  root.removeAttribute('data-theme');
+}
+
+function applyThemeClasses(themeMode: ThemeMode, config: ThemeConfig): void {
+  if (typeof document === 'undefined') return;
+  const resolved = themeMode === 'system' ? getSystemPreference() : themeMode;
+  const strategy = config.strategy ?? 'standard';
+  const root = document.documentElement;
 
+  root.classList.toggle('layout-clean-flat', config.layoutPreset === 'clean-flat');
   if (strategy === 'dark-first') {
-    // Dark-first: default is dark, add 'light' class for light mode
-    el.classList.toggle('light', resolved === 'light');
-    el.classList.remove('dark'); // ensure no conflict
+    root.classList.toggle('light', resolved === 'light');
+    root.classList.remove('dark');
   } else {
-    // Standard: default is light, add 'dark' class for dark mode
-    el.classList.toggle('dark', resolved === 'dark');
-    el.classList.remove('light'); // ensure no conflict
+    root.classList.toggle('dark', resolved === 'dark');
+    root.classList.remove('light');
+  }
+
+  if (!config.disableColorScheme) root.style.colorScheme = resolved;
+}
+
+function applyColorPreset(preset: ColorPreset, themeMode: ThemeMode): void {
+  if (typeof document === 'undefined') return;
+  const resolved = themeMode === 'system' ? getSystemPreference() : themeMode;
+  const variables = resolved === 'dark' ? preset.dark : preset.light;
+  const root = document.documentElement;
+
+  for (const [key, value] of Object.entries(variables)) {
+    const cssVar = key.startsWith('--') ? key : '--' + key;
+    root.style.setProperty(cssVar, value);
+    activePresetVars.push(cssVar);
   }
+}
+
+function applyCssOverrides(overrides: Record<string, string>): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
 
-  // Set color-scheme attribute unless disabled
-  if (!themeConfig.disableColorScheme) {
-    el.style.colorScheme = resolved;
+  for (const [key, value] of Object.entries(overrides)) {
+    const cssVar = key.startsWith('--') ? key : '--' + key;
+    root.style.setProperty(cssVar, value);
+    activeCssOverrideVars.push(cssVar);
   }
 }
 
-// Apply on init (browser only)
-if (typeof window !== 'undefined') {
-  applyTheme(getStoredTheme());
+function applyEffectiveTheme(): void {
+  const owner = getActiveOwner();
+  const nextConfig = owner
+    ? cloneThemeConfig(owner.options.themeConfig)
+    : cloneThemeConfig(legacyThemeConfig);
+  const nextMode = selectedMode ?? owner?.options.defaultTheme ?? 'system';
+  const configuredPreset = !colorSelectionOverridesConfig && nextConfig.colorPreset
+    ? resolvePreset(nextConfig.colorPreset)
+    : undefined;
+  const preset = configuredPreset ?? builtinPresets[selectedColorTheme];
+
+  themeConfig = nextConfig;
+  mode = nextMode;
+  colorTheme = (preset?.name ?? selectedColorTheme) as ColorTheme;
+
+  if (typeof document === 'undefined') return;
+  clearAppliedArtifacts();
+  applyThemeClasses(mode, themeConfig);
+  document.documentElement.setAttribute('data-theme', colorTheme);
+  if (preset) applyColorPreset(preset, mode);
+  if (themeConfig.cssOverrides) applyCssOverrides(themeConfig.cssOverrides);
+}
+
+/**
+ * Configure the legacy document owner. Configuration is replaced as a whole;
+ * mounted explicit owners continue to take precedence until they unregister.
+ */
+export function configureTheme(config: ThemeConfig): void {
+  legacyThemeConfig = cloneThemeConfig(config);
+  colorSelectionOverridesConfig = false;
+  if (!getActiveOwner()) applyEffectiveTheme();
 }
 
-// Listen for system preference changes
-if (typeof window !== 'undefined') {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    if (mode === 'system') {
-      applyTheme('system');
-      // Re-apply color preset for new resolved mode (light/dark values differ)
-      const preset = builtinPresets[colorTheme];
-      if (preset) applyColorPreset(preset);
+/** Get current effective theme configuration. */
+export function getThemeConfig(): ThemeConfig {
+  return cloneThemeConfig(themeConfig);
+}
+
+/** Remove previously applied CSS overrides. */
+export function clearCssOverrides(keys?: string[]): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+
+  if (keys) {
+    for (const key of keys) {
+      const cssVar = key.startsWith('--') ? key : '--' + key;
+      root.style.removeProperty(cssVar);
+      activeCssOverrideVars = activeCssOverrideVars.filter((activeKey) => activeKey !== cssVar);
     }
-  });
+  } else {
+    removeCssProperties(activeCssOverrideVars);
+    activeCssOverrideVars = [];
+  }
+}
+
+export function getColorThemes() {
+  return Object.values(builtinPresets).map((preset) => ({
+    id: preset.name as ColorTheme,
+    label: preset.label,
+    color: preset.color,
+  }));
 }
 
 export function getTheme(): ThemeMode {
@@ -376,14 +445,9 @@ export function getTheme(): ThemeMode {
 }
 
 export function setTheme(newMode: ThemeMode): void {
-  mode = newMode;
-  if (typeof window !== 'undefined') {
-    try { localStorage.setItem(STORAGE_KEY, newMode); } catch { /* intentional */}
-  }
-  applyTheme(newMode);
-  // Re-apply color preset — light/dark CSS variable overrides differ
-  const preset = builtinPresets[colorTheme];
-  if (preset) applyColorPreset(preset);
+  selectedMode = newMode;
+  persistSelection(STORAGE_KEY, newMode);
+  applyEffectiveTheme();
 }
 
 export function toggleTheme(): void {
@@ -391,59 +455,89 @@ export function toggleTheme(): void {
   setTheme(resolved === 'dark' ? 'light' : 'dark');
 }
 
-/** Resolved theme (always 'light' or 'dark', never 'system') */
+/** Resolved theme (always 'light' or 'dark', never 'system'). */
 export function getResolvedTheme(): 'light' | 'dark' {
   return mode === 'system' ? getSystemPreference() : mode;
 }
 
-// ── Color theme ──────────────────────────────────────────
+export function getColorTheme(): ColorTheme {
+  return colorTheme;
+}
 
-function getStoredColorTheme(): ColorTheme {
-  if (typeof window === 'undefined') return 'blue';
-  try { return (localStorage.getItem(COLOR_STORAGE_KEY) as ColorTheme) ?? 'blue'; } catch { return 'blue'; }
+export function setColorTheme(nextColorTheme: ColorTheme): void {
+  selectedColorTheme = nextColorTheme;
+  colorSelectionOverridesConfig = true;
+  persistSelection(COLOR_STORAGE_KEY, nextColorTheme);
+  applyEffectiveTheme();
 }
 
-let colorTheme = $state<ColorTheme>(getStoredColorTheme());
+/**
+ * Register a browser-only document owner. Owners with omitted values remain
+ * inert, allowing a mounted AdminApp to activate the same token after prop updates.
+ */
+export function registerThemeOwner(options: ThemeOwnerOptions): ThemeOwnerToken | undefined {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return undefined;
+
+  const token = Symbol('svadmin-theme-owner');
+  const entry = { token, options: cloneOwnerOptions(options) };
+  themeOwners.push(entry);
 
-function applyColorTheme(ct: ColorTheme): void {
-  if (typeof document !== 'undefined') {
-    document.documentElement.setAttribute('data-theme', ct);
+  if (isExplicitOwner(entry.options)) {
+    colorSelectionOverridesConfig = false;
+    applyEffectiveTheme();
   }
-}
 
-// Apply on init (browser only)
-if (typeof window !== 'undefined') {
-  applyColorTheme(getStoredColorTheme());
-  const initPreset = builtinPresets[getStoredColorTheme()];
-  if (initPreset) applyColorPreset(initPreset);
+  return token;
 }
 
-export function getColorTheme(): ColorTheme {
-  return colorTheme;
+/** Update one mounted owner without changing its stack order. */
+export function updateThemeOwner(
+  token: ThemeOwnerToken | undefined,
+  options: ThemeOwnerOptions,
+): void {
+  if (!token || typeof window === 'undefined' || typeof document === 'undefined') return;
+  const owner = themeOwners.find((entry) => entry.token === token);
+  if (!owner) return;
+
+  const wasExplicit = isExplicitOwner(owner.options);
+  owner.options = cloneOwnerOptions(options);
+  if (wasExplicit || isExplicitOwner(owner.options)) {
+    colorSelectionOverridesConfig = false;
+    applyEffectiveTheme();
+  }
 }
 
-export function setColorTheme(ct: ColorTheme): void {
-  colorTheme = ct;
-  if (typeof window !== 'undefined') {
-    try { localStorage.setItem(COLOR_STORAGE_KEY, ct); } catch { /* intentional */}
+/** Remove an owner safely regardless of its position in the stack. */
+export function unregisterThemeOwner(token: ThemeOwnerToken | undefined): void {
+  if (!token || typeof window === 'undefined' || typeof document === 'undefined') return;
+  const index = themeOwners.findIndex((entry) => entry.token === token);
+  if (index === -1) return;
+
+  const [removed] = themeOwners.splice(index, 1);
+  if (isExplicitOwner(removed.options)) {
+    colorSelectionOverridesConfig = false;
+    applyEffectiveTheme();
   }
-  applyColorTheme(ct);
-  const preset = builtinPresets[ct];
-  if (preset) applyColorPreset(preset);
 }
 
 export function resetTheme(): void {
-  mode = getStoredTheme();
-  colorTheme = getStoredColorTheme();
+  selectedMode = readStoredTheme();
+  selectedColorTheme = readStoredColorTheme();
+  mode = selectedMode ?? 'system';
+  colorTheme = selectedColorTheme;
+  legacyThemeConfig = {};
   themeConfig = {};
-  if (typeof document !== 'undefined') {
-    for (const key of activePresetVars) {
-      document.documentElement.style.removeProperty(key);
-    }
+  themeOwners = [];
+  colorSelectionOverridesConfig = false;
+  applyEffectiveTheme();
+}
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  applyEffectiveTheme();
+
+  if (typeof window.matchMedia === 'function') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (mode === 'system') applyEffectiveTheme();
+    });
   }
-  activePresetVars = [];
-  applyTheme(mode);
-  applyColorTheme(colorTheme);
-  const preset = builtinPresets[colorTheme];
-  if (preset) applyColorPreset(preset);
 }

package/src/toast.svelte.ts

@@ -1,4 +1,3 @@
-/* eslint-disable svelte/prefer-svelte-reactivity */
 export type ToastType = 'success' | 'error' | 'info' | 'warning' | 'undoable';
 
 export interface ToastItem {
@@ -18,7 +17,7 @@ let queue = $state<ToastItem[]>([]);
 export function getToastQueue() { return queue; }
 export function consumeToastQueue() { queue = []; }
 
-let promiseQueue = $state<{ id: number; promise: Promise<any>; opts: { loading: string; success: string; error: string } }[]>([]);
+let promiseQueue = $state<{ id: number; promise: Promise<unknown>; opts: { loading: string; success: string; error: string } }[]>([]);
 export function getPromiseQueue() { return promiseQueue; }
 export function consumePromiseQueue() { promiseQueue = []; }
 

package/src/types.ts

@@ -1,18 +1,40 @@
 // Core type definitions — DataProvider + AuthProvider + Providers
 
+import type { Component } from 'svelte';
+
 // ─── HttpError ─────────────────────────────────────────────────
 
 export type ValidationErrors = Record<string, string | string[]>;
 
+export interface HttpErrorOptions {
+  code?: string;
+  details?: unknown;
+  body?: unknown;
+  cause?: unknown;
+}
+
 export class HttpError extends Error {
   statusCode: number;
   errors?: ValidationErrors;
-
-  constructor(message: string, statusCode: number, errors?: ValidationErrors) {
-    super(message);
+  code?: string;
+  details?: unknown;
+  body?: unknown;
+  override cause?: unknown;
+
+  constructor(
+    message: string,
+    statusCode: number,
+    errors?: ValidationErrors,
+    options: HttpErrorOptions = {},
+  ) {
+    super(message, options.cause === undefined ? undefined : { cause: options.cause });
     this.name = 'HttpError';
     this.statusCode = statusCode;
     this.errors = errors;
+    this.code = options.code;
+    this.details = options.details;
+    this.body = options.body;
+    this.cause = options.cause;
   }
 }
 
@@ -385,7 +407,7 @@ export interface MenuItem {
   /** Display label. Falls back to `t('menu.${name}')` if omitted */
   label?: string;
   /** Icon name string (maps to lucide icon set) or Svelte component */
-  icon?: string | any;
+  icon?: string | Component;
   /** Navigation path — omit for parent-only menu nodes */
   href?: string;
   /** Open in new tab (useful for external links) */

package/src/unsaved-changes.svelte.ts

@@ -1,8 +1,7 @@
-/* eslint-disable svelte/prefer-svelte-reactivity */
 // UnsavedChangesNotifier — guards against accidental navigation with dirty forms
 // Supports: browser tab close, hash-based SPA routing, and framework router interception
 
-import { t } from './i18n.svelte';
+import { useTranslation } from './i18n.svelte';
 import { syncGlobalPath } from './useParsed.svelte';
 
 let dirty = $state(false);
@@ -15,46 +14,12 @@ export function resetUnsavedChanges(): void {
   dirty = false;
   _unsavedChangesCleanup?.();
   _unsavedChangesCleanup = null;
-  __navigationGuard = null;
 }
 
 export function getUnsavedChanges(): boolean {
   return dirty;
 }
 
-/**
- * Navigation interceptor callback type.
- * Frameworks like SvelteKit can register a cancel function here.
- * Return `true` to allow navigation, `false` to block it.
- */
-interface NavigationGuard {
-  (opts: { cancel: () => void }): void;
-}
-
-let __navigationGuard: NavigationGuard | null = null;
-
-/**
- * Register a framework-level navigation guard.
- * 
- * In SvelteKit, call this from your root layout:
- * ```ts
- * import { beforeNavigate } from '$app/navigation';
- * import { registerNavigationGuard } from '@svadmin/core';
- * 
- * registerNavigationGuard(({ cancel }) => {
- *   beforeNavigate(({ cancel: kitCancel }) => {
- *     cancel = kitCancel;
- *   });
- * });
- * ```
- * 
- * Or more idiomatically, use the built-in `initUnsavedChangesNotifier` 
- * and pass a `beforeNavigate` callback.
- */
-export function registerNavigationGuard(guard: NavigationGuard): void {
-  __navigationGuard = guard;
-}
-
 /**
  * Initialize the UnsavedChangesNotifier.
  * 
@@ -82,6 +47,7 @@ export function initUnsavedChangesNotifier(options?: {
   beforeNavigate?: (callback: (nav: { cancel: () => void }) => void) => void;
 }) {
   if (typeof window === 'undefined') return;
+  const i18n = useTranslation();
   _unsavedChangesCleanup?.();
 
   const onBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -94,7 +60,7 @@ export function initUnsavedChangesNotifier(options?: {
   if (options?.beforeNavigate) {
     options.beforeNavigate(({ cancel }) => {
       if (dirty) {
-        if (!confirm(t('common.unsavedChanges'))) {
+        if (!confirm(i18n.t('common.unsavedChanges'))) {
           cancel();
         } else {
           dirty = false;
@@ -105,7 +71,7 @@ export function initUnsavedChangesNotifier(options?: {
 
   const onHashChange = (e: HashChangeEvent) => {
     if (!dirty) return;
-    if (!confirm(t('common.unsavedChanges'))) {
+    if (!confirm(i18n.t('common.unsavedChanges'))) {
       if (e.oldURL) {
         history.replaceState(null, '', new URL(e.oldURL).hash || '#');
         syncGlobalPath();