@svadmin/ui 0.15.0 → 0.18.0

package/package.json

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

package/src/components/AboutSettings.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getResources, getDataProviderNames } from '@svadmin/core';
+  import { getLocale } from '@svadmin/core/i18n';
+  import { getResolvedTheme, getColorTheme } from '@svadmin/core';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Info, Database, Globe, Palette, Layers } from 'lucide-svelte';
+
+  const resources = getResources();
+  const providerNames = getDataProviderNames();
+
+  const version = '__SVADMIN_VERSION__'; // replaced at build time or shown as-is
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.about')}</h2>
+  </div>
+
+  <!-- Version -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Info class="h-4 w-4 text-muted-foreground" />
+        svadmin
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-4 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.version')}</span>
+          <Badge variant="secondary" class="font-mono text-xs">{version}</Badge>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Registered Resources -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Layers class="h-4 w-4 text-muted-foreground" />
+        {t('settings.registeredResources')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-2">
+        {#each resources as resource}
+          <Badge variant="outline" class="font-mono text-xs">{resource.name}</Badge>
+        {/each}
+        {#if resources.length === 0}
+          <p class="text-sm text-muted-foreground">—</p>
+        {/if}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Data Providers -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Database class="h-4 w-4 text-muted-foreground" />
+        {t('settings.dataProvider')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-2">
+        {#each providerNames as name}
+          <Badge variant="outline" class="font-mono text-xs">{name}</Badge>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Current Environment -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Globe class="h-4 w-4 text-muted-foreground" />
+        {t('settings.currentEnvironment')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-3 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.language')}</span>
+          <span class="font-mono text-xs">{getLocale()}</span>
+        </div>
+        <div class="h-px bg-border"></div>
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.themeMode')}</span>
+          <span class="font-mono text-xs">{getResolvedTheme()}</span>
+        </div>
+        <div class="h-px bg-border"></div>
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground flex items-center gap-1.5">
+            <Palette class="h-3.5 w-3.5" />
+            {t('settings.colorAccent')}
+          </span>
+          <span class="font-mono text-xs">{getColorTheme()}</span>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/AdminApp.svelte

@@ -6,6 +6,7 @@
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
@@ -21,6 +22,7 @@
   import DevTools from './DevTools.svelte';
   import Sidebar from './Sidebar.svelte';
   import Header from './Header.svelte';
+  import SettingsPage from './SettingsPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -149,7 +151,9 @@
     <Layout {title} {menu}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
-      {#if route === '/'}
+      {#if currentPath().startsWith('/settings')}
+        <SettingsPage />
+      {:else if route === '/' || route === ''}
         {#if dashboard}
           {@render dashboard()}
         {:else}

package/src/components/AppearanceSettings.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getTheme, setTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, getColorPresets } from '@svadmin/core';
+  import { getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
+  import * as Card from './ui/card/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Sun, Moon, Monitor, Check } from 'lucide-svelte';
+
+  // Theme mode
+  const themeOptions = [
+    { value: 'light' as const, icon: Sun, label: 'settings.light' },
+    { value: 'dark' as const, icon: Moon, label: 'settings.dark' },
+    { value: 'system' as const, icon: Monitor, label: 'settings.systemTheme' },
+  ];
+
+  let currentTheme = $derived(getTheme());
+  let currentColor = $derived(getColorTheme());
+  let currentLocale = $derived(getLocale());
+  const availableLocales = getAvailableLocales();
+  const presets = getColorPresets();
+
+  // Sidebar density
+  const DENSITY_KEY = 'svadmin-sidebar-density';
+  let density = $state<'compact' | 'standard'>(
+    (typeof localStorage !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard'
+  );
+
+  function setDensity(d: 'compact' | 'standard') {
+    density = d;
+    if (typeof localStorage !== 'undefined') localStorage.setItem(DENSITY_KEY, d);
+  }
+
+  // Page size
+  const PAGE_SIZE_KEY = 'svadmin-default-page-size';
+  const pageSizeOptions = [10, 20, 50];
+  let pageSize = $state<number>(
+    typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10
+  );
+
+  function setPageSize(size: number) {
+    pageSize = size;
+    if (typeof localStorage !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size));
+  }
+
+  // Locale display names
+  const localeNames: Record<string, string> = {
+    'zh-CN': '中文（简体）',
+    'en': 'English',
+    'ja': '日本語',
+    'ko': '한국어',
+  };
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.appearance')}</h2>
+    <p class="text-sm text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+  </div>
+
+  <!-- Theme Mode -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.themeMode')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid grid-cols-3 gap-3">
+        {#each themeOptions as opt}
+          {@const active = currentTheme === opt.value}
+          <button
+            class="relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all duration-200
+              {active
+                ? 'border-primary bg-primary/5 shadow-sm'
+                : 'border-border hover:border-muted-foreground/30 hover:bg-accent/50'}"
+            onclick={() => setTheme(opt.value)}
+          >
+            {#if active}
+              <div class="absolute top-2 right-2">
+                <Check class="h-3.5 w-3.5 text-primary" />
+              </div>
+            {/if}
+            <div class="h-10 w-10 rounded-lg flex items-center justify-center
+              {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}">
+              <opt.icon class="h-5 w-5" />
+            </div>
+            <span class="text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">
+              {t(opt.label)}
+            </span>
+          </button>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Color Accent -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.colorAccent')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-3">
+        {#each presets as preset}
+          {@const active = currentColor === preset.name}
+          <button
+            class="group relative h-9 w-9 rounded-full transition-all duration-200 hover:scale-110
+              {active ? 'ring-2 ring-offset-2 ring-offset-background scale-110' : 'opacity-70 hover:opacity-100'}"
+            style="background-color: {preset.color}; {active ? `--tw-ring-color: ${preset.color}` : ''}"
+            onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])}
+            title={preset.label}
+          >
+            {#if active}
+              <Check class="h-4 w-4 text-white absolute inset-0 m-auto drop-shadow-sm" />
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Interface -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.interface')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-5">
+      <!-- Language -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.language')}</p>
+          <p class="text-xs text-muted-foreground">{localeNames[currentLocale] ?? currentLocale}</p>
+        </div>
+        <select
+          class="h-9 rounded-md border border-input bg-background px-3 text-sm ring-offset-background
+            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          value={currentLocale}
+          onchange={(e) => setLocale((e.target as HTMLSelectElement).value)}
+        >
+          {#each availableLocales as loc}
+            <option value={loc}>{localeNames[loc] ?? loc}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="h-px bg-border"></div>
+
+      <!-- Sidebar Density -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.sidebarDensity')}</p>
+        </div>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          <button
+            class="px-3 py-1.5 text-xs font-medium transition-colors
+              {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => setDensity('compact')}
+          >{t('settings.compact')}</button>
+          <button
+            class="px-3 py-1.5 text-xs font-medium transition-colors
+              {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => setDensity('standard')}
+          >{t('settings.standard')}</button>
+        </div>
+      </div>
+
+      <div class="h-px bg-border"></div>
+
+      <!-- Default Page Size -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.defaultPageSize')}</p>
+        </div>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          {#each pageSizeOptions as size}
+            <button
+              class="px-3 py-1.5 text-xs font-mono font-medium transition-colors
+                {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+              onclick={() => setPageSize(size)}
+            >{size}</button>
+          {/each}
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

@@ -77,7 +77,8 @@
   const urlState = readURLState();
 
   // Snapshot resource values for initial state (untrack to avoid reactive tracking)
-  const initPageSize = untrack(() => resource.pageSize ?? 10);
+  const storedPageSize = typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem('svadmin-default-page-size') ?? '', 10) : NaN;
+  const initPageSize = untrack(() => resource.pageSize ?? (isNaN(storedPageSize) ? 10 : storedPageSize));
   const initDefaultSort = untrack(() => resource.defaultSort);
 
   let pagination = $state<{ current: number; pageSize: number }>(untrack(() => externalPagination ?? {
@@ -575,6 +576,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/ProfilePage.svelte

@@ -1,16 +1,72 @@
 <script lang="ts">
-  import { useGetIdentity, useUpdatePassword } from '@svadmin/core';
+  import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Label } from './ui/label/index.js';
+  import { Input } from './ui/input/index.js';
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle } from 'lucide-svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from 'lucide-svelte';
 
   const identity = useGetIdentity();
   const updatePw = useUpdatePassword();
 
+  // Check if auth provider supports updateProfile
+  let authProvider: ReturnType<typeof getAuthProvider> | null = null;
+  try { authProvider = getAuthProvider(); } catch { /* no auth */ }
+  const canUpdateProfile = !!authProvider?.updateProfile;
+
+  // Profile edit state
+  let editingProfile = $state(false);
+  let editName = $state('');
+  let profileSaving = $state(false);
+  let profileSuccess = $state(false);
+  let profileError = $state('');
+
+  function startEditProfile() {
+    editName = identity.data?.name ?? '';
+    editingProfile = true;
+    profileSuccess = false;
+    profileError = '';
+  }
+
+  async function saveProfile() {
+    if (!authProvider?.updateProfile) return;
+    profileSaving = true;
+    profileError = '';
+    try {
+      const result = await authProvider.updateProfile({ name: editName });
+      if (result.success) {
+        profileSuccess = true;
+        editingProfile = false;
+        identity.refetch();
+      } else {
+        profileError = result.error?.message ?? t('common.operationFailed');
+      }
+    } catch (e) {
+      profileError = (e as Error).message;
+    } finally {
+      profileSaving = false;
+    }
+  }
+
+  // Avatar upload
+  let avatarUploading = $state(false);
+  let fileInput = $state<HTMLInputElement>(null!);
+
+  async function handleAvatarChange(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file || !authProvider?.updateProfile) return;
+    avatarUploading = true;
+    try {
+      const result = await authProvider.updateProfile({ avatar: file });
+      if (result.success) identity.refetch();
+    } finally {
+      avatarUploading = false;
+    }
+  }
+
   // Password change form
   let currentPassword = $state('');
   let newPassword = $state('');
@@ -49,12 +105,16 @@
   );
 </script>
 
-<div class="max-w-2xl mx-auto space-y-6 p-4 sm:p-6">
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('profile.title')}</h2>
+  </div>
+
   <!-- Profile Info -->
   <Card.Card>
     <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2">
-        <User class="h-5 w-5" />
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <User class="h-4 w-4 text-muted-foreground" />
         {t('profile.title')}
       </Card.CardTitle>
     </Card.CardHeader>
@@ -65,9 +125,16 @@
           {t('common.loading')}
         </div>
       {:else if identity.data}
+        {#if profileSuccess}
+          <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('common.updateSuccess')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
         <div class="flex items-start gap-6">
           <!-- Avatar -->
-          <div class="shrink-0">
+          <div class="shrink-0 relative group">
             {#if identity.data.avatar}
               <img
                 src={identity.data.avatar}
@@ -79,30 +146,77 @@
                 {initials}
               </div>
             {/if}
+            {#if canUpdateProfile}
+              <button
+                class="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                onclick={() => fileInput.click()}
+                disabled={avatarUploading}
+              >
+                {#if avatarUploading}
+                  <Loader2 class="h-5 w-5 text-white animate-spin" />
+                {:else}
+                  <Camera class="h-5 w-5 text-white" />
+                {/if}
+              </button>
+              <input
+                bind:this={fileInput}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onchange={handleAvatarChange}
+              />
+            {/if}
           </div>
 
           <!-- Info -->
           <div class="space-y-3 flex-1 min-w-0">
-            <div>
-              <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
-              <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
-            </div>
-
-            {#if identity.data.email || identity.data.username}
-              <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                {#if identity.data.email}
-                  <Mail class="h-4 w-4 shrink-0" />
-                {:else}
-                  <User class="h-4 w-4 shrink-0" />
+            {#if editingProfile}
+              <div class="space-y-3 max-w-sm">
+                <div>
+                  <Label for="edit-name" class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                  <Input id="edit-name" bind:value={editName} class="mt-1" />
+                </div>
+                {#if profileError}
+                  <p class="text-xs text-destructive">{profileError}</p>
                 {/if}
-                <span class="truncate">{identity.data.email || identity.data.username}</span>
+                <div class="flex gap-2">
+                  <Button size="sm" onclick={saveProfile} disabled={profileSaving}>
+                    {#if profileSaving}<Loader2 class="h-3 w-3 animate-spin mr-1" />{/if}
+                    {t('common.save')}
+                  </Button>
+                  <Button size="sm" variant="outline" onclick={() => { editingProfile = false; }}>
+                    {t('common.cancel')}
+                  </Button>
+                </div>
               </div>
-            {/if}
-
-            {#if identity.data.id}
-              <div class="text-xs text-muted-foreground/60 font-mono">
-                ID: {identity.data.id}
+            {:else}
+              <div>
+                <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
               </div>
+
+              {#if identity.data.email || identity.data.username}
+                <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                  {#if identity.data.email}
+                    <Mail class="h-4 w-4 shrink-0" />
+                  {:else}
+                    <User class="h-4 w-4 shrink-0" />
+                  {/if}
+                  <span class="truncate">{identity.data.email || identity.data.username}</span>
+                </div>
+              {/if}
+
+              {#if identity.data.id}
+                <div class="text-xs text-muted-foreground/60 font-mono">
+                  ID: {identity.data.id}
+                </div>
+              {/if}
+
+              {#if canUpdateProfile}
+                <Button size="sm" variant="outline" onclick={startEditProfile}>
+                  {t('common.edit')}
+                </Button>
+              {/if}
             {/if}
           </div>
         </div>
@@ -115,8 +229,8 @@
   <!-- Change Password -->
   <Card.Card>
     <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2">
-        <Lock class="h-5 w-5" />
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Lock class="h-4 w-4 text-muted-foreground" />
         {t('profile.changePassword')}
       </Card.CardTitle>
     </Card.CardHeader>

package/src/components/SettingsPage.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
+  import { User, Palette, Info } from 'lucide-svelte';
+  import ProfilePage from './ProfilePage.svelte';
+  import AppearanceSettings from './AppearanceSettings.svelte';
+  import AboutSettings from './AboutSettings.svelte';
+
+  const sections = [
+    {
+      group: 'settings.general',
+      items: [
+        { key: 'profile', path: '/settings/profile', icon: User, label: 'settings.profile' },
+        { key: 'appearance', path: '/settings/appearance', icon: Palette, label: 'settings.appearance' },
+      ],
+    },
+    {
+      group: 'settings.system',
+      items: [
+        { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
+      ],
+    },
+  ];
+
+  let activeKey = $derived.by(() => {
+    const path = currentPath();
+    if (path.includes('/settings/appearance')) return 'appearance';
+    if (path.includes('/settings/about')) return 'about';
+    return 'profile';
+  });
+
+  // Default redirect to profile
+  $effect(() => {
+    const path = currentPath();
+    if (path === '/settings') {
+      navigate('/settings/profile');
+    }
+  });
+</script>
+
+<div class="flex flex-col lg:flex-row gap-0 min-h-full">
+  <!-- Left sidebar navigation -->
+  <nav class="w-full lg:w-56 shrink-0 border-b lg:border-b-0 lg:border-r border-border bg-muted/30">
+    <!-- Mobile: horizontal scroll tabs -->
+    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
+      {#each sections as section}
+        {#each section.items as item}
+          {@const active = activeKey === item.key}
+          <button
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
+              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
+            onclick={() => navigate(item.path)}
+          >
+            <item.icon class="h-4 w-4" />
+            {t(item.label)}
+          </button>
+        {/each}
+      {/each}
+    </div>
+
+    <!-- Desktop: vertical nav with groups -->
+    <div class="hidden lg:block py-6 px-3 space-y-6">
+      <div class="px-3">
+        <h2 class="text-lg font-semibold text-foreground">{t('settings.title')}</h2>
+        <p class="text-xs text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+      </div>
+      {#each sections as section}
+        <div>
+          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+            {t(section.group)}
+          </h3>
+          <div class="space-y-0.5">
+            {#each section.items as item}
+              {@const active = activeKey === item.key}
+              <button
+                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
+                  {active
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
+                onclick={() => navigate(item.path)}
+              >
+                <item.icon class="h-4 w-4 shrink-0" />
+                {t(item.label)}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </nav>
+
+  <!-- Right content area -->
+  <div class="flex-1 p-6 lg:p-8 max-w-3xl">
+    {#if activeKey === 'profile'}
+      <ProfilePage />
+    {:else if activeKey === 'appearance'}
+      <AppearanceSettings />
+    {:else if activeKey === 'about'}
+      <AboutSettings />
+    {/if}
+  </div>
+</div>

package/src/components/Sidebar.svelte

@@ -325,6 +325,9 @@
               <Moon class="h-4 w-4" />
             {/if}
           </TooltipButton>
+          <TooltipButton tooltip={t('settings.title')} variant="ghost" size="icon-sm" onclick={() => navigate('/settings')} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            <Settings class="h-4 w-4" />
+          </TooltipButton>
           <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground/60 hover:text-destructive">
             <LogOut class="h-4 w-4" />
           </TooltipButton>

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/index.ts

@@ -59,6 +59,9 @@ export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.sve
 export { default as InlineEdit } from "./components/InlineEdit.svelte";
 export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
+export { default as SettingsPage } from "./components/SettingsPage.svelte";
+export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
+export { default as AboutSettings } from "./components/AboutSettings.svelte";
 
 // Dashboard Charts (zero-dependency SVG)
 export { BarChart, LineChart, PieChart } from './components/charts/index.js';