@svadmin/ui 0.29.0 → 0.29.2

package/src/components/DevTools.svelte

@@ -1,149 +0,0 @@
-<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/src/components/DraggableGrid.svelte

@@ -1,86 +0,0 @@
-<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/src/components/DraggableHeader.svelte

@@ -1,112 +0,0 @@
-<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/src/components/DrawerForm.svelte

@@ -1,35 +0,0 @@
-<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/src/components/EditPage.svelte

@@ -1,52 +0,0 @@
-<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/src/components/EmptyState.svelte

@@ -1,31 +0,0 @@
-<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/src/components/ErrorBoundary.svelte

@@ -1,49 +0,0 @@
-<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/src/components/ErrorComponent.svelte

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