@classic-homes/theme-svelte 0.1.4 → 0.1.6

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

@@ -5,6 +5,65 @@
  * navigation, user data, and layout props.
  */
 import type { Snippet } from 'svelte';
+/**
+ * Generic search result item for header search
+ * Consumers can extend this interface for custom result types
+ */
+export interface SearchResultItem {
+    /** Unique identifier */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Optional description/excerpt */
+    description?: string;
+    /** Navigation URL */
+    href?: string;
+    /** Optional category/section for grouping */
+    category?: string;
+    /** Optional icon name */
+    icon?: string;
+}
+/**
+ * Search result group for categorized results
+ */
+export interface SearchResultGroup<T = SearchResultItem> {
+    /** Group title (e.g., "Pages", "Documentation") */
+    title: string;
+    /** Items in this group */
+    items: T[];
+}
+/**
+ * Search configuration for Header component
+ * Backend-agnostic - works with any search provider (Algolia, Fuse.js, custom API, etc.)
+ */
+export interface HeaderSearchConfig<T = SearchResultItem> {
+    /** Whether search is enabled/visible */
+    enabled?: boolean;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Called when user types (debounced). App should update results prop. */
+    onSearch?: (query: string) => void;
+    /** Called when user selects a result */
+    onSelect?: (item: T) => void;
+    /** Called when search dialog opens/closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Search results to display (flat list or grouped) */
+    results?: T[] | SearchResultGroup<T>[];
+    /** Whether results are currently loading */
+    loading?: boolean;
+    /** Message when no results found */
+    emptyMessage?: string;
+    /** Enable Cmd/Ctrl+K shortcut (default: true) */
+    enableShortcut?: boolean;
+    /** Custom shortcut key (default: 'k') */
+    shortcutKey?: string;
+    /** Trigger button variant: 'default' shows full search box, 'icon' shows icon-only button */
+    variant?: 'default' | 'icon';
+    /** Custom result item renderer */
+    renderResult?: Snippet<[T, boolean]>;
+    /** Custom empty state renderer */
+    renderEmpty?: Snippet;
+}
 /**
  * Navigation item for sidebar and header navigation
  */
@@ -13,8 +72,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 +84,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 +152,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 +167,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 +202,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 +212,12 @@ 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;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
 }
@@ -158,6 +237,8 @@ export interface PublicLayoutProps {
     logo?: Snippet;
     /** Custom header end content */
     headerEnd?: Snippet;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
 }
@@ -167,6 +248,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 +260,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,21 +276,59 @@ 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;
 }
 /**
  * Props for Header component
+ *
+ * A unified header component that supports both dashboard and public layouts.
+ * Use mobileBreakpoint to control responsive behavior and mobileNav for
+ * inline mobile navigation drawers.
  */
 export interface HeaderProps {
     /** Whether to show hamburger menu button (mobile) */
     showMenuButton?: boolean;
+    /** Whether the mobile menu is currently open (for aria-expanded) */
+    menuOpen?: boolean;
     /** Callback when menu button is clicked */
     onMenuClick?: () => void;
-    /** Custom start content (left side) */
+    /** Whether to show collapse/expand button (desktop sidebar toggle) */
+    showCollapseButton?: boolean;
+    /** Whether the sidebar is collapsed (for aria-expanded and icon direction) */
+    sidebarCollapsed?: boolean;
+    /** Callback when collapse button is clicked */
+    onCollapseClick?: () => void;
+    /** Page title displayed in header */
+    title?: string;
+    /** Custom start content (left side, after menu/collapse buttons) */
     start?: Snippet;
+    /** Navigation content (center/right on desktop, hidden on mobile) */
+    nav?: Snippet;
     /** Custom end content (right side) */
     end?: Snippet;
+    /** Mobile navigation drawer content (appears below header bar when menu is open) */
+    mobileNav?: Snippet;
+    /** Breakpoint at which to switch between mobile and desktop layouts */
+    mobileBreakpoint?: 'sm' | 'md' | 'lg';
+    /** Use stronger/thicker border */
+    strongBorder?: boolean;
+    /** Enable backdrop blur effect */
+    backdropBlur?: boolean;
+    /** Use elevated z-index (z-50 instead of z-30) */
+    elevated?: boolean;
+    /** Constrain content to max-width container */
+    maxWidth?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+    /** Search configuration */
+    search?: HeaderSearchConfig;
     /** Additional classes */
     class?: string;
 }
@@ -256,3 +379,80 @@ export interface FormPageLayoutProps {
     /** Additional classes for the container */
     class?: string;
 }
+/**
+ * Footer link for AuthLayout
+ */
+export interface AuthFooterLink {
+    /** Link label */
+    label: string;
+    /** Link URL */
+    href: string;
+    /** Opens in new tab */
+    external?: boolean;
+}
+/**
+ * Props for AuthLayout component
+ *
+ * A centered layout for authentication pages (login, signup, password reset, etc.)
+ * Composes AppShell for consistent base structure.
+ */
+export interface AuthLayoutProps {
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "Sign in to your account") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
+    /** Footer links (privacy policy, terms, etc.) */
+    footerLinks?: AuthFooterLink[];
+    /** Custom footer content (replaces footer links) */
+    footer?: Snippet;
+    /** Show decorative background */
+    showBackground?: boolean;
+    /** Background variant */
+    backgroundVariant?: 'default' | 'gradient' | 'pattern';
+    /** Maximum width of content card */
+    maxWidth?: 'sm' | 'md' | 'lg';
+    /** Additional classes for the container */
+    class?: string;
+    /** Main content (auth form) */
+    children: Snippet;
+}
+/**
+ * Props for ErrorLayout component
+ *
+ * A centered layout for error pages (404, 500, etc.)
+ * Composes AppShell for consistent base structure.
+ */
+export interface ErrorLayoutProps {
+    /** HTTP status code (404, 500, etc.) */
+    statusCode?: number;
+    /** Custom title (overrides default for status code) */
+    title?: string;
+    /** Error description/message */
+    description?: string;
+    /** Show logo at top */
+    showLogo?: boolean;
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Show "Go Home" button */
+    showHomeButton?: boolean;
+    /** Home button URL */
+    homeUrl?: string;
+    /** Home button text */
+    homeText?: string;
+    /** Show "Go Back" button */
+    showBackButton?: boolean;
+    /** Go back button text */
+    backText?: string;
+    /** Custom illustration/icon snippet (replaces status code display) */
+    illustration?: Snippet;
+    /** Additional action buttons or content */
+    actions?: Snippet;
+    /** Footer content */
+    footer?: Snippet;
+    /** Additional classes for the container */
+    class?: string;
+    /** Main content (custom error content, replaces default display) */
+    children?: Snippet;
+}

package/package.json

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