@classic-homes/theme-svelte 0.1.55 → 1.0.0

package/dist/__tests__/nav-access.test.js

@@ -0,0 +1,145 @@
+/**
+ * Navigation Access Filtering Tests
+ *
+ * Covers which navigation items a user sees given the roles and permissions
+ * they hold — including the nested case, where a restricted child sits under
+ * an unrestricted parent.
+ */
+import { describe, it, expect } from 'vitest';
+import { filterNavItems, isNavItemVisible, matchesAccess } from '../lib/utils/nav-access.js';
+function item(partial) {
+    return { name: partial.id, ...partial };
+}
+const ids = (items) => items.map((i) => i.id);
+describe('matchesAccess', () => {
+    it('matches when nothing is required', () => {
+        expect(matchesAccess(undefined, [])).toBe(true);
+        expect(matchesAccess([], [])).toBe(true);
+    });
+    it('does not match a requirement when the user holds nothing', () => {
+        expect(matchesAccess(['admin'], undefined)).toBe(false);
+        expect(matchesAccess(['admin'], [])).toBe(false);
+    });
+    it('matches any by default', () => {
+        expect(matchesAccess(['admin', 'manager'], ['manager'])).toBe(true);
+        expect(matchesAccess(['admin', 'manager'], ['agent'])).toBe(false);
+    });
+    it('can require all', () => {
+        expect(matchesAccess(['admin', 'manager'], ['admin'], true)).toBe(false);
+        expect(matchesAccess(['admin', 'manager'], ['admin', 'manager'], true)).toBe(true);
+    });
+});
+describe('isNavItemVisible', () => {
+    it('shows unrestricted items to anyone', () => {
+        expect(isNavItemVisible(item({ id: 'a' }), {})).toBe(true);
+    });
+    it('matches against every role held, not just one', () => {
+        const nav = item({ id: 'a', roles: ['agent'] });
+        expect(isNavItemVisible(nav, { userRoles: ['manager', 'agent'] })).toBe(true);
+    });
+    it('does not imply roles from one another', () => {
+        // Mirrors the auth package: holding admin does not imply agent, so the UI
+        // cannot offer something the server would reject.
+        const nav = item({ id: 'a', roles: ['agent'] });
+        expect(isNavItemVisible(nav, { userRoles: ['admin'] })).toBe(false);
+    });
+    it('combines roles and permissions as AND', () => {
+        const nav = item({ id: 'a', roles: ['manager'], permissions: ['users:write'] });
+        expect(isNavItemVisible(nav, { userRoles: ['manager'], userPermissions: ['users:write'] })).toBe(true);
+        expect(isNavItemVisible(nav, { userRoles: ['manager'], userPermissions: ['users:read'] })).toBe(false);
+        expect(isNavItemVisible(nav, { userRoles: ['agent'], userPermissions: ['users:write'] })).toBe(false);
+    });
+    it('gates on permissions alone', () => {
+        const nav = item({ id: 'a', permissions: ['settings:read'] });
+        expect(isNavItemVisible(nav, { userPermissions: ['settings:read'] })).toBe(true);
+        expect(isNavItemVisible(nav, { userRoles: ['admin'] })).toBe(false);
+    });
+});
+describe('filterNavItems', () => {
+    it('shows the union across a multi-role user', () => {
+        const items = [
+            item({ id: 'dashboard' }),
+            item({ id: 'users', roles: ['manager'] }),
+            item({ id: 'homes', roles: ['agent'] }),
+            item({ id: 'system', roles: ['admin'] }),
+        ];
+        expect(ids(filterNavItems(items, { userRoles: ['manager', 'agent'] }))).toEqual([
+            'dashboard',
+            'users',
+            'homes',
+        ]);
+    });
+    it('filters a restricted child under an unrestricted parent', () => {
+        // The parent passes on its own merits; without recursion nothing would ever
+        // look inside it and the admin-only child would show to everyone.
+        const items = [
+            item({
+                id: 'main',
+                children: [item({ id: 'open' }), item({ id: 'audit', roles: ['admin'] })],
+            }),
+        ];
+        const filtered = filterNavItems(items, { userRoles: ['agent'] });
+        expect(ids(filtered[0].children)).toEqual(['open']);
+    });
+    it('filters arbitrarily deep', () => {
+        const items = [
+            item({
+                id: 'l1',
+                children: [
+                    item({
+                        id: 'l2',
+                        children: [item({ id: 'l3', roles: ['admin'] }), item({ id: 'l3-open' })],
+                    }),
+                ],
+            }),
+        ];
+        const filtered = filterNavItems(items, { userRoles: ['agent'] });
+        expect(ids(filtered[0].children[0].children)).toEqual(['l3-open']);
+    });
+    it('drops a container whose children are all filtered away', () => {
+        const items = [
+            item({ id: 'admin-area', children: [item({ id: 'system', roles: ['admin'] })] }),
+        ];
+        // Keeping it would render an expandable with nothing behind it.
+        expect(ids(filterNavItems(items, { userRoles: ['agent'] }))).toEqual([]);
+    });
+    it('keeps an emptied parent that is a destination in its own right', () => {
+        const items = [
+            item({
+                id: 'reports',
+                href: '/reports',
+                children: [item({ id: 'revenue', roles: ['admin'] })],
+            }),
+        ];
+        const filtered = filterNavItems(items, { userRoles: ['agent'] });
+        expect(ids(filtered)).toEqual(['reports']);
+        expect(filtered[0].children).toEqual([]);
+    });
+    it('hides everything restricted from a user with no roles', () => {
+        const items = [item({ id: 'dashboard' }), item({ id: 'users', roles: ['manager'] })];
+        expect(ids(filterNavItems(items, {}))).toEqual(['dashboard']);
+    });
+    it('honors requireAllRoles', () => {
+        const items = [item({ id: 'both', roles: ['admin', 'manager'] })];
+        expect(ids(filterNavItems(items, { userRoles: ['admin'], requireAllRoles: true }))).toEqual([]);
+        expect(ids(filterNavItems(items, { userRoles: ['admin', 'manager'], requireAllRoles: true }))).toEqual(['both']);
+    });
+    it('honors requireAllPermissions', () => {
+        const items = [item({ id: 'both', permissions: ['a:read', 'b:read'] })];
+        expect(ids(filterNavItems(items, { userPermissions: ['a:read'], requireAllPermissions: true }))).toEqual([]);
+        expect(ids(filterNavItems(items, {
+            userPermissions: ['a:read', 'b:read'],
+            requireAllPermissions: true,
+        }))).toEqual(['both']);
+    });
+    it('leaves childless items without a children key', () => {
+        const filtered = filterNavItems([item({ id: 'a' })], {});
+        expect('children' in filtered[0]).toBe(false);
+    });
+    it('does not mutate the input', () => {
+        const items = [item({ id: 'main', children: [item({ id: 'audit', roles: ['admin'] })] })];
+        const before = JSON.stringify(items);
+        filterNavItems(items, { userRoles: ['agent'] });
+        expect(JSON.stringify(items)).toBe(before);
+    });
+});

