@solidrt/core 0.0.44 → 0.0.46

package/AGENTS.md

@@ -94,7 +94,7 @@ tsconfig.json - the two load-bearing lines are jsx + jsxImportSource:
 ```
 
 Peer deps @solidjs/signals and @solidjs/universal must match (currently
-2.0.0-beta.26); bun resolves them from peerDependencies.
+2.0.0-beta.31); bun resolves them from peerDependencies.
 
 ## Element model (the parts that are easy to get wrong)
 

package/examples/README.md

@@ -8,6 +8,7 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 ## Host elements and layout
 - `window-root.tsx` - the minimal app; the root must be `<window>`.
 - `view-layout.tsx` - `<view>` as a flex container; containers do not paint.
+- `view-viewbox.tsx` - `viewBox` on a `<view>`: author a scene once in fixed design units and let the view uniformly scale-and-center (letterbox) that space into its box. A pure fit transform - it never sizes the element (layout still does); children live in design space (the box they inherit IS the design size, so a bare `d-rect` fills it); pointer `localX`/`localY` arrive in design units. The fixed-aspect alternative to `windowSizeClass` reflow for diagrams, slides, dashboards, game boards.
 - `background-rect.tsx` - a `d-rect` filling its parent as a background.
 - `detached-positioning.tsx` - the `d-` prefix: x/y placement, no reflow, detached-only children.
 - `text-paint-styling.tsx` - the uniform `color` prop; `drawStyle="stroke"` vs fill.
@@ -27,7 +28,7 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 
 ## Window state
 - `window-signals.tsx` - reactive `windowSize()` / `safeArea()` accessors (prefer over `onResize`).
-- `responsive-grid.tsx` - one app across phone/tablet/desktop: `capabilities.windowSizeClass` (Material 3 breakpoints, a reactive getter) drives the column count and `windowSize()` sizes each card; reflows on resize.
+- `responsive-grid.tsx` - one app across phone/tablet/desktop: `capabilities.windowSizeClass` (Material 3 breakpoints, a reactive getter) drives the column count and `windowSize()` sizes each card; reflows on resize. The reflow answer; for fixed-aspect content use `view-viewbox.tsx` instead.
 
 ## Overlays
 - `portal.tsx` - `createPortal` relocating content to the window root to escape clipping.
@@ -41,6 +42,8 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `gpu-pipeline.tsx` - `createPipelineTexture`: a custom vertex+fragment pair drawing an interleaved vertex buffer (position and color attributes resolved by name), a depth-tested spinning cube whose `uTime` uniform is driven through `<texture params>` exactly like a fragment shader's.
 - `gpu-particles.tsx` - an additive particle field: `topology: "points"` with `blend: "add"`, so overlapping gaussian splats (`gl_PointSize` from the vertex stage, `gl_PointCoord` falloff, premultiplied output) accumulate into a glowing volume instead of overwriting. The tints are typed vec3 uniforms filled from 3-number array params.
 - `gpu-instancing.tsx` - instanced drawing: one 3-vertex triangle drawn hundreds of times via `instanceCount`, each instance placed and tinted on a phyllotaxis spiral from `gl_InstanceID` alone. `setDraw(id, { instanceCount })` merges into the draw range per frame (absent keys keep their values, like params), so the population breathes without touching the buffer.
+- `gpu-draw-list.tsx` - `createDrawTarget`: one render target holding an ordered, mutable LIST of draws - two orbiting triangles from different programs sharing one depth buffer (the target owns the depth storage, each pipeline the test/write behavior), a third entry added and removed live via its stable `DrawId`, and `setDrawParams` as the per-object channel.
+- `gpu-shared-params.tsx` - shared target state on a draw target: `setTargetParams`/`setTargetTextures` write values every entry reads - a ring of quads spins and color-cycles from ONE write per frame, and the shared sampler source swaps for the whole target at once. The spin is imperative (`setTargetParams` in `onFrame`) while the tint rides the `<texture params>` prop - the declarative channel, which on a draw target writes the same shared record. The two entries that seeded their own uTint/uMap show the precedence rule (an entry's own value beats the shared one), and mixed programs show partial coverage (a program that does not declare a shared name skips it). `createDrawTarget`'s positional `params` and `opts.textures` seed both channels before any entry exists.
 - `window-shader.tsx` - the `shader` prop on `<window>`: the finished frame drawn through a raw-linked warp program before present, click to toggle between warp and identity.
 - `window-shader-history.tsx` - the window shader's frame history: `previous` binds last frame as uPrevious, drawn as a one-frame motion echo behind an orbiting square; click toggles the echo term.
 

package/examples/gpu-draw-list.tsx

@@ -0,0 +1,110 @@
+// A draw target: one render target holding an ordered, mutable LIST of
+// draws - two orbiting triangles from two different programs sharing one
+// depth buffer (they occlude each other correctly as they cross), plus a
+// third entry added and removed on a timer. One render of the target is one
+// GPU pass no matter how many entries it holds, and per-entry params
+// (setDrawParams) are the per-object channel: each triangle carries its own
+// angle uniform, the model-matrix pattern at toy scale.
+//
+// The depth split to notice: the TARGET owns the storage (depth: true on
+// createDrawTarget - what makes cross-entry occlusion work), each PIPELINE
+// owns the behavior (depth: true on createRenderPipeline - this draw tests
+// and writes). A depth-testing pipeline added to a depthless draw target
+// throws at addDraw.
+import { render, onFrame } from "@solidrt/core"
+import {
+  addDraw,
+  compileShader,
+  createBuffer,
+  createDrawTarget,
+  createRenderPipeline,
+  glsl,
+  linkProgram,
+  removeDraw,
+  setDrawParams,
+} from "@solidrt/core/gpu"
+import type { DrawId } from "@solidrt/core/gpu"
+
+let VERTEX = glsl`
+  in vec2 aPos;
+  uniform float uAngle;
+
+  void main() {
+    // Orbit in x, swing through depth in z: the two entries cross each
+    // other, and the shared depth buffer decides who is in front.
+    float c = cos(uAngle), s = sin(uAngle);
+    vec2 p = aPos * 0.55 + vec2(0.55 * c, 0.0);
+    gl_Position = vec4(p, 0.5 * s, 1.0);
+  }
+`
+
+let FRAGMENT_WARM = glsl`
+  void main() {
+    fragColor = vec4(0.95, 0.45, 0.2, 1.0);
+  }
+`
+
+let FRAGMENT_COOL = glsl`
+  void main() {
+    fragColor = vec4(0.25, 0.55, 0.95, 1.0);
+  }
+`
+
+let FRAGMENT_PULSE = glsl`
+  uniform float uPhase;
+  void main() {
+    fragColor = vec4(vec3(0.6 + 0.4 * sin(uPhase)), 1.0);
+  }
+`
+
+function App() {
+  let triangle = createBuffer(new Float32Array([0, 0.6, -0.5, -0.4, 0.5, -0.4]), { label: "tri" })
+  let vs = compileShader("vertex", VERTEX, { header: true })
+  let attrs = [{ name: "aPos", format: "vec2" as const }]
+  let warm = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_WARM, { header: true })), {
+    attributes: attrs,
+    depth: true,
+  })
+  let cool = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_COOL, { header: true })), {
+    attributes: attrs,
+    depth: true,
+  })
+  let pulse = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_PULSE, { header: true })), {
+    attributes: attrs,
+  })
+
+  let target = createDrawTarget(512, 512, null, { depth: true, clearColor: [0.04, 0.04, 0.08, 1], label: "orbits" })
+  let warmDraw = addDraw(target, warm, { uAngle: 0 }, { buffer: triangle })
+  let coolDraw = addDraw(target, cool, { uAngle: Math.PI }, { buffer: triangle })
+
+  // A third entry blinks in and out every second: add/remove are ordinary
+  // per-frame-affordable writes, and a removed DrawId simply retires. Its
+  // pipeline declares no depth, so it neither tests nor writes: list order
+  // alone places it, and inserting it BEFORE the warm triangle
+  // (before: warmDraw) keeps the flash beneath both orbits - appended
+  // instead, it would cover them. setDrawOrder is the wholesale form when a
+  // scene sorts its whole list.
+  let pulseDraw: DrawId | null = null
+  onFrame((tick) => {
+    let t = tick / 1000
+    setDrawParams(target, warmDraw, { uAngle: t })
+    setDrawParams(target, coolDraw, { uAngle: t + Math.PI })
+    let wantPulse = Math.floor(t) % 2 === 0
+    if (wantPulse && pulseDraw === null) {
+      pulseDraw = addDraw(target, pulse, { uAngle: t * 0.3, uPhase: t * 5 }, { buffer: triangle, before: warmDraw })
+    } else if (!wantPulse && pulseDraw !== null) {
+      removeDraw(target, pulseDraw)
+      pulseDraw = null
+    } else if (pulseDraw !== null) {
+      setDrawParams(target, pulseDraw, { uAngle: t * 0.3, uPhase: t * 5 })
+    }
+  })
+
+  return (
+    <window alignItems="center" justifyContent="center">
+      <texture src={target} width={420} height={420} />
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/gpu-instancing.tsx

@@ -1,15 +1,18 @@
-// Instanced drawing: one 3-vertex triangle in the buffer, drawn hundreds of
-// times with instanceCount (glDrawArraysInstanced, native ES 3.0). The vertex
-// stage tells copies apart by gl_InstanceID - here each instance becomes one
-// petal on a phyllotaxis spiral, placed and tinted from its index alone, so
-// the geometry buffer stays 6 floats no matter the population.
+// Instanced drawing with per-instance attributes: one 3-vertex triangle in
+// the vertex buffer, drawn hundreds of times, each copy reading its own
+// record from an instance buffer (instanceAttributes on the pipeline +
+// instanceBuffer on the target, vertex divisor 1 underneath). Here each
+// record is one petal of a phyllotaxis spiral - its angle, radius, size, and
+// tint, computed once in JS - so the vertex stage just reads state instead
+// of re-deriving it from gl_InstanceID every frame, and the geometry buffer
+// stays 6 floats no matter the population.
 //
 // The draw range is data: setDraw merges partial updates like params, so the
 // per-frame write below changes only instanceCount while firstVertex and
-// vertexCount keep their values (the whole buffer). instanceCount 0 would
-// draw nothing - the population legitimately breathes down to a single
-// petal and could go dark the same way. gl_InstanceID always counts from 0
-// (ES 3.0 has no base instance).
+// vertexCount keep their values (the whole buffer). With an instance buffer
+// bound, an omitted instanceCount would default to one instance per record
+// (the whole population); the explicit 1 here starts the bloom closed, and
+// the count is bounds-checked against the records either way.
 import { render, onFrame, createSignal } from "@solidrt/core"
 import { createBuffer, createPipelineTexture, glsl, setDraw } from "@solidrt/core/gpu"
 
@@ -17,21 +20,20 @@ let MAX_PETALS = 324
 
 let VERTEX = glsl`
   in vec2 aPos;
