@layoutit/polycss-react 0.2.4 → 0.2.6

package/dist/index.cjs

@@ -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_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,
+  BASE_TILE: () => import_polycss_core28.BASE_TILE,
+  CAMERA_BACKFACE_CULL_EPS: () => import_polycss_core28.CAMERA_BACKFACE_CULL_EPS,
+  DEFAULT_CAMERA_STATE: () => import_polycss_core28.DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION: () => import_polycss_core28.DEFAULT_PROJECTION,
+  DEFAULT_SEAM_FACET_SPLIT_OPTIONS: () => import_polycss_core28.DEFAULT_SEAM_FACET_SPLIT_OPTIONS,
+  DEFAULT_SEAM_OVERLAP_OPTIONS: () => import_polycss_core28.DEFAULT_SEAM_OVERLAP_OPTIONS,
+  LoopOnce: () => import_polycss_core28.LoopOnce,
+  LoopPingPong: () => import_polycss_core28.LoopPingPong,
+  LoopRepeat: () => import_polycss_core28.LoopRepeat,
   Poly: () => Poly,
   PolyAxesHelper: () => PolyAxesHelper,
   PolyBox: () => PolyBox,
@@ -56,77 +56,86 @@ __export(src_exports, {
   PolyTetrahedron: () => PolyTetrahedron,
   PolyTorus: () => PolyTorus,
   PolyTransformControls: () => PolyTransformControls,
-  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,
+  VOXEL_CAMERA_CULL_AXIS_EPS: () => import_polycss_core28.VOXEL_CAMERA_CULL_AXIS_EPS,
+  VOXEL_CAMERA_CULL_NORMAL_LIMIT: () => import_polycss_core28.VOXEL_CAMERA_CULL_NORMAL_LIMIT,
+  arrowPolygons: () => import_polycss_core28.arrowPolygons,
+  axesHelperPolygons: () => import_polycss_core28.axesHelperPolygons,
+  bakeSolidTextureSampledPolygons: () => import_polycss_core28.bakeSolidTextureSampledPolygons,
+  bakeSolidTextureSamples: () => import_polycss_core28.bakeSolidTextureSamples,
+  boxPolygons: () => import_polycss_core28.boxPolygons,
+  buildPolyCameraSceneTransform: () => import_polycss_core28.buildPolyCameraSceneTransform,
+  buildPolyMeshTransform: () => import_polycss_core28.buildPolyMeshTransform,
+  buildPolySceneTransform: () => import_polycss_core28.buildPolySceneTransform,
+  buildSceneContext: () => import_polycss_core28.buildSceneContext,
+  cameraCullNormalGroups: () => import_polycss_core28.cameraCullNormalGroups,
+  cameraCullNormalGroupsFromPolygons: () => import_polycss_core28.cameraCullNormalGroupsFromPolygons,
+  cameraCullNormalKey: () => import_polycss_core28.cameraCullNormalKey,
+  cameraCullVisibleSignature: () => import_polycss_core28.cameraCullVisibleSignature,
+  cameraFacingDepth: () => import_polycss_core28.cameraFacingDepth,
+  capturePolyCameraSnapshot: () => import_polycss_core28.capturePolyCameraSnapshot,
+  clampChannel: () => import_polycss_core28.clampChannel,
   collectPolyRenderStats: () => collectPolyRenderStats,
-  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,
+  collectPolyTextureReadiness: () => collectPolyTextureReadiness,
+  computeSceneBbox: () => import_polycss_core28.computeSceneBbox,
+  computeShapeLighting: () => import_polycss_core28.computeShapeLighting,
+  computeTexturePaintMetrics: () => import_polycss_core28.computeTexturePaintMetrics,
+  conePolygons: () => import_polycss_core28.conePolygons,
+  coverPlanarPolygons: () => import_polycss_core28.coverPlanarPolygons,
+  createIsometricCamera: () => import_polycss_core28.createIsometricCamera,
+  createPolyAnimationMixer: () => import_polycss_core28.createPolyAnimationMixer,
+  cssDistanceToWorld: () => import_polycss_core28.cssDistanceToWorld,
+  cssPositionToWorld: () => import_polycss_core28.cssPositionToWorld,
+  cullInteriorPolygons: () => import_polycss_core28.cullInteriorPolygons,
+  cylinderPolygons: () => import_polycss_core28.cylinderPolygons,
+  dodecahedronPolygons: () => import_polycss_core28.dodecahedronPolygons,
   findMeshUnderPoint: () => findMeshUnderPoint,
   findPolyMeshHandle: () => findPolyMeshHandle,
-  formatColor: () => import_polycss_core27.formatColor,
-  icosahedronPolygons: () => import_polycss_core27.icosahedronPolygons,
+  formatColor: () => import_polycss_core28.formatColor,
+  icosahedronPolygons: () => import_polycss_core28.icosahedronPolygons,
   injectPolyBaseStyles: () => injectPolyBaseStyles,
-  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,
+  inverseRotateVec3: () => import_polycss_core28.inverseRotateVec3,
+  isAxisAlignedSurfaceNormal: () => import_polycss_core28.isAxisAlignedSurfaceNormal,
+  isVoxelCameraCullableNormalGroups: () => import_polycss_core28.isVoxelCameraCullableNormalGroups,
+  loadMesh: () => import_polycss_core28.loadMesh,
+  mergePolygons: () => import_polycss_core28.mergePolygons,
+  normalFacesCamera: () => import_polycss_core28.normalFacesCamera,
+  normalizeInvertMultiplier: () => import_polycss_core28.normalizeInvertMultiplier,
+  normalizePolygons: () => import_polycss_core28.normalizePolygons,
+  octahedronPolygons: () => import_polycss_core28.octahedronPolygons,
+  optimizeAnimatedMeshPolygons: () => import_polycss_core28.optimizeAnimatedMeshPolygons,
+  optimizeMeshParseResult: () => import_polycss_core28.optimizeMeshParseResult,
+  optimizeMeshPolygons: () => import_polycss_core28.optimizeMeshPolygons,
+  parseColor: () => import_polycss_core28.parseColor,
+  parseGltf: () => import_polycss_core28.parseGltf,
+  parseHexColor: () => import_polycss_core28.parseHexColor,
+  parseMtl: () => import_polycss_core28.parseMtl,
+  parseObj: () => import_polycss_core28.parseObj,
+  parsePureColor: () => import_polycss_core28.parsePureColor,
+  parseRgbColor: () => import_polycss_core28.parseRgbColor,
+  parseStl: () => import_polycss_core28.parseStl,
+  parseVox: () => import_polycss_core28.parseVox,
+  planePolygons: () => import_polycss_core28.planePolygons,
   pointInMeshElement: () => pointInMeshElement,
-  polyCssDistanceToWorld: () => import_polycss_core27.cssDistanceToWorld,
-  polyCssPositionToWorld: () => import_polycss_core27.cssPositionToWorld,
-  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,
+  polyCameraTargetToCss: () => import_polycss_core28.polyCameraTargetToCss,
+  polyCssDistanceToWorld: () => import_polycss_core28.polyCssDistanceToWorld,
+  polyCssPositionToWorld: () => import_polycss_core28.polyCssPositionToWorld,
+  polygonCssSurfaceNormal: () => import_polycss_core28.polygonCssSurfaceNormal,
+  polygonFaces: () => import_polycss_core28.polygonFaces,
+  polygonFacesCamera: () => import_polycss_core28.polygonFacesCamera,
+  queryPolyLeaves: () => queryPolyLeaves,
+  repairMeshSeams: () => import_polycss_core28.repairMeshSeams,
+  resolvePolyCameraAppliedPerspectiveStyle: () => import_polycss_core28.resolvePolyCameraAppliedPerspectiveStyle,
+  ringPolygons: () => import_polycss_core28.ringPolygons,
+  rotateVec3: () => import_polycss_core28.rotateVec3,
+  seamFacetSplitPolygons: () => import_polycss_core28.seamFacetSplitPolygons,
+  seamFacetSplitReport: () => import_polycss_core28.seamFacetSplitReport,
+  seamOverlapDiagnostics: () => import_polycss_core28.seamOverlapDiagnostics,
+  seamOverlapPolygons: () => import_polycss_core28.seamOverlapPolygons,
+  seamOverlapReport: () => import_polycss_core28.seamOverlapReport,
+  shadeColor: () => import_polycss_core28.shadeColor,
+  simplifyTriangleMeshPolygons: () => import_polycss_core28.simplifyTriangleMeshPolygons,
+  tetrahedronPolygons: () => import_polycss_core28.tetrahedronPolygons,
+  torusPolygons: () => import_polycss_core28.torusPolygons,
   useCameraContext: () => useCameraContext,
   usePolyAnimation: () => usePolyAnimation,
   usePolyCamera: () => usePolyCamera,
@@ -135,9 +144,14 @@ __export(src_exports, {
   usePolySceneContext: () => usePolySceneContext,
   usePolySelect: () => usePolySelect,
   usePolySelectionApi: () => usePolySelectionApi,
-  worldDirectionToPolyCss: () => import_polycss_core27.worldDirectionToCss,
-  worldDistanceToPolyCss: () => import_polycss_core27.worldDistanceToCss,
-  worldPositionToPolyCss: () => import_polycss_core27.worldPositionToCss
+  worldDirectionToCss: () => import_polycss_core28.worldDirectionToCss,
+  worldDirectionToPolyCss: () => import_polycss_core28.worldDirectionToPolyCss,
+  worldDirectionalLightToCss: () => import_polycss_core28.worldDirectionalLightToCss,
+  worldDirectionalLightToPolyCss: () => import_polycss_core28.worldDirectionalLightToPolyCss,
+  worldDistanceToCss: () => import_polycss_core28.worldDistanceToCss,
+  worldDistanceToPolyCss: () => import_polycss_core28.worldDistanceToPolyCss,
+  worldPositionToCss: () => import_polycss_core28.worldPositionToCss,
+  worldPositionToPolyCss: () => import_polycss_core28.worldPositionToPolyCss
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -203,6 +217,18 @@ function useStoreSelector(store, selector) {
 }
 
 // src/camera/useCamera.ts
+function writeCameraSnapshotAttrs(el, camera, projection, perspectiveStyle) {
+  if (!el) return;
+  const snapshot = (0, import_polycss_core.capturePolyCameraSnapshot)(camera, { projection, perspectiveStyle });
+  el.dataset.polycssCameraProjection = snapshot.projection;
+  el.dataset.polycssCameraPerspective = snapshot.perspectiveStyle;
+  el.dataset.polycssCameraAppliedPerspective = snapshot.appliedPerspectiveStyle;
+  el.dataset.polycssCameraZoom = String(snapshot.state.zoom);
+  el.dataset.polycssCameraDistance = String(snapshot.state.distance);
+  el.dataset.polycssCameraRotX = String(snapshot.state.rotX);
+  el.dataset.polycssCameraRotY = String(snapshot.state.rotY);
+  el.dataset.polycssCameraTarget = snapshot.state.target.join(",");
+}
 function usePolyCamera(options) {
   const handleRef = (0, import_react3.useRef)(null);
   if (!handleRef.current) {
@@ -232,40 +258,33 @@ function usePolyCamera(options) {
       handle.update(next);
       const el = sceneElRef.current;
       if (el) {
-        const s = handle.state;
-        const [ox, oy, oz] = store.getState().autoCenterOffset;
-        const tileSize = import_polycss_core.BASE_TILE;
-        const wx = s.target[0] + ox;
-        const wy = s.target[1] + oy;
-        const wz = s.target[2] + oz;
-        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(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+        el.style.transform = (0, import_polycss_core.buildPolyCameraSceneTransform)(handle.state, {
+          autoCenterOffset: store.getState().autoCenterOffset
+        });
       }
       store.updateCameraFromRef(handle);
       store.notifyAll();
     }
-  }, [options.zoom, options.target, options.rotX, options.rotY, options.distance, store]);
+    writeCameraSnapshotAttrs(cameraElRef.current, handle, options.projection, options.perspectiveStyle);
+  }, [
+    options.zoom,
+    options.target,
+    options.rotX,
+    options.rotY,
+    options.distance,
+    options.projection,
+    options.perspectiveStyle,
+    store
+  ]);
   const applyTransformDirect = (0, import_react3.useCallback)(() => {
     const el = sceneElRef.current;
     if (!el) return;
     const handle = handleRef.current;
-    const s = handle.state;
-    const [ox, oy, oz] = store.getState().autoCenterOffset;
-    const tileSize = import_polycss_core.BASE_TILE;
-    const wx = s.target[0] + ox;
-    const wy = s.target[1] + oy;
-    const wz = s.target[2] + oz;
-    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(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
-  }, [store]);
+    el.style.transform = (0, import_polycss_core.buildPolyCameraSceneTransform)(handle.state, {
+      autoCenterOffset: store.getState().autoCenterOffset
+    });
+    writeCameraSnapshotAttrs(cameraElRef.current, handle, options.projection, options.perspectiveStyle);
+  }, [store, options.projection, options.perspectiveStyle]);
   return {
     store,
     cameraRef: handleRef,
@@ -289,18 +308,26 @@ function PolyPerspectiveCameraInner({
   className,
   style
 }) {
+  const perspectiveValue = `${typeof perspective === "number" ? perspective : DEFAULT_PERSPECTIVE}px`;
   const {
     store,
     cameraRef,
     sceneElRef,
     cameraElRef,
     applyTransformDirect
-  } = usePolyCamera({ zoom, target, rotX, rotY, distance });
+  } = usePolyCamera({
+    zoom,
+    target,
+    rotX,
+    rotY,
+    distance,
+    projection: "perspective",
+    perspectiveStyle: perspectiveValue
+  });
   const contextValue = (0, import_react4.useMemo)(
     () => ({ store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect }),
     [store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect]
   );
-  const perspectiveValue = `${typeof perspective === "number" ? perspective : DEFAULT_PERSPECTIVE}px`;
   const cameraStyle = {
     ...style,
     perspective: perspectiveValue
@@ -311,6 +338,14 @@ function PolyPerspectiveCameraInner({
       ref: cameraElRef,
       className: `polycss-camera${className ? ` ${className}` : ""}`,
       style: cameraStyle,
+      "data-polycss-camera-projection": "perspective",
+      "data-polycss-camera-perspective": perspectiveValue,
+      "data-polycss-camera-applied-perspective": perspectiveValue,
+      "data-polycss-camera-zoom": cameraRef.current.state.zoom,
+      "data-polycss-camera-distance": cameraRef.current.state.distance,
+      "data-polycss-camera-rot-x": cameraRef.current.state.rotX,
+      "data-polycss-camera-rot-y": cameraRef.current.state.rotY,
+      "data-polycss-camera-target": cameraRef.current.state.target.join(","),
       children
     }
   ) });
@@ -336,7 +371,15 @@ function PolyOrthographicCameraInner({
     sceneElRef,
     cameraElRef,
     applyTransformDirect
-  } = usePolyCamera({ zoom, target, rotX, rotY, distance });
+  } = usePolyCamera({
+    zoom,
+    target,
+    rotX,
+    rotY,
+    distance,
+    projection: "orthographic",
+    perspectiveStyle: "none"
+  });
   const contextValue = (0, import_react5.useMemo)(
     () => ({ store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect }),
     [store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect]
@@ -356,6 +399,14 @@ function PolyOrthographicCameraInner({
       ref: cameraElRef,
       className: `polycss-camera${className ? ` ${className}` : ""}`,
       style: cameraStyle,
+      "data-polycss-camera-projection": "orthographic",
+      "data-polycss-camera-perspective": "none",
+      "data-polycss-camera-applied-perspective": "1000000px",
+      "data-polycss-camera-zoom": cameraRef.current.state.zoom,
+      "data-polycss-camera-distance": cameraRef.current.state.distance,
+      "data-polycss-camera-rot-x": cameraRef.current.state.rotX,
+      "data-polycss-camera-rot-y": cameraRef.current.state.rotY,
+      "data-polycss-camera-target": cameraRef.current.state.target.join(","),
       children
     }
   ) });
@@ -538,8 +589,8 @@ var CORE_BASE_STYLES = `
 }
 
 .polycss-scene s {
-  width: var(--polycss-atlas-size, 64px);
-  height: var(--polycss-atlas-size, 64px);
+  width: var(--polycss-atlas-width, var(--polycss-atlas-size, 64px));
+  height: var(--polycss-atlas-height, var(--polycss-atlas-size, 64px));
 }
 
 .polycss-scene u {
@@ -936,13 +987,16 @@ function isSolidTriangleSupported(doc) {
 
 // src/scene/atlas/filterPlans.ts
 var import_polycss_core4 = require("@layoutit/polycss-core");
-function filterAtlasPlans(plans, textureLighting, disabled, doc) {
+function filterAtlasPlans(plans, textureLighting, disabled, doc, textureBackend, textureImageRendering, textureProjection) {
   const d = doc ?? (typeof document !== "undefined" ? document : null);
   return (0, import_polycss_core4.filterAtlasPlans)(plans, textureLighting, disabled, {
     solidTriangleSupported: isSolidTriangleSupported(doc),
     projectiveQuadSupported: doc ? projectiveQuadSupported(doc) : true,
     borderShapeSupported: isBorderShapeSupported(doc),
-    cornerShapeSupported: d ? cornerShapeSupported(d) : false
+    cornerShapeSupported: d ? cornerShapeSupported(d) : false,
+    textureBackend,
+    textureImageRendering,
+    textureProjection
   });
 }
 
@@ -955,8 +1009,13 @@ function isMobileDocument(doc) {
   if (!media) return false;
   return media("(pointer: coarse)").matches || media("(hover: none)").matches;
 }
-function packTextureAtlasPlansWithScale(plans, textureQualityInput, doc) {
-  return (0, import_polycss_core5.packTextureAtlasPlansWithScaleCore)(plans, textureQualityInput, isMobileDocument(doc));
+function packTextureAtlasPlansWithScale(plans, textureQualityInput, doc, textureLeafSizing) {
+  return (0, import_polycss_core5.packTextureAtlasPlansWithScaleCore)(
+    plans,
+    textureQualityInput,
+    isMobileDocument(doc),
+    textureLeafSizing
+  );
 }
 
 // src/scene/atlas/buildAtlasPages.ts
@@ -2162,7 +2221,7 @@ function deferRevoke(urls) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
   else setTimeout(run, 0);
 }
-function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies, atomic = false) {
+function useTextureAtlas(plans, textureLighting, textureQualityInput, textureLeafSizing, textureBackend, textureImageRendering, textureProjection, strategies, atomic = false) {
   const disabled = (0, import_react7.useMemo)(
     () => new Set(strategies?.disable ?? []),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2173,17 +2232,21 @@ function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies
       plans,
       textureLighting,
       disabled,
-      typeof document !== "undefined" ? document : null
+      typeof document !== "undefined" ? document : null,
+      textureBackend,
+      textureImageRendering,
+      textureProjection
     ),
-    [plans, textureLighting, disabled]
+    [plans, textureLighting, disabled, textureBackend, textureImageRendering, textureProjection]
   );
   const { packed, atlasScale } = (0, import_react7.useMemo)(
     () => packTextureAtlasPlansWithScale(
       atlasPlans,
       textureQualityInput,
-      typeof document !== "undefined" ? document : null
+      typeof document !== "undefined" ? document : null,
+      textureLeafSizing
     ),
-    [atlasPlans, textureQualityInput]
+    [atlasPlans, textureQualityInput, textureLeafSizing]
   );
   const [pages, setPages] = (0, import_react7.useState)(() => pageShells(packed.pages));
   const [frame, setFrame] = (0, import_react7.useState)(() => ({
@@ -2533,6 +2596,7 @@ var TextureAtlasPoly = (0, import_react12.memo)(function TextureAtlasPoly2({
   entry,
   page,
   textureLighting,
+  textureImageRendering,
   solidPaintDefaults: _solidPaintDefaults,
   className,
   style: styleProp,
@@ -2542,26 +2606,26 @@ var TextureAtlasPoly = (0, import_react12.memo)(function TextureAtlasPoly2({
 }) {
   const ATLAS_CANONICAL_SIZE_EXPLICIT = 64;
   const dynamic = textureLighting === "dynamic";
+  const resolvedImageRendering = (0, import_polycss_core11.resolvePolyTextureImageRendering)(entry.polygon, textureImageRendering);
   const atlasCanonicalSize = entry.atlasCanonicalSize ?? ATLAS_CANONICAL_SIZE_EXPLICIT;
+  const atlasLeafWidth = entry.atlasLeafWidth ?? atlasCanonicalSize;
+  const atlasLeafHeight = entry.atlasLeafHeight ?? atlasCanonicalSize;
   const atlasWidth = entry.canvasW || 1;
   const atlasHeight = entry.canvasH || 1;
-  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 atlasPosition = page ? `${(0, import_polycss_core11.formatCssLengthPx)(-entry.x / atlasWidth * atlasLeafWidth)} ${(0, import_polycss_core11.formatCssLengthPx)(-entry.y / atlasHeight * atlasLeafHeight)}` : void 0;
+  const atlasSize = page ? `${(0, import_polycss_core11.formatCssLengthPx)(page.width / atlasWidth * atlasLeafWidth)} ${(0, import_polycss_core11.formatCssLengthPx)(page.height / atlasHeight * atlasLeafHeight)}` : 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_core11.formatMatrix3d)(entry.atlasMatrix),
     ["--polycss-atlas-size"]: `${atlasCanonicalSize}px`,
-    // 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 },
+    ["--polycss-atlas-width"]: (0, import_polycss_core11.formatCssLengthPx)(atlasLeafWidth),
+    ["--polycss-atlas-height"]: (0, import_polycss_core11.formatCssLengthPx)(atlasLeafHeight),
+    ["--polycss-atlas-leaf-sizing"]: entry.atlasLeafSizing ?? "canonical",
+    backgroundImage: page?.url ? `url(${page.url})` : void 0,
+    backgroundPosition: atlasPosition,
+    backgroundSize: atlasSize,
+    backgroundRepeat: page?.url ? "no-repeat" : void 0,
+    imageRendering: resolvedImageRendering === "pixelated" ? "pixelated" : void 0,
     ...dynamic ? {
       ["--pnx"]: entry.normal[0].toFixed(4),
       ["--pny"]: entry.normal[1].toFixed(4),
@@ -2592,6 +2656,74 @@ var TextureAtlasPoly = (0, import_react12.memo)(function TextureAtlasPoly2({
       className: elementClassName,
       style,
       "data-poly-index": entry.index,
+      "data-polycss-leaf": "polygon",
+      "data-polycss-texture-backend": "atlas",
+      "data-polycss-texture-leaf-sizing": entry.atlasLeafSizing ?? "canonical",
+      "data-polycss-texture-ready": page?.url ? "true" : "false",
+      "data-polycss-texture-image-rendering": resolvedImageRendering,
+      "data-polycss-texture-projection": "affine",
+      "data-polycss-texture-lighting": textureLighting,
+      "data-polycss-texture-leaf-width": atlasLeafWidth,
+      "data-polycss-texture-leaf-height": atlasLeafHeight,
+      "data-polycss-double-sided": entry.polygon.doubleSided ? "true" : void 0,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+});
+var TextureImagePoly = (0, import_react12.memo)(function TextureImagePoly2({
+  plan,
+  geometry,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const style = {
+    transform: (0, import_polycss_core11.formatMatrix3d)(geometry.matrix),
+    ["--polycss-atlas-width"]: (0, import_polycss_core11.formatCssLengthPx)(geometry.leafWidth),
+    ["--polycss-atlas-height"]: (0, import_polycss_core11.formatCssLengthPx)(geometry.leafHeight),
+    ["--polycss-atlas-leaf-sizing"]: "image",
+    backgroundImage: `url(${geometry.url})`,
+    backgroundPosition: `${(0, import_polycss_core11.formatCssLengthPx)(geometry.backgroundPosition[0])} ${(0, import_polycss_core11.formatCssLengthPx)(geometry.backgroundPosition[1])}`,
+    backgroundSize: `${(0, import_polycss_core11.formatCssLengthPx)(geometry.backgroundSize[0])} ${(0, import_polycss_core11.formatCssLengthPx)(geometry.backgroundSize[1])}`,
+    backgroundRepeat: "no-repeat",
+    backgroundBlendMode: "normal",
+    maskImage: "none",
+    WebkitMaskImage: "none",
+    imageRendering: geometry.imageRendering === "pixelated" ? "pixelated" : void 0,
+    ["--pnx"]: plan.normal[0].toFixed(4),
+    ["--pny"]: plan.normal[1].toFixed(4),
+    ["--pnz"]: plan.normal[2].toFixed(4),
+    pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...styleProp
+  };
+  const dataAttrs = plan.polygon.data ? Object.fromEntries(
+    Object.entries(plan.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
+  ) : {};
+  const elementClassName = className?.trim() || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "s",
+    {
+      className: elementClassName,
+      style,
+      "data-poly-index": plan.index,
+      "data-polycss-leaf": "polygon",
+      "data-polycss-texture-backend": "image",
+      "data-polycss-texture-leaf-sizing": "image",
+      "data-polycss-texture-ready": "true",
+      "data-polycss-texture-image-rendering": geometry.imageRendering,
+      "data-polycss-texture-projection": geometry.projection,
+      "data-polycss-texture-lighting": geometry.lighting,
+      "data-polycss-texture-leaf-width": geometry.leafWidth,
+      "data-polycss-texture-leaf-height": geometry.leafHeight,
+      "data-polycss-double-sided": plan.polygon.doubleSided ? "true" : void 0,
+      "data-polycss-texture-source-x": geometry.sourceRect.x,
+      "data-polycss-texture-source-y": geometry.sourceRect.y,
+      "data-polycss-texture-source-width": geometry.sourceRect.width,
+      "data-polycss-texture-source-height": geometry.sourceRect.height,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -2619,6 +2751,10 @@ function PolySceneInner({
   ambientLight,
   textureLighting = "baked",
   textureQuality,
+  textureLeafSizing,
+  textureImageRendering,
+  textureBackend,
+  textureProjection,
   seamBleed = import_polycss_core13.DEFAULT_SEAM_BLEED,
   strategies,
   autoCenter = false,
@@ -2714,7 +2850,16 @@ function PolySceneInner({
     },
     [polygons, polyContext, seamBleed, directionalForAtlas, ambientForAtlas]
   );
-  const textureAtlas = useTextureAtlas(textureAtlasPlans, textureLighting, textureQuality, strategies);
+  const textureAtlas = useTextureAtlas(
+    textureAtlasPlans,
+    textureLighting,
+    textureQuality,
+    textureLeafSizing,
+    textureBackend,
+    textureImageRendering,
+    textureProjection,
+    strategies
+  );
   const dynamicLightVars = (0, import_react14.useMemo)(() => {
     if (textureLighting !== "dynamic") return null;
     const userDir = directionalLight?.direction ?? [0.4, -0.7, 0.59];
@@ -2812,12 +2957,28 @@ function PolySceneInner({
         {
           entry,
           page: textureAtlas.pages[entry.pageIndex],
-          textureLighting
+          textureLighting,
+          textureImageRendering
         },
         entry.index
       );
     }
     const plan = textureAtlasPlans[index];
+    const imageGeometry = plan ? (0, import_polycss_core13.resolvePolyTextureLeafGeometry)(plan, {
+      imageRendering: textureImageRendering,
+      backend: textureBackend,
+      projection: textureProjection
+    }) : null;
+    if (plan && imageGeometry) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        TextureImagePoly,
+        {
+          plan,
+          geometry: imageGeometry
+        },
+        plan.index
+      );
+    }
     if (!plan || plan.texture) return null;
     const useU = !disabledStrategies?.has("u");
     const useProjectiveSolid = !disabledStrategies?.has("b");
@@ -2843,6 +3004,10 @@ function PolySceneInner({
       ambientLight,
       strategies,
       seamBleed,
+      textureLeafSizing,
+      textureImageRendering,
+      textureBackend,
+      textureProjection,
       shadow,
       registerShadowCaster,
       registerShadowReceiver,
@@ -2852,7 +3017,7 @@ function PolySceneInner({
       groundCssZ,
       sceneEl
     }),
-    [textureLighting, directionalLight, ambientLight, strategies, seamBleed, shadow, registerShadowCaster, registerShadowReceiver, shadowCastersVersion, hasShadowReceiver, groundCssZ, sceneEl]
+    [textureLighting, directionalLight, ambientLight, strategies, seamBleed, textureLeafSizing, textureImageRendering, textureBackend, textureProjection, shadow, registerShadowCaster, registerShadowReceiver, shadowCastersVersion, hasShadowReceiver, groundCssZ, sceneEl]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
@@ -3733,6 +3898,10 @@ var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
   autoCenter,
   textureLighting,
   textureQuality,
+  textureLeafSizing,
+  textureImageRendering,
+  textureBackend,
+  textureProjection,
   seamBleed,
   atomicAtlas,
   onFrameReady,
@@ -3802,6 +3971,12 @@ var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
   const stableTriangleColorFrameRef = (0, import_react16.useRef)(0);
   const setPolygonsImplRef = (0, import_react16.useRef)(() => {
   });
+  const textureReadyRef = (0, import_react16.useRef)(true);
+  const textureReadyWaitersRef = (0, import_react16.useRef)([]);
+  const resolveTextureReadyWaiters = (0, import_react16.useCallback)(() => {
+    const waiters = textureReadyWaitersRef.current.splice(0);
+    for (const resolve of waiters) resolve();
+  }, []);
   const handle = (0, import_react16.useMemo)(() => ({
     get element() {
       return wrapperRef.current;
@@ -3815,6 +3990,12 @@ var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
       setPolygonsImplRef.current(nextPolygons);
     },
     rebakeAtlas: () => setBakedRotation(propsRef.current.rotation),
+    whenTexturesReady() {
+      if (textureReadyRef.current) return Promise.resolve();
+      return new Promise((resolve) => {
+        textureReadyWaitersRef.current.push(resolve);
+      });
+    },
     updatePolygon(target, partial) {
       const current = polygonsRef.current;
       const idx = typeof target === "number" ? target : current.indexOf(target);
@@ -3961,6 +4142,10 @@ var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
     [effectiveStrategies]
   );
   const effectiveSeamBleed = seamBleed ?? sceneCtx?.seamBleed ?? import_polycss_core16.DEFAULT_SEAM_BLEED;
+  const effectiveTextureLeafSizing = textureLeafSizing ?? sceneCtx?.textureLeafSizing;
+  const effectiveTextureImageRendering = textureImageRendering ?? sceneCtx?.textureImageRendering;
+  const effectiveTextureBackend = textureBackend ?? sceneCtx?.textureBackend;
+  const effectiveTextureProjection = textureProjection ?? sceneCtx?.textureProjection;
   const effectiveDirectional = sceneCtx?.directionalLight;
   const effectiveAmbient = sceneCtx?.ambientLight;
   const directVoxelEnabled = Boolean(
@@ -4023,9 +4208,18 @@ var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
     atlasPlans,
     effectiveTextureLighting,
     textureQuality,
+    effectiveTextureLeafSizing,
+    effectiveTextureBackend,
+    effectiveTextureImageRendering,
+    effectiveTextureProjection,
     effectiveStrategies,
     atomicAtlas
   );
+  textureReadyRef.current = textureAtlas.ready;
+  (0, import_react16.useEffect)(() => {
+    if (textureAtlas.ready) resolveTextureReadyWaiters();
+  }, [textureAtlas.ready, resolveTextureReadyWaiters]);
+  (0, import_react16.useEffect)(() => resolveTextureReadyWaiters, [resolveTextureReadyWaiters]);
   const solidPaintDefaults = (0, import_react16.useMemo)(
     () => !renderPolygon ? getSolidPaintDefaults(textureAtlas.plans, effectiveTextureLighting, effectiveStrategies) : {},
     [renderPolygon, textureAtlas.plans, effectiveTextureLighting, effectiveStrategies]
@@ -4374,12 +4568,28 @@ var PolyMesh = (0, import_react16.forwardRef)(function PolyMesh2({
           entry,
           page: textureAtlas.pages[entry.pageIndex],
           textureLighting: effectiveTextureLighting,
+          textureImageRendering: effectiveTextureImageRendering,
           solidPaintDefaults
         },
         entry.index
       );
     }
     const plan = textureAtlas.plans[index];
+    const imageGeometry = plan ? (0, import_polycss_core16.resolvePolyTextureLeafGeometry)(plan, {
+      imageRendering: effectiveTextureImageRendering,
+      backend: effectiveTextureBackend,
+      projection: effectiveTextureProjection
+    }) : null;
+    if (plan && imageGeometry) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        TextureImagePoly,
+        {
+          plan,
+          geometry: imageGeometry
+        },
+        plan.index
+      );
+    }
     if (!plan || plan.texture) return null;
     if ((0, import_polycss_core12.isProjectiveQuadPlan)(plan)) {
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -4600,6 +4810,7 @@ function usePolyMaterial(options) {
 
 // src/shapes/Poly.tsx
 var import_react19 = require("react");
+var import_polycss_core19 = require("@layoutit/polycss-core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var DIRECT_TEXTURE_CSS_DECIMALS = 4;
 function formatCssLength(value, decimals = DIRECT_TEXTURE_CSS_DECIMALS) {
@@ -4630,7 +4841,8 @@ function MaterialDirectPoly({
   style: styleProp,
   domAttrs,
   domEventHandlers,
-  pointerEvents = "auto"
+  pointerEvents = "auto",
+  imageRendering
 }) {
   const { u0, u1, v0, v1 } = uvRect;
   const du = u1 - u0;
@@ -4645,6 +4857,8 @@ function MaterialDirectPoly({
     backgroundImage: `url(${material.texture})`,
     backgroundSize: `${formatCssLength(sourceW)} ${formatCssLength(sourceH)}`,
     backgroundPosition: `${formatCssLength(-offsetX)} ${formatCssLength(-offsetY)}`,
+    backgroundRepeat: "no-repeat",
+    imageRendering: imageRendering === "pixelated" ? "pixelated" : void 0,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
     ...styleProp
   };
@@ -4657,6 +4871,14 @@ function MaterialDirectPoly({
     {
       className: elementClassName,
       style,
+      "data-poly-index": plan.index,
+      "data-polycss-leaf": "polygon",
+      "data-polycss-texture-backend": "image",
+      "data-polycss-texture-ready": "true",
+      "data-polycss-texture-image-rendering": imageRendering ?? "auto",
+      "data-polycss-texture-projection": "affine",
+      "data-polycss-texture-lighting": "source",
+      "data-polycss-double-sided": plan.polygon.doubleSided ? "true" : void 0,
       ...domEventHandlers,
       ...dataAttrs,
       ...domAttrs
@@ -4667,8 +4889,11 @@ function PolyInner({
   vertices,
   color,
   texture,
+  textureImageSource,
+  texturePresentation,
   uvs,
   data,
+  doubleSided,
   material,
   position,
   scale,
@@ -4696,6 +4921,10 @@ function PolyInner({
   context,
   textureLighting: textureLightingProp,
   textureQuality: textureQualityProp,
+  textureLeafSizing: textureLeafSizingProp,
+  textureImageRendering: textureImageRenderingProp,
+  textureBackend: textureBackendProp,
+  textureProjection: textureProjectionProp,
   baseColor: baseColorProp,
   ...dataAttrs
 }) {
@@ -4703,11 +4932,25 @@ function PolyInner({
   const layerElevation = context?.layerElevation ?? tileSize;
   const textureLighting = textureLightingProp ?? context?.textureLighting ?? "baked";
   const textureQuality = textureQualityProp ?? context?.textureQuality;
+  const textureLeafSizing = textureLeafSizingProp ?? context?.textureLeafSizing;
+  const textureImageRendering = textureImageRenderingProp ?? context?.textureImageRendering;
+  const textureBackend = textureBackendProp ?? context?.textureBackend;
+  const textureProjection = textureProjectionProp ?? context?.textureProjection;
   const polygonColor = baseColorProp ?? color;
   const effectiveTexture = material?.texture ?? texture;
   const atlasPlan = (0, import_react19.useMemo)(
     () => computeTextureAtlasPlan(
-      { vertices, color: polygonColor, texture: effectiveTexture, uvs, data },
+      {
+        vertices,
+        color: polygonColor,
+        texture: effectiveTexture,
+        textureImageSource,
+        texturePresentation,
+        uvs,
+        data,
+        doubleSided,
+        material
+      },
       0,
       {
         tileSize,
@@ -4719,8 +4962,12 @@ function PolyInner({
       vertices,
       polygonColor,
       effectiveTexture,
+      textureImageSource,
+      texturePresentation,
       uvs,
       data,
+      doubleSided,
+      material,
       tileSize,
       layerElevation,
       context?.directionalLight
@@ -4734,7 +4981,15 @@ function PolyInner({
     () => materialUvRect ? [] : [atlasPlan],
     [materialUvRect, atlasPlan]
   );
-  const textureAtlas = useTextureAtlas(atlasPlans, textureLighting, textureQuality);
+  const textureAtlas = useTextureAtlas(
+    atlasPlans,
+    textureLighting,
+    textureQuality,
+    textureLeafSizing,
+    textureBackend,
+    textureImageRendering,
+    textureProjection
+  );
   const domEventHandlers = {
     onClick,
     onDoubleClick,
@@ -4793,7 +5048,8 @@ function PolyInner({
         style: styleProp,
         domAttrs,
         domEventHandlers,
-        pointerEvents: pointerEventsProp ?? "auto"
+        pointerEvents: pointerEventsProp ?? "auto",
+        imageRendering: textureImageRendering
       }
     );
   } else {
@@ -4805,6 +5061,7 @@ function PolyInner({
           entry: atlasEntry,
           page: textureAtlas.pages[atlasEntry.pageIndex],
           textureLighting,
+          textureImageRendering,
           className,
           style: styleProp,
           domAttrs,
@@ -4812,7 +5069,28 @@ function PolyInner({
           pointerEvents: pointerEventsProp ?? "auto"
         }
       );
-    } else if (atlasPlan && !atlasPlan.texture) {
+    } else {
+      const imageGeometry = atlasPlan ? (0, import_polycss_core19.resolvePolyTextureLeafGeometry)(atlasPlan, {
+        imageRendering: textureImageRendering,
+        backend: textureBackend,
+        projection: textureProjection
+      }) : null;
+      if (atlasPlan && imageGeometry) {
+        front = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          TextureImagePoly,
+          {
+            plan: atlasPlan,
+            geometry: imageGeometry,
+            className,
+            style: styleProp,
+            domAttrs,
+            domEventHandlers,
+            pointerEvents: pointerEventsProp ?? "auto"
+          }
+        );
+      }
+    }
+    if (!front && atlasPlan && !atlasPlan.texture) {
       front = (0, import_polycss_core12.isSolidTrianglePlan)(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TextureTrianglePoly,
         {
@@ -4868,7 +5146,7 @@ var Poly = (0, import_react19.memo)(PolyInner);
 
 // src/shapes/PolyShapes.tsx
 var import_react20 = require("react");
-var import_polycss_core19 = require("@layoutit/polycss-core");
+var import_polycss_core20 = require("@layoutit/polycss-core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function PolyBox({
   size,
@@ -4884,7 +5162,7 @@ function PolyBox({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.boxPolygons)({ size, center, min, max, color, texture, material, uvs, data, faces }),
+    () => (0, import_polycss_core20.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]
   );
@@ -4899,7 +5177,7 @@ function PolyPlane({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.planePolygons)({ axis, size, offset, along, color }),
+    () => (0, import_polycss_core20.planePolygons)({ axis, size, offset, along, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [axis, size, offset, along, color]
   );
@@ -4914,7 +5192,7 @@ function PolyRing({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.ringPolygons)({ axis, radius, halfThickness, segments, color }),
+    () => (0, import_polycss_core20.ringPolygons)({ axis, radius, halfThickness, segments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [axis, radius, halfThickness, segments, color]
   );
@@ -4927,7 +5205,7 @@ function PolyOctahedron({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.octahedronPolygons)({ center, size, color }),
+    () => (0, import_polycss_core20.octahedronPolygons)({ center, size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [center, size, color]
   );
@@ -4939,7 +5217,7 @@ function PolyTetrahedron({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.tetrahedronPolygons)({ size, color }),
+    () => (0, import_polycss_core20.tetrahedronPolygons)({ size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
@@ -4951,7 +5229,7 @@ function PolyIcosahedron({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.icosahedronPolygons)({ size, color }),
+    () => (0, import_polycss_core20.icosahedronPolygons)({ size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
@@ -4963,7 +5241,7 @@ function PolyDodecahedron({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.dodecahedronPolygons)({ size, color }),
+    () => (0, import_polycss_core20.dodecahedronPolygons)({ size, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size, color]
   );
@@ -4976,7 +5254,7 @@ function PolySphere({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.spherePolygons)({ radius, subdivisions, color }),
+    () => (0, import_polycss_core20.spherePolygons)({ radius, subdivisions, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, subdivisions, color]
   );
@@ -4991,7 +5269,7 @@ function PolyCylinder({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.cylinderPolygons)({ radius, radiusTop, height, radialSegments, color }),
+    () => (0, import_polycss_core20.cylinderPolygons)({ radius, radiusTop, height, radialSegments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, radiusTop, height, radialSegments, color]
   );
@@ -5005,7 +5283,7 @@ function PolyCone({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.conePolygons)({ radius, height, radialSegments, color }),
+    () => (0, import_polycss_core20.conePolygons)({ radius, height, radialSegments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, height, radialSegments, color]
   );
@@ -5020,7 +5298,7 @@ function PolyTorus({
   ...meshProps
 }) {
   const polygons = (0, import_react20.useMemo)(
-    () => (0, import_polycss_core19.torusPolygons)({ radius, tube, radialSegments, tubularSegments, color }),
+    () => (0, import_polycss_core20.torusPolygons)({ radius, tube, radialSegments, tubularSegments, color }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [radius, tube, radialSegments, tubularSegments, color]
   );
@@ -5029,7 +5307,7 @@ function PolyTorus({
 
 // src/controls/PolyFirstPersonControls.tsx
 var import_react21 = require("react");
-var import_polycss_core20 = require("@layoutit/polycss-core");
+var import_polycss_core21 = require("@layoutit/polycss-core");
 var DEFAULTS = {
   enabled: true,
   lookEnabled: true,
@@ -5205,7 +5483,7 @@ var PolyFirstPersonControls = (0, import_react21.forwardRef)(function PolyFirstP
     const host = cameraElRef.current;
     const perspStr = host ? getComputedStyle(host).perspective : "";
     const n = parseFloat(perspStr);
-    return (Number.isFinite(n) && n > 0 ? n : 32e3) / import_polycss_core20.BASE_TILE;
+    return (Number.isFinite(n) && n > 0 ? n : 32e3) / import_polycss_core21.BASE_TILE;
   }
   function deriveTarget() {
     const s = cameraRef.current.state;
@@ -5446,7 +5724,7 @@ var PolyFirstPersonControls = (0, import_react21.forwardRef)(function PolyFirstP
 var import_react22 = require("react");
 
 // src/controls/sharedControls.ts
-var import_polycss_core21 = require("@layoutit/polycss-core");
+var import_polycss_core22 = require("@layoutit/polycss-core");
 var POINTER_DRAG_SPEED = 4;
 function invertFactor(invert) {
   if (invert === true) return -1;
@@ -5467,7 +5745,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_core21.BASE_TILE;
+  const k = z * import_polycss_core22.BASE_TILE;
   const targetD0 = (dx * sZ - dy * cZ / cosRotX) / k;
   const targetD1 = -(dx * cZ + dy * sZ / cosRotX) / k;
   const t = s.target;
@@ -5997,9 +6275,9 @@ function PolyOrbitControls({
 
 // src/controls/TransformControls.tsx
 var import_react24 = require("react");
-var import_polycss_core22 = require("@layoutit/polycss-core");
+var import_polycss_core23 = require("@layoutit/polycss-core");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var FALLBACK_CAMERA_STORE = createSceneStore(import_polycss_core22.DEFAULT_CAMERA_STATE);
+var FALLBACK_CAMERA_STORE = createSceneStore(import_polycss_core23.DEFAULT_CAMERA_STATE);
 var COLOR_X = "#ff3653";
 var COLOR_Y = "#8adb00";
 var COLOR_Z = "#2c8fff";
@@ -6276,7 +6554,7 @@ function startRingDrag(opts) {
   const startRotation = target.getRotation() ?? [0, 0, 0];
   onMouseDown?.();
   onDraggingChanged?.(true);
-  const qStart = (0, import_polycss_core22.quatFromEulerXYZ)(startRotation);
+  const qStart = (0, import_polycss_core23.quatFromEulerXYZ)(startRotation);
   const handleMove = (ev) => {
     const a = Math.atan2(ev.clientY - centerY, ev.clientX - centerX);
     let d = a - lastAngle;
@@ -6288,8 +6566,8 @@ function startRingDrag(opts) {
     degrees = snap(degrees, rotationSnap);
     const axisVec = [0, 0, 0];
     axisVec[cssAxis] = 1;
-    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));
+    const qDelta = (0, import_polycss_core23.quatFromAxisAngle)(axisVec, degrees * Math.PI / 180);
+    const newRotation = (0, import_polycss_core23.eulerXYZFromQuat)((0, import_polycss_core23.quatMultiply)(qDelta, qStart));
     onObjectChange?.({ object: target, rotation: newRotation });
     onChange?.();
   };
@@ -6660,7 +6938,7 @@ function TranslateArrow({
   };
   const polygons = (0, import_react24.useMemo)(() => {
     const lengthWorld = shaftLengthCss / SCENE_TILE_SIZE;
-    return (0, import_polycss_core22.arrowPolygons)({
+    return (0, import_polycss_core23.arrowPolygons)({
       axis: WORLD_AXIS_FOR_CSS[cssAxis],
       sign,
       shaftLength: lengthWorld,
@@ -6765,7 +7043,7 @@ 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_core22.planePolygons)({
+    return (0, import_polycss_core23.planePolygons)({
       axis: worldPerp,
       size: lengthWorld * PLANE_HALF_SIZE_RATIO,
       offset: [signA * mag, signB * mag],
@@ -6855,7 +7133,7 @@ function RotateRing({
   const polygons = (0, import_react24.useMemo)(() => {
     const radiusWorld = radiusCss / SCENE_TILE_SIZE;
     const outerWorld = radiusWorld * RING_QUAD_OUTER_RATIO;
-    return (0, import_polycss_core22.ringQuadPolygons)({
+    return (0, import_polycss_core23.ringQuadPolygons)({
       axis: WORLD_AXIS_FOR_CSS[cssAxis],
       outerRadius: outerWorld,
       color
@@ -7053,7 +7331,7 @@ function usePolySelectionApi() {
 
 // src/helpers/PolyAxesHelper.tsx
 var import_react26 = require("react");
-var import_polycss_core23 = require("@layoutit/polycss-core");
+var import_polycss_core24 = require("@layoutit/polycss-core");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function PolyAxesHelper({
   size,
@@ -7064,7 +7342,7 @@ function PolyAxesHelper({
   zColor
 }) {
   const polygons = (0, import_react26.useMemo)(
-    () => (0, import_polycss_core23.axesHelperPolygons)({ size, thickness, negative, xColor, yColor, zColor }),
+    () => (0, import_polycss_core24.axesHelperPolygons)({ size, thickness, negative, xColor, yColor, zColor }),
     [size, thickness, negative, xColor, yColor, zColor]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PolyMesh, { polygons, merge: false });
@@ -7072,7 +7350,7 @@ function PolyAxesHelper({
 
 // src/helpers/PolyDirectionalLightHelper.tsx
 var import_react27 = require("react");
-var import_polycss_core24 = require("@layoutit/polycss-core");
+var import_polycss_core25 = require("@layoutit/polycss-core");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function PolyDirectionalLightHelper({
   light,
@@ -7083,7 +7361,7 @@ function PolyDirectionalLightHelper({
 }) {
   const swatch = color ?? light.color ?? "#ffd54a";
   const polygons = (0, import_react27.useMemo)(
-    () => (0, import_polycss_core24.octahedronPolygons)({ center: [0, 0, 0], size, color: swatch }),
+    () => (0, import_polycss_core25.octahedronPolygons)({ center: [0, 0, 0], size, color: swatch }),
     [size, swatch]
   );
   const meshPosition = (0, import_react27.useMemo)(() => {
@@ -7102,7 +7380,7 @@ function PolyDirectionalLightHelper({
 }
 
 // src/styles/colorResolver.ts
-var import_polycss_core25 = require("@layoutit/polycss-core");
+var import_polycss_core26 = require("@layoutit/polycss-core");
 
 // src/renderStats.ts
 var ZERO_SURFACE_LEAF_COUNTS = {
@@ -7111,11 +7389,56 @@ var ZERO_SURFACE_LEAF_COUNTS = {
   atlas: 0,
   stableTriangle: 0
 };
+var READY_TEXTURE_READINESS = {
+  ready: true,
+  textureLeafCount: 0,
+  readyTextureLeafCount: 0,
+  pendingTextureLeafCount: 0,
+  atlasTextureLeafCount: 0,
+  imageTextureLeafCount: 0
+};
+function emptyTextureStats() {
+  return {
+    ready: true,
+    leafCount: 0,
+    atlasCount: 0,
+    imageCount: 0,
+    pendingCount: 0,
+    sizingCounts: { canonical: 0, local: 0, raster: 0, image: 0, unknown: 0 },
+    imageRenderingCounts: { auto: 0, pixelated: 0, unknown: 0 },
+    projectionCounts: { affine: 0, projective: 0, fallback: 0, unknown: 0 },
+    minLeafWidth: 0,
+    maxLeafWidth: 0,
+    minLeafHeight: 0,
+    maxLeafHeight: 0,
+    doubleSidedCount: 0
+  };
+}
+function emptySnapshotStats() {
+  return {
+    runtimeAtlasUrlCount: 0,
+    snapshotAtlasCount: 0,
+    snapshotBackgroundCount: 0,
+    selfContained: true
+  };
+}
+function emptyCameraStats() {
+  return {
+    rootFound: false,
+    projection: "unknown",
+    perspectiveStyle: "",
+    appliedPerspectiveStyle: ""
+  };
+}
 var EMPTY_POLY_RENDER_STATS = {
   polygonCount: 0,
   mountedPolygonLeafCount: 0,
   shadowLeafCount: 0,
   surfaceLeafCounts: ZERO_SURFACE_LEAF_COUNTS,
+  textureReadiness: READY_TEXTURE_READINESS,
+  textureStats: emptyTextureStats(),
+  snapshotStats: emptySnapshotStats(),
+  cameraStats: emptyCameraStats(),
   bucketCount: 0
 };
 function asOptions(optionsOrPolygonCount) {
@@ -7127,6 +7450,28 @@ function asOptions(optionsOrPolygonCount) {
 function queryCount(scope, selector) {
   return scope.querySelectorAll(selector).length;
 }
+function matchingElementCount(scope, selector) {
+  return (matchesSelector(scope, selector) ? 1 : 0) + queryCount(scope, selector);
+}
+function styleHasRuntimeUrl(styleText) {
+  if (!styleText) return false;
+  const urlPattern = /url\((?:"([^"]*)"|'([^']*)'|([^)]*))\)/g;
+  let match;
+  while (match = urlPattern.exec(styleText)) {
+    const raw = (match[1] ?? match[2] ?? match[3] ?? "").trim();
+    if (raw && !raw.startsWith("data:")) return true;
+  }
+  return false;
+}
+function runtimeUrlElementCount(scope) {
+  let count = 0;
+  const root = scope instanceof HTMLElement ? scope : null;
+  if (root && styleHasRuntimeUrl(root.getAttribute("style"))) count++;
+  for (const el of Array.from(scope.querySelectorAll("[style]"))) {
+    if (el instanceof HTMLElement && styleHasRuntimeUrl(el.getAttribute("style"))) count++;
+  }
+  return count;
+}
 function matchesSelector(root, selector) {
   const candidate = root;
   return typeof candidate.matches === "function" && candidate.matches(selector);
@@ -7138,12 +7483,196 @@ function collectScopes(root, selector) {
   scopes.push(...Array.from(root.querySelectorAll(selector)));
   return scopes;
 }
+function leafStrategyForTag(tagName) {
+  switch (tagName.toLowerCase()) {
+    case "b":
+      return "quad";
+    case "i":
+      return "clippedSolid";
+    case "s":
+      return "atlas";
+    case "u":
+      return "stableTriangle";
+    default:
+      return null;
+  }
+}
+function parseOptionalInteger(value) {
+  if (value == null || value === "") return void 0;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+function parseOptionalNumber(value) {
+  if (value == null || value === "") return void 0;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+function parseOptionalVec3(value) {
+  if (value == null || value === "") return void 0;
+  const parts = value.split(",").map((part) => Number(part));
+  if (parts.length !== 3 || parts.some((part) => !Number.isFinite(part))) return void 0;
+  return parts;
+}
+function parseCameraProjection(value) {
+  return value === "orthographic" || value === "perspective" ? value : "unknown";
+}
+function textureReadyForElement(el, textureBackend) {
+  if (!textureBackend) return void 0;
+  const attr = el.getAttribute("data-polycss-texture-ready");
+  if (attr === "true") return true;
+  if (attr === "false") return false;
+  return el.style.opacity !== "0";
+}
+function queryPolyLeaves(root, optionsOrPolygonCount) {
+  if (!root) return [];
+  const options = asOptions(optionsOrPolygonCount);
+  const out = [];
+  for (const scope of collectScopes(root, options.scopeSelector)) {
+    for (const el of Array.from(scope.querySelectorAll("b,i,s,u"))) {
+      const htmlEl = el;
+      const strategy = leafStrategyForTag(htmlEl.tagName);
+      if (!strategy) continue;
+      const textureBackend = htmlEl.getAttribute("data-polycss-texture-backend") ?? (strategy === "atlas" ? "atlas" : void 0);
+      const textureReady = textureReadyForElement(htmlEl, textureBackend);
+      out.push({
+        element: htmlEl,
+        strategy,
+        polygonIndex: parseOptionalInteger(htmlEl.getAttribute("data-poly-index")),
+        textureBackend,
+        textureReady,
+        textureLeafSizing: htmlEl.getAttribute("data-polycss-texture-leaf-sizing") ?? void 0,
+        textureImageRendering: htmlEl.getAttribute("data-polycss-texture-image-rendering") ?? void 0,
+        textureProjection: htmlEl.getAttribute("data-polycss-texture-projection") ?? void 0,
+        textureLeafWidth: parseOptionalNumber(htmlEl.getAttribute("data-polycss-texture-leaf-width")),
+        textureLeafHeight: parseOptionalNumber(htmlEl.getAttribute("data-polycss-texture-leaf-height")),
+        doubleSided: htmlEl.getAttribute("data-polycss-double-sided") === "true"
+      });
+    }
+  }
+  return out;
+}
+function collectPolyTextureReadiness(root, optionsOrPolygonCount) {
+  const readiness = { ...READY_TEXTURE_READINESS };
+  for (const leaf of queryPolyLeaves(root, optionsOrPolygonCount)) {
+    if (!leaf.textureBackend) continue;
+    readiness.textureLeafCount++;
+    if (leaf.textureBackend === "image") readiness.imageTextureLeafCount++;
+    else readiness.atlasTextureLeafCount++;
+    if (leaf.textureReady === false) readiness.pendingTextureLeafCount++;
+    else readiness.readyTextureLeafCount++;
+  }
+  readiness.ready = readiness.pendingTextureLeafCount === 0;
+  return readiness;
+}
+function collectPolyTextureStats(root, optionsOrPolygonCount) {
+  const stats = emptyTextureStats();
+  let hasWidth = false;
+  let hasHeight = false;
+  for (const leaf of queryPolyLeaves(root, optionsOrPolygonCount)) {
+    if (!leaf.textureBackend) continue;
+    stats.leafCount++;
+    if (leaf.textureBackend === "image") stats.imageCount++;
+    else stats.atlasCount++;
+    if (leaf.textureReady === false) stats.pendingCount++;
+    switch (leaf.textureLeafSizing) {
+      case "canonical":
+      case "local":
+      case "raster":
+      case "image":
+        stats.sizingCounts[leaf.textureLeafSizing]++;
+        break;
+      default:
+        stats.sizingCounts.unknown++;
+        break;
+    }
+    switch (leaf.textureImageRendering) {
+      case "auto":
+      case "pixelated":
+        stats.imageRenderingCounts[leaf.textureImageRendering]++;
+        break;
+      default:
+        stats.imageRenderingCounts.unknown++;
+        break;
+    }
+    switch (leaf.textureProjection) {
+      case "affine":
+      case "projective":
+      case "fallback":
+        stats.projectionCounts[leaf.textureProjection]++;
+        break;
+      default:
+        stats.projectionCounts.unknown++;
+        break;
+    }
+    if (typeof leaf.textureLeafWidth === "number") {
+      stats.minLeafWidth = hasWidth ? Math.min(stats.minLeafWidth, leaf.textureLeafWidth) : leaf.textureLeafWidth;
+      stats.maxLeafWidth = hasWidth ? Math.max(stats.maxLeafWidth, leaf.textureLeafWidth) : leaf.textureLeafWidth;
+      hasWidth = true;
+    }
+    if (typeof leaf.textureLeafHeight === "number") {
+      stats.minLeafHeight = hasHeight ? Math.min(stats.minLeafHeight, leaf.textureLeafHeight) : leaf.textureLeafHeight;
+      stats.maxLeafHeight = hasHeight ? Math.max(stats.maxLeafHeight, leaf.textureLeafHeight) : leaf.textureLeafHeight;
+      hasHeight = true;
+    }
+    if (leaf.doubleSided) stats.doubleSidedCount++;
+  }
+  stats.pendingCount = Math.min(stats.pendingCount, stats.leafCount);
+  stats.ready = stats.pendingCount === 0;
+  return stats;
+}
+function collectPolySnapshotStats(root, optionsOrPolygonCount) {
+  const stats = emptySnapshotStats();
+  if (!root) return stats;
+  const options = asOptions(optionsOrPolygonCount);
+  for (const scope of collectScopes(root, options.scopeSelector)) {
+    stats.runtimeAtlasUrlCount += runtimeUrlElementCount(scope);
+    stats.snapshotAtlasCount += matchingElementCount(scope, "[data-polycss-snapshot-atlas]");
+    stats.snapshotBackgroundCount += matchingElementCount(scope, "[data-polycss-snapshot-bg]");
+  }
+  stats.selfContained = stats.runtimeAtlasUrlCount === 0;
+  return stats;
+}
+function findCameraRoot(scope) {
+  const element = scope instanceof HTMLElement ? scope : null;
+  if (element) {
+    if (element.classList.contains("polycss-camera")) return element;
+    const closest = element.closest(".polycss-camera");
+    if (closest instanceof HTMLElement) return closest;
+  }
+  const found = scope.querySelector(".polycss-camera");
+  return found instanceof HTMLElement ? found : null;
+}
+function collectPolyCameraStats(root, optionsOrPolygonCount) {
+  if (!root) return emptyCameraStats();
+  const options = asOptions(optionsOrPolygonCount);
+  let cameraRoot = null;
+  for (const scope of collectScopes(root, options.scopeSelector)) {
+    cameraRoot = findCameraRoot(scope);
+    if (cameraRoot) break;
+  }
+  if (!cameraRoot) return emptyCameraStats();
+  return {
+    rootFound: true,
+    projection: parseCameraProjection(cameraRoot.getAttribute("data-polycss-camera-projection")),
+    perspectiveStyle: cameraRoot.getAttribute("data-polycss-camera-perspective") ?? "",
+    appliedPerspectiveStyle: cameraRoot.getAttribute("data-polycss-camera-applied-perspective") ?? cameraRoot.style.perspective ?? "",
+    zoom: parseOptionalNumber(cameraRoot.getAttribute("data-polycss-camera-zoom")),
+    distance: parseOptionalNumber(cameraRoot.getAttribute("data-polycss-camera-distance")),
+    rotX: parseOptionalNumber(cameraRoot.getAttribute("data-polycss-camera-rot-x")),
+    rotY: parseOptionalNumber(cameraRoot.getAttribute("data-polycss-camera-rot-y")),
+    target: parseOptionalVec3(cameraRoot.getAttribute("data-polycss-camera-target"))
+  };
+}
 function collectPolyRenderStats(root, optionsOrPolygonCount) {
   const options = asOptions(optionsOrPolygonCount);
   if (!root) {
     return {
       ...EMPTY_POLY_RENDER_STATS,
       surfaceLeafCounts: { ...ZERO_SURFACE_LEAF_COUNTS },
+      textureReadiness: { ...READY_TEXTURE_READINESS },
+      textureStats: emptyTextureStats(),
+      snapshotStats: emptySnapshotStats(),
+      cameraStats: emptyCameraStats(),
       polygonCount: options.polygonCount ?? 0
     };
   }
@@ -7165,13 +7694,17 @@ function collectPolyRenderStats(root, optionsOrPolygonCount) {
     mountedPolygonLeafCount,
     shadowLeafCount,
     surfaceLeafCounts,
+    textureReadiness: collectPolyTextureReadiness(root, options),
+    textureStats: collectPolyTextureStats(root, options),
+    snapshotStats: collectPolySnapshotStats(root, options),
+    cameraStats: collectPolyCameraStats(root, options),
     bucketCount
   };
 }
 
 // src/animation/usePolyAnimation.ts
 var import_react28 = require("react");
-var import_polycss_core26 = require("@layoutit/polycss-core");
+var import_polycss_core27 = require("@layoutit/polycss-core");
 function resolveRoot(rootArg) {
   if (!rootArg) return null;
   if ("current" in rootArg) return rootArg.current;
@@ -7190,7 +7723,7 @@ function usePolyAnimation(clips, controller, root) {
       mixerRef.current = null;
       return;
     }
-    mixerRef.current = (0, import_polycss_core26.createPolyAnimationMixer)(resolvedRoot, controller);
+    mixerRef.current = (0, import_polycss_core27.createPolyAnimationMixer)(resolvedRoot, controller);
     return () => {
       mixerRef.current?.stopAllAction();
       mixerRef.current?.uncacheRoot();
@@ -7248,7 +7781,7 @@ function usePolyAnimation(clips, controller, root) {
 }
 
 // src/index.ts
-var import_polycss_core27 = require("@layoutit/polycss-core");
+var import_polycss_core28 = require("@layoutit/polycss-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BASE_TILE,
@@ -7294,15 +7827,19 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   bakeSolidTextureSampledPolygons,
   bakeSolidTextureSamples,
   boxPolygons,
+  buildPolyCameraSceneTransform,
   buildPolyMeshTransform,
+  buildPolySceneTransform,
   buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
   cameraCullNormalKey,
   cameraCullVisibleSignature,
   cameraFacingDepth,
+  capturePolyCameraSnapshot,
   clampChannel,
   collectPolyRenderStats,
+  collectPolyTextureReadiness,
   computeSceneBbox,
   computeShapeLighting,
   computeTexturePaintMetrics,
@@ -7310,6 +7847,8 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   coverPlanarPolygons,
   createIsometricCamera,
   createPolyAnimationMixer,
+  cssDistanceToWorld,
+  cssPositionToWorld,
   cullInteriorPolygons,
   cylinderPolygons,
   dodecahedronPolygons,
@@ -7341,12 +7880,15 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   parseVox,
   planePolygons,
   pointInMeshElement,
+  polyCameraTargetToCss,
   polyCssDistanceToWorld,
   polyCssPositionToWorld,
   polygonCssSurfaceNormal,
   polygonFaces,
   polygonFacesCamera,
+  queryPolyLeaves,
   repairMeshSeams,
+  resolvePolyCameraAppliedPerspectiveStyle,
   ringPolygons,
   rotateVec3,
   seamFacetSplitPolygons,
@@ -7366,7 +7908,12 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   usePolySceneContext,
   usePolySelect,
   usePolySelectionApi,
+  worldDirectionToCss,
   worldDirectionToPolyCss,
+  worldDirectionalLightToCss,
+  worldDirectionalLightToPolyCss,
+  worldDistanceToCss,
   worldDistanceToPolyCss,
+  worldPositionToCss,
   worldPositionToPolyCss
 });