paperlab 0.5.0 → 0.5.2

package/dist/stage.cjs

@@ -52,8 +52,8 @@ module.exports = __toCommonJS(stage_exports);
 
 // src/stage/PaperStage.tsx
 var THREE22 = __toESM(require("three"), 1);
-var import_fiber10 = require("@react-three/fiber");
-var import_react23 = require("react");
+var import_fiber11 = require("@react-three/fiber");
+var import_react24 = require("react");
 var import_zod29 = require("zod");
 
 // src/a11y/index.tsx
@@ -275,8 +275,8 @@ function contentText(config) {
 // src/PaperField.tsx
 var THREE16 = __toESM(require("three"), 1);
 var import_gsap5 = require("gsap");
-var import_fiber6 = require("@react-three/fiber");
-var import_react16 = require("react");
+var import_fiber7 = require("@react-three/fiber");
+var import_react17 = require("react");
 
 // src/config/schema.ts
 var import_zod14 = require("zod");
@@ -2110,9 +2110,24 @@ function paintBackdrop(backdrop, width, height, image) {
   return texture;
 }
 
+// src/scene/release.tsx
+var import_fiber3 = require("@react-three/fiber");
+var import_react4 = require("react");
+function ReleaseContextOnUnmount() {
+  const gl = (0, import_fiber3.useThree)((s) => s.gl);
+  (0, import_react4.useEffect)(
+    () => () => {
+      gl.forceContextLoss();
+      gl.dispose();
+    },
+    [gl]
+  );
+  return null;
+}
+
 // src/field/dropZones.tsx
 var THREE4 = __toESM(require("three"), 1);
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropZoneRegistry = class {
   zones = /* @__PURE__ */ new Map();
@@ -2151,7 +2166,7 @@ var DropZoneRegistry = class {
     for (const fn of this.listeners) fn();
   }
 };
-var DropZoneContext = (0, import_react4.createContext)(null);
+var DropZoneContext = (0, import_react5.createContext)(null);
 var globCache = /* @__PURE__ */ new Map();
 var globRegExp = (glob) => {
   let re = globCache.get(glob);
@@ -2167,17 +2182,17 @@ function zoneAccepts(zone, name) {
 }
 var zoneContains = (zone, x, y) => Math.abs(x - zone.bounds.position[0]) <= zone.bounds.size[0] / 2 && Math.abs(y - zone.bounds.position[1]) <= zone.bounds.size[1] / 2;
 function DropZoneVisual({ registry: registry4, config }) {
-  (0, import_react4.useSyncExternalStore)(registry4.subscribe, registry4.getVersion, registry4.getVersion);
+  (0, import_react5.useSyncExternalStore)(registry4.subscribe, registry4.getVersion, registry4.getVersion);
   const hovered = registry4.hovered === config.id;
   const style = config.highlight ?? "glow";
   const [w, h] = config.bounds.size;
-  const edges = (0, import_react4.useMemo)(() => {
+  const edges = (0, import_react5.useMemo)(() => {
     const plane = new THREE4.PlaneGeometry(w, h);
     const geo = new THREE4.EdgesGeometry(plane);
     plane.dispose();
     return geo;
   }, [w, h]);
-  (0, import_react4.useEffect)(() => () => edges.dispose(), [edges]);
+  (0, import_react5.useEffect)(() => () => edges.dispose(), [edges]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("group", { position: config.bounds.position, children: [
     style !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [w, h] }),
@@ -2198,8 +2213,8 @@ function DropZoneVisual({ registry: registry4, config }) {
 // src/PaperMesh.tsx
 var THREE11 = __toESM(require("three"), 1);
 var import_gsap2 = require("gsap");
-var import_fiber3 = require("@react-three/fiber");
-var import_react10 = require("react");
+var import_fiber4 = require("@react-three/fiber");
+var import_react11 = require("react");
 
 // src/config/serialize.ts
 function parsePreset(input) {
@@ -2262,9 +2277,9 @@ function computeSheetNormals(geometry) {
 }
 
 // src/core/stable.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useStable(value) {
-  const held = (0, import_react5.useRef)(value);
+  const held = (0, import_react6.useRef)(value);
   if (!deepEqual(held.current, value)) held.current = value;
   return held.current;
 }
@@ -2580,7 +2595,7 @@ function listPresets() {
 
 // src/content/texture.ts
 var THREE6 = __toESM(require("three"), 1);
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/content/type.ts
 function wrapLines(ctx, text, maxWidth, font) {
@@ -2869,9 +2884,9 @@ function makeTexture(canvas) {
   return tex;
 }
 function useContentTexture(content, sheet2, stock) {
-  const [texture, setTexture] = (0, import_react6.useState)(null);
+  const [texture, setTexture] = (0, import_react7.useState)(null);
   const key = JSON.stringify({ content: content ?? null, w: sheet2.width, h: sheet2.height, stock: stock.id });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let disposed = false;
     let tex = null;
     if (!content) {
@@ -3840,7 +3855,7 @@ var ClothSim = class {
 
 // src/surface/PaperMaterial.tsx
 var THREE10 = __toESM(require("three"), 1);
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_three_custom_shader_material = __toESM(require("three-custom-shader-material"), 1);
 
 // src/surface/compose.ts
@@ -4213,14 +4228,14 @@ function padPositions(positions) {
 }
 
 // src/scene/rig.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var LightRigContext = (0, import_react7.createContext)(null);
+var LightRigContext = (0, import_react8.createContext)(null);
 function LightRig({ rig, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LightRigContext.Provider, { value: rig, children });
 }
 function useLightRig(own) {
-  return (0, import_react7.useContext)(LightRigContext) ?? getLightingPreset(own);
+  return (0, import_react8.useContext)(LightRigContext) ?? getLightingPreset(own);
 }
 
 // src/surface/PaperMaterial.tsx
@@ -4246,8 +4261,8 @@ function PaperMaterial({
     sheet2,
     rig
   );
-  const bound = (0, import_react8.useMemo)(() => composed.uniforms, [composed.structureKey]);
-  (0, import_react8.useEffect)(() => {
+  const bound = (0, import_react9.useMemo)(() => composed.uniforms, [composed.structureKey]);
+  (0, import_react9.useEffect)(() => {
     for (const [key, uniform] of Object.entries(composed.uniforms)) {
       if (!bound[key] || key === "uFrontMap" || key === "uBackMap") continue;
       if (bound[key].value instanceof THREE10.Color && uniform.value instanceof THREE10.Color) {
@@ -4258,7 +4273,7 @@ function PaperMaterial({
       }
     }
   });
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (bound.uFrontMap) bound.uFrontMap.value = texture;
     if (bound.uBackMap) bound.uBackMap.value = backTexture ?? null;
   }, [bound, texture, backTexture]);
@@ -4292,7 +4307,7 @@ function quantizeProgress(p, duration, fps = ON_TWOS_FPS) {
 }
 
 // src/states/usePaperStates.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/states/machine.ts
 var import_gsap = require("gsap");
@@ -4519,15 +4534,15 @@ var PaperStateMachine = class {
 // src/states/usePaperStates.ts
 function usePaperStates(config, enabled, instant, onAction, onStateChange) {
   const live = enabled && Boolean(config.states);
-  const key = (0, import_react9.useMemo)(() => JSON.stringify(config), [config]);
-  const onActionRef = (0, import_react9.useRef)(onAction);
+  const key = (0, import_react10.useMemo)(() => JSON.stringify(config), [config]);
+  const onActionRef = (0, import_react10.useRef)(onAction);
   onActionRef.current = onAction;
-  const onStateChangeRef = (0, import_react9.useRef)(onStateChange);
+  const onStateChangeRef = (0, import_react10.useRef)(onStateChange);
   onStateChangeRef.current = onStateChange;
-  const machineRef = (0, import_react9.useRef)(null);
-  const lastStateRef = (0, import_react9.useRef)("rest");
-  const [animated, setAnimated] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const machineRef = (0, import_react10.useRef)(null);
+  const lastStateRef = (0, import_react10.useRef)("rest");
+  const [animated, setAnimated] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     if (!live) {
       machineRef.current?.dispose();
       machineRef.current = null;
@@ -4554,7 +4569,7 @@ function usePaperStates(config, enabled, instant, onAction, onStateChange) {
     lastStateRef.current = machine.state;
     setAnimated({ config: machine.structuralConfig(), state: machine.state });
   }, [key, live, instant]);
-  (0, import_react9.useEffect)(
+  (0, import_react10.useEffect)(
     () => () => {
       machineRef.current?.dispose();
       machineRef.current = null;
@@ -4586,7 +4601,7 @@ function configInputs(props) {
 }
 function useResolvedConfig(props) {
   const inputs = useStable(configInputs(props));
-  return (0, import_react10.useMemo)(() => resolveConfig(props), [inputs]);
+  return (0, import_react11.useMemo)(() => resolveConfig(props), [inputs]);
 }
 function resolveConfig(props) {
   const base = props.preset ? typeof props.preset === "string" ? getPreset(props.preset) : parsePreset(props.preset) : paperConfigSchema.parse({});
@@ -4610,7 +4625,7 @@ var planeNormal = new THREE11.Vector3();
 var anchorScratch = new THREE11.Vector3();
 var worldScratch = new THREE11.Vector3();
 var quatScratch = new THREE11.Quaternion();
-var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
+var PaperMesh = (0, import_react11.forwardRef)(function PaperMesh2(props, ref) {
   const resolved = useResolvedConfig(props);
   const reduced = usePrefersReducedMotion(props.reducedMotion);
   const statesLive = Boolean(resolved.states) && props.stateTriggers !== false;
@@ -4620,33 +4635,33 @@ var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
     state: machineState
   } = usePaperStates(resolved, statesLive, reduced, props.onStateAction, props.onStateChange);
   const behavior = config.behavior ? getBehavior(config.behavior.type) : null;
-  const machineRef = (0, import_react10.useRef)(null);
+  const machineRef = (0, import_react11.useRef)(null);
   machineRef.current = machine;
-  const resolvedRef = (0, import_react10.useRef)(resolved);
+  const resolvedRef = (0, import_react11.useRef)(resolved);
   resolvedRef.current = resolved;
   const isCloth = !reduced && typeof config.physics === "object";
   const idle = !reduced && typeof config.physics === "string" && config.physics !== "none" ? getIdlePreset(config.physics) : null;
-  const meshRef = (0, import_react10.useRef)(null);
-  const groupRef = (0, import_react10.useRef)(null);
-  const handleRefs = (0, import_react10.useRef)([]);
-  const overridesRef = (0, import_react10.useRef)({});
-  const dirtyRef = (0, import_react10.useRef)(true);
-  const playingRef = (0, import_react10.useRef)(false);
-  const tweenRef = (0, import_react10.useRef)(null);
-  const draggingRef = (0, import_react10.useRef)(null);
-  const configRef = (0, import_react10.useRef)(config);
+  const meshRef = (0, import_react11.useRef)(null);
+  const groupRef = (0, import_react11.useRef)(null);
+  const handleRefs = (0, import_react11.useRef)([]);
+  const overridesRef = (0, import_react11.useRef)({});
+  const dirtyRef = (0, import_react11.useRef)(true);
+  const playingRef = (0, import_react11.useRef)(false);
+  const tweenRef = (0, import_react11.useRef)(null);
+  const draggingRef = (0, import_react11.useRef)(null);
+  const configRef = (0, import_react11.useRef)(config);
   configRef.current = config;
-  const controls = (0, import_fiber3.useThree)((s) => s.controls);
-  const camera = (0, import_fiber3.useThree)((s) => s.camera);
+  const controls = (0, import_fiber4.useThree)((s) => s.controls);
+  const camera = (0, import_fiber4.useThree)((s) => s.camera);
   const behaviorKey = JSON.stringify(config.behavior ?? null);
   const deformersKey = JSON.stringify(config.deformers ?? null);
   const sheetKey = JSON.stringify(config.sheet);
   const physicsKey = JSON.stringify(config.physics);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!draggingRef.current && !playingRef.current) overridesRef.current = {};
     dirtyRef.current = true;
   }, [behaviorKey, deformersKey, sheetKey, physicsKey]);
-  const { minSegments, autoSegments, animatedStack } = (0, import_react10.useMemo)(() => {
+  const { minSegments, autoSegments, animatedStack } = (0, import_react11.useMemo)(() => {
     const cfg = configRef.current;
     const probe2 = buildStack(cfg, {});
     if (!probe2) {
@@ -4675,18 +4690,18 @@ var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
       animatedStack: animated
     };
   }, [behaviorKey, deformersKey, physicsKey]);
-  const geometry = (0, import_react10.useMemo)(() => {
+  const geometry = (0, import_react11.useMemo)(() => {
     if (!isCloth) return createSheetGeometry(config.sheet, minSegments, autoSegments);
     const [sx, sy] = resolveSegments(config.sheet, 2);
     const capped = Math.min(Math.max(sx, sy), CLOTH_MAX_SEGMENTS);
     return new THREE11.PlaneGeometry(config.sheet.width, config.sheet.height, capped, capped);
   }, [sheetKey, minSegments, autoSegments, isCloth]);
-  (0, import_react10.useEffect)(() => () => geometry.dispose(), [geometry]);
-  const basePositions = (0, import_react10.useMemo)(
+  (0, import_react11.useEffect)(() => () => geometry.dispose(), [geometry]);
+  const basePositions = (0, import_react11.useMemo)(
     () => Float32Array.from(geometry.attributes.position.array),
     [geometry]
   );
-  const sim = (0, import_react10.useMemo)(() => {
+  const sim = (0, import_react11.useMemo)(() => {
     if (!isCloth) return null;
     const cloth = configRef.current.physics;
     const cols = geometry.parameters.widthSegments + 1;
@@ -4739,7 +4754,7 @@ var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
     playingRef.current = false;
     tweenRef.current?.pause();
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (props.autoplay && !reduced) play();
     return () => {
       tweenRef.current?.kill();
@@ -4755,7 +4770,7 @@ var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
       behavior: { ...cfg.behavior, ...overridesRef.current }
     });
   };
-  (0, import_react10.useImperativeHandle)(ref, () => ({
+  (0, import_react11.useImperativeHandle)(ref, () => ({
     play,
     pause,
     get playing() {
@@ -4792,8 +4807,8 @@ var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
     placeProgrammatic: () => machineRef.current?.placeProgrammatic() ?? false,
     returnProgrammatic: () => machineRef.current?.returnProgrammatic() ?? false
   }));
-  const idlePose = (0, import_react10.useRef)({ position: [0, 0, 0], rotation: [0, 0, 0] });
-  (0, import_fiber3.useFrame)(({ clock }, delta) => {
+  const idlePose = (0, import_react11.useRef)({ position: [0, 0, 0], rotation: [0, 0, 0] });
+  (0, import_fiber4.useFrame)(({ clock }, delta) => {
     const cfg = liveConfig();
     const now = reduced ? 0 : cfg.onTwos ? quantizeTime(clock.elapsedTime) : clock.elapsedTime;
     const hasBehaviorTransform = Boolean(behavior?.transform && cfg.behavior);
@@ -4878,7 +4893,7 @@ var PaperMesh = (0, import_react10.forwardRef)(function PaperMesh2(props, ref) {
     const p = overridesRef.current[behavior.progressParam];
     if (typeof p === "number") props.onProgress?.(p);
   };
-  const grabAnchor = (0, import_react10.useRef)(new THREE11.Vector3());
+  const grabAnchor = (0, import_react11.useRef)(new THREE11.Vector3());
   const clothDown = (e) => {
     if (!isCloth || !sim || !props.interactive || !groupRef.current) return;
     e.stopPropagation();
@@ -5094,22 +5109,22 @@ function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions)
 // src/field/fieldGroup.tsx
 var THREE13 = __toESM(require("three"), 1);
 var import_gsap3 = require("gsap");
-var import_fiber4 = require("@react-three/fiber");
-var import_react12 = require("react");
+var import_fiber5 = require("@react-three/fiber");
+var import_react13 = require("react");
 var import_three_custom_shader_material2 = __toESM(require("three-custom-shader-material"), 1);
 
 // src/content/atlas.ts
 var THREE12 = __toESM(require("three"), 1);
-var import_react11 = require("react");
+var import_react12 = require("react");
 var MAX_ATLAS = 4096;
 function atlasGrid(count, aspect = 1) {
   const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count * Math.max(aspect, 0.01)))));
   return { cols, rows: Math.max(1, Math.ceil(count / cols)) };
 }
 function useContentAtlas(contents, sheet2, stock) {
-  const [atlas, setAtlas] = (0, import_react11.useState)(null);
+  const [atlas, setAtlas] = (0, import_react12.useState)(null);
   const stableContents = useStable(contents);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let disposed = false;
     const aspect = sheet2.height / sheet2.width;
     const { cols, rows } = atlasGrid(contents.length, aspect);
@@ -5839,11 +5854,11 @@ function FieldGroup({
   const stock = getStock(config.stock);
   const rig = useLightRig(config.scene.lighting);
   const behavior = config.behavior && !config.deformers ? getBehavior(config.behavior.type) : null;
-  const progressRef = (0, import_react12.useRef)(
+  const progressRef = (0, import_react13.useRef)(
     behavior ? config.behavior[behavior.progressParam] : 0
   );
   const buildStackAt = (progress) => fieldShapeStack(config, progress);
-  const initialStack = (0, import_react12.useMemo)(
+  const initialStack = (0, import_react13.useMemo)(
     () => buildStackAt(progressRef.current),
     [
       JSON.stringify(config.behavior ?? null),
@@ -5852,7 +5867,7 @@ function FieldGroup({
     ]
   );
   const structureKey = initialStack.map((i) => i.type).join("|");
-  const geometry = (0, import_react12.useMemo)(() => {
+  const geometry = (0, import_react13.useMemo)(() => {
     const floor = stackMinSegments(initialStack, config.sheet);
     const want = [0, 0];
     for (const p of PROGRESS_SAMPLES2) {
@@ -5886,9 +5901,9 @@ function FieldGroup({
     geo.setAttribute("aBias", new THREE13.InstancedBufferAttribute(bias, 1));
     return geo;
   }, [JSON.stringify(config.sheet), structureKey, count, autoCeiling]);
-  (0, import_react12.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react13.useEffect)(() => () => geometry.dispose(), [geometry]);
   const atlas = useContentAtlas(contents, config.sheet, stock);
-  const shader = (0, import_react12.useMemo)(() => {
+  const shader = (0, import_react13.useMemo)(() => {
     const composed = buildDisplacementGLSL(initialStack, config.sheet);
     const uniforms = {};
     for (const [name, value] of Object.entries(composed.uniforms)) {
@@ -5917,19 +5932,19 @@ function FieldGroup({
     config.surface.showThrough,
     config.surface.translucency
   ]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const values = translucencyValues(config.surface.translucency ?? stock.translucency, rig);
     shader.uniforms.uTranslucency.value = values.translucency;
     shader.uniforms.uBackLightDir.value.copy(values.direction);
     shader.uniforms.uBackLightColor.value.copy(values.color);
     shader.uniforms.uAmbientTransmission.value = values.ambient;
   }, [shader, rig, config.surface.translucency, stock.translucency]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!atlas) return;
     shader.uniforms.uAtlas.value = atlas.texture;
     shader.uniforms.uAtlasGrid.value.set(atlas.cols, atlas.rows);
   }, [atlas, shader]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!behavior || shared.reduced) return;
     const state = { p: progressRef.current };
     const tween = import_gsap3.gsap.to(state, {
@@ -5946,8 +5961,8 @@ function FieldGroup({
       tween.kill();
     };
   }, [structureKey, shared.reduced]);
-  const meshRef = (0, import_react12.useRef)(null);
-  (0, import_fiber4.useFrame)(({ clock }) => {
+  const meshRef = (0, import_react13.useRef)(null);
+  (0, import_fiber5.useFrame)(({ clock }) => {
     const mesh = meshRef.current;
     if (!mesh) return;
     const elapsed = clock.elapsedTime - Math.max(shared.mountTimeRef.current, 0);
@@ -6094,7 +6109,7 @@ var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
 
 // src/field/backingSheet.tsx
 var THREE14 = __toESM(require("three"), 1);
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/content/backing.ts
 function silhouetteRects(o, count) {
@@ -6167,7 +6182,7 @@ function BackingSheet({
   removed
 }) {
   const { width, height } = sheetBackingSize(options);
-  const canvas = (0, import_react13.useMemo)(() => {
+  const canvas = (0, import_react14.useMemo)(() => {
     if (typeof document === "undefined") return null;
     const c = document.createElement("canvas");
     const scale = Math.min(1024, Math.round(360 * Math.max(width, height))) / Math.max(width, height);
@@ -6175,14 +6190,14 @@ function BackingSheet({
     c.height = Math.max(2, Math.round(height * scale));
     return c;
   }, [width, height]);
-  const texture = (0, import_react13.useMemo)(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
+  const texture = (0, import_react14.useMemo)(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
   const removedKey = [...removed].sort((a, b) => a - b).join(",");
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!canvas || !texture) return;
     drawBacking(canvas, { options, count, tint: BACKING_TINT, removed });
     texture.needsUpdate = true;
   }, [canvas, texture, JSON.stringify(options), count, removedKey]);
-  (0, import_react13.useEffect)(() => () => texture?.dispose(), [texture]);
+  (0, import_react14.useEffect)(() => () => texture?.dispose(), [texture]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("mesh", { receiveShadow: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("planeGeometry", { args: [width, height] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("meshStandardMaterial", { map: texture, color: "#ffffff", roughness: 0.92, metalness: 0 })
@@ -6192,8 +6207,8 @@ function BackingSheet({
 // src/field/interactiveField.tsx
 var THREE15 = __toESM(require("three"), 1);
 var import_gsap4 = require("gsap");
-var import_fiber5 = require("@react-three/fiber");
-var import_react14 = require("react");
+var import_fiber6 = require("@react-three/fiber");
+var import_react15 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var PICK_BEHAVIORS = /* @__PURE__ */ new Set(["peel", "carry"]);
 function InteractiveField(props) {
@@ -6201,15 +6216,15 @@ function InteractiveField(props) {
   const total = papers.length;
   const layout = getLayout(layoutId);
   const reduced = usePrefersReducedMotion(props.reducedMotion);
-  const contextRegistry = (0, import_react14.useContext)(DropZoneContext);
-  const registry4 = (0, import_react14.useMemo)(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
-  const camera = (0, import_fiber5.useThree)((s) => s.camera);
-  const gl = (0, import_fiber5.useThree)((s) => s.gl);
-  const controls = (0, import_fiber5.useThree)((s) => s.controls);
-  const [removed, setRemoved] = (0, import_react14.useState)(EMPTY_SET);
-  const [slotPatches, setSlotPatches] = (0, import_react14.useState)({});
-  const [slotStates, setSlotStates] = (0, import_react14.useState)({});
-  const slotConfigs = (0, import_react14.useMemo)(
+  const contextRegistry = (0, import_react15.useContext)(DropZoneContext);
+  const registry4 = (0, import_react15.useMemo)(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
+  const camera = (0, import_fiber6.useThree)((s) => s.camera);
+  const gl = (0, import_fiber6.useThree)((s) => s.gl);
+  const controls = (0, import_fiber6.useThree)((s) => s.controls);
+  const [removed, setRemoved] = (0, import_react15.useState)(EMPTY_SET);
+  const [slotPatches, setSlotPatches] = (0, import_react15.useState)({});
+  const [slotStates, setSlotStates] = (0, import_react15.useState)({});
+  const slotConfigs = (0, import_react15.useMemo)(
     () => papers.map((slot, i) => {
       const config = resolveFieldSlotConfig(slot, fallback, i, layoutId, layoutOptions);
       const patch = slotPatches[i];
@@ -6223,14 +6238,14 @@ function InteractiveField(props) {
       slotPatches
     ]
   );
-  const poses = (0, import_react14.useMemo)(
+  const poses = (0, import_react15.useMemo)(
     () => slotConfigs.map((_, i) => layout.pose(i, total, layoutOptions, 0, props.sheet)),
     [layoutId, JSON.stringify(layoutOptions), total, props.sheet.width, props.sheet.height]
   );
-  const groupRefs = (0, import_react14.useRef)([]);
-  const handleRefs = (0, import_react14.useRef)([]);
-  const pressRef = (0, import_react14.useRef)(null);
-  const carriedRef = (0, import_react14.useRef)(null);
+  const groupRefs = (0, import_react15.useRef)([]);
+  const handleRefs = (0, import_react15.useRef)([]);
+  const pressRef = (0, import_react15.useRef)(null);
+  const carriedRef = (0, import_react15.useRef)(null);
   const zonesLive = () => [...props.zones ?? [], ...registry4.list()];
   const slotName = (i) => {
     const preset = papers[i]?.preset ?? fallback;
@@ -6243,10 +6258,10 @@ function InteractiveField(props) {
     }
     props.onSlotStateChange?.(i, state);
   };
-  const raycaster = (0, import_react14.useMemo)(() => new THREE15.Raycaster(), []);
-  const planeScratch = (0, import_react14.useMemo)(() => new THREE15.Plane(new THREE15.Vector3(0, 0, 1), 0), []);
-  const pointScratch = (0, import_react14.useMemo)(() => new THREE15.Vector3(), []);
-  const ndcScratch = (0, import_react14.useMemo)(() => new THREE15.Vector2(), []);
+  const raycaster = (0, import_react15.useMemo)(() => new THREE15.Raycaster(), []);
+  const planeScratch = (0, import_react15.useMemo)(() => new THREE15.Plane(new THREE15.Vector3(0, 0, 1), 0), []);
+  const pointScratch = (0, import_react15.useMemo)(() => new THREE15.Vector3(), []);
+  const ndcScratch = (0, import_react15.useMemo)(() => new THREE15.Vector2(), []);
   const planePoint = (clientX, clientY, planeZ) => {
     const rect = gl.domElement.getBoundingClientRect();
     ndcScratch.set(
@@ -6376,7 +6391,7 @@ function InteractiveField(props) {
     import_gsap4.gsap.to(group.rotation, { x: home.rotation[0], y: home.rotation[1], z: home.rotation[2], duration });
     import_gsap4.gsap.to(group.scale, { x: home.scale, y: home.scale, z: home.scale, duration: duration * 0.5 });
   };
-  const onPointerMoveRef = (0, import_react14.useRef)(() => {
+  const onPointerMoveRef = (0, import_react15.useRef)(() => {
   });
   onPointerMoveRef.current = (e) => {
     const press = pressRef.current;
@@ -6400,7 +6415,7 @@ function InteractiveField(props) {
       pick(slot, hit[0], hit[1], pointerId);
     }
   };
-  const onPointerUpRef = (0, import_react14.useRef)(() => {
+  const onPointerUpRef = (0, import_react15.useRef)(() => {
   });
   onPointerUpRef.current = (e) => {
     pressRef.current = null;
@@ -6414,7 +6429,7 @@ function InteractiveField(props) {
     if (zone) settleInto(carried, zone);
     else returnHome(carried);
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const move = (e) => onPointerMoveRef.current(e);
     const up = (e) => onPointerUpRef.current(e);
     window.addEventListener("pointermove", move);
@@ -6424,7 +6439,7 @@ function InteractiveField(props) {
       window.removeEventListener("pointerup", up);
     };
   }, []);
-  (0, import_fiber5.useFrame)((_, delta) => {
+  (0, import_fiber6.useFrame)((_, delta) => {
     const carried = carriedRef.current;
     if (!carried || carried.settling) return;
     const group = groupRefs.current[carried.slot];
@@ -6462,7 +6477,7 @@ function InteractiveField(props) {
     group.scale.x += (targetScale - group.scale.x) * 0.15;
     group.scale.y = group.scale.z = group.scale.x;
   });
-  const a11yImplRef = (0, import_react14.useRef)(null);
+  const a11yImplRef = (0, import_react15.useRef)(null);
   a11yImplRef.current = {
     pick: (slot) => {
       const home = poses[slot];
@@ -6487,7 +6502,7 @@ function InteractiveField(props) {
     zoneIds: () => zonesLive().map((z30) => z30.id),
     slotState: (slot) => slotStates[slot] ?? "rest"
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const ref = props.a11yRef;
     if (!ref) return;
     ref.current = {
@@ -6540,7 +6555,7 @@ function InteractiveField(props) {
 }
 
 // src/field/keyboardMirror.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function fieldKeyboardStep(carry2, slot, key, controller) {
   if (!carry2) {
@@ -6586,7 +6601,7 @@ function FieldKeyboardMirror({
   papers,
   controller
 }) {
-  const [carrying, setCarrying] = (0, import_react15.useState)(null);
+  const [carrying, setCarrying] = (0, import_react16.useState)(null);
   const paperLabel = (slot, i) => {
     try {
       const config = resolveConfig({ preset: slot.preset });
@@ -6689,16 +6704,16 @@ function fitCamera(layout, n, options, sheet2, fovDeg, aspect, margin = 1.06) {
 
 // src/PaperField.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var PaperFieldMesh = (0, import_react16.forwardRef)(
+var PaperFieldMesh = (0, import_react17.forwardRef)(
   function PaperFieldMesh2(props, ref) {
     const reduced = usePrefersReducedMotion(props.reducedMotion);
-    const papers = (0, import_react16.useMemo)(
+    const papers = (0, import_react17.useMemo)(
       () => effectiveFieldPapers(props.papers, props.images),
       [props.papers, props.images]
     );
     const stablePapers = useStable(papers);
     const stablePreset = useStable(props.preset ?? null);
-    const groups = (0, import_react16.useMemo)(
+    const groups = (0, import_react17.useMemo)(
       () => groupFieldPapers(stablePapers, stablePreset ?? void 0),
       [stablePapers, stablePreset]
     );
@@ -6707,22 +6722,22 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
     const layout = getLayout(layoutId);
     const firstSheet = groups[0]?.config.sheet;
     const stableLayoutOptions = useStable(props.layoutOptions ?? {});
-    const layoutOptions = (0, import_react16.useMemo)(
+    const layoutOptions = (0, import_react17.useMemo)(
       // Sheet grids size their cells from the papers themselves — gutter is
       // then literally the spacing between stamps (explicit cell dims win).
       () => resolveLayoutOptions(layoutId, layout, stableLayoutOptions, firstSheet),
       [layoutId, stableLayoutOptions, firstSheet?.width, firstSheet?.height]
     );
-    const phaseRef = (0, import_react16.useRef)(0);
-    const dragVelRef = (0, import_react16.useRef)(0);
-    const mountTimeRef = (0, import_react16.useRef)(-1);
-    const morphRef = (0, import_react16.useRef)({ from: null, t: 1 });
-    const prevLayout = (0, import_react16.useRef)({ id: layoutId, options: layoutOptions });
-    const gl = (0, import_fiber6.useThree)((s) => s.gl);
+    const phaseRef = (0, import_react17.useRef)(0);
+    const dragVelRef = (0, import_react17.useRef)(0);
+    const mountTimeRef = (0, import_react17.useRef)(-1);
+    const morphRef = (0, import_react17.useRef)({ from: null, t: 1 });
+    const prevLayout = (0, import_react17.useRef)({ id: layoutId, options: layoutOptions });
+    const gl = (0, import_fiber7.useThree)((s) => s.gl);
     const driver = reduced ? "none" : props.motion?.driver ?? "autoplay";
     const speed = props.motion?.speed ?? 0.5;
     const entranceType = reduced ? "none" : props.entrance?.type ?? "rise";
-    (0, import_react16.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       const prev = prevLayout.current;
       if (prev.id !== layoutId || JSON.stringify(prev.options) !== JSON.stringify(layoutOptions)) {
         morphRef.current = { from: prev, t: 0 };
@@ -6730,7 +6745,7 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
         prevLayout.current = { id: layoutId, options: layoutOptions };
       }
     }, [layoutId, layoutOptions]);
-    (0, import_react16.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       if (driver !== "drag") return;
       const el = gl.domElement;
       let lastX = null;
@@ -6756,7 +6771,7 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
         window.removeEventListener("pointerup", up);
       };
     }, [driver, gl]);
-    (0, import_fiber6.useFrame)(({ clock }, delta) => {
+    (0, import_fiber7.useFrame)(({ clock }, delta) => {
       if (mountTimeRef.current < 0) mountTimeRef.current = clock.elapsedTime;
       if (driver === "autoplay") phaseRef.current += delta * speed * 0.02;
       if (driver === "drag") {
@@ -6814,14 +6829,14 @@ var PaperFieldMesh = (0, import_react16.forwardRef)(
   }
 );
 function FitCamera(meshProps) {
-  const camera = (0, import_fiber6.useThree)((s) => s.camera);
-  const width = (0, import_fiber6.useThree)((s) => s.size.width);
-  const height = (0, import_fiber6.useThree)((s) => s.size.height);
+  const camera = (0, import_fiber7.useThree)((s) => s.camera);
+  const width = (0, import_fiber7.useThree)((s) => s.size.width);
+  const height = (0, import_fiber7.useThree)((s) => s.size.height);
   const papersProp = useStable(meshProps.papers ?? null);
   const imagesProp = useStable(meshProps.images ?? null);
   const presetProp = useStable(meshProps.preset ?? null);
   const optionsProp = useStable(meshProps.layoutOptions ?? {});
-  const field = (0, import_react16.useMemo)(() => {
+  const field = (0, import_react17.useMemo)(() => {
     const papers = effectiveFieldPapers(papersProp ?? void 0, imagesProp ?? void 0);
     const layoutId = meshProps.layout ?? "ring";
     const layout = getLayout(layoutId);
@@ -6829,7 +6844,7 @@ function FitCamera(meshProps) {
     const options = resolveLayoutOptions(layoutId, layout, optionsProp, sheet2);
     return { layout, n: papers.length, options, sheet: sheet2 ?? DEFAULT_SHEET };
   }, [papersProp, imagesProp, presetProp, meshProps.layout, optionsProp]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!(camera instanceof THREE16.PerspectiveCamera)) return;
     const { position, target } = fitCamera(
       field.layout,
@@ -6845,27 +6860,28 @@ function FitCamera(meshProps) {
   }, [camera, width, height, field]);
   return null;
 }
-var PaperField = (0, import_react16.forwardRef)(function PaperField2({ children, className, style, scene, ...meshProps }, ref) {
+var PaperField = (0, import_react17.forwardRef)(function PaperField2({ children, className, style, scene, ...meshProps }, ref) {
   const rig = sceneSchema.parse(scene ?? {});
-  const registry4 = (0, import_react16.useMemo)(() => new DropZoneRegistry(), []);
-  const a11yRef = (0, import_react16.useRef)(null);
-  const papers = (0, import_react16.useMemo)(
+  const registry4 = (0, import_react17.useMemo)(() => new DropZoneRegistry(), []);
+  const a11yRef = (0, import_react17.useRef)(null);
+  const papers = (0, import_react17.useMemo)(
     () => effectiveFieldPapers(meshProps.papers, meshProps.images),
     [meshProps.papers, meshProps.images]
   );
   const stablePapers = useStable(papers);
   const stablePreset = useStable(meshProps.preset ?? null);
-  const interactive = (0, import_react16.useMemo)(
+  const interactive = (0, import_react17.useMemo)(
     () => fieldIsInteractive(stablePapers, stablePreset ?? void 0, meshProps.interactive),
     [stablePapers, stablePreset, meshProps.interactive]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropZoneContext.Provider, { value: registry4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_fiber6.Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_fiber7.Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FitCamera, { ...meshProps }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaperBackdrop, { backdrop: rig.backdrop }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaperLighting, { preset: rig.lighting, light: rig.light, floor: -2.4, scale: 14 }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaperFieldMesh, { ref, a11yControllerRef: a11yRef, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ReleaseContextOnUnmount, {})
     ] }),
     interactive && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldKeyboardMirror, { papers, controller: a11yRef })
   ] }) });
@@ -6962,13 +6978,13 @@ function stageCamera(path, walked, scale, options) {
 
 // src/stage/Figure.tsx
 var THREE18 = __toESM(require("three"), 1);
-var import_react18 = require("react");
-var import_fiber8 = require("@react-three/fiber");
+var import_react19 = require("react");
+var import_fiber9 = require("@react-three/fiber");
 
 // src/stage/RiggedFigure.tsx
 var import_drei2 = require("@react-three/drei");
-var import_fiber7 = require("@react-three/fiber");
-var import_react17 = require("react");
+var import_fiber8 = require("@react-three/fiber");
+var import_react18 = require("react");
 var THREE17 = __toESM(require("three"), 1);
 var import_SkeletonUtils = require("three/examples/jsm/utils/SkeletonUtils.js");
 
@@ -7144,7 +7160,7 @@ function placeFigure(path, distance, o) {
 
 // src/stage/RiggedFigure.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ModelBoundary = class extends import_react17.Component {
+var ModelBoundary = class extends import_react18.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -7158,14 +7174,14 @@ var ModelBoundary = class extends import_react17.Component {
 };
 function Rigged({ url, options, distance, frozen }) {
   const gltf = (0, import_drei2.useGLTF)(url);
-  const scene = (0, import_react17.useMemo)(() => (0, import_SkeletonUtils.clone)(gltf.scene), [gltf.scene]);
+  const scene = (0, import_react18.useMemo)(() => (0, import_SkeletonUtils.clone)(gltf.scene), [gltf.scene]);
   const silhouette = options.finish === "silhouette";
-  const material = (0, import_react17.useMemo)(
+  const material = (0, import_react18.useMemo)(
     () => silhouette ? new THREE17.MeshBasicMaterial({ color: options.color, toneMapped: false }) : null,
     [silhouette, options.color]
   );
-  (0, import_react17.useEffect)(() => () => material?.dispose(), [material]);
-  const scale = (0, import_react17.useMemo)(() => {
+  (0, import_react18.useEffect)(() => () => material?.dispose(), [material]);
+  const scale = (0, import_react18.useMemo)(() => {
     scene.traverse((child) => {
       const mesh = child;
       if (!mesh.isMesh) return;
@@ -7179,13 +7195,13 @@ function Rigged({ url, options, distance, frozen }) {
     const height = box.max.y - box.min.y;
     return height > 0 ? options.height / height : 1;
   }, [scene, material, silhouette, options.height]);
-  const mixer = (0, import_react17.useMemo)(() => new THREE17.AnimationMixer(scene), [scene]);
-  const clip = (0, import_react17.useMemo)(() => {
+  const mixer = (0, import_react18.useMemo)(() => new THREE17.AnimationMixer(scene), [scene]);
+  const clip = (0, import_react18.useMemo)(() => {
     const names = gltf.animations.map((a) => a.name);
     const wanted = frozen ? pickStillClip(names) : pickClip(names, isRunning(options));
     return gltf.animations.find((a) => a.name === wanted) ?? gltf.animations[0];
   }, [gltf.animations, options, frozen]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!clip) return;
     mixer.clipAction(clip).play();
     return () => {
@@ -7193,7 +7209,7 @@ function Rigged({ url, options, distance, frozen }) {
       mixer.uncacheClip(clip);
     };
   }, [mixer, clip]);
-  (0, import_fiber7.useFrame)(() => {
+  (0, import_fiber8.useFrame)(() => {
     if (!clip) return;
     mixer.setTime(frozen ? 0 : clipTimeFor(distance.current, options, clip.duration));
   });
@@ -7212,29 +7228,29 @@ function Segment({ length, radius, material }) {
 function Figure({ path, figure, distance, distanceRef, walkLength, frozen }) {
   const reducedMotion = usePrefersReducedMotion();
   const still = frozen ?? reducedMotion;
-  const options = (0, import_react18.useMemo)(() => figureSchema.parse(figure ?? {}), [figure]);
-  const walk = (0, import_react18.useMemo)(() => getWalkPath(walkPathSchema.parse(path ?? {})), [path]);
-  const root = (0, import_react18.useRef)(null);
-  const walkedRef = (0, import_react18.useRef)(0);
-  const hips = (0, import_react18.useRef)(null);
-  const chest = (0, import_react18.useRef)(null);
-  const legL = (0, import_react18.useRef)(null);
-  const legR = (0, import_react18.useRef)(null);
-  const kneeL = (0, import_react18.useRef)(null);
-  const kneeR = (0, import_react18.useRef)(null);
-  const armL = (0, import_react18.useRef)(null);
-  const armR = (0, import_react18.useRef)(null);
-  const elbowL = (0, import_react18.useRef)(null);
-  const elbowR = (0, import_react18.useRef)(null);
-  const material = (0, import_react18.useMemo)(
+  const options = (0, import_react19.useMemo)(() => figureSchema.parse(figure ?? {}), [figure]);
+  const walk = (0, import_react19.useMemo)(() => getWalkPath(walkPathSchema.parse(path ?? {})), [path]);
+  const root = (0, import_react19.useRef)(null);
+  const walkedRef = (0, import_react19.useRef)(0);
+  const hips = (0, import_react19.useRef)(null);
+  const chest = (0, import_react19.useRef)(null);
+  const legL = (0, import_react19.useRef)(null);
+  const legR = (0, import_react19.useRef)(null);
+  const kneeL = (0, import_react19.useRef)(null);
+  const kneeR = (0, import_react19.useRef)(null);
+  const armL = (0, import_react19.useRef)(null);
+  const armR = (0, import_react19.useRef)(null);
+  const elbowL = (0, import_react19.useRef)(null);
+  const elbowR = (0, import_react19.useRef)(null);
+  const material = (0, import_react19.useMemo)(
     () => new THREE18.MeshBasicMaterial({ color: options.color, toneMapped: false }),
     [options.color]
   );
-  (0, import_react18.useEffect)(() => () => material.dispose(), [material]);
+  (0, import_react19.useEffect)(() => () => material.dispose(), [material]);
   const h = options.height;
   const p = PROPORTIONS;
   const torso = (p.shoulder - p.hip) * h;
-  (0, import_fiber8.useFrame)((state) => {
+  (0, import_fiber9.useFrame)((state) => {
     const walked = distanceRef !== void 0 ? distanceRef.current * (walkLength ?? walk.length) : distance ?? (still ? 0 : state.clock.elapsedTime * options.speed);
     walkedRef.current = walked;
     const { position, yaw, pose } = placeFigure(walk, walked, options);
@@ -7289,7 +7305,7 @@ function Figure({ path, figure, distance, distanceRef, walkLength, frozen }) {
     // The capsules are both the fallback and the thing being replaced, so
     // a model that is still downloading shows a walking figure rather than
     // a hole, and one that never arrives leaves the stage as it was.
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react18.Suspense, { fallback: capsules, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react19.Suspense, { fallback: capsules, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       RiggedFigure,
       {
         url: options.model,
@@ -7304,7 +7320,7 @@ function Figure({ path, figure, distance, distanceRef, walkLength, frozen }) {
 
 // src/stage/Surround.tsx
 var THREE19 = __toESM(require("three"), 1);
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function makeSkyTexture(sky) {
   const canvas = document.createElement("canvas");
@@ -7333,8 +7349,7 @@ function makeGlowTexture(color) {
   const ctx = canvas.getContext("2d");
   const glow = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
   const c = new THREE19.Color(color);
-  const rgb = `${c.r * 255 | 0}, ${c.g * 255 | 0}, ${c.b * 255 | 0}`;
-  for (const [stop, alpha] of [
+  for (const [stop, level] of [
     [0, 1],
     [0.5, 1],
     [0.62, 0.66],
@@ -7343,7 +7358,8 @@ function makeGlowTexture(color) {
     [0.94, 0.03],
     [1, 0]
   ]) {
-    glow.addColorStop(stop, `rgba(${rgb}, ${alpha})`);
+    const scaled = `${c.r * 255 * level | 0}, ${c.g * 255 * level | 0}, ${c.b * 255 * level | 0}`;
+    glow.addColorStop(stop, `rgb(${scaled})`);
   }
   ctx.fillStyle = glow;
   ctx.fillRect(0, 0, size, size);
@@ -7359,8 +7375,8 @@ function Source({
   color,
   intensity = SOURCE_INTENSITY
 }) {
-  const texture = (0, import_react19.useMemo)(() => makeGlowTexture(color), [color]);
-  (0, import_react19.useEffect)(() => () => texture.dispose(), [texture]);
+  const texture = (0, import_react20.useMemo)(() => makeGlowTexture(color), [color]);
+  (0, import_react20.useEffect)(() => () => texture.dispose(), [texture]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("mesh", { position, rotation: [0, yaw, 0], children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("planeGeometry", { args: [size * 2.4, size * 1.8] }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -7368,6 +7384,7 @@ function Source({
       {
         map: texture,
         transparent: true,
+        blending: THREE19.AdditiveBlending,
         color: new THREE19.Color(intensity, intensity, intensity),
         depthWrite: false,
         fog: false
@@ -7377,8 +7394,8 @@ function Source({
 }
 function Surround({ radius, sky }) {
   const { zenith, horizon, ground } = sky;
-  const texture = (0, import_react19.useMemo)(() => makeSkyTexture({ zenith, horizon, ground }), [zenith, horizon, ground]);
-  (0, import_react19.useEffect)(() => () => texture.dispose(), [texture]);
+  const texture = (0, import_react20.useMemo)(() => makeSkyTexture({ zenith, horizon, ground }), [zenith, horizon, ground]);
+  (0, import_react20.useEffect)(() => () => texture.dispose(), [texture]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("mesh", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("sphereGeometry", { args: [radius, 32, 24] }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("meshBasicMaterial", { map: texture, side: THREE19.BackSide, fog: false })
@@ -7387,7 +7404,7 @@ function Surround({ radius, sky }) {
 
 // src/stage/Room.tsx
 var THREE20 = __toESM(require("three"), 1);
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function makeFloorTexture(color, repeats) {
   const size = 256;
@@ -7419,8 +7436,8 @@ function Floor({
   slab
 }) {
   const repeats = slab > 0 ? Math.max(1, Math.round(size / slab)) : 0;
-  const texture = (0, import_react20.useMemo)(() => repeats > 0 ? makeFloorTexture(color, repeats) : null, [color, repeats]);
-  (0, import_react20.useEffect)(() => () => texture?.dispose(), [texture]);
+  const texture = (0, import_react21.useMemo)(() => repeats > 0 ? makeFloorTexture(color, repeats) : null, [color, repeats]);
+  (0, import_react21.useEffect)(() => () => texture?.dispose(), [texture]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("mesh", { rotation: [-Math.PI / 2, 0, 0], receiveShadow: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("planeGeometry", { args: [size, size] }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("meshStandardMaterial", { map: texture, color: texture ? "#ffffff" : color, roughness: 1 })
@@ -7440,7 +7457,7 @@ function Columns({
   offset,
   color
 }) {
-  const placements = (0, import_react20.useMemo)(() => {
+  const placements = (0, import_react21.useMemo)(() => {
     if (!(spacing > 0) || !(path.length > 0)) return [];
     const bays = Math.max(1, Math.round(path.length / spacing));
     const out = [];
@@ -7456,12 +7473,12 @@ function Columns({
     }
     return out;
   }, [path, spacing, offset]);
-  const shaft = (0, import_react20.useRef)(null);
-  const base = (0, import_react20.useRef)(null);
-  const capital = (0, import_react20.useRef)(null);
+  const shaft = (0, import_react21.useRef)(null);
+  const base = (0, import_react21.useRef)(null);
+  const capital = (0, import_react21.useRef)(null);
   const plate = width * 1.45;
   const plateHeight = width * 0.24;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const m = new THREE20.Matrix4();
     const q = new THREE20.Quaternion();
     const scale = new THREE20.Vector3(1, 1, 1);
@@ -7505,7 +7522,7 @@ function Doorway({
   color,
   extent
 }) {
-  const geometry = (0, import_react20.useMemo)(() => {
+  const geometry = (0, import_react21.useMemo)(() => {
     const w = size * 2.4 * opening;
     const h = size * 1.8 * opening;
     const shape = new THREE20.Shape();
@@ -7523,8 +7540,8 @@ function Doorway({
     shape.holes.push(hole);
     return new THREE20.ShapeGeometry(shape);
   }, [size, opening, extent]);
-  (0, import_react20.useEffect)(() => () => geometry.dispose(), [geometry]);
-  const stood = (0, import_react20.useMemo)(
+  (0, import_react21.useEffect)(() => () => geometry.dispose(), [geometry]);
+  const stood = (0, import_react21.useMemo)(
     () => [position[0] + Math.sin(yaw) * NUDGE, position[1], position[2] + Math.cos(yaw) * NUDGE],
     [position, yaw]
   );
@@ -7533,7 +7550,7 @@ function Doorway({
 
 // src/stage/Suspension.tsx
 var THREE21 = __toESM(require("three"), 1);
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var euler = (pose) => new THREE21.Euler(pose.rotation[0], pose.rotation[1], pose.rotation[2]);
 function rodLength(sheet2, pose) {
@@ -7557,13 +7574,13 @@ function Suspension({
   type,
   hardware
 }) {
-  const poses = (0, import_react21.useMemo)(() => {
+  const poses = (0, import_react22.useMemo)(() => {
     const entry = getLayout(layout);
     if (!entry) return [];
     const options = entry.optionsSchema.parse(layoutOptions);
     return Array.from({ length: count }, (_, i) => entry.pose(i, count, options, 0, sheet2));
   }, [layout, layoutOptions, count, sheet2]);
-  const geometry = (0, import_react21.useMemo)(() => {
+  const geometry = (0, import_react22.useMemo)(() => {
     const points = [];
     const end = new THREE21.Vector3();
     for (const pose of poses) {
@@ -7583,17 +7600,17 @@ function Suspension({
     g.setAttribute("position", new THREE21.Float32BufferAttribute(points, 3));
     return g;
   }, [poses, paperHeight, ceiling, type, sheet2]);
-  (0, import_react21.useEffect)(() => () => geometry.dispose(), [geometry]);
-  const clipRef = (0, import_react21.useRef)(null);
-  const rodRef = (0, import_react21.useRef)(null);
-  const rodGeometry = (0, import_react21.useMemo)(() => {
+  (0, import_react22.useEffect)(() => () => geometry.dispose(), [geometry]);
+  const clipRef = (0, import_react22.useRef)(null);
+  const rodRef = (0, import_react22.useRef)(null);
+  const rodGeometry = (0, import_react22.useMemo)(() => {
     const r = sheet2.width * 0.018;
     const g = new THREE21.CylinderGeometry(r, r, sheet2.width * 1.22, 8);
     g.rotateZ(Math.PI / 2);
     return g;
   }, [sheet2.width]);
-  (0, import_react21.useEffect)(() => () => rodGeometry.dispose(), [rodGeometry]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => () => rodGeometry.dispose(), [rodGeometry]);
+  (0, import_react22.useEffect)(() => {
     const m = new THREE21.Matrix4();
     const q = new THREE21.Quaternion();
     const at = new THREE21.Vector3();
@@ -7984,8 +8001,8 @@ function travelBetween(from, to, t, closed) {
 }
 
 // src/stage/useWalk.ts
-var import_react22 = require("react");
-var import_fiber9 = require("@react-three/fiber");
+var import_react23 = require("react");
+var import_fiber10 = require("@react-three/fiber");
 function useWalk({
   path,
   motion,
@@ -7995,15 +8012,15 @@ function useWalk({
   reduced,
   onProgress
 }) {
-  const gl = (0, import_fiber9.useThree)((s) => s.gl);
-  const walk = (0, import_react22.useRef)(progress ?? 0);
-  const velocity = (0, import_react22.useRef)(0);
-  const dragged = (0, import_react22.useRef)(false);
-  const travel = (0, import_react22.useRef)(null);
+  const gl = (0, import_fiber10.useThree)((s) => s.gl);
+  const walk = (0, import_react23.useRef)(progress ?? 0);
+  const velocity = (0, import_react23.useRef)(0);
+  const dragged = (0, import_react23.useRef)(false);
+  const travel = (0, import_react23.useRef)(null);
   const controlled = progress !== void 0;
   const interactive = !controlled && motion.driver === "drag";
-  const engaged = (0, import_react22.useRef)(false);
-  const travelTo = (0, import_react22.useCallback)(
+  const engaged = (0, import_react23.useRef)(false);
+  const travelTo = (0, import_react23.useCallback)(
     (target) => {
       engaged.current = true;
       velocity.current = 0;
@@ -8017,14 +8034,14 @@ function useWalk({
     },
     [path.closed, reduced]
   );
-  const step = (0, import_react22.useCallback)(
+  const step = (0, import_react23.useCallback)(
     (direction) => {
       const from = travel.current?.to ?? walk.current;
       travelTo(nextStop(stops, from, direction, path.closed));
     },
     [stops, path.closed, travelTo]
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (controlled) {
       walk.current = progress;
       travel.current = null;
@@ -8032,7 +8049,7 @@ function useWalk({
     }
   }, [controlled, progress]);
   const canvas = gl.domElement;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!interactive) return;
     const hadTabIndex = canvas.hasAttribute("tabindex");
     if (!hadTabIndex) canvas.tabIndex = 0;
@@ -8123,8 +8140,8 @@ function useWalk({
       if (!hadLabel) canvas.removeAttribute("aria-label");
     };
   }, [canvas, interactive, motion.speed, motion.capture, path.closed, step, travelTo, stops]);
-  const reported = (0, import_react22.useRef)(-1);
-  (0, import_fiber9.useFrame)((_, delta) => {
+  const reported = (0, import_react23.useRef)(-1);
+  (0, import_fiber10.useFrame)((_, delta) => {
     if (onProgress && Math.abs(walk.current - reported.current) > 1e-4) {
       reported.current = walk.current;
       onProgress(walk.current);
@@ -8150,7 +8167,7 @@ function useWalk({
       if (!path.closed && (walk.current <= 0 || walk.current >= 1)) velocity.current = 0;
     }
   });
-  return (0, import_react22.useMemo)(() => ({ walk, travelTo, step, dragged }), [travelTo, step]);
+  return (0, import_react23.useMemo)(() => ({ walk, travelTo, step, dragged }), [travelTo, step]);
 }
 
 // src/stage/quality.ts
@@ -8270,13 +8287,13 @@ function ShotRig({
   paperHeight,
   walk
 }) {
-  const camera = (0, import_fiber10.useThree)((s) => s.camera);
-  const path = (0, import_react23.useMemo)(() => getWalkPath(stage.path), [stage.path]);
-  const scale = (0, import_react23.useMemo)(
+  const camera = (0, import_fiber11.useThree)((s) => s.camera);
+  const path = (0, import_react24.useMemo)(() => getWalkPath(stage.path), [stage.path]);
+  const scale = (0, import_react24.useMemo)(
     () => ({ figure: stage.figure.height, paper: paperHeight }),
     [stage.figure.height, paperHeight]
   );
-  (0, import_fiber10.useFrame)(() => {
+  (0, import_fiber11.useFrame)(() => {
     const { position, target } = stageCamera(path, walk.current * path.length, scale, stage.shot);
     camera.position.set(position[0], position[1], position[2]);
     camera.lookAt(target[0], target[1], target[2]);
@@ -8284,17 +8301,17 @@ function ShotRig({
   return null;
 }
 function QualityWatch({ tier, onChange }) {
-  const samples = (0, import_react23.useRef)([]);
-  const settle2 = (0, import_react23.useRef)(SETTLE_FRAMES);
-  const window2 = (0, import_react23.useRef)(FIRST_WINDOW);
-  const failed = (0, import_react23.useRef)(null);
-  const settled = (0, import_react23.useCallback)((next) => {
+  const samples = (0, import_react24.useRef)([]);
+  const settle2 = (0, import_react24.useRef)(SETTLE_FRAMES);
+  const window2 = (0, import_react24.useRef)(FIRST_WINDOW);
+  const failed = (0, import_react24.useRef)(null);
+  const settled = (0, import_react24.useCallback)((next) => {
     samples.current = [];
     settle2.current = SETTLE_FRAMES;
     window2.current = STEADY_WINDOW;
     return next;
   }, []);
-  (0, import_fiber10.useFrame)((_, delta) => {
+  (0, import_fiber11.useFrame)((_, delta) => {
     if (settle2.current > 0) {
       settle2.current -= 1;
       return;
@@ -8331,41 +8348,41 @@ function PaperStageScene({
   reducedMotion
 }) {
   const still = usePrefersReducedMotion(reducedMotion);
-  const [tier, setTier] = (0, import_react23.useState)(quality === "auto" ? INITIAL_TIER : quality);
-  (0, import_react23.useEffect)(() => {
+  const [tier, setTier] = (0, import_react24.useState)(quality === "auto" ? INITIAL_TIER : quality);
+  (0, import_react24.useEffect)(() => {
     if (quality !== "auto") setTier(quality);
   }, [quality]);
-  const reportQuality = (0, import_react23.useRef)(onQualityChange);
-  (0, import_react23.useEffect)(() => {
+  const reportQuality = (0, import_react24.useRef)(onQualityChange);
+  (0, import_react24.useEffect)(() => {
     reportQuality.current = onQualityChange;
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     reportQuality.current?.(tier);
   }, [tier]);
   const settings = quality === "auto" ? qualityTiers[tier] : qualityFor(quality);
   const stageKey = JSON.stringify(stageInput ?? {});
-  const stage = (0, import_react23.useMemo)(() => stageSchema.parse(stageInput ?? {}), [stageKey]);
-  const path = (0, import_react23.useMemo)(() => getWalkPath(stage.path), [stage.path]);
-  const rig = (0, import_react23.useMemo)(() => {
+  const stage = (0, import_react24.useMemo)(() => stageSchema.parse(stageInput ?? {}), [stageKey]);
+  const path = (0, import_react24.useMemo)(() => getWalkPath(stage.path), [stage.path]);
+  const rig = (0, import_react24.useMemo)(() => {
     const resolved = resolveLighting(stage.lighting, stage.light);
     return {
       ...resolved,
       sky: { zenith: stage.source.zenith, horizon: stage.source.color, ground: stage.ground.color }
     };
   }, [stage.lighting, stage.light, stage.source.zenith, stage.source.color, stage.ground.color]);
-  const sheetDims = (0, import_react23.useMemo)(() => {
+  const sheetDims = (0, import_react24.useMemo)(() => {
     const { width, height } = resolveConfig({ preset: preset ?? BANNER }).sheet;
     return { width, height };
   }, [preset]);
   const paperHeight = sheetDims.height;
   const paperWidth = sheetDims.width;
   const paper = preset ?? BANNER;
-  const resolvedLayoutOptions = (0, import_react23.useMemo)(() => {
+  const resolvedLayoutOptions = (0, import_react24.useMemo)(() => {
     const schema = getLayout(layout).optionsSchema;
     const takesPath = schema instanceof import_zod29.z.ZodObject && "path" in schema.shape;
     return takesPath ? { ...layoutOptions, path: stage.path } : layoutOptions;
   }, [layout, layoutOptions, stage.path]);
-  const slots = (0, import_react23.useMemo)(() => {
+  const slots = (0, import_react24.useMemo)(() => {
     if (papers) return papers;
     if (images) return void 0;
     if (text !== void 0) {
@@ -8403,7 +8420,7 @@ function PaperStageScene({
   }, [papers, images, text, count, sheetDims]);
   const drive = stageMotionSchema.parse(motion ?? {});
   const slotCount = slots?.length ?? images?.length ?? count;
-  const stops = (0, import_react23.useMemo)(() => {
+  const stops = (0, import_react24.useMemo)(() => {
     const spec = getLayout(layout);
     const placed = spec.walkStops?.(slotCount, spec.optionsSchema.parse(resolvedLayoutOptions ?? {}));
     if (placed && placed.length > 0) return placed;
@@ -8418,11 +8435,11 @@ function PaperStageScene({
     reduced: still,
     onProgress
   });
-  const surroundRadius = (0, import_react23.useMemo)(
+  const surroundRadius = (0, import_react24.useMemo)(
     () => Math.max(path.length * 1.6, paperHeight * 9),
     [path.length, paperHeight]
   );
-  const source = (0, import_react23.useMemo)(() => {
+  const source = (0, import_react24.useMemo)(() => {
     const [x, z30] = walkPoint(path, path.length + stage.source.beyond);
     const [tx, tz] = path.tangentAt(1);
     const size = paperHeight * stage.source.spread;
@@ -8525,7 +8542,7 @@ function PaperStageScene({
 function PaperStage({ children, className, style, ...sceneProps }) {
   const dpr = qualityFor(sceneProps.quality ?? "auto").dpr;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_fiber10.Canvas,
+    import_fiber11.Canvas,
     {
       shadows: true,
       dpr: [1, dpr],
@@ -8535,7 +8552,8 @@ function PaperStage({ children, className, style, ...sceneProps }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaperStageScene, { ...sceneProps }),
-        children
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReleaseContextOnUnmount, {})
       ]
     }
   ) });
@@ -8964,7 +8982,11 @@ function describeStage(input) {
   );
   const moved = Object.entries(stage.light).filter(([, value]) => value !== void 0).map(([key]) => key);
   if (moved.length > 0) parts.push(`with its ${moved.join(", ")} set by hand`);
-  if (input.scroll) parts.push("and scrolling the page walks the figure deeper into it");
+  if (input.scroll) {
+    parts.push(
+      stage.showFigure ? "and scrolling the page walks the figure deeper into it" : "and scrolling the page carries the camera deeper into it"
+    );
+  }
   return parts.join(", ");
 }
 function exportableImages(images) {
@@ -9005,6 +9027,7 @@ const banner = ${stringifyStage(diffConfig(paperConfigSchema.parse(input.paper))
   const textConst = input.text?.trim() ? `
 
 const text = ${JSON.stringify(input.text)}` : "";
+  const scrolls = stageSchema.parse(input.stage).showFigure ? "walk the figure" : "move the camera";
   const images = input.images?.length ? exportableImages(input.images) : null;
   const imagesConst = images ? `
 ${images.substituted ? "\n// Your uploaded pictures cannot travel in a snippet \u2014 these are\n// placeholders in the same order. Point them at your own files." : ""}
@@ -9031,7 +9054,7 @@ 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
+  // Scroll the section, ${scrolls}. The stage is pinned for the height
   // of the section, so the page scrolling past it IS the walk.
   useEffect(() => {
     const el = ref.current
@@ -9068,7 +9091,8 @@ function buildStageAgentPayload(input) {
    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})
+  const subject = stageSchema.parse(input.stage).showFigure ? "paper as architecture, with a figure walking through it" : "paper as architecture, banners hung along a walk you move through";
+  return `Integrate a Paperlab stage \u2014 ${subject} \u2014 into this project. (paperlab agent-payload v${AGENT_PAYLOAD_VERSION})
 
 1. Install the dependencies: