@solidrt/2d 0.0.55 → 0.0.57

package/src/views.ts

@@ -0,0 +1,294 @@
+// A layer's views: every rendering of a layer's world is a view - one
+// draw target holding ONE entry over the layer's pipeline and instance
+// buffers, with a camera and a viewport of its own - and a layer has no
+// output but its views (Unity's scene renders only through Cameras,
+// Godot's World2D only through Viewports; @solidrt/3d's scene.createView
+// one dimension down). The window-filling main view, the minimap, the
+// radar strip, the zoomed inset, two split-screen panes: all the same
+// object. No sprite is mirrored, no record is written twice, and the
+// core's key-order gather (the entry's instanceOrder) happens in the
+// buffers at publish: ONE entry per buffer declares the order - the first
+// live view's, re-homed to the next when that view goes - and every other
+// entry reads the buffers already sorted. The layer fans buffer swaps
+// (growth), the instance count and the tint out to every view through
+// the registry below; the camera and the viewport are each view's own
+// params, so a view costs no per-frame JS beyond its camera writes.
+// Pointer events run the layer's dispatch (dispatch.ts) with the view's
+// camera undone over the layer's pick, the view as the root of the walk:
+// a sprite under a minimap gets its ordinary handlers, and the view's
+// listeners are the last stop.
+import { addDraw, createDrawTarget, destroyTexture, removeDraw, setDrawBuffers, setDrawRange, setTargetParams, setTargetSize } from "@solidrt/core/gpu"
+import type { BufferId, BufferUpdate, DrawId, InstanceOrder, RenderPipelineId, TextureId } from "@solidrt/core/gpu"
+import { applyCamera, cameraParams, checkCamera, defaultCamera, projectCamera, unprojectCamera } from "./camera.ts"
+import type { CameraState, CameraUpdate } from "./camera.ts"
+import { spriteDispatch } from "./dispatch.ts"
+import type { PointerFeed } from "@solidrt/core"
+import type { LayerPointerListener, Sprite, SpriteHandlers } from "./layer.ts"
+import { checkOversample, thrashSentinel } from "./oversample.ts"
+
+export type ViewOptions = {
+  /** View pixels: the viewport its camera maps the world onto. */
+  width: number
+  height: number
+  /** The camera to start from (a setCamera update); default the identity. */
+  camera?: CameraUpdate
+  /** Target texels per view pixel (see ViewHandle.setOversample); default 1. */
+  oversample?: number
+  clearColor?: [number, number, number, number]
+  label?: string
+}
+
+/**
+ * A view of a layer (LayerBase.createView): the viewport contract -
+ * texture, size, oversample, camera and pointer dispatch - over the
+ * layer's sprites, with a camera of its own. The sprites are the layer's:
+ * add, write and pick through the layer, tint through the layer (every
+ * view follows it). `dispose` is idempotent; views also die with their
+ * layer.
+ */
+export type ViewHandle = {
+  /** The view's output: an ordinary texture id (`<texture src>`). */
+  texture: TextureId
+  /** Element handlers wiring the view's pointer events (sprites, groups
+   * and the root listeners); see handlersFor. */
+  handlers: SpriteHandlers
+  /** View pixels, as created or last set by setSize. */
+  readonly width: number
+  readonly height: number
+  setSize(width: number, height: number): void
+  /**
+   * Listen at the root of the event walk. Every down, move, up, wheel and
+   * tap arrives here after the hit sprite and its enclosing groups
+   * (`sprite` set) or as the walk's only stop over empty space (`sprite`
+   * null), unless a handler stopped it on the way. Listeners run in
+   * registration order and all of them run - the root is the last stop,
+   * there is nothing left to claim. Returns the remover. The app's own
+   * root handling (deselect on a miss, a marquee) and controls
+   * (createCamera2d's attach) meet here, which is why the root is a list
+   * where a sprite has plain fields.
+   */
+  listen(listener: LayerPointerListener): () => void
+  /** Target texels per view pixel; see setOversample. */
+  readonly oversample: number
+  /**
+   * Re-render at `n` target texels per view pixel (positive integer): the
+   * target resizes in place at its stable id; view pixels, records, camera
+   * and picking are untouched. Pick `n` as the ceiling of the device pixels
+   * one view pixel covers on screen (display scale times any designSize
+   * fit or layout scaling), which the components do in onLayout.
+   */
+  setOversample(n: number): void
+  setCamera(update: CameraUpdate): void
+  /** The camera as last set (a fresh object per call, every field
+   * present): the argument for projectCamera/unprojectCamera -
+   * @solidrt/3d's scene.camera(). */
+  camera(): CameraState
+  /** World (layer) pixels -> view pixels under the current camera:
+   * projectCamera over camera(). */
+  project(x: number, y: number): [number, number]
+  /** View pixels -> world (layer) pixels, the inverse: what pointer
+   * dispatch applies to every event. */
+  unproject(x: number, y: number): [number, number]
+  /**
+   * handlers for a leaf whose LAYOUT size differs from the view size
+   * (events scale by view/layout; a leaf laid out AT view size just uses
+   * `handlers`). `layout` is read per event, so a resize-reactive layout
+   * just works - @solidrt/3d's handlersFor, one dimension down.
+   */
+  handlersFor(layout: () => { width: number; height: number }): SpriteHandlers
+  dispose(): void
+}
+
+// What a layer hands its views: the pipeline and quad every entry draws
+// with, the atlas, the key order one entry declares, and live reads of
+// the state the layer fans out.
+export type ViewDeps = {
+  label: string
+  pipeline: RenderPipelineId
+  quad: BufferId
+  atlas: TextureId
+  /** The layer's current instance binding, in the entry's own spelling
+   * (`instanceBuffers` on the node layer, `instanceBuffer` on records). */
+  buffers: () => BufferUpdate
+  /** The instance count as last published. */
+  count: () => number
+  tint: () => [number, number, number, number]
+  pick: (x: number, y: number) => Sprite[]
+  /** The layer's key order (`orderBy`), declared by ONE live entry. */
+  order?: InstanceOrder
+}
+
+/** The layer side of its views: create, and fan out what changes. */
+export type Views = {
+  create(opts: ViewOptions): ViewHandle
+  /** The layer swapped its instance buffers (growth): every entry
+   * follows. */
+  setBuffers(update: BufferUpdate): void
+  setCount(count: number): void
+  setTint(tint: [number, number, number, number]): void
+  dispose(): void
+}
+
+type ViewRecord = { texture: TextureId; entry: DrawId; dispose(): void }
+
+export function createViews(deps: ViewDeps): Views {
+  let views = new Set<ViewRecord>()
+  // The one entry declaring the key order (null until a view exists, or
+  // while the layer has no order).
+  let ordered: ViewRecord | null = null
+  let entryFor = (texture: TextureId, order: InstanceOrder | undefined): DrawId =>
+    addDraw(texture, deps.pipeline, null, {
+      buffer: deps.quad,
+      vertexCount: 4,
+      ...deps.buffers(),
+      instanceOrder: order,
+      instanceCount: deps.count(),
+    })
+  // The ordered view went: the next live view re-adds its entry with the
+  // order, so key order survives any one view's lifetime.
+  let rehome = () => {
+    if (deps.order === undefined) return
+    let next = views.values().next().value
+    if (!next) return
+    removeDraw(next.texture, next.entry)
+    next.entry = entryFor(next.texture, deps.order)
+    ordered = next
+  }
+  return {
+    create(opts) {
+      let width = opts.width
+      let height = opts.height
+      if (!(Number.isInteger(width) && width > 0 && Number.isInteger(height) && height > 0)) {
+        throw new Error(`createView: width and height must be positive integers, got ${width} x ${height}`)
+      }
+      let oversample = opts.oversample ?? 1
+      checkOversample("createView", oversample, width, height)
+      let label = opts.label ?? `${deps.label}-view`
+      let cam = defaultCamera()
+      if (opts.camera) {
+        checkCamera(opts.camera)
+        applyCamera(cam, opts.camera)
+      }
+      let texture = createDrawTarget(
+        width * oversample,
+        height * oversample,
+        { uViewport: [width, height], ...cameraParams(cam), uTint: deps.tint() },
+        { textures: { uAtlas: deps.atlas }, clearColor: opts.clearColor ?? [0, 0, 0, 0], label, autoFree: false },
+      )
+      let order = ordered === null ? deps.order : undefined
+      let entry = entryFor(texture, order)
+      let thrash = thrashSentinel(`view "${label}"`)
+      let disposed = false
+      let listeners = new Set<LayerPointerListener>()
+      let record: ViewRecord = {
+        texture,
+        entry,
+        dispose() {
+          if (disposed) return
+          disposed = true
+          listeners.clear()
+          views.delete(record)
+          // The entry dies with its target, releasing the buffers' order.
+          destroyTexture(texture)
+          if (ordered === record) {
+            ordered = null
+            rehome()
+          }
+        },
+      }
+      if (order !== undefined) ordered = record
+      let view: ViewHandle = {
+        texture,
+        handlers: undefined as unknown as SpriteHandlers,
+        get width() {
+          return width
+        },
+        get height() {
+          return height
+        },
+        setSize(w, h) {
+          if (disposed || (w === width && h === height)) return
+          checkOversample("setSize", oversample, w, h)
+          width = w
+          height = h
+          setTargetSize(texture, w * oversample, h * oversample)
+          setTargetParams(texture, { uViewport: [w, h] })
+        },
+        listen(listener) {
+          listeners.add(listener)
+          return () => {
+            listeners.delete(listener)
+          }
+        },
+        get oversample() {
+          return oversample
+        },
+        setOversample(n) {
+          if (disposed || n === oversample) return
+          checkOversample("setOversample", n, width, height)
+          thrash()
+          oversample = n
+          setTargetSize(texture, width * n, height * n)
+        },
+        setCamera(update) {
+          if (disposed) return
+          checkCamera(update)
+          applyCamera(cam, update)
+          setTargetParams(texture, cameraParams(cam))
+        },
+        camera() {
+          return { ...cam }
+        },
+        project(x, y) {
+          return projectCamera(cam, x, y)
+        },
+        unproject(x, y) {
+          return unprojectCamera(cam, x, y)
+        },
+        handlersFor(layout) {
+          return dispatch(layout)
+        },
+        dispose: record.dispose,
+      }
+      let dispatch = spriteDispatch({
+        size: () => [width, height],
+        camera: () => cam,
+        pick: deps.pick,
+        root: view,
+        listeners,
+      })
+      view.handlers = dispatch(null)
+      views.add(record)
+      return view
+    },
+    setBuffers(update) {
+      for (let v of views) setDrawBuffers(v.texture, v.entry, update)
+    },
+    setCount(count) {
+      for (let v of views) setDrawRange(v.texture, v.entry, { instanceCount: count })
+    },
+    setTint(tint) {
+      for (let v of views) setTargetParams(v.texture, { uTint: tint })
+    },
+    dispose() {
+      for (let v of [...views]) v.dispose()
+    },
+  }
+}
+
+/**
+ * Feed a pointer feed (createPointerFeed) from a view's root: the events
+ * the sprites let through - a sprite that claims its press
+ * (stopPropagation on its down) keeps a camera bound to the feed out of
+ * that drag, a drag on empty space or an unclaimed sprite pans, a wheel
+ * anywhere zooms. Returns the detach. The components do this for their
+ * `pointer` prop; an imperative view calls it directly.
+ */
+export function feedPointer(view: ViewHandle, feed: PointerFeed): () => void {
+  return view.listen({
+    onPointerDown: e => feed.handlers.onPointerDown(e.native),
+    onPointerMove: e => feed.handlers.onPointerMove(e.native),
+    onPointerUp: e => feed.handlers.onPointerUp(e.native),
+    onWheel: e => feed.handlers.onWheel(e.native),
+  })
+}

