@classic-homes/theme-svelte 1.40.0 → 1.42.1

package/dist/lib/components/DataPanel.svelte

@@ -356,6 +356,23 @@
     }
   });
 
+  /**
+   * Clamp a detached position so the panel (its header above all) stays inside
+   * the current viewport. The panel renders at `min(size, 100%)`, so clamp
+   * against that visible size: an oversized panel then pins to 0,0.
+   * Mirrors the React DataPanel's restore and window-resize clamping.
+   */
+  function clampDetachedPosition(position: Position, size: Size): Position {
+    const vw = layoutViewportWidth();
+    const vh = window.innerHeight;
+    return constrainPosition(
+      position,
+      { width: Math.min(size.width, vw), height: Math.min(size.height, vh) },
+      vw,
+      vh
+    );
+  }
+
   // Initialize from persistence on mount
   onMount(() => {
     // Update viewport dimensions
@@ -370,6 +387,13 @@
       viewportWidth = layoutViewportWidth();
       viewportHeight = window.innerHeight;
       cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
+      // Keep a detached panel reachable after the window shrinks
+      if (mode === 'detached') {
+        const clamped = clampDetachedPosition(detachedPosition, detachedSize);
+        if (clamped.x !== detachedPosition.x || clamped.y !== detachedPosition.y) {
+          detachedPosition = clamped;
+        }
+      }
     };
     window.addEventListener('resize', handleResize);
 
@@ -402,6 +426,11 @@
       }
     }
 
