@svadmin/ui 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/app.css

@@ -34,6 +34,12 @@
     --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);
@@ -69,6 +75,12 @@
     --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);
@@ -146,6 +158,12 @@ body {
   --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);

package/src/component-registry.svelte.ts

@@ -0,0 +1,46 @@
+/**
+ * Component Registry — Svelte Context-based DI for component injection.
+ *
+ * Allows users to override any registered component via the `components`
+ * prop on `AdminApp`, while providing sensible defaults.
+ */
+import { getContext, setContext, type Component } from 'svelte';
+
+// ─── Overridable component slots ────────────────────────────────
+export interface ComponentRegistry {
+  // Layout primitives
+  Layout: Component<any>;
+  Sidebar: Component<any>;
+  Header: Component<any>;
+
+  // Pages
+  LoginPage: Component<any>;
+  AutoTable: Component<any>;
+  AutoForm: Component<any>;
+  ShowPage: Component<any>;
+
+  // Shadcn primitives
+  Button: Component<any>;
+  Input: Component<any>;
+  Badge: Component<any>;
+  Skeleton: Component<any>;
+}
+
+const REGISTRY_KEY = 'svadmin:components';
+
+/** Set the component registry in context (called by AdminApp). */
+export function setComponentRegistry(registry: ComponentRegistry): void {
+  setContext(REGISTRY_KEY, registry);
+}
+
+/** Retrieve the full component registry from context. */
+export function getComponentRegistry(): ComponentRegistry {
+  return getContext<ComponentRegistry>(REGISTRY_KEY);
+}
+
+/** Retrieve a single component by name from the registry. */
+export function useComponent<K extends keyof ComponentRegistry>(
+  name: K,
+): ComponentRegistry[K] {
+  return getComponentRegistry()[name];
+}

