@almadar/ui 5.141.0 → 5.143.0

package/dist/lib/drawable/three/index.js

@@ -1,11 +1,13 @@
-import React3, { forwardRef, useRef, useState, useEffect, useMemo, useImperativeHandle, useCallback, createContext, useContext, Component, useReducer } from 'react';
+import React3, { createContext, forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, useCallback, useContext, Component, useReducer } from 'react';
 import { EventBusContext, useTraitScopeChain } from '@almadar/ui/providers';
 import { createLogger } from '@almadar/logger';
 import { Canvas, useThree, useFrame } from '@react-three/fiber';
-import * as THREE10 from 'three';
+import * as THREE11 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 import { Grid, OrbitControls, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Bloom, Vignette, EffectComposer, DepthOfField } from '@react-three/postprocessing';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
 import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { clsx } from 'clsx';
@@ -13,7 +15,6 @@ import { twMerge } from 'tailwind-merge';
 import { OrbitControls as OrbitControls$1 } from 'three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
-import { EffectComposer, Bloom, DepthOfField, Vignette } from '@react-three/postprocessing';
 import { useTranslate } from '@almadar/ui/hooks';
 
 var __defProp = Object.defineProperty;
@@ -450,6 +451,10 @@ function Lighting3D({
   directionalIntensity = 0.8,
   directionalColor = "#ffffff",
   directionalPosition = [10, 20, 10],
+  hemisphereIntensity = 0.3,
+  hemisphereColor = "#87ceeb",
+  hemisphereGroundColor = "#362d1d",
+  points,
   shadows = true,
   shadowMapSize = 2048,
   shadowCameraSize = 20,
@@ -482,22 +487,63 @@ function Lighting3D({
     /* @__PURE__ */ jsx(
       "hemisphereLight",
       {
-        intensity: 0.3,
-        color: "#87ceeb",
-        groundColor: "#362d1d"
+        intensity: hemisphereIntensity,
+        color: hemisphereColor,
+        groundColor: hemisphereGroundColor
       }
     ),
+    points?.map((p, i) => /* @__PURE__ */ jsx(
+      "pointLight",
+      {
+        position: p.position,
+        intensity: p.intensity,
+        color: p.color,
+        distance: p.distance,
+        decay: p.decay
+      },
+      i
+    )),
     showHelpers && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       "directionalLightHelper",
       {
         args: [
-          new THREE10.DirectionalLight(directionalColor, directionalIntensity),
+          new THREE11.DirectionalLight(directionalColor, directionalIntensity),
           5
         ]
       }
     ) })
   ] });
 }
