@svadmin/ui 0.29.3 → 0.29.4

package/dist/components/DevTools.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { fly, scale } from 'svelte/transition';
+  import { getResources } from '@svadmin/core';
+  import { getTheme, getColorTheme } from '@svadmin/core';
+  import { getLocale, t } from '@svadmin/core/i18n';
+  import { currentPath } from '@svadmin/core/router';
+  import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
+  import * as Tabs from './ui/tabs/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { ScrollArea } from './ui/scroll-area/index.js';
+  import { Separator } from './ui/separator/index.js';
+  import { X, Bug, ChevronDown, ChevronUp, Wand2 } from '@lucide/svelte';
+  import InferencerPanel from './InferencerPanel.svelte';
+
+  let visible = $state(false);
+  let collapsed = $state(false);
+
+  function toggle() {
+    visible = !visible;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+      e.preventDefault();
+      toggle();
+    }
+  }
+
+  const resources = $derived.by(() => { try { return getResources(); } catch { return []; } });
+  const path = $derived(currentPath());
+  const theme = $derived(getTheme());
+  const colorTheme = $derived(getColorTheme());
+  const locale = $derived(getLocale());
+
+  // Auto-trace state changes in dev mode via Svelte 5 $inspect
+  if ((import.meta as any).env?.DEV) {
+    $inspect({ path, theme, colorTheme, locale, resourceCount: resources.length });
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if (import.meta as any).env?.DEV}
+  {#if visible}
+    <div
+      class="fixed bottom-0 right-4 z-[9999] w-[420px] max-w-[95vw] rounded-t-xl border border-b-0 bg-card shadow-2xl text-[0.8125rem] overflow-hidden"
+      class:w-auto={collapsed} class:min-w-[200px]={collapsed}
+      transition:fly={{ y: 400, duration: 300 }}
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between px-3 py-2 bg-muted border-b">
+        <div class="flex items-center gap-1.5 font-semibold text-xs uppercase tracking-wider text-foreground">
+          <Bug class="h-4 w-4" />
+          <span>svadmin DevTools</span>
+        </div>
+        <div class="flex gap-1">
+          <TooltipButton tooltip={collapsed ? t('common.expand') : t('common.collapse')} variant="ghost" size="icon" class="h-6 w-6" onclick={() => collapsed = !collapsed}>
+            {#if collapsed}
+              <ChevronUp class="h-3.5 w-3.5" />
+            {:else}
+              <ChevronDown class="h-3.5 w-3.5" />
+            {/if}
+          </TooltipButton>
+          <TooltipButton tooltip={t('common.close')} variant="ghost" size="icon" class="h-6 w-6" onclick={toggle}>
+            <X class="h-3.5 w-3.5" />
+          </TooltipButton>
+        </div>
+      </div>
+
+      {#if !collapsed}
+        <Tabs.Root value="state" class="w-full">
+          <Tabs.List class="grid w-full grid-cols-2 h-8 rounded-none border-b">
+            <Tabs.Trigger value="state" class="text-xs data-[state=active]:shadow-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary">State</Tabs.Trigger>
+            <Tabs.Trigger value="inferencer" class="text-xs data-[state=active]:shadow-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary">
+              <Wand2 class="h-3 w-3 mr-1" /> Inferencer
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="state" class="p-0">
+            <ScrollArea class="max-h-[400px]">
+              <div class="p-2 space-y-1">
+                <!-- Router -->
+                <div class="py-1">
+                  <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Router</h4>
+                  <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
+                    <span class="text-xs text-foreground">Path</span>
+                    <Badge variant="secondary" class="font-mono text-[0.6875rem]">{path}</Badge>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <!-- Theme -->
+                <div class="py-1">
+                  <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Theme</h4>
+                  <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
+                    <span class="text-xs text-foreground">Mode</span>
+                    <Badge variant="secondary" class="font-mono text-[0.6875rem]">{theme}</Badge>
+                  </div>
+                  <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
+                    <span class="text-xs text-foreground">Color</span>
+                    <Badge variant="secondary" class="font-mono text-[0.6875rem]">{colorTheme}</Badge>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <!-- i18n -->
+                <div class="py-1">
+                  <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">i18n</h4>
+                  <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
+                    <span class="text-xs text-foreground">Locale</span>
+                    <Badge variant="secondary" class="font-mono text-[0.6875rem]">{locale}</Badge>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <!-- Resources -->
+                <div class="py-1">
+                  <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Resources ({resources.length})</h4>
+                  {#each resources as r}
+                    <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
+                      <span class="text-xs text-foreground">{r.name}</span>
+                      <Badge variant="outline" class="font-mono text-[0.6875rem]">{r.fields.length} fields</Badge>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </ScrollArea>
+          </Tabs.Content>
+          <Tabs.Content value="inferencer" class="p-0">
+            <InferencerPanel />
+          </Tabs.Content>
+        </Tabs.Root>
+      {/if}
+    </div>
+  {:else}
+    <TooltipButton
+      tooltip={t('devtools.title')}
+      variant="default"
+      size="icon"
+      class="fixed bottom-4 right-4 z-[9999] h-9 w-9 rounded-full shadow-lg opacity-60 hover:opacity-100 hover:scale-110 transition-all"
+      onclick={toggle}
+    >
+      <Bug class="h-4 w-4" />
+    </TooltipButton>
+  {/if}
+{/if}

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

@@ -0,0 +1,3 @@
+declare const DevTools: import("svelte").Component<Record<string, never>, {}, "">;
+type DevTools = ReturnType<typeof DevTools>;
+export default DevTools;

package/dist/components/DraggableGrid.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { GridModule } from '../types.js';
+
+  let {
+    modules = $bindable<GridModule[]>([]),
+    onOrderSave,
+    renderItem,
+    class: className = '',
+    columns = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    gap = 'gap-4',
+  }: {
+    modules?: GridModule[];
+    onOrderSave?: (orderedIds: string[]) => void;
+    renderItem: Snippet<[{ module: GridModule; index: number; dragging: boolean }]>;
+    class?: string;
+    columns?: string;
+    gap?: string;
+  } = $props();
+
+  let draggingId = $state<string | null>(null);
+  let dragOverId = $state<string | null>(null);
+
+  function handleDragStart(e: DragEvent, id: string) {
+    draggingId = id;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', id);
+    }
+  }
+
+  function handleDragOver(e: DragEvent, id: string) {
+    e.preventDefault();
+    if (draggingId && draggingId !== id) {
+      dragOverId = id;
+    }
+  }
+
+  function handleDrop(e: DragEvent, targetId: string) {
+    e.preventDefault();
+    if (!draggingId || draggingId === targetId) {
+      dragOverId = null;
+      return;
+    }
+
+    const sourceIdx = modules.findIndex(m => m.id === draggingId);
+    const targetIdx = modules.findIndex(m => m.id === targetId);
+
+    if (sourceIdx === -1 || targetIdx === -1) {
+      dragOverId = null;
+      return;
+    }
+
+    const newModules = [...modules];
+    const [dragged] = newModules.splice(sourceIdx, 1);
+    newModules.splice(targetIdx, 0, dragged);
+
+    modules = newModules;
+    dragOverId = null;
+    onOrderSave?.(modules.map(m => m.id));
+  }
+
+  function handleDragEnd() {
+    draggingId = null;
+    dragOverId = null;
+  }
+</script>
+
+<div class="grid {columns} {gap} {className}">
+  {#each modules as mod, i (mod.id)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      draggable="true"
+      ondragstart={(e) => handleDragStart(e, mod.id)}
+      ondragover={(e) => handleDragOver(e, mod.id)}
+      ondrop={(e) => handleDrop(e, mod.id)}
+      ondragend={handleDragEnd}
+      ondragleave={() => { if (dragOverId === mod.id) dragOverId = null; }}
+      class="transition-all duration-200
+        {draggingId === mod.id ? 'opacity-40 scale-[0.97] cursor-grabbing' : 'cursor-grab'}
+        {dragOverId === mod.id ? 'ring-2 ring-primary/40 ring-offset-2 ring-offset-background rounded-lg scale-[1.02]' : ''}"
+    >
+      {@render renderItem({ module: mod, index: i, dragging: draggingId === mod.id })}
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { GridModule } from '../types.js';
+type $$ComponentProps = {
+    modules?: GridModule[];
+    onOrderSave?: (orderedIds: string[]) => void;
+    renderItem: Snippet<[{
+        module: GridModule;
+        index: number;
+        dragging: boolean;
+    }]>;
+    class?: string;
+    columns?: string;
+    gap?: string;
+};
+declare const DraggableGrid: import("svelte").Component<$$ComponentProps, {}, "modules">;
+type DraggableGrid = ReturnType<typeof DraggableGrid>;
+export default DraggableGrid;

package/dist/components/DraggableHeader.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  /**
+   * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
+   * to enable column reorder. Persists order to localStorage.
+   *
+   * Usage:
+   *   <DraggableHeader columns={columns} resourceName="posts" onReorder={handleReorder}>
+   *     {#snippet header(column, index)}
+   *       <th>...</th>
+   *     {/snippet}
+   *   </DraggableHeader>
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Column {
+    id: string;
+    [key: string]: unknown;
+  }
+
+  interface Props {
+    columns: Column[];
+    resourceName: string;
+    onReorder: (newOrder: Column[]) => void;
+    header: Snippet<[Column, number, Record<string, any>]>;
+  }
+
+  let { columns, resourceName, onReorder, header }: Props = $props();
+
+  let dragIndex = $state<number | null>(null);
+  let dropIndex = $state<number | null>(null);
+
+  // Restore saved order from localStorage
+  $effect(() => {
+    const storageKey = `svadmin-colorder-${resourceName}`;
+    if (typeof localStorage === 'undefined') return;
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const savedOrder: string[] = JSON.parse(saved);
+        const reordered = savedOrder
+          .map(id => columns.find(c => c.id === id))
+          .filter((c): c is Column => c !== undefined);
+        // Add any new columns not in saved order
+        const remaining = columns.filter(c => !savedOrder.includes(c.id));
+        if (reordered.length > 0) {
+          onReorder([...reordered, ...remaining]);
+        }
+      }
+    } catch { /* ignore */ }
+  });
+
+  function handleDragStart(e: DragEvent, index: number) {
+    dragIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', String(index));
+    }
+  }
+
+  function handleDragOver(e: DragEvent, index: number) {
+    e.preventDefault();
+    dropIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+  }
+
+  function handleDrop(e: DragEvent, index: number) {
+    e.preventDefault();
+    if (dragIndex === null || dragIndex === index) {
+      dragIndex = null;
+      dropIndex = null;
+      return;
+    }
+
+    const newColumns = [...columns];
+    const [moved] = newColumns.splice(dragIndex, 1);
+    newColumns.splice(index, 0, moved);
+
+    // Persist to localStorage
+    const storageKey = `svadmin-colorder-${resourceName}`;
+    if (typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(newColumns.map(c => c.id)));
+      } catch { /* ignore */ }
+    }
+
+    onReorder(newColumns);
+    dragIndex = null;
+    dropIndex = null;
+  }
+
+  function handleDragEnd() {
+    dragIndex = null;
+    dropIndex = null;
+  }
+</script>
+
+<tr class="hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors bg-muted/50">
+  {#each columns as column, index}
+    {@render header(column, index, {
+      draggable: true,
+      ondragstart: (e: DragEvent) => handleDragStart(e, index),
+      ondragover: (e: DragEvent) => handleDragOver(e, index),
+      ondrop: (e: DragEvent) => handleDrop(e, index),
+      ondragend: handleDragEnd,
+      'data-dragging': dragIndex === index,
+      'data-drop-target': dropIndex === index && dropIndex !== dragIndex,
+      class: `cursor-grab active:cursor-grabbing select-none transition-opacity ${dragIndex === index ? 'opacity-50' : ''} ${dropIndex === index && dropIndex !== dragIndex ? 'border-l-2 border-primary' : ''}`
+    })}
+  {/each}
+</tr>

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

@@ -0,0 +1,25 @@
+/**
+   * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
+   * to enable column reorder. Persists order to localStorage.
+   *
+   * Usage:
+   *   <DraggableHeader columns={columns} resourceName="posts" onReorder={handleReorder}>
+   *     {#snippet header(column, index)}
+   *       <th>...</th>
+   *     {/snippet}
+   *   </DraggableHeader>
+   */
+import type { Snippet } from 'svelte';
+interface Column {
+    id: string;
+    [key: string]: unknown;
+}
+interface Props {
+    columns: Column[];
+    resourceName: string;
+    onReorder: (newOrder: Column[]) => void;
+    header: Snippet<[Column, number, Record<string, any>]>;
+}
+declare const DraggableHeader: import("svelte").Component<Props, {}, "">;
+type DraggableHeader = ReturnType<typeof DraggableHeader>;
+export default DraggableHeader;

package/dist/components/DrawerForm.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import * as Sheet from './ui/sheet/index.js';
+  import AutoForm from './AutoForm.svelte';
+
+  let { resourceName, mode = 'create', id, open = $bindable(false), side = 'right', onSuccess } = $props<{
+    resourceName: string;
+    mode?: 'create' | 'edit';
+    id?: string | number;
+    open: boolean;
+    side?: 'left' | 'right';
+    onSuccess?: () => void;
+  }>();
+
+  const resource = $derived(getResource(resourceName));
+
+  function handleClose() {
+    open = false;
+    onSuccess?.();
+  }
+</script>
+
+<Sheet.Root bind:open {side}>
+  <Sheet.Content>
+    <Sheet.Header>
+      <Sheet.Title>
+        {mode === 'create' ? `${t('common.create')}${resource.label}` : `${t('common.edit')}${resource.label}`}
+      </Sheet.Title>
+    </Sheet.Header>
+    <div class="flex-1 overflow-y-auto">
+      <AutoForm {resourceName} {mode} {id} />
+    </div>
+  </Sheet.Content>
+</Sheet.Root>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    resourceName: string;
+    mode?: 'create' | 'edit';
+    id?: string | number;
+    open: boolean;
+    side?: 'left' | 'right';
+    onSuccess?: () => void;
+};
+declare const DrawerForm: import("svelte").Component<$$ComponentProps, {}, "open">;
+type DrawerForm = ReturnType<typeof DrawerForm>;
+export default DrawerForm;

