@layoutit/polycss-react 0.0.1

package/dist/index.js

@@ -0,0 +1,3978 @@
+// src/camera/PolyPerspectiveCamera.tsx
+import { memo, useMemo as useMemo2 } from "react";
+
+// src/camera/context.ts
+import { createContext, useContext } from "react";
+var PolyCameraContext = createContext(null);
+function useCameraContext() {
+  const ctx = useContext(PolyCameraContext);
+  if (!ctx) {
+    throw new Error("polycss: PolyScene must be used inside a PolyCamera.");
+  }
+  return ctx;
+}
+
+// src/camera/useCamera.ts
+import { useRef as useRef2, useCallback as useCallback2, useEffect, useMemo } from "react";
+import { createIsometricCamera, BASE_TILE } from "@layoutit/polycss-core";
+
+// src/store/sceneStore.ts
+import { useSyncExternalStore, useRef, useCallback } from "react";
+function createSceneStore(initial) {
+  let state = {
+    cameraState: { ...initial }
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  function notify() {
+    for (const listener of listeners) listener();
+  }
+  return {
+    getState() {
+      return state;
+    },
+    setState(partial) {
+      state = { ...state, ...partial };
+      notify();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    updateCameraFromRef(handle) {
+      state = { cameraState: { ...handle.state } };
+      notify();
+      return true;
+    },
+    notifyAll() {
+      notify();
+    }
+  };
+}
+
+// src/camera/useCamera.ts
+function usePolyCamera(options) {
+  const handleRef = useRef2(null);
+  if (!handleRef.current) {
+    handleRef.current = createIsometricCamera({
+      zoom: options.zoom,
+      target: options.target,
+      rotX: options.rotX,
+      rotY: options.rotY,
+      distance: options.distance
+    });
+  }
+  const sceneElRef = useRef2(null);
+  const cameraElRef = useRef2(null);
+  const store = useMemo(
+    () => createSceneStore(handleRef.current.state),
+    []
+  );
+  useEffect(() => {
+    const handle = handleRef.current;
+    const next = {};
+    if (options.zoom !== void 0) next.zoom = options.zoom;
+    if (options.target !== void 0) next.target = options.target;
+    if (options.rotX !== void 0) next.rotX = options.rotX;
+    if (options.rotY !== void 0) next.rotY = options.rotY;
+    if (options.distance !== void 0) next.distance = options.distance;
+    if (Object.keys(next).length > 0) {
+      handle.update(next);
+      const el = sceneElRef.current;
+      if (el) {
+        const s = handle.state;
+        const tileSize = BASE_TILE;
+        const [tx, ty, tz] = s.target;
+        const cssX = ty * tileSize;
+        const cssY = tx * tileSize;
+        const cssZ = tz * tileSize;
+        const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
+        el.style.transform = `${distancePart}scale(${s.zoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+      }
+      store.updateCameraFromRef(handle);
+      store.notifyAll();
+    }
+  }, [options.zoom, options.target, options.rotX, options.rotY, options.distance, store]);
+  const applyTransformDirect = useCallback2(() => {
+    const el = sceneElRef.current;
+    if (!el) return;
+    const handle = handleRef.current;
+    const s = handle.state;
+    const tileSize = BASE_TILE;
+    const [tx, ty, tz] = s.target;
+    const cssX = ty * tileSize;
+    const cssY = tx * tileSize;
+    const cssZ = tz * tileSize;
+    const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
+    el.style.transform = `${distancePart}scale(${s.zoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+  }, []);
+  return {
+    store,
+    cameraRef: handleRef,
+    sceneElRef,
+    cameraElRef,
+    applyTransformDirect
+  };
+}
+
+// src/camera/PolyPerspectiveCamera.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_PERSPECTIVE = 8e3;
+function PolyPerspectiveCameraInner({
+  zoom,
+  target,
+  rotX,
+  rotY,
+  distance,
+  perspective,
+  children,
+  className,
+  style
+}) {
+  const {
+    store,
+    cameraRef,
+    sceneElRef,
+    cameraElRef,
+    applyTransformDirect
+  } = usePolyCamera({ zoom, target, rotX, rotY, distance });
+  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
+  };
+  return /* @__PURE__ */ jsx(PolyCameraContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: cameraElRef,
+      className: `polycss-camera${className ? ` ${className}` : ""}`,
+      style: cameraStyle,
+      children
+    }
+  ) });
+}
+var PolyPerspectiveCamera = memo(PolyPerspectiveCameraInner);
+
+// src/camera/PolyOrthographicCamera.tsx
+import { memo as memo2, useMemo as useMemo3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PolyOrthographicCameraInner({
+  zoom,
+  target,
+  rotX,
+  rotY,
+  distance,
+  children,
+  className,
+  style
+}) {
+  const {
+    store,
+    cameraRef,
+    sceneElRef,
+    cameraElRef,
+    applyTransformDirect
+  } = usePolyCamera({ zoom, target, rotX, rotY, distance });
+  const contextValue = useMemo3(
+    () => ({ store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect }),
+    [store, cameraRef, sceneElRef, cameraElRef, applyTransformDirect]
+  );
+  const cameraStyle = {
+    ...style,
+    perspective: "none"
+  };
+  return /* @__PURE__ */ jsx2(PolyCameraContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: cameraElRef,
+      className: `polycss-camera${className ? ` ${className}` : ""}`,
+      style: cameraStyle,
+      children
+    }
+  ) });
+}
+var PolyOrthographicCamera = memo2(PolyOrthographicCameraInner);
+
+// src/scene/PolyScene.tsx
+import { memo as memo3, useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { createIsometricCamera as createIsometricCamera2, parseHexColor } from "@layoutit/polycss-core";
+
+// src/scene/useSceneContext.ts
+import { useMemo as useMemo4 } from "react";
+import { buildSceneContext, mergePolygons } from "@layoutit/polycss-core";
+function usePolySceneContext(polygons, options) {
+  const { directionalLight: _directionalLight } = options;
+  return useMemo4(() => {
+    const built = buildSceneContext({ polygons });
+    const finalPolygons = mergePolygons(built.context.polygons);
+    return {
+      polygons: finalPolygons,
+      sceneBbox: built.context.sceneBbox
+    };
+  }, [polygons]);
+}
+
+// src/styles/styles.ts
+var POLYCSS_STYLE_ID = "polycss-styles";
+function injectPolyBaseStyles(doc = typeof document !== "undefined" ? document : null) {
+  if (!doc || doc.getElementById(POLYCSS_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = POLYCSS_STYLE_ID;
+  style.textContent = CORE_BASE_STYLES;
+  doc.head.appendChild(style);
+}
+var CORE_BASE_STYLES = `
+/* \u2500\u2500 Scene container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.polycss-scene,
+.polycss-scene *,
+.polycss-scene *::before,
+.polycss-scene *::after {
+  box-sizing: border-box;
+}
+
+.polycss-scene {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform-style: preserve-3d;
+  perspective: none;
+  transform: var(--scene-transform);
+}
+
+.polycss-offset {
+  transform-style: preserve-3d;
+  transform: var(--offset-transform);
+}
+
+/* \u2500\u2500 Camera wrapper (perspective + interactive drag) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.polycss-camera {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  perspective: 8000px;
+  min-height: inherit;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  contain: paint;
+  isolation: isolate;
+}
+.polycss-camera * {
+  transform-style: preserve-3d;
+  position: absolute;
+}
+
+/* \u2500\u2500 Polygon leaf element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * Polygon faces render as internal leaf elements inside .polycss-scene.
+ * The element is positioned absolutely within the scene root; its
+ * transform: matrix3d(...) carries the full world-space placement.
+ */
+.polycss-scene b,
+.polycss-scene i,
+.polycss-scene s,
+.polycss-scene u {
+  position: absolute;
+  display: block;
+  transform-origin: 0 0;
+  transform-style: preserve-3d;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 0;
+  quotes: none;
+  text-decoration: none;
+  backface-visibility: hidden;
+  background-repeat: no-repeat;
+}
+
+.polycss-scene b {
+}
+
+.polycss-scene i {
+  border-style: solid;
+  border-width: 1px;
+  border-color: currentColor;
+}
+
+.polycss-scene s {
+}
+
+.polycss-scene u {
+  width: 0px;
+  height: 0px;
+  background: transparent;
+  box-sizing: content-box;
+  border: 0 solid transparent;
+}
+
+/* \u2500\u2500 Gizmo override \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * <TransformControls> renders 3D arrows using the same polygon pipeline
+ * as user content, but the gizmo is a UI affordance \u2014 both faces of
+ * every polygon should remain visible regardless of which way the
+ * camera is looking. Otherwise the cuboid shafts and pyramid heads end
+ * up half-culled (you see only the side faces, not the caps), and the
+ * arrow looks like a flat strip instead of a 3D bar.
+ *
+ * Transitions on border-color and background-color smooth the
+ * idle \u2192 hover \u2192 drag alpha changes. Baked-mode arrows render their
+ * color via inline border-color, dynamic-mode via background-color
+ * (rgb-with-alpha CSS calc); transitioning both covers either path.
+ */
+.polycss-transform-controls i,
+.polycss-transform-controls b,
+.polycss-transform-controls s,
+.polycss-transform-controls u {
+  backface-visibility: visible;
+  transition: border-color 150ms ease-out, background-color 150ms ease-out;
+}
+
+/* \u2500\u2500 Dynamic lighting cascade vars (scene root \u2192 polygons) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * Dynamic mode: PolyScene writes the directional + ambient light setup to
+ * these custom properties on the scene root. Each polygon leaf bakes its
+ * own normal directly into an inline calc() that reads these vars to
+ * resolve the Lambert dot product and per-channel tint. Sliding the light
+ * only writes these scene-root vars \u2014 no JS, no atlas redraw.
+ *
+ * Registering with @property forces the browser to parse the values as
+ * <number>s instead of opaque token streams; that makes the polygon-level
+ * calc() expressions resolve reliably across engines.
+ */
+
+@property --plx { syntax: "<number>"; inherits: true; initial-value: 0; }
+@property --ply { syntax: "<number>"; inherits: true; initial-value: 0; }
+@property --plz { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --plr { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --plg { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --plb { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pli { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --par { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pag { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pab { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pai { syntax: "<number>"; inherits: true; initial-value: 0.4; }
+
+/* Per-polygon surface normal \u2014 set inline by the renderer. inherits:false
+   because each leaf has its own normal (no cascade). */
+@property --pnx { syntax: "<number>"; inherits: false; initial-value: 0; }
+@property --pny { syntax: "<number>"; inherits: false; initial-value: 0; }
+@property --pnz { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --psr { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --psg { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --psb { syntax: "<number>"; inherits: false; initial-value: 1; }
+
+/* Calc-driven Lambert + tint, scoped to dynamic-lighting scenes. Lives
+   here (not inline per polygon) so each leaf only carries its tiny normal
+   declarations \u2014 ~12\xD7 smaller per-polygon style payload on big meshes. */
+.polycss-scene[data-polycss-lighting="dynamic"] s {
+  background-color: rgb(
+    calc(255 * (var(--par) * var(--pai)
+         + var(--plr) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * (var(--pag) * var(--pai)
+         + var(--plg) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * (var(--pab) * var(--pai)
+         + var(--plb) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+  );
+  background-blend-mode: multiply;
+}
+
+.polycss-scene[data-polycss-lighting="dynamic"] u {
+  border-bottom-color: rgb(
+    calc(255 * var(--psr) * (var(--par) * var(--pai)
+         + var(--plr) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * var(--psg) * (var(--pag) * var(--pai)
+         + var(--plg) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * var(--psb) * (var(--pab) * var(--pai)
+         + var(--plb) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+  );
+}
+`;
+
+// src/scene/textureAtlas.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo5, useState } from "react";
+import { parsePureColor } from "@layoutit/polycss-core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DEFAULT_TILE = 50;
+var DEFAULT_LIGHT_DIR = [0.4, -0.7, 0.59];
+var DEFAULT_LIGHT_COLOR = "#ffffff";
+var DEFAULT_LIGHT_INTENSITY = 1;
+var DEFAULT_AMBIENT_COLOR = "#ffffff";
+var DEFAULT_AMBIENT_INTENSITY = 0.4;
+var ATLAS_MAX_SIZE = 4096;
+var ATLAS_PADDING = 1;
+var MIN_ATLAS_SCALE = 0.1;
+var MAX_ATLAS_SCALE = 1;
+var AUTO_ATLAS_LOW_AREA = ATLAS_MAX_SIZE * ATLAS_MAX_SIZE;
+var AUTO_ATLAS_MEDIUM_AREA = AUTO_ATLAS_LOW_AREA * 3;
+var AUTO_ATLAS_MAX_BITMAP_SIDE = 2048;
+var AUTO_ATLAS_MAX_DECODED_BYTES = 16 * 1024 * 1024;
+var AUTO_ATLAS_SCALE_GUARD = 0.995;
+var DEFAULT_MATRIX_DECIMALS = 3;
+var DEFAULT_BORDER_SHAPE_DECIMALS = 2;
+var BASIS_EPS = 1e-9;
+var SOLID_TRIANGLE_BLEED = 0.45;
+var TEXTURE_IMAGE_CACHE = /* @__PURE__ */ new Map();
+var RECT_EPS = 1e-3;
+var TEXTURE_TRIANGLE_BLEED = 0.75;
+function loadTextureImage(url) {
+  let p = TEXTURE_IMAGE_CACHE.get(url);
+  if (!p) {
+    p = new Promise((resolve, reject) => {
+      const img = new Image();
+      img.decoding = "async";
+      img.onload = () => resolve(img);
+      img.onerror = () => reject(new Error(`texture load failed: ${url}`));
+      img.src = url;
+    });
+    TEXTURE_IMAGE_CACHE.set(url, p);
+    p.then(
+      () => {
+        if (TEXTURE_IMAGE_CACHE.get(url) === p) TEXTURE_IMAGE_CACHE.delete(url);
+      },
+      () => {
+        if (TEXTURE_IMAGE_CACHE.get(url) === p) TEXTURE_IMAGE_CACHE.delete(url);
+      }
+    );
+  }
+  return p;
+}
+function normalizeAtlasScale(scale) {
+  const value = typeof scale === "string" ? Number(scale) : scale;
+  if (value === void 0 || !Number.isFinite(value)) return 1;
+  return Math.min(MAX_ATLAS_SCALE, Math.max(MIN_ATLAS_SCALE, value));
+}
+function roundDecimal(value, decimals) {
+  const next = value.toFixed(decimals).replace(/\.?0+$/, "");
+  return Object.is(Number(next), -0) ? "0" : next;
+}
+function formatMatrix3d(matrix, decimals = DEFAULT_MATRIX_DECIMALS) {
+  return `matrix3d(${matrix.split(",").map((value) => {
+    const parsed = Number(value.trim());
+    return Number.isFinite(parsed) ? roundDecimal(parsed, decimals) : value.trim();
+  }).join(",")})`;
+}
+function formatPercent(value, decimals = DEFAULT_BORDER_SHAPE_DECIMALS) {
+  return `${roundDecimal(value, decimals)}%`;
+}
+function atlasArea(pages) {
+  return pages.reduce((sum, page) => sum + page.width * page.height, 0);
+}
+function autoAtlasScaleCap(pages) {
+  const area = atlasArea(pages);
+  if (area <= 0) return 1;
+  const maxSide = Math.max(
+    1,
+    ...pages.map((page) => Math.max(page.width, page.height))
+  );
+  const sideScale = AUTO_ATLAS_MAX_BITMAP_SIDE / maxSide;
+  const memoryScale = Math.sqrt(AUTO_ATLAS_MAX_DECODED_BYTES / (area * 4));
+  return normalizeAtlasScale(Math.min(sideScale, memoryScale));
+}
+function autoAtlasScale(pages) {
+  const area = atlasArea(pages);
+  let atlasScale = 0.5;
+  if (area <= AUTO_ATLAS_LOW_AREA) atlasScale = 1;
+  else if (area <= AUTO_ATLAS_MEDIUM_AREA) atlasScale = 0.75;
+  return normalizeAtlasScale(Math.min(atlasScale, autoAtlasScaleCap(pages)));
+}
+function atlasBitmapMaxSide(pages, atlasScale) {
+  return pages.reduce((max, page) => Math.max(
+    max,
+    Math.ceil(page.width * atlasScale),
+    Math.ceil(page.height * atlasScale)
+  ), 0);
+}
+function atlasDecodedBytes(pages, atlasScale) {
+  return pages.reduce(
+    (sum, page) => sum + Math.ceil(page.width * atlasScale) * Math.ceil(page.height * atlasScale) * 4,
+    0
+  );
+}
+function autoAtlasBudgetFactor(pages, atlasScale) {
+  const maxSide = atlasBitmapMaxSide(pages, atlasScale);
+  const decodedBytes = atlasDecodedBytes(pages, atlasScale);
+  const sideFactor = maxSide > AUTO_ATLAS_MAX_BITMAP_SIDE ? AUTO_ATLAS_MAX_BITMAP_SIDE / maxSide : 1;
+  const memoryFactor = decodedBytes > AUTO_ATLAS_MAX_DECODED_BYTES ? Math.sqrt(AUTO_ATLAS_MAX_DECODED_BYTES / decodedBytes) : 1;
+  return Math.min(sideFactor, memoryFactor);
+}
+function packTextureAtlasPlansAuto(plans, fullScalePacked) {
+  let atlasScale = autoAtlasScale(fullScalePacked.pages);
+  let packed = atlasScale === 1 ? fullScalePacked : packTextureAtlasPlans(plans, atlasScale);
+  for (let i = 0; i < 4; i++) {
+    const factor = autoAtlasBudgetFactor(packed.pages, atlasScale);
+    if (factor >= 1) break;
+    const nextAtlasScale = normalizeAtlasScale(atlasScale * factor * AUTO_ATLAS_SCALE_GUARD);
+    if (nextAtlasScale >= atlasScale) break;
+    atlasScale = nextAtlasScale;
+    packed = packTextureAtlasPlans(plans, atlasScale);
+  }
+  return { packed, atlasScale };
+}
+function packTextureAtlasPlansWithScale(plans, atlasScaleInput) {
+  if (atlasScaleInput !== void 0 && atlasScaleInput !== "auto") {
+    const atlasScale = normalizeAtlasScale(atlasScaleInput);
+    return { packed: packTextureAtlasPlans(plans, atlasScale), atlasScale };
+  }
+  const fullScalePacked = packTextureAtlasPlans(plans, 1);
+  return packTextureAtlasPlansAuto(plans, fullScalePacked);
+}
+function atlasPadding(atlasScale) {
+  return Math.max(ATLAS_PADDING, Math.ceil(ATLAS_PADDING / atlasScale));
+}
+function setCssTransform(ctx, atlasScale, a = 1, b = 0, c = 0, d = 1, e = 0, f = 0) {
+  ctx.setTransform(
+    a * atlasScale,
+    b * atlasScale,
+    c * atlasScale,
+    d * atlasScale,
+    e * atlasScale,
+    f * atlasScale
+  );
+}
+function parseHex(hex) {
+  const parsed = parsePureColor(hex);
+  if (!parsed) return { r: 255, g: 255, b: 255 };
+  return { r: parsed.rgb[0], g: parsed.rgb[1], b: parsed.rgb[2] };
+}
+function parseAlpha(input) {
+  return parsePureColor(input)?.alpha ?? 1;
+}
+function isFullRectSolid(entry) {
+  if (entry.screenPts.length !== 8) return false;
+  const xs = [];
+  const ys = [];
+  const addUnique = (list, value) => {
+    for (const existing of list) {
+      if (Math.abs(existing - value) <= RECT_EPS) return;
+    }
+    list.push(value);
+  };
+  for (let i = 0; i < entry.screenPts.length; i += 2) {
+    addUnique(xs, entry.screenPts[i]);
+    addUnique(ys, entry.screenPts[i + 1]);
+  }
+  if (xs.length !== 2 || ys.length !== 2) return false;
+  xs.sort((a, b) => a - b);
+  ys.sort((a, b) => a - b);
+  if (Math.abs(xs[0]) > RECT_EPS || Math.abs(ys[0]) > RECT_EPS || xs[1] - xs[0] <= RECT_EPS || ys[1] - ys[0] <= RECT_EPS) {
+    return false;
+  }
+  for (let i = 0; i < entry.screenPts.length; i += 2) {
+    const x = entry.screenPts[i];
+    const y = entry.screenPts[i + 1];
+    const onX = Math.abs(x - xs[0]) <= RECT_EPS || Math.abs(x - xs[1]) <= RECT_EPS;
+    const onY = Math.abs(y - ys[0]) <= RECT_EPS || Math.abs(y - ys[1]) <= RECT_EPS;
+    if (!onX || !onY) return false;
+  }
+  return true;
+}
+function isSolidTrianglePlan(entry) {
+  return !entry.texture && entry.polygon.vertices.length === 3;
+}
+function borderShapeSupported() {
+  const supportsBorderShape = !!globalThis.CSS?.supports?.(
+    "border-shape",
+    "polygon(0 0, 100% 0, 0 100%) polygon(50% 50%, 50% 50%, 50% 50%)"
+  );
+  if (!supportsBorderShape) return false;
+  const media = globalThis.matchMedia;
+  if (typeof media !== "function") return true;
+  return media("(pointer: fine)").matches && media("(hover: hover)").matches;
+}
+function cssPolygonShapeForPlan(entry) {
+  const pts = [];
+  const width = entry.canvasW || 1;
+  const height = entry.canvasH || 1;
+  for (let i = 0; i < entry.screenPts.length; i += 2) {
+    const x = Math.max(0, Math.min(100, entry.screenPts[i] / width * 100));
+    const y = Math.max(0, Math.min(100, entry.screenPts[i + 1] / height * 100));
+    pts.push(`${formatPercent(x)} ${formatPercent(y)}`);
+  }
+  return `polygon(${pts.join(", ")})`;
+}
+function cssCollapsedInnerShapeForPlan(entry) {
+  let xSum = 0;
+  let ySum = 0;
+  const points = Math.max(1, entry.screenPts.length / 2);
+  for (let i = 0; i < entry.screenPts.length; i += 2) {
+    xSum += entry.screenPts[i];
+    ySum += entry.screenPts[i + 1];
+  }
+  const width = entry.canvasW || 1;
+  const height = entry.canvasH || 1;
+  const x = formatPercent(Math.max(0, Math.min(100, xSum / points / width * 100)));
+  const y = formatPercent(Math.max(0, Math.min(100, ySum / points / height * 100)));
+  return `polygon(${Array.from({ length: points }, () => `${x} ${y}`).join(", ")})`;
+}
+function cssBorderShapeForPlan(entry) {
+  return `${cssPolygonShapeForPlan(entry)} ${cssCollapsedInnerShapeForPlan(entry)}`;
+}
+function formatMatrix3dValues(values, decimals = DEFAULT_MATRIX_DECIMALS) {
+  return values.map((value) => roundDecimal(value, decimals)).join(",");
+}
+function cssPoints(vertices, tile, elev) {
+  return vertices.map((v) => [v[1] * tile, v[0] * tile, v[2] * elev]);
+}
+function computeSurfaceNormal(pts) {
+  if (pts.length < 3) return null;
+  const p0 = pts[0], p1 = pts[1], p2 = pts[2];
+  const e1 = [p1[0] - p0[0], p1[1] - p0[1], p1[2] - p0[2]];
+  const e2 = [p2[0] - p0[0], p2[1] - p0[1], p2[2] - p0[2]];
+  const normal = [
+    -(e1[1] * e2[2] - e1[2] * e2[1]),
+    -(e1[2] * e2[0] - e1[0] * e2[2]),
+    -(e1[0] * e2[1] - e1[1] * e2[0])
+  ];
+  const len = Math.hypot(normal[0], normal[1], normal[2]);
+  if (len <= BASIS_EPS) return null;
+  return [normal[0] / len, normal[1] / len, normal[2] / len];
+}
+function dotVec(a, b) {
+  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
+function crossVec(a, b) {
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0]
+  ];
+}
+function solidTriangleStyle(entry, textureLighting, pointerEvents) {
+  if (!isSolidTrianglePlan(entry)) return null;
+  const pts = cssPoints(entry.polygon.vertices, entry.tileSize, entry.layerElevation);
+  const normal = computeSurfaceNormal(pts);
+  if (!normal) return null;
+  const edges = [
+    { a: 0, b: 1, c: 2 },
+    { a: 1, b: 2, c: 0 },
+    { a: 2, b: 0, c: 1 }
+  ].map((edge) => {
+    const av2 = pts[edge.a];
+    const bv2 = pts[edge.b];
+    return {
+      ...edge,
+      length: Math.hypot(bv2[0] - av2[0], bv2[1] - av2[1], bv2[2] - av2[2])
+    };
+  }).sort((a2, b2) => b2.length - a2.length);
+  let a = edges[0].a;
+  let b = edges[0].b;
+  const c = edges[0].c;
+  let av = pts[a];
+  let bv = pts[b];
+  const cv = pts[c];
+  let baseLength = edges[0].length;
+  if (baseLength <= BASIS_EPS) return null;
+  let xAxis = [
+    (bv[0] - av[0]) / baseLength,
+    (bv[1] - av[1]) / baseLength,
+    (bv[2] - av[2]) / baseLength
+  ];
+  const ac = [cv[0] - av[0], cv[1] - av[1], cv[2] - av[2]];
+  let apexX = dotVec(ac, xAxis);
+  let foot = [
+    av[0] + xAxis[0] * apexX,
+    av[1] + xAxis[1] * apexX,
+    av[2] + xAxis[2] * apexX
+  ];
+  let yAxisRaw = [
+    foot[0] - cv[0],
+    foot[1] - cv[1],
+    foot[2] - cv[2]
+  ];
+  const height = Math.hypot(yAxisRaw[0], yAxisRaw[1], yAxisRaw[2]);
+  if (height <= BASIS_EPS) return null;
+  let yAxis = [
+    yAxisRaw[0] / height,
+    yAxisRaw[1] / height,
+    yAxisRaw[2] / height
+  ];
+  if (dotVec(crossVec(xAxis, yAxis), normal) < 0) {
+    const nextA = b;
+    b = a;
+    a = nextA;
+    av = pts[a];
+    bv = pts[b];
+    baseLength = Math.hypot(bv[0] - av[0], bv[1] - av[1], bv[2] - av[2]);
+    if (baseLength <= BASIS_EPS) return null;
+    xAxis = [
+      (bv[0] - av[0]) / baseLength,
+      (bv[1] - av[1]) / baseLength,
+      (bv[2] - av[2]) / baseLength
+    ];
+    const nextAc = [cv[0] - av[0], cv[1] - av[1], cv[2] - av[2]];
+    apexX = dotVec(nextAc, xAxis);
+    foot = [
+      av[0] + xAxis[0] * apexX,
+      av[1] + xAxis[1] * apexX,
+      av[2] + xAxis[2] * apexX
+    ];
+    yAxisRaw = [
+      foot[0] - cv[0],
+      foot[1] - cv[1],
+      foot[2] - cv[2]
+    ];
+    const nextHeight = Math.hypot(yAxisRaw[0], yAxisRaw[1], yAxisRaw[2]);
+    if (nextHeight <= BASIS_EPS) return null;
+    yAxis = [
+      yAxisRaw[0] / nextHeight,
+      yAxisRaw[1] / nextHeight,
+      yAxisRaw[2] / nextHeight
+    ];
+  }
+  const left = Math.max(0, Math.min(baseLength, apexX));
+  const right = Math.max(0, baseLength - left);
+  const bleed = SOLID_TRIANGLE_BLEED;
+  const leftPx = left + bleed;
+  const rightPx = right + bleed;
+  const heightPx = height + bleed * 2;
+  const tx = cv[0] - leftPx * xAxis[0] - bleed * yAxis[0];
+  const ty = cv[1] - leftPx * xAxis[1] - bleed * yAxis[1];
+  const tz = cv[2] - leftPx * xAxis[2] - bleed * yAxis[2];
+  const matrix = formatMatrix3dValues([
+    xAxis[0],
+    xAxis[1],
+    xAxis[2],
+    0,
+    yAxis[0],
+    yAxis[1],
+    yAxis[2],
+    0,
+    normal[0],
+    normal[1],
+    normal[2],
+    0,
+    tx,
+    ty,
+    tz,
+    1
+  ]);
+  const dynamic = textureLighting === "dynamic";
+  const base = parseHex(entry.polygon.color ?? "#cccccc");
+  return {
+    transform: `matrix3d(${matrix})`,
+    borderWidth: `0 ${rightPx}px ${heightPx}px ${leftPx}px`,
+    borderBottomColor: dynamic ? void 0 : entry.shadedColor,
+    pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...dynamic ? {
+      ["--pnx"]: normal[0].toFixed(4),
+      ["--pny"]: normal[1].toFixed(4),
+      ["--pnz"]: normal[2].toFixed(4),
+      ["--psr"]: (base.r / 255).toFixed(4),
+      ["--psg"]: (base.g / 255).toFixed(4),
+      ["--psb"]: (base.b / 255).toFixed(4)
+    } : null
+  };
+}
+function rgbToHex({ r, g, b }) {
+  const f = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
+  return `#${f(r)}${f(g)}${f(b)}`;
+}
+function shadePolygon(baseColor, directScale, lightColor, ambientColor, ambientIntensity) {
+  const base = parseHex(baseColor);
+  const light = parseHex(lightColor);
+  const amb = parseHex(ambientColor);
+  const tintR = amb.r / 255 * ambientIntensity + light.r / 255 * directScale;
+  const tintG = amb.g / 255 * ambientIntensity + light.g / 255 * directScale;
+  const tintB = amb.b / 255 * ambientIntensity + light.b / 255 * directScale;
+  const r = Math.max(0, Math.min(255, Math.round(base.r * tintR)));
+  const g = Math.max(0, Math.min(255, Math.round(base.g * tintG)));
+  const b = Math.max(0, Math.min(255, Math.round(base.b * tintB)));
+  const alpha = parseAlpha(baseColor);
+  return alpha < 1 ? `rgba(${r}, ${g}, ${b}, ${alpha})` : rgbToHex({ r, g, b });
+}
+function textureTintFactors(directScale, lightColor, ambientColor, ambientIntensity) {
+  const light = parseHex(lightColor);
+  const amb = parseHex(ambientColor);
+  return {
+    r: amb.r / 255 * ambientIntensity + light.r / 255 * directScale,
+    g: amb.g / 255 * ambientIntensity + light.g / 255 * directScale,
+    b: amb.b / 255 * ambientIntensity + light.b / 255 * directScale
+  };
+}
+function tintToCss({ r, g, b }) {
+  const f = (n) => Math.round(Math.max(0, Math.min(1, n)) * 255);
+  return `rgb(${f(r)} ${f(g)} ${f(b)})`;
+}
+function applyTextureTint(ctx, x, y, width, height, tint, atlasScale) {
+  if (Math.abs(tint.r - 1) < 1e-3 && Math.abs(tint.g - 1) < 1e-3 && Math.abs(tint.b - 1) < 1e-3) {
+    return;
+  }
+  ctx.save();
+  setCssTransform(ctx, atlasScale);
+  ctx.globalCompositeOperation = "multiply";
+  ctx.fillStyle = tintToCss(tint);
+  ctx.fillRect(x, y, width, height);
+  ctx.restore();
+}
+function drawImageCover(ctx, img, x, y, width, height, atlasScale) {
+  const srcW = img.naturalWidth || img.width || 1;
+  const srcH = img.naturalHeight || img.height || 1;
+  const scale = Math.max(width / srcW, height / srcH);
+  const drawW = srcW * scale;
+  const drawH = srcH * scale;
+  setCssTransform(ctx, atlasScale);
+  ctx.drawImage(img, x + (width - drawW) / 2, y + (height - drawH) / 2, drawW, drawH);
+}
+function computeUvAffine(points, uvs) {
+  if (points.length < 3 || uvs.length < 3) return null;
+  const [p0, p1, p2] = points;
+  const [uv0, uv1, uv2] = uvs;
+  const sx0 = p0[0], sy0 = p0[1];
+  const sx1 = p1[0], sy1 = p1[1];
+  const sx2 = p2[0], sy2 = p2[1];
+  const u0 = uv0[0], V0 = 1 - uv0[1];
+  const u1 = uv1[0], V1 = 1 - uv1[1];
+  const u2 = uv2[0], V2 = 1 - uv2[1];
+  const du1 = u1 - u0, dV1 = V1 - V0;
+  const du2 = u2 - u0, dV2 = V2 - V0;
+  const det = du1 * dV2 - du2 * dV1;
+  if (Math.abs(det) <= 1e-9) return null;
+  const dx1 = sx1 - sx0, dx2 = sx2 - sx0;
+  const dy1 = sy1 - sy0, dy2 = sy2 - sy0;
+  const affine = {
+    a: (dx1 * dV2 - dx2 * dV1) / det,
+    b: (du1 * dx2 - du2 * dx1) / det,
+    c: (dy1 * dV2 - dy2 * dV1) / det,
+    d: (du1 * dy2 - du2 * dy1) / det,
+    e: 0,
+    f: 0
+  };
+  affine.e = sx0 - affine.a * u0 - affine.b * V0;
+  affine.f = sy0 - affine.c * u0 - affine.d * V0;
+  return affine;
+}
+function computeUvSampleRect(uvs) {
+  if (uvs.length === 0) return null;
+  let minU = Infinity;
+  let minV = Infinity;
+  let maxU = -Infinity;
+  let maxV = -Infinity;
+  for (const uv of uvs) {
+    const u = uv[0];
+    const v = 1 - uv[1];
+    if (!Number.isFinite(u) || !Number.isFinite(v)) return null;
+    minU = Math.min(minU, u);
+    maxU = Math.max(maxU, u);
+    minV = Math.min(minV, v);
+    maxV = Math.max(maxV, v);
+  }
+  return { minU, minV, maxU, maxV };
+}
+function projectTextureTriangle(triangle, tile, elev, origin, xAxis, yAxis, shiftX, shiftY) {
+  const points = triangle.vertices.map((vertex) => {
+    const point = [
+      vertex[1] * tile,
+      vertex[0] * tile,
+      vertex[2] * elev
+    ];
+    const dx = point[0] - origin[0];
+    const dy = point[1] - origin[1];
+    const dz = point[2] - origin[2];
+    return [
+      dx * xAxis[0] + dy * xAxis[1] + dz * xAxis[2] + shiftX,
+      dx * yAxis[0] + dy * yAxis[1] + dz * yAxis[2] + shiftY
+    ];
+  });
+  const uvAffine = computeUvAffine(points, triangle.uvs);
+  const uvSampleRect = computeUvSampleRect(triangle.uvs);
+  if (!uvAffine && !uvSampleRect) return null;
+  return {
+    screenPts: points.flatMap(([x, y]) => [x, y]),
+    uvAffine,
+    uvSampleRect
+  };
+}
+function expandClipPoints(points, amount) {
+  if (points.length < 6 || amount <= 0) return points;
+  let cx = 0;
+  let cy = 0;
+  const count = points.length / 2;
+  for (let i = 0; i < points.length; i += 2) {
+    cx += points[i];
+    cy += points[i + 1];
+  }
+  cx /= count;
+  cy /= count;
+  const expanded = points.slice();
+  for (let i = 0; i < expanded.length; i += 2) {
+    const dx = expanded[i] - cx;
+    const dy = expanded[i + 1] - cy;
+    const len = Math.hypot(dx, dy);
+    if (len <= RECT_EPS) continue;
+    expanded[i] += dx / len * amount;
+    expanded[i + 1] += dy / len * amount;
+  }
+  return expanded;
+}
+function canvasToUrl(canvas) {
+  if (typeof canvas.toBlob === "function") {
+    return new Promise((resolve) => {
+      canvas.toBlob((blob) => {
+        resolve(blob ? URL.createObjectURL(blob) : null);
+      }, "image/png");
+    });
+  }
+  try {
+    return Promise.resolve(canvas.toDataURL("image/png"));
+  } catch {
+    return Promise.resolve(null);
+  }
+}
+function clampSourceCoord(value, max) {
+  return Math.max(0, Math.min(max, value));
+}
+function drawImageUvSample(ctx, img, rect, x, y, width, height, atlasScale) {
+  const imgW = img.naturalWidth || img.width || 1;
+  const imgH = img.naturalHeight || img.height || 1;
+  const rawX0 = clampSourceCoord(Math.min(rect.minU, rect.maxU) * imgW, imgW);
+  const rawX1 = clampSourceCoord(Math.max(rect.minU, rect.maxU) * imgW, imgW);
+  const rawY0 = clampSourceCoord(Math.min(rect.minV, rect.maxV) * imgH, imgH);
+  const rawY1 = clampSourceCoord(Math.max(rect.minV, rect.maxV) * imgH, imgH);
+  let sx = Math.floor(rawX0);
+  let sy = Math.floor(rawY0);
+  let sw = Math.ceil(rawX1) - sx;
+  let sh = Math.ceil(rawY1) - sy;
+  if (sw < 1) {
+    sx = Math.floor(clampSourceCoord((rect.minU + rect.maxU) / 2 * imgW, imgW - 1));
+    sw = 1;
+  }
+  if (sh < 1) {
+    sy = Math.floor(clampSourceCoord((rect.minV + rect.maxV) / 2 * imgH, imgH - 1));
+    sh = 1;
+  }
+  sx = Math.max(0, Math.min(imgW - 1, sx));
+  sy = Math.max(0, Math.min(imgH - 1, sy));
+  sw = Math.max(1, Math.min(imgW - sx, sw));
+  sh = Math.max(1, Math.min(imgH - sy, sh));
+  setCssTransform(ctx, atlasScale);
+  ctx.drawImage(img, sx, sy, sw, sh, x, y, width, height);
+}
+function computeTextureAtlasPlan(polygon, index, options = {}) {
+  const { vertices, texture, uvs } = polygon;
+  if (!vertices || vertices.length < 3) return null;
+  const tile = options.tileSize ?? DEFAULT_TILE;
+  const elev = options.layerElevation ?? tile;
+  const toCss = (v) => [
+    v[1] * tile,
+    v[0] * tile,
+    v[2] * elev
+  ];
+  const pts = vertices.map(toCss);
+  const p0 = pts[0];
+  const p1 = pts[1];
+  const p2 = pts[2];
+  const e1 = [p1[0] - p0[0], p1[1] - p0[1], p1[2] - p0[2]];
+  const e2 = [p2[0] - p0[0], p2[1] - p0[1], p2[2] - p0[2]];
+  const l01 = Math.hypot(e1[0], e1[1], e1[2]);
+  if (l01 === 0) return null;
+  const xAxis = [e1[0] / l01, e1[1] / l01, e1[2] / l01];
+  let nx = -(e1[1] * e2[2] - e1[2] * e2[1]);
+  let ny = -(e1[2] * e2[0] - e1[0] * e2[2]);
+  let nz = -(e1[0] * e2[1] - e1[1] * e2[0]);
+  const nLen = Math.hypot(nx, ny, nz);
+  if (nLen === 0) return null;
+  nx /= nLen;
+  ny /= nLen;
+  nz /= nLen;
+  const yAxis = [
+    ny * xAxis[2] - nz * xAxis[1],
+    nz * xAxis[0] - nx * xAxis[2],
+    nx * xAxis[1] - ny * xAxis[0]
+  ];
+  const local2D = pts.map((p) => {
+    const dx = p[0] - p0[0], dy = p[1] - p0[1], dz = p[2] - p0[2];
+    return [
+      dx * xAxis[0] + dy * xAxis[1] + dz * xAxis[2],
+      dx * yAxis[0] + dy * yAxis[1] + dz * yAxis[2]
+    ];
+  });
+  let xMin = Infinity, yMin = Infinity, xMax = -Infinity, yMax = -Infinity;
+  for (const [x, y] of local2D) {
+    if (x < xMin) xMin = x;
+    if (x > xMax) xMax = x;
+    if (y < yMin) yMin = y;
+    if (y > yMax) yMax = y;
+  }
+  const shiftX = -xMin;
+  const shiftY = -yMin;
+  const w = xMax - xMin;
+  const h = yMax - yMin;
+  if (!Number.isFinite(w) || !Number.isFinite(h)) return null;
+  const screenPts = [];
+  for (let i = 0; i < local2D.length; i++) {
+    const [x, y] = local2D[i];
+    const sx = x + shiftX;
+    const sy = y + shiftY;
+    screenPts.push(sx, sy);
+  }
+  const tx = p0[0] - shiftX * xAxis[0] - shiftY * yAxis[0];
+  const ty = p0[1] - shiftX * xAxis[1] - shiftY * yAxis[1];
+  const tz = p0[2] - shiftX * xAxis[2] - shiftY * yAxis[2];
+  const matrix = [
+    xAxis[0],
+    xAxis[1],
+    xAxis[2],
+    0,
+    yAxis[0],
+    yAxis[1],
+    yAxis[2],
+    0,
+    nx,
+    ny,
+    nz,
+    0,
+    tx,
+    ty,
+    tz,
+    1
+  ].join(",");
+  const directionalCfg = options.directionalLight;
+  const ambientCfg = options.ambientLight;
+  const lightDir = directionalCfg?.direction ?? DEFAULT_LIGHT_DIR;
+  const lightColor = directionalCfg?.color ?? DEFAULT_LIGHT_COLOR;
+  const lightIntensity = Math.max(0, directionalCfg?.intensity ?? DEFAULT_LIGHT_INTENSITY);
+  const ambientColor = ambientCfg?.color ?? DEFAULT_AMBIENT_COLOR;
+  const ambientIntensity = Math.max(0, ambientCfg?.intensity ?? DEFAULT_AMBIENT_INTENSITY);
+  const lLen = Math.hypot(lightDir[0], lightDir[1], lightDir[2]) || 1;
+  const lx = lightDir[0] / lLen, ly = lightDir[1] / lLen, lz = lightDir[2] / lLen;
+  const directScale = lightIntensity * Math.max(0, nx * lx + ny * ly + nz * lz);
+  const textureTint = textureTintFactors(directScale, lightColor, ambientColor, ambientIntensity);
+  const shadedColor = shadePolygon(polygon.color ?? "#cccccc", directScale, lightColor, ambientColor, ambientIntensity);
+  let uvAffine = null;
+  let uvSampleRect = null;
+  if (texture && uvs && uvs.length >= 3 && uvs.length === vertices.length) {
+    uvSampleRect = computeUvSampleRect(uvs);
+    uvAffine = computeUvAffine(
+      local2D.map(([x, y]) => [x + shiftX, y + shiftY]),
+      uvs
+    );
+  }
+  const textureTriangles = texture && polygon.textureTriangles?.length ? polygon.textureTriangles.map(
+    (triangle) => projectTextureTriangle(triangle, tile, elev, p0, xAxis, yAxis, shiftX, shiftY)
+  ).filter((triangle) => !!triangle) : null;
+  return {
+    index,
+    polygon,
+    texture,
+    tileSize: tile,
+    layerElevation: elev,
+    matrix,
+    canvasW: Math.max(1, Math.ceil(w)),
+    canvasH: Math.max(1, Math.ceil(h)),
+    screenPts,
+    uvAffine,
+    uvSampleRect,
+    textureTriangles,
+    normal: [nx, ny, nz],
+    textureTint,
+    shadedColor
+  };
+}
+function packTextureAtlasPlans(plans, atlasScale = 1) {
+  const entries = Array(plans.length).fill(null);
+  const pages = [];
+  const padding = atlasPadding(atlasScale);
+  const sortedPlans = plans.filter((plan) => !!plan).sort(
+    (a, b) => b.canvasH - a.canvasH || b.canvasW - a.canvasW || a.index - b.index
+  );
+  const createPage = () => ({
+    width: padding,
+    height: padding,
+    entries: [],
+    shelves: []
+  });
+  const placeOnPage = (page, plan, pageIndex) => {
+    if (page.sealed) return null;
+    for (const shelf of page.shelves) {
+      if (plan.canvasH <= shelf.height && shelf.x + plan.canvasW + padding <= ATLAS_MAX_SIZE) {
+        const entry2 = { ...plan, pageIndex, x: shelf.x, y: shelf.y };
+        shelf.x += plan.canvasW + padding;
+        page.entries.push(entry2);
+        page.width = Math.max(page.width, entry2.x + plan.canvasW + padding);
+        return entry2;
+      }
+    }
+    const shelfY = page.shelves.length === 0 ? padding : page.height;
+    if (shelfY + plan.canvasH + padding > ATLAS_MAX_SIZE) return null;
+    const entry = { ...plan, pageIndex, x: padding, y: shelfY };
+    page.shelves.push({
+      x: padding + plan.canvasW + padding,
+      y: shelfY,
+      height: plan.canvasH
+    });
+    page.entries.push(entry);
+    page.width = Math.max(page.width, entry.x + plan.canvasW + padding);
+    page.height = Math.max(page.height, shelfY + plan.canvasH + padding);
+    return entry;
+  };
+  for (const plan of sortedPlans) {
+    const tooLarge = plan.canvasW + padding * 2 > ATLAS_MAX_SIZE || plan.canvasH + padding * 2 > ATLAS_MAX_SIZE;
+    if (tooLarge) {
+      const pageIndex = pages.length;
+      const entry = {
+        ...plan,
+        pageIndex,
+        x: padding,
+        y: padding
+      };
+      entries[plan.index] = entry;
+      pages.push({
+        width: plan.canvasW + padding * 2,
+        height: plan.canvasH + padding * 2,
+        entries: [entry],
+        shelves: [],
+        sealed: true
+      });
+      continue;
+    }
+    let placed = null;
+    for (let pageIndex = 0; pageIndex < pages.length; pageIndex++) {
+      placed = placeOnPage(pages[pageIndex], plan, pageIndex);
+      if (placed) break;
+    }
+    if (!placed) {
+      const page = createPage();
+      const pageIndex = pages.length;
+      pages.push(page);
+      placed = placeOnPage(page, plan, pageIndex);
+    }
+    if (placed) entries[plan.index] = placed;
+  }
+  return {
+    entries,
+    pages: pages.map(({ width, height, entries: entries2 }) => ({ width, height, entries: entries2 }))
+  };
+}
+async function buildAtlasPage(page, textureLighting, doc, atlasScale) {
+  const canvas = doc.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(page.width * atlasScale));
+  canvas.height = Math.max(1, Math.ceil(page.height * atlasScale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return { width: page.width, height: page.height, url: null };
+  const uniqueTextures = Array.from(new Set(
+    page.entries.flatMap((entry) => entry.texture ? [entry.texture] : [])
+  ));
+  const loaded = /* @__PURE__ */ new Map();
+  await Promise.all(uniqueTextures.map(async (url2) => {
+    loaded.set(url2, await loadTextureImage(url2));
+  }));
+  for (const entry of page.entries) {
+    const srcImg = entry.texture ? loaded.get(entry.texture) : null;
+    ctx.save();
+    setCssTransform(ctx, atlasScale);
+    ctx.beginPath();
+    for (let i = 0; i < entry.screenPts.length; i += 2) {
+      const px = entry.x + entry.screenPts[i];
+      const py = entry.y + entry.screenPts[i + 1];
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+    ctx.clip();
+    if (!entry.texture) {
+      setCssTransform(ctx, atlasScale);
+      ctx.fillStyle = textureLighting === "dynamic" ? entry.polygon.color ?? "#cccccc" : entry.shadedColor;
+      ctx.fillRect(entry.x, entry.y, entry.canvasW, entry.canvasH);
+    } else {
+      if (srcImg && entry.textureTriangles?.length) {
+        const imgW = srcImg.naturalWidth || srcImg.width || 1;
+        const imgH = srcImg.naturalHeight || srcImg.height || 1;
+        for (const triangle of entry.textureTriangles) {
+          const clipPts = expandClipPoints(triangle.screenPts, TEXTURE_TRIANGLE_BLEED);
+          ctx.save();
+          setCssTransform(ctx, atlasScale);
+          ctx.beginPath();
+          for (let i = 0; i < clipPts.length; i += 2) {
+            const px = entry.x + clipPts[i];
+            const py = entry.y + clipPts[i + 1];
+            if (i === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+          }
+          ctx.closePath();
+          ctx.clip();
+          if (triangle.uvAffine) {
+            setCssTransform(
+              ctx,
+              atlasScale,
+              triangle.uvAffine.a / imgW,
+              triangle.uvAffine.c / imgW,
+              triangle.uvAffine.b / imgH,
+              triangle.uvAffine.d / imgH,
+              entry.x + triangle.uvAffine.e,
+              entry.y + triangle.uvAffine.f
+            );
+            ctx.drawImage(srcImg, 0, 0);
+          } else if (triangle.uvSampleRect) {
+            drawImageUvSample(
+              ctx,
+              srcImg,
+              triangle.uvSampleRect,
+              entry.x,
+              entry.y,
+              entry.canvasW,
+              entry.canvasH,
+              atlasScale
+            );
+          }
+          ctx.restore();
+        }
+      } else if (srcImg && entry.uvAffine) {
+        const imgW = srcImg.naturalWidth || srcImg.width || 1;
+        const imgH = srcImg.naturalHeight || srcImg.height || 1;
+        setCssTransform(
+          ctx,
+          atlasScale,
+          entry.uvAffine.a / imgW,
+          entry.uvAffine.c / imgW,
+          entry.uvAffine.b / imgH,
+          entry.uvAffine.d / imgH,
+          entry.x + entry.uvAffine.e,
+          entry.y + entry.uvAffine.f
+        );
+        ctx.drawImage(srcImg, 0, 0);
+      } else if (srcImg && entry.uvSampleRect) {
+        drawImageUvSample(
+          ctx,
+          srcImg,
+          entry.uvSampleRect,
+          entry.x,
+          entry.y,
+          entry.canvasW,
+          entry.canvasH,
+          atlasScale
+        );
+      } else if (srcImg) {
+        drawImageCover(ctx, srcImg, entry.x, entry.y, entry.canvasW, entry.canvasH, atlasScale);
+      }
+    }
+    if (entry.texture && textureLighting === "baked") {
+      applyTextureTint(ctx, entry.x, entry.y, entry.canvasW, entry.canvasH, entry.textureTint, atlasScale);
+    }
+    ctx.restore();
+  }
+  const url = await canvasToUrl(canvas);
+  canvas.width = 1;
+  canvas.height = 1;
+  return {
+    width: page.width,
+    height: page.height,
+    url
+  };
+}
+async function buildAtlasPages(pages, textureLighting, doc, atlasScale, isCancelled) {
+  const built = [];
+  for (const page of pages) {
+    if (isCancelled()) break;
+    built.push(await buildAtlasPage(page, textureLighting, doc, atlasScale));
+  }
+  return built;
+}
+function useTextureAtlas(plans, textureLighting, atlasScaleInput) {
+  const useBorderShape = textureLighting !== "dynamic" && borderShapeSupported();
+  const atlasPlans = useMemo5(
+    () => plans.map((plan) => {
+      if (!plan) return plan;
+      if (plan.texture) return plan;
+      if (isSolidTrianglePlan(plan)) return null;
+      if (textureLighting !== "dynamic" && (useBorderShape || isFullRectSolid(plan))) return null;
+      return plan;
+    }),
+    [plans, textureLighting, useBorderShape]
+  );
+  const { packed, atlasScale } = useMemo5(
+    () => packTextureAtlasPlansWithScale(atlasPlans, atlasScaleInput),
+    [atlasPlans, atlasScaleInput]
+  );
+  const [pages, setPages] = useState(
+    () => packed.pages.map((page) => ({ width: page.width, height: page.height, url: null }))
+  );
+  useEffect2(() => {
+    let cancelled = false;
+    let urls = [];
+    setPages(packed.pages.map((page) => ({ width: page.width, height: page.height, url: null })));
+    if (packed.pages.length === 0 || typeof document === "undefined") {
+      return () => {
+      };
+    }
+    buildAtlasPages(packed.pages, textureLighting, document, atlasScale, () => cancelled).then((nextPages) => {
+      if (cancelled) {
+        for (const page of nextPages) {
+          if (page.url?.startsWith("blob:")) URL.revokeObjectURL(page.url);
+        }
+        return;
+      }
+      urls = nextPages.flatMap((page) => page.url?.startsWith("blob:") ? [page.url] : []);
+      setPages(nextPages);
+    }).catch(() => {
+      if (!cancelled) {
+        setPages(packed.pages.map((page) => ({ width: page.width, height: page.height, url: null })));
+      }
+    });
+    return () => {
+      cancelled = true;
+      for (const url of urls) URL.revokeObjectURL(url);
+    };
+  }, [packed, textureLighting, atlasScale]);
+  return {
+    entries: packed.entries,
+    pages,
+    ready: pages.length === 0 || pages.every((page) => !!page.url)
+  };
+}
+function TextureBorderShapePoly({
+  entry,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const fullRect = isFullRectSolid(entry);
+  const borderShape = fullRect ? null : cssBorderShapeForPlan(entry);
+  const setElementRef = useCallback3((el) => {
+    if (!el) return;
+    if (borderShape) el.style.setProperty("border-shape", borderShape);
+    else el.style.removeProperty("border-shape");
+  }, [borderShape]);
+  const style = fullRect ? {
+    width: entry.canvasW,
+    height: entry.canvasH,
+    transform: formatMatrix3d(entry.matrix),
+    background: entry.shadedColor,
+    pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...styleProp
+  } : {
+    width: entry.canvasW,
+    height: entry.canvasH,
+    transform: formatMatrix3d(entry.matrix),
+    color: entry.shadedColor,
+    pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...styleProp
+  };
+  const dataAttrs = entry.polygon.data ? Object.fromEntries(
+    Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
+  ) : {};
+  const elementClassName = className?.trim() || void 0;
+  if (fullRect) {
+    return /* @__PURE__ */ jsx3(
+      "b",
+      {
+        className: elementClassName,
+        style,
+        ...domEventHandlers,
+        ...dataAttrs,
+        ...domAttrs
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "i",
+    {
+      ref: setElementRef,
+      className: elementClassName,
+      style,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+}
+function TextureTrianglePoly({
+  entry,
+  textureLighting,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const triangleStyle = solidTriangleStyle(entry, textureLighting, pointerEvents);
+  if (!triangleStyle) return null;
+  const dataAttrs = entry.polygon.data ? Object.fromEntries(
+    Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
+  ) : {};
+  const elementClassName = className?.trim() || void 0;
+  return /* @__PURE__ */ jsx3(
+    "u",
+    {
+      className: elementClassName,
+      style: { ...triangleStyle, ...styleProp },
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+}
+function TextureAtlasPoly({
+  entry,
+  page,
+  textureLighting,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const dynamic = textureLighting === "dynamic";
+  const dynamicMask = dynamic && page?.url ? `url(${page.url})` : void 0;
+  const background = !dynamic && page?.url ? `url(${page.url}) -${entry.x}px -${entry.y}px / ${page.width}px ${page.height}px no-repeat` : void 0;
+  const style = {
+    width: entry.canvasW,
+    height: entry.canvasH,
+    transform: formatMatrix3d(entry.matrix),
+    background,
+    backgroundImage: dynamic && page?.url ? `url(${page.url})` : void 0,
+    backgroundPosition: dynamic ? `-${entry.x}px -${entry.y}px` : void 0,
+    backgroundSize: dynamic && page ? `${page.width}px ${page.height}px` : void 0,
+    ...dynamic ? {
+      ["--pnx"]: entry.normal[0].toFixed(4),
+      ["--pny"]: entry.normal[1].toFixed(4),
+      ["--pnz"]: entry.normal[2].toFixed(4)
+    } : null,
+    ...dynamic && dynamicMask ? {
+      // Use the atlas as an alpha mask so transparent regions outside
+      // the polygon don't get painted with the tint.
+      maskImage: dynamicMask,
+      maskMode: "alpha",
+      maskPosition: `-${entry.x}px -${entry.y}px`,
+      maskSize: page ? `${page.width}px ${page.height}px` : void 0,
+      maskRepeat: "no-repeat",
+      WebkitMaskImage: dynamicMask,
+      WebkitMaskPosition: `-${entry.x}px -${entry.y}px`,
+      WebkitMaskSize: page ? `${page.width}px ${page.height}px` : void 0,
+      WebkitMaskRepeat: "no-repeat"
+    } : null,
+    opacity: page?.url ? void 0 : 0,
+    pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...styleProp
+  };
+  const dataAttrs = entry.polygon.data ? Object.fromEntries(
+    Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
+  ) : {};
+  const elementClassName = className?.trim() || void 0;
+  return /* @__PURE__ */ jsx3(
+    "s",
+    {
+      className: elementClassName,
+      style,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+}
+
+// src/scene/sceneContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var PolySceneContext = createContext2(null);
+function usePolySceneContext2() {
+  return useContext2(PolySceneContext);
+}
+
+// src/scene/PolyScene.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function PolySceneInner({
+  polygons: polygonsProp,
+  centerPolygons: centerPolygonsProp,
+  perspective: _perspective,
+  rotX: _rotX,
+  rotY: _rotY,
+  zoom: _zoom,
+  directionalLight,
+  ambientLight,
+  textureLighting = "baked",
+  atlasScale,
+  autoCenter = false,
+  className,
+  style,
+  children,
+  position: _position,
+  scale: _scale,
+  rotation: _rotation,
+  debugShowLabels: _debugShowLabels,
+  debugShowBackfaces
+}) {
+  const { store, sceneElRef } = useCameraContext();
+  const cameraState = store.getState().cameraState;
+  const localSceneRef = useCallback4(
+    (el) => {
+      sceneElRef.current = el;
+    },
+    [sceneElRef]
+  );
+  useEffect3(() => {
+    const el = sceneElRef.current;
+    if (!el) return;
+    el.classList.toggle("polycss-debug-show-backfaces", !!debugShowBackfaces);
+  }, [debugShowBackfaces, sceneElRef]);
+  const injectedRef = useRef3(false);
+  useEffect3(() => {
+    if (injectedRef.current) return;
+    if (typeof document !== "undefined") {
+      injectPolyBaseStyles(document);
+      injectedRef.current = true;
+    }
+  }, []);
+  const inputPolygons = useMemo6(() => polygonsProp ?? [], [polygonsProp]);
+  const centerInputPolygons = useMemo6(
+    () => centerPolygonsProp ?? null,
+    [centerPolygonsProp]
+  );
+  const { polygons, sceneBbox: renderSceneBbox } = usePolySceneContext(inputPolygons, {
+    directionalLight
+  });
+  const { sceneBbox: centerSceneBbox } = usePolySceneContext(
+    centerInputPolygons ?? inputPolygons,
+    { directionalLight }
+  );
+  const sceneBbox = centerInputPolygons ? centerSceneBbox : renderSceneBbox;
+  const sceneStyle = useMemo6(() => {
+    const handle = createIsometricCamera2(cameraState);
+    const cameraStyle = handle.getStyle();
+    return {
+      ["--scene-transform"]: cameraStyle.transform
+    };
+  }, [cameraState]);
+  const computedClassName = `polycss-scene${className ? ` ${className}` : ""}`;
+  const directionalForAtlas = textureLighting === "dynamic" ? void 0 : directionalLight;
+  const ambientForAtlas = textureLighting === "dynamic" ? void 0 : ambientLight;
+  const polyContext = useMemo6(() => {
+    const tileSize = 50;
+    return {
+      tileSize,
+      layerElevation: tileSize,
+      directionalLight: directionalForAtlas,
+      ambientLight: ambientForAtlas,
+      textureLighting
+    };
+  }, [directionalForAtlas, ambientForAtlas, textureLighting]);
+  const textureAtlasPlans = useMemo6(
+    () => polygons.map((p, i) => computeTextureAtlasPlan(p, i, polyContext)),
+    [polygons, polyContext]
+  );
+  const textureAtlas = useTextureAtlas(textureAtlasPlans, textureLighting, atlasScale);
+  const dynamicLightVars = useMemo6(() => {
+    if (textureLighting !== "dynamic") return null;
+    const dir = directionalLight?.direction ?? [0.4, -0.7, 0.59];
+    const len = Math.hypot(dir[0], dir[1], dir[2]) || 1;
+    const lx = dir[0] / len, ly = dir[1] / len, lz = dir[2] / len;
+    const lightRgb = parseHexColor(directionalLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
+    const ambRgb = parseHexColor(ambientLight?.color ?? "#ffffff")?.rgb ?? [255, 255, 255];
+    const lightIntensity = directionalLight?.intensity ?? 1;
+    const ambientIntensity = ambientLight?.intensity ?? 0.4;
+    const ch = (n) => (n / 255).toFixed(4);
+    return {
+      ["--plx"]: lx.toFixed(4),
+      ["--ply"]: ly.toFixed(4),
+      ["--plz"]: lz.toFixed(4),
+      ["--plr"]: ch(lightRgb[0]),
+      ["--plg"]: ch(lightRgb[1]),
+      ["--plb"]: ch(lightRgb[2]),
+      ["--pli"]: lightIntensity.toFixed(4),
+      ["--par"]: ch(ambRgb[0]),
+      ["--pag"]: ch(ambRgb[1]),
+      ["--pab"]: ch(ambRgb[2]),
+      ["--pai"]: ambientIntensity.toFixed(4)
+    };
+  }, [textureLighting, directionalLight, ambientLight]);
+  const autoCenterTransform = useMemo6(() => {
+    if (!autoCenter) return void 0;
+    const cssX = (sceneBbox.min[1] + sceneBbox.max[1]) / 2 * polyContext.tileSize;
+    const cssY = (sceneBbox.min[0] + sceneBbox.max[0]) / 2 * polyContext.tileSize;
+    const cssZ = (sceneBbox.min[2] + sceneBbox.max[2]) / 2 * polyContext.layerElevation;
+    return `translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+  }, [autoCenter, sceneBbox, polyContext.tileSize, polyContext.layerElevation]);
+  const polyChildren = textureAtlas.entries.map((entry, index) => {
+    if (entry) {
+      return /* @__PURE__ */ jsx4(
+        TextureAtlasPoly,
+        {
+          entry,
+          page: textureAtlas.pages[entry.pageIndex],
+          textureLighting
+        },
+        entry.index
+      );
+    }
+    const plan = textureAtlasPlans[index];
+    if (!plan || plan.texture) return null;
+    return isSolidTrianglePlan(plan) ? /* @__PURE__ */ jsx4(TextureTrianglePoly, { entry: plan, textureLighting }, plan.index) : /* @__PURE__ */ jsx4(TextureBorderShapePoly, { entry: plan }, plan.index);
+  });
+  const sceneCtxValue = useMemo6(
+    () => ({ textureLighting, directionalLight, ambientLight }),
+    [textureLighting, directionalLight, ambientLight]
+  );
+  return /* @__PURE__ */ jsx4(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: localSceneRef,
+      className: computedClassName,
+      "data-polycss-lighting": textureLighting,
+      "aria-hidden": "true",
+      style: {
+        ...sceneStyle,
+        ...dynamicLightVars ?? null,
+        ...style
+        // No more --polycss-rows / --polycss-cols — CSS Grid was dropped
+        // in Phase 4 (per §Design.4a).
+      },
+      children: autoCenterTransform ? /* @__PURE__ */ jsxs("div", { className: "polycss-offset", style: { ["--offset-transform"]: autoCenterTransform }, children: [
+        polyChildren,
+        children
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        polyChildren,
+        children
+      ] })
+    }
+  ) });
+}
+var PolyScene = memo3(PolySceneInner);
+
+// src/scene/PolyMesh.tsx
+import {
+  forwardRef,
+  useCallback as useCallback6,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useImperativeHandle,
+  useMemo as useMemo7,
+  useRef as useRef5,
+  useState as useState3
+} from "react";
+import { computeSceneBbox, inverseRotateVec3 } from "@layoutit/polycss-core";
+
+// src/scene/useMesh.ts
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+import { loadMesh } from "@layoutit/polycss-core";
+var EMPTY_POLYGONS = [];
+var EMPTY_WARNINGS = [];
+function usePolyMesh(src, options) {
+  const [state, setState] = useState2({
+    polygons: EMPTY_POLYGONS,
+    loading: !!src,
+    error: null,
+    warnings: EMPTY_WARNINGS
+  });
+  const activeResultRef = useRef4(null);
+  const dispose = useCallback5(() => {
+    const r = activeResultRef.current;
+    if (r) {
+      try {
+        r.dispose();
+      } catch {
+      }
+      activeResultRef.current = null;
+    }
+  }, []);
+  useEffect4(() => {
+    if (!src) {
+      dispose();
+      setState({
+        polygons: EMPTY_POLYGONS,
+        loading: false,
+        error: null,
+        warnings: EMPTY_WARNINGS
+      });
+      return;
+    }
+    let cancelled = false;
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    const prevResult = activeResultRef.current;
+    loadMesh(src, options).then((result) => {
+      if (cancelled) {
+        try {
+          result.dispose();
+        } catch {
+        }
+        return;
+      }
+      if (prevResult) {
+        try {
+          prevResult.dispose();
+        } catch {
+        }
+      }
+      activeResultRef.current = result;
+      setState({
+        polygons: result.polygons,
+        loading: false,
+        error: null,
+        warnings: result.warnings ?? EMPTY_WARNINGS
+      });
+    }).catch((err) => {
+      if (cancelled) return;
+      const error = err instanceof Error ? err : new Error(String(err));
+      setState((prev) => ({
+        polygons: prev.polygons,
+        loading: false,
+        error,
+        warnings: prev.warnings
+      }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src, dispose]);
+  useEffect4(() => {
+    return () => dispose();
+  }, [dispose]);
+  return {
+    polygons: state.polygons,
+    loading: state.loading,
+    error: state.error,
+    warnings: state.warnings,
+    dispose
+  };
+}
+
+// src/scene/events.ts
+var MESH_REGISTRY = /* @__PURE__ */ new WeakMap();
+function registerMeshElement(el, handle) {
+  MESH_REGISTRY.set(el, handle);
+}
+function unregisterMeshElement(el) {
+  MESH_REGISTRY.delete(el);
+}
+function findPolyMeshHandle(el) {
+  let cur = el;
+  while (cur) {
+    if (cur instanceof HTMLElement) {
+      const h = MESH_REGISTRY.get(cur);
+      if (h) return h;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
+function pointInMeshElement(meshEl, clientX, clientY) {
+  const polys = Array.from(meshEl.querySelectorAll("i,b,s,u"));
+  for (const p of polys) {
+    const r = p.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) continue;
+    if (clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom) {
+      return true;
+    }
+  }
+  return false;
+}
+function findMeshUnderPoint(clientX, clientY, filter) {
+  if (typeof document === "undefined") return null;
+  const meshEls = Array.from(
+    document.querySelectorAll(".polycss-mesh")
+  );
+  for (const meshEl of meshEls) {
+    if (filter && !filter(meshEl)) continue;
+    const handle = findPolyMeshHandle(meshEl);
+    if (!handle) continue;
+    if (pointInMeshElement(meshEl, clientX, clientY)) return handle;
+  }
+  return null;
+}
+
+// src/scene/PolyMesh.tsx
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+function buildTransform(position, scale, rotation) {
+  const parts = [];
+  if (position) {
+    parts.push(`translate3d(${position[0]}px, ${position[1]}px, ${position[2]}px)`);
+  }
+  if (scale !== void 0) {
+    if (typeof scale === "number") {
+      if (scale !== 1) parts.push(`scale3d(${scale}, ${scale}, ${scale})`);
+    } else {
+      parts.push(`scale3d(${scale[0]}, ${scale[1]}, ${scale[2]})`);
+    }
+  }
+  if (rotation) {
+    if (rotation[0]) parts.push(`rotateX(${rotation[0]}deg)`);
+    if (rotation[1]) parts.push(`rotateY(${rotation[1]}deg)`);
+    if (rotation[2]) parts.push(`rotateZ(${rotation[2]}deg)`);
+  }
+  return parts.length > 0 ? parts.join(" ") : void 0;
+}
+function recenterPolygons(polygons) {
+  if (polygons.length === 0) return polygons;
+  const bbox = computeSceneBbox(polygons);
+  const cx = (bbox.min[0] + bbox.max[0]) / 2;
+  const cy = (bbox.min[1] + bbox.max[1]) / 2;
+  const cz = (bbox.min[2] + bbox.max[2]) / 2;
+  if (cx === 0 && cy === 0 && cz === 0) return polygons;
+  const shift = (v) => [v[0] - cx, v[1] - cy, v[2] - cz];
+  return polygons.map((p) => ({
+    ...p,
+    vertices: p.vertices.map(shift),
+    ...p.textureTriangles?.length ? {
+      textureTriangles: p.textureTriangles.map((triangle) => ({
+        ...triangle,
+        vertices: triangle.vertices.map(shift)
+      }))
+    } : null
+  }));
+}
+var PolyMesh = forwardRef(function PolyMesh2({
+  id,
+  src,
+  mtl,
+  polygons: polygonsProp,
+  autoCenter,
+  textureLighting,
+  atlasScale,
+  children,
+  fallback,
+  errorFallback,
+  parseOptions,
+  position,
+  scale,
+  rotation,
+  className,
+  style,
+  onClick,
+  onContextMenu,
+  onDoubleClick,
+  onWheel,
+  onPointerDown,
+  onPointerUp,
+  onPointerMove,
+  onPointerOver,
+  onPointerOut,
+  onPointerEnter,
+  onPointerLeave,
+  onPointerCancel
+}, forwardedRef) {
+  const mergedOptions = useMemo7(() => {
+    if (!mtl && !parseOptions) return void 0;
+    return { ...parseOptions ?? {}, ...mtl ? { mtlUrl: mtl } : {} };
+  }, [mtl, parseOptions]);
+  const fetched = usePolyMesh(src ?? "", mergedOptions);
+  const sourcePolygons = src ? fetched.polygons : polygonsProp ?? [];
+  const polygons = useMemo7(
+    () => autoCenter ? recenterPolygons(sourcePolygons) : sourcePolygons,
+    [sourcePolygons, autoCenter]
+  );
+  const transform = buildTransform(position, scale, rotation);
+  const wrapperRef = useRef5(null);
+  const propsRef = useRef5({ position, scale, rotation });
+  propsRef.current = { position, scale, rotation };
+  const polygonsRef = useRef5(polygons);
+  polygonsRef.current = polygons;
+  const [bakedRotation, setBakedRotation] = useState3(rotation);
+  const handle = useMemo7(() => ({
+    get element() {
+      return wrapperRef.current;
+    },
+    id,
+    getPosition: () => propsRef.current.position,
+    getRotation: () => propsRef.current.rotation,
+    getScale: () => propsRef.current.scale,
+    getPolygons: () => polygonsRef.current,
+    rebakeAtlas: () => setBakedRotation(propsRef.current.rotation)
+  }), [id]);
+  useImperativeHandle(forwardedRef, () => handle, [handle]);
+  useEffect5(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    registerMeshElement(el, handle);
+    return () => unregisterMeshElement(el);
+  }, [handle]);
+  const cameraCtx = useContext3(PolyCameraContext);
+  const cameraElRef = cameraCtx?.cameraElRef ?? null;
+  const pointerDownAtRef = useRef5(null);
+  const makeEvent = useCallback6(
+    function makeEvent2(nativeEvent, clientX, clientY) {
+      const intersections = [];
+      if (typeof document !== "undefined" && typeof document.elementsFromPoint === "function") {
+        const stacked = document.elementsFromPoint(clientX, clientY);
+        const seen = /* @__PURE__ */ new Set();
+        for (const el of stacked) {
+          const h = findPolyMeshHandle(el);
+          if (h && !seen.has(h)) {
+            seen.add(h);
+            intersections.push({ object: h });
+          }
+        }
+      }
+      let nx = 0;
+      let ny = 0;
+      const camEl = cameraElRef?.current;
+      if (camEl) {
+        const r = camEl.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0) {
+          nx = (clientX - r.left) / r.width * 2 - 1;
+          ny = -((clientY - r.top) / r.height * 2 - 1);
+        }
+      }
+      let delta = 0;
+      const pd = pointerDownAtRef.current;
+      if (pd) delta = Math.hypot(clientX - pd.x, clientY - pd.y);
+      return {
+        object: intersections[0]?.object ?? handle,
+        eventObject: handle,
+        intersections,
+        pointer: { x: nx, y: ny },
+        delta,
+        nativeEvent,
+        stopPropagation: () => nativeEvent.stopPropagation()
+      };
+    },
+    [cameraElRef, handle]
+  );
+  const wrapperHandlers = useMemo7(() => {
+    const dispatch = (polyHandler, reactEvent, nativeEvent, clientX, clientY) => {
+      if (!polyHandler) return;
+      const polyEvent = makeEvent(nativeEvent, clientX, clientY);
+      const originalStop = polyEvent.stopPropagation;
+      polyEvent.stopPropagation = () => {
+        originalStop();
+        reactEvent.stopPropagation();
+      };
+      polyHandler(polyEvent);
+    };
+    const out = {};
+    if (onClick) {
+      out.onClick = (e) => dispatch(onClick, e, e.nativeEvent, e.clientX, e.clientY);
+    }
+    if (onContextMenu) {
+      out.onContextMenu = (e) => dispatch(onContextMenu, e, e.nativeEvent, e.clientX, e.clientY);
+    }
+    if (onDoubleClick) {
+      out.onDoubleClick = (e) => dispatch(onDoubleClick, e, e.nativeEvent, e.clientX, e.clientY);
+    }
+    if (onWheel) {
+      out.onWheel = (e) => dispatch(onWheel, e, e.nativeEvent, e.clientX, e.clientY);
+    }
+    if (onPointerDown) {
+      out.onPointerDown = (e) => {
+        pointerDownAtRef.current = { x: e.clientX, y: e.clientY };
+        dispatch(onPointerDown, e, e.nativeEvent, e.clientX, e.clientY);
+      };
+    } else {
+      out.onPointerDown = (e) => {
+        pointerDownAtRef.current = { x: e.clientX, y: e.clientY };
+      };
+    }
+    if (onPointerUp) {
+      out.onPointerUp = (e) => {
+        dispatch(onPointerUp, e, e.nativeEvent, e.clientX, e.clientY);
+        pointerDownAtRef.current = null;
+      };
+    } else {
+      out.onPointerUp = () => {
+        pointerDownAtRef.current = null;
+      };
+    }
+    if (onPointerMove) {
+      out.onPointerMove = (e) => dispatch(onPointerMove, e, e.nativeEvent, e.clientX, e.clientY);
+    }
+    if (onPointerOver || onPointerEnter) {
+      out.onPointerEnter = (e) => {
+        if (onPointerOver) dispatch(onPointerOver, e, e.nativeEvent, e.clientX, e.clientY);
+        if (onPointerEnter) dispatch(onPointerEnter, e, e.nativeEvent, e.clientX, e.clientY);
+      };
+    }
+    if (onPointerOut || onPointerLeave) {
+      out.onPointerLeave = (e) => {
+        if (onPointerOut) dispatch(onPointerOut, e, e.nativeEvent, e.clientX, e.clientY);
+        if (onPointerLeave) dispatch(onPointerLeave, e, e.nativeEvent, e.clientX, e.clientY);
+      };
+    }
+    if (onPointerCancel) {
+      out.onPointerCancel = (e) => {
+        dispatch(onPointerCancel, e, e.nativeEvent, e.clientX, e.clientY);
+        pointerDownAtRef.current = null;
+      };
+    }
+    return out;
+  }, [
+    makeEvent,
+    onClick,
+    onContextMenu,
+    onDoubleClick,
+    onWheel,
+    onPointerDown,
+    onPointerUp,
+    onPointerMove,
+    onPointerOver,
+    onPointerOut,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerCancel
+  ]);
+  const sceneCtx = usePolySceneContext2();
+  const effectiveTextureLighting = textureLighting ?? sceneCtx?.textureLighting ?? "baked";
+  const effectiveDirectional = effectiveTextureLighting === "dynamic" ? void 0 : sceneCtx?.directionalLight;
+  const effectiveAmbient = effectiveTextureLighting === "dynamic" ? void 0 : sceneCtx?.ambientLight;
+  const sceneDirectionalLight = sceneCtx?.directionalLight;
+  const dynamicLightOverride = useMemo7(() => {
+    if (effectiveTextureLighting !== "dynamic") return null;
+    if (!rotation || rotation[0] === 0 && rotation[1] === 0 && rotation[2] === 0) return null;
+    if (!sceneDirectionalLight) return null;
+    const dir = sceneDirectionalLight.direction;
+    const localDir = inverseRotateVec3(dir, rotation);
+    const len = Math.hypot(localDir[0], localDir[1], localDir[2]) || 1;
+    return {
+      ["--plx"]: (localDir[0] / len).toFixed(4),
+      ["--ply"]: (localDir[1] / len).toFixed(4),
+      ["--plz"]: (localDir[2] / len).toFixed(4)
+    };
+  }, [effectiveTextureLighting, rotation, sceneDirectionalLight]);
+  const wrapperStyle = {
+    transform,
+    ...dynamicLightOverride,
+    ...style
+  };
+  const bakedDirectional = useMemo7(() => {
+    if (!effectiveDirectional) return effectiveDirectional;
+    const rot = bakedRotation ?? [0, 0, 0];
+    if (rot[0] === 0 && rot[1] === 0 && rot[2] === 0) return effectiveDirectional;
+    return {
+      ...effectiveDirectional,
+      direction: inverseRotateVec3(effectiveDirectional.direction, rot)
+    };
+  }, [effectiveDirectional, bakedRotation]);
+  const atlasPlans = useMemo7(
+    () => !children ? polygons.map((p, i) => computeTextureAtlasPlan(p, i, {
+      directionalLight: bakedDirectional,
+      ambientLight: effectiveAmbient
+    })) : [],
+    [children, polygons, bakedDirectional, effectiveAmbient]
+  );
+  const textureAtlas = useTextureAtlas(
+    atlasPlans,
+    effectiveTextureLighting,
+    atlasScale
+  );
+  const renderedPolygons = children ? polygons.map((p, i) => (
+    // Render-prop: caller controls how each polygon renders. We still
+    // wrap in a fragment with key so React reconciliation works.
+    /* @__PURE__ */ jsx5(RenderPropPolygon, { polygon: p, index: i, children }, i)
+  )) : textureAtlas.entries.map((entry, index) => {
+    if (entry) {
+      return /* @__PURE__ */ jsx5(
+        TextureAtlasPoly,
+        {
+          entry,
+          page: textureAtlas.pages[entry.pageIndex],
+          textureLighting: effectiveTextureLighting
+        },
+        entry.index
+      );
+    }
+    const plan = atlasPlans[index];
+    if (!plan || plan.texture) return null;
+    return isSolidTrianglePlan(plan) ? /* @__PURE__ */ jsx5(TextureTrianglePoly, { entry: plan, textureLighting: effectiveTextureLighting }, plan.index) : /* @__PURE__ */ jsx5(TextureBorderShapePoly, { entry: plan }, plan.index);
+  });
+  if (src) {
+    if (fetched.loading && fetched.polygons.length === 0) {
+      return /* @__PURE__ */ jsx5(
+        "div",
+        {
+          ref: wrapperRef,
+          "data-poly-mesh-id": id,
+          className: `polycss-mesh polycss-mesh-loading${className ? ` ${className}` : ""}`,
+          style: wrapperStyle,
+          ...wrapperHandlers,
+          children: fallback ?? null
+        }
+      );
+    }
+    if (fetched.error && fetched.polygons.length === 0) {
+      return /* @__PURE__ */ jsx5(
+        "div",
+        {
+          ref: wrapperRef,
+          "data-poly-mesh-id": id,
+          className: `polycss-mesh polycss-mesh-error${className ? ` ${className}` : ""}`,
+          style: wrapperStyle,
+          ...wrapperHandlers,
+          children: errorFallback ? errorFallback(fetched.error) : null
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: wrapperRef,
+      "data-poly-mesh-id": id,
+      className: `polycss-mesh${className ? ` ${className}` : ""}`,
+      style: wrapperStyle,
+      ...wrapperHandlers,
+      children: renderedPolygons
+    }
+  );
+});
+function RenderPropPolygon({
+  polygon,
+  index,
+  children
+}) {
+  return /* @__PURE__ */ jsx5(Fragment2, { children: children(polygon, index) });
+}
+
+// src/scene/usePolyMaterial.ts
+import { useMemo as useMemo8 } from "react";
+function usePolyMaterial(options) {
+  return useMemo8(
+    () => ({ texture: options.texture, key: options.key }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [options.texture, options.key]
+  );
+}
+
+// src/shapes/Poly.tsx
+import { memo as memo4, useMemo as useMemo9 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function isAxisAlignedRectUVs(uvs) {
+  if (uvs.length !== 4) return null;
+  const us = [...new Set(uvs.map((uv) => uv[0]))].sort((a, b) => a - b);
+  const vs = [...new Set(uvs.map((uv) => uv[1]))].sort((a, b) => a - b);
+  if (us.length !== 2 || vs.length !== 2) return null;
+  const corners = /* @__PURE__ */ new Set([
+    `${us[0]},${vs[0]}`,
+    `${us[0]},${vs[1]}`,
+    `${us[1]},${vs[0]}`,
+    `${us[1]},${vs[1]}`
+  ]);
+  for (const uv of uvs) {
+    if (!corners.has(`${uv[0]},${uv[1]}`)) return null;
+  }
+  return { u0: us[0], u1: us[1], v0: vs[0], v1: vs[1] };
+}
+function MaterialDirectPoly({
+  plan,
+  material,
+  uvRect,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const { u0, u1, v0, v1 } = uvRect;
+  const du = u1 - u0;
+  const dv = v1 - v0;
+  const sourceW = plan.canvasW / du;
+  const sourceH = plan.canvasH / dv;
+  const vMax = Math.max(v0, v1);
+  const offsetX = u0 * sourceW;
+  const offsetY = (1 - vMax) * sourceH;
+  const style = {
+    width: plan.canvasW,
+    height: plan.canvasH,
+    transform: `matrix3d(${plan.matrix})`,
+    backgroundImage: `url(${material.texture})`,
+    backgroundSize: `${sourceW}px ${sourceH}px`,
+    backgroundPosition: `-${offsetX}px -${offsetY}px`,
+    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__ */ jsx6(
+    "i",
+    {
+      className: elementClassName,
+      style,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+}
+function PolyInner({
+  vertices,
+  color,
+  texture,
+  uvs,
+  data,
+  material,
+  position,
+  scale,
+  rotation,
+  className,
+  style: styleProp,
+  id,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onPointerDown,
+  onPointerUp,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  tabIndex,
+  role,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+  pointerEvents: pointerEventsProp,
+  context,
+  textureLighting: textureLightingProp,
+  atlasScale: atlasScaleProp,
+  baseColor: baseColorProp,
+  ...dataAttrs
+}) {
+  const tileSize = context?.tileSize ?? 50;
+  const layerElevation = context?.layerElevation ?? tileSize;
+  const textureLighting = textureLightingProp ?? context?.textureLighting ?? "baked";
+  const atlasScale = atlasScaleProp ?? context?.atlasScale;
+  const polygonColor = baseColorProp ?? color;
+  const effectiveTexture = material?.texture ?? texture;
+  const atlasPlan = useMemo9(
+    () => computeTextureAtlasPlan(
+      { vertices, color: polygonColor, texture: effectiveTexture, uvs, data },
+      0,
+      {
+        tileSize,
+        layerElevation,
+        directionalLight: context?.directionalLight
+      }
+    ),
+    [
+      vertices,
+      polygonColor,
+      effectiveTexture,
+      uvs,
+      data,
+      tileSize,
+      layerElevation,
+      context?.directionalLight
+    ]
+  );
+  const materialUvRect = useMemo9(
+    () => material && uvs ? isAxisAlignedRectUVs(uvs) : null,
+    [material, uvs]
+  );
+  const atlasPlans = useMemo9(
+    () => materialUvRect ? [] : [atlasPlan],
+    [materialUvRect, atlasPlan]
+  );
+  const textureAtlas = useTextureAtlas(atlasPlans, textureLighting, atlasScale);
+  const domEventHandlers = {
+    onClick,
+    onDoubleClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onPointerDown,
+    onPointerUp,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
+    onBlur,
+    onKeyDown
+  };
+  const domAttrs = {
+    id,
+    tabIndex,
+    role,
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
+    ...Object.fromEntries(
+      Object.entries(dataAttrs).filter(([k]) => k.startsWith("data-"))
+    ),
+    ...data ? Object.fromEntries(
+      Object.entries(data).map(([k, v]) => [`data-${k}`, String(v)])
+    ) : {}
+  };
+  const transformParts = [];
+  if (position) {
+    transformParts.push(
+      `translate3d(${position[0]}px, ${position[1]}px, ${position[2]}px)`
+    );
+  }
+  if (scale !== void 0) {
+    if (typeof scale === "number") {
+      if (scale !== 1) transformParts.push(`scale3d(${scale}, ${scale}, ${scale})`);
+    } else {
+      transformParts.push(`scale3d(${scale[0]}, ${scale[1]}, ${scale[2]})`);
+    }
+  }
+  if (rotation) {
+    if (rotation[0]) transformParts.push(`rotateX(${rotation[0]}deg)`);
+    if (rotation[1]) transformParts.push(`rotateY(${rotation[1]}deg)`);
+    if (rotation[2]) transformParts.push(`rotateZ(${rotation[2]}deg)`);
+  }
+  const wrapperTransform = transformParts.length > 0 ? transformParts.join(" ") : void 0;
+  let front = null;
+  if (materialUvRect && material && atlasPlan) {
+    front = /* @__PURE__ */ jsx6(
+      MaterialDirectPoly,
+      {
+        plan: atlasPlan,
+        material,
+        uvRect: materialUvRect,
+        className,
+        style: styleProp,
+        domAttrs,
+        domEventHandlers,
+        pointerEvents: pointerEventsProp ?? "auto"
+      }
+    );
+  } else {
+    const atlasEntry = textureAtlas.entries[0];
+    if (atlasEntry) {
+      front = /* @__PURE__ */ jsx6(
+        TextureAtlasPoly,
+        {
+          entry: atlasEntry,
+          page: textureAtlas.pages[atlasEntry.pageIndex],
+          textureLighting,
+          className,
+          style: styleProp,
+          domAttrs,
+          domEventHandlers,
+          pointerEvents: pointerEventsProp ?? "auto"
+        }
+      );
+    } else if (atlasPlan && !atlasPlan.texture) {
+      front = isSolidTrianglePlan(atlasPlan) ? /* @__PURE__ */ jsx6(
+        TextureTrianglePoly,
+        {
+          entry: atlasPlan,
+          textureLighting,
+          className,
+          style: styleProp,
+          domAttrs,
+          domEventHandlers,
+          pointerEvents: pointerEventsProp ?? "auto"
+        }
+      ) : /* @__PURE__ */ jsx6(
+        TextureBorderShapePoly,
+        {
+          entry: atlasPlan,
+          className,
+          style: styleProp,
+          domAttrs,
+          domEventHandlers,
+          pointerEvents: pointerEventsProp ?? "auto"
+        }
+      );
+    }
+  }
+  if (!front) return null;
+  if (!wrapperTransform) return front;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "polycss-poly-wrapper",
+      style: {
+        position: "absolute",
+        transformStyle: "preserve-3d",
+        transform: wrapperTransform
+      },
+      children: front
+    }
+  );
+}
+var Poly = memo4(PolyInner);
+
+// src/controls/PolyOrbitControls.tsx
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+
+// src/controls/sharedControls.ts
+import { BASE_TILE as BASE_TILE2 } from "@layoutit/polycss-core";
+var POINTER_DRAG_SPEED = 4;
+function invertFactor(invert) {
+  if (invert === true) return -1;
+  if (invert === void 0 || invert === false) return 1;
+  return invert;
+}
+function applyOrbit(dx, dy, s, handle, invert) {
+  const f = invertFactor(invert);
+  const dX = dx / POINTER_DRAG_SPEED * f;
+  const dY = dy / POINTER_DRAG_SPEED * f;
+  const rotX = Math.max(0, Math.min(100, s.rotX - dY));
+  const rotY = ((s.rotY - dX) % 360 + 360) % 360;
+  handle.update({ rotX, rotY });
+}
+function applyPan(dx, dy, s, handle, _invert) {
+  const z = Math.max(0.01, s.zoom);
+  const cosRotXRaw = Math.cos(s.rotX * Math.PI / 180);
+  const cosRotX = cosRotXRaw >= 0 ? Math.max(0.1, cosRotXRaw) : Math.min(-0.1, cosRotXRaw);
+  const cZ = Math.cos(s.rotY * Math.PI / 180);
+  const sZ = Math.sin(s.rotY * Math.PI / 180);
+  const k = z * BASE_TILE2;
+  const targetD0 = (dx * sZ - dy * cZ / cosRotX) / k;
+  const targetD1 = -(dx * cZ + dy * sZ / cosRotX) / k;
+  const t = s.target;
+  handle.update({ target: [t[0] + targetD0, t[1] + targetD1, t[2]] });
+}
+var buildOrbitControls = {
+  applyOrbit,
+  applyPan,
+  invertFactor
+};
+
+// src/controls/controlsEffects.ts
+var WHEEL_IDLE_END_MS = 150;
+var ZOOM_STEP = 513e-6;
+var PINCH_AMP = 10;
+var SCROLL_AMP = 3;
+var ANIM_FRAME_MS = 16.67;
+var ANIM_DT_CLAMP_MS = 50;
+var DEFAULT_ANIMATE_SPEED = 0.3;
+var DOLLY_STEP = 0.05;
+function makeWheelEffect({
+  wheel,
+  dollyRef,
+  wheelRef,
+  zoomMinRef,
+  zoomMaxRef,
+  distanceMinRef,
+  distanceMaxRef,
+  cameraElRef,
+  cameraRef,
+  applyTransformDirect,
+  store,
+  fireStart,
+  fireChange,
+  fireEnd
+}) {
+  if (!wheel) return;
+  const el = cameraElRef.current;
+  if (!el) return;
+  let wheelActive = false;
+  let wheelIdleTimer = null;
+  const onWheel = (e) => {
+    if (!wheelRef.current) return;
+    e.preventDefault();
+    const lineFactor = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 100 : 1;
+    let delta = e.deltaY * lineFactor;
+    if (e.ctrlKey) delta *= PINCH_AMP;
+    else delta *= SCROLL_AMP;
+    const handle = cameraRef.current;
+    if (dollyRef.current) {
+      const nextDist = Math.max(
+        distanceMinRef.current,
+        Math.min(distanceMaxRef.current, handle.state.distance + delta * DOLLY_STEP)
+      );
+      handle.update({ distance: nextDist });
+    } else {
+      const factor = Math.exp(-delta * ZOOM_STEP);
+      const next = Math.max(
+        zoomMinRef.current,
+        Math.min(zoomMaxRef.current, handle.state.zoom * factor)
+      );
+      handle.update({ zoom: next });
+    }
+    applyTransformDirect();
+    store.updateCameraFromRef(handle);
+    if (!wheelActive) {
+      wheelActive = true;
+      fireStart();
+    }
+    fireChange();
+    if (wheelIdleTimer !== null) clearTimeout(wheelIdleTimer);
+    wheelIdleTimer = setTimeout(() => {
+      wheelIdleTimer = null;
+      wheelActive = false;
+      fireEnd();
+    }, WHEEL_IDLE_END_MS);
+  };
+  el.addEventListener("wheel", onWheel, { passive: false });
+  return () => {
+    el.removeEventListener("wheel", onWheel);
+    if (wheelIdleTimer !== null) clearTimeout(wheelIdleTimer);
+  };
+}
+function makeAnimateEffect({
+  animateOn,
+  animateRef,
+  animationPausedShared,
+  applyTransformDirect,
+  cameraRef,
+  store,
+  fireChange
+}) {
+  if (!animateOn) return;
+  let rafId = null;
+  let stopped = false;
+  let lastTime = 0;
+  const tick = (now) => {
+    if (stopped) return;
+    const a = animateRef.current;
+    if (!a) {
+      rafId = requestAnimationFrame(tick);
+      return;
+    }
+    if (!animationPausedShared.value) {
+      const dt = Math.min(ANIM_DT_CLAMP_MS, lastTime ? now - lastTime : ANIM_FRAME_MS);
+      lastTime = now;
+      const speed = a.speed ?? DEFAULT_ANIMATE_SPEED;
+      const delta = speed * (dt / ANIM_FRAME_MS);
+      const handle = cameraRef.current;
+      const s = handle.state;
+      if (a.axis === "x") {
+        const rotX = ((s.rotX + delta) % 360 + 360) % 360;
+        handle.update({ rotX });
+      } else {
+        const rotY = ((s.rotY + delta) % 360 + 360) % 360;
+        handle.update({ rotY });
+      }
+      applyTransformDirect();
+      store.updateCameraFromRef(handle);
+      fireChange();
+    } else {
+      lastTime = now;
+    }
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+  return () => {
+    stopped = true;
+    if (rafId !== null) cancelAnimationFrame(rafId);
+  };
+}
+
+// src/controls/PolyOrbitControls.tsx
+function PolyOrbitControls({
+  drag = true,
+  wheel = true,
+  dolly = false,
+  invert = false,
+  minZoom = 0.1,
+  maxZoom = 10,
+  minDistance = 0,
+  maxDistance = 5e3,
+  animate = false,
+  onChange,
+  onInteractionStart,
+  onInteractionEnd
+}) {
+  const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
+  const dragRef = useRef6(drag);
+  const wheelRef = useRef6(wheel);
+  const dollyRef = useRef6(dolly);
+  const invertRef = useRef6(invert);
+  const zoomMinRef = useRef6(minZoom);
+  const zoomMaxRef = useRef6(maxZoom);
+  const distanceMinRef = useRef6(minDistance);
+  const distanceMaxRef = useRef6(maxDistance);
+  const animateRef = useRef6(animate);
+  const onChangeRef = useRef6(onChange);
+  const onInteractionStartRef = useRef6(onInteractionStart);
+  const onInteractionEndRef = useRef6(onInteractionEnd);
+  useEffect6(() => {
+    dragRef.current = drag;
+    wheelRef.current = wheel;
+    dollyRef.current = dolly;
+    invertRef.current = invert;
+    zoomMinRef.current = minZoom;
+    zoomMaxRef.current = maxZoom;
+    distanceMinRef.current = minDistance;
+    distanceMaxRef.current = maxDistance;
+    animateRef.current = animate;
+    onChangeRef.current = onChange;
+    onInteractionStartRef.current = onInteractionStart;
+    onInteractionEndRef.current = onInteractionEnd;
+  });
+  const cameraSnapshot = () => {
+    const s = cameraRef.current.state;
+    return { rotX: s.rotX, rotY: s.rotY, zoom: s.zoom, target: s.target, distance: s.distance };
+  };
+  const fireChange = () => {
+    const fn = onChangeRef.current;
+    if (!fn) return;
+    try {
+      fn(cameraSnapshot());
+    } catch (err) {
+      console.error("[polycss/react] PolyOrbitControls onChange threw:", err);
+    }
+  };
+  const fireStart = () => {
+    const fn = onInteractionStartRef.current;
+    if (!fn) return;
+    try {
+      fn(cameraSnapshot());
+    } catch (err) {
+      console.error("[polycss/react] PolyOrbitControls onInteractionStart threw:", err);
+    }
+  };
+  const fireEnd = () => {
+    const fn = onInteractionEndRef.current;
+    if (!fn) return;
+    try {
+      fn(cameraSnapshot());
+    } catch (err) {
+      console.error("[polycss/react] PolyOrbitControls onInteractionEnd threw:", err);
+    }
+  };
+  const animationPausedShared = useRef6({ value: false }).current;
+  useEffect6(() => {
+    if (!drag) return;
+    const el = cameraElRef.current;
+    if (!el) return;
+    let activePointerId = null;
+    let pointer = { x: 0, y: 0 };
+    let animationPaused = false;
+    let rightDragActive = false;
+    let rightPointer = { x: 0, y: 0 };
+    const onDown = (e) => {
+      if (!dragRef.current) return;
+      if (activePointerId !== null) return;
+      if (e.isPrimary === false) return;
+      e.preventDefault();
+      activePointerId = e.pointerId;
+      pointer = { x: e.clientX, y: e.clientY };
+      el.style.cursor = "grabbing";
+      try {
+        e.target.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const a = animateRef.current;
+      if (a && a.pauseOnInteraction !== false) {
+        animationPaused = true;
+        animationPausedShared.value = true;
+      }
+      fireStart();
+    };
+    const onMove = (e) => {
+      if (activePointerId === null || e.pointerId !== activePointerId) return;
+      if (!dragRef.current) return;
+      e.preventDefault();
+      const dx = e.clientX - pointer.x;
+      const dy = e.clientY - pointer.y;
+      pointer = { x: e.clientX, y: e.clientY };
+      const handle = cameraRef.current;
+      if (e.shiftKey) {
+        buildOrbitControls.applyPan(dx, dy, handle.state, handle, invertRef.current);
+      } else {
+        buildOrbitControls.applyOrbit(dx, dy, handle.state, handle, invertRef.current);
+      }
+      applyTransformDirect();
+      store.updateCameraFromRef(handle);
+      fireChange();
+    };
+    const onUp = (e) => {
+      if (activePointerId !== e.pointerId) return;
+      activePointerId = null;
+      el.style.cursor = dragRef.current ? "grab" : "";
+      try {
+        e.target.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (animationPaused) {
+        animationPaused = false;
+        animationPausedShared.value = false;
+      }
+      fireEnd();
+    };
+    const onContextMenu = (e) => {
+      e.preventDefault();
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 2) return;
+      rightDragActive = true;
+      rightPointer = { x: e.clientX, y: e.clientY };
+    };
+    const onMouseMove = (e) => {
+      if (!rightDragActive || !dragRef.current) return;
+      const dx = e.clientX - rightPointer.x;
+      const dy = e.clientY - rightPointer.y;
+      rightPointer = { x: e.clientX, y: e.clientY };
+      const handle = cameraRef.current;
+      buildOrbitControls.applyPan(dx, dy, handle.state, handle, invertRef.current);
+      applyTransformDirect();
+      store.updateCameraFromRef(handle);
+      fireChange();
+    };
+    const onMouseUp = (e) => {
+      if (e.button !== 2) return;
+      if (rightDragActive) {
+        rightDragActive = false;
+        fireEnd();
+      }
+    };
+    el.style.cursor = "grab";
+    el.style.touchAction = "none";
+    el.style.userSelect = "none";
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointercancel", onUp);
+    el.addEventListener("contextmenu", onContextMenu);
+    el.addEventListener("mousedown", onMouseDown);
+    el.addEventListener("mousemove", onMouseMove);
+    el.addEventListener("mouseup", onMouseUp);
+    return () => {
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointercancel", onUp);
+      el.removeEventListener("contextmenu", onContextMenu);
+      el.removeEventListener("mousedown", onMouseDown);
+      el.removeEventListener("mousemove", onMouseMove);
+      el.removeEventListener("mouseup", onMouseUp);
+      el.style.cursor = "";
+      el.style.touchAction = "";
+      el.style.userSelect = "";
+    };
+  }, [drag, applyTransformDirect, cameraElRef, cameraRef, store]);
+  useEffect6(
+    () => makeWheelEffect({ wheel, dollyRef, wheelRef, zoomMinRef, zoomMaxRef, distanceMinRef, distanceMaxRef, cameraElRef, cameraRef, applyTransformDirect, store, fireStart, fireChange, fireEnd }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [wheel, applyTransformDirect, cameraElRef, cameraRef, store]
+  );
+  useEffect6(
+    () => makeAnimateEffect({ animateOn: !!animate, animateRef, animationPausedShared, applyTransformDirect, cameraRef, store, fireChange }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!animate, animationPausedShared, applyTransformDirect, cameraRef, store]
+  );
+  return null;
+}
+
+// src/controls/PolyMapControls.tsx
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
+function PolyMapControls({
+  drag = true,
+  wheel = true,
+  dolly = false,
+  invert = false,
+  minZoom = 0.1,
+  maxZoom = 10,
+  minDistance = 0,
+  maxDistance = 5e3,
+  animate = false,
+  onChange,
+  onInteractionStart,
+  onInteractionEnd
+}) {
+  const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
+  const dragRef = useRef7(drag);
+  const wheelRef = useRef7(wheel);
+  const dollyRef = useRef7(dolly);
+  const invertRef = useRef7(invert);
+  const zoomMinRef = useRef7(minZoom);
+  const zoomMaxRef = useRef7(maxZoom);
+  const distanceMinRef = useRef7(minDistance);
+  const distanceMaxRef = useRef7(maxDistance);
+  const animateRef = useRef7(animate);
+  const onChangeRef = useRef7(onChange);
+  const onInteractionStartRef = useRef7(onInteractionStart);
+  const onInteractionEndRef = useRef7(onInteractionEnd);
+  useEffect7(() => {
+    dragRef.current = drag;
+    wheelRef.current = wheel;
+    dollyRef.current = dolly;
+    invertRef.current = invert;
+    zoomMinRef.current = minZoom;
+    zoomMaxRef.current = maxZoom;
+    distanceMinRef.current = minDistance;
+    distanceMaxRef.current = maxDistance;
+    animateRef.current = animate;
+    onChangeRef.current = onChange;
+    onInteractionStartRef.current = onInteractionStart;
+    onInteractionEndRef.current = onInteractionEnd;
+  });
+  const cameraSnapshot = () => {
+    const s = cameraRef.current.state;
+    return { rotX: s.rotX, rotY: s.rotY, zoom: s.zoom, target: s.target, distance: s.distance };
+  };
+  const fireChange = () => {
+    const fn = onChangeRef.current;
+    if (!fn) return;
+    try {
+      fn(cameraSnapshot());
+    } catch (err) {
+      console.error("[polycss/react] PolyMapControls onChange threw:", err);
+    }
+  };
+  const fireStart = () => {
+    const fn = onInteractionStartRef.current;
+    if (!fn) return;
+    try {
+      fn(cameraSnapshot());
+    } catch (err) {
+      console.error("[polycss/react] PolyMapControls onInteractionStart threw:", err);
+    }
+  };
+  const fireEnd = () => {
+    const fn = onInteractionEndRef.current;
+    if (!fn) return;
+    try {
+      fn(cameraSnapshot());
+    } catch (err) {
+      console.error("[polycss/react] PolyMapControls onInteractionEnd threw:", err);
+    }
+  };
+  const animationPausedShared = useRef7({ value: false }).current;
+  useEffect7(() => {
+    if (!drag) return;
+    const el = cameraElRef.current;
+    if (!el) return;
+    let activePointerId = null;
+    let pointer = { x: 0, y: 0 };
+    let animationPaused = false;
+    let rightDragActive = false;
+    let rightPointer = { x: 0, y: 0 };
+    const onDown = (e) => {
+      if (!dragRef.current) return;
+      if (activePointerId !== null) return;
+      if (e.isPrimary === false) return;
+      e.preventDefault();
+      activePointerId = e.pointerId;
+      pointer = { x: e.clientX, y: e.clientY };
+      el.style.cursor = "grabbing";
+      try {
+        e.target.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const a = animateRef.current;
+      if (a && a.pauseOnInteraction !== false) {
+        animationPaused = true;
+        animationPausedShared.value = true;
+      }
+      fireStart();
+    };
+    const onMove = (e) => {
+      if (activePointerId === null || e.pointerId !== activePointerId) return;
+      if (!dragRef.current) return;
+      e.preventDefault();
+      const dx = e.clientX - pointer.x;
+      const dy = e.clientY - pointer.y;
+      pointer = { x: e.clientX, y: e.clientY };
+      const handle = cameraRef.current;
+      if (e.shiftKey) {
+        buildOrbitControls.applyOrbit(dx, dy, handle.state, handle, invertRef.current);
+      } else {
+        buildOrbitControls.applyPan(dx, dy, handle.state, handle, invertRef.current);
+      }
+      applyTransformDirect();
+      store.updateCameraFromRef(handle);
+      fireChange();
+    };
+    const onUp = (e) => {
+      if (activePointerId !== e.pointerId) return;
+      activePointerId = null;
+      el.style.cursor = dragRef.current ? "grab" : "";
+      try {
+        e.target.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (animationPaused) {
+        animationPaused = false;
+        animationPausedShared.value = false;
+      }
+      fireEnd();
+    };
+    const onContextMenu = (e) => {
+      e.preventDefault();
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 2) return;
+      rightDragActive = true;
+      rightPointer = { x: e.clientX, y: e.clientY };
+    };
+    const onMouseMove = (e) => {
+      if (!rightDragActive || !dragRef.current) return;
+      const dx = e.clientX - rightPointer.x;
+      const dy = e.clientY - rightPointer.y;
+      rightPointer = { x: e.clientX, y: e.clientY };
+      const handle = cameraRef.current;
+      buildOrbitControls.applyOrbit(dx, dy, handle.state, handle, invertRef.current);
+      applyTransformDirect();
+      store.updateCameraFromRef(handle);
+      fireChange();
+    };
+    const onMouseUp = (e) => {
+      if (e.button !== 2) return;
+      if (rightDragActive) {
+        rightDragActive = false;
+        fireEnd();
+      }
+    };
+    el.style.cursor = "grab";
+    el.style.touchAction = "none";
+    el.style.userSelect = "none";
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointercancel", onUp);
+    el.addEventListener("contextmenu", onContextMenu);
+    el.addEventListener("mousedown", onMouseDown);
+    el.addEventListener("mousemove", onMouseMove);
+    el.addEventListener("mouseup", onMouseUp);
+    return () => {
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointercancel", onUp);
+      el.removeEventListener("contextmenu", onContextMenu);
+      el.removeEventListener("mousedown", onMouseDown);
+      el.removeEventListener("mousemove", onMouseMove);
+      el.removeEventListener("mouseup", onMouseUp);
+      el.style.cursor = "";
+      el.style.touchAction = "";
+      el.style.userSelect = "";
+    };
+  }, [drag, applyTransformDirect, cameraElRef, cameraRef, store]);
+  useEffect7(
+    () => makeWheelEffect({ wheel, dollyRef, wheelRef, zoomMinRef, zoomMaxRef, distanceMinRef, distanceMaxRef, cameraElRef, cameraRef, applyTransformDirect, store, fireStart, fireChange, fireEnd }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [wheel, applyTransformDirect, cameraElRef, cameraRef, store]
+  );
+  useEffect7(
+    () => makeAnimateEffect({ animateOn: !!animate, animateRef, animationPausedShared, applyTransformDirect, cameraRef, store, fireChange }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!animate, animationPausedShared, applyTransformDirect, cameraRef, store]
+  );
+  return null;
+}
+
+// src/controls/TransformControls.tsx
+import {
+  useCallback as useCallback7,
+  useContext as useContext4,
+  useEffect as useEffect8,
+  useMemo as useMemo10,
+  useRef as useRef8,
+  useState as useState4
+} from "react";
+import { arrowPolygons, ringPolygons } from "@layoutit/polycss-core";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var COLOR_X = "#ff3653";
+var COLOR_Y = "#8adb00";
+var COLOR_Z = "#2c8fff";
+var ALPHA_IDLE = 0.6;
+var ALPHA_HOVER = 0.8;
+var ALPHA_DRAGGING = 1;
+function withAlpha(hex, alpha) {
+  const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!m) return hex;
+  const r = parseInt(m[1], 16);
+  const g = parseInt(m[2], 16);
+  const b = parseInt(m[3], 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+var SCENE_TILE_SIZE = 50;
+var FALLBACK_SHAFT_LENGTH = 60;
+var SHAFT_LENGTH_RATIO = 0.6;
+var SHAFT_HALF_THICKNESS_RATIO = 0.0125;
+var HEAD_LENGTH_RATIO = 0.15;
+var HEAD_HALF_THICKNESS_RATIO = 0.04;
+var RING_RADIUS_RATIO = 1;
+var RING_HALF_THICKNESS_RATIO = 0.012;
+var RING_SEGMENTS = 64;
+var SCREEN_AXIS_DEAD_ZONE_SQ = 1e-4;
+function gizmoLengthForMesh(polygons) {
+  if (polygons.length === 0) return FALLBACK_SHAFT_LENGTH;
+  let minX = Infinity, minY = Infinity, minZ = Infinity;
+  let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+  for (const poly of polygons) {
+    for (const v of poly.vertices) {
+      if (v[0] < minX) minX = v[0];
+      if (v[0] > maxX) maxX = v[0];
+      if (v[1] < minY) minY = v[1];
+      if (v[1] > maxY) maxY = v[1];
+      if (v[2] < minZ) minZ = v[2];
+      if (v[2] > maxZ) maxZ = v[2];
+    }
+  }
+  if (!Number.isFinite(minX)) return FALLBACK_SHAFT_LENGTH;
+  const extent = Math.max(maxX - minX, maxY - minY, maxZ - minZ);
+  return extent * SCENE_TILE_SIZE * SHAFT_LENGTH_RATIO;
+}
+function gizmoCenterForMesh(polygons) {
+  if (polygons.length === 0) return [0, 0, 0];
+  let minX = Infinity, minY = Infinity, minZ = Infinity;
+  let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+  for (const poly of polygons) {
+    for (const v of poly.vertices) {
+      if (v[0] < minX) minX = v[0];
+      if (v[0] > maxX) maxX = v[0];
+      if (v[1] < minY) minY = v[1];
+      if (v[1] > maxY) maxY = v[1];
+      if (v[2] < minZ) minZ = v[2];
+      if (v[2] > maxZ) maxZ = v[2];
+    }
+  }
+  if (!Number.isFinite(minX)) return [0, 0, 0];
+  return [
+    (minY + maxY) / 2 * SCENE_TILE_SIZE,
+    (minX + maxX) / 2 * SCENE_TILE_SIZE,
+    (minZ + maxZ) / 2 * SCENE_TILE_SIZE
+  ];
+}
+function resolveObject(o) {
+  if (o == null) return null;
+  if (typeof o === "object" && "current" in o) return o.current ?? null;
+  return o;
+}
+function snap(value, step) {
+  if (!step || step <= 0) return value;
+  return Math.round(value / step) * step;
+}
+var WORLD_AXIS_FOR_CSS = { 0: 1, 1: 0, 2: 2 };
+var ARROW_SPECS = [
+  { cssAxis: 0, sign: 1, key: "x", color: COLOR_X },
+  { cssAxis: 0, sign: -1, key: "-x", color: COLOR_X },
+  { cssAxis: 1, sign: 1, key: "y", color: COLOR_Y },
+  { cssAxis: 1, sign: -1, key: "-y", color: COLOR_Y },
+  { cssAxis: 2, sign: 1, key: "z", color: COLOR_Z },
+  { cssAxis: 2, sign: -1, key: "-z", color: COLOR_Z }
+];
+var RING_SPECS = [
+  { cssAxis: 0, key: "x", color: COLOR_X },
+  { cssAxis: 1, key: "y", color: COLOR_Y },
+  { cssAxis: 2, key: "z", color: COLOR_Z }
+];
+function userAxisLetterOf(key) {
+  const last = key.replace("-", "")[0];
+  return last;
+}
+function startAxisDrag(opts) {
+  const {
+    cssAxis,
+    sign,
+    shaftLengthCss,
+    wrapper,
+    target,
+    startClientX,
+    startClientY,
+    translationSnap,
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged
+  } = opts;
+  const probeDistance = shaftLengthCss;
+  const axisVec = [0, 0, 0];
+  axisVec[cssAxis] = sign;
+  const probe = document.createElement("div");
+  probe.style.position = "absolute";
+  probe.style.left = "0";
+  probe.style.top = "0";
+  probe.style.width = "0";
+  probe.style.height = "0";
+  probe.style.transform = `translate3d(${axisVec[0] * probeDistance}px, ${axisVec[1] * probeDistance}px, ${axisVec[2] * probeDistance}px)`;
+  wrapper.appendChild(probe);
+  const wRect = wrapper.getBoundingClientRect();
+  const pRect = probe.getBoundingClientRect();
+  wrapper.removeChild(probe);
+  const screenAxisX = (pRect.left - wRect.left) / probeDistance;
+  const screenAxisY = (pRect.top - wRect.top) / probeDistance;
+  const screenAxisLenSq = screenAxisX * screenAxisX + screenAxisY * screenAxisY;
+  if (screenAxisLenSq < SCREEN_AXIS_DEAD_ZONE_SQ) return;
+  const startPos = target.getPosition() ?? [0, 0, 0];
+  onMouseDown?.();
+  onDraggingChanged?.(true);
+  const handleMove = (ev) => {
+    const dx = ev.clientX - startClientX;
+    const dy = ev.clientY - startClientY;
+    let t = (dx * screenAxisX + dy * screenAxisY) / screenAxisLenSq;
+    t = snap(t, translationSnap);
+    const newPos = [
+      startPos[0] + t * axisVec[0],
+      startPos[1] + t * axisVec[1],
+      startPos[2] + t * axisVec[2]
+    ];
+    onObjectChange?.({ object: target, position: newPos });
+    onChange?.();
+  };
+  const handleUp = () => {
+    window.removeEventListener("pointermove", handleMove);
+    window.removeEventListener("pointerup", handleUp);
+    window.removeEventListener("pointercancel", handleUp);
+    const swallow = (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener("click", swallow, true), 0);
+    onMouseUp?.();
+    onDraggingChanged?.(false);
+  };
+  window.addEventListener("pointermove", handleMove);
+  window.addEventListener("pointerup", handleUp);
+  window.addEventListener("pointercancel", handleUp);
+}
+function startRingDrag(opts) {
+  const {
+    cssAxis,
+    wrapper,
+    target,
+    startClientX,
+    startClientY,
+    rotationSnap,
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged
+  } = opts;
+  const wRect = wrapper.getBoundingClientRect();
+  const centerX = wRect.left;
+  const centerY = wRect.top;
+  let lastAngle = Math.atan2(startClientY - centerY, startClientX - centerX);
+  let cumulative = 0;
+  const startRotation = target.getRotation() ?? [0, 0, 0];
+  onMouseDown?.();
+  onDraggingChanged?.(true);
+  const handleMove = (ev) => {
+    const a = Math.atan2(ev.clientY - centerY, ev.clientX - centerX);
+    let d = a - lastAngle;
+    if (d > Math.PI) d -= 2 * Math.PI;
+    else if (d < -Math.PI) d += 2 * Math.PI;
+    cumulative += d;
+    lastAngle = a;
+    let degrees = cumulative * 180 / Math.PI;
+    degrees = snap(degrees, rotationSnap);
+    const newRotation = [
+      startRotation[0],
+      startRotation[1],
+      startRotation[2]
+    ];
+    newRotation[cssAxis] = startRotation[cssAxis] + degrees;
+    onObjectChange?.({ object: target, rotation: newRotation });
+    onChange?.();
+  };
+  const handleUp = () => {
+    window.removeEventListener("pointermove", handleMove);
+    window.removeEventListener("pointerup", handleUp);
+    window.removeEventListener("pointercancel", handleUp);
+    const swallow = (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener("click", swallow, true), 0);
+    onMouseUp?.();
+    onDraggingChanged?.(false);
+    target.rebakeAtlas();
+  };
+  window.addEventListener("pointermove", handleMove);
+  window.addEventListener("pointerup", handleUp);
+  window.addEventListener("pointercancel", handleUp);
+}
+function PolyTransformControls({
+  object,
+  mode = "translate",
+  space = "world",
+  size = 1,
+  showX = true,
+  showY = true,
+  showZ = true,
+  translationSnap = null,
+  rotationSnap = null,
+  enabled = true,
+  onChange,
+  onObjectChange,
+  onMouseDown,
+  onMouseUp,
+  onDraggingChanged
+}) {
+  const [, forceRender] = useState4(0);
+  useEffect8(() => {
+    forceRender((n) => n + 1);
+  }, [object]);
+  const [hoveredKey, setHoveredKey] = useState4(null);
+  const [draggingKey, setDraggingKey] = useState4(null);
+  const cameraCtx = useContext4(PolyCameraContext);
+  const cameraElRef = cameraCtx?.cameraElRef;
+  const dragRef = useRef8({
+    target: null,
+    mode: "translate",
+    shaftLengthCss: 0,
+    enabled: true,
+    show: { x: true, y: true, z: true },
+    translationSnap: null,
+    rotationSnap: null
+  });
+  useEffect8(() => {
+    const cameraEl = cameraElRef?.current;
+    if (!cameraEl) return;
+    const onPointerDown = (event) => {
+      const state = dragRef.current;
+      if (!state.target || !state.enabled) return;
+      const targetEl = event.target;
+      if (targetEl?.closest(".polycss-transform-gizmo")) return;
+      if (state.mode === "translate") {
+        for (const spec of ARROW_SPECS) {
+          if (!state.show[userAxisLetterOf(spec.key)]) continue;
+          const arrowEl = document.querySelector(
+            `.polycss-transform-arrow--${spec.key}`
+          );
+          if (!arrowEl) continue;
+          if (!pointInMeshElement(arrowEl, event.clientX, event.clientY)) continue;
+          event.preventDefault();
+          event.stopPropagation();
+          const wrapper = arrowEl.closest(
+            "[data-poly-transform-controls]"
+          );
+          if (!wrapper) return;
+          setDraggingKey(spec.key);
+          startAxisDrag({
+            cssAxis: spec.cssAxis,
+            sign: spec.sign,
+            shaftLengthCss: state.shaftLengthCss,
+            wrapper,
+            target: state.target,
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            translationSnap: state.translationSnap,
+            onChange: state.onChange,
+            onObjectChange: state.onObjectChange,
+            onMouseDown: state.onMouseDown,
+            onMouseUp: state.onMouseUp,
+            onDraggingChanged: (d) => {
+              if (!d) setDraggingKey(null);
+              state.onDraggingChanged?.(d);
+            }
+          });
+          return;
+        }
+      } else if (state.mode === "rotate") {
+        for (const spec of RING_SPECS) {
+          if (!state.show[spec.key]) continue;
+          const ringEl = document.querySelector(
+            `.polycss-transform-ring--${spec.key}`
+          );
+          if (!ringEl) continue;
+          if (!pointInMeshElement(ringEl, event.clientX, event.clientY)) continue;
+          event.preventDefault();
+          event.stopPropagation();
+          const wrapper = ringEl.closest(
+            "[data-poly-transform-controls]"
+          );
+          if (!wrapper) return;
+          setDraggingKey(spec.key);
+          startRingDrag({
+            cssAxis: spec.cssAxis,
+            wrapper,
+            target: state.target,
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            rotationSnap: state.rotationSnap,
+            onChange: state.onChange,
+            onObjectChange: state.onObjectChange,
+            onMouseDown: state.onMouseDown,
+            onMouseUp: state.onMouseUp,
+            onDraggingChanged: (d) => {
+              if (!d) setDraggingKey(null);
+              state.onDraggingChanged?.(d);
+            }
+          });
+          return;
+        }
+      }
+    };
+    cameraEl.addEventListener("pointerdown", onPointerDown);
+    return () => cameraEl.removeEventListener("pointerdown", onPointerDown);
+  }, [cameraElRef]);
+  const target = resolveObject(object);
+  if (!target) return null;
+  const position = target.getPosition() ?? [0, 0, 0];
+  const polygons = target.getPolygons();
+  const bboxCenter = gizmoCenterForMesh(polygons);
+  const wrapperPos = [
+    position[0] + bboxCenter[0],
+    position[1] + bboxCenter[1],
+    position[2] + bboxCenter[2]
+  ];
+  const baseLength = gizmoLengthForMesh(polygons);
+  const shaftLengthCss = baseLength * size;
+  dragRef.current = {
+    target,
+    mode,
+    shaftLengthCss,
+    enabled,
+    show: { x: showX, y: showY, z: showZ },
+    translationSnap,
+    rotationSnap,
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged
+  };
+  const wrapperStyle = {
+    position: "absolute",
+    transformStyle: "preserve-3d",
+    transform: `translate3d(${wrapperPos[0]}px, ${wrapperPos[1]}px, ${wrapperPos[2]}px)`,
+    // No `pointer-events: none` here — that property is inherited, so
+    // setting it on the wrapper would cascade to every arrow polygon
+    // and disable native hit-testing on the gizmo entirely. The
+    // wrapper is a 0×0 anchor so it has no surface to be hit on its
+    // own; descendants opt in via the default `auto`.
+    zIndex: 1e3
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "polycss-transform-controls",
+      "data-poly-transform-controls": true,
+      "data-poly-mode": mode,
+      "data-poly-space": space,
+      style: wrapperStyle,
+      children: [
+        mode === "translate" && ARROW_SPECS.map((spec) => {
+          const show = { x: showX, y: showY, z: showZ }[userAxisLetterOf(spec.key)];
+          if (!show) return null;
+          const hovered = hoveredKey === spec.key;
+          const dragging = draggingKey === spec.key;
+          const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
+          return /* @__PURE__ */ jsx7(
+            TranslateArrow,
+            {
+              cssAxis: spec.cssAxis,
+              sign: spec.sign,
+              axisKey: spec.key,
+              color: withAlpha(spec.color, alpha),
+              shaftLengthCss,
+              target,
+              enabled,
+              translationSnap,
+              onChange,
+              onObjectChange,
+              onMouseDown,
+              onMouseUp,
+              onDraggingChanged,
+              onHoverChange: (h) => setHoveredKey(h ? spec.key : (cur) => cur === spec.key ? null : cur),
+              onDraggingStart: () => setDraggingKey(spec.key),
+              onDraggingStop: () => setDraggingKey((cur) => cur === spec.key ? null : cur)
+            },
+            spec.key
+          );
+        }),
+        mode === "rotate" && RING_SPECS.map((spec) => {
+          const show = { x: showX, y: showY, z: showZ }[spec.key];
+          if (!show) return null;
+          const hovered = hoveredKey === spec.key;
+          const dragging = draggingKey === spec.key;
+          const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
+          return /* @__PURE__ */ jsx7(
+            RotateRing,
+            {
+              cssAxis: spec.cssAxis,
+              axisKey: spec.key,
+              color: withAlpha(spec.color, alpha),
+              radiusCss: shaftLengthCss * RING_RADIUS_RATIO,
+              target,
+              enabled,
+              rotationSnap,
+              onChange,
+              onObjectChange,
+              onMouseDown,
+              onMouseUp,
+              onDraggingChanged,
+              onHoverChange: (h) => setHoveredKey(h ? spec.key : (cur) => cur === spec.key ? null : cur),
+              onDraggingStart: () => setDraggingKey(spec.key),
+              onDraggingStop: () => setDraggingKey((cur) => cur === spec.key ? null : cur)
+            },
+            spec.key
+          );
+        })
+      ]
+    }
+  );
+}
+function TranslateArrow({
+  cssAxis,
+  sign,
+  axisKey,
+  color,
+  shaftLengthCss,
+  target,
+  enabled,
+  translationSnap,
+  onChange,
+  onObjectChange,
+  onMouseDown,
+  onMouseUp,
+  onDraggingChanged,
+  onHoverChange,
+  onDraggingStart,
+  onDraggingStop
+}) {
+  const cbRef = useRef8({
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged,
+    onDraggingStart,
+    onDraggingStop,
+    enabled,
+    translationSnap
+  });
+  cbRef.current = {
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged,
+    onDraggingStart,
+    onDraggingStop,
+    enabled,
+    translationSnap
+  };
+  const polygons = useMemo10(() => {
+    const lengthWorld = shaftLengthCss / SCENE_TILE_SIZE;
+    return arrowPolygons({
+      axis: WORLD_AXIS_FOR_CSS[cssAxis],
+      sign,
+      shaftLength: lengthWorld,
+      shaftHalfThickness: lengthWorld * SHAFT_HALF_THICKNESS_RATIO,
+      headLength: lengthWorld * HEAD_LENGTH_RATIO,
+      headHalfThickness: lengthWorld * HEAD_HALF_THICKNESS_RATIO,
+      color
+    });
+  }, [cssAxis, sign, color, shaftLengthCss]);
+  const onPointerDown = useCallback7(
+    (e) => {
+      if (!cbRef.current.enabled) return;
+      e.stopPropagation();
+      const meshEl = e.eventObject.element;
+      const wrapper = meshEl?.closest("[data-poly-transform-controls]");
+      if (!wrapper) return;
+      cbRef.current.onDraggingStart?.();
+      startAxisDrag({
+        cssAxis,
+        sign,
+        shaftLengthCss,
+        wrapper,
+        target,
+        startClientX: e.nativeEvent.clientX,
+        startClientY: e.nativeEvent.clientY,
+        translationSnap: cbRef.current.translationSnap,
+        onChange: cbRef.current.onChange,
+        onObjectChange: cbRef.current.onObjectChange,
+        onMouseDown: cbRef.current.onMouseDown,
+        onMouseUp: cbRef.current.onMouseUp,
+        onDraggingChanged: (d) => {
+          if (!d) cbRef.current.onDraggingStop?.();
+          cbRef.current.onDraggingChanged?.(d);
+        }
+      });
+    },
+    [cssAxis, sign, target, shaftLengthCss]
+  );
+  return /* @__PURE__ */ jsx7(
+    PolyMesh,
+    {
+      polygons,
+      onPointerDown,
+      onPointerOver: () => onHoverChange?.(true),
+      onPointerOut: () => onHoverChange?.(false),
+      className: `polycss-transform-gizmo polycss-transform-arrow polycss-transform-arrow--${axisKey}`,
+      textureLighting: "baked"
+    }
+  );
+}
+function RotateRing({
+  cssAxis,
+  axisKey,
+  color,
+  radiusCss,
+  target,
+  enabled,
+  rotationSnap,
+  onChange,
+  onObjectChange,
+  onMouseDown,
+  onMouseUp,
+  onDraggingChanged,
+  onHoverChange,
+  onDraggingStart,
+  onDraggingStop
+}) {
+  const cbRef = useRef8({
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged,
+    onDraggingStart,
+    onDraggingStop,
+    enabled,
+    rotationSnap
+  });
+  cbRef.current = {
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged,
+    onDraggingStart,
+    onDraggingStop,
+    enabled,
+    rotationSnap
+  };
+  const polygons = useMemo10(() => {
+    const radiusWorld = radiusCss / SCENE_TILE_SIZE;
+    return ringPolygons({
+      axis: WORLD_AXIS_FOR_CSS[cssAxis],
+      radius: radiusWorld,
+      halfThickness: radiusWorld * RING_HALF_THICKNESS_RATIO,
+      segments: RING_SEGMENTS,
+      color
+    });
+  }, [cssAxis, color, radiusCss]);
+  const onPointerDown = useCallback7(
+    (e) => {
+      if (!cbRef.current.enabled) return;
+      e.stopPropagation();
+      const meshEl = e.eventObject.element;
+      const wrapper = meshEl?.closest("[data-poly-transform-controls]");
+      if (!wrapper) return;
+      cbRef.current.onDraggingStart?.();
+      startRingDrag({
+        cssAxis,
+        wrapper,
+        target,
+        startClientX: e.nativeEvent.clientX,
+        startClientY: e.nativeEvent.clientY,
+        rotationSnap: cbRef.current.rotationSnap,
+        onChange: cbRef.current.onChange,
+        onObjectChange: cbRef.current.onObjectChange,
+        onMouseDown: cbRef.current.onMouseDown,
+        onMouseUp: cbRef.current.onMouseUp,
+        onDraggingChanged: (d) => {
+          if (!d) cbRef.current.onDraggingStop?.();
+          cbRef.current.onDraggingChanged?.(d);
+        }
+      });
+    },
+    [cssAxis, target]
+  );
+  return /* @__PURE__ */ jsx7(
+    PolyMesh,
+    {
+      polygons,
+      onPointerDown,
+      onPointerOver: () => onHoverChange?.(true),
+      onPointerOut: () => onHoverChange?.(false),
+      className: `polycss-transform-gizmo polycss-transform-ring polycss-transform-ring--${axisKey}`,
+      textureLighting: "baked"
+    }
+  );
+}
+
+// src/select/Select.tsx
+import {
+  createContext as createContext3,
+  useCallback as useCallback8,
+  useContext as useContext5,
+  useEffect as useEffect9,
+  useMemo as useMemo11,
+  useRef as useRef9,
+  useState as useState5
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SelectContext = createContext3(null);
+function PolySelect({
+  multiple = false,
+  filter,
+  onChange,
+  onPointerMissed,
+  clearOnMiss = true,
+  children,
+  className,
+  style
+}) {
+  const [selected, setSelectedState] = useState5([]);
+  const filterRef = useRef9(filter);
+  filterRef.current = filter;
+  const onChangeRef = useRef9(onChange);
+  onChangeRef.current = onChange;
+  const multipleRef = useRef9(multiple);
+  multipleRef.current = multiple;
+  const apply = useCallback8((next) => {
+    const filtered = filterRef.current ? filterRef.current(next) : next;
+    setSelectedState(filtered);
+    if (onChangeRef.current) onChangeRef.current(filtered);
+  }, []);
+  const api = useMemo11(() => {
+    return {
+      selected,
+      set: (next) => apply(next),
+      add: (h) => {
+        setSelectedState((prev) => {
+          const next = multipleRef.current ? prev.includes(h) ? prev : [...prev, h] : [h];
+          const filtered = filterRef.current ? filterRef.current(next) : next;
+          if (onChangeRef.current) onChangeRef.current(filtered);
+          return filtered;
+        });
+      },
+      remove: (h) => {
+        setSelectedState((prev) => {
+          if (!prev.includes(h)) return prev;
+          const next = prev.filter((x) => x !== h);
+          const filtered = filterRef.current ? filterRef.current(next) : next;
+          if (onChangeRef.current) onChangeRef.current(filtered);
+          return filtered;
+        });
+      },
+      toggle: (h) => {
+        setSelectedState((prev) => {
+          const next = prev.includes(h) ? prev.filter((x) => x !== h) : multipleRef.current ? [...prev, h] : [h];
+          const filtered = filterRef.current ? filterRef.current(next) : next;
+          if (onChangeRef.current) onChangeRef.current(filtered);
+          return filtered;
+        });
+      },
+      clear: () => apply([]),
+      has: (h) => selected.includes(h)
+    };
+  }, [selected, apply]);
+  const wrapperRef = useRef9(null);
+  const cameraCtx = useContext5(PolyCameraContext);
+  const cameraElRef = cameraCtx?.cameraElRef;
+  const clearOnMissRef = useRef9(clearOnMiss);
+  clearOnMissRef.current = clearOnMiss;
+  const onPointerMissedRef = useRef9(onPointerMissed);
+  onPointerMissedRef.current = onPointerMissed;
+  const findMeshUnderPoint2 = useCallback8(
+    (clientX, clientY) => findMeshUnderPoint(
+      clientX,
+      clientY,
+      (meshEl) => !meshEl.closest("[data-poly-transform-controls]")
+    ),
+    []
+  );
+  useEffect9(() => {
+    const cameraEl = cameraElRef?.current;
+    if (!cameraEl) return;
+    const onClick = (event) => {
+      const target = event.target;
+      if (target?.closest?.("[data-poly-transform-controls]")) return;
+      const handle = findPolyMeshHandle(event.target) ?? findMeshUnderPoint2(event.clientX, event.clientY);
+      if (!handle) {
+        if (onPointerMissedRef.current) onPointerMissedRef.current(event);
+        if (clearOnMissRef.current) apply([]);
+        return;
+      }
+      const additive = multipleRef.current && (event.shiftKey || event.metaKey || event.ctrlKey);
+      setSelectedState((prev) => {
+        let next;
+        if (additive) {
+          next = prev.includes(handle) ? prev.filter((x) => x !== handle) : [...prev, handle];
+        } else if (prev.length === 1 && prev[0] === handle) {
+          next = [];
+        } else {
+          next = [handle];
+        }
+        const filtered = filterRef.current ? filterRef.current(next) : next;
+        if (onChangeRef.current) onChangeRef.current(filtered);
+        return filtered;
+      });
+    };
+    cameraEl.addEventListener("click", onClick);
+    return () => cameraEl.removeEventListener("click", onClick);
+  }, [cameraElRef, findMeshUnderPoint2, apply]);
+  const handleClick = (e) => {
+    if (cameraCtx) return;
+    const handle = findPolyMeshHandle(e.target) ?? findMeshUnderPoint2(e.clientX, e.clientY);
+    if (!handle) {
+      if (onPointerMissed) onPointerMissed(e);
+      if (clearOnMiss) apply([]);
+      return;
+    }
+    if (multiple && (e.shiftKey || e.metaKey || e.ctrlKey)) {
+      api.toggle(handle);
+    } else if (selected.length === 1 && selected[0] === handle) {
+      apply([]);
+    } else {
+      apply([handle]);
+    }
+  };
+  const wrapperStyle = { display: "contents", ...style };
+  return /* @__PURE__ */ jsx8(SelectContext.Provider, { value: api, children: /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: wrapperRef,
+      className,
+      style: wrapperStyle,
+      onClick: handleClick,
+      "data-poly-select": true,
+      children
+    }
+  ) });
+}
+function usePolySelect() {
+  return useContext5(SelectContext)?.selected ?? [];
+}
+function usePolySelectionApi() {
+  const ctx = useContext5(SelectContext);
+  if (!ctx) {
+    throw new Error("polycss: usePolySelectionApi must be used inside <PolySelect>.");
+  }
+  return ctx;
+}
+
+// src/helpers/PolyAxesHelper.tsx
+import { useMemo as useMemo12 } from "react";
+import { axesHelperPolygons } from "@layoutit/polycss-core";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function PolyAxesHelper({
+  size,
+  thickness,
+  negative,
+  xColor,
+  yColor,
+  zColor
+}) {
+  const polygons = useMemo12(
+    () => axesHelperPolygons({ size, thickness, negative, xColor, yColor, zColor }),
+    [size, thickness, negative, xColor, yColor, zColor]
+  );
+  return /* @__PURE__ */ jsx9(PolyMesh, { polygons });
+}
+
+// src/helpers/PolyDirectionalLightHelper.tsx
+import { useMemo as useMemo13 } from "react";
+import { octahedronPolygons } from "@layoutit/polycss-core";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TILE = 50;
+function PolyDirectionalLightHelper({
+  light,
+  target,
+  distance = 5,
+  size = 0.35,
+  color
+}) {
+  const swatch = color ?? light.color ?? "#ffd54a";
+  const polygons = useMemo13(
+    () => octahedronPolygons({ center: [0, 0, 0], size, color: swatch }),
+    [size, swatch]
+  );
+  const meshPosition = useMemo13(() => {
+    const [dx, dy, dz] = light.direction;
+    const len = Math.hypot(dx, dy, dz) || 1;
+    const tx = target?.[0] ?? 0;
+    const ty = target?.[1] ?? 0;
+    const tz = target?.[2] ?? 0;
+    const worldX = tx + dy / len * distance;
+    const worldY = ty + dx / len * distance;
+    const worldZ = tz + dz / len * distance;
+    return [worldY * TILE, worldX * TILE, worldZ * TILE];
+  }, [light.direction, target, distance]);
+  return /* @__PURE__ */ jsx10(PolyMesh, { polygons, position: meshPosition });
+}
+
+// src/styles/colorResolver.ts
+import { parsePureColor as parsePureColor2 } from "@layoutit/polycss-core";
+
+// src/animation/usePolyAnimation.ts
+import { useEffect as useEffect10, useRef as useRef10, useMemo as useMemo14 } from "react";
+import { createPolyAnimationMixer } from "@layoutit/polycss-core";
+function resolveRoot(rootArg) {
+  if (!rootArg) return null;
+  if ("current" in rootArg) return rootArg.current;
+  return rootArg;
+}
+function usePolyAnimation(clips, controller, root) {
+  const internalRef = useRef10(null);
+  const mixerRef = useRef10(null);
+  useEffect10(() => {
+    if (!clips || clips.length === 0 || !controller) {
+      mixerRef.current = null;
+      return;
+    }
+    const resolvedRoot = resolveRoot(root) ?? internalRef.current;
+    if (!resolvedRoot) {
+      mixerRef.current = null;
+      return;
+    }
+    mixerRef.current = createPolyAnimationMixer(resolvedRoot, controller);
+    return () => {
+      mixerRef.current?.stopAllAction();
+      mixerRef.current?.uncacheRoot();
+      mixerRef.current = null;
+    };
+  }, [clips, controller]);
+  useEffect10(() => {
+    if (!clips || clips.length === 0 || !controller) return;
+    let rafId;
+    let lastTime = null;
+    function tick(now) {
+      if (lastTime === null) {
+        lastTime = now;
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      const dt = (now - lastTime) / 1e3;
+      lastTime = now;
+      mixerRef.current?.update(dt);
+      rafId = requestAnimationFrame(tick);
+    }
+    rafId = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(rafId);
+      lastTime = null;
+    };
+  }, [clips, controller]);
+  const resolvedClips = clips ?? [];
+  const resolvedNames = resolvedClips.map((c) => c.name);
+  const actions = useMemo14(() => {
+    const target = {};
+    for (const clip of resolvedClips) {
+      Object.defineProperty(target, clip.name, {
+        enumerable: true,
+        get() {
+          const m = mixerRef.current;
+          if (!m) return null;
+          try {
+            return m.clipAction(clip.name);
+          } catch {
+            return null;
+          }
+        }
+      });
+    }
+    return target;
+  }, [resolvedClips]);
+  return {
+    ref: internalRef,
+    mixer: mixerRef.current,
+    clips: resolvedClips,
+    names: resolvedNames,
+    actions
+  };
+}
+
+// src/index.ts
+import {
+  normalizePolygons,
+  mergePolygons as mergePolygons2,
+  coverPlanarPolygons,
+  cullInteriorPolygons,
+  parseObj,
+  parseMtl,
+  parseGltf,
+  bakeSolidTextureSamples,
+  bakeSolidTextureSampledPolygons,
+  loadMesh as loadMesh2,
+  createIsometricCamera as createIsometricCamera3,
+  parseVox,
+  polygonFaces,
+  computeTexturePaintMetrics,
+  computeShapeLighting,
+  parseColor,
+  parsePureColor as parsePureColor3,
+  parseHexColor as parseHexColor2,
+  parseRgbColor,
+  formatColor,
+  clampChannel,
+  shadeColor,
+  rotateVec3,
+  inverseRotateVec3 as inverseRotateVec32,
+  axesHelperPolygons as axesHelperPolygons2,
+  arrowPolygons as arrowPolygons2,
+  ringPolygons as ringPolygons2,
+  octahedronPolygons as octahedronPolygons2,
+  buildSceneContext as buildSceneContext2,
+  computeSceneBbox as computeSceneBbox2,
+  BASE_TILE as BASE_TILE3,
+  DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION,
+  normalizeInvertMultiplier,
+  createPolyAnimationMixer as createPolyAnimationMixer2,
+  LoopOnce,
+  LoopRepeat,
+  LoopPingPong
+} from "@layoutit/polycss-core";
+export {
+  BASE_TILE3 as BASE_TILE,
+  DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION,
+  LoopOnce,
+  LoopPingPong,
+  LoopRepeat,
+  Poly,
+  PolyAxesHelper,
+  PolyPerspectiveCamera as PolyCamera,
+  PolyCameraContext,
+  PolyDirectionalLightHelper,
+  PolyMapControls,
+  PolyMesh,
+  PolyOrbitControls,
+  PolyOrthographicCamera,
+  PolyPerspectiveCamera,
+  PolyScene,
+  PolySelect,
+  PolyTransformControls,
+  arrowPolygons2 as arrowPolygons,
+  axesHelperPolygons2 as axesHelperPolygons,
+  bakeSolidTextureSampledPolygons,
+  bakeSolidTextureSamples,
+  buildSceneContext2 as buildSceneContext,
+  clampChannel,
+  computeSceneBbox2 as computeSceneBbox,
+  computeShapeLighting,
+  computeTexturePaintMetrics,
+  coverPlanarPolygons,
+  createIsometricCamera3 as createIsometricCamera,
+  createPolyAnimationMixer2 as createPolyAnimationMixer,
+  cullInteriorPolygons,
+  findMeshUnderPoint,
+  findPolyMeshHandle,
+  formatColor,
+  injectPolyBaseStyles,
+  inverseRotateVec32 as inverseRotateVec3,
+  loadMesh2 as loadMesh,
+  mergePolygons2 as mergePolygons,
+  normalizeInvertMultiplier,
+  normalizePolygons,
+  octahedronPolygons2 as octahedronPolygons,
+  parseColor,
+  parseGltf,
+  parseHexColor2 as parseHexColor,
+  parseMtl,
+  parseObj,
+  parsePureColor3 as parsePureColor,
+  parseRgbColor,
+  parseVox,
+  pointInMeshElement,
+  polygonFaces,
+  ringPolygons2 as ringPolygons,
+  rotateVec3,
+  shadeColor,
+  useCameraContext,
+  usePolyAnimation,
+  usePolyCamera,
+  usePolyMaterial,
+  usePolyMesh,
+  usePolySceneContext,
+  usePolySelect,
+  usePolySelectionApi
+};