@classic-homes/theme-svelte 1.39.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/components/FilterToolbar.svelte

@@ -6,6 +6,8 @@
   import FilterPanel from './FilterPanel.svelte';
   import Icon from './Icon.svelte';
   import Toolbar from './Toolbar.svelte';
+  import ToolbarCount from './ToolbarCount.svelte';
+  import type { ToolbarCountProps } from '../utils/result-count.js';
 
   /**
    * FilterToolbar - a Toolbar that folds its filter controls behind a
@@ -33,7 +35,9 @@
     filterCount: number;
     /** Filters currently narrowing results (button badge) */
     activeCount?: number;
-    /** Result count / summary text, after the filters or the button */
+    /** Result count, after the filters or the button (see `ToolbarCount`) */
+    count?: ToolbarCountProps;
+    /** Other summary text after the count (inherits the strip color; `text-toolbar-muted` to dim) */
     summary?: Snippet;
     /** Right-aligned cluster (view toggles etc.) */
     end?: Snippet;
@@ -54,6 +58,7 @@
     filters,
     filterCount,
     activeCount = 0,
+    count,
     summary,
     end: endSnippet,
     onClear,
@@ -99,6 +104,7 @@
     {:else}
       {@render filters({ inline: true })}
     {/if}
+    {#if count}<ToolbarCount {...count} />{/if}
     {@render summary?.()}
   </Toolbar>
 

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ToolbarCountProps } from '../utils/result-count.js';
 /**
  * FilterToolbar - a Toolbar that folds its filter controls behind a
  * "Filters" button once there are too many to sit inline.
@@ -27,7 +28,9 @@ interface Props {
     filterCount: number;
     /** Filters currently narrowing results (button badge) */
     activeCount?: number;
-    /** Result count / summary text, after the filters or the button */
+    /** Result count, after the filters or the button (see `ToolbarCount`) */
+    count?: ToolbarCountProps;
+    /** Other summary text after the count (inherits the strip color; `text-toolbar-muted` to dim) */
     summary?: Snippet;
     /** Right-aligned cluster (view toggles etc.) */
     end?: Snippet;

package/dist/lib/components/Label.svelte

@@ -23,7 +23,7 @@
 <LabelPrimitive.Root
   for={htmlFor}
   class={cn(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground',
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[hsl(var(--label-foreground,var(--foreground)))]',
     disabled && 'opacity-50 cursor-not-allowed',
     className
   )}

package/dist/lib/components/Toolbar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
+  import type { ToolbarCountProps } from '../utils/result-count.js';
+  import ToolbarCount from './ToolbarCount.svelte';
 
   /**
    * Toolbar - dark strip for list controls (search, filters, result count,
@@ -17,25 +19,28 @@
     label: string;
     /** Leading controls (search, filters, result count) */
     children?: Snippet;
-    /** Right-aligned cluster (e.g. SegmentedControl + ViewToggle) */
+    /** Result count after the leading controls, e.g. `{ total, noun: 'home', page }` */
+    count?: ToolbarCountProps;
+    /** Right-aligned cluster: scope pickers (All/Mine), SegmentedControl, ViewToggle */
     end?: Snippet;
     class?: string;
     [key: string]: unknown;
   }
 
-  let { label, children, end, class: className, ...restProps }: Props = $props();
+  let { label, children, count, end, class: className, ...restProps }: Props = $props();
 </script>
 
 <div
   role="group"
   aria-label={label}
   class={cn(
-    'flex flex-wrap items-center gap-2 rounded-lg bg-toolbar px-3 py-2 text-toolbar-foreground [--secondary-border:var(--toolbar-border)]',
+    'flex flex-wrap items-center gap-2 rounded-lg bg-toolbar px-3 py-2 text-toolbar-foreground [--label-foreground:var(--toolbar-foreground)] [--secondary-border:var(--toolbar-border)]',
     className
   )}
   {...restProps}
 >
   {@render children?.()}
