sh3-core 0.19.1 → 0.19.5

package/dist/overlays/FloatFrame.svelte

@@ -35,6 +35,7 @@
   import { makeSelectionApi } from '../actions/selection.svelte';
   import { spawnSatellite } from '../sh3Api/window';
   import { walkShardsForContent } from '../satellite/walkShards';
+  import { logGesture } from '../gestures';
 
   const isTauri =
     typeof (globalThis as Record<string, unknown>).__TAURI_INTERNALS__ !== 'undefined';
@@ -64,8 +65,23 @@
 
   let dragging = $state(false);
   let dragOffset = { x: 0, y: 0 };
+  /**
+   * Pointer id of the active header drag (null when idle). All header-pointer
+   * handlers filter on this so a second finger / palm / stylus ghost touch
+   * landing on the same element cannot interfere with — or worse,
+   * `pointercancel` away — the primary drag.
+   *
+   * Previously this component used `setPointerCapture` on the header. On
+   * Android, transferring implicit capture from the original pointerdown
+   * target (a child span) to the header element fires `pointercancel` on
+   * the original target, which bubbled up to the `onpointercancel` handler
+   * here and ended the drag instantly. Switching to pointer-id tracking +
+   * implicit capture is the same fix the carousel landed (commit 638d75a).
+   */
+  let dragPointerId: number | null = null;
   let resizing = $state(false);
   let resizeStart = { pointer: { x: 0, y: 0 }, size: { w: 0, h: 0 }, min: { w: 0, h: 0 } };
+  let resizePointerId: number | null = null;
   let frameEl: HTMLDivElement | undefined = $state();
 
   const isMaximized = $derived(floatManager.isMaximized(entry.id));
@@ -99,20 +115,40 @@
     };
   });
 
+  // Remove any in-flight document-level pointer listeners if the float is
+  // closed mid-drag (e.g. the close button is hit, or the framework removes
+  // the float for another reason). Without this, dangling listeners on
+  // document would keep firing on the next pointermove and leak the
+  // closure references to the destroyed component.
+  $effect(() => {
+    return () => {
+      if (dragging) endHeaderDrag();
+      if (resizing) endGripResize();
+    };
+  });
+
   function onHeaderPointerDown(e: PointerEvent): void {
     if (e.button !== 0) return;
     if ((e.target as HTMLElement).closest('.sh3-float-close')) return;
     if ((e.target as HTMLElement).closest('.sh3-float-maximize')) return;
     if ((e.target as HTMLElement).closest('.sh3-float-popout')) return;
-    const target = e.currentTarget as HTMLElement;
-    target.setPointerCapture?.(e.pointerId);
+    if (dragging) return; // already mid-drag; second finger is ignored
     dragging = true;
+    dragPointerId = e.pointerId;
     dragOffset = { x: e.clientX - entry.position.x, y: e.clientY - entry.position.y };
     floatManager.focus(entry.id);
+    // Listen on document so the drag survives the pointer leaving the
+    // header. Mouse pointer capture is NOT implicit (touch is) — without
+    // these listeners, a fast mouse move that crosses the header edge
+    // would never deliver another pointermove and the drag would stall.
+    // The carousel uses the same pattern.
+    document.addEventListener('pointermove', onHeaderPointerMove);
+    document.addEventListener('pointerup', onHeaderPointerUp);
+    document.addEventListener('pointercancel', onHeaderPointerCancel);
   }
 
   function onHeaderPointerMove(e: PointerEvent): void {
-    if (!dragging) return;
+    if (!dragging || e.pointerId !== dragPointerId) return;
     // Implicit un-maximize on first drag movement (no-op if not maximized).
     // We unmaximize on move rather than pointerdown so a casual click —
     // which precedes a dblclick — does not destroy the saved prev rect
@@ -122,13 +158,30 @@
     entry.position.y = e.clientY - dragOffset.y;
   }
 
