@svadmin/ui 0.31.1 → 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,25 +89,13 @@
     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);
-  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);
     setAuthProvider(authProvider);
@@ -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/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

@@ -11,7 +11,7 @@
   } from '@tanstack/svelte-table';
   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: () => '',
@@ -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/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() {

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/FieldRenderer.svelte

@@ -20,11 +20,11 @@
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
 
-  let { field, value, onchange, children } = $props<{
+  let { field, value, onchange, disabled, children } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
-    /** Optional custom renderer snippet */
+    disabled?: boolean;
     children?: Snippet;
   }>();
 
@@ -98,6 +98,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder={t('field.enterValue', { label: field.label })}
     />
 
@@ -108,6 +109,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder="name@example.com"
     />
 
@@ -118,6 +120,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder="https://"
     />
 
@@ -128,6 +131,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder="+1 (555) 000-0000"
     />
 
@@ -139,6 +143,7 @@
         value={strVal || '#000000'}
         oninput={(e) => onchange((e.target as HTMLInputElement).value)}
         class="h-10 w-14 cursor-pointer rounded-md border border-input bg-background p-1"
+        disabled={disabled}
       />
       <Input
         type="text"
@@ -146,6 +151,7 @@
         oninput={(e) => onchange((e.target as HTMLInputElement).value)}
         placeholder="#000000"
         class="max-w-32 font-mono text-sm"
+        {disabled}
       />
       {#if strVal}
         <span
@@ -160,8 +166,12 @@
       id={field.key}
       type="number"
       value={String(numVal)}
-      oninput={(e) => onchange(parseFloat((e.target as HTMLInputElement).value) || 0)}
+      oninput={(e) => {
+        const v = (e.target as HTMLInputElement).value;
+        onchange(v === '' ? null : Number(v));
+      }}
       required={field.required}
+      {disabled}
     />
 
   {:else if field.type === 'richtext'}
@@ -173,6 +183,7 @@
         placeholder={t('field.enterValue', { label: field.label })}
         preset="full"
         onchange={(html: string) => onchange(html)}
+        {disabled}
       />
     {:else}
       <Textarea
@@ -180,6 +191,7 @@
         value={strVal}
         oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
         required={field.required}
+        {disabled}
         rows={10}
         placeholder={t('field.enterValue', { label: field.label })}
         class="resize-y"
@@ -192,6 +204,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
       required={field.required}
+      {disabled}
       rows={4}
       placeholder={t('field.enterValue', { label: field.label })}
       class="resize-y"
@@ -206,24 +219,31 @@
       optionLabel={field.optionLabel ?? 'title'}
       optionValue={field.optionValue ?? 'id'}
       placeholder={t('field.selectPlaceholder')}
+      {disabled}
     />
 
   {:else if field.type === 'select'}
     {#if (field.options?.length ?? 0) > 8}
-      <!-- Many options → use ComboboxField-style search -->
-      <ComboboxField
+      <select
         id={field.key}
-        resource=""
-        value={value as string | number | null}
-        onchange={(v) => onchange(v)}
-        searchable={false}
-      />
+        class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        value={strVal}
+        onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
+        required={field.required}
+        disabled={disabled}
+      >
+        <option value="">{t('field.selectPlaceholder')}</option>
+        {#each field.options ?? [] as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
     {:else}
       <Select
         id={field.key}
         value={strVal}
         onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
         required={field.required}
+        {disabled}
         placeholder={t('field.selectPlaceholder')}
       >
         {#each field.options ?? [] as opt}
@@ -244,6 +264,7 @@
             id={`${field.key}-${opt.value}`}
             checked={multiVal.includes(opt.value)}
             onCheckedChange={() => toggleMulti(opt.value)}
+            disabled={disabled}
           />
           {opt.label}
         </label>
@@ -270,6 +291,7 @@
         id={field.key}
         checked={boolVal}
         onCheckedChange={(v) => onchange(v)}
+        disabled={disabled}
       />
       <span class="text-sm text-muted-foreground">{boolVal ? t('common.yes') : t('common.no')}</span>
     </div>
@@ -294,6 +316,7 @@
         type="text"
         placeholder={t('field.tagsPlaceholder')}
         onkeydown={handleTagKeydown}
+        {disabled}
       />
     </div>
 
@@ -304,6 +327,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
     />
 
   {:else if field.type === 'images'}
@@ -317,6 +341,7 @@
             oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}
             placeholder="https://example.com/image.jpg"
             class="flex-1"
+            {disabled}
           />
           {#if url}
             <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
@@ -342,6 +367,7 @@
           // keep raw text until valid JSON
         }
       }}
+      {disabled}
       rows={6}
       class="resize-y font-mono text-xs"
     />
@@ -352,6 +378,7 @@
       type="text"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      {disabled}
     />
   {/if}
 </div>

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

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
-    /** Optional custom renderer snippet */
+    disabled?: boolean;
     children?: Snippet;
 };
 declare const FieldRenderer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Header.svelte

@@ -26,12 +26,11 @@
     siteUrl?: string;
   }>();
 