+  in float iAngle;
+  in float iRadius;
+  in float iScale;
+  in vec3 iTint;
   out vec3 vTint;
   uniform float uTime;
 
   void main() {
-    // One instance = one petal: radius grows with sqrt(index) and the angle
-    // steps by the golden angle (~2.39996 rad) - the sunflower layout.
-    float i = float(gl_InstanceID);
-    float angle = i * 2.39996 + uTime * 0.3;
-    float radius = 0.045 * sqrt(i);
-    // Petals shrink toward the rim and point outward along the spiral.
-    float scale = mix(0.05, 0.016, sqrt(i) / 18.0);
+    // The record places the petal; time only spins the whole flower.
+    float angle = iAngle + uTime * 0.3;
     float c = cos(angle), s = sin(angle);
-    vec2 p = radius * vec2(c, s) + mat2(c, s, -s, c) * (aPos * scale);
+    vec2 p = iRadius * vec2(c, s) + mat2(c, s, -s, c) * (aPos * iScale);
     gl_Position = vec4(p, 0.0, 1.0);
-    vTint = 0.5 + 0.5 * cos(6.2832 * (i / 96.0) + vec3(0.0, 2.1, 4.2));
+    vTint = iTint;
   }
 `
 
@@ -43,13 +45,40 @@ let FRAGMENT = glsl`
   }
 `
 
+// One record per petal (matching instanceAttributes: 6 floats): radius grows
+// with sqrt(index), the angle steps by the golden angle (~2.39996 rad) - the
+// sunflower layout - petals shrink toward the rim, and the tint walks a
+// cosine palette.
+function petalRecords() {
+  let records = new Float32Array(MAX_PETALS * 6)
+  for (let i = 0; i < MAX_PETALS; i++) {
+    let at = i * 6
+    let t = Math.sqrt(i) / 18
+    records[at] = i * 2.39996
+    records[at + 1] = 0.045 * Math.sqrt(i)
+    records[at + 2] = 0.05 * (1 - t) + 0.016 * t
+    for (let k = 0; k < 3; k++) {
+      records[at + 3 + k] = 0.5 + 0.5 * Math.cos(6.2832 * (i / 96) + k * 2.1)
+    }
+  }
+  return records
+}
+
 function App() {
   // The whole mesh: one triangle, reused by every instance.
   let bufferId = createBuffer(new Float32Array([0, 1.3, -1, -0.75, 1, -0.75]), { label: "petal-tri" })
+  let instanceId = createBuffer(petalRecords(), { label: "petal-records" })
   let id = createPipelineTexture(VERTEX, FRAGMENT, 512, 512, { uTime: 0 }, {
     label: "petals",
     attributes: [{ name: "aPos", format: "vec2" }],
     buffer: bufferId,
+    instanceAttributes: [
+      { name: "iAngle", format: "f32" },
+      { name: "iRadius", format: "f32" },
+      { name: "iScale", format: "f32" },
+      { name: "iTint", format: "vec3" },
+    ],
+    instanceBuffer: instanceId,
     instanceCount: 1,
     clearColor: [0.03, 0.03, 0.06, 1],
   })

package/examples/gpu-pipeline.tsx

@@ -6,7 +6,11 @@
 // but no vUV, and app-driven uniforms (uTime below) are the source's own
 // declarations. Uniforms are driven exactly like createShaderTexture:
 // declaratively via the <texture> params prop, applied at the next repaint.
-import { render, onFrame, createSignal } from "@solidrt/core"
+// The cube draws indexed (indexBuffer + indexFormat: 24 shared vertices
+// stitched by 36 uint16 indices instead of 36 unshared vertices) with its
+// back faces culled (cull: "back") - a closed mesh never shows them, so
+// rastering them is pure waste.
+import { render, onFrame, createSignal, pct } from "@solidrt/core"
 import { createBuffer, createPipelineTexture, glsl } from "@solidrt/core/gpu"
 
 let VERTEX = glsl`