package/src/components/AICommandBar.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import { getResources, getChatProvider } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import { toggleTheme } from '@svadmin/core';
+  import { Command } from 'cmdk-sv';
+  import * as Dialog from './ui/dialog/index.js';
+  import { Search, LayoutDashboard, Plus, Sun, FileText, Sparkles, Loader2, Send } from 'lucide-svelte';
+  import MarkdownRenderer from './MarkdownRenderer.svelte';
+
+  let { open = $bindable(false) } = $props<{ open?: boolean }>();
+  let searchValue = $state('');
+  
+  const resources = getResources();
+  const provider = $derived(getChatProvider());
+
+  // AI State
+  let aiMode = $state(false);
+  let aiResponse = $state('');
+  let isPredicting = $state(false);
+  let abortController: AbortController | null = null;
+
+  function close() {
+    open = false;
+    searchValue = '';
+    aiMode = false;
+    aiResponse = '';
+    if (abortController) {
+      abortController.abort();
+      abortController = null;
+    }
+  }
+
+  function act(fn: () => void) {
+    fn();
+    close();
+  }
+
+  async function askAI() {
+    if (!provider || !searchValue.trim()) return;
+    
+    aiMode = true;
+    isPredicting = true;
+    aiResponse = '';
+    
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+
+    try {
+      const result = provider.sendMessage(
+        [{ id: 'cmd', role: 'user', content: searchValue, timestamp: Date.now() }],
+        { signal: abortController.signal }
+      );
+
+      if (Symbol.asyncIterator in result) {
+        for await (const chunk of result as AsyncIterable<string>) {
+          aiResponse += chunk;
+        }
+      } else {
+        aiResponse = await result;
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
+        aiResponse = 'Failed to get response from AI.';
+      }
+    } finally {
+      isPredicting = false;
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && searchValue.trim() && !aiMode) {
+      // If pressing enter on an active search, cmdk usually handles selection.
+      // But if there's no selection or we want to force AI, we can intercept.
+      // For simplicity, we trigger AI on Ctrl+Enter
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        askAI();
+      }
+    }
+  }
+
+  const itemClass = 'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50';
+</script>
+
+<Dialog.Dialog bind:open onOpenChange={(v: boolean) => !v && close()}>
+  <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[600px] border-none shadow-2xl">
+    <Command.Root
+      shouldFilter={!aiMode}
+      class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-semibold [&_[data-cmdk-group-heading]]:uppercase [&_[data-cmdk-group-heading]]:tracking-wider"
+    >
+      <div class="flex items-center border-b px-3 h-12 relative" data-cmdk-input-wrapper="">
+        {#if aiMode}
+          <Sparkles class="mr-2 h-4 w-4 shrink-0 text-warning animate-pulse" />
+        {:else}
+          <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        {/if}
+        <Command.Input
+          bind:value={searchValue}
+          onkeydown={handleKeyDown}
+          placeholder={aiMode ? "Ask AI anything..." : "Search commands or ask AI (Ctrl+Enter)..."}
+          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        />
+        {#if searchValue.trim() && !aiMode}
+          <button 
+            class="absolute right-3 flex items-center gap-1 text-[10px] font-medium text-warning bg-warning/10 hover:bg-warning/20 px-2 py-1 rounded transition-colors"
+            onclick={askAI}
+          >
+            <Sparkles class="h-3 w-3" />
+            <kbd class="font-sans">Ctrl+Enter</kbd> to Ask AI
+          </button>
+        {/if}
+      </div>
+
+      {#if !aiMode}
+        <Command.List class="max-h-[360px] overflow-y-auto overflow-x-hidden p-1">
+          <Command.Empty class="py-6 text-center text-sm text-muted-foreground">
+            No standard commands found. Press <kbd class="px-1 py-0.5 rounded bg-muted border font-sans text-[10px]">Ctrl+Enter</kbd> to ask AI.
+          </Command.Empty>
+
+          <!-- Navigation -->
+          <Command.Group heading={t('common.home')}>
+            <Command.Item value="home" onSelect={() => act(() => navigate('/'))} class={itemClass}>
+              <LayoutDashboard class="h-4 w-4 text-muted-foreground" />
+              {t('common.home')}
+            </Command.Item>
+            {#each resources as r}
+              <Command.Item value={r.name} onSelect={() => act(() => navigate(`/${r.name}`))} class={itemClass}>
+                <FileText class="h-4 w-4 text-muted-foreground" />
+                {r.label}
+              </Command.Item>
+            {/each}
+          </Command.Group>
+
+          <Command.Separator class="mx-1 my-1 h-px bg-border" />
+
+          <!-- Actions -->
+          <Command.Group heading={t('common.actions')}>
+            {#each resources as r}
+              <Command.Item value={`create-${r.name}`} onSelect={() => act(() => navigate(`/${r.name}/create`))} class={itemClass}>
+                <Plus class="h-4 w-4 text-muted-foreground" />
+                {t('common.create')} {r.label}
+              </Command.Item>
+            {/each}
+            <Command.Item value="toggle-theme" onSelect={() => act(() => toggleTheme())} class={itemClass}>
+              <Sun class="h-4 w-4 text-muted-foreground" />
+              {t('common.toggleTheme')}
+            </Command.Item>
+          </Command.Group>
+        </Command.List>
+      {:else}
+        <!-- AI Response Area -->
+        <div class="h-[360px] max-h-[360px] overflow-y-auto p-4 bg-muted/20">
+          <div class="flex items-start gap-3">
+            <div class="mt-0.5 w-8 h-8 rounded-full bg-warning/10 text-warning flex items-center justify-center shrink-0">
+              <Sparkles class="h-4 w-4" />
+            </div>
+            <div class="flex-1 w-full text-sm">
+              {#if !aiResponse && isPredicting}
+                <div class="flex items-center gap-2 text-muted-foreground mt-1.5">
+                  <Loader2 class="h-4 w-4 animate-spin" /> Thinking...
+                </div>
+              {:else}
+                <MarkdownRenderer content={aiResponse} streaming={isPredicting} />
+              {/if}
+            </div>
+          </div>
+        </div>
+        <div class="p-2 border-t flex justify-end gap-2 bg-muted/10">
+          <button 
+            class="text-xs px-3 py-1.5 rounded-md hover:bg-muted transition-colors text-muted-foreground"
+            onclick={() => { aiMode = false; searchValue = ''; }}
+          >
+            Clear & Return
+          </button>
+        </div>
+      {/if}
+    </Command.Root>
+  </Dialog.DialogContent>
+</Dialog.Dialog>

package/src/components/AdminApp.svelte

@@ -7,6 +7,7 @@
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
+  import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
   import AutoTable from './AutoTable.svelte';
   import AutoForm from './AutoForm.svelte';
@@ -18,6 +19,12 @@
   import UpdatePasswordPage from './UpdatePasswordPage.svelte';
   import ConfigErrorScreen from './ConfigErrorScreen.svelte';
   import DevTools from './DevTools.svelte';
+  import Sidebar from './Sidebar.svelte';
+  import Header from './Header.svelte';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
   import { initRouter, getRoute, getParams } from '../router-state.svelte.js';
 
   interface Props {
@@ -30,6 +37,8 @@
     defaultTheme?: ThemeMode;
     dashboard?: Snippet;
     loginPage?: Snippet;
+    /** Override default components via DI */
+    components?: Partial<ComponentRegistry>;
   }
 
   let {
@@ -42,8 +51,22 @@
     defaultTheme,
     dashboard,
     loginPage,
+    components: userComponents,
   }: Props = $props();
 
+  // Default component registry
+  const defaultComponents: ComponentRegistry = {
+    Layout, Sidebar, Header,
+    LoginPage, AutoTable, AutoForm, ShowPage,
+    Button: Button as unknown as ComponentRegistry['Button'],
+    Input: Input as unknown as ComponentRegistry['Input'],
+    Badge: Badge as unknown as ComponentRegistry['Badge'],
+    Skeleton: Skeleton as unknown as ComponentRegistry['Skeleton'],
+  };
+
+  // Merge user overrides and set context
+  setComponentRegistry({ ...defaultComponents, ...userComponents });
+
   // Resolve router provider (default to hash)
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
 

package/src/components/AnomalyBadge.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Badge } from './ui/badge/index.js';
+  import { TrendingUp, TrendingDown, AlertTriangle } from 'lucide-svelte';
+  import TooltipButton from './TooltipButton.svelte';
+
+  interface Props {
+    /** The actual current value */
+    value: number;
+    /** The baseline/expected value to compare against */
+    baseline: number;
+    /** Threshold percentage to trigger an anomaly (e.g. 0.2 means 20% diff) */
+    threshold?: number;
+    /** Optional label formatting */
+    formatter?: (val: number) => string;
+    /** If true, lower is better (e.g. latency). Default false (higher is better e.g. revenue). */
+    lowerIsBetter?: boolean;
+    class?: string;
+  }
+
+  let { 
+    value, 
+    baseline, 
+    threshold = 0.2, 
+    formatter = (v) => v.toString(), 
+    lowerIsBetter = false,
+    class: className = '' 
+  }: Props = $props();
+
+  // Calculate percentage difference
+  const diff = $derived(baseline === 0 ? 0 : (value - baseline) / Math.abs(baseline));
+  const isAnomaly = $derived(Math.abs(diff) >= threshold);
+  
+  // Determine sentiment (good, bad, neutral)
+  const isGood = $derived(
+    !isAnomaly ? null : 
+    (lowerIsBetter ? diff < 0 : diff > 0)
+  );
+
+  const percentLabel = $derived(`${Math.abs(diff * 100).toFixed(1)}%`);
+</script>
+
+{#if !isAnomaly}
+  <span class="text-muted-foreground text-sm font-medium {className}">
+    {formatter(value)}
+  </span>
+{:else}
+  <TooltipButton 
+    tooltip={`Baseline: ${formatter(baseline)} (${diff > 0 ? '+' : '-'}${percentLabel})`}
+    variant="ghost" 
+    size="sm" 
+    class="p-0 h-auto hover:bg-transparent"
+  >
+    <Badge 
+      variant={isGood ? 'default' : 'destructive'} 
+      class="flex items-center gap-1 font-mono text-xs px-1.5 py-0 {isGood ? 'bg-success hover:bg-success/90 text-success-foreground' : ''} {className}"
+    >
+      {#if diff > 0}
+        <TrendingUp class="h-3 w-3" />
+      {:else}
+        <TrendingDown class="h-3 w-3" />
+      {/if}
+      {formatter(value)}
+    </Badge>
+  </TooltipButton>
+{/if}

package/src/components/AuditLogDrawer.svelte

@@ -34,10 +34,10 @@
   // Action semantic color mapping
   function getActionColor(action: string) {
     switch (action) {
-      case 'create': return 'bg-green-500';
-      case 'update': return 'bg-blue-500';
-      case 'delete': return 'bg-red-500';
-      default: return 'bg-slate-400';
+      case 'create': return 'bg-success';
+      case 'update': return 'bg-info';
+      case 'delete': return 'bg-destructive';
+      default: return 'bg-muted-foreground';
     }
   }
 </script>

package/src/components/AutoForm.svelte

@@ -224,7 +224,7 @@
     </TooltipButton>
     <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
     {#if isDirty}
-      <Badge variant="outline" class="border-amber-200 bg-amber-50 text-amber-700">{t('common.unsaved')}</Badge>
+      <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
     {/if}
   </div>
 

package/src/components/AutoTable.svelte

@@ -523,7 +523,7 @@
                             {#if cellRenderer && field}
                               {@render cellRenderer({ field, value: cell.getValue(), record })}
                             {:else if field?.type === 'boolean'}
-                              <span class="inline-block h-2 w-2 rounded-full {cell.getValue() ? 'bg-green-500' : 'bg-muted-foreground/30'}"></span>
+                              <span class="inline-block h-2 w-2 rounded-full {cell.getValue() ? 'bg-success' : 'bg-muted-foreground/30'}"></span>
                             {:else if field?.type === 'date' && cell.getValue()}
                               {new Date(cell.getValue() as string).toLocaleDateString()}
                             {:else if field?.type === 'tags' && Array.isArray(cell.getValue())}
@@ -635,7 +635,7 @@
                       {#if cellRenderer}
                         {@render cellRenderer({ field, value, record })}
                       {:else if field.type === 'boolean'}
-                        <span class="inline-block h-2 w-2 rounded-full {value ? 'bg-green-500' : 'bg-muted-foreground/30'}"></span>
+                        <span class="inline-block h-2 w-2 rounded-full {value ? 'bg-success' : 'bg-muted-foreground/30'}"></span>
                       {:else if field.type === 'date' && value}
                         {new Date(value as string).toLocaleDateString()}
                       {:else if field.type === 'tags' && Array.isArray(value)}

package/src/components/CopilotPanel.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { getChatProvider, getChatContext } from '@svadmin/core';
+  import { Sparkles, X, ChevronRight, Check, RefreshCcw } from 'lucide-svelte';
+  import { fade, slide } from 'svelte/transition';
+  import { Button } from './ui/button/index.js';
+  import MarkdownRenderer from './MarkdownRenderer.svelte';
+  import TooltipButton from './TooltipButton.svelte';
+
+  let { open = $bindable(false) } = $props<{ open?: boolean }>();
+
+  const provider = $derived(getChatProvider());
+  const ctx = $derived(getChatContext());
+
+  let isPredicting = $state(false);
+  let insightText = $state('');
+  let abortController: AbortController | null = null;
+  let hasFetchedForContext = $state('');
+
+  // Automatically request insights when the context changes
+  $effect(() => {
+    if (!open || !provider) return;
+    
+    // Create a context hash to avoid refetching for the same page
+    const currentHash = `${ctx.currentResource}-${ctx.currentView}-${ctx.selectedRecordId}`;
+    if (hasFetchedForContext === currentHash) return;
+    
+    hasFetchedForContext = currentHash;
+    getInsights();
+  });
+
+  async function getInsights() {
+    if (!provider) return;
+    
+    isPredicting = true;
+    insightText = '';
+    
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+
+    const prompt = `Analyze the current context and provide 3 quick insights or context-aware suggestions for the admin user.
+Resource: ${ctx.currentResource}
+View: ${ctx.currentView}
+Record ID: ${ctx.selectedRecordId || 'None'}
+Keep it concise, professional, and use bullet points.`;
+
+    try {
+      const result = provider.sendMessage(
+        [{ id: 'insights', role: 'system', content: prompt, timestamp: Date.now() }],
+        { signal: abortController.signal }
+      );
+
+      if (Symbol.asyncIterator in result) {
+        for await (const chunk of result as AsyncIterable<string>) {
+          insightText += chunk;
+        }
+      } else {
+        insightText = await result;
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
+        insightText = 'Failed to generate insights for this context.';
+      }
+    } finally {
+      isPredicting = false;
+    }
+  }
+</script>
+
+{#if open}
+  <div 
+    class="fixed right-0 top-14 bottom-0 w-80 bg-card border-l shadow-2xl z-40 flex flex-col"
+    transition:slide={{ axis: 'x', duration: 300 }}
+  >
+    <!-- Header -->
+    <div class="h-14 flex items-center justify-between px-4 border-b bg-muted/20">
+      <div class="flex items-center gap-2 font-medium">
+        <Sparkles class="h-4 w-4 text-primary" />
+        Copilot Sidebar
+      </div>
+      <TooltipButton tooltip="Close panel" variant="ghost" size="icon-sm" onclick={() => open = false}>
+        <X class="h-4 w-4" />
+      </TooltipButton>
+    </div>
+
+    <!-- Context Meta -->
+    <div class="px-4 py-3 border-b bg-muted/10 text-xs text-muted-foreground flex flex-col gap-1">
+      <div class="flex items-center gap-2">
+        <span class="w-16">Resource:</span>
+        <span class="font-mono text-foreground">{ctx.currentResource || 'Dashboard'}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="w-16">View:</span>
+        <span class="font-mono text-foreground capitalize">{ctx.currentView || 'List'}</span>
+      </div>
+      {#if ctx.selectedRecordId}
+        <div class="flex items-center gap-2">
+          <span class="w-16">Record ID:</span>
+          <span class="font-mono text-foreground">{ctx.selectedRecordId}</span>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Content Area -->
+    <div class="flex-1 overflow-y-auto p-4 space-y-6">
+      
+      <!-- Smart Insights Section -->
+      <div>
+        <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3 flex items-center justify-between">
+          Smart Insights
+          {#if isPredicting}
+            <span class="flex items-center gap-1 text-[10px] text-primary normal-case font-medium">
+              <div class="h-1 w-1 bg-primary rounded-full animate-bounce delay-75"></div>
+              <div class="h-1 w-1 bg-primary rounded-full animate-bounce delay-150"></div>
+              <div class="h-1 w-1 bg-primary rounded-full animate-bounce delay-300"></div>
+            </span>
+          {:else}
+            <Button variant="ghost" size="icon-sm" class="h-5 w-5 hover:bg-muted" onclick={getInsights}>
+              <RefreshCcw class="h-3 w-3" />
+            </Button>
+          {/if}
+        </h4>
+        
+        <div class="text-sm">
+          {#if !insightText && !isPredicting}
+            <div class="text-muted-foreground italic text-center py-4 bg-muted/30 rounded-lg border border-dashed">
+              No insights loaded.
+            </div>
+          {:else}
+            <div class="bg-primary/5 p-3 rounded-xl border border-primary/10 prose prose-sm dark:prose-invert prose-p:my-1 prose-ul:my-1 prose-li:my-0.5">
+              <MarkdownRenderer content={insightText} streaming={isPredicting} />
+            </div>
+          {/if}
+        </div>
+      </div>
+
+      <!-- Quick Actions (Example static definitions for the copilot) -->
+      <div>
+        <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3">
+          Suggested Actions
+        </h4>
+        <div class="space-y-2">
+          {#if ctx.currentView === 'list'}
+            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
+              <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
+              <span>Generate monthly report</span>
+            </button>
+            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
+              <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
+              <span>Find anomalies in {ctx.currentResource}</span>
+            </button>
+          {:else if ctx.currentView === 'edit' || ctx.currentView === 'create'}
+            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
+              <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
+              <span>Auto-fill form from context</span>
+            </button>
+          {:else}
+            <div class="text-muted-foreground text-sm py-2 text-center">No precise actions for this view</div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/components/DevTools.svelte

@@ -34,14 +34,14 @@
   const locale = $derived(getLocale());
 
   // Auto-trace state changes in dev mode via Svelte 5 $inspect
-  if (import.meta.env?.DEV) {
+  if ((import.meta as any).env?.DEV) {
     $inspect({ path, theme, colorTheme, locale, resourceCount: resources.length });
   }
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if import.meta.env.DEV}
+{#if (import.meta as any).env?.DEV}
   {#if visible}
     <div
       class="fixed bottom-0 right-4 z-[9999] w-[420px] max-w-[95vw] rounded-t-xl border border-b-0 bg-card shadow-2xl text-[0.8125rem] overflow-hidden"

package/src/components/FieldRenderer.svelte

@@ -221,7 +221,7 @@
     {#if multiVal.length > 0}
       <div class="flex flex-wrap gap-1 mt-1">
         {#each multiVal as v}
-          {@const label = field.options?.find((o: any) => o.value === v)?.label ?? String(v)}
+          {@const label = field.options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
           <Badge variant="secondary" class="gap-1">
             {label}
             <button type="button" onclick={() => toggleMulti(v)} class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors" aria-label={t('common.clear')}>×</button>

package/src/components/Header.svelte

@@ -21,7 +21,7 @@
   }>();
 </script>
 
-<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-white/60 dark:bg-slate-900/60 backdrop-blur-md px-4 md:px-6">
+<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">
   <div class="flex items-center gap-4">
     {#if children}
       {@render children()}

package/src/components/InsightCard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { getChatProvider } from '@svadmin/core';
+  import { Sparkles, RefreshCcw, Loader2 } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import MarkdownRenderer from './MarkdownRenderer.svelte';
+
+  interface Props {
+    title?: string;
+    context: string;
+    autoFetch?: boolean;
+    class?: string;
+  }
+
+  let { title = 'AI Insights', context, autoFetch = true, class: className = '' }: Props = $props();
+
+  const provider = $derived(getChatProvider());
+
+  let isPredicting = $state(false);
+  let insightText = $state('');
+  let abortController: AbortController | null = null;
+  let hasFetchedForContext = $state('');
+
+  $effect(() => {
+    if (autoFetch && context && provider && hasFetchedForContext !== context) {
+      hasFetchedForContext = context;
+      getInsights();
+    }
+  });
+
+  export async function getInsights() {
+    if (!provider || !context) return;
+    
+    isPredicting = true;
+    insightText = '';
+    
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+
+    const prompt = `Based on the following data/context, generate 3 concise, highly professional insights. 
+Use bullet points. Do not include introductory text like "Here are the insights".
+
+Data Context:
+${context}`;
+
+    try {
+      const result = provider.sendMessage(
+        [{ id: 'insights', role: 'user', content: prompt, timestamp: Date.now() }],
+        { signal: abortController.signal }
+      );
+
+      if (Symbol.asyncIterator in result) {
+        for await (const chunk of result as AsyncIterable<string>) {
+          insightText += chunk;
+        }
+      } else {
+        insightText = await result;
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
+        insightText = 'Failed to generate insights.';
+      }
+    } finally {
+      isPredicting = false;
+    }
+  }
+</script>
+
+<div class="rounded-xl border bg-card text-card-foreground shadow-sm flex flex-col {className}">
+  <div class="flex items-center justify-between p-4 border-b">
+    <div class="flex items-center gap-2 font-medium">
+      <Sparkles class="h-4 w-4 text-amber-500" />
+      {title}
+    </div>
+    <Button variant="ghost" size="icon-sm" class="h-6 w-6" onclick={getInsights} disabled={isPredicting || !provider}>
+      <RefreshCcw class="h-3 w-3 {isPredicting ? 'animate-spin' : ''}" />
+    </Button>
+  </div>
+  
+  <div class="p-4 flex-1">
+    {#if !provider}
+      <div class="text-sm text-muted-foreground italic flex items-center justify-center h-full">
+        ChatProvider not configured.
+      </div>
+    {:else if isPredicting && !insightText}
+      <div class="flex items-center justify-center gap-2 text-sm text-muted-foreground h-full py-4">
+        <Loader2 class="h-4 w-4 animate-spin" /> Analyzing data...
+      </div>
+    {:else if !insightText}
+      <div class="text-sm text-muted-foreground italic flex items-center justify-center h-full">
+        No insights available. Click refresh to analyze.
+      </div>
+    {:else}
+      <div class="text-sm prose prose-sm dark:prose-invert prose-p:my-1 prose-ul:my-1 prose-li:my-0.5">
+        <MarkdownRenderer content={insightText} streaming={isPredicting} />
+      </div>
+    {/if}
+  </div>
+</div>

package/src/components/Layout.svelte

@@ -62,7 +62,7 @@
   let collapsed = $state(false);
 </script>
 
-<div role="application" onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }}>
+<svelte:window onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }} />
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
@@ -83,7 +83,7 @@
     </div>
   </div>
 {:else}
-  <div class="flex h-screen bg-slate-50 dark:bg-slate-950" in:fade={{ duration: 200, delay: 50 }}>
+  <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
       <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
@@ -128,4 +128,3 @@
   <ChatDialog />
   <Toast />
 {/if}
-</div>

package/src/components/LiveIndicator.svelte

@@ -16,9 +16,9 @@
   }>();
 
   const statusConfigs = {
-    connected: { variant: 'default' as const, dotClass: 'bg-emerald-500', label: 'Live', icon: Wifi },
-    connecting: { variant: 'secondary' as const, dotClass: 'bg-amber-500', label: 'Connecting...', icon: Loader2 as typeof Wifi },
-    disconnected: { variant: 'destructive' as const, dotClass: 'bg-red-500', label: 'Offline', icon: WifiOff },
+    connected: { variant: 'default' as const, dotClass: 'bg-success', label: 'Live', icon: Wifi },
+    connecting: { variant: 'secondary' as const, dotClass: 'bg-warning', label: 'Connecting...', icon: Loader2 as typeof Wifi },
+    disconnected: { variant: 'destructive' as const, dotClass: 'bg-destructive', label: 'Offline', icon: WifiOff },
   } as const;
   type StatusKey = 'connected' | 'connecting' | 'disconnected';
   const cfg = $derived(statusConfigs[status as StatusKey]);

package/src/components/MarkdownRenderer.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
+  // @ts-expect-error - missing types
   import { Marked } from 'marked';
+  // @ts-expect-error - missing types
   import { markedHighlight } from 'marked-highlight';
+  // @ts-expect-error - missing types
   import hljs from 'highlight.js';
   import 'highlight.js/styles/github-dark.css'; // or your preferred theme
+  // @ts-expect-error - missing types
   import DOMPurify from 'isomorphic-dompurify';
   import { Check, Copy } from 'lucide-svelte';
   import { Button } from './ui/button/index.js';
@@ -22,7 +26,7 @@
   const marked = new Marked(
     markedHighlight({
       langPrefix: 'hljs language-',
-      highlight(code, lang) {
+      highlight(code: string, lang: string) {
         const language = hljs.getLanguage(lang) ? lang : 'plaintext';
         return hljs.highlight(code, { language }).value;
       }
@@ -65,7 +69,7 @@
         pres.forEach(pre => {
           pre.classList.add('enhanced');
           const wrapper = document.createElement('div');
-          wrapper.className = 'code-block-wrapper group relative my-4 rounded-md bg-zinc-950';
+          wrapper.className = 'code-block-wrapper group relative my-4 rounded-md bg-foreground/95';
           
           const header = document.createElement('div');
           header.className = 'flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800';

package/src/components/PasswordInput.svelte

@@ -43,8 +43,8 @@
 
   const strengthColor = $derived(
     strength < 30 ? 'bg-destructive' :
-    strength < 60 ? 'bg-amber-500' :
-    strength < 80 ? 'bg-blue-500' : 'bg-emerald-500'
+    strength < 60 ? 'bg-warning' :
+    strength < 80 ? 'bg-info' : 'bg-success'
   );
 
   const strengthLabel = $derived(

package/src/components/ProfilePage.svelte

@@ -130,7 +130,7 @@
         {/if}
 
         {#if pwSuccess}
-          <Alert.Root class="border-green-500/30 bg-green-500/5 text-green-600 dark:text-green-400">
+          <Alert.Root class="border-success/30 bg-success/5 text-success">
             <CheckCircle class="h-4 w-4" />
             <Alert.Description>{t('profile.passwordChanged')}</Alert.Description>
           </Alert.Root>

package/src/components/SmartSuggest.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { Input } from './ui/input/index.js';
+  import type { ChatProvider } from '@svadmin/core';
+
+  interface Props {
+    /** The bound value of the input */
+    value: string;
+    /** The chat provider to generate suggestions */
+    provider?: ChatProvider;
+    /** Context given to the AI to help it predict the text */
+    context?: string;
+    /** Standard input props */
+    placeholder?: string;
+    class?: string;
+    id?: string;
+    disabled?: boolean;
+    name?: string;
+    type?: string;
+  }
+
+  let { 
+    value = $bindable(), 
+    provider, 
+    context = '', 
+    placeholder = '', 
+    class: className = '', 
+    id, 
+    disabled = false, 
+    name, 
+    type = 'text' 
+  }: Props = $props();
+
+  let suggestion = $state('');
+  let isPredicting = $state(false);
+  let abortController: AbortController | null = null;
+  let predictTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // The ghost text shows the suggestion, but only the part *after* what the user has typed
+  // It only displays if the suggestion actually starts with the current value
+  const ghostText = $derived.by(() => {
+    if (!suggestion || !value) return '';
+    const lowerVal = value.toLowerCase();
+    const lowerSugg = suggestion.toLowerCase();
+    
+    if (lowerSugg.startsWith(lowerVal) && suggestion.length > value.length) {
+      // Preserve original casing from the suggestion but append only the suffix
+      return value + suggestion.slice(value.length);
+    }
+    return '';
+  });
+
+  const suffixText = $derived(ghostText ? ghostText.slice(value.length) : '');
+
+  async function predict() {
+    if (!provider || !value.trim()) {
+      suggestion = '';
+      return;
+    }
+
+    isPredicting = true;
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
+
+    try {
+      const prompt = `You are an autocomplete engine. The user is typing: "${value}". 
+Context: ${context}.
+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(
+        [{ id: 'prompt', role: 'user', content: prompt, timestamp: Date.now() }],
+        { signal: abortController.signal }
+      );
+
+      suggestion = '';
+      
+      // Handle streaming or Promise responses seamlessly
+      if (Symbol.asyncIterator in result) {
+        for await (const chunk of result as AsyncIterable<string>) {
+          suggestion += chunk;
+        }
+      } else {
+        suggestion = await result;
+      }
+      
+      // Clean up the suggestion
+      suggestion = suggestion.trim().replace(/^["']|["']$/g, '');
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
+        suggestion = '';
+      }
+    } finally {
+      isPredicting = false;
+    }
+  }
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = target.value;
+
+    // Reset suggestion immediately if it no longer matches
+    if (suggestion && !suggestion.toLowerCase().startsWith(value.toLowerCase())) {
+      suggestion = '';
+    }
+
+    if (predictTimer) clearTimeout(predictTimer);
+    
+    // Debounce prediction
+    predictTimer = setTimeout(() => {
+      predict();
+    }, 500);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Tab' && suffixText) {
+      e.preventDefault(); // Prevent standard tab navigation
+      value = ghostText;
+      suggestion = ''; // Clear suggestion once accepted
+    }
+  }
+
+</script>
+
+<div class="relative w-full {className}">
+  <!-- Ghost Text Layer (positioned exactly beneath the actual text) -->
+  {#if suffixText}
+    <div 
+      class="absolute inset-0 pointer-events-none flex items-center px-3 text-sm font-medium"
+      aria-hidden="true"
+    >
+      <span class="opacity-0">{value}</span>
+      <span class="text-muted-foreground/40">{suffixText}</span>
+    </div>
+  {/if}
+
+  <!-- Actual Input Layer -->
+  <Input
+    {id}
+    {name}
+    {type}
+    {disabled}
+    {placeholder}
+    value={value}
+    oninput={handleInput}
+    onkeydown={handleKeyDown}
+    class="bg-transparent relative z-10 w-full"
+  />
+
+  <!-- Loading indicator -->
+  {#if isPredicting}
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+      <div class="h-1.5 w-1.5 rounded-full bg-primary/50 animate-pulse"></div>
+    </div>
+  {/if}
+</div>

package/src/components/StatsCard.svelte

@@ -7,10 +7,10 @@
 
   const colorMap: Record<ColorVariant, string> = {
     primary: 'bg-primary/10 text-primary',
-    success: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
-    warning: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
-    danger: 'bg-red-500/10 text-red-600 dark:text-red-400',
-    info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+    success: 'bg-success/10 text-success',
+    warning: 'bg-warning/10 text-warning',
+    danger: 'bg-destructive/10 text-destructive',
+    info: 'bg-info/10 text-info',
   };
 
   const variantMap: Record<StyleVariant, string> = {
@@ -60,7 +60,7 @@
         <p class="text-xl font-semibold text-foreground">{value}</p>
         {#if trend}
           <span
-            class="text-xs font-medium {trend.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}"
+            class="text-xs font-medium {trend.value >= 0 ? 'text-success' : 'text-destructive'}"
           >
             {trend.value >= 0 ? '↑' : '↓'}{Math.abs(trend.value)}%
             {#if trend.label}

package/src/components/VoiceInput.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { Mic, MicOff, Loader2 } from 'lucide-svelte';
+  import TooltipButton from './TooltipButton.svelte';
+
+  // Web Speech API type declarations
+  interface SpeechRecognitionEvent extends Event {
+    results: SpeechRecognitionResultList;
+  }
+  interface SpeechRecognitionErrorEvent extends Event {
+    error: string;
+  }
+  interface SpeechRecognitionInstance extends EventTarget {
+    continuous: boolean;
+    interimResults: boolean;
+    lang: string;
+    onstart: (() => void) | null;
+    onresult: ((event: SpeechRecognitionEvent) => void) | null;
+    onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+    onend: (() => void) | null;
+    start(): void;
+    stop(): void;
+  }
+
+  interface Props {
+    /** Called when a speech recognition result is finalized */
+    onresult?: (text: string) => void;
+    /** Called when the engine starts listening */
+    onstart?: () => void;
+    /** Called when the engine stops listening */
+    onend?: () => void;
+    /** Standard button size */
+    size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
+    /** Custom class for the button */
+    class?: string;
+  }
+
+  let { 
+    onresult, 
+    onstart, 
+    onend, 
+    size = 'icon', 
+    class: className = '' 
+  }: Props = $props();
+
+  let isListening = $state(false);
+  let notSupported = $state(false);
+  let recognition: SpeechRecognitionInstance | null = null;
+
+  // Initialize SpeechRecognition on mount
+  $effect(() => {
+    const SpeechRecognitionCtor = (
+      (globalThis as Record<string, unknown>).SpeechRecognition ||
+      (globalThis as Record<string, unknown>).webkitSpeechRecognition
+    ) as (new () => SpeechRecognitionInstance) | undefined;
+    
+    if (!SpeechRecognitionCtor) {
+      notSupported = true;
+      return;
+    }
+
+    recognition = new SpeechRecognitionCtor();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = navigator.language || 'en-US';
+
+    recognition.onstart = () => {
+      isListening = true;
+      if (onstart) onstart();
+    };
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      const transcript = Array.from(event.results)
+        .map((result: SpeechRecognitionResult) => result[0])
+        .map((result: SpeechRecognitionAlternative) => result.transcript)
+        .join('');
+      
+      if (onresult && transcript) {
+        onresult(transcript);
+      }
+    };
+
+    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+      console.warn('SpeechRecognition error:', event.error);
+      isListening = false;
+      if (onend) onend();
+    };
+
+    recognition.onend = () => {
+      isListening = false;
+      if (onend) onend();
+    };
+  });
+
+  function toggleListening() {
+    if (!recognition) return;
+    
+    if (isListening) {
+      recognition.stop();
+    } else {
+      recognition.start();
+    }
+  }
+</script>
+
+<TooltipButton 
+  tooltip={notSupported ? "Voice input not supported in this browser" : (isListening ? "Stop listening" : "Start voice input")}
+  variant={isListening ? "destructive" : "ghost"} 
+  {size}
+  class="{isListening ? 'animate-pulse' : ''} {className}"
+  onclick={toggleListening}
+  disabled={notSupported}
+>
+  {#if isListening}
+    <Loader2 class="h-4 w-4 animate-spin -ml-1 mr-1.5 inline-block sm:hidden" />
+    <MicOff class="h-4 w-4" />
+  {:else}
+    <Mic class="h-4 w-4" />
+  {/if}
+</TooltipButton>

package/src/components/fields/BooleanField.svelte

@@ -3,11 +3,11 @@
   let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
 </script>
 {#if value}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
+  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-success/10 text-success">
     {trueIcon}
   </span>
 {:else}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-red-50 text-red-600 dark:bg-red-500/20 dark:text-red-400">
+  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-destructive/10 text-destructive">
     {falseIcon}
   </span>
 {/if}

package/src/components/fields/SelectField.svelte

@@ -7,7 +7,7 @@
   }>();
 
   const label = $derived(
-    options?.find((o: any) => o.value === value)?.label ?? (value != null ? String(value) : '—')
+    options?.find((o: { label: string; value: string | number }) => o.value === value)?.label ?? (value != null ? String(value) : '—')
   );
 </script>
 

package/src/components/ui/alert/alert.svelte

@@ -9,8 +9,8 @@
 			variant: {
 				default: "bg-card text-foreground",
 				destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-				warning: "border-amber-500/50 text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/20 [&>svg]:text-current",
-				success: "border-emerald-500/50 text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/20 [&>svg]:text-current",
+				warning: "border-warning/50 text-warning-foreground bg-warning/10 [&>svg]:text-current",
+				success: "border-success/50 text-success bg-success/10 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: { variant: "default" },

package/src/components/ui/button/button.svelte

@@ -53,11 +53,19 @@
 		children,
 		...restProps
 	}: ButtonProps = $props();
+
+	let anchorRef: HTMLAnchorElement | null = $state(null);
+	let buttonRef: HTMLButtonElement | null = $state(null);
+
+	$effect(() => {
+		if (href && anchorRef) ref = anchorRef as any;
+		else if (!href && buttonRef) ref = buttonRef as any;
+	});
 </script>
 
 {#if href}
 	<a
-		bind:this={ref}
+		bind:this={anchorRef}
 		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		href={disabled ? undefined : href}
@@ -70,7 +78,7 @@
 	</a>
 {:else}
 	<button
-		bind:this={ref}
+		bind:this={buttonRef}
 		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}

package/src/components/ui/pagination/pagination-ellipsis.svelte

@@ -6,7 +6,7 @@
   let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
 </script>
 
-<span aria-hidden data-slot="pagination-ellipsis" class={cn("flex size-9 items-center justify-center", className)} {...restProps}>
+<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("flex size-9 items-center justify-center", className)} {...restProps}>
   <Ellipsis class="size-4" />
   <span class="sr-only">More pages</span>
 </span>

package/src/components/ui/sheet/sheet.svelte

@@ -43,6 +43,7 @@
 	<!-- Overlay -->
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
+		role="presentation"
 		class="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0"
 		onclick={close}
 	></div>

package/src/index.ts

@@ -46,7 +46,14 @@ export { default as StepsForm } from './components/StepsForm.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
-export { default as ChatDialog } from './components/ChatDialog.svelte';
+export { default as ChatDialog } from "./components/ChatDialog.svelte";
+export { default as MarkdownRenderer } from "./components/MarkdownRenderer.svelte";
+export { default as SmartSuggest } from "./components/SmartSuggest.svelte";
+export { default as AICommandBar } from "./components/AICommandBar.svelte";
+export { default as CopilotPanel } from "./components/CopilotPanel.svelte";
+export { default as InsightCard } from "./components/InsightCard.svelte";
+export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
+export { default as VoiceInput } from "./components/VoiceInput.svelte";
 // Field display components
 export { default as NumberField } from './components/fields/NumberField.svelte';
 export { default as DateField } from './components/fields/DateField.svelte';
@@ -102,6 +109,12 @@ export { Command } from './components/ui/command/index.js';
 // Utils
 export { cn } from './utils';
 
+// Component Registry (DI)
+export {
+  setComponentRegistry, getComponentRegistry, useComponent,
+  type ComponentRegistry,
+} from './component-registry.svelte';
+
 // Field component registry
 export {
   builtinDisplayComponents, registerDisplayComponent,