@solidrt/components 0.0.35 → 0.0.36

package/AGENTS.md

@@ -36,11 +36,15 @@ Most components group props into two objects, plus top-level event handlers:
 - `TextInput` - single-line input; `value`/`onInput`/`onSubmit`, controlled or
   uncontrolled, plus `placeholder`, `maxLength`, `autoFocus`, `disabled`.
 - `ScrollView` - scrollable region; vertical by default, `horizontal` to flip.
-  Wheel + drag, no momentum yet. Backed by `createScroll` from
-  `@solidrt/core` (headless offset+clamp geometry).
+  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).
 - `Pressable` - pressable box; `onPress` on a primary press released inside,
   `disabled` opts out. `children`/`style` can be functions of `{ pressed,
-  hovered }`. No pointer capture: a drag out cancels via onPointerLeave.
+  hovered }`. Press retention: a drag out retracts the pressed state, a drag
+  back in restores it; releasing outside does not fire.
 - `Button` - themed Pressable: accent box + label (string/number child), scales
   on press (via reactive style); colors from `theme.color.primary`/`onPrimary`.
 - `Switch` - on/off toggle; `value`/`onChange`, controlled or uncontrolled
@@ -52,8 +56,9 @@ Most components group props into two objects, plus top-level event handlers:
   module-local context (not a cross-component dependency). `Radio value=...`;
   string/number child renders as a themed label.
 - `Slider` - horizontal; `value`/`onChange` (or `defaultValue`), `min`/`max`/
-  `step`. Pointer x mapped to value via `getBoundingBox`; uses core
-  `setPointerCapture` so a drag keeps tracking off the track (within the window).
+  `step`. Pointer x mapped to value via `getBoundingBox`; a down resolves the
+  gesture arena outright (no ancestor scroller takeover) and moves follow the
+  frozen down path, so a drag keeps tracking off the track.
 - `Card` - themed surface container: padded column box, `surface` fill, `border`
   stroke, rounded. Optional `title` heading; override paint via `style`.
 - `Divider` - thin rule in `border` color; `orientation` (default horizontal),

package/README.md

@@ -283,7 +283,7 @@ Top and bottom insets are applied by default. Pass `false` to opt out of an edge
 
 ### ScrollView
 
-A scrollable region. Scrolls vertically by default; pass `horizontal` to scroll the other axis instead. Both the wheel and dragging scroll the content. There is no momentum/fling yet, and (with no pointer capture) a drag that leaves the box ends the gesture.
+A scrollable region. Scrolls vertically by default; pass `horizontal` to scroll the other axis instead. Both the wheel and dragging scroll the content. The drag activates after a small movement threshold along the scroll axis, also when it starts on a pressable (the press is cancelled and its feedback retracts), and keeps scrolling when the pointer leaves the box. There is no momentum/fling yet.
 
 ```jsx
 import { ScrollView, Text } from "@solidrt/components"
@@ -440,7 +440,7 @@ import { RadioGroup, Radio } from "@solidrt/components"
 
 ### Slider
 
