@svadmin/ui 0.31.0 → 0.31.1

package/dist/components/AdminApp.svelte

@@ -89,7 +89,7 @@
 
   // Set up initial context synchronously so children can access resources immediately during first render
   setDataProvider(dataProvider);
-  if (authProvider) setAuthProvider(authProvider);
+  setAuthProvider(authProvider);
   setResources(resources);
   setRouterProvider(resolvedRouter);
   if (locale) setLocale(locale);
@@ -99,7 +99,7 @@
   // Set up context — use $effect so prop changes are tracked
   $effect.pre(() => {
     setDataProvider(dataProvider);
-    if (authProvider) setAuthProvider(authProvider);
+    setAuthProvider(authProvider);
     setResources(resources);
     setRouterProvider(resolvedRouter);
     if (locale) setLocale(locale);

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

@@ -9,7 +9,7 @@
     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 type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
@@ -265,7 +265,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]),

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

@@ -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/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;

package/dist/components/Layout.svelte

@@ -12,7 +12,7 @@
   import { getAuthProvider } from '@svadmin/core';
   import type { Identity, MenuItem } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
-  import { currentPath } from '@svadmin/core/router';
+  import { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import { Button } from './ui/button/index.js';
   import * as Sheet from './ui/sheet/index.js';
@@ -150,7 +150,7 @@
 
       <!-- Content area -->
       <main class="flex-1 overflow-y-auto p-6 md:p-8">
-        {#key currentPath()}
+        {#key getPath()}
           <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
             {@render children()}
           </div>
@@ -158,7 +158,14 @@
       </main>
     </div>
   </div>
-  <CommandPalette bind:open={commandOpen} />
+  <CommandPalette 
+    bind:open={commandOpen} 
+    onAskAI={(q) => {
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('svadmin:ask-ai', { detail: q }));
+      }
+    }}
+  />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
   <ChatDialog />
   <Toast />

package/dist/components/LiveIndicator.svelte

@@ -23,9 +23,15 @@
   type StatusKey = 'connected' | 'connecting' | 'disconnected';
   const cfg = $derived(statusConfigs[status as StatusKey]);
 
+  let now = $state(Date.now());
+  $effect(() => {
+    const itv = setInterval(() => { now = Date.now(); }, 1000);
+    return () => clearInterval(itv);
+  });
+
   const timeSinceEvent = $derived(
     lastEvent?.timestamp
-      ? Math.floor((Date.now() - lastEvent.timestamp) / 1000)
+      ? Math.floor((now - lastEvent.timestamp) / 1000)
       : null
   );
 </script>

package/dist/components/SmartSuggest.svelte

@@ -49,10 +49,20 @@
     return '';
   });
 
+  import { getChatProvider } from '@svadmin/core';
+
   const suffixText = $derived(ghostText ? ghostText.slice(value.length) : '');
 