+    // A position restored from storage may have been saved on a larger screen
+    if (persistKey) {
+      detachedPosition = clampDetachedPosition(detachedPosition, detachedSize);
+    }
+
     // Escape-to-close is handled by useEscapeKey; focus trapping by useFocusTrap.
 
     return () => {

package/dist/lib/components/FileUpload.svelte

@@ -15,6 +15,7 @@
    */
   import type { FileMetadata, MediaItem } from '../types/components.js';
   import { cn } from '../utils.js';
+  import { acceptLabel, matchesAccept } from '../utils/file-accept.js';
   import { formatDuration } from '../utils/media.js';
   import Button from './Button.svelte';
   import Lightbox from './media/Lightbox.svelte';
@@ -29,7 +30,12 @@
     maxFiles?: number;
     /** Maximum file size in bytes (default: 10MB) */
     maxSizeBytes?: number;
-    /** Accepted MIME types */
+    /**
+     * Accepted file types, as `<input accept>` entries: MIME types
+     * (`application/pdf`), wildcards (`image/*`) or extensions (`.dxf`,
+     * matched case-insensitively against the file name). A file passes when
+     * any entry matches.
+     */
     acceptedTypes?: string[];
     /** Whether upload is disabled */
     disabled?: boolean;
@@ -107,29 +113,9 @@
   /**
    * Readable label for the accepted types shown in the drop zone.
    * Uses the explicit `typesLabel` when provided, otherwise groups the
-   * accepted MIME types into friendly names (Images, PDF, Videos, ...).
+   * accepted types into friendly names (Images, PDF, Videos, DXF, ...).
    */
-  const acceptedTypesLabel = $derived.by(() => {
-    if (typesLabel) return typesLabel;
-
-    const groups: string[] = [];
-    const add = (name: string) => {
-      if (!groups.includes(name)) groups.push(name);
-    };
-
-    for (const type of acceptedTypes) {
-      if (type.startsWith('image/')) add('Images');
-      else if (type === 'application/pdf') add('PDF');
-      else if (type.startsWith('video/')) add('Videos');
-      else if (type.startsWith('audio/')) add('Audio');
-      else {
-        const subtype = type.split('/')[1];
-        add(subtype ? subtype.toUpperCase() : type);
-      }
-    }
-
-    return groups.join(', ');
-  });
+  const acceptedTypesLabel = $derived(typesLabel || acceptLabel(acceptedTypes));
 
   // Helper to generate unique ID
   function generateId(): string {
@@ -143,17 +129,11 @@
       return `File "${file.name}" exceeds maximum size of ${maxMB}MB`;
     }
 
-    // Check if file type is accepted
-    const isAccepted = acceptedTypes.some((type) => {
-      if (type.endsWith('/*')) {
-        const category = type.slice(0, -2);
-        return file.type.startsWith(category);
-      }
-      return file.type === type;
-    });
-
-    if (!isAccepted) {
-      return `File type "${file.type}" is not allowed`;
+    // Same rules as the native `accept` attribute: extensions, wildcards, MIME types
+    if (!matchesAccept(file, acceptedTypes)) {
+      return file.type
+        ? `File type "${file.type}" is not allowed`
+        : `File "${file.name}" is not an allowed type`;
     }
 
     return null;

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

@@ -22,7 +22,12 @@ interface Props {
     maxFiles?: number;
     /** Maximum file size in bytes (default: 10MB) */
     maxSizeBytes?: number;
-    /** Accepted MIME types */
+    /**
+     * Accepted file types, as `<input accept>` entries: MIME types
+     * (`application/pdf`), wildcards (`image/*`) or extensions (`.dxf`,
+     * matched case-insensitively against the file name). A file passes when
+     * any entry matches.
+     */
     acceptedTypes?: string[];
     /** Whether upload is disabled */
     disabled?: boolean;

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

@@ -15,13 +15,19 @@ function getFocusableElements(container) {
     const elements = container.querySelectorAll(FOCUSABLE_SELECTOR);
     return Array.from(elements).filter((el) => 
     // tabindex="-1" on a natively focusable element (roving-tabindex radios,
-    // toolbar buttons) takes it out of the Tab order, so it can't be the
-    // trap's first or last stop.
+    // toolbar buttons) takes it out of the Tab order, as do `inert`, `hidden`
+    // and a disabled <fieldset> ancestor, so none can be the trap's first or
+    // last stop.
     el.tabIndex >= 0 &&
-        !el.closest('[inert]') &&
+        !el.matches(':disabled') &&
+        !el.closest('[inert],[hidden]') &&
         el.offsetParent !== null &&
         getComputedStyle(el).visibility !== 'hidden');
 }
+/** True when `a` comes before `b` in document order. */
+function precedes(a, b) {
+    return Boolean(a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING);
+}
 /**
  * Creates a focus trap action for use with Svelte's use: directive.
  *
@@ -53,6 +59,7 @@ export function useFocusTrap(options = {}) {
     let container = $state(null);
     let previousActiveElement = null;
     let trapped = false;
+    let addedTabIndexTo = null;
     function isActive() {
         const active = currentOptions.active;
         return typeof active === 'function' ? active() : (active ?? true);
@@ -61,21 +68,39 @@ export function useFocusTrap(options = {}) {
         if (!trapped || event.key !== 'Tab' || !container)
             return;
         const preventScroll = currentOptions.preventScroll ?? false;
+        // Focus outside the container (e.g. a portaled nested popover) is not
+        // ours to move; the nested overlay manages its own Tab order.
+        const current = document.activeElement;
+        if (!current || !container.contains(current))
+            return;
         const focusableElements = getFocusableElements(container);
-        if (focusableElements.length === 0)
+        // Nothing tabbable: keep focus on the container instead of letting Tab
+        // walk out of the trap.
+        if (focusableElements.length === 0) {
+            event.preventDefault();
+            container.focus({ preventScroll });
             return;
+        }
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
+        // Focus on the container itself: enter the tab sequence at the matching end.
+        if (current === container) {
+            event.preventDefault();
+            (event.shiftKey ? lastElement : firstElement).focus({ preventScroll });
+            return;
+        }
         if (event.shiftKey) {
-            // Shift + Tab: if on first element, move to last
-            if (document.activeElement === firstElement) {
+            // Shift + Tab from the first stop, or from a non-tabbable element before
+            // it (e.g. a clicked tabindex=-1 control), wraps to the last.
+            if (current === firstElement || precedes(current, firstElement)) {
                 event.preventDefault();
                 lastElement.focus({ preventScroll });
             }
         }
         else {
-            // Tab: if on last element, move to first
-            if (document.activeElement === lastElement) {
+            // Tab from the last stop, or from a non-tabbable element after it,
+            // wraps to the first.
+            if (current === lastElement || precedes(lastElement, current)) {
                 event.preventDefault();
                 firstElement.focus({ preventScroll });
             }
@@ -87,21 +112,27 @@ export function useFocusTrap(options = {}) {
         trapped = true;
         // Save current active element to return focus later
         previousActiveElement = document.activeElement;
-        // Focus initial element
+        // Focus initial element; an empty trap focuses the container itself,
+        // which needs a tabindex for that (removed again on deactivate).
         const preventScroll = currentOptions.preventScroll ?? false;
         const focusableElements = getFocusableElements(container);
-        if (focusableElements.length > 0) {
-            let elementToFocus = null;
-            if (currentOptions.initialFocus) {
-                elementToFocus = container.querySelector(currentOptions.initialFocus);
-            }
-            if (!elementToFocus) {
-                elementToFocus = focusableElements[0];
+        let elementToFocus = null;
+        if (currentOptions.initialFocus) {
+            elementToFocus = container.querySelector(currentOptions.initialFocus);
+        }
+        if (!elementToFocus) {
+            elementToFocus = focusableElements[0] ?? null;
+        }
+        if (!elementToFocus) {
+            if (!container.hasAttribute('tabindex')) {
+                container.setAttribute('tabindex', '-1');
+                addedTabIndexTo = container;
             }
-            requestAnimationFrame(() => {
-                elementToFocus?.focus({ preventScroll });
-            });
+            elementToFocus = container;
         }
+        requestAnimationFrame(() => {
+            elementToFocus?.focus({ preventScroll });
+        });
         document.addEventListener('keydown', handleKeyDown);
     }
     function deactivate() {
@@ -109,6 +140,8 @@ export function useFocusTrap(options = {}) {
             return;
         trapped = false;
         document.removeEventListener('keydown', handleKeyDown);
+        addedTabIndexTo?.removeAttribute('tabindex');
+        addedTabIndexTo = null;
         // Return focus when trap is deactivated
         const preventScroll = currentOptions.preventScroll ?? false;
         const elementToReturn = currentOptions.returnFocusTo ?? previousActiveElement;

package/dist/lib/index.d.ts

@@ -116,6 +116,7 @@ export type { PanelEdge, PanelMode, PanelVariant, SnapPoint, CardConfig, Positio
 export { cn } from './utils.js';
 export { parseDate, toISOString, formatDate, formatDateTime, isSameDay } from './utils/date.js';
 export { generateId, computeDescribedBy } from './utils/form.js';
+export { matchesAccept, acceptLabel, type AcceptableFile } from './utils/file-accept.js';
 export { formatDuration, formatDurationSpoken, inferMediaKind, parseEmbedUrl, buildEmbedSrc, getEmbedThumbnail, getMediaThumbnail, getMediaLabel, isTimeBasedMedia, isSpatialMedia, isHlsSource, resolveAspectRatio, toMediaSources, HLS_MIME_TYPE, DASH_MIME_TYPE, type ParsedEmbed, type EmbedSrcOptions, } from './utils/media.js';
 export { cloudflareStream, cloudflareStreamUrls, cloudflareStreamThumbnail, cloudflareStreamHost, type CloudflareStreamItemOptions, type CloudflareStreamUrlOptions, type CloudflareStreamUrls, type CloudflareStreamThumbnailOptions, } from './utils/media.js';
 export { matterportTour, buildMatterportSrc, fetchMatterportMetadata, type MatterportTourOptions, type MatterportMetadata, } from './utils/media.js';

package/dist/lib/index.js

@@ -147,6 +147,7 @@ export { cn } from './utils.js';
 export { parseDate, toISOString, formatDate, formatDateTime, isSameDay } from './utils/date.js';
 // Form utilities
 export { generateId, computeDescribedBy } from './utils/form.js';
+export { matchesAccept, acceptLabel } from './utils/file-accept.js';
 // Media utilities
 export { formatDuration, formatDurationSpoken, inferMediaKind, parseEmbedUrl, buildEmbedSrc, getEmbedThumbnail, getMediaThumbnail, getMediaLabel, isTimeBasedMedia, isSpatialMedia, isHlsSource, resolveAspectRatio, toMediaSources, HLS_MIME_TYPE, DASH_MIME_TYPE, } from './utils/media.js';
 // Cloudflare Stream helpers

package/dist/lib/utils/file-accept.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Matching and labelling for a list of HTML `accept` entries, as used by
+ * `FileUpload`'s `acceptedTypes`. Mirrors the native `<input accept>` rules:
+ *
+ * - `.dxf` matches a file whose name ends in `.dxf`, case-insensitively
+ *   (whatever MIME type the browser guessed, often `application/octet-stream` or '')
+ * - `image/*` matches any MIME type in the `image` major type
+ * - `application/pdf` matches that MIME type exactly, case-insensitively
+ *
+ * A file is accepted when any entry matches. An empty list accepts everything,
+ * as an absent `accept` attribute does.
+ */
+/** The parts of a `File` the matcher reads. */
+export interface AcceptableFile {
+    name: string;
+    type: string;
+}
+/** Whether `file` matches any of the `accept` entries. */
+export declare function matchesAccept(file: AcceptableFile, accept: readonly string[]): boolean;
+/**
+ * Readable label for `accept` entries: MIME groups become friendly names
+ * (Images, PDF, Videos, Audio), other MIME types their uppercased subtype and
+ * extensions their uppercased name (`.dxf` → DXF). Duplicates collapse, so
+ * `['application/pdf', '.pdf']` reads "PDF".
+ */
+export declare function acceptLabel(accept: readonly string[]): string;

package/dist/lib/utils/file-accept.js

@@ -0,0 +1,67 @@
+/**
+ * Matching and labelling for a list of HTML `accept` entries, as used by
+ * `FileUpload`'s `acceptedTypes`. Mirrors the native `<input accept>` rules:
+ *
+ * - `.dxf` matches a file whose name ends in `.dxf`, case-insensitively
+ *   (whatever MIME type the browser guessed, often `application/octet-stream` or '')
+ * - `image/*` matches any MIME type in the `image` major type
+ * - `application/pdf` matches that MIME type exactly, case-insensitively
+ *
+ * A file is accepted when any entry matches. An empty list accepts everything,
+ * as an absent `accept` attribute does.
+ */
+function entries(accept) {
+    return accept.map((entry) => entry.trim().toLowerCase()).filter(Boolean);
+}
+/** Whether `file` matches any of the `accept` entries. */
+export function matchesAccept(file, accept) {
+    const list = entries(accept);
+    if (list.length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.trim().toLowerCase();
+    return list.some((entry) => {
+        if (entry.startsWith('.'))
+            return name.endsWith(entry) && name.length > entry.length;
+        if (entry === '*' || entry === '*/*')
+            return true;
+        if (entry.endsWith('/*'))
+            return type.startsWith(entry.slice(0, -1));
+        return type === entry;
+    });
+}
+/**
+ * Readable label for `accept` entries: MIME groups become friendly names
+ * (Images, PDF, Videos, Audio), other MIME types their uppercased subtype and
+ * extensions their uppercased name (`.dxf` → DXF). Duplicates collapse, so
+ * `['application/pdf', '.pdf']` reads "PDF".
+ */
+export function acceptLabel(accept) {
+    const groups = [];
+    const add = (label) => {
+        if (!groups.includes(label))
+            groups.push(label);
+    };
+    for (const raw of accept) {
+        const type = raw.trim().toLowerCase();
+        if (!type)
+            continue;
+        if (type.startsWith('.'))
+            add(type.slice(1).toUpperCase());
+        else if (type === '*' || type === '*/*')
+            add('Any file');
+        else if (type.startsWith('image/'))
+            add('Images');
+        else if (type === 'application/pdf')
+            add('PDF');
+        else if (type.startsWith('video/'))
+            add('Videos');
+        else if (type.startsWith('audio/'))
+            add('Audio');
+        else {
+            const subtype = type.split('/')[1];
+            add(subtype ? subtype.toUpperCase() : raw.trim());
+        }
+    }
+    return groups.join(', ');
+}

package/package.json

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