@svadmin/core 0.21.0 → 0.21.2

package/src/theme.svelte.ts

@@ -301,8 +301,8 @@ export const colorThemes: { id: ColorTheme | string; label: string; color: strin
 // ── Dark/Light mode ──────────────────────────────────────
 
 function getStoredTheme(): ThemeMode {
-  if (typeof localStorage === 'undefined') return 'system';
-  return (localStorage.getItem(STORAGE_KEY) as ThemeMode) ?? 'system';
+  if (typeof window === 'undefined') return 'system';
+  try { return (localStorage.getItem(STORAGE_KEY) as ThemeMode) ?? 'system'; } catch { return 'system'; }
 }
 
 function getSystemPreference(): 'light' | 'dark' {
@@ -335,8 +335,10 @@ function applyTheme(m: ThemeMode): void {
   }
 }
 
-// Apply on init
-applyTheme(getStoredTheme());
+// Apply on init (browser only)
+if (typeof window !== 'undefined') {
+  applyTheme(getStoredTheme());
+}
 
 // Listen for system preference changes
 if (typeof window !== 'undefined') {
@@ -356,8 +358,8 @@ export function getTheme(): ThemeMode {
 
 export function setTheme(newMode: ThemeMode): void {
   mode = newMode;
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem(STORAGE_KEY, newMode);
+  if (typeof window !== 'undefined') {
+    try { localStorage.setItem(STORAGE_KEY, newMode); } catch {}
   }
   applyTheme(newMode);
   // Re-apply color preset — light/dark CSS variable overrides differ
@@ -378,8 +380,8 @@ export function getResolvedTheme(): 'light' | 'dark' {
 // ── Color theme ──────────────────────────────────────────
 
 function getStoredColorTheme(): ColorTheme {
-  if (typeof localStorage === 'undefined') return 'blue';
-  return (localStorage.getItem(COLOR_STORAGE_KEY) as ColorTheme) ?? 'blue';
+  if (typeof window === 'undefined') return 'blue';
+  try { return (localStorage.getItem(COLOR_STORAGE_KEY) as ColorTheme) ?? 'blue'; } catch { return 'blue'; }
 }
 
 let colorTheme = $state<ColorTheme>(getStoredColorTheme());
@@ -390,9 +392,9 @@ function applyColorTheme(ct: ColorTheme): void {
   }
 }
 
-// Apply on init
-applyColorTheme(getStoredColorTheme());
-{
+// Apply on init (browser only)
+if (typeof window !== 'undefined') {
+  applyColorTheme(getStoredColorTheme());
   const initPreset = builtinPresets[getStoredColorTheme()];
   if (initPreset) applyColorPreset(initPreset);
 }
@@ -403,8 +405,8 @@ export function getColorTheme(): ColorTheme {
 
 export function setColorTheme(ct: ColorTheme): void {
   colorTheme = ct;
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem(COLOR_STORAGE_KEY, ct);
+  if (typeof window !== 'undefined') {
+    try { localStorage.setItem(COLOR_STORAGE_KEY, ct); } catch {}
   }
   applyColorTheme(ct);
   // Apply the preset's CSS variable overrides for the current resolved theme

package/src/unsaved-changes.svelte.ts

@@ -98,7 +98,6 @@ export function initUnsavedChangesNotifier(options?: {
   const onHashChange = (e: HashChangeEvent) => {
     if (!dirty) return;
     if (!confirm(t('common.unsavedChanges'))) {
-      e.preventDefault();
       if (e.oldURL) {
         history.replaceState(null, '', new URL(e.oldURL).hash || '#');
       }

package/src/url-sync.ts

@@ -1,6 +1,5 @@
-// URL state sync — sync pagination/sort/filters with hash params
-
 import type { Filter } from './types';
+import { getRouterProvider } from './context.svelte';
 
 export interface URLState {
   page?: number;
@@ -13,29 +12,28 @@ export interface URLState {
 
 export function readURLState(): URLState {
   if (typeof window === 'undefined') return {};
-  const hash = window.location.hash;
-  const queryIdx = hash.indexOf('?');
-  if (queryIdx === -1) return {};
+  const rp = getRouterProvider();
+  if (!rp) return {};
 
-  const params = new URLSearchParams(hash.slice(queryIdx + 1));
+  const { params } = rp.parse();
   const state: URLState = {};
 
-  const page = params.get('page');
+  const page = params['page'];
   if (page) state.page = parseInt(page, 10);
 
-  const pageSize = params.get('pageSize');
+  const pageSize = params['pageSize'];
   if (pageSize) state.pageSize = parseInt(pageSize, 10);
 
-  const sortField = params.get('sort');
+  const sortField = params['sort'];
   if (sortField) state.sortField = sortField;
 
-  const sortOrder = params.get('order');
+  const sortOrder = params['order'];
   if (sortOrder === 'asc' || sortOrder === 'desc') state.sortOrder = sortOrder;
 
-  const search = params.get('q');
+  const search = params['q'];
   if (search) state.search = search;
 
-  const filtersRaw = params.get('filters');
+  const filtersRaw = params['filters'];
   if (filtersRaw) {
     try {
       state.filters = JSON.parse(filtersRaw);
@@ -47,24 +45,42 @@ export function readURLState(): URLState {
 
 export function writeURLState(state: URLState): void {
   if (typeof window === 'undefined') return;
-  const hash = window.location.hash;
-  const pathIdx = hash.indexOf('?');
-  const basePath = pathIdx === -1 ? hash : hash.slice(0, pathIdx);
-
-  const params = new URLSearchParams();
-  if (state.page && state.page > 1) params.set('page', String(state.page));
-  if (state.pageSize && state.pageSize !== 10) params.set('pageSize', String(state.pageSize));
-  if (state.sortField) params.set('sort', state.sortField);
-  if (state.sortOrder) params.set('order', state.sortOrder);
-  if (state.search) params.set('q', state.search);
+  const rp = getRouterProvider();
+  if (!rp) return;
+
+  const current = rp.parse();
+  const params: Record<string, string> = { ...current.params };
+
+  if (state.page && state.page > 1) params['page'] = String(state.page);
+  else delete params['page'];
+
+  if (state.pageSize && state.pageSize !== 10) params['pageSize'] = String(state.pageSize);
+  else delete params['pageSize'];
+
+  if (state.sortField) params['sort'] = state.sortField;
+  else delete params['sort'];
+
+  if (state.sortOrder) params['order'] = state.sortOrder;
+  else delete params['order'];
+
+  if (state.search) params['q'] = state.search;
+  else delete params['q'];
+
   if (state.filters && state.filters.length > 0) {
-    params.set('filters', JSON.stringify(state.filters));
+    params['filters'] = JSON.stringify(state.filters);
+  } else {
+    delete params['filters'];
   }
 
-  const qs = params.toString();
-  const newHash = qs ? `${basePath}?${qs}` : basePath;
-
-  if (window.location.hash !== newHash) {
-    history.replaceState(null, '', newHash);
+  // Prevent redundant navigation if nothing actually changed
+  const qsOld = new URLSearchParams(current.params).toString();
+  const qsNew = new URLSearchParams(params).toString();
+  
+  if (qsOld !== qsNew) {
+    rp.go({
+      to: current.pathname,
+      query: params,
+      type: 'replace'
+    });
   }
 }

package/src/useParsed.svelte.ts

@@ -5,11 +5,20 @@ import { getResources } from './context.svelte';
 
 interface ParsedRoute {
   resource?: string;
-  action?: 'list' | 'create' | 'edit' | 'show';
+  action?: 'list' | 'create' | 'edit' | 'show' | 'clone';
   id?: string;
   params: Record<string, string>;
 }
 
+let globalPath = $state('/');
+if (typeof window !== 'undefined') {
+  // Initialize
+  globalPath = currentPath();
+  // Listen to navigation events
+  window.addEventListener('hashchange', () => { globalPath = currentPath(); });
+  window.addEventListener('popstate', () => { globalPath = currentPath(); });
+}
+
 /**
  * Parse the current hash URL into a structured route object.
  * Returns reactive properties that update when the URL changes.
@@ -21,11 +30,10 @@ interface ParsedRoute {
  *   // parsed.id === '123'
  */
 export function useParsed(): ParsedRoute {
-  const path = $derived(currentPath());
   const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
 
   const parsed = $derived.by(() => {
-    const p = path;
+    const p = globalPath;
     const result: ParsedRoute = { params: {} };
 
     // Parse query params from hash
@@ -73,6 +81,9 @@ export function useParsed(): ParsedRoute {
       } else if (restSegments[0] === 'show' && restSegments[1]) {
         result.action = 'show';
         result.id = restSegments[1];
+      } else if (restSegments[0] === 'clone' && restSegments[1]) {
+        result.action = 'clone';
+        result.id = restSegments[1];
       } else if (restSegments[0]) {
         // Legacy: /:resource/:id
         result.action = 'show';
@@ -92,6 +103,9 @@ export function useParsed(): ParsedRoute {
       } else if (segments[1] === 'show' && segments[2]) {
         result.action = 'show';
         result.id = segments[2];
+      } else if (segments[1] === 'clone' && segments[2]) {
+        result.action = 'clone';
+        result.id = segments[2];
       } else if (segments[1]) {
         result.action = 'show';
         result.id = segments[1];

package/src/utility-hooks.svelte.ts

@@ -42,7 +42,13 @@ export function useModalForm<
   let visible = $state(options.defaultVisible ?? false);
 
   function show(id?: string | number) {
-    if (id !== undefined) formState.setId(id);
+    if (id !== undefined) {
+      formState.setAction('edit');
+      formState.setId(id);
+    } else {
+      formState.setAction('create');
+      formState.setId(undefined);
+    }
     visible = true;
   }