sh3-core 0.17.0 → 0.19.0

package/dist/assets/icons.svg

@@ -1128,4 +1128,35 @@
     <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
   </symbol>
 
+  <!-- lucide/menu -->
+  <symbol id="menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 5h16" />
+    <path d="M4 12h16" />
+    <path d="M4 19h16" />
+  </symbol>
+
+  <!-- lucide/panel-right -->
+  <symbol id="panel-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M15 3v18" />
+  </symbol>
+
+  <!-- lucide/panel-top -->
+  <symbol id="panel-top" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M3 9h18" />
+  </symbol>
+
+  <!-- lucide/command -->
+  <symbol id="command" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+  </symbol>
+
+  <!-- lucide/ellipsis-vertical -->
+  <symbol id="ellipsis-vertical" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="12" cy="5" r="1" />
+    <circle cx="12" cy="19" r="1" />
+  </symbol>
+
 </svg>

package/dist/auth/auth.svelte.js

@@ -8,6 +8,8 @@
  *
  * .svelte.ts because it uses $state for reactive auth status.
  */
+import { apiFetch } from '../transport/apiFetch';
+import { setAuthToken } from '../transport/authToken';
 /** Reactive auth state. */
 let currentUser = $state(null);
 let currentSession = $state(null);
@@ -23,22 +25,28 @@ let authConfig = null;
  * after fetching /api/boot.
  */
 export function initFromBoot(url, config) {
+    var _a, _b;
     serverUrl = url;
     authConfig = config.auth;
     currentUser = config.user;
     currentSession = config.session;
     guest = !config.session && !config.user;
+    // Sync the cross-origin auth-token store. If the boot returned no
+    // session but localStorage still holds a stale token, drop it — the
+    // server already disowned it (otherwise it would have echoed the
+    // session back).
+    setAuthToken((_b = (_a = config.session) === null || _a === void 0 ? void 0 : _a.token) !== null && _b !== void 0 ? _b : null);
 }
 /**
  * Log in with username + password. On success, updates reactive state.
  * Returns { ok: true } or { ok: false, error: string }.
  */
 export async function login(username, password) {
+    var _a, _b;
     try {
-        const res = await fetch(`${serverUrl}/api/auth/login`, {
+        const res = await apiFetch(`${serverUrl}/api/auth/login`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            credentials: 'include',
             body: JSON.stringify({ username, password }),
         });
         if (!res.ok) {
@@ -49,9 +57,10 @@ export async function login(username, password) {
         currentUser = body.user;
         currentSession = body.session;
         guest = false;
+        setAuthToken((_b = (_a = body.session) === null || _a === void 0 ? void 0 : _a.token) !== null && _b !== void 0 ? _b : null);
         return { ok: true };
     }
-    catch (_a) {
+    catch (_c) {
         return { ok: false, error: 'Network error' };
     }
 }
@@ -60,11 +69,11 @@ export async function login(username, password) {
  * On success, auto-logs in and updates reactive state.
  */
 export async function register(username, password, displayName) {
+    var _a, _b;
     try {
-        const res = await fetch(`${serverUrl}/api/auth/register`, {
+        const res = await apiFetch(`${serverUrl}/api/auth/register`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            credentials: 'include',
             body: JSON.stringify({ username, password, displayName }),
         });
         if (!res.ok) {
@@ -75,9 +84,10 @@ export async function register(username, password, displayName) {
         currentUser = body.user;
         currentSession = body.session;
         guest = false;
+        setAuthToken((_b = (_a = body.session) === null || _a === void 0 ? void 0 : _a.token) !== null && _b !== void 0 ? _b : null);
         return { ok: true };
     }
-    catch (_a) {
+    catch (_c) {
         return { ok: false, error: 'Network error' };
     }
 }
@@ -92,14 +102,14 @@ export async function register(username, password, displayName) {
  */
 export async function logout() {
     try {
-        await fetch(`${serverUrl}/api/auth/logout`, {
+        await apiFetch(`${serverUrl}/api/auth/logout`, {
             method: 'POST',
-            credentials: 'include',
         });
     }
     catch (_a) {
         // Best effort
     }
+    setAuthToken(null);
     if ((authConfig === null || authConfig === void 0 ? void 0 : authConfig.required) && !authConfig.guestAllowed) {
         // Policy forbids guest browsing — re-run the boot-time hard gate.
         // Do not touch reactive state: the page is leaving.

package/dist/auth/types.d.ts

@@ -29,6 +29,12 @@ export interface BootConfig {
     user: AuthUser | null;
     session: AuthSession | null;
     tenantId: string;
+    /**
+     * Server's `sh3-server` semver. Optional for back-compat with
+     * pre-0.18.1 servers that didn't emit it; the cross-origin probe
+     * in `Onboarding.svelte` falls back to `'unknown'` when absent.
+     */
+    version?: string;
 }
 /** Global settings shape. */
 export interface GlobalSettings {

package/dist/chrome/CompactChrome.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  /*
+   * Top app bar for compact mode. Three-column grid:
+   *   leading  — one Button per non-null drawer anchor (read from
+   *              the active CompactRendering)
+   *   title    — active app name
+   *   trailing — palette button + overflow (menu sheet) button
+   *
+   * MenuSheet handles the overflow menu; this component owns the open
+   * state and renders MenuSheet conditionally.
+   */
+  import { sh3 } from '../sh3Runtime.svelte';
+  import { layoutStore, getActiveRoot } from '../layout/store.svelte';
+  import { derive } from '../layout/compact/derive';
+  import { getLiveDispatcherState } from '../actions/state.svelte';
+  import { getRegisteredApp } from '../apps/registry.svelte';
+  import { returnToHome } from '../apps/lifecycle';
+  import Button from '../primitives/Button.svelte';
+  import MenuSheet from './MenuSheet.svelte';
+  import type { DrawerAnchor } from '../layout/compact/types';
+
+  const rendering = $derived(derive(layoutStore.root));
+  const dispatcher = $derived(getLiveDispatcherState());
+  const onHome = $derived(getActiveRoot() === 'home');
+  const appLabel = $derived.by(() => {
+    const id = dispatcher.activeAppId;
+    if (!id) return 'SH3';
+    return getRegisteredApp(id)?.manifest.label ?? id;
+  });
+
+  /**
+   * Pick the topmost carousel — the one with the lexicographically smallest
+   * path key. `''` (root) sorts before `'0'` etc.; among siblings, smaller
+   * indices sort first. This deterministically selects the spatially-topmost
+   * full-width tab group when multiple carousels are stacked vertically.
+   */
+  const topmostCarouselLabel = $derived.by(() => {
+    if (rendering.carousels.size === 0) return null;
+    let bestKey: string | null = null;
+    let bestLabel = '';
+    for (const [key, info] of rendering.carousels) {
+      if (bestKey === null || key < bestKey) {
+        bestKey = key;
+        bestLabel = info.activeLabel;
+      }
+    }
+    return bestLabel;
+  });
+
+  const title = $derived.by(() => {
+    const carouselLabel = topmostCarouselLabel;
+    if (carouselLabel) return `${appLabel} › ${carouselLabel}`;
+    return appLabel;
+  });
+
+  let menuOpen = $state(false);
+
+  function toggleDrawer(anchor: DrawerAnchor) {
+    sh3.drawers.toggle(anchor);
+  }
+  function openPalette() {
+    sh3.actions.openPalette();
+  }
+</script>
+
+<header class="sh3-compact-chrome" data-sh3-region="compact-chrome">
+  <div class="leading">
+    <Button
+      variant="icon"
+      icon="house"
+      ariaLabel="Home"
+      title="Home"
+      disabled={onHome}
+      onclick={() => returnToHome()}
+    />
+    {#if rendering.drawers.left}
+      <span data-sh3-anchor="left">
+        <Button variant="icon" icon="menu" ariaLabel="Toggle left drawer" title="Toggle left drawer" onclick={() => toggleDrawer('left')} />
+      </span>
+    {/if}
+    {#if rendering.drawers.right}
+      <span data-sh3-anchor="right">
+        <Button variant="icon" icon="panel-right" ariaLabel="Toggle right drawer" title="Toggle right drawer" onclick={() => toggleDrawer('right')} />
+      </span>
+    {/if}
+    {#if rendering.drawers.top}
+      <span data-sh3-anchor="top">
+        <Button variant="icon" icon="panel-top" ariaLabel="Toggle top drawer" title="Toggle top drawer" onclick={() => toggleDrawer('top')} />
+      </span>
+    {/if}
+  </div>
+  <div class="title">{title}</div>
+  <div class="trailing">
+    <Button variant="icon" icon="command" ariaLabel="Open command palette" title="Open command palette" onclick={openPalette} />
+    <Button variant="icon" icon="ellipsis-vertical" ariaLabel="Open menu" title="Open menu" onclick={() => { menuOpen = true; }} />
+  </div>
+</header>
+
+<MenuSheet open={menuOpen} onClose={() => (menuOpen = false)} />
+
+<style>
+  .sh3-compact-chrome {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    height: var(--sh3-tabbar-height);
+    padding: 0 var(--sh3-pad-sm);
+    gap: var(--sh3-pad-sm);
+    background: var(--sh3-grad-bg-elevated, var(--sh3-bg-elevated));
+    border-bottom: 1px solid var(--sh3-border);
+    color: var(--sh3-fg);
+  }
+  .leading,
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sh3-pad-xs);
+  }
+  .leading > span {
+    display: inline-flex;
+    align-items: center;
+  }
+  .title {
+    font-weight: 600;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/chrome/CompactChrome.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CompactChrome: import("svelte").Component<Record<string, never>, {}, "">;
+type CompactChrome = ReturnType<typeof CompactChrome>;
+export default CompactChrome;

package/dist/chrome/CompactChrome.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/chrome/CompactChrome.svelte.test.js

@@ -0,0 +1,174 @@
+/*
+ * DOM smoke for CompactChrome — verifies the toolbar renders the
+ * expected leading drawer toggles based on the active layout's
+ * derived rendering, plus the trailing palette + overflow buttons.
+ */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import CompactChrome from './CompactChrome.svelte';
+import { __resetLayoutStoreForTest, attachApp, detachApp, switchToApp, switchToHome, } from '../layout/store.svelte';
+import { drawerStore } from '../layout/compact/drawerStore.svelte';
+import { setActiveApp, __resetDispatcherStateForTest } from '../actions/state.svelte';
+import { registerApp, __resetAppRegistryForTest } from '../apps/registry.svelte';
+const CompactChromeAny = CompactChrome;
+function fakeApp() {
+    return {
+        manifest: { id: 'cc-app', label: 'CC App', layoutVersion: 5 },
+        initialLayout: {
+            type: 'split', direction: 'horizontal', sizes: [0.2, 0.6, 0.2],
+            children: [
+                { type: 'slot', slotId: 'sb', viewId: 'v:sb', role: 'sidebar' },
+                { type: 'slot', slotId: 'body', viewId: 'v:body', role: 'body' },
+                { type: 'slot', slotId: 'ins', viewId: 'v:ins', role: 'inspector' },
+            ],
+        },
+    };
+}
+let mounted = null;
+let host = null;
+afterEach(() => {
+    if (mounted) {
+        unmount(mounted);
+        mounted = null;
+    }
+    if (host) {
+        host.remove();
+        host = null;
+    }
+    detachApp();
+    __resetAppRegistryForTest();
+    __resetDispatcherStateForTest();
+});
+beforeEach(() => {
+    __resetLayoutStoreForTest();
+    drawerStore.__reset();
+    __resetAppRegistryForTest();
+    __resetDispatcherStateForTest();
+});
+function attachAndActivate(app) {
+    var _a;
+    registerApp(app);
+    attachApp(app);
+    switchToApp();
+    setActiveApp(app.manifest.id, new Set((_a = app.manifest.requiredShards) !== null && _a !== void 0 ? _a : []));
+}
+describe('CompactChrome (dom)', () => {
+    it('renders a leading toggle for each present drawer anchor', () => {
+        attachApp(fakeApp());
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        expect(host.querySelector('.leading [data-sh3-anchor="left"] button')).not.toBeNull();
+        expect(host.querySelector('.leading [data-sh3-anchor="right"] button')).not.toBeNull();
+        expect(host.querySelector('.leading [data-sh3-anchor="top"] button')).toBeNull();
+    });
+    it('renders palette + overflow buttons in the trailing section', () => {
+        attachApp(fakeApp());
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        const trailing = host.querySelectorAll('.trailing button');
+        expect(trailing.length).toBe(2);
+    });
+});
+describe('CompactChrome — home button', () => {
+    it('renders a home button as the first leading item', () => {
+        attachApp(fakeApp());
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        const homeBtn = host.querySelector('.leading button[aria-label="Home"]');
+        expect(homeBtn).not.toBeNull();
+        expect(homeBtn === null || homeBtn === void 0 ? void 0 : homeBtn.hasAttribute('disabled')).toBe(false);
+    });
+    it('disables the home button when on home', () => {
+        switchToHome();
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        const homeBtn = host.querySelector('.leading button[aria-label="Home"]');
+        expect(homeBtn).not.toBeNull();
+        expect(homeBtn === null || homeBtn === void 0 ? void 0 : homeBtn.hasAttribute('disabled')).toBe(true);
+    });
+});
+describe('CompactChrome — breadcrumb', () => {
+    it('renders only AppName when no carousel is active', () => {
+        var _a;
+        const app = {
+            manifest: { id: 'plain-app', label: 'Plain App', layoutVersion: 6 },
+            initialLayout: { type: 'slot', slotId: 'b', viewId: null, role: 'body' },
+        };
+        attachAndActivate(app);
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        const title = host.querySelector('.title');
+        expect((_a = title === null || title === void 0 ? void 0 : title.textContent) === null || _a === void 0 ? void 0 : _a.trim()).toBe('Plain App');
+    });
+    it('renders AppName › ActiveLabel when a carousel is active', () => {
+        var _a;
+        const app = {
+            manifest: { id: 'carousel-app', label: 'Carousel App', layoutVersion: 6 },
+            initialLayout: {
+                type: 'tabs',
+                activeTab: 1,
+                tabs: [
+                    { slotId: 's0', viewId: null, label: 'First', role: 'body' },
+                    { slotId: 's1', viewId: null, label: 'Second', role: 'body' },
+                ],
+            },
+        };
+        attachAndActivate(app);
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        const title = host.querySelector('.title');
+        expect((_a = title === null || title === void 0 ? void 0 : title.textContent) === null || _a === void 0 ? void 0 : _a.trim()).toBe('Carousel App › Second');
+    });
+    it('with multiple stacked carousels, breadcrumb uses the topmost (lowest path-key sort order)', () => {
+        var _a;
+        const app = {
+            manifest: { id: 'stacked-app', label: 'Stacked', layoutVersion: 6 },
+            initialLayout: {
+                type: 'split',
+                direction: 'vertical',
+                sizes: [0.5, 0.5],
+                children: [
+                    {
+                        type: 'tabs',
+                        activeTab: 0,
+                        tabs: [{ slotId: 'top0', viewId: null, label: 'TopActive', role: 'body' }],
+                    },
+                    {
+                        type: 'tabs',
+                        activeTab: 0,
+                        tabs: [{ slotId: 'bot0', viewId: null, label: 'BottomActive', role: 'body' }],
+                    },
+                ],
+            },
+        };
+        attachAndActivate(app);
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactChromeAny, { target: host });
+        flushSync();
+        const title = host.querySelector('.title');
+        expect((_a = title === null || title === void 0 ? void 0 : title.textContent) === null || _a === void 0 ? void 0 : _a.trim()).toBe('Stacked › TopActive');
+    });
+});

package/dist/chrome/MenuSheet.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  /*
+   * Touch-friendly replacement for MenuBar — bottom-anchored sheet with
+   * collapsible sections per menu container. Tapping a submenu parent
+   * expands its children inline (no nested popover stack — see
+   * docs/superpowers/specs/2026-05-09-action-submenu-discoverability-design.md).
+   *
+   * Reads the same dispatcher state and registry as MenuBar:
+   *   resolveMenuContainers(activeAppId, declared)
+   *   resolveMenuItems(entries, dispatcherState, containerId)
+   *   resolveSubmenuItems(entries, dispatcherState, parentId)
+   */
+  import {
+    resolveMenuContainers,
+    resolveMenuItems,
+    resolveSubmenuItems,
+    type MenuBarItem,
+  } from '../actions/menuBarModel';
+  import { listActions } from '../actions/registry';
+  import { getLiveDispatcherState } from '../actions/state.svelte';
+  import { getRegisteredApp } from '../apps/registry.svelte';
+  import { resolveLabel } from '../actions/types';
+
+  let { open, onClose }: { open: boolean; onClose: () => void } = $props();
+
+  const dispatcher = $derived(getLiveDispatcherState());
+  const activeAppId = $derived(dispatcher.activeAppId);
+  const declaredMenus = $derived.by(() => {
+    if (!activeAppId) return undefined;
+    return getRegisteredApp(activeAppId)?.manifest.menus;
+  });
+  const containers = $derived(resolveMenuContainers(activeAppId, declaredMenus));
+  const containerItems = $derived.by(() => {
+    const out: { containerId: string; label: string; items: MenuBarItem[] }[] = [];
+    const entries = listActions();
+    for (const c of containers) {
+      const items = resolveMenuItems(entries, dispatcher, c.id);
+      if (items.length > 0) out.push({ containerId: c.id, label: c.label, items });
+    }
+    return out;
+  });
+
+  let expanded = $state(new Set<string>());
+  let expandedSubmenu = $state(new Set<string>());
+
+  function toggleContainer(id: string) {
+    const next = new Set(expanded);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    expanded = next;
+  }
+
+  function toggleSubmenu(id: string) {
+    const next = new Set(expandedSubmenu);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    expandedSubmenu = next;
+  }
+
+  function invoke(itemId: string) {
+    const entry = listActions().find((e) => e.action.id === itemId);
+    if (!entry || typeof entry.action.run !== 'function') return;
+    try {
+      void entry.action.run({
+        action: { id: itemId, label: resolveLabel(entry.action) },
+        appId: dispatcher.activeAppId,
+        viewId: dispatcher.focusedViewId ?? undefined,
+        selection: dispatcher.selection ?? undefined,
+        invokedVia: 'palette',
+        dispatch: () => {},
+      });
+    } catch (err) {
+      console.error(`[sh3] menu-sheet action "${itemId}" threw:`, err);
+    }
+    onClose();
+  }
+</script>
+
+{#if open}
+  <div
+    class="backdrop"
+    onclick={onClose}
+    onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}
+    role="presentation"
+  ></div>
+  <div class="sheet" role="dialog" aria-label="Menu" data-sh3-region="menu-sheet">
+    <div class="scroll">
+      {#each containerItems as { containerId, label, items } (containerId)}
+        <button
+          class="container"
+          aria-expanded={expanded.has(containerId)}
+          onclick={() => toggleContainer(containerId)}
+        >
+          <span class="caret" class:open={expanded.has(containerId)}>▸</span>
+          <span class="label">{label}</span>
+        </button>
+        {#if expanded.has(containerId)}
+          <div class="items">
+            {#each items as item (item.id)}
+              {#if item.submenu}
+                <button
+                  class="item submenu"
+                  aria-expanded={expandedSubmenu.has(item.id)}
+                  disabled={item.disabled}
+                  onclick={() => toggleSubmenu(item.id)}
+                >
+                  <span class="caret" class:open={expandedSubmenu.has(item.id)}>▸</span>
+                  <span class="label">{item.label}</span>
+                </button>
+                {#if expandedSubmenu.has(item.id)}
+                  <div class="subitems">
+                    {#each resolveSubmenuItems(listActions(), dispatcher, item.id) as sub (sub.id)}
+                      <button
+                        class="item child"
+                        disabled={sub.disabled}
+                        onclick={() => invoke(sub.id)}
+                      >
+                        <span class="label">{sub.label}</span>
+                        {#if sub.shortcut}
+                          <span class="shortcut">{sub.shortcut}</span>
+                        {/if}
+                      </button>
+                    {/each}
+                  </div>
+                {/if}
+              {:else}
+                <button
+                  class="item"
+                  disabled={item.disabled}
+                  onclick={() => invoke(item.id)}
+                >
+                  <span class="label">{item.label}</span>
+                  {#if item.shortcut}
+                    <span class="shortcut">{item.shortcut}</span>
+                  {/if}
+                </button>
+              {/if}
+            {/each}
+          </div>
+        {/if}
+      {/each}
+    </div>
+    <button class="cancel" onclick={onClose}>Cancel</button>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    background: var(--sh3-overlay-backdrop, rgba(0, 0, 0, 0.35));
+    pointer-events: auto;
+    z-index: var(--sh3-z-layer-4);
+  }
+  .sheet {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--sh3-bg);
+    color: var(--sh3-fg);
+    border-top: 1px solid var(--sh3-border);
+    box-shadow: var(--sh3-shadow-md, 0 -4px 16px rgba(0, 0, 0, 0.2));
+    pointer-events: auto;
+    z-index: var(--sh3-z-layer-4);
+  }
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--sh3-pad-sm) 0;
+  }
+  .container {
+    display: flex;
+    align-items: center;
+    gap: var(--sh3-pad-sm);
+    width: 100%;
+    padding: var(--sh3-pad-sm) var(--sh3-pad-md);
+    border: none;
+    background: none;
+    color: var(--sh3-fg);
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+  }
+  .container:active { background: var(--sh3-bg-sunken); }
+  .items { padding-left: var(--sh3-pad-md); }
+  .subitems { padding-left: var(--sh3-pad-md); }
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--sh3-pad-sm);
+    width: 100%;
+    padding: var(--sh3-pad-sm) var(--sh3-pad-md);
+    border: none;
+    background: none;
+    color: var(--sh3-fg);
+    text-align: left;
+    cursor: pointer;
+  }
+  .item:disabled { opacity: 0.5; cursor: not-allowed; }
+  .item:active:not(:disabled) { background: var(--sh3-bg-sunken); }
+  .item.child { padding-left: calc(var(--sh3-pad-md) * 2); }
+  .label { flex: 1; }
+  .shortcut { color: var(--sh3-fg-muted); font-family: var(--sh3-font-mono); }
+  .caret {
+    display: inline-block;
+    width: 1em;
+    transition: transform 120ms;
+  }
+  .caret.open { transform: rotate(90deg); }
+  .cancel {
+    padding: var(--sh3-pad-md);
+    border: none;
+    border-top: 1px solid var(--sh3-border);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    font-weight: 600;
+    cursor: pointer;
+  }
+</style>

package/dist/chrome/MenuSheet.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    open: boolean;
+    onClose: () => void;
+};
+declare const MenuSheet: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuSheet = ReturnType<typeof MenuSheet>;
+export default MenuSheet;