sh3-core 0.7.3 → 0.8.0

package/dist/layout/LayoutRenderer.browser.test.js

@@ -0,0 +1,274 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { page } from '@vitest/browser/context';
+import { resetFramework } from '../__test__/reset';
+import { renderWithShell } from '../__test__/render';
+import LayoutRenderer from './LayoutRenderer.svelte';
+import { registerApp } from '../apps/registry.svelte';
+import { launchApp } from '../apps/lifecycle';
+import { registerView } from '../shards/registry';
+import { makeApp, makeAppManifest, makeSplitNode, makeTabsNode, makeTabEntry, makeSlotNode, makeTree, } from '../__test__/fixtures';
+import { layoutStore } from './store.svelte';
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+function stubView() {
+    registerView('test:view', {
+        mount: (el) => {
+            el.textContent = 'stub';
+            return { unmount: () => { el.textContent = ''; } };
+        },
+    });
+}
+/** Settle microtasks + a short macrotask gap. */
+function settle(ms = 50) {
+    return new Promise((r) => setTimeout(r, ms));
+}
+/** Remove all shell host elements from the body (cleanup between tests). */
+function cleanupDOM() {
+    const hosts = document.querySelectorAll('.sh3-shell-host');
+    hosts.forEach((h) => h.remove());
+}
+// ---------------------------------------------------------------------------
+// E.1 — drag tab between groups
+// ---------------------------------------------------------------------------
+describe('LayoutRenderer browser — E.1 drag tab between groups', () => {
+    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    it('moves a tab from one tabs group to another', async () => {
+        stubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'e1' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeSplitNode([
+                        makeTabsNode([makeTabEntry({ slotId: 'L1', label: 'L1' })]),
+                        makeTabsNode([makeTabEntry({ slotId: 'R1', label: 'R1' })]),
+                    ])),
+                },
+            ],
+        }));
+        await launchApp('e1');
+        renderWithShell(LayoutRenderer, { path: [] });
+        // Wait for initial render + slot-host pool microtasks
+        await settle(30);
+        // Get tabs by role. There are two tabs: L1 (active) and R1.
+        const allTabs = document.querySelectorAll('[role="tab"]');
+        if (allTabs.length < 2)
+            throw new Error(`expected 2 tabs, got ${allTabs.length}`);
+        // Get both tab strips (role="tablist") — left and right.
+        const strips = document.querySelectorAll('[role="tablist"]');
+        if (strips.length < 2)
+            throw new Error(`expected 2 tab strips, got ${strips.length}`);
+        const srcTab = allTabs[0]; // L1 (in left strip)
+        const rightStrip = strips[1]; // right tab strip
+        const srcRect = srcTab.getBoundingClientRect();
+        const sx = srcRect.left + srcRect.width / 2;
+        const sy = srcRect.top + srcRect.height / 2;
+        const tgtRect = rightStrip.getBoundingClientRect();
+        const tgtX = tgtRect.left + tgtRect.width / 2;
+        const tgtY = tgtRect.top + tgtRect.height / 2;
+        const mk = (x, y, type, buttons = 1) => new PointerEvent(type, {
+            bubbles: true, cancelable: true, pointerId: 1, pointerType: 'mouse',
+            clientX: x, clientY: y, screenX: x, screenY: y, buttons, button: 0,
+        });
+        // Start drag on source tab
+        srcTab.dispatchEvent(mk(sx, sy, 'pointerdown'));
+        // Cross the threshold (DRAG_THRESHOLD_PX = 4)
+        window.dispatchEvent(mk(sx + 2, sy, 'pointermove'));
+        window.dispatchEvent(mk(sx + 6, sy, 'pointermove'));
+        // Dispatch pointermove ON the right strip so TabbedPanel.onStripPointerMove fires
+        // and calls dragController.onStripHover → setDropTarget({ kind: 'strip' })
+        rightStrip.dispatchEvent(mk(tgtX, tgtY, 'pointermove'));
+        // Commit
+        window.dispatchEvent(mk(tgtX, tgtY, 'pointerup', 0));
+        await settle();
+        // After the drag, cleanupTree runs and removes the empty left group.
+        // The split collapses to just the right tabs node as root. Root is `tabs`
+        // with both L1 and R1 in it.
+        const root = layoutStore.root;
+        if ((root === null || root === void 0 ? void 0 : root.type) === 'split') {
+            // Cleanup didn't collapse — check left is empty, right has 2
+            const leftTabs = root.children[0];
+            const rightTabs = root.children[1];
+            expect(leftTabs.type === 'tabs' ? leftTabs.tabs.length : -1).toBe(0);
+            expect(rightTabs.type === 'tabs' ? rightTabs.tabs.length : -1).toBe(2);
+        }
+        else if ((root === null || root === void 0 ? void 0 : root.type) === 'tabs') {
+            // Cleanup collapsed the split — the lone right tabs group is now root.
+            // Both tabs should be present.
+            expect(root.tabs.length).toBe(2);
+            const slotIds = root.tabs.map((t) => t.slotId);
+            expect(slotIds).toContain('L1');
+            expect(slotIds).toContain('R1');
+        }
+        else {
+            throw new Error(`expected split or tabs root, got: ${root === null || root === void 0 ? void 0 : root.type}`);
+        }
+    });
+});
+// ---------------------------------------------------------------------------
+// E.2 — drag tab to quadrant drop zone
+// ---------------------------------------------------------------------------
+describe('LayoutRenderer browser — E.2 drag tab to quadrant', () => {
+    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    it('creates a split when dropping a tab on a quadrant drop zone', async () => {
+        stubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'e2' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeTabsNode([
+                        makeTabEntry({ slotId: 'X', label: 'X' }),
+                        makeTabEntry({ slotId: 'Y', label: 'Y' }),
+                    ])),
+                },
+            ],
+        }));
+        await launchApp('e2');
+        renderWithShell(LayoutRenderer, { path: [] });
+        await settle(30);
+        // Get the X tab (first tab = active one)
+        const tabs = document.querySelectorAll('[role="tab"]');
+        if (tabs.length < 1)
+            throw new Error('no tabs found');
+        const srcTab = tabs[0]; // X (active)
+        const srcRect = srcTab.getBoundingClientRect();
+        const sx = srcRect.left + srcRect.width / 2;
+        const sy = srcRect.top + srcRect.height / 2;
+        const zone = document.querySelector('.slot-drop-zone');
+        if (!zone)
+            throw new Error('no .slot-drop-zone found');
+        const zRect = zone.getBoundingClientRect();
+        // Right quadrant center
+        const tgtX = zRect.left + zRect.width * 0.75;
+        const tgtY = zRect.top + zRect.height / 2;
+        const mk = (x, y, type, buttons = 1) => new PointerEvent(type, {
+            bubbles: true, cancelable: true, pointerId: 1, pointerType: 'mouse',
+            clientX: x, clientY: y, screenX: x, screenY: y, buttons, button: 0,
+        });
+        srcTab.dispatchEvent(mk(sx, sy, 'pointerdown'));
+        window.dispatchEvent(mk(sx + 2, sy, 'pointermove'));
+        window.dispatchEvent(mk(sx + 6, sy, 'pointermove'));
+        // Fire pointermove on the zone element so SlotDropZone.onMove runs
+        zone.dispatchEvent(mk(tgtX, tgtY, 'pointermove'));
+        // Commit via global pointerup
+        window.dispatchEvent(mk(tgtX, tgtY, 'pointerup', 0));
+        await settle();
+        const root = layoutStore.root;
+        expect(root === null || root === void 0 ? void 0 : root.type).toBe('split');
+    });
+});
+// ---------------------------------------------------------------------------
+// E.3 — splitter drag updates sizes
+// ---------------------------------------------------------------------------
+describe('LayoutRenderer browser — E.3 splitter drag', () => {
+    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    it('updates split.sizes when the splitter handle is dragged', async () => {
+        stubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'e3' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeSplitNode([makeSlotNode('a', 'test:view'), makeSlotNode('b', 'test:view')])),
+                },
+            ],
+        }));
+        await launchApp('e3');
+        renderWithShell(LayoutRenderer, { path: [] });
+        await settle(30);
+        const root0 = layoutStore.root;
+        const size0 = (root0 === null || root0 === void 0 ? void 0 : root0.type) === 'split' ? root0.sizes[0] : -1;
+        // Get handle element directly from DOM (data-testid)
+        const handleEl = document.querySelector('[data-testid="splitter-handle-0"]');
+        if (!handleEl)
+            throw new Error('splitter handle not in DOM');
+        const box = handleEl.getBoundingClientRect();
+        const hx = box.left + box.width / 2;
+        const hy = box.top + box.height / 2;
+        const dx = 100;
+        const mk = (x, y, type, buttons = 1) => new PointerEvent(type, {
+            bubbles: true, cancelable: true, pointerId: 1, pointerType: 'mouse',
+            clientX: x, clientY: y, screenX: x, screenY: y, buttons, button: 0,
+        });
+        // ResizableSplitter uses onpointerdown/onpointermove/onpointerup on the handle.
+        handleEl.dispatchEvent(mk(hx, hy, 'pointerdown'));
+        handleEl.dispatchEvent(mk(hx + dx / 2, hy, 'pointermove'));
+        handleEl.dispatchEvent(mk(hx + dx, hy, 'pointermove'));
+        handleEl.dispatchEvent(mk(hx + dx, hy, 'pointerup', 0));
+        await settle();
+        const root1 = layoutStore.root;
+        const size1 = (root1 === null || root1 === void 0 ? void 0 : root1.type) === 'split' ? root1.sizes[0] : -1;
+        expect(size1).not.toBe(size0);
+    });
+});
+// ---------------------------------------------------------------------------
+// E.4 — tab close policy
+// ---------------------------------------------------------------------------
+import { setSlotClosableForTest, setSlotCanCloseForTest } from './slotHostPool.svelte';
+describe('LayoutRenderer browser — E.4 close policy', () => {
+    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    it('removes closable tabs, keeps non-closable, and awaits canClose', async () => {
+        stubView();
+        setSlotClosableForTest('free', true);
+        setSlotClosableForTest('pinned', false);
+        setSlotClosableForTest('guarded', true);
+        setSlotCanCloseForTest('guarded', async () => false);
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'e4' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeTabsNode([
+                        makeTabEntry({ slotId: 'free', label: 'Free' }),
+                        makeTabEntry({ slotId: 'pinned', label: 'Pinned' }),
+                        makeTabEntry({ slotId: 'guarded', label: 'Guarded' }),
+                    ])),
+                },
+            ],
+        }));
+        await launchApp('e4');
+        renderWithShell(LayoutRenderer, { path: [] });
+        await settle(30);
+        await page.getByTestId('tab-close-free').click();
+        await page.getByTestId('tab-close-guarded').click();
+        // Allow async canClose to resolve and layout to update
+        await settle(100);
+        const root = layoutStore.root;
+        if ((root === null || root === void 0 ? void 0 : root.type) !== 'tabs')
+            throw new Error('expected tabs root');
+        const labels = root.tabs.map((t) => t.label);
+        expect(labels).toContain('Pinned');
+        expect(labels).toContain('Guarded');
+        expect(labels).not.toContain('Free');
+    });
+});
+// ---------------------------------------------------------------------------
+// E.5 — double-click splitter toggles collapse
+// ---------------------------------------------------------------------------
+describe('LayoutRenderer browser — E.5 splitter collapse toggle', () => {
+    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    it('toggles collapsed[i] on double-click', async () => {
+        var _a;
+        stubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'e5' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeSplitNode([makeSlotNode('a', 'test:view'), makeSlotNode('b', 'test:view')])),
+                },
+            ],
+        }));
+        await launchApp('e5');
+        renderWithShell(LayoutRenderer, { path: [] });
+        await settle(30);
+        await page.getByTestId('splitter-handle-0').dblClick();
+        await settle(50);
+        const root = layoutStore.root;
+        if ((root === null || root === void 0 ? void 0 : root.type) !== 'split')
+            throw new Error('expected split root');
+        expect((_a = root.collapsed) === null || _a === void 0 ? void 0 : _a[0]).toBe(true);
+    });
+});

