@classic-homes/theme-svelte 0.1.5 → 0.1.7

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

@@ -0,0 +1,48 @@
+/**
+   * AuthLayout - Layout for authentication pages
+   *
+   * Features:
+   * - Centered card layout for auth forms
+   * - Logo with optional subtitle
+   * - Footer links (privacy, terms, etc.)
+   * - Optional background decoration
+   * - Responsive design
+   * - Composes AppShell for consistent base structure
+   *
+   * Use this layout for: login, signup, password reset, forgot password,
+   * email verification, 2FA, and other authentication flows.
+   */
+import type { Snippet } from 'svelte';
+interface FooterLink {
+    /** Link label */
+    label: string;
+    /** Link URL */
+    href: string;
+    /** Opens in new tab */
+    external?: boolean;
+}
+interface Props {
+    /** 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?: FooterLink[];
+    /** 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;
+}
+declare const AuthLayout: import("svelte").Component<Props, {}, "">;
+type AuthLayout = ReturnType<typeof AuthLayout>;
+export default AuthLayout;

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

@@ -11,11 +11,28 @@
    * - Integrated with sidebar store for state management
    */
   import type { Snippet } from 'svelte';
-  import type { NavSection, NavItem, User, QuickLink, BackLink } from '../../types/layout.js';
-  import { cn } from '../../utils.js';
+  import type {
+    NavSection,
+    NavItem,
+    User,
+    QuickLink,
+    BackLink,
+    HeaderSearchConfig,
+  } from '../../types/layout.js';
   import { sidebarStore } from '../../stores/sidebar.svelte.js';
   import AppShell from './AppShell.svelte';
   import Sidebar from './Sidebar.svelte';
+  import Header from './Header.svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg';
+
+  // Breakpoint pixel values (max-width for mobile detection)
+  // These match Tailwind's breakpoint - 1 (e.g., lg starts at 1024px, so mobile is <= 1023px)
+  const breakpointPixels: Record<Breakpoint, number> = {
+    sm: 639,
+    md: 767,
+    lg: 1023,
+  };
 
   interface Props {
     /** Navigation sections for sidebar */
@@ -62,6 +79,10 @@
     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;
   }
@@ -89,6 +110,8 @@
     collapsedWidth = 64,
     searchable = false,
     searchPlaceholder = 'Search...',
+    headerSearch,
+    mobileBreakpoint = 'lg',
     children,
   }: Props = $props();
 
