@classic-homes/theme-svelte 0.1.6 → 0.1.8

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" | "error" | "success" | "warning" | "info" | undefined;
+    variant?: "default" | "destructive" | "warning" | "error" | "success" | "info" | undefined;
     class?: string;
     children: Snippet;
 }, {}, "">;

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 declare const Badge: import("svelte").Component<{
     [key: string]: unknown;
-    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "warning" | "success" | "info" | undefined;
     size?: "default" | "sm" | "dot" | undefined;
     clickable?: boolean;
     class?: string;

package/dist/lib/components/Card.svelte

@@ -5,8 +5,14 @@
    * Features:
    * - Clean border styling with sharp look
    * - Optional hover shadow effect for interactive cards
-   * - Featured variant with thicker border (border-2)
+   * - Multiple variants: default, featured, highlight, warning
    * - Consistent with brand guidelines
+   *
+   * Variants:
+   * - default: Standard card with 1px border
+   * - featured: Thicker 2px border for emphasis
+   * - highlight: Teal border (brand-core-1) for positive/info callouts
+   * - warning: Red border (brand-red-primary) for warnings/alerts
    */
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
@@ -14,9 +20,15 @@
   interface Props {
     /** Enable hover shadow effect for interactive cards */
     interactive?: boolean;
-    /** Card variant - default has 1px border, featured has 2px border */
-    variant?: 'default' | 'featured';
-    /** Border color for featured variant */
+    /**
+     * Card variant
+     * - default: Standard 1px border
+     * - featured: Thicker 2px border
+     * - highlight: Teal border for positive/info callouts
+     * - warning: Red border for warnings/alerts
+     */
+    variant?: 'default' | 'featured' | 'highlight' | 'warning';
+    /** Border color override (ignored for highlight/warning variants) */
     borderColor?: 'default' | 'primary' | 'muted';
     /** Additional classes */
     class?: string;
@@ -39,15 +51,26 @@
     primary: 'border-primary',
     muted: 'border-gray-200',
   };
+
+  // Variant-specific border colors (highlight and warning override borderColor)
+  const variantBorderClasses = $derived({
+    default: borderColorClasses[borderColor],
+    featured: borderColorClasses[borderColor],
+    highlight: 'border-brand-core-1',
+    warning: 'border-brand-red-primary',
+  });
+
+  // Variants with thick borders
+  const thickBorderVariants = ['featured', 'highlight', 'warning'];
 </script>
 
 <div
   class={cn(
     'rounded-md bg-card text-card-foreground',
-    // Border thickness based on variant
-    variant === 'featured' ? 'border-2' : 'border',
-    // Border color
-    borderColorClasses[borderColor],
+    // Border thickness - thick for featured, highlight, warning
+    thickBorderVariants.includes(variant) ? 'border-2' : 'border',
+    // Border color based on variant
+    variantBorderClasses[variant],
     // Interactive hover effect
     interactive && 'hover:shadow-lg transition-shadow duration-200',
     className

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

@@ -4,16 +4,28 @@
    * Features:
    * - Clean border styling with sharp look
    * - Optional hover shadow effect for interactive cards
-   * - Featured variant with thicker border (border-2)
+   * - Multiple variants: default, featured, highlight, warning
    * - Consistent with brand guidelines
+   *
+   * Variants:
+   * - default: Standard card with 1px border
+   * - featured: Thicker 2px border for emphasis
+   * - highlight: Teal border (brand-core-1) for positive/info callouts
+   * - warning: Red border (brand-red-primary) for warnings/alerts
    */
 import type { Snippet } from 'svelte';
 interface Props {
     /** Enable hover shadow effect for interactive cards */
     interactive?: boolean;
-    /** Card variant - default has 1px border, featured has 2px border */
-    variant?: 'default' | 'featured';
-    /** Border color for featured variant */
+    /**
+     * Card variant
+     * - default: Standard 1px border
+     * - featured: Thicker 2px border
+     * - highlight: Teal border for positive/info callouts
+     * - warning: Red border for warnings/alerts
+     */
+    variant?: 'default' | 'featured' | 'highlight' | 'warning';
+    /** Border color override (ignored for highlight/warning variants) */
     borderColor?: 'default' | 'primary' | 'muted';
     /** Additional classes */
     class?: string;

package/dist/lib/components/CardFooter.svelte

@@ -1,11 +1,29 @@
 <script lang="ts">
+  /**
+   * CardFooter - Footer section for Card component
+   *
+   * Provides consistent padding and flex layout for card action buttons
+   * or summary content.
+   *
+   * @example
+   * <Card>
+   *   <CardHeader>...</CardHeader>
+   *   <CardContent>...</CardContent>
+   *   <CardFooter>
+   *     <Button>Save</Button>
+   *     <Button variant="outline">Cancel</Button>
+   *   </CardFooter>
+   * </Card>
+   */
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '../utils.js';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
     class?: string;
+    /** Footer content */
     children: Snippet;
-    [key: string]: unknown;
   }
 
   let { class: className, children, ...restProps }: Props = $props();

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

@@ -1,8 +1,26 @@
+/**
+   * CardFooter - Footer section for Card component
+   *
+   * Provides consistent padding and flex layout for card action buttons
+   * or summary content.
+   *
+   * @example
+   * <Card>
+   *   <CardHeader>...</CardHeader>
+   *   <CardContent>...</CardContent>
+   *   <CardFooter>
+   *     <Button>Save</Button>
+   *     <Button variant="outline">Cancel</Button>
+   *   </CardFooter>
+   * </Card>
+   */
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
     class?: string;
+    /** Footer content */
     children: Snippet;
-    [key: string]: unknown;
 }
 declare const CardFooter: import("svelte").Component<Props, {}, "">;
 type CardFooter = ReturnType<typeof CardFooter>;

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?: "error" | "success" | "warning" | "info" | undefined;
+    type?: "warning" | "error" | "success" | "info" | undefined;
     title?: string;
     message: string;
     class?: string;

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

@@ -42,72 +42,77 @@
     class: className,
   }: Props = $props();
 
-  const currentYear = new Date().getFullYear();
-  const defaultCopyright = `${currentYear} Classic Homes. All rights reserved.`;
-
   const isDark = $derived(variant === 'dark');
+  const displayCopyright = $derived(
+    copyright || `${new Date().getFullYear()} Classic Homes. All rights reserved.`
+  );
 </script>
 
 <footer
+  aria-label="Site footer"
   class={cn(
     // Base styles
-    isDark ? 'bg-[#50504f] text-white' : 'bg-muted/30',
+    isDark ? 'bg-gray-600 text-white' : 'bg-muted/30',
     // Border styles - strong accent border or standard
-    strongBorder ? 'border-t-[10px] border-[#787878]' : 'border-t border-black',
+    strongBorder ? 'border-t-[10px] border-gray-500' : 'border-t border-border',
     className
   )}
 >
   <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
     {#if links.length > 0}
-      <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
-        {#each links as section}
-          <div>
-            {#if section.title}
-              <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
-                {section.title}
-              </h3>
-            {/if}
-            <ul class="mt-4 space-y-2">
-              {#each section.items as item}
-                <li>
-                  <a
-                    href={item.href}
-                    class={cn(
-                      'text-sm transition-colors',
-                      isDark
-                        ? 'text-white hover:text-primary'
-                        : 'text-muted-foreground hover:text-foreground'
-                    )}
-                    target={item.external ? '_blank' : undefined}
-                    rel={item.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {item.name}
-                    {#if item.external}
-                      <svg
-                        class="ml-1 inline-block h-3 w-3"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                        />
-                      </svg>
-                    {/if}
-                  </a>
-                </li>
-              {/each}
-            </ul>
-          </div>
-        {/each}
-      </div>
+      <nav aria-label="Footer navigation">
+        <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:gap-8 lg:grid-cols-4">
+          {#each links as section}
+            <div>
+              {#if section.title}
+                <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
+                  {section.title}
+                </h3>
+              {/if}
+              <ul class="mt-4 space-y-2">
+                {#each section.items as item}
+                  <li>
+                    <a
+                      href={item.href}
+                      class={cn(
+                        'text-sm transition-colors',
+                        isDark
+                          ? 'text-white hover:text-primary'
+                          : 'text-muted-foreground hover:text-foreground'
+                      )}
+                      target={item.external ? '_blank' : undefined}
+                      rel={item.external ? 'noopener noreferrer' : undefined}
+                    >
+                      {item.name}
+                      {#if item.external}
+                        <span class="sr-only">(opens in new tab)</span>
+                        <svg
+                          aria-hidden="true"
+                          class="ml-1 inline-block h-3 w-3"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                          />
+                        </svg>
+                      {/if}
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/each}
+        </div>
+      </nav>
     {/if}
 
     {#if children}
-      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-600' : 'border-black')}>
+      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-500' : 'border-border')}>
         {@render children()}
       </div>
     {/if}
@@ -115,7 +120,7 @@
     <div
       class={cn(
         'mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row',
-        isDark ? 'border-gray-600' : 'border-black'
+        isDark ? 'border-gray-500' : 'border-border'
       )}
     >
       {#if showLogo}
@@ -123,7 +128,7 @@
       {/if}
 
       <p class={cn('text-center text-sm', isDark ? 'text-gray-400' : 'text-muted-foreground')}>
-        {copyright || defaultCopyright}
+        {displayCopyright}
       </p>
     </div>
   </div>

package/dist/lib/composables/index.d.ts

@@ -6,3 +6,4 @@
  */
 export { useForm, type UseFormOptions, type UseFormReturn, type FieldError, type FormState, type InferFormData, } from './useForm.svelte.js';
 export { useAsync, runAsync, type UseAsyncOptions, type UseAsyncReturn, } from './useAsync.svelte.js';
+export { usePersistedForm, type UsePersistedFormOptions, type UsePersistedFormReturn, type InferPersistedFormData, } from './usePersistedForm.svelte.js';

package/dist/lib/composables/index.js

@@ -8,3 +8,5 @@
 export { useForm, } from './useForm.svelte.js';
 // Async operation composable
 export { useAsync, runAsync, } from './useAsync.svelte.js';
+// Persisted form composable with localStorage draft saving
+export { usePersistedForm, } from './usePersistedForm.svelte.js';

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

@@ -0,0 +1,126 @@
+/**
+ * usePersistedForm - Form state management with localStorage persistence
+ *
+ * Extends useForm with:
+ * - 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
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePersistedForm } from '@classic-homes/theme-svelte';
+ *   import { z } from 'zod';
+ *
+ *   const schema = z.object({
+ *     email: z.string().email(),
+ *     name: z.string().min(1),
+ *     consent: z.boolean(),
+ *   });
+ *
+ *   const form = usePersistedForm({
+ *     schema,
+ *     initialValues: { email: '', name: '', consent: false },
+ *     onSubmit: async (data) => {
+ *       await submitForm(data);
+ *     },
+ *     storageKey: 'my-form-draft',
+ *     excludeFields: ['consent'], // Don't persist consent
+ *     expirationMs: 7 * 24 * 60 * 60 * 1000, // 7 days
+ *     onDraftRestored: () => {
+ *       console.log('Draft was restored');
+ *     },
+ *   });
+ * </script>
+ *
+ * <form onsubmit={form.handleSubmit}>
+ *   <input bind:value={form.data.email} />
+ *   {#if form.draftRestored}
+ *     <div>Your previous draft has been restored.</div>
+ *   {/if}
+ * </form>
+ * ```
+ */
+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;
+    /** 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) */
+    expirationMs?: number;
+    /** Callback when a draft is restored */
+    onDraftRestored?: () => void;
+    /** Debounce time for saving drafts in milliseconds (default: 500ms) */
+    debounceMs?: number;
+    /** 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;
+    /** 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 */
+    dismissDraftNotification: () => void;
+}
+/**
+ * Create a form handler with localStorage persistence
+ */
+export declare function usePersistedForm<T extends z.ZodObject<z.ZodRawShape>>(options: UsePersistedFormOptions<T>): UsePersistedFormReturn<T>;
+/**
+ * Type helper to extract form data type from schema
+ */
+export type InferPersistedFormData<T extends z.ZodObject<z.ZodRawShape>> = z.infer<T>;

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

@@ -0,0 +1,396 @@
+/**
+ * usePersistedForm - Form state management with localStorage persistence
+ *
+ * Extends useForm with:
+ * - 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
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePersistedForm } from '@classic-homes/theme-svelte';
+ *   import { z } from 'zod';
+ *
+ *   const schema = z.object({
+ *     email: z.string().email(),
+ *     name: z.string().min(1),
+ *     consent: z.boolean(),
+ *   });
+ *
+ *   const form = usePersistedForm({
+ *     schema,
+ *     initialValues: { email: '', name: '', consent: false },
+ *     onSubmit: async (data) => {
+ *       await submitForm(data);
+ *     },
+ *     storageKey: 'my-form-draft',
+ *     excludeFields: ['consent'], // Don't persist consent
+ *     expirationMs: 7 * 24 * 60 * 60 * 1000, // 7 days
+ *     onDraftRestored: () => {
+ *       console.log('Draft was restored');
+ *     },
+ *   });
+ * </script>
+ *
+ * <form onsubmit={form.handleSubmit}>
+ *   <input bind:value={form.data.email} />
+ *   {#if form.draftRestored}
+ *     <div>Your previous draft has been restored.</div>
+ *   {/if}
+ * </form>
+ * ```
+ */
+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;
+/**
+ * Create a form handler with localStorage persistence
+ */
+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());
+    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
+     */
+    function loadDraft() {
+        if (!isStorageAvailable())
+            return null;
+        try {
+            const stored = localStorage.getItem(storageKey);
+            if (!stored)
+                return null;
+            const draft = JSON.parse(stored);
+            // Check if draft has expired
+            if (Date.now() - draft.timestamp > expirationMs) {
+                clearDraft();
+                return null;
+            }
+            return draft.data;
+        }
+        catch {
+            // Silently fail - corrupt data
+            return null;
+        }
+    }
+    /**
+     * Clear draft from localStorage
+     */
+    function clearDraft() {
+        if (!isStorageAvailable())
+            return;
+        try {
+            localStorage.removeItem(storageKey);
+        }
+        catch {
+            // Silently fail
+        }
+    }
+    /**
+     * Restore draft on initialization
+     */
+    function restoreDraft() {
+        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] = {};
+            }
+            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);
+        }
+    }
+    /**
+     * Set a nested field value using dot notation
+     */
+    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();
+        // Check for duplicate submission
+        const now = Date.now();
+        if (now - lastSubmitTime < submitCooldownMs) {
+            toastStore.warning('Please wait before submitting again');
+            return;
+        }
+        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;
+        }
+    }
+    /**
+     * Reset form to initial values and clear draft
+     */
+    function reset() {
+        data = cloneInitialValues();
+        errors = {};
+        isSubmitted = false;
+        dirtyFields = new Set();
+        draftRestored = false;
+        clearDraft();
+    }
+    /**
+     * Clear all errors
+     */
+    function clearErrors() {
+        errors = {};
+    }
+    /**
+     * Set a specific error manually
+     */
+    function setError(field, message) {
+        errors = { ...errors, [field]: message };
+    }
+    /**
+     * Dismiss the draft restored notification
+     */
+    function dismissDraftNotification() {
+        draftRestored = false;
+    }
+    return {
+        get data() {
+            return data;
+        },
+        get errors() {
+            return errors;
+        },
+        get isSubmitting() {
+            return isSubmitting;
+        },
+        get isSubmitted() {
+            return isSubmitted;
+        },
+        get isDirty() {
+            return isDirty;
+        },
+        get isValid() {
+            return isValid;
+        },
+        get draftRestored() {
+            return draftRestored;
+        },
+        setField,
+        setFields,
+        setNestedField,
+        validateField,
+        validate,
+        handleSubmit,
+        reset,
+        clearErrors,
+        setError,
+        markDirty,
+        handleBlur,
+        clearDraft,
+        dismissDraftNotification,
+    };
+}

package/dist/lib/index.d.ts

@@ -72,5 +72,5 @@ export { cn } from './utils.js';
 export { tv, type VariantProps } from 'tailwind-variants';
 export { validateNonEmptyArray, validateRequired, validateOneOf, validateRange, validateProps, createValidator, type ValidationResult, } from './validation.js';
 export { perfStart, perfEnd, measure, measureAsync, getPerformanceEntries, clearPerformanceEntries, createPerfMonitor, type PerformanceMark, } from './performance.js';
-export { useForm, useAsync, runAsync, type UseFormOptions, type UseFormReturn, type FieldError, type FormState, type InferFormData, type UseAsyncOptions, type UseAsyncReturn, } from './composables/index.js';
+export { useForm, useAsync, runAsync, usePersistedForm, type UseFormOptions, type UseFormReturn, type FieldError, type FormState, type InferFormData, type UseAsyncOptions, type UseAsyncReturn, type UsePersistedFormOptions, type UsePersistedFormReturn, type InferPersistedFormData, } from './composables/index.js';
 export * from './schemas/index.js';

package/dist/lib/index.js

@@ -89,6 +89,6 @@ export { validateNonEmptyArray, validateRequired, validateOneOf, validateRange,
 // Performance monitoring utilities (dev-only, tree-shaken in production)
 export { perfStart, perfEnd, measure, measureAsync, getPerformanceEntries, clearPerformanceEntries, createPerfMonitor, } from './performance.js';
 // Composables - reusable Svelte 5 state management patterns
-export { useForm, useAsync, runAsync, } from './composables/index.js';
+export { useForm, useAsync, runAsync, usePersistedForm, } from './composables/index.js';
 // Validation schemas - Zod schemas for forms and data validation
 export * from './schemas/index.js';

package/dist/lib/schemas/common.d.ts

@@ -246,14 +246,14 @@ export declare function paginatedResponseSchema<T extends z.ZodTypeAny>(itemSche
     pageSize: z.ZodNumber;
     totalPages: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
-    items: T["_output"][];
     page: number;
+    items: T["_output"][];
     pageSize: number;
     total: number;
     totalPages: number;
 }, {
-    items: T["_input"][];
     page: number;
+    items: T["_input"][];
     pageSize: number;
     total: number;
     totalPages: number;

package/dist/lib/types/layout.d.ts

@@ -235,8 +235,16 @@ export interface PublicLayoutProps {
     copyright?: string;
     /** Custom logo snippet */
     logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "THEME", "MY HOME") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
     /** Custom header end content */
     headerEnd?: Snippet;
+    /** Use strong accent border on footer (10px top border) */
+    strongFooterBorder?: boolean;
+    /** Use dark footer variant */
+    darkFooter?: boolean;
     /** Header search configuration */
     headerSearch?: HeaderSearchConfig;
     /** Main content */
@@ -332,6 +340,10 @@ export interface HeaderProps {
     /** Additional classes */
     class?: string;
 }
+/**
+ * Footer visual variant
+ */
+export type FooterVariant = 'default' | 'dark';
 /**
  * Props for Footer component
  */
@@ -342,6 +354,10 @@ export interface FooterProps {
     copyright?: string;
     /** Show logo in footer */
     showLogo?: boolean;
+    /** Use strong accent border (10px top border) */
+    strongBorder?: boolean;
+    /** Dark variant with brand colors */
+    variant?: FooterVariant;
     /** Custom content */
     children?: Snippet;
     /** Additional classes */

package/package.json

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