@svadmin/ui 0.32.1 → 0.32.4

package/dist/components/AdminApp.svelte

@@ -91,8 +91,8 @@
 
   setComponentRegistry({ ...defaultComponents, ...userComponents });
 
-  // Resolve router provider (default to hash)
-  const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
+  const defaultRouter = createHashRouterProvider();
+  const resolvedRouter = $derived(routerProvider ?? defaultRouter);
   const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
   // Set up context — use $effect.pre so prop changes are tracked and children can access during first render

package/dist/components/AuditLogViewer.svelte

@@ -23,7 +23,7 @@
   let drawerOpen = $state(false);
   let drawerLog = $state<AuditLog | null>(null);
 
-  let cancelled = $state(false);
+  let requestId = 0;
 
   async function loadLogs() {
     if (!authProvider?.getAuditLogs) {
@@ -31,27 +31,25 @@
       loading = false;
       return;
     }
+    const currentId = ++requestId;
     loading = true;
     error = null;
     try {
       const result = await authProvider.getAuditLogs({ page, pageSize });
-      if (cancelled) return;
+      if (currentId !== requestId) return;
       logs = result.data;
       total = result.total;
     } catch (e) {
-      if (cancelled) return;
+      if (currentId !== requestId) return;
       toast.error((e as Error).message);
     } finally {
-      if (!cancelled) loading = false;
+      if (currentId === requestId) loading = false;
     }
   }
 
   $effect(() => {
     void page;
-    cancelled = true;
-    cancelled = false;
     loadLogs();
-    return () => { cancelled = true; };
   });
 
   let totalPages = $derived(Math.ceil(total / pageSize) || 1);

package/dist/components/AutoForm.svelte

@@ -22,9 +22,10 @@
     fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
     formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     headerContent?: Snippet;
+    onSuccess?: () => void;
   }
 
-  let { resourceName, id, mode = 'create', fieldRenderer, formActions, headerContent }: Props = $props();
+  let { resourceName, id, mode = 'create', fieldRenderer, formActions, headerContent, onSuccess }: Props = $props();
   const isReadonly = $derived(mode === 'show');
 
   // ─── Resource metadata ────────────────────────────────────────────
@@ -104,6 +105,7 @@
     submitError = null;
     try {
       await form.submit();
+      onSuccess?.();
     } catch (e) {
       submitError = e instanceof Error ? e.message : t('common.operationFailed');
     }

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

@@ -14,6 +14,7 @@ interface Props {
         onSubmit: () => void;
     }]>;
     headerContent?: Snippet;
+    onSuccess?: () => void;
 }
 declare const AutoForm: import("svelte").Component<Props, {}, "">;
 type AutoForm = ReturnType<typeof AutoForm>;

package/dist/components/AutoTable.svelte

@@ -11,7 +11,7 @@
   } from '@tanstack/svelte-table';
   import { getCoreRowModel } from '@tanstack/table-core';
 
-  import { useList, useDelete, getResource, notify } from '@svadmin/core';
+  import { useList, useDelete, useDeleteMany, 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';
@@ -170,6 +170,8 @@
   const query = listResult;
   const deleteResult = useDelete({ get resource() { return resourceName; } });
   const deleteMutation = deleteResult.mutation;
+  const deleteManyResult = useDeleteMany({ get resource() { return resourceName; } });
+  const deleteManyMutation = deleteManyResult.mutation;
 
   // ─── Permissions ──────────────────────────────────────────────
   const acEnabled = $derived(!!getAccessControlProvider());
@@ -347,13 +349,11 @@
     const ids = Object.keys(rowSelection);
     confirmMessage = t('common.batchDeleteConfirm', { count: ids.length });
     confirmAction = async () => {
-      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 }) });
+      try {
+        await deleteManyMutation.mutateAsync({ ids, resource: resourceName, successNotification: false });
+        notify({ type: 'success', message: t('common.batchDeleteSuccess', { count: ids.length }) });
+      } catch {
+        notify({ type: 'error', message: t('common.batchDeletePartialFail', { failed: 1, total: ids.length }) });
       }
       rowSelection = {};
       confirmOpen = false;
@@ -374,13 +374,13 @@
         return String(val);
       })
     );
