paperlab 0.5.0 → 0.5.2

package/README.md

@@ -144,7 +144,7 @@ And it is navigable rather than a video. It drifts on its own until you touch it
 - **Physics** — curated idle motion (`float`, `tumble`, `dangle`, `taped`, `breeze`) that composes with behaviors, and a verlet **cloth** mode: pin the top edge, add wind, grab the sheet and pull. Cloth and behaviors are mutually exclusive by schema — cloth owns the vertices.
 - **Interaction states** — a preset can carry `states`: overrides-on-base diffs keyed `rest` / `hover` / `pressed` / `picked` / `placed`, with the triggers built in. Drag a stamp past its threshold and it tears off its sheet (the perforation edges facing its neighbours flip to torn), release it over a `<DropZone>` and it settles, release it anywhere else and it flutters home. The whole flow is reachable from the keyboard: focus a paper, Enter picks, arrows move between zones, Enter places, Escape returns it.
 - **Hardware that holds the paper up** — thread to the ceiling or a rod across the top edge, gripped by a clip or a peg. A hung thing that shows what holds it stops reading as a rectangle that happens to float.
-- **Presets** — 15 paper presets and 6 stage presets, and everything serializes to `.paper` JSON validated by a zod schema. Diffable, forkable, shareable.
+- **Presets** — 16 paper presets and 6 stage presets, and everything serializes to `.paper` JSON validated by a zod schema. Diffable, forkable, shareable.
 - **Agent-first export** — the editor's **Copy for AI** button produces a self-contained brief you paste into a coding agent: install line, inlined component, placement contract, and a verification step the agent can self-check. See [AGENTS.md](https://github.com/NourMtir0722/Paperlab/blob/main/AGENTS.md) and [docs/llms.txt](https://github.com/NourMtir0722/Paperlab/blob/main/docs/llms.txt).
 - **Accessible by default** — `prefers-reduced-motion` freezes behaviors at their pose and disables physics and entrances, a hidden DOM mirror carries the content for screen readers and find-in-page, and a flat DOM fallback renders when WebGL isn't available.
 
@@ -221,13 +221,15 @@ pnpm test           # 700+ unit tests — deformer math, schema, cloth, layouts,
 pnpm test:parity    # 37 golden-vector cases: every deformer's GLSL twin vs its JS twin
 pnpm test:drive     # the stage really walks when you drag, wheel or arrow it
 pnpm test:share     # sculpt → link → a browser that has never seen the paper
