@solidrt/2d 0.0.55 → 0.0.56

package/examples/camera-probe.tsx

@@ -0,0 +1,200 @@
+// Camera-mapping probe: the live guard that the three spellings of the
+// camera mapping agree - projectCamera (camera.ts), the vertex stages'
+// uCameraRot (shaders.ts), and pointer dispatch's unprojectCamera
+// (layer.ts). The headless check (checks/camera-check.ts) ties
+// projectCamera to the <view>-prop oracle but cannot see the shader; this
+// probe closes that gap on a real client. Self-asserting: watch the logs
+// for CAMERA lines ending in CAMERA-OK. Run it after touching ANY
+// rotation in the package (the touch-one-rotation-touch-all rule in
+// AGENTS.md).
+//
+// What it checks, all under one rotated + pivoted camera:
+// 1. The shader implements projectCamera: a probe sprite samples opaque
+//    at its PROJECTED pixel and background at the unrotated position.
+// 2. VERTEX (records) and VERTEX_SPLIT (nodes) agree: pixel parity
+//    between the two layer kinds.
+// 3. Pointer dispatch round-trips: a pointer at the projected screen
+//    point hits the sprite and reports its world coordinates.
+// 4. Tile chunks bake with the pinned identity camera rotation.
+import { onFrame, render } from "@solidrt/core"
+import { readTexture } from "@solidrt/core/gpu"
+import {
+  addSprite,
+  createAtlas,
+  createRecordLayer,
+  createSpriteLayer,
+  createTileLayer,
+  FULL_FRAME,
+  grid,
+  projectCamera,
+} from "@solidrt/2d"
+import type { CameraUpdate, SpriteHandle, SpritePointerEvent } from "@solidrt/2d"
+import logoBytes from "./logo.png" with { type: "binary" }
+
+const W = 360
+const H = 360
+const N = 40
+const SEED = 0xcafe
+
+// Chosen so the probe sprite at world (320, 320) projects on-screen
+// (~185, ~208) while its unrotated position (20, 20) maps back to a world
+// point far outside the population's reach - both sample points are clean.
+const CAM: CameraUpdate = { x: 300, y: 300, zoom: 1, rotation: 0.6, pivotX: 180, pivotY: 180 }
+
+function rng(seed: number): () => number {
+  let a = seed >>> 0
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0
+    let t = a
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+function App() {
+  let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
+  let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
+  let nodes = createSpriteLayer(W, H, atlas.texture, { label: "cam-nodes" })
+  let records = createRecordLayer(W, H, atlas.texture, { label: "cam-records" })
+  nodes.setCamera(CAM)
+  records.setCamera(CAM)
+
+  // The same deterministic population on both layers, kept inside world
+  // 20..100 so its reach (~145 with rotation) stays clear of both sample
+  // points.
+  let fields = (r: () => number) => ({
+    x: 20 + r() * 80,
+    y: 20 + r() * 80,
+    w: 16 + r() * 48,
+    h: 16 + r() * 48,
+    rotation: r() * Math.PI * 2,
+    frame: frames[Math.floor(r() * 4) % 4]!,
+    tint: [0.5 + r() * 0.5, 0.5 + r() * 0.5, 0.5 + r() * 0.5, 1] as [number, number, number, number],
+  })
+  let r1 = rng(SEED)
+  for (let i = 0; i < N; i++) addSprite(nodes, fields(r1))
+  let r2 = rng(SEED)
+  for (let i = 0; i < N; i++) addSprite(records, fields(r2))
+
+  // The probe sprite: the FULL logo frame (its central 10% is fully
+  // opaque, so the projected center samples opaque), isolated from the
+  // population.
+  let probe: SpriteHandle = addSprite(nodes, { x: 320, y: 320, w: 40, h: 40, frame: FULL_FRAME })
+  addSprite(records, { x: 320, y: 320, w: 40, h: 40, frame: FULL_FRAME })
+
+  // A small tile layer: the bake path with the pinned identity rotation.
+  // The checked tile (2, 2) gets the full frame (opaque center texel).
+  let tiles = createTileLayer(8, 8, 16, 16, atlas.texture, { label: "cam-tiles" })
+  for (let i = 0; i < 8; i++) tiles.setTile(i, i, i === 2 ? FULL_FRAME : frames[i % 4]!)
+
+  let failures: string[] = []
+  let check = (ok: boolean, what: string) => {
+    if (!ok) failures.push(what)
+    console.log(`CAMERA ${ok ? "ok" : "FAIL"}: ${what}`)
+  }
+
+  let alphaAt = (img: { width: number; height: number; data: Uint8Array | Uint8ClampedArray }, sx: number, sy: number, n: number) => {
+    // The target is oversampled n times the layer size; sample the texel
+    // at the scaled screen point.
+    let px = Math.min(img.width - 1, Math.max(0, Math.round(sx * n)))
+    let py = Math.min(img.height - 1, Math.max(0, Math.round(sy * n)))
+    return img.data[(py * img.width + px) * 4 + 3]!
+  }
+
+  let shaderCheck = () => {
+    let img = readTexture(nodes.texture)
+    let n = nodes.oversample
+    let [sx, sy] = projectCamera(CAM, 320, 320)
+    check(sx > 8 && sx < W - 8 && sy > 8 && sy < H - 8, `projected probe on screen (${sx.toFixed(1)}, ${sy.toFixed(1)})`)
+    check(alphaAt(img, sx, sy, n) > 0, "probe center opaque at its PROJECTED pixel")
+    // Where a pre-rotation shader would draw it: (world - cam) * zoom.
+    let ux = (320 - CAM.x!) * CAM.zoom!
+    let uy = (320 - CAM.y!) * CAM.zoom!
+    check(Math.hypot(ux - sx, uy - sy) > 40, "rotated and unrotated positions are far apart")
+    check(alphaAt(img, ux, uy, n) === 0, "background at the UNROTATED position")
+    let [cx, cy] = projectCamera(CAM, CAM.x!, CAM.y!)
+    check(Math.abs(cx - CAM.pivotX!) < 1e-9 && Math.abs(cy - CAM.pivotY!) < 1e-9, "camera world point projects onto the pivot")
+  }
+
+  let pixelParity = () => {
+    let a = readTexture(nodes.texture)
+    let b = readTexture(records.texture)
+    if (a.width !== b.width || a.height !== b.height) {
+      check(false, `sizes differ: ${a.width}x${a.height} vs ${b.width}x${b.height}`)
+      return
+    }
+    let off = 0
+    for (let i = 0; i < a.data.length; i += 4) {
+      if (
+        Math.abs(a.data[i]! - b.data[i]!) > 8 ||
+        Math.abs(a.data[i + 1]! - b.data[i + 1]!) > 8 ||
+        Math.abs(a.data[i + 2]! - b.data[i + 2]!) > 8 ||
+        Math.abs(a.data[i + 3]! - b.data[i + 3]!) > 8
+      ) {
+        off++
+      }
+    }
+    let total = a.data.length / 4
+    let pct = (off / total) * 100
+    check(pct < 0.5, `node/record pixel parity under rotated camera (${off}/${total} off, ${pct.toFixed(3)}%)`)
+  }
+
+  let pointerRoundTrip = () => {
+    let got: SpritePointerEvent | null = null
+    probe.onPointerDown = e => (got = e)
+    let [sx, sy] = projectCamera(CAM, 320, 320)
+    // Synthesize the element event the built-in leaf would deliver (layout
+    // null: localX/localY are layer pixels already).
+    nodes.handlers.onPointerDown({
+      localX: sx,
+      localY: sy,
+      pointerId: 1,
+      pointerType: "mouse",
+      button: 0,
+      shiftKey: false,
+      ctrlKey: false,
+      altKey: false,
+      metaKey: false,
+    } as never)
+    // TS narrows `got` to null (the write is inside the handler call above).
+    let hit = got as SpritePointerEvent | null
+    check(hit !== null && hit.sprite === probe, "pointer at the projected pixel hits the probe")
+    check(hit !== null && Math.abs(hit.x - 320) < 1e-6 && Math.abs(hit.y - 320) < 1e-6, `pointer event carries world coords (${hit ? `${hit.x.toFixed(3)}, ${hit.y.toFixed(3)}` : "none"})`)
+    check(nodes.pick(320, 320)[0] === probe, "pick in world space still hits the probe")
+  }
+
+  let tileBake = () => {
+    let chunk = tiles.chunks[0]
+    if (!chunk) {
+      check(false, "tile chunk allocated")
+      return
+    }
+    let img = readTexture(chunk.texture)
+    let n = tiles.oversample
+    // Tile (2, 2) center at world (40, 40), chunk origin (0, 0).
+    check(alphaAt(img, 40, 40, n) > 0, "tile bakes opaque with the pinned identity camera rotation")
+    check(alphaAt(img, 40, 8, n) === 0, "empty cell stays clear")
+  }
+
+  let frame = 0
+  onFrame(() => {
+    frame++
+    if (frame === 6) {
+      shaderCheck()
+      pixelParity()
+      pointerRoundTrip()
+      tileBake()
+      console.log(failures.length === 0 ? "CAMERA-OK" : `CAMERA-FAIL: ${failures.join("; ")}`)
+    }
+  })
+
+  return (
+    <window flexDirection="row" alignItems="center" justifyContent="center" gap={8}>
+      <texture src={nodes.texture} width={W} height={H} />
+      <texture src={records.texture} width={W} height={H} />
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/camera.tsx

@@ -0,0 +1,190 @@
+// The 2d camera (createCamera2d) over a world larger than the window,
+// attached at the layer's root: drag empty space to pan with inertia on
+// release, wheel or pinch anywhere to zoom about the pointer, tap empty
+// space to glide the view there. The sprites take part in the same
+// walk: a tap on one selects it (tint), a drag on one moves it - the
+// sprite stops its down, which claims the press, so the camera never
+// pans under a sprite drag. Keys switch modes - F follows the roaming
+// sprite through a dead zone with damping, R spins the view about its
+// center, Space fits the whole world. The camera is one setCamera write
+// per changed frame (a shared-params write); no sprite moves for the
+// camera's sake. The layer fills the window through the function face
+// (starlings' shape): the app owns the <texture> leaf and spreads the
+// LAYER's handlers on it; the camera listens at the root through attach.
+//
+// Debug commands, for driving it from the control API: `camera` returns
+// the pose (and parks it when given x/y/zoom/rotation), `mode` sets
+// { follow, spin } or runs { fit: true }, `selected` returns the selected
+// sprite's world position (null when none), `first` the first sprite's -
+// the one to aim synthetic taps and drags at.
+import { createEffect, displayScale, onFrame, render, windowSize } from "@solidrt/core"
+import { addSprite, createAtlas, createCamera2d, createSpriteLayer, fitOversample, grid, setSprite } from "@solidrt/2d"
+import type { Camera2dHandle, SpriteHandle } from "@solidrt/2d"
+import { registerDebug } from "srt:dev"
+import logoBytes from "./logo.png" with { type: "binary" }
+
+const WORLD = { width: 2400, height: 1600 }
+const COUNT = 300
+const SPRITE = 64
+const ROAMER = 96
+const MAX_ZOOM = 4
+// The roamer's Lissajous path: radians per second per axis, and how much
+// of the world it sweeps.
+const ROAM_RATE_X = 0.23
+const ROAM_RATE_Y = 0.31
+const ROAM_SPAN = 0.4
+// Spin rate while R is on, radians per second.
+const SPIN_RATE = 0.4
+// The follow dead zone, fractions of the viewport.
+const DEAD_ZONE = { width: 0.3, height: 0.3 }
+// Largest frame step, seconds: a stall eases on from here instead of
+// teleporting.
+const MAX_DT = 0.1
+const TINT: [number, number, number, number] = [0.6, 0.7, 0.9, 1]
+const SELECTED_TINT: [number, number, number, number] = [1, 0.95, 0.5, 1]
+
+let cam!: Camera2dHandle
+let following = false
+let spinning = false
+// The roamer's world position, for the `mode` debug command.
+let roamerAt = { x: 0, y: 0 }
+let selected: SpriteHandle | null = null
+let first: SpriteHandle | null = null
+// The sprite holding a press (onPointerMove also fires on plain hover;
+// only the captured moves drag).
+let dragging: SpriteHandle | null = null
+
+function App() {
+  let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
+  let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
+  // The window's logical size, mirrored for the layer and the camera.
+  let win = { width: 1, height: 1 }
+  let layer = createSpriteLayer(win.width, win.height, atlas.texture, {
+    capacity: COUNT + 1,
+    clearColor: [0.05, 0.05, 0.09, 1],
+    label: "camera",
+  })
+  let select = (sprite: SpriteHandle | null) => {
+    if (selected) setSprite(selected, { tint: TINT })
+    selected = sprite
+    if (selected) setSprite(selected, { tint: SELECTED_TINT })
+  }
+  for (let i = 0; i < COUNT; i++) {
+    let sprite = addSprite(layer, {
+      x: Math.random() * WORLD.width,
+      y: Math.random() * WORLD.height,
+      w: SPRITE,
+      h: SPRITE,
+      frame: frames[i % 4],
+      rotation: Math.random() * Math.PI * 2,
+      tint: TINT,
+    })
+    // The sprite claims its press: the camera at the root never sees this
+    // pointer again, so dragging the sprite moves it instead of the view.
+    sprite.onPointerDown = e => {
+      e.stopPropagation()
+      dragging = sprite
+    }
+    sprite.onPointerUp = () => (dragging = null)
+    sprite.onPointerMove = e => {
+      if (dragging === sprite) setSprite(sprite, { x: e.x, y: e.y })
+    }
+    sprite.onTap = () => select(sprite)
+    if (first === null) first = sprite
+  }
+  let roamer = addSprite(layer, { x: WORLD.width / 2, y: WORLD.height / 2, w: ROAMER, h: ROAMER, frame: frames[0], tint: [1, 0.8, 0.3, 1] })
+
+  cam = createCamera2d(layer, {
+    viewport: () => win,
+    world: WORLD,
+    maxZoom: MAX_ZOOM,
+    deadZone: DEAD_ZONE,
+  })
+  cam.attach(layer)
+  // A tap that reached the root landed on empty space (a sprite's tap
+  // still bubbles here with e.sprite set, so the miss is the null case).
+  layer.listen({
+    onTap: e => {
+      if (e.sprite) return
+      select(null)
+      following = false
+      cam.glideTo(e.x, e.y)
+    },
+  })
+
+  createEffect(
+    () => ({ size: windowSize(), scale: displayScale() }),
+    ({ size, scale }) => {
+      win.width = Math.max(1, size.width)
+      win.height = Math.max(1, size.height)
+      layer.setSize(win.width, win.height)
+      layer.setOversample(fitOversample(scale, win.width, win.height, win.width * win.height * scale * scale))
+    },
+  )
+
+  let last = 0
+  onFrame(tick => {
+    let t = tick / 1000
+    let dt = Math.min(MAX_DT, Math.max(0, t - last))
+    last = t
+    let rx = WORLD.width / 2 + Math.sin(t * ROAM_RATE_X) * WORLD.width * ROAM_SPAN
+    let ry = WORLD.height / 2 + Math.sin(t * ROAM_RATE_Y) * WORLD.height * ROAM_SPAN
+    setSprite(roamer, { x: rx, y: ry, rotation: t })
+    roamerAt.x = rx
+    roamerAt.y = ry
+    if (following) cam.follow(rx, ry)
+    if (spinning) cam.set({ rotation: cam.camera().rotation! + SPIN_RATE * dt })
+    cam.update(dt)
+  })
+
+  return (
+    <window
+      onKeyDown={e => {
+        if (e.key === "f") {
+          following = !following
+          if (!following) cam.unfollow()
+        } else if (e.key === "r") {
+          spinning = !spinning
+        } else if (e.key === " ") {
+          following = false
+          cam.unfollow()
+          cam.fit(undefined, { glide: true })
+        }
+      }}
+    >
+      <texture src={layer.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...layer.handlers} />
+      <view pointerEvents="none" gap={6} padding={20}>
+        <text color="#eef4ff" fontSize={24} fontWeight={700}>
+          Camera
+        </text>
+        <text color="#a9bcd6" fontSize={15}>
+          drag empty space to pan (flick for inertia) - wheel or pinch to zoom - tap empty space to glide there - tap a sprite to select, drag it to move - F follow - R spin - Space fit
+        </text>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)
+
+registerDebug("camera", (args?: Record<string, unknown>) => {
+  let pose: Record<string, number> = {}
+  for (let key of ["x", "y", "zoom", "rotation"]) {
+    if (typeof args?.[key] === "number") pose[key] = args[key] as number
+  }
+  if (Object.keys(pose).length > 0) cam.set(pose)
+  return cam.camera()
+})
+
+registerDebug("mode", (args?: Record<string, unknown>) => {
+  if (typeof args?.follow === "boolean") {
+    following = args.follow
+    if (!following) cam.unfollow()
+  }
+  if (typeof args?.spin === "boolean") spinning = args.spin
+  if (args?.fit === true) cam.fit(undefined, { glide: true })
+  return { following, spinning, roamer: { ...roamerAt } }
+})
+
+registerDebug("selected", () => (selected ? { x: selected._x, y: selected._y } : null))
+registerDebug("first", () => (first ? { x: first._x, y: first._y } : null))

package/examples/parity.tsx

@@ -119,8 +119,8 @@ function App() {
     for (let i = 0; i < 200; i++) {
       let x = r() * W
       let y = r() * H
-      let a = nodes.pick(x, y)
-      let b = records.pick(x, y)
+      let a = nodes.pick(x, y)[0] ?? null
+      let b = records.pick(x, y)[0] ?? null
       let ai = a ? byNode.get(a) : null
       let bi = b ? byRec.get(b) : null
       if (ai !== bi) mismatches++
@@ -152,8 +152,8 @@ function App() {
     let child = addSprite(nodes, { parent: g, x: 50, y: 0, w: 10, h: 10 })
     setGroup(g, { rotation: Math.PI / 2 })
     queueMicrotask(() => {
-      check(nodes.pick(100, 150) === child, "group rotation carries the child sprite")
-      check(nodes.pick(150, 100) !== child, "the ungrouped position no longer hits")
+      check(nodes.pick(100, 150)[0] === child, "group rotation carries the child sprite")
+      check(nodes.pick(150, 100)[0] !== child, "the ungrouped position no longer hits")
       let f = getSprite(child)!
       check(f.x === 50 && f.y === 0, "getSprite reads the local pose")
       removeSprite(child)

package/examples/pick.tsx

@@ -1,29 +1,36 @@
-// Sprite pointer events through the component face: the built-in leaf
+// The layer's event model through the component face: the built-in leaf
 // carries the layer's handlers, so <Sprite onPointer*> props receive events
 // with LAYER-pixel coordinates and exact rotated-rect hit testing, topmost
-// sprite first. Drag a sprite to move it - the layer captures the pointer on
-// down, so the drag keeps delivering to the grabbed sprite even when the
-// pointer outruns it. A click (press and release without moving) cycles the
-// tint. Shift-click removes the sprite, exercising slot recycling (the
-// freed pose slot zeroes and waits for the next add); structure lives in a
-// signal, so <For> unmounts the removed <Sprite>.
+// sprite first, and the walk ends at the <SpriteLayer>'s own props. Drag a
+// sprite to move it - the sprite stops its down, which claims the press,
+// so the <Camera2d> at the root never pans under it; drag empty space to
+// pan, wheel to zoom. A tap on a sprite cycles its tint (onTap: the
+// dispatch's own click, no slop bookkeeping in app code); shift-tap
+// removes the sprite, exercising slot recycling (the freed pose slot zeroes
+// and waits for the next add); structure lives in a signal, so <For>
+// unmounts the removed <Sprite>. A tap on empty space reaches the layer
+// with e.sprite null. The layer FILLS the window (no width/height): layer
+// pixels are the leaf's own coordinates. The `state` debug command
+// returns the camera pose and every sprite's world position.
 import { createSignal, render, For } from "@solidrt/core"
-import { createAtlas, grid, setSprite, Sprite, SpriteLayer } from "@solidrt/2d"
-import type { Frame, SpriteHandle } from "@solidrt/2d"
+import { Camera2d, createAtlas, grid, setSprite, Sprite, SpriteLayer } from "@solidrt/2d"
+import type { Camera2dHandle, Frame, SpriteHandle } from "@solidrt/2d"
+import { registerDebug } from "srt:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
 
-const W = 720
-const H = 720
-
 const TINTS: [number, number, number, number][] = [
   [1, 1, 1, 1],
   [1, 0.5, 0.5, 1],
   [0.5, 1, 0.6, 1],
   [0.55, 0.7, 1, 1],
 ]
+const MAX_ZOOM = 4
 
 type Item = { id: number; x: number; y: number; frame: Frame }
 
+let cam: Camera2dHandle | undefined
+let handles = new Map<number, SpriteHandle>()
+
 function App() {
   let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
   let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
@@ -35,42 +42,47 @@ function App() {
   ])
 
   return (
-    <window alignItems="center" justifyContent="center">
-      <SpriteLayer width={W} height={H} atlas={atlas.texture} capacity={64} clearColor={[0.05, 0.05, 0.09, 1]}>
+    <window>
+      <SpriteLayer
+        atlas={atlas.texture}
+        capacity={64}
+        clearColor={[0.05, 0.05, 0.09, 1]}
+        onTap={e => {
+          if (e.sprite === null) console.log(`tap on empty space at ${e.x.toFixed(0)}, ${e.y.toFixed(0)} (x${e.tapCount})`)
+        }}
+      >
+        {/* A top-left pivot keeps world (0,0) at the leaf's corner, so the
+            authored positions read as window coordinates until panned. */}
+        <Camera2d maxZoom={MAX_ZOOM} pivot={{ x: 0, y: 0 }} ref={c => (cam = c)} />
         <For each={items()}>
           {item => {
             let tintIndex = 0
-            let down = false
-            let moved = false
-            let downX = 0
-            let downY = 0
             let handle: SpriteHandle | undefined
+            // Whether this sprite holds a press: onPointerMove also fires
+            // on plain hover, and only a captured move drags.
+            let pressed = false
             return (
               <Sprite
-                ref={s => (handle = s)}
+                ref={s => {
+                  handle = s
+                  handles.set(item.id, s)
+                }}
                 x={item.x}
                 y={item.y}
                 w={96}
                 h={96}
                 frame={item.frame}
+                // Claim the press: the camera never sees this pointer, so
+                // the captured moves drag the sprite, not the view.
                 onPointerDown={e => {
-                  down = true
-                  moved = false
-                  downX = e.x
-                  downY = e.y
+                  e.stopPropagation()
+                  pressed = true
                 }}
+                onPointerUp={() => (pressed = false)}
                 onPointerMove={e => {
-                  // onPointerMove also fires on plain hover; only a captured
-                  // move (button held since the down) drags. A few pixels of
-                  // slop keep an ordinary click from registering as a drag.
-                  if (!down) return
-                  if (!moved && Math.hypot(e.x - downX, e.y - downY) < 4) return
-                  moved = true
-                  if (handle) setSprite(handle, { x: e.x, y: e.y })
+                  if (pressed && handle) setSprite(handle, { x: e.x, y: e.y })
                 }}
-                onPointerUp={e => {
-                  down = false
-                  if (moved) return
+                onTap={e => {
                   if (e.shiftKey) {
                     setItems(items().filter(other => other.id !== item.id))
                     return
@@ -88,3 +100,8 @@ function App() {
 }
 
 render(() => <App />)
+
+registerDebug("state", () => ({
+  camera: cam?.camera() ?? null,
+  items: [...handles].filter(([, s]) => s.layer !== null).map(([id, s]) => ({ id, x: s._x, y: s._y })),
+}))

package/examples/tiles.tsx

@@ -13,7 +13,7 @@
 //
 // The atlas is the core logo sliced 2x2 by grid(); a real game would slice
 // a tileset sheet the same way.
-import { createSignal, onFrame, render } from "@solidrt/core"
+import { createSignal, onFrame, pct, render, windowSize } from "@solidrt/core"
 import { createAtlas, grid, TileLayer } from "@solidrt/2d"
 import type { TileCamera, TileLayerHandle } from "@solidrt/2d"
 import logoBytes from "./logo.png" with { type: "binary" }
@@ -21,9 +21,13 @@ import logoBytes from "./logo.png" with { type: "binary" }
 const COLS = 128
 const ROWS = 128
 const TILE = 48
-const VIEW = 720
 const WORLD = COLS * TILE
 
+// onFrame tick gap that logs as a hitch, as a factor of the display's
+// refresh period (onFrame's rate argument, so any refresh rate works):
+// past 1.5 periods a frame slot was missed while this animation ran.
+const HITCH_FACTOR = 1.5
+
 function App() {
   let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
   let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
@@ -56,17 +60,22 @@ function App() {
   // near the viewport bottom. Per-frame camera motion is one signal write
   // feeding the transform - never a re-bake.
   let [camera, setCamera] = createSignal<TileCamera>({})
-  onFrame(tick => {
+  let lastTick = 0
+  onFrame((tick, _frame, rate) => {
+    if (lastTick && tick - lastTick > (1000 / rate) * HITCH_FACTOR) console.log(`[hitch] ${(tick - lastTick).toFixed(1)}ms frame gap`)
+    lastTick = tick
     let t = tick / 6000
     let radius = 46 * TILE
+    // The path C + r(cos t, sin t) has tangent heading t + pi/2; the
+    // camera convention renders a heading h upward at rotation -h - pi/2.
+    let heading = t + Math.PI / 2
     setCamera({
       x: WORLD / 2 + Math.cos(t) * radius,
       y: WORLD / 2 + Math.sin(t) * radius,
-      // Circle tangent heading, rotated so "forward" renders upward.
-      rotation: -(t + Math.PI / 2),
+      rotation: -heading - Math.PI / 2,
       zoom: 0.9,
-      pivotX: VIEW / 2,
-      pivotY: VIEW * 0.78,
+      pivotX: windowSize().width / 2,
+      pivotY: windowSize().height * 0.78,
     })
   })
 
@@ -79,11 +88,11 @@ function App() {
   }, 500)
 
   return (
-    <window alignItems="center" justifyContent="center">
-      <view width={VIEW} height={VIEW} overflow="clip">
+    <window fullscreen>
+      <view width={pct(100)} height={pct(100)} overflow="clip">
         {/* Ground color: never-written regions render nothing, so the
             full-bleed backdrop is the container's, not the layer's. */}
-        <d-rect x={0} y={0} w={VIEW} h={VIEW} color="#0d0d17" />
+        <d-rect x={0} y={0} w={windowSize().width} h={windowSize().height} color="#0d0d17" />
         <TileLayer
           cols={COLS}
           rows={ROWS}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/2d",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -15,7 +15,7 @@
     "AGENTS.md"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.4",
-    "@solidrt/core": "0.0.55"
+    "@solidjs/signals": "2.0.0-rc.6",
+    "@solidrt/core": "0.0.56"
   }
 }