@svadmin/ui 0.29.0 → 0.29.2

package/src/component-registry.svelte.ts

@@ -1,60 +0,0 @@
-/**
- * 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>;
-
-  // ─── Extended slots (optional) ──────────────────────────────
-  // These allow deeper customization without replacing entire Layout/Header.
-
-  /** Custom dashboard page component (replaces default welcome message) */
-  DashboardPage?: Component<any>;
-  /** Custom breadcrumbs component (replaces built-in Breadcrumbs) */
-  Breadcrumbs?: Component<any>;
-  /** Custom theme toggle button (replaces built-in Sun/Moon toggle) */
-  ThemeToggle?: Component<any>;
-  /** Custom user menu / avatar dropdown in the header */
-  UserMenu?: Component<any>;
-  /** Custom notification panel / bell icon in the header */
-  NotificationPanel?: 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

@@ -1,180 +0,0 @@
-<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/AboutSettings.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { getResources, getDataProviderNames } from '@svadmin/core';
-  import { getLocale } from '@svadmin/core/i18n';
-  import { getResolvedTheme, getColorTheme } from '@svadmin/core';
-  import * as Card from './ui/card/index.js';
-  import { Badge } from './ui/badge/index.js';
-  import { Info, Database, Globe, Palette, Layers } from '@lucide/svelte';
-
-  const resources = getResources();
-  const providerNames = getDataProviderNames();
-
-  const version = '__SVADMIN_VERSION__'; // replaced at build time or shown as-is
-</script>
-
-<div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.about')}</h2>
-  </div>
-
-  <!-- Version -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base flex items-center gap-2">
-        <Info class="h-4 w-4 text-muted-foreground" />
-        svadmin
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="grid gap-4 text-sm">
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">{t('settings.version')}</span>
-          <Badge variant="secondary" class="font-mono text-xs">{version}</Badge>
-        </div>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Registered Resources -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base flex items-center gap-2">
-        <Layers class="h-4 w-4 text-muted-foreground" />
-        {t('settings.registeredResources')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex flex-wrap gap-2">
-        {#each resources as resource}
-          <Badge variant="outline" class="font-mono text-xs">{resource.name}</Badge>
-        {/each}
-        {#if resources.length === 0}
-          <p class="text-sm text-muted-foreground">—</p>
-        {/if}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Data Providers -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base flex items-center gap-2">
-        <Database class="h-4 w-4 text-muted-foreground" />
-        {t('settings.dataProvider')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex flex-wrap gap-2">
-        {#each providerNames as name}
-          <Badge variant="outline" class="font-mono text-xs">{name}</Badge>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Current Environment -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base flex items-center gap-2">
-        <Globe class="h-4 w-4 text-muted-foreground" />
-        {t('settings.currentEnvironment')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="grid gap-3 text-sm">
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">{t('settings.language')}</span>
-          <span class="font-mono text-xs">{getLocale()}</span>
-        </div>
-        <div class="h-px bg-border"></div>
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">{t('settings.themeMode')}</span>
-          <span class="font-mono text-xs">{getResolvedTheme()}</span>
-        </div>
-        <div class="h-px bg-border"></div>
-        <div class="flex items-center justify-between">
-          <span class="text-muted-foreground flex items-center gap-1.5">
-            <Palette class="h-3.5 w-3.5" />
-            {t('settings.colorAccent')}
-          </span>
-          <span class="font-mono text-xs">{getColorTheme()}</span>
-        </div>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-</div>

package/src/components/AdminApp.svelte

@@ -1,199 +0,0 @@
-<script lang="ts">
-  // Auto-inject design tokens so consumers don't need to manually import
-  import '../app.css';
-  import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { currentPath } from '@svadmin/core/router';
-  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
-  import { setComponentRegistry, getComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
-  import Layout from './Layout.svelte';
-  import AutoTable from './AutoTable.svelte';
-  import AutoForm from './AutoForm.svelte';
-  import ShowPage from './ShowPage.svelte';
-  import Toast from './Toast.svelte';
-  import LoginPage from './LoginPage.svelte';
-  import RegisterPage from './RegisterPage.svelte';
-  import ForgotPasswordPage from './ForgotPasswordPage.svelte';
-  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 SettingsPage from './SettingsPage.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 {
-    dataProvider: DataProvider;
-    authProvider?: AuthProvider;
-    routerProvider?: RouterProvider;
-    resources: ResourceDefinition[];
-    locale?: string;
-    title?: string;
-    defaultTheme?: ThemeMode;
-    /** Theme configuration for dark-first mode, CSS overrides, etc. */
-    themeConfig?: ThemeConfig;
-    dashboard?: Snippet;
-    loginPage?: Snippet;
-    /** Override default components via DI */
-    components?: Partial<ComponentRegistry>;
-    /** Custom multi-level menu configuration */
-    menu?: MenuItem[];
-    /** External URL to the main application or workspace (renders a shortcut in the header) */
-    siteUrl?: string;
-  }
-
-  let {
-    dataProvider,
-    authProvider,
-    routerProvider,
-    resources,
-    locale,
-    title = 'Admin',
-    defaultTheme,
-    themeConfig: userThemeConfig,
-    dashboard,
-    loginPage,
-    components: userComponents,
-    menu,
-    siteUrl,
-  }: 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());
-
-  // Set up context — use $effect so prop changes are tracked
-  $effect.pre(() => {
-    setDataProvider(dataProvider);
-    if (authProvider) setAuthProvider(authProvider);
-    setResources(resources);
-    setRouterProvider(resolvedRouter);
-    if (locale) setLocale(locale);
-    if (userThemeConfig) configureTheme(userThemeConfig);
-    if (defaultTheme) setTheme(defaultTheme);
-  });
-
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { staleTime: 30_000, retry: 1 },
-    },
-  });
-
-  // Initialize router with provider
-  $effect.pre(() => {
-    initRouter(resolvedRouter);
-  });
-
-  // Reactive getters for route state
-  const route = $derived(getRoute());
-  const params = $derived(getParams());
-
-  // Auth check
-  let isAuthenticated = $state(false);
-  let authChecked = $state(false);
-
-  $effect(() => {
-    // Explicitly track route so auth is re-checked on navigation
-    const _route = route;
-
-    if (!authProvider) {
-      isAuthenticated = true;
-      authChecked = true;
-      return;
-    }
-    authProvider.check().then(result => {
-      isAuthenticated = result.authenticated;
-      authChecked = true;
-      if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
-        navigate(result.redirectTo ?? '/login');
-      }
-    });
-  });
-</script>
-
-<QueryClientProvider client={queryClient}>
-  {#if !authChecked}
-    <div class="flex h-screen items-center justify-center">
-      <div class="space-y-4 text-center">
-        <div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary mx-auto"></div>
-        <p class="text-sm text-muted-foreground">Loading...</p>
-      </div>
-    </div>
-  {:else if route === '/login' && loginPage}
-    {@render loginPage()}
-  {:else if route === '/login' && authProvider}
-    <LoginPage {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
-  {:else if route === '/register' && authProvider?.register}
-    <RegisterPage {title} />
-  {:else if route === '/forgot-password' && authProvider?.forgotPassword}
-    <ForgotPasswordPage {title} />
-  {:else if route === '/update-password' && authProvider?.updatePassword}
-    <UpdatePasswordPage {title} />
-  {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
-    <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
-  {:else if isAuthenticated || !authProvider}
-    <Layout {title} {menu} {siteUrl}>
-      {#key route + (params.resource ?? '') + (params.id ?? '')}
-      <div class="svadmin-page-enter">
-      {#if currentPath().startsWith('/settings')}
-        <SettingsPage />
-      {:else if route === '/' || route === ''}
-        {#if dashboard}
-          {@render dashboard()}
-        {:else}
-          <div class="space-y-4">
-            <h1 class="text-xl font-semibold text-foreground">{t('common.welcome', { title })}</h1>
-            <p class="text-muted-foreground">{t('common.dashboardHint')}</p>
-          </div>
-        {/if}
-      {:else if route === '/:resource'}
-        {#key params.resource}
-          {@const Comp = getComponentRegistry().AutoTable}
-          <Comp resourceName={params.resource} />
-        {/key}
-      {:else if route === '/:resource/create'}
-        {#key params.resource}
-          {@const Comp = getComponentRegistry().AutoForm}
-          <Comp resourceName={params.resource} mode="create" />
-        {/key}
-      {:else if route === '/:resource/edit/:id'}
-        {#key `${params.resource}-${params.id}`}
-          {@const Comp = getComponentRegistry().AutoForm}
-          <Comp resourceName={params.resource} mode="edit" id={params.id} />
-        {/key}
-      {:else if route === '/:resource/show/:id'}
-        {#key `${params.resource}-${params.id}`}
-          {@const Comp = getComponentRegistry().ShowPage}
-          <Comp resourceName={params.resource} id={params.id} />
-        {/key}
-      {/if}
-      </div>
-      {/key}
-    </Layout>
-  {:else}
-    <div class="flex h-screen items-center justify-center">
-      <p class="text-muted-foreground">{t('common.redirecting')}</p>
-    </div>
-  {/if}
-  <Toast />
-  <DevTools />
-</QueryClientProvider>

package/src/components/AnimatedCounter.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { untrack } from 'svelte';
-
-  interface Props {
-    /** The target number to animate to */
-    value: number | string;
-    /** Animation duration in milliseconds */
-    duration?: number;
-    /** CSS class for the container */
-    class?: string;
-  }
-
-  let { value, duration = 600, class: className = '' }: Props = $props();
-
-  let displayValue = $state('0');
-  let prevTarget = 0;
-
-  $effect(() => {
-    const target = typeof value === 'number' ? value : parseInt(value, 10);
-    if (isNaN(target)) {
-      displayValue = String(value);
-      return;
-    }
-
-    const start = untrack(() => prevTarget);
-    prevTarget = target;
-    const startTime = performance.now();
-
-    function tick() {
-      const elapsed = performance.now() - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      // Ease-out cubic
-      const eased = 1 - Math.pow(1 - progress, 3);
-      const current = Math.round(start + (target - start) * eased);
-      displayValue = current.toLocaleString();
-
-      if (progress < 1) {
-        requestAnimationFrame(tick);
-      }
-    }
-
-    requestAnimationFrame(tick);
-  });
-</script>
-
-<span class={className}>{displayValue}</span>

package/src/components/AnomalyBadge.svelte

@@ -1,65 +0,0 @@
-<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}