@solidrt/2d 0.0.67 → 0.0.68

package/examples/README.md

@@ -8,6 +8,15 @@ copy one and adapt it.
   frame rate, moved imperatively with `setSprite` from `onFrame` while the
   tree holds one texture leaf. Atlas from PNG bytes (`createAtlas`) sliced
   2x2 with `grid()`.
+- `atlases.tsx` - several atlases in ONE layer: the logo sheet and a
+  tileset built in code, declared together as the layer's `atlases`, its
+  sprites drawing from either and interleaved by `orderBy: "y"` across
+  both sheets in the one draw. The tileset is uploaded with `mipmap` for
+  the far zoom, so it goes through `extrudeGrid` first (a 4-texel gutter
+  of replicated edge pixels per cell, the returned options slicing the
+  repacked sheet): zoom out and the cells' rims stay crisp instead of
+  smearing the neighbour in. Wheel/pinch zooms, drag pans. Debug
+  commands `zoom` and `atlases` drive it headless.
 - `tiles.tsx` - the baked tile layer: a 128x128 world (6144px - bigger than
   one texture may be) baked into lazily-allocated chunks, flown over by a
   ship-style camera (fixed screen pivot, the world panning and ROTATING
@@ -52,6 +61,15 @@ copy one and adapt it.
   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.
+- `markers.tsx` - screen-size markers and an additive glow layer: two
+  layers under ONE `createCamera2d` (both views as targets), the world
+  layer carrying a constant-size pin per sprite (`minScreenPx` =
+  `maxScreenPx`), a label bar that never grows past 24 px (`maxScreenPx`)
+  and a selection ring that never shrinks under 48 px (`minScreenPx`,
+  gliding to the tapped sprite through a position transition), the glow
+  layer the same atlas on `blend: "add"` with haloes that add up to white
+  where they overlap. Picking follows the drawn size. Debug commands
+  `zoom`, `select` and `pick` 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
@@ -61,3 +79,14 @@ copy one and adapt it.
   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.
+- `text.tsx` - world-space text: a sprite font (`createSpriteFont`, the
+  runtime's glyph engine behind `flux:font`) declared as one more atlas of
+  the layer, each sprite carrying a name below it as a text run
+  (`addText`: a group of glyph sprites in the one draw, anchored on its
+  middle, an `outline` for the msdf kind), a counter re-set every half
+  second (`setText` reuses the run's sprite pool) and a title at twice
+  the face's size through the component face: a `<Text2d>` under a
+  `<SpriteLayer layer={layer} output={false}>` adopting the same
+  imperative layer. Wheel/pinch zooms, drag pans; the labels ride the
+  camera with no JS per label. Debug commands `zoom` and `state` drive
+  it headless.

package/examples/anim.tsx

@@ -24,7 +24,7 @@ const SHOT_FPS = 5
 function App() {
   let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
   let frames = grid(atlas, 2, 2)
-  let layer = createSpriteLayer(atlas.texture, { label: "anim" })
+  let layer = createSpriteLayer([atlas], { 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.

package/examples/atlases.tsx

@@ -0,0 +1,151 @@
+// Several atlases in ONE layer, and an extruded sheet under a zooming
+// camera. The layer declares two sheets - the core logo sliced 2x2, and a
+// tileset built in code (four solid 32 px cells with a dark one-texel
+// rim) - and its sprites draw from either, interleaved by `orderBy: "y"`
+// across both sheets in the one draw: the multi-texture batch of PixiJS
+// and Phaser, where Unity and Godot would break the batch on every
+// texture change. The tileset is uploaded with `mipmap` for the far zoom,
+// so it goes through `extrudeGrid` first: every cell gets a 4-texel gutter
+// of its own edge pixels, and mip levels 0 through 2 sample clean at the
+// cell edges (zoom out and the rims stay crisp; a plain sheet would smear
+// each rim with the neighbouring cell's colour). The returned options
+// slice the repacked sheet, so nothing downstream knows it was extruded.
+//
+// Wheel or pinch to zoom, drag empty space to pan.
+//
+// Debug commands: `zoom` ({ value, x?, y? }) parks the camera zoom (and
+// the world point at its pivot) and returns the pose; `atlases` returns
+// the layer's atlas list with each sheet's size and the frame each sprite
+// kind draws.
+import { createEffect, createInputMap, createPointerFeed, decodeImage, displayScale, onFrame, render, windowSize } from "@solidrt/core"
+import type { DecodedImage } from "@solidrt/core"
+import { addSprite, camera2dActions, camera2dBindings, createAtlas, createCamera2d, createSpriteLayer, extrudeGrid, feedPointer, fitOversample, grid } from "@solidrt/2d"
+import type { Camera2dHandle, ViewHandle } from "@solidrt/2d"
+import { registerDebug } from "sol:dev"
+import logoBytes from "./logo.png" with { type: "binary" }
+
+const WORLD = { width: 1600, height: 1000 }
+const COLUMNS = 8
+const ROWS = 5
+const SPRITE = 96
+// The tileset: four solid cells with a one-texel rim, extruded by this
+// gutter (a power of two; the cell size is a multiple of it).
+const CELL = 32
+const CELLS = 4
+const GUTTER = 4
+const RIM = 1
+const CELL_COLORS: [number, number, number][] = [
+  [230, 90, 70],
+  [90, 200, 120],
+  [80, 140, 240],
+  [240, 200, 80],
+]
+const RIM_COLOR: [number, number, number] = [20, 20, 30]
+const MIN_ZOOM = 0.05
+const MAX_ZOOM = 8
+// Largest frame step, seconds: a stall eases on from here.
+const MAX_DT = 0.1
+
+let cam!: Camera2dHandle
+let world!: ViewHandle
+
+/** The tileset's pixels: `CELLS` solid cells in a row, each rimmed. */
+function tileset(): DecodedImage {
+  let width = CELLS * CELL
+  let data = new Uint8Array(width * CELL * 4)
+  for (let cell = 0; cell < CELLS; cell++) {
+    let color = CELL_COLORS[cell]!
+    for (let y = 0; y < CELL; y++) {
+      for (let x = 0; x < CELL; x++) {
+        let rim = x < RIM || y < RIM || x >= CELL - RIM || y >= CELL - RIM
+        let [r, g, b] = rim ? RIM_COLOR : color
+        let i = (y * width + cell * CELL + x) * 4
+        data[i] = r
+        data[i + 1] = g
+        data[i + 2] = b
+        data[i + 3] = 255
+      }
+    }
+  }
+  return { data, width, height: CELL }
+}
+
+function App() {
+  let logo = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let logoFrames = grid(logo, 2, 2)
+  // The tileset, extruded for its mip chain: the repacked image goes to
+  // createAtlas, the returned options to grid.
+  let extruded = extrudeGrid(tileset(), CELLS, 1, GUTTER)
+  let tiles = createAtlas(extruded.image, { mipmap: true, label: "tiles-atlas" })
+  let tileFrames = grid(tiles, CELLS, 1, extruded.options)
+
+  let win = { width: 1, height: 1 }
+  // One layer over both sheets; y order interleaves them in the one draw.
+  let layer = createSpriteLayer([logo, tiles], { capacity: COLUMNS * ROWS, orderBy: "y", label: "atlases" })
+  world = layer.createView({ width: win.width, height: win.height, clearColor: [0.05, 0.05, 0.09, 1], label: "world" })
+
+  for (let i = 0; i < COLUMNS * ROWS; i++) {
+    let col = i % COLUMNS
+    let row = Math.floor(i / COLUMNS)
+    let x = (col + 0.5) * (WORLD.width / COLUMNS)
+    // Rows lean so that neighbours overlap and the y order shows.
+    let y = (row + 0.5) * (WORLD.height / ROWS) + (col % 2) * SPRITE * 0.4
+    let frame = (col + row) % 2 === 0 ? logoFrames[i % 4] : tileFrames[i % CELLS]
+    addSprite(layer, { x, y, w: SPRITE, h: SPRITE, frame })
+  }
+
+  cam = createCamera2d(world, { world: WORLD, minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM })
+  let pointer = createPointerFeed()
+  feedPointer(world, pointer)
+  let input = createInputMap(camera2dActions)
+  input.bind(camera2dBindings({ pointer }))
+  input.drive(cam.axes)
+
+  createEffect(
+    () => ({ size: windowSize(), scale: displayScale() }),
+    ({ size, scale }) => {
+      win.width = Math.max(1, size.width)
+      win.height = Math.max(1, size.height)
+      world.setSize(win.width, win.height)
+      world.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
+    cam.update(dt)
+  })
+  registerDebug("atlases", () => ({
+    atlases: layer.atlases.map(a => ({ texture: a.texture, width: a.width, height: a.height })),
+    logoFrame: logoFrames[0],
+    tileFrame: tileFrames[0],
+    extruded: { width: extruded.image.width, height: extruded.image.height, options: extruded.options },
+  }))
+
+  return (
+    <window>
+      <texture src={world.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...world.handlers} />
+      <view pointerEvents="none" gap={6} padding={20}>
+        <text color="#eef4ff" fontSize={24} fontWeight={700}>
+          Atlases
+        </text>
+        <text color="#a9bcd6" fontSize={15}>
+          two sheets, one layer, one draw - wheel or pinch to zoom, drag to pan - the rimmed tiles come from an extruded, mipmapped sheet and stay crisp at any zoom
+        </text>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)
+
+registerDebug("zoom", (args?: { value?: number; x?: number; y?: number }) => {
+  let pose: { zoom?: number; x?: number; y?: number } = {}
+  if (typeof args?.value === "number") pose.zoom = args.value
+  if (typeof args?.x === "number") pose.x = args.x
+  if (typeof args?.y === "number") pose.y = args.y
+  cam.set(pose)
+  return cam.pose()
+})

package/examples/camera-probe.tsx

@@ -24,7 +24,7 @@ import {
   createRecordLayer,
   createSpriteLayer,
   createTileLayer,
-  FULL_FRAME,
+  fullFrame,
   grid,
   projectCamera,
 } from "@solidrt/2d"
@@ -55,8 +55,8 @@ function rng(seed: number): () => number {
 function App() {
   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 nodes = createSpriteLayer([atlas], { label: "cam-nodes" })
+  let records = createRecordLayer([atlas], { 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)
@@ -82,13 +82,13 @@ function App() {
   // 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 })
+  let probe: SpriteHandle = addSprite(nodes, { x: 320, y: 320, w: 40, h: 40, frame: fullFrame(atlas) })
+  addSprite(records, { x: 320, y: 320, w: 40, h: 40, frame: fullFrame(atlas) })
 
   // 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 tiles = createTileLayer(8, 8, 16, 16, [atlas], { label: "cam-tiles" })
+  for (let i = 0; i < 8; i++) tiles.setTile(i, i, i === 2 ? fullFrame(atlas) : frames[i % 4]!)
 
   let failures: string[] = []
   let check = (ok: boolean, what: string) => {

package/examples/camera.tsx

@@ -73,7 +73,7 @@ function App() {
   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(atlas.texture, { capacity: COUNT + 1, label: "camera" })
+  let layer = createSpriteLayer([atlas], { 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] })
@@ -108,7 +108,6 @@ 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(view, {
-    viewport: () => win,
     world: WORLD,
     maxZoom: MAX_ZOOM,
     follow: { deadZone: DEAD_ZONE, hardLimits: HARD_LIMITS, damping: FOLLOW_DAMPING, lookahead: LOOKAHEAD },
@@ -128,7 +127,7 @@ function App() {
       if (e.sprite) return
       select(null)
       setFollowing(false)
-      cam.glideTo(e.x, e.y)
+      cam.glideTo({ x: e.x, y: e.y })
     },
   })
 

package/examples/markers.tsx

@@ -0,0 +1,185 @@
+// Screen-size markers and an additive glow layer over one world. Two
+// sprite layers share ONE camera (createCamera2d over both views keeps
+// them in step; the glow view's leaf takes no pointer): the world layer
+// holds the sprites, each with a PIN at its corner drawn at a constant 18
+// px (minScreenPx = maxScreenPx, the gizmo: `w`/`h` carry the aspect
+// alone), a LABEL bar over every fourth sprite that never grows past 24
+// px however far in you zoom (maxScreenPx alone), and the selection RING
+// that never shrinks under 48 px however far out (minScreenPx alone), so
+// the selected sprite stays findable at the overview. The glow layer is
+// the same atlas on a `blend: "add"` pipeline: half-lit haloes that
+// accumulate to white where they overlap, over the transparent clear.
+// Wheel or pinch to zoom, drag empty space to pan, tap a sprite to
+// select it (the ring glides along), tap empty space to deselect.
+// Picking follows the drawn size: `pick` takes the view's zoom, so a tap
+// lands on the ring where the ring is drawn.
+//
+// Debug commands: `zoom` ({ value, x?, y? }) parks the camera zoom (and
+// the world point at its pivot) and returns the pose; `select` ({ index })
+// selects a sprite (null clears) and
+// returns its world position, where the world view shows it (`at`, view
+// pixels) and the ring's; `pick` ({ x, y }) returns
+// what the world view hits at those VIEW pixels, as marker kinds.
+import { createEffect, createInputMap, createPointerFeed, decodeImage, displayScale, onFrame, render, windowSize } from "@solidrt/core"
+import { addSprite, camera2dActions, camera2dBindings, createAtlas, createCamera2d, createSpriteLayer, feedPointer, fitOversample, grid, setSprite, setSpriteTransition } from "@solidrt/2d"
+import type { Camera2dHandle, SpriteHandle, ViewHandle } from "@solidrt/2d"
+import { registerDebug } from "sol:dev"
+import logoBytes from "./logo.png" with { type: "binary" }
+
+const WORLD = { width: 1600, height: 1000 }
+const COLUMNS = 6
+const ROWS = 4
+const SPRITE = 64
+// The pin: a constant 18 px gizmo at the sprite's top-right corner.
+const PIN_PX = 18
+// The label bar over every fourth sprite: world-sized until the zoom
+// would grow it past 24 px tall.
+const LABEL_EVERY = 4
+const LABEL = { w: 120, h: 24 }
+const LABEL_MAX_PX = 24
+// The selection ring: world-sized until the zoom would shrink it under
+// 48 px.
+const RING = 96
+const RING_MIN_PX = 48
+// A halo on the glow layer, wider than the sprite spacing so neighbours
+// overlap, a quarter lit: where four meet they add up to white.
+const HALO = 320
+const HALO_TINT: [number, number, number, number] = [0.3, 0.2, 0.1, 0.25]
+const MIN_ZOOM = 0.08
+const MAX_ZOOM = 8
+// The ring's glide to a newly selected sprite.
+const RING_GLIDE = "260ms ease-out"
+// Largest frame step, seconds: a stall eases on from here.
+const MAX_DT = 0.1
+const SPRITE_TINT: [number, number, number, number] = [0.6, 0.7, 0.9, 1]
+const PIN_TINT: [number, number, number, number] = [1, 0.45, 0.35, 1]
+const LABEL_TINT: [number, number, number, number] = [0.35, 0.9, 0.6, 0.9]
+const RING_TINT: [number, number, number, number] = [1, 0.9, 0.4, 0.6]
+
+type Kind = "sprite" | "pin" | "label" | "ring"
+
+let cam!: Camera2dHandle
+let world!: ViewHandle
+let sprites: SpriteHandle[] = []
+let kinds = new Map<SpriteHandle, { kind: Kind; index: number }>()
+let ring!: SpriteHandle
+let selected: number | null = null
+
+function select(index: number | null) {
+  selected = index
+  if (index === null) {
+    setSprite(ring, { visible: false })
+    return
+  }
+  let s = sprites[index]!
+  setSprite(ring, { x: s._x, y: s._y, visible: true })
+}
+
+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], { capacity: 128, label: "markers" })
+  let glow = createSpriteLayer([atlas], { capacity: 64, blend: "add", label: "glow" })
+  world = layer.createView({ width: win.width, height: win.height, clearColor: [0.05, 0.05, 0.09, 1], label: "world" })
+  let glowView = glow.createView({ width: win.width, height: win.height, clearColor: [0, 0, 0, 0], label: "glow" })
+
+  for (let i = 0; i < COLUMNS * ROWS; i++) {
+    let x = ((i % COLUMNS) + 0.5) * (WORLD.width / COLUMNS)
+    let y = (Math.floor(i / COLUMNS) + 0.5) * (WORLD.height / ROWS)
+    let sprite = addSprite(layer, { x, y, w: SPRITE, h: SPRITE, frame: frames[i % 4], tint: SPRITE_TINT })
+    sprite.onTap = () => select(i)
+    sprites.push(sprite)
+    kinds.set(sprite, { kind: "sprite", index: i })
+    // The constant-size pin at the corner: equal bounds, the aspect from
+    // w/h (a square), drawn over the sprite.
+    let pin = addSprite(layer, { x: x + SPRITE / 2, y: y - SPRITE / 2, w: 1, h: 1, frame: frames[1], tint: PIN_TINT, minScreenPx: PIN_PX, maxScreenPx: PIN_PX })
+    kinds.set(pin, { kind: "pin", index: i })
+    if (i % LABEL_EVERY === 0) {
+      let label = addSprite(layer, { x, y: y - SPRITE, w: LABEL.w, h: LABEL.h, frame: frames[2], tint: LABEL_TINT, maxScreenPx: LABEL_MAX_PX })
+      kinds.set(label, { kind: "label", index: i })
+    }
+    addSprite(glow, { x, y, w: HALO, h: HALO, frame: frames[3], tint: HALO_TINT })
+  }
+  // The ring: added last so it draws over everything, hidden until a tap.
+  ring = addSprite(layer, { x: 0, y: 0, w: RING, h: RING, frame: frames[0], tint: RING_TINT, minScreenPx: RING_MIN_PX, visible: false })
+  setSpriteTransition(ring, { position: RING_GLIDE })
+  kinds.set(ring, { kind: "ring", index: -1 })
+
+  // One camera, both views: the glow follows the world exactly.
+  cam = createCamera2d([world, glowView], { world: WORLD, minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM })
+  let pointer = createPointerFeed()
+  feedPointer(world, pointer)
+  let input = createInputMap(camera2dActions)
+  input.bind(camera2dBindings({ pointer }))
+  input.drive(cam.axes)
+  world.listen({
+    onTap: e => {
+      if (e.sprite === null) select(null)
+    },
+  })
+
+  createEffect(
+    () => ({ size: windowSize(), scale: displayScale() }),
+    ({ size, scale }) => {
+      win.width = Math.max(1, size.width)
+      win.height = Math.max(1, size.height)
+      let oversample = fitOversample(scale, win.width, win.height, win.width * win.height * scale * scale)
+      for (let view of [world, glowView]) {
+        view.setSize(win.width, win.height)
+        view.setOversample(oversample)
+      }
+    },
+  )
+  let last = 0
+  onFrame(tick => {
+    let t = tick / 1000
+    let dt = Math.min(MAX_DT, Math.max(0, t - last))
+    last = t
+    cam.update(dt)
+  })
+
+  return (
+    <window>
+      <texture src={world.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...world.handlers} />
+      {/* The glow leaf composites over the world (alpha, its transparent
+          clear) and takes no pointer, so every tap reaches the world. */}
+      <texture src={glowView.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} pointerEvents="none" />
+      <view pointerEvents="none" gap={6} padding={20}>
+        <text color="#eef4ff" fontSize={24} fontWeight={700}>
+          Markers
+        </text>
+        <text color="#a9bcd6" fontSize={15}>
+          wheel or pinch to zoom - drag to pan - tap a sprite to ring it - pins hold 18 px, labels never pass 24 px, the ring never drops under 48 px - haloes add up
+        </text>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)
+
+registerDebug("zoom", (args?: { value?: number; x?: number; y?: number }) => {
+  let pose: { zoom?: number; x?: number; y?: number } = {}
+  if (typeof args?.value === "number") pose.zoom = args.value
+  if (typeof args?.x === "number") pose.x = args.x
+  if (typeof args?.y === "number") pose.y = args.y
+  cam.set(pose)
+  return cam.pose()
+})
+
+registerDebug("select", (args?: { index?: number | null }) => {
+  if (args && "index" in args) select(args.index ?? null)
+  let s = selected === null ? null : sprites[selected]!
+  return {
+    selected,
+    sprite: s ? { x: s._x, y: s._y, at: world.project(s._x, s._y) } : null,
+    ring: { x: ring._x, y: ring._y, visible: ring._visible },
+  }
+})
+
+registerDebug("pick", (args?: { x?: number; y?: number }) => {
+  let x = args?.x ?? 0
+  let y = args?.y ?? 0
+  return { zoom: world.camera().zoom, hits: world.pick(x, y).map(s => kinds.get(s) ?? null) }
+})

package/examples/parity.tsx

@@ -44,8 +44,8 @@ function rng(seed: number): () => number {
 function App() {
   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 nodes = createSpriteLayer([atlas], { capacity: 64, label: "nodes" })
+  let records = createRecordLayer([atlas], { 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" })
 

package/examples/pick.tsx

@@ -66,7 +66,7 @@ function App() {
   return (
     <window>
       <SpriteLayer
-        atlas={atlas.texture}
+        atlases={[atlas]}
         capacity={64}
         clearColor={[0.05, 0.05, 0.09, 1]}
         pointer={pointer}

package/examples/split-screen.tsx

@@ -73,7 +73,7 @@ function App() {
   }
   return (
     <window>
-      <SpriteLayer atlas={atlas.texture} capacity={COUNT + 2} output={false}>
+      <SpriteLayer atlases={[atlas]} capacity={COUNT + 2} output={false}>
         <view flexDirection="row" width="100%" height="100%">
           {paneView(0)}
           {paneView(1)}

package/examples/springs.tsx

@@ -44,7 +44,7 @@ const TRANSITION: SpriteTransition = {
 function App() {
   let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
   let frames = grid(atlas, 2, 2)
-  let layer = createSpriteLayer(atlas.texture, { capacity: COUNT, label: "springs" })
+  let layer = createSpriteLayer([atlas], { 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)

package/examples/sprites.tsx

@@ -23,7 +23,7 @@ const SPRITE = 48
 function App() {
   let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
   let frames = grid(atlas, 2, 2)
-  let layer = createSpriteLayer(atlas.texture, { capacity: COUNT, label: "bounce" })
+  let layer = createSpriteLayer([atlas], { 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

package/examples/text.tsx

@@ -0,0 +1,143 @@
+// World-space text: labels that ride the camera as glyph sprites. A sprite
+// font (`createSpriteFont`, the runtime's own glyph engine behind
+// `flux:font`) is one more atlas in the layer's list, and a text run
+// (`addText`, `<Text2d>`) is a group of glyph sprites drawn from it in the
+// same draw as the art - so the labels pan, zoom, sort and pick with the
+// sprites they belong to, with no per-label JS when the camera moves.
+// Each sprite carries a name below it, anchored on its middle; a counter
+// at the top re-sets its text every half second (the sprite pool of the
+// run is reused, glyphs re-framed in place); the title draws at twice
+// the face's size through the component face, a `<Text2d>` under a
+// `<SpriteLayer layer={layer} output={false}>` that adopts the same
+// imperative layer (the example's own view shows it), the same run under
+// props. Wheel or pinch to zoom, drag to pan.
+//
+// The cells are distance fields (the sprite font's default), so one atlas
+// keeps every label sharp across the zoom range and the `outline` draws;
+// "mask" cells would be exact at 1x and resample under zoom.
+//
+// Debug commands: `zoom` ({ value, x?, y? }) parks the camera and returns
+// the pose; `state` returns the counter's text and box, the first label's
+// box and sprite count, and the font atlas as it is now.
+import { createEffect, createInputMap, createPointerFeed, decodeImage, displayScale, onFrame, render, windowSize } from "@solidrt/core"
+import { addSprite, addText, camera2dActions, camera2dBindings, createAtlas, createCamera2d, createSpriteFont, createSpriteLayer, feedPointer, fitOversample, grid, setText, SpriteLayer, Text2d } from "@solidrt/2d"
+import type { Camera2dHandle, SpriteFont, TextRun, ViewHandle } from "@solidrt/2d"
+import { registerDebug } from "sol:dev"
+import logoBytes from "./logo.png" with { type: "binary" }
+
+const WORLD = { width: 1600, height: 1000 }
+const COLUMNS = 5
+const ROWS = 3
+const SPRITE = 72
+// The label font's size: what a run shapes at when it names none.
+const LABEL_PX = 18
+// The gap between a sprite's bottom and its label's top.
+const LABEL_GAP = 6
+// The counter re-sets its text at this interval (milliseconds).
+const COUNTER_EVERY_MS = 500
+const MIN_ZOOM = 0.2
+const MAX_ZOOM = 6
+// Largest frame step, seconds: a stall eases on from here.
+const MAX_DT = 0.1
+const SPRITE_TINT: [number, number, number, number] = [0.6, 0.7, 0.9, 1]
+const LABEL_TINT: [number, number, number, number] = [0.93, 0.96, 1, 1]
+const COUNTER_TINT: [number, number, number, number] = [1, 0.85, 0.4, 1]
+const OUTLINE: { color: [number, number, number]; width: number } = { color: [0.05, 0.05, 0.09], width: 2 }
+const NAMES = ["Alder", "Birch", "Cedar", "Elm", "Fir", "Hazel", "Larch", "Maple", "Oak", "Pine", "Rowan", "Spruce", "Willow", "Yew", "Aspen"]
+
+let cam!: Camera2dHandle
+let world!: ViewHandle
+let font!: SpriteFont
+let counter!: TextRun
+let labels: TextRun[] = []
+let ticks = 0
+
+function App() {
+  let atlas = createAtlas(decodeImage(logoBytes), { label: "logo-atlas" })
+  let frames = grid(atlas, 2, 2)
+  font = createSpriteFont({ fontFamily: "sans", fontSize: LABEL_PX, fontWeight: 600 }, { label: "labels" })
+  let win = { width: 1, height: 1 }
+  let layer = createSpriteLayer([atlas, font.atlas], { capacity: 512, label: "world", orderBy: "y" })
+  world = layer.createView({ width: win.width, height: win.height, clearColor: [0.05, 0.05, 0.09, 1], label: "world" })
+
+  for (let i = 0; i < COLUMNS * ROWS; i++) {
+    let x = ((i % COLUMNS) + 0.5) * (WORLD.width / COLUMNS)
+    let y = (Math.floor(i / COLUMNS) + 0.5) * (WORLD.height / ROWS)
+    addSprite(layer, { x, y, w: SPRITE, h: SPRITE, frame: frames[i % 4], tint: SPRITE_TINT })
+    // The name under the sprite, centered on it: the run's anchor is its
+    // middle, its top the gap below the sprite.
+    labels.push(addText(layer, { font, text: NAMES[i % NAMES.length]!, x, y: y + SPRITE / 2 + LABEL_GAP, anchor: "middle", tint: LABEL_TINT, outline: OUTLINE }))
+  }
+  counter = addText(layer, { font, text: "0 ticks", x: WORLD.width / 2, y: LABEL_PX, anchor: "middle", tint: COUNTER_TINT, outline: OUTLINE })
+
+  cam = createCamera2d([world], { world: WORLD, minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM })
+  let pointer = createPointerFeed()
+  feedPointer(world, pointer)
+  let input = createInputMap(camera2dActions)
+  input.bind(camera2dBindings({ pointer }))
+  input.drive(cam.axes)
+
+  createEffect(
+    () => ({ size: windowSize(), scale: displayScale() }),
+    ({ size, scale }) => {
+      win.width = Math.max(1, size.width)
+      win.height = Math.max(1, size.height)
+      world.setSize(win.width, win.height)
+      world.setOversample(fitOversample(scale, win.width, win.height, win.width * win.height * scale * scale))
+    },
+  )
+  let last = 0
+  let nextTick = COUNTER_EVERY_MS
+  onFrame(tick => {
+    let t = tick / 1000
+    let dt = Math.min(MAX_DT, Math.max(0, t - last))
+    last = t
+    cam.update(dt)
+    if (tick >= nextTick) {
+      nextTick += COUNTER_EVERY_MS
+      ticks++
+      setText(counter, { text: `${ticks} ${ticks === 1 ? "tick" : "ticks"}` })
+    }
+  })
+
+  return (
+    <window>
+      <texture src={world.texture} position="absolute" left={0} top={0} width={windowSize().width} height={windowSize().height} {...world.handlers} />
+      {/* The title, bottom center, bigger than the face: its glyphs scale
+          their distance-field cells and stay sharp. The component face over
+          the imperative layer: no view of its own, the texture above shows
+          it. */}
+      <SpriteLayer layer={layer} output={false}>
+        <Text2d font={font} text="World-space text" x={WORLD.width / 2} y={WORLD.height - LABEL_PX} fontSize={LABEL_PX * 2} anchor="middle" anchorY="bottom" tint={LABEL_TINT} outline={OUTLINE} />
+      </SpriteLayer>
+      <view pointerEvents="none" gap={6} padding={20}>
+        <text color="#eef4ff" fontSize={24} fontWeight={700}>
+          Text
+        </text>
+        <text color="#a9bcd6" fontSize={15}>
+          wheel or pinch to zoom - drag to pan - every label is a group of glyph sprites in the one draw, no JS per label when the camera moves
+        </text>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)
+
+registerDebug("zoom", (args?: { value?: number; x?: number; y?: number }) => {
+  let pose: { zoom?: number; x?: number; y?: number } = {}
+  if (typeof args?.value === "number") pose.zoom = args.value
+  if (typeof args?.x === "number") pose.x = args.x
+  if (typeof args?.y === "number") pose.y = args.y
+  cam.set(pose)
+  return cam.pose()
+})
+
+registerDebug("state", () => {
+  let first = labels[0]!
+  return {
+    counter: { text: counter.text, width: counter.width, height: counter.height, sprites: counter.sprites.length },
+    label: { text: first.text, width: first.width, height: first.height, sprites: first.sprites.length, visible: first.sprites.filter(s => s._visible).length },
+    atlas: { width: font.atlas.width, height: font.atlas.height, size: font.size },
+  }
+})

package/examples/tiles.tsx

@@ -112,7 +112,7 @@ function App() {
           rows={ROWS}
           tileW={TILE}
           tileH={TILE}
-          atlas={atlas.texture}
+          atlases={[atlas]}
           frames={frames}
           camera={camera()}
           label="tile-world"