package/src/components.tsx

@@ -1,357 +0,0 @@
-// The Solid face: PascalCase components over context, syncing the retained
-// layer (layer.ts) - no new intrinsic elements, no renderer changes. Props
-// follow the Solid 2.0 model (reactive values, no destructuring); effects
-// write into the retained records and the runtime's dirty flush renders.
-// Anything moving at frame rate can bypass the declarative layer: grab the
-// sprite with `ref` and call setSprite from onFrame - signals carry
-// structure and slow state, per-frame motion goes straight to the layer.
-// The same split, with the same reasoning, as @solidrt/3d's components.
-import { createContext, createEffect, createSignal, displayScale, For, getBoundingBoxViewport, onCleanup, onLayout, untrack, useContext, windowSize } from "@solidrt/core"
-import type { Element, ParentComponent, TextureId, VoidComponent } from "@solidrt/core"
-import type { FilterMode } from "@solidrt/core/gpu"
-import { addGroup, addSprite, createSpriteLayer, removeGroup, removeSprite, setGroup, setGroupTransition, setSprite, setSpriteTransition } from "./layer.ts"
-import type { NodeTransition } from "flux:spatial"
-import type { CameraUpdate, Sprite as SpriteHandle, SpriteGroup, SpriteLayer as LayerHandle, SpriteOptions, SpritePointerEvent, TransitionEndEvent } from "./layer.ts"
-import { fitOversample } from "./oversample.ts"
-
-// The window's device pixel count: the texel budget an auto-picked
-// oversample target stays within (see fitOversample).
-function windowTexels(): number {
-  let win = windowSize()
-  let scale = displayScale()
-  return win.width * scale * (win.height * scale)
-}
-import { createTileLayer } from "./tiles.ts"
-import type { TileChunk, TileLayer as TileLayerHandle } from "./tiles.ts"
-
-let LayerContext = createContext<LayerHandle>()
-
-/**
- * The enclosing layer - the imperative escape hatch inside a component
- * subtree (throws outside a `<SpriteLayer>`).
- */
-export function useSpriteLayer(): LayerHandle {
-  return useContext(LayerContext)
-}
-
-export type SpritePointerProps = {
-  onPointerDown?: (event: SpritePointerEvent) => void
-  onPointerMove?: (event: SpritePointerEvent) => void
-  onPointerUp?: (event: SpritePointerEvent) => void
-  onPointerEnter?: (event: SpritePointerEvent) => void
-  onPointerLeave?: (event: SpritePointerEvent) => void
-}
-
-export type SpriteLayerProps = {
-  /** Layer pixels. With `output`, the leaf's own width/height are layout, so
-   * render size and display size separate. */
-  width: number
-  height: number
-  /** The atlas texture every sprite samples (create with createAtlas). */
-  atlas: TextureId
-  /** Initial record reservation (grows on demand); default 1024. */
-  capacity?: number
-  clearColor?: [number, number, number, number]
-  /** Pan/zoom over the world; a shared-params write, never per-sprite. */
-  camera?: CameraUpdate
-  /**
-   * Target texels per layer pixel. Absent, the component picks it every
-   * layout from the built-in leaf's on-screen size (display scale, any
-   * designSize fit, layout scaling), so the layer resamples properly at any
-   * scale; with `output` there is no built-in leaf, so set it yourself.
-   */
-  oversample?: number
-  label?: string
-  ref?: (layer: LayerHandle) => void
-  /**
-   * Compose the output yourself: called once (untracked) with the layer's
-   * texture id, and its return renders in place of the built-in `<texture>`
-   * leaf. Sprite pointer events then need the layer's handlers on your
-   * leaf: `<texture src={texture} {...useSpriteLayer().handlers} />`.
-   */
-  output?: (texture: TextureId) => Element
-  /**
-   * Sprite pointer events (default on): the built-in leaf carries
-   * layer.handlers. `false` detaches them - the leaf then costs no pointer
-   * routing at all.
-   */
-  events?: boolean
-}
-
-/**
- * Owns a sprite layer and composites it as an ordinary `<texture>` leaf, so
- * the output takes layout, transforms, blendMode, and pointer events like
- * any element - or hand `output` the texture id and compose it yourself.
- * A layout component: it cannot sit inside a d-* subtree; `output` with a
- * `<d-texture>` is the detached form.
- * Children (`<Sprite>`) render nothing themselves - they populate the
- * retained layer through context.
- */
-export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
-  let layer = untrack(() =>
-    createSpriteLayer(props.width, props.height, props.atlas, {
-      capacity: props.capacity,
-      clearColor: props.clearColor,
-      label: props.label,
-    }),
-  )
-  createEffect(
-    () => [props.width, props.height] as const,
-    ([w, h]) => layer.setSize(w, h),
-  )
-  createEffect(
-    () => props.camera,
-    camera => {
-      if (camera) layer.setCamera(camera)
-    },
-  )
-  createEffect(
-    () => props.oversample,
-    n => {
-      if (n !== undefined) layer.setOversample(n)
-    },
-  )
-  untrack(() => props.ref)?.(layer)
-  let output = untrack(() => props.output)
-  let events = untrack(() => props.events) !== false
-  // Auto oversample: the built-in leaf's window box, in device pixels, per
-  // layer pixel. Picked after every layout, and again when the display scale
-  // changes: the first layout runs before the resize event that reports the
-  // scale, and a scale change alone lays nothing out. onLayout is not a
-  // tracking scope; the reads there are plain.
-  let leaf: { id: number } | undefined
-  let pick = () => {
-    if (!leaf || props.oversample !== undefined) return
-    let box = getBoundingBoxViewport(leaf)
-    if (!box) return
-    let scale = displayScale() * Math.max(box.width / props.width, box.height / props.height)
-    layer.setOversample(fitOversample(scale, props.width, props.height, windowTexels()))
-  }
-  onLayout(pick)
-  createEffect(() => displayScale(), pick)
-  return (
-    <LayerContext value={layer}>
-      {output ? (
-        untrack(() => output(layer.texture))
-      ) : (
-        <texture
-          ref={(n: { id: number }) => (leaf = n)}
-          src={layer.texture}
-          width={props.width}
-          height={props.height}
-          onPointerDown={events ? layer.handlers.onPointerDown : undefined}
-          onPointerMove={events ? layer.handlers.onPointerMove : undefined}
-          onPointerUp={events ? layer.handlers.onPointerUp : undefined}
-          onPointerLeave={events ? layer.handlers.onPointerLeave : undefined}
-        />
-      )}
-      {props.children}
-    </LayerContext>
-  )
-}
-
-let GroupContext = createContext<SpriteGroup | null>(null)
-
-export type GroupProps = {
-  /** Position in the parent frame (layer pixels at the root). */
-  x?: number
-  y?: number
-  /** Rotation, radians, clockwise. */
-  rotation?: number
-  /** Uniform scale on the whole subtree (child sprites scale with it). */
-  scale?: number
-  /** How pose-prop changes animate (see setGroupTransition); the mount
-   * pose always snaps. */
-  transition?: NodeTransition | string | null
-  /** A declared transition settled on one component. */
-  onTransitionEnd?: (event: TransitionEndEvent) => void
-  ref?: (group: SpriteGroup) => void
-}
-
-/**
- * A transform group: `<Sprite>` (and nested `<Group>`) children mount under
- * its spatial arena node, so their pose props read in the group's frame and
- * moving the group moves the subtree in one native recompute - a ship with
- * turrets is one `<Group>` with the hull and turret sprites inside. Renders
- * nothing itself.
- */
-export let Group: ParentComponent<GroupProps> = props => {
-  let layer = useContext(LayerContext)
-  let parent = useContext(GroupContext)
-  let group = untrack(() => addGroup(layer, { parent }))
-  createEffect(
-    () => [props.x, props.y, props.rotation, props.scale] as const,
-    ([x, y, rotation, scale]) => setGroup(group, { x, y, rotation, scale }),
-  )
-  // After the pose effect, so the mount pose snaps before writes animate.
-  createEffect(
-    () => props.transition,
-    transition => setGroupTransition(group, transition ?? null),
-  )
-  createEffect(
-    () => props.onTransitionEnd,
-    end => {
-      group.onTransitionEnd = end
-    },
-  )
-  untrack(() => props.ref)?.(group)
-  onCleanup(() => removeGroup(group))
-  return <GroupContext value={group}>{props.children}</GroupContext>
-}
-
-export type SpriteProps = SpriteOptions &
-  SpritePointerProps & {
-    /** How pose-prop changes animate (see setSpriteTransition); the mount
-     * pose always snaps. */
-    transition?: NodeTransition | string | null
-    /** A declared transition settled on one component. */
-    onTransitionEnd?: (event: TransitionEndEvent) => void
-    ref?: (sprite: SpriteHandle) => void
-  }
-
-/** One sprite: a frame drawn at a position (in the enclosing `<Group>`'s
- * frame when there is one). */
-export let Sprite: VoidComponent<SpriteProps> = props => {
-  let layer = useContext(LayerContext)
-  let parent = useContext(GroupContext)
-  let sprite = untrack(() => addSprite(layer, parent ? { parent } : undefined))
-  createEffect(
-    () => [props.x, props.y, props.w, props.h, props.frame, props.flipX, props.flipY, props.rotation, props.tint] as const,
-    ([x, y, w, h, frame, flipX, flipY, rotation, tint]) => setSprite(sprite, { x, y, w, h, frame, flipX, flipY, rotation, tint }),
-  )
-  // After the pose effect, so the mount pose snaps before writes animate.
-  createEffect(
-    () => props.transition,
-    transition => setSpriteTransition(sprite, transition ?? null),
-  )
-  createEffect(
-    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerEnter, props.onPointerLeave, props.onTransitionEnd] as const,
-    ([down, move, up, enter, leave, end]) => {
-      sprite.onPointerDown = down
-      sprite.onPointerMove = move
-      sprite.onPointerUp = up
-      sprite.onPointerEnter = enter
-      sprite.onPointerLeave = leave
-      sprite.onTransitionEnd = end
-    },
-  )
-  untrack(() => props.ref)?.(sprite)
-  onCleanup(() => removeSprite(sprite))
-  return null
-}
-
-/**
- * The tile layer's camera: the world point (`x`, `y`) is shown at the
- * viewport point (`pivotX`, `pivotY`), the world scaled by `zoom` and
- * rotated by `rotation` (radians, clockwise) ABOUT that pivot. The pivot
- * defaults to (0, 0), which makes `{ x, y, zoom }` mean exactly what the
- * sprite layer's camera means (world at the viewport top-left) - one
- * signal drives both. The whole thing is a transform on the composited
- * world, never a re-bake. (The sprite layer's camera cannot rotate yet -
- * okf/backlog/2d-sprite-camera-rotation.md.)
- */
-export type TileCamera = CameraUpdate & {
-  rotation?: number
-  pivotX?: number
-  pivotY?: number
-}
-
-export type TileLayerProps = {
-  /** Grid shape and tile pixel size - creation-fixed (recreate to resize). */
-  cols: number
-  rows: number
-  tileW: number
-  tileH: number
-  /** The atlas texture every tile samples (create with createAtlas). */
-  atlas: TextureId
-  /** Per-chunk clear color; never-written regions render nothing, so a
-   * full-bleed ground color belongs on the container behind the layer. */
-  clearColor?: [number, number, number, number]
-  /** Sampler filter for the baked chunk textures at composite time; default
-   * "linear" (hard pixels belong to the atlas sampler, see TileLayerOptions). */
-  filter?: FilterMode
-  /**
-   * Target texels per world pixel in the baked chunks. Absent, the component
-   * picks it every layout from the world view's on-screen size (display
-   * scale, camera zoom, any designSize fit), so tiles resample properly at
-   * any scale.
-   */
-  oversample?: number
-  /** Chunk edge in tiles (default ~512px worth); see TileLayerOptions. */
-  chunkTiles?: number
-  /**
-   * Pan/zoom/rotate over the world - a transform on the composited world
-   * view, never a re-bake. The world view is WORLD sized; put the layer
-   * inside a clipping container (`overflow="clip"`) sized to the viewport.
-   */
-  camera?: TileCamera
-  label?: string
-  ref?: (layer: TileLayerHandle) => void
-}
-
-/**
- * Owns a baked tile layer (createTileLayer) and composites its chunks as
- * `d-texture` leaves at their world rects inside a `<view>` carrying the
- * camera transform - a handful of quads however many tiles exist. A layout
- * component: the world view is laid out, so it cannot sit inside a d-*
- * subtree. Tiles
- * are data, not children: write them through `ref` with `setTile` - there
- * is no `<Tile>` component on purpose (a component per tile would
- * re-introduce the per-element cost the bake removes).
- */
-export let TileLayer: VoidComponent<TileLayerProps> = props => {
-  let layer = untrack(() =>
-    createTileLayer(props.cols, props.rows, props.tileW, props.tileH, props.atlas, {
-      clearColor: props.clearColor,
-      filter: props.filter,
-      chunkTiles: props.chunkTiles,
-      label: props.label,
-    }),
-  )
-  untrack(() => props.ref)?.(layer)
-  createEffect(
-    () => props.oversample,
-    n => {
-      if (n !== undefined) layer.setOversample(n)
-    },
-  )
-  // Auto oversample: the world view's window box (camera zoom and rotation
-  // included - a rotated world's AABB over-estimates, which only rounds up),
-  // in device pixels, per world pixel.
-  let world: { id: number } | undefined
-  let pick = () => {
-    if (!world || props.oversample !== undefined) return
-    let box = getBoundingBoxViewport(world)
-    if (!box) return
-    let scale = displayScale() * Math.max(box.width / layer.width, box.height / layer.height)
-    layer.setOversample(fitOversample(scale, layer.chunkW, layer.chunkH, windowTexels()))
-  }
-  onLayout(pick)
-  createEffect(() => displayScale(), pick)
-  // Chunk allocations arrive through the layer's hook; the signal carries a
-  // fresh array so <For> sees the growth.
-  let [chunks, setChunks] = createSignal<TileChunk[]>(layer.chunks.slice())
-  layer.onChunk = () => setChunks(layer.chunks.slice())
-  // World -> screen: p maps to pivot + R(rotation) * zoom * (p - camera),
-  // spelled with element transforms as origin at the camera point, rotate +
-  // scale there, then translate the camera point onto the pivot.
-  let camX = () => props.camera?.x ?? 0
-  let camY = () => props.camera?.y ?? 0
-  return (
-    <view
-      ref={(n: { id: number }) => (world = n)}
-      width={layer.width}
-      height={layer.height}
-      originX={camX()}
-      originY={camY()}
-      rotate={props.camera?.rotation ?? 0}
-      scale={props.camera?.zoom ?? 1}
-      x={(props.camera?.pivotX ?? 0) - camX()}
-      y={(props.camera?.pivotY ?? 0) - camY()}
-    >
-      <For each={chunks()}>
-        {chunk => <d-texture src={chunk.texture} x={chunk.x} y={chunk.y} w={chunk.width} h={chunk.height} />}
-      </For>
-    </view>
-  )
-}