@solidrt/components 0.0.46 → 0.0.47

package/AGENTS.md

@@ -46,9 +46,11 @@ Most components group props into two objects, plus top-level event handlers:
 - `ScrollView` - scrollable region; vertical by default, `horizontal` to flip.
   Wheel + drag (a pan recognizer: activates on slop along the scroll axis and
   steals the pointer from a pressable the drag started on), no momentum yet.
-  Backed by `createScroll` from `@solidrt/core` (headless offset+clamp
-  geometry) and the internal `createPan`/arena (arena.ts, pan.ts, press.ts:
-  per-pointer claims, innermost press wins, pan steals on slop).
+  Backed by `createScroll` and `createPan` from `@solidrt/core` (headless
+  offset+clamp geometry; the recognizers and their gesture arena live in core
+  so every package arbitrates in the one app-wide arena). The press
+  recognizer (press.ts) stays in this package: per-pointer claims, innermost
+  press wins, pan steals on slop.
 - `Pressable` - pressable box; `onPress` on a primary press released inside,
   `disabled` opts out. `children`/`style` can be functions of `{ pressed,
   hovered }`. Press retention: a drag out retracts the pressed state, a drag

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.31",
-    "@solidrt/core": "0.0.46"
+    "@solidrt/core": "0.0.47"
   }
 }

package/src/press.ts

@@ -1,6 +1,5 @@
-import { createSignal, createMemo, onSettled, focusedNode, getBoundingBoxViewport } from "@solidrt/core"
+import { arena, createSignal, createMemo, onSettled, focusedNode, getBoundingBoxViewport } from "@solidrt/core"
 import type { PointerEvent, KeyEvent } from "@solidrt/core"
-import { claim, release } from "./arena"
 import { registerNavAction } from "./focus-nav"
 
 // A live view of a recognizer's state, not a snapshot: the fields are getters,
