@classic-homes/theme-svelte 0.1.3 → 0.1.5

package/dist/lib/stores/sidebar.svelte.js

@@ -1,38 +1,208 @@
 /**
  * Sidebar Store - Svelte 5 runes-based state management for sidebar
  */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _SidebarStore_instances, _SidebarStore_initialized, _SidebarStore_loadedFromStorage, _SidebarStore_loadedExpansionFromStorage, _SidebarStore_persist, _SidebarStore_persistExpansion;
+const STORAGE_KEY = 'classic-theme-sidebar-open';
+const SECTIONS_STORAGE_KEY = 'classic-theme-sidebar-sections';
+const ITEMS_STORAGE_KEY = 'classic-theme-sidebar-items';
 class SidebarStore {
     constructor() {
+        _SidebarStore_instances.add(this);
         this.isOpen = $state(true);
         this.isMobile = $state(false);
+        this.expandedSections = $state(new Set());
+        this.expandedItems = $state(new Set());
+        _SidebarStore_initialized.set(this, false);
+        _SidebarStore_loadedFromStorage.set(this, false);
+        _SidebarStore_loadedExpansionFromStorage.set(this, false);
+    }
+    /**
+     * Whether the store has been initialized
+     */
+    get initialized() {
+        return __classPrivateFieldGet(this, _SidebarStore_initialized, "f");
+    }
+    /**
+     * Whether the sidebar open state was loaded from localStorage
+     */
+    get hasPersistedState() {
+        return __classPrivateFieldGet(this, _SidebarStore_loadedFromStorage, "f");
+    }
+    /**
+     * Whether expansion state was loaded from localStorage
+     */
+    get hasPersistedExpansionState() {
+        return __classPrivateFieldGet(this, _SidebarStore_loadedExpansionFromStorage, "f");
+    }
+    /**
+     * Initialize store with persisted state.
+     * Call this from a component's $effect to load saved state.
+     */
+    initialize() {
+        if (__classPrivateFieldGet(this, _SidebarStore_initialized, "f") || typeof window === 'undefined')
+            return;
+        __classPrivateFieldSet(this, _SidebarStore_initialized, true, "f");
+        try {
+            // Load sidebar open state
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored !== null) {
+                this.isOpen = stored === 'true';
+                __classPrivateFieldSet(this, _SidebarStore_loadedFromStorage, true, "f");
+            }
+            // Load expanded sections
+            const sections = localStorage.getItem(SECTIONS_STORAGE_KEY);
+            if (sections) {
+                this.expandedSections = new Set(JSON.parse(sections));
+                __classPrivateFieldSet(this, _SidebarStore_loadedExpansionFromStorage, true, "f");
+            }
+            // Load expanded items
+            const items = localStorage.getItem(ITEMS_STORAGE_KEY);
+            if (items) {
+                this.expandedItems = new Set(JSON.parse(items));
+                __classPrivateFieldSet(this, _SidebarStore_loadedExpansionFromStorage, true, "f");
+            }
+        }
+        catch {
+            // localStorage not available
+        }
     }
     /**
      * Toggle the sidebar open/closed state
      */
     toggle() {
         this.isOpen = !this.isOpen;
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
     }
     /**
      * Open the sidebar
      */
     open() {
         this.isOpen = true;
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
     }
     /**
      * Close the sidebar
      */
     close() {
         this.isOpen = false;
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
     }
     /**
      * Set mobile mode
      */
     setMobile(isMobile) {
         this.isMobile = isMobile;
-        // Auto-close sidebar on mobile
+        // Auto-close sidebar on mobile (don't persist mobile state)
         if (isMobile) {
             this.isOpen = false;
         }
     }
