@svadmin/ui 0.15.0 → 0.17.0

package/package.json

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

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}
 
@@ -258,18 +167,18 @@
             {/if}
             <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}
@@ -280,18 +189,18 @@
         <Card.Root>
           <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

@@ -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}

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/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" />