paperlab 0.0.1 → 0.2.0

package/dist/index.js

@@ -3,13 +3,13 @@ import { Canvas } from "@react-three/fiber";
 import { forwardRef as forwardRef2, useMemo as useMemo5 } from "react";
 
 // src/PaperMesh.tsx
-import * as THREE6 from "three";
+import * as THREE7 from "three";
 import { gsap as gsap2 } from "gsap";
 import { useFrame, useThree } from "@react-three/fiber";
 import { forwardRef, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef2 } from "react";
 
 // src/config/schema.ts
-import { z as z11 } from "zod";
+import { z as z12 } from "zod";
 
 // src/config/merge.ts
 function mergeConfig(base, override) {
@@ -121,6 +121,7 @@ void FN(inout vec3 p, vec2 uv, float t) {
 }
 `
     ),
+    strength: "amount",
     uniforms: (o) => {
       const [sx, sy] = CORNER_SIGNS[o.corner];
       return {
@@ -582,16 +583,62 @@ var flight = {
   }
 };
 
+// src/behaviors/crumple.ts
+import { z as z11 } from "zod";
+var crumpleBehaviorOptionsSchema = z11.object({
+  /** 0 = flat sheet, 1 = crushed. */
+  progress: z11.number().min(0).max(1).default(0.55),
+  /** Few big facets at 0, many small ones at 1. */
+  coarseness: z11.number().min(0).max(1).default(0.35),
+  /** How far the sheet curls in on itself as it crushes. */
+  ball: z11.number().min(0).max(1).default(0.5),
+  /** A different crush of the same paper. */
+  seed: z11.number().int().min(0).max(7).default(0)
+});
+var crumpleBehavior = {
+  id: "crumple",
+  label: "Crumple",
+  defaults: crumpleBehaviorOptionsSchema.parse({}),
+  optionsSchema: crumpleBehaviorOptionsSchema,
+  progressParam: "progress",
+  duration: 2.6,
+  loopMode: "yoyo",
+  stack(o) {
+    return [
+      {
+        type: "crumple",
+        options: {
+          amount: o.progress,
+          scale: 1.5 + o.coarseness * 4.5,
+          pull: 0.5,
+          seed: o.seed
+        }
+      },
+      // The sheet closing in on itself. Paper does not crush flat, and
+      // without this the result reads as texture rather than as a ball.
+      {
+        type: "bend",
+        options: { curvature: o.progress * o.ball * 0.9, angle: 35 }
+      }
+    ];
+  }
+};
+
 // src/config/schema.ts
-var sheetSchema = z11.object({
+var sheetSchema = z12.object({
   /** World units. A letter sheet is ~1 × 1.4, a receipt ~1 × 2.6. */
-  width: z11.number().positive().max(20).default(1),
-  height: z11.number().positive().max(20).default(1.4),
+  width: z12.number().positive().max(20).default(1),
+  height: z12.number().positive().max(20).default(1.4),
   /** Visual thickness in mm-ish units; drives edge/shadow treatment, not geometry (yet). */
-  thickness: z11.number().min(0).max(2).default(0.2),
-  /** 'auto' sizes the grid from the active deformers' needs. */
-  segments: z11.union([z11.literal("auto"), z11.number().int().min(2).max(256)]).default("auto"),
-  cornerRadius: z11.number().min(0).max(0.5).default(0)
+  thickness: z12.number().min(0).max(2).default(0.2),
+  /**
+   * `'auto'` gives the LONG side 72 segments, whatever is on the sheet — a
+   * deformer's `minSegments` can only raise that floor, never lower it, so in
+   * practice a blank sheet is tessellated exactly as finely as a crumpled
+   * one. Set a number to take the decision yourself.
+   */
+  segments: z12.union([z12.literal("auto"), z12.number().int().min(2).max(256)]).default("auto"),
+  cornerRadius: z12.number().min(0).max(0.5).default(0)
 });
 var stockNames = [
   "printer",
@@ -602,46 +649,46 @@ var stockNames = [
   "photo-gloss",
   "sticker"
 ];
-var stockSchema = z11.enum(stockNames);
-var blankContentBase = z11.object({
-  type: z11.literal("blank")
+var stockSchema = z12.enum(stockNames);
+var blankContentBase = z12.object({
+  type: z12.literal("blank")
 });
-var imageContentBase = z11.object({
-  type: z11.literal("image"),
-  src: z11.string(),
-  fit: z11.enum(["cover", "contain"]).default("cover"),
+var imageContentBase = z12.object({
+  type: z12.literal("image"),
+  src: z12.string(),
+  fit: z12.enum(["cover", "contain"]).default("cover"),
   /** Read by the hidden DOM mirror and the no-WebGL fallback. */
-  alt: z11.string().optional()
+  alt: z12.string().optional()
 });
-var textContentBase = z11.object({
-  type: z11.literal("text"),
-  text: z11.string().default("Dear reader,"),
-  font: z11.string().default('Georgia, "Times New Roman", serif'),
+var textContentBase = z12.object({
+  type: z12.literal("text"),
+  text: z12.string().default("Dear reader,"),
+  font: z12.string().default('Georgia, "Times New Roman", serif'),
   /** px at texture resolution (long edge = 1024 logical px before DPR). */
-  size: z11.number().min(8).max(256).default(44),
-  weight: z11.number().min(100).max(900).default(400),
-  color: z11.string().default("#2b2620"),
-  align: z11.enum(["left", "center", "right"]).default("left"),
+  size: z12.number().min(8).max(256).default(44),
+  weight: z12.number().min(100).max(900).default(400),
+  color: z12.string().default("#2b2620"),
+  align: z12.enum(["left", "center", "right"]).default("left"),
   /** Fraction of the short edge. */
-  padding: z11.number().min(0).max(0.4).default(0.09),
-  lineHeight: z11.number().min(0.8).max(3).default(1.45)
+  padding: z12.number().min(0).max(0.4).default(0.09),
+  lineHeight: z12.number().min(0.8).max(3).default(1.45)
 });
-var receiptContentBase = z11.object({
-  type: z11.literal("receipt"),
-  store: z11.string().default("PAPERLAB"),
-  address: z11.string().default("124 PAPER ST"),
-  items: z11.array(z11.object({ name: z11.string(), price: z11.number() })).default([
+var receiptContentBase = z12.object({
+  type: z12.literal("receipt"),
+  store: z12.string().default("PAPERLAB"),
+  address: z12.string().default("124 PAPER ST"),
+  items: z12.array(z12.object({ name: z12.string(), price: z12.number() })).default([
     { name: "CURL, TRUE", price: 12 },
     { name: "ROLL, TIGHT", price: 8.5 },
     { name: "SHEET, ONE", price: 0.99 }
   ]),
-  taxRate: z11.number().min(0).max(1).default(0.08),
-  barcode: z11.boolean().default(true),
+  taxRate: z12.number().min(0).max(1).default(0.08),
+  barcode: z12.boolean().default(true),
   /** Fixed so presets render deterministically; omit for "now". */
-  timestamp: z11.string().optional(),
-  footer: z11.string().default("KEEP FOR YOUR RECORDS")
+  timestamp: z12.string().optional(),
+  footer: z12.string().default("KEEP FOR YOUR RECORDS")
 });
-var backContentSchema = z11.discriminatedUnion("type", [
+var backContentSchema = z12.discriminatedUnion("type", [
   blankContentBase,
   imageContentBase,
   textContentBase,
@@ -652,137 +699,140 @@ var blankContentSchema = blankContentBase.extend(withBack);
 var imageContentSchema = imageContentBase.extend(withBack);
 var textContentSchema = textContentBase.extend(withBack);
 var receiptContentSchema = receiptContentBase.extend(withBack);
-var contentSchema = z11.discriminatedUnion("type", [
+var contentSchema = z12.discriminatedUnion("type", [
   blankContentSchema,
   imageContentSchema,
   textContentSchema,
   receiptContentSchema
 ]);
 var paperEdges = ["top", "right", "bottom", "left"];
-var surfaceSchema = z11.object({
+var surfaceSchema = z12.object({
   /** Paper fiber noise, 0..1. */
-  grain: z11.number().min(0).max(1).optional(),
+  grain: z12.number().min(0).max(1).optional(),
+  /** Light passing through the sheet from behind, 0..1. Stock defaults apply. */
+  translucency: z12.number().min(0).max(1).optional(),
   /** Torn-edge alpha with a lightened fiber band. */
-  deckle: z11.object({
-    edges: z11.array(z11.enum(paperEdges)).default(["bottom"]),
-    roughness: z11.number().min(0).max(1).default(0.5)
+  deckle: z12.object({
+    edges: z12.array(z12.enum(paperEdges)).default(["bottom"]),
+    roughness: z12.number().min(0).max(1).default(0.5)
   }).optional(),
   /** Visual AO/highlight companion to the fold deformer. */
-  creaseLines: z11.object({
+  creaseLines: z12.object({
     /** Crease line direction, degrees (0 = horizontal lines). */
-    angle: z11.number().min(-360).max(360).default(0),
+    angle: z12.number().min(-360).max(360).default(0),
     /** Positions across the sheet, 0..1 fractions. */
-    positions: z11.array(z11.number().min(0).max(1)).default([1 / 3, 2 / 3]),
-    strength: z11.number().min(0).max(1).default(0.5)
+    positions: z12.array(z12.number().min(0).max(1)).default([1 / 3, 2 / 3]),
+    strength: z12.number().min(0).max(1).default(0.5)
   }).optional(),
   /** Yellowing + foxing spots, 0..1. */
-  aging: z11.number().min(0).max(1).optional(),
+  aging: z12.number().min(0).max(1).optional(),
   /** Reversed front-content ghost on the backside, 0..1. Stock defaults apply. */
-  showThrough: z11.number().min(0).max(1).optional(),
+  showThrough: z12.number().min(0).max(1).optional(),
   /**
    * Postage-stamp perforation: alpha-punched semicircular holes along chosen
    * edges. `state` flips an edge to a ripped-through profile (torn) — set
    * automatically when a paper detaches from a `sheet` field, manual wins.
    */
-  perforation: z11.object({
-    edges: z11.union([z11.array(z11.enum(paperEdges)), z11.literal("all")]).default("all"),
+  perforation: z12.object({
+    edges: z12.union([z12.array(z12.enum(paperEdges)), z12.literal("all")]).default("all"),
     /** World units — default tuned to stamp scale. */
-    holeRadius: z11.number().min(2e-3).max(0.1).default(0.016),
-    spacing: z11.number().min(0.01).max(0.5).default(0.055),
-    state: z11.object({
-      top: z11.enum(["intact", "torn"]).optional(),
-      right: z11.enum(["intact", "torn"]).optional(),
-      bottom: z11.enum(["intact", "torn"]).optional(),
-      left: z11.enum(["intact", "torn"]).optional()
+    holeRadius: z12.number().min(2e-3).max(0.1).default(0.016),
+    spacing: z12.number().min(0.01).max(0.5).default(0.055),
+    state: z12.object({
+      top: z12.enum(["intact", "torn"]).optional(),
+      right: z12.enum(["intact", "torn"]).optional(),
+      bottom: z12.enum(["intact", "torn"]).optional(),
+      left: z12.enum(["intact", "torn"]).optional()
     }).default({})
   }).optional()
 });
-var behaviorConfigSchema = z11.discriminatedUnion("type", [
-  peelOptionsSchema.extend({ type: z11.literal("peel") }),
-  unrollOptionsSchema.extend({ type: z11.literal("unroll") }),
-  flipOptionsSchema.extend({ type: z11.literal("flip") }),
-  letterFoldOptionsSchema.extend({ type: z11.literal("letter-fold") }),
-  hangOptionsSchema.extend({ type: z11.literal("hang") }),
-  flyOptionsSchema.extend({ type: z11.literal("fly") }),
-  fallOptionsSchema.extend({ type: z11.literal("fall") }),
-  carryOptionsSchema.extend({ type: z11.literal("carry") }),
-  flightOptionsSchema.extend({ type: z11.literal("flight") })
+var behaviorConfigSchema = z12.discriminatedUnion("type", [
+  peelOptionsSchema.extend({ type: z12.literal("peel") }),
+  unrollOptionsSchema.extend({ type: z12.literal("unroll") }),
+  flipOptionsSchema.extend({ type: z12.literal("flip") }),
+  letterFoldOptionsSchema.extend({ type: z12.literal("letter-fold") }),
+  hangOptionsSchema.extend({ type: z12.literal("hang") }),
+  flyOptionsSchema.extend({ type: z12.literal("fly") }),
+  fallOptionsSchema.extend({ type: z12.literal("fall") }),
+  carryOptionsSchema.extend({ type: z12.literal("carry") }),
+  flightOptionsSchema.extend({ type: z12.literal("flight") }),
+  crumpleBehaviorOptionsSchema.extend({ type: z12.literal("crumple") })
 ]);
-var deformerInstanceSchema = z11.object({
-  type: z11.string(),
-  options: z11.record(z11.unknown()).default({}),
-  enabled: z11.boolean().default(true)
+var deformerInstanceSchema = z12.object({
+  type: z12.string(),
+  options: z12.record(z12.unknown()).default({}),
+  enabled: z12.boolean().default(true)
 });
 var physicsNames = ["none", "float", "tumble", "dangle", "taped", "breeze"];
-var clothConfigSchema = z11.object({
-  type: z11.literal("cloth"),
-  pins: z11.enum(["top-edge", "top-corners", "corner", "none"]).default("top-edge"),
-  wind: z11.number().min(0).max(1).default(0.3),
+var clothConfigSchema = z12.object({
+  type: z12.literal("cloth"),
+  pins: z12.enum(["top-edge", "top-corners", "corner", "none"]).default("top-edge"),
+  wind: z12.number().min(0).max(1).default(0.3),
   /** Bend stiffness: 1 = crisp paper, 0 = silk. */
-  stiffness: z11.number().min(0).max(1).default(0.8),
-  gravity: z11.number().min(0).max(2).default(1),
+  stiffness: z12.number().min(0).max(1).default(0.8),
+  gravity: z12.number().min(0).max(2).default(1),
   /** Local-space ground plane the sheet settles onto. */
-  floor: z11.number().min(-5).max(0).default(-1.4)
+  floor: z12.number().min(-5).max(0).default(-1.4)
 });
-var physicsSchema = z11.union([
-  z11.enum(physicsNames),
-  z11.literal("cloth").transform(() => clothConfigSchema.parse({ type: "cloth" })),
+var physicsSchema = z12.union([
+  z12.enum(physicsNames),
+  z12.literal("cloth").transform(() => clothConfigSchema.parse({ type: "cloth" })),
   clothConfigSchema
 ]);
-var lightingNames = ["studio", "window", "leaves", "goldenhour", "noir"];
-var sceneSchema = z11.object({
-  lighting: z11.enum(lightingNames).default("studio")
+var lightingNames = ["studio", "window", "leaves", "goldenhour", "noir", "nave"];
+var sceneSchema = z12.object({
+  lighting: z12.enum(lightingNames).default("studio")
 });
 var coreStateNames = ["rest", "hover", "pressed", "picked", "placed"];
 var isStateName = (s) => coreStateNames.includes(s) || s.startsWith("custom:");
-var stateNameSchema = z11.string().refine(isStateName, {
+var stateNameSchema = z12.string().refine(isStateName, {
   message: `state names are ${coreStateNames.join(", ")} or "custom:<name>"`
 });
-var stateTransitionSchema = z11.object({
-  duration: z11.number().min(0).max(5).default(0.35),
+var stateTransitionSchema = z12.object({
+  duration: z12.number().min(0).max(5).default(0.35),
   /** GSAP ease name. */
-  ease: z11.string().default("power2.out")
+  ease: z12.string().default("power2.out")
 });
-var stateDefSchema = z11.object({
+var stateDefSchema = z12.object({
   /** Deep-partial override of the paper schema (behavior params, surface, …). */
-  overrides: z11.record(z11.unknown()).default({}),
+  overrides: z12.record(z12.unknown()).default({}),
   /** Transition INTO this state. */
   transition: stateTransitionSchema.default({}),
   /** Chained actions after arriving. v1: 'emit:<event>' only. */
-  onEnter: z11.array(z11.string().regex(/^emit:[\w-]+$/, 'v1 actions are "emit:<event>"')).default([])
+  onEnter: z12.array(z12.string().regex(/^emit:[\w-]+$/, 'v1 actions are "emit:<event>"')).default([])
 });
-var paperStatesSchema = z11.object({
+var paperStatesSchema = z12.object({
   initial: stateNameSchema.default("rest"),
-  states: z11.record(z11.string(), stateDefSchema).default({}).refine((rec) => Object.keys(rec).every(isStateName), {
+  states: z12.record(z12.string(), stateDefSchema).default({}).refine((rec) => Object.keys(rec).every(isStateName), {
     message: `state names are ${coreStateNames.join(", ")} or "custom:<name>"`
   }),
   /** World-units drag distance that flips pressed → picked (pick-enabled behaviors only). */
-  pickThreshold: z11.number().min(5e-3).max(1).default(0.1)
+  pickThreshold: z12.number().min(5e-3).max(1).default(0.1)
 });
-var metaSchema = z11.object({
-  name: z11.string().default("untitled"),
-  author: z11.string().optional(),
-  version: z11.string().default("0"),
-  tags: z11.array(z11.string()).default([])
+var metaSchema = z12.object({
+  name: z12.string().default("untitled"),
+  author: z12.string().optional(),
+  version: z12.string().default("0"),
+  tags: z12.array(z12.string()).default([])
 });
-var paperConfigSchema = z11.object({
+var paperConfigSchema = z12.object({
   meta: metaSchema.default({}),
   sheet: sheetSchema.default({}),
   stock: stockSchema.default("printer"),
   content: contentSchema.default({ type: "blank" }),
   /** A behavior OR a raw deformer stack — if both are present, `deformers` wins (it's the fork). */
   behavior: behaviorConfigSchema.optional(),
-  deformers: z11.array(deformerInstanceSchema).optional(),
+  deformers: z12.array(deformerInstanceSchema).optional(),
   surface: surfaceSchema.default({}),
   physics: physicsSchema.default("none"),
   scene: sceneSchema.default({}),
-  onTwos: z11.boolean().default(false),
+  onTwos: z12.boolean().default(false),
   /** Interaction state machine — overrides-on-base diffs (spec M6 §1). */
   states: paperStatesSchema.optional()
 }).superRefine((config, ctx) => {
   if (typeof config.physics === "object" && (config.behavior || config.deformers)) {
     ctx.addIssue({
-      code: z11.ZodIssueCode.custom,
+      code: z12.ZodIssueCode.custom,
       path: ["physics"],
       message: "cloth physics and behavior/deformers are exclusive \u2014 cloth owns the vertices (pick Shape OR Simulation)"
     });
@@ -793,7 +843,7 @@ var paperConfigSchema = z11.object({
       if (!def) continue;
       if (def.overrides.states !== void 0) {
         ctx.addIssue({
-          code: z11.ZodIssueCode.custom,
+          code: z12.ZodIssueCode.custom,
           path: ["states", "states", name, "overrides"],
           message: "state overrides cannot override `states` (no nested state machines)"
         });
@@ -804,7 +854,7 @@ var paperConfigSchema = z11.object({
       if (!result.success) {
         const first = result.error.issues[0];
         ctx.addIssue({
-          code: z11.ZodIssueCode.custom,
+          code: z12.ZodIssueCode.custom,
           path: ["states", "states", name, "overrides"],
           message: `state "${name}" overrides don't validate against the paper schema: ${first ? `${first.path.join(".")} \u2014 ${first.message}` : "invalid"}`
         });