-    const csv = [headers.join(','), ...rows.map(r => r.map(v => `"${v.replace(new RegExp('"', 'g'), '""')}"`).join(','))].join('\n');
+    const csv = [headers.map(h => `"${h.replace(/"/g, '""')}"`).join(','), ...rows.map(r => r.map(v => `"${v.replace(/"/g, '""')}"`).join(','))].join('\n');
     const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
     const link = document.createElement('a');
     link.href = URL.createObjectURL(blob);
     link.download = `${resourceName}_${new Date().toISOString().slice(0, 10)}.csv`;
     link.click();
-    URL.revokeObjectURL(link.href);
+    setTimeout(() => URL.revokeObjectURL(link.href), 1000);
   }
 
   function goToPage(page: number) {

package/dist/components/Breadcrumbs.svelte

@@ -5,7 +5,7 @@
   import { t } from '@svadmin/core/i18n';
   import * as Breadcrumb from './ui/breadcrumb/index.js';
 
-  const resources = getResources();
+  const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
 
   interface Crumb { label: string; href: string; }
 

package/dist/components/ChatDialog.svelte

@@ -89,26 +89,45 @@
 
   // ─── Persist on change (debounced) ──────────────────────────
   let persistTimer: ReturnType<typeof setTimeout> | null = null;
+  let lastPersistSnapshot: ChatMessage[] | null = null;
+
+  function flushPersist(snapshot: ChatMessage[]) {
+    if (onPersist) {
+      onPersist(snapshot);
+    } else if (persistKey) {
+      try {
+        localStorage.setItem(persistKey, JSON.stringify(snapshot));
+      } catch {
+        // storage full or unavailable
+      }
+    }
+  }
 
   $effect(() => {
-    // Access `messages` to subscribe to changes
     const snapshot = messages;
     if (!initialized) return;
 
     if (persistTimer) clearTimeout(persistTimer);
+    lastPersistSnapshot = snapshot;
     persistTimer = setTimeout(() => {
-      if (onPersist) {
-        onPersist(snapshot);
-      } else if (persistKey) {
-        try {
-          localStorage.setItem(persistKey, JSON.stringify(snapshot));
-        } catch {
-          // storage full or unavailable
-        }
-      }
+      persistTimer = null;
+      flushPersist(snapshot);
     }, 300);
 
-    return () => { if (persistTimer) clearTimeout(persistTimer); };
+    return () => {
+      if (persistTimer) {
+        clearTimeout(persistTimer);
+        persistTimer = null;
+      }
+    };
+  });
+
+  $effect(() => {
+    return () => {
+      if (lastPersistSnapshot != null) {
+        flushPersist(lastPersistSnapshot);
+      }
+    };
   });
 
   function genId(): string {
@@ -192,6 +211,7 @@
         const collectedActions: ChatAction[] = [];
 
         for await (const event of stream) {
+          if (!isStreaming) break;
           switch (event.type) {
             case 'text':
               assistantMsg.content += event.content;
@@ -216,7 +236,6 @@
               break;
 
             case 'approval_request': {
-              // Register in the core approval system
               const reqId = event.id;
               pendingApprovalIds = [...pendingApprovalIds, reqId];
               
@@ -227,7 +246,9 @@
                   content: approved ? `User approved execution of tool '${event.tool}'` : `User rejected execution of tool '${event.tool}'`,
                   timestamp: Date.now()
                 }];
-                doSend();
+                if (agent?.approveToolCall) {
+                  agent.approveToolCall(reqId, approved);
+                }
               });
 
               collectedActions.push(
@@ -269,6 +290,7 @@
 
         if (result && typeof result === 'object' && Symbol.asyncIterator in result) {
           for await (const chunk of result as AsyncGenerator<string>) {
+            if (!isStreaming) break;
             assistantMsg.content += chunk;
             messages = [...messages.slice(0, -1), { ...assistantMsg }];
             scrollToBottom();
@@ -359,12 +381,22 @@
 
   /** Simple markdown→html: bold, italic, code blocks, inline code, line breaks */
   function renderMarkdown(text: string): string {
-    return escapeHtml(text)
-      .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="chat-code-block"><code>$2</code></pre>')
+    const escaped = escapeHtml(text);
+    const codeBlocks: string[] = [];
+    let processed = escaped.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+      const idx = codeBlocks.length;
+      codeBlocks.push(`<pre class="chat-code-block"><code>${code}</code></pre>`);
+      return `\x00CODEBLOCK${idx}\x00`;
+    });
+    processed = processed
       .replace(/`([^`]+)`/g, '<code class="chat-inline-code">$1</code>')
       .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
       .replace(/\*(.+?)\*/g, '<em>$1</em>')
       .replace(/\n/g, '<br>');
+    for (let i = 0; i < codeBlocks.length; i++) {
+      processed = processed.replace(`\x00CODEBLOCK${i}\x00`, codeBlocks[i]);
+    }
+    return processed;
   }
 
   const suggestions = $derived([

package/dist/components/ComboboxField.svelte

@@ -9,6 +9,14 @@
   import { Skeleton } from './ui/skeleton/index.js';
   import { ChevronsUpDown, Check, X, Search } from '@lucide/svelte';
 
+  function clickOutside(node: HTMLElement) {
+    const handler = (e: MouseEvent) => {
+      if (!node.contains(e.target as Node)) open = false;
+    };
+    document.addEventListener('click', handler, true);
+    return { destroy() { document.removeEventListener('click', handler, true); } };
+  }
+
   interface Props {
     resource: string;
     value?: string | number | null;
@@ -60,6 +68,8 @@
   function handleClear(e: Event) {
     e.stopPropagation();
     onchange?.(null);
+    open = false;
+    searchInputValue = '';
   }
 
   function handleSearchInput(e: Event) {
@@ -69,7 +79,7 @@
   }
 </script>
 
-<div class="relative">
+<div class="relative" use:clickOutside>
   <Button
     variant="outline"
     type="button"

package/dist/components/ConfirmDialog.svelte

@@ -50,7 +50,7 @@
     <AlertDialog.Footer>
       <AlertDialog.Cancel>
         {#snippet child({ props })}
-          <Button variant="outline" {...props} onclick={oncancel}>
+          <Button variant="outline" {...props}>
             {resolvedCancelText}
           </Button>
         {/snippet}

package/dist/components/DrawerForm.svelte

@@ -15,7 +15,7 @@
 
   const resource = $derived(getResource(resourceName));
 
-  function handleClose() {
+  function handleSuccess() {
     open = false;
     onSuccess?.();
   }
@@ -29,7 +29,7 @@
       </Sheet.Title>
     </Sheet.Header>
     <div class="flex-1 overflow-y-auto">
-      <AutoForm {resourceName} {mode} {id} />
+      <AutoForm {resourceName} {mode} {id} onSuccess={handleSuccess} />
     </div>
   </Sheet.Content>
 </Sheet.Root>

package/dist/components/FieldRenderer.svelte

@@ -30,11 +30,18 @@
 
   // Typed accessors
   const strVal = $derived((value as string) ?? '');
-  const numVal = $derived((value as number) ?? 0);
+  const numVal = $derived(value as number | null | undefined);
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
   const imagesVal = $derived((value as string[]) ?? []);
+  let jsonEditText = $state('');
+  let jsonEditing = false;
+
+  $effect(() => {
+    if (jsonEditing) return;
+    jsonEditText = typeof value === 'string' ? String(value) : JSON.stringify(value, null, 2);
+  });
 
   function handleTagKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') {
@@ -165,7 +172,7 @@
     <Input
       id={field.key}
       type="number"
-      value={String(numVal)}
+      value={numVal == null ? '' : String(numVal)}
       oninput={(e) => {
         const v = (e.target as HTMLInputElement).value;
         onchange(v === '' ? null : Number(v));
@@ -359,10 +366,17 @@
   {:else if field.type === 'json'}
     <Textarea
       id={field.key}
-      value={typeof value === 'string' ? strVal : JSON.stringify(value, null, 2)}
+      value={jsonEditText}
+      onfocus={() => { jsonEditing = true; }}
+      onblur={() => {
+        jsonEditing = false;
+        jsonEditText = typeof value === 'string' ? String(value) : JSON.stringify(value, null, 2);
+      }}
       oninput={(e) => {
+        const raw = (e.target as HTMLTextAreaElement).value;
+        jsonEditText = raw;
         try {
-          onchange(JSON.parse((e.target as HTMLTextAreaElement).value));
+          onchange(JSON.parse(raw));
         } catch {
           // keep raw text until valid JSON
         }

package/dist/components/InlineEdit.svelte

@@ -17,6 +17,7 @@
   let editValue = $state('');
   let inputRef = $state<HTMLInputElement | null>(null);
   let saving = $state(false);
+  let savePending = false;
   const displayValue = $derived(String(value ?? ''));
 
   const { mutation } = useUpdate({ get resource() { return resourceName; } });
@@ -31,12 +32,13 @@
   }
 
   async function save() {
-    if (!editing || saving) return;
-    const newValue = field.type === 'number' ? Number(editValue) : editValue;
+    if (!editing || saving || savePending) return;
+    const newValue = field.type === 'number' ? (editValue.trim() === '' ? null : (() => { const n = Number(editValue); return isNaN(n) ? value : n; })()) : editValue;
     if (newValue === value) {
       editing = false;
       return;
     }
+    savePending = true;
     saving = true;
     try {
       await mutation.mutateAsync({
@@ -50,6 +52,7 @@
       // Keep editing on error
     } finally {
       saving = false;
+      savePending = false;
     }
   }
 
@@ -59,9 +62,16 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') save();
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      save();
+    }
     if (e.key === 'Escape') cancel();
   }
+
+  function handleBlur() {
+    if (!savePending) save();
+  }
 </script>
 
 {#if editing}
@@ -70,7 +80,7 @@
     type={field.type === 'number' ? 'number' : 'text'}
     bind:value={editValue}
     onkeydown={handleKeydown}
-    onblur={save}
+    onblur={handleBlur}
     disabled={saving}
     class="h-7 w-full rounded border bg-background px-2 text-sm outline-none ring-1 ring-primary/50 focus:ring-2 focus:ring-primary transition-all"
   />

package/dist/components/Layout.svelte

@@ -52,9 +52,13 @@
 
   async function handleLogout() {
     if (!auth) return;
-    const result = await auth.logout();
-    if (result.success) {
-      navigate(result.redirectTo ?? '/login');
+    try {
+      const result = await auth.logout();
+      if (result.success) {
+        navigate(result.redirectTo ?? '/login');
+      }
+    } catch {
+      navigate('/login');
     }
   }
 

package/dist/components/ModalForm.svelte

@@ -18,7 +18,7 @@
   const fieldCount = $derived(resource.fields.filter(f => f.showInForm !== false).length);
   const dialogWidth = $derived(fieldCount > 8 ? 'sm:max-w-3xl' : fieldCount > 5 ? 'sm:max-w-2xl' : 'sm:max-w-lg');
 
-  function handleClose() {
+  function handleSuccess() {
     open = false;
     onSuccess?.();
   }
@@ -32,7 +32,7 @@
           {mode === 'create' ? `${t('common.create')}${resource.label}` : `${t('common.edit')}${resource.label}`}
         </Dialog.DialogTitle>
       </Dialog.DialogHeader>
-      <AutoForm {resourceName} {mode} {id} />
+      <AutoForm {resourceName} {mode} {id} onSuccess={handleSuccess} />
     </Dialog.DialogContent>
   </Dialog.Dialog>
 {/if}

package/dist/components/SidebarItem.svelte

@@ -39,8 +39,7 @@
   function isActive(itemHref: string | undefined): boolean {
     if (!itemHref) return false;
     if (itemHref === '/') return currentPath === '/';
-    // Remove hash/leading slash for comparison if necessary, but currentPath usually starts with /
-    return currentPath.startsWith(itemHref);
+    return currentPath.startsWith(itemHref) && (currentPath.length === itemHref.length || currentPath[itemHref.length] === '/');
   }
 
   /** Check if any child (recursively) is active — used to auto-open parent groups */

package/dist/components/StepsForm.svelte

@@ -61,6 +61,7 @@
     get action() { return mode; },
     get id() { return id; },
     get defaultValues() { return defaults; },
+    stepsCount: steps.length,
     redirect: 'list',
     warnWhenUnsavedChanges: true,
     get validate() { return validator; },

package/dist/components/UndoableNotification.svelte

@@ -12,18 +12,16 @@
     onTimeout: () => void;
   }>();
 
-  let remaining = $state(0);
+  let remaining = $state(duration);
   let dismissed = $state(false);
 
-  // Initialize remaining from prop
-  $effect.pre(() => {
-    remaining = duration;
-  });
-
   $effect(() => {
+    const startTime = Date.now();
+    const totalMs = duration;
     const interval = setInterval(() => {
-      remaining -= 100;
+      remaining = totalMs - (Date.now() - startTime);
       if (remaining <= 0) {
+        remaining = 0;
         clearInterval(interval);
         if (!dismissed) {
           dismissed = true;

package/dist/components/fields/RelationField.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { ExternalLink } from '@lucide/svelte';
+  import { getRouterProvider } from '@svadmin/core';
 
   let { value, resourceName, displayValue } = $props<{
     value: string | number | null | undefined;
@@ -8,7 +9,12 @@
   }>();
 
   const display = $derived(displayValue ?? (value != null ? `#${value}` : '—'));
-  const href = $derived(resourceName && value != null ? `#/${resourceName}/show/${value}` : undefined);
+  const href = $derived.by(() => {
+    if (!resourceName || value == null) return undefined;
+    const router = getRouterProvider();
+    const path = `/${resourceName}/show/${value}`;
+    return router?.formatLink?.(path) ?? path;
+  });
 </script>
 
 {#if href}

package/package.json

@@ -1,31 +1,32 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.32.1",
+  "version": "0.32.4",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
     "./src/app.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "src/app.css"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js",
-      "svelte": "./dist/index.js"
+      "svelte": "./src/index.ts",
+      "default": "./dist/index.js"
     },
     "./app.css": {
-      "style": "./dist/app.css",
-      "default": "./dist/app.css",
-      "svelte": "./dist/app.css"
+      "svelte": "./src/app.css",
+      "style": "./src/app.css",
+      "default": "./dist/app.css"
     },
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.23.1",
+    "@svadmin/core": "^0.23.5",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",
@@ -48,6 +49,15 @@
     },
     "@svadmin/editor": {
       "optional": true
+    },
+    "@svadmin/core": {
+      "optional": true
+    },
+    "@tanstack/svelte-query": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
     }
   },
   "dependencies": {

package/src/app.css

@@ -0,0 +1,674 @@
+/* Typography — Inter font for clean, modern look */
+
+/* @svadmin/ui — Design Tokens (Elygate-inspired)
+ * Auto-imported by AdminApp. Can be overridden by consumer's CSS.
+ *
+ * Based on Elygate dashboard style: Indigo primary, light glassmorphism,
+ * professional admin aesthetic with subtle depth.
+ */
+
+@layer base {
+  /* Global border-color reset — ensures Tailwind border utilities
+   * (border-r, border-t, etc.) use the theme color instead of currentColor */
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+  }
+
+  :root {
+    --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);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.13 0.02 265);
+    --primary: oklch(0.488 0.243 264.376);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.955 0.008 264);
+    --secondary-foreground: oklch(0.2 0.04 265);
+    --muted: oklch(0.955 0.005 264);
+    --muted-foreground: oklch(0.45 0.03 260);
+    --accent: oklch(0.955 0.008 264);
+    --accent-foreground: oklch(0.2 0.04 265);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.935 0.005 264);
+    --input: oklch(0.935 0.005 264);
+    --ring: oklch(0.488 0.243 264.376);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --success: oklch(0.6 0.2 145);
+    --success-foreground: oklch(0.985 0 0);
+    --warning: oklch(0.75 0.18 85);
+    --warning-foreground: oklch(0.3 0.08 60);
+    --info: oklch(0.6 0.15 250);
+    --info-foreground: oklch(0.985 0 0);
+    --sidebar: oklch(1 0 0 / 80%);
+    --sidebar-foreground: oklch(0.13 0.02 265);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.94 0.025 264);
+    --sidebar-accent-foreground: oklch(0.33 0.17 264);
+    --sidebar-border: oklch(0.935 0.005 264);
+    --sidebar-ring: oklch(0.488 0.243 264.376);
+  }
+
+  .dark {
+    --background: oklch(0.13 0.015 265);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.16 0.015 265);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.16 0.015 265);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.585 0.233 264);
+    --primary-foreground: oklch(0.15 0.04 265);
+    --secondary: oklch(0.23 0.025 265);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.23 0.025 265);
+    --muted-foreground: oklch(0.7 0.02 260);
+    --accent: oklch(0.23 0.025 265);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.27 0.02 265);
+    --input: oklch(0.27 0.02 265);
+    --ring: oklch(0.55 0.18 264);
+    --chart-1: oklch(0.585 0.233 264);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --success: oklch(0.65 0.2 150);
+    --success-foreground: oklch(0.985 0 0);
+    --warning: oklch(0.8 0.15 85);
+    --warning-foreground: oklch(0.25 0.05 60);
+    --info: oklch(0.65 0.15 250);
+    --info-foreground: oklch(0.985 0 0);
+    --sidebar: oklch(0.16 0.015 265 / 80%);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.585 0.233 264);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.488 0.243 264.376 / 10%);
+    --sidebar-accent-foreground: oklch(0.7 0.15 264);
+    --sidebar-border: oklch(0.27 0.02 265);
+    --sidebar-ring: oklch(0.55 0.18 264);
+  }
+
+  /* ── Color Theme Overrides ──────────────────────────────
+   * Each [data-theme] selector overrides the primary-related
+   * CSS variables for both light and dark mode.
+   * Values match builtinPresets in @svadmin/core/theme.
+   * This CSS-level fallback prevents FOUC before JS inits.
+   */
+
+  /* Neutral */
+  [data-theme="neutral"] {
+    --primary: oklch(0.205 0.006 286);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.205 0.006 286);
+    --sidebar-primary: oklch(0.205 0.006 286);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.205 0.006 286);
+    --chart-1: oklch(0.488 0.243 264.376);
+  }
+  .dark[data-theme="neutral"],
+  .dark [data-theme="neutral"] {
+    --primary: oklch(0.922 0.004 286);
+    --primary-foreground: oklch(0.205 0.006 286);
+    --ring: oklch(0.556 0.004 286);
+    --sidebar-primary: oklch(0.922 0.004 286);
+    --sidebar-primary-foreground: oklch(0.205 0.006 286);
+    --sidebar-ring: oklch(0.556 0.004 286);
+    --chart-1: oklch(0.585 0.233 264);
+  }
+
+  /* Indigo (default) */
+  [data-theme="indigo"] {
+    --primary: oklch(0.488 0.243 264.376);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.488 0.243 264.376);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.488 0.243 264.376);
+    --chart-1: oklch(0.488 0.243 264.376);
+  }
+  .dark[data-theme="indigo"],
+  .dark [data-theme="indigo"] {
+    --primary: oklch(0.585 0.233 264);
+    --primary-foreground: oklch(0.15 0.04 265);
+    --ring: oklch(0.55 0.18 264);
+    --sidebar-primary: oklch(0.585 0.233 264);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.55 0.18 264);
+    --chart-1: oklch(0.585 0.233 264);
+  }
+
+  /* Blue */
+  [data-theme="blue"] {
+    --primary: oklch(0.546 0.245 262.881);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.546 0.245 262.881);
+    --sidebar-primary: oklch(0.546 0.245 262.881);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.546 0.245 262.881);
+    --chart-1: oklch(0.546 0.245 262.881);
+  }
+  .dark[data-theme="blue"],
+  .dark [data-theme="blue"] {
+    --primary: oklch(0.623 0.214 259.815);
+    --primary-foreground: oklch(0.15 0.04 265);
+    --ring: oklch(0.546 0.245 262.881);
+    --sidebar-primary: oklch(0.623 0.214 259.815);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.546 0.245 262.881);
+    --chart-1: oklch(0.623 0.214 259.815);
+  }
+
+  /* Green */
+  [data-theme="green"] {
+    --primary: oklch(0.527 0.185 150.069);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.527 0.185 150.069);
+    --sidebar-primary: oklch(0.527 0.185 150.069);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.527 0.185 150.069);
+    --chart-1: oklch(0.527 0.185 150.069);
+  }
+  .dark[data-theme="green"],
+  .dark [data-theme="green"] {
+    --primary: oklch(0.627 0.194 149.214);
+    --primary-foreground: oklch(0.15 0.05 150);
+    --ring: oklch(0.527 0.185 150.069);
+    --sidebar-primary: oklch(0.627 0.194 149.214);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.527 0.185 150.069);
+    --chart-1: oklch(0.627 0.194 149.214);
+  }
+
+  /* Rose */
+  [data-theme="rose"] {
+    --primary: oklch(0.577 0.245 27.325);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.577 0.245 27.325);
+    --sidebar-primary: oklch(0.577 0.245 27.325);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.577 0.245 27.325);
+    --chart-1: oklch(0.577 0.245 27.325);
+  }
+  .dark[data-theme="rose"],
+  .dark [data-theme="rose"] {
+    --primary: oklch(0.577 0.245 27.325);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.577 0.245 27.325);
+    --sidebar-primary: oklch(0.577 0.245 27.325);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.577 0.245 27.325);
+    --chart-1: oklch(0.577 0.245 27.325);
+  }
+
+  /* Orange */
+  [data-theme="orange"] {
+    --primary: oklch(0.646 0.222 41.116);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.646 0.222 41.116);
+    --sidebar-primary: oklch(0.646 0.222 41.116);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.646 0.222 41.116);
+    --chart-1: oklch(0.646 0.222 41.116);
+  }
+  .dark[data-theme="orange"],
+  .dark [data-theme="orange"] {
+    --primary: oklch(0.646 0.222 41.116);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.646 0.222 41.116);
+    --sidebar-primary: oklch(0.646 0.222 41.116);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.646 0.222 41.116);
+    --chart-1: oklch(0.646 0.222 41.116);
+  }
+
+  /* Violet */
+  [data-theme="violet"] {
+    --primary: oklch(0.541 0.281 293.009);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.541 0.281 293.009);
+    --sidebar-primary: oklch(0.541 0.281 293.009);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.541 0.281 293.009);
+    --chart-1: oklch(0.541 0.281 293.009);
+  }
+  .dark[data-theme="violet"],
+  .dark [data-theme="violet"] {
+    --primary: oklch(0.541 0.281 293.009);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.541 0.281 293.009);
+    --sidebar-primary: oklch(0.541 0.281 293.009);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.541 0.281 293.009);
+    --chart-1: oklch(0.541 0.281 293.009);
+  }
+
+  /* Stripe-inspired Soft Shadows — premium, multi-layered depth */
+  [data-slot="button"],
+  [data-slot="input"],
+  [data-slot="select-trigger"],
+  [data-slot="select"],
+  [data-slot="textarea"] {
+    /* Subtle interaction shadow */
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
+  }
+
+  /* Stripe-style: form inputs use card background instead of transparent */
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select"] {
+    background-color: var(--card);
+  }
+  
+  [data-slot="card"] {
+    /* Classic Stripe soft shadow: faint ambient + directional drop */
+    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"],
+  [data-slot="sheet-content"] {
+    /* Deep floating layer for modals */
+    box-shadow: 0 10px 30px -5px rgb(0 0 0 / 0.08), 0 20px 40px -10px rgb(0 0 0 / 0.04);
+  }
+}
+
+body {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Premium Typography Refinements */
+h1, h2, h3 {
+  letter-spacing: -0.025em;
+  font-weight: 600;
+}
+h4, h5, h6 {
+  letter-spacing: -0.01em;
+}
+
+/* Micro-interactions: Linear/Apple ecosystem click scales */
+[data-slot="button"],
+button {
+  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, box-shadow 0.15s ease;
+}
+[data-slot="button"]:active:not(:disabled),
+button:active:not(:disabled) {
+  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) 20%, transparent) !important;
+  border-color: var(--color-primary);
+}
+
+/* Base scrollbar styling (Firefox + Standard) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.8 0 0) transparent;
+}
+.dark * {
+  scrollbar-color: oklch(0.35 0 0) transparent;
+}
+
+/* Scrollbar styling (Webkit) */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: oklch(0.8 0 0); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: oklch(0.65 0 0); }
+.dark ::-webkit-scrollbar-thumb { background: oklch(0.35 0 0); }
+.dark ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0 0); }
+
+/* ① Card Hover Elevation Lift — Stripe-style float on hover */
+[data-slot="card"] {
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+@media (hover: hover) {
+  [data-slot="card"]:hover {
+    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);
+  }
+}
+
+/* ② Table Row Hover — primary color tint instead of plain gray */
+[data-slot="table-row"]:hover {
+  background-color: color-mix(in oklch, var(--primary) 4%, var(--background)) !important;
+}
+[data-slot="table-row"] {
+  transition: background-color 0.15s ease;
+}
+
+/* ③ Sidebar Active Indicator — Linear-style left accent bar */
+.sidebar-nav-active {
+  position: relative;
+}
+.sidebar-nav-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  border-radius: 0 3px 3px 0;
+  background: var(--primary);
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+/* ④ Skeleton Shimmer — metallic light sweep instead of static pulse */
+@keyframes svadmin-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+[data-slot="skeleton"] {
+  animation: svadmin-shimmer 1.5s ease-in-out infinite !important;
+  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 60%, white) 50%, var(--muted) 75%) !important;
+  background-size: 200% 100% !important;
+}
+.dark [data-slot="skeleton"] {
+  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 60%, var(--foreground)) 50%, var(--muted) 75%) !important;
+}
+
+/* ⑤ Route Page Transition — fade + subtle slide-up */
+@keyframes svadmin-page-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.svadmin-page-enter {
+  animation: svadmin-page-enter 0.25s ease-out;
+}
+
+/* ⑥ Toast slide-in refinement (sonner-svelte) — tighter timing */
+[data-sonner-toaster] [data-sonner-toast] {
+  transition-duration: 200ms !important;
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+/* ⑦ Gradient Top Border on Cards — Vercel dashboard style */
+[data-slot="card"]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--primary) 20%, transparent), transparent);
+  border-radius: inherit;
+  pointer-events: none;
+}
+[data-slot="card"] {
+  position: relative;
+  overflow: hidden;
+}
+
+/* ⑧ Dark Mode Primary Glow — Linear-style neon accents */
+.dark [data-slot="button"][data-variant="default"],
+.dark [data-slot="badge"][data-variant="default"] {
+  box-shadow: 0 0 12px -3px color-mix(in oklch, var(--primary) 40%, transparent);
+}
+
+/* ⑨ Form Validation Shake Animation */
+@keyframes svadmin-shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(5px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(2px); }
+}
+.svadmin-shake {
+  animation: svadmin-shake 0.4s ease-out;
+}
+
+/* ⑩ Table Row Staggered Entrance */
+@keyframes svadmin-row-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+[data-slot="table-body"] [data-slot="table-row"] {
+  animation: svadmin-row-enter 0.3s ease-out both;
+}
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(1) { animation-delay: 0s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(2) { animation-delay: 0.03s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(3) { animation-delay: 0.06s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(4) { animation-delay: 0.09s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(5) { animation-delay: 0.12s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(6) { animation-delay: 0.15s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(7) { animation-delay: 0.18s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(8) { animation-delay: 0.21s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(9) { animation-delay: 0.24s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(10) { animation-delay: 0.27s; }
+
+/* ⑪ Accessibility: Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ⑫b Safe Area Inset — iPhone notch / Home Bar support */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  main {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* ⑫ Optimistic Delete — row fade-out visual feedback */
+@keyframes svadmin-row-delete {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+    height: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+.svadmin-deleting {
+  animation: svadmin-row-delete 0.3s ease-out forwards;
+  pointer-events: none;
+}
+
+/* ⑬ Popover & Dropdown — frosted glass backdrop + spring entrance */
+[data-slot="popover-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="context-menu-content"] {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* ⑭ Tooltip spring entrance */
+[data-slot="tooltip-content"] {
+  animation: svadmin-tooltip-enter 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes svadmin-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ⑮ Smooth scrolling for content areas */
+main {
+  scroll-behavior: smooth;
+}
+
+/* ⑯ RTL (Right-to-Left) Language Support */
+[dir="rtl"] {
+  direction: rtl;
+}
+[dir="rtl"] aside {
+  left: auto;
+  right: 0;
+}
+[dir="rtl"] .sidebar-nav-active::before {
+  left: auto;
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+/* Mirror sidebar margins for RTL */
+[dir="rtl"] .md\:ml-64 {
+  margin-left: 0;
+  margin-right: 16rem;
+}
+[dir="rtl"] .md\:ml-16 {
+  margin-left: 0;
+  margin-right: 4rem;
+}
+
+/* ⑰ Accessibility Minimum Touch Target — Apple HIG 44px minimum */
+@media (max-width: 640px) and (pointer: coarse) {
+  [data-slot="button"] {
+    position: relative;
+  }
+  [data-slot="button"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+
+/* Tailwind CSS v4 — Map design tokens to utility classes */
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* ─── svadmin UI Components CSS ─────────────────────────────── */
+/* These rules were moved from .svelte files to eliminate <style> tags */
+
+/* MarkdownRenderer Styles */
+.prose {
+  line-height: 1.6;
+}
+.prose p {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Streaming cursor effect */
+.streaming > *:last-child::after {
+  content: '▋';
+  display: inline-block;
+  animation: svadmin-blink 1s step-start infinite;
+  margin-left: 2px;
+  vertical-align: baseline;
+  color: currentColor;
+}
+
+@keyframes svadmin-blink {
+  50% { opacity: 0; }
+}
+
+/* Handle copied state for dynamically injected buttons */
+.copy-btn[data-copied-id] {
+  color: #10b981; /* Tailwind emerald-500 */
+}
+.copy-btn[data-copied-id] svg {
+  /* Swap to Check icon */
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+}
+
+/* ChatDialog Styles */
+.chat-markdown pre.chat-code-block {
+  background: var(--color-muted, hsl(var(--muted)));
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+.chat-markdown code.chat-inline-code {
+  background: var(--color-muted, hsl(var(--muted)));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.8125em;
+  font-family: ui-monospace, monospace;
+}
+.chat-markdown strong {
+  font-weight: 600;
+}