@svadmin/ui 0.31.0 → 0.32.0

package/dist/app.css

@@ -17,8 +17,8 @@
   }
 
   :root {
-    --radius: 0.5rem;
-    --background: oklch(0.98 0.002 264);
+    --radius: 0.75rem;
+    --background: oklch(0.975 0.005 264);
     --foreground: oklch(0.13 0.02 265);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.13 0.02 265);
@@ -272,7 +272,7 @@
   
   [data-slot="card"] {
     /* Classic Stripe soft shadow: faint ambient + directional drop */
-    box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.05), 0 4px 16px -4px rgb(0 0 0 / 0.02);
+    box-shadow: 0 2px 5px -1px rgb(0 0 0 / 0.04), 0 1px 1px -1px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
   }
 
   [data-slot="dialog-content"],
@@ -304,14 +304,15 @@ button {
 }
 [data-slot="button"]:active:not(:disabled),
 button:active:not(:disabled) {
-  transform: scale(0.97);
+  transform: scale(0.98);
 }
 
 /* Subtle glowing focus ring for inputs */
+[data-slot="button"]:focus-visible,
 [data-slot="input"]:focus-visible,
 [data-slot="textarea"]:focus-visible,
 [data-slot="select-trigger"]:focus-visible {
-  box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px color-mix(in oklch, var(--color-primary) 30%, transparent) !important;
+  box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent) !important;
   border-color: var(--color-primary);
 }
 
@@ -338,7 +339,7 @@ button:active:not(:disabled) {
 }
 @media (hover: hover) {
   [data-slot="card"]:hover {
-    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
+    box-shadow: 0 6px 16px -4px rgb(0 0 0 / 0.06), 0 4px 8px -2px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
     transform: translateY(-1px);
   }
 }

package/dist/components/AdminApp.svelte

@@ -13,6 +13,17 @@
   import AutoTable from './AutoTable.svelte';
   import AutoForm from './AutoForm.svelte';
   import ShowPage from './ShowPage.svelte';
+
+  // Module-level QueryClient — survives component remounts (SPA only)
+  let _queryClient: QueryClient | null = null;
+  function getOrCreateQueryClient(): QueryClient {
+    if (!_queryClient) {
+      _queryClient = new QueryClient({
+        defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
+      });
+    }
+    return _queryClient;
+  }
   import Toast from './Toast.svelte';
   import LoginPage from './LoginPage.svelte';
   import RegisterPage from './RegisterPage.svelte';
@@ -40,7 +51,7 @@
     /** Theme configuration for dark-first mode, CSS overrides, etc. */
     themeConfig?: ThemeConfig;
     dashboard?: Snippet;
-    loginPage?: Snippet;
+    loginPage?: Snippet<[{ onSuccess: () => void }]>;
     /** Override default components via DI */
     components?: Partial<ComponentRegistry>;
     /** Custom multi-level menu configuration */
@@ -78,28 +89,16 @@
     Skeleton: Skeleton as unknown as ComponentRegistry['Skeleton'],
   };
 
-  // Merge user overrides and set context
-  $effect(() => {
-    setComponentRegistry({ ...defaultComponents, ...userComponents });
-  });
+  setComponentRegistry({ ...defaultComponents, ...userComponents });
 
   // Resolve router provider (default to hash)
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
   const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
-  // Set up initial context synchronously so children can access resources immediately during first render
-  setDataProvider(dataProvider);
-  if (authProvider) setAuthProvider(authProvider);
-  setResources(resources);
-  setRouterProvider(resolvedRouter);
-  if (locale) setLocale(locale);
-  if (userThemeConfig) configureTheme(userThemeConfig);
-  if (defaultTheme) setTheme(defaultTheme);
-
-  // Set up context — use $effect so prop changes are tracked
+  // Set up context — use $effect.pre so prop changes are tracked and children can access during first render
   $effect.pre(() => {
     setDataProvider(dataProvider);
-    if (authProvider) setAuthProvider(authProvider);
+    setAuthProvider(authProvider);
     setResources(resources);
     setRouterProvider(resolvedRouter);
     if (locale) setLocale(locale);
@@ -107,14 +106,10 @@
     if (defaultTheme) setTheme(defaultTheme);
   });
 
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { staleTime: 30_000, retry: 1 },
-    },
-  });
+  // QueryClient — created once and reused across remounts
+  const queryClient = getOrCreateQueryClient();
 