-  // Retrieve optional component overrides from registry
-  const registry = getComponentRegistry() || {} as any;
-  const CustomBreadcrumbs = registry.Breadcrumbs;
-  const CustomThemeToggle = registry.ThemeToggle;
-  const CustomUserMenu = registry.UserMenu;
-  const CustomNotificationPanel = registry.NotificationPanel;
+  const registry = $derived(getComponentRegistry() || {} as any);
+  const CustomBreadcrumbs = $derived(registry.Breadcrumbs);
+  const CustomThemeToggle = $derived(registry.ThemeToggle);
+  const CustomUserMenu = $derived(registry.UserMenu);
+  const CustomNotificationPanel = $derived(registry.NotificationPanel);
 </script>
 
 <header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-card/60 backdrop-blur-md px-4 md:px-6">

package/dist/components/Layout.svelte

@@ -2,7 +2,6 @@
   import type { Snippet } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import Sidebar from './Sidebar.svelte';
-  import Toast from './Toast.svelte';
   import Header from './Header.svelte';
   import CommandPalette from './CommandPalette.svelte';
   import KeyboardShortcuts from './KeyboardShortcuts.svelte';
@@ -168,5 +167,4 @@
   />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
   <ChatDialog />
-  <Toast />
 {/if}

package/dist/components/LoginPage.svelte

@@ -38,7 +38,7 @@
     socialProviders?: SocialProvider[];
   }>();
 
-  const login = useLogin();
+  const login = useLogin({ errorMessage: false });
   const authProvider = getAuthProvider();
 
   let identifier = $state('');

package/dist/components/NavigateToResource.svelte

@@ -4,9 +4,11 @@
   
   const { menuItems } = useMenu();
 
+  let navigated = false;
   $effect(() => {
-    // Automatically navigate to the first defined resource
-    if (menuItems.length > 0) {
+    // Navigate to first resource ONCE — avoid infinite re-triggers
+    if (!navigated && menuItems.length > 0) {
+      navigated = true;
       navigate(menuItems[0].route);
     }
   });

package/dist/components/PermissionMatrix.svelte

@@ -15,7 +15,7 @@
     isGranted,
     
     // Interactive states
-    selectedRole = $bindable(roles[0]?.code || ''),
+    selectedRole = $bindable(''),
     loading = false,
     
     // Feedback and alerts (passed down from upper business logic)
@@ -44,6 +44,11 @@
     onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
   } = $props();
 
+  $effect(() => {
+    if (!selectedRole && roles.length > 0) {
+      selectedRole = roles[0].code;
+    }
+  });
 </script>
 
 <div class="h-full flex flex-col pt-2">

package/dist/components/ShowPage.svelte

@@ -73,5 +73,14 @@
         {/each}
       </Card.Content>
     </Card.Root>
