sh3-core 0.19.1 → 0.19.3

package/dist/layout/compact/CarouselTabs.svelte

@@ -19,7 +19,7 @@
   import SlotContainer from '../SlotContainer.svelte';
   import SlotDropZone from '../SlotDropZone.svelte';
   import { claim, revoke, isOwner } from '../../gestures/pointerClaim';
-  import { ancestorCount } from '../../gestures';
+  import { ancestorCount, EDGE_PX, logGesture } from '../../gestures';
 
   let {
     node,
@@ -62,6 +62,27 @@
   let dragging = $state(false);
   let claimed = $state(false);
   let activePointerId: number | null = null;
+  /**
+   * Set to true when the pointer-down landed inside the left/right edge
+   * gutter. Gutter-initiated drags get the "invincible" treatment: once
+   * the axis-lock threshold is crossed we explicitly call
+   * `setPointerCapture` on the carousel container so the descendant the
+   * touch originally landed on (textarea, scroll region, preview canvas
+   * — see the earlier `cancel-our-id` log targets) no longer receives the
+   * pointer stream and therefore cannot fire `pointercancel` to abort us.
+   *
+   * Mid-track drags don't get capture — the documented contract is that
+   * a descendant claiming the gesture there wins.
+   */
+  let startedInGutter = false;
+  /**
+   * Soft window (`performance.now()` deadline) during which a single
+   * `pointercancel` is treated as the synthetic Android transfer-cancel
+   * that fires when `setPointerCapture` moves implicit capture from a
+   * descendant up to the container. Without this filter, the carousel's
+   * own capture call would immediately abort itself.
+   */
+  let ignoreCancelUntil = 0;
 
   type PointerSnapshot = { id: number; x: number; y: number; t: number };
   let downSnap: PointerSnapshot | null = null;
@@ -72,6 +93,16 @@
   const COMMIT_FRACTION = 0.4;
   const COMMIT_VELOCITY = 500;
   const RUBBER_BAND_MAX_FRACTION = 0.3;
+  /** Window (ms) during which the post-transfer pointercancel is swallowed. */
+  const TRANSFER_CANCEL_WINDOW_MS = 100;
+
+  function dbg(label: string, ev: PointerEvent | null): void {
+    logGesture(`carousel:${label}`, ev, {
+      claimed,
+      dragging,
+      downId: downSnap?.id,
+    });
+  }
   /**
    * If the pointer takes longer than this to cross the axis-lock threshold,
    * treat the gesture as text-selection intent (slow drag over text) and
@@ -80,16 +111,45 @@
    */
   const SLOW_DRAG_TIMEOUT_MS = 250;
 
+  /**
+   * True only when an ancestor has scrollable horizontal overflow that
+   * *actually* overflows. `overflow-x: auto` on a wrapper that doesn't
+   * exceed its clientWidth used to disqualify every swipe inside it — a
+   * common false positive for body views that set `overflow: auto` to get
+   * vertical scrolling. We now also require `scrollWidth > clientWidth`
+   * so only genuinely scrollable regions block the carousel.
+   */
   function hasNativeHorizontalScroll(target: EventTarget | null): boolean {
     let el = target as HTMLElement | null;
     while (el && el !== containerEl) {
       const ox = getComputedStyle(el).overflowX;
-      if (ox === 'auto' || ox === 'scroll') return true;
+      if ((ox === 'auto' || ox === 'scroll') && el.scrollWidth > el.clientWidth) {
+        return true;
+      }
       el = el.parentElement;
     }
     return false;
   }
 
+  /**
+   * True when the pointer-down x sits in the left or right EDGE_PX strip of
+   * the carousel container. Edge-gutter pointer-downs claim the swipe
+   * regardless of editable-target or native-horizontal-scroll content
+   * underneath — the gutter is documented as an unconditional swipe
+   * initiation zone. Without this, any input or `overflow: auto` region
+   * touching the edge silently kills edge swipes.
+   */
+  function isInEdgeGutter(clientX: number): boolean {
+    if (!containerEl || containerWidth === 0) return false;
+    // rect.left for the offset, containerWidth (reactive, ResizeObserver-fed)
+    // for the width — getBoundingClientRect().width is 0 under happy-dom and
+    // similar non-layout DOMs, while containerWidth is seeded from the
+    // ResizeObserver path used everywhere else in this component.
+    const rect = containerEl.getBoundingClientRect();
+    const local = clientX - rect.left;
+    return local < EDGE_PX || local > containerWidth - EDGE_PX;
+  }
+
   function isEditableTarget(target: EventTarget | null): boolean {
     const el = target as HTMLElement | null;
     if (!el || typeof el.tagName !== 'string') return false;
@@ -118,16 +178,28 @@
   }
 
   function onPointerDown(ev: PointerEvent) {
-    if (isEditableTarget(ev.target)) return;
-    if (hasNativeHorizontalScroll(ev.target)) return;
+    // Structural bails — apply regardless of where the touch lands. Without
+    // these the carousel can't even set up a meaningful gesture.
     if (tabCount < 2) return;
     if (containerWidth === 0) return;
     // Multi-touch (pinch-zoom etc.) is not a swipe — bail.
     if (ev.isPrimary === false) return;
+    // Edge gutter override: pointer-downs in the left/right EDGE_PX strip
+    // claim the swipe unconditionally. This is the published invariant for
+    // edge initiation; bailing here would re-introduce the bug where any
+    // editable target or overflow-auto wrapper sitting near the screen edge
+    // silently kills the gesture.
+    const inGutter = isInEdgeGutter(ev.clientX);
+    if (!inGutter) {
+      if (isEditableTarget(ev.target)) return;
+      if (hasNativeHorizontalScroll(ev.target)) return;
+    }
     const depth = containerEl ? ancestorCount(containerEl) : 0;
     const claimGranted = claim(ev.pointerId, { ownerId: 'sh3:carousel', axis: 'x', priority: 'normal', depth });
     if (!claimGranted) return;
     activePointerId = ev.pointerId;
+    startedInGutter = inGutter;
+    ignoreCancelUntil = 0;
     downSnap = { id: ev.pointerId, x: ev.clientX, y: ev.clientY, t: performance.now() };
     lastSnap = { ...downSnap };
     dragging = false;
@@ -140,7 +212,11 @@
 
   function onPointerMove(ev: PointerEvent) {
     if (!downSnap || ev.pointerId !== downSnap.id) return;
-    if (!isOwner(ev.pointerId, 'sh3:carousel')) { endGesture(); return; }
+    if (!isOwner(ev.pointerId, 'sh3:carousel')) {
+      dbg('claim-stolen', ev);
+      endGesture();
+      return;
+    }
     const dx = ev.clientX - downSnap.x;
     const dy = ev.clientY - downSnap.y;
     if (!claimed) {
@@ -159,12 +235,29 @@
       if (!horizDominates) return;
       claimed = true;
       dragging = true;
-      // Don't call setPointerCapture: transferring capture from a
-      // descendant that had implicit capture (a button the finger
-      // touched) makes Android fire pointercancel on the original
-      // target, which our document-level cancel listener would then
-      // treat as an abort. The pointercancel-aborts-no-commit logic
-      // is enough on its own to fix the auto-commit bug.
+      // Gutter-initiated drags get the "invincible" guarantee: transfer
+      // implicit pointer capture from the descendant the touch landed on
+      // (a TEXTAREA, scroll region, etc.) up to the carousel container so
+      // those descendants can no longer fire pointercancel mid-pan. The
+      // transfer itself fires one synthetic pointercancel on Android (see
+      // CarouselTabs commit 638d75a for the original incident); the
+      // ignoreCancelUntil window below swallows just that one cancel —
+      // every other cancel still aborts as before.
+      //
+      // Mid-track drags intentionally skip this: the contract there is
+      // that a descendant claiming the gesture wins, matching the
+      // "carousel aborts if it's caught by an inner element" behavior
+      // the rest of the bail logic already encodes.
+      if (startedInGutter && containerEl) {
+        try {
+          containerEl.setPointerCapture(ev.pointerId);
+          ignoreCancelUntil = performance.now() + TRANSFER_CANCEL_WINDOW_MS;
+        } catch {
+          // setPointerCapture can throw if the pointer is no longer
+          // active (race with platform-level cancel). Safe to swallow —
+          // the gesture will run on implicit capture as before.
+        }
+      }
       // Clear any selection that began during the pre-claim window so
       // it doesn't visually streak across the slide while dragging.
       if (typeof window !== 'undefined') {
@@ -177,8 +270,14 @@
   }
 
   function onPointerUp(ev: PointerEvent) {
-    if (!downSnap || ev.pointerId !== downSnap.id) {
-      endGesture();
+    if (!downSnap) return;
+    // Filter by pointer id. A pointerup for a different pointer (e.g. a
+    // second finger lifting, a stylus releasing while a finger drag is
+    // active, or a phantom multi-pointer) must NOT tear down our gesture —
+    // earlier behavior here was to call endGesture() on any unrelated
+    // pointerup, which dropped legitimate drags on multi-touch devices.
+    if (ev.pointerId !== downSnap.id) {
+      dbg('pointerup-other-id', ev);
       return;
     }
     const dx = ev.clientX - downSnap.x;
@@ -198,12 +297,47 @@
    * mid-drag would be read as a release at the current dx and trip
    * the commit threshold, "auto-completing" the swipe with the
    * finger still down.
+   *
+   * MUST filter by pointer id. The previous unconditional implementation
+   * meant any pointercancel — palm contact, ghost touches, a stylus
+   * cancellation while a finger drag was active — terminated the carousel
+   * gesture. That's the most likely cause of "drag releases mid-pan on
+   * some screens" reports.
    */
-  function onPointerCancel(_ev: PointerEvent) {
+  function onPointerCancel(ev: PointerEvent) {
+    if (!downSnap) return;
+    if (ev.pointerId !== downSnap.id) {
+      dbg('cancel-other-id', ev);
+      return;
+    }
+    // Single-shot swallow for the synthetic Android transfer-cancel that
+    // fires right after we call `setPointerCapture` on a gutter swipe.
+    // Clear the deadline once consumed so a real cancel later in the same
+    // gesture still aborts normally.
+    if (performance.now() < ignoreCancelUntil) {
+      dbg('cancel-ignored-transfer', ev);
+      ignoreCancelUntil = 0;
+      return;
+    }
+    dbg('cancel-our-id', ev);
     endGesture();
   }
 
   function endGesture() {
+    // Release explicit pointer capture if we acquired it for a gutter
+    // swipe. Browsers auto-release on pointerup/cancel, but doing it
+    // defensively here keeps the container's `hasPointerCapture` state
+    // clean if endGesture is called from a path that didn't naturally
+    // release (claim-stolen, unmount, etc.).
+    if (startedInGutter && containerEl && activePointerId !== null) {
+      try {
+        if (containerEl.hasPointerCapture?.(activePointerId)) {
+          containerEl.releasePointerCapture(activePointerId);
+        }
+      } catch {
+        // Defensive — happy-dom / older browsers may not implement it.
+      }
+    }
     if (activePointerId !== null) {
       revoke(activePointerId, 'sh3:carousel');
       activePointerId = null;
@@ -216,6 +350,8 @@
     dragging = false;
     claimed = false;
     dragDelta = 0;
+    startedInGutter = false;
+    ignoreCancelUntil = 0;
   }
 
   function commitOrSnap(dx: number, velocity: number) {

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

@@ -202,25 +202,32 @@ describe('CarouselTabs (gestures)', () => {
         flushSync();
         expect(node.activeTab).toBe(0);
     });
-    it('pointerdown inside an overflow-x:scroll element does not initiate a swipe', () => {
+    it('pointerdown inside an overflow-x:scroll element with actual horizontal overflow 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';
+        Object.defineProperty(scroller, 'scrollWidth', { value: 1000, configurable: true });
+        Object.defineProperty(scroller, 'clientWidth', { value: 200, configurable: true });
         slide.appendChild(scroller);
+        // Pointer-down in the center (x=250 < 276 right-gutter boundary).
+        // dx=-170 would commit if the bail were absent, so a passing test
+        // genuinely proves the gesture never started.
         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', () => {
+    it('pointerdown inside an overflow-x:auto element with actual horizontal overflow 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';
+        Object.defineProperty(scroller, 'scrollWidth', { value: 1000, configurable: true });
+        Object.defineProperty(scroller, 'clientWidth', { value: 200, configurable: true });
         slide.appendChild(scroller);
         scroller.dispatchEvent(fakePointer('pointerdown', 250, 100));
         document.dispatchEvent(fakePointer('pointermove', 80, 100));
@@ -228,6 +235,25 @@ describe('CarouselTabs (gestures)', () => {
         flushSync();
         expect(node.activeTab).toBe(0);
     });
+    it('overflow-x:auto with no actual horizontal overflow does NOT block the swipe', () => {
+        // The common false-positive: a body view sets `overflow: auto` to get
+        // vertical scrolling; the resolved overflow-x is `auto` even though the
+        // content fits horizontally. Previously this killed every carousel swipe
+        // initiated inside the body. With the scrollWidth>clientWidth tightening,
+        // only genuinely scrollable regions block.
+        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 = 'auto';
+        // scrollWidth / clientWidth default to 0 in happy-dom — no actual overflow.
+        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 inside an overflow-x:hidden element still allows swipe', () => {
         const node = makeNode(['A', 'B', 'C'], 0);
         mountCarousel({ node, wrap: false });
@@ -267,6 +293,200 @@ describe('CarouselTabs (gestures)', () => {
         expect(track.classList.contains('sh3-carousel-track--dragging')).toBe(false);
     });
 });
+describe('CarouselTabs — multi-pointer filter', () => {
+    // The carousel attaches its pointermove / pointerup / pointercancel
+    // listeners on `document`, so any pointer's events for those types
+    // reach our handler. Without filtering by pointer id, an unrelated
+    // pointer's release or cancel (palm contact, second finger, stylus
+    // ghost) would tear down a legitimate drag.
+    it('pointercancel for a DIFFERENT pointer id does not abort the active drag', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        // Drag with pointer id 1.
+        track.dispatchEvent(fakePointer('pointerdown', 250, 100, 1));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100, 1));
+        document.dispatchEvent(fakePointer('pointermove', 100, 100, 1));
+        // A different pointer (id 2) is cancelled — must NOT end our gesture.
+        document.dispatchEvent(fakePointer('pointercancel', 0, 0, 2));
+        // Our pointer keeps going past the commit threshold and releases.
+        document.dispatchEvent(fakePointer('pointermove', 80, 100, 1));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100, 1));
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('pointerup for a DIFFERENT pointer id does not end the active drag', () => {
+        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, 1));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100, 1));
+        document.dispatchEvent(fakePointer('pointermove', 100, 100, 1));
+        // A different pointer (id 2) is released — must NOT end our gesture.
+        document.dispatchEvent(fakePointer('pointerup', 0, 0, 2));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100, 1));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100, 1));
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('pointercancel for OUR pointer id still aborts', () => {
+        // Sanity check — the existing abort-on-cancel behavior is preserved
+        // when the cancellation is for our active pointer.
+        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, 1));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100, 1));
+        document.dispatchEvent(fakePointer('pointermove', 100, 100, 1));
+        document.dispatchEvent(fakePointer('pointercancel', 100, 100, 1));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+});
+describe('CarouselTabs — edge gutter invariant', () => {
+    // EDGE_PX = 24. Container is 300px wide. Left gutter: x < 24.
+    // Right gutter: x > 276.
+    it('left-edge pointer-down initiates a swipe even on an editable target', () => {
+        // Without the gutter override, an <input> sitting under the finger at
+        // the screen edge would silently swallow the drag (isEditableTarget bail).
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelectorAll('[data-sh3-slide]')[1];
+        const input = document.createElement('input');
+        slide.appendChild(input);
+        // x=10 — inside left edge gutter. Swipe right → previous tab.
+        input.dispatchEvent(fakePointer('pointerdown', 10, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100));
+        document.dispatchEvent(fakePointer('pointerup', 200, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('right-edge pointer-down initiates a swipe even inside an overflow-x:auto region with real overflow', () => {
+        const node = makeNode(['A', 'B', 'C'], 0);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelectorAll('[data-sh3-slide]')[0];
+        const scroller = document.createElement('div');
+        scroller.style.overflowX = 'auto';
+        Object.defineProperty(scroller, 'scrollWidth', { value: 1000, configurable: true });
+        Object.defineProperty(scroller, 'clientWidth', { value: 200, configurable: true });
+        slide.appendChild(scroller);
+        // x=290 — inside right edge gutter (300 - 24 = 276). Swipe left → next tab.
+        scroller.dispatchEvent(fakePointer('pointerdown', 290, 100));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointerup', 80, 100));
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('left-edge pointer-down on a contenteditable still initiates a swipe', () => {
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const slide = host.querySelectorAll('[data-sh3-slide]')[1];
+        const editable = document.createElement('div');
+        editable.setAttribute('contenteditable', 'true');
+        slide.appendChild(editable);
+        editable.dispatchEvent(fakePointer('pointerdown', 5, 100));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100));
+        document.dispatchEvent(fakePointer('pointermove', 200, 100));
+        document.dispatchEvent(fakePointer('pointerup', 200, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('gutter pointer-down: transfers pointer capture to the carousel container on threshold-cross', () => {
+        // Concrete proof that the "invincible gutter" mechanism actually fires:
+        // once horizontal dominance is established on a gutter-initiated drag,
+        // setPointerCapture must be called on the carousel container so the
+        // descendant the touch landed on no longer receives the pointer stream.
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const carousel = host.querySelector('.sh3-carousel');
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        let captured = null;
+        carousel.setPointerCapture = (id) => { captured = id; };
+        carousel.hasPointerCapture = (id) => captured === id;
+        carousel.releasePointerCapture = (id) => { if (captured === id)
+            captured = null; };
+        track.dispatchEvent(fakePointer('pointerdown', 10, 100, 7)); // left gutter
+        document.dispatchEvent(fakePointer('pointermove', 80, 100, 7)); // crosses threshold
+        expect(captured).toBe(7);
+    });
+    it('mid-track pointer-down: does NOT transfer pointer capture (contract preserved)', () => {
+        // The "invincible" treatment is scoped to the gutter on purpose. Inside
+        // the slide, the existing rule still holds: descendants can claim and
+        // the carousel aborts.
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const carousel = host.querySelector('.sh3-carousel');
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        let captured = null;
+        carousel.setPointerCapture = (id) => { captured = id; };
+        carousel.hasPointerCapture = (id) => captured === id;
+        carousel.releasePointerCapture = (id) => { if (captured === id)
+            captured = null; };
+        track.dispatchEvent(fakePointer('pointerdown', 150, 100, 7)); // center, not gutter
+        document.dispatchEvent(fakePointer('pointermove', 80, 100, 7));
+        expect(captured).toBeNull();
+    });
+    it('gutter swipe: a pointercancel within the transfer window is swallowed, drag continues', () => {
+        // Synthetic Android-style "transfer cancel": setPointerCapture on the
+        // container fires a pointercancel on the original target. Without the
+        // ignoreCancelUntil window, that cancel would abort the very drag the
+        // gutter just guaranteed.
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const carousel = host.querySelector('.sh3-carousel');
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        carousel.setPointerCapture = () => { };
+        carousel.hasPointerCapture = () => false;
+        carousel.releasePointerCapture = () => { };
+        track.dispatchEvent(fakePointer('pointerdown', 10, 100, 9)); // left gutter
+        document.dispatchEvent(fakePointer('pointermove', 80, 100, 9)); // crosses threshold → capture armed
+        // Transfer cancel — should be swallowed:
+        document.dispatchEvent(fakePointer('pointercancel', 80, 100, 9));
+        // Drag continues rightward; with starting activeTab=1, rightward swipe
+        // (positive dx) goes to previous tab (activeTab=0).
+        document.dispatchEvent(fakePointer('pointermove', 200, 100, 9));
+        document.dispatchEvent(fakePointer('pointerup', 200, 100, 9));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+    it('gutter swipe: only the FIRST cancel within the window is swallowed; a second cancel aborts', () => {
+        // Defensive: the swallow is single-shot. After one cancel the window
+        // closes so a subsequent real cancel still aborts the drag.
+        const node = makeNode(['A', 'B', 'C'], 1);
+        mountCarousel({ node, wrap: false });
+        const carousel = host.querySelector('.sh3-carousel');
+        const track = host.querySelector('[data-sh3-carousel-track]');
+        carousel.setPointerCapture = () => { };
+        carousel.hasPointerCapture = () => false;
+        carousel.releasePointerCapture = () => { };
+        track.dispatchEvent(fakePointer('pointerdown', 10, 100, 11));
+        document.dispatchEvent(fakePointer('pointermove', 80, 100, 11)); // claim, arm window
+        document.dispatchEvent(fakePointer('pointercancel', 80, 100, 11)); // swallow
+        document.dispatchEvent(fakePointer('pointercancel', 80, 100, 11)); // abort
+        // Subsequent move/up should now be ignored:
+        document.dispatchEvent(fakePointer('pointermove', 200, 100, 11));
+        document.dispatchEvent(fakePointer('pointerup', 200, 100, 11));
+        flushSync();
+        expect(node.activeTab).toBe(1);
+    });
+    it('center pointer-down on the same editable target still bails (gutter is not the whole carousel)', () => {
+        // Sanity check: the override is scoped to the edge zones only —
+        // mid-track pointer-downs on inputs continue to focus the input.
+        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);
+        // x=150 — mid-track, not in either gutter.
+        input.dispatchEvent(fakePointer('pointerdown', 150, 100));
+        document.dispatchEvent(fakePointer('pointermove', 30, 100));
+        document.dispatchEvent(fakePointer('pointerup', 30, 100));
+        flushSync();
+        expect(node.activeTab).toBe(0);
+    });
+});
 describe('CarouselTabs — PointerClaim integration', () => {
     it('does not start gesture when pointer is already claimed by an app', () => {
         const node = makeNode(['A', 'B'], 0);

package/dist/layout/compact/CompactRenderer.svelte

@@ -11,7 +11,7 @@
    * 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
+   * reads slot.role / tabs.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).
    */

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

@@ -81,9 +81,10 @@ describe('CompactRenderer — carousels', () => {
             initialLayout: {
                 type: 'tabs',
                 activeTab: 0,
+                role: 'body',
                 tabs: [
-                    { slotId: 's0', viewId: null, label: 'A', role: 'body' },
-                    { slotId: 's1', viewId: null, label: 'B', role: 'body' },
+                    { slotId: 's0', viewId: null, label: 'A' },
+                    { slotId: 's1', viewId: null, label: 'B' },
                 ],
             },
         };
@@ -107,7 +108,8 @@ describe('CompactRenderer — carousels', () => {
                     {
                         type: 'tabs',
                         activeTab: 0,
-                        tabs: [{ slotId: 'l0', viewId: null, label: 'L', role: 'body' }],
+                        role: 'body',
+                        tabs: [{ slotId: 'l0', viewId: null, label: 'L' }],
                     },
                     { type: 'slot', slotId: 'r', viewId: null, role: 'body' },
                 ],

package/dist/layout/compact/derive.js

@@ -11,7 +11,7 @@
  * 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
+ * Note: this transform reads slot.role / tabs.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.
@@ -36,7 +36,7 @@ function collectSlots(node) {
             viewId: t.viewId,
             label: t.label,
             icon: t.icon,
-            role: effectiveRole(t.role),
+            role: effectiveRole(node.role),
         }));
     }
     return node.children.flatMap(collectSlots);
@@ -49,16 +49,7 @@ function stripNonBody(node) {
         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,
-        };
+        return effectiveRole(node.role) === 'body' ? node : null;
     }
     // split
     const survivors = [];
@@ -95,11 +86,11 @@ function partitionDrawers(node) {
             return;
         }
         if (n.type === 'tabs') {
+            const role = effectiveRole(n.role);
+            if (role === 'body')
+                return;
+            const anchor = hint !== null && hint !== void 0 ? hint : defaultAnchor(role);
             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,
                 });