sh3-core 0.16.1 → 0.17.2

package/dist/Sh3.svelte

@@ -15,11 +15,7 @@
   import './tokens.css';
   import './primitives/base.css';
   import LayoutRenderer from './layout/LayoutRenderer.svelte';
-  import DragPreview from './layout/DragPreview.svelte';
-  import FloatLayer from './overlays/FloatLayer.svelte';
-  import type { OverlayLayer } from './overlays/types';
-  import { registerLayerRoot, unregisterLayerRoot } from './overlays/roots';
-  import { bindFloatStore, unbindFloatStore } from './overlays/float';
+  import OverlayRoots from './overlays/OverlayRoots.svelte';
   import { returnToHome, isAdmin } from './api';
   import { getActiveRoot, layoutStore } from './layout/store.svelte';
   import { syncMountedViewIdsFromLayout } from './actions/state.svelte';
@@ -30,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());
@@ -38,41 +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');
-
-  // Layer metadata — order matches the stack in docs/design/layout.md.
-  // Index 0 here is layer 1 (floating panels); layer 0 is the content area.
-  const overlayLayers: { layer: number; name: OverlayLayer }[] = [
-    { layer: 1, name: 'floating'     },
-    { layer: 2, name: 'drag-preview' },
-    { layer: 3, name: 'popup'        },
-    { layer: 4, name: 'modal'        },
-    { layer: 5, name: 'toast'        },
-    { layer: 6, name: 'command'      },
-  ];
-
-  // Populated by bind:this during render; registered with the overlay
-  // module via $effect after mount so layer managers (sh3.modal,
-  // sh3.popup, sh3.toast) can find their target DOM roots.
-  const overlayRoots: Partial<Record<OverlayLayer, HTMLDivElement>> = $state({});
-
-  $effect(() => {
-    for (const { name } of overlayLayers) {
-      const el = overlayRoots[name];
-      if (el) registerLayerRoot(name, el);
-    }
-    return () => {
-      for (const { name } of overlayLayers) unregisterLayerRoot(name);
-    };
-  });
-
-  $effect(() => {
-    const tree = layoutStore.tree;
-    bindFloatStore(tree.floats, () => ({
-      w: window.innerWidth,
-      h: window.innerHeight,
-    }));
-    return () => unbindFloatStore();
-  });
+  // 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,
@@ -99,73 +65,60 @@
   });
 </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">
     <!-- alpha tag moved to Sh3Home title row -->
   </footer>
 
-  <!--
-    Overlay roots. Each is absolutely positioned over the entire sh3 with
-    pointer-events: none by default; layer managers enable pointer events on
-    the specific surfaces they portal in.
-  -->
-  <div class="sh3-overlays" aria-hidden="true">
-    {#each overlayLayers as { layer, name } (layer)}
-      <div
-        class="sh3-overlay-root"
-        data-sh3-overlay={name}
-        data-sh3-layer={layer}
-        style="z-index: var(--sh3-z-layer-{layer});"
-        bind:this={overlayRoots[name]}
-      >
-        {#if name === 'floating'}
-          <FloatLayer />
-        {:else if name === 'drag-preview'}
-          <DragPreview />
-        {/if}
-      </div>
-    {/each}
-  </div>
+  <OverlayRoots />
 
   <!--
     Sh3-owned consent dialog for ctx.keys.mint().
@@ -217,17 +170,6 @@
     user-select: none;
   }
 
-  .sh3-overlays {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-  .sh3-overlay-root {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-
   .sh3-tabbar-home-button {
     display: flex;
     align-items: center;

package/dist/actions/ctx-actions.svelte.test.js

@@ -35,7 +35,7 @@ describe('ShardContext.listActions / runAction (integration)', () => {
         });
         await activateShard('producer');
         await activateShard('consumer');
-        const list = consumerCtx.listActions();
+        const list = consumerCtx.sh3.listActions();
         const ids = list.map((d) => d.id);
         expect(ids).toContain('producer.do');
         const desc = list.find((d) => d.id === 'producer.do');
@@ -62,7 +62,7 @@ describe('ShardContext.listActions / runAction (integration)', () => {
         });
         await activateShard('producer');
         await activateShard('consumer');
-        const snapshot = consumerCtx.listActions({ activeOnly: true });
+        const snapshot = consumerCtx.sh3.listActions({ activeOnly: true });
         const ids = snapshot.map((d) => d.id);
         expect(ids).toContain('home.go');
         expect(ids).not.toContain('app.go');
@@ -87,7 +87,7 @@ describe('ShardContext.listActions / runAction (integration)', () => {
         });
         await activateShard('producer');
         await activateShard('consumer');
-        await consumerCtx.runAction('producer.go');
+        await consumerCtx.sh3.runAction('producer.go');
         expect(invokedVia).toBe('programmatic');
     });
     it('runAction rejects when the target action is inactive', async () => {
@@ -106,6 +106,6 @@ describe('ShardContext.listActions / runAction (integration)', () => {
         });
         await activateShard('producer');
         await activateShard('consumer');
-        await expect(consumerCtx.runAction('gated.go')).rejects.toThrow(/not active/);
+        await expect(consumerCtx.sh3.runAction('gated.go')).rejects.toThrow(/not active/);
     });
 });

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';
@@ -80,3 +83,5 @@ export { default as Select } from './primitives/widgets/Select.svelte';
 export type { SelectOption } from './primitives/widgets/Select';
 export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
 export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';
+export type { FieldKind, FieldAddress, FieldView, ControllableFieldDescriptor, ImperativeFieldDescriptor, ElementRefFieldDescriptor, ReadonlyFieldDescriptor, FieldsApi, DecorationHandle, } from './fields/types';
+export { fieldAddressToString, fieldAddressFromString } from './fields/address';

package/dist/api.js

@@ -97,3 +97,4 @@ export { default as FilePicker } from './primitives/widgets/FilePicker.svelte';
 export { default as Select } from './primitives/widgets/Select.svelte';
 export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
 export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';
+export { fieldAddressToString, fieldAddressFromString } from './fields/address';

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);
+    });
+});