package/dist/layout/LayoutRenderer.svelte

@@ -195,9 +195,10 @@
         closable={tabClosable(tabs.tabs)}
         dirty={tabDirty(tabs.tabs)}
         onClose={(i) => handleTabClose(tabs.tabs, i)}
+        tabIds={tabs.tabs.map((t) => t.slotId)}
       />
       {#snippet tabBody(i: number)}
-        {@const entry = tabs.tabs[i]}
+        {@const entry = tabs?.tabs[i]}
         {#if entry}
           <div class="tab-slot-wrapper">
             <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />

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

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

package/dist/layout/LayoutRenderer.test.js

@@ -0,0 +1,143 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { tick } from 'svelte';
+import LayoutRenderer from './LayoutRenderer.svelte';
+import { resetFramework } from '../__test__/reset';
+import { renderWithShell } from '../__test__/render';
+import { makeApp, makeAppManifest, makeSplitNode, makeTabsNode, makeTabEntry, makeSlotNode, makeTree, } from '../__test__/fixtures';
+import { registerApp } from '../apps/registry.svelte';
+import { registerView } from '../shards/registry';
+import { launchApp } from '../apps/lifecycle';
+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('LayoutRenderer — C.1 split with tabs inside', () => {
+    beforeEach(resetFramework);
+    it('renders a splitter with two panes and a tab strip', async () => {
+        registerStubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'c1' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeSplitNode([
+                        makeSlotNode('left', 'test:view'),
+                        makeTabsNode([
+                            makeTabEntry({ slotId: 'r1', label: 'R1', viewId: 'test:view' }),
+                            makeTabEntry({ slotId: 'r2', label: 'R2', viewId: 'test:view' }),
+                        ]),
+                    ])),
+                },
+            ],
+        }));
+        await launchApp('c1');
+        const { container } = renderWithShell(LayoutRenderer, { path: [] });
+        await tick();
+        expect(container.querySelector('[data-view-for="left"]')).toBeTruthy();
+        // TabbedPanel renders buttons with role="tab" inside a div[role="tablist"]
+        expect(container.querySelectorAll('[role="tab"]').length).toBeGreaterThanOrEqual(2);
+    });
+});
+import { layoutStore } from './store.svelte';
+describe('LayoutRenderer — C.2 live tab insertion', () => {
+    beforeEach(resetFramework);
+    it('shows a new tab button when a tab entry is pushed into an existing tabs node', async () => {
+        registerStubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'c2' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeTabsNode([makeTabEntry({ slotId: 'a', label: 'A', viewId: 'test:view' })])),
+                },
+            ],
+        }));
+        await launchApp('c2');
+        const { container } = renderWithShell(LayoutRenderer, { path: [] });
+        await tick();
+        // TabbedPanel renders buttons with role="tab"
+        const before = container.querySelectorAll('[role="tab"]').length;
+        const root = layoutStore.root;
+        if ((root === null || root === void 0 ? void 0 : root.type) !== 'tabs')
+            throw new Error('expected tabs root');
+        root.tabs.push({ slotId: 'b', viewId: 'test:view', label: 'B' });
+        await tick();
+        const after = container.querySelectorAll('[role="tab"]').length;
+        expect(after).toBe(before + 1);
+    });
+});
+import { presetManager } from '../overlays/presets';
+describe('LayoutRenderer — C.3 tree shape swap', () => {
+    beforeEach(resetFramework);
+    it('does not throw when swapping from tabs-at-root to split-with-tabs-inside', async () => {
+        registerStubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'c3' }),
+            initialLayout: [
+                {
+                    name: 'tabs-root',
+                    tree: makeTree(makeTabsNode([makeTabEntry({ slotId: 't', viewId: 'test:view' })])),
+                },
+                {
+                    name: 'split-root',
+                    tree: makeTree(makeSplitNode([
+                        makeSlotNode('left', 'test:view'),
+                        makeTabsNode([makeTabEntry({ slotId: 'r', viewId: 'test:view' })]),
+                    ])),
+                },
+            ],
+        }));
+        await launchApp('c3');
+        const { container } = renderWithShell(LayoutRenderer, { path: [] });
+        await tick();
+        expect(() => presetManager.switch('split-root')).not.toThrow();
+        await tick();
+        expect(container.querySelector('[data-view-for="left"]')).toBeTruthy();
+    });
+});
+describe('LayoutRenderer — C.4 tabless preset', () => {
+    beforeEach(resetFramework);
+    it('renders a slot-only preset without accessing any tabs snippet', async () => {
+        registerStubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'c4' }),
+            initialLayout: [
+                { name: 'default', tree: makeTree(makeSlotNode('only', 'test:view')) },
+            ],
+        }));
+        await launchApp('c4');
+        const { container } = renderWithShell(LayoutRenderer, { path: [] });
+        await tick();
+        expect(container.querySelector('[data-view-for="only"]')).toBeTruthy();
+        // TabbedPanel renders buttons with role="tab" — none should appear for a slot-only tree
+        expect(container.querySelector('[role="tab"]')).toBeNull();
+    });
+});
+describe('LayoutRenderer — C.5 invalid path', () => {
+    beforeEach(resetFramework);
+    it('renders nothing when the path no longer resolves to a node', async () => {
+        registerStubView();
+        registerApp(makeApp({
+            manifest: makeAppManifest({ id: 'c5' }),
+            initialLayout: [
+                {
+                    name: 'default',
+                    tree: makeTree(makeSplitNode([makeSlotNode('a', 'test:view'), makeSlotNode('b', 'test:view')])),
+                },
+            ],
+        }));
+        await launchApp('c5');
+        const { container } = renderWithShell(LayoutRenderer, { path: [99] });
+        await tick();
+        // LayoutRenderer renders nothing when path doesn't resolve — Svelte leaves
+        // a comment anchor node in the container but no visible content.
+        expect(container.querySelector('[data-view-for]')).toBeNull();
+        expect(container.querySelector('.leaf-slot-wrapper, .splitter, .tabbed-panel')).toBeNull();
+    });
+});

