sh3-core 0.17.0 → 0.17.2

package/dist/Sh3.svelte

@@ -26,6 +26,9 @@
   import { startServerSideStream } from './keys/revocation-bus.svelte';
   import BrandSlot from './BrandSlot.svelte';
   import MenuBar from './actions/MenuBar.svelte';
+  import CompactChrome from './chrome/CompactChrome.svelte';
+  import CompactRenderer from './layout/compact/CompactRenderer.svelte';
+  import { sh3 } from './sh3Runtime.svelte';
 
   const authenticated = $derived(isAuthenticated());
   const user = $derived(getUser());
@@ -34,6 +37,8 @@
   // getActiveApp() here: returnToHome() keeps the app warm (activeApp.id
   // stays set) and only flips the layout store's activeRoot back to 'home'.
   const onHome = $derived(getActiveRoot() === 'home');
+  // Reactive viewport class — drives the compact-vs-desktop chrome/body fork.
+  const viewportClass = $derived(sh3.viewport.current.class);
 
   // Keep the actions dispatcher's `mountedViewIds` set in sync with the
   // live layout tree, so `view:<viewId>` scope checks (context menu,
@@ -60,45 +65,53 @@
   });
 </script>
 
-<div class="sh3">
-  <header class="sh3-tabbar" data-sh3-region="tabbar">
-    <button
-      type="button"
-      class="sh3-tabbar-home-button"
-      onclick={() => returnToHome()}
-      disabled={onHome}
-      title="Home"
-    >
-      <svg class="sh3-tabbar-home-icon" aria-hidden="true">
-        <use href="{iconsUrl}#house" />
-      </svg>
-    </button>
-    <BrandSlot />
-    <MenuBar />
-    {#if authenticated && user}
-      <div class="sh3-tabbar-user">
-        <span class="sh3-tabbar-user-name">{user.displayName}</span>
-        <span class="sh3-tabbar-tag">{elevated ? 'admin' : 'user'}</span>
-        {#if !isLocalOwner()}
-          <button
-            type="button"
-            class="sh3-tabbar-signout"
-            onclick={() => logout()}
-            title="Sign out"
-          >
-            <svg class="sh3-tabbar-signout-icon" aria-hidden="true">
-              <use href="{iconsUrl}#log-out" />
-            </svg>
-          </button>
-        {/if}
-      </div>
-    {/if}
-  </header>
+<div class="sh3" data-sh3-viewport={viewportClass}>
+  {#if viewportClass === 'desktop'}
+    <header class="sh3-tabbar" data-sh3-region="tabbar">
+      <button
+        type="button"
+        class="sh3-tabbar-home-button"
+        onclick={() => returnToHome()}
+        disabled={onHome}
+        title="Home"
+      >
+        <svg class="sh3-tabbar-home-icon" aria-hidden="true">
+          <use href="{iconsUrl}#house" />
+        </svg>
+      </button>
+      <BrandSlot />
+      <MenuBar />
+      {#if authenticated && user}
+        <div class="sh3-tabbar-user">
+          <span class="sh3-tabbar-user-name">{user.displayName}</span>
+          <span class="sh3-tabbar-tag">{elevated ? 'admin' : 'user'}</span>
+          {#if !isLocalOwner()}
+            <button
+              type="button"
+              class="sh3-tabbar-signout"
+              onclick={() => logout()}
+              title="Sign out"
+            >
+              <svg class="sh3-tabbar-signout-icon" aria-hidden="true">
+                <use href="{iconsUrl}#log-out" />
+              </svg>
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </header>
+  {:else}
+    <CompactChrome />
+  {/if}
 
   <GuestBanner />
 
   <main class="sh3-content" data-sh3-region="content" data-sh3-layer="0">
-    <LayoutRenderer />
+    {#if viewportClass === 'desktop'}
+      <LayoutRenderer />
+    {:else}
+      <CompactRenderer />
+    {/if}
   </main>
 
   <footer class="sh3-statusbar" data-sh3-region="statusbar">

package/dist/actions/listActionsFromEntries.test.js

@@ -75,4 +75,33 @@ describe('listActionsFromEntries', () => {
         expect(out).toHaveLength(1);
         expect(out[0].ownerShardId).toBe('shard.a');
     });
+    it('passes through submenu=true on a parent descriptor', () => {
+        const entries = [{
+                ownerShardId: 'shard.x',
+                action: { id: 'p', label: 'P', scope: 'home', submenu: true },
+            }];
+        const out = listActionsFromEntries(entries, mkState());
+        expect(out[0].submenu).toBe(true);
+        expect(out[0].submenuOf).toBeUndefined();
+    });
+    it('passes through submenuOf on a child descriptor', () => {
+        const entries = [
+            {
+                ownerShardId: 'shard.x',
+                action: {
+                    id: 'p:dark', label: 'Dark', scope: 'home',
+                    submenuOf: 'p', run: () => { },
+                },
+            },
+        ];
+        const out = listActionsFromEntries(entries, mkState());
+        expect(out[0].submenuOf).toBe('p');
+        expect(out[0].submenu).toBeUndefined();
+    });
+    it('omits submenu and submenuOf on plain actions', () => {
+        const entries = [mkEntry({ id: 'plain', scope: 'home' })];
+        const out = listActionsFromEntries(entries, mkState());
+        expect(out[0].submenu).toBeUndefined();
+        expect(out[0].submenuOf).toBeUndefined();
+    });
 });

package/dist/actions/listActive.js

@@ -50,6 +50,8 @@ export function listActionsFromEntries(entries, state) {
             ownerShardId: entry.ownerShardId,
             paletteItem: entry.action.paletteItem !== false,
             contextItem: entry.action.contextItem !== false,
+            submenu: entry.action.submenu,
+            submenuOf: entry.action.submenuOf,
             active,
         };
         if (active) {

package/dist/actions/listeners.js

@@ -94,6 +94,10 @@ export function dispatchActionProgrammatic(actionId, _opts) {
     const state = getLiveDispatcherState();
     const desc = listActionsFromEntries(entries, state).find((d) => d.id === actionId);
     if (!desc || !desc.active) {
+        if (entry.action.submenu === true &&
+            typeof entry.action.run !== 'function') {
+            return Promise.reject(new Error(`action "${actionId}" is a submenu parent — list children with listActions({ submenuOf: "${actionId}" })`));
+        }
         return Promise.reject(new Error(`action "${actionId}" is not active in current scope`));
     }
     // run is guaranteed non-null by `desc.active === true`.

package/dist/actions/programmatic-dispatch.svelte.test.js

@@ -34,11 +34,18 @@ describe('dispatchActionProgrammatic', () => {
         await expect(dispatchActionProgrammatic('d')).rejects.toThrow(/action "d" is not active/);
         expect(run).not.toHaveBeenCalled();
     });
-    it('rejects on a submenu parent without run', async () => {
+    it('rejects on a submenu parent with the parent-specific message', async () => {
         registerAction({
             id: 's', label: 'S', scope: 'home', submenu: true,
         }, 'shard.x');
-        await expect(dispatchActionProgrammatic('s')).rejects.toThrow(/action "s" is not active/);
+        await expect(dispatchActionProgrammatic('s')).rejects.toThrow(/action "s" is a submenu parent — list children with listActions\(\{ submenuOf: "s" \}\)/);
+    });
+    it('still uses the generic inactive message for non-submenu inactive actions', async () => {
+        registerAction({
+            id: 'gated2', label: 'G', scope: 'app', run: () => { },
+        }, 'shard.x');
+        // No active app -> 'app' scope is inactive.
+        await expect(dispatchActionProgrammatic('gated2')).rejects.toThrow(/action "gated2" is not active/);
     });
     it('invokes run with invokedVia="programmatic" on happy path', async () => {
         let captured = null;

package/dist/actions/types.d.ts

@@ -148,6 +148,10 @@ export interface ActiveActionDescriptor {
     ownerShardId: string;
     paletteItem: boolean;
     contextItem: boolean;
+    /** True when this action is a submenu parent (children opened by drill). */
+    submenu?: true;
+    /** Parent action id when this action is a submenu child. */
+    submenuOf?: string;
 }
 /**
  * Read-only snapshot describing one action in the registry. Produced by
@@ -183,6 +187,10 @@ export interface ActionDescriptor {
     ownerShardId: string;
     paletteItem: boolean;
     contextItem: boolean;
+    /** True when this action is a submenu parent (children opened by drill). */
+    submenu?: true;
+    /** Parent action id when this action is a submenu child. */
+    submenuOf?: string;
     /** True when `runAction(id)` would dispatch right now. */
     active: boolean;
 }

package/dist/api.d.ts

@@ -1,5 +1,8 @@
 export { sh3 } from './sh3Runtime.svelte';
-export type { Sh3 } from './sh3Runtime.svelte';
+export type { Sh3, Sh3Drawers, Sh3Viewport } from './sh3Runtime.svelte';
+export type { ViewportClass, ViewportInfo } from './viewport/types';
+export type { SlotRole } from './layout/types';
+export type { DrawerAnchor, DrawerSpec, DrawerState, DrawerStateMap, CompactRendering, } from './layout/compact/types';
 export type { Shard, ShardManifest, SourceShard, SourceShardManifest, ShardContext, ViewDeclaration, ViewFactory, ViewHandle, MountContext, } from './shards/types';
 export type { LayoutNode, SplitNode, TabsNode, SlotNode, TabEntry, SplitDirection, SizeMode, LayoutTree, FloatEntry, LayoutPreset, CanonicalPreset, TreeRootRef as SlotLocation, } from './layout/types';
 export type { ActionDescriptor, ActiveActionDescriptor, BindingSource, AtomicScope, ActionScope, } from './actions/types';

package/dist/chrome/CompactChrome.svelte

@@ -0,0 +1,96 @@
+<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 } from '../layout/store.svelte';
+  import { derive } from '../layout/compact/derive';
+  import { getLiveDispatcherState } from '../actions/state.svelte';
+  import { getRegisteredApp } from '../apps/registry.svelte';
+  import MenuSheet from './MenuSheet.svelte';
+  import type { DrawerAnchor } from '../layout/compact/types';
+
+  const rendering = $derived(derive(layoutStore.root));
+  const dispatcher = $derived(getLiveDispatcherState());
+  const title = $derived.by(() => {
+    const id = dispatcher.activeAppId;
+    if (!id) return 'SH3';
+    return getRegisteredApp(id)?.manifest.label ?? id;
+  });
+
+  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">
+    {#if rendering.drawers.left}
+      <button onclick={() => toggleDrawer('left')} aria-label="Toggle left drawer" data-sh3-anchor="left">≡</button>
+    {/if}
+    {#if rendering.drawers.right}
+      <button onclick={() => toggleDrawer('right')} aria-label="Toggle right drawer" data-sh3-anchor="right">▣</button>
+    {/if}
+    {#if rendering.drawers.top}
+      <button onclick={() => toggleDrawer('top')} aria-label="Toggle top drawer" data-sh3-anchor="top">⫶</button>
+    {/if}
+  </div>
+  <div class="title">{title}</div>
+  <div class="trailing">
+    <button onclick={openPalette} aria-label="Open command palette">⌘</button>
+    <button onclick={() => (menuOpen = true)} aria-label="Open menu">⋯</button>
+  </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;
+    gap: var(--sh3-pad-xs);
+  }
+  button {
+    width: 40px;
+    height: 40px;
+    font-size: var(--sh3-font-lg);
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--sh3-radius-sm);
+    color: var(--sh3-fg);
+  }
+  button:active {
+    background: var(--sh3-bg-sunken);
+  }
+  .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,67 @@
+/*
+ * 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, } from '../layout/store.svelte';
+import { drawerStore } from '../layout/compact/drawerStore.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();
+});
+beforeEach(() => {
+    __resetLayoutStoreForTest();
+    drawerStore.__reset();
+});
+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();
+        const leading = host.querySelectorAll('.leading button');
+        expect(leading.length).toBe(2);
+        expect(host.querySelector('.leading button[data-sh3-anchor="left"]')).not.toBeNull();
+        expect(host.querySelector('.leading button[data-sh3-anchor="right"]')).not.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);
+    });
+});

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;

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

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