@solidrt/2d 0.0.56 → 0.0.58

package/README.md

@@ -7,12 +7,12 @@ texture element.
 *Status: experimental. Expect API churn.*
 
 ```tsx
-import { render } from "@solidrt/core"
+import { decodeImage, render } from "@solidrt/core"
 import { createAtlas, grid, Sprite, SpriteLayer } from "@solidrt/2d"
 import sheet from "./sheet.png" with { type: "binary" }
 
-let atlas = createAtlas(sheet, { filter: "nearest" })
-let frames = grid(4, 4, { width: atlas.width, height: atlas.height })
+let atlas = createAtlas(decodeImage(sheet), { filter: "nearest" })
+let frames = grid(atlas, 4, 4)
 
 render(() => (
   <window>

package/examples/README.md

@@ -12,27 +12,52 @@ copy one and adapt it.
   one texture may be) baked into lazily-allocated chunks, flown over by a
   ship-style camera (fixed screen pivot, the world panning and ROTATING
   under it via the `<TileLayer>` camera prop - transform writes, never a
-  re-bake), and a timer editing tiles to show that a `setTile` batch
-  re-bakes only the chunks it touches.
+  re-bake), seeded by ONE `setTiles` rect write over a Uint16Array of
+  frame indices (the layer's `frames` table; -1 where the world is
+  empty, and those chunks never allocate), and a timer editing tiles to
+  show that a `setTile` batch re-bakes only the chunks it touches.
 - `anim.tsx` - frame animation with `createAnimation`: three sprites share
   one looping clip (one clock, stepped by wall time independent of display
   rate) and a one-shot clip holds its last frame and fires `onEnd`.
   Self-asserting - watch the logs for ANIM-OK.
 - `camera.tsx` - the 2d camera (`createCamera2d`) over a world larger than
-  the window, attached at the layer's root (`cam.attach(layer)`): drag
-  empty space to pan with inertia, wheel/pinch to zoom about the pointer,
-  tap empty space to glide there (the layer's `onTap` with `e.sprite`
-  null), tap a sprite to select it, drag a sprite to move it (the sprite
-  stops its down, so the camera never pans under it), F to follow a
-  roaming sprite through a dead zone, R to spin the view, Space to fit the
-  world. The LAYER's `handlers` spread onto its leaf; `update(dt)` from
-  `onFrame` is the only per-frame call. Debug commands `camera`, `mode`,
-  `selected` and `first` drive it headless.
+  the window, driving the layer's one view from an input map the app
+  binds (`camera2dBindings` over the view's pointer feed, bridged from
+  the view's root with `feedPointer`, and any pad): drag empty space to
+  pan with inertia, wheel/pinch to zoom about the pointer, tap empty
+  space to glide there (the view's `onTap` with `e.sprite` null), tap a
+  sprite to select it, drag a sprite to move it (the sprite stops its
+  down, so the camera never pans under it), F to follow a roaming sprite
+  through a dead zone, R to spin the view, Space to fit the world. The
+  VIEW's `handlers` spread onto its leaf; `update(dt)` from `onFrame` is
+  the only per-frame call. Debug commands `camera`, `mode`, `selected`
+  and `first` drive it headless.
 - `pick.tsx` - the event model through the component face: exact
   rotated-rect hit testing topmost-first, `onTap` (the dispatch's own
   click, no slop bookkeeping), a claimed press dragging a sprite under a
   `<Camera2d>` that pans empty space and zooms on wheel, the layer's own
   `onTap` seeing misses with `e.sprite` null (and `tapCount` for double
   taps), and removal through a signal so `<For>` unmounts the `<Sprite>`
-  and the layer recycles the slot. The `state` debug command reads the
-  camera and sprite positions back.
+  and the layer recycles the slot. A corner `<View2d>` inset shows the
+  same sprites again under a `<Camera2d>` of its own (drag or wheel on
+  the inset moves only the inset's camera; a sprite tapped or dragged
+  there responds as in the main view). The `state` debug command reads
+  both cameras and the sprite positions back.
+- `views.tsx` - layer views (`layer.createView`, the only way a layer
+  shows): the world rendered twice from ONE set of sprites - the
+  window-filling main view under a `createCamera2d` and a corner minimap
+  showing the whole world at the fit zoom, a stroked rect outlining the
+  main view rect through `map.project`. A tap on the minimap glides the main camera there (the
+  view's root listener, `e.x`/`e.y` in world pixels), and a tap on a
+  sprite in the minimap selects it as in the main view (the same sprite
+  handlers, the walk ending at the view). Debug commands `state`,
+  `camera`, `selected` and `first` drive it headless.
+- `split-screen.tsx` - one `<SpriteLayer output={false}>` (sprites, no
+  leaf of its own) shown through two `<View2d>` panes filling the window
+  side by side, each with a `<Camera2d>` of its own following one of two
+  roaming sprites through a dead zone, so the two poses differ every
+  frame; wheel zooms a pane alone while its follow keeps tracking, a tap
+  on a sprite in either pane tints it in both (one sprite, two views).
+  Each pane's map binds `gamepad.next()`: the first pad to press any
+  button drives pane 0, the next pane 1. The `cameras` debug command
+  reads both poses back.

package/examples/anim.tsx

@@ -7,7 +7,7 @@
 // The atlas is the core logo sliced 2x2 by grid(): a 4-frame "clip". Real
 // art would slice a sheet the same way and pass a consecutive slice of the
 // frames array per animation.
-import { render } from "@solidrt/core"
+import { decodeImage, render } from "@solidrt/core"
 import { addSprite, createAnimation, createAtlas, createSpriteLayer, getSprite, grid } from "@solidrt/2d"
 import type { Frame, SpriteHandle } from "@solidrt/2d"
 import logoBytes from "./logo.png" with { type: "binary" }
@@ -21,12 +21,10 @@ const LOOP_FPS = 2
 const SHOT_FPS = 5
 
 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, {
-    clearColor: [0.05, 0.05, 0.09, 1],
-    label: "anim",
-  })
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let layer = createSpriteLayer(atlas.texture, { label: "anim" })
+  let view = layer.createView({ width: W, height: H, clearColor: [0.05, 0.05, 0.09, 1] })
 
   // Three sprites share the looping clip - one clock steps all of them.
   let looping = createAnimation(frames, LOOP_FPS)
@@ -78,7 +76,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/camera-probe.tsx

@@ -16,7 +16,7 @@
 // 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 { decodeImage, onFrame, render } from "@solidrt/core"
 import { readTexture } from "@solidrt/core/gpu"
 import {
   addSprite,
@@ -53,12 +53,14 @@ 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, { label: "cam-nodes" })
-  let records = createRecordLayer(W, H, atlas.texture, { label: "cam-records" })
-  nodes.setCamera(CAM)
-  records.setCamera(CAM)
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let nodes = createSpriteLayer(atlas.texture, { label: "cam-nodes" })
+  let records = createRecordLayer(atlas.texture, { label: "cam-records" })
+  let nodeView = nodes.createView({ width: W, height: H, label: "cam-nodes" })
+  let recordView = records.createView({ width: W, height: H, label: "cam-records" })
+  nodeView.setCamera(CAM)
+  recordView.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
@@ -103,8 +105,8 @@ function App() {
   }
 
   let shaderCheck = () => {
-    let img = readTexture(nodes.texture)
-    let n = nodes.oversample
+    let img = readTexture(nodeView.texture)
+    let n = nodeView.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")
@@ -118,8 +120,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
@@ -146,7 +148,7 @@ function App() {
     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({
+    nodeView.handlers.onPointerDown({
       localX: sx,
       localY: sy,
       pointerId: 1,
@@ -191,8 +193,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/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>
   )
 }