-  function onHeaderPointerUp(e: PointerEvent): void {
-    if (!dragging) return;
+  function endHeaderDrag(): void {
     dragging = false;
-    const target = e.currentTarget as HTMLElement;
-    if (target.hasPointerCapture?.(e.pointerId)) {
-      target.releasePointerCapture(e.pointerId);
+    dragPointerId = null;
+    document.removeEventListener('pointermove', onHeaderPointerMove);
+    document.removeEventListener('pointerup', onHeaderPointerUp);
+    document.removeEventListener('pointercancel', onHeaderPointerCancel);
+  }
+
+  function onHeaderPointerUp(e: PointerEvent): void {
+    if (!dragging || e.pointerId !== dragPointerId) return;
+    endHeaderDrag();
+  }
+
+  function onHeaderPointerCancel(e: PointerEvent): void {
+    // Only abort if the cancel is for OUR pointer. Without this filter, any
+    // ghost cancellation on the header (palm contact, a stylus touching
+    // while a finger drags, descendant losing implicit capture) would tear
+    // down the active drag — the touch-only auto-release symptom.
+    if (e.pointerId !== dragPointerId) {
+      logGesture('floatframe:cancel-other-id', e, { dragPointerId });
+      return;
     }
+    logGesture('floatframe:cancel-our-id', e, { dragPointerId });
+    endHeaderDrag();
   }
 
   function onHeaderDblClick(e: MouseEvent): void {
@@ -141,19 +194,22 @@
   function onGripPointerDown(e: PointerEvent): void {
     if (e.button !== 0) return;
     e.stopPropagation();
-    const target = e.currentTarget as HTMLElement;
-    target.setPointerCapture?.(e.pointerId);
+    if (resizing) return;
     resizing = true;
+    resizePointerId = e.pointerId;
     resizeStart = {
       pointer: { x: e.clientX, y: e.clientY },
       size: { w: entry.size.w, h: entry.size.h },
       min: computeMinSize(entry.content),
     };
     floatManager.focus(entry.id);
+    document.addEventListener('pointermove', onGripPointerMove);
+    document.addEventListener('pointerup', onGripPointerUp);
+    document.addEventListener('pointercancel', onGripPointerCancel);
   }
 
   function onGripPointerMove(e: PointerEvent): void {
-    if (!resizing) return;
+    if (!resizing || e.pointerId !== resizePointerId) return;
     floatManager.unmaximize(entry.id);
     const dx = e.clientX - resizeStart.pointer.x;
     const dy = e.clientY - resizeStart.pointer.y;
@@ -161,13 +217,26 @@
     entry.size.h = Math.max(resizeStart.min.h, resizeStart.size.h + dy);
   }
 
-  function onGripPointerUp(e: PointerEvent): void {
-    if (!resizing) return;
+  function endGripResize(): void {
     resizing = false;
-    const target = e.currentTarget as HTMLElement;
-    if (target.hasPointerCapture?.(e.pointerId)) {
-      target.releasePointerCapture(e.pointerId);
+    resizePointerId = null;
+    document.removeEventListener('pointermove', onGripPointerMove);
+    document.removeEventListener('pointerup', onGripPointerUp);
+    document.removeEventListener('pointercancel', onGripPointerCancel);
+  }
+
+  function onGripPointerUp(e: PointerEvent): void {
+    if (!resizing || e.pointerId !== resizePointerId) return;
+    endGripResize();
+  }
+
+  function onGripPointerCancel(e: PointerEvent): void {
+    if (e.pointerId !== resizePointerId) {
+      logGesture('floatframe-grip:cancel-other-id', e, { resizePointerId });
+      return;
     }
+    logGesture('floatframe-grip:cancel-our-id', e, { resizePointerId });
+    endGripResize();
   }
 
   function onFrameClick(): void {
@@ -226,9 +295,6 @@
       data-sh3-scope="element:float-header"
       data-float-id={entry.id}
       onpointerdown={onHeaderPointerDown}
-      onpointermove={onHeaderPointerMove}
-      onpointerup={onHeaderPointerUp}
-      onpointercancel={onHeaderPointerUp}
       ondblclick={onHeaderDblClick}
       oncontextmenu={openHeaderContextMenu}
     >
@@ -261,9 +327,6 @@
     role="presentation"
     aria-hidden="true"
     onpointerdown={onGripPointerDown}
-    onpointermove={onGripPointerMove}
-    onpointerup={onGripPointerUp}
-    onpointercancel={onGripPointerUp}
   ></div>
 </div>
 
@@ -291,6 +354,11 @@
     border-top-left-radius: var(--sh3-radius);
     border-top-right-radius: var(--sh3-radius);
     flex-shrink: 0;
+    /* Suppress browser-claimed touch gestures (pan / pinch) on the drag
+       handle. Without this, Android/iOS fire `pointercancel` as soon as the
+       finger moves past the system's scroll-claim threshold, killing the
+       header drag mid-pan. */
+    touch-action: none;
   }
   .sh3-float-title {
     font-size: 12px;
@@ -335,6 +403,9 @@
     width: 16px;
     height: 16px;
     cursor: nwse-resize;
+    /* Same rationale as the header: opt out of browser-claimed touch
+       gestures so the resize drag survives past the scroll-claim threshold. */
+    touch-action: none;
     /* Subtle visual hint without being obtrusive — two diagonal lines made
        from a CSS gradient stripe. */
     background:

package/dist/overlays/FloatLayer.svelte

@@ -7,14 +7,25 @@
 -->
 <script lang="ts">
   import { layoutStore } from '../layout/store.svelte';
+  import { viewportStore } from '../viewport/store.svelte';
   import FloatFrame from './FloatFrame.svelte';
 
   const floats = $derived(layoutStore.floats);
+  // In compact mode, non-dismissable floats are body-or-menu only — the
+  // compact-floats-menu design demotes them to the FloatsSheet so the
+  // user sees one root at a time. Dismissable pickers (anchored
+  // popovers) keep floating because they're transient.
+  const compact = $derived(viewportStore.current.class === 'compact');
+  function shouldRender(entry: { dismissable?: boolean }): boolean {
+    return !compact || entry.dismissable === true;
+  }
 </script>
 
 <div class="sh3-float-layer">
   {#each floats as entry, i (entry.id)}
-    <FloatFrame bind:entry={floats[i]} />
+    {#if shouldRender(entry)}
+      <FloatFrame bind:entry={floats[i]} />
+    {/if}
   {/each}
 </div>
 

package/dist/overlays/float.d.ts

@@ -74,6 +74,13 @@ export interface FloatManager {
  * Bind the manager to the active LayoutTree's `floats` array. Called
  * from Sh3.svelte during boot. `getBounds` returns the current
  * tree-allocated area for cascade-position wraparound.
+ *
+ * Persisted floats observed for the first time are pulled into the
+ * supplied viewport — without this, a float whose position/size came
+ * from a larger window renders past the overlay root, which Firefox
+ * paints by growing the parent and visibly shifts the docked grid.
+ * Ids already in `clampedIds` (re-bound on viewport-class swap, etc.)
+ * are left alone.
  */
 export declare function bindFloatStore(floats: FloatEntry[], getBounds: () => {
     w: number;

package/dist/overlays/float.js

@@ -26,21 +26,58 @@
  *   in-memory fallback array is used — this is both the test environment
  *   and the pre-boot state.
  */
-import { computeMinSize, cascadePosition, generateFloatId } from '../layout/floats';
+import { computeMinSize, cascadePosition, generateFloatId, clampFloatToViewport, } from '../layout/floats';
 import { findEnclosingOverlayHost } from './parentHost';
+import { compactRootStore } from '../layout/compact/rootStore.svelte';
+import { viewportStore } from '../viewport/store.svelte';
 import { setMaximizedReactive, readMaximizedReactive, __resetMaximizedReactiveForTest, } from './floatMaximized.svelte';
 // ----- storage binding ---------------------------------------------------
 let fallbackFloats = [];
 let boundFloats = null;
 let getTreeBounds = () => ({ w: 1600, h: 900 });
+/**
+ * Float ids that have already been pulled into the viewport — either at
+ * open() time, or on the bind that first observed them as persisted.
+ * Subsequent binds (viewport-class swap, preset switch back-and-forth)
+ * skip these so a user-positioned float isn't snapped on every re-bind.
+ *
+ * Ids are time+counter unique per session, so this set never confuses a
+ * recycled id; it grows for the lifetime of the session.
+ */
+const clampedIds = new Set();
+function clampFloatRect(entry, bounds) {
+    const minSize = computeMinSize(entry.content);
+    const clamped = clampFloatToViewport({ position: entry.position, size: entry.size }, minSize, bounds);
+    entry.position.x = clamped.position.x;
+    entry.position.y = clamped.position.y;
+    entry.size.w = clamped.size.w;
+    entry.size.h = clamped.size.h;
+}
 /**
  * Bind the manager to the active LayoutTree's `floats` array. Called
  * from Sh3.svelte during boot. `getBounds` returns the current
  * tree-allocated area for cascade-position wraparound.
+ *
+ * Persisted floats observed for the first time are pulled into the
+ * supplied viewport — without this, a float whose position/size came
+ * from a larger window renders past the overlay root, which Firefox
+ * paints by growing the parent and visibly shifts the docked grid.
+ * Ids already in `clampedIds` (re-bound on viewport-class swap, etc.)
+ * are left alone.
  */
 export function bindFloatStore(floats, getBounds) {
     boundFloats = floats;
     getTreeBounds = getBounds;
+    const bounds = getBounds();
+    for (const entry of floats) {
+        if (clampedIds.has(entry.id))
+            continue;
+        clampFloatRect(entry, bounds);
+        clampedIds.add(entry.id);
+    }
+    // Active tree changed (app/preset switch) — drop any compact body
+    // selection so the user lands on the new docked tree.
+    compactRootStore.reset();
 }
 export function unbindFloatStore() {
     boundFloats = null;
@@ -53,6 +90,7 @@ export function __resetFloatManagerForTest() {
     getTreeBounds = () => ({ w: 1600, h: 900 });
     parentHosts.clear();
     maximizedRects.clear();
+    clampedIds.clear();
     __resetMaximizedReactiveForTest();
 }
 function activeStore() {
@@ -80,8 +118,16 @@ function mintFloatSlotId(viewId) {
 }
 // ----- API ---------------------------------------------------------------
 const DEFAULT_SIZE = { w: 600, h: 400 };
-function maxSize(a, b) {
-    return { w: Math.max(a.w, b.w), h: Math.max(a.h, b.h) };
+/**
+ * The default opening size: prefer DEFAULT_SIZE, but cap each axis at
+ * the current viewport so phones don't get a 600×400 float on a 360×800
+ * screen. Never shrunk below the content's computed minimum.
+ */
+function defaultOpenSize(min, bounds) {
+    return {
+        w: Math.max(min.w, Math.min(DEFAULT_SIZE.w, bounds.w)),
+        h: Math.max(min.h, Math.min(DEFAULT_SIZE.h, bounds.h)),
+    };
 }
 function openFloat(viewId, options = {}) {
     var _a, _b, _c;
@@ -118,8 +164,9 @@ function openFloat(viewId, options = {}) {
         };
     }
     const computedMin = computeMinSize(content);
-    const size = (_b = options.size) !== null && _b !== void 0 ? _b : maxSize(DEFAULT_SIZE, computedMin);
-    const position = (_c = options.position) !== null && _c !== void 0 ? _c : cascadePosition(store, getTreeBounds());
+    const bounds = getTreeBounds();
+    const size = (_b = options.size) !== null && _b !== void 0 ? _b : defaultOpenSize(computedMin, bounds);
+    const position = (_c = options.position) !== null && _c !== void 0 ? _c : cascadePosition(store, bounds);
     const entry = {
         id,
         content,
@@ -134,14 +181,26 @@ function openFloat(viewId, options = {}) {
         if (host)
             parentHosts.set(id, host);
     }
+    // Pull the chosen rect into the current viewport (handles user-supplied
+    // off-screen positions and oversized user-supplied sizes).
+    clampFloatRect(entry, bounds);
+    // Mark already-clamped so the next bind doesn't snap it again.
+    clampedIds.add(id);
     store.push(entry);
+    // Compact mode demotes non-dismissable floats from overlays to body-or-menu;
+    // a fresh open auto-switches the body to the new float so the user actually
+    // sees what they just opened. Pickers stay floating per the design.
+    if (viewportStore.current.class === 'compact' && !options.dismissable) {
+        compactRootStore.setRoot({ kind: 'float', floatId: id });
+    }
     return id;
 }
 function openFloatWithContent(options) {
     var _a;
     const store = activeStore();
     const id = generateFloatId();
-    const position = (_a = options.position) !== null && _a !== void 0 ? _a : cascadePosition(store, getTreeBounds());
+    const bounds = getTreeBounds();
+    const position = (_a = options.position) !== null && _a !== void 0 ? _a : cascadePosition(store, bounds);
     const entry = {
         id,
         content: options.content,
@@ -149,7 +208,12 @@ function openFloatWithContent(options) {
         size: options.size,
         title: options.title,
     };
+    clampFloatRect(entry, bounds);
+    clampedIds.add(id);
     store.push(entry);
+    if (viewportStore.current.class === 'compact') {
+        compactRootStore.setRoot({ kind: 'float', floatId: id });
+    }
     return id;
 }
 function closeFloat(floatId) {
@@ -160,6 +224,12 @@ function closeFloat(floatId) {
     store.splice(idx, 1);
     parentHosts.delete(floatId);
     maximizedRects.delete(floatId);
+    // If this float was the compact body, snap back to docked.
+    const cur = compactRootStore.current;
+    if (cur.kind === 'float' && cur.floatId === floatId) {
+        compactRootStore.reset();
+    }
+    clampedIds.delete(floatId);
     setMaximizedReactive(floatId, false);
 }
 function listFloats() {

package/dist/overlays/float.test.js

@@ -80,6 +80,176 @@ describe('floatManager', () => {
         expect(f.content.type).toBe('tabs');
     });
 });
+describe('bindFloatStore — clamp persisted floats to viewport', () => {
+    beforeEach(() => {
+        __resetFloatManagerForTest();
+    });
+    it('pulls an off-screen persisted float back into the bound viewport', () => {
+        // Persisted state from a previous, larger viewport: x is past the
+        // current right edge, y is past the current bottom.
+        const floats = [
+            {
+                id: 'persisted-1',
+                content: {
+                    type: 'tabs',
+                    tabs: [{ slotId: 'float:v:1', viewId: 'v', label: 'V' }],
+                    activeTab: 0,
+                },
+                position: { x: 2400, y: 1800 },
+                size: { w: 600, h: 400 },
+            },
+        ];
+        bindFloatStore(floats, () => ({ w: 1024, h: 768 }));
+        expect(floats[0].position.x).toBe(1024 - 600);
+        expect(floats[0].position.y).toBe(768 - 400);
+        expect(floats[0].size).toEqual({ w: 600, h: 400 });
+    });
+    it('shrinks an oversized persisted float to fit the bound viewport', () => {
+        const floats = [
+            {
+                id: 'persisted-2',
+                content: {
+                    type: 'tabs',
+                    tabs: [{ slotId: 'float:v:2', viewId: 'v', label: 'V' }],
+                    activeTab: 0,
+                },
+                position: { x: 0, y: 0 },
+                size: { w: 4000, h: 3000 },
+            },
+        ];
+        bindFloatStore(floats, () => ({ w: 1024, h: 768 }));
+        expect(floats[0].size).toEqual({ w: 1024, h: 768 });
+    });
+    it('leaves a float that already fits unchanged', () => {
+        const floats = [
+            {
+                id: 'persisted-3',
+                content: {
+                    type: 'tabs',
+                    tabs: [{ slotId: 'float:v:3', viewId: 'v', label: 'V' }],
+                    activeTab: 0,
+                },
+                position: { x: 100, y: 200 },
+                size: { w: 600, h: 400 },
+            },
+        ];
+        bindFloatStore(floats, () => ({ w: 1024, h: 768 }));
+        expect(floats[0].position).toEqual({ x: 100, y: 200 });
+        expect(floats[0].size).toEqual({ w: 600, h: 400 });
+    });
+    it('does not re-clamp a float on subsequent binds (e.g. viewport-class swap)', () => {
+        // Simulate a user-positioned float that's outside a smaller viewport.
+        // First bind clamps it; the user then moves it back to (700, 200);
+        // a second bind (compact ↔ desktop) must not snap it again.
+        const floats = [
+            {
+                id: 'persisted-4',
+                content: {
+                    type: 'tabs',
+                    tabs: [{ slotId: 'float:v:4', viewId: 'v', label: 'V' }],
+                    activeTab: 0,
+                },
+                position: { x: 2400, y: 0 },
+                size: { w: 600, h: 400 },
+            },
+        ];
+        bindFloatStore(floats, () => ({ w: 1024, h: 768 }));
+        // User drags it back to an out-of-bounds spot (allowed mid-session).
+        floats[0].position.x = 2400;
+        floats[0].position.y = 1800;
+        bindFloatStore(floats, () => ({ w: 1024, h: 768 }));
+        expect(floats[0].position).toEqual({ x: 2400, y: 1800 });
+    });
+});
+describe('floatManager.open — default size respects viewport', () => {
+    beforeEach(() => {
+        __resetFloatManagerForTest();
+    });
+    it('caps the default size at viewport bounds (phone-sized window)', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        const id = floatManager.open('test:view', { title: 'Phone' });
+        const f = floatManager.list().find((e) => e.id === id);
+        expect(f.size.w).toBeLessThanOrEqual(360);
+        expect(f.size.h).toBeLessThanOrEqual(740);
+        // And the float is fully on-screen.
+        expect(f.position.x + f.size.w).toBeLessThanOrEqual(360);
+        expect(f.position.y + f.size.h).toBeLessThanOrEqual(740);
+    });
+    it('uses DEFAULT_SIZE when the viewport is large enough', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 1280, h: 800 }));
+        const id = floatManager.open('test:view', { title: 'Desktop' });
+        const f = floatManager.list().find((e) => e.id === id);
+        expect(f.size).toEqual({ w: 600, h: 400 });
+    });
+    it('clamps a user-supplied oversized size to viewport on open', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        const id = floatManager.open('test:view', {
+            title: 'Phone',
+            size: { w: 2000, h: 2000 },
+        });
+        const f = floatManager.list().find((e) => e.id === id);
+        expect(f.size).toEqual({ w: 360, h: 740 });
+    });
+});
+// ---------------------------------------------------------------------------
+// Compact body-root integration: floatManager auto-switches in compact mode,
+// resets on close-of-current and on bind.
+// ---------------------------------------------------------------------------
+import { compactRootStore, __resetCompactRootStoreForTest, } from '../layout/compact/rootStore.svelte';
+import { viewportStore } from '../viewport/store.svelte';
+describe('floatManager — compact body root integration', () => {
+    beforeEach(() => {
+        __resetFloatManagerForTest();
+        __resetCompactRootStoreForTest();
+        viewportStore.override(null);
+    });
+    afterEach(() => {
+        viewportStore.override(null);
+    });
+    it('open() in compact mode switches the body to the new (non-dismissable) float', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        viewportStore.override('compact');
+        const id = floatManager.open('test:view', { title: 'Notes' });
+        expect(compactRootStore.current).toEqual({ kind: 'float', floatId: id });
+    });
+    it('open() in compact mode does NOT switch the body for dismissable pickers', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        viewportStore.override('compact');
+        floatManager.open('picker:view', { dismissable: true });
+        expect(compactRootStore.current).toEqual({ kind: 'docked' });
+    });
+    it('open() on desktop does not touch the compact body root', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 1280, h: 800 }));
+        viewportStore.override('desktop');
+        floatManager.open('test:view');
+        expect(compactRootStore.current).toEqual({ kind: 'docked' });
+    });
+    it('close(id) resets when the closed float is the current body', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        viewportStore.override('compact');
+        const id = floatManager.open('test:view');
+        floatManager.close(id);
+        expect(compactRootStore.current).toEqual({ kind: 'docked' });
+    });
+    it('close(id) leaves the body root alone when closing a different float', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        viewportStore.override('compact');
+        floatManager.open('view:a');
+        const b = floatManager.open('view:b');
+        expect(compactRootStore.current).toEqual({ kind: 'float', floatId: b });
+        floatManager.close(layoutStore.floats[0].id);
+        expect(compactRootStore.current).toEqual({ kind: 'float', floatId: b });
+    });
+    it('bindFloatStore resets the body root (covers app/preset switch)', () => {
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+        viewportStore.override('compact');
+        const id = floatManager.open('test:view');
+        expect(compactRootStore.current).toEqual({ kind: 'float', floatId: id });
+        // Re-bind (e.g. preset switch).
+        bindFloatStore([], () => ({ w: 360, h: 740 }));
+        expect(compactRootStore.current).toEqual({ kind: 'docked' });
+    });
+});
 describe('floatManager — anchor-aware parent host', () => {
     beforeEach(() => {
         __resetFloatManagerForTest();

package/dist/primitives/ResizableSplitter.svelte

@@ -20,7 +20,7 @@
   import type { Snippet } from 'svelte';
   import type { SizeMode, SplitDirection } from '../layout/types';
   import { claim, revoke } from '../gestures/pointerClaim';
-  import { ancestorCount } from '../gestures';
+  import { ancestorCount, logGesture } from '../gestures';
 
   const MIN_PX = 40;
   const COLLAPSED_PX = 28;
@@ -128,7 +128,16 @@
     activeDragPointerId = e.pointerId;
 
     e.preventDefault();
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    // Document-level listeners (not element-level attributes) so the drag
+    // survives the pointer leaving the handle. Mouse pointer capture is
+    // not implicit; without document listeners, a fast mouse move past
+    // the handle edge stops delivering pointermove. setPointerCapture
+    // would work for mouse but reintroduces the Android pointercancel
+    // bug (see CarouselTabs commit 638d75a). document listeners avoid
+    // both pitfalls — same pattern the carousel uses.
+    document.addEventListener('pointermove', moveDrag);
+    document.addEventListener('pointerup', endDrag);
+    document.addEventListener('pointercancel', cancelDrag);
 
     const rect = container.getBoundingClientRect();
     const containerPx = direction === 'horizontal' ? rect.width : rect.height;
@@ -154,6 +163,7 @@
 
   function moveDrag(e: PointerEvent) {
     if (!drag) return;
+    if (e.pointerId !== activeDragPointerId) return;
     const client = direction === 'horizontal' ? e.clientX : e.clientY;
     const deltaPx = client - drag.startClient;
 
@@ -203,15 +213,42 @@
     }
   }
 
-  function endDrag(e: PointerEvent) {
-    if (!drag) return;
-    (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+  function teardownDrag(): void {
     if (activeDragPointerId !== null) {
       revoke(activeDragPointerId, 'sh3:splitter');
       activeDragPointerId = null;
     }
     drag = null;
+    document.removeEventListener('pointermove', moveDrag);
+    document.removeEventListener('pointerup', endDrag);
+    document.removeEventListener('pointercancel', cancelDrag);
+  }
+
+  function endDrag(e: PointerEvent) {
+    if (!drag) return;
+    if (e.pointerId !== activeDragPointerId) return;
+    teardownDrag();
   }
+
+  function cancelDrag(e: PointerEvent) {
+    // Filter so a ghost pointercancel for an unrelated pointer (palm, stylus,
+    // second finger on multi-touch) doesn't abort the active resize.
+    if (!drag) return;
+    if (e.pointerId !== activeDragPointerId) {
+      logGesture('splitter:cancel-other-id', e, { activeDragPointerId });
+      return;
+    }
+    logGesture('splitter:cancel-our-id', e, { activeDragPointerId });
+    teardownDrag();
+  }
+
+  // If the splitter unmounts mid-drag, remove the document listeners and
+  // release the claim so the next component doesn't see a leaked pointer.
+  $effect(() => {
+    return () => {
+      if (drag) teardownDrag();
+    };
+  });
 </script>
 
 <div
@@ -281,9 +318,6 @@
         class:frozen={isHandleFrozen(i)}
         data-testid="splitter-handle-{i}"
         onpointerdown={(e) => beginDrag(e, i)}
-        onpointermove={moveDrag}
-        onpointerup={endDrag}
-        onpointercancel={endDrag}
         ondblclick={() => {
           if (isHandleFrozen(i)) return;
           if (!canCollapse(i) && !isCollapsed(i)) return;