sh3-core 0.17.2 → 0.19.1

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

@@ -28,7 +28,7 @@
 </script>
 
 <div class="compact-body" data-sh3-region="compact-body">
-  <LayoutRenderer rootOverride={rendering.bodyRoot} />
+  <LayoutRenderer rootOverride={rendering.bodyRoot} carousels={rendering.carousels} />
 </div>
 
 {#each anchors as anchor (anchor)}

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

@@ -74,3 +74,52 @@ describe('CompactRenderer (dom)', () => {
         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.js

@@ -17,6 +17,7 @@
  * 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';
 }
@@ -151,5 +152,6 @@ export function derive(tree) {
             right: toSpec(buckets.right),
             top: toSpec(buckets.top),
         },
+        carousels: enrichCarousels(bodyRoot),
     };
 }

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

@@ -157,4 +157,41 @@ describe('derive', () => {
             expect((_a = result.drawers.left) === null || _a === void 0 ? void 0 : _a.slots.map((s) => s.slotId)).toEqual(['sb']);
         });
     });
+    describe('carousels', () => {
+        it('includes a carousels Map in the output', () => {
+            var _a;
+            const tree = {
+                type: 'tabs',
+                tabs: [{ slotId: 't0', viewId: null, label: 'Only', role: 'body' }],
+                activeTab: 0,
+            };
+            const out = derive(tree);
+            expect(out.carousels).toBeInstanceOf(Map);
+            expect(out.carousels.size).toBe(1);
+            expect((_a = out.carousels.get('')) === null || _a === void 0 ? void 0 : _a.activeLabel).toBe('Only');
+        });
+        it('carousels Map is empty when bodyRoot has no qualifying tabs', () => {
+            const tree = { type: 'slot', slotId: 's', viewId: null, role: 'body' };
+            const out = derive(tree);
+            expect(out.carousels.size).toBe(0);
+        });
+        it('detection runs against bodyRoot (post-stripNonBody), not the source tree', () => {
+            const tree = {
+                type: 'split',
+                direction: 'horizontal',
+                sizes: [0.3, 0.7],
+                children: [
+                    { type: 'slot', slotId: 'sb', viewId: null, role: 'sidebar' },
+                    {
+                        type: 'tabs',
+                        tabs: [{ slotId: 't0', viewId: null, label: 'Body Tab', role: 'body' }],
+                        activeTab: 0,
+                    },
+                ],
+            };
+            const out = derive(tree);
+            expect(out.carousels.size).toBe(1);
+            expect(out.carousels.get('')).toBeDefined();
+        });
+    });
 });

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

@@ -0,0 +1,8 @@
+import type { LayoutNode } from '../types';
+export type NodePath = string;
+export interface CarouselInfo {
+    wrap: boolean;
+    activeLabel: string;
+}
+export declare function pathKey(path: number[]): NodePath;
+export declare function enrichCarousels(root: LayoutNode): Map<NodePath, CarouselInfo>;

package/dist/layout/compact/enrichCarousels.js

