@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/patterns/navigation/Header.stories.svelte

@@ -1,77 +1,77 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Header from "./Header.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Layout/Header",
-    component: Header,
-    argTypes: {
-      name: { control: "text" },
-      email: { control: "text" },
-      avatar: { control: "text" },
-      signoutHandler: { action: "signout" },
-    },
-  });
-
-  function handleSignout() {
-    alert("User signed out");
-  }
-
-</script>
-
-
-<Story
-  name="Default Header"
-  args={{
-    name: "John Performer",
-    email: "john@example.com",
-    avatar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=12",
-    signoutHandler: handleSignout
-  }}
-/>
-
-<Story name="With Long Name">
-  <Header
-    name="Alexander Christopher Wellington"
-    email="alexander.wellington@performersportal.com"
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=33"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="With Short Name">
-  <Header
-    name="Jo"
-    email="jo@test.com"
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=5"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="Female Performer">
-  <Header
-    name="Sarah Johnson"
-    email="sarah.johnson@comedy.com"
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=47"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="Without Email">
-  <Header
-    name="Anonymous Performer"
-    email=""
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=68"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="With Default Avatar">
-  <Header
-    name="Default User"
-    email="default@performers.com"
-    avatar=""
-    signoutHandler={handleSignout}
-  />
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Header from "./Header.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Layout/Header",
+    component: Header,
+    argTypes: {
+      name: { control: "text" },
+      email: { control: "text" },
+      avatar: { control: "text" },
+      signoutHandler: { action: "signout" },
+    },
+  });
+
+  function handleSignout() {
+    alert("User signed out");
+  }
+
+</script>
+
+
+<Story
+  name="Default Header"
+  args={{
+    name: "John Performer",
+    email: "john@example.com",
+    avatar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=12",
+    signoutHandler: handleSignout
+  }}
+/>
+
+<Story name="With Long Name">
+  <Header
+    name="Alexander Christopher Wellington"
+    email="alexander.wellington@performersportal.com"
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=33"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="With Short Name">
+  <Header
+    name="Jo"
+    email="jo@test.com"
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=5"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="Female Performer">
+  <Header
+    name="Sarah Johnson"
+    email="sarah.johnson@comedy.com"
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=47"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="Without Email">
+  <Header
+    name="Anonymous Performer"
+    email=""
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=68"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="With Default Avatar">
+  <Header
+    name="Default User"
+    email="default@performers.com"
+    avatar=""
+    signoutHandler={handleSignout}
+  />
+</Story>

package/dist/patterns/navigation/Header.svelte

