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.cjs CHANGED Viewed

@@ -20,15 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BASE_TILE: () => import_polycss_core24.BASE_TILE,
-  CAMERA_BACKFACE_CULL_EPS: () => import_polycss_core24.CAMERA_BACKFACE_CULL_EPS,
-  DEFAULT_CAMERA_STATE: () => import_polycss_core24.DEFAULT_CAMERA_STATE,
-  DEFAULT_PROJECTION: () => import_polycss_core24.DEFAULT_PROJECTION,
-  DEFAULT_SEAM_FACET_SPLIT_OPTIONS: () => import_polycss_core24.DEFAULT_SEAM_FACET_SPLIT_OPTIONS,
-  DEFAULT_SEAM_OVERLAP_OPTIONS: () => import_polycss_core24.DEFAULT_SEAM_OVERLAP_OPTIONS,
-  LoopOnce: () => import_polycss_core24.LoopOnce,
-  LoopPingPong: () => import_polycss_core24.LoopPingPong,
-  LoopRepeat: () => import_polycss_core24.LoopRepeat,
+  BASE_TILE: () => import_polycss_core27.BASE_TILE,
+  CAMERA_BACKFACE_CULL_EPS: () => import_polycss_core27.CAMERA_BACKFACE_CULL_EPS,
+  DEFAULT_CAMERA_STATE: () => import_polycss_core27.DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION: () => import_polycss_core27.DEFAULT_PROJECTION,
+  DEFAULT_SEAM_FACET_SPLIT_OPTIONS: () => import_polycss_core27.DEFAULT_SEAM_FACET_SPLIT_OPTIONS,
+  DEFAULT_SEAM_OVERLAP_OPTIONS: () => import_polycss_core27.DEFAULT_SEAM_OVERLAP_OPTIONS,
+  LoopOnce: () => import_polycss_core27.LoopOnce,
+  LoopPingPong: () => import_polycss_core27.LoopPingPong,
+  LoopRepeat: () => import_polycss_core27.LoopRepeat,
   Poly: () => Poly,
   PolyAxesHelper: () => PolyAxesHelper,
   PolyBox: () => PolyBox,