+  {:else}
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-8 text-center">
+        <p class="text-muted-foreground">{t('common.noData')}</p>
+        {#if query.isError}
+          <p class="text-sm text-destructive mt-2">{(query.error as Error)?.message ?? t('common.operationFailed')}</p>
+        {/if}
+      </Card.Content>
+    </Card.Root>
   {/if}
 </div>

package/dist/components/Sidebar.svelte

@@ -80,10 +80,11 @@
   let navItems = $state.raw<NavItem[]>([]);
 
   $effect(() => {
-    // Re-run when locale or resources change
     const localeVal = getLocale();
+    const currentResources = getResources();
+    let cancelled = false;
 
-    Promise.all(resources.map(async (r) => {
+    Promise.all(currentResources.map(async (r) => {
       try {
         const { can } = await canAccessAsync(r.name, 'list');
         return { r, can };
@@ -91,6 +92,7 @@
         return { r, can: false };
       }
     })).then(results => {
+      if (cancelled) return;
       const items: NavItem[] = [{ path: '/', label: t('common.home'), Icon: LayoutDashboard }];
       for (const { r, can } of results) {
         if (can) {
@@ -104,6 +106,8 @@
       }
       navItems = items;
     });
+
+    return () => { cancelled = true; };
   });
 
   /** Toggle between available locales */
@@ -254,9 +258,10 @@
                 {@const active = isActive(item.path)}
                 <a
                   href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                  class="flex items-center gap-3 rounded-lg px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-200
+                  onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+                  class="flex items-center gap-3 rounded-xl px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-300
                   {active
-                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20 translate-x-1'
                     : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
                 >
                   <item.Icon class="h-4 w-4 flex-shrink-0" />
@@ -277,10 +282,11 @@
                   <a
                     {...props}
                     href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                    class="flex items-center justify-center gap-3 rounded-lg px-3 {pyClass} text-sm font-medium transition-all duration-200
+                    onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+                    class="flex items-center justify-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
                     {active
-                      ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+                      ? 'bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20'
+                      : 'text-sidebar-foreground/60 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground'}"
                   >
                     <item.Icon class="h-4 w-4 flex-shrink-0" />
                   </a>
@@ -293,9 +299,10 @@
           {:else}
             <a
               href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-              class="flex items-center gap-3 rounded-lg px-3 {pyClass} text-sm font-medium transition-all duration-200
+              onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+              class="flex items-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
               {active
-                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20 translate-x-1'
                 : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
             >
               <item.Icon class="h-4 w-4 flex-shrink-0" />

package/dist/components/SidebarItem.svelte

@@ -102,7 +102,7 @@
           rel={isExternal ? 'noopener noreferrer' : undefined}
           class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
           {active
-            ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+            ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5'
             : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
         >
           <Icon class="h-4 w-4 flex-shrink-0" />
@@ -121,7 +121,7 @@
     rel={isExternal ? 'noopener noreferrer' : undefined}
     class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
     {active
-      ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+      ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5 font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:bg-primary before:rounded-r-md overflow-hidden relative'
       : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
     style="padding-left: {12 + depth * 12}px"
   >

package/dist/components/TenantSwitcher.svelte

@@ -7,7 +7,7 @@
 
   let {
     tenants = [],
-    currentTenantId = $bindable(''),
+    currentTenantId = $bindable(undefined as string | undefined),
     collapsed = false,
     onSwitch,
     headerSnippet,
@@ -74,7 +74,7 @@
             {/if}
           </div>
           <span class="flex-1 truncate">{tenant.name}</span>
-          {#if tenant.id === currentTenantId}
+          {#if tenant.id === currentTenant?.id}
             <Check class="h-4 w-4 text-primary" />
           {/if}
         </DropdownMenu.Item>

package/dist/components/VoiceInput.svelte

@@ -89,6 +89,18 @@
       isListening = false;
       if (onend) onend();
     };
+
+    return () => {
+      if (recognition) {
+        isListening = false;
+        recognition.onend = () => {};
+        recognition.stop();
+        recognition.onstart = null;
+        recognition.onresult = null;
+        recognition.onerror = null;
+        recognition.onend = null;
+      }
+    };
   });
 
   function toggleListening(e?: MouseEvent) {

package/dist/components/ui/dialog/dialog-content.svelte

@@ -28,7 +28,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 text-sm ring-1 duration-100 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-6 text-sm ring-1 duration-300 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none shadow-2xl",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -12,6 +12,6 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	data-slot="dialog-overlay"
-	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+	class={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/20 duration-200 backdrop-blur-sm fixed inset-0 isolate z-50", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -15,7 +15,8 @@
 		...restProps
 	}: Props = $props();
 
-	let isOpen = $derived(getContext<() => boolean>("svadmin-dropdown-open")?.() ?? true);
+	const getOpen = getContext<() => boolean>("svadmin-dropdown-open");
+	let isOpen = $derived(getOpen?.() ?? true);
 </script>
 
 {#if isOpen}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.31.1",
+  "version": "0.32.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.22.1",
+    "@svadmin/core": "^0.23.0",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",