@classic-homes/theme-svelte 0.1.0

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

@@ -0,0 +1,248 @@
+<script lang="ts">
+  /**
+   * DashboardLayout - Complete dashboard layout with sidebar and header
+   *
+   * Features:
+   * - Responsive sidebar (collapsible on desktop, drawer on mobile)
+   * - Sticky header with page title and customizable content
+   * - Light/dark sidebar variants
+   * - Optional back link navigation
+   * - Main content area with proper spacing
+   * - Integrated with sidebar store for state management
+   */
+  import type { Snippet } from 'svelte';
+  import type { NavSection, NavItem, User, QuickLink } from '../../types/layout.js';
+  import { cn } from '../../utils.js';
+  import { sidebarStore } from '../../stores/sidebar.svelte.js';
+  import AppShell from './AppShell.svelte';
+  import Sidebar from './Sidebar.svelte';
+
+  interface BackLink {
+    /** Link label (e.g., "Back to Dashboard") */
+    label: string;
+    /** Link URL */
+    href: string;
+    /** Icon name for the icon snippet */
+    icon?: string;
+  }
+
+  interface Props {
+    /** Navigation sections for sidebar */
+    navigation: NavSection[];
+    /** Current user data */
+    user?: User;
+    /** Application name */
+    appName?: string;
+    /** Page title displayed in header */
+    pageTitle?: string;
+    /** Back link shown at top of sidebar navigation */
+    backLink?: BackLink;
+    /** Sidebar visual variant */
+    sidebarVariant?: 'light' | 'dark';
+    /** Whether sidebar starts collapsed */
+    sidebarCollapsed?: boolean;
+    /** Whether to show the header */
+    showHeader?: boolean;
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Custom icon renderer for nav items */
+    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 */
+    quickLinksDisplay?: 'list' | 'icons';
+    /** Custom icon renderer for quick links */
+    quickLinkIcon?: Snippet<[QuickLink]>;
+    /** Custom content at start of header (after toggle button) */
+    headerStart?: Snippet;
+    /** Custom content at end of header */
+    headerEnd?: Snippet;
+    /** Custom user menu snippet */
+    userMenu?: Snippet<[User]>;
+    /** Sidebar footer content */
+    sidebarFooter?: Snippet;
+    /** Main content */
+    children: Snippet;
+  }
+
+  let {
+    navigation,
+    user,
+    appName = 'Dashboard',
+    pageTitle,
+    backLink,
+    sidebarVariant = 'light',
+    sidebarCollapsed = false,
+    showHeader = true,
+    logo,
+    icon,
+    quickLinks,
+    quickLinksDisplay = 'list',
+    quickLinkIcon,
+    headerStart,
+    headerEnd,
+    userMenu,
+    sidebarFooter,
+    children,
+  }: Props = $props();
+
+  // Create navigation with back link prepended if provided
+  const effectiveNavigation = $derived(
+    backLink
+      ? [
+          {
+            id: '__back',
+            items: [
+              {
+                id: '__back-link',
+                name: backLink.label,
+                href: backLink.href,
+                icon: backLink.icon || 'arrow-left',
+              },
+            ],
+          },
+          ...navigation,
+        ]
+      : navigation
+  );
+
+  // Reactive media query for mobile detection
+  let isMobile = $state(false);
+
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(max-width: 1023px)');
+      isMobile = mediaQuery.matches;
+      sidebarStore.setMobile(isMobile);
+
+      const handler = (e: MediaQueryListEvent) => {
+        isMobile = e.matches;
+        sidebarStore.setMobile(e.matches);
+      };
+
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    }
+  });
+
+  // Initialize sidebar state
+  $effect(() => {
+    if (!sidebarCollapsed && !isMobile) {
+      sidebarStore.open();
+    }
+  });
+
+  const sidebarWidth = $derived(isMobile ? 0 : sidebarStore.isOpen ? 256 : 64);
+</script>
+
+<AppShell>
+  <!-- Sidebar -->
+  <Sidebar
+    navigation={effectiveNavigation}
+    variant={sidebarVariant}
+    collapsed={!sidebarStore.isOpen && !isMobile}
+    {isMobile}
+    mobileOpen={isMobile && sidebarStore.isOpen}
+    onClose={() => sidebarStore.close()}
+    {logo}
+    {icon}
+    {quickLinks}
+    {quickLinksDisplay}
+    {quickLinkIcon}
+    footer={sidebarFooter}
+  />
+
+  <!-- Main Content Area -->
+  <div
+    class="flex flex-1 flex-col transition-all duration-300"
+    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"
+      >
+        <div class="flex items-center gap-4">
+          <!-- Mobile Menu Button -->
+          {#if isMobile}
+            <button
+              class="rounded-md p-2 hover:bg-accent 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"
+              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 -->
+          {#if headerEnd}
+            {@render headerEnd()}
+          {:else if user}
+            {#if userMenu}
+              {@render userMenu(user)}
+            {:else}
+              <!-- Default User Display -->
+              <div class="flex items-center gap-3">
+                <div
+                  class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground"
+                >
+                  {user.initials || user.name.charAt(0).toUpperCase()}
+                </div>
+                <div class="hidden md:block">
+                  <p class="text-sm font-medium">{user.name}</p>
+                  {#if user.email}
+                    <p class="text-xs text-muted-foreground">{user.email}</p>
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/if}
+        </div>
+      </header>
+    {/if}
+
+    <!-- Main Content -->
+    <main id="main-content" class="flex-1 bg-content-bg p-4 lg:p-6">
+      {@render children()}
+    </main>
+  </div>
+</AppShell>

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

@@ -0,0 +1,62 @@
+/**
+   * DashboardLayout - Complete dashboard layout with sidebar and header
+   *
+   * Features:
+   * - Responsive sidebar (collapsible on desktop, drawer on mobile)
+   * - Sticky header with page title and customizable content
+   * - Light/dark sidebar variants
+   * - Optional back link navigation
+   * - Main content area with proper spacing
+   * - 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;
+}
+interface Props {
+    /** Navigation sections for sidebar */
+    navigation: NavSection[];
+    /** Current user data */
+    user?: User;
+    /** Application name */
+    appName?: string;
+    /** Page title displayed in header */
+    pageTitle?: string;
+    /** Back link shown at top of sidebar navigation */
+    backLink?: BackLink;
+    /** Sidebar visual variant */
+    sidebarVariant?: 'light' | 'dark';
+    /** Whether sidebar starts collapsed */
+    sidebarCollapsed?: boolean;
+    /** Whether to show the header */
+    showHeader?: boolean;
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Custom icon renderer for nav items */
+    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 */
+    quickLinksDisplay?: 'list' | 'icons';
+    /** Custom icon renderer for quick links */
+    quickLinkIcon?: Snippet<[QuickLink]>;
+    /** Custom content at start of header (after toggle button) */
+    headerStart?: Snippet;
+    /** Custom content at end of header */
+    headerEnd?: Snippet;
+    /** Custom user menu snippet */
+    userMenu?: Snippet<[User]>;
+    /** Sidebar footer content */
+    sidebarFooter?: Snippet;
+    /** Main content */
+    children: Snippet;
+}
+declare const DashboardLayout: import("svelte").Component<Props, {}, "">;
+type DashboardLayout = ReturnType<typeof DashboardLayout>;
+export default DashboardLayout;

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+  /**
+   * Footer - Site footer component
+   *
+   * Features:
+   * - Link sections
+   * - Copyright text
+   * - Logo option
+   * - Custom content support
+   * - Strong accent border option (matches brand guidelines)
+   * - Dark variant for branded footers
+   */
+  import type { Snippet } from 'svelte';
+  import type { NavSection } from '../../types/layout.js';
+  import { cn } from '../../utils.js';
+  import LogoMain from '../LogoMain.svelte';
+
+  interface Props {
+    /** Link sections */
+    links?: NavSection[];
+    /** Copyright text */
+    copyright?: string;
+    /** Show logo in footer */
+    showLogo?: boolean;
+    /** Use strong accent border (10px top border) */
+    strongBorder?: boolean;
+    /** Dark variant with brand colors */
+    variant?: 'default' | 'dark';
+    /** Custom content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    links = [],
+    copyright,
+    showLogo = true,
+    strongBorder = false,
+    variant = 'default',
+    children,
+    class: className,
+  }: Props = $props();
+
+  const currentYear = new Date().getFullYear();
+  const defaultCopyright = `${currentYear} Classic Homes. All rights reserved.`;
+
+  const isDark = $derived(variant === 'dark');
+</script>
+
+<footer
+  class={cn(
+    // Base styles
+    isDark ? 'bg-[#50504f] text-white' : 'bg-muted/30',
+    // Border styles - strong accent border or standard
+    strongBorder ? 'border-t-[10px] border-[#787878]' : 'border-t border-black',
+    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>
+    {/if}
+
+    {#if children}
+      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-600' : 'border-black')}>
+        {@render children()}
+      </div>
+    {/if}
+
+    <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'
+      )}
+    >
+      {#if showLogo}
+        <LogoMain variant="horizontal" color={isDark ? 'light' : 'dark'} size="sm" />
+      {/if}
+
+      <p class={cn('text-center text-sm', isDark ? 'text-gray-400' : 'text-muted-foreground')}>
+        {copyright || defaultCopyright}
+      </p>
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,32 @@
+/**
+   * Footer - Site footer component
+   *
+   * Features:
+   * - Link sections
+   * - Copyright text
+   * - Logo option
+   * - Custom content support
+   * - Strong accent border option (matches brand guidelines)
+   * - Dark variant for branded footers
+   */
+import type { Snippet } from 'svelte';
+import type { NavSection } from '../../types/layout.js';
+interface Props {
+    /** Link sections */
+    links?: NavSection[];
+    /** Copyright text */
+    copyright?: string;
+    /** Show logo in footer */
+    showLogo?: boolean;
+    /** Use strong accent border (10px top border) */
+    strongBorder?: boolean;
+    /** Dark variant with brand colors */
+    variant?: 'default' | 'dark';
+    /** Custom content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+  /**
+   * FormPageLayout - Specialized layout for form pages
+   *
+   * Features:
+   * - Centered title and description header
+   * - Optional notice cards section
+   * - Two-column layout with optional sidebar
+   * - Help text footer
+   * - Responsive design (sidebar above main on mobile)
+   * - Light sage background for visual distinction
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    /** Page title (h1) */
+    title: string;
+    /** Page description text */
+    description: string;
+    /** Footer help text (supports HTML) */
+    helpText?: string;
+    /** Show the notices section (renders notices snippet if provided) */
+    showNotices?: boolean;
+    /** Main form content */
+    children: Snippet;
+    /** Optional notices content (alert cards, etc.) */
+    notices?: Snippet;
+    /** Optional sidebar content */
+    sidebar?: Snippet;
+    /** Additional classes for the container */
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    helpText,
+    showNotices = true,
+    children,
+    notices,
+    sidebar,
+    class: className,
+  }: Props = $props();
+
+  const hasSidebar = $derived(sidebar !== undefined);
+</script>
+
+<div class={cn('min-h-screen bg-brand-core-4-tint py-8 sm:py-12', 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>
+
+    <!-- Notices Section -->
+    {#if showNotices && notices}
+      <div class="mb-6">
+        {@render notices()}
+      </div>
+    {/if}
+
+    <!-- Main Content Area -->
+    <div class={cn('gap-8', hasSidebar ? 'grid lg:grid-cols-[1fr,320px]' : 'mx-auto max-w-2xl')}>
+      <!-- Sidebar (shows first on mobile when present) -->
+      {#if hasSidebar}
+        <aside class="order-first lg:order-last">
+          {@render sidebar!()}
+        </aside>
+      {/if}
+
+      <!-- Main Content -->
+      <main id="form-content" class={hasSidebar ? 'order-last lg:order-first' : ''}>
+        {@render children()}
+      </main>
+    </div>
+
+    <!-- Help Text Footer -->
+    {#if helpText}
+      <footer class="mt-8 text-center">
+        <p class="text-sm text-gray-500">
+          {@html helpText}
+        </p>
+      </footer>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+/**
+   * FormPageLayout - Specialized layout for form pages
+   *
+   * Features:
+   * - Centered title and description header
+   * - Optional notice cards section
+   * - Two-column layout with optional sidebar
+   * - Help text footer
+   * - Responsive design (sidebar above main on mobile)
+   * - Light sage background for visual distinction
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Page title (h1) */
+    title: string;
+    /** Page description text */
+    description: string;
+    /** Footer help text (supports HTML) */
+    helpText?: string;
+    /** Show the notices section (renders notices snippet if provided) */
+    showNotices?: boolean;
+    /** Main form content */
+    children: Snippet;
+    /** Optional notices content (alert cards, etc.) */
+    notices?: Snippet;
+    /** Optional sidebar content */
+    sidebar?: Snippet;
+    /** Additional classes for the container */
+    class?: string;
+}
+declare const FormPageLayout: import("svelte").Component<Props, {}, "">;
+type FormPageLayout = ReturnType<typeof FormPageLayout>;
+export default FormPageLayout;

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+  /**
+   * Header - Application header component
+   *
+   * Features:
+   * - Hamburger menu button for mobile
+   * - Customizable start and end slots
+   * - Optional navigation slot with uppercase styling
+   * - Responsive design
+   * - Stronger border styling to match brand guidelines
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    /** Whether to show hamburger menu button (mobile) */
+    showMenuButton?: boolean;
+    /** Callback when menu button is clicked */
+    onMenuClick?: () => void;
+    /** Custom start content (left side) */
+    start?: Snippet;
+    /** Navigation content (center/right on desktop, hidden on mobile) */
+    nav?: Snippet;
+    /** Custom end content (right side) */
+    end?: Snippet;
+    /** Use stronger/thicker border */
+    strongBorder?: boolean;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    showMenuButton = false,
+    onMenuClick,
+    start,
+    nav,
+    end,
+    strongBorder = false,
+    class: className,
+  }: Props = $props();
+</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)
+-->
+<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',
+    className
+  )}
+>
+  <div class="flex items-center gap-4">
+    <!-- Mobile Menu Button -->
+    {#if showMenuButton}
+      <button
+        class="rounded-md p-2 hover:bg-accent 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}
+
+    <!-- Start Content -->
+    {#if start}
+      {@render start()}
+    {/if}
+  </div>
+
+  <!-- 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}
+
+  <!-- End Content -->
+  {#if end}
+    <div class="flex items-center gap-4">
+      {@render end()}
+    </div>
+  {/if}
+</header>