@@ -41,6 +41,7 @@ __export(src_exports, {
   PolyFirstPersonControls: () => PolyFirstPersonControls,
   PolyGround: () => PolyGround,
   PolyIcosahedron: () => PolyIcosahedron,
+  PolyIframe: () => PolyIframe,
   PolyMapControls: () => PolyMapControls,
   PolyMesh: () => PolyMesh,
   PolyOctahedron: () => PolyOctahedron,
@@ -55,71 +56,75 @@ __export(src_exports, {
   PolyTetrahedron: () => PolyTetrahedron,
   PolyTorus: () => PolyTorus,
   PolyTransformControls: () => PolyTransformControls,
-  VOXEL_CAMERA_CULL_AXIS_EPS: () => import_polycss_core24.VOXEL_CAMERA_CULL_AXIS_EPS,
-  VOXEL_CAMERA_CULL_NORMAL_LIMIT: () => import_polycss_core24.VOXEL_CAMERA_CULL_NORMAL_LIMIT,
-  arrowPolygons: () => import_polycss_core24.arrowPolygons,
-  axesHelperPolygons: () => import_polycss_core24.axesHelperPolygons,
-  bakeSolidTextureSampledPolygons: () => import_polycss_core24.bakeSolidTextureSampledPolygons,
-  bakeSolidTextureSamples: () => import_polycss_core24.bakeSolidTextureSamples,
-  boxPolygons: () => import_polycss_core24.boxPolygons,
-  buildSceneContext: () => import_polycss_core24.buildSceneContext,
-  cameraCullNormalGroups: () => import_polycss_core24.cameraCullNormalGroups,
-  cameraCullNormalGroupsFromPolygons: () => import_polycss_core24.cameraCullNormalGroupsFromPolygons,
-  cameraCullNormalKey: () => import_polycss_core24.cameraCullNormalKey,
-  cameraCullVisibleSignature: () => import_polycss_core24.cameraCullVisibleSignature,
-  cameraFacingDepth: () => import_polycss_core24.cameraFacingDepth,
-  clampChannel: () => import_polycss_core24.clampChannel,
+  VOXEL_CAMERA_CULL_AXIS_EPS: () => import_polycss_core27.VOXEL_CAMERA_CULL_AXIS_EPS,
+  VOXEL_CAMERA_CULL_NORMAL_LIMIT: () => import_polycss_core27.VOXEL_CAMERA_CULL_NORMAL_LIMIT,
+  arrowPolygons: () => import_polycss_core27.arrowPolygons,
+  axesHelperPolygons: () => import_polycss_core27.axesHelperPolygons,
+  bakeSolidTextureSampledPolygons: () => import_polycss_core27.bakeSolidTextureSampledPolygons,
+  bakeSolidTextureSamples: () => import_polycss_core27.bakeSolidTextureSamples,
+  boxPolygons: () => import_polycss_core27.boxPolygons,
+  buildPolyMeshTransform: () => import_polycss_core27.buildPolyMeshTransform,
+  buildSceneContext: () => import_polycss_core27.buildSceneContext,
+  cameraCullNormalGroups: () => import_polycss_core27.cameraCullNormalGroups,
+  cameraCullNormalGroupsFromPolygons: () => import_polycss_core27.cameraCullNormalGroupsFromPolygons,
+  cameraCullNormalKey: () => import_polycss_core27.cameraCullNormalKey,
+  cameraCullVisibleSignature: () => import_polycss_core27.cameraCullVisibleSignature,
+  cameraFacingDepth: () => import_polycss_core27.cameraFacingDepth,
+  clampChannel: () => import_polycss_core27.clampChannel,
   collectPolyRenderStats: () => collectPolyRenderStats,
-  computeSceneBbox: () => import_polycss_core24.computeSceneBbox,
-  computeShapeLighting: () => import_polycss_core24.computeShapeLighting,
-  computeTexturePaintMetrics: () => import_polycss_core24.computeTexturePaintMetrics,
-  conePolygons: () => import_polycss_core24.conePolygons,
-  coverPlanarPolygons: () => import_polycss_core24.coverPlanarPolygons,
-  createIsometricCamera: () => import_polycss_core24.createIsometricCamera,
-  createPolyAnimationMixer: () => import_polycss_core24.createPolyAnimationMixer,
-  cullInteriorPolygons: () => import_polycss_core24.cullInteriorPolygons,
-  cylinderPolygons: () => import_polycss_core24.cylinderPolygons,
-  dodecahedronPolygons: () => import_polycss_core24.dodecahedronPolygons,
+  computeSceneBbox: () => import_polycss_core27.computeSceneBbox,
+  computeShapeLighting: () => import_polycss_core27.computeShapeLighting,
+  computeTexturePaintMetrics: () => import_polycss_core27.computeTexturePaintMetrics,
+  conePolygons: () => import_polycss_core27.conePolygons,
+  coverPlanarPolygons: () => import_polycss_core27.coverPlanarPolygons,
+  createIsometricCamera: () => import_polycss_core27.createIsometricCamera,
+  createPolyAnimationMixer: () => import_polycss_core27.createPolyAnimationMixer,
+  cullInteriorPolygons: () => import_polycss_core27.cullInteriorPolygons,
+  cylinderPolygons: () => import_polycss_core27.cylinderPolygons,
+  dodecahedronPolygons: () => import_polycss_core27.dodecahedronPolygons,
   findMeshUnderPoint: () => findMeshUnderPoint,
   findPolyMeshHandle: () => findPolyMeshHandle,
-  formatColor: () => import_polycss_core24.formatColor,
-  icosahedronPolygons: () => import_polycss_core24.icosahedronPolygons,
+  formatColor: () => import_polycss_core27.formatColor,
+  icosahedronPolygons: () => import_polycss_core27.icosahedronPolygons,
   injectPolyBaseStyles: () => injectPolyBaseStyles,
-  inverseRotateVec3: () => import_polycss_core24.inverseRotateVec3,
-  isAxisAlignedSurfaceNormal: () => import_polycss_core24.isAxisAlignedSurfaceNormal,
-  isVoxelCameraCullableNormalGroups: () => import_polycss_core24.isVoxelCameraCullableNormalGroups,
-  loadMesh: () => import_polycss_core24.loadMesh,
-  mergePolygons: () => import_polycss_core24.mergePolygons,
-  normalFacesCamera: () => import_polycss_core24.normalFacesCamera,
-  normalizeInvertMultiplier: () => import_polycss_core24.normalizeInvertMultiplier,
-  normalizePolygons: () => import_polycss_core24.normalizePolygons,
-  octahedronPolygons: () => import_polycss_core24.octahedronPolygons,
-  optimizeAnimatedMeshPolygons: () => import_polycss_core24.optimizeAnimatedMeshPolygons,
-  optimizeMeshPolygons: () => import_polycss_core24.optimizeMeshPolygons,
-  parseColor: () => import_polycss_core24.parseColor,
-  parseGltf: () => import_polycss_core24.parseGltf,
-  parseHexColor: () => import_polycss_core24.parseHexColor,
-  parseMtl: () => import_polycss_core24.parseMtl,
-  parseObj: () => import_polycss_core24.parseObj,
-  parsePureColor: () => import_polycss_core24.parsePureColor,
-  parseRgbColor: () => import_polycss_core24.parseRgbColor,
-  parseVox: () => import_polycss_core24.parseVox,
-  planePolygons: () => import_polycss_core24.planePolygons,
+  inverseRotateVec3: () => import_polycss_core27.inverseRotateVec3,
+  isAxisAlignedSurfaceNormal: () => import_polycss_core27.isAxisAlignedSurfaceNormal,
+  isVoxelCameraCullableNormalGroups: () => import_polycss_core27.isVoxelCameraCullableNormalGroups,
+  loadMesh: () => import_polycss_core27.loadMesh,
+  mergePolygons: () => import_polycss_core27.mergePolygons,
+  normalFacesCamera: () => import_polycss_core27.normalFacesCamera,
+  normalizeInvertMultiplier: () => import_polycss_core27.normalizeInvertMultiplier,
+  normalizePolygons: () => import_polycss_core27.normalizePolygons,
+  octahedronPolygons: () => import_polycss_core27.octahedronPolygons,
+  optimizeAnimatedMeshPolygons: () => import_polycss_core27.optimizeAnimatedMeshPolygons,
+  optimizeMeshParseResult: () => import_polycss_core27.optimizeMeshParseResult,
+  optimizeMeshPolygons: () => import_polycss_core27.optimizeMeshPolygons,
+  parseColor: () => import_polycss_core27.parseColor,
+  parseGltf: () => import_polycss_core27.parseGltf,
+  parseHexColor: () => import_polycss_core27.parseHexColor,
+  parseMtl: () => import_polycss_core27.parseMtl,
+  parseObj: () => import_polycss_core27.parseObj,
+  parsePureColor: () => import_polycss_core27.parsePureColor,
+  parseRgbColor: () => import_polycss_core27.parseRgbColor,
+  parseStl: () => import_polycss_core27.parseStl,
+  parseVox: () => import_polycss_core27.parseVox,
+  planePolygons: () => import_polycss_core27.planePolygons,
   pointInMeshElement: () => pointInMeshElement,
-  polygonCssSurfaceNormal: () => import_polycss_core24.polygonCssSurfaceNormal,
-  polygonFaces: () => import_polycss_core24.polygonFaces,
-  polygonFacesCamera: () => import_polycss_core24.polygonFacesCamera,
-  repairMeshSeams: () => import_polycss_core24.repairMeshSeams,
-  ringPolygons: () => import_polycss_core24.ringPolygons,
-  rotateVec3: () => import_polycss_core24.rotateVec3,
-  seamFacetSplitPolygons: () => import_polycss_core24.seamFacetSplitPolygons,
-  seamFacetSplitReport: () => import_polycss_core24.seamFacetSplitReport,
-  seamOverlapDiagnostics: () => import_polycss_core24.seamOverlapDiagnostics,
-  seamOverlapPolygons: () => import_polycss_core24.seamOverlapPolygons,
-  seamOverlapReport: () => import_polycss_core24.seamOverlapReport,
-  shadeColor: () => import_polycss_core24.shadeColor,
-  tetrahedronPolygons: () => import_polycss_core24.tetrahedronPolygons,
-  torusPolygons: () => import_polycss_core24.torusPolygons,
+  polygonCssSurfaceNormal: () => import_polycss_core27.polygonCssSurfaceNormal,
+  polygonFaces: () => import_polycss_core27.polygonFaces,
+  polygonFacesCamera: () => import_polycss_core27.polygonFacesCamera,
+  repairMeshSeams: () => import_polycss_core27.repairMeshSeams,
+  ringPolygons: () => import_polycss_core27.ringPolygons,
+  rotateVec3: () => import_polycss_core27.rotateVec3,
+  seamFacetSplitPolygons: () => import_polycss_core27.seamFacetSplitPolygons,
+  seamFacetSplitReport: () => import_polycss_core27.seamFacetSplitReport,
+  seamOverlapDiagnostics: () => import_polycss_core27.seamOverlapDiagnostics,
+  seamOverlapPolygons: () => import_polycss_core27.seamOverlapPolygons,
+  seamOverlapReport: () => import_polycss_core27.seamOverlapReport,
+  shadeColor: () => import_polycss_core27.shadeColor,
+  simplifyTriangleMeshPolygons: () => import_polycss_core27.simplifyTriangleMeshPolygons,
+  tetrahedronPolygons: () => import_polycss_core27.tetrahedronPolygons,
+  torusPolygons: () => import_polycss_core27.torusPolygons,
   useCameraContext: () => useCameraContext,
   usePolyAnimation: () => usePolyAnimation,
   usePolyCamera: () => usePolyCamera,
@@ -127,7 +132,9 @@ __export(src_exports, {
   usePolyMesh: () => usePolyMesh,
   usePolySceneContext: () => usePolySceneContext,
   usePolySelect: () => usePolySelect,
-  usePolySelectionApi: () => usePolySelectionApi
+  usePolySelectionApi: () => usePolySelectionApi,
+  worldDirectionToPolyCss: () => import_polycss_core27.worldDirectionToCss,
+  worldPositionToPolyCss: () => import_polycss_core27.worldPositionToCss
 });
 module.exports = __toCommonJS(src_exports);
@@ -231,8 +238,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();
@@ -251,8 +259,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,
@@ -265,7 +274,7 @@ function usePolyCamera(options) {
 // src/camera/PolyPerspectiveCamera.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var DEFAULT_PERSPECTIVE = 8e3;
+var DEFAULT_PERSPECTIVE = 32e3;
 function PolyPerspectiveCameraInner({
   zoom,
   target,
@@ -331,7 +340,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__ */ (0, import_jsx_runtime2.jsx)(PolyCameraContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
@@ -346,8 +360,8 @@ function PolyOrthographicCameraInner({
 var PolyOrthographicCamera = (0, import_react5.memo)(PolyOrthographicCameraInner);
 // src/scene/PolyScene.tsx
-var import_react13 = require("react");
-var import_polycss_core12 = require("@layoutit/polycss-core");
+var import_react14 = require("react");
+var import_polycss_core13 = require("@layoutit/polycss-core");
 // src/scene/useSceneContext.ts
 var import_react6 = require("react");
@@ -400,21 +414,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;
@@ -436,6 +453,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 */
 /*
@@ -521,19 +549,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 */
@@ -638,22 +681,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);
@@ -672,35 +726,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;
@@ -723,11 +790,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
@@ -740,7 +808,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)
@@ -768,24 +836,16 @@ 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);
 }
 `;
 // src/scene/atlas/index.tsx
-var import_polycss_core11 = require("@layoutit/polycss-core");
+var import_polycss_core12 = require("@layoutit/polycss-core");
 // src/scene/atlas/detection.ts
 var import_polycss_core3 = require("@layoutit/polycss-core");
@@ -802,6 +862,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;
@@ -811,6 +872,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 ?? "";
@@ -855,6 +920,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);
@@ -867,9 +934,12 @@ function isSolidTriangleSupported(doc) {
 // src/scene/atlas/filterPlans.ts
 var import_polycss_core4 = require("@layoutit/polycss-core");
 function filterAtlasPlans(plans, textureLighting, disabled, doc) {
+  const d = doc ?? (typeof document !== "undefined" ? document : null);
   return (0, import_polycss_core4.filterAtlasPlans)(plans, textureLighting, disabled, {
     solidTriangleSupported: isSolidTriangleSupported(doc),
-    borderShapeSupported: isBorderShapeSupported(doc)
+    projectiveQuadSupported: doc ? projectiveQuadSupported(doc) : true,
+    borderShapeSupported: isBorderShapeSupported(doc),
+    cornerShapeSupported: d ? cornerShapeSupported(d) : false
   });
 }
@@ -922,16 +992,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 = (0, import_polycss_core6.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;
@@ -1339,6 +1422,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) {
@@ -1348,7 +1440,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 = (0, import_polycss_core7.parsePureColor)(hex);
@@ -1763,9 +1883,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
   };
 }
@@ -1994,6 +2115,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);
@@ -2003,8 +2125,8 @@ function updateStableTriangleDom(root, polygons, options = {}) {
 // src/scene/atlas/paintDefaults.ts
 var import_polycss_core8 = require("@layoutit/polycss-core");
-function computeTextureAtlasPlan(polygon, index, options = {}) {
-  return (0, import_polycss_core8.computeTextureAtlasPlanPublic)(polygon, index, options);
+function computeTextureAtlasPlan(polygon, index, options = {}, basisHint) {
+  return (0, import_polycss_core8.computeTextureAtlasPlanPublic)(polygon, index, options, void 0, basisHint);
 }
 function getSolidPaintDefaults(plans, textureLighting, strategies) {
   const disabled = new Set(strategies?.disable ?? []);
@@ -2016,20 +2138,40 @@ var import_react7 = require("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 = (0, import_react7.useMemo)(
     () => new Set(strategies?.disable ?? []),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [strategies?.disable?.join(",")]
   );
   const atlasPlans = (0, import_react7.useMemo)(
-    () => filterAtlasPlans(plans, textureLighting, disabled),
+    () => filterAtlasPlans(
+      plans,
+      textureLighting,
+      disabled,
+      typeof document !== "undefined" ? document : null
+    ),
     [plans, textureLighting, disabled]
   );
   const { packed, atlasScale } = (0, import_react7.useMemo)(
@@ -2040,38 +2182,93 @@ function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies
     ),
     [atlasPlans, textureQualityInput]
   );
-  const [pages, setPages] = (0, import_react7.useState)(
-    () => pageShells(packed.pages)
-  );
+  const [pages, setPages] = (0, import_react7.useState)(() => pageShells(packed.pages));
+  const [frame, setFrame] = (0, import_react7.useState)(() => ({
+    plans,
+    entries: packed.entries,
+    pages: pageShells(packed.pages)
+  }));
+  const shownUrls = (0, import_react7.useRef)([]);
+  const seqRef = (0, import_react7.useRef)(0);
+  const mountedRef = (0, import_react7.useRef)(true);
   (0, import_react7.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      for (const url of shownUrls.current) URL.revokeObjectURL(url);
+      shownUrls.current = [];
+    };
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    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)
@@ -2102,6 +2299,7 @@ var TextureTrianglePoly = (0, import_react8.memo)(function TextureTrianglePoly2(
     {
       className: elementClassName,
       style: { ...triangleStyle, ...styleProp },
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2133,6 +2331,7 @@ function orderBrushInlineStyle(el) {
 }
 var TextureBorderShapePoly = (0, import_react9.memo)(function TextureBorderShapePoly2({
   entry,
+  textureLighting,
   solidPaintDefaults,
   className,
   style: styleProp,
@@ -2145,7 +2344,9 @@ var TextureBorderShapePoly = (0, import_react9.memo)(function TextureBorderShape
   const bDisabled = disabledStrategies?.has("b") ?? false;
   const useIForFullRect = bDisabled && isBorderShapeSupported();
   const borderShape = !fullRect || useIForFullRect ? (0, import_polycss_core9.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 = (0, import_react9.useCallback)((el) => {
     if (!el) return;
     if (borderShape) el.style.setProperty("border-shape", borderShape);
@@ -2155,8 +2356,25 @@ var TextureBorderShapePoly = (0, import_react9.memo)(function TextureBorderShape
   const transform = borderShape ? (0, import_polycss_core9.formatBorderShapeEntryMatrix)(entry) : (0, import_polycss_core9.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(
@@ -2169,6 +2387,7 @@ var TextureBorderShapePoly = (0, import_react9.memo)(function TextureBorderShape
       {
         className: elementClassName,
         style,
+        "data-poly-index": entry.index,
         ...domEventHandlers,
         ...dataAttrs,
         ...domAttrs
@@ -2181,6 +2400,7 @@ var TextureBorderShapePoly = (0, import_react9.memo)(function TextureBorderShape
       ref: setElementRef,
       className: elementClassName,
       style,
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2210,7 +2430,8 @@ var TextureProjectiveSolidPoly = (0, import_react10.memo)(function TextureProjec
     // 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),
@@ -2235,6 +2456,7 @@ var TextureProjectiveSolidPoly = (0, import_react10.memo)(function TextureProjec
     {
       className: elementClassName,
       style,
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2242,11 +2464,69 @@ var TextureProjectiveSolidPoly = (0, import_react10.memo)(function TextureProjec
   );
 });
-// src/scene/atlas/atlasPoly.tsx
+// src/scene/atlas/cornerShapeSolid.tsx
 var import_react11 = require("react");
 var import_polycss_core10 = require("@layoutit/polycss-core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var TextureAtlasPoly = (0, import_react11.memo)(function TextureAtlasPoly2({
+function formatPaintCss(entry, textureLighting, solidPaintDefaults) {
+  if (textureLighting === "dynamic") {
+    const base = (0, import_polycss_core10.parseHex)(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 ((0, import_polycss_core10.rgbKey)(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 = (0, import_react11.memo)(function TextureCornerShapeSolidPoly2({
+  entry,
+  geometry,
+  textureLighting,
+  solidPaintDefaults,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const cornerShapeCss = (0, import_polycss_core10.formatCornerShapeElementStyle)(entry, geometry);
+  const paintCss = formatPaintCss(entry, textureLighting, solidPaintDefaults);
+  const pointerCss = pointerEvents === "none" ? ";pointer-events:none" : "";
+  const fullCss = cornerShapeCss + paintCss + pointerCss;
+  const setRef = (0, import_react11.useCallback)((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__ */ (0, import_jsx_runtime6.jsx)(
+    "u",
+    {
+      ref: setRef,
+      className: elementClassName,
+      "data-poly-index": entry.index,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+});
+// src/scene/atlas/atlasPoly.tsx
+var import_react12 = require("react");
+var import_polycss_core11 = require("@layoutit/polycss-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TextureAtlasPoly = (0, import_react12.memo)(function TextureAtlasPoly2({
   entry,
   page,
   textureLighting,
@@ -2262,17 +2542,23 @@ var TextureAtlasPoly = (0, import_react11.memo)(function TextureAtlasPoly2({
   const atlasCanonicalSize = entry.atlasCanonicalSize ?? ATLAS_CANONICAL_SIZE_EXPLICIT;
   const atlasWidth = entry.canvasW || 1;
   const atlasHeight = entry.canvasH || 1;
-  const atlasPosition = page ? `${(0, import_polycss_core10.formatCssLengthPx)(-entry.x / atlasWidth * atlasCanonicalSize)} ${(0, import_polycss_core10.formatCssLengthPx)(-entry.y / atlasHeight * atlasCanonicalSize)}` : void 0;
-  const atlasSize = page ? `${(0, import_polycss_core10.formatCssLengthPx)(page.width / atlasWidth * atlasCanonicalSize)} ${(0, import_polycss_core10.formatCssLengthPx)(page.height / atlasHeight * atlasCanonicalSize)}` : void 0;
+  const atlasPosition = page ? `${(0, import_polycss_core11.formatCssLengthPx)(-entry.x / atlasWidth * atlasCanonicalSize)} ${(0, import_polycss_core11.formatCssLengthPx)(-entry.y / atlasHeight * atlasCanonicalSize)}` : void 0;
+  const atlasSize = page ? `${(0, import_polycss_core11.formatCssLengthPx)(page.width / atlasWidth * atlasCanonicalSize)} ${(0, import_polycss_core11.formatCssLengthPx)(page.height / atlasHeight * atlasCanonicalSize)}` : void 0;
   const dynamicMask = dynamic && page?.url ? `url(${page.url})` : void 0;
   const background = !dynamic && page?.url ? `url(${page.url}) ${atlasPosition} / ${atlasSize} no-repeat` : void 0;
   const style = {
-    transform: (0, import_polycss_core10.formatMatrix3d)(entry.atlasMatrix),
+    transform: (0, import_polycss_core11.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),
@@ -2297,11 +2583,12 @@ var TextureAtlasPoly = (0, import_react11.memo)(function TextureAtlasPoly2({
     Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
   ) : {};
   const elementClassName = className?.trim() || void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "s",
     {
       className: elementClassName,
       style,
+      "data-poly-index": entry.index,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2310,14 +2597,14 @@ var TextureAtlasPoly = (0, import_react11.memo)(function TextureAtlasPoly2({
 });
 // src/scene/sceneContext.ts
-var import_react12 = require("react");
-var PolySceneContext = (0, import_react12.createContext)(null);
+var import_react13 = require("react");
+var PolySceneContext = (0, import_react13.createContext)(null);
 function usePolySceneContext2() {
-  return (0, import_react12.useContext)(PolySceneContext);
+  return (0, import_react13.useContext)(PolySceneContext);
 }
 // src/scene/PolyScene.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function PolySceneInner({
   polygons: polygonsProp,
   centerPolygons: centerPolygonsProp,
@@ -2329,7 +2616,7 @@ function PolySceneInner({
   ambientLight,
   textureLighting = "baked",
   textureQuality,
-  seamBleed = import_polycss_core12.DEFAULT_SEAM_BLEED,
+  seamBleed = import_polycss_core13.DEFAULT_SEAM_BLEED,
   strategies,
   autoCenter = false,
   shadow,
@@ -2343,27 +2630,29 @@ function PolySceneInner({
   debugShowBackfaces
 }) {
   const { store, sceneElRef, applyTransformDirect } = useCameraContext();
-  const localSceneRef = (0, import_react13.useCallback)(
+  const [sceneEl, setSceneEl] = (0, import_react14.useState)(null);
+  const localSceneRef = (0, import_react14.useCallback)(
     (el) => {
       sceneElRef.current = el;
+      setSceneEl(el);
     },
     [sceneElRef]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const el = sceneElRef.current;
     if (!el) return;
     el.classList.toggle("polycss-debug-show-backfaces", !!debugShowBackfaces);
   }, [debugShowBackfaces, sceneElRef]);
-  const injectedRef = (0, import_react13.useRef)(false);
-  (0, import_react13.useEffect)(() => {
+  const injectedRef = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
     if (injectedRef.current) return;
     if (typeof document !== "undefined") {
       injectPolyBaseStyles(document);
       injectedRef.current = true;
     }
   }, []);
-  const inputPolygons = (0, import_react13.useMemo)(() => polygonsProp ?? [], [polygonsProp]);
-  const centerInputPolygons = (0, import_react13.useMemo)(
+  const inputPolygons = (0, import_react14.useMemo)(() => polygonsProp ?? [], [polygonsProp]);
+  const centerInputPolygons = (0, import_react14.useMemo)(
     () => centerPolygonsProp ?? null,
     [centerPolygonsProp]
   );
@@ -2377,7 +2666,7 @@ function PolySceneInner({
   const sceneBbox = centerInputPolygons ? centerSceneBbox : renderSceneBbox;
   const directionalForAtlas = textureLighting === "dynamic" ? void 0 : directionalLight;
   const ambientForAtlas = textureLighting === "dynamic" ? void 0 : ambientLight;
-  const polyContext = (0, import_react13.useMemo)(() => {
+  const polyContext = (0, import_react14.useMemo)(() => {
     const tileSize = 50;
     return {
       tileSize,
@@ -2388,7 +2677,7 @@ function PolySceneInner({
       seamBleed
     };
   }, [directionalForAtlas, ambientForAtlas, textureLighting, seamBleed]);
-  const autoCenterOffset = (0, import_react13.useMemo)(() => {
+  const autoCenterOffset = (0, import_react14.useMemo)(() => {
     if (!autoCenter) return [0, 0, 0];
     return [
       (sceneBbox.min[0] + sceneBbox.max[0]) / 2,
@@ -2396,18 +2685,18 @@ function PolySceneInner({
       (sceneBbox.min[2] + sceneBbox.max[2]) / 2
     ];
   }, [autoCenter, sceneBbox]);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     store.setAutoCenterOffset(autoCenterOffset);
     applyTransformDirect();
   }, [store, autoCenterOffset, applyTransformDirect]);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     applyTransformDirect();
   });
   const computedClassName = `polycss-scene${className ? ` ${className}` : ""}`;
-  const textureAtlasPlans = (0, import_react13.useMemo)(
+  const textureAtlasPlans = (0, import_react14.useMemo)(
     () => {
-      const repairEdges = (0, import_polycss_core11.buildTextureEdgeRepairSets)(polygons);
-      const seamBleedEdges = seamBleed === "auto" || typeof seamBleed === "number" && Number.isFinite(seamBleed) && seamBleed > 0 ? (0, import_polycss_core11.buildSeamBleedPolygonEdges)(polygons, {
+      const repairEdges = (0, import_polycss_core12.buildTextureEdgeRepairSets)(polygons);
+      const seamBleedEdges = seamBleed === "auto" || typeof seamBleed === "number" && Number.isFinite(seamBleed) && seamBleed > 0 ? (0, import_polycss_core12.buildSeamBleedPolygonEdges)(polygons, {
         tileSize: polyContext.tileSize,
         layerElevation: polyContext.layerElevation,
         directionalLight: directionalForAtlas,
@@ -2423,22 +2712,23 @@ function PolySceneInner({
     [polygons, polyContext, seamBleed, directionalForAtlas, ambientForAtlas]
   );
   const textureAtlas = useTextureAtlas(textureAtlasPlans, textureLighting, textureQuality, strategies);
-  const dynamicLightVars = (0, import_react13.useMemo)(() => {
+  const dynamicLightVars = (0, import_react14.useMemo)(() => {
     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 = (0, import_polycss_core13.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 = (0, import_polycss_core12.parseHexColor)(directionalLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
-    const ambRgb = (0, import_polycss_core12.parseHexColor)(ambientLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
+    const lightRgb = (0, import_polycss_core13.parseHexColor)(directionalLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
+    const ambRgb = (0, import_polycss_core13.parseHexColor)(ambientLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
     const lightIntensity = directionalLight?.intensity ?? 1;
     const ambientIntensity = ambientLight?.intensity ?? 0.4;
     const ch = (n) => (n / 255).toFixed(4);
     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]),
@@ -2447,32 +2737,37 @@ 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 = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  const [groundCssZ, setGroundCssZ] = (0, import_react13.useState)(null);
-  const recomputeGroundCssZ = (0, import_react13.useCallback)(() => {
+  const shadowCastersRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const shadowReceiversRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
+  const [groundCssZ, setGroundCssZ] = (0, import_react14.useState)(null);
+  const [shadowCastersVersion, setShadowCastersVersion] = (0, import_react14.useState)(0);
+  const [hasShadowReceiver, setHasShadowReceiver] = (0, import_react14.useState)(false);
+  const recomputeGroundCssZ = (0, import_react14.useCallback)(() => {
     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;
         }
       }
     }
     if (!Number.isFinite(minWorldZ)) return null;
     const lift = shadow?.lift ?? 0.05;
-    return (minWorldZ + lift) * import_polycss_core12.BASE_TILE;
+    return (minWorldZ + lift) * import_polycss_core13.BASE_TILE;
   }, [shadow]);
-  const registerShadowCaster = (0, import_react13.useCallback)((meshId, meshPolygons) => {
-    if (meshPolygons === null) {
+  const registerShadowCaster = (0, import_react14.useCallback)((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;
@@ -2483,7 +2778,12 @@ function PolySceneInner({
       el.style.removeProperty("--shadow-ground-cssz");
     }
   }, [sceneElRef, textureLighting, recomputeGroundCssZ]);
-  (0, import_react13.useEffect)(() => {
+  const registerShadowReceiver = (0, import_react14.useCallback)((meshId, registered) => {
+    if (registered) shadowReceiversRef.current.add(meshId);
+    else shadowReceiversRef.current.delete(meshId);
+    setHasShadowReceiver(shadowReceiversRef.current.size > 0);
+  }, []);
+  (0, import_react14.useEffect)(() => {
     const el = sceneElRef.current;
     if (!el) return;
     if (textureLighting === "dynamic" && groundCssZ !== null) {
@@ -2492,19 +2792,19 @@ function PolySceneInner({
       el.style.removeProperty("--shadow-ground-cssz");
     }
   }, [textureLighting, sceneElRef, groundCssZ]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setGroundCssZ((prev) => {
       const next = recomputeGroundCssZ();
       return prev === next ? prev : next;
     });
   }, [recomputeGroundCssZ]);
-  const disabledStrategies = (0, import_react13.useMemo)(
+  const disabledStrategies = (0, import_react14.useMemo)(
     () => strategies?.disable?.length ? new Set(strategies.disable) : void 0,
     [strategies]
   );
   const polyChildren = textureAtlas.entries.map((entry, index) => {
     if (entry) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         TextureAtlasPoly,
         {
           entry,
@@ -2518,8 +2818,8 @@ function PolySceneInner({
     if (!plan || plan.texture) return null;
     const useU = !disabledStrategies?.has("u");
     const useProjectiveSolid = !disabledStrategies?.has("b");
-    if (useU && (0, import_polycss_core11.isSolidTrianglePlan)(plan)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    if (useU && (0, import_polycss_core12.isSolidTrianglePlan)(plan)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         TextureTrianglePoly,
         {
           entry: plan,
@@ -2528,12 +2828,12 @@ function PolySceneInner({
         plan.index
       );
     }
-    if (useProjectiveSolid && (0, import_polycss_core11.isProjectiveQuadPlan)(plan)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextureProjectiveSolidPoly, { entry: plan, textureLighting }, plan.index);
+    if (useProjectiveSolid && (0, import_polycss_core12.isProjectiveQuadPlan)(plan)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextureProjectiveSolidPoly, { entry: plan, textureLighting }, plan.index);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextureBorderShapePoly, { entry: plan, disabledStrategies }, plan.index);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextureBorderShapePoly, { entry: plan, textureLighting, disabledStrategies }, plan.index);
   });
-  const sceneCtxValue = (0, import_react13.useMemo)(
+  const sceneCtxValue = (0, import_react14.useMemo)(
     () => ({
       textureLighting,
       directionalLight,
@@ -2542,11 +2842,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__ */ (0, import_jsx_runtime7.jsx)(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ref: localSceneRef,
@@ -2564,27 +2869,27 @@ function PolySceneInner({
     }
   ) });
 }
-var PolyScene = (0, import_react13.memo)(PolySceneInner);
+var PolyScene = (0, import_react14.memo)(PolySceneInner);
 // src/scene/PolyMesh.tsx
-var import_react15 = require("react");
-var import_polycss_core15 = require("@layoutit/polycss-core");
+var import_react16 = require("react");
+var import_polycss_core16 = require("@layoutit/polycss-core");
 // src/scene/useMesh.ts
-var import_react14 = require("react");
-var import_polycss_core13 = require("@layoutit/polycss-core");
+var import_react15 = require("react");
+var import_polycss_core14 = require("@layoutit/polycss-core");
 var EMPTY_POLYGONS = [];
 var EMPTY_WARNINGS = [];
 function usePolyMesh(src, options) {
-  const [state, setState] = (0, import_react14.useState)({
+  const [state, setState] = (0, import_react15.useState)({
     polygons: EMPTY_POLYGONS,
     voxelSource: void 0,
     loading: !!src,
     error: null,
     warnings: EMPTY_WARNINGS
   });
-  const activeResultRef = (0, import_react14.useRef)(null);
-  const dispose = (0, import_react14.useCallback)(() => {
+  const activeResultRef = (0, import_react15.useRef)(null);
+  const dispose = (0, import_react15.useCallback)(() => {
     const r = activeResultRef.current;
     if (r) {
       try {
@@ -2594,7 +2899,7 @@ function usePolyMesh(src, options) {
       activeResultRef.current = null;
     }
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!src) {
       dispose();
       setState({
@@ -2609,7 +2914,7 @@ function usePolyMesh(src, options) {
     let cancelled = false;
     setState((prev) => ({ ...prev, loading: true, error: null }));
     const prevResult = activeResultRef.current;
-    (0, import_polycss_core13.loadMesh)(src, options).then((result) => {
+    (0, import_polycss_core14.loadMesh)(src, options).then((result) => {
       if (cancelled) {
         try {
           result.dispose();
@@ -2646,7 +2951,7 @@ function usePolyMesh(src, options) {
       cancelled = true;
     };
   }, [src, dispose]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return () => dispose();
   }, [dispose]);
   return {
@@ -2659,8 +2964,12 @@ function usePolyMesh(src, options) {
   };
 }
+// src/scene/PolyMesh.tsx
+var import_polycss_core17 = require("@layoutit/polycss-core");
+var import_react_dom = require("react-dom");
 // src/scene/voxelRenderer.ts
-var import_polycss_core14 = require("@layoutit/polycss-core");
+var import_polycss_core15 = require("@layoutit/polycss-core");
 var DEFAULT_LIGHT_DIR2 = [0.4, -0.7, 0.59];
 var DEFAULT_LIGHT_COLOR2 = "#ffffff";
 var DEFAULT_LIGHT_INTENSITY2 = 1;
@@ -2668,9 +2977,9 @@ var DEFAULT_AMBIENT_COLOR2 = "#ffffff";
 var DEFAULT_AMBIENT_INTENSITY2 = 0.4;
 var DESKTOP_PRIMITIVE_SIZE = 1;
 var MOBILE_PRIMITIVE_SIZE = 8;
-var VOXEL_SEAM_BLEED = import_polycss_core14.PROJECTIVE_QUAD_BLEED;
+var VOXEL_SEAM_BLEED = import_polycss_core15.PROJECTIVE_QUAD_BLEED;
 var VOXEL_SEAM_EPS = 1e-6;
-var VOXEL_PROJECTIVE_QUAD_GUARDS = (0, import_polycss_core14.resolveProjectiveQuadGuards)({ bleed: 0 });
+var VOXEL_PROJECTIVE_QUAD_GUARDS = (0, import_polycss_core15.resolveProjectiveQuadGuards)({ bleed: 0 });
 var FACE_NORMALS = {
   t: [0, 0, 1],
   b: [0, 0, -1],
@@ -2691,7 +3000,7 @@ var FACE_BY_NORMAL = /* @__PURE__ */ new Map([
 function visibleFaceSignature(rotation) {
   const visible = [];
   for (const face of FACE_ORDER) {
-    if ((0, import_polycss_core14.normalFacesCamera)(FACE_NORMALS[face], rotation)) visible.push(face);
+    if ((0, import_polycss_core15.normalFacesCamera)(FACE_NORMALS[face], rotation)) visible.push(face);
   }
   return visible.join("|");
 }
@@ -2760,11 +3069,11 @@ function polygonBrush(polygon) {
     return {
       axis: "z",
       face,
-      left: minY * import_polycss_core14.BASE_TILE,
-      top: minX * import_polycss_core14.BASE_TILE,
-      width: Math.max(0, (maxY - minY) * import_polycss_core14.BASE_TILE),
-      height: Math.max(0, (maxX - minX) * import_polycss_core14.BASE_TILE),
-      z: minZ * import_polycss_core14.BASE_TILE,
+      left: minY * import_polycss_core15.BASE_TILE,
+      top: minX * import_polycss_core15.BASE_TILE,
+      width: Math.max(0, (maxY - minY) * import_polycss_core15.BASE_TILE),
+      height: Math.max(0, (maxX - minX) * import_polycss_core15.BASE_TILE),
+      z: minZ * import_polycss_core15.BASE_TILE,
       baseColor,
       bleed: zeroVoxelSeamBleed()
     };
@@ -2773,11 +3082,11 @@ function polygonBrush(polygon) {
     return {
       axis: "x",
       face,
-      left: minY * import_polycss_core14.BASE_TILE,
-      top: minZ * import_polycss_core14.BASE_TILE,
-      width: Math.max(0, (maxY - minY) * import_polycss_core14.BASE_TILE),
-      height: Math.max(0, (maxZ - minZ) * import_polycss_core14.BASE_TILE),
-      z: -minX * import_polycss_core14.BASE_TILE,
+      left: minY * import_polycss_core15.BASE_TILE,
+      top: minZ * import_polycss_core15.BASE_TILE,
+      width: Math.max(0, (maxY - minY) * import_polycss_core15.BASE_TILE),
+      height: Math.max(0, (maxZ - minZ) * import_polycss_core15.BASE_TILE),
+      z: -minX * import_polycss_core15.BASE_TILE,
       baseColor,
       bleed: zeroVoxelSeamBleed()
     };
@@ -2786,11 +3095,11 @@ function polygonBrush(polygon) {
     return {
       axis: "y",
       face,
-      left: minZ * import_polycss_core14.BASE_TILE,
-      top: minX * import_polycss_core14.BASE_TILE,
-      width: Math.max(0, (maxZ - minZ) * import_polycss_core14.BASE_TILE),
-      height: Math.max(0, (maxX - minX) * import_polycss_core14.BASE_TILE),
-      z: -minY * import_polycss_core14.BASE_TILE,
+      left: minZ * import_polycss_core15.BASE_TILE,
+      top: minX * import_polycss_core15.BASE_TILE,
+      width: Math.max(0, (maxZ - minZ) * import_polycss_core15.BASE_TILE),
+      height: Math.max(0, (maxX - minX) * import_polycss_core15.BASE_TILE),
+      z: -minY * import_polycss_core15.BASE_TILE,
       baseColor,
       bleed: zeroVoxelSeamBleed()
     };
@@ -2810,7 +3119,7 @@ function worldLineKey(segment) {
   return key;
 }
 function cssPointForVertex(v) {
-  return [v[1] * import_polycss_core14.BASE_TILE, v[0] * import_polycss_core14.BASE_TILE, v[2] * import_polycss_core14.BASE_TILE];
+  return [v[1] * import_polycss_core15.BASE_TILE, v[0] * import_polycss_core15.BASE_TILE, v[2] * import_polycss_core15.BASE_TILE];
 }
 function localPointForItem(item, p) {
   if (item.axis === "x") return [p[0], p[2]];
@@ -2886,7 +3195,7 @@ function applyVoxelSeamBleed(polygons, items) {
   }
 }
 function parseColor(input) {
-  const parsed = (0, import_polycss_core14.parsePureColor)(input);
+  const parsed = (0, import_polycss_core15.parsePureColor)(input);
   if (!parsed) return { r: 255, g: 255, b: 255, alpha: 1 };
   return {
     r: parsed.rgb[0],
@@ -2897,7 +3206,7 @@ function parseColor(input) {
 }
 function canonicalBrushColor(input) {
   if (!input) return "#cccccc";
-  const parsed = (0, import_polycss_core14.parsePureColor)(input);
+  const parsed = (0, import_polycss_core15.parsePureColor)(input);
   if (!parsed) return input;
   const rgb = {
     r: parsed.rgb[0],
@@ -2919,9 +3228,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;
@@ -2929,16 +3235,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 = (0, import_polycss_core15.shadePolygon)(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 [];
@@ -3012,7 +3317,7 @@ function voxelSeamEdgeAmounts(item) {
 function rescaleProjectiveMatrix(matrix, primitiveSize) {
   const values = matrix.split(",").map(Number);
   if (values.length !== 16 || values.some((value) => !Number.isFinite(value))) return null;
-  const scale = import_polycss_core14.SOLID_QUAD_CANONICAL_SIZE / primitiveSize;
+  const scale = import_polycss_core15.SOLID_QUAD_CANONICAL_SIZE / primitiveSize;
   for (let i = 0; i < 8; i += 1) values[i] *= scale;
   return `matrix3d(${values.map((value) => Number(value.toFixed(6))).join(",")})`;
 }
@@ -3080,7 +3385,7 @@ function affineVoxelMatrix(item, primitiveSize) {
 }
 function directMatrix(item, primitiveSize) {
   const { xAxis, yAxis, normal, tx, ty, tz } = voxelProjectiveBasis(item);
-  const projective = (0, import_polycss_core14.computeProjectiveQuadMatrix)(
+  const projective = (0, import_polycss_core15.computeProjectiveQuadMatrix)(
     voxelScreenPts(item),
     xAxis,
     yAxis,
@@ -3114,9 +3419,9 @@ function projectedPoint(item, rotation) {
   let center = itemCenter(item);
   const meshRotation = rotation.meshRotation;
   if (meshRotation) {
-    center = (0, import_polycss_core14.rotateVec3)(center, meshRotation[0] ?? 0, meshRotation[1] ?? 0, meshRotation[2] ?? 0);
+    center = (0, import_polycss_core15.rotateVec3)(center, meshRotation[0] ?? 0, meshRotation[1] ?? 0, meshRotation[2] ?? 0);
   }
-  const [x, y] = (0, import_polycss_core14.rotateVec3)(center, rotation.rotX, 0, rotation.rotY);
+  const [x, y] = (0, import_polycss_core15.rotateVec3)(center, rotation.rotX, 0, rotation.rotY);
   return { x, y };
 }
 function orderDirectMatrixItems(items, visibleFaces, rotation) {
@@ -3384,7 +3689,9 @@ function findMeshUnderPoint(clientX, clientY, filter) {
 }
 // src/scene/PolyMesh.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("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;
@@ -3395,28 +3702,9 @@ 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 = (0, import_polycss_core15.computeSceneBbox)(polygons);
+  const bbox = (0, import_polycss_core16.computeSceneBbox)(polygons);
   const cx = (bbox.min[0] + bbox.max[0]) / 2;
   const cy = (bbox.min[1] + bbox.max[1]) / 2;
   const cz = (bbox.min[2] + bbox.max[2]) / 2;
@@ -3433,16 +3721,21 @@ function recenterPolygons(polygons) {
     } : null
   }));
 }
-var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
+var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
   id,
   src,
   mtl,
   polygons: polygonsProp,
+  voxelSource: voxelSourceProp,
   autoCenter,
   textureLighting,
   textureQuality,
   seamBleed,
+  atomicAtlas,
+  onFrameReady,
   castShadow,
+  receiveShadow,
+  merge = true,
   children,
   fallback,
   errorFallback,
@@ -3466,7 +3759,7 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
   onPointerLeave,
   onPointerCancel
 }, forwardedRef) {
-  const mergedOptions = (0, import_react15.useMemo)(() => {
+  const mergedOptions = (0, import_react16.useMemo)(() => {
     if (!mtl && !parseOptions && meshResolution === void 0) return void 0;
     return {
       ...parseOptions ?? {},
@@ -3476,54 +3769,37 @@ var PolyMesh = (0, import_react15.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 [localPolygons, setLocalPolygons] = (0, import_react15.useState)(null);
-  const prevExternalRef = (0, import_react15.useRef)(externalPolygons);
+  const externalVoxelSource = src ? fetched.voxelSource : voxelSourceProp;
+  const [localPolygons, setLocalPolygons] = (0, import_react16.useState)(null);
+  const prevExternalRef = (0, import_react16.useRef)(externalPolygons);
   if (prevExternalRef.current !== externalPolygons) {
     prevExternalRef.current = externalPolygons;
     if (localPolygons !== null) setLocalPolygons(null);
   }
-  const sourcePolygons = localPolygons ?? externalPolygons;
+  const rawSourcePolygons = localPolygons ?? externalPolygons;
+  const sourcePolygons = (0, import_react16.useMemo)(
+    () => merge ? (0, import_polycss_core16.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;
   const hasStaticChildren = staticChildren !== null && staticChildren !== void 0 && staticChildren !== false;
-  const polygons = (0, import_react15.useMemo)(
+  const polygons = (0, import_react16.useMemo)(
     () => autoCenter ? recenterPolygons(sourcePolygons) : sourcePolygons,
     [sourcePolygons, autoCenter]
   );
-  const transform = buildTransform(position, scale, rotation);
-  const transformOrigin = (0, import_react15.useMemo)(() => {
-    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 = (0, import_react15.useRef)(null);
-  const propsRef = (0, import_react15.useRef)({ position, scale, rotation });
+  const transform = (0, import_polycss_core16.buildPolyMeshTransform)({ position, scale, rotation });
+  const wrapperRef = (0, import_react16.useRef)(null);
+  const propsRef = (0, import_react16.useRef)({ position, scale, rotation });
   propsRef.current = { position, scale, rotation };
-  const polygonsRef = (0, import_react15.useRef)(polygons);
+  const polygonsRef = (0, import_react16.useRef)(polygons);
   polygonsRef.current = polygons;
-  const [bakedRotation, setBakedRotation] = (0, import_react15.useState)(rotation);
-  const stableTriangleColorFrameRef = (0, import_react15.useRef)(0);
-  const setPolygonsImplRef = (0, import_react15.useRef)(() => {
+  const [bakedRotation, setBakedRotation] = (0, import_react16.useState)(rotation);
+  const stableTriangleColorFrameRef = (0, import_react16.useRef)(0);
+  const setPolygonsImplRef = (0, import_react16.useRef)(() => {
   });
-  const handle = (0, import_react15.useMemo)(() => ({
+  const handle = (0, import_react16.useMemo)(() => ({
     get element() {
       return wrapperRef.current;
     },
@@ -3544,17 +3820,17 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
       setLocalPolygons([...current]);
     }
   }), [id]);
-  (0, import_react15.useImperativeHandle)(forwardedRef, () => handle, [handle]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useImperativeHandle)(forwardedRef, () => handle, [handle]);
+  (0, import_react16.useEffect)(() => {
     const el = wrapperRef.current;
     if (!el) return;
     registerMeshElement(el, handle);
     return () => unregisterMeshElement(el);
   }, [handle]);
-  const cameraCtx = (0, import_react15.useContext)(PolyCameraContext);
+  const cameraCtx = (0, import_react16.useContext)(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef ?? null;
-  const pointerDownAtRef = (0, import_react15.useRef)(null);
-  const makeEvent = (0, import_react15.useCallback)(
+  const pointerDownAtRef = (0, import_react16.useRef)(null);
+  const makeEvent = (0, import_react16.useCallback)(
     function makeEvent2(nativeEvent, clientX, clientY) {
       const intersections = [];
       if (typeof document !== "undefined" && typeof document.elementsFromPoint === "function") {
@@ -3593,7 +3869,7 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
     },
     [cameraElRef, handle]
   );
-  const wrapperHandlers = (0, import_react15.useMemo)(() => {
+  const wrapperHandlers = (0, import_react16.useMemo)(() => {
     const dispatch = (polyHandler, reactEvent, nativeEvent, clientX, clientY) => {
       if (!polyHandler) return;
       const polyEvent = makeEvent(nativeEvent, clientX, clientY);
@@ -3677,90 +3953,144 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
   const sceneCtx = usePolySceneContext2();
   const effectiveTextureLighting = textureLighting ?? sceneCtx?.textureLighting ?? "baked";
   const effectiveStrategies = sceneCtx?.strategies;
-  const effectiveSeamBleed = seamBleed ?? sceneCtx?.seamBleed ?? import_polycss_core15.DEFAULT_SEAM_BLEED;
-  const effectiveDirectional = effectiveTextureLighting === "dynamic" ? void 0 : sceneCtx?.directionalLight;
-  const effectiveAmbient = effectiveTextureLighting === "dynamic" ? void 0 : sceneCtx?.ambientLight;
+  const disabledStrategies = (0, import_react16.useMemo)(
+    () => effectiveStrategies?.disable?.length ? new Set(effectiveStrategies.disable) : void 0,
+    [effectiveStrategies]
+  );
+  const effectiveSeamBleed = seamBleed ?? sceneCtx?.seamBleed ?? import_polycss_core16.DEFAULT_SEAM_BLEED;
+  const effectiveDirectional = sceneCtx?.directionalLight;
+  const effectiveAmbient = sceneCtx?.ambientLight;
   const directVoxelEnabled = Boolean(
     externalVoxelSource && localPolygons === null && !renderPolygon && !hasStaticChildren && effectiveTextureLighting === "baked" && !castShadow
   );
   const sceneDirectionalLight = sceneCtx?.directionalLight;
-  const dynamicLightOverride = (0, import_react15.useMemo)(() => {
+  const dynamicLightOverride = (0, import_react16.useMemo)(() => {
     if (effectiveTextureLighting !== "dynamic") return null;
     if (!rotation || rotation[0] === 0 && rotation[1] === 0 && rotation[2] === 0) return null;
     if (!sceneDirectionalLight) return null;
     const dir = sceneDirectionalLight.direction;
-    const localDir = (0, import_polycss_core15.inverseRotateVec3)(dir, rotation);
+    const localDir = (0, import_polycss_core16.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 = (0, import_react15.useMemo)(() => {
+  const bakedDirectional = (0, import_react16.useMemo)(() => {
     if (!effectiveDirectional) return effectiveDirectional;
     const rot = bakedRotation ?? [0, 0, 0];
-    if (rot[0] === 0 && rot[1] === 0 && rot[2] === 0) return effectiveDirectional;
+    const cssLight = (0, import_polycss_core17.worldDirectionalLightToCss)(effectiveDirectional);
+    if (rot[0] === 0 && rot[1] === 0 && rot[2] === 0) return cssLight;
     return {
-      ...effectiveDirectional,
-      direction: (0, import_polycss_core15.inverseRotateVec3)(effectiveDirectional.direction, rot)
+      ...cssLight,
+      direction: (0, import_polycss_core16.inverseRotateVec3)(cssLight.direction, rot)
     };
   }, [effectiveDirectional, bakedRotation]);
-  const atlasPlans = (0, import_react15.useMemo)(
+  const lightOccludedPolyIndices = void 0;
+  const atlasPlans = (0, import_react16.useMemo)(
     () => {
       if (renderPolygon || directVoxelEnabled) return [];
-      const repairEdges = (0, import_polycss_core11.buildTextureEdgeRepairSets)(polygons);
-      const seamBleedEdges = effectiveSeamBleed === "auto" || typeof effectiveSeamBleed === "number" && Number.isFinite(effectiveSeamBleed) && effectiveSeamBleed > 0 ? (0, import_polycss_core11.buildSeamBleedPolygonEdges)(polygons, {
+      const repairEdges = (0, import_polycss_core12.buildTextureEdgeRepairSets)(polygons);
+      const seamBleedEdges = effectiveSeamBleed === "auto" || typeof effectiveSeamBleed === "number" && Number.isFinite(effectiveSeamBleed) && effectiveSeamBleed > 0 ? (0, import_polycss_core12.buildSeamBleedPolygonEdges)(polygons, {
         directionalLight: bakedDirectional,
         ambientLight: effectiveAmbient
       }) : null;
-      return polygons.map((p, i) => computeTextureAtlasPlan(p, i, {
+      const basisHints = (0, import_polycss_core17.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 = (0, import_react15.useMemo)(
-    () => !renderPolygon ? getSolidPaintDefaults(atlasPlans, effectiveTextureLighting, effectiveStrategies) : {},
-    [renderPolygon, atlasPlans, effectiveTextureLighting, effectiveStrategies]
+  const solidPaintDefaults = (0, import_react16.useMemo)(
+    () => !renderPolygon ? getSolidPaintDefaults(textureAtlas.plans, effectiveTextureLighting, effectiveStrategies) : {},
+    [renderPolygon, textureAtlas.plans, effectiveTextureLighting, effectiveStrategies]
   );
-  const defaultPaintVars = (0, import_react15.useMemo)(
+  const onFrameReadyRef = (0, import_react16.useRef)(onFrameReady);
+  onFrameReadyRef.current = onFrameReady;
+  (0, import_react16.useLayoutEffect)(() => {
+    if (atomicAtlas && textureAtlas.ready) onFrameReadyRef.current?.();
+  }, [textureAtlas.entries]);
+  const defaultPaintVars = (0, import_react16.useMemo)(
     () => solidPaintVars(solidPaintDefaults),
     [solidPaintDefaults]
   );
-  const meshIdRef = (0, import_react15.useRef)(/* @__PURE__ */ Symbol());
+  const meshIdRef = (0, import_react16.useRef)(/* @__PURE__ */ Symbol());
   const sceneRegisterShadowCaster = sceneCtx?.registerShadowCaster;
-  (0, import_react15.useEffect)(() => {
+  const renderedPolygonIndices = (0, import_react16.useMemo)(() => {
+    const dedupDrop = (0, import_polycss_core16.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]);
+  (0, import_react16.useEffect)(() => {
     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;
+  (0, import_react16.useEffect)(() => {
+    if (!sceneRegisterShadowReceiver) return;
+    sceneRegisterShadowReceiver(meshIdRef.current, !!receiveShadow);
+    return () => {
+      sceneRegisterShadowReceiver(meshIdRef.current, false);
+    };
+  }, [sceneRegisterShadowReceiver, receiveShadow]);
   const bakedShadowGroundCssZ = sceneCtx?.groundCssZ ?? null;
   const sceneShadow = sceneCtx?.shadow;
-  const shadowSvgNode = (0, import_react15.useMemo)(() => {
+  const sceneHasReceiver = sceneCtx?.hasShadowReceiver ?? false;
+  const shadowSvgNode = (0, import_react16.useMemo)(() => {
     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 shadowDedupDrop = (0, import_polycss_core15.findOverlappingPolygonDuplicates)(polygons, {
+    const userGroundLightDir = sceneDirectionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const lightDir = (0, import_polycss_core16.worldDirectionToCss)(userGroundLightDir);
+    const meshPosZ = position?.[2] ?? 0;
+    const localGroundCssZ = bakedShadowGroundCssZ - meshPosZ * import_polycss_core16.BASE_TILE;
+    const shadowDedupDrop = (0, import_polycss_core16.findOverlappingPolygonDuplicates)(polygons, {
       normalTolerance: 0.1,
       distanceTolerance: 0.5,
-      overlapFraction: 0.4,
+      overlapFraction: 0.95,
       preserveDoubleSidedBackfaces: false
     });
     const projections = [];
@@ -3774,15 +4104,15 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
       const projected = [];
       for (const v of polygon.vertices) {
         const cssVertex = [
-          v[1] * import_polycss_core15.BASE_TILE,
-          v[0] * import_polycss_core15.BASE_TILE,
-          v[2] * import_polycss_core15.BASE_TILE
+          v[1] * import_polycss_core16.BASE_TILE,
+          v[0] * import_polycss_core16.BASE_TILE,
+          v[2] * import_polycss_core16.BASE_TILE
         ];
         if (cssVertex[0] < fpMinX) fpMinX = cssVertex[0];
         if (cssVertex[1] < fpMinY) fpMinY = cssVertex[1];
         if (cssVertex[0] > fpMaxX) fpMaxX = cssVertex[0];
         if (cssVertex[1] > fpMaxY) fpMaxY = cssVertex[1];
-        const p = (0, import_polycss_core15.projectCssVertexToGround)(cssVertex, lightDir, bakedShadowGroundCssZ);
+        const p = (0, import_polycss_core16.projectCssVertexToGround)(cssVertex, lightDir, localGroundCssZ);
         projected.push(p);
         if (p[0] < minX) minX = p[0];
         if (p[1] < minY) minY = p[1];
@@ -3802,17 +4132,17 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
     if (!(width > 0) || !(height > 0)) return null;
     const shadowColor = sceneShadow?.color ?? "#000000";
     const shadowOpacity = sceneShadow?.opacity ?? 0.25;
-    const parsed = (0, import_polycss_core15.parseHexColor)(shadowColor)?.rgb ?? [0, 0, 0];
+    const parsed = (0, import_polycss_core16.parseHexColor)(shadowColor)?.rgb ?? [0, 0, 0];
     let d = "";
     for (const verts of projections) {
-      const ccw = (0, import_polycss_core15.ensureCcw2D)(verts);
+      const ccw = (0, import_polycss_core16.ensureCcw2D)(verts);
       d += `M${(ccw[0][0] - bx0).toFixed(3)},${(ccw[0][1] - by0).toFixed(3)}`;
       for (let j = 1; j < ccw.length; j++) {
         d += `L${(ccw[j][0] - bx0).toFixed(3)},${(ccw[j][1] - by0).toFixed(3)}`;
       }
       d += "Z";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "svg",
       {
         className: "polycss-shadow polycss-shadow-svg",
@@ -3828,16 +4158,16 @@ var PolyMesh = (0, import_react15.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__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "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)
           }
@@ -3845,7 +4175,125 @@ var PolyMesh = (0, import_react15.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] = (0, import_react16.useState)(0);
+  (0, import_react16.useEffect)(() => {
+    if (!receiveShadow) return;
+    return cameraCtx?.store.subscribe(() => setCameraTick((n) => n + 1));
+  }, [receiveShadow, cameraCtx?.store]);
+  void cameraTick;
+  const selfShadowEdgeMap = (0, import_react16.useMemo)(
+    () => receiveShadow ? (0, import_polycss_core16.buildSharedEdgeMap)(polygons) : void 0,
+    [polygons, receiveShadow]
+  );
+  const receiverShadowSvgs = (0, import_react16.useMemo)(() => {
+    if (!receiveShadow) return null;
+    if (!shadowCasters || shadowCasters.size === 0) return null;
+    const userLightDir = sceneDirectionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const lightDir = (0, import_polycss_core16.worldDirectionToCss)(userLightDir);
+    const shadowLift = sceneShadow?.lift ?? 1e-3;
+    const planes = (0, import_polycss_core16.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 = (0, import_polycss_core16.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 = (0, import_polycss_core16.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 = (0, import_polycss_core16.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__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: specs.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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__ */ (0, import_jsx_runtime9.jsx)(
+          "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 ? (0, import_react_dom.createPortal)(receiverShadowSvgs, portalSceneEl) : null;
   setPolygonsImplRef.current = (nextPolygons) => {
     const nextRenderedPolygons = autoCenter ? recenterPolygons(nextPolygons) : nextPolygons;
     polygonsRef.current = nextRenderedPolygons;
@@ -3865,8 +4313,8 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
     }
     setLocalPolygons([...nextPolygons]);
   };
-  const voxelRendererRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useLayoutEffect)(() => {
+  const voxelRendererRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useLayoutEffect)(() => {
     const root = wrapperRef.current;
     voxelRendererRef.current?.dispose();
     voxelRendererRef.current = null;
@@ -3907,7 +4355,6 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
   ]);
   const wrapperStyle = {
     transform,
-    ...transformOrigin ? { transformOrigin } : null,
     ...dynamicLightOverride,
     ...style,
     ...defaultPaintVars
@@ -3915,10 +4362,10 @@ var PolyMesh = (0, import_react15.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__ */ (0, import_jsx_runtime8.jsx)(RenderPropPolygon, { polygon: p, index: i, children: renderPolygon }, i)
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderPropPolygon, { polygon: p, index: i, children: renderPolygon }, i)
   )) : textureAtlas.entries.map((entry, index) => {
     if (entry) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         TextureAtlasPoly,
         {
           entry,
@@ -3929,10 +4376,10 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
         entry.index
       );
     }
-    const plan = atlasPlans[index];
+    const plan = textureAtlas.plans[index];
     if (!plan || plan.texture) return null;
-    if ((0, import_polycss_core11.isProjectiveQuadPlan)(plan)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    if ((0, import_polycss_core12.isProjectiveQuadPlan)(plan)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         TextureProjectiveSolidPoly,
         {
           entry: plan,
@@ -3942,26 +4389,44 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
         plan.index
       );
     }
-    return (0, import_polycss_core11.isSolidTrianglePlan)(plan) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      TextureTrianglePoly,
-      {
-        entry: plan,
-        textureLighting: effectiveTextureLighting,
-        solidPaintDefaults
-      },
-      plan.index
-    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    if ((0, import_polycss_core12.isSolidTrianglePlan)(plan)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        TextureTrianglePoly,
+        {
+          entry: plan,
+          textureLighting: effectiveTextureLighting,
+          solidPaintDefaults
+        },
+        plan.index
+      );
+    }
+    const cornerGeo = !disabledStrategies?.has("i") ? (0, import_polycss_core17.cornerShapeGeometryForPlan)(plan) : null;
+    if (cornerGeo) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        TextureCornerShapeSolidPoly,
+        {
+          entry: plan,
+          geometry: cornerGeo,
+          textureLighting: effectiveTextureLighting,
+          solidPaintDefaults
+        },
+        plan.index
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       TextureBorderShapePoly,
       {
         entry: plan,
-        solidPaintDefaults
+        textureLighting: effectiveTextureLighting,
+        solidPaintDefaults,
+        disabledStrategies
       },
       plan.index
     );
   });
   if (src) {
     if (fetched.loading && fetched.polygons.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           ref: wrapperRef,
@@ -3974,7 +4439,7 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
       );
     }
     if (fetched.error && fetched.polygons.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           ref: wrapperRef,
@@ -3987,7 +4452,7 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
       );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref: wrapperRef,
@@ -3997,6 +4462,7 @@ var PolyMesh = (0, import_react15.forwardRef)(function PolyMesh2({
       ...wrapperHandlers,
       children: [
         shadowSvgNode,
+        portaledReceiverShadowSvgs,
         renderedPolygons,
         staticChildren
       ]
@@ -4008,12 +4474,89 @@ function RenderPropPolygon({
   index,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children(polygon, index) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: children(polygon, index) });
+}
+// src/scene/PolyIframe.tsx
+var import_polycss_core18 = require("@layoutit/polycss-core");
+var import_jsx_runtime10 = require("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) * import_polycss_core18.BASE_TILE;
+  const cssY = (position?.[0] ?? 0) * import_polycss_core18.BASE_TILE;
+  const cssZ = (position?.[2] ?? 0) * import_polycss_core18.BASE_TILE;
+  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 * import_polycss_core18.BASE_TILE;
+  const cssH = height * import_polycss_core18.BASE_TILE;
+  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__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: `polycss-iframe${className ? ` ${className}` : ""}`,
+      style: wrapperStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "iframe",
+        {
+          src,
+          allow,
+          sandbox,
+          loading,
+          referrerPolicy,
+          title,
+          style: {
+            width: cssW,
+            height: cssH,
+            border: 0,
+            display: "block",
+            background: "#000"
+          }
+        }
+      )
+    }
+  );
 }
 // src/scene/PolyGround.tsx
-var import_react16 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function PolyGround({
   size = 6,
   z = 0,
@@ -4021,7 +4564,7 @@ function PolyGround({
   color = "#7d848e",
   className
 }) {
-  const polygons = (0, import_react16.useMemo)(() => {
+  const polygons = (0, import_react17.useMemo)(() => {
     const half = size / 2;
     const [cx, cy] = center;
     const vertices = [
@@ -4032,7 +4575,7 @@ function PolyGround({
     ];
     return [{ vertices, color }];
   }, [size, z, center, color]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     PolyMesh,
     {
       polygons,
@@ -4043,9 +4586,9 @@ function PolyGround({
 }
 // src/scene/usePolyMaterial.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function usePolyMaterial(options) {
-  return (0, import_react17.useMemo)(
+  return (0, import_react18.useMemo)(
     () => ({ texture: options.texture, key: options.key }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [options.texture, options.key]
@@ -4053,8 +4596,8 @@ function usePolyMaterial(options) {
 }
 // src/shapes/Poly.tsx
-var import_react18 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DIRECT_TEXTURE_CSS_DECIMALS = 4;
 function formatCssLength(value, decimals = DIRECT_TEXTURE_CSS_DECIMALS) {
   const next = value.toFixed(decimals).replace(/\.?0+$/, "");
@@ -4106,7 +4649,7 @@ function MaterialDirectPoly({
     Object.entries(plan.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
   ) : {};
   const elementClassName = className?.trim() || void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "i",
     {
       className: elementClassName,
@@ -4159,7 +4702,7 @@ function PolyInner({
   const textureQuality = textureQualityProp ?? context?.textureQuality;
   const polygonColor = baseColorProp ?? color;
   const effectiveTexture = material?.texture ?? texture;
-  const atlasPlan = (0, import_react18.useMemo)(
+  const atlasPlan = (0, import_react19.useMemo)(
     () => computeTextureAtlasPlan(
       { vertices, color: polygonColor, texture: effectiveTexture, uvs, data },
       0,
@@ -4180,11 +4723,11 @@ function PolyInner({
       context?.directionalLight
     ]
   );
-  const materialUvRect = (0, import_react18.useMemo)(
+  const materialUvRect = (0, import_react19.useMemo)(
     () => material && uvs ? isAxisAlignedRectUVs(uvs) : null,
     [material, uvs]
   );
-  const atlasPlans = (0, import_react18.useMemo)(
+  const atlasPlans = (0, import_react19.useMemo)(
     () => materialUvRect ? [] : [atlasPlan],
     [materialUvRect, atlasPlan]
   );
@@ -4237,7 +4780,7 @@ function PolyInner({
   const wrapperTransform = transformParts.length > 0 ? transformParts.join(" ") : void 0;
   let front = null;
   if (materialUvRect && material && atlasPlan) {
-    front = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    front = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       MaterialDirectPoly,
       {
         plan: atlasPlan,
@@ -4253,7 +4796,7 @@ function PolyInner({
   } else {
     const atlasEntry = textureAtlas.entries[0];
     if (atlasEntry) {
-      front = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      front = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TextureAtlasPoly,
         {
           entry: atlasEntry,
@@ -4267,7 +4810,7 @@ function PolyInner({
         }
       );
     } else if (atlasPlan && !atlasPlan.texture) {
-      front = (0, import_polycss_core11.isSolidTrianglePlan)(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      front = (0, import_polycss_core12.isSolidTrianglePlan)(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TextureTrianglePoly,
         {
           entry: atlasPlan,
@@ -4278,7 +4821,7 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : (0, import_polycss_core11.isProjectiveQuadPlan)(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ) : (0, import_polycss_core12.isProjectiveQuadPlan)(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TextureProjectiveSolidPoly,
         {
           entry: atlasPlan,
@@ -4289,10 +4832,11 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TextureBorderShapePoly,
         {
           entry: atlasPlan,
+          textureLighting,
           className,
           style: styleProp,
           domAttrs,
@@ -4304,7 +4848,7 @@ function PolyInner({
   }
   if (!front) return null;
   if (!wrapperTransform) return front;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       className: "polycss-poly-wrapper",
@@ -4317,12 +4861,12 @@ function PolyInner({
     }
   );
 }
-var Poly = (0, import_react18.memo)(PolyInner);
+var Poly = (0, import_react19.memo)(PolyInner);
 // src/shapes/PolyShapes.tsx
-var import_react19 = require("react");
-var import_polycss_core16 = require("@layoutit/polycss-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_polycss_core19 = require("@layoutit/polycss-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function PolyBox({
   size,
   center,
@@ -4336,12 +4880,12 @@ function PolyBox({
   faces,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.boxPolygons)({ size, center, min, max, color, texture, material, uvs, data, faces }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.boxPolygons)({ size, center, min, max, color, texture, material, uvs, data, faces }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, center, min, max, color, texture, material, uvs, data, faces]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyPlane({
   axis,
@@ -4351,12 +4895,12 @@ function PolyPlane({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.planePolygons)({ axis, size, offset, along, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.planePolygons)({ axis, size, offset, along, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [axis, size, offset, along, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyRing({
   axis,
@@ -4366,12 +4910,12 @@ function PolyRing({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.ringPolygons)({ axis, radius, halfThickness, segments, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.ringPolygons)({ axis, radius, halfThickness, segments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [axis, radius, halfThickness, segments, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyOctahedron({
   center,
@@ -4379,48 +4923,48 @@ function PolyOctahedron({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.octahedronPolygons)({ center, size, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.octahedronPolygons)({ center, size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [center, size, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyTetrahedron({
   size,
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.tetrahedronPolygons)({ size, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.tetrahedronPolygons)({ size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyIcosahedron({
   size,
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.icosahedronPolygons)({ size, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.icosahedronPolygons)({ size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyDodecahedron({
   size,
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.dodecahedronPolygons)({ size, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.dodecahedronPolygons)({ size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolySphere({
   radius,
@@ -4428,12 +4972,12 @@ function PolySphere({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.spherePolygons)({ radius, subdivisions, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.spherePolygons)({ radius, subdivisions, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, subdivisions, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyCylinder({
   radius,
@@ -4443,12 +4987,12 @@ function PolyCylinder({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.cylinderPolygons)({ radius, radiusTop, height, radialSegments, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.cylinderPolygons)({ radius, radiusTop, height, radialSegments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, radiusTop, height, radialSegments, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyCone({
   radius,
@@ -4457,12 +5001,12 @@ function PolyCone({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.conePolygons)({ radius, height, radialSegments, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.conePolygons)({ radius, height, radialSegments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, height, radialSegments, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 function PolyTorus({
   radius,
@@ -4472,17 +5016,17 @@ function PolyTorus({
   color,
   ...meshProps
 }) {
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core16.torusPolygons)({ radius, tube, radialSegments, tubularSegments, color }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core19.torusPolygons)({ radius, tube, radialSegments, tubularSegments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, tube, radialSegments, tubularSegments, color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, ...meshProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PolyMesh, { polygons, ...meshProps });
 }
 // src/controls/PolyFirstPersonControls.tsx
-var import_react20 = require("react");
-var import_polycss_core17 = require("@layoutit/polycss-core");
+var import_react21 = require("react");
+var import_polycss_core20 = require("@layoutit/polycss-core");
 var DEFAULTS = {
   enabled: true,
   lookEnabled: true,
@@ -4540,28 +5084,28 @@ function emitEvent(registry, type) {
     }
   }
 }
-var PolyFirstPersonControls = (0, import_react20.forwardRef)(function PolyFirstPersonControls2(props, ref) {
+var PolyFirstPersonControls = (0, import_react21.forwardRef)(function PolyFirstPersonControls2(props, ref) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const onChangeRef = (0, import_react20.useRef)(props.onChange);
-  const onInteractionStartRef = (0, import_react20.useRef)(props.onInteractionStart);
-  const onInteractionEndRef = (0, import_react20.useRef)(props.onInteractionEnd);
-  (0, import_react20.useEffect)(() => {
+  const onChangeRef = (0, import_react21.useRef)(props.onChange);
+  const onInteractionStartRef = (0, import_react21.useRef)(props.onInteractionStart);
+  const onInteractionEndRef = (0, import_react21.useRef)(props.onInteractionEnd);
+  (0, import_react21.useEffect)(() => {
     onChangeRef.current = props.onChange;
     onInteractionStartRef.current = props.onInteractionStart;
     onInteractionEndRef.current = props.onInteractionEnd;
   });
-  const optsRef = (0, import_react20.useRef)(resolveOptions(DEFAULTS, props));
-  const cameraOriginRef = (0, import_react20.useRef)([0, 0, 0]);
-  const rafIdRef = (0, import_react20.useRef)(null);
-  const lastTimeRef = (0, import_react20.useRef)(0);
-  const stoppedRef = (0, import_react20.useRef)(false);
-  const pointerLockedRef = (0, import_react20.useRef)(false);
-  const interactingRef = (0, import_react20.useRef)(false);
-  const keysHeldRef = (0, import_react20.useRef)(/* @__PURE__ */ new Set());
-  const verticalVelRef = (0, import_react20.useRef)(0);
-  const jumpOffsetRef = (0, import_react20.useRef)(0);
-  const registryRef = (0, import_react20.useRef)(makeRegistry());
-  (0, import_react20.useImperativeHandle)(ref, () => ({
+  const optsRef = (0, import_react21.useRef)(resolveOptions(DEFAULTS, props));
+  const cameraOriginRef = (0, import_react21.useRef)([0, 0, 0]);
+  const rafIdRef = (0, import_react21.useRef)(null);
+  const lastTimeRef = (0, import_react21.useRef)(0);
+  const stoppedRef = (0, import_react21.useRef)(false);
+  const pointerLockedRef = (0, import_react21.useRef)(false);
+  const interactingRef = (0, import_react21.useRef)(false);
+  const keysHeldRef = (0, import_react21.useRef)(/* @__PURE__ */ new Set());
+  const verticalVelRef = (0, import_react21.useRef)(0);
+  const jumpOffsetRef = (0, import_react21.useRef)(0);
+  const registryRef = (0, import_react21.useRef)(makeRegistry());
+  (0, import_react21.useImperativeHandle)(ref, () => ({
     update(partial) {
       const prev = optsRef.current;
       optsRef.current = resolveOptions(prev, partial);
@@ -4658,7 +5202,7 @@ var PolyFirstPersonControls = (0, import_react20.forwardRef)(function PolyFirstP
     const host = cameraElRef.current;
     const perspStr = host ? getComputedStyle(host).perspective : "";
     const n = parseFloat(perspStr);
-    return (Number.isFinite(n) && n > 0 ? n : 8e3) / import_polycss_core17.BASE_TILE;
+    return (Number.isFinite(n) && n > 0 ? n : 32e3) / import_polycss_core20.BASE_TILE;
   }
   function deriveTarget() {
     const s = cameraRef.current.state;
@@ -4747,7 +5291,7 @@ var PolyFirstPersonControls = (0, import_react20.forwardRef)(function PolyFirstP
     cancelAnimationFrame(rafIdRef.current);
     rafIdRef.current = null;
   }
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const host = cameraElRef.current;
     if (!host) return;
     const doc = host.ownerDocument ?? document;
@@ -4885,7 +5429,7 @@ var PolyFirstPersonControls = (0, import_react20.forwardRef)(function PolyFirstP
       }
     };
   }, [cameraElRef, cameraRef, applyTransformDirect, store]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     optsRef.current = resolveOptions(optsRef.current, props);
     const host = cameraElRef.current;
     if (host && !stoppedRef.current) {
@@ -4896,10 +5440,10 @@ var PolyFirstPersonControls = (0, import_react20.forwardRef)(function PolyFirstP
 });
 // src/controls/PolyMapControls.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 // src/controls/sharedControls.ts
-var import_polycss_core18 = require("@layoutit/polycss-core");
+var import_polycss_core21 = require("@layoutit/polycss-core");
 var POINTER_DRAG_SPEED = 4;
 function invertFactor(invert) {
   if (invert === true) return -1;
@@ -4910,7 +5454,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 });
 }
@@ -4920,7 +5464,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 * import_polycss_core18.BASE_TILE;
+  const k = z * import_polycss_core21.BASE_TILE;
   const targetD0 = (dx * sZ - dy * cZ / cosRotX) / k;
   const targetD1 = -(dx * cZ + dy * sZ / cosRotX) / k;
   const t = s.target;
@@ -5069,19 +5613,19 @@ function PolyMapControls({
   onInteractionEnd
 }) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const dragRef = (0, import_react21.useRef)(drag);
-  const wheelRef = (0, import_react21.useRef)(wheel);
-  const dollyRef = (0, import_react21.useRef)(dolly);
-  const invertRef = (0, import_react21.useRef)(invert);
-  const zoomMinRef = (0, import_react21.useRef)(minZoom);
-  const zoomMaxRef = (0, import_react21.useRef)(maxZoom);
-  const distanceMinRef = (0, import_react21.useRef)(minDistance);
-  const distanceMaxRef = (0, import_react21.useRef)(maxDistance);
-  const animateRef = (0, import_react21.useRef)(animate);
-  const onChangeRef = (0, import_react21.useRef)(onChange);
-  const onInteractionStartRef = (0, import_react21.useRef)(onInteractionStart);
-  const onInteractionEndRef = (0, import_react21.useRef)(onInteractionEnd);
-  (0, import_react21.useEffect)(() => {
+  const dragRef = (0, import_react22.useRef)(drag);
+  const wheelRef = (0, import_react22.useRef)(wheel);
+  const dollyRef = (0, import_react22.useRef)(dolly);
+  const invertRef = (0, import_react22.useRef)(invert);
+  const zoomMinRef = (0, import_react22.useRef)(minZoom);
+  const zoomMaxRef = (0, import_react22.useRef)(maxZoom);
+  const distanceMinRef = (0, import_react22.useRef)(minDistance);
+  const distanceMaxRef = (0, import_react22.useRef)(maxDistance);
+  const animateRef = (0, import_react22.useRef)(animate);
+  const onChangeRef = (0, import_react22.useRef)(onChange);
+  const onInteractionStartRef = (0, import_react22.useRef)(onInteractionStart);
+  const onInteractionEndRef = (0, import_react22.useRef)(onInteractionEnd);
+  (0, import_react22.useEffect)(() => {
     dragRef.current = drag;
     wheelRef.current = wheel;
     dollyRef.current = dolly;
@@ -5126,8 +5670,8 @@ function PolyMapControls({
       console.error("[polycss/react] PolyMapControls onInteractionEnd threw:", err);
     }
   };
-  const animationPausedShared = (0, import_react21.useRef)({ value: false }).current;
-  (0, import_react21.useEffect)(() => {
+  const animationPausedShared = (0, import_react22.useRef)({ value: false }).current;
+  (0, import_react22.useEffect)(() => {
     if (!drag) return;
     const el = cameraElRef.current;
     if (!el) return;
@@ -5237,12 +5781,12 @@ function PolyMapControls({
       el.style.userSelect = "";
     };
   }, [drag, applyTransformDirect, cameraElRef, cameraRef, store]);
-  (0, import_react21.useEffect)(
+  (0, import_react22.useEffect)(
     () => makeWheelEffect({ wheel, dollyRef, wheelRef, zoomMinRef, zoomMaxRef, distanceMinRef, distanceMaxRef, cameraElRef, cameraRef, applyTransformDirect, store, fireStart, fireChange, fireEnd }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [wheel, applyTransformDirect, cameraElRef, cameraRef, store]
   );
-  (0, import_react21.useEffect)(
+  (0, import_react22.useEffect)(
     () => makeAnimateEffect({ animateOn: !!animate, animateRef, animationPausedShared, applyTransformDirect, cameraRef, store, fireChange }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [!!animate, animationPausedShared, applyTransformDirect, cameraRef, store]
@@ -5251,7 +5795,7 @@ function PolyMapControls({
 }
 // src/controls/PolyOrbitControls.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 function PolyOrbitControls({
   drag = true,
   wheel = true,
@@ -5267,19 +5811,19 @@ function PolyOrbitControls({
   onInteractionEnd
 }) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const dragRef = (0, import_react22.useRef)(drag);
-  const wheelRef = (0, import_react22.useRef)(wheel);
-  const dollyRef = (0, import_react22.useRef)(dolly);
-  const invertRef = (0, import_react22.useRef)(invert);
-  const zoomMinRef = (0, import_react22.useRef)(minZoom);
-  const zoomMaxRef = (0, import_react22.useRef)(maxZoom);
-  const distanceMinRef = (0, import_react22.useRef)(minDistance);
-  const distanceMaxRef = (0, import_react22.useRef)(maxDistance);
-  const animateRef = (0, import_react22.useRef)(animate);
-  const onChangeRef = (0, import_react22.useRef)(onChange);
-  const onInteractionStartRef = (0, import_react22.useRef)(onInteractionStart);
-  const onInteractionEndRef = (0, import_react22.useRef)(onInteractionEnd);
-  (0, import_react22.useEffect)(() => {
+  const dragRef = (0, import_react23.useRef)(drag);
+  const wheelRef = (0, import_react23.useRef)(wheel);
+  const dollyRef = (0, import_react23.useRef)(dolly);
+  const invertRef = (0, import_react23.useRef)(invert);
+  const zoomMinRef = (0, import_react23.useRef)(minZoom);
+  const zoomMaxRef = (0, import_react23.useRef)(maxZoom);
+  const distanceMinRef = (0, import_react23.useRef)(minDistance);
+  const distanceMaxRef = (0, import_react23.useRef)(maxDistance);
+  const animateRef = (0, import_react23.useRef)(animate);
+  const onChangeRef = (0, import_react23.useRef)(onChange);
+  const onInteractionStartRef = (0, import_react23.useRef)(onInteractionStart);
+  const onInteractionEndRef = (0, import_react23.useRef)(onInteractionEnd);
+  (0, import_react23.useEffect)(() => {
     dragRef.current = drag;
     wheelRef.current = wheel;
     dollyRef.current = dolly;
@@ -5324,8 +5868,8 @@ function PolyOrbitControls({
       console.error("[polycss/react] PolyOrbitControls onInteractionEnd threw:", err);
     }
   };
-  const animationPausedShared = (0, import_react22.useRef)({ value: false }).current;
-  (0, import_react22.useEffect)(() => {
+  const animationPausedShared = (0, import_react23.useRef)({ value: false }).current;
+  (0, import_react23.useEffect)(() => {
     if (!drag) return;
     const el = cameraElRef.current;
     if (!el) return;
@@ -5435,12 +5979,12 @@ function PolyOrbitControls({
       el.style.userSelect = "";
     };
   }, [drag, applyTransformDirect, cameraElRef, cameraRef, store]);
-  (0, import_react22.useEffect)(
+  (0, import_react23.useEffect)(
     () => makeWheelEffect({ wheel, dollyRef, wheelRef, zoomMinRef, zoomMaxRef, distanceMinRef, distanceMaxRef, cameraElRef, cameraRef, applyTransformDirect, store, fireStart, fireChange, fireEnd }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [wheel, applyTransformDirect, cameraElRef, cameraRef, store]
   );
-  (0, import_react22.useEffect)(
+  (0, import_react23.useEffect)(
     () => makeAnimateEffect({ animateOn: !!animate, animateRef, animationPausedShared, applyTransformDirect, cameraRef, store, fireChange }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [!!animate, animationPausedShared, applyTransformDirect, cameraRef, store]
@@ -5449,10 +5993,10 @@ function PolyOrbitControls({
 }
 // src/controls/TransformControls.tsx
-var import_react23 = require("react");
-var import_polycss_core19 = require("@layoutit/polycss-core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FALLBACK_CAMERA_STORE = createSceneStore(import_polycss_core19.DEFAULT_CAMERA_STATE);
+var import_react24 = require("react");
+var import_polycss_core22 = require("@layoutit/polycss-core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FALLBACK_CAMERA_STORE = createSceneStore(import_polycss_core22.DEFAULT_CAMERA_STATE);
 var COLOR_X = "#ff3653";
 var COLOR_Y = "#8adb00";
 var COLOR_Z = "#2c8fff";
@@ -5729,7 +6273,7 @@ function startRingDrag(opts) {
   const startRotation = target.getRotation() ?? [0, 0, 0];
   onMouseDown?.();
   onDraggingChanged?.(true);
-  const qStart = (0, import_polycss_core19.quatFromEulerXYZ)(startRotation);
+  const qStart = (0, import_polycss_core22.quatFromEulerXYZ)(startRotation);
   const handleMove = (ev) => {
     const a = Math.atan2(ev.clientY - centerY, ev.clientX - centerX);
     let d = a - lastAngle;
@@ -5741,8 +6285,8 @@ function startRingDrag(opts) {
     degrees = snap(degrees, rotationSnap);
     const axisVec = [0, 0, 0];
     axisVec[cssAxis] = 1;
-    const qDelta = (0, import_polycss_core19.quatFromAxisAngle)(axisVec, degrees * Math.PI / 180);
-    const newRotation = (0, import_polycss_core19.eulerXYZFromQuat)((0, import_polycss_core19.quatMultiply)(qDelta, qStart));
+    const qDelta = (0, import_polycss_core22.quatFromAxisAngle)(axisVec, degrees * Math.PI / 180);
+    const newRotation = (0, import_polycss_core22.eulerXYZFromQuat)((0, import_polycss_core22.quatMultiply)(qDelta, qStart));
     onObjectChange?.({ object: target, rotation: newRotation });
     onChange?.();
   };
@@ -5781,11 +6325,11 @@ function PolyTransformControls({
   onMouseUp,
   onDraggingChanged
 }) {
-  const [, forceRender] = (0, import_react23.useState)(0);
-  (0, import_react23.useEffect)(() => {
+  const [, forceRender] = (0, import_react24.useState)(0);
+  (0, import_react24.useEffect)(() => {
     forceRender((n) => n + 1);
   }, [object]);
-  const cameraCtxForRot = (0, import_react23.useContext)(PolyCameraContext);
+  const cameraCtxForRot = (0, import_react24.useContext)(PolyCameraContext);
   const rotX = useStoreSelector(
     cameraCtxForRot?.store ?? FALLBACK_CAMERA_STORE,
     (s) => s.cameraState.rotX
@@ -5794,11 +6338,11 @@ function PolyTransformControls({
     cameraCtxForRot?.store ?? FALLBACK_CAMERA_STORE,
     (s) => s.cameraState.rotY
   );
-  const [hoveredKey, setHoveredKey] = (0, import_react23.useState)(null);
-  const [draggingKey, setDraggingKey] = (0, import_react23.useState)(null);
-  const cameraCtx = (0, import_react23.useContext)(PolyCameraContext);
+  const [hoveredKey, setHoveredKey] = (0, import_react24.useState)(null);
+  const [draggingKey, setDraggingKey] = (0, import_react24.useState)(null);
+  const cameraCtx = (0, import_react24.useContext)(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef;
-  const dragRef = (0, import_react23.useRef)({
+  const dragRef = (0, import_react24.useRef)({
     target: null,
     mode: "translate",
     shaftLengthCss: 0,
@@ -5807,7 +6351,7 @@ function PolyTransformControls({
     translationSnap: null,
     rotationSnap: null
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const cameraEl = cameraElRef?.current;
     if (!cameraEl) return;
     const onPointerDown = (event) => {
@@ -5929,10 +6473,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;
@@ -5961,7 +6508,7 @@ function PolyTransformControls({
     // own; descendants opt in via the default `auto`.
     zIndex: 1e3
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: "polycss-transform-controls",
@@ -5977,7 +6524,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__ */ (0, import_jsx_runtime12.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TranslateArrow,
             {
               cssAxis: spec.cssAxis,
@@ -6009,7 +6556,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__ */ (0, import_jsx_runtime12.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TranslatePlane,
             {
               axisA: spec.axisA,
@@ -6041,7 +6588,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__ */ (0, import_jsx_runtime12.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             RotateRing,
             {
               cssAxis: spec.cssAxis,
@@ -6086,7 +6633,7 @@ function TranslateArrow({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = (0, import_react23.useRef)({
+  const cbRef = (0, import_react24.useRef)({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6108,9 +6655,9 @@ function TranslateArrow({
     enabled,
     translationSnap
   };
-  const polygons = (0, import_react23.useMemo)(() => {
+  const polygons = (0, import_react24.useMemo)(() => {
     const lengthWorld = shaftLengthCss / SCENE_TILE_SIZE;
-    return (0, import_polycss_core19.arrowPolygons)({
+    return (0, import_polycss_core22.arrowPolygons)({
       axis: WORLD_AXIS_FOR_CSS[cssAxis],
       sign,
       shaftLength: lengthWorld,
@@ -6121,7 +6668,7 @@ function TranslateArrow({
       shaft: includeShaft
     });
   }, [cssAxis, sign, color, shaftLengthCss, includeShaft]);
-  const onPointerDown = (0, import_react23.useCallback)(
+  const onPointerDown = (0, import_react24.useCallback)(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -6150,7 +6697,7 @@ function TranslateArrow({
     },
     [cssAxis, sign, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     PolyMesh,
     {
       polygons,
@@ -6183,7 +6730,7 @@ function TranslatePlane({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = (0, import_react23.useRef)({
+  const cbRef = (0, import_react24.useRef)({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6205,7 +6752,7 @@ function TranslatePlane({
     enabled,
     translationSnap
   };
-  const polygons = (0, import_react23.useMemo)(() => {
+  const polygons = (0, import_react24.useMemo)(() => {
     const lengthWorld = shaftLengthCss / SCENE_TILE_SIZE;
     const worldPerp = WORLD_AXIS_FOR_CSS[perpAxis];
     const worldA = (worldPerp + 1) % 3;
@@ -6215,14 +6762,14 @@ function TranslatePlane({
     const signA = isAxisBackFacing(cssAForOffset, 1, rotX, rotY) ? -1 : 1;
     const signB = isAxisBackFacing(cssBForOffset, 1, rotX, rotY) ? -1 : 1;
     const mag = lengthWorld * PLANE_OFFSET_RATIO;
-    return (0, import_polycss_core19.planePolygons)({
+    return (0, import_polycss_core22.planePolygons)({
       axis: worldPerp,
       size: lengthWorld * PLANE_HALF_SIZE_RATIO,
       offset: [signA * mag, signB * mag],
       color
     });
   }, [perpAxis, color, shaftLengthCss, rotX, rotY]);
-  const onPointerDown = (0, import_react23.useCallback)(
+  const onPointerDown = (0, import_react24.useCallback)(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -6251,7 +6798,7 @@ function TranslatePlane({
     },
     [axisA, axisB, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     PolyMesh,
     {
       polygons,
@@ -6280,7 +6827,7 @@ function RotateRing({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = (0, import_react23.useRef)({
+  const cbRef = (0, import_react24.useRef)({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -6302,10 +6849,10 @@ function RotateRing({
     enabled,
     rotationSnap
   };
-  const polygons = (0, import_react23.useMemo)(() => {
+  const polygons = (0, import_react24.useMemo)(() => {
     const radiusWorld = radiusCss / SCENE_TILE_SIZE;
     const outerWorld = radiusWorld * RING_QUAD_OUTER_RATIO;
-    return (0, import_polycss_core19.ringQuadPolygons)({
+    return (0, import_polycss_core22.ringQuadPolygons)({
       axis: WORLD_AXIS_FOR_CSS[cssAxis],
       outerRadius: outerWorld,
       color
@@ -6313,7 +6860,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 = (0, import_react23.useCallback)(
+  const onPointerDown = (0, import_react24.useCallback)(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -6340,7 +6887,7 @@ function RotateRing({
     },
     [cssAxis, target]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     PolyMesh,
     {
       polygons,
@@ -6358,9 +6905,9 @@ function RotateRing({
 }
 // src/select/Select.tsx
-var import_react24 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var SelectContext = (0, import_react24.createContext)(null);
+var import_react25 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SelectContext = (0, import_react25.createContext)(null);
 function PolySelect({
   multiple = false,
   filter,
@@ -6371,19 +6918,19 @@ function PolySelect({
   className,
   style
 }) {
-  const [selected, setSelectedState] = (0, import_react24.useState)([]);
-  const filterRef = (0, import_react24.useRef)(filter);
+  const [selected, setSelectedState] = (0, import_react25.useState)([]);
+  const filterRef = (0, import_react25.useRef)(filter);
   filterRef.current = filter;
-  const onChangeRef = (0, import_react24.useRef)(onChange);
+  const onChangeRef = (0, import_react25.useRef)(onChange);
   onChangeRef.current = onChange;
-  const multipleRef = (0, import_react24.useRef)(multiple);
+  const multipleRef = (0, import_react25.useRef)(multiple);
   multipleRef.current = multiple;
-  const apply = (0, import_react24.useCallback)((next) => {
+  const apply = (0, import_react25.useCallback)((next) => {
     const filtered = filterRef.current ? filterRef.current(next) : next;
     setSelectedState(filtered);
     if (onChangeRef.current) onChangeRef.current(filtered);
   }, []);
-  const api = (0, import_react24.useMemo)(() => {
+  const api = (0, import_react25.useMemo)(() => {
     return {
       selected,
       set: (next) => apply(next),
@@ -6416,14 +6963,14 @@ function PolySelect({
       has: (h) => selected.includes(h)
     };
   }, [selected, apply]);
-  const wrapperRef = (0, import_react24.useRef)(null);
-  const cameraCtx = (0, import_react24.useContext)(PolyCameraContext);
+  const wrapperRef = (0, import_react25.useRef)(null);
+  const cameraCtx = (0, import_react25.useContext)(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef;
-  const clearOnMissRef = (0, import_react24.useRef)(clearOnMiss);
+  const clearOnMissRef = (0, import_react25.useRef)(clearOnMiss);
   clearOnMissRef.current = clearOnMiss;
-  const onPointerMissedRef = (0, import_react24.useRef)(onPointerMissed);
+  const onPointerMissedRef = (0, import_react25.useRef)(onPointerMissed);
   onPointerMissedRef.current = onPointerMissed;
-  const findMeshUnderPoint2 = (0, import_react24.useCallback)(
+  const findMeshUnderPoint2 = (0, import_react25.useCallback)(
     (clientX, clientY) => findMeshUnderPoint(
       clientX,
       clientY,
@@ -6431,7 +6978,7 @@ function PolySelect({
     ),
     []
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const cameraEl = cameraElRef?.current;
     if (!cameraEl) return;
     const onClick = (event) => {
@@ -6478,7 +7025,7 @@ function PolySelect({
     }
   };
   const wrapperStyle = { display: "contents", ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ref: wrapperRef,
@@ -6491,10 +7038,10 @@ function PolySelect({
   ) });
 }
 function usePolySelect() {
-  return (0, import_react24.useContext)(SelectContext)?.selected ?? [];
+  return (0, import_react25.useContext)(SelectContext)?.selected ?? [];
 }
 function usePolySelectionApi() {
-  const ctx = (0, import_react24.useContext)(SelectContext);
+  const ctx = (0, import_react25.useContext)(SelectContext);
   if (!ctx) {
     throw new Error("polycss: usePolySelectionApi must be used inside <PolySelect>.");
   }
@@ -6502,9 +7049,9 @@ function usePolySelectionApi() {
 }
 // src/helpers/PolyAxesHelper.tsx
-var import_react25 = require("react");
-var import_polycss_core20 = require("@layoutit/polycss-core");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_polycss_core23 = require("@layoutit/polycss-core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function PolyAxesHelper({
   size,
   thickness,
@@ -6513,18 +7060,17 @@ function PolyAxesHelper({
   yColor,
   zColor
 }) {
-  const polygons = (0, import_react25.useMemo)(
-    () => (0, import_polycss_core20.axesHelperPolygons)({ size, thickness, negative, xColor, yColor, zColor }),
+  const polygons = (0, import_react26.useMemo)(
+    () => (0, import_polycss_core23.axesHelperPolygons)({ size, thickness, negative, xColor, yColor, zColor }),
     [size, thickness, negative, xColor, yColor, zColor]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PolyMesh, { polygons });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PolyMesh, { polygons, merge: false });
 }
 // src/helpers/PolyDirectionalLightHelper.tsx
-var import_react26 = require("react");
-var import_polycss_core21 = require("@layoutit/polycss-core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TILE = 50;
+var import_react27 = require("react");
+var import_polycss_core24 = require("@layoutit/polycss-core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function PolyDirectionalLightHelper({
   light,
   target,
@@ -6533,26 +7079,27 @@ function PolyDirectionalLightHelper({
   color
 }) {
   const swatch = color ?? light.color ?? "#ffd54a";
-  const polygons = (0, import_react26.useMemo)(
-    () => (0, import_polycss_core21.octahedronPolygons)({ center: [0, 0, 0], size, color: swatch }),
+  const polygons = (0, import_react27.useMemo)(
+    () => (0, import_polycss_core24.octahedronPolygons)({ center: [0, 0, 0], size, color: swatch }),
     [size, swatch]
   );
-  const meshPosition = (0, import_react26.useMemo)(() => {
+  const meshPosition = (0, import_react27.useMemo)(() => {
     const [dx, dy, dz] = light.direction;
     const len = Math.hypot(dx, dy, dz) || 1;
     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__ */ (0, import_jsx_runtime15.jsx)(PolyMesh, { polygons, position: meshPosition });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PolyMesh, { polygons, position: meshPosition, merge: false });
 }
 // src/styles/colorResolver.ts
-var import_polycss_core22 = require("@layoutit/polycss-core");
+var import_polycss_core25 = require("@layoutit/polycss-core");
 // src/renderStats.ts
 var ZERO_SURFACE_LEAF_COUNTS = {
@@ -6606,7 +7153,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;
@@ -6620,17 +7167,17 @@ function collectPolyRenderStats(root, optionsOrPolygonCount) {
 }
 // src/animation/usePolyAnimation.ts
-var import_react27 = require("react");
-var import_polycss_core23 = require("@layoutit/polycss-core");
+var import_react28 = require("react");
+var import_polycss_core26 = require("@layoutit/polycss-core");
 function resolveRoot(rootArg) {
   if (!rootArg) return null;
   if ("current" in rootArg) return rootArg.current;
   return rootArg;
 }
 function usePolyAnimation(clips, controller, root) {
-  const internalRef = (0, import_react27.useRef)(null);
-  const mixerRef = (0, import_react27.useRef)(null);
-  (0, import_react27.useEffect)(() => {
+  const internalRef = (0, import_react28.useRef)(null);
+  const mixerRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     if (!clips || clips.length === 0 || !controller) {
       mixerRef.current = null;
       return;
@@ -6640,14 +7187,14 @@ function usePolyAnimation(clips, controller, root) {
       mixerRef.current = null;
       return;
     }
-    mixerRef.current = (0, import_polycss_core23.createPolyAnimationMixer)(resolvedRoot, controller);
+    mixerRef.current = (0, import_polycss_core26.createPolyAnimationMixer)(resolvedRoot, controller);
     return () => {
       mixerRef.current?.stopAllAction();
       mixerRef.current?.uncacheRoot();
       mixerRef.current = null;
     };
   }, [clips, controller]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!clips || clips.length === 0 || !controller) return;
     let rafId;
     let lastTime = null;
@@ -6670,7 +7217,7 @@ function usePolyAnimation(clips, controller, root) {
   }, [clips, controller]);
   const resolvedClips = clips ?? [];
   const resolvedNames = resolvedClips.map((c) => c.name);
-  const actions = (0, import_react27.useMemo)(() => {
+  const actions = (0, import_react28.useMemo)(() => {
     const target = {};
     for (const clip of resolvedClips) {
       Object.defineProperty(target, clip.name, {
@@ -6698,7 +7245,7 @@ function usePolyAnimation(clips, controller, root) {
 }
 // src/index.ts
-var import_polycss_core24 = require("@layoutit/polycss-core");
+var import_polycss_core27 = require("@layoutit/polycss-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BASE_TILE,
@@ -6722,6 +7269,7 @@ var import_polycss_core24 = require("@layoutit/polycss-core");
   PolyFirstPersonControls,
   PolyGround,
   PolyIcosahedron,
+  PolyIframe,
   PolyMapControls,
   PolyMesh,
   PolyOctahedron,
@@ -6743,6 +7291,7 @@ var import_polycss_core24 = require("@layoutit/polycss-core");
   bakeSolidTextureSampledPolygons,
   bakeSolidTextureSamples,
   boxPolygons,
+  buildPolyMeshTransform,
   buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
@@ -6776,6 +7325,7 @@ var import_polycss_core24 = require("@layoutit/polycss-core");
   normalizePolygons,
   octahedronPolygons,
   optimizeAnimatedMeshPolygons,
+  optimizeMeshParseResult,
   optimizeMeshPolygons,
   parseColor,
   parseGltf,
@@ -6784,6 +7334,7 @@ var import_polycss_core24 = require("@layoutit/polycss-core");
   parseObj,
   parsePureColor,
   parseRgbColor,
+  parseStl,
   parseVox,
   planePolygons,
   pointInMeshElement,
@@ -6799,6 +7350,7 @@ var import_polycss_core24 = require("@layoutit/polycss-core");
   seamOverlapPolygons,
   seamOverlapReport,
   shadeColor,
+  simplifyTriangleMeshPolygons,
   tetrahedronPolygons,
   torusPolygons,
   useCameraContext,
@@ -6808,5 +7360,7 @@ var import_polycss_core24 = require("@layoutit/polycss-core");
   usePolyMesh,
   usePolySceneContext,
   usePolySelect,
-  usePolySelectionApi
+  usePolySelectionApi,
+  worldDirectionToPolyCss,
+  worldPositionToPolyCss
 });