@svadmin/ui 0.14.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.14.0",
+  "version": "0.17.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/app.css

@@ -154,7 +154,16 @@ button:active:not(:disabled) {
   border-color: var(--color-primary);
 }
 
-/* Scrollbar styling */
+/* Base scrollbar styling (Firefox + Standard) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.8 0 0) transparent;
+}
+.dark * {
+  scrollbar-color: oklch(0.35 0 0) transparent;
+}
+
+/* Scrollbar styling (Webkit) */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: oklch(0.8 0 0); border-radius: 3px; }
@@ -166,9 +175,11 @@ button:active:not(:disabled) {
 [data-slot="card"] {
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
-[data-slot="card"]:hover {
-  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
-  transform: translateY(-1px);
+@media (hover: hover) {
+  [data-slot="card"]:hover {
+    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
+    transform: translateY(-1px);
+  }
 }
 
 /* ② Table Row Hover — primary color tint instead of plain gray */
@@ -302,6 +313,13 @@ button:active:not(:disabled) {
   }
 }
 
+/* ⑫b Safe Area Inset — iPhone notch / Home Bar support */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  main {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
 /* ⑫ Optimistic Delete — row fade-out visual feedback */
 @keyframes svadmin-row-delete {
   from {
@@ -372,6 +390,25 @@ main {
   margin-right: 4rem;
 }
 
+/* ⑰ Accessibility Minimum Touch Target — Apple HIG 44px minimum */
+@media (max-width: 640px) and (pointer: coarse) {
+  [data-slot="button"] {
+    position: relative;
+  }
+  [data-slot="button"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+
 /* Tailwind CSS v4 — Map design tokens to utility classes */
 @theme {
   --color-background: var(--background);

package/src/components/AutoForm.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { useOne, useCreate, useUpdate, getResource } from '@svadmin/core';
+  import { useForm, getResource, deriveValidator } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { canAccess } from '@svadmin/core/permissions';
   import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Card from './ui/card/index.js';
@@ -13,30 +12,20 @@
   import * as Alert from './ui/alert/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import ConfirmDialog from './ConfirmDialog.svelte';
-
   import type { Snippet } from 'svelte';
 
   interface Props {
     resourceName: string;
     id?: string | number;
     mode?: 'create' | 'edit';
-    /** Custom field renderer — overrides default FieldRenderer */
     fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
-    /** Custom form action buttons */
     formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
-    /** Custom header content (after title) */
     headerContent?: Snippet;
   }
 
-  let {
-    resourceName,
-    id = undefined,
-    mode = 'create',
-    fieldRenderer,
-    formActions,
-    headerContent,
-  }: Props = $props();
+  let { resourceName, id, mode = 'create', fieldRenderer, formActions, headerContent }: Props = $props();
 
+  // ─── Resource metadata ────────────────────────────────────────────
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
 
@@ -61,19 +50,7 @@
     return order.map(g => ({ name: g, fields: map.get(g)! }));
   })());
 
-  // Load existing data for edit mode
-  const existingQuery = $derived.by(() => mode === 'edit' && id != null
-    ? useOne({ get resource() { return resourceName; }, get id() { return id; } })
-    : null);
-
-  // Form state
-  let formData = $state<Record<string, unknown>>({});
-  let fieldErrors = $state<Record<string, string>>({});
-  let submitting = $state(false);
-  let error = $state<string | null>(null);
-  let initialized = $state(false);
-  let isDirty = $state(false);
-
+  // ─── Default values from field metadata ───────────────────────────
   function getDefaultForType(field: FieldDefinition): unknown {
     switch (field.type) {
       case 'text': case 'textarea': case 'richtext': case 'image': return '';
@@ -86,115 +63,47 @@
     }
   }
 
-  // Initialize form data (pre-DOM to avoid flash of empty values)
-  $effect.pre(() => {
-    if (initialized) return;
-    if (mode === 'create') {
-      const defaults: Record<string, unknown> = {};
-      for (const field of formFields) {
-        defaults[field.key] = field.defaultValue ?? getDefaultForType(field);
-      }
-      formData = defaults;
-      initialized = true;
-    } else if (existingQuery && existingQuery.query.data?.data) {
-      formData = { ...existingQuery.query.data.data as Record<string, unknown> };
-      initialized = true;
-    }
-  });
-
-  // Unsaved changes warning
-  $effect(() => {
-    if (!isDirty) return;
-
-    function handleBeforeUnload(e: BeforeUnloadEvent) {
-      e.preventDefault();
-    }
+  const defaults = $derived((() => {
+    const d: Record<string, unknown> = {};
+    for (const f of formFields) d[f.key] = f.defaultValue ?? getDefaultForType(f);
+    return d;
+  })());
 
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-    };
+  // ─── useForm: single source of truth for values, errors, tainted ──
+  const form = useForm({
+    get resource() { return resourceName; },
+    get action() { return mode; },
+    get id() { return id; },
+    defaultValues: defaults,
+    redirect: 'list',
+    warnWhenUnsavedChanges: true,
+    validate: deriveValidator(formFields),
   });
 
-  const createMut = useCreate({ get resource() { return resourceName; } });
-  const updateMut = useUpdate({ get resource() { return resourceName; } });
-
-  function validateFields(): boolean {
-    const errors: Record<string, string> = {};
-    for (const field of formFields) {
-      const value = formData[field.key];
-      // Required check
-      if (field.required) {
-        if (value === undefined || value === null || value === '') {
-          errors[field.key] = t('validation.required');
-          continue;
-        }
-      }
-      // Custom per-field validator
-      if (field.validate) {
-        const msg = field.validate(value);
-        if (msg) { errors[field.key] = msg; }
-      }
-    }
-    fieldErrors = errors;
-    return Object.keys(errors).length === 0;
-  }
+  // ─── Submission error (non-field, e.g. network error) ─────────────
+  let submitError = $state<string | null>(null);
 
   async function handleSubmit() {
-    submitting = true;
-    error = null;
-
-    if (!validateFields()) {
-      submitting = false;
-      return;
-    }
-
+    submitError = null;
     try {
-      const cleanData: Record<string, unknown> = {};
-      for (const field of formFields) {
-        const value = formData[field.key];
-        if (value !== undefined) {
-          cleanData[field.key] = value;
-        }
-      }
-
-      if (mode === 'create') {
-        await createMut.mutation.mutateAsync({ variables: cleanData });
-      } else if (id != null) {
-        await updateMut.mutation.mutateAsync({ id, variables: cleanData });
-      }
-
-      isDirty = false;
-      navigate(`/${resourceName}`);
+      await form.submit();
     } catch (e) {
-      error = e instanceof Error ? e.message : t('common.operationFailed');
-    } finally {
-      submitting = false;
-    }
-  }
-
-  function handleFieldChange(key: string, val: unknown) {
-    formData[key] = val;
-    isDirty = true;
-    // Clear field error when user starts typing
-    if (fieldErrors[key]) {
-      delete fieldErrors[key];
+      submitError = e instanceof Error ? e.message : t('common.operationFailed');
     }
   }
 
-  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery.query.isLoading : false);
-
   const pageTitle = $derived(
     mode === 'create'
       ? `${t('common.create')}${resource.label}`
       : `${t('common.edit')}${resource.label}`
   );
-  // Unsaved changes dialog state
+
+  // ─── Unsaved changes guard ────────────────────────────────────────
   let confirmOpen = $state(false);
   let pendingNavigation: (() => void) | null = null;
 
   function guardNavigate(fn: () => void) {
-    if (isDirty) {
+    if (form.isTainted()) {
       pendingNavigation = fn;
       confirmOpen = true;
     } else {
@@ -223,12 +132,12 @@
       <ArrowLeft class="h-5 w-5" />
     </TooltipButton>
     <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
-    {#if isDirty}
+    {#if form.isTainted()}
       <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
     {/if}
   </div>
 
-  {#if isLoading}
+  {#if form.loading}
     <div class="max-w-3xl space-y-6">
       <div class="rounded-lg border p-6 space-y-5">
         {#each Array(4) as _}
@@ -241,10 +150,10 @@
     </div>
   {:else}
     <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
-      {#if error}
+      {#if submitError}
         <Alert.Root variant="destructive">
           <AlertCircle class="h-4 w-4" />
-          <Alert.Description>{error}</Alert.Description>
+          <Alert.Description>{submitError}</Alert.Description>
         </Alert.Root>
       {/if}
 
@@ -256,20 +165,20 @@
                 <Card.Title class="text-lg">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class="space-y-5">
+            <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
               {#each group.fields as field (field.key)}
-                <div class:border-destructive={!!fieldErrors[field.key]}>
+                <div class:border-destructive={!!form.errors[field.key]}>
                   {#if fieldRenderer}
-                    {@render fieldRenderer({ field, value: formData[field.key], onchange: (val: unknown) => handleFieldChange(field.key, val) })}
+                    {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                   {:else}
                     <FieldRenderer
                       {field}
-                      value={formData[field.key]}
-                      onchange={(val: unknown) => handleFieldChange(field.key, val)}
+                      value={form.values[field.key]}
+                      onchange={(val: unknown) => form.setFieldValue(field.key, val)}
                     />
                   {/if}
-                  {#if fieldErrors[field.key]}
-                    <p class="text-destructive text-[0.8125rem] mt-1">{fieldErrors[field.key]}</p>
+                  {#if form.errors[field.key]}
+                    <p class="text-destructive text-[0.8125rem] mt-1">{form.errors[field.key]}</p>
                   {/if}
                 </div>
               {/each}
@@ -278,20 +187,20 @@
         {/each}
       {:else}
         <Card.Root>
-          <Card.Content class="space-y-5">
+          <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
             {#each formFields as field (field.key)}
-              <div class:border-destructive={!!fieldErrors[field.key]}>
+              <div class:border-destructive={!!form.errors[field.key]}>
                 {#if fieldRenderer}
-                  {@render fieldRenderer({ field, value: formData[field.key], onchange: (val: unknown) => handleFieldChange(field.key, val) })}
+                  {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                 {:else}
                   <FieldRenderer
                     {field}
-                    value={formData[field.key]}
-                    onchange={(val: unknown) => handleFieldChange(field.key, val)}
+                    value={form.values[field.key]}
+                    onchange={(val: unknown) => form.setFieldValue(field.key, val)}
                   />
                 {/if}
-                {#if fieldErrors[field.key]}
-                  <p class="text-destructive text-[0.8125rem] mt-1">{fieldErrors[field.key]}</p>
+                {#if form.errors[field.key]}
+                  <p class="text-destructive text-[0.8125rem] mt-1">{form.errors[field.key]}</p>
                 {/if}
               </div>
             {/each}
@@ -301,10 +210,10 @@
 
       <div class="flex items-center gap-3">
         {#if formActions}
-          {@render formActions({ isLoading: submitting, onSubmit: handleSubmit })}
+          {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else}
-          <Button type="submit" disabled={submitting}>
-            {#if submitting}
+          <Button type="submit" disabled={form.submitting}>
+            {#if form.submitting}
               <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
             {:else}
               <Save class="h-4 w-4" data-icon="inline-start" />

package/src/components/AutoTable.svelte

@@ -335,9 +335,9 @@
 
 <div class="space-y-4">
   <!-- Header -->
-  <div class="flex items-center justify-between">
-    <h1 class="text-xl font-semibold text-foreground">{resource.label}</h1>
-    <div class="flex items-center gap-2">
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <h1 class="text-lg sm:text-xl font-semibold text-foreground">{resource.label}</h1>
+    <div class="flex flex-wrap items-center gap-2">
       {#if canExport}
         <Button variant="outline" size="sm" onclick={exportCSV}>
           <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
@@ -575,6 +575,8 @@
                                 value={cell.getValue()}
                                 onSave={() => listResult.query.refetch()}
                               />
+                            {:else if field?.key === primaryKey}
+                              <span class="font-mono text-xs">{cell.getValue() ?? '—'}</span>
                             {:else}
                               {cell.getValue() ?? '—'}
                             {/if}
@@ -723,11 +725,11 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <div class="flex items-center justify-between text-sm text-muted-foreground">
+  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
     <div class="flex items-center gap-2">
       <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
       <Select
-        class="h-8 w-auto text-xs"
+        class="hidden sm:inline-block h-8 w-auto text-xs"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e: Event) => {
           const size = Number((e.target as HTMLSelectElement).value);

package/src/components/ChatDialog.svelte

@@ -260,7 +260,7 @@
         tooltip={t('chat.title') || 'AI Assistant'}
         variant="default"
         size="icon"
-        class="fixed bottom-6 right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
+        class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
         onclick={() => { open = true; minimized = false; }}
       >
         <MessageCircle class="h-5 w-5" />
@@ -276,9 +276,11 @@
   <!-- Chat Panel -->
   {#if open}
     <div
-      class="fixed bottom-6 right-6 z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden"
-      class:w-[400px]={!minimized}
-      class:h-[560px]={!minimized}
+      class="fixed z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden bottom-3 right-3 sm:bottom-6 sm:right-6"
+      class:w-[calc(100vw-1.5rem)]={!minimized}
+      class:sm:w-[400px]={!minimized}
+      class:h-[calc(100dvh-6rem)]={!minimized}
+      class:sm:h-[560px]={!minimized}
       class:w-[280px]={minimized}
       class:h-auto={minimized}
       transition:fly={{ y: 300, duration: 250 }}

package/src/components/CommandPalette.svelte

@@ -35,7 +35,7 @@
           placeholder={t('common.search')}
           class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
         />
-        <kbd class="ml-2 text-[10px] font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border">ESC</kbd>
+        <kbd class="ml-2 text-[10px] font-mono font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border">ESC</kbd>
       </div>
       <Command.List class="max-h-[320px] overflow-y-auto overflow-x-hidden p-1">
         <Command.Empty class="py-6 text-center text-sm text-muted-foreground">

package/src/components/Header.svelte

@@ -58,7 +58,7 @@
       <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
         <Search class="h-3.5 w-3.5" />
         <span class="hidden sm:inline text-xs">Search...</span>
-        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
           <span class="text-xs">⌘</span>K
         </kbd>
       </Button>

package/src/components/KeyboardShortcuts.svelte

@@ -48,7 +48,7 @@
                 <span class="text-sm text-foreground">{shortcut.label}</span>
                 <div class="flex items-center gap-1">
                   {#each shortcut.keys as key}
-                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1.5 text-[10px] font-medium text-muted-foreground">{key}</kbd>
+                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1.5 text-[10px] font-medium font-mono text-muted-foreground">{key}</kbd>
                   {/each}
                 </div>
               </div>

package/src/components/Layout.svelte

@@ -62,12 +62,42 @@
   }
 
   let collapsed = $state(false);
+
+  // Swipe gesture for mobile menu
+  let touchStartX = $state(0);
+  let touchEndX = $state(0);
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchStartX = e.touches[0].clientX;
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchEnd() {
+    // Only trigger swipe-to-open if starting near the left edge (e.g., within 30px)
+    // and swiping right by at least 50px
+    if (touchStartX < 30 && touchEndX - touchStartX > 50) {
+      mobileMenuOpen = true;
+    }
+  }
 </script>
 
-<svelte:window onkeydown={(e) => {
-  if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
-  if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
-}} />
+<svelte:window 
+  onkeydown={(e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
+    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
+  }}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+/>
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">

package/src/components/MarkdownRenderer.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   // @ts-expect-error - missing types
-  import { Marked } from 'marked';
+  import { Marked } from "marked";
   // @ts-expect-error - missing types
-  import { markedHighlight } from 'marked-highlight';
+  import { markedHighlight } from "marked-highlight";
   // @ts-expect-error - missing types
-  import hljs from 'highlight.js';
-  import 'highlight.js/styles/github-dark.css'; // or your preferred theme
+  import * as hljsModule from "highlight.js";
+  const hljs = "default" in hljsModule ? hljsModule.default : hljsModule;
+  import "highlight.js/styles/github-dark.css"; // or your preferred theme
   // @ts-expect-error - missing types
-  import DOMPurify from 'isomorphic-dompurify';
-  import { Check, Copy } from 'lucide-svelte';
-  import { Button } from './ui/button/index.js';
+  import DOMPurify from "isomorphic-dompurify";
+  import { Check, Copy } from "lucide-svelte";
+  import { Button } from "./ui/button/index.js";
 
   interface Props {
     /** The raw markdown string to render */
@@ -20,39 +21,41 @@
     class?: string;
   }
 
-  let { content, streaming = false, class: className = '' }: Props = $props();
+  let { content, streaming = false, class: className = "" }: Props = $props();
 
   // Configure marked with syntax highlighting
   const marked = new Marked(
     markedHighlight({
-      langPrefix: 'hljs language-',
+      langPrefix: "hljs language-",
       highlight(code: string, lang: string) {
-        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        const language = hljs.getLanguage(lang) ? lang : "plaintext";
         return hljs.highlight(code, { language }).value;
-      }
-    })
+      },
+    }),
   );
 
   // Render HTML safely
-  const html = $derived(DOMPurify.sanitize(marked.parse(content || '') as string));
+  const html = $derived(
+    DOMPurify.sanitize(marked.parse(content || "") as string),
+  );
 
   // Handle copy code blocks
   let copiedBlock = $state<string | null>(null);
 
   function handleCopy(event: MouseEvent) {
     const target = event.target as HTMLElement;
-    const button = target.closest('.copy-btn');
+    const button = target.closest(".copy-btn");
     if (!button) return;
 
-    const pre = button.closest('.code-block-wrapper')?.querySelector('pre');
+    const pre = button.closest(".code-block-wrapper")?.querySelector("pre");
     if (!pre) return;
 
-    const code = pre.textContent || '';
+    const code = pre.textContent || "";
     navigator.clipboard.writeText(code);
 
     const id = Math.random().toString(36);
     copiedBlock = id;
-    button.setAttribute('data-copied-id', id);
+    button.setAttribute("data-copied-id", id);
 
     setTimeout(() => {
       if (copiedBlock === id) copiedBlock = null;
@@ -65,48 +68,51 @@
     return {
       update(newHtml: string) {
         // Find all pre > code blocks that don't have wrappers yet
-        const pres = node.querySelectorAll('pre:not(.enhanced)');
-        pres.forEach(pre => {
-          pre.classList.add('enhanced');
-          const wrapper = document.createElement('div');
-          wrapper.className = 'code-block-wrapper group relative my-4 rounded-md bg-foreground/95';
-          
-          const header = document.createElement('div');
-          header.className = 'flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800';
-          
-          const lang = Array.from(pre.querySelector('code')?.classList || []).find(c => c.startsWith('language-'))?.replace('language-', '') || 'Code';
+        const pres = node.querySelectorAll("pre:not(.enhanced)");
+        pres.forEach((pre) => {
+          pre.classList.add("enhanced");
+          const wrapper = document.createElement("div");
+          wrapper.className =
+            "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
+
+          const header = document.createElement("div");
+          header.className =
+            "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
+
+          const lang =
+            Array.from(pre.querySelector("code")?.classList || [])
+              .find((c) => c.startsWith("language-"))
+              ?.replace("language-", "") || "Code";
           header.innerHTML = `
             <span>${lang}</span>
             <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
             </button>
           `;
-          
+
           pre.replaceWith(wrapper);
           wrapper.appendChild(header);
-          
-          const scrollContainer = document.createElement('div');
-          scrollContainer.className = 'overflow-x-auto p-4';
+
+          const scrollContainer = document.createElement("div");
+          scrollContainer.className = "overflow-x-auto p-4";
           scrollContainer.appendChild(pre);
           wrapper.appendChild(scrollContainer);
         });
 
         // Add event listener for copy buttons
-        node.addEventListener('click', handleCopy);
+        node.addEventListener("click", handleCopy);
       },
       destroy() {
-        node.removeEventListener('click', handleCopy);
-      }
+        node.removeEventListener("click", handleCopy);
+      },
     };
   }
 </script>
 
 <div 
-  class="prose prose-sm dark:prose-invert max-w-none break-words {className}"
+  class="prose prose-sm dark:prose-invert max-w-none wrap-break-word {className}"
   class:streaming={streaming}
   use:enhanceCodeBlocks={html}
 >
   {@html html}
 </div>
-
-

package/src/components/ShowPage.svelte

@@ -39,9 +39,9 @@
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields.slice(0, 6) as _}
-          <div class="flex px-6 py-4">
-            <Skeleton class="h-4 w-1/4" />
-            <Skeleton class="h-4 w-2/5 ml-auto" />
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+            <Skeleton class="h-4 w-1/2 sm:w-1/4" />
+            <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
         {/each}
       </Card.Content>
@@ -52,9 +52,9 @@
         {#each showFields as field}
           {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex px-6 py-4">
-            <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
-            <div class="w-2/3 text-sm text-foreground">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
+            <div class="sm:w-2/3 text-sm text-foreground">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}

package/src/components/StatsCard.svelte

@@ -57,7 +57,7 @@
       <Skeleton class="mt-1 h-7 w-20" />
     {:else}
       <div class="flex items-baseline gap-2">
-        <p class="text-xl font-semibold text-foreground">{value}</p>
+        <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'}"

package/src/components/StepsForm.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-  import { useStepsForm } from '@svadmin/core';
+  import { useStepsForm, deriveValidator } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
-  import { getResource, useOne } 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 { Skeleton } from './ui/skeleton/index.js';
   import { Save, ArrowLeft, ArrowRight, Check, Loader2 } from 'lucide-svelte';
   import FieldRenderer from './FieldRenderer.svelte';
 
@@ -30,37 +29,12 @@
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
 
-  const stepsForm = useStepsForm({
-    get resource() { return resourceName; },
-    get action() { return mode; },
-    get id() { return id; },
-  });
-
-  const { currentStep, next, prev, gotoStep } = stepsForm;
-
-  const totalSteps = $derived(steps.length);
-  const progressValue = $derived(((currentStep + 1) / totalSteps) * 100);
-  const isLastStep = $derived(currentStep >= totalSteps - 1);
-
-  // Get fields for current step
-  const currentFields = $derived(
-    steps[currentStep]?.fields
-      .map(key => resource.fields.find(f => f.key === key))
-      .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
-  );
-
+  // 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));
 
-  const existingQuery = $derived(mode === 'edit' && id != null 
-    ? stepsForm.query as { data?: { data: Record<string, unknown> }, isLoading: boolean } 
-    : null);
-
-  let formData = $state<Record<string, unknown>>({});
-  let fieldErrors = $state<Record<string, string>>({});
-  let initialized = $state(false);
-
+  // Default values from field metadata
   function getDefaultForType(field: FieldDefinition): unknown {
     switch (field.type) {
       case 'text': case 'textarea': case 'richtext': case 'image': return '';
@@ -73,64 +47,65 @@
     }
   }
 
-  $effect.pre(() => {
-    if (initialized) return;
-    if (mode === 'create') {
-      const defaults: Record<string, unknown> = {};
-      for (const field of flatStepsFields) {
-        defaults[field.key] = field.defaultValue ?? getDefaultForType(field);
-      }
-      formData = defaults;
-      initialized = true;
-    } else if (existingQuery && existingQuery.data?.data) {
-      formData = { ...existingQuery.data.data };
-      initialized = true;
-    }
+  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),
   });
 
-  function handleFieldChange(key: string, val: unknown) {
-    formData[key] = val;
-    if (fieldErrors[key]) delete fieldErrors[key];
-  }
+  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 {
-    const errors: Record<string, string> = {};
     let valid = true;
+    form.clearErrors();
     for (const field of currentFields) {
-      const value = formData[field.key];
+      const value = form.values[field.key];
       if (field.required && (value === undefined || value === null || value === '')) {
-        errors[field.key] = t('validation.required');
+        form.setFieldError(field.key, t('validation.required'));
         valid = false;
       } else if (field.validate) {
         const msg = field.validate(value);
         if (msg) {
-          errors[field.key] = msg;
+          form.setFieldError(field.key, msg);
           valid = false;
         }
       }
     }
-    fieldErrors = errors;
     return valid;
   }
 
-  function handleSubmit() {
+  async function handleSubmit() {
     if (!validateCurrentStep()) return;
-    
+
     if (!isLastStep) {
-      next();
+      form.next();
       return;
     }
-    
-    const cleanData: Record<string, unknown> = {};
-    for (const field of flatStepsFields) {
-      const value = formData[field.key];
-      if (value !== undefined) cleanData[field.key] = value;
-    }
-    
-    stepsForm.onFinish(cleanData, { redirect: 'list' });
-  }
 
-  const isLoadingData = $derived(mode === 'edit' && !initialized);
+    // Last step — submit the full form
+    await form.submit({ redirect: 'list' });
+  }
 </script>
 
 <div class="space-y-6">
@@ -141,17 +116,17 @@
         <Button
           variant="ghost"
           type="button"
-          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
-          onclick={() => gotoStep(i)}
+          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 <= currentStep}
-            class:text-primary-foreground={i <= currentStep}
-            class:bg-muted={i > currentStep}
-            class:text-muted-foreground={i > currentStep}
+            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 < currentStep}
+            {#if i < form.currentStep}
               <Check class="h-3.5 w-3.5" />
             {:else}
               {i + 1}
@@ -160,7 +135,7 @@
           <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 < currentStep}></div>
+          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < form.currentStep}></div>
         {/if}
       {/each}
     </div>
@@ -170,22 +145,22 @@
   <!-- Step content -->
   <Card.Root>
     <Card.CardHeader>
-      <Card.CardTitle>{steps[currentStep]?.title ?? ''}</Card.CardTitle>
+      <Card.CardTitle>{steps[form.currentStep]?.title ?? ''}</Card.CardTitle>
       <Badge variant="outline" class="w-fit">
-        {t('common.step')} {currentStep + 1} / {totalSteps}
+        {t('common.step')} {form.currentStep + 1} / {totalSteps}
       </Badge>
     </Card.CardHeader>
     <Card.CardContent>
-      {#key currentStep}
+      {#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={formData[field.key]}
-            onchange={(v) => handleFieldChange(field.key, v)}
+            value={form.values[field.key]}
+            onchange={(v) => form.setFieldValue(field.key, v)}
           />
-          {#if fieldErrors[field.key]}
-            <p class="text-destructive text-[0.8125rem] mt-1">{fieldErrors[field.key]}</p>
+          {#if form.errors[field.key]}
+            <p class="text-destructive text-[0.8125rem] mt-1">{form.errors[field.key]}</p>
           {/if}
         {/each}
 
@@ -193,14 +168,14 @@
           <Button
             type="button"
             variant="outline"
-            onclick={() => currentStep === 0 ? navigate(`/${resourceName}`) : prev()}
+            onclick={() => form.currentStep === 0 ? navigate(`/${resourceName}`) : form.prev()}
           >
             <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
-            {currentStep === 0 ? t('common.cancel') : t('common.back')}
+            {form.currentStep === 0 ? t('common.cancel') : t('common.back')}
           </Button>
 
-          <Button type="submit" disabled={stepsForm.formLoading}>
-            {#if stepsForm.formLoading}
+          <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" />

package/src/components/TooltipButton.svelte

@@ -4,16 +4,13 @@
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children'> {
     tooltip: string;
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
     size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
     side?: 'top' | 'right' | 'bottom' | 'left';
     class?: string;
     onclick?: (e: MouseEvent) => void;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    tabindex?: number;
     children: Snippet;
   }
 
@@ -28,6 +25,7 @@
     type = 'button',
     tabindex,
     children,
+    ...restProps
   }: Props = $props();
 </script>
 
@@ -36,10 +34,12 @@
     {#snippet child({ props })}
       <Button
         {...props}
+        {...restProps}
         {variant}
         {size}
         {type}
         class={className}
+        aria-label={restProps['aria-label'] ?? tooltip}
         {onclick}
         {disabled}
         {tabindex}

package/src/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -8,7 +8,7 @@
 
 <ol
   data-slot="breadcrumb-list"
-  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
+  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5", className)}
   {...restProps}
 >
   {@render children?.()}