@classic-homes/theme-svelte 0.1.8 → 0.1.10

package/dist/lib/components/Alert.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 declare const Alert: import("svelte").Component<{
     [key: string]: unknown;
-    variant?: "default" | "destructive" | "warning" | "error" | "success" | "info" | undefined;
+    variant?: "default" | "destructive" | "error" | "warning" | "success" | "info" | undefined;
     class?: string;
     children: Snippet;
 }, {}, "">;

package/dist/lib/components/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { Checkbox as CheckboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
 
@@ -10,7 +11,9 @@
     value?: string;
     id?: string;
     class?: string;
+    error?: string;
     onCheckedChange?: (checked: boolean) => void;
+    children?: Snippet;
     [key: string]: unknown;
   }
 
@@ -22,44 +25,80 @@
     value,
     id,
     class: className,
+    error,
     onCheckedChange,
+    children,
     ...restProps
   }: Props = $props();
 
+  // Generate a stable unique ID if none provided (for accessibility)
+  const generatedId = `checkbox-${Math.random().toString(36).substring(2, 11)}`;
+  const effectiveId = $derived(id ?? generatedId);
+
   function handleCheckedChange(newChecked: boolean | 'indeterminate') {
     if (typeof newChecked === 'boolean') {
       checked = newChecked;
       onCheckedChange?.(newChecked);
     }
   }
+
+  const hasError = $derived(!!error);
+  const errorId = $derived(`${effectiveId}-error`);
 </script>
 
