sh3-core 0.11.4 → 0.11.7

package/dist/BrandSlot.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  /*
+   * BrandSlot — top-bar context indicator. Three states:
+   *   - 'brand'      → renders <span>SH3</span>
+   *   - 'app'        → renders <span>{label}</span>
+   *   - 'breadcrumb' → renders SH3 + separator + <button>{label}</button>
+   *
+   * State derives from (activeAppId, breadcrumbAppId). Click on the
+   * breadcrumb's app button re-launches the app (existing handler).
+   */
+  import { getLiveDispatcherState } from './actions/state.svelte';
+  import { launchApp } from './apps/lifecycle';
+  import { getBreadcrumbAppId, getRegisteredApp } from './apps/registry.svelte';
+
+  const activeAppId = $derived(getLiveDispatcherState().activeAppId);
+  const breadcrumbId = $derived(getBreadcrumbAppId());
+
+  const activeLabel = $derived(
+    activeAppId ? getRegisteredApp(activeAppId)?.manifest.label ?? activeAppId : null,
+  );
+  const breadcrumbLabel = $derived(
+    breadcrumbId ? getRegisteredApp(breadcrumbId)?.manifest.label ?? breadcrumbId : null,
+  );
+
+  const mode: 'brand' | 'app' | 'breadcrumb' = $derived.by(() => {
+    if (activeAppId) return 'app';
+    if (breadcrumbId) return 'breadcrumb';
+    return 'brand';
+  });
+
+  function reopen() {
+    if (breadcrumbId) void launchApp(breadcrumbId);
+  }
+</script>
+
+<div class="sh3-brand-slot">
+  {#if mode === 'brand'}
+    <span class="sh3-brand">SH3</span>
+  {:else if mode === 'app'}
+    <span class="sh3-brand sh3-brand-app">{activeLabel}</span>
+  {:else}
+    <span class="sh3-brand">SH3</span>
+    <span class="sh3-brand-sep" aria-hidden="true">›</span>
+    <button type="button" class="sh3-brand-crumb" onclick={reopen}>
+      {breadcrumbLabel}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .sh3-brand-slot {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .sh3-brand {
+    font-weight: 600;
+    color: var(--shell-accent);
+    letter-spacing: 0.5px;
+  }
+  .sh3-brand-app {
+    color: var(--shell-fg);
+  }
+  .sh3-brand-sep {
+    color: var(--shell-fg-muted);
+    margin: 0 4px;
+  }
+  .sh3-brand-crumb {
+    background: transparent;
+    border: 0;
+    color: var(--shell-fg);
+    font: inherit;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .sh3-brand-crumb:hover {
+    background: var(--shell-bg-elevated);
+  }
+</style>

package/dist/BrandSlot.svelte.d.ts

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

package/dist/BrandSlot.test.d.ts

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

package/dist/BrandSlot.test.js

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mount, unmount, tick } from 'svelte';
+// Mock launchApp so we can assert the click handler invokes it.
+// The real launchApp does heavy lifecycle work; we only care that BrandSlot
+// calls it with the right argument.
+vi.mock('./apps/lifecycle', async (orig) => {
+    const actual = await orig();
+    return Object.assign(Object.assign({}, actual), { launchApp: vi.fn(actual.launchApp) });
+});
+import BrandSlot from './BrandSlot.svelte';
+import { setActiveApp, __resetDispatcherStateForTest } from './actions/state.svelte';
+import { registerApp, __resetAppRegistryForTest, __resetBreadcrumbForTest, breadcrumbApp, } from './apps/registry.svelte';
+import { launchApp } from './apps/lifecycle';
+let host;
+let cmp = null;
+function makeApp(id, label) {
+    return {
+        manifest: {
+            id, label, version: '0.0.0',
+            requiredShards: [], layoutVersion: 1,
+        },
+        initialLayout: { type: 'leaf', viewId: 'x:v' },
+    };
+}
+beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    __resetBreadcrumbForTest();
+    __resetDispatcherStateForTest();
+});
+afterEach(() => {
+    if (cmp) {
+        unmount(cmp);
+        cmp = null;
+    }
+    host.remove();
+    __resetAppRegistryForTest();
+    __resetDispatcherStateForTest();
+    vi.clearAllMocks();
+});
+describe('BrandSlot', () => {
+    it('renders SH3 when no app has launched this session', async () => {
+        var _a;
+        cmp = mount(BrandSlot, { target: host, props: {} });
+        await tick();
+        expect((_a = host.textContent) === null || _a === void 0 ? void 0 : _a.trim()).toBe('SH3');
+        expect(host.querySelector('button')).toBeNull();
+    });
+    it('renders [App Name] when an app is currently active', async () => {
+        registerApp(makeApp('app.a', 'My App'));
+        breadcrumbApp.id = 'app.a';
+        setActiveApp('app.a', new Set());
+        cmp = mount(BrandSlot, { target: host, props: {} });
+        await tick();
+        expect(host.textContent).toContain('My App');
+        expect(host.textContent).not.toContain('SH3');
+    });
+    it('renders "SH3 > [App Name]" with the app portion clickable when at home with prior app', async () => {
+        registerApp(makeApp('app.a', 'My App'));
+        breadcrumbApp.id = 'app.a';
+        setActiveApp(null, new Set());
+        cmp = mount(BrandSlot, { target: host, props: {} });
+        await tick();
+        expect(host.textContent).toMatch(/SH3.*My App/);
+        const btn = host.querySelector('button');
+        expect(btn).not.toBeNull();
+        expect(btn.textContent).toContain('My App');
+        btn.click();
+        expect(launchApp).toHaveBeenCalledWith('app.a');
+    });
+});

