@classic-homes/theme-svelte 1.22.1 → 1.22.3

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

@@ -6,7 +6,7 @@
  * - Error handling with toast integration
  * - Success/error callbacks
  * - Retry functionality
- * - Abort/cancel support
+ * - Overlapping calls: only the latest call (and none after reset) updates state
  * - Debounce support
  *
  * @example
@@ -51,21 +51,35 @@ export function useAsync(options) {
     // Derived state
     const isSuccess = $derived(isExecuted && !error && !isLoading);
     const isError = $derived(isExecuted && !!error);
-    // Debounce timer
+    // Debounce timer, and the resolver of the call it is holding back
     let debounceTimer;
+    let pendingResolve;
+    // Id of the latest call; results from older calls are ignored
+    let callId = 0;
     /**
-     * Execute the async function
+     * Cancel a pending debounced call, settling its promise with undefined
      */
-    async function execute(...args) {
-        // Clear any pending debounce
+    function cancelPending() {
         if (debounceTimer) {
             clearTimeout(debounceTimer);
             debounceTimer = undefined;
         }
+        pendingResolve?.(undefined);
+        pendingResolve = undefined;
+    }
+    /**
+     * Execute the async function
+     */
+    async function execute(...args) {
+        // Clear any pending debounce
+        cancelPending();
         // If debounce is set, delay execution
         if (debounceMs && debounceMs > 0) {
             return new Promise((resolve) => {
+                pendingResolve = resolve;
                 debounceTimer = setTimeout(async () => {
+                    debounceTimer = undefined;
+                    pendingResolve = undefined;
                     const result = await executeImmediate(...args);
                     resolve(result);
                 }, debounceMs);
@@ -77,12 +91,16 @@ export function useAsync(options) {
      * Execute immediately without debounce
      */
     async function executeImmediate(...args) {
+        const id = ++callId;
         lastArgs = args;
         isLoading = true;
         error = undefined;
         isExecuted = true;
         try {
             const result = await fn(...args);
+            // A newer call (or reset) superseded this one: leave state alone
+            if (id !== callId)
+                return result;
             data = result;
             if (onSuccess) {
                 onSuccess(result);
@@ -93,6 +111,8 @@ export function useAsync(options) {
             return result;
         }
         catch (err) {
+            if (id !== callId)
+                return undefined;
             const normalizedError = err instanceof Error ? err : new Error(String(err));
             error = normalizedError;
             if (onError) {
@@ -104,7 +124,8 @@ export function useAsync(options) {
             return undefined;
         }
         finally {
-            isLoading = false;
+            if (id === callId)
+                isLoading = false;
         }
     }
     /**
@@ -121,11 +142,9 @@ export function useAsync(options) {
      * Reset state to initial values
      */
     function reset() {
-        // Clear any pending debounce
-        if (debounceTimer) {
-            clearTimeout(debounceTimer);
-            debounceTimer = undefined;
-        }
+        // Clear any pending debounce, and drop the result of any call in flight
+        cancelPending();
+        callId++;
         data = initialData;
         error = undefined;
         isLoading = false;
@@ -153,11 +172,11 @@ export function useAsync(options) {
     function clearError() {
         error = undefined;
     }
-    // Execute immediately if requested
-    if (immediate && immediateArgs) {
+    // Execute immediately if requested (zero-argument functions need no immediateArgs)
+    if (immediate) {
         // Use $effect-like behavior by queueing the execution
         queueMicrotask(() => {
-            execute(...immediateArgs);
+            execute(...(immediateArgs ?? []));
         });
     }
     return {

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

@@ -46,8 +46,9 @@ import { toastStore } from '../stores/toast.svelte.js';
  */
 export function useForm(options) {
     const { schema, initialValues, onSubmit, onError, showToastOnError = true, resetOnSuccess = false, errorMessage, successMessage, } = options;
-    // Deep clone to avoid reference issues
-    const cloneInitialValues = () => JSON.parse(JSON.stringify(initialValues));
+    // Deep clone to avoid reference issues. $state.snapshot keeps Date, Map, Set
+    // and File values (a JSON round-trip would turn a Date into a string).
+    const cloneInitialValues = () => $state.snapshot(initialValues);
     // Reactive state using Svelte 5 runes
     let data = $state(cloneInitialValues());
     let errors = $state({});
@@ -145,14 +146,20 @@ export function useForm(options) {
      * Validate the entire form
      */
     function validate() {
+        return parseForm() !== null;
+    }
+    /**
+     * Validate the entire form, returning the parsed (transformed) data or null
+     */
+    function parseForm() {
         const result = schema.safeParse(data);
         if (result.success) {
             errors = {};
-            return true;
+            return result.data;
         }
         else {
             errors = parseZodErrors(result.error);
-            return false;
+            return null;
         }
     }
     /**
@@ -160,12 +167,17 @@ export function useForm(options) {
      */
     async function handleSubmit(event) {
         event?.preventDefault();
+        // Ignore a second submit (e.g. a double click) while one is in flight
+        if (isSubmitting)
+            return;
         // Clear previous errors
         errors = {};
         globalError = '';
         isSubmitted = true;
-        // Validate all fields
-        if (!validate()) {
+        // Validate all fields. onSubmit gets the schema's output, so transforms,
+        // coercions and defaults apply, as a plain object rather than the proxy.
+        const parsed = parseForm();
+        if (parsed === null) {
             const errorCount = Object.keys(errors).length;
             if (showToastOnError) {
                 toastStore.error(errorMessage || `Please fix ${errorCount} validation error${errorCount > 1 ? 's' : ''}`);
@@ -174,7 +186,7 @@ export function useForm(options) {
         }
         isSubmitting = true;
         try {
-            await onSubmit(data);
+            await onSubmit(parsed);
             if (successMessage) {
                 toastStore.success(successMessage);
             }

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

@@ -75,8 +75,11 @@ export function usePersistedForm(options) {
     let draftRestored = $state(false);
     let lastSubmitTime = $state(0);
     let debounceTimer = null;
+    // Serialized persistable data last written (or deliberately not written).
+    // null after clearDraft, so the next edit is always saved.
+    let lastPersisted = null;
     // Store original initialValues for reset (before draft merge)
-    const originalInitialValues = JSON.parse(JSON.stringify(initialValues));
+    const originalInitialValues = $state.snapshot(initialValues);
     /**
      * Load draft from localStorage
      */
@@ -104,6 +107,12 @@ export function usePersistedForm(options) {
      * Clear draft from localStorage
      */
     function clearDraft() {
+        // Drop a pending save, or it would write the draft back after clearing
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+            debounceTimer = null;
+        }
+        lastPersisted = null;
         if (!isStorageAvailable())
             return;
         try {
@@ -127,9 +136,9 @@ export function usePersistedForm(options) {
                 });
             }
             // Merge draft with initial values (keeps excluded fields at defaults)
-            return { ...JSON.parse(JSON.stringify(initialValues)), ...draft };
+            return { ...$state.snapshot(initialValues), ...draft };
         }
-        return JSON.parse(JSON.stringify(initialValues));
+        return $state.snapshot(initialValues);
     }
     /**
      * Wrapped onSubmit with cooldown and draft clearing
@@ -144,8 +153,10 @@ export function usePersistedForm(options) {
         try {
             await onSubmit(data);
             lastSubmitTime = now;
-            // Clear draft on successful submission
+            // Clear draft on successful submission. Treat the start values as
+            // persisted so a resetOnSuccess back to them does not save a new draft.
             clearDraft();
+            lastPersisted = startSerialized;
         }
         catch (error) {
             // Reset cooldown on error to allow retry
@@ -154,16 +165,17 @@ export function usePersistedForm(options) {
         }
     }
     // Create base form with potentially restored initial values
+    const startValues = getInitialValues();
     const baseForm = useForm({
         ...baseOptions,
-        initialValues: getInitialValues(),
+        initialValues: startValues,
         onSubmit: wrappedOnSubmit,
     });
     /**
      * Get data to persist (excludes specified fields)
      */
-    function getDataToPersist() {
-        const dataCopy = { ...baseForm.data };
+    function getDataToPersist(values = baseForm.data) {
+        const dataCopy = { ...values };
         for (const field of excludeFields) {
             delete dataCopy[field];
         }
@@ -192,13 +204,27 @@ export function usePersistedForm(options) {
             }
         }, debounceMs);
     }
+    // Edits made with bind:value never mark fields dirty, so changes are
+    // detected by content rather than by isDirty.
+    const startSerialized = JSON.stringify(getDataToPersist(startValues));
+    const originalSerialized = JSON.stringify(getDataToPersist(originalInitialValues));
+    lastPersisted = startSerialized;
     // Watch for form changes and save draft
     $effect(() => {
         // Access data to create dependency
-        JSON.stringify(baseForm.data);
-        if (baseForm.isDirty) {
+        const serialized = JSON.stringify(getDataToPersist());
+        if (serialized === lastPersisted)
+            return;
+        if (serialized === originalSerialized) {
+            // Edited back to the initial values: there is nothing to restore, so
+            // drop the stored draft (and any pending save) instead of leaving a
+            // stale one behind.
+            clearDraft();
+        }
+        else {
             saveDraft();
         }
+        lastPersisted = serialized;
     });
     /**
      * Extended reset that also clears the draft
@@ -209,9 +235,10 @@ export function usePersistedForm(options) {
         baseForm.reset();
         // Then overwrite data with original initialValues (not the draft-merged ones)
         // We modify the data object directly to avoid triggering markDirty
-        Object.assign(baseForm.data, JSON.parse(JSON.stringify(originalInitialValues)));
+        Object.assign(baseForm.data, $state.snapshot(originalInitialValues));
         draftRestored = false;
         clearDraft();
+        lastPersisted = JSON.stringify(getDataToPersist());
     }
     /**
      * Dismiss the draft restored notification

package/dist/lib/stores/sidebar.svelte.d.ts

@@ -98,6 +98,12 @@ declare class SidebarStore {
      * This bypasses the persisted state check but doesn't persist the changes
      */
     forceExpandSections(sectionIds: string[]): void;
+    /**
+     * Expand the sections and items that hold the current page so its active
+     * item is visible. Like a search expansion it is not persisted; unlike one
+     * it is kept when a search clears. A no-op when all are already expanded.
+     */
+    revealExpansion(sectionIds: string[], itemIds: string[]): void;
     /**
      * Undo search force-expansions, restoring the expansion state from before the
      * search (including any toggles made while it was active). Call when the

package/dist/lib/stores/sidebar.svelte.js

@@ -250,6 +250,21 @@ class SidebarStore {
         this.expandedSections = newSet;
         // Don't persist - this is temporary for search
     }
+    /**
+     * Expand the sections and items that hold the current page so its active
+     * item is visible. Like a search expansion it is not persisted; unlike one
+     * it is kept when a search clears. A no-op when all are already expanded.
+     */
+    revealExpansion(sectionIds, itemIds) {
+        const withAll = (set, ids) => ids.every((id) => set.has(id)) ? set : new Set([...set, ...ids]);
+        this.expandedSections = withAll(this.expandedSections, sectionIds);
+        this.expandedItems = withAll(this.expandedItems, itemIds);
+        const snap = __classPrivateFieldGet(this, _SidebarStore_searchSnapshot, "f");
+        if (snap) {
+            snap.sections = withAll(snap.sections, sectionIds);
+            snap.items = withAll(snap.items, itemIds);
+        }
+    }
     /**
      * Undo search force-expansions, restoring the expansion state from before the
      * search (including any toggles made while it was active). Call when the

package/dist/lib/stores/toast.svelte.js

@@ -7,6 +7,17 @@
  * - Proper timeout cleanup to prevent memory leaks
  * - Convenience methods for common toast types
  */
+let fallbackIdCounter = 0;
+/**
+ * crypto.randomUUID only exists in secure contexts (https, localhost), so
+ * fall back on plain-http origins such as a LAN IP or a staging host.
+ */
+function createToastId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `toast-${Date.now()}-${++fallbackIdCounter}`;
+}
 class ToastStore {
     constructor() {
         this.toasts = $state([]);
@@ -19,7 +30,7 @@ class ToastStore {
      * @returns The generated toast id
      */
     add(toast) {
-        const id = crypto.randomUUID();
+        const id = createToastId();
         const newToast = { ...toast, id };
         this.toasts = [...this.toasts, newToast];
         // Auto-dismiss unless duration is explicitly 0 (persistent)

package/dist/lib/utils/date.d.ts

@@ -77,7 +77,9 @@ export interface ParseResult {
  * - ISO: `2024-03-15`, `2024-03-15T14:30`
  * - US: `03/15/2024`, `3/15/24`, `03-15-2024`
  * - Natural: `Mar 15, 2024`, `March 15 2024`
- * - With time: `03/15/2024 2:30 PM`, `03/15/2024 14:30`
+ * - With time: `03/15/2024 2:30 PM`, `03/15/2024 14:30`, `Mar 15, 2024 at 2:30 PM`
+ *
+ * Out-of-range parts (`02/30/2024`, `25:99`) are rejected, not rolled over.
  *
  * @param input - The user-typed date string
  * @param options - Parsing options

package/dist/lib/utils/date.js

@@ -104,6 +104,37 @@ export function isSameDay(date1, date2) {
         date1.getMonth() === date2.getMonth() &&
         date1.getDate() === date2.getDate());
 }
+/**
+ * Build a local Date, or null when a part is out of range. `new Date()` rolls
+ * overflow into the next unit (Feb 30 -> Mar 1, 25:00 -> next day), so the
+ * date parts must round-trip and the time parts must be in range.
+ */
+function buildDate(year, monthIndex, day, hour, minute) {
+    if (hour > 23 || minute > 59)
+        return null;
+    const date = new Date(year, monthIndex, day, hour, minute);
+    if (date.getFullYear() !== year || date.getMonth() !== monthIndex || date.getDate() !== day) {
+        return null;
+    }
+    return date;
+}
+/**
+ * Convert a typed hour (with optional AM/PM) to 0-23, or null when out of
+ * range for its clock (e.g. `13 PM`, `0 AM`).
+ */
+function toHour24(hour, meridiem) {
+    if (!hour)
+        return 0;
+    const parsed = parseInt(hour);
+    if (!meridiem)
+        return parsed;
+    if (parsed < 1 || parsed > 12)
+        return null;
+    const isPm = meridiem.toUpperCase() === 'PM';
+    if (parsed === 12)
+        return isPm ? 12 : 0;
+    return isPm ? parsed + 12 : parsed;
+}
 /**
  * Parse a user-typed date input string into a Date object.
  *
@@ -111,7 +142,9 @@ export function isSameDay(date1, date2) {
  * - ISO: `2024-03-15`, `2024-03-15T14:30`
  * - US: `03/15/2024`, `3/15/24`, `03-15-2024`
  * - Natural: `Mar 15, 2024`, `March 15 2024`
- * - With time: `03/15/2024 2:30 PM`, `03/15/2024 14:30`
+ * - With time: `03/15/2024 2:30 PM`, `03/15/2024 14:30`, `Mar 15, 2024 at 2:30 PM`
+ *
+ * Out-of-range parts (`02/30/2024`, `25:99`) are rejected, not rolled over.
  *
  * @param input - The user-typed date string
  * @param options - Parsing options
@@ -128,17 +161,17 @@ export function parseDateInput(input, options) {
     }
     // Try parsing with various patterns
     let date = null;
-    let hasTime = false;
+    let matched = false;
     // Pattern 1: ISO format (2024-03-15 or 2024-03-15T14:30)
     const isoMatch = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:[T ](\d{1,2}):(\d{2})(?::(\d{2}))?)?$/);
     if (isoMatch) {
         const [, year, month, day, hour, minute] = isoMatch;
-        date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day), hour ? parseInt(hour) : 0, minute ? parseInt(minute) : 0);
-        hasTime = !!hour;
+        matched = true;
+        date = buildDate(parseInt(year), parseInt(month) - 1, parseInt(day), hour ? parseInt(hour) : 0, minute ? parseInt(minute) : 0);
     }
     // Pattern 2: US format with slashes or dashes (03/15/2024, 3/15/24, 03-15-2024)
-    if (!date) {
-        const usMatch = trimmed.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{2,4})(?:\s+(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
+    if (!matched) {
+        const usMatch = trimmed.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{2,4})(?:\s+(?:at\s+)?(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
         if (usMatch) {
             const [, month, day, yearStr, hour, minute, meridiem] = usMatch;
             let year = parseInt(yearStr);
@@ -146,22 +179,16 @@ export function parseDateInput(input, options) {
             if (year < 100) {
                 year += year < 50 ? 2000 : 1900;
             }
-            let parsedHour = hour ? parseInt(hour) : 0;
-            if (meridiem) {
-                const upper = meridiem.toUpperCase();
-                if (upper === 'PM' && parsedHour !== 12) {
-                    parsedHour += 12;
-                }
-                else if (upper === 'AM' && parsedHour === 12) {
-                    parsedHour = 0;
-                }
-            }
-            date = new Date(year, parseInt(month) - 1, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
-            hasTime = !!hour;
+            matched = true;
+            const parsedHour = toHour24(hour, meridiem);
+            date =
+                parsedHour === null
+                    ? null
+                    : buildDate(year, parseInt(month) - 1, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
         }
     }
     // Pattern 3: Natural format (Mar 15, 2024 or March 15 2024)
-    if (!date) {
+    if (!matched) {
         const monthNames = {
             jan: 0,
             january: 0,
@@ -188,23 +215,16 @@ export function parseDateInput(input, options) {
             dec: 11,
             december: 11,
         };
-        const naturalMatch = trimmed.match(/^([a-zA-Z]+)\s+(\d{1,2}),?\s+(\d{4})(?:\s+(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
+        const naturalMatch = trimmed.match(/^([a-zA-Z]+)\s+(\d{1,2}),?\s+(\d{4})(?:\s+(?:at\s+)?(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
         if (naturalMatch) {
             const [, monthStr, day, year, hour, minute, meridiem] = naturalMatch;
             const monthNum = monthNames[monthStr.toLowerCase()];
             if (monthNum !== undefined) {
-                let parsedHour = hour ? parseInt(hour) : 0;
-                if (meridiem) {
-                    const upper = meridiem.toUpperCase();
-                    if (upper === 'PM' && parsedHour !== 12) {
-                        parsedHour += 12;
-                    }
-                    else if (upper === 'AM' && parsedHour === 12) {
-                        parsedHour = 0;
-                    }
-                }
-                date = new Date(parseInt(year), monthNum, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
-                hasTime = !!hour;
+                const parsedHour = toHour24(hour, meridiem);
+                date =
+                    parsedHour === null
+                        ? null
+                        : buildDate(parseInt(year), monthNum, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
             }
         }
     }
@@ -216,8 +236,8 @@ export function parseDateInput(input, options) {
             error: 'Invalid date format. Try MM/DD/YYYY or YYYY-MM-DD',
         };
     }
-    // If dateOnly mode and time was provided, still accept it but set time to midnight
-    if (options?.dateOnly && !hasTime) {
+    // In dateOnly mode a typed time is accepted but reset to midnight
+    if (options?.dateOnly) {
         date.setHours(0, 0, 0, 0);
     }
     return { date, isValid: true };

package/dist/lib/utils/form.d.ts

@@ -11,7 +11,8 @@
 export declare function generateId(prefix?: string): string;
 /**
  * Computes the aria-describedby attribute value based on hint and error states.
- * Returns undefined if neither hint nor error is present.
+ * Returns undefined if neither hint nor error is present. The hint is left out
+ * while an error shows, since form fields render the error in its place.
  *
  * @param hintId - The ID of the hint element
  * @param errorId - The ID of the error element

package/dist/lib/utils/form.js

@@ -13,7 +13,8 @@ export function generateId(prefix = 'field') {
 }
 /**
  * Computes the aria-describedby attribute value based on hint and error states.
- * Returns undefined if neither hint nor error is present.
+ * Returns undefined if neither hint nor error is present. The hint is left out
+ * while an error shows, since form fields render the error in its place.
  *
  * @param hintId - The ID of the hint element
  * @param errorId - The ID of the error element
@@ -23,7 +24,7 @@ export function generateId(prefix = 'field') {
  */
 export function computeDescribedBy(hintId, errorId, hasHint, hasError) {
     const ids = [];
-    if (hasHint && hintId)
+    if (hasHint && !hasError && hintId)
         ids.push(hintId);
     if (hasError && errorId)
         ids.push(errorId);

package/package.json

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