@classic-homes/theme-svelte 1.22.1 → 1.22.3

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/components/layout/sidebar/SidebarNavItem.svelte

@@ -45,6 +45,8 @@
     autoCollapse?: boolean;
     /** IDs of expandable items alongside this one */
     siblingIds?: string[];
+    /** Rendered inside another item's submenu panel (internal) */
+    nested?: boolean;
   }
 
   let {
@@ -62,6 +64,7 @@
     onMouseLeave,
     autoCollapse = false,
     siblingIds = [],
+    nested = false,
   }: Props = $props();
 
   // Highlight matching text in item names
@@ -99,11 +102,11 @@
     return cn(
       isLight &&
         !active &&
-        'text-foreground bg-background hover:bg-accent hover:text-accent-foreground',
+        'text-foreground bg-transparent hover:bg-accent hover:text-accent-foreground',
       isLight && active && 'bg-primary/10 text-primary',
       !isLight &&
         !active &&
-        'text-sidebar-foreground bg-sidebar hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        'text-sidebar-foreground bg-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
       !isLight && active && 'bg-sidebar-primary text-sidebar-primary-foreground',
       disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
     );
@@ -266,9 +269,12 @@
     <div
       class={cn(
         'group flex w-full items-center rounded-md',
-        isLight && !item.active && 'bg-background hover:bg-accent',
+        // Inside a submenu panel rows sit on the panel's grey, so no rest fill
+        isLight && !item.active && (nested ? 'bg-transparent' : 'bg-background'),
+        isLight && !item.active && 'hover:bg-accent',
         isLight && item.active && 'bg-primary/10',
-        !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
+        !isLight && !item.active && (nested ? 'bg-transparent' : 'bg-sidebar'),
+        !isLight && !item.active && 'hover:bg-sidebar-accent',
         !isLight && item.active && 'bg-sidebar-primary'
       )}
     >
@@ -372,54 +378,64 @@
     </div>
 
     {#if isExpanded}
-      <ul
-        class="mt-1 space-y-1 pl-4 overflow-hidden"
+      <!-- Submenu panel: an inset grey surface at the top level so open children
+           read as separate from the main list. Deeper levels get a left rail
+           instead, so the grey never stacks darker -->
+      <div
+        class={cn(
+          'mt-1 overflow-hidden',
+          !nested && 'ml-3 rounded-md p-1',
+          !nested && (isLight ? 'bg-muted/50' : 'bg-sidebar-accent/30')
+        )}
         transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
       >
-        {#each item.children ?? [] as child (child.id)}
-          <li>
-            {#if child.children?.length}
-              <!-- A nested category: same expandable row, one level deeper -->
-              <SidebarNavItem
-                item={child}
-                {isLight}
-                {isMobile}
-                {icon}
-                {searchQuery}
-                {onNavigate}
-                {autoCollapse}
-                siblingIds={expandableChildIds}
-              />
-            {:else}
-              <a
-                href={child.disabled ? undefined : child.href}
-                class={cn(
-                  'flex min-w-0 items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-                  getItemStateClasses(child.active, child.disabled)
-                )}
-                target={child.external ? '_blank' : undefined}
-                rel={child.external ? 'noopener noreferrer' : undefined}
-                aria-current={child.active ? 'page' : undefined}
-                aria-disabled={child.disabled || undefined}
-                tabindex={child.disabled ? -1 : undefined}
-                onclick={(e) => {
-                  if (child.disabled) {
-                    e.preventDefault();
-                    return;
-                  }
-                  onNavigate?.(child);
-                }}
-              >
-                {@render navIcon(child)}
-                {@render highlightedName(child.name, highlightText(child.name, searchQuery))}
-                {@render navBadge(child.badge)}
-                {#if child.external}{@render externalIndicator()}{/if}
-              </a>
-            {/if}
-          </li>
-        {/each}
-      </ul>
+        <ul class={cn('space-y-1', nested && 'ml-3 border-l border-outline/40 pl-1')}>
+          {#each item.children ?? [] as child (child.id)}
+            <li>
+              {#if child.children?.length}
+                <!-- A nested category: same expandable row, one level deeper -->
+                <SidebarNavItem
+                  item={child}
+                  {isLight}
+                  {isMobile}
+                  {icon}
+                  {searchQuery}
+                  {onNavigate}
+                  {autoCollapse}
+                  siblingIds={expandableChildIds}
+                  nested
+                />
+              {:else}
+                <a
+                  href={child.disabled ? undefined : child.href}
+                  class={cn(
+                    'flex min-w-0 items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+                    getItemStateClasses(child.active, child.disabled)
+                  )}
+                  target={child.external ? '_blank' : undefined}
+                  rel={child.external ? 'noopener noreferrer' : undefined}
+                  aria-current={child.active ? 'page' : undefined}
+                  aria-disabled={child.disabled || undefined}
+                  tabindex={child.disabled ? -1 : undefined}
+                  onclick={(e) => {
+                    if (child.disabled) {
+                      e.preventDefault();
+                      return;
+                    }
+                    onNavigate?.(child);
+                  }}
+                >
+                  {@render navIcon(child)}
+                  {@render highlightedName(child.name, highlightText(child.name, searchQuery))}
+                  {@render navBadge(child.badge)}
+                  {#if child.external}{@render externalIndicator()}{/if}
+                </a>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      </div>
     {/if}
   </div>
 {:else}

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte.d.ts

@@ -32,6 +32,8 @@ interface Props {
     autoCollapse?: boolean;
     /** IDs of expandable items alongside this one */
     siblingIds?: string[];
+    /** Rendered inside another item's submenu panel (internal) */
+    nested?: boolean;
 }
 declare const SidebarNavItem: import("svelte").Component<Props, {}, "">;
 type SidebarNavItem = ReturnType<typeof SidebarNavItem>;

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