+pnpm test:dropdown  # every dropdown option is reachable, including below the fold
+pnpm test:route     # the site root sends each device to the app built for it
 pnpm typecheck
 pnpm lint
 pnpm knip           # dead code and unused exports
 pnpm build
 ```
 
-Anything that needs a real GPU, real pointer events or a second browser profile is a browser harness in `tools/` rather than a unit test. All four test commands are CI gates, along with `publint` and `are-the-types-wrong` on the published package.
+Anything that needs a real GPU, real pointer events or a second browser profile is a browser harness in `tools/` rather than a unit test. All six test commands are CI gates, along with `publint` and `are-the-types-wrong` on the published package.
 
 ### Measurement
 

package/dist/{chunk-6IADJZX5.js → chunk-HRXQTJFS.js}

@@ -5664,8 +5664,23 @@ registerLayout(sheet);
 // src/PaperField.tsx
 import * as THREE16 from "three";
 import { gsap as gsap5 } from "gsap";
-import { Canvas, useFrame as useFrame5, useThree as useThree5 } from "@react-three/fiber";
-import { forwardRef as forwardRef2, useEffect as useEffect13, useMemo as useMemo9, useRef as useRef8 } from "react";
+import { Canvas, useFrame as useFrame5, useThree as useThree6 } from "@react-three/fiber";
+import { forwardRef as forwardRef2, useEffect as useEffect14, useMemo as useMemo9, useRef as useRef8 } from "react";
+
+// src/scene/release.tsx
+import { useThree as useThree4 } from "@react-three/fiber";
+import { useEffect as useEffect9 } from "react";
+function ReleaseContextOnUnmount() {
+  const gl = useThree4((s) => s.gl);
+  useEffect9(
+    () => () => {
+      gl.forceContextLoss();
+      gl.dispose();
+    },
+    [gl]
+  );
+  return null;
+}
 
 // src/field/slots.ts
 var EMPTY_SET = /* @__PURE__ */ new Set();
@@ -5716,12 +5731,12 @@ function resolveFieldSlotConfig(slot, fallback, index, layoutId, layoutOptions)
 import * as THREE13 from "three";
 import { gsap as gsap3 } from "gsap";
 import { useFrame as useFrame3 } from "@react-three/fiber";
-import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
 import CustomShaderMaterial2 from "three-custom-shader-material";
 
 // src/content/atlas.ts
 import * as THREE12 from "three";
-import { useEffect as useEffect9, useState as useState5 } from "react";
+import { useEffect as useEffect10, useState as useState5 } from "react";
 var MAX_ATLAS = 4096;
 function atlasGrid(count, aspect = 1) {
   const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count * Math.max(aspect, 0.01)))));
@@ -5730,7 +5745,7 @@ function atlasGrid(count, aspect = 1) {
 function useContentAtlas(contents, sheet2, stock) {
   const [atlas, setAtlas] = useState5(null);
   const stableContents = useStable(contents);
-  useEffect9(() => {
+  useEffect10(() => {
     let disposed = false;
     const aspect = sheet2.height / sheet2.width;
     const { cols, rows } = atlasGrid(contents.length, aspect);
@@ -5982,7 +5997,7 @@ function FieldGroup({
     geo.setAttribute("aBias", new THREE13.InstancedBufferAttribute(bias, 1));
     return geo;
   }, [JSON.stringify(config.sheet), structureKey, count, autoCeiling]);
-  useEffect10(() => () => geometry.dispose(), [geometry]);
+  useEffect11(() => () => geometry.dispose(), [geometry]);
   const atlas = useContentAtlas(contents, config.sheet, stock);
   const shader = useMemo6(() => {
     const composed = buildDisplacementGLSL(initialStack, config.sheet);
@@ -6013,19 +6028,19 @@ function FieldGroup({
     config.surface.showThrough,
     config.surface.translucency
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     const values = translucencyValues(config.surface.translucency ?? stock.translucency, rig);
     shader.uniforms.uTranslucency.value = values.translucency;
     shader.uniforms.uBackLightDir.value.copy(values.direction);
     shader.uniforms.uBackLightColor.value.copy(values.color);
     shader.uniforms.uAmbientTransmission.value = values.ambient;
   }, [shader, rig, config.surface.translucency, stock.translucency]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!atlas) return;
     shader.uniforms.uAtlas.value = atlas.texture;
     shader.uniforms.uAtlasGrid.value.set(atlas.cols, atlas.rows);
   }, [atlas, shader]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!behavior || shared.reduced) return;
     const state = { p: progressRef.current };
     const tween = gsap3.to(state, {
@@ -6190,7 +6205,7 @@ var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
 
 // src/field/backingSheet.tsx
 import * as THREE14 from "three";
-import { useEffect as useEffect11, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo7 } from "react";
 
 // src/content/backing.ts
 function silhouetteRects(o, count) {
@@ -6273,12 +6288,12 @@ function BackingSheet({
   }, [width, height]);
   const texture = useMemo7(() => canvas ? new THREE14.CanvasTexture(canvas) : null, [canvas]);
   const removedKey = [...removed].sort((a, b) => a - b).join(",");
-  useEffect11(() => {
+  useEffect12(() => {
     if (!canvas || !texture) return;
     drawBacking(canvas, { options, count, tint: BACKING_TINT, removed });
     texture.needsUpdate = true;
   }, [canvas, texture, JSON.stringify(options), count, removedKey]);
-  useEffect11(() => () => texture?.dispose(), [texture]);
+  useEffect12(() => () => texture?.dispose(), [texture]);
   return /* @__PURE__ */ jsxs4("mesh", { receiveShadow: true, children: [
     /* @__PURE__ */ jsx8("planeGeometry", { args: [width, height] }),
     /* @__PURE__ */ jsx8("meshStandardMaterial", { map: texture, color: "#ffffff", roughness: 0.92, metalness: 0 })
@@ -6288,8 +6303,8 @@ function BackingSheet({
 // src/field/interactiveField.tsx
 import * as THREE15 from "three";
 import { gsap as gsap4 } from "gsap";
-import { useFrame as useFrame4, useThree as useThree4 } from "@react-three/fiber";
-import { useContext as useContext3, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
+import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
+import { useContext as useContext3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var PICK_BEHAVIORS = /* @__PURE__ */ new Set(["peel", "carry"]);
 function InteractiveField(props) {
@@ -6299,9 +6314,9 @@ function InteractiveField(props) {
   const reduced = usePrefersReducedMotion(props.reducedMotion);
   const contextRegistry = useContext3(DropZoneContext);
   const registry4 = useMemo8(() => contextRegistry ?? new DropZoneRegistry(), [contextRegistry]);
-  const camera = useThree4((s) => s.camera);
-  const gl = useThree4((s) => s.gl);
-  const controls = useThree4((s) => s.controls);
+  const camera = useThree5((s) => s.camera);
+  const gl = useThree5((s) => s.gl);
+  const controls = useThree5((s) => s.controls);
   const [removed, setRemoved] = useState6(EMPTY_SET);
   const [slotPatches, setSlotPatches] = useState6({});
   const [slotStates, setSlotStates] = useState6({});
@@ -6510,7 +6525,7 @@ function InteractiveField(props) {
     if (zone) settleInto(carried, zone);
     else returnHome(carried);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const move = (e) => onPointerMoveRef.current(e);
     const up = (e) => onPointerUpRef.current(e);
     window.addEventListener("pointermove", move);
@@ -6583,7 +6598,7 @@ function InteractiveField(props) {
     zoneIds: () => zonesLive().map((z25) => z25.id),
     slotState: (slot) => slotStates[slot] ?? "rest"
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const ref = props.a11yRef;
     if (!ref) return;
     ref.current = {
@@ -6814,11 +6829,11 @@ var PaperFieldMesh = forwardRef2(
     const mountTimeRef = useRef8(-1);
     const morphRef = useRef8({ from: null, t: 1 });
     const prevLayout = useRef8({ id: layoutId, options: layoutOptions });
-    const gl = useThree5((s) => s.gl);
+    const gl = useThree6((s) => s.gl);
     const driver = reduced ? "none" : props.motion?.driver ?? "autoplay";
     const speed = props.motion?.speed ?? 0.5;
     const entranceType = reduced ? "none" : props.entrance?.type ?? "rise";
-    useEffect13(() => {
+    useEffect14(() => {
       const prev = prevLayout.current;
       if (prev.id !== layoutId || JSON.stringify(prev.options) !== JSON.stringify(layoutOptions)) {
         morphRef.current = { from: prev, t: 0 };
@@ -6826,7 +6841,7 @@ var PaperFieldMesh = forwardRef2(
         prevLayout.current = { id: layoutId, options: layoutOptions };
       }
     }, [layoutId, layoutOptions]);
-    useEffect13(() => {
+    useEffect14(() => {
       if (driver !== "drag") return;
       const el = gl.domElement;
       let lastX = null;
@@ -6910,9 +6925,9 @@ var PaperFieldMesh = forwardRef2(
   }
 );
 function FitCamera(meshProps) {
-  const camera = useThree5((s) => s.camera);
-  const width = useThree5((s) => s.size.width);
-  const height = useThree5((s) => s.size.height);
+  const camera = useThree6((s) => s.camera);
+  const width = useThree6((s) => s.size.width);
+  const height = useThree6((s) => s.size.height);
   const papersProp = useStable(meshProps.papers ?? null);
   const imagesProp = useStable(meshProps.images ?? null);
   const presetProp = useStable(meshProps.preset ?? null);
@@ -6925,7 +6940,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]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!(camera instanceof THREE16.PerspectiveCamera)) return;
     const { position, target } = fitCamera(
       field.layout,
@@ -6961,7 +6976,8 @@ var PaperField = forwardRef2(function PaperField2({ children, className, style,
       /* @__PURE__ */ jsx11(PaperBackdrop, { backdrop: rig.backdrop }),
       /* @__PURE__ */ jsx11(PaperLighting, { preset: rig.lighting, light: rig.light, floor: -2.4, scale: 14 }),
       /* @__PURE__ */ jsx11(PaperFieldMesh, { ref, a11yControllerRef: a11yRef, ...meshProps }),
-      children
+      children,
+      /* @__PURE__ */ jsx11(ReleaseContextOnUnmount, {})
     ] }),
     interactive && /* @__PURE__ */ jsx11(FieldKeyboardMirror, { papers, controller: a11yRef })
   ] }) });
@@ -7197,6 +7213,7 @@ export {
   cssColorOr,
   PaperLighting,
   PaperBackdrop,
+  ReleaseContextOnUnmount,
   DropZone,
   sheetLayoutSchema,
   buildDisplacementGLSL,
@@ -7214,4 +7231,4 @@ export {
   describeConfig,
   buildAgentPayload
 };
-//# sourceMappingURL=chunk-6IADJZX5.js.map
+//# sourceMappingURL=chunk-HRXQTJFS.js.map