paperlab 0.3.1 → 0.4.0

package/dist/{chunk-XE4E43MD.js → chunk-4ZU5DZEF.js}

@@ -67,6 +67,12 @@ function segmentsForSine(span, amplitude, wavelength, tol = SAG_TOL) {
   return segmentsForArc(span, 1 / peakCurvature, tol);
 }
 
+// src/config/schema.ts
+import { z as z14 } from "zod";
+
+// src/behaviors/peel.ts
+import { z as z2 } from "zod";
+
 // src/deformers/curl.ts
 import { z } from "zod";
 var cornerNames = ["top-left", "top-right", "bottom-left", "bottom-right"];
@@ -170,7 +176,6 @@ void FN(inout vec3 p, vec2 uv, float t) {
 };
 
 // src/behaviors/peel.ts
-import { z as z2 } from "zod";
 var peelOptionsSchema = z2.object({
   progress: z2.number().min(0).max(1).default(0.35),
   /** 'auto' resolves per slot in a `sheet` field (outward-facing corner); standalone it means bottom-right. */
@@ -544,6 +549,9 @@ var carry = {
   }
 };
 
+// src/behaviors/flight.ts
+import { z as z10 } from "zod";
+
 // src/physics/aero.ts
 function dampTo(state, target, smoothing, dt) {
   const omega = 2 / Math.max(smoothing, 1e-4);
@@ -584,7 +592,6 @@ function carryDrive(speed) {
 }
 
 // src/behaviors/flight.ts
-import { z as z10 } from "zod";
 var flightOptionsSchema = z10.object({
   /** Directional wind vector — paper travels ACROSS the scene, not just down. */
   wind: z10.tuple([z10.number().min(-2).max(2), z10.number().min(-2).max(2), z10.number().min(-2).max(2)]).default([0.6, 0.08, 0]),
@@ -868,7 +875,6 @@ var ribbon = {
 };
 
 // src/config/schema.ts
-import { z as z14 } from "zod";
 var sheetSchema = z14.object({
   /** World units. A letter sheet is ~1 × 1.4, a receipt ~1 × 2.6. */
   width: z14.number().positive().max(20).default(1),
@@ -1195,30 +1201,6 @@ function serializePreset(config) {
   return JSON.stringify(config, null, 2);
 }
 
-// src/core/sheet.ts
-import * as THREE from "three";
-function resolveSegments(sheet2, minSegments = 2, autoSegments = LEGACY_FLAT_SEGMENTS) {
-  const [minX, minY] = typeof minSegments === "number" ? [minSegments, minSegments] : minSegments;
-  if (sheet2.segments !== "auto") {
-    return [Math.max(sheet2.segments, minX, 2), Math.max(sheet2.segments, minY, 2)];
-  }
-  const [wantX, wantY] = typeof autoSegments === "number" ? spreadByAspect(sheet2, quantizeSegments(Math.max(autoSegments, FLAT_SEGMENTS))) : [
-    quantizeSegments(Math.max(wantOrFlat(autoSegments[0]), FLAT_SEGMENTS)),
-    quantizeSegments(Math.max(wantOrFlat(autoSegments[1]), FLAT_SEGMENTS))
-  ];
-  return [Math.max(wantX, minX, 2), Math.max(wantY, minY, 2)];
-}
-var wantOrFlat = (n) => Number.isFinite(n) ? n : FLAT_SEGMENTS;
-function spreadByAspect(sheet2, target) {
-  const long = Math.max(sheet2.width, sheet2.height);
-  if (!(long > 0)) return [target, target];
-  return [Math.round(sheet2.width / long * target), Math.round(sheet2.height / long * target)];
-}
-function createSheetGeometry(sheet2, minSegments = 2, autoSegments = LEGACY_FLAT_SEGMENTS) {
-  const [sx, sy] = resolveSegments(sheet2, minSegments, autoSegments);
-  return new THREE.PlaneGeometry(sheet2.width, sheet2.height, sx, sy);
-}
-
 // src/core/stock.ts
 var stocks = {
   printer: {
@@ -1581,92 +1563,6 @@ function uniquePresetName(base, taken) {
   return name;
 }
 
-// src/content/receipt.ts
-function receiptTotals(content) {
-  const subtotal = content.items.reduce((sum, item) => sum + item.price, 0);
-  const tax = subtotal * content.taxRate;
-  return { subtotal, tax, total: subtotal + tax };
-}
-function barcodeBars(seed) {
-  let h = 2166136261;
-  for (let i = 0; i < seed.length; i++) {
-    h ^= seed.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  const bars = [2, 1, 1, 4];
-  for (let i = 0; i < 30; i++) {
-    h = Math.imul(h ^ h >>> 15, 2246822519);
-    bars.push(1 + Math.abs(h) % 4);
-  }
-  bars.push(2, 3, 3, 1, 1, 2);
-  return bars;
-}
-var money = (v) => v.toFixed(2);
-function paintReceipt(ctx, w, h, content, stock) {
-  const ink = stock.inkColor;
-  const pad = w * 0.09;
-  const colWidth = w - pad * 2;
-  const base = Math.round(w / 15);
-  const mono = (size, weight = 400) => `${weight} ${size}px ui-monospace, Menlo, Consolas, monospace`;
-  let y = h * 0.045;
-  const line = (step = 1.6) => y += base * step;
-  const center = (text, size = base, weight = 400) => {
-    ctx.font = mono(size, weight);
-    ctx.textAlign = "center";
-    ctx.fillText(text, w / 2, y);
-  };
-  const row = (left, right, size = base) => {
-    ctx.font = mono(size);
-    ctx.textAlign = "left";
-    ctx.fillText(left, pad, y);
-    ctx.textAlign = "right";
-    ctx.fillText(right, w - pad, y);
-  };
-  const divider = () => {
-    ctx.font = mono(base);
-    ctx.textAlign = "center";
-    ctx.fillText("- ".repeat(Math.floor(colWidth / (base * 1.1))).trim(), w / 2, y);
-  };
-  ctx.fillStyle = ink;
-  ctx.textBaseline = "top";
-  center(content.store.toUpperCase(), base * 1.5, 700);
-  line(2.4);
-  center(content.address.toUpperCase());
-  line(1.8);
-  divider();
-  line(1.8);
-  for (const item of content.items) {
-    row(item.name.toUpperCase(), money(item.price));
-    line();
-  }
-  line(0.4);
-  divider();
-  line(1.8);
-  const totals = receiptTotals(content);
-  row("SUBTOTAL", money(totals.subtotal));
-  line();
-  row(`TAX ${(content.taxRate * 100).toFixed(0)}%`, money(totals.tax));
-  line();
-  row("TOTAL", money(totals.total), base * 1.15);
-  line(2);
-  center(content.timestamp ?? (/* @__PURE__ */ new Date()).toLocaleString("en-GB"), base * 0.9);
-  line(2.2);
-  if (content.barcode) {
-    const bars = barcodeBars(content.store);
-    const modules = bars.reduce((a, b) => a + b, 0);
-    const module = colWidth * 0.85 / modules;
-    const barH = base * 3.2;
-    let x = (w - modules * module) / 2;
-    bars.forEach((width, i) => {
-      if (i % 2 === 0) ctx.fillRect(x, y, width * module, barH);
-      x += width * module;
-    });
-    y += barH;
-    line(1.8);
-  }
-  center(content.footer.toUpperCase(), base * 0.9);
-}
-
 // src/content/type.ts
 function wrapLines(ctx, text, maxWidth, font) {
   const previous = ctx.font;
@@ -1710,6 +1606,9 @@ async function ensureFont(font, size) {
   }
 }
 
+// src/deformers/registry.ts
+import { z as z21 } from "zod";
+
 // src/deformers/roll.ts
 import { z as z15 } from "zod";
 var rollOptionsSchema = z15.object({
@@ -2233,7 +2132,6 @@ void FN(inout vec3 p, vec2 uv, float t) {
 };
 
 // src/deformers/registry.ts
-import { z as z21 } from "zod";
 var registry = /* @__PURE__ */ new Map();
 function registerDeformer(deformer) {
   registry.set(deformer.id, deformer);
@@ -2277,134 +2175,6 @@ function stackIsAnimated(stack) {
   return stack.some((i) => i.enabled !== false && registry.get(i.type)?.animated);
 }
 
-// src/deformers/compose.ts
-import * as THREE2 from "three";
-
-// src/core/normals.ts
-function computeSheetNormals(geometry) {
-  const index = geometry.index;
-  const normalAttr = geometry.attributes.normal;
-  const positionAttr = geometry.attributes.position;
-  if (!index || !normalAttr || !positionAttr) {
-    geometry.computeVertexNormals();
-    return;
-  }
-  const pos = positionAttr.array;
-  const nrm = normalAttr.array;
-  const idx = index.array;
-  nrm.fill(0);
-  for (let i = 0, l = idx.length; i < l; i += 3) {
-    const a = idx[i] * 3;
-    const b = idx[i + 1] * 3;
-    const c = idx[i + 2] * 3;
-    const bx = pos[b];
-    const by = pos[b + 1];
-    const bz = pos[b + 2];
-    const cbx = pos[c] - bx;
-    const cby = pos[c + 1] - by;
-    const cbz = pos[c + 2] - bz;
-    const abx = pos[a] - bx;
-    const aby = pos[a + 1] - by;
-    const abz = pos[a + 2] - bz;
-    const nx = cby * abz - cbz * aby;
-    const ny = cbz * abx - cbx * abz;
-    const nz = cbx * aby - cby * abx;
-    nrm[a] = nrm[a] + nx;
-    nrm[a + 1] = nrm[a + 1] + ny;
-    nrm[a + 2] = nrm[a + 2] + nz;
-    nrm[b] = nrm[b] + nx;
-    nrm[b + 1] = nrm[b + 1] + ny;
-    nrm[b + 2] = nrm[b + 2] + nz;
-    nrm[c] = nrm[c] + nx;
-    nrm[c + 1] = nrm[c + 1] + ny;
-    nrm[c + 2] = nrm[c + 2] + nz;
-  }
-  for (let i = 0, l = nrm.length; i < l; i += 3) {
-    const x = nrm[i];
-    const y = nrm[i + 1];
-    const z26 = nrm[i + 2];
-    const len = Math.sqrt(x * x + y * y + z26 * z26) || 1;
-    nrm[i] = x / len;
-    nrm[i + 1] = y / len;
-    nrm[i + 2] = z26 / len;
-  }
-  normalAttr.needsUpdate = true;
-}
-
-// src/deformers/compose.ts
-var scratchPos = new THREE2.Vector3();
-var scratchUv = new THREE2.Vector2();
-var activeFns = [];
-var activeOptions = [];
-function applyDeformerStack(geometry, basePositions, stack, ctx) {
-  const position = geometry.attributes.position;
-  const uv = geometry.attributes.uv;
-  const array = position.array;
-  const uvArray = uv.array;
-  const count = position.count;
-  activeFns.length = 0;
-  activeOptions.length = 0;
-  for (const instance of stack) {
-    if (instance.enabled === false) continue;
-    activeFns.push(getDeformer(instance.type).displace);
-    activeOptions.push(instance.options);
-  }
-  array.set(basePositions);
-  for (let k = 0; k < activeFns.length; k++) {
-    const displace = activeFns[k];
-    const options = activeOptions[k];
-    for (let v = 0; v < count; v++) {
-      const i3 = v * 3;
-      const i2 = v * 2;
-      scratchPos.set(array[i3], array[i3 + 1], array[i3 + 2]);
-      scratchUv.set(uvArray[i2], uvArray[i2 + 1]);
-      displace(scratchPos, scratchUv, options, ctx);
-      array[i3] = scratchPos.x;
-      array[i3 + 1] = scratchPos.y;
-      array[i3 + 2] = scratchPos.z;
-    }
-  }
-  position.needsUpdate = true;
-  computeSheetNormals(geometry);
-}
-function displacePoint(point, uvX, uvY, stack, ctx) {
-  scratchUv.set(uvX, uvY);
-  for (const instance of stack) {
-    if (instance.enabled === false) continue;
-    getDeformer(instance.type).displace(point, scratchUv, instance.options, ctx);
-  }
-  return point;
-}
-function stackMinSegments(stack, sheet2) {
-  const out = [2, 2];
-  for (const instance of stack) {
-    const deformer = getDeformer(instance.type);
-    const floor = deformer.geometry?.minSegments;
-    if (!floor) continue;
-    take(out, deformer, instance.options, sheet2, floor);
-  }
-  return out;
-}
-function stackAutoSegments(stack, sheet2) {
-  const out = [0, 0];
-  for (const instance of stack) {
-    if (instance.enabled === false) continue;
-    const deformer = getDeformer(instance.type);
-    const geometry = deformer.geometry;
-    if (!geometry) continue;
-    const want = geometry.autoSegments ? geometry.autoSegments(instance.options, sheet2) : geometry.minSegments ?? 0;
-    take(out, deformer, instance.options, sheet2, want);
-  }
-  return out;
-}
-function take(out, deformer, options, sheet2, demand) {
-  const declared = deformer.geometry?.axis?.(options, sheet2);
-  const angle = typeof declared === "number" && Number.isFinite(declared) ? declared : null;
-  const [x, y] = axialSegments(sheet2, angle, demand);
-  if (x > out[0]) out[0] = x;
-  if (y > out[1]) out[1] = y;
-}
-
 // src/behaviors/registry.ts
 var registry2 = /* @__PURE__ */ new Map();
 function registerBehavior(behavior) {
@@ -2495,209 +2265,6 @@ function getIdlePreset(name) {
   return idlePresets[name];
 }
 
-// src/physics/cloth.ts
-var FIXED_DT = 1 / 120;
-var SOLVER_ITERATIONS = 5;
-var SLEEP_EPSILON = 1e-6;
-var SLEEP_FRAMES = 45;
-var ClothSim = class {
-  cols;
-  rows;
-  count;
-  positions;
-  prev;
-  pinned;
-  pinTargets;
-  constraints = [];
-  params;
-  time = 0;
-  accumulator = 0;
-  stillFrames = 0;
-  grabbedIndex = -1;
-  /** True when the sim has settled and steps are skipped. */
-  asleep = false;
-  constructor(cols, rows, width, height, pins, params) {
-    this.cols = cols;
-    this.rows = rows;
-    this.count = cols * rows;
-    this.params = { ...params };
-    this.positions = new Float32Array(this.count * 3);
-    this.prev = new Float32Array(this.count * 3);
-    this.pinned = new Uint8Array(this.count);
-    this.pinTargets = new Float32Array(this.count * 3);
-    for (let r = 0; r < rows; r++) {
-      for (let c = 0; c < cols; c++) {
-        const i3 = (r * cols + c) * 3;
-        this.positions[i3] = (c / (cols - 1) - 0.5) * width;
-        this.positions[i3 + 1] = (0.5 - r / (rows - 1)) * height;
-        this.positions[i3 + 2] = 0;
-      }
-    }
-    this.prev.set(this.positions);
-    const idx = (r, c) => r * cols + c;
-    const link = (a, b, kind) => {
-      const dx = this.positions[a * 3] - this.positions[b * 3];
-      const dy = this.positions[a * 3 + 1] - this.positions[b * 3 + 1];
-      this.constraints.push({ a, b, rest: Math.hypot(dx, dy), kind });
-    };
-    for (let r = 0; r < rows; r++) {
-      for (let c = 0; c < cols; c++) {
-        if (c + 1 < cols) link(idx(r, c), idx(r, c + 1), 0);
-        if (r + 1 < rows) link(idx(r, c), idx(r + 1, c), 0);
-        if (c + 1 < cols && r + 1 < rows) {
-          link(idx(r, c), idx(r + 1, c + 1), 1);
-          link(idx(r, c + 1), idx(r + 1, c), 1);
-        }
-        if (c + 2 < cols) link(idx(r, c), idx(r, c + 2), 2);
-        if (r + 2 < rows) link(idx(r, c), idx(r + 2, c), 2);
-      }
-    }
-    const pin = (r, c) => {
-      const i = idx(r, c);
-      this.pinned[i] = 1;
-      this.pinTargets.set(this.positions.subarray(i * 3, i * 3 + 3), i * 3);
-    };
-    if (pins === "top-edge") for (let c = 0; c < cols; c++) pin(0, c);
-    if (pins === "top-corners") {
-      pin(0, 0);
-      pin(0, cols - 1);
-    }
-    if (pins === "corner") pin(0, 0);
-  }
-  setParams(params) {
-    let changed = false;
-    for (const key of ["stiffness", "gravity", "wind", "floor"]) {
-      const value = params[key];
-      if (value !== void 0 && value !== this.params[key]) {
-        this.params[key] = value;
-        changed = true;
-      }
-    }
-    if (changed) this.wake();
-  }
-  wake() {
-    this.asleep = false;
-    this.stillFrames = 0;
-  }
-  /** Nearest particle to a local-space point — the grab interface. */
-  grabNearest(x, y, z26) {
-    let best = -1;
-    let bestDist = Infinity;
-    for (let i = 0; i < this.count; i++) {
-      const dx = this.positions[i * 3] - x;
-      const dy = this.positions[i * 3 + 1] - y;
-      const dz = this.positions[i * 3 + 2] - z26;
-      const d = dx * dx + dy * dy + dz * dz;
-      if (d < bestDist) {
-        bestDist = d;
-        best = i;
-      }
-    }
-    this.grabbedIndex = best;
-    this.wake();
-    return best;
-  }
-  moveGrab(x, y, z26) {
-    if (this.grabbedIndex < 0) return;
-    const i3 = this.grabbedIndex * 3;
-    this.positions[i3] = x;
-    this.positions[i3 + 1] = y;
-    this.positions[i3 + 2] = z26;
-    this.prev[i3] = x;
-    this.prev[i3 + 1] = y;
-    this.prev[i3 + 2] = z26;
-    this.wake();
-  }
-  release() {
-    this.grabbedIndex = -1;
-  }
-  step(delta) {
-    if (this.asleep) return;
-    this.accumulator = Math.min(this.accumulator + delta, FIXED_DT * 4);
-    while (this.accumulator >= FIXED_DT) {
-      this.substep(FIXED_DT);
-      this.accumulator -= FIXED_DT;
-    }
-  }
-  substep(dt) {
-    const { gravity, wind, stiffness, floor } = this.params;
-    const p = this.positions;
-    const damping = 0.985;
-    const dt2 = dt * dt;
-    this.time += dt;
-    let maxTravel = 0;
-    for (let i = 0; i < this.count; i++) {
-      const i3 = i * 3;
-      if (this.pinned[i] || i === this.grabbedIndex) {
-        if (this.pinned[i]) {
-          p[i3] = this.pinTargets[i3];
-          p[i3 + 1] = this.pinTargets[i3 + 1];
-          p[i3 + 2] = this.pinTargets[i3 + 2];
-        }
-        this.prev[i3] = p[i3];
-        this.prev[i3 + 1] = p[i3 + 1];
-        this.prev[i3 + 2] = p[i3 + 2];
-        continue;
-      }
-      const x = p[i3];
-      const y = p[i3 + 1];
-      const z26 = p[i3 + 2];
-      const gust2 = wind * (0.55 + 0.45 * Math.sin(this.time * 1.7 + x * 2.1 + y * 1.3)) * 0.9;
-      const ax = gust2 * 0.25;
-      const az = gust2;
-      const vx = (x - this.prev[i3]) * damping;
-      const vy = (y - this.prev[i3 + 1]) * damping;
-      const vz = (z26 - this.prev[i3 + 2]) * damping;
-      this.prev[i3] = x;
-      this.prev[i3 + 1] = y;
-      this.prev[i3 + 2] = z26;
-      p[i3] = x + vx + ax * dt2;
-      p[i3 + 1] = y + vy - gravity * 3.2 * dt2;
-      p[i3 + 2] = z26 + vz + az * dt2;
-      maxTravel = Math.max(maxTravel, vx * vx + vy * vy + vz * vz);
-    }
-    for (let iter = 0; iter < SOLVER_ITERATIONS; iter++) {
-      for (const c of this.constraints) {
-        const k = c.kind === 2 ? 0.25 + stiffness * 0.7 : c.kind === 1 ? 0.85 : 1;
-        const a3 = c.a * 3;
-        const b3 = c.b * 3;
-        const dx = p[b3] - p[a3];
-        const dy = p[b3 + 1] - p[a3 + 1];
-        const dz = p[b3 + 2] - p[a3 + 2];
-        const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
-        if (dist === 0) continue;
-        const diff = (dist - c.rest) / dist * 0.5 * k;
-        const aPinned = this.pinned[c.a] || c.a === this.grabbedIndex;
-        const bPinned = this.pinned[c.b] || c.b === this.grabbedIndex;
-        if (aPinned && bPinned) continue;
-        const aw = aPinned ? 0 : bPinned ? 2 : 1;
-        const bw = bPinned ? 0 : aPinned ? 2 : 1;
-        p[a3] = p[a3] + dx * diff * aw;
-        p[a3 + 1] = p[a3 + 1] + dy * diff * aw;
-        p[a3 + 2] = p[a3 + 2] + dz * diff * aw;
-        p[b3] = p[b3] - dx * diff * bw;
-        p[b3 + 1] = p[b3 + 1] - dy * diff * bw;
-        p[b3 + 2] = p[b3 + 2] - dz * diff * bw;
-      }
-    }
-    for (let i = 0; i < this.count; i++) {
-      const i3 = i * 3;
-      if (p[i3 + 1] < floor) {
-        p[i3 + 1] = floor;
-        this.prev[i3] = this.prev[i3] + (p[i3] - this.prev[i3]) * 0.5;
-        this.prev[i3 + 2] = this.prev[i3 + 2] + (p[i3 + 2] - this.prev[i3 + 2]) * 0.5;
-      }
-    }
-    if (wind === 0 && this.grabbedIndex < 0) {
-      if (maxTravel < SLEEP_EPSILON) {
-        if (++this.stillFrames > SLEEP_FRAMES) this.asleep = true;
-      } else {
-        this.stillFrames = 0;
-      }
-    }
-  }
-};
-
 // src/scene/lighting.ts
 import { z as z22 } from "zod";
 var lightingPresets = {
@@ -2943,1060 +2510,1505 @@ function resolveFog(fog, haze) {
   return { color: fog.color, near: fog.near / haze, far: fog.far / haze };
 }
 
-// src/surface/translucency.ts
-import * as THREE3 from "three";
-var TRANSLUCENCY_VARYINGS = (
-  /* glsl */
-  `
-varying vec3 vPlWorldNormal;
-varying vec3 vPlViewDir;
-`
-);
-function translucencyVertexChunk(slots) {
-  return (
-    /* glsl */
-    `
-  {
-    mat4 plModel = ${slots.model};
-    vec4 plWorld = plModel * vec4(${slots.position}, 1.0);
-    // Uniform scale only \u2014 layouts scale sheets evenly, so the plain 3\xD73 is
-    // the correct normal matrix here and skips an inverse-transpose.
-    vPlWorldNormal = normalize(mat3(plModel) * ${slots.normal});
-    vPlViewDir = cameraPosition - plWorld.xyz;
-  }
-`
-  );
+// src/scene/rig.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var LightRigContext = createContext(null);
+function LightRig({ rig, children }) {
+  return /* @__PURE__ */ jsx(LightRigContext.Provider, { value: rig, children });
 }
-var TRANSMISSION_GAIN = 0.5;
-var TRANSLUCENCY_FRAGMENT = (
-  /* glsl */
-  `
-uniform float uTranslucency;
-uniform vec3 uBackLightDir;
-uniform vec3 uBackLightColor;
-uniform float uAmbientTransmission;
-${TRANSLUCENCY_VARYINGS}
-
-vec3 plTransmission(vec3 inkFilter) {
-  if (uTranslucency <= 0.0) return vec3(0.0);
-  vec3 n = normalize(vPlWorldNormal);
-  // Sheets render double-sided; the back face needs the normal it actually shows.
-  if (!gl_FrontFacing) n = -n;
-  // The lamp is BEHIND this sheet when the face we are looking at points away
-  // from it \u2014 that is the whole test.
-  float behind = clamp(-dot(n, uBackLightDir), 0.0, 1.0);
-  // A grazing view looks through more paper, and more paper passes less light.
-  float thickness = abs(dot(n, normalize(vPlViewDir)));
-  // Paper in a lit room glows whatever way it is turned \u2014 a sheet standing
-  // edge-on to the only lamp is not black. Without this floor, a banner
-  // whose face runs parallel to the key light gets neither diffuse nor
-  // transmission and drops out of the picture entirely.
-  vec3 arriving = uBackLightColor * behind + uAmbientTransmission;
-  return arriving * uTranslucency * mix(0.25, 1.0, thickness) * inkFilter;
+function useLightRig(own) {
+  return useContext(LightRigContext) ?? getLightingPreset(own);
 }
-`
-);
-function translucencyValues(translucency, lighting) {
-  const preset = typeof lighting === "string" ? getLightingPreset(lighting) : lighting;
-  const [x, y, z26] = preset.key.position;
-  const direction = new THREE3.Vector3(x, y, z26);
-  if (direction.lengthSq() < 1e-12) direction.set(0, 1, 0);
-  direction.normalize();
-  const color = new THREE3.Color(preset.key.color).multiplyScalar(preset.key.intensity * TRANSMISSION_GAIN);
-  return { translucency, direction, color, ambient: preset.ambient * TRANSMISSION_GAIN };
-}
-function translucencyUniforms(translucency, lighting) {
-  const values = translucencyValues(translucency, lighting);
-  return {
-    uTranslucency: { value: values.translucency },
-    uBackLightDir: { value: values.direction },
-    uBackLightColor: { value: values.color },
-    uAmbientTransmission: { value: values.ambient }
-  };
-}
-
-// src/surface/compose.ts
-import * as THREE4 from "three";
-var VERTEX = (
-  /* glsl */
-  `
-varying vec2 vPaperUv;
-${TRANSLUCENCY_VARYINGS}
-void main() {
-  vPaperUv = uv;
-${translucencyVertexChunk({ model: "modelMatrix", position: "position", normal: "normal" })}
-}
-`
-);
-var HELPERS = (
-  /* glsl */
-  `
-varying vec2 vPaperUv;
-uniform float uBackDarken;
 
-float plHash(vec2 p) {
-  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
-}
+// src/a11y/index.tsx
+import { useEffect, useState } from "react";
 
-float plNoise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  return mix(
-    mix(plHash(i), plHash(i + vec2(1.0, 0.0)), u.x),
-    mix(plHash(i + vec2(0.0, 1.0)), plHash(i + vec2(1.0, 1.0)), u.x),
-    u.y
-  );
+// src/content/receipt.ts
+function receiptTotals(content) {
+  const subtotal = content.items.reduce((sum, item) => sum + item.price, 0);
+  const tax = subtotal * content.taxRate;
+  return { subtotal, tax, total: subtotal + tax };
 }
-
-float plFbm(vec2 p) {
-  float v = 0.0;
-  float a = 0.5;
-  for (int i = 0; i < 4; i++) {
-    v += a * plNoise(p);
-    p *= 2.03;
-    a *= 0.5;
+function barcodeBars(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
   }
-  return v;
+  const bars = [2, 1, 1, 4];
+  for (let i = 0; i < 30; i++) {
+    h = Math.imul(h ^ h >>> 15, 2246822519);
+    bars.push(1 + Math.abs(h) % 4);
+  }
+  bars.push(2, 3, 3, 1, 1, 2);
+  return bars;
 }
-`
-);
-var edgeFlags = (edges) => new THREE4.Vector4(
-  edges.includes("top") ? 1 : 0,
-  edges.includes("right") ? 1 : 0,
-  edges.includes("bottom") ? 1 : 0,
-  edges.includes("left") ? 1 : 0
-);
-var GRAIN_CHUNK = (
-  /* glsl */
-  `
-uniform float uGrainAmount;
-uniform float uGrainBanding;
-
-void plGrain(inout vec4 color, inout float rough) {
-  float fiber = plFbm(vPaperUv * 240.0);
-  float fleck = plNoise(vPaperUv * 900.0);
-  float g = mix(0.5, fiber * 0.75 + fleck * 0.25, uGrainAmount);
-  color.rgb *= 0.92 + g * 0.16;
-  rough = clamp(rough + (g - 0.5) * uGrainAmount * 0.35, 0.0, 1.0);
-  // Thermal-printer banding: faint horizontal density stripes.
-  if (uGrainBanding > 0.0) {
-    float band = sin(vPaperUv.y * 700.0) * 0.5 + 0.5;
-    color.rgb *= 1.0 - uGrainBanding * 0.05 * band;
+var money = (v) => v.toFixed(2);
+function paintReceipt(ctx, w, h, content, stock) {
+  const ink = stock.inkColor;
+  const pad = w * 0.09;
+  const colWidth = w - pad * 2;
+  const base = Math.round(w / 15);
+  const mono = (size, weight = 400) => `${weight} ${size}px ui-monospace, Menlo, Consolas, monospace`;
+  let y = h * 0.045;
+  const line = (step = 1.6) => y += base * step;
+  const center = (text, size = base, weight = 400) => {
+    ctx.font = mono(size, weight);
+    ctx.textAlign = "center";
+    ctx.fillText(text, w / 2, y);
+  };
+  const row = (left, right, size = base) => {
+    ctx.font = mono(size);
+    ctx.textAlign = "left";
+    ctx.fillText(left, pad, y);
+    ctx.textAlign = "right";
+    ctx.fillText(right, w - pad, y);
+  };
+  const divider = () => {
+    ctx.font = mono(base);
+    ctx.textAlign = "center";
+    ctx.fillText("- ".repeat(Math.floor(colWidth / (base * 1.1))).trim(), w / 2, y);
+  };
+  ctx.fillStyle = ink;
+  ctx.textBaseline = "top";
+  center(content.store.toUpperCase(), base * 1.5, 700);
+  line(2.4);
+  center(content.address.toUpperCase());
+  line(1.8);
+  divider();
+  line(1.8);
+  for (const item of content.items) {
+    row(item.name.toUpperCase(), money(item.price));
+    line();
+  }
+  line(0.4);
+  divider();
+  line(1.8);
+  const totals = receiptTotals(content);
+  row("SUBTOTAL", money(totals.subtotal));
+  line();
+  row(`TAX ${(content.taxRate * 100).toFixed(0)}%`, money(totals.tax));
+  line();
+  row("TOTAL", money(totals.total), base * 1.15);
+  line(2);
+  center(content.timestamp ?? (/* @__PURE__ */ new Date()).toLocaleString("en-GB"), base * 0.9);
+  line(2.2);
+  if (content.barcode) {
+    const bars = barcodeBars(content.store);
+    const modules = bars.reduce((a, b) => a + b, 0);
+    const module = colWidth * 0.85 / modules;
+    const barH = base * 3.2;
+    let x = (w - modules * module) / 2;
+    bars.forEach((width, i) => {
+      if (i % 2 === 0) ctx.fillRect(x, y, width * module, barH);
+      x += width * module;
+    });
+    y += barH;
+    line(1.8);
   }
+  center(content.footer.toUpperCase(), base * 0.9);
 }
-`
-);
-var DECKLE_CHUNK = (
-  /* glsl */
-  `
-uniform vec4 uDeckleEdges; // top, right, bottom, left
-uniform float uDeckleRoughness;
 
-void plDeckle(inout vec4 color) {
-  // Distance to each selected edge, gnawed by low-frequency noise.
-  float depth = 0.012 + uDeckleRoughness * 0.05;
-  float tear = 1.0;
-  float fiberBand = 0.0;
-  vec4 dists = vec4(1.0 - vPaperUv.y, 1.0 - vPaperUv.x, vPaperUv.y, vPaperUv.x);
-  vec4 alongs = vec4(vPaperUv.x, vPaperUv.y, vPaperUv.x, vPaperUv.y);
-  for (int e = 0; e < 4; e++) {
-    if (uDeckleEdges[e] < 0.5) continue;
-    float n = plFbm(vec2(alongs[e] * 26.0, float(e) * 7.31)) - 0.5;
-    float boundary = depth * (0.55 + n * 1.6);
-    float d = dists[e] - boundary;
-    tear = min(tear, step(0.0, d));
-    // Lightened fiber band just inside the tear.
-    fiberBand = max(fiberBand, smoothstep(depth * 1.4, 0.0, d) * step(0.0, d));
+// src/a11y/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function usePrefersReducedMotion(override) {
+  const [system, setSystem] = useState(
+    () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+  );
+  useEffect(() => {
+    const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!query) return;
+    const onChange = () => setSystem(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return override ?? system;
+}
+var webglSupport = null;
+function supportsWebGL() {
+  if (webglSupport !== null) return webglSupport;
+  try {
+    const canvas = document.createElement("canvas");
+    webglSupport = Boolean(canvas.getContext("webgl2") ?? canvas.getContext("webgl"));
+  } catch {
+    webglSupport = false;
   }
-  color.a *= tear;
-  color.rgb = mix(color.rgb, vec3(1.0), fiberBand * 0.35);
+  return webglSupport;
 }
-`
-);
-var CREASE_CHUNK = (
-  /* glsl */
-  `
-uniform float uCreaseAngle;
-uniform float uCreaseStrength;
-uniform float uCreasePositions[4];
-uniform int uCreaseCount;
-
-void plCrease(inout vec4 color, inout float rough) {
-  vec2 dir = vec2(cos(uCreaseAngle), sin(uCreaseAngle));
-  // Coordinate across the crease lines (0..1 over the sheet).
-  float t = dot(vPaperUv - 0.5, vec2(-dir.y, dir.x)) + 0.5;
-  for (int i = 0; i < 4; i++) {
-    if (i >= uCreaseCount) break;
-    float d = abs(t - uCreasePositions[i]);
-    float shadow = smoothstep(0.014, 0.0, d);
-    float sheen = smoothstep(0.02, 0.006, d) - smoothstep(0.006, 0.0, d);
-    color.rgb *= 1.0 - shadow * uCreaseStrength * 0.28;
-    color.rgb += sheen * uCreaseStrength * 0.05;
-    rough = clamp(rough + shadow * uCreaseStrength * 0.2, 0.0, 1.0);
+function contentText(config) {
+  const content = config.content;
+  if (content.type === "text") return content.text;
+  if (content.type === "image") return content.alt ?? "An image printed on paper.";
+  if (content.type === "receipt") {
+    const totals = receiptTotals(content);
+    const items = content.items.map((i) => `${i.name} ${i.price.toFixed(2)}`).join(", ");
+    return `Receipt from ${content.store}: ${items}. Total ${totals.total.toFixed(2)}. ${content.footer}`;
   }
+  return "A blank sheet of paper.";
 }
-`
-);
-var PERFORATION_CHUNK = (
-  /* glsl */
-  `
-uniform vec4 uPerfEdges;   // top, right, bottom, left enabled
-uniform vec4 uPerfTorn;    // 1 = ripped-through profile, 0 = clean punches
-uniform float uPerfRadius; // world units
-uniform float uPerfSpacing;
-uniform vec2 uSheetSize;
-
-void plPerforation(inout vec4 color) {
-  // Per-edge distance/along coordinates, converted from UV to world units so
-  // hole size is stable across sheet dimensions.
-  vec4 dists = vec4(1.0 - vPaperUv.y, 1.0 - vPaperUv.x, vPaperUv.y, vPaperUv.x);
-  vec4 alongs = vec4(vPaperUv.x, vPaperUv.y, vPaperUv.x, vPaperUv.y);
-  vec4 distScale = vec4(uSheetSize.y, uSheetSize.x, uSheetSize.y, uSheetSize.x);
-  vec4 alongScale = vec4(uSheetSize.x, uSheetSize.y, uSheetSize.x, uSheetSize.y);
-  float fiber = 0.0;
-  for (int e = 0; e < 4; e++) {
-    if (uPerfEdges[e] < 0.5) continue;
-    float d = dists[e] * distScale[e];
-    float a = alongs[e] * alongScale[e];
-    // Signed distance along the edge to the nearest hole center.
-    float cell = mod(a + uPerfSpacing * 0.5, uPerfSpacing) - uPerfSpacing * 0.5;
-    if (uPerfTorn[e] < 0.5) {
-      // Intact: clean semicircular punches on the edge line (alphaTest, not
-      // blending \u2014 shadow correctness).
-      if (length(vec2(cell, d)) < uPerfRadius) color.a = 0.0;
-    } else {
-      // Torn: ripped profile following the hole rhythm \u2014 alternating tabs and
-      // notches, gnawed by noise, with a lightened fiber band along the tear.
-      float rhythm = abs(sin(a / uPerfSpacing * 3.14159265));
-      float n = plNoise(vec2(a * 40.0, float(e) * 7.31)) - 0.5;
-      float cut = uPerfRadius * (0.35 + rhythm * 1.35 + n * 0.9);
-      if (d < cut) color.a = 0.0;
-      fiber = max(fiber, smoothstep(uPerfRadius * 2.4, 0.0, d - cut) * step(cut, d));
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function PaperMirror({ config }) {
+  return /* @__PURE__ */ jsx2("div", { style: visuallyHidden, "aria-hidden": false, children: contentText(config) });
+}
+function PaperFallback({ config }) {
+  const stock = getStock(config.stock);
+  const isImage = config.content.type === "image";
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "img",
+      "aria-label": contentText(config),
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "grid",
+        placeItems: "center",
+        background: "transparent"
+      },
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            aspectRatio: `${config.sheet.width} / ${config.sheet.height}`,
+            maxWidth: "80%",
+            maxHeight: "90%",
+            background: stock.color,
+            color: stock.inkColor,
+            boxShadow: "0 6px 24px rgba(0,0,0,0.25)",
+            padding: "8%",
+            overflow: "hidden",
+            fontFamily: config.content.type === "receipt" ? "ui-monospace, monospace" : "Georgia, serif",
+            whiteSpace: "pre-wrap",
+            fontSize: 14
+          },
+          children: isImage && config.content.type === "image" ? /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: config.content.src,
+              alt: config.content.alt ?? "",
+              style: { width: "100%", height: "100%", objectFit: "cover", margin: "-8%" }
+            }
+          ) : contentText(config)
+        }
+      )
     }
-  }
-  color.rgb = mix(color.rgb, vec3(1.0), fiber * 0.4);
+  );
 }
-`
-);
-var AGING_CHUNK = (
-  /* glsl */
-  `
-uniform float uAgingAmount;
 
-void plAging(inout vec4 color) {
-  // Yellowing deepens toward the edges, like light exposure.
-  float edge = max(abs(vPaperUv.x - 0.5), abs(vPaperUv.y - 0.5)) * 2.0;
-  vec3 yellowed = color.rgb * vec3(1.0, 0.94, 0.78);
-  color.rgb = mix(color.rgb, yellowed, uAgingAmount * (0.45 + edge * 0.55));
-  // Foxing: sparse rusty blotches.
-  float fox = plFbm(vPaperUv * 14.0 + 3.7);
-  float spots = smoothstep(0.62, 0.78, fox) * uAgingAmount;
-  color.rgb = mix(color.rgb, vec3(0.62, 0.45, 0.26), spots * 0.5);
+// src/states/machine.ts
+import { gsap } from "gsap";
+var stateEventTransitions = {
+  rest: { enter: "hover" },
+  hover: { leave: "rest", down: "pressed" },
+  pressed: { up: "hover", pick: "picked" },
+  picked: { place: "placed", return: "rest" },
+  placed: {}
+};
+var DEFAULT_TRANSITION = { duration: 0.35, ease: "power2.out" };
+function stripStates(config) {
+  if (!config.states) return config;
+  const { states: _states, ...rest } = config;
+  return rest;
 }
-`
-);
-function composeSurface(surface, stock, thickness, maps = { hasFrontMap: false, hasBackMap: false }, sheet2 = { width: 1, height: 1.4 }, lighting = "studio") {
-  const grain = surface.grain ?? stock.defaultSurface.grain;
-  const aging = surface.aging ?? stock.defaultSurface.aging;
-  const deckle = surface.deckle;
-  const creases = surface.creaseLines;
-  const perforation = surface.perforation;
-  const banding = stock.banding;
-  const showThrough = stock.adhesive ? 0 : surface.showThrough ?? stock.showThrough;
-  const chunks = [];
-  const calls = [];
-  const uniforms = {
-    // Backside darkening: thicker/opaque stock lets less light through.
-    // Adhesive backs skip it — the glue layer is its own bright surface.
-    uBackDarken: {
-      value: stock.adhesive ? 1 : 1 - Math.min(0.45, 0.12 + thickness * 0.9) * stock.opacity
-    },
-    uStockColor: { value: new THREE4.Color(stock.color) },
-    uOpacity: { value: stock.opacity },
-    uShowThrough: { value: showThrough },
-    // Always compiled in: the shader early-outs at zero translucency, which
-    // is cheaper than carrying a second program structure for it.
-    ...translucencyUniforms(surface.translucency ?? stock.translucency, lighting)
-  };
-  if (maps.hasFrontMap) uniforms.uFrontMap = { value: null };
-  if (maps.hasBackMap) uniforms.uBackMap = { value: null };
-  if (grain !== void 0 || banding > 0) {
-    chunks.push(GRAIN_CHUNK);
-    calls.push("plGrain(csm_DiffuseColor, csm_Roughness);");
-    uniforms.uGrainAmount = { value: grain ?? 0 };
-    uniforms.uGrainBanding = { value: banding };
+function resolveStateConfig(base, state) {
+  const def = base.states?.states[state];
+  const flat = stripStates(base);
+  if (!def || Object.keys(def.overrides).length === 0) return flat;
+  return paperConfigSchema.parse(mergeConfig(flat, def.overrides));
+}
+function pruneUndefined(value) {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return value;
+  const out = {};
+  for (const [key, v] of Object.entries(value)) {
+    if (v === void 0) continue;
+    const pruned = pruneUndefined(v);
+    const isEmptyObject = pruned !== null && typeof pruned === "object" && !Array.isArray(pruned) && Object.keys(pruned).length === 0;
+    if (!isEmptyObject) out[key] = pruned;
   }
-  if (deckle) {
-    chunks.push(DECKLE_CHUNK);
-    calls.push("plDeckle(csm_DiffuseColor);");
-    uniforms.uDeckleEdges = { value: edgeFlags(deckle.edges) };
-    uniforms.uDeckleRoughness = { value: deckle.roughness };
+  return out;
+}
+function recordStateOverride(config, stateName, patch) {
+  const cleaned = pruneUndefined(patch);
+  const states = config.states ?? paperStatesSchema.parse({});
+  const def = states.states[stateName] ?? stateDefSchema.parse({});
+  const overrides = mergeConfig(def.overrides, cleaned);
+  return paperConfigSchema.parse({
+    ...config,
+    states: {
+      ...states,
+      states: { ...states.states, [stateName]: { ...def, overrides } }
+    }
+  });
+}
+function flattenNumeric(value, prefix = "", out = {}) {
+  if (typeof value === "number") {
+    if (prefix) out[prefix] = value;
+    return out;
   }
-  if (perforation) {
-    const edges = perforation.edges === "all" ? [...paperEdges] : perforation.edges;
-    chunks.push(PERFORATION_CHUNK);
-    calls.push("plPerforation(csm_DiffuseColor);");
-    uniforms.uPerfEdges = { value: edgeFlags(edges) };
-    uniforms.uPerfTorn = {
-      value: new THREE4.Vector4(
-        ...paperEdges.map((e) => edges.includes(e) && perforation.state[e] === "torn" ? 1 : 0)
-      )
+  if (value !== null && typeof value === "object") {
+    const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+    for (const [key, v] of entries) {
+      flattenNumeric(v, prefix ? `${prefix}.${key}` : key, out);
+    }
+  }
+  return out;
+}
+function setPath(target, path, value) {
+  const keys = path.split(".");
+  let node = target;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const next = node[keys[i]];
+    if (next === null || typeof next !== "object") return;
+    node = next;
+  }
+  node[keys[keys.length - 1]] = value;
+}
+function applyFlat(target, flat) {
+  for (const path in flat) setPath(target, path, flat[path]);
+}
+var clone = (v) => JSON.parse(JSON.stringify(v));
+var PaperStateMachine = class {
+  state;
+  base;
+  opts;
+  /** Structural target of the current state; numeric leaves live in `flat`. */
+  structure;
+  /**
+   * The single live tween target — flattened numeric leaves of the config.
+   * STABLE IDENTITY for the machine's lifetime: `goto`/`rebase` mutate it in
+   * place (add/remove/keep keys) and never reassign, so an in-flight GSAP
+   * tween keeps animating the same object across a rebase instead of freezing.
+   */
+  flat = {};
+  /** Mutable working config, polled by the consumer's frame loop via `liveConfig`. */
+  live;
+  tween = null;
+  resolved = /* @__PURE__ */ new Map();
+  constructor(base, opts = {}) {
+    this.base = base;
+    this.opts = opts;
+    this.state = base.states?.initial ?? "rest";
+    const target = this.resolve(this.state);
+    this.structure = clone(target);
+    this.live = clone(target);
+    Object.assign(this.flat, flattenNumeric(target));
+  }
+  /** World-units drag distance that flips pressed → picked. */
+  get pickThreshold() {
+    return this.base.states?.pickThreshold ?? 0.1;
+  }
+  /**
+   * The live config — the mutable working object with the current tween values
+   * applied in place. Cheap (no allocation); meant to be polled every frame.
+   * Never hand this to React; use `structuralConfig()` for an immutable snapshot.
+   */
+  get liveConfig() {
+    applyFlat(this.live, this.flat);
+    return this.live;
+  }
+  /** Back-compat alias for `liveConfig` (tests, imperative reads). */
+  get config() {
+    return this.liveConfig;
+  }
+  /** True while a transition tween is in flight — consumers gate frame work on it. */
+  get transitioning() {
+    return this.tween !== null;
+  }
+  /** Exposed for tests: the in-flight transition tween, if any. */
+  get activeTween() {
+    return this.tween;
+  }
+  /** An immutable structural snapshot for React consumers (never the live object). */
+  structuralConfig() {
+    const out = clone(this.structure);
+    applyFlat(out, this.flat);
+    return out;
+  }
+  /** Fire a built-in trigger; returns the new state or null if it doesn't apply. */
+  send(event) {
+    const next = stateEventTransitions[this.state]?.[event];
+    if (!next || next === this.state) return null;
+    this.goto(next);
+    return next;
+  }
+  /**
+   * Drive to 'picked' through the legal chain (rest→hover→pressed→picked),
+   * each hop instant so EVERY side effect fires (behavior override, backing
+   * silhouette, onChange state reports, placed onEnter chain). This is the
+   * keyboard/a11y entry point — it never produced pointer hover/press events,
+   * so raw `send('pick')` from 'rest' was a no-op. Returns true if it landed.
+   */
+  pickProgrammatic() {
+    for (const event of ["enter", "down", "pick"]) {
+      const next = stateEventTransitions[this.state]?.[event];
+      if (next && next !== this.state) this.goto(next, { instant: true });
+    }
+    return this.state === "picked";
+  }
+  /** Instant, legal place (picked → placed) so onEnter/emit fires. */
+  placeProgrammatic() {
+    return this.driveInstant("place");
+  }
+  /** Instant, legal return (picked → rest). */
+  returnProgrammatic() {
+    return this.driveInstant("return");
+  }
+  driveInstant(event) {
+    const next = stateEventTransitions[this.state]?.[event];
+    if (!next || next === this.state) return false;
+    this.goto(next, { instant: true });
+    return true;
+  }
+  /** Transition to a state (escape hatch for custom states; `send` for triggers). */
+  goto(state, opts) {
+    const def = this.base.states?.states[state];
+    const target = this.resolve(state);
+    this.state = state;
+    const targetFlat = flattenNumeric(target);
+    this.structure = clone(target);
+    this.live = clone(target);
+    const changed = {};
+    for (const path in this.flat) {
+      if (!(path in targetFlat)) delete this.flat[path];
+    }
+    for (const [path, value] of Object.entries(targetFlat)) {
+      const current = this.flat[path];
+      if (current === void 0) this.flat[path] = value;
+      else if (current !== value) changed[path] = value;
+    }
+    const duration = this.opts.instant || opts?.instant ? 0 : def?.transition.duration ?? DEFAULT_TRANSITION.duration;
+    const ease = def?.transition.ease ?? DEFAULT_TRANSITION.ease;
+    this.tween?.kill();
+    this.tween = null;
+    const arrive = () => {
+      for (const [path, value] of Object.entries(changed)) this.flat[path] = value;
+      this.emitStructure();
+      for (const action of def?.onEnter ?? []) {
+        if (action.startsWith("emit:")) this.opts.onAction?.(action.slice(5), state);
+      }
     };
-    uniforms.uPerfRadius = { value: perforation.holeRadius };
-    uniforms.uPerfSpacing = { value: perforation.spacing };
-    uniforms.uSheetSize = { value: new THREE4.Vector2(sheet2.width, sheet2.height) };
+    if (duration === 0 || Object.keys(changed).length === 0) {
+      arrive();
+      return;
+    }
+    this.emitStructure();
+    this.tween = gsap.to(this.flat, {
+      ...changed,
+      duration,
+      ease,
+      onComplete: () => {
+        this.tween = null;
+        arrive();
+      }
+    });
   }
-  if (creases) {
-    chunks.push(CREASE_CHUNK);
-    calls.push("plCrease(csm_DiffuseColor, csm_Roughness);");
-    uniforms.uCreaseAngle = { value: creases.angle * Math.PI / 180 };
-    uniforms.uCreaseStrength = { value: creases.strength };
-    uniforms.uCreasePositions = { value: padPositions(creases.positions) };
-    uniforms.uCreaseCount = { value: Math.min(creases.positions.length, 4) };
+  /**
+   * Swap the base config without resetting the machine — parameter edits and
+   * runtime patches (torn perforation on detach) keep the current state and
+   * live values instead of snapping back to `initial`. An in-flight tween is
+   * left running on the SAME `flat` object, so the transition continues
+   * smoothly to its target across the rebase (no freeze, no snap).
+   */
+  rebase(base) {
+    this.base = base;
+    this.resolved.clear();
+    const target = this.resolve(this.state);
+    this.structure = clone(target);
+    this.live = clone(target);
+    const targetFlat = flattenNumeric(target);
+    for (const path in this.flat) {
+      if (!(path in targetFlat)) delete this.flat[path];
+    }
+    for (const [path, value] of Object.entries(targetFlat)) {
+      if (!(path in this.flat)) this.flat[path] = value;
+    }
+    this.emitStructure();
   }
-  if (aging !== void 0) {
-    chunks.push(AGING_CHUNK);
-    calls.push("plAging(csm_DiffuseColor);");
-    uniforms.uAgingAmount = { value: aging };
+  dispose() {
+    this.tween?.kill();
+    this.tween = null;
   }
-  const frontExpr = maps.hasFrontMap ? "texture2D(uFrontMap, vPaperUv).rgb" : "uStockColor";
-  const backBaseExpr = stock.adhesive ? "vec3(0.965, 0.96, 0.945)" : maps.hasBackMap ? "texture2D(uBackMap, vec2(1.0 - vPaperUv.x, vPaperUv.y)).rgb" : "uStockColor";
-  const fragmentShader = (
-    /* glsl */
-    `
-${HELPERS}
-uniform vec3 uStockColor;
-uniform float uOpacity;
-uniform float uShowThrough;
-${maps.hasFrontMap ? "uniform sampler2D uFrontMap;" : ""}
-${maps.hasBackMap && !stock.adhesive ? "uniform sampler2D uBackMap;" : ""}
-${TRANSLUCENCY_FRAGMENT}
-${chunks.join("\n")}
-void main() {
-  vec3 front = ${frontExpr};
-  if (gl_FrontFacing) {
-    csm_DiffuseColor = vec4(front, uOpacity);
-  } else {
-    vec3 backBase = ${backBaseExpr};
-    csm_DiffuseColor = vec4(backBase * mix(vec3(1.0), front, uShowThrough), uOpacity);
+  resolve(state) {
+    let config = this.resolved.get(state);
+    if (!config) {
+      config = resolveStateConfig(this.base, state);
+      this.resolved.set(state, config);
+    }
+    return config;
   }
-  ${calls.join("\n  ")}
-  if (!gl_FrontFacing) csm_DiffuseColor.rgb *= uBackDarken;
-  ${stock.adhesive ? "// Adhesive underside: higher specular than the printed face.\n  if (!gl_FrontFacing) csm_Roughness = 0.18;" : ""}
-  // What the key light pushes through the sheet, filtered by the ink on it.
-  csm_Emissive = plTransmission(front);
-}
-`
+  emitStructure() {
+    this.opts.onChange?.(this.structuralConfig(), this.state);
+  }
+};
+
+// src/states/usePaperStates.ts
+import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+function usePaperStates(config, enabled, instant, onAction, onStateChange) {
+  const live = enabled && Boolean(config.states);
+  const key = useMemo(() => JSON.stringify(config), [config]);
+  const onActionRef = useRef(onAction);
+  onActionRef.current = onAction;
+  const onStateChangeRef = useRef(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  const machineRef = useRef(null);
+  const lastStateRef = useRef("rest");
+  const [animated, setAnimated] = useState2(null);
+  useEffect2(() => {
+    if (!live) {
+      machineRef.current?.dispose();
+      machineRef.current = null;
+      setAnimated(null);
+      return;
+    }
+    if (machineRef.current) {
+      machineRef.current.rebase(config);
+      return;
+    }
+    const machine = new PaperStateMachine(config, {
+      instant,
+      // Structural boundaries only (not per tick) — safe to route to React.
+      onChange: (c, state) => {
+        if (state !== lastStateRef.current) {
+          lastStateRef.current = state;
+          onStateChangeRef.current?.(state);
+        }
+        setAnimated({ config: c, state });
+      },
+      onAction: (event, state) => onActionRef.current?.(event, state)
+    });
+    machineRef.current = machine;
+    lastStateRef.current = machine.state;
+    setAnimated({ config: machine.structuralConfig(), state: machine.state });
+  }, [key, live, instant]);
+  useEffect2(
+    () => () => {
+      machineRef.current?.dispose();
+      machineRef.current = null;
+    },
+    []
   );
   return {
-    structureKey: `${[
-      grain !== void 0 || banding > 0 ? "g" : "",
-      deckle ? "d" : "",
-      creases ? "c" : "",
-      aging !== void 0 ? "a" : "",
-      perforation ? "p" : "",
-      stock.adhesive ? "A" : ""
-    ].join("")}:${maps.hasFrontMap ? "F" : ""}${maps.hasBackMap ? "B" : ""}`,
-    vertexShader: VERTEX,
-    fragmentShader,
-    uniforms,
-    alphaTest: deckle || perforation ? 0.5 : 0
+    config: live && animated ? animated.config : stripStates(config),
+    state: live && animated ? animated.state : "rest",
+    machine: live ? machineRef.current : null
   };
 }
-function padPositions(positions) {
-  const out = positions.slice(0, 4);
-  while (out.length < 4) out.push(-1);
-  return out;
+
+// src/PaperMesh.tsx
+import * as THREE7 from "three";
+import { gsap as gsap2 } from "gsap";
+import { useFrame, useThree } from "@react-three/fiber";
+import { forwardRef, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef3 } from "react";
+
+// src/core/normals.ts
+function computeSheetNormals(geometry) {
+  const index = geometry.index;
+  const normalAttr = geometry.attributes.normal;
+  const positionAttr = geometry.attributes.position;
+  if (!index || !normalAttr || !positionAttr) {
+    geometry.computeVertexNormals();
+    return;
+  }
+  const pos = positionAttr.array;
+  const nrm = normalAttr.array;
+  const idx = index.array;
+  nrm.fill(0);
+  for (let i = 0, l = idx.length; i < l; i += 3) {
+    const a = idx[i] * 3;
+    const b = idx[i + 1] * 3;
+    const c = idx[i + 2] * 3;
+    const bx = pos[b];
+    const by = pos[b + 1];
+    const bz = pos[b + 2];
+    const cbx = pos[c] - bx;
+    const cby = pos[c + 1] - by;
+    const cbz = pos[c + 2] - bz;
+    const abx = pos[a] - bx;
+    const aby = pos[a + 1] - by;
+    const abz = pos[a + 2] - bz;
+    const nx = cby * abz - cbz * aby;
+    const ny = cbz * abx - cbx * abz;
+    const nz = cbx * aby - cby * abx;
+    nrm[a] = nrm[a] + nx;
+    nrm[a + 1] = nrm[a + 1] + ny;
+    nrm[a + 2] = nrm[a + 2] + nz;
+    nrm[b] = nrm[b] + nx;
+    nrm[b + 1] = nrm[b + 1] + ny;
+    nrm[b + 2] = nrm[b + 2] + nz;
+    nrm[c] = nrm[c] + nx;
+    nrm[c + 1] = nrm[c + 1] + ny;
+    nrm[c + 2] = nrm[c + 2] + nz;
+  }
+  for (let i = 0, l = nrm.length; i < l; i += 3) {
+    const x = nrm[i];
+    const y = nrm[i + 1];
+    const z26 = nrm[i + 2];
+    const len = Math.sqrt(x * x + y * y + z26 * z26) || 1;
+    nrm[i] = x / len;
+    nrm[i + 1] = y / len;
+    nrm[i + 2] = z26 / len;
+  }
+  normalAttr.needsUpdate = true;
 }
 
-// src/scene/rig.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var LightRigContext = createContext(null);
-function LightRig({ rig, children }) {
-  return /* @__PURE__ */ jsx(LightRigContext.Provider, { value: rig, children });
+// src/core/stable.ts
+import { useRef as useRef2 } from "react";
+function useStable(value) {
+  const held = useRef2(value);
+  if (!deepEqual(held.current, value)) held.current = value;
+  return held.current;
 }
-function useLightRig(own) {
-  return useContext(LightRigContext) ?? getLightingPreset(own);
+function deepEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) if (!deepEqual(a[i], b[i])) return false;
+    return true;
+  }
+  const left = a;
+  const right = b;
+  const keys = /* @__PURE__ */ new Set();
+  for (const key of Object.keys(left)) if (left[key] !== void 0) keys.add(key);
+  for (const key of Object.keys(right)) if (right[key] !== void 0) keys.add(key);
+  for (const key of keys) if (!deepEqual(left[key], right[key])) return false;
+  return true;
 }
 
-// src/surface/PaperMaterial.tsx
-import * as THREE5 from "three";
-import { useEffect, useMemo } from "react";
-import CustomShaderMaterial from "three-custom-shader-material";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function PaperMaterial({
-  stock,
-  texture,
-  backTexture,
-  surface,
-  thickness,
-  sheet: sheet2,
-  lighting = "studio"
-}) {
-  const rig = useLightRig(lighting);
-  const composed = composeSurface(
-    surface,
-    stock,
-    thickness,
-    {
-      hasFrontMap: Boolean(texture),
-      hasBackMap: Boolean(backTexture)
-    },
-    sheet2,
-    rig
-  );
-  const bound = useMemo(() => composed.uniforms, [composed.structureKey]);
-  useEffect(() => {
-    for (const [key, uniform] of Object.entries(composed.uniforms)) {
-      if (!bound[key] || key === "uFrontMap" || key === "uBackMap") continue;
-      if (bound[key].value instanceof THREE5.Color && uniform.value instanceof THREE5.Color) {
-        ;
-        bound[key].value.copy(uniform.value);
-      } else {
-        bound[key].value = uniform.value;
-      }
-    }
-  });
-  useEffect(() => {
-    if (bound.uFrontMap) bound.uFrontMap.value = texture;
-    if (bound.uBackMap) bound.uBackMap.value = backTexture ?? null;
-  }, [bound, texture, backTexture]);
-  return /* @__PURE__ */ jsx2(
-    CustomShaderMaterial,
-    {
-      baseMaterial: THREE5.MeshStandardMaterial,
-      vertexShader: composed.vertexShader,
-      fragmentShader: composed.fragmentShader,
-      uniforms: bound,
-      color: "#ffffff",
-      roughness: stock.roughness,
-      metalness: 0,
-      transparent: stock.opacity < 1,
-      opacity: stock.opacity,
-      alphaTest: composed.alphaTest,
-      side: THREE5.DoubleSide
-    },
-    composed.structureKey
-  );
+// src/core/sheet.ts
+import * as THREE from "three";
+function resolveSegments(sheet2, minSegments = 2, autoSegments = LEGACY_FLAT_SEGMENTS) {
+  const [minX, minY] = typeof minSegments === "number" ? [minSegments, minSegments] : minSegments;
+  if (sheet2.segments !== "auto") {
+    return [Math.max(sheet2.segments, minX, 2), Math.max(sheet2.segments, minY, 2)];
+  }
+  const [wantX, wantY] = typeof autoSegments === "number" ? spreadByAspect(sheet2, quantizeSegments(Math.max(autoSegments, FLAT_SEGMENTS))) : [
+    quantizeSegments(Math.max(wantOrFlat(autoSegments[0]), FLAT_SEGMENTS)),
+    quantizeSegments(Math.max(wantOrFlat(autoSegments[1]), FLAT_SEGMENTS))
+  ];
+  return [Math.max(wantX, minX, 2), Math.max(wantY, minY, 2)];
 }
-
-// src/a11y/index.tsx
-import { useEffect as useEffect2, useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function usePrefersReducedMotion(override) {
-  const [system, setSystem] = useState(
-    () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
-  );
-  useEffect2(() => {
-    const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
-    if (!query) return;
-    const onChange = () => setSystem(query.matches);
-    query.addEventListener("change", onChange);
-    return () => query.removeEventListener("change", onChange);
-  }, []);
-  return override ?? system;
+var wantOrFlat = (n) => Number.isFinite(n) ? n : FLAT_SEGMENTS;
+function spreadByAspect(sheet2, target) {
+  const long = Math.max(sheet2.width, sheet2.height);
+  if (!(long > 0)) return [target, target];
+  return [Math.round(sheet2.width / long * target), Math.round(sheet2.height / long * target)];
 }
-var webglSupport = null;
-function supportsWebGL() {
-  if (webglSupport !== null) return webglSupport;
-  try {
-    const canvas = document.createElement("canvas");
-    webglSupport = Boolean(canvas.getContext("webgl2") ?? canvas.getContext("webgl"));
-  } catch {
-    webglSupport = false;
+function createSheetGeometry(sheet2, minSegments = 2, autoSegments = LEGACY_FLAT_SEGMENTS) {
+  const [sx, sy] = resolveSegments(sheet2, minSegments, autoSegments);
+  return new THREE.PlaneGeometry(sheet2.width, sheet2.height, sx, sy);
+}
+
+// src/content/texture.ts
+import * as THREE2 from "three";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/content/card.ts
+var TITLE_RATIO = 0.52;
+var NOTE_RATIO = 0.46;
+var TITLE_TRACKING = 0.16;
+var NOTE_TRACKING = 0.06;
+function paintCard(ctx, w, h, content, stock, dpr) {
+  const ink = content.color === "#2b2620" ? stock.inkColor : content.color;
+  const size = content.size * dpr;
+  const pad = content.padding * Math.min(w, h);
+  const maxWidth = w - pad * 2;
+  const x = content.align === "center" ? w / 2 : pad;
+  ctx.textAlign = content.align === "center" ? "center" : "left";
+  ctx.textBaseline = "alphabetic";
+  const titleSize = size * TITLE_RATIO;
+  const noteSize = size * NOTE_RATIO;
+  const bodyStep = size * 1.35;
+  const bodyLines = content.body ? wrapLines(ctx, content.body, maxWidth, `${size}px ${content.font}`) : [];
+  const titleBlock = content.title ? titleSize * 1.9 : 0;
+  const ruleBlock = content.rule && content.title ? titleSize * 0.9 : 0;
+  const noteBlock = content.note ? noteSize * 2.4 : 0;
+  const bodyBlock = bodyLines.length * bodyStep;
+  const total = titleBlock + ruleBlock + bodyBlock + noteBlock;
+  let y = Math.max(pad, (h - total) / 2) + size * 0.9;
+  if (content.title) {
+    ctx.font = `${titleSize}px ${content.font}`;
+    ctx.letterSpacing = `${TITLE_TRACKING}em`;
+    ctx.fillStyle = ink;
+    ctx.globalAlpha = 0.72;
+    ctx.fillText(content.title.toUpperCase(), x, y - size * 0.5);
+    ctx.globalAlpha = 1;
+    ctx.letterSpacing = "0em";
+    y += titleBlock - size * 0.5;
+    if (content.rule) {
+      ctx.save();
+      ctx.strokeStyle = ink;
+      ctx.globalAlpha = 0.28;
+      ctx.lineWidth = Math.max(1, dpr * 0.75);
+      ctx.beginPath();
+      ctx.moveTo(content.align === "center" ? w / 2 - maxWidth / 2 : pad, y - titleSize * 0.5);
+      ctx.lineTo(content.align === "center" ? w / 2 + maxWidth / 2 : pad + maxWidth, y - titleSize * 0.5);
+      ctx.stroke();
+      ctx.restore();
+      y += ruleBlock;
+    }
   }
-  return webglSupport;
-}
-function contentText(config) {
-  const content = config.content;
-  if (content.type === "text") return content.text;
-  if (content.type === "image") return content.alt ?? "An image printed on paper.";
-  if (content.type === "receipt") {
-    const totals = receiptTotals(content);
-    const items = content.items.map((i) => `${i.name} ${i.price.toFixed(2)}`).join(", ");
-    return `Receipt from ${content.store}: ${items}. Total ${totals.total.toFixed(2)}. ${content.footer}`;
+  if (content.ruled && bodyLines.length > 0) {
+    ctx.save();
+    ctx.strokeStyle = ink;
+    ctx.globalAlpha = 0.14;
+    ctx.lineWidth = Math.max(1, dpr * 0.6);
+    for (let i = 0; i < bodyLines.length; i++) {
+      const lineY = y + i * bodyStep + size * 0.28;
+      ctx.beginPath();
+      ctx.moveTo(pad, lineY);
+      ctx.lineTo(pad + maxWidth, lineY);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  ctx.font = `${size}px ${content.font}`;
+  ctx.fillStyle = ink;
+  for (const line of bodyLines) {
+    if (y > h - pad) break;
+    ctx.fillText(line, x, y);
+    y += bodyStep;
+  }
+  if (content.note) {
+    ctx.font = `${noteSize}px ${content.font}`;
+    ctx.letterSpacing = `${NOTE_TRACKING}em`;
+    ctx.globalAlpha = 0.6;
+    ctx.fillText(content.note, x, Math.min(y + noteSize * 1.4, h - pad));
+    ctx.globalAlpha = 1;
+    ctx.letterSpacing = "0em";
   }
-  return "A blank sheet of paper.";
 }
-var visuallyHidden = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
-function PaperMirror({ config }) {
-  return /* @__PURE__ */ jsx3("div", { style: visuallyHidden, "aria-hidden": false, children: contentText(config) });
+
+// src/content/texture.ts
+var LONG_EDGE = 1024;
+var DPR = 2;
+function contentCanvasSize(sheet2) {
+  const long = Math.max(sheet2.width, sheet2.height);
+  const w = Math.round(sheet2.width / long * LONG_EDGE * DPR);
+  const h = Math.round(sheet2.height / long * LONG_EDGE * DPR);
+  return [w, h];
 }
-function PaperFallback({ config }) {
-  const stock = getStock(config.stock);
-  const isImage = config.content.type === "image";
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      role: "img",
-      "aria-label": contentText(config),
-      style: {
-        width: "100%",
-        height: "100%",
-        display: "grid",
-        placeItems: "center",
-        background: "transparent"
-      },
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          style: {
-            aspectRatio: `${config.sheet.width} / ${config.sheet.height}`,
-            maxWidth: "80%",
-            maxHeight: "90%",
-            background: stock.color,
-            color: stock.inkColor,
-            boxShadow: "0 6px 24px rgba(0,0,0,0.25)",
-            padding: "8%",
-            overflow: "hidden",
-            fontFamily: config.content.type === "receipt" ? "ui-monospace, monospace" : "Georgia, serif",
-            whiteSpace: "pre-wrap",
-            fontSize: 14
-          },
-          children: isImage && config.content.type === "image" ? /* @__PURE__ */ jsx3(
-            "img",
-            {
-              src: config.content.src,
-              alt: config.content.alt ?? "",
-              style: { width: "100%", height: "100%", objectFit: "cover", margin: "-8%" }
-            }
-          ) : contentText(config)
-        }
-      )
-    }
-  );
+function paintBackground(ctx, w, h, stock) {
+  ctx.fillStyle = stock.color;
+  ctx.fillRect(0, 0, w, h);
 }
-
-// src/motion/onTwos.ts
-var ON_TWOS_FPS = 12;
-function quantizeTime(t, fps = ON_TWOS_FPS) {
-  return Math.floor(t * fps) / fps;
+function paintImage(ctx, w, h, img, fit) {
+  const scale = fit === "cover" ? Math.max(w / img.width, h / img.height) : Math.min(w / img.width, h / img.height);
+  const dw = img.width * scale;
+  const dh = img.height * scale;
+  ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh);
 }
-function quantizeProgress(p, duration, fps = ON_TWOS_FPS) {
-  const steps = Math.max(1, Math.round(duration * fps));
-  return Math.round(p * steps) / steps;
+function paintText(ctx, w, h, content, stock) {
+  const size = content.size * DPR;
+  const pad = content.padding * Math.min(w, h);
+  const font = `${content.weight} ${size}px ${content.font}`;
+  ctx.font = font;
+  ctx.fillStyle = content.color === "#2b2620" ? stock.inkColor : content.color;
+  ctx.textBaseline = "top";
+  ctx.textAlign = content.align;
+  ctx.letterSpacing = `${content.tracking}em`;
+  const maxWidth = w - pad * 2;
+  const x = content.align === "left" ? pad : content.align === "right" ? w - pad : w / 2;
+  const lineStep = size * content.lineHeight;
+  const lines = wrapLines(ctx, content.text, maxWidth, font);
+  ctx.font = font;
+  ctx.letterSpacing = `${content.tracking}em`;
+  const block = lines.length * lineStep;
+  let y = content.valign === "center" ? Math.max(pad, (h - block) / 2) : pad;
+  for (const line of lines) {
+    if (y > h - pad) break;
+    ctx.fillText(line, x, y);
+    y += lineStep;
+  }
+  ctx.letterSpacing = "0em";
 }
-
-// src/states/machine.ts
-import { gsap } from "gsap";
-var stateEventTransitions = {
-  rest: { enter: "hover" },
-  hover: { leave: "rest", down: "pressed" },
-  pressed: { up: "hover", pick: "picked" },
-  picked: { place: "placed", return: "rest" },
-  placed: {}
-};
-var DEFAULT_TRANSITION = { duration: 0.35, ease: "power2.out" };
-function stripStates(config) {
-  if (!config.states) return config;
-  const { states: _states, ...rest } = config;
-  return rest;
+function renderContentToCanvas(content, sheet2, stock, image) {
+  const [w, h] = contentCanvasSize(sheet2);
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  paintBackground(ctx, w, h, stock);
+  if (content.type === "image" && image && content.src) paintImage(ctx, w, h, image, content.fit);
+  if (content.type === "text") paintText(ctx, w, h, content, stock);
+  if (content.type === "receipt") paintReceipt(ctx, w, h, content, stock);
+  if (content.type === "card") paintCard(ctx, w, h, content, stock, DPR);
+  return canvas;
 }
-function resolveStateConfig(base, state) {
-  const def = base.states?.states[state];
-  const flat = stripStates(base);
-  if (!def || Object.keys(def.overrides).length === 0) return flat;
-  return paperConfigSchema.parse(mergeConfig(flat, def.overrides));
+function makeTexture(canvas) {
+  const tex = new THREE2.CanvasTexture(canvas);
+  tex.colorSpace = THREE2.SRGBColorSpace;
+  tex.anisotropy = 8;
+  tex.generateMipmaps = true;
+  return tex;
 }
-function pruneUndefined(value) {
-  if (value === null || typeof value !== "object" || Array.isArray(value)) return value;
-  const out = {};
-  for (const [key, v] of Object.entries(value)) {
-    if (v === void 0) continue;
-    const pruned = pruneUndefined(v);
-    const isEmptyObject = pruned !== null && typeof pruned === "object" && !Array.isArray(pruned) && Object.keys(pruned).length === 0;
-    if (!isEmptyObject) out[key] = pruned;
-  }
-  return out;
+function useContentTexture(content, sheet2, stock) {
+  const [texture, setTexture] = useState3(null);
+  const key = JSON.stringify({ content: content ?? null, w: sheet2.width, h: sheet2.height, stock: stock.id });
+  useEffect3(() => {
+    let disposed = false;
+    let tex = null;
+    if (!content) {
+      setTexture(null);
+      return;
+    }
+    const commit = (canvas) => {
+      if (disposed) return;
+      tex = makeTexture(canvas);
+      setTexture(tex);
+    };
+    if (content.type === "image" && content.src) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => commit(renderContentToCanvas(content, sheet2, stock, img));
+      img.onerror = () => commit(renderContentToCanvas(content, sheet2, stock));
+      img.src = content.src;
+    } else if (content.type === "text" || content.type === "card") {
+      void ensureFont(content.font, content.size * DPR).then(
+        () => commit(renderContentToCanvas(content, sheet2, stock))
+      );
+    } else if (content.type === "receipt") {
+      document.fonts.ready.then(() => commit(renderContentToCanvas(content, sheet2, stock)));
+    } else {
+      commit(renderContentToCanvas(content, sheet2, stock));
+    }
+    return () => {
+      disposed = true;
+      tex?.dispose();
+    };
+  }, [key]);
+  return texture;
 }
-function recordStateOverride(config, stateName, patch) {
-  const cleaned = pruneUndefined(patch);
-  const states = config.states ?? paperStatesSchema.parse({});
-  const def = states.states[stateName] ?? stateDefSchema.parse({});
-  const overrides = mergeConfig(def.overrides, cleaned);
-  return paperConfigSchema.parse({
-    ...config,
-    states: {
-      ...states,
-      states: { ...states.states, [stateName]: { ...def, overrides } }
+
+// src/deformers/compose.ts
+import * as THREE3 from "three";
+var scratchPos = new THREE3.Vector3();
+var scratchUv = new THREE3.Vector2();
+var activeFns = [];
+var activeOptions = [];
+function applyDeformerStack(geometry, basePositions, stack, ctx) {
+  const position = geometry.attributes.position;
+  const uv = geometry.attributes.uv;
+  const array = position.array;
+  const uvArray = uv.array;
+  const count = position.count;
+  activeFns.length = 0;
+  activeOptions.length = 0;
+  for (const instance of stack) {
+    if (instance.enabled === false) continue;
+    activeFns.push(getDeformer(instance.type).displace);
+    activeOptions.push(instance.options);
+  }
+  array.set(basePositions);
+  for (let k = 0; k < activeFns.length; k++) {
+    const displace = activeFns[k];
+    const options = activeOptions[k];
+    for (let v = 0; v < count; v++) {
+      const i3 = v * 3;
+      const i2 = v * 2;
+      scratchPos.set(array[i3], array[i3 + 1], array[i3 + 2]);
+      scratchUv.set(uvArray[i2], uvArray[i2 + 1]);
+      displace(scratchPos, scratchUv, options, ctx);
+      array[i3] = scratchPos.x;
+      array[i3 + 1] = scratchPos.y;
+      array[i3 + 2] = scratchPos.z;
     }
-  });
+  }
+  position.needsUpdate = true;
+  computeSheetNormals(geometry);
 }
-function flattenNumeric(value, prefix = "", out = {}) {
-  if (typeof value === "number") {
-    if (prefix) out[prefix] = value;
-    return out;
+function displacePoint(point, uvX, uvY, stack, ctx) {
+  scratchUv.set(uvX, uvY);
+  for (const instance of stack) {
+    if (instance.enabled === false) continue;
+    getDeformer(instance.type).displace(point, scratchUv, instance.options, ctx);
   }
-  if (value !== null && typeof value === "object") {
-    const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value);
-    for (const [key, v] of entries) {
-      flattenNumeric(v, prefix ? `${prefix}.${key}` : key, out);
-    }
+  return point;
+}
+function stackMinSegments(stack, sheet2) {
+  const out = [2, 2];
+  for (const instance of stack) {
+    const deformer = getDeformer(instance.type);
+    const floor = deformer.geometry?.minSegments;
+    if (!floor) continue;
+    take(out, deformer, instance.options, sheet2, floor);
   }
   return out;
 }
-function setPath(target, path, value) {
-  const keys = path.split(".");
-  let node = target;
-  for (let i = 0; i < keys.length - 1; i++) {
-    const next = node[keys[i]];
-    if (next === null || typeof next !== "object") return;
-    node = next;
+function stackAutoSegments(stack, sheet2) {
+  const out = [0, 0];
+  for (const instance of stack) {
+    if (instance.enabled === false) continue;
+    const deformer = getDeformer(instance.type);
+    const geometry = deformer.geometry;
+    if (!geometry) continue;
+    const want = geometry.autoSegments ? geometry.autoSegments(instance.options, sheet2) : geometry.minSegments ?? 0;
+    take(out, deformer, instance.options, sheet2, want);
   }
-  node[keys[keys.length - 1]] = value;
+  return out;
 }
-function applyFlat(target, flat) {
-  for (const path in flat) setPath(target, path, flat[path]);
+function take(out, deformer, options, sheet2, demand) {
+  const declared = deformer.geometry?.axis?.(options, sheet2);
+  const angle = typeof declared === "number" && Number.isFinite(declared) ? declared : null;
+  const [x, y] = axialSegments(sheet2, angle, demand);
+  if (x > out[0]) out[0] = x;
+  if (y > out[1]) out[1] = y;
 }
-var clone = (v) => JSON.parse(JSON.stringify(v));
-var PaperStateMachine = class {
-  state;
-  base;
-  opts;
-  /** Structural target of the current state; numeric leaves live in `flat`. */
-  structure;
-  /**
-   * The single live tween target — flattened numeric leaves of the config.
-   * STABLE IDENTITY for the machine's lifetime: `goto`/`rebase` mutate it in
-   * place (add/remove/keep keys) and never reassign, so an in-flight GSAP
-   * tween keeps animating the same object across a rebase instead of freezing.
-   */
-  flat = {};
-  /** Mutable working config, polled by the consumer's frame loop via `liveConfig`. */
-  live;
-  tween = null;
-  resolved = /* @__PURE__ */ new Map();
-  constructor(base, opts = {}) {
-    this.base = base;
-    this.opts = opts;
-    this.state = base.states?.initial ?? "rest";
-    const target = this.resolve(this.state);
-    this.structure = clone(target);
-    this.live = clone(target);
-    Object.assign(this.flat, flattenNumeric(target));
-  }
-  /** World-units drag distance that flips pressed → picked. */
-  get pickThreshold() {
-    return this.base.states?.pickThreshold ?? 0.1;
-  }
-  /**
-   * The live config — the mutable working object with the current tween values
-   * applied in place. Cheap (no allocation); meant to be polled every frame.
-   * Never hand this to React; use `structuralConfig()` for an immutable snapshot.
-   */
-  get liveConfig() {
-    applyFlat(this.live, this.flat);
-    return this.live;
-  }
-  /** Back-compat alias for `liveConfig` (tests, imperative reads). */
-  get config() {
-    return this.liveConfig;
-  }
-  /** True while a transition tween is in flight — consumers gate frame work on it. */
-  get transitioning() {
-    return this.tween !== null;
-  }
-  /** Exposed for tests: the in-flight transition tween, if any. */
-  get activeTween() {
-    return this.tween;
+
+// src/physics/cloth.ts
+var FIXED_DT = 1 / 120;
+var SOLVER_ITERATIONS = 5;
+var SLEEP_EPSILON = 1e-6;
+var SLEEP_FRAMES = 45;
+var ClothSim = class {
+  cols;
+  rows;
+  count;
+  positions;
+  prev;
+  pinned;
+  pinTargets;
+  constraints = [];
+  params;
+  time = 0;
+  accumulator = 0;
+  stillFrames = 0;
+  grabbedIndex = -1;
+  /** True when the sim has settled and steps are skipped. */
+  asleep = false;
+  constructor(cols, rows, width, height, pins, params) {
+    this.cols = cols;
+    this.rows = rows;
+    this.count = cols * rows;
+    this.params = { ...params };
+    this.positions = new Float32Array(this.count * 3);
+    this.prev = new Float32Array(this.count * 3);
+    this.pinned = new Uint8Array(this.count);
+    this.pinTargets = new Float32Array(this.count * 3);
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const i3 = (r * cols + c) * 3;
+        this.positions[i3] = (c / (cols - 1) - 0.5) * width;
+        this.positions[i3 + 1] = (0.5 - r / (rows - 1)) * height;
+        this.positions[i3 + 2] = 0;
+      }
+    }
+    this.prev.set(this.positions);
+    const idx = (r, c) => r * cols + c;
+    const link = (a, b, kind) => {
+      const dx = this.positions[a * 3] - this.positions[b * 3];
+      const dy = this.positions[a * 3 + 1] - this.positions[b * 3 + 1];
+      this.constraints.push({ a, b, rest: Math.hypot(dx, dy), kind });
+    };
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        if (c + 1 < cols) link(idx(r, c), idx(r, c + 1), 0);
+        if (r + 1 < rows) link(idx(r, c), idx(r + 1, c), 0);
+        if (c + 1 < cols && r + 1 < rows) {
+          link(idx(r, c), idx(r + 1, c + 1), 1);
+          link(idx(r, c + 1), idx(r + 1, c), 1);
+        }
+        if (c + 2 < cols) link(idx(r, c), idx(r, c + 2), 2);
+        if (r + 2 < rows) link(idx(r, c), idx(r + 2, c), 2);
+      }
+    }
+    const pin = (r, c) => {
+      const i = idx(r, c);
+      this.pinned[i] = 1;
+      this.pinTargets.set(this.positions.subarray(i * 3, i * 3 + 3), i * 3);
+    };
+    if (pins === "top-edge") for (let c = 0; c < cols; c++) pin(0, c);
+    if (pins === "top-corners") {
+      pin(0, 0);
+      pin(0, cols - 1);
+    }
+    if (pins === "corner") pin(0, 0);
   }
-  /** An immutable structural snapshot for React consumers (never the live object). */
-  structuralConfig() {
-    const out = clone(this.structure);
-    applyFlat(out, this.flat);
-    return out;
+  setParams(params) {
+    let changed = false;
+    for (const key of ["stiffness", "gravity", "wind", "floor"]) {
+      const value = params[key];
+      if (value !== void 0 && value !== this.params[key]) {
+        this.params[key] = value;
+        changed = true;
+      }
+    }
+    if (changed) this.wake();
   }
-  /** Fire a built-in trigger; returns the new state or null if it doesn't apply. */
-  send(event) {
-    const next = stateEventTransitions[this.state]?.[event];
-    if (!next || next === this.state) return null;
-    this.goto(next);
-    return next;
+  wake() {
+    this.asleep = false;
+    this.stillFrames = 0;
   }
-  /**
-   * Drive to 'picked' through the legal chain (rest→hover→pressed→picked),
-   * each hop instant so EVERY side effect fires (behavior override, backing
-   * silhouette, onChange state reports, placed onEnter chain). This is the
-   * keyboard/a11y entry point — it never produced pointer hover/press events,
-   * so raw `send('pick')` from 'rest' was a no-op. Returns true if it landed.
-   */
-  pickProgrammatic() {
-    for (const event of ["enter", "down", "pick"]) {
-      const next = stateEventTransitions[this.state]?.[event];
-      if (next && next !== this.state) this.goto(next, { instant: true });
+  /** Nearest particle to a local-space point — the grab interface. */
+  grabNearest(x, y, z26) {
+    let best = -1;
+    let bestDist = Infinity;
+    for (let i = 0; i < this.count; i++) {
+      const dx = this.positions[i * 3] - x;
+      const dy = this.positions[i * 3 + 1] - y;
+      const dz = this.positions[i * 3 + 2] - z26;
+      const d = dx * dx + dy * dy + dz * dz;
+      if (d < bestDist) {
+        bestDist = d;
+        best = i;
+      }
     }
-    return this.state === "picked";
-  }
-  /** Instant, legal place (picked → placed) so onEnter/emit fires. */
-  placeProgrammatic() {
-    return this.driveInstant("place");
+    this.grabbedIndex = best;
+    this.wake();
+    return best;
   }
-  /** Instant, legal return (picked → rest). */
-  returnProgrammatic() {
-    return this.driveInstant("return");
+  moveGrab(x, y, z26) {
+    if (this.grabbedIndex < 0) return;
+    const i3 = this.grabbedIndex * 3;
+    this.positions[i3] = x;
+    this.positions[i3 + 1] = y;
+    this.positions[i3 + 2] = z26;
+    this.prev[i3] = x;
+    this.prev[i3 + 1] = y;
+    this.prev[i3 + 2] = z26;
+    this.wake();
   }
-  driveInstant(event) {
-    const next = stateEventTransitions[this.state]?.[event];
-    if (!next || next === this.state) return false;
-    this.goto(next, { instant: true });
-    return true;
+  release() {
+    this.grabbedIndex = -1;
   }
-  /** Transition to a state (escape hatch for custom states; `send` for triggers). */
-  goto(state, opts) {
-    const def = this.base.states?.states[state];
-    const target = this.resolve(state);
-    this.state = state;
-    const targetFlat = flattenNumeric(target);
-    this.structure = clone(target);
-    this.live = clone(target);
-    const changed = {};
-    for (const path in this.flat) {
-      if (!(path in targetFlat)) delete this.flat[path];
-    }
-    for (const [path, value] of Object.entries(targetFlat)) {
-      const current = this.flat[path];
-      if (current === void 0) this.flat[path] = value;
-      else if (current !== value) changed[path] = value;
+  step(delta) {
+    if (this.asleep) return;
+    this.accumulator = Math.min(this.accumulator + delta, FIXED_DT * 4);
+    while (this.accumulator >= FIXED_DT) {
+      this.substep(FIXED_DT);
+      this.accumulator -= FIXED_DT;
     }
-    const duration = this.opts.instant || opts?.instant ? 0 : def?.transition.duration ?? DEFAULT_TRANSITION.duration;
-    const ease = def?.transition.ease ?? DEFAULT_TRANSITION.ease;
-    this.tween?.kill();
-    this.tween = null;
-    const arrive = () => {
-      for (const [path, value] of Object.entries(changed)) this.flat[path] = value;
-      this.emitStructure();
-      for (const action of def?.onEnter ?? []) {
-        if (action.startsWith("emit:")) this.opts.onAction?.(action.slice(5), state);
+  }
+  substep(dt) {
+    const { gravity, wind, stiffness, floor } = this.params;
+    const p = this.positions;
+    const damping = 0.985;
+    const dt2 = dt * dt;
+    this.time += dt;
+    let maxTravel = 0;
+    for (let i = 0; i < this.count; i++) {
+      const i3 = i * 3;
+      if (this.pinned[i] || i === this.grabbedIndex) {
+        if (this.pinned[i]) {
+          p[i3] = this.pinTargets[i3];
+          p[i3 + 1] = this.pinTargets[i3 + 1];
+          p[i3 + 2] = this.pinTargets[i3 + 2];
+        }
+        this.prev[i3] = p[i3];
+        this.prev[i3 + 1] = p[i3 + 1];
+        this.prev[i3 + 2] = p[i3 + 2];
+        continue;
       }
-    };
-    if (duration === 0 || Object.keys(changed).length === 0) {
-      arrive();
-      return;
+      const x = p[i3];
+      const y = p[i3 + 1];
+      const z26 = p[i3 + 2];
+      const gust2 = wind * (0.55 + 0.45 * Math.sin(this.time * 1.7 + x * 2.1 + y * 1.3)) * 0.9;
+      const ax = gust2 * 0.25;
+      const az = gust2;
+      const vx = (x - this.prev[i3]) * damping;
+      const vy = (y - this.prev[i3 + 1]) * damping;
+      const vz = (z26 - this.prev[i3 + 2]) * damping;
+      this.prev[i3] = x;
+      this.prev[i3 + 1] = y;
+      this.prev[i3 + 2] = z26;
+      p[i3] = x + vx + ax * dt2;
+      p[i3 + 1] = y + vy - gravity * 3.2 * dt2;
+      p[i3 + 2] = z26 + vz + az * dt2;
+      maxTravel = Math.max(maxTravel, vx * vx + vy * vy + vz * vz);
     }
-    this.emitStructure();
-    this.tween = gsap.to(this.flat, {
-      ...changed,
-      duration,
-      ease,
-      onComplete: () => {
-        this.tween = null;
-        arrive();
+    for (let iter = 0; iter < SOLVER_ITERATIONS; iter++) {
+      for (const c of this.constraints) {
+        const k = c.kind === 2 ? 0.25 + stiffness * 0.7 : c.kind === 1 ? 0.85 : 1;
+        const a3 = c.a * 3;
+        const b3 = c.b * 3;
+        const dx = p[b3] - p[a3];
+        const dy = p[b3 + 1] - p[a3 + 1];
+        const dz = p[b3 + 2] - p[a3 + 2];
+        const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+        if (dist === 0) continue;
+        const diff = (dist - c.rest) / dist * 0.5 * k;
+        const aPinned = this.pinned[c.a] || c.a === this.grabbedIndex;
+        const bPinned = this.pinned[c.b] || c.b === this.grabbedIndex;
+        if (aPinned && bPinned) continue;
+        const aw = aPinned ? 0 : bPinned ? 2 : 1;
+        const bw = bPinned ? 0 : aPinned ? 2 : 1;
+        p[a3] = p[a3] + dx * diff * aw;
+        p[a3 + 1] = p[a3 + 1] + dy * diff * aw;
+        p[a3 + 2] = p[a3 + 2] + dz * diff * aw;
+        p[b3] = p[b3] - dx * diff * bw;
+        p[b3 + 1] = p[b3 + 1] - dy * diff * bw;
+        p[b3 + 2] = p[b3 + 2] - dz * diff * bw;
       }
-    });
-  }
-  /**
-   * Swap the base config without resetting the machine — parameter edits and
-   * runtime patches (torn perforation on detach) keep the current state and
-   * live values instead of snapping back to `initial`. An in-flight tween is
-   * left running on the SAME `flat` object, so the transition continues
-   * smoothly to its target across the rebase (no freeze, no snap).
-   */
-  rebase(base) {
-    this.base = base;
-    this.resolved.clear();
-    const target = this.resolve(this.state);
-    this.structure = clone(target);
-    this.live = clone(target);
-    const targetFlat = flattenNumeric(target);
-    for (const path in this.flat) {
-      if (!(path in targetFlat)) delete this.flat[path];
     }
-    for (const [path, value] of Object.entries(targetFlat)) {
-      if (!(path in this.flat)) this.flat[path] = value;
+    for (let i = 0; i < this.count; i++) {
+      const i3 = i * 3;
+      if (p[i3 + 1] < floor) {
+        p[i3 + 1] = floor;
+        this.prev[i3] = this.prev[i3] + (p[i3] - this.prev[i3]) * 0.5;
+        this.prev[i3 + 2] = this.prev[i3 + 2] + (p[i3 + 2] - this.prev[i3 + 2]) * 0.5;
+      }
     }
-    this.emitStructure();
-  }
-  dispose() {
-    this.tween?.kill();
-    this.tween = null;
-  }
-  resolve(state) {
-    let config = this.resolved.get(state);
-    if (!config) {
-      config = resolveStateConfig(this.base, state);
-      this.resolved.set(state, config);
+    if (wind === 0 && this.grabbedIndex < 0) {
+      if (maxTravel < SLEEP_EPSILON) {
+        if (++this.stillFrames > SLEEP_FRAMES) this.asleep = true;
+      } else {
+        this.stillFrames = 0;
+      }
     }
-    return config;
-  }
-  emitStructure() {
-    this.opts.onChange?.(this.structuralConfig(), this.state);
   }
 };
 
-// src/states/usePaperStates.ts
-import { useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-function usePaperStates(config, enabled, instant, onAction, onStateChange) {
-  const live = enabled && Boolean(config.states);
-  const key = useMemo2(() => JSON.stringify(config), [config]);
-  const onActionRef = useRef(onAction);
-  onActionRef.current = onAction;
-  const onStateChangeRef = useRef(onStateChange);
-  onStateChangeRef.current = onStateChange;
-  const machineRef = useRef(null);
-  const lastStateRef = useRef("rest");
-  const [animated, setAnimated] = useState2(null);
-  useEffect3(() => {
-    if (!live) {
-      machineRef.current?.dispose();
-      machineRef.current = null;
-      setAnimated(null);
-      return;
-    }
-    if (machineRef.current) {
-      machineRef.current.rebase(config);
-      return;
-    }
-    const machine = new PaperStateMachine(config, {
-      instant,
-      // Structural boundaries only (not per tick) — safe to route to React.
-      onChange: (c, state) => {
-        if (state !== lastStateRef.current) {
-          lastStateRef.current = state;
-          onStateChangeRef.current?.(state);
-        }
-        setAnimated({ config: c, state });
-      },
-      onAction: (event, state) => onActionRef.current?.(event, state)
-    });
-    machineRef.current = machine;
-    lastStateRef.current = machine.state;
-    setAnimated({ config: machine.structuralConfig(), state: machine.state });
-  }, [key, live, instant]);
-  useEffect3(
-    () => () => {
-      machineRef.current?.dispose();
-      machineRef.current = null;
-    },
-    []
+// src/surface/PaperMaterial.tsx
+import * as THREE6 from "three";
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import CustomShaderMaterial from "three-custom-shader-material";
+
+// src/surface/compose.ts
+import * as THREE5 from "three";
+
+// src/surface/translucency.ts
+import * as THREE4 from "three";
+var TRANSLUCENCY_VARYINGS = (
+  /* glsl */
+  `
+varying vec3 vPlWorldNormal;
+varying vec3 vPlViewDir;
+`
+);
+function translucencyVertexChunk(slots) {
+  return (
+    /* glsl */
+    `
+  {
+    mat4 plModel = ${slots.model};
+    vec4 plWorld = plModel * vec4(${slots.position}, 1.0);
+    // Uniform scale only \u2014 layouts scale sheets evenly, so the plain 3\xD73 is
+    // the correct normal matrix here and skips an inverse-transpose.
+    vPlWorldNormal = normalize(mat3(plModel) * ${slots.normal});
+    vPlViewDir = cameraPosition - plWorld.xyz;
+  }
+`
   );
+}
+var TRANSMISSION_GAIN = 0.5;
+var TRANSLUCENCY_FRAGMENT = (
+  /* glsl */
+  `
+uniform float uTranslucency;
+uniform vec3 uBackLightDir;
+uniform vec3 uBackLightColor;
+uniform float uAmbientTransmission;
+${TRANSLUCENCY_VARYINGS}
+
+vec3 plTransmission(vec3 inkFilter) {
+  if (uTranslucency <= 0.0) return vec3(0.0);
+  vec3 n = normalize(vPlWorldNormal);
+  // Sheets render double-sided; the back face needs the normal it actually shows.
+  if (!gl_FrontFacing) n = -n;
+  // The lamp is BEHIND this sheet when the face we are looking at points away
+  // from it \u2014 that is the whole test.
+  float behind = clamp(-dot(n, uBackLightDir), 0.0, 1.0);
+  // A grazing view looks through more paper, and more paper passes less light.
+  float thickness = abs(dot(n, normalize(vPlViewDir)));
+  // Paper in a lit room glows whatever way it is turned \u2014 a sheet standing
+  // edge-on to the only lamp is not black. Without this floor, a banner
+  // whose face runs parallel to the key light gets neither diffuse nor
+  // transmission and drops out of the picture entirely.
+  vec3 arriving = uBackLightColor * behind + uAmbientTransmission;
+  return arriving * uTranslucency * mix(0.25, 1.0, thickness) * inkFilter;
+}
+`
+);
+function translucencyValues(translucency, lighting) {
+  const preset = typeof lighting === "string" ? getLightingPreset(lighting) : lighting;
+  const [x, y, z26] = preset.key.position;
+  const direction = new THREE4.Vector3(x, y, z26);
+  if (direction.lengthSq() < 1e-12) direction.set(0, 1, 0);
+  direction.normalize();
+  const color = new THREE4.Color(preset.key.color).multiplyScalar(preset.key.intensity * TRANSMISSION_GAIN);
+  return { translucency, direction, color, ambient: preset.ambient * TRANSMISSION_GAIN };
+}
+function translucencyUniforms(translucency, lighting) {
+  const values = translucencyValues(translucency, lighting);
   return {
-    config: live && animated ? animated.config : stripStates(config),
-    state: live && animated ? animated.state : "rest",
-    machine: live ? machineRef.current : null
+    uTranslucency: { value: values.translucency },
+    uBackLightDir: { value: values.direction },
+    uBackLightColor: { value: values.color },
+    uAmbientTransmission: { value: values.ambient }
   };
 }
 
-// src/PaperMesh.tsx
-import * as THREE7 from "three";
-import { gsap as gsap2 } from "gsap";
-import { useFrame, useThree } from "@react-three/fiber";
-import { forwardRef, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef3 } from "react";
+// src/surface/compose.ts
+var VERTEX = (
+  /* glsl */
+  `
+varying vec2 vPaperUv;
+${TRANSLUCENCY_VARYINGS}
+void main() {
+  vPaperUv = uv;
+${translucencyVertexChunk({ model: "modelMatrix", position: "position", normal: "normal" })}
+}
+`
+);
+var HELPERS = (
+  /* glsl */
+  `
+varying vec2 vPaperUv;
+uniform float uBackDarken;
 
-// src/core/stable.ts
-import { useRef as useRef2 } from "react";
-function useStable(value) {
-  const held = useRef2(value);
-  if (!deepEqual(held.current, value)) held.current = value;
-  return held.current;
+float plHash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
 }
-function deepEqual(a, b) {
-  if (Object.is(a, b)) return true;
-  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
-  if (Array.isArray(a) || Array.isArray(b)) {
-    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) if (!deepEqual(a[i], b[i])) return false;
-    return true;
+
+float plNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(plHash(i), plHash(i + vec2(1.0, 0.0)), u.x),
+    mix(plHash(i + vec2(0.0, 1.0)), plHash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+float plFbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  for (int i = 0; i < 4; i++) {
+    v += a * plNoise(p);
+    p *= 2.03;
+    a *= 0.5;
   }
-  const left = a;
-  const right = b;
-  const keys = /* @__PURE__ */ new Set();
-  for (const key of Object.keys(left)) if (left[key] !== void 0) keys.add(key);
-  for (const key of Object.keys(right)) if (right[key] !== void 0) keys.add(key);
-  for (const key of keys) if (!deepEqual(left[key], right[key])) return false;
-  return true;
+  return v;
 }
+`
+);
+var edgeFlags = (edges) => new THREE5.Vector4(
+  edges.includes("top") ? 1 : 0,
+  edges.includes("right") ? 1 : 0,
+  edges.includes("bottom") ? 1 : 0,
+  edges.includes("left") ? 1 : 0
+);
+var GRAIN_CHUNK = (
+  /* glsl */
+  `
+uniform float uGrainAmount;
+uniform float uGrainBanding;
 
-// src/content/texture.ts
-import * as THREE6 from "three";
-import { useEffect as useEffect4, useState as useState3 } from "react";
+void plGrain(inout vec4 color, inout float rough) {
+  float fiber = plFbm(vPaperUv * 240.0);
+  float fleck = plNoise(vPaperUv * 900.0);
+  float g = mix(0.5, fiber * 0.75 + fleck * 0.25, uGrainAmount);
+  color.rgb *= 0.92 + g * 0.16;
+  rough = clamp(rough + (g - 0.5) * uGrainAmount * 0.35, 0.0, 1.0);
+  // Thermal-printer banding: faint horizontal density stripes.
+  if (uGrainBanding > 0.0) {
+    float band = sin(vPaperUv.y * 700.0) * 0.5 + 0.5;
+    color.rgb *= 1.0 - uGrainBanding * 0.05 * band;
+  }
+}
+`
+);
+var DECKLE_CHUNK = (
+  /* glsl */
+  `
+uniform vec4 uDeckleEdges; // top, right, bottom, left
+uniform float uDeckleRoughness;
 
-// src/content/card.ts
-var TITLE_RATIO = 0.52;
-var NOTE_RATIO = 0.46;
-var TITLE_TRACKING = 0.16;
-var NOTE_TRACKING = 0.06;
-function paintCard(ctx, w, h, content, stock, dpr) {
-  const ink = content.color === "#2b2620" ? stock.inkColor : content.color;
-  const size = content.size * dpr;
-  const pad = content.padding * Math.min(w, h);
-  const maxWidth = w - pad * 2;
-  const x = content.align === "center" ? w / 2 : pad;
-  ctx.textAlign = content.align === "center" ? "center" : "left";
-  ctx.textBaseline = "alphabetic";
-  const titleSize = size * TITLE_RATIO;
-  const noteSize = size * NOTE_RATIO;
-  const bodyStep = size * 1.35;
-  const bodyLines = content.body ? wrapLines(ctx, content.body, maxWidth, `${size}px ${content.font}`) : [];
-  const titleBlock = content.title ? titleSize * 1.9 : 0;
-  const ruleBlock = content.rule && content.title ? titleSize * 0.9 : 0;
-  const noteBlock = content.note ? noteSize * 2.4 : 0;
-  const bodyBlock = bodyLines.length * bodyStep;
-  const total = titleBlock + ruleBlock + bodyBlock + noteBlock;
-  let y = Math.max(pad, (h - total) / 2) + size * 0.9;
-  if (content.title) {
-    ctx.font = `${titleSize}px ${content.font}`;
-    ctx.letterSpacing = `${TITLE_TRACKING}em`;
-    ctx.fillStyle = ink;
-    ctx.globalAlpha = 0.72;
-    ctx.fillText(content.title.toUpperCase(), x, y - size * 0.5);
-    ctx.globalAlpha = 1;
-    ctx.letterSpacing = "0em";
-    y += titleBlock - size * 0.5;
-    if (content.rule) {
-      ctx.save();
-      ctx.strokeStyle = ink;
-      ctx.globalAlpha = 0.28;
-      ctx.lineWidth = Math.max(1, dpr * 0.75);
-      ctx.beginPath();
-      ctx.moveTo(content.align === "center" ? w / 2 - maxWidth / 2 : pad, y - titleSize * 0.5);
-      ctx.lineTo(content.align === "center" ? w / 2 + maxWidth / 2 : pad + maxWidth, y - titleSize * 0.5);
-      ctx.stroke();
-      ctx.restore();
-      y += ruleBlock;
-    }
+void plDeckle(inout vec4 color) {
+  // Distance to each selected edge, gnawed by low-frequency noise.
+  float depth = 0.012 + uDeckleRoughness * 0.05;
+  float tear = 1.0;
+  float fiberBand = 0.0;
+  vec4 dists = vec4(1.0 - vPaperUv.y, 1.0 - vPaperUv.x, vPaperUv.y, vPaperUv.x);
+  vec4 alongs = vec4(vPaperUv.x, vPaperUv.y, vPaperUv.x, vPaperUv.y);
+  for (int e = 0; e < 4; e++) {
+    if (uDeckleEdges[e] < 0.5) continue;
+    float n = plFbm(vec2(alongs[e] * 26.0, float(e) * 7.31)) - 0.5;
+    float boundary = depth * (0.55 + n * 1.6);
+    float d = dists[e] - boundary;
+    tear = min(tear, step(0.0, d));
+    // Lightened fiber band just inside the tear.
+    fiberBand = max(fiberBand, smoothstep(depth * 1.4, 0.0, d) * step(0.0, d));
   }
-  if (content.ruled && bodyLines.length > 0) {
-    ctx.save();
-    ctx.strokeStyle = ink;
-    ctx.globalAlpha = 0.14;
-    ctx.lineWidth = Math.max(1, dpr * 0.6);
-    for (let i = 0; i < bodyLines.length; i++) {
-      const lineY = y + i * bodyStep + size * 0.28;
-      ctx.beginPath();
-      ctx.moveTo(pad, lineY);
-      ctx.lineTo(pad + maxWidth, lineY);
-      ctx.stroke();
+  color.a *= tear;
+  color.rgb = mix(color.rgb, vec3(1.0), fiberBand * 0.35);
+}
+`
+);
+var CREASE_CHUNK = (
+  /* glsl */
+  `
+uniform float uCreaseAngle;
+uniform float uCreaseStrength;
+uniform float uCreasePositions[4];
+uniform int uCreaseCount;
+
+void plCrease(inout vec4 color, inout float rough) {
+  vec2 dir = vec2(cos(uCreaseAngle), sin(uCreaseAngle));
+  // Coordinate across the crease lines (0..1 over the sheet).
+  float t = dot(vPaperUv - 0.5, vec2(-dir.y, dir.x)) + 0.5;
+  for (int i = 0; i < 4; i++) {
+    if (i >= uCreaseCount) break;
+    float d = abs(t - uCreasePositions[i]);
+    float shadow = smoothstep(0.014, 0.0, d);
+    float sheen = smoothstep(0.02, 0.006, d) - smoothstep(0.006, 0.0, d);
+    color.rgb *= 1.0 - shadow * uCreaseStrength * 0.28;
+    color.rgb += sheen * uCreaseStrength * 0.05;
+    rough = clamp(rough + shadow * uCreaseStrength * 0.2, 0.0, 1.0);
+  }
+}
+`
+);
+var PERFORATION_CHUNK = (
+  /* glsl */
+  `
+uniform vec4 uPerfEdges;   // top, right, bottom, left enabled
+uniform vec4 uPerfTorn;    // 1 = ripped-through profile, 0 = clean punches
+uniform float uPerfRadius; // world units
+uniform float uPerfSpacing;
+uniform vec2 uSheetSize;
+
+void plPerforation(inout vec4 color) {
+  // Per-edge distance/along coordinates, converted from UV to world units so
+  // hole size is stable across sheet dimensions.
+  vec4 dists = vec4(1.0 - vPaperUv.y, 1.0 - vPaperUv.x, vPaperUv.y, vPaperUv.x);
+  vec4 alongs = vec4(vPaperUv.x, vPaperUv.y, vPaperUv.x, vPaperUv.y);
+  vec4 distScale = vec4(uSheetSize.y, uSheetSize.x, uSheetSize.y, uSheetSize.x);
+  vec4 alongScale = vec4(uSheetSize.x, uSheetSize.y, uSheetSize.x, uSheetSize.y);
+  float fiber = 0.0;
+  for (int e = 0; e < 4; e++) {
+    if (uPerfEdges[e] < 0.5) continue;
+    float d = dists[e] * distScale[e];
+    float a = alongs[e] * alongScale[e];
+    // Signed distance along the edge to the nearest hole center.
+    float cell = mod(a + uPerfSpacing * 0.5, uPerfSpacing) - uPerfSpacing * 0.5;
+    if (uPerfTorn[e] < 0.5) {
+      // Intact: clean semicircular punches on the edge line (alphaTest, not
+      // blending \u2014 shadow correctness).
+      if (length(vec2(cell, d)) < uPerfRadius) color.a = 0.0;
+    } else {
+      // Torn: ripped profile following the hole rhythm \u2014 alternating tabs and
+      // notches, gnawed by noise, with a lightened fiber band along the tear.
+      float rhythm = abs(sin(a / uPerfSpacing * 3.14159265));
+      float n = plNoise(vec2(a * 40.0, float(e) * 7.31)) - 0.5;
+      float cut = uPerfRadius * (0.35 + rhythm * 1.35 + n * 0.9);
+      if (d < cut) color.a = 0.0;
+      fiber = max(fiber, smoothstep(uPerfRadius * 2.4, 0.0, d - cut) * step(cut, d));
     }
-    ctx.restore();
-  }
-  ctx.font = `${size}px ${content.font}`;
-  ctx.fillStyle = ink;
-  for (const line of bodyLines) {
-    if (y > h - pad) break;
-    ctx.fillText(line, x, y);
-    y += bodyStep;
-  }
-  if (content.note) {
-    ctx.font = `${noteSize}px ${content.font}`;
-    ctx.letterSpacing = `${NOTE_TRACKING}em`;
-    ctx.globalAlpha = 0.6;
-    ctx.fillText(content.note, x, Math.min(y + noteSize * 1.4, h - pad));
-    ctx.globalAlpha = 1;
-    ctx.letterSpacing = "0em";
   }
+  color.rgb = mix(color.rgb, vec3(1.0), fiber * 0.4);
 }
+`
+);
+var AGING_CHUNK = (
+  /* glsl */
+  `
+uniform float uAgingAmount;
 
-// src/content/texture.ts
-var LONG_EDGE = 1024;
-var DPR = 2;
-function contentCanvasSize(sheet2) {
-  const long = Math.max(sheet2.width, sheet2.height);
-  const w = Math.round(sheet2.width / long * LONG_EDGE * DPR);
-  const h = Math.round(sheet2.height / long * LONG_EDGE * DPR);
-  return [w, h];
-}
-function paintBackground(ctx, w, h, stock) {
-  ctx.fillStyle = stock.color;
-  ctx.fillRect(0, 0, w, h);
-}
-function paintImage(ctx, w, h, img, fit) {
-  const scale = fit === "cover" ? Math.max(w / img.width, h / img.height) : Math.min(w / img.width, h / img.height);
-  const dw = img.width * scale;
-  const dh = img.height * scale;
-  ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh);
+void plAging(inout vec4 color) {
+  // Yellowing deepens toward the edges, like light exposure.
+  float edge = max(abs(vPaperUv.x - 0.5), abs(vPaperUv.y - 0.5)) * 2.0;
+  vec3 yellowed = color.rgb * vec3(1.0, 0.94, 0.78);
+  color.rgb = mix(color.rgb, yellowed, uAgingAmount * (0.45 + edge * 0.55));
+  // Foxing: sparse rusty blotches.
+  float fox = plFbm(vPaperUv * 14.0 + 3.7);
+  float spots = smoothstep(0.62, 0.78, fox) * uAgingAmount;
+  color.rgb = mix(color.rgb, vec3(0.62, 0.45, 0.26), spots * 0.5);
 }
-function paintText(ctx, w, h, content, stock) {
-  const size = content.size * DPR;
-  const pad = content.padding * Math.min(w, h);
-  const font = `${content.weight} ${size}px ${content.font}`;
-  ctx.font = font;
-  ctx.fillStyle = content.color === "#2b2620" ? stock.inkColor : content.color;
-  ctx.textBaseline = "top";
-  ctx.textAlign = content.align;
-  ctx.letterSpacing = `${content.tracking}em`;
-  const maxWidth = w - pad * 2;
-  const x = content.align === "left" ? pad : content.align === "right" ? w - pad : w / 2;
-  const lineStep = size * content.lineHeight;
-  const lines = wrapLines(ctx, content.text, maxWidth, font);
-  ctx.font = font;
-  ctx.letterSpacing = `${content.tracking}em`;
-  const block = lines.length * lineStep;
-  let y = content.valign === "center" ? Math.max(pad, (h - block) / 2) : pad;
-  for (const line of lines) {
-    if (y > h - pad) break;
-    ctx.fillText(line, x, y);
-    y += lineStep;
+`
+);
+function composeSurface(surface, stock, thickness, maps = { hasFrontMap: false, hasBackMap: false }, sheet2 = { width: 1, height: 1.4 }, lighting = "studio") {
+  const grain = surface.grain ?? stock.defaultSurface.grain;
+  const aging = surface.aging ?? stock.defaultSurface.aging;
+  const deckle = surface.deckle;
+  const creases = surface.creaseLines;
+  const perforation = surface.perforation;
+  const banding = stock.banding;
+  const showThrough = stock.adhesive ? 0 : surface.showThrough ?? stock.showThrough;
+  const chunks = [];
+  const calls = [];
+  const uniforms = {
+    // Backside darkening: thicker/opaque stock lets less light through.
+    // Adhesive backs skip it — the glue layer is its own bright surface.
+    uBackDarken: {
+      value: stock.adhesive ? 1 : 1 - Math.min(0.45, 0.12 + thickness * 0.9) * stock.opacity
+    },
+    uStockColor: { value: new THREE5.Color(stock.color) },
+    uOpacity: { value: stock.opacity },
+    uShowThrough: { value: showThrough },
+    // Always compiled in: the shader early-outs at zero translucency, which
+    // is cheaper than carrying a second program structure for it.
+    ...translucencyUniforms(surface.translucency ?? stock.translucency, lighting)
+  };
+  if (maps.hasFrontMap) uniforms.uFrontMap = { value: null };
+  if (maps.hasBackMap) uniforms.uBackMap = { value: null };
+  if (grain !== void 0 || banding > 0) {
+    chunks.push(GRAIN_CHUNK);
+    calls.push("plGrain(csm_DiffuseColor, csm_Roughness);");
+    uniforms.uGrainAmount = { value: grain ?? 0 };
+    uniforms.uGrainBanding = { value: banding };
   }
-  ctx.letterSpacing = "0em";
+  if (deckle) {
+    chunks.push(DECKLE_CHUNK);
+    calls.push("plDeckle(csm_DiffuseColor);");
+    uniforms.uDeckleEdges = { value: edgeFlags(deckle.edges) };
+    uniforms.uDeckleRoughness = { value: deckle.roughness };
+  }
+  if (perforation) {
+    const edges = perforation.edges === "all" ? [...paperEdges] : perforation.edges;
+    chunks.push(PERFORATION_CHUNK);
+    calls.push("plPerforation(csm_DiffuseColor);");
+    uniforms.uPerfEdges = { value: edgeFlags(edges) };
+    uniforms.uPerfTorn = {
+      value: new THREE5.Vector4(
+        ...paperEdges.map((e) => edges.includes(e) && perforation.state[e] === "torn" ? 1 : 0)
+      )
+    };
+    uniforms.uPerfRadius = { value: perforation.holeRadius };
+    uniforms.uPerfSpacing = { value: perforation.spacing };
+    uniforms.uSheetSize = { value: new THREE5.Vector2(sheet2.width, sheet2.height) };
+  }
+  if (creases) {
+    chunks.push(CREASE_CHUNK);
+    calls.push("plCrease(csm_DiffuseColor, csm_Roughness);");
+    uniforms.uCreaseAngle = { value: creases.angle * Math.PI / 180 };
+    uniforms.uCreaseStrength = { value: creases.strength };
+    uniforms.uCreasePositions = { value: padPositions(creases.positions) };
+    uniforms.uCreaseCount = { value: Math.min(creases.positions.length, 4) };
+  }
+  if (aging !== void 0) {
+    chunks.push(AGING_CHUNK);
+    calls.push("plAging(csm_DiffuseColor);");
+    uniforms.uAgingAmount = { value: aging };
+  }
+  const frontExpr = maps.hasFrontMap ? "texture2D(uFrontMap, vPaperUv).rgb" : "uStockColor";
+  const backBaseExpr = stock.adhesive ? "vec3(0.965, 0.96, 0.945)" : maps.hasBackMap ? "texture2D(uBackMap, vec2(1.0 - vPaperUv.x, vPaperUv.y)).rgb" : "uStockColor";
+  const fragmentShader = (
+    /* glsl */
+    `
+${HELPERS}
+uniform vec3 uStockColor;
+uniform float uOpacity;
+uniform float uShowThrough;
+${maps.hasFrontMap ? "uniform sampler2D uFrontMap;" : ""}
+${maps.hasBackMap && !stock.adhesive ? "uniform sampler2D uBackMap;" : ""}
+${TRANSLUCENCY_FRAGMENT}
+${chunks.join("\n")}
+void main() {
+  vec3 front = ${frontExpr};
+  if (gl_FrontFacing) {
+    csm_DiffuseColor = vec4(front, uOpacity);
+  } else {
+    vec3 backBase = ${backBaseExpr};
+    csm_DiffuseColor = vec4(backBase * mix(vec3(1.0), front, uShowThrough), uOpacity);
+  }
+  ${calls.join("\n  ")}
+  if (!gl_FrontFacing) csm_DiffuseColor.rgb *= uBackDarken;
+  ${stock.adhesive ? "// Adhesive underside: higher specular than the printed face.\n  if (!gl_FrontFacing) csm_Roughness = 0.18;" : ""}
+  // What the key light pushes through the sheet, filtered by the ink on it.
+  csm_Emissive = plTransmission(front);
 }
-function renderContentToCanvas(content, sheet2, stock, image) {
-  const [w, h] = contentCanvasSize(sheet2);
-  const canvas = document.createElement("canvas");
-  canvas.width = w;
-  canvas.height = h;
-  const ctx = canvas.getContext("2d");
-  paintBackground(ctx, w, h, stock);
-  if (content.type === "image" && image && content.src) paintImage(ctx, w, h, image, content.fit);
-  if (content.type === "text") paintText(ctx, w, h, content, stock);
-  if (content.type === "receipt") paintReceipt(ctx, w, h, content, stock);
-  if (content.type === "card") paintCard(ctx, w, h, content, stock, DPR);
-  return canvas;
+`
+  );
+  return {
+    structureKey: `${[
+      grain !== void 0 || banding > 0 ? "g" : "",
+      deckle ? "d" : "",
+      creases ? "c" : "",
+      aging !== void 0 ? "a" : "",
+      perforation ? "p" : "",
+      stock.adhesive ? "A" : ""
+    ].join("")}:${maps.hasFrontMap ? "F" : ""}${maps.hasBackMap ? "B" : ""}`,
+    vertexShader: VERTEX,
+    fragmentShader,
+    uniforms,
+    alphaTest: deckle || perforation ? 0.5 : 0
+  };
 }
-function makeTexture(canvas) {
-  const tex = new THREE6.CanvasTexture(canvas);
-  tex.colorSpace = THREE6.SRGBColorSpace;
-  tex.anisotropy = 8;
-  tex.generateMipmaps = true;
-  return tex;
+function padPositions(positions) {
+  const out = positions.slice(0, 4);
+  while (out.length < 4) out.push(-1);
+  return out;
 }
-function useContentTexture(content, sheet2, stock) {
-  const [texture, setTexture] = useState3(null);
-  const key = JSON.stringify({ content: content ?? null, w: sheet2.width, h: sheet2.height, stock: stock.id });
+
+// src/surface/PaperMaterial.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PaperMaterial({
+  stock,
+  texture,
+  backTexture,
+  surface,
+  thickness,
+  sheet: sheet2,
+  lighting = "studio"
+}) {
+  const rig = useLightRig(lighting);
+  const composed = composeSurface(
+    surface,
+    stock,
+    thickness,
+    {
+      hasFrontMap: Boolean(texture),
+      hasBackMap: Boolean(backTexture)
+    },
+    sheet2,
+    rig
+  );
+  const bound = useMemo2(() => composed.uniforms, [composed.structureKey]);
   useEffect4(() => {
-    let disposed = false;
-    let tex = null;
-    if (!content) {
-      setTexture(null);
-      return;
-    }
-    const commit = (canvas) => {
-      if (disposed) return;
-      tex = makeTexture(canvas);
-      setTexture(tex);
-    };
-    if (content.type === "image" && content.src) {
-      const img = new Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => commit(renderContentToCanvas(content, sheet2, stock, img));
-      img.onerror = () => commit(renderContentToCanvas(content, sheet2, stock));
-      img.src = content.src;
-    } else if (content.type === "text" || content.type === "card") {
-      void ensureFont(content.font, content.size * DPR).then(
-        () => commit(renderContentToCanvas(content, sheet2, stock))
-      );
-    } else if (content.type === "receipt") {
-      document.fonts.ready.then(() => commit(renderContentToCanvas(content, sheet2, stock)));
-    } else {
-      commit(renderContentToCanvas(content, sheet2, stock));
+    for (const [key, uniform] of Object.entries(composed.uniforms)) {
+      if (!bound[key] || key === "uFrontMap" || key === "uBackMap") continue;
+      if (bound[key].value instanceof THREE6.Color && uniform.value instanceof THREE6.Color) {
+        ;
+        bound[key].value.copy(uniform.value);
+      } else {
+        bound[key].value = uniform.value;
+      }
     }
-    return () => {
-      disposed = true;
-      tex?.dispose();
-    };
-  }, [key]);
-  return texture;
+  });
+  useEffect4(() => {
+    if (bound.uFrontMap) bound.uFrontMap.value = texture;
+    if (bound.uBackMap) bound.uBackMap.value = backTexture ?? null;
+  }, [bound, texture, backTexture]);
+  return /* @__PURE__ */ jsx3(
+    CustomShaderMaterial,
+    {
+      baseMaterial: THREE6.MeshStandardMaterial,
+      vertexShader: composed.vertexShader,
+      fragmentShader: composed.fragmentShader,
+      uniforms: bound,
+      color: "#ffffff",
+      roughness: stock.roughness,
+      metalness: 0,
+      transparent: stock.opacity < 1,
+      opacity: stock.opacity,
+      alphaTest: composed.alphaTest,
+      side: THREE6.DoubleSide
+    },
+    composed.structureKey
+  );
+}
+
+// src/motion/onTwos.ts
+var ON_TWOS_FPS = 12;
+function quantizeTime(t, fps = ON_TWOS_FPS) {
+  return Math.floor(t * fps) / fps;
+}
+function quantizeProgress(p, duration, fps = ON_TWOS_FPS) {
+  const steps = Math.max(1, Math.round(duration * fps));
+  return Math.round(p * steps) / steps;
 }
 
 // src/PaperMesh.tsx
@@ -4792,305 +4804,74 @@ function DropZoneVisual({ registry: registry4, config }) {
       /* @__PURE__ */ jsx6("planeGeometry", { args: [w, h] }),
       /* @__PURE__ */ jsx6(
         "meshBasicMaterial",
-        {
-          color: hovered && style === "glow" ? "#8ea8ff" : "#5c6f9e",
-          transparent: true,
-          opacity: hovered && style === "glow" ? 0.32 : 0.14,
-          depthWrite: false
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx6("lineSegments", { geometry: edges, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: hovered ? "#aebfff" : "#6b7da8" }) })
-  ] });
-}
-
-// src/field/sheetGrid.ts
-import { z as z23 } from "zod";
-var sheetLayoutSchema = z23.object({
-  rows: z23.number().int().min(1).max(12).default(2),
-  columns: z23.number().int().min(1).max(12).default(5),
-  /** World-units gap between slots. Stamps are printed in register — no jitter. */
-  gutter: z23.number().min(0).max(1).default(0.08),
-  /** Slot footprint in world units (the paper preset should match). */
-  cellWidth: z23.number().min(0.1).max(4).default(0.72),
-  cellHeight: z23.number().min(0.1).max(4).default(0.86),
-  /** Render the shared backing sheet behind the grid. */
-  backing: z23.boolean().default(true),
-  backingMargin: z23.number().min(0).max(1).default(0.12)
-});
-var SHEET_LIFT = 0.012;
-function withSheetCellFromPaper(parsed, rawOptions, paperDims) {
-  if (!paperDims) return parsed;
-  const hasW = rawOptions !== void 0 && rawOptions.cellWidth !== void 0;
-  const hasH = rawOptions !== void 0 && rawOptions.cellHeight !== void 0;
-  if (hasW && hasH) return parsed;
-  return {
-    ...parsed,
-    cellWidth: hasW ? parsed.cellWidth : paperDims.width,
-    cellHeight: hasH ? parsed.cellHeight : paperDims.height
-  };
-}
-function sheetSlotXY(i, o) {
-  const col = i % o.columns;
-  const row = Math.floor(i / o.columns);
-  return {
-    x: (col - (o.columns - 1) / 2) * (o.cellWidth + o.gutter),
-    y: ((o.rows - 1) / 2 - row) * (o.cellHeight + o.gutter)
-  };
-}
-function sheetBackingSize(o) {
-  return {
-    width: o.columns * o.cellWidth + (o.columns - 1) * o.gutter + o.backingMargin * 2,
-    height: o.rows * o.cellHeight + (o.rows - 1) * o.gutter + o.backingMargin * 2
-  };
-}
-function outwardCorner(i, o) {
-  const col = i % o.columns;
-  const row = Math.floor(i / o.columns);
-  const horizontal = col + 0.5 < o.columns / 2 ? "left" : "right";
-  const vertical = row + 0.5 < o.rows / 2 ? "top" : "bottom";
-  return `${vertical}-${horizontal}`;
-}
-function tornEdgesOnDetach(i, o) {
-  const col = i % o.columns;
-  const row = Math.floor(i / o.columns);
-  return {
-    top: row > 0 ? "torn" : "intact",
-    bottom: row < o.rows - 1 ? "torn" : "intact",
-    left: col > 0 ? "torn" : "intact",
-    right: col < o.columns - 1 ? "torn" : "intact"
-  };
-}
-
-// src/field/slots.ts
-var EMPTY_SET = /* @__PURE__ */ new Set();
-function effectiveFieldPapers(papers, images) {
-  if (papers) return papers;
-  if (images) {
-    return images.map((src) => ({
-      content: { type: "image", src, fit: "cover" }
-    }));
-  }
-  return Array.from({ length: 12 }, () => ({}));
-}
-function groupFieldPapers(papers, fallback) {
-  const groups = /* @__PURE__ */ new Map();
-  papers.forEach((slot, i) => {
-    const config = resolveConfig({ preset: slot.preset ?? fallback });
-    const key = JSON.stringify(config);
-    let group = groups.get(key);
-    if (!group) {
-      group = { config, indices: [], contents: [] };
-      groups.set(key, group);
-    }
-    group.indices.push(i);
-    group.contents.push(slot.content ? contentSchema.parse(slot.content) : config.content);
-  });
-  return [...groups.values()];
-}
-function fieldIsInteractive(papers, fallback, explicit) {
-  if (explicit !== void 0) return explicit;
-  return papers.some((s) => s.states) || groupFieldPapers(papers, fallback).some((g) => Boolean(g.config.states));
-}
-function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions) {
-  let config = resolveConfig({ preset: slot.preset ?? fallback });
-  const patch = {};
-  if (slot.content) patch.content = slot.content;
-  if (slot.states) patch.states = slot.states;
-  if (layoutId === "sheet" && config.behavior?.type === "peel" && config.behavior.corner === "auto") {
-    const o = sheetLayoutSchema.parse(layoutOptions);
-    patch.behavior = { corner: outwardCorner(index, o) };
-  }
-  if (Object.keys(patch).length > 0) {
-    config = paperConfigSchema.parse(mergeConfig(config, patch));
-  }
-  return config;
-}
-
-// src/content/atlas.ts
-import * as THREE11 from "three";
-import { useEffect as useEffect8, useState as useState4 } from "react";
-var MAX_ATLAS = 4096;
-function atlasGrid(count, aspect = 1) {
-  const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count * Math.max(aspect, 0.01)))));
-  return { cols, rows: Math.max(1, Math.ceil(count / cols)) };
-}
-function useContentAtlas(contents, sheet2, stock) {
-  const [atlas, setAtlas] = useState4(null);
-  const stableContents = useStable(contents);
-  useEffect8(() => {
-    let disposed = false;
-    const aspect = sheet2.height / sheet2.width;
-    const { cols, rows } = atlasGrid(contents.length, aspect);
-    let tileW = Math.min(1024, Math.floor(MAX_ATLAS / cols));
-    let tileH = Math.round(tileW * aspect);
-    if (tileH * rows > MAX_ATLAS) {
-      tileH = Math.floor(MAX_ATLAS / rows);
-      tileW = Math.max(1, Math.round(tileH / aspect));
-    }
-    const canvas = document.createElement("canvas");
-    canvas.width = tileW * cols;
-    canvas.height = tileH * rows;
-    const ctx = canvas.getContext("2d");
-    ctx.fillStyle = stock.color;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    const texture = new THREE11.CanvasTexture(canvas);
-    texture.colorSpace = THREE11.SRGBColorSpace;
-    texture.anisotropy = 4;
-    setAtlas({ texture, cols, rows });
-    const drawTile = (index, tile) => {
-      if (disposed) return;
-      const x = index % cols * tileW;
-      const y = Math.floor(index / cols) * tileH;
-      ctx.drawImage(tile, x, y, tileW, tileH);
-      texture.needsUpdate = true;
-    };
-    contents.forEach((content, index) => {
-      if (content.type === "image") {
-        const img = new Image();
-        img.crossOrigin = "anonymous";
-        img.onload = () => drawTile(index, renderContentToCanvas(content, sheet2, stock, img));
-        img.src = content.src;
-      } else if (content.type === "text" || content.type === "receipt") {
-        document.fonts.ready.then(() => drawTile(index, renderContentToCanvas(content, sheet2, stock)));
-      } else {
-        drawTile(index, renderContentToCanvas(content, sheet2, stock));
-      }
-    });
-    return () => {
-      disposed = true;
-      texture.dispose();
-    };
-  }, [stableContents, sheet2.width, sheet2.height, stock.id]);
-  return atlas;
-}
-
-// src/field/compose.ts
-function glslType(value) {
-  if (typeof value === "number") return "float";
-  return ["float", "vec2", "vec3", "vec4"][value.length - 1];
-}
-function stackUniformValues(stack, sheet2) {
-  const uniforms = { uSheet: [sheet2.width, sheet2.height] };
-  stack.forEach((instance, i) => {
-    if (instance.enabled === false) return;
-    const deformer = getDeformer(instance.type);
-    if (!deformer.glsl) return;
-    const ns = `u${cap(instance.type)}${i}_`;
-    const values = deformer.glsl.uniforms(instance.options);
-    for (const [key, value] of Object.entries(values)) uniforms[ns + key] = value;
-  });
-  return uniforms;
-}
-function buildDisplacementGLSL(stack, sheet2) {
-  const decls = ["uniform vec2 uSheet;", "float plBias = 1.0;"];
-  const functions = [];
-  const calls = [];
-  const uniforms = { uSheet: [sheet2.width, sheet2.height] };
-  stack.forEach((instance, i) => {
-    if (instance.enabled === false) return;
-    const deformer = getDeformer(instance.type);
-    if (!deformer.glsl) {
-      throw new Error(
-        `[paperlab] Deformer "${instance.type}" has no GLSL implementation \u2014 it can't run in field mode.`
-      );
-    }
-    const ns = `u${cap(instance.type)}${i}_`;
-    const fn = `pl_${instance.type}${i}`;
-    const values = deformer.glsl.uniforms(instance.options);
-    for (const [key, value] of Object.entries(values)) {
-      decls.push(`uniform ${glslType(value)} ${ns}${key};`);
-      uniforms[ns + key] = value;
-    }
-    const strength = deformer.glsl.strength;
-    functions.push(
-      deformer.glsl.chunk.replaceAll("FN", fn).replace(
-        /U_(\w+)/g,
-        (_, name) => (
-          // The strength uniform reads through the per-instance bias, so one
-          // instanced draw call can bend every sheet by a different amount.
-          name === strength ? `(${ns}${name} * plBias)` : ns + name
-        )
+        {
+          color: hovered && style === "glow" ? "#8ea8ff" : "#5c6f9e",
+          transparent: true,
+          opacity: hovered && style === "glow" ? 0.32 : 0.14,
+          depthWrite: false
+        }
       )
-    );
-    calls.push(`${fn}(q, uv, t);`);
-  });
-  const displaceSrc = (
-    /* glsl */
-    `
-vec3 plDisplace(vec3 p, vec2 uv, float t, float bias) {
-  plBias = bias;
-  vec3 q = p;
-  ${calls.join("\n  ")}
-  return q;
-}
-`
-  );
-  return { functionsSrc: `${decls.join("\n")}
-${functions.join("\n")}`, displaceSrc, uniforms };
+    ] }),
+    /* @__PURE__ */ jsx6("lineSegments", { geometry: edges, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: hovered ? "#aebfff" : "#6b7da8" }) })
+  ] });
 }
-function buildFieldVertexShader(composed) {
-  return (
-    /* glsl */
-    `
-uniform float uPlTime;
-attribute float aPhase;
-attribute float aAtlas;
-attribute float aBias;
-varying vec2 vPaperUv;
-varying float vAtlas;
-${TRANSLUCENCY_VARYINGS}
-${composed.functionsSrc}
-${composed.displaceSrc}
-void main() {
-  float t = uPlTime + aPhase;
-  vec3 p = plDisplace(position, uv, t, aBias);
-  vec2 step = uSheet * 0.01;
-  vec3 px = plDisplace(position + vec3(step.x, 0.0, 0.0), uv + vec2(0.01, 0.0), t, aBias);
-  vec3 py = plDisplace(position + vec3(0.0, step.y, 0.0), uv + vec2(0.0, 0.01), t, aBias);
-  vec3 n = cross(px - p, py - p);
-  csm_Normal = length(n) > 1e-12 ? normalize(n) : vec3(0.0, 0.0, 1.0);
-  csm_Position = p;
-${translucencyVertexChunk({ model: "modelMatrix * instanceMatrix", position: "p", normal: "csm_Normal" })}
-  vPaperUv = uv;
-  vAtlas = aAtlas;
+
+// src/field/sheetGrid.ts
+import { z as z23 } from "zod";
+var sheetLayoutSchema = z23.object({
+  rows: z23.number().int().min(1).max(12).default(2),
+  columns: z23.number().int().min(1).max(12).default(5),
+  /** World-units gap between slots. Stamps are printed in register — no jitter. */
+  gutter: z23.number().min(0).max(1).default(0.08),
+  /** Slot footprint in world units (the paper preset should match). */
+  cellWidth: z23.number().min(0.1).max(4).default(0.72),
+  cellHeight: z23.number().min(0.1).max(4).default(0.86),
+  /** Render the shared backing sheet behind the grid. */
+  backing: z23.boolean().default(true),
+  backingMargin: z23.number().min(0).max(1).default(0.12)
+});
+var SHEET_LIFT = 0.012;
+function withSheetCellFromPaper(parsed, rawOptions, paperDims) {
+  if (!paperDims) return parsed;
+  const hasW = rawOptions !== void 0 && rawOptions.cellWidth !== void 0;
+  const hasH = rawOptions !== void 0 && rawOptions.cellHeight !== void 0;
+  if (hasW && hasH) return parsed;
+  return {
+    ...parsed,
+    cellWidth: hasW ? parsed.cellWidth : paperDims.width,
+    cellHeight: hasH ? parsed.cellHeight : paperDims.height
+  };
 }
-`
-  );
+function sheetSlotXY(i, o) {
+  const col = i % o.columns;
+  const row = Math.floor(i / o.columns);
+  return {
+    x: (col - (o.columns - 1) / 2) * (o.cellWidth + o.gutter),
+    y: ((o.rows - 1) / 2 - row) * (o.cellHeight + o.gutter)
+  };
 }
-function buildFieldFragmentShader() {
-  return (
-    /* glsl */
-    `
-uniform sampler2D uAtlas;
-uniform vec2 uAtlasGrid;
-uniform float uBackDarken;
-uniform vec3 uStockColor;
-uniform float uShowThrough;
-varying vec2 vPaperUv;
-varying float vAtlas;
-${TRANSLUCENCY_FRAGMENT}
-void main() {
-  float col = mod(vAtlas, uAtlasGrid.x);
-  float row = floor(vAtlas / uAtlasGrid.x);
-  vec2 tiled = (vPaperUv + vec2(col, uAtlasGrid.y - 1.0 - row)) / uAtlasGrid;
-  vec4 front = texture2D(uAtlas, tiled);
-  if (gl_FrontFacing) {
-    csm_DiffuseColor = front;
-  } else {
-    csm_DiffuseColor = vec4(uStockColor * mix(vec3(1.0), front.rgb, uShowThrough), 1.0);
-    csm_DiffuseColor.rgb *= uBackDarken;
-  }
-  // Light coming through the sheet, filtered by what is printed on it. Same
-  // ink either side \u2014 the light passes through the same fibres regardless of
-  // which face happens to be turned toward the camera.
-  csm_Emissive = plTransmission(front.rgb);
+function sheetBackingSize(o) {
+  return {
+    width: o.columns * o.cellWidth + (o.columns - 1) * o.gutter + o.backingMargin * 2,
+    height: o.rows * o.cellHeight + (o.rows - 1) * o.gutter + o.backingMargin * 2
+  };
 }
-`
-  );
+function outwardCorner(i, o) {
+  const col = i % o.columns;
+  const row = Math.floor(i / o.columns);
+  const horizontal = col + 0.5 < o.columns / 2 ? "left" : "right";
+  const vertical = row + 0.5 < o.rows / 2 ? "top" : "bottom";
+  return `${vertical}-${horizontal}`;
 }
-function cap(s) {
-  return s.charAt(0).toUpperCase() + s.slice(1).replace(/-(\w)/g, (_, c) => c.toUpperCase());
+function tornEdgesOnDetach(i, o) {
+  const col = i % o.columns;
+  const row = Math.floor(i / o.columns);
+  return {
+    top: row > 0 ? "torn" : "intact",
+    bottom: row < o.rows - 1 ? "torn" : "intact",
+    left: col > 0 ? "torn" : "intact",
+    right: col < o.columns - 1 ? "torn" : "intact"
+  };
 }
 
 // src/stage/path.ts
@@ -5619,228 +5400,249 @@ registerLayout(rack);
 registerLayout(colonnade);
 registerLayout(sheet);
 
-// src/content/backing.ts
-function silhouetteRects(o, count) {
-  const { width, height } = sheetBackingSize(o);
-  const rects = [];
-  for (let i = 0; i < count; i++) {
-    const { x, y } = sheetSlotXY(i, o);
-    rects.push({
-      x: (x - o.cellWidth / 2 + width / 2) / width,
-      // World y up → canvas y down.
-      y: (height / 2 - y - o.cellHeight / 2) / height,
-      w: o.cellWidth / width,
-      h: o.cellHeight / height
-    });
+// src/PaperField.tsx
+import * as THREE15 from "three";
+import { gsap as gsap5 } from "gsap";
+import { Canvas, useFrame as useFrame5, useThree as useThree4 } from "@react-three/fiber";
+import { forwardRef as forwardRef2, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef8 } from "react";
+
+// src/field/slots.ts
+var EMPTY_SET = /* @__PURE__ */ new Set();
+function effectiveFieldPapers(papers, images) {
+  if (papers) return papers;
+  if (images) {
+    return images.map((src) => ({
+      content: { type: "image", src, fit: "cover" }
+    }));
   }
-  return rects;
-}
-function lightenHex(hex, amount) {
-  const n = parseInt(hex.replace("#", ""), 16);
-  const ch = (shift) => {
-    const c = n >> shift & 255;
-    return Math.min(255, Math.round(c + (255 - c) * amount));
-  };
-  return `#${(ch(16) << 16 | ch(8) << 8 | ch(0)).toString(16).padStart(6, "0")}`;
+  return Array.from({ length: 12 }, () => ({}));
 }
-function drawBacking(canvas, spec) {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return;
-  const { width: cw, height: chh } = canvas;
-  ctx.fillStyle = spec.tint;
-  ctx.fillRect(0, 0, cw, chh);
-  const rects = silhouetteRects(spec.options, spec.count);
-  rects.forEach((r, i) => {
-    const removed = spec.removed.has(i);
-    const x = r.x * cw;
-    const y = r.y * chh;
-    const w = r.w * cw;
-    const h = r.h * chh;
-    const radius = Math.min(w, h) * 0.06;
-    ctx.fillStyle = lightenHex(spec.tint, removed ? 0.5 : 0.07);
-    roundedRect(ctx, x, y, w, h, radius);
-    ctx.fill();
-    if (removed) {
-      const sheen = ctx.createLinearGradient(x, y, x + w, y + h);
-      sheen.addColorStop(0, "rgba(255,255,255,0)");
-      sheen.addColorStop(0.5, "rgba(255,255,255,0.35)");
-      sheen.addColorStop(1, "rgba(255,255,255,0)");
-      ctx.fillStyle = sheen;
-      roundedRect(ctx, x, y, w, h, radius);
-      ctx.fill();
+function groupFieldPapers(papers, fallback) {
+  const groups = /* @__PURE__ */ new Map();
+  papers.forEach((slot, i) => {
+    const config = resolveConfig({ preset: slot.preset ?? fallback });
+    const key = JSON.stringify(config);
+    let group = groups.get(key);
+    if (!group) {
+      group = { config, indices: [], contents: [] };
+      groups.set(key, group);
     }
+    group.indices.push(i);
+    group.contents.push(slot.content ? contentSchema.parse(slot.content) : config.content);
   });
+  return [...groups.values()];
 }
-function roundedRect(ctx, x, y, w, h, r) {
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + w, y, x + w, y + h, r);
-  ctx.arcTo(x + w, y + h, x, y + h, r);
-  ctx.arcTo(x, y + h, x, y, r);
-  ctx.arcTo(x, y, x + w, y, r);
-  ctx.closePath();
+function fieldIsInteractive(papers, fallback, explicit) {
+  if (explicit !== void 0) return explicit;
+  return papers.some((s) => s.states) || groupFieldPapers(papers, fallback).some((g) => Boolean(g.config.states));
 }
-
-// src/field/keyboardMirror.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function fieldKeyboardStep(carry2, slot, key, controller) {
-  if (!carry2) {
-    if (key === "Enter" || key === " ") {
-      return { carry: controller.pick(slot) ? { slot, zoneIndex: 0 } : null, handled: true };
-    }
-    return { carry: carry2, handled: false };
-  }
-  if (carry2.slot !== slot) return { carry: carry2, handled: false };
-  const zoneCount = Math.max(controller.zoneIds().length, 1);
-  if (key === "ArrowRight" || key === "ArrowDown") {
-    return { carry: { ...carry2, zoneIndex: (carry2.zoneIndex + 1) % zoneCount }, handled: true };
-  }
-  if (key === "ArrowLeft" || key === "ArrowUp") {
-    return {
-      carry: { ...carry2, zoneIndex: (carry2.zoneIndex - 1 + zoneCount) % zoneCount },
-      handled: true
-    };
-  }
-  if (key === "Enter" || key === " ") {
-    const zone = controller.zoneIds()[carry2.zoneIndex];
-    if (zone) controller.placeAtZone(slot, zone);
-    return { carry: null, handled: true };
+function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions) {
+  let config = resolveConfig({ preset: slot.preset ?? fallback });
+  const patch = {};
+  if (slot.content) patch.content = slot.content;
+  if (slot.states) patch.states = slot.states;
+  if (layoutId === "sheet" && config.behavior?.type === "peel" && config.behavior.corner === "auto") {
+    const o = sheetLayoutSchema.parse(layoutOptions);
+    patch.behavior = { corner: outwardCorner(index, o) };
   }
-  if (key === "Escape") {
-    controller.cancel(slot);
-    return { carry: null, handled: true };
+  if (Object.keys(patch).length > 0) {
+    config = paperConfigSchema.parse(mergeConfig(config, patch));
   }
-  return { carry: carry2, handled: false };
+  return config;
 }
-var mirrorHidden = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
-function FieldKeyboardMirror({
-  papers,
-  controller
-}) {
-  const [carrying, setCarrying] = useState5(null);
-  const paperLabel = (slot, i) => {
-    try {
-      const config = resolveConfig({ preset: slot.preset });
-      const content = slot.content ? contentSchema.parse(slot.content) : config.content;
-      return `Paper ${i + 1}: ${contentText({ ...config, content })}`;
-    } catch {
-      return `Paper ${i + 1}`;
+
+// src/field/fieldGroup.tsx
+import * as THREE12 from "three";
+import { gsap as gsap3 } from "gsap";
+import { useFrame as useFrame3 } from "@react-three/fiber";
+import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6 } from "react";
+import CustomShaderMaterial2 from "three-custom-shader-material";
+
+// src/content/atlas.ts
+import * as THREE11 from "three";
+import { useEffect as useEffect8, useState as useState4 } from "react";
+var MAX_ATLAS = 4096;
+function atlasGrid(count, aspect = 1) {
+  const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count * Math.max(aspect, 0.01)))));
+  return { cols, rows: Math.max(1, Math.ceil(count / cols)) };
+}
+function useContentAtlas(contents, sheet2, stock) {
+  const [atlas, setAtlas] = useState4(null);
+  const stableContents = useStable(contents);
+  useEffect8(() => {
+    let disposed = false;
+    const aspect = sheet2.height / sheet2.width;
+    const { cols, rows } = atlasGrid(contents.length, aspect);
+    let tileW = Math.min(1024, Math.floor(MAX_ATLAS / cols));
+    let tileH = Math.round(tileW * aspect);
+    if (tileH * rows > MAX_ATLAS) {
+      tileH = Math.floor(MAX_ATLAS / rows);
+      tileW = Math.max(1, Math.round(tileH / aspect));
     }
-  };
-  const onKeyDown = (i) => (e) => {
-    const ctl = controller.current;
-    if (!ctl) return;
-    const { carry: carry2, handled } = fieldKeyboardStep(carrying, i, e.key, ctl);
-    if (handled) e.preventDefault();
-    if (carry2 !== carrying) setCarrying(carry2);
-  };
-  return /* @__PURE__ */ jsxs4("fieldset", { style: mirrorHidden, children: [
-    /* @__PURE__ */ jsx7("legend", { children: "Interactive papers" }),
-    papers.map((slot, i) => /* @__PURE__ */ jsxs4(
-      "button",
-      {
-        type: "button",
-        onKeyDown: onKeyDown(i),
-        "aria-label": paperLabel(slot, i),
-        "aria-pressed": carrying?.slot === i,
-        children: [
-          paperLabel(slot, i),
-          carrying?.slot === i && /* @__PURE__ */ jsxs4("span", { "aria-live": "polite", children: [
-            " ",
-            "\u2014 carrying; zone ",
-            controller.current?.zoneIds()[carrying.zoneIndex] ?? "none",
-            "; Enter places, Escape returns"
-          ] })
-        ]
-      },
-      i
-    ))
-  ] });
+    const canvas = document.createElement("canvas");
+    canvas.width = tileW * cols;
+    canvas.height = tileH * rows;
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = stock.color;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const texture = new THREE11.CanvasTexture(canvas);
+    texture.colorSpace = THREE11.SRGBColorSpace;
+    texture.anisotropy = 4;
+    setAtlas({ texture, cols, rows });
+    const drawTile = (index, tile) => {
+      if (disposed) return;
+      const x = index % cols * tileW;
+      const y = Math.floor(index / cols) * tileH;
+      ctx.drawImage(tile, x, y, tileW, tileH);
+      texture.needsUpdate = true;
+    };
+    contents.forEach((content, index) => {
+      if (content.type === "image") {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => drawTile(index, renderContentToCanvas(content, sheet2, stock, img));
+        img.src = content.src;
+      } else if (content.type === "text" || content.type === "receipt") {
+        document.fonts.ready.then(() => drawTile(index, renderContentToCanvas(content, sheet2, stock)));
+      } else {
+        drawTile(index, renderContentToCanvas(content, sheet2, stock));
+      }
+    });
+    return () => {
+      disposed = true;
+      texture.dispose();
+    };
+  }, [stableContents, sheet2.width, sheet2.height, stock.id]);
+  return atlas;
 }
 
-// src/field/framing.ts
-var PHASE_SAMPLES = 8;
-function resolveLayoutOptions(layoutId, layout, propOptions, firstSheet) {
-  const parsed = layout.optionsSchema.parse({
-    ...layout.defaults,
-    ...propOptions
-  });
-  if (layoutId !== "sheet") return parsed;
-  return withSheetCellFromPaper(
-    parsed,
-    propOptions,
-    firstSheet
-  );
+// src/field/compose.ts
+function glslType(value) {
+  if (typeof value === "number") return "float";
+  return ["float", "vec2", "vec3", "vec4"][value.length - 1];
 }
-function fieldBounds(layout, n, options, sheet2) {
-  const reach = Math.hypot(sheet2.width, sheet2.height) / 2;
-  if (n <= 0) return { center: [0, 0, 0], half: [reach, reach, 0] };
-  const min = [Infinity, Infinity, Infinity];
-  const max = [-Infinity, -Infinity, -Infinity];
-  for (let s = 0; s < PHASE_SAMPLES; s++) {
-    for (let i = 0; i < n; i++) {
-      const pose = layout.pose(i, n, options, s / PHASE_SAMPLES, sheet2);
-      const r = reach * Math.max(pose.scale, 0);
-      for (let axis = 0; axis < 3; axis++) {
-        min[axis] = Math.min(min[axis], pose.position[axis] - r);
-        max[axis] = Math.max(max[axis], pose.position[axis] + r);
-      }
-    }
-  }
-  return {
-    center: [(min[0] + max[0]) / 2, (min[1] + max[1]) / 2, (min[2] + max[2]) / 2],
-    half: [(max[0] - min[0]) / 2, (max[1] - min[1]) / 2, (max[2] - min[2]) / 2]
-  };
+function stackUniformValues(stack, sheet2) {
+  const uniforms = { uSheet: [sheet2.width, sheet2.height] };
+  stack.forEach((instance, i) => {
+    if (instance.enabled === false) return;
+    const deformer = getDeformer(instance.type);
+    if (!deformer.glsl) return;
+    const ns = `u${cap(instance.type)}${i}_`;
+    const values = deformer.glsl.uniforms(instance.options);
+    for (const [key, value] of Object.entries(values)) uniforms[ns + key] = value;
+  });
+  return uniforms;
 }
-var LIFT = 0.11;
-var DEG8 = Math.PI / 180;
-function fitCamera(layout, n, options, sheet2, fovDeg, aspect, margin = 1.06) {
-  const { center } = fieldBounds(layout, n, options, sheet2);
-  const reach = Math.hypot(sheet2.width, sheet2.height) / 2 * margin;
-  const vTan = Math.tan(fovDeg * DEG8 / 2);
-  const hTan = vTan * Math.max(aspect, 0.01);
-  let distance = 0.1;
-  for (let s = 0; s < PHASE_SAMPLES; s++) {
-    for (let i = 0; i < Math.max(n, 0); i++) {
-      const pose = layout.pose(i, n, options, s / PHASE_SAMPLES, sheet2);
-      const r = reach * Math.max(pose.scale, 0);
-      const depth = pose.position[2] - center[2];
-      distance = Math.max(
-        distance,
-        (Math.abs(pose.position[0] - center[0]) + r) / hTan + depth,
-        (Math.abs(pose.position[1] - center[1]) + r) / vTan + depth
+function buildDisplacementGLSL(stack, sheet2) {
+  const decls = ["uniform vec2 uSheet;", "float plBias = 1.0;"];
+  const functions = [];
+  const calls = [];
+  const uniforms = { uSheet: [sheet2.width, sheet2.height] };
+  stack.forEach((instance, i) => {
+    if (instance.enabled === false) return;
+    const deformer = getDeformer(instance.type);
+    if (!deformer.glsl) {
+      throw new Error(
+        `[paperlab] Deformer "${instance.type}" has no GLSL implementation \u2014 it can't run in field mode.`
       );
     }
+    const ns = `u${cap(instance.type)}${i}_`;
+    const fn = `pl_${instance.type}${i}`;
+    const values = deformer.glsl.uniforms(instance.options);
+    for (const [key, value] of Object.entries(values)) {
+      decls.push(`uniform ${glslType(value)} ${ns}${key};`);
+      uniforms[ns + key] = value;
+    }
+    const strength = deformer.glsl.strength;
+    functions.push(
+      deformer.glsl.chunk.replaceAll("FN", fn).replace(
+        /U_(\w+)/g,
+        (_, name) => (
+          // The strength uniform reads through the per-instance bias, so one
+          // instanced draw call can bend every sheet by a different amount.
+          name === strength ? `(${ns}${name} * plBias)` : ns + name
+        )
+      )
+    );
+    calls.push(`${fn}(q, uv, t);`);
+  });
+  const displaceSrc = (
+    /* glsl */
+    `
+vec3 plDisplace(vec3 p, vec2 uv, float t, float bias) {
+  plBias = bias;
+  vec3 q = p;
+  ${calls.join("\n  ")}
+  return q;
+}
+`
+  );
+  return { functionsSrc: `${decls.join("\n")}
+${functions.join("\n")}`, displaceSrc, uniforms };
+}
+function buildFieldVertexShader(composed) {
+  return (
+    /* glsl */
+    `
+uniform float uPlTime;
+attribute float aPhase;
+attribute float aAtlas;
+attribute float aBias;
+varying vec2 vPaperUv;
+varying float vAtlas;
+${TRANSLUCENCY_VARYINGS}
+${composed.functionsSrc}
+${composed.displaceSrc}
+void main() {
+  float t = uPlTime + aPhase;
+  vec3 p = plDisplace(position, uv, t, aBias);
+  vec2 step = uSheet * 0.01;
+  vec3 px = plDisplace(position + vec3(step.x, 0.0, 0.0), uv + vec2(0.01, 0.0), t, aBias);
+  vec3 py = plDisplace(position + vec3(0.0, step.y, 0.0), uv + vec2(0.0, 0.01), t, aBias);
+  vec3 n = cross(px - p, py - p);
+  csm_Normal = length(n) > 1e-12 ? normalize(n) : vec3(0.0, 0.0, 1.0);
+  csm_Position = p;
+${translucencyVertexChunk({ model: "modelMatrix * instanceMatrix", position: "p", normal: "csm_Normal" })}
+  vPaperUv = uv;
+  vAtlas = aAtlas;
+}
+`
+  );
+}
+function buildFieldFragmentShader() {
+  return (
+    /* glsl */
+    `
+uniform sampler2D uAtlas;
+uniform vec2 uAtlasGrid;
+uniform float uBackDarken;
+uniform vec3 uStockColor;
+uniform float uShowThrough;
+varying vec2 vPaperUv;
+varying float vAtlas;
+${TRANSLUCENCY_FRAGMENT}
+void main() {
+  float col = mod(vAtlas, uAtlasGrid.x);
+  float row = floor(vAtlas / uAtlasGrid.x);
+  vec2 tiled = (vPaperUv + vec2(col, uAtlasGrid.y - 1.0 - row)) / uAtlasGrid;
+  vec4 front = texture2D(uAtlas, tiled);
+  if (gl_FrontFacing) {
+    csm_DiffuseColor = front;
+  } else {
+    csm_DiffuseColor = vec4(uStockColor * mix(vec3(1.0), front.rgb, uShowThrough), 1.0);
+    csm_DiffuseColor.rgb *= uBackDarken;
   }
-  return {
-    position: [center[0], center[1] + distance * LIFT, center[2] + distance],
-    target: center
-  };
+  // Light coming through the sheet, filtered by what is printed on it. Same
+  // ink either side \u2014 the light passes through the same fibres regardless of
+  // which face happens to be turned toward the camera.
+  csm_Emissive = plTransmission(front.rgb);
+}
+`
+  );
+}
+function cap(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1).replace(/-(\w)/g, (_, c) => c.toUpperCase());
 }
-
-// src/PaperField.tsx
-import * as THREE15 from "three";
-import { gsap as gsap5 } from "gsap";
-import { Canvas, useFrame as useFrame5, useThree as useThree4 } from "@react-three/fiber";
-import { forwardRef as forwardRef2, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef8 } from "react";
-
-// src/field/fieldGroup.tsx
-import * as THREE12 from "three";
-import { gsap as gsap3 } from "gsap";
-import { useFrame as useFrame3 } from "@react-three/fiber";
-import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6 } from "react";
-import CustomShaderMaterial2 from "three-custom-shader-material";
 
 // src/field/stack.ts
 function fieldShapeStack(config, progress) {
@@ -5852,7 +5654,7 @@ function fieldShapeStack(config, progress) {
 }
 
 // src/field/fieldGroup.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var scratchObj = new THREE12.Object3D();
 var scratchAero = { position: [0, 0, 0], rotation: [0, 0, 0] };
 var FIELD_SEGMENT_CAP = 48;
@@ -6055,7 +5857,7 @@ function FieldGroup({
   });
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: An R3F <instancedMesh> is a three.js object, not a DOM node — it has no role to give and no keyboard to receive. The keyboard route into the same action is on the canvas, which `useWalk` makes focusable and drives with the arrow keys.
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       "instancedMesh",
       {
         ref: meshRef,
@@ -6071,7 +5873,7 @@ function FieldGroup({
           event.stopPropagation();
           onSelect(paper);
         }),
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx7(
           CustomShaderMaterial2,
           {
             baseMaterial: THREE12.MeshStandardMaterial,
@@ -6128,7 +5930,71 @@ var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
 // src/field/backingSheet.tsx
 import * as THREE13 from "three";
 import { useEffect as useEffect10, useMemo as useMemo7 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/content/backing.ts
+function silhouetteRects(o, count) {
+  const { width, height } = sheetBackingSize(o);
+  const rects = [];
+  for (let i = 0; i < count; i++) {
+    const { x, y } = sheetSlotXY(i, o);
+    rects.push({
+      x: (x - o.cellWidth / 2 + width / 2) / width,
+      // World y up → canvas y down.
+      y: (height / 2 - y - o.cellHeight / 2) / height,
+      w: o.cellWidth / width,
+      h: o.cellHeight / height
+    });
+  }
+  return rects;
+}
+function lightenHex(hex, amount) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  const ch = (shift) => {
+    const c = n >> shift & 255;
+    return Math.min(255, Math.round(c + (255 - c) * amount));
+  };
+  return `#${(ch(16) << 16 | ch(8) << 8 | ch(0)).toString(16).padStart(6, "0")}`;
+}
+function drawBacking(canvas, spec) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const { width: cw, height: chh } = canvas;
+  ctx.fillStyle = spec.tint;
+  ctx.fillRect(0, 0, cw, chh);
+  const rects = silhouetteRects(spec.options, spec.count);
+  rects.forEach((r, i) => {
+    const removed = spec.removed.has(i);
+    const x = r.x * cw;
+    const y = r.y * chh;
+    const w = r.w * cw;
+    const h = r.h * chh;
+    const radius = Math.min(w, h) * 0.06;
+    ctx.fillStyle = lightenHex(spec.tint, removed ? 0.5 : 0.07);
+    roundedRect(ctx, x, y, w, h, radius);
+    ctx.fill();
+    if (removed) {
+      const sheen = ctx.createLinearGradient(x, y, x + w, y + h);
+      sheen.addColorStop(0, "rgba(255,255,255,0)");
+      sheen.addColorStop(0.5, "rgba(255,255,255,0.35)");
+      sheen.addColorStop(1, "rgba(255,255,255,0)");
+      ctx.fillStyle = sheen;
+      roundedRect(ctx, x, y, w, h, radius);
+      ctx.fill();
+    }
+  });
+}
+function roundedRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+// src/field/backingSheet.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var BACKING_TINT = "#f3ecdd";
 function BackingSheet({
   options,
@@ -6152,9 +6018,9 @@ function BackingSheet({
     texture.needsUpdate = true;
   }, [canvas, texture, JSON.stringify(options), count, removedKey]);
   useEffect10(() => () => texture?.dispose(), [texture]);
-  return /* @__PURE__ */ jsxs5("mesh", { receiveShadow: true, children: [
-    /* @__PURE__ */ jsx9("planeGeometry", { args: [width, height] }),
-    /* @__PURE__ */ jsx9("meshStandardMaterial", { map: texture, color: "#ffffff", roughness: 0.92, metalness: 0 })
+  return /* @__PURE__ */ jsxs4("mesh", { receiveShadow: true, children: [
+    /* @__PURE__ */ jsx8("planeGeometry", { args: [width, height] }),
+    /* @__PURE__ */ jsx8("meshStandardMaterial", { map: texture, color: "#ffffff", roughness: 0.92, metalness: 0 })
   ] });
 }
 
@@ -6162,8 +6028,8 @@ function BackingSheet({
 import * as THREE14 from "three";
 import { gsap as gsap4 } from "gsap";
 import { useFrame as useFrame4, useThree as useThree3 } from "@react-three/fiber";
-import { useContext as useContext3, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useContext as useContext3, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef7, useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var PICK_BEHAVIORS = /* @__PURE__ */ new Set(["peel", "carry"]);
 function InteractiveField(props) {
   const { papers, fallback, layoutId, layoutOptions, sheetOptions } = props;
@@ -6175,9 +6041,9 @@ function InteractiveField(props) {
   const camera = useThree3((s) => s.camera);
   const gl = useThree3((s) => s.gl);
   const controls = useThree3((s) => s.controls);
-  const [removed, setRemoved] = useState6(EMPTY_SET);
-  const [slotPatches, setSlotPatches] = useState6({});
-  const [slotStates, setSlotStates] = useState6({});
+  const [removed, setRemoved] = useState5(EMPTY_SET);
+  const [slotPatches, setSlotPatches] = useState5({});
+  const [slotStates, setSlotStates] = useState5({});
   const slotConfigs = useMemo8(
     () => papers.map((slot, i) => {
       const config = resolveFieldSlotConfig(slot, fallback, i, layoutId, layoutOptions);
@@ -6470,12 +6336,12 @@ function InteractiveField(props) {
       ref.current = null;
     };
   }, [props.a11yRef]);
-  return /* @__PURE__ */ jsxs6("group", { children: [
-    sheetOptions?.backing && /* @__PURE__ */ jsx10(BackingSheet, { options: sheetOptions, count: total, removed }),
-    (props.zones ?? []).map((zone) => /* @__PURE__ */ jsx10(DropZoneVisual, { registry: registry4, config: zone }, zone.id)),
+  return /* @__PURE__ */ jsxs5("group", { children: [
+    sheetOptions?.backing && /* @__PURE__ */ jsx9(BackingSheet, { options: sheetOptions, count: total, removed }),
+    (props.zones ?? []).map((zone) => /* @__PURE__ */ jsx9(DropZoneVisual, { registry: registry4, config: zone }, zone.id)),
     slotConfigs.map((config, i) => {
       const pose = poses[i];
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx9(
         "group",
         {
           ref: (g) => {
@@ -6490,7 +6356,7 @@ function InteractiveField(props) {
             if (!hit) return;
             pressRef.current = { slot: i, pointerId: e.pointerId, startX: hit[0], startY: hit[1] };
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx9(
             PaperMesh,
             {
               ref: (h) => {
@@ -6508,6 +6374,154 @@ function InteractiveField(props) {
   ] });
 }
 
+// src/field/keyboardMirror.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function fieldKeyboardStep(carry2, slot, key, controller) {
+  if (!carry2) {
+    if (key === "Enter" || key === " ") {
+      return { carry: controller.pick(slot) ? { slot, zoneIndex: 0 } : null, handled: true };
+    }
+    return { carry: carry2, handled: false };
+  }
+  if (carry2.slot !== slot) return { carry: carry2, handled: false };
+  const zoneCount = Math.max(controller.zoneIds().length, 1);
+  if (key === "ArrowRight" || key === "ArrowDown") {
+    return { carry: { ...carry2, zoneIndex: (carry2.zoneIndex + 1) % zoneCount }, handled: true };
+  }
+  if (key === "ArrowLeft" || key === "ArrowUp") {
+    return {
+      carry: { ...carry2, zoneIndex: (carry2.zoneIndex - 1 + zoneCount) % zoneCount },
+      handled: true
+    };
+  }
+  if (key === "Enter" || key === " ") {
+    const zone = controller.zoneIds()[carry2.zoneIndex];
+    if (zone) controller.placeAtZone(slot, zone);
+    return { carry: null, handled: true };
+  }
+  if (key === "Escape") {
+    controller.cancel(slot);
+    return { carry: null, handled: true };
+  }
+  return { carry: carry2, handled: false };
+}
+var mirrorHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function FieldKeyboardMirror({
+  papers,
+  controller
+}) {
+  const [carrying, setCarrying] = useState6(null);
+  const paperLabel = (slot, i) => {
+    try {
+      const config = resolveConfig({ preset: slot.preset });
+      const content = slot.content ? contentSchema.parse(slot.content) : config.content;
+      return `Paper ${i + 1}: ${contentText({ ...config, content })}`;
+    } catch {
+      return `Paper ${i + 1}`;
+    }
+  };
+  const onKeyDown = (i) => (e) => {
+    const ctl = controller.current;
+    if (!ctl) return;
+    const { carry: carry2, handled } = fieldKeyboardStep(carrying, i, e.key, ctl);
+    if (handled) e.preventDefault();
+    if (carry2 !== carrying) setCarrying(carry2);
+  };
+  return /* @__PURE__ */ jsxs6("fieldset", { style: mirrorHidden, children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Interactive papers" }),
+    papers.map((slot, i) => /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        onKeyDown: onKeyDown(i),
+        "aria-label": paperLabel(slot, i),
+        "aria-pressed": carrying?.slot === i,
+        children: [
+          paperLabel(slot, i),
+          carrying?.slot === i && /* @__PURE__ */ jsxs6("span", { "aria-live": "polite", children: [
+            " ",
+            "\u2014 carrying; zone ",
+            controller.current?.zoneIds()[carrying.zoneIndex] ?? "none",
+            "; Enter places, Escape returns"
+          ] })
+        ]
+      },
+      i
+    ))
+  ] });
+}
+
+// src/field/framing.ts
+var PHASE_SAMPLES = 8;
+function resolveLayoutOptions(layoutId, layout, propOptions, firstSheet) {
+  const parsed = layout.optionsSchema.parse({
+    ...layout.defaults,
+    ...propOptions
+  });
+  if (layoutId !== "sheet") return parsed;
+  return withSheetCellFromPaper(
+    parsed,
+    propOptions,
+    firstSheet
+  );
+}
+function fieldBounds(layout, n, options, sheet2) {
+  const reach = Math.hypot(sheet2.width, sheet2.height) / 2;
+  if (n <= 0) return { center: [0, 0, 0], half: [reach, reach, 0] };
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+  for (let s = 0; s < PHASE_SAMPLES; s++) {
+    for (let i = 0; i < n; i++) {
+      const pose = layout.pose(i, n, options, s / PHASE_SAMPLES, sheet2);
+      const r = reach * Math.max(pose.scale, 0);
+      for (let axis = 0; axis < 3; axis++) {
+        min[axis] = Math.min(min[axis], pose.position[axis] - r);
+        max[axis] = Math.max(max[axis], pose.position[axis] + r);
+      }
+    }
+  }
+  return {
+    center: [(min[0] + max[0]) / 2, (min[1] + max[1]) / 2, (min[2] + max[2]) / 2],
+    half: [(max[0] - min[0]) / 2, (max[1] - min[1]) / 2, (max[2] - min[2]) / 2]
+  };
+}
+var LIFT = 0.11;
+var DEG8 = Math.PI / 180;
+function fitCamera(layout, n, options, sheet2, fovDeg, aspect, margin = 1.06) {
+  const { center } = fieldBounds(layout, n, options, sheet2);
+  const reach = Math.hypot(sheet2.width, sheet2.height) / 2 * margin;
+  const vTan = Math.tan(fovDeg * DEG8 / 2);
+  const hTan = vTan * Math.max(aspect, 0.01);
+  let distance = 0.1;
+  for (let s = 0; s < PHASE_SAMPLES; s++) {
+    for (let i = 0; i < Math.max(n, 0); i++) {
+      const pose = layout.pose(i, n, options, s / PHASE_SAMPLES, sheet2);
+      const r = reach * Math.max(pose.scale, 0);
+      const depth = pose.position[2] - center[2];
+      distance = Math.max(
+        distance,
+        (Math.abs(pose.position[0] - center[0]) + r) / hTan + depth,
+        (Math.abs(pose.position[1] - center[1]) + r) / vTan + depth
+      );
+    }
+  }
+  return {
+    position: [center[0], center[1] + distance * LIFT, center[2] + distance],
+    target: center
+  };
+}
+
 // src/PaperField.tsx
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var PaperFieldMesh = forwardRef2(
@@ -6854,63 +6868,18 @@ export {
   spanAlong,
   segmentsForArc,
   segmentsForSine,
-  cornerNames,
-  curlOptionsSchema,
-  curl,
-  peelOptionsSchema,
-  peel,
-  unrollOptionsSchema,
-  unroll,
-  flipOptionsSchema,
-  flip,
-  letterFoldOptionsSchema,
-  letterFold,
-  hangOptionsSchema,
-  hang,
-  flyOptionsSchema,
-  fly,
-  fallOptionsSchema,
-  fall,
-  carryOptionsSchema,
-  carry,
-  dampTo,
-  gust,
-  flightPose,
-  carryDrive,
-  flightOptionsSchema,
-  flight,
-  crumpleBehaviorOptionsSchema,
-  crumpleBehavior,
-  settleOptionsSchema,
-  settle,
-  ribbonOptionsSchema,
-  ribbon,
-  sheetSchema,
   stockNames,
-  stockSchema,
-  backContentSchema,
-  cardContentSchema,
-  receiptContentSchema,
-  contentSchema,
   paperEdges,
-  surfaceSchema,
   behaviorConfigSchema,
-  deformerInstanceSchema,
   physicsNames,
   clothConfigSchema,
-  physicsSchema,
   lightingNames,
-  filmNames,
-  sceneSchema,
   coreStateNames,
-  stateTransitionSchema,
   stateDefSchema,
   paperStatesSchema,
   paperConfigSchema,
   parsePreset,
   serializePreset,
-  resolveSegments,
-  createSheetGeometry,
   stocks,
   getStock,
   getPreset,
@@ -6919,111 +6888,40 @@ export {
   isBuiltinPreset,
   listPresets,
   uniquePresetName,
-  receiptTotals,
-  barcodeBars,
   wrapLines,
-  rollOptionsSchema,
-  roll,
-  bendOptionsSchema,
-  bend,
-  foldOptionsSchema,
-  fold,
-  waveOptionsSchema,
-  wave,
-  drapeOptionsSchema,
-  drape,
-  crumpleOptionsSchema,
-  crumple,
   registerDeformer,
   getDeformer,
   listDeformers,
-  resolveDeformerStack,
-  applyDeformerStack,
   displacePoint,
-  stackMinSegments,
-  stackAutoSegments,
   registerBehavior,
   getBehavior,
   listBehaviors,
   idleNames,
-  idlePresets,
-  getIdlePreset,
-  ClothSim,
-  lightingPresets,
-  getLightingPreset,
   lightSchema,
   lightAngles,
-  lightPosition,
   resolveLighting,
-  TRANSMISSION_GAIN,
-  translucencyValues,
-  translucencyUniforms,
-  composeSurface,
   LightRig,
-  PaperMaterial,
   usePrefersReducedMotion,
   supportsWebGL,
-  contentText,
   PaperMirror,
   PaperFallback,
-  ON_TWOS_FPS,
-  quantizeTime,
-  quantizeProgress,
-  stateEventTransitions,
-  stripStates,
   resolveStateConfig,
   recordStateOverride,
-  flattenNumeric,
-  PaperStateMachine,
   usePaperStates,
   useResolvedConfig,
   resolveConfig,
   PaperMesh,
   cssColorOr,
-  makeGoboTexture,
   PaperLighting,
-  DropZoneRegistry,
-  zoneAccepts,
   DropZone,
   sheetLayoutSchema,
-  SHEET_LIFT,
-  withSheetCellFromPaper,
-  sheetSlotXY,
-  sheetBackingSize,
-  outwardCorner,
-  tornEdgesOnDetach,
-  groupFieldPapers,
-  resolveFieldSlotConfig,
-  atlasGrid,
-  useContentAtlas,
-  stackUniformValues,
   buildDisplacementGLSL,
-  buildFieldVertexShader,
-  buildFieldFragmentShader,
   walkPathSchema,
   createWalkPath,
   getWalkPath,
-  ring,
-  fan,
-  spread,
-  pile,
-  wall,
-  spill,
-  sweep,
-  book,
-  accordion,
-  rack,
-  colonnade,
-  sheet,
   registerLayout,
   getLayout,
   listLayouts,
-  silhouetteRects,
-  lightenHex,
-  drawBacking,
-  fieldKeyboardStep,
-  fieldBounds,
-  fitCamera,
   PaperFieldMesh,
   PaperField,
   diffConfig,
@@ -7032,4 +6930,4 @@ export {
   describeConfig,
   buildAgentPayload
 };
-//# sourceMappingURL=chunk-XE4E43MD.js.map
+//# sourceMappingURL=chunk-4ZU5DZEF.js.map