@@ -117,7 +140,7 @@
 
   $effect(() => {
     if (typeof window !== 'undefined') {
-      const mediaQuery = window.matchMedia('(max-width: 1023px)');
+      const mediaQuery = window.matchMedia(`(max-width: ${breakpointPixels[mobileBreakpoint]}px)`);
       isMobile = mediaQuery.matches;
       sidebarStore.setMobile(isMobile);
 
@@ -205,62 +228,18 @@
     style="margin-left: {sidebarWidth}px;"
   >
     {#if showHeader}
-      <header
-        class="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-black bg-background px-4 lg:px-6"
+      <Header
+        showMenuButton={isMobile}
+        menuOpen={sidebarStore.isOpen}
+        onMenuClick={() => sidebarStore.toggle()}
+        showCollapseButton={!isMobile}
+        sidebarCollapsed={!sidebarStore.isOpen}
+        onCollapseClick={() => sidebarStore.toggle()}
+        title={pageTitle}
+        start={headerStart}
+        search={headerSearch}
       >
-        <div class="flex items-center gap-4">
-          <!-- Mobile Menu Button -->
-          {#if isMobile}
-            <button
-              class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground lg:hidden"
-              onclick={() => sidebarStore.toggle()}
-              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>
-          {:else}
-            <!-- Collapse Toggle Button (Desktop) -->
-            <button
-              class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
-              onclick={() => sidebarStore.toggle()}
-              aria-label={sidebarStore.isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-            >
-              <svg
-                class={cn('h-5 w-5 transition-transform', !sidebarStore.isOpen && '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}
-
-          <!-- Page Title -->
-          {#if pageTitle}
-            <h2 class="text-lg font-semibold">{pageTitle}</h2>
-          {/if}
-
-          <!-- Custom Header Start -->
-          {#if headerStart}
-            {@render headerStart()}
-          {/if}
-        </div>
-
-        <div class="flex items-center gap-4">
-          <!-- Custom Header End -->
+        {#snippet end()}
           {#if headerEnd}
             {@render headerEnd()}
           {:else if user}
@@ -283,8 +262,8 @@
               </div>
             {/if}
           {/if}
-        </div>
-      </header>
+        {/snippet}
+      </Header>
     {/if}
 
     <!-- Main Content -->

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

@@ -10,7 +10,8 @@
    * - Integrated with sidebar store for state management
    */
 import type { Snippet } from 'svelte';
-import type { NavSection, NavItem, User, QuickLink, BackLink } from '../../types/layout.js';
+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[];
@@ -56,6 +57,10 @@ interface Props {
     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/Footer.svelte

@@ -42,72 +42,77 @@
     class: className,
   }: Props = $props();
 
-  const currentYear = new Date().getFullYear();
-  const defaultCopyright = `${currentYear} Classic Homes. All rights reserved.`;
-
   const isDark = $derived(variant === 'dark');
+  const displayCopyright = $derived(
+    copyright || `${new Date().getFullYear()} Classic Homes. All rights reserved.`
+  );
 </script>
 
 <footer
+  aria-label="Site footer"
   class={cn(
     // Base styles
-    isDark ? 'bg-[#50504f] text-white' : 'bg-muted/30',
+    isDark ? 'bg-gray-600 text-white' : 'bg-muted/30',
     // Border styles - strong accent border or standard
-    strongBorder ? 'border-t-[10px] border-[#787878]' : 'border-t border-black',
+    strongBorder ? 'border-t-[10px] border-gray-500' : 'border-t border-border',
     className
   )}
 >
   <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
     {#if links.length > 0}
-      <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
-        {#each links as section}
-          <div>
-            {#if section.title}
-              <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
-                {section.title}
-              </h3>
-            {/if}
-            <ul class="mt-4 space-y-2">
-              {#each section.items as item}
-                <li>
-                  <a
-                    href={item.href}
-                    class={cn(
-                      'text-sm transition-colors',
-                      isDark
-                        ? 'text-white hover:text-primary'
-                        : 'text-muted-foreground hover:text-foreground'
-                    )}
-                    target={item.external ? '_blank' : undefined}
-                    rel={item.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {item.name}
-                    {#if item.external}
-                      <svg
-                        class="ml-1 inline-block h-3 w-3"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                        />
-                      </svg>
-                    {/if}
-                  </a>
-                </li>
-              {/each}
-            </ul>
-          </div>
-        {/each}
-      </div>
+      <nav aria-label="Footer navigation">
+        <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:gap-8 lg:grid-cols-4">
+          {#each links as section}
+            <div>
+              {#if section.title}
+                <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
+                  {section.title}
+                </h3>
+              {/if}
+              <ul class="mt-4 space-y-2">
+                {#each section.items as item}
+                  <li>
+                    <a
+                      href={item.href}
+                      class={cn(
+                        'text-sm transition-colors',
+                        isDark
+                          ? 'text-white hover:text-primary'
+                          : 'text-muted-foreground hover:text-foreground'
+                      )}
+                      target={item.external ? '_blank' : undefined}
+                      rel={item.external ? 'noopener noreferrer' : undefined}
+                    >
+                      {item.name}
+                      {#if item.external}
+                        <span class="sr-only">(opens in new tab)</span>
+                        <svg
+                          aria-hidden="true"
+                          class="ml-1 inline-block h-3 w-3"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                          />
+                        </svg>
+                      {/if}
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/each}
+        </div>
+      </nav>
     {/if}
 
     {#if children}
-      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-600' : 'border-black')}>
+      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-500' : 'border-border')}>
         {@render children()}
       </div>
     {/if}
@@ -115,7 +120,7 @@
     <div
       class={cn(
         'mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row',
-        isDark ? 'border-gray-600' : 'border-black'
+        isDark ? 'border-gray-500' : 'border-border'
       )}
     >
       {#if showLogo}
@@ -123,7 +128,7 @@
       {/if}
 
       <p class={cn('text-center text-sm', isDark ? 'text-gray-400' : 'text-muted-foreground')}>
-        {copyright || defaultCopyright}
+        {displayCopyright}
       </p>
     </div>
   </div>

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}