@classic-homes/theme-svelte 0.1.5 → 0.1.7

package/dist/lib/components/layout/Header.svelte

@@ -1,94 +1,285 @@
 <script lang="ts">
   /**
-   * Header - Application header component
+   * Header - Unified application header component
+   *
+   * A flexible header component that supports both dashboard and public layouts.
    *
    * Features:
    * - Hamburger menu button for mobile
-   * - Customizable start and end slots
-   * - Optional navigation slot with uppercase styling
-   * - Responsive design
+   * - Collapse/expand button for desktop sidebar
+   * - Customizable start, nav, and end slots
+   * - Mobile navigation drawer support
+   * - Optional page title
+   * - Backdrop blur support
+   * - Configurable responsive breakpoint (sm, md, lg)
+   * - Responsive design with container width options
    * - Stronger border styling to match brand guidelines
+   *
+   * @example Dashboard layout usage:
+   * ```svelte
+   * <Header
+   *   showMenuButton={isMobile}
+   *   menuOpen={sidebarOpen}
+   *   onMenuClick={() => toggleSidebar()}
+   *   showCollapseButton={!isMobile}
+   *   sidebarCollapsed={!sidebarOpen}
+   *   onCollapseClick={() => toggleSidebar()}
+   *   title="Dashboard"
+   * />
+   * ```
+   *
+   * @example Public layout usage:
+   * ```svelte
+   * <Header
+   *   showMenuButton={true}
+   *   menuOpen={mobileMenuOpen}
+   *   onMenuClick={() => mobileMenuOpen = !mobileMenuOpen}
+   *   mobileBreakpoint="md"
+   *   backdropBlur
+   *   elevated
+   *   maxWidth="7xl"
+   * >
+   *   {#snippet start()}
+   *     <a href="/"><Logo /></a>
+   *   {/snippet}
+   *   {#snippet nav()}
+   *     <NavLinks />
+   *   {/snippet}
+   *   {#snippet mobileNav()}
+   *     <MobileNavDrawer />
+   *   {/snippet}
+   * </Header>
+   * ```
    */
   import type { Snippet } from 'svelte';
+  import type { HeaderSearchConfig } from '../../types/layout.js';
   import { cn } from '../../utils.js';