@@ -46,8 +45,9 @@ export interface PressOptions {
 // ref also registers onPress as the node's nav action, the path a
 // controller's south button activates through (see focus-nav.ts). Key
 // activation shows no pressed state - the focus ring is the feedback.
-// Deliberately framework-agnostic (no theme, no styling): a candidate for
-// promotion into core once the recognizer family grows
+// The arena and the movement recognizers (createPan, createTransform) live in
+// core; press stays here because it couples to this package's focus-nav
+// (registerNavAction) and nothing outside components needs it yet
 // (okf/plans/component-gestures.md).
 export function createPress(options: PressOptions) {
   let [pressed, setPressed] = createSignal(false)
@@ -107,7 +107,7 @@ export function createPress(options: PressOptions) {
 
   let disengage = () => {
     if (active != null) {
-      release(active, owner)
+      arena.release(active, owner)
       active = null
     }
   }
@@ -127,7 +127,7 @@ export function createPress(options: PressOptions) {
   let handlers = {
     onPointerDown: (e: PointerEvent) => {
       if (e.button != null && e.button !== 0) return
-      if (active == null && claim(e.pointerId, owner)) {
+      if (active == null && arena.claim(e.pointerId, owner)) {
         active = e.pointerId
         inside = true
         setPressed(true)

package/src/scroll-view.tsx

@@ -1,6 +1,5 @@
-import { createScroll } from "@solidrt/core"
+import { createPan, createScroll } from "@solidrt/core"
 import type { LayoutProps, PointerProps, WheelEvent } from "@solidrt/core"
-import { createPan } from "./pan"
 import type { StyleProps } from "./types"
 
 export interface ScrollViewProps extends PointerProps {

package/src/slider.tsx

@@ -1,6 +1,5 @@
-import { createSignal, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
+import { arena, createSignal, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
-import { release, steal } from "./arena"
 import { theme } from "./theme"
 import { densityScale } from "./policy"
 import type { StyleProps } from "./types"
@@ -71,7 +70,7 @@ export function Slider(props: SliderProps) {
 
   let endDrag = () => {
     if (active != null) {
-      release(active, owner)
+      arena.release(active, owner)
       active = null
     }
   }
@@ -84,7 +83,7 @@ export function Slider(props: SliderProps) {
     if (props.disabled || active != null) return
     // A down on the track is unambiguously a slider drag: resolve the arena
     // outright so an ancestor scroller's pan cannot take the pointer over.
-    steal(e.pointerId, owner)
+    arena.steal(e.pointerId, owner)
     active = e.pointerId
     setFromClientX(e.clientX)
   }

package/src/arena.ts

@@ -1,58 +0,0 @@
-// The gesture arena: per-pointer ownership arbitration between recognizers.
-// Raw pointer events keep bubbling along the frozen down path regardless; the
-// arena only decides which recognizer's gesture a pointer belongs to.
-//
-// Two claim strengths mirror how gestures resolve. A press claims its pointer
-// provisionally on the down: it is the presumed winner (innermost-wins falls
-// out of leaf-to-root dispatch, first claim sticks) but a later recognizer
-// with positive evidence of a different gesture (a pan crossing its movement
-// slop) may steal the pointer, cancelling the press. A steal resolves the
-// arena: the pointer is won outright and cannot be stolen again, so e.g. the
-// outer axis of two nested scrollers cannot take a drag the inner one already
-// owns. Plain state on purpose: claims must be visible across recognizers
-// within one synchronous bubble dispatch, before any signal flush.
-//
-// Deliberately framework-agnostic (no theme, no styling, no components): a
-// candidate for promotion into core along with the recognizers
-// (okf/plans/component-gestures.md).
-
-export type ArenaOwner = {
-  /** Retract the gesture without firing; invoked when the pointer is stolen. */
-  cancel(): void
-}
-
-type Claim = { owner: ArenaOwner; resolved: boolean }
-
-let claims = new Map<number, Claim>()
-
-/**
- * Provisionally claim an unowned pointer. Returns false (claim refused) when
- * any recognizer already owns it. The claim is stealable until the owner
- * releases it or a steal resolves the arena.
- */
-export function claim(pointerId: number, owner: ArenaOwner): boolean {
-  if (claims.has(pointerId)) return false
-  claims.set(pointerId, { owner, resolved: false })
-  return true
-}
-
-/**
- * Take the pointer on positive evidence of a gesture, cancelling the current
- * provisional owner (if any), and resolve the arena: the resulting claim
- * cannot be stolen. Returns false when the arena is already resolved, in
- * which case the caller lost and must stand down.
- */
-export function steal(pointerId: number, owner: ArenaOwner): boolean {
-  let current = claims.get(pointerId)
-  if (current) {
-    if (current.resolved) return false
-    current.owner.cancel()
-  }
-  claims.set(pointerId, { owner, resolved: true })
-  return true
-}
-
-/** Release the claim on a pointer, if `owner` still holds it. */
-export function release(pointerId: number, owner: ArenaOwner): void {
-  if (claims.get(pointerId)?.owner === owner) claims.delete(pointerId)
-}

package/src/pan.ts

@@ -1,105 +0,0 @@
-import { onSettled } from "@solidrt/core"
-import type { PointerEvent } from "@solidrt/core"
-import { release, steal } from "./arena"
-
-// Movement in logical pixels before a pan activates. Below this a drag still
-// reads as a press (tap wiggle); crossing it is the positive evidence that the
-// gesture is a pan, at which point the pan steals the pointer in the arena.
-const PAN_SLOP = 8
-
-export type PanAxis = "vertical" | "horizontal" | "both"
-
-export interface PanOptions {
-  /**
-   * Which movement direction activates the pan. Slop is axis-aware: a
-   * "vertical" pan only activates once vertical travel crosses the threshold,
-   * so nested cross-axis scrollers each take only drags along their own axis.
-   * Default "both" (straight-line distance).
-   */
-  axis?: PanAxis
-  onPanStart?: () => void
-  /** Pointer movement since the previous event; positive dx is rightward, positive dy downward. */
-  onPanMove?: (dx: number, dy: number) => void
-  onPanEnd?: () => void
-}
-
-// The pan recognizer: turns a drag into a movement-delta stream. On a down it
-// arms and starts measuring; when travel from the down point crosses the slop
-// along the enabled axis it activates, stealing the pointer in the arena (a
-// press that provisionally owned it is cancelled - its feedback retracts) and
-// resolving it so no other recognizer can take the drag over. If the arena is
-// already resolved (an inner pan won first) the recognizer disarms and stays
-// out. The slop distance itself is swallowed: deltas stream from the
-// activation point on. Moves and the up arrive on the frozen down path, so an
-// active pan keeps streaming when the pointer leaves the node or the window.
-// cancel() is the external-cancel hook; it ends an active pan without
-// onPanEnd. Options are read at event time. Deliberately framework-agnostic:
-// a candidate for promotion into core (okf/plans/component-gestures.md).
-export function createPan(options: PanOptions) {
-  // Down position while armed; last delivered position while active.
-  let origin: { x: number; y: number } | null = null
-  let active: number | null = null
-  let armed: number | null = null
-
-  let past = (e: PointerEvent) => {
-    if (!origin) return false
-    let dx = Math.abs(e.clientX - origin.x)
-    let dy = Math.abs(e.clientY - origin.y)
-    let axis = options.axis ?? "both"
-    if (axis === "vertical") return dy >= PAN_SLOP
-    if (axis === "horizontal") return dx >= PAN_SLOP
-    return dx * dx + dy * dy >= PAN_SLOP * PAN_SLOP
-  }
-
-  let reset = () => {
-    if (active != null) {
-      release(active, owner)
-      active = null
-    }
-    armed = null
-    origin = null
-  }
-  let cancel = reset
-  let owner = { cancel }
-
-  // An unmount mid-drag must not leave a resolved claim behind.
-  onSettled(() => reset)
-
-  let handlers = {
-    onPointerDown: (e: PointerEvent) => {
-      if (e.button != null && e.button !== 0) return
-      if (armed == null && active == null) {
-        armed = e.pointerId
-        origin = { x: e.clientX, y: e.clientY }
-      }
-    },
-    onPointerMove: (e: PointerEvent) => {
-      if (armed === e.pointerId && past(e)) {
-        if (steal(e.pointerId, owner)) {
-          active = e.pointerId
-          armed = null
-          origin = { x: e.clientX, y: e.clientY }
-          options.onPanStart?.()
-        } else {
-          // The arena is resolved against us; the drag belongs elsewhere.
-          reset()
-        }
-        return
-      }
-      if (active === e.pointerId && origin) {
-        options.onPanMove?.(e.clientX - origin.x, e.clientY - origin.y)
-        origin = { x: e.clientX, y: e.clientY }
-      }
-    },
-    onPointerUp: (e: PointerEvent) => {
-      if (active === e.pointerId) {
-        reset()
-        options.onPanEnd?.()
-      } else if (armed === e.pointerId) {
-        reset()
-      }
-    },
-  }
-
-  return { handlers, cancel }
-}