@svadmin/ui 0.29.1 → 0.29.2

package/src/components/SmartSuggest.svelte

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

@@ -1,79 +0,0 @@
-<script lang="ts">
-  import { Skeleton } from './ui/skeleton/index.js';
-  import type { Snippet } from 'svelte';
-
-  type ColorVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
-  type StyleVariant = 'default' | 'outline' | 'filled';
-
-  const colorMap: Record<ColorVariant, string> = {
-    primary: 'bg-primary/10 text-primary',
-    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> = {
-    default: 'bg-card shadow-sm hover:shadow-md transition-shadow duration-300',
-    outline: 'border-2 border-border bg-transparent',
-    filled: 'border-0 bg-muted/50 shadow-sm',
-  };
-
-  interface Props {
-    label: string;
-    value: string | number;
-    icon?: import('svelte').Component<{ class?: string }>;
-    trend?: { value: number; label?: string };
-    loading?: boolean;
-    color?: ColorVariant;
-    variant?: StyleVariant;
-    /** Optional footer snippet for additional content below the value */
-    footer?: Snippet;
-    class?: string;
-  }
-
-  let {
-    label,
-    value,
-    icon: Icon,
-    trend,
-    loading = false,
-    color = 'primary',
-    variant = 'default',
-    footer,
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div class="flex items-center gap-4 rounded-lg p-5 {variantMap[variant]} {className}">
-  {#if Icon}
-    <div class="flex h-12 w-12 items-center justify-center rounded-lg {colorMap[color]}">
-      <Icon class="h-6 w-6" />
-    </div>
-  {/if}
-  <div class="flex-1 min-w-0">
-    <p class="text-sm text-muted-foreground">{label}</p>
-    {#if loading}
-      <Skeleton class="mt-1 h-7 w-20" />
-    {:else}
-      <div class="flex items-baseline gap-2">
-        <p class="text-xl font-mono font-semibold text-foreground tracking-tight">{value}</p>
-        {#if trend}
-          <span
-            class="text-xs font-medium {trend.value >= 0 ? 'text-success' : 'text-destructive'}"
-          >
-            {trend.value >= 0 ? '↑' : '↓'}{Math.abs(trend.value)}%
-            {#if trend.label}
-              <span class="text-muted-foreground">{trend.label}</span>
-            {/if}
-          </span>
-        {/if}
-      </div>
-    {/if}
-    {#if footer}
-      <div class="mt-2">
-        {@render footer()}
-      </div>
-    {/if}
-  </div>
-</div>

package/src/components/StepsForm.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">
-  import { fly } from 'svelte/transition';
-  import { useStepsForm, deriveValidator } from '@svadmin/core';
-  import type { FieldDefinition } from '@svadmin/core';
-  import { getResource } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
-  import { Badge } from './ui/badge/index.js';
-  import { Progress } from './ui/progress/index.js';
-  import { Save, ArrowLeft, ArrowRight, Check, Loader2 } from '@lucide/svelte';
-  import FieldRenderer from './FieldRenderer.svelte';
-
-  interface StepDef {
-    title: string;
-    fields: string[];
-  }
-
-  interface Props {
-    resourceName: string;
-    id?: string | number;
-    mode?: 'create' | 'edit';
-    steps: StepDef[];
-  }
-
-  let { resourceName, id, mode = 'create', steps }: Props = $props();
-
-  const resource = $derived(getResource(resourceName));
-  const primaryKey = $derived(resource.primaryKey ?? 'id');
-
-  // All fields used across all steps
-  const flatStepsFields = $derived(steps.flatMap(s => s.fields)
-    .map(key => resource.fields.find(f => f.key === key))
-    .filter((f): f is FieldDefinition => f != null));
-
-  // Default values from field metadata
-  function getDefaultForType(field: FieldDefinition): unknown {
-    switch (field.type) {
-      case 'text': case 'textarea': case 'richtext': case 'image': return '';
-      case 'number': return 0;
-      case 'boolean': return false;
-      case 'tags': case 'images': case 'multiselect': return [];
-      case 'select': return field.options?.[0]?.value ?? '';
-      case 'json': return {};
-      default: return '';
-    }
-  }
-
-  const defaults = $derived((() => {
-    const d: Record<string, unknown> = {};
-    for (const f of flatStepsFields) d[f.key] = f.defaultValue ?? getDefaultForType(f);
-    return d;
-  })());
-
-  // ─── useStepsForm: form state + step navigation ──────────────────
-  const form = useStepsForm({
-    get resource() { return resourceName; },
-    get action() { return mode; },
-    get id() { return id; },
-    defaultValues: defaults,
-    redirect: 'list',
-    warnWhenUnsavedChanges: true,
-    validate: deriveValidator(flatStepsFields),
-  });
-
-  const totalSteps = $derived(steps.length);
-  const progressValue = $derived(((form.currentStep + 1) / totalSteps) * 100);
-  const isLastStep = $derived(form.currentStep >= totalSteps - 1);
-
-  // Fields for the current step
-  const currentFields = $derived(
-    steps[form.currentStep]?.fields
-      .map(key => resource.fields.find(f => f.key === key))
-      .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
-  );
-
-  // Validate only fields in the current step
-  function validateCurrentStep(): boolean {
-    let valid = true;
-    form.clearErrors();
-    for (const field of currentFields) {
-      const value = form.values[field.key];
-      if (field.required && (value === undefined || value === null || value === '')) {
-        form.setFieldError(field.key, t('validation.required'));
-        valid = false;
-      } else if (field.validate) {
-        const msg = field.validate(value);
-        if (msg) {
-          form.setFieldError(field.key, msg);
-          valid = false;
-        }
-      }
-    }
-    return valid;
-  }
-
-  async function handleSubmit() {
-    if (!validateCurrentStep()) return;
-
-    if (!isLastStep) {
-      form.next();
-      return;
-    }
-
-    // Last step — submit the full form
-    await form.submit({ redirect: 'list' });
-  }
-</script>
-
-<div class="space-y-6">
-  <!-- Step indicators -->
-  <div class="space-y-3">
-    <div class="flex items-center justify-between text-sm">
-      {#each steps as step, i}
-        <Button
-          variant="ghost"
-          type="button"
-          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === form.currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
-          onclick={() => form.gotoStep(i)}
-        >
-          <span
-            class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors"
-            class:bg-primary={i <= form.currentStep}
-            class:text-primary-foreground={i <= form.currentStep}
-            class:bg-muted={i > form.currentStep}
-            class:text-muted-foreground={i > form.currentStep}
-          >
-            {#if i < form.currentStep}
-              <Check class="h-3.5 w-3.5" />
-            {:else}
-              {i + 1}
-            {/if}
-          </span>
-          <span class="hidden sm:inline">{step.title}</span>
-        </Button>
-        {#if i < steps.length - 1}
-          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < form.currentStep}></div>
-        {/if}
-      {/each}
-    </div>
-    <Progress value={progressValue} class="h-1.5" />
-  </div>
-
-  <!-- Step content -->
-  <Card.Root>
-    <Card.CardHeader>
-      <Card.CardTitle>{steps[form.currentStep]?.title ?? ''}</Card.CardTitle>
-      <Badge variant="outline" class="w-fit">
-        {t('common.step')} {form.currentStep + 1} / {totalSteps}
-      </Badge>
-    </Card.CardHeader>
-    <Card.CardContent>
-      {#key form.currentStep}
-        <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
-        {#each currentFields as field (field.key)}
-          <FieldRenderer
-            {field}
-            value={form.values[field.key]}
-            onchange={(v) => form.setFieldValue(field.key, v)}
-          />
-          {#if form.errors[field.key]}
-            <p class="text-destructive text-[0.8125rem] mt-1">{form.errors[field.key]}</p>
-          {/if}
-        {/each}
-
-        <div class="flex items-center justify-between pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onclick={() => form.currentStep === 0 ? navigate(`/${resourceName}`) : form.prev()}
-          >
-            <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
-            {form.currentStep === 0 ? t('common.cancel') : t('common.back')}
-          </Button>
-
-          <Button type="submit" disabled={form.submitting}>
-            {#if form.submitting}
-              <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
-            {:else if isLastStep}
-              <Save class="h-4 w-4" data-icon="inline-start" />
-            {:else}
-              <ArrowRight class="h-4 w-4" data-icon="inline-start" />
-            {/if}
-            {isLastStep ? t('common.save') : t('common.next')}
-          </Button>
-        </div>
-      </form>
-      {/key}
-    </Card.CardContent>
-  </Card.Root>
-</div>

package/src/components/TaskQueueDrawer.svelte

@@ -1,158 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { Loader2, CheckCircle2, XCircle, Clock, Download, X, ListTodo } from '@lucide/svelte';
-  import { Button } from './ui/button/index.js';
-  import { Badge } from './ui/badge/index.js';
-  import type { BackgroundTask, TaskStatus } from '../types.js';
-
-  let {
-    open = $bindable(false),
-    tasks = $bindable<BackgroundTask[]>([]),
-    onDismiss,
-    onRetry,
-    onDownload,
-  }: {
-    open?: boolean;
-    tasks?: BackgroundTask[];
-    onDismiss?: (taskId: string) => void;
-    onRetry?: (taskId: string) => void;
-    onDownload?: (taskId: string, url: string) => void;
-  } = $props();
-
-  let runningCount = $derived(tasks.filter(t => t.status === 'running' || t.status === 'pending').length);
-
-  const statusIcon: Record<TaskStatus, typeof Loader2> = {
-    pending: Clock,
-    running: Loader2,
-    completed: CheckCircle2,
-    failed: XCircle,
-  };
-
-  const statusColor: Record<TaskStatus, string> = {
-    pending: 'text-muted-foreground',
-    running: 'text-primary',
-    completed: 'text-green-500',
-    failed: 'text-destructive',
-  };
-
-  function formatTime(d: string | Date) {
-    return new Date(d).toLocaleTimeString();
-  }
-
-  function dismissTask(id: string) {
-    tasks = tasks.filter(t => t.id !== id);
-    onDismiss?.(id);
-  }
-</script>
-
-<!-- Trigger Button (to be placed in Header) -->
-<Button
-  variant="ghost"
-  size="icon"
-  class="relative"
-  onclick={() => open = !open}
->
-  <ListTodo class="h-4 w-4" />
-  {#if runningCount > 0}
-    <span class="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
-      {runningCount}
-    </span>
-  {/if}
-</Button>
-
-<!-- Task Queue Drawer -->
-{#if open}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="fixed inset-0 z-[90] flex justify-end" onclick={() => open = false}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div
-      class="bg-card shadow-2xl w-full max-w-sm h-full flex flex-col border-l border-border animate-in slide-in-from-right duration-200"
-      onclick={(e) => e.stopPropagation()}
-    >
-      <!-- Header -->
-      <div class="p-4 border-b border-border flex items-center justify-between bg-muted/30">
-        <div class="flex items-center gap-2">
-          <ListTodo class="h-5 w-5 text-muted-foreground" />
-          <h2 class="text-sm font-semibold">Background Tasks</h2>
-          {#if runningCount > 0}
-            <Badge variant="secondary" class="text-xs">{runningCount} active</Badge>
-          {/if}
-        </div>
-        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => open = false}>
-          <X class="h-4 w-4" />
-        </Button>
-      </div>
-
-      <!-- Task List -->
-      <div class="flex-1 overflow-y-auto">
-        {#each tasks as task}
-          {@const Icon = statusIcon[task.status]}
-          <div class="p-4 border-b border-border hover:bg-muted/30 transition-colors">
-            <div class="flex items-start justify-between gap-2">
-              <div class="flex items-start gap-3 flex-1 min-w-0">
-                <div class="{statusColor[task.status]} mt-0.5 shrink-0">
-                  <Icon class="h-4 w-4 {task.status === 'running' ? 'animate-spin' : ''}" />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium truncate text-foreground">{task.title}</p>
-                  {#if task.message}
-                    <p class="text-xs text-muted-foreground mt-0.5">{task.message}</p>
-                  {/if}
-                  <p class="text-[10px] text-muted-foreground/60 mt-1 font-mono">{formatTime(task.createdAt)}</p>
-                </div>
-              </div>
-              <button
-                class="text-muted-foreground/40 hover:text-muted-foreground transition shrink-0"
-                onclick={() => dismissTask(task.id)}
-              >
-                <X class="h-3.5 w-3.5" />
-              </button>
-            </div>
-
-            <!-- Progress bar -->
-            {#if task.status === 'running' && task.progress != null}
-              <div class="mt-3 ml-7">
-                <div class="h-1.5 w-full bg-muted rounded-full overflow-hidden">
-                  <div
-                    class="h-full bg-primary rounded-full transition-all duration-500 ease-out"
-                    style="width: {task.progress}%"
-                  ></div>
-                </div>
-                <p class="text-[10px] text-muted-foreground mt-1">{task.progress}%</p>
-              </div>
-            {/if}
-
-            <!-- Actions -->
-            {#if task.status === 'completed' && task.downloadUrl}
-              <div class="mt-2 ml-7">
-                <Button
-                  variant="outline" size="sm" class="h-7 text-xs"
-                  onclick={() => onDownload?.(task.id, task.downloadUrl!)}
-                >
-                  <Download class="h-3 w-3 mr-1" />
-                  Download
-                </Button>
-              </div>
-            {:else if task.status === 'failed' && onRetry}
-              <div class="mt-2 ml-7">
-                <Button
-                  variant="outline" size="sm" class="h-7 text-xs text-destructive"
-                  onclick={() => onRetry?.(task.id)}
-                >
-                  Retry
-                </Button>
-              </div>
-            {/if}
-          </div>
-        {:else}
-          <div class="flex flex-col items-center justify-center h-48 text-muted-foreground">
-            <ListTodo class="h-8 w-8 mb-2 opacity-30" />
-            <p class="text-sm">No background tasks</p>
-          </div>
-        {/each}
-      </div>
-    </div>
-  </div>
-{/if}

package/src/components/TenantSwitcher.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { ChevronsUpDown, Building2, Check } from '@lucide/svelte';
-  import { Button } from './ui/button/index.js';
-  import * as DropdownMenu from './ui/dropdown-menu/index.js';
-  import type { Tenant } from '../types.js';
-
-  let {
-    tenants = [],
-    currentTenantId = $bindable(''),
-    collapsed = false,
-    onSwitch,
-    headerSnippet,
-  }: {
-    tenants: Tenant[];
-    currentTenantId?: string;
-    collapsed?: boolean;
-    onSwitch?: (tenantId: string) => void;
-    headerSnippet?: Snippet;
-  } = $props();
-
-  let currentTenant = $derived(tenants.find(t => t.id === currentTenantId) ?? tenants[0]);
-
-  function selectTenant(id: string) {
-    currentTenantId = id;
-    onSwitch?.(id);
-  }
-</script>
-
-{#if tenants.length > 0}
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger>
-      {#snippet child({ props }: { props: Record<string, unknown> })}
-        <button
-          {...props}
-          class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-sidebar-accent/50
-            {collapsed ? 'justify-center' : ''}"
-        >
-          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">
-            {#if currentTenant?.logo}
-              <img src={currentTenant.logo} alt={currentTenant.name} class="h-full w-full rounded-lg object-cover" />
-            {:else}
-              <Building2 class="h-4 w-4" />
-            {/if}
-          </div>
-          {#if !collapsed}
-            <div class="flex-1 min-w-0">
-              <p class="truncate text-sm font-semibold text-sidebar-foreground">{currentTenant?.name ?? 'Select'}</p>
-              <p class="truncate text-[10px] text-sidebar-foreground/50">Workspace</p>
-            </div>
-            <ChevronsUpDown class="h-4 w-4 shrink-0 text-sidebar-foreground/40" />
-          {/if}
-        </button>
-      {/snippet}
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Content class="w-56">
-      {#if headerSnippet}
-        <div class="px-2 py-1.5">
-          {@render headerSnippet()}
-        </div>
-        <DropdownMenu.Separator />
-      {/if}
-      <div class="px-2 py-1.5 text-xs text-muted-foreground">Workspaces</div>
-      {#each tenants as tenant}
-        <DropdownMenu.Item
-          class="flex items-center gap-3 cursor-pointer"
-          onclick={() => selectTenant(tenant.id)}
-        >
-          <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary text-xs font-bold">
-            {#if tenant.logo}
-              <img src={tenant.logo} alt={tenant.name} class="h-full w-full rounded object-cover" />
-            {:else}
-              {tenant.name.charAt(0).toUpperCase()}
-            {/if}
-          </div>
-          <span class="flex-1 truncate">{tenant.name}</span>
-          {#if tenant.id === currentTenantId}
-            <Check class="h-4 w-4 text-primary" />
-          {/if}
-        </DropdownMenu.Item>
-      {/each}
-    </DropdownMenu.Content>
-  </DropdownMenu.Root>
-{/if}