@classic-homes/theme-svelte 0.1.5 → 0.1.6

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

@@ -77,7 +77,9 @@
     return cn(
       isLight && !active && 'text-foreground hover:bg-accent hover:text-accent-foreground',
       isLight && active && 'bg-primary/10 text-primary',
-      !isLight && !active && 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+      !isLight &&
+        !active &&
+        'text-sidebar-foreground 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'
     );
@@ -161,7 +163,7 @@
   <div>
     <div
       class={cn(
-        'flex w-full items-center rounded-md transition-colors overflow-hidden',
+        'group flex w-full items-center rounded-md transition-colors overflow-hidden',
         isLight && !item.active && 'hover:bg-accent',
         isLight && item.active && 'bg-primary/10',
         !isLight && !item.active && 'hover:bg-sidebar-accent',
@@ -175,9 +177,12 @@
           class={cn(
             'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-            isLight && !item.active && 'text-foreground hover:text-accent-foreground',
+            'group-hover:underline underline-offset-2',
+            isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
             isLight && item.active && 'text-primary',
-            !isLight && !item.active && 'hover:text-sidebar-accent-foreground',
+            !isLight &&
+              !item.active &&
+              'text-sidebar-foreground group-hover:text-sidebar-accent-foreground',
             !isLight && item.active && 'text-sidebar-primary-foreground',
             item.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
           )}
@@ -200,9 +205,11 @@
           class={cn(
             'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden text-left',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-            isLight && !item.active && 'text-foreground',
+            isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
             isLight && item.active && 'text-primary',
-            !isLight && !item.active && '',
+            !isLight &&
+              !item.active &&
+              'text-sidebar-foreground group-hover:text-sidebar-accent-foreground',
             !isLight && item.active && 'text-sidebar-primary-foreground',
             item.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
           )}
@@ -223,7 +230,9 @@
         class={cn(
           'flex items-center justify-center p-2 transition-colors rounded-md',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-          isLight ? 'hover:bg-accent/50' : 'hover:bg-sidebar-accent/50'
+          isLight
+            ? 'hover:bg-accent/50 group-hover:text-accent-foreground'
+            : 'text-sidebar-foreground hover:bg-sidebar-accent/50 group-hover:text-sidebar-accent-foreground'
         )}
         onclick={(e) => {
           e.preventDefault();

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -58,7 +58,7 @@
       <button
         onclick={toggleSection}
         class={cn(
-          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider transition-colors rounded-md',
+          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider transition-colors rounded-md overflow-hidden',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight
             ? 'text-muted-foreground hover:text-foreground'
@@ -67,10 +67,10 @@
         aria-expanded={isExpanded}
         aria-controls={`sidebar-section-${section.id}`}
       >
-        <span class="whitespace-nowrap">{section.title}</span>
+        <span class="truncate">{section.title}</span>
         <svg
           class={cn(
-            'h-4 w-4 transition-transform duration-200',
+            'h-4 w-4 shrink-0 transition-transform duration-200',
             isExpanded ? 'rotate-0' : '-rotate-90'
           )}
           fill="none"
@@ -89,7 +89,7 @@
       <!-- Non-collapsible section header -->
       <h2
         class={cn(
-          'mb-2 px-4 text-xs font-semibold uppercase tracking-wider',
+          'mb-2 px-4 text-xs font-semibold uppercase tracking-wider overflow-hidden truncate',
           isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
         )}
       >

package/dist/lib/index.d.ts

@@ -56,12 +56,15 @@ export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as AppShell } from './components/layout/AppShell.svelte';
 export { default as DashboardLayout } from './components/layout/DashboardLayout.svelte';
 export { default as PublicLayout } from './components/layout/PublicLayout.svelte';
+export { default as AuthLayout } from './components/layout/AuthLayout.svelte';
+export { default as ErrorLayout } from './components/layout/ErrorLayout.svelte';
 export { default as FormPageLayout } from './components/layout/FormPageLayout.svelte';
 export { default as Sidebar } from './components/layout/Sidebar.svelte';
 export { default as Header } from './components/layout/Header.svelte';
 export { default as Footer } from './components/layout/Footer.svelte';
 export { default as QuickLinks } from './components/layout/QuickLinks.svelte';
-export type { NavItem, NavSection, User, BackLink, QuickLink, QuickLinksProps, DashboardLayoutProps, PublicLayoutProps, FormPageLayoutProps, SidebarProps, HeaderProps, FooterProps, AppShellProps, } from './types/layout.js';
+export { default as HeaderSearch } from './components/HeaderSearch.svelte';
+export type { NavItem, NavSection, User, BackLink, QuickLink, QuickLinksProps, DashboardLayoutProps, PublicLayoutProps, AuthLayoutProps, AuthFooterLink, ErrorLayoutProps, FormPageLayoutProps, SidebarProps, HeaderProps, FooterProps, AppShellProps, SearchResultItem, SearchResultGroup, HeaderSearchConfig, } from './types/layout.js';
 export { toastStore, type Toast as ToastType, type ToastInput } from './stores/toast.svelte.js';
 export { sidebarStore } from './stores/sidebar.svelte.js';
 export { themeStore, type ThemeMode } from './stores/theme.svelte.js';

package/dist/lib/index.js

@@ -68,11 +68,14 @@ export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as AppShell } from './components/layout/AppShell.svelte';
 export { default as DashboardLayout } from './components/layout/DashboardLayout.svelte';
 export { default as PublicLayout } from './components/layout/PublicLayout.svelte';
+export { default as AuthLayout } from './components/layout/AuthLayout.svelte';
+export { default as ErrorLayout } from './components/layout/ErrorLayout.svelte';
 export { default as FormPageLayout } from './components/layout/FormPageLayout.svelte';
 export { default as Sidebar } from './components/layout/Sidebar.svelte';
 export { default as Header } from './components/layout/Header.svelte';
 export { default as Footer } from './components/layout/Footer.svelte';
 export { default as QuickLinks } from './components/layout/QuickLinks.svelte';
+export { default as HeaderSearch } from './components/HeaderSearch.svelte';
 // Stores
 export { toastStore } from './stores/toast.svelte.js';
 export { sidebarStore } from './stores/sidebar.svelte.js';

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
  */
@@ -157,6 +216,8 @@ export interface DashboardLayoutProps {
     expandedWidth?: number;
     /** Sidebar width when collapsed in pixels (default: 64) */
     collapsedWidth?: number;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
 }
@@ -176,6 +237,8 @@ export interface PublicLayoutProps {
     logo?: Snippet;
     /** Custom header end content */
     headerEnd?: Snippet;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
 }
@@ -226,16 +289,46 @@ export interface SidebarProps {
 }
 /**
  * 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;
 }
@@ -286,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.5",
+  "version": "0.1.6",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",