@svadmin/ui 0.5.10 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.5.10",
+  "version": "0.5.13",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@svadmin/core": "^0.4.1",
+    "@svadmin/core": "^0.5.0",
     "@tanstack/svelte-query": "^5.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",

package/src/app.css

@@ -126,7 +126,7 @@ body {
  * This enables bg-primary, text-muted-foreground, border-input, etc.
  * Without this, Tailwind 4 utility classes referencing these tokens are no-ops.
  */
-@theme inline {
+@theme {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);

package/src/components/AdminApp.svelte

@@ -45,15 +45,17 @@
   }: Props = $props();
 
   // Resolve router provider (default to hash)
-  const resolvedRouter = routerProvider ?? createHashRouterProvider();
+  const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
 
-  // Set up context
-  setDataProvider(dataProvider);
-  if (authProvider) setAuthProvider(authProvider);
-  setResources(resources);
-  setRouterProvider(resolvedRouter);
-  if (locale) setLocale(locale);
-  if (defaultTheme) setTheme(defaultTheme);
+  // Set up context — use $effect so prop changes are tracked
+  $effect.pre(() => {
+    setDataProvider(dataProvider);
+    if (authProvider) setAuthProvider(authProvider);
+    setResources(resources);
+    setRouterProvider(resolvedRouter);
+    if (locale) setLocale(locale);
+    if (defaultTheme) setTheme(defaultTheme);
+  });
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -62,7 +64,9 @@
   });
 
   // Initialize router with provider
-  initRouter(resolvedRouter);
+  $effect.pre(() => {
+    initRouter(resolvedRouter);
+  });
 
   // Reactive getters for route state
   const route = $derived(getRoute());
@@ -107,7 +111,7 @@
   {:else if route === '/update-password' && authProvider?.updatePassword}
     <UpdatePasswordPage {title} />
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
-    <ConfigErrorScreen title="{title} — Configuration Required" />
+    <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title}>
       {#if route === '/'}

package/src/components/AutoForm.svelte

@@ -37,34 +37,34 @@
     headerContent,
   }: Props = $props();
 
-  const resource = getResource(resourceName);
-  const primaryKey = resource.primaryKey ?? 'id';
+  const resource = $derived(getResource(resourceName));
+  const primaryKey = $derived(resource.primaryKey ?? 'id');
 
-  const formFields = resource.fields.filter(f => {
+  const formFields = $derived(resource.fields.filter(f => {
     if (f.key === primaryKey) return false;
     if (f.showInForm === false) return false;
     if (mode === 'create' && f.showInCreate === false) return false;
     if (mode === 'edit' && f.showInEdit === false) return false;
     return true;
-  });
+  }));
 
-  const hasGroups = formFields.some(f => f.group);
-  const groups = (() => {
+  const hasGroups = $derived(formFields.some(f => f.group));
+  const groups = $derived((() => {
     if (!hasGroups) return [];
     const order: string[] = [];
-    const map = new Map<string, typeof formFields>();
+    const map = new Map<string, FieldDefinition[]>();
     for (const f of formFields) {
       const g = f.group ?? '';
       if (!map.has(g)) { order.push(g); map.set(g, []); }
       map.get(g)!.push(f);
     }
     return order.map(g => ({ name: g, fields: map.get(g)! }));
-  })();
+  })());
 
   // Load existing data for edit mode
-  const existingQuery = mode === 'edit' && id != null
-    ? useOne({ resource: resourceName, id })
-    : null;
+  const existingQuery = $derived.by(() => mode === 'edit' && id != null
+    ? useOne({ get resource() { return resourceName; }, get id() { return id; } })
+    : null);
 
   // Form state
   let formData = $state<Record<string, unknown>>({});
@@ -116,8 +116,8 @@
     };
   });
 
-  const createMut = useCreate({ resource: resourceName });
-  const updateMut = useUpdate({ resource: resourceName });
+  const createMut = useCreate({ get resource() { return resourceName; } });
+  const updateMut = useUpdate({ get resource() { return resourceName; } });
 
   function validateFields(): boolean {
     const errors: Record<string, string> = {};

package/src/components/AutoTable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import {
     createTable,
     getCoreRowModel,
@@ -33,6 +34,7 @@
     Eye, Copy
   } from 'lucide-svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
+  import TooltipButton from './TooltipButton.svelte';
   import type { Snippet } from 'svelte';
 
   // ─── Props with Snippet composability ─────────────────────────
@@ -67,21 +69,25 @@
     sorters: externalSorters,
   }: Props = $props();
 