+    /**
+     * Toggle section expansion state
+     */
+    toggleSection(sectionId) {
+        const newSet = new Set(this.expandedSections);
+        if (newSet.has(sectionId)) {
+            newSet.delete(sectionId);
+        }
+        else {
+            newSet.add(sectionId);
+        }
+        this.expandedSections = newSet;
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistExpansion).call(this);
+    }
+    /**
+     * Toggle item expansion state
+     */
+    toggleItem(itemId) {
+        const newSet = new Set(this.expandedItems);
+        if (newSet.has(itemId)) {
+            newSet.delete(itemId);
+        }
+        else {
+            newSet.add(itemId);
+        }
+        this.expandedItems = newSet;
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistExpansion).call(this);
+    }
+    /**
+     * Check if a section is expanded
+     */
+    isSectionExpanded(sectionId) {
+        return this.expandedSections.has(sectionId);
+    }
+    /**
+     * Check if an item is expanded
+     */
+    isItemExpanded(itemId) {
+        return this.expandedItems.has(itemId);
+    }
+    /**
+     * Set default expansion for sections (called during initialization)
+     */
+    setDefaultSections(sectionIds) {
+        if (__classPrivateFieldGet(this, _SidebarStore_loadedExpansionFromStorage, "f"))
+            return;
+        this.expandedSections = new Set(sectionIds);
+    }
+    /**
+     * Set default expansion for items (called during initialization)
+     */
+    setDefaultItems(itemIds) {
+        if (__classPrivateFieldGet(this, _SidebarStore_loadedExpansionFromStorage, "f"))
+            return;
+        this.expandedItems = new Set(itemIds);
+    }
+    /**
+     * Force expand specific items (used during search to show matching children)
+     * This bypasses the persisted state check but doesn't persist the changes
+     */
+    forceExpandItems(itemIds) {
+        const newSet = new Set(this.expandedItems);
+        itemIds.forEach((id) => newSet.add(id));
+        this.expandedItems = newSet;
+        // Don't persist - this is temporary for search
+    }
+    /**
+     * Force expand specific sections (used during search)
+     * This bypasses the persisted state check but doesn't persist the changes
+     */
+    forceExpandSections(sectionIds) {
+        const newSet = new Set(this.expandedSections);
+        sectionIds.forEach((id) => newSet.add(id));
+        this.expandedSections = newSet;
+        // Don't persist - this is temporary for search
+    }
 }
+_SidebarStore_initialized = new WeakMap(), _SidebarStore_loadedFromStorage = new WeakMap(), _SidebarStore_loadedExpansionFromStorage = new WeakMap(), _SidebarStore_instances = new WeakSet(), _SidebarStore_persist = function _SidebarStore_persist() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(STORAGE_KEY, String(this.isOpen));
+    }
+    catch {
+        // localStorage not available
+    }
+}, _SidebarStore_persistExpansion = function _SidebarStore_persistExpansion() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(SECTIONS_STORAGE_KEY, JSON.stringify([...this.expandedSections]));
+        localStorage.setItem(ITEMS_STORAGE_KEY, JSON.stringify([...this.expandedItems]));
+    }
+    catch {
+        // localStorage not available
+    }
+};
 export const sidebarStore = new SidebarStore();

package/dist/lib/types/components.d.ts

@@ -80,3 +80,108 @@ export interface DataTableColumn<T = object> {
     /** Custom cell render function returning string */
     format?: (value: unknown, row: T) => string;
 }
+/**
+ * RadioGroup Types
+ */
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+}
+/**
+ * Combobox Types
+ */
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * MultiSelect Types
+ */
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Signature Types
+ */
+/** Signature output data */
+export interface SignatureData {
+    /** Unique identifier for this signature instance */
+    id: string;
+    /** The signature mode used */
+    mode: 'draw' | 'type';
+    /** Data URL of the signature image (PNG base64) */
+    dataUrl: string;
+    /** PNG blob (if requested) */
+    png?: Blob;
+    /** SVG string (if requested or mode is draw) */
+    svg?: string;
+    /** Typed name (if mode is type) */
+    typedName?: string;
+    /** Font used for typed signature */
+    font?: string;
+    /** Stroke data for reconstruction (draw mode) */
+    strokes?: SignatureStroke[];
+    /** Metadata for legal/audit purposes */
+    metadata: SignatureMetadata;
+}
+/** Individual stroke in draw mode */
+export interface SignatureStroke {
+    /** Stroke points */
+    points: SignaturePoint[];
+    /** Stroke color */
+    color: string;
+    /** Stroke width */
+    width: number;
+    /** Timestamp when stroke started */
+    startTime: number;
+    /** Timestamp when stroke ended */
+    endTime: number;
+}
+/** Point in a stroke */
+export interface SignaturePoint {
+    x: number;
+    y: number;
+    /** Pressure (0-1) if available */
+    pressure?: number;
+    /** Timestamp */
+    time: number;
+}
+/** Metadata captured with signature */
+export interface SignatureMetadata {
+    /** ISO timestamp when signature was created */
+    timestamp: string;
+    /** User agent string */
+    userAgent: string;
+    /** Canvas dimensions used */
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    /** Whether consent was given */
+    consented: boolean;
+    /** Consent text shown (for audit trail) */
+    consentText?: string;
+    /** Hash of signature data for tamper detection */
+    hash?: string;
+}
+/** Font configuration for typed signatures */
+export interface SignatureFont {
+    /** Font family name */
+    family: string;
+    /** Display name for font picker */
+    label: string;
+    /** CSS src URL or Google Fonts name */
+    src?: string;
+    /** Whether font is loaded from Google Fonts */
+    googleFont?: boolean;
+}
+/** Validation result */
+export interface SignatureValidationResult {
+    valid: boolean;
+    error?: string;
+}