@@ -0,0 +1,44 @@
+/*
+ * enrichCarousels — pure post-derive transform.
+ *
+ * Walks the compact bodyRoot (the body-only sub-tree returned by
+ * stripNonBody) and identifies every TabsNode whose horizontal extent
+ * equals the body container's full width. A TabsNode qualifies iff
+ * every ancestor split is vertical — any horizontal split anywhere
+ * above it disqualifies the node and everything beneath it.
+ *
+ * The output is a Map keyed by NodePath (dot-joined child indices)
+ * carrying { wrap, activeLabel } for the renderer + chrome breadcrumb.
+ *
+ * The walk does NOT descend into a TabsNode itself once it has been
+ * identified — tab children are slot/leaf content, not nested layout
+ * nodes that could themselves carouselize.
+ */
+export function pathKey(path) {
+    return path.join('.');
+}
+export function enrichCarousels(root) {
+    const out = new Map();
+    function walk(node, ancestorAllVertical, path) {
+        var _a, _b;
+        if (node.type === 'tabs') {
+            if (ancestorAllVertical) {
+                const active = node.tabs[node.activeTab];
+                out.set(pathKey(path), {
+                    wrap: (_a = node.wrap) !== null && _a !== void 0 ? _a : false,
+                    activeLabel: (_b = active === null || active === void 0 ? void 0 : active.label) !== null && _b !== void 0 ? _b : '',
+                });
+            }
+            return;
+        }
+        if (node.type === 'split') {
+            const next = ancestorAllVertical && node.direction === 'vertical';
+            for (let i = 0; i < node.children.length; i++) {
+                walk(node.children[i], next, [...path, i]);
+            }
+            return;
+        }
+    }
+    walk(root, true, []);
+    return out;
+}

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

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

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

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { enrichCarousels, pathKey } from './enrichCarousels';
+function slot(id) {
+    return { type: 'slot', slotId: id, viewId: null };
+}
+function tabs(labels, wrap) {
+    return Object.assign({ type: 'tabs', tabs: labels.map((l, i) => ({ slotId: `t${i}`, viewId: null, label: l })), activeTab: 0 }, (wrap !== undefined ? { wrap } : {}));
+}
+function vsplit(...children) {
+    return {
+        type: 'split',
+        direction: 'vertical',
+        sizes: children.map(() => 1),
+        children,
+    };
+}
+function hsplit(...children) {
+    return {
+        type: 'split',
+        direction: 'horizontal',
+        sizes: children.map(() => 1),
+        children,
+    };
+}
+describe('pathKey', () => {
+    it('joins indices with dots; empty path → empty string', () => {
+        expect(pathKey([])).toBe('');
+        expect(pathKey([0])).toBe('0');
+        expect(pathKey([1, 0, 2])).toBe('1.0.2');
+    });
+});
+describe('enrichCarousels', () => {
+    it('bodyRoot IS a tabs node → 1 carousel at root', () => {
+        const root = tabs(['A', 'B']);
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(1);
+        expect(out.get('')).toEqual({ wrap: false, activeLabel: 'A' });
+    });
+    it('vertical-split[slot, tabs] → 1 carousel at "1"', () => {
+        const root = vsplit(slot('s'), tabs(['X', 'Y']));
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(1);
+        expect(out.get('1')).toEqual({ wrap: false, activeLabel: 'X' });
+    });
+    it('vertical-split[tabs, vertical-split[tabs, slot]] → 2 carousels (stacked)', () => {
+        const inner = vsplit(tabs(['I0', 'I1']), slot('s'));
+        const root = vsplit(tabs(['T0']), inner);
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(2);
+        expect(out.get('0')).toEqual({ wrap: false, activeLabel: 'T0' });
+        expect(out.get('1.0')).toEqual({ wrap: false, activeLabel: 'I0' });
+    });
+    it('horizontal-split[tabs, slot] → 0 carousels (tabs is narrowed)', () => {
+        const root = hsplit(tabs(['A']), slot('s'));
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(0);
+    });
+    it('horizontal-split[tabs] (single child) → 0 carousels (any horizontal ancestor narrows)', () => {
+        const root = hsplit(tabs(['A']));
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(0);
+    });
+    it('vertical-split[slot, horizontal-split[tabs, slot]] → 0 (inner tabs has horizontal ancestor)', () => {
+        const root = vsplit(slot('s'), hsplit(tabs(['A']), slot('s2')));
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(0);
+    });
+    it('flows wrap=true through into the map', () => {
+        const root = vsplit(slot('s'), tabs(['X'], true));
+        const out = enrichCarousels(root);
+        expect(out.get('1')).toEqual({ wrap: true, activeLabel: 'X' });
+    });
+    it('reads activeLabel from the currently-active tab, not always the first', () => {
+        const t = tabs(['First', 'Second', 'Third']);
+        t.activeTab = 2;
+        const out = enrichCarousels(t);
+        expect(out.get('')).toEqual({ wrap: false, activeLabel: 'Third' });
+    });
+    it('does not recurse into the carousel\'s own children (a tabs node\'s tabs are not walked)', () => {
+        const root = tabs(['A']);
+        const out = enrichCarousels(root);
+        expect(out.size).toBe(1);
+    });
+    it('bare slot → 0 carousels', () => {
+        const out = enrichCarousels(slot('s'));
+        expect(out.size).toBe(0);
+    });
+});

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

@@ -1,4 +1,6 @@
 import type { LayoutNode, SlotNode, SlotRole } from '../types';