package/dist/__tests__/sidebar-expansion.test.js

@@ -0,0 +1,59 @@
+/**
+ * Sidebar Role-based Expansion Tests
+ *
+ * Covers which sections start expanded for a given user. This is a UX
+ * affordance, not access control — it decides what starts open, not what is
+ * visible (that's nav-access).
+ */
+import { describe, it, expect } from 'vitest';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+function section(partial) {
+    return { title: partial.id, items: [], ...partial };
+}
+describe('computeInitialExpansions', () => {
+    it('expands a section for any matching role', () => {
+        const sections = [section({ id: 'admin', expandForRoles: ['admin', 'superuser'] })];
+        expect(sidebarStore.computeInitialExpansions(sections, ['admin'])).toEqual(['admin']);
+        expect(sidebarStore.computeInitialExpansions(sections, ['superuser'])).toEqual(['admin']);
+    });
+    it('expands on a secondary role, not just the first held', () => {
+        const sections = [section({ id: 'ops', expandForRoles: ['agent'] })];
+        expect(sidebarStore.computeInitialExpansions(sections, ['manager', 'agent'])).toEqual(['ops']);
+    });
+    it('leaves a section collapsed when no role matches', () => {
+        const sections = [section({ id: 'admin', expandForRoles: ['admin'] })];
+        expect(sidebarStore.computeInitialExpansions(sections, ['agent'])).toEqual([]);
+    });
+    it('leaves a role-gated section collapsed for a user with no roles', () => {
+        const sections = [section({ id: 'admin', expandForRoles: ['admin'] })];
+        expect(sidebarStore.computeInitialExpansions(sections, [])).toEqual([]);
+        expect(sidebarStore.computeInitialExpansions(sections, undefined)).toEqual([]);
+    });
+    it('expands non-collapsible sections regardless of roles', () => {
+        const sections = [section({ id: 'main', collapsible: false })];
+        expect(sidebarStore.computeInitialExpansions(sections, [])).toEqual(['main']);
+    });
+    it('respects an explicitly collapsed section', () => {
+        const sections = [section({ id: 'main', collapsible: true, expanded: false })];
+        expect(sidebarStore.computeInitialExpansions(sections, ['admin'])).toEqual([]);
+    });
+    it('expands a collapsible section that is not explicitly collapsed', () => {
+        const sections = [section({ id: 'main', collapsible: true })];
+        expect(sidebarStore.computeInitialExpansions(sections, [])).toEqual(['main']);
+    });
+    it('prefers expandForRoles over the collapsed default', () => {
+        // expandForRoles is checked first, so it wins over `expanded: false`.
+        const sections = [
+            section({ id: 'admin', collapsible: true, expanded: false, expandForRoles: ['admin'] }),
+        ];
+        expect(sidebarStore.computeInitialExpansions(sections, ['admin'])).toEqual(['admin']);
+    });
+    it('handles a mixed navigation', () => {
+        const sections = [
+            section({ id: 'main', collapsible: false }),
+            section({ id: 'admin', expandForRoles: ['admin'] }),
+            section({ id: 'ops', expandForRoles: ['agent'] }),
+        ];
+        expect(sidebarStore.computeInitialExpansions(sections, ['agent'])).toEqual(['main', 'ops']);
+    });
+});

