@solidrt/2d 0.0.55 → 0.0.57

package/examples/pick.tsx

@@ -1,76 +1,111 @@
-// 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>.
-import { createSignal, render, For } from "@solidrt/core"
-import { createAtlas, grid, setSprite, Sprite, SpriteLayer } from "@solidrt/2d"
-import type { Frame, SpriteHandle } from "@solidrt/2d"
+// 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. 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" }
 
-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
+// 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 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]}
+        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 input={input} maxZoom={maxZoom()} 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
@@ -82,9 +117,27 @@ 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>
   )
 }
 
 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,41 +7,59 @@
 // 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, render } 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
 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 })
+  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.
@@ -56,17 +74,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,17 +102,18 @@ 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}
           tileW={TILE}
           tileH={TILE}
           atlas={atlas.texture}
+          frames={frames}
           camera={camera()}
           label="tile-world"
           ref={seed}

package/examples/views.tsx

@@ -0,0 +1,177 @@
+// Layer views (layer.createView): the world rendered twice from one set of
+// sprites - the window-filling main view under a pannable, zoomable camera
+// and a corner MINIMAP showing the whole world, no sprite mirrored. A view
+// is one more target over the layer's own instance buffers: the sprites
+// are added once, the roamer moves once, and both renderings follow at
+// zero per-frame JS beyond each camera's writes. The minimap carries the
+// layer's pointer dispatch under its own camera: a tap on it glides the
+// main camera to that world point (the view's root listener, `e.x`/`e.y`
+// in world pixels), and a tap on a sprite in the minimap selects it as it
+// would in the main view (the same sprite handlers, the walk ending at
+// the VIEW). A stroked rect over the minimap outlines the main camera's
+// view rect through `map.project`.
+//
+// Debug commands: `state` returns both cameras and the outline rect;
+// `camera` parks the main camera when given x/y/zoom and returns its
+// pose; `selected` the selected sprite's world position (null when none),
+// `first` the first sprite's - the one to aim a synthetic tap at.
+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 logoBytes from "./logo.png" with { type: "binary" }
+
+const WORLD = { width: 2400, height: 1600 }
+const COUNT = 300
+const SPRITE = 48
+const ROAMER = 72
+const MAX_ZOOM = 4
+// The minimap's pixel size: the whole world fitted into it.
+const MAP_WIDTH = 240
+const MAP_HEIGHT = 160
+const MAP_MARGIN = 16
+const TINT: [number, number, number, number] = [0.75, 0.8, 0.9, 1]
+const SELECTED_TINT: [number, number, number, number] = [1, 0.4, 0.4, 1]
+// Roamer figure-eight: rates in rad/s and the span as a fraction of the world.
+const ROAM_RATE_X = 0.23
+const ROAM_RATE_Y = 0.31
+const ROAM_SPAN = 0.4
+// Cap on a frame's dt in seconds, so a resumed app cannot leap.
+const MAX_DT = 0.1
+
+let cam!: Camera2dHandle
+let map!: ViewHandle
+let selected: SpriteHandle | null = null
+let first: SpriteHandle | null = null
+let outline = { x: 0, y: 0, width: 0, height: 0 }
+
+function App() {
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  let win = { width: 1, height: 1 }
+  let layer = createSpriteLayer(atlas.texture, { capacity: COUNT + 1, label: "world" })
+  // The main view: the window, under the pannable camera.
+  let main = layer.createView({ width: win.width, height: win.height, clearColor: [0.05, 0.05, 0.09, 1], label: "world" })
+  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,
+    })
+    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] })
+
+  // The minimap: the whole world at the fit zoom, world (0, 0) at the
+  // view's top-left (the default pivot), its own clear color.
+  let mapZoom = Math.min(MAP_WIDTH / WORLD.width, MAP_HEIGHT / WORLD.height)
+  map = layer.createView({
+    width: MAP_WIDTH,
+    height: MAP_HEIGHT,
+    camera: { zoom: mapZoom },
+    clearColor: [0.02, 0.02, 0.05, 0.85],
+    label: "minimap",
+  })
+
+  cam = createCamera2d(main, { viewport: () => win, world: WORLD, maxZoom: MAX_ZOOM })
+  // The main view's gestures and any pad drive the camera through a map;
+  // the minimap binds nothing (its tap glides through listen below).
+  let pointer = createPointerFeed()
+  feedPointer(main, pointer)
+  let input = createInputMap(camera2dActions)
+  input.bind(camera2dBindings({ pointer, gamepad: gamepad() }))
+  input.drive(cam.axes)
+  main.listen({
+    onTap: e => {
+      if (e.sprite === null) select(null)
+    },
+  })
+  // A tap on the minimap, sprite or not, glides the main camera there:
+  // the view's dispatch undoes the MAP camera, so e.x/e.y are world pixels.
+  map.listen({ onTap: e => 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)
+      main.setSize(win.width, win.height)
+      let budget = win.width * win.height * scale * scale
+      main.setOversample(fitOversample(scale, win.width, win.height, budget))
+      map.setOversample(fitOversample(scale, MAP_WIDTH, MAP_HEIGHT, budget))
+    },
+  )
+
+  // The main view's rect on the minimap, as a signal written only when the
+  // camera moved this frame.
+  let [rect, setRect] = createSignal(outline)
+  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 })
+    cam.update(dt)
+    let view = cam.viewRect()
+    let [x0, y0] = map.project(view.x, view.y)
+    let [x1, y1] = map.project(view.x + view.width, view.y + view.height)
+    if (x0 !== outline.x || y0 !== outline.y || x1 - x0 !== outline.width || y1 - y0 !== outline.height) {
+      outline = { x: x0, y: y0, width: x1 - x0, height: y1 - y0 }
+      setRect(outline)
+    }
+  })
+
+  return (
+    <window>
+      <texture src={main.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...main.handlers} />
+      <view pointerEvents="none" gap={6} padding={20}>
+        <text color="#eef4ff" fontSize={24} fontWeight={700}>
+          Views
+        </text>
+        <text color="#a9bcd6" fontSize={15}>
+          drag to pan, wheel or pinch to zoom - tap the minimap to glide there - tap a sprite in either view to select it
+        </text>
+      </view>
+      <view position="absolute" right={MAP_MARGIN} bottom={MAP_MARGIN} width={MAP_WIDTH} height={MAP_HEIGHT} overflow="clip">
+        <texture src={map.texture} width={MAP_WIDTH} height={MAP_HEIGHT} {...map.handlers} />
+        <rect
+          position="absolute"
+          left={rect().x}
+          top={rect().y}
+          width={rect().width}
+          height={rect().height}
+          drawStyle="stroke"
+          strokeWidth={1}
+          color="#ffffff"
+          pointerEvents="none"
+        />
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)
+
+registerDebug("state", () => ({ camera: cam.camera(), map: map.camera(), outline }))
+registerDebug("camera", (args?: Record<string, unknown>) => {
+  let pose: Record<string, number> = {}
+  for (let key of ["x", "y", "zoom"]) {
+    if (typeof args?.[key] === "number") pose[key] = args[key] as number
+  }
+  if (Object.keys(pose).length > 0) cam.set(pose)
+  return cam.camera()
+})
+registerDebug("selected", () => (selected && selected.layer !== null ? { x: selected._x, y: selected._y } : null))
+registerDebug("first", () => (first ? { x: first._x, y: first._y } : null))