-<CheckboxPrimitive.Root
-  bind:checked
-  {disabled}
-  {required}
-  {name}
-  {value}
-  {id}
-  onCheckedChange={handleCheckedChange}
-  class={cn(
-    'peer relative h-5 w-5 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center',
-    className
-  )}
-  {...restProps}
->
-  <!-- Touch target expansion (invisible, extends clickable area to 44x44px) -->
-  <span class="absolute inset-0 -m-3" aria-hidden="true"></span>
-  {#if checked}
-    <svg
-      class="h-5 w-5"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
+<div class="space-y-1">
+  <div class="flex items-start gap-3">
+    <CheckboxPrimitive.Root
+      bind:checked
+      {disabled}
+      {required}
+      {name}
+      {value}
+      id={effectiveId}
+      onCheckedChange={handleCheckedChange}
+      aria-invalid={hasError ? 'true' : undefined}
+      aria-describedby={hasError ? errorId : undefined}
+      class={cn(
+        'peer relative h-5 w-5 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center mt-0.5',
+        hasError ? 'border-destructive' : 'border-primary',
+        className
+      )}
+      {...restProps}
     >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
+      <!-- Touch target expansion (invisible, extends clickable area to 44x44px) -->
+      <span class="absolute inset-0 -m-3" aria-hidden="true"></span>
+      {#if checked}
+        <svg
+          class="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      {/if}
+    </CheckboxPrimitive.Root>
+    {#if children}
+      <label
+        for={effectiveId}
+        class={cn(
+          'text-sm leading-relaxed cursor-pointer select-none',
+          disabled && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        {@render children()}
+        {#if required}
+          <span class="text-destructive ml-1" aria-hidden="true">*</span>
+          <span class="sr-only">(required)</span>
+        {/if}
+      </label>
+    {/if}
+  </div>
+  {#if error}
+    <p id={errorId} class="text-sm text-destructive ml-8" role="alert" aria-live="polite">
+      {error}
+    </p>
   {/if}
-</CheckboxPrimitive.Root>
+</div>

package/dist/lib/components/Checkbox.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 interface Props {
     checked?: boolean;
     disabled?: boolean;
@@ -6,7 +7,9 @@ interface Props {
     value?: string;
     id?: string;
     class?: string;
+    error?: string;
     onCheckedChange?: (checked: boolean) => void;
+    children?: Snippet;
     [key: string]: unknown;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;

package/dist/lib/components/Toast.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 declare const Toast: import("svelte").Component<{
     [key: string]: unknown;
-    type?: "warning" | "error" | "success" | "info" | undefined;
+    type?: "error" | "warning" | "success" | "info" | undefined;
     title?: string;
     message: string;
     class?: string;

package/dist/lib/components/layout/FormPageLayout.svelte

@@ -67,7 +67,7 @@
     <div class={cn('gap-8', hasSidebar ? 'grid lg:grid-cols-[1fr,320px]' : 'mx-auto max-w-2xl')}>
       <!-- Sidebar (shows first on mobile when present) -->
       {#if hasSidebar}
-        <aside class="order-first lg:order-last">
+        <aside class="order-first lg:order-last space-y-6">
           {@render sidebar!()}
         </aside>
       {/if}

package/dist/lib/composables/useForm.svelte.d.ts

@@ -84,6 +84,8 @@ export interface UseFormReturn<T extends z.ZodObject<z.ZodRawShape>> {
     readonly data: z.infer<T>;
     /** Field errors (reactive) */
     readonly errors: Record<string, string>;
+    /** Global error message for API/submission errors (reactive) */
+    readonly globalError: string;
     /** Whether form is submitting (reactive) */
     readonly isSubmitting: boolean;
     /** Whether form has been submitted (reactive) */
@@ -110,8 +112,12 @@ export interface UseFormReturn<T extends z.ZodObject<z.ZodRawShape>> {
     clearErrors: () => void;
     /** Set a specific error */
     setError: (field: string, message: string) => void;
+    /** Set the global error message */
+    setGlobalError: (message: string) => void;
     /** Mark a field as dirty */
     markDirty: (field: string) => void;
+    /** Handle field blur - validates the field and marks dirty */
+    handleBlur: (field: keyof z.infer<T>) => void;
 }
 /**
  * Create a form handler with Zod validation and Svelte 5 runes

package/dist/lib/composables/useForm.svelte.js

@@ -51,12 +51,13 @@ export function useForm(options) {
     // Reactive state using Svelte 5 runes
     let data = $state(cloneInitialValues());
     let errors = $state({});
+    let globalError = $state('');
     let isSubmitting = $state(false);
     let isSubmitted = $state(false);
     let dirtyFields = $state(new Set());
     // Derived state
     const isDirty = $derived(dirtyFields.size > 0);
-    const isValid = $derived(Object.keys(errors).length === 0);
+    const isValid = $derived(Object.keys(errors).length === 0 && globalError === '');
     /**
      * Set nested value in object using dot notation path
      */
@@ -159,6 +160,9 @@ export function useForm(options) {
      */
     async function handleSubmit(event) {
         event?.preventDefault();
+        // Clear previous errors
+        errors = {};
+        globalError = '';
         isSubmitted = true;
         // Validate all fields
         if (!validate()) {
@@ -180,38 +184,56 @@ export function useForm(options) {
         }
         catch (error) {
             const err = error instanceof Error ? error : new Error(String(error));
+            const message = errorMessage || err.message || 'An error occurred';
+            // Set global error for display in form
+            globalError = message;
             if (onError) {
                 onError(err);
             }
             if (showToastOnError) {
-                toastStore.error(errorMessage || err.message || 'An error occurred');
+                toastStore.error(message);
             }
         }
         finally {
             isSubmitting = false;
         }
     }
+    /**
+     * Handle field blur - validates the field and marks dirty
+     */
+    function handleBlur(field) {
+        markDirty(field);
+        validateField(field);
+    }
     /**
      * Reset form to initial values
      */
     function reset() {
         data = cloneInitialValues();
         errors = {};
+        globalError = '';
         isSubmitted = false;
         dirtyFields = new Set();
     }
     /**
-     * Clear all errors
+     * Clear all errors (field and global)
      */
     function clearErrors() {
         errors = {};
+        globalError = '';
     }
     /**
-     * Set a specific error manually
+     * Set a specific field error manually
      */
     function setError(field, message) {
         errors = { ...errors, [field]: message };
     }
+    /**
+     * Set the global error message
+     */
+    function setGlobalError(message) {
+        globalError = message;
+    }
     return {
         get data() {
             return data;
@@ -219,6 +241,9 @@ export function useForm(options) {
         get errors() {
             return errors;
         },
+        get globalError() {
+            return globalError;
+        },
         get isSubmitting() {
             return isSubmitting;
         },
@@ -240,6 +265,8 @@ export function useForm(options) {
         reset,
         clearErrors,
         setError,
+        setGlobalError,
         markDirty,
+        handleBlur,
     };
 }

package/dist/lib/composables/usePersistedForm.svelte.d.ts

@@ -1,12 +1,12 @@
 /**
  * usePersistedForm - Form state management with localStorage persistence
  *
- * Extends useForm with:
+ * Composes with useForm to add:
  * - Automatic draft saving to localStorage with debounce
  * - Draft restoration on mount
  * - Configurable expiration time
  * - Field exclusion from persistence (e.g., consent fields)
- * - Duplicate submission prevention
+ * - Duplicate submission prevention with cooldown
  *
  * @example
  * ```svelte
@@ -44,25 +44,10 @@
  * ```
  */
 import { z } from 'zod';
-export interface UsePersistedFormOptions<T extends z.ZodObject<z.ZodRawShape>> {
-    /** Zod schema for validation */
-    schema: T;
-    /** Initial form values */
-    initialValues: z.infer<T>;
-    /** Called on successful validation and submission */
-    onSubmit: (data: z.infer<T>) => Promise<void> | void;
+import { type UseFormOptions, type UseFormReturn } from './useForm.svelte.js';
+export interface UsePersistedFormOptions<T extends z.ZodObject<z.ZodRawShape>> extends UseFormOptions<T> {
     /** localStorage key for draft persistence */
     storageKey: string;
-    /** Called when validation or submission fails */
-    onError?: (error: Error | z.ZodError) => void;
-    /** Whether to show toast on error (default: true) */
-    showToastOnError?: boolean;
-    /** Whether to reset form after successful submission (default: false) */
-    resetOnSuccess?: boolean;
-    /** Custom error message for toast */
-    errorMessage?: string;
-    /** Custom success message for toast (if set, shows toast on success) */
-    successMessage?: string;
     /** Fields to exclude from persistence (e.g., consent fields that require re-confirmation) */
     excludeFields?: (keyof z.infer<T>)[];
     /** Expiration time in milliseconds (default: 7 days) */
@@ -74,43 +59,9 @@ export interface UsePersistedFormOptions<T extends z.ZodObject<z.ZodRawShape>> {
     /** Cooldown time between submissions in milliseconds (default: 5000ms) */
     submitCooldownMs?: number;
 }
-export interface UsePersistedFormReturn<T extends z.ZodObject<z.ZodRawShape>> {
-    /** Current form data (reactive) */
-    readonly data: z.infer<T>;
-    /** Field errors (reactive) */
-    readonly errors: Record<string, string>;
-    /** Whether form is submitting (reactive) */
-    readonly isSubmitting: boolean;
-    /** Whether form has been submitted (reactive) */
-    readonly isSubmitted: boolean;
-    /** Whether any field is dirty (reactive) */
-    readonly isDirty: boolean;
-    /** Whether form is currently valid (reactive) */
-    readonly isValid: boolean;
+export interface UsePersistedFormReturn<T extends z.ZodObject<z.ZodRawShape>> extends UseFormReturn<T> {
     /** Whether a draft was restored on mount (reactive) */
     readonly draftRestored: boolean;
-    /** Set a field value */
-    setField: <K extends keyof z.infer<T>>(field: K, value: z.infer<T>[K]) => void;
-    /** Set multiple field values */
-    setFields: (values: Partial<z.infer<T>>) => void;
-    /** Set a nested field value using dot notation */
-    setNestedField: (path: string, value: unknown) => void;
-    /** Validate a single field */
-    validateField: (field: keyof z.infer<T>) => boolean;
-    /** Validate the entire form */
-    validate: () => boolean;
-    /** Handle form submission */
-    handleSubmit: (event?: Event) => Promise<void>;
-    /** Reset form to initial values and clear draft */
-    reset: () => void;
-    /** Clear all errors */
-    clearErrors: () => void;
-    /** Set a specific error */
-    setError: (field: string, message: string) => void;
-    /** Mark a field as dirty */
-    markDirty: (field: string) => void;
-    /** Handle field blur - validates the field */
-    handleBlur: (field: keyof z.infer<T>) => void;
     /** Clear the stored draft */
     clearDraft: () => void;
     /** Dismiss the draft restored notification */
@@ -118,6 +69,7 @@ export interface UsePersistedFormReturn<T extends z.ZodObject<z.ZodRawShape>> {
 }
 /**
  * Create a form handler with localStorage persistence
+ * Composes with useForm for all base functionality
  */
 export declare function usePersistedForm<T extends z.ZodObject<z.ZodRawShape>>(options: UsePersistedFormOptions<T>): UsePersistedFormReturn<T>;
 /**

package/dist/lib/composables/usePersistedForm.svelte.js

@@ -1,12 +1,12 @@
 /**
  * usePersistedForm - Form state management with localStorage persistence
  *
- * Extends useForm with:
+ * Composes with useForm to add:
  * - Automatic draft saving to localStorage with debounce
  * - Draft restoration on mount
  * - Configurable expiration time
  * - Field exclusion from persistence (e.g., consent fields)
- * - Duplicate submission prevention
+ * - Duplicate submission prevention with cooldown
  *
  * @example
  * ```svelte
@@ -43,79 +43,38 @@
  * </form>
  * ```
  */
+import { useForm } from './useForm.svelte.js';
 import { toastStore } from '../stores/toast.svelte.js';
 const DEFAULT_EXPIRATION_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
 const DEFAULT_DEBOUNCE_MS = 500;
 const DEFAULT_SUBMIT_COOLDOWN_MS = 5000;
+/**
+ * Check if localStorage is available (also checks for browser environment)
+ */
+function isStorageAvailable() {
+    if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+        return false;
+    }
+    try {
+        const test = '__storage_test__';
+        localStorage.setItem(test, test);
+        localStorage.removeItem(test);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Create a form handler with localStorage persistence
+ * Composes with useForm for all base functionality
  */
 export function usePersistedForm(options) {
-    const { schema, initialValues, onSubmit, storageKey, onError, showToastOnError = true, resetOnSuccess = false, errorMessage, successMessage, excludeFields = [], expirationMs = DEFAULT_EXPIRATION_MS, onDraftRestored, debounceMs = DEFAULT_DEBOUNCE_MS, submitCooldownMs = DEFAULT_SUBMIT_COOLDOWN_MS, } = options;
-    // Deep clone to avoid reference issues
-    const cloneInitialValues = () => JSON.parse(JSON.stringify(initialValues));
-    // Reactive state using Svelte 5 runes
-    let data = $state(cloneInitialValues());
-    let errors = $state({});
-    let isSubmitting = $state(false);
-    let isSubmitted = $state(false);
-    let dirtyFields = $state(new Set());
+    const { storageKey, excludeFields = [], expirationMs = DEFAULT_EXPIRATION_MS, onDraftRestored, debounceMs = DEFAULT_DEBOUNCE_MS, submitCooldownMs = DEFAULT_SUBMIT_COOLDOWN_MS, onSubmit, initialValues, ...baseOptions } = options;
+    // Persistence state
     let draftRestored = $state(false);
     let lastSubmitTime = $state(0);
     let debounceTimer = null;
-    // Derived state
-    const isDirty = $derived(dirtyFields.size > 0);
-    const isValid = $derived(Object.keys(errors).length === 0);
-    /**
-     * Check if localStorage is available (also checks for browser environment)
-     */
-    function isStorageAvailable() {
-        if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
-            return false;
-        }
-        try {
-            const test = '__storage_test__';
-            localStorage.setItem(test, test);
-            localStorage.removeItem(test);
-            return true;
-        }
-        catch {
-            return false;
-        }
-    }
-    /**
-     * Get data to persist (excludes specified fields)
-     */
-    function getDataToPersist() {
-        const dataCopy = { ...data };
-        for (const field of excludeFields) {
-            delete dataCopy[field];
-        }
-        return dataCopy;
-    }
-    /**
-     * Save draft to localStorage with debounce
-     */
-    function saveDraft() {
-        if (!isStorageAvailable())
-            return;
-        if (debounceTimer) {
-            clearTimeout(debounceTimer);
-        }
-        debounceTimer = setTimeout(() => {
-            try {
-                const draft = {
-                    data: getDataToPersist(),
-                    timestamp: Date.now(),
-                };
-                localStorage.setItem(storageKey, JSON.stringify(draft));
-            }
-            catch (error) {
-                // Silently fail - localStorage may be full or unavailable
-                console.warn('Failed to save form draft', error);
-            }
-        }, debounceMs);
-    }
     /**
      * Load draft from localStorage
      */
@@ -153,203 +112,99 @@ export function usePersistedForm(options) {
         }
     }
     /**
-     * Restore draft on initialization
+     * Get the initial values, merging with any restored draft
      */
-    function restoreDraft() {
+    function getInitialValues() {
         const draft = loadDraft();
         if (draft && Object.keys(draft).length > 0) {
-            // Merge draft with initial data (to keep excluded fields at their defaults)
-            data = { ...cloneInitialValues(), ...draft };
-            draftRestored = true;
-            onDraftRestored?.();
-        }
-    }
-    // Restore draft on initialization (only in browser)
-    if (typeof window !== 'undefined') {
-        restoreDraft();
-    }
-    // Watch for form changes and save draft
-    $effect(() => {
-        // Access data to create dependency
-        JSON.stringify(data);
-        if (dirtyFields.size > 0) {
-            saveDraft();
-        }
-    });
-    /**
-     * Set nested value in object using dot notation path
-     */
-    function setNestedValue(obj, path, value) {
-        const keys = path.split('.');
-        let current = obj;
-        for (let i = 0; i < keys.length - 1; i++) {
-            const key = keys[i];
-            if (current[key] === undefined || current[key] === null) {
-                current[key] = {};
+            // Schedule callback for after initialization
+            if (typeof window !== 'undefined') {
+                queueMicrotask(() => {
+                    draftRestored = true;
+                    onDraftRestored?.();
+                });
             }
-            current = current[key];
-        }
-        current[keys[keys.length - 1]] = value;
-    }
-    /**
-     * Parse Zod errors into field-keyed error map
-     */
-    function parseZodErrors(zodError) {
-        const fieldErrors = {};
-        for (const issue of zodError.issues) {
-            const path = issue.path.join('.');
-            // Only keep the first error for each field
-            if (!fieldErrors[path]) {
-                fieldErrors[path] = issue.message;
-            }
-        }
-        return fieldErrors;
-    }
-    /**
-     * Set a single field value
-     */
-    function setField(field, value) {
-        data[field] = value;
-        markDirty(field);
-    }
-    /**
-     * Set multiple field values
-     */
-    function setFields(values) {
-        for (const [key, value] of Object.entries(values)) {
-            data[key] = value;
-            markDirty(key);
+            // Merge draft with initial values (keeps excluded fields at defaults)
+            return { ...JSON.parse(JSON.stringify(initialValues)), ...draft };
         }
+        return JSON.parse(JSON.stringify(initialValues));
     }
     /**
-     * Set a nested field value using dot notation
+     * Wrapped onSubmit with cooldown and draft clearing
      */
-    function setNestedField(path, value) {
-        setNestedValue(data, path, value);
-        markDirty(path);
-    }
-    /**
-     * Mark a field as dirty
-     */
-    function markDirty(field) {
-        dirtyFields = new Set([...dirtyFields, field]);
-    }
-    /**
-     * Validate a single field against the schema
-     */
-    function validateField(field) {
-        const fieldSchema = schema.shape[field];
-        if (!fieldSchema)
-            return true;
-        const fieldValue = data[field];
-        const result = fieldSchema.safeParse(fieldValue);
-        if (result.success) {
-            // Clear error for this field
-            const newErrors = { ...errors };
-            delete newErrors[field];
-            errors = newErrors;
-            return true;
-        }
-        else {
-            // Set error for this field
-            errors = {
-                ...errors,
-                [field]: result.error.issues[0]?.message || 'Invalid value',
-            };
-            return false;
-        }
-    }
-    /**
-     * Validate the entire form
-     */
-    function validate() {
-        const result = schema.safeParse(data);
-        if (result.success) {
-            errors = {};
-            return true;
-        }
-        else {
-            errors = parseZodErrors(result.error);
-            return false;
-        }
-    }
-    /**
-     * Handle field blur - validates the field
-     */
-    function handleBlur(field) {
-        markDirty(field);
-        validateField(field);
-    }
-    /**
-     * Handle form submission
-     */
-    async function handleSubmit(event) {
-        event?.preventDefault();
+    async function wrappedOnSubmit(data) {
         // Check for duplicate submission
         const now = Date.now();
         if (now - lastSubmitTime < submitCooldownMs) {
             toastStore.warning('Please wait before submitting again');
-            return;
+            throw new Error('Submission cooldown active');
         }
-        isSubmitted = true;
-        // Validate all fields
-        if (!validate()) {
-            const errorCount = Object.keys(errors).length;
-            if (showToastOnError) {
-                toastStore.error(errorMessage || `Please fix ${errorCount} validation error${errorCount > 1 ? 's' : ''}`);
-            }
-            return;
-        }
-        isSubmitting = true;
         try {
             await onSubmit(data);
             lastSubmitTime = now;
             // Clear draft on successful submission
             clearDraft();
-            if (successMessage) {
-                toastStore.success(successMessage);
-            }
-            if (resetOnSuccess) {
-                reset();
-            }
         }
         catch (error) {
             // Reset cooldown on error to allow retry
             lastSubmitTime = 0;
-            const err = error instanceof Error ? error : new Error(String(error));
-            if (onError) {
-                onError(err);
-            }
-            if (showToastOnError) {
-                toastStore.error(errorMessage || err.message || 'An error occurred');
-            }
-        }
-        finally {
-            isSubmitting = false;
+            throw error;
         }
     }
+    // Create base form with potentially restored initial values
+    const baseForm = useForm({
+        ...baseOptions,
+        initialValues: getInitialValues(),
+        onSubmit: wrappedOnSubmit,
+    });
     /**
-     * Reset form to initial values and clear draft
+     * Get data to persist (excludes specified fields)
      */
-    function reset() {
-        data = cloneInitialValues();
-        errors = {};
-        isSubmitted = false;
-        dirtyFields = new Set();
-        draftRestored = false;
-        clearDraft();
+    function getDataToPersist() {
+        const dataCopy = { ...baseForm.data };
+        for (const field of excludeFields) {
+            delete dataCopy[field];
+        }
+        return dataCopy;
     }
     /**
-     * Clear all errors
+     * Save draft to localStorage with debounce
      */
-    function clearErrors() {
-        errors = {};
+    function saveDraft() {
+        if (!isStorageAvailable())
+            return;
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+        }
+        debounceTimer = setTimeout(() => {
+            try {
+                const draft = {
+                    data: getDataToPersist(),
+                    timestamp: Date.now(),
+                };
+                localStorage.setItem(storageKey, JSON.stringify(draft));
+            }
+            catch (error) {
+                // Silently fail - localStorage may be full or unavailable
+                console.warn('Failed to save form draft', error);
+            }
+        }, debounceMs);
     }
+    // Watch for form changes and save draft
+    $effect(() => {
+        // Access data to create dependency
+        JSON.stringify(baseForm.data);
+        if (baseForm.isDirty) {
+            saveDraft();
+        }
+    });
     /**
-     * Set a specific error manually
+     * Extended reset that also clears the draft
      */
-    function setError(field, message) {
-        errors = { ...errors, [field]: message };
+    function reset() {
+        baseForm.reset();
+        draftRestored = false;
+        clearDraft();
     }
     /**
      * Dismiss the draft restored notification
@@ -358,38 +213,47 @@ export function usePersistedForm(options) {
         draftRestored = false;
     }
     return {
+        // Delegate all base form properties
         get data() {
-            return data;
+            return baseForm.data;
         },
         get errors() {
-            return errors;
+            return baseForm.errors;
+        },
+        get globalError() {
+            return baseForm.globalError;
         },
         get isSubmitting() {
-            return isSubmitting;
+            return baseForm.isSubmitting;
         },
         get isSubmitted() {
-            return isSubmitted;
+            return baseForm.isSubmitted;
         },
         get isDirty() {
-            return isDirty;
+            return baseForm.isDirty;
         },
         get isValid() {
-            return isValid;
+            return baseForm.isValid;
         },
+        // Persistence-specific properties
         get draftRestored() {
             return draftRestored;
         },
-        setField,
-        setFields,
-        setNestedField,
-        validateField,
-        validate,
-        handleSubmit,
+        // Delegate base form methods
+        setField: baseForm.setField,
+        setFields: baseForm.setFields,
+        setNestedField: baseForm.setNestedField,
+        validateField: baseForm.validateField,
+        validate: baseForm.validate,
+        handleSubmit: baseForm.handleSubmit,
+        clearErrors: baseForm.clearErrors,
+        setError: baseForm.setError,
+        setGlobalError: baseForm.setGlobalError,
+        markDirty: baseForm.markDirty,
+        handleBlur: baseForm.handleBlur,
+        // Override reset to also clear draft
         reset,
-        clearErrors,
-        setError,
-        markDirty,
-        handleBlur,
+        // Persistence-specific methods
         clearDraft,
         dismissDraftNotification,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",