@layoutit/polycss-react 0.2.5 → 0.2.6

package/dist/index.js

@@ -14,7 +14,11 @@ function useCameraContext() {
 
 // src/camera/useCamera.ts
 import { useRef as useRef2, useCallback as useCallback2, useEffect, useMemo } from "react";
-import { buildPolySceneTransform, createIsometricCamera } from "@layoutit/polycss-core";
+import {
+  buildPolyCameraSceneTransform,
+  capturePolyCameraSnapshot,
+  createIsometricCamera
+} from "@layoutit/polycss-core";
 
 // src/store/sceneStore.ts
 import { useSyncExternalStore, useRef, useCallback } from "react";
@@ -60,6 +64,18 @@ function useStoreSelector(store, selector) {
 }
 
 // src/camera/useCamera.ts
+function writeCameraSnapshotAttrs(el, camera, projection, perspectiveStyle) {
+  if (!el) return;
+  const snapshot = 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 = useRef2(null);
   if (!handleRef.current) {
@@ -89,24 +105,33 @@ function usePolyCamera(options) {
       handle.update(next);
       const el = sceneElRef.current;
       if (el) {
-        el.style.transform = buildPolySceneTransform({
-          ...handle.state,
+        el.style.transform = 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 = useCallback2(() => {
     const el = sceneElRef.current;
     if (!el) return;
     const handle = handleRef.current;
-    el.style.transform = buildPolySceneTransform({
-      ...handle.state,
+    el.style.transform = buildPolyCameraSceneTransform(handle.state, {
       autoCenterOffset: store.getState().autoCenterOffset
     });
-  }, [store]);
+    writeCameraSnapshotAttrs(cameraElRef.current, handle, options.projection, options.perspectiveStyle);
+  }, [store, options.projection, options.perspectiveStyle]);
   return {
     store,
     cameraRef: handleRef,
@@ -130,18 +155,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 = useMemo2(
     () => ({ store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect }),
     [store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect]
   );
-  const perspectiveValue = `${typeof perspective === "number" ? perspective : DEFAULT_PERSPECTIVE}px`;
   const cameraStyle = {
     ...style,
     perspective: perspectiveValue
@@ -152,6 +185,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
     }
   ) });
@@ -177,7 +218,15 @@ function PolyOrthographicCameraInner({
     sceneElRef,
     cameraElRef,
     applyTransformDirect
-  } = usePolyCamera({ zoom, target, rotX, rotY, distance });
+  } = usePolyCamera({
+    zoom,
+    target,
+    rotX,
+    rotY,
+    distance,
+    projection: "orthographic",
+    perspectiveStyle: "none"
+  });
   const contextValue = useMemo3(
     () => ({ store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect }),
     [store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect]
@@ -197,6 +246,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
     }
   ) });
@@ -205,7 +262,13 @@ var PolyOrthographicCamera = memo2(PolyOrthographicCameraInner);
 
 // src/scene/PolyScene.tsx
 import { memo as memo8, useCallback as useCallback5, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo6, useRef as useRef4, useState as useState2 } from "react";
-import { BASE_TILE, DEFAULT_SEAM_BLEED, parseHexColor, worldDirectionToCss } from "@layoutit/polycss-core";
+import {
+  BASE_TILE,
+  DEFAULT_SEAM_BLEED,
+  parseHexColor,
+  resolvePolyTextureLeafGeometry,
+  worldDirectionToCss
+} from "@layoutit/polycss-core";
 
 // src/scene/useSceneContext.ts
 import { useMemo as useMemo4 } from "react";
@@ -379,8 +442,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 {
@@ -791,13 +854,16 @@ function isSolidTriangleSupported(doc) {
 import {
   filterAtlasPlans as filterAtlasPlansCore
 } from "@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 filterAtlasPlansCore(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
   });
 }
 
@@ -812,8 +878,13 @@ function isMobileDocument(doc) {
   if (!media) return false;
   return media("(pointer: coarse)").matches || media("(hover: none)").matches;
 }
-function packTextureAtlasPlansWithScale(plans, textureQualityInput, doc) {
-  return packTextureAtlasPlansWithScaleCore(plans, textureQualityInput, isMobileDocument(doc));
+function packTextureAtlasPlansWithScale(plans, textureQualityInput, doc, textureLeafSizing) {
+  return packTextureAtlasPlansWithScaleCore(
+    plans,
+    textureQualityInput,
+    isMobileDocument(doc),
+    textureLeafSizing
+  );
 }
 
 // src/scene/atlas/buildAtlasPages.ts
@@ -2031,7 +2102,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 = useMemo5(
     () => new Set(strategies?.disable ?? []),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2042,17 +2113,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 } = useMemo5(
     () => packTextureAtlasPlansWithScale(
       atlasPlans,
       textureQualityInput,
-      typeof document !== "undefined" ? document : null
+      typeof document !== "undefined" ? document : null,
+      textureLeafSizing
     ),
-    [atlasPlans, textureQualityInput]
+    [atlasPlans, textureQualityInput, textureLeafSizing]
   );
   const [pages, setPages] = useState(() => pageShells(packed.pages));
   const [frame, setFrame] = useState(() => ({
@@ -2405,12 +2480,13 @@ var TextureCornerShapeSolidPoly = memo6(function TextureCornerShapeSolidPoly2({
 
 // src/scene/atlas/atlasPoly.tsx
 import { memo as memo7 } from "react";
-import { formatMatrix3d, formatCssLengthPx } from "@layoutit/polycss-core";
+import { formatMatrix3d, formatCssLengthPx, resolvePolyTextureImageRendering } from "@layoutit/polycss-core";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var TextureAtlasPoly = memo7(function TextureAtlasPoly2({
   entry,
   page,
   textureLighting,
+  textureImageRendering,
   solidPaintDefaults: _solidPaintDefaults,
   className,
   style: styleProp,
@@ -2420,26 +2496,26 @@ var TextureAtlasPoly = memo7(function TextureAtlasPoly2({
 }) {
   const ATLAS_CANONICAL_SIZE_EXPLICIT = 64;
   const dynamic = textureLighting === "dynamic";
+  const resolvedImageRendering = 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 ? `${formatCssLengthPx(-entry.x / atlasWidth * atlasCanonicalSize)} ${formatCssLengthPx(-entry.y / atlasHeight * atlasCanonicalSize)}` : void 0;
-  const atlasSize = page ? `${formatCssLengthPx(page.width / atlasWidth * atlasCanonicalSize)} ${formatCssLengthPx(page.height / atlasHeight * atlasCanonicalSize)}` : void 0;
+  const atlasPosition = page ? `${formatCssLengthPx(-entry.x / atlasWidth * atlasLeafWidth)} ${formatCssLengthPx(-entry.y / atlasHeight * atlasLeafHeight)}` : void 0;
+  const atlasSize = page ? `${formatCssLengthPx(page.width / atlasWidth * atlasLeafWidth)} ${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: 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"]: formatCssLengthPx(atlasLeafWidth),
+    ["--polycss-atlas-height"]: 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),
@@ -2470,6 +2546,74 @@ var TextureAtlasPoly = memo7(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 = memo7(function TextureImagePoly2({
+  plan,
+  geometry,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const style = {
+    transform: formatMatrix3d(geometry.matrix),
+    ["--polycss-atlas-width"]: formatCssLengthPx(geometry.leafWidth),
+    ["--polycss-atlas-height"]: formatCssLengthPx(geometry.leafHeight),
+    ["--polycss-atlas-leaf-sizing"]: "image",
+    backgroundImage: `url(${geometry.url})`,
+    backgroundPosition: `${formatCssLengthPx(geometry.backgroundPosition[0])} ${formatCssLengthPx(geometry.backgroundPosition[1])}`,
+    backgroundSize: `${formatCssLengthPx(geometry.backgroundSize[0])} ${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__ */ jsx7(
+    "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
@@ -2497,6 +2641,10 @@ function PolySceneInner({
   ambientLight,
   textureLighting = "baked",
   textureQuality,
+  textureLeafSizing,
+  textureImageRendering,
+  textureBackend,
+  textureProjection,
   seamBleed = DEFAULT_SEAM_BLEED,
   strategies,
   autoCenter = false,
@@ -2592,7 +2740,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 = useMemo6(() => {
     if (textureLighting !== "dynamic") return null;
     const userDir = directionalLight?.direction ?? [0.4, -0.7, 0.59];
@@ -2690,12 +2847,28 @@ function PolySceneInner({
         {
           entry,
           page: textureAtlas.pages[entry.pageIndex],
-          textureLighting
+          textureLighting,
+          textureImageRendering
         },
         entry.index
       );
     }
     const plan = textureAtlasPlans[index];
+    const imageGeometry = plan ? resolvePolyTextureLeafGeometry(plan, {
+      imageRendering: textureImageRendering,
+      backend: textureBackend,
+      projection: textureProjection
+    }) : null;
+    if (plan && imageGeometry) {
+      return /* @__PURE__ */ jsx8(
+        TextureImagePoly,
+        {
+          plan,
+          geometry: imageGeometry
+        },
+        plan.index
+      );
+    }
     if (!plan || plan.texture) return null;
     const useU = !disabledStrategies?.has("u");
     const useProjectiveSolid = !disabledStrategies?.has("b");
@@ -2721,6 +2894,10 @@ function PolySceneInner({
       ambientLight,
       strategies,
       seamBleed,
+      textureLeafSizing,
+      textureImageRendering,
+      textureBackend,
+      textureProjection,
       shadow,
       registerShadowCaster,
       registerShadowReceiver,
@@ -2730,7 +2907,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__ */ jsx8(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2780,6 +2957,7 @@ import {
   prepareCasterPolyItems,
   prepareReceiverFacePlanes,
   projectCssVertexToGround,
+  resolvePolyTextureLeafGeometry as resolvePolyTextureLeafGeometry2,
   worldDirectionToCss as worldDirectionToCss2
 } from "@layoutit/polycss-core";
 
@@ -3648,6 +3826,10 @@ var PolyMesh = forwardRef(function PolyMesh2({
   autoCenter,
   textureLighting,
   textureQuality,
+  textureLeafSizing,
+  textureImageRendering,
+  textureBackend,
+  textureProjection,
   seamBleed,
   atomicAtlas,
   onFrameReady,
@@ -3717,6 +3899,12 @@ var PolyMesh = forwardRef(function PolyMesh2({
   const stableTriangleColorFrameRef = useRef6(0);
   const setPolygonsImplRef = useRef6(() => {
   });
+  const textureReadyRef = useRef6(true);
+  const textureReadyWaitersRef = useRef6([]);
+  const resolveTextureReadyWaiters = useCallback7(() => {
+    const waiters = textureReadyWaitersRef.current.splice(0);
+    for (const resolve of waiters) resolve();
+  }, []);
   const handle = useMemo7(() => ({
     get element() {
       return wrapperRef.current;
@@ -3730,6 +3918,12 @@ var PolyMesh = 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);
@@ -3876,6 +4070,10 @@ var PolyMesh = forwardRef(function PolyMesh2({
     [effectiveStrategies]
   );
   const effectiveSeamBleed = seamBleed ?? sceneCtx?.seamBleed ?? DEFAULT_SEAM_BLEED2;
+  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(
@@ -3938,9 +4136,18 @@ var PolyMesh = forwardRef(function PolyMesh2({
     atlasPlans,
     effectiveTextureLighting,
     textureQuality,
+    effectiveTextureLeafSizing,
+    effectiveTextureBackend,
+    effectiveTextureImageRendering,
+    effectiveTextureProjection,
     effectiveStrategies,
     atomicAtlas
   );
+  textureReadyRef.current = textureAtlas.ready;
+  useEffect5(() => {
+    if (textureAtlas.ready) resolveTextureReadyWaiters();
+  }, [textureAtlas.ready, resolveTextureReadyWaiters]);
+  useEffect5(() => resolveTextureReadyWaiters, [resolveTextureReadyWaiters]);
   const solidPaintDefaults = useMemo7(
     () => !renderPolygon ? getSolidPaintDefaults(textureAtlas.plans, effectiveTextureLighting, effectiveStrategies) : {},
     [renderPolygon, textureAtlas.plans, effectiveTextureLighting, effectiveStrategies]
@@ -4289,12 +4496,28 @@ var PolyMesh = forwardRef(function PolyMesh2({
           entry,
           page: textureAtlas.pages[entry.pageIndex],
           textureLighting: effectiveTextureLighting,
+          textureImageRendering: effectiveTextureImageRendering,
           solidPaintDefaults
         },
         entry.index
       );
     }
     const plan = textureAtlas.plans[index];
+    const imageGeometry = plan ? resolvePolyTextureLeafGeometry2(plan, {
+      imageRendering: effectiveTextureImageRendering,
+      backend: effectiveTextureBackend,
+      projection: effectiveTextureProjection
+    }) : null;
+    if (plan && imageGeometry) {
+      return /* @__PURE__ */ jsx9(
+        TextureImagePoly,
+        {
+          plan,
+          geometry: imageGeometry
+        },
+        plan.index
+      );
+    }
     if (!plan || plan.texture) return null;
     if (isProjectiveQuadPlan(plan)) {
       return /* @__PURE__ */ jsx9(
@@ -4515,6 +4738,7 @@ function usePolyMaterial(options) {
 
 // src/shapes/Poly.tsx
 import { memo as memo9, useMemo as useMemo10 } from "react";
+import { resolvePolyTextureLeafGeometry as resolvePolyTextureLeafGeometry3 } from "@layoutit/polycss-core";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var DIRECT_TEXTURE_CSS_DECIMALS = 4;
 function formatCssLength(value, decimals = DIRECT_TEXTURE_CSS_DECIMALS) {
@@ -4545,7 +4769,8 @@ function MaterialDirectPoly({
   style: styleProp,
   domAttrs,
   domEventHandlers,
-  pointerEvents = "auto"
+  pointerEvents = "auto",
+  imageRendering
 }) {
   const { u0, u1, v0, v1 } = uvRect;
   const du = u1 - u0;
@@ -4560,6 +4785,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
   };
@@ -4572,6 +4799,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
@@ -4582,8 +4817,11 @@ function PolyInner({
   vertices,
   color,
   texture,
+  textureImageSource,
+  texturePresentation,
   uvs,
   data,
+  doubleSided,
   material,
   position,
   scale,
@@ -4611,6 +4849,10 @@ function PolyInner({
   context,
   textureLighting: textureLightingProp,
   textureQuality: textureQualityProp,
+  textureLeafSizing: textureLeafSizingProp,
+  textureImageRendering: textureImageRenderingProp,
+  textureBackend: textureBackendProp,
+  textureProjection: textureProjectionProp,
   baseColor: baseColorProp,
   ...dataAttrs
 }) {
@@ -4618,11 +4860,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 = useMemo10(
     () => computeTextureAtlasPlan(
-      { vertices, color: polygonColor, texture: effectiveTexture, uvs, data },
+      {
+        vertices,
+        color: polygonColor,
+        texture: effectiveTexture,
+        textureImageSource,
+        texturePresentation,
+        uvs,
+        data,
+        doubleSided,
+        material
+      },
       0,
       {
         tileSize,
@@ -4634,8 +4890,12 @@ function PolyInner({
       vertices,
       polygonColor,
       effectiveTexture,
+      textureImageSource,
+      texturePresentation,
       uvs,
       data,
+      doubleSided,
+      material,
       tileSize,
       layerElevation,
       context?.directionalLight
@@ -4649,7 +4909,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,
@@ -4708,7 +4976,8 @@ function PolyInner({
         style: styleProp,
         domAttrs,
         domEventHandlers,
-        pointerEvents: pointerEventsProp ?? "auto"
+        pointerEvents: pointerEventsProp ?? "auto",
+        imageRendering: textureImageRendering
       }
     );
   } else {
@@ -4720,6 +4989,7 @@ function PolyInner({
           entry: atlasEntry,
           page: textureAtlas.pages[atlasEntry.pageIndex],
           textureLighting,
+          textureImageRendering,
           className,
           style: styleProp,
           domAttrs,
@@ -4727,7 +4997,28 @@ function PolyInner({
           pointerEvents: pointerEventsProp ?? "auto"
         }
       );
-    } else if (atlasPlan && !atlasPlan.texture) {
+    } else {
+      const imageGeometry = atlasPlan ? resolvePolyTextureLeafGeometry3(atlasPlan, {
+        imageRendering: textureImageRendering,
+        backend: textureBackend,
+        projection: textureProjection
+      }) : null;
+      if (atlasPlan && imageGeometry) {
+        front = /* @__PURE__ */ jsx12(
+          TextureImagePoly,
+          {
+            plan: atlasPlan,
+            geometry: imageGeometry,
+            className,
+            style: styleProp,
+            domAttrs,
+            domEventHandlers,
+            pointerEvents: pointerEventsProp ?? "auto"
+          }
+        );
+      }
+    }
+    if (!front && atlasPlan && !atlasPlan.texture) {
       front = isSolidTrianglePlan2(atlasPlan) ? /* @__PURE__ */ jsx12(
         TextureTrianglePoly,
         {
@@ -7062,11 +7353,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) {
@@ -7078,6 +7414,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);
@@ -7089,12 +7447,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
     };
   }
@@ -7116,6 +7658,10 @@ function collectPolyRenderStats(root, optionsOrPolygonCount) {
     mountedPolygonLeafCount,
     shadowLeafCount,
     surfaceLeafCounts,
+    textureReadiness: collectPolyTextureReadiness(root, options),
+    textureStats: collectPolyTextureStats(root, options),
+    snapshotStats: collectPolySnapshotStats(root, options),
+    cameraStats: collectPolyCameraStats(root, options),
     bucketCount
   };
 }
@@ -7261,25 +7807,35 @@ import {
   planePolygons as planePolygons3,
   buildSceneContext as buildSceneContext2,
   buildPolyMeshTransform as buildPolyMeshTransform2,
-  buildPolySceneTransform as buildPolySceneTransform2,
+  buildPolySceneTransform,
   computeSceneBbox as computeSceneBbox2,
+  cssDistanceToWorld,
+  cssPositionToWorld,
+  polyCssDistanceToWorld,
+  polyCssPositionToWorld,
+  worldDirectionToCss as worldDirectionToCss3,
+  worldDirectionToPolyCss,
+  worldDirectionalLightToCss as worldDirectionalLightToCss2,
+  worldDirectionalLightToPolyCss,
+  worldDistanceToCss,
+  worldDistanceToPolyCss,
+  worldPositionToCss,
+  worldPositionToPolyCss,
   BASE_TILE as BASE_TILE7,
   DEFAULT_CAMERA_STATE as DEFAULT_CAMERA_STATE2,
   DEFAULT_PROJECTION,
   normalizeInvertMultiplier,
+  buildPolyCameraSceneTransform as buildPolyCameraSceneTransform2,
+  capturePolyCameraSnapshot as capturePolyCameraSnapshot2,
+  polyCameraTargetToCss,
+  resolvePolyCameraAppliedPerspectiveStyle,
   createPolyAnimationMixer as createPolyAnimationMixer2,
   optimizeAnimatedMeshPolygons,
   DEFAULT_SEAM_FACET_SPLIT_OPTIONS,
   DEFAULT_SEAM_OVERLAP_OPTIONS,
   LoopOnce,
   LoopRepeat,
-  LoopPingPong,
-  cssDistanceToWorld,
-  cssPositionToWorld,
-  worldDistanceToCss,
-  worldDirectionToCss as worldDirectionToCss3,
-  worldDirectionalLightToCss as worldDirectionalLightToCss2,
-  worldPositionToCss
+  LoopPingPong
 } from "@layoutit/polycss-core";
 export {
   BASE_TILE7 as BASE_TILE,
@@ -7325,16 +7881,19 @@ export {
   bakeSolidTextureSampledPolygons,
   bakeSolidTextureSamples,
   boxPolygons2 as boxPolygons,
+  buildPolyCameraSceneTransform2 as buildPolyCameraSceneTransform,
   buildPolyMeshTransform2 as buildPolyMeshTransform,
-  buildPolySceneTransform2 as buildPolySceneTransform,
+  buildPolySceneTransform,
   buildSceneContext2 as buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
   cameraCullNormalKey,
   cameraCullVisibleSignature,
   cameraFacingDepth,
+  capturePolyCameraSnapshot2 as capturePolyCameraSnapshot,
   clampChannel2 as clampChannel,
   collectPolyRenderStats,
+  collectPolyTextureReadiness,
   computeSceneBbox2 as computeSceneBbox,
   computeShapeLighting,
   computeTexturePaintMetrics,
@@ -7342,6 +7901,8 @@ export {
   coverPlanarPolygons,
   createIsometricCamera2 as createIsometricCamera,
   createPolyAnimationMixer2 as createPolyAnimationMixer,
+  cssDistanceToWorld,
+  cssPositionToWorld,
   cullInteriorPolygons,
   cylinderPolygons2 as cylinderPolygons,
   dodecahedronPolygons2 as dodecahedronPolygons,
@@ -7373,12 +7934,15 @@ export {
   parseVox,
   planePolygons3 as planePolygons,
   pointInMeshElement,
-  cssDistanceToWorld as polyCssDistanceToWorld,
-  cssPositionToWorld as polyCssPositionToWorld,
+  polyCameraTargetToCss,
+  polyCssDistanceToWorld,
+  polyCssPositionToWorld,
   polygonCssSurfaceNormal,
   polygonFaces,
   polygonFacesCamera,
+  queryPolyLeaves,
   repairMeshSeams,
+  resolvePolyCameraAppliedPerspectiveStyle,
   ringPolygons2 as ringPolygons,
   rotateVec32 as rotateVec3,
   seamFacetSplitPolygons,
@@ -7398,8 +7962,12 @@ export {
   usePolySceneContext,
   usePolySelect,
   usePolySelectionApi,
-  worldDirectionToCss3 as worldDirectionToPolyCss,
-  worldDirectionalLightToCss2 as worldDirectionalLightToPolyCss,
-  worldDistanceToCss as worldDistanceToPolyCss,
-  worldPositionToCss as worldPositionToPolyCss
+  worldDirectionToCss3 as worldDirectionToCss,
+  worldDirectionToPolyCss,
+  worldDirectionalLightToCss2 as worldDirectionalLightToCss,
+  worldDirectionalLightToPolyCss,
+  worldDistanceToCss,
+  worldDistanceToPolyCss,
+  worldPositionToCss,
+  worldPositionToPolyCss
 };