@classic-homes/theme-svelte 1.22.1 → 1.22.2

package/dist/lib/components/Tabs.svelte

@@ -79,23 +79,21 @@
     updateScrollShadows();
   });
 
-  // Create a reactive object for context
-  // Initialize with empty values - the effect will set them immediately
-  const tabsState = $state({ activeTab: '', tabsId: '' });
-
-  // Keep context state in sync with props (runs immediately and on changes)
-  $effect(() => {
-    tabsState.activeTab = value;
-    tabsState.tabsId = id;
+  // Context for TabPanel children. Getters read the props directly, so the
+  // active panel is right on the first render and during SSR (an $effect
+  // would only fill it in after hydration).
+  setContext('tabs', {
+    get activeTab() {
+      return value;
+    },
+    get tabsId() {
+      return id;
+    },
   });
 
-  // Set up context for TabPanel children (done once at component init)
-  setContext('tabs', tabsState);
-
   function selectTab(tabId: string) {
     if (tabs.find((t) => t.id === tabId && t.disabled)) return;
     value = tabId;
-    tabsState.activeTab = tabId;
     onValueChange?.(tabId);
   }
 

package/dist/lib/components/Toast.svelte

@@ -6,17 +6,17 @@
 
   type ToastType = 'success' | 'error' | 'warning' | 'info';
 
+  // Status tokens (light/dark aware) over an opaque card surface: the tint is a
+  // ::before layer so the toast never shows the page through it, and text stays
+  // foreground-on-card for contrast in both modes.
   const toastVariants = tv({
-    base: 'group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all',
+    base: "group pointer-events-auto relative isolate flex w-full items-start gap-3 overflow-hidden rounded-lg border bg-card p-4 text-card-foreground shadow-lg transition-all before:absolute before:inset-0 before:-z-10 before:content-['']",
     variants: {
       type: {
-        success:
-          'bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800',
-        error:
-          'bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800',
-        warning:
-          'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800',
-        info: 'bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800',
+        success: 'border-success/40 before:bg-success/10',
+        error: 'border-destructive/40 before:bg-destructive/10',
+        warning: 'border-warning/40 before:bg-warning/10',
+        info: 'border-info/40 before:bg-info/10',
       },
     },
     defaultVariants: {
@@ -36,10 +36,10 @@
   };
 
   const iconColors: Record<ToastType, string> = {
-    success: 'text-green-500 dark:text-green-400',
-    error: 'text-red-500 dark:text-red-400',
-    warning: 'text-yellow-500 dark:text-yellow-400',
-    info: 'text-blue-500 dark:text-blue-400',
+    success: 'text-success',
+    error: 'text-destructive',
+    warning: 'text-warning',
+    info: 'text-info',
   };
 
   interface Props {

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

@@ -7,7 +7,6 @@
    */
   import type { DataTableInstance } from './createDataTable.svelte.js';
   import DropdownMenu from '../DropdownMenu.svelte';
-  import Button from '../Button.svelte';
   import { cn } from '../../utils.js';
 
   interface Props {
@@ -19,13 +18,13 @@
 
   let { table, class: className }: Props = $props();
 
-  // Build menu items with checkmarks for visible columns
+  // One checkbox item per column, checked while the column is visible
   const menuItems = $derived.by(() => {
     return table.allColumns.map((column) => {
-      const isVisible = !table.hiddenColumns.has(column.id);
       return {
         type: 'item' as const,
-        label: `${isVisible ? '✓ ' : '   '}${column.header}`,
+        label: column.header,
+        checked: !table.hiddenColumns.has(column.id),
         onSelect: () => {
           table.toggleColumnVisibility(column.id);
         },
@@ -35,32 +34,31 @@
 </script>
 
 <div class={cn('relative', className)}>
+  <!-- DropdownMenu renders the trigger <button>; style it via triggerVariant
+       rather than nesting a Button inside it. -->
   <DropdownMenu
     items={[{ type: 'label', label: 'Toggle columns' }, { type: 'separator' }, ...menuItems]}
+    triggerVariant="outline"
+    triggerSize="sm"
+    triggerClass="ml-auto"
   >
     {#snippet trigger()}
-      <Button variant="outline" size="sm" class="ml-auto" aria-label="Toggle column visibility">
-        <svg
-          class="mr-2 h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="2"
-          aria-hidden="true"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-          />
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-          />
-        </svg>
-        Columns
-      </Button>
+      <svg
+        class="mr-2 h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+        />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+      Columns
     {/snippet}
   </DropdownMenu>
 </div>

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

@@ -6,6 +6,7 @@
    * Supports text, number, and select inputs.
    * Works with the native Svelte 5 DataTable implementation.
    */
+  import { tick } from 'svelte';
   import type { DataTableColumn } from './types.js';
   import type { DataTableRow } from './createDataTable.svelte.js';
   import { cn } from '../../utils.js';
@@ -29,6 +30,7 @@
 
   let isEditing = $state(false);
   let editValue = $state<string>('');
+  let buttonEl = $state<HTMLButtonElement | null>(null);
 
   // Get the current display value
   const displayValue = $derived.by(() => {
@@ -70,13 +72,21 @@
     editValue = '';
   }
 
+  // After a keyboard save/cancel the input is gone; return focus to the cell.
+  async function refocusCell() {
+    await tick();
+    buttonEl?.focus();
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') {
       e.preventDefault();
       saveEdit();
+      refocusCell();
     } else if (e.key === 'Escape') {
       e.preventDefault();
       cancelEdit();
+      refocusCell();
     } else if (e.key === 'Tab') {
       saveEdit();
     }
@@ -91,29 +101,32 @@
   }
 </script>
 
-{#if isEditable}
+{#if isEditable && isEditing}
+  <!-- The input sits beside, not inside, the button: an input in a button is
+       invalid, and its Enter would bubble to the button and reopen the editor. -->
+  <div class={cn('relative w-full', className)}>
+    <input
+      use:autofocus
+      type="text"
+      value={editValue}
+      oninput={(e: Event) => (editValue = (e.target as HTMLInputElement).value)}
+      onkeydown={handleKeydown}
+      onblur={handleBlur}
+      class="h-7 w-full rounded border border-input bg-background px-2 text-base sm:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    />
+  </div>
+{:else if isEditable}
   <button
+    bind:this={buttonEl}
     type="button"
     class={cn('relative w-full text-left hover:bg-muted-hover', className)}
     ondblclick={handleDoubleClick}
-    onkeydown={(e: KeyboardEvent) => !isEditing && e.key === 'Enter' && startEditing()}
+    onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && startEditing()}
   >
-    {#if isEditing}
-      <input
-        use:autofocus
-        type="text"
-        value={editValue}
-        oninput={(e: Event) => (editValue = (e.target as HTMLInputElement).value)}
-        onkeydown={handleKeydown}
-        onblur={handleBlur}
-        class="h-7 w-full rounded border border-input bg-background px-2 text-base sm:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-      />
-    {:else}
-      <span class="border-b border-dashed border-transparent hover:border-primary">
-        {displayValue}
-      </span>
-      <span class="sr-only">(double-click to edit)</span>
-    {/if}
+    <span class="border-b border-dashed border-transparent hover:border-primary">
+      {displayValue}
+    </span>
+    <span class="sr-only">(double-click to edit)</span>
   </button>
 {:else}
   <span class={cn('relative', className)}>

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

@@ -1,10 +1,3 @@
-/**
-   * DataTableEditableCell - Inline editable cell component
-   *
-   * Allows users to edit cell values in place.
-   * Supports text, number, and select inputs.
-   * Works with the native Svelte 5 DataTable implementation.
-   */
 import type { DataTableColumn } from './types.js';
 import type { DataTableRow } from './createDataTable.svelte.js';
 declare function $$render<T extends object>(): {

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

@@ -28,6 +28,9 @@
     class: className,
   }: Props = $props();
 
+  const uid = $props.id();
+  const pageSizeLabelId = `datatable-page-size-${uid}`;
+
   function handlePageSizeChange(value: string) {
     table.setPageSize(Number(value));
   }
@@ -45,8 +48,9 @@
   <div class="flex flex-wrap items-center gap-x-4 gap-y-2 sm:gap-x-6 lg:gap-x-8">
     <!-- Page size selector -->
     <div class="flex items-center gap-2">
-      <span class="text-sm text-muted-foreground">Rows per page</span>
+      <span id={pageSizeLabelId} class="text-sm text-muted-foreground">Rows per page</span>
       <Select
+        aria-labelledby={pageSizeLabelId}
         value={String(table.pageSize)}
         options={pageSizeOptions.map((size) => ({
           value: String(size),

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

@@ -14,6 +14,9 @@
    * ```svelte
    * <DataTableVirtual {table} height="600px" rowHeight={48} />
    * ```
+   *
+   * Create the table with `enablePagination: false` so `table.rows` holds every
+   * row rather than one page.
    */
   import type { DataTableInstance, DataTableRow } from './createDataTable.svelte.js';
   import type { DataTableColumn } from './types.js';
@@ -96,12 +99,6 @@
     }
   }
 
-  // Handle row selection
-  function handleSelectRow(rowId: string, e: MouseEvent) {
-    e.stopPropagation();
-    table.toggleRowSelection(rowId);
-  }
-
   // Handle header click for sorting
   function handleHeaderClick(columnId: string, sortable: boolean | undefined) {
     if (!sortable) return;
@@ -184,7 +181,7 @@
                 checked={row.isSelected}
                 onCheckedChange={() => table.toggleRowSelection(row.id)}
                 aria-label={`Select row ${index + 1}`}
-                onclick={(e: MouseEvent) => handleSelectRow(row.id, e)}
+                onclick={(e: MouseEvent) => e.stopPropagation()}
               />
             </div>
           {/if}

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

@@ -13,6 +13,9 @@
    * ```svelte
    * <DataTableVirtual {table} height="600px" rowHeight={48} />
    * ```
+   *
+   * Create the table with `enablePagination: false` so `table.rows` holds every
+   * row rather than one page.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
 declare function $$render<T extends object>(): {

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

@@ -32,7 +32,7 @@ export interface DataTableOptions<T> {
     data: T[];
     /** Column definitions */
     columns: DataTableColumn<T>[];
-    /** Get unique row ID (defaults to index) */
+    /** Get unique row ID (defaults to the row's index in `data`) */
     getRowId?: (row: T, index: number) => string;
     /** Initial sort column ID */
     initialSortColumn?: string;
@@ -54,6 +54,11 @@ export interface DataTableOptions<T> {
     manualFiltering?: boolean;
     /** Use server-side pagination (skip client-side pagination) */
     manualPagination?: boolean;
+    /**
+     * Slice rows into pages (default true). Set false to get every row in
+     * `rows`, e.g. for a DataTable without a pager or for DataTableVirtual.
+     */
+    enablePagination?: boolean;
     /** Total page count (required for manual pagination) */
     pageCount?: number;
     /** Callback when sort changes */

package/dist/lib/components/data-table/createDataTable.svelte.js

@@ -162,16 +162,26 @@ export function createDataTable(optionsFn) {
         : Math.ceil(totalRows / pageSize) || 1);
     // Clamp pageIndex when data changes
     const clampedPageIndex = $derived(Math.min(Math.max(0, pageIndex), Math.max(0, totalPages - 1)));
-    const paginatedData = $derived(options.manualPagination
+    const paginatedData = $derived(options.manualPagination || options.enablePagination === false
         ? sortedData // In manual mode, data is already paginated from server
         : sortedData.slice(clampedPageIndex * pageSize, (clampedPageIndex + 1) * pageSize));
     // === ROW HELPERS ===
-    const rows = $derived(paginatedData.map((row, index) => {
-        const globalIndex = options.manualPagination ? index : clampedPageIndex * pageSize + index;
-        const id = getRowId(row, globalIndex);
+    // Index of each row in the source data, so row ids (and with them the
+    // selection) follow the row rather than its position after sort/filter/page.
+    const sourceIndex = $derived.by(() => {
+        const map = new Map();
+        data.forEach((row, i) => {
+            if (!map.has(row))
+                map.set(row, i);
+        });
+        return map;
+    });
+    const rows = $derived(paginatedData.map((row) => {
+        const index = sourceIndex.get(row) ?? -1;
+        const id = getRowId(row, index);
         return {
             id,
-            index: globalIndex,
+            index,
             original: row,
             isSelected: selectedRows.has(id),
         };
@@ -248,14 +258,17 @@ export function createDataTable(optionsFn) {
     }
     function nextPage() {
         if (clampedPageIndex < totalPages - 1) {
-            pageIndex = clampedPageIndex + 1;
-            options.onPaginationChange?.({ pageIndex: clampedPageIndex + 1, pageSize });
+            // Read before assigning: clampedPageIndex recomputes from pageIndex.
+            const next = clampedPageIndex + 1;
+            pageIndex = next;
+            options.onPaginationChange?.({ pageIndex: next, pageSize });
         }
     }
     function previousPage() {
         if (clampedPageIndex > 0) {
-            pageIndex = clampedPageIndex - 1;
-            options.onPaginationChange?.({ pageIndex: clampedPageIndex - 1, pageSize });
+            const previous = clampedPageIndex - 1;
+            pageIndex = previous;
+            options.onPaginationChange?.({ pageIndex: previous, pageSize });
         }
     }
     function firstPage() {

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

@@ -323,6 +323,34 @@
     sidebarStore.setDefaultItems(defaultExpanded);
   });
 
+  // Keep the active item visible: open the section and parent items holding
+  // it when it changes. Declared after the defaults effects so it runs after
+  // them: while nothing is saved, every new navigation re-applies the
+  // defaults, which would close it again. Once the user has toggled (saved),
+  // a section they closed stays closed until the active item moves.
+  let revealedActiveId: string | null = null;
+  $effect(() => {
+    type ActivePath = { id: string; parents: string[] };
+    const findActive = (items: NavItem[], parents: string[]): ActivePath | null => {
+      for (const item of items) {
+        if (item.active) return { id: item.id, parents };
+        const found = item.children && findActive(item.children, [...parents, item.id]);
+        if (found) return found;
+      }
+      return null;
+    };
+    for (const section of roleFilteredNavigation) {
+      const active = findActive(section.items, []);
+      if (!active) continue;
+      if (active.id !== revealedActiveId || !sidebarStore.hasPersistedExpansionState) {
+        sidebarStore.revealExpansion([section.id], active.parents);
+      }
+      revealedActiveId = active.id;
+      return;
+    }
+    revealedActiveId = null;
+  });
+
   // Flyout state for collapsed sidebar
   let hoveredFlyoutItem = $state<NavItem | null>(null);
   let flyoutTop = $state(0);

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

@@ -6,7 +6,7 @@
  * - Error handling with toast integration
  * - Success/error callbacks
  * - Retry functionality
- * - Abort/cancel support
+ * - Overlapping calls: only the latest call (and none after reset) updates state
  * - Debounce support
  *
  * @example

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

@@ -6,7 +6,7 @@
  * - Error handling with toast integration
  * - Success/error callbacks
  * - Retry functionality
- * - Abort/cancel support
+ * - Overlapping calls: only the latest call (and none after reset) updates state
  * - Debounce support
  *
  * @example
@@ -51,21 +51,35 @@ export function useAsync(options) {
     // Derived state
     const isSuccess = $derived(isExecuted && !error && !isLoading);
     const isError = $derived(isExecuted && !!error);
-    // Debounce timer
+    // Debounce timer, and the resolver of the call it is holding back
     let debounceTimer;
+    let pendingResolve;
+    // Id of the latest call; results from older calls are ignored
+    let callId = 0;
     /**
-     * Execute the async function
+     * Cancel a pending debounced call, settling its promise with undefined
      */
-    async function execute(...args) {
-        // Clear any pending debounce
+    function cancelPending() {
         if (debounceTimer) {
             clearTimeout(debounceTimer);
             debounceTimer = undefined;
         }
+        pendingResolve?.(undefined);
+        pendingResolve = undefined;
+    }
+    /**
+     * Execute the async function
+     */
+    async function execute(...args) {
+        // Clear any pending debounce
+        cancelPending();
         // If debounce is set, delay execution
         if (debounceMs && debounceMs > 0) {
             return new Promise((resolve) => {
+                pendingResolve = resolve;
                 debounceTimer = setTimeout(async () => {
+                    debounceTimer = undefined;
+                    pendingResolve = undefined;
                     const result = await executeImmediate(...args);
                     resolve(result);
                 }, debounceMs);
@@ -77,12 +91,16 @@ export function useAsync(options) {
      * Execute immediately without debounce
      */
     async function executeImmediate(...args) {
+        const id = ++callId;
         lastArgs = args;
         isLoading = true;
         error = undefined;
         isExecuted = true;
         try {
             const result = await fn(...args);
+            // A newer call (or reset) superseded this one: leave state alone
+            if (id !== callId)
+                return result;
             data = result;
             if (onSuccess) {
                 onSuccess(result);
@@ -93,6 +111,8 @@ export function useAsync(options) {
             return result;
         }
         catch (err) {
+            if (id !== callId)
+                return undefined;
             const normalizedError = err instanceof Error ? err : new Error(String(err));
             error = normalizedError;
             if (onError) {
@@ -104,7 +124,8 @@ export function useAsync(options) {
             return undefined;
         }
         finally {
-            isLoading = false;
+            if (id === callId)
+                isLoading = false;
         }
     }
     /**
@@ -121,11 +142,9 @@ export function useAsync(options) {
      * Reset state to initial values
      */
     function reset() {
-        // Clear any pending debounce
-        if (debounceTimer) {
-            clearTimeout(debounceTimer);
-            debounceTimer = undefined;
-        }
+        // Clear any pending debounce, and drop the result of any call in flight
+        cancelPending();
+        callId++;
         data = initialData;
         error = undefined;
         isLoading = false;
@@ -153,11 +172,11 @@ export function useAsync(options) {
     function clearError() {
         error = undefined;
     }
-    // Execute immediately if requested
-    if (immediate && immediateArgs) {
+    // Execute immediately if requested (zero-argument functions need no immediateArgs)
+    if (immediate) {
         // Use $effect-like behavior by queueing the execution
         queueMicrotask(() => {
-            execute(...immediateArgs);
+            execute(...(immediateArgs ?? []));
         });
     }
     return {

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

@@ -46,8 +46,9 @@ import { toastStore } from '../stores/toast.svelte.js';
  */
 export function useForm(options) {
     const { schema, initialValues, onSubmit, onError, showToastOnError = true, resetOnSuccess = false, errorMessage, successMessage, } = options;
-    // Deep clone to avoid reference issues
-    const cloneInitialValues = () => JSON.parse(JSON.stringify(initialValues));
+    // Deep clone to avoid reference issues. $state.snapshot keeps Date, Map, Set
+    // and File values (a JSON round-trip would turn a Date into a string).
+    const cloneInitialValues = () => $state.snapshot(initialValues);
     // Reactive state using Svelte 5 runes
     let data = $state(cloneInitialValues());
     let errors = $state({});
@@ -145,14 +146,20 @@ export function useForm(options) {
      * Validate the entire form
      */
     function validate() {
+        return parseForm() !== null;
+    }
+    /**
+     * Validate the entire form, returning the parsed (transformed) data or null
+     */
+    function parseForm() {
         const result = schema.safeParse(data);
         if (result.success) {
             errors = {};
-            return true;
+            return result.data;
         }
         else {
             errors = parseZodErrors(result.error);
-            return false;
+            return null;
         }
     }
     /**
@@ -160,12 +167,17 @@ export function useForm(options) {
      */
     async function handleSubmit(event) {
         event?.preventDefault();
+        // Ignore a second submit (e.g. a double click) while one is in flight
+        if (isSubmitting)
+            return;
         // Clear previous errors
         errors = {};
         globalError = '';
         isSubmitted = true;
-        // Validate all fields
-        if (!validate()) {
+        // Validate all fields. onSubmit gets the schema's output, so transforms,
+        // coercions and defaults apply, as a plain object rather than the proxy.
+        const parsed = parseForm();
+        if (parsed === null) {
             const errorCount = Object.keys(errors).length;
             if (showToastOnError) {
                 toastStore.error(errorMessage || `Please fix ${errorCount} validation error${errorCount > 1 ? 's' : ''}`);
@@ -174,7 +186,7 @@ export function useForm(options) {
         }
         isSubmitting = true;
         try {
-            await onSubmit(data);
+            await onSubmit(parsed);
             if (successMessage) {
                 toastStore.success(successMessage);
             }