+function Effects3D({ post }) {
+  if (!post || !post.bloom && !post.vignette) return null;
+  const passes = [];
+  if (post.bloom) {
+    passes.push(
+      /* @__PURE__ */ jsx(
+        Bloom,
+        {
+          intensity: post.bloom.intensity ?? 1,
+          luminanceThreshold: post.bloom.threshold ?? 0.9,
+          luminanceSmoothing: post.bloom.smoothing ?? 0.3
+        },
+        "bloom"
+      )
+    );
+  }
+  if (post.vignette) {
+    passes.push(
+      /* @__PURE__ */ jsx(
+        Vignette,
+        {
+          offset: post.vignette.offset ?? 0.3,
+          darkness: post.vignette.darkness ?? 0.6
+        },
+        "vignette"
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(EffectComposer, { children: passes });
+}
 function CameraController3D({
   onCameraChange
 }) {
@@ -518,8 +564,8 @@ function FollowCamera3D({
   offset
 }) {
   const { camera } = useThree();
-  const look = useRef(new THREE10.Vector3(target[0], target[1], target[2]));
-  const goal = useRef(new THREE10.Vector3());
+  const look = useRef(new THREE11.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE11.Vector3());
   useFrame((_, delta) => {
     const t = Math.min(1, delta * 5);
     goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
@@ -540,6 +586,179 @@ function create3DProjector(opts = {}) {
     toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
   };
 }
+var BoneStore = class {
+  constructor() {
+    __publicField(this, "bones", /* @__PURE__ */ new Map());
+    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+  }
+  register(name, bone) {
+    this.bones.set(name, bone);
+    this.notify();
+    return () => {
+      if (this.bones.get(name) === bone) {
+        this.bones.delete(name);
+        this.notify();
+      }
+    };
+  }
+  get(name) {
+    return this.bones.get(name);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const l of this.listeners) l();
+  }
+};
+var BoneRegistryContext = createContext(null);
+function isAnimatedGroup(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+var MESH_SEGMENTS_DEFAULT = 24;
+function polyhedronBounds(vertices) {
+  if (!vertices || vertices.length < 3) return null;
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+  for (const v of vertices) {
+    if (v.length < 3 || !v.every((c) => Number.isFinite(c))) return null;
+    for (let axis = 0; axis < 3; axis++) {
+      min[axis] = Math.min(min[axis], v[axis]);
+      max[axis] = Math.max(max[axis], v[axis]);
+    }
+  }
+  return { min, max };
+}
+function clampSegments(segments) {
+  const s = segments ?? MESH_SEGMENTS_DEFAULT;
+  return Math.min(64, Math.max(3, Math.round(s)));
+}
+function isAnimatedMesh(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+var lerp = (a, b, k) => a + (b - a) * k;
+var NUMERIC_TRACKS = [
+  "offsetX",
+  "offsetY",
+  "offsetZ",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
+  "opacity",
+  "emissiveIntensity"
+];
+function applyMeshAnimation(node, timeMs) {
+  const anim = node.animation;
+  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return null;
+  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
+  const cycle = timeMs / anim.durationMs;
+  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
+  const trackValue = (key) => {
+    const defined = frames.filter((f) => f[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f of defined) {
+      if (f.at <= t) prev = f;
+      else if (!next) next = f;
+    }
+    if (!prev) return defined[0][key];
+    if (!next) return prev[key];
+    const span = next.at - prev.at;
+    const k = span > 0 ? (t - prev.at) / span : 1;
+    const a = prev[key];
+    const b = next[key];
+    if (typeof a === "number" && typeof b === "number") return lerp(a, b, k);
+    return a;
+  };
+  const num = {};
+  for (const key of NUMERIC_TRACKS) {
+    const v = trackValue(key);
+    if (v !== void 0) num[key] = v;
+  }
+  return {
+    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
+    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
+    scale: num.scale ?? 1,
+    opacity: num.opacity,
+    emissiveIntensity: num.emissiveIntensity,
+    color: trackValue("color"),
+    emissive: trackValue("emissive")
+  };
+}
+var NUMERIC_TRACKS2 = [
+  "offsetX",
+  "offsetY",
+  "rotate",
+  "opacity",
+  "radiusX",
+  "radiusY",
+  "width",
+  "height",
+  "strokeWidth",
+  "strokeDashOffset",
+  "blur"
+];
+function isAnimatedShape(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+var lerp2 = (a, b, k) => a + (b - a) * k;
+function applyShapeAnimation(node, timeMs) {
+  const anim = node.animation;
+  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return node;
+  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
+  const cycle = timeMs / anim.durationMs;
+  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
+  const out = { ...node };
+  const trackValue = (key) => {
+    const defined = frames.filter((f) => f[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f of defined) {
+      if (f.at <= t) prev = f;
+      else if (!next) next = f;
+    }
+    if (!prev) return defined[0][key];
+    if (!next) return prev[key];
+    const span = next.at - prev.at;
+    const k = span > 0 ? (t - prev.at) / span : 1;
+    const a = prev[key];
+    const b = next[key];
+    if (typeof a === "number" && typeof b === "number") return lerp2(a, b, k);
+    return a;
+  };
+  for (const key of NUMERIC_TRACKS2) {
+    const v = trackValue(key);
+    if (v !== void 0) out[key] = v;
+  }
+  const fill = trackValue("fill");
+  if (fill !== void 0) out.fill = fill;
+  const stroke = trackValue("stroke");
+  if (stroke !== void 0) out.stroke = stroke;
+  const shadowFrames = frames.filter((f) => f.shadow !== void 0);
+  if (shadowFrames.length > 0) {
+    const sh = trackValue("shadow");
+    if (sh !== void 0) {
+      let prevSh;
+      let nextSh;
+      for (const f of shadowFrames) {
+        if (f.at <= t) prevSh = f;
+        else if (!nextSh) nextSh = f;
+      }
+      if (prevSh?.shadow && nextSh?.shadow) {
+        const span = nextSh.at - prevSh.at;
+        const k = span > 0 ? (t - prevSh.at) / span : 1;
+        out.shadow = { color: prevSh.shadow.color, blur: lerp2(prevSh.shadow.blur, nextSh.shadow.blur, k) };
+      } else {
+        out.shadow = sh;
+      }
+    }
+  }
+  return out;
+}
 
 // lib/atlasSlice.ts
 var atlasCache = /* @__PURE__ */ new Map();
@@ -675,12 +894,12 @@ function ModelLoader({
     if (!loadedModel) return null;
     const cloned = clone(loadedModel);
     cloned.updateMatrixWorld(true);
-    const tintColor = tint ? new THREE10.Color(tint) : null;
+    const tintColor = tint ? new THREE11.Color(tint) : null;
     cloned.traverse((child) => {
-      if (child instanceof THREE10.Mesh) {
+      if (child instanceof THREE11.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
-        if (tintColor && child.material instanceof THREE10.MeshStandardMaterial) {
+        if (tintColor && child.material instanceof THREE11.MeshStandardMaterial) {
           const mat = child.material.clone();
           mat.color.multiply(tintColor);
           child.material = mat;
@@ -689,7 +908,7 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = useMemo(() => model ? new THREE10.AnimationMixer(model) : null, [model]);
+  const mixer = useMemo(() => model ? new THREE11.AnimationMixer(model) : null, [model]);
   useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
@@ -706,8 +925,8 @@ function ModelLoader({
   });
   const normFactor = useMemo(() => {
     if (!model) return 1;
-    const box = new THREE10.Box3().setFromObject(model);
-    const size = new THREE10.Vector3();
+    const box = new THREE11.Box3().setFromObject(model);
+    const size = new THREE11.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
@@ -797,7 +1016,7 @@ var warnUnsupported3d = (kind) => {
   warnedUnsupported.add(kind);
   mesh3dLog.warn("unsupported drawable kind on the 3D backend \u2014 skipped", { kind });
 };
-var CrossOriginTextureLoader = class extends THREE10.TextureLoader {
+var CrossOriginTextureLoader = class extends THREE11.TextureLoader {
   constructor() {
     super();
     this.crossOrigin = "anonymous";
@@ -815,7 +1034,7 @@ function useBillboardTexture(url) {
       url,
       (texture) => {
         if (!active) return;
-        texture.colorSpace = THREE10.SRGBColorSpace;
+        texture.colorSpace = THREE11.SRGBColorSpace;
         setState({ texture, error: false });
       },
       void 0,
@@ -868,7 +1087,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
   }, [texture, frame, node.height, node.width, anchor, cellSize]);
   const groundGeometry = React3.useMemo(() => {
     if (anchor !== "top-left" || !texture || !atlasReady) return null;
-    const g = new THREE10.PlaneGeometry(size.width, size.height);
+    const g = new THREE11.PlaneGeometry(size.width, size.height);
     g.rotateX(-Math.PI / 2);
     return g;
   }, [anchor, texture, atlasReady, size.width, size.height]);
@@ -876,15 +1095,15 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
     if (anchor === "top-left") {
       return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
         /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
-        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE10.DoubleSide })
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE11.DoubleSide })
       ] }) });
     }
     return /* @__PURE__ */ jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
       /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
-      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE10.DoubleSide })
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE11.DoubleSide })
     ] }) });
   }
-  texture.magFilter = texture.minFilter = THREE10.NearestFilter;
+  texture.magFilter = texture.minFilter = THREE11.NearestFilter;
   texture.needsUpdate = true;
   if (frame) {
     texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
@@ -897,7 +1116,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE10.DoubleSide,
+        side: THREE11.DoubleSide,
         opacity: (node.opacity ?? 1) * groupOpacity
       }
     ) }) });
@@ -910,7 +1129,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE10.DoubleSide,
+        side: THREE11.DoubleSide,
         opacity: node.opacity ?? 1
       }
     )