+import type { NodePath, CarouselInfo } from './enrichCarousels';
+export type { NodePath, CarouselInfo };
 export type DrawerAnchor = 'left' | 'right' | 'top';
 export interface DrawerSpec {
     slots: Array<{
@@ -16,6 +18,7 @@ export interface CompactRendering {
         right: DrawerSpec | null;
         top: DrawerSpec | null;
     };
+    carousels: Map<NodePath, CarouselInfo>;
 }
 export interface DrawerState {
     open: boolean;

package/dist/layout/drag.svelte.js

@@ -43,6 +43,8 @@
 import { cleanupTree, insertTabIntoTabs, moveTabWithinTabs, removeTabBySlotId, splitNodeAtPath, } from './ops';
 import { layoutStore } from './store.svelte';
 import { isEmptyContent } from './floats';
+import { claim, revoke } from '../gestures/pointerClaim';
+import { ancestorCount } from '../gestures';
 export const dragState = $state({
     phase: 'idle',
     source: null,
@@ -65,6 +67,7 @@ export function suppressNextClick() {
 const DRAG_THRESHOLD_PX = 4;
 let pendingStartX = 0;
 let pendingStartY = 0;
+let activeDragPointerId = null;
 /**
  * Begin a potential tab drag. Call from pointerdown on a tab element.
  * This does not yet enter the dragging phase — movement past the
@@ -73,6 +76,11 @@ let pendingStartY = 0;
 export function beginTabDrag(slotId, entry, sourceRoot, event, tabElement) {
     if (dragState.phase !== 'idle')
         return;
+    const depth = ancestorCount(tabElement);
+    const claimGranted = claim(event.pointerId, { ownerId: 'sh3:tabdrag', axis: 'xy', priority: 'normal', depth });
+    if (!claimGranted)
+        return;
+    activeDragPointerId = event.pointerId;
     const rect = tabElement.getBoundingClientRect();
     dragState.phase = 'pending';
     dragState.source = {
@@ -205,6 +213,10 @@ function commit() {
     autoCloseEmptyFloat(source.sourceRoot);
 }
 function teardown() {
+    if (activeDragPointerId !== null) {
+        revoke(activeDragPointerId, 'sh3:tabdrag');
+        activeDragPointerId = null;
+    }
     dragState.phase = 'idle';
     dragState.source = null;
     dragState.target = null;
@@ -244,4 +256,5 @@ export function __resetDragStateForTest() {
     clickSuppressedUntil = 0;
     pendingStartX = 0;
     pendingStartY = 0;
+    activeDragPointerId = null;
 }

package/dist/layout/store.schemaVersion.test.js

@@ -29,7 +29,7 @@ describe('layout schema v4 → v5 backward compatibility', () => {
         expect(slotA.role).toBeUndefined();
         expect(v4Blob.drawers).toBeUndefined();
     });
-    it('LAYOUT_SCHEMA_VERSION is 5', () => {
-        expect(LAYOUT_SCHEMA_VERSION).toBe(5);
+    it('LAYOUT_SCHEMA_VERSION is 6', () => {
+        expect(LAYOUT_SCHEMA_VERSION).toBe(6);
     });
 });

package/dist/layout/types.d.ts

@@ -89,6 +89,14 @@ export interface TabsNode {
      * Runtime-only — not serialized with the layout tree.
      */
     emptyRenderer?: (container: HTMLElement) => void;
+    /**
+     * When the framework renders this group as a compact-mode carousel,
+     * controls end-of-track behavior:
+     *   - false (default): edge-resist (rubber-band, snap back).
+     *   - true: warpback (swipe past last → first; past first → last).
+     * Inert when not rendered as a carousel.
+     */
+    wrap?: boolean;
 }
 /**
  * A leaf layout node that holds a single mounted view. `slotId` is the stable
@@ -207,7 +215,7 @@ export type TreeRootRef = {
  * the default tree takes over — phase 7 deliberately does not ship a
  * migration framework, only the hook for one.
  */
-export declare const LAYOUT_SCHEMA_VERSION = 5;
+export declare const LAYOUT_SCHEMA_VERSION = 6;
 /**
  * The wire shape of a persisted layout in the workspace state zone.
  * One blob per sh3 (or per program, once per-program layouts exist);

package/dist/layout/types.js

@@ -22,4 +22,4 @@
  * the default tree takes over — phase 7 deliberately does not ship a
  * migration framework, only the hook for one.
  */
-export const LAYOUT_SCHEMA_VERSION = 5;
+export const LAYOUT_SCHEMA_VERSION = 6;

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

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