package/dist/Shell.svelte

@@ -28,6 +28,8 @@
   import GuestBanner from './auth/GuestBanner.svelte';
   import ConsentDialog from './keys/ConsentDialog.svelte';
   import { startServerSideStream } from './keys/revocation-bus.svelte';
+  import BrandSlot from './BrandSlot.svelte';
+  import MenuBar from './actions/MenuBar.svelte';
 
   const authenticated = $derived(isAuthenticated());
   const user = $derived(getUser());
@@ -110,7 +112,8 @@
         <use href="{iconsUrl}#house" />
       </svg>
     </button>
-    <span class="shell-tabbar-brand">SH3</span>
+    <BrandSlot />
+    <MenuBar />
     {#if authenticated && user}
       <div class="shell-tabbar-user">
         <span class="shell-tabbar-user-name">{user.displayName}</span>
@@ -185,7 +188,8 @@
   }
 
   .shell-tabbar {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
     align-items: center;
     gap: var(--shell-pad-md);
     padding: 0 var(--shell-pad-md);
@@ -193,11 +197,6 @@
     border-bottom: 1px solid var(--shell-border);
     user-select: none;
   }
-  .shell-tabbar-brand {
-    font-weight: 600;
-    color: var(--shell-accent);
-    letter-spacing: 0.5px;
-  }
 
   .shell-content {
     position: relative;
@@ -258,7 +257,6 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    margin-left: auto;
   }
   .shell-tabbar-user-name {
     font-size: 12px;
@@ -269,10 +267,10 @@
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #fff;
+    color: var(--shell-fg-on-accent);
     background: var(--shell-accent);
     padding: 1px 6px;
-    border-radius: 6px;
+    border-radius: var(--shell-radius-md);
   }
   .shell-tabbar-signout {
     display: flex;

package/dist/actions/ActionPanel.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>
+  import type { MenuBarItem } from './menuBarModel';
+
+  export interface ActionPanelSection {
+    id: string;
+    items: MenuBarItem[];
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * ActionPanel — shared dropdown body for action lists. Renders sections
+   * (each a group of items) with separators between them. Owns: row
+   * rendering, hover/focus state, keyboard nav, click-dispatch. Does NOT
+   * own: positioning, backdrop, the popover surface itself — those stay
+   * with the consumer (ContextMenu, MenuButton, etc.).
+   *
+   * Visuals:
+   *   - Reserved leading "check slot": ✓ when item.checked, blank otherwise.
+   *   - Disabled items: aria-disabled, .sh3-ctx-disabled class, click no-op,
+   *     keyboard skip.
+   *   - Submenu parents: trailing ▸, no shortcut hint. The submenu drill
+   *     itself is wired by the consumer (MenuButton / context-menu listener)
+   *     via onInvoke — this component just emits the parent's id.
+   */
+
+  let { sections, onInvoke, onDismiss }: {
+    sections: ActionPanelSection[];
+    onInvoke: (id: string) => void;
+    onDismiss: () => void;
+  } = $props();
+
+  const flatItems: MenuBarItem[] = $derived(sections.flatMap((s) => s.items));
+  let cursor = $state(0);
+
+  function nextEnabled(start: number, dir: 1 | -1): number {
+    if (flatItems.length === 0) return 0;
+    let i = start;
+    for (let n = 0; n < flatItems.length; n++) {
+      i = (i + dir + flatItems.length) % flatItems.length;
+      if (!flatItems[i].disabled) return i;
+    }
+    return start;
+  }
+
+  function onKeydown(ev: KeyboardEvent) {
+    if (ev.key === 'ArrowDown') {
+      cursor = nextEnabled(cursor, 1);
+      ev.preventDefault();
+    } else if (ev.key === 'ArrowUp') {
+      cursor = nextEnabled(cursor, -1);
+      ev.preventDefault();
+    } else if (ev.key === 'Enter') {
+      const item = flatItems[cursor];
+      if (item && !item.disabled) {
+        onInvoke(item.id);
+        if (!item.submenu) onDismiss();
+      }
+      ev.preventDefault();
+    } else if (ev.key === 'Escape') {
+      onDismiss();
+      ev.preventDefault();
+    } else if (ev.key.length === 1) {
+      const q = ev.key.toLowerCase();
+      const start = (cursor + 1) % flatItems.length;
+      for (let i = 0; i < flatItems.length; i++) {
+        const idx = (start + i) % flatItems.length;
+        const item = flatItems[idx];
+        if (item.disabled) continue;
+        if (item.label.toLowerCase().startsWith(q)) {
+          cursor = idx;
+          break;
+        }
+      }
+    }
+  }
+
+  function onItemClick(item: MenuBarItem) {
+    if (item.disabled) return;
+    onInvoke(item.id);
+    if (!item.submenu) onDismiss();
+  }
+</script>
+
+<!-- svelte-ignore a11y_autofocus -->
+<div class="sh3-context-menu" role="menu" tabindex="0" onkeydown={onKeydown} autofocus>
+  {#each sections as section, sIdx (section.id)}
+    {#if sIdx > 0}<div class="sh3-ctx-sep" role="separator"></div>{/if}
+    {#each section.items as item (item.id)}
+      {@const globalIdx = flatItems.indexOf(item)}
+      <button
+        class="sh3-ctx-item"
+        class:sh3-ctx-active={globalIdx === cursor}
+        class:sh3-ctx-disabled={item.disabled}
+        role="menuitem"
+        aria-disabled={item.disabled || undefined}
+        onpointerenter={() => { if (!item.disabled) cursor = globalIdx; }}
+        onclick={() => onItemClick(item)}
+      >
+        <span class="sh3-ctx-check">{item.checked ? '✓' : ''}</span>
+        <span class="sh3-ctx-label">{item.label}</span>
+        {#if item.submenu}
+          <span class="sh3-ctx-chevron">▸</span>
+        {:else if item.shortcut}
+          <span class="sh3-ctx-shortcut">{item.shortcut}</span>
+        {/if}
+      </button>
+    {/each}
+  {/each}
+</div>
+
+<style>
+  .sh3-context-menu {
+    min-width: 220px;
+    background: var(--shell-bg-elevated, #222);
+    color: var(--shell-fg, #eee);
+    border-radius: 4px;
+    padding: 4px 0;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+    outline: none;
+  }
+  .sh3-ctx-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 4px 10px;
+    background: none;
+    border: 0;
+    text-align: left;
+    color: inherit;
+    cursor: default;
+    font: inherit;
+  }
+  .sh3-ctx-active { background: var(--shell-accent, #6ea8fe); color: var(--shell-fg,#e4e6eb); }
+  .sh3-ctx-disabled { opacity: 0.45; }
+  .sh3-ctx-disabled.sh3-ctx-active { background: transparent; }
+  .sh3-ctx-check { display: inline-block; width: 12px; text-align: center; opacity: 0.85; }
+  .sh3-ctx-label { flex: 1; }
+  .sh3-ctx-chevron { opacity: 0.6; }
+  .sh3-ctx-shortcut { opacity: 0.6; font-size: 0.9em; }
+  .sh3-ctx-sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0; }
+</style>

package/dist/actions/ActionPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MenuBarItem } from './menuBarModel';
+export interface ActionPanelSection {
+    id: string;
+    items: MenuBarItem[];
+}
+type $$ComponentProps = {
+    sections: ActionPanelSection[];
+    onInvoke: (id: string) => void;
+    onDismiss: () => void;
+};
+declare const ActionPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ActionPanel = ReturnType<typeof ActionPanel>;
+export default ActionPanel;

package/dist/actions/ActionPanel.test.d.ts

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

package/dist/actions/ActionPanel.test.js

@@ -0,0 +1,168 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { mount, unmount, tick } from 'svelte';
+import ActionPanel from './ActionPanel.svelte';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function mountPanel(props) {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const cmp = mount(ActionPanel, { target: el, props });
+    return {
+        el,
+        cmp,
+        cleanup: () => { unmount(cmp); el.remove(); },
+    };
+}
+const baseProps = (overrides = {}) => (Object.assign({ sections: [
+        {
+            id: 'group:edit',
+            items: [
+                { id: 'copy', label: 'Copy', shortcut: 'Ctrl+C', group: 'edit', icon: undefined,
+                    checked: false, disabled: false, submenu: false },
+                { id: 'paste', label: 'Paste', shortcut: 'Ctrl+V', group: 'edit', icon: undefined,
+                    checked: false, disabled: false, submenu: false },
+            ],
+        },
+    ], onInvoke: vi.fn(), onDismiss: vi.fn() }, overrides));
+describe('ActionPanel', () => {
+    let panel;
+    afterEach(() => panel === null || panel === void 0 ? void 0 : panel.cleanup());
+    it('renders one button per item', () => {
+        panel = mountPanel(baseProps());
+        expect(panel.el.querySelectorAll('[role="menuitem"]')).toHaveLength(2);
+    });
+    it('renders shortcut hint when provided, omits when null', () => {
+        panel = mountPanel(baseProps({
+            sections: [{
+                    id: 'g',
+                    items: [
+                        { id: 'a', label: 'A', shortcut: 'Ctrl+A', group: '', icon: undefined,
+                            checked: false, disabled: false, submenu: false },
+                        { id: 'b', label: 'B', shortcut: null, group: '', icon: undefined,
+                            checked: false, disabled: false, submenu: false },
+                    ],
+                }],
+        }));
+        const shortcuts = panel.el.querySelectorAll('.sh3-ctx-shortcut');
+        expect(shortcuts).toHaveLength(1);
+        expect(shortcuts[0].textContent).toBe('Ctrl+A');
+    });
+    it('inserts a separator between distinct sections', () => {
+        panel = mountPanel(baseProps({
+            sections: [
+                { id: 'g1', items: [{ id: 'a', label: 'A', shortcut: null, group: 'g1', icon: undefined,
+                            checked: false, disabled: false, submenu: false }] },
+                { id: 'g2', items: [{ id: 'b', label: 'B', shortcut: null, group: 'g2', icon: undefined,
+                            checked: false, disabled: false, submenu: false }] },
+            ],
+        }));
+        expect(panel.el.querySelectorAll('[role="separator"]')).toHaveLength(1);
+    });
+    it('click on an item calls onInvoke with its id and onDismiss', () => {
+        const onInvoke = vi.fn();
+        const onDismiss = vi.fn();
+        panel = mountPanel(baseProps({ onInvoke, onDismiss }));
+        const items = panel.el.querySelectorAll('[role="menuitem"]');
+        items[1].click();
+        expect(onInvoke).toHaveBeenCalledWith('paste');
+        expect(onDismiss).toHaveBeenCalled();
+    });
+    it('ArrowDown moves the cursor and Enter dispatches the focused item', async () => {
+        const onInvoke = vi.fn();
+        panel = mountPanel(baseProps({ onInvoke }));
+        const root = panel.el.querySelector('[role="menu"]');
+        root.focus();
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await tick();
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        expect(onInvoke).toHaveBeenCalledWith('paste');
+    });
+    it('Escape calls onDismiss', () => {
+        const onDismiss = vi.fn();
+        panel = mountPanel(baseProps({ onDismiss }));
+        const root = panel.el.querySelector('[role="menu"]');
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        expect(onDismiss).toHaveBeenCalled();
+    });
+});
+describe('ActionPanel — checked / disabled / submenu visuals', () => {
+    let panel;
+    afterEach(() => panel === null || panel === void 0 ? void 0 : panel.cleanup());
+    it('renders a check glyph for items with checked: true', () => {
+        var _a, _b;
+        panel = mountPanel({
+            sections: [{ id: 'g', items: [
+                        { id: 'a', label: 'A', shortcut: null, group: '', icon: undefined,
+                            checked: true, disabled: false, submenu: false },
+                    ] }],
+            onInvoke: vi.fn(),
+            onDismiss: vi.fn(),
+        });
+        expect((_b = (_a = panel.el.querySelector('.sh3-ctx-check')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim())
+            .toBe('✓');
+    });
+    it('reserves the check slot (empty) on items with checked: false', () => {
+        var _a;
+        panel = mountPanel({
+            sections: [{ id: 'g', items: [
+                        { id: 'a', label: 'A', shortcut: null, group: '', icon: undefined,
+                            checked: false, disabled: false, submenu: false },
+                    ] }],
+            onInvoke: vi.fn(),
+            onDismiss: vi.fn(),
+        });
+        const slot = panel.el.querySelector('.sh3-ctx-check');
+        expect(slot).not.toBeNull();
+        expect((_a = slot.textContent) === null || _a === void 0 ? void 0 : _a.trim()).toBe('');
+    });
+    it('applies aria-disabled and class on disabled items, click is a no-op', () => {
+        const onInvoke = vi.fn();
+        panel = mountPanel({
+            sections: [{ id: 'g', items: [
+                        { id: 'a', label: 'A', shortcut: null, group: '', icon: undefined,
+                            checked: false, disabled: true, submenu: false },
+                    ] }],
+            onInvoke,
+            onDismiss: vi.fn(),
+        });
+        const btn = panel.el.querySelector('[role="menuitem"]');
+        expect(btn.getAttribute('aria-disabled')).toBe('true');
+        expect(btn.classList.contains('sh3-ctx-disabled')).toBe(true);
+        btn.click();
+        expect(onInvoke).not.toHaveBeenCalled();
+    });
+    it('keyboard nav skips disabled items', async () => {
+        const onInvoke = vi.fn();
+        panel = mountPanel({
+            sections: [{ id: 'g', items: [
+                        { id: 'a', label: 'A', shortcut: null, group: '', icon: undefined,
+                            checked: false, disabled: false, submenu: false },
+                        { id: 'b', label: 'B', shortcut: null, group: '', icon: undefined,
+                            checked: false, disabled: true, submenu: false },
+                        { id: 'c', label: 'C', shortcut: null, group: '', icon: undefined,
+                            checked: false, disabled: false, submenu: false },
+                    ] }],
+            onInvoke,
+            onDismiss: vi.fn(),
+        });
+        const root = panel.el.querySelector('[role="menu"]');
+        root.focus();
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await tick();
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        expect(onInvoke).toHaveBeenCalledWith('c');
+    });
+    it('renders chevron and suppresses shortcut hint for submenu parents', () => {
+        var _a, _b;
+        panel = mountPanel({
+            sections: [{ id: 'g', items: [
+                        { id: 'p', label: 'P', shortcut: 'Ctrl+P', group: '', icon: undefined,
+                            checked: false, disabled: false, submenu: true },
+                    ] }],
+            onInvoke: vi.fn(),
+            onDismiss: vi.fn(),
+        });
+        expect((_b = (_a = panel.el.querySelector('.sh3-ctx-chevron')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim())
+            .toBe('▸');
+        expect(panel.el.querySelector('.sh3-ctx-shortcut')).toBeNull();
+    });
+});

package/dist/actions/ContextMenu.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   /*
-   * ContextMenu — popup-rendered, tier-grouped action list. Receives
-   * a pre-built model and an onInvoke callback. Dismiss and anchoring
-   * are handled by PopupFrame / popupManager — this component only
-   * renders the list and handles keyboard navigation within it.
+   * ContextMenu — popup-rendered, tier-grouped action list. Receives a
+   * pre-built model and an onInvoke callback. Dismiss and anchoring are
+   * handled by PopupFrame / popupManager. The list rendering, keyboard
+   * nav, and click dispatch are delegated to ActionPanel.
    */
-  import type { ContextMenuModel, MenuItem } from './contextMenuModel';
+  import type { ContextMenuModel } from './contextMenuModel';
+  import ActionPanel, { type ActionPanelSection } from './ActionPanel.svelte';
 
   let { model, onInvoke, onClose }: {
     model: ContextMenuModel;
@@ -13,85 +14,16 @@
     onClose: () => void;
   } = $props();
 
-  const flatItems: MenuItem[] = $derived(model.tiers.flatMap((t) => t.items));
-  let cursor = $state(0);
-
-  function onKeydown(ev: KeyboardEvent) {
-    if (ev.key === 'ArrowDown') {
-      cursor = (cursor + 1) % flatItems.length;
-      ev.preventDefault();
-    } else if (ev.key === 'ArrowUp') {
-      cursor = (cursor - 1 + flatItems.length) % flatItems.length;
-      ev.preventDefault();
-    } else if (ev.key === 'Enter') {
-      if (flatItems[cursor]) {
-        onInvoke(flatItems[cursor].id);
-        onClose();
-      }
-      ev.preventDefault();
-    } else if (ev.key === 'Escape') {
-      onClose();
-      ev.preventDefault();
-    } else if (ev.key.length === 1) {
-      // type-ahead: jump to next item whose label starts with the pressed character
-      const q = ev.key.toLowerCase();
-      const start = (cursor + 1) % flatItems.length;
-      for (let i = 0; i < flatItems.length; i++) {
-        const idx = (start + i) % flatItems.length;
-        if (flatItems[idx].label.toLowerCase().startsWith(q)) {
-          cursor = idx;
-          break;
-        }
-      }
-    }
-  }
+  // Adapt ContextMenuModel.tiers → ActionPanel.sections. The MenuItem
+  // shape from contextMenuModel already carries id/label/shortcut/group;
+  // ActionPanel expects an `icon?` field — context menu items don't carry
+  // one today, so it stays undefined.
+  const sections: ActionPanelSection[] = $derived(
+    model.tiers.map((t) => ({
+      id: `tier:${t.tier}`,
+      items: t.items.map((i) => ({ ...i, icon: undefined })),
+    })),
+  );
 </script>
 
-<!-- svelte-ignore a11y_autofocus -->
-<div class="sh3-context-menu" role="menu" tabindex="0" onkeydown={onKeydown} autofocus>
-  {#each model.tiers as tier, tIdx (tier.tier)}
-    {#if tIdx > 0}<div class="sh3-ctx-sep" role="separator"></div>{/if}
-    {#each tier.items as item (item.id)}
-      {@const globalIdx = flatItems.indexOf(item)}
-      <button
-        class="sh3-ctx-item"
-        class:sh3-ctx-active={globalIdx === cursor}
-        role="menuitem"
-        onpointerenter={() => { cursor = globalIdx; }}
-        onclick={() => { onInvoke(item.id); onClose(); }}
-      >
-        <span class="sh3-ctx-label">{item.label}</span>
-        {#if item.shortcut}<span class="sh3-ctx-shortcut">{item.shortcut}</span>{/if}
-      </button>
-    {/each}
-  {/each}
-</div>
-
-<style>
-  .sh3-context-menu {
-    min-width: 200px;
-    background: var(--shell-bg-elevated, #222);
-    color: var(--shell-fg, #eee);
-    border-radius: 4px;
-    padding: 4px 0;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-    outline: none;
-  }
-  .sh3-ctx-item {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    width: 100%;
-    padding: 4px 10px;
-    background: none;
-    border: 0;
-    text-align: left;
-    color: inherit;
-    cursor: default;
-    font: inherit;
-  }
-  .sh3-ctx-active { background: var(--shell-accent, #6ea8fe); color: var(--shell-fg,#e4e6eb); }
-  .sh3-ctx-label { flex: 1; }
-  .sh3-ctx-shortcut { opacity: 0.6; font-size: 0.9em; }
-  .sh3-ctx-sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0; }
-</style>
+<ActionPanel {sections} {onInvoke} onDismiss={onClose} />