-  // Initialize router with provider synchronously
-  initRouter(resolvedRouter);
+  // Initialize router with provider
   $effect.pre(() => {
     initRouter(resolvedRouter);
   });
@@ -169,7 +164,7 @@
       </div>
     </div>
   {:else if route === '/login' && loginPage}
-    {@render loginPage()}
+    {@render loginPage({ onSuccess: () => { isAuthenticated = true; navigate('/'); } })}
   {:else if route === '/login' && authProvider}
     <LoginPage {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
   {:else if route === '/register' && authProvider?.register}

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

@@ -13,7 +13,9 @@ interface Props {
     /** Theme configuration for dark-first mode, CSS overrides, etc. */
     themeConfig?: ThemeConfig;
     dashboard?: Snippet;
-    loginPage?: Snippet;
+    loginPage?: Snippet<[{
+        onSuccess: () => void;
+    }]>;
     /** Override default components via DI */
     components?: Partial<ComponentRegistry>;
     /** Custom multi-level menu configuration */

package/dist/components/AnimatedCounter.svelte

@@ -14,6 +14,7 @@
 
   let displayValue = $state('0');
   let prevTarget = 0;
+  let currentRaf: number | null = null;
 
   $effect(() => {
     const target = typeof value === 'number' ? value : parseInt(value, 10);
@@ -35,11 +36,16 @@
       displayValue = current.toLocaleString();
 
       if (progress < 1) {
-        requestAnimationFrame(tick);
+        currentRaf = requestAnimationFrame(tick);
       }
     }
 
-    requestAnimationFrame(tick);
+    if (currentRaf) cancelAnimationFrame(currentRaf);
+    currentRaf = requestAnimationFrame(tick);
+
+    return () => {
+      if (currentRaf) cancelAnimationFrame(currentRaf);
+    };
   });
 </script>
 

package/dist/components/AnomalyBadge.svelte

@@ -27,7 +27,11 @@
   }: Props = $props();
 
   // Calculate percentage difference
-  const diff = $derived(baseline === 0 ? 0 : (value - baseline) / Math.abs(baseline));
+  const diff = $derived(
+    baseline === 0 
+      ? (value === 0 ? 0 : (value > 0 ? Infinity : -Infinity))
+      : (value - baseline) / Math.abs(baseline)
+  );
   const isAnomaly = $derived(Math.abs(diff) >= threshold);
   
   // Determine sentiment (good, bad, neutral)

package/dist/components/AuditLogViewer.svelte

@@ -23,6 +23,8 @@
   let drawerOpen = $state(false);
   let drawerLog = $state<AuditLog | null>(null);
 
+  let cancelled = $state(false);
+
   async function loadLogs() {
     if (!authProvider?.getAuditLogs) {
       error = t('settings.auditNotSupported') ?? 'Audit logs are not supported by the current AuthProvider';
@@ -30,21 +32,26 @@
       return;
     }
     loading = true;
+    error = null;
     try {
       const result = await authProvider.getAuditLogs({ page, pageSize });
+      if (cancelled) return;
       logs = result.data;
       total = result.total;
     } catch (e) {
+      if (cancelled) return;
       toast.error((e as Error).message);
     } finally {
-      loading = false;
+      if (!cancelled) loading = false;
     }
   }
 
   $effect(() => {
-    // Track `page` to re-fetch on pagination — this is the single trigger
     void page;
+    cancelled = true;
+    cancelled = false;
     loadLogs();
+    return () => { cancelled = true; };
   });
 
   let totalPages = $derived(Math.ceil(total / pageSize) || 1);

