sh3-core 0.17.2 → 0.19.0

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

@@ -8,6 +8,18 @@ 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';
+import { viewportStore } from '../viewport/store.svelte';
+// Chromium under vitest-browser runs in a 414×n viewport, which the
+// auto-classifier reads as compact. These tests exercise desktop-only
+// splitter behavior (drag, double-click collapse, collapse widget
+// presence) — pin desktop in setup so the new ResizableSplitter compact
+// gate doesn't suppress what they're asserting.
+function setupDesktop() {
+    cleanupDOM();
+    resetFramework();
+    viewportStore.__reset();
+    viewportStore.override('desktop');
+}
 // ---------------------------------------------------------------------------
 // Utilities
 // ---------------------------------------------------------------------------
@@ -163,7 +175,7 @@ describe('LayoutRenderer browser — E.2 drag tab to quadrant', () => {
 // E.3 — splitter drag updates sizes
 // ---------------------------------------------------------------------------
 describe('LayoutRenderer browser — E.3 splitter drag', () => {
-    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    beforeEach(setupDesktop);
     it('updates split.sizes when the splitter handle is dragged', async () => {
         stubView();
         registerApp(makeApp({
@@ -248,7 +260,7 @@ describe('LayoutRenderer browser — E.4 close policy', () => {
 // E.5 — double-click splitter toggles collapse
 // ---------------------------------------------------------------------------
 describe('LayoutRenderer browser — E.5 splitter collapse toggle', () => {
-    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    beforeEach(setupDesktop);
     it('toggles collapsed[i] on double-click', async () => {
         var _a;
         stubView();
@@ -276,7 +288,7 @@ describe('LayoutRenderer browser — E.5 splitter collapse toggle', () => {
 // E.6 — fixed[] slots: no collapse widget, frozen handles
 // ---------------------------------------------------------------------------
 describe('LayoutRenderer browser — E.6 fixed slots', () => {
-    beforeEach(() => { cleanupDOM(); resetFramework(); });
+    beforeEach(setupDesktop);
     it('hides the collapse widget on a fixed pane but keeps it on panes with a non-fixed neighbor', async () => {
         stubView();
         registerApp(makeApp({

package/dist/layout/LayoutRenderer.svelte

@@ -28,10 +28,13 @@
 
   import type { TabsNode, LayoutNode, TreeRootRef } from './types';
   import ResizableSplitter from '../primitives/ResizableSplitter.svelte';
+  import { viewportStore } from '../viewport/store.svelte';
   import TabbedPanel, { type TabDragController } from '../primitives/TabbedPanel.svelte';
   import SlotContainer from './SlotContainer.svelte';
   import SlotDropZone from './SlotDropZone.svelte';
   import Self from './LayoutRenderer.svelte';
+  import CarouselTabs from './compact/CarouselTabs.svelte';
+  import { pathKey, type NodePath, type CarouselInfo } from './compact/enrichCarousels';
   import { layoutStore } from './store.svelte';
   import { nodeAtPath } from './ops';
   import { isSlotClosable, isSlotDirty } from './slotHostPool.svelte';
@@ -48,7 +51,13 @@
     path = [],
     rootRef = { kind: 'docked' } as TreeRootRef,
     rootOverride,
-  }: { path?: number[]; rootRef?: TreeRootRef; rootOverride?: LayoutNode } = $props();
+    carousels,
+  }: {
+    path?: number[];
+    rootRef?: TreeRootRef;
+    rootOverride?: LayoutNode;
+    carousels?: Map<NodePath, CarouselInfo>;
+  } = $props();
 
   /**
    * Resolve the current node by walking `layoutStore.root` along the
@@ -183,6 +192,7 @@
       fixed={split.fixed}
       count={split.children.length}
       pane={splitPane}
+      compact={viewportStore.current.class === 'compact'}
       onResize={(i, v) => (split.sizes[i] = v)}
       onCollapseToggle={(i, v) => {
         if (!split.collapsed) split.collapsed = split.children.map(() => false);
@@ -190,11 +200,14 @@
       }}
     />
     {#snippet splitPane(i: number)}
-      <Self {rootRef} path={[...path, i]} />
+      <Self {rootRef} path={[...path, i]} {rootOverride} {carousels} />
     {/snippet}
   {:else if node.type === 'tabs'}
     {@const tabs = asTabs(node)}
-    {#if tabs && tabs.tabs.length > 0}
+    {@const carouselInfo = carousels?.get(pathKey(path))}
+    {#if carouselInfo && tabs && tabs.tabs.length > 0}
+      <CarouselTabs node={tabs} wrap={carouselInfo.wrap} {rootRef} {path} />
+    {:else if tabs && tabs.tabs.length > 0}
       {@const controller = makeController(tabs)}
       <TabbedPanel
         labels={tabs.tabs.map((t) => t.label)}

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

@@ -1,8 +1,10 @@
 import type { LayoutNode, TreeRootRef } from './types';
+import { type NodePath, type CarouselInfo } from './compact/enrichCarousels';
 type $$ComponentProps = {
     path?: number[];
     rootRef?: TreeRootRef;
     rootOverride?: LayoutNode;
+    carousels?: Map<NodePath, CarouselInfo>;
 };
 declare const LayoutRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type LayoutRenderer = ReturnType<typeof LayoutRenderer>;

package/dist/layout/compact/CarouselTabs.svelte

@@ -0,0 +1,361 @@
+<script lang="ts">
+  /*
+   * CarouselTabs — compact-mode rendering for a TabsNode that the
+   * framework has classified as full-width-in-bodyRoot.
+   *
+   * Renders a horizontal track containing one slide per tab (each slide
+   * is the carousel's full width). All slides stay mounted to match
+   * existing TabsNode background-mount semantics. activeTab is read
+   * from the node and committed via direct mutation (the same pattern
+   * the standard tab strip uses today — see LayoutRenderer.svelte).
+   *
+   * Pager dots render at the bottom for multi-tab carousels. Single-tab
+   * carousels render the slide only (no dots, no gesture meaning).
+   *
+   * Gestures (Task 5) attach to the track element and use PointerEvents
+   * with axis lock + commit threshold + edge-resist or wrap.
+   */
+  import type { TabsNode, TabEntry, TreeRootRef } from '../types';
+  import SlotContainer from '../SlotContainer.svelte';
+  import SlotDropZone from '../SlotDropZone.svelte';
+  import { claim, revoke } from '../../gestures/pointerClaim';
+  import { ancestorCount } from '../../gestures';
+
+  let {
+    node,
+    wrap,
+    rootRef = { kind: 'docked' } as TreeRootRef,
+    path = [] as number[],
+  }: {
+    node: TabsNode;
+    wrap: boolean;
+    rootRef?: TreeRootRef;
+    path?: number[];
+  } = $props();
+
+  let containerEl = $state<HTMLElement | null>(null);
+  let containerWidth = $state(0);
+
+  $effect(() => {
+    if (!containerEl) return;
+    // Seed width immediately — happy-dom and similar non-layout DOMs
+    // may never deliver a ResizeObserver entry.
+    const initialRect = containerEl.getBoundingClientRect();
+    if (initialRect.width > 0) {
+      containerWidth = initialRect.width;
+    } else if (containerEl.parentElement) {
+      const parentRect = containerEl.parentElement.getBoundingClientRect();
+      if (parentRect.width > 0) containerWidth = parentRect.width;
+    }
+    const ro = new ResizeObserver((entries) => {
+      for (const e of entries) containerWidth = e.contentRect.width;
+    });
+    ro.observe(containerEl);
+    return () => ro.disconnect();
+  });
+
+  const tabCount = $derived(node.tabs.length);
+  const showDots = $derived(tabCount > 1);
+
+  // ---- Gesture state ----
+  let dragDelta = $state(0);
+  let dragging = $state(false);
+  let claimed = $state(false);
+  let activePointerId: number | null = null;
+
+  type PointerSnapshot = { id: number; x: number; y: number; t: number };
+  let downSnap: PointerSnapshot | null = null;
+  let lastSnap: PointerSnapshot | null = null;
+
+  const AXIS_LOCK_DOMINANCE = 1.2;
+  const AXIS_LOCK_MIN_DX = 6;
+  const COMMIT_FRACTION = 0.4;
+  const COMMIT_VELOCITY = 500;
+  const RUBBER_BAND_MAX_FRACTION = 0.3;
+  /**
+   * 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
+   * release control back to the platform. A swipe-intent gesture always
+   * crosses 6px well within 250ms.
+   */
+  const SLOW_DRAG_TIMEOUT_MS = 250;
+
+  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;
+      el = el.parentElement;
+    }
+    return false;
+  }
+
+  function isEditableTarget(target: EventTarget | null): boolean {
+    const el = target as HTMLElement | null;
+    if (!el || typeof el.tagName !== 'string') return false;
+    const tag = el.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+    // `isContentEditable` reflects the rendered state; closest('[contenteditable]')
+    // catches the authored attribute even before the browser computes it.
+    if (el.isContentEditable === true) return true;
+    const ce = el.closest?.('[contenteditable=""], [contenteditable="true"]');
+    return ce !== null && ce !== undefined;
+  }
+
+  function rubberBand(d: number, width: number): number {
+    if (width === 0) return 0;
+    const max = width * RUBBER_BAND_MAX_FRACTION;
+    return Math.sign(d) * max * (1 - Math.exp(-Math.abs(d) / max));
+  }
+
+  function clampedDragDelta(rawDx: number): number {
+    if (!wrap) {
+      const atFirst = node.activeTab === 0 && rawDx > 0;
+      const atLast = node.activeTab === tabCount - 1 && rawDx < 0;
+      if (atFirst || atLast) return rubberBand(rawDx, containerWidth);
+    }
+    return rawDx;
+  }
+
+  function onPointerDown(ev: PointerEvent) {
+    if (isEditableTarget(ev.target)) return;
+    if (hasNativeHorizontalScroll(ev.target)) return;
+    if (tabCount < 2) return;
+    if (containerWidth === 0) return;
+    // Multi-touch (pinch-zoom etc.) is not a swipe — bail.
+    if (ev.isPrimary === false) return;
+    const depth = containerEl ? ancestorCount(containerEl) : 0;
+    const claimGranted = claim(ev.pointerId, { ownerId: 'sh3:carousel', axis: 'x', priority: 'edge', depth });
+    if (!claimGranted) return;
+    activePointerId = ev.pointerId;
+    downSnap = { id: ev.pointerId, x: ev.clientX, y: ev.clientY, t: performance.now() };
+    lastSnap = { ...downSnap };
+    dragging = false;
+    claimed = false;
+    dragDelta = 0;
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerCancel);
+  }
+
+  function onPointerMove(ev: PointerEvent) {
+    if (!downSnap || ev.pointerId !== downSnap.id) return;
+    const dx = ev.clientX - downSnap.x;
+    const dy = ev.clientY - downSnap.y;
+    if (!claimed) {
+      const elapsed = performance.now() - downSnap.t;
+      const horizDominates = Math.abs(dx) > Math.abs(dy) * AXIS_LOCK_DOMINANCE && Math.abs(dx) > AXIS_LOCK_MIN_DX;
+      const vertDominates = Math.abs(dy) > Math.abs(dx) * AXIS_LOCK_DOMINANCE && Math.abs(dy) > AXIS_LOCK_MIN_DX;
+      if (vertDominates) {
+        endGesture();
+        return;
+      }
+      const movedPastThreshold = Math.abs(dx) > AXIS_LOCK_MIN_DX || Math.abs(dy) > AXIS_LOCK_MIN_DX;
+      if (movedPastThreshold && elapsed > SLOW_DRAG_TIMEOUT_MS) {
+        endGesture();
+        return;
+      }
+      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.
+      // 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') {
+        window.getSelection()?.removeAllRanges();
+      }
+    }
+    if (typeof ev.preventDefault === 'function') ev.preventDefault();
+    dragDelta = clampedDragDelta(dx);
+    lastSnap = { id: ev.pointerId, x: ev.clientX, y: ev.clientY, t: performance.now() };
+  }
+
+  function onPointerUp(ev: PointerEvent) {
+    if (!downSnap || ev.pointerId !== downSnap.id) {
+      endGesture();
+      return;
+    }
+    const dx = ev.clientX - downSnap.x;
+    let velocity = 0;
+    if (lastSnap && lastSnap.t !== downSnap.t) {
+      velocity = (ev.clientX - lastSnap.x) / Math.max(1, performance.now() - lastSnap.t) * 1000;
+    }
+    commitOrSnap(dx, velocity);
+    endGesture();
+  }
+
+  /**
+   * Pointer cancellation differs from release: the platform (or a
+   * descendant element claiming a competing gesture) revoked the
+   * pointer. Treat as abort — never commit. Without this distinction,
+   * a button or scroll region inside a slide that fires pointercancel
+   * 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.
+   */
+  function onPointerCancel(_ev: PointerEvent) {
+    endGesture();
+  }
+
+  function endGesture() {
+    if (activePointerId !== null) {
+      revoke(activePointerId, 'sh3:carousel');
+      activePointerId = null;
+    }
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerCancel);
+    downSnap = null;
+    lastSnap = null;
+    dragging = false;
+    claimed = false;
+    dragDelta = 0;
+  }
+
+  function commitOrSnap(dx: number, velocity: number) {
+    if (!claimed || containerWidth === 0) return;
+    const distancePassed = Math.abs(dx) > containerWidth * COMMIT_FRACTION;
+    const velocityPassed = Math.abs(velocity) > COMMIT_VELOCITY;
+    if (!(distancePassed || velocityPassed)) return;
+
+    const direction = dx < 0 ? +1 : -1;
+    let next = node.activeTab + direction;
+    if (next < 0) {
+      if (wrap) next = tabCount - 1;
+      else return;
+    } else if (next >= tabCount) {
+      if (wrap) next = 0;
+      else return;
+    }
+    node.activeTab = next;
+  }
+
+  const trackTransform = $derived.by(() => {
+    if (containerWidth === 0) return 'translateX(0px)';
+    return `translateX(${-node.activeTab * containerWidth + dragDelta}px)`;
+  });
+
+  const trackTransition = $derived(dragging ? 'none' : '');
+
+  function entryKey(entry: TabEntry): string {
+    return entry.slotId;
+  }
+</script>
+
+<div
+  class="sh3-carousel"
+  data-sh3-region="carousel"
+  bind:this={containerEl}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="sh3-carousel-track"
+    class:sh3-carousel-track--dragging={dragging}
+    data-sh3-carousel-track
+    style="transform: {trackTransform}; width: {tabCount * 100}%; {trackTransition ? `transition: ${trackTransition};` : ''}"
+    onpointerdown={onPointerDown}
+  >
+    {#each node.tabs as entry, i (entryKey(entry))}
+      <div
+        class="sh3-carousel-slide"
+        data-sh3-slide
+        data-sh3-slide-index={i}
+        style="width: {containerWidth}px;"
+      >
+        <SlotContainer
+          node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }}
+          label={entry.label}
+          meta={entry.meta}
+        />
+        <SlotDropZone {rootRef} path={path} />
+      </div>
+    {/each}
+  </div>
+
+  {#if showDots}
+    <div class="sh3-carousel-pager" data-sh3-pager>
+      {#each node.tabs as _entry, i (`dot-${i}`)}
+        <span
+          class="sh3-carousel-dot"
+          class:sh3-carousel-dot--active={i === node.activeTab}
+          data-sh3-pager-dot
+          aria-current={i === node.activeTab ? 'true' : undefined}
+        ></span>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sh3-carousel {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    touch-action: pan-y;
+  }
+
+  .sh3-carousel-track {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: row;
+    transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
+    will-change: transform;
+  }
+  /*
+   * While a horizontal drag is claimed, suppress selection on the slide
+   * content. user-select cascades to descendants, so this covers the
+   * whole carousel content. Inputs/textareas/contenteditables are not
+   * captured at all (see isEditableTarget in the script), so they are
+   * never inside a claimed drag.
+   */
+  .sh3-carousel-track--dragging {
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: grabbing;
+  }
+
+  .sh3-carousel-slide {
+    position: relative;
+    flex: 0 0 auto;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .sh3-carousel-pager {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: var(--sh3-pad-md);
+    display: flex;
+    justify-content: center;
+    gap: var(--sh3-pad-sm);
+    pointer-events: none;
+  }
+
+  .sh3-carousel-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--sh3-fg-muted);
+    opacity: 0.5;
+    transition: opacity 120ms, transform 120ms;
+  }
+  .sh3-carousel-dot--active {
+    opacity: 1;
+    transform: scale(1.4);
+    background: var(--sh3-fg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sh3-carousel-track {
+      transition: none;
+    }
+  }
+</style>

package/dist/layout/compact/CarouselTabs.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { TabsNode, TreeRootRef } from '../types';
+type $$ComponentProps = {
+    node: TabsNode;
+    wrap: boolean;
+    rootRef?: TreeRootRef;
+    path?: number[];
+};
+declare const CarouselTabs: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselTabs = ReturnType<typeof CarouselTabs>;
+export default CarouselTabs;

package/dist/layout/compact/CarouselTabs.svelte.test.d.ts

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