sh3-core 0.11.6 → 0.11.8

package/dist/actions/ActionPanel.svelte

@@ -14,6 +14,14 @@
    * 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 }: {
@@ -25,17 +33,28 @@
   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 = (cursor + 1) % flatItems.length;
+      cursor = nextEnabled(cursor, 1);
       ev.preventDefault();
     } else if (ev.key === 'ArrowUp') {
-      cursor = (cursor - 1 + flatItems.length) % flatItems.length;
+      cursor = nextEnabled(cursor, -1);
       ev.preventDefault();
     } else if (ev.key === 'Enter') {
-      if (flatItems[cursor]) {
-        onInvoke(flatItems[cursor].id);
-        onDismiss();
+      const item = flatItems[cursor];
+      if (item && !item.disabled) {
+        onInvoke(item.id);
+        if (!item.submenu) onDismiss();
       }
       ev.preventDefault();
     } else if (ev.key === 'Escape') {
@@ -46,13 +65,21 @@
       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)) {
+        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 -->
@@ -64,12 +91,19 @@
       <button
         class="sh3-ctx-item"
         class:sh3-ctx-active={globalIdx === cursor}
+        class:sh3-ctx-disabled={item.disabled}
         role="menuitem"
-        onpointerenter={() => { cursor = globalIdx; }}
-        onclick={() => { onInvoke(item.id); onDismiss(); }}
+        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.shortcut}<span class="sh3-ctx-shortcut">{item.shortcut}</span>{/if}
+        {#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}
@@ -77,7 +111,7 @@
 
 <style>
   .sh3-context-menu {
-    min-width: 200px;
+    min-width: 220px;
     background: var(--shell-bg-elevated, #222);
     color: var(--shell-fg, #eee);
     border-radius: 4px;
@@ -88,7 +122,7 @@
   .sh3-ctx-item {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 8px;
     width: 100%;
     padding: 4px 10px;
     background: none;
@@ -99,7 +133,11 @@
     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.test.js

@@ -16,8 +16,10 @@ 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 },
+                { 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));
@@ -33,8 +35,10 @@ describe('ActionPanel', () => {
             sections: [{
                     id: 'g',
                     items: [
-                        { id: 'a', label: 'A', shortcut: 'Ctrl+A', group: '', icon: undefined },
-                        { id: 'b', label: 'B', shortcut: null, group: '', icon: undefined },
+                        { 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 },
                     ],
                 }],
         }));
@@ -45,8 +49,10 @@ describe('ActionPanel', () => {
     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 }] },
+                { 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);
@@ -78,3 +84,85 @@ describe('ActionPanel', () => {
         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/MenuButton.svelte

@@ -4,12 +4,20 @@
    * containing an ActionPanel rendered with this container's items.
    * Items are passed in (the parent MenuBar resolves them via
    * menuBarModel.resolveMenuItems).
+   *
+   * Submenu drill: when an invoked row's action has `submenu: true`, the
+   * button mounts a sibling ActionPanel inside the same popup host (rather
+   * than dispatching). popupManager is non-stacking by design, so we
+   * intentionally do NOT call popupManager.show again — outside-click on
+   * the parent host still closes the entire stack at once.
    */
+  import { mount, unmount, type Component } from 'svelte';
   import { popupManager } from '../overlays/popup';
+  import type { PopupHandle } from '../overlays/types';
   import ActionPanel, { type ActionPanelSection } from './ActionPanel.svelte';
   import { listActions } from './registry';
-  import { getLiveDispatcherState } from './state.svelte';
-  import type { MenuBarItem } from './menuBarModel';
+  import { getLiveDispatcherState, type DispatcherState } from './state.svelte';
+  import { resolveSubmenuItems, type MenuBarItem } from './menuBarModel';
   import type { MenuContainer } from '../apps/types';
 
   let { container, items }: {
@@ -33,10 +41,55 @@
     return order.map((k) => ({ id: `group:${k || '_default'}`, items: buckets.get(k)! }));
   }
 
+  function dispatchLeaf(id: string, state: DispatcherState, handle: PopupHandle) {
+    const entry = listActions().find((e) => e.action.id === id);
+    if (!entry || typeof entry.action.run !== 'function') return;
+    try {
+      void entry.action.run({
+        action: { id, label: entry.action.label },
+        appId: state.activeAppId,
+        viewId: state.focusedViewId ?? undefined,
+        selection: state.selection ?? undefined,
+        invokedVia: 'palette',
+        dispatch: () => {},
+      });
+    } catch (err) {
+      console.error(`[sh3] menu-bar action "${id}" threw:`, err);
+    }
+    handle.close();
+  }
+
+  function openSubmenu(parentId: string, state: DispatcherState, handle: PopupHandle) {
+    const root = document.querySelector('.sh3-popup-host') as HTMLElement | null;
+    if (!root) return;
+    const sub = document.createElement('div');
+    sub.className = 'sh3-popup-submenu';
+    sub.style.position = 'absolute';
+    sub.style.pointerEvents = 'auto';
+    const activeRow = root.querySelector('.sh3-ctx-active') as HTMLElement | null;
+    const anchorRect = (activeRow ?? root).getBoundingClientRect();
+    sub.style.left = `${anchorRect.right + 2}px`;
+    sub.style.top = `${anchorRect.top}px`;
+    root.appendChild(sub);
+
+    const subItems = resolveSubmenuItems(listActions(), state, parentId);
+    const subCmp = mount(ActionPanel as unknown as Component<Record<string, unknown>>, {
+      target: sub,
+      props: {
+        sections: makeSections(subItems),
+        onInvoke: (cid: string) => dispatchLeaf(cid, state, handle),
+        onDismiss: () => {
+          unmount(subCmp);
+          sub.remove();
+        },
+      },
+    });
+  }
+
   function openPopup() {
     if (!buttonEl) return;
     const state = getLiveDispatcherState();
-    popupManager.show(
+    const handle = popupManager.show(
       ActionPanel,
       { anchor: buttonEl, placement: 'bottom-start' },
       {
@@ -44,18 +97,11 @@
         onInvoke: (id: string) => {
           const entry = listActions().find((e) => e.action.id === id);
           if (!entry) return;
-          try {
-            void entry.action.run({
-              action: { id, label: entry.action.label },
-              appId: state.activeAppId,
-              viewId: state.focusedViewId ?? undefined,
-              selection: state.selection ?? undefined,
-              invokedVia: 'palette',
-              dispatch: () => {},
-            });
-          } catch (err) {
-            console.error(`[sh3] menu-bar action "${id}" threw:`, err);
+          if (entry.action.submenu === true) {
+            openSubmenu(id, state, handle);
+            return;
           }
+          dispatchLeaf(id, state, handle);
         },
         onDismiss: () => popupManager.close(),
       },

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

@@ -1,9 +1,10 @@
-import type { MenuBarItem } from './menuBarModel';
+import { type Component } from 'svelte';
+import { type MenuBarItem } from './menuBarModel';
 import type { MenuContainer } from '../apps/types';
 type $$ComponentProps = {
     container: MenuContainer;
     items: MenuBarItem[];
 };
-declare const MenuButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const MenuButton: Component<$$ComponentProps, {}, "">;
 type MenuButton = ReturnType<typeof MenuButton>;
 export default MenuButton;

package/dist/actions/MenuButton.test.js

@@ -73,7 +73,8 @@ describe('MenuButton', () => {
             props: {
                 container: { id: 'file', label: 'File' },
                 items: [
-                    { id: 'open', label: 'Open', shortcut: 'Ctrl+O', group: '', icon: undefined },
+                    { id: 'open', label: 'Open', shortcut: 'Ctrl+O', group: '', icon: undefined,
+                        checked: false, disabled: false, submenu: false },
                 ],
             },
         });
@@ -86,3 +87,39 @@ describe('MenuButton', () => {
         expect(items[0].textContent).toContain('Open');
     });
 });
+describe('MenuButton — submenu drill', () => {
+    it('clicking a submenu-parent row opens a nested submenu listing children', async () => {
+        const { registerAction, __resetActionsRegistryForTest } = await import('./registry');
+        const { __resetContributionsForTest } = await import('../contributions/registry');
+        __resetContributionsForTest();
+        __resetActionsRegistryForTest();
+        registerAction({ id: 'p', label: 'Launch app', scope: 'home', menuItem: 'file', submenu: true }, 'shard.x');
+        registerAction({ id: 'p.a', label: 'guml', scope: 'home', submenuOf: 'p', run: () => { } }, 'shard.x');
+        registerAction({ id: 'p.b', label: 'svg', scope: 'home', submenuOf: 'p', run: () => { } }, 'shard.x');
+        cmp = mount(MenuButton, {
+            target: host,
+            props: {
+                container: { id: 'file', label: 'File' },
+                items: [
+                    { id: 'p', label: 'Launch app', shortcut: null, group: '', icon: undefined,
+                        checked: false, disabled: false, submenu: true },
+                ],
+            },
+        });
+        await tick();
+        host.querySelector('button').click();
+        await tick();
+        // Parent panel mounted.
+        expect(layerRoot.querySelectorAll('.sh3-context-menu')).toHaveLength(1);
+        // Click the parent row.
+        const parentRow = layerRoot.querySelector('[role="menuitem"]');
+        parentRow.click();
+        await tick();
+        // Now expect a second .sh3-context-menu — the submenu — and it lists children.
+        const panels = layerRoot.querySelectorAll('.sh3-context-menu');
+        expect(panels.length).toBe(2);
+        const submenuItems = [...panels[1].querySelectorAll('[role="menuitem"] .sh3-ctx-label')]
+            .map((n) => n.textContent);
+        expect(submenuItems).toEqual(['guml', 'svg']);
+    });
+});

package/dist/actions/contextMenuModel.d.ts

@@ -1,10 +1,15 @@
 import type { ActionEntry } from './registry';
 import { type DispatcherState, type TierName } from './dispatcher.svelte';
+import type { AtomicScope } from './types';
 export interface MenuItem {
     id: string;
     label: string;
     shortcut: string | null;
     group: string;
+    icon: string | undefined;
+    checked: boolean;
+    disabled: boolean;
+    submenu: boolean;
 }
 export interface MenuTier {
     tier: TierName;
@@ -13,4 +18,10 @@ export interface MenuTier {
 export interface ContextMenuModel {
     tiers: MenuTier[];
 }
-export declare function buildContextMenuModel(entries: ActionEntry[], state: DispatcherState): ContextMenuModel;
+export declare function buildContextMenuModel(entries: ActionEntry[], state: DispatcherState, anchor: AtomicScope): ContextMenuModel;
+/**
+ * Active children of a context-menu submenu parent. Single flat list,
+ * de-duplicated by id, in registration order. The same anchor filter that
+ * admitted the parent is applied to children.
+ */
+export declare function buildContextMenuSubmenu(entries: ActionEntry[], state: DispatcherState, parentId: string, anchor: AtomicScope): MenuItem[];

package/dist/actions/contextMenuModel.js

@@ -1,12 +1,42 @@
 /*
  * Pure model layer for the context menu: takes the action registry +
- * dispatcher state, returns a tiered, deduplicated, shortcut-annotated
- * item list the Svelte component renders without further logic.
+ * dispatcher state + an anchor scope, returns a tier-grouped, deduplicated,
+ * flag-annotated item list the Svelte component renders without further
+ * logic. Items pass iff their declared scope list contains the anchor;
+ * `app`/`home` anchors additionally require the existing owner-shard
+ * activation guard.
  */
-import { TIER_ORDER } from './dispatcher.svelte';
+import { TIER_ORDER, isScopeActive, } from './dispatcher.svelte';
 import { effectiveShortcut } from './bindings';
-import { scopeToTier, innermostActiveScope } from './scope-helpers';
-export function buildContextMenuModel(entries, state) {
+import { scopeToTier, innermostActiveScope, scopeEquals, normalizeScope, } from './scope-helpers';
+function evalFlag(v) {
+    if (v === undefined)
+        return false;
+    return typeof v === 'function' ? !!v() : !!v;
+}
+function toMenuItem(entry, state) {
+    var _a;
+    return {
+        id: entry.action.id,
+        label: entry.action.label,
+        shortcut: effectiveShortcut(entry.action, state.bindings, state.platform),
+        group: (_a = entry.action.group) !== null && _a !== void 0 ? _a : '',
+        icon: entry.action.icon,
+        checked: evalFlag(entry.action.checked),
+        disabled: evalFlag(entry.action.disabled),
+        submenu: entry.action.submenu === true,
+    };
+}
+function matchesAnchor(action, ownerShardId, anchor, state) {
+    const inList = normalizeScope(action.scope).some((s) => scopeEquals(s, anchor));
+    if (!inList)
+        return false;
+    if (anchor === 'app' || anchor === 'home') {
+        return isScopeActive(anchor, state, ownerShardId);
+    }
+    return true;
+}
+export function buildContextMenuModel(entries, state, anchor) {
     var _a;
     const byTier = {
         element: [], focus: [], view: [], app: [], home: [],
@@ -15,18 +45,17 @@ export function buildContextMenuModel(entries, state) {
     for (const entry of entries) {
         if (!entry.action.contextItem)
             continue;
+        if (entry.action.submenuOf !== undefined)
+            continue;
         if (seen.has(entry.action.id))
             continue;
-        const winning = innermostActiveScope(entry.action.scope, state, entry.ownerShardId);
-        if (!winning)
+        if (!matchesAnchor(entry.action, entry.ownerShardId, anchor, state))
             continue;
+        // Tier is determined by the anchor itself; the per-action winning scope
+        // is preserved purely for any future tier-aware rendering.
+        const winning = (_a = innermostActiveScope(entry.action.scope, state, entry.ownerShardId)) !== null && _a !== void 0 ? _a : anchor;
         seen.add(entry.action.id);
-        byTier[scopeToTier(winning)].push({
-            id: entry.action.id,
-            label: entry.action.label,
-            shortcut: effectiveShortcut(entry.action, state.bindings, state.platform),
-            group: (_a = entry.action.group) !== null && _a !== void 0 ? _a : '',
-        });
+        byTier[scopeToTier(winning)].push(toMenuItem(entry, state));
     }
     return {
         tiers: TIER_ORDER
@@ -34,3 +63,23 @@ export function buildContextMenuModel(entries, state) {
             .filter((t) => t.items.length > 0),
     };
 }
+/**
+ * Active children of a context-menu submenu parent. Single flat list,
+ * de-duplicated by id, in registration order. The same anchor filter that
+ * admitted the parent is applied to children.
+ */
+export function buildContextMenuSubmenu(entries, state, parentId, anchor) {
+    const out = [];
+    const seen = new Set();
+    for (const entry of entries) {
+        if (entry.action.submenuOf !== parentId)
+            continue;
+        if (seen.has(entry.action.id))
+            continue;
+        if (!matchesAnchor(entry.action, entry.ownerShardId, anchor, state))
+            continue;
+        seen.add(entry.action.id);
+        out.push(toMenuItem(entry, state));
+    }
+    return out;
+}

package/dist/actions/contextMenuModel.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { buildContextMenuModel } from './contextMenuModel';
+import { buildContextMenuModel, buildContextMenuSubmenu } from './contextMenuModel';
 const mkEntry = (a, owner = 'shard.x') => ({
     ownerShardId: owner,
     action: Object.assign({ id: 'a', label: 'A', scope: 'home', run: () => { } }, a),
@@ -9,36 +9,88 @@ describe('buildContextMenuModel', () => {
     it('returns only actions with contextItem: true', () => {
         const entries = [
             mkEntry({ id: 'a', scope: 'home', contextItem: true, label: 'A' }),
-            mkEntry({ id: 'b', scope: 'home', label: 'B' }), // no contextItem
+            mkEntry({ id: 'b', scope: 'home', label: 'B' }),
         ];
-        const model = buildContextMenuModel(entries, mkState());
+        const model = buildContextMenuModel(entries, mkState(), 'home');
         expect(model.tiers.flatMap((t) => t.items).map((i) => i.id)).toEqual(['a']);
     });
-    it('groups by scope tier in innermost-first order with separators', () => {
-        const state = mkState({
-            activeAppId: 'app.a',
-            activeAppRequiredShards: new Set(['shard.x']),
-            selection: { type: 'orb', ref: 1, ownerShardId: 'shard.x' },
-        });
+    it('admits only actions whose scope list contains the anchor', () => {
+        const state = mkState({ mountedViewIds: new Set(['editor']), focusedViewId: 'editor' });
+        const entries = [
+            mkEntry({ id: 'view-only', scope: 'focus:editor', contextItem: true, label: 'V' }),
+            mkEntry({ id: 'home-only', scope: 'home', contextItem: true, label: 'H' }),
+        ];
+        const model = buildContextMenuModel(entries, state, 'focus:editor');
+        expect(model.tiers.flatMap((t) => t.items).map((i) => i.id)).toEqual(['view-only']);
+    });
+    it('admits a multi-scope action when the anchor is one of its scopes', () => {
+        const state = mkState({ mountedViewIds: new Set(['editor']), focusedViewId: 'editor' });
+        const entries = [
+            mkEntry({ id: 'multi', scope: ['focus:editor', 'app'], contextItem: true, label: 'M' }),
+        ];
+        const model = buildContextMenuModel(entries, state, 'focus:editor');
+        expect(model.tiers.flatMap((t) => t.items).map((i) => i.id)).toEqual(['multi']);
+    });
+    it('matches element scopes by element-type equality', () => {
         const entries = [
-            mkEntry({ id: 'el', scope: { element: 'orb' }, contextItem: true, label: 'Dup' }),
-            mkEntry({ id: 'ap', scope: 'app', contextItem: true, label: 'Undo' }),
+            mkEntry({ id: 'cell', scope: { element: 'cell' }, contextItem: true, label: 'C' }),
+            mkEntry({ id: 'row', scope: { element: 'row' }, contextItem: true, label: 'R' }),
         ];
-        const model = buildContextMenuModel(entries, state);
-        expect(model.tiers.map((t) => t.tier)).toEqual(['element', 'app']);
-        expect(model.tiers[0].items[0].id).toBe('el');
+        const model = buildContextMenuModel(entries, mkState(), { element: 'cell' });
+        expect(model.tiers.flatMap((t) => t.items).map((i) => i.id)).toEqual(['cell']);
     });
-    it('de-duplicates multi-scope action to innermost tier', () => {
+    it('app anchor honors the owner-shard guard', () => {
         const state = mkState({
             activeAppId: 'app.a',
             activeAppRequiredShards: new Set(['shard.x']),
-            autostartShards: new Set(['shard.x']),
         });
         const entries = [
-            mkEntry({ id: 'p', scope: ['home', 'app'], contextItem: true, label: 'P' }),
+            mkEntry({ id: 'mine', scope: 'app', contextItem: true, label: 'M' }, 'shard.x'),
+            mkEntry({ id: 'foreign', scope: 'app', contextItem: true, label: 'F' }, 'shard.y'),
+        ];
+        const model = buildContextMenuModel(entries, state, 'app');
+        expect(model.tiers.flatMap((t) => t.items).map((i) => i.id)).toEqual(['mine']);
+    });
+    it('home anchor only admits actions when no app is active', () => {
+        const noApp = mkState();
+        const withApp = mkState({ activeAppId: 'app.a' });
+        const entries = [
+            mkEntry({ id: 'h', scope: 'home', contextItem: true, label: 'H' }),
+        ];
+        expect(buildContextMenuModel(entries, noApp, 'home').tiers).toHaveLength(1);
+        expect(buildContextMenuModel(entries, withApp, 'home').tiers).toHaveLength(0);
+    });
+    it('flags checked / disabled / submenu and excludes children', () => {
+        const entries = [
+            mkEntry({ id: 'p', label: 'P', scope: 'home', contextItem: true, submenu: true }),
+            mkEntry({ id: 'c', label: 'C', scope: 'home', contextItem: true, submenuOf: 'p' }),
+            mkEntry({ id: 't', label: 'T', scope: 'home', contextItem: true, checked: true }),
+            mkEntry({ id: 'd', label: 'D', scope: 'home', contextItem: true, disabled: () => true }),
+        ];
+        const model = buildContextMenuModel(entries, mkState(), 'home');
+        const homeItems = model.tiers.find((t) => t.tier === 'home').items;
+        expect(homeItems.map((i) => i.id)).toEqual(['p', 't', 'd']);
+        expect(homeItems[0].submenu).toBe(true);
+        expect(homeItems[1].checked).toBe(true);
+        expect(homeItems[2].disabled).toBe(true);
+    });
+    it('returns an empty model when no action matches the anchor', () => {
+        const entries = [
+            mkEntry({ id: 'x', scope: 'home', contextItem: true, label: 'X' }),
+        ];
+        const model = buildContextMenuModel(entries, mkState(), 'focus:nope');
+        expect(model.tiers).toEqual([]);
+    });
+});
+describe('buildContextMenuSubmenu', () => {
+    it('returns children of the parent that match the anchor', () => {
+        const entries = [
+            mkEntry({ id: 'p', label: 'P', scope: 'home', contextItem: true, submenu: true }),
+            mkEntry({ id: 'p.a', label: 'A', scope: 'home', submenuOf: 'p' }),
+            mkEntry({ id: 'p.b', label: 'B', scope: 'home', submenuOf: 'p' }),
+            mkEntry({ id: 'p.c', label: 'C', scope: 'app', submenuOf: 'p' }),
         ];
-        const model = buildContextMenuModel(entries, state);
-        expect(model.tiers).toHaveLength(1);
-        expect(model.tiers[0].tier).toBe('app');
+        const items = buildContextMenuSubmenu(entries, mkState(), 'p', 'home');
+        expect(items.map((i) => i.id)).toEqual(['p.a', 'p.b']);
     });
 });