package/dist/layout/SlotContainer.svelte

@@ -51,7 +51,13 @@
   $effect(() => {
     if (!wrapper) return;
 
-    const host = acquireSlotHost(node.slotId, node.viewId, label || node.viewId || node.slotId);
+    // Capture slotId at effect-run time so the cleanup closure releases the
+    // correct slot even when node.slotId has already changed to a new value
+    // by the time Svelte calls the cleanup (which happens after reactive
+    // state has been updated). Without this capture, cleanup would call
+    // releaseSlotHost with the NEW slotId instead of the old one.
+    const currentSlotId = node.slotId;
+    const host = acquireSlotHost(currentSlotId, node.viewId, label || node.viewId || currentSlotId);
     wrapper.appendChild(host);
 
     // Local observer exists only to drive the placeholder's dims text;
@@ -67,7 +73,7 @@
 
     return () => {
       ro.disconnect();
-      releaseSlotHost(node.slotId);
+      releaseSlotHost(currentSlotId);
     };
   });
 </script>

package/dist/layout/SlotDropZone.svelte

@@ -99,6 +99,12 @@
   {#if hoveredSide}
     <div class="quad-highlight quad-{hoveredSide}"></div>
   {/if}
+  {#if active}
+    <div class="quad-target quad-left"   data-testid="drop-zone-left"></div>
+    <div class="quad-target quad-right"  data-testid="drop-zone-right"></div>
+    <div class="quad-target quad-top"    data-testid="drop-zone-top"></div>
+    <div class="quad-target quad-bottom" data-testid="drop-zone-bottom"></div>
+  {/if}
 </div>
 
 <style>
@@ -122,4 +128,17 @@
   .quad-highlight.quad-right  { top: 0; bottom: 0; left: 50%; right: 0; }
   .quad-highlight.quad-top    { left: 0; right: 0; top: 0; bottom: 50%; }
   .quad-highlight.quad-bottom { left: 0; right: 0; top: 50%; bottom: 0; }
+
+  /* Invisible hit-target overlays for each quadrant — present only during a
+     drag so they don't intercept normal pointer events. These give Playwright
+     (and pointer-based UI) a stable target area per side without relying on
+     the hover-driven highlight. */
+  .quad-target {
+    position: absolute;
+    pointer-events: none; /* the parent zone handles pointermove */
+  }
+  .quad-target.quad-left   { top: 0; bottom: 0; left: 0; right: 50%; }
+  .quad-target.quad-right  { top: 0; bottom: 0; left: 50%; right: 0; }
+  .quad-target.quad-top    { left: 0; right: 0; top: 0; bottom: 50%; }
+  .quad-target.quad-bottom { left: 0; right: 0; top: 50%; bottom: 0; }
 </style>

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

@@ -45,4 +45,9 @@ export declare function beginTabDrag(slotId: string, entry: TabEntry, sourceRoot
  */
 export declare function setDropTarget(target: DropTarget): void;
 export declare function clearDropTarget(match?: (target: DropTarget) => boolean): void;
+/**
+ * Test-only reset. Returns dragState to its idle initial value and
+ * removes any pointer listeners attached during a prior drag.
+ */
+export declare function __resetDragStateForTest(): void;
 export {};

package/dist/layout/drag.svelte.js

@@ -230,3 +230,18 @@ export function clearDropTarget(match) {
         return;
     dragState.target = null;
 }
+/**
+ * Test-only reset. Returns dragState to its idle initial value and
+ * removes any pointer listeners attached during a prior drag.
+ */
+export function __resetDragStateForTest() {
+    removeGlobalListeners();
+    dragState.phase = 'idle';
+    dragState.source = null;
+    dragState.target = null;
+    dragState.pointerX = 0;
+    dragState.pointerY = 0;
+    clickSuppressedUntil = 0;
+    pendingStartX = 0;
+    pendingStartY = 0;
+}

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

@@ -5,7 +5,7 @@ import type { ViewHandle } from '../shards/types';
  * the pool does not know which wrapper owns the host at any given time,
  * and that is intentional. The same host may be passed around.
  */
-export declare function acquireSlotHost(slotId: string, viewId: string | null, label: string): HTMLDivElement;
+export declare function acquireSlotHost(slotId: string, viewId: string | null, label: string, meta?: Record<string, unknown>): HTMLDivElement;
 /**
  * Release the pooled host. If this was the last reference, a
  * destruction is queued to run in a microtask; a later acquire before
@@ -34,3 +34,18 @@ export declare function isSlotDirty(slotId: string): boolean;
  * re-render when the deferred mount sets the flag.
  */
 export declare function isSlotClosable(slotId: string): boolean;
+/**
+ * Test-only: set the closable policy for a slot without going through a
+ * ViewFactory. Call BEFORE launchApp so the tab strip reads the right
+ * closable state when it renders.
+ *
+ * `true`  — tab shows a close button and is removed on click.
+ * `false` — tab shows no close button (non-closable).
+ */
+export declare function setSlotClosableForTest(slotId: string, closable: boolean): void;
+/**
+ * Test-only: attach a canClose guard to a slot. The slot must have been
+ * marked closable via `setSlotClosableForTest` first (or the guard will
+ * be installed alongside a `true` closable flag).
+ */
+export declare function setSlotCanCloseForTest(slotId: string, canClose: () => Promise<boolean>): void;