@@ -1,251 +1,251 @@
-<script lang="ts">
-  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 "../../primitives/Avatar/Avatar.svelte";
-  import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
-  import IconComponent from "../../primitives/Icons/Icon.svelte";
-  import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-  import MenuItem from "../../primitives/MenuItem/MenuItem.svelte";
-  import AvatarButton from "../../primitives/AvatarButton/AvatarButton.svelte";
-  import { fade, fly } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import { portal } from "../../utils/portal.js";
-  import { typography } from '../../tokens/typography';
-
-  interface NavLink {
-    label: string;
-    href: string;
-  }
-
-  interface Props {
-    signoutHandler?: () => void;
-    name?: string;
-    avatar?: string;
-    email?: string;
-    navLinks?: NavLink[];
-    dropdownLinks?: NavLink[];
-    showBackButton?: boolean;
-  }
-
-  let {
-    signoutHandler = () => {},
-    name = "",
-    avatar = "",
-    email = "",
-    navLinks = [],
-    dropdownLinks = [],
-    showBackButton = false,
-  }: Props = $props();
-
-  let showMobileSheet = $state(false);
-  let showDesktopDropdown = $state(false);
-
-  let currentPath = $derived($page.url.pathname);
-
-  function isActive(href: string, path: string): boolean {
-    if (href === `${base}/` || href === '/') {
-      return path === href || path === `${base}/`;
-    }
-    return path.startsWith(href);
-  }
-
-  function handleDropdownItemClick(href: string) {
-    showDesktopDropdown = false;
-    goto(href);
-  }
-
-  function handleMobileSheetItemClick(href: string) {
-    showMobileSheet = false;
-    goto(href);
-  }
-</script>
-
-{#if showBackButton}
-  <div class="block flex-1 md:hidden">
-    <Button variant="ghost" size="sm" onclick={() => history.back()}>
-      <ChevronLeft class="w-5 h-5" />
-      Back
-    </Button>
-  </div>
-  <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 ${typography.label} ${typography.textMuted} 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">
-        <AvatarButton
-          size="md"
-          onclick={() => showDesktopDropdown = !showDesktopDropdown}
-        >
-          <Avatar src={avatar} rounded size="md" />
-        </AvatarButton>
-
-        {#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" onclick={() => 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 ${typography.label}`}>{name || "Performer"}</span>
-              <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
-            </div>
-            {#each dropdownLinks as { label, href }}
-              <MenuItem
-                size="md"
-                onclick={() => handleDropdownItemClick(href)}
-              >
-                {label}
-              </MenuItem>
-            {/each}
-            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <MenuItem
-              danger
-              size="md"
-              onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
-            >
-              Sign out
-            </MenuItem>
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
-{:else}
-  <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 ${typography.label} ${typography.textMuted} 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">
-      <AvatarButton
-        size="md"
-        class="block md:hidden"
-        onclick={() => showMobileSheet = true}
-      >
-        <Avatar src={avatar} rounded size="md" />
-      </AvatarButton>
-
-      <AvatarButton
-        size="md"
-        class="hidden md:block"
-        onclick={() => showDesktopDropdown = !showDesktopDropdown}
-      >
-        <Avatar src={avatar} rounded size="md" />
-      </AvatarButton>
-
-      {#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" onclick={() => 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 ${typography.label}`}>{name || "Performer"}</span>
-            <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
-          </div>
-          {#each dropdownLinks as { label, href }}
-            <MenuItem
-              size="md"
-              onclick={() => handleDropdownItemClick(href)}
-            >
-              {label}
-            </MenuItem>
-          {/each}
-          <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-          <MenuItem
-            danger
-            size="md"
-            onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
-          >
-            Sign out
-          </MenuItem>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
-
-{#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"
-    onclick={() => { 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"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <div class="flex justify-center pt-3 pb-2">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
-      </div>
-
-      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <p class={`${typography.h4} m-0`}>{name || "Performer"}</p>
-        <p class={`${typography.smMuted} mt-0.5 m-0`}>{email || ""}</p>
-      </div>
-
-      <div class="py-2">
-        {#each dropdownLinks as { label, href }}
-          <MenuItem
-            size="lg"
-            onclick={() => handleMobileSheetItemClick(href)}
-          >
-            {label}
-          </MenuItem>
-        {/each}
-
-        <MenuItem
-          danger
-          size="lg"
-          onclick={() => { showMobileSheet = false; signoutHandler(); }}
-        >
-          Sign Out
-        </MenuItem>
-      </div>
-
-      <div class="border-t-8 border-gray-100 dark:border-gray-700">
-        <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
-          Cancel
-        </Button>
-      </div>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  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 "../../primitives/Avatar/Avatar.svelte";
+  import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
+  import IconComponent from "../../primitives/Icons/Icon.svelte";
+  import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+  import MenuItem from "../../primitives/MenuItem/MenuItem.svelte";
+  import AvatarButton from "../../primitives/AvatarButton/AvatarButton.svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../utils/portal.js";
+  import { typography } from '../../tokens/typography';
+
+  interface NavLink {
+    label: string;
+    href: string;
+  }
+
+  interface Props {
+    signoutHandler?: () => void;
+    name?: string;
+    avatar?: string;
+    email?: string;
+    navLinks?: NavLink[];
+    dropdownLinks?: NavLink[];
+    showBackButton?: boolean;
+  }
+
+  let {
+    signoutHandler = () => {},
+    name = "",
+    avatar = "",
+    email = "",
+    navLinks = [],
+    dropdownLinks = [],
+    showBackButton = false,
+  }: Props = $props();
+
+  let showMobileSheet = $state(false);
+  let showDesktopDropdown = $state(false);
+
+  let currentPath = $derived($page.url.pathname);
+
+  function isActive(href: string, path: string): boolean {
+    if (href === `${base}/` || href === '/') {
+      return path === href || path === `${base}/`;
+    }
+    return path.startsWith(href);
+  }
+
+  function handleDropdownItemClick(href: string) {
+    showDesktopDropdown = false;
+    goto(href);
+  }
+
+  function handleMobileSheetItemClick(href: string) {
+    showMobileSheet = false;
+    goto(href);
+  }
+</script>
+
+{#if showBackButton}
+  <div class="block flex-1 md:hidden">
+    <Button variant="ghost" size="sm" onclick={() => history.back()}>
+      <ChevronLeft class="w-5 h-5" />
+      Back
+    </Button>
+  </div>
+  <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 ${typography.label} ${typography.textMuted} 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">
+        <AvatarButton
+          size="md"
+          onclick={() => showDesktopDropdown = !showDesktopDropdown}
+        >
+          <Avatar src={avatar} rounded size="md" />
+        </AvatarButton>
+
+        {#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" onclick={() => 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 ${typography.label}`}>{name || "Performer"}</span>
+              <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
+            </div>
+            {#each dropdownLinks as { label, href }}
+              <MenuItem
+                size="md"
+                onclick={() => handleDropdownItemClick(href)}
+              >
+                {label}
+              </MenuItem>
+            {/each}
+            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+            <MenuItem
+              danger
+              size="md"
+              onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
+            >
+              Sign out
+            </MenuItem>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <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 ${typography.label} ${typography.textMuted} 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">
+      <AvatarButton
+        size="md"
+        class="block md:hidden"
+        onclick={() => showMobileSheet = true}
+      >
+        <Avatar src={avatar} rounded size="md" />
+      </AvatarButton>
+
+      <AvatarButton
+        size="md"
+        class="hidden md:block"
+        onclick={() => showDesktopDropdown = !showDesktopDropdown}
+      >
+        <Avatar src={avatar} rounded size="md" />
+      </AvatarButton>
+
+      {#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" onclick={() => 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 ${typography.label}`}>{name || "Performer"}</span>
+            <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
+          </div>
+          {#each dropdownLinks as { label, href }}
+            <MenuItem
+              size="md"
+              onclick={() => handleDropdownItemClick(href)}
+            >
+              {label}
+            </MenuItem>
+          {/each}
+          <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+          <MenuItem
+            danger
+            size="md"
+            onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
+          >
+            Sign out
+          </MenuItem>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+{#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"
+    onclick={() => { 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"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <div class="flex justify-center pt-3 pb-2">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
+      </div>
+
+      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <p class={`${typography.h4} m-0`}>{name || "Performer"}</p>
+        <p class={`${typography.smMuted} mt-0.5 m-0`}>{email || ""}</p>
+      </div>
+
+      <div class="py-2">
+        {#each dropdownLinks as { label, href }}
+          <MenuItem
+            size="lg"
+            onclick={() => handleMobileSheetItemClick(href)}
+          >
+            {label}
+          </MenuItem>
+        {/each}
+
+        <MenuItem
+          danger
+          size="lg"
+          onclick={() => { showMobileSheet = false; signoutHandler(); }}
+        >
+          Sign Out
+        </MenuItem>
+      </div>
+
+      <div class="border-t-8 border-gray-100 dark:border-gray-700">
+        <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </div>
+{/if}