@layoutit/polycss-react 0.2.1 → 0.2.2

package/dist/index.js

@@ -98,8 +98,9 @@ function usePolyCamera(options) {
         const cssX = wy * tileSize;
         const cssY = wx * tileSize;
         const cssZ = wz * tileSize;
+        const cssZoom = s.zoom / tileSize;
         const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
-        el.style.transform = `${distancePart}scale(${s.zoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+        el.style.transform = `${distancePart}scale(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
       }
       store.updateCameraFromRef(handle);
       store.notifyAll();
@@ -118,8 +119,9 @@ function usePolyCamera(options) {
     const cssX = wy * tileSize;
     const cssY = wx * tileSize;
     const cssZ = wz * tileSize;
+    const cssZoom = s.zoom / tileSize;
     const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
-    el.style.transform = `${distancePart}scale(${s.zoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+    el.style.transform = `${distancePart}scale(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
   }, [store]);
   return {
     store,
@@ -132,7 +134,7 @@ function usePolyCamera(options) {
 
 // src/camera/PolyPerspectiveCamera.tsx
 import { jsx } from "react/jsx-runtime";
-var DEFAULT_PERSPECTIVE = 8e3;
+var DEFAULT_PERSPECTIVE = 32e3;
 function PolyPerspectiveCameraInner({
   zoom,
   target,
@@ -198,7 +200,12 @@ function PolyOrthographicCameraInner({
   );
   const cameraStyle = {
     ...style,
-    perspective: "none"
+    // Vanilla emits 1000000px instead of "none" because true `perspective: none`
+    // sends Chrome down a compositor fast path that mis-rasterizes <u>
+    // border-triangle leaves. A very large finite value is visually orthographic
+    // but routes through the normal compositor path. Mirror that here so React
+    // produces byte-identical output to vanilla.
+    perspective: "1000000px"
   };
   return /* @__PURE__ */ jsx2(PolyCameraContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
     "div",
@@ -213,8 +220,8 @@ function PolyOrthographicCameraInner({
 var PolyOrthographicCamera = memo2(PolyOrthographicCameraInner);
 
 // src/scene/PolyScene.tsx
-import { memo as memo7, useCallback as useCallback4, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo6, useRef as useRef3, useState as useState2 } from "react";
-import { BASE_TILE as BASE_TILE2, DEFAULT_SEAM_BLEED, parseHexColor } from "@layoutit/polycss-core";
+import { memo as memo8, useCallback as useCallback5, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo6, useRef as useRef4, useState as useState2 } from "react";
+import { BASE_TILE as BASE_TILE2, DEFAULT_SEAM_BLEED, parseHexColor, worldDirectionToCss } from "@layoutit/polycss-core";
 
 // src/scene/useSceneContext.ts
 import { useMemo as useMemo4 } from "react";
@@ -267,21 +274,24 @@ var CORE_BASE_STYLES = `
   will-change: transform;
 }
 
-/* \u2500\u2500 Camera wrapper (perspective + interactive drag) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Camera wrapper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
+/* Matches vanilla .polycss-camera: a simple positioned block that fills the
+   host. PolyPerspectiveCamera / PolyOrthographicCamera apply perspective
+   inline (driven by their perspective prop), so the CSS file does not bake a
+   default. Earlier React/Vue copies added flex centering, overflow:hidden,
+   contain:paint, isolation:isolate which shifted layout vs vanilla; removed
+   so cross-renderer iframes lay out identically. */
 .polycss-camera {
-  display: flex;
+  position: relative;
+  display: block;
   width: 100%;
-  justify-content: center;
-  align-items: center;
-  perspective: 8000px;
-  min-height: inherit;
   height: 100%;
-  position: relative;
-  overflow: hidden;
-  contain: paint;
-  isolation: isolate;
 }
+/* React-only descendant default: applies preserve-3d to controls + helpers
+   that ride on the camera; vanilla does not need this because every internal
+   element sets the property directly. Kept here so user-supplied wrapper
+   divs inside PolyCamera still participate in 3D layout. */
 .polycss-camera * {
   transform-style: preserve-3d;
   position: absolute;
@@ -303,6 +313,17 @@ var CORE_BASE_STYLES = `
   transform-style: preserve-3d !important;
 }
 
+/* \u2500\u2500 Mesh wrapper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.polycss-mesh {
+  position: absolute;
+  transform-style: preserve-3d;
+  /* Pivot at wrapper local (0,0,0) for three.js mesh.position/rotation/scale
+     parity. Geometry is positioned by the parser (bbox-min-at-origin by
+     default, or pre-centered via loadMesh { center: true }). */
+  transform-origin: 0 0 0;
+}
+
 /* \u2500\u2500 Polygon leaf element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 /*
@@ -388,19 +409,34 @@ var CORE_BASE_STYLES = `
   border-width: 0 16px 32px 16px;
 }
 
-.polycss-scene u.polycss-large-border-triangle {
-  border-width: 0 48px 96px 48px;
-}
+@supports (corner-top-left-shape: bevel) and (corner-top-right-shape: bevel) {
+  .polycss-scene > u,
+  .polycss-mesh > u,
+  .polycss-bucket > u {
+    border-width: 0;
+    width: 32px;
+    height: 32px;
+    background-color: currentColor;
+    border-top-left-radius: 50% 100%;
+    border-top-right-radius: 50% 100%;
+    corner-top-left-shape: bevel;
+    corner-top-right-shape: bevel;
+  }
 
-.polycss-scene u.polycss-corner-triangle {
-  width: 32px;
-  height: 32px;
-  background: currentColor;
-  border: 0;
-  border-top-left-radius: 50% 100%;
-  border-top-right-radius: 50% 100%;
-  corner-top-left-shape: bevel;
-  corner-top-right-shape: bevel;
+  .polycss-scene > u.polycss-corner-shape-solid,
+  .polycss-mesh > u.polycss-corner-shape-solid,
+  .polycss-bucket > u.polycss-corner-shape-solid {
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 0;
+    background: currentColor;
+    border-radius: 0;
+    corner-top-left-shape: initial;
+    corner-top-right-shape: initial;
+    corner-bottom-right-shape: initial;
+    corner-bottom-left-shape: initial;
+  }
 }
 
 /* \u2500\u2500 Gizmo override \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -505,22 +541,33 @@ var CORE_BASE_STYLES = `
    here (not inline per polygon) so each leaf only carries its tiny normal
    declarations \u2014 ~12\xD7 smaller per-polygon style payload on big meshes. */
 .polycss-scene[data-polycss-lighting="dynamic"] s {
+  /*
+   * Three.js MeshLambertMaterial parity for textured surfaces. See
+   * packages/polycss/src/styles/styles.ts for derivation and probe data.
+   * Kept in lockstep across renderer copies per cross-package discipline.
+   */
   background-color: rgb(
-    calc(255 * (var(--par) * var(--pai)
-         + var(--plr) * var(--pli) * max(0,
-           var(--pnx) * var(--plx) +
-           var(--pny) * var(--ply) +
-           var(--pnz) * var(--plz))))
-    calc(255 * (var(--pag) * var(--pai)
-         + var(--plg) * var(--pli) * max(0,
-           var(--pnx) * var(--plx) +
-           var(--pny) * var(--ply) +
-           var(--pnz) * var(--plz))))
-    calc(255 * (var(--pab) * var(--pai)
-         + var(--plb) * var(--pli) * max(0,
-           var(--pnx) * var(--plx) +
-           var(--pny) * var(--ply) +
-           var(--pnz) * var(--plz))))
+    calc(255 * max(0, 1.055 * pow(min(1, (
+      pow((var(--par) + 0.055) / 1.055, 2.4) * var(--pai) +
+      pow((var(--plr) + 0.055) / 1.055, 2.4) * var(--pli) * max(0,
+        var(--pnx) * var(--plx) +
+        var(--pny) * var(--ply) +
+        var(--pnz) * var(--plz))
+    ) / 3.14159265), 0.4167) - 0.055))
+    calc(255 * max(0, 1.055 * pow(min(1, (
+      pow((var(--pag) + 0.055) / 1.055, 2.4) * var(--pai) +
+      pow((var(--plg) + 0.055) / 1.055, 2.4) * var(--pli) * max(0,
+        var(--pnx) * var(--plx) +
+        var(--pny) * var(--ply) +
+        var(--pnz) * var(--plz))
+    ) / 3.14159265), 0.4167) - 0.055))
+    calc(255 * max(0, 1.055 * pow(min(1, (
+      pow((var(--pab) + 0.055) / 1.055, 2.4) * var(--pai) +
+      pow((var(--plb) + 0.055) / 1.055, 2.4) * var(--pli) * max(0,
+        var(--pnx) * var(--plx) +
+        var(--pny) * var(--ply) +
+        var(--pnz) * var(--plz))
+    ) / 3.14159265), 0.4167) - 0.055))
   );
   background-blend-mode: multiply;
   background-image: var(--polycss-atlas-url);
@@ -539,35 +586,48 @@ var CORE_BASE_STYLES = `
 }
 
 .polycss-scene[data-polycss-lighting="dynamic"] b,
+.polycss-scene[data-polycss-lighting="dynamic"] i,
 .polycss-scene[data-polycss-lighting="dynamic"] u {
+  /*
+   * Three.js MeshLambertMaterial parity (default useLegacyLights=false,
+   * physically-correct pipeline). See packages/polycss/src/styles/styles.ts
+   * for the derivation and probe data \u2014 kept in lockstep across the three
+   * renderer copies per cross-package discipline.
+   */
   color: rgb(
-    calc(255 * var(--psr) * (var(--par) * var(--pai)
-         + var(--plr) * var(--pli) * max(0,
-           var(--pnx) * var(--plx) +
-           var(--pny) * var(--ply) +
-           var(--pnz) * var(--plz))))
-    calc(255 * var(--psg) * (var(--pag) * var(--pai)
-         + var(--plg) * var(--pli) * max(0,
-           var(--pnx) * var(--plx) +
-           var(--pny) * var(--ply) +
-           var(--pnz) * var(--plz))))
-    calc(255 * var(--psb) * (var(--pab) * var(--pai)
-         + var(--plb) * var(--pli) * max(0,
-           var(--pnx) * var(--plx) +
-           var(--pny) * var(--ply) +
-           var(--pnz) * var(--plz))))
+    calc(255 * max(0, 1.055 * pow(min(1,
+      pow((var(--psr) + 0.055) / 1.055, 2.4) * (
+        pow((var(--par) + 0.055) / 1.055, 2.4) * var(--pai) +
+        pow((var(--plr) + 0.055) / 1.055, 2.4) * var(--pli) * max(0,
+          var(--pnx) * var(--plx) +
+          var(--pny) * var(--ply) +
+          var(--pnz) * var(--plz))
+      ) / 3.14159265
+    ), 0.4167) - 0.055))
+    calc(255 * max(0, 1.055 * pow(min(1,
+      pow((var(--psg) + 0.055) / 1.055, 2.4) * (
+        pow((var(--pag) + 0.055) / 1.055, 2.4) * var(--pai) +
+        pow((var(--plg) + 0.055) / 1.055, 2.4) * var(--pli) * max(0,
+          var(--pnx) * var(--plx) +
+          var(--pny) * var(--ply) +
+          var(--pnz) * var(--plz))
+      ) / 3.14159265
+    ), 0.4167) - 0.055))
+    calc(255 * max(0, 1.055 * pow(min(1,
+      pow((var(--psb) + 0.055) / 1.055, 2.4) * (
+        pow((var(--pab) + 0.055) / 1.055, 2.4) * var(--pai) +
+        pow((var(--plb) + 0.055) / 1.055, 2.4) * var(--pli) * max(0,
+          var(--pnx) * var(--plx) +
+          var(--pny) * var(--ply) +
+          var(--pnz) * var(--plz))
+      ) / 3.14159265
+    ), 0.4167) - 0.055))
   );
 }
 
-/* <q> \u2014 dedicated shadow leaf. Same border-shape rendering trick as <i>
-   (border-color: currentColor fills the polygon outline) but with its
-   own tag so we don't have to thread :not(.polycss-shadow) exclusions
-   through every dynamic-mode color rule. backface-visibility must be
-   visible because the projection matrix is near-rank-deficient and the
-   resulting plane's normal can read as back-facing under some camera
-   angles; the leaf is intentionally always painted. Strip the UA's
-   default ::before/::after open-/close-quote so the element is just a
-   styled box. */
+/* Reserved internal <q> shadow element rules. Current shadow emission uses SVG
+   surfaces; these rules keep any retained <q> markup styled as a plain
+   border-shape leaf instead of inheriting UA quote styling. */
 .polycss-scene q {
   position: absolute;
   display: block;
@@ -590,11 +650,12 @@ var CORE_BASE_STYLES = `
   content: none;
 }
 
-/* \u2500\u2500 Cast shadow projection (dynamic-mode CSS path) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Retained <q> shadow projection (dynamic-mode CSS path) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 /*
- * Shadow projection matrix. Projects any 3D point P onto the horizontal
- * ground plane (cssZ \u2248 G) along the CSS-space light direction (--clx/y/z).
+ * Projection matrix for retained internal <q> shadow leaves. Projects any
+ * 3D point P onto the horizontal ground plane (cssZ \u2248 G) along the CSS-space
+ * light direction (--clx/y/z).
  *
  * In PolyCSS's world convention world Z is up (red-green plane is the
  * floor in the axes helper). After the world\u2192CSS swap (Y\u2194X), world Z stays
@@ -607,7 +668,7 @@ var CORE_BASE_STYLES = `
  * has a valid layout box. The fix: collapse along z by a near-zero
  * scale (Z_SQUASH = 0.01) instead of exactly zero \u2014 output.z is then
  * approximately G with ~1% drift from the input, full-rank and renderable.
- * The shadow still looks flat to the eye (the drift is sub-pixel for
+ * The result still looks flat to the eye (the drift is sub-pixel for
  * any realistic scene size).
  *
  *   out.cssX = P.cssX - (--clx/--clz) * (P.cssZ - G)
@@ -635,17 +696,9 @@ var CORE_BASE_STYLES = `
   );
 }
 
-/* <q> shadow leaf \u2014 Lambert-gated opacity. Polygons facing the light cast
-   full shadow; polygons facing away cast zero shadow (their projection
-   would stack inside the silhouette and produce ugly overdraw). The
-   * 10 multiplier sharpens the cutoff so small positive Lambert values
-   jump quickly to 1, giving a near-binary visibility decision with a
-   smooth edge transition. Pure CSS calc \u2014 no JS at light-change time.
-
-   Scoped to dynamic mode: baked-mode shadow leaves are dropped up-front
-   by isBakedShadowCaster() and don't carry --pnx/--pny/--pnz, so an
-   unscoped gate would silently zero them via the @property initial
-   values. */
+/* Retained <q> opacity gate. Polygons facing the light cast full shadow;
+   polygons facing away cast zero shadow. The * 10 multiplier sharpens the
+   cutoff so small positive Lambert values jump quickly to 1. */
 .polycss-scene[data-polycss-lighting="dynamic"] q {
   opacity: clamp(0, calc((var(--pnx) * var(--clx) + var(--pny) * var(--cly) + var(--pnz) * var(--clz)) * 10), 1);
 }
@@ -681,6 +734,7 @@ function borderShapeSupported(doc) {
   return media("(pointer: fine)").matches && media("(hover: hover)").matches;
 }
 function solidTriangleSupported(doc) {
+  if (cornerTriangleSupported(doc)) return true;
   const win = doc.defaultView ?? (typeof window !== "undefined" ? window : void 0);
   const userAgent = win?.navigator?.userAgent ?? "";
   if (!userAgent) return true;
@@ -690,6 +744,10 @@ function cornerShapeSupported(doc) {
   const css = doc.defaultView?.CSS ?? (typeof CSS !== "undefined" ? CSS : void 0);
   return !!css?.supports?.("corner-top-left-shape", "bevel") && !!css.supports("corner-top-right-shape", "bevel") && !!css.supports("corner-bottom-right-shape", "bevel") && !!css.supports("corner-bottom-left-shape", "bevel");
 }
+function cornerTriangleSupported(doc) {
+  const css = doc.defaultView?.CSS ?? (typeof CSS !== "undefined" ? CSS : void 0);
+  return !!css?.supports?.("corner-top-left-shape", "bevel") && !!css.supports("corner-top-right-shape", "bevel");
+}
 function projectiveQuadSupported(doc) {
   const win = doc.defaultView ?? (typeof window !== "undefined" ? window : void 0);
   const userAgent = win?.navigator?.userAgent ?? "";
@@ -734,6 +792,8 @@ function isBorderShapeSupported(doc) {
 function isSolidTriangleSupported(doc) {
   const d = doc ?? (typeof document !== "undefined" ? document : null);
   if (!d) {
+    const css = typeof CSS !== "undefined" ? CSS : void 0;
+    if (!!css?.supports?.("corner-top-left-shape", "bevel") && !!css.supports("corner-top-right-shape", "bevel")) return true;
     const userAgent = (typeof navigator !== "undefined" ? navigator : globalThis.navigator)?.userAgent ?? "";
     if (!userAgent) return true;
     const isChromiumFamily = /\b(?:Chrome|HeadlessChrome|Chromium|Edg|OPR)\//.test(userAgent);
@@ -748,9 +808,12 @@ import {
   filterAtlasPlans as filterAtlasPlansCore
 } from "@layoutit/polycss-core";
 function filterAtlasPlans(plans, textureLighting, disabled, doc) {
+  const d = doc ?? (typeof document !== "undefined" ? document : null);
   return filterAtlasPlansCore(plans, textureLighting, disabled, {
     solidTriangleSupported: isSolidTriangleSupported(doc),
-    borderShapeSupported: isBorderShapeSupported(doc)
+    projectiveQuadSupported: doc ? projectiveQuadSupported(doc) : true,
+    borderShapeSupported: isBorderShapeSupported(doc),
+    cornerShapeSupported: d ? cornerShapeSupported(d) : false
   });
 }
 
@@ -772,7 +835,6 @@ function packTextureAtlasPlansWithScale(plans, textureQualityInput, doc) {
 // src/scene/atlas/buildAtlasPages.ts
 import {
   expandClipPoints,
-  tintToCss,
   TEXTURE_TRIANGLE_BLEED,
   TEXTURE_EDGE_REPAIR_ALPHA_MIN,
   TEXTURE_EDGE_REPAIR_SOURCE_ALPHA_MIN,
@@ -812,16 +874,29 @@ function setCssTransform(ctx, atlasScale, a = 1, b = 0, c = 0, d = 1, e = 0, f =
     f * atlasScale
   );
 }
+function srgbByteToLinear(c) {
+  const u = c / 255;
+  return u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4);
+}
+function linearToSrgbByte(c) {
+  const s = c <= 31308e-7 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  return Math.max(0, Math.min(255, Math.round(s * 255)));
+}
 function applyTextureTint(ctx, x, y, width, height, tint, atlasScale) {
-  if (Math.abs(tint.r - 1) < 1e-3 && Math.abs(tint.g - 1) < 1e-3 && Math.abs(tint.b - 1) < 1e-3) {
-    return;
+  const px = Math.round(x * atlasScale);
+  const py = Math.round(y * atlasScale);
+  const pw = Math.max(1, Math.round(width * atlasScale));
+  const ph = Math.max(1, Math.round(height * atlasScale));
+  const img = ctx.getImageData(px, py, pw, ph);
+  const data = img.data;
+  const tr = tint.r, tg = tint.g, tb = tint.b;
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] === 0) continue;
+    data[i] = linearToSrgbByte(srgbByteToLinear(data[i]) * tr);
+    data[i + 1] = linearToSrgbByte(srgbByteToLinear(data[i + 1]) * tg);
+    data[i + 2] = linearToSrgbByte(srgbByteToLinear(data[i + 2]) * tb);
   }
-  ctx.save();
-  setCssTransform(ctx, atlasScale);
-  ctx.globalCompositeOperation = "multiply";
-  ctx.fillStyle = tintToCss(tint);
-  ctx.fillRect(x, y, width, height);
-  ctx.restore();
+  ctx.putImageData(img, px, py);
 }
 function drawImageCover(ctx, img, x, y, width, height, atlasScale) {
   const srcW = img.naturalWidth || img.width || 1;
@@ -1235,6 +1310,15 @@ var SOLID_TRIANGLE_LARGE_BORDER_CANONICAL_SIZE = 96;
 var SOLID_TRIANGLE_LARGE_BORDER_WIDTH = "0 48px 96px 48px";
 var cachedSolidTriangleUserAgent;
 var cachedSolidTriangleCanonicalSize = SOLID_TRIANGLE_CANONICAL_SIZE;
+function cornerTriangleSupported2() {
+  const css = typeof CSS !== "undefined" ? CSS : void 0;
+  return !!css?.supports?.("corner-top-left-shape", "bevel") && !!css.supports("corner-top-right-shape", "bevel");
+}
+function solidTrianglePrimitive() {
+  if (cornerTriangleSupported2()) return "corner-bevel";
+  const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
+  return /\bFirefox\//.test(ua) ? "border-large" : "border";
+}
 function solidTriangleCanonicalSize() {
   const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
   if (ua !== cachedSolidTriangleUserAgent) {
@@ -1244,7 +1328,35 @@ function solidTriangleCanonicalSize() {
   return cachedSolidTriangleCanonicalSize;
 }
 function solidTriangleBorderWidth() {
-  return solidTriangleCanonicalSize() === SOLID_TRIANGLE_LARGE_BORDER_CANONICAL_SIZE ? SOLID_TRIANGLE_LARGE_BORDER_WIDTH : void 0;
+  return solidTrianglePrimitive() === "border-large" ? SOLID_TRIANGLE_LARGE_BORDER_WIDTH : void 0;
+}
+function solidTrianglePaintStyle() {
+  const primitive = solidTrianglePrimitive();
+  if (primitive === "corner-bevel") return void 0;
+  const borderWidth = primitive === "border-large" ? SOLID_TRIANGLE_LARGE_BORDER_WIDTH : void 0;
+  return borderWidth ? { borderWidth } : void 0;
+}
+function applySolidTrianglePaintStyle(el) {
+  const primitive = solidTrianglePrimitive();
+  if (primitive === "corner-bevel") {
+    el.style.width = "";
+    el.style.height = "";
+    el.style.backgroundColor = "";
+    el.style.borderWidth = "";
+    el.style.borderTopLeftRadius = "";
+    el.style.borderTopRightRadius = "";
+    el.style.removeProperty("corner-top-left-shape");
+    el.style.removeProperty("corner-top-right-shape");
+  } else {
+    el.style.width = "";
+    el.style.height = "";
+    el.style.backgroundColor = "";
+    el.style.borderTopLeftRadius = "";
+    el.style.borderTopRightRadius = "";
+    el.style.removeProperty("corner-top-left-shape");
+    el.style.removeProperty("corner-top-right-shape");
+    el.style.borderWidth = primitive === "border-large" ? SOLID_TRIANGLE_LARGE_BORDER_WIDTH : "";
+  }
 }
 function parseHex2(hex) {
   const parsed = parsePureColor(hex);
@@ -1659,9 +1771,10 @@ function solidTriangleStyle(entry, textureLighting, pointerEvents, solidPaintDef
     txCol[2],
     1
   ].map((v) => (Math.round(v * 1e3) / 1e3 || 0).toString()).join(",");
+  const primitiveStyle = solidTrianglePaintStyle();
   return {
     transform: `matrix3d(${canonicalMatrix})`,
-    borderWidth: solidTriangleBorderWidth(),
+    ...primitiveStyle ?? {},
     ...sharedStyle
   };
 }
@@ -1890,6 +2003,7 @@ function updateStableTriangleDom(root, polygons, options = {}) {
     const el = leaves[i];
     if (el.style.visibility) el.style.visibility = "";
     el.__polycssStableTriangleBasis = style.basis;
+    applySolidTrianglePaintStyle(el);
     el.style.transform = style.transform;
     if (style.borderWidth !== void 0) el.style.borderWidth = style.borderWidth;
     if (style.color !== void 0) applyStableTriangleColor(el, i, style.color, options);
@@ -1899,8 +2013,8 @@ function updateStableTriangleDom(root, polygons, options = {}) {
 
 // src/scene/atlas/paintDefaults.ts
 import { computeTextureAtlasPlanPublic } from "@layoutit/polycss-core";
-function computeTextureAtlasPlan(polygon, index, options = {}) {
-  return computeTextureAtlasPlanPublic(polygon, index, options);
+function computeTextureAtlasPlan(polygon, index, options = {}, basisHint) {
+  return computeTextureAtlasPlanPublic(polygon, index, options, void 0, basisHint);
 }
 function getSolidPaintDefaults(plans, textureLighting, strategies) {
   const disabled = new Set(strategies?.disable ?? []);
@@ -1908,24 +2022,44 @@ function getSolidPaintDefaults(plans, textureLighting, strategies) {
 }
 
 // src/scene/atlas/useTextureAtlas.ts
-import { useEffect as useEffect2, useMemo as useMemo5, useState } from "react";
+import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef3, useState } from "react";
 function pageShells(pages) {
   return pages.map((page) => ({ width: page.width, height: page.height, url: null }));
 }
-function textureAtlasPagesEqual(a, b) {
-  return a.length === b.length && a.every((page, index) => {
-    const other = b[index];
-    return page.width === other.width && page.height === other.height && page.url === other.url;
-  });
+function blobUrlsOf(pages) {
+  return pages.flatMap((page) => page.url?.startsWith("blob:") ? [page.url] : []);
+}
+function decodeBlobUrls(urls) {
+  if (urls.length === 0 || typeof Image === "undefined") return Promise.resolve();
+  return Promise.all(urls.map((url) => {
+    const img = new Image();
+    img.src = url;
+    const decoded = img.decode?.();
+    return decoded ? decoded.catch(() => {
+    }) : Promise.resolve();
+  })).then(() => void 0);
+}
+function deferRevoke(urls) {
+  if (urls.length === 0) return;
+  const run = () => {
+    for (const url of urls) URL.revokeObjectURL(url);
+  };
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+  else setTimeout(run, 0);
 }
-function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies) {
+function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies, atomic = false) {
   const disabled = useMemo5(
     () => new Set(strategies?.disable ?? []),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [strategies?.disable?.join(",")]
   );
   const atlasPlans = useMemo5(
-    () => filterAtlasPlans(plans, textureLighting, disabled),
+    () => filterAtlasPlans(
+      plans,
+      textureLighting,
+      disabled,
+      typeof document !== "undefined" ? document : null
+    ),
     [plans, textureLighting, disabled]
   );
   const { packed, atlasScale } = useMemo5(
@@ -1936,38 +2070,93 @@ function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies
     ),
     [atlasPlans, textureQualityInput]
   );
-  const [pages, setPages] = useState(
-    () => pageShells(packed.pages)
-  );
+  const [pages, setPages] = useState(() => pageShells(packed.pages));
+  const [frame, setFrame] = useState(() => ({
+    plans,
+    entries: packed.entries,
+    pages: pageShells(packed.pages)
+  }));
+  const shownUrls = useRef3([]);
+  const seqRef = useRef3(0);
+  const mountedRef = useRef3(true);
   useEffect2(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      for (const url of shownUrls.current) URL.revokeObjectURL(url);
+      shownUrls.current = [];
+    };
+  }, []);
+  useEffect2(() => {
+    if (atomic) {
+      const seq = ++seqRef.current;
+      const snapPlans = plans;
+      const snapEntries = packed.entries;
+      if (packed.pages.length === 0 || typeof document === "undefined") {
+        deferRevoke(shownUrls.current);
+        shownUrls.current = [];
+        setFrame({ plans: snapPlans, entries: snapEntries, pages: pageShells(packed.pages) });
+        return;
+      }
+      const stale = () => seq !== seqRef.current;
+      let built2 = [];
+      buildAtlasPages(packed.pages, textureLighting, document, atlasScale, stale).then(async (nextPages) => {
+        built2 = blobUrlsOf(nextPages);
+        await decodeBlobUrls(built2);
+        if (!mountedRef.current || stale()) {
+          deferRevoke(built2);
+          return;
+        }
+        const prev = shownUrls.current;
+        shownUrls.current = built2;
+        built2 = [];
+        deferRevoke(prev);
+        setFrame({ plans: snapPlans, entries: snapEntries, pages: nextPages });
+      }).catch(() => {
+      });
+      return;
+    }
     let cancelled = false;
-    let urls = [];
-    const nextPageShells = pageShells(packed.pages);
-    setPages((prev) => textureAtlasPagesEqual(prev, nextPageShells) ? prev : nextPageShells);
-    if (packed.pages.length === 0 || typeof document === "undefined") {
+    if (packed.pages.length === 0) {
+      deferRevoke(shownUrls.current);
+      shownUrls.current = [];
+      setPages((prev) => prev.length === 0 ? prev : []);
       return () => {
       };
     }
-    buildAtlasPages(packed.pages, textureLighting, document, atlasScale, () => cancelled).then((nextPages) => {
+    if (typeof document === "undefined") return () => {
+    };
+    setPages((prev) => prev.some((page) => page.url) ? prev : pageShells(packed.pages));
+    let built = [];
+    buildAtlasPages(packed.pages, textureLighting, document, atlasScale, () => cancelled).then(async (nextPages) => {
+      built = blobUrlsOf(nextPages);
+      await decodeBlobUrls(built);
       if (cancelled) {
-        for (const page of nextPages) {
-          if (page.url?.startsWith("blob:")) URL.revokeObjectURL(page.url);
-        }
+        deferRevoke(built);
         return;
       }
-      urls = nextPages.flatMap((page) => page.url?.startsWith("blob:") ? [page.url] : []);
-      setPages((prev) => textureAtlasPagesEqual(prev, nextPages) ? prev : nextPages);
+      const stale = shownUrls.current;
+      shownUrls.current = built;
+      built = [];
+      deferRevoke(stale);
+      setPages(nextPages);
     }).catch(() => {
-      if (!cancelled) {
-        setPages((prev) => textureAtlasPagesEqual(prev, nextPageShells) ? prev : nextPageShells);
-      }
     });
     return () => {
       cancelled = true;
-      for (const url of urls) URL.revokeObjectURL(url);
+      deferRevoke(built);
+    };
+  }, [packed, textureLighting, atlasScale, atomic]);
+  if (atomic) {
+    return {
+      plans: frame.plans,
+      entries: frame.entries,
+      pages: frame.pages,
+      ready: frame.pages.length === 0 || frame.pages.every((page) => !!page.url)
     };
-  }, [packed, textureLighting, atlasScale]);
+  }
   return {
+    plans,
     entries: packed.entries,
     pages,
     ready: pages.length === 0 || pages.every((page) => !!page.url)
@@ -1998,6 +2187,7 @@ var TextureTrianglePoly = memo3(function TextureTrianglePoly2({
     {
       className: elementClassName,
       style: { ...triangleStyle, ...styleProp },
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2034,6 +2224,7 @@ function orderBrushInlineStyle(el) {
 }
 var TextureBorderShapePoly = memo4(function TextureBorderShapePoly2({
   entry,
+  textureLighting,
   solidPaintDefaults,
   className,
   style: styleProp,
@@ -2046,7 +2237,9 @@ var TextureBorderShapePoly = memo4(function TextureBorderShapePoly2({
   const bDisabled = disabledStrategies?.has("b") ?? false;
   const useIForFullRect = bDisabled && isBorderShapeSupported();
   const borderShape = !fullRect || useIForFullRect ? cssBorderShapeForPlan(entry) : null;
-  const useDefaultPaint = entry.shadedColor === solidPaintDefaults?.paintColor;
+  const dynamic = textureLighting === "dynamic";
+  const base = parseHex2(entry.polygon.color ?? "#cccccc");
+  const useDefaultDynamicColor = dynamic && rgbKey2(base) === solidPaintDefaults?.dynamicColorKey;
   const setElementRef = useCallback3((el) => {
     if (!el) return;
     if (borderShape) el.style.setProperty("border-shape", borderShape);
@@ -2056,8 +2249,25 @@ var TextureBorderShapePoly = memo4(function TextureBorderShapePoly2({
   const transform = borderShape ? formatBorderShapeEntryMatrix(entry) : formatSolidQuadEntryMatrix(entry);
   const style = {
     transform,
-    color: useDefaultPaint ? void 0 : entry.shadedColor,
+    // Baked mode: always emit per-leaf shaded color when known so the
+    // first render matches the post-light-nudge commit path. Vanilla
+    // dropped the `=== solidPaintDefaults.paintColor` shortcut in
+    // commit 0423777 — leaves with undefined shadedColor would inherit
+    // the (often-wrong) wrapper --polycss-paint default, producing
+    // facets that look dimmer than they should until a light change
+    // forced an explicit re-bake.
+    color: dynamic ? void 0 : entry.shadedColor,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...dynamic ? {
+      ["--pnx"]: entry.normal[0].toFixed(4),
+      ["--pny"]: entry.normal[1].toFixed(4),
+      ["--pnz"]: entry.normal[2].toFixed(4),
+      ...useDefaultDynamicColor ? null : {
+        ["--psr"]: (base.r / 255).toFixed(4),
+        ["--psg"]: (base.g / 255).toFixed(4),
+        ["--psb"]: (base.b / 255).toFixed(4)
+      }
+    } : null,
     ...styleProp
   };
   const dataAttrs = entry.polygon.data ? Object.fromEntries(
@@ -2070,6 +2280,7 @@ var TextureBorderShapePoly = memo4(function TextureBorderShapePoly2({
       {
         className: elementClassName,
         style,
+        "data-poly-index": entry.index,
         ...domEventHandlers,
         ...dataAttrs,
         ...domAttrs
@@ -2082,6 +2293,7 @@ var TextureBorderShapePoly = memo4(function TextureBorderShapePoly2({
       ref: setElementRef,
       className: elementClassName,
       style,
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2111,7 +2323,8 @@ var TextureProjectiveSolidPoly = memo5(function TextureProjectiveSolidPoly2({
     // would drop it to 3 decimals and leave visible seam gaps between
     // adjacent projective quads at zoom-out (matches vanilla scene.add).
     transform: `matrix3d(${entry.projectiveMatrix})`,
-    color: dynamic || entry.shadedColor === solidPaintDefaults?.paintColor ? void 0 : entry.shadedColor,
+    // Baked: always emit per-leaf shaded color (vanilla commit 0423777).
+    color: dynamic ? void 0 : entry.shadedColor,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
     ...dynamic && !useDefaultDynamicColor ? {
       ["--pnx"]: entry.normal[0].toFixed(4),
@@ -2136,6 +2349,69 @@ var TextureProjectiveSolidPoly = memo5(function TextureProjectiveSolidPoly2({
     {
       className: elementClassName,
       style,
+      "data-poly-index": entry.index,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+});
+
+// src/scene/atlas/cornerShapeSolid.tsx
+import { memo as memo6, useCallback as useCallback4 } from "react";
+import {
+  formatCornerShapeElementStyle,
+  parseHex as parseHex3,
+  rgbKey as rgbKey4
+} from "@layoutit/polycss-core";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function formatPaintCss(entry, textureLighting, solidPaintDefaults) {
+  if (textureLighting === "dynamic") {
+    const base = parseHex3(entry.polygon.color ?? "#cccccc");
+    let style = `;--pnx:${entry.normal[0].toFixed(4)};--pny:${entry.normal[1].toFixed(4)};--pnz:${entry.normal[2].toFixed(4)}`;
+    if (rgbKey4(base) !== solidPaintDefaults?.dynamicColorKey) {
+      style += `;--psr:${(base.r / 255).toFixed(4)};--psg:${(base.g / 255).toFixed(4)};--psb:${(base.b / 255).toFixed(4)}`;
+    }
+    return style;
+  }
+  return entry.shadedColor ? `;color:${entry.shadedColor}` : "";
+}
+var TextureCornerShapeSolidPoly = memo6(function TextureCornerShapeSolidPoly2({
+  entry,
+  geometry,
+  textureLighting,
+  solidPaintDefaults,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const cornerShapeCss = formatCornerShapeElementStyle(entry, geometry);
+  const paintCss = formatPaintCss(entry, textureLighting, solidPaintDefaults);
+  const pointerCss = pointerEvents === "none" ? ";pointer-events:none" : "";
+  const fullCss = cornerShapeCss + paintCss + pointerCss;
+  const setRef = useCallback4((el) => {
+    if (!el) return;
+    el.setAttribute("style", fullCss);
+    if (styleProp) {
+      for (const [k, v] of Object.entries(styleProp)) {
+        if (v === void 0 || v === null) continue;
+        if (k.startsWith("--")) el.style.setProperty(k, String(v));
+        else el.style[k] = String(v);
+      }
+    }
+  }, [fullCss, styleProp]);
+  const dataAttrs = entry.polygon.data ? Object.fromEntries(
+    Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
+  ) : {};
+  const elementClassName = className?.trim() || void 0;
+  return /* @__PURE__ */ jsx6(
+    "u",
+    {
+      ref: setRef,
+      className: elementClassName,
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2144,10 +2420,10 @@ var TextureProjectiveSolidPoly = memo5(function TextureProjectiveSolidPoly2({
 });
 
 // src/scene/atlas/atlasPoly.tsx
-import { memo as memo6 } from "react";
+import { memo as memo7 } from "react";
 import { formatMatrix3d, formatCssLengthPx } from "@layoutit/polycss-core";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var TextureAtlasPoly = memo6(function TextureAtlasPoly2({
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextureAtlasPoly = memo7(function TextureAtlasPoly2({
   entry,
   page,
   textureLighting,
@@ -2170,10 +2446,16 @@ var TextureAtlasPoly = memo6(function TextureAtlasPoly2({
   const style = {
     transform: formatMatrix3d(entry.atlasMatrix),
     ["--polycss-atlas-size"]: `${atlasCanonicalSize}px`,
-    background,
-    backgroundImage: dynamic && page?.url ? `url(${page.url})` : void 0,
-    backgroundPosition: dynamic ? atlasPosition : void 0,
-    backgroundSize: dynamic ? atlasSize : void 0,
+    // Listing the `background` shorthand alongside the `background-*` longhands
+    // in one inline style object makes React warn on every update (mixing
+    // shorthand and non-shorthand for the same property). Branch so only the
+    // current mode's keys are assigned — baked gets `background`, dynamic gets
+    // the longhands.
+    ...dynamic ? {
+      backgroundImage: page?.url ? `url(${page.url})` : void 0,
+      backgroundPosition: atlasPosition,
+      backgroundSize: atlasSize
+    } : { background },
     ...dynamic ? {
       ["--pnx"]: entry.normal[0].toFixed(4),
       ["--pny"]: entry.normal[1].toFixed(4),
@@ -2198,11 +2480,12 @@ var TextureAtlasPoly = memo6(function TextureAtlasPoly2({
     Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
   ) : {};
   const elementClassName = className?.trim() || void 0;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "s",
     {
       className: elementClassName,
       style,
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2218,7 +2501,7 @@ function usePolySceneContext2() {
 }
 
 // src/scene/PolyScene.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
 function PolySceneInner({
   polygons: polygonsProp,
   centerPolygons: centerPolygonsProp,
@@ -2244,9 +2527,11 @@ function PolySceneInner({
   debugShowBackfaces
 }) {
   const { store, sceneElRef, applyTransformDirect } = useCameraContext();
-  const localSceneRef = useCallback4(
+  const [sceneEl, setSceneEl] = useState2(null);
+  const localSceneRef = useCallback5(
     (el) => {
       sceneElRef.current = el;
+      setSceneEl(el);
     },
     [sceneElRef]
   );
@@ -2255,7 +2540,7 @@ function PolySceneInner({
     if (!el) return;
     el.classList.toggle("polycss-debug-show-backfaces", !!debugShowBackfaces);
   }, [debugShowBackfaces, sceneElRef]);
-  const injectedRef = useRef3(false);
+  const injectedRef = useRef4(false);
   useEffect3(() => {
     if (injectedRef.current) return;
     if (typeof document !== "undefined") {
@@ -2326,7 +2611,8 @@ function PolySceneInner({
   const textureAtlas = useTextureAtlas(textureAtlasPlans, textureLighting, textureQuality, strategies);
   const dynamicLightVars = useMemo6(() => {
     if (textureLighting !== "dynamic") return null;
-    const dir = directionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const userDir = directionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const dir = worldDirectionToCss(userDir);
     const len = Math.hypot(dir[0], dir[1], dir[2]) || 1;
     const lx = dir[0] / len, ly = dir[1] / len, lz = dir[2] / len;
     const lightRgb = parseHexColor(directionalLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
@@ -2337,9 +2623,9 @@ function PolySceneInner({
     const rawClz = lz;
     const clz = Math.sign(rawClz || 1) * Math.max(Math.abs(rawClz), 0.01);
     return {
-      ["--plx"]: lx.toFixed(4),
-      ["--ply"]: ly.toFixed(4),
-      ["--plz"]: lz.toFixed(4),
+      ["--plx"]: lx.toFixed(2),
+      ["--ply"]: ly.toFixed(2),
+      ["--plz"]: lz.toFixed(2),
       ["--plr"]: ch(lightRgb[0]),
       ["--plg"]: ch(lightRgb[1]),
       ["--plb"]: ch(lightRgb[2]),
@@ -2348,19 +2634,23 @@ function PolySceneInner({
       ["--pag"]: ch(ambRgb[1]),
       ["--pab"]: ch(ambRgb[2]),
       ["--pai"]: ambientIntensity.toFixed(4),
-      ["--clx"]: lx.toFixed(4),
-      ["--cly"]: ly.toFixed(4),
-      ["--clz"]: clz.toFixed(4)
+      ["--clx"]: lx.toFixed(2),
+      ["--cly"]: ly.toFixed(2),
+      ["--clz"]: clz.toFixed(2)
     };
   }, [textureLighting, directionalLight, ambientLight]);
-  const shadowCastersRef = useRef3(/* @__PURE__ */ new Map());
+  const shadowCastersRef = useRef4(/* @__PURE__ */ new Map());
+  const shadowReceiversRef = useRef4(/* @__PURE__ */ new Set());
   const [groundCssZ, setGroundCssZ] = useState2(null);
-  const recomputeGroundCssZ = useCallback4(() => {
+  const [shadowCastersVersion, setShadowCastersVersion] = useState2(0);
+  const [hasShadowReceiver, setHasShadowReceiver] = useState2(false);
+  const recomputeGroundCssZ = useCallback5(() => {
     let minWorldZ = Infinity;
-    for (const polys of shadowCastersRef.current.values()) {
-      for (const poly of polys) {
+    for (const data of shadowCastersRef.current.values()) {
+      for (const poly of data.polygons) {
         for (const v of poly.vertices) {
-          if (v[2] < minWorldZ) minWorldZ = v[2];
+          const z = v[2] + (data.position[2] ?? 0);
+          if (z < minWorldZ) minWorldZ = z;
         }
       }
     }
@@ -2368,12 +2658,13 @@ function PolySceneInner({
     const lift = shadow?.lift ?? 0.05;
     return (minWorldZ + lift) * BASE_TILE2;
   }, [shadow]);
-  const registerShadowCaster = useCallback4((meshId, meshPolygons) => {
-    if (meshPolygons === null) {
+  const registerShadowCaster = useCallback5((meshId, data) => {
+    if (data === null) {
       shadowCastersRef.current.delete(meshId);
     } else {
-      shadowCastersRef.current.set(meshId, meshPolygons);
+      shadowCastersRef.current.set(meshId, data);
     }
+    setShadowCastersVersion((v) => v + 1);
     const next = recomputeGroundCssZ();
     setGroundCssZ((prev) => prev === next ? prev : next);
     const el = sceneElRef.current;
@@ -2384,6 +2675,11 @@ function PolySceneInner({
       el.style.removeProperty("--shadow-ground-cssz");
     }
   }, [sceneElRef, textureLighting, recomputeGroundCssZ]);
+  const registerShadowReceiver = useCallback5((meshId, registered) => {
+    if (registered) shadowReceiversRef.current.add(meshId);
+    else shadowReceiversRef.current.delete(meshId);
+    setHasShadowReceiver(shadowReceiversRef.current.size > 0);
+  }, []);
   useEffect3(() => {
     const el = sceneElRef.current;
     if (!el) return;
@@ -2405,7 +2701,7 @@ function PolySceneInner({
   );
   const polyChildren = textureAtlas.entries.map((entry, index) => {
     if (entry) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         TextureAtlasPoly,
         {
           entry,
@@ -2420,7 +2716,7 @@ function PolySceneInner({
     const useU = !disabledStrategies?.has("u");
     const useProjectiveSolid = !disabledStrategies?.has("b");
     if (useU && isSolidTrianglePlan2(plan)) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         TextureTrianglePoly,
         {
           entry: plan,
@@ -2430,9 +2726,9 @@ function PolySceneInner({
       );
     }
     if (useProjectiveSolid && isProjectiveQuadPlan(plan)) {
-      return /* @__PURE__ */ jsx7(TextureProjectiveSolidPoly, { entry: plan, textureLighting }, plan.index);
+      return /* @__PURE__ */ jsx8(TextureProjectiveSolidPoly, { entry: plan, textureLighting }, plan.index);
     }
-    return /* @__PURE__ */ jsx7(TextureBorderShapePoly, { entry: plan, disabledStrategies }, plan.index);
+    return /* @__PURE__ */ jsx8(TextureBorderShapePoly, { entry: plan, textureLighting, disabledStrategies }, plan.index);
   });
   const sceneCtxValue = useMemo6(
     () => ({
@@ -2443,11 +2739,16 @@ function PolySceneInner({
       seamBleed,
       shadow,
       registerShadowCaster,
-      groundCssZ
+      registerShadowReceiver,
+      shadowCasters: shadowCastersRef.current,
+      shadowCastersVersion,
+      hasShadowReceiver,
+      groundCssZ,
+      sceneEl
     }),
-    [textureLighting, directionalLight, ambientLight, strategies, seamBleed, shadow, registerShadowCaster, groundCssZ]
+    [textureLighting, directionalLight, ambientLight, strategies, seamBleed, shadow, registerShadowCaster, registerShadowReceiver, shadowCastersVersion, hasShadowReceiver, groundCssZ, sceneEl]
   );
-  return /* @__PURE__ */ jsx7(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx8(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: localSceneRef,
@@ -2465,33 +2766,40 @@ function PolySceneInner({
     }
   ) });
 }
-var PolyScene = memo7(PolySceneInner);
+var PolyScene = memo8(PolySceneInner);
 
 // src/scene/PolyMesh.tsx
 import {
   forwardRef,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useContext as useContext3,
   useEffect as useEffect5,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo7,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState4
 } from "react";
 import {
   BASE_TILE as BASE_TILE4,
+  buildSharedEdgeMap,
+  computeReceiverShadowFaces,
   computeSceneBbox,
   DEFAULT_SEAM_BLEED as DEFAULT_SEAM_BLEED2,
   ensureCcw2D,
   findOverlappingPolygonDuplicates,
   inverseRotateVec3,
+  optimizeMeshPolygons,
   parseHexColor as parseHexColor2,
-  projectCssVertexToGround
+  prepareCasterEdgeOwners,
+  prepareCasterPolyItems,
+  prepareReceiverFacePlanes,
+  projectCssVertexToGround,
+  worldDirectionToCss as worldDirectionToCss2
 } from "@layoutit/polycss-core";
 
 // src/scene/useMesh.ts
-import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef5, useState as useState3 } from "react";
 import { loadMesh } from "@layoutit/polycss-core";
 var EMPTY_POLYGONS = [];
 var EMPTY_WARNINGS = [];
@@ -2503,8 +2811,8 @@ function usePolyMesh(src, options) {
     error: null,
     warnings: EMPTY_WARNINGS
   });
-  const activeResultRef = useRef4(null);
-  const dispose = useCallback5(() => {
+  const activeResultRef = useRef5(null);
+  const dispose = useCallback6(() => {
     const r = activeResultRef.current;
     if (r) {
       try {
@@ -2579,6 +2887,10 @@ function usePolyMesh(src, options) {
   };
 }
 
+// src/scene/PolyMesh.tsx
+import { buildBasisHints, cornerShapeGeometryForPlan, worldDirectionalLightToCss } from "@layoutit/polycss-core";
+import { createPortal } from "react-dom";
+
 // src/scene/voxelRenderer.ts
 import {
   BASE_TILE as BASE_TILE3,
@@ -2588,6 +2900,7 @@ import {
   PROJECTIVE_QUAD_BLEED,
   resolveProjectiveQuadGuards,
   rotateVec3,
+  shadePolygon as shadePolygon2,
   SOLID_QUAD_CANONICAL_SIZE
 } from "@layoutit/polycss-core";
 var DEFAULT_LIGHT_DIR2 = [0.4, -0.7, 0.59];
@@ -2848,9 +3161,6 @@ function clampChannel(value) {
   return Math.round(Math.max(0, Math.min(255, value)));
 }
 function shadeBrushColor(normal, baseColor, directionalLight, ambientLight) {
-  const base = parseColor(baseColor);
-  const light = parseColor(directionalLight?.color ?? DEFAULT_LIGHT_COLOR2);
-  const ambient = parseColor(ambientLight?.color ?? DEFAULT_AMBIENT_COLOR2);
   const lightDir = directionalLight?.direction ?? DEFAULT_LIGHT_DIR2;
   const lightLen = Math.hypot(lightDir[0], lightDir[1], lightDir[2]) || 1;
   const lx = lightDir[0] / lightLen;
@@ -2858,16 +3168,15 @@ function shadeBrushColor(normal, baseColor, directionalLight, ambientLight) {
   const lz = lightDir[2] / lightLen;
   const directScale = Math.max(0, directionalLight?.intensity ?? DEFAULT_LIGHT_INTENSITY2) * Math.max(0, normal[0] * lx + normal[1] * ly + normal[2] * lz);
   const ambientIntensity = Math.max(0, ambientLight?.intensity ?? DEFAULT_AMBIENT_INTENSITY2);
-  const tintR = ambient.r / 255 * ambientIntensity + light.r / 255 * directScale;
-  const tintG = ambient.g / 255 * ambientIntensity + light.g / 255 * directScale;
-  const tintB = ambient.b / 255 * ambientIntensity + light.b / 255 * directScale;
-  const shaded = {
-    r: base.r * tintR,
-    g: base.g * tintG,
-    b: base.b * tintB,
-    alpha: base.alpha
-  };
-  return shaded.alpha < 1 ? `rgba(${clampChannel(shaded.r)}, ${clampChannel(shaded.g)}, ${clampChannel(shaded.b)}, ${shaded.alpha})` : rgbToHex2(shaded);
+  const lightColor = directionalLight?.color ?? DEFAULT_LIGHT_COLOR2;
+  const ambientColor = ambientLight?.color ?? DEFAULT_AMBIENT_COLOR2;
+  const shaded = shadePolygon2(baseColor, directScale, lightColor, ambientColor, ambientIntensity);
+  const base = parseColor(baseColor);
+  if (base.alpha >= 1) return shaded;
+  const r = parseInt(shaded.slice(1, 3), 16);
+  const g = parseInt(shaded.slice(3, 5), 16);
+  const b = parseInt(shaded.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${base.alpha})`;
 }
 function buildDirectMatrixItems(polygons) {
   if (!polygons?.length) return [];
@@ -3313,7 +3622,9 @@ function findMeshUnderPoint(clientX, clientY, filter) {
 }
 
 // src/scene/PolyMesh.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var reactEdgeOwnersCache = /* @__PURE__ */ new WeakMap();
+var reactEdgeOwnersCacheKey = /* @__PURE__ */ new WeakMap();
 function solidPaintVars(defaults) {
   const out = {};
   if (defaults.paintColor) out["--polycss-paint"] = defaults.paintColor;
@@ -3325,21 +3636,23 @@ function solidPaintVars(defaults) {
   return Object.keys(out).length > 0 ? out : null;
 }
 function buildTransform(position, scale, rotation) {
+  const sx = typeof scale === "number" ? scale : scale?.[0] ?? 1;
+  const sy = typeof scale === "number" ? scale : scale?.[1] ?? 1;
+  const sz = typeof scale === "number" ? scale : scale?.[2] ?? 1;
+  const hasScale = sx !== 1 || sy !== 1 || sz !== 1;
+  const hasRotation = !!rotation && (!!rotation[0] || !!rotation[1] || !!rotation[2]);
+  const cssPos = position ? [position[1] * BASE_TILE4, position[0] * BASE_TILE4, position[2] * BASE_TILE4] : [0, 0, 0];
   const parts = [];
-  if (position) {
-    parts.push(`translate3d(${position[0]}px, ${position[1]}px, ${position[2]}px)`);
+  if (cssPos[0] !== 0 || cssPos[1] !== 0 || cssPos[2] !== 0) {
+    parts.push(`translate3d(${cssPos[0]}px, ${cssPos[1]}px, ${cssPos[2]}px)`);
   }
-  if (scale !== void 0) {
-    if (typeof scale === "number") {
-      if (scale !== 1) parts.push(`scale3d(${scale}, ${scale}, ${scale})`);
-    } else {
-      parts.push(`scale3d(${scale[0]}, ${scale[1]}, ${scale[2]})`);
-    }
+  if (hasRotation) {
+    if (rotation[0]) parts.push(`rotateY(${-rotation[0]}deg)`);
+    if (rotation[1]) parts.push(`rotateX(${-rotation[1]}deg)`);
+    if (rotation[2]) parts.push(`rotateZ(${-rotation[2]}deg)`);
   }
-  if (rotation) {
-    if (rotation[0]) parts.push(`rotateX(${rotation[0]}deg)`);
-    if (rotation[1]) parts.push(`rotateY(${rotation[1]}deg)`);
-    if (rotation[2]) parts.push(`rotateZ(${rotation[2]}deg)`);
+  if (hasScale) {
+    parts.push(`scale3d(${sx}, ${sy}, ${sz})`);
   }
   return parts.length > 0 ? parts.join(" ") : void 0;
 }
@@ -3367,11 +3680,16 @@ var PolyMesh = forwardRef(function PolyMesh2({
   src,
   mtl,
   polygons: polygonsProp,
+  voxelSource: voxelSourceProp,
   autoCenter,
   textureLighting,
   textureQuality,
   seamBleed,
+  atomicAtlas,
+  onFrameReady,
   castShadow,
+  receiveShadow,
+  merge = true,
   children,
   fallback,
   errorFallback,
@@ -3405,14 +3723,18 @@ var PolyMesh = forwardRef(function PolyMesh2({
   }, [mtl, parseOptions, meshResolution]);
   const fetched = usePolyMesh(src ?? "", mergedOptions);
   const externalPolygons = src ? fetched.polygons : polygonsProp ?? [];
-  const externalVoxelSource = src ? fetched.voxelSource : void 0;
+  const externalVoxelSource = src ? fetched.voxelSource : voxelSourceProp;
   const [localPolygons, setLocalPolygons] = useState4(null);
-  const prevExternalRef = useRef5(externalPolygons);
+  const prevExternalRef = useRef6(externalPolygons);
   if (prevExternalRef.current !== externalPolygons) {
     prevExternalRef.current = externalPolygons;
     if (localPolygons !== null) setLocalPolygons(null);
   }
-  const sourcePolygons = localPolygons ?? externalPolygons;
+  const rawSourcePolygons = localPolygons ?? externalPolygons;
+  const sourcePolygons = useMemo7(
+    () => merge ? optimizeMeshPolygons(rawSourcePolygons, meshResolution !== void 0 ? { meshResolution } : void 0) : rawSourcePolygons,
+    [rawSourcePolygons, merge, meshResolution]
+  );
   const hasRenderProp = typeof children === "function";
   const renderPolygon = hasRenderProp ? children : null;
   const staticChildren = hasRenderProp ? null : children;
@@ -3422,35 +3744,14 @@ var PolyMesh = forwardRef(function PolyMesh2({
     [sourcePolygons, autoCenter]
   );
   const transform = buildTransform(position, scale, rotation);
-  const transformOrigin = useMemo7(() => {
-    if (polygons.length === 0) return void 0;
-    let minX = Infinity, minY = Infinity, minZ = Infinity;
-    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
-    for (const poly of polygons) {
-      for (const v of poly.vertices) {
-        if (v[0] < minX) minX = v[0];
-        if (v[0] > maxX) maxX = v[0];
-        if (v[1] < minY) minY = v[1];
-        if (v[1] > maxY) maxY = v[1];
-        if (v[2] < minZ) minZ = v[2];
-        if (v[2] > maxZ) maxZ = v[2];
-      }
-    }
-    if (!Number.isFinite(minX)) return void 0;
-    const tile = 50;
-    const x = (minY + maxY) / 2 * tile;
-    const y = (minX + maxX) / 2 * tile;
-    const z = (minZ + maxZ) / 2 * tile;
-    return `${x}px ${y}px ${z}px`;
-  }, [polygons]);
-  const wrapperRef = useRef5(null);
-  const propsRef = useRef5({ position, scale, rotation });
+  const wrapperRef = useRef6(null);
+  const propsRef = useRef6({ position, scale, rotation });
   propsRef.current = { position, scale, rotation };
-  const polygonsRef = useRef5(polygons);
+  const polygonsRef = useRef6(polygons);
   polygonsRef.current = polygons;
   const [bakedRotation, setBakedRotation] = useState4(rotation);
-  const stableTriangleColorFrameRef = useRef5(0);
-  const setPolygonsImplRef = useRef5(() => {
+  const stableTriangleColorFrameRef = useRef6(0);
+  const setPolygonsImplRef = useRef6(() => {
   });
   const handle = useMemo7(() => ({
     get element() {
@@ -3482,8 +3783,8 @@ var PolyMesh = forwardRef(function PolyMesh2({
   }, [handle]);
   const cameraCtx = useContext3(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef ?? null;
-  const pointerDownAtRef = useRef5(null);
-  const makeEvent = useCallback6(
+  const pointerDownAtRef = useRef6(null);
+  const makeEvent = useCallback7(
     function makeEvent2(nativeEvent, clientX, clientY) {
       const intersections = [];
       if (typeof document !== "undefined" && typeof document.elementsFromPoint === "function") {
@@ -3606,9 +3907,13 @@ var PolyMesh = forwardRef(function PolyMesh2({
   const sceneCtx = usePolySceneContext2();
   const effectiveTextureLighting = textureLighting ?? sceneCtx?.textureLighting ?? "baked";
   const effectiveStrategies = sceneCtx?.strategies;
+  const disabledStrategies = useMemo7(
+    () => effectiveStrategies?.disable?.length ? new Set(effectiveStrategies.disable) : void 0,
+    [effectiveStrategies]
+  );
   const effectiveSeamBleed = seamBleed ?? sceneCtx?.seamBleed ?? DEFAULT_SEAM_BLEED2;
-  const effectiveDirectional = effectiveTextureLighting === "dynamic" ? void 0 : sceneCtx?.directionalLight;
-  const effectiveAmbient = effectiveTextureLighting === "dynamic" ? void 0 : sceneCtx?.ambientLight;
+  const effectiveDirectional = sceneCtx?.directionalLight;
+  const effectiveAmbient = sceneCtx?.ambientLight;
   const directVoxelEnabled = Boolean(
     externalVoxelSource && localPolygons === null && !renderPolygon && !hasStaticChildren && effectiveTextureLighting === "baked" && !castShadow
   );
@@ -3621,20 +3926,22 @@ var PolyMesh = forwardRef(function PolyMesh2({
     const localDir = inverseRotateVec3(dir, rotation);
     const len = Math.hypot(localDir[0], localDir[1], localDir[2]) || 1;
     return {
-      ["--plx"]: (localDir[0] / len).toFixed(4),
-      ["--ply"]: (localDir[1] / len).toFixed(4),
-      ["--plz"]: (localDir[2] / len).toFixed(4)
+      ["--plx"]: (localDir[0] / len).toFixed(2),
+      ["--ply"]: (localDir[1] / len).toFixed(2),
+      ["--plz"]: (localDir[2] / len).toFixed(2)
     };
   }, [effectiveTextureLighting, rotation, sceneDirectionalLight]);
   const bakedDirectional = useMemo7(() => {
     if (!effectiveDirectional) return effectiveDirectional;
     const rot = bakedRotation ?? [0, 0, 0];
-    if (rot[0] === 0 && rot[1] === 0 && rot[2] === 0) return effectiveDirectional;
+    const cssLight = worldDirectionalLightToCss(effectiveDirectional);
+    if (rot[0] === 0 && rot[1] === 0 && rot[2] === 0) return cssLight;
     return {
-      ...effectiveDirectional,
-      direction: inverseRotateVec3(effectiveDirectional.direction, rot)
+      ...cssLight,
+      direction: inverseRotateVec3(cssLight.direction, rot)
     };
   }, [effectiveDirectional, bakedRotation]);
+  const lightOccludedPolyIndices = void 0;
   const atlasPlans = useMemo7(
     () => {
       if (renderPolygon || directVoxelEnabled) return [];
@@ -3643,53 +3950,101 @@ var PolyMesh = forwardRef(function PolyMesh2({
         directionalLight: bakedDirectional,
         ambientLight: effectiveAmbient
       }) : null;
-      return polygons.map((p, i) => computeTextureAtlasPlan(p, i, {
+      const basisHints = buildBasisHints(polygons, {
         directionalLight: bakedDirectional,
-        ambientLight: effectiveAmbient,
-        seamBleed: seamBleedEdges?.has(i) ? effectiveSeamBleed : void 0,
-        seamEdges: seamBleedEdges?.get(i),
-        textureEdgeRepairEdges: repairEdges[i]
-      }));
+        ambientLight: effectiveAmbient
+      });
+      return polygons.map((p, i) => computeTextureAtlasPlan(
+        p,
+        i,
+        {
+          directionalLight: bakedDirectional,
+          ambientLight: effectiveAmbient,
+          seamBleed: seamBleedEdges?.has(i) ? effectiveSeamBleed : void 0,
+          seamEdges: seamBleedEdges?.get(i),
+          textureEdgeRepairEdges: repairEdges[i],
+          lightOccludedPolyIndices
+        },
+        basisHints[i]
+      ));
     },
-    [renderPolygon, directVoxelEnabled, polygons, bakedDirectional, effectiveAmbient, effectiveSeamBleed]
+    [renderPolygon, directVoxelEnabled, polygons, bakedDirectional, effectiveAmbient, effectiveSeamBleed, lightOccludedPolyIndices]
   );
   const textureAtlas = useTextureAtlas(
     atlasPlans,
     effectiveTextureLighting,
     textureQuality,
-    effectiveStrategies
+    effectiveStrategies,
+    atomicAtlas
   );
   const solidPaintDefaults = useMemo7(
-    () => !renderPolygon ? getSolidPaintDefaults(atlasPlans, effectiveTextureLighting, effectiveStrategies) : {},
-    [renderPolygon, atlasPlans, effectiveTextureLighting, effectiveStrategies]
+    () => !renderPolygon ? getSolidPaintDefaults(textureAtlas.plans, effectiveTextureLighting, effectiveStrategies) : {},
+    [renderPolygon, textureAtlas.plans, effectiveTextureLighting, effectiveStrategies]
   );
+  const onFrameReadyRef = useRef6(onFrameReady);
+  onFrameReadyRef.current = onFrameReady;
+  useLayoutEffect2(() => {
+    if (atomicAtlas && textureAtlas.ready) onFrameReadyRef.current?.();
+  }, [textureAtlas.entries]);
   const defaultPaintVars = useMemo7(
     () => solidPaintVars(solidPaintDefaults),
     [solidPaintDefaults]
   );
-  const meshIdRef = useRef5(/* @__PURE__ */ Symbol());
+  const meshIdRef = useRef6(/* @__PURE__ */ Symbol());
   const sceneRegisterShadowCaster = sceneCtx?.registerShadowCaster;
+  const renderedPolygonIndices = useMemo7(() => {
+    const dedupDrop = findOverlappingPolygonDuplicates(polygons, {
+      normalTolerance: 0.1,
+      distanceTolerance: 0.5,
+      overlapFraction: 0.95,
+      preserveDoubleSidedBackfaces: false
+    });
+    const s = /* @__PURE__ */ new Set();
+    for (let i = 0; i < atlasPlans.length; i++) {
+      if (atlasPlans[i] && !dedupDrop.has(i)) s.add(i);
+    }
+    return s;
+  }, [atlasPlans, polygons]);
   useEffect5(() => {
     if (!sceneRegisterShadowCaster) return;
     if (castShadow) {
-      sceneRegisterShadowCaster(meshIdRef.current, polygons);
+      sceneRegisterShadowCaster(meshIdRef.current, {
+        polygons,
+        position: position ?? [0, 0, 0],
+        scale,
+        rotation,
+        renderedPolygonIndices
+      });
     } else {
       sceneRegisterShadowCaster(meshIdRef.current, null);
     }
     return () => {
       sceneRegisterShadowCaster(meshIdRef.current, null);
     };
-  }, [sceneRegisterShadowCaster, castShadow, polygons]);
+  }, [sceneRegisterShadowCaster, castShadow, polygons, position, scale, rotation, renderedPolygonIndices]);
+  const sceneRegisterShadowReceiver = sceneCtx?.registerShadowReceiver;
+  useEffect5(() => {
+    if (!sceneRegisterShadowReceiver) return;
+    sceneRegisterShadowReceiver(meshIdRef.current, !!receiveShadow);
+    return () => {
+      sceneRegisterShadowReceiver(meshIdRef.current, false);
+    };
+  }, [sceneRegisterShadowReceiver, receiveShadow]);
   const bakedShadowGroundCssZ = sceneCtx?.groundCssZ ?? null;
   const sceneShadow = sceneCtx?.shadow;
+  const sceneHasReceiver = sceneCtx?.hasShadowReceiver ?? false;
   const shadowSvgNode = useMemo7(() => {
     if (!castShadow || renderPolygon) return null;
+    if (sceneHasReceiver) return null;
     if (bakedShadowGroundCssZ === null) return null;
-    const lightDir = sceneDirectionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const userGroundLightDir = sceneDirectionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const lightDir = worldDirectionToCss2(userGroundLightDir);
+    const meshPosZ = position?.[2] ?? 0;
+    const localGroundCssZ = bakedShadowGroundCssZ - meshPosZ * BASE_TILE4;
     const shadowDedupDrop = findOverlappingPolygonDuplicates(polygons, {
       normalTolerance: 0.1,
       distanceTolerance: 0.5,
-      overlapFraction: 0.4,
+      overlapFraction: 0.95,
       preserveDoubleSidedBackfaces: false
     });
     const projections = [];
@@ -3711,7 +4066,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
         if (cssVertex[1] < fpMinY) fpMinY = cssVertex[1];
         if (cssVertex[0] > fpMaxX) fpMaxX = cssVertex[0];
         if (cssVertex[1] > fpMaxY) fpMaxY = cssVertex[1];
-        const p = projectCssVertexToGround(cssVertex, lightDir, bakedShadowGroundCssZ);
+        const p = projectCssVertexToGround(cssVertex, lightDir, localGroundCssZ);
         projected.push(p);
         if (p[0] < minX) minX = p[0];
         if (p[1] < minY) minY = p[1];
@@ -3741,7 +4096,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
       }
       d += "Z";
     }
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "svg",
       {
         className: "polycss-shadow polycss-shadow-svg",
@@ -3757,16 +4112,16 @@ var PolyMesh = forwardRef(function PolyMesh2({
           transformOrigin: "0 0",
           pointerEvents: "none",
           willChange: "transform",
-          transform: `translate3d(${bx0.toFixed(3)}px,${by0.toFixed(3)}px,${bakedShadowGroundCssZ.toFixed(3)}px)`
+          transform: `translate3d(${bx0.toFixed(3)}px,${by0.toFixed(3)}px,${localGroundCssZ.toFixed(3)}px)`
         },
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx9(
           "path",
           {
             d,
             fill: `rgb(${parsed[0]},${parsed[1]},${parsed[2]})`,
             fillRule: "nonzero",
             stroke: `rgb(${parsed[0]},${parsed[1]},${parsed[2]})`,
-            strokeWidth: "2",
+            strokeWidth: "3",
             strokeLinejoin: "round",
             opacity: shadowOpacity.toFixed(4)
           }
@@ -3774,7 +4129,125 @@ var PolyMesh = forwardRef(function PolyMesh2({
       },
       "shadow-svg"
     );
-  }, [castShadow, renderPolygon, polygons, atlasPlans, sceneDirectionalLight, bakedShadowGroundCssZ, sceneShadow]);
+  }, [castShadow, renderPolygon, polygons, atlasPlans, sceneDirectionalLight, bakedShadowGroundCssZ, sceneShadow, sceneHasReceiver]);
+  const shadowCasters = sceneCtx?.shadowCasters;
+  const shadowCastersVersion = sceneCtx?.shadowCastersVersion ?? 0;
+  const [cameraTick, setCameraTick] = useState4(0);
+  useEffect5(() => {
+    if (!receiveShadow) return;
+    return cameraCtx?.store.subscribe(() => setCameraTick((n) => n + 1));
+  }, [receiveShadow, cameraCtx?.store]);
+  void cameraTick;
+  const selfShadowEdgeMap = useMemo7(
+    () => receiveShadow ? buildSharedEdgeMap(polygons) : void 0,
+    [polygons, receiveShadow]
+  );
+  const receiverShadowSvgs = useMemo7(() => {
+    if (!receiveShadow) return null;
+    if (!shadowCasters || shadowCasters.size === 0) return null;
+    const userLightDir = sceneDirectionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const lightDir = worldDirectionToCss2(userLightDir);
+    const shadowLift = sceneShadow?.lift ?? 1e-3;
+    const planes = prepareReceiverFacePlanes(
+      polygons,
+      position ?? [0, 0, 0],
+      scale,
+      /* @__PURE__ */ new Set(),
+      shadowLift,
+      rotation
+    );
+    if (planes.length === 0) return null;
+    const casterInputs = [];
+    for (const [casterId, data] of shadowCasters) {
+      const rendered = data.renderedPolygonIndices;
+      const items = prepareCasterPolyItems(
+        data.polygons,
+        data.position,
+        data.scale,
+        rendered ? (idx) => rendered.has(idx) : () => true,
+        data.rotation ?? null
+      );
+      const isSelf = data.polygons === polygons;
+      const selfMap = isSelf ? selfShadowEdgeMap : void 0;
+      let edgeOwners;
+      if (!isSelf && data.polygons.length >= 40) {
+        const dposArr = data.position;
+        const drot = data.rotation ?? null;
+        const dsKey = JSON.stringify(data.scale ?? null);
+        const eoKey = `${dposArr[0]},${dposArr[1]},${dposArr[2]}|${drot ? drot.join(",") : "n"}|${dsKey}`;
+        let cachedOwners = reactEdgeOwnersCache.get(data.polygons);
+        if (cachedOwners === void 0 || reactEdgeOwnersCacheKey.get(data.polygons) !== eoKey) {
+          cachedOwners = prepareCasterEdgeOwners(data.polygons, dposArr, data.scale, drot);
+          reactEdgeOwnersCache.set(data.polygons, cachedOwners);
+          reactEdgeOwnersCacheKey.set(data.polygons, eoKey);
+        }
+        edgeOwners = cachedOwners;
+      }
+      casterInputs.push({
+        id: casterId,
+        items,
+        selfShadowEdgeMap: selfMap,
+        edgeOwners,
+        casterPolygonCount: data.polygons.length
+      });
+    }
+    const cameraState = cameraCtx?.store.getState().cameraState;
+    const cameraRot = {
+      rotX: cameraState?.rotX ?? 65,
+      rotY: cameraState?.rotY ?? 45,
+      meshRotation: rotation
+    };
+    const specs = computeReceiverShadowFaces({
+      receiverPlanes: planes,
+      receiverPolygons: polygons,
+      receiverHasTexture: polygons.some((p) => p.texture !== void 0),
+      casters: casterInputs,
+      lightDir,
+      cameraRot,
+      ambientLight: sceneCtx?.ambientLight,
+      directionalLight: sceneDirectionalLight,
+      shadow: { color: sceneShadow?.color, opacity: sceneShadow?.opacity ?? 0.25, maxExtend: sceneShadow?.maxExtend }
+    });
+    return /* @__PURE__ */ jsx9(Fragment, { children: specs.map((spec) => /* @__PURE__ */ jsx9(
+      "svg",
+      {
+        className: "polycss-shadow polycss-shadow-svg polycss-shadow-receiver",
+        "data-poly-shadow-type": "receiver",
+        "data-poly-shadow-receiver-face": spec.faceIndex,
+        "data-poly-shadow-receiver-polys": JSON.stringify(spec.memberPolyIndices),
+        width: spec.width,
+        height: spec.height,
+        viewBox: `0 0 ${spec.width} ${spec.height}`,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "block",
+          overflow: "hidden",
+          transformOrigin: "0 0",
+          pointerEvents: "none",
+          willChange: "transform",
+          transform: spec.matrixCss
+        },
+        children: spec.paths.map((p, i) => /* @__PURE__ */ jsx9(
+          "path",
+          {
+            d: p.d,
+            fill: spec.fill,
+            stroke: spec.fill,
+            strokeWidth: "3",
+            strokeLinejoin: "round",
+            opacity: spec.opacity.toFixed(4),
+            "data-poly-shadow-caster-polys": JSON.stringify(p.casterPolygonIndices)
+          },
+          i
+        ))
+      },
+      `receiver-${spec.faceIndex}`
+    )) });
+  }, [receiveShadow, shadowCasters, shadowCastersVersion, polygons, position, scale, rotation, sceneDirectionalLight, sceneShadow, sceneCtx?.ambientLight, cameraCtx?.store, cameraTick, selfShadowEdgeMap]);
+  const portalSceneEl = sceneCtx?.sceneEl ?? null;
+  const portaledReceiverShadowSvgs = portalSceneEl && receiverShadowSvgs ? createPortal(receiverShadowSvgs, portalSceneEl) : null;
   setPolygonsImplRef.current = (nextPolygons) => {
     const nextRenderedPolygons = autoCenter ? recenterPolygons(nextPolygons) : nextPolygons;
     polygonsRef.current = nextRenderedPolygons;
@@ -3794,7 +4267,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
     }
     setLocalPolygons([...nextPolygons]);
   };
-  const voxelRendererRef = useRef5(null);
+  const voxelRendererRef = useRef6(null);
   useLayoutEffect2(() => {
     const root = wrapperRef.current;
     voxelRendererRef.current?.dispose();
@@ -3836,7 +4309,6 @@ var PolyMesh = forwardRef(function PolyMesh2({
   ]);
   const wrapperStyle = {
     transform,
-    ...transformOrigin ? { transformOrigin } : null,
     ...dynamicLightOverride,
     ...style,
     ...defaultPaintVars
@@ -3844,10 +4316,10 @@ var PolyMesh = forwardRef(function PolyMesh2({
   const renderedPolygons = renderPolygon ? polygons.map((p, i) => (
     // Render-prop: caller controls how each polygon renders. We still
     // wrap in a fragment with key so React reconciliation works.
-    /* @__PURE__ */ jsx8(RenderPropPolygon, { polygon: p, index: i, children: renderPolygon }, i)
+    /* @__PURE__ */ jsx9(RenderPropPolygon, { polygon: p, index: i, children: renderPolygon }, i)
   )) : textureAtlas.entries.map((entry, index) => {
     if (entry) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         TextureAtlasPoly,
         {
           entry,
@@ -3858,10 +4330,10 @@ var PolyMesh = forwardRef(function PolyMesh2({
         entry.index
       );
     }
-    const plan = atlasPlans[index];
+    const plan = textureAtlas.plans[index];
     if (!plan || plan.texture) return null;
     if (isProjectiveQuadPlan(plan)) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         TextureProjectiveSolidPoly,
         {
           entry: plan,
@@ -3871,26 +4343,44 @@ var PolyMesh = forwardRef(function PolyMesh2({
         plan.index
       );
     }
-    return isSolidTrianglePlan2(plan) ? /* @__PURE__ */ jsx8(
-      TextureTrianglePoly,
-      {
-        entry: plan,
-        textureLighting: effectiveTextureLighting,
-        solidPaintDefaults
-      },
-      plan.index
-    ) : /* @__PURE__ */ jsx8(
+    if (isSolidTrianglePlan2(plan)) {
+      return /* @__PURE__ */ jsx9(
+        TextureTrianglePoly,
+        {
+          entry: plan,
+          textureLighting: effectiveTextureLighting,
+          solidPaintDefaults
+        },
+        plan.index
+      );
+    }
+    const cornerGeo = !disabledStrategies?.has("i") ? cornerShapeGeometryForPlan(plan) : null;
+    if (cornerGeo) {
+      return /* @__PURE__ */ jsx9(
+        TextureCornerShapeSolidPoly,
+        {
+          entry: plan,
+          geometry: cornerGeo,
+          textureLighting: effectiveTextureLighting,
+          solidPaintDefaults
+        },
+        plan.index
+      );
+    }
+    return /* @__PURE__ */ jsx9(
       TextureBorderShapePoly,
       {
         entry: plan,
-        solidPaintDefaults
+        textureLighting: effectiveTextureLighting,
+        solidPaintDefaults,
+        disabledStrategies
       },
       plan.index
     );
   });
   if (src) {
     if (fetched.loading && fetched.polygons.length === 0) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         "div",
         {
           ref: wrapperRef,
@@ -3903,7 +4393,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
       );
     }
     if (fetched.error && fetched.polygons.length === 0) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         "div",
         {
           ref: wrapperRef,
@@ -3926,6 +4416,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
       ...wrapperHandlers,
       children: [
         shadowSvgNode,
+        portaledReceiverShadowSvgs,
         renderedPolygons,
         staticChildren
       ]
@@ -3937,12 +4428,89 @@ function RenderPropPolygon({
   index,
   children
 }) {
-  return /* @__PURE__ */ jsx8(Fragment, { children: children(polygon, index) });
+  return /* @__PURE__ */ jsx9(Fragment, { children: children(polygon, index) });
+}
+
+// src/scene/PolyIframe.tsx
+import { BASE_TILE as BASE_TILE5 } from "@layoutit/polycss-core";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function buildIframeTransform(position, rotation, scale, cssWidth, cssHeight) {
+  const sx = typeof scale === "number" ? scale : scale?.[0] ?? 1;
+  const sy = typeof scale === "number" ? scale : scale?.[1] ?? 1;
+  const sz = typeof scale === "number" ? scale : scale?.[2] ?? 1;
+  const hasScale = sx !== 1 || sy !== 1 || sz !== 1;
+  const hasRotation = !!rotation && (!!rotation[0] || !!rotation[1] || !!rotation[2]);
+  const cssX = (position?.[1] ?? 0) * BASE_TILE5;
+  const cssY = (position?.[0] ?? 0) * BASE_TILE5;
+  const cssZ = (position?.[2] ?? 0) * BASE_TILE5;
+  const parts = [];
+  parts.push(`translate3d(${cssX}px, ${cssY}px, ${cssZ}px)`);
+  if (hasRotation) {
+    if (rotation[0]) parts.push(`rotateY(${-rotation[0]}deg)`);
+    if (rotation[1]) parts.push(`rotateX(${-rotation[1]}deg)`);
+    if (rotation[2]) parts.push(`rotateZ(${-rotation[2]}deg)`);
+  }
+  if (hasScale) parts.push(`scale3d(${sx}, ${sy}, ${sz})`);
+  parts.push(`translate(${-cssWidth / 2}px, ${-cssHeight / 2}px)`);
+  return parts.join(" ");
+}
+function PolyIframe({
+  src,
+  width,
+  height,
+  position,
+  rotation,
+  scale,
+  allow,
+  sandbox,
+  loading,
+  referrerPolicy,
+  title,
+  className,
+  style
+}) {
+  const cssW = width * BASE_TILE5;
+  const cssH = height * BASE_TILE5;
+  const transform = buildIframeTransform(position, rotation, scale, cssW, cssH);
+  const wrapperStyle = {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    transformOrigin: "0 0",
+    transformStyle: "preserve-3d",
+    transform,
+    ...style
+  };
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: `polycss-iframe${className ? ` ${className}` : ""}`,
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsx10(
+        "iframe",
+        {
+          src,
+          allow,
+          sandbox,
+          loading,
+          referrerPolicy,
+          title,
+          style: {
+            width: cssW,
+            height: cssH,
+            border: 0,
+            display: "block",
+            background: "#000"
+          }
+        }
+      )
+    }
+  );
 }
 
 // src/scene/PolyGround.tsx
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function PolyGround({
   size = 6,
   z = 0,
@@ -3961,7 +4529,7 @@ function PolyGround({
     ];
     return [{ vertices, color }];
   }, [size, z, center, color]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     PolyMesh,
     {
       polygons,
@@ -3982,8 +4550,8 @@ function usePolyMaterial(options) {
 }
 
 // src/shapes/Poly.tsx
-import { memo as memo8, useMemo as useMemo10 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { memo as memo9, useMemo as useMemo10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var DIRECT_TEXTURE_CSS_DECIMALS = 4;
 function formatCssLength(value, decimals = DIRECT_TEXTURE_CSS_DECIMALS) {
   const next = value.toFixed(decimals).replace(/\.?0+$/, "");
@@ -4035,7 +4603,7 @@ function MaterialDirectPoly({
     Object.entries(plan.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
   ) : {};
   const elementClassName = className?.trim() || void 0;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "i",
     {
       className: elementClassName,
@@ -4166,7 +4734,7 @@ function PolyInner({
   const wrapperTransform = transformParts.length > 0 ? transformParts.join(" ") : void 0;
   let front = null;
   if (materialUvRect && material && atlasPlan) {
-    front = /* @__PURE__ */ jsx10(
+    front = /* @__PURE__ */ jsx12(
       MaterialDirectPoly,
       {
         plan: atlasPlan,
@@ -4182,7 +4750,7 @@ function PolyInner({
   } else {
     const atlasEntry = textureAtlas.entries[0];
     if (atlasEntry) {
-      front = /* @__PURE__ */ jsx10(
+      front = /* @__PURE__ */ jsx12(
         TextureAtlasPoly,
         {
           entry: atlasEntry,
@@ -4196,7 +4764,7 @@ function PolyInner({
         }
       );
     } else if (atlasPlan && !atlasPlan.texture) {
-      front = isSolidTrianglePlan2(atlasPlan) ? /* @__PURE__ */ jsx10(
+      front = isSolidTrianglePlan2(atlasPlan) ? /* @__PURE__ */ jsx12(
         TextureTrianglePoly,
         {
           entry: atlasPlan,
@@ -4207,7 +4775,7 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : isProjectiveQuadPlan(atlasPlan) ? /* @__PURE__ */ jsx10(
+      ) : isProjectiveQuadPlan(atlasPlan) ? /* @__PURE__ */ jsx12(
         TextureProjectiveSolidPoly,
         {
           entry: atlasPlan,
@@ -4218,10 +4786,11 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : /* @__PURE__ */ jsx10(
+      ) : /* @__PURE__ */ jsx12(
         TextureBorderShapePoly,
         {
           entry: atlasPlan,
+          textureLighting,
           className,
           style: styleProp,
           domAttrs,
@@ -4233,7 +4802,7 @@ function PolyInner({
   }
   if (!front) return null;
   if (!wrapperTransform) return front;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "polycss-poly-wrapper",
@@ -4246,7 +4815,7 @@ function PolyInner({
     }
   );
 }
-var Poly = memo8(PolyInner);
+var Poly = memo9(PolyInner);
 
 // src/shapes/PolyShapes.tsx
 import { useMemo as useMemo11 } from "react";
@@ -4263,7 +4832,7 @@ import {
   conePolygons,
   torusPolygons
 } from "@layoutit/polycss-core";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function PolyBox({
   size,
   center,
@@ -4282,7 +4851,7 @@ function PolyBox({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, center, min, max, color, texture, material, uvs, data, faces]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyPlane({
   axis,
@@ -4297,7 +4866,7 @@ function PolyPlane({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [axis, size, offset, along, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyRing({
   axis,
@@ -4312,7 +4881,7 @@ function PolyRing({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [axis, radius, halfThickness, segments, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyOctahedron({
   center,
@@ -4325,7 +4894,7 @@ function PolyOctahedron({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [center, size, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyTetrahedron({
   size,
@@ -4337,7 +4906,7 @@ function PolyTetrahedron({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyIcosahedron({
   size,
@@ -4349,7 +4918,7 @@ function PolyIcosahedron({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyDodecahedron({
   size,
@@ -4361,7 +4930,7 @@ function PolyDodecahedron({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolySphere({
   radius,
@@ -4374,7 +4943,7 @@ function PolySphere({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, subdivisions, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyCylinder({
   radius,
@@ -4389,7 +4958,7 @@ function PolyCylinder({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, radiusTop, height, radialSegments, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyCone({
   radius,
@@ -4403,7 +4972,7 @@ function PolyCone({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, height, radialSegments, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 function PolyTorus({
   radius,
@@ -4418,12 +4987,12 @@ function PolyTorus({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, tube, radialSegments, tubularSegments, color]
   );
-  return /* @__PURE__ */ jsx11(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ jsx13(PolyMesh, { polygons, ...meshProps });
 }
 
 // src/controls/PolyFirstPersonControls.tsx
-import { useEffect as useEffect6, useRef as useRef6, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef2 } from "react";
-import { BASE_TILE as BASE_TILE5 } from "@layoutit/polycss-core";
+import { useEffect as useEffect6, useRef as useRef7, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef2 } from "react";
+import { BASE_TILE as BASE_TILE6 } from "@layoutit/polycss-core";
 var DEFAULTS = {
   enabled: true,
   lookEnabled: true,
@@ -4483,25 +5052,25 @@ function emitEvent(registry, type) {
 }
 var PolyFirstPersonControls = forwardRef2(function PolyFirstPersonControls2(props, ref) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const onChangeRef = useRef6(props.onChange);
-  const onInteractionStartRef = useRef6(props.onInteractionStart);
-  const onInteractionEndRef = useRef6(props.onInteractionEnd);
+  const onChangeRef = useRef7(props.onChange);
+  const onInteractionStartRef = useRef7(props.onInteractionStart);
+  const onInteractionEndRef = useRef7(props.onInteractionEnd);
   useEffect6(() => {
     onChangeRef.current = props.onChange;
     onInteractionStartRef.current = props.onInteractionStart;
     onInteractionEndRef.current = props.onInteractionEnd;
   });
-  const optsRef = useRef6(resolveOptions(DEFAULTS, props));
-  const cameraOriginRef = useRef6([0, 0, 0]);
-  const rafIdRef = useRef6(null);
-  const lastTimeRef = useRef6(0);
-  const stoppedRef = useRef6(false);
-  const pointerLockedRef = useRef6(false);
-  const interactingRef = useRef6(false);
-  const keysHeldRef = useRef6(/* @__PURE__ */ new Set());
-  const verticalVelRef = useRef6(0);
-  const jumpOffsetRef = useRef6(0);
-  const registryRef = useRef6(makeRegistry());
+  const optsRef = useRef7(resolveOptions(DEFAULTS, props));
+  const cameraOriginRef = useRef7([0, 0, 0]);
+  const rafIdRef = useRef7(null);
+  const lastTimeRef = useRef7(0);
+  const stoppedRef = useRef7(false);
+  const pointerLockedRef = useRef7(false);
+  const interactingRef = useRef7(false);
+  const keysHeldRef = useRef7(/* @__PURE__ */ new Set());
+  const verticalVelRef = useRef7(0);
+  const jumpOffsetRef = useRef7(0);
+  const registryRef = useRef7(makeRegistry());
   useImperativeHandle2(ref, () => ({
     update(partial) {
       const prev = optsRef.current;
@@ -4599,7 +5168,7 @@ var PolyFirstPersonControls = forwardRef2(function PolyFirstPersonControls2(prop
     const host = cameraElRef.current;
     const perspStr = host ? getComputedStyle(host).perspective : "";
     const n = parseFloat(perspStr);
-    return (Number.isFinite(n) && n > 0 ? n : 8e3) / BASE_TILE5;
+    return (Number.isFinite(n) && n > 0 ? n : 32e3) / BASE_TILE6;
   }
   function deriveTarget() {
     const s = cameraRef.current.state;
@@ -4837,10 +5406,10 @@ var PolyFirstPersonControls = forwardRef2(function PolyFirstPersonControls2(prop
 });
 
 // src/controls/PolyMapControls.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useRef as useRef8 } from "react";
 
 // src/controls/sharedControls.ts
-import { BASE_TILE as BASE_TILE6 } from "@layoutit/polycss-core";
+import { BASE_TILE as BASE_TILE7 } from "@layoutit/polycss-core";
 var POINTER_DRAG_SPEED = 4;
 function invertFactor(invert) {
   if (invert === true) return -1;
@@ -4851,7 +5420,7 @@ function applyOrbit(dx, dy, s, handle, invert) {
   const f = invertFactor(invert);
   const dX = dx / POINTER_DRAG_SPEED * f;
   const dY = dy / POINTER_DRAG_SPEED * f;
-  const rotX = Math.max(0, Math.min(100, s.rotX - dY));
+  const rotX = s.rotX - dY;
   const rotY = ((s.rotY - dX) % 360 + 360) % 360;
   handle.update({ rotX, rotY });
 }
@@ -4861,7 +5430,7 @@ function applyPan(dx, dy, s, handle, _invert) {
   const cosRotX = cosRotXRaw >= 0 ? Math.max(0.1, cosRotXRaw) : Math.min(-0.1, cosRotXRaw);
   const cZ = Math.cos(s.rotY * Math.PI / 180);
   const sZ = Math.sin(s.rotY * Math.PI / 180);
-  const k = z * BASE_TILE6;
+  const k = z * BASE_TILE7;
   const targetD0 = (dx * sZ - dy * cZ / cosRotX) / k;
   const targetD1 = -(dx * cZ + dy * sZ / cosRotX) / k;
   const t = s.target;
@@ -5010,18 +5579,18 @@ function PolyMapControls({
   onInteractionEnd
 }) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const dragRef = useRef7(drag);
-  const wheelRef = useRef7(wheel);
-  const dollyRef = useRef7(dolly);
-  const invertRef = useRef7(invert);
-  const zoomMinRef = useRef7(minZoom);
-  const zoomMaxRef = useRef7(maxZoom);
-  const distanceMinRef = useRef7(minDistance);
-  const distanceMaxRef = useRef7(maxDistance);
-  const animateRef = useRef7(animate);
-  const onChangeRef = useRef7(onChange);
-  const onInteractionStartRef = useRef7(onInteractionStart);
-  const onInteractionEndRef = useRef7(onInteractionEnd);
+  const dragRef = useRef8(drag);
+  const wheelRef = useRef8(wheel);
+  const dollyRef = useRef8(dolly);
+  const invertRef = useRef8(invert);
+  const zoomMinRef = useRef8(minZoom);
+  const zoomMaxRef = useRef8(maxZoom);
+  const distanceMinRef = useRef8(minDistance);
+  const distanceMaxRef = useRef8(maxDistance);
+  const animateRef = useRef8(animate);
+  const onChangeRef = useRef8(onChange);
+  const onInteractionStartRef = useRef8(onInteractionStart);
+  const onInteractionEndRef = useRef8(onInteractionEnd);
   useEffect7(() => {
     dragRef.current = drag;
     wheelRef.current = wheel;
@@ -5067,7 +5636,7 @@ function PolyMapControls({
       console.error("[polycss/react] PolyMapControls onInteractionEnd threw:", err);
     }
   };
-  const animationPausedShared = useRef7({ value: false }).current;
+  const animationPausedShared = useRef8({ value: false }).current;
   useEffect7(() => {
     if (!drag) return;
     const el = cameraElRef.current;
@@ -5192,7 +5761,7 @@ function PolyMapControls({
 }
 
 // src/controls/PolyOrbitControls.tsx
-import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { useEffect as useEffect8, useRef as useRef9 } from "react";
 function PolyOrbitControls({
   drag = true,
   wheel = true,
@@ -5208,18 +5777,18 @@ function PolyOrbitControls({
   onInteractionEnd
 }) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const dragRef = useRef8(drag);
-  const wheelRef = useRef8(wheel);
-  const dollyRef = useRef8(dolly);
-  const invertRef = useRef8(invert);
-  const zoomMinRef = useRef8(minZoom);
-  const zoomMaxRef = useRef8(maxZoom);
-  const distanceMinRef = useRef8(minDistance);
-  const distanceMaxRef = useRef8(maxDistance);
-  const animateRef = useRef8(animate);
-  const onChangeRef = useRef8(onChange);
-  const onInteractionStartRef = useRef8(onInteractionStart);
-  const onInteractionEndRef = useRef8(onInteractionEnd);
+  const dragRef = useRef9(drag);
+  const wheelRef = useRef9(wheel);
+  const dollyRef = useRef9(dolly);
+  const invertRef = useRef9(invert);
+  const zoomMinRef = useRef9(minZoom);
+  const zoomMaxRef = useRef9(maxZoom);
+  const distanceMinRef = useRef9(minDistance);
+  const distanceMaxRef = useRef9(maxDistance);
+  const animateRef = useRef9(animate);
+  const onChangeRef = useRef9(onChange);
+  const onInteractionStartRef = useRef9(onInteractionStart);
+  const onInteractionEndRef = useRef9(onInteractionEnd);
   useEffect8(() => {
     dragRef.current = drag;
     wheelRef.current = wheel;
@@ -5265,7 +5834,7 @@ function PolyOrbitControls({
       console.error("[polycss/react] PolyOrbitControls onInteractionEnd threw:", err);
     }
   };
-  const animationPausedShared = useRef8({ value: false }).current;
+  const animationPausedShared = useRef9({ value: false }).current;
   useEffect8(() => {
     if (!drag) return;
     const el = cameraElRef.current;
@@ -5391,11 +5960,11 @@ function PolyOrbitControls({
 
 // src/controls/TransformControls.tsx
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useContext as useContext4,
   useEffect as useEffect9,
   useMemo as useMemo12,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState5
 } from "react";
 import {
@@ -5408,7 +5977,7 @@ import {
   quatMultiply,
   ringQuadPolygons
 } from "@layoutit/polycss-core";
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
 var FALLBACK_CAMERA_STORE = createSceneStore(DEFAULT_CAMERA_STATE);
 var COLOR_X = "#ff3653";
 var COLOR_Y = "#8adb00";
@@ -5755,7 +6324,7 @@ function PolyTransformControls({
   const [draggingKey, setDraggingKey] = useState5(null);
   const cameraCtx = useContext4(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef;
-  const dragRef = useRef9({
+  const dragRef = useRef10({
     target: null,
     mode: "translate",
     shaftLengthCss: 0,
@@ -5886,10 +6455,13 @@ function PolyTransformControls({
   const position = target.getPosition() ?? [0, 0, 0];
   const polygons = target.getPolygons();
   const bboxCenter = gizmoCenterForMesh(polygons);
+  const cssPosX = position[1] * SCENE_TILE_SIZE;
+  const cssPosY = position[0] * SCENE_TILE_SIZE;
+  const cssPosZ = position[2] * SCENE_TILE_SIZE;
   const wrapperPos = [
-    position[0] + bboxCenter[0],
-    position[1] + bboxCenter[1],
-    position[2] + bboxCenter[2]
+    cssPosX + bboxCenter[0],
+    cssPosY + bboxCenter[1],
+    cssPosZ + bboxCenter[2]
   ];
   const baseLength = gizmoLengthForMesh(polygons);
   const shaftLengthCss = baseLength * size;
@@ -5934,7 +6506,7 @@ function PolyTransformControls({
           const dragging = draggingKey === spec.key;
           const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
           const backFacing = isAxisBackFacing(spec.cssAxis, spec.sign, rotX, rotY);
-          return /* @__PURE__ */ jsx12(
+          return /* @__PURE__ */ jsx14(
             TranslateArrow,
             {
               cssAxis: spec.cssAxis,
@@ -5966,7 +6538,7 @@ function PolyTransformControls({
           const hovered = hoveredKey === spec.key;
           const dragging = draggingKey === spec.key;
           const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
-          return /* @__PURE__ */ jsx12(
+          return /* @__PURE__ */ jsx14(
             TranslatePlane,
             {
               axisA: spec.axisA,
@@ -5998,7 +6570,7 @@ function PolyTransformControls({
           const hovered = hoveredKey === spec.key;
           const dragging = draggingKey === spec.key;
           const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
-          return /* @__PURE__ */ jsx12(
+          return /* @__PURE__ */ jsx14(
             RotateRing,
             {
               cssAxis: spec.cssAxis,
@@ -6043,7 +6615,7 @@ function TranslateArrow({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = useRef9({
+  const cbRef = useRef10({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6078,7 +6650,7 @@ function TranslateArrow({
       shaft: includeShaft
     });
   }, [cssAxis, sign, color, shaftLengthCss, includeShaft]);
-  const onPointerDown = useCallback7(
+  const onPointerDown = useCallback8(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -6107,7 +6679,7 @@ function TranslateArrow({
     },
     [cssAxis, sign, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     PolyMesh,
     {
       polygons,
@@ -6140,7 +6712,7 @@ function TranslatePlane({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = useRef9({
+  const cbRef = useRef10({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6179,7 +6751,7 @@ function TranslatePlane({
       color
     });
   }, [perpAxis, color, shaftLengthCss, rotX, rotY]);
-  const onPointerDown = useCallback7(
+  const onPointerDown = useCallback8(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -6208,7 +6780,7 @@ function TranslatePlane({
     },
     [axisA, axisB, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     PolyMesh,
     {
       polygons,
@@ -6237,7 +6809,7 @@ function RotateRing({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = useRef9({
+  const cbRef = useRef10({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6270,7 +6842,7 @@ function RotateRing({
   }, [cssAxis, color, radiusCss]);
   const ringInnerRatio = (1 - RING_HALF_THICKNESS_RATIO) / RING_QUAD_OUTER_RATIO;
   const ringOuterRatio = (1 + RING_HALF_THICKNESS_RATIO) / RING_QUAD_OUTER_RATIO;
-  const onPointerDown = useCallback7(
+  const onPointerDown = useCallback8(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -6297,7 +6869,7 @@ function RotateRing({
     },
     [cssAxis, target]
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     PolyMesh,
     {
       polygons,
@@ -6317,14 +6889,14 @@ function RotateRing({
 // src/select/Select.tsx
 import {
   createContext as createContext3,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext5,
   useEffect as useEffect10,
   useMemo as useMemo13,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState6
 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var SelectContext = createContext3(null);
 function PolySelect({
   multiple = false,
@@ -6337,13 +6909,13 @@ function PolySelect({
   style
 }) {
   const [selected, setSelectedState] = useState6([]);
-  const filterRef = useRef10(filter);
+  const filterRef = useRef11(filter);
   filterRef.current = filter;
-  const onChangeRef = useRef10(onChange);
+  const onChangeRef = useRef11(onChange);
   onChangeRef.current = onChange;
-  const multipleRef = useRef10(multiple);
+  const multipleRef = useRef11(multiple);
   multipleRef.current = multiple;
-  const apply = useCallback8((next) => {
+  const apply = useCallback9((next) => {
     const filtered = filterRef.current ? filterRef.current(next) : next;
     setSelectedState(filtered);
     if (onChangeRef.current) onChangeRef.current(filtered);
@@ -6381,14 +6953,14 @@ function PolySelect({
       has: (h) => selected.includes(h)
     };
   }, [selected, apply]);
-  const wrapperRef = useRef10(null);
+  const wrapperRef = useRef11(null);
   const cameraCtx = useContext5(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef;
-  const clearOnMissRef = useRef10(clearOnMiss);
+  const clearOnMissRef = useRef11(clearOnMiss);
   clearOnMissRef.current = clearOnMiss;
-  const onPointerMissedRef = useRef10(onPointerMissed);
+  const onPointerMissedRef = useRef11(onPointerMissed);
   onPointerMissedRef.current = onPointerMissed;
-  const findMeshUnderPoint2 = useCallback8(
+  const findMeshUnderPoint2 = useCallback9(
     (clientX, clientY) => findMeshUnderPoint(
       clientX,
       clientY,
@@ -6443,7 +7015,7 @@ function PolySelect({
     }
   };
   const wrapperStyle = { display: "contents", ...style };
-  return /* @__PURE__ */ jsx13(SelectContext.Provider, { value: api, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(SelectContext.Provider, { value: api, children: /* @__PURE__ */ jsx15(
     "div",
     {
       ref: wrapperRef,
@@ -6469,7 +7041,7 @@ function usePolySelectionApi() {
 // src/helpers/PolyAxesHelper.tsx
 import { useMemo as useMemo14 } from "react";
 import { axesHelperPolygons } from "@layoutit/polycss-core";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function PolyAxesHelper({
   size,
   thickness,
@@ -6482,14 +7054,13 @@ function PolyAxesHelper({
     () => axesHelperPolygons({ size, thickness, negative, xColor, yColor, zColor }),
     [size, thickness, negative, xColor, yColor, zColor]
   );
-  return /* @__PURE__ */ jsx14(PolyMesh, { polygons });
+  return /* @__PURE__ */ jsx16(PolyMesh, { polygons, merge: false });
 }
 
 // src/helpers/PolyDirectionalLightHelper.tsx
 import { useMemo as useMemo15 } from "react";
 import { octahedronPolygons as octahedronPolygons2 } from "@layoutit/polycss-core";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var TILE = 50;
+import { jsx as jsx17 } from "react/jsx-runtime";
 function PolyDirectionalLightHelper({
   light,
   target,
@@ -6508,12 +7079,13 @@ function PolyDirectionalLightHelper({
     const tx = target?.[0] ?? 0;
     const ty = target?.[1] ?? 0;
     const tz = target?.[2] ?? 0;
-    const worldX = tx + dy / len * distance;
-    const worldY = ty + dx / len * distance;
-    const worldZ = tz + dz / len * distance;
-    return [worldY * TILE, worldX * TILE, worldZ * TILE];
+    return [
+      tx + dx / len * distance,
+      ty + dy / len * distance,
+      tz + dz / len * distance
+    ];
   }, [light.direction, target, distance]);
-  return /* @__PURE__ */ jsx15(PolyMesh, { polygons, position: meshPosition });
+  return /* @__PURE__ */ jsx17(PolyMesh, { polygons, position: meshPosition, merge: false });
 }
 
 // src/styles/colorResolver.ts
@@ -6571,7 +7143,7 @@ function collectPolyRenderStats(root, optionsOrPolygonCount) {
     surfaceLeafCounts.clippedSolid += queryCount(scope, "i");
     surfaceLeafCounts.atlas += queryCount(scope, "s");
     surfaceLeafCounts.stableTriangle += queryCount(scope, "u");
-    shadowLeafCount += queryCount(scope, "q");
+    shadowLeafCount += queryCount(scope, "q, .polycss-shadow-svg");
     bucketCount += queryCount(scope, ".polycss-bucket");
   }
   const mountedPolygonLeafCount = surfaceLeafCounts.quad + surfaceLeafCounts.clippedSolid + surfaceLeafCounts.atlas + surfaceLeafCounts.stableTriangle;
@@ -6585,7 +7157,7 @@ function collectPolyRenderStats(root, optionsOrPolygonCount) {
 }
 
 // src/animation/usePolyAnimation.ts
-import { useEffect as useEffect11, useRef as useRef11, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect11, useRef as useRef12, useMemo as useMemo16 } from "react";
 import { createPolyAnimationMixer } from "@layoutit/polycss-core";
 function resolveRoot(rootArg) {
   if (!rootArg) return null;
@@ -6593,8 +7165,8 @@ function resolveRoot(rootArg) {
   return rootArg;
 }
 function usePolyAnimation(clips, controller, root) {
-  const internalRef = useRef11(null);
-  const mixerRef = useRef11(null);
+  const internalRef = useRef12(null);
+  const mixerRef = useRef12(null);
   useEffect11(() => {
     if (!clips || clips.length === 0 || !controller) {
       mixerRef.current = null;
@@ -6670,7 +7242,9 @@ import {
   normalizePolygons,
   mergePolygons as mergePolygons2,
   coverPlanarPolygons,
-  optimizeMeshPolygons,
+  optimizeMeshPolygons as optimizeMeshPolygons2,
+  optimizeMeshParseResult,
+  simplifyTriangleMeshPolygons,
   repairMeshSeams,
   seamFacetSplitPolygons,
   seamFacetSplitReport,
@@ -6691,6 +7265,7 @@ import {
   parseObj,
   parseMtl,
   parseGltf,
+  parseStl,
   bakeSolidTextureSamples,
   bakeSolidTextureSampledPolygons,
   loadMesh as loadMesh2,
@@ -6722,7 +7297,7 @@ import {
   planePolygons as planePolygons3,
   buildSceneContext as buildSceneContext2,
   computeSceneBbox as computeSceneBbox2,
-  BASE_TILE as BASE_TILE7,
+  BASE_TILE as BASE_TILE8,
   DEFAULT_CAMERA_STATE as DEFAULT_CAMERA_STATE2,
   DEFAULT_PROJECTION,
   normalizeInvertMultiplier,
@@ -6735,7 +7310,7 @@ import {
   LoopPingPong
 } from "@layoutit/polycss-core";
 export {
-  BASE_TILE7 as BASE_TILE,
+  BASE_TILE8 as BASE_TILE,
   CAMERA_BACKFACE_CULL_EPS,
   DEFAULT_CAMERA_STATE2 as DEFAULT_CAMERA_STATE,
   DEFAULT_PROJECTION,
@@ -6756,6 +7331,7 @@ export {
   PolyFirstPersonControls,
   PolyGround,
   PolyIcosahedron,
+  PolyIframe,
   PolyMapControls,
   PolyMesh,
   PolyOctahedron,
@@ -6810,7 +7386,8 @@ export {
   normalizePolygons,
   octahedronPolygons3 as octahedronPolygons,
   optimizeAnimatedMeshPolygons,
-  optimizeMeshPolygons,
+  optimizeMeshParseResult,
+  optimizeMeshPolygons2 as optimizeMeshPolygons,
   parseColor2 as parseColor,
   parseGltf,
   parseHexColor3 as parseHexColor,
@@ -6818,6 +7395,7 @@ export {
   parseObj,
   parsePureColor4 as parsePureColor,
   parseRgbColor,
+  parseStl,
   parseVox,
   planePolygons3 as planePolygons,
   pointInMeshElement,
@@ -6833,6 +7411,7 @@ export {
   seamOverlapPolygons,
   seamOverlapReport,
   shadeColor,
+  simplifyTriangleMeshPolygons,
   tetrahedronPolygons2 as tetrahedronPolygons,
   torusPolygons2 as torusPolygons,
   useCameraContext,