@@ -21,15 +25,19 @@ let VERTEX = glsl`
     mat3 rotY = mat3(cy, 0.0, -sy, 0.0, 1.0, 0.0, sy, 0.0, cy);
     mat3 rotX = mat3(1.0, 0.0, 0.0, 0.0, cx, sx, 0.0, -sx, cx);
     vec3 p = rotX * (rotY * aPos);
-    p.z += 2.5;
+    p.z -= 2.5;
 
-    // Perspective projection (near 1, far 10). Clip y is negated: the target's
-    // memory row 0 is clip y = -1, and Impeller samples row 0 as the top, so
-    // camera-up needs the flip to be displayed up.
+    // Standard right-handed camera at the origin looking down -z, perspective
+    // near 1 far 10. Clip y is negated: the target's memory row 0 is clip
+    // y = -1, and Impeller samples row 0 as the top, so camera-up needs the
+    // flip to be displayed up. With this textbook rig the CCW-outward mesh
+    // winds counter-clockwise AS DISPLAYED on its camera-facing faces -
+    // exactly the front-face rule cull: "back" tests against.
+    float w = -p.z;
     float f = 2.0;
     float a = 11.0 / 9.0;
     float b = -20.0 / 9.0;
-    gl_Position = vec4(p.x * f, -p.y * f, p.z * a + b, p.z);
+    gl_Position = vec4(p.x * f, -p.y * f, w * a + b, w);
     vColor = aColor;
   }
 `
