@solidrt/core 0.0.59 → 0.0.61

package/AGENTS.md

@@ -111,7 +111,7 @@ tsconfig.json - the two load-bearing lines are jsx + jsxImportSource:
 ```
 
 Peer deps @solidjs/signals and @solidjs/universal must match (currently
-2.0.0-rc.8); bun resolves them from peerDependencies. On a version bump,
+2.0.0-rc.9); bun resolves them from peerDependencies. On a version bump,
 `bun install` only warns ("incorrect peer dependency") and keeps the old
 ones, and `bun update solid-js @solidjs/signals @solidjs/universal` does
 not read the pin either: it adds all three to package.json at registry
@@ -157,7 +157,9 @@ that reads exactly like Solid fallout.
 - Paint color is the `color` prop (a CSS color string). There is NO `fill`,
   `stroke`, or `background` prop (some older doc examples are wrong about this).
   Outlines: `drawStyle="stroke"` (or "stroke-and-fill") plus `strokeWidth`.
-  Corner radius on draw primitives: `radius` (number or [tl, tr, br, bl]).
+  Corner radius on draw primitives: `radius` (number or [tl, tr, br, bl]);
+  on `texture` too, drawn as a rounded image in one draw - use it instead of
+  a rounded `clipRadius` around an image, which tiled GPUs pay dearly for.
 
 - Registered JSX intrinsics: `window`, `view`, `text`, `span`, `rect`, `oval`,
   `line`, `path`, `texture`, `audio`, plus the `d-` variants `d-view`, `d-rect`,
@@ -252,6 +254,16 @@ that reads exactly like Solid fallout.
   call `flush()` after the write so it lands in this frame's display list.
   See examples/on-layout-connect.tsx.
 
+- A flex item never shrinks below its content on its own (CSS `min-height:
+  auto`, the same here): in a column, a content-sized child - a paragraph, a
+  list, a multiline field - keeps its content height and overflows a parent
+  that is too short, whatever `flexGrow`/`flexShrink` say, because the
+  automatic minimum size pins it. Give the child that should fit
+  `minHeight={0}` (`minWidth={0}` in a row), or make it a scroll container
+  (`overflow="hidden"` or `"scroll"`, whose automatic minimum is 0). A
+  `flexGrow: 1` child that ends up TALLER than its parent is this trap, not
+  a broken grow.
+
 - Text `lineHeight` is a MULTIPLIER of fontSize (1.3-1.6 is typical), not
   pixels. A CSS-reflex value like 22 makes each line box 22x the font size:
   the text becomes blank space and the parent balloons.
@@ -319,10 +331,34 @@ that reads exactly like Solid fallout.
   finger degrades to a plain pan, and `pointers` is how a consumer gives one-
   and two-finger translation different meanings - dx/dy alone cannot tell
   them apart).
+  Both ends carry the lift velocity (`onPanEnd(velocity)`,
+  `onTransformEnd(velocity)`: parent-frame px/s from `createVelocityTracker`,
+  a least-squares fit over the last 100 ms of positions, never the last
+  two samples - the final sample before a lift is often stationary and
+  frame batching makes the last delta a frame old; zero after a 50 ms
+  rest or under `FLING_MIN_VELOCITY`), the fling fact for whoever animates
+  on. The discrete recognizers: `createSwipe({ directions?, onSwipe(direction,
+  velocity), onSwipeMove?, onSwipeEnd? })` (a pan classified at the lift:
+  24 px of travel at 300 px/s within 30 degrees of an axis, direction by
+  the velocity; `directions` sets the pan's axis, so a horizontal swipe
+  inside a vertical ScrollView takes only horizontal drags), `createLongPress({
+  ms?, onLongPress(at), onLongPressMove?, onLongPressEnd? })` (500 ms
+  within 10 px; arms silently, steals at the timer - a press under it
+  retracts, a pan that won first keeps the finger - then streams moves:
+  drag-after-hold), `createDoubleTap({ onDoubleTap(at) })` (second down
+  within 300 ms and 100 px of the first tap, at least 40 ms after it;
+  fires on that down). `at` is a `PointerPoint`, the down's coordinates
+  in every frame, copied - the event object is rewritten as it bubbles.
   Spread the returned `.handlers` onto the receiving element. They
   arbitrate through the exported `arena` (ONE per app): a press claims its
   pointer provisionally, movement evidence steals and resolves it, the loser's
-  `cancel()` retracts its feedback. Custom recognizers should join the arena
+  `cancel()` retracts its feedback. One relation beyond claims: a
+  double-tap `arena.pend`s a decision on its first tap's pointer and
+  `decide`s it later, and a press that resolved at the lift
+  `arena.defer`s its firing on that (run when the decision is lost,
+  dropped when won; false and fire now when nothing is pending) - so a
+  single tap fires late only on a node that also has a double-tap.
+  Custom recognizers should join the arena
   rather than track pointers ad hoc, or they will double-handle against
   scrollers and pressables.
 
@@ -377,12 +413,26 @@ that reads exactly like Solid fallout.
   `drag("Shift+Middle")`; bare means Left), a discriminator rather than
   a modifier: a right drag feeds only Right specs. Touch carries no
   modifiers or buttons: a chord is the desktop path, the bare binding
-  stays for fingers. A
+  stays for fingers. The discrete gestures are button sources that pulse
+  (pressed for one task, so onPress fires once): `pointer.swipe("Left")`
+  (the direction is the trailing word, as a drag's button is;
+  `swipe("Ctrl+Right")`), `pointer.longPress`, `pointer.doubleTap`, each
+  chordable; ids `pointer:swipe:Left`, `pointer:longPress:Ctrl`. They
+  run on the feed's own events, no second arena claimant. A drag's `end`
+  carries the release velocity in element heights per second when the
+  finger lifted at speed (`GestureListener.end(velocity)`,
+  `AxesHooks.onEnd(name, velocity)`, `input.end(action, velocity?)` by
+  name), which is how the cameras fling. A
   detached d-* leaf has no layout box: give the feed `{ layout }` or it
   throws at the first press. `invert(source)` and `scale(source, k)` are
-  the two processors: keys and sticks move the CAMERA where a drag moves
+  the value processors: keys and sticks move the CAMERA where a drag moves
   the content, so a preset binds arrows or a stick to `pan`/`rotate`
-  through invert() and the action keeps one meaning.
+  through invert() and the action keeps one meaning. `hold(source, ms)`,
+  `tap(source, ms)`, `doubleTap(source, gapMs, tapMs)` and
+  `chord(...sources)` are the interactions (Unity's Hold/Tap/MultiTap):
+  button sources made from button sources, so a charged attack is
+  `hold(pad.button("west"))` on one action next to the plain press on
+  another; a tap reads pressed for one task, enough for onPress.
   Consumers with the axes contract (`createAxes({ rotate: "vec2", zoom:
   "axis" }, { onNudge, onBegin, onEnd })`, what every camera control
   exposes as `.axes`) are connected by name with `input.drive(control.axes,
@@ -392,7 +442,23 @@ that reads exactly like Solid fallout.
   name is the wire for scripts, debug commands, peers and replays:
   `input.set("move", [0, -1])` holds a rate, `press`/`release` a button,
   `nudge`/`begin`/`end` feed the delta channel. `bindings()` lists what is
-  bound (source labels are display strings), `unbind` removes one, and a
+  bound, `unbind` removes one. Every source has a `label` (display) and
+  an `id` (serializable, no device instance: `keyboard:key:Space`,
+  `gamepad:button:south`, `pointer:drag:Ctrl+Right`,
+  `invert(gamepad:leftStick)`, `hold(400,keyboard:key:Space)`) plus its
+  `device`. A settings screen is `input.save()` (ids per action, JSON it)
+  and `input.load(saved, { keyboard, gamepad, pointer })` (resolves
+  through the devices given, all-or-nothing, throws on an unknown id),
+  `input.rebind(action, devices, { signal?, replace?, part? })` (a
+  promise of the next fitting input bound: a key down captured through
+  the map's handlers, a pad button/trigger/stick, a pointer gesture's
+  first movement; `replace` (default) swaps that device's bindings on
+  the action; `part: "up"` etc. swaps one key of the bound keyboard
+  composite on a vec2/axis action; `signal` is an AbortSignal), and
+  `input.device()` (reactive: the device that last moved anything bound,
+  the button-prompt switch - show `bindings(action)` where
+  `source.device === input.device()`; glyph images are the app's, keyed
+  by id). A
   preset (`orbitBindings`, `firstPersonBindings` in @solidrt/3d,
   `camera2dBindings` in @solidrt/2d) is a plain bindings list the app
   applies and edits - nothing binds unless the app says so (the one
@@ -408,14 +474,28 @@ that reads exactly like Solid fallout.
   effects under it and the feed's recognizer registers its cleanup there. The vocabulary the
   controls share, one kind and unit per word: `pan` vec2 (view heights),
   `zoom` axis (octaves, positive in), `rotate` vec2 (orbit turns), `roll`
-  axis (turns about the view axis), `look` vec2 (turns), `move` vec2
-  ([right, forward], forward = -y), `rise` axis (up). The runtime-free
+  axis (turns about the view axis), `focus` axis (a nudge at a focal: a
+  double tap's point), `look` vec2 (turns), `move` vec2 ([right,
+  forward], forward = -y), `rise` axis (up). The runtime-free
   half (`createInputMap`, `createAxes`, `keyboard`, the processors) is
   importable as `@solidrt/core/input` for headless checks;
   checks/input-map-check.ts runs it on the bare flux binary, and
   checks/input-gamepad-check.ts drives the gamepad device and the join
   order over a signal of pad snapshots (input-gamepad-device.ts is
-  runtime-free; input-gamepad.ts hands it gamepads()).
+  runtime-free; input-gamepad.ts hands it gamepads()). The pointer
+  feed's discrete pulses (`doubleTap`, `longPress`) bound to an AXIS
+  action nudge 1 with the gesture's focal (where the tap landed) and
+  contribute NO rate (a one-task press is not a rate to integrate),
+  which is how the orbit camera's `focus` learns its point and the 2d
+  camera's double tap zooms one octave. The camera
+  controls' shared math - the ease, the framing of a followed point
+  (dead zone, hard limits, per-axis damping, lookahead) and the lanes
+  (offset, shakes), the activity gate every control's `active()` runs
+  on, and the shot blender (`createShotBlend`: several cameras, a
+  priority, a timed blend, over the packages' `createShots`) - is
+  `@solidrt/core/camera-control`, pure, pinned by
+  checks/camera-control-check.ts; okf/design/camera-controls.md is the
+  pipeline the 2d and 3d controls run over it.
 
 - Reactivity is SolidJS 2.0 (`@solidjs/signals`), NOT Solid 1.x. `createSignal`
   is as you expect, but `createEffect` takes the 2.0 two-function shape: a
@@ -480,12 +560,16 @@ that reads exactly like Solid fallout.
   replay it, remount the subtree (`<Show when={epoch()} keyed>` around it,
   then bump `epoch`). See examples/stagger.tsx. The companion to the exit
   pop-out is `layout` on the same spec: an element declaring it slides
-  from where it was painted to the box a layout gives it (a row removed
-  above it, one inserted, a `<For>` reorder) instead of jumping, retargets
-  if the layout changes again mid-slide, and is hit-tested where it is
-  drawn. It is parent-relative, so declare it on every level that should
-  glide; `layout: true` borrows the `all` motion, and `all` alone never
-  slides. Position only today, a size change snaps. See
+  from the box it was painted at to the box a layout gives it (a row
+  removed above it, one inserted, a `<For>` reorder, a card growing to fit
+  more content), position and size, instead of jumping; it retargets if
+  the layout changes again mid-slide, and is painted, clipped, hit-tested
+  and backdrop-filtered at the box it is drawn at. While its size is in
+  flight its children are laid out against that box every frame (text
+  re-wraps, rows re-flow, like a CSS width transition), and a child's own
+  `layout` slide yields to the parent's motion. It is parent-relative, so
+  declare it on every level that should glide; `layout: true` borrows the
+  `all` motion, and `all` alone never slides. See
   examples/layout-slide.tsx.
   Per-frame work is for genuinely procedural motion, and a game or a
   simulation is that in full: its natural shape is ONE `onFrame` doing one

package/agents/performance.md

@@ -104,7 +104,11 @@ Rules, in order of leverage:
    `opacity` on a view is NOT cheap: it wraps the subtree in a compositing
    layer (save_layer) for as long as it is below 1. To fade a single
    primitive, put the alpha in its `color` (`rgba(...)`) - paint alpha is
-   free; reserve view `opacity` for fading a genuine group as a whole.
+   free; reserve view `opacity` for fading a genuine group as a whole. A
+   `backdropFilter` panel inside a fading group is re-filtered against the
+   window ahead of the group each frame of the fade (the glass keeps its
+   blur; get_stats' backdropsPrepainted counts them), one extra backdrop
+   capture per panel while the opacity is below 1.
    Placement rule for animation-heavy screens: a boundary around a node
    that animates its own paint (a moving d-*, a changing color) is useless
    - its interior is damaged every frame, so the cache never survives. The

package/examples/README.md

@@ -21,9 +21,10 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `frame-animation.tsx` - `onFrame` driving a transform animation each frame.
 - `on-layout-connect.tsx` - `onLayout` + `getBoundingBox` connecting laid-out boxes with a `d-path`.
 - `stagger.tsx` - enter/exit/stagger with no per-frame JS: `from` and `exit` per property on each row's own `transition`, `stagger` on the ANCESTOR cascading them in occurrence order, and the replay idiom - a keyed `<Show>` remounts the subtree when its `when` value changes, so bumping an epoch replays the whole cascade. Exiting rows stay painted until they settle.
-- `layout-slide.tsx` - the `layout` transition, the companion to exit: rows declaring it slide from the box they had to the box a layout gives them instead of jumping - tap a row to remove it (its exit plays where it was while the rows below slide up), the header to shuffle the order (a `<For>` reorder), the footer to add one back. No per-frame JS, no hand-animated `y`.
+- `layout-slide.tsx` - the `layout` transition, the companion to exit: rows declaring it slide from the box they had to the box a layout gives them, position and size, instead of jumping - tap a row to expand it (it grows to fit its detail text while the rows below slide down), its "remove" mark to remove it (its exit plays where it was while the rows below slide up), the header to shuffle the order (a `<For>` reorder), the footer to add one back. No per-frame JS, no hand-animated `y` or `height`.
 
 ## Pointer input
+- `gestures.tsx` - the discrete recognizers test bed: a swipe card (`createSwipe`, follows the finger, reports the direction and speed, snaps back when too slow), a long-press tile (`createLongPress`, arms on a hold, then drags: the reorder idiom), a double-tap target beside a plain tap (the single tap fires late only where a double-tap is registered: the arena's pend/defer relation), a pan target printing the release velocity, and a pointer feed binding `swipe("Left")`, `longPress` and `doubleTap` on an input map. Every state is on screen and in the log, so `/input` sequences verify it from the tree.
 - `pointer-local-coords.tsx` - the three pointer coordinate frames (`clientX` window, `localX` the handling node's own frame, `parentX` its path-parent's frame - where the node's x/y live) and the transform-proof drag idiom: grab offset from `localX` at down, place with `parentX - offset` on moves. Exact inside rotated/scaled ancestors and when the pointer leaves the node mid-drag.
 
 ## Gamepads

package/examples/gestures.tsx

@@ -0,0 +1,197 @@
+// Discrete gestures test bed: the recognizer family beyond press and pan,
+// each on its own target with its state on screen (and in the log):
+//   - swipe: a card that follows the finger and reports the direction it
+//     left in (createSwipe), snapping back when the drag was too slow;
+//   - long-press: a tile that arms on a hold and can then be dragged
+//     (createLongPress, the reorder idiom), while a plain drag moves it
+//     not at all;
+//   - double-tap beside a single tap: the tap fires late only where a
+//     double-tap is registered (the arena's pend/defer relation), at once
+//     on the plain target;
+//   - the pointer feed: an input map binding `dodge` to swipe("Left"),
+//     `charge` to longPress and `zoomIn` to doubleTap on one viewport, so
+//     the same gestures reach a game through the map.
+// A pan target prints the release velocity core measures at every lift.
+import { arena, createDoubleTap, createInputMap, createLongPress, createPan, createPointerFeed, createSignal, createSwipe, render } from "@solidrt/core"
+import type { PointerEvent, PointerPoint } from "@solidrt/core"
+
+const TILE = 120
+const CARD_WIDTH = 240
+const CARD_HEIGHT = 64
+
+function Swipeable() {
+  let [x, setX] = createSignal(0)
+  let [dragging, setDragging] = createSignal(false)
+  let [status, setStatus] = createSignal("swipe me")
+  let swipe = createSwipe({
+    directions: ["Left", "Right"],
+    onSwipeStart: () => setDragging(true),
+    onSwipeMove: dx => setX(x() + dx),
+    onSwipe: (direction, v) => {
+      setStatus(`swiped ${direction} at ${Math.round(v.vx)} px/s`)
+      console.log(`swipe ${direction} ${Math.round(v.vx)}`)
+    },
+    onSwipeEnd: () => {
+      setDragging(false)
+      setX(0)
+    },
+  })
+  return (
+    <view width={CARD_WIDTH} height={CARD_HEIGHT} overflow="hidden" {...swipe.handlers}>
+      <d-rect color="#243044" radius={8} />
+      <view width={CARD_WIDTH} height={CARD_HEIGHT} x={x()} transition={dragging() ? null : { x: { duration: 250 } }} alignItems="center" justifyContent="center">
+        <d-rect color="#3b5f8a" radius={8} />
+        <d-text color="#ffffff">{status()}</d-text>
+      </view>
+    </view>
+  )
+}
+
+function LongPressable() {
+  let [pos, setPos] = createSignal({ x: 0, y: 0 })
+  let [held, setHeld] = createSignal(false)
+  let [status, setStatus] = createSignal("hold me")
+  let lp = createLongPress({
+    onLongPress: () => {
+      setHeld(true)
+      setStatus("held: now drag")
+      console.log("long-press")
+    },
+    onLongPressMove: (dx, dy) => setPos({ x: pos().x + dx, y: pos().y + dy }),
+    onLongPressEnd: () => {
+      setHeld(false)
+      setStatus(`dropped at ${Math.round(pos().x)},${Math.round(pos().y)}`)
+      console.log(`long-press end ${Math.round(pos().x)},${Math.round(pos().y)}`)
+    },
+  })
+  return (
+    <view width={TILE} height={TILE} x={pos().x} y={pos().y} alignItems="center" justifyContent="center" {...lp.handlers}>
+      <d-rect color={held() ? "#d9822b" : "#8a5f3b"} radius={12} />
+      <d-text color="#ffffff">{status()}</d-text>
+    </view>
+  )
+}
+
+// A press the way components' createPress does it: claim on the down,
+// fire on the up, deferred while a double-tap is pending on the pointer.
+function pressable(onPress: () => void) {
+  let active: number | null = null
+  let owner = {
+    cancel() {
+      active = null
+    },
+  }
+  return {
+    onPointerDown(e: PointerEvent) {
+      if (arena.claim(e.pointerId, owner)) active = e.pointerId
+    },
+    onPointerUp(e: PointerEvent) {
+      if (active !== e.pointerId) return
+      active = null
+      arena.release(e.pointerId, owner)
+      if (!arena.defer(e.pointerId, onPress)) onPress()
+    },
+  }
+}
+
+function Tappable(props: { double: boolean }) {
+  let [status, setStatus] = createSignal(props.double ? "tap or double-tap" : "tap")
+  let taps = 0
+  let press = pressable(() => {
+    taps++
+    setStatus(`tap ${taps}`)
+    console.log(`${props.double ? "double-target" : "plain-target"} tap ${taps}`)
+  })
+  let dt = createDoubleTap({
+    onDoubleTap: (at: PointerPoint) => {
+      setStatus(`double-tap at ${Math.round(at.localX)},${Math.round(at.localY)}`)
+      console.log("double-tap")
+    },
+  })
+  let down = (e: PointerEvent) => {
+    if (props.double) dt.handlers.onPointerDown(e)
+    press.onPointerDown(e)
+  }
+  let up = (e: PointerEvent) => {
+    if (props.double) dt.handlers.onPointerUp(e)
+    press.onPointerUp(e)
+  }
+  return (
+    <view width={TILE} height={TILE} alignItems="center" justifyContent="center" onPointerDown={down} onPointerMove={props.double ? dt.handlers.onPointerMove : undefined} onPointerUp={up}>
+      <d-rect color={props.double ? "#3b8a5f" : "#5f8a3b"} radius={12} />
+      <d-text color="#ffffff">{status()}</d-text>
+    </view>
+  )
+}
+
+function Pannable() {
+  let [status, setStatus] = createSignal("drag and let go")
+  let pan = createPan({
+    onPanEnd: v => {
+      setStatus(`lift at ${Math.round(v.vx)},${Math.round(v.vy)} px/s`)
+      console.log(`pan end ${Math.round(v.vx)},${Math.round(v.vy)}`)
+    },
+  })
+  return (
+    <view width={CARD_WIDTH} height={CARD_HEIGHT} alignItems="center" justifyContent="center" {...pan.handlers}>
+      <d-rect color="#44304a" radius={8} />
+      <d-text color="#ffffff">{status()}</d-text>
+    </view>
+  )
+}
+
+function Viewport() {
+  let pointer = createPointerFeed()
+  let input = createInputMap({ dodge: "button", charge: "button", zoomIn: "button", look: "vec2" })
+  input.bind("dodge", pointer.swipe("Left"))
+  input.bind("charge", pointer.longPress)
+  input.bind("zoomIn", pointer.doubleTap)
+  input.bind("look", pointer.drag)
+  let [status, setStatus] = createSignal("feed: swipe left, hold, double-tap")
+  input.onPress("dodge", () => {
+    setStatus("feed: dodge")
+    console.log("feed dodge")
+  })
+  input.onPress("charge", () => {
+    setStatus("feed: charge")
+    console.log("feed charge")
+  })
+  input.onPress("zoomIn", () => {
+    setStatus("feed: zoomIn")
+    console.log("feed zoomIn")
+  })
+  input.onGesture("look", {
+    end: v => {
+      if (v) {
+        setStatus(`feed: look end ${v[0].toFixed(2)},${v[1].toFixed(2)} heights/s`)
+        console.log(`feed look end ${v[0].toFixed(2)},${v[1].toFixed(2)}`)
+      }
+    },
+  })
+  return (
+    <view width={CARD_WIDTH} height={TILE} alignItems="center" justifyContent="center" {...pointer.handlers}>
+      <d-rect color="#2b4a5a" radius={12} />
+      <d-text color="#ffffff">{status()}</d-text>
+    </view>
+  )
+}
+
+function App() {
+  return (
+    <window flexDirection="column" gap={24} padding={24}>
+      <d-rect color="#101418" />
+      <view flexDirection="row" gap={24}>
+        <Swipeable />
+        <Pannable />
+      </view>
+      <view flexDirection="row" gap={24}>
+        <LongPressable />
+        <Tappable double={true} />
+        <Tappable double={false} />
+      </view>
+      <Viewport />
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/layout-slide.tsx

@@ -1,22 +1,29 @@
 // The `layout` transition, the companion to `exit`: a row declaring it
-// slides from the box it had to the box the next layout gives it, so the
-// list never jumps when a row leaves, arrives or moves. Nothing here
-// animates `y` by hand and there is no per-frame JS: the rows keep their
-// flex layout, and the runtime slides each one from where it was painted.
-// Tap a row to remove it - its exit plays where it was (the pop-out) while
-// the rows below slide up past it. Tap the header to shuffle: a `<For>`
+// slides from the box it had to the box the next layout gives it, position
+// and size, so the list never jumps when a row leaves, arrives, moves or
+// grows. Nothing here animates `y` or `height` by hand and there is no
+// per-frame JS: the rows keep their flex layout, and the runtime slides
+// each one from the box it was painted at. Tap a row to expand it: its box
+// grows on the spring, its detail text is laid out against the growing box
+// every frame, and the rows below slide down with its bottom edge. Tap a
+// row's "remove" mark: its exit plays where it was (the pop-out) while the
+// rows below slide up past it. Tap the header to shuffle: a `<For>`
 // reorder moves the surviving nodes, so every displaced row slides. Tap
 // the footer to add a row back: the rows below its slot slide apart and
 // the new row enters through its `from`. A reflow that lands mid-slide
-// retargets, and a spring keeps its momentum. `layout` is parent-relative
-// (declare it on every level that should glide) and position only: a size
-// change snaps.
-import { render, createSignal, For } from "@solidrt/core"
+// retargets, and a spring keeps its momentum. `layout` is parent-relative:
+// declare it on every level that should glide.
+import { render, createSignal, For, Show } from "@solidrt/core"
 import type { Transition } from "@solidrt/core"
 
 const ALL_ROWS = ["Signals", "Effects", "Memos", "Stores", "Boundaries", "Resources"]
 // Rows the list starts with; the rest come back through the footer.
 const INITIAL_ROWS = 4
+// A row's collapsed height, and the detail text it grows to fit.
+const ROW_HEIGHT = 48
+const DETAIL =
+  "A reactive primitive of Solid 2.0: the runtime tracks its reads and re-runs the computations that depend on it when it changes."
+
 // Every reflow slides on this spring.
 const SLIDE = { duration: 400, bounce: 0.15 } satisfies Transition
 // Enter from the left, leave to the right, each direction on its own curve.
@@ -42,6 +49,7 @@ function shuffled(items: string[]): string[] {
 
 function App() {
   let [rows, setRows] = createSignal(ALL_ROWS.slice(0, INITIAL_ROWS))
+  let [expanded, setExpanded] = createSignal<string | null>(null)
   let addRow = () => {
     let next = ALL_ROWS.find((label) => !rows().includes(label))
     if (next) setRows([...rows(), next])
@@ -50,7 +58,7 @@ function App() {
   return (
     <window padding={40} gap={12}>
       <view height={40} justifyContent="center" onPointerDown={() => setRows(shuffled(rows()))}>
-        <text color="#8899aa" fontSize={14}>Tap here to shuffle, a row to remove it</text>
+        <text color="#8899aa" fontSize={14}>Tap here to shuffle, a row to expand it</text>
       </view>
       <For each={rows()}>
         {(label) => (
@@ -58,13 +66,34 @@ function App() {
             x={0}
             opacity={1}
             transition={{ layout: SLIDE, x: ARRIVE, opacity: FADE }}
-            height={48}
+            minHeight={ROW_HEIGHT}
+            flexDirection="column"
             justifyContent="center"
-            paddingLeft={16}
-            onPointerDown={() => setRows(rows().filter((row) => row !== label))}
+            padding={16}
+            paddingTop={12}
+            paddingBottom={12}
+            gap={8}
+            overflow="hidden"
+            clipRadius={10}
+            onPointerDown={() => setExpanded(expanded() === label ? null : label)}
           >
             <d-rect color="#2a3a55" radius={10} />
-            <text color="#e8eef6" fontSize={18}>{label}</text>
+            <view flexDirection="row" justifyContent="space-between">
+              <text color="#e8eef6" fontSize={18}>{label}</text>
+              <text
+                color="#8899aa"
+                fontSize={14}
+                onPointerDown={(e) => {
+                  e.stopPropagation()
+                  setRows(rows().filter((row) => row !== label))
+                }}
+              >
+                remove
+              </text>
+            </view>
+            <Show when={expanded() === label}>
+              <text color="#b8c4d4" fontSize={14}>{DETAIL}</text>
+            </Show>
           </view>
         )}
       </For>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -9,6 +9,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./camera": "./src/camera.ts",
+    "./camera-control": "./src/camera-control.ts",
     "./color": "./src/color.ts",
     "./data": "./src/data.ts",
     "./gpu": "./src/gpu.ts",
@@ -31,11 +32,11 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.59"
+    "@solidrt/flux-types": "0.0.61"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.8",
-    "@solidjs/universal": "2.0.0-rc.8",
-    "solid-js": "2.0.0-rc.8"
+    "@solidjs/signals": "2.0.0-rc.9",
+    "@solidjs/universal": "2.0.0-rc.9",
+    "solid-js": "2.0.0-rc.9"
   }
 }

package/src/arena.ts

@@ -15,6 +15,15 @@
 // 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.
+//
+// One relation beyond claims: a recognizer that may still take a gesture
+// AFTER the pointer lifts (a double-tap waiting for its second tap) pends
+// a decision at the down, and a recognizer that resolved at the lift
+// defers its firing on that decision (a press beside a double-tap must
+// not fire on the first tap, or double-tap-to-zoom also single-taps).
+// UIKit's require(toFail:), RNGH's waitFor, Flutter's delayed tap. A node
+// with nothing pending fires at once: the wait costs nothing where no
+// double-tap is registered.
 
 export type ArenaOwner = {
   /** Retract the gesture without firing; invoked when the pointer is stolen. */
@@ -22,8 +31,10 @@ export type ArenaOwner = {
 }
 
 type Claim = { owner: ArenaOwner; resolved: boolean }
+type Pending = { owners: Set<ArenaOwner>; fires: (() => void)[] }
 
 let claims = new Map<number, Claim>()
+let pending = new Map<number, Pending>()
 
 export let arena = {
   /**
@@ -57,4 +68,48 @@ export let arena = {
   release(pointerId: number, owner: ArenaOwner): void {
     if (claims.get(pointerId)?.owner === owner) claims.delete(pointerId)
   },
+
+  /**
+   * Register that `owner` may still take the pointer's gesture after its
+   * lift, so firings resolved at the lift wait (defer) until `decide`.
+   */
+  pend(pointerId: number, owner: ArenaOwner): void {
+    let p = pending.get(pointerId)
+    if (!p) {
+      p = { owners: new Set(), fires: [] }
+      pending.set(pointerId, p)
+    }
+    p.owners.add(owner)
+  },
+
+  /**
+   * Settle a pending decision: `won` drops every deferred firing (the
+   * gesture was the pending recognizer's), lost runs them once no other
+   * decision is pending on the pointer. Idempotent for an owner that is
+   * not pending.
+   */
+  decide(pointerId: number, owner: ArenaOwner, won: boolean): void {
+    let p = pending.get(pointerId)
+    if (!p || !p.owners.has(owner)) return
+    if (won) {
+      pending.delete(pointerId)
+      return
+    }
+    p.owners.delete(owner)
+    if (p.owners.size > 0) return
+    pending.delete(pointerId)
+    for (let fire of p.fires) fire()
+  },
+
+  /**
+   * Hold a firing until every decision pending on the pointer is settled:
+   * run when the last one is lost, dropped when one is won. Returns false,
+   * storing nothing, when no decision is pending: the caller fires now.
+   */
+  defer(pointerId: number, fire: () => void): boolean {
+    let p = pending.get(pointerId)
+    if (!p) return false
+    p.fires.push(fire)
+    return true
+  },
 }

package/src/audio.ts

@@ -218,9 +218,10 @@ export function createPcmSound(
  * Streams a large track, decoding on demand instead of loading it into memory.
  * Single-voice: each play() restarts it. Pass a path (resolved like flux:fs,
  * relative to the process cwd) or a `file()` from flux:fs; a path is wrapped in
- * `file()` for you, so a dev-server-proxied file streams over the proxy. Owns
- * the stream's lifecycle: stopped and released when the reactive owner is
- * disposed. For imperative use, call stream()/play() from "flux:audio".
+ * `file()` for you. The track is read from local storage (the app's assets in
+ * a packed app), not over the network. Owns the stream's lifecycle: stopped
+ * and released when the reactive owner is disposed. For imperative use, call
+ * stream()/play() from "flux:audio".
  */
 export function createSoundStream(source: string | FluxFile, options: SoundStreamOptions = {}): Sound {
   let src = typeof source === "string" ? file(source) : source