@solidrt/2d 0.0.65 → 0.0.67

package/AGENTS.md

@@ -453,7 +453,7 @@ it: `createSpriteLayer(texture, { stagger })` / `layer.setStagger(ms)`.
 Each natural settle calls the handle's `onTransitionEnd` (plain field,
 or the `<Sprite>`/`<Group>` prop) with `{ component }` - target-only,
 never on a cancel, snap or exit; the raw "spatialTransitionEnd" engine
-event (srt:events, node = sprite.node) stays for flux:spatial consumers.
+event (sol:events, node = sprite.node) stays for flux:spatial consumers.
 See examples/springs.tsx (tap a sprite: it leaves through its `exit`).
 
 ### Frame-rate motion
@@ -469,7 +469,7 @@ re-runs an effect per sprite per frame for nothing.
 
 Frame animation (animation.ts): `createAnimation(frames, fps, { loop })`
 is a clip with a shared clock on the app's frame time (it freezes with
-the dev clock and plays at its own speed under `srt render`) stepping
+the dev clock and plays at its own speed under `sol render`) stepping
 every attached sprite
 (`anim.add(sprite)` / `remove`; `play`/`pause`; `frame()`/`playing()`
 read the clock, methods like the 3d mixer's `playing()`; `loop: false`

package/examples/README.md

@@ -1,7 +1,7 @@
 # @solidrt/2d examples
 
 Single-concept sprite-layer patterns. Each file is a complete, runnable app
-(`bun run srt run <file>` from the repo root) demonstrating exactly one thing -
+(`bun run sol run <file>` from the repo root) demonstrating exactly one thing -
 copy one and adapt it.
 
 - `sprites.tsx` - the layer at its natural scale: 500 sprites bouncing at

package/examples/camera.tsx

@@ -23,7 +23,7 @@
 import { createEffect, createInputMap, createPointerFeed, createSignal, decodeImage, displayScale, gamepad, onFrame, render, Show, windowSize } from "@solidrt/core"
 import { addSprite, camera2dActions, camera2dBindings, createAtlas, createCamera2d, createSpriteLayer, feedPointer, fitOversample, grid, setSprite } from "@solidrt/2d"
 import type { Camera2dHandle, SpriteHandle } from "@solidrt/2d"
-import { registerDebug } from "srt:dev"
+import { registerDebug } from "sol:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
 
 const WORLD = { width: 2400, height: 1600 }

package/examples/pick.tsx

@@ -21,7 +21,7 @@
 import { createInputMap, createPointerFeed, createSignal, decodeImage, render, For } from "@solidrt/core"
 import { Camera2d, camera2dActions, camera2dBindings, createAtlas, grid, setSprite, Sprite, SpriteLayer, View2d } from "@solidrt/2d"
 import type { Camera2dHandle, Frame, SpriteHandle } from "@solidrt/2d"
-import { registerDebug } from "srt:dev"
+import { registerDebug } from "sol:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
 
 const TINTS: [number, number, number, number][] = [

package/examples/split-screen.tsx

@@ -12,7 +12,7 @@
 import { createInputMap, createPointerFeed, decodeImage, gamepad, onFrame, render, windowSize, For } from "@solidrt/core"
 import { Camera2d, camera2dActions, camera2dBindings, createAtlas, grid, setSprite, Sprite, SpriteLayer, View2d } from "@solidrt/2d"
 import type { Camera2dHandle, Frame, SpriteHandle } from "@solidrt/2d"
-import { registerDebug } from "srt:dev"
+import { registerDebug } from "sol:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
 
 const WORLD = { width: 2400, height: 1600 }

package/examples/tiles.tsx

@@ -23,7 +23,7 @@
 import { createSignal, decodeImage, onFrame, pct, render, windowSize } from "@solidrt/core"
 import { createAtlas, grid, TileLayer } from "@solidrt/2d"
 import type { TileCamera, TileLayerHandle } from "@solidrt/2d"
-import { registerDebug } from "srt:dev"
+import { registerDebug } from "sol:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
 
 const COLS = 128

package/examples/views.tsx

@@ -18,7 +18,7 @@
 import { createEffect, createInputMap, createPointerFeed, createSignal, decodeImage, displayScale, gamepad, onFrame, render, windowSize } from "@solidrt/core"
 import { addSprite, camera2dActions, camera2dBindings, createAtlas, createCamera2d, createSpriteLayer, feedPointer, fitOversample, grid, setSprite } from "@solidrt/2d"
 import type { Camera2dHandle, SpriteHandle, ViewHandle } from "@solidrt/2d"
-import { registerDebug } from "srt:dev"
+import { registerDebug } from "sol:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
 
 const WORLD = { width: 2400, height: 1600 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/2d",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -15,10 +15,10 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/test": "0.0.65"
+    "@solidrt/test": "0.0.67"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.65"
+    "@solidrt/core": "0.0.67"
   }
 }

package/src/animation.ts

@@ -5,7 +5,7 @@
 // generates 8 publishes and 8 presents a second and a paused clip costs
 // nothing - the demand-gate story unchanged. The clock is the app's frame
 // time: the clip freezes and resumes with the dev tools' clock, plays at
-// its own speed under `srt render`, and a step lands on the frame it is
+// its own speed under `sol render`, and a step lands on the frame it is
 // due in. The clip
 // does not own its sprites (destroySprite prunes lazily on the next step),
 // and a sprite belongs to at most one animation. Plain JS over setSprite,

package/src/components/group.tsx

@@ -21,6 +21,7 @@ export type GroupProps = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  onPointerCancel?: (event: SpritePointerEvent) => void
   onWheel?: (event: SpriteWheelEvent) => void
   onTap?: (event: SpriteTapEvent) => void
   /** How pose-prop changes animate (see setGroupTransition). The mount
@@ -52,11 +53,12 @@ export let Group: ParentComponent<GroupProps> = props => {
     transition => setGroupTransition(group, transition ?? null),
   )
   createEffect(
-    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onWheel, props.onTap, props.onTransitionEnd] as const,
-    ([down, move, up, wheel, tap, end]) => {
+    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerCancel, props.onWheel, props.onTap, props.onTransitionEnd] as const,
+    ([down, move, up, cancel, wheel, tap, end]) => {
       group.onPointerDown = down
       group.onPointerMove = move
       group.onPointerUp = up
+      group.onPointerCancel = cancel
       group.onWheel = wheel
       group.onTap = tap
       group.onTransitionEnd = end

package/src/components/sprite-layer.tsx

@@ -19,6 +19,7 @@ export type LayerPointerProps = {
   onPointerDown?: (event: LayerPointerEvent) => void
   onPointerMove?: (event: LayerPointerEvent) => void
   onPointerUp?: (event: LayerPointerEvent) => void
+  onPointerCancel?: (event: LayerPointerEvent) => void
   onWheel?: (event: LayerWheelEvent) => void
   onTap?: (event: LayerTapEvent) => void
 }
@@ -143,6 +144,7 @@ const VIEW_PROPS = [
   "onPointerDown",
   "onPointerMove",
   "onPointerUp",
+  "onPointerCancel",
   "onWheel",
   "onTap",
 ] as const
@@ -249,6 +251,7 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
       onPointerDown: e => props.onPointerDown?.(e),
       onPointerMove: e => props.onPointerMove?.(e),
       onPointerUp: e => props.onPointerUp?.(e),
+      onPointerCancel: e => props.onPointerCancel?.(e),
       onWheel: e => props.onWheel?.(e),
       onTap: e => props.onTap?.(e),
     }),
@@ -321,6 +324,7 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
               onPointerDown={events ? viewHandlers.onPointerDown : undefined}
               onPointerMove={events ? viewHandlers.onPointerMove : undefined}
               onPointerUp={events ? viewHandlers.onPointerUp : undefined}
+              onPointerCancel={events ? viewHandlers.onPointerCancel : undefined}
               onPointerLeave={events ? viewHandlers.onPointerLeave : undefined}
               onWheel={events ? viewHandlers.onWheel : undefined}
             />

package/src/components/sprite.tsx

@@ -18,6 +18,7 @@ export type SpritePointerProps = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  onPointerCancel?: (event: SpritePointerEvent) => void
   /** Sprites only: a Group never receives enter/leave. */
   onPointerEnter?: (event: SpritePointerEvent) => void
   onPointerLeave?: (event: SpritePointerEvent) => void
@@ -54,11 +55,12 @@ export let Sprite: VoidComponent<SpriteProps> = props => {
     transition => setSpriteTransition(sprite, transition ?? null),
   )
   createEffect(
-    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerEnter, props.onPointerLeave, props.onWheel, props.onTap, props.onTransitionEnd] as const,
-    ([down, move, up, enter, leave, wheel, tap, end]) => {
+    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerCancel, props.onPointerEnter, props.onPointerLeave, props.onWheel, props.onTap, props.onTransitionEnd] as const,
+    ([down, move, up, cancel, enter, leave, wheel, tap, end]) => {
       sprite.onPointerDown = down
       sprite.onPointerMove = move
       sprite.onPointerUp = up
+      sprite.onPointerCancel = cancel
       sprite.onPointerEnter = enter
       sprite.onPointerLeave = leave
       sprite.onWheel = wheel

package/src/components/view2d.tsx

@@ -107,6 +107,7 @@ export let View2d: ParentComponent<View2dProps> = props => {
       onPointerDown: e => props.onPointerDown?.(e),
       onPointerMove: e => props.onPointerMove?.(e),
       onPointerUp: e => props.onPointerUp?.(e),
+      onPointerCancel: e => props.onPointerCancel?.(e),
       onWheel: e => props.onWheel?.(e),
       onTap: e => props.onTap?.(e),
     }),
@@ -148,6 +149,7 @@ export let View2d: ParentComponent<View2dProps> = props => {
           onPointerDown={events ? view.handlers.onPointerDown : undefined}
           onPointerMove={events ? view.handlers.onPointerMove : undefined}
           onPointerUp={events ? view.handlers.onPointerUp : undefined}
+          onPointerCancel={events ? view.handlers.onPointerCancel : undefined}
           onPointerLeave={events ? view.handlers.onPointerLeave : undefined}
           onWheel={events ? view.handlers.onWheel : undefined}
         />

package/src/dispatch.ts

@@ -1,6 +1,6 @@
 // Pointer dispatch behind view.handlers, shared by both layer kinds: the
 // element event model one tree deeper, with the VIEW as the root of the
-// walk. Down, move, up and wheel dispatch on the topmost hit sprite,
+// walk. Down, move, up, cancel and wheel dispatch on the topmost hit sprite,
 // bubble through its enclosing groups and end at the layer's listeners;
 // over empty space the walk is the layer alone (`sprite` null). Claiming
 // is stopPropagation: a handler that stops an event keeps every later
@@ -49,7 +49,7 @@ export type DispatchDeps = {
   listeners: Set<LayerPointerListener>
 }
 
-type HandlerName = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onWheel" | "onTap"
+type HandlerName = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onWheel" | "onTap"
 
 // One runtime event object serves every view (SpritePointerEvent for the
 // sprite chain, LayerPointerEvent at the root, plus the wheel and tap
@@ -212,6 +212,17 @@ export function spriteDispatch(deps: DispatchDeps): (layout: (() => { width: num
         tap.tapCount = count
         walk("onTap", tap, !press.claimed)
       },
+      onPointerCancel(e) {
+        let [x, y] = toLayer(e)
+        let press = presses.get(e.pointerId)
+        if (!press) {
+          walk("onPointerCancel", makeEvent(topmost(x, y), x, y, e), true)
+          return
+        }
+        // The press ends where it was: the walk it captured, never a tap.
+        presses.delete(e.pointerId)
+        walk("onPointerCancel", makeEvent(press.target, x, y, e), !press.claimed)
+      },
       onWheel(e) {
         let [x, y] = toLayer(e)
         let event = makeEvent(topmost(x, y), x, y, e)

package/src/layer.ts

@@ -40,7 +40,7 @@ import type {
   NodeTransitionSpec,
   QueryFilter,
 } from "flux:spatial"
-import { on } from "srt:events"
+import { on } from "sol:events"
 import type { CameraState, CameraUpdate } from "./camera.ts"
 import type { Frame } from "./frames.ts"
 import { FULL_FRAME, writeFrame } from "./frames.ts"
@@ -183,6 +183,9 @@ export type Sprite = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  /** The pointer's other end: the system took it away (see core's
+   * onPointerCancel); bubbles like up, and the press it ends never taps. */
+  onPointerCancel?: (event: SpritePointerEvent) => void
   onPointerEnter?: (event: SpritePointerEvent) => void
   onPointerLeave?: (event: SpritePointerEvent) => void
   /** A wheel notch over the sprite; bubbles like down/move/up. */
@@ -343,6 +346,7 @@ export type LayerPointerListener = {
   onPointerDown?: (event: LayerPointerEvent) => void
   onPointerMove?: (event: LayerPointerEvent) => void
   onPointerUp?: (event: LayerPointerEvent) => void
+  onPointerCancel?: (event: LayerPointerEvent) => void
   onWheel?: (event: LayerWheelEvent) => void
   onTap?: (event: LayerTapEvent) => void
 }
@@ -353,6 +357,7 @@ export type LayerHandlers = {
   onPointerDown: (event: ElementPointerEvent) => void
   onPointerMove: (event: ElementPointerEvent) => void
   onPointerUp: (event: ElementPointerEvent) => void
+  onPointerCancel: (event: ElementPointerEvent) => void
   onPointerLeave: (event: ElementPointerEvent) => void
   onWheel: (event: ElementWheelEvent) => void
 }
@@ -447,6 +452,7 @@ export type SpriteGroup = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  onPointerCancel?: (event: SpritePointerEvent) => void
   onWheel?: (event: SpriteWheelEvent) => void
   onTap?: (event: SpriteTapEvent) => void
   /** See Sprite.onTransitionEnd. */

package/src/oversample.ts

@@ -39,7 +39,7 @@ export function fitOversample(scale: number, targetW: number, targetH: number, b
 const THRASH_CHANGES = 4
 /** The window those changes must land in, ms of the app's frame time: a
  * warning about what happens per frame counts on the clock frames run on,
- * so it means the same under `srt render` and a paused dev clock. */
+ * so it means the same under `sol render` and a paused dev clock. */
 const THRASH_WINDOW_MS = 1000
 
 /**

package/src/views.ts

@@ -289,6 +289,7 @@ export function feedPointer(view: ViewHandle, feed: PointerFeed): () => void {
     onPointerDown: e => feed.handlers.onPointerDown(e.native),
     onPointerMove: e => feed.handlers.onPointerMove(e.native),
     onPointerUp: e => feed.handlers.onPointerUp(e.native),
+    onPointerCancel: e => feed.handlers.onPointerCancel(e.native),
     onWheel: e => feed.handlers.onWheel(e.native),
   })
 }