-A horizontal slider. The groove fills up to the thumb; pressing or dragging the track sets the value from the pointer position. Controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. The drag uses pointer capture, so it keeps tracking when the pointer drifts off the track (anywhere within the window).
+A horizontal slider. The groove fills up to the thumb; pressing or dragging the track sets the value from the pointer position. Controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. The drag keeps tracking when the pointer drifts off the track, and an enclosing ScrollView never takes it over.
 
 ```jsx
 import { Slider } from "@solidrt/components"

package/package.json

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

package/src/arena.ts

@@ -0,0 +1,58 @@
+// 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/button.tsx

@@ -1,5 +1,5 @@
 import { Show, children } from "@solidrt/core"
-import { Pressable, type PressState } from "./pressable"
+import { createPress, type PressState } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -32,12 +32,12 @@ export interface ButtonProps {
 // labels wider than the preset never clip.
 const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
 
-// Themed convenience over Pressable: a padded, centered, accent-colored box with
-// a label. Press feedback is a slight scale, hover feedback a tint (non-touch
-// interaction policies only), both driven through Pressable's reactive style so
-// no nodes are recreated. Override the box via style and the padding/sizing via
+// A themed press target: a padded, centered, accent-colored box with a label.
+// Press feedback is a slight scale, hover feedback a tint (non-touch
+// interaction policies only), both reactive reads of the press state so no
+// nodes are recreated. Override the box via style and the padding/sizing via
 // layout. A caller-set backgroundColor disables the hover tint: we cannot know
-// its hover variant.
+// its hover variant. When disabled, it takes no pointer events at all.
 export function Button(props: ButtonProps) {
   // Fill, hover fill, and label color per variant, read reactively from the
   // theme. No variant draws a border.
@@ -79,36 +79,53 @@ export function Button(props: ButtonProps) {
   // compensation there too.
   let labelOnDark = () => lightOnDark(label(), props.style?.backgroundColor ?? idleFill())
 
+  // props (not a literal) so a swapped-in onPress is read at event time.
+  let press = createPress(props)
+  let style = () => ({
+    ...props.style,
+    backgroundColor: bg(press.state()),
+    borderRadius: radius(),
+    // Always a number: a scale that flips from a number back to undefined
+    // hits the transform decoder, which rejects null. Multiply so a
+    // caller-set scale is preserved under the press feedback.
+    scale: (props.style?.scale ?? 1) * (press.pressed() && policy.motion !== "none" ? 0.97 : 1),
+  })
+
   return (
-    <Pressable
-      onPress={props.onPress}
-      disabled={props.disabled}
-      layout={{
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingTop: space("md"),
-        paddingBottom: space("md"),
-        paddingLeft: space("lg"),
-        paddingRight: space("lg"),
-        ...(props.size ? { minWidth: SIZE_WIDTH[props.size] } : { width: "100%" }),
-        ...props.layout,
-      }}
-      style={(s: PressState) => ({
-        ...props.style,
-        backgroundColor: bg(s),
-        borderRadius: radius(),
-        // Always a number: a scale that flips from a number back to undefined
-        // hits the transform decoder, which rejects null. Multiply so a
-        // caller-set scale is preserved under the press feedback.
-        scale: (props.style?.scale ?? 1) * (s.pressed && policy.motion !== "none" ? 0.97 : 1),
-      })}
+    <view
+      ref={press.ref}
+      repaintBoundary
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="center"
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
+      paddingLeft={space("lg")}
+      paddingRight={space("lg")}
+      {...(props.size ? { minWidth: SIZE_WIDTH[props.size] } : { width: "100%" })}
+      {...props.layout}
+      x={style().x}
+      y={style().y}
+      scale={style().scale}
+      rotate={style().rotate}
+      opacity={style().opacity}
+      {...press.handlers}
+      pointerEvents={props.disabled ? "none" : undefined}
     >
+      <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
       <Show when={isText()} fallback={resolved()}>
         <text color={label()} {...typeStyle("body", labelOnDark())}>
           {resolved()}
         </text>
       </Show>
-    </Pressable>
+      <Show when={(style().borderWidth ?? 0) > 0}>
+        <d-rect
+          drawStyle="stroke"
+          color={style().borderColor ?? "transparent"}
+          strokeWidth={style().borderWidth}
+          radius={style().borderRadius}
+        />
+      </Show>
+    </view>
   )
 }

package/src/checkbox.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { Pressable } from "./pressable"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { densityScale } from "./policy"
 import type { StyleProps } from "./types"
@@ -19,7 +19,7 @@ const SIZE = 20
 
 // A checkbox. When checked, fills with primary and draws a checkmark; otherwise
 // shows an empty bordered box. Controlled via checked/onChange, or uncontrolled
-// via defaultChecked. Built on Pressable.
+// via defaultChecked. When disabled, it takes no pointer events at all.
 export function Checkbox(props: CheckboxProps) {
   let [internal, setInternal] = createSignal(props.defaultChecked ?? false)
   let checked = () => (props.checked !== undefined ? props.checked : internal())
@@ -29,6 +29,7 @@ export function Checkbox(props: CheckboxProps) {
     if (props.checked === undefined) setInternal(next)
     props.onChange?.(next)
   }
+  let press = createPress({ onPress: toggle })
 
   let size = () => Math.round(SIZE * densityScale())
   // The checkmark in box-relative fractions, so it scales with the density.
@@ -37,19 +38,30 @@ export function Checkbox(props: CheckboxProps) {
     return `M ${0.25 * s} ${0.5 * s} L ${0.45 * s} ${0.7 * s} L ${0.75 * s} ${0.3 * s}`
   }
 
+  let style = () => ({
+    backgroundColor: checked() ? theme.color.primary : theme.color.surface,
+    borderColor: theme.color.border,
+    borderWidth: theme.borderWidth.sm,
+    borderRadius: theme.radius.sm,
+    ...props.style,
+  })
+
   return (
-    <Pressable
-      onPress={toggle}
-      disabled={props.disabled}
-      layout={{ width: size(), height: size(), ...props.layout }}
-      style={{
-        backgroundColor: checked() ? theme.color.primary : theme.color.surface,
-        borderColor: theme.color.border,
-        borderWidth: theme.borderWidth.sm,
-        borderRadius: theme.radius.sm,
-        ...props.style,
-      }}
+    <view
+      ref={press.ref}
+      repaintBoundary
+      width={size()}
+      height={size()}
+      {...props.layout}
+      x={style().x}
+      y={style().y}
+      scale={style().scale}
+      rotate={style().rotate}
+      opacity={style().opacity}
+      {...press.handlers}
+      pointerEvents={props.disabled ? "none" : undefined}
     >
+      <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
       <Show when={checked()}>
         <d-path
           d={check()}
@@ -60,6 +72,14 @@ export function Checkbox(props: CheckboxProps) {
           strokeJoin="round"
         />
       </Show>
-    </Pressable>
+      <Show when={(style().borderWidth ?? 0) > 0}>
+        <d-rect
+          drawStyle="stroke"
+          color={style().borderColor ?? "transparent"}
+          strokeWidth={style().borderWidth}
+          radius={style().borderRadius}
+        />
+      </Show>
+    </view>
   )
 }

package/src/context-menu.tsx

@@ -1,6 +1,6 @@
 import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
-import { Pressable, type PressState } from "./pressable"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -74,26 +74,32 @@ export function ContextMenu(props: ContextMenuProps) {
 
   let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
-  let ItemRow = (p: { item: ContextMenuItem; padY: number }) => (
-    <Pressable
-      onPress={() => choose(p.item)}
-      disabled={p.item.disabled}
-      layout={{
-        flexDirection: "row",
-        alignItems: "center",
-        paddingTop: p.padY,
-        paddingBottom: p.padY,
-        paddingLeft: space("md"),
-        paddingRight: space("md"),
-      }}
-      style={(s: PressState) => ({
-        backgroundColor:
-          s.pressed || (s.hovered && policy.interaction !== "touch") ? theme.color.surfaceHover : "transparent",
-      })}
-    >
-      <text {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>
-    </Pressable>
-  )
+  let ItemRow = (p: { item: ContextMenuItem; padY: number }) => {
+    let press = createPress({ onPress: () => choose(p.item) })
+    return (
+      <view
+        ref={press.ref}
+        repaintBoundary
+        flexDirection="row"
+        alignItems="center"
+        paddingTop={p.padY}
+        paddingBottom={p.padY}
+        paddingLeft={space("md")}
+        paddingRight={space("md")}
+        {...press.handlers}
+        pointerEvents={p.item.disabled ? "none" : undefined}
+      >
+        <d-rect
+          color={
+            press.pressed() || (press.hovered() && policy.interaction !== "touch")
+              ? theme.color.surfaceHover
+              : "transparent"
+          }
+        />
+        <text {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>
+      </view>
+    )
+  }
 
   // Anchored at the opening pointer position, flipping up when it would run
   // off the bottom. Same reflow-free placement as Tooltip/Select: portal at

package/src/index.ts

@@ -19,7 +19,8 @@ export { ProgressBar, type ProgressBarProps } from "./progress-bar"
 export { Portal, type PortalProps } from "./portal"
 export { Modal, type ModalProps } from "./modal"
 export { Tooltip, type TooltipProps } from "./tooltip"
-export { Select, type SelectProps, type SelectOption } from "./select"
+export { Select, type SelectProps } from "./select"
+export { SegmentedControl, type SegmentedControlProps } from "./segmented-control"
 export { ContextMenu, type ContextMenuProps, type ContextMenuItem } from "./context-menu"
 export { NavShell, type NavShellProps, type NavItem } from "./nav-shell"
 export { SplitView, type SplitViewProps } from "./split-view"
@@ -50,4 +51,4 @@ export {
 } from "./policy"
 export { typeStyle, typeWeight, lightOnDark } from "./typography"
 export { space } from "./spacing"
-export type { StyleProps, TextLayoutProps } from "./types"
+export type { StyleProps, TextLayoutProps, Option } from "./types"

package/src/nav-shell.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Switch, Match, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { Pressable, type PressState } from "./pressable"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -45,34 +45,37 @@ export function NavShell(props: NavShellProps) {
   }
 
   let labelColor = (item: NavItem) => (item.value === value() ? theme.color.primary : theme.color.textMuted)
-  let itemBg = (item: NavItem, s: PressState) =>
+  let itemBg = (item: NavItem, hovered: boolean) =>
     item.value === value()
       ? theme.color.surfaceAlt
-      : s.hovered && policy.interaction !== "touch"
+      : hovered && policy.interaction !== "touch"
         ? theme.color.surfaceHover
         : "transparent"
 
   // Icon over a small label, centered; shared by the tab bar and the rail.
-  let StackedItem = (p: { item: NavItem; padY: number; layout?: LayoutProps }) => (
-    <Pressable
-      onPress={() => select(p.item.value)}
-      layout={{
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: theme.spacing.sm,
-        paddingTop: p.padY,
-        paddingBottom: p.padY,
-        ...p.layout,
-      }}
-      style={(s: PressState) => ({ backgroundColor: itemBg(p.item, s), borderRadius: theme.radius.sm })}
-    >
-      {p.item.icon}
-      <text color={labelColor(p.item)} {...typeStyle("caption")}>
-        {p.item.label}
-      </text>
-    </Pressable>
-  )
+  let StackedItem = (p: { item: NavItem; padY: number; layout?: LayoutProps }) => {
+    let press = createPress({ onPress: () => select(p.item.value) })
+    return (
+      <view
+        ref={press.ref}
+        repaintBoundary
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        gap={theme.spacing.sm}
+        paddingTop={p.padY}
+        paddingBottom={p.padY}
+        {...p.layout}
+        {...press.handlers}
+      >
+        <d-rect color={itemBg(p.item, press.hovered())} radius={theme.radius.sm} />
+        {p.item.icon}
+        <text color={labelColor(p.item)} {...typeStyle("caption")}>
+          {p.item.label}
+        </text>
+      </view>
+    )
+  }
 
   let Hairline = (p: { vertical?: boolean }) => (
     <view width={p.vertical ? 1 : undefined} height={p.vertical ? undefined : 1}>
@@ -107,31 +110,34 @@ export function NavShell(props: NavShellProps) {
       <view flexDirection="column" width={SIDEBAR_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
         <d-rect color={theme.color.surface} />
         <For each={props.items}>
-          {(item: NavItem) => (
-            <Pressable
-              onPress={() => select(item.value)}
-              layout={{
-                flexDirection: "row",
-                alignItems: "center",
-                gap: theme.spacing.md,
-                paddingTop: space("sm") + 2,
-                paddingBottom: space("sm") + 2,
-                paddingLeft: theme.spacing.md,
-                paddingRight: theme.spacing.md,
-                marginLeft: theme.spacing.sm,
-                marginRight: theme.spacing.sm,
-              }}
-              style={(s: PressState) => ({ backgroundColor: itemBg(item, s), borderRadius: theme.radius.sm })}
-            >
-              {item.icon}
-              <text
-                color={item.value === value() ? theme.color.primary : theme.color.text}
-                {...typeStyle("body")}
+          {(item: NavItem) => {
+            let press = createPress({ onPress: () => select(item.value) })
+            return (
+              <view
+                ref={press.ref}
+                repaintBoundary
+                flexDirection="row"
+                alignItems="center"
+                gap={theme.spacing.md}
+                paddingTop={space("sm") + 2}
+                paddingBottom={space("sm") + 2}
+                paddingLeft={theme.spacing.md}
+                paddingRight={theme.spacing.md}
+                marginLeft={theme.spacing.sm}
+                marginRight={theme.spacing.sm}
+                {...press.handlers}
               >
-                {item.label}
-              </text>
-            </Pressable>
-          )}
+                <d-rect color={itemBg(item, press.hovered())} radius={theme.radius.sm} />
+                {item.icon}
+                <text
+                  color={item.value === value() ? theme.color.primary : theme.color.text}
+                  {...typeStyle("body")}
+                >
+                  {item.label}
+                </text>
+              </view>
+            )
+          }}
         </For>
       </view>
       <Hairline vertical />

package/src/pan.ts

@@ -0,0 +1,105 @@
+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 }
+}