@classic-homes/theme-svelte 1.25.0 → 1.26.0

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

@@ -122,6 +122,18 @@ export function useMediaPlayer(getElement, options = {}) {
          */
         const handleReady = () => {
             waiting = false;
+            loading = false;
+            // A successful (re)load replaces an earlier failure
+            if (!media.error)
+                error = null;
+        };
+        /** A new load starts (e.g. "Try again" calling load()): forget the old failure. */
+        const handleLoadStart = () => {
+            error = null;
+            loading = true;
+        };
+        const handleEmptied = () => {
+            error = null;
         };
         const handleError = () => {
             error = media.error;
@@ -159,6 +171,8 @@ export function useMediaPlayer(getElement, options = {}) {
         media.addEventListener('canplaythrough', handleReady);
         media.addEventListener('loadeddata', handleReady);
         media.addEventListener('error', handleError);
+        media.addEventListener('loadstart', handleLoadStart);
+        media.addEventListener('emptied', handleEmptied);
         media.addEventListener('ratechange', handleRateChange);
         media.addEventListener('seeking', handleSeeking);
         media.addEventListener('seeked', handleSeeking);
@@ -190,6 +204,8 @@ export function useMediaPlayer(getElement, options = {}) {
             media.removeEventListener('canplaythrough', handleReady);
             media.removeEventListener('loadeddata', handleReady);
             media.removeEventListener('error', handleError);
+            media.removeEventListener('loadstart', handleLoadStart);
+            media.removeEventListener('emptied', handleEmptied);
             media.removeEventListener('ratechange', handleRateChange);
             media.removeEventListener('seeking', handleSeeking);
             media.removeEventListener('seeked', handleSeeking);
@@ -289,16 +305,24 @@ export function useMediaPlayer(getElement, options = {}) {
             return;
         media.playbackRate = rate;
     }
+    // Fullscreen and PiP requests reject when the browser refuses them (no user
+    // gesture, a permissions policy, an iframe without allowfullscreen). The
+    // state simply stays as it was, so the rejection is not worth surfacing.
     async function toggleFullscreen(container) {
         const target = container ?? getElement();
         if (!target)
             return;
-        if (document.fullscreenElement) {
-            await document.exitFullscreen();
-            return;
+        try {
+            if (document.fullscreenElement) {
+                await document.exitFullscreen();
+                return;
+            }
+            if (typeof target.requestFullscreen === 'function') {
+                await target.requestFullscreen();
+                return;
+            }
         }
-        if (typeof target.requestFullscreen === 'function') {
-            await target.requestFullscreen();
+        catch {
             return;
         }
         // iOS Safari exposes fullscreen only on the video element itself.
@@ -311,11 +335,16 @@ export function useMediaPlayer(getElement, options = {}) {
             return;
         if (!document.pictureInPictureEnabled)
             return;
-        if (document.pictureInPictureElement) {
-            await document.exitPictureInPicture();
+        try {
+            if (document.pictureInPictureElement) {
+                await document.exitPictureInPicture();
+            }
+            else {
+                await media.requestPictureInPicture();
+            }
         }
-        else {
-            await media.requestPictureInPicture();
+        catch {
+            // See toggleFullscreen
         }
     }
     function setTextTrack(index) {

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

@@ -38,6 +38,13 @@ export function useMediaZoom(options = {}) {
     let dragOrigin = { x: 0, y: 0, offsetX: 0, offsetY: 0 };
     let pinchStartDistance = 0;
     let pinchStartScale = 1;
+    /** Movement (px) beyond which a touch is a drag rather than a tap. */
+    const TAP_SLOP = 10;
+    /**
+     * Touches that may still count as a tap. A touch stops being one once it
+     * moves or another finger joins it, so lifting a pinch is never a double-tap.
+     */
+    const tapCandidates = new Map();
     function setScale(next) {
         const clamped = clamp(next, minScale, maxScale);
         if (clamped === scale)
@@ -85,6 +92,16 @@ export function useMediaZoom(options = {}) {
         let lastTapTime = 0;
         function handlePointerDown(event) {
             pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+            tapCandidates.set(event.pointerId, {
+                x: event.clientX,
+                y: event.clientY,
+                tap: pointers.size === 1,
+            });
+            if (pointers.size > 1) {
+                for (const candidate of tapCandidates.values())
+                    candidate.tap = false;
+                lastTapTime = 0;
+            }
             if (pointers.size === 2) {
                 pinchStartDistance = distanceBetweenPointers();
                 pinchStartScale = scale;
@@ -102,6 +119,11 @@ export function useMediaZoom(options = {}) {
             if (!pointers.has(event.pointerId))
                 return;
             pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+            const candidate = tapCandidates.get(event.pointerId);
+            if (candidate?.tap &&
+                Math.hypot(event.clientX - candidate.x, event.clientY - candidate.y) > TAP_SLOP) {
+                candidate.tap = false;
+            }
             if (pointers.size === 2 && pinchStartDistance > 0) {
                 event.preventDefault();
                 const ratio = distanceBetweenPointers() / pinchStartDistance;
@@ -116,6 +138,9 @@ export function useMediaZoom(options = {}) {
         }
         function endPointer(event) {
             pointers.delete(event.pointerId);
+            // pointerup keeps its candidate for handlePointerUpTap, which runs next
+            if (event.type !== 'pointerup')
+                tapCandidates.delete(event.pointerId);
             if (dragPointerId === event.pointerId) {
                 dragPointerId = null;
                 panning = false;
@@ -137,8 +162,14 @@ export function useMediaZoom(options = {}) {
         }
         /** Touch devices do not fire dblclick, so tap timing is measured directly. */
         function handlePointerUpTap(event) {
+            const candidate = tapCandidates.get(event.pointerId);
+            tapCandidates.delete(event.pointerId);
             if (event.pointerType !== 'touch')
                 return;
+            if (!candidate?.tap) {
+                lastTapTime = 0;
+                return;
+            }
             const now = event.timeStamp;
             if (now - lastTapTime < 300) {
                 toggle();
@@ -167,6 +198,7 @@ export function useMediaZoom(options = {}) {
                 node.removeEventListener('wheel', handleWheel);
                 node.removeEventListener('dblclick', handleDoubleClick);
                 pointers.clear();
+                tapCandidates.clear();
             },
         };
     }

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

@@ -6,7 +6,7 @@
  * - Draft restoration on mount
  * - Configurable expiration time
  * - Field exclusion from persistence (e.g., consent fields)
- * - Duplicate submission prevention with cooldown
+ * - Optional cooldown that ignores a repeat submit right after a success
  *
  * @example
  * ```svelte
@@ -56,7 +56,11 @@ export interface UsePersistedFormOptions<T extends z.ZodObject<z.ZodRawShape>> e
     onDraftRestored?: () => void;
     /** Debounce time for saving drafts in milliseconds (default: 500ms) */
     debounceMs?: number;
-    /** Cooldown time between submissions in milliseconds (default: 5000ms) */
+    /**
+     * After a successful submit, ignore further submits for this many
+     * milliseconds (a silent no-op: no error, no toast). Default: 0 (off).
+     * useForm already ignores a submit while one is in flight.
+     */
     submitCooldownMs?: number;
 }
 export interface UsePersistedFormReturn<T extends z.ZodObject<z.ZodRawShape>> extends UseFormReturn<T> {

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

@@ -6,7 +6,7 @@
  * - Draft restoration on mount
  * - Configurable expiration time
  * - Field exclusion from persistence (e.g., consent fields)
- * - Duplicate submission prevention with cooldown
+ * - Optional cooldown that ignores a repeat submit right after a success
  *
  * @example
  * ```svelte
@@ -44,10 +44,9 @@
  * ```
  */
 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;
+const DEFAULT_SUBMIT_COOLDOWN_MS = 0;
 /**
  * Check if localStorage is available (also checks for browser environment)
  */
@@ -146,10 +145,11 @@ export function usePersistedForm(options) {
     async function wrappedOnSubmit(data) {
         // Check for duplicate submission
         const now = Date.now();
-        if (now - lastSubmitTime < submitCooldownMs) {
-            toastStore.warning('Please wait before submitting again');
-            throw new Error('Submission cooldown active');
-        }
+        // A repeat within the cooldown is ignored, not an error: throwing made
+        // useForm show a global error, call onError and toast for a form that
+        // had just been saved.
+        if (submitCooldownMs > 0 && now - lastSubmitTime < submitCooldownMs)
+            return;
         try {
             await onSubmit(data);
             lastSubmitTime = now;

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

@@ -43,7 +43,12 @@
  * ```
  */
 export function useReducedMotion() {
-    let reducedMotion = $state(false);
+    // Read the preference up front (not only in the effect): an intro
+    // transition starts before effects run and would otherwise see `false`.
+    // The server has no preference, and no transition runs there.
+    let reducedMotion = $state(typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        : false);
     $effect(() => {
         if (typeof window === 'undefined')
             return;

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

@@ -94,12 +94,23 @@ export function useRovingTabindex(options = {}) {
             event.stopPropagation();
         }
     }
+    // Focus that lands on an item by other means (a click, a programmatic
+    // focus()) makes it the active item, so the next arrow key starts from it
+    function handleFocusIn(event) {
+        const items = getItems();
+        const index = items.findIndex((item) => item.contains(event.target));
+        if (index === -1 || index === activeIndex)
+            return;
+        activeIndex = index;
+        onIndexChange?.(index);
+    }
     /**
      * Svelte action to apply roving tabindex to a container
      */
     function action(node) {
         container = node;
         node.addEventListener('keydown', handleKeyDown);
+        node.addEventListener('focusin', handleFocusIn);
         return {
             update(newOptions) {
                 loop = newOptions.loop ?? true;
@@ -111,6 +122,7 @@ export function useRovingTabindex(options = {}) {
             },
             destroy() {
                 node.removeEventListener('keydown', handleKeyDown);
+                node.removeEventListener('focusin', handleFocusIn);
                 container = null;
             },
         };

package/dist/lib/index.d.ts

@@ -72,7 +72,7 @@ export { Studio, StudioBar, StudioOutline, StudioCanvas, StudioCanvasItem, Studi
 export { AspectRatio, Image, Video, Audio, MediaEmbed, MediaGrid, MediaCarousel, Lightbox, } from './components/media/index.js';
 export type { MediaGridColumns } from './components/media/MediaGrid.svelte';
 export type { DropdownMenuItem, DropdownMenuGroup, SelectOption, SelectGroup, Tab, FileMetadata, DataTableColumn, DataTableFilterFn, DataTableFilterOption, RadioOption, ComboboxOption, MultiSelectOption, SignatureData, SignatureStroke, SignaturePoint, SignatureMetadata, SignatureFont, SignatureValidationResult, MediaKind, MediaEmbedProvider, MediaSource, MediaTextTrack, MediaItemBase, ImageMediaItem, VideoMediaItem, AudioMediaItem, EmbedMediaItem, MediaItem, MediaAspectRatio, MediaFit, CloudflareStreamAccount, MatterportPlayerOptions, } from './types/components.js';
-export { createDataTable, type DataTableOptions, type DataTableRow, type DataTableInstance, type ColumnMeta, type BaseColumnMeta, type DataColumnMeta, type FilterableColumnMeta, type SelectionColumnMeta, type RowSelectionState, type ColumnVisibilityState, type ColumnFiltersState, type PaginationState, type DataTableProps, type DataTableCoreProps, type DataTablePaginationProps, type InferRowType, type FormatResult, getAlignClass, formatCellValue, getColumnValue, defaultGetRowId, DataTableToolbar, DataTableSearch, DataTableColumnVisibility, DataTableColumnFilter, DataTableFacetedFilter, DataTablePagination, DataTableVirtual, DataTableEditableCell, } from './components/data-table/index.js';
+export { createDataTable, type DataTableOptions, type DataTableRow, type DataTableInstance, type ColumnMeta, type BaseColumnMeta, type DataColumnMeta, type FilterableColumnMeta, type SelectionColumnMeta, type RowSelectionState, type ColumnVisibilityState, type ColumnFiltersState, type ColumnFilterValue, type PaginationState, type DataTableProps, type DataTableCoreProps, type DataTablePaginationProps, type InferRowType, type FormatResult, getAlignClass, formatCellValue, getColumnValue, defaultGetRowId, DataTableToolbar, DataTableSearch, DataTableColumnVisibility, DataTableColumnFilter, DataTableFacetedFilter, DataTablePagination, DataTableVirtual, DataTableEditableCell, } from './components/data-table/index.js';
 export { default as LogoMain } from './components/LogoMain.svelte';
 export { default as LoadingLogo } from './components/LoadingLogo.svelte';
 export { default as Avatar } from './components/Avatar.svelte';

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

@@ -4,6 +4,7 @@
  * Features:
  * - Auto-dismiss with configurable duration
  * - Manual dismiss support
+ * - Pause/resume of the auto-dismiss timer (hover or focus, WCAG 2.2.1)
  * - Proper timeout cleanup to prevent memory leaks
  * - Convenience methods for common toast types
  */
@@ -19,12 +20,24 @@ declare class ToastStore {
     toasts: Toast[];
     /** Map of toast IDs to their timeout handles for cleanup */
     private timeouts;
+    /** Auto-dismiss bookkeeping: when each running timer ends, or how long a paused one has left */
+    private deadlines;
+    private remaining;
     /**
      * Add a new toast notification
      * @param toast - Toast configuration without id
      * @returns The generated toast id
      */
     add(toast: ToastInput): string;
+    private startTimer;
+    /**
+     * Hold a toast's auto-dismiss timer, e.g. while it is hovered or focused,
+     * so it cannot disappear while being read or used. No-op for a persistent
+     * toast or one already paused.
+     */
+    pause(id: string): void;
+    /** Restart a paused toast's timer with the time it had left (at least 1s). */
+    resume(id: string): void;
     /**
      * Remove a toast by id
      * Also clears any pending auto-dismiss timeout

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

@@ -4,6 +4,7 @@
  * Features:
  * - Auto-dismiss with configurable duration
  * - Manual dismiss support
+ * - Pause/resume of the auto-dismiss timer (hover or focus, WCAG 2.2.1)
  * - Proper timeout cleanup to prevent memory leaks
  * - Convenience methods for common toast types
  */
@@ -23,6 +24,9 @@ class ToastStore {
         this.toasts = $state([]);
         /** Map of toast IDs to their timeout handles for cleanup */
         this.timeouts = new Map();
+        /** Auto-dismiss bookkeeping: when each running timer ends, or how long a paused one has left */
+        this.deadlines = new Map();
+        this.remaining = new Map();
     }
     /**
      * Add a new toast notification
@@ -35,14 +39,37 @@ class ToastStore {
         this.toasts = [...this.toasts, newToast];
         // Auto-dismiss unless duration is explicitly 0 (persistent)
         if (toast.duration !== 0) {
-            const duration = toast.duration ?? 5000;
-            const timeoutId = setTimeout(() => {
-                this.remove(id);
-            }, duration);
-            this.timeouts.set(id, timeoutId);
+            this.startTimer(id, toast.duration ?? 5000);
         }
         return id;
     }
+    startTimer(id, ms) {
+        this.deadlines.set(id, Date.now() + ms);
+        this.timeouts.set(id, setTimeout(() => this.remove(id), ms));
+    }
+    /**
+     * Hold a toast's auto-dismiss timer, e.g. while it is hovered or focused,
+     * so it cannot disappear while being read or used. No-op for a persistent
+     * toast or one already paused.
+     */
+    pause(id) {
+        const timeoutId = this.timeouts.get(id);
+        const deadline = this.deadlines.get(id);
+        if (timeoutId === undefined || deadline === undefined)
+            return;
+        clearTimeout(timeoutId);
+        this.timeouts.delete(id);
+        this.deadlines.delete(id);
+        this.remaining.set(id, Math.max(0, deadline - Date.now()));
+    }
+    /** Restart a paused toast's timer with the time it had left (at least 1s). */
+    resume(id) {
+        const left = this.remaining.get(id);
+        if (left === undefined)
+            return;
+        this.remaining.delete(id);
+        this.startTimer(id, Math.max(left, 1000));
+    }
     /**
      * Remove a toast by id
      * Also clears any pending auto-dismiss timeout
@@ -54,6 +81,8 @@ class ToastStore {
             clearTimeout(timeoutId);
             this.timeouts.delete(id);
         }
+        this.deadlines.delete(id);
+        this.remaining.delete(id);
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     /**
@@ -65,6 +94,8 @@ class ToastStore {
             clearTimeout(timeoutId);
         }
         this.timeouts.clear();
+        this.deadlines.clear();
+        this.remaining.clear();
         this.toasts = [];
     }
     /**

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

@@ -263,6 +263,8 @@ export interface ParsedEmbed {
     customerCode?: string;
     /** Host, when the URL used a custom Stream domain */
     domain?: string;
+    /** Privacy hash of an unlisted Vimeo video (`vimeo.com/<id>/<hash>` or `?h=`) */
+    hash?: string;
 }
 /**
  * Parse a YouTube, Vimeo, or Cloudflare Stream URL into a provider and video id.
@@ -285,6 +287,11 @@ export interface ParsedEmbed {
 export declare function parseEmbedUrl(url: string): ParsedEmbed | null;
 /** Options accepted when building an embed iframe URL. */
 export interface EmbedSrcOptions {
+    /**
+     * Privacy hash of an unlisted Vimeo video. A Vimeo `videoId` of the form
+     * `<id>/<hash>` (as in its share URL) is also accepted.
+     */
+    hash?: string;
     /** Route YouTube through `youtube-nocookie.com` (default `true`) */
     privacy?: boolean;
     /** Begin playing immediately — set when the user has clicked the facade */

package/dist/lib/utils/media.js

@@ -437,6 +437,7 @@ export function matterportTour(modelId, options = {}) {
 }
 const YOUTUBE_ID = /^[\w-]{11}$/;
 const VIMEO_ID = /^\d+$/;
+const VIMEO_HASH = /^[0-9a-f]+$/i;
 /**
  * Parse a YouTube, Vimeo, or Cloudflare Stream URL into a provider and video id.
  *
@@ -499,8 +500,18 @@ export function parseEmbedUrl(url) {
     }
     if (host === 'vimeo.com' || host === 'player.vimeo.com') {
         // player.vimeo.com/video/<id>, vimeo.com/<id>, vimeo.com/channels/x/<id>
-        const videoId = [...segments].reverse().find((segment) => VIMEO_ID.test(segment));
-        return videoId ? withStart({ provider: 'vimeo', videoId }, start) : null;
+        let idIndex = segments.length - 1;
+        while (idIndex >= 0 && !VIMEO_ID.test(segments[idIndex]))
+            idIndex -= 1;
+        if (idIndex === -1)
+            return null;
+        // An all-digit hash looks like an id: in vimeo.com/<id>/<hash> the id comes first
+        if (host === 'vimeo.com' && idIndex === 1 && VIMEO_ID.test(segments[0]))
+            idIndex = 0;
+        const videoId = segments[idIndex];
+        // Unlisted videos only play with their hash: vimeo.com/<id>/<hash> or ?h=<hash>
+        const hash = [parsed.searchParams.get('h'), segments[idIndex + 1]].find((candidate) => !!candidate && VIMEO_HASH.test(candidate));
+        return withStart({ provider: 'vimeo', videoId, ...(hash ? { hash } : {}) }, start);
     }
     return null;
 }
@@ -610,6 +621,10 @@ export function buildEmbedSrc(provider, videoId, options = {}) {
         return `https://${domain}/embed/${videoId}${query ? `?${query}` : ''}`;
     }
     // Vimeo
+    const [vimeoId, idHash] = videoId.split('/');
+    const hash = options.hash ?? idHash;
+    if (hash)
+        params.set('h', hash);
     if (autoplay)
         params.set('autoplay', '1');
     if (privacy)
@@ -618,7 +633,7 @@ export function buildEmbedSrc(provider, videoId, options = {}) {
     // Vimeo reads the start time from the fragment (#t=30s), not the query;
     // URLSearchParams would encode it as `%23t`, which Vimeo ignores.
     const fragment = start !== undefined ? `#t=${Math.floor(start)}s` : '';
-    return `https://player.vimeo.com/video/${videoId}${query ? `?${query}` : ''}${fragment}`;
+    return `https://player.vimeo.com/video/${vimeoId}${query ? `?${query}` : ''}${fragment}`;
 }
 /**
  * Poster image URL for an embedded video, when one can be derived without a

package/package.json

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