@svadmin/ui 0.29.4 → 0.30.0

package/dist/components/AdminApp.svelte

@@ -47,6 +47,8 @@
     menu?: MenuItem[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
     siteUrl?: string;
+    /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
+    routeMode?: 'hash' | 'path' | 'auto';
   }
 
   let {
@@ -63,6 +65,7 @@
     components: userComponents,
     menu,
     siteUrl,
+    routeMode,
   }: Props = $props();
 
   // Default component registry
@@ -76,10 +79,13 @@
   };
 
   // Merge user overrides and set context
-  setComponentRegistry({ ...defaultComponents, ...userComponents });
+  $effect(() => {
+    setComponentRegistry({ ...defaultComponents, ...userComponents });
+  });
 
   // Resolve router provider (default to hash)
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
+  const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
   // Set up context — use $effect so prop changes are tracked
   $effect.pre(() => {
@@ -151,7 +157,7 @@
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
-    <Layout {title} {menu} {siteUrl}>
+    <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
       {#if currentPath().startsWith('/settings')}

package/dist/components/AdminApp.svelte.d.ts

@@ -20,6 +20,8 @@ interface Props {
     menu?: MenuItem[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
     siteUrl?: string;
+    /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
+    routeMode?: 'hash' | 'path' | 'auto';
 }
 declare const AdminApp: import("svelte").Component<Props, {}, "">;
 type AdminApp = ReturnType<typeof AdminApp>;

package/dist/components/AutoForm.svelte

@@ -69,15 +69,17 @@
     return d;
   })());
 
+  const validator = $derived(deriveValidator(formFields));
+
   // ─── useForm: single source of truth for values, errors, tainted ──
   const form = useForm({
     get resource() { return resourceName; },
     get action() { return mode; },
     get id() { return id; },
-    defaultValues: defaults,
+    get defaultValues() { return defaults; },
     redirect: 'list',
     warnWhenUnsavedChanges: true,
-    validate: deriveValidator(formFields),
+    get validate() { return validator; },
   });
 
   // ─── Submission error (non-field, e.g. network error) ─────────────

package/dist/components/AutoTable.svelte

@@ -149,7 +149,7 @@
     get sorters() { return sorters; },
     get filters() { return activeFilters; },
   });
-  const query = listResult.query;
+  const query = listResult;
   const deleteResult = useDelete({ get resource() { return resourceName; } });
   const deleteMutation = deleteResult.mutation;
 
@@ -623,7 +623,7 @@
                                 recordId={id}
                                 {field}
                                 value={cell.getValue()}
-                                onSave={() => listResult.query.refetch()}
+                                onSave={() => listResult.refetch()}
                               />
                             {:else if field?.key === primaryKey}
                               <span class="font-mono text-xs">{cell.getValue() ?? '—'}</span>

package/dist/components/Layout.svelte

@@ -22,7 +22,7 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin', menu, siteUrl }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string } = $props();
+  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
 
   let hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
@@ -121,13 +121,13 @@
   <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
-      <Sidebar {collapsed} {identity} {title} {menu} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
     <Sheet.Root bind:open={mobileMenuOpen} side="left">
       <div class="md:hidden">
-        <Sidebar collapsed={false} {identity} {title} {menu} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 

package/dist/components/Layout.svelte.d.ts

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     title?: string;
     menu?: MenuItem[];
     siteUrl?: string;
+    routeMode?: 'hash' | 'path' | 'auto';
 };
 declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;

package/dist/components/ShowPage.svelte

@@ -35,7 +35,7 @@
     {/snippet}
   </PageHeader>
 
-  {#if query.query.isLoading}
+  {#if query.isLoading}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-0">
         {#each showFields.slice(0, 6) as _, i}
@@ -46,11 +46,11 @@
         {/each}
       </Card.Content>
     </Card.Root>
-  {:else if query.query.data?.data}
+  {:else if query.data?.data}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-0">
         {#each showFields as field, i}
-          {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
+          {@const value = (query.data!.data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
           <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>

package/dist/components/StepsForm.svelte

@@ -53,15 +53,17 @@
     return d;
   })());
 
+  const validator = $derived(deriveValidator(flatStepsFields));
+
   // ─── useStepsForm: form state + step navigation ──────────────────
   const form = useStepsForm({
     get resource() { return resourceName; },
     get action() { return mode; },
     get id() { return id; },
-    defaultValues: defaults,
+    get defaultValues() { return defaults; },
     redirect: 'list',
     warnWhenUnsavedChanges: true,
-    validate: deriveValidator(flatStepsFields),
+    get validate() { return validator; },
   });
 
   const totalSteps = $derived(steps.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.29.4",
+  "version": "0.30.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -25,7 +25,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.20.3",
+    "@svadmin/core": "^0.21.0",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",