paperlab 0.4.0 → 0.5.1

package/dist/index.cjs

@@ -36,17 +36,21 @@ __export(index_exports, {
   LightRig: () => LightRig,
   PARITY_EPSILON: () => PARITY_EPSILON,
   Paper: () => Paper,
+  PaperBackdrop: () => PaperBackdrop,
   PaperField: () => PaperField,
   PaperFieldMesh: () => PaperFieldMesh,
   PaperLighting: () => PaperLighting,
   PaperMesh: () => PaperMesh,
   SAG_TOL: () => SAG_TOL,
+  backdropSchema: () => backdropSchema,
   behaviorConfigSchema: () => behaviorConfigSchema,
   buildAgentPayload: () => buildAgentPayload,
   buildFieldAgentPayload: () => buildFieldAgentPayload,
   buildFieldComponentSource: () => buildFieldComponentSource,
   buildJsxSnippet: () => buildJsxSnippet,
   clothConfigSchema: () => clothConfigSchema,
+  contentNames: () => contentNames,
+  contentSchemaFor: () => contentSchemaFor,
   coreStateNames: () => coreStateNames,
   describeConfig: () => describeConfig,
   describeFieldConfig: () => describeFieldConfig,
@@ -83,6 +87,7 @@ __export(index_exports, {
   resolveLighting: () => resolveLighting,
   resolveStateConfig: () => resolveStateConfig,
   runParityHarness: () => runParityHarness,
+  sceneSchema: () => sceneSchema,
   segmentsForArc: () => segmentsForArc,
   segmentsForSine: () => segmentsForSine,
   serializePreset: () => serializePreset,
@@ -96,13 +101,14 @@ __export(index_exports, {
   unregisterPreset: () => unregisterPreset,
   usePaperStates: () => usePaperStates,
   usePrefersReducedMotion: () => usePrefersReducedMotion,
+  washSchema: () => washSchema,
   wrapLines: () => wrapLines
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/Paper.tsx
-var import_fiber3 = require("@react-three/fiber");
-var import_react9 = require("react");
+var import_fiber5 = require("@react-three/fiber");
+var import_react11 = require("react");
 
 // src/PaperMesh.tsx
 var THREE7 = __toESM(require("three"), 1);
@@ -1023,6 +1029,31 @@ var stockNames = [
   "sticker"
 ];
 var stockSchema = import_zod14.z.enum(stockNames);
+var washSchema = import_zod14.z.object({
+  /** The first pigment. */
+  color: import_zod14.z.string().default("#4a5b8c").describe("color"),
+  /** The second. Blooms alternate, and overlaps multiply into a third. */
+  secondary: import_zod14.z.string().default("#b06a6a").describe("color"),
+  /** How many pools of colour. */
+  blooms: import_zod14.z.number().int().min(1).max(24).default(7),
+  /** How far a pool runs before it dries — its size against the sheet. */
+  spread: import_zod14.z.number().min(0.1).max(1).default(0.7),
+  /** Softness of the wet edge. 0 is a hard cut, 1 is a pool still moving. */
+  bleed: import_zod14.z.number().min(0).max(1).default(0.5),
+  /** How much pigment is in the water. */
+  intensity: import_zod14.z.number().min(0).max(1).default(0.55),
+  /**
+   * Edge darkening — the ring of pigment left where a pool dried.
+   *
+   * The signature of the medium, and the one thing a plain gradient cannot
+   * fake. Without it a wash reads as an airbrush.
+   */
+  edge: import_zod14.z.number().min(0).max(1).default(0.6),
+  /** Pigment settling into the tooth of the paper. */
+  granulation: import_zod14.z.number().min(0).max(1).default(0.35),
+  /** Fixed so a preset paints the same wash every time. */
+  seed: import_zod14.z.number().int().min(0).max(99).default(0)
+});
 var blankContentBase = import_zod14.z.object({
   type: import_zod14.z.literal("blank")
 });
@@ -1047,7 +1078,7 @@ var textContentBase = import_zod14.z.object({
   /** px at texture resolution (long edge = 1024 logical px before DPR). */
   size: import_zod14.z.number().min(8).max(256).default(44),
   weight: import_zod14.z.number().min(100).max(900).default(400),
-  color: import_zod14.z.string().default("#2b2620"),
+  color: import_zod14.z.string().default("#2b2620").describe("color"),
   align: import_zod14.z.enum(["left", "center", "right"]).default("left"),
   /** Fraction of the short edge. */
   padding: import_zod14.z.number().min(0).max(0.4).default(0.09),
@@ -1097,7 +1128,7 @@ var cardContentBase = import_zod14.z.object({
    * was cropped rather than as a card that was set.
    */
   size: import_zod14.z.number().min(8).max(256).default(58),
-  color: import_zod14.z.string().default("#2b2620"),
+  color: import_zod14.z.string().default("#2b2620").describe("color"),
   align: import_zod14.z.enum(["left", "center"]).default("left"),
   padding: import_zod14.z.number().min(0).max(0.4).default(0.1)
 });
@@ -1116,14 +1147,15 @@ var receiptContentBase = import_zod14.z.object({
   timestamp: import_zod14.z.string().optional(),
   footer: import_zod14.z.string().default("KEEP FOR YOUR RECORDS")
 });
+var withWash = { wash: washSchema.optional() };
 var backContentSchema = import_zod14.z.discriminatedUnion("type", [
-  blankContentBase,
-  imageContentBase,
-  textContentBase,
-  cardContentBase,
-  receiptContentBase
+  blankContentBase.extend(withWash),
+  imageContentBase.extend(withWash),
+  textContentBase.extend(withWash),
+  cardContentBase.extend(withWash),
+  receiptContentBase.extend(withWash)
 ]);
-var withBack = { back: backContentSchema.optional() };
+var withBack = { back: backContentSchema.optional(), ...withWash };
 var blankContentSchema = blankContentBase.extend(withBack);
 var imageContentSchema = imageContentBase.extend(withBack);
 var textContentSchema = textContentBase.extend(withBack);
@@ -1136,6 +1168,14 @@ var contentSchema = import_zod14.z.discriminatedUnion("type", [
   cardContentSchema,
   receiptContentSchema
 ]);
+var contentNames = contentSchema.options.map(
+  (option) => option.shape.type.value
+);
+function contentSchemaFor(type) {
+  const option = contentSchema.options.find((candidate) => candidate.shape.type.value === type);
+  if (!option) throw new Error(`Unknown content type: ${type}`);
+  return option;
+}
 var paperEdges = ["top", "right", "bottom", "left"];
 var surfaceSchema = import_zod14.z.object({
   /** Paper fiber noise, 0..1. */
@@ -1223,8 +1263,70 @@ var lightingNames = [
   "lightbox"
 ];
 var filmNames = ["agx", "neutral", "filmic"];
+var lightSchema = import_zod14.z.object({
+  /** Tone-mapping exposure — the stop the whole picture is printed at. */
+  exposure: import_zod14.z.number().min(0.1).max(4).optional(),
+  /**
+   * The tone curve — the film, where `exposure` is the stop.
+   *
+   * `filmic` is ACES, which is what every preset used to be pinned to and is
+   * kept so a scene tuned against it can say so. On near-white paper it is
+   * the wrong film: it desaturates and drags bright neutrals toward
+   * yellow-green, which is the sepia cast a lit sheet used to pick up.
+   */
+  film: import_zod14.z.enum(filmNames).optional(),
+  /** Key light strength. */
+  key: import_zod14.z.number().min(0).max(12).optional(),
+  /** Key light colour. */
+  color: import_zod14.z.string().optional().describe("color"),
+  /**
+   * Where the key stands, degrees around the vertical. 0° is straight in
+   * front of the paper (+Z, beside the camera), 90° is off to the right,
+   * and ±180° is directly behind it — which is where `nave` puts it, and
+   * why that preset is carried by light coming THROUGH the paper.
+   */
+  direction: import_zod14.z.number().min(-180).max(180).optional(),
+  /** How high the key stands, degrees above the horizon. */
+  height: import_zod14.z.number().min(-30).max(89).optional(),
+  /** Flat fill from every direction at once. Cheap, and it kills form — reach for `studio` first. */
+  ambient: import_zod14.z.number().min(0).max(2).optional(),
+  /** The room's own light: an environment map built from `sky`. Directional fill, and the only thing paper's sheen has to reflect. */
+  studio: import_zod14.z.number().min(0).max(3).optional(),
+  /** Distance haze, as a multiple of the preset's. 0 clears the air entirely; 2 halves the distance you can see. */
+  haze: import_zod14.z.number().min(0).max(3).optional()
+});
+var backdropSchema = import_zod14.z.object({
+  /** Behind everything, and behind the picture where it does not reach. */
+  color: import_zod14.z.string().default("#171717").describe("color"),
+  /** A URL, or an uploaded picture. Empty is the colour on its own. */
+  image: import_zod14.z.string().default(""),
+  fit: import_zod14.z.enum(["cover", "contain"]).default("cover"),
+  /**
+   * Toward the colour, so the paper stays the subject.
+   *
+   * A backdrop at full strength competes with the sheet in front of it —
+   * which is what a real photographer solves by putting the background out
+   * of the light, and what this solves by mixing it back toward the ground
+   * it sits on.
+   */
+  fade: import_zod14.z.number().min(0).max(1).default(0.25),
+  /** Out of focus, for the same reason. */
+  blur: import_zod14.z.number().min(0).max(1).default(0.2)
+});
 var sceneSchema = import_zod14.z.object({
-  lighting: import_zod14.z.enum(lightingNames).default("studio")
+  lighting: import_zod14.z.enum(lightingNames).default("studio"),
+  /** What is behind the sheet. Unset leaves the canvas alone. */
+  backdrop: backdropSchema.optional(),
+  /**
+   * Overrides on the named preset — the same authorable half stage mode has
+   * always had, and which a lone sheet had no way to reach.
+   *
+   * A preset was the starting point everywhere EXCEPT here: a stage could be
+   * "nave, but the sun is lower", and a `<Paper>` could only be one of seven
+   * rigs exactly as shipped. `<PaperLighting>` has taken these overrides all
+   * along; nothing was passing them.
+   */
+  light: lightSchema.default({})
 });
 var coreStateNames = ["rest", "hover", "pressed", "picked", "placed"];
 var isStateName = (s) => coreStateNames.includes(s) || s.startsWith("custom:");
@@ -1357,11 +1459,11 @@ function computeSheetNormals(geometry) {
   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;
+    const z25 = nrm[i + 2];
+    const len = Math.sqrt(x * x + y * y + z25 * z25) || 1;
     nrm[i] = x / len;
     nrm[i + 1] = y / len;
-    nrm[i + 2] = z26 / len;
+    nrm[i + 2] = z25 / len;
   }
   normalAttr.needsUpdate = true;
 }
@@ -1545,6 +1647,33 @@ var builtins = {
     behavior: { type: "letter-fold", progress: 0.4, crease: 0.3 },
     surface: { creaseLines: { angle: 0, positions: [1 / 3, 2 / 3], strength: 0.5 } }
   },
+  /**
+   * The wash, shown rather than described.
+   *
+   * A `wash` is a field on every content type, which means it is reachable
+   * from any preset and discoverable from none — a toggle three folders down
+   * is not an argument for the feature. This is the argument: type set over
+   * paint, on cotton, deckled, with the paper still showing through both.
+   */
+  "washed-letter": {
+    meta: { name: "Washed letter", tags: ["wash", "text"] },
+    // Printer stock, not vellum: vellum is translucent and takes the room's
+    // grey through the back of the sheet, which turns a wash the colour of
+    // dishwater. Pigment needs something white behind it.
+    sheet: { width: 1.05, height: 1.45 },
+    stock: "printer",
+    content: {
+      type: "text",
+      text: "Painted first,\nwritten after.",
+      font: 'Georgia, "Times New Roman", serif',
+      size: 52,
+      valign: "center",
+      align: "center",
+      wash: { color: "#5b6f9a", secondary: "#c08a86", blooms: 6, spread: 0.85, intensity: 0.5, seed: 3 }
+    },
+    behavior: { type: "peel", progress: 0.12, corner: "bottom-right", radius: 0.3 },
+    surface: { grain: 0.35, deckle: { edges: ["bottom", "right"], roughness: 0.45 } }
+  },
   "vintage-note": {
     meta: { name: "Vintage note", tags: ["aging", "text"] },
     sheet: { width: 1.1, height: 1.4 },
@@ -1985,6 +2114,109 @@ function paintCard(ctx, w, h, content, stock, dpr) {
   }
 }
 
+// src/content/wash.ts
+function mulberry32(seed) {
+  let a = seed * 1831565813 + 2654435769;
+  return () => {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function rgba(hex, alpha) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  const n = m ? Number.parseInt(m[1], 16) : 8421504;
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${Math.max(0, Math.min(1, alpha))})`;
+}
+function bloomShape(rng) {
+  return {
+    phase: [rng() * Math.PI * 2, rng() * Math.PI * 2, rng() * Math.PI * 2],
+    amp: [0.18 + rng() * 0.1, 0.09 + rng() * 0.06, 0.05 + rng() * 0.04]
+  };
+}
+function bloomPath(ctx, cx, cy, radius, shape, from = 0, to = 1) {
+  const { phase, amp } = shape;
+  const STEPS = Math.max(6, Math.round(72 * (to - from)));
+  ctx.beginPath();
+  for (let i = 0; i <= STEPS; i++) {
+    const t = (from + (to - from) * i / STEPS) * Math.PI * 2;
+    const wobble = amp[0] * Math.sin(2 * t + phase[0]) + amp[1] * Math.sin(3 * t + phase[1]) + amp[2] * Math.sin(5 * t + phase[2]);
+    const r = radius * (1 + wobble);
+    const x = cx + Math.cos(t) * r;
+    const y = cy + Math.sin(t) * r;
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  if (from === 0 && to === 1) ctx.closePath();
+}
+function canBlur(ctx) {
+  if (!("filter" in ctx)) return false;
+  const before = ctx.filter;
+  try {
+    ctx.filter = "blur(2px)";
+    const worked = ctx.filter !== "none" && ctx.filter !== before;
+    ctx.filter = before;
+    return worked;
+  } catch {
+    return false;
+  }
+}
+function paintWash(ctx, w, h, wash) {
+  const rng = mulberry32(wash.seed + 1);
+  const short = Math.min(w, h);
+  const blurs = canBlur(ctx);
+  ctx.save();
+  ctx.globalCompositeOperation = "multiply";
+  for (let i = 0; i < wash.blooms; i++) {
+    const pigment = i % 2 === 0 ? wash.color : wash.secondary;
+    const cx = (rng() * 1.5 - 0.25) * w;
+    const cy = (rng() * 1.5 - 0.25) * h;
+    const radius = short * wash.spread * (0.28 + rng() * 0.34);
+    const alpha = wash.intensity * (0.35 + rng() * 0.4);
+    const shape = bloomShape(rng);
+    ctx.save();
+    if (blurs) ctx.filter = `blur(${(2 + wash.bleed * 26) * (0.6 + rng() * 0.8)}px)`;
+    const gx = cx + (rng() - 0.5) * radius * 0.5;
+    const gy = cy + (rng() - 0.5) * radius * 0.5;
+    const grad = ctx.createRadialGradient(gx, gy, radius * 0.05, gx, gy, radius * 1.15);
+    grad.addColorStop(0, rgba(pigment, alpha * 0.55));
+    grad.addColorStop(0.62, rgba(pigment, alpha));
+    grad.addColorStop(1, rgba(pigment, alpha * 0.75));
+    ctx.fillStyle = grad;
+    bloomPath(ctx, cx, cy, radius, shape);
+    ctx.fill();
+    if (wash.edge > 0) {
+      if (blurs) ctx.filter = `blur(${(1.5 + wash.bleed * 9) * (0.6 + rng() * 0.6)}px)`;
+      ctx.lineWidth = Math.max(1, radius * (0.03 + wash.edge * 0.05));
+      const arcs = 5;
+      const overlap = 0.4 / arcs;
+      for (let a = 0; a < arcs; a++) {
+        ctx.strokeStyle = rgba(pigment, alpha * wash.edge * (0.15 + rng() * 1.05));
+        bloomPath(ctx, cx, cy, radius, shape, a / arcs, (a + 1) / arcs + overlap);
+        ctx.stroke();
+      }
+    }
+    ctx.restore();
+    if (wash.granulation > 0) {
+      ctx.save();
+      bloomPath(ctx, cx, cy, radius, shape);
+      ctx.clip();
+      const grains = Math.round(wash.granulation * 900);
+      ctx.fillStyle = rgba(pigment, wash.granulation * alpha * 0.5);
+      for (let g = 0; g < grains; g++) {
+        const a = rng() * Math.PI * 2;
+        const d = Math.sqrt(rng()) * radius;
+        const size = 1 + rng() * (short * 4e-3);
+        ctx.fillRect(cx + Math.cos(a) * d, cy + Math.sin(a) * d, size, size);
+      }
+      ctx.restore();
+    }
+  }
+  ctx.restore();
+}
+
 // src/content/texture.ts
 var LONG_EDGE = 1024;
 var DPR = 2;
@@ -2035,6 +2267,7 @@ function renderContentToCanvas(content, sheet2, stock, image) {
   canvas.height = h;
   const ctx = canvas.getContext("2d");
   paintBackground(ctx, w, h, stock);
+  if (content.wash) paintWash(ctx, w, h, content.wash);
   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);
@@ -2907,13 +3140,13 @@ var ClothSim = class {
     this.stillFrames = 0;
   }
   /** Nearest particle to a local-space point — the grab interface. */
-  grabNearest(x, y, z26) {
+  grabNearest(x, y, z25) {
     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 dz = this.positions[i * 3 + 2] - z25;
       const d = dx * dx + dy * dy + dz * dz;
       if (d < bestDist) {
         bestDist = d;
@@ -2924,15 +3157,15 @@ var ClothSim = class {
     this.wake();
     return best;
   }
-  moveGrab(x, y, z26) {
+  moveGrab(x, y, z25) {
     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.positions[i3 + 2] = z25;
     this.prev[i3] = x;
     this.prev[i3 + 1] = y;
-    this.prev[i3 + 2] = z26;
+    this.prev[i3 + 2] = z25;
     this.wake();
   }
   release() {
@@ -2968,19 +3201,19 @@ var ClothSim = class {
       }
       const x = p[i3];
       const y = p[i3 + 1];
-      const z26 = p[i3 + 2];
+      const z25 = 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;
+      const vz = (z25 - this.prev[i3 + 2]) * damping;
       this.prev[i3] = x;
       this.prev[i3 + 1] = y;
-      this.prev[i3 + 2] = z26;
+      this.prev[i3 + 2] = z25;
       p[i3] = x + vx + ax * dt2;
       p[i3 + 1] = y + vy - gravity * 3.2 * dt2;
-      p[i3 + 2] = z26 + vz + az * dt2;
+      p[i3 + 2] = z25 + vz + az * dt2;
       maxTravel = Math.max(maxTravel, vx * vx + vy * vy + vz * vz);
     }
     for (let iter = 0; iter < SOLVER_ITERATIONS; iter++) {
@@ -3037,7 +3270,6 @@ var THREE5 = __toESM(require("three"), 1);
 var THREE4 = __toESM(require("three"), 1);
 
 // src/scene/lighting.ts
-var import_zod22 = require("zod");
 var lightingPresets = {
   studio: {
     id: "studio",
@@ -3198,46 +3430,14 @@ var lightingPresets = {
 function getLightingPreset(name) {
   return lightingPresets[name];
 }
-var lightSchema = import_zod22.z.object({
-  /** Tone-mapping exposure — the stop the whole picture is printed at. */
-  exposure: import_zod22.z.number().min(0.1).max(4).optional(),
-  /**
-   * The tone curve — the film, where `exposure` is the stop.
-   *
-   * `filmic` is ACES, which is what every preset used to be pinned to and is
-   * kept so a scene tuned against it can say so. On near-white paper it is
-   * the wrong film: it desaturates and drags bright neutrals toward
-   * yellow-green, which is the sepia cast a lit sheet used to pick up.
-   */
-  film: import_zod22.z.enum(filmNames).optional(),
-  /** Key light strength. */
-  key: import_zod22.z.number().min(0).max(12).optional(),
-  /** Key light colour. */
-  color: import_zod22.z.string().optional(),
-  /**
-   * Where the key stands, degrees around the vertical. 0° is straight in
-   * front of the paper (+Z, beside the camera), 90° is off to the right,
-   * and ±180° is directly behind it — which is where `nave` puts it, and
-   * why that preset is carried by light coming THROUGH the paper.
-   */
-  direction: import_zod22.z.number().min(-180).max(180).optional(),
-  /** How high the key stands, degrees above the horizon. */
-  height: import_zod22.z.number().min(-30).max(89).optional(),
-  /** Flat fill from every direction at once. Cheap, and it kills form — reach for `studio` first. */
-  ambient: import_zod22.z.number().min(0).max(2).optional(),
-  /** The room's own light: an environment map built from `sky`. Directional fill, and the only thing paper's sheen has to reflect. */
-  studio: import_zod22.z.number().min(0).max(3).optional(),
-  /** Distance haze, as a multiple of the preset's. 0 clears the air entirely; 2 halves the distance you can see. */
-  haze: import_zod22.z.number().min(0).max(3).optional()
-});
 var DEG6 = 180 / Math.PI;
 function lightAngles(position) {
-  const [x, y, z26] = position;
-  const distance = Math.hypot(x, y, z26);
+  const [x, y, z25] = position;
+  const distance = Math.hypot(x, y, z25);
   if (distance < 1e-9) return { azimuth: 0, elevation: 90, distance: 0 };
-  const ground = Math.hypot(x, z26);
+  const ground = Math.hypot(x, z25);
   return {
-    azimuth: ground < 1e-9 ? 0 : Math.atan2(x, z26) * DEG6,
+    azimuth: ground < 1e-9 ? 0 : Math.atan2(x, z25) * DEG6,
     elevation: Math.atan2(y, ground) * DEG6,
     distance
   };
@@ -3335,8 +3535,8 @@ vec3 plTransmission(vec3 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);
+  const [x, y, z25] = preset.key.position;
+  const direction = new THREE4.Vector3(x, y, z25);
   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);
@@ -4498,6 +4698,7 @@ var PaperMesh = (0, import_react7.forwardRef)(function PaperMesh2(props, ref) {
     props.interactive && !isCloth && behavior?.handles?.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "mesh",
       {
+        userData: { paperlabChrome: true },
         ref: (m) => {
           handleRefs.current[i] = m;
         },
@@ -4641,7 +4842,7 @@ var toneMappings = {
   neutral: THREE9.NeutralToneMapping,
   filmic: THREE9.ACESFilmicToneMapping
 };
-function mulberry32(seed) {
+function mulberry322(seed) {
   let a = seed;
   return () => {
     a |= 0;
@@ -4675,7 +4876,7 @@ function makeGoboTexture(kind) {
     }
     ctx.restore();
   } else {
-    const rand = mulberry32(7);
+    const rand = mulberry322(7);
     for (const [count, radius, alpha] of [
       [26, 70, 0.75],
       [40, 38, 0.6],
@@ -4823,38 +5024,122 @@ function PaperLighting({
   ] });
 }
 
+// src/scene/backdrop.tsx
+var THREE10 = __toESM(require("three"), 1);
+var import_react9 = require("react");
+var import_fiber3 = require("@react-three/fiber");
+function PaperBackdrop({ backdrop }) {
+  const scene = (0, import_fiber3.useThree)((s) => s.scene);
+  const size = (0, import_fiber3.useThree)((s) => s.size);
+  const [image, setImage] = (0, import_react9.useState)(null);
+  const src = backdrop?.image ?? "";
+  (0, import_react9.useEffect)(() => {
+    if (!src) {
+      setImage(null);
+      return;
+    }
+    let live = true;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => live && setImage(img);
+    img.onerror = () => live && setImage(null);
+    img.src = src;
+    return () => {
+      live = false;
+    };
+  }, [src]);
+  const key = JSON.stringify({ backdrop: backdrop ?? null, w: size.width, h: size.height, loaded: !!image });
+  (0, import_react9.useEffect)(() => {
+    if (!backdrop) return;
+    const previous = scene.background;
+    const texture = paintBackdrop(backdrop, size.width, size.height, image);
+    scene.background = texture;
+    return () => {
+      scene.background = previous;
+      texture.dispose();
+    };
+  }, [key]);
+  return null;
+}
+function paintBackdrop(backdrop, width, height, image) {
+  const w = Math.max(2, Math.round(width / 2));
+  const h = Math.max(2, Math.round(height / 2));
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = backdrop.color;
+  ctx.fillRect(0, 0, w, h);
+  if (image && image.width > 0 && image.height > 0) {
+    const scale = backdrop.fit === "cover" ? Math.max(w / image.width, h / image.height) : Math.min(w / image.width, h / image.height);
+    const dw = image.width * scale;
+    const dh = image.height * scale;
+    ctx.save();
+    if (backdrop.blur > 0) ctx.filter = `blur(${backdrop.blur * Math.min(w, h) * 0.06}px)`;
+    ctx.drawImage(image, (w - dw) / 2, (h - dh) / 2, dw, dh);
+    ctx.restore();
+    if (backdrop.fade > 0) {
+      ctx.globalAlpha = backdrop.fade;
+      ctx.fillStyle = backdrop.color;
+      ctx.fillRect(0, 0, w, h);
+      ctx.globalAlpha = 1;
+    }
+  }
+  const texture = new THREE10.CanvasTexture(canvas);
+  texture.colorSpace = THREE10.SRGBColorSpace;
+  return texture;
+}
+
+// src/scene/release.tsx
+var import_fiber4 = require("@react-three/fiber");
+var import_react10 = require("react");
+function ReleaseContextOnUnmount() {
+  const gl = (0, import_fiber4.useThree)((s) => s.gl);
+  (0, import_react10.useEffect)(
+    () => () => {
+      gl.forceContextLoss();
+      gl.dispose();
+    },
+    [gl]
+  );
+  return null;
+}
+
 // src/Paper.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Paper = (0, import_react9.forwardRef)(function Paper2({ children, className, style, ...meshProps }, ref) {
+var Paper = (0, import_react11.forwardRef)(function Paper2({ children, className, style, ...meshProps }, ref) {
   const config = useResolvedConfig(meshProps);
-  const webgl = (0, import_react9.useMemo)(() => typeof window === "undefined" ? true : supportsWebGL(), []);
+  const webgl = (0, import_react11.useMemo)(() => typeof window === "undefined" ? true : supportsWebGL(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: { width: "100%", height: "100%", ...style }, children: [
-    webgl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_fiber3.Canvas, { shadows: true, camera: { position: [0, 0.35, 2.4], fov: 40 }, dpr: [1, 2], children: [
+    webgl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_fiber5.Canvas, { shadows: true, camera: { position: [0, 0.35, 2.4], fov: 40 }, dpr: [1, 2], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperBackdrop, { backdrop: config.scene.backdrop }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         PaperLighting,
         {
           preset: config.scene.lighting,
+          light: config.scene.light,
           floor: -1.05,
           scale: 8,
           reducedMotion: meshProps.reducedMotion
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperMesh, { ref, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReleaseContextOnUnmount, {})
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperFallback, { config }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperMirror, { config })
   ] });
 });
 
 // src/PaperField.tsx
-var THREE15 = __toESM(require("three"), 1);
+var THREE16 = __toESM(require("three"), 1);
 var import_gsap5 = require("gsap");
-var import_fiber6 = require("@react-three/fiber");
-var import_react16 = require("react");
+var import_fiber8 = require("@react-three/fiber");
+var import_react18 = require("react");
 
 // src/field/dropZones.tsx
-var THREE10 = __toESM(require("three"), 1);
-var import_react10 = require("react");
+var THREE11 = __toESM(require("three"), 1);
+var import_react12 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DropZoneRegistry = class {
   zones = /* @__PURE__ */ new Map();
@@ -4893,7 +5178,7 @@ var DropZoneRegistry = class {
     for (const fn of this.listeners) fn();
   }
 };
-var DropZoneContext = (0, import_react10.createContext)(null);
+var DropZoneContext = (0, import_react12.createContext)(null);
 var globCache = /* @__PURE__ */ new Map();
 var globRegExp = (glob) => {
   let re = globCache.get(glob);
@@ -4909,13 +5194,13 @@ function zoneAccepts(zone, name) {
 }
 var zoneContains = (zone, x, y) => Math.abs(x - zone.bounds.position[0]) <= zone.bounds.size[0] / 2 && Math.abs(y - zone.bounds.position[1]) <= zone.bounds.size[1] / 2;
 function DropZone(props) {
-  const registry4 = (0, import_react10.useContext)(DropZoneContext);
+  const registry4 = (0, import_react12.useContext)(DropZoneContext);
   const { id, accept, bounds, highlight = "glow", onPlace } = props;
-  const place = (0, import_react10.useRef)(onPlace);
-  (0, import_react10.useEffect)(() => {
+  const place = (0, import_react12.useRef)(onPlace);
+  (0, import_react12.useEffect)(() => {
     place.current = onPlace;
   }, [onPlace]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!registry4) return;
     return registry4.register({
       id,
@@ -4929,17 +5214,17 @@ function DropZone(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropZoneVisual, { registry: registry4, config: { id, accept, bounds, highlight } });
 }
 function DropZoneVisual({ registry: registry4, config }) {
-  (0, import_react10.useSyncExternalStore)(registry4.subscribe, registry4.getVersion, registry4.getVersion);
+  (0, import_react12.useSyncExternalStore)(registry4.subscribe, registry4.getVersion, registry4.getVersion);
   const hovered = registry4.hovered === config.id;
   const style = config.highlight ?? "glow";
   const [w, h] = config.bounds.size;
-  const edges = (0, import_react10.useMemo)(() => {
-    const plane = new THREE10.PlaneGeometry(w, h);
-    const geo = new THREE10.EdgesGeometry(plane);
+  const edges = (0, import_react12.useMemo)(() => {
+    const plane = new THREE11.PlaneGeometry(w, h);
+    const geo = new THREE11.EdgesGeometry(plane);
     plane.dispose();
     return geo;
   }, [w, h]);
-  (0, import_react10.useEffect)(() => () => edges.dispose(), [edges]);
+  (0, import_react12.useEffect)(() => () => edges.dispose(), [edges]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("group", { position: config.bounds.position, children: [
     style !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("mesh", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("planeGeometry", { args: [w, h] }),
@@ -4958,18 +5243,18 @@ function DropZoneVisual({ registry: registry4, config }) {
 }
 
 // src/field/sheetGrid.ts
-var import_zod23 = require("zod");
-var sheetLayoutSchema = import_zod23.z.object({
-  rows: import_zod23.z.number().int().min(1).max(12).default(2),
-  columns: import_zod23.z.number().int().min(1).max(12).default(5),
+var import_zod22 = require("zod");
+var sheetLayoutSchema = import_zod22.z.object({
+  rows: import_zod22.z.number().int().min(1).max(12).default(2),
+  columns: import_zod22.z.number().int().min(1).max(12).default(5),
   /** World-units gap between slots. Stamps are printed in register — no jitter. */
-  gutter: import_zod23.z.number().min(0).max(1).default(0.08),
+  gutter: import_zod22.z.number().min(0).max(1).default(0.08),
   /** Slot footprint in world units (the paper preset should match). */
-  cellWidth: import_zod23.z.number().min(0.1).max(4).default(0.72),
-  cellHeight: import_zod23.z.number().min(0.1).max(4).default(0.86),
+  cellWidth: import_zod22.z.number().min(0.1).max(4).default(0.72),
+  cellHeight: import_zod22.z.number().min(0.1).max(4).default(0.86),
   /** Render the shared backing sheet behind the grid. */
-  backing: import_zod23.z.boolean().default(true),
-  backingMargin: import_zod23.z.number().min(0).max(1).default(0.12)
+  backing: import_zod22.z.boolean().default(true),
+  backingMargin: import_zod22.z.number().min(0).max(1).default(0.12)
 });
 var SHEET_LIFT = 0.012;
 function withSheetCellFromPaper(parsed, rawOptions, paperDims) {
@@ -5061,24 +5346,24 @@ function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions)
 }
 
 // src/field/fieldGroup.tsx
-var THREE12 = __toESM(require("three"), 1);
+var THREE13 = __toESM(require("three"), 1);
 var import_gsap3 = require("gsap");
-var import_fiber4 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_fiber6 = require("@react-three/fiber");
+var import_react14 = require("react");
 var import_three_custom_shader_material2 = __toESM(require("three-custom-shader-material"), 1);
 
 // src/content/atlas.ts
-var THREE11 = __toESM(require("three"), 1);
-var import_react11 = require("react");
+var THREE12 = __toESM(require("three"), 1);
+var import_react13 = require("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] = (0, import_react11.useState)(null);
+  const [atlas, setAtlas] = (0, import_react13.useState)(null);
   const stableContents = useStable(contents);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     let disposed = false;
     const aspect = sheet2.height / sheet2.width;
     const { cols, rows } = atlasGrid(contents.length, aspect);
@@ -5094,8 +5379,8 @@ function useContentAtlas(contents, sheet2, stock) {
     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;
+    const texture = new THREE12.CanvasTexture(canvas);
+    texture.colorSpace = THREE12.SRGBColorSpace;
     texture.anisotropy = 4;
     setAtlas({ texture, cols, rows });
     const drawTile = (index, tile) => {
@@ -5254,21 +5539,21 @@ function cap(s) {
 }
 
 // src/field/layouts/index.ts
-var import_zod25 = require("zod");
+var import_zod24 = require("zod");
 
 // src/stage/path.ts
-var import_zod24 = require("zod");
-var walkPathSchema = import_zod24.z.object({
+var import_zod23 = require("zod");
+var walkPathSchema = import_zod23.z.object({
   /**
    * Control points on the ground plane, [x, z]. The default walks away from
    * the camera down -Z — the shot every reference image is composed on.
    */
-  points: import_zod24.z.array(import_zod24.z.tuple([import_zod24.z.number(), import_zod24.z.number()])).min(2).default([
+  points: import_zod23.z.array(import_zod23.z.tuple([import_zod23.z.number(), import_zod23.z.number()])).min(2).default([
     [0, 9],
     [0, -9]
   ]),
   /** Join the last point back to the first: an endless walk, and the only form `phase` can slide. */
-  closed: import_zod24.z.boolean().default(false)
+  closed: import_zod23.z.boolean().default(false)
 });
 var SAMPLES_PER_SEGMENT = 24;
 var EPSILON = 1e-6;
@@ -5394,9 +5679,9 @@ function jitter2(seed, i) {
 function ramp(i, n) {
   return n > 1 ? i / (n - 1) : 1;
 }
-var ringSchema = import_zod25.z.object({
-  radius: import_zod25.z.number().min(0.5).max(12).default(2.6),
-  tiltDeg: import_zod25.z.number().min(-45).max(45).default(8)
+var ringSchema = import_zod24.z.object({
+  radius: import_zod24.z.number().min(0.5).max(12).default(2.6),
+  tiltDeg: import_zod24.z.number().min(-45).max(45).default(8)
 });
 var ring = {
   id: "ring",
@@ -5414,15 +5699,15 @@ var ring = {
     };
   }
 };
-var fanSchema = import_zod25.z.object({
+var fanSchema = import_zod24.z.object({
   /** Total angular sweep from the first sheet to the last, degrees. */
-  sweep: import_zod25.z.number().min(0).max(180).default(72),
+  sweep: import_zod24.z.number().min(0).max(180).default(72),
   /** Where the shared pin sits, in half-sheet-heights below center. 1 = the bottom edge. */
-  hinge: import_zod25.z.number().min(0).max(4).default(1.15),
+  hinge: import_zod24.z.number().min(0).max(4).default(1.15),
   /** Thickness step so the sheets stack in order instead of z-fighting. */
-  lift: import_zod25.z.number().min(2e-3).max(0.08).default(0.012),
+  lift: import_zod24.z.number().min(2e-3).max(0.08).default(0.012),
   /** How much flatter the middle of the fan sits than its outer sheets. */
-  bow: import_zod25.z.number().min(0).max(1).default(0.7)
+  bow: import_zod24.z.number().min(0).max(1).default(0.7)
 });
 var fan = {
   id: "fan",
@@ -5442,16 +5727,16 @@ var fan = {
     };
   }
 };
-var spreadSchema = import_zod25.z.object({
+var spreadSchema = import_zod24.z.object({
   /** How far each sheet slides past the one below it. */
-  slip: import_zod25.z.number().min(0.02).max(2).default(0.3),
+  slip: import_zod24.z.number().min(0.02).max(2).default(0.3),
   /** Direction of the slide, degrees. 0 slides right, 90 slides up. */
-  angle: import_zod25.z.number().min(-180).max(180).default(28),
-  lift: import_zod25.z.number().min(2e-3).max(0.08).default(0.012),
+  angle: import_zod24.z.number().min(-180).max(180).default(28),
+  lift: import_zod24.z.number().min(2e-3).max(0.08).default(0.012),
   /** How much more the sheets at the far end of the slide bow. */
-  bow: import_zod25.z.number().min(0).max(1).default(0.6),
+  bow: import_zod24.z.number().min(0).max(1).default(0.6),
   /** Nothing hand-slid is perfectly square — a touch of per-sheet rotation. */
-  drift: import_zod25.z.number().min(0).max(1).default(0.15)
+  drift: import_zod24.z.number().min(0).max(1).default(0.15)
 });
 var spread = {
   id: "spread",
@@ -5469,15 +5754,15 @@ var spread = {
     };
   }
 };
-var pileSchema = import_zod25.z.object({
+var pileSchema = import_zod24.z.object({
   /** How far sheets wander from the center of the heap. */
-  scatter: import_zod25.z.number().min(0).max(2).default(0.22),
+  scatter: import_zod24.z.number().min(0).max(2).default(0.22),
   /** Widest angle a sheet sits off square, degrees. */
-  turn: import_zod25.z.number().min(0).max(180).default(24),
-  lift: import_zod25.z.number().min(2e-3).max(0.08).default(0.011),
+  turn: import_zod24.z.number().min(0).max(180).default(24),
+  lift: import_zod24.z.number().min(2e-3).max(0.08).default(0.011),
   /** How flat the sheets underneath are pressed by the ones on top. */
-  press: import_zod25.z.number().min(0).max(1).default(0.85),
-  seed: import_zod25.z.number().int().min(0).max(9999).default(3)
+  press: import_zod24.z.number().min(0).max(1).default(0.85),
+  seed: import_zod24.z.number().int().min(0).max(9999).default(3)
 });
 var pile = {
   id: "pile",
@@ -5493,12 +5778,12 @@ var pile = {
     };
   }
 };
-var wallSchema = import_zod25.z.object({
-  gapX: import_zod25.z.number().min(0.05).max(1).default(0.22),
-  gapY: import_zod25.z.number().min(0.05).max(1).default(0.3),
-  jitterAmt: import_zod25.z.number().min(0).max(1).default(0.25),
+var wallSchema = import_zod24.z.object({
+  gapX: import_zod24.z.number().min(0.05).max(1).default(0.22),
+  gapY: import_zod24.z.number().min(0.05).max(1).default(0.3),
+  jitterAmt: import_zod24.z.number().min(0).max(1).default(0.25),
   /** Spread of sag across the wall — no two pinned sheets hang alike. */
-  sag: import_zod25.z.number().min(0).max(1).default(0.45)
+  sag: import_zod24.z.number().min(0).max(1).default(0.45)
 });
 var wall = {
   id: "wall",
@@ -5524,15 +5809,15 @@ var wall = {
     };
   }
 };
-var spillSchema = import_zod25.z.object({
-  spreadX: import_zod25.z.number().min(0.5).max(8).default(2.4),
-  spreadY: import_zod25.z.number().min(0.5).max(8).default(1.5),
-  depth: import_zod25.z.number().min(0).max(6).default(1.6),
+var spillSchema = import_zod24.z.object({
+  spreadX: import_zod24.z.number().min(0.5).max(8).default(2.4),
+  spreadY: import_zod24.z.number().min(0.5).max(8).default(1.5),
+  depth: import_zod24.z.number().min(0).max(6).default(1.6),
   /** How far sheets pitch and roll out of the picture plane. */
-  tumble: import_zod25.z.number().min(0).max(1).default(0.5),
+  tumble: import_zod24.z.number().min(0).max(1).default(0.5),
   /** Spread of bend across the sheets — a spill does not fold them alike. */
-  vary: import_zod25.z.number().min(0).max(1).default(0.6),
-  seed: import_zod25.z.number().int().min(0).max(9999).default(7)
+  vary: import_zod24.z.number().min(0).max(1).default(0.6),
+  seed: import_zod24.z.number().int().min(0).max(9999).default(7)
 });
 var spill = {
   id: "spill",
@@ -5557,13 +5842,13 @@ var spill = {
     };
   }
 };
-var sweepSchema = import_zod25.z.object({
-  columns: import_zod25.z.number().int().min(1).max(24).default(5),
+var sweepSchema = import_zod24.z.object({
+  columns: import_zod24.z.number().int().min(1).max(24).default(5),
   /** Breathing room around each specimen. */
-  gap: import_zod25.z.number().min(0).max(2).default(0.22),
+  gap: import_zod24.z.number().min(0).max(2).default(0.22),
   /** Deformation at the first specimen and at the last. */
-  from: import_zod25.z.number().min(0).max(1).default(0),
-  to: import_zod25.z.number().min(0).max(1).default(1)
+  from: import_zod24.z.number().min(0).max(1).default(0),
+  to: import_zod24.z.number().min(0).max(1).default(1)
 });
 var sweep = {
   id: "sweep",
@@ -5587,15 +5872,15 @@ var sweep = {
     };
   }
 };
-var bookSchema = import_zod25.z.object({
+var bookSchema = import_zod24.z.object({
   /** How far the outermost page lifts off the block, degrees. */
-  spread: import_zod25.z.number().min(0).max(150).default(55),
+  spread: import_zod24.z.number().min(0).max(150).default(55),
   /** Fraction of the pages bound to the left. 0 = a one-sided sample book. */
-  split: import_zod25.z.number().min(0).max(1).default(0.5),
+  split: import_zod24.z.number().min(0).max(1).default(0.5),
   /** Page thickness — the gap between pages of one block. */
-  lift: import_zod25.z.number().min(1e-3).max(0.05).default(8e-3),
+  lift: import_zod24.z.number().min(1e-3).max(0.05).default(8e-3),
   /** How much more a lifted page arcs than one lying flat in the block. */
-  gutter: import_zod25.z.number().min(0).max(1).default(0.6)
+  gutter: import_zod24.z.number().min(0).max(1).default(0.6)
 });
 var book = {
   id: "book",
@@ -5622,11 +5907,11 @@ var book = {
     };
   }
 };
-var accordionSchema = import_zod25.z.object({
+var accordionSchema = import_zod24.z.object({
   /** How far each panel tilts off the strip's line, degrees. 0 = flat, 90 = shut. */
-  angle: import_zod25.z.number().min(0).max(89).default(55),
+  angle: import_zod24.z.number().min(0).max(89).default(55),
   /** A concertina holds its creases — how much bow the panels keep. */
-  slack: import_zod25.z.number().min(0).max(1).default(0.15)
+  slack: import_zod24.z.number().min(0).max(1).default(0.15)
 });
 var accordion = {
   id: "accordion",
@@ -5645,16 +5930,16 @@ var accordion = {
     };
   }
 };
-var rackSchema = import_zod25.z.object({
+var rackSchema = import_zod24.z.object({
   /** Gap along the row, as a fraction of the paper's width. Under 1 they overlap. */
-  spacing: import_zod25.z.number().min(0.05).max(2).default(0.82),
+  spacing: import_zod24.z.number().min(0.05).max(2).default(0.82),
   /** How far a sheet leans back off vertical, degrees. */
-  lean: import_zod25.z.number().min(0).max(70).default(16),
+  lean: import_zod24.z.number().min(0).max(70).default(16),
   /** How much that lean differs sheet to sheet — nothing propped is uniform. */
-  vary: import_zod25.z.number().min(0).max(1).default(0.55),
+  vary: import_zod24.z.number().min(0).max(1).default(0.55),
   /** Small rotations off square. */
-  sway: import_zod25.z.number().min(0).max(1).default(0.35),
-  seed: import_zod25.z.number().int().min(0).max(9999).default(5)
+  sway: import_zod24.z.number().min(0).max(1).default(0.35),
+  seed: import_zod24.z.number().int().min(0).max(9999).default(5)
 });
 var rack = {
   id: "rack",
@@ -5678,19 +5963,19 @@ var rack = {
     };
   }
 };
-var colonnadeSchema = import_zod25.z.object({
+var colonnadeSchema = import_zod24.z.object({
   /** The walk the colonnade is built along — see `stage/path`. */
   path: walkPathSchema.default({}),
   /** Half-width of the clear aisle: how far each banner stands off the walk line. */
-  aisle: import_zod25.z.number().min(0.2).max(20).default(2.4),
+  aisle: import_zod24.z.number().min(0.2).max(20).default(2.4),
   /** How much that gap opens and closes along the walk. Nothing hung by hand is a corridor. */
-  breathe: import_zod25.z.number().min(0).max(1).default(0.3),
+  breathe: import_zod24.z.number().min(0).max(1).default(0.3),
   /** Widest angle a banner turns off square to the aisle, degrees. */
-  twist: import_zod25.z.number().min(0).max(90).default(22),
+  twist: import_zod24.z.number().min(0).max(90).default(22),
   /** Fraction of the walk left clear at each end, so the figure has somewhere to enter from. */
-  margin: import_zod25.z.number().min(0).max(0.45).default(0.05),
+  margin: import_zod24.z.number().min(0).max(0.45).default(0.05),
   /** Spread of banner heights, 0..1. */
-  rise: import_zod25.z.number().min(0).max(1).default(0.28),
+  rise: import_zod24.z.number().min(0).max(1).default(0.28),
   /**
    * How far the banners lift off the floor, as a fraction of their height.
    *
@@ -5704,10 +5989,10 @@ var colonnadeSchema = import_zod25.z.object({
    * The bound used to be 0, so the one thing this option documented itself
    * as doing was the one thing it could not do.
    */
-  hover: import_zod25.z.number().min(-0.5).max(1).default(0),
+  hover: import_zod24.z.number().min(-0.5).max(1).default(0),
   /** Spread of deformation — no two lengths of hung paper drape alike. */
-  drape: import_zod25.z.number().min(0).max(1).default(0.5),
-  seed: import_zod25.z.number().int().min(0).max(9999).default(2)
+  drape: import_zod24.z.number().min(0).max(1).default(0.5),
+  seed: import_zod24.z.number().int().min(0).max(9999).default(2)
 });
 function colonnadeStop(i, n, margin) {
   const side = i % 2 === 0 ? 1 : -1;
@@ -5792,7 +6077,7 @@ function fieldShapeStack(config, progress) {
 
 // src/field/fieldGroup.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var scratchObj = new THREE12.Object3D();
+var scratchObj = new THREE13.Object3D();
 var scratchAero = { position: [0, 0, 0], rotation: [0, 0, 0] };
 var FIELD_SEGMENT_CAP = 48;
 var FIELD_AUTO_CEILING = 128;
@@ -5811,11 +6096,11 @@ function FieldGroup({
   const stock = getStock(config.stock);
   const rig = useLightRig(config.scene.lighting);
   const behavior = config.behavior && !config.deformers ? getBehavior(config.behavior.type) : null;
-  const progressRef = (0, import_react12.useRef)(
+  const progressRef = (0, import_react14.useRef)(
     behavior ? config.behavior[behavior.progressParam] : 0
   );
   const buildStackAt = (progress) => fieldShapeStack(config, progress);
-  const initialStack = (0, import_react12.useMemo)(
+  const initialStack = (0, import_react14.useMemo)(
     () => buildStackAt(progressRef.current),
     [
       JSON.stringify(config.behavior ?? null),
@@ -5824,7 +6109,7 @@ function FieldGroup({
     ]
   );
   const structureKey = initialStack.map((i) => i.type).join("|");
-  const geometry = (0, import_react12.useMemo)(() => {
+  const geometry = (0, import_react14.useMemo)(() => {
     const floor = stackMinSegments(initialStack, config.sheet);
     const want = [0, 0];
     for (const p of PROGRESS_SAMPLES2) {
@@ -5853,28 +6138,28 @@ function FieldGroup({
       atlasIdx[i] = i;
       phase[i] = indices[i] * 0.618034 % 1 * 4;
     }
-    geo.setAttribute("aAtlas", new THREE12.InstancedBufferAttribute(atlasIdx, 1));
-    geo.setAttribute("aPhase", new THREE12.InstancedBufferAttribute(phase, 1));
-    geo.setAttribute("aBias", new THREE12.InstancedBufferAttribute(bias, 1));
+    geo.setAttribute("aAtlas", new THREE13.InstancedBufferAttribute(atlasIdx, 1));
+    geo.setAttribute("aPhase", new THREE13.InstancedBufferAttribute(phase, 1));
+    geo.setAttribute("aBias", new THREE13.InstancedBufferAttribute(bias, 1));
     return geo;
   }, [JSON.stringify(config.sheet), structureKey, count, autoCeiling]);
-  (0, import_react12.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react14.useEffect)(() => () => geometry.dispose(), [geometry]);
   const atlas = useContentAtlas(contents, config.sheet, stock);
-  const shader = (0, import_react12.useMemo)(() => {
+  const shader = (0, import_react14.useMemo)(() => {
     const composed = buildDisplacementGLSL(initialStack, config.sheet);
     const uniforms = {};
     for (const [name, value] of Object.entries(composed.uniforms)) {
       uniforms[name] = {
-        value: Array.isArray(value) && value.length === 2 ? new THREE12.Vector2(...value) : value
+        value: Array.isArray(value) && value.length === 2 ? new THREE13.Vector2(...value) : value
       };
     }
     uniforms.uPlTime = { value: 0 };
     uniforms.uAtlas = { value: null };
-    uniforms.uAtlasGrid = { value: new THREE12.Vector2(1, 1) };
+    uniforms.uAtlasGrid = { value: new THREE13.Vector2(1, 1) };
     uniforms.uBackDarken = {
       value: 1 - Math.min(0.45, 0.12 + config.sheet.thickness * 0.9) * stock.opacity
     };
-    uniforms.uStockColor = { value: new THREE12.Color(stock.color) };
+    uniforms.uStockColor = { value: new THREE13.Color(stock.color) };
     uniforms.uShowThrough = { value: config.surface.showThrough ?? stock.showThrough };
     Object.assign(uniforms, translucencyUniforms(config.surface.translucency ?? stock.translucency, rig));
     return {
@@ -5889,19 +6174,19 @@ function FieldGroup({
     config.surface.showThrough,
     config.surface.translucency
   ]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const values = translucencyValues(config.surface.translucency ?? stock.translucency, rig);
     shader.uniforms.uTranslucency.value = values.translucency;
     shader.uniforms.uBackLightDir.value.copy(values.direction);
     shader.uniforms.uBackLightColor.value.copy(values.color);
     shader.uniforms.uAmbientTransmission.value = values.ambient;
   }, [shader, rig, config.surface.translucency, stock.translucency]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!atlas) return;
     shader.uniforms.uAtlas.value = atlas.texture;
     shader.uniforms.uAtlasGrid.value.set(atlas.cols, atlas.rows);
   }, [atlas, shader]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!behavior || shared.reduced) return;
     const state = { p: progressRef.current };
     const tween = import_gsap3.gsap.to(state, {
@@ -5918,8 +6203,8 @@ function FieldGroup({
       tween.kill();
     };
   }, [structureKey, shared.reduced]);
-  const meshRef = (0, import_react12.useRef)(null);
-  (0, import_fiber4.useFrame)(({ clock }) => {
+  const meshRef = (0, import_react14.useRef)(null);
+  (0, import_fiber6.useFrame)(({ clock }) => {
     const mesh = meshRef.current;
     if (!mesh) return;
     const elapsed = clock.elapsedTime - Math.max(shared.mountTimeRef.current, 0);
@@ -5929,7 +6214,7 @@ function FieldGroup({
       for (const [name, value] of Object.entries(values)) {
         const uniform = shader.uniforms[name];
         if (!uniform) continue;
-        if (uniform.value instanceof THREE12.Vector2 && Array.isArray(value)) {
+        if (uniform.value instanceof THREE13.Vector2 && Array.isArray(value)) {
           uniform.value.set(value[0], value[1]);
         } else {
           uniform.value = value;
@@ -6013,13 +6298,13 @@ function FieldGroup({
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           import_three_custom_shader_material2.default,
           {
-            baseMaterial: THREE12.MeshStandardMaterial,
+            baseMaterial: THREE13.MeshStandardMaterial,
             vertexShader: shader.vertexShader,
             fragmentShader: shader.fragmentShader,
             uniforms: shader.uniforms,
             roughness: stock.roughness,
             metalness: 0,
-            side: THREE12.DoubleSide
+            side: THREE13.DoubleSide
           },
           `${structureKey}:${count}`
         )
@@ -6065,8 +6350,8 @@ var easeOut = (t) => 1 - (1 - t) ** 3;
 var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
 
 // src/field/backingSheet.tsx
-var THREE13 = __toESM(require("three"), 1);
-var import_react13 = require("react");
+var THREE14 = __toESM(require("three"), 1);
+var import_react15 = require("react");
 
 // src/content/backing.ts
 function silhouetteRects(o, count) {
@@ -6139,7 +6424,7 @@ function BackingSheet({
   removed
 }) {
   const { width, height } = sheetBackingSize(options);
-  const canvas = (0, import_react13.useMemo)(() => {
+  const canvas = (0, import_react15.useMemo)(() => {
     if (typeof document === "undefined") return null;
     const c = document.createElement("canvas");
     const scale = Math.min(1024, Math.round(360 * Math.max(width, height))) / Math.max(width, height);
@@ -6147,14 +6432,14 @@ function BackingSheet({
     c.height = Math.max(2, Math.round(height * scale));
     return c;
   }, [width, height]);
-  const texture = (0, import_react13.useMemo)(() => canvas ? new THREE13.CanvasTexture(canvas) : null, [canvas]);
+  const texture = (0, import_react15.useMemo)(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
   const removedKey = [...removed].sort((a, b) => a - b).join(",");
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!canvas || !texture) return;
     drawBacking(canvas, { options, count, tint: BACKING_TINT, removed });
     texture.needsUpdate = true;
   }, [canvas, texture, JSON.stringify(options), count, removedKey]);
-  (0, import_react13.useEffect)(() => () => texture?.dispose(), [texture]);
+  (0, import_react15.useEffect)(() => () => texture?.dispose(), [texture]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("mesh", { receiveShadow: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("planeGeometry", { args: [width, height] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("meshStandardMaterial", { map: texture, color: "#ffffff", roughness: 0.92, metalness: 0 })
@@ -6162,10 +6447,10 @@ function BackingSheet({
 }
 
 // src/field/interactiveField.tsx
-var THREE14 = __toESM(require("three"), 1);
+var THREE15 = __toESM(require("three"), 1);
 var import_gsap4 = require("gsap");
-var import_fiber5 = require("@react-three/fiber");
-var import_react14 = require("react");
+var import_fiber7 = require("@react-three/fiber");
+var import_react16 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var PICK_BEHAVIORS = /* @__PURE__ */ new Set(["peel", "carry"]);
 function InteractiveField(props) {
@@ -6173,15 +6458,15 @@ function InteractiveField(props) {
   const total = papers.length;
   const layout = getLayout(layoutId);
   const reduced = usePrefersReducedMotion(props.reducedMotion);
-  const contextRegistry = (0, import_react14.useContext)(DropZoneContext);
-  const registry4 = (0, import_react14.useMemo)(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
-  const camera = (0, import_fiber5.useThree)((s) => s.camera);
-  const gl = (0, import_fiber5.useThree)((s) => s.gl);
-  const controls = (0, import_fiber5.useThree)((s) => s.controls);
-  const [removed, setRemoved] = (0, import_react14.useState)(EMPTY_SET);
-  const [slotPatches, setSlotPatches] = (0, import_react14.useState)({});
-  const [slotStates, setSlotStates] = (0, import_react14.useState)({});
-  const slotConfigs = (0, import_react14.useMemo)(
+  const contextRegistry = (0, import_react16.useContext)(DropZoneContext);
+  const registry4 = (0, import_react16.useMemo)(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
+  const camera = (0, import_fiber7.useThree)((s) => s.camera);
+  const gl = (0, import_fiber7.useThree)((s) => s.gl);
+  const controls = (0, import_fiber7.useThree)((s) => s.controls);
+  const [removed, setRemoved] = (0, import_react16.useState)(EMPTY_SET);
+  const [slotPatches, setSlotPatches] = (0, import_react16.useState)({});
+  const [slotStates, setSlotStates] = (0, import_react16.useState)({});
+  const slotConfigs = (0, import_react16.useMemo)(
     () => papers.map((slot, i) => {
       const config = resolveFieldSlotConfig(slot, fallback, i, layoutId, layoutOptions);
       const patch = slotPatches[i];
@@ -6195,14 +6480,14 @@ function InteractiveField(props) {
       slotPatches
     ]
   );
-  const poses = (0, import_react14.useMemo)(
+  const poses = (0, import_react16.useMemo)(
     () => slotConfigs.map((_, i) => layout.pose(i, total, layoutOptions, 0, props.sheet)),
     [layoutId, JSON.stringify(layoutOptions), total, props.sheet.width, props.sheet.height]
   );
-  const groupRefs = (0, import_react14.useRef)([]);
-  const handleRefs = (0, import_react14.useRef)([]);
-  const pressRef = (0, import_react14.useRef)(null);
-  const carriedRef = (0, import_react14.useRef)(null);
+  const groupRefs = (0, import_react16.useRef)([]);
+  const handleRefs = (0, import_react16.useRef)([]);
+  const pressRef = (0, import_react16.useRef)(null);
+  const carriedRef = (0, import_react16.useRef)(null);
   const zonesLive = () => [...props.zones ?? [], ...registry4.list()];
   const slotName = (i) => {
     const preset = papers[i]?.preset ?? fallback;
@@ -6215,10 +6500,10 @@ function InteractiveField(props) {
     }
     props.onSlotStateChange?.(i, state);
   };
-  const raycaster = (0, import_react14.useMemo)(() => new THREE14.Raycaster(), []);
-  const planeScratch = (0, import_react14.useMemo)(() => new THREE14.Plane(new THREE14.Vector3(0, 0, 1), 0), []);
-  const pointScratch = (0, import_react14.useMemo)(() => new THREE14.Vector3(), []);
-  const ndcScratch = (0, import_react14.useMemo)(() => new THREE14.Vector2(), []);
+  const raycaster = (0, import_react16.useMemo)(() => new THREE15.Raycaster(), []);
+  const planeScratch = (0, import_react16.useMemo)(() => new THREE15.Plane(new THREE15.Vector3(0, 0, 1), 0), []);
+  const pointScratch = (0, import_react16.useMemo)(() => new THREE15.Vector3(), []);
+  const ndcScratch = (0, import_react16.useMemo)(() => new THREE15.Vector2(), []);
   const planePoint = (clientX, clientY, planeZ) => {
     const rect = gl.domElement.getBoundingClientRect();
     ndcScratch.set(
@@ -6348,7 +6633,7 @@ function InteractiveField(props) {
     import_gsap4.gsap.to(group.rotation, { x: home.rotation[0], y: home.rotation[1], z: home.rotation[2], duration });
     import_gsap4.gsap.to(group.scale, { x: home.scale, y: home.scale, z: home.scale, duration: duration * 0.5 });
   };
-  const onPointerMoveRef = (0, import_react14.useRef)(() => {
+  const onPointerMoveRef = (0, import_react16.useRef)(() => {
   });
   onPointerMoveRef.current = (e) => {
     const press = pressRef.current;
@@ -6372,7 +6657,7 @@ function InteractiveField(props) {
       pick(slot, hit[0], hit[1], pointerId);
     }
   };
-  const onPointerUpRef = (0, import_react14.useRef)(() => {
+  const onPointerUpRef = (0, import_react16.useRef)(() => {
   });
   onPointerUpRef.current = (e) => {
     pressRef.current = null;
@@ -6381,12 +6666,12 @@ function InteractiveField(props) {
     if (carried.pointerId !== null && e.pointerId !== carried.pointerId) return;
     const name = slotName(carried.slot);
     const zone = zonesLive().find(
-      (z26) => zoneContains(z26, carried.x.value, carried.y.value) && zoneAccepts(z26, name)
+      (z25) => zoneContains(z25, carried.x.value, carried.y.value) && zoneAccepts(z25, name)
     );
     if (zone) settleInto(carried, zone);
     else returnHome(carried);
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const move = (e) => onPointerMoveRef.current(e);
     const up = (e) => onPointerUpRef.current(e);
     window.addEventListener("pointermove", move);
@@ -6396,7 +6681,7 @@ function InteractiveField(props) {
       window.removeEventListener("pointerup", up);
     };
   }, []);
-  (0, import_fiber5.useFrame)((_, delta) => {
+  (0, import_fiber7.useFrame)((_, delta) => {
     const carried = carriedRef.current;
     if (!carried || carried.settling) return;
     const group = groupRefs.current[carried.slot];
@@ -6422,19 +6707,19 @@ function InteractiveField(props) {
       group.position.z = carried.homePose.position[2] + 0.15;
       handle.set("drive", carryDrive(speed));
       const lag = 0.25;
-      group.rotation.y += (THREE14.MathUtils.clamp(-vx * lag, -0.6, 0.6) - group.rotation.y) * 0.12;
-      group.rotation.x += (THREE14.MathUtils.clamp(vy * lag * 0.7, -0.5, 0.5) - group.rotation.x) * 0.12;
+      group.rotation.y += (THREE15.MathUtils.clamp(-vx * lag, -0.6, 0.6) - group.rotation.y) * 0.12;
+      group.rotation.x += (THREE15.MathUtils.clamp(vy * lag * 0.7, -0.5, 0.5) - group.rotation.x) * 0.12;
     }
     const name = slotName(carried.slot);
     const zone = zonesLive().find(
-      (z26) => zoneContains(z26, group.position.x, group.position.y) && zoneAccepts(z26, name)
+      (z25) => zoneContains(z25, group.position.x, group.position.y) && zoneAccepts(z25, name)
     );
     registry4.setHovered(zone?.id ?? null);
     const targetScale = (zone ? 1.03 : 1) * carried.homePose.scale;
     group.scale.x += (targetScale - group.scale.x) * 0.15;
     group.scale.y = group.scale.z = group.scale.x;
   });
-  const a11yImplRef = (0, import_react14.useRef)(null);
+  const a11yImplRef = (0, import_react16.useRef)(null);
   a11yImplRef.current = {
     pick: (slot) => {
       const home = poses[slot];
@@ -6443,7 +6728,7 @@ function InteractiveField(props) {
     },
     placeAtZone: (slot, zoneId) => {
       const carried = carriedRef.current;
-      const zone = zonesLive().find((z26) => z26.id === zoneId);
+      const zone = zonesLive().find((z25) => z25.id === zoneId);
       const group = groupRefs.current[slot];
       if (!carried || carried.slot !== slot || !zone || !group) return;
       group.position.x = zone.bounds.position[0];
@@ -6456,10 +6741,10 @@ function InteractiveField(props) {
       const carried = carriedRef.current;
       if (carried && carried.slot === slot && !carried.settling) returnHome(carried);
     },
-    zoneIds: () => zonesLive().map((z26) => z26.id),
+    zoneIds: () => zonesLive().map((z25) => z25.id),
     slotState: (slot) => slotStates[slot] ?? "rest"
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const ref = props.a11yRef;
     if (!ref) return;
     ref.current = {
@@ -6512,7 +6797,7 @@ function InteractiveField(props) {
 }
 
 // src/field/keyboardMirror.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function fieldKeyboardStep(carry2, slot, key, controller) {
   if (!carry2) {
@@ -6558,7 +6843,7 @@ function FieldKeyboardMirror({
   papers,
   controller
 }) {
-  const [carrying, setCarrying] = (0, import_react15.useState)(null);
+  const [carrying, setCarrying] = (0, import_react17.useState)(null);
   const paperLabel = (slot, i) => {
     try {
       const config = resolveConfig({ preset: slot.preset });
@@ -6661,16 +6946,16 @@ function fitCamera(layout, n, options, sheet2, fovDeg, aspect, margin = 1.06) {
 
 // src/PaperField.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var PaperFieldMesh = (0, import_react16.forwardRef)(
+var PaperFieldMesh = (0, import_react18.forwardRef)(
   function PaperFieldMesh2(props, ref) {
     const reduced = usePrefersReducedMotion(props.reducedMotion);
-    const papers = (0, import_react16.useMemo)(
+    const papers = (0, import_react18.useMemo)(
       () => effectiveFieldPapers(props.papers, props.images),
       [props.papers, props.images]
     );
     const stablePapers = useStable(papers);
     const stablePreset = useStable(props.preset ?? null);
-    const groups = (0, import_react16.useMemo)(
+    const groups = (0, import_react18.useMemo)(
       () => groupFieldPapers(stablePapers, stablePreset ?? void 0),
       [stablePapers, stablePreset]
     );
@@ -6679,22 +6964,22 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
     const layout = getLayout(layoutId);
     const firstSheet = groups[0]?.config.sheet;
     const stableLayoutOptions = useStable(props.layoutOptions ?? {});
-    const layoutOptions = (0, import_react16.useMemo)(
+    const layoutOptions = (0, import_react18.useMemo)(
       // Sheet grids size their cells from the papers themselves — gutter is
       // then literally the spacing between stamps (explicit cell dims win).
       () => resolveLayoutOptions(layoutId, layout, stableLayoutOptions, firstSheet),
       [layoutId, stableLayoutOptions, firstSheet?.width, firstSheet?.height]
     );
-    const phaseRef = (0, import_react16.useRef)(0);
-    const dragVelRef = (0, import_react16.useRef)(0);
-    const mountTimeRef = (0, import_react16.useRef)(-1);
-    const morphRef = (0, import_react16.useRef)({ from: null, t: 1 });
-    const prevLayout = (0, import_react16.useRef)({ id: layoutId, options: layoutOptions });
-    const gl = (0, import_fiber6.useThree)((s) => s.gl);
+    const phaseRef = (0, import_react18.useRef)(0);
+    const dragVelRef = (0, import_react18.useRef)(0);
+    const mountTimeRef = (0, import_react18.useRef)(-1);
+    const morphRef = (0, import_react18.useRef)({ from: null, t: 1 });
+    const prevLayout = (0, import_react18.useRef)({ id: layoutId, options: layoutOptions });
+    const gl = (0, import_fiber8.useThree)((s) => s.gl);
     const driver = reduced ? "none" : props.motion?.driver ?? "autoplay";
     const speed = props.motion?.speed ?? 0.5;
     const entranceType = reduced ? "none" : props.entrance?.type ?? "rise";
-    (0, import_react16.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       const prev = prevLayout.current;
       if (prev.id !== layoutId || JSON.stringify(prev.options) !== JSON.stringify(layoutOptions)) {
         morphRef.current = { from: prev, t: 0 };
@@ -6702,7 +6987,7 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
         prevLayout.current = { id: layoutId, options: layoutOptions };
       }
     }, [layoutId, layoutOptions]);
-    (0, import_react16.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       if (driver !== "drag") return;
       const el = gl.domElement;
       let lastX = null;
@@ -6728,7 +7013,7 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
         window.removeEventListener("pointerup", up);
       };
     }, [driver, gl]);
-    (0, import_fiber6.useFrame)(({ clock }, delta) => {
+    (0, import_fiber8.useFrame)(({ clock }, delta) => {
       if (mountTimeRef.current < 0) mountTimeRef.current = clock.elapsedTime;
       if (driver === "autoplay") phaseRef.current += delta * speed * 0.02;
       if (driver === "drag") {
@@ -6786,14 +7071,14 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
   }
 );
 function FitCamera(meshProps) {
-  const camera = (0, import_fiber6.useThree)((s) => s.camera);
-  const width = (0, import_fiber6.useThree)((s) => s.size.width);
-  const height = (0, import_fiber6.useThree)((s) => s.size.height);
+  const camera = (0, import_fiber8.useThree)((s) => s.camera);
+  const width = (0, import_fiber8.useThree)((s) => s.size.width);
+  const height = (0, import_fiber8.useThree)((s) => s.size.height);
   const papersProp = useStable(meshProps.papers ?? null);
   const imagesProp = useStable(meshProps.images ?? null);
   const presetProp = useStable(meshProps.preset ?? null);
   const optionsProp = useStable(meshProps.layoutOptions ?? {});
-  const field = (0, import_react16.useMemo)(() => {
+  const field = (0, import_react18.useMemo)(() => {
     const papers = effectiveFieldPapers(papersProp ?? void 0, imagesProp ?? void 0);
     const layoutId = meshProps.layout ?? "ring";
     const layout = getLayout(layoutId);
@@ -6801,8 +7086,8 @@ function FitCamera(meshProps) {
     const options = resolveLayoutOptions(layoutId, layout, optionsProp, sheet2);
     return { layout, n: papers.length, options, sheet: sheet2 ?? DEFAULT_SHEET };
   }, [papersProp, imagesProp, presetProp, meshProps.layout, optionsProp]);
-  (0, import_react16.useEffect)(() => {
-    if (!(camera instanceof THREE15.PerspectiveCamera)) return;
+  (0, import_react18.useEffect)(() => {
+    if (!(camera instanceof THREE16.PerspectiveCamera)) return;
     const { position, target } = fitCamera(
       field.layout,
       field.n,
@@ -6817,35 +7102,28 @@ function FitCamera(meshProps) {
   }, [camera, width, height, field]);
   return null;
 }
-var PaperField = (0, import_react16.forwardRef)(function PaperField2({ children, className, style, ...meshProps }, ref) {
-  const registry4 = (0, import_react16.useMemo)(() => new DropZoneRegistry(), []);
-  const a11yRef = (0, import_react16.useRef)(null);
-  const papers = (0, import_react16.useMemo)(
+var PaperField = (0, import_react18.forwardRef)(function PaperField2({ children, className, style, scene, ...meshProps }, ref) {
+  const rig = sceneSchema.parse(scene ?? {});
+  const registry4 = (0, import_react18.useMemo)(() => new DropZoneRegistry(), []);
+  const a11yRef = (0, import_react18.useRef)(null);
+  const papers = (0, import_react18.useMemo)(
     () => effectiveFieldPapers(meshProps.papers, meshProps.images),
     [meshProps.papers, meshProps.images]
   );
   const stablePapers = useStable(papers);
   const stablePreset = useStable(meshProps.preset ?? null);
-  const interactive = (0, import_react16.useMemo)(
+  const interactive = (0, import_react18.useMemo)(
     () => fieldIsInteractive(stablePapers, stablePreset ?? void 0, meshProps.interactive),
     [stablePapers, stablePreset, meshProps.interactive]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropZoneContext.Provider, { value: registry4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_fiber6.Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_fiber8.Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FitCamera, { ...meshProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ambientLight", { intensity: 0.7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "directionalLight",
-        {
-          position: [3, 5, 4],
-          intensity: 1.4,
-          castShadow: true,
-          "shadow-mapSize": [1024, 1024],
-          "shadow-normalBias": 0.05
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperBackdrop, { backdrop: rig.backdrop }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperLighting, { preset: rig.lighting, light: rig.light, floor: -2.4, scale: 14 }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperFieldMesh, { ref, a11yControllerRef: a11yRef, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ReleaseContextOnUnmount, {})
     ] }),
     interactive && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldKeyboardMirror, { papers, controller: a11yRef })
   ] }) });
@@ -6895,7 +7173,8 @@ function diffConfig(config) {
   } else if (config.physics !== "none") {
     out.physics = config.physics;
   }
-  if (config.scene.lighting !== "studio") out.scene = { lighting: config.scene.lighting };
+  const scene = diffAgainst(config.scene, sceneSchema.parse({}));
+  if (Object.keys(scene).length > 0) out.scene = scene;
   if (config.onTwos) out.onTwos = true;
   if (config.states) out.states = config.states;
   const meta = diffAgainst(config.meta, paperConfigSchema.parse({}).meta);
@@ -6906,14 +7185,35 @@ function jsxValue(value) {
   if (typeof value === "string") return `"${value}"`;
   return `{${JSON.stringify(value)}}`;
 }
+function withoutUploads(value) {
+  let replaced = 0;
+  const walk = (node) => {
+    if (typeof node === "string") {
+      if (!node.startsWith("data:")) return node;
+      replaced++;
+      const extension = node.startsWith("data:image/png") ? "png" : "jpg";
+      return `/paperlab-image-${replaced}.${extension}`;
+    }
+    if (Array.isArray(node)) return node.map(walk);
+    if (node && typeof node === "object") {
+      return Object.fromEntries(Object.entries(node).map(([k, v]) => [k, walk(v)]));
+    }
+    return node;
+  };
+  return { value: walk(value), replaced };
+}
+var UPLOAD_NOTE = "// Uploaded pictures cannot travel in a snippet \u2014 the paths below are\n// stand-ins, in order. Point them at your own files.";
 function buildJsxSnippet(config) {
-  const diff = diffConfig(config);
-  delete diff.meta;
+  const diffed = diffConfig(config);
+  delete diffed.meta;
+  const { value: diff, replaced } = withoutUploads(diffed);
   const props = Object.entries(diff).map(([key, value]) => `  ${key}=${jsxValue(value)}`);
   if (props.length === 0) return "<Paper />";
-  return `<Paper
+  const snippet = `<Paper
 ${props.join("\n")}
 />`;
+  return replaced > 0 ? `${UPLOAD_NOTE}
+${snippet}` : snippet;
 }
 
 // src/config/agent-payload.ts
@@ -6963,7 +7263,10 @@ function componentName(config) {
 }
 function buildAgentPayload(config) {
   const name = componentName(config);
-  const preset = JSON.stringify(diffConfig(config), null, 2);
+  const { value: stripped, replaced } = withoutUploads(diffConfig(config));
+  const preset = JSON.stringify(stripped, null, 2);
+  const uploadNote = replaced > 0 ? `${UPLOAD_NOTE}
+` : "";
   return `Integrate a Paperlab paper component into this project. (paperlab agent-payload v${AGENT_PAYLOAD_VERSION})
 
 1. Install the dependencies:
@@ -6976,7 +7279,7 @@ function buildAgentPayload(config) {
 \`\`\`tsx
 import { Paper, type PaperConfigInput } from 'paperlab'
 
-const preset = ${preset.replace(/\n/g, "\n")} satisfies PaperConfigInput
+${uploadNote}const preset = ${preset.replace(/\n/g, "\n")} satisfies PaperConfigInput
 
 export function ${name}() {
   return <Paper preset={preset} />
@@ -7019,7 +7322,9 @@ function distinctFieldPresets(input) {
 function nonDefault(value, defaults) {
   const out = {};
   for (const [k, v] of Object.entries(value ?? {})) {
-    if (v !== void 0 && v !== defaults[k]) out[k] = v;
+    if (v === void 0) continue;
+    const same = v === defaults[k] || JSON.stringify(v) === JSON.stringify(defaults[k]);
+    if (!same) out[k] = v;
   }
   return out;
 }
@@ -7032,6 +7337,11 @@ function diffFieldProps(input) {
   if (Object.keys(motion).length > 0) out.motion = motion;
   const entrance = nonDefault(input.entrance, ENTRANCE_DEFAULTS);
   if (Object.keys(entrance).length > 0) out.entrance = entrance;
+  const scene = nonDefault(
+    sceneSchema.parse(input.scene ?? {}),
+    sceneSchema.parse({})
+  );
+  if (Object.keys(scene).length > 0) out.scene = scene;
   return out;
 }
 var LAYOUT_PHRASES = {
@@ -7065,7 +7375,7 @@ function describeFieldConfig(input) {
     parts.push("hovering peels/reacts per paper (interaction states)");
     if (zones.length > 0) {
       parts.push(
-        `dragging one past its tear threshold detaches it to carry to the ${zones.map((z26) => z26.id).join(" or ")} zone (release elsewhere flutters it back)`
+        `dragging one past its tear threshold detaches it to carry to the ${zones.map((z25) => z25.id).join(" or ")} zone (release elsewhere flutters it back)`
       );
     }
   } else {
@@ -7174,7 +7484,7 @@ required; the component needs no props.`;
 }
 
 // src/field/parity.ts
-var THREE16 = __toESM(require("three"), 1);
+var THREE17 = __toESM(require("three"), 1);
 var GRID = 48;
 var PARITY_EPSILON = 5e-4;
 var parityCases = [
@@ -7450,7 +7760,7 @@ function runParityHarness(canvas) {
   if (!gl.getExtension("EXT_color_buffer_float")) {
     throw new Error("[paperlab parity] EXT_color_buffer_float unavailable");
   }
-  const point = new THREE16.Vector3();
+  const point = new THREE17.Vector3();
   const parity = parityCases.map((c) => {
     const gpu = runCaseOnGPU(gl, c);
     let maxError = 0;
@@ -7481,17 +7791,21 @@ function runParityHarness(canvas) {
   LightRig,
   PARITY_EPSILON,
   Paper,
+  PaperBackdrop,
   PaperField,
   PaperFieldMesh,
   PaperLighting,
   PaperMesh,
   SAG_TOL,
+  backdropSchema,
   behaviorConfigSchema,
   buildAgentPayload,
   buildFieldAgentPayload,
   buildFieldComponentSource,
   buildJsxSnippet,
   clothConfigSchema,
+  contentNames,
+  contentSchemaFor,
   coreStateNames,
   describeConfig,
   describeFieldConfig,
@@ -7528,6 +7842,7 @@ function runParityHarness(canvas) {
   resolveLighting,
   resolveStateConfig,
   runParityHarness,
+  sceneSchema,
   segmentsForArc,
   segmentsForSine,
   serializePreset,
@@ -7541,6 +7856,7 @@ function runParityHarness(canvas) {
   unregisterPreset,
   usePaperStates,
   usePrefersReducedMotion,
+  washSchema,
   wrapLines
 });
 //# sourceMappingURL=index.cjs.map