@@ -848,6 +898,7 @@ var stocks = {
     color: "#fbfaf7",
     roughness: 0.88,
     opacity: 1,
+    translucency: 0.2,
     inkColor: "#222222",
     banding: 0,
     defaultSurface: { grain: 0.12 },
@@ -860,6 +911,7 @@ var stocks = {
     color: "#f6f3e9",
     roughness: 0.62,
     opacity: 1,
+    translucency: 0.34,
     inkColor: "#3a3a3a",
     banding: 0.35,
     defaultSurface: { aging: 0.1 },
@@ -872,6 +924,7 @@ var stocks = {
     color: "#c9a06c",
     roughness: 0.96,
     opacity: 1,
+    translucency: 0.08,
     inkColor: "#33261a",
     banding: 0,
     defaultSurface: { grain: 0.5 },
@@ -884,6 +937,7 @@ var stocks = {
     color: "#e9e4d6",
     roughness: 0.95,
     opacity: 1,
+    translucency: 0.38,
     inkColor: "#3d3a34",
     banding: 0,
     defaultSurface: { grain: 0.7, aging: 0.15 },
@@ -896,6 +950,7 @@ var stocks = {
     color: "#f4f2ec",
     roughness: 0.42,
     opacity: 0.62,
+    translucency: 0.86,
     inkColor: "#4a453d",
     banding: 0,
     defaultSurface: {},
@@ -908,6 +963,7 @@ var stocks = {
     color: "#ffffff",
     roughness: 0.22,
     opacity: 1,
+    translucency: 0.03,
     inkColor: "#111111",
     banding: 0,
     defaultSurface: {},
@@ -922,6 +978,7 @@ var stocks = {
     color: "#ffffff",
     roughness: 0.3,
     opacity: 1,
+    translucency: 0.06,
     inkColor: "#1a1a1a",
     banding: 0,
     defaultSurface: {},
@@ -1079,7 +1136,25 @@ var builtins = {
       type: "image",
       src: "https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1200&q=80",
       fit: "cover"
-    }
+    },
+    // No print lies perfectly flat. A shade of bow is the whole difference
+    // between a sheet of paper and a rectangle — and since this is the field
+    // starter, it is what a layout's per-sheet bias has to scale.
+    deformers: [{ type: "bend", options: { curvature: 0.35, angle: 0 } }]
+  },
+  "crumpled-note": {
+    meta: { name: "Crumpled note", tags: ["crumple", "text", "handled"] },
+    sheet: { width: 1.1, height: 1.4 },
+    stock: "printer",
+    content: {
+      type: "text",
+      text: "I wrote it out three times\nand threw all three away.",
+      size: 42
+    },
+    behavior: { type: "crumple", progress: 0.62, coarseness: 0.4, ball: 0.55 },
+    // Handled paper is dirty paper: the grain is what stops the facets
+    // reading as folded plastic.
+    surface: { grain: 0.5, aging: 0.18 }
   },
   "typed-note": {
     meta: { name: "Typed note", tags: ["text", "starter"] },
@@ -1315,17 +1390,20 @@ function useContentTexture(content, sheet2, stock) {
 // src/deformers/compose.ts
 import * as THREE3 from "three";
 
+// src/deformers/registry.ts
+import { z as z19 } from "zod";
+
 // src/deformers/roll.ts
-import { z as z12 } from "zod";
-var rollOptionsSchema = z12.object({
+import { z as z13 } from "zod";
+var rollOptionsSchema = z13.object({
   /** Direction of rolling in the sheet plane, degrees. 0 = +x, 90 = +y. */
-  angle: z12.number().min(-360).max(360).default(90),
+  angle: z13.number().min(-360).max(360).default(90),
   /** Signed distance (along the roll direction, from sheet center) where the roll begins. */
-  boundary: z12.number().min(-20).max(20).default(0),
+  boundary: z13.number().min(-20).max(20).default(0),
   /** Cylinder radius — sharpness of the roll. */
-  radius: z12.number().min(0.01).max(2).default(0.12),
+  radius: z13.number().min(0.01).max(2).default(0.12),
   /** Radius growth per radian so multi-turn rolls spiral instead of z-fighting. */
-  spiral: z12.number().min(0).max(0.2).default(0.015)
+  spiral: z13.number().min(0).max(0.2).default(0.015)
 });
 var DEG2 = Math.PI / 180;
 var roll = {
@@ -1380,15 +1458,20 @@ void FN(inout vec3 p, vec2 uv, float t) {
 };
 
 // src/deformers/bend.ts
-import { z as z13 } from "zod";
-var bendOptionsSchema = z13.object({
+import { z as z14 } from "zod";
+var bendOptionsSchema = z14.object({
   /** 1/radius in world units; sign flips the arc direction. 0 = flat. */
-  curvature: z13.number().min(-4).max(4).default(0.6),
+  curvature: z14.number().min(-4).max(4).default(0.6),
   /** Bend axis direction in the sheet plane, degrees. 0 bends across x. */
-  angle: z13.number().min(-360).max(360).default(0)
+  angle: z14.number().min(-360).max(360).default(0)
 });
 var DEG3 = Math.PI / 180;
 var EPS = 1e-5;
+function sinMinusX(x) {
+  if (Math.abs(x) > 1) return Math.sin(x) - x;
+  const x2 = x * x;
+  return -x * x2 / 6 * (1 - x2 / 20 * (1 - x2 / 42 * (1 - x2 / 72)));
+}
 var bend = {
   id: "bend",
   label: "Bend",
@@ -1401,49 +1484,56 @@ var bend = {
     const dirY = Math.sin(o.angle * DEG3);
     const d = out.x * dirX + out.y * dirY;
     const r = 1 / o.curvature;
-    const theta = d / r;
+    const theta = d * o.curvature;
     const sin = Math.sin(theta);
-    const cos = Math.cos(theta);
-    const newD = (r - out.z) * sin;
-    const newZ = r * (1 - cos) + out.z * cos;
-    out.x += dirX * (newD - d);
-    out.y += dirY * (newD - d);
-    out.z = newZ;
+    const halfSin = Math.sin(theta * 0.5);
+    const z0 = out.z;
+    const shift = r * sinMinusX(theta) - z0 * sin;
+    out.x += dirX * shift;
+    out.y += dirY * shift;
+    out.z = 2 * r * halfSin * halfSin + z0 * Math.cos(theta);
   },
   glsl: {
     chunk: (
       /* glsl */
       `
+float FN_sinm(float x) {
+  if (abs(x) > 1.0) return sin(x) - x;
+  float x2 = x * x;
+  return (-x * x2 / 6.0) * (1.0 - (x2 / 20.0) * (1.0 - (x2 / 42.0) * (1.0 - x2 / 72.0)));
+}
+
 void FN(inout vec3 p, vec2 uv, float t) {
   if (abs(U_curvature) < 1e-5) return;
   vec2 dir = vec2(cos(U_angle), sin(U_angle));
   float d = dot(p.xy, dir);
   float r = 1.0 / U_curvature;
-  float theta = d / r;
+  float theta = d * U_curvature;
   float sn = sin(theta);
-  float cs = cos(theta);
-  float newD = (r - p.z) * sn;
-  float newZ = r * (1.0 - cs) + p.z * cs;
-  p.xy += dir * (newD - d);
-  p.z = newZ;
+  float hs = sin(theta * 0.5);
+  float z0 = p.z;
+  float shift = r * FN_sinm(theta) - z0 * sn;
+  p.xy += dir * shift;
+  p.z = 2.0 * r * hs * hs + z0 * cos(theta);
 }
 `
     ),
+    strength: "curvature",
     uniforms: (o) => ({ curvature: o.curvature, angle: o.angle * DEG3 })
   }
 };
 
 // src/deformers/fold.ts
-import { z as z14 } from "zod";
-var foldOptionsSchema = z14.object({
+import { z as z15 } from "zod";
+var foldOptionsSchema = z15.object({
   /** Direction of the fold travel in the sheet plane, degrees (the crease line runs perpendicular). */
-  angle: z14.number().min(-360).max(360).default(90),
+  angle: z15.number().min(-360).max(360).default(90),
   /** Signed distance of the crease line from the sheet center, along the travel direction. */
-  offset: z14.number().min(-20).max(20).default(0),
+  offset: z15.number().min(-20).max(20).default(0),
   /** How far the flap folds over, degrees. 180 = flat against the sheet. */
-  foldAngle: z14.number().min(-180).max(180).default(90),
+  foldAngle: z15.number().min(-180).max(180).default(90),
   /** Width of the soft hinge — paper never creases to a mathematical edge. */
-  radius: z14.number().min(5e-3).max(0.5).default(0.04)
+  radius: z15.number().min(5e-3).max(0.5).default(0.04)
 });
 var DEG4 = Math.PI / 180;
 var fold = {
@@ -1511,6 +1601,7 @@ void FN(inout vec3 p, vec2 uv, float t) {
 }
 `
     ),
+    strength: "foldAngle",
     uniforms: (o) => ({
       angle: o.angle * DEG4,
       offset: o.offset,
@@ -1521,16 +1612,16 @@ void FN(inout vec3 p, vec2 uv, float t) {
 };
 
 // src/deformers/wave.ts
-import { z as z15 } from "zod";
-var waveOptionsSchema = z15.object({
-  amplitude: z15.number().min(0).max(0.3).default(0.04),
-  wavelength: z15.number().min(0.05).max(2).default(0.5),
+import { z as z16 } from "zod";
+var waveOptionsSchema = z16.object({
+  amplitude: z16.number().min(0).max(0.3).default(0.04),
+  wavelength: z16.number().min(0.05).max(2).default(0.5),
   /** Travel speed; 0 freezes the ripple. */
-  speed: z15.number().min(0).max(3).default(0.8),
+  speed: z16.number().min(0).max(3).default(0.8),
   /** Travel direction in the sheet plane, degrees. */
-  angle: z15.number().min(-360).max(360).default(90),
+  angle: z16.number().min(-360).max(360).default(90),
   /** Zero the displacement at one edge (a taped/pinned edge doesn't ripple). */
-  pinnedEdge: z15.enum(["none", "top", "bottom", "left", "right"]).default("none")
+  pinnedEdge: z16.enum(["none", "top", "bottom", "left", "right"]).default("none")
 });
 var DEG5 = Math.PI / 180;
 var TAU = Math.PI * 2;
@@ -1572,6 +1663,7 @@ void FN(inout vec3 p, vec2 uv, float t) {
 }
 `
     ),
+    strength: "amplitude",
     uniforms: (o) => ({
       amplitude: o.amplitude,
       wavelength: o.wavelength,
@@ -1582,6 +1674,188 @@ void FN(inout vec3 p, vec2 uv, float t) {
   }
 };
 
+// src/deformers/drape.ts
+import { z as z17 } from "zod";
+var drapeOptionsSchema = z17.object({
+  /** Fold depth at the free edge, world units. */
+  amplitude: z17.number().min(0).max(0.6).default(0.12),
+  /** How many folds run down the drop. */
+  folds: z17.number().min(0.5).max(16).default(4),
+  /**
+   * How fast folds deepen away from the pinned edge. 1 is linear; higher
+   * holds the top flat and gathers all the movement at the free end, which
+   * is what a sheet hung from a rod actually does.
+   */
+  falloff: z17.number().min(0.3).max(4).default(1.6),
+  /** How much a second, non-harmonic fold breaks the regularity. */
+  irregular: z17.number().min(0).max(1).default(0.45),
+  /** How much the sheet narrows as its folds deepen. */
+  gather: z17.number().min(0).max(1).default(0.5),
+  pinnedEdge: z17.enum(["top", "bottom"]).default("top")
+});
+var TAU2 = Math.PI * 2;
+var drape = {
+  id: "drape",
+  label: "Drape",
+  defaults: drapeOptionsSchema.parse({}),
+  optionsSchema: drapeOptionsSchema,
+  geometry: { minSegments: 48 },
+  displace(out, uv, o) {
+    if (o.amplitude === 0) return;
+    const drop = o.pinnedEdge === "top" ? 1 - uv.y : uv.y;
+    const depth = drop ** o.falloff;
+    const u = uv.x * TAU2 * o.folds;
+    const fold2 = Math.sin(u) + o.irregular * 0.6 * Math.sin(u * 1.7 + 2.1);
+    out.z += o.amplitude * depth * fold2;
+    const pinch = o.gather * depth * Math.min(o.amplitude * o.folds * 0.8, 0.6);
+    out.x *= 1 - pinch;
+  },
+  glsl: {
+    chunk: (
+      /* glsl */
+      `
+void FN(inout vec3 p, vec2 uv, float t) {
+  if (U_amplitude == 0.0) return;
+  float drop = U_pin == 1.0 ? 1.0 - uv.y : uv.y;
+  float depth = pow(drop, U_falloff);
+  float u = uv.x * 6.283185307179586 * U_folds;
+  float fold = sin(u) + U_irregular * 0.6 * sin(u * 1.7 + 2.1);
+  p.z += U_amplitude * depth * fold;
+  float pinch = U_gather * depth * min(U_amplitude * U_folds * 0.8, 0.6);
+  p.x *= 1.0 - pinch;
+}
+`
+    ),
+    strength: "amplitude",
+    uniforms: (o) => ({
+      amplitude: o.amplitude,
+      folds: o.folds,
+      falloff: o.falloff,
+      irregular: o.irregular,
+      gather: o.gather,
+      pin: o.pinnedEdge === "top" ? 1 : 2
+    })
+  }
+};
+
+// src/deformers/crumple.ts
+import { z as z18 } from "zod";
+var crumpleOptionsSchema = z18.object({
+  /** How crushed, 0..1. Peak-to-peak height, and it drives the pull too. */
+  amount: z18.number().min(0).max(1).default(0.35),
+  /** Facets per world unit. Higher is finer, and needs more segments to resolve. */
+  scale: z18.number().min(0.5).max(8).default(3),
+  /**
+   * How much the sheet draws in on itself. Crumpled paper occupies a smaller
+   * footprint than flat paper; without this it reads as an embossed sheet
+   * rather than a crushed one.
+   */
+  pull: z18.number().min(0).max(1).default(0.4),
+  /** A different crush of the same paper. */
+  seed: z18.number().int().min(0).max(7).default(0)
+});
+function mod(x, y) {
+  return x - y * Math.floor(x / y);
+}
+function jitter(cx, cy, seed) {
+  const hx = mod(cx * 37 + cy * 17 + seed * 5, 64);
+  const hy = mod(cx * 23 + cy * 41 + seed * 11, 64);
+  return [0.2 + 0.6 * mod(hx * 13, 7) / 6, 0.2 + 0.6 * mod(hy * 29, 11) / 10];
+}
+var NORM = 0.5366;
+function cellSign(cx, cy, seed) {
+  return 1 - 2 * mod(cx * 11 + cy * 7 + seed * 3, 2);
+}
+var crumple = {
+  id: "crumple",
+  label: "Crumple",
+  defaults: crumpleOptionsSchema.parse({}),
+  optionsSchema: crumpleOptionsSchema,
+  // A crease the grid cannot resolve is a smooth bump, and a sheet of smooth
+  // bumps is not a crumple. Note this is a FLOOR, and `segments: 'auto'`
+  // already hands the long side 72 — so this only bites when a preset asks
+  // for a coarser grid by hand. Measured (`pnpm perf:field`), the real cost
+  // of this deformer is not geometry at all: it is nine cell evaluations per
+  // probe and three probes per vertex for the normal.
+  geometry: { minSegments: 72 },
+  displace(out, _uv, o) {
+    if (o.amount === 0) return;
+    const qx = out.x * o.scale;
+    const qy = out.y * o.scale;
+    const gx = Math.floor(qx);
+    const gy = Math.floor(qy);
+    let f1 = 1e9;
+    let f2 = 1e9;
+    let winX = gx;
+    let winY = gy;
+    for (let dy = -1; dy <= 1; dy++) {
+      for (let dx = -1; dx <= 1; dx++) {
+        const cx = gx + dx;
+        const cy = gy + dy;
+        const [jx, jy] = jitter(cx, cy, o.seed);
+        const ex = cx + jx - qx;
+        const ey = cy + jy - qy;
+        const dist = Math.sqrt(ex * ex + ey * ey);
+        if (dist < f1) {
+          f2 = f1;
+          f1 = dist;
+          winX = cx;
+          winY = cy;
+        } else if (dist < f2) {
+          f2 = dist;
+        }
+      }
+    }
+    out.z += cellSign(winX, winY, o.seed) * (f2 - f1) * o.amount * NORM;
+    const pull = 1 - o.amount * o.pull * 0.35;
+    out.x *= pull;
+    out.y *= pull;
+  },
+  glsl: {
+    chunk: (
+      /* glsl */
+      `
+vec2 FN_jitter(float cx, float cy, float seed) {
+  float hx = mod(cx * 37.0 + cy * 17.0 + seed * 5.0, 64.0);
+  float hy = mod(cx * 23.0 + cy * 41.0 + seed * 11.0, 64.0);
+  return vec2(0.2 + 0.6 * mod(hx * 13.0, 7.0) / 6.0, 0.2 + 0.6 * mod(hy * 29.0, 11.0) / 10.0);
+}
+
+float FN_sign(float cx, float cy, float seed) {
+  return 1.0 - 2.0 * mod(cx * 11.0 + cy * 7.0 + seed * 3.0, 2.0);
+}
+
+void FN(inout vec3 p, vec2 uv, float t) {
+  if (U_amount == 0.0) return;
+  vec2 flat2 = p.xy;
+  vec2 q = flat2 * U_scale;
+  vec2 g = floor(q);
+
+  float f1 = 1e9;
+  float f2 = 1e9;
+  vec2 win = g;
+  for (int dy = -1; dy <= 1; dy++) {
+    for (int dx = -1; dx <= 1; dx++) {
+      vec2 c = g + vec2(float(dx), float(dy));
+      float dist = length(c + FN_jitter(c.x, c.y, U_seed) - q);
+      if (dist < f1) { f2 = f1; f1 = dist; win = c; }
+      else if (dist < f2) { f2 = dist; }
+    }
+  }
+
+  p.z += FN_sign(win.x, win.y, U_seed) * (f2 - f1) * U_amount * ${NORM};
+  float pull = 1.0 - U_amount * U_pull * 0.35;
+  p.xy = flat2 * pull;
+}
+`
+    ),
+    // `amount` drives both the height and the pull, so a field instance's
+    // bias scales the whole crush rather than half of it.
+    strength: "amount",
+    uniforms: (o) => ({ amount: o.amount, scale: o.scale, pull: o.pull, seed: o.seed })
+  }
+};
+
 // src/deformers/registry.ts
 var registry = /* @__PURE__ */ new Map();
 function registerDeformer(deformer) {
@@ -1602,6 +1876,26 @@ registerDeformer(curl);
 registerDeformer(bend);
 registerDeformer(fold);
 registerDeformer(wave);
+registerDeformer(drape);
+registerDeformer(crumple);
+function resolveDeformerStack(raw) {
+  return raw.map((instance, i) => {
+    const deformer = getDeformer(instance.type);
+    const schema = deformer.optionsSchema instanceof z19.ZodObject ? deformer.optionsSchema.strict() : deformer.optionsSchema;
+    const parsed = schema.safeParse(instance.options ?? {});
+    if (!parsed.success) {
+      const issue = parsed.error.issues[0];
+      throw new Error(
+        `[paperlab] deformers[${i}] ("${instance.type}"): ${issue ? `${issue.path.join(".") || "options"} \u2014 ${issue.message}` : "invalid options"}`
+      );
+    }
+    return {
+      type: instance.type,
+      options: parsed.data,
+      enabled: instance.enabled
+    };
+  });
+}
 function stackIsAnimated(stack) {
   return stack.some((i) => i.enabled !== false && registry.get(i.type)?.animated);
 }
@@ -1669,6 +1963,7 @@ registerBehavior(fly);
 registerBehavior(fall);
 registerBehavior(carry);
 registerBehavior(flight);
+registerBehavior(crumpleBehavior);
 
 // src/physics/idle.ts
 var idleNames = ["float", "tumble", "dangle", "taped", "breeze"];
@@ -1817,13 +2112,13 @@ var ClothSim = class {
     this.stillFrames = 0;
   }
   /** Nearest particle to a local-space point — the grab interface. */
-  grabNearest(x, y, z18) {
+  grabNearest(x, y, z27) {
     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] - z18;
+      const dz = this.positions[i * 3 + 2] - z27;
       const d = dx * dx + dy * dy + dz * dz;
       if (d < bestDist) {
         bestDist = d;
@@ -1834,15 +2129,15 @@ var ClothSim = class {
     this.wake();
     return best;
   }
-  moveGrab(x, y, z18) {
+  moveGrab(x, y, z27) {
     if (this.grabbedIndex < 0) return;
     const i3 = this.grabbedIndex * 3;
     this.positions[i3] = x;
     this.positions[i3 + 1] = y;
-    this.positions[i3 + 2] = z18;
+    this.positions[i3 + 2] = z27;
     this.prev[i3] = x;
     this.prev[i3 + 1] = y;
-    this.prev[i3 + 2] = z18;
+    this.prev[i3 + 2] = z27;
     this.wake();
   }
   release() {
@@ -1878,19 +2173,19 @@ var ClothSim = class {
       }
       const x = p[i3];
       const y = p[i3 + 1];
-      const z18 = p[i3 + 2];
+      const z27 = 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 = (z18 - this.prev[i3 + 2]) * damping;
+      const vz = (z27 - this.prev[i3 + 2]) * damping;
       this.prev[i3] = x;
       this.prev[i3 + 1] = y;
-      this.prev[i3 + 2] = z18;
+      this.prev[i3 + 2] = z27;
       p[i3] = x + vx + ax * dt2;
       p[i3 + 1] = y + vy - gravity * 3.2 * dt2;
-      p[i3 + 2] = z18 + vz + az * dt2;
+      p[i3 + 2] = z27 + vz + az * dt2;
       maxTravel = Math.max(maxTravel, vx * vx + vy * vy + vz * vz);
     }
     for (let iter = 0; iter < SOLVER_ITERATIONS; iter++) {
@@ -1936,18 +2231,171 @@ var ClothSim = class {
 };
 
 // src/surface/PaperMaterial.tsx
-import * as THREE5 from "three";
+import * as THREE6 from "three";
 import { useEffect as useEffect2, useMemo } from "react";
 import CustomShaderMaterial from "three-custom-shader-material";
 
 // src/surface/compose.ts
+import * as THREE5 from "three";
+
+// src/surface/translucency.ts
 import * as THREE4 from "three";
+
+// src/scene/lighting.ts
+var lightingPresets = {
+  studio: {
+    id: "studio",
+    label: "Studio",
+    ambient: 0.65,
+    key: { color: "#ffffff", intensity: 1.6, position: [2.5, 4, 3] },
+    contactShadowOpacity: 0.3,
+    contactShadowBlur: 2.4,
+    exposure: 1,
+    shadow: { mapSize: 1024, radius: 4 }
+  },
+  window: {
+    id: "window",
+    label: "Window",
+    ambient: 0.5,
+    key: { color: "#ffe3c0", intensity: 1.9, position: [3, 2.6, 2.6] },
+    contactShadowOpacity: 0.35,
+    contactShadowBlur: 2.6,
+    exposure: 1,
+    shadow: { mapSize: 1024, radius: 5 },
+    gobo: { kind: "blinds", drift: 4e-3, angle: 0.62 }
+  },
+  leaves: {
+    id: "leaves",
+    label: "Leaves",
+    ambient: 0.45,
+    key: { color: "#fff2d8", intensity: 2, position: [2.2, 3.6, 2.4] },
+    contactShadowOpacity: 0.4,
+    contactShadowBlur: 2.8,
+    exposure: 1,
+    shadow: { mapSize: 1024, radius: 6 },
+    gobo: { kind: "leaves", drift: 0.012, angle: 0.7 }
+  },
+  goldenhour: {
+    id: "goldenhour",
+    label: "Golden hour",
+    ambient: 0.32,
+    key: { color: "#ffb066", intensity: 2.4, position: [4, 0.9, 2.2] },
+    contactShadowOpacity: 0.45,
+    contactShadowBlur: 3.2,
+    exposure: 1.15,
+    shadow: { mapSize: 1024, radius: 7 }
+  },
+  noir: {
+    id: "noir",
+    label: "Noir",
+    ambient: 0.07,
+    key: { color: "#ffffff", intensity: 2.6, position: [2, 3, 1.6] },
+    contactShadowOpacity: 0.7,
+    contactShadowBlur: 1.1,
+    exposure: 1.05,
+    shadow: { mapSize: 2048, radius: 1 }
+  },
+  nave: {
+    id: "nave",
+    label: "Nave",
+    // Dim, and the key sits BEHIND the walk rather than beside it: this mode
+    // is carried by light coming through the paper, not off it. Ambient is
+    // nearly nothing so the only bright thing in frame is the source itself.
+    ambient: 0.09,
+    key: { color: "#fff1dc", intensity: 3.4, position: [0, 7, -16] },
+    contactShadowOpacity: 0.55,
+    contactShadowBlur: 3.6,
+    exposure: 1.2,
+    shadow: { mapSize: 2048, radius: 6 },
+    // Warm and light, not black: distance in a backlit hall washes TOWARD
+    // the source, which is what separates haze from murk.
+    fog: { color: "#c9baa3", near: 5, far: 38 }
+  }
+};
+function getLightingPreset(name) {
+  return lightingPresets[name];
+}
+
+// src/surface/translucency.ts
+var TRANSLUCENCY_VARYINGS = (
+  /* glsl */
+  `
+varying vec3 vPlWorldNormal;
+varying vec3 vPlViewDir;
+`
+);
+function translucencyVertexChunk(slots) {
+  return (
+    /* glsl */
+    `
+  {
+    mat4 plModel = ${slots.model};
+    vec4 plWorld = plModel * vec4(${slots.position}, 1.0);
+    // Uniform scale only \u2014 layouts scale sheets evenly, so the plain 3\xD73 is
+    // the correct normal matrix here and skips an inverse-transpose.
+    vPlWorldNormal = normalize(mat3(plModel) * ${slots.normal});
+    vPlViewDir = cameraPosition - plWorld.xyz;
+  }
+`
+  );
+}
+var TRANSMISSION_GAIN = 0.5;
+var TRANSLUCENCY_FRAGMENT = (
+  /* glsl */
+  `
+uniform float uTranslucency;
+uniform vec3 uBackLightDir;
+uniform vec3 uBackLightColor;
+uniform float uAmbientTransmission;
+${TRANSLUCENCY_VARYINGS}
+
+vec3 plTransmission(vec3 inkFilter) {
+  if (uTranslucency <= 0.0) return vec3(0.0);
+  vec3 n = normalize(vPlWorldNormal);
+  // Sheets render double-sided; the back face needs the normal it actually shows.
+  if (!gl_FrontFacing) n = -n;
+  // The lamp is BEHIND this sheet when the face we are looking at points away
+  // from it \u2014 that is the whole test.
+  float behind = clamp(-dot(n, uBackLightDir), 0.0, 1.0);
+  // A grazing view looks through more paper, and more paper passes less light.
+  float thickness = abs(dot(n, normalize(vPlViewDir)));
+  // Paper in a lit room glows whatever way it is turned \u2014 a sheet standing
+  // edge-on to the only lamp is not black. Without this floor, a banner
+  // whose face runs parallel to the key light gets neither diffuse nor
+  // transmission and drops out of the picture entirely.
+  vec3 arriving = uBackLightColor * behind + uAmbientTransmission;
+  return arriving * uTranslucency * mix(0.25, 1.0, thickness) * inkFilter;
+}
+`
+);
+function translucencyValues(translucency, lighting) {
+  const preset = getLightingPreset(lighting);
+  const [x, y, z27] = preset.key.position;
+  const direction = new THREE4.Vector3(x, y, z27);
+  if (direction.lengthSq() < 1e-12) direction.set(0, 1, 0);
+  direction.normalize();
+  const color = new THREE4.Color(preset.key.color).multiplyScalar(preset.key.intensity * TRANSMISSION_GAIN);
+  return { translucency, direction, color, ambient: preset.ambient * TRANSMISSION_GAIN };
+}
+function translucencyUniforms(translucency, lighting) {
+  const values = translucencyValues(translucency, lighting);
+  return {
+    uTranslucency: { value: values.translucency },
+    uBackLightDir: { value: values.direction },
+    uBackLightColor: { value: values.color },
+    uAmbientTransmission: { value: values.ambient }
+  };
+}
+
+// src/surface/compose.ts
 var VERTEX = (
   /* glsl */
   `
 varying vec2 vPaperUv;
+${TRANSLUCENCY_VARYINGS}
 void main() {
   vPaperUv = uv;
+${translucencyVertexChunk({ model: "modelMatrix", position: "position", normal: "normal" })}
 }
 `
 );
@@ -1984,7 +2432,7 @@ float plFbm(vec2 p) {
 }
 `
 );
-var edgeFlags = (edges) => new THREE4.Vector4(
+var edgeFlags = (edges) => new THREE5.Vector4(
   edges.includes("top") ? 1 : 0,
   edges.includes("right") ? 1 : 0,
   edges.includes("bottom") ? 1 : 0,
@@ -2119,7 +2567,7 @@ void plAging(inout vec4 color) {
 }
 `
 );
-function composeSurface(surface, stock, thickness, maps = { hasFrontMap: false, hasBackMap: false }, sheet2 = { width: 1, height: 1.4 }) {
+function composeSurface(surface, stock, thickness, maps = { hasFrontMap: false, hasBackMap: false }, sheet2 = { width: 1, height: 1.4 }, lighting = "studio") {
   const grain = surface.grain ?? stock.defaultSurface.grain;
   const aging = surface.aging ?? stock.defaultSurface.aging;
   const deckle = surface.deckle;
@@ -2135,9 +2583,12 @@ function composeSurface(surface, stock, thickness, maps = { hasFrontMap: false,
     uBackDarken: {
       value: stock.adhesive ? 1 : 1 - Math.min(0.45, 0.12 + thickness * 0.9) * stock.opacity
     },
-    uStockColor: { value: new THREE4.Color(stock.color) },
+    uStockColor: { value: new THREE5.Color(stock.color) },
     uOpacity: { value: stock.opacity },
-    uShowThrough: { value: showThrough }
+    uShowThrough: { value: showThrough },
+    // Always compiled in: the shader early-outs at zero translucency, which
+    // is cheaper than carrying a second program structure for it.
+    ...translucencyUniforms(surface.translucency ?? stock.translucency, lighting)
   };
   if (maps.hasFrontMap) uniforms.uFrontMap = { value: null };
   if (maps.hasBackMap) uniforms.uBackMap = { value: null };
@@ -2159,13 +2610,13 @@ function composeSurface(surface, stock, thickness, maps = { hasFrontMap: false,
     calls.push("plPerforation(csm_DiffuseColor);");
     uniforms.uPerfEdges = { value: edgeFlags(edges) };
     uniforms.uPerfTorn = {
-      value: new THREE4.Vector4(
+      value: new THREE5.Vector4(
         ...paperEdges.map((e) => edges.includes(e) && perforation.state[e] === "torn" ? 1 : 0)
       )
     };
     uniforms.uPerfRadius = { value: perforation.holeRadius };
     uniforms.uPerfSpacing = { value: perforation.spacing };
-    uniforms.uSheetSize = { value: new THREE4.Vector2(sheet2.width, sheet2.height) };
+    uniforms.uSheetSize = { value: new THREE5.Vector2(sheet2.width, sheet2.height) };
   }
   if (creases) {
     chunks.push(CREASE_CHUNK);
@@ -2191,6 +2642,7 @@ uniform float uOpacity;
 uniform float uShowThrough;
 ${maps.hasFrontMap ? "uniform sampler2D uFrontMap;" : ""}
 ${maps.hasBackMap && !stock.adhesive ? "uniform sampler2D uBackMap;" : ""}
+${TRANSLUCENCY_FRAGMENT}
 ${chunks.join("\n")}
 void main() {
   vec3 front = ${frontExpr};
@@ -2203,6 +2655,8 @@ void main() {
   ${calls.join("\n  ")}
   if (!gl_FrontFacing) csm_DiffuseColor.rgb *= uBackDarken;
   ${stock.adhesive ? "// Adhesive underside: higher specular than the printed face.\n  if (!gl_FrontFacing) csm_Roughness = 0.18;" : ""}
+  // What the key light pushes through the sheet, filtered by the ink on it.
+  csm_Emissive = plTransmission(front);
 }
 `
   );
@@ -2235,7 +2689,8 @@ function PaperMaterial({
   backTexture,
   surface,
   thickness,
-  sheet: sheet2
+  sheet: sheet2,
+  lighting = "studio"
 }) {
   const composed = composeSurface(
     surface,
@@ -2245,13 +2700,14 @@ function PaperMaterial({
       hasFrontMap: Boolean(texture),
       hasBackMap: Boolean(backTexture)
     },
-    sheet2
+    sheet2,
+    lighting
   );
   const bound = useMemo(() => composed.uniforms, [composed.structureKey]);
   useEffect2(() => {
     for (const [key, uniform] of Object.entries(composed.uniforms)) {
       if (!bound[key] || key === "uFrontMap" || key === "uBackMap") continue;
-      if (bound[key].value instanceof THREE5.Color && uniform.value instanceof THREE5.Color) {
+      if (bound[key].value instanceof THREE6.Color && uniform.value instanceof THREE6.Color) {
         ;
         bound[key].value.copy(uniform.value);
       } else {
@@ -2266,7 +2722,7 @@ function PaperMaterial({
   return /* @__PURE__ */ jsx(
     CustomShaderMaterial,
     {
-      baseMaterial: THREE5.MeshStandardMaterial,
+      baseMaterial: THREE6.MeshStandardMaterial,
       vertexShader: composed.vertexShader,
       fragmentShader: composed.fragmentShader,
       uniforms: bound,
@@ -2276,7 +2732,7 @@ function PaperMaterial({
       transparent: stock.opacity < 1,
       opacity: stock.opacity,
       alphaTest: composed.alphaTest,
-      side: THREE5.DoubleSide
+      side: THREE6.DoubleSide
     },
     composed.structureKey
   );
@@ -2700,6 +3156,8 @@ function resolveConfigKey(props) {
     props.content ?? null,
     props.behavior ?? null,
     props.deformers ?? null,
+    props.surface ?? null,
+    props.scene ?? null,
     props.physics ?? null,
     props.onTwos ?? null
   ]);
@@ -2712,17 +3170,19 @@ function resolveConfig(props) {
   if (props.content) overrides.content = props.content;
   if (props.behavior) overrides.behavior = props.behavior;
   if (props.deformers) overrides.deformers = props.deformers;
+  if (props.surface) overrides.surface = { ...base.surface, ...props.surface };
+  if (props.scene) overrides.scene = { ...base.scene, ...props.scene };
   if (props.physics) overrides.physics = props.physics;
   if (props.onTwos !== void 0) overrides.onTwos = props.onTwos;
   return paperConfigSchema.parse(mergeConfig(base, overrides));
 }
 var CLOTH_MAX_SEGMENTS = 28;
-var dragPlane = new THREE6.Plane();
-var dragPoint = new THREE6.Vector3();
-var planeNormal = new THREE6.Vector3();
-var anchorScratch = new THREE6.Vector3();
-var worldScratch = new THREE6.Vector3();
-var quatScratch = new THREE6.Quaternion();
+var dragPlane = new THREE7.Plane();
+var dragPoint = new THREE7.Vector3();
+var planeNormal = new THREE7.Vector3();
+var anchorScratch = new THREE7.Vector3();
+var worldScratch = new THREE7.Vector3();
+var quatScratch = new THREE7.Quaternion();
 var PaperMesh = forwardRef(function PaperMesh2(props, ref) {
   const resolved = useMemo3(() => resolveConfig(props), [resolveConfigKey(props)]);
   const reduced = usePrefersReducedMotion(props.reducedMotion);
@@ -2767,7 +3227,7 @@ var PaperMesh = forwardRef(function PaperMesh2(props, ref) {
     if (!isCloth) return createSheetGeometry(config.sheet, minSegments);
     const [sx, sy] = resolveSegments(config.sheet, 2);
     const capped = Math.min(Math.max(sx, sy), CLOTH_MAX_SEGMENTS);
-    return new THREE6.PlaneGeometry(config.sheet.width, config.sheet.height, capped, capped);
+    return new THREE7.PlaneGeometry(config.sheet.width, config.sheet.height, capped, capped);
   }, [sheetKey, minSegments, isCloth]);
   useEffect5(() => () => geometry.dispose(), [geometry]);
   const basePositions = useMemo3(
@@ -2958,7 +3418,7 @@ var PaperMesh = forwardRef(function PaperMesh2(props, ref) {
     const p = overridesRef.current[behavior.progressParam];
     if (typeof p === "number") props.onProgress?.(p);
   };
-  const grabAnchor = useRef2(new THREE6.Vector3());
+  const grabAnchor = useRef2(new THREE7.Vector3());
   const clothDown = (e) => {
     if (!isCloth || !sim || !props.interactive || !groupRef.current) return;
     e.stopPropagation();
@@ -3014,7 +3474,8 @@ var PaperMesh = forwardRef(function PaperMesh2(props, ref) {
             backTexture,
             surface: config.surface,
             thickness: config.sheet.thickness,
-            sheet: config.sheet
+            sheet: config.sheet,
+            lighting: config.scene.lighting
           }
         )
       }
@@ -3055,7 +3516,7 @@ function buildStack(config, overrides, behavior, t = 0) {
   const idleStack = idle?.stack?.() ?? [];
   let shapeStack = [];
   if (config.deformers) {
-    shapeStack = config.deformers;
+    shapeStack = resolveDeformerStack(config.deformers);
   } else if (config.behavior) {
     const b = behavior ?? getBehavior(config.behavior.type);
     let options = { ...config.behavior, ...overrides };
@@ -3067,71 +3528,10 @@ function buildStack(config, overrides, behavior, t = 0) {
 }
 
 // src/scene/PaperLighting.tsx
-import * as THREE7 from "three";
+import * as THREE8 from "three";
 import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef3 } from "react";
 import { useFrame as useFrame2, useThree as useThree2 } from "@react-three/fiber";
 import { ContactShadows } from "@react-three/drei";
-
-// src/scene/lighting.ts
-var lightingPresets = {
-  studio: {
-    id: "studio",
-    label: "Studio",
-    ambient: 0.65,
-    key: { color: "#ffffff", intensity: 1.6, position: [2.5, 4, 3] },
-    contactShadowOpacity: 0.3,
-    contactShadowBlur: 2.4,
-    exposure: 1,
-    shadow: { mapSize: 1024, radius: 4 }
-  },
-  window: {
-    id: "window",
-    label: "Window",
-    ambient: 0.5,
-    key: { color: "#ffe3c0", intensity: 1.9, position: [3, 2.6, 2.6] },
-    contactShadowOpacity: 0.35,
-    contactShadowBlur: 2.6,
-    exposure: 1,
-    shadow: { mapSize: 1024, radius: 5 },
-    gobo: { kind: "blinds", drift: 4e-3, angle: 0.62 }
-  },
-  leaves: {
-    id: "leaves",
-    label: "Leaves",
-    ambient: 0.45,
-    key: { color: "#fff2d8", intensity: 2, position: [2.2, 3.6, 2.4] },
-    contactShadowOpacity: 0.4,
-    contactShadowBlur: 2.8,
-    exposure: 1,
-    shadow: { mapSize: 1024, radius: 6 },
-    gobo: { kind: "leaves", drift: 0.012, angle: 0.7 }
-  },
-  goldenhour: {
-    id: "goldenhour",
-    label: "Golden hour",
-    ambient: 0.32,
-    key: { color: "#ffb066", intensity: 2.4, position: [4, 0.9, 2.2] },
-    contactShadowOpacity: 0.45,
-    contactShadowBlur: 3.2,
-    exposure: 1.15,
-    shadow: { mapSize: 1024, radius: 7 }
-  },
-  noir: {
-    id: "noir",
-    label: "Noir",
-    ambient: 0.07,
-    key: { color: "#ffffff", intensity: 2.6, position: [2, 3, 1.6] },
-    contactShadowOpacity: 0.7,
-    contactShadowBlur: 1.1,
-    exposure: 1.05,
-    shadow: { mapSize: 2048, radius: 1 }
-  }
-};
-function getLightingPreset(name) {
-  return lightingPresets[name];
-}
-
-// src/scene/PaperLighting.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function mulberry32(seed) {
   let a = seed;
@@ -3188,19 +3588,24 @@ function makeGoboTexture(kind) {
       }
     }
   }
-  const texture = new THREE7.CanvasTexture(canvas);
-  texture.wrapS = texture.wrapT = THREE7.RepeatWrapping;
+  const texture = new THREE8.CanvasTexture(canvas);
+  texture.wrapS = texture.wrapT = THREE8.RepeatWrapping;
   return texture;
 }
 function PaperLighting({
   preset = "studio",
   floor = -1.2,
   scale = 10,
-  reducedMotion
+  reducedMotion,
+  shadowMapSize,
+  contactShadow = true
 }) {
   const p = getLightingPreset(preset);
+  const mapSize = shadowMapSize ?? p.shadow.mapSize;
+  const castShadow = mapSize > 0;
   const reduced = usePrefersReducedMotion(reducedMotion);
   const gl = useThree2((s) => s.gl);
+  const scene = useThree2((s) => s.scene);
   useEffect6(() => {
     const previous = gl.toneMappingExposure;
     gl.toneMappingExposure = p.exposure;
@@ -3208,11 +3613,15 @@ function PaperLighting({
       gl.toneMappingExposure = previous;
     };
   }, [gl, p.exposure]);
-  const goboMap = useMemo4(
-    () => p.gobo ? makeGoboTexture(p.gobo.kind) : null,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [p.gobo?.kind]
-  );
+  useEffect6(() => {
+    if (!p.fog) return;
+    const previous = scene.fog;
+    scene.fog = new THREE8.Fog(p.fog.color, p.fog.near, p.fog.far);
+    return () => {
+      scene.fog = previous;
+    };
+  }, [scene, p.fog]);
+  const goboMap = useMemo4(() => p.gobo ? makeGoboTexture(p.gobo.kind) : null, [p.gobo?.kind]);
   useEffect6(() => () => goboMap?.dispose(), [goboMap]);
   const driftRef = useRef3(0);
   useFrame2((_, delta) => {
@@ -3231,9 +3640,9 @@ function PaperLighting({
         angle: p.gobo.angle,
         penumbra: 0.5,
         decay: 0,
-        castShadow: true,
+        castShadow,
         map: goboMap,
-        "shadow-mapSize": [p.shadow.mapSize, p.shadow.mapSize],
+        "shadow-mapSize": [mapSize || 1, mapSize || 1],
         "shadow-radius": p.shadow.radius,
         "shadow-normalBias": 0.05
       }
@@ -3243,13 +3652,13 @@ function PaperLighting({
         position: p.key.position,
         color: p.key.color,
         intensity: p.key.intensity,
-        castShadow: true,
-        "shadow-mapSize": [p.shadow.mapSize, p.shadow.mapSize],
+        castShadow,
+        "shadow-mapSize": [mapSize || 1, mapSize || 1],
         "shadow-radius": p.shadow.radius,
         "shadow-normalBias": 0.05
       }
     ),
-    /* @__PURE__ */ jsx4(
+    contactShadow && /* @__PURE__ */ jsx4(
       ContactShadows,
       {
         position: [0, floor, 0],
@@ -3286,12 +3695,13 @@ var Paper = forwardRef2(function Paper2({ children, className, style, ...meshPro
 });
 
 // src/PaperField.tsx
+import * as THREE14 from "three";
 import { gsap as gsap5 } from "gsap";
 import { Canvas as Canvas2, useFrame as useFrame5, useThree as useThree4 } from "@react-three/fiber";
 import { forwardRef as forwardRef3, useEffect as useEffect12, useMemo as useMemo10, useRef as useRef6 } from "react";
 
 // src/field/dropZones.tsx
-import * as THREE8 from "three";
+import * as THREE9 from "three";
 import { createContext, useContext, useEffect as useEffect7, useMemo as useMemo6, useSyncExternalStore } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DropZoneRegistry = class {
@@ -3362,8 +3772,8 @@ function DropZoneVisual({ registry: registry4, config }) {
   const style = config.highlight ?? "glow";
   const [w, h] = config.bounds.size;
   const edges = useMemo6(() => {
-    const plane = new THREE8.PlaneGeometry(w, h);
-    const geo = new THREE8.EdgesGeometry(plane);
+    const plane = new THREE9.PlaneGeometry(w, h);
+    const geo = new THREE9.EdgesGeometry(plane);
     plane.dispose();
     return geo;
   }, [w, h]);
@@ -3386,18 +3796,18 @@ function DropZoneVisual({ registry: registry4, config }) {
 }
 
 // src/field/sheetGrid.ts
-import { z as z16 } from "zod";
-var sheetLayoutSchema = z16.object({
-  rows: z16.number().int().min(1).max(12).default(2),
-  columns: z16.number().int().min(1).max(12).default(5),
+import { z as z20 } from "zod";
+var sheetLayoutSchema = z20.object({
+  rows: z20.number().int().min(1).max(12).default(2),
+  columns: z20.number().int().min(1).max(12).default(5),
   /** World-units gap between slots. Stamps are printed in register — no jitter. */
-  gutter: z16.number().min(0).max(1).default(0.08),
+  gutter: z20.number().min(0).max(1).default(0.08),
   /** Slot footprint in world units (the paper preset should match). */
-  cellWidth: z16.number().min(0.1).max(4).default(0.72),
-  cellHeight: z16.number().min(0.1).max(4).default(0.86),
+  cellWidth: z20.number().min(0.1).max(4).default(0.72),
+  cellHeight: z20.number().min(0.1).max(4).default(0.86),
   /** Render the shared backing sheet behind the grid. */
-  backing: z16.boolean().default(true),
-  backingMargin: z16.number().min(0).max(1).default(0.12)
+  backing: z20.boolean().default(true),
+  backingMargin: z20.number().min(0).max(1).default(0.12)
 });
 var SHEET_LIFT = 0.012;
 function withSheetCellFromPaper(parsed, rawOptions, paperDims) {
@@ -3489,18 +3899,18 @@ function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions)
 }
 
 // src/field/fieldGroup.tsx
-import * as THREE10 from "three";
+import * as THREE11 from "three";
 import { gsap as gsap3 } from "gsap";
 import { useFrame as useFrame3 } from "@react-three/fiber";
 import { useEffect as useEffect9, useMemo as useMemo7, useRef as useRef4 } from "react";
 import CustomShaderMaterial2 from "three-custom-shader-material";
 
 // src/content/atlas.ts
-import * as THREE9 from "three";
+import * as THREE10 from "three";
 import { useEffect as useEffect8, useState as useState4 } from "react";
 var MAX_ATLAS = 4096;
-function atlasGrid(count) {
-  const cols = Math.max(1, Math.ceil(Math.sqrt(count)));
+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) {
@@ -3508,18 +3918,22 @@ function useContentAtlas(contents, sheet2, stock) {
   const key = JSON.stringify({ contents, w: sheet2.width, h: sheet2.height, stock: stock.id });
   useEffect8(() => {
     let disposed = false;
-    const { cols, rows } = atlasGrid(contents.length);
     const aspect = sheet2.height / sheet2.width;
-    const tileW = Math.min(1024, Math.floor(MAX_ATLAS / cols));
-    const tileH = Math.min(Math.round(tileW * aspect), Math.floor(MAX_ATLAS / rows));
+    const { cols, rows } = atlasGrid(contents.length, aspect);
+    let tileW = Math.min(1024, Math.floor(MAX_ATLAS / cols));
+    let tileH = Math.round(tileW * aspect);
+    if (tileH * rows > MAX_ATLAS) {
+      tileH = Math.floor(MAX_ATLAS / rows);
+      tileW = Math.max(1, Math.round(tileH / aspect));
+    }
     const canvas = document.createElement("canvas");
     canvas.width = tileW * cols;
     canvas.height = tileH * rows;
     const ctx = canvas.getContext("2d");
     ctx.fillStyle = stock.color;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
-    const texture = new THREE9.CanvasTexture(canvas);
-    texture.colorSpace = THREE9.SRGBColorSpace;
+    const texture = new THREE10.CanvasTexture(canvas);
+    texture.colorSpace = THREE10.SRGBColorSpace;
     texture.anisotropy = 4;
     setAtlas({ texture, cols, rows });
     const drawTile = (index, tile) => {
@@ -3567,7 +3981,7 @@ function stackUniformValues(stack, sheet2) {
   return uniforms;
 }
 function buildDisplacementGLSL(stack, sheet2) {
-  const decls = ["uniform vec2 uSheet;"];
+  const decls = ["uniform vec2 uSheet;", "float plBias = 1.0;"];
   const functions = [];
   const calls = [];
   const uniforms = { uSheet: [sheet2.width, sheet2.height] };
@@ -3586,15 +4000,24 @@ function buildDisplacementGLSL(stack, sheet2) {
       decls.push(`uniform ${glslType(value)} ${ns}${key};`);
       uniforms[ns + key] = value;
     }
+    const strength = deformer.glsl.strength;
     functions.push(
-      deformer.glsl.chunk.replaceAll("FN", fn).replace(/U_(\w+)/g, (_, name) => ns + name)
+      deformer.glsl.chunk.replaceAll("FN", fn).replace(
+        /U_(\w+)/g,
+        (_, name) => (
+          // The strength uniform reads through the per-instance bias, so one
+          // instanced draw call can bend every sheet by a different amount.
+          name === strength ? `(${ns}${name} * plBias)` : ns + name
+        )
+      )
     );
     calls.push(`${fn}(q, uv, t);`);
   });
   const displaceSrc = (
     /* glsl */
     `
-vec3 plDisplace(vec3 p, vec2 uv, float t) {
+vec3 plDisplace(vec3 p, vec2 uv, float t, float bias) {
+  plBias = bias;
   vec3 q = p;
   ${calls.join("\n  ")}
   return q;
@@ -3611,19 +4034,22 @@ function buildFieldVertexShader(composed) {
 uniform float uPlTime;
 attribute float aPhase;
 attribute float aAtlas;
+attribute float aBias;
 varying vec2 vPaperUv;
 varying float vAtlas;
+${TRANSLUCENCY_VARYINGS}
 ${composed.functionsSrc}
 ${composed.displaceSrc}
 void main() {
   float t = uPlTime + aPhase;
-  vec3 p = plDisplace(position, uv, t);
+  vec3 p = plDisplace(position, uv, t, aBias);
   vec2 step = uSheet * 0.01;
-  vec3 px = plDisplace(position + vec3(step.x, 0.0, 0.0), uv + vec2(0.01, 0.0), t);
-  vec3 py = plDisplace(position + vec3(0.0, step.y, 0.0), uv + vec2(0.0, 0.01), t);
+  vec3 px = plDisplace(position + vec3(step.x, 0.0, 0.0), uv + vec2(0.01, 0.0), t, aBias);
+  vec3 py = plDisplace(position + vec3(0.0, step.y, 0.0), uv + vec2(0.0, 0.01), t, aBias);
   vec3 n = cross(px - p, py - p);
   csm_Normal = length(n) > 1e-12 ? normalize(n) : vec3(0.0, 0.0, 1.0);
   csm_Position = p;
+${translucencyVertexChunk({ model: "modelMatrix * instanceMatrix", position: "p", normal: "csm_Normal" })}
   vPaperUv = uv;
   vAtlas = aAtlas;
 }
@@ -3641,6 +4067,7 @@ uniform vec3 uStockColor;
 uniform float uShowThrough;
 varying vec2 vPaperUv;
 varying float vAtlas;
+${TRANSLUCENCY_FRAGMENT}
 void main() {
   float col = mod(vAtlas, uAtlasGrid.x);
   float row = floor(vAtlas / uAtlasGrid.x);
@@ -3652,6 +4079,10 @@ void main() {
     csm_DiffuseColor = vec4(uStockColor * mix(vec3(1.0), front.rgb, uShowThrough), 1.0);
     csm_DiffuseColor.rgb *= uBackDarken;
   }
+  // Light coming through the sheet, filtered by what is printed on it. Same
+  // ink either side \u2014 the light passes through the same fibres regardless of
+  // which face happens to be turned toward the camera.
+  csm_Emissive = plTransmission(front.rgb);
 }
 `
   );
@@ -3661,16 +4092,149 @@ function cap(s) {
 }
 
 // src/field/layouts/index.ts
-import { z as z17 } from "zod";
-var TAU2 = Math.PI * 2;
-function jitter(seed, i) {
+import { z as z22 } from "zod";
+
+// src/stage/path.ts
+import { z as z21 } from "zod";
+var walkPathSchema = z21.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: z21.array(z21.tuple([z21.number(), z21.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: z21.boolean().default(false)
+});
+var SAMPLES_PER_SEGMENT = 24;
+var EPSILON = 1e-6;
+var ALPHA = 0.5;
+function knot(a, b, t) {
+  return t + Math.max(Math.hypot(b[0] - a[0], b[1] - a[1]), EPSILON) ** ALPHA;
+}
+function lerpKnot(a, b, ta, tb, t) {
+  const span = tb - ta;
+  const k = span === 0 ? 0 : (t - ta) / span;
+  return [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k];
+}
+function segmentPoint(p0, p1, p2, p3, u) {
+  const t0 = 0;
+  const t1 = knot(p0, p1, t0);
+  const t2 = knot(p1, p2, t1);
+  const t3 = knot(p2, p3, t2);
+  const t = t1 + (t2 - t1) * u;
+  const a1 = lerpKnot(p0, p1, t0, t1, t);
+  const a2 = lerpKnot(p1, p2, t1, t2, t);
+  const a3 = lerpKnot(p2, p3, t2, t3, t);
+  const b1 = lerpKnot(a1, a2, t0, t2, t);
+  const b2 = lerpKnot(a2, a3, t1, t3, t);
+  return lerpKnot(b1, b2, t1, t2, t);
+}
+function reflect(end, inner) {
+  return [2 * end[0] - inner[0], 2 * end[1] - inner[1]];
+}
+function createWalkPath(options) {
+  const pts = options.points;
+  const n = pts.length;
+  const closed = options.closed && n > 2;
+  const segments = closed ? n : n - 1;
+  const samples = [];
+  const cumulative = [];
+  let total = 0;
+  for (let seg = 0; seg < segments; seg++) {
+    const p1 = pts[seg];
+    const p2 = pts[(seg + 1) % n];
+    const p0 = closed ? pts[(seg - 1 + n) % n] : seg > 0 ? pts[seg - 1] : reflect(pts[0], pts[1]);
+    const p3 = closed ? pts[(seg + 2) % n] : seg + 2 < n ? pts[seg + 2] : reflect(pts[n - 1], pts[n - 2]);
+    const last = seg === segments - 1 && !closed ? SAMPLES_PER_SEGMENT : SAMPLES_PER_SEGMENT - 1;
+    for (let k = 0; k <= last; k++) {
+      const point = segmentPoint(p0, p1, p2, p3, k / SAMPLES_PER_SEGMENT);
+      const previous = samples[samples.length - 1];
+      if (previous) total += Math.hypot(point[0] - previous[0], point[1] - previous[1]);
+      samples.push(point);
+      cumulative.push(total);
+    }
+  }
+  if (closed) {
+    const first = samples[0];
+    const previous = samples[samples.length - 1];
+    total += Math.hypot(first[0] - previous[0], first[1] - previous[1]);
+    samples.push([first[0], first[1]]);
+    cumulative.push(total);
+  }
+  const length = total;
+  function normalize(s) {
+    if (!Number.isFinite(s)) return 0;
+    if (!closed) return Math.min(Math.max(s, 0), 1);
+    const wrapped = s - Math.floor(s);
+    return wrapped;
+  }
+  function pointAt(s) {
+    const target = normalize(s) * length;
+    if (length === 0) return [samples[0][0], samples[0][1]];
+    let low = 0;
+    let high = cumulative.length - 1;
+    while (low < high) {
+      const mid = low + high >> 1;
+      if (cumulative[mid] < target) low = mid + 1;
+      else high = mid;
+    }
+    const i = Math.max(low, 1);
+    const before = cumulative[i - 1];
+    const span = cumulative[i] - before;
+    const k = span <= 0 ? 0 : (target - before) / span;
+    const a = samples[i - 1];
+    const b = samples[i];
+    return [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k];
+  }
+  function tangentAt(s) {
+    const ds = length > 0 ? Math.min(0.01, 0.5 / length) : 0.01;
+    const here = normalize(s);
+    const a = pointAt(closed ? here - ds : Math.max(here - ds, 0));
+    const b = pointAt(closed ? here + ds : Math.min(here + ds, 1));
+    const dx = b[0] - a[0];
+    const dz = b[1] - a[1];
+    const len = Math.hypot(dx, dz);
+    return len < EPSILON ? [0, -1] : [dx / len, dz / len];
+  }
+  function normalAt(s) {
+    const [tx, tz] = tangentAt(s);
+    return [tz, -tx];
+  }
+  return { length, closed, pointAt, tangentAt, normalAt };
+}
+var cache = /* @__PURE__ */ new Map();
+var CACHE_LIMIT = 32;
+function getWalkPath(options) {
+  const key = `${options.closed ? "c" : "o"}|${options.points.map((p) => `${p[0]},${p[1]}`).join(";")}`;
+  const hit = cache.get(key);
+  if (hit) return hit;
+  const path = createWalkPath(options);
+  if (cache.size >= CACHE_LIMIT) {
+    const oldest = cache.keys().next().value;
+    if (oldest !== void 0) cache.delete(oldest);
+  }
+  cache.set(key, path);
+  return path;
+}
+
+// src/field/layouts/index.ts
+var DEFAULT_SHEET = { width: 1, height: 1.4 };
+var TAU3 = Math.PI * 2;
+var DEG6 = Math.PI / 180;
+function jitter2(seed, i) {
   let h = Math.imul(seed * 1e3 + i + 1 ^ 2654435769, 2654435761);
   h = Math.imul(h ^ h >>> 13, 3266489917);
   return ((h ^ h >>> 16) >>> 0) / 4294967295 * 2 - 1;
 }
-var ringSchema = z17.object({
-  radius: z17.number().min(0.5).max(12).default(2.6),
-  tiltDeg: z17.number().min(-45).max(45).default(8)
+function ramp(i, n) {
+  return n > 1 ? i / (n - 1) : 1;
+}
+var ringSchema = z22.object({
+  radius: z22.number().min(0.5).max(12).default(2.6),
+  tiltDeg: z22.number().min(-45).max(45).default(8)
 });
 var ring = {
   id: "ring",
@@ -3678,7 +4242,7 @@ var ring = {
   defaults: ringSchema.parse({}),
   optionsSchema: ringSchema,
   pose(i, n, o, phase) {
-    const theta = (i / n + phase) * TAU2;
+    const theta = (i / n + phase) * TAU3;
     return {
       position: [Math.sin(theta) * o.radius, 0, Math.cos(theta) * o.radius],
       // Face radially OUTWARD so the papers nearest the camera show their
@@ -3688,128 +4252,314 @@ var ring = {
     };
   }
 };
-var deckSchema = z17.object({
-  spread: z17.number().min(0).max(1).default(0.3),
-  lift: z17.number().min(5e-3).max(0.08).default(0.014)
+var fanSchema = z22.object({
+  /** Total angular sweep from the first sheet to the last, degrees. */
+  sweep: z22.number().min(0).max(180).default(72),
+  /** Where the shared pin sits, in half-sheet-heights below center. 1 = the bottom edge. */
+  hinge: z22.number().min(0).max(4).default(1.15),
+  /** Thickness step so the sheets stack in order instead of z-fighting. */
+  lift: z22.number().min(2e-3).max(0.08).default(0.012),
+  /** How much flatter the middle of the fan sits than its outer sheets. */
+  bow: z22.number().min(0).max(1).default(0.7)
 });
-var deck = {
-  id: "deck",
-  label: "Deck",
-  defaults: deckSchema.parse({}),
-  optionsSchema: deckSchema,
-  pose(i, _n, o) {
+var fan = {
+  id: "fan",
+  label: "Fan",
+  defaults: fanSchema.parse({}),
+  optionsSchema: fanSchema,
+  pose(i, n, o, _phase, sheet2) {
+    const f = n > 1 ? i / (n - 1) : 0.5;
+    const theta = (f - 0.5) * o.sweep * DEG6;
+    const hinge = o.hinge * sheet2.height / 2;
+    const open = Math.abs(f - 0.5) * 2;
     return {
-      position: [jitter(1, i) * 0.09 * o.spread * 3, jitter(2, i) * 0.07 * o.spread * 3, i * o.lift],
-      rotation: [0, 0, jitter(3, i) * 0.35 * o.spread],
-      scale: 1
+      position: [-Math.sin(theta) * hinge, Math.cos(theta) * hinge - hinge, i * o.lift],
+      rotation: [0, 0, theta],
+      scale: 1,
+      bias: 1 - (1 - open) * o.bow
     };
   }
 };
-var cascadeSchema = z17.object({
-  gap: z17.number().min(0.2).max(2).default(0.55),
-  drop: z17.number().min(0).max(1).default(0.2)
+var spreadSchema = z22.object({
+  /** How far each sheet slides past the one below it. */
+  slip: z22.number().min(0.02).max(2).default(0.3),
+  /** Direction of the slide, degrees. 0 slides right, 90 slides up. */
+  angle: z22.number().min(-180).max(180).default(28),
+  lift: z22.number().min(2e-3).max(0.08).default(0.012),
+  /** How much more the sheets at the far end of the slide bow. */
+  bow: z22.number().min(0).max(1).default(0.6),
+  /** Nothing hand-slid is perfectly square — a touch of per-sheet rotation. */
+  drift: z22.number().min(0).max(1).default(0.15)
 });
-var cascade = {
-  id: "cascade",
-  label: "Cascade",
-  defaults: cascadeSchema.parse({}),
-  optionsSchema: cascadeSchema,
+var spread = {
+  id: "spread",
+  label: "Spread",
+  defaults: spreadSchema.parse({}),
+  optionsSchema: spreadSchema,
   pose(i, n, o) {
     const centered = i - (n - 1) / 2;
+    const a = o.angle * DEG6;
     return {
-      position: [centered * o.gap, -centered * o.drop, -i * 0.06],
-      rotation: [0, 0, jitter(4, i) * 0.06],
-      scale: 1
+      position: [Math.cos(a) * o.slip * centered, Math.sin(a) * o.slip * centered, i * o.lift],
+      rotation: [0, 0, jitter2(11, i) * 0.2 * o.drift],
+      scale: 1,
+      bias: 1 - (1 - ramp(i, n)) * o.bow
     };
   }
 };
-var helixSchema = z17.object({
-  radius: z17.number().min(0.5).max(12).default(2.2),
-  height: z17.number().min(0.5).max(10).default(2.6),
-  turns: z17.number().min(0.5).max(5).default(1.5)
+var pileSchema = z22.object({
+  /** How far sheets wander from the center of the heap. */
+  scatter: z22.number().min(0).max(2).default(0.22),
+  /** Widest angle a sheet sits off square, degrees. */
+  turn: z22.number().min(0).max(180).default(24),
+  lift: z22.number().min(2e-3).max(0.08).default(0.011),
+  /** How flat the sheets underneath are pressed by the ones on top. */
+  press: z22.number().min(0).max(1).default(0.85),
+  seed: z22.number().int().min(0).max(9999).default(3)
 });
-var helix = {
-  id: "helix",
-  label: "Helix",
-  defaults: helixSchema.parse({}),
-  optionsSchema: helixSchema,
-  pose(i, n, o, phase) {
-    const f = n > 1 ? i / (n - 1) : 0;
-    const theta = (f * o.turns + phase) * TAU2;
+var pile = {
+  id: "pile",
+  label: "Pile",
+  defaults: pileSchema.parse({}),
+  optionsSchema: pileSchema,
+  pose(i, n, o) {
     return {
-      position: [Math.sin(theta) * o.radius, (f - 0.5) * o.height, Math.cos(theta) * o.radius],
-      // Outward-facing, same as the ring — fronts toward the viewer outside.
-      rotation: [0, theta, 0],
-      scale: 1
+      position: [jitter2(o.seed, i) * o.scatter, jitter2(o.seed + 1, i) * o.scatter * 0.8, i * o.lift],
+      rotation: [0, 0, jitter2(o.seed + 2, i) * o.turn * DEG6],
+      scale: 1,
+      bias: 1 - (1 - ramp(i, n)) * o.press
     };
   }
 };
-var wallSchema = z17.object({
-  gapX: z17.number().min(0.05).max(1).default(0.22),
-  gapY: z17.number().min(0.05).max(1).default(0.3),
-  jitterAmt: z17.number().min(0).max(1).default(0.25)
+var wallSchema = z22.object({
+  gapX: z22.number().min(0.05).max(1).default(0.22),
+  gapY: z22.number().min(0.05).max(1).default(0.3),
+  jitterAmt: z22.number().min(0).max(1).default(0.25),
+  /** Spread of sag across the wall — no two pinned sheets hang alike. */
+  sag: z22.number().min(0).max(1).default(0.45)
 });
 var wall = {
   id: "wall",
   label: "Wall",
   defaults: wallSchema.parse({}),
   optionsSchema: wallSchema,
-  pose(i, n, o) {
-    const cols = Math.ceil(Math.sqrt(n * 1.4));
+  pose(i, n, o, _phase, sheet2) {
+    const cols = Math.ceil(Math.sqrt(n * sheet2.height / sheet2.width));
     const rows = Math.ceil(n / cols);
     const col = i % cols;
     const row = Math.floor(i / cols);
-    const cellW = 1 + o.gapX;
-    const cellH = 1.4 + o.gapY;
+    const cellW = sheet2.width + o.gapX;
+    const cellH = sheet2.height + o.gapY;
     return {
       position: [
         (col - (cols - 1) / 2) * cellW,
         ((rows - 1) / 2 - row) * cellH,
-        jitter(5, i) * 0.04 * o.jitterAmt * 4
+        jitter2(5, i) * 0.04 * o.jitterAmt * 4
       ],
-      rotation: [0, 0, jitter(6, i) * 0.05 * o.jitterAmt * 4],
-      scale: 1
+      rotation: [0, 0, jitter2(6, i) * 0.05 * o.jitterAmt * 4],
+      scale: 1,
+      bias: 1 - Math.abs(jitter2(7, i)) * o.sag
     };
   }
 };
-var tunnelSchema = z17.object({
-  radius: z17.number().min(0.5).max(6).default(1.7),
-  spacing: z17.number().min(0.1).max(3).default(0.55)
+var spillSchema = z22.object({
+  spreadX: z22.number().min(0.5).max(8).default(2.4),
+  spreadY: z22.number().min(0.5).max(8).default(1.5),
+  depth: z22.number().min(0).max(6).default(1.6),
+  /** How far sheets pitch and roll out of the picture plane. */
+  tumble: z22.number().min(0).max(1).default(0.5),
+  /** Spread of bend across the sheets — a spill does not fold them alike. */
+  vary: z22.number().min(0).max(1).default(0.6),
+  seed: z22.number().int().min(0).max(9999).default(7)
 });
-var tunnel = {
-  id: "tunnel",
-  label: "Tunnel",
-  defaults: tunnelSchema.parse({}),
-  optionsSchema: tunnelSchema,
-  pose(i, _n, o, phase) {
-    const theta = i * 2.39996 + phase * TAU2;
+var spill = {
+  id: "spill",
+  label: "Spill",
+  defaults: spillSchema.parse({}),
+  optionsSchema: spillSchema,
+  pose(i, _n, o) {
+    const tumble = o.tumble * 2;
     return {
-      position: [Math.cos(theta) * o.radius, Math.sin(theta) * o.radius, -i * o.spacing],
-      rotation: [0, 0, theta - Math.PI / 2],
-      scale: 1
+      position: [
+        jitter2(o.seed, i) * o.spreadX,
+        jitter2(o.seed + 1, i) * o.spreadY,
+        jitter2(o.seed + 2, i) * o.depth
+      ],
+      rotation: [
+        jitter2(o.seed + 3, i) * 0.4 * tumble,
+        jitter2(o.seed + 4, i) * 0.5 * tumble,
+        jitter2(o.seed + 5, i) * 0.4 * tumble
+      ],
+      scale: 0.85 + Math.abs(jitter2(o.seed + 6, i)) * 0.3,
+      bias: 1 - Math.abs(jitter2(o.seed + 7, i)) * o.vary
     };
   }
 };
-var scatterSchema = z17.object({
-  spreadX: z17.number().min(0.5).max(8).default(2.4),
-  spreadY: z17.number().min(0.5).max(8).default(1.5),
-  depth: z17.number().min(0).max(6).default(1.6),
-  seed: z17.number().int().min(0).max(9999).default(7)
+var sweepSchema = z22.object({
+  columns: z22.number().int().min(1).max(24).default(5),
+  /** Breathing room around each specimen. */
+  gap: z22.number().min(0).max(2).default(0.22),
+  /** Deformation at the first specimen and at the last. */
+  from: z22.number().min(0).max(1).default(0),
+  to: z22.number().min(0).max(1).default(1)
 });
-var scatter = {
-  id: "scatter",
-  label: "Scatter",
-  defaults: scatterSchema.parse({}),
-  optionsSchema: scatterSchema,
-  pose(i, _n, o) {
+var sweep = {
+  id: "sweep",
+  label: "Sweep",
+  defaults: sweepSchema.parse({}),
+  optionsSchema: sweepSchema,
+  pose(i, n, o, _phase, sheet2) {
+    const cols = Math.min(o.columns, Math.max(n, 1));
+    const rows = Math.ceil(n / cols);
+    const col = i % cols;
+    const row = Math.floor(i / cols);
     return {
       position: [
-        jitter(o.seed, i) * o.spreadX,
-        jitter(o.seed + 1, i) * o.spreadY,
-        jitter(o.seed + 2, i) * o.depth
+        (col - (cols - 1) / 2) * (sheet2.width + o.gap),
+        ((rows - 1) / 2 - row) * (sheet2.height + o.gap),
+        0
       ],
-      rotation: [jitter(o.seed + 3, i) * 0.4, jitter(o.seed + 4, i) * 0.5, jitter(o.seed + 5, i) * 0.4],
-      scale: 0.85 + Math.abs(jitter(o.seed + 6, i)) * 0.3
+      rotation: [0, 0, 0],
+      scale: 1,
+      bias: o.from + (o.to - o.from) * ramp(i, n)
+    };
+  }
+};
+var bookSchema = z22.object({
+  /** How far the outermost page lifts off the block, degrees. */
+  spread: z22.number().min(0).max(150).default(55),
+  /** Fraction of the pages bound to the left. 0 = a one-sided sample book. */
+  split: z22.number().min(0).max(1).default(0.5),
+  /** Page thickness — the gap between pages of one block. */
+  lift: z22.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: z22.number().min(0).max(1).default(0.6)
+});
+var book = {
+  id: "book",
+  label: "Book",
+  defaults: bookSchema.parse({}),
+  optionsSchema: bookSchema,
+  pose(i, n, o, _phase, sheet2) {
+    const half = sheet2.width / 2;
+    const left = Math.round(n * o.split);
+    const onLeft = i < left;
+    const count = onLeft ? left : n - left;
+    const k = onLeft ? i : i - left;
+    const f = count > 1 ? k / (count - 1) : 1;
+    const theta = f * o.spread * DEG6;
+    const side = onLeft ? -1 : 1;
+    const cos = Math.cos(theta);
+    const sin = Math.sin(theta);
+    const offset = k * o.lift;
+    return {
+      position: [side * (half * cos - offset * sin), 0, half * sin + offset * cos],
+      rotation: [0, -side * theta, 0],
+      scale: 1,
+      bias: 1 - (1 - f) * o.gutter
+    };
+  }
+};
+var accordionSchema = z22.object({
+  /** How far each panel tilts off the strip's line, degrees. 0 = flat, 90 = shut. */
+  angle: z22.number().min(0).max(89).default(55),
+  /** A concertina holds its creases — how much bow the panels keep. */
+  slack: z22.number().min(0).max(1).default(0.15)
+});
+var accordion = {
+  id: "accordion",
+  label: "Accordion",
+  defaults: accordionSchema.parse({}),
+  optionsSchema: accordionSchema,
+  pose(i, n, o, _phase, sheet2) {
+    const theta = o.angle * DEG6;
+    const side = i % 2 === 0 ? 1 : -1;
+    const step = sheet2.width * Math.cos(theta);
+    return {
+      position: [(i - (n - 1) / 2) * step, 0, 0],
+      rotation: [0, side * theta, 0],
+      scale: 1,
+      bias: o.slack
+    };
+  }
+};
+var rackSchema = z22.object({
+  /** Gap along the row, as a fraction of the paper's width. Under 1 they overlap. */
+  spacing: z22.number().min(0.05).max(2).default(0.82),
+  /** How far a sheet leans back off vertical, degrees. */
+  lean: z22.number().min(0).max(70).default(16),
+  /** How much that lean differs sheet to sheet — nothing propped is uniform. */
+  vary: z22.number().min(0).max(1).default(0.55),
+  /** Small rotations off square. */
+  sway: z22.number().min(0).max(1).default(0.35),
+  seed: z22.number().int().min(0).max(9999).default(5)
+});
+var rack = {
+  id: "rack",
+  label: "Rack",
+  defaults: rackSchema.parse({}),
+  optionsSchema: rackSchema,
+  pose(i, n, o, _phase, sheet2) {
+    const lean = o.lean * DEG6 * (1 + jitter2(o.seed, i) * o.vary);
+    const half = sheet2.height / 2;
+    return {
+      position: [
+        (i - (n - 1) / 2) * sheet2.width * o.spacing,
+        // Standing on the floor: the bottom edge stays at y = 0 as it leans.
+        half * Math.cos(lean),
+        -half * Math.sin(lean) + i * 4e-3
+      ],
+      rotation: [-lean, jitter2(o.seed + 1, i) * 0.12 * o.sway, jitter2(o.seed + 2, i) * 0.06 * o.sway],
+      scale: 1,
+      // A sheet leaning further has more of its own weight to carry.
+      bias: o.lean === 0 ? 0 : Math.min(1, lean / (o.lean * DEG6 * (1 + o.vary)))
+    };
+  }
+};
+var colonnadeSchema = z22.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: z22.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: z22.number().min(0).max(1).default(0.3),
+  /** Widest angle a banner turns off square to the aisle, degrees. */
+  twist: z22.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: z22.number().min(0).max(0.45).default(0.05),
+  /** Spread of banner heights, 0..1. */
+  rise: z22.number().min(0).max(1).default(0.28),
+  /** How far the banners lift off the floor, as a fraction of their height. 0 = they pool on it. */
+  hover: z22.number().min(0).max(1).default(0),
+  /** Spread of deformation — no two lengths of hung paper drape alike. */
+  drape: z22.number().min(0).max(1).default(0.5),
+  seed: z22.number().int().min(0).max(9999).default(2)
+});
+var colonnade = {
+  id: "colonnade",
+  label: "Colonnade",
+  defaults: colonnadeSchema.parse({}),
+  optionsSchema: colonnadeSchema,
+  pose(i, n, o, phase, sheet2) {
+    const path = getWalkPath(o.path);
+    const side = i % 2 === 0 ? 1 : -1;
+    const pairs = Math.max(Math.ceil(n / 2), 1);
+    const k = Math.floor(i / 2);
+    const span = 1 - o.margin * 2;
+    const step = pairs > 1 ? span / (pairs - 1) : 0;
+    const base = o.margin + (pairs > 1 ? k * step : span / 2) + side * step * 0.25;
+    const s = path.closed ? base + phase : base;
+    const [px, pz] = path.pointAt(s);
+    const [nx, nz] = path.normalAt(s);
+    const scale = 1 + jitter2(o.seed, i) * o.rise * 0.5;
+    const offset = o.aisle * (1 + jitter2(o.seed + 1, i) * o.breathe);
+    const height = sheet2.height * scale;
+    const yaw = Math.atan2(-side * nx, -side * nz) + jitter2(o.seed + 2, i) * o.twist * DEG6;
+    return {
+      position: [px + nx * side * offset, height / 2 + height * o.hover, pz + nz * side * offset],
+      rotation: [0, yaw, 0],
+      scale,
+      bias: 1 - Math.abs(jitter2(o.seed + 3, i)) * o.drape
     };
   }
 };
@@ -3838,36 +4588,48 @@ function listLayouts() {
   return [...registry3.keys()];
 }
 registerLayout(ring);
-registerLayout(deck);
-registerLayout(cascade);
-registerLayout(helix);
+registerLayout(fan);
+registerLayout(spread);
+registerLayout(pile);
 registerLayout(wall);
-registerLayout(tunnel);
-registerLayout(scatter);
+registerLayout(spill);
+registerLayout(sweep);
+registerLayout(book);
+registerLayout(accordion);
+registerLayout(rack);
+registerLayout(colonnade);
 registerLayout(sheet);
 
+// src/field/stack.ts
+function fieldShapeStack(config, progress) {
+  if (config.deformers) return resolveDeformerStack(config.deformers);
+  if (!config.behavior) return [];
+  const behavior = getBehavior(config.behavior.type);
+  const options = { ...config.behavior, [behavior.progressParam]: progress };
+  return behavior.stack(options, config.sheet);
+}
+
 // src/field/fieldGroup.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-var scratchObj = new THREE10.Object3D();
+var scratchObj = new THREE11.Object3D();
 var scratchAero = { position: [0, 0, 0], rotation: [0, 0, 0] };
 var FIELD_SEGMENT_CAP = 48;
 function FieldGroup({ group, shared }) {
   const { config, indices, contents } = group;
   const count = indices.length;
   const stock = getStock(config.stock);
-  const behavior = config.behavior ? getBehavior(config.behavior.type) : null;
+  const behavior = config.behavior && !config.deformers ? getBehavior(config.behavior.type) : null;
   const progressRef = useRef4(
     behavior ? config.behavior[behavior.progressParam] : 0
   );
-  const buildStackAt = (progress) => {
-    if (!config.behavior || !behavior) return [];
-    const options = { ...config.behavior, [behavior.progressParam]: progress };
-    return behavior.stack(options, config.sheet);
-  };
+  const buildStackAt = (progress) => fieldShapeStack(config, progress);
   const initialStack = useMemo7(
     () => buildStackAt(progressRef.current),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(config.behavior ?? null), JSON.stringify(config.sheet)]
+    [
+      JSON.stringify(config.behavior ?? null),
+      JSON.stringify(config.deformers ?? null),
+      JSON.stringify(config.sheet)
+    ]
   );
   const structureKey = initialStack.map((i) => i.type).join("|");
   const geometry = useMemo7(() => {
@@ -3880,12 +4642,14 @@ function FieldGroup({ group, shared }) {
     );
     const atlasIdx = new Float32Array(count);
     const phase = new Float32Array(count);
+    const bias = new Float32Array(count).fill(1);
     for (let i = 0; i < count; i++) {
       atlasIdx[i] = i;
       phase[i] = indices[i] * 0.618034 % 1 * 4;
     }
-    geo.setAttribute("aAtlas", new THREE10.InstancedBufferAttribute(atlasIdx, 1));
-    geo.setAttribute("aPhase", new THREE10.InstancedBufferAttribute(phase, 1));
+    geo.setAttribute("aAtlas", new THREE11.InstancedBufferAttribute(atlasIdx, 1));
+    geo.setAttribute("aPhase", new THREE11.InstancedBufferAttribute(phase, 1));
+    geo.setAttribute("aBias", new THREE11.InstancedBufferAttribute(bias, 1));
     return geo;
   }, [JSON.stringify(config.sheet), structureKey, count]);
   useEffect9(() => () => geometry.dispose(), [geometry]);
@@ -3895,23 +4659,34 @@ function FieldGroup({ group, shared }) {
     const uniforms = {};
     for (const [name, value] of Object.entries(composed.uniforms)) {
       uniforms[name] = {
-        value: Array.isArray(value) && value.length === 2 ? new THREE10.Vector2(...value) : value
+        value: Array.isArray(value) && value.length === 2 ? new THREE11.Vector2(...value) : value
       };
     }
     uniforms.uPlTime = { value: 0 };
     uniforms.uAtlas = { value: null };
-    uniforms.uAtlasGrid = { value: new THREE10.Vector2(1, 1) };
+    uniforms.uAtlasGrid = { value: new THREE11.Vector2(1, 1) };
     uniforms.uBackDarken = {
       value: 1 - Math.min(0.45, 0.12 + config.sheet.thickness * 0.9) * stock.opacity
     };
-    uniforms.uStockColor = { value: new THREE10.Color(stock.color) };
+    uniforms.uStockColor = { value: new THREE11.Color(stock.color) };
     uniforms.uShowThrough = { value: config.surface.showThrough ?? stock.showThrough };
+    Object.assign(
+      uniforms,
+      translucencyUniforms(config.surface.translucency ?? stock.translucency, config.scene.lighting)
+    );
     return {
       vertexShader: buildFieldVertexShader(composed),
       fragmentShader: buildFieldFragmentShader(),
       uniforms
     };
-  }, [structureKey, JSON.stringify(config.sheet), stock.id, config.surface.showThrough]);
+  }, [
+    structureKey,
+    JSON.stringify(config.sheet),
+    stock.id,
+    config.surface.showThrough,
+    config.surface.translucency,
+    config.scene.lighting
+  ]);
   useEffect9(() => {
     if (!atlas) return;
     shader.uniforms.uAtlas.value = atlas.texture;
@@ -3945,7 +4720,7 @@ function FieldGroup({ group, shared }) {
       for (const [name, value] of Object.entries(values)) {
         const uniform = shader.uniforms[name];
         if (!uniform) continue;
-        if (uniform.value instanceof THREE10.Vector2 && Array.isArray(value)) {
+        if (uniform.value instanceof THREE11.Vector2 && Array.isArray(value)) {
           uniform.value.set(value[0], value[1]);
         } else {
           uniform.value = value;
@@ -3955,15 +4730,19 @@ function FieldGroup({ group, shared }) {
     const layout = getLayout(shared.layoutId);
     const morph = shared.morphRef.current;
     const behaviorTransform = behavior?.transform && config.behavior ? behavior : null;
+    const biasAttr = geometry.getAttribute("aBias");
+    const biases = biasAttr.array;
+    let biasChanged = false;
     for (let j = 0; j < count; j++) {
       const i = indices[j];
-      let pose = layout.pose(i, shared.total, shared.layoutOptions, shared.phaseRef.current);
+      let pose = layout.pose(i, shared.total, shared.layoutOptions, shared.phaseRef.current, shared.sheet);
       if (morph.from && morph.t < 1) {
         const prev = getLayout(morph.from.id).pose(
           i,
           shared.total,
           morph.from.options,
-          shared.phaseRef.current
+          shared.phaseRef.current,
+          shared.sheet
         );
         pose = lerpPose(prev, pose, easeInOut(morph.t));
       }
@@ -3973,6 +4752,11 @@ function FieldGroup({ group, shared }) {
           pose = lerpPose(entrancePose(shared.entranceType, i, pose), pose, easeOut(tIn));
         }
       }
+      const bias = Math.min(1, Math.max(0, pose.bias ?? 1));
+      if (biases[j] !== bias) {
+        biases[j] = bias;
+        biasChanged = true;
+      }
       scratchObj.position.set(...pose.position);
       scratchObj.rotation.set(...pose.rotation);
       scratchObj.scale.setScalar(pose.scale);
@@ -3997,6 +4781,7 @@ function FieldGroup({ group, shared }) {
       mesh.setMatrixAt(j, scratchObj.matrix);
     }
     mesh.instanceMatrix.needsUpdate = true;
+    if (biasChanged) biasAttr.needsUpdate = true;
   });
   return /* @__PURE__ */ jsx7(
     "instancedMesh",
@@ -4009,13 +4794,13 @@ function FieldGroup({ group, shared }) {
       children: /* @__PURE__ */ jsx7(
         CustomShaderMaterial2,
         {
-          baseMaterial: THREE10.MeshStandardMaterial,
+          baseMaterial: THREE11.MeshStandardMaterial,
           vertexShader: shader.vertexShader,
           fragmentShader: shader.fragmentShader,
           uniforms: shader.uniforms,
           roughness: stock.roughness,
           metalness: 0,
-          side: THREE10.DoubleSide
+          side: THREE11.DoubleSide
         },
         `${structureKey}:${count}`
       )
@@ -4027,14 +4812,16 @@ function entrancePose(type, i, target) {
     return {
       position: [target.position[0], target.position[1] - 3.2, target.position[2] - 0.5],
       rotation: [target.rotation[0] - 0.7, target.rotation[1], target.rotation[2] + 0.25],
-      scale: target.scale * 0.85
+      scale: target.scale * 0.85,
+      bias: target.bias
     };
   }
   const a = i * 2.399;
   return {
     position: [Math.cos(a) * 7, Math.sin(a * 1.3) * 4, Math.sin(a) * 6],
     rotation: [Math.sin(a) * 2, a, Math.cos(a) * 2],
-    scale: target.scale * 0.6
+    scale: target.scale * 0.6,
+    bias: target.bias
   };
 }
 function lerpPose(a, b, t) {
@@ -4050,14 +4837,15 @@ function lerpPose(a, b, t) {
       lerp(a.rotation[1], b.rotation[1]),
       lerp(a.rotation[2], b.rotation[2])
     ],
-    scale: lerp(a.scale, b.scale)
+    scale: lerp(a.scale, b.scale),
+    bias: lerp(a.bias ?? 1, b.bias ?? 1)
   };
 }
 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 THREE11 from "three";
+import * as THREE12 from "three";
 import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
 
 // src/content/backing.ts
@@ -4139,7 +4927,7 @@ function BackingSheet({
     c.height = Math.max(2, Math.round(height * scale));
     return c;
   }, [width, height]);
-  const texture = useMemo8(() => canvas ? new THREE11.CanvasTexture(canvas) : null, [canvas]);
+  const texture = useMemo8(() => canvas ? new THREE12.CanvasTexture(canvas) : null, [canvas]);
   const removedKey = [...removed].sort((a, b) => a - b).join(",");
   useEffect10(() => {
     if (!canvas || !texture) return;
@@ -4154,7 +4942,7 @@ function BackingSheet({
 }
 
 // src/field/interactiveField.tsx
-import * as THREE12 from "three";
+import * as THREE13 from "three";
 import { gsap as gsap4 } from "gsap";
 import { useFrame as useFrame4, useThree as useThree3 } from "@react-three/fiber";
 import { useContext as useContext2, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef5, useState as useState5 } from "react";
@@ -4179,7 +4967,6 @@ function InteractiveField(props) {
       const patch = slotPatches[i];
       return patch ? paperConfigSchema.parse(mergeConfig(config, patch)) : config;
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       JSON.stringify(papers),
       JSON.stringify(fallback ?? null),
@@ -4189,9 +4976,8 @@ function InteractiveField(props) {
     ]
   );
   const poses = useMemo9(
-    () => slotConfigs.map((_, i) => layout.pose(i, total, layoutOptions, 0)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [layoutId, JSON.stringify(layoutOptions), total]
+    () => slotConfigs.map((_, i) => layout.pose(i, total, layoutOptions, 0, props.sheet)),
+    [layoutId, JSON.stringify(layoutOptions), total, props.sheet.width, props.sheet.height]
   );
   const groupRefs = useRef5([]);
   const handleRefs = useRef5([]);
@@ -4209,10 +4995,10 @@ function InteractiveField(props) {
     }
     props.onSlotStateChange?.(i, state);
   };
-  const raycaster = useMemo9(() => new THREE12.Raycaster(), []);
-  const planeScratch = useMemo9(() => new THREE12.Plane(new THREE12.Vector3(0, 0, 1), 0), []);
-  const pointScratch = useMemo9(() => new THREE12.Vector3(), []);
-  const ndcScratch = useMemo9(() => new THREE12.Vector2(), []);
+  const raycaster = useMemo9(() => new THREE13.Raycaster(), []);
+  const planeScratch = useMemo9(() => new THREE13.Plane(new THREE13.Vector3(0, 0, 1), 0), []);
+  const pointScratch = useMemo9(() => new THREE13.Vector3(), []);
+  const ndcScratch = useMemo9(() => new THREE13.Vector2(), []);
   const planePoint = (clientX, clientY, planeZ) => {
     const rect = gl.domElement.getBoundingClientRect();
     ndcScratch.set(
@@ -4375,7 +5161,7 @@ function InteractiveField(props) {
     if (carried.pointerId !== null && e.pointerId !== carried.pointerId) return;
     const name = slotName(carried.slot);
     const zone = zonesLive().find(
-      (z18) => zoneContains(z18, carried.x.value, carried.y.value) && zoneAccepts(z18, name)
+      (z27) => zoneContains(z27, carried.x.value, carried.y.value) && zoneAccepts(z27, name)
     );
     if (zone) settleInto(carried, zone);
     else returnHome(carried);
@@ -4416,12 +5202,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 += (THREE12.MathUtils.clamp(-vx * lag, -0.6, 0.6) - group.rotation.y) * 0.12;
-      group.rotation.x += (THREE12.MathUtils.clamp(vy * lag * 0.7, -0.5, 0.5) - group.rotation.x) * 0.12;
+      group.rotation.y += (THREE13.MathUtils.clamp(-vx * lag, -0.6, 0.6) - group.rotation.y) * 0.12;
+      group.rotation.x += (THREE13.MathUtils.clamp(vy * lag * 0.7, -0.5, 0.5) - group.rotation.x) * 0.12;
     }
     const name = slotName(carried.slot);
     const zone = zonesLive().find(
-      (z18) => zoneContains(z18, group.position.x, group.position.y) && zoneAccepts(z18, name)
+      (z27) => zoneContains(z27, group.position.x, group.position.y) && zoneAccepts(z27, name)
     );
     registry4.setHovered(zone?.id ?? null);
     const targetScale = (zone ? 1.03 : 1) * carried.homePose.scale;
@@ -4437,7 +5223,7 @@ function InteractiveField(props) {
     },
     placeAtZone: (slot, zoneId) => {
       const carried = carriedRef.current;
-      const zone = zonesLive().find((z18) => z18.id === zoneId);
+      const zone = zonesLive().find((z27) => z27.id === zoneId);
       const group = groupRefs.current[slot];
       if (!carried || carried.slot !== slot || !zone || !group) return;
       group.position.x = zone.bounds.position[0];
@@ -4450,7 +5236,7 @@ function InteractiveField(props) {
       const carried = carriedRef.current;
       if (carried && carried.slot === slot && !carried.settling) returnHome(carried);
     },
-    zoneIds: () => zonesLive().map((z18) => z18.id),
+    zoneIds: () => zonesLive().map((z27) => z27.id),
     slotState: (slot) => slotStates[slot] ?? "rest"
   };
   useEffect11(() => {
@@ -4568,25 +5354,88 @@ function FieldKeyboardMirror({
     if (handled) e.preventDefault();
     if (carry2 !== carrying) setCarrying(carry2);
   };
-  return /* @__PURE__ */ jsx10("div", { style: mirrorHidden, role: "group", "aria-label": "Interactive papers", children: papers.map((slot, i) => /* @__PURE__ */ jsxs7(
-    "button",
-    {
-      type: "button",
-      onKeyDown: onKeyDown(i),
-      "aria-label": paperLabel(slot, i),
-      "aria-pressed": carrying?.slot === i,
-      children: [
-        paperLabel(slot, i),
-        carrying?.slot === i && /* @__PURE__ */ jsxs7("span", { "aria-live": "polite", children: [
-          " ",
-          "\u2014 carrying; zone ",
-          controller.current?.zoneIds()[carrying.zoneIndex] ?? "none",
-          "; Enter places, Escape returns"
-        ] })
-      ]
-    },
-    i
-  )) });
+  return /* @__PURE__ */ jsxs7("fieldset", { style: mirrorHidden, children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Interactive papers" }),
+    papers.map((slot, i) => /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        onKeyDown: onKeyDown(i),
+        "aria-label": paperLabel(slot, i),
+        "aria-pressed": carrying?.slot === i,
+        children: [
+          paperLabel(slot, i),
+          carrying?.slot === i && /* @__PURE__ */ jsxs7("span", { "aria-live": "polite", children: [
+            " ",
+            "\u2014 carrying; zone ",
+            controller.current?.zoneIds()[carrying.zoneIndex] ?? "none",
+            "; Enter places, Escape returns"
+          ] })
+        ]
+      },
+      i
+    ))
+  ] });
+}
+
+// src/field/framing.ts
+var PHASE_SAMPLES = 8;
+function resolveLayoutOptions(layoutId, layout, propOptions, firstSheet) {
+  const parsed = layout.optionsSchema.parse({
+    ...layout.defaults,
+    ...propOptions
+  });
+  if (layoutId !== "sheet") return parsed;
+  return withSheetCellFromPaper(
+    parsed,
+    propOptions,
+    firstSheet
+  );
+}
+function fieldBounds(layout, n, options, sheet2) {
+  const reach = Math.hypot(sheet2.width, sheet2.height) / 2;
+  if (n <= 0) return { center: [0, 0, 0], half: [reach, reach, 0] };
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+  for (let s = 0; s < PHASE_SAMPLES; s++) {
+    for (let i = 0; i < n; i++) {
+      const pose = layout.pose(i, n, options, s / PHASE_SAMPLES, sheet2);
+      const r = reach * Math.max(pose.scale, 0);
+      for (let axis = 0; axis < 3; axis++) {
+        min[axis] = Math.min(min[axis], pose.position[axis] - r);
+        max[axis] = Math.max(max[axis], pose.position[axis] + r);
+      }
+    }
+  }
+  return {
+    center: [(min[0] + max[0]) / 2, (min[1] + max[1]) / 2, (min[2] + max[2]) / 2],
+    half: [(max[0] - min[0]) / 2, (max[1] - min[1]) / 2, (max[2] - min[2]) / 2]
+  };
+}
+var LIFT = 0.11;
+var DEG7 = Math.PI / 180;
+function fitCamera(layout, n, options, sheet2, fovDeg, aspect, margin = 1.06) {
+  const { center } = fieldBounds(layout, n, options, sheet2);
+  const reach = Math.hypot(sheet2.width, sheet2.height) / 2 * margin;
+  const vTan = Math.tan(fovDeg * DEG7 / 2);
+  const hTan = vTan * Math.max(aspect, 0.01);
+  let distance = 0.1;
+  for (let s = 0; s < PHASE_SAMPLES; s++) {
+    for (let i = 0; i < Math.max(n, 0); i++) {
+      const pose = layout.pose(i, n, options, s / PHASE_SAMPLES, sheet2);
+      const r = reach * Math.max(pose.scale, 0);
+      const depth = pose.position[2] - center[2];
+      distance = Math.max(
+        distance,
+        (Math.abs(pose.position[0] - center[0]) + r) / hTan + depth,
+        (Math.abs(pose.position[1] - center[1]) + r) / vTan + depth
+      );
+    }
+  }
+  return {
+    position: [center[0], center[1] + distance * LIFT, center[2] + distance],
+    target: center
+  };
 }
 
 // src/PaperField.tsx
@@ -4600,25 +5449,18 @@ var PaperFieldMesh = forwardRef3(
     );
     const groups = useMemo10(
       () => groupFieldPapers(papers, props.preset),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       [JSON.stringify(papers), JSON.stringify(props.preset ?? null)]
     );
     const total = papers.length;
     const layoutId = props.layout ?? "ring";
     const layout = getLayout(layoutId);
     const firstSheet = groups[0]?.config.sheet;
-    const layoutOptions = useMemo10(() => {
-      const parsed = layout.optionsSchema.parse({
-        ...layout.defaults,
-        ...props.layoutOptions
-      });
-      if (layoutId !== "sheet") return parsed;
-      return withSheetCellFromPaper(
-        parsed,
-        props.layoutOptions,
-        firstSheet
-      );
-    }, [layoutId, JSON.stringify(props.layoutOptions ?? {}), firstSheet?.width, firstSheet?.height]);
+    const layoutOptions = useMemo10(
+      // Sheet grids size their cells from the papers themselves — gutter is
+      // then literally the spacing between stamps (explicit cell dims win).
+      () => resolveLayoutOptions(layoutId, layout, props.layoutOptions, firstSheet),
+      [layoutId, JSON.stringify(props.layoutOptions ?? {}), firstSheet?.width, firstSheet?.height]
+    );
     const phaseRef = useRef6(0);
     const dragVelRef = useRef6(0);
     const mountTimeRef = useRef6(-1);
@@ -4676,6 +5518,7 @@ var PaperFieldMesh = forwardRef3(
       morphRef,
       layoutId,
       layoutOptions,
+      sheet: firstSheet ?? DEFAULT_SHEET,
       entranceType,
       stagger: props.entrance?.stagger ?? 0.06,
       entranceDuration: props.entrance?.duration ?? 0.9,
@@ -4694,6 +5537,7 @@ var PaperFieldMesh = forwardRef3(
           layoutId,
           layoutOptions,
           sheetOptions,
+          sheet: firstSheet ?? DEFAULT_SHEET,
           reducedMotion: props.reducedMotion,
           zones: props.zones,
           onSlotStateChange: props.onSlotStateChange,
@@ -4704,10 +5548,47 @@ var PaperFieldMesh = forwardRef3(
     }
     return /* @__PURE__ */ jsxs8("group", { ref, children: [
       sheetOptions?.backing && /* @__PURE__ */ jsx11(BackingSheet, { options: sheetOptions, count: total, removed: EMPTY_SET }),
-      groups.map((group, gi) => /* @__PURE__ */ jsx11(FieldGroup, { group, shared }, `${gi}:${group.indices.length}`))
+      groups.map((group, gi) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: groups are derived from the slot list in order, so position is their only identity.
+        /* @__PURE__ */ jsx11(FieldGroup, { group, shared }, `${gi}:${group.indices.length}`)
+      ))
     ] });
   }
 );
+function FitCamera(meshProps) {
+  const camera = useThree4((s) => s.camera);
+  const width = useThree4((s) => s.size.width);
+  const height = useThree4((s) => s.size.height);
+  const field = useMemo10(() => {
+    const papers = effectiveFieldPapers(meshProps.papers, meshProps.images);
+    const layoutId = meshProps.layout ?? "ring";
+    const layout = getLayout(layoutId);
+    const sheet2 = groupFieldPapers(papers, meshProps.preset)[0]?.config.sheet;
+    const options = resolveLayoutOptions(layoutId, layout, meshProps.layoutOptions, sheet2);
+    return { layout, n: papers.length, options, sheet: sheet2 ?? DEFAULT_SHEET };
+  }, [
+    JSON.stringify(meshProps.papers ?? null),
+    JSON.stringify(meshProps.images ?? null),
+    JSON.stringify(meshProps.preset ?? null),
+    meshProps.layout,
+    JSON.stringify(meshProps.layoutOptions ?? {})
+  ]);
+  useEffect12(() => {
+    if (!(camera instanceof THREE14.PerspectiveCamera)) return;
+    const { position, target } = fitCamera(
+      field.layout,
+      field.n,
+      field.options,
+      field.sheet,
+      camera.fov,
+      width / Math.max(height, 1)
+    );
+    camera.position.set(...position);
+    camera.lookAt(...target);
+    camera.updateProjectionMatrix();
+  }, [camera, width, height, field]);
+  return null;
+}
 var PaperField = forwardRef3(function PaperField2({ children, className, style, ...meshProps }, ref) {
   const registry4 = useMemo10(() => new DropZoneRegistry(), []);
   const a11yRef = useRef6(null);
@@ -4717,11 +5598,11 @@ var PaperField = forwardRef3(function PaperField2({ children, className, style,
   );
   const interactive = useMemo10(
     () => fieldIsInteractive(papers, meshProps.preset, meshProps.interactive),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(papers), JSON.stringify(meshProps.preset ?? null), meshProps.interactive]
   );
   return /* @__PURE__ */ jsx11("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ jsxs8(DropZoneContext.Provider, { value: registry4, children: [
     /* @__PURE__ */ jsxs8(Canvas2, { 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",
@@ -4740,202 +5621,762 @@ var PaperField = forwardRef3(function PaperField2({ children, className, style,
   ] }) });
 });
 
-// src/field/parity.ts
-import * as THREE13 from "three";
-var GRID = 48;
-var PARITY_EPSILON = 5e-4;
-var parityCases = [
-  {
-    name: "roll: defaults",
-    stack: [{ type: "roll", options: { angle: 90, boundary: 0, radius: 0.12, spiral: 0.015 } }],
-    sheet: { width: 1, height: 1.4 },
-    t: 0
-  },
-  {
-    name: "roll: tight receipt roll, rolling down",
-    stack: [{ type: "roll", options: { angle: 270, boundary: -0.4, radius: 0.07, spiral: 0.02 } }],
-    sheet: { width: 1, height: 2.6 },
-    t: 0
-  },
-  {
-    name: "curl: bottom-right peel",
-    stack: [{ type: "curl", options: { corner: "bottom-right", amount: 0.45, radius: 0.2, skew: 0 } }],
-    sheet: { width: 1.5, height: 1 },
-    t: 0
-  },
-  {
-    name: "curl: skewed top-left",
-    stack: [{ type: "curl", options: { corner: "top-left", amount: 0.7, radius: 0.3, skew: 15 } }],
-    sheet: { width: 1, height: 1 },
-    t: 0
-  },
-  {
-    name: "bend: positive arc at an angle",
-    stack: [{ type: "bend", options: { curvature: 1.2, angle: 33 } }],
-    sheet: { width: 1, height: 1.4 },
-    t: 0
-  },
-  {
-    name: "bend: negative arc",
-    stack: [{ type: "bend", options: { curvature: -0.8, angle: 0 } }],
-    sheet: { width: 1, height: 1.4 },
-    t: 0
-  },
-  {
-    name: "fold: 90\xB0 hinge",
-    stack: [{ type: "fold", options: { angle: 90, offset: 0, foldAngle: 90, radius: 0.06 } }],
-    sheet: { width: 1, height: 1.4 },
-    t: 0
-  },
-  {
-    name: "fold: deep fold, travelling down",
-    stack: [{ type: "fold", options: { angle: 270, offset: 0.2, foldAngle: 165, radius: 0.04 } }],
-    sheet: { width: 1, height: 1.4 },
-    t: 0
-  },
-  {
-    name: "wave: free ripple at t=1.234",
-    stack: [
+// src/stage/PaperStage.tsx
+import * as THREE17 from "three";
+import { Canvas as Canvas3, useFrame as useFrame7, useThree as useThree5 } from "@react-three/fiber";
+import { useCallback, useEffect as useEffect15, useMemo as useMemo13, useRef as useRef8, useState as useState7 } from "react";
+import { z as z26 } from "zod";
+
+// src/stage/camera.ts
+import { z as z23 } from "zod";
+var shotNames = ["follow", "lead", "low", "wide"];
+var shotSchema = z23.object({
+  shot: z23.enum(shotNames).default("follow"),
+  /**
+   * How far the camera stands off the figure ALONG the walk, world units.
+   * `wide` reads it as how far back it stands; how far it steps aside is
+   * derived from the paper, since that is what it has to clear.
+   */
+  distance: z23.number().min(0.2).max(40).default(4.5),
+  /** Multiplier on the shot's natural camera height. 1 is as designed. */
+  height: z23.number().min(0).max(6).default(1),
+  /** How far up the walk the camera looks past the figure, world units. */
+  lookAhead: z23.number().min(0).max(40).default(7),
+  /** Sideways step off the walk line, world units. Positive is the walker's left. */
+  offset: z23.number().min(-20).max(20).default(0)
+});
+var EYE = {
+  follow: 0.95,
+  lead: 0.95,
+  // Down near the floor, where the banners tower — the worm's-eye of the
+  // reference frames, and the cheapest way to make paper read as architecture.
+  low: 0.12,
+  wide: 1.1
+};
+var AIM = {
+  // Chest height on the figure, a third of the way up the paper — enough
+  // tilt that a printed banner reads, not so much that the floor is lost.
+  follow: { figure: 0.62, paper: 0.3 },
+  // Framing the figure itself, so the paper only lifts the aim a little.
+  lead: { figure: 0.62, paper: 0.1 },
+  // Up the banners. The figure is incidental to this shot.
+  low: { figure: 0, paper: 0.62 },
+  wide: { figure: 0.62, paper: 0.2 }
+};
+var WIDE_STANDOFF = 1.5;
+var DEFAULT_PAPER_RATIO = 4.9;
+function resolveScale(scale) {
+  if (typeof scale === "number") return { figure: scale, paper: scale * DEFAULT_PAPER_RATIO };
+  return scale;
+}
+function walkPoint(path, distance) {
+  if (path.length === 0) return path.pointAt(0);
+  if (path.closed) return path.pointAt(distance / path.length);
+  if (distance < 0) {
+    const [x, z27] = path.pointAt(0);
+    const [tx, tz] = path.tangentAt(0);
+    return [x + tx * distance, z27 + tz * distance];
+  }
+  if (distance > path.length) {
+    const over = distance - path.length;
+    const [x, z27] = path.pointAt(1);
+    const [tx, tz] = path.tangentAt(1);
+    return [x + tx * over, z27 + tz * over];
+  }
+  return path.pointAt(distance / path.length);
+}
+function walkNormal(path, distance) {
+  if (path.length === 0) return path.normalAt(0);
+  if (path.closed) return path.normalAt(distance / path.length);
+  return path.normalAt(Math.min(Math.max(distance, 0), path.length) / path.length);
+}
+function stageCamera(path, walked, scale, options) {
+  const { figure, paper } = resolveScale(scale);
+  const eye = figure * EYE[options.shot] * options.height;
+  const aim = figure * AIM[options.shot].figure + paper * AIM[options.shot].paper;
+  let station;
+  let mark;
+  if (options.shot === "lead") {
+    station = walked + options.distance;
+    mark = walked;
+  } else if (options.shot === "wide") {
+    station = walked - options.distance;
+    mark = walked;
+  } else {
+    station = walked - options.distance;
+    mark = walked + options.lookAhead;
+  }
+  const [sx, sz] = walkPoint(path, station);
+  const [mx, mz] = walkPoint(path, mark);
+  const [nx, nz] = walkNormal(path, station);
+  const step = options.offset + (options.shot === "wide" ? paper * WIDE_STANDOFF : 0);
+  return {
+    position: [sx + nx * step, eye, sz + nz * step],
+    target: [mx, aim, mz]
+  };
+}
+
+// src/stage/Figure.tsx
+import * as THREE15 from "three";
+import { useEffect as useEffect13, useMemo as useMemo11, useRef as useRef7 } from "react";
+import { useFrame as useFrame6 } from "@react-three/fiber";
+
+// src/stage/gait.ts
+import { z as z24 } from "zod";
+var figureSchema = z24.object({
+  /** Standing height in world units — the scale reference the whole stage is read against. */
+  height: z24.number().min(0.5).max(4).default(1.75),
+  /** World units per second along the walk. A relaxed indoor pace is ~1.2. */
+  speed: z24.number().min(0).max(4).default(1.2),
+  /** Stride length as a fraction of height — how far one step carries. */
+  stride: z24.number().min(0.1).max(1).default(0.42),
+  /** Arm swing, 0..1. Drop it toward 0 for hands-in-pockets stillness. */
+  swing: z24.number().min(0).max(1).default(1),
+  /** Silhouette color. Near-black by default: it should read as an absence, not an object. */
+  color: z24.string().default("#0a0a0c")
+});
+var PROPORTIONS = {
+  hip: 0.53,
+  shoulder: 0.82,
+  headRadius: 0.045,
+  headCenter: 0.935,
+  thigh: 0.245,
+  shin: 0.235,
+  upperArm: 0.185,
+  foreArm: 0.165,
+  torsoWidth: 0.19,
+  hipWidth: 0.095,
+  limbRadius: 0.028
+};
+var THIGH_SWING = 0.42;
+var ARM_SWING = 0.5;
+var KNEE_FLEX = 1.1;
+var BOB = 0.016;
+var LEAN = 0.045;
+var TAU4 = Math.PI * 2;
+function cycleLength(o) {
+  return o.stride * o.height * 2;
+}
+function figureGait(distance, o) {
+  const cycle = cycleLength(o);
+  const phase = cycle > 0 ? (distance / cycle % 1 + 1) % 1 : 0;
+  const w = phase * TAU4;
+  const leftThigh = THIGH_SWING * Math.sin(w);
+  const rightThigh = THIGH_SWING * Math.sin(w + Math.PI);
+  const flex = (at) => -KNEE_FLEX * Math.max(0, Math.cos(w - at)) ** 1.5;
+  const leftKnee = flex(7 * Math.PI / 4);
+  const rightKnee = flex(3 * Math.PI / 4);
+  const leftArm = -ARM_SWING * o.swing * Math.sin(w);
+  const rightArm = -ARM_SWING * o.swing * Math.sin(w + Math.PI);
+  const bob = -BOB * o.height * (1 - Math.abs(Math.cos(w)));
+  return {
+    phase,
+    bob,
+    lean: LEAN * Math.min(o.speed / 1.2, 1),
+    leftThigh,
+    rightThigh,
+    leftKnee,
+    rightKnee,
+    leftArm,
+    rightArm
+  };
+}
+function placeFigure(path, distance, o) {
+  const raw = path.length > 0 ? distance / path.length : 0;
+  const s = path.closed ? (raw % 1 + 1) % 1 : Math.min(Math.max(raw, 0), 1);
+  const [x, z27] = path.pointAt(s);
+  const [tx, tz] = path.tangentAt(s);
+  const travelled = path.closed ? distance : Math.min(distance, path.length);
+  return {
+    position: [x, 0, z27],
+    yaw: Math.atan2(tx, tz),
+    pose: figureGait(travelled, o),
+    s
+  };
+}
+
+// src/stage/Figure.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function Segment({ length, radius, material }) {
+  const shaft = Math.max(length - radius * 2, 1e-3);
+  return /* @__PURE__ */ jsx12("mesh", { position: [0, -length / 2, 0], material, castShadow: true, children: /* @__PURE__ */ jsx12("capsuleGeometry", { args: [radius, shaft, 4, 10] }) });
+}
+function Figure({ path, figure, distance, frozen }) {
+  const reducedMotion = usePrefersReducedMotion();
+  const still = frozen ?? reducedMotion;
+  const options = useMemo11(() => figureSchema.parse(figure ?? {}), [figure]);
+  const walk = useMemo11(() => getWalkPath(walkPathSchema.parse(path ?? {})), [path]);
+  const root = useRef7(null);
+  const hips = useRef7(null);
+  const legL = useRef7(null);
+  const legR = useRef7(null);
+  const kneeL = useRef7(null);
+  const kneeR = useRef7(null);
+  const armL = useRef7(null);
+  const armR = useRef7(null);
+  const material = useMemo11(
+    () => new THREE15.MeshBasicMaterial({ color: options.color, toneMapped: false }),
+    [options.color]
+  );
+  useEffect13(() => () => material.dispose(), [material]);
+  const h = options.height;
+  const p = PROPORTIONS;
+  const torso = (p.shoulder - p.hip) * h;
+  useFrame6((state) => {
+    const walked = distance ?? (still ? 0 : state.clock.elapsedTime * options.speed);
+    const { position, yaw, pose } = placeFigure(walk, walked, options);
+    root.current?.position.set(position[0], position[1], position[2]);
+    if (root.current) root.current.rotation.y = yaw;
+    if (hips.current) {
+      hips.current.position.y = p.hip * h + (still ? 0 : pose.bob);
+      hips.current.rotation.x = pose.lean;
+    }
+    if (legL.current) legL.current.rotation.x = still ? 0 : -pose.leftThigh;
+    if (legR.current) legR.current.rotation.x = still ? 0 : -pose.rightThigh;
+    if (kneeL.current) kneeL.current.rotation.x = still ? 0 : -pose.leftKnee;
+    if (kneeR.current) kneeR.current.rotation.x = still ? 0 : -pose.rightKnee;
+    if (armL.current) armL.current.rotation.x = still ? 0 : -pose.leftArm;
+    if (armR.current) armR.current.rotation.x = still ? 0 : -pose.rightArm;
+  });
+  return /* @__PURE__ */ jsx12("group", { ref: root, children: /* @__PURE__ */ jsxs9("group", { ref: hips, children: [
+    /* @__PURE__ */ jsx12("mesh", { position: [0, torso / 2, 0], material, castShadow: true, children: /* @__PURE__ */ jsx12("capsuleGeometry", { args: [p.torsoWidth * h / 2, torso * 0.72, 4, 12] }) }),
+    /* @__PURE__ */ jsx12("mesh", { position: [0, (p.headCenter - p.hip) * h, 0], material, castShadow: true, children: /* @__PURE__ */ jsx12("sphereGeometry", { args: [p.headRadius * h, 14, 12] }) }),
+    [-1, 1].map((side) => {
+      const leg = side < 0 ? legL : legR;
+      const knee = side < 0 ? kneeL : kneeR;
+      return /* @__PURE__ */ jsxs9("group", { ref: leg, position: [side * p.hipWidth * h / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx12(Segment, { length: p.thigh * h, radius: p.limbRadius * h, material }),
+        /* @__PURE__ */ jsx12("group", { ref: knee, position: [0, -p.thigh * h, 0], children: /* @__PURE__ */ jsx12(Segment, { length: p.shin * h, radius: p.limbRadius * h * 0.9, material }) })
+      ] }, `leg${side}`);
+    }),
+    [-1, 1].map((side) => /* @__PURE__ */ jsx12(
+      "group",
       {
-        type: "wave",
-        options: { amplitude: 0.05, wavelength: 0.5, speed: 1, angle: 20, pinnedEdge: "none" }
-      }
-    ],
-    sheet: { width: 1, height: 1 },
-    t: 1.234
-  },
-  {
-    name: "wave: pinned top at t=2.5",
-    stack: [
+        ref: side < 0 ? armL : armR,
+        position: [side * p.torsoWidth * h / 2, torso, 0],
+        children: /* @__PURE__ */ jsx12(
+          Segment,
+          {
+            length: (p.upperArm + p.foreArm) * h,
+            radius: p.limbRadius * h * 0.8,
+            material
+          }
+        )
+      },
+      `arm${side}`
+    ))
+  ] }) });
+}
+
+// src/stage/Surround.tsx
+import * as THREE16 from "three";
+import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function makeSkyTexture(horizon, zenith) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 4;
+  canvas.height = 256;
+  const ctx = canvas.getContext("2d");
+  const grade = ctx.createLinearGradient(0, 0, 0, canvas.height);
+  grade.addColorStop(0, zenith);
+  grade.addColorStop(0.35, zenith);
+  grade.addColorStop(0.92, horizon);
+  grade.addColorStop(1, horizon);
+  ctx.fillStyle = grade;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  const texture = new THREE16.CanvasTexture(canvas);
+  texture.colorSpace = THREE16.SRGBColorSpace;
+  return texture;
+}
+function makeGlowTexture(color) {
+  const size = 256;
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  const glow = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+  glow.addColorStop(0, color);
+  glow.addColorStop(0.55, color);
+  glow.addColorStop(1, "rgba(0, 0, 0, 0)");
+  ctx.fillStyle = glow;
+  ctx.fillRect(0, 0, size, size);
+  const texture = new THREE16.CanvasTexture(canvas);
+  texture.colorSpace = THREE16.SRGBColorSpace;
+  return texture;
+}
+function Source({
+  size,
+  position,
+  yaw,
+  color
+}) {
+  const texture = useMemo12(() => makeGlowTexture(color), [color]);
+  useEffect14(() => () => texture.dispose(), [texture]);
+  return /* @__PURE__ */ jsxs10("mesh", { position, rotation: [0, yaw, 0], children: [
+    /* @__PURE__ */ jsx13("planeGeometry", { args: [size * 2.4, size * 1.8] }),
+    /* @__PURE__ */ jsx13(
+      "meshBasicMaterial",
       {
-        type: "wave",
-        options: { amplitude: 0.04, wavelength: 0.4, speed: 1.5, angle: 80, pinnedEdge: "top" }
+        map: texture,
+        transparent: true,
+        depthWrite: false,
+        toneMapped: false,
+        fog: false
       }
-    ],
-    sheet: { width: 1.2, height: 1.5 },
-    t: 2.5
-  },
-  {
-    name: "stacked: letter-fold pair (fold \u2218 fold)",
-    stack: [
-      { type: "fold", options: { angle: 270, offset: 0.2333, foldAngle: 120, radius: 0.05 } },
-      { type: "fold", options: { angle: 90, offset: 0.2333, foldAngle: 100, radius: 0.08 } }
-    ],
-    sheet: { width: 1, height: 1.4 },
-    t: 0
-  },
-  {
-    name: "stacked: bend \u2218 roll \u2218 wave",
-    stack: [
-      { type: "bend", options: { curvature: 0.6, angle: 0 } },
-      { type: "roll", options: { angle: 90, boundary: 0.1, radius: 0.15, spiral: 0 } },
+    )
+  ] });
+}
+function Surround({ radius, horizon, zenith }) {
+  const texture = useMemo12(() => makeSkyTexture(horizon, zenith), [horizon, zenith]);
+  useEffect14(() => () => texture.dispose(), [texture]);
+  return /* @__PURE__ */ jsxs10("mesh", { children: [
+    /* @__PURE__ */ jsx13("sphereGeometry", { args: [radius, 32, 24] }),
+    /* @__PURE__ */ jsx13("meshBasicMaterial", { map: texture, side: THREE16.BackSide, fog: false })
+  ] });
+}
+
+// src/stage/schema.ts
+import { z as z25 } from "zod";
+var stageSourceSchema = z25.object({
+  /** The bright void the walk resolves toward. Without it the vanishing point is a hole. */
+  enabled: z25.boolean().default(true),
+  color: z25.string().default("#fff4e2"),
+  /** How far past the end of the walk it stands, world units. */
+  beyond: z25.number().min(0).max(80).default(10),
+  /**
+   * A cyclorama around the whole stage, graded from the source colour at the
+   * horizon to near-dark overhead. The source plane only faces down the walk,
+   * so without this every shot that isn't axial — `wide` especially — looks
+   * out at a black void where the room should be.
+   */
+  surround: z25.boolean().default(true),
+  /** Colour overhead. The horizon takes the source's own colour. */
+  zenith: z25.string().default("#241c17"),
+  /** Size, as a multiple of the PAPER height — it only has to out-fill the frame. */
+  spread: z25.number().min(1).max(60).default(5)
+});
+var stageGroundSchema = z25.object({
+  /** The floor. Without something to catch the shadows there is no ground and no scale. */
+  enabled: z25.boolean().default(true),
+  color: z25.string().default("#0e0b09")
+});
+var stageSchema = z25.object({
+  path: walkPathSchema.default({}),
+  shot: shotSchema.default({}),
+  figure: figureSchema.default({}),
+  /** Stage mode is built for `nave`; the others are all front-lit. */
+  lighting: z25.enum(lightingNames).default("nave"),
+  showFigure: z25.boolean().default(true),
+  source: stageSourceSchema.default({}),
+  ground: stageGroundSchema.default({})
+});
+
+// src/stage/quality.ts
+var qualityNames = ["auto", "low", "medium", "high"];
+var qualityTiers = {
+  /** Anything with a GPU. */
+  high: { dpr: 2, shadowMapSize: 2048, segments: 72, surround: true, contactShadow: true },
+  /** The default worth aiming at: an integrated laptop GPU from the last few years. */
+  medium: { dpr: 1.5, shadowMapSize: 1024, segments: 48, surround: true, contactShadow: false },
+  /**
+   * Old integrated graphics, a throttled phone, a software rasterizer. The
+   * scene still READS — banners, figure, backlight, walk — it just stops
+   * paying for the parts nobody would miss at this framerate.
+   */
+  low: { dpr: 1, shadowMapSize: 0, segments: 28, surround: true, contactShadow: false }
+};
+var INITIAL_TIER = "medium";
+var FIRST_WINDOW = 20;
+var STEADY_WINDOW = 60;
+var SETTLE_FRAMES = 45;
+var TIER_ORDER = ["low", "medium", "high"];
+function qualityFor(name) {
+  return qualityTiers[name === "auto" ? INITIAL_TIER : name];
+}
+function tierUp(tier) {
+  return TIER_ORDER[Math.min(TIER_ORDER.indexOf(tier) + 1, TIER_ORDER.length - 1)];
+}
+function tierDown(tier) {
+  return TIER_ORDER[Math.max(TIER_ORDER.indexOf(tier) - 1, 0)];
+}
+
+// src/stage/PaperStage.tsx
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var BANNER = {
+  sheet: { width: 1.5, height: 8.5, segments: "auto" },
+  stock: "vellum",
+  surface: { grain: 0.22 },
+  deformers: [{ type: "drape", options: { amplitude: 0.16, folds: 3, falloff: 1.7, gather: 0.28 } }]
+};
+function splitAcrossBanners(text, banners) {
+  const words = text.split(/\s+/).filter(Boolean);
+  if (words.length === 0 || banners <= 0) return [];
+  const per = Math.ceil(words.length / banners);
+  const out = [];
+  for (let i = 0; i < words.length; i += per) out.push(words.slice(i, i + per).join("\n"));
+  return out;
+}
+function bannerTextSize(lines) {
+  return Math.round(Math.min(150, Math.max(26, 720 / Math.max(lines, 1))));
+}
+function ShotRig({
+  stage,
+  paperHeight,
+  progress,
+  still
+}) {
+  const camera = useThree5((s) => s.camera);
+  const path = useMemo13(() => getWalkPath(stage.path), [stage.path]);
+  const scale = useMemo13(
+    () => ({ figure: stage.figure.height, paper: paperHeight }),
+    [stage.figure.height, paperHeight]
+  );
+  useFrame7((state) => {
+    const walked = stageWalked(path.length, stage, progress, still ? 0 : state.clock.elapsedTime);
+    const { position, target } = stageCamera(path, walked, scale, stage.shot);
+    camera.position.set(position[0], position[1], position[2]);
+    camera.lookAt(target[0], target[1], target[2]);
+  });
+  return null;
+}
+function stageWalked(length, stage, progress, elapsed) {
+  if (progress !== void 0) return progress * length;
+  return elapsed * stage.figure.speed;
+}
+var FLOOR_FPS = 26;
+var CEILING_FPS = 55;
+function QualityWatch({ tier, onChange }) {
+  const samples = useRef8([]);
+  const settle = useRef8(SETTLE_FRAMES);
+  const window2 = useRef8(FIRST_WINDOW);
+  const settled = useCallback((next) => {
+    samples.current = [];
+    settle.current = SETTLE_FRAMES;
+    window2.current = STEADY_WINDOW;
+    return next;
+  }, []);
+  useFrame7((_, delta) => {
+    if (settle.current > 0) {
+      settle.current -= 1;
+      return;
+    }
+    if (delta > 0.5) return;
+    samples.current.push(delta);
+    if (samples.current.length < window2.current) return;
+    const sorted = [...samples.current].sort((a, b) => a - b);
+    const median = sorted[Math.floor(sorted.length / 2)];
+    const fps = 1 / median;
+    samples.current = [];
+    window2.current = STEADY_WINDOW;
+    if (fps < FLOOR_FPS) {
+      const next = tierDown(tier);
+      if (next !== tier) onChange(settled(next));
+    } else if (fps > CEILING_FPS) {
+      const next = tierUp(tier);
+      if (next !== tier) onChange(settled(next));
+    }
+  });
+  return null;
+}
+function PaperStageScene({
+  stage: stageInput,
+  quality = "auto",
+  onQualityChange,
+  layout = "colonnade",
+  layoutOptions,
+  papers,
+  images,
+  text,
+  preset,
+  count = 22,
+  progress,
+  reducedMotion
+}) {
+  const still = usePrefersReducedMotion(reducedMotion);
+  const [tier, setTier] = useState7(quality === "auto" ? INITIAL_TIER : quality);
+  useEffect15(() => {
+    if (quality !== "auto") setTier(quality);
+  }, [quality]);
+  useEffect15(() => {
+    onQualityChange?.(tier);
+  }, [tier, onQualityChange]);
+  const settings = quality === "auto" ? qualityTiers[tier] : qualityFor(quality);
+  const stage = useMemo13(() => stageSchema.parse(stageInput ?? {}), [stageInput]);
+  const path = useMemo13(() => getWalkPath(stage.path), [stage.path]);
+  const paperHeight = useMemo13(() => resolveConfig({ preset: preset ?? BANNER }).sheet.height, [preset]);
+  const paper = useMemo13(() => {
+    const base = preset ?? BANNER;
+    if (typeof base !== "object") return preset ?? BANNER;
+    const sheet2 = base.sheet ?? {};
+    return { ...base, sheet: { ...sheet2, segments: settings.segments } };
+  }, [preset, settings.segments]);
+  const resolvedLayoutOptions = useMemo13(() => {
+    const schema = getLayout(layout).optionsSchema;
+    const takesPath = schema instanceof z26.ZodObject && "path" in schema.shape;
+    return takesPath ? { ...layoutOptions, path: stage.path } : layoutOptions;
+  }, [layout, layoutOptions, stage.path]);
+  const slots = useMemo13(() => {
+    if (papers) return papers;
+    if (images) return void 0;
+    if (text !== void 0) {
+      const columns = Array.isArray(text) ? text : splitAcrossBanners(text, count);
+      const longest = columns.reduce((n, c) => Math.max(n, c.split("\n").length), 1);
+      const size = bannerTextSize(longest);
+      return columns.map((column) => ({
+        content: {
+          type: "text",
+          text: column,
+          size,
+          align: "center",
+          color: "#241f1a",
+          lineHeight: 1.25,
+          font: 'Georgia, "Times New Roman", serif',
+          weight: 400,
+          padding: 0.06
+        }
+      }));
+    }
+    return Array.from({ length: count }, () => ({}));
+  }, [papers, images, text, count]);
+  const figureDistance = progress !== void 0 ? progress * path.length : void 0;
+  const surroundRadius = useMemo13(
+    () => Math.max(path.length * 1.6, paperHeight * 9),
+    [path.length, paperHeight]
+  );
+  const source = useMemo13(() => {
+    const [x, z27] = walkPoint(path, path.length + stage.source.beyond);
+    const [tx, tz] = path.tangentAt(1);
+    const size = paperHeight * stage.source.spread;
+    return { position: [x, size * 0.35, z27], yaw: Math.atan2(-tx, -tz), size };
+  }, [path, stage.source.beyond, stage.source.spread, paperHeight]);
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx14(ShotRig, { stage, paperHeight, progress, still }),
+    /* @__PURE__ */ jsx14(
+      PaperLighting,
       {
-        type: "wave",
-        options: { amplitude: 0.02, wavelength: 0.6, speed: 0.7, angle: 45, pinnedEdge: "none" }
+        preset: stage.lighting,
+        floor: 0,
+        scale: 60,
+        reducedMotion,
+        shadowMapSize: settings.shadowMapSize,
+        contactShadow: settings.contactShadow
       }
-    ],
-    sheet: { width: 1, height: 1.4 },
-    t: 0.8
-  }
-];
-function buildParityFragment(stack, sheet2) {
-  const composed = buildDisplacementGLSL(stack, sheet2);
-  return (
-    /* glsl */
-    `#version 300 es
-precision highp float;
-uniform float uPlTime;
-${composed.functionsSrc}
-${composed.displaceSrc}
-out vec4 outColor;
-void main() {
-  vec2 uv = (gl_FragCoord.xy - 0.5) / float(${GRID - 1});
-  vec3 p = vec3((uv - 0.5) * uSheet, 0.0);
-  outColor = vec4(plDisplace(p, uv, uPlTime), 1.0);
+    ),
+    quality === "auto" && /* @__PURE__ */ jsx14(QualityWatch, { tier, onChange: setTier }),
+    stage.source.surround && settings.surround && /* @__PURE__ */ jsx14(Surround, { radius: surroundRadius, horizon: stage.source.color, zenith: stage.source.zenith }),
+    stage.source.enabled && /* @__PURE__ */ jsx14(Source, { size: source.size, position: source.position, yaw: source.yaw, color: stage.source.color }),
+    stage.ground.enabled && /* @__PURE__ */ jsxs11("mesh", { rotation: [-Math.PI / 2, 0, 0], receiveShadow: true, children: [
+      /* @__PURE__ */ jsx14("planeGeometry", { args: [surroundRadius * 1.3, surroundRadius * 1.3] }),
+      /* @__PURE__ */ jsx14("meshStandardMaterial", { color: stage.ground.color, roughness: 1 })
+    ] }),
+    /* @__PURE__ */ jsx14(
+      PaperFieldMesh,
+      {
+        preset: paper,
+        papers: slots,
+        images,
+        layout,
+        layoutOptions: resolvedLayoutOptions,
+        motion: { driver: "none" },
+        entrance: { type: "none" },
+        reducedMotion
+      }
+    ),
+    stage.showFigure && /* @__PURE__ */ jsx14(Figure, { path: stage.path, figure: stage.figure, distance: figureDistance, frozen: reducedMotion })
+  ] });
 }
-`
-  );
+function PaperStage({ children, className, style, ...sceneProps }) {
+  const dpr = qualityFor(sceneProps.quality ?? "auto").dpr;
+  return /* @__PURE__ */ jsx14("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ jsxs11(
+    Canvas3,
+    {
+      shadows: true,
+      dpr: [1, dpr],
+      camera: { fov: 38, near: 0.05, far: 400 },
+      onCreated: ({ gl, scene }) => {
+        gl.toneMapping = THREE17.ACESFilmicToneMapping;
+        scene.background = new THREE17.Color("#0c0a0b");
+      },
+      children: [
+        /* @__PURE__ */ jsx14(PaperStageScene, { ...sceneProps }),
+        children
+      ]
+    }
+  ) });
 }
-var VERT = `#version 300 es
-in vec2 aPos;
-void main() { gl_Position = vec4(aPos, 0.0, 1.0); }
-`;
-function compile(gl, type, src) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, src);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    throw new Error(`[paperlab parity] shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+
+// src/stage/walks.ts
+var walkNames = ["straight", "bend", "ess", "ring", "spiral"];
+var walks = {
+  /** Straight down the nave, away from the camera. The reference shot. */
+  straight: {
+    points: [
+      [0, 16],
+      [0, -20]
+    ],
+    closed: false
+  },
+  /** One long curve, so the far end of the colonnade stays hidden until you reach it. */
+  bend: {
+    points: [
+      [-2, 16],
+      [0, 6],
+      [5, -3],
+      [12, -10]
+    ],
+    closed: false
+  },
+  /** Two opposed curves — the walk turns twice and the banners turn with it. */
+  ess: {
+    points: [
+      [6, 17],
+      [-3, 7],
+      [3, -5],
+      [-6, -17]
+    ],
+    closed: false
+  },
+  /** A closed loop: the only walk `phase` can slide, and the only endless one. */
+  ring: {
+    points: [
+      [11, 0],
+      [0, 11],
+      [-11, 0],
+      [0, -11]
+    ],
+    closed: true
+  },
+  /** Inward and tightening — the space closes as the figure goes deeper. */
+  spiral: {
+    points: [
+      [14, 2],
+      [2, 13],
+      [-11, 1],
+      [-1, -9],
+      [7, -2],
+      [1, 4]
+    ],
+    closed: false
   }
-  return shader;
+};
+function getWalk(name) {
+  return walks[name];
 }
-function runCaseOnGPU(gl, c) {
-  const composed = buildDisplacementGLSL(c.stack, c.sheet);
-  const program = gl.createProgram();
-  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERT));
-  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, buildParityFragment(c.stack, c.sheet)));
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    throw new Error(`[paperlab parity] link failed: ${gl.getProgramInfoLog(program)}`);
+
+// src/stage/presets.ts
+var banner = (width, height, drape2 = {}) => ({
+  sheet: { width, height, segments: "auto" },
+  stock: "vellum",
+  surface: { grain: 0.22 },
+  deformers: [
+    { type: "drape", options: { amplitude: 0.16, folds: 3, falloff: 1.7, gather: 0.28, ...drape2 } }
+  ]
+});
+var stagePresets = {
+  nave: {
+    id: "nave",
+    label: "Nave",
+    description: "A straight aisle of hanging banners, lit from the far end.",
+    stage: {
+      path: walks.straight,
+      shot: { shot: "follow", distance: 5, lookAhead: 12, offset: 1.5 },
+      lighting: "nave"
+    },
+    layout: "colonnade",
+    layoutOptions: { aisle: 2.6, twist: 22, drape: 0.6, rise: 0.3 },
+    paper: banner(1.5, 8.5),
+    count: 18,
+    text: "the paper remembers every hand that folded it and every room it was carried through"
+  },
+  procession: {
+    id: "procession",
+    label: "Procession",
+    description: "The walk turns twice, so the far end stays hidden until you reach it.",
+    stage: {
+      path: walks.ess,
+      shot: { shot: "low", distance: 4, lookAhead: 9, offset: 1.1 },
+      lighting: "nave",
+      figure: { speed: 1.05 }
+    },
+    layout: "colonnade",
+    layoutOptions: { aisle: 2.2, twist: 34, breathe: 0.45, drape: 0.7 },
+    paper: banner(1.3, 9.5, { folds: 4, amplitude: 0.2 }),
+    count: 28,
+    text: "every letter you did not send is still folded somewhere in the dark waiting to be read aloud"
+  },
+  cloister: {
+    id: "cloister",
+    label: "Cloister",
+    description: "A closed loop. The figure walks it forever and the banners drift past.",
+    stage: {
+      path: walks.ring,
+      shot: { shot: "follow", distance: 4.5, lookAhead: 8, offset: 1.2 },
+      lighting: "nave"
+    },
+    layout: "colonnade",
+    layoutOptions: { aisle: 2.4, twist: 18, rise: 0.22 },
+    paper: banner(1.6, 7.5),
+    count: 24,
+    text: "around and around and the same words come back changed"
+  },
+  threshold: {
+    id: "threshold",
+    label: "Threshold",
+    description: "A few enormous sheets, wide enough apart to walk between and read.",
+    stage: {
+      // Its own short walk. A colonnade spreads over the WHOLE path whatever
+      // it is populating, so ten banners on the default 36-unit walk stand
+      // seven apart and the shot looks down an empty corridor.
+      path: {
+        points: [
+          [0, 9],
+          [0, -11]
+        ],
+        closed: false
+      },
+      // The aisle has to stay inside the frustum at the distance the shot
+      // stands: paper half a frame-width off the walk line is paper you
+      // never see. `lead` fails here for the same reason and worse.
+      shot: { shot: "follow", distance: 6.5, lookAhead: 9, offset: 0.9 },
+      lighting: "nave",
+      figure: { speed: 0.85 },
+      source: { spread: 4 }
+    },
+    layout: "colonnade",
+    layoutOptions: { aisle: 2.4, twist: 14, breathe: 0.18, margin: 0.12, rise: 0.2 },
+    paper: banner(2.6, 10, { folds: 2, amplitude: 0.24, falloff: 2 }),
+    count: 10,
+    text: "stand closer and read what it cost to write this down"
+  },
+  archive: {
+    id: "archive",
+    label: "Archive",
+    description: "Narrow strips packed tight \u2014 a corridor of records you edge through.",
+    stage: {
+      path: walks.bend,
+      // Far enough back that the figure reads as small; a `low` camera
+      // three units behind a body is all body.
+      shot: { shot: "low", distance: 8, lookAhead: 13, offset: 0.5 },
+      lighting: "nave",
+      ground: { color: "#0b0908" }
+    },
+    layout: "colonnade",
+    layoutOptions: { aisle: 1.7, twist: 44, breathe: 0.5, drape: 0.75, rise: 0.4 },
+    paper: banner(0.85, 11, { folds: 2, amplitude: 0.12 }),
+    count: 44,
+    text: "catalogued indexed cross referenced filed and never once opened by anyone at all"
   }
-  gl.useProgram(program);
-  for (const [name, value] of Object.entries(composed.uniforms)) {
-    const loc = gl.getUniformLocation(program, name);
-    if (!loc) continue;
-    if (typeof value === "number") gl.uniform1f(loc, value);
-    else if (value.length === 2) gl.uniform2f(loc, value[0], value[1]);
-    else if (value.length === 3) gl.uniform3f(loc, value[0], value[1], value[2]);
-    else gl.uniform4f(loc, value[0], value[1], value[2], value[3]);
+};
+function getStagePreset(id) {
+  const preset = stagePresets[id];
+  if (!preset) {
+    throw new Error(
+      `[paperlab] Unknown stage preset "${id}". Available: ${Object.keys(stagePresets).join(", ")}`
+    );
   }
-  const timeLoc = gl.getUniformLocation(program, "uPlTime");
-  if (timeLoc) gl.uniform1f(timeLoc, c.t);
-  const quad = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
-  const posLoc = gl.getAttribLocation(program, "aPos");
-  gl.enableVertexAttribArray(posLoc);
-  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
-  const tex = gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, tex);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, GRID, GRID, 0, gl.RGBA, gl.FLOAT, null);
-  const fbo = gl.createFramebuffer();
-  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
-  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
-  gl.viewport(0, 0, GRID, GRID);
-  gl.drawArrays(gl.TRIANGLES, 0, 3);
-  const out = new Float32Array(GRID * GRID * 4);
-  gl.readPixels(0, 0, GRID, GRID, gl.RGBA, gl.FLOAT, out);
-  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-  return out;
+  return preset;
 }
-function runParityHarness(canvas) {
-  const cnv = canvas ?? document.createElement("canvas");
-  const gl = cnv.getContext("webgl2");
-  if (!gl) throw new Error("[paperlab parity] WebGL2 unavailable");
-  if (!gl.getExtension("EXT_color_buffer_float")) {
-    throw new Error("[paperlab parity] EXT_color_buffer_float unavailable");
-  }
-  const point = new THREE13.Vector3();
-  return parityCases.map((c) => {
-    const gpu = runCaseOnGPU(gl, c);
-    let maxError = 0;
-    for (let row = 0; row < GRID; row++) {
-      for (let col = 0; col < GRID; col++) {
-        const u = col / (GRID - 1);
-        const v = row / (GRID - 1);
-        point.set((u - 0.5) * c.sheet.width, (v - 0.5) * c.sheet.height, 0);
-        displacePoint(point, u, v, c.stack, { t: c.t, sheet: c.sheet });
-        const i4 = (row * GRID + col) * 4;
-        maxError = Math.max(
-          maxError,
-          Math.abs(gpu[i4] - point.x),
-          Math.abs(gpu[i4 + 1] - point.y),
-          Math.abs(gpu[i4 + 2] - point.z)
-        );
-      }
-    }
-    return { name: c.name, maxError, pass: maxError < PARITY_EPSILON };
-  });
+function listStagePresets() {
+  return Object.keys(stagePresets);
 }
 
 // src/config/diff.ts
@@ -5014,7 +6455,8 @@ var BEHAVIOR_PHRASES = {
   fly: () => "arched and fluttering like it is airborne",
   fall: () => "rippling with one corner lifted, like a dropped sheet",
   carry: () => "drooping from a pinched corner, fluttering as if being carried",
-  flight: (o) => o.path === "loop" ? "tumbling through a seamless airborne loop" : "tumbling across the scene on the wind"
+  flight: (o) => o.path === "loop" ? "tumbling through a seamless airborne loop" : "tumbling across the scene on the wind",
+  crumple: (o) => o.progress < 0.3 ? "lightly handled \u2014 a few soft creases across it" : o.progress < 0.7 ? "crushed into irregular creased facets, as if screwed up and flattened out again" : "balled up in a fist"
 };
 function describeConfig(config) {
   const stock = getStock(config.stock);
@@ -5079,6 +6521,498 @@ Constraints: don't modify the preset values; three >= 0.160 and React 19 are
 required; the component needs no props.`;
 }
 
+// src/stage/export.ts
+var SCROLL_HEIGHTS = 4;
+function walkNameFor(path) {
+  const key = JSON.stringify({ points: path.points, closed: path.closed });
+  return walkNames.find(
+    (name) => JSON.stringify({ points: walks[name].points, closed: walks[name].closed }) === key
+  );
+}
+function stripDefaults(value, defaults) {
+  if (Array.isArray(value) || Array.isArray(defaults)) {
+    return JSON.stringify(value) === JSON.stringify(defaults) ? void 0 : value;
+  }
+  if (value && defaults && typeof value === "object" && typeof defaults === "object") {
+    const out = {};
+    for (const [key, child] of Object.entries(value)) {
+      const kept = stripDefaults(child, defaults[key]);
+      if (kept !== void 0) out[key] = kept;
+    }
+    return Object.keys(out).length > 0 ? out : void 0;
+  }
+  return value === defaults ? void 0 : value;
+}
+function diffStage(stage) {
+  const resolved = stageSchema.parse(stage);
+  const defaults = stageSchema.parse({});
+  const diff = stripDefaults(resolved, defaults) ?? {};
+  if (diff.path !== void 0) diff.path = resolved.path;
+  return diff;
+}
+function stringifyStage(value, indent = 0) {
+  const pad = "  ".repeat(indent);
+  const inner = "  ".repeat(indent + 1);
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]";
+    if (value.every((v) => typeof v === "number")) return `[${value.join(", ")}]`;
+    const items = value.map((v) => `${inner}${stringifyStage(v, indent + 1)}`);
+    return `[
+${items.join(",\n")}
+${pad}]`;
+  }
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+    const items = entries.map(([k, v]) => `${inner}${JSON.stringify(k)}: ${stringifyStage(v, indent + 1)}`);
+    return `{
+${items.join(",\n")}
+${pad}}`;
+  }
+  return JSON.stringify(value);
+}
+var SHOT_PHRASES = {
+  follow: "from behind and a little above them, looking up the walk",
+  lead: "from in front, walking backward as they come on",
+  low: "from down at floor level, looking up the banners",
+  wide: "from off to one side, level with them"
+};
+function describeStage(input) {
+  const stage = stageSchema.parse(input.stage);
+  const count = input.count ?? 22;
+  const walk = walkNameFor(stage.path);
+  const parts = [];
+  const shape = walk === "straight" || walk === void 0 ? "a straight walk" : walk === "ring" ? "a closed loop of a walk" : `an "${walk}" walk that curves as it goes`;
+  parts.push(`${count} tall paper banners standing along ${shape}`);
+  if (input.text?.trim()) {
+    parts.push("each printed with a column of your text running down it");
+  }
+  if (stage.showFigure) {
+    parts.push(`a small dark figure walking between them, seen ${SHOT_PHRASES[stage.shot.shot]}`);
+  }
+  parts.push(
+    stage.lighting === "nave" ? "the whole space dim and lit from behind, so the paper glows and the far end of the walk is a bright void" : `lit with the "${stage.lighting}" preset`
+  );
+  if (input.scroll) parts.push("and scrolling the page walks the figure deeper into it");
+  return parts.join(", ");
+}
+function propLines(input, indent) {
+  const lines = [];
+  if (input.paper) lines.push(`${indent}preset={banner}`);
+  if (input.text?.trim()) lines.push(`${indent}text={text}`);
+  if (input.count !== void 0) lines.push(`${indent}count={${input.count}}`);
+  if (input.layout !== "colonnade") lines.push(`${indent}layout="${input.layout}"`);
+  const layoutOptions = input.layoutOptions ?? {};
+  const layoutDefaults = getLayout(input.layout).defaults;
+  const changed = {};
+  for (const [key, value] of Object.entries(layoutOptions)) {
+    if (JSON.stringify(value) !== JSON.stringify(layoutDefaults[key])) changed[key] = value;
+  }
+  if (Object.keys(changed).length > 0) {
+    lines.push(`${indent}layoutOptions={${stringifyStage(changed).replace(/\n\s*/g, " ")}}`);
+  }
+  lines.push(`${indent}stage={stage}`);
+  return lines.join("\n");
+}
+function buildStageComponentSource(input) {
+  const name = input.componentName ?? "PaperNave";
+  const stage = diffStage(input.stage);
+  const stageConst = `const stage = ${stringifyStage(stage)} satisfies StageConfigInput`;
+  const bannerConst = input.paper ? `
+
+const banner = ${stringifyStage(diffConfig(paperConfigSchema.parse(input.paper)))} satisfies PaperConfigInput` : "";
+  const textConst = input.text?.trim() ? `
+
+const text = ${JSON.stringify(input.text)}` : "";
+  if (!input.scroll) {
+    return `import { PaperStage, type StageConfigInput${input.paper ? ", type PaperConfigInput" : ""} } from 'paperlab'
+
+${stageConst}${bannerConst}${textConst}
+
+export function ${name}() {
+  return (
+    <PaperStage
+${propLines(input, "      ")}
+    />
+  )
+}`;
+  }
+  return `import { useEffect, useRef, useState } from 'react'
+import { PaperStage, type StageConfigInput${input.paper ? ", type PaperConfigInput" : ""} } from 'paperlab'
+
+${stageConst}${bannerConst}${textConst}
+
+export function ${name}() {
+  const ref = useRef<HTMLDivElement>(null)
+  const [progress, setProgress] = useState(0)
+
+  // Scroll the section, walk the figure. The stage is pinned for the height
+  // of the section, so the page scrolling past it IS the walk.
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const onScroll = () => {
+      const { top, height } = el.getBoundingClientRect()
+      const travel = Math.max(height - window.innerHeight, 1)
+      setProgress(Math.min(Math.max(-top / travel, 0), 1))
+    }
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onScroll)
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onScroll)
+    }
+  }, [])
+
+  return (
+    <div ref={ref} style={{ height: '${SCROLL_HEIGHTS * 100}vh' }}>
+      <div style={{ position: 'sticky', top: 0, height: '100vh' }}>
+        <PaperStage
+${propLines(input, "          ")}
+          progress={progress}
+        />
+      </div>
+    </div>
+  )
+}`;
+}
+function buildStageAgentPayload(input) {
+  const name = input.componentName ?? "PaperNave";
+  const sizing = input.scroll ? `4. Sizing: the component brings its own height \u2014 it reserves ${SCROLL_HEIGHTS} viewport
+   heights of scroll and pins the canvas inside that. Drop it into the page
+   flow as a section; do NOT wrap it in a fixed-height container.` : `4. Sizing: the component fills its parent container. Place it where I ask;
+   give the parent an explicit height.`;
+  return `Integrate a Paperlab stage \u2014 paper as architecture, with a figure walking through it \u2014 into this project. (paperlab agent-payload v${AGENT_PAYLOAD_VERSION})
+
+1. Install the dependencies:
+
+   npm i paperlab three @react-three/fiber gsap
+
+2. Create the component below as \`components/${name}.tsx\` (or the project's
+   component convention). It is self-contained \u2014 it owns its own <Canvas>,
+   its own camera and its own lighting:
+
+\`\`\`tsx
+${buildStageComponentSource(input)}
+\`\`\`
+
+3. Placement: this is a full-bleed scene, not an inline element. Give it the
+   full width of the viewport.
+
+${sizing}
+
+5. Verify: run the dev server. You should see ${describeStage(input)}.
+   If the canvas is blank, the container almost certainly has no height \u2014 give
+   it one (this is the classic React Three Fiber integration bug, not a
+   paperlab bug).
+
+Constraints: don't modify the stage values; the camera is driven by the
+stage's own shot, so don't add OrbitControls; three >= 0.160 and React 19 are
+required; the component needs no props.`;
+}
+
+// src/field/parity.ts
+import * as THREE18 from "three";
+var GRID = 48;
+var PARITY_EPSILON = 5e-4;
+var parityCases = [
+  {
+    name: "roll: defaults",
+    stack: [{ type: "roll", options: { angle: 90, boundary: 0, radius: 0.12, spiral: 0.015 } }],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    name: "roll: tight receipt roll, rolling down",
+    stack: [{ type: "roll", options: { angle: 270, boundary: -0.4, radius: 0.07, spiral: 0.02 } }],
+    sheet: { width: 1, height: 2.6 },
+    t: 0
+  },
+  {
+    name: "curl: bottom-right peel",
+    stack: [{ type: "curl", options: { corner: "bottom-right", amount: 0.45, radius: 0.2, skew: 0 } }],
+    sheet: { width: 1.5, height: 1 },
+    t: 0
+  },
+  {
+    name: "curl: skewed top-left",
+    stack: [{ type: "curl", options: { corner: "top-left", amount: 0.7, radius: 0.3, skew: 15 } }],
+    sheet: { width: 1, height: 1 },
+    t: 0
+  },
+  {
+    name: "bend: positive arc at an angle",
+    stack: [{ type: "bend", options: { curvature: 1.2, angle: 33 } }],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    /**
+     * The gentle end, which nothing used to cover: the gate only ever tried
+     * |curvature| ≥ 0.6, and `photo-print` — the field starter preset — bends
+     * at 0.35. That band is where the arc's float32 evaluation loses its
+     * cancellation, and where the two paths were 6e-4 apart until `bend` was
+     * rewritten in cancellation-free form. Keep a case down here.
+     */
+    name: "bend: barely-there arc (the band photo-print lives in)",
+    stack: [{ type: "bend", options: { curvature: 0.35, angle: 0 } }],
+    sheet: { width: 1.2, height: 0.9 },
+    t: 0
+  },
+  {
+    name: "bend: the gentlest arc the schema allows",
+    stack: [{ type: "bend", options: { curvature: 0.02, angle: 61 } }],
+    sheet: { width: 2, height: 2.6 },
+    t: 0
+  },
+  {
+    name: "bend: negative arc",
+    stack: [{ type: "bend", options: { curvature: -0.8, angle: 0 } }],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    name: "fold: 90\xB0 hinge",
+    stack: [{ type: "fold", options: { angle: 90, offset: 0, foldAngle: 90, radius: 0.06 } }],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    name: "fold: deep fold, travelling down",
+    stack: [{ type: "fold", options: { angle: 270, offset: 0.2, foldAngle: 165, radius: 0.04 } }],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    name: "wave: free ripple at t=1.234",
+    stack: [
+      {
+        type: "wave",
+        options: { amplitude: 0.05, wavelength: 0.5, speed: 1, angle: 20, pinnedEdge: "none" }
+      }
+    ],
+    sheet: { width: 1, height: 1 },
+    t: 1.234
+  },
+  {
+    name: "wave: pinned top at t=2.5",
+    stack: [
+      {
+        type: "wave",
+        options: { amplitude: 0.04, wavelength: 0.4, speed: 1.5, angle: 80, pinnedEdge: "top" }
+      }
+    ],
+    sheet: { width: 1.2, height: 1.5 },
+    t: 2.5
+  },
+  {
+    name: "drape: banner hung from the top",
+    stack: [
+      {
+        type: "drape",
+        options: { amplitude: 0.17, folds: 5, falloff: 1.6, irregular: 0.45, gather: 0.5, pinnedEdge: "top" }
+      }
+    ],
+    sheet: { width: 1.5, height: 8.5 },
+    t: 0
+  },
+  {
+    name: "drape: deep irregular folds pinned at the bottom",
+    stack: [
+      {
+        type: "drape",
+        options: { amplitude: 0.55, folds: 11, falloff: 0.4, irregular: 1, gather: 1, pinnedEdge: "bottom" }
+      }
+    ],
+    sheet: { width: 2.2, height: 3 },
+    t: 0
+  },
+  {
+    name: "crumple: defaults",
+    stack: [{ type: "crumple", options: { amount: 0.35, scale: 3, pull: 0.4, seed: 0 } }],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    // The adversarial one. `fract` is a sawtooth, so the two halves disagree
+    // hardest where a crease lands exactly on a sample — a fine scale and a
+    // seed whose fold directions are near-axis puts the most creases in
+    // reach of the grid.
+    name: "crumple: fully crushed, fine creases, off-axis seed",
+    stack: [{ type: "crumple", options: { amount: 1, scale: 7.5, pull: 1, seed: 5 } }],
+    sheet: { width: 1.3, height: 0.9 },
+    t: 0
+  },
+  {
+    // Crush then curl, which is the order the crumple BEHAVIOR stacks them:
+    // the creases have to be placed on the flat sheet, not on a bent one.
+    name: "stacked: crumple \u2218 bend (the crumple behavior)",
+    stack: [
+      { type: "crumple", options: { amount: 0.62, scale: 3.3, pull: 0.5, seed: 2 } },
+      { type: "bend", options: { curvature: 0.31, angle: 35 } }
+    ],
+    sheet: { width: 1.1, height: 1.4 },
+    t: 0
+  },
+  {
+    name: "stacked: letter-fold pair (fold \u2218 fold)",
+    stack: [
+      { type: "fold", options: { angle: 270, offset: 0.2333, foldAngle: 120, radius: 0.05 } },
+      { type: "fold", options: { angle: 90, offset: 0.2333, foldAngle: 100, radius: 0.08 } }
+    ],
+    sheet: { width: 1, height: 1.4 },
+    t: 0
+  },
+  {
+    name: "stacked: bend \u2218 roll \u2218 wave",
+    stack: [
+      { type: "bend", options: { curvature: 0.6, angle: 0 } },
+      { type: "roll", options: { angle: 90, boundary: 0.1, radius: 0.15, spiral: 0 } },
+      {
+        type: "wave",
+        options: { amplitude: 0.02, wavelength: 0.6, speed: 0.7, angle: 45, pinnedEdge: "none" }
+      }
+    ],
+    sheet: { width: 1, height: 1.4 },
+    t: 0.8
+  }
+];
+function buildParityFragment(stack, sheet2) {
+  const composed = buildDisplacementGLSL(stack, sheet2);
+  return (
+    /* glsl */
+    `#version 300 es
+precision highp float;
+uniform float uPlTime;
+uniform float uPlBias;
+${composed.functionsSrc}
+${composed.displaceSrc}
+out vec4 outColor;
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5) / float(${GRID - 1});
+  vec3 p = vec3((uv - 0.5) * uSheet, 0.0);
+  outColor = vec4(plDisplace(p, uv, uPlTime, uPlBias), 1.0);
+}
+`
+  );
+}
+var VERT = `#version 300 es
+in vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }
+`;
+function compile(gl, type, src) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    throw new Error(`[paperlab parity] shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+  }
+  return shader;
+}
+function runCaseOnGPU(gl, c, bias = 1) {
+  const composed = buildDisplacementGLSL(c.stack, c.sheet);
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERT));
+  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, buildParityFragment(c.stack, c.sheet)));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(`[paperlab parity] link failed: ${gl.getProgramInfoLog(program)}`);
+  }
+  gl.useProgram(program);
+  for (const [name, value] of Object.entries(composed.uniforms)) {
+    const loc = gl.getUniformLocation(program, name);
+    if (!loc) continue;
+    if (typeof value === "number") gl.uniform1f(loc, value);
+    else if (value.length === 2) gl.uniform2f(loc, value[0], value[1]);
+    else if (value.length === 3) gl.uniform3f(loc, value[0], value[1], value[2]);
+    else gl.uniform4f(loc, value[0], value[1], value[2], value[3]);
+  }
+  const timeLoc = gl.getUniformLocation(program, "uPlTime");
+  if (timeLoc) gl.uniform1f(timeLoc, c.t);
+  const biasLoc = gl.getUniformLocation(program, "uPlBias");
+  if (biasLoc) gl.uniform1f(biasLoc, bias);
+  const quad = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  const posLoc = gl.getAttribLocation(program, "aPos");
+  gl.enableVertexAttribArray(posLoc);
+  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, GRID, GRID, 0, gl.RGBA, gl.FLOAT, null);
+  const fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+  gl.viewport(0, 0, GRID, GRID);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+  const out = new Float32Array(GRID * GRID * 4);
+  gl.readPixels(0, 0, GRID, GRID, gl.RGBA, gl.FLOAT, out);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return out;
+}
+function runBiasCases(gl) {
+  const results = [];
+  for (const c of parityCases) {
+    const strengths = c.stack.map((i) => getDeformer(i.type).glsl?.strength !== void 0);
+    if (!strengths.every((h) => h === strengths[0])) continue;
+    const scales = strengths[0];
+    const at0 = runCaseOnGPU(gl, c, 0);
+    const reference = scales ? null : runCaseOnGPU(gl, c, 1);
+    let maxError = 0;
+    for (let row = 0; row < GRID; row++) {
+      for (let col = 0; col < GRID; col++) {
+        const i4 = (row * GRID + col) * 4;
+        const ex = reference ? reference[i4] : (col / (GRID - 1) - 0.5) * c.sheet.width;
+        const ey = reference ? reference[i4 + 1] : (row / (GRID - 1) - 0.5) * c.sheet.height;
+        const ez = reference ? reference[i4 + 2] : 0;
+        maxError = Math.max(
+          maxError,
+          Math.abs(at0[i4] - ex),
+          Math.abs(at0[i4 + 1] - ey),
+          Math.abs(at0[i4 + 2] - ez)
+        );
+      }
+    }
+    results.push({
+      name: `bias: ${c.name} \u2192 ${scales ? "flat at 0" : "ignores bias"}`,
+      maxError,
+      pass: maxError < PARITY_EPSILON
+    });
+  }
+  return results;
+}
+function runParityHarness(canvas) {
+  const cnv = canvas ?? document.createElement("canvas");
+  const gl = cnv.getContext("webgl2");
+  if (!gl) throw new Error("[paperlab parity] WebGL2 unavailable");
+  if (!gl.getExtension("EXT_color_buffer_float")) {
+    throw new Error("[paperlab parity] EXT_color_buffer_float unavailable");
+  }
+  const point = new THREE18.Vector3();
+  const parity = parityCases.map((c) => {
+    const gpu = runCaseOnGPU(gl, c);
+    let maxError = 0;
+    for (let row = 0; row < GRID; row++) {
+      for (let col = 0; col < GRID; col++) {
+        const u = col / (GRID - 1);
+        const v = row / (GRID - 1);
+        point.set((u - 0.5) * c.sheet.width, (v - 0.5) * c.sheet.height, 0);
+        displacePoint(point, u, v, c.stack, { t: c.t, sheet: c.sheet });
+        const i4 = (row * GRID + col) * 4;
+        maxError = Math.max(
+          maxError,
+          Math.abs(gpu[i4] - point.x),
+          Math.abs(gpu[i4 + 1] - point.y),
+          Math.abs(gpu[i4 + 2] - point.z)
+        );
+      }
+    }
+    return { name: c.name, maxError, pass: maxError < PARITY_EPSILON };
+  });
+  return [...parity, ...runBiasCases(gl)];
+}
+
 // src/config/field-export.ts
 var MOTION_DEFAULTS = { driver: "autoplay", speed: 0.5 };
 var ENTRANCE_DEFAULTS = { type: "rise", stagger: 0.06, duration: 0.9 };
@@ -5120,12 +7054,15 @@ function diffFieldProps(input) {
 }
 var LAYOUT_PHRASES = {
   ring: "a ring you can see around",
-  deck: "a stacked deck",
-  cascade: "a diagonal cascade",
-  helix: "a climbing helix",
-  wall: "a jittered wall grid",
-  tunnel: "a receding tunnel",
-  scatter: "a loose scatter",
+  fan: "a fanned swatch deck hinged at one corner",
+  spread: "a stack slid sideways, each sheet bowing further than the last",
+  pile: "a heap on a desk, the sheets underneath pressed flat",
+  wall: "a pinned studio wall of sheets, none hanging quite square",
+  spill: "a dropped stack caught mid-air, each sheet bent its own way",
+  sweep: "a specimen chart of one sheet at every stage of its deformation",
+  book: "an open book, its pages splayed from a shared spine",
+  accordion: "one continuous strip folded into a concertina",
+  rack: "prints stood in a row and leaning back against a wall",
   sheet: "a stamp-block grid on a shared backing sheet"
 };
 function describeFieldConfig(input) {
@@ -5146,7 +7083,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((z18) => z18.id).join(" or ")} zone (release elsewhere flutters it back)`
+        `dragging one past its tear threshold detaches it to carry to the ${zones.map((z27) => z27.id).join(" or ")} zone (release elsewhere flutters it back)`
       );
     }
   } else {
@@ -5275,8 +7212,12 @@ export {
   PaperMaterial,
   PaperMesh,
   PaperMirror,
+  PaperStage,
+  PaperStageScene,
   PaperStateMachine,
   SHEET_LIFT,
+  TRANSMISSION_GAIN,
+  accordion,
   applyDeformerStack,
   atlasGrid,
   backContentSchema,
@@ -5284,6 +7225,7 @@ export {
   behaviorConfigSchema,
   bend,
   bendOptionsSchema,
+  book,
   buildAgentPayload,
   buildDisplacementGLSL,
   buildFieldAgentPayload,
@@ -5291,32 +7233,45 @@ export {
   buildFieldFragmentShader,
   buildFieldVertexShader,
   buildJsxSnippet,
+  buildStageAgentPayload,
+  buildStageComponentSource,
   carry,
   carryDrive,
   carryOptionsSchema,
-  cascade,
   clothConfigSchema,
+  colonnade,
   composeSurface,
   contentSchema,
   contentText,
   coreStateNames,
   cornerNames,
   createSheetGeometry,
+  createWalkPath,
+  crumple,
+  crumpleBehavior,
+  crumpleBehaviorOptionsSchema,
+  crumpleOptionsSchema,
   curl,
   curlOptionsSchema,
   dampTo,
-  deck,
   deformerInstanceSchema,
   describeConfig,
   describeFieldConfig,
+  describeStage,
   diffConfig,
   diffFieldProps,
+  diffStage,
   displacePoint,
   distinctFieldPresets,
+  drape,
+  drapeOptionsSchema,
   drawBacking,
   fall,
   fallOptionsSchema,
+  fan,
+  fieldBounds,
   fieldKeyboardStep,
+  fitCamera,
   flattenNumeric,
   flight,
   flightOptionsSchema,
@@ -5333,12 +7288,13 @@ export {
   getLayout,
   getLightingPreset,
   getPreset,
+  getStagePreset,
   getStock,
+  getWalk,
   groupFieldPapers,
   gust,
   hang,
   hangOptionsSchema,
-  helix,
   idleNames,
   idlePresets,
   isBuiltinPreset,
@@ -5351,6 +7307,7 @@ export {
   listDeformers,
   listLayouts,
   listPresets,
+  listStagePresets,
   makeGoboTexture,
   mergeConfig,
   mergeWithDeletes,
@@ -5364,8 +7321,11 @@ export {
   peelOptionsSchema,
   physicsNames,
   physicsSchema,
+  pile,
+  qualityNames,
   quantizeProgress,
   quantizeTime,
+  rack,
   receiptContentSchema,
   receiptTotals,
   recordStateOverride,
@@ -5374,6 +7334,7 @@ export {
   registerLayout,
   registerPreset,
   resolveConfig,
+  resolveDeformerStack,
   resolveFieldSlotConfig,
   resolveMode,
   resolveSegments,
@@ -5382,7 +7343,6 @@ export {
   roll,
   rollOptionsSchema,
   runParityHarness,
-  scatter,
   sceneSchema,
   serializePreset,
   sheet,
@@ -5390,20 +7350,28 @@ export {
   sheetLayoutSchema,
   sheetSchema,
   sheetSlotXY,
+  shotNames,
   silhouetteRects,
+  spill,
+  spread,
   stackMinSegments,
   stackUniformValues,
+  stagePresets,
+  stageSchema,
   stateDefSchema,
   stateEventTransitions,
   stateTransitionSchema,
   stockNames,
   stockSchema,
   stocks,
+  stringifyStage,
   stripStates,
   supportsWebGL,
   surfaceSchema,
+  sweep,
   tornEdgesOnDetach,
-  tunnel,
+  translucencyUniforms,
+  translucencyValues,
   uniquePresetName,
   unregisterPreset,
   unroll,
@@ -5411,6 +7379,9 @@ export {
   useContentAtlas,
   usePaperStates,
   usePrefersReducedMotion,
+  walkNameFor,
+  walkNames,
+  walks,
   wall,
   wave,
   waveOptionsSchema,