@layoutit/polycss-react 0.0.1 → 0.2.0

package/dist/index.cjs

@@ -20,17 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BASE_TILE: () => import_polycss_core13.BASE_TILE,
-  DEFAULT_CAMERA_STATE: () => import_polycss_core13.DEFAULT_CAMERA_STATE,
-  DEFAULT_PROJECTION: () => import_polycss_core13.DEFAULT_PROJECTION,
-  LoopOnce: () => import_polycss_core13.LoopOnce,
-  LoopPingPong: () => import_polycss_core13.LoopPingPong,
-  LoopRepeat: () => import_polycss_core13.LoopRepeat,
+  BASE_TILE: () => import_polycss_core14.BASE_TILE,
+  CAMERA_BACKFACE_CULL_EPS: () => import_polycss_core14.CAMERA_BACKFACE_CULL_EPS,
+  DEFAULT_CAMERA_STATE: () => import_polycss_core14.DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION: () => import_polycss_core14.DEFAULT_PROJECTION,
+  LoopOnce: () => import_polycss_core14.LoopOnce,
+  LoopPingPong: () => import_polycss_core14.LoopPingPong,
+  LoopRepeat: () => import_polycss_core14.LoopRepeat,
   Poly: () => Poly,
   PolyAxesHelper: () => PolyAxesHelper,
   PolyCamera: () => PolyPerspectiveCamera,
   PolyCameraContext: () => PolyCameraContext,
   PolyDirectionalLightHelper: () => PolyDirectionalLightHelper,
+  PolyFirstPersonControls: () => PolyFirstPersonControls,
+  PolyGround: () => PolyGround,
   PolyMapControls: () => PolyMapControls,
   PolyMesh: () => PolyMesh,
   PolyOrbitControls: () => PolyOrbitControls,
@@ -39,42 +42,56 @@ __export(src_exports, {
   PolyScene: () => PolyScene,
   PolySelect: () => PolySelect,
   PolyTransformControls: () => PolyTransformControls,
-  arrowPolygons: () => import_polycss_core13.arrowPolygons,
-  axesHelperPolygons: () => import_polycss_core13.axesHelperPolygons,
-  bakeSolidTextureSampledPolygons: () => import_polycss_core13.bakeSolidTextureSampledPolygons,
-  bakeSolidTextureSamples: () => import_polycss_core13.bakeSolidTextureSamples,
-  buildSceneContext: () => import_polycss_core13.buildSceneContext,
-  clampChannel: () => import_polycss_core13.clampChannel,
-  computeSceneBbox: () => import_polycss_core13.computeSceneBbox,
-  computeShapeLighting: () => import_polycss_core13.computeShapeLighting,
-  computeTexturePaintMetrics: () => import_polycss_core13.computeTexturePaintMetrics,
-  coverPlanarPolygons: () => import_polycss_core13.coverPlanarPolygons,
-  createIsometricCamera: () => import_polycss_core13.createIsometricCamera,
-  createPolyAnimationMixer: () => import_polycss_core13.createPolyAnimationMixer,
-  cullInteriorPolygons: () => import_polycss_core13.cullInteriorPolygons,
+  VOXEL_CAMERA_CULL_AXIS_EPS: () => import_polycss_core14.VOXEL_CAMERA_CULL_AXIS_EPS,
+  VOXEL_CAMERA_CULL_NORMAL_LIMIT: () => import_polycss_core14.VOXEL_CAMERA_CULL_NORMAL_LIMIT,
+  arrowPolygons: () => import_polycss_core14.arrowPolygons,
+  axesHelperPolygons: () => import_polycss_core14.axesHelperPolygons,
+  bakeSolidTextureSampledPolygons: () => import_polycss_core14.bakeSolidTextureSampledPolygons,
+  bakeSolidTextureSamples: () => import_polycss_core14.bakeSolidTextureSamples,
+  boxPolygons: () => import_polycss_core14.boxPolygons,
+  buildSceneContext: () => import_polycss_core14.buildSceneContext,
+  cameraCullNormalGroups: () => import_polycss_core14.cameraCullNormalGroups,
+  cameraCullNormalGroupsFromPolygons: () => import_polycss_core14.cameraCullNormalGroupsFromPolygons,
+  cameraCullNormalKey: () => import_polycss_core14.cameraCullNormalKey,
+  cameraCullVisibleSignature: () => import_polycss_core14.cameraCullVisibleSignature,
+  cameraFacingDepth: () => import_polycss_core14.cameraFacingDepth,
+  clampChannel: () => import_polycss_core14.clampChannel,
+  computeSceneBbox: () => import_polycss_core14.computeSceneBbox,
+  computeShapeLighting: () => import_polycss_core14.computeShapeLighting,
+  computeTexturePaintMetrics: () => import_polycss_core14.computeTexturePaintMetrics,
+  coverPlanarPolygons: () => import_polycss_core14.coverPlanarPolygons,
+  createIsometricCamera: () => import_polycss_core14.createIsometricCamera,
+  createPolyAnimationMixer: () => import_polycss_core14.createPolyAnimationMixer,
+  cullInteriorPolygons: () => import_polycss_core14.cullInteriorPolygons,
   findMeshUnderPoint: () => findMeshUnderPoint,
   findPolyMeshHandle: () => findPolyMeshHandle,
-  formatColor: () => import_polycss_core13.formatColor,
+  formatColor: () => import_polycss_core14.formatColor,
   injectPolyBaseStyles: () => injectPolyBaseStyles,
-  inverseRotateVec3: () => import_polycss_core13.inverseRotateVec3,
-  loadMesh: () => import_polycss_core13.loadMesh,
-  mergePolygons: () => import_polycss_core13.mergePolygons,
-  normalizeInvertMultiplier: () => import_polycss_core13.normalizeInvertMultiplier,
-  normalizePolygons: () => import_polycss_core13.normalizePolygons,
-  octahedronPolygons: () => import_polycss_core13.octahedronPolygons,
-  parseColor: () => import_polycss_core13.parseColor,
-  parseGltf: () => import_polycss_core13.parseGltf,
-  parseHexColor: () => import_polycss_core13.parseHexColor,
-  parseMtl: () => import_polycss_core13.parseMtl,
-  parseObj: () => import_polycss_core13.parseObj,
-  parsePureColor: () => import_polycss_core13.parsePureColor,
-  parseRgbColor: () => import_polycss_core13.parseRgbColor,
-  parseVox: () => import_polycss_core13.parseVox,
+  inverseRotateVec3: () => import_polycss_core14.inverseRotateVec3,
+  isAxisAlignedSurfaceNormal: () => import_polycss_core14.isAxisAlignedSurfaceNormal,
+  isVoxelCameraCullableNormalGroups: () => import_polycss_core14.isVoxelCameraCullableNormalGroups,
+  loadMesh: () => import_polycss_core14.loadMesh,
+  mergePolygons: () => import_polycss_core14.mergePolygons,
+  normalFacesCamera: () => import_polycss_core14.normalFacesCamera,
+  normalizeInvertMultiplier: () => import_polycss_core14.normalizeInvertMultiplier,
+  normalizePolygons: () => import_polycss_core14.normalizePolygons,
+  octahedronPolygons: () => import_polycss_core14.octahedronPolygons,
+  optimizeMeshPolygons: () => import_polycss_core14.optimizeMeshPolygons,
+  parseColor: () => import_polycss_core14.parseColor,
+  parseGltf: () => import_polycss_core14.parseGltf,
+  parseHexColor: () => import_polycss_core14.parseHexColor,
+  parseMtl: () => import_polycss_core14.parseMtl,
+  parseObj: () => import_polycss_core14.parseObj,
+  parsePureColor: () => import_polycss_core14.parsePureColor,
+  parseRgbColor: () => import_polycss_core14.parseRgbColor,
+  parseVox: () => import_polycss_core14.parseVox,
   pointInMeshElement: () => pointInMeshElement,
-  polygonFaces: () => import_polycss_core13.polygonFaces,
-  ringPolygons: () => import_polycss_core13.ringPolygons,
-  rotateVec3: () => import_polycss_core13.rotateVec3,
-  shadeColor: () => import_polycss_core13.shadeColor,
+  polygonCssSurfaceNormal: () => import_polycss_core14.polygonCssSurfaceNormal,
+  polygonFaces: () => import_polycss_core14.polygonFaces,
+  polygonFacesCamera: () => import_polycss_core14.polygonFacesCamera,
+  ringPolygons: () => import_polycss_core14.ringPolygons,
+  rotateVec3: () => import_polycss_core14.rotateVec3,
+  shadeColor: () => import_polycss_core14.shadeColor,
   useCameraContext: () => useCameraContext,
   usePolyAnimation: () => usePolyAnimation,
   usePolyCamera: () => usePolyCamera,
@@ -108,7 +125,8 @@ var import_polycss_core = require("@layoutit/polycss-core");
 var import_react2 = require("react");
 function createSceneStore(initial) {
   let state = {
-    cameraState: { ...initial }
+    cameraState: { ...initial },
+    autoCenterOffset: [0, 0, 0]
   };
   const listeners = /* @__PURE__ */ new Set();
   function notify() {
@@ -127,15 +145,24 @@ function createSceneStore(initial) {
       return () => listeners.delete(listener);
     },
     updateCameraFromRef(handle) {
-      state = { cameraState: { ...handle.state } };
+      state = { ...state, cameraState: { ...handle.state } };
       notify();
       return true;
     },
     notifyAll() {
       notify();
+    },
+    setAutoCenterOffset(offset) {
+      state = { ...state, autoCenterOffset: offset };
     }
   };
 }
+function useStoreSelector(store, selector) {
+  const selectorRef = (0, import_react2.useRef)(selector);
+  selectorRef.current = selector;
+  const getSnapshot = (0, import_react2.useCallback)(() => selectorRef.current(store.getState()), [store]);
+  return (0, import_react2.useSyncExternalStore)(store.subscribe, getSnapshot);
+}
 
 // src/camera/useCamera.ts
 function usePolyCamera(options) {
@@ -168,11 +195,14 @@ function usePolyCamera(options) {
       const el = sceneElRef.current;
       if (el) {
         const s = handle.state;
+        const [ox, oy, oz] = store.getState().autoCenterOffset;
         const tileSize = import_polycss_core.BASE_TILE;
-        const [tx, ty, tz] = s.target;
-        const cssX = ty * tileSize;
-        const cssY = tx * tileSize;
-        const cssZ = tz * tileSize;
+        const wx = s.target[0] + ox;
+        const wy = s.target[1] + oy;
+        const wz = s.target[2] + oz;
+        const cssX = wy * tileSize;
+        const cssY = wx * tileSize;
+        const cssZ = wz * tileSize;
         const 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)`;
       }
@@ -185,14 +215,17 @@ function usePolyCamera(options) {
     if (!el) return;
     const handle = handleRef.current;
     const s = handle.state;
+    const [ox, oy, oz] = store.getState().autoCenterOffset;
     const tileSize = import_polycss_core.BASE_TILE;
-    const [tx, ty, tz] = s.target;
-    const cssX = ty * tileSize;
-    const cssY = tx * tileSize;
-    const cssZ = tz * tileSize;
+    const wx = s.target[0] + ox;
+    const wy = s.target[1] + oy;
+    const wz = s.target[2] + oz;
+    const cssX = wy * tileSize;
+    const cssY = wx * tileSize;
+    const cssZ = wz * tileSize;
     const 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]);
   return {
     store,
     cameraRef: handleRef,
@@ -330,12 +363,6 @@ var CORE_BASE_STYLES = `
   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 */
@@ -358,6 +385,22 @@ var CORE_BASE_STYLES = `
   position: absolute;
 }
 
+/* \u2500\u2500 First-person controls perspective context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* PolyFirstPersonControls toggles this class on its host element (the camera
+   wrapper). FPV needs a real perspective context so scene Z translation
+   produces visible depth motion - without it, walking forward looks like a
+   planar pan. The class wins over inline perspective styles (e.g.
+   PolyOrthographicCamera's perspective: none) via !important. The actual
+   perspective value is set inline by the controls as the
+   --polycss-fpv-perspective custom property; the default of 2000px matches
+   the controls' lookOffset fallback so the FPV math and visual perspective
+   stay in sync. */
+.polycss-fpv-host {
+  perspective: var(--polycss-fpv-perspective, 2000px) !important;
+  transform-style: preserve-3d !important;
+}
+
 /* \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 */
 
 /*
@@ -385,24 +428,37 @@ var CORE_BASE_STYLES = `
   background-repeat: no-repeat;
 }
 
+.polycss-scene b,
+.polycss-scene i,
+.polycss-scene u {
+  color: var(--polycss-paint, currentColor);
+}
+
 .polycss-scene b {
+  background: currentColor;
+  width: 64px;
+  height: 64px;
 }
 
 .polycss-scene i {
-  border-style: solid;
-  border-width: 1px;
+  width: 16px;
+  height: 16px;
   border-color: currentColor;
 }
 
 .polycss-scene s {
+  width: var(--polycss-atlas-size, 64px);
+  height: var(--polycss-atlas-size, 64px);
 }
 
 .polycss-scene u {
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   background: transparent;
   box-sizing: content-box;
   border: 0 solid transparent;
+  border-color: transparent transparent currentColor transparent;
+  border-width: 0 32px 64px 32px;
 }
 
 /* \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 */
@@ -415,17 +471,43 @@ var CORE_BASE_STYLES = `
  * 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.
+ * Transitions on color, border-color, and background-color smooth the
+ * idle \u2192 hover \u2192 drag alpha changes across rect, border-shape, triangle,
+ * and atlas paths.
  */
 .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;
+  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
+}
+
+/*
+ * Rotate rings are rendered as a single square quad per ring, then masked
+ * to a donut via a radial-gradient. --ring-inner-ratio is set inline by
+ * <PolyTransformControls> (= innerR / outerR, where outerR is the edge of
+ * the quad mapped to 50%). Hit-testing also uses the donut shape \u2014 see
+ * the ring-aware path in TransformControls.tsx. Single DOM node per ring.
+ */
+.polycss-transform-ring i,
+.polycss-transform-ring b,
+.polycss-transform-ring s,
+.polycss-transform-ring u {
+  --ring-inner-r: calc(var(--ring-inner-ratio, 0.92) * 50%);
+  --ring-outer-r: calc(var(--ring-outer-ratio, 1) * 50%);
+  -webkit-mask: radial-gradient(circle at 50% 50%,
+    transparent 0%,
+    transparent var(--ring-inner-r),
+    black var(--ring-inner-r),
+    black var(--ring-outer-r),
+    transparent var(--ring-outer-r));
+          mask: radial-gradient(circle at 50% 50%,
+    transparent 0%,
+    transparent var(--ring-inner-r),
+    black var(--ring-inner-r),
+    black var(--ring-outer-r),
+    transparent var(--ring-outer-r));
 }
 
 /* \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 */
@@ -445,6 +527,20 @@ var CORE_BASE_STYLES = `
 @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; }
+
+/* CSS-space light components (world-Y\u2192cssX, world-X\u2192cssY, world-Z\u2192cssZ).
+   Used by the shadow projection matrix. --clz is clamped away from 0 in JS
+   to avoid divide-by-zero when the light is near-horizontal. */
+@property --clx { syntax: "<number>"; inherits: true; initial-value: 0.01; }
+@property --cly { syntax: "<number>"; inherits: true; initial-value: 0; }
+@property --clz { syntax: "<number>"; inherits: true; initial-value: 1; }
+
+/* Ground-plane position in CSS pixels along the CSS-Z axis (= world-Z, the
+   up axis in polycss's world convention). Stored as a <number> so it can be
+   used directly inside matrix3d() calc() expressions (matrix3d requires
+   dimensionless entries \u2014 no px units).
+   Set by PolyScene from the min world-Z of casting meshes. */
+@property --shadow-ground-cssz { syntax: "<number>"; inherits: true; initial-value: 0; }
 @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; }
@@ -454,14 +550,14 @@ var CORE_BASE_STYLES = `
 @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). */
+/* Per-polygon surface normal \u2014 set inline by the renderer. Base RGB channels
+   may be hoisted to a mesh wrapper, so they inherit unless overridden inline. */
 @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; }
+@property --psr { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --psg { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --psb { syntax: "<number>"; inherits: true; 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
@@ -487,8 +583,9 @@ var CORE_BASE_STYLES = `
   background-blend-mode: multiply;
 }
 