+  const resolvedProvider = $derived(provider ?? (() => {
+    try {
+      return getChatProvider();
+    } catch {
+      return null;
+    }
+  })());
+
   async function predict() {
-    if (!provider || !value.trim()) {
+    if (!resolvedProvider || !value.trim()) {
       suggestion = '';
       return;
     }
@@ -70,7 +80,7 @@ Provide ONLY the most likely completion of the exact phrase the user is typing.
 Include the user's input in your returned string. 
 Do not include any other text, Markdown formatting, quotes, or explanations.`;
 
-      const result = provider.sendMessage(
+      const result = resolvedProvider.sendMessage(
         [{ id: 'prompt', role: 'user', content: prompt, timestamp: Date.now() }],
         { signal: abortController.signal }
       );

package/dist/components/StepsForm.svelte

@@ -67,12 +67,12 @@
   });
 
   const totalSteps = $derived(steps.length);
-  const progressValue = $derived(((form.currentStep + 1) / totalSteps) * 100);
-  const isLastStep = $derived(form.currentStep >= totalSteps - 1);
+  const progressValue = $derived(((form.steps.currentStep + 1) / totalSteps) * 100);
+  const isLastStep = $derived(form.steps.currentStep >= totalSteps - 1);
 
   // Fields for the current step
   const currentFields = $derived(
-    steps[form.currentStep]?.fields
+    steps[form.steps.currentStep]?.fields
       .map(key => resource.fields.find(f => f.key === key))
       .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
   );
@@ -81,15 +81,11 @@
   function validateCurrentStep(): boolean {
     let valid = true;
     form.clearErrors();
-    for (const field of currentFields) {
-      const value = form.values[field.key];
-      if (field.required && (value === undefined || value === null || value === '')) {
-        form.setFieldError(field.key, t('validation.required'));
-        valid = false;
-      } else if (field.validate) {
-        const msg = field.validate(value);
-        if (msg) {
-          form.setFieldError(field.key, msg);
+    const errors = validator(form.values);
+    if (errors) {
+      for (const field of currentFields) {
+        if (errors[field.key]) {
+          form.setFieldError(field.key, errors[field.key]);
           valid = false;
         }
       }
@@ -101,7 +97,7 @@
     if (!validateCurrentStep()) return;
 
     if (!isLastStep) {
-      form.next();
+      form.steps.nextStep();
       return;
     }
 
@@ -118,17 +114,17 @@
         <Button
           variant="ghost"
           type="button"
-          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === form.currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
-          onclick={() => form.gotoStep(i)}
+          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === form.steps.currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
+          onclick={() => form.steps.gotoStep(i)}
         >
           <span
             class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors"
-            class:bg-primary={i <= form.currentStep}
-            class:text-primary-foreground={i <= form.currentStep}
-            class:bg-muted={i > form.currentStep}
-            class:text-muted-foreground={i > form.currentStep}
+            class:bg-primary={i <= form.steps.currentStep}
+            class:text-primary-foreground={i <= form.steps.currentStep}
+            class:bg-muted={i > form.steps.currentStep}
+            class:text-muted-foreground={i > form.steps.currentStep}
           >
-            {#if i < form.currentStep}
+            {#if i < form.steps.currentStep}
               <Check class="h-3.5 w-3.5" />
             {:else}
               {i + 1}
@@ -137,7 +133,7 @@
           <span class="hidden sm:inline">{step.title}</span>
         </Button>
         {#if i < steps.length - 1}
-          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < form.currentStep}></div>
+          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < form.steps.currentStep}></div>
         {/if}
       {/each}
     </div>
@@ -147,13 +143,13 @@
   <!-- Step content -->
   <Card.Root>
     <Card.CardHeader>
-      <Card.CardTitle>{steps[form.currentStep]?.title ?? ''}</Card.CardTitle>
+      <Card.CardTitle>{steps[form.steps.currentStep]?.title ?? ''}</Card.CardTitle>
       <Badge variant="outline" class="w-fit">
-        {t('common.step')} {form.currentStep + 1} / {totalSteps}
+        {t('common.step')} {form.steps.currentStep + 1} / {totalSteps}
       </Badge>
     </Card.CardHeader>
     <Card.CardContent>
-      {#key form.currentStep}
+      {#key form.steps.currentStep}
         <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
         {#each currentFields as field (field.key)}
           <FieldRenderer
@@ -170,10 +166,10 @@
           <Button
             type="button"
             variant="outline"
-            onclick={() => form.currentStep === 0 ? navigate(`/${resourceName}`) : form.prev()}
+            onclick={() => form.steps.currentStep === 0 ? navigate(`/${resourceName}`) : form.steps.prevStep()}
           >
             <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
-            {form.currentStep === 0 ? t('common.cancel') : t('common.back')}
+            {form.steps.currentStep === 0 ? t('common.cancel') : t('common.back')}
           </Button>
 
           <Button type="submit" disabled={form.submitting}>

package/dist/components/VirtualTable.svelte

@@ -66,11 +66,13 @@
   style="height: {containerHeight}px;"
   onscroll={handleScroll}
 >
-  <div style="position: relative; height: {totalHeight}px; width: 100%;">
-    {#each visibleItems as { item, index, offsetY } (index)}
-      <div style="position: absolute; top: {offsetY}px; left: 0; right: 0; height: {rowHeight}px;">
+  <table class="w-full relative" style="border-spacing: 0;">
+    <tbody style="display: block;">
+      <tr style="height: {visibleRange.start * rowHeight}px; border: none; padding: 0; display: block;"></tr>
+      {#each visibleItems as { item, index } (index)}
         {@render row(item, index)}
-      </div>
-    {/each}
-  </div>
+      {/each}
+      <tr style="height: {Math.max(0, (items.length - visibleRange.end - 1) * rowHeight)}px; border: none; padding: 0; display: block;"></tr>
+    </tbody>
+  </table>
 </div>

package/dist/router-state.svelte.js

@@ -43,11 +43,13 @@ function sync() {
     }
 }
 export function initRouter(provider) {
-    if (_initialized)
-        return;
-    _initialized = true;
     _provider = provider;
     setActiveRouterProvider(provider);
+    if (_initialized) {
+        sync(); // Re-sync manually since provider might have switched format/URLs
+        return;
+    }
+    _initialized = true;
     sync();
     if (typeof window !== 'undefined') {
         window.addEventListener('hashchange', sync);

package/package.json

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