npm - @layoutit/polycss-react - Versions diffs - 0.2.1 → 0.2.3 - Mend

@layoutit/polycss-react 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js CHANGED Viewed

@@ -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]);
+  }, [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)
+    };
+  }
   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,41 @@ 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,
+  buildPolyMeshTransform,
+  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 +2812,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 +2888,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 +2901,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 +3162,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 +3169,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 +3623,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;
@@ -3324,25 +3636,6 @@ function solidPaintVars(defaults) {
   }
   return Object.keys(out).length > 0 ? out : null;
 }
-function buildTransform(position, scale, rotation) {
-  const parts = [];
-  if (position) {
-    parts.push(`translate3d(${position[0]}px, ${position[1]}px, ${position[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 (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)`);
-  }
-  return parts.length > 0 ? parts.join(" ") : void 0;
-}
 function recenterPolygons(polygons) {
   if (polygons.length === 0) return polygons;
   const bbox = computeSceneBbox(polygons);
@@ -3367,11 +3660,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 +3703,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;
@@ -3421,36 +3723,15 @@ var PolyMesh = forwardRef(function PolyMesh2({
     () => autoCenter ? recenterPolygons(sourcePolygons) : sourcePolygons,
     [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 transform = buildPolyMeshTransform({ 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 +3763,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 +3887,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 +3906,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 +3930,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 +4046,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 +4076,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
       }
       d += "Z";
     }
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "svg",
       {
         className: "polycss-shadow polycss-shadow-svg",
@@ -3757,16 +4092,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 +4109,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 +4247,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 +4289,6 @@ var PolyMesh = forwardRef(function PolyMesh2({
   ]);
   const wrapperStyle = {
     transform,
-    ...transformOrigin ? { transformOrigin } : null,
     ...dynamicLightOverride,
     ...style,
     ...defaultPaintVars
@@ -3844,10 +4296,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 +4310,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 +4323,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 +4373,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
       );
     }
     if (fetched.error && fetched.polygons.length === 0) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         "div",
         {
           ref: wrapperRef,
@@ -3926,6 +4396,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
       ...wrapperHandlers,
       children: [
         shadowSvgNode,
+        portaledReceiverShadowSvgs,
         renderedPolygons,
         staticChildren
       ]
@@ -3937,12 +4408,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 +4509,7 @@ function PolyGround({
     ];
     return [{ vertices, color }];
   }, [size, z, center, color]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     PolyMesh,
     {
       polygons,
@@ -3982,8 +4530,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 +4583,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 +4714,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 +4730,7 @@ function PolyInner({
   } else {
     const atlasEntry = textureAtlas.entries[0];
     if (atlasEntry) {
-      front = /* @__PURE__ */ jsx10(
+      front = /* @__PURE__ */ jsx12(
         TextureAtlasPoly,
         {
           entry: atlasEntry,
@@ -4196,7 +4744,7 @@ function PolyInner({
         }
       );
     } else if (atlasPlan && !atlasPlan.texture) {
-      front = isSolidTrianglePlan2(atlasPlan) ? /* @__PURE__ */ jsx10(
+      front = isSolidTrianglePlan2(atlasPlan) ? /* @__PURE__ */ jsx12(
         TextureTrianglePoly,
         {
           entry: atlasPlan,
@@ -4207,7 +4755,7 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : isProjectiveQuadPlan(atlasPlan) ? /* @__PURE__ */ jsx10(
+      ) : isProjectiveQuadPlan(atlasPlan) ? /* @__PURE__ */ jsx12(
         TextureProjectiveSolidPoly,
         {
           entry: atlasPlan,
@@ -4218,10 +4766,11 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : /* @__PURE__ */ jsx10(
+      ) : /* @__PURE__ */ jsx12(
         TextureBorderShapePoly,
         {
           entry: atlasPlan,
+          textureLighting,
           className,
           style: styleProp,
           domAttrs,
@@ -4233,7 +4782,7 @@ function PolyInner({
   }
   if (!front) return null;
   if (!wrapperTransform) return front;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "polycss-poly-wrapper",
@@ -4246,7 +4795,7 @@ function PolyInner({
     }
   );
 }
-var Poly = memo8(PolyInner);
+var Poly = memo9(PolyInner);
 // src/shapes/PolyShapes.tsx
 import { useMemo as useMemo11 } from "react";
@@ -4263,7 +4812,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 +4831,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 +4846,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 +4861,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 +4874,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 +4886,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 +4898,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 +4910,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 +4923,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 +4938,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 +4952,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 +4967,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 +5032,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 +5148,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 +5386,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 +5400,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 +5410,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 +5559,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 +5616,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 +5741,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 +5757,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 +5814,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 +5940,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 +5957,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 +6304,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 +6435,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 +6486,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 +6518,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 +6550,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 +6595,7 @@ function TranslateArrow({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = useRef9({
+  const cbRef = useRef10({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6078,7 +6630,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 +6659,7 @@ function TranslateArrow({
     },
     [cssAxis, sign, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     PolyMesh,
     {
       polygons,
@@ -6140,7 +6692,7 @@ function TranslatePlane({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = useRef9({
+  const cbRef = useRef10({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6179,7 +6731,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 +6760,7 @@ function TranslatePlane({
     },
     [axisA, axisB, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     PolyMesh,
     {
       polygons,
@@ -6237,7 +6789,7 @@ function RotateRing({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = useRef9({
+  const cbRef = useRef10({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6270,7 +6822,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 +6849,7 @@ function RotateRing({
     },
     [cssAxis, target]
   );
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     PolyMesh,
     {
       polygons,
@@ -6317,14 +6869,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 +6889,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 +6933,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 +6995,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 +7021,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 +7034,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 +7059,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 +7123,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 +7137,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 +7145,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 +7222,9 @@ import {
   normalizePolygons,
   mergePolygons as mergePolygons2,
   coverPlanarPolygons,
-  optimizeMeshPolygons,
+  optimizeMeshPolygons as optimizeMeshPolygons2,
+  optimizeMeshParseResult,
+  simplifyTriangleMeshPolygons,
   repairMeshSeams,
   seamFacetSplitPolygons,
   seamFacetSplitReport,
@@ -6691,6 +7245,7 @@ import {
   parseObj,
   parseMtl,
   parseGltf,
+  parseStl,
   bakeSolidTextureSamples,
   bakeSolidTextureSampledPolygons,
   loadMesh as loadMesh2,
@@ -6721,8 +7276,9 @@ import {
   torusPolygons as torusPolygons2,
   planePolygons as planePolygons3,
   buildSceneContext as buildSceneContext2,
+  buildPolyMeshTransform as buildPolyMeshTransform2,
   computeSceneBbox as computeSceneBbox2,
-  BASE_TILE as BASE_TILE7,
+  BASE_TILE as BASE_TILE8,
   DEFAULT_CAMERA_STATE as DEFAULT_CAMERA_STATE2,
   DEFAULT_PROJECTION,
   normalizeInvertMultiplier,
@@ -6732,10 +7288,12 @@ import {
   DEFAULT_SEAM_OVERLAP_OPTIONS,
   LoopOnce,
   LoopRepeat,
-  LoopPingPong
+  LoopPingPong,
+  worldDirectionToCss as worldDirectionToCss3,
+  worldPositionToCss
 } 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 +7314,7 @@ export {
   PolyFirstPersonControls,
   PolyGround,
   PolyIcosahedron,
+  PolyIframe,
   PolyMapControls,
   PolyMesh,
   PolyOctahedron,
@@ -6777,6 +7336,7 @@ export {
   bakeSolidTextureSampledPolygons,
   bakeSolidTextureSamples,
   boxPolygons2 as boxPolygons,
+  buildPolyMeshTransform2 as buildPolyMeshTransform,
   buildSceneContext2 as buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
@@ -6810,7 +7370,8 @@ export {
   normalizePolygons,
   octahedronPolygons3 as octahedronPolygons,
   optimizeAnimatedMeshPolygons,
-  optimizeMeshPolygons,
+  optimizeMeshParseResult,
+  optimizeMeshPolygons2 as optimizeMeshPolygons,
   parseColor2 as parseColor,
   parseGltf,
   parseHexColor3 as parseHexColor,
@@ -6818,6 +7379,7 @@ export {
   parseObj,
   parsePureColor4 as parsePureColor,
   parseRgbColor,
+  parseStl,
   parseVox,
   planePolygons3 as planePolygons,
   pointInMeshElement,
@@ -6833,6 +7395,7 @@ export {
   seamOverlapPolygons,
   seamOverlapReport,
   shadeColor,
+  simplifyTriangleMeshPolygons,
   tetrahedronPolygons2 as tetrahedronPolygons,
   torusPolygons2 as torusPolygons,
   useCameraContext,
@@ -6842,5 +7405,7 @@ export {
   usePolyMesh,
   usePolySceneContext,
   usePolySelect,
-  usePolySelectionApi
+  usePolySelectionApi,
+  worldDirectionToCss3 as worldDirectionToPolyCss,
+  worldPositionToCss as worldPositionToPolyCss
 };