intelliwaketssveltekitv25 1.0.82 → 1.0.83

package/llm.txt

@@ -1,1635 +0,0 @@
-# IntelliWakeTSSvelteKitV2.5 - LLM Component Guide
-
-**Version:** 1.0.81
-**Technologies:** Svelte 5 | TypeScript | Tailwind CSS v4
-**Package:** `intelliwaketssveltekitv25`
-
-## Library Overview
-
-This is a professional SvelteKit component library providing 41 reusable UI components and 17 utility modules. Built with modern Svelte 5 features (runes, snippets, generics) and optimized for TypeScript developers building data-driven applications.
-
-**Key Features:**
-- Svelte 5 runes (`$state`, `$derived`, `$effect`, `$bindable`)
-- TypeScript generics for type-safe data handling
-- Tailwind CSS v4 with custom theme integration
-- Comprehensive form controls with two-way binding
-- Performance-optimized data display components
-- Responsive layout patterns
-
----
-
-## 🚨 CRITICAL: Native HTML Replacement Map
-
-**IMPORTANT FOR AI ASSISTANTS**: Before writing native HTML elements or standard UI patterns, check this table for library replacements. Always prefer library components over native HTML.
-
-| User Request | ❌ Do Not Use | ✅ Use Instead | Import Statement |
-|--------------|---------------|----------------|------------------|
-| Checkbox, toggle switch, on/off control | `<input type="checkbox">` | **Switch** | `import { Switch } from 'intelliwaketssveltekitv25'` |
-| Numeric input, currency, percentage, decimals | `<input type="number">` | **InputNumber** | `import { InputNumber } from 'intelliwaketssveltekitv25'` |
-| Modal dialog, popup, overlay | `<dialog>` or custom div overlay | **Modal** | `import { Modal } from 'intelliwaketssveltekitv25'` |
-| Dropdown menu, select replacement | `<select>` | **DropDown** | `import { DropDown } from 'intelliwaketssveltekitv25'` |
-| Data table, grid display | `<table>` with manual code | **ArrayTable** | `import { ArrayTable } from 'intelliwaketssveltekitv25'` |
-| Multi-line text input | `<textarea>` | **TextArea** | `import { TextArea } from 'intelliwaketssveltekitv25'` |
-| Multi-select, tags, categories | `<select multiple>` or custom | **MultiSelect** | `import { MultiSelect } from 'intelliwaketssveltekitv25'` |
-
----
-
-## Component Documentation
-
-### Switch
-
-**Replaces:** `<input type="checkbox">` for ALL toggle switches and boolean controls
-**Purpose:** Custom styled toggle switch with smooth animations, accessibility, and two-way data binding
-**When to Use:**
-- Feature toggles (enable/disable settings)
-- Boolean preferences (notifications on/off)
-- Any on/off state in settings or forms
-- **NOT for multiple selections** (use CheckBox component for that)
-
-**Key Props:**
-
-- `checked?: boolean` ($bindable) - Current checked state, use `bind:checked` for two-way binding
-- `disabled?: boolean` (default: false) - Disables user interaction, grays out the switch
-- `readonly?: boolean` (default: false) - Visual display only, no interaction allowed
-- `name?: string` - Form field name for HTML form submissions
-- `value?: unknown` - Value to submit when checked (default: boolean checked state)
-- `offValue?: unknown` - Value to submit when unchecked (default: undefined)
-- `displayCheckInverse?: boolean` - Inverts visual display (useful for "disabled" semantics)
-- `hidden?: boolean` - Hides the component
-- `class?: string` - Additional CSS classes for the wrapper
-- `oncheck?: (val: boolean) => void` - Callback fired when checked state changes
-- `use?: ActionArray` - Svelte actions array
-- `id?: string` - HTML id attribute
-- `form?: string` - Associate with a specific form by ID
-
-**Snippets:**
-- `children?: Snippet` - Label content displayed to the right of the switch
-
-**Usage Examples:**
-
-```svelte
-<!-- Basic toggle -->
-<script>
-  import { Switch } from 'intelliwaketssveltekitv25';
-  let notificationsEnabled = $state(false);
-</script>
-
-<Switch bind:checked={notificationsEnabled}>
-  Enable Email Notifications
-</Switch>
-
-<!-- In a form with name attribute -->
-<form method="POST">
-  <Switch name="agreeToTerms" bind:checked={agreedToTerms}>
-    I agree to the terms and conditions
-  </Switch>
-  <button type="submit">Submit</button>
-</form>
-
-<!-- Disabled state -->
-<Switch checked={true} disabled>
-  Premium Feature (Upgrade Required)
-</Switch>
-
-<!-- With oncheck callback -->
-<Switch
-  bind:checked={darkModeEnabled}
-  oncheck={(isChecked) => {
-    console.log('Dark mode:', isChecked);
-    // Apply theme changes
-  }}
->
-  Dark Mode
-</Switch>
-
-<!-- Custom value submission -->
-<Switch
-  name="subscription"
-  bind:checked={isSubscribed}
-  value="premium"
-  offValue="free"
->
-  Premium Subscription
-</Switch>
-
-<!-- Display inverse (show as "on" when feature is disabled) -->
-<Switch bind:checked={disableTracking} displayCheckInverse>
-  Disable Tracking
-</Switch>
-```
-
-**Common Mistakes:**
-
-- ❌ Using `value` prop for binding: `<Switch bind:value={x}>`
-  ✅ Correct: `<Switch bind:checked={x}>`
-
-- ❌ Forgetting `bind:` directive: `<Switch checked={x}>`
-  ✅ Correct: `<Switch bind:checked={x}>` (for two-way binding)
-
-- ❌ Wrapping in `<label>`: `<label><Switch /></label>`
-  ✅ Correct: `<Switch>Label Text</Switch>` (uses children snippet internally)
-
-- ❌ Using Switch for multiple selections from a list
-  ✅ Correct: Use `CheckBox` component for multi-select scenarios
-
-**Related Components:**
-- `CheckBox` - For custom checkbox styling (not toggle appearance)
-- `SwitchDateNull` - Toggle that sets/clears a date value
-
-**Storybook:** See `Components/Switch` stories for interactive examples
-
----
-
-### InputNumber
-
-**Replaces:** `<input type="number">` for ALL numeric inputs
-**Purpose:** Formatted numeric input with automatic currency, percentage, and decimal handling
-**When to Use:**
-- Currency amounts (prices, costs, payments)
-- Percentages (tax rates, discounts, progress)
-- Decimal numbers (measurements, weights, quantities)
-- Integer counts with min/max constraints
-- Any numeric data entry where formatting matters
-
-**Key Props:**
-
-- `value?: number | null` ($bindable) - Current numeric value, use `bind:value`
-- `currency?: boolean` - Format as currency (adds $ prefix, 2 decimal places)
-- `percent?: boolean` - Format as percentage (adds % suffix, stores as decimal 0-1, displays as 0-100)
-- `fixedDecimals?: number` - Force exact number of decimal places
-- `minDecimals?: number` - Minimum decimal places to show
-- `maxDecimals?: number` - Maximum decimal places allowed
-- `min?: number` - Minimum allowed value (enforced on input)
-- `max?: number` - Maximum allowed value (enforced on input)
-- `allowNegative?: boolean` - Allow negative numbers (default: false)
-- `zeroBlank?: boolean` - Display empty string instead of 0
-- `zeroDash?: boolean` - Display "-" instead of 0
-- `nullBlank?: boolean` - Display empty string for null values
-- `nullDash?: boolean` - Display "-" for null values
-- `prefix?: string` - Custom prefix (overrides currency $)
-- `suffix?: string` - Custom suffix (overrides percent %)
-- `delayChange?: boolean | number | 'blur'` - Delay before updating bound value
-  - `true`: 1500ms delay
-  - `number`: Custom milliseconds delay
-  - `'blur'`: Update only on blur event
-- `widthNumbers?: number` - Set input width based on number of digits
-- `class?: string` - Additional CSS classes for wrapper div
-- `inputClass?: string` - CSS classes for the input element itself
-- `onchange?: (value: number | null) => void` - Callback when value changes
-- Standard HTML input props: `disabled`, `readonly`, `required`, `name`, `placeholder`, `id`, etc.
-
-**TypeScript Type:** `TInputNumberAttributes` (extends standard input attributes)
-
-**Usage Examples:**
-
-```svelte
-<script>
-  import { InputNumber } from 'intelliwaketssveltekitv25';
-  let price = $state(29.99);
-  let taxRate = $state(0.08); // 8% stored as 0.08, displays as 8
-  let quantity = $state(1);
-  let weight = $state(null);
-</script>
-
-<!-- Currency input -->
-<label>
-  Price:
-  <InputNumber bind:value={price} currency required />
-</label>
-<!-- Displays: $29.99 -->
-
-<!-- Percentage input -->
-<label>
-  Tax Rate:
-  <InputNumber bind:value={taxRate} percent />
-</label>
-<!-- Displays: 8% (user enters 8, stored as 0.08) -->
-
-<!-- Integer quantity with constraints -->
-<label>
-  Quantity:
-  <InputNumber bind:value={quantity} fixedDecimals={0} min={1} max={999} />
-</label>
-
-<!-- Decimal with custom suffix -->
-<label>
-  Weight:
-  <InputNumber bind:value={weight} suffix="kg" maxDecimals={2} zeroBlank />
-</label>
-
-<!-- With delayed change (for expensive calculations) -->
-<InputNumber
-  bind:value={searchAmount}
-  currency
-  delayChange={true}
-  placeholder="Filter by amount..."
-/>
-<!-- Value updates 1.5 seconds after user stops typing -->
-
-<!-- Update only on blur -->
-<InputNumber
-  bind:value={finalTotal}
-  currency
-  delayChange="blur"
-/>
-
-<!-- Readonly display -->
-<InputNumber value={calculatedTotal} currency readonly />
-
-<!-- Allow negative numbers -->
-<InputNumber
-  bind:value={profitLoss}
-  currency
-  allowNegative
-  zeroDash
-/>
-
-<!-- Width based on digit count -->
-<InputNumber
-  bind:value={zipCode}
-  fixedDecimals={0}
-  widthNumbers={5}
-/>
-
-<!-- With change handler -->
-<InputNumber
-  bind:value={discount}
-  percent
-  onchange={(val) => {
-    console.log('Discount changed to:', val);
-    recalculateTotal();
-  }}
-/>
-```
-
-**Common Mistakes:**
-
-- ❌ Using `<input type="number">` for currency: `<input type="number" step="0.01">`
-  ✅ Correct: `<InputNumber currency bind:value={amount} />`
-
-- ❌ Storing percentages as whole numbers (8) instead of decimals (0.08)
-  ✅ Correct: Store as decimal (0.08), use `percent` prop to display as 8%
-
-- ❌ Not using `bind:value`: `<InputNumber value={x} />`
-  ✅ Correct: `<InputNumber bind:value={x} />` (for two-way binding)
-
-- ❌ Expecting immediate updates without considering `delayChange`
-  ✅ Correct: Use `delayChange="blur"` or `delayChange={false}` for immediate updates
-
-- ❌ Using both `currency` and `percent` props together
-  ✅ Correct: Use only one formatting option at a time
-
-**Props Combinations:**
-
-- **Currency:** `currency` (auto-adds $ prefix, 2 decimals)
-- **Percentage:** `percent` (auto-adds % suffix, multiplies display by 100)
-- **Integer:** `fixedDecimals={0}`
-- **Range validation:** `min={x} max={y}`
-- **Performance optimization:** `delayChange={true}` or `delayChange={500}` (ms) or `delayChange="blur"`
-- **Zero handling:** `zeroBlank` or `zeroDash`
-- **Null handling:** `nullBlank` or `nullDash`
-
-**Related Components:**
-- `InputNumberScroll` - Numeric input with scroll wheel adjustment support
-- `NumberFormat` - Display-only formatted number component
-
-**Storybook:** See `Components/InputNumber` stories
-
----
-
-### Modal
-
-**Replaces:** Native `<dialog>` element or custom div overlays with manual JavaScript
-**Purpose:** Full-featured modal dialog with draggable header, keyboard shortcuts, and flexible content slots
-**When to Use:**
-- Confirmation dialogs (delete, save, cancel operations)
-- Forms that need to overlay the main content
-- Multi-step workflows in a focused view
-- Detail views that shouldn't navigate away from current page
-- Any overlay content that requires user interaction before proceeding
-
-**Key Props:**
-
-- `show: unknown` ($bindable) - Control visibility: value equal to `noShowValue` hides modal, any other value shows it
-- `noShowValue?: unknown` (default: false) - The value to compare against `show` to determine if modal should be hidden
-- `forceNoShow?: boolean` - Force modal to be hidden regardless of `show` value
-- `width?: string` (default: '40em') - Modal width (CSS value like '40em', '500px', '80%')
-- `cancelButton?: string | false` (default: 'Cancel') - Cancel button text, or `false` to hide
-- `okButton?: string | false` (default: 'OK') - OK button text, or `false` to hide
-- `okDisabled?: boolean` - Disable the OK button
-- `okColor?: TDefaultColorPalate | null` - Color theme for OK button
-- `okFAProps?: IFAProps` - FontAwesome icon props for OK button
-- `okType?: 'submit' | 'button'` (default: 'button') - Button type for form integration
-- `okActionNotOnEnter?: boolean` - Prevent Enter key from triggering OK action
-- `noCloseOnOK?: boolean` (default: true) - Keep modal open after OK click (useful for form validation)
-- `overflowY?: 'auto' | 'visible' | 'hidden'` (default: 'auto') - Body overflow behavior
-- `disable?: boolean` - Disable all interactions (shows activity overlay)
-- `marginForStickyHeader?: boolean` - Add margin to body for sticky header support
-- `okButtonWrap?: boolean` - Allow OK/Cancel button text to wrap
-- `borderFooter?: boolean` (default: true) - Show border above footer
-- `class?: string` - Additional CSS classes for dialog element
-- `color?: TDefaultColorPalate | null` - Overall color theme
-- `classHeader?: string` - CSS classes for header section
-- `classBody?: string` - CSS classes for body section
-- `classFooter?: string` - CSS classes for footer section
-- `classButton?: string` - CSS classes for OK button
-- `onOK?: () => void` - Callback when OK button clicked (synchronous)
-- `onOKPromise?: () => Promise<unknown>` - Async callback for OK button (awaits promise before closing)
-- `onCancel?: () => void` - Callback when Cancel button clicked or modal dismissed
-- `onClose?: () => void` - Callback when modal closes (any reason)
-
-**Snippets:**
-- `header?: Snippet` - Header content (displays in colored bar with close button)
-- `body?: Snippet` - Main body content
-- `leftFooter?: Snippet` - Content in footer left section
-- `centerFooter?: Snippet` - Content in footer center section
-- `rightFooter?: Snippet` - Content in footer right section
-
-**Special Features:**
-- **Draggable:** Click and drag the header to reposition the modal
-- **Keyboard shortcuts:** Enter key triggers OK, Escape key cancels
-- **Activity overlay:** Automatically disables interaction when `disable` is true
-- **Backdrop click:** Clicking outside modal closes it (triggers cancel action)
-
-**Usage Examples:**
-
-```svelte
-<script>
-  import { Modal } from 'intelliwaketssveltekitv25';
-  let showConfirmDelete = $state(false);
-  let showEditForm = $state(null); // null = hidden, object = shown with data
-  let isProcessing = $state(false);
-</script>
-
-<!-- Simple confirmation dialog -->
-<Modal
-  bind:show={showConfirmDelete}
-  width="30em"
-  okButton="Delete"
-  cancelButton="Cancel"
-  onOK={() => {
-    performDelete();
-    showConfirmDelete = false;
-  }}
->
-  {#snippet header()}
-    Confirm Deletion
-  {/snippet}
-  {#snippet body()}
-    Are you sure you want to delete this item? This action cannot be undone.
-  {/snippet}
-</Modal>
-
-<!-- Form in modal with validation -->
-<Modal
-  bind:show={showEditForm}
-  width="50em"
-  okButton="Save Changes"
-  okType="submit"
-  noCloseOnOK={true}
-  onOKPromise={async () => {
-    // Validate and save
-    const result = await saveForm(showEditForm);
-    if (result.success) {
-      showEditForm = null; // Close on success
-    } else {
-      // Stay open on validation failure
-      throw new Error(result.error);
-    }
-  }}
->
-  {#snippet header()}
-    Edit User Profile
-  {/snippet}
-  {#snippet body()}
-    <form id="editForm">
-      <!-- Form fields here -->
-      <input type="text" name="name" value={showEditForm?.name} />
-      <input type="email" name="email" value={showEditForm?.email} />
-    </form>
-  {/snippet}
-</Modal>
-
-<!-- Modal with custom footer content -->
-<Modal
-  bind:show={showDetails}
-  okButton={false}
-  cancelButton="Close"
->
-  {#snippet header()}
-    Item Details
-  {/snippet}
-  {#snippet body()}
-    <p>Detailed information here...</p>
-  {/snippet}
-  {#snippet leftFooter()}
-    <button type="button" onclick={() => printDetails()}>
-      Print
-    </button>
-  {/snippet}
-  {#snippet rightFooter()}
-    <button type="button" onclick={() => exportDetails()}>
-      Export
-    </button>
-  {/snippet}
-</Modal>
-
-<!-- Modal with activity overlay during async operation -->
-<Modal
-  bind:show={showImport}
-  disable={isProcessing}
-  okButton="Import Data"
-  onOKPromise={async () => {
-    isProcessing = true;
-    try {
-      await importData();
-      showImport = false;
-    } finally {
-      isProcessing = false;
-    }
-  }}
->
-  {#snippet header()}
-    Import Data
-  {#snippet}
-  {#snippet body()}
-    <input type="file" accept=".csv" />
-  {/snippet}
-</Modal>
-
-<!-- Modal with custom width and no buttons -->
-<Modal
-  bind:show={showPreview}
-  width="90%"
-  okButton={false}
-  cancelButton={false}
-  onClose={() => {
-    // Cleanup when modal closes
-  }}
->
-  {#snippet header()}
-    Preview
-  {/snippet}
-  {#snippet body()}
-    <img src={previewUrl} alt="Preview" />
-  {/snippet}
-</Modal>
-
-<!-- Using noShowValue for object-based visibility -->
-<Modal
-  bind:show={selectedUser}
-  noShowValue={null}
-  okButton="Save"
->
-  {#snippet header()}
-    Edit {selectedUser?.name}
-  {/snippet}
-  {#snippet body()}
-    <!-- Edit form -->
-  {/snippet}
-</Modal>
-<!-- To show: selectedUser = {name: 'John', ...} -->
-<!-- To hide: selectedUser = null -->
-```
-
-**Common Mistakes:**
-
-- ❌ Not binding `show` prop: `<Modal show={x}>`
-  ✅ Correct: `<Modal bind:show={x}>` (for two-way binding)
-
-- ❌ Unclear `noShowValue` usage: `show={item}` with `noShowValue={null}` but forgetting to set `item = null` to close
-  ✅ Correct: Always set `show = noShowValue` to close the modal
-
-- ❌ Using `noCloseOnOK={false}` with `onOKPromise` without handling errors
-  ✅ Correct: Use `noCloseOnOK={true}` and manually close in promise, or handle all errors
-
-- ❌ Forgetting to prevent Enter key when using forms: Modal submits unexpectedly
-  ✅ Correct: Use `okActionNotOnEnter={true}` or `okType="submit"` with proper form handling
-
-- ❌ Not using `onOKPromise` for async operations, causing modal to close immediately
-  ✅ Correct: Use `onOKPromise` for async operations, not `onOK`
-
-**Related Components:**
-- `ModalFormAction` - Specialized modal for SvelteKit form actions
-- `ModalPromptControl` - Modal with prompt/confirmation patterns
-- `ActivityOverlay` - Loading overlay (used internally by Modal)
-
-**Storybook:** See `Components/Modal` stories
-
----
-
-### DropDown
-
-**Replaces:** `<select>` elements and custom dropdown menus
-**Purpose:** Rich dropdown menu with keyboard navigation, icons, search, and action handling
-**When to Use:**
-- Action menus (context menus, toolbar dropdowns)
-- Navigation dropdowns with links
-- Replacing `<select>` when you need icons, dividers, or complex items
-- Any menu that needs better UX than native `<select>`
-
-**Key Props:**
-
-- `show?: boolean` ($bindable) - Control dropdown open/closed state
-- `position?: TDropDownControlPosition` (default: null) - Menu position relative to button
-- `ddActions?: IDDAction[]` (default: []) - Array of menu items/actions (see IDDAction interface below)
-- `noCaret?: boolean` - Hide the dropdown arrow icon
-- `buttonTitle?: string | null` - Button text (if not using `button` snippet)
-- `buttonClass?: string` - CSS classes for the button
-- `controlClass?: string` - CSS classes for the dropdown wrapper
-- `toggleClass?: string` - CSS classes for the toggle container
-- `inputControl?: boolean` - Style button as input control
-- `fullBlock?: boolean` - Make button full width
-- `bodyClass?: string` - CSS classes for dropdown body/menu
-- `sameSize?: boolean` - Make dropdown menu same width as button
-- `zIndex?: number` (default: 40) - Z-index for dropdown positioning
-- `disabled?: boolean` - Disable the dropdown
-- `hidden?: boolean` - Hide the dropdown
-- `hideEmptyDDActions?: boolean` - Auto-hide if no actions provided
-- `verbose?: boolean` - Enable console logging for debugging
-- `dataColor?: TDefaultColorPalate` - Color theme for button
-- `clientWidth?: number` ($bindable) - Width of the button element
-
-**Snippets:**
-- `button?: Snippet` - Custom button content (overrides `buttonTitle`)
-- `actions?: Snippet` - Custom menu content (in addition to or instead of `ddActions`)
-
-**IDDAction Interface** (menu items):
-
-```typescript
-interface IDDAction {
-  title?: string                    // Display text
-  key?: string | number              // Unique key for item
-  divider?: boolean                  // Render as divider line
-  header?: boolean                   // Render as header text (bold, no click)
-  dividerGroup?: string              // Auto-add divider when group changes
-  headerGroup?: string               // Auto-add header when group changes
-  active?: boolean                   // Highlight as active/selected
-  disabled?: boolean                 // Disable interaction
-  hidden?: boolean                   // Hide from menu
-  indented?: boolean                 // Indent item (for hierarchy)
-
-  // Actions
-  action?: () => void                // Click handler
-  href?: string                      // Navigation URL
-  hrefReplace?: boolean              // Use replaceState navigation
-  hrefDownload?: string              // Download URL
-  hrefDownloadFilename?: string      // Filename for download
-
-  // Visual
-  faProps?: IFAProps                 // FontAwesome icon
-  imageHref?: string                 // Image URL for icon
-
-  // Alternate action (right side button)
-  alternateAction?: () => void       // Right-side button action
-  alternateTitle?: string            // Right-side button text
-  alternateFAProps?: IFAProps        // Right-side button icon
-  alternateNoClose?: boolean         // Keep menu open after alternate action
-
-  // Behavior
-  noCloseMenu?: boolean              // Keep menu open after action
-}
-```
-
-**Keyboard Navigation:**
-- **Arrow Down:** Open menu / Move to next item
-- **Arrow Up:** Move to previous item
-- **Enter:** Execute selected item action
-- **Tab:** Close menu
-- **Type letter:** Jump to first item starting with that letter
-
-**Usage Examples:**
-
-```svelte
-<script>
-  import { DropDown } from 'intelliwaketssveltekitv25';
-  import { faEdit, faTrash, faCopy } from '@fortawesome/free-solid-svg-icons';
-
-  let showMenu = $state(false);
-  let selectedOption = $state('option1');
-
-  const actions = [
-    {
-      title: 'Edit',
-      faProps: { icon: faEdit },
-      action: () => editItem()
-    },
-    {
-      title: 'Duplicate',
-      faProps: { icon: faCopy },
-      action: () => duplicateItem()
-    },
-    { divider: true },
-    {
-      title: 'Delete',
-      faProps: { icon: faTrash },
-      action: () => deleteItem()
-    }
-  ];
-</script>
-
-<!-- Simple action menu -->
-<DropDown
-  bind:show={showMenu}
-  buttonTitle="Actions"
-  ddActions={actions}
-/>
-
-<!-- As select replacement with active indicator -->
-<DropDown
-  bind:show={showOptions}
-  buttonTitle={selectedOption}
-  ddActions={[
-    {
-      title: 'Option 1',
-      active: selectedOption === 'option1',
-      action: () => selectedOption = 'option1'
-    },
-    {
-      title: 'Option 2',
-      active: selectedOption === 'option2',
-      action: () => selectedOption = 'option2'
-    },
-    {
-      title: 'Option 3',
-      active: selectedOption === 'option3',
-      action: () => selectedOption = 'option3'
-    }
-  ]}
-  inputControl
-/>
-
-<!-- With navigation links -->
-<DropDown
-  buttonTitle="Navigate"
-  ddActions={[
-    { title: 'Dashboard', href: '/dashboard' },
-    { title: 'Settings', href: '/settings' },
-    { divider: true },
-    { title: 'Logout', href: '/logout', hrefReplace: true }
-  ]}
-/>
-
-<!-- With grouped items -->
-<DropDown
-  buttonTitle="Options"
-  ddActions={[
-    { title: 'File Operations', header: true },
-    { title: 'Open', action: () => open() },
-    { title: 'Save', action: () => save() },
-    { divider: true },
-    { title: 'Edit Operations', header: true },
-    { title: 'Cut', action: () => cut() },
-    { title: 'Copy', action: () => copy() },
-    { title: 'Paste', action: () => paste() }
-  ]}
-/>
-
-<!-- With auto-grouping by headerGroup -->
-<DropDown
-  buttonTitle="Grouped"
-  ddActions={[
-    { title: 'Item 1', headerGroup: 'Group A', action: () => {} },
-    { title: 'Item 2', headerGroup: 'Group A', action: () => {} },
-    { title: 'Item 3', headerGroup: 'Group B', action: () => {} },
-    { title: 'Item 4', headerGroup: 'Group B', action: () => {} }
-  ]}
-/>
-<!-- Automatically adds headers "Group A" and "Group B" -->
-
-<!-- Custom button content -->
-<DropDown bind:show={showCustom} ddActions={actions}>
-  {#snippet button()}
-    <Icon icon={faEllipsisV} />
-    More Options
-  {/snippet}
-</DropDown>
-
-<!-- Full width dropdown -->
-<DropDown
-  buttonTitle="Select Option"
-  ddActions={options}
-  fullBlock
-  sameSize
-  inputControl
-/>
-
-<!-- With disabled items -->
-<DropDown
-  buttonTitle="Actions"
-  ddActions={[
-    { title: 'Available Action', action: () => {} },
-    { title: 'Coming Soon', disabled: true },
-    { title: 'Premium Only', disabled: true }
-  ]}
-/>
-
-<!-- With alternate actions (two buttons per row) -->
-<DropDown
-  buttonTitle="Files"
-  ddActions={[
-    {
-      title: 'document.pdf',
-      action: () => openFile('document.pdf'),
-      alternateAction: () => downloadFile('document.pdf'),
-      alternateFAProps: { icon: faDownload }
-    }
-  ]}
-/>
-
-<!-- Download action -->
-<DropDown
-  buttonTitle="Export"
-  ddActions={[
-    {
-      title: 'Export as CSV',
-      hrefDownload: '/api/export?format=csv',
-      hrefDownloadFilename: 'data.csv'
-    },
-    {
-      title: 'Export as PDF',
-      hrefDownload: '/api/export?format=pdf',
-      hrefDownloadFilename: 'data.pdf'
-    }
-  ]}
-/>
-```
-
-**Common Mistakes:**
-
-- ❌ Not providing `action`, `href`, or `hrefDownload` for menu items
-  ✅ Correct: Every menu item (except dividers/headers) needs an action
-
-- ❌ Using DropDown when MultiSelect is more appropriate
-  ✅ Correct: Use `MultiSelect` for selecting multiple options, `DropDown` for single actions/selections
-
-- ❌ Forgetting to handle menu close in custom `noCloseMenu` actions
-  ✅ Correct: Manually set `show = false` when using `noCloseMenu: true`
-
-- ❌ Not using `bind:show` for controlled dropdowns
-  ✅ Correct: `<DropDown bind:show={showMenu}>` to control open/close state
-
-- ❌ Using complex objects as `key` without providing unique string/number keys
-  ✅ Correct: Always provide `key` prop for array items
-
-**Related Components:**
-- `DropDownControl` - Lower-level dropdown control (used internally by DropDown)
-- `MultiSelect` - For selecting multiple options from a list
-- `Importer` - Specialized dropdown for file imports
-
-**Storybook:** See `Components/DropDown` stories
-
----
-
-### ArrayTable
-
-**Replaces:** Manual `<table>` implementations with sorting, formatting, and event handling
-**Purpose:** Type-safe, sortable data table with automatic formatting, custom cell rendering, and row/column interactions
-**When to Use:**
-- Displaying arrays of data objects
-- Sortable tables with column headers
-- Tables with computed values or custom formatting
-- Data grids with row click actions
-- Reports and dashboards with tabular data
-
-**Key Props:**
-
-- `arrayData: T[] | null` - Array of data objects (generic type T)
-- `arrayStructure: IArrayStructure<T>` - Column definitions and table configuration (see interface below)
-- `bordered?: boolean` - Add borders to table cells
-- `scrollable?: boolean` - Make table sticky-header scrollable
-- `class?: string` - Additional CSS classes for table element
-- `minWidth?: string` - Minimum table width (CSS value)
-- `hideCosts?: boolean` - Hide columns marked as costs
-- `tableRef?: HTMLTableElement` ($bindable) - Reference to the table DOM element
-
-**TypeScript:** Uses generics `<T extends Record<string, any>>` for type safety
-
-**IArrayStructure Interface:**
-
-```typescript
-interface IArrayStructure<T> {
-  columns: IArrayColumn<T>[]          // Column definitions
-  sortable?: boolean                  // Enable column header sorting
-  defaultSortColumn?: keyof T         // Initial sort column
-  defaultSortAscending?: boolean      // Initial sort direction
-  minColSize?: string                 // Minimum column size class
-  emptyMessage?: string | false       // Message when no data (default: "No data available")
-  rowClick?: (row: T) => void         // Row click handler
-}
-
-interface IArrayColumn<T> {
-  fieldName: keyof T                  // Data field name
-  title?: string                      // Column header (auto-generated from fieldName if not provided)
-  hidden?: boolean                    // Hide column
-  doNotSort?: boolean                 // Disable sorting for this column
-  isACost?: boolean                   // Mark as cost (hideable via hideCosts prop)
-  size?: string                       // Column size class (td-sm, td-md, td-lg, etc.)
-
-  // Formatting
-  type?: 'currency' | 'percent' | 'date' | 'datetime' | 'boolean' | 'number'
-  decimals?: number                   // Decimal places for numbers
-  align?: 'left' | 'center' | 'right' // Text alignment (auto-detects for currency/numbers)
-
-  // Custom rendering
-  compute?: (value: any, row: T) => any   // Transform value before display
-  format?: (value: any, row: T) => string // Custom display formatting
-  onclick?: (row: T, event: MouseEvent) => void // Cell click handler
-
-  // Footer
-  sum?: boolean                       // Show sum in footer
-  average?: boolean                   // Show average in footer
-  count?: boolean                     // Show count in footer
-}
-```
-
-**Features:**
-- **Auto-formatting:** Currency, percentages, dates automatically formatted based on `type`
-- **Sorting:** Click column headers to sort (ascending/descending toggle)
-- **Type-safe:** TypeScript generic ensures column field names match data object keys
-- **Computed values:** Transform data before display with `compute` function
-- **Footer totals:** Automatic sums, averages, and counts
-- **Empty state:** Customizable message when no data
-
-**Usage Examples:**
-
-```svelte
-<script lang="ts">
-  import { ArrayTable } from 'intelliwaketssveltekitv25';
-
-  interface User {
-    id: number;
-    name: string;
-    email: string;
-    role: string;
-    salary: number;
-    active: boolean;
-  }
-
-  let users: User[] = $state([
-    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', salary: 75000, active: true },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', salary: 60000, active: true },
-    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', salary: 55000, active: false }
-  ]);
-
-  const userTableStructure: IArrayStructure<User> = {
-    columns: [
-      { fieldName: 'id', title: 'ID', size: 'sm' },
-      { fieldName: 'name', title: 'Name' },
-      { fieldName: 'email', title: 'Email' },
-      { fieldName: 'role', title: 'Role' },
-      {
-        fieldName: 'salary',
-        title: 'Salary',
-        type: 'currency',
-        sum: true
-      },
-      {
-        fieldName: 'active',
-        title: 'Status',
-        compute: (val) => val ? 'Active' : 'Inactive'
-      }
-    ],
-    sortable: true,
-    defaultSortColumn: 'name',
-    defaultSortAscending: true,
-    rowClick: (user) => {
-      console.log('Clicked user:', user.name);
-      // Navigate or open modal
-    }
-  };
-</script>
-
-<ArrayTable
-  arrayData={users}
-  arrayStructure={userTableStructure}
-  bordered
-/>
-
-<!-- Simple table without row click -->
-<ArrayTable
-  arrayData={products}
-  arrayStructure={{
-    columns: [
-      { fieldName: 'name', title: 'Product' },
-      { fieldName: 'price', type: 'currency' },
-      { fieldName: 'stock', title: 'In Stock' }
-    ],
-    sortable: true
-  }}
-/>
-
-<!-- With custom formatting and computed columns -->
-<script>
-  interface Sale {
-    date: string;
-    amount: number;
-    taxRate: number;
-  }
-
-  const salesStructure: IArrayStructure<Sale> = {
-    columns: [
-      {
-        fieldName: 'date',
-        title: 'Date',
-        type: 'date'
-      },
-      {
-        fieldName: 'amount',
-        title: 'Subtotal',
-        type: 'currency'
-      },
-      {
-        fieldName: 'taxRate',
-        title: 'Tax Rate',
-        type: 'percent'
-      },
-      {
-        fieldName: 'amount', // Reuse field for computed column
-        title: 'Tax Amount',
-        type: 'currency',
-        compute: (amount, row) => amount * row.taxRate
-      },
-      {
-        fieldName: 'amount',
-        title: 'Total',
-        type: 'currency',
-        compute: (amount, row) => amount * (1 + row.taxRate),
-        sum: true // Show total in footer
-      }
-    ],
-    sortable: true
-  };
-</script>
-
-<ArrayTable
-  arrayData={sales}
-  arrayStructure={salesStructure}
-/>
-
-<!-- Empty state -->
-<ArrayTable
-  arrayData={[]}
-  arrayStructure={{
-    columns: [
-      { fieldName: 'name' },
-      { fieldName: 'value' }
-    ],
-    emptyMessage: 'No items found. Add your first item to get started.'
-  }}
-/>
-
-<!-- Scrollable table with sticky header -->
-<ArrayTable
-  arrayData={largeDataset}
-  arrayStructure={structureDef}
-  scrollable
-  class="max-h-96"
-/>
-
-<!-- With cell click handlers -->
-<script>
-  const tableStructure: IArrayStructure<Item> = {
-    columns: [
-      { fieldName: 'name' },
-      {
-        fieldName: 'status',
-        onclick: (row, event) => {
-          event.stopPropagation(); // Prevent row click
-          toggleStatus(row);
-        }
-      }
-    ],
-    rowClick: (row) => viewDetails(row)
-  };
-</script>
-
-<!-- Hide cost columns conditionally -->
-<ArrayTable
-  arrayData={budgetItems}
-  arrayStructure={{
-    columns: [
-      { fieldName: 'description' },
-      { fieldName: 'quantity' },
-      { fieldName: 'unitCost', type: 'currency', isACost: true },
-      { fieldName: 'totalCost', type: 'currency', isACost: true, sum: true }
-    ]
-  }}
-  hideCosts={!showCosts}
-/>
-```
-
-**Common Mistakes:**
-
-- ❌ Not providing generic type: `arrayStructure: IArrayStructure`
-  ✅ Correct: `arrayStructure: IArrayStructure<User>` (provides type safety)
-
-- ❌ Using wrong field names in column definitions (no TypeScript error if not using generics)
-  ✅ Correct: Use TypeScript generics to catch field name typos at compile time
-
-- ❌ Forgetting to set `sum: true` or `average: true` for footer totals
-  ✅ Correct: Add `sum: true` to columns where you want footer totals
-
-- ❌ Not handling `null` or `undefined` in `compute` functions
-  ✅ Correct: Add null checks in compute functions: `compute: (val) => val ?? 'N/A'`
-
-- ❌ Using `rowClick` and cell `onclick` without `stopPropagation`
-  ✅ Correct: Cell onclick handlers should call `event.stopPropagation()` to prevent row click
-
-**Related Components:**
-- `VirtualTable` - For very large datasets (10,000+ rows) with virtual scrolling
-- `ArrayFunctions` - Utility functions for array/table operations (imported automatically)
-
-**Storybook:** See `Components/ArrayTable` stories
-
----
-
-### TextArea
-
-**Replaces:** Native `<textarea>` elements
-**Purpose:** Auto-resizing textarea with automatic height adjustment and readonly display mode
-**When to Use:**
-- Multi-line text input (comments, descriptions, notes)
-- Forms requiring paragraph-length text entry
-- Any textarea that should grow/shrink with content
-- Readonly text display that preserves formatting
-
-**Key Props:**
-
-- `value: string | null` ($bindable) - Current text value, use `bind:value` for two-way binding
-- `readonly?: boolean` - Display as readonly (renders as DisplayHTML instead of textarea)
-- `propagateEnter?: boolean` (default: false) - Allow Enter key to propagate (useful in forms)
-- `use?: ActionArray` - Svelte actions array
-- Standard HTML textarea attributes: `placeholder`, `disabled`, `required`, `maxlength`, `rows`, `cols`, `name`, `class`, etc.
-
-**Features:**
-- **Auto-grow**: Automatically adjusts height to fit content using `autoGrow` action
-- **Readonly mode**: Displays as HTML when readonly (preserves formatting, line breaks)
-- **Enter key control**: Prevents Enter key propagation by default (prevents form submission)
-- **Full textarea API**: Supports all standard HTML textarea attributes
-
-**Usage Examples:**
-
-```svelte
-<script>
-  import { TextArea } from 'intelliwaketssveltekitv25';
-  let comment = $state('');
-  let description = $state('Product description here...');
-</script>
-
-<!-- Basic auto-resizing textarea -->
-<label>
-  Comment:
-  <TextArea bind:value={comment} placeholder="Enter your comment..." />
-</label>
-
-<!-- With max length -->
-<TextArea
-  bind:value={description}
-  maxlength={500}
-  placeholder="Describe the product..."
-  required
-/>
-
-<!-- Readonly display -->
-<TextArea value={savedComment} readonly />
-
-<!-- With Enter key propagation (for inline editing) -->
-<TextArea
-  bind:value={note}
-  propagateEnter={true}
-  placeholder="Press Enter to submit"
-/>
-
-<!-- In a form -->
-<form method="POST">
-  <TextArea
-    name="feedback"
-    bind:value={feedback}
-    placeholder="Your feedback..."
-    required
-  />
-  <button type="submit">Submit</button>
-</form>
-
-<!-- With custom styling -->
-<TextArea
-  bind:value={text}
-  class="border-2 border-blue-500 rounded-lg p-4"
-  placeholder="Styled textarea..."
-/>
-
-<!-- Disabled state -->
-<TextArea value={existingText} disabled />
-
-<!-- With rows (initial height) -->
-<TextArea
-  bind:value={longText}
-  rows={10}
-  placeholder="Start with 10 rows..."
-/>
-```
-
-**Common Mistakes:**
-
-- ❌ Using native `<textarea>` without auto-grow: `<textarea bind:value={x}>`
-  ✅ Correct: `<TextArea bind:value={x} />` (auto-grows automatically)
-
-- ❌ Not using `bind:value`: `<TextArea value={x} />`
-  ✅ Correct: `<TextArea bind:value={x} />` (for two-way binding)
-
-- ❌ Expecting readonly to show a textarea: `<TextArea value={x} readonly />`
-  ✅ Note: readonly mode displays as formatted HTML, not a textarea
-
-- ❌ Form submitting on Enter key when you don't want it to
-  ✅ Correct: Default behavior prevents Enter propagation; use `propagateEnter={true}` if you want form submission on Enter
-
-**Props Details:**
-
-- **Auto-grow behavior**: Height automatically adjusts as you type, no scrolling needed
-- **Readonly rendering**: Uses `DisplayHTML` component to show formatted text with line breaks preserved
-- **Enter key**: By default, Enter key is stopped from propagating to prevent accidental form submissions
-
-**Related Components:**
-- `DisplayHTML` - Used internally for readonly display
-- `InputNumber` - For single-line numeric inputs
-- `MultiSelect` - For selecting from predefined options
-
-**Storybook:** See `Components/TextArea` stories
-
----
-
-### MultiSelect
-
-**Replaces:** Multiple `<select multiple>` and custom multi-select implementations
-**Purpose:** Type-safe, searchable multi-select dropdown with dynamic item creation and keyboard navigation
-**When to Use:**
-- Selecting multiple items from a list (tags, categories, assignees)
-- Searchable selection with many options
-- Dynamic item creation (creating new tags on the fly)
-- Single-select with search (set `isMulti={false}`)
-- Type-safe selections with TypeScript generics
-
-**Key Props:**
-
-- `possibles: T[]` - Array of available items to select from (required)
-- `selected?: T[]` ($bindable) - Currently selected items array
-- `selectedIDs?: (number | string)[]` ($bindable) - Selected item IDs (alternative to selected)
-- `created?: T[]` ($bindable) - Items that were created (not in possibles)
-- `existing?: T[]` ($bindable) - Items that exist in possibles
-- `isMulti?: boolean` (default: true) - Allow multiple selections or single select
-- `allowClearAll?: boolean` (default: true) - Show clear all button
-- `create?: (value: string) => T | null` - Function to create new items from search text
-- `createValid?: (value: string) => boolean | string` - Validate new item creation (return string for error message)
-- `createPrefix?: string` (default: 'Create:') - Prefix text for create option
-- `displayValue?: (item: T) => string | number` - How to display items (default: item.name or item.id)
-- `idValue?: (item: T) => any` - How to get unique ID from items (default: item.id)
-- `keyValue?: (item: T) => any` - Key for Svelte each blocks (default: same as idValue)
-- `inputValue?: (item: T) => any` - Value for hidden form inputs (default: same as idValue)
-- `headerValue?: (item: T) => string | null` - Extract header/category from items for grouping
-- `show?: boolean` ($bindable) - Control dropdown open/closed state
-- `placeholder?: string` - Input placeholder text
-- `disabled?: boolean` - Disable all interactions
-- `readonly?: boolean` - Display only, no interaction
-- `required?: boolean` - Mark as required field
-- `invalid?: boolean` - Show invalid state
-- `autoFocus?: boolean` - Auto-focus input on mount
-- `name?: string` - Form field name (creates hidden inputs for each selected item)
-- `form?: string` - Associate with form by ID
-- Callback props: `onadd`, `onselect`, `oncreate`, `onchange`, `onclear`, `onclearall`
-
-**TypeScript:** Uses generics `<T extends TGenericMultiSelect>` for type safety
-
-**TGenericMultiSelect Interface:**
-```typescript
-interface TGenericMultiSelect {
-  id?: string | number;
-  name?: string;
-  header?: string; // For grouping
-  [key: string]: any; // Additional properties
-}
-```
-
-**Keyboard Navigation:**
-- **Arrow Down/Up**: Navigate dropdown options
-- **Enter**: Select highlighted option or create new item
-- **Backspace**: Remove last selected item (when search is empty)
-- **Type**: Filter options by search
-
-**Usage Examples:**
-
-```svelte
-<script lang="ts">
-  import { MultiSelect } from 'intelliwaketssveltekitv25';
-
-  interface Tag {
-    id: number;
-    name: string;
-  }
-
-  const availableTags: Tag[] = [
-    { id: 1, name: 'JavaScript' },
-    { id: 2, name: 'TypeScript' },
-    { id: 3, name: 'Svelte' }
-  ];
-
-  let selectedTags = $state<Tag[]>([]);
-</script>
-
-<!-- Basic multi-select -->
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  placeholder="Select tags..."
-/>
-
-<!-- With dynamic item creation -->
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  placeholder="Select or create tags..."
-  create={(name) => ({
-    id: Date.now(),
-    name: name
-  })}
-/>
-
-<!-- With creation validation -->
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  create={(name) => ({ id: Date.now(), name })}
-  createValid={(name) => {
-    if (name.length < 3) return 'Tag must be at least 3 characters';
-    if (availableTags.some(t => t.name.toLowerCase() === name.toLowerCase())) {
-      return 'Tag already exists';
-    }
-    return true;
-  }}
-/>
-
-<!-- Single select mode -->
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  isMulti={false}
-  placeholder="Select one..."
-/>
-
-<!-- With selected IDs binding -->
-<script>
-  let selectedTagIDs = $state<number[]>([1, 3]);
-</script>
-
-<MultiSelect
-  possibles={availableTags}
-  bind:selectedIDs={selectedTagIDs}
-  placeholder="Select tags..."
-/>
-
-<!-- With custom display function -->
-<script>
-  interface User {
-    id: number;
-    firstName: string;
-    lastName: string;
-    email: string;
-  }
-
-  const users: User[] = [
-    { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com' },
-    { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' }
-  ];
-
-  let assignees = $state<User[]>([]);
-</script>
-
-<MultiSelect
-  possibles={users}
-  bind:selected={assignees}
-  displayValue={(user) => `${user.firstName} ${user.lastName}`}
-  placeholder="Assign to..."
-/>
-
-<!-- With grouping/headers -->
-<script>
-  interface Item {
-    id: number;
-    name: string;
-    category: string;
-  }
-
-  const items: Item[] = [
-    { id: 1, name: 'Apple', category: 'Fruits' },
-    { id: 2, name: 'Banana', category: 'Fruits' },
-    { id: 3, name: 'Carrot', category: 'Vegetables' },
-    { id: 4, name: 'Lettuce', category: 'Vegetables' }
-  ];
-</script>
-
-<MultiSelect
-  possibles={items}
-  bind:selected={selectedItems}
-  headerValue={(item) => item.category}
-  placeholder="Select items..."
-/>
-
-<!-- In a form -->
-<form method="POST">
-  <MultiSelect
-    name="tags"
-    possibles={availableTags}
-    bind:selected={selectedTags}
-    required
-    placeholder="Select at least one tag..."
-  />
-  <button type="submit">Submit</button>
-</form>
-
-<!-- With callbacks -->
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  onadd={(id) => console.log('Added:', id)}
-  onselect={(id) => console.log('Selected existing:', id)}
-  oncreate={(id) => console.log('Created new:', id)}
-  onchange={(items) => console.log('Selection changed:', items)}
-  onclear={(id) => console.log('Removed:', id)}
-  onclearall={() => console.log('Cleared all')}
-/>
-
-<!-- Readonly/disabled -->
-<MultiSelect
-  possibles={availableTags}
-  selected={[availableTags[0], availableTags[2]]}
-  readonly
-/>
-
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  disabled
-/>
-
-<!-- Without clear all button -->
-<MultiSelect
-  possibles={availableTags}
-  bind:selected={selectedTags}
-  allowClearAll={false}
-/>
-```
-
-**Common Mistakes:**
-
-- ❌ Not providing `possibles` array: `<MultiSelect bind:selected={x} />`
-  ✅ Correct: `<MultiSelect possibles={items} bind:selected={x} />`
-
-- ❌ Binding to non-array for multi-select: `bind:selected={singleItem}`
-  ✅ Correct: `bind:selected={arrayOfItems}` (always an array, even for single select)
-
-- ❌ Not using TypeScript generics: `possibles: any[]`
-  ✅ Correct: `possibles: Tag[]` with `interface Tag extends TGenericMultiSelect`
-
-- ❌ Forgetting id or name in data objects: `possibles={[{label: 'Item'}]}`
-  ✅ Correct: `possibles={[{id: 1, name: 'Item'}]}` or provide custom `idValue` and `displayValue` functions
-
-- ❌ Using create without validation when it can fail
-  ✅ Correct: Use `createValid` to validate and show error messages
-
-- ❌ Not handling created vs existing items separately
-  ✅ Correct: Use `bind:created` and `bind:existing` to differentiate
-
-**Advanced Features:**
-
-**1. Dynamic Item Creation:**
-```svelte
-<MultiSelect
-  possibles={tags}
-  bind:selected={selectedTags}
-  bind:created={newlyCreatedTags}
-  bind:existing={existingSelectedTags}
-  create={(name) => ({ id: Date.now(), name })}
-  createPrefix="Add new:"
-  oncreate={(id) => {
-    // Save new tag to backend
-    saveNewTag(id);
-  }}
-/>
-```
-
-**2. Custom Value Functions:**
-```svelte
-<script>
-  interface ComplexItem {
-    uuid: string;
-    displayName: string;
-    sortOrder: number;
-  }
-</script>
-
-<MultiSelect
-  possibles={complexItems}
-  bind:selected={selectedItems}
-  idValue={(item) => item.uuid}
-  displayValue={(item) => item.displayName}
-  keyValue={(item) => item.uuid}
-  inputValue={(item) => item.uuid}
-/>
-```
-
-**3. Grouped Options:**
-```svelte
-<MultiSelect
-  possibles={groupedItems}
-  bind:selected={selectedItems}
-  headerValue={(item) => item.category}
-/>
-<!-- Automatically adds category headers when category changes -->
-```
-
-**Related Components:**
-- `DropDown` - For single action/selection without search
-- `DropDownControl` - Lower-level dropdown control (used internally)
-- `DisplayHTML` - Used to render item text
-
-**Storybook:** See `Components/MultiSelect` stories
-
----
-
-## Component Categories
-
-### Form Controls
-
-These components replace native HTML form elements with enhanced features, validation, and styling:
-
-- **Switch** - Toggle switches for boolean values
-- **InputNumber** - Numeric inputs with formatting
-- **CheckBox** - Custom checkboxes and radio buttons (not in Phase 1 docs)
-- **TextArea** - Auto-resizing text areas (not in Phase 1 docs)
-- **DropDown** - Replacement for `<select>` with rich features
-- **MultiSelect** - Multiple selection from lists (not in Phase 1 docs)
-
-### Layout & Navigation
-
-Components for structuring application layout and navigation:
-
-- **Modal** - Dialog overlays
-- **MasterDetailLayout** - Responsive master-detail pattern (not in Phase 1 docs)
-- **TabHeader**, **TabHref** - Tab navigation (not in Phase 1 docs)
-- **BlockNav** - Block-style navigation (not in Phase 1 docs)
-
-### Data Display
-
-Components for presenting data to users:
-
-- **ArrayTable** - Sortable data tables
-- **VirtualList**, **VirtualTable** - Performance-optimized large datasets (not in Phase 1 docs)
-- **Calendar**, **DateRangePicker** - Date selection (not in Phase 1 docs)
-- **Paginator** - Pagination controls (not in Phase 1 docs)
-
-### Visual & Feedback
-
-Components for visual elements and user feedback:
-
-- **Icon** - FontAwesome icon wrapper (not in Phase 1 docs)
-- **ActivityOverlay** - Loading overlays (used by Modal, not standalone)
-- **MessageBoxes** - Toast notifications (not in Phase 1 docs)
-
-### Utilities
-
-Helper modules and functions:
-
-- **Functions**, **FunctionsBrowser**, **FunctionsServer** - Utility functions
-- **PathAnalyzer** - Route parsing and navigation (not in Phase 1 docs)
-- **ArrayFunctions** - Array/table data helpers
-
----
-
-## Integration Requirements
-
-### Required Peer Dependencies
-
-```json
-{
-  "@solidbasisventures/intelliwaketsfoundation": "^5.13.57",
-  "@sveltejs/kit": "^2.49.2",
-  "svelte": "^5.46.1"
-}
-```
-
-### CSS Import (Required)
-
-```typescript
-// In your root +layout.svelte or app.css
-import 'intelliwaketssveltekitv25/dist/app.css';
-```
-
-### Tailwind Configuration (Required)
-
-Your project MUST define these custom Tailwind colors in your `tailwind.config.js`:
-
-```javascript
-theme: {
-  extend: {
-    colors: {
-      primary: {
-        main: '#your-color',
-        face: '#your-color',
-        hover: '#your-color',
-        light: '#your-color',
-        selected: '#your-color'
-      },
-      secondary: {
-        main: '#your-color',
-        light: '#your-color'
-      }
-    }
-  }
-}
-```
-
-You must also define these custom classes:
-- `.mdMasterHR` - Horizontal rule styling for MasterDetailLayout master header
-- `.mdDetailHR` - Horizontal rule styling for MasterDetailLayout detail header
-
----
-
-## Svelte 5 Patterns Used in This Library
-
-### Runes
-
-This library extensively uses Svelte 5 runes:
-
-- **`$state()`** - Reactive local state
-- **`$derived()`** - Computed values that update automatically
-- **`$effect()`** - Side effects that run when dependencies change
-- **`$bindable()`** - Two-way binding for component props
-- **`$props()`** - Component props declaration
-
-### Snippets
-
-Many components use Svelte 5's Snippet type for flexible content projection:
-
-```typescript
-import { type Snippet } from 'svelte';
-
-// Usage in component props
-{
-  header?: Snippet,
-  body?: Snippet<[dataType, index]>
-}
-
-// Rendering snippets
-{#if header}
-  {@render header()}
-{/if}
-```
-
-### TypeScript Generics
-
-Components like `ArrayTable` use TypeScript generics for type safety:
-
-```svelte
-<script lang="ts" generics="T extends Record<string, any>">
-  let {
-    arrayData,
-    arrayStructure
-  }: {
-    arrayData: T[],
-    arrayStructure: IArrayStructure<T>
-  } = $props()
-</script>
-```
-
----
-
-## Phase 2 Components (Coming Soon)
-
-The following components will be documented in Phase 2:
-
-- **CheckBox** - Custom checkbox with flexible indicator styling
-- **TextArea** - Auto-resizing textarea
-- **MultiSelect** - Multi-select dropdown
-- **VirtualList** - High-performance list for large datasets
-- **MasterDetailLayout** - Complex responsive layout pattern
-
----
-
-## Support & Documentation
-
-- **Full Project Documentation:** See `CLAUDE.md` in the package root
-- **Integration Guide:** See `INTEGRATION.md` in the package root
-- **Storybook:** Run `pnpm storybook` in the package directory for interactive component demos
-- **GitHub Issues:** Report bugs or request features at the package repository
-
----
-
-## Version History
-
-**Current Version:** 1.0.81 (Phase 1 Documentation)
-
-This documentation covers Phase 1 components. Additional components will be documented in future updates.
-
----
-
-_This documentation is optimized for LLM consumption. For human-readable tutorials and guides, see the Storybook documentation._