package/dist/lib/types/layout.d.ts

@@ -13,8 +13,8 @@ export interface NavItem {
     id: string;
     /** Display name */
     name: string;
-    /** URL to navigate to */
-    href: string;
+    /** URL to navigate to (optional if item has children) */
+    href?: string;
     /** Icon name (app renders via snippet) */
     icon?: string;
     /** Optional badge (notification count, etc.) */
@@ -25,6 +25,14 @@ export interface NavItem {
     external?: boolean;
     /** Whether this item is currently active */
     active?: boolean;
+    /** Nested child items for submenus */
+    children?: NavItem[];
+    /** Whether submenu is expanded (for items with children) */
+    expanded?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item is in a loading state */
+    loading?: boolean;
 }
 /**
  * Navigation section for grouping nav items
@@ -85,6 +93,8 @@ export interface QuickLink {
     external?: boolean;
     /** Accessible label for screen readers (used in icon-only mode) */
     ariaLabel?: string;
+    /** Optional badge (notification count, etc.) */
+    badge?: string | number;
 }
 /**
  * Props for QuickLinks component
@@ -98,6 +108,8 @@ export interface QuickLinksProps {
     variant?: 'light' | 'dark';
     /** Custom icon renderer */
     icon?: Snippet<[QuickLink]>;
+    /** Accessible label for the navigation region */
+    ariaLabel?: string;
     /** Additional classes */
     class?: string;
 }
@@ -131,6 +143,8 @@ export interface DashboardLayoutProps {
     quickLinksDisplay?: 'list' | 'icons';
     /** Custom icon renderer for quick links */
     quickLinkIcon?: Snippet<[QuickLink]>;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
     /** Custom content at start of header */
     headerStart?: Snippet;
     /** Custom content at end of header */
@@ -139,6 +153,10 @@ export interface DashboardLayoutProps {
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Sidebar width when expanded in pixels (default: 256) */
+    expandedWidth?: number;
+    /** Sidebar width when collapsed in pixels (default: 64) */
+    collapsedWidth?: number;
     /** Main content */
     children: Snippet;
 }
@@ -167,6 +185,8 @@ export interface PublicLayoutProps {
 export interface SidebarProps {
     /** Navigation sections */
     navigation: NavSection[];
+    /** User roles for filtering navigation items */
+    userRoles?: string[];
     /** Visual variant - light (default) or dark */
     variant?: 'light' | 'dark';
     /** Whether sidebar is collapsed */
@@ -177,6 +197,8 @@ export interface SidebarProps {
     mobileOpen?: boolean;
     /** Callback when mobile sidebar should close */
     onClose?: () => void;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
     /** Custom logo snippet */
     logo?: Snippet;
     /** Custom icon renderer for nav items */
@@ -191,6 +213,14 @@ export interface SidebarProps {
     footer?: Snippet;
     /** Use stronger/thicker border */
     strongBorder?: boolean;
+    /** Sidebar width when expanded in pixels (default: 256) */
+    expandedWidth?: number;
+    /** Sidebar width when collapsed in pixels (default: 64) */
+    collapsedWidth?: number;
+    /** Enable search/filter input for navigation */
+    searchable?: boolean;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
     /** Additional classes */
     class?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",