sh3-core 0.11.2 → 0.11.6

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,105 @@
+<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.).
+   */
+
+  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 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);
+        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;
+        if (flatItems[idx].label.toLowerCase().startsWith(q)) {
+          cursor = idx;
+          break;
+        }
+      }
+    }
+  }
+</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}
+        role="menuitem"
+        onpointerenter={() => { cursor = globalIdx; }}
+        onclick={() => { onInvoke(item.id); onDismiss(); }}
+      >
+        <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>

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,80 @@
+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 },
+                { id: 'paste', label: 'Paste', shortcut: 'Ctrl+V', group: 'edit', icon: undefined },
+            ],
+        },
+    ], 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 },
+                        { id: 'b', label: 'B', shortcut: null, group: '', icon: undefined },
+                    ],
+                }],
+        }));
+        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 }] },
+                { id: 'g2', items: [{ id: 'b', label: 'B', shortcut: null, group: 'g2', icon: undefined }] },
+            ],
+        }));
+        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();
+    });
+});

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} />

package/dist/actions/MenuBar.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /*
+   * MenuBar — top-bar row of menu containers. Renders one MenuButton per
+   * container in the active app's manifest.menus (or DEFAULT_MENU_CONTAINERS
+   * fallback). Skips containers whose resolved item list is empty.
+   * Renders nothing when no app is active.
+   */
+  import MenuButton from './MenuButton.svelte';
+  import { resolveMenuContainers, resolveMenuItems } from './menuBarModel';
+  import { getLiveDispatcherState } from './state.svelte';
+  import { listActions } from './registry';
+  import { getRegisteredApp } from '../apps/registry.svelte';
+
+  // Snapshot the live dispatcher state on each derive — `getLiveDispatcherState`
+  // reads from $state internals, so this re-derives whenever activeAppId, focus,
+  // bindings, or selection change. Mirrors the listeners.ts call pattern.
+  const state = $derived(getLiveDispatcherState());
+  const activeAppId = $derived(state.activeAppId);
+
+  const declaredMenus = $derived.by(() => {
+    if (!activeAppId) return undefined;
+    return getRegisteredApp(activeAppId)?.manifest.menus;
+  });
+
+  const containers = $derived(resolveMenuContainers(activeAppId, declaredMenus));
+
+  // Per-container item lists. Recomputes whenever actions or scope state
+  // change — same reactivity model as the palette/context menu.
+  const containerItems = $derived.by(() => {
+    const out: { container: typeof containers[number]; items: ReturnType<typeof resolveMenuItems> }[] = [];
+    const entries = listActions();
+    for (const c of containers) {
+      const items = resolveMenuItems(entries, state, c.id);
+      if (items.length > 0) out.push({ container: c, items });
+    }
+    return out;
+  });
+</script>
+
+<!--
+  Always render the wrapper so it reliably occupies its 1fr grid cell
+  in the shell tabbar (and pushes user chrome to the rightmost column).
+  Empty when no app is active or no container has visible items.
+-->
+<div class="sh3-menubar" role="menubar">
+  {#each containerItems as { container, items } (container.id)}
+    <MenuButton {container} {items} />
+  {/each}
+</div>
+
+<style>
+  .sh3-menubar {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+  }
+</style>

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

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

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

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