paperlab 0.4.0 → 0.5.1

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

@@ -909,6 +909,31 @@ var stockNames = [
   "sticker"
 ];
 var stockSchema = z14.enum(stockNames);
+var washSchema = z14.object({
+  /** The first pigment. */
+  color: z14.string().default("#4a5b8c").describe("color"),
+  /** The second. Blooms alternate, and overlaps multiply into a third. */
+  secondary: z14.string().default("#b06a6a").describe("color"),
+  /** How many pools of colour. */
+  blooms: z14.number().int().min(1).max(24).default(7),
+  /** How far a pool runs before it dries — its size against the sheet. */
+  spread: z14.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: z14.number().min(0).max(1).default(0.5),
+  /** How much pigment is in the water. */
+  intensity: z14.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: z14.number().min(0).max(1).default(0.6),
+  /** Pigment settling into the tooth of the paper. */
+  granulation: z14.number().min(0).max(1).default(0.35),
+  /** Fixed so a preset paints the same wash every time. */
+  seed: z14.number().int().min(0).max(99).default(0)
+});
 var blankContentBase = z14.object({
   type: z14.literal("blank")
 });
@@ -933,7 +958,7 @@ var textContentBase = z14.object({
   /** px at texture resolution (long edge = 1024 logical px before DPR). */
   size: z14.number().min(8).max(256).default(44),
   weight: z14.number().min(100).max(900).default(400),
-  color: z14.string().default("#2b2620"),
+  color: z14.string().default("#2b2620").describe("color"),
   align: z14.enum(["left", "center", "right"]).default("left"),
   /** Fraction of the short edge. */
   padding: z14.number().min(0).max(0.4).default(0.09),
@@ -983,7 +1008,7 @@ var cardContentBase = z14.object({
    * was cropped rather than as a card that was set.
    */
   size: z14.number().min(8).max(256).default(58),
-  color: z14.string().default("#2b2620"),
+  color: z14.string().default("#2b2620").describe("color"),
   align: z14.enum(["left", "center"]).default("left"),
   padding: z14.number().min(0).max(0.4).default(0.1)
 });
@@ -1002,14 +1027,15 @@ var receiptContentBase = z14.object({
   timestamp: z14.string().optional(),
   footer: z14.string().default("KEEP FOR YOUR RECORDS")
 });
+var withWash = { wash: washSchema.optional() };
 var backContentSchema = z14.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);
@@ -1022,6 +1048,14 @@ var contentSchema = z14.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 = z14.object({
   /** Paper fiber noise, 0..1. */
@@ -1109,8 +1143,70 @@ var lightingNames = [
   "lightbox"
 ];
 var filmNames = ["agx", "neutral", "filmic"];
+var lightSchema = z14.object({
+  /** Tone-mapping exposure — the stop the whole picture is printed at. */
+  exposure: z14.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: z14.enum(filmNames).optional(),
+  /** Key light strength. */
+  key: z14.number().min(0).max(12).optional(),
+  /** Key light colour. */
+  color: z14.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: z14.number().min(-180).max(180).optional(),
+  /** How high the key stands, degrees above the horizon. */
+  height: z14.number().min(-30).max(89).optional(),
+  /** Flat fill from every direction at once. Cheap, and it kills form — reach for `studio` first. */
+  ambient: z14.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: z14.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: z14.number().min(0).max(3).optional()
+});
+var backdropSchema = z14.object({
+  /** Behind everything, and behind the picture where it does not reach. */
+  color: z14.string().default("#171717").describe("color"),
+  /** A URL, or an uploaded picture. Empty is the colour on its own. */
+  image: z14.string().default(""),
+  fit: z14.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: z14.number().min(0).max(1).default(0.25),
+  /** Out of focus, for the same reason. */
+  blur: z14.number().min(0).max(1).default(0.2)
+});
 var sceneSchema = z14.object({
-  lighting: z14.enum(lightingNames).default("studio")
+  lighting: z14.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:");
@@ -1332,6 +1428,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 },
@@ -2266,7 +2389,6 @@ function getIdlePreset(name) {
 }
 
 // src/scene/lighting.ts
-import { z as z22 } from "zod";
 var lightingPresets = {
   studio: {
     id: "studio",
@@ -2427,46 +2549,14 @@ var lightingPresets = {
 function getLightingPreset(name) {
   return lightingPresets[name];
 }
-var lightSchema = z22.object({
-  /** Tone-mapping exposure — the stop the whole picture is printed at. */
-  exposure: z22.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: z22.enum(filmNames).optional(),
-  /** Key light strength. */
-  key: z22.number().min(0).max(12).optional(),
-  /** Key light colour. */
-  color: z22.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: z22.number().min(-180).max(180).optional(),
-  /** How high the key stands, degrees above the horizon. */
-  height: z22.number().min(-30).max(89).optional(),
-  /** Flat fill from every direction at once. Cheap, and it kills form — reach for `studio` first. */
-  ambient: z22.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: z22.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: z22.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
   };
@@ -3053,11 +3143,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;
 }
@@ -3190,6 +3280,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;
@@ -3240,6 +3433,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);
@@ -3451,13 +3645,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;
@@ -3468,15 +3662,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() {
@@ -3512,19 +3706,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++) {
@@ -3632,8 +3826,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);
@@ -4386,6 +4580,7 @@ var PaperMesh = forwardRef(function PaperMesh2(props, ref) {
     props.interactive && !isCloth && behavior?.handles?.map((h, i) => /* @__PURE__ */ jsxs(
       "mesh",
       {
+        userData: { paperlabChrome: true },
         ref: (m) => {
           handleRefs.current[i] = m;
         },
@@ -4529,7 +4724,7 @@ var toneMappings = {
   neutral: THREE9.NeutralToneMapping,
   filmic: THREE9.ACESFilmicToneMapping
 };
-function mulberry32(seed) {
+function mulberry322(seed) {
   let a = seed;
   return () => {
     a |= 0;
@@ -4563,7 +4758,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],
@@ -4711,9 +4906,75 @@ function PaperLighting({
   ] });
 }
 
-// src/field/dropZones.tsx
+// src/scene/backdrop.tsx
 import * as THREE10 from "three";
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useSyncExternalStore } from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useThree as useThree3 } from "@react-three/fiber";
+function PaperBackdrop({ backdrop }) {
+  const scene = useThree3((s) => s.scene);
+  const size = useThree3((s) => s.size);
+  const [image, setImage] = useState4(null);
+  const src = backdrop?.image ?? "";
+  useEffect7(() => {
+    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 });
+  useEffect7(() => {
+    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/field/dropZones.tsx
+import * as THREE11 from "three";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef5, useSyncExternalStore } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var DropZoneRegistry = class {
   zones = /* @__PURE__ */ new Map();
@@ -4771,10 +5032,10 @@ function DropZone(props) {
   const registry4 = useContext2(DropZoneContext);
   const { id, accept, bounds, highlight = "glow", onPlace } = props;
   const place = useRef5(onPlace);
-  useEffect7(() => {
+  useEffect8(() => {
     place.current = onPlace;
   }, [onPlace]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!registry4) return;
     return registry4.register({
       id,
@@ -4793,12 +5054,12 @@ function DropZoneVisual({ registry: registry4, config }) {
   const style = config.highlight ?? "glow";
   const [w, h] = config.bounds.size;
   const edges = useMemo5(() => {
-    const plane = new THREE10.PlaneGeometry(w, h);
-    const geo = new THREE10.EdgesGeometry(plane);
+    const plane = new THREE11.PlaneGeometry(w, h);
+    const geo = new THREE11.EdgesGeometry(plane);
     plane.dispose();
     return geo;
   }, [w, h]);
-  useEffect7(() => () => edges.dispose(), [edges]);
+  useEffect8(() => () => edges.dispose(), [edges]);
   return /* @__PURE__ */ jsxs3("group", { position: config.bounds.position, children: [
     style !== "outline" && /* @__PURE__ */ jsxs3("mesh", { children: [
       /* @__PURE__ */ jsx6("planeGeometry", { args: [w, h] }),
@@ -4817,18 +5078,18 @@ function DropZoneVisual({ registry: registry4, config }) {
 }
 
 // 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),
+import { z as z22 } from "zod";
+var sheetLayoutSchema = z22.object({
+  rows: z22.number().int().min(1).max(12).default(2),
+  columns: z22.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),
+  gutter: z22.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),
+  cellWidth: z22.number().min(0.1).max(4).default(0.72),
+  cellHeight: z22.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)
+  backing: z22.boolean().default(true),
+  backingMargin: z22.number().min(0).max(1).default(0.12)
 });
 var SHEET_LIFT = 0.012;
 function withSheetCellFromPaper(parsed, rawOptions, paperDims) {
@@ -4875,18 +5136,18 @@ function tornEdgesOnDetach(i, o) {
 }
 
 // src/stage/path.ts
-import { z as z24 } from "zod";
-var walkPathSchema = z24.object({
+import { z as z23 } from "zod";
+var walkPathSchema = z23.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: z24.array(z24.tuple([z24.number(), z24.number()])).min(2).default([
+  points: z23.array(z23.tuple([z23.number(), z23.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: z24.boolean().default(false)
+  closed: z23.boolean().default(false)
 });
 var SAMPLES_PER_SEGMENT = 24;
 var EPSILON = 1e-6;
@@ -5001,7 +5262,7 @@ function getWalkPath(options) {
 }
 
 // src/field/layouts/index.ts
-import { z as z25 } from "zod";
+import { z as z24 } from "zod";
 var DEFAULT_SHEET = { width: 1, height: 1.4 };
 var TAU3 = Math.PI * 2;
 var DEG7 = Math.PI / 180;
@@ -5013,9 +5274,9 @@ function jitter2(seed, i) {
 function ramp(i, n) {
   return n > 1 ? i / (n - 1) : 1;
 }
-var ringSchema = z25.object({
-  radius: z25.number().min(0.5).max(12).default(2.6),
-  tiltDeg: z25.number().min(-45).max(45).default(8)
+var ringSchema = z24.object({
+  radius: z24.number().min(0.5).max(12).default(2.6),
+  tiltDeg: z24.number().min(-45).max(45).default(8)
 });
 var ring = {
   id: "ring",
@@ -5033,15 +5294,15 @@ var ring = {
     };
   }
 };
-var fanSchema = z25.object({
+var fanSchema = z24.object({
   /** Total angular sweep from the first sheet to the last, degrees. */
-  sweep: z25.number().min(0).max(180).default(72),
+  sweep: z24.number().min(0).max(180).default(72),
   /** Where the shared pin sits, in half-sheet-heights below center. 1 = the bottom edge. */
-  hinge: z25.number().min(0).max(4).default(1.15),
+  hinge: z24.number().min(0).max(4).default(1.15),
   /** Thickness step so the sheets stack in order instead of z-fighting. */
-  lift: z25.number().min(2e-3).max(0.08).default(0.012),
+  lift: z24.number().min(2e-3).max(0.08).default(0.012),
   /** How much flatter the middle of the fan sits than its outer sheets. */
-  bow: z25.number().min(0).max(1).default(0.7)
+  bow: z24.number().min(0).max(1).default(0.7)
 });
 var fan = {
   id: "fan",
@@ -5061,16 +5322,16 @@ var fan = {
     };
   }
 };
-var spreadSchema = z25.object({
+var spreadSchema = z24.object({
   /** How far each sheet slides past the one below it. */
-  slip: z25.number().min(0.02).max(2).default(0.3),
+  slip: z24.number().min(0.02).max(2).default(0.3),
   /** Direction of the slide, degrees. 0 slides right, 90 slides up. */
-  angle: z25.number().min(-180).max(180).default(28),
-  lift: z25.number().min(2e-3).max(0.08).default(0.012),
+  angle: z24.number().min(-180).max(180).default(28),
+  lift: z24.number().min(2e-3).max(0.08).default(0.012),
   /** How much more the sheets at the far end of the slide bow. */
-  bow: z25.number().min(0).max(1).default(0.6),
+  bow: z24.number().min(0).max(1).default(0.6),
   /** Nothing hand-slid is perfectly square — a touch of per-sheet rotation. */
-  drift: z25.number().min(0).max(1).default(0.15)
+  drift: z24.number().min(0).max(1).default(0.15)
 });
 var spread = {
   id: "spread",
@@ -5088,15 +5349,15 @@ var spread = {
     };
   }
 };
-var pileSchema = z25.object({
+var pileSchema = z24.object({
   /** How far sheets wander from the center of the heap. */
-  scatter: z25.number().min(0).max(2).default(0.22),
+  scatter: z24.number().min(0).max(2).default(0.22),
   /** Widest angle a sheet sits off square, degrees. */
-  turn: z25.number().min(0).max(180).default(24),
-  lift: z25.number().min(2e-3).max(0.08).default(0.011),
+  turn: z24.number().min(0).max(180).default(24),
+  lift: z24.number().min(2e-3).max(0.08).default(0.011),
   /** How flat the sheets underneath are pressed by the ones on top. */
-  press: z25.number().min(0).max(1).default(0.85),
-  seed: z25.number().int().min(0).max(9999).default(3)
+  press: z24.number().min(0).max(1).default(0.85),
+  seed: z24.number().int().min(0).max(9999).default(3)
 });
 var pile = {
   id: "pile",
@@ -5112,12 +5373,12 @@ var pile = {
     };
   }
 };
-var wallSchema = z25.object({
-  gapX: z25.number().min(0.05).max(1).default(0.22),
-  gapY: z25.number().min(0.05).max(1).default(0.3),
-  jitterAmt: z25.number().min(0).max(1).default(0.25),
+var wallSchema = z24.object({
+  gapX: z24.number().min(0.05).max(1).default(0.22),
+  gapY: z24.number().min(0.05).max(1).default(0.3),
+  jitterAmt: z24.number().min(0).max(1).default(0.25),
   /** Spread of sag across the wall — no two pinned sheets hang alike. */
-  sag: z25.number().min(0).max(1).default(0.45)
+  sag: z24.number().min(0).max(1).default(0.45)
 });
 var wall = {
   id: "wall",
@@ -5143,15 +5404,15 @@ var wall = {
     };
   }
 };
-var spillSchema = z25.object({
-  spreadX: z25.number().min(0.5).max(8).default(2.4),
-  spreadY: z25.number().min(0.5).max(8).default(1.5),
-  depth: z25.number().min(0).max(6).default(1.6),
+var spillSchema = z24.object({
+  spreadX: z24.number().min(0.5).max(8).default(2.4),
+  spreadY: z24.number().min(0.5).max(8).default(1.5),
+  depth: z24.number().min(0).max(6).default(1.6),
   /** How far sheets pitch and roll out of the picture plane. */
-  tumble: z25.number().min(0).max(1).default(0.5),
+  tumble: z24.number().min(0).max(1).default(0.5),
   /** Spread of bend across the sheets — a spill does not fold them alike. */
-  vary: z25.number().min(0).max(1).default(0.6),
-  seed: z25.number().int().min(0).max(9999).default(7)
+  vary: z24.number().min(0).max(1).default(0.6),
+  seed: z24.number().int().min(0).max(9999).default(7)
 });
 var spill = {
   id: "spill",
@@ -5176,13 +5437,13 @@ var spill = {
     };
   }
 };
-var sweepSchema = z25.object({
-  columns: z25.number().int().min(1).max(24).default(5),
+var sweepSchema = z24.object({
+  columns: z24.number().int().min(1).max(24).default(5),
   /** Breathing room around each specimen. */
-  gap: z25.number().min(0).max(2).default(0.22),
+  gap: z24.number().min(0).max(2).default(0.22),
   /** Deformation at the first specimen and at the last. */
-  from: z25.number().min(0).max(1).default(0),
-  to: z25.number().min(0).max(1).default(1)
+  from: z24.number().min(0).max(1).default(0),
+  to: z24.number().min(0).max(1).default(1)
 });
 var sweep = {
   id: "sweep",
@@ -5206,15 +5467,15 @@ var sweep = {
     };
   }
 };
-var bookSchema = z25.object({
+var bookSchema = z24.object({
   /** How far the outermost page lifts off the block, degrees. */
-  spread: z25.number().min(0).max(150).default(55),
+  spread: z24.number().min(0).max(150).default(55),
   /** Fraction of the pages bound to the left. 0 = a one-sided sample book. */
-  split: z25.number().min(0).max(1).default(0.5),
+  split: z24.number().min(0).max(1).default(0.5),
   /** Page thickness — the gap between pages of one block. */
-  lift: z25.number().min(1e-3).max(0.05).default(8e-3),
+  lift: z24.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: z25.number().min(0).max(1).default(0.6)
+  gutter: z24.number().min(0).max(1).default(0.6)
 });
 var book = {
   id: "book",
@@ -5241,11 +5502,11 @@ var book = {
     };
   }
 };
-var accordionSchema = z25.object({
+var accordionSchema = z24.object({
   /** How far each panel tilts off the strip's line, degrees. 0 = flat, 90 = shut. */
-  angle: z25.number().min(0).max(89).default(55),
+  angle: z24.number().min(0).max(89).default(55),
   /** A concertina holds its creases — how much bow the panels keep. */
-  slack: z25.number().min(0).max(1).default(0.15)
+  slack: z24.number().min(0).max(1).default(0.15)
 });
 var accordion = {
   id: "accordion",
@@ -5264,16 +5525,16 @@ var accordion = {
     };
   }
 };
-var rackSchema = z25.object({
+var rackSchema = z24.object({
   /** Gap along the row, as a fraction of the paper's width. Under 1 they overlap. */
-  spacing: z25.number().min(0.05).max(2).default(0.82),
+  spacing: z24.number().min(0.05).max(2).default(0.82),
   /** How far a sheet leans back off vertical, degrees. */
-  lean: z25.number().min(0).max(70).default(16),
+  lean: z24.number().min(0).max(70).default(16),
   /** How much that lean differs sheet to sheet — nothing propped is uniform. */
-  vary: z25.number().min(0).max(1).default(0.55),
+  vary: z24.number().min(0).max(1).default(0.55),
   /** Small rotations off square. */
-  sway: z25.number().min(0).max(1).default(0.35),
-  seed: z25.number().int().min(0).max(9999).default(5)
+  sway: z24.number().min(0).max(1).default(0.35),
+  seed: z24.number().int().min(0).max(9999).default(5)
 });
 var rack = {
   id: "rack",
@@ -5297,19 +5558,19 @@ var rack = {
     };
   }
 };
-var colonnadeSchema = z25.object({
+var colonnadeSchema = z24.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: z25.number().min(0.2).max(20).default(2.4),
+  aisle: z24.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: z25.number().min(0).max(1).default(0.3),
+  breathe: z24.number().min(0).max(1).default(0.3),
   /** Widest angle a banner turns off square to the aisle, degrees. */
-  twist: z25.number().min(0).max(90).default(22),
+  twist: z24.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: z25.number().min(0).max(0.45).default(0.05),
+  margin: z24.number().min(0).max(0.45).default(0.05),
   /** Spread of banner heights, 0..1. */
-  rise: z25.number().min(0).max(1).default(0.28),
+  rise: z24.number().min(0).max(1).default(0.28),
   /**
    * How far the banners lift off the floor, as a fraction of their height.
    *
@@ -5323,10 +5584,10 @@ var colonnadeSchema = z25.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: z25.number().min(-0.5).max(1).default(0),
+  hover: z24.number().min(-0.5).max(1).default(0),
   /** Spread of deformation — no two lengths of hung paper drape alike. */
-  drape: z25.number().min(0).max(1).default(0.5),
-  seed: z25.number().int().min(0).max(9999).default(2)
+  drape: z24.number().min(0).max(1).default(0.5),
+  seed: z24.number().int().min(0).max(9999).default(2)
 });
 function colonnadeStop(i, n, margin) {
   const side = i % 2 === 0 ? 1 : -1;
@@ -5401,10 +5662,25 @@ registerLayout(colonnade);
 registerLayout(sheet);
 
 // src/PaperField.tsx
-import * as THREE15 from "three";
+import * as THREE16 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";
+import { Canvas, useFrame as useFrame5, useThree as useThree6 } from "@react-three/fiber";
+import { forwardRef as forwardRef2, useEffect as useEffect14, useMemo as useMemo9, useRef as useRef8 } from "react";
+
+// src/scene/release.tsx
+import { useThree as useThree4 } from "@react-three/fiber";
+import { useEffect as useEffect9 } from "react";
+function ReleaseContextOnUnmount() {
+  const gl = useThree4((s) => s.gl);
+  useEffect9(
+    () => () => {
+      gl.forceContextLoss();
+      gl.dispose();
+    },
+    [gl]
+  );
+  return null;
+}
 
 // src/field/slots.ts
 var EMPTY_SET = /* @__PURE__ */ new Set();
@@ -5452,24 +5728,24 @@ function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions)
 }
 
 // src/field/fieldGroup.tsx
-import * as THREE12 from "three";
+import * as THREE13 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 { useEffect as useEffect11, 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";
+import * as THREE12 from "three";
+import { useEffect as useEffect10, useState as useState5 } 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 [atlas, setAtlas] = useState5(null);
   const stableContents = useStable(contents);
-  useEffect8(() => {
+  useEffect10(() => {
     let disposed = false;
     const aspect = sheet2.height / sheet2.width;
     const { cols, rows } = atlasGrid(contents.length, aspect);
@@ -5485,8 +5761,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) => {
@@ -5655,7 +5931,7 @@ function fieldShapeStack(config, progress) {
 
 // src/field/fieldGroup.tsx
 import { jsx as jsx7 } from "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;
@@ -5716,28 +5992,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]);
-  useEffect9(() => () => geometry.dispose(), [geometry]);
+  useEffect11(() => () => geometry.dispose(), [geometry]);
   const atlas = useContentAtlas(contents, config.sheet, stock);
   const shader = useMemo6(() => {
     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 {
@@ -5752,19 +6028,19 @@ function FieldGroup({
     config.surface.showThrough,
     config.surface.translucency
   ]);
-  useEffect9(() => {
+  useEffect11(() => {
     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]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!atlas) return;
     shader.uniforms.uAtlas.value = atlas.texture;
     shader.uniforms.uAtlasGrid.value.set(atlas.cols, atlas.rows);
   }, [atlas, shader]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!behavior || shared.reduced) return;
     const state = { p: progressRef.current };
     const tween = gsap3.to(state, {
@@ -5792,7 +6068,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;
@@ -5876,13 +6152,13 @@ function FieldGroup({
         children: /* @__PURE__ */ jsx7(
           CustomShaderMaterial2,
           {
-            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}`
         )
@@ -5928,8 +6204,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
-import * as THREE13 from "three";
-import { useEffect as useEffect10, useMemo as useMemo7 } from "react";
+import * as THREE14 from "three";
+import { useEffect as useEffect12, useMemo as useMemo7 } from "react";
 
 // src/content/backing.ts
 function silhouetteRects(o, count) {
@@ -6010,14 +6286,14 @@ function BackingSheet({
     c.height = Math.max(2, Math.round(height * scale));
     return c;
   }, [width, height]);
-  const texture = useMemo7(() => canvas ? new THREE13.CanvasTexture(canvas) : null, [canvas]);
+  const texture = useMemo7(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
   const removedKey = [...removed].sort((a, b) => a - b).join(",");
-  useEffect10(() => {
+  useEffect12(() => {
     if (!canvas || !texture) return;
     drawBacking(canvas, { options, count, tint: BACKING_TINT, removed });
     texture.needsUpdate = true;
   }, [canvas, texture, JSON.stringify(options), count, removedKey]);
-  useEffect10(() => () => texture?.dispose(), [texture]);
+  useEffect12(() => () => texture?.dispose(), [texture]);
   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 })
@@ -6025,10 +6301,10 @@ function BackingSheet({
 }
 
 // src/field/interactiveField.tsx
-import * as THREE14 from "three";
+import * as THREE15 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 useState5 } from "react";
+import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
+import { useContext as useContext3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var PICK_BEHAVIORS = /* @__PURE__ */ new Set(["peel", "carry"]);
 function InteractiveField(props) {
@@ -6038,12 +6314,12 @@ function InteractiveField(props) {
   const reduced = usePrefersReducedMotion(props.reducedMotion);
   const contextRegistry = useContext3(DropZoneContext);
   const registry4 = useMemo8(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
-  const camera = useThree3((s) => s.camera);
-  const gl = useThree3((s) => s.gl);
-  const controls = useThree3((s) => s.controls);
-  const [removed, setRemoved] = useState5(EMPTY_SET);
-  const [slotPatches, setSlotPatches] = useState5({});
-  const [slotStates, setSlotStates] = useState5({});
+  const camera = useThree5((s) => s.camera);
+  const gl = useThree5((s) => s.gl);
+  const controls = useThree5((s) => s.controls);
+  const [removed, setRemoved] = useState6(EMPTY_SET);
+  const [slotPatches, setSlotPatches] = useState6({});
+  const [slotStates, setSlotStates] = useState6({});
   const slotConfigs = useMemo8(
     () => papers.map((slot, i) => {
       const config = resolveFieldSlotConfig(slot, fallback, i, layoutId, layoutOptions);
@@ -6078,10 +6354,10 @@ function InteractiveField(props) {
     }
     props.onSlotStateChange?.(i, state);
   };
-  const raycaster = useMemo8(() => new THREE14.Raycaster(), []);
-  const planeScratch = useMemo8(() => new THREE14.Plane(new THREE14.Vector3(0, 0, 1), 0), []);
-  const pointScratch = useMemo8(() => new THREE14.Vector3(), []);
-  const ndcScratch = useMemo8(() => new THREE14.Vector2(), []);
+  const raycaster = useMemo8(() => new THREE15.Raycaster(), []);
+  const planeScratch = useMemo8(() => new THREE15.Plane(new THREE15.Vector3(0, 0, 1), 0), []);
+  const pointScratch = useMemo8(() => new THREE15.Vector3(), []);
+  const ndcScratch = useMemo8(() => new THREE15.Vector2(), []);
   const planePoint = (clientX, clientY, planeZ) => {
     const rect = gl.domElement.getBoundingClientRect();
     ndcScratch.set(
@@ -6244,12 +6520,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);
   };
-  useEffect11(() => {
+  useEffect13(() => {
     const move = (e) => onPointerMoveRef.current(e);
     const up = (e) => onPointerUpRef.current(e);
     window.addEventListener("pointermove", move);
@@ -6285,12 +6561,12 @@ 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;
@@ -6306,7 +6582,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];
@@ -6319,10 +6595,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"
   };
-  useEffect11(() => {
+  useEffect13(() => {
     const ref = props.a11yRef;
     if (!ref) return;
     ref.current = {
@@ -6375,7 +6651,7 @@ function InteractiveField(props) {
 }
 
 // src/field/keyboardMirror.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function fieldKeyboardStep(carry2, slot, key, controller) {
   if (!carry2) {
@@ -6421,7 +6697,7 @@ function FieldKeyboardMirror({
   papers,
   controller
 }) {
-  const [carrying, setCarrying] = useState6(null);
+  const [carrying, setCarrying] = useState7(null);
   const paperLabel = (slot, i) => {
     try {
       const config = resolveConfig({ preset: slot.preset });
@@ -6553,11 +6829,11 @@ var PaperFieldMesh = forwardRef2(
     const mountTimeRef = useRef8(-1);
     const morphRef = useRef8({ from: null, t: 1 });
     const prevLayout = useRef8({ id: layoutId, options: layoutOptions });
-    const gl = useThree4((s) => s.gl);
+    const gl = useThree6((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";
-    useEffect12(() => {
+    useEffect14(() => {
       const prev = prevLayout.current;
       if (prev.id !== layoutId || JSON.stringify(prev.options) !== JSON.stringify(layoutOptions)) {
         morphRef.current = { from: prev, t: 0 };
@@ -6565,7 +6841,7 @@ var PaperFieldMesh = forwardRef2(
         prevLayout.current = { id: layoutId, options: layoutOptions };
       }
     }, [layoutId, layoutOptions]);
-    useEffect12(() => {
+    useEffect14(() => {
       if (driver !== "drag") return;
       const el = gl.domElement;
       let lastX = null;
@@ -6649,9 +6925,9 @@ var PaperFieldMesh = forwardRef2(
   }
 );
 function FitCamera(meshProps) {
-  const camera = useThree4((s) => s.camera);
-  const width = useThree4((s) => s.size.width);
-  const height = useThree4((s) => s.size.height);
+  const camera = useThree6((s) => s.camera);
+  const width = useThree6((s) => s.size.width);
+  const height = useThree6((s) => s.size.height);
   const papersProp = useStable(meshProps.papers ?? null);
   const imagesProp = useStable(meshProps.images ?? null);
   const presetProp = useStable(meshProps.preset ?? null);
@@ -6664,8 +6940,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]);
-  useEffect12(() => {
-    if (!(camera instanceof THREE15.PerspectiveCamera)) return;
+  useEffect14(() => {
+    if (!(camera instanceof THREE16.PerspectiveCamera)) return;
     const { position, target } = fitCamera(
       field.layout,
       field.n,
@@ -6680,7 +6956,8 @@ function FitCamera(meshProps) {
   }, [camera, width, height, field]);
   return null;
 }
-var PaperField = forwardRef2(function PaperField2({ children, className, style, ...meshProps }, ref) {
+var PaperField = forwardRef2(function PaperField2({ children, className, style, scene, ...meshProps }, ref) {
+  const rig = sceneSchema.parse(scene ?? {});
   const registry4 = useMemo9(() => new DropZoneRegistry(), []);
   const a11yRef = useRef8(null);
   const papers = useMemo9(
@@ -6696,19 +6973,11 @@ var PaperField = forwardRef2(function PaperField2({ children, className, style,
   return /* @__PURE__ */ jsx11("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ jsxs7(DropZoneContext.Provider, { value: registry4, children: [
     /* @__PURE__ */ jsxs7(Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
       /* @__PURE__ */ jsx11(FitCamera, { ...meshProps }),
-      /* @__PURE__ */ jsx11("ambientLight", { intensity: 0.7 }),
-      /* @__PURE__ */ jsx11(
-        "directionalLight",
-        {
-          position: [3, 5, 4],
-          intensity: 1.4,
-          castShadow: true,
-          "shadow-mapSize": [1024, 1024],
-          "shadow-normalBias": 0.05
-        }
-      ),
+      /* @__PURE__ */ jsx11(PaperBackdrop, { backdrop: rig.backdrop }),
+      /* @__PURE__ */ jsx11(PaperLighting, { preset: rig.lighting, light: rig.light, floor: -2.4, scale: 14 }),
       /* @__PURE__ */ jsx11(PaperFieldMesh, { ref, a11yControllerRef: a11yRef, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ jsx11(ReleaseContextOnUnmount, {})
     ] }),
     interactive && /* @__PURE__ */ jsx11(FieldKeyboardMirror, { papers, controller: a11yRef })
   ] }) });
@@ -6758,7 +7027,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);
@@ -6769,14 +7039,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
@@ -6826,7 +7117,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:
@@ -6839,7 +7133,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} />
@@ -6869,11 +7163,17 @@ export {
   segmentsForArc,
   segmentsForSine,
   stockNames,
+  washSchema,
+  contentNames,
+  contentSchemaFor,
   paperEdges,
   behaviorConfigSchema,
   physicsNames,
   clothConfigSchema,
   lightingNames,
+  lightSchema,
+  backdropSchema,
+  sceneSchema,
   coreStateNames,
   stateDefSchema,
   paperStatesSchema,
@@ -6897,7 +7197,6 @@ export {
   getBehavior,
   listBehaviors,
   idleNames,
-  lightSchema,
   lightAngles,
   resolveLighting,
   LightRig,
@@ -6913,6 +7212,8 @@ export {
   PaperMesh,
   cssColorOr,
   PaperLighting,
+  PaperBackdrop,
+  ReleaseContextOnUnmount,
   DropZone,
   sheetLayoutSchema,
   buildDisplacementGLSL,
@@ -6930,4 +7231,4 @@ export {
   describeConfig,
   buildAgentPayload
 };
-//# sourceMappingURL=chunk-4ZU5DZEF.js.map
+//# sourceMappingURL=chunk-HRXQTJFS.js.map