@solidrt/2d 0.0.56 → 0.0.57

package/examples/camera.tsx

@@ -17,8 +17,8 @@
 // { 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 { createEffect, createInputMap, createPointerFeed, 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 } from "@solidrt/2d"
 import { registerDebug } from "srt:dev"
 import logoBytes from "./logo.png" with { type: "binary" }
@@ -55,15 +55,14 @@ let first: SpriteHandle | null = null
 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 })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
   // 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 layer = createSpriteLayer(atlas.texture, { capacity: COUNT + 1, label: "camera" })
+  // The layer's one view here: the window. The camera drives it and
+  // listens at its root.
+  let view = layer.createView({ width: win.width, height: win.height, clearColor: [0.05, 0.05, 0.09, 1] })
   let select = (sprite: SpriteHandle | null) => {
     if (selected) setSprite(selected, { tint: TINT })
     selected = sprite
@@ -94,16 +93,23 @@ function App() {
   }
   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, {
+  cam = createCamera2d(view, {
     viewport: () => win,
     world: WORLD,
     maxZoom: MAX_ZOOM,
     deadZone: DEAD_ZONE,
   })
-  cam.attach(layer)
+  // The camera's input: the view's pointer feed (fed from the view's root,
+  // after the sprites' claims) and any pad, bound to the control's actions
+  // (ARCHITECTURE.md: the app wires devices, the control takes the map).
+  let pointer = createPointerFeed()
+  feedPointer(view, pointer)
+  let input = createInputMap(camera2dActions)
+  input.bind(camera2dBindings({ pointer, gamepad: gamepad() }))
+  input.drive(cam.axes)
   // 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({
+  view.listen({
     onTap: e => {
       if (e.sprite) return
       select(null)
@@ -117,8 +123,8 @@ function App() {
     ({ 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))
+      view.setSize(win.width, win.height)
+      view.setOversample(fitOversample(scale, win.width, win.height, win.width * win.height * scale * scale))
     },
   )
 
@@ -152,7 +158,7 @@ function App() {
         }
       }}
     >
-      <texture src={layer.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...layer.handlers} />
+      <texture src={view.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...view.handlers} />
       <view pointerEvents="none" gap={6} padding={20}>
         <text color="#eef4ff" fontSize={24} fontWeight={700}>
           Camera

package/examples/parity.tsx

@@ -7,7 +7,7 @@
 // picking at random points, exercises pickRect, groups and slot recycling,
 // and benches addSprite plus a move-everything frame on both layers. Watch
 // the logs for PARITY/BENCH lines ending in PARITY-OK.
-import { onFrame, render } from "@solidrt/core"
+import { decodeImage, onFrame, render } from "@solidrt/core"
 import { readTexture } from "@solidrt/core/gpu"
 import {
   addGroup,
@@ -42,10 +42,12 @@ function rng(seed: number): () => number {
 }
 
 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, { capacity: 64, clearColor: [0.05, 0.05, 0.09, 1], label: "nodes" })
-  let records = createRecordLayer(W, H, atlas.texture, { capacity: 64, clearColor: [0.05, 0.05, 0.09, 1], label: "records" })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let nodes = createSpriteLayer(atlas.texture, { capacity: 64, label: "nodes" })
+  let records = createRecordLayer(atlas.texture, { capacity: 64, label: "records" })
+  let nodeView = nodes.createView({ width: W, height: H, clearColor: [0.05, 0.05, 0.09, 1], label: "nodes" })
+  let recordView = records.createView({ width: W, height: H, clearColor: [0.05, 0.05, 0.09, 1], label: "records" })
 
   let fields = (r: () => number) => ({
     x: 20 + r() * (W - 40),
@@ -89,8 +91,8 @@ function App() {
   }
 
   let pixelParity = () => {
-    let a = readTexture(nodes.texture)
-    let b = readTexture(records.texture)
+    let a = readTexture(nodeView.texture)
+    let b = readTexture(recordView.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
@@ -195,8 +197,8 @@ function App() {
 
   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} />
+      <texture src={nodeView.texture} width={W} height={H} />
+      <texture src={recordView.texture} width={W} height={H} />
     </window>
   )
 }

package/examples/pick.tsx

@@ -10,10 +10,16 @@
 // 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 { Camera2d, createAtlas, grid, setSprite, Sprite, SpriteLayer } from "@solidrt/2d"
+// pixels are the leaf's own coordinates. A corner <View2d> renders the
+// same sprites again under a <Camera2d> of its own: drag or wheel there
+// moves only the inset's camera, while a sprite tapped or dragged in the
+// inset responds exactly as in the main view (the same handlers, the
+// view's camera undone). The `state` debug command returns both camera
+// poses and every sprite's world position; `maxZoom` sets the main
+// <Camera2d maxZoom> prop live (a tighter range re-clamps the pose at
+// once - the props are live, only the pose props are initial values).
+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 logoBytes from "./logo.png" with { type: "binary" }
@@ -25,21 +31,37 @@ const TINTS: [number, number, number, number][] = [
   [0.55, 0.7, 1, 1],
 ]
 const MAX_ZOOM = 4
+// The inset: view pixels, its margin from the window's corner, and the
+// zoom that shows the four authored sprites whole inside it.
+const INSET_WIDTH = 240
+const INSET_HEIGHT = 160
+const INSET_MARGIN = 16
+const INSET_ZOOM = 0.25
 
 type Item = { id: number; x: number; y: number; frame: Frame }
 
 let cam: Camera2dHandle | undefined
+let insetCam: Camera2dHandle | undefined
 let handles = new Map<number, SpriteHandle>()
+let [maxZoom, setMaxZoom] = createSignal(MAX_ZOOM)
 
 function App() {
-  let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
-  let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
   let [items, setItems] = createSignal<Item[]>([
     { id: 0, x: 200, y: 240, frame: frames[0]! },
     { id: 1, x: 420, y: 300, frame: frames[1]! },
     { id: 2, x: 300, y: 470, frame: frames[2]! },
     { id: 3, x: 520, y: 500, frame: frames[3]! },
   ])
+  // One pointer feed and map per view: the layer's own view and the inset
+  // each drive their <Camera2d> from their own gestures and no other's.
+  let pointer = createPointerFeed()
+  let input = createInputMap(camera2dActions)
+  input.bind(camera2dBindings({ pointer }))
+  let insetPointer = createPointerFeed()
+  let insetInput = createInputMap(camera2dActions)
+  insetInput.bind(camera2dBindings({ pointer: insetPointer }))
 
   return (
     <window>
@@ -47,13 +69,14 @@ function App() {
         atlas={atlas.texture}
         capacity={64}
         clearColor={[0.05, 0.05, 0.09, 1]}
+        pointer={pointer}
         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)} />
+        <Camera2d input={input} maxZoom={maxZoom()} pivot={{ x: 0, y: 0 }} ref={c => (cam = c)} />
         <For each={items()}>
           {item => {
             let tintIndex = 0
@@ -94,6 +117,13 @@ function App() {
             )
           }}
         </For>
+        {/* A laid-out element among the layer's children renders where it
+            sits; the <View2d> inside stays a layer child through context. */}
+        <view position="absolute" right={INSET_MARGIN} bottom={INSET_MARGIN}>
+          <View2d width={INSET_WIDTH} height={INSET_HEIGHT} clearColor={[0.12, 0.1, 0.16, 1]} label="inset" pointer={insetPointer}>
+            <Camera2d input={insetInput} zoom={INSET_ZOOM} maxZoom={MAX_ZOOM} pivot={{ x: 0, y: 0 }} ref={c => (insetCam = c)} />
+          </View2d>
+        </view>
       </SpriteLayer>
     </window>
   )
@@ -101,7 +131,13 @@ function App() {
 
 render(() => <App />)
 
+registerDebug("maxZoom", (args?: { value?: number }) => {
+  if (typeof args?.value === "number") setMaxZoom(args.value)
+  return maxZoom()
+})
+
 registerDebug("state", () => ({
   camera: cam?.camera() ?? null,
+  inset: insetCam?.camera() ?? null,
   items: [...handles].filter(([, s]) => s.layer !== null).map(([id, s]) => ({ id, x: s._x, y: s._y })),
 }))

package/examples/split-screen.tsx

@@ -0,0 +1,111 @@
+// Split-screen: ONE layer of sprites shown through two views side by
+// side, each a full viewport with a camera of its own - the layer has no
+// output but its views (a Unity scene renders only through Cameras, a
+// Godot World2D only through Viewports). The <SpriteLayer output={false}>
+// owns the sprites and no leaf; its two <View2d> children fill the window
+// half each and follow one roaming sprite apiece through a <Camera2d>
+// with a dead zone, so the two poses differ every frame. Wheel inside a
+// pane zooms that pane alone (the follow keeps tracking under the zoom),
+// and so does the pad that joined it (press any button on it first);
+// a tap on a sprite in either pane tints it in both, since there is only
+// one sprite. The `cameras` debug command reads both poses back.
+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 logoBytes from "./logo.png" with { type: "binary" }
+
+const WORLD = { width: 2400, height: 1600 }
+const COUNT = 200
+const SPRITE = 48
+const ROAMER = 72
+// Roaming paths: angular rates (rad/s) and the fraction of the world
+// each roamer sweeps.
+const ROAM_RATE = [0.23, 0.31, 0.17, 0.29]
+const ROAM_SPAN = 0.4
+// The follow dead zone, as viewport fractions.
+const DEAD_ZONE = { width: 0.2, height: 0.25 }
+const PANE_ZOOM = 1.5
+const MAX_ZOOM = 4
+const TINT: [number, number, number, number] = [0.8, 0.85, 0.95, 1]
+const HIT: [number, number, number, number] = [1, 0.5, 0.5, 1]
+
+type Item = { id: number; x: number; y: number; frame: Frame }
+
+let cams: (Camera2dHandle | undefined)[] = [undefined, undefined]
+let roamers: (SpriteHandle | undefined)[] = [undefined, undefined]
+
+function App() {
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let items: Item[] = []
+  for (let i = 0; i < COUNT; i++) {
+    items.push({ id: i, x: Math.random() * WORLD.width, y: Math.random() * WORLD.height, frame: frames[i % 4]! })
+  }
+  // The window halves, live through windowSize (its first read is 0x0,
+  // hence the floor of 1): the views resize with the window.
+  let pane = () => ({ width: Math.max(1, Math.floor(windowSize().width / 2)), height: Math.max(1, windowSize().height) })
+  // The roamers move at frame rate; each <Camera2d> follows its own and
+  // runs its frames itself while the follow is settling.
+  onFrame(tick => {
+    let t = tick / 1000
+    for (let i = 0; i < 2; i++) {
+      let x = WORLD.width / 2 + Math.sin(t * ROAM_RATE[i * 2]!) * WORLD.width * ROAM_SPAN
+      let y = WORLD.height / 2 + Math.cos(t * ROAM_RATE[i * 2 + 1]!) * WORLD.height * ROAM_SPAN
+      let roamer = roamers[i]
+      if (roamer) setSprite(roamer, { x, y, rotation: t })
+      cams[i]?.follow(x, y)
+    }
+  })
+  // Two players, two maps: each pane's <Camera2d> takes its own pane's
+  // gestures and its own pad, and nothing crosses over. The pads seat in
+  // pick-up order: the first pad to press any button joins pane 0, the
+  // next joins pane 1 (gamepad.next(); gamepad(i) would pin the slots).
+  let paneView = (i: number) => {
+    let pointer = createPointerFeed()
+    let input = createInputMap(camera2dActions)
+    input.bind(camera2dBindings({ pointer, gamepad: gamepad.next() }))
+    return (
+      <View2d width={pane().width} height={pane().height} clearColor={i === 0 ? [0.05, 0.05, 0.09, 1] : [0.09, 0.05, 0.05, 1]} label={`pane-${i}`} pointer={pointer}>
+        <Camera2d input={input} world={WORLD} zoom={PANE_ZOOM} maxZoom={MAX_ZOOM} deadZone={DEAD_ZONE} ref={c => (cams[i] = c)} />
+      </View2d>
+    )
+  }
+  return (
+    <window>
+      <SpriteLayer atlas={atlas.texture} capacity={COUNT + 2} output={false}>
+        <view flexDirection="row" width="100%" height="100%">
+          {paneView(0)}
+          {paneView(1)}
+        </view>
+        <For each={items}>
+          {item => {
+            let handle: SpriteHandle | undefined
+            let hit = false
+            return (
+              <Sprite
+                ref={s => (handle = s)}
+                x={item.x}
+                y={item.y}
+                w={SPRITE}
+                h={SPRITE}
+                frame={item.frame}
+                tint={TINT}
+                onTap={() => {
+                  hit = !hit
+                  if (handle) setSprite(handle, { tint: hit ? HIT : TINT })
+                }}
+              />
+            )
+          }}
+        </For>
+        <Sprite ref={s => (roamers[0] = s)} x={WORLD.width / 2} y={WORLD.height / 2} w={ROAMER} h={ROAMER} frame={frames[0]!} tint={[1, 0.8, 0.3, 1]} />
+        <Sprite ref={s => (roamers[1] = s)} x={WORLD.width / 2} y={WORLD.height / 2} w={ROAMER} h={ROAMER} frame={frames[3]!} tint={[0.4, 0.9, 1, 1]} />
+      </SpriteLayer>
+    </window>
+  )
+}
+
+render(() => <App />)
+
+registerDebug("cameras", () => cams.map(c => c?.camera() ?? null))

package/examples/springs.tsx

@@ -13,7 +13,7 @@
 // random angle always takes the short arc, and the position spring keeps
 // its velocity when a shuffle lands mid-flight - retarget as fast as you
 // like, the motion stays continuous.
-import { render } from "@solidrt/core"
+import { decodeImage, render } from "@solidrt/core"
 import { addSprite, createAtlas, createSpriteLayer, grid, setSprite, setSpriteTransition } from "@solidrt/2d"
 import logoBytes from "./logo.png" with { type: "binary" }
 
@@ -25,13 +25,10 @@ const H = 720
 const SPRITE = 30
 
 function App() {
-  let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
-  let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
-  let layer = createSpriteLayer(W, H, atlas.texture, {
-    capacity: COUNT,
-    clearColor: [0.05, 0.05, 0.09, 1],
-    label: "springs",
-  })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let layer = createSpriteLayer(atlas.texture, { capacity: COUNT, label: "springs" })
+  let view = layer.createView({ width: W, height: H, clearColor: [0.05, 0.05, 0.09, 1] })
 
   let slotX = (slot: number) => ((slot % COLS) + 0.5) * (W / COLS)
   let slotY = (slot: number) => (Math.floor(slot / COLS) + 0.5) * (H / ROWS)
@@ -61,7 +58,7 @@ function App() {
 
   return (
     <window alignItems="center" justifyContent="center">
-      <texture src={layer.texture} width={W} height={H} />
+      <texture src={view.texture} width={W} height={H} />
     </window>
   )
 }

package/examples/sprites.tsx

@@ -8,10 +8,10 @@
 // instance-buffer write per frame.
 //
 // The atlas is a real image (core's logo) sliced 2x2 by grid(): four frames,
-// each sprite drawing one quarter. An atlas from raw pixel bytes would use
-// createTexture directly; this path (createAtlas) decodes PNG bytes imported
-// with { type: "binary" }.
-import { onFrame, render } from "@solidrt/core"
+// each sprite drawing one quarter. Pixels built in code go to createAtlas as
+// they are; this path decodes PNG bytes imported with { type: "binary" }
+// first.
+import { decodeImage, onFrame, render } from "@solidrt/core"
 import { addSprite, createAtlas, createSpriteLayer, grid, setSprite } from "@solidrt/2d"
 import logoBytes from "./logo.png" with { type: "binary" }
 
@@ -21,13 +21,10 @@ const H = 720
 const SPRITE = 48
 
 function App() {
-  let atlas = createAtlas(logoBytes, { label: "logo-atlas" })
-  let frames = grid(2, 2, { width: atlas.width, height: atlas.height })
-  let layer = createSpriteLayer(W, H, atlas.texture, {
-    capacity: COUNT,
-    clearColor: [0.05, 0.05, 0.09, 1],
-    label: "bounce",
-  })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let layer = createSpriteLayer(atlas.texture, { capacity: COUNT, label: "bounce" })
+  let view = layer.createView({ width: W, height: H, clearColor: [0.05, 0.05, 0.09, 1] })
 
   // Simulation state lives in plain arrays; the layer holds the published
   // snapshot of it.
@@ -73,7 +70,7 @@ function App() {
 
   return (
     <window alignItems="center" justifyContent="center">
-      <texture src={layer.texture} width={W} height={H} />
+      <texture src={view.texture} width={W} height={H} />
     </window>
   )
 }

package/examples/tiles.tsx

@@ -7,15 +7,23 @@
 // The camera flies a ship-style path: a fixed screen pivot near the bottom
 // of the viewport, the world panning and ROTATING under it so the flight
 // heading always points up - the <TileLayer> camera prop with rotation and
-// pivot (a leaf transform, never a re-bake). A timer edits tiles while it
-// runs: beacon markers along the road's center line blink, and each blink's
-// batch of setTile calls re-bakes only the chunks the beacons land in.
+// pivot (a leaf transform, never a re-bake). The world is seeded by ONE
+// setTiles rect write over a Uint16Array of frame indices (-1 where the
+// world is empty), the shape a generator or a worker produces; a timer
+// edits tiles while it runs: beacon markers along the road's center line
+// blink, and each blink's batch of setTile calls re-bakes only the chunks
+// the beacons land in.
 //
 // The atlas is the core logo sliced 2x2 by grid(); a real game would slice
-// a tileset sheet the same way.
-import { createSignal, onFrame, pct, render, windowSize } from "@solidrt/core"
+// a tileset sheet the same way, and the array is the layer's `frames`
+// table the indices name.
+//
+// Debug commands: `state` (resident chunk count) and `cell` ({ col, row }:
+// the frame at a cell, null when empty).
+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 logoBytes from "./logo.png" with { type: "binary" }
 
 const COLS = 128
@@ -29,23 +37,29 @@ const WORLD = COLS * TILE
 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 })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
 
   let layer!: TileLayerHandle
   let seed = (l: TileLayerHandle) => {
     layer = l
     // A solid ring "road" around the world center: continuous under the
     // flight path, empty everywhere else - the empty regions are the point,
-    // their chunks never allocate.
+    // their chunks never allocate, since a rect write allocates a chunk
+    // only for the first frame it carries there. -1 is the clear (a
+    // Uint16Array holds it as 0xffff, the same bits).
     let c = COLS / 2
+    let cells = new Uint16Array(COLS * ROWS).fill(-1)
     for (let row = 0; row < ROWS; row++) {
       for (let col = 0; col < COLS; col++) {
         let d = Math.hypot(col - c, row - c)
-        if (d > 40 && d < 52) l.setTile(col, row, frames[(col ^ row) % 4]!)
+        if (d > 40 && d < 52) cells[row * COLS + col] = (col ^ row) % 4
       }
     }
+    l.setTiles(0, 0, COLS, ROWS, cells)
   }
+  registerDebug("state", () => ({ chunks: layer.chunks.length }))
+  registerDebug("cell", (args?: { col?: number; row?: number }) => layer.getTile(args?.col ?? 0, args?.row ?? 0))
 
   // Beacon cells on the road's center line every 7.5 degrees; the interval
   // below blinks them between a marker frame and the road pattern.
@@ -99,6 +113,7 @@ function App() {
           tileW={TILE}
           tileH={TILE}
           atlas={atlas.texture}
+          frames={frames}
           camera={camera()}
           label="tile-world"
           ref={seed}