+  {#if count}<ToolbarCount {...count} />{/if}
   {#if end}
     <div class="ml-auto flex flex-wrap items-center gap-2">{@render end()}</div>
   {/if}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ToolbarCountProps } from '../utils/result-count.js';
 /**
  * Toolbar - dark strip for list controls (search, filters, result count,
  * grouping and view toggles) under a page header.
@@ -14,7 +15,9 @@ interface Props {
     label: string;
     /** Leading controls (search, filters, result count) */
     children?: Snippet;
-    /** Right-aligned cluster (e.g. SegmentedControl + ViewToggle) */
+    /** Result count after the leading controls, e.g. `{ total, noun: 'home', page }` */
+    count?: ToolbarCountProps;
+    /** Right-aligned cluster: scope pickers (All/Mine), SegmentedControl, ViewToggle */
     end?: Snippet;
     class?: string;
     [key: string]: unknown;

package/dist/lib/components/ToolbarCount.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { resultCountText, type ToolbarCountProps } from '../utils/result-count.js';
+
+  /**
+   * ToolbarCount - the result count on a Toolbar / FilterToolbar strip, in the
+   * one wording `resultCountText` defines ("Showing 1–50 of 7,289 homes",
+   * "12 of 40 homes", "40 homes", "No homes found"). Inherits the strip's
+   * light text and announces changes politely. Renders nothing while `total`
+   * is undefined (first load). Usually passed as the strip's `count` prop.
+   */
+  let { note, ...input }: ToolbarCountProps = $props();
+
+  const text = $derived(resultCountText(input));
+</script>
+
+{#if text}
+  <span class="whitespace-nowrap text-sm tabular-nums" role="status">
+    {text}{note && input.total ? ` · ${note}` : ''}
+  </span>
+{/if}

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

@@ -0,0 +1,4 @@
+import { type ToolbarCountProps } from '../utils/result-count.js';
+declare const ToolbarCount: import("svelte").Component<ToolbarCountProps, {}, "">;
+type ToolbarCount = ReturnType<typeof ToolbarCount>;
+export default ToolbarCount;

package/dist/lib/components/ToolbarSearch.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Input from './Input.svelte';
+
+  /**
+   * ToolbarSearch - the search field for a Toolbar / FilterToolbar strip:
+   * full width on phones, a fixed `sm:w-64` beside the filters, and an
+   * accessible name (strips have no visible labels). End `placeholder` with
+   * "…", e.g. "Search homes…".
+   */
+  interface Props {
+    /** Accessible name, e.g. "Search homes" */
+    label: string;
+    value?: string;
+    placeholder?: string;
+    id?: string;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    label,
+    value = $bindable(''),
+    placeholder,
+    id,
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Input
+  {id}
+  type="search"
+  aria-label={label}
+  placeholder={placeholder ?? `${label}…`}
+  class={cn('w-full sm:w-64', className)}
+  bind:value
+  {...restProps}
+/>

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

@@ -0,0 +1,18 @@
+/**
+ * ToolbarSearch - the search field for a Toolbar / FilterToolbar strip:
+ * full width on phones, a fixed `sm:w-64` beside the filters, and an
+ * accessible name (strips have no visible labels). End `placeholder` with
+ * "…", e.g. "Search homes…".
+ */
+interface Props {
+    /** Accessible name, e.g. "Search homes" */
+    label: string;
+    value?: string;
+    placeholder?: string;
+    id?: string;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const ToolbarSearch: import("svelte").Component<Props, {}, "value">;
+type ToolbarSearch = ReturnType<typeof ToolbarSearch>;
+export default ToolbarSearch;

package/dist/lib/index.d.ts

@@ -71,6 +71,9 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as TabPanel } from './components/TabPanel.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as FilterToolbar } from './components/FilterToolbar.svelte';
+export { default as ToolbarCount } from './components/ToolbarCount.svelte';
+export { default as ToolbarSearch } from './components/ToolbarSearch.svelte';
+export { resultCountText, type ResultCountInput, type ToolbarCountProps, } from './utils/result-count.js';
 export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as ActiveFilterChips, type ActiveFilterChip, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, type SegmentedControlOption, } from './components/SegmentedControl.svelte';
@@ -113,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

@@ -85,6 +85,9 @@ export { default as TabPanel } from './components/TabPanel.svelte';
 // Toolbar controls
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as FilterToolbar } from './components/FilterToolbar.svelte';
+export { default as ToolbarCount } from './components/ToolbarCount.svelte';
+export { default as ToolbarSearch } from './components/ToolbarSearch.svelte';
+export { resultCountText, } from './utils/result-count.js';
 export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as ActiveFilterChips, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, } from './components/SegmentedControl.svelte';
@@ -144,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/dist/lib/utils/result-count.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The one result-count wording for list toolbars (`ToolbarCount`, and the
+ * `count` prop on `Toolbar` / `FilterToolbar`):
+ *
+ * - server-paged, more than one page: "Showing 1–50 of 7,289 homes"
+ * - locally filtered (`of` = unfiltered size): "12 of 40 homes"
+ * - otherwise: "40 homes" / "1 home"
+ * - nothing matches: `empty` (default "No homes found")
+ *
+ * Returns '' while the first load is pending (`total` undefined), so the strip
+ * never flashes "No homes found" before the data lands.
+ */
+export interface ResultCountInput {
+    /** Rows matching the current search/filters (server total or filtered length); undefined while loading. */
+    total: number | undefined | null;
+    /** Singular noun, e.g. "home". */
+    noun: string;
+    /** Plural noun when it isn't `${noun}s`, e.g. "entries". */
+    plural?: string;
+    /** Server paging: renders the "Showing a–b of N" range when total spans pages. */
+    page?: {
+        page: number;
+        limit: number;
+    };
+    /** Unfiltered size for locally filtered lists: "12 of 40 homes". */
+    of?: number;
+    /** Zero-match text (default "No <plural> found"). */
+    empty?: string;
+}
+/** `ResultCountInput` plus a trailing remark after " · " (falsy hides it). */
+export interface ToolbarCountProps extends ResultCountInput {
+    note?: string | false | null;
+}
+export declare function resultCountText({ total, noun, plural, page, of, empty, }: ResultCountInput): string;

package/dist/lib/utils/result-count.js

@@ -0,0 +1,15 @@
+const fmt = (n) => n.toLocaleString('en-US');
+export function resultCountText({ total, noun, plural = `${noun}s`, page, of, empty, }) {
+    if (total == null)
+        return '';
+    if (total === 0)
+        return empty ?? `No ${plural} found`;
+    if (page && total > page.limit) {
+        const start = (page.page - 1) * page.limit + 1;
+        const end = Math.min(page.page * page.limit, total);
+        return `Showing ${fmt(start)}–${fmt(end)} of ${fmt(total)} ${plural}`;
+    }
+    if (of !== undefined && of !== total)
+        return `${fmt(total)} of ${fmt(of)} ${plural}`;
+    return `${fmt(total)} ${total === 1 ? noun : plural}`;
+}

package/package.json

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