+  import HeaderSearch from '../HeaderSearch.svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg';
 
   interface Props {
     /** 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?: Breakpoint;
     /** 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;
   }
 
   let {
     showMenuButton = false,
+    menuOpen = false,
     onMenuClick,
+    showCollapseButton = false,
+    sidebarCollapsed = false,
+    onCollapseClick,
+    title,
     start,
     nav,
     end,
+    mobileNav,
+    mobileBreakpoint = 'lg',
     strongBorder = false,
+    backdropBlur = false,
+    elevated = false,
+    maxWidth = 'none',
+    search,
     class: className,
   }: Props = $props();
+
+  // Responsive class mappings based on breakpoint
+  const breakpointClasses = {
+    sm: {
+      menuButtonHide: 'sm:hidden',
+      collapseButtonShow: 'hidden sm:block',
+      navShow: 'hidden sm:flex',
+      mobileNavHide: 'sm:hidden',
+    },
+    md: {
+      menuButtonHide: 'md:hidden',
+      collapseButtonShow: 'hidden md:block',
+      navShow: 'hidden md:flex',
+      mobileNavHide: 'md:hidden',
+    },
+    lg: {
+      menuButtonHide: 'lg:hidden',
+      collapseButtonShow: 'hidden lg:block',
+      navShow: 'hidden lg:flex',
+      mobileNavHide: 'lg:hidden',
+    },
+  };
+
+  const maxWidthClasses: Record<string, string> = {
+    none: '',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl',
+    '5xl': 'max-w-5xl',
+    '6xl': 'max-w-6xl',
+    '7xl': 'max-w-7xl',
+  };
+
+  const bp = $derived(breakpointClasses[mobileBreakpoint]);
 </script>
 
 <!--
   Header Layout Dimensions:
   - h-16 (64px): Standard header height, matches sidebar logo section
   - z-30: Below sidebar (z-50) and overlays (z-40), above main content
-  - px-4 / lg:px-6: Responsive horizontal padding (16px mobile, 24px desktop)
+  - z-50: Elevated mode for public layouts
+  - Responsive padding adapts to breakpoint and container width settings
 -->
 <header
   class={cn(
-    'sticky top-0 z-30 flex h-16 items-center justify-between bg-background px-4 lg:px-6',
-    strongBorder ? 'border-b-2 border-black' : 'border-b border-black',
+    'sticky top-0',
+    elevated ? 'z-50' : 'z-30',
+    backdropBlur
+      ? 'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'
+      : 'bg-background',
     className
   )}
 >
-  <div class="flex items-center gap-4">
-    <!-- Mobile Menu Button -->
-    {#if showMenuButton}
-      <button
-        class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground lg:hidden"
-        onclick={() => onMenuClick?.()}
-        aria-label="Open menu"
-      >
-        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16"
-          />
-        </svg>
-      </button>
-    {/if}
+  <!-- Main header bar wrapper - border spans full width, h-16 includes border for sidebar alignment -->
+  <div class={cn('h-16', strongBorder ? 'border-b-2 border-black' : 'border-b border-black')}>
+    <div
+      class={cn(
+        'flex h-full items-center justify-between px-4 sm:px-6 lg:px-8',
+        maxWidth !== 'none' && 'mx-auto',
+        maxWidthClasses[maxWidth]
+      )}
+    >
+      <div class="flex items-center gap-4">
+        <!-- Mobile Menu Button -->
+        {#if showMenuButton}
+          <button
+            class={cn(
+              'rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              bp.menuButtonHide
+            )}
+            onclick={() => onMenuClick?.()}
+            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={menuOpen}
+          >
+            {#if menuOpen}
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            {:else}
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            {/if}
+          </button>
+        {/if}
 
-    <!-- Start Content -->
-    {#if start}
-      {@render start()}
-    {/if}
-  </div>
+        <!-- Collapse/Expand Button (Desktop sidebar toggle) -->
+        {#if showCollapseButton}
+          <button
+            class={cn(
+              'rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              bp.collapseButtonShow
+            )}
+            onclick={() => onCollapseClick?.()}
+            aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            aria-expanded={!sidebarCollapsed}
+          >
+            <svg
+              class={cn('h-5 w-5 transition-transform', sidebarCollapsed && 'rotate-180')}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+              />
+            </svg>
+          </button>
+        {/if}
 
-  <!-- Navigation (hidden on mobile, shown on desktop) -->
-  {#if nav}
-    <nav class="hidden lg:flex items-center gap-6" aria-label="Main navigation">
-      {@render nav()}
-    </nav>
-  {/if}
+        <!-- Page Title -->
+        {#if title}
+          <h2 class="text-lg font-semibold">{title}</h2>
+        {/if}
+
+        <!-- Start Content -->
+        {#if start}
+          {@render start()}
+        {/if}
+      </div>
+
+      <!-- Navigation (hidden on mobile, shown on desktop) -->
+      {#if nav}
+        <nav class={cn('items-center gap-6', bp.navShow)} aria-label="Main navigation">
+          {@render nav()}
+        </nav>
+      {/if}
 
-  <!-- End Content -->
-  {#if end}
-    <div class="flex items-center gap-4">
-      {@render end()}
+      <!-- End Section (search + custom end content) -->
+      {#if search?.enabled || end}
+        <div class="flex items-center gap-4">
+          {#if search?.enabled}
+            <HeaderSearch {...search} />
+          {/if}
+          {#if end}
+            {@render end()}
+          {/if}
+        </div>
+      {/if}
     </div>
+  </div>
+
+  <!-- Mobile Navigation Drawer (appears below header bar when open) -->
+  {#if mobileNav && menuOpen}
+    <nav class={cn(bp.mobileNavHide)} aria-label="Mobile navigation">
+      {@render mobileNav()}
+    </nav>
   {/if}
 </header>

package/dist/lib/components/layout/Header.svelte.d.ts

@@ -1,27 +1,93 @@
 /**
-   * Header - Application header component
+   * Header - Unified application header component
+   *
+   * A flexible header component that supports both dashboard and public layouts.
    *
    * Features:
    * - Hamburger menu button for mobile
-   * - Customizable start and end slots
-   * - Optional navigation slot with uppercase styling
-   * - Responsive design
+   * - Collapse/expand button for desktop sidebar
+   * - Customizable start, nav, and end slots
+   * - Mobile navigation drawer support
+   * - Optional page title
+   * - Backdrop blur support
+   * - Configurable responsive breakpoint (sm, md, lg)
+   * - Responsive design with container width options
    * - Stronger border styling to match brand guidelines
+   *
+   * @example Dashboard layout usage:
+   * ```svelte
+   * <Header
+   *   showMenuButton={isMobile}
+   *   menuOpen={sidebarOpen}
+   *   onMenuClick={() => toggleSidebar()}
+   *   showCollapseButton={!isMobile}
+   *   sidebarCollapsed={!sidebarOpen}
+   *   onCollapseClick={() => toggleSidebar()}
+   *   title="Dashboard"
+   * />
+   * ```
+   *
+   * @example Public layout usage:
+   * ```svelte
+   * <Header
+   *   showMenuButton={true}
+   *   menuOpen={mobileMenuOpen}
+   *   onMenuClick={() => mobileMenuOpen = !mobileMenuOpen}
+   *   mobileBreakpoint="md"
+   *   backdropBlur
+   *   elevated
+   *   maxWidth="7xl"
+   * >
+   *   {#snippet start()}
+   *     <a href="/"><Logo /></a>
+   *   {/snippet}
+   *   {#snippet nav()}
+   *     <NavLinks />
+   *   {/snippet}
+   *   {#snippet mobileNav()}
+   *     <MobileNavDrawer />
+   *   {/snippet}
+   * </Header>
+   * ```
    */
 import type { Snippet } from 'svelte';
+import type { HeaderSearchConfig } from '../../types/layout.js';
+type Breakpoint = 'sm' | 'md' | 'lg';
 interface Props {
     /** 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?: Breakpoint;
     /** 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;
 }

package/dist/lib/components/layout/PublicLayout.svelte

@@ -10,10 +10,11 @@
    * - Strong border options for brand consistency
    */
   import type { Snippet } from 'svelte';
-  import type { NavItem, NavSection } from '../../types/layout.js';
+  import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
   import { cn } from '../../utils.js';
   import AppShell from './AppShell.svelte';
   import Footer from './Footer.svelte';
+  import Header from './Header.svelte';
   import LogoMain from '../LogoMain.svelte';
 
   interface Props {
@@ -37,6 +38,8 @@
     strongFooterBorder?: boolean;
     /** Use dark footer variant */
     darkFooter?: boolean;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
   }
@@ -52,6 +55,7 @@
     headerEnd,
     strongFooterBorder = false,
     darkFooter = false,
+    headerSearch,
     children,
   }: Props = $props();
 
@@ -59,12 +63,17 @@
 </script>
 
 <AppShell>
-  <!-- Header -->
-  <header
-    class="sticky top-0 z-50 border-b border-black bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+  <Header
+    showMenuButton={navigation.length > 0}
+    menuOpen={mobileMenuOpen}
+    onMenuClick={() => (mobileMenuOpen = !mobileMenuOpen)}
+    mobileBreakpoint="md"
+    backdropBlur
+    elevated
+    maxWidth="7xl"
+    search={headerSearch}
   >
-    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
-      <!-- Logo -->
+    {#snippet start()}
       <a href="/" class="flex items-center">
         {#if logo}
           {@render logo()}
@@ -78,90 +87,55 @@
           />
         {/if}
       </a>
+    {/snippet}
 
-      <!-- Desktop Navigation -->
-      {#if navigation.length > 0}
-        <nav class="hidden md:flex md:items-center md:gap-6">
-          {#each navigation as item}
+    {#snippet nav()}
+      {#each navigation as item}
+        <a
+          href={item.href}
+          class={cn(
+            'text-sm font-bold uppercase transition-colors hover:text-primary',
+            item.active ? 'text-primary' : 'text-muted-foreground'
+          )}
+          target={item.external ? '_blank' : undefined}
+          rel={item.external ? 'noopener noreferrer' : undefined}
+          aria-current={item.active ? 'page' : undefined}
+        >
+          {item.name}
+        </a>
+      {/each}
+    {/snippet}
+
+    {#snippet end()}
+      {#if headerEnd}
+        {@render headerEnd()}
+      {/if}
+    {/snippet}
+
+    {#snippet mobileNav()}
+      <ul class="space-y-2 border-b border-black px-4 py-4">
+        {#each navigation as item}
+          <li>
             <a
               href={item.href}
               class={cn(
-                'text-sm font-bold uppercase transition-colors hover:text-primary',
-                item.active ? 'text-primary' : 'text-muted-foreground'
+                'block rounded-md px-3 py-2 text-sm font-bold uppercase transition-colors',
+                item.active
+                  ? 'bg-primary/10 text-primary'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
               )}
               target={item.external ? '_blank' : undefined}
               rel={item.external ? 'noopener noreferrer' : undefined}
+              aria-current={item.active ? 'page' : undefined}
+              onclick={() => (mobileMenuOpen = false)}
             >
               {item.name}
             </a>
-          {/each}
-        </nav>
-      {/if}
-
-      <!-- Header End (Actions) -->
-      <div class="flex items-center gap-4">
-        {#if headerEnd}
-          {@render headerEnd()}
-        {/if}
-
-        <!-- Mobile Menu Button -->
-        {#if navigation.length > 0}
-          <button
-            class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground md:hidden"
-            onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
-            aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
-            aria-expanded={mobileMenuOpen}
-          >
-            {#if mobileMenuOpen}
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            {:else}
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            {/if}
-          </button>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Mobile Navigation -->
-    {#if mobileMenuOpen && navigation.length > 0}
-      <nav class="border-t border-black px-4 py-4 md:hidden">
-        <ul class="space-y-2">
-          {#each navigation as item}
-            <li>
-              <a
-                href={item.href}
-                class={cn(
-                  'block rounded-md px-3 py-2 text-sm font-bold uppercase transition-colors',
-                  item.active
-                    ? 'bg-primary/10 text-primary'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-                )}
-                target={item.external ? '_blank' : undefined}
-                rel={item.external ? 'noopener noreferrer' : undefined}
-                onclick={() => (mobileMenuOpen = false)}
-              >
-                {item.name}
-              </a>
-            </li>
-          {/each}
-        </ul>
-      </nav>
-    {/if}
-  </header>
+          </li>
+        {/each}
+      </ul>
+    {/snippet}
+  </Header>
 
   <!-- Main Content -->
   <main id="main-content" class="flex-1 bg-content-bg">

package/dist/lib/components/layout/PublicLayout.svelte.d.ts

@@ -9,7 +9,7 @@
    * - Strong border options for brand consistency
    */
 import type { Snippet } from 'svelte';
-import type { NavItem, NavSection } from '../../types/layout.js';
+import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
 interface Props {
     /** Navigation items for header */
     navigation?: NavItem[];
@@ -31,6 +31,8 @@ interface Props {
     strongFooterBorder?: boolean;
     /** Use dark footer variant */
     darkFooter?: boolean;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
 }