@classic-homes/theme-svelte 0.1.0

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

@@ -0,0 +1,30 @@
+/**
+   * 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';
+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;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

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

@@ -0,0 +1,180 @@
+<script lang="ts">
+  /**
+   * PublicLayout - Layout for public-facing pages
+   *
+   * Features:
+   * - Header with navigation (uppercase bold links)
+   * - Footer with link sections
+   * - Main content area
+   * - Responsive design
+   * - Strong border options for brand consistency
+   */
+  import type { Snippet } from 'svelte';
+  import type { NavItem, NavSection } from '../../types/layout.js';
+  import { cn } from '../../utils.js';
+  import AppShell from './AppShell.svelte';
+  import Footer from './Footer.svelte';
+  import LogoMain from '../LogoMain.svelte';
+
+  interface Props {
+    /** Navigation items for header */
+    navigation?: NavItem[];
+    /** Whether to show footer */
+    showFooter?: boolean;
+    /** Footer link sections */
+    footerLinks?: NavSection[];
+    /** Footer copyright text */
+    copyright?: string;
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "THEME", "MY HOME") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
+    /** Custom header end content */
+    headerEnd?: Snippet;
+    /** Use strong accent border on footer (10px top border) */
+    strongFooterBorder?: boolean;
+    /** Use dark footer variant */
+    darkFooter?: boolean;
+    /** Main content */
+    children: Snippet;
+  }
+
+  let {
+    navigation = [],
+    showFooter = true,
+    footerLinks = [],
+    copyright,
+    logo,
+    logoSubtitle,
+    logoEnvironment,
+    headerEnd,
+    strongFooterBorder = false,
+    darkFooter = false,
+    children,
+  }: Props = $props();
+
+  let mobileMenuOpen = $state(false);
+</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"
+  >
+    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+      <!-- Logo -->
+      <a href="/" class="flex items-center">
+        {#if logo}
+          {@render logo()}
+        {:else}
+          <LogoMain
+            variant="horizontal"
+            color="dark"
+            size="md"
+            subtitle={logoSubtitle}
+            environment={logoEnvironment}
+          />
+        {/if}
+      </a>
+
+      <!-- Desktop Navigation -->
+      {#if navigation.length > 0}
+        <nav class="hidden md:flex md:items-center md:gap-6">
+          {#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}
+            >
+              {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 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-foreground'
+                )}
+                target={item.external ? '_blank' : undefined}
+                rel={item.external ? 'noopener noreferrer' : undefined}
+                onclick={() => (mobileMenuOpen = false)}
+              >
+                {item.name}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    {/if}
+  </header>
+
+  <!-- Main Content -->
+  <main id="main-content" class="flex-1">
+    {@render children()}
+  </main>
+
+  <!-- Footer -->
+  {#if showFooter}
+    <Footer
+      links={footerLinks}
+      {copyright}
+      strongBorder={strongFooterBorder}
+      variant={darkFooter ? 'dark' : 'default'}
+    />
+  {/if}
+</AppShell>

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

@@ -0,0 +1,39 @@
+/**
+   * PublicLayout - Layout for public-facing pages
+   *
+   * Features:
+   * - Header with navigation (uppercase bold links)
+   * - Footer with link sections
+   * - Main content area
+   * - Responsive design
+   * - Strong border options for brand consistency
+   */
+import type { Snippet } from 'svelte';
+import type { NavItem, NavSection } from '../../types/layout.js';
+interface Props {
+    /** Navigation items for header */
+    navigation?: NavItem[];
+    /** Whether to show footer */
+    showFooter?: boolean;
+    /** Footer link sections */
+    footerLinks?: NavSection[];
+    /** Footer copyright text */
+    copyright?: string;
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "THEME", "MY HOME") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
+    /** Custom header end content */
+    headerEnd?: Snippet;
+    /** Use strong accent border on footer (10px top border) */
+    strongFooterBorder?: boolean;
+    /** Use dark footer variant */
+    darkFooter?: boolean;
+    /** Main content */
+    children: Snippet;
+}
+declare const PublicLayout: import("svelte").Component<Props, {}, "">;
+type PublicLayout = ReturnType<typeof PublicLayout>;
+export default PublicLayout;

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+  /**
+   * QuickLinks - Quick navigation links section for sidebar
+   *
+   * Features:
+   * - Two display modes: 'list' (stacked with labels) and 'icons' (horizontal icons only)
+   * - Light/dark variant support
+   * - External link indicator
+   * - Custom icon renderer support
+   * - Accessible with proper ARIA labels
+   */
+  import type { Snippet } from 'svelte';
+  import type { QuickLink } from '../../types/layout.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    /** Array of quick link items */
+    links: QuickLink[];
+    /** Display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    display?: 'list' | 'icons';
+    /** Visual variant - light (default) or dark */
+    variant?: 'light' | 'dark';
+    /** Custom icon renderer */
+    icon?: Snippet<[QuickLink]>;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let { links, display = 'list', variant = 'light', icon, class: className }: Props = $props();
+
+  const isLight = $derived(variant === 'light');
+</script>
+
+{#if links.length > 0}
+  <div
+    class={cn(
+      display === 'list'
+        ? 'flex flex-col gap-1'
+        : 'flex flex-row items-center justify-center gap-2',
+      className
+    )}
+    role="navigation"
+    aria-label="Quick links"
+  >
+    {#each links as link}
+      <a
+        href={link.href}
+        class={cn(
+          'flex items-center transition-colors',
+          // List mode styles
+          display === 'list' && 'gap-3 rounded-md px-3 py-2 text-sm',
+          display === 'list' &&
+            isLight &&
+            'text-muted-foreground hover:bg-accent hover:text-foreground',
+          display === 'list' &&
+            !isLight &&
+            'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+          // Icon mode styles
+          display === 'icons' && 'rounded-md p-2',
+          display === 'icons' &&
+            isLight &&
+            'text-muted-foreground hover:bg-accent hover:text-foreground',
+          display === 'icons' &&
+            !isLight &&
+            'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground'
+        )}
+        target={link.external ? '_blank' : undefined}
+        rel={link.external ? 'noopener noreferrer' : undefined}
+        aria-label={display === 'icons' ? link.ariaLabel || link.label : undefined}
+        title={display === 'icons' ? link.label : undefined}
+      >
+        {#if icon}
+          <span class={cn('shrink-0', display === 'list' ? 'h-5 w-5' : 'h-5 w-5')}>
+            {@render icon(link)}
+          </span>
+        {:else if link.icon}
+          <!-- Default icon placeholder - apps should provide icon snippet -->
+          <span
+            class={cn(
+              'shrink-0 flex items-center justify-center',
+              display === 'list' ? 'h-5 w-5' : 'h-5 w-5'
+            )}
+          >
+            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <circle cx="12" cy="12" r="10" stroke-width="2" />
+            </svg>
+          </span>
+        {/if}
+
+        {#if display === 'list'}
+          <span class="flex-1 truncate">{link.label}</span>
+
+          {#if link.external}
+            <svg
+              class="h-4 w-4 shrink-0 opacity-50"
+              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}
+        {/if}
+      </a>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,27 @@
+/**
+   * QuickLinks - Quick navigation links section for sidebar
+   *
+   * Features:
+   * - Two display modes: 'list' (stacked with labels) and 'icons' (horizontal icons only)
+   * - Light/dark variant support
+   * - External link indicator
+   * - Custom icon renderer support
+   * - Accessible with proper ARIA labels
+   */
+import type { Snippet } from 'svelte';
+import type { QuickLink } from '../../types/layout.js';
+interface Props {
+    /** Array of quick link items */
+    links: QuickLink[];
+    /** Display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    display?: 'list' | 'icons';
+    /** Visual variant - light (default) or dark */
+    variant?: 'light' | 'dark';
+    /** Custom icon renderer */
+    icon?: Snippet<[QuickLink]>;
+    /** Additional classes */
+    class?: string;
+}
+declare const QuickLinks: import("svelte").Component<Props, {}, "">;
+type QuickLinks = ReturnType<typeof QuickLinks>;
+export default QuickLinks;

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

@@ -0,0 +1,243 @@
+<script lang="ts">
+  /**
+   * Sidebar - Responsive sidebar navigation component
+   *
+   * Features:
+   * - Collapsible on desktop
+   * - Slide-out drawer on mobile
+   * - Grouped navigation sections
+   * - Icon support via snippets
+   * - Active state highlighting
+   * - Light/dark variant support
+   * - Optional stronger border styling
+   * - Quick links section at bottom
+   */
+  import type { Snippet } from 'svelte';
+  import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
+  import { cn } from '../../utils.js';
+  import LogoMain from '../LogoMain.svelte';
+  import QuickLinks from './QuickLinks.svelte';
+
+  interface Props {
+    /** Navigation sections */
+    navigation: NavSection[];
+    /** Whether sidebar is collapsed (desktop) */
+    collapsed?: boolean;
+    /** Whether currently on mobile */
+    isMobile?: boolean;
+    /** Whether mobile sidebar is open */
+    mobileOpen?: boolean;
+    /** Callback when mobile sidebar should close */
+    onClose?: () => void;
+    /** 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 footer content */
+    footer?: Snippet;
+    /** Visual variant - light (default) or dark */
+    variant?: 'light' | 'dark';
+    /** Use stronger/thicker border */
+    strongBorder?: boolean;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    navigation,
+    collapsed = false,
+    isMobile = false,
+    mobileOpen = false,
+    onClose,
+    logo,
+    icon,
+    quickLinks,
+    quickLinksDisplay = 'list',
+    quickLinkIcon,
+    footer,
+    variant = 'light',
+    strongBorder = false,
+    class: className,
+  }: Props = $props();
+
+  // Variant-based styling
+  const isLight = $derived(variant === 'light');
+
+  const sidebarWidth = $derived(collapsed ? 'w-16' : 'w-64');
+</script>
+
+<!-- Mobile Overlay: z-40 positions below sidebar (z-50) but above main content -->
+{#if isMobile && mobileOpen}
+  <div
+    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+    onclick={() => onClose?.()}
+    onkeydown={(e) => e.key === 'Escape' && onClose?.()}
+    role="button"
+    tabindex="0"
+    aria-label="Close sidebar"
+  ></div>
+{/if}
+
+<!-- Sidebar: z-50 positions above overlay and content, below modals (z-100+) -->
+<aside
+  class={cn(
+    'fixed left-0 top-0 z-[var(--z-sidebar,50)] flex h-full flex-col transition-all duration-300',
+    // Variant-based background and text colors
+    isLight ? 'bg-background text-foreground' : 'bg-sidebar text-sidebar-foreground',
+    strongBorder ? 'border-r-2 border-black' : 'border-r border-black',
+    isMobile ? (mobileOpen ? 'translate-x-0 w-64' : '-translate-x-full w-64') : sidebarWidth,
+    className
+  )}
+  aria-label="Main navigation"
+>
+  <!-- Logo Section -->
+  <div
+    class={cn(
+      'flex h-16 items-center border-b border-black px-4',
+      collapsed && !isMobile && 'justify-center'
+    )}
+  >
+    {#if logo}
+      {@render logo()}
+    {:else}
+      <LogoMain
+        variant={collapsed && !isMobile ? 'icon' : 'horizontal'}
+        color={isLight ? 'dark' : 'light'}
+        class={collapsed && !isMobile ? 'h-8 w-8' : 'h-8'}
+      />
+    {/if}
+  </div>
+
+  <!-- Navigation -->
+  <nav class="flex-1 overflow-y-auto py-4">
+    {#each navigation as section}
+      <div class="mb-4">
+        {#if section.title && !collapsed}
+          <h2
+            class={cn(
+              'mb-2 px-4 text-xs font-semibold uppercase tracking-wider',
+              isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
+            )}
+          >
+            {section.title}
+          </h2>
+        {/if}
+
+        <ul class="space-y-1 px-2">
+          {#each section.items as item}
+            <li>
+              <a
+                href={item.href}
+                class={cn(
+                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                  // Light variant styling
+                  isLight &&
+                    !item.active &&
+                    'text-foreground hover:bg-accent hover:text-accent-foreground',
+                  isLight && item.active && 'bg-primary/10 text-primary',
+                  // Dark variant styling
+                  !isLight &&
+                    !item.active &&
+                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                  !isLight && item.active && 'bg-sidebar-primary text-sidebar-primary-foreground',
+                  collapsed && !isMobile && 'justify-center px-2'
+                )}
+                target={item.external ? '_blank' : undefined}
+                rel={item.external ? 'noopener noreferrer' : undefined}
+                aria-current={item.active ? 'page' : undefined}
+                title={collapsed && !isMobile ? item.name : undefined}
+              >
+                {#if icon}
+                  <span class="h-5 w-5 shrink-0">
+                    {@render icon(item)}
+                  </span>
+                {:else if item.icon}
+                  <span class="h-5 w-5 shrink-0 flex items-center justify-center">
+                    <!-- Default icon placeholder - apps should provide icon snippet -->
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <circle cx="12" cy="12" r="10" stroke-width="2" />
+                    </svg>
+                  </span>
+                {/if}
+
+                {#if !collapsed || isMobile}
+                  <span class="flex-1 truncate">{item.name}</span>
+
+                  {#if item.badge !== undefined}
+                    <span
+                      class="ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground"
+                    >
+                      {item.badge}
+                    </span>
+                  {/if}
+
+                  {#if item.external}
+                    <svg
+                      class="h-4 w-4 opacity-50"
+                      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}
+                {/if}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/each}
+  </nav>
+
+  <!-- Quick Links -->
+  {#if quickLinks && quickLinks.length > 0}
+    <div class={cn('border-t border-black px-2 py-3', collapsed && !isMobile && 'px-2')}>
+      <QuickLinks
+        links={quickLinks}
+        display={collapsed && !isMobile ? 'icons' : quickLinksDisplay}
+        {variant}
+        icon={quickLinkIcon}
+      />
+    </div>
+  {/if}
+
+  <!-- Footer -->
+  {#if footer}
+    <div class="border-t border-black p-4">
+      {@render footer()}
+    </div>
+  {/if}
+
+  <!-- Mobile Close Button -->
+  {#if isMobile}
+    <button
+      class={cn(
+        'absolute right-2 top-2 rounded-md p-2',
+        isLight ? 'hover:bg-accent' : 'hover:bg-sidebar-accent'
+      )}
+      onclick={() => onClose?.()}
+      aria-label="Close sidebar"
+    >
+      <svg class="h-5 w-5" 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>
+    </button>
+  {/if}
+</aside>

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

@@ -0,0 +1,48 @@
+/**
+   * Sidebar - Responsive sidebar navigation component
+   *
+   * Features:
+   * - Collapsible on desktop
+   * - Slide-out drawer on mobile
+   * - Grouped navigation sections
+   * - Icon support via snippets
+   * - Active state highlighting
+   * - Light/dark variant support
+   * - Optional stronger border styling
+   * - Quick links section at bottom
+   */
+import type { Snippet } from 'svelte';
+import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
+interface Props {
+    /** Navigation sections */
+    navigation: NavSection[];
+    /** Whether sidebar is collapsed (desktop) */
+    collapsed?: boolean;
+    /** Whether currently on mobile */
+    isMobile?: boolean;
+    /** Whether mobile sidebar is open */
+    mobileOpen?: boolean;
+    /** Callback when mobile sidebar should close */
+    onClose?: () => void;
+    /** 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 footer content */
+    footer?: Snippet;
+    /** Visual variant - light (default) or dark */
+    variant?: 'light' | 'dark';
+    /** Use stronger/thicker border */
+    strongBorder?: boolean;
+    /** Additional classes */
+    class?: string;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/lib/composables/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Composables - Reusable Svelte 5 runes-based state management utilities
+ *
+ * These composables provide common patterns for form handling and async operations,
+ * built with Svelte 5 runes for optimal reactivity.
+ */
+export { useForm, type UseFormOptions, type UseFormReturn, type FieldError, type FormState, type InferFormData, } from './useForm.svelte.js';
+export { useAsync, runAsync, type UseAsyncOptions, type UseAsyncReturn, } from './useAsync.svelte.js';