sh3-core 0.17.0 → 0.19.0

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

@@ -0,0 +1,300 @@
+/*
+ * DOM smoke for CarouselTabs — verifies static rendering and
+ * responsiveness to activeTab mutations. Gesture tests live in
+ * the same file (added in Task 5).
+ *
+ * happy-dom does not compute layout, so we install a deterministic
+ * ResizeObserver mock that fires once with the width parsed from the
+ * observed element's nearest ancestor that carries `data-test-width`.
+ */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import CarouselTabs from './CarouselTabs.svelte';
+import { claim, getOwner, __resetForTest as resetClaims } from '../../gestures/pointerClaim';
+const CarouselTabsAny = CarouselTabs;
+let mounted = null;
+let host = null;
+let originalRO;
+beforeEach(() => {
+    originalRO = globalThis.ResizeObserver;
+    class FakeResizeObserver {
+        constructor(cb) { this.callback = cb; }
+        observe(target) {
+            var _a;
+            let el = target;
+            let width = 0;
+            while (el) {
+                const w = (_a = el.dataset) === null || _a === void 0 ? void 0 : _a.testWidth;
+                if (w) {
+                    width = parseInt(w, 10);
+                    break;
+                }
+                el = el.parentElement;
+            }
+            this.callback([{ contentRect: { width, height: 0 }, target }], this);
+        }
+        unobserve() { }
+        disconnect() { }
+    }
+    globalThis.ResizeObserver = FakeResizeObserver;
+});
+afterEach(() => {
+    if (mounted) {
+        unmount(mounted);
+        mounted = null;
+    }
+    if (host) {
+        host.remove();
+        host = null;
+    }
+    globalThis.ResizeObserver = originalRO;
+    resetClaims();
+});
+function makeNode(labels, activeTab = 0, wrap = false) {
+    return {
+        type: 'tabs',
+        tabs: labels.map((l, i) => ({ slotId: `s${i}`, viewId: null, label: l })),
+        activeTab,
+        wrap,
+    };
+}
+function mountCarousel(props) {
+    host = document.createElement('div');
+    host.style.width = '300px';
+    host.style.height = '400px';
+    host.style.position = 'relative';
+    host.dataset.testWidth = '300';
+    document.body.appendChild(host);
+    mounted = mount(CarouselTabsAny, { target: host, props });
+    flushSync();
+}
+describe('CarouselTabs (static)', () => {
+    it('renders one slide per tab', () => {
+        mountCarousel({ node: makeNode(['A', 'B', 'C']), wrap: false });
+        const slides = host.querySelectorAll('[data-sh3-slide]');
+        expect(slides.length).toBe(3);
+    });
+    it('renders pager dots when tab count > 1', () => {
+        mountCarousel({ node: makeNode(['A', 'B']), wrap: false });
+        const dots = host.querySelectorAll('[data-sh3-pager-dot]');
+        expect(dots.length).toBe(2);
+    });
+    it('marks the active dot via aria-current="true"', () => {
+        mountCarousel({ node: makeNode(['A', 'B', 'C'], 1), wrap: false });
+        const dots = host.querySelectorAll('[data-sh3-pager-dot]');
+        expect(dots[0].getAttribute('aria-current')).toBeNull();
+        expect(dots[1].getAttribute('aria-current')).toBe('true');
+        expect(dots[2].getAttribute('aria-current')).toBeNull();
+    });
+    it('hides pager dots for single-tab groups', () => {
+        mountCarousel({ node: makeNode(['Only']), wrap: false });
+        const dots = host.querySelectorAll('[data-sh3-pager-dot]');
+        expect(dots.length).toBe(0);
+    });
+    it('translates the track based on activeTab', () => {
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        expect(track).not.toBeNull();
+        expect(track.style.transform).toContain('translateX(-300px)');
+    });
+});
+function fakePointer(type, x, y, id = 1) {
+    const ev = new Event(type, { bubbles: true, cancelable: true });
+    Object.assign(ev, { pointerId: id, clientX: x, clientY: y, pointerType: 'touch' });
+    return ev;
+}
+function dispatchSwipe(track, from, to, steps = 4) {
+    track.dispatchEvent(fakePointer('pointerdown', from.x, from.y));
+    for (let s = 1; s <= steps; s++) {
+        const x = from.x + ((to.x - from.x) * s) / steps;
+        const y = from.y + ((to.y - from.y) * s) / steps;
+        document.dispatchEvent(fakePointer('pointermove', x, y));
+    }
+    document.dispatchEvent(fakePointer('pointerup', to.x, to.y));
+}
+describe('CarouselTabs (gestures)', () => {
+    it('swipe past commit threshold advances activeTab', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 250, y: 100 }, { x: 80, y: 100 });
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('short swipe below commit threshold snaps back (no activeTab change)', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 250, y: 100 }, { x: 190, y: 100 });
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('vertical-dominant gesture does not change activeTab (axis lock releases)', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 150, y: 50 }, { x: 130, y: 350 });
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('at last slide with wrap=false: large drag does NOT advance (edge-resist)', () => {
+        const node = makeNode(['A', 'B'], 1, /* wrap */ false);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 250, y: 100 }, { x: 50, y: 100 });
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('at last slide with wrap=true: large drag wraps to first', () => {
+        const node = makeNode(['A', 'B', 'C'], 2, /* wrap */ true);
+        mountCarousel({ node, wrap: true });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 250, y: 100 }, { x: 50, y: 100 });
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('at first slide with wrap=true: large drag right-to-left-back wraps to last', () => {
+        const node = makeNode(['A', 'B', 'C'], 0, /* wrap */ true);
+        mountCarousel({ node, wrap: true });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 50, y: 100 }, { x: 250, y: 100 });
+        flushSync();
+        expect(node.activeTab).toBe(2);
+    });
+    it('pointercancel mid-drag does NOT commit, even past the threshold', () => {
+        // Repro for the Android bug where descendant elements (buttons,
+        // scroll regions) fire pointercancel after we've claimed the
+        // gesture — the previous implementation read that as a release at
+        // the current dx and instantly auto-completed the swipe with the
+        // finger still down.
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        track.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        // Drag past the commit threshold (containerWidth=300, 40% = 120px).
+        document.dispatchEvent(fakePointer('pointermove', 200, 100));
+        document.dispatchEvent(fakePointer('pointermove', 100, 100));
+        // Cancel instead of release — must NOT commit.
+        document.dispatchEvent(fakePointer('pointercancel', 100, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('single-tab carousel: gesture is a no-op', () => {
+        const node = makeNode(['Only'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        dispatchSwipe(track, { x: 250, y: 100 }, { x: 50, y: 100 });
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('pointerdown on an editable target (input) does not initiate a swipe', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelector('[data-sh3-slide]');
+        const input = document.createElement('input');
+        slide.appendChild(input);
+        // pointerdown on the input bubbles to the track, but the handler bails
+        // because the target is editable.
+        input.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('pointerdown inside an overflow-x:scroll element does not initiate a swipe', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelector('[data-sh3-slide]');
+        const scroller = document.createElement('div');
+        scroller.style.overflowX = 'scroll';
+        slide.appendChild(scroller);
+        scroller.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('pointerdown inside an overflow-x:auto element does not initiate a swipe', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelector('[data-sh3-slide]');
+        const scroller = document.createElement('div');
+        scroller.style.overflowX = 'auto';
+        slide.appendChild(scroller);
+        scroller.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('pointerdown inside an overflow-x:hidden element still allows swipe', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelector('[data-sh3-slide]');
+        const wrapper = document.createElement('div');
+        wrapper.style.overflowX = 'hidden';
+        slide.appendChild(wrapper);
+        wrapper.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100));
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('pointerdown on contenteditable target does not initiate a swipe', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelector('[data-sh3-slide]');
+        const editable = document.createElement('div');
+        editable.setAttribute('contenteditable', 'true');
+        slide.appendChild(editable);
+        editable.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('marks the track --dragging while a horizontal drag is in flight, and clears it on pointerup', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        track.dispatchEvent(fakePointer('pointerdown', 250, 100));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100));
+        flushSync();
+        expect(track.classList.contains('sh3-carousel-track--dragging')).toBe(true);
+        document.dispatchEvent(fakePointer('pointerup', 200, 100));
+        flushSync();
+        expect(track.classList.contains('sh3-carousel-track--dragging')).toBe(false);
+    });
+});
+describe('CarouselTabs — PointerClaim integration', () => {
+    it('does not start gesture when pointer is already claimed by an app', () => {
+        const node = makeNode(['A', 'B'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        // Pre-claim as if an app pan gesture owns this pointer
+        claim(1, { ownerId: 'app:pan', axis: 'xy', priority: 'normal', depth: 99 });
+        dispatchSwipe(track, { x: 250, y: 100 }, { x: 50, y: 100 });
+        flushSync();
+        // Gesture must have been skipped — activeTab unchanged
+        expect(node.activeTab).toBe(0);
+    });
+    it('claims the pointer as sh3:carousel when unclaimed', () => {
+        var _a;
+        const node = makeNode(['A', 'B'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        track.dispatchEvent(fakePointer('pointerdown', 250, 100, 2));
+        expect((_a = getOwner(2)) === null || _a === void 0 ? void 0 : _a.ownerId).toBe('sh3:carousel');
+    });
+    it('releases claim on pointerup', () => {
+        var _a;
+        const node = makeNode(['A', 'B'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        track.dispatchEvent(fakePointer('pointerdown', 250, 100, 3));
+        expect((_a = getOwner(3)) === null || _a === void 0 ? void 0 : _a.ownerId).toBe('sh3:carousel');
+        document.dispatchEvent(fakePointer('pointerup', 250, 100, 3));
+        expect(getOwner(3)).toBeNull();
+    });
+});

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} carousels={rendering.carousels} />
+</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,125 @@
+/*
+ * 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');
+    });
+});
+describe('CompactRenderer — carousels', () => {
+    it('renders a CarouselTabs region for a full-width tabs body', () => {
+        const app = {
+            manifest: { id: 'carousel-app', label: 'Carousel App', layoutVersion: 6 },
+            initialLayout: {
+                type: 'tabs',
+                activeTab: 0,
+                tabs: [
+                    { slotId: 's0', viewId: null, label: 'A', role: 'body' },
+                    { slotId: 's1', viewId: null, label: 'B', role: 'body' },
+                ],
+            },
+        };
+        attachApp(app);
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactRenderer, { target: host });
+        flushSync();
+        expect(host.querySelector('[data-sh3-region="carousel"]')).not.toBeNull();
+    });
+    it('does NOT render a carousel for tabs that are narrower than full body width', () => {
+        const app = {
+            manifest: { id: 'narrow-app', label: 'Narrow App', layoutVersion: 6 },
+            initialLayout: {
+                type: 'split',
+                direction: 'horizontal',
+                sizes: [0.5, 0.5],
+                children: [
+                    {
+                        type: 'tabs',
+                        activeTab: 0,
+                        tabs: [{ slotId: 'l0', viewId: null, label: 'L', role: 'body' }],
+                    },
+                    { type: 'slot', slotId: 'r', viewId: null, role: 'body' },
+                ],
+            },
+        };
+        attachApp(app);
+        switchToApp();
+        flushSync();
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(CompactRenderer, { target: host });
+        flushSync();
+        expect(host.querySelector('[data-sh3-region="carousel"]')).toBeNull();
+    });
+});

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,157 @@
+/*
+ * 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';
+import { enrichCarousels } from './enrichCarousels';
+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),
+        },
+        carousels: enrichCarousels(bodyRoot),
+    };
+}

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

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