@classic-homes/theme-svelte 0.1.55 → 1.0.0

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTablePagination - Pagination controls for DataTable
    *
@@ -12,7 +12,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Available page sizes */
     pageSizeOptions?: number[];
     /** Show selected row count */

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

@@ -5,16 +5,36 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Available page sizes */
-    pageSizeOptions?: number[];
-    /** Show selected row count */
-    showSelectedCount?: boolean;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Available page sizes */
+        pageSizeOptions?: number[];
+        /** Show selected row count */
+        showSelectedCount?: boolean;
+        /** 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 DataTablePagination: import("svelte").Component<Props, {}, "">;
-type DataTablePagination = ReturnType<typeof DataTablePagination>;
+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 DataTablePagination: $$IsomorphicComponent;
+type DataTablePagination<TData extends object> = InstanceType<typeof DataTablePagination<TData>>;
 export default DataTablePagination;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableSearch - Global search input for DataTable
    *
@@ -11,7 +11,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Placeholder text */
     placeholder?: string;
     /** Debounce delay in ms */

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

@@ -5,16 +5,36 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** 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>;
+        /** 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 DataTableSearch: import("svelte").Component<Props, {}, "">;
-type DataTableSearch = ReturnType<typeof DataTableSearch>;
+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 DataTableSearch: $$IsomorphicComponent;
+type DataTableSearch<TData extends object> = InstanceType<typeof DataTableSearch<TData>>;
 export default DataTableSearch;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableToolbar - Combined toolbar with search and controls
    *
@@ -14,7 +14,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Show global search */
     showSearch?: boolean;
     /** Show column visibility toggle */

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

@@ -6,22 +6,42 @@
    */
 import type { Snippet } from 'svelte';
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Show global search */
-    showSearch?: boolean;
-    /** Show column visibility toggle */
-    showColumnVisibility?: boolean;
-    /** Search placeholder */
-    searchPlaceholder?: string;
-    /** Custom filters slot */
-    filters?: Snippet;
-    /** Custom actions slot */
-    actions?: Snippet;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Show global search */
+        showSearch?: boolean;
+        /** Show column visibility toggle */
+        showColumnVisibility?: boolean;
+        /** Search placeholder */
+        searchPlaceholder?: string;
+        /** Custom filters slot */
+        filters?: Snippet;
+        /** Custom actions slot */
+        actions?: Snippet;
+        /** 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 DataTableToolbar: import("svelte").Component<Props, {}, "">;
-type DataTableToolbar = ReturnType<typeof DataTableToolbar>;
+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 DataTableToolbar: $$IsomorphicComponent;
+type DataTableToolbar<TData extends object> = InstanceType<typeof DataTableToolbar<TData>>;
 export default DataTableToolbar;

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -229,6 +229,7 @@
   <Sidebar
     navigation={effectiveNavigation}
     userRoles={user?.roles}
+    userPermissions={user?.permissions}
     variant={sidebarVariant}
     collapsed={!sidebarStore.isOpen && !isMobile}
     {isMobile}

package/dist/lib/components/layout/Sidebar.svelte

@@ -15,6 +15,7 @@
   import type { Snippet } from 'svelte';
   import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
   import { cn } from '../../utils.js';
+  import { filterNavItems } from '../../utils/nav-access.js';
   import { sidebarStore } from '../../stores/sidebar.svelte.js';
   import LogoMain from '../LogoMain.svelte';
   import QuickLinks from './QuickLinks.svelte';
@@ -25,8 +26,17 @@
   interface Props {
     /** Navigation sections */
     navigation: NavSection[];
-    /** User roles for filtering navigation items */
+    /**
+     * Every role the current user holds. Items are matched against the whole
+     * set, so a user with several roles sees the union of what they allow.
+     */
     userRoles?: string[];
+    /** Every permission the current user holds, for permission-gated items. */
+    userPermissions?: string[];
+    /** Require ALL of an item's `roles` rather than any (default: any). */
+    requireAllRoles?: boolean;
+    /** Require ALL of an item's `permissions` rather than any (default: any). */
+    requireAllPermissions?: boolean;
     /** Whether sidebar is collapsed (desktop) */
     collapsed?: boolean;
     /** Whether currently on mobile */
