@svadmin/ui 0.3.0 → 0.5.0

package/src/components/DevTools.svelte

@@ -1,280 +1,149 @@
 <script lang="ts">
+  import { fly, scale } from 'svelte/transition';
   import { getResources } from '@svadmin/core';
   import { getTheme, getColorTheme } from '@svadmin/core';
-  import { getLocale } from '@svadmin/core/i18n';
+  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);
-  let activeTab = $state<'state' | 'inferencer'>('state');
 
   function toggle() {
     visible = !visible;
   }
 
-  // Keyboard shortcut: Ctrl+Shift+D
-  if (typeof window !== 'undefined') {
-    window.addEventListener('keydown', (e) => {
-      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
-        e.preventDefault();
-        toggle();
-      }
-    });
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+      e.preventDefault();
+      toggle();
+    }
   }
 
-  const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
+  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.env?.DEV) {
+    $inspect({ path, theme, colorTheme, locale, resourceCount: resources.length });
+  }
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 {#if import.meta.env.DEV}
   {#if visible}
-    <div class="devtools-panel" class:collapsed>
-      <div class="devtools-header">
-        <div class="devtools-title">
+    <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="devtools-header-actions">
-          <button onclick={() => collapsed = !collapsed} class="devtools-btn">
+        <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}
-          </button>
-          <button onclick={toggle} class="devtools-btn">
+          </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" />
-          </button>
+          </TooltipButton>
         </div>
       </div>
 
       {#if !collapsed}
-        <div class="devtools-tabs">
-          <button class="devtools-tab" class:active={activeTab === 'state'} onclick={() => activeTab = 'state'}>
-            State
-          </button>
-          <button class="devtools-tab" class:active={activeTab === 'inferencer'} onclick={() => activeTab = 'inferencer'}>
-            <Wand2 class="h-3 w-3" /> Inferencer
-          </button>
-        </div>
+        <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>
 
-        <div class="devtools-body">
-          {#if activeTab === 'state'}
-            <div class="devtools-section">
-              <h4>Router</h4>
-              <div class="devtools-row">
-                <span class="devtools-label">Path</span>
-                <code class="devtools-value">{path}</code>
-              </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>
 
-            <div class="devtools-section">
-              <h4>Theme</h4>
-              <div class="devtools-row">
-                <span class="devtools-label">Mode</span>
-                <code class="devtools-value">{theme}</code>
-              </div>
-              <div class="devtools-row">
-                <span class="devtools-label">Color</span>
-                <code class="devtools-value">{colorTheme}</code>
-              </div>
-            </div>
+                <Separator />
 
-            <div class="devtools-section">
-              <h4>i18n</h4>
-              <div class="devtools-row">
-                <span class="devtools-label">Locale</span>
-                <code class="devtools-value">{locale}</code>
-              </div>
-            </div>
+                <!-- 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>
 
-            <div class="devtools-section">
-              <h4>Resources ({resources.length})</h4>
-              {#each resources as r}
-                <div class="devtools-row">
-                  <span class="devtools-label">{r.name}</span>
-                  <code class="devtools-value">{r.fields.length} fields</code>
+                <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>
-              {/each}
-            </div>
-          {:else}
+              </div>
+            </ScrollArea>
+          </Tabs.Content>
+          <Tabs.Content value="inferencer" class="p-0">
             <InferencerPanel />
-          {/if}
-        </div>
+          </Tabs.Content>
+        </Tabs.Root>
       {/if}
     </div>
   {:else}
-    <button class="devtools-fab" onclick={toggle} title="DevTools (Ctrl+Shift+D)">
+    <Button
+      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}
+      title={t('devtools.title')}
+    >
       <Bug class="h-4 w-4" />
-    </button>
+    </Button>
   {/if}
 {/if}
-
-<style>
-  .devtools-panel {
-    position: fixed;
-    bottom: 0;
-    right: 1rem;
-    z-index: 9999;
-    width: 420px;
-    max-width: 95vw;
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-bottom: none;
-    border-radius: 0.75rem 0.75rem 0 0;
-    box-shadow: 0 -4px 24px hsl(0 0% 0% / 0.12);
-    font-size: 0.8125rem;
-    overflow: hidden;
-  }
-
-  .devtools-panel.collapsed {
-    width: auto;
-    min-width: 200px;
-  }
-
-  .devtools-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 0.75rem;
-    background: hsl(var(--muted));
-    border-bottom: 1px solid hsl(var(--border));
-  }
-
-  .devtools-title {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-weight: 600;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: hsl(var(--foreground));
-  }
-
-  .devtools-header-actions {
-    display: flex;
-    gap: 0.25rem;
-  }
-
-  .devtools-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    color: hsl(var(--muted-foreground));
-    border-radius: 0.25rem;
-  }
-  .devtools-btn:hover {
-    background: hsl(var(--accent));
-    color: hsl(var(--foreground));
-  }
-
-  .devtools-body {
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 0.5rem;
-  }
-
-  .devtools-section {
-    padding: 0.375rem 0;
-  }
-
-  .devtools-section h4 {
-    font-size: 0.6875rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: hsl(var(--muted-foreground));
-    margin: 0 0 0.25rem;
-    padding: 0 0.25rem;
-  }
-
-  .devtools-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.1875rem 0.25rem;
-    border-radius: 0.25rem;
-  }
-  .devtools-row:hover {
-    background: hsl(var(--muted) / 0.5);
-  }
-
-  .devtools-label {
-    color: hsl(var(--foreground));
-    font-size: 0.75rem;
-  }
-
-  .devtools-value {
-    font-size: 0.6875rem;
-    color: hsl(var(--primary));
-    background: hsl(var(--primary) / 0.1);
-    padding: 0.125rem 0.375rem;
-    border-radius: 0.25rem;
-    font-family: monospace;
-  }
-
-  .devtools-fab {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    z-index: 9999;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 8px hsl(var(--primary) / 0.3);
-    transition: all 0.2s;
-    opacity: 0.6;
-  }
-  .devtools-fab:hover {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-  .devtools-tabs {
-    display: flex;
-    border-bottom: 1px solid hsl(var(--border));
-  }
-
-  .devtools-tab {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    padding: 0.375rem 0.5rem;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: hsl(var(--muted-foreground));
-    border-bottom: 2px solid transparent;
-    transition: all 0.15s;
-  }
-
-  .devtools-tab:hover {
-    color: hsl(var(--foreground));
-    background: hsl(var(--muted) / 0.3);
-  }
-
-  .devtools-tab.active {
-    color: hsl(var(--primary));
-    border-bottom-color: hsl(var(--primary));
-  }
-</style>

package/src/components/DrawerForm.svelte

@@ -1,26 +1,35 @@
 <script lang="ts">
   import { getResource } from '@svadmin/core';
-  import { Sheet } from './ui/sheet/index.js';
+  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' } = $props<{
+  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>
 
-{#if open}
-  <Sheet bind:open {side}>
-    <div class="p-6 space-y-4">
-      <h2 class="text-lg font-semibold text-foreground">
-        {mode === 'create' ? `Create ${resource.label}` : `Edit ${resource.label}`}
-      </h2>
+<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>
-{/if}
+  </Sheet.Content>
+</Sheet.Root>

package/src/components/EditPage.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { getResource } from '@svadmin/core';
+  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 ConfirmDialog from './ConfirmDialog.svelte';
   import { ArrowLeft, Trash2 } from 'lucide-svelte';
   import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
 
   interface Props {
     resourceName: string;
@@ -29,18 +31,29 @@
   const resource = getResource(resourceName);
   const pageTitle = title ?? `${t('common.edit')} ${resource.label} #${id}`;
   const showDelete = canDelete ?? resource.canDelete !== false;
+
+  const deleteResult = useDelete({ resource: resourceName });
+  const deleteMutation = deleteResult.mutation;
+
+  let confirmOpen = $state(false);
+
+  async function handleDelete() {
+    await deleteMutation.mutateAsync({ id, resource: resourceName });
+    confirmOpen = false;
+    navigate(`/${resourceName}`);
+  }
 </script>
 
 <div class="space-y-6 {className}">
   <PageHeader title={pageTitle}>
     {#snippet actions()}
-      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+      <TooltipButton tooltip={t('common.back')} onclick={() => navigate(`/${resourceName}`)}>
         <ArrowLeft class="h-5 w-5" />
-      </Button>
+      </TooltipButton>
       {#if showDelete}
-        <Button variant="destructive" size="sm">
-          <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.delete')}
-        </Button>
+        <TooltipButton tooltip={t('common.delete')} variant="destructive" size="sm" onclick={() => { confirmOpen = true; }}>
+          <Trash2 class="h-4 w-4" />
+        </TooltipButton>
       {/if}
       {#if headerActions}
         {@render headerActions()}
@@ -50,3 +63,9 @@
 
   <AutoForm {resourceName} mode="edit" {id} />
 </div>
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title={t('common.deleteConfirm')}
+  onConfirm={handleDelete}
+/>

package/src/components/EmptyState.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { fade, scale } from 'svelte/transition';
   import { PackageOpen } from 'lucide-svelte';
   import { t } from '@svadmin/core';
 
@@ -13,7 +14,10 @@
   }>();
 </script>
 
-<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card rounded-lg border border-dashed border-border/50 shadow-sm transition-all duration-300">
+<div
+  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card rounded-lg border border-dashed border-border/50 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>

package/src/components/ErrorBoundary.svelte

@@ -2,50 +2,48 @@
   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 }: { children: Snippet } = $props();
+  let {
+    children,
+    fallback,
+  }: {
+    children: Snippet;
+    /** Optional custom error UI snippet */
+    fallback?: Snippet<[{ error: Error; reset: () => void }]>;
+  } = $props();
 
-  let error = $state<Error | null>(null);
-
-  function handleError(e: ErrorEvent) {
-    error = e.error instanceof Error ? e.error : new Error(String(e.error));
-    e.preventDefault();
-  }
-
-  function handleRejection(e: PromiseRejectionEvent) {
-    error = e.reason instanceof Error ? e.reason : new Error(String(e.reason));
-    e.preventDefault();
-  }
-
-  $effect(() => {
-    window.addEventListener('error', handleError);
-    window.addEventListener('unhandledrejection', handleRejection);
-    return () => {
-      window.removeEventListener('error', handleError);
-      window.removeEventListener('unhandledrejection', handleRejection);
-    };
-  });
-
-  function handleRetry() {
-    error = null;
-    window.location.reload();
+  function handleError(error: unknown) {
+    console.error('[svadmin] Uncaught error:', error);
   }
 </script>
 
-{#if error}
-  <div class="flex h-screen items-center justify-center bg-background">
-    <div class="max-w-md text-center space-y-4">
-      <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
-        <AlertTriangle class="h-8 w-8 text-destructive" />
-      </div>
-      <h2 class="text-xl font-bold text-foreground">{t('common.error')}</h2>
-      <p class="text-sm text-muted-foreground">{error.message}</p>
-      <Button onclick={handleRetry}>
-        {t('common.retry')}
-      </Button>
-    </div>
-  </div>
-{:else}
+<svelte:boundary onerror={handleError}>
   {@render children()}
-{/if}
+
+  {#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,7 +1,8 @@
 <script lang="ts">
-  import { AlertTriangle, AlertCircle } from 'lucide-svelte';
+  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,
@@ -16,20 +17,20 @@
   }>();
 </script>
 
-<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-destructive/5 rounded-lg border border-destructive/20 text-destructive transition-all duration-300">
-  <div class="h-16 w-16 rounded-full bg-destructive/10 flex items-center justify-center mb-4">
-    <AlertTriangle class="h-8 w-8 text-destructive" />
-  </div>
-  <h3 class="text-lg font-semibold">{title}</h3>
-  <p class="text-sm opacity-90 mt-2 max-w-md">
-    {error?.message || description}
-  </p>
-  {#if retry}
-    <div class="mt-6">
-      <Button variant="outline" class="border-destructive/30 hover:bg-destructive/10 text-destructive" onclick={retry}>
-        <AlertCircle class="mr-2 h-4 w-4" />
-        {t('buttons.retry')}
-      </Button>
-    </div>
-  {/if}
+<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>