@@ -41,12 +49,16 @@ let FRAGMENT = glsl`
   }
 `
 
-// Interleaved [pos vec3, color vec3], 6 faces x 2 triangles, one color per face.
-function cube(): Float32Array {
+// Interleaved [pos vec3, color vec3]: 24 vertices, 4 per face with that
+// face's color - each corner stored once and stitched into 2 triangles by
+// the index buffer below, the sharing real meshes are made of. Every face
+// winds counter-clockwise seen from outside, so with the projection's y
+// negation the cube culls correctly with cull: "back".
+function cubeVertices(): Float32Array {
   type Vec3 = [number, number, number]
   let verts: number[] = []
   let quad = (a: Vec3, b: Vec3, c: Vec3, d: Vec3, color: Vec3) => {
-    for (let p of [a, b, c, a, c, d]) verts.push(p[0], p[1], p[2], color[0], color[1], color[2])
+    for (let p of [a, b, c, d]) verts.push(p[0], p[1], p[2], color[0], color[1], color[2])
   }
   let s = 0.5
   quad([-s, -s, s], [s, -s, s], [s, s, s], [-s, s, s], [0.9, 0.3, 0.3]) // front
@@ -58,26 +70,44 @@ function cube(): Float32Array {
   return new Float32Array(verts)
 }
 
+// Two triangles per face over its 4 shared vertices: 36 uint16 indices.
+function cubeIndices(): Uint16Array {
+  let indices: number[] = []
+  for (let face = 0; face < 6; face++) {
+    let v = face * 4
+    indices.push(v, v + 1, v + 2, v, v + 2, v + 3)
+  }
+  return new Uint16Array(indices)
+}
+
 function App() {
-  // Labels name the buffer and target in the dev tooling's GPU inventory
+  // Labels name the buffers and target in the dev tooling's GPU inventory
   // (and in engine log messages) - free-form, purely diagnostic.
-  let bufferId = createBuffer(cube(), { label: "cube-verts" })
-  let id = createPipelineTexture(VERTEX, FRAGMENT, 512, 512, { uTime: 0 }, {
+  let bufferId = createBuffer(cubeVertices(), { label: "cube-verts" })
+  let indexId = createBuffer(cubeIndices(), { label: "cube-indices" })
+  let id = createPipelineTexture(VERTEX, FRAGMENT, 1024, 1024, { uTime: 0 }, {
     label: "cube",
     attributes: [
       { name: "aPos", format: "vec3" },
       { name: "aColor", format: "vec3" },
     ],
     buffer: bufferId,
+    indexBuffer: indexId,
+    indexFormat: "uint16",
     depth: true,
+    cull: "back",
     clearColor: [0.08, 0.08, 0.12, 1],
   })
   let [time, setTime] = createSignal(0)
   onFrame((tick) => setTime(tick / 1000))
 
+  // Fill the window: the viewBox fits and centers the square content into
+  // the full-window view, so the projection is never stretched.
   return (
-    <window alignItems="center" justifyContent="center">
-      <texture src={id} params={{ uTime: time() }} width={400} height={400} />
+    <window>
+      <view width={pct(100)} height={pct(100)} viewBox={[1024, 1024]}>
+        <texture src={id} params={{ uTime: time() }} width={1024} height={1024} />
+      </view>
     </window>
   )
 }

package/examples/gpu-shared-params.tsx

@@ -0,0 +1,135 @@
+// Shared target state on a draw target: values every entry reads, written
+// ONCE per target instead of once per entry. A ring of quads spins under a
+// single "camera" uniform (uView) and color-cycles under a shared tint
+// (uTint) - one target-level write per frame however many entries the
+// list holds, where per-entry setDrawParams would cost one call and one
+// value's worth of JS arithmetic per quad (the cost profile @solidrt/3d's
+// camera rides on). setTargetTextures is the sampler analog: the patterned
+// quads read one shared uMap source, swapped for the whole target every
+// two seconds.
+//
+// The rules to notice: an entry's OWN value beats the shared one - the
+// amber quad seeds uTint at addDraw and ignores the color cycle, the
+// striped quad binds its own uMap and ignores the swap - and coverage may
+// be partial: the tint program never declares uMap and the patterned
+// program never declares uTint, so each shared write simply skips entries
+// whose program does not declare the name. Shared state is target state:
+// createDrawTarget seeds it (positional params + opts.textures) before any
+// entry exists, and entry add/remove/rebuild cannot lose it.
+//
+// Two channels drive the same shared params. uView goes imperatively
+// (setTargetParams in onFrame), uTint goes declaratively: the `<texture
+// params>` prop means "the target's params" on every target kind, so on a
+// draw target it writes the shared record - a signal into the prop is all
+// the wiring a shared value needs.
+import { render, onFrame, createSignal } from "@solidrt/core"
+import {
+  addDraw,
+  compileShader,
+  createBuffer,
+  createDrawTarget,
+  createRenderPipeline,
+  createTexture,
+  glsl,
+  linkProgram,
+  setTargetParams,
+  setTargetTextures,
+} from "@solidrt/core/gpu"
+
+let VERTEX = glsl`
+  in vec2 aPos;
+  uniform float uView;
+  uniform vec2 uCenter;
+
+  void main() {
+    vec2 p = uCenter + aPos * 0.13;
+    float c = cos(uView), s = sin(uView);
+    gl_Position = vec4(c * p.x - s * p.y, s * p.x + c * p.y, 0.0, 1.0);
+  }
+`
+
+let FRAGMENT_TINT = glsl`
+  uniform vec4 uTint;
+  void main() {
+    fragColor = uTint;
+  }
+`
+
+let FRAGMENT_MAP = glsl`
+  uniform sampler2D uMap;
+  void main() {
+    fragColor = texture(uMap, gl_FragCoord.xy / 32.0);
+  }
+`
+
+function App() {
+  let quad = createBuffer(new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]), { label: "quad" })
+  let vs = compileShader("vertex", VERTEX, { header: true })
+  let attrs = [{ name: "aPos", format: "vec2" as const }]
+  let tint = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_TINT, { header: true })), {
+    attributes: attrs,
+  })
+  let mapped = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_MAP, { header: true })), {
+    attributes: attrs,
+  })
+
+  // 2x2 patterns, nearest + repeat, so gl_FragCoord tiling shows hard cells.
+  let pattern = (a: number[], b: number[]) =>
+    createTexture(new Uint8Array([...a, ...b, ...b, ...a]), 2, 2, { filter: "nearest", wrap: "repeat" })
+  let checker = pattern([15, 15, 20, 255], [235, 235, 235, 255])
+  let ember = pattern([250, 160, 30, 255], [45, 10, 60, 255])
+  let stripes = createTexture(new Uint8Array([220, 40, 60, 255, 245, 245, 245, 255]), 2, 1, {
+    filter: "nearest",
+    wrap: "repeat",
+  })
+
+  // The positional params argument and opts.textures seed the shared state
+  // before any entry exists; the entries added below pick it up.
+  let target = createDrawTarget(
+    512,
+    512,
+    { uView: 0, uTint: [0.3, 0.8, 0.9, 1] },
+    { textures: { uMap: checker }, clearColor: [0.05, 0.05, 0.09, 1], label: "shared-ring" },
+  )
+
+  const RING = 8
+  for (let i = 0; i < RING; i++) {
+    let a = (i / RING) * Math.PI * 2
+    let uCenter = [0.62 * Math.cos(a), 0.62 * Math.sin(a)]
+    if (i === 1 || i === 5) {
+      // Patterned entries read the shared uMap; the one at i === 5 brings
+      // its own binding and keeps its stripes through every shared swap.
+      addDraw(target, mapped, { uCenter }, i === 5 ? { buffer: quad, textures: { uMap: stripes } } : { buffer: quad })
+    } else if (i === 3) {
+      // The override quad: its own uTint beats the shared color cycle.
+      addDraw(target, tint, { uCenter, uTint: [1, 0.62, 0.1, 1] }, { buffer: quad })
+    } else {
+      addDraw(target, tint, { uCenter }, { buffer: quad })
+    }
+  }
+
+  let [sharedTint, setSharedTint] = createSignal([0.3, 0.8, 0.9, 1])
+  let mapFlip = -1
+  onFrame(tick => {
+    let t = tick / 1000
+    // The whole ring, one write: uView spins every entry. uTint takes the
+    // declarative channel instead - the signal feeds the params prop below.
+    setTargetParams(target, { uView: t * 0.5 })
+    setSharedTint([0.45 + 0.45 * Math.sin(t), 0.45 + 0.45 * Math.sin(t + 2.1), 0.45 + 0.45 * Math.sin(t + 4.2), 1])
+    // The shared sampler source swaps every two seconds; only the entry
+    // with its own uMap keeps its pattern.
+    let flip = Math.floor(t / 2) % 2
+    if (flip !== mapFlip) {
+      mapFlip = flip
+      setTargetTextures(target, { uMap: flip === 0 ? checker : ember })
+    }
+  })
+
+  return (
+    <window alignItems="center" justifyContent="center">
+      <texture src={target} width={420} height={420} params={{ uTint: sharedTint() }} />
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/responsive-grid.tsx

@@ -8,6 +8,11 @@
 // functions - read `capabilities.windowSizeClass` (no call). Reading it inside
 // JSX tracks, so the memo below re-runs on every resize. `windowSize()` IS a
 // function (call it) - we read its width to size each card exactly.
+//
+// This is the REFLOW answer, for layouts that genuinely rearrange across form
+// factors. For content with fixed internal geometry (diagrams, slides,
+// dashboards, game boards) do not branch on window size at all: author one
+// design space and let `viewBox` scale it to fit - see view-viewbox.tsx.
 import { render, capabilities, windowSize, createMemo, For } from "@solidrt/core"
 
 const GAP = 16

package/examples/view-shader-history.tsx

@@ -0,0 +1,85 @@
+// Source history on a boundary shader: previous: true retains the prior
+// rasterization of the subtree as uPrevious, rotated when the content
+// actually changes - not per frame. That makes it transition material: on
+// each content change uPrevious holds the old look and uSource the new, and
+// uMix sweeps a cross-dissolve between them. For a static panel uPrevious
+// equals uSource (the previous rasterization IS the same content), so
+// feedback/accumulation is not what this is for - that stays with manual
+// targets.
+//
+// Click the panel to cycle its colors: the old palette dissolves into the
+// new one instead of snapping.
+import { render, onFrame, createSignal } from "@solidrt/core"
+import { compileShader, destroyShader, glsl, linkProgram } from "@solidrt/core/gpu"
+
+let VERTEX = glsl`
+  out vec2 vUV;
+  void main() {
+    vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+    vUV = p;
+    gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+  }
+`
+
+let DISSOLVE = glsl`
+  uniform sampler2D uSource;
+  uniform sampler2D uPrevious;
+  uniform float uMix;
+  in vec2 vUV;
+  void main() {
+    fragColor = mix(texture(uPrevious, vUV), texture(uSource, vUV), uMix);
+  }
+`
+
+const PALETTES = [
+  ["#0077ff", "#ff6a00", "#00c46a"],
+  ["#e63946", "#ffb703", "#8338ec"],
+  ["#00b4d8", "#ef476f", "#ffd166"],
+] as const
+
+function App() {
+  let vs = compileShader("vertex", VERTEX, { header: true })
+  let fs = compileShader("fragment", DISSOLVE, { header: true })
+  let dissolve = linkProgram(vs, fs, { label: "dissolve" })
+  destroyShader(vs)
+  destroyShader(fs)
+
+  let [palette, setPalette] = createSignal(0)
+  let colors = () => PALETTES[palette() % PALETTES.length]!
+  let [mixv, setMix] = createSignal(1)
+  // Sweep uMix back to 1 after each change (~250ms). At 1 the signal stops
+  // changing, so the pass stops re-running.
+  onFrame((_tick, _frame, rate) => setMix(m => Math.min(1, m + 4 / rate)))
+
+  let cycle = () => {
+    setPalette(p => (p + 1) % PALETTES.length)
+    setMix(0)
+  }
+
+  return (
+    <window alignItems="center" justifyContent="center">
+      <view
+        repaintBoundary="snapshot"
+        shader={{ program: dissolve, params: { uMix: mixv() }, previous: true }}
+        onPointerDown={cycle}
+        flexDirection="column"
+        gap={12}
+        alignItems="center"
+        justifyContent="center"
+        width={360}
+        height={240}
+      >
+        <rect position="absolute" width="100%" height="100%" radius={16} color="#dde3ec" />
+        <text fontSize={24} color="#222">Boundary history</text>
+        <view flexDirection="row" gap={12}>
+          <rect width={70} height={70} radius={12} color={colors()[0]} />
+          <rect width={70} height={70} radius={12} color={colors()[1]} />
+          <rect width={70} height={70} radius={12} color={colors()[2]} />
+        </view>
+        <text fontSize={13} color="#666">Click: colors cross-dissolve</text>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)