+.polycss-scene[data-polycss-lighting="dynamic"] b,
 .polycss-scene[data-polycss-lighting="dynamic"] u {
-  border-bottom-color: rgb(
+  color: rgb(
     calc(255 * var(--psr) * (var(--par) * var(--pai)
          + var(--plr) * var(--pli) * max(0,
            var(--pnx) * var(--plx) +
@@ -506,6 +603,92 @@ var CORE_BASE_STYLES = `
            var(--pnz) * var(--plz))))
   );
 }
+
+/* <q> \u2014 dedicated shadow leaf. Same border-shape rendering trick as <i>
+   (border-color: currentColor fills the polygon outline) but with its
+   own tag so we don't have to thread :not(.polycss-shadow) exclusions
+   through every dynamic-mode color rule. backface-visibility must be
+   visible because the projection matrix is near-rank-deficient and the
+   resulting plane's normal can read as back-facing under some camera
+   angles; the leaf is intentionally always painted. Strip the UA's
+   default ::before/::after open-/close-quote so the element is just a
+   styled box. */
+.polycss-scene q {
+  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;
+  text-decoration: none;
+  backface-visibility: visible;
+  border-color: currentColor;
+  pointer-events: none;
+  will-change: transform;
+}
+.polycss-scene q::before,
+.polycss-scene q::after {
+  content: none;
+}
+
+/* \u2500\u2500 Cast shadows (dynamic mode only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * Shadow projection matrix. Projects any 3D point P onto the horizontal
+ * ground plane (cssZ \u2248 G) along the CSS-space light direction (--clx/y/z).
+ *
+ * In polycss's world convention world Z is up (red-green plane is the
+ * floor in the axes helper). After the world\u2192CSS swap (Y\u2194X), world Z stays
+ * as CSS Z, so the ground plane normal in CSS space is +cssZ.
+ *
+ * The strict projection formula would set m22=0 (output.z is a constant G,
+ * the polygon is exactly flat). But Chromium SKIPS rendering elements
+ * whose composed transform matrix is non-invertible (singular). m22=0
+ * makes the matrix singular, so the shadow paints nothing even though it
+ * has a valid layout box. The fix: collapse along z by a near-zero
+ * scale (Z_SQUASH = 0.01) instead of exactly zero \u2014 output.z is then
+ * approximately G with ~1% drift from the input, full-rank and renderable.
+ * The shadow still looks flat to the eye (the drift is sub-pixel for
+ * any realistic scene size).
+ *
+ *   out.cssX = P.cssX - (--clx/--clz) * (P.cssZ - G)
+ *   out.cssY = P.cssY - (--cly/--clz) * (P.cssZ - G)
+ *   out.cssZ = Z_SQUASH * P.cssZ + (1 - Z_SQUASH) * G
+ *
+ * As column-major 4\xD74 (CSS matrix3d order):
+ *   col1: [1, 0, 0, 0]
+ *   col2: [0, 1, 0, 0]
+ *   col3: [-(--clx/--clz), -(--cly/--clz), Z_SQUASH, 0]
+ *   col4: [G*(--clx/--clz), G*(--cly/--clz), G*(1-Z_SQUASH), 1]
+ */
+.polycss-scene[data-polycss-lighting="dynamic"] {
+  --shadow-proj: matrix3d(
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    calc(-1 * var(--clx) / var(--clz)),
+    calc(-1 * var(--cly) / var(--clz)),
+    0.01,
+    0,
+    calc(var(--shadow-ground-cssz) * var(--clx) / var(--clz)),
+    calc(var(--shadow-ground-cssz) * var(--cly) / var(--clz)),
+    calc(var(--shadow-ground-cssz) * 0.99),
+    1
+  );
+}
+
+/* <q> shadow leaf \u2014 Lambert-gated opacity. Polygons facing the light cast
+   full shadow; polygons facing away cast zero shadow (their projection
+   would stack inside the silhouette and produce ugly overdraw). The
+   * 10 multiplier sharpens the cutoff so small positive Lambert values
+   jump quickly to 1, giving a near-binary visibility decision with a
+   smooth edge transition. Pure CSS calc \u2014 no JS at light-change time. */
+.polycss-scene q {
+  opacity: clamp(0, calc((var(--pnx) * var(--clx) + var(--pny) * var(--cly) + var(--pnz) * var(--clz)) * 10), 1);
+}
 `;
 
 // src/scene/textureAtlas.tsx
@@ -525,15 +708,30 @@ 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_MAX_DECODED_BYTES_MOBILE = 4 * 1024 * 1024;
+var AUTO_ATLAS_MAX_DECODED_BYTES_DESKTOP = 16 * 1024 * 1024;
 var AUTO_ATLAS_SCALE_GUARD = 0.995;
 var DEFAULT_MATRIX_DECIMALS = 3;
 var DEFAULT_BORDER_SHAPE_DECIMALS = 2;
+var DEFAULT_ATLAS_CSS_DECIMALS = 4;
+var SOLID_QUAD_CANONICAL_SIZE = 64;
+var SOLID_TRIANGLE_CANONICAL_SIZE = 64;
+var ATLAS_CANONICAL_SIZE_EXPLICIT = 64;
+var ATLAS_CANONICAL_SIZE_AUTO_DESKTOP = 128;
+var BORDER_SHAPE_CENTER_PERCENT = 50;
+var BORDER_SHAPE_POINT_EPS = 1e-7;
+var BORDER_SHAPE_CANONICAL_SIZE = 16;
+var PROJECTIVE_QUAD_DENOM_EPS = 0.05;
+var PROJECTIVE_QUAD_MAX_WEIGHT_RATIO = 4;
+var PROJECTIVE_QUAD_BLEED = 0.6;
 var BASIS_EPS = 1e-9;
-var SOLID_TRIANGLE_BLEED = 0.45;
+var SOLID_TRIANGLE_BLEED = 0.6;
 var TEXTURE_IMAGE_CACHE = /* @__PURE__ */ new Map();
 var RECT_EPS = 1e-3;
 var TEXTURE_TRIANGLE_BLEED = 0.75;
+var TEXTURE_EDGE_REPAIR_ALPHA_MIN = 1;
+var TEXTURE_EDGE_REPAIR_SOURCE_ALPHA_MIN = 250;
+var TEXTURE_EDGE_REPAIR_RADIUS = 1.5;
 function loadTextureImage(url) {
   let p = TEXTURE_IMAGE_CACHE.get(url);
   if (!p) {
@@ -565,6 +763,10 @@ function roundDecimal(value, decimals) {
   const next = value.toFixed(decimals).replace(/\.?0+$/, "");
   return Object.is(Number(next), -0) ? "0" : next;
 }
+function formatCssLength(value, decimals = DEFAULT_ATLAS_CSS_DECIMALS) {
+  const next = roundDecimal(value, decimals);
+  return Number(next) === 0 || Object.is(Number(next), -0) ? "0" : `${next}px`;
+}
 function formatMatrix3d(matrix, decimals = DEFAULT_MATRIX_DECIMALS) {
   return `matrix3d(${matrix.split(",").map((value) => {
     const parsed = Number(value.trim());
@@ -572,12 +774,31 @@ function formatMatrix3d(matrix, decimals = DEFAULT_MATRIX_DECIMALS) {
   }).join(",")})`;
 }
 function formatPercent(value, decimals = DEFAULT_BORDER_SHAPE_DECIMALS) {
-  return `${roundDecimal(value, decimals)}%`;
+  const next = roundDecimal(value, decimals);
+  return Number(next) === 0 ? "0" : `${next}%`;
+}
+function pointOnSegment(px, py, ax, ay, bx, by) {
+  const cross = (px - ax) * (by - ay) - (py - ay) * (bx - ax);
+  if (Math.abs(cross) > BORDER_SHAPE_POINT_EPS) return false;
+  const dot = (px - ax) * (px - bx) + (py - ay) * (py - by);
+  return dot <= BORDER_SHAPE_POINT_EPS;
+}
+function polygonContainsPoint(points, px = BORDER_SHAPE_CENTER_PERCENT, py = BORDER_SHAPE_CENTER_PERCENT) {
+  let inside = false;
+  for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+    const [xi, yi] = points[i];
+    const [xj, yj] = points[j];
+    if (pointOnSegment(px, py, xi, yi, xj, yj)) return true;
+    if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
 }
 function atlasArea(pages) {
   return pages.reduce((sum, page) => sum + page.width * page.height, 0);
 }
-function autoAtlasScaleCap(pages) {
+function autoAtlasScaleCap(pages, maxDecodedBytes) {
   const area = atlasArea(pages);
   if (area <= 0) return 1;
   const maxSide = Math.max(
@@ -585,15 +806,52 @@ function autoAtlasScaleCap(pages) {
     ...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));
+  const memoryScale = Math.sqrt(maxDecodedBytes / (area * 4));
   return normalizeAtlasScale(Math.min(sideScale, memoryScale));
 }
-function autoAtlasScale(pages) {
+function isMobileDocument(doc) {
+  if (!doc) return false;
+  const win = doc.defaultView ?? (typeof window !== "undefined" ? window : void 0);
+  const media = win?.matchMedia;
+  if (!media) return false;
+  return media("(pointer: coarse)").matches || media("(hover: none)").matches;
+}
+function autoAtlasMaxDecodedBytes(doc) {
+  return isMobileDocument(doc) ? AUTO_ATLAS_MAX_DECODED_BYTES_MOBILE : AUTO_ATLAS_MAX_DECODED_BYTES_DESKTOP;
+}
+function atlasCanonicalSizeForTextureQuality(textureQualityInput, doc) {
+  if (textureQualityInput !== void 0 && textureQualityInput !== "auto") {
+    return ATLAS_CANONICAL_SIZE_EXPLICIT;
+  }
+  return isMobileDocument(doc) ? ATLAS_CANONICAL_SIZE_EXPLICIT : ATLAS_CANONICAL_SIZE_AUTO_DESKTOP;
+}
+function formatAtlasMatrix(entry, atlasCanonicalSize) {
+  const values = entry.matrix.split(",").map((value) => Number(value));
+  if (values.length !== 16 || values.some((value) => !Number.isFinite(value))) {
+    return entry.canonicalMatrix;
+  }
+  values[0] *= entry.canvasW / atlasCanonicalSize;
+  values[1] *= entry.canvasW / atlasCanonicalSize;
+  values[2] *= entry.canvasW / atlasCanonicalSize;
+  values[4] *= entry.canvasH / atlasCanonicalSize;
+  values[5] *= entry.canvasH / atlasCanonicalSize;
+  values[6] *= entry.canvasH / atlasCanonicalSize;
+  return values.join(",");
+}
+function applyPackedAtlasCanonicalSize(packed, atlasCanonicalSize) {
+  for (const entry of packed.entries) {
+    if (!entry) continue;
+    entry.atlasCanonicalSize = atlasCanonicalSize;
+    entry.atlasMatrix = formatAtlasMatrix(entry, atlasCanonicalSize);
+  }
+  return packed;
+}
+function autoAtlasScale(pages, maxDecodedBytes) {
   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)));
+  return normalizeAtlasScale(Math.min(atlasScale, autoAtlasScaleCap(pages, maxDecodedBytes)));
 }
 function atlasBitmapMaxSide(pages, atlasScale) {
   return pages.reduce((max, page) => Math.max(
@@ -608,18 +866,18 @@ function atlasDecodedBytes(pages, atlasScale) {
     0
   );
 }
-function autoAtlasBudgetFactor(pages, atlasScale) {
+function autoAtlasBudgetFactor(pages, atlasScale, maxDecodedBytes) {
   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;
+  const memoryFactor = decodedBytes > maxDecodedBytes ? Math.sqrt(maxDecodedBytes / decodedBytes) : 1;
   return Math.min(sideFactor, memoryFactor);
 }
-function packTextureAtlasPlansAuto(plans, fullScalePacked) {
-  let atlasScale = autoAtlasScale(fullScalePacked.pages);
+function packTextureAtlasPlansAuto(plans, fullScalePacked, maxDecodedBytes) {
+  let atlasScale = autoAtlasScale(fullScalePacked.pages, maxDecodedBytes);
   let packed = atlasScale === 1 ? fullScalePacked : packTextureAtlasPlans(plans, atlasScale);
   for (let i = 0; i < 4; i++) {
-    const factor = autoAtlasBudgetFactor(packed.pages, atlasScale);
+    const factor = autoAtlasBudgetFactor(packed.pages, atlasScale, maxDecodedBytes);
     if (factor >= 1) break;
     const nextAtlasScale = normalizeAtlasScale(atlasScale * factor * AUTO_ATLAS_SCALE_GUARD);
     if (nextAtlasScale >= atlasScale) break;
@@ -628,13 +886,23 @@ function packTextureAtlasPlansAuto(plans, fullScalePacked) {
   }
   return { packed, atlasScale };
 }
-function packTextureAtlasPlansWithScale(plans, atlasScaleInput) {
-  if (atlasScaleInput !== void 0 && atlasScaleInput !== "auto") {
-    const atlasScale = normalizeAtlasScale(atlasScaleInput);
-    return { packed: packTextureAtlasPlans(plans, atlasScale), atlasScale };
+function packTextureAtlasPlansWithScale(plans, textureQualityInput, doc) {
+  const atlasCanonicalSize = atlasCanonicalSizeForTextureQuality(textureQualityInput, doc);
+  if (textureQualityInput !== void 0 && textureQualityInput !== "auto") {
+    const atlasScale = normalizeAtlasScale(textureQualityInput);
+    return {
+      packed: applyPackedAtlasCanonicalSize(packTextureAtlasPlans(plans, atlasScale), atlasCanonicalSize),
+      atlasScale,
+      atlasCanonicalSize
+    };
   }
   const fullScalePacked = packTextureAtlasPlans(plans, 1);
-  return packTextureAtlasPlansAuto(plans, fullScalePacked);
+  const autoPacked = packTextureAtlasPlansAuto(plans, fullScalePacked, autoAtlasMaxDecodedBytes(doc));
+  return {
+    packed: applyPackedAtlasCanonicalSize(autoPacked.packed, atlasCanonicalSize),
+    atlasScale: autoPacked.atlasScale,
+    atlasCanonicalSize
+  };
 }
 function atlasPadding(atlasScale) {
   return Math.max(ATLAS_PADDING, Math.ceil(ATLAS_PADDING / atlasScale));
@@ -654,6 +922,9 @@ function parseHex(hex) {
   if (!parsed) return { r: 255, g: 255, b: 255 };
   return { r: parsed.rgb[0], g: parsed.rgb[1], b: parsed.rgb[2] };
 }
+function rgbKey({ r, g, b }) {
+  return `${r},${g},${b}`;
+}
 function parseAlpha(input) {
   return (0, import_polycss_core3.parsePureColor)(input)?.alpha ?? 1;
 }
@@ -689,60 +960,369 @@ function isFullRectSolid(entry) {
 function isSolidTrianglePlan(entry) {
   return !entry.texture && entry.polygon.vertices.length === 3;
 }
+function isProjectiveQuadPlan(entry) {
+  return !entry.texture && !!entry.projectiveMatrix && !isFullRectSolid(entry);
+}
 function borderShapeSupported() {
   const supportsBorderShape = !!globalThis.CSS?.supports?.(
     "border-shape",
-    "polygon(0 0, 100% 0, 0 100%) polygon(50% 50%, 50% 50%, 50% 50%)"
+    "polygon(0 0, 100% 0, 0 100%) circle(0)"
   );
   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 = [];
+function solidTriangleSupported() {
+  const userAgent = (typeof window !== "undefined" ? window.navigator : globalThis.navigator)?.userAgent ?? "";
+  if (!userAgent) return true;
+  const isChromiumFamily = /\b(?:Chrome|HeadlessChrome|Chromium|Edg|OPR)\//.test(userAgent);
+  const isSafariFamily = /\bVersion\/[\d.]+.*\bSafari\//.test(userAgent);
+  return !isSafariFamily || isChromiumFamily;
+}
+function incrementCount(map, key) {
+  map.set(key, (map.get(key) ?? 0) + 1);
+}
+function dominantCountKey(map) {
+  let bestKey;
+  let bestCount = 1;
+  for (const [key, count] of map) {
+    if (count > bestCount) {
+      bestKey = key;
+      bestCount = count;
+    }
+  }
+  return bestKey;
+}
+var BRUSH_INLINE_STYLE_ORDER = /* @__PURE__ */ new Map([
+  ["transform", 0],
+  ["border-shape", 1],
+  ["border-width", 2],
+  ["width", 3],
+  ["height", 4],
+  ["color", 5]
+]);
+function orderBrushInlineStyle(el) {
+  const current = el.getAttribute("style");
+  if (!current) return;
+  const declarations = current.split(";").map((declaration) => declaration.trim()).filter(Boolean);
+  const next = declarations.map((declaration, index) => {
+    const property = declaration.slice(0, declaration.indexOf(":")).trim().toLowerCase();
+    return {
+      declaration,
+      index,
+      order: BRUSH_INLINE_STYLE_ORDER.get(property) ?? Number.POSITIVE_INFINITY
+    };
+  }).sort((a, b) => a.order - b.order || a.index - b.index).map(({ declaration }) => declaration).join(";");
+  if (next !== current) el.setAttribute("style", next);
+}
+function getSolidPaintDefaults(plans, textureLighting) {
+  const paintCounts = /* @__PURE__ */ new Map();
+  const dynamicCounts = /* @__PURE__ */ new Map();
+  const dynamicColors = /* @__PURE__ */ new Map();
+  const useStableTriangle = solidTriangleSupported();
+  const useBorderShape = textureLighting !== "dynamic" && borderShapeSupported();
+  for (const plan of plans) {
+    if (!plan || plan.texture) continue;
+    if (textureLighting === "dynamic") {
+      if (!(useStableTriangle && isSolidTrianglePlan(plan)) && !isFullRectSolid(plan)) continue;
+      const color = parseHex(plan.polygon.color ?? "#cccccc");
+      const key = rgbKey(color);
+      incrementCount(dynamicCounts, key);
+      if (!dynamicColors.has(key)) dynamicColors.set(key, color);
+      continue;
+    }
+    if (!(useStableTriangle && isSolidTrianglePlan(plan)) && !isFullRectSolid(plan) && !useBorderShape) continue;
+    incrementCount(paintCounts, plan.shadedColor);
+  }
+  const paintColor = dominantCountKey(paintCounts);
+  const dynamicColorKey = dominantCountKey(dynamicCounts);
+  return {
+    paintColor,
+    dynamicColorKey,
+    dynamicColor: dynamicColorKey ? dynamicColors.get(dynamicColorKey) : void 0
+  };
+}
+function borderShapePointsForPlan(entry) {
+  const points = [];
   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)}`);
+    points.push([x, y]);
   }
-  return `polygon(${pts.join(", ")})`;
+  return points;
+}
+function cssBorderShapePoint([x, y]) {
+  return `${formatPercent(x)} ${formatPercent(y)}`;
+}
+function cssPolygonShapeForPoints(points) {
+  return `polygon(${points.map(cssBorderShapePoint).join(",")})`;
 }
-function cssCollapsedInnerShapeForPlan(entry) {
+function cssCollapsedInnerShapeForPoints(points) {
+  if (polygonContainsPoint(points)) return "circle(0)";
   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 pointCount = Math.max(1, points.length);
+  for (const [x2, y2] of points) {
+    xSum += x2;
+    ySum += y2;
   }
-  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(", ")})`;
+  const x = formatPercent(Math.max(0, Math.min(100, xSum / pointCount)));
+  const y = formatPercent(Math.max(0, Math.min(100, ySum / pointCount)));
+  return `circle(0 at ${x} ${y})`;
 }
 function cssBorderShapeForPlan(entry) {
-  return `${cssPolygonShapeForPlan(entry)} ${cssCollapsedInnerShapeForPlan(entry)}`;
+  const points = borderShapePointsForPlan(entry);
+  return `${cssPolygonShapeForPoints(points)} ${cssCollapsedInnerShapeForPoints(points)}`;
 }
 function formatMatrix3dValues(values, decimals = DEFAULT_MATRIX_DECIMALS) {
   return values.map((value) => roundDecimal(value, decimals)).join(",");
 }
+function formatScaledMatrixFromPlan(entry, scaleX, scaleY) {
+  const values = entry.matrix.split(",").map((value) => Number(value));
+  if (values.length !== 16 || values.some((value) => !Number.isFinite(value))) {
+    return entry.matrix;
+  }
+  values[0] *= scaleX;
+  values[1] *= scaleX;
+  values[2] *= scaleX;
+  values[4] *= scaleY;
+  values[5] *= scaleY;
+  values[6] *= scaleY;
+  return formatMatrix3dValues(values);
+}
+function formatBorderShapeMatrix(entry) {
+  return formatScaledMatrixFromPlan(
+    entry,
+    (entry.canvasW || 1) / BORDER_SHAPE_CANONICAL_SIZE,
+    (entry.canvasH || 1) / BORDER_SHAPE_CANONICAL_SIZE
+  );
+}
+function formatSolidQuadMatrix(entry) {
+  return formatScaledMatrixFromPlan(
+    entry,
+    (entry.canvasW || 1) / SOLID_QUAD_CANONICAL_SIZE,
+    (entry.canvasH || 1) / SOLID_QUAD_CANONICAL_SIZE
+  );
+}
+function isConvexPolygonPoints(points) {
+  if (points.length < 3) return false;
+  let sign = 0;
+  for (let i = 0; i < points.length; i++) {
+    const a = points[i];
+    const b = points[(i + 1) % points.length];
+    const c = points[(i + 2) % points.length];
+    const cross = (b[0] - a[0]) * (c[1] - b[1]) - (b[1] - a[1]) * (c[0] - b[0]);
+    if (Math.abs(cross) <= BASIS_EPS) return false;
+    const nextSign = Math.sign(cross);
+    if (sign === 0) sign = nextSign;
+    else if (nextSign !== sign) return false;
+  }
+  return true;
+}
+function signedArea2D(points) {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const a = points[i];
+    const b = points[(i + 1) % points.length];
+    area += a[0] * b[1] - a[1] * b[0];
+  }
+  return area / 2;
+}
+function intersect2DLines(a0, a1, b0, b1) {
+  const rx = a1[0] - a0[0];
+  const ry = a1[1] - a0[1];
+  const sx = b1[0] - b0[0];
+  const sy = b1[1] - b0[1];
+  const det = rx * sy - ry * sx;
+  if (Math.abs(det) <= BASIS_EPS) return null;
+  const qpx = b0[0] - a0[0];
+  const qpy = b0[1] - a0[1];
+  const t = (qpx * sy - qpy * sx) / det;
+  return [a0[0] + t * rx, a0[1] + t * ry];
+}
+function offsetConvexPolygonPoints(points, amount) {
+  if (points.length < 6 || points.length % 2 !== 0 || amount <= 0) return points;
+  const q = [];
+  for (let i = 0; i < points.length; i += 2) q.push([points[i], points[i + 1]]);
+  if (!isConvexPolygonPoints(q)) return expandClipPoints(points, amount);
+  const area = signedArea2D(q);
+  if (Math.abs(area) <= BASIS_EPS) return expandClipPoints(points, amount);
+  const outwardSign = area > 0 ? 1 : -1;
+  const offsetLines = [];
+  for (let i = 0; i < q.length; i++) {
+    const a = q[i];
+    const b = q[(i + 1) % q.length];
+    const dx = b[0] - a[0];
+    const dy = b[1] - a[1];
+    const length = Math.hypot(dx, dy);
+    if (length <= BASIS_EPS) return expandClipPoints(points, amount);
+    const ox = outwardSign * (dy / length) * amount;
+    const oy = outwardSign * (-dx / length) * amount;
+    offsetLines.push({
+      a: [a[0] + ox, a[1] + oy],
+      b: [b[0] + ox, b[1] + oy]
+    });
+  }
+  const expanded = [];
+  const maxMiter = Math.max(2, amount * 4);
+  for (let i = 0; i < q.length; i++) {
+    const prev = offsetLines[(i + q.length - 1) % q.length];
+    const next = offsetLines[i];
+    const intersection = intersect2DLines(prev.a, prev.b, next.a, next.b);
+    if (!intersection) return expandClipPoints(points, amount);
+    const original = q[i];
+    const dx = intersection[0] - original[0];
+    const dy = intersection[1] - original[1];
+    const miter = Math.hypot(dx, dy);
+    if (miter > maxMiter) {
+      expanded.push(
+        original[0] + dx / miter * maxMiter,
+        original[1] + dy / miter * maxMiter
+      );
+    } else {
+      expanded.push(intersection[0], intersection[1]);
+    }
+  }
+  return expanded;
+}
+function computeProjectiveQuadCoefficients(q) {
+  if (q.length !== 4 || !isConvexPolygonPoints(q)) return null;
+  const [q0, q1, q2, q3] = q;
+  const sx = q0[0] - q1[0] + q2[0] - q3[0];
+  const sy = q0[1] - q1[1] + q2[1] - q3[1];
+  const dx1 = q1[0] - q2[0];
+  const dx2 = q3[0] - q2[0];
+  const dy1 = q1[1] - q2[1];
+  const dy2 = q3[1] - q2[1];
+  const det = dx1 * dy2 - dy1 * dx2;
+  if (Math.abs(det) <= BASIS_EPS) return null;
+  const g = (sx * dy2 - sy * dx2) / det;
+  const h = (dx1 * sy - dy1 * sx) / det;
+  const weights = [1, 1 + g, 1 + g + h, 1 + h];
+  if (weights.some((weight) => !Number.isFinite(weight) || weight <= PROJECTIVE_QUAD_DENOM_EPS)) {
+    return null;
+  }
+  const minWeight = Math.min(...weights);
+  const maxWeight = Math.max(...weights);
+  if (maxWeight / minWeight > PROJECTIVE_QUAD_MAX_WEIGHT_RATIO) return null;
+  return {
+    g,
+    h,
+    w1: 1 + g,
+    w3: 1 + h
+  };
+}
+function computeProjectiveQuadMatrix(screenPts, xAxis, yAxis, normal, tx, ty, tz) {
+  if (screenPts.length !== 8) return null;
+  const rawQ = [
+    [screenPts[0], screenPts[1]],
+    [screenPts[2], screenPts[3]],
+    [screenPts[4], screenPts[5]],
+    [screenPts[6], screenPts[7]]
+  ];
+  if (!computeProjectiveQuadCoefficients(rawQ)) return null;
+  const expandedPts = offsetConvexPolygonPoints(screenPts, PROJECTIVE_QUAD_BLEED);
+  const q = [
+    [expandedPts[0], expandedPts[1]],
+    [expandedPts[2], expandedPts[3]],
+    [expandedPts[4], expandedPts[5]],
+    [expandedPts[6], expandedPts[7]]
+  ];
+  const coeffs = computeProjectiveQuadCoefficients(q);
+  if (!coeffs) return null;
+  const { g, h, w1, w3 } = coeffs;
+  const [q0, q1, , q3] = q;
+  const toCssPoint = ([x, y]) => [
+    tx + x * xAxis[0] + y * yAxis[0],
+    ty + x * xAxis[1] + y * yAxis[1],
+    tz + x * xAxis[2] + y * yAxis[2]
+  ];
+  const p0 = toCssPoint(q0);
+  const p1 = toCssPoint(q1);
+  const p3 = toCssPoint(q3);
+  const xCol = [
+    p1[0] * w1 - p0[0],
+    p1[1] * w1 - p0[1],
+    p1[2] * w1 - p0[2]
+  ];
+  const yCol = [
+    p3[0] * w3 - p0[0],
+    p3[1] * w3 - p0[1],
+    p3[2] * w3 - p0[2]
+  ];
+  const values = [
+    xCol[0],
+    xCol[1],
+    xCol[2],
+    g,
+    yCol[0],
+    yCol[1],
+    yCol[2],
+    h,
+    normal[0],
+    normal[1],
+    normal[2],
+    0,
+    p0[0],
+    p0[1],
+    p0[2],
+    1
+  ];
+  for (let i = 0; i < 8; i += 1) values[i] /= SOLID_QUAD_CANONICAL_SIZE;
+  return values.join(",");
+}
 function cssPoints(vertices, tile, elev) {
   return vertices.map((v) => [v[1] * tile, v[0] * tile, v[2] * elev]);
 }
+function pointKey(point) {
+  return `${point[0]},${point[1]},${point[2]}`;
+}
+function edgeKey(a, b) {
+  const ak = pointKey(a);
+  const bk = pointKey(b);
+  return ak < bk ? `${ak}|${bk}` : `${bk}|${ak}`;
+}
+function buildTextureEdgeRepairSets(polygons) {
+  const edgeOwners = /* @__PURE__ */ new Map();
+  for (let polygonIndex = 0; polygonIndex < polygons.length; polygonIndex++) {
+    const vertices = polygons[polygonIndex].vertices;
+    if (!vertices || vertices.length < 3 || !polygons[polygonIndex].texture) continue;
+    for (let edgeIndex = 0; edgeIndex < vertices.length; edgeIndex++) {
+      const key = edgeKey(vertices[edgeIndex], vertices[(edgeIndex + 1) % vertices.length]);
+      const owner = { polygon: polygonIndex, edge: edgeIndex };
+      const owners = edgeOwners.get(key);
+      if (owners) owners.push(owner);
+      else edgeOwners.set(key, [owner]);
+    }
+  }
+  const repairEdges = polygons.map(() => /* @__PURE__ */ new Set());
+  for (const owners of edgeOwners.values()) {
+    if (owners.length < 2) continue;
+    for (let i = 0; i < owners.length; i++) {
+      for (let j = i + 1; j < owners.length; j++) {
+        repairEdges[owners[i].polygon].add(owners[i].edge);
+        repairEdges[owners[j].polygon].add(owners[j].edge);
+      }
+    }
+  }
+  return repairEdges.map((edges) => edges.size > 0 ? edges : void 0);
+}
 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 p0 = pts[0];
+  const normal = [0, 0, 0];
+  for (let i = 1; i + 1 < pts.length; i++) {
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    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]];
+    normal[0] -= e1[1] * e2[2] - e1[2] * e2[1];
+    normal[1] -= e1[2] * e2[0] - e1[0] * e2[2];
+    normal[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];
@@ -757,7 +1337,7 @@ function crossVec(a, b) {
     a[0] * b[1] - a[1] * b[0]
   ];
 }
-function solidTriangleStyle(entry, textureLighting, pointerEvents) {
+function solidTriangleStyle(entry, textureLighting, pointerEvents, solidPaintDefaults) {
   if (!isSolidTrianglePlan(entry)) return null;
   const pts = cssPoints(entry.polygon.vertices, entry.tileSize, entry.layerElevation);
   const normal = computeSurfaceNormal(pts);
@@ -841,47 +1421,89 @@ function solidTriangleStyle(entry, textureLighting, pointerEvents) {
   }
   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],
+  const expanded = offsetConvexPolygonPoints([
+    left,
     0,
-    normal[0],
-    normal[1],
-    normal[2],
     0,
-    tx,
-    ty,
-    tz,
-    1
-  ]);
+    height,
+    left + right,
+    height
+  ], SOLID_TRIANGLE_BLEED);
+  const apex2 = [expanded[0], expanded[1]];
+  const baseLeft2 = [expanded[2], expanded[3]];
+  const baseRight2 = [expanded[4], expanded[5]];
+  const baseY = (baseLeft2[1] + baseRight2[1]) / 2;
+  const leftPx = apex2[0] - baseLeft2[0];
+  const rightPx = baseRight2[0] - apex2[0];
+  const heightPx = baseY - apex2[1];
+  if (leftPx <= BASIS_EPS || rightPx <= BASIS_EPS || heightPx <= BASIS_EPS || !Number.isFinite(leftPx + rightPx + heightPx)) {
+    return null;
+  }
   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,
+  const useDefaultDynamicColor = dynamic && rgbKey(base) === solidPaintDefaults?.dynamicColorKey;
+  const sharedStyle = {
+    color: dynamic || entry.shadedColor === solidPaintDefaults?.paintColor ? void 0 : entry.shadedColor,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
-    ...dynamic ? {
+    ...dynamic && !useDefaultDynamicColor ? {
       ["--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)
+    } : dynamic ? {
+      ["--pnx"]: normal[0].toFixed(4),
+      ["--pny"]: normal[1].toFixed(4),
+      ["--pnz"]: normal[2].toFixed(4)
     } : null
   };
+  const worldPoint = ([x, y]) => [
+    cv[0] + (x - left) * xAxis[0] + y * yAxis[0],
+    cv[1] + (x - left) * xAxis[1] + y * yAxis[1],
+    cv[2] + (x - left) * xAxis[2] + y * yAxis[2]
+  ];
+  const apex = worldPoint(apex2);
+  const baseLeft = worldPoint([baseLeft2[0], baseY]);
+  const baseRight = worldPoint([baseRight2[0], baseY]);
+  const halfBase = SOLID_TRIANGLE_CANONICAL_SIZE / 2;
+  const xCol = [
+    (baseRight[0] - baseLeft[0]) / SOLID_TRIANGLE_CANONICAL_SIZE,
+    (baseRight[1] - baseLeft[1]) / SOLID_TRIANGLE_CANONICAL_SIZE,
+    (baseRight[2] - baseLeft[2]) / SOLID_TRIANGLE_CANONICAL_SIZE
+  ];
+  const txCol = [
+    apex[0] - xCol[0] * halfBase,
+    apex[1] - xCol[1] * halfBase,
+    apex[2] - xCol[2] * halfBase
+  ];
+  const yCol = [
+    (baseLeft[0] - txCol[0]) / SOLID_TRIANGLE_CANONICAL_SIZE,
+    (baseLeft[1] - txCol[1]) / SOLID_TRIANGLE_CANONICAL_SIZE,
+    (baseLeft[2] - txCol[2]) / SOLID_TRIANGLE_CANONICAL_SIZE
+  ];
+  const canonicalMatrix = formatMatrix3dValues([
+    xCol[0],
+    xCol[1],
+    xCol[2],
+    0,
+    yCol[0],
+    yCol[1],
+    yCol[2],
+    0,
+    normal[0],
+    normal[1],
+    normal[2],
+    0,
+    txCol[0],
+    txCol[1],
+    txCol[2],
+    1
+  ]);
+  return {
+    transform: `matrix3d(${canonicalMatrix})`,
+    ...sharedStyle
+  };
 }
 function rgbToHex({ r, g, b }) {
   const f = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
@@ -1024,6 +1646,15 @@ function expandClipPoints(points, amount) {
   }
   return expanded;
 }
+function tracePolygonPath(ctx, x, y, points) {
+  for (let i = 0; i < points.length; i += 2) {
+    const px = x + points[i];
+    const py = y + points[i + 1];
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  }
+  ctx.closePath();
+}
 function canvasToUrl(canvas) {
   if (typeof canvas.toBlob === "function") {
     return new Promise((resolve) => {
@@ -1067,6 +1698,176 @@ function drawImageUvSample(ctx, img, rect, x, y, width, height, atlasScale) {
   setCssTransform(ctx, atlasScale);
   ctx.drawImage(img, sx, sy, sw, sh, x, y, width, height);
 }
+function traceOffsetPolygonPath(ctx, x, y, points, offsetX, offsetY) {
+  for (let i = 0; i < points.length; i += 2) {
+    const px = x + points[i] + offsetX;
+    const py = y + points[i + 1] + offsetY;
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  }
+  ctx.closePath();
+}
+function drawTexturedAtlasEntry(ctx, entry, srcImg, atlasScale, offsetX = 0, offsetY = 0) {
+  if (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();
+      traceOffsetPolygonPath(ctx, entry.x, entry.y, clipPts, offsetX, offsetY);
+      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 + offsetX,
+          entry.y + triangle.uvAffine.f + offsetY
+        );
+        ctx.drawImage(srcImg, 0, 0);
+      } else if (triangle.uvSampleRect) {
+        drawImageUvSample(
+          ctx,
+          srcImg,
+          triangle.uvSampleRect,
+          entry.x + offsetX,
+          entry.y + offsetY,
+          entry.canvasW,
+          entry.canvasH,
+          atlasScale
+        );
+      }
+      ctx.restore();
+    }
+  } else if (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 + offsetX,
+      entry.y + entry.uvAffine.f + offsetY
+    );
+    ctx.drawImage(srcImg, 0, 0);
+  } else if (entry.uvSampleRect) {
+    drawImageUvSample(
+      ctx,
+      srcImg,
+      entry.uvSampleRect,
+      entry.x + offsetX,
+      entry.y + offsetY,
+      entry.canvasW,
+      entry.canvasH,
+      atlasScale
+    );
+  } else {
+    drawImageCover(
+      ctx,
+      srcImg,
+      entry.x + offsetX,
+      entry.y + offsetY,
+      entry.canvasW,
+      entry.canvasH,
+      atlasScale
+    );
+  }
+}
+function distanceToSegment(px, py, ax, ay, bx, by) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq <= BASIS_EPS) return Math.hypot(px - ax, py - ay);
+  const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lenSq));
+  return Math.hypot(px - (ax + dx * t), py - (ay + dy * t));
+}
+function distanceToPolygonEdges(px, py, points, edgeIndices) {
+  let best = Infinity;
+  const count = points.length / 2;
+  for (const edgeIndex of edgeIndices) {
+    if (edgeIndex < 0 || edgeIndex >= count) continue;
+    const i = edgeIndex * 2;
+    const next = (edgeIndex + 1) % count * 2;
+    best = Math.min(
+      best,
+      distanceToSegment(px, py, points[i], points[i + 1], points[next], points[next + 1])
+    );
+  }
+  return best;
+}
+function nearestOpaquePixelOffset(data, width, height, x, y, radius) {
+  const minX = Math.max(0, x - radius);
+  const maxX = Math.min(width - 1, x + radius);
+  const minY = Math.max(0, y - radius);
+  const maxY = Math.min(height - 1, y + radius);
+  let bestOffset = null;
+  let bestDistanceSq = Infinity;
+  for (let yy = minY; yy <= maxY; yy++) {
+    for (let xx = minX; xx <= maxX; xx++) {
+      if (xx === x && yy === y) continue;
+      const dx = xx - x;
+      const dy = yy - y;
+      const distanceSq = dx * dx + dy * dy;
+      if (distanceSq > radius * radius || distanceSq >= bestDistanceSq) continue;
+      const offset = (yy * width + xx) * 4;
+      if (data[offset + 3] < TEXTURE_EDGE_REPAIR_SOURCE_ALPHA_MIN) continue;
+      bestOffset = offset;
+      bestDistanceSq = distanceSq;
+    }
+  }
+  return bestOffset;
+}
+function repairTextureEdgeAlpha(ctx, entry, atlasScale) {
+  if (!entry.textureEdgeRepair || !entry.texture) return;
+  if (!entry.textureEdgeRepairEdges || entry.textureEdgeRepairEdges.size === 0) return;
+  const canvas = ctx.canvas;
+  if (!canvas) return;
+  const pixelX = Math.max(0, Math.floor(entry.x * atlasScale));
+  const pixelY = Math.max(0, Math.floor(entry.y * atlasScale));
+  const pixelW = Math.max(1, Math.min(canvas.width - pixelX, Math.ceil(entry.canvasW * atlasScale)));
+  const pixelH = Math.max(1, Math.min(canvas.height - pixelY, Math.ceil(entry.canvasH * atlasScale)));
+  if (pixelW <= 0 || pixelH <= 0) return;
+  let imageData;
+  try {
+    imageData = ctx.getImageData(pixelX, pixelY, pixelW, pixelH);
+  } catch {
+    return;
+  }
+  const data = imageData.data;
+  const source = new Uint8ClampedArray(data);
+  const radius = Math.max(TEXTURE_EDGE_REPAIR_RADIUS, TEXTURE_EDGE_REPAIR_RADIUS / atlasScale);
+  const sourceRadius = Math.max(2, Math.ceil(radius * atlasScale) + 1);
+  let changed = false;
+  for (let y = 0; y < pixelH; y++) {
+    for (let x = 0; x < pixelW; x++) {
+      const offset = (y * pixelW + x) * 4;
+      const alpha = data[offset + 3];
+      if (alpha < TEXTURE_EDGE_REPAIR_ALPHA_MIN || alpha === 255) continue;
+      const localX = (pixelX + x + 0.5) / atlasScale - entry.x;
+      const localY = (pixelY + y + 0.5) / atlasScale - entry.y;
+      if (distanceToPolygonEdges(localX, localY, entry.screenPts, entry.textureEdgeRepairEdges) > radius) {
+        continue;
+      }
+      const sourceOffset = nearestOpaquePixelOffset(source, pixelW, pixelH, x, y, sourceRadius);
+      if (sourceOffset === null) continue;
+      data[offset] = source[sourceOffset];
+      data[offset + 1] = source[sourceOffset + 1];
+      data[offset + 2] = source[sourceOffset + 2];
+      data[offset + 3] = 255;
+      changed = true;
+    }
+  }
+  if (!changed) return;
+  ctx.putImageData(imageData, pixelX, pixelY);
+}
 function computeTextureAtlasPlan(polygon, index, options = {}) {
   const { vertices, texture, uvs } = polygon;
   if (!vertices || vertices.length < 3) return null;
@@ -1113,18 +1914,20 @@ function computeTextureAtlasPlan(polygon, index, options = {}) {
     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 textureEdgeRepairEdges = texture && options.textureEdgeRepairEdges?.size ? options.textureEdgeRepairEdges : null;
+  const textureEdgeRepair = Boolean(texture && textureEdgeRepairEdges);
+  const shiftX = -xMin;
+  const shiftY = -yMin;
   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);
+    screenPts.push(x + shiftX, y + shiftY);
   }
+  const canvasW = Math.max(1, Math.ceil(w));
+  const canvasH = Math.max(1, Math.ceil(h));
   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];
@@ -1146,6 +1949,44 @@ function computeTextureAtlasPlan(polygon, index, options = {}) {
     tz,
     1
   ].join(",");
+  const canonicalMatrix = [
+    xAxis[0] * canvasW,
+    xAxis[1] * canvasW,
+    xAxis[2] * canvasW,
+    0,
+    yAxis[0] * canvasH,
+    yAxis[1] * canvasH,
+    yAxis[2] * canvasH,
+    0,
+    nx,
+    ny,
+    nz,
+    0,
+    tx,
+    ty,
+    tz,
+    1
+  ].join(",");
+  const atlasMatrix = [
+    xAxis[0] * canvasW / ATLAS_CANONICAL_SIZE_EXPLICIT,
+    xAxis[1] * canvasW / ATLAS_CANONICAL_SIZE_EXPLICIT,
+    xAxis[2] * canvasW / ATLAS_CANONICAL_SIZE_EXPLICIT,
+    0,
+    yAxis[0] * canvasH / ATLAS_CANONICAL_SIZE_EXPLICIT,
+    yAxis[1] * canvasH / ATLAS_CANONICAL_SIZE_EXPLICIT,
+    yAxis[2] * canvasH / ATLAS_CANONICAL_SIZE_EXPLICIT,
+    0,
+    nx,
+    ny,
+    nz,
+    0,
+    tx,
+    ty,
+    tz,
+    1
+  ].join(",");
+  const normal = [nx, ny, nz];
+  const projectiveMatrix = !texture && vertices.length === 4 ? computeProjectiveQuadMatrix(screenPts, xAxis, yAxis, normal, tx, ty, tz) : null;
   const directionalCfg = options.directionalLight;
   const ambientCfg = options.ambientLight;
   const lightDir = directionalCfg?.direction ?? DEFAULT_LIGHT_DIR;
@@ -1177,13 +2018,18 @@ function computeTextureAtlasPlan(polygon, index, options = {}) {
     tileSize: tile,
     layerElevation: elev,
     matrix,
-    canvasW: Math.max(1, Math.ceil(w)),
-    canvasH: Math.max(1, Math.ceil(h)),
+    canonicalMatrix,
+    atlasMatrix,
+    projectiveMatrix,
+    canvasW,
+    canvasH,
     screenPts,
     uvAffine,
     uvSampleRect,
     textureTriangles,
-    normal: [nx, ny, nz],
+    textureEdgeRepairEdges,
+    textureEdgeRepair,
+    normal,
     textureTint,
     shadedColor
   };
@@ -1267,7 +2113,10 @@ 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");
+  const needsReadback = page.entries.some(
+    (entry) => entry.textureEdgeRepair && entry.texture && entry.textureEdgeRepairEdges && entry.textureEdgeRepairEdges.size > 0
+  );
+  const ctx = canvas.getContext("2d", needsReadback ? { willReadFrequently: true } : void 0);
   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] : [])
@@ -1278,97 +2127,36 @@ async function buildAtlasPage(page, textureLighting, doc, atlasScale) {
   }));
   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) {
+      ctx.save();
       setCssTransform(ctx, atlasScale);
+      ctx.beginPath();
+      tracePolygonPath(ctx, entry.x, entry.y, entry.screenPts);
+      ctx.clip();
       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);
-      }
+      ctx.restore();
+      continue;
+    }
+    if (srcImg) {
+      ctx.save();
+      setCssTransform(ctx, atlasScale);
+      ctx.beginPath();
+      tracePolygonPath(ctx, entry.x, entry.y, entry.screenPts);
+      ctx.clip();
+      drawTexturedAtlasEntry(ctx, entry, srcImg, atlasScale);
+      ctx.restore();
     }
     if (entry.texture && textureLighting === "baked") {
+      ctx.save();
+      setCssTransform(ctx, atlasScale);
+      ctx.beginPath();
+      tracePolygonPath(ctx, entry.x, entry.y, entry.screenPts);
+      ctx.clip();
       applyTextureTint(ctx, entry.x, entry.y, entry.canvasW, entry.canvasH, entry.textureTint, atlasScale);
+      ctx.restore();
     }