-  const resource = getResource(resourceName);
+  const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
 
   // ─── URL state + server-side state ────────────────────────────
   const urlState = readURLState();
 
-  let pagination = $state<{ current: number; pageSize: number }>(externalPagination ?? {
+  // Snapshot resource values for initial state (untrack to avoid reactive tracking)
+  const initPageSize = untrack(() => resource.pageSize ?? 10);
+  const initDefaultSort = untrack(() => resource.defaultSort);
+
+  let pagination = $state<{ current: number; pageSize: number }>(untrack(() => externalPagination ?? {
     current: urlState.page ?? 1,
-    pageSize: urlState.pageSize ?? resource.pageSize ?? 10,
-  });
-  let sorters = $state<Sort[]>(
+    pageSize: urlState.pageSize ?? initPageSize,
+  }));
+  let sorters = $state<Sort[]>(untrack(() =>
     externalSorters ??
     (urlState.sortField
       ? [{ field: urlState.sortField, order: urlState.sortOrder ?? 'asc' }]
-      : resource.defaultSort ? [resource.defaultSort] : [])
+      : initDefaultSort ? [initDefaultSort] : []))
   );
   let filters = $state<Filter[]>([]);
   let searchText = $state(urlState.search ?? '');
@@ -98,8 +104,8 @@
   });
 
   // ─── Build active filters with search ─────────────────────────
-  const searchableFields = resource.fields.filter(f => f.searchable);
-  const filterableFields = resource.fields.filter(f => f.filterable);
+  const searchableFields = $derived(resource.fields.filter(f => f.searchable));
+  const filterableFields = $derived(resource.fields.filter(f => f.filterable));
   let filterValues = $state<Record<string, string>>({});
   const activeFilterCount = $derived(Object.values(filterValues).filter(v => v.trim()).length);
   const activeFilters = $derived.by(() => {
@@ -117,21 +123,26 @@
   });
 
   // ─── Data fetching ────────────────────────────────────────────
-  const listResult = useList({ resource: resourceName, pagination, sorters, filters: activeFilters });
+  const listResult = useList({
+    get resource() { return resourceName; },
+    get pagination() { return pagination; },
+    get sorters() { return sorters; },
+    get filters() { return activeFilters; },
+  });
   const query = listResult.query;
-  const deleteResult = useDelete({ resource: resourceName });
+  const deleteResult = useDelete({ get resource() { return resourceName; } });
   const deleteMutation = deleteResult.mutation;
 
   // ─── Permissions ──────────────────────────────────────────────
-  const canCreate = canAccess(resourceName, 'create').can && resource.canCreate !== false;
-  const canEdit = canAccess(resourceName, 'edit').can && resource.canEdit !== false;
-  const canDelete = canAccess(resourceName, 'delete').can && resource.canDelete !== false;
-  const canExport = canAccess(resourceName, 'export').can;
+  const canCreate = $derived(canAccess(resourceName, 'create').can && resource.canCreate !== false);
+  const canEdit = $derived(canAccess(resourceName, 'edit').can && resource.canEdit !== false);
+  const canDelete = $derived(canAccess(resourceName, 'delete').can && resource.canDelete !== false);
+  const canExport = $derived(canAccess(resourceName, 'export').can);
 
   // ─── TanStack Table state ────────────────────────────────────
