@svadmin/ui 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "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

@@ -59,8 +59,8 @@
       } else {
         aiResponse = await result;
       }
-    } catch (err: any) {
-      if (err.name !== 'AbortError') {
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
         aiResponse = 'Failed to get response from AI.';
       }
     } finally {
@@ -91,7 +91,7 @@
     >
       <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" />
+          <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}
@@ -103,7 +103,7 @@
         />
         {#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"
+            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" />
@@ -152,7 +152,7 @@
         <!-- 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">
+            <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">

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());
 
@@ -77,6 +100,9 @@
   let authChecked = $state(false);
 
   $effect(() => {
+    // Explicitly track route so auth is re-checked on navigation
+    const _route = route;
+
     if (!authProvider) {
       isAuthenticated = true;
       authChecked = true;
@@ -85,7 +111,7 @@
     authProvider.check().then(result => {
       isAuthenticated = result.authenticated;
       authChecked = true;
-      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password' && route !== '/update-password') {
+      if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
         navigate(result.redirectTo ?? '/login');
       }
     });

package/src/components/AnomalyBadge.svelte

@@ -52,7 +52,7 @@
   >
     <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}"
+      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" />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getChatProvider, getChatContext } from '@svadmin/core';
-  import { Sparkles, X, ChevronRight, Check } from 'lucide-svelte';
+  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';
@@ -56,8 +56,8 @@ Keep it concise, professional, and use bullet points.`;
       } else {
         insightText = await result;
       }
-    } catch (err: any) {
-      if (err.name !== 'AbortError') {
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
         insightText = 'Failed to generate insights for this context.';
       }
     } finally {
@@ -115,7 +115,7 @@ Keep it concise, professional, and use bullet points.`;
             </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>
+              <RefreshCcw class="h-3 w-3" />
             </Button>
           {/if}
         </h4>

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

@@ -55,8 +55,8 @@ ${context}`;
       } else {
         insightText = await result;
       }
-    } catch (err: any) {
-      if (err.name !== 'AbortError') {
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
         insightText = 'Failed to generate insights.';
       }
     } finally {

package/src/components/Layout.svelte

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

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

@@ -69,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

@@ -88,8 +88,8 @@ Do not include any other text, Markdown formatting, quotes, or explanations.`;
       
       // Clean up the suggestion
       suggestion = suggestion.trim().replace(/^["']|["']$/g, '');
-    } catch (err: any) {
-      if (err.name !== 'AbortError') {
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== 'AbortError') {
         suggestion = '';
       }
     } finally {

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

@@ -2,6 +2,25 @@
   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;
@@ -25,23 +44,23 @@
 
   let isListening = $state(false);
   let notSupported = $state(false);
-  let recognition: any = null;
+  let recognition: SpeechRecognitionInstance | null = null;
 
   // Initialize SpeechRecognition on mount
   $effect(() => {
-    // @ts-ignore - Browser specific APIs
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const SpeechRecognitionCtor = (
+      (globalThis as Record<string, unknown>).SpeechRecognition ||
+      (globalThis as Record<string, unknown>).webkitSpeechRecognition
+    ) as (new () => SpeechRecognitionInstance) | undefined;
     
-    if (!SpeechRecognition) {
+    if (!SpeechRecognitionCtor) {
       notSupported = true;
       return;
     }
 
-    recognition = new SpeechRecognition();
+    recognition = new SpeechRecognitionCtor();
     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 = () => {
@@ -49,10 +68,10 @@
       if (onstart) onstart();
     };
 
-    recognition.onresult = (event: any) => {
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
       const transcript = Array.from(event.results)
-        .map((result: any) => result[0])
-        .map((result: any) => result.transcript)
+        .map((result: SpeechRecognitionResult) => result[0])
+        .map((result: SpeechRecognitionAlternative) => result.transcript)
         .join('');
       
       if (onresult && transcript) {
@@ -60,7 +79,7 @@
       }
     };
 
-    recognition.onerror = (event: any) => {
+    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
       console.warn('SpeechRecognition error:', event.error);
       isListening = false;
       if (onend) onend();

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/index.ts

@@ -109,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,