-    ctx.restore();
+    repairTextureEdgeAlpha(ctx, entry, atlasScale);
   }
   const url = await canvasToUrl(canvas);
   canvas.width = 1;
@@ -1387,21 +2175,32 @@ async function buildAtlasPages(pages, textureLighting, doc, atlasScale, isCancel
   }
   return built;
 }
-function useTextureAtlas(plans, textureLighting, atlasScaleInput) {
-  const useBorderShape = textureLighting !== "dynamic" && borderShapeSupported();
+function useTextureAtlas(plans, textureLighting, textureQualityInput, strategies) {
+  const disableB = strategies?.disable?.includes("b") ?? false;
+  const disableI = strategies?.disable?.includes("i") ?? false;
+  const disableU = strategies?.disable?.includes("u") ?? false;
+  const useFullRectSolid = !disableB;
+  const useProjectiveQuad = useFullRectSolid;
+  const useStableTriangle = !disableU && solidTriangleSupported();
+  const useBorderShape = !disableI && textureLighting !== "dynamic" && borderShapeSupported();
   const atlasPlans = (0, import_react7.useMemo)(
     () => 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;
+      if (useStableTriangle && isSolidTrianglePlan(plan)) return null;
+      const fullRect = isFullRectSolid(plan);
+      if (useFullRectSolid && fullRect || useProjectiveQuad && isProjectiveQuadPlan(plan) || textureLighting !== "dynamic" && useBorderShape && (!fullRect || disableB)) return null;
       return plan;
     }),
-    [plans, textureLighting, useBorderShape]
+    [plans, textureLighting, useFullRectSolid, useProjectiveQuad, useStableTriangle, useBorderShape]
   );
   const { packed, atlasScale } = (0, import_react7.useMemo)(
-    () => packTextureAtlasPlansWithScale(atlasPlans, atlasScaleInput),
-    [atlasPlans, atlasScaleInput]
+    () => packTextureAtlasPlansWithScale(
+      atlasPlans,
+      textureQualityInput,
+      typeof document !== "undefined" ? document : null
+    ),
+    [atlasPlans, textureQualityInput]
   );
   const [pages, setPages] = (0, import_react7.useState)(
     () => packed.pages.map((page) => ({ width: page.width, height: page.height, url: null }))
@@ -1441,31 +2240,34 @@ function useTextureAtlas(plans, textureLighting, atlasScaleInput) {
 }
 function TextureBorderShapePoly({
   entry,
+  solidPaintDefaults,
   className,
   style: styleProp,
   domAttrs,
   domEventHandlers,
-  pointerEvents = "auto"
+  pointerEvents = "auto",
+  disabledStrategies
 }) {
   const fullRect = isFullRectSolid(entry);
-  const borderShape = fullRect ? null : cssBorderShapeForPlan(entry);
+  const bDisabled = disabledStrategies?.has("b") ?? false;
+  const useIForFullRect = bDisabled && borderShapeSupported();
+  const borderShape = !fullRect || useIForFullRect ? cssBorderShapeForPlan(entry) : null;
+  const useDefaultPaint = entry.shadedColor === solidPaintDefaults?.paintColor;
   const setElementRef = (0, import_react7.useCallback)((el) => {
     if (!el) return;
     if (borderShape) el.style.setProperty("border-shape", borderShape);
     else el.style.removeProperty("border-shape");
+    orderBrushInlineStyle(el);
   }, [borderShape]);
+  const transform = formatMatrix3d(borderShape ? formatBorderShapeMatrix(entry) : formatSolidQuadMatrix(entry));
   const style = fullRect ? {
-    width: entry.canvasW,
-    height: entry.canvasH,
-    transform: formatMatrix3d(entry.matrix),
-    background: entry.shadedColor,
+    transform,
+    color: useDefaultPaint ? void 0 : entry.shadedColor,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
     ...styleProp
   } : {
-    width: entry.canvasW,
-    height: entry.canvasH,
-    transform: formatMatrix3d(entry.matrix),
-    color: entry.shadedColor,
+    transform,
+    color: useDefaultPaint ? void 0 : entry.shadedColor,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
     ...styleProp
   };
@@ -1473,7 +2275,7 @@ function TextureBorderShapePoly({
     Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
   ) : {};
   const elementClassName = className?.trim() || void 0;
-  if (fullRect) {
+  if (fullRect && !useIForFullRect) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "b",
       {
@@ -1497,16 +2299,63 @@ function TextureBorderShapePoly({
     }
   );
 }
+function TextureProjectiveSolidPoly({
+  entry,
+  textureLighting,
+  solidPaintDefaults,
+  className,
+  style: styleProp,
+  domAttrs,
+  domEventHandlers,
+  pointerEvents = "auto"
+}) {
+  const dynamic = textureLighting === "dynamic";
+  const base = parseHex(entry.polygon.color ?? "#cccccc");
+  const useDefaultDynamicColor = dynamic && rgbKey(base) === solidPaintDefaults?.dynamicColorKey;
+  const style = {
+    transform: formatMatrix3d(entry.projectiveMatrix),
+    color: dynamic || entry.shadedColor === solidPaintDefaults?.paintColor ? void 0 : entry.shadedColor,
+    pointerEvents: pointerEvents === "none" ? "none" : void 0,
+    ...dynamic && !useDefaultDynamicColor ? {
+      ["--pnx"]: entry.normal[0].toFixed(4),
+      ["--pny"]: entry.normal[1].toFixed(4),
+      ["--pnz"]: entry.normal[2].toFixed(4),
+      ["--psr"]: (base.r / 255).toFixed(4),
+      ["--psg"]: (base.g / 255).toFixed(4),
+      ["--psb"]: (base.b / 255).toFixed(4)
+    } : dynamic ? {
+      ["--pnx"]: entry.normal[0].toFixed(4),
+      ["--pny"]: entry.normal[1].toFixed(4),
+      ["--pnz"]: entry.normal[2].toFixed(4)
+    } : null,
+    ...styleProp
+  };
+  const dataAttrs = entry.polygon.data ? Object.fromEntries(
+    Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
+  ) : {};
+  const elementClassName = className?.trim() || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "b",
+    {
+      className: elementClassName,
+      style,
+      ...domEventHandlers,
+      ...dataAttrs,
+      ...domAttrs
+    }
+  );
+}
 function TextureTrianglePoly({
   entry,
   textureLighting,
+  solidPaintDefaults,
   className,
   style: styleProp,
   domAttrs,
   domEventHandlers,
   pointerEvents = "auto"
 }) {
-  const triangleStyle = solidTriangleStyle(entry, textureLighting, pointerEvents);
+  const triangleStyle = solidTriangleStyle(entry, textureLighting, pointerEvents, solidPaintDefaults);
   if (!triangleStyle) return null;
   const dataAttrs = entry.polygon.data ? Object.fromEntries(
     Object.entries(entry.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
@@ -1534,16 +2383,20 @@ function TextureAtlasPoly({
   pointerEvents = "auto"
 }) {
   const dynamic = textureLighting === "dynamic";
+  const atlasCanonicalSize = entry.atlasCanonicalSize ?? ATLAS_CANONICAL_SIZE_EXPLICIT;
+  const atlasWidth = entry.canvasW || 1;
+  const atlasHeight = entry.canvasH || 1;
+  const atlasPosition = page ? `${formatCssLength(-entry.x / atlasWidth * atlasCanonicalSize)} ${formatCssLength(-entry.y / atlasHeight * atlasCanonicalSize)}` : void 0;
+  const atlasSize = page ? `${formatCssLength(page.width / atlasWidth * atlasCanonicalSize)} ${formatCssLength(page.height / atlasHeight * atlasCanonicalSize)}` : void 0;
   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 background = !dynamic && page?.url ? `url(${page.url}) ${atlasPosition} / ${atlasSize} no-repeat` : void 0;
   const style = {
-    width: entry.canvasW,
-    height: entry.canvasH,
-    transform: formatMatrix3d(entry.matrix),
+    transform: formatMatrix3d(entry.atlasMatrix),
+    ["--polycss-atlas-size"]: `${atlasCanonicalSize}px`,
     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,
+    backgroundPosition: dynamic ? atlasPosition : void 0,
+    backgroundSize: dynamic ? atlasSize : void 0,
     ...dynamic ? {
       ["--pnx"]: entry.normal[0].toFixed(4),
       ["--pny"]: entry.normal[1].toFixed(4),
@@ -1554,12 +2407,12 @@ function TextureAtlasPoly({
       // 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,
+      maskPosition: atlasPosition,
+      maskSize: atlasSize,
       maskRepeat: "no-repeat",
       WebkitMaskImage: dynamicMask,
-      WebkitMaskPosition: `-${entry.x}px -${entry.y}px`,
-      WebkitMaskSize: page ? `${page.width}px ${page.height}px` : void 0,
+      WebkitMaskPosition: atlasPosition,
+      WebkitMaskSize: atlasSize,
       WebkitMaskRepeat: "no-repeat"
     } : null,
     opacity: page?.url ? void 0 : 0,
@@ -1601,8 +2454,10 @@ function PolySceneInner({
   directionalLight,
   ambientLight,
   textureLighting = "baked",
-  atlasScale,
+  textureQuality,
+  strategies,
   autoCenter = false,
+  shadow,
   className,
   style,
   children,
@@ -1646,14 +2501,6 @@ function PolySceneInner({
     { directionalLight }
   );
   const sceneBbox = centerInputPolygons ? centerSceneBbox : renderSceneBbox;
-  const sceneStyle = (0, import_react9.useMemo)(() => {
-    const handle = (0, import_polycss_core4.createIsometricCamera)(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 = (0, import_react9.useMemo)(() => {
@@ -1666,11 +2513,43 @@ function PolySceneInner({
       textureLighting
     };
   }, [directionalForAtlas, ambientForAtlas, textureLighting]);
+  const autoCenterOffset = (0, import_react9.useMemo)(() => {
+    if (!autoCenter) return [0, 0, 0];
+    return [
+      (sceneBbox.min[0] + sceneBbox.max[0]) / 2,
+      (sceneBbox.min[1] + sceneBbox.max[1]) / 2,
+      (sceneBbox.min[2] + sceneBbox.max[2]) / 2
+    ];
+  }, [autoCenter, sceneBbox]);
+  (0, import_react9.useEffect)(() => {
+    store.setAutoCenterOffset(autoCenterOffset);
+  }, [store, autoCenterOffset]);
+  const sceneStyle = (0, import_react9.useMemo)(() => {
+    const s = cameraState;
+    const [ox, oy, oz] = autoCenterOffset;
+    const tileSize = import_polycss_core4.BASE_TILE;
+    const wx = s.target[0] + ox;
+    const wy = s.target[1] + oy;
+    const wz = s.target[2] + oz;
+    const cssX = wy * tileSize;
+    const cssY = wx * tileSize;
+    const cssZ = wz * tileSize;
+    const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
+    const transform = `${distancePart}scale(${s.zoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+    return { transform };
+  }, [cameraState, autoCenterOffset]);
+  const computedClassName = `polycss-scene${className ? ` ${className}` : ""}`;
   const textureAtlasPlans = (0, import_react9.useMemo)(
-    () => polygons.map((p, i) => computeTextureAtlasPlan(p, i, polyContext)),
+    () => {
+      const repairEdges = buildTextureEdgeRepairSets(polygons);
+      return polygons.map((p, i) => computeTextureAtlasPlan(p, i, {
+        ...polyContext,
+        textureEdgeRepairEdges: repairEdges[i]
+      }));
+    },
     [polygons, polyContext]
   );
-  const textureAtlas = useTextureAtlas(textureAtlasPlans, textureLighting, atlasScale);
+  const textureAtlas = useTextureAtlas(textureAtlasPlans, textureLighting, textureQuality, strategies);
   const dynamicLightVars = (0, import_react9.useMemo)(() => {
     if (textureLighting !== "dynamic") return null;
     const dir = directionalLight?.direction ?? [0.4, -0.7, 0.59];
@@ -1681,6 +2560,8 @@ function PolySceneInner({
     const lightIntensity = directionalLight?.intensity ?? 1;
     const ambientIntensity = ambientLight?.intensity ?? 0.4;
     const ch = (n) => (n / 255).toFixed(4);
+    const rawClz = lz;
+    const clz = Math.sign(rawClz || 1) * Math.max(Math.abs(rawClz), 0.01);
     return {
       ["--plx"]: lx.toFixed(4),
       ["--ply"]: ly.toFixed(4),
@@ -1692,16 +2573,52 @@ function PolySceneInner({
       ["--par"]: ch(ambRgb[0]),
       ["--pag"]: ch(ambRgb[1]),
       ["--pab"]: ch(ambRgb[2]),
-      ["--pai"]: ambientIntensity.toFixed(4)
+      ["--pai"]: ambientIntensity.toFixed(4),
+      ["--clx"]: lx.toFixed(4),
+      ["--cly"]: ly.toFixed(4),
+      ["--clz"]: clz.toFixed(4)
     };
   }, [textureLighting, directionalLight, ambientLight]);
-  const autoCenterTransform = (0, import_react9.useMemo)(() => {
-    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 shadowCastersRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const registerShadowCaster = (0, import_react9.useCallback)((meshId, meshPolygons) => {
+    if (meshPolygons === null) {
+      shadowCastersRef.current.delete(meshId);
+    } else {
+      shadowCastersRef.current.set(meshId, meshPolygons);
+    }
+    const el = sceneElRef.current;
+    if (!el) return;
+    if (textureLighting !== "dynamic") {
+      el.style.removeProperty("--shadow-ground-cssz");
+      return;
+    }
+    let minWorldZ = Infinity;
+    for (const polys of shadowCastersRef.current.values()) {
+      for (const poly of polys) {
+        for (const v of poly.vertices) {
+          if (v[2] < minWorldZ) minWorldZ = v[2];
+        }
+      }
+    }
+    if (!Number.isFinite(minWorldZ)) {
+      el.style.removeProperty("--shadow-ground-cssz");
+      return;
+    }
+    const lift = shadow?.lift ?? 0.05;
+    const groundCssZ = (minWorldZ + lift) * import_polycss_core4.BASE_TILE;
+    el.style.setProperty("--shadow-ground-cssz", groundCssZ.toFixed(3));
+  }, [sceneElRef, textureLighting, shadow]);
+  (0, import_react9.useEffect)(() => {
+    const el = sceneElRef.current;
+    if (!el) return;
+    if (textureLighting !== "dynamic") {
+      el.style.removeProperty("--shadow-ground-cssz");
+    }
+  }, [textureLighting, sceneElRef]);
+  const disabledStrategies = (0, import_react9.useMemo)(
+    () => strategies?.disable?.length ? new Set(strategies.disable) : void 0,
+    [strategies]
+  );
   const polyChildren = textureAtlas.entries.map((entry, index) => {
     if (entry) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1716,13 +2633,21 @@ function PolySceneInner({
     }
     const plan = textureAtlasPlans[index];
     if (!plan || plan.texture) return null;
-    return isSolidTrianglePlan(plan) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextureTrianglePoly, { entry: plan, textureLighting }, plan.index) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextureBorderShapePoly, { entry: plan }, plan.index);
+    const useU = !disabledStrategies?.has("u");
+    const useProjectiveSolid = !disabledStrategies?.has("b");
+    if (useU && isSolidTrianglePlan(plan)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextureTrianglePoly, { entry: plan, textureLighting }, plan.index);
+    }
+    if (useProjectiveSolid && isProjectiveQuadPlan(plan)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextureProjectiveSolidPoly, { entry: plan, textureLighting }, plan.index);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextureBorderShapePoly, { entry: plan, disabledStrategies }, plan.index);
   });
   const sceneCtxValue = (0, import_react9.useMemo)(
-    () => ({ textureLighting, directionalLight, ambientLight }),
-    [textureLighting, directionalLight, ambientLight]
+    () => ({ textureLighting, directionalLight, ambientLight, shadow, registerShadowCaster }),
+    [textureLighting, directionalLight, ambientLight, shadow, registerShadowCaster]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PolySceneContext.Provider, { value: sceneCtxValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref: localSceneRef,
@@ -1736,13 +2661,10 @@ function PolySceneInner({
         // No more --polycss-rows / --polycss-cols — CSS Grid was dropped
         // in Phase 4 (per §Design.4a).
       },
-      children: autoCenterTransform ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "polycss-offset", style: { ["--offset-transform"]: autoCenterTransform }, children: [
-        polyChildren,
-        children
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      children: [
         polyChildren,
         children
-      ] })
+      ]
     }
   ) });
 }
@@ -1881,11 +2803,17 @@ function findMeshUnderPoint(clientX, clientY, filter) {
 }
 
 // src/scene/PolyMesh.tsx
-var import_jsx_runtime5 = (
-  // Render-prop: caller controls how each polygon renders. We still
-  // wrap in a fragment with key so React reconciliation works.
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function solidPaintVars(defaults) {
+  const out = {};
+  if (defaults.paintColor) out["--polycss-paint"] = defaults.paintColor;
+  if (defaults.dynamicColor) {
+    out["--psr"] = (defaults.dynamicColor.r / 255).toFixed(4);
+    out["--psg"] = (defaults.dynamicColor.g / 255).toFixed(4);
+    out["--psb"] = (defaults.dynamicColor.b / 255).toFixed(4);
+  }
+  return Object.keys(out).length > 0 ? out : null;
+}
 function buildTransform(position, scale, rotation) {
   const parts = [];
   if (position) {
@@ -1931,7 +2859,8 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
   polygons: polygonsProp,
   autoCenter,
   textureLighting,
-  atlasScale,
+  textureQuality,
+  castShadow,
   children,
   fallback,
   errorFallback,
@@ -1959,12 +2888,43 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
     return { ...parseOptions ?? {}, ...mtl ? { mtlUrl: mtl } : {} };
   }, [mtl, parseOptions]);
   const fetched = usePolyMesh(src ?? "", mergedOptions);
-  const sourcePolygons = src ? fetched.polygons : polygonsProp ?? [];
+  const externalPolygons = src ? fetched.polygons : polygonsProp ?? [];
+  const [localPolygons, setLocalPolygons] = (0, import_react11.useState)(null);
+  const prevExternalRef = (0, import_react11.useRef)(externalPolygons);
+  if (prevExternalRef.current !== externalPolygons) {
+    prevExternalRef.current = externalPolygons;
+    if (localPolygons !== null) setLocalPolygons(null);
+  }
+  const sourcePolygons = localPolygons ?? externalPolygons;
+  const hasRenderProp = typeof children === "function";
+  const renderPolygon = hasRenderProp ? children : null;
+  const staticChildren = hasRenderProp ? null : children;
   const polygons = (0, import_react11.useMemo)(
     () => autoCenter ? recenterPolygons(sourcePolygons) : sourcePolygons,
     [sourcePolygons, autoCenter]
   );
   const transform = buildTransform(position, scale, rotation);
+  const transformOrigin = (0, import_react11.useMemo)(() => {
+    if (polygons.length === 0) return void 0;
+    let minX = Infinity, minY = Infinity, minZ = Infinity;
+    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+    for (const poly of polygons) {
+      for (const v of poly.vertices) {
+        if (v[0] < minX) minX = v[0];
+        if (v[0] > maxX) maxX = v[0];
+        if (v[1] < minY) minY = v[1];
+        if (v[1] > maxY) maxY = v[1];
+        if (v[2] < minZ) minZ = v[2];
+        if (v[2] > maxZ) maxZ = v[2];
+      }
+    }
+    if (!Number.isFinite(minX)) return void 0;
+    const tile = 50;
+    const x = (minY + maxY) / 2 * tile;
+    const y = (minX + maxX) / 2 * tile;
+    const z = (minZ + maxZ) / 2 * tile;
+    return `${x}px ${y}px ${z}px`;
+  }, [polygons]);
   const wrapperRef = (0, import_react11.useRef)(null);
   const propsRef = (0, import_react11.useRef)({ position, scale, rotation });
   propsRef.current = { position, scale, rotation };
@@ -1980,7 +2940,14 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
     getRotation: () => propsRef.current.rotation,
     getScale: () => propsRef.current.scale,
     getPolygons: () => polygonsRef.current,
-    rebakeAtlas: () => setBakedRotation(propsRef.current.rotation)
+    rebakeAtlas: () => setBakedRotation(propsRef.current.rotation),
+    updatePolygon(target, partial) {
+      const current = polygonsRef.current;
+      const idx = typeof target === "number" ? target : current.indexOf(target);
+      if (idx < 0 || idx >= current.length) return;
+      Object.assign(current[idx], partial);
+      setLocalPolygons([...current]);
+    }
   }), [id]);
   (0, import_react11.useImperativeHandle)(forwardedRef, () => handle, [handle]);
   (0, import_react11.useEffect)(() => {
@@ -2130,11 +3097,6 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
       ["--plz"]: (localDir[2] / len).toFixed(4)
     };
   }, [effectiveTextureLighting, rotation, sceneDirectionalLight]);
-  const wrapperStyle = {
-    transform,
-    ...dynamicLightOverride,
-    ...style
-  };
   const bakedDirectional = (0, import_react11.useMemo)(() => {
     if (!effectiveDirectional) return effectiveDirectional;
     const rot = bakedRotation ?? [0, 0, 0];
@@ -2145,18 +3107,85 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
     };
   }, [effectiveDirectional, bakedRotation]);
   const atlasPlans = (0, import_react11.useMemo)(
-    () => !children ? polygons.map((p, i) => computeTextureAtlasPlan(p, i, {
-      directionalLight: bakedDirectional,
-      ambientLight: effectiveAmbient
-    })) : [],
-    [children, polygons, bakedDirectional, effectiveAmbient]
+    () => {
+      if (renderPolygon) return [];
+      const repairEdges = buildTextureEdgeRepairSets(polygons);
+      return polygons.map((p, i) => computeTextureAtlasPlan(p, i, {
+        directionalLight: bakedDirectional,
+        ambientLight: effectiveAmbient,
+        textureEdgeRepairEdges: repairEdges[i]
+      }));
+    },
+    [renderPolygon, polygons, bakedDirectional, effectiveAmbient]
   );
   const textureAtlas = useTextureAtlas(
     atlasPlans,
     effectiveTextureLighting,
-    atlasScale
+    textureQuality
   );
-  const renderedPolygons = children ? polygons.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderPropPolygon, { polygon: p, index: i, children }, i)) : textureAtlas.entries.map((entry, index) => {
+  const solidPaintDefaults = (0, import_react11.useMemo)(
+    () => !renderPolygon ? getSolidPaintDefaults(atlasPlans, effectiveTextureLighting) : {},
+    [renderPolygon, atlasPlans, effectiveTextureLighting]
+  );
+  const defaultPaintVars = (0, import_react11.useMemo)(
+    () => solidPaintVars(solidPaintDefaults),
+    [solidPaintDefaults]
+  );
+  const meshIdRef = (0, import_react11.useRef)(/* @__PURE__ */ Symbol());
+  const sceneRegisterShadowCaster = sceneCtx?.registerShadowCaster;
+  (0, import_react11.useEffect)(() => {
+    if (!sceneRegisterShadowCaster) return;
+    if (castShadow && effectiveTextureLighting === "dynamic") {
+      sceneRegisterShadowCaster(meshIdRef.current, polygons);
+    } else {
+      sceneRegisterShadowCaster(meshIdRef.current, null);
+    }
+    return () => {
+      sceneRegisterShadowCaster(meshIdRef.current, null);
+    };
+  }, [sceneRegisterShadowCaster, castShadow, effectiveTextureLighting, polygons]);
+  const shadowLeaves = (0, import_react11.useMemo)(() => {
+    if (!castShadow || effectiveTextureLighting !== "dynamic" || renderPolygon) return [];
+    const shadowColor = sceneCtx?.shadow?.color ?? "#000000";
+    const shadowOpacity = sceneCtx?.shadow?.opacity ?? 0.25;
+    const parsed = (0, import_polycss_core6.parseHexColor)(shadowColor)?.rgb ?? [0, 0, 0];
+    const shadowColorCss = `rgba(${parsed[0]},${parsed[1]},${parsed[2]},${shadowOpacity})`;
+    const shadowDedupDrop = (0, import_polycss_core6.findOverlappingPolygonDuplicates)(polygons, {
+      normalTolerance: 0.1,
+      distanceTolerance: 0.5,
+      overlapFraction: 0.4
+    });
+    const leaves = [];
+    for (const plan of atlasPlans) {
+      if (!plan) continue;
+      if (shadowDedupDrop.has(plan.index)) continue;
+      const borderShape = cssBorderShapeForPlan(plan);
+      leaves.push(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ShadowLeaf,
+          {
+            plan,
+            shadowColorCss,
+            borderShape
+          },
+          `shadow-${plan.index}`
+        )
+      );
+    }
+    return leaves;
+  }, [castShadow, effectiveTextureLighting, renderPolygon, polygons, atlasPlans, sceneCtx?.shadow]);
+  const wrapperStyle = {
+    transform,
+    ...transformOrigin ? { transformOrigin } : null,
+    ...dynamicLightOverride,
+    ...style,
+    ...defaultPaintVars
+  };
+  const renderedPolygons = renderPolygon ? polygons.map((p, i) => (
+    // Render-prop: caller controls how each polygon renders. We still
+    // wrap in a fragment with key so React reconciliation works.
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderPropPolygon, { polygon: p, index: i, children: renderPolygon }, i)
+  )) : textureAtlas.entries.map((entry, index) => {
     if (entry) {
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         TextureAtlasPoly,
@@ -2170,7 +3199,22 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
     }
     const plan = atlasPlans[index];
     if (!plan || plan.texture) return null;
-    return isSolidTrianglePlan(plan) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextureTrianglePoly, { entry: plan, textureLighting: effectiveTextureLighting }, plan.index) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextureBorderShapePoly, { entry: plan }, plan.index);
+    return isSolidTrianglePlan(plan) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TextureTrianglePoly,
+      {
+        entry: plan,
+        textureLighting: effectiveTextureLighting,
+        solidPaintDefaults
+      },
+      plan.index
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TextureBorderShapePoly,
+      {
+        entry: plan,
+        solidPaintDefaults
+      },
+      plan.index
+    );
   });
   if (src) {
     if (fetched.loading && fetched.polygons.length === 0) {
@@ -2200,7 +3244,7 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
       );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ref: wrapperRef,
@@ -2208,7 +3252,11 @@ var PolyMesh = (0, import_react11.forwardRef)(function PolyMesh2({
       className: `polycss-mesh${className ? ` ${className}` : ""}`,
       style: wrapperStyle,
       ...wrapperHandlers,
-      children: renderedPolygons
+      children: [
+        shadowLeaves,
+        renderedPolygons,
+        staticChildren
+      ]
     }
   );
 });
@@ -2219,11 +3267,68 @@ function RenderPropPolygon({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children(polygon, index) });
 }
+function ShadowLeaf({
+  plan,
+  shadowColorCss,
+  borderShape
+}) {
+  const setRef = (0, import_react11.useCallback)((el) => {
+    if (!el) return;
+    el.style.setProperty("border-shape", borderShape);
+  }, [borderShape]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "q",
+    {
+      ref: setRef,
+      className: "polycss-shadow",
+      style: {
+        transform: `var(--shadow-proj) matrix3d(${plan.matrix})`,
+        color: shadowColorCss,
+        width: plan.canvasW,
+        height: plan.canvasH,
+        ["--pnx"]: plan.normal[0].toFixed(4),
+        ["--pny"]: plan.normal[1].toFixed(4),
+        ["--pnz"]: plan.normal[2].toFixed(4)
+      }
+    }
+  );
+}
 
-// src/scene/usePolyMaterial.ts
+// src/scene/PolyGround.tsx
 var import_react12 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PolyGround({
+  size = 6,
+  z = 0,
+  center = [0, 0],
+  color = "#7d848e",
+  className
+}) {
+  const polygons = (0, import_react12.useMemo)(() => {
+    const half = size / 2;
+    const [cx, cy] = center;
+    const vertices = [
+      [cx - half, cy - half, z],
+      [cx + half, cy - half, z],
+      [cx + half, cy + half, z],
+      [cx - half, cy + half, z]
+    ];
+    return [{ vertices, color }];
+  }, [size, z, center, color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    PolyMesh,
+    {
+      polygons,
+      castShadow: false,
+      className: className ? `polycss-ground ${className}` : "polycss-ground"
+    }
+  );
+}
+
+// src/scene/usePolyMaterial.ts
+var import_react13 = require("react");
 function usePolyMaterial(options) {
-  return (0, import_react12.useMemo)(
+  return (0, import_react13.useMemo)(
     () => ({ texture: options.texture, key: options.key }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [options.texture, options.key]
@@ -2231,8 +3336,13 @@ function usePolyMaterial(options) {
 }
 
 // src/shapes/Poly.tsx
-var import_react13 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DIRECT_TEXTURE_CSS_DECIMALS = 4;
+function formatCssLength2(value, decimals = DIRECT_TEXTURE_CSS_DECIMALS) {
+  const next = value.toFixed(decimals).replace(/\.?0+$/, "");
+  return Number(next) === 0 || Object.is(Number(next), -0) ? "0" : `${next}px`;
+}
 function isAxisAlignedRectUVs(uvs) {
   if (uvs.length !== 4) return null;
   const us = [...new Set(uvs.map((uv) => uv[0]))].sort((a, b) => a - b);
@@ -2262,18 +3372,16 @@ function MaterialDirectPoly({
   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 sourceW = 1 / du;
+  const sourceH = 1 / dv;
   const vMax = Math.max(v0, v1);
-  const offsetX = u0 * sourceW;
-  const offsetY = (1 - vMax) * sourceH;
+  const offsetX = u0 / du;
+  const offsetY = (1 - vMax) / dv;
   const style = {
-    width: plan.canvasW,
-    height: plan.canvasH,
-    transform: `matrix3d(${plan.matrix})`,
+    transform: `matrix3d(${plan.canonicalMatrix})`,
     backgroundImage: `url(${material.texture})`,
-    backgroundSize: `${sourceW}px ${sourceH}px`,
-    backgroundPosition: `-${offsetX}px -${offsetY}px`,
+    backgroundSize: `${formatCssLength2(sourceW)} ${formatCssLength2(sourceH)}`,
+    backgroundPosition: `${formatCssLength2(-offsetX)} ${formatCssLength2(-offsetY)}`,
     pointerEvents: pointerEvents === "none" ? "none" : void 0,
     ...styleProp
   };
@@ -2281,7 +3389,7 @@ function MaterialDirectPoly({
     Object.entries(plan.polygon.data).map(([k, v]) => [`data-${k}`, String(v)])
   ) : {};
   const elementClassName = className?.trim() || void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "i",
     {
       className: elementClassName,
@@ -2324,17 +3432,17 @@ function PolyInner({
   pointerEvents: pointerEventsProp,
   context,
   textureLighting: textureLightingProp,
-  atlasScale: atlasScaleProp,
+  textureQuality: textureQualityProp,
   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 textureQuality = textureQualityProp ?? context?.textureQuality;
   const polygonColor = baseColorProp ?? color;
   const effectiveTexture = material?.texture ?? texture;
-  const atlasPlan = (0, import_react13.useMemo)(
+  const atlasPlan = (0, import_react14.useMemo)(
     () => computeTextureAtlasPlan(
       { vertices, color: polygonColor, texture: effectiveTexture, uvs, data },
       0,
@@ -2355,15 +3463,15 @@ function PolyInner({
       context?.directionalLight
     ]
   );
-  const materialUvRect = (0, import_react13.useMemo)(
+  const materialUvRect = (0, import_react14.useMemo)(
     () => material && uvs ? isAxisAlignedRectUVs(uvs) : null,
     [material, uvs]
   );
-  const atlasPlans = (0, import_react13.useMemo)(
+  const atlasPlans = (0, import_react14.useMemo)(
     () => materialUvRect ? [] : [atlasPlan],
     [materialUvRect, atlasPlan]
   );
-  const textureAtlas = useTextureAtlas(atlasPlans, textureLighting, atlasScale);
+  const textureAtlas = useTextureAtlas(atlasPlans, textureLighting, textureQuality);
   const domEventHandlers = {
     onClick,
     onDoubleClick,
@@ -2412,7 +3520,7 @@ function PolyInner({
   const wrapperTransform = transformParts.length > 0 ? transformParts.join(" ") : void 0;
   let front = null;
   if (materialUvRect && material && atlasPlan) {
-    front = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    front = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MaterialDirectPoly,
       {
         plan: atlasPlan,
@@ -2428,7 +3536,7 @@ function PolyInner({
   } else {
     const atlasEntry = textureAtlas.entries[0];
     if (atlasEntry) {
-      front = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      front = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         TextureAtlasPoly,
         {
           entry: atlasEntry,
@@ -2442,7 +3550,7 @@ function PolyInner({
         }
       );
     } else if (atlasPlan && !atlasPlan.texture) {
-      front = isSolidTrianglePlan(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      front = isSolidTrianglePlan(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         TextureTrianglePoly,
         {
           entry: atlasPlan,
@@ -2453,7 +3561,18 @@ function PolyInner({
           domEventHandlers,
           pointerEvents: pointerEventsProp ?? "auto"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ) : isProjectiveQuadPlan(atlasPlan) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        TextureProjectiveSolidPoly,
+        {
+          entry: atlasPlan,
+          textureLighting,
+          className,
+          style: styleProp,
+          domAttrs,
+          domEventHandlers,
+          pointerEvents: pointerEventsProp ?? "auto"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         TextureBorderShapePoly,
         {
           entry: atlasPlan,
@@ -2468,26 +3587,441 @@ function PolyInner({
   }
   if (!front) return null;
   if (!wrapperTransform) return front;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: "polycss-poly-wrapper",
       style: {
+        transform: wrapperTransform,
         position: "absolute",
-        transformStyle: "preserve-3d",
-        transform: wrapperTransform
+        transformStyle: "preserve-3d"
       },
       children: front
     }
-  );
-}
-var Poly = (0, import_react13.memo)(PolyInner);
+  );
+}
+var Poly = (0, import_react14.memo)(PolyInner);
+
+// src/controls/PolyFirstPersonControls.tsx
+var import_react15 = require("react");
+var import_polycss_core7 = require("@layoutit/polycss-core");
+var DEFAULTS = {
+  enabled: true,
+  lookEnabled: true,
+  moveEnabled: true,
+  jumpEnabled: true,
+  crouchEnabled: true,
+  lookSensitivity: 0.15,
+  invertY: false,
+  moveSpeed: 5,
+  jumpVelocity: 7,
+  gravity: 18,
+  eyeHeight: 1.7,
+  crouchHeight: 1,
+  groundZ: 0,
+  minPitch: 5,
+  maxPitch: 175
+};
+function resolveOptions(base, partial) {
+  return {
+    enabled: partial.enabled ?? base.enabled,
+    lookEnabled: partial.lookEnabled ?? base.lookEnabled,
+    moveEnabled: partial.moveEnabled ?? base.moveEnabled,
+    jumpEnabled: partial.jumpEnabled ?? base.jumpEnabled,
+    crouchEnabled: partial.crouchEnabled ?? base.crouchEnabled,
+    lookSensitivity: partial.lookSensitivity ?? base.lookSensitivity,
+    invertY: partial.invertY ?? base.invertY,
+    moveSpeed: partial.moveSpeed ?? base.moveSpeed,
+    jumpVelocity: partial.jumpVelocity ?? base.jumpVelocity,
+    gravity: partial.gravity ?? base.gravity,
+    eyeHeight: partial.eyeHeight ?? base.eyeHeight,
+    crouchHeight: partial.crouchHeight ?? base.crouchHeight,
+    groundZ: partial.groundZ ?? base.groundZ,
+    minPitch: partial.minPitch ?? base.minPitch,
+    maxPitch: partial.maxPitch ?? base.maxPitch
+  };
+}
+var FORWARD_KEYS = /* @__PURE__ */ new Set(["KeyW", "ArrowUp"]);
+var BACK_KEYS = /* @__PURE__ */ new Set(["KeyS", "ArrowDown"]);
+var LEFT_KEYS = /* @__PURE__ */ new Set(["KeyA", "ArrowLeft"]);
+var RIGHT_KEYS = /* @__PURE__ */ new Set(["KeyD", "ArrowRight"]);
+var JUMP_KEYS = /* @__PURE__ */ new Set(["Space"]);
+var CROUCH_KEYS = /* @__PURE__ */ new Set(["ControlLeft", "ControlRight"]);
+function isFpvKey(code) {
+  return FORWARD_KEYS.has(code) || BACK_KEYS.has(code) || LEFT_KEYS.has(code) || RIGHT_KEYS.has(code) || JUMP_KEYS.has(code) || CROUCH_KEYS.has(code);
+}
+function makeRegistry() {
+  return { change: [], start: [], end: [] };
+}
+function emitEvent(registry, type) {
+  const list = [...registry[type]];
+  for (const fn of list) {
+    try {
+      fn();
+    } catch {
+    }
+  }
+}
+var PolyFirstPersonControls = (0, import_react15.forwardRef)(function PolyFirstPersonControls2(props, ref) {
+  const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
+  const onChangeRef = (0, import_react15.useRef)(props.onChange);
+  const onInteractionStartRef = (0, import_react15.useRef)(props.onInteractionStart);
+  const onInteractionEndRef = (0, import_react15.useRef)(props.onInteractionEnd);
+  (0, import_react15.useEffect)(() => {
+    onChangeRef.current = props.onChange;
+    onInteractionStartRef.current = props.onInteractionStart;
+    onInteractionEndRef.current = props.onInteractionEnd;
+  });
+  const optsRef = (0, import_react15.useRef)(resolveOptions(DEFAULTS, props));
+  const cameraOriginRef = (0, import_react15.useRef)([0, 0, 0]);
+  const rafIdRef = (0, import_react15.useRef)(null);
+  const lastTimeRef = (0, import_react15.useRef)(0);
+  const stoppedRef = (0, import_react15.useRef)(false);
+  const pointerLockedRef = (0, import_react15.useRef)(false);
+  const interactingRef = (0, import_react15.useRef)(false);
+  const keysHeldRef = (0, import_react15.useRef)(/* @__PURE__ */ new Set());
+  const verticalVelRef = (0, import_react15.useRef)(0);
+  const jumpOffsetRef = (0, import_react15.useRef)(0);
+  const registryRef = (0, import_react15.useRef)(makeRegistry());
+  (0, import_react15.useImperativeHandle)(ref, () => ({
+    update(partial) {
+      const prev = optsRef.current;
+      optsRef.current = resolveOptions(prev, partial);
+      if (!stoppedRef.current) {
+        const host = cameraElRef.current;
+        if (host) host.style.cursor = optsRef.current.lookEnabled ? "crosshair" : "";
+      }
+    },
+    resume() {
+      if (!stoppedRef.current) return;
+      stoppedRef.current = false;
+      const host = cameraElRef.current;
+      if (host) host.style.cursor = optsRef.current.lookEnabled ? "crosshair" : "";
+      startLoop();
+    },
+    pause() {
+      if (stoppedRef.current) return;
+      stoppedRef.current = true;
+      stopLoop();
+      const host = cameraElRef.current;
+      if (host) host.style.cursor = "";
+      if (interactingRef.current) {
+        interactingRef.current = false;
+        emitEvent(registryRef.current, "end");
+        try {
+          onInteractionEndRef.current?.();
+        } catch {
+        }
+      }
+    },
+    destroy() {
+      stoppedRef.current = true;
+      stopLoop();
+    },
+    lock() {
+      const opts = optsRef.current;
+      if (!opts.enabled || !opts.lookEnabled || stoppedRef.current) return;
+      const host = cameraElRef.current;
+      try {
+        host?.requestPointerLock();
+      } catch {
+      }
+    },
+    unlock() {
+      if (pointerLockedRef.current) {
+        const host = cameraElRef.current;
+        try {
+          host?.ownerDocument?.exitPointerLock();
+        } catch {
+        }
+      }
+    },
+    isLocked() {
+      return pointerLockedRef.current;
+    },
+    getOrigin() {
+      const o = cameraOriginRef.current;
+      return [o[0], o[1], o[2]];
+    },
+    setOrigin(origin) {
+      cameraOriginRef.current[0] = origin[0];
+      cameraOriginRef.current[1] = origin[1];
+      cameraOriginRef.current[2] = origin[2];
+      syncTargetFromOrigin();
+      emitEvent(registryRef.current, "change");
+      try {
+        onChangeRef.current?.();
+      } catch {
+      }
+    },
+    addEventListener(type, listener) {
+      const arr = registryRef.current[type];
+      if (!arr.includes(listener)) arr.push(listener);
+    },
+    removeEventListener(type, listener) {
+      const arr = registryRef.current[type];
+      const idx = arr.indexOf(listener);
+      if (idx >= 0) arr.splice(idx, 1);
+    },
+    hasEventListener(type, listener) {
+      return registryRef.current[type].includes(listener);
+    }
+  }));
+  function forwardDir(rotX, rotY) {
+    const rx = rotX * Math.PI / 180;
+    const ry = rotY * Math.PI / 180;
+    return [
+      -Math.sin(rx) * Math.cos(ry),
+      -Math.sin(rx) * Math.sin(ry),
+      -Math.cos(rx)
+    ];
+  }
+  function lookOffset() {
+    const host = cameraElRef.current;
+    const perspStr = host ? getComputedStyle(host).perspective : "";
+    const n = parseFloat(perspStr);
+    return (Number.isFinite(n) && n > 0 ? n : 8e3) / import_polycss_core7.BASE_TILE;
+  }
+  function deriveTarget() {
+    const s = cameraRef.current.state;
+    const f = forwardDir(s.rotX ?? 90, s.rotY ?? 0);
+    const d = lookOffset();
+    const o = cameraOriginRef.current;
+    return [o[0] + f[0] * d, o[1] + f[1] * d, o[2] + f[2] * d];
+  }
+  function syncTargetFromOrigin() {
+    const t = deriveTarget();
+    const handle = cameraRef.current;
+    handle.update({ target: t });
+    applyTransformDirect();
+    store.updateCameraFromRef(handle);
+  }
+  const ANIM_DT_CLAMP = 0.05;
+  function tick(now) {
+    if (rafIdRef.current === null || stoppedRef.current) return;
+    const dt = Math.min(ANIM_DT_CLAMP, lastTimeRef.current ? (now - lastTimeRef.current) / 1e3 : 0.0167);
+    lastTimeRef.current = now;
+    const opts = optsRef.current;
+    if (opts.enabled) {
+      let dirty = false;
+      const s = cameraRef.current.state;
+      const o = cameraOriginRef.current;
+      if (opts.moveEnabled) {
+        let mf = 0, mr = 0;
+        for (const code of keysHeldRef.current) {
+          if (FORWARD_KEYS.has(code)) mf += 1;
+          else if (BACK_KEYS.has(code)) mf -= 1;
+          else if (RIGHT_KEYS.has(code)) mr += 1;
+          else if (LEFT_KEYS.has(code)) mr -= 1;
+        }
+        if (mf !== 0 || mr !== 0) {
+          const rotY = s.rotY ?? 0;
+          const r = rotY * Math.PI / 180;
+          const fx = -Math.cos(r), fy = -Math.sin(r);
+          const rx = -Math.sin(r), ry = Math.cos(r);
+          const len = Math.hypot(mf, mr) || 1;
+          const step = opts.moveSpeed * dt;
+          o[0] += (fx * mf + rx * mr) / len * step;
+          o[1] += (fy * mf + ry * mr) / len * step;
+          dirty = true;
+        }
+      }
+      const crouched = opts.crouchEnabled && (keysHeldRef.current.has("ControlLeft") || keysHeldRef.current.has("ControlRight"));
+      const baseHeight = crouched ? opts.crouchHeight : opts.eyeHeight;
+      if (opts.jumpEnabled && (verticalVelRef.current !== 0 || jumpOffsetRef.current > 0)) {
+        verticalVelRef.current -= opts.gravity * dt;
+        jumpOffsetRef.current += verticalVelRef.current * dt;
+        if (jumpOffsetRef.current <= 0) {
+          jumpOffsetRef.current = 0;
+          verticalVelRef.current = 0;
+        }
+      } else if (!opts.jumpEnabled) {
+        jumpOffsetRef.current = 0;
+        verticalVelRef.current = 0;
+      }
+      const originZ = opts.groundZ + baseHeight + jumpOffsetRef.current;
+      if (Math.abs(o[2] - originZ) > 1e-4) {
+        o[2] = originZ;
+        dirty = true;
+      }
+      if (dirty) {
+        const t = deriveTarget();
+        const handle = cameraRef.current;
+        handle.update({ target: t });
+        applyTransformDirect();
+        store.updateCameraFromRef(handle);
+        emitEvent(registryRef.current, "change");
+        try {
+          onChangeRef.current?.();
+        } catch {
+        }
+      }
+    }
+    rafIdRef.current = requestAnimationFrame(tick);
+  }
+  function startLoop() {
+    if (rafIdRef.current !== null || stoppedRef.current) return;
+    lastTimeRef.current = 0;
+    rafIdRef.current = requestAnimationFrame(tick);
+  }
+  function stopLoop() {
+    if (rafIdRef.current === null) return;
+    cancelAnimationFrame(rafIdRef.current);
+    rafIdRef.current = null;
+  }
+  (0, import_react15.useEffect)(() => {
+    const host = cameraElRef.current;
+    if (!host) return;
+    const doc = host.ownerDocument ?? document;
+    const win = doc.defaultView ?? globalThis;
+    stoppedRef.current = false;
+    pointerLockedRef.current = false;
+    interactingRef.current = false;
+    keysHeldRef.current.clear();
+    verticalVelRef.current = 0;
+    jumpOffsetRef.current = 0;
+    const s = cameraRef.current.state;
+    const t = s.target ?? [0, 0, 0];
+    const opts = optsRef.current;
+    cameraOriginRef.current = [t[0], t[1], opts.groundZ + opts.eyeHeight];
+    syncTargetFromOrigin();
+    host.style.cursor = opts.lookEnabled ? "crosshair" : "";
+    const computedPersp = win.getComputedStyle(host).perspective;
+    const persp = parseFloat(computedPersp);
+    const effectivePersp = Number.isFinite(persp) && persp > 0 ? persp : 2e3;
+    host.style.setProperty("--polycss-fpv-perspective", `${effectivePersp}px`);
+    host.classList.add("polycss-fpv-host");
+    const onHostClick = () => {
+      const o = optsRef.current;
+      if (!o.enabled || !o.lookEnabled || stoppedRef.current || pointerLockedRef.current) return;
+      try {
+        host.requestPointerLock();
+      } catch {
+      }
+    };
+    const onPointerLockChange = () => {
+      const locked = doc.pointerLockElement === host;
+      if (locked === pointerLockedRef.current) return;
+      pointerLockedRef.current = locked;
+      if (locked) {
+        interactingRef.current = true;
+        emitEvent(registryRef.current, "start");
+        try {
+          onInteractionStartRef.current?.();
+        } catch {
+        }
+      } else {
+        if (interactingRef.current) {
+          interactingRef.current = false;
+          emitEvent(registryRef.current, "end");
+          try {
+            onInteractionEndRef.current?.();
+          } catch {
+          }
+        }
+      }
+    };
+    const onMouseMove = (e) => {
+      if (!pointerLockedRef.current || stoppedRef.current) return;
+      const o = optsRef.current;
+      if (!o.enabled || !o.lookEnabled) return;
+      const dx = e.movementX ?? 0;
+      const dy = e.movementY ?? 0;
+      if (dx === 0 && dy === 0) return;
+      const handle = cameraRef.current;
+      const sceneOpts = handle.state;
+      const sens = o.lookSensitivity;
+      const dyDir = o.invertY ? -1 : 1;
+      const rotY = (((sceneOpts.rotY ?? 0) - dx * sens) % 360 + 360) % 360;
+      let rotX = (sceneOpts.rotX ?? 90) - dy * sens * dyDir;
+      if (rotX < o.minPitch) rotX = o.minPitch;
+      else if (rotX > o.maxPitch) rotX = o.maxPitch;
+      const f = forwardDir(rotX, rotY);
+      const d = lookOffset();
+      const origin = cameraOriginRef.current;
+      const target = [
+        origin[0] + f[0] * d,
+        origin[1] + f[1] * d,
+        origin[2] + f[2] * d
+      ];
+      handle.update({ rotX, rotY, target });
+      applyTransformDirect();
+      store.updateCameraFromRef(handle);
+      emitEvent(registryRef.current, "change");
+      try {
+        onChangeRef.current?.();
+      } catch {
+      }
+    };
+    const onKeyDown = (e) => {
+      const o = optsRef.current;
+      if (!o.enabled || stoppedRef.current) return;
+      if (!isFpvKey(e.code)) return;
+      if (!pointerLockedRef.current && !o.moveEnabled) return;
+      if (JUMP_KEYS.has(e.code)) {
+        if (!o.jumpEnabled) return;
+        e.preventDefault();
+        if (!keysHeldRef.current.has(e.code) && verticalVelRef.current === 0 && jumpOffsetRef.current === 0) {
+          verticalVelRef.current = o.jumpVelocity;
+        }
+        keysHeldRef.current.add(e.code);
+        return;
+      }
+      if (CROUCH_KEYS.has(e.code) && !o.crouchEnabled) return;
+      if (!o.moveEnabled && !CROUCH_KEYS.has(e.code)) return;
+      e.preventDefault();
+      keysHeldRef.current.add(e.code);
+    };
+    const onKeyUp = (e) => {
+      if (!isFpvKey(e.code)) return;
+      keysHeldRef.current.delete(e.code);
+    };
+    const onBlur = () => {
+      keysHeldRef.current.clear();
+    };
+    host.addEventListener("click", onHostClick);
+    doc.addEventListener("pointerlockchange", onPointerLockChange);
+    doc.addEventListener("mousemove", onMouseMove);
+    win.addEventListener("keydown", onKeyDown);
+    win.addEventListener("keyup", onKeyUp);
+    win.addEventListener("blur", onBlur);
+    startLoop();
+    return () => {
+      stoppedRef.current = true;
+      stopLoop();
+      host.removeEventListener("click", onHostClick);
+      doc.removeEventListener("pointerlockchange", onPointerLockChange);
+      doc.removeEventListener("mousemove", onMouseMove);
+      win.removeEventListener("keydown", onKeyDown);
+      win.removeEventListener("keyup", onKeyUp);
+      win.removeEventListener("blur", onBlur);
+      host.style.cursor = "";
+      host.classList.remove("polycss-fpv-host");
+      host.style.removeProperty("--polycss-fpv-perspective");
+      keysHeldRef.current.clear();
+      if (pointerLockedRef.current) {
+        try {
+          doc.exitPointerLock();
+        } catch {
+        }
+      }
+    };
+  }, [cameraElRef, cameraRef, applyTransformDirect, store]);
+  (0, import_react15.useEffect)(() => {
+    optsRef.current = resolveOptions(optsRef.current, props);
+    const host = cameraElRef.current;
+    if (host && !stoppedRef.current) {
+      host.style.cursor = optsRef.current.lookEnabled ? "crosshair" : "";
+    }
+  });
+  return null;
+});
 
-// src/controls/PolyOrbitControls.tsx
-var import_react14 = require("react");
+// src/controls/PolyMapControls.tsx
+var import_react16 = require("react");
 
 // src/controls/sharedControls.ts
-var import_polycss_core7 = require("@layoutit/polycss-core");
+var import_polycss_core8 = require("@layoutit/polycss-core");
 var POINTER_DRAG_SPEED = 4;
 function invertFactor(invert) {
   if (invert === true) return -1;
@@ -2508,7 +4042,7 @@ function applyPan(dx, dy, s, handle, _invert) {
   const cosRotX = cosRotXRaw >= 0 ? Math.max(0.1, cosRotXRaw) : Math.min(-0.1, cosRotXRaw);
   const cZ = Math.cos(s.rotY * Math.PI / 180);
   const sZ = Math.sin(s.rotY * Math.PI / 180);
-  const k = z * import_polycss_core7.BASE_TILE;
+  const k = z * import_polycss_core8.BASE_TILE;
   const targetD0 = (dx * sZ - dy * cZ / cosRotX) / k;
   const targetD1 = -(dx * cZ + dy * sZ / cosRotX) / k;
   const t = s.target;
@@ -2641,8 +4175,8 @@ function makeAnimateEffect({
   };
 }
 
-// src/controls/PolyOrbitControls.tsx
-function PolyOrbitControls({
+// src/controls/PolyMapControls.tsx
+function PolyMapControls({
   drag = true,
   wheel = true,
   dolly = false,
@@ -2657,19 +4191,19 @@ function PolyOrbitControls({
   onInteractionEnd
 }) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const dragRef = (0, import_react14.useRef)(drag);
-  const wheelRef = (0, import_react14.useRef)(wheel);
-  const dollyRef = (0, import_react14.useRef)(dolly);
-  const invertRef = (0, import_react14.useRef)(invert);
-  const zoomMinRef = (0, import_react14.useRef)(minZoom);
-  const zoomMaxRef = (0, import_react14.useRef)(maxZoom);
-  const distanceMinRef = (0, import_react14.useRef)(minDistance);
-  const distanceMaxRef = (0, import_react14.useRef)(maxDistance);
-  const animateRef = (0, import_react14.useRef)(animate);
-  const onChangeRef = (0, import_react14.useRef)(onChange);
-  const onInteractionStartRef = (0, import_react14.useRef)(onInteractionStart);
-  const onInteractionEndRef = (0, import_react14.useRef)(onInteractionEnd);
-  (0, import_react14.useEffect)(() => {
+  const dragRef = (0, import_react16.useRef)(drag);
+  const wheelRef = (0, import_react16.useRef)(wheel);
+  const dollyRef = (0, import_react16.useRef)(dolly);
+  const invertRef = (0, import_react16.useRef)(invert);
+  const zoomMinRef = (0, import_react16.useRef)(minZoom);
+  const zoomMaxRef = (0, import_react16.useRef)(maxZoom);
+  const distanceMinRef = (0, import_react16.useRef)(minDistance);
+  const distanceMaxRef = (0, import_react16.useRef)(maxDistance);
+  const animateRef = (0, import_react16.useRef)(animate);
+  const onChangeRef = (0, import_react16.useRef)(onChange);
+  const onInteractionStartRef = (0, import_react16.useRef)(onInteractionStart);
+  const onInteractionEndRef = (0, import_react16.useRef)(onInteractionEnd);
+  (0, import_react16.useEffect)(() => {
     dragRef.current = drag;
     wheelRef.current = wheel;
     dollyRef.current = dolly;
@@ -2693,7 +4227,7 @@ function PolyOrbitControls({
     try {
       fn(cameraSnapshot());
     } catch (err) {
-      console.error("[polycss/react] PolyOrbitControls onChange threw:", err);
+      console.error("[polycss/react] PolyMapControls onChange threw:", err);
     }
   };
   const fireStart = () => {
@@ -2702,7 +4236,7 @@ function PolyOrbitControls({
     try {
       fn(cameraSnapshot());
     } catch (err) {
-      console.error("[polycss/react] PolyOrbitControls onInteractionStart threw:", err);
+      console.error("[polycss/react] PolyMapControls onInteractionStart threw:", err);
     }
   };
   const fireEnd = () => {
@@ -2711,11 +4245,11 @@ function PolyOrbitControls({
     try {
       fn(cameraSnapshot());
     } catch (err) {
-      console.error("[polycss/react] PolyOrbitControls onInteractionEnd threw:", err);
+      console.error("[polycss/react] PolyMapControls onInteractionEnd threw:", err);
     }
   };
-  const animationPausedShared = (0, import_react14.useRef)({ value: false }).current;
-  (0, import_react14.useEffect)(() => {
+  const animationPausedShared = (0, import_react16.useRef)({ value: false }).current;
+  (0, import_react16.useEffect)(() => {
     if (!drag) return;
     const el = cameraElRef.current;
     if (!el) return;
@@ -2752,9 +4286,9 @@ function PolyOrbitControls({
       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);
+      } else {
+        buildOrbitControls.applyPan(dx, dy, handle.state, handle, invertRef.current);
       }
       applyTransformDirect();
       store.updateCameraFromRef(handle);
@@ -2788,7 +4322,7 @@ function PolyOrbitControls({
       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);
+      buildOrbitControls.applyOrbit(dx, dy, handle.state, handle, invertRef.current);
       applyTransformDirect();
       store.updateCameraFromRef(handle);
       fireChange();
@@ -2825,12 +4359,12 @@ function PolyOrbitControls({
       el.style.userSelect = "";
     };
   }, [drag, applyTransformDirect, cameraElRef, cameraRef, store]);
-  (0, import_react14.useEffect)(
+  (0, import_react16.useEffect)(
     () => makeWheelEffect({ wheel, dollyRef, wheelRef, zoomMinRef, zoomMaxRef, distanceMinRef, distanceMaxRef, cameraElRef, cameraRef, applyTransformDirect, store, fireStart, fireChange, fireEnd }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [wheel, applyTransformDirect, cameraElRef, cameraRef, store]
   );
-  (0, import_react14.useEffect)(
+  (0, import_react16.useEffect)(
     () => makeAnimateEffect({ animateOn: !!animate, animateRef, animationPausedShared, applyTransformDirect, cameraRef, store, fireChange }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [!!animate, animationPausedShared, applyTransformDirect, cameraRef, store]
@@ -2838,9 +4372,9 @@ function PolyOrbitControls({
   return null;
 }
 
-// src/controls/PolyMapControls.tsx
-var import_react15 = require("react");
-function PolyMapControls({
+// src/controls/PolyOrbitControls.tsx
+var import_react17 = require("react");
+function PolyOrbitControls({
   drag = true,
   wheel = true,
   dolly = false,
@@ -2855,19 +4389,19 @@ function PolyMapControls({
   onInteractionEnd
 }) {
   const { store, cameraRef, cameraElRef, applyTransformDirect } = useCameraContext();
-  const dragRef = (0, import_react15.useRef)(drag);
-  const wheelRef = (0, import_react15.useRef)(wheel);
-  const dollyRef = (0, import_react15.useRef)(dolly);
-  const invertRef = (0, import_react15.useRef)(invert);
-  const zoomMinRef = (0, import_react15.useRef)(minZoom);
-  const zoomMaxRef = (0, import_react15.useRef)(maxZoom);
-  const distanceMinRef = (0, import_react15.useRef)(minDistance);
-  const distanceMaxRef = (0, import_react15.useRef)(maxDistance);
-  const animateRef = (0, import_react15.useRef)(animate);
-  const onChangeRef = (0, import_react15.useRef)(onChange);
-  const onInteractionStartRef = (0, import_react15.useRef)(onInteractionStart);
-  const onInteractionEndRef = (0, import_react15.useRef)(onInteractionEnd);
-  (0, import_react15.useEffect)(() => {
+  const dragRef = (0, import_react17.useRef)(drag);
+  const wheelRef = (0, import_react17.useRef)(wheel);
+  const dollyRef = (0, import_react17.useRef)(dolly);
+  const invertRef = (0, import_react17.useRef)(invert);
+  const zoomMinRef = (0, import_react17.useRef)(minZoom);
+  const zoomMaxRef = (0, import_react17.useRef)(maxZoom);
+  const distanceMinRef = (0, import_react17.useRef)(minDistance);
+  const distanceMaxRef = (0, import_react17.useRef)(maxDistance);
+  const animateRef = (0, import_react17.useRef)(animate);
+  const onChangeRef = (0, import_react17.useRef)(onChange);
+  const onInteractionStartRef = (0, import_react17.useRef)(onInteractionStart);
+  const onInteractionEndRef = (0, import_react17.useRef)(onInteractionEnd);
+  (0, import_react17.useEffect)(() => {
     dragRef.current = drag;
     wheelRef.current = wheel;
     dollyRef.current = dolly;
@@ -2891,7 +4425,7 @@ function PolyMapControls({
     try {
       fn(cameraSnapshot());
     } catch (err) {
-      console.error("[polycss/react] PolyMapControls onChange threw:", err);
+      console.error("[polycss/react] PolyOrbitControls onChange threw:", err);
     }
   };
   const fireStart = () => {
@@ -2900,7 +4434,7 @@ function PolyMapControls({
     try {
       fn(cameraSnapshot());
     } catch (err) {
-      console.error("[polycss/react] PolyMapControls onInteractionStart threw:", err);
+      console.error("[polycss/react] PolyOrbitControls onInteractionStart threw:", err);
     }
   };
   const fireEnd = () => {
@@ -2909,11 +4443,11 @@ function PolyMapControls({
     try {
       fn(cameraSnapshot());
     } catch (err) {
-      console.error("[polycss/react] PolyMapControls onInteractionEnd threw:", err);
+      console.error("[polycss/react] PolyOrbitControls onInteractionEnd threw:", err);
     }
   };
-  const animationPausedShared = (0, import_react15.useRef)({ value: false }).current;
-  (0, import_react15.useEffect)(() => {
+  const animationPausedShared = (0, import_react17.useRef)({ value: false }).current;
+  (0, import_react17.useEffect)(() => {
     if (!drag) return;
     const el = cameraElRef.current;
     if (!el) return;
@@ -2950,9 +4484,9 @@ function PolyMapControls({
       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);
+      } else {
+        buildOrbitControls.applyOrbit(dx, dy, handle.state, handle, invertRef.current);
       }
       applyTransformDirect();
       store.updateCameraFromRef(handle);
@@ -2986,7 +4520,7 @@ function PolyMapControls({
       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);
+      buildOrbitControls.applyPan(dx, dy, handle.state, handle, invertRef.current);
       applyTransformDirect();
       store.updateCameraFromRef(handle);
       fireChange();
@@ -3023,12 +4557,12 @@ function PolyMapControls({
       el.style.userSelect = "";
     };
   }, [drag, applyTransformDirect, cameraElRef, cameraRef, store]);
-  (0, import_react15.useEffect)(
+  (0, import_react17.useEffect)(
     () => makeWheelEffect({ wheel, dollyRef, wheelRef, zoomMinRef, zoomMaxRef, distanceMinRef, distanceMaxRef, cameraElRef, cameraRef, applyTransformDirect, store, fireStart, fireChange, fireEnd }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [wheel, applyTransformDirect, cameraElRef, cameraRef, store]
   );
-  (0, import_react15.useEffect)(
+  (0, import_react17.useEffect)(
     () => makeAnimateEffect({ animateOn: !!animate, animateRef, animationPausedShared, applyTransformDirect, cameraRef, store, fireChange }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [!!animate, animationPausedShared, applyTransformDirect, cameraRef, store]
@@ -3037,9 +4571,10 @@ function PolyMapControls({
 }
 
 // src/controls/TransformControls.tsx
-var import_react16 = require("react");
-var import_polycss_core8 = require("@layoutit/polycss-core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_polycss_core9 = require("@layoutit/polycss-core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FALLBACK_CAMERA_STORE = createSceneStore(import_polycss_core9.DEFAULT_CAMERA_STATE);
 var COLOR_X = "#ff3653";
 var COLOR_Y = "#8adb00";
 var COLOR_Z = "#2c8fff";
@@ -3061,8 +4596,10 @@ 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 RING_HALF_THICKNESS_RATIO = 0.02;
+var RING_QUAD_OUTER_RATIO = 1.04;
+var PLANE_HALF_SIZE_RATIO = 0.1;
+var PLANE_OFFSET_RATIO = 0.25;
 var SCREEN_AXIS_DEAD_ZONE_SQ = 1e-4;
 function gizmoLengthForMesh(polygons) {
   if (polygons.length === 0) return FALLBACK_SHAFT_LENGTH;
@@ -3130,6 +4667,23 @@ function userAxisLetterOf(key) {
   const last = key.replace("-", "")[0];
   return last;
 }
+function isAxisBackFacing(cssAxis, sign, rotXDeg, rotYDeg) {
+  const rx = rotXDeg * Math.PI / 180;
+  const ry = rotYDeg * Math.PI / 180;
+  const a = [0, 0, 0];
+  a[cssAxis] = sign;
+  const bx = a[0] * Math.cos(ry) - a[1] * Math.sin(ry);
+  const by = a[0] * Math.sin(ry) + a[1] * Math.cos(ry);
+  const bz = a[2];
+  const cz = by * Math.sin(rx) + bz * Math.cos(rx);
+  void bx;
+  return cz < 0;
+}
+var PLANE_SPECS = [
+  { perpAxis: 2, axisA: 0, axisB: 1, key: "xy", color: COLOR_Z },
+  { perpAxis: 1, axisA: 0, axisB: 2, key: "xz", color: COLOR_Y },
+  { perpAxis: 0, axisA: 1, axisB: 2, key: "yz", color: COLOR_X }
+];
 function startAxisDrag(opts) {
   const {
     cssAxis,
@@ -3197,6 +4751,84 @@ function startAxisDrag(opts) {
   window.addEventListener("pointerup", handleUp);
   window.addEventListener("pointercancel", handleUp);
 }
+function startPlaneDrag(opts) {
+  const {
+    axisA,
+    axisB,
+    probeDistanceCss,
+    wrapper,
+    target,
+    startClientX,
+    startClientY,
+    translationSnap,
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged
+  } = opts;
+  const axisAVec = [0, 0, 0];
+  axisAVec[axisA] = 1;
+  const axisBVec = [0, 0, 0];
+  axisBVec[axisB] = 1;
+  function probe(axisVec) {
+    const el = wrapper.ownerDocument.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = "0";
+    el.style.top = "0";
+    el.style.width = "0";
+    el.style.height = "0";
+    el.style.transform = `translate3d(${axisVec[0] * probeDistanceCss}px, ${axisVec[1] * probeDistanceCss}px, ${axisVec[2] * probeDistanceCss}px)`;
+    wrapper.appendChild(el);
+    const wR = wrapper.getBoundingClientRect();
+    const pR = el.getBoundingClientRect();
+    wrapper.removeChild(el);
+    return {
+      x: (pR.left - wR.left) / probeDistanceCss,
+      y: (pR.top - wR.top) / probeDistanceCss
+    };
+  }
+  const pA = probe(axisAVec);
+  const pB = probe(axisBVec);
+  const det = pA.x * pB.y - pB.x * pA.y;
+  if (Math.abs(det) < 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 tA = (pB.y * dx - pB.x * dy) / det;
+    let tB = (-pA.y * dx + pA.x * dy) / det;
+    if (translationSnap !== null) {
+      tA = Math.round(tA / translationSnap) * translationSnap;
+      tB = Math.round(tB / translationSnap) * translationSnap;
+    }
+    const next = [
+      startPos[0] + tA * axisAVec[0] + tB * axisBVec[0],
+      startPos[1] + tA * axisAVec[1] + tB * axisBVec[1],
+      startPos[2] + tA * axisAVec[2] + tB * axisBVec[2]
+    ];
+    onObjectChange?.({ object: target, position: next });
+    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,
@@ -3219,6 +4851,7 @@ function startRingDrag(opts) {
   const startRotation = target.getRotation() ?? [0, 0, 0];
   onMouseDown?.();
   onDraggingChanged?.(true);
+  const qStart = (0, import_polycss_core9.quatFromEulerXYZ)(startRotation);
   const handleMove = (ev) => {
     const a = Math.atan2(ev.clientY - centerY, ev.clientX - centerX);
     let d = a - lastAngle;
@@ -3228,12 +4861,10 @@ function startRingDrag(opts) {
     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;
+    const axisVec = [0, 0, 0];
+    axisVec[cssAxis] = 1;
+    const qDelta = (0, import_polycss_core9.quatFromAxisAngle)(axisVec, degrees * Math.PI / 180);
+    const newRotation = (0, import_polycss_core9.eulerXYZFromQuat)((0, import_polycss_core9.quatMultiply)(qDelta, qStart));
     onObjectChange?.({ object: target, rotation: newRotation });
     onChange?.();
   };
@@ -3272,15 +4903,24 @@ function PolyTransformControls({
   onMouseUp,
   onDraggingChanged
 }) {
-  const [, forceRender] = (0, import_react16.useState)(0);
-  (0, import_react16.useEffect)(() => {
+  const [, forceRender] = (0, import_react18.useState)(0);
+  (0, import_react18.useEffect)(() => {
     forceRender((n) => n + 1);
   }, [object]);
-  const [hoveredKey, setHoveredKey] = (0, import_react16.useState)(null);
-  const [draggingKey, setDraggingKey] = (0, import_react16.useState)(null);
-  const cameraCtx = (0, import_react16.useContext)(PolyCameraContext);
+  const cameraCtxForRot = (0, import_react18.useContext)(PolyCameraContext);
+  const rotX = useStoreSelector(
+    cameraCtxForRot?.store ?? FALLBACK_CAMERA_STORE,
+    (s) => s.cameraState.rotX
+  );
+  const rotY = useStoreSelector(
+    cameraCtxForRot?.store ?? FALLBACK_CAMERA_STORE,
+    (s) => s.cameraState.rotY
+  );
+  const [hoveredKey, setHoveredKey] = (0, import_react18.useState)(null);
+  const [draggingKey, setDraggingKey] = (0, import_react18.useState)(null);
+  const cameraCtx = (0, import_react18.useContext)(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef;
-  const dragRef = (0, import_react16.useRef)({
+  const dragRef = (0, import_react18.useRef)({
     target: null,
     mode: "translate",
     shaftLengthCss: 0,
@@ -3289,7 +4929,7 @@ function PolyTransformControls({
     translationSnap: null,
     rotationSnap: null
   });
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const cameraEl = cameraElRef?.current;
     if (!cameraEl) return;
     const onPointerDown = (event) => {
@@ -3298,6 +4938,42 @@ function PolyTransformControls({
       const targetEl = event.target;
       if (targetEl?.closest(".polycss-transform-gizmo")) return;
       if (state.mode === "translate") {
+        for (const spec of PLANE_SPECS) {
+          const aL = ["x", "y", "z"][spec.axisA];
+          const bL = ["x", "y", "z"][spec.axisB];
+          if (!state.show[aL] || !state.show[bL]) continue;
+          const planeEl = document.querySelector(
+            `.polycss-transform-plane--${spec.key}`
+          );
+          if (!planeEl) continue;
+          if (!pointInMeshElement(planeEl, event.clientX, event.clientY)) continue;
+          event.preventDefault();
+          event.stopPropagation();
+          const wrapper = planeEl.closest(
+            "[data-poly-transform-controls]"
+          );
+          if (!wrapper) return;
+          setDraggingKey(spec.key);
+          startPlaneDrag({
+            axisA: spec.axisA,
+            axisB: spec.axisB,
+            probeDistanceCss: 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;
+        }
         for (const spec of ARROW_SPECS) {
           if (!state.show[userAxisLetterOf(spec.key)]) continue;
           const arrowEl = document.querySelector(
@@ -3397,9 +5073,9 @@ function PolyTransformControls({
     onDraggingChanged
   };
   const wrapperStyle = {
+    transform: `translate3d(${wrapperPos[0]}px, ${wrapperPos[1]}px, ${wrapperPos[2]}px)`,
     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
@@ -3407,7 +5083,7 @@ function PolyTransformControls({
     // own; descendants opt in via the default `auto`.
     zIndex: 1e3
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: "polycss-transform-controls",
@@ -3422,7 +5098,8 @@ function PolyTransformControls({
           const hovered = hoveredKey === spec.key;
           const dragging = draggingKey === spec.key;
           const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          const backFacing = isAxisBackFacing(spec.cssAxis, spec.sign, rotX, rotY);
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             TranslateArrow,
             {
               cssAxis: spec.cssAxis,
@@ -3430,6 +5107,41 @@ function PolyTransformControls({
               axisKey: spec.key,
               color: withAlpha(spec.color, alpha),
               shaftLengthCss,
+              includeShaft: !backFacing,
+              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 === "translate" && PLANE_SPECS.map((spec) => {
+          const aLetter = ["x", "y", "z"][spec.axisA];
+          const bLetter = ["x", "y", "z"][spec.axisB];
+          const show = { x: showX, y: showY, z: showZ }[aLetter] && { x: showX, y: showY, z: showZ }[bLetter];
+          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__ */ (0, import_jsx_runtime8.jsx)(
+            TranslatePlane,
+            {
+              axisA: spec.axisA,
+              axisB: spec.axisB,
+              perpAxis: spec.perpAxis,
+              planeKey: spec.key,
+              color: withAlpha(spec.color, alpha),
+              shaftLengthCss,
+              rotX,
+              rotY,
               target,
               enabled,
               translationSnap,
@@ -3451,7 +5163,7 @@ function PolyTransformControls({
           const hovered = hoveredKey === spec.key;
           const dragging = draggingKey === spec.key;
           const alpha = dragging ? ALPHA_DRAGGING : hovered ? ALPHA_HOVER : ALPHA_IDLE;
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             RotateRing,
             {
               cssAxis: spec.cssAxis,
@@ -3483,6 +5195,7 @@ function TranslateArrow({
   axisKey,
   color,
   shaftLengthCss,
+  includeShaft,
   target,
   enabled,
   translationSnap,
@@ -3495,7 +5208,7 @@ function TranslateArrow({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = (0, import_react16.useRef)({
+  const cbRef = (0, import_react18.useRef)({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -3517,19 +5230,20 @@ function TranslateArrow({
     enabled,
     translationSnap
   };
-  const polygons = (0, import_react16.useMemo)(() => {
+  const polygons = (0, import_react18.useMemo)(() => {
     const lengthWorld = shaftLengthCss / SCENE_TILE_SIZE;
-    return (0, import_polycss_core8.arrowPolygons)({
+    return (0, import_polycss_core9.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
+      color,
+      shaft: includeShaft
     });
-  }, [cssAxis, sign, color, shaftLengthCss]);
-  const onPointerDown = (0, import_react16.useCallback)(
+  }, [cssAxis, sign, color, shaftLengthCss, includeShaft]);
+  const onPointerDown = (0, import_react18.useCallback)(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -3558,7 +5272,7 @@ function TranslateArrow({
     },
     [cssAxis, sign, target, shaftLengthCss]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     PolyMesh,
     {
       polygons,
@@ -3570,6 +5284,107 @@ function TranslateArrow({
     }
   );
 }
+function TranslatePlane({
+  axisA,
+  axisB,
+  perpAxis,
+  planeKey,
+  color,
+  shaftLengthCss,
+  rotX,
+  rotY,
+  target,
+  enabled,
+  translationSnap,
+  onChange,
+  onObjectChange,
+  onMouseDown,
+  onMouseUp,
+  onDraggingChanged,
+  onHoverChange,
+  onDraggingStart,
+  onDraggingStop
+}) {
+  const cbRef = (0, import_react18.useRef)({
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged,
+    onDraggingStart,
+    onDraggingStop,
+    enabled,
+    translationSnap
+  });
+  cbRef.current = {
+    onChange,
+    onObjectChange,
+    onMouseDown,
+    onMouseUp,
+    onDraggingChanged,
+    onDraggingStart,
+    onDraggingStop,
+    enabled,
+    translationSnap
+  };
+  const polygons = (0, import_react18.useMemo)(() => {
+    const lengthWorld = shaftLengthCss / SCENE_TILE_SIZE;
+    const worldPerp = WORLD_AXIS_FOR_CSS[perpAxis];
+    const worldA = (worldPerp + 1) % 3;
+    const worldB = (worldPerp + 2) % 3;
+    const cssAForOffset = WORLD_AXIS_FOR_CSS[worldA];
+    const cssBForOffset = WORLD_AXIS_FOR_CSS[worldB];
+    const signA = isAxisBackFacing(cssAForOffset, 1, rotX, rotY) ? -1 : 1;
+    const signB = isAxisBackFacing(cssBForOffset, 1, rotX, rotY) ? -1 : 1;
+    const mag = lengthWorld * PLANE_OFFSET_RATIO;
+    return (0, import_polycss_core9.planePolygons)({
+      axis: worldPerp,
+      size: lengthWorld * PLANE_HALF_SIZE_RATIO,
+      offset: [signA * mag, signB * mag],
+      color
+    });
+  }, [perpAxis, color, shaftLengthCss, rotX, rotY]);
+  const onPointerDown = (0, import_react18.useCallback)(
+    (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?.();
+      startPlaneDrag({
+        axisA,
+        axisB,
+        probeDistanceCss: 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);
+        }
+      });
+    },
+    [axisA, axisB, target, shaftLengthCss]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    PolyMesh,
+    {
+      polygons,
+      onPointerDown,
+      onPointerOver: () => onHoverChange?.(true),
+      onPointerOut: () => onHoverChange?.(false),
+      className: `polycss-transform-gizmo polycss-transform-plane polycss-transform-plane--${planeKey}`,
+      textureLighting: "baked"
+    }
+  );
+}
 function RotateRing({
   cssAxis,
   axisKey,
@@ -3587,7 +5402,7 @@ function RotateRing({
   onDraggingStart,
   onDraggingStop
 }) {
-  const cbRef = (0, import_react16.useRef)({
+  const cbRef = (0, import_react18.useRef)({
     onChange,
     onObjectChange,
     onMouseDown,
@@ -3609,17 +5424,18 @@ function RotateRing({
     enabled,
     rotationSnap
   };
-  const polygons = (0, import_react16.useMemo)(() => {
+  const polygons = (0, import_react18.useMemo)(() => {
     const radiusWorld = radiusCss / SCENE_TILE_SIZE;
-    return (0, import_polycss_core8.ringPolygons)({
+    const outerWorld = radiusWorld * RING_QUAD_OUTER_RATIO;
+    return (0, import_polycss_core9.ringQuadPolygons)({
       axis: WORLD_AXIS_FOR_CSS[cssAxis],
-      radius: radiusWorld,
-      halfThickness: radiusWorld * RING_HALF_THICKNESS_RATIO,
-      segments: RING_SEGMENTS,
+      outerRadius: outerWorld,
       color
     });
   }, [cssAxis, color, radiusCss]);
-  const onPointerDown = (0, import_react16.useCallback)(
+  const ringInnerRatio = (1 - RING_HALF_THICKNESS_RATIO) / RING_QUAD_OUTER_RATIO;
+  const ringOuterRatio = (1 + RING_HALF_THICKNESS_RATIO) / RING_QUAD_OUTER_RATIO;
+  const onPointerDown = (0, import_react18.useCallback)(
     (e) => {
       if (!cbRef.current.enabled) return;
       e.stopPropagation();
@@ -3646,7 +5462,7 @@ function RotateRing({
     },
     [cssAxis, target]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     PolyMesh,
     {
       polygons,
@@ -3654,15 +5470,19 @@ function RotateRing({
       onPointerOver: () => onHoverChange?.(true),
       onPointerOut: () => onHoverChange?.(false),
       className: `polycss-transform-gizmo polycss-transform-ring polycss-transform-ring--${axisKey}`,
+      style: {
+        ["--ring-inner-ratio"]: ringInnerRatio,
+        ["--ring-outer-ratio"]: ringOuterRatio
+      },
       textureLighting: "baked"
     }
   );
 }
 
 // src/select/Select.tsx
-var import_react17 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var SelectContext = (0, import_react17.createContext)(null);
+var import_react19 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SelectContext = (0, import_react19.createContext)(null);
 function PolySelect({
   multiple = false,
   filter,
@@ -3673,19 +5493,19 @@ function PolySelect({
   className,
   style
 }) {
-  const [selected, setSelectedState] = (0, import_react17.useState)([]);
-  const filterRef = (0, import_react17.useRef)(filter);
+  const [selected, setSelectedState] = (0, import_react19.useState)([]);
+  const filterRef = (0, import_react19.useRef)(filter);
   filterRef.current = filter;
-  const onChangeRef = (0, import_react17.useRef)(onChange);
+  const onChangeRef = (0, import_react19.useRef)(onChange);
   onChangeRef.current = onChange;
-  const multipleRef = (0, import_react17.useRef)(multiple);
+  const multipleRef = (0, import_react19.useRef)(multiple);
   multipleRef.current = multiple;
-  const apply = (0, import_react17.useCallback)((next) => {
+  const apply = (0, import_react19.useCallback)((next) => {
     const filtered = filterRef.current ? filterRef.current(next) : next;
     setSelectedState(filtered);
     if (onChangeRef.current) onChangeRef.current(filtered);
   }, []);
-  const api = (0, import_react17.useMemo)(() => {
+  const api = (0, import_react19.useMemo)(() => {
     return {
       selected,
       set: (next) => apply(next),
@@ -3718,14 +5538,14 @@ function PolySelect({
       has: (h) => selected.includes(h)
     };
   }, [selected, apply]);
-  const wrapperRef = (0, import_react17.useRef)(null);
-  const cameraCtx = (0, import_react17.useContext)(PolyCameraContext);
+  const wrapperRef = (0, import_react19.useRef)(null);
+  const cameraCtx = (0, import_react19.useContext)(PolyCameraContext);
   const cameraElRef = cameraCtx?.cameraElRef;
-  const clearOnMissRef = (0, import_react17.useRef)(clearOnMiss);
+  const clearOnMissRef = (0, import_react19.useRef)(clearOnMiss);
   clearOnMissRef.current = clearOnMiss;
-  const onPointerMissedRef = (0, import_react17.useRef)(onPointerMissed);
+  const onPointerMissedRef = (0, import_react19.useRef)(onPointerMissed);
   onPointerMissedRef.current = onPointerMissed;
-  const findMeshUnderPoint2 = (0, import_react17.useCallback)(
+  const findMeshUnderPoint2 = (0, import_react19.useCallback)(
     (clientX, clientY) => findMeshUnderPoint(
       clientX,
       clientY,
@@ -3733,7 +5553,7 @@ function PolySelect({
     ),
     []
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const cameraEl = cameraElRef?.current;
     if (!cameraEl) return;
     const onClick = (event) => {
@@ -3780,7 +5600,7 @@ function PolySelect({
     }
   };
   const wrapperStyle = { display: "contents", ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       ref: wrapperRef,
@@ -3793,10 +5613,10 @@ function PolySelect({
   ) });
 }
 function usePolySelect() {
-  return (0, import_react17.useContext)(SelectContext)?.selected ?? [];
+  return (0, import_react19.useContext)(SelectContext)?.selected ?? [];
 }
 function usePolySelectionApi() {
-  const ctx = (0, import_react17.useContext)(SelectContext);
+  const ctx = (0, import_react19.useContext)(SelectContext);
   if (!ctx) {
     throw new Error("polycss: usePolySelectionApi must be used inside <PolySelect>.");
   }
@@ -3804,9 +5624,9 @@ function usePolySelectionApi() {
 }
 
 // src/helpers/PolyAxesHelper.tsx
-var import_react18 = require("react");
-var import_polycss_core9 = require("@layoutit/polycss-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_polycss_core10 = require("@layoutit/polycss-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function PolyAxesHelper({
   size,
   thickness,
@@ -3815,17 +5635,17 @@ function PolyAxesHelper({
   yColor,
   zColor
 }) {
-  const polygons = (0, import_react18.useMemo)(
-    () => (0, import_polycss_core9.axesHelperPolygons)({ size, thickness, negative, xColor, yColor, zColor }),
+  const polygons = (0, import_react20.useMemo)(
+    () => (0, import_polycss_core10.axesHelperPolygons)({ size, thickness, negative, xColor, yColor, zColor }),
     [size, thickness, negative, xColor, yColor, zColor]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PolyMesh, { polygons });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PolyMesh, { polygons });
 }
 
 // src/helpers/PolyDirectionalLightHelper.tsx
-var import_react19 = require("react");
-var import_polycss_core10 = require("@layoutit/polycss-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_polycss_core11 = require("@layoutit/polycss-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var TILE = 50;
 function PolyDirectionalLightHelper({
   light,
@@ -3835,11 +5655,11 @@ function PolyDirectionalLightHelper({
   color
 }) {
   const swatch = color ?? light.color ?? "#ffd54a";
-  const polygons = (0, import_react19.useMemo)(
-    () => (0, import_polycss_core10.octahedronPolygons)({ center: [0, 0, 0], size, color: swatch }),
+  const polygons = (0, import_react21.useMemo)(
+    () => (0, import_polycss_core11.octahedronPolygons)({ center: [0, 0, 0], size, color: swatch }),
     [size, swatch]
   );
-  const meshPosition = (0, import_react19.useMemo)(() => {
+  const meshPosition = (0, import_react21.useMemo)(() => {
     const [dx, dy, dz] = light.direction;
     const len = Math.hypot(dx, dy, dz) || 1;
     const tx = target?.[0] ?? 0;
@@ -3850,24 +5670,24 @@ function PolyDirectionalLightHelper({
     const worldZ = tz + dz / len * distance;
     return [worldY * TILE, worldX * TILE, worldZ * TILE];
   }, [light.direction, target, distance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PolyMesh, { polygons, position: meshPosition });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PolyMesh, { polygons, position: meshPosition });
 }
 
 // src/styles/colorResolver.ts
-var import_polycss_core11 = require("@layoutit/polycss-core");
+var import_polycss_core12 = require("@layoutit/polycss-core");
 
 // src/animation/usePolyAnimation.ts
-var import_react20 = require("react");
-var import_polycss_core12 = require("@layoutit/polycss-core");
+var import_react22 = require("react");
+var import_polycss_core13 = require("@layoutit/polycss-core");
 function resolveRoot(rootArg) {
   if (!rootArg) return null;
   if ("current" in rootArg) return rootArg.current;
   return rootArg;
 }
 function usePolyAnimation(clips, controller, root) {
-  const internalRef = (0, import_react20.useRef)(null);
-  const mixerRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const internalRef = (0, import_react22.useRef)(null);
+  const mixerRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (!clips || clips.length === 0 || !controller) {
       mixerRef.current = null;
       return;
@@ -3877,14 +5697,14 @@ function usePolyAnimation(clips, controller, root) {
       mixerRef.current = null;
       return;
     }
-    mixerRef.current = (0, import_polycss_core12.createPolyAnimationMixer)(resolvedRoot, controller);
+    mixerRef.current = (0, import_polycss_core13.createPolyAnimationMixer)(resolvedRoot, controller);
     return () => {
       mixerRef.current?.stopAllAction();
       mixerRef.current?.uncacheRoot();
       mixerRef.current = null;
     };
   }, [clips, controller]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!clips || clips.length === 0 || !controller) return;
     let rafId;
     let lastTime = null;
@@ -3907,7 +5727,7 @@ function usePolyAnimation(clips, controller, root) {
   }, [clips, controller]);
   const resolvedClips = clips ?? [];
   const resolvedNames = resolvedClips.map((c) => c.name);
-  const actions = (0, import_react20.useMemo)(() => {
+  const actions = (0, import_react22.useMemo)(() => {
     const target = {};
     for (const clip of resolvedClips) {
       Object.defineProperty(target, clip.name, {
@@ -3935,10 +5755,11 @@ function usePolyAnimation(clips, controller, root) {
 }
 
 // src/index.ts
-var import_polycss_core13 = require("@layoutit/polycss-core");
+var import_polycss_core14 = require("@layoutit/polycss-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BASE_TILE,
+  CAMERA_BACKFACE_CULL_EPS,
   DEFAULT_CAMERA_STATE,
   DEFAULT_PROJECTION,
   LoopOnce,
@@ -3949,6 +5770,8 @@ var import_polycss_core13 = require("@layoutit/polycss-core");
   PolyCamera,
   PolyCameraContext,
   PolyDirectionalLightHelper,
+  PolyFirstPersonControls,
+  PolyGround,
   PolyMapControls,
   PolyMesh,
   PolyOrbitControls,
@@ -3957,11 +5780,19 @@ var import_polycss_core13 = require("@layoutit/polycss-core");
   PolyScene,
   PolySelect,
   PolyTransformControls,
+  VOXEL_CAMERA_CULL_AXIS_EPS,
+  VOXEL_CAMERA_CULL_NORMAL_LIMIT,
   arrowPolygons,
   axesHelperPolygons,
   bakeSolidTextureSampledPolygons,
   bakeSolidTextureSamples,
+  boxPolygons,
   buildSceneContext,
+  cameraCullNormalGroups,
+  cameraCullNormalGroupsFromPolygons,
+  cameraCullNormalKey,
+  cameraCullVisibleSignature,
+  cameraFacingDepth,
   clampChannel,
   computeSceneBbox,
   computeShapeLighting,
@@ -3975,11 +5806,15 @@ var import_polycss_core13 = require("@layoutit/polycss-core");
   formatColor,
   injectPolyBaseStyles,
   inverseRotateVec3,
+  isAxisAlignedSurfaceNormal,
+  isVoxelCameraCullableNormalGroups,
   loadMesh,
   mergePolygons,
+  normalFacesCamera,
   normalizeInvertMultiplier,
   normalizePolygons,
   octahedronPolygons,
+  optimizeMeshPolygons,
   parseColor,
   parseGltf,
   parseHexColor,
@@ -3989,7 +5824,9 @@ var import_polycss_core13 = require("@layoutit/polycss-core");
   parseRgbColor,
   parseVox,
   pointInMeshElement,
+  polygonCssSurfaceNormal,
   polygonFaces,
+  polygonFacesCamera,
   ringPolygons,
   rotateVec3,
   shadeColor,