package/dist/components/EditPage.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { getResource, useDelete } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import PageHeader from './PageHeader.svelte';
+  import AutoForm from './AutoForm.svelte';
+  import ListButton from './buttons/ListButton.svelte';
+  import ShowButton from './buttons/ShowButton.svelte';
+  import RefreshButton from './buttons/RefreshButton.svelte';
+  import DeleteButton from './buttons/DeleteButton.svelte';
+
+  interface Props {
+    resourceName: string;
+    id: string | number;
+    title?: string;
+    canDelete?: boolean;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    id,
+    title,
+    canDelete,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = $derived(getResource(resourceName));
+  const pageTitle = $derived(title ?? `${t('common.edit')} ${resource.label} #${id}`);
+  const showDelete = $derived(canDelete ?? resource.canDelete !== false);
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      <ListButton resource={resourceName} hideText />
+      <ShowButton resource={resourceName} recordItemId={id} hideText />
+      <RefreshButton resource={resourceName} hideText />
+      {#if showDelete !== false}
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
+      {/if}
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoForm {resourceName} mode="edit" {id} />
+</div>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    resourceName: string;
+    id: string | number;
+    title?: string;
+    canDelete?: boolean;
+    headerActions?: Snippet;
+    class?: string;
+}
+declare const EditPage: import("svelte").Component<Props, {}, "">;
+type EditPage = ReturnType<typeof EditPage>;
+export default EditPage;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { fade, scale } from 'svelte/transition';
+  import { PackageOpen } from '@lucide/svelte';
+  import { t } from '@svadmin/core';
+
+  let {
+    title = t('empty.title'),
+    description = t('empty.description'),
+    children,
+  } = $props<{
+    title?: string;
+    description?: string;
+    children?: import('svelte').Snippet;
+  }>();
+</script>
+
+<div
+  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card/50 rounded-lg shadow-sm"
+  in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
+>
+  <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">
+    <PackageOpen class="h-10 w-10 text-muted-foreground" />
+  </div>
+  <h3 class="text-lg font-semibold tracking-tight">{title}</h3>
+  <p class="text-sm text-muted-foreground mt-2 max-w-sm">{description}</p>
+  {#if children}
+    <div class="mt-6">
+      {@render children()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    children?: import('svelte').Snippet;
+};
+declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/ErrorBoundary.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { AlertTriangle } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import { t } from '@svadmin/core/i18n';
+
+  let {
+    children,
+    fallback,
+  }: {
+    children: Snippet;
+    /** Optional custom error UI snippet */
+    fallback?: Snippet<[{ error: Error; reset: () => void }]>;
+  } = $props();
+
+  function handleError(error: unknown) {
+    console.error('[svadmin] Uncaught error:', error);
+  }
+</script>
+
+<svelte:boundary onerror={handleError}>
+  {@render children()}
+
+  {#snippet failed(error, reset)}
+    {#if fallback}
+      {@render fallback({ error: error instanceof Error ? error : new Error(String(error)), reset })}
+    {:else}
+      <div class="flex h-screen items-center justify-center bg-background">
+        <div class="max-w-md w-full px-4">
+          <Alert.Root variant="destructive" class="space-y-4">
+            <div class="flex items-start gap-3">
+              <AlertTriangle class="h-5 w-5 mt-0.5 shrink-0" />
+              <div class="space-y-2">
+                <Alert.Title>{t('common.error')}</Alert.Title>
+                <Alert.Description class="text-sm">
+                  {error instanceof Error ? error.message : String(error)}
+                </Alert.Description>
+              </div>
+            </div>
+            <Button variant="outline" size="sm" onclick={reset} class="w-full">
+              {t('common.retry')}
+            </Button>
+          </Alert.Root>
+        </div>
+      </div>
+    {/if}
+  {/snippet}
+</svelte:boundary>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    /** Optional custom error UI snippet */
+    fallback?: Snippet<[{
+        error: Error;
+        reset: () => void;
+    }]>;
+};
+declare const ErrorBoundary: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorBoundary = ReturnType<typeof ErrorBoundary>;
+export default ErrorBoundary;

package/dist/components/ErrorComponent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { AlertTriangle, RefreshCw } from '@lucide/svelte';
+  import { t } from '@svadmin/core';
+  import { Button } from './ui/button';
+  import * as Alert from './ui/alert/index.js';
+
+  let {
+    error,
+    title = t('error.title'),
+    description = t('error.description'),
+    retry,
+  } = $props<{
+    error?: Error | null;
+    title?: string;
+    description?: string;
+    retry?: () => void;
+  }>();
+</script>
+
+<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px]">
+  <Alert.Root variant="destructive" class="max-w-md text-left">
+    <AlertTriangle class="h-5 w-5" />
+    <Alert.Title>{title}</Alert.Title>
+    <Alert.Description>
+      {error?.message || description}
+    </Alert.Description>
+    {#if retry}
+      <div class="mt-4">
+        <Button variant="outline" size="sm" onclick={retry}>
+          <RefreshCw class="h-3 w-3" data-icon="inline-start" />
+          {t('buttons.retry')}
+        </Button>
+      </div>
+    {/if}
+  </Alert.Root>
+</div>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    error?: Error | null;
+    title?: string;
+    description?: string;
+    retry?: () => void;
+};
+declare const ErrorComponent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorComponent = ReturnType<typeof ErrorComponent>;
+export default ErrorComponent;