@@ -80,6 +90,9 @@
   let {
     navigation,
     userRoles,
+    userPermissions,
+    requireAllRoles = false,
+    requireAllPermissions = false,
     collapsed = false,
     isMobile = false,
     mobileOpen = false,
@@ -106,27 +119,19 @@
     class: className,
   }: Props = $props();
 
-  // Helper to check if item is visible based on roles
-  function isItemVisible(item: NavItem): boolean {
-    if (!item.roles || item.roles.length === 0) return true;
-    if (!userRoles || userRoles.length === 0) return false;
-    return item.roles.some((role) => userRoles.includes(role));
-  }
-
-  // Recursively filter items based on roles
-  function filterItems(items: NavItem[]): NavItem[] {
-    return items.filter(isItemVisible).map((item) => ({
-      ...item,
-      children: item.children ? filterItems(item.children) : undefined,
-    }));
-  }
+  const accessContext = $derived({
+    userRoles,
+    userPermissions,
+    requireAllRoles,
+    requireAllPermissions,
+  });
 
-  // Filter navigation based on user roles
+  // Filter navigation by what the user holds, dropping sections left empty.
   const roleFilteredNavigation = $derived(
     navigation
       .map((section) => ({
         ...section,
-        items: filterItems(section.items),
+        items: filterNavItems(section.items, accessContext),
       }))
       .filter((section) => section.items.length > 0)
   );

package/dist/lib/components/layout/Sidebar.svelte.d.ts