package/dist/lib/components/Button.svelte

@@ -110,7 +110,23 @@
 {/snippet}
 
 {#if href}
-  <a {href} class={classes} {...restProps}>
+  <!-- Anchors can't be natively disabled: remove from tab order, expose
+       aria-disabled, drop the href, and block clicks when disabled/loading -->
+  <a
+    href={disabled || loading ? undefined : href}
+    class={classes}
+    aria-disabled={disabled || loading || undefined}
+    aria-busy={loading || undefined}
+    tabindex={disabled || loading ? -1 : undefined}
+    onclick={(e) => {
+      if (disabled || loading) {
+        e.preventDefault();
+        return;
+      }
+      onclick?.(e);
+    }}
+    {...restProps}
+  >
     {@render buttonContent()}
   </a>
 {:else}

package/dist/lib/components/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
 
   interface Props {
     checked?: boolean;
@@ -32,7 +32,8 @@
   }: Props = $props();
 
   // Generate a stable unique ID if none provided (for accessibility)
-  const generatedId = useId('checkbox');
+  const uid = $props.id();
+  const generatedId = `checkbox-${uid}`;
   const effectiveId = $derived(id ?? generatedId);
 
   function handleCheckedChange(newChecked: boolean | 'indeterminate') {

package/dist/lib/components/Combobox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Combobox as ComboboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { computeDescribedBy } from '../utils/form.js';
   import Spinner from './Spinner.svelte';
   import Label from './Label.svelte';
   import LiveRegion from './LiveRegion.svelte';
@@ -66,9 +66,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('combobox').split('-').pop();
-  const componentId = $derived(id || `combobox-${randomSuffix}`);
+  // Generate unique IDs for accessibility ($props.id() is SSR-stable)
+  const uid = $props.id();
+  const componentId = $derived(id || `combobox-${uid}`);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 

package/dist/lib/components/DataPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils.js';
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import type { Snippet } from 'svelte';
   import type {
     PanelEdge,
@@ -222,11 +222,13 @@
     }
 
     saveTimeout = setTimeout(() => {
+      // Persist the resolved values so controlled mode saves what's shown,
+      // not the untouched internal defaults
       savePanelState(persistKey, {
-        mode: internalMode,
-        variant: internalVariant,
-        edge: internalEdge,
-        isExpanded: internalExpanded,
+        mode,
+        variant,
+        edge,
+        isExpanded,
         detachedPosition,
         detachedSize,
         pinnedSize,
@@ -236,6 +238,10 @@
     }, 300);
   }
 
+  onDestroy(() => {
+    if (saveTimeout) clearTimeout(saveTimeout);
+  });
+
   // Initialize from persistence on mount
   onMount(() => {
     // Update viewport dimensions

package/dist/lib/components/DateTimePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Popover, Calendar } from 'bits-ui';
   import { tick } from 'svelte';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { parseDate, toISOString, parseDateInput } from '../utils/date.js';
   import Label from './Label.svelte';
 
@@ -69,7 +69,8 @@
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
-  const generatedId = useId('datetimepicker');
+  const uid = $props.id();
+  const generatedId = `datetimepicker-${uid}`;
   const componentId = $derived(id || generatedId);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);

package/dist/lib/components/FileUpload.svelte

@@ -12,7 +12,7 @@
    * - Accessible with keyboard navigation
    */
   import type { FileMetadata } from '../types/components.js';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import Button from './Button.svelte';
 
   interface Props {
@@ -48,7 +48,8 @@
     class?: string;
   }
 
-  const generatedId = useId('file-upload');
+  const uid = $props.id();
+  const generatedId = `file-upload-${uid}`;
 
   let {
     id = generatedId,
@@ -336,7 +337,7 @@
     for={id}
     aria-describedby={displayError ? `${id}-error` : undefined}
     class={cn(
-      'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors',
+      'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6',
       'cursor-pointer focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
       isDragging && !disabled && 'border-primary bg-primary/5',
       disabled && 'cursor-not-allowed opacity-50',

package/dist/lib/components/HeaderSearch.svelte

@@ -25,6 +25,7 @@
    * ```
    */
   import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { onDestroy } from 'svelte';
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
   import type { SearchResultItem, SearchResultGroup } from '../types/layout.js';
@@ -131,6 +132,10 @@
     }, 200);
   }
 
+  onDestroy(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
+
   // Keyboard navigation within results
   function handleKeydown(e: KeyboardEvent) {
     switch (e.key) {

package/dist/lib/components/RadioGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { computeDescribedBy } from '../utils/form.js';
   import { validateNonEmptyArray } from '../validation.js';
   import Label from './Label.svelte';
@@ -52,7 +52,8 @@
   }: Props = $props();
 
   // Generate unique IDs for accessibility (sequential counter, SSR-safe)
-  const generatedId = useId('radio-group');
+  const uid = $props.id();
+  const generatedId = `radio-group-${uid}`;
   const componentName = $derived(name || generatedId);
   const labelId = $derived(`${componentName}-label`);
   const hintId = $derived(`${componentName}-hint`);

package/dist/lib/components/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { validateNonEmptyArray } from '../validation.js';
   import { DEV } from 'esm-env';
   import Label from './Label.svelte';
@@ -59,7 +59,8 @@
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
-  const generatedId = useId('select');
+  const uid = $props.id();
+  const generatedId = `select-${uid}`;
   const componentId = $derived(id || generatedId);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);

package/dist/lib/components/Signature.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { tv, type VariantProps } from 'tailwind-variants';
   import type {
     SignatureData,
@@ -842,7 +842,8 @@
   });
 
   // Computed IDs (using stable sequential ID generation)
-  const generatedInputId = useId('signature');
+  const uid = $props.id();
+  const generatedInputId = `signature-${uid}`;
   const inputId = $derived(id || generatedInputId);
   const errorId = $derived(`${inputId}-error`);
   const hintId = $derived(`${inputId}-hint`);

package/dist/lib/components/Tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import type { Tab } from '../types/components.js';
 
   interface Props {
@@ -25,7 +25,8 @@
     onValueChange?: (value: string) => void;
   }
 
-  const generatedId = useId('tabs');
+  const uid = $props.id();
+  const generatedId = `tabs-${uid}`;
 
   let {
     tabs,

package/dist/lib/components/data-table/DataTableColumnFilter.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableColumnFilter - Per-column text filter input
    *
@@ -12,7 +12,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Column ID to filter */
     columnId: string;
     /** Placeholder text */

package/dist/lib/components/data-table/DataTableColumnFilter.svelte.d.ts

@@ -5,18 +5,38 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Column ID to filter */
-    columnId: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Debounce delay in ms */
-    debounceMs?: number;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Column ID to filter */
+        columnId: string;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Debounce delay in ms */
+        debounceMs?: number;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTableColumnFilter: import("svelte").Component<Props, {}, "">;
-type DataTableColumnFilter = ReturnType<typeof DataTableColumnFilter>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnFilter: $$IsomorphicComponent;
+type DataTableColumnFilter<TData extends object> = InstanceType<typeof DataTableColumnFilter<TData>>;
 export default DataTableColumnFilter;

package/dist/lib/components/data-table/DataTableColumnVisibility.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableColumnVisibility - Column visibility toggle dropdown
    *
@@ -12,7 +12,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Additional classes */
     class?: string;
   }

package/dist/lib/components/data-table/DataTableColumnVisibility.svelte.d.ts

@@ -5,12 +5,32 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTableColumnVisibility: import("svelte").Component<Props, {}, "">;
-type DataTableColumnVisibility = ReturnType<typeof DataTableColumnVisibility>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnVisibility: $$IsomorphicComponent;
+type DataTableColumnVisibility<TData extends object> = InstanceType<typeof DataTableColumnVisibility<TData>>;
 export default DataTableColumnVisibility;

package/dist/lib/components/data-table/DataTableFacetedFilter.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableFacetedFilter - Multi-select filter for categorical columns
    *
@@ -23,7 +23,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Column ID to filter */
     columnId: string;
     /** Title for the filter */

package/dist/lib/components/data-table/DataTableFacetedFilter.svelte.d.ts

@@ -9,23 +9,42 @@
    * from the main table's column filter state.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface FilterOption {
-    value: string;
-    label: string;
-    count?: number;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Column ID to filter */
+        columnId: string;
+        /** Title for the filter */
+        title: string;
+        /** Available filter options */
+        options: {
+            value: string;
+            label: string;
+            count?: number;
+        }[];
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Column ID to filter */
-    columnId: string;
-    /** Title for the filter */
-    title: string;
-    /** Available filter options */
-    options: FilterOption[];
-    /** Additional classes */
-    class?: string;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const DataTableFacetedFilter: import("svelte").Component<Props, {}, "">;
-type DataTableFacetedFilter = ReturnType<typeof DataTableFacetedFilter>;
+declare const DataTableFacetedFilter: $$IsomorphicComponent;
+type DataTableFacetedFilter<TData extends object> = InstanceType<typeof DataTableFacetedFilter<TData>>;
 export default DataTableFacetedFilter;