@@ -941,8 +1160,27 @@ function Sprite3D({ node, projector, groupOpacity = 1 }) {
   return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize, groupOpacity });
 }
 function Shape3D({ node, projector, groupOpacity = 1 }) {
-  if (!isValidScenePos(node.position)) return null;
-  const world = projector.toWorld(node.position);
+  const groupRef = React3.useRef(null);
+  const materialRef = React3.useRef(null);
+  const animated = isAnimatedShape(node);
+  const validPos = isValidScenePos(node.position);
+  const world = validPos ? projector.toWorld(node.position) : [0, 0, 0];
+  useFrame(({ clock }) => {
+    if (!animated || !groupRef.current) return;
+    const view = applyShapeAnimation(node, clock.elapsedTime * 1e3);
+    groupRef.current.position.set(
+      world[0] + (view.offsetX ?? 0) * projector.cellSize,
+      world[1] + 0.02,
+      world[2] + (view.offsetY ?? 0) * projector.cellSize
+    );
+    groupRef.current.rotation.y = -(view.rotate ?? 0);
+    const mat = materialRef.current;
+    if (mat) {
+      mat.opacity = (view.opacity ?? node.opacity ?? 1) * groupOpacity;
+      if (view.fill) mat.color.set(view.fill);
+    }
+  });
+  if (!validPos) return null;
   const color = node.fill ?? node.stroke ?? "#ffffff";
   let geometry;
   switch (node.shape) {
@@ -960,7 +1198,7 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
     }
     case "poly": {
       if (!node.points || node.points.length === 0) return null;
-      const s = new THREE10.Shape();
+      const s = new THREE11.Shape();
       node.points.forEach((p, i) => {
         if (i === 0) s.moveTo(p.x, p.y);
         else s.lineTo(p.x, p.y);
@@ -976,12 +1214,12 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
     default:
       return null;
   }
-  return /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
+  return /* @__PURE__ */ jsx("group", { ref: groupRef, position: [world[0], world[1] + 0.02, world[2]], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
     geometry,
-    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE10.DoubleSide })
-  ] });
+    /* @__PURE__ */ jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE11.DoubleSide })
+  ] }) });
 }
-function Text3D({ node, projector }) {
+function Text3D({ node, projector, groupOpacity = 1 }) {
   if (!isValidScenePos(node.position)) return null;
   const world = projector.toWorld(node.position);
   return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsx(
@@ -993,68 +1231,52 @@ function Text3D({ node, projector }) {
       anchorY: "middle",
       outlineWidth: 0.02,
       outlineColor: "#000000",
+      fillOpacity: groupOpacity,
+      outlineOpacity: groupOpacity,
       children: node.text
     }
   ) });
 }
