@classic-homes/theme-svelte 1.22.1 → 1.22.2

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.2",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",