@getmicdrop/svelte-components 3.1.0 → 4.1.0

package/dist/patterns/navigation/BottomNav.svelte

@@ -0,0 +1,57 @@
+<script>
+  import { page } from '../../__LIB_STORES__.js';
+  import { base } from '../../__LIB_PATHS__.js';
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import { onMount } from "svelte";
+
+  export let links = [];
+
+  let shows = { invitation: [] };
+
+  // Reactive current path for active state
+  $: currentPath = $page.url.pathname;
+
+  function isActive(href, path) {
+    if (href === `${base}/` || href === '/') {
+      return path === href || path === `${base}/`;
+    }
+    return path.startsWith(href);
+  }
+
+  onMount(async () => {
+    try {
+      const res = await fetch(`/api/getEventsForVenue`);
+      if (!res.ok) throw new Error("Failed to fetch shows.");
+      const events = await res.json();
+      shows.invitation = events.filter((event) => event.acceptedState === 0);
+    } catch (err) {
+      console.error("Failed to fetch shows:", err);
+    }
+  });
+</script>
+
+<!--
+  BOTTOM NAV - Mobile only (hidden on desktop via CSS)
+  Simple 4-tab navigation: Home, Shows, Availability, Profile
+  Uses Flowbite bottom navigation pattern
+-->
+
+{#each links as { label, href, icon }}
+  <a
+    {href}
+    class="flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
+      text-gray-500 dark:text-gray-400 transition-colors duration-150
+      hover:text-gray-900 hover:no-underline dark:hover:text-white
+      select-none touch-manipulation
+      {isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}"
+    aria-label={label}
+    style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
+  >
+    <span class="relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
+      <Icon name={icon} size="24" />
+      {#if label === "Shows" && shows?.invitation?.length > 0}
+        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+      {/if}
+    </span>
+  </a>
+{/each}

package/dist/patterns/navigation/BottomNav.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.js"],"names":[],"mappings":";;;;;;;;AAoEA;;;;mBAAgI;6CATnF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/navigation/Header.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.spec.js"],"names":[],"mappings":""}

package/dist/patterns/navigation/Header.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA+DA;;;;mBAAkH;mBA1D3F,iBAAiB;6CAiDK,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/patterns/navigation/Header.svelte

@@ -0,0 +1,250 @@
+<script>
+  import { page } from '../../__LIB_STORES__.js';
+  import { base } from '../../__LIB_PATHS__.js';
+  import { goto } from '../../__LIB_NAVIGATION__.js';
+  import Logo from "../../assets/images/Logo.png";
+  import Avatar from "../Avatar/Avatar.svelte";
+  import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../utils/portal.js";
+
+  export let signoutHandler = () => {};
+  export let name = "";
+  export let avatar = "";
+  export let email = "";
+  export let navLinks = [];
+  export let dropdownLinks = [];
+  export let showBackButton = false;
+
+  let showMobileSheet = false;
+  let showDesktopDropdown = false;
+
+  // Reactive current path for active state
+  $: currentPath = $page.url.pathname;
+
+  function isActive(href, path) {
+    if (href === `${base}/` || href === '/') {
+      return path === href || path === `${base}/`;
+    }
+    return path.startsWith(href);
+  }
+
+  function handleDropdownItemClick(href) {
+    showDesktopDropdown = false;
+    goto(href);
+  }
+
+  function handleMobileSheetItemClick(href) {
+    showMobileSheet = false;
+    goto(href);
+  }
+</script>
+
+<!--
+  HEADER - Responsive layout
+  Mobile: Logo + DarkMode + Avatar (triggers bottom sheet)
+  Desktop: Logo + Nav Links + DarkMode + Avatar (triggers dropdown)
+-->
+
+{#if showBackButton}
+  <!-- Sub-page header with back button (mobile only via CSS) -->
+  <div class="block flex-1 md:hidden">
+    <button
+      class="flex items-center gap-1 px-2 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+      on:click={() => history.back()}
+    >
+      <ChevronLeft class="w-5 h-5" />
+      <span>Back</span>
+    </button>
+  </div>
+  <!-- Still show normal header content on desktop even for sub-pages -->
+  <div class="hidden md:flex w-full items-center">
+    <div class="flex items-center">
+      <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
+    </div>
+
+    <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
+      {#each navLinks as { label, href }}
+        <a
+          {href}
+          class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 no-underline rounded-lg transition-all duration-150
+            hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
+            {isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}"
+        >
+          {label}
+        </a>
+      {/each}
+    </nav>
+
+    <div class="flex items-center gap-3">
+      <DarkModeToggle />
+      <div class="relative ml-1">
+        <button
+          class="bg-transparent border-none p-0 cursor-pointer rounded-lg transition-opacity duration-150 min-w-10 min-h-10 hover:opacity-80 focus:outline-none [&_img]:object-cover [&_img]:aspect-square [&_img]:rounded-lg"
+          on:click={() => showDesktopDropdown = !showDesktopDropdown}
+        >
+          <Avatar src={avatar} rounded size="md" />
+        </button>
+
+        {#if showDesktopDropdown}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div class="fixed inset-0 z-30 bg-transparent" on:click={() => showDesktopDropdown = false}></div>
+          <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
+            <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
+              <span class="block font-semibold text-gray-900 dark:text-white text-sm">{name || "Performer"}</span>
+              <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{email || ""}</span>
+            </div>
+            {#each dropdownLinks as { label, href }}
+              <button
+                class="w-full py-3 px-4 text-sm font-medium text-gray-900 dark:text-white bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-700"
+                on:click={() => handleDropdownItemClick(href)}
+              >
+                {label}
+              </button>
+            {/each}
+            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+            <button
+              class="w-full py-3 px-4 text-sm font-medium text-red-600 dark:text-red-500 bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-red-50 dark:hover:bg-gray-700"
+              on:click={() => { showDesktopDropdown = false; signoutHandler(); }}
+            >
+              Sign out
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- Normal header -->
+  <div class="flex items-center">
+    <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
+  </div>
+
+  <!-- Desktop nav links (hidden on mobile via CSS) -->
+  <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
+    {#each navLinks as { label, href }}
+      <a
+        {href}
+        class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 no-underline rounded-lg transition-all duration-150
+          hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
+          {isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}"
+      >
+        {label}
+      </a>
+    {/each}
+  </nav>
+
+  <div class="flex items-center gap-3">
+    <DarkModeToggle />
+
+    <div class="relative ml-1">
+      <!-- Mobile: triggers bottom sheet -->
+      <button
+        class="block md:hidden bg-transparent border-none p-0 cursor-pointer rounded-lg transition-opacity duration-150 min-w-10 min-h-10 hover:opacity-80 focus:outline-none [&_img]:object-cover [&_img]:aspect-square [&_img]:rounded-lg"
+        on:click={() => showMobileSheet = true}
+      >
+        <Avatar src={avatar} rounded size="md" />
+      </button>
+
+      <!-- Desktop: triggers dropdown -->
+      <button
+        class="hidden md:block bg-transparent border-none p-0 cursor-pointer rounded-lg transition-opacity duration-150 min-w-10 min-h-10 hover:opacity-80 focus:outline-none [&_img]:object-cover [&_img]:aspect-square [&_img]:rounded-lg"
+        on:click={() => showDesktopDropdown = !showDesktopDropdown}
+      >
+        <Avatar src={avatar} rounded size="md" />
+      </button>
+
+      <!-- Desktop dropdown -->
+      {#if showDesktopDropdown}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="fixed inset-0 z-30 bg-transparent" on:click={() => showDesktopDropdown = false}></div>
+        <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
+          <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
+            <span class="block font-semibold text-gray-900 dark:text-white text-sm">{name || "Performer"}</span>
+            <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{email || ""}</span>
+          </div>
+          {#each dropdownLinks as { label, href }}
+            <button
+              class="w-full py-3 px-4 text-sm font-medium text-gray-900 dark:text-white bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-700"
+              on:click={() => handleDropdownItemClick(href)}
+            >
+              {label}
+            </button>
+          {/each}
+          <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+          <button
+            class="w-full py-3 px-4 text-sm font-medium text-red-600 dark:text-red-500 bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-red-50 dark:hover:bg-gray-700"
+            on:click={() => { showDesktopDropdown = false; signoutHandler(); }}
+          >
+            Sign out
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<!-- Mobile Bottom Sheet (avatar menu) -->
+{#if showMobileSheet}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="fixed inset-0 flex items-end justify-center bg-black/50 z-50 touch-none overscroll-none"
+    on:click={() => { showMobileSheet = false; }}
+    transition:fade={{ duration: 300 }}
+    use:portal
+  >
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="bg-white dark:bg-gray-800 rounded-t-3xl shadow-xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden pb-[var(--safe-bottom,0px)] touch-pan-y overscroll-contain"
+      on:click|stopPropagation
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar -->
+      <div class="flex justify-center pt-3 pb-2">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+      </div>
+
+      <!-- User info -->
+      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <p class="text-base font-semibold text-gray-900 dark:text-white m-0">{name || "Performer"}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 m-0">{email || ""}</p>
+      </div>
+
+      <!-- Actions -->
+      <div class="py-2">
+        {#each dropdownLinks as { label, href }}
+          <button
+            on:click={() => handleMobileSheetItemClick(href)}
+            class="w-full text-left px-6 py-4 text-base font-medium text-gray-900 dark:text-white bg-transparent border-none cursor-pointer transition-colors duration-150 active:bg-gray-100 dark:active:bg-gray-700"
+          >
+            {label}
+          </button>
+        {/each}
+
+        <button
+          on:click={() => { showMobileSheet = false; signoutHandler(); }}
+          class="w-full text-left px-6 py-4 text-base font-medium text-red-600 dark:text-red-500 bg-transparent border-none cursor-pointer transition-colors duration-150 active:bg-gray-100 dark:active:bg-gray-700"
+        >
+          Sign Out
+        </button>
+      </div>
+
+      <!-- Cancel -->
+      <div class="border-t-8 border-gray-100 dark:border-gray-700">
+        <button
+          on:click={() => showMobileSheet = false}
+          class="w-full px-6 py-4 text-base font-semibold text-gray-900 dark:text-white bg-transparent border-none cursor-pointer active:bg-gray-100 dark:active:bg-gray-700"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiOA;;;;;;;;;;;;mBAA0M;6CAT7J,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/page/PageHeader.svelte

@@ -0,0 +1,60 @@
+<script>
+  /**
+   * PageHeader - Page title with breadcrumb and actions
+   *
+   * Provides consistent page header layout with title, optional subtitle,
+   * breadcrumb navigation, and action buttons slot.
+   *
+   * @example
+   * <PageHeader
+   *   title="Edit Event"
+   *   subtitle="Update event details"
+   *   breadcrumb={[
+   *     { name: 'Events', href: '/events' },
+   *     { name: 'Edit', href: '' }
+   *   ]}
+   * >
+   *   <Button slot="actions" on:click={save}>Save</Button>
+   * </PageHeader>
+   */
+  import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
+
+  /** Page title */
+  export let title = '';
+
+  /** Page subtitle */
+  export let subtitle = '';
+
+  /** Breadcrumb navigation data */
+  export let breadcrumb = [];
+
+  /** Whether to show the back button in breadcrumb */
+  export let showBack = true;
+
+  /** Additional class for the header */
+  let className = '';
+  export { className as class };
+</script>
+
+<header class="space-y-4 {className}">
+  {#if breadcrumb.length > 0}
+    <Breadcrumb data={breadcrumb} {showBack} />
+  {/if}
+
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+    <div>
+      {#if title}
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{title}</h1>
+      {/if}
+      {#if subtitle}
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
+      {/if}
+    </div>
+
+    {#if $$slots.actions}
+      <div class="flex items-center gap-3">
+        <slot name="actions" />
+      </div>
+    {/if}
+  </div>
+</header>

package/dist/patterns/page/PageHeader.svelte.d.ts

@@ -0,0 +1,39 @@
+export default PageHeader;
+type PageHeader = SvelteComponent<{
+    class?: string | undefined;
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    breadcrumb?: any[] | undefined;
+    showBack?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    actions: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const PageHeader: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    breadcrumb?: any[] | undefined;
+    showBack?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    actions: {};
+}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=PageHeader.svelte.d.ts.map

package/dist/patterns/page/PageHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageHeader.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAwFA;;;;;;;;;;eAAkL;6CAdrI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/page/PageLayout.svelte

@@ -0,0 +1,64 @@
+<script>
+  import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
+  import Card from '../../primitives/Card.svelte';
+
+  /**
+   * Breadcrumb navigation data
+   * @type {Array<{name: string, href: string}>}
+   */
+  export let breadcrumb = [];
+
+  /**
+   * Page title displayed below breadcrumb
+   * @type {string}
+   */
+  export let title = '';
+
+  /**
+   * Subtitle displayed below title
+   * @type {string}
+   */
+  export let subtitle = '';
+
+  /**
+   * Layout variant
+   * - 'default': Content with standard padding, no wrapper
+   * - 'card': Content wrapped in Card component with max-width
+   * @type {'default' | 'card'}
+   */
+  export let variant = 'default';
+
+  /**
+   * Max width class for card variant (e.g., 'max-w-4xl', 'max-w-6xl')
+   * @type {string}
+   */
+  export let maxWidth = 'max-w-4xl';
+
+  /**
+   * Additional CSS classes for the content container
+   * @type {string}
+   */
+  export let className = '';
+
+  /**
+   * Whether to show the header (breadcrumb, title, subtitle)
+   * @type {boolean}
+   */
+  export let showHeader = true;
+</script>
+
+{#if showHeader}
+  <nav class="pt-4 px-4 text-gray-900 dark:text-white text-lg font-semibold">
+    <Breadcrumb data={breadcrumb} {title} {subtitle} />
+  </nav>
+{/if}
+
+<div class="px-4 pb-20 md:pb-6 {className}">
+  {#if variant === 'card'}
+    <Card className="bg-white dark:bg-gray-800 {maxWidth}">
+      <slot />
+    </Card>
+  {:else}
+    <slot />
+  {/if}
+</div>

package/dist/patterns/page/PageLayout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLayout.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqHA;;;;;;cA1CyB,MAAM;cAAQ,MAAM;;;;;;;;;;eA0CgK;sCATvK,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/page/PageLoader.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.spec.js"],"names":[],"mappings":""}

package/dist/patterns/page/PageLoader.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA+HA;;;;mBAAsH;uBA1H7F,qBAAqB;6CAiHD,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/patterns/page/PageLoader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA+EA;;;;;;;;;;;;;;eAAmN;sCAT7K,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/page/SectionHeader.svelte

@@ -0,0 +1,58 @@
+<script>
+  /**
+   * SectionHeader - Section divider with title and optional actions
+   *
+   * Use to separate major sections within a page with a consistent
+   * heading style and optional action buttons.
+   *
+   * @example
+   * <SectionHeader title="Performers" count={performers.length}>
+   *   <Button slot="actions" size="sm" on:click={addPerformer}>Add</Button>
+   * </SectionHeader>
+   */
+
+  /** Section title */
+  export let title = '';
+
+  /** Optional description */
+  export let description = '';
+
+  /** Optional count badge (e.g., number of items) */
+  export let count = null;
+
+  /** Whether to show a divider line above */
+  export let divider = false;
+
+  /** Additional class for the header */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class={className}>
+  {#if divider}
+    <hr class="border-gray-200 dark:border-gray-700 mb-4" />
+  {/if}
+
+  <div class="flex items-center justify-between gap-4">
+    <div class="flex items-center gap-2">
+      {#if title}
+        <h2 class="text-lg font-medium text-gray-900 dark:text-white">{title}</h2>
+      {/if}
+      {#if count !== null}
+        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-full">
+          {count}
+        </span>
+      {/if}
+    </div>
+
+    {#if $$slots.actions}
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    {/if}
+  </div>
+
+  {#if description}
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
+  {/if}
+</div>

package/dist/patterns/page/SectionHeader.svelte.d.ts

@@ -0,0 +1,39 @@
+export default SectionHeader;
+type SectionHeader = SvelteComponent<{
+    class?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    divider?: boolean | undefined;
+    count?: null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    actions: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const SectionHeader: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    divider?: boolean | undefined;
+    count?: null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    actions: {};
+}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=SectionHeader.svelte.d.ts.map

package/dist/patterns/page/SectionHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/SectionHeader.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAmFA;;;;;;;;;;eAAkL;6CAdrI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}