sh3-core 0.16.0 → 0.17.0

package/dist/overlays/OverlayRoots.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  /*
+   * OverlayRoots — the six overlay-layer roots and the float-store binding,
+   * extracted so both the main shell (`Sh3.svelte`) and satellite shell
+   * (`SatelliteShell.svelte`) can mount them.
+   *
+   * Without this, satellite views can't open modals/popups/floats: layer
+   * managers call `getLayerRoot('modal')` and throw because no root was
+   * registered. Same situation for the float store binding the
+   * `FloatLayer` reads to render detached frames.
+   *
+   * Each layer is an absolutely-positioned full-window div with
+   * pointer-events: none; managers enable pointer events on the surfaces
+   * they portal in.
+   */
+
+  import DragPreview from '../layout/DragPreview.svelte';
+  import FloatLayer from './FloatLayer.svelte';
+  import { registerLayerRoot, unregisterLayerRoot } from './roots';
+  import { bindFloatStore, unbindFloatStore } from './float';
+  import { layoutStore } from '../layout/store.svelte';
+  import type { OverlayLayer } from './types';
+
+  // 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'      },
+  ];
+
+  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();
+  });
+</script>
+
+<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>
+
+<style>
+  .sh3-overlays {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .sh3-overlay-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+</style>

package/dist/overlays/OverlayRoots.svelte.d.ts

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

package/dist/platform/tauri-backend.d.ts

@@ -7,9 +7,9 @@ export declare class TauriStoreBackend implements Backend {
     delete(shardId: string): void;
     list(): string[];
     /**
-     * Load the store from disk into the local cache. Must be called once
-     * before read/list return meaningful data. Called by the platform
-     * resolver at boot.
+     * Load the store from disk into the local cache and start mirroring
+     * cross-window writes. Must be called once before read/list return
+     * meaningful data. Called by the platform resolver at boot.
      */
     init(): Promise<void>;
 }

package/dist/platform/tauri-backend.js

@@ -8,6 +8,15 @@
  * init(), then serve reads/lists synchronously from that cache —
  * matching the Backend interface contract. Writes go to both the
  * local cache and the Tauri store (fire-and-forget async).
+ *
+ * Multi-window coherence: each Tauri WebviewWindow runs its own JS
+ * context, so each gets its own TauriStoreBackend instance with an
+ * independent #cache. Without coordination, a satellite window booted
+ * from the host would never see writes made in the host (or vice
+ * versa). init() subscribes to plugin-store's onChange event so any
+ * cross-window write is mirrored into the local cache. The same event
+ * fires for this window's own writes too, but the cache.set there is
+ * idempotent.
  */
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
@@ -44,15 +53,27 @@ export class TauriStoreBackend {
         return [...__classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").keys()];
     }
     /**
-     * Load the store from disk into the local cache. Must be called once
-     * before read/list return meaningful data. Called by the platform
-     * resolver at boot.
+     * Load the store from disk into the local cache and start mirroring
+     * cross-window writes. Must be called once before read/list return
+     * meaningful data. Called by the platform resolver at boot.
      */
     async init() {
         const entries = await __classPrivateFieldGet(this, _TauriStoreBackend_store, "f").entries();
         for (const [key, value] of entries) {
             __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").set(key, value);
         }
+        // Mirror writes from other WebviewWindows (and our own) into the
+        // local cache so reads stay coherent across the host + satellites.
+        // The unlisten fn is intentionally not retained — the backend lives
+        // for the page session and the subscription tears down with it.
+        await __classPrivateFieldGet(this, _TauriStoreBackend_store, "f").onChange((key, value) => {
+            if (value === undefined) {
+                __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").delete(key);
+            }
+            else {
+                __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").set(key, value);
+            }
+        });
     }
 }
 _TauriStoreBackend_store = new WeakMap(), _TauriStoreBackend_cache = new WeakMap();

package/dist/projects/session-state.svelte.d.ts

@@ -10,8 +10,8 @@ export declare const sessionState: {
  *
  * Setting the same value is a no-op (no app unload, no breadcrumb clear).
  *
- * The unloadApp call is deferred to a dynamic import so this module stays
- * importable from circular-dependency hot-paths (lifecycle imports
- * sessionState; sessionState here would otherwise import lifecycle eagerly).
+ * Note: lifecycle ↔ session-state is a circular import. Safe because both
+ * sides only read the imported binding inside function bodies, after module
+ * init completes.
  */
 export declare function setActiveProjectId(id: string | null): void;

package/dist/projects/session-state.svelte.js

@@ -11,6 +11,7 @@
  * active app (whose scopeId is bound to the old scope).
  */
 import { activeApp, breadcrumbApp } from '../apps/registry.svelte';
+import { unloadApp } from '../apps/lifecycle';
 export const sessionState = $state({
     activeProjectId: null,
 });
@@ -23,9 +24,9 @@ export const sessionState = $state({
  *
  * Setting the same value is a no-op (no app unload, no breadcrumb clear).
  *
- * The unloadApp call is deferred to a dynamic import so this module stays
- * importable from circular-dependency hot-paths (lifecycle imports
- * sessionState; sessionState here would otherwise import lifecycle eagerly).
+ * Note: lifecycle ↔ session-state is a circular import. Safe because both
+ * sides only read the imported binding inside function bodies, after module
+ * init completes.
  */
 export function setActiveProjectId(id) {
     if (sessionState.activeProjectId === id)
@@ -34,6 +35,6 @@ export function setActiveProjectId(id) {
     sessionState.activeProjectId = id;
     breadcrumbApp.id = null;
     if (previousActive) {
-        void import('../apps/lifecycle').then((m) => m.unloadApp(previousActive));
+        unloadApp(previousActive);
     }
 }

package/dist/runtime/runVerb.js

@@ -17,7 +17,7 @@
  */
 import { activeShards } from '../shards/activate.svelte';
 import { getVerb, listVerbsWithShard } from '../shards/registry';
-import { makeSh3ApiHeadless } from '../sh3Api/headless';
+import { makeSh3Api } from '../sh3Api/headless';
 import { Scrollback } from '../shell-shard/scrollback.svelte';
 import { SessionClient } from '../shell-shard/session-client.svelte';
 import { TenantFsClient } from '../shell-shard/tenant-fs-client';
@@ -53,7 +53,7 @@ export async function runVerbProgrammatic(shardId, name, args, opts) {
 async function buildProgrammaticContext(b) {
     var _a, _b;
     const ctx = {
-        sh3: makeSh3ApiHeadless(),
+        sh3: makeSh3Api({ callerKind: 'verb' }),
         scrollback: b.sinkScrollback,
         session: makeStubSession(),
         cwd: '/',

package/dist/satellite/SatelliteShell.svelte

@@ -3,22 +3,23 @@
    * SatelliteShell — top-level root component mounted by createShell() when
    * detectSatelliteMode() returns a payload.
    *
-   * Renders only LayoutRenderer against the seeded in-memory layout. No brand
-   * bar, no home button, no overlay chrome. The workspace zone backend has
-   * already been forced to MemoryBackend by createShell() before this mounts.
-   *
-   * Float payloads: seeds HOME_TREE's docked node directly via
-   *   seedSatelliteLayout(), so LayoutRenderer immediately shows the detached
+   * Float payloads: chromeless. Seeds HOME_TREE's docked node directly via
+   *   seedSatelliteLayout() so LayoutRenderer immediately shows the detached
    *   float content.
    *
-   * App payloads: kicks off launchApp(appId, { skipLastApp, skipSwitchToHome })
-   *   which handles the full attach/switchToApp lifecycle. The seed call is
-   *   skipped because launchApp replaces the active root to 'app' on its own.
+   * App payloads: renders a slim tabbar (BrandSlot + MenuBar + reserved
+   *   minimized-floats slot) above LayoutRenderer, then kicks off
+   *   launchApp(appId, { skipLastApp, skipSwitchToHome }) which handles the
+   *   full attach + required-shard activation lifecycle. Home button is
+   *   intentionally omitted — the OS window close is the satellite's "home".
    */
 
   import '../tokens.css';
   import '../primitives/base.css';
   import LayoutRenderer from '../layout/LayoutRenderer.svelte';
+  import OverlayRoots from '../overlays/OverlayRoots.svelte';
+  import BrandSlot from '../BrandSlot.svelte';
+  import MenuBar from '../actions/MenuBar.svelte';
   import { seedSatelliteLayout } from '../layout/store.svelte';
   import { seedLayoutFromPayload } from './seed';
   import { launchApp } from '../apps/lifecycle';
@@ -45,8 +46,20 @@
   });
 </script>
 
-<div class="sh3-satellite-root">
-  <LayoutRenderer />
+<div class="sh3-satellite-root" class:sh3-satellite-app={payload.kind === 'app'}>
+  {#if payload.kind === 'app'}
+    <header class="sh3-satellite-tabbar" data-sh3-region="tabbar">
+      <BrandSlot />
+      <MenuBar />
+      <div class="sh3-satellite-floats-slot" aria-hidden="true"></div>
+    </header>
+    <main class="sh3-satellite-content" data-sh3-region="content" data-sh3-layer="0">
+      <LayoutRenderer />
+    </main>
+  {:else}
+    <LayoutRenderer />
+  {/if}
+  <OverlayRoots />
 </div>
 
 <style>
@@ -57,4 +70,38 @@
     background: var(--sh3-grad-bg, var(--sh3-bg));
     color: var(--sh3-fg);
   }
+
+  /*
+   * App-payload satellites get a slim chrome row above the content. Float
+   * payloads keep the original full-bleed layout (no grid, content fills
+   * the root), so the .sh3-satellite-app modifier is required for the grid.
+   */
+  .sh3-satellite-root.sh3-satellite-app {
+    display: grid;
+    grid-template-rows: var(--sh3-tabbar-height) 1fr;
+  }
+
+  .sh3-satellite-tabbar {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--sh3-pad-md);
+    padding: 0 var(--sh3-pad-md);
+    background: var(--sh3-grad-bg-elevated, var(--sh3-bg-elevated));
+    border-bottom: 1px solid var(--sh3-border);
+    user-select: none;
+  }
+
+  .sh3-satellite-content {
+    position: relative;
+    overflow: hidden;
+    background: var(--sh3-grad-bg, var(--sh3-bg));
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .sh3-satellite-floats-slot {
+    /* Reserved cell for future minimized-float chips; empty for now. */
+    min-width: 0;
+  }
 </style>

package/dist/satellite/SatelliteShell.svelte.test.d.ts

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

package/dist/satellite/SatelliteShell.svelte.test.js

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { tick } from 'svelte';
+import SatelliteShell from './SatelliteShell.svelte';
+import { resetFramework } from '../__test__/reset';
+import { renderWithShell } from '../__test__/render';
+import { makeApp, makeAppManifest, makeSlotNode, makeTree, } from '../__test__/fixtures';
+import { registerApp } from '../apps/registry.svelte';
+import { registerView } from '../shards/registry';
+function registerStubView() {
+    registerView('test:view', {
+        mount(container, ctx) {
+            const node = document.createElement('div');
+            node.dataset.viewFor = ctx.slotId;
+            container.appendChild(node);
+            return { unmount: () => node.remove() };
+        },
+    });
+}
+describe('SatelliteShell — chrome rendering', () => {
+    beforeEach(resetFramework);
+    it('renders BrandSlot + MenuBar + reserved floats slot for app payloads', async () => {
+        registerStubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({
+                id: 'sat-app',
+                label: 'Sat App',
+            }),
+            initialLayout: [
+                { name: 'default', tree: makeTree(makeSlotNode('s', 'test:view')) },
+            ],
+        }));
+        const payload = {
+            kind: 'app',
+            appId: 'sat-app',
+            activateShards: [],
+        };
+        const { container } = renderWithShell(SatelliteShell, { payload });
+        // launchApp runs in queueMicrotask inside the $effect; flush both.
+        await Promise.resolve();
+        await tick();
+        await tick();
+        expect(container.querySelector('[data-sh3-region="tabbar"]')).toBeTruthy();
+        expect(container.querySelector('.sh3-brand-slot')).toBeTruthy();
+        expect(container.querySelector('[role="menubar"]')).toBeTruthy();
+        expect(container.querySelector('.sh3-satellite-floats-slot')).toBeTruthy();
+    });
+    it('renders no tabbar / chrome for float payloads', async () => {
+        const payload = {
+            kind: 'float',
+            content: makeSlotNode('s', 'test:view'),
+            size: { w: 800, h: 600 },
+            activateShards: [],
+        };
+        const { container } = renderWithShell(SatelliteShell, { payload });
+        await tick();
+        expect(container.querySelector('[data-sh3-region="tabbar"]')).toBeFalsy();
+        expect(container.querySelector('.sh3-brand-slot')).toBeFalsy();
+        expect(container.querySelector('[role="menubar"]')).toBeFalsy();
+        expect(container.querySelector('.sh3-satellite-floats-slot')).toBeFalsy();
+    });
+});

package/dist/sh3Api/fields-walker.svelte.test.d.ts

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

package/dist/sh3Api/fields-walker.svelte.test.js

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { makeSh3Api } from './headless';
+import { acquireSlotHost, resetSlotHostPool, } from '../layout/slotHostPool.svelte';
+import { __resetContributionsForTest } from '../contributions/registry';
+/*
+ * Walker dispatch through the Sh3Api facade.
+ *
+ * Locks in that ctx.sh3.fields.get/set work with walker-produced addresses
+ * (shardId === 'sh3.walker'). The walker synthesizes FieldViews on every
+ * call — facade re-walks the slot's container to resolve the target element,
+ * then routes through the same writeElement helper as element-ref descriptors.
+ */
+describe('Sh3Api fields walker dispatch', () => {
+    beforeEach(() => {
+        __resetContributionsForTest();
+        resetSlotHostPool();
+        document.body.innerHTML = '';
+    });
+    it('set on a walker addr writes the underlying input and dispatches input+change', async () => {
+        const slotId = 'sw1';
+        const host = acquireSlotHost(slotId, 'view', 'lbl');
+        document.body.appendChild(host);
+        host.innerHTML = `<select name="color">
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+      </select>`;
+        const select = host.querySelector('select');
+        let inputs = 0;
+        let changes = 0;
+        select.addEventListener('input', () => inputs++);
+        select.addEventListener('change', () => changes++);
+        const api = makeSh3Api({ callerKind: 'verb' });
+        await api.fields.set({ shardId: 'sh3.walker', slotId, fieldId: 'color' }, 'blue');
+        expect(select.value).toBe('blue');
+        expect(inputs).toBe(1);
+        expect(changes).toBe(1);
+    });
+    it('get on a walker addr returns the live value', () => {
+        const slotId = 'sw2';
+        const host = acquireSlotHost(slotId, 'view', 'lbl');
+        document.body.appendChild(host);
+        host.innerHTML = `<input name="title" value="hello" />`;
+        const api = makeSh3Api({ callerKind: 'verb' });
+        expect(api.fields.get({ shardId: 'sh3.walker', slotId, fieldId: 'title' })).toBe('hello');
+    });
+    it('get on a walker addr reads .checked for checkbox', () => {
+        const slotId = 'sw3';
+        const host = acquireSlotHost(slotId, 'view', 'lbl');
+        document.body.appendChild(host);
+        host.innerHTML = `<input type="checkbox" name="published" />`;
+        const cb = host.querySelector('input');
+        cb.checked = true;
+        const api = makeSh3Api({ callerKind: 'verb' });
+        expect(api.fields.get({ shardId: 'sh3.walker', slotId, fieldId: 'published' })).toBe(true);
+    });
+    it('rejects unknown walker addr (slot has no matching field)', () => {
+        const slotId = 'sw4';
+        const host = acquireSlotHost(slotId, 'view', 'lbl');
+        document.body.appendChild(host);
+        const api = makeSh3Api({ callerKind: 'verb' });
+        expect(() => api.fields.get({ shardId: 'sh3.walker', slotId, fieldId: 'absent' })).toThrow(/unknown field/);
+    });
+    it('rejects walker addr without slotId', async () => {
+        const api = makeSh3Api({ callerKind: 'verb' });
+        await expect(api.fields.set({ shardId: 'sh3.walker', fieldId: 'whatever' }, 'x')).rejects.toThrow(/requires slotId/);
+    });
+    it('rejects writing to a [data-sh3-field] custom element', async () => {
+        const slotId = 'sw5';
+        const host = acquireSlotHost(slotId, 'view', 'lbl');
+        document.body.appendChild(host);
+        host.innerHTML = `<div data-sh3-field="custom">x</div>`;
+        const api = makeSh3Api({ callerKind: 'verb' });
+        await expect(api.fields.set({ shardId: 'sh3.walker', slotId, fieldId: 'custom' }, 'y')).rejects.toThrow(/cannot write/);
+    });
+});

package/dist/sh3Api/headless.d.ts

@@ -1,4 +1,13 @@
 import type { Sh3Api } from '../shell-shard/registry';
 import type { ZoneManager } from '../state/types';
+export interface MakeSh3ApiOpts {
+    callerKind: 'shard' | 'verb';
+    /** Present when callerKind === 'shard' (used by future permission gates). */
+    callerShardId?: string;
+    /** Cross-shard zone manager — passed in by ShardContext when permitted. */
+    zones?: ZoneManager;
+}
+export declare function makeSh3Api(opts?: MakeSh3ApiOpts): Sh3Api;
+/** @deprecated Renamed to makeSh3Api(opts?). Kept for one minor cycle. */
 export declare function makeSh3ApiHeadless(zones?: ZoneManager): Sh3Api;
 export declare function makeSh3ApiForTest(): Sh3Api;