sh3-core 0.17.0 → 0.17.2

package/dist/chrome/MenuSheet.svelte.test.js

@@ -0,0 +1,46 @@
+/*
+ * DOM smoke for MenuSheet — verifies open/closed rendering. The
+ * container/item resolution is exercised via the same model functions
+ * MenuBar uses; their unit tests cover the resolution semantics so
+ * this test only asserts the wrapper structure.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import MenuSheet from './MenuSheet.svelte';
+const MenuSheetAny = MenuSheet;
+let mounted = null;
+let host = null;
+afterEach(() => {
+    if (mounted) {
+        unmount(mounted);
+        mounted = null;
+    }
+    if (host) {
+        host.remove();
+        host = null;
+    }
+});
+describe('MenuSheet (dom)', () => {
+    it('renders nothing when closed', () => {
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(MenuSheetAny, {
+            target: host,
+            props: { open: false, onClose: () => { } },
+        });
+        flushSync();
+        expect(host.querySelector('[data-sh3-region="menu-sheet"]')).toBeNull();
+    });
+    it('renders a sheet with a Cancel button when open', () => {
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(MenuSheetAny, {
+            target: host,
+            props: { open: true, onClose: () => { } },
+        });
+        flushSync();
+        const sheet = host.querySelector('[data-sh3-region="menu-sheet"]');
+        expect(sheet).not.toBeNull();
+        expect(sheet.querySelector('.cancel').textContent).toContain('Cancel');
+    });
+});

package/dist/handheld.browser.test.d.ts

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

package/dist/handheld.browser.test.js

@@ -0,0 +1,90 @@
+/*
+ * Handheld flip e2e — verifies slot survival across viewport flips
+ * using the real browser's re-parent semantics + slot host pool.
+ *
+ * The proof rides on slot id stability: if the same slot id is requested
+ * by both the docked LayoutRenderer (desktop) and the compact-mode
+ * DrawerSurface, the host pool keeps the host alive across the swap and
+ * the same DOM element is reused. We stamp a unique data attribute on
+ * the mounted view DOM, flip viewport classes, and assert the same
+ * element is still findable after each flip.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { tick } from 'svelte';
+import { resetFramework } from './__test__/reset';
+import { renderWithShell } from './__test__/render';
+import { registerApp } from './apps/registry.svelte';
+import { launchApp } from './apps/lifecycle';
+import { registerView } from './shards/registry';
+import { makeApp, makeAppManifest } from './__test__/fixtures';
+import { sh3 } from './sh3Runtime.svelte';
+import Sh3 from './Sh3.svelte';
+function settle(ms = 50) {
+    return new Promise((r) => setTimeout(r, ms));
+}
+function cleanupDOM() {
+    document.querySelectorAll('.sh3-sh3-host').forEach((h) => h.remove());
+}
+describe('handheld viewport flip e2e', () => {
+    beforeEach(() => {
+        cleanupDOM();
+        resetFramework();
+        sh3.viewport.override(null);
+    });
+    it('viewport override flips chrome and body branches', async () => {
+        // Stable per-mount stamp so we can recognise the same DOM element.
+        let stampedEl = null;
+        registerView('test:body', {
+            mount: (el) => {
+                el.dataset.testStamp = 'body-' + Math.random().toString(36).slice(2);
+                stampedEl = el;
+                return { unmount: () => { } };
+            },
+        });
+        registerView('test:sb', {
+            mount: (el) => {
+                el.dataset.testStamp = 'sb-' + Math.random().toString(36).slice(2);
+                return { unmount: () => { } };
+            },
+        });
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'flip-app', label: 'Flip' }),
+            initialLayout: {
+                type: 'split', direction: 'horizontal', sizes: [0.3, 0.7],
+                children: [
+                    { type: 'slot', slotId: 'sb', viewId: 'test:sb', role: 'sidebar' },
+                    { type: 'slot', slotId: 'body', viewId: 'test:body', role: 'body' },
+                ],
+            },
+        }));
+        // Pin desktop before mounting so the gate's first render is desktop.
+        sh3.viewport.override('desktop');
+        renderWithShell(Sh3, {});
+        await launchApp('flip-app');
+        await tick();
+        await settle();
+        expect(document.querySelector('[data-sh3-region="tabbar"]')).not.toBeNull();
+        expect(document.querySelector('[data-sh3-region="compact-chrome"]')).toBeNull();
+        expect(stampedEl).not.toBeNull();
+        const initialStamp = stampedEl.dataset.testStamp;
+        // Flip to compact.
+        sh3.viewport.override('compact');
+        await tick();
+        await settle();
+        expect(document.querySelector('[data-sh3-region="compact-chrome"]')).not.toBeNull();
+        expect(document.querySelector('[data-sh3-region="tabbar"]')).toBeNull();
+        expect(document.querySelector('[data-sh3-region="compact-body"]')).not.toBeNull();
+        // Body slot host survived the swap — query the test stamp.
+        const survivors = document.querySelectorAll('[data-test-stamp]');
+        const compactStamps = Array.from(survivors).map((el) => el.dataset.testStamp);
+        expect(compactStamps).toContain(initialStamp);
+        // Flip back to desktop.
+        sh3.viewport.override('desktop');
+        await tick();
+        await settle();
+        expect(document.querySelector('[data-sh3-region="tabbar"]')).not.toBeNull();
+        const finalStamps = Array.from(document.querySelectorAll('[data-test-stamp]')).map((el) => el.dataset.testStamp);
+        // Slot was not remounted across two flips — original stamp survives.
+        expect(finalStamps).toContain(initialStamp);
+    });
+});

package/dist/layout/LayoutRenderer.svelte

@@ -47,7 +47,8 @@
   let {
     path = [],
     rootRef = { kind: 'docked' } as TreeRootRef,
-  }: { path?: number[]; rootRef?: TreeRootRef } = $props();
+    rootOverride,
+  }: { path?: number[]; rootRef?: TreeRootRef; rootOverride?: LayoutNode } = $props();
 
   /**
    * Resolve the current node by walking `layoutStore.root` along the
@@ -55,8 +56,18 @@
    * layout mutates. If the path becomes invalid mid-mutation (a
    * cleanup pass can collapse nodes out from under a recursive
    * renderer), we render null.
+   *
+   * `rootOverride`: compact-mode entry point. CompactRenderer derives a
+   * body-only sub-tree from the canonical layout and passes it here as
+   * the root. The recursive `<Self>` calls below DO NOT propagate the
+   * override — they keep the path-only contract so structural mutations
+   * still go through `layoutStore.root` for the (rare) cases where the
+   * derived bodyRoot shares object identity with the source.
    */
   const node = $derived.by(() => {
+    if (rootOverride !== undefined) {
+      return nodeAtPath(rootOverride, path);
+    }
     let rootNode: LayoutNode | null;
     if (rootRef.kind === 'docked') {
       rootNode = layoutStore.root;

package/dist/layout/LayoutRenderer.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { TreeRootRef } from './types';
+import type { LayoutNode, TreeRootRef } from './types';
 type $$ComponentProps = {
     path?: number[];
     rootRef?: TreeRootRef;
+    rootOverride?: LayoutNode;
 };
 declare const LayoutRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type LayoutRenderer = ReturnType<typeof LayoutRenderer>;

package/dist/layout/compact/CompactRenderer.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  /*
+   * Compact rendering wrapper. Reads the active layout tree from
+   * layoutStore, runs derive() to get the CompactRendering, renders the
+   * bodyRoot via LayoutRenderer (with rootOverride), and mounts a
+   * DrawerSurface for each non-null anchor.
+   *
+   * Drawer state lives in drawerStore (Sh3.drawers backing). The surfaces
+   * paint above the body content via their own absolute-positioned
+   * frames; the drawer overlay layer (--sh3-z-layer-drawers) sits above
+   * the docked content so the surfaces stack correctly.
+   *
+   * View-default role lookup is intentionally omitted in v1 — derive()
+   * reads slot.role / tab.role directly. Apps that want non-body slots
+   * tag them at authoring time. View-default fall-through ships when the
+   * registry exposes a pre-mount lookup (deferred from this PR).
+   */
+  import { layoutStore } from '../store.svelte';
+  import { drawerStore } from './drawerStore.svelte';
+  import { derive } from './derive';
+  import LayoutRenderer from '../LayoutRenderer.svelte';
+  import DrawerSurface from '../../overlays/DrawerSurface.svelte';
+  import type { DrawerAnchor } from './types';
+
+  const rendering = $derived(derive(layoutStore.root));
+
+  const anchors: DrawerAnchor[] = ['left', 'right', 'top'];
+</script>
+
+<div class="compact-body" data-sh3-region="compact-body">
+  <LayoutRenderer rootOverride={rendering.bodyRoot} />
+</div>
+
+{#each anchors as anchor (anchor)}
+  {@const spec = rendering.drawers[anchor]}
+  {#if spec}
+    <DrawerSurface
+      {anchor}
+      {spec}
+      open={drawerStore.state[anchor].open}
+      activeSlotId={drawerStore.state[anchor].activeSlotId}
+      onClose={() => drawerStore.close(anchor)}
+      onActivate={(slotId) => drawerStore.activate(anchor, slotId)}
+    />
+  {/if}
+{/each}
+
+<style>
+  .compact-body {
+    position: absolute;
+    inset: 0;
+  }
+</style>

package/dist/layout/compact/CompactRenderer.svelte.d.ts

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

package/dist/layout/compact/CompactRenderer.svelte.test.d.ts

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

package/dist/layout/compact/CompactRenderer.svelte.test.js

@@ -0,0 +1,76 @@
+/*
+ * DOM smoke for CompactRenderer. With a sidebar+body+inspector tree
+ * attached as the active layout, the wrapper renders one drawer surface
+ * per anchor (open=false, but the drawer-region lookup happens on open
+ * — here we just verify the wrapper accepts the tree and renders the
+ * body container plus the LayoutRenderer for bodyRoot).
+ *
+ * Slot-survival on viewport flip is covered by the browser e2e in T21.
+ */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import CompactRenderer from './CompactRenderer.svelte';
+import { drawerStore } from './drawerStore.svelte';
+import { __resetLayoutStoreForTest, attachApp, detachApp, switchToApp } from '../store.svelte';
+function fakeApp() {
+    return {
+        manifest: { id: 'compact-test-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('CompactRenderer (dom)', () => {
+    it('renders the compact-body region for the bodyRoot', () => {
+        attachApp(fakeApp());
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        host.style.width = '400px';
+        host.style.height = '600px';
+        host.style.position = 'relative';
+        document.body.appendChild(host);
+        mounted = mount(CompactRenderer, { target: host });
+        flushSync();
+        expect(host.querySelector('[data-sh3-region="compact-body"]')).not.toBeNull();
+    });
+    it('opening left drawer renders one drawer-region with sidebar label', () => {
+        attachApp(fakeApp());
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        host.style.width = '400px';
+        host.style.height = '600px';
+        host.style.position = 'relative';
+        document.body.appendChild(host);
+        mounted = mount(CompactRenderer, { target: host });
+        flushSync();
+        drawerStore.open('left');
+        flushSync();
+        const drawer = host.querySelector('[data-sh3-region="drawer"][data-sh3-anchor="left"]');
+        expect(drawer).not.toBeNull();
+        expect(drawer.querySelector('header').textContent).toContain('sb');
+    });
+});

package/dist/layout/compact/derive.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutNode } from '../types';
+import type { CompactRendering } from './types';
+export declare function derive(tree: LayoutNode): CompactRendering;

package/dist/layout/compact/derive.js

@@ -0,0 +1,155 @@
+/*
+ * derive — pure transform from a canonical LayoutNode tree to a
+ * CompactRendering. See ./types.ts for the output shape.
+ *
+ * Anchor inference (from spec §4):
+ *   - Horizontal split: first non-body subtree → 'left', last → 'right'.
+ *   - Vertical split: first non-body subtree → 'top'.
+ *   - Otherwise: sidebar → 'left', inspector → 'right'.
+ *
+ * Once an outer split has assigned an anchor for a subtree, descent
+ * locks that anchor — inner splits don't retag (a vertical split
+ * inside a left-anchored subtree keeps both children on the left).
+ *
+ * Note: this transform reads slot.role / tab.role only. View-level
+ * defaultRole resolution happens at the call site via resolveRole(),
+ * which materializes a tree with effective roles before passing to
+ * derive(). See layout/compact/CompactRenderer.svelte.
+ */
+import { EMPTY_BODY } from './types';
+function effectiveRole(role) {
+    return role !== null && role !== void 0 ? role : 'body';
+}
+function collectSlots(node) {
+    if (node.type === 'slot') {
+        return [{
+                slotId: node.slotId,
+                viewId: node.viewId,
+                label: node.slotId,
+                role: effectiveRole(node.role),
+            }];
+    }
+    if (node.type === 'tabs') {
+        return node.tabs.map((t) => ({
+            slotId: t.slotId,
+            viewId: t.viewId,
+            label: t.label,
+            icon: t.icon,
+            role: effectiveRole(t.role),
+        }));
+    }
+    return node.children.flatMap(collectSlots);
+}
+function hasAnyBody(node) {
+    return collectSlots(node).some((s) => s.role === 'body');
+}
+function stripNonBody(node) {
+    if (node.type === 'slot') {
+        return effectiveRole(node.role) === 'body' ? node : null;
+    }
+    if (node.type === 'tabs') {
+        const bodyTabs = node.tabs.filter((t) => effectiveRole(t.role) === 'body');
+        if (bodyTabs.length === 0)
+            return null;
+        if (bodyTabs.length === node.tabs.length)
+            return node;
+        return {
+            type: 'tabs',
+            activeTab: Math.min(node.activeTab, bodyTabs.length - 1),
+            tabs: bodyTabs,
+        };
+    }
+    // split
+    const survivors = [];
+    for (let i = 0; i < node.children.length; i++) {
+        const stripped = stripNonBody(node.children[i]);
+        if (stripped)
+            survivors.push({ child: stripped, size: node.sizes[i] });
+    }
+    if (survivors.length === 0)
+        return null;
+    if (survivors.length === 1)
+        return survivors[0].child;
+    return {
+        type: 'split',
+        direction: node.direction,
+        sizes: survivors.map((s) => s.size),
+        children: survivors.map((s) => s.child),
+    };
+}
+function defaultAnchor(role) {
+    return role === 'inspector' ? 'right' : 'left';
+}
+function partitionDrawers(node) {
+    const buckets = { left: [], right: [], top: [] };
+    function walk(n, hint) {
+        if (n.type === 'slot') {
+            const role = effectiveRole(n.role);
+            if (role === 'body')
+                return;
+            const anchor = hint !== null && hint !== void 0 ? hint : defaultAnchor(role);
+            buckets[anchor].push({
+                slotId: n.slotId, viewId: n.viewId, label: n.slotId, role,
+            });
+            return;
+        }
+        if (n.type === 'tabs') {
+            for (const t of n.tabs) {
+                const role = effectiveRole(t.role);
+                if (role === 'body')
+                    continue;
+                const anchor = hint !== null && hint !== void 0 ? hint : defaultAnchor(role);
+                buckets[anchor].push({
+                    slotId: t.slotId, viewId: t.viewId, label: t.label, icon: t.icon, role,
+                });
+            }
+            return;
+        }
+        if (n.direction === 'horizontal') {
+            for (let i = 0; i < n.children.length; i++) {
+                const child = n.children[i];
+                let nextHint = hint;
+                if (hint === null && !hasAnyBody(child)) {
+                    if (i === 0)
+                        nextHint = 'left';
+                    else if (i === n.children.length - 1)
+                        nextHint = 'right';
+                }
+                walk(child, nextHint);
+            }
+        }
+        else {
+            for (let i = 0; i < n.children.length; i++) {
+                const child = n.children[i];
+                let nextHint = hint;
+                if (hint === null && i === 0 && !hasAnyBody(child))
+                    nextHint = 'top';
+                walk(child, nextHint);
+            }
+        }
+    }
+    walk(node, null);
+    return buckets;
+}
+function toSpec(slots) {
+    if (slots.length === 0)
+        return null;
+    return {
+        slots: slots.map((s) => ({
+            slotId: s.slotId, viewId: s.viewId, label: s.label, icon: s.icon, role: s.role,
+        })),
+    };
+}
+export function derive(tree) {
+    const stripped = stripNonBody(tree);
+    const bodyRoot = stripped !== null && stripped !== void 0 ? stripped : EMPTY_BODY;
+    const buckets = partitionDrawers(tree);
+    return {
+        bodyRoot,
+        drawers: {
+            left: toSpec(buckets.left),
+            right: toSpec(buckets.right),
+            top: toSpec(buckets.top),
+        },
+    };
+}

package/dist/layout/compact/derive.test.d.ts

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

package/dist/layout/compact/derive.test.js

@@ -0,0 +1,160 @@
+import { describe, it, expect } from 'vitest';
+import { derive } from './derive';
+describe('derive', () => {
+    describe('body partition', () => {
+        it('all-body tree → bodyRoot identical, all drawers null', () => {
+            const tree = {
+                type: 'split',
+                direction: 'horizontal',
+                sizes: [1, 1],
+                children: [
+                    { type: 'slot', slotId: 'a', viewId: 'view:a', role: 'body' },
+                    { type: 'slot', slotId: 'b', viewId: 'view:b', role: 'body' },
+                ],
+            };
+            const result = derive(tree);
+            expect(result.bodyRoot).toEqual(tree);
+            expect(result.drawers.left).toBeNull();
+            expect(result.drawers.right).toBeNull();
+            expect(result.drawers.top).toBeNull();
+        });
+        it('zero-body tree → bodyRoot is empty placeholder', () => {
+            var _a, _b;
+            const tree = {
+                type: 'split', direction: 'horizontal', sizes: [1, 1],
+                children: [
+                    { type: 'slot', slotId: 'a', viewId: 'view:a', role: 'sidebar' },
+                    { type: 'slot', slotId: 'b', viewId: 'view:b', role: 'inspector' },
+                ],
+            };
+            const result = derive(tree);
+            expect(result.bodyRoot.type).toBe('slot');
+            expect(result.bodyRoot.slotId).toBe('__sh3core__:compact:empty');
+            expect((_a = result.drawers.left) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['a']);
+            expect((_b = result.drawers.right) === null || _b === void 0 ? void 0 : _b.slots.map((s) => s.slotId)).toEqual(['b']);
+        });
+        it('single body wrapped in split collapses to bare body slot', () => {
+            const tree = {
+                type: 'split', direction: 'horizontal', sizes: [0.2, 0.8],
+                children: [
+                    { type: 'slot', slotId: 'side', viewId: 'view:side', role: 'sidebar' },
+                    { type: 'slot', slotId: 'body', viewId: 'view:body', role: 'body' },
+                ],
+            };
+            const result = derive(tree);
+            expect(result.bodyRoot.type).toBe('slot');
+            expect(result.bodyRoot.slotId).toBe('body');
+        });
+    });
+    describe('anchor inference', () => {
+        it('first horizontal child → left, last → right', () => {
+            var _a, _b;
+            const tree = {
+                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' },
+                ],
+            };
+            const result = derive(tree);
+            expect((_a = result.drawers.left) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['sb']);
+            expect((_b = result.drawers.right) === null || _b === void 0 ? void 0 : _b.slots.map((s) => s.slotId)).toEqual(['ins']);
+            expect(result.drawers.top).toBeNull();
+        });
+        it('top of vertical split → top anchor', () => {
+            var _a;
+            const tree = {
+                type: 'split', direction: 'vertical', sizes: [0.3, 0.7],
+                children: [
+                    { type: 'slot', slotId: 'tools', viewId: 'v:tools', role: 'sidebar' },
+                    { type: 'slot', slotId: 'body', viewId: 'v:body', role: 'body' },
+                ],
+            };
+            const result = derive(tree);
+            expect((_a = result.drawers.top) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['tools']);
+            expect(result.drawers.left).toBeNull();
+            expect(result.drawers.right).toBeNull();
+        });
+        it('inspector with no horizontal anchor defaults to right', () => {
+            var _a;
+            const tree = {
+                type: 'slot', slotId: 'lone', viewId: 'v:lone', role: 'inspector',
+            };
+            const result = derive(tree);
+            expect((_a = result.drawers.right) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['lone']);
+            expect(result.drawers.left).toBeNull();
+        });
+        it('sidebar with no horizontal anchor defaults to left', () => {
+            var _a;
+            const tree = {
+                type: 'slot', slotId: 'lone', viewId: 'v:lone', role: 'sidebar',
+            };
+            const result = derive(tree);
+            expect((_a = result.drawers.left) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['lone']);
+            expect(result.drawers.right).toBeNull();
+        });
+    });
+    describe('multi-slot drawers', () => {
+        it('two sidebars on the left render as one drawer with two slots', () => {
+            var _a;
+            const tree = {
+                type: 'split', direction: 'horizontal', sizes: [0.3, 0.7],
+                children: [
+                    {
+                        type: 'split', direction: 'vertical', sizes: [0.5, 0.5],
+                        children: [
+                            { type: 'slot', slotId: 'sb-top', viewId: 'v:sb-top', role: 'sidebar' },
+                            { type: 'slot', slotId: 'sb-bot', viewId: 'v:sb-bot', role: 'sidebar' },
+                        ],
+                    },
+                    { type: 'slot', slotId: 'body', viewId: 'v:body', role: 'body' },
+                ],
+            };
+            const result = derive(tree);
+            expect((_a = result.drawers.left) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['sb-top', 'sb-bot']);
+        });
+    });
+    describe('default role', () => {
+        it('untagged slot defaults to body', () => {
+            const tree = { type: 'slot', slotId: 'x', viewId: 'v:x' };
+            const result = derive(tree);
+            expect(result.bodyRoot).toEqual(tree);
+            expect(result.drawers.left).toBeNull();
+            expect(result.drawers.right).toBeNull();
+            expect(result.drawers.top).toBeNull();
+        });
+    });
+    describe('tabs nodes', () => {
+        it('tabs of body slots stay in body root', () => {
+            const tree = {
+                type: 'tabs', activeTab: 0,
+                tabs: [
+                    { slotId: 't1', viewId: 'v:t1', label: 'Tab 1', role: 'body' },
+                    { slotId: 't2', viewId: 'v:t2', label: 'Tab 2', role: 'body' },
+                ],
+            };
+            const result = derive(tree);
+            expect(result.bodyRoot.type).toBe('tabs');
+        });
+        it('tabs with mixed roles split body tabs from sidebar slots', () => {
+            var _a;
+            const tree = {
+                type: 'split', direction: 'horizontal', sizes: [0.2, 0.8],
+                children: [
+                    { type: 'slot', slotId: 'sb', viewId: 'v:sb', role: 'sidebar' },
+                    {
+                        type: 'tabs', activeTab: 0,
+                        tabs: [
+                            { slotId: 't1', viewId: 'v:t1', label: 'Tab 1', role: 'body' },
+                            { slotId: 't2', viewId: 'v:t2', label: 'Tab 2', role: 'body' },
+                        ],
+                    },
+                ],
+            };
+            const result = derive(tree);
+            expect(result.bodyRoot.type).toBe('tabs');
+            expect((_a = result.drawers.left) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['sb']);
+        });
+    });
+});

package/dist/layout/compact/drawerStore.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { DrawerAnchor, DrawerStateMap } from './types';
+export declare const drawerStore: {
+    readonly state: DrawerStateMap;
+    open(anchor: DrawerAnchor): void;
+    close(anchor: DrawerAnchor): void;
+    toggle(anchor: DrawerAnchor): void;
+    activate(anchor: DrawerAnchor, slotId: string): void;
+    /**
+     * Bind a write-through callback. layoutStore calls this when the active
+     * preset/viewport changes; the callback persists state into the
+     * AppLayoutBlob.drawers field. Pass null to unbind.
+     */
+    __setWriteThrough(cb: ((next: DrawerStateMap) => void) | null): void;
+    /**
+     * Replace the current state from a persisted snapshot. Used by
+     * layoutStore on preset/viewport-class change.
+     */
+    __hydrate(snapshot: DrawerStateMap): void;
+    /** Test-only reset. */
+    __reset(): void;
+};