-  let sorting = $state<SortingState>(
+  let sorting = $state<SortingState>(untrack(() =>
     sorters.map(s => ({ id: s.field, desc: s.order === 'desc' }))
-  );
+  ));
   let columnVisibility = $state<VisibilityState>((() => {
     const vis: VisibilityState = {};
     for (const f of resource.fields) {
@@ -195,7 +206,7 @@
   // ─── Create TanStack Table ────────────────────────────────────
   const tbl = createTable({
     get data() { return query.data?.data ?? []; },
-    columns,
+    get columns() { return columns; },
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
     manualSorting: true,
@@ -218,8 +229,8 @@
     onExpandedChange: (updater) => {
       expanded = typeof updater === 'function' ? updater(expanded) : updater;
     },
-    enableRowSelection: selectable && canDelete,
-    enableExpanding: !!expandedRowRender,
+    get enableRowSelection() { return selectable && canDelete; },
+    get enableExpanding() { return !!expandedRowRender; },
   });
 
   const selectedCount = $derived(Object.keys(rowSelection).length);
@@ -481,27 +492,27 @@
                               onCheckedChange={() => row.toggleSelected()}
                             />
                           {:else if cell.column.id === '_expand'}
-                            <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => row.toggleExpanded()}>
+                            <TooltipButton tooltip={row.getIsExpanded() ? t('common.collapse') : t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => row.toggleExpanded()}>
                               {#if row.getIsExpanded()}
                                 <ChevronUp class="h-4 w-4" />
                               {:else}
                                 <ChevronDown class="h-4 w-4" />
                               {/if}
-                            </Button>
+                            </TooltipButton>
                           {:else if cell.column.id === '_actions'}
                             <div class="flex items-center justify-end gap-1">
                               {#if rowActions}
                                 {@render rowActions({ record, id })}
                               {:else}
                                 {#if canEdit}
-                                  <Button variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/edit/${id}`)} title={t('common.edit')}>
+                                  <TooltipButton tooltip={t('common.edit')} variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
                                     <Pencil class="h-4 w-4" />
-                                  </Button>
+                                  </TooltipButton>
                                 {/if}
                                 {#if canDelete}
-                                  <Button variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} title={t('common.delete')} class="hover:text-destructive">
+                                  <TooltipButton tooltip={t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
                                     <Trash2 class="h-4 w-4" />
-                                  </Button>
+                                  </TooltipButton>
                                 {/if}
                               {/if}
                             </div>

package/src/components/ComboboxField.svelte

@@ -32,10 +32,10 @@
   }: Props = $props();
 
   const { options, query, onSearchChange } = useSelect({
-    resource,
-    optionLabel,
-    optionValue,
-    onSearch: onSearch ?? (searchable ? (v: string) => v ? [{ field: optionLabel, operator: 'contains' as const, value: v }] : [] : undefined),
+    get resource() { return resource; },
+    get optionLabel() { return optionLabel; },
+    get optionValue() { return optionValue; },
+    get onSearch() { return onSearch ?? (searchable ? (v: string) => v ? [{ field: optionLabel, operator: 'contains' as const, value: v }] : [] : undefined); },
   });
 
   let open = $state(false);

package/src/components/CreatePage.svelte

@@ -23,8 +23,8 @@
     class: className = '',
   }: Props = $props();
 
-  const resource = getResource(resourceName);
-  const pageTitle = title ?? `${t('common.create')}${resource.label}`;
+  const resource = $derived(getResource(resourceName));
+  const pageTitle = $derived(title ?? `${t('common.create')}${resource.label}`);
 </script>
 
 <div class="space-y-6 {className}">

package/src/components/DevTools.svelte

@@ -136,14 +136,14 @@
       {/if}
     </div>
   {:else}
-    <Button
+    <TooltipButton
+      tooltip={t('devtools.title')}
       variant="default"
       size="icon"
       class="fixed bottom-4 right-4 z-[9999] h-9 w-9 rounded-full shadow-lg opacity-60 hover:opacity-100 hover:scale-110 transition-all"
       onclick={toggle}
-      title={t('devtools.title')}
     >
       <Bug class="h-4 w-4" />
-    </Button>
+    </TooltipButton>
   {/if}
 {/if}

package/src/components/EditPage.svelte

@@ -28,11 +28,11 @@
     class: className = '',
   }: Props = $props();
 
-  const resource = getResource(resourceName);
-  const pageTitle = title ?? `${t('common.edit')} ${resource.label} #${id}`;
-  const showDelete = canDelete ?? resource.canDelete !== false;
+  const resource = $derived(getResource(resourceName));
+  const pageTitle = $derived(title ?? `${t('common.edit')} ${resource.label} #${id}`);
+  const showDelete = $derived(canDelete ?? resource.canDelete !== false);
 
-  const deleteResult = useDelete({ resource: resourceName });
+  const deleteResult = useDelete({ get resource() { return resourceName; } });
   const deleteMutation = deleteResult.mutation;
 
   let confirmOpen = $state(false);

package/src/components/FieldRenderer.svelte

@@ -13,6 +13,7 @@
   import { Select } from './ui/select/index.js';
   import { Checkbox } from './ui/checkbox/index.js';
   import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
   import ComboboxField from './ComboboxField.svelte';
   import { Plus, X } from 'lucide-svelte';
   import type { Snippet } from 'svelte';
@@ -283,9 +284,9 @@
           {#if url}
             <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
           {/if}
-          <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
+          <TooltipButton tooltip={t('common.removeImage')} variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
             <X class="h-3.5 w-3.5" />
-          </Button>
+          </TooltipButton>
         </div>
       {/each}
       <Button variant="outline" size="sm" type="button" onclick={addImage}>

package/src/components/InfiniteList.svelte

@@ -33,10 +33,10 @@
   }: Props = $props();
 
   const { query } = useInfiniteList({
-    resource,
-    pagination: { pageSize },
-    sorters,
-    filters,
+    get resource() { return resource; },
+    get pagination() { return { pageSize }; },
+    get sorters() { return sorters; },
+    get filters() { return filters; },
   });
 
   const allItems = $derived(

package/src/components/ListPage.svelte

@@ -41,9 +41,9 @@
     class: className = '',
   }: Props = $props();
 
-  const resource = getResource(resourceName);
-  const pageTitle = title ?? resource.label;
-  const showCreate = canCreate ?? resource.canCreate !== false;
+  const resource = $derived(getResource(resourceName));
+  const pageTitle = $derived(title ?? resource.label);
+  const showCreate = $derived(canCreate ?? resource.canCreate !== false);
 </script>
 
 <div class="space-y-6 {className}">

package/src/components/PasswordInput.svelte

@@ -5,6 +5,7 @@
   import { Label } from './ui/label/index.js';
   import { Progress } from './ui/progress/index.js';
   import { Lock, Eye, EyeOff } from 'lucide-svelte';
+  import { t } from '@svadmin/core/i18n';
 
   interface Props {
     id: string;
@@ -66,7 +67,7 @@
       autocomplete={autocomplete as any}
     />
     <TooltipButton
-      tooltip={showPassword ? 'Hide password' : 'Show password'}
+      tooltip={showPassword ? t('common.hidePassword') : t('common.showPassword')}
       variant="ghost"
       size="icon"
       type="button"

package/src/components/ShowPage.svelte

@@ -7,23 +7,24 @@
   import * as Card from './ui/card/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import PageHeader from './PageHeader.svelte';
+  import TooltipButton from './TooltipButton.svelte';
   import { getDisplayComponent } from './fieldComponentMap';
-  import { Pencil } from 'lucide-svelte';
+  import { ArrowLeft, Pencil } from 'lucide-svelte';
 
   let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
 
-  const resource = getResource(resourceName);
-  const showFields = resource.fields.filter(f => f.showInShow !== false);
+  const resource = $derived(getResource(resourceName));
+  const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
 
-  const query = useShow({ resource: resourceName, id });
+  const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
 </script>
 
 <div class="space-y-6">
   <PageHeader title="{resource.label} {t('common.detail')}">
     {#snippet actions()}
-      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
-      </Button>
+      <TooltipButton tooltip={t('common.back')} onclick={() => navigate(`/${resourceName}`)}>
+        <ArrowLeft class="h-5 w-5" />
+      </TooltipButton>
       {#if resource.canEdit !== false}
         <Button onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
           <Pencil class="h-4 w-4" data-icon="inline-start" /> {t('common.edit')}

package/src/components/Sidebar.svelte

@@ -5,6 +5,7 @@
   import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
   import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
   import * as DropdownMenu from './ui/dropdown-menu/index.js';
   import { Separator } from './ui/separator/index.js';
@@ -134,13 +135,13 @@
     {:else}
       <span class="text-lg font-bold text-sidebar-primary">{title.charAt(0)}</span>
     {/if}
-    <Button variant="ghost" size="icon-sm" onclick={onToggle}>
+    <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle}>
       {#if collapsed}
         <ChevronRight class="h-4 w-4" />
       {:else}
         <ChevronLeft class="h-4 w-4" />
       {/if}
-    </Button>
+    </TooltipButton>
   </div>
 
   <ScrollArea class="flex-1">
@@ -269,25 +270,25 @@
         <div class="flex-1 min-w-0">
           <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
         </div>
-        <Button variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground" title={t('common.switchLanguage')}>
+        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground">
           <span class="text-xs font-bold">{localeLabel}</span>
-        </Button>
-        <Button variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground" title={t('common.toggleTheme')}>
+        </TooltipButton>
+        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground">
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-4 w-4" />
           {:else}
             <Moon class="h-4 w-4" />
           {/if}
-        </Button>
-        <Button variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
+        </TooltipButton>
+        <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground hover:text-destructive">
           <LogOut class="h-4 w-4" />
-        </Button>
+        </TooltipButton>
       </div>
     {:else if collapsed}
       <Tooltip.Root>
         <Tooltip.Trigger>
           {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground" title={t('common.switchLanguage')}>
+            <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground">
               <span class="text-xs font-bold">{localeLabel}</span>
             </Button>
           {/snippet}
@@ -297,7 +298,7 @@
       <Tooltip.Root>
         <Tooltip.Trigger>
           {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
+            <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground">
               {#if getResolvedTheme() === 'dark'}
                 <Sun class="h-5 w-5" />
               {:else}
@@ -311,7 +312,7 @@
       <Tooltip.Root>
         <Tooltip.Trigger>
           {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
+            <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive">
               <LogOut class="h-5 w-5" />
             </Button>
           {/snippet}
@@ -320,16 +321,16 @@
       </Tooltip.Root>
     {:else}
       <div class="flex gap-1">
-        <Button variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground" title={t('common.switchLanguage')}>
+        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground">
           <span class="text-xs font-bold">{localeLabel}</span>
-        </Button>
-        <Button variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground" title={t('common.toggleTheme')}>
+        </TooltipButton>
+        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground">
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-5 w-5" />
           {:else}
             <Moon class="h-5 w-5" />
           {/if}
-        </Button>
+        </TooltipButton>
       </div>
     {/if}
   </div>

package/src/components/StepsForm.svelte

@@ -27,18 +27,18 @@
 
   let { resourceName, id, mode = 'create', steps }: Props = $props();
 
-  const resource = getResource(resourceName);
-  const primaryKey = resource.primaryKey ?? 'id';
+  const resource = $derived(getResource(resourceName));
+  const primaryKey = $derived(resource.primaryKey ?? 'id');
 
   const stepsForm = useStepsForm({
-    resource: resourceName,
-    action: mode,
-    id,
+    get resource() { return resourceName; },
+    get action() { return mode; },
+    get id() { return id; },
   });
 
   const { currentStep, next, prev, gotoStep } = stepsForm;
 
-  const totalSteps = steps.length;
+  const totalSteps = $derived(steps.length);
   const progressValue = $derived(((currentStep + 1) / totalSteps) * 100);
   const isLastStep = $derived(currentStep >= totalSteps - 1);
 
@@ -49,13 +49,13 @@
       .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
   );
 
-  const flatStepsFields = steps.flatMap(s => s.fields)
+  const flatStepsFields = $derived(steps.flatMap(s => s.fields)
     .map(key => resource.fields.find(f => f.key === key))
-    .filter((f): f is FieldDefinition => f != null);
+    .filter((f): f is FieldDefinition => f != null));
 
-  const existingQuery = mode === 'edit' && id != null 
+  const existingQuery = $derived(mode === 'edit' && id != null 
     ? stepsForm.query as { data?: { data: Record<string, unknown> }, isLoading: boolean } 
-    : null;
+    : null);
 
   let formData = $state<Record<string, unknown>>({});
   let fieldErrors = $state<Record<string, string>>({});

package/src/components/UndoableNotification.svelte

@@ -12,9 +12,14 @@
     onTimeout: () => void;
   }>();
 
-  let remaining = $state(duration);
+  let remaining = $state(0);
   let dismissed = $state(false);
 
+  // Initialize remaining from prop
+  $effect.pre(() => {
+    remaining = duration;
+  });
+
   $effect(() => {
     const interval = setInterval(() => {
       remaining -= 100;

package/src/components/buttons/CloneButton.svelte

@@ -12,7 +12,7 @@
   }>();
 
   const nav = useNavigation();
-  const can = accessControl?.enabled ? useCan(resource, 'create') : null;
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'create') : null);
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 

package/src/components/buttons/CreateButton.svelte

@@ -11,7 +11,7 @@
   }>();
 
   const nav = useNavigation();
-  const can = accessControl?.enabled ? useCan(resource, 'create') : null;
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'create') : null);
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 

package/src/components/buttons/DeleteButton.svelte

@@ -16,8 +16,8 @@
     class?: string;
   }>();
 
-  const deleteMut = useDelete({ resource, mutationMode: undoable ? 'undoable' : 'pessimistic' });
-  const can = accessControl?.enabled ? useCan(resource, 'delete') : null;
+  const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'delete') : null);
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
   let confirming = $state(false);
 

package/src/components/buttons/EditButton.svelte

@@ -12,7 +12,7 @@
   }>();
 
   const nav = useNavigation();
-  const can = accessControl?.enabled ? useCan(resource, 'edit') : null;
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'edit') : null);
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 

package/src/components/buttons/ExportButton.svelte

@@ -9,7 +9,7 @@
     class?: string;
   }>();
 
-  const { triggerExport, isLoading } = useExport({ resource });
+  const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
 </script>
 
 <Button