@classic-homes/theme-svelte 0.1.4 → 0.1.6

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

@@ -10,15 +10,8 @@
    * - Integrated with sidebar store for state management
    */
 import type { Snippet } from 'svelte';
-import type { NavSection, NavItem, User, QuickLink } from '../../types/layout.js';
-interface BackLink {
-    /** Link label (e.g., "Back to Dashboard") */
-    label: string;
-    /** Link URL */
-    href: string;
-    /** Icon name for the icon snippet */
-    icon?: string;
-}
+import type { NavSection, NavItem, User, QuickLink, BackLink, HeaderSearchConfig } from '../../types/layout.js';
+type Breakpoint = 'sm' | 'md' | 'lg';
 interface Props {
     /** Navigation sections for sidebar */
     navigation: NavSection[];
@@ -42,10 +35,12 @@ interface Props {
     icon?: Snippet<[NavItem]>;
     /** Quick links displayed at bottom of sidebar */
     quickLinks?: QuickLink[];
-    /** Quick links display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Quick links display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     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 (after toggle button) */
     headerStart?: Snippet;
     /** Custom content at end of header */
@@ -54,6 +49,18 @@ interface Props {
     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;
+    /** Enable search/filter input for navigation */
+    searchable?: boolean;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
+    /** Breakpoint at which to switch between mobile and desktop layouts */
+    mobileBreakpoint?: Breakpoint;
     /** Main content */
     children: Snippet;
 }

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

@@ -0,0 +1,206 @@
+<script lang="ts">
+  /**
+   * ErrorLayout - Layout for error pages
+   *
+   * Features:
+   * - Centered error message display
+   * - Large status code or custom illustration
+   * - Configurable title and description
+   * - Default messages for common HTTP status codes
+   * - Action buttons (Go Back, Go Home)
+   * - Optional logo and footer
+   * - Responsive design
+   * - Composes AppShell for consistent base structure
+   *
+   * Use this layout for: 404 Not Found, 500 Server Error, 403 Forbidden,
+   * maintenance pages, and other error states.
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AppShell from './AppShell.svelte';
+  import LogoMain from '../LogoMain.svelte';
+  import Button from '../Button.svelte';
+
+  interface Props {
+    /** 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;
+  }
+
+  let {
+    statusCode,
+    title,
+    description,
+    showLogo = true,
+    logo,
+    showHomeButton = true,
+    homeUrl = '/',
+    homeText = 'Go Home',
+    showBackButton = true,
+    backText = 'Go Back',
+    illustration,
+    actions,
+    footer,
+    class: className,
+    children,
+  }: Props = $props();
+
+  // Default messages by status code
+  const defaultMessages: Record<number, { title: string; description: string }> = {
+    400: {
+      title: 'Bad Request',
+      description: 'The request could not be understood. Please check your input and try again.',
+    },
+    401: {
+      title: 'Unauthorized',
+      description: 'Please sign in to access this page.',
+    },
+    403: {
+      title: 'Access Denied',
+      description: "You don't have permission to access this page.",
+    },
+    404: {
+      title: 'Page Not Found',
+      description: "The page you're looking for doesn't exist or has been moved.",
+    },
+    500: {
+      title: 'Server Error',
+      description: 'Something went wrong on our end. Please try again later.',
+    },
+    502: {
+      title: 'Bad Gateway',
+      description: 'We received an invalid response from the server. Please try again later.',
+    },
+    503: {
+      title: 'Service Unavailable',
+      description: "We're temporarily offline for maintenance. Please check back soon.",
+    },
+    504: {
+      title: 'Gateway Timeout',
+      description: 'The server took too long to respond. Please try again later.',
+    },
+  };
+
+  const effectiveTitle = $derived(
+    title || (statusCode && defaultMessages[statusCode]?.title) || 'Something Went Wrong'
+  );
+
+  const effectiveDescription = $derived(
+    description ||
+      (statusCode && defaultMessages[statusCode]?.description) ||
+      'An unexpected error occurred. Please try again.'
+  );
+
+  function goBack() {
+    if (typeof window !== 'undefined') {
+      window.history.back();
+    }
+  }
+</script>
+
+<AppShell>
+  <div
+    class={cn(
+      'flex h-screen flex-col items-center justify-center overflow-auto bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
+      className
+    )}
+  >
+    <!-- Logo -->
+    {#if showLogo}
+      <div class="mb-6">
+        {#if logo}
+          {@render logo()}
+        {:else}
+          <a href="/" class="block">
+            <LogoMain variant="horizontal" color="dark" size="md" />
+          </a>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Main Content -->
+    <main id="main-content" class="w-full max-w-md text-center">
+      {#if children}
+        {@render children()}
+      {:else}
+        <!-- Status Code or Illustration -->
+        {#if illustration}
+          <div class="mb-6">
+            {@render illustration()}
+          </div>
+        {:else if statusCode}
+          <div class="mb-6">
+            <span class="text-8xl font-bold text-muted-foreground/30 sm:text-9xl">
+              {statusCode}
+            </span>
+          </div>
+        {/if}
+
+        <!-- Title -->
+        <h1 class="mb-4 text-2xl font-bold text-foreground sm:text-3xl">
+          {effectiveTitle}
+        </h1>
+
+        <!-- Description -->
+        <p class="mb-8 text-muted-foreground">
+          {effectiveDescription}
+        </p>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col items-center justify-center gap-3 sm:flex-row">
+          {#if showBackButton}
+            <Button variant="outline" onclick={goBack}>
+              {backText}
+            </Button>
+          {/if}
+          {#if showHomeButton}
+            <Button href={homeUrl}>
+              {homeText}
+            </Button>
+          {/if}
+        </div>
+
+        <!-- Additional Actions -->
+        {#if actions}
+          <div class="mt-6">
+            {@render actions()}
+          </div>
+        {/if}
+      {/if}
+    </main>
+
+    <!-- Footer -->
+    {#if footer}
+      <footer class="mt-8">
+        {@render footer()}
+      </footer>
+    {/if}
+  </div>
+</AppShell>

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

@@ -0,0 +1,52 @@
+/**
+   * ErrorLayout - Layout for error pages
+   *
+   * Features:
+   * - Centered error message display
+   * - Large status code or custom illustration
+   * - Configurable title and description
+   * - Default messages for common HTTP status codes
+   * - Action buttons (Go Back, Go Home)
+   * - Optional logo and footer
+   * - Responsive design
+   * - Composes AppShell for consistent base structure
+   *
+   * Use this layout for: 404 Not Found, 500 Server Error, 403 Forbidden,
+   * maintenance pages, and other error states.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 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;
+}
+declare const ErrorLayout: import("svelte").Component<Props, {}, "">;
+type ErrorLayout = ReturnType<typeof ErrorLayout>;
+export default ErrorLayout;

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

@@ -13,6 +13,7 @@
    */
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils.js';
+  import PageHeader from '../PageHeader.svelte';
 
   interface Props {
     /** Page title (h1) */
@@ -53,14 +54,7 @@
 <div class={cn('min-h-screen py-8 sm:py-12', sageBackground && 'bg-brand-core-4-tint', className)}>
   <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <!-- Header Section -->
-    <header class="mb-8 text-center">
-      <h1 class="text-3xl font-light tracking-tight text-brand-core-2 md:text-4xl">
-        {title}
-      </h1>
-      <p class="mt-3 text-base text-gray-600 md:text-lg">
-        {description}
-      </p>
-    </header>
+    <PageHeader {title} subtitle={description} variant="form" />
 
     <!-- Notices Section -->
     {#if showNotices && notices}

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>