-var MESH_SEGMENTS_DEFAULT = 24;
-function clampSegments(segments) {
-  const s = segments ?? MESH_SEGMENTS_DEFAULT;
-  return Math.min(64, Math.max(3, Math.round(s)));
-}
-function isAnimatedMesh(node) {
-  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
-}
-var lerp = (a, b, k) => a + (b - a) * k;
-var NUMERIC_TRACKS = [
-  "offsetX",
-  "offsetY",
-  "offsetZ",
-  "rotateX",
-  "rotateY",
-  "rotateZ",
-  "scale",
-  "opacity",
-  "emissiveIntensity"
-];
-function applyMeshAnimation(node, timeMs) {
-  const anim = node.animation;
-  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return null;
-  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
-  const cycle = timeMs / anim.durationMs;
-  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
-  const trackValue = (key) => {
-    const defined = frames.filter((f) => f[key] !== void 0);
-    if (defined.length === 0) return void 0;
-    let prev;
-    let next;
-    for (const f of defined) {
-      if (f.at <= t) prev = f;
-      else if (!next) next = f;
+var GROUND_ROTATION = [-Math.PI / 2, 0, 0];
+function polyhedronGeometry(node, cellSize) {
+  const verts = node.vertices;
+  const faces = node.faces;
+  const bounds = polyhedronBounds(verts);
+  if (!verts || !bounds || !faces || faces.length === 0) return null;
+  const positions = new Float32Array(verts.length * 3);
+  for (let i = 0; i < verts.length; i++) {
+    positions[i * 3] = verts[i][0] * cellSize;
+    positions[i * 3 + 1] = verts[i][2] * cellSize;
+    positions[i * 3 + 2] = verts[i][1] * cellSize;
+  }
+  const index = [];
+  for (const face of faces) {
+    if (face.length < 3) continue;
+    const [a, b, c] = face;
+    if (a === b || b === c || a === c) continue;
+    if (![a, b, c].every((i) => Number.isInteger(i) && i >= 0 && i < verts.length)) continue;
+    index.push(a, c, b);
+  }
+  if (index.length === 0) return null;
+  const geometry = new THREE11.BufferGeometry();
+  geometry.setAttribute("position", new THREE11.BufferAttribute(positions, 3));
+  geometry.setIndex(index);
+  geometry.computeVertexNormals();
+  const skin = node.skin;
+  if (skin && skin.indices.length === verts.length && skin.weights.length === verts.length) {
+    const skinIndex = new Uint16Array(verts.length * 4);
+    const skinWeight = new Float32Array(verts.length * 4);
+    for (let i = 0; i < verts.length; i++) {
+      for (let k = 0; k < 4; k++) {
+        skinIndex[i * 4 + k] = skin.indices[i][k] ?? 0;
+        skinWeight[i * 4 + k] = skin.weights[i][k] ?? 0;
+      }
     }
-    if (!prev) return defined[0][key];
-    if (!next) return prev[key];
-    const span = next.at - prev.at;
-    const k = span > 0 ? (t - prev.at) / span : 1;
-    const a = prev[key];
-    const b = next[key];
-    if (typeof a === "number" && typeof b === "number") return lerp(a, b, k);
-    return a;
-  };
-  const num = {};
-  for (const key of NUMERIC_TRACKS) {
-    const v = trackValue(key);
-    if (v !== void 0) num[key] = v;
+    geometry.setAttribute("skinIndex", new THREE11.BufferAttribute(skinIndex, 4));
+    geometry.setAttribute("skinWeight", new THREE11.BufferAttribute(skinWeight, 4));
   }
-  return {
-    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
-    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
-    scale: num.scale ?? 1,
-    opacity: num.opacity,
-    emissiveIntensity: num.emissiveIntensity,
-    color: trackValue("color"),
-    emissive: trackValue("emissive")
-  };
+  const size = Math.max(bounds.max[0] - bounds.min[0], bounds.max[1] - bounds.min[1], bounds.max[2] - bounds.min[2]) * cellSize;
+  return { geometry, lift: -bounds.min[2] * cellSize, size };
 }
 function meshGeometry(node, cellSize) {
   const seg = clampSegments(node.segments);
@@ -1082,17 +1304,20 @@ function meshGeometry(node, cellSize) {
       return { element: /* @__PURE__ */ jsx("torusGeometry", { args: [r, tube, Math.max(3, Math.round(seg / 2)), seg] }), lift: r + tube, size: (r + tube) * 2 };
     }
     case "plane":
-      return { element: /* @__PURE__ */ jsx("planeGeometry", { args: [w, d] }), lift: 0, size: Math.max(w, d) };
+      return { element: /* @__PURE__ */ jsx("planeGeometry", { args: [w, d] }), lift: 0, size: Math.max(w, d), baseRotation: GROUND_ROTATION };
     case "circle":
-      return { element: /* @__PURE__ */ jsx("circleGeometry", { args: [r, seg] }), lift: 0, size: r * 2 };
+      return { element: /* @__PURE__ */ jsx("circleGeometry", { args: [r, seg] }), lift: 0, size: r * 2, baseRotation: GROUND_ROTATION };
+    case "polyhedron":
+      return polyhedronGeometry(node, cellSize);
     default:
       return null;
   }
 }
+var warnedPolyhedronOutline = false;
 var SIDE_MAP = {
-  front: THREE10.FrontSide,
-  back: THREE10.BackSide,
-  double: THREE10.DoubleSide
+  front: THREE11.FrontSide,
+  back: THREE11.BackSide,
+  double: THREE11.DoubleSide
 };
 function meshMaterial(mat, opacity, ref) {
   const m = mat ?? {};
@@ -1136,6 +1361,53 @@ function meshMaterial(mat, opacity, ref) {
       );
   }
 }
+function SkinnedPolyhedron3D({
+  node,
+  skin,
+  geometry,
+  cellSize,
+  opacity
+}) {
+  const boneStore = useContext(BoneRegistryContext);
+  const meshRef = useRef(null);
+  const [registryTick, setRegistryTick] = useState(0);
+  useEffect(() => boneStore?.subscribe(() => setRegistryTick((t) => t + 1)), [boneStore]);
+  useEffect(() => {
+    const mesh = meshRef.current;
+    if (!mesh || !boneStore) return;
+    const bones = [];
+    for (const name of skin.bones) {
+      const bone = boneStore.get(name);
+      if (!bone) return;
+      bones.push(bone);
+    }
+    if (mesh.skeleton && mesh.skeleton.bones.length === bones.length && mesh.skeleton.bones.every((b, i) => b === bones[i])) return;
+    if (skin.inverseBindMatrices.length !== bones.length) return;
+    const inverses = skin.inverseBindMatrices.map((m) => {
+      const mat = new THREE11.Matrix4().fromArray(m);
+      mat.elements[12] *= cellSize;
+      mat.elements[13] *= cellSize;
+      mat.elements[14] *= cellSize;
+      return mat;
+    });
+    mesh.bind(new THREE11.Skeleton(bones, inverses), new THREE11.Matrix4());
+  }, [registryTick, skin, boneStore, geometry, cellSize]);
+  useEffect(() => {
+    const mesh = meshRef.current;
+    return () => mesh?.skeleton?.dispose();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "skinnedMesh",
+    {
+      ref: meshRef,
+      geometry,
+      frustumCulled: false,
+      castShadow: node.castShadow ?? true,
+      receiveShadow: node.receiveShadow ?? true,
+      children: meshMaterial(node.material, opacity)
+    }
+  );
+}
 function Mesh3D({
   node,
   projector,
@@ -1148,6 +1420,10 @@ function Mesh3D({
   const validPos = isValidScenePos(node.position);
   const baseWorld = validPos ? projector.toWorld(node.position) : [0, 0, 0];
   const geo = useMemo(() => meshGeometry(node, projector.cellSize), [node, projector.cellSize]);
+  useEffect(() => {
+    const g = geo?.geometry;
+    return () => g?.dispose();
+  }, [geo]);
   useFrame(({ clock }) => {
     if (!animated || !groupRef.current) return;
     const state = applyMeshAnimation(node, clock.elapsedTime * 1e3);
@@ -1160,8 +1436,13 @@ function Mesh3D({
     );
     groupRef.current.scale.setScalar(state.scale);
     if (meshRef.current) {
+      const shapeRot = geo?.baseRotation ?? [0, 0, 0];
       const base = node.rotation ?? [0, 0, 0];
-      meshRef.current.rotation.set(base[0] + state.rotate[0], base[1] + state.rotate[1], base[2] + state.rotate[2]);
+      meshRef.current.rotation.set(
+        shapeRot[0] + base[0] + state.rotate[0],
+        shapeRot[1] + base[1] + state.rotate[1],
+        shapeRot[2] + base[2] + state.rotate[2]
+      );
     }
     const mat = materialRef.current;
     if (mat) {
@@ -1178,13 +1459,28 @@ function Mesh3D({
   if (!validPos || !geo) return null;
   const lift = (node.pivot ?? "bottom") === "bottom" ? geo.lift : 0;
   const opacity = (node.opacity ?? 1) * (node.material?.opacity ?? 1) * groupOpacity;
-  const rotation = node.rotation ?? [0, 0, 0];
+  if (node.skin && geo.geometry) {
+    return /* @__PURE__ */ jsx("group", { position: baseWorld, children: /* @__PURE__ */ jsx(SkinnedPolyhedron3D, { node, skin: node.skin, geometry: geo.geometry, cellSize: projector.cellSize, opacity }) });
+  }
+  const nodeRotation = node.rotation ?? [0, 0, 0];
+  const shapeRotation = geo.baseRotation ?? [0, 0, 0];
+  const rotation = [
+    shapeRotation[0] + nodeRotation[0],
+    shapeRotation[1] + nodeRotation[1],
+    shapeRotation[2] + nodeRotation[2]
+  ];
   const outlineScale = geo.size > 0 ? 1 + (node.outline?.width ?? 0.05) * projector.cellSize / geo.size : 1;
+  if (node.outline && geo.geometry && !warnedPolyhedronOutline) {
+    warnedPolyhedronOutline = true;
+    console.warn('[draw-mesh] outline is not yet supported on shape "polyhedron" \u2014 skipped');
+  }
+  const geometryProp = geo.geometry ? { geometry: geo.geometry } : {};
   return /* @__PURE__ */ jsxs("group", { ref: groupRef, position: baseWorld, children: [
     /* @__PURE__ */ jsxs(
       "mesh",
       {
         ref: meshRef,
+        ...geometryProp,
         position: [0, lift, 0],
         rotation,
         castShadow: node.castShadow ?? true,
@@ -1195,13 +1491,13 @@ function Mesh3D({
         ]
       }
     ),
-    node.outline && /* @__PURE__ */ jsxs("mesh", { position: [0, lift, 0], rotation, scale: outlineScale, children: [
+    node.outline && !geo.geometry && /* @__PURE__ */ jsxs("mesh", { position: [0, lift, 0], rotation, scale: outlineScale, children: [
       geo.element,
       /* @__PURE__ */ jsx(
         "meshBasicMaterial",
         {
           color: node.outline.color ?? "#101014",
-          side: THREE10.BackSide,
+          side: THREE11.BackSide,
           transparent: opacity < 1,
           opacity
         }
@@ -1216,7 +1512,7 @@ function Drawable3D({ node, projector, groupOpacity = 1 }) {
     case "draw-shape":
       return /* @__PURE__ */ jsx(Shape3D, { node, projector, groupOpacity });
     case "draw-text":
-      return /* @__PURE__ */ jsx(Text3D, { node, projector });
+      return /* @__PURE__ */ jsx(Text3D, { node, projector, groupOpacity });
     case "draw-mesh":
       return /* @__PURE__ */ jsx(Mesh3D, { node, projector, groupOpacity });
     case "draw-sprite-layer":
@@ -1224,18 +1520,57 @@ function Drawable3D({ node, projector, groupOpacity = 1 }) {
     case "draw-shape-layer":
       return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector, groupOpacity }, i)) });
     case "draw-text-layer":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector }, i)) });
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector, groupOpacity }, i)) });
     case "draw-group": {
       if (!isValidScenePos(node.position) || !Array.isArray(node.items)) return null;
       if (node.clip) warnUnsupported3d("draw-group:clip");
-      const world = projector.toWorld(node.position);
-      const inner = create3DProjector({ cellSize: projector.cellSize });
-      const opacity = (node.opacity ?? 1) * groupOpacity;
-      const s = node.scale ?? 1;
-      return /* @__PURE__ */ jsx("group", { position: world, rotation: [0, -(node.rotate ?? 0), 0], scale: [s, s, s], children: node.items.map((item, i) => /* @__PURE__ */ jsx(Drawable3D, { node: item, projector: inner, groupOpacity: opacity }, i)) });
+      return /* @__PURE__ */ jsx(Group3D, { node, projector, groupOpacity });
     }
   }
 }
+function Group3D({
+  node,
+  projector,
+  groupOpacity
+}) {
+  const ref = useRef(null);
+  const animated = isAnimatedGroup(node);
+  const world = projector.toWorld(node.position);
+  const inner = create3DProjector({ cellSize: projector.cellSize });
+  const opacity = (node.opacity ?? 1) * groupOpacity;
+  const s = node.scale ?? 1;
+  const baseRotation = node.rotation ?? [0, -(node.rotate ?? 0), 0];
+  const parentStore = useContext(BoneRegistryContext);
+  const scopedStore = useMemo(() => node.skeleton ? new BoneStore() : null, [node.skeleton]);
+  const boneStore = scopedStore ?? parentStore;
+  const boneObject = useMemo(() => node.bone ? new THREE11.Bone() : null, [node.bone]);
+  useEffect(() => {
+    if (!node.bone || !boneStore || !boneObject) return;
+    return boneStore.register(node.bone, boneObject);
+  }, [node.bone, boneStore, boneObject]);
+  useFrame(({ clock }) => {
+    if (!animated || !ref.current) return;
+    const state = applyMeshAnimation(node, clock.elapsedTime * 1e3);
+    if (!state) return;
+    const cell = projector.cellSize;
+    ref.current.position.set(
+      world[0] + state.offset[0] * cell,
+      world[1] + state.offset[2] * cell,
+      world[2] + state.offset[1] * cell
+    );
+    ref.current.rotation.set(
+      baseRotation[0] + state.rotate[0],
+      baseRotation[1] + state.rotate[1],
+      baseRotation[2] + state.rotate[2]
+    );
+    ref.current.scale.setScalar(s * state.scale);
+  });
+  const children = /* @__PURE__ */ jsxs("group", { ref, position: world, rotation: baseRotation, scale: [s, s, s], children: [
+    boneObject && /* @__PURE__ */ jsx("primitive", { object: boneObject }),
+    node.items.map((item, i) => /* @__PURE__ */ jsx(Drawable3D, { node: item, projector: inner, groupOpacity: opacity }, i))
+  ] });
+  return scopedStore ? /* @__PURE__ */ jsx(BoneRegistryContext.Provider, { value: scopedStore, children }) : children;
+}
 
 // lib/drawable/three/game3dTheme.ts
 var GRID_COLORS_3D = {
@@ -1248,6 +1583,20 @@ function cn(...inputs) {
 }
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1};
+function RoomEnvironment3D() {
+  const { gl, scene } = useThree(({ gl: gl2, scene: scene2 }) => ({ gl: gl2, scene: scene2 }));
+  useEffect(() => {
+    const pmremGenerator = new THREE11.PMREMGenerator(gl);
+    const envTexture = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environment = envTexture;
+    return () => {
+      scene.environment = null;
+      envTexture.dispose();
+      pmremGenerator.dispose();
+    };
+  }, [gl, scene]);
+  return null;
+}
 var Canvas3DHost = forwardRef(
   ({
     cameraMode = "isometric",
@@ -1273,6 +1622,8 @@ var Canvas3DHost = forwardRef(
     keyUpMap,
     pixelsPerUnit,
     fov,
+    lighting,
+    post,
     children,
     drawables
   }, ref) => {
@@ -1281,6 +1632,7 @@ var Canvas3DHost = forwardRef(
     const [internalError, setInternalError] = useState(null);
     const eventBus = useEventBus();
     const keysRef = useRef(/* @__PURE__ */ new Set());
+    const allDrawables = useMemo(() => drawables ?? [], [drawables]);
     useEffect(() => {
       if (!keyMap && !keyUpMap) return;
       const down = (e) => {
@@ -1314,7 +1666,7 @@ var Canvas3DHost = forwardRef(
       unitAnimationEvent,
       cameraChangeEvent
     });
-    const drawnItems = useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
+    const drawnItems = useMemo(() => collectDrawnItems(allDrawables), [allDrawables]);
     const scenePositions = useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
     const hitIndex = useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
     const gridBounds = useMemo(() => {
@@ -1350,6 +1702,7 @@ var Canvas3DHost = forwardRef(
       }),
       [gridBounds, cellSize]
     );
+    const boneStore = useMemo(() => new BoneStore(), []);
     const drawableProjector = useMemo(
       () => create3DProjector({
         cellSize: gridConfig.cellSize,
@@ -1362,7 +1715,7 @@ var Canvas3DHost = forwardRef(
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
-          return new THREE10.Vector3(pos.x, pos.y, pos.z);
+          return new THREE11.Vector3(pos.x, pos.y, pos.z);
         }
         return null;
       },
@@ -1407,6 +1760,8 @@ var Canvas3DHost = forwardRef(
           return { position: [cx + d, d * 0.8, cz + d], fov: fovDeg };
         case "top-down":
           return { position: [cx, d * 2, cz + d * 0.35], fov: fovDeg };
+        case "front":
+          return { position: [cx, d * 0.32, cz + d * 1.15], fov: fovDeg };
         case "follow":
           return { position: [cx, d * 0.5, cz + d], fov: fovDeg };
         case "perspective":
@@ -1473,6 +1828,7 @@ var Canvas3DHost = forwardRef(
               Canvas,
               {
                 shadows,
+                flat: lighting?.toneMapping === "none",
                 camera: {
                   position: cameraConfig.position,
                   fov: cameraConfig.fov,
@@ -1496,9 +1852,19 @@ var Canvas3DHost = forwardRef(
                       shadowNormalBias: 0.04,
                       shadowCameraSize: 5,
                       shadowCameraNear: 0.5,
-                      shadowCameraFar: 500
+                      shadowCameraFar: 500,
+                      ambientIntensity: lighting?.ambient?.intensity,
+                      ambientColor: lighting?.ambient?.color,
+                      directionalIntensity: lighting?.directional?.intensity,
+                      directionalColor: lighting?.directional?.color,
+                      directionalPosition: lighting?.directional?.position,
+                      hemisphereIntensity: lighting?.hemisphere?.intensity,
+                      hemisphereColor: lighting?.hemisphere?.color,
+                      hemisphereGroundColor: lighting?.hemisphere?.groundColor,
+                      points: lighting?.points
                     }
                   ),
+                  lighting?.environment === "room" && /* @__PURE__ */ jsx(RoomEnvironment3D, {}),
                   showGrid && /* @__PURE__ */ jsx(
                     Grid,
                     {
@@ -1521,7 +1887,7 @@ var Canvas3DHost = forwardRef(
                       fadeStrength: 1
                     }
                   ),
-                  drawables && drawables.length > 0 && /* @__PURE__ */ jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
+                  allDrawables.length > 0 && /* @__PURE__ */ jsx(BoneRegistryContext.Provider, { value: boneStore, children: /* @__PURE__ */ jsx("group", { children: allDrawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i)) }) }),
                   (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxs(
                     "mesh",
                     {
@@ -1546,7 +1912,7 @@ var Canvas3DHost = forwardRef(
                       ]
                     }
                   ),
-                  children,
+                  post && (post.bloom || post.vignette) ? /* @__PURE__ */ jsx(Effects3D, { post }) : null,
                   /* @__PURE__ */ jsx(
                     OrbitControls,
                     {
@@ -1557,7 +1923,7 @@ var Canvas3DHost = forwardRef(
                       dampingFactor: 0.05,
                       enableZoom: true,
                       enablePan: true,
-                      touches: { ONE: THREE10.TOUCH.ROTATE, TWO: THREE10.TOUCH.DOLLY_PAN },
+                      touches: { ONE: THREE11.TOUCH.ROTATE, TWO: THREE11.TOUCH.DOLLY_PAN },
                       minDistance: 2,
                       maxDistance: 100,
                       maxPolarAngle: Math.PI / 2 - 0.1
@@ -1580,15 +1946,15 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
-      scene.background = new THREE10.Color(background);
+      scene.background = new THREE11.Color(background);
     } else {
-      const loader = new THREE10.TextureLoader();
+      const loader = new THREE11.TextureLoader();
       loader.load(background, (texture) => {
         scene.background = texture;
       });
     }
     if (fog) {
-      scene.fog = new THREE10.Fog(fog.color, fog.near, fog.far);
+      scene.fog = new THREE11.Fog(fog.color, fog.near, fog.far);
     }
     return () => {
       scene.background = null;
@@ -1611,14 +1977,14 @@ var Camera3D = forwardRef(
   }, ref) => {
     const { camera, set, viewport } = useThree();
     const controlsRef = useRef(null);
-    const initialPosition = useRef(new THREE10.Vector3(...position));
-    const initialTarget = useRef(new THREE10.Vector3(...target));
+    const initialPosition = useRef(new THREE11.Vector3(...position));
+    const initialTarget = useRef(new THREE11.Vector3(...target));
     useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
         const size = 10 / zoom;
-        newCamera = new THREE10.OrthographicCamera(
+        newCamera = new THREE11.OrthographicCamera(
           -size * aspect,
           size * aspect,
           size,
@@ -1627,7 +1993,7 @@ var Camera3D = forwardRef(
           1e3
         );
       } else {
-        newCamera = new THREE10.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
+        newCamera = new THREE11.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
       }
       newCamera.position.copy(initialPosition.current);
       newCamera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
@@ -1668,8 +2034,8 @@ var Camera3D = forwardRef(
         }
       },
       getViewBounds: () => {
-        const min = new THREE10.Vector3(-10, -10, -10);
-        const max = new THREE10.Vector3(10, 10, 10);
+        const min = new THREE11.Vector3(-10, -10, -10);
+        const max = new THREE11.Vector3(10, 10, 10);
         return { min, max };
       }
     }));
@@ -1711,7 +2077,7 @@ var AssetLoader = class {
     __publicField(this, "textureCache");
     __publicField(this, "loadingPromises");
     this.objLoader = new OBJLoader();
-    this.textureLoader = new THREE10.TextureLoader();
+    this.textureLoader = new THREE11.TextureLoader();
     this.modelCache = /* @__PURE__ */ new Map();
     this.textureCache = /* @__PURE__ */ new Map();
     this.loadingPromises = /* @__PURE__ */ new Map();
@@ -1785,7 +2151,7 @@ var AssetLoader = class {
       return this.loadingPromises.get(`texture:${url}`);
     }
     const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE10.SRGBColorSpace;
+      texture.colorSpace = THREE11.SRGBColorSpace;
       this.textureCache.set(url, texture);
       this.loadingPromises.delete(`texture:${url}`);
       return texture;
@@ -1859,7 +2225,7 @@ var AssetLoader = class {
     });
     this.modelCache.forEach((model) => {
       model.scene.traverse((child) => {
-        if (child instanceof THREE10.Mesh) {
+        if (child instanceof THREE11.Mesh) {
           child.geometry.dispose();
           if (Array.isArray(child.material)) {
             child.material.forEach((m) => m.dispose());
@@ -1896,7 +2262,7 @@ var DEFAULT_OPTIONS = {
   gridSize: 20,
   assetLoader: new AssetLoader()
 };
-function useThree4(options = {}) {
+function useThree5(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
@@ -1909,21 +2275,21 @@ function useThree4(options = {}) {
   const [isReady, setIsReady] = useState(false);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const initialCameraPosition = useMemo(
-    () => new THREE10.Vector3(...opts.cameraPosition),
+    () => new THREE11.Vector3(...opts.cameraPosition),
     []
   );
   useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
-    const scene = new THREE10.Scene();
-    scene.background = new THREE10.Color(opts.backgroundColor);
+    const scene = new THREE11.Scene();
+    scene.background = new THREE11.Color(opts.backgroundColor);
     sceneRef.current = scene;
     let camera;
     const aspect = clientWidth / clientHeight;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      camera = new THREE10.OrthographicCamera(
+      camera = new THREE11.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -1932,11 +2298,11 @@ function useThree4(options = {}) {
         1e3
       );
     } else {
-      camera = new THREE10.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      camera = new THREE11.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     camera.position.copy(initialCameraPosition);
     cameraRef.current = camera;
-    const renderer = new THREE10.WebGLRenderer({
+    const renderer = new THREE11.WebGLRenderer({
       antialias: true,
       alpha: true,
       canvas: canvasRef.current || void 0
@@ -1944,7 +2310,7 @@ function useThree4(options = {}) {
     renderer.setSize(clientWidth, clientHeight);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.shadowMap.enabled = opts.shadows;
-    renderer.shadowMap.type = THREE10.PCFSoftShadowMap;
+    renderer.shadowMap.type = THREE11.PCFSoftShadowMap;
     rendererRef.current = renderer;
     const controls = new OrbitControls$1(camera, renderer.domElement);
     controls.enableDamping = true;
@@ -1953,16 +2319,16 @@ function useThree4(options = {}) {
     controls.maxDistance = 100;
     controls.maxPolarAngle = Math.PI / 2 - 0.1;
     controlsRef.current = controls;
-    const ambientLight = new THREE10.AmbientLight(16777215, 0.6);
+    const ambientLight = new THREE11.AmbientLight(16777215, 0.6);
     scene.add(ambientLight);
-    const directionalLight = new THREE10.DirectionalLight(16777215, 0.8);
+    const directionalLight = new THREE11.DirectionalLight(16777215, 0.8);
     directionalLight.position.set(10, 20, 10);
     directionalLight.castShadow = opts.shadows;
     directionalLight.shadow.mapSize.width = 2048;
     directionalLight.shadow.mapSize.height = 2048;
     scene.add(directionalLight);
     if (opts.showGrid) {
-      const gridHelper = new THREE10.GridHelper(
+      const gridHelper = new THREE11.GridHelper(
         opts.gridSize,
         opts.gridSize,
         4473924,
@@ -1980,10 +2346,10 @@ function useThree4(options = {}) {
     const handleResize = () => {
       const { clientWidth: width, clientHeight: height } = container;
       setDimensions({ width, height });
-      if (camera instanceof THREE10.PerspectiveCamera) {
+      if (camera instanceof THREE11.PerspectiveCamera) {
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
-      } else if (camera instanceof THREE10.OrthographicCamera) {
+      } else if (camera instanceof THREE11.OrthographicCamera) {
         const aspect2 = width / height;
         const size = 10;
         camera.left = -size * aspect2;
@@ -2014,7 +2380,7 @@ function useThree4(options = {}) {
     let newCamera;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      newCamera = new THREE10.OrthographicCamera(
+      newCamera = new THREE11.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -2023,7 +2389,7 @@ function useThree4(options = {}) {
         1e3
       );
     } else {
-      newCamera = new THREE10.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      newCamera = new THREE11.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     newCamera.position.copy(currentPos);
     cameraRef.current = newCamera;
@@ -2353,8 +2719,8 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = useRef(new THREE10.Raycaster());
-  const mouse = useRef(new THREE10.Vector2());
+  const raycaster = useRef(new THREE11.Raycaster());
+  const mouse = useRef(new THREE11.Vector2());
   const clientToNDC = useCallback(
     (clientX, clientY) => {
       if (!canvas) {
@@ -2424,8 +2790,8 @@ function useRaycaster(options) {
       const ndc = clientToNDC(clientX, clientY);
       mouse.current.set(ndc.x, ndc.y);
       raycaster.current.setFromCamera(mouse.current, camera);
-      const plane = new THREE10.Plane(new THREE10.Vector3(0, 1, 0), 0);
-      const target = new THREE10.Vector3();
+      const plane = new THREE11.Plane(new THREE11.Vector3(0, 1, 0), 0);
+      const target = new THREE11.Vector3();
       const intersection = raycaster.current.ray.intersectPlane(plane, target);
       if (intersection) {
         const gridX = Math.round((target.x - offsetX) / cellSize);
@@ -2463,7 +2829,7 @@ function useRaycaster(options) {
         return {
           gridX: gridCoords.x,
           gridZ: gridCoords.z,
-          worldPosition: new THREE10.Vector3(
+          worldPosition: new THREE11.Vector3(
             gridCoords.x * cellSize + offsetX,
             0,
             gridCoords.z * cellSize + offsetZ
@@ -2493,7 +2859,7 @@ var DEFAULT_CONFIG = {
 };
 function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
   const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE10.Vector3(
+  return new THREE11.Vector3(
     gridX * opts.cellSize + opts.offsetX,
     opts.elevation,
     gridZ * opts.cellSize + opts.offsetZ
@@ -2507,17 +2873,17 @@ function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
   };
 }
 function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE10.Raycaster();
-  const mouse = new THREE10.Vector2(mouseX, mouseY);
+  const raycaster = new THREE11.Raycaster();
+  const mouse = new THREE11.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE10.Plane(new THREE10.Vector3(0, 1, 0), -planeY);
-  const target = new THREE10.Vector3();
+  const plane = new THREE11.Plane(new THREE11.Vector3(0, 1, 0), -planeY);
+  const target = new THREE11.Vector3();
   const intersection = raycaster.ray.intersectPlane(plane, target);
   return intersection ? target : null;
 }
 function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE10.Raycaster();
-  const mouse = new THREE10.Vector2(mouseX, mouseY);
+  const raycaster = new THREE11.Raycaster();
+  const mouse = new THREE11.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
   const intersects = raycaster.intersectObjects(objects, true);
   return intersects.length > 0 ? intersects[0] : null;
@@ -2569,14 +2935,14 @@ function getCellsInRadius(centerX, centerZ, radius) {
   return cells;
 }
 function createGridHighlight(color = 16776960, opacity = 0.3) {
-  const geometry = new THREE10.PlaneGeometry(0.95, 0.95);
-  const material = new THREE10.MeshBasicMaterial({
+  const geometry = new THREE11.PlaneGeometry(0.95, 0.95);
+  const material = new THREE11.MeshBasicMaterial({
     color,
     transparent: true,
     opacity,
-    side: THREE10.DoubleSide
+    side: THREE11.DoubleSide
   });
-  const mesh = new THREE10.Mesh(geometry, material);
+  const mesh = new THREE11.Mesh(geometry, material);
   mesh.rotation.x = -Math.PI / 2;
   mesh.position.y = 0.01;
   return mesh;
@@ -2589,31 +2955,31 @@ function normalizeMouseCoordinates(clientX, clientY, element) {
   };
 }
 function isInFrustum(position, camera, padding = 0) {
-  const frustum = new THREE10.Frustum();
-  const projScreenMatrix = new THREE10.Matrix4();
+  const frustum = new THREE11.Frustum();
+  const projScreenMatrix = new THREE11.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
-  const sphere = new THREE10.Sphere(position, padding);
+  const sphere = new THREE11.Sphere(position, padding);
   return frustum.intersectsSphere(sphere);
 }
 function filterByFrustum(positions, camera, padding = 0) {
-  const frustum = new THREE10.Frustum();
-  const projScreenMatrix = new THREE10.Matrix4();
+  const frustum = new THREE11.Frustum();
+  const projScreenMatrix = new THREE11.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   return positions.filter((position) => {
-    const sphere = new THREE10.Sphere(position, padding);
+    const sphere = new THREE11.Sphere(position, padding);
     return frustum.intersectsSphere(sphere);
   });
 }
 function getVisibleIndices(positions, camera, padding = 0) {
-  const frustum = new THREE10.Frustum();
-  const projScreenMatrix = new THREE10.Matrix4();
+  const frustum = new THREE11.Frustum();
+  const projScreenMatrix = new THREE11.Matrix4();
   const visible = /* @__PURE__ */ new Set();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   positions.forEach((position, index) => {
-    const sphere = new THREE10.Sphere(position, padding);
+    const sphere = new THREE11.Sphere(position, padding);
     if (frustum.intersectsSphere(sphere)) {
       visible.add(index);
     }
@@ -2637,7 +3003,7 @@ function updateInstanceLOD(instancedMesh, positions, camera, lodDistances) {
   return lodIndices;
 }
 function cullInstancedMesh(instancedMesh, positions, visibleIndices) {
-  const dummy = new THREE10.Object3D();
+  const dummy = new THREE11.Object3D();
   let visibleCount = 0;
   positions.forEach((position, index) => {
     if (visibleIndices.has(index)) {
@@ -5420,12 +5786,12 @@ function useAvl3DConfig() {
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = useThree();
-  const targetPosVec = useRef(new THREE10.Vector3(...targetPosition));
-  const targetLookVec = useRef(new THREE10.Vector3(...targetLookAt));
+  const targetPosVec = useRef(new THREE11.Vector3(...targetPosition));
+  const targetLookVec = useRef(new THREE11.Vector3(...targetLookAt));
   const isAnimating = useRef(false);
   useEffect(() => {
-    const newTarget = new THREE10.Vector3(...targetPosition);
-    const newLookAt = new THREE10.Vector3(...targetLookAt);
+    const newTarget = new THREE11.Vector3(...targetPosition);
+    const newLookAt = new THREE11.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
       targetPosVec.current.copy(newTarget);
       targetLookVec.current.copy(newLookAt);
@@ -5440,9 +5806,9 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   useFrame((_, delta) => {
     if (!isAnimating.current) return;
     const speed = 3;
-    camera.position.x = THREE10.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
-    camera.position.y = THREE10.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
-    camera.position.z = THREE10.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    camera.position.x = THREE11.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE11.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE11.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
     camera.lookAt(targetLookVec.current);
     const dist = camera.position.distanceTo(targetPosVec.current);
     if (dist < 0.05) {
@@ -5457,7 +5823,7 @@ function SceneFade({ animating, children }) {
   useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
-    opacityRef.current = THREE10.MathUtils.damp(opacityRef.current, target, 5, delta);
+    opacityRef.current = THREE11.MathUtils.damp(opacityRef.current, target, 5, delta);
     groupRef.current.visible = opacityRef.current > 0.05;
     const s = 0.9 + opacityRef.current * 0.1;
     groupRef.current.scale.setScalar(s);
@@ -5710,4 +6076,4 @@ var Avl3DViewer = ({
 };
 Avl3DViewer.displayName = "Avl3DViewer";
 
-export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DHost, Canvas3DLoadingState, Canvas3DHost as GameCanvas3D, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree4 as useThree, worldToGrid };
+export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DHost, Canvas3DLoadingState, Canvas3DHost as GameCanvas3D, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree5 as useThree, worldToGrid };