@svadmin/ui 0.9.0 → 0.10.0

package/package.json

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

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: any) {
+      if (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-amber-500 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-amber-500 bg-amber-500/10 hover:bg-amber-500/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-amber-500/10 text-amber-500 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/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-green-500 hover:bg-green-600 text-white' : ''} {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/CopilotPanel.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { getChatProvider, getChatContext } from '@svadmin/core';
+  import { Sparkles, X, ChevronRight, Check } 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: any) {
+      if (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}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 21v-5h5"/></svg>
+            </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/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: any) {
+      if (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">
@@ -128,4 +128,3 @@
   <ChatDialog />
   <Toast />
 {/if}
-</div>

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;
       }

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: any) {
+      if (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/VoiceInput.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { Mic, MicOff, Loader2 } from 'lucide-svelte';
+  import TooltipButton from './TooltipButton.svelte';
+
+  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: any = null;
+
+  // Initialize SpeechRecognition on mount
+  $effect(() => {
+    // @ts-ignore - Browser specific APIs
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    
+    if (!SpeechRecognition) {
+      notSupported = true;
+      return;
+    }
+
+    recognition = new SpeechRecognition();
+    recognition.continuous = false;
+    // Tries to return interim results, but we mainly care about final
+    recognition.interimResults = false;
+    // Uses the browser locale by default
+    recognition.lang = navigator.language || 'en-US';
+
+    recognition.onstart = () => {
+      isListening = true;
+      if (onstart) onstart();
+    };
+
+    recognition.onresult = (event: any) => {
+      const transcript = Array.from(event.results)
+        .map((result: any) => result[0])
+        .map((result: any) => result.transcript)
+        .join('');
+      
+      if (onresult && transcript) {
+        onresult(transcript);
+      }
+    };
+
+    recognition.onerror = (event: any) => {
+      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/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';