@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/SmartSuggest.svelte

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

package/dist/components/SmartSuggest.svelte.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+declare const SmartSuggest: import("svelte").Component<Props, {}, "value">;
+type SmartSuggest = ReturnType<typeof SmartSuggest>;
+export default SmartSuggest;

package/dist/components/StatsCard.svelte

@@ -0,0 +1,79 @@
+<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/dist/components/StatsCard.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type ColorVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type StyleVariant = 'default' | 'outline' | 'filled';
+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;
+}
+declare const StatsCard: import("svelte").Component<Props, {}, "">;
+type StatsCard = ReturnType<typeof StatsCard>;
+export default StatsCard;

package/dist/components/StepsForm.svelte

@@ -0,0 +1,194 @@
+<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;
+  })());
+
+  const validator = $derived(deriveValidator(flatStepsFields));
+
+  // ─── useStepsForm: form state + step navigation ──────────────────
+  const form = useStepsForm({
+    get resource() { return resourceName; },
+    get action() { return mode; },
+    get id() { return id; },
+    get defaultValues() { return defaults; },
+    redirect: 'list',
+    warnWhenUnsavedChanges: true,
+    get validate() { return validator; },
+  });
+
+  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/dist/components/StepsForm.svelte.d.ts

@@ -0,0 +1,13 @@
+interface StepDef {
+    title: string;
+    fields: string[];
+}
+interface Props {
+    resourceName: string;
+    id?: string | number;
+    mode?: 'create' | 'edit';
+    steps: StepDef[];
+}
+declare const StepsForm: import("svelte").Component<Props, {}, "">;
+type StepsForm = ReturnType<typeof StepsForm>;
+export default StepsForm;

package/dist/components/TaskQueueDrawer.svelte

@@ -0,0 +1,158 @@
+<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/dist/components/TaskQueueDrawer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { BackgroundTask } from '../types.js';
+type $$ComponentProps = {
+    open?: boolean;
+    tasks?: BackgroundTask[];
+    onDismiss?: (taskId: string) => void;
+    onRetry?: (taskId: string) => void;
+    onDownload?: (taskId: string, url: string) => void;
+};
+declare const TaskQueueDrawer: import("svelte").Component<$$ComponentProps, {}, "open" | "tasks">;
+type TaskQueueDrawer = ReturnType<typeof TaskQueueDrawer>;
+export default TaskQueueDrawer;