fui-studio-mcp 0.1.0 → 0.1.2

package/dist/{chunk-W7L36Z34.js → chunk-S3AUIOGZ.js}

@@ -276,17 +276,17 @@ function emptyProject(name = "untitled") {
   return Project.parse({ name, canvas: { origin: "center" } });
 }
 var ROOT_TYPES = /* @__PURE__ */ new Set(["canvas", "layer", "ograf"]);
-function layerAssignment(graph) {
-  const typeOf = new Map(graph.nodes.map((n) => [n.id, n.type]));
+function layerAssignment(graph2) {
+  const typeOf = new Map(graph2.nodes.map((n) => [n.id, n.type]));
   const sources = /* @__PURE__ */ new Map();
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     if (!typeOf.has(e.from) || !typeOf.has(e.to)) continue;
     const list = sources.get(e.to);
     if (list) list.push(e.from);
     else sources.set(e.to, [e.from]);
   }
   const reached = /* @__PURE__ */ new Map();
-  for (const layer of graph.nodes) {
+  for (const layer of graph2.nodes) {
     if (layer.type !== "layer") continue;
     const stack = [...sources.get(layer.id) ?? []];
     while (stack.length > 0) {
@@ -303,25 +303,25 @@ function layerAssignment(graph) {
     }
   }
   const out = /* @__PURE__ */ new Map();
-  for (const n of graph.nodes) {
+  for (const n of graph2.nodes) {
     const r = ROOT_TYPES.has(n.type) ? void 0 : reached.get(n.id);
     out.set(n.id, r && r.size === 1 ? [...r][0] : void 0);
   }
   return out;
 }
-function assignLayers(graph) {
-  const assignment = layerAssignment(graph);
-  for (const n of graph.nodes) {
+function assignLayers(graph2) {
+  const assignment = layerAssignment(graph2);
+  for (const n of graph2.nodes) {
     const layer = assignment.get(n.id);
     if (layer) n.layer = layer;
     else delete n.layer;
   }
-  return graph;
+  return graph2;
 }
-function adoptions(graph, nodeId) {
-  const typeOf = new Map(graph.nodes.map((n) => [n.id, n]));
+function adoptions(graph2, nodeId) {
+  const typeOf = new Map(graph2.nodes.map((n) => [n.id, n]));
   const sources = /* @__PURE__ */ new Map();
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     const list = sources.get(e.to);
     if (list) list.push(e.from);
     else sources.set(e.to, [e.from]);
@@ -335,7 +335,7 @@ function adoptions(graph, nodeId) {
     cone.add(id);
     stack.push(...sources.get(id) ?? []);
   }
-  const assignment = layerAssignment(graph);
+  const assignment = layerAssignment(graph2);
   const out = /* @__PURE__ */ new Map();
   for (const id of cone) {
     const layer = assignment.get(id);
@@ -354,11 +354,11 @@ var MIGRATIONS = {
    * the outline starts at width 0, so rendered output is byte-identical.
    */
   1: (doc) => {
-    const graph = doc.graph;
+    const graph2 = doc.graph;
     const textIds = new Set(
-      (graph?.nodes ?? []).filter((n) => V1_TEXT_TYPES.has(n.type)).map((n) => n.id)
+      (graph2?.nodes ?? []).filter((n) => V1_TEXT_TYPES.has(n.type)).map((n) => n.id)
     );
-    for (const n of graph?.nodes ?? []) {
+    for (const n of graph2?.nodes ?? []) {
       if (!textIds.has(n.id)) continue;
       const params = { ...n.params ?? {} };
       const stroke = params.stroke;
@@ -373,7 +373,7 @@ var MIGRATIONS = {
       params.strokeWidth = 0;
       n.params = params;
     }
-    for (const e of graph?.edges ?? []) {
+    for (const e of graph2?.edges ?? []) {
       if (textIds.has(e.to) && e.toPort === "stroke") e.toPort = "fill";
     }
     return { ...doc, version: 2 };
@@ -384,8 +384,8 @@ var MIGRATIONS = {
    * them stamped in explicitly, so nothing rerenders.
    */
   2: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "text") continue;
       const params = { ...n.params ?? {} };
       params.fontFamily ??= "IBM Plex Mono";
@@ -411,8 +411,8 @@ var MIGRATIONS = {
       "center-y": { angle: 0, alignX: false },
       bottom: { angle: 90, alignX: false }
     };
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "align") continue;
       const params = { ...n.params ?? {} };
       const mode = typeof params.mode === "string" ? params.mode : "center-x";
@@ -432,8 +432,8 @@ var MIGRATIONS = {
   /** v4 → v5: Rect's default height became 120 (square). Old docs that leaned
    *  on the 80px default get it stamped in, so nothing rerenders. */
   4: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "rect") continue;
       const params = { ...n.params ?? {} };
       params.h ??= 80;
@@ -448,8 +448,8 @@ var MIGRATIONS = {
    *  walked the narrow version and re-saved are past helping, but a v5 file
    *  opened today keeps its labels at width 0. */
   5: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (!TEXT_TYPES.has(n.type)) continue;
       const params = { ...n.params ?? {} };
       params.strokeWidth ??= 0;
@@ -460,8 +460,8 @@ var MIGRATIONS = {
   /** v6 → v7: Boolean wears its input's style by default now. Old booleans
    *  were dressed by their own Style params; they keep that. */
   6: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "boolean") continue;
       const params = { ...n.params ?? {} };
       params.keepStyle ??= false;
@@ -473,8 +473,8 @@ var MIGRATIONS = {
    *  to the new default; typed ones map to a stable small number (the scatter
    *  rerolls once — the knob was never semantic). */
   7: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "jitter") continue;
       const params = { ...n.params ?? {} };
       if (typeof params.salt === "string") {
@@ -489,8 +489,8 @@ var MIGRATIONS = {
    *  documents that leaned on the implicit custom-(0,0) default get it
    *  stamped in, so nothing starts spinning in place that used to orbit. */
   8: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "transform") continue;
       const params = { ...n.params ?? {} };
       params.pivot ??= "custom";
@@ -505,8 +505,8 @@ var MIGRATIONS = {
   9: (doc) => {
     const canvas = doc.canvas;
     const centered = canvas?.origin === "center";
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "transform" && n.type !== "array-linear") continue;
       const params = { ...n.params ?? {} };
       const raw = params.pivot;
@@ -532,8 +532,8 @@ var MIGRATIONS = {
    *  Slice's X/Y became shape-centre-anchored; old documents measured from
    *  the canvas origin, stamped in so every cut stays where it was made. */
   10: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       const params = { ...n.params ?? {} };
       if (n.type === "jitter") params.uniformScale ??= false;
       else if (n.type === "slice") params.anchor ??= "canvas";
@@ -548,8 +548,8 @@ var MIGRATIONS = {
    *  (base only: the toggle was never exposable, so no wires ride it), and
    *  docs that leaned on the width-1 default get it stamped in. */
   11: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (!TEXT_TYPES.has(n.type)) continue;
       const params = { ...n.params ?? {} };
       params.strokeWidth ??= 1;
@@ -575,8 +575,8 @@ var MIGRATIONS = {
    *  on the old corner default get it stamped in, so no lattice slides by
    *  half its span. */
   13: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "array-grid") continue;
       const params = { ...n.params ?? {} };
       params.origin ??= "corner";
@@ -588,8 +588,8 @@ var MIGRATIONS = {
    *  Documents that leaned on the old grow-from-the-input default get 'start'
    *  stamped in, so no row slides by half its span. */
   14: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "array-linear") continue;
       const params = { ...n.params ?? {} };
       params.origin ??= "start";
@@ -603,8 +603,8 @@ var MIGRATIONS = {
    *  #ff0000, so a fresh override is visibly an override. Old documents
    *  leaned on both defaults and get them stamped. */
   15: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "style") continue;
       const params = { ...n.params ?? {} };
       params.setStroke ??= true;
@@ -617,9 +617,9 @@ var MIGRATIONS = {
    *  param tap used to sit. A wire drawn from that tap (`param:ink`) now has no
    *  handle; it becomes the named output (`ink`), which carries the same value. */
   16: (doc) => {
-    const graph = doc.graph;
-    const tokens = new Set((graph?.nodes ?? []).filter((n) => n.type === "style-tokens").map((n) => n.id));
-    for (const e of graph?.edges ?? []) {
+    const graph2 = doc.graph;
+    const tokens = new Set((graph2?.nodes ?? []).filter((n) => n.type === "style-tokens").map((n) => n.id));
+    for (const e of graph2?.edges ?? []) {
       const port = e.fromPort;
       if (tokens.has(e.from) && typeof port === "string" && port.startsWith("param:")) e.fromPort = port.slice(6);
     }
@@ -631,11 +631,11 @@ var MIGRATIONS = {
    *  in the same order as its defaults), the first Count of them ticked to
    *  deal; wires into the swatch sockets follow their colours. */
   17: (doc) => {
-    const graph = doc.graph;
+    const graph2 = doc.graph;
     const ROLE = ["accent", "dim", "faint", "ink", "warn", "bg"];
     const DEAL = ["dealAccent", "dealDim", "dealFaint", "dealInk", "dealWarn", "dealBg"];
     const palettes = /* @__PURE__ */ new Set();
-    for (const n of graph?.nodes ?? []) {
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "palette") continue;
       palettes.add(n.id);
       const old = n.params ?? {};
@@ -652,7 +652,7 @@ var MIGRATIONS = {
       n.type = "style-tokens";
       n.params = params;
     }
-    for (const e of graph?.edges ?? []) {
+    for (const e of graph2?.edges ?? []) {
       if (!palettes.has(e.to) || typeof e.toPort !== "string") continue;
       const m = /^color([1-6])$/.exec(e.toPort);
       if (m) e.toPort = ROLE[Number(m[1]) - 1];
@@ -664,8 +664,8 @@ var MIGRATIONS = {
    *  fall to the new default and key identically, so the drift is unchanged;
    *  typed ones map to a stable small number and reroll once. */
   18: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "noise") continue;
       const params = { ...n.params ?? {} };
       if (typeof params.salt === "string") {
@@ -679,9 +679,9 @@ var MIGRATIONS = {
   /** v19 → v20: the last text Variations became Seeds — LFO, Random Value,
    *  Random Step and the three Switches — the same way Noise's did at v19. */
   19: (doc) => {
-    const graph = doc.graph;
+    const graph2 = doc.graph;
     const TYPES = /* @__PURE__ */ new Set(["lfo", "random-value", "random-step", "switch", "switch-value", "switch-color"]);
-    for (const n of graph?.nodes ?? []) {
+    for (const n of graph2?.nodes ?? []) {
       if (!TYPES.has(n.type)) continue;
       const params = { ...n.params ?? {} };
       if (typeof params.salt === "string") {
@@ -696,8 +696,8 @@ var MIGRATIONS = {
    *  saved without the flag wore the theme under the old default, so it is
    *  stamped `wear: true` and keeps dressing the studio as it did. */
   20: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "style-tokens") continue;
       const params = { ...n.params ?? {} };
       if (params.wear === void 0) params.wear = true;
@@ -715,10 +715,10 @@ var MIGRATIONS = {
    * input shifts by one.
    */
   21: (doc) => {
-    const graph = doc.graph;
+    const graph2 = doc.graph;
     const TYPES = /* @__PURE__ */ new Set(["switch", "switch-value", "switch-color"]);
     const baseOf = (p) => typeof p === "object" && p !== null ? p.base : p;
-    for (const n of graph?.nodes ?? []) {
+    for (const n of graph2?.nodes ?? []) {
       if (!TYPES.has(n.type)) continue;
       const params = { ...n.params ?? {} };
       if (baseOf(params.range) === "normalized") continue;
@@ -745,8 +745,8 @@ var MIGRATIONS = {
    *  frame — centre-out in a centre-origin document. Old documents scattered
    *  from the top-left corner of X/Y; stamped in so nothing saved moves. */
   22: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "scatter") continue;
       const params = { ...n.params ?? {} };
       params.anchor ??= "corner";
@@ -758,8 +758,8 @@ var MIGRATIONS = {
    *  Dot Matrix — centred on X/Y in a centre-origin document. Old documents
    *  hung the stack down and right from X/Y; stamped in so no line moves. */
   23: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "random-code") continue;
       const params = { ...n.params ?? {} };
       params.stackAnchor ??= "corner";
@@ -773,9 +773,9 @@ var MIGRATIONS = {
    *  row at the bottom; those with Square Cells on get Top stamped so no
    *  line or copy moves. The rest take the new default when they tick it. */
   24: (doc) => {
-    const graph = doc.graph;
+    const graph2 = doc.graph;
     const baseOf = (p) => typeof p === "object" && p !== null ? p.base : p;
-    for (const n of graph?.nodes ?? []) {
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "grid" && n.type !== "array-grid") continue;
       const params = { ...n.params ?? {} };
       if (baseOf(params.square) !== true) continue;
@@ -801,7 +801,7 @@ var MIGRATIONS = {
    * numbers are its own, and the drawing turns a quarter.
    */
   26: (doc) => {
-    const graph = doc.graph;
+    const graph2 = doc.graph;
     const DEFAULT = {
       circle: 0,
       "tick-ring": 0,
@@ -811,7 +811,7 @@ var MIGRATIONS = {
       sort: 0,
       bend: void 0
     };
-    for (const n of graph?.nodes ?? []) {
+    for (const n of graph2?.nodes ?? []) {
       const type = n.type;
       if (!(type in DEFAULT)) continue;
       const params = { ...n.params ?? {} };
@@ -851,10 +851,10 @@ var MIGRATIONS = {
    * plays always, as before.
    */
   27: (doc) => {
-    const graph = doc.graph;
-    if (graph) {
-      const nodes = graph.nodes ??= [];
-      const edges = graph.edges ??= [];
+    const graph2 = doc.graph;
+    if (graph2) {
+      const nodes = graph2.nodes ??= [];
+      const edges = graph2.edges ??= [];
       const byId = new Map(nodes.map((n) => [n.id, n]));
       for (const canvas of nodes.filter((n) => n.type === "canvas")) {
         let k = 0;
@@ -887,7 +887,7 @@ var MIGRATIONS = {
           k++;
         }
       }
-      assignLayers(graph);
+      assignLayers(graph2);
     }
     return { ...doc, clips: Array.isArray(doc.clips) ? doc.clips : [], version: 28 };
   },
@@ -898,8 +898,8 @@ var MIGRATIONS = {
    * the SVG's `data-layer` reads the same string, so nothing moves.
    */
   28: (doc) => {
-    const graph = doc.graph;
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "layer") continue;
       const params = { ...n.params ?? {} };
       const raw = params.name;
@@ -916,8 +916,8 @@ var MIGRATIONS = {
    * far) or below moves up as one, so nothing changes places.
    */
   29: (doc) => {
-    const graph = doc.graph;
-    const layers = (graph?.nodes ?? []).filter((n) => n.type === "layer");
+    const graph2 = doc.graph;
+    const layers = (graph2?.nodes ?? []).filter((n) => n.type === "layer");
     const orderOf = (n) => {
       const raw = n.params?.order;
       const base2 = typeof raw === "object" && raw !== null ? raw.base : raw;
@@ -941,9 +941,9 @@ var MIGRATIONS = {
    * Ref point from now on; its output is the same.
    */
   30: (doc) => {
-    const graph = doc.graph;
-    const refWired = new Set((graph?.edges ?? []).filter((e) => e.toPort === "ref").map((e) => e.to));
-    for (const n of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    const refWired = new Set((graph2?.edges ?? []).filter((e) => e.toPort === "ref").map((e) => e.to));
+    for (const n of graph2?.nodes ?? []) {
       if (n.type !== "transform" || !refWired.has(n.id)) continue;
       const params = { ...n.params ?? {} };
       const raw = params.pivot;
@@ -960,9 +960,9 @@ var MIGRATIONS = {
    * list is its place in the layer's stack, and that is kept.
    */
   31: (doc) => {
-    const graph = doc.graph;
-    const layers = new Set((graph?.nodes ?? []).filter((n) => n.type === "layer").map((n) => n.id));
-    for (const e of graph?.edges ?? []) {
+    const graph2 = doc.graph;
+    const layers = new Set((graph2?.nodes ?? []).filter((n) => n.type === "layer").map((n) => n.id));
+    for (const e of graph2?.edges ?? []) {
       if (e.toPort === "texture" && layers.has(e.to)) e.toPort = "in";
     }
     return { ...doc, version: 32 };
@@ -974,8 +974,8 @@ var MIGRATIONS = {
    * does not change under it.
    */
   32: (doc) => {
-    const graph = doc.graph;
-    for (const node of graph?.nodes ?? []) {
+    const graph2 = doc.graph;
+    for (const node of graph2?.nodes ?? []) {
       if (node.type !== "grid" && node.type !== "polar-grid") continue;
       const params = node.params ??= {};
       params.subJoin ??= false;
@@ -1390,6 +1390,16 @@ function pathPolylines(d) {
   flush(false);
   return out;
 }
+function polylinesToPathD(lines) {
+  const r35 = (n) => String(Math.round(n * 1e3) / 1e3);
+  const parts = [];
+  for (const line of lines) {
+    if (line.points.length < 2) continue;
+    const [first, ...rest] = line.points;
+    parts.push(`M${r35(first.x)} ${r35(first.y)}` + rest.map((p) => `L${r35(p.x)} ${r35(p.y)}`).join("") + (line.closed ? "Z" : ""));
+  }
+  return parts.join("");
+}
 var CIRCLE_SEGMENTS = 96;
 function arcPoints(cx, cy, r, a0, a1) {
   const sweep = Math.abs(a1 - a0);
@@ -1582,8 +1592,8 @@ function centerOf(b) {
   return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
 }
 function polar(cx, cy, r, deg) {
-  const rad = deg * Math.PI / 180;
-  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+  const rad2 = deg * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad2), y: cy + r * Math.sin(rad2) };
 }
 function pointInPolygon(point, polygon) {
   let inside = false;
@@ -1595,6 +1605,217 @@ function pointInPolygon(point, polygon) {
   }
   return inside;
 }
+var NEAR_W = 0.01;
+function mat4Multiply(a, b) {
+  const out = new Array(16);
+  const A = a;
+  const B = b;
+  for (let r = 0; r < 4; r++) {
+    for (let c = 0; c < 4; c++) {
+      out[r * 4 + c] = A[r * 4] * B[c] + A[r * 4 + 1] * B[4 + c] + A[r * 4 + 2] * B[8 + c] + A[r * 4 + 3] * B[12 + c];
+    }
+  }
+  return out;
+}
+function mat4Translate(x, y, z3) {
+  return [1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z3, 0, 0, 0, 1];
+}
+function mat4Scale(sx, sy, sz) {
+  return [sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1];
+}
+var rad = (deg) => deg * Math.PI / 180;
+function mat4RotateX(deg) {
+  const c = Math.cos(rad(deg));
+  const s = Math.sin(rad(deg));
+  return [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
+}
+function mat4RotateY(deg) {
+  const c = Math.cos(rad(deg));
+  const s = Math.sin(rad(deg));
+  return [c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1];
+}
+function mat4RotateZ(deg) {
+  const c = Math.cos(rad(deg));
+  const s = Math.sin(rad(deg));
+  return [c, -s, 0, 0, s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+function isIdentityPose(pose) {
+  return pose.x === 0 && pose.y === 0 && pose.z === 0 && pose.rx === 0 && pose.ry === 0 && pose.rz === 0 && pose.sx === 1 && pose.sy === 1;
+}
+function frameCentre(camera) {
+  return camera.origin === "center" ? { x: 0, y: 0 } : { x: camera.width / 2, y: camera.height / 2 };
+}
+function layerModelMatrix(pose, centre) {
+  const px = pose.pivot.x - centre.x;
+  const py = pose.pivot.y - centre.y;
+  let m = mat4Translate(pose.x, pose.y, pose.z);
+  m = mat4Multiply(m, mat4Translate(px, py, 0));
+  if (pose.rz !== 0) m = mat4Multiply(m, mat4RotateZ(pose.rz));
+  if (pose.ry !== 0) m = mat4Multiply(m, mat4RotateY(pose.ry));
+  if (pose.rx !== 0) m = mat4Multiply(m, mat4RotateX(pose.rx));
+  if (pose.sx !== 1 || pose.sy !== 1) m = mat4Multiply(m, mat4Scale(pose.sx, pose.sy, 1));
+  m = mat4Multiply(m, mat4Translate(-px, -py, 0));
+  return m;
+}
+function planeHomography(model, perspective) {
+  const row2 = perspective > 0 ? [model[8] / perspective, model[9] / perspective, 1 + model[11] / perspective] : [0, 0, 1];
+  return [model[0], model[1], model[3], model[4], model[5], model[7], ...row2];
+}
+function mat3Multiply(a, b) {
+  const out = new Array(9);
+  const A = a;
+  const B = b;
+  for (let r = 0; r < 3; r++) {
+    for (let c = 0; c < 3; c++) {
+      out[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];
+    }
+  }
+  return out;
+}
+function mat3Translate(x, y) {
+  return [1, 0, x, 0, 1, y, 0, 0, 1];
+}
+function layerHomography(pose, camera) {
+  const c = frameCentre(camera);
+  const hc = planeHomography(layerModelMatrix(pose, c), camera.perspective);
+  return mat3Multiply(mat3Translate(c.x, c.y), mat3Multiply(hc, mat3Translate(-c.x, -c.y)));
+}
+function invertMat3(m) {
+  const [a, b, c, d, e, f, g, h, i] = m;
+  const A = e * i - f * h;
+  const B = -(d * i - f * g);
+  const C = d * h - e * g;
+  const det = a * A + b * B + c * C;
+  if (!Number.isFinite(det) || Math.abs(det) < 1e-12) return void 0;
+  const inv = 1 / det;
+  return [
+    A * inv,
+    -(b * i - c * h) * inv,
+    (b * f - c * e) * inv,
+    B * inv,
+    (a * i - c * g) * inv,
+    -(a * f - c * d) * inv,
+    C * inv,
+    -(a * h - b * g) * inv,
+    (a * e - b * d) * inv
+  ];
+}
+function homTransform(h, p) {
+  return {
+    u: h[0] * p.x + h[1] * p.y + h[2],
+    v: h[3] * p.x + h[4] * p.y + h[5],
+    w: h[6] * p.x + h[7] * p.y + h[8]
+  };
+}
+function rigidAffineOf(h) {
+  const k = h[8];
+  if (!Number.isFinite(k) || Math.abs(k) < 1e-12) return void 0;
+  const eps = 1e-9;
+  if (Math.abs(h[6] / k) > eps || Math.abs(h[7] / k) > eps) return void 0;
+  const a = h[0] / k;
+  const c = h[1] / k;
+  const e = h[2] / k;
+  const b = h[3] / k;
+  const d = h[4] / k;
+  const f = h[5] / k;
+  if (Math.abs(a * a + b * b - 1) > eps || Math.abs(c * c + d * d - 1) > eps || Math.abs(a * c + b * d) > eps) return void 0;
+  return [a, b, c, d, e, f];
+}
+function affineAt(h, p0) {
+  const { u, v, w } = homTransform(h, p0);
+  if (w < NEAR_W) return void 0;
+  const w2 = w * w;
+  const a = (h[0] * w - u * h[6]) / w2;
+  const b = (h[3] * w - v * h[6]) / w2;
+  const c = (h[1] * w - u * h[7]) / w2;
+  const d = (h[4] * w - v * h[7]) / w2;
+  const x = u / w;
+  const y = v / w;
+  return [a, b, c, d, x - (a * p0.x + c * p0.y), y - (b * p0.x + d * p0.y)];
+}
+function magnificationAt(h, p) {
+  const m = affineAt(h, p);
+  if (!m) return void 0;
+  const [a, b, c, d] = m;
+  const s = a * a + b * b + c * c + d * d;
+  const det = a * d - b * c;
+  const disc = Math.max(0, s * s - 4 * det * det);
+  return Math.sqrt((s + Math.sqrt(disc)) / 2);
+}
+var lerpHom = (a, b, t) => ({
+  u: a.u + (b.u - a.u) * t,
+  v: a.v + (b.v - a.v) * t,
+  w: a.w + (b.w - a.w) * t
+});
+function clipPolygonNear(pts) {
+  if (pts.length === 0) return [];
+  const out = [];
+  let prev = pts[pts.length - 1];
+  let prevIn = prev.w >= NEAR_W;
+  for (const cur of pts) {
+    const curIn = cur.w >= NEAR_W;
+    if (curIn !== prevIn) out.push(lerpHom(prev, cur, (NEAR_W - prev.w) / (cur.w - prev.w)));
+    if (curIn) out.push(cur);
+    prev = cur;
+    prevIn = curIn;
+  }
+  return out;
+}
+function clipPolylineNear(pts) {
+  const runs = [];
+  let run = [];
+  for (let i = 0; i < pts.length; i++) {
+    const cur = pts[i];
+    const curIn = cur.w >= NEAR_W;
+    if (i > 0) {
+      const prev = pts[i - 1];
+      const prevIn = prev.w >= NEAR_W;
+      if (curIn !== prevIn) {
+        const cut3 = lerpHom(prev, cur, (NEAR_W - prev.w) / (cur.w - prev.w));
+        if (prevIn) {
+          run.push(cut3);
+          runs.push(run);
+          run = [];
+        } else run.push(cut3);
+      }
+    }
+    if (curIn) run.push(cur);
+  }
+  if (run.length > 0) runs.push(run);
+  return runs.filter((r) => r.length >= 2);
+}
+function projectPolyline(h, points, closed) {
+  const hom = points.map((p) => homTransform(h, p));
+  const divide = (pts) => pts.map((p) => ({ x: p.u / p.w, y: p.v / p.w }));
+  if (closed) {
+    const ring = clipPolygonNear(hom);
+    return ring.length >= 3 ? [divide(ring)] : [];
+  }
+  return clipPolylineNear(hom).map(divide);
+}
+function projectedQuadBounds(h, rect) {
+  const corners = [
+    { x: rect.x, y: rect.y },
+    { x: rect.x + rect.w, y: rect.y },
+    { x: rect.x + rect.w, y: rect.y + rect.h },
+    { x: rect.x, y: rect.y + rect.h }
+  ];
+  const ring = projectPolyline(h, corners, true)[0];
+  return ring ? boundsOfPoints(ring) : void 0;
+}
+function planeDepth(model, p) {
+  return model[8] * p.x + model[9] * p.y + model[11];
+}
+function planeFaces(model, p, perspective) {
+  const nx = model[2];
+  const ny = model[6];
+  const nz = model[10];
+  if (perspective <= 0) return nz > 0;
+  const x = model[0] * p.x + model[1] * p.y + model[3];
+  const y = model[4] * p.x + model[5] * p.y + model[7];
+  const z3 = planeDepth(model, p);
+  return nx * x + ny * y + nz * (z3 + perspective) > 0;
+}
 var GRADIENT_KINDS = /* @__PURE__ */ new Set(["linear", "radial", "conic"]);
 function isGradient(p) {
   return typeof p === "object" && p !== null && GRADIENT_KINDS.has(p.kind) && Array.isArray(p.stops);
@@ -1650,9 +1871,9 @@ function paintBox(g, shape) {
 function gradientGeometry(g, box) {
   if (!box || g.kind === "conic") return void 0;
   if (g.kind === "linear") {
-    const rad = g.angle * Math.PI / 180;
-    const dx = Math.cos(rad);
-    const dy = Math.sin(rad);
+    const rad2 = g.angle * Math.PI / 180;
+    const dx = Math.cos(rad2);
+    const dy = Math.sin(rad2);
     const half = (Math.abs(box.w * dx) + Math.abs(box.h * dy)) / 2;
     if (!(half > 1e-9) || g.end === g.start) return void 0;
     const cx2 = box.x + box.w / 2;
@@ -2288,6 +2509,7 @@ function makeCookContext(input) {
     rasterize: input.rasterize,
     video: input.video,
     outline: input.outline,
+    provided: input.provided,
     assets: input.assets ?? {},
     asset: input.asset,
     paramDefs: defs,
@@ -2474,12 +2696,12 @@ var CycleError = class extends Error {
   }
   cycle;
 };
-function nodeMap(graph) {
-  return new Map(graph.nodes.map((n) => [n.id, n]));
+function nodeMap(graph2) {
+  return new Map(graph2.nodes.map((n) => [n.id, n]));
 }
-function incomingEdges(graph) {
-  const map = new Map(graph.nodes.map((n) => [n.id, []]));
-  for (const e of graph.edges) map.get(e.to)?.push(e);
+function incomingEdges(graph2) {
+  const map = new Map(graph2.nodes.map((n) => [n.id, []]));
+  for (const e of graph2.edges) map.get(e.to)?.push(e);
   return map;
 }
 function wireParam(toPort) {
@@ -2487,10 +2709,10 @@ function wireParam(toPort) {
 }
 var nodeVertex = (id) => `n|${id}`;
 var tapVertex = (id, key) => `t|${id}|${key}`;
-function cookSteps(graph) {
-  const byId = nodeMap(graph);
+function cookSteps(graph2) {
+  const byId = nodeMap(graph2);
   const tapped = /* @__PURE__ */ new Map();
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     if (!byId.has(e.from) || !e.fromPort.startsWith("param:")) continue;
     const key = e.fromPort.slice(6);
     const list = tapped.get(e.from);
@@ -2499,7 +2721,7 @@ function cookSteps(graph) {
   }
   const vertices = [];
   const steps = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
+  for (const node of graph2.nodes) {
     for (const key of tapped.get(node.id) ?? []) {
       const v2 = tapVertex(node.id, key);
       vertices.push(v2);
@@ -2515,10 +2737,10 @@ function cookSteps(graph) {
     outs.get(from).push(to);
     indeg.set(to, indeg.get(to) + 1);
   };
-  for (const node of graph.nodes) {
+  for (const node of graph2.nodes) {
     for (const key of tapped.get(node.id) ?? []) link(tapVertex(node.id, key), nodeVertex(node.id));
   }
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     if (!byId.has(e.from) || !byId.has(e.to)) continue;
     const src = e.fromPort.startsWith("param:") ? tapVertex(e.from, e.fromPort.slice(6)) : nodeVertex(e.from);
     link(src, nodeVertex(e.to));
@@ -2549,9 +2771,9 @@ function cookSteps(graph) {
   }
   return order;
 }
-function topoSort(graph) {
+function topoSort(graph2) {
   const order = [];
-  for (const step of cookSteps(graph)) if (step.kind === "cook") order.push(step.node);
+  for (const step of cookSteps(graph2)) if (step.kind === "cook") order.push(step.node);
   return order;
 }
 function selfWireOrder(edges) {
@@ -2585,25 +2807,25 @@ function selfWireOrder(edges) {
   if (rank.size !== indeg.size) return null;
   return [...edges].sort((a, b) => rank.get(a.fromPort.slice(6)) - rank.get(b.fromPort.slice(6)));
 }
-function wouldCycle(graph, from, to, fromPort, toPort) {
+function wouldCycle(graph2, from, to, fromPort, toPort) {
   const probe = { id: "", from, fromPort: fromPort ?? "", to, toPort: toPort ?? "" };
   try {
-    cookSteps({ ...graph, edges: [...graph.edges, probe] });
+    cookSteps({ ...graph2, edges: [...graph2.edges, probe] });
     return false;
   } catch (err) {
     if (err instanceof CycleError) return true;
     throw err;
   }
 }
-function timeDependentNodes(graph, registry) {
+function timeDependentNodes(graph2, registry) {
   const dependent = /* @__PURE__ */ new Set();
-  const byId = nodeMap(graph);
+  const byId = nodeMap(graph2);
   const enumWired = /* @__PURE__ */ new Set();
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     const def = registry.forNode(byId.get(e.to));
     if (def?.params.some((p) => p.key === e.toPort && p.type === "enum")) enumWired.add(e.to);
   }
-  for (const node of graph.nodes) {
+  for (const node of graph2.nodes) {
     const def = registry.forNode(node);
     const rooted = typeof def?.timeRoot === "function" ? enumWired.has(node.id) || def.timeRoot(node.params) : def?.timeRoot;
     if (rooted) {
@@ -2618,7 +2840,7 @@ function timeDependentNodes(graph, registry) {
     }
   }
   const outs = /* @__PURE__ */ new Map();
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     const list = outs.get(e.from);
     if (list) list.push(e.to);
     else outs.set(e.from, [e.to]);
@@ -2635,16 +2857,16 @@ function timeDependentNodes(graph, registry) {
   }
   return dependent;
 }
-function validateGraph(graph, registry, clips = []) {
+function validateGraph(graph2, registry, clips = []) {
   const issues = [];
-  const byId = nodeMap(graph);
+  const byId = nodeMap(graph2);
   const clipped = new Set(clips.map((c) => c.layer));
-  for (const node of graph.nodes) {
+  for (const node of graph2.nodes) {
     if (!registry.has(node.type)) {
       issues.push({ level: "error", nodeId: node.id, message: `Unknown node type "${node.type}"` });
     }
   }
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     const from = byId.get(e.from);
     const to = byId.get(e.to);
     if (!from || !to) {
@@ -2669,7 +2891,7 @@ function validateGraph(graph, registry, clips = []) {
       }
     }
   }
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     const from = byId.get(e.from);
     const to = byId.get(e.to);
     if (!from || !to) continue;
@@ -2696,7 +2918,7 @@ function validateGraph(graph, registry, clips = []) {
     }
   }
   const seen = /* @__PURE__ */ new Map();
-  for (const e of graph.edges) {
+  for (const e of graph2.edges) {
     const toDef = registry.forNode(byId.get(e.to));
     const port = toDef?.inputs.find((i) => i.name === e.toPort);
     if (!port || port.multi) continue;
@@ -2711,8 +2933,8 @@ function validateGraph(graph, registry, clips = []) {
     }
   }
   let selfLoop = false;
-  for (const node of graph.nodes) {
-    const self = graph.edges.filter((e) => e.from === node.id && e.to === node.id);
+  for (const node of graph2.nodes) {
+    const self = graph2.edges.filter((e) => e.from === node.id && e.to === node.id);
     if (self.length > 0 && selfWireOrder(self) === null) {
       selfLoop = true;
       issues.push({
@@ -2724,7 +2946,7 @@ function validateGraph(graph, registry, clips = []) {
   }
   if (!selfLoop) {
     try {
-      topoSort(graph);
+      topoSort(graph2);
     } catch (err) {
       if (err instanceof CycleError) {
         issues.push({ level: "error", message: err.message });
@@ -2744,7 +2966,7 @@ function stable(value) {
 }
 var identityKeys = /* @__PURE__ */ new WeakMap();
 var nextIdentityKey = 1;
-function identityKey(obj) {
+function identityOf(obj) {
   let key = identityKeys.get(obj);
   if (key === void 0) {
     key = nextIdentityKey++;
@@ -2752,6 +2974,7 @@ function identityKey(obj) {
   }
   return key;
 }
+var identityKey = identityOf;
 var textureKey = (tex) => identityKey(tex);
 function hashOf(...parts) {
   const [a, b, c, d] = cyrb128(parts.join(" "));
@@ -2779,7 +3002,10 @@ function evaluate(project, registry, opts = {}) {
   const timeDeps = timeDependentNodes(project.graph, registry);
   const incoming = incomingEdges(project.graph);
   const hashes = /* @__PURE__ */ new Map();
-  const frameKey = `${project.canvas.w}x${project.canvas.h}@${project.canvas.origin}`;
+  const canvasNode2 = project.graph.nodes.find((n) => n.type === "canvas");
+  const lens = canvasNode2 ? normalizeParam(canvasNode2.params.perspective).base : void 0;
+  const perspective = typeof lens === "number" ? Math.max(0, lens) : canvasNode2 ? 1500 : void 0;
+  const frameKey = `${project.canvas.w}x${project.canvas.h}@${project.canvas.origin}${perspective === void 0 ? "" : `/${perspective}`}`;
   const clocks = envClocks(project, t, opts.audition);
   const taps = /* @__PURE__ */ new Map();
   const wiresOf = /* @__PURE__ */ new Map();
@@ -2918,6 +3144,10 @@ function evaluate(project, registry, opts = {}) {
       );
       continue;
     }
+    const providedKey = opts.textures && def.standIns ? def.standIns(inputs, multiInputs).map((key) => {
+      const tex = opts.textures(key);
+      return `${key}=${tex ? String(textureKey(tex)) : "none"}`;
+    }).join(",") : "";
     const nodeHash = hashOf(
       node.type,
       stable(node.params),
@@ -2938,7 +3168,10 @@ function evaluate(project, registry, opts = {}) {
       // it — one global salt, one full re-cook, then business as usual.
       opts.outliner ? "o1" : "o0",
       // A claiming output wired or not reshapes the others (Contours' major).
-      [...wiredOutputs].sort().join(",")
+      [...wiredOutputs].sort().join(","),
+      // Pixels this cook borrows from the worker, named by identity like a
+      // stood-in texture node's: a delivery must miss, a repeat must hit.
+      providedKey
     );
     hashes.set(node.id, nodeHash);
     const hit = upstreamTainted ? void 0 : cache22?.get(node.id, nodeHash);
@@ -2952,9 +3185,10 @@ function evaluate(project, registry, opts = {}) {
       name: node.name,
       seed,
       t: tNode,
-      canvas: { w: project.canvas.w, h: project.canvas.h, origin: project.canvas.origin },
+      canvas: { w: project.canvas.w, h: project.canvas.h, origin: project.canvas.origin, ...perspective === void 0 ? {} : { perspective } },
       outline: opts.outliner,
       rasterize: opts.rasterize,
+      provided: opts.textures,
       video: opts.video,
       assets: project.assets,
       asset: opts.asset,
@@ -3883,9 +4117,9 @@ function colorCorrectIsIdentity(o) {
   return o.brightness === 0 && o.contrast === 0 && o.saturation === 0 && o.hue % 360 === 0;
 }
 function hueMatrix(degrees) {
-  const rad = degrees * Math.PI / 180;
-  const cos = Math.cos(rad);
-  const sin = Math.sin(rad);
+  const rad2 = degrees * Math.PI / 180;
+  const cos = Math.cos(rad2);
+  const sin = Math.sin(rad2);
   return new Float64Array([
     0.213 + cos * 0.787 - sin * 0.213,
     0.715 - cos * 0.715 - sin * 0.715,
@@ -4680,6 +4914,47 @@ void main() {
   vec4 top = B(ivec2(x0, y0)) * (1.0 - fx) + B(ivec2(x1, y0)) * fx;
   vec4 bottom = B(ivec2(x0, y1)) * (1.0 - fx) + B(ivec2(x1, y1)) * fx;
   o = vec4(rnd3((top * (1.0 - fy) + bottom * fy).rgb), rnd((top * (1.0 - fy) + bottom * fy).a)) / 255.0;
+}`,
+  // warp.ts: each output centre back through the inverse homography onto
+  // the bitmap, four taps mixed; taps off the bitmap are transparent black.
+  warp: `${HEAD}
+uniform float u_m[9]; uniform vec3 u_place; uniform ivec2 u_out; uniform int u_w; uniform int u_h;
+vec4 T(int x, int y) { return (x < 0 || y < 0 || x >= u_w || y >= u_h) ? vec4(0.0) : B(ivec2(x, y)); }
+void main() {
+  ivec2 p = P();
+  float px = float(u_out.x + p.x) + 0.5;
+  float py = float(u_out.y + p.y) + 0.5;
+  float u = u_m[0] * px + u_m[1] * py + u_m[2];
+  float v = u_m[3] * px + u_m[4] * py + u_m[5];
+  float w = u_m[6] * px + u_m[7] * py + u_m[8];
+  if (w <= 1e-9) { o = vec4(0.0); return; }
+  float sx = (u / w - u_place.x) * u_place.z - 0.5;
+  float sy = (v / w - u_place.y) * u_place.z - 0.5;
+  if (sx < -1.0 || sy < -1.0 || sx > float(u_w) || sy > float(u_h)) { o = vec4(0.0); return; }
+  int x0 = int(floor(sx)); int y0 = int(floor(sy));
+  float fx = sx - float(x0); float fy = sy - float(y0);
+  vec4 top = T(x0, y0) * (1.0 - fx) + T(x0 + 1, y0) * fx;
+  vec4 bottom = T(x0, y0 + 1) * (1.0 - fx) + T(x0 + 1, y0 + 1) * fx;
+  vec4 r = top * (1.0 - fy) + bottom * fy;
+  o = vec4(rnd3(r.rgb), rnd(r.a)) / 255.0;
+}`,
+  // dof.ts's focusSelect: the map's bytes unpremultiplied in whole numbers, the pixel kept or dropped.
+  focusSelect: `${HEAD}
+uniform sampler2D u_map; uniform ivec2 u_off; uniform ivec2 u_msize; uniform int u_side; uniform ivec2 u_range;
+void main() {
+  ivec2 p = P();
+  ivec2 mp = p - u_off;
+  bool mIn = mp.x >= 0 && mp.y >= 0 && mp.x < u_msize.x && mp.y < u_msize.y;
+  ivec4 m = mIn ? ivec4(floor(texelFetch(u_map, mp, 0) * 255.0 + 0.5)) : ivec4(0);
+  int level = 0;
+  int side = 0;
+  if (m.a > 0) {
+    int h = m.a / 2;
+    level = (m.r * 255 + h) / m.a;
+    side = (m.g * 255 + h) / m.a >= 128 ? 1 : 0;
+  }
+  bool keep = side == u_side && level >= u_range.x && level <= u_range.y;
+  o = keep ? S(p) : vec4(0.0);
 }`,
   matte: `${HEAD}
 uniform sampler2D u_matte; uniform ivec2 u_off; uniform ivec2 u_msize; uniform int u_luma; uniform int u_invert;
@@ -4869,6 +5144,125 @@ function resample(tex, width, height) {
   if (tex.at) result.at = tex.at;
   return result;
 }
+function warpTexture(src, place, hInv, out) {
+  const W = Math.max(1, Math.round(out.w));
+  const H = Math.max(1, Math.round(out.h));
+  const g = gpuKernels();
+  if (g) return g.warp(src, place, hInv, { x: out.x, y: out.y, w: W, h: H });
+  const { width: w, height: h, data } = src;
+  const pixels = new Uint8ClampedArray(W * H * 4);
+  warpLoop(data, w, h, pixels, W, H, place, hInv, out.x, out.y);
+  return { width: W, height: H, data: pixels, at: { x: out.x, y: out.y } };
+}
+function warpLoop(data, w, h, pixels, W, H, place, m, ox, oy) {
+  const [m0, m1, m2, m3, m4, m5, m6, m7, m8] = m;
+  const { x: px0, y: py0, scale: scale2 } = place;
+  const tap = (x, y, k) => x < 0 || y < 0 || x >= w || y >= h ? 0 : data[(y * w + x) * 4 + k];
+  for (let j = 0; j < H; j++) {
+    const py = oy + j + 0.5;
+    for (let i = 0; i < W; i++) {
+      const px = ox + i + 0.5;
+      const u = m0 * px + m1 * py + m2;
+      const v = m3 * px + m4 * py + m5;
+      const wq = m6 * px + m7 * py + m8;
+      if (wq <= 1e-9) continue;
+      const sx = (u / wq - px0) * scale2 - 0.5;
+      const sy = (v / wq - py0) * scale2 - 0.5;
+      if (sx < -1 || sy < -1 || sx > w || sy > h) continue;
+      const x0 = Math.floor(sx);
+      const y0 = Math.floor(sy);
+      const fx = sx - x0;
+      const fy = sy - y0;
+      const o = (j * W + i) * 4;
+      for (let k = 0; k < 4; k++) {
+        const top = tap(x0, y0, k) * (1 - fx) + tap(x0 + 1, y0, k) * fx;
+        const bottom = tap(x0, y0 + 1, k) * (1 - fx) + tap(x0 + 1, y0 + 1, k) * fx;
+        pixels[o + k] = Math.round(top * (1 - fy) + bottom * fy);
+      }
+    }
+  }
+}
+var FOCUS_LEVEL_PX = 0.25;
+function focusLevel(radius) {
+  return Math.max(0, Math.min(255, Math.round(radius / FOCUS_LEVEL_PX)));
+}
+function ordered(near, far) {
+  const ranges = (levels, side) => {
+    const sorted = [...new Set(levels)].sort((a, b) => a - b);
+    return sorted.map((level, i) => ({
+      side,
+      lo: i === 0 ? 0 : Math.floor((sorted[i - 1] + level) / 2) + 1,
+      hi: i === sorted.length - 1 ? 255 : Math.floor((level + sorted[i + 1]) / 2),
+      radius: level * FOCUS_LEVEL_PX
+    }));
+  };
+  return [...ranges(far, 1).reverse(), ...ranges(near, 0)];
+}
+function focusSlices(levels, max = 24) {
+  let q = 1;
+  for (; ; ) {
+    const snap2 = (l) => Math.min(255, Math.round(l / q) * q);
+    const near = [0];
+    const far = [];
+    for (const { level, side } of levels) {
+      const l = snap2(Math.max(0, Math.min(255, Math.round(level))));
+      if (side === 1 && l > 0) far.push(l);
+      else near.push(l);
+    }
+    const slices = ordered(near, far);
+    if (slices.length <= max || q >= 256) return slices;
+    q *= 2;
+  }
+}
+function focusSelect(tex, map, ox, oy, side, lo, hi) {
+  const g = gpuKernels();
+  if (g) return g.focusSelect(tex, map, ox, oy, side, lo, hi);
+  const { width, height, data } = tex;
+  const m = map.data;
+  const out = like2(tex);
+  const o = out.data;
+  for (let y = 0; y < height; y++) {
+    const my = y - oy;
+    const rowIn = my >= 0 && my < map.height;
+    for (let x = 0; x < width; x++) {
+      const mx = x - ox;
+      let level = 0;
+      let on = 0;
+      if (rowIn && mx >= 0 && mx < map.width) {
+        const j = (my * map.width + mx) * 4;
+        const a = m[j + 3];
+        if (a > 0) {
+          const half = a >> 1;
+          level = Math.floor((m[j] * 255 + half) / a);
+          on = Math.floor((m[j + 1] * 255 + half) / a) >= 128 ? 1 : 0;
+        }
+      }
+      if (on !== side || level < lo || level > hi) continue;
+      const i = (y * width + x) * 4;
+      o[i] = data[i];
+      o[i + 1] = data[i + 1];
+      o[i + 2] = data[i + 2];
+      o[i + 3] = data[i + 3];
+    }
+  }
+  return out;
+}
+function depthOfField(tex, map, slices, origin = "top-left") {
+  if (slices.length === 0) return copyTexture(tex);
+  const pt2 = placementOf(tex, origin);
+  const pm = placementOf(map, origin);
+  const ox = pm.x - pt2.x;
+  const oy = pm.y - pt2.y;
+  const g = gpuKernels();
+  if (g) return g.depthOfField(tex, map, ox, oy, slices.map((s) => s.radius > 0 ? { ...s, radii: boxRadii(s.radius) } : s));
+  let acc;
+  for (const s of slices) {
+    const cut3 = focusSelect(tex, map, ox, oy, s.side, s.lo, s.hi);
+    const soft = s.radius > 0 ? blur(cut3, s.radius) : cut3;
+    acc = acc ? blendTextures(acc, soft, "normal", 1, origin) : soft;
+  }
+  return acc;
+}
 var divRound = (num3, den) => Math.floor((2 * num3 + den) / (2 * den));
 function sampleCells(tex, grid) {
   const asked = grid.sub ?? 1;
@@ -5767,6 +6161,7 @@ var lineNode = {
   type: "line",
   label: "Line",
   category: "generator",
+  description: "A straight stroke from (X1, Y1) to (X2, Y2).",
   // Both endpoints, so dragging moves the whole line.
   translate: [{ x: "x1", y: "y1" }, { x: "x2", y: "y2" }],
   inputs: [],
@@ -6235,8 +6630,8 @@ var videoNode = {
         `the bytes of \u201C${record.name}\u201D are not on this machine \u2014 drop the file on the graph to restore them (the CLI reads them from the project\u2019s .assets folder)`
       );
     }
-    const placed = frame.at && frame.at.x === at2.x && frame.at.y === at2.y ? frame : { ...frame, at: at2 };
-    return { out: textureVal(placed) };
+    const placed2 = frame.at && frame.at.x === at2.x && frame.at.y === at2.y ? frame : { ...frame, at: at2 };
+    return { out: textureVal(placed2) };
   }
 };
 var OPS2 = ["union", "subtract", "intersect", "exclude"];
@@ -8052,9 +8447,9 @@ function textShape(ctx, i, count, opts) {
   const letterSpacing = grid ? Math.round(opts.letterSpacing) : opts.letterSpacing;
   const onGrid = grid !== void 0 && rotation === 0;
   const style = glyphStyle(ctx, i, count);
-  const rad = rotation * Math.PI / 180;
-  const cos = Math.cos(rad);
-  const sin = Math.sin(rad);
+  const rad2 = rotation * Math.PI / 180;
+  const cos = Math.cos(rad2);
+  const sin = Math.sin(rad2);
   const measured = ctx.outline?.measure?.({ text, family, weight, stretch, size: fontSize, letterSpacing });
   const capHeight = measured?.capHeight ?? fontSize * FALLBACK_CAP_HEIGHT;
   const vAnchor = ctx.enumOf("vAnchor", ["baseline", "middle", "top"]);
@@ -8526,13 +8921,13 @@ var textOnPathNode = {
       const gaps = closed ? runs.length : runs.length - 1;
       between = gaps > 0 ? (length - words) / gaps : 0;
     }
-    const placed = [];
+    const placed2 = [];
     let pen = 0;
     for (const [r, { shape, run, outlined }] of runs.entries()) {
       if (r > 0) pen += between;
       const chars = [...shape.text];
       for (const [g, glyph] of run.glyphs.entries()) {
-        placed.push({ shape, d: glyph.d, ch: chars[g] ?? "", x: pen + glyph.x + g * spacing, advance: glyph.advance, outlined });
+        placed2.push({ shape, d: glyph.d, ch: chars[g] ?? "", x: pen + glyph.x + g * spacing, advance: glyph.advance, outlined });
       }
       pen += runWidth(run);
     }
@@ -8542,12 +8937,12 @@ var textOnPathNode = {
     if (align === "middle") start = position - total / 2;
     else if (align === "end") start = position - total;
     else if (align === "justify") {
-      const gaps = closed ? placed.length : placed.length - 1;
+      const gaps = closed ? placed2.length : placed2.length - 1;
       if (gaps > 0) gap = (length - total) / gaps;
     }
     const out = [];
     let index = 0;
-    for (const [k, g] of placed.entries()) {
+    for (const [k, g] of placed2.entries()) {
       const mid = g.x + k * gap + g.advance / 2;
       const { p, t } = along(points, closed, length, start + mid);
       const angle = Math.atan2(t.y, t.x) * 180 / Math.PI;
@@ -9025,6 +9420,16 @@ var transformNode = {
       description: "With a Ref wired: the point on its bounds the pivot lands on. Move X/Y are measured from it; Rotate and Scale turn about it.",
       dimWhen: refUnwired
     },
+    {
+      key: "refMix",
+      label: "Mix",
+      type: "number",
+      default: 1,
+      step: 0.01,
+      group: "Ref",
+      description: "How far along the way to the Ref point: 0 leaves the shape where it was authored, 1 lands it on the point. Wire a Seq or Mapping in to glide it there; past 0\u20131 it overshoots.",
+      dimWhen: refUnwired
+    },
     {
       key: "refEach",
       label: "Per Shape",
@@ -9057,10 +9462,11 @@ var transformNode = {
         const b = each ? shapeBounds(ref[i % ref.length]) : whole;
         if (!b) return shape;
         const { fx, fy } = REF_POINTS[point];
-        const R = { x: b.x + fx * b.w, y: b.y + fy * b.h };
+        const P = pivotFor(ctx, pivotMode, shape, i, n);
+        const mix = ctx.num("refMix", i, n);
+        const R = { x: P.x + mix * (b.x + fx * b.w - P.x), y: P.y + mix * (b.y + fy * b.h - P.y) };
         const tx = ctx.num("tx", i, n);
         const ty = ctx.num("ty", i, n);
-        const P = pivotFor(ctx, pivotMode, shape, i, n);
         const rot = ctx.num("rotation", i, n);
         const sx = ctx.num("sx", i, n);
         const sy = ctx.num("sy", i, n);
@@ -9138,13 +9544,13 @@ var arrayLinearNode = {
       const tx = ox + ctx.num("stepX", k, count, vars) * k;
       const ty = oy + ctx.num("stepY", k, count, vars) * k;
       const rotation = ctx.num("rotationStep", k, count, vars) * k;
-      const scale4 = ctx.num("scaleStep", k, count, vars) ** k;
+      const scale5 = ctx.num("scaleStep", k, count, vars) ** k;
       const shapes = carry(k);
       for (const [j, shape] of shapes.entries()) {
         const index = out.length + j;
         const base2 = deal ? pivotFor(ctx, pivotMode, shape, j, shapes.length) : pivots[j];
         const pivot = pivotInMoveSpace(pivotMode, base2, tx, ty);
-        const grown = scale4 !== 1 ? scaleAbout(shape, scale4, scale4, pivot) : shape;
+        const grown = scale5 !== 1 ? scaleAbout(shape, scale5, scale5, pivot) : shape;
         const m = compose({ tx, ty, rotation, pivot });
         out.push({
           ...grown,
@@ -9158,6 +9564,442 @@ var arrayLinearNode = {
   }
 };
 var MODIFIERS = [transformNode, arrayLinearNode];
+var isBitmap = (s) => isBitmapFamily(s.fontFamily);
+var isVariable = (s) => resolveFace(s.fontFamily, s.fontWeight ?? 400, s.fontStretch).variation !== void 0;
+var needsOutlining = (s) => isBitmap(s) || isVariable(s);
+var every = () => true;
+function anyText(scene, pick) {
+  const any = (shapes) => shapes.some((s) => s.kind === "text" ? pick(s) : s.kind === "group" && any(s.children));
+  return scene.layers.some((l) => any(l.shapes));
+}
+function outlineWhere(shape, outliner, pick) {
+  if (shape.kind === "group") {
+    const children = shape.children.map((c2) => outlineWhere(c2, outliner, pick));
+    return children.some((c2, i) => c2 !== shape.children[i]) ? { ...shape, children } : shape;
+  }
+  if (shape.kind !== "text" || !pick(shape)) return shape;
+  const weight = shape.fontWeight ?? 400;
+  const g = outliner({ text: shape.text, family: shape.fontFamily, weight, stretch: shape.fontStretch, size: shape.fontSize, letterSpacing: shape.letterSpacing });
+  if (!g) return shape;
+  const shift = shape.anchor === "middle" ? -g.width / 2 : shape.anchor === "end" ? -g.width : 0;
+  const [a, b, c, d, e, f] = shape.transform;
+  const tx = shape.x + shift;
+  const ty = shape.y;
+  const { x: _x, y: _y, text: _t, fontSize: _s, fontFamily: _f, fontWeight: _w, fontStretch: _st, anchor: _a, letterSpacing: _l, metrics: _m, ...rest } = shape;
+  return {
+    ...rest,
+    kind: "path",
+    d: g.d,
+    transform: [a, b, c, d, a * tx + c * ty + e, b * tx + d * ty + f],
+    meta: { ...shape.meta, tags: [...shape.meta.tags ?? [], "glyphs"] }
+  };
+}
+function outlineTextShape(shape, outliner, all = false) {
+  return outlineWhere(shape, outliner, all ? every : needsOutlining);
+}
+function outlineScene(scene, outliner, pick) {
+  if (!outliner || !anyText(scene, pick)) return scene;
+  return {
+    ...scene,
+    layers: scene.layers.map((l) => {
+      const shapes = l.shapes.map((s) => outlineWhere(s, outliner, pick));
+      return shapes.some((s, i) => s !== l.shapes[i]) ? { ...l, shapes } : l;
+    })
+  };
+}
+function outlineBitmapText(scene, outliner) {
+  return outlineScene(scene, outliner, isBitmap);
+}
+var LAYER_3D_DEFAULTS = {
+  posX: 0,
+  posY: 0,
+  posZ: 0,
+  rotX: 0,
+  rotY: 0,
+  rotZ: 0,
+  scaleX: 100,
+  scaleY: 100
+};
+var PICTURE_NODE_TYPES = /* @__PURE__ */ new Set(["image", "picture", "gradient", "noise-paint"]);
+function layerIsPosed(node, edges) {
+  if (node.type !== "layer") return false;
+  for (const [key, rest] of Object.entries(LAYER_3D_DEFAULTS)) {
+    const p = normalizeParam(node.params[key]);
+    if (p.track || p.expr || p.wire) return true;
+    if (p.base !== void 0 && p.base !== rest) return true;
+    if (edges.some((e) => e.to === node.id && e.toPort === key)) return true;
+  }
+  return false;
+}
+function posedLayersWithPictures(project) {
+  const { nodes, edges } = project.graph;
+  return nodes.filter((n) => layerIsPosed(n, edges) && nodes.some((m) => m.layer === n.id && PICTURE_NODE_TYPES.has(m.type)));
+}
+function texturePlace(texture, origin) {
+  return texture.at ?? (origin === "center" ? { x: -texture.width / 2, y: -texture.height / 2 } : { x: 0, y: 0 });
+}
+function frameRect(camera) {
+  return camera.origin === "center" ? { x: -camera.width / 2, y: -camera.height / 2, w: camera.width, h: camera.height } : { x: 0, y: 0, w: camera.width, h: camera.height };
+}
+function layerContentBounds(layer, origin) {
+  const shapes = boundsOfShapes(layer.shapes);
+  if (!layer.texture) return shapes;
+  const p = texturePlace(layer.texture, origin);
+  const pic = { x: p.x, y: p.y, w: layer.texture.width, h: layer.texture.height };
+  return shapes ? union(shapes, pic) : pic;
+}
+function layerPivot(mode, layer, camera, custom) {
+  if (mode === "canvas") return { x: 0, y: 0 };
+  if (mode === "custom") return custom;
+  if (mode === "shape") {
+    const b = layerContentBounds(layer, camera.origin);
+    return b ? centerOf(b) : frameCentre(camera);
+  }
+  return frameCentre(camera);
+}
+function isPictureShape(shape) {
+  if (shape.kind === "image") return true;
+  if (shape.kind === "group") return shape.children.some(isPictureShape);
+  return typeof shape.style.fill === "object" || typeof shape.style.stroke === "object";
+}
+function layerPieces(layer) {
+  const pieces = [];
+  const at2 = layer.texture ? layer.textureAt ?? 0 : layer.shapes.length;
+  const idOf = () => pieces.length === 0 ? layer.id : `${layer.id}/${pieces.length}`;
+  const last = () => pieces[pieces.length - 1];
+  const pushShape = (shape) => {
+    const kind = isPictureShape(shape) ? "picture" : "vector";
+    const tail = last();
+    if (tail && tail.kind === kind) tail.shapes.push(shape);
+    else pieces.push({ kind, id: idOf(), shapes: [shape] });
+  };
+  for (let i = 0; i < layer.shapes.length; i++) {
+    if (i === at2 && layer.texture) {
+      const tail = last();
+      if (tail && tail.kind === "picture") {
+        tail.texture = layer.texture;
+        tail.textureAt = tail.shapes.length;
+      } else pieces.push({ kind: "picture", id: idOf(), shapes: [], texture: layer.texture });
+    }
+    pushShape(layer.shapes[i]);
+  }
+  if (layer.texture && at2 >= layer.shapes.length) {
+    const tail = last();
+    if (tail && tail.kind === "picture") {
+      tail.texture = layer.texture;
+      tail.textureAt = tail.shapes.length;
+    } else pieces.push({ kind: "picture", id: idOf(), shapes: [], texture: layer.texture });
+  }
+  return pieces;
+}
+function placeOnTangent(shape, h) {
+  const b = shapeBounds(shape);
+  const a = affineAt(h, b ? centerOf(b) : { x: 0, y: 0 });
+  return a ? { ...shape, transform: multiply(a, shape.transform) } : void 0;
+}
+function projectShape(shape, parent, h, outliner) {
+  const world = multiply(parent, shape.transform);
+  switch (shape.kind) {
+    case "group": {
+      const children = shape.children.map((c) => projectShape(c, world, h, outliner)).filter((c) => c !== void 0);
+      return { ...shape, transform: IDENTITY, children };
+    }
+    case "text": {
+      if (outliner) {
+        const outlined = outlineTextShape(shape, outliner, true);
+        if (outlined.kind === "path") return projectShape(outlined, parent, h, outliner);
+      }
+      const a = affineAt(h, apply(world, { x: shape.x, y: shape.y }));
+      return a ? { ...shape, transform: multiply(a, world) } : void 0;
+    }
+    case "image": {
+      const a = affineAt(h, apply(world, { x: shape.x + shape.w / 2, y: shape.y + shape.h / 2 }));
+      return a ? { ...shape, transform: multiply(a, world) } : void 0;
+    }
+    default: {
+      const runs = flatten({ ...shape, transform: world }).flatMap(
+        (line) => projectPolyline(h, line.points, line.closed).map((points) => ({ points, closed: line.closed }))
+      );
+      if (runs.length === 0) return void 0;
+      return { id: shape.id, kind: "path", d: polylinesToPathD(runs), transform: IDENTITY, style: shape.style, meta: shape.meta };
+    }
+  }
+}
+function projectShapes(shapes, h, outliner) {
+  const rigid = rigidAffineOf(h);
+  if (rigid) return shapes.map((s) => ({ ...s, transform: multiply(rigid, s.transform) }));
+  return shapes.map((s) => projectShape(s, IDENTITY, h, outliner)).filter((s) => s !== void 0);
+}
+var PictureCache = class {
+  constructor(limit) {
+    this.limit = limit;
+  }
+  limit;
+  map = /* @__PURE__ */ new Map();
+  get(key) {
+    const v = this.map.get(key);
+    if (v) {
+      this.map.delete(key);
+      this.map.set(key, v);
+    }
+    return v;
+  }
+  set(key, v) {
+    gpuKernels()?.retain(v.tex);
+    this.map.set(key, v);
+    while (this.map.size > this.limit) {
+      const first = this.map.entries().next().value;
+      if (!first) break;
+      this.map.delete(first[0]);
+      gpuKernels()?.release(first[1].tex);
+    }
+    return v;
+  }
+};
+var flats = new PictureCache(64);
+var warps = new PictureCache(64);
+var PAD2 = 2;
+var SCALE_STEP = 4;
+var MAX_SCALE = 2;
+function flatPicture(piece, box, s, camera, ctx) {
+  const key = `${piece.shapes.map((sh) => identityOf(sh)).join(",")}|${piece.texture ? identityOf(piece.texture) : "-"}|${piece.textureAt ?? "-"}|${s}|${box.x},${box.y},${box.w},${box.h}`;
+  const hit = flats.get(key);
+  if (hit) return hit;
+  const into = s === 1 ? translate(-box.x, -box.y) : multiply(scale(s), translate(-box.x, -box.y));
+  const shapes = piece.shapes.map((sh) => ({ ...sh, transform: multiply(into, sh.transform) }));
+  const width = Math.max(1, Math.ceil(box.w * s));
+  const height = Math.max(1, Math.ceil(box.h * s));
+  let texture;
+  if (piece.texture) {
+    const p = texturePlace(piece.texture, camera.origin);
+    const at2 = { x: (p.x - box.x) * s, y: (p.y - box.y) * s };
+    const sized = s === 1 ? piece.texture : resample(piece.texture, piece.texture.width * s, piece.texture.height * s);
+    texture = placed(sized, at2);
+  }
+  const flat = { id: piece.id, name: "posed", opacity: 1, visible: true, order: 0, shapes };
+  if (texture) {
+    flat.texture = texture;
+    if (piece.textureAt !== void 0) flat.textureAt = piece.textureAt;
+  }
+  const tex = ctx.rasterize({ width, height, background: "none", origin: "top-left", layers: [flat] }, { x: box.x, y: box.y });
+  return flats.set(key, { tex, x: box.x, y: box.y, scale: s });
+}
+function placed(tex, at2) {
+  const g = gpuKernels();
+  if (g?.resident(tex)) return g.copy(tex, at2);
+  return { ...tex, at: at2 };
+}
+function snap(b) {
+  const x = Math.floor(b.x);
+  const y = Math.floor(b.y);
+  return { x, y, w: Math.ceil(b.x + b.w) - x, h: Math.ceil(b.y + b.h) - y };
+}
+function intersect(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const r = Math.min(a.x + a.w, b.x + b.w);
+  const d = Math.min(a.y + a.h, b.y + b.h);
+  return r > x && d > y ? { x, y, w: r - x, h: d - y } : void 0;
+}
+function picturePiece(piece, base2, h, pose, camera, ctx, crisp) {
+  const plane = { h };
+  const served = ctx.provided?.(piece.id);
+  if (served) return { ...base2, id: piece.id, shapes: [], texture: served, plane };
+  if (!ctx.rasterize) {
+    const shapes = piece.shapes.map((s2) => placeOnTangent(s2, h)).filter((s2) => s2 !== void 0);
+    const out2 = { ...base2, id: piece.id, shapes, plane };
+    if (piece.texture) {
+      out2.texture = piece.texture;
+      if (piece.textureAt !== void 0) out2.textureAt = piece.textureAt;
+    }
+    return out2;
+  }
+  const empty = { ...base2, id: piece.id, shapes: [], plane };
+  const content = layerContentBounds(piece, camera.origin);
+  if (!content) return empty;
+  const frame = frameRect(camera);
+  const reach = { x: frame.x - frame.w, y: frame.y - frame.h, w: frame.w * 3, h: frame.h * 3 };
+  const padded = { x: content.x - PAD2, y: content.y - PAD2, w: content.w + 2 * PAD2, h: content.h + 2 * PAD2 };
+  const within = intersect(padded, reach);
+  if (!within) return empty;
+  const box = snap(within);
+  const inv = invertMat3(h);
+  const out = inv && projectedQuadBounds(h, box);
+  const target = out && intersect(out, frame);
+  if (!inv || !target) return empty;
+  const rect = snap(target);
+  const s = crisp ? 1 : Math.min(MAX_SCALE, Math.max(1, Math.ceil((magnificationAt(h, pose.pivot) ?? 1) * SCALE_STEP) / SCALE_STEP));
+  const flat = flatPicture(piece, box, s, camera, ctx);
+  const key = `${identityOf(flat.tex)}|${h.join(",")}|${rect.x},${rect.y},${rect.w},${rect.h}`;
+  const hit = warps.get(key);
+  const texture = hit ? hit.tex : warps.set(key, { tex: warpTexture(flat.tex, { x: flat.x, y: flat.y, scale: flat.scale }, inv, rect) }).tex;
+  return { ...base2, id: piece.id, shapes: [], texture, plane };
+}
+function projectLayer(layer, camera, ctx, crisp = false) {
+  const pose = layer.pose;
+  if (!pose || !layer.visible) return [layer];
+  const h = layerHomography(pose, camera);
+  const { pose: _pose, plane: _plane, shapes: _shapes, texture: _texture, textureAt: _at, id: _id, ...base2 } = layer;
+  return layerPieces(layer).map(
+    (piece) => piece.kind === "vector" ? { ...base2, id: piece.id, shapes: projectShapes(piece.shapes, h, ctx.outline), plane: { h } } : picturePiece(piece, base2, h, pose, camera, ctx, crisp)
+  );
+}
+var ownCamera = (p) => normalizeParam(p.camera).base === "own";
+var onePlane = (p) => (normalizeParam(p.plane).base ?? "stream") !== "shape";
+var pivotIsPreset2 = (p) => (normalizeParam(p.pivot).base ?? "shape") !== "custom";
+var PIVOTS = ["shape", "center", "canvas", "custom"];
+var transform3dNode = {
+  type: "transform3d",
+  label: "Transform 3D",
+  category: "modifier",
+  description: "Poses the stream as a plane under the camera: move in X, Y and Z, turn about X, Y and Z, scale \u2014 one plane for the stream, or one per shape.",
+  inputs: [{ name: "in", type: "shapes" }],
+  outputs: [{ name: "out", type: "shapes" }],
+  params: [
+    {
+      key: "plane",
+      label: "Plane",
+      type: "enum",
+      default: "stream",
+      options: [
+        { value: "stream", label: "One for the stream" },
+        { value: "shape", label: "One per shape" }
+      ],
+      description: "One plane carrying every shape, or each shape on a plane of its own \u2014 then every value below resolves per shape, so a jitter or a stagger turns them one by one."
+    },
+    {
+      key: "order",
+      label: "Order",
+      type: "enum",
+      default: "stack",
+      options: [
+        { value: "stack", label: "As they came" },
+        { value: "depth", label: "By depth" }
+      ],
+      description: "One per shape only: keep the stream\u2019s order, or draw the nearer plane over the farther \u2014 a carousel\u2019s front cards over its back ones. Planes still cannot cut through each other.",
+      dimWhen: onePlane
+    },
+    {
+      key: "hideBack",
+      label: "Hide Back",
+      type: "bool",
+      default: false,
+      inline: true,
+      description: "Drop a plane turned past edge-on, showing its other side \u2014 a card flipped over, a carousel\u2019s far cards."
+    },
+    { key: "posX", label: "Pos. X", type: "number", default: 0, step: 1, unit: "px", description: "Moves the plane across the frame." },
+    { key: "posY", label: "Pos. Y", type: "number", default: 0, step: 1, unit: "px", description: "Moves the plane down the frame." },
+    {
+      key: "posZ",
+      label: "Pos. Z",
+      type: "number",
+      default: 0,
+      step: 1,
+      unit: "px",
+      description: "Depth: positive moves the plane away from the camera and it draws smaller; negative brings it nearer."
+    },
+    { key: "rotX", label: "Rot. X", type: "number", default: 0, step: 1, unit: "deg", description: "Tilts the plane about a horizontal line through the pivot; positive leans the top away." },
+    { key: "rotY", label: "Rot. Y", type: "number", default: 0, step: 1, unit: "deg", description: "Turns the plane about a vertical line through the pivot; positive turns the right edge away." },
+    { key: "rotZ", label: "Rot. Z", type: "number", default: 0, step: 1, unit: "deg", description: "Spins the plane in its own surface, clockwise on screen." },
+    { key: "scaleX", label: "Scale X", type: "number", default: 100, step: 1, unit: "%" },
+    { key: "scaleY", label: "Scale Y", type: "number", default: 100, step: 1, unit: "%" },
+    {
+      key: "pivot",
+      label: "Pivot",
+      type: "enum",
+      default: "shape",
+      options: [
+        { value: "shape", label: "Shape centre" },
+        { value: "center", label: "Frame centre" },
+        { value: "canvas", label: "Canvas origin" },
+        { value: "custom", label: "Custom point" }
+      ],
+      description: "What the rotations and scale turn about. Shape centre is the stream\u2019s centre for one plane, each shape\u2019s own for one per shape; Frame centre is where the camera looks."
+    },
+    { key: "pivotX", label: "Pivot X", type: "number", default: 0, step: 0.5, unit: "px", dimWhen: pivotIsPreset2 },
+    { key: "pivotY", label: "Pivot Y", type: "number", default: 0, step: 0.5, unit: "px", dimWhen: pivotIsPreset2 },
+    {
+      key: "camera",
+      label: "Camera",
+      type: "enum",
+      default: "canvas",
+      options: [
+        { value: "canvas", label: "The Canvas\u2019s" },
+        { value: "own", label: "Own perspective" }
+      ],
+      description: "Follow the Canvas\u2019s Perspective \u2014 one camera for the document \u2014 or give this plane a lens of its own."
+    },
+    {
+      key: "perspective",
+      label: "Perspective",
+      type: "number",
+      default: 1500,
+      min: 0,
+      step: 10,
+      unit: "px",
+      dimWhen: (p) => !ownCamera(p),
+      description: "Own perspective only: the eye\u2019s distance from the frame; smaller is a wider lens, 0 is orthographic."
+    }
+  ],
+  cook(ctx) {
+    const shapes = ctx.shapes("in");
+    if (shapes.length === 0) return { out: shapesVal(shapes) };
+    const perspective = ctx.enumOf("camera", ["canvas", "own"]) === "own" ? Math.max(0, ctx.num("perspective")) : ctx.canvas.perspective ?? 1500;
+    const camera = { perspective, width: ctx.canvas.w, height: ctx.canvas.h, origin: ctx.canvas.origin };
+    const mode = ctx.enumOf("pivot", PIVOTS);
+    const n = shapes.length;
+    const pivotOf2 = (i, content) => {
+      if (mode === "canvas") return { x: 0, y: 0 };
+      if (mode === "custom") return { x: ctx.num("pivotX", i, n), y: ctx.num("pivotY", i, n) };
+      if (mode === "shape" && content) return centerOf(content);
+      return frameCentre(camera);
+    };
+    const poseAt = (i, count, content) => ({
+      x: ctx.num("posX", i, count),
+      y: ctx.num("posY", i, count),
+      z: ctx.num("posZ", i, count),
+      rx: ctx.num("rotX", i, count),
+      ry: ctx.num("rotY", i, count),
+      rz: ctx.num("rotZ", i, count),
+      sx: ctx.num("scaleX", i, count) / 100,
+      sy: ctx.num("scaleY", i, count) / 100,
+      pivot: pivotOf2(i, content)
+    });
+    const hideBack = ctx.bool("hideBack");
+    const centre = frameCentre(camera);
+    const judged = (pose, content) => {
+      const c = content ? centerOf(content) : pose.pivot;
+      const p = { x: c.x - centre.x, y: c.y - centre.y };
+      const model = layerModelMatrix(pose, centre);
+      return { model, depth: planeDepth(model, p), faces: planeFaces(model, p, camera.perspective) };
+    };
+    const stamped = (projected, sources, model) => projected.map((shape, i) => {
+      const b = shapeBounds(sources[i] ?? shape);
+      const c = b ? centerOf(b) : centre;
+      const depth = planeDepth(model, { x: c.x - centre.x, y: c.y - centre.y });
+      return depth === 0 && shape.meta.depth === void 0 ? shape : { ...shape, meta: { ...shape.meta, depth } };
+    });
+    if (ctx.enumOf("plane", ["stream", "shape"]) === "stream") {
+      const content = boundsOfShapes(shapes);
+      const pose = poseAt(0, 1, content);
+      if (isIdentityPose(pose)) return { out: shapesVal(shapes) };
+      const { model, faces } = judged(pose, content);
+      if (hideBack && !faces) return { out: shapesVal([]) };
+      return { out: shapesVal(stamped(projectShapes(shapes, layerHomography(pose, camera), ctx.outline), shapes, model)) };
+    }
+    const byDepth = ctx.enumOf("order", ["stack", "depth"]) === "depth";
+    const posed = [];
+    shapes.forEach((shape, i) => {
+      const content = shapeBounds(shape);
+      const pose = poseAt(i, n, content);
+      const { model, depth, faces } = judged(pose, content);
+      if (hideBack && !faces) return;
+      posed.push({ depth, shapes: isIdentityPose(pose) ? [shape] : stamped(projectShapes([shape], layerHomography(pose, camera), ctx.outline), [shape], model) });
+    });
+    if (byDepth) posed.sort((a, b) => b.depth - a.depth);
+    return { out: shapesVal(posed.flatMap((p) => p.shapes)) };
+  }
+};
 var CIRCLE_SEGMENTS2 = 96;
 var CORNER_STYLES = [
   { value: "round", label: "Round" },
@@ -10051,13 +10893,13 @@ var arrayRadialNode = {
       const angle = start + sweep * k / divisor;
       const vars = { k, angle };
       const radius = ctx.num("radius", k, count, vars);
-      const rad = angle * Math.PI / 180;
+      const rad2 = angle * Math.PI / 180;
       let m;
       if (mode === "rotate") {
         m = multiply(multiply(translate(cx, cy), rotate(angle)), translate(-cx, -cy));
       } else {
-        const px = cx + radius * Math.cos(rad);
-        const py = cy + radius * Math.sin(rad);
+        const px = cx + radius * Math.cos(rad2);
+        const py = cy + radius * Math.sin(rad2);
         m = mode === "orbit" ? multiply(translate(px, py), rotate(angle)) : translate(px, py);
       }
       for (const [j, shape] of carry(k).entries()) {
@@ -10580,7 +11422,7 @@ var jitterNode = {
     const posYParam = ctx.num("positionY");
     const posY = posYParam < 0 ? posX : posYParam;
     const rot = ctx.num("rotation");
-    const scale4 = ctx.num("scale");
+    const scale5 = ctx.num("scale");
     const axis2 = ctx.enumOf("scaleAxis", ["both", "x", "y"]);
     const uniform = ctx.bool("uniformScale");
     const opacity = ctx.num("opacity");
@@ -10598,8 +11440,8 @@ var jitterNode = {
       const tx = posX === 0 ? 0 : signed() * posX;
       const ty = posY === 0 ? 0 : signed() * posY;
       const rotation = rot === 0 ? 0 : signed() * rot;
-      const first = scale4 === 0 ? 1 : 1 + signed() * scale4;
-      const second = scale4 === 0 ? 1 : uniform || axis2 !== "both" ? first : 1 + signed() * scale4;
+      const first = scale5 === 0 ? 1 : 1 + signed() * scale5;
+      const second = scale5 === 0 ? 1 : uniform || axis2 !== "both" ? first : 1 + signed() * scale5;
       const sx = axis2 === "y" ? 1 : first;
       const sy = axis2 === "x" ? 1 : axis2 === "both" ? second : first;
       const grown = sx !== 1 || sy !== 1 ? scaleAbout(shape, sx, sy, pivotOf(shape)) : shape;
@@ -10714,8 +11556,8 @@ function drawnFill(fill, local2) {
   const rgba = parseHex(fill);
   if (!rgba) return "none";
   const a = Math.round(rgba[3] * local2 * local2 * 255);
-  const hex232 = (n) => n.toString(16).padStart(2, "0");
-  return `#${hex232(rgba[0])}${hex232(rgba[1])}${hex232(rgba[2])}${hex232(a)}`;
+  const hex242 = (n) => n.toString(16).padStart(2, "0");
+  return `#${hex242(rgba[0])}${hex242(rgba[1])}${hex242(rgba[2])}${hex242(a)}`;
 }
 function drawShape(ctx, shape, local2, emitted) {
   const lines = flatten(shape);
@@ -10738,8 +11580,8 @@ function drawShape(ctx, shape, local2, emitted) {
   return out.length > 0 ? out : [fadeShape(shape, local2)];
 }
 function wipeDirection(angleDeg) {
-  const rad = angleDeg * Math.PI / 180;
-  return { x: Math.cos(rad), y: Math.sin(rad) };
+  const rad2 = angleDeg * Math.PI / 180;
+  return { x: Math.cos(rad2), y: Math.sin(rad2) };
 }
 function wipeExtent(shapes, dir) {
   const dot = (x, y) => x * dir.x + y * dir.y;
@@ -11085,52 +11927,6 @@ function parseIndexList(text) {
   }
   return [...out].sort((m, n) => m - n);
 }
-var isBitmap = (s) => isBitmapFamily(s.fontFamily);
-var isVariable = (s) => resolveFace(s.fontFamily, s.fontWeight ?? 400, s.fontStretch).variation !== void 0;
-var needsOutlining = (s) => isBitmap(s) || isVariable(s);
-var every = () => true;
-function anyText(scene, pick) {
-  const any = (shapes) => shapes.some((s) => s.kind === "text" ? pick(s) : s.kind === "group" && any(s.children));
-  return scene.layers.some((l) => any(l.shapes));
-}
-function outlineWhere(shape, outliner, pick) {
-  if (shape.kind === "group") {
-    const children = shape.children.map((c2) => outlineWhere(c2, outliner, pick));
-    return children.some((c2, i) => c2 !== shape.children[i]) ? { ...shape, children } : shape;
-  }
-  if (shape.kind !== "text" || !pick(shape)) return shape;
-  const weight = shape.fontWeight ?? 400;
-  const g = outliner({ text: shape.text, family: shape.fontFamily, weight, stretch: shape.fontStretch, size: shape.fontSize, letterSpacing: shape.letterSpacing });
-  if (!g) return shape;
-  const shift = shape.anchor === "middle" ? -g.width / 2 : shape.anchor === "end" ? -g.width : 0;
-  const [a, b, c, d, e, f] = shape.transform;
-  const tx = shape.x + shift;
-  const ty = shape.y;
-  const { x: _x, y: _y, text: _t, fontSize: _s, fontFamily: _f, fontWeight: _w, fontStretch: _st, anchor: _a, letterSpacing: _l, metrics: _m, ...rest } = shape;
-  return {
-    ...rest,
-    kind: "path",
-    d: g.d,
-    transform: [a, b, c, d, a * tx + c * ty + e, b * tx + d * ty + f],
-    meta: { ...shape.meta, tags: [...shape.meta.tags ?? [], "glyphs"] }
-  };
-}
-function outlineTextShape(shape, outliner, all = false) {
-  return outlineWhere(shape, outliner, all ? every : needsOutlining);
-}
-function outlineScene(scene, outliner, pick) {
-  if (!outliner || !anyText(scene, pick)) return scene;
-  return {
-    ...scene,
-    layers: scene.layers.map((l) => {
-      const shapes = l.shapes.map((s) => outlineWhere(s, outliner, pick));
-      return shapes.some((s, i) => s !== l.shapes[i]) ? { ...l, shapes } : l;
-    })
-  };
-}
-function outlineBitmapText(scene, outliner) {
-  return outlineScene(scene, outliner, isBitmap);
-}
 var selectModeIsNot = (mode) => (params) => (normalizeParam(params.mode).base ?? "every-nth") !== mode;
 var selectNode = {
   type: "select",
@@ -11349,8 +12145,8 @@ var alignNode = {
     const alignX = ctx.bool("alignX");
     const alignY = ctx.bool("alignY");
     if (!alignX && !alignY) return { out: shapesVal(withRef(input)) };
-    const snap = ctx.int("snap");
-    const step = snap > 0 ? 90 / 2 ** (snap - 1) : 0;
+    const snap2 = ctx.int("snap");
+    const step = snap2 > 0 ? 90 / 2 ** (snap2 - 1) : 0;
     const side = ctx.enumOf("side", ["inside", "on-edge", "outside"]);
     const over = side === "inside" ? 0 : side === "on-edge" ? 0.5 : 1;
     const asOne = ctx.bool("asOne");
@@ -11367,9 +12163,9 @@ var alignNode = {
       if (!b) return shape;
       const raw = ctx.num("angle", i, n);
       const deg = step > 0 ? Math.round(raw / step) * step : raw;
-      const rad = deg * Math.PI / 180;
-      const cx = Math.cos(rad);
-      const cy = Math.sin(rad);
+      const rad2 = deg * Math.PI / 180;
+      const cx = Math.cos(rad2);
+      const cy = Math.sin(rad2);
       const m = Math.max(Math.abs(cx), Math.abs(cy)) || 1;
       const reach = Math.max(0, Math.min(1, ctx.num("reach", i, n)));
       const ax = (1 + cx / m * reach) / 2;
@@ -11579,7 +12375,7 @@ var sortNode = {
   cook(ctx) {
     const input = ctx.shapes("in");
     const by = ctx.enumOf("by", SORT_MODES);
-    let ordered;
+    let ordered2;
     if (by === "shuffle") {
       const clock = ctx.inputs["reseed"];
       let reseed = 0;
@@ -11589,39 +12385,39 @@ var sortNode = {
       }
       const salt = ctx.int("salt");
       const slot = new Map(input.map((s) => [s.id, ctx.rand("shuffle", salt, reseed, s.id).next()]));
-      ordered = [...input].sort((a, b) => slot.get(a.id) - slot.get(b.id) || a.id.localeCompare(b.id));
+      ordered2 = [...input].sort((a, b) => slot.get(a.id) - slot.get(b.id) || a.id.localeCompare(b.id));
     } else if (by === "source") {
       const emitters = [];
       for (const s of input) if (!emitters.includes(s.meta.sourceNodeId)) emitters.push(s.meta.sourceNodeId);
-      ordered = [...input].sort((a, b) => {
+      ordered2 = [...input].sort((a, b) => {
         const e = emitters.indexOf(a.meta.sourceNodeId) - emitters.indexOf(b.meta.sourceNodeId);
         return e !== 0 ? e : sourceIndex(a) - sourceIndex(b) || a.id.localeCompare(b.id);
       });
     } else {
-      const placed = [];
+      const placed2 = [];
       const unplaced = [];
       for (const shape of input) {
         const b = shapeBounds(shape);
         if (b) {
           const c = centerOf(b);
-          placed.push({ shape, cx: c.x, cy: c.y, h: b.h });
+          placed2.push({ shape, cx: c.x, cy: c.y, h: b.h });
         } else unplaced.push(shape);
       }
       if (by === "x") {
-        placed.sort((a, b) => a.cx - b.cx || a.cy - b.cy);
+        placed2.sort((a, b) => a.cx - b.cx || a.cy - b.cy);
       } else if (by === "y") {
-        placed.sort((a, b) => a.cy - b.cy || a.cx - b.cx);
+        placed2.sort((a, b) => a.cy - b.cy || a.cx - b.cx);
       } else if (by === "reading") {
-        const tol = ctx.num("rowTolerance") * median(placed.map((p) => p.h));
-        placed.sort((a, b) => a.cy - b.cy);
+        const tol = ctx.num("rowTolerance") * median(placed2.map((p) => p.h));
+        placed2.sort((a, b) => a.cy - b.cy);
         const rows = [];
-        for (const p of placed) {
+        for (const p of placed2) {
           const row = rows[rows.length - 1];
           if (row && p.cy - row[0].cy <= tol) row.push(p);
           else rows.push([p]);
         }
         for (const row of rows) row.sort((a, b) => a.cx - b.cx);
-        placed.splice(0, placed.length, ...rows.flat());
+        placed2.splice(0, placed2.length, ...rows.flat());
       } else {
         const bounds = boundsOfShapes(input);
         const c = bounds ? centerOf(bounds) : { x: 0, y: 0 };
@@ -11631,12 +12427,12 @@ var sortNode = {
           const k = ((deg - start) % 360 + 360) % 360;
           return k > 360 - 1e-6 ? 0 : k;
         };
-        placed.sort((a, b) => keyOf(a) - keyOf(b) || Math.hypot(a.cx - c.x, a.cy - c.y) - Math.hypot(b.cx - c.x, b.cy - c.y));
+        placed2.sort((a, b) => keyOf(a) - keyOf(b) || Math.hypot(a.cx - c.x, a.cy - c.y) - Math.hypot(b.cx - c.x, b.cy - c.y));
       }
-      ordered = [...placed.map((p) => p.shape), ...unplaced];
+      ordered2 = [...placed2.map((p) => p.shape), ...unplaced];
     }
-    if (ctx.bool("reverse")) ordered.reverse();
-    return { out: shapesVal(ordered.map((s, i) => renumbered(s, i))) };
+    if (ctx.bool("reverse")) ordered2.reverse();
+    return { out: shapesVal(ordered2.map((s, i) => renumbered(s, i))) };
   }
 };
 var groupNode = {
@@ -11890,9 +12686,9 @@ var randomValueNode = {
   cook(ctx) {
     const min = ctx.num("min");
     const max = ctx.num("max");
-    const snap = ctx.num("step");
+    const snap2 = ctx.num("step");
     let value = ctx.rand("value", seedSalt(ctx.int("salt"))).range(Math.min(min, max), Math.max(min, max));
-    if (snap > 0) value = Math.round(value / snap) * snap;
+    if (snap2 > 0) value = Math.round(value / snap2) * snap2;
     return { out: numVal(value) };
   }
 };
@@ -12020,9 +12816,9 @@ var randomStepNode = {
     const index = interval > 0 ? Math.floor(ctx.t / interval) : 0;
     const min = ctx.num("min");
     const max = ctx.num("max");
-    const snap = ctx.num("step");
+    const snap2 = ctx.num("step");
     let value = ctx.rand("value", seedSalt(ctx.int("salt")), index).range(Math.min(min, max), Math.max(min, max));
-    if (snap > 0) value = Math.round(value / snap) * snap;
+    if (snap2 > 0) value = Math.round(value / snap2) * snap2;
     return { out: numVal(value) };
   }
 };
@@ -12417,6 +13213,7 @@ var mathNode = {
   type: "math",
   label: "Math",
   category: "driver",
+  description: "One operation on two numbers, A and B: wire a driver into A and set B to scale, offset, clamp or wrap it \u2014 Time \xD7 45 is a rotation in degrees per second.",
   inputs: [],
   outputs: [{ name: "out", type: "number" }],
   params: [
@@ -12981,6 +13778,7 @@ var blurNode = {
   type: "blur",
   label: "Blur",
   category: "post",
+  description: "A Gaussian blur of the picture by Radius, the same bytes everywhere. For a blur that follows depth, see Depth of Field.",
   inputs: [{ name: "in", type: "texture" }],
   outputs: [{ name: "out", type: "texture" }],
   params: [{ key: "radius", label: "Radius", type: "number", default: 4, min: 0, max: 64, step: 0.5, unit: "px" }],
@@ -13130,9 +13928,9 @@ var chromaticNode = {
     const tex = ctx.texture();
     if (!tex) return QUIET3;
     const offset = ctx.num("offset");
-    const rad = ctx.num("angle") * Math.PI / 180;
+    const rad2 = ctx.num("angle") * Math.PI / 180;
     return {
-      out: textureVal(chromaticAberration(tex, offset * Math.cos(rad), offset * Math.sin(rad)))
+      out: textureVal(chromaticAberration(tex, offset * Math.cos(rad2), offset * Math.sin(rad2)))
     };
   }
 };
@@ -13140,6 +13938,7 @@ var scanlinesNode = {
   type: "scanlines",
   label: "Scanlines",
   category: "post",
+  description: "The CRT look: every few rows (or columns) darkened by Strength, rolling with Roll.",
   inputs: [{ name: "in", type: "texture" }],
   outputs: [{ name: "out", type: "texture" }],
   // `speed` rolls the lines with t.
@@ -13534,9 +14333,130 @@ var matteNode = {
     return { out: textureVal(matte(tex, m, { mode: ctx.enumOf("mode", ["alpha", "luma"]), invert: ctx.bool("invert") }, ctx.canvas.origin ?? "top-left")) };
   }
 };
+function silhouette(shape, colour) {
+  const s = shape.style;
+  const style = {
+    ...s,
+    fill: s.fill === void 0 || s.fill === "none" ? "none" : colour,
+    stroke: s.stroke === void 0 || s.stroke === "none" || (s.strokeWidth ?? 1) <= 0 ? "none" : colour,
+    opacity: 1
+  };
+  switch (shape.kind) {
+    case "group":
+      return { ...shape, style, children: shape.children.map((c) => silhouette(c, colour)) };
+    case "image":
+      return { id: shape.id, kind: "rect", x: shape.x, y: shape.y, w: shape.w, h: shape.h, rx: 0, transform: shape.transform, style: { ...style, fill: colour, stroke: "none" }, meta: shape.meta };
+    default:
+      return { ...shape, style };
+  }
+}
+var hex222 = (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0");
+function farthestFirst(items) {
+  return [...items].sort((a, b) => b.depth - a.depth);
+}
+var depthOfFieldNode = {
+  type: "depth-of-field",
+  label: "Depth of Field",
+  category: "post",
+  description: "A lens with a focal plane: what sits at Focus stays sharp, and the picture blurs the farther a shape is from it, nearer or beyond. Wire the picture into In and the same shapes that made it into Depth \u2014 they remember how deep Transform 3D put them.",
+  keywords: ["dof", "focus", "defocus", "bokeh", "lens", "rack focus", "depth", "3d", "blur"],
+  quickKey: "focus",
+  inputs: [
+    { name: "in", type: "texture", label: "In" },
+    { name: "depth", type: "shapes", label: "Depth" }
+  ],
+  outputs: [{ name: "out", type: "texture" }],
+  params: [
+    { key: "focus", label: "Focus", type: "number", default: 0, step: 10, unit: "px", description: "The depth that is sharp, in Pos. Z\u2019s terms: 0 is the frame itself, positive is away from the camera. Wire a Seq to pull focus." },
+    { key: "range", label: "Range", type: "number", default: 200, min: 0, step: 10, unit: "px", description: "The depth kept sharp around Focus, half of it either side." },
+    { key: "falloff", label: "Falloff", type: "number", default: 800, min: 0, step: 10, unit: "px", description: "How much farther out of the Range the blur takes to reach its full Blur; 0 snaps to it at once." },
+    { key: "blur", label: "Blur", type: "number", default: 12, min: 0, max: 64, step: 0.5, unit: "px", description: "The blur at the far end of the Falloff, like the Blur node\u2019s Radius." }
+  ],
+  cook(ctx) {
+    const tex = ctx.texture("in");
+    if (!tex) return QUIET3;
+    const shapes = ctx.shapes("depth");
+    const most = ctx.num("blur");
+    if (shapes.length === 0 || most <= 0 || ctx.canvas.w <= 0 || ctx.canvas.h <= 0) return { out: textureVal(tex) };
+    if (!ctx.rasterize) {
+      throw new Error("no rasteriser available yet \u2014 the preview loads one on demand; exports always have one");
+    }
+    const focus = ctx.num("focus");
+    const range = Math.max(0, ctx.num("range"));
+    const falloff = Math.max(0, ctx.num("falloff"));
+    const judged = shapes.map((shape) => {
+      const depth = shape.meta.depth ?? 0;
+      const away = Math.abs(depth - focus) - range / 2;
+      const k = away <= 0 ? 0 : falloff > 0 ? Math.min(1, away / falloff) : 1;
+      const level = focusLevel(most * k);
+      return { shape, depth, level, side: level > 0 && depth > focus ? 1 : 0 };
+    });
+    if (judged.every((j) => j.level === 0)) return { out: textureVal(tex) };
+    const map = ctx.rasterize({
+      width: ctx.canvas.w,
+      height: ctx.canvas.h,
+      background: "none",
+      origin: ctx.canvas.origin,
+      layers: [
+        {
+          id: ctx.nodeId,
+          name: "focus",
+          opacity: 1,
+          visible: true,
+          order: 0,
+          shapes: farthestFirst(judged).map((j) => silhouette(j.shape, `#${hex222(j.level)}${j.side ? "ff" : "00"}00`))
+        }
+      ]
+    });
+    const slices = focusSlices(judged.map((j) => ({ level: j.level, side: j.side })));
+    return { out: textureVal(depthOfField(tex, map, slices, ctx.canvas.origin ?? "top-left")) };
+  }
+};
+var depthMapNode = {
+  type: "depth-map",
+  label: "Depth Map",
+  category: "post",
+  description: "The shapes drawn as their depth: a grey per shape from black at Near to white at Far, the nearer shape over the farther. What Depth of Field sees \u2014 and a depth fog, through a Blend.",
+  keywords: ["depth", "z", "map", "zdepth", "fog", "3d", "grey"],
+  inputs: [{ name: "in", type: "shapes" }],
+  outputs: [{ name: "out", type: "texture" }],
+  params: [
+    { key: "near", label: "Near", type: "number", default: -1e3, step: 10, unit: "px", description: "The depth drawn black, in Pos. Z\u2019s terms; anything nearer is black too." },
+    { key: "far", label: "Far", type: "number", default: 1e3, step: 10, unit: "px", description: "The depth drawn white; anything farther is white too. A shape no 3D node has posed sits at 0." }
+  ],
+  cook(ctx) {
+    if (!ctx.rasterize) {
+      throw new Error("no rasteriser available yet \u2014 the preview loads one on demand; exports always have one");
+    }
+    if (ctx.canvas.w <= 0 || ctx.canvas.h <= 0) throw new Error("has no size to draw at \u2014 give the project a canvas");
+    const near = ctx.num("near");
+    const span = ctx.num("far") - near;
+    const judged = ctx.shapes("in").map((shape) => ({ shape, depth: shape.meta.depth ?? 0 }));
+    const grey = (depth) => hex222(span === 0 ? 128 : Math.max(0, Math.min(1, (depth - near) / span)) * 255);
+    const texture = ctx.rasterize({
+      width: ctx.canvas.w,
+      height: ctx.canvas.h,
+      background: "none",
+      origin: ctx.canvas.origin,
+      layers: [
+        {
+          id: ctx.nodeId,
+          name: "depth",
+          opacity: 1,
+          visible: true,
+          order: 0,
+          shapes: farthestFirst(judged).map((j) => silhouette(j.shape, `#${grey(j.depth).repeat(3)}`))
+        }
+      ]
+    });
+    return { out: textureVal(texture) };
+  }
+};
 var POST_NODES = [
   rasterizeNode,
   blurNode,
+  depthOfFieldNode,
+  depthMapNode,
   glitchNode,
   chromaticNode,
   scanlinesNode,
@@ -13571,13 +14491,13 @@ var familyOf = (p) => resolveFamily(String(normalizeParam(p.fontFamily).base ??
 var FALLBACK_CAP_HEIGHT2 = 0.7;
 var FALLBACK_BLOCK = { top: 0.95, bottom: -0.35 };
 var styleParam2 = (key) => STYLE_PARAMS.find((p) => p.key === key);
-var hex222 = (n) => n.toString(16).padStart(2, "0");
+var hex23 = (n) => n.toString(16).padStart(2, "0");
 function hexOf(rgba, k) {
   const a = rgba[k * 4 + 3];
   if (a === 0) return void 0;
   const straight = (v) => Math.min(255, Math.round(v * 255 / a));
-  const rgb = `#${hex222(straight(rgba[k * 4]))}${hex222(straight(rgba[k * 4 + 1]))}${hex222(straight(rgba[k * 4 + 2]))}`;
-  return a === 255 ? rgb : `${rgb}${hex222(a)}`;
+  const rgb = `#${hex23(straight(rgba[k * 4]))}${hex23(straight(rgba[k * 4 + 1]))}${hex23(straight(rgba[k * 4 + 2]))}`;
+  return a === 255 ? rgb : `${rgb}${hex23(a)}`;
 }
 function pathYBounds(d) {
   const nums = d.match(/-?\d*\.?\d+(?:e-?\d+)?/g);
@@ -13993,9 +14913,9 @@ var halftoneNode = {
     const ty = tex.at?.y ?? (ctx.canvas.origin === "center" ? -tex.height / 2 : 0);
     const cx = tex.width / 2;
     const cy = tex.height / 2;
-    const rad = angle * Math.PI / 180;
-    const ex = Math.cos(rad);
-    const ey = Math.sin(rad);
+    const rad2 = angle * Math.PI / 180;
+    const ex = Math.cos(rad2);
+    const ey = Math.sin(rad2);
     const reach = Math.ceil(Math.hypot(cx, cy) / cell);
     const shapes = [];
     for (let j = -reach; j <= reach; j++) {
@@ -14196,10 +15116,15 @@ var contoursNode = {
   type: "contours",
   label: "Contours",
   category: "post",
-  description: "Pixels back into lines: the picture read as a height map and traced where it crosses evenly spaced levels \u2014 the lines of a topographic map, every Nth one a major line. Wire Noise Paint \u2192 Rect \u2192 Rasterize in for terrain; animate Offset to make the lines flow.",
+  description: "Pixels back into lines: the picture read as a height map and traced where it crosses evenly spaced levels \u2014 the lines of a topographic map, every Nth one a major line (wire the Major output to give the majors a chain of their own). Wire Noise Paint \u2192 Rect \u2192 Rasterize in for terrain; animate Offset to make the lines flow.",
   keywords: ["contours", "contour", "topographic", "topo", "isolines", "iso", "height", "map", "terrain", "marching squares", "lines", "trace"],
   inputs: [{ name: "in", type: "texture", label: "In" }],
-  outputs: [{ name: "out", type: "shapes" }],
+  outputs: [
+    { name: "out", type: "shapes" },
+    // Wired, the majors leave `out` for this socket, so each set can take
+    // its own chain (Outline Stroke, a Glow) without a Select.
+    { name: "major", type: "shapes", label: "Major", claims: true }
+  ],
   params: [
     { key: "lines", label: "Lines", type: "int", default: 12, min: 1, max: 128, description: "How many levels between black and white: the lines\u2019 spacing in height." },
     { key: "offset", label: "Offset", type: "number", default: 0.5, step: 0.01, description: "Slides every level up the height map, in line spacings: 1 moves each line to where the next one was. Animate it for lines that flow; the majors travel with their lines." },
@@ -14221,6 +15146,7 @@ var contoursNode = {
     { key: "width", label: "Width", type: "number", default: 1, min: 0, step: 0.1, unit: "px", description: "A minor line\u2019s width.", group: "Lines" },
     { key: "majorEvery", label: "Major Every", type: "int", default: 5, min: 0, max: 32, description: "Every Nth level is a major line, drawn at Major Width and tagged major. 0: no majors.", group: "Lines" },
     { key: "majorWidth", label: "Major Width", type: "number", default: 3, min: 0, step: 0.1, unit: "px", group: "Lines" },
+    { key: "majorStroke", label: "Major Stroke", type: "color", default: "none", description: "The major lines\u2019 colour. None: the same as Stroke.", group: "Lines" },
     { key: "opacity", label: "Opacity", type: "number", default: 1, min: 0, max: 1, step: 0.01, group: "Lines" }
   ],
   cook(ctx) {
@@ -14235,6 +15161,8 @@ var contoursNode = {
     const width = Math.max(0, ctx.num("width"));
     const every2 = Math.max(0, ctx.int("majorEvery"));
     const majorWidth = Math.max(0, ctx.num("majorWidth"));
+    const majorColor = ctx.color("majorStroke");
+    const majorStroke = majorColor && majorColor !== "none" ? majorColor : stroke;
     const opacity = ctx.num("opacity");
     const tx = tex.at?.x ?? (ctx.canvas.origin === "center" ? -tex.width / 2 : 0);
     const ty = tex.at?.y ?? (ctx.canvas.origin === "center" ? -tex.height / 2 : 0);
@@ -14244,6 +15172,8 @@ var contoursNode = {
     const base2 = Math.floor(offset);
     const frac = offset - base2;
     const shapes = [];
+    const majors = [];
+    const split = ctx.wiredOutputs.has("major");
     for (let k = 0; k < count; k++) {
       const level = (k + frac) / count;
       if (level <= 0 || level >= 1) continue;
@@ -14259,18 +15189,19 @@ var contoursNode = {
           d += `${p === 0 ? "M" : " L"} ${num22(sx(gx))} ${num22(sy(gy))}`;
         }
         if (line.closed) d += " Z";
-        const index = shapes.length;
-        shapes.push({
+        const into = split && major ? majors : shapes;
+        const index = into.length;
+        into.push({
           kind: "path",
           d,
-          id: ctx.shapeId(index),
+          id: ctx.shapeId(index, into === majors ? "major" : void 0),
           transform: IDENTITY,
-          style: { fill: "none", stroke, strokeWidth: major ? majorWidth : width, opacity },
+          style: { fill: "none", stroke: major ? majorStroke : stroke, strokeWidth: major ? majorWidth : width, opacity },
           meta: ctx.meta(index, ["contour", major ? "major" : "minor", `level:${g}`])
         });
       }
     }
-    return { out: shapesVal(shapes) };
+    return { out: shapesVal(shapes), major: shapesVal(split ? majors : shapes.filter((s2) => s2.meta.tags?.includes("major"))) };
   }
 };
 var BORDERS = {
@@ -14451,10 +15382,66 @@ var textBoxNode = {
   }
 };
 var notMono = (p) => normalizeParam(p.display).base !== "mono";
+var pivotIsPreset3 = (p) => (normalizeParam(p.pivot).base ?? "center") !== "custom";
+var LAYER_3D_PARAMS = [
+  { key: "posX", label: "Pos. X", type: "number", default: 0, step: 1, unit: "px", group: "3D", description: "Moves the layer\u2019s plane across the frame." },
+  { key: "posY", label: "Pos. Y", type: "number", default: 0, step: 1, unit: "px", group: "3D", description: "Moves the layer\u2019s plane down the frame." },
+  {
+    key: "posZ",
+    label: "Pos. Z",
+    type: "number",
+    default: 0,
+    step: 1,
+    unit: "px",
+    group: "3D",
+    description: "Depth: positive moves the plane away from the camera and it draws smaller; negative brings it nearer."
+  },
+  {
+    key: "rotX",
+    label: "Rot. X",
+    type: "number",
+    default: 0,
+    step: 1,
+    unit: "deg",
+    group: "3D",
+    description: "Tilts the plane about a horizontal line through the pivot; positive leans the top away."
+  },
+  {
+    key: "rotY",
+    label: "Rot. Y",
+    type: "number",
+    default: 0,
+    step: 1,
+    unit: "deg",
+    group: "3D",
+    description: "Turns the plane about a vertical line through the pivot; positive turns the right edge away."
+  },
+  { key: "rotZ", label: "Rot. Z", type: "number", default: 0, step: 1, unit: "deg", group: "3D", description: "Spins the plane in its own surface, clockwise on screen." },
+  { key: "scaleX", label: "Scale X", type: "number", default: 100, step: 1, unit: "%", group: "3D" },
+  { key: "scaleY", label: "Scale Y", type: "number", default: 100, step: 1, unit: "%", group: "3D" },
+  {
+    key: "pivot",
+    label: "Pivot",
+    type: "enum",
+    default: "center",
+    group: "3D",
+    options: [
+      { value: "center", label: "Frame centre" },
+      { value: "canvas", label: "Canvas origin" },
+      { value: "shape", label: "Content centre" },
+      { value: "custom", label: "Custom point" }
+    ],
+    description: "What the rotations and scale turn about: where the camera looks, the document\u2019s (0,0), the centre of what the layer holds, or a point of your own."
+  },
+  { key: "pivotX", label: "Pivot X", type: "number", default: 0, step: 0.5, unit: "px", group: "3D", dimWhen: pivotIsPreset3 },
+  { key: "pivotY", label: "Pivot Y", type: "number", default: 0, step: 0.5, unit: "px", group: "3D", dimWhen: pivotIsPreset3 }
+];
+var gathered = /* @__PURE__ */ new Map();
 var layerNode = {
   type: "layer",
   label: "Layer",
   category: "output",
+  description: 'A composition of its own with its own page and clock: wire shapes (and one post chain) into "in", the Layer into the Canvas. Order stacks layers; the 3D group poses the whole layer as a plane under the camera.',
   inputs: [
     // Multi: a layer gathers streams directly — no obligatory Merge in front.
     // The one socket takes a texture too: the way pixels re-enter the scene.
@@ -14497,7 +15484,8 @@ var layerNode = {
       exposable: false,
       inspectorOnly: true,
       description: "Wrap the layer\u2019s clock at its Duration instead of switching off."
-    }
+    },
+    ...LAYER_3D_PARAMS
   ],
   cook(ctx) {
     const layer = {
@@ -14508,13 +15496,41 @@ var layerNode = {
       order: ctx.int("order"),
       shapes: []
     };
-    for (const v of ctx.inputList("in")) {
-      if (v.t === "shapes") layer.shapes.push(...v.v);
+    const inputs = ctx.inputList("in");
+    const shapes = [];
+    for (const v of inputs) {
+      if (v.t === "shapes") shapes.push(...v.v);
       else if (v.t === "texture" && !layer.texture) {
         layer.texture = v.v;
-        if (layer.shapes.length > 0) layer.textureAt = layer.shapes.length;
+        if (shapes.length > 0) layer.textureAt = shapes.length;
       }
     }
+    const key = inputs.map((v) => v.t === "shapes" ? identityOf(v.v) : "-").join(",");
+    const kept = gathered.get(ctx.nodeId);
+    if (kept && kept.key === key) layer.shapes = kept.shapes;
+    else {
+      layer.shapes = shapes;
+      gathered.set(ctx.nodeId, { key, shapes });
+    }
+    const camera = { perspective: 0, width: ctx.canvas.w, height: ctx.canvas.h, origin: ctx.canvas.origin };
+    const pose = {
+      x: ctx.num("posX"),
+      y: ctx.num("posY"),
+      z: ctx.num("posZ"),
+      rx: ctx.num("rotX"),
+      ry: ctx.num("rotY"),
+      rz: ctx.num("rotZ"),
+      sx: ctx.num("scaleX") / 100,
+      sy: ctx.num("scaleY") / 100,
+      pivot: { x: 0, y: 0 }
+    };
+    if (!isIdentityPose(pose)) {
+      pose.pivot = layerPivot(ctx.enumOf("pivot", ["center", "canvas", "shape", "custom"]), layer, camera, {
+        x: ctx.num("pivotX"),
+        y: ctx.num("pivotY")
+      });
+      layer.pose = pose;
+    }
     return { out: layersVal([layer]) };
   }
 };
@@ -14546,6 +15562,18 @@ var canvasNode = {
       ],
       description: "Centre puts (0,0) mid-frame \u2014 HUD maths without the offsets."
     },
+    // The fixed camera, for layers posed in 3D: it looks at the frame
+    // centre from this far in front. CSS's `perspective`, AE's zoom.
+    {
+      key: "perspective",
+      label: "Perspective",
+      type: "number",
+      default: 1500,
+      min: 0,
+      step: 10,
+      unit: "px",
+      description: "The camera\u2019s distance from the frame, for layers posed in 3D: smaller is a wider lens and stronger foreshortening; 0 is orthographic, no foreshortening at all."
+    },
     // How the pixels are made. A small LCD has no anti-aliasing and, as
     // often as not, one colour beside its background; the preview and every
     // export read this, so the artboard shows what ships.
@@ -14574,6 +15602,12 @@ var canvasNode = {
       dimWhen: notMono
     }
   ],
+  // The pictures the raster worker makes of posed layers' picture runs,
+  // under the runs' ids: served on the main thread, where the cook below
+  // has no rasteriser (it projects the vectors itself).
+  standIns: (_inputs, multi) => (multi.in ?? []).flatMap(
+    (v) => v.t === "layers" ? v.v.filter((l) => l.pose && l.visible).flatMap((l) => layerPieces(l).filter((p) => p.kind === "picture").map((p) => p.id)) : []
+  ),
   cook(ctx) {
     const layers = [];
     for (const value of ctx.inputList("in")) {
@@ -14602,14 +15636,19 @@ var canvasNode = {
     const sorted = layers.map((l, i) => ({ l, i })).sort((a, b) => a.l.order - b.l.order || a.i - b.i).map(({ l }) => l);
     const mode = ctx.enumOf("display", ["vector", "pixel", "mono"]);
     const display = mode === "vector" ? void 0 : { mode, ink: ctx.color("ink"), threshold: Math.min(1, Math.max(0, ctx.num("threshold"))) };
+    const width = ctx.int("width");
+    const height = ctx.int("height");
+    const origin = ctx.enumOf("origin", ["top-left", "center"]);
+    const camera = { perspective: Math.max(0, ctx.num("perspective")), width, height, origin };
+    const posed = sorted.flatMap((l) => l.pose ? projectLayer(l, camera, ctx, display !== void 0) : [l]);
     return {
       out: sceneVal({
-        width: ctx.int("width"),
-        height: ctx.int("height"),
+        width,
+        height,
         background: ctx.color("bg"),
-        origin: ctx.enumOf("origin", ["top-left", "center"]),
+        origin,
         ...display ? { display } : {},
-        layers: sorted
+        layers: posed
       })
     };
   }
@@ -14766,6 +15805,888 @@ var ografNode = {
     return out;
   }
 };
+function graph() {
+  const nodes = [];
+  const edges = [];
+  const node = (id, type, col, row, params = {}, name) => {
+    const full = type === "text" ? { vAnchor: "baseline", ...params } : params;
+    nodes.push({ id, type, params: full, position: { x: col * 260, y: row * 200 }, ...name ? { name } : {} });
+    return id;
+  };
+  const wire = (from, to, toPort, fromPort = "out") => {
+    edges.push({ id: `e${edges.length + 1}`, from, fromPort, to, toPort });
+  };
+  return { nodes, edges, node, wire };
+}
+function glitchRelay() {
+  const { nodes, edges, node, wire } = graph();
+  node("clock", "time", 0, 0);
+  node("degrees", "math", 1, 0, { op: "multiply", a: 0, b: 90 });
+  node("ring", "tick-ring", 0, 1, {
+    cx: 0,
+    cy: 0,
+    radius: 210,
+    count: 60,
+    length: 8,
+    majorEvery: 5,
+    majorLength: 18,
+    majorWidth: 2,
+    align: "inward",
+    stroke: "#7fe8d0",
+    strokeWidth: 1
+  });
+  node("spin", "transform", 1, 1, { pivot: "custom", pivotX: 0, pivotY: 0 });
+  node("hub", "crosshair", 1, 2, { cx: 0, cy: 0, size: 26, gap: 7, stroke: "#5d7285" });
+  node("dialMerge", "merge", 2, 1);
+  node("dial", "layer", 3, 1, { order: 1 }, "Dial");
+  wire("clock", "degrees", "a");
+  wire("degrees", "spin", "rotation");
+  wire("ring", "spin", "in");
+  wire("spin", "dialMerge", "in");
+  wire("hub", "dialMerge", "in");
+  wire("dialMerge", "dial", "in");
+  node("title", "text", 0, 4, { text: "SYS//RELAY 07", x: -90, y: -68, fontSize: 13, fill: "#dbe7f0", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("code", "random-code", 0, 3, { count: 9, x: -90, y: -50, stepY: 14, fontSize: 11, fill: "#9fd4e8" });
+  node("readMerge", "merge", 1, 3);
+  node("pixels", "rasterize", 2, 3);
+  node("tear", "glitch", 3, 3, { amount: 16, bands: 30, probability: 0.35, rate: 10, channelShift: 4 });
+  node("fringe", "chromatic", 4, 3, { offset: 1.5 });
+  node("crt", "scanlines", 5, 3, { spacing: 3, thickness: 1, strength: 0.3, speed: 24 });
+  node("readout", "layer", 6, 3, { order: 2 }, "Readout");
+  wire("code", "readMerge", "in");
+  wire("title", "readMerge", "in");
+  wire("readMerge", "pixels", "in");
+  wire("pixels", "tear", "in");
+  wire("tear", "fringe", "in");
+  wire("fringe", "crt", "in");
+  wire("crt", "readout", "in");
+  node("out", "canvas", 7, 1, { width: 600, height: 600, bg: "#04070a", origin: "center" });
+  wire("dial", "out", "in");
+  wire("readout", "out", "in");
+  return Project.parse({
+    name: "glitch relay",
+    seed: "relay-07",
+    canvas: { w: 600, h: 600, bg: "#04070a", origin: "center" },
+    timeline: { fps: 30, duration: 2 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function warningStrip() {
+  const { nodes, edges, node, wire } = graph();
+  node("clock", "time", 0, 0);
+  node("crawl", "math", 1, 0, { op: "multiply", a: 0, b: 40 });
+  wire("clock", "crawl", "a");
+  node("hazard", "stripes", 1, 1, { x: 0, y: -60, w: 420, h: 28, stripe: 14, gap: 14, lean: 30, fill: "#ffb547" });
+  node("frame", "rect", 1, 2, { x: 0, y: -60, w: 420, h: 28, stroke: "#ffb547", strokeWidth: 1 });
+  node("chevrons", "stripes", 1, 3, { x: 0, y: 40, w: 420, h: 40, pattern: "chevron", stripe: 18, gap: 22, point: 90, fill: "#7fe8d0" });
+  node("fade", "stagger", 2, 3, { property: "opacity", from: 0.25, to: 1 });
+  wire("crawl", "hazard", "offset");
+  wire("crawl", "chevrons", "offset");
+  wire("chevrons", "fade", "in");
+  node("label", "text", 1, 4, { text: "CAUTION // LIVE FEED", x: -210, y: 110, fontSize: 12, fill: "#dbe7f0", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("all", "merge", 3, 2);
+  wire("hazard", "all", "in");
+  wire("frame", "all", "in");
+  wire("fade", "all", "in");
+  wire("label", "all", "in");
+  node("strip", "layer", 4, 2, { order: 1 }, "Strip");
+  wire("all", "strip", "in");
+  node("out", "canvas", 5, 2, { width: 600, height: 300, bg: "#04070a", origin: "center" });
+  wire("strip", "out", "in");
+  return Project.parse({
+    name: "warning strip",
+    seed: "caution-01",
+    canvas: { w: 600, h: 300, bg: "#04070a", origin: "center" },
+    timeline: { fps: 30, duration: 4 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function panelSplit() {
+  const { nodes, edges, node, wire } = graph();
+  node("frameA", "rect", 0, 0, { x: -220, y: -260, w: 440, h: 230, anchor: "corner", stroke: "#8fd4e8", strokeWidth: 1 });
+  node("header", "subdivide", 1, 0, { axis: "h", count: 2, ratio: 38 });
+  node("lower", "select", 2, 0, { mode: "range", from: 1, to: 1 });
+  node("columns", "subdivide", 3, 0, { axis: "v", count: 3, gap: 8 });
+  node("recipe", "merge", 4, 0);
+  wire("frameA", "header", "in");
+  wire("header", "lower", "in");
+  wire("lower", "columns", "in");
+  wire("lower", "recipe", "in", "rest");
+  wire("columns", "recipe", "in");
+  node("frameB", "rect", 0, 2, { x: -220, y: 30, w: 440, h: 230, anchor: "corner", stroke: "#e8f4ff", strokeWidth: 1 });
+  node("breath", "lfo", 0, 3, { rate: 0.25, amplitude: 12, center: 50 });
+  node("mosaic", "subdivide", 1, 2, { mode: "recursive", depth: 4, rule: "alternate", variation: 0.4, stop: 0.25, gap: 10, salt: 3 });
+  node("fade", "stagger", 2, 2, { property: "opacity", from: 0.3, to: 1 });
+  wire("frameB", "mosaic", "in");
+  wire("breath", "mosaic", "ratio");
+  wire("mosaic", "fade", "in");
+  node("all", "merge", 5, 1);
+  wire("recipe", "all", "in");
+  wire("fade", "all", "in");
+  wire("mosaic", "all", "in", "lines");
+  node("panels", "layer", 6, 1, { order: 1 }, "Panels");
+  wire("all", "panels", "in");
+  node("out", "canvas", 7, 1, { width: 600, height: 600, bg: "#04070a", origin: "center" });
+  wire("panels", "out", "in");
+  return Project.parse({
+    name: "panel split",
+    seed: "panels-01",
+    canvas: { w: 600, h: 600, bg: "#04070a", origin: "center" },
+    timeline: { fps: 30, duration: 4 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function subdividerStudy() {
+  const { nodes, edges, node, wire } = graph();
+  const ink = "#aab4bf";
+  const frame = (id, col, row, x, y, w, h) => node(id, "rect", col, row, { x, y, w, h, anchor: "corner", stroke: ink, strokeWidth: 1 });
+  frame("f1", 0, 0, 40, 40, 300, 160);
+  node("f1cut", "subdivide", 1, 0, { axis: "h", count: 2, ratio: 48 });
+  node("f1low", "select", 2, 0, { mode: "range", from: 1, to: 1 });
+  node("f1cols", "subdivide", 3, 0, { axis: "v", count: 3, ratios: "30 42 28" });
+  node("f1all", "merge", 4, 0);
+  wire("f1", "f1cut", "in");
+  wire("f1cut", "f1low", "in");
+  wire("f1low", "f1cols", "in");
+  wire("f1low", "f1all", "in", "rest");
+  wire("f1cols", "f1all", "in");
+  frame("f2", 0, 1, 400, 40, 300, 160);
+  node("f2cut", "subdivide", 1, 1, { axis: "h", count: 2, ratio: 70 });
+  node("f2low", "select", 2, 1, { mode: "range", from: 1, to: 1 });
+  node("f2cols", "subdivide", 3, 1, { axis: "v", count: 3, ratios: "30 40 30" });
+  node("f2all", "merge", 4, 1);
+  wire("f2", "f2cut", "in");
+  wire("f2cut", "f2low", "in");
+  wire("f2low", "f2cols", "in");
+  wire("f2low", "f2all", "in", "rest");
+  wire("f2cols", "f2all", "in");
+  frame("f3", 0, 2, 40, 240, 300, 160);
+  node("f3side", "subdivide", 1, 2, { axis: "v", count: 2, ratio: 19 });
+  node("f3foot", "subdivide", 2, 2, { axis: "h", count: 2, ratio: 71 });
+  wire("f3", "f3side", "in");
+  wire("f3side", "f3foot", "in");
+  frame("f4", 0, 3, 400, 240, 150, 160);
+  node("f4cut", "subdivide", 1, 3, { axis: "v", count: 2, ratio: 50 });
+  node("f4right", "select", 2, 3, { mode: "range", from: 1, to: 1 });
+  node("f4strip", "subdivide", 3, 3, { axis: "h", count: 2, ratio: 82 });
+  node("f4all", "merge", 4, 3);
+  wire("f4", "f4cut", "in");
+  wire("f4cut", "f4right", "in");
+  wire("f4right", "f4strip", "in");
+  wire("f4right", "f4all", "in", "rest");
+  wire("f4strip", "f4all", "in");
+  node("sheet", "merge", 5, 1);
+  wire("f1all", "sheet", "in");
+  wire("f2all", "sheet", "in");
+  wire("f3foot", "sheet", "in");
+  wire("f4all", "sheet", "in");
+  node("panels", "layer", 6, 1, { order: 1 }, "Panels");
+  wire("sheet", "panels", "in");
+  node("out", "canvas", 7, 1, { width: 740, height: 440, bg: "#21252b", origin: "top-left" });
+  wire("panels", "out", "in");
+  return Project.parse({
+    name: "subdivider study",
+    seed: "sheet-01",
+    canvas: { w: 740, h: 440, bg: "#21252b", origin: "top-left" },
+    timeline: { fps: 30, duration: 2 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function litPanels() {
+  const { nodes, edges, node, wire } = graph();
+  node("tokens", "style-tokens", 2, 2, {
+    wear: true,
+    ink: "#d8e6ee",
+    dim: "#4e6a7a",
+    faint: "#22323d",
+    accent: "#5fd3ff",
+    warn: "#ff7a45",
+    bg: "#05090d",
+    stroke: 1,
+    bold: 2,
+    mode: "random",
+    dealInk: true,
+    dealWarn: true,
+    skip: 0.55,
+    salt: 5
+  });
+  node("frame", "rect", 0, 2, { x: -260, y: -160, w: 520, h: 320, anchor: "corner", stroke: "#4e6a7a", strokeWidth: 1 });
+  node("mosaic", "subdivide", 1, 2, { mode: "recursive", depth: 5, rule: "alternate", variation: 0.45, stop: 0.3, gap: 6, minSize: 18, salt: 4 });
+  wire("frame", "mosaic", "in");
+  wire("mosaic", "tokens", "in");
+  node("rules", "style", 2, 3, { setStroke: true, setWidth: true, strokeWidth: 1 });
+  wire("mosaic", "rules", "in", "lines");
+  wire("tokens", "rules", "stroke", "faint");
+  node("fade", "stagger", 3, 2, { property: "opacity", from: 0.4, to: 1 });
+  wire("tokens", "fade", "in");
+  node("label", "text", 2, 4, { text: "SECTOR MAP // 04", x: -260, y: 190, fontSize: 12, fontFamily: "IBM Plex Mono", anchor: "start" });
+  wire("tokens", "label", "fill", "ink");
+  node("all", "merge", 4, 2);
+  wire("fade", "all", "in");
+  wire("rules", "all", "in");
+  wire("label", "all", "in");
+  node("board", "layer", 5, 2, { order: 1 }, "Board");
+  wire("all", "board", "in");
+  node("out", "canvas", 6, 2, { width: 640, height: 440, origin: "center" });
+  wire("tokens", "out", "bg", "bg");
+  wire("board", "out", "in");
+  return Project.parse({
+    name: "lit panels",
+    seed: "sector-04",
+    canvas: { w: 640, h: 440, bg: "#05090d", origin: "center" },
+    timeline: { fps: 30, duration: 3 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function kiosk() {
+  const { nodes, edges, node, wire } = graph();
+  node("tokens", "style-tokens", 2, 2, {
+    wear: true,
+    ink: "#f3ead3",
+    dim: "#1e2a5a",
+    faint: "#8a1e22",
+    accent: "#2eb1c4",
+    warn: "#f0a030",
+    bg: "#d7262c",
+    stroke: 1,
+    bold: 2,
+    mode: "cycle",
+    dealInk: true,
+    dealDim: true,
+    dealFaint: false,
+    dealAccent: true,
+    dealWarn: true
+  });
+  node("word", "text", 0, 2, { text: "kiosk", fontFamily: "Anton SC", fontSize: 190, x: 0, y: 70, anchor: "middle", fill: "#f3ead3", outlines: true, letterSpacing: -4 });
+  node("bands", "offset", 1, 2, { distance: 11, count: 6, join: "round", keepStyle: true });
+  wire("word", "bands", "in");
+  wire("bands", "tokens", "in");
+  node("all", "merge", 3, 2);
+  wire("tokens", "all", "in");
+  wire("bands", "all", "in", "source");
+  node("poster", "layer", 4, 2, { order: 1 }, "Poster");
+  wire("all", "poster", "in");
+  node("out", "canvas", 5, 2, { width: 640, height: 480, origin: "center" });
+  wire("tokens", "out", "bg", "bg");
+  wire("poster", "out", "in");
+  return Project.parse({
+    name: "kiosk",
+    seed: "kiosk-01",
+    canvas: { w: 640, h: 480, bg: "#d7262c", origin: "center" },
+    timeline: { fps: 30, duration: 2 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function ionDial() {
+  const { nodes, edges, node, wire } = graph();
+  node("tokens", "style-tokens", 0, 0, {
+    wear: true,
+    ink: "#e8dcc8",
+    dim: "#8a7a5c",
+    faint: "#453a24",
+    accent: "#ffb547",
+    warn: "#ff5b2e",
+    bg: "#0a0703",
+    stroke: 1,
+    bold: 2.5
+  });
+  node("ring", "tick-ring", 1, 1, {
+    cx: 0,
+    cy: 0,
+    radius: 215,
+    count: 72,
+    length: 7,
+    majorEvery: 6,
+    majorLength: 15,
+    majorWidth: 1.8,
+    align: "inward"
+  });
+  node("gauge", "circle", 1, 2, { cx: 0, cy: 0, r: 182, start: 220, sweep: 280 });
+  node("redline", "circle", 1, 3, { cx: 0, cy: 0, r: 182, start: 140, sweep: 28 });
+  node("labels", "radial-labels", 2, 1, {
+    cx: 0,
+    cy: 0,
+    radius: 154,
+    count: 8,
+    start: 220,
+    sweep: 280,
+    from: 0,
+    to: 700,
+    fontSize: 11
+  });
+  node("readout", "text", 2, 2, { text: "PWR // BUS A", x: 0, y: 72, fontSize: 13, anchor: "middle", fontFamily: "IBM Plex Mono" });
+  node("hub", "crosshair", 2, 3, { cx: 0, cy: 0, size: 24, gap: 8 });
+  node("merged", "merge", 3, 1);
+  node("main", "layer", 4, 1, {}, "Dial");
+  node("out", "canvas", 5, 1, { width: 600, height: 600, origin: "center" });
+  for (const id of ["ring", "gauge", "redline", "labels", "readout", "hub"]) wire(id, "merged", "in");
+  wire("merged", "main", "in");
+  wire("main", "out", "in");
+  wire("tokens", "ring", "stroke", "dim");
+  wire("tokens", "gauge", "stroke", "accent");
+  wire("tokens", "gauge", "strokeWidth", "bold");
+  wire("tokens", "redline", "stroke", "warn");
+  wire("tokens", "redline", "strokeWidth", "bold");
+  wire("tokens", "labels", "fill", "ink");
+  wire("tokens", "readout", "fill", "ink");
+  wire("tokens", "hub", "stroke", "faint");
+  wire("tokens", "out", "bg", "bg");
+  return Project.parse({
+    name: "ion dial",
+    seed: "ion-9",
+    canvas: { w: 600, h: 600, bg: "#0a0703", origin: "center" },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function radar() {
+  const { nodes, edges, node, wire } = graph();
+  node("scope", "polar-grid", 0, 1, {
+    cx: 0,
+    cy: 0,
+    radius: 224,
+    innerRadius: 28,
+    rings: 4,
+    spokes: 12,
+    subdivisions: 2,
+    stroke: "#2c3e4a",
+    strokeWidth: 1,
+    subOpacity: 0.4
+  });
+  node("hub", "crosshair", 0, 2, { cx: 0, cy: 0, size: 20, gap: 6, stroke: "#5d7285" });
+  node("edge", "line", 0, 3, { x1: 28, y1: 0, x2: 224, y2: 0, stroke: "#7fe8d0", strokeWidth: 1.6 });
+  node("trail", "circle", 0, 4, { cx: 0, cy: 0, r: 222, start: 64, sweep: 26, stroke: "#7fe8d0", strokeWidth: 2, opacity: 0.5 });
+  node("clock", "time", 1, 0);
+  node("rate", "math", 2, 0, { op: "multiply", a: 0, b: 120 });
+  node("sweepMerge", "merge", 1, 3);
+  node("spin", "transform", 2, 3, { pivot: "custom", pivotX: 0, pivotY: 0 });
+  node("blip", "circle", 1, 5, { cx: 0, cy: 0, r: 2.5, fill: "#7fe8d0", stroke: "none" });
+  node("field", "scatter", 2, 5, { mode: "disc", count: 14, x: 0, y: 0, radius: 205 });
+  node("scopeMerge", "merge", 1, 1);
+  node("contactMerge", "merge", 3, 3);
+  node("scopeLayer", "layer", 3, 1, { order: 1 }, "Scope");
+  node("sweepLayer", "layer", 4, 3, { order: 2 }, "Sweep");
+  node("out", "canvas", 5, 1, { width: 600, height: 600, bg: "#04070a", origin: "center" });
+  wire("clock", "rate", "a");
+  wire("rate", "spin", "rotation");
+  wire("edge", "sweepMerge", "in");
+  wire("trail", "sweepMerge", "in");
+  wire("sweepMerge", "spin", "in");
+  wire("blip", "field", "in");
+  wire("scope", "scopeMerge", "in");
+  wire("hub", "scopeMerge", "in");
+  wire("scopeMerge", "scopeLayer", "in");
+  wire("spin", "contactMerge", "in");
+  wire("field", "contactMerge", "in");
+  wire("contactMerge", "sweepLayer", "in");
+  wire("scopeLayer", "out", "in");
+  wire("sweepLayer", "out", "in");
+  return Project.parse({
+    name: "radar",
+    seed: "contact-4",
+    canvas: { w: 600, h: 600, bg: "#04070a", origin: "center" },
+    // 120°/s over 3s = one full turn: the loop seam is invisible.
+    timeline: { fps: 30, duration: 3 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function telemetry() {
+  const { nodes, edges, node, wire } = graph();
+  node("paper", "grid", 0, 1, {
+    x: 0,
+    y: 0,
+    w: 520,
+    h: 520,
+    cols: 6,
+    rows: 6,
+    subdivisions: 4,
+    stroke: "#22303c",
+    strokeWidth: 1,
+    subOpacity: 0.35
+  });
+  node("title", "text", 0, 2, { text: "TELEMETRY // LINK 02", x: -252, y: -232, fontSize: 13, fill: "#dbe7f0", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("code", "random-code", 0, 3, { count: 11, x: -252, y: -200, stepY: 15, fontSize: 10, fill: "#5d7285" });
+  node("breath", "lfo", 1, 0, { shape: "sine", rate: 0.33, amplitude: 0.35, center: 0.55 });
+  node("rx", "bar-meter", 2, 1, { x: 124, y: -197, count: 26, segW: 5, segH: 13, gap: 3, fillColor: "#7fe8d0", emptyColor: "#22303c" });
+  node("tx", "bar-meter", 2, 2, { x: 124, y: -169, count: 26, value: 0.3, segW: 5, segH: 13, gap: 3, fillColor: "#9fd4e8", emptyColor: "#22303c" });
+  node("rxLabel", "text", 1, 1, { text: "RX", x: -4, y: -193, fontSize: 10, fill: "#8a9aa8", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("txLabel", "text", 1, 2, { text: "TX", x: -4, y: -165, fontSize: 10, fill: "#8a9aa8", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("ruler", "tick-row", 0, 4, {
+    x: 0,
+    y: 236,
+    span: 504,
+    count: 43,
+    length: 6,
+    majorEvery: 6,
+    majorLength: 12,
+    majorWidth: 1.5,
+    stroke: "#5d7285"
+  });
+  node("merged", "merge", 3, 1);
+  node("main", "layer", 4, 1, {}, "Panel");
+  node("out", "canvas", 5, 1, { width: 600, height: 600, bg: "#04070a", origin: "center" });
+  wire("breath", "rx", "value");
+  for (const id of ["paper", "title", "code", "rx", "tx", "rxLabel", "txLabel", "ruler"]) wire(id, "merged", "in");
+  wire("merged", "main", "in");
+  wire("main", "out", "in");
+  return Project.parse({
+    name: "telemetry",
+    seed: "link-02",
+    canvas: { w: 600, h: 600, bg: "#04070a", origin: "center" },
+    timeline: { fps: 30, duration: 3 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function bootSequence() {
+  const { nodes, edges, node, wire } = graph();
+  node("boot", "trigger", 0, 0, {
+    value: { base: 1, track: { keyframes: [{ t: 0.2, value: 1, easing: "step" }] } }
+  });
+  node("frameSeq", "clip", 1, 0, {
+    keys: { base: 0, track: { keyframes: [
+      { t: 0, value: 0, easing: "ease-in-out" },
+      { t: 1.4, value: 1, easing: "ease-in-out" }
+    ] } },
+    duration: 1.4
+  });
+  node("textSeq", "clip", 2, 0, {
+    keys: { base: 0, track: { keyframes: [
+      { t: 0, value: 0, easing: "linear" },
+      { t: 0.5, value: 0, easing: "linear" },
+      { t: 2.2, value: 1, easing: "linear" }
+    ] } },
+    duration: 2.2
+  });
+  node("meterSeq", "clip", 3, 0, {
+    keys: { base: 0, track: { keyframes: [
+      { t: 0, value: 0, easing: "linear" },
+      { t: 0.9, value: 0, easing: "ease-in-out" },
+      { t: 2.4, value: 1, easing: "ease-in-out" }
+    ] } },
+    duration: 2.4
+  });
+  wire("boot", "frameSeq", "play");
+  wire("boot", "textSeq", "play");
+  wire("boot", "meterSeq", "play");
+  node("brackets", "corner-brackets", 0, 1, { x: 0, y: 0, w: 470, h: 470, armX: 34, armY: 34, stroke: "#7fe8d0", strokeWidth: 1.5 });
+  node("ring", "tick-ring", 0, 2, {
+    cx: 0,
+    cy: 0,
+    radius: 200,
+    count: 72,
+    length: 6,
+    majorEvery: 6,
+    majorLength: 13,
+    majorWidth: 1.5,
+    align: "inward",
+    stroke: "#5d7285"
+  });
+  node("hub", "crosshair", 0, 3, { cx: 0, cy: 0, size: 22, gap: 7, stroke: "#5d7285" });
+  node("frameMerge", "merge", 1, 2);
+  node("frameReveal", "reveal", 2, 2, { mode: "draw", stagger: 0.5 });
+  node("frameLayer", "layer", 4, 2, { order: 1 }, "Frame");
+  for (const id of ["brackets", "ring", "hub"]) wire(id, "frameMerge", "in");
+  wire("frameMerge", "frameReveal", "in");
+  wire("frameReveal", "frameLayer", "in");
+  wire("frameSeq", "frameReveal", "progress");
+  node("title", "text", 0, 4, { text: "BOOT SEQUENCE 09", x: -205, y: -205, fontSize: 14, letterSpacing: 2, fill: "#dbe7f0", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("sub", "text", 0, 5, { text: "CORE SYSTEMS // ONLINE", x: -205, y: -184, fontSize: 10, fill: "#8a9aa8", fontFamily: "IBM Plex Mono", anchor: "start" });
+  node("code", "random-code", 1, 4, { count: 8, x: -205, y: 128, stepY: 14, fontSize: 10, fill: "#9fd4e8" });
+  node("meter", "bar-meter", 1, 5, { x: 60, y: -210, count: 22, value: 0.72, segW: 5, segH: 12, gap: 3, fillColor: "#7fe8d0", emptyColor: "#22303c" });
+  node("codeReveal", "reveal", 2, 4, { mode: "wipe", angle: 90, stagger: 0.75 });
+  node("meterReveal", "reveal", 2, 5, { mode: "wipe", angle: 0, stagger: 0.85 });
+  node("readMerge", "merge", 3, 4);
+  node("readLayer", "layer", 4, 4, { order: 2 }, "Readout");
+  wire("textSeq", "title", "reveal");
+  wire("textSeq", "sub", "reveal");
+  wire("code", "codeReveal", "in");
+  wire("meter", "meterReveal", "in");
+  wire("meterSeq", "codeReveal", "progress");
+  wire("meterSeq", "meterReveal", "progress");
+  for (const id of ["title", "sub", "codeReveal", "meterReveal"]) wire(id, "readMerge", "in");
+  wire("readMerge", "readLayer", "in");
+  node("out", "canvas", 5, 3, { width: 600, height: 600, bg: "#04070a", origin: "center" });
+  wire("frameLayer", "out", "in");
+  wire("readLayer", "out", "in");
+  return Project.parse({
+    name: "boot sequence",
+    seed: "boot-09",
+    canvas: { w: 600, h: 600, bg: "#04070a", origin: "center" },
+    // The boot takes ~2.6s; the rest of the loop is the finished HUD holding.
+    timeline: { fps: 30, duration: 4 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function speedDial() {
+  const { nodes, edges, node, wire } = graph();
+  node("level", "value", 0, 0, { value: 25 });
+  node("levelNext", "math", 1, 0, { op: "add", a: 0, b: 1 });
+  node("outerTicks", "tick-ring", 0, 1, { align: "inward", count: 120, cx: 400, cy: 400, length: 5, majorEvery: 10, majorLength: 11, majorWidth: 1.4, radius: 306, stroke: "#5d7285", strokeWidth: 0.9 });
+  node("outerLabels", "radial-labels", 0, 2, { from: 0, to: 8, anchor: "middle", count: 9, cx: 400, cy: 400, fill: "#dbe7f0", fontSize: 13, radius: 274, start: 220, sweep: 280 });
+  node("outerRing", "circle", 0, 3, { cx: 400, cy: 400, r: 330, stroke: "#9fd4e8", strokeWidth: 1.2, sweep: 360 });
+  node("outerArcs", "partial-outline", 1, 1, { from: 0.02, to: 0.46, offset: 0.13, segments: 2 });
+  node("redRing", "circle", 0, 4, { cx: 400, cy: 400, r: 306, stroke: "#ff5b2e", strokeWidth: 2.4 });
+  node("redArc", "partial-outline", 1, 2, { from: 0, to: 0.115, offset: 0.055, segments: 1 });
+  node("redTick", "tick-ring", 0, 5, { align: "outward", count: 1, cx: 400, cy: 400, length: 22, majorEvery: 0, radius: 296, start: 20, stroke: "#ff5b2e", strokeWidth: 2.4, sweep: 0 });
+  node("innerRing", "circle", 0, 6, { cx: 400, cy: 400, r: 232, stroke: "#ffffff", strokeWidth: 3.2 });
+  node("midRing", "circle", 0, 7, { cx: 400, cy: 400, r: 248, stroke: "#33424f", strokeWidth: 1 });
+  node("gaugeBar", "rect", 0, 8, { w: 22, h: 3.6, x: -11, y: -1.8, fill: "#5d7285", rx: 0, stroke: "none" });
+  node("gaugeRing", "array-radial", 1, 3, { count: 44, cx: 400, cy: 400, mode: "orbit", radius: 202, start: 208, sweep: 304 });
+  node("gaugeLit", "select", 2, 1, { from: 0, to: 25, mode: "range" });
+  node("gaugeLitStyle", "style", 3, 1, { fill: "#dbe7f0", setFill: true, setStroke: false });
+  node("gaugeMid", "select", 2, 2, { from: 26, to: 37, mode: "range" });
+  node("gaugeMidStyle", "style", 3, 2, { fill: "#5d7285", setFill: true, setStroke: false });
+  node("gaugeHot", "select", 2, 3, { from: 38, to: 43, mode: "range" });
+  node("gaugeHotStyle", "style", 3, 3, { fill: "#ff5b2e", setFill: true, setStroke: false });
+  node("innerTicks", "tick-ring", 0, 9, { align: "inward", count: 60, cx: 400, cy: 400, length: 4, majorEvery: 5, majorLength: 8, radius: 178, start: 210, stroke: "#33424f", strokeWidth: 0.8, sweep: 300 });
+  node("centreFrame", "corner-brackets", 0, 10, { w: 300, h: 184, x: 250, y: 308, armX: 34, armY: 26, stroke: "#5d7285", strokeWidth: 1 });
+  node("hairline", "line", 0, 11, { stroke: "#33424f", strokeWidth: 1, x1: 268, x2: 532, y1: 414, y2: 414 });
+  node("marker", "polygon", 0, 12, { cx: 400, cy: 550, radius: 13, rotation: 90, sides: 3, stroke: "#5d7285", strokeWidth: 1.4 });
+  node("speed", "text", 0, 13, { x: 400, y: 378, anchor: "middle", fill: "#ffffff", fontFamily: "Rajdhani", fontSize: 96, letterSpacing: 6, text: "64", fontWeight: 600 });
+  node("unit", "text", 0, 14, { x: 400, y: 402, anchor: "middle", fill: "#5d7285", fontFamily: "IBM Plex Mono", fontSize: 15, letterSpacing: 4, text: "MPH" });
+  node("gear", "text", 0, 15, { x: 400, y: 492, anchor: "middle", fill: "#ffffff", fontFamily: "Rajdhani", fontSize: 62, text: "3", fontWeight: 600 });
+  node("corners", "text", 0, 16, { x: 272, y: 338, anchor: "middle", fill: "#dbe7f0", fontFamily: "IBM Plex Mono", fontSize: 13, text: "F" });
+  node("cornersH", "text", 0, 17, { x: 528, y: 338, anchor: "middle", fill: "#ff5b2e", fontFamily: "IBM Plex Mono", fontSize: 13, text: "H" });
+  node("cornersE", "text", 0, 18, { x: 272, y: 474, anchor: "middle", fill: "#ff5b2e", fontFamily: "IBM Plex Mono", fontSize: 13, text: "E" });
+  node("cornersC", "text", 0, 19, { x: 528, y: 474, anchor: "middle", fill: "#dbe7f0", fontFamily: "IBM Plex Mono", fontSize: 13, text: "C" });
+  node("codes", "random-code", 0, 20, { x: 96, y: 690, count: 3, fill: "#33424f", fontSize: 11, letterSpacing: 1, pattern: "AA#-####", stepY: 17 });
+  node("bgLayerMerge", "merge", 1, 4);
+  node("bgLayer", "layer", 2, 4, { order: 1 }, "bgLayer");
+  node("gaugeLayerMerge", "merge", 4, 1);
+  node("gaugeLayer", "layer", 5, 1, { order: 2 }, "gaugeLayer");
+  node("ringLayerMerge", "merge", 2, 5);
+  node("ringLayer", "layer", 3, 4, { order: 3 }, "ringLayer");
+  node("textLayerMerge", "merge", 1, 5);
+  node("textLayer", "layer", 2, 6, { order: 4 }, "textLayer");
+  node("out", "canvas", 6, 1, { bg: "#04070a", width: 800, height: 800, origin: "top-left" });
+  wire("outerRing", "outerArcs", "in");
+  wire("redRing", "redArc", "in");
+  wire("gaugeBar", "gaugeRing", "in");
+  wire("gaugeRing", "gaugeLit", "in");
+  wire("gaugeLit", "gaugeLitStyle", "in");
+  wire("gaugeRing", "gaugeMid", "in");
+  wire("gaugeMid", "gaugeMidStyle", "in");
+  wire("gaugeRing", "gaugeHot", "in");
+  wire("gaugeHot", "gaugeHotStyle", "in");
+  wire("outerTicks", "bgLayerMerge", "in");
+  wire("outerLabels", "bgLayerMerge", "in");
+  wire("innerTicks", "bgLayerMerge", "in");
+  wire("midRing", "bgLayerMerge", "in");
+  wire("bgLayerMerge", "bgLayer", "in");
+  wire("gaugeLitStyle", "gaugeLayerMerge", "in");
+  wire("gaugeMidStyle", "gaugeLayerMerge", "in");
+  wire("gaugeHotStyle", "gaugeLayerMerge", "in");
+  wire("gaugeLayerMerge", "gaugeLayer", "in");
+  wire("outerArcs", "ringLayerMerge", "in");
+  wire("redArc", "ringLayerMerge", "in");
+  wire("redTick", "ringLayerMerge", "in");
+  wire("innerRing", "ringLayerMerge", "in");
+  wire("ringLayerMerge", "ringLayer", "in");
+  wire("centreFrame", "textLayerMerge", "in");
+  wire("hairline", "textLayerMerge", "in");
+  wire("speed", "textLayerMerge", "in");
+  wire("unit", "textLayerMerge", "in");
+  wire("gear", "textLayerMerge", "in");
+  wire("corners", "textLayerMerge", "in");
+  wire("cornersH", "textLayerMerge", "in");
+  wire("cornersE", "textLayerMerge", "in");
+  wire("cornersC", "textLayerMerge", "in");
+  wire("codes", "textLayerMerge", "in");
+  wire("marker", "textLayerMerge", "in");
+  wire("textLayerMerge", "textLayer", "in");
+  wire("bgLayer", "out", "in");
+  wire("gaugeLayer", "out", "in");
+  wire("ringLayer", "out", "in");
+  wire("textLayer", "out", "in");
+  wire("level", "gaugeLit", "to");
+  wire("level", "levelNext", "a");
+  wire("levelNext", "gaugeMid", "from");
+  return Project.parse({
+    name: "speed dial",
+    seed: "gmunk",
+    canvas: { w: 800, h: 800, bg: "#04070a", origin: "top-left" },
+    timeline: { fps: 30, duration: 4, loop: true },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function cornersStudy() {
+  const { nodes, edges, node, wire } = graph();
+  node("panel", "rect", 0, 0, { w: 300, h: 180, x: 60, y: 80, anchor: "corner", fill: "none", stroke: "#7fe8d0", strokeWidth: 1.5 }, "Panel");
+  node("tab", "rect", 0, 1, { w: 120, h: 70, x: 260, y: 60, anchor: "corner", fill: "none", stroke: "#7fe8d0", strokeWidth: 1.5 }, "Tab cutout");
+  node("panelCut", "boolean", 1, 0, { op: "subtract" });
+  node("panelIn", "corners", 2, 0, { size: 12, style: "round", which: "concave" }, "Inner: round 12");
+  node("panelOut", "corners", 3, 0, { size: 16, style: "chamfer", which: "convex" }, "Outer: chamfer 16");
+  node("panelGhost", "style", 2, 1, { opacity: 0.6, setOpacity: true, setStroke: true, setWidth: true, stroke: "#3a5a55", strokeWidth: 1 }, "Raw cut (ghost, in place)");
+  node("L", "svg", 0, 2, { x: 540, y: 170, fill: "none", size: 180, stroke: "#7fe8d0", strokeWidth: 1.5, svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><path d="M0 0H160V60H60V160H0Z"/></svg>' }, "L profile");
+  node("Lin", "corners", 1, 2, { size: 10, style: "round", which: "concave" }, "Inner: round 10");
+  node("Lout", "corners", 2, 2, { size: 26, style: "round", which: "convex" }, "Outer: round 26");
+  node("starA", "svg", 0, 3, { x: 820, y: 170, fill: "none", size: 180, stroke: "#7fe8d0", strokeWidth: 1.5, svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100.00 10.00L122.34 69.26L185.60 72.19L136.14 111.74L152.90 172.81L100.00 138.00L47.10 172.81L63.86 111.74L14.40 72.19L77.66 69.26Z"/></svg>' }, "Star");
+  node("starValleys", "corners", 1, 3, { size: 9, style: "round", which: "concave" }, "Valleys: round 9");
+  node("starB", "svg", 0, 4, { x: 1040, y: 170, fill: "none", size: 180, stroke: "#7fe8d0", strokeWidth: 1.5, svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100.00 10.00L122.34 69.26L185.60 72.19L136.14 111.74L152.90 172.81L100.00 138.00L47.10 172.81L63.86 111.74L14.40 72.19L77.66 69.26Z"/></svg>' }, "Star");
+  node("starTips", "corners", 1, 4, { size: 9, style: "round", which: "convex" }, "Tips: round 9");
+  node("bar", "rect", 0, 5, { w: 26, h: 90, x: 80, y: 380, anchor: "corner", fill: "none", stroke: "#7fe8d0", strokeWidth: 1.5 }, "Bar");
+  node("bars", "array-linear", 1, 5, { count: 8, origin: "start", stepX: 40, stepY: 0 });
+  node("base", "rect", 0, 6, { w: 306, h: 40, x: 80, y: 450, anchor: "corner", fill: "none", stroke: "#7fe8d0", strokeWidth: 1.5 }, "Base");
+  node("comb", "boolean", 2, 4, { op: "union" });
+  node("combIn", "corners", 3, 4, { size: 6, style: "chamfer", which: "concave" }, "Gaps: chamfer 6");
+  node("comb2", "boolean", 2, 5, { op: "union" });
+  node("shift2", "transform", 3, 5, { tx: 420, ty: 0 });
+  node("combNotch", "corners", 4, 6, { size: 6, style: "notch", which: "concave" }, "Gaps: notch 6");
+  node("t1", "text", 4, 0, { x: 60, y: 62, anchor: "start", fill: "#7fe8d0", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "NOTCHED PANEL \xB7 in round 12 / out chamfer 16" });
+  node("main", "layer", 5, 2, {}, "Corners");
+  node("out", "canvas", 6, 2, { bg: "#05070a", width: 1200, height: 700, origin: "top-left" });
+  node("t2", "text", 4, 2, { x: 450, y: 62, anchor: "start", fill: "#7fe8d0", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "L PROFILE \xB7 in round 10 / out round 26" });
+  node("t3", "text", 4, 3, { x: 730, y: 62, anchor: "start", fill: "#7fe8d0", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "STAR \xB7 valleys rounded" });
+  node("t3b", "text", 4, 4, { x: 960, y: 62, anchor: "start", fill: "#7fe8d0", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "STAR \xB7 tips rounded" });
+  node("t4", "text", 4, 5, { x: 80, y: 360, anchor: "start", fill: "#7fe8d0", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "COMB \xB7 concave chamfer 6" });
+  node("t4b", "text", 4, 7, { x: 500, y: 360, anchor: "start", fill: "#7fe8d0", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "COMB \xB7 concave notch 6" });
+  node("t1b", "text", 4, 1, { x: 60, y: 285, anchor: "start", fill: "#3a5a55", fontSize: 11, letterSpacing: 1.5, stroke: "none", text: "dim outline: the raw Boolean cut, before Corners" });
+  wire("panel", "panelCut", "in");
+  wire("tab", "panelCut", "with");
+  wire("panelCut", "panelIn", "in");
+  wire("panelIn", "panelOut", "in");
+  wire("panelCut", "panelGhost", "in");
+  wire("L", "Lin", "in");
+  wire("Lin", "Lout", "in");
+  wire("starA", "starValleys", "in");
+  wire("starB", "starTips", "in");
+  wire("bar", "bars", "in");
+  wire("bars", "comb", "in");
+  wire("base", "comb", "with");
+  wire("comb", "combIn", "in");
+  wire("bars", "comb2", "in");
+  wire("base", "comb2", "with");
+  wire("comb2", "shift2", "in");
+  wire("shift2", "combNotch", "in");
+  wire("panelOut", "main", "in");
+  wire("panelGhost", "main", "in");
+  wire("Lout", "main", "in");
+  wire("starValleys", "main", "in");
+  wire("starTips", "main", "in");
+  wire("combIn", "main", "in");
+  wire("combNotch", "main", "in");
+  wire("t1", "main", "in");
+  wire("main", "out", "in");
+  wire("t2", "main", "in");
+  wire("t3", "main", "in");
+  wire("t3b", "main", "in");
+  wire("t4", "main", "in");
+  wire("t4b", "main", "in");
+  wire("t1b", "main", "in");
+  return Project.parse({
+    name: "corners study",
+    seed: "corners",
+    canvas: { w: 1200, h: 700, bg: "#05070a", origin: "top-left" },
+    timeline: { fps: 30, duration: 4, loop: false },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function varyRow() {
+  const { nodes, edges, node, wire } = graph();
+  const teal = "#7fe8d0";
+  const dim = "#3a5a55";
+  const bar = (y, w = 3, fill = teal) => ({ w, h: 80, x: 60, y, anchor: "corner", fill, stroke: "none" });
+  const row = { count: 60, origin: "start", stepX: 18, stepY: 0 };
+  const label = (y, text, fill = teal) => ({ x: 60, y, anchor: "start", fill, fontSize: 11, letterSpacing: 1.5, stroke: "none", text });
+  node("bar1", "rect", 0, 0, bar(70), "Bar 3\xD780");
+  node("row1", "array-linear", 1, 0, row);
+  node("jit1", "jitter", 2, 0, { position: 0, scale: 0.7, scaleAxis: "x" }, "Jitter \xB7 Scale Axis X");
+  node("t1", "text", 3, 0, label(58, "JITTER \xB7 Scale 0.7, Scale Axis X only \u2014 widths scatter, heights hold"));
+  wire("bar1", "row1", "in");
+  wire("row1", "jit1", "in");
+  node("bar2", "rect", 0, 1, bar(195), "Bar 3\xD780");
+  node("row2", "array-linear", 1, 1, row);
+  node("tf2", "transform", 2, 1, { sx: { base: 1, jitter: { amount: 0.6, apply: "mul", mode: "frozen" } } }, "Transform \xB7 Scale X jittered");
+  node("t2", "text", 3, 1, label(183, "TRANSFORM \xB7 right-click Scale X, Add jitter, \xD70.6 \u2014 works on any param of any node after the array"));
+  wire("bar2", "row2", "in");
+  wire("row2", "tf2", "in");
+  node("bar3", "rect", 0, 2, bar(320), "Bar 3\xD780");
+  node("row3", "array-linear", 1, 2, row);
+  node("st3", "stagger", 2, 2, { property: "scale", axis: "x", from: 0.4, to: { base: 2.6, jitter: { amount: 1, mode: "frozen" } } }, "Stagger \xB7 Scale X, To jittered");
+  node("t3", "text", 3, 2, label(308, "STAGGER \xB7 Scale X ramp 0.4 to 2.6, with a jitter on To \u2014 ramp plus noise, louder along the row"));
+  wire("bar3", "row3", "in");
+  wire("row3", "st3", "in");
+  node("bar4a", "rect", 0, 3, bar(445, 2), "Bar 2\xD780");
+  node("bar4b", "rect", 0, 4, bar(445, 5), "Bar 5\xD780");
+  node("bar4c", "rect", 0, 5, bar(445, 10), "Bar 10\xD780");
+  node("mg4", "merge", 1, 4);
+  node("row4", "array-linear", 2, 4, { ...row, deal: true }, "Array Linear \xB7 Deal");
+  node("t4", "text", 3, 4, label(433, "DEAL \xB7 three bars 2 / 5 / 10 merged, Array Linear with Deal on \u2014 cycles them, no randomness"));
+  wire("bar4a", "mg4", "in");
+  wire("bar4b", "mg4", "in");
+  wire("bar4c", "mg4", "in");
+  wire("mg4", "row4", "in");
+  node("bar5", "rect", 0, 6, { ...bar(570, 3, dim), w: { base: 3, jitter: { amount: 0.6, apply: "mul", mode: "frozen" } } }, "Bar \xB7 Width jittered");
+  node("row5", "array-linear", 1, 6, row);
+  node("t5", "text", 3, 6, label(558, "RECT WIDTH JITTERED, THEN ARRAYED \xB7 one shape, one roll: sixty identical bars. Vary after the array, not before.", dim));
+  wire("bar5", "row5", "in");
+  node("main", "layer", 4, 3, {}, "Rows");
+  node("out", "canvas", 5, 3, { bg: "#05070a", width: 1200, height: 700, origin: "top-left" });
+  for (const id of ["jit1", "tf2", "st3", "row4", "row5", "t1", "t2", "t3", "t4", "t5"]) wire(id, "main", "in");
+  wire("main", "out", "in");
+  return Project.parse({
+    name: "vary a row",
+    seed: "vary",
+    canvas: { w: 1200, h: 700, bg: "#05070a", origin: "top-left" },
+    timeline: { fps: 30, duration: 4, loop: false },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function variableFontStudy() {
+  const { nodes, edges, node, wire } = graph();
+  const face = { fontFamily: "Orbitron", fontSize: 64, anchor: "start", fill: "#dbe7f0" };
+  const caption = { fontFamily: "IBM Plex Mono", fontSize: 11, anchor: "start", fill: "#5d7285", letterSpacing: 0.5 };
+  const X = 48;
+  node("breath", "lfo", 0, 0, { shape: "sine", rate: 0.5, center: 650, amplitude: 250 });
+  node("breathe", "text", 1, 0, { ...face, text: "BREATHE", x: X, y: 96, fontWeight: "650" });
+  node("breatheCap", "text", 1, 1, { ...caption, text: "LFO \u2192 WEIGHT \xB7 SINE 0.5 HZ, CENTRE 650, AMPLITUDE 250", x: X, y: 124 });
+  wire("breath", "breathe", "fontWeight");
+  node("clock", "time", 0, 2);
+  node("rise", "ramp", 1, 2, { inMin: 0, inMax: 2.5, outMin: 400, outMax: 900, clamp: true, ease: "smooth" });
+  node("rising", "text", 2, 2, { ...face, text: "MATERIALISE", x: X, y: 218, fontWeight: "400" });
+  node("risingCap", "text", 2, 3, { ...caption, text: "TIME \u2192 RAMP \u2192 WEIGHT \xB7 400 AT 0 S, 900 BY 2.5 S, EASED", x: X, y: 246 });
+  wire("clock", "rise", "value");
+  wire("rise", "rising", "fontWeight");
+  node("wave", "text", 0, 4, { ...face, text: "WAVEFORM", x: X, y: 340, fontWeight: "650", letterSpacing: 6 });
+  node("waveGlyphs", "split-glyphs", 1, 4);
+  node("waveClock", "time", 1, 5);
+  node("wavePhase", "math", 2, 5, { op: "multiply", a: 0, b: 0.5 });
+  node("waveStagger", "stagger", 2, 4, { property: "weight", from: 400, to: 900, curve: "wave", cycles: 1 });
+  node("waveCap", "text", 3, 5, { ...caption, text: "SPLIT GLYPHS \u2192 STAGGER \xB7 FONT WEIGHT 400\u2013900, CURVE WAVE, 1 CYCLE \xB7 TIME \xD7 0.5 \u2192 PHASE", x: X, y: 368 });
+  wire("wave", "waveGlyphs", "in");
+  wire("waveGlyphs", "waveStagger", "in");
+  wire("waveClock", "wavePhase", "a");
+  wire("wavePhase", "waveStagger", "phase");
+  node("scan", "text", 0, 6, { ...face, text: "SCANLINE", x: X, y: 462, fontWeight: "400", letterSpacing: 6 });
+  node("scanGlyphs", "split-glyphs", 1, 6);
+  node("scanSweep", "lfo", 1, 7, { shape: "saw", rate: 0.5, unipolar: true, center: -0.2, amplitude: 1.4 });
+  node("scanStagger", "stagger", 2, 6, { property: "weight", from: 400, to: 900, curve: "peak", width: 0.25 });
+  node("scanCap", "text", 3, 7, { ...caption, text: "SPLIT GLYPHS \u2192 STAGGER \xB7 FONT WEIGHT 400\u2013900, CURVE PEAK, WIDTH 0.25 \xB7 SAW LFO \u22120.2\u20261.2 \u2192 POSITION", x: X, y: 490 });
+  wire("scan", "scanGlyphs", "in");
+  wire("scanGlyphs", "scanStagger", "in");
+  wire("scanSweep", "scanStagger", "position");
+  node("boil", "text", 0, 8, { ...face, text: "DECODE 0x7F3A", x: X, y: 584, fontWeight: "650", letterSpacing: 6 });
+  node("boilGlyphs", "split-glyphs", 1, 8);
+  node("boilStyle", "style", 2, 8, {
+    setWeight: true,
+    weight: { base: 650, jitter: { amount: 250, apply: "add", distribution: "uniform", mode: "animated", noiseFreq: 3 } }
+  });
+  node("boilCap", "text", 2, 9, { ...caption, text: "SPLIT GLYPHS \u2192 STYLE \xB7 SET WEIGHT 650, RIGHT-CLICK JITTER \xB1250, ANIMATED, 3 HZ", x: X, y: 612 });
+  wire("boil", "boilGlyphs", "in");
+  wire("boilGlyphs", "boilStyle", "in");
+  node("squash", "lfo", 0, 10, { shape: "triangle", rate: 0.25, center: 87.5, amplitude: 12.5 });
+  node("squeeze", "text", 1, 10, { ...face, fontFamily: "Tektur", text: "SQUEEZE TO FIT", x: X, y: 706, fontWeight: "600" });
+  node("squeezeCap", "text", 1, 11, { ...caption, text: "TEKTUR \xB7 LFO \u2192 STRETCH \xB7 TRIANGLE 0.25 HZ, 75\u2013100 % \xB7 WEIGHT HOLDS AT 600", x: X, y: 734 });
+  wire("squash", "squeeze", "fontStretch");
+  node("title", "text", 3, 0, { ...caption, text: "VARIABLE FONT STUDY \xB7 ORBITRON 400\u2013900 \xB7 TEKTUR 400\u2013900 \xD7 75\u2013100 % \xB7 ONE FILE, ANY WEIGHT", x: X, y: 36, fill: "#7fe8d0" });
+  node("sheet", "merge", 3, 4);
+  node("sheetLayer", "layer", 4, 4, { order: 1 }, "Study");
+  for (const id of ["title", "breathe", "breatheCap", "rising", "risingCap", "waveStagger", "waveCap", "scanStagger", "scanCap", "boilStyle", "boilCap", "squeeze", "squeezeCap"]) {
+    wire(id, "sheet", "in");
+  }
+  wire("sheet", "sheetLayer", "in");
+  node("out", "canvas", 5, 4, { width: 960, height: 760, bg: "#05070a", origin: "top-left" });
+  wire("sheetLayer", "out", "in");
+  return Project.parse({
+    name: "variable font study",
+    seed: "wght",
+    canvas: { w: 960, h: 760, bg: "#05070a", origin: "top-left" },
+    // Every driver repeats in 2 s or 4 s, so the loop closes on itself.
+    timeline: { fps: 30, duration: 4 },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function depthStack() {
+  const { nodes, edges, node, wire } = graph();
+  const teal = "#7fe8d0";
+  node("frame", "rect", 0, 0, { x: 0, y: 0, w: 380, h: 220, rx: 8, stroke: teal, strokeWidth: 1.5, fill: "#0b161c" }, "Panel");
+  node("cross", "crosshair", 0, 1, { cx: -120, cy: 0, size: 40, gap: 8, stroke: teal, strokeWidth: 1 });
+  node("label", "text", 0, 2, { text: "SECTOR 7 \xB7 ONLINE", x: 40, y: 0, vAnchor: "middle", anchor: "middle", fontSize: 18, letterSpacing: 2, fill: teal, stroke: "none" });
+  node("panel", "merge", 1, 1, { group: true }, "Merge \xB7 Group");
+  node("copies", "array-linear", 2, 1, { count: 5, stepX: 0, stepY: 0 }, "Array \xB7 in place");
+  node("stack", "transform3d", 3, 1, {
+    plane: "shape",
+    order: "depth",
+    // A wide fan: the slide must outrun the shrink, or the far panels
+    // land behind the near one's fill.
+    posX: { base: -380, stagger: { amount: 1100 } },
+    posY: { base: 200, stagger: { amount: -700 } },
+    posZ: { base: 0, stagger: { amount: 2200 } },
+    rotY: -18
+  }, "Transform 3D \xB7 one per shape, Stagger on Z");
+  node("main", "layer", 4, 1, {}, "Stack");
+  node("out", "canvas", 5, 1, { bg: "#05070a", width: 1200, height: 700, origin: "center", perspective: 900 });
+  wire("frame", "panel", "in");
+  wire("cross", "panel", "in");
+  wire("label", "panel", "in");
+  wire("panel", "copies", "in");
+  wire("copies", "stack", "in");
+  wire("stack", "main", "in");
+  wire("main", "out", "in");
+  return Project.parse({
+    name: "depth stack",
+    seed: "stack",
+    canvas: { w: 1200, h: 700, bg: "#05070a", origin: "center" },
+    timeline: { fps: 30, duration: 4, loop: false },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+function cardCarousel() {
+  const { nodes, edges, node, wire } = graph();
+  const teal = "#7fe8d0";
+  const dim = "#3a5a55";
+  node("card", "rect", 0, 0, { x: 0, y: 0, w: 160, h: 230, rx: 10, stroke: teal, strokeWidth: 1.5, fill: "#0b161c" }, "Card");
+  node("face", "rect", 0, 1, { x: 0, y: -40, w: 120, h: 110, rx: 4, stroke: dim, strokeWidth: 1, fill: "none" });
+  node("bar", "rect", 0, 2, { x: 0, y: 70, w: 120, h: 10, stroke: "none", fill: teal });
+  node("one", "merge", 1, 1, { group: true }, "Merge \xB7 Group");
+  node("eight", "array-linear", 2, 1, { count: 8, stepX: 0, stepY: 0 }, "Array \xB7 in place");
+  node("clock", "time", 2, 0);
+  node("spin", "math", 3, 0, { op: "multiply", a: 0, b: 30 }, "degrees per second");
+  node("drum", "transform3d", 3, 1, {
+    plane: "shape",
+    order: "depth",
+    hideBack: true,
+    pivot: "shape",
+    rotY: { base: 0, expr: "v + i / n * 360" },
+    posX: { base: 0, expr: "sin(rad(v + i / n * 360)) * 340" },
+    posZ: { base: 0, expr: "(1 - cos(rad(v + i / n * 360))) * 340 + 200" }
+  }, "Transform 3D \xB7 one per shape, on the rim");
+  node("main", "layer", 4, 1, {}, "Carousel");
+  node("out", "canvas", 5, 1, { bg: "#05070a", width: 1200, height: 700, origin: "center", perspective: 1100 });
+  wire("card", "one", "in");
+  wire("face", "one", "in");
+  wire("bar", "one", "in");
+  wire("one", "eight", "in");
+  wire("eight", "drum", "in");
+  wire("clock", "spin", "a");
+  wire("spin", "drum", "rotY");
+  wire("drum", "main", "in");
+  wire("main", "out", "in");
+  return Project.parse({
+    name: "card carousel",
+    seed: "drum",
+    canvas: { w: 1200, h: 700, bg: "#05070a", origin: "center" },
+    timeline: { fps: 30, duration: 12, loop: true },
+    graph: assignLayers({ nodes, edges })
+  });
+}
+var PRESETS = [
+  { name: "boot-sequence", label: "Boot Sequence", description: "The power-on: a Trigger starts three Seqs \u2014 the frame draws itself, the title scrambles in, meters wipe across.", build: bootSequence },
+  { name: "glitch-relay", label: "Glitch Relay", description: "The post chain: a spinning dial, its readout rasterized and torn.", build: glitchRelay },
+  { name: "warning-strip", label: "Warning Strip", description: "Stripes: a crawling hazard bar and streaming chevrons, Time wired into Offset.", build: warningStrip },
+  { name: "panel-split", label: "Panel Split", description: "Subdivide: a header-over-three-cells recipe via Select, and a seeded mosaic breathing on an LFO.", build: panelSplit },
+  { name: "subdivider-study", label: "Subdivider Study", description: "Four panel layouts from the reference sheet, each one Subdivide \u2192 Select \u2192 Subdivide \u2192 Merge, Split mode only.", build: subdividerStudy },
+  { name: "lit-panels", label: "Lit Panels", description: "Style Tokens painting a Subdivide: a seeded mosaic dealt the palette, most cells left hollow. Switch the Preset, the board redeals.", build: litPanels },
+  { name: "kiosk", label: "Kiosk", description: "Offset in six bands around a traced word, painted by Style Tokens in Cycle mode \u2014 the retro multi-stroke poster.", build: kiosk },
+  { name: "ion-dial", label: "Ion Dial", description: "Style Tokens driving every stroke \u2014 recolour the palette, the HUD and the UI follow.", build: ionDial },
+  { name: "radar", label: "Radar", description: "Polar grid, a Time-driven sweep, seeded contacts. Loops in 3s.", build: radar },
+  { name: "telemetry", label: "Telemetry", description: "Grid paper, code column, an LFO breathing through a bar meter.", build: telemetry },
+  { name: "speed-dial", label: "Speed Dial", description: "The Oblivion instrument: tick rings, partial arcs, a three-band gauge one Value fills, a bracketed readout.", build: speedDial },
+  { name: "vary-row", label: "Vary a Row", description: "Five ways to give a row of equal bars different widths: Jitter with Scale Axis X, a right-click jitter on Transform Scale X, a Stagger ramp plus noise, Deal cycling three bars \u2014 and why jittering the Rect itself gives sixty identical copies.", build: varyRow },
+  { name: "corners-study", label: "Corners Study", description: "Concave vs convex: a notched panel, an L profile, two stars and a comb, each finished by the Corners node.", build: cornersStudy },
+  { name: "depth-stack", label: "Depth Stack", description: "Panels receding into depth: one panel arrayed in place, Transform 3D with a plane per shape and a Stagger on Pos. Z \u2014 the move an array\u2019s Step cannot make \u2014 drawn nearest-on-top.", build: depthStack },
+  { name: "card-carousel", label: "Card Carousel", description: "Eight cards on a spinning drum: Transform 3D with a plane per shape, Pos. X and Z from sin and cos of each card\u2019s share of the circle, Time into Rot. Y, Hide Back and By depth doing the rest.", build: cardCarousel },
+  { name: "variable-font-study", label: "Variable Font Study", description: "Weight and width as moving quantities, on the bundled variable faces, with nodes alone: an LFO breathing a word, a Ramp materialising one, Stagger\u2019s Wave and Peak curves rolling a wave and a scan along split letters, a jitter boiling them \u2014 and Tektur squeezed along its width axis.", build: variableFontStudy }
+];
 var ALL_NODES = [
   ...GENERATORS,
   stripesNode,
@@ -14778,6 +16699,7 @@ var ALL_NODES = [
   splitGlyphsNode,
   textEffectNode,
   ...MODIFIERS,
+  transform3dNode,
   cornersNode,
   bendNode,
   booleanNode,
@@ -14942,10 +16864,16 @@ function fieldRef(p, shape, world, n, defs) {
   defs.push(`<pattern id="${id}" ${attrs.join(" ")}>${image}</pattern>`);
   return `url(#${id})`;
 }
-function styleAttrs(fill, stroke, style, n) {
+function paintAttr(name, color, n) {
+  const h = color.startsWith("#") ? splitHex(color) : void 0;
+  if (!h) return [`${name}="${color}"`];
+  return h.a < 1 ? [`${name}="${h.rgb}"`, `${name}-opacity="${n(h.a)}"`] : [`${name}="${color}"`];
+}
+function styleAttrs(fill, stroke, style, n, split = true) {
   const out = [];
-  if (fill !== void 0) out.push(`fill="${fill}"`);
-  if (stroke !== void 0 && stroke !== "none") out.push(`stroke="${stroke}"`);
+  const attr = (name, color) => split ? paintAttr(name, color, n) : [`${name}="${color}"`];
+  if (fill !== void 0) out.push(...attr("fill", fill));
+  if (stroke !== void 0 && stroke !== "none") out.push(...attr("stroke", stroke));
   if (style.strokeWidth !== void 0 && stroke !== "none") {
     out.push(`stroke-width="${n(style.strokeWidth)}"`);
   }
@@ -14959,8 +16887,8 @@ function styleAttrs(fill, stroke, style, n) {
   return out;
 }
 function polar2(cx, cy, r, deg) {
-  const rad = deg * Math.PI / 180;
-  return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
+  const rad2 = deg * Math.PI / 180;
+  return [cx + r * Math.cos(rad2), cy + r * Math.sin(rad2)];
 }
 function arcPath(cx, cy, r, a0, a1, n) {
   const sweep = a1 - a0;
@@ -14978,7 +16906,7 @@ function renderShape(shape, opts, depth, pretty, parent = IDENTITY) {
   const defs = [];
   const fill = paintRef(shape.style.fill, shape, world, n, defs);
   const stroke = paintRef(shape.style.stroke, shape, world, n, defs);
-  const element = renderElement(shape, opts, depth, pretty, world, styleAttrs(fill, stroke, shape.style, n));
+  const element = renderElement(shape, opts, depth, pretty, world, styleAttrs(fill, stroke, shape.style, n, shape.kind !== "group"));
   if (defs.length === 0) return element;
   return `${pad}<g>${nl}${pad}<defs>${defs.join("")}</defs>${nl}${element}${pad}</g>${nl}`;
 }
@@ -15067,21 +16995,21 @@ function renderSvg(scene, options = {}) {
   const defs = options.defs ? `${pretty ? "  " : ""}<defs>${options.defs}</defs>${nl}` : "";
   const ox = scene.origin === "center" ? -scene.width / 2 : 0;
   const oy = scene.origin === "center" ? -scene.height / 2 : 0;
-  const bg = scene.background && scene.background !== "none" ? `${pretty ? "  " : ""}<rect x="${n(ox)}" y="${n(oy)}" width="${n(scene.width)}" height="${n(scene.height)}" fill="${scene.background}"/>${nl}` : "";
+  const bg = scene.background && scene.background !== "none" ? `${pretty ? "  " : ""}<rect x="${n(ox)}" y="${n(oy)}" width="${n(scene.width)}" height="${n(scene.height)}" ${paintAttr("fill", scene.background, n).join(" ")}/>${nl}` : "";
   const view = options.crop ?? { x: ox, y: oy, w: scene.width, h: scene.height };
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(view.w)}" height="${n(view.h)}" viewBox="${n(view.x)} ${n(view.y)} ${n(view.w)} ${n(view.h)}">${nl}${defs}${bg}${body}</svg>${nl}`;
 }
 
-// ../../packages/ograf/dist/chunk-MA5YUQEU.js
+// ../../packages/ograf/dist/chunk-2F3KOQL2.js
 function ografNodeOf(project) {
   return project.graph.nodes.find((n) => n.type === OGRAF_TYPE);
 }
 var COLOR_PATTERN = { rgb: "^#[0-9a-f]{6}$", rgba: "^#[0-9a-f]{8}$" };
-var hex23 = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
+var hex24 = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
 function canonicalColor(value, alpha) {
   const c = parseHex(value);
   if (!c) return void 0;
-  return `#${hex23(c[0])}${hex23(c[1])}${hex23(c[2])}${alpha ? hex23(c[3] * 255) : ""}`;
+  return `#${hex24(c[0])}${hex24(c[1])}${hex24(c[2])}${alpha ? hex24(c[3] * 255) : ""}`;
 }
 var clamp3 = (v, min, max) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, v));
 function controlValue(row, node) {
@@ -15951,6 +17879,11 @@ function buildTemplate(input) {
       `Post effects stay in the studio: ${postRemoved} post ${postRemoved === 1 ? "node is" : "nodes are"} left out, and the shapes they worked on come through as plain vectors. Add the look in Resolve.`
     );
   }
+  for (const node of posedLayersWithPictures(project)) {
+    warnings.push(
+      `Layer "${node.name?.trim() || node.id}" is posed in 3D and holds a picture or a paint: a template has no rasteriser, so Resolve places those flat on the plane instead of warping them. Its shapes project as they do in the studio.`
+    );
+  }
   const assets = {};
   for (const node of project.graph.nodes) {
     if (node.type !== "image") continue;
@@ -16050,10 +17983,6 @@ export {
   monochrome,
   yuvToRgb,
   premultiplyRgba,
-  parseBdf,
-  bdfOutline,
-  bdfGlyphs,
-  bdfMeasure,
   FONT_FACES,
   DEFAULT_FONT_FAMILY,
   localFontBytes,
@@ -16062,8 +17991,13 @@ export {
   facesFor,
   fileName,
   fontFaceCss,
+  parseBdf,
+  bdfOutline,
+  bdfGlyphs,
+  bdfMeasure,
   outlineBitmapText,
   usableRows,
+  PRESETS,
   createRegistry,
   renderSvg,
   ografNodeOf,