@make-pictures/kits 0.0.0-stage → 2.0.0

package/dist/paper-diorama-3d/index.cjs

@@ -0,0 +1,1087 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/kits/src/paper-diorama-3d/index.ts
+var paper_diorama_3d_exports = {};
+__export(paper_diorama_3d_exports, {
+  ImageCutout3D: () => ImageCutout3D,
+  PaperBookPageTurn3D: () => PaperBookPageTurn3D,
+  PaperCameraRig3D: () => PaperCameraRig3D,
+  PaperCloudCutout3D: () => PaperCloudCutout3D,
+  PaperCutout3D: () => PaperCutout3D,
+  PaperMountainBackdrop3D: () => PaperMountainBackdrop3D,
+  PaperPineTree3D: () => PaperPineTree3D,
+  PaperStageLighting3D: () => PaperStageLighting3D,
+  PopUpBookBase3D: () => PopUpBookBase3D,
+  PopUpHinge3D: () => PopUpHinge3D,
+  buildPaperCutoutCompositeKey: () => buildPaperCutoutCompositeKey,
+  getFloorTexture: () => getFloorTexture,
+  getPaperTextureCacheStats: () => getPaperTextureCacheStats,
+  prunePaperTextureCache: () => prunePaperTextureCache,
+  serializePaperCutoutDeps: () => serializePaperCutoutDeps
+});
+module.exports = __toCommonJS(paper_diorama_3d_exports);
+
+// packages/kits/src/paper-diorama-3d/PaperCutout3D.tsx
+var import_react = require("react");
+var THREE = __toESM(require("three"), 1);
+var import_core = require("@make-pictures/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MAX_CACHED_CUTOUTS = 64;
+var TEXTURE_CACHE = /* @__PURE__ */ new Map();
+var scheduledPruneTimer = null;
+function touchCacheEntry(compositeKey, entry) {
+  TEXTURE_CACHE.delete(compositeKey);
+  TEXTURE_CACHE.set(compositeKey, entry);
+}
+function disposeCacheEntry(entry) {
+  if (entry.disposed) return;
+  entry.disposed = true;
+  entry.frontTexture.dispose();
+  entry.backTexture.dispose();
+  entry.depthMaterial.dispose();
+}
+function prunePaperTextureCache(maxEntries = MAX_CACHED_CUTOUTS) {
+  if (TEXTURE_CACHE.size <= maxEntries) return 0;
+  let evicted = 0;
+  for (const [key, entry] of TEXTURE_CACHE.entries()) {
+    if (TEXTURE_CACHE.size <= maxEntries) break;
+    if (entry.refCount <= 0) {
+      TEXTURE_CACHE.delete(key);
+      disposeCacheEntry(entry);
+      evicted += 1;
+    }
+  }
+  return evicted;
+}
+function scheduleCachePrune() {
+  if (scheduledPruneTimer !== null) return;
+  scheduledPruneTimer = setTimeout(() => {
+    scheduledPruneTimer = null;
+    prunePaperTextureCache();
+  }, 60);
+}
+function getPaperTextureCacheStats() {
+  let activeCount = 0;
+  for (const entry of TEXTURE_CACHE.values()) {
+    if (entry.refCount > 0) activeCount += 1;
+  }
+  return {
+    size: TEXTURE_CACHE.size,
+    activeCount,
+    maxEntries: MAX_CACHED_CUTOUTS
+  };
+}
+var DRAW_FN_HASH_CACHE = /* @__PURE__ */ new WeakMap();
+function getDrawFunctionHash(draw) {
+  const cached = DRAW_FN_HASH_CACHE.get(draw);
+  if (cached !== void 0) return cached;
+  const computed = (0, import_core.hashToHex)(draw.toString());
+  DRAW_FN_HASH_CACHE.set(draw, computed);
+  return computed;
+}
+function serializePaperCutoutDeps(cacheDeps) {
+  return cacheDeps && cacheDeps.length > 0 ? cacheDeps.map((d) => String(d ?? "")).join("") : "";
+}
+function buildPaperCutoutCompositeKey(cacheKey, pixelWidth, pixelHeight, whiteBorderPx, fontRevision, draw, cacheDeps) {
+  const depsSignature = serializePaperCutoutDeps(cacheDeps);
+  const fnHash = getDrawFunctionHash(draw);
+  const codeAndDepsHash = depsSignature ? (0, import_core.hashToHex)(`${fnHash}${depsSignature}`) : fnHash;
+  return `${cacheKey}|${pixelWidth}x${pixelHeight}|b${whiteBorderPx}|f${fontRevision}|h${codeAndDepsHash}`;
+}
+function getOrCreatePaperCutoutTextures(compositeKey, seedKey, pixelWidth, pixelHeight, whiteBorderPx, draw) {
+  const existing = TEXTURE_CACHE.get(compositeKey);
+  if (existing && !existing.disposed) {
+    touchCacheEntry(compositeKey, existing);
+    return existing;
+  }
+  const artCanvas = document.createElement("canvas");
+  artCanvas.width = pixelWidth;
+  artCanvas.height = pixelHeight;
+  const artCtx = artCanvas.getContext("2d");
+  artCtx.lineCap = "round";
+  artCtx.lineJoin = "round";
+  draw(artCtx, pixelWidth, pixelHeight);
+  const whiteStampCanvas = document.createElement("canvas");
+  whiteStampCanvas.width = pixelWidth;
+  whiteStampCanvas.height = pixelHeight;
+  const whiteCtx = whiteStampCanvas.getContext("2d");
+  whiteCtx.drawImage(artCanvas, 0, 0);
+  whiteCtx.globalCompositeOperation = "source-in";
+  whiteCtx.fillStyle = "#FFFDF7";
+  whiteCtx.fillRect(0, 0, pixelWidth, pixelHeight);
+  const edgeStampCanvas = document.createElement("canvas");
+  edgeStampCanvas.width = pixelWidth;
+  edgeStampCanvas.height = pixelHeight;
+  const edgeCtx = edgeStampCanvas.getContext("2d");
+  edgeCtx.drawImage(artCanvas, 0, 0);
+  edgeCtx.globalCompositeOperation = "source-in";
+  edgeCtx.fillStyle = "#573B26";
+  edgeCtx.fillRect(0, 0, pixelWidth, pixelHeight);
+  const frontCanvas = document.createElement("canvas");
+  frontCanvas.width = pixelWidth;
+  frontCanvas.height = pixelHeight;
+  const frontCtx = frontCanvas.getContext("2d");
+  if (whiteBorderPx > 0) {
+    const outerRadius = whiteBorderPx + 3.5;
+    const steps = 20;
+    for (let i = 0; i < steps; i++) {
+      const angle = i / steps * Math.PI * 2;
+      frontCtx.drawImage(
+        edgeStampCanvas,
+        Math.cos(angle) * outerRadius,
+        Math.sin(angle) * outerRadius
+      );
+    }
+    for (const r of [whiteBorderPx, whiteBorderPx * 0.55]) {
+      for (let i = 0; i < steps; i++) {
+        const angle = i / steps * Math.PI * 2;
+        frontCtx.drawImage(
+          whiteStampCanvas,
+          Math.cos(angle) * r,
+          Math.sin(angle) * r
+        );
+      }
+    }
+  }
+  frontCtx.drawImage(artCanvas, 0, 0);
+  const rng = (0, import_core.createSeededRandom)(`${seedKey}:${pixelWidth}x${pixelHeight}`);
+  frontCtx.save();
+  frontCtx.globalCompositeOperation = "source-atop";
+  for (let i = 0; i < 220; i++) {
+    const gx = rng() * pixelWidth;
+    const gy = rng() * pixelHeight;
+    const fiberLen = 12 + rng() * 14;
+    const fiberH = 1.2 + rng() * 1.1;
+    const tilt = (rng() - 0.5) * 0.36;
+    frontCtx.save();
+    frontCtx.translate(gx, gy);
+    frontCtx.rotate(tilt);
+    frontCtx.fillStyle = i % 2 === 0 ? "rgba(255, 253, 245, 0.036)" : "rgba(120, 53, 15, 0.028)";
+    frontCtx.fillRect(-fiberLen * 0.5, -fiberH * 0.5, fiberLen, fiberH);
+    frontCtx.restore();
+  }
+  frontCtx.restore();
+  const backCanvas = document.createElement("canvas");
+  backCanvas.width = pixelWidth;
+  backCanvas.height = pixelHeight;
+  const backCtx = backCanvas.getContext("2d");
+  backCtx.drawImage(frontCanvas, 0, 0);
+  backCtx.globalCompositeOperation = "source-in";
+  backCtx.fillStyle = "#E6D7C3";
+  backCtx.fillRect(0, 0, pixelWidth, pixelHeight);
+  backCtx.globalCompositeOperation = "source-over";
+  artCanvas.width = 0;
+  artCanvas.height = 0;
+  whiteStampCanvas.width = 0;
+  whiteStampCanvas.height = 0;
+  edgeStampCanvas.width = 0;
+  edgeStampCanvas.height = 0;
+  const frontTexture = new THREE.CanvasTexture(frontCanvas);
+  frontTexture.colorSpace = THREE.SRGBColorSpace;
+  frontTexture.anisotropy = 8;
+  frontTexture.needsUpdate = true;
+  const backTexture = new THREE.CanvasTexture(backCanvas);
+  backTexture.colorSpace = THREE.SRGBColorSpace;
+  backTexture.anisotropy = 4;
+  backTexture.needsUpdate = true;
+  const depthMaterial = new THREE.MeshDepthMaterial({
+    depthPacking: THREE.RGBADepthPacking,
+    map: frontTexture,
+    alphaTest: 0.38
+  });
+  const result = {
+    frontTexture,
+    backTexture,
+    depthMaterial,
+    refCount: 0,
+    disposed: false
+  };
+  TEXTURE_CACHE.set(compositeKey, result);
+  prunePaperTextureCache();
+  return result;
+}
+var PaperCutout3D = ({
+  cacheKey,
+  cacheDeps,
+  pixelWidth = 512,
+  pixelHeight = 512,
+  width,
+  height,
+  draw,
+  whiteBorderPx = 14,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+  anchor = "bottom",
+  thickness = 0.038,
+  castShadow = true,
+  receiveShadow = true,
+  emissive = "#000000",
+  emissiveIntensity = 0,
+  opacity = 1
+}) => {
+  const fontRevision = (0, import_core.useStudioFontsReady)();
+  const depsSignature = serializePaperCutoutDeps(cacheDeps);
+  const drawFnHash = getDrawFunctionHash(draw);
+  const compositeKey = (0, import_react.useMemo)(() => {
+    const codeAndDepsHash = depsSignature ? (0, import_core.hashToHex)(`${drawFnHash}${depsSignature}`) : drawFnHash;
+    return `${cacheKey}|${pixelWidth}x${pixelHeight}|b${whiteBorderPx}|f${fontRevision}|h${codeAndDepsHash}`;
+  }, [
+    cacheKey,
+    pixelWidth,
+    pixelHeight,
+    whiteBorderPx,
+    fontRevision,
+    drawFnHash,
+    depsSignature
+  ]);
+  const cachedEntry = (0, import_react.useMemo)(
+    () => getOrCreatePaperCutoutTextures(
+      compositeKey,
+      cacheKey,
+      pixelWidth,
+      pixelHeight,
+      whiteBorderPx,
+      draw
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [compositeKey]
+  );
+  (0, import_react.useEffect)(() => {
+    cachedEntry.refCount += 1;
+    touchCacheEntry(compositeKey, cachedEntry);
+    return () => {
+      cachedEntry.refCount = Math.max(0, cachedEntry.refCount - 1);
+      scheduleCachePrune();
+    };
+  }, [compositeKey, cachedEntry]);
+  const { frontTexture, backTexture, depthMaterial } = cachedEntry;
+  const yOffset = anchor === "bottom" ? height / 2 : anchor === "top" ? -height / 2 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { position, rotation, scale, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "mesh",
+      {
+        position: [0, yOffset, 0],
+        castShadow,
+        receiveShadow,
+        customDepthMaterial: depthMaterial,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("planeGeometry", { args: [width, height] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "meshStandardMaterial",
+            {
+              map: frontTexture,
+              transparent: true,
+              alphaTest: 0.35,
+              opacity,
+              roughness: 0.86,
+              metalness: 0.04,
+              emissive,
+              emissiveIntensity,
+              side: THREE.DoubleSide
+            }
+          )
+        ]
+      }
+    ),
+    thickness > 5e-3 && opacity > 0.5 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "mesh",
+        {
+          position: [0, yOffset, -thickness * 0.5],
+          receiveShadow,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("planeGeometry", { args: [width, height] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "meshStandardMaterial",
+              {
+                map: backTexture,
+                transparent: true,
+                alphaTest: 0.38,
+                roughness: 0.94,
+                metalness: 0,
+                side: THREE.DoubleSide
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "mesh",
+        {
+          position: [0, yOffset, -thickness],
+          castShadow,
+          receiveShadow,
+          customDepthMaterial: depthMaterial,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("planeGeometry", { args: [width, height] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "meshStandardMaterial",
+              {
+                map: frontTexture,
+                transparent: true,
+                alphaTest: 0.38,
+                roughness: 0.9,
+                metalness: 0.02,
+                side: THREE.DoubleSide
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var PopUpHinge3D = ({
+  foldProgress,
+  position = [0, 0, 0],
+  foldDirection = 1,
+  children
+}) => {
+  const clamped = Math.max(0, Math.min(1.05, foldProgress));
+  const theta = (1 - Math.min(1, clamped)) * (Math.PI * 0.46) * foldDirection;
+  const c = Math.cos(theta);
+  const s = Math.sin(theta);
+  const posX = position[0];
+  const posY = position[1];
+  const posZ = position[2];
+  const foldMatrix = (0, import_react.useMemo)(() => {
+    const m = new THREE.Matrix4();
+    m.set(
+      1,
+      0,
+      0,
+      posX,
+      0,
+      c,
+      0,
+      posY,
+      0,
+      -s,
+      1,
+      posZ,
+      0,
+      0,
+      0,
+      1
+    );
+    return m;
+  }, [c, s, posX, posY, posZ]);
+  if (clamped <= 0.01) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("group", { matrixAutoUpdate: false, matrix: foldMatrix, children });
+};
+
+// packages/kits/src/paper-diorama-3d/ImageCutout3D.tsx
+var import_react2 = require("react");
+var import_remotion = require("remotion");
+var import_core2 = require("@make-pictures/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IMAGE_ELEMENT_CACHE = /* @__PURE__ */ new Map();
+var IMAGE_LOAD_TIMEOUT_MS = 6e3;
+var ImageCutout3D = ({
+  src,
+  cacheKey,
+  width,
+  height,
+  pixelWidth = 512,
+  pixelHeight = 512,
+  whiteBorderPx = 14,
+  paddingPx,
+  objectFit = "contain",
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+  anchor = "bottom",
+  thickness = 0.038,
+  castShadow = true,
+  receiveShadow = true,
+  emissive = "#000000",
+  emissiveIntensity = 0,
+  opacity = 1
+}) => {
+  const safePadding = paddingPx ?? Math.max(24, whiteBorderPx + 14);
+  const resolvedCacheKey = cacheKey ?? `img-cutout-${(0, import_core2.hashToHex)(src)}`;
+  const [loadedImage, setLoadedImage] = (0, import_react2.useState)(
+    () => IMAGE_ELEMENT_CACHE.get(src) ?? null
+  );
+  const [loadFailed, setLoadFailed] = (0, import_react2.useState)(false);
+  const [delayHandle] = (0, import_react2.useState)(() => {
+    if (typeof Image === "undefined" || IMAGE_ELEMENT_CACHE.has(src)) {
+      return null;
+    }
+    try {
+      return (0, import_remotion.delayRender)(`Loading ImageCutout3D (${src.slice(0, 64)})`);
+    } catch {
+      return null;
+    }
+  });
+  (0, import_react2.useEffect)(() => {
+    let released = false;
+    const release = () => {
+      if (!released && delayHandle !== null) {
+        released = true;
+        try {
+          (0, import_remotion.continueRender)(delayHandle);
+        } catch {
+        }
+      }
+    };
+    const cached = IMAGE_ELEMENT_CACHE.get(src);
+    if (cached) {
+      setLoadedImage(cached);
+      setLoadFailed(false);
+      release();
+      return;
+    }
+    if (typeof Image === "undefined") {
+      release();
+      return;
+    }
+    let cancelled = false;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.decoding = "async";
+    const timeout = setTimeout(() => {
+      if (cancelled) return;
+      setLoadFailed(true);
+      release();
+    }, IMAGE_LOAD_TIMEOUT_MS);
+    img.onload = () => {
+      clearTimeout(timeout);
+      IMAGE_ELEMENT_CACHE.set(src, img);
+      if (!cancelled) {
+        setLoadedImage(img);
+        setLoadFailed(false);
+      }
+      release();
+    };
+    img.onerror = () => {
+      clearTimeout(timeout);
+      if (!cancelled) {
+        setLoadFailed(true);
+      }
+      release();
+    };
+    img.src = src;
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+      release();
+    };
+  }, [src, delayHandle]);
+  const drawImageCutout = (0, import_react2.useCallback)(
+    (ctx, w, h) => {
+      const innerW = Math.max(16, w - safePadding * 2);
+      const innerH = Math.max(16, h - safePadding * 2);
+      if (loadedImage && loadedImage.naturalWidth > 0 && loadedImage.naturalHeight > 0) {
+        const natW = loadedImage.naturalWidth;
+        const natH = loadedImage.naturalHeight;
+        let drawW = innerW;
+        let drawH = innerH;
+        let drawX = safePadding;
+        let drawY = safePadding;
+        if (objectFit === "contain") {
+          const fitScale = Math.min(innerW / natW, innerH / natH);
+          drawW = natW * fitScale;
+          drawH = natH * fitScale;
+          drawX = (w - drawW) / 2;
+          drawY = anchor === "bottom" ? h - safePadding - drawH : (h - drawH) / 2;
+        } else if (objectFit === "cover") {
+          const coverScale = Math.max(innerW / natW, innerH / natH);
+          drawW = natW * coverScale;
+          drawH = natH * coverScale;
+          drawX = (w - drawW) / 2;
+          drawY = (h - drawH) / 2;
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(safePadding, safePadding, innerW, innerH);
+          ctx.clip();
+          ctx.drawImage(loadedImage, drawX, drawY, drawW, drawH);
+          ctx.restore();
+          return;
+        }
+        ctx.drawImage(loadedImage, drawX, drawY, drawW, drawH);
+        return;
+      }
+      if (loadFailed) {
+        ctx.fillStyle = "#F1F5F9";
+        ctx.strokeStyle = "#94A3B8";
+        ctx.lineWidth = 6;
+        ctx.beginPath();
+        ctx.roundRect(safePadding, safePadding, innerW, innerH, 24);
+        ctx.fill();
+        ctx.stroke();
+      }
+    },
+    [loadedImage, loadFailed, safePadding, objectFit, anchor]
+  );
+  if (!loadedImage && !loadFailed) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    PaperCutout3D,
+    {
+      cacheKey: resolvedCacheKey,
+      cacheDeps: [
+        src,
+        loadedImage ? 1 : 0,
+        loadFailed ? 1 : 0,
+        safePadding,
+        objectFit,
+        anchor
+      ],
+      pixelWidth,
+      pixelHeight,
+      width,
+      height,
+      draw: drawImageCutout,
+      whiteBorderPx,
+      position,
+      rotation,
+      scale,
+      anchor,
+      thickness,
+      castShadow,
+      receiveShadow,
+      emissive,
+      emissiveIntensity,
+      opacity
+    }
+  );
+};
+
+// packages/kits/src/paper-diorama-3d/PaperPopUpBook3D.tsx
+var import_react3 = require("react");
+var THREE2 = __toESM(require("three"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MAX_FLOOR_TEXTURES = 8;
+var FLOOR_TEX_CACHE = /* @__PURE__ */ new Map();
+function getFloorTexture(theme) {
+  const existing = FLOOR_TEX_CACHE.get(theme);
+  if (existing) {
+    FLOOR_TEX_CACHE.delete(theme);
+    FLOOR_TEX_CACHE.set(theme, existing);
+    return existing;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = 1024;
+  canvas.height = 1024;
+  const ctx = canvas.getContext("2d");
+  if (theme === "mint-plains") {
+    const grad = ctx.createLinearGradient(0, 0, 0, 1024);
+    grad.addColorStop(0, "#A7F3D0");
+    grad.addColorStop(0.55, "#6EE7B7");
+    grad.addColorStop(1, "#A7F3D0");
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, 1024, 1024);
+    ctx.fillStyle = "#FDE68A";
+    ctx.beginPath();
+    ctx.moveTo(410, 0);
+    ctx.lineTo(614, 0);
+    ctx.lineTo(760, 1024);
+    ctx.lineTo(264, 1024);
+    ctx.closePath();
+    ctx.fill();
+    ctx.strokeStyle = "#F59E0B";
+    ctx.lineWidth = 6;
+    ctx.setLineDash([18, 14]);
+    ctx.stroke();
+    ctx.setLineDash([]);
+  } else if (theme === "checkerboard-tile") {
+    ctx.fillStyle = "#FFFBEB";
+    ctx.fillRect(0, 0, 1024, 1024);
+    const cols = 12;
+    const rows = 12;
+    const cw = 1024 / cols;
+    const rh = 1024 / rows;
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        if ((r + c) % 2 === 0) {
+          ctx.fillStyle = "#334155";
+          ctx.fillRect(c * cw, r * rh, cw, rh);
+        } else {
+          ctx.fillStyle = "#FEF3C7";
+          ctx.fillRect(c * cw, r * rh, cw, rh);
+        }
+      }
+    }
+  } else if (theme === "warm-parquet") {
+    ctx.fillStyle = "#B45309";
+    ctx.fillRect(0, 0, 1024, 1024);
+    for (let r = 0; r < 16; r++) {
+      ctx.fillStyle = r % 2 === 0 ? "#92400E" : "#B45309";
+      ctx.fillRect(0, r * 64, 1024, 62);
+      ctx.strokeStyle = "#78350F";
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.moveTo(0, r * 64);
+      ctx.lineTo(1024, r * 64);
+      ctx.stroke();
+    }
+    ctx.fillStyle = "#881337";
+    ctx.fillRect(140, 180, 744, 660);
+    ctx.strokeStyle = "#FBBF24";
+    ctx.lineWidth = 14;
+    ctx.strokeRect(164, 204, 696, 612);
+  } else {
+    const grad = ctx.createLinearGradient(0, 0, 0, 1024);
+    grad.addColorStop(0, "#A7F3D0");
+    grad.addColorStop(0.62, "#6EE7B7");
+    grad.addColorStop(0.63, "#D97706");
+    grad.addColorStop(1, "#92400E");
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, 1024, 1024);
+  }
+  ctx.strokeStyle = "#FFFDF7";
+  ctx.lineWidth = 28;
+  ctx.strokeRect(14, 14, 996, 996);
+  ctx.strokeStyle = "#D6C4A8";
+  ctx.lineWidth = 6;
+  ctx.strokeRect(28, 28, 968, 968);
+  const tex = new THREE2.CanvasTexture(canvas);
+  tex.colorSpace = THREE2.SRGBColorSpace;
+  tex.anisotropy = 8;
+  tex.needsUpdate = true;
+  if (FLOOR_TEX_CACHE.size >= MAX_FLOOR_TEXTURES) {
+    const oldestKey = FLOOR_TEX_CACHE.keys().next().value;
+    if (oldestKey !== void 0) {
+      const oldestTex = FLOOR_TEX_CACHE.get(oldestKey);
+      FLOOR_TEX_CACHE.delete(oldestKey);
+      oldestTex?.dispose();
+    }
+  }
+  FLOOR_TEX_CACHE.set(theme, tex);
+  return tex;
+}
+var PaperBookPageTurn3D = ({
+  pageTurnProgress,
+  nextFloorTheme,
+  spreadWidth = 23.4,
+  spreadDepth = 15.4
+}) => {
+  const nextFloorTex = (0, import_react3.useMemo)(
+    () => getFloorTexture(nextFloorTheme),
+    [nextFloorTheme]
+  );
+  const isTurning = pageTurnProgress > 0.01 && pageTurnProgress < 0.99;
+  if (!isTurning) {
+    return null;
+  }
+  const halfW = spreadWidth / 2;
+  const smoothP = 0.5 - 0.5 * Math.cos(pageTurnProgress * Math.PI);
+  const rollX = halfW - smoothP * spreadWidth;
+  const unrolledWidth = Math.max(0.05, halfW - rollX);
+  const unrolledCenterX = rollX + unrolledWidth / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "mesh",
+      {
+        position: [unrolledCenterX, 0.015, -0.5],
+        rotation: [-Math.PI / 2, 0, 0],
+        scale: [unrolledWidth, spreadDepth, 1],
+        receiveShadow: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "meshStandardMaterial",
+            {
+              map: nextFloorTex,
+              roughness: 0.88,
+              metalness: 0.02
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "mesh",
+      {
+        position: [rollX, 0.024, -0.5],
+        scale: [0.18, 0.018, spreadDepth + 0.02],
+        receiveShadow: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("boxGeometry", { args: [1, 1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "meshStandardMaterial",
+            {
+              color: "#FFFDF7",
+              roughness: 0.85,
+              metalness: 0.02
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "mesh",
+      {
+        position: [rollX + 0.12, 0.026, -0.5],
+        scale: [0.06, 0.018, spreadDepth - 0.02],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("boxGeometry", { args: [1, 1, 1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "meshStandardMaterial",
+            {
+              color: "#FBBF24",
+              roughness: 0.4,
+              metalness: 0.45
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var PopUpBookBase3D = ({ floorTheme, nextFloorTheme, pageTurnProgress = 0 }) => {
+  const floorTex = (0, import_react3.useMemo)(() => getFloorTexture(floorTheme), [floorTheme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "mesh",
+      {
+        position: [0, -0.42, 0],
+        rotation: [-Math.PI / 2, 0, 0],
+        receiveShadow: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [64, 48] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { color: "#3B1D0A", roughness: 0.92 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { position: [0, -0.22, -0.5], receiveShadow: true, castShadow: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("boxGeometry", { args: [24.6, 0.18, 16.6] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { color: "#7C2D12", roughness: 0.8, metalness: 0.08 })
+    ] }),
+    [
+      [-11.9, -8],
+      [11.9, -8],
+      [-11.9, 7],
+      [11.9, 7]
+    ].map(([cx, cz], i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { position: [cx, -0.12, cz], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("boxGeometry", { args: [0.8, 0.06, 0.8] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "meshStandardMaterial",
+        {
+          color: "#FBBF24",
+          roughness: 0.35,
+          metalness: 0.65
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { position: [0, -0.08, -0.5], receiveShadow: true, castShadow: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("boxGeometry", { args: [23.6, 0.16, 15.6] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { color: "#F5EFE6", roughness: 0.9 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "mesh",
+      {
+        position: [0, 5e-3, -0.5],
+        rotation: [-Math.PI / 2, 0, 0],
+        receiveShadow: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [23.4, 15.4] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "meshStandardMaterial",
+            {
+              map: floorTex,
+              roughness: 0.88,
+              metalness: 0.02
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PaperBookPageTurn3D,
+      {
+        pageTurnProgress,
+        nextFloorTheme: nextFloorTheme ?? floorTheme
+      }
+    )
+  ] });
+};
+var PaperCloudCutout3D = ({ position, scale = 1, tint = "#FCE7F3", idSuffix = "pink" }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  PaperCutout3D,
+  {
+    cacheKey: `paper-cloud-${idSuffix}`,
+    cacheDeps: [tint],
+    width: 2.6 * scale,
+    height: 1.3 * scale,
+    pixelWidth: 512,
+    pixelHeight: 256,
+    whiteBorderPx: 16,
+    position,
+    anchor: "center",
+    thickness: 0.045,
+    draw: (ctx) => {
+      ctx.fillStyle = tint;
+      ctx.strokeStyle = "#F472B6";
+      ctx.lineWidth = 6;
+      ctx.beginPath();
+      ctx.moveTo(90, 195);
+      ctx.lineTo(422, 195);
+      ctx.bezierCurveTo(468, 195, 472, 130, 420, 122);
+      ctx.bezierCurveTo(412, 65, 340, 48, 300, 82);
+      ctx.bezierCurveTo(272, 22, 178, 26, 156, 88);
+      ctx.bezierCurveTo(108, 74, 62, 112, 76, 152);
+      ctx.bezierCurveTo(42, 158, 48, 195, 90, 195);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "rgba(244, 114, 182, 0.18)";
+      ctx.beginPath();
+      ctx.ellipse(256, 172, 145, 16, 0, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+);
+var PaperPineTree3D = ({ position, scale = 1 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  PaperCutout3D,
+  {
+    cacheKey: "paper-pine-tree",
+    width: 1.35 * scale,
+    height: 2.1 * scale,
+    pixelWidth: 256,
+    pixelHeight: 384,
+    whiteBorderPx: 14,
+    position,
+    anchor: "bottom",
+    thickness: 0.04,
+    draw: (ctx) => {
+      ctx.fillStyle = "#78350F";
+      ctx.fillRect(108, 285, 40, 75);
+      const tiers = [
+        { yTop: 155, yBot: 295, halfW: 92, color: "#059669" },
+        { yTop: 92, yBot: 215, halfW: 76, color: "#10B981" },
+        { yTop: 36, yBot: 145, halfW: 56, color: "#34D399" }
+      ];
+      for (const t of tiers) {
+        ctx.fillStyle = t.color;
+        ctx.strokeStyle = "#065F46";
+        ctx.lineWidth = 5;
+        ctx.beginPath();
+        ctx.moveTo(128, t.yTop);
+        ctx.lineTo(128 + t.halfW, t.yBot);
+        ctx.lineTo(128 - t.halfW, t.yBot);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+  }
+);
+var PaperMountainBackdrop3D = ({ position = [0, 0, -5.2], scale = 1 }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("group", { position, scale, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PaperCutout3D,
+      {
+        cacheKey: "paper-mountain-west",
+        width: 4.6,
+        height: 3.8,
+        pixelWidth: 512,
+        pixelHeight: 420,
+        whiteBorderPx: 14,
+        position: [-3.2, 0, -0.9],
+        thickness: 0.05,
+        draw: (ctx) => {
+          ctx.fillStyle = "#C4B5FD";
+          ctx.strokeStyle = "#7C3AED";
+          ctx.lineWidth = 6;
+          ctx.beginPath();
+          ctx.moveTo(256, 36);
+          ctx.lineTo(480, 396);
+          ctx.lineTo(32, 396);
+          ctx.closePath();
+          ctx.fill();
+          ctx.stroke();
+          ctx.fillStyle = "#F5F3FF";
+          ctx.beginPath();
+          ctx.moveTo(256, 36);
+          ctx.lineTo(340, 185);
+          ctx.lineTo(276, 155);
+          ctx.lineTo(234, 195);
+          ctx.lineTo(172, 185);
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PaperCutout3D,
+      {
+        cacheKey: "paper-mountain-east",
+        width: 4.8,
+        height: 4,
+        pixelWidth: 512,
+        pixelHeight: 420,
+        whiteBorderPx: 14,
+        position: [3.4, 0, -0.8],
+        thickness: 0.05,
+        draw: (ctx) => {
+          ctx.fillStyle = "#A5B4FC";
+          ctx.strokeStyle = "#4F46E5";
+          ctx.lineWidth = 6;
+          ctx.beginPath();
+          ctx.moveTo(256, 30);
+          ctx.lineTo(484, 396);
+          ctx.lineTo(28, 396);
+          ctx.closePath();
+          ctx.fill();
+          ctx.stroke();
+          ctx.fillStyle = "#EEF2FF";
+          ctx.beginPath();
+          ctx.moveTo(256, 30);
+          ctx.lineTo(348, 180);
+          ctx.lineTo(282, 152);
+          ctx.lineTo(222, 188);
+          ctx.lineTo(164, 178);
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PaperCutout3D,
+      {
+        cacheKey: "paper-mountain-center",
+        width: 5.4,
+        height: 4.8,
+        pixelWidth: 560,
+        pixelHeight: 500,
+        whiteBorderPx: 16,
+        position: [0, 0, 0],
+        thickness: 0.055,
+        draw: (ctx) => {
+          ctx.fillStyle = "#60A5FA";
+          ctx.strokeStyle = "#1D4ED8";
+          ctx.lineWidth = 7;
+          ctx.beginPath();
+          ctx.moveTo(280, 28);
+          ctx.lineTo(528, 476);
+          ctx.lineTo(32, 476);
+          ctx.closePath();
+          ctx.fill();
+          ctx.stroke();
+          ctx.fillStyle = "#FFFFFF";
+          ctx.beginPath();
+          ctx.moveTo(280, 28);
+          ctx.lineTo(384, 216);
+          ctx.lineTo(318, 178);
+          ctx.lineTo(280, 224);
+          ctx.lineTo(236, 182);
+          ctx.lineTo(176, 216);
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+    )
+  ] });
+};
+
+// packages/kits/src/paper-diorama-3d/PaperStageLighting3D.tsx
+var import_react4 = require("react");
+var import_fiber = require("@react-three/fiber");
+var THREE3 = __toESM(require("three"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PaperCameraRig3D = ({
+  cameraPos,
+  lookAt,
+  fov = 34
+}) => {
+  const camera = (0, import_fiber.useThree)((state) => state.camera);
+  const [camX, camY, camZ] = cameraPos;
+  const [lookX, lookY, lookZ] = lookAt;
+  (0, import_react4.useLayoutEffect)(() => {
+    camera.position.set(camX, camY, camZ);
+    if (camera instanceof THREE3.PerspectiveCamera) {
+      camera.fov = fov;
+    }
+    camera.lookAt(lookX, lookY, lookZ);
+    camera.updateProjectionMatrix();
+  }, [camera, camX, camY, camZ, lookX, lookY, lookZ, fov]);
+  return null;
+};
+var PaperStageLighting3D = ({
+  preset = "daylight",
+  sunPosition
+}) => {
+  const gl = (0, import_fiber.useThree)((state) => state.gl);
+  (0, import_react4.useLayoutEffect)(() => {
+    gl.shadowMap.enabled = true;
+    gl.shadowMap.type = THREE3.PCFSoftShadowMap;
+    gl.toneMapping = THREE3.ACESFilmicToneMapping;
+    gl.toneMappingExposure = 1.06;
+  }, [gl]);
+  let sunColor = "#FFF5E4";
+  let sunIntensity = 1.95;
+  let ambientIntensity = 0.68;
+  const sunPos = sunPosition ?? [-7.5, 11.5, 8.5];
+  if (preset === "golden-hour") {
+    sunColor = "#FDE68A";
+    sunIntensity = 1.85;
+    ambientIntensity = 0.58;
+  } else if (preset === "indoor-study") {
+    sunColor = "#FEF3C7";
+    sunIntensity = 1.65;
+    ambientIntensity = 0.56;
+  } else if (preset === "spotlight") {
+    sunColor = "#F8FAFC";
+    sunIntensity = 1.35;
+    ambientIntensity = 0.45;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("hemisphereLight", { args: ["#FFFDF9", "#92400E", ambientIntensity] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "directionalLight",
+      {
+        position: sunPos,
+        intensity: sunIntensity,
+        color: sunColor,
+        castShadow: true,
+        "shadow-mapSize-width": 2048,
+        "shadow-mapSize-height": 2048,
+        "shadow-camera-near": 1,
+        "shadow-camera-far": 38,
+        "shadow-camera-left": -14,
+        "shadow-camera-right": 14,
+        "shadow-camera-top": 12,
+        "shadow-camera-bottom": -10,
+        "shadow-bias": -5e-4
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "directionalLight",
+      {
+        position: [9, 6, -4],
+        intensity: 0.55,
+        color: "#FDE68A"
+      }
+    )
+  ] });
+};