paperlab 0.5.0 → 0.5.2

package/dist/index.cjs

@@ -107,8 +107,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Paper.tsx
-var import_fiber4 = require("@react-three/fiber");
-var import_react10 = require("react");
+var import_fiber5 = require("@react-three/fiber");
+var import_react11 = require("react");
 
 // src/PaperMesh.tsx
 var THREE7 = __toESM(require("three"), 1);
@@ -5090,13 +5090,28 @@ function paintBackdrop(backdrop, width, height, image) {
   return texture;
 }
 
+// src/scene/release.tsx
+var import_fiber4 = require("@react-three/fiber");
+var import_react10 = require("react");
+function ReleaseContextOnUnmount() {
+  const gl = (0, import_fiber4.useThree)((s) => s.gl);
+  (0, import_react10.useEffect)(
+    () => () => {
+      gl.forceContextLoss();
+      gl.dispose();
+    },
+    [gl]
+  );
+  return null;
+}
+
 // src/Paper.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Paper = (0, import_react10.forwardRef)(function Paper2({ children, className, style, ...meshProps }, ref) {
+var Paper = (0, import_react11.forwardRef)(function Paper2({ children, className, style, ...meshProps }, ref) {
   const config = useResolvedConfig(meshProps);
-  const webgl = (0, import_react10.useMemo)(() => typeof window === "undefined" ? true : supportsWebGL(), []);
+  const webgl = (0, import_react11.useMemo)(() => typeof window === "undefined" ? true : supportsWebGL(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: { width: "100%", height: "100%", ...style }, children: [
-    webgl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_fiber4.Canvas, { shadows: true, camera: { position: [0, 0.35, 2.4], fov: 40 }, dpr: [1, 2], children: [
+    webgl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_fiber5.Canvas, { shadows: true, camera: { position: [0, 0.35, 2.4], fov: 40 }, dpr: [1, 2], children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperBackdrop, { backdrop: config.scene.backdrop }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         PaperLighting,
@@ -5109,7 +5124,8 @@ var Paper = (0, import_react10.forwardRef)(function Paper2({ children, className
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperMesh, { ref, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReleaseContextOnUnmount, {})
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperFallback, { config }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperMirror, { config })
   ] });
@@ -5118,12 +5134,12 @@ var Paper = (0, import_react10.forwardRef)(function Paper2({ children, className
 // src/PaperField.tsx
 var THREE16 = __toESM(require("three"), 1);
 var import_gsap5 = require("gsap");
-var import_fiber7 = require("@react-three/fiber");
-var import_react17 = require("react");
+var import_fiber8 = require("@react-three/fiber");
+var import_react18 = require("react");
 
 // src/field/dropZones.tsx
 var THREE11 = __toESM(require("three"), 1);
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DropZoneRegistry = class {
   zones = /* @__PURE__ */ new Map();
@@ -5162,7 +5178,7 @@ var DropZoneRegistry = class {
     for (const fn of this.listeners) fn();
   }
 };
-var DropZoneContext = (0, import_react11.createContext)(null);
+var DropZoneContext = (0, import_react12.createContext)(null);
 var globCache = /* @__PURE__ */ new Map();
 var globRegExp = (glob) => {
   let re = globCache.get(glob);
@@ -5178,13 +5194,13 @@ function zoneAccepts(zone, name) {
 }
 var zoneContains = (zone, x, y) => Math.abs(x - zone.bounds.position[0]) <= zone.bounds.size[0] / 2 && Math.abs(y - zone.bounds.position[1]) <= zone.bounds.size[1] / 2;
 function DropZone(props) {
-  const registry4 = (0, import_react11.useContext)(DropZoneContext);
+  const registry4 = (0, import_react12.useContext)(DropZoneContext);
   const { id, accept, bounds, highlight = "glow", onPlace } = props;
-  const place = (0, import_react11.useRef)(onPlace);
-  (0, import_react11.useEffect)(() => {
+  const place = (0, import_react12.useRef)(onPlace);
+  (0, import_react12.useEffect)(() => {
     place.current = onPlace;
   }, [onPlace]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!registry4) return;
     return registry4.register({
       id,
@@ -5198,17 +5214,17 @@ function DropZone(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropZoneVisual, { registry: registry4, config: { id, accept, bounds, highlight } });
 }
 function DropZoneVisual({ registry: registry4, config }) {
-  (0, import_react11.useSyncExternalStore)(registry4.subscribe, registry4.getVersion, registry4.getVersion);
+  (0, import_react12.useSyncExternalStore)(registry4.subscribe, registry4.getVersion, registry4.getVersion);
   const hovered = registry4.hovered === config.id;
   const style = config.highlight ?? "glow";
   const [w, h] = config.bounds.size;
-  const edges = (0, import_react11.useMemo)(() => {
+  const edges = (0, import_react12.useMemo)(() => {
     const plane = new THREE11.PlaneGeometry(w, h);
     const geo = new THREE11.EdgesGeometry(plane);
     plane.dispose();
     return geo;
   }, [w, h]);
-  (0, import_react11.useEffect)(() => () => edges.dispose(), [edges]);
+  (0, import_react12.useEffect)(() => () => edges.dispose(), [edges]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("group", { position: config.bounds.position, children: [
     style !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("mesh", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("planeGeometry", { args: [w, h] }),
@@ -5332,22 +5348,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_fiber5 = require("@react-three/fiber");
-var import_react13 = require("react");
+var import_fiber6 = require("@react-three/fiber");
+var import_react14 = require("react");
 var import_three_custom_shader_material2 = __toESM(require("three-custom-shader-material"), 1);
 
 // src/content/atlas.ts
 var THREE12 = __toESM(require("three"), 1);
-var import_react12 = require("react");
+var import_react13 = require("react");
 var MAX_ATLAS = 4096;
 function atlasGrid(count, aspect = 1) {
   const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count * Math.max(aspect, 0.01)))));
   return { cols, rows: Math.max(1, Math.ceil(count / cols)) };
 }
 function useContentAtlas(contents, sheet2, stock) {
-  const [atlas, setAtlas] = (0, import_react12.useState)(null);
+  const [atlas, setAtlas] = (0, import_react13.useState)(null);
   const stableContents = useStable(contents);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     let disposed = false;
     const aspect = sheet2.height / sheet2.width;
     const { cols, rows } = atlasGrid(contents.length, aspect);
@@ -6080,11 +6096,11 @@ function FieldGroup({
   const stock = getStock(config.stock);
   const rig = useLightRig(config.scene.lighting);
   const behavior = config.behavior && !config.deformers ? getBehavior(config.behavior.type) : null;
-  const progressRef = (0, import_react13.useRef)(
+  const progressRef = (0, import_react14.useRef)(
     behavior ? config.behavior[behavior.progressParam] : 0
   );
   const buildStackAt = (progress) => fieldShapeStack(config, progress);
-  const initialStack = (0, import_react13.useMemo)(
+  const initialStack = (0, import_react14.useMemo)(
     () => buildStackAt(progressRef.current),
     [
       JSON.stringify(config.behavior ?? null),
@@ -6093,7 +6109,7 @@ function FieldGroup({
     ]
   );
   const structureKey = initialStack.map((i) => i.type).join("|");
-  const geometry = (0, import_react13.useMemo)(() => {
+  const geometry = (0, import_react14.useMemo)(() => {
     const floor = stackMinSegments(initialStack, config.sheet);
     const want = [0, 0];
     for (const p of PROGRESS_SAMPLES2) {
@@ -6127,9 +6143,9 @@ function FieldGroup({
     geo.setAttribute("aBias", new THREE13.InstancedBufferAttribute(bias, 1));
     return geo;
   }, [JSON.stringify(config.sheet), structureKey, count, autoCeiling]);
-  (0, import_react13.useEffect)(() => () => geometry.dispose(), [geometry]);
+  (0, import_react14.useEffect)(() => () => geometry.dispose(), [geometry]);
   const atlas = useContentAtlas(contents, config.sheet, stock);
-  const shader = (0, import_react13.useMemo)(() => {
+  const shader = (0, import_react14.useMemo)(() => {
     const composed = buildDisplacementGLSL(initialStack, config.sheet);
     const uniforms = {};
     for (const [name, value] of Object.entries(composed.uniforms)) {
@@ -6158,19 +6174,19 @@ function FieldGroup({
     config.surface.showThrough,
     config.surface.translucency
   ]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const values = translucencyValues(config.surface.translucency ?? stock.translucency, rig);
     shader.uniforms.uTranslucency.value = values.translucency;
     shader.uniforms.uBackLightDir.value.copy(values.direction);
     shader.uniforms.uBackLightColor.value.copy(values.color);
     shader.uniforms.uAmbientTransmission.value = values.ambient;
   }, [shader, rig, config.surface.translucency, stock.translucency]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!atlas) return;
     shader.uniforms.uAtlas.value = atlas.texture;
     shader.uniforms.uAtlasGrid.value.set(atlas.cols, atlas.rows);
   }, [atlas, shader]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!behavior || shared.reduced) return;
     const state = { p: progressRef.current };
     const tween = import_gsap3.gsap.to(state, {
@@ -6187,8 +6203,8 @@ function FieldGroup({
       tween.kill();
     };
   }, [structureKey, shared.reduced]);
-  const meshRef = (0, import_react13.useRef)(null);
-  (0, import_fiber5.useFrame)(({ clock }) => {
+  const meshRef = (0, import_react14.useRef)(null);
+  (0, import_fiber6.useFrame)(({ clock }) => {
     const mesh = meshRef.current;
     if (!mesh) return;
     const elapsed = clock.elapsedTime - Math.max(shared.mountTimeRef.current, 0);
@@ -6335,7 +6351,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_react14 = require("react");
+var import_react15 = require("react");
 
 // src/content/backing.ts
 function silhouetteRects(o, count) {
@@ -6408,7 +6424,7 @@ function BackingSheet({
   removed
 }) {
   const { width, height } = sheetBackingSize(options);
-  const canvas = (0, import_react14.useMemo)(() => {
+  const canvas = (0, import_react15.useMemo)(() => {
     if (typeof document === "undefined") return null;
     const c = document.createElement("canvas");
     const scale = Math.min(1024, Math.round(360 * Math.max(width, height))) / Math.max(width, height);
@@ -6416,14 +6432,14 @@ function BackingSheet({
     c.height = Math.max(2, Math.round(height * scale));
     return c;
   }, [width, height]);
-  const texture = (0, import_react14.useMemo)(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
+  const texture = (0, import_react15.useMemo)(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
   const removedKey = [...removed].sort((a, b) => a - b).join(",");
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!canvas || !texture) return;
     drawBacking(canvas, { options, count, tint: BACKING_TINT, removed });
     texture.needsUpdate = true;
   }, [canvas, texture, JSON.stringify(options), count, removedKey]);
-  (0, import_react14.useEffect)(() => () => texture?.dispose(), [texture]);
+  (0, import_react15.useEffect)(() => () => texture?.dispose(), [texture]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("mesh", { receiveShadow: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("planeGeometry", { args: [width, height] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("meshStandardMaterial", { map: texture, color: "#ffffff", roughness: 0.92, metalness: 0 })
@@ -6433,8 +6449,8 @@ function BackingSheet({
 // src/field/interactiveField.tsx
 var THREE15 = __toESM(require("three"), 1);
 var import_gsap4 = require("gsap");
-var import_fiber6 = require("@react-three/fiber");
-var import_react15 = require("react");
+var import_fiber7 = require("@react-three/fiber");
+var import_react16 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var PICK_BEHAVIORS = /* @__PURE__ */ new Set(["peel", "carry"]);
 function InteractiveField(props) {
@@ -6442,15 +6458,15 @@ function InteractiveField(props) {
   const total = papers.length;
   const layout = getLayout(layoutId);
   const reduced = usePrefersReducedMotion(props.reducedMotion);
-  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)(
+  const contextRegistry = (0, import_react16.useContext)(DropZoneContext);
+  const registry4 = (0, import_react16.useMemo)(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
+  const camera = (0, import_fiber7.useThree)((s) => s.camera);
+  const gl = (0, import_fiber7.useThree)((s) => s.gl);
+  const controls = (0, import_fiber7.useThree)((s) => s.controls);
+  const [removed, setRemoved] = (0, import_react16.useState)(EMPTY_SET);
+  const [slotPatches, setSlotPatches] = (0, import_react16.useState)({});
+  const [slotStates, setSlotStates] = (0, import_react16.useState)({});
+  const slotConfigs = (0, import_react16.useMemo)(
     () => papers.map((slot, i) => {
       const config = resolveFieldSlotConfig(slot, fallback, i, layoutId, layoutOptions);
       const patch = slotPatches[i];
@@ -6464,14 +6480,14 @@ function InteractiveField(props) {
       slotPatches
     ]
   );
-  const poses = (0, import_react15.useMemo)(
+  const poses = (0, import_react16.useMemo)(
     () => slotConfigs.map((_, i) => layout.pose(i, total, layoutOptions, 0, props.sheet)),
     [layoutId, JSON.stringify(layoutOptions), total, props.sheet.width, props.sheet.height]
   );
-  const groupRefs = (0, import_react15.useRef)([]);
-  const handleRefs = (0, import_react15.useRef)([]);
-  const pressRef = (0, import_react15.useRef)(null);
-  const carriedRef = (0, import_react15.useRef)(null);
+  const groupRefs = (0, import_react16.useRef)([]);
+  const handleRefs = (0, import_react16.useRef)([]);
+  const pressRef = (0, import_react16.useRef)(null);
+  const carriedRef = (0, import_react16.useRef)(null);
   const zonesLive = () => [...props.zones ?? [], ...registry4.list()];
   const slotName = (i) => {
     const preset = papers[i]?.preset ?? fallback;
@@ -6484,10 +6500,10 @@ function InteractiveField(props) {
     }
     props.onSlotStateChange?.(i, state);
   };
-  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 raycaster = (0, import_react16.useMemo)(() => new THREE15.Raycaster(), []);
+  const planeScratch = (0, import_react16.useMemo)(() => new THREE15.Plane(new THREE15.Vector3(0, 0, 1), 0), []);
+  const pointScratch = (0, import_react16.useMemo)(() => new THREE15.Vector3(), []);
+  const ndcScratch = (0, import_react16.useMemo)(() => new THREE15.Vector2(), []);
   const planePoint = (clientX, clientY, planeZ) => {
     const rect = gl.domElement.getBoundingClientRect();
     ndcScratch.set(
@@ -6617,7 +6633,7 @@ function InteractiveField(props) {
     import_gsap4.gsap.to(group.rotation, { x: home.rotation[0], y: home.rotation[1], z: home.rotation[2], duration });
     import_gsap4.gsap.to(group.scale, { x: home.scale, y: home.scale, z: home.scale, duration: duration * 0.5 });
   };
-  const onPointerMoveRef = (0, import_react15.useRef)(() => {
+  const onPointerMoveRef = (0, import_react16.useRef)(() => {
   });
   onPointerMoveRef.current = (e) => {
     const press = pressRef.current;
@@ -6641,7 +6657,7 @@ function InteractiveField(props) {
       pick(slot, hit[0], hit[1], pointerId);
     }
   };
-  const onPointerUpRef = (0, import_react15.useRef)(() => {
+  const onPointerUpRef = (0, import_react16.useRef)(() => {
   });
   onPointerUpRef.current = (e) => {
     pressRef.current = null;
@@ -6655,7 +6671,7 @@ function InteractiveField(props) {
     if (zone) settleInto(carried, zone);
     else returnHome(carried);
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const move = (e) => onPointerMoveRef.current(e);
     const up = (e) => onPointerUpRef.current(e);
     window.addEventListener("pointermove", move);
@@ -6665,7 +6681,7 @@ function InteractiveField(props) {
       window.removeEventListener("pointerup", up);
     };
   }, []);
-  (0, import_fiber6.useFrame)((_, delta) => {
+  (0, import_fiber7.useFrame)((_, delta) => {
     const carried = carriedRef.current;
     if (!carried || carried.settling) return;
     const group = groupRefs.current[carried.slot];
@@ -6703,7 +6719,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_react15.useRef)(null);
+  const a11yImplRef = (0, import_react16.useRef)(null);
   a11yImplRef.current = {
     pick: (slot) => {
       const home = poses[slot];
@@ -6728,7 +6744,7 @@ function InteractiveField(props) {
     zoneIds: () => zonesLive().map((z25) => z25.id),
     slotState: (slot) => slotStates[slot] ?? "rest"
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const ref = props.a11yRef;
     if (!ref) return;
     ref.current = {
@@ -6781,7 +6797,7 @@ function InteractiveField(props) {
 }
 
 // src/field/keyboardMirror.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function fieldKeyboardStep(carry2, slot, key, controller) {
   if (!carry2) {
@@ -6827,7 +6843,7 @@ function FieldKeyboardMirror({
   papers,
   controller
 }) {
-  const [carrying, setCarrying] = (0, import_react16.useState)(null);
+  const [carrying, setCarrying] = (0, import_react17.useState)(null);
   const paperLabel = (slot, i) => {
     try {
       const config = resolveConfig({ preset: slot.preset });
@@ -6930,16 +6946,16 @@ function fitCamera(layout, n, options, sheet2, fovDeg, aspect, margin = 1.06) {
 
 // src/PaperField.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var PaperFieldMesh = (0, import_react17.forwardRef)(
+var PaperFieldMesh = (0, import_react18.forwardRef)(
   function PaperFieldMesh2(props, ref) {
     const reduced = usePrefersReducedMotion(props.reducedMotion);
-    const papers = (0, import_react17.useMemo)(
+    const papers = (0, import_react18.useMemo)(
       () => effectiveFieldPapers(props.papers, props.images),
       [props.papers, props.images]
     );
     const stablePapers = useStable(papers);
     const stablePreset = useStable(props.preset ?? null);
-    const groups = (0, import_react17.useMemo)(
+    const groups = (0, import_react18.useMemo)(
       () => groupFieldPapers(stablePapers, stablePreset ?? void 0),
       [stablePapers, stablePreset]
     );
@@ -6948,22 +6964,22 @@ var PaperFieldMesh = (0, import_react17.forwardRef)(
     const layout = getLayout(layoutId);
     const firstSheet = groups[0]?.config.sheet;
     const stableLayoutOptions = useStable(props.layoutOptions ?? {});
-    const layoutOptions = (0, import_react17.useMemo)(
+    const layoutOptions = (0, import_react18.useMemo)(
       // Sheet grids size their cells from the papers themselves — gutter is
       // then literally the spacing between stamps (explicit cell dims win).
       () => resolveLayoutOptions(layoutId, layout, stableLayoutOptions, firstSheet),
       [layoutId, stableLayoutOptions, firstSheet?.width, firstSheet?.height]
     );
-    const phaseRef = (0, import_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 phaseRef = (0, import_react18.useRef)(0);
+    const dragVelRef = (0, import_react18.useRef)(0);
+    const mountTimeRef = (0, import_react18.useRef)(-1);
+    const morphRef = (0, import_react18.useRef)({ from: null, t: 1 });
+    const prevLayout = (0, import_react18.useRef)({ id: layoutId, options: layoutOptions });
+    const gl = (0, import_fiber8.useThree)((s) => s.gl);
     const driver = reduced ? "none" : props.motion?.driver ?? "autoplay";
     const speed = props.motion?.speed ?? 0.5;
     const entranceType = reduced ? "none" : props.entrance?.type ?? "rise";
-    (0, import_react17.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       const prev = prevLayout.current;
       if (prev.id !== layoutId || JSON.stringify(prev.options) !== JSON.stringify(layoutOptions)) {
         morphRef.current = { from: prev, t: 0 };
@@ -6971,7 +6987,7 @@ var PaperFieldMesh = (0, import_react17.forwardRef)(
         prevLayout.current = { id: layoutId, options: layoutOptions };
       }
     }, [layoutId, layoutOptions]);
-    (0, import_react17.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       if (driver !== "drag") return;
       const el = gl.domElement;
       let lastX = null;
@@ -6997,7 +7013,7 @@ var PaperFieldMesh = (0, import_react17.forwardRef)(
         window.removeEventListener("pointerup", up);
       };
     }, [driver, gl]);
-    (0, import_fiber7.useFrame)(({ clock }, delta) => {
+    (0, import_fiber8.useFrame)(({ clock }, delta) => {
       if (mountTimeRef.current < 0) mountTimeRef.current = clock.elapsedTime;
       if (driver === "autoplay") phaseRef.current += delta * speed * 0.02;
       if (driver === "drag") {
@@ -7055,14 +7071,14 @@ var PaperFieldMesh = (0, import_react17.forwardRef)(
   }
 );
 function FitCamera(meshProps) {
-  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 camera = (0, import_fiber8.useThree)((s) => s.camera);
+  const width = (0, import_fiber8.useThree)((s) => s.size.width);
+  const height = (0, import_fiber8.useThree)((s) => s.size.height);
   const papersProp = useStable(meshProps.papers ?? null);
   const imagesProp = useStable(meshProps.images ?? null);
   const presetProp = useStable(meshProps.preset ?? null);
   const optionsProp = useStable(meshProps.layoutOptions ?? {});
-  const field = (0, import_react17.useMemo)(() => {
+  const field = (0, import_react18.useMemo)(() => {
     const papers = effectiveFieldPapers(papersProp ?? void 0, imagesProp ?? void 0);
     const layoutId = meshProps.layout ?? "ring";
     const layout = getLayout(layoutId);
@@ -7070,7 +7086,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_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!(camera instanceof THREE16.PerspectiveCamera)) return;
     const { position, target } = fitCamera(
       field.layout,
@@ -7086,27 +7102,28 @@ function FitCamera(meshProps) {
   }, [camera, width, height, field]);
   return null;
 }
-var PaperField = (0, import_react17.forwardRef)(function PaperField2({ children, className, style, scene, ...meshProps }, ref) {
+var PaperField = (0, import_react18.forwardRef)(function PaperField2({ children, className, style, scene, ...meshProps }, ref) {
   const rig = sceneSchema.parse(scene ?? {});
-  const registry4 = (0, import_react17.useMemo)(() => new DropZoneRegistry(), []);
-  const a11yRef = (0, import_react17.useRef)(null);
-  const papers = (0, import_react17.useMemo)(
+  const registry4 = (0, import_react18.useMemo)(() => new DropZoneRegistry(), []);
+  const a11yRef = (0, import_react18.useRef)(null);
+  const papers = (0, import_react18.useMemo)(
     () => effectiveFieldPapers(meshProps.papers, meshProps.images),
     [meshProps.papers, meshProps.images]
   );
   const stablePapers = useStable(papers);
   const stablePreset = useStable(meshProps.preset ?? null);
-  const interactive = (0, import_react17.useMemo)(
+  const interactive = (0, import_react18.useMemo)(
     () => fieldIsInteractive(stablePapers, stablePreset ?? void 0, meshProps.interactive),
     [stablePapers, stablePreset, meshProps.interactive]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropZoneContext.Provider, { value: registry4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_fiber7.Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_fiber8.Canvas, { shadows: true, camera: { position: [0, 0.6, 5.2], fov: 45 }, dpr: [1, 2], children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FitCamera, { ...meshProps }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperBackdrop, { backdrop: rig.backdrop }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperLighting, { preset: rig.lighting, light: rig.light, floor: -2.4, scale: 14 }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperFieldMesh, { ref, a11yControllerRef: a11yRef, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ReleaseContextOnUnmount, {})
     ] }),
     interactive && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldKeyboardMirror, { papers, controller: a11yRef })
   ] }) });