@@ -16,8 +16,17 @@ import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
 interface Props {
     /** Navigation sections */
     navigation: NavSection[];
-    /** User roles for filtering navigation items */
+    /**
+     * Every role the current user holds. Items are matched against the whole
+     * set, so a user with several roles sees the union of what they allow.
+     */
     userRoles?: string[];
+    /** Every permission the current user holds, for permission-gated items. */
+    userPermissions?: string[];
+    /** Require ALL of an item's `roles` rather than any (default: any). */
+    requireAllRoles?: boolean;
+    /** Require ALL of an item's `permissions` rather than any (default: any). */
+    requireAllPermissions?: boolean;
     /** Whether sidebar is collapsed (desktop) */
     collapsed?: boolean;
     /** Whether currently on mobile */

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

@@ -28,18 +28,18 @@
 export function useAnnounce(defaultOptions) {
     let message = $state('');
     let politeness = $state(defaultOptions?.politeness ?? 'polite');
-    let clearTimeout = null;
+    let clearTimer = null;
     function clear() {
         message = '';
-        if (clearTimeout) {
-            globalThis.clearTimeout(clearTimeout);
-            clearTimeout = null;
+        if (clearTimer) {
+            clearTimeout(clearTimer);
+            clearTimer = null;
         }
     }
     function announce(newMessage, options) {
         // Clear any pending timeout
-        if (clearTimeout) {
-            globalThis.clearTimeout(clearTimeout);
+        if (clearTimer) {
+            clearTimeout(clearTimer);
         }
         // Update politeness if provided
         if (options?.politeness) {
@@ -50,7 +50,7 @@ export function useAnnounce(defaultOptions) {
         // Set up auto-clear if delay > 0
         const delay = options?.clearDelay ?? defaultOptions?.clearDelay ?? 1000;
         if (delay > 0) {
-            clearTimeout = globalThis.setTimeout(() => {
+            clearTimer = setTimeout(() => {
                 message = '';
             }, delay);
         }
@@ -58,8 +58,8 @@ export function useAnnounce(defaultOptions) {
     // Cleanup on destroy
     $effect(() => {
         return () => {
-            if (clearTimeout) {
-                globalThis.clearTimeout(clearTimeout);
+            if (clearTimer) {
+                clearTimeout(clearTimer);
             }
         };
     });

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

@@ -23,10 +23,11 @@ const DEFAULT_SELECTOR = '[role="menuitem"], [role="option"], [role="tab"], butt
  * ```
  */
 export function useArrowNavigation(options = {}) {
-    let orientation = $state(options.orientation ?? 'vertical');
-    let loop = $state(options.loop ?? true);
-    let itemSelector = $state(options.itemSelector ?? DEFAULT_SELECTOR);
-    let onFocusChange = $state(options.onFocusChange);
+    // Plain locals: only read imperatively (handlers/action update), never tracked
+    let orientation = options.orientation ?? 'vertical';
+    let loop = options.loop ?? true;
+    let itemSelector = options.itemSelector ?? DEFAULT_SELECTOR;
+    let onFocusChange = options.onFocusChange;
     let container = null;
     let focusedIndex = $state(-1);
     function getFocusableItems() {

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

@@ -5,9 +5,11 @@ export interface UseEscapeKeyOptions {
     /**
      * Whether the escape key handler is enabled.
      * Useful for conditionally enabling based on component state (e.g., dialog open).
+     * Pass a getter (`() => isOpen`) for a value that should stay reactive —
+     * a plain boolean is captured once when the composable is called.
      * Default: true
      */
-    enabled?: boolean;
+    enabled?: boolean | (() => boolean);
     /**
      * Whether to prevent default behavior when Escape is pressed.
      * Default: true
@@ -37,7 +39,7 @@ export interface UseEscapeKeyOptions {
  *   useEscapeKey(() => {
  *     isOpen = false;
  *     onClose?.();
- *   }, { enabled: isOpen });
+ *   }, { enabled: () => isOpen });
  * </script>
  *
  * {#if isOpen}

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

@@ -16,7 +16,7 @@
  *   useEscapeKey(() => {
  *     isOpen = false;
  *     onClose?.();
- *   }, { enabled: isOpen });
+ *   }, { enabled: () => isOpen });
  * </script>
  *
  * {#if isOpen}
@@ -25,10 +25,11 @@
  * ```
  */
 export function useEscapeKey(callback, options) {
-    const enabled = $derived(options?.enabled ?? true);
     const preventDefault = options?.preventDefault ?? true;
     const stopPropagation = options?.stopPropagation ?? false;
     $effect(() => {
+        // Resolve inside the effect so a getter's reactive reads are tracked
+        const enabled = typeof options?.enabled === 'function' ? options.enabled() : (options?.enabled ?? true);
         if (!enabled)
             return;
         function handleKeyDown(event) {

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

@@ -27,9 +27,10 @@
  * ```
  */
 export function useFocusRef(options = {}) {
-    let focusOnMount = $state(options.focusOnMount ?? false);
-    let preventScroll = $state(options.preventScroll ?? false);
-    let delay = $state(options.delay ?? 0);
+    // Plain locals: only read imperatively (action lifecycle), never tracked
+    let focusOnMount = options.focusOnMount ?? false;
+    let preventScroll = options.preventScroll ?? false;
+    let delay = options.delay ?? 0;
     let element = null;
     let timeoutId = null;
     let frameId = null;

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

@@ -1,6 +1,10 @@
 export interface UseFocusTrapOptions {
-    /** Whether the focus trap is active */
-    active?: boolean;
+    /**
+     * Whether the focus trap is active.
+     * Pass a getter (`() => isOpen`) for a value that should stay reactive —
+     * a plain boolean is captured once when the composable is called.
+     */
+    active?: boolean | (() => boolean);
     /** Element to return focus to when trap is deactivated */
     returnFocusTo?: HTMLElement | null;
     /** Selector for the element to focus initially (defaults to first focusable) */
@@ -15,12 +19,14 @@ export interface UseFocusTrapOptions {
  * focusable elements without escaping. Useful for modals, dialogs,
  * and dropdown menus.
  *
+ * Must be called during component initialization (it registers a `$effect`).
+ *
  * @example
  * ```svelte
  * <script>
  *   import { useFocusTrap } from '@classic-homes/theme-svelte';
  *
- *   const { action } = useFocusTrap({ active: isOpen });
+ *   const { action } = useFocusTrap({ active: () => isOpen });
  * </script>
  *
  * {#if isOpen}

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

@@ -22,12 +22,14 @@ function getFocusableElements(container) {
  * focusable elements without escaping. Useful for modals, dialogs,
  * and dropdown menus.
  *
+ * Must be called during component initialization (it registers a `$effect`).
+ *
  * @example
  * ```svelte
  * <script>
  *   import { useFocusTrap } from '@classic-homes/theme-svelte';
  *
- *   const { action } = useFocusTrap({ active: isOpen });
+ *   const { action } = useFocusTrap({ active: () => isOpen });
  * </script>
  *
  * {#if isOpen}
@@ -40,15 +42,18 @@ function getFocusableElements(container) {
  * ```
  */
 export function useFocusTrap(options = {}) {
-    let active = $state(options.active ?? true);
-    let returnFocusTo = $state(options.returnFocusTo ?? null);
-    let initialFocus = $state(options.initialFocus);
-    let preventScroll = $state(options.preventScroll ?? false);
-    let container = null;
+    let currentOptions = $state(options);
+    let container = $state(null);
     let previousActiveElement = null;
+    let trapped = false;
+    function isActive() {
+        const active = currentOptions.active;
+        return typeof active === 'function' ? active() : (active ?? true);
+    }
     function handleKeyDown(event) {
-        if (!active || event.key !== 'Tab' || !container)
+        if (!trapped || event.key !== 'Tab' || !container)
             return;
+        const preventScroll = currentOptions.preventScroll ?? false;
         const focusableElements = getFocusableElements(container);
         if (focusableElements.length === 0)
             return;
@@ -70,16 +75,18 @@ export function useFocusTrap(options = {}) {
         }
     }
     function activate() {
-        if (!container)
+        if (!container || trapped)
             return;
+        trapped = true;
         // Save current active element to return focus later
         previousActiveElement = document.activeElement;
         // Focus initial element
+        const preventScroll = currentOptions.preventScroll ?? false;
         const focusableElements = getFocusableElements(container);
         if (focusableElements.length > 0) {
             let elementToFocus = null;
-            if (initialFocus) {
-                elementToFocus = container.querySelector(initialFocus);
+            if (currentOptions.initialFocus) {
+                elementToFocus = container.querySelector(currentOptions.initialFocus);
             }
             if (!elementToFocus) {
                 elementToFocus = focusableElements[0];
@@ -91,39 +98,38 @@ export function useFocusTrap(options = {}) {
         document.addEventListener('keydown', handleKeyDown);
     }
     function deactivate() {
+        if (!trapped)
+            return;
+        trapped = false;
         document.removeEventListener('keydown', handleKeyDown);
         // Return focus when trap is deactivated
-        const elementToReturn = returnFocusTo ?? previousActiveElement;
+        const preventScroll = currentOptions.preventScroll ?? false;
+        const elementToReturn = currentOptions.returnFocusTo ?? previousActiveElement;
         if (elementToReturn && typeof elementToReturn.focus === 'function') {
             elementToReturn.focus({ preventScroll });
         }
     }
+    // Activate/deactivate as the container attaches/detaches, `active` changes
+    // (via getter or action update), or the component is destroyed.
+    $effect(() => {
+        if (container !== null && isActive()) {
+            activate();
+        }
+        else {
+            deactivate();
+        }
+    });
     /**
      * Svelte action to apply focus trap to an element
      */
     function action(node) {
         container = node;
-        if (active) {
-            activate();
-        }
         return {
             update(newOptions) {
-                const wasActive = active;
-                active = newOptions.active ?? true;
-                returnFocusTo = newOptions.returnFocusTo ?? null;
-                initialFocus = newOptions.initialFocus;
-                preventScroll = newOptions.preventScroll ?? false;
-                if (!wasActive && active) {
-                    activate();
-                }
-                else if (wasActive && !active) {
-                    deactivate();
-                }
+                currentOptions = newOptions;
             },
             destroy() {
-                if (active) {
-                    deactivate();
-                }
+                deactivate();
                 container = null;
             },
         };

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

@@ -32,10 +32,11 @@ const DEFAULT_SELECTOR = '[data-roving-tabindex-item]';
  * ```
  */
 export function useRovingTabindex(options = {}) {
-    let loop = $state(options.loop ?? true);
-    let itemSelector = $state(options.itemSelector ?? DEFAULT_SELECTOR);
+    // Plain locals: only read imperatively (handlers/action update), never tracked
+    let loop = options.loop ?? true;
+    let itemSelector = options.itemSelector ?? DEFAULT_SELECTOR;
     let activeIndex = $state(options.initialIndex ?? 0);
-    let onIndexChange = $state(options.onIndexChange);
+    let onIndexChange = options.onIndexChange;
     let container = null;
     function getItems() {
         if (!container)