package/dist/components/AutoForm.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useForm, getResource, deriveValidator } from '@svadmin/core';
+  import { slide } from 'svelte/transition';
   import type { FieldDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
@@ -17,13 +18,14 @@
   interface Props {
     resourceName: string;
     id?: string | number;
-    mode?: 'create' | 'edit' | 'clone';
+    mode?: 'create' | 'edit' | 'clone' | 'show';
     fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
     formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     headerContent?: Snippet;
   }
 
   let { resourceName, id, mode = 'create', fieldRenderer, formActions, headerContent }: Props = $props();
+  const isReadonly = $derived(mode === 'show');
 
   // ─── Resource metadata ────────────────────────────────────────────
   const resource = $derived(getResource(resourceName));
@@ -34,6 +36,7 @@
     if (f.showInForm === false) return false;
     if (mode === 'create' && f.showInCreate === false) return false;
     if (mode === 'edit' && f.showInEdit === false) return false;
+    if (mode === 'show' && f.showInShow === false) return false;
     return true;
   }));
 
@@ -71,6 +74,18 @@
 
   const validator = $derived(deriveValidator(formFields));
 
+  $effect(() => {
+    if (mode !== 'create') return;
+    if (!form.isTainted()) {
+      for (const key in defaults) {
+        if (form.values[key] !== defaults[key]) {
+          form.setFieldValue(key, defaults[key]);
+        }
+      }
+      form.untaint();
+    }
+  });
+
   // ─── useForm: single source of truth for values, errors, tainted ──
   const form = useForm({
     get resource() { return resourceName; },
@@ -97,6 +112,8 @@
   const pageTitle = $derived(
     mode === 'create'
       ? `${t('common.create')}${resource.label}`
+      : mode === 'show'
+      ? `${t('common.detail')}${resource.label}`
       : `${t('common.edit')}${resource.label}`
   );
 
@@ -153,10 +170,12 @@
   {:else}
     <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
       {#if submitError}
-        <Alert.Root variant="destructive">
-          <AlertCircle class="h-4 w-4" />
-          <Alert.Description>{submitError}</Alert.Description>
-        </Alert.Root>
+        <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{submitError}</Alert.Description>
+          </Alert.Root>
+        </div>
       {/if}
 
       {#if hasGroups}
@@ -177,10 +196,11 @@
                       {field}
                       value={form.values[field.key]}
                       onchange={(val: unknown) => form.setFieldValue(field.key, val)}
+                      disabled={isReadonly}
                     />
                   {/if}
                   {#if form.errors[field.key]}
-                    <p class="text-destructive text-[0.8125rem] mt-1">{form.errors[field.key]}</p>
+                    <p class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
                   {/if}
                 </div>
               {/each}
@@ -199,10 +219,11 @@
                     {field}
                     value={form.values[field.key]}
                     onchange={(val: unknown) => form.setFieldValue(field.key, val)}
+                    disabled={isReadonly}
                   />
                 {/if}
                 {#if form.errors[field.key]}
-                  <p class="text-destructive text-[0.8125rem] mt-1">{form.errors[field.key]}</p>
+                  <p class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
                 {/if}
               </div>
             {/each}
@@ -213,7 +234,7 @@
       <div class="flex items-center gap-3">
         {#if formActions}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
-        {:else}
+        {:else if !isReadonly}
           <Button type="submit" disabled={form.submitting}>
             {#if form.submitting}
               <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />

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

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
     id?: string | number;
-    mode?: 'create' | 'edit' | 'clone';
+    mode?: 'create' | 'edit' | 'clone' | 'show';
     fieldRenderer?: Snippet<[{
         field: FieldDefinition;
         value: unknown;

package/dist/components/AutoTable.svelte

@@ -9,9 +9,9 @@
     type ColumnVisibilityState,
     type ExpandedState,
   } from '@tanstack/svelte-table';
-  import { createCoreRowModel } from '@tanstack/table-core';
+  import { getCoreRowModel } from '@tanstack/table-core';
 
-  import { useList, useDelete, getResource } from '@svadmin/core';
+  import { useList, useDelete, getResource, notify } from '@svadmin/core';
   import type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { useCan, getAccessControlProvider } from '@svadmin/core';
@@ -146,7 +146,6 @@
         } as any);
       }
     }
-    // Add popover filters
     for (const [key, value] of Object.entries(filterValues)) {
       if (value.trim()) {
         result.push({ field: key, operator: 'contains', value: value.trim() });
@@ -155,6 +154,12 @@
     return result;
   });
 
+  $effect(() => {
+    if (Object.values(filterValues).some(v => v.trim())) {
+      pagination = { ...pagination, current: 1 };
+    }
+  });
+
   // ─── Data fetching ────────────────────────────────────────────
   const listResult = useList({
     get resource() { return resourceName; },
@@ -222,6 +227,14 @@
     }
   });
 
+  // Sync external sorters → TanStack sorting state
+  $effect(() => {
+    const newSorting = sorters.map(s => ({ id: s.field, desc: s.order === 'desc' }));
+    if (JSON.stringify(newSorting) !== JSON.stringify(sorting)) {
+      sorting = newSorting;
+    }
+  });
+
   // ─── Auto-generate columns from resource fields ──────────────
   const visibleFields = $derived(
     resource.fields.filter(f => f.showInList !== false)
@@ -229,7 +242,7 @@
 
   const columns = $derived<ColumnDef<any, Record<string, unknown>>[]>([
     // Selection column
-    ...(selectable && canDelete ? [{
+    ...(selectable && (canDelete || batchActions) ? [{
       id: '_select',
       header: () => '',
       cell: () => '',
@@ -265,7 +278,7 @@
   const tbl = createTable({
     get data() { return query.data?.data ?? []; },
     get columns() { return columns; },
-    getCoreRowModel: createCoreRowModel(),
+    getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
     manualSorting: true,
     getRowId: (row: any) => String(row[primaryKey]),
@@ -291,7 +304,7 @@
     onColumnOrderChange: (updater: any) => {
       columnOrder = typeof updater === 'function' ? updater(columnOrder) : updater;
     },
-    get enableRowSelection() { return selectable && canDelete; },
+    get enableRowSelection() { return selectable && (canDelete || batchActions); },
     get enableExpanding() { return !!expandedRowRender; },
   });
 
@@ -334,7 +347,14 @@
     const ids = Object.keys(rowSelection);
     confirmMessage = t('common.batchDeleteConfirm', { count: ids.length });
     confirmAction = async () => {
-      await Promise.allSettled(ids.map(id => deleteMutation.mutateAsync({ id, resource: resourceName })));
+      const results = await Promise.allSettled(ids.map(id => deleteMutation.mutateAsync({ id, resource: resourceName, successNotification: false })));
+      const succeeded = results.filter(r => r.status === 'fulfilled').length;
+      const failed = results.filter(r => r.status === 'rejected');
+      if (failed.length > 0) {
+        notify({ type: 'error', message: t('common.batchDeletePartialFail', { failed: failed.length, total: ids.length }) });
+      } else {
+        notify({ type: 'success', message: t('common.batchDeleteSuccess', { count: succeeded }) });
+      }
       rowSelection = {};
       confirmOpen = false;
     };
@@ -465,7 +485,7 @@
                     value={filterValues[field.key] ?? ''}
                     onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
                   >
-                    <option value="">全部</option>
+                    <option value="">{t('common.all')}</option>
                     {#each field.options as opt}
                       <option value={opt.value}>{opt.label}</option>
                     {/each}
@@ -500,7 +520,7 @@
   </div>
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-lg bg-card shadow-sm ring-1 ring-border/10 overflow-hidden" role="region" aria-label="{resource.label} {t('common.list')}">
+  <div class="rounded-[24px] bg-card/80 backdrop-blur-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden ring-1 ring-border/30" role="region" aria-label="{resource.label} {t('common.list')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -536,7 +556,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    class={cn("bg-muted/50 hover:bg-muted/50", dragProps.class)}
+                    class={cn("bg-transparent hover:bg-muted/10 border-b border-border/20 uppercase tracking-[0.12em] text-[10px] text-muted-foreground/70 font-semibold py-4", dragProps.class)}
                     style={header.getSize() !== 150 ? `width:${header.getSize()}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -552,7 +572,7 @@
                       <Button
                         variant="ghost"
                         size="sm"
-                        class="flex items-center gap-1 hover:text-foreground -ml-3 h-auto py-1 px-2"
+                        class="flex items-center gap-1 hover:text-foreground -ml-2 h-auto py-1 px-2 uppercase tracking-wide text-[0.7rem] font-semibold"
                         onclick={() => header.column.toggleSorting()}
                       >
                         {visibleFields.find(f => f.key === header.id)?.label ?? header.id}
@@ -578,7 +598,7 @@
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
-                    <Table.Row {...props} class="transition-colors border-0 even:bg-muted/20 {row.getIsSelected() ? 'bg-accent/50' : 'hover:bg-muted/40'}">
+                    <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row.getIsSelected() ? 'bg-primary/5' : 'hover:bg-muted/20'}">
                       {#each row.getVisibleCells() as cell}
                         <Table.Cell>
                           {#if cell.column.id === '_select'}
@@ -670,7 +690,7 @@
                 </ContextMenu.Content>
               </ContextMenu.Root>
               {#if expandedRowRender && row.getIsExpanded()}
-                <Table.Row class="bg-muted/30">
+                <Table.Row class="bg-muted/10 border-b border-border/10 transition-all">
                   <Table.Cell colspan={row.getVisibleCells().length}>
                     {@render expandedRowRender({ record })}
                   </Table.Cell>
@@ -709,12 +729,12 @@
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
-              class="rounded-xl shadow-sm ring-1 ring-border/10 bg-card p-4 transition-colors {row.getIsSelected() ? 'ring-2 ring-primary bg-accent/30' : ''}"
+              class="rounded-[20px] shadow-[0_4px_20px_rgb(0,0,0,0.03)] ring-1 ring-border/20 bg-card p-5 transition-all {row.getIsSelected() ? 'ring-2 ring-primary/50 bg-primary/5' : ''}"
             >
               <!-- Card header: ID + select + actions -->
               <div class="flex items-center justify-between mb-3">
                 <div class="flex items-center gap-2">
-                  {#if selectable && canDelete}
+                  {#if selectable && (canDelete || batchActions)}
                     <Checkbox
                       checked={row.getIsSelected()}
                       onCheckedChange={() => row.toggleSelected()}

package/dist/components/Breadcrumbs.svelte

@@ -26,9 +26,6 @@
        if (resourceNames.includes(seg)) {
           const res = resources.find(r => r.name === seg)!;
           result.push({ label: res.label, href: formatLink(currentPath) });
-       } else if (i > 0 && resourceNames.includes(segments[i-1])) {
-          // This is a parent ID (e.g. /teams/123/users)
-          result.push({ label: `#${seg}`, href: formatLink(currentPath) });
        } else if (seg === 'create') {
           result.push({ label: t('common.create') ?? 'Create', href: formatLink(currentPath) });
        } else if (['edit', 'show', 'clone'].includes(seg) && segments[i+1]) {
@@ -39,6 +36,9 @@
           currentPath += `/${id}`; // advance path by id
           result.push({ label: `${actionLabel} #${id}`, href: formatLink(currentPath) });
           i++; // skip next segment since we consumed the id
+       } else if (i > 0 && resourceNames.includes(segments[i-1])) {
+          // This is a parent ID (e.g. /teams/123/users) and we are not an action
+          result.push({ label: `#${seg}`, href: formatLink(currentPath) });
        }
     }
 

package/dist/components/ChatDialog.svelte

@@ -53,6 +53,19 @@
     });
   });
 
+  // ─── Listen for cross-component triggers ─────────────────────
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const handler = (e: CustomEvent<string>) => {
+      open = true;
+      minimized = false;
+      inputValue = e.detail;
+      sendMessage();
+    };
+    window.addEventListener('svadmin:ask-ai', handler as EventListener);
+    return () => window.removeEventListener('svadmin:ask-ai', handler as EventListener);
+  });
+
   // ─── Restore persisted history on mount ─────────────────────
   $effect(() => {
     if (initialized) return;
@@ -142,6 +155,12 @@
 
     messages = [...messages, userMsg];
     inputValue = '';
+    doSend();
+  }
+
+  async function doSend() {
+    if (isStreaming || (!provider && !agent)) return;
+    
     scrollToBottom();
 
     // Create placeholder assistant message
@@ -200,6 +219,16 @@
               // Register in the core approval system
               const reqId = event.id;
               pendingApprovalIds = [...pendingApprovalIds, reqId];
+              
+              registerApproval(reqId, (approved) => {
+                messages = [...messages, {
+                  id: genId(),
+                  role: 'user',
+                  content: approved ? `User approved execution of tool '${event.tool}'` : `User rejected execution of tool '${event.tool}'`,
+                  timestamp: Date.now()
+                }];
+                doSend();
+              });
 
               collectedActions.push(
                 {
@@ -319,9 +348,18 @@
     }
   }
 
+  function escapeHtml(unsafe: string) {
+    return unsafe
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
   /** Simple markdown→html: bold, italic, code blocks, inline code, line breaks */
   function renderMarkdown(text: string): string {
-    return text
+    return escapeHtml(text)
       .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="chat-code-block"><code>$2</code></pre>')
       .replace(/`([^`]+)`/g, '<code class="chat-inline-code">$1</code>')
       .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')

package/dist/components/CommandPalette.svelte

@@ -16,7 +16,7 @@
   let { open = $bindable(false), onAskAI }: Props = $props();
   let searchValue = $state('');
 
-  const resources = getResources();
+  const resources = $derived(getResources());
   const hasAI = $derived(!!(getAgentProvider() || getChatProvider()));
 
   function close() {
@@ -71,7 +71,7 @@
         {#if hasAI && searchValue.trim()}
           <Command.Group heading="AI">
             <Command.Item
-              value="ask-ai-{searchValue}"
+              value={"ask-ai-" + searchValue}
               onSelect={askAI}
               class={itemClass}
             >
@@ -111,7 +111,7 @@
         <Command.Group heading={t('common.actions')}>
           {#each resources as r}
             <Command.Item
-              value="create-{r.name}"
+              value={"create-" + r.name}
               onSelect={() => act(() => navigate(`/${r.name}/create`))}
               class={itemClass}
             >

package/dist/components/ConfirmDialog.svelte

@@ -25,9 +25,23 @@
   const resolvedTitle = $derived(title ?? t('common.confirmAction'));
   const resolvedConfirmText = $derived(confirmText ?? t('common.confirm'));
   const resolvedCancelText = $derived(cancelText ?? t('common.cancel'));
+
+  let confirmed = $state(false);
+
+  function handleConfirm() {
+    confirmed = true;
+    onconfirm();
+  }
+
+  function handleOpenChange(v: boolean) {
+    if (!v && !confirmed) {
+      oncancel();
+    }
+    if (!v) confirmed = false;
+  }
 </script>
 
-<AlertDialog.Root bind:open onOpenChange={(v: boolean) => { if (!v) oncancel(); }}>
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
   <AlertDialog.Content>
     <AlertDialog.Header>
       <AlertDialog.Title>{resolvedTitle}</AlertDialog.Title>
@@ -43,7 +57,7 @@
       </AlertDialog.Cancel>
       <AlertDialog.Action>
         {#snippet child({ props })}
-          <Button variant={variantMap[variant as keyof typeof variantMap]} {...props} onclick={onconfirm}>
+          <Button variant={variantMap[variant as keyof typeof variantMap]} {...props} onclick={handleConfirm}>
             {resolvedConfirmText}
           </Button>
         {/snippet}

package/dist/components/DraggableHeader.svelte

@@ -29,10 +29,9 @@
   let dragIndex = $state<number | null>(null);
   let dropIndex = $state<number | null>(null);
 
-  // Restore saved order from localStorage (once on mount)
   let _restored = false;
   $effect(() => {
-    if (_restored) return;
+    if (_restored || columns.length === 0) return;
     const storageKey = `svadmin-colorder-${resourceName}`;
     if (typeof window === 'undefined') return;
     _restored = true;