@solidrt/core 0.0.60 → 0.0.61

package/src/transform.ts

@@ -2,6 +2,8 @@ import { onSettled } from "@solidjs/signals"
 import { on } from "srt:events"
 import type { PointerEvent } from "./types"
 import { arena, type ArenaOwner } from "./arena"
+import { createVelocityTracker, flingVelocity } from "./velocity"
+import type { Velocity } from "./velocity"
 
 // Focal travel or span change in logical pixels before the transform
 // activates; the same threshold createPan uses, so the two race fairly.
@@ -53,7 +55,10 @@ export interface TransformOptions {
   onTransformStart?: () => void
   /** Streams one delta per frame; compose them multiplicatively (scale) / additively (dx, dy, rotation). */
   onTransformMove?: (t: TransformDelta) => void
-  onTransformEnd?: () => void
+  /** The last finger's lift, with the focal point's velocity at it in
+   * parent-frame pixels per second (velocity.ts; zero after a rest or
+   * under the fling minimum). */
+  onTransformEnd?: (velocity: Velocity) => void
 }
 
 // The merged transform recognizer: pan + pinch + rotate as ONE gesture over
@@ -147,6 +152,10 @@ export function createTransform(options: TransformOptions) {
   // immediately would bake a jolt into the next delta. A rebase frame
   // emits nothing.
   let rebase = false
+  // Parent-frame focal positions per delivering flush, for the lift's
+  // velocity; a rebase translates the history by the focal jump so a
+  // finger joining or leaving keeps it continuous.
+  let tracker = createVelocityTracker()
 
   // Centroids in all three frames, the span in window pixels (it feeds the
   // finger-travel gates), the pair angle in the parent frame.
@@ -193,6 +202,7 @@ export function createTransform(options: TransformOptions) {
     pinch = false
     dirty = false
     rebase = false
+    tracker.reset()
   }
   let cancel = reset
   let owner: ArenaOwner = { cancel }
@@ -204,8 +214,12 @@ export function createTransform(options: TransformOptions) {
     if (rebase) {
       // Anchor from same-age positions; emits nothing - an activation or
       // set change must not produce a jump delta. Motion that arrived in
-      // the same batch folds into the anchor.
+      // the same batch folds into the anchor (and into the velocity
+      // history's shift, one frame the fit never sees).
+      let prev = ref
       ref = measure()
+      if (prev) tracker.shift(ref.px - prev.px, ref.py - prev.py)
+      tracker.push(ref.px, ref.py)
       spanBase = ref.span
       smoothSpan = ref.span
       rebase = false
@@ -215,6 +229,7 @@ export function createTransform(options: TransformOptions) {
     if (!dirty || !ref) return
     dirty = false
     let m = measure()
+    tracker.push(m.px, m.py)
     let prevSpan = smoothSpan
     smoothSpan += (m.span - smoothSpan) * SPAN_SMOOTH
     spanRate += (Math.abs(smoothSpan - prevSpan) - spanRate) * QUIET_SMOOTH
@@ -299,6 +314,7 @@ export function createTransform(options: TransformOptions) {
         pinch = Math.abs(m.span - ref.span) >= SLOP
         spanRate = pinch ? 1 : 0
         rebase = true
+        tracker.reset()
         options.onTransformStart?.()
         return
       }
@@ -310,12 +326,16 @@ export function createTransform(options: TransformOptions) {
         arena.release(e.pointerId, owner)
         pointers.delete(e.pointerId)
         if (pointers.size === 0) {
+          // The lift's own position is not measured (no terminator
+          // follows it); the fit over the delivered frames is the speed.
+          let velocity = flingVelocity(tracker.velocity())
           active = false
           ref = null
           pinch = false
           dirty = false
           rebase = false
-          options.onTransformEnd?.()
+          tracker.reset()
+          options.onTransformEnd?.(velocity)
         } else {
           rebase = true
           pinch = pinch && pointers.size >= 2

package/src/types.d.ts

@@ -2,6 +2,7 @@
 /// <reference path="./runtime-modules.d.ts" />
 
 import type { Gradient } from "./color"
+import type { CursorId, CursorName } from "./cursor"
 import type { ProgramId, TextureBindings, TextureId } from "flux:gpu"
 import type { TextInputHints } from "flux:rendertree"
 import type { Element } from "solid-js"
@@ -172,6 +173,11 @@ export interface PaintProps {
   strokeCap?: StrokeCap
   strokeJoin?: StrokeJoin
   strokeMiter?: number
+  /**
+   * Stroke thickness in logical px; default 1 (SVG's). 0 draws no stroke at
+   * all, like CSS `border-width: 0` - never a hairline - so a stroke-only
+   * shape (or a line) at 0 draws nothing.
+   */
   strokeWidth?: number
 }
 
@@ -380,6 +386,13 @@ export interface PointerProps {
    */
   focusable?: boolean
   pointerEvents?: "auto" | "none" | "all"
+  /**
+   * The mouse cursor while this element is hovered: a platform shape by its
+   * CSS name, `"none"` to hide it, or a createCursor handle for an image.
+   * The innermost hovered element that sets one wins; none on the path
+   * means the default arrow. Mouse and pen; touch shows no cursor.
+   */
+  cursor?: CursorName | CursorId
 }
 
 /**
@@ -643,17 +656,22 @@ export interface TransitionProps {
          */
         stagger?: number
         /**
-         * Layout slide: when a layout moves this element (a row removed
-         * above it, one inserted, a `<For>` reorder, a resize), it slides
-         * from where it was painted to its new box on this motion instead
-         * of jumping, and is hit-tested where it is drawn. A reflow
+         * Layout slide: when a layout moves or resizes this element (a row
+         * removed above it, one inserted, a `<For>` reorder, a card growing
+         * to fit more content, a window resize), it slides from the box it
+         * was painted at to its new box on this motion instead of jumping,
+         * position and size, 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), as under a CSS width transition; a
+         * child's own `layout` slide yields to the parent's motion. A reflow
          * mid-slide retargets (a spring keeps its velocity). Its first
          * layout, a reparent and a `display: none` toggle snap. The slide is
          * parent-relative: a parent that moves carries its children at
          * once, so declare it on every level that should glide. `true`
          * borrows the `all` entry's motion (an error without one); `all`
-         * alone never slides. Position only today: a size change snaps.
-         * Settles with onTransitionEnd property `"layout"`.
+         * alone never slides. Settles with onTransitionEnd property
+         * `"layout"`.
          */
         layout?: Omit<TransitionSpring, "from" | "exit"> | Omit<TransitionTween, "from" | "exit"> | TransitionShorthand | boolean
       } & {
@@ -804,7 +822,16 @@ export interface ViewOwnProps extends TransformProps, PointerProps {
    * pixels beneath at that point in the frame, so treat it as a deliberate
    * panel, not a casual style. Inside a `repaintBoundary="snapshot"`
    * subtree it sees only that boundary's own offscreen content, never what
-   * is behind the boundary (the same containment `blendMode` has there).
+   * is behind the boundary (the same containment `blendMode` has there),
+   * and under an ancestor with a `filter` it sees that ancestor's
+   * composited layer. An ancestor's `opacity` is not a containment: the
+   * glass keeps its blur through the fade (the runtime re-filters the
+   * window ahead of the fading group at the group's opacity), so a panel
+   * entering with `from: { opacity: 0 }` frosts in as it appears. That
+   * re-filter is an approximation: the group's sharp pixels then draw over
+   * the blurred ones at its opacity, so mid-fade the glass reads partly
+   * sharp, most at a low opacity; exact group blending would need the
+   * capture inside the group's layer, which the renderer cannot do.
    */
   backdropFilter?: FilterProps
 }
@@ -1052,6 +1079,16 @@ export interface TextProps extends PaintProps, PointerProps, TextRunProps {
  */
 export interface TextureProps extends PaintProps, PointerProps {
   src?: TextureId
+  /**
+   * Corner radius, as on a rect: the image is drawn as a rounded rect filled
+   * with the texture, in one draw and with no clip, so a frosted or image
+   * pane keeps rounded corners at the cost of the plain draw (a rounded
+   * `clipRadius` around it costs a tiled GPU a third of the frame per ten
+   * panes while the box is in flight). A single number rounds all four
+   * corners; an array is [top-left, top-right, bottom-right, bottom-left].
+   * Animatable in its single-number form, like a rect's.
+   */
+  radius?: number | [number, number, number, number]
   /**
    * How the texture's pixels map to the element box (CSS object-fit).
    * "fill" (default) stretches; "cover" and "none" crop; "contain" and

package/src/velocity.ts

@@ -0,0 +1,134 @@
+// The velocity tracker every recognizer reads at a lift: the pointer's
+// speed from the positions of its last VELOCITY_WINDOW_MS as a
+// least-squares line, not the last two samples. The final sample before a
+// lift is often stationary, and frame batching makes the last delta a
+// whole frame old, so a two-point estimate reads anything from zero to a
+// jolt; a fit over the window reads the finger's actual speed. One
+// estimator whatever recognizer asks (createPan, createTransform, the
+// pointer feed), so the 2d camera and a control after it never re-derive
+// their own.
+//
+// Samples are positions in whatever frame the caller measures (the
+// recognizers push the node's parent frame, so the velocity applies 1:1
+// as their deltas do; a swipe classifier pushes window pixels, the
+// finger's own travel) with performance.now() at handler time, the
+// precedent in transform.ts: PointerEvent carries no timestamp.
+
+// Fit horizon: Flutter's and Android's VelocityTracker window.
+const VELOCITY_WINDOW_MS = 100
+// Largest speed reported, px/s (Flutter's kMaxFlingVelocity): a sensor
+// glitch cannot launch the content across the world.
+const VELOCITY_MAX = 8000
+// A position unchanged for this long at the read means the finger rested
+// before lifting: the velocity is zero, whatever the window still holds.
+// Measured from the last sample that MOVED, not the newest sample's age:
+// the runtime's resampler delivers an extrapolated step and its correction
+// up to two frames after the finger stopped, and any same-position
+// re-delivery must not restart the clock either.
+const VELOCITY_REST_MS = 50
+// Ring capacity: a 100 ms window holds 12 samples at 120 Hz; the rest is
+// room for a burst of same-frame samples.
+const VELOCITY_SAMPLES = 20
+/** Release speeds under this (px/s, Flutter's kMinFlingVelocity) are not a
+ * fling: a recognizer delivers zero for them, so a finger that slowed to a
+ * stop leaves the content where it is. */
+export const FLING_MIN_VELOCITY = 50
+
+export type Velocity = { vx: number; vy: number }
+
+export interface VelocityTracker {
+  /** Record a position; `at` defaults to performance.now(). */
+  push(x: number, y: number, at?: number): void
+  /** Translate every sample: a recognizer rebasing its reference point
+   * (a finger joining or leaving a transform) keeps the history
+   * continuous instead of dropping it. */
+  shift(dx: number, dy: number): void
+  reset(): void
+  /** The speed at `at` (default now), px/s per axis: a least-squares fit
+   * over the window, zero after a rest, clamped to VELOCITY_MAX. */
+  velocity(at?: number): Velocity
+}
+
+const ZERO: Velocity = { vx: 0, vy: 0 }
+
+/** Zero under FLING_MIN_VELOCITY, else the velocity itself. */
+export let flingVelocity = (v: Velocity): Velocity => (Math.hypot(v.vx, v.vy) < FLING_MIN_VELOCITY ? ZERO : v)
+
+export function createVelocityTracker(): VelocityTracker {
+  let xs = new Float64Array(VELOCITY_SAMPLES)
+  let ys = new Float64Array(VELOCITY_SAMPLES)
+  let ts = new Float64Array(VELOCITY_SAMPLES)
+  // Ring: `count` samples ending at index `head - 1`.
+  let head = 0
+  let count = 0
+  // When the position last changed (the rest rule's clock).
+  let movedAt = -Infinity
+  return {
+    push(x, y, at = performance.now()) {
+      if (count === 0) movedAt = at
+      else {
+        let last = (head - 1 + VELOCITY_SAMPLES) % VELOCITY_SAMPLES
+        if (xs[last] !== x || ys[last] !== y) movedAt = at
+      }
+      xs[head] = x
+      ys[head] = y
+      ts[head] = at
+      head = (head + 1) % VELOCITY_SAMPLES
+      if (count < VELOCITY_SAMPLES) count++
+    },
+    shift(dx, dy) {
+      for (let i = 0; i < count; i++) {
+        let k = (head - 1 - i + VELOCITY_SAMPLES) % VELOCITY_SAMPLES
+        xs[k] = xs[k]! + dx
+        ys[k] = ys[k]! + dy
+      }
+    },
+    reset() {
+      head = 0
+      count = 0
+    },
+    velocity(at = performance.now()) {
+      if (count < 2) return ZERO
+      if (at - movedAt > VELOCITY_REST_MS) return ZERO
+      // Means over the window, then the slope of each axis against time.
+      let n = 0
+      let tm = 0
+      let xm = 0
+      let ym = 0
+      for (let i = 0; i < count; i++) {
+        let k = (head - 1 - i + VELOCITY_SAMPLES) % VELOCITY_SAMPLES
+        if (at - ts[k]! > VELOCITY_WINDOW_MS) break
+        n++
+        tm += ts[k]!
+        xm += xs[k]!
+        ym += ys[k]!
+      }
+      if (n < 2) return ZERO
+      tm /= n
+      xm /= n
+      ym /= n
+      let tt = 0
+      let tx = 0
+      let ty = 0
+      for (let i = 0; i < n; i++) {
+        let k = (head - 1 - i + VELOCITY_SAMPLES) % VELOCITY_SAMPLES
+        let dt = ts[k]! - tm
+        tt += dt * dt
+        tx += dt * (xs[k]! - xm)
+        ty += dt * (ys[k]! - ym)
+      }
+      // Every sample the same age (one batched frame): no slope to read.
+      if (tt === 0) return ZERO
+      // Slopes are px per ms; the result is px per second.
+      let vx = (tx / tt) * 1000
+      let vy = (ty / tt) * 1000
+      let speed = Math.hypot(vx, vy)
+      if (speed > VELOCITY_MAX) {
+        let f = VELOCITY_MAX / speed
+        vx *= f
+        vy *= f
+      }
+      return { vx, vy }
+    },
+  }
+}

package/src/video.ts

@@ -8,9 +8,11 @@
 // A plane player (`present: "plane"`, Android) has no texture: the platform
 // composites the picture fullscreen beneath the UI on the video's own clock,
 // and the UI simply draws over it. It exists from open until the owner is
-// disposed, and it streams: the source may be a URL, read as it plays. On a
-// platform without a plane the open fails (error() with kind "no-plane"),
-// and an app that runs everywhere falls back to a texture player itself.
+// disposed. On a platform without a plane the open fails (error() with kind
+// "no-plane"), and an app that runs everywhere falls back to a texture
+// player itself. Both players stream (the source may be a URL, read as it
+// plays) and both run off the frame loop: a texture player's frames are
+// decoded on their own thread and shown at the UI's cadence.
 //
 // The imperative primitive lives in the `flux:video` module; import { open }
 // from "flux:video" for non-reactive use.
@@ -56,9 +58,8 @@ export type VideoStream = {
   /** Pause playback; the current frame stays displayed. */
   pause(): void
   /**
-   * Seek to a time in seconds. A no-op while opening, on a texture player,
-   * and on a source that cannot seek (see `seekable`). While paused the
-   * target frame is shown.
+   * Seek to a time in seconds. A no-op while opening and on a source that
+   * cannot seek (see `seekable`). While paused the target frame is shown.
    */
   seek(seconds: number): void
   /** Whether `seek` does anything (plain read, not a signal). */

package/src/window.ts

@@ -169,15 +169,22 @@ let refreshRate = 60
 
 /**
  * Calls `fn` before every frame is painted: `tick` is the time in ms, `frame` is
- * the present count, and `rate` is the current refresh rate in Hz. `tick` is paced
- * by the runtime (one refresh period per present, slow-corrected toward the wall
- * clock) so animations driven off it stay smooth even when swap-return times
- * jitter, and it is continuous across hot reloads: every tick an instance
- * sees is on one timebase, so dt is well-defined from the second call on.
- * Timers freeze together with frame callbacks under the dev tools' clock
- * control, but measure their delays against the wall clock, not this paced
- * timeline. performance.now() is not on it either: it is real elapsed time
- * for measuring work; Date.now() is calendar time.
+ * the present count, and `rate` is the current refresh rate in Hz. `tick`
+ * advances by the display refreshes since the previous frame, as the runtime
+ * counts them: exactly one refresh period per frame while the app keeps the
+ * refresh rate, and whole multiples of it when a frame takes longer (the
+ * requestAnimationFrame contract; a 21 fps app on a 90 Hz display sees
+ * 44 and 56 ms deltas, because that is how long each frame was on screen).
+ * Deltas are therefore honest and never lag the wall clock; an app that
+ * wants motion smoother than its own frame rate steps its simulation at a
+ * fixed rate or averages the deltas itself. A gap over half a second (the
+ * app was backgrounded) advances one period, not the gap. The timebase is
+ * continuous across hot reloads: every tick an instance sees is on one
+ * timebase, so dt is well-defined from the second call on. Timers freeze
+ * together with frame callbacks under the dev tools' clock control, but
+ * measure their delays against the wall clock, not this frame timeline.
+ * performance.now() is not on it either: it is real elapsed time for
+ * measuring work; Date.now() is calendar time.
  * Returns a cleanup function; also auto-cleans within an owned scope. Outside
  * one - an effect's apply phase, an event handler - the returned cleanup is
  * the only handle, so return it from the apply (`return onFrame(...)`) to run