@classic-homes/theme-svelte 1.40.0 → 1.41.0

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