@almadar/ui 5.141.0 → 5.143.0

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

@@ -4,9 +4,11 @@ var React3 = require('react');
 var providers = require('@almadar/ui/providers');
 var logger = require('@almadar/logger');
 var fiber = require('@react-three/fiber');
-var THREE10 = require('three');
+var THREE11 = require('three');
+var RoomEnvironment_js = require('three/examples/jsm/environments/RoomEnvironment.js');
 var drei = require('@react-three/drei');
 var jsxRuntime = require('react/jsx-runtime');
+var postprocessing = require('@react-three/postprocessing');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
 var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var clsx = require('clsx');
@@ -14,7 +16,6 @@ var tailwindMerge = require('tailwind-merge');
 var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
-var postprocessing = require('@react-three/postprocessing');
 var hooks = require('@almadar/ui/hooks');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -38,7 +39,7 @@ function _interopNamespace(e) {
 }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
-var THREE10__namespace = /*#__PURE__*/_interopNamespace(THREE10);
+var THREE11__namespace = /*#__PURE__*/_interopNamespace(THREE11);
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -474,6 +475,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,
@@ -506,22 +511,63 @@ function Lighting3D({
     /* @__PURE__ */ jsxRuntime.jsx(
       "hemisphereLight",
       {
-        intensity: 0.3,
-        color: "#87ceeb",
-        groundColor: "#362d1d"
+        intensity: hemisphereIntensity,
+        color: hemisphereColor,
+        groundColor: hemisphereGroundColor
       }
     ),
+    points?.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "pointLight",
+      {
+        position: p.position,
+        intensity: p.intensity,
+        color: p.color,
+        distance: p.distance,
+        decay: p.decay
+      },
+      i
+    )),
     showHelpers && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "directionalLightHelper",
       {
         args: [
-          new THREE10__namespace.DirectionalLight(directionalColor, directionalIntensity),
+          new THREE11__namespace.DirectionalLight(directionalColor, directionalIntensity),
           5
         ]
       }
     ) })
   ] });
 }
+function Effects3D({ post }) {
+  if (!post || !post.bloom && !post.vignette) return null;
+  const passes = [];
+  if (post.bloom) {
+    passes.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        postprocessing.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__ */ jsxRuntime.jsx(
+        postprocessing.Vignette,
+        {
+          offset: post.vignette.offset ?? 0.3,
+          darkness: post.vignette.darkness ?? 0.6
+        },
+        "vignette"
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(postprocessing.EffectComposer, { children: passes });
+}
 function CameraController3D({
   onCameraChange
 }) {
@@ -542,8 +588,8 @@ function FollowCamera3D({
   offset
 }) {
   const { camera } = fiber.useThree();
-  const look = React3.useRef(new THREE10__namespace.Vector3(target[0], target[1], target[2]));
-  const goal = React3.useRef(new THREE10__namespace.Vector3());
+  const look = React3.useRef(new THREE11__namespace.Vector3(target[0], target[1], target[2]));
+  const goal = React3.useRef(new THREE11__namespace.Vector3());
   fiber.useFrame((_, delta) => {
     const t = Math.min(1, delta * 5);
     goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
@@ -564,6 +610,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 = React3.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();
@@ -699,12 +918,12 @@ function ModelLoader({
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
-    const tintColor = tint ? new THREE10__namespace.Color(tint) : null;
+    const tintColor = tint ? new THREE11__namespace.Color(tint) : null;
     cloned.traverse((child) => {
-      if (child instanceof THREE10__namespace.Mesh) {
+      if (child instanceof THREE11__namespace.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
-        if (tintColor && child.material instanceof THREE10__namespace.MeshStandardMaterial) {
+        if (tintColor && child.material instanceof THREE11__namespace.MeshStandardMaterial) {
           const mat = child.material.clone();
           mat.color.multiply(tintColor);
           child.material = mat;
@@ -713,7 +932,7 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = React3.useMemo(() => model ? new THREE10__namespace.AnimationMixer(model) : null, [model]);
+  const mixer = React3.useMemo(() => model ? new THREE11__namespace.AnimationMixer(model) : null, [model]);
   React3.useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
@@ -730,8 +949,8 @@ function ModelLoader({
   });
   const normFactor = React3.useMemo(() => {
     if (!model) return 1;
-    const box = new THREE10__namespace.Box3().setFromObject(model);
-    const size = new THREE10__namespace.Vector3();
+    const box = new THREE11__namespace.Box3().setFromObject(model);
+    const size = new THREE11__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
@@ -821,7 +1040,7 @@ var warnUnsupported3d = (kind) => {
   warnedUnsupported.add(kind);
   mesh3dLog.warn("unsupported drawable kind on the 3D backend \u2014 skipped", { kind });
 };
-var CrossOriginTextureLoader = class extends THREE10__namespace.TextureLoader {
+var CrossOriginTextureLoader = class extends THREE11__namespace.TextureLoader {
   constructor() {
     super();
     this.crossOrigin = "anonymous";
@@ -839,7 +1058,7 @@ function useBillboardTexture(url) {
       url,
       (texture) => {
         if (!active) return;
-        texture.colorSpace = THREE10__namespace.SRGBColorSpace;
+        texture.colorSpace = THREE11__namespace.SRGBColorSpace;
         setState({ texture, error: false });
       },
       void 0,
@@ -892,7 +1111,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
   }, [texture, frame, node.height, node.width, anchor, cellSize]);
   const groundGeometry = React3__default.default.useMemo(() => {
     if (anchor !== "top-left" || !texture || !atlasReady) return null;
-    const g = new THREE10__namespace.PlaneGeometry(size.width, size.height);
+    const g = new THREE11__namespace.PlaneGeometry(size.width, size.height);
     g.rotateX(-Math.PI / 2);
     return g;
   }, [anchor, texture, atlasReady, size.width, size.height]);
@@ -900,15 +1119,15 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
     if (anchor === "top-left") {
       return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
         /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [size.width, size.height] }),
-        /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE10__namespace.DoubleSide })
+        /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE11__namespace.DoubleSide })
       ] }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [size.width, size.height] }),
-      /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE10__namespace.DoubleSide })
+      /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE11__namespace.DoubleSide })
     ] }) });
   }
-  texture.magFilter = texture.minFilter = THREE10__namespace.NearestFilter;
+  texture.magFilter = texture.minFilter = THREE11__namespace.NearestFilter;
   texture.needsUpdate = true;
   if (frame) {
     texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
@@ -921,7 +1140,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE10__namespace.DoubleSide,
+        side: THREE11__namespace.DoubleSide,
         opacity: (node.opacity ?? 1) * groupOpacity
       }
     ) }) });
@@ -934,7 +1153,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE10__namespace.DoubleSide,
+        side: THREE11__namespace.DoubleSide,
         opacity: node.opacity ?? 1
       }
     )
@@ -965,8 +1184,27 @@ function Sprite3D({ node, projector, groupOpacity = 1 }) {
   return /* @__PURE__ */ jsxRuntime.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__default.default.useRef(null);
+  const materialRef = React3__default.default.useRef(null);
+  const animated = isAnimatedShape(node);
+  const validPos = isValidScenePos(node.position);
+  const world = validPos ? projector.toWorld(node.position) : [0, 0, 0];
+  fiber.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) {
@@ -984,7 +1222,7 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
     }
     case "poly": {
       if (!node.points || node.points.length === 0) return null;
-      const s = new THREE10__namespace.Shape();
+      const s = new THREE11__namespace.Shape();
       node.points.forEach((p, i) => {
         if (i === 0) s.moveTo(p.x, p.y);
         else s.lineTo(p.x, p.y);
@@ -1000,12 +1238,12 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
     default:
       return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref: groupRef, position: [world[0], world[1] + 0.02, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
     geometry,
-    /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE10__namespace.DoubleSide })
-  ] });
+    /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE11__namespace.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__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1017,68 +1255,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__namespace.BufferGeometry();
+  geometry.setAttribute("position", new THREE11__namespace.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__namespace.BufferAttribute(skinIndex, 4));
+    geometry.setAttribute("skinWeight", new THREE11__namespace.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);
@@ -1106,17 +1328,20 @@ function meshGeometry(node, cellSize) {
       return { element: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("planeGeometry", { args: [w, d] }), lift: 0, size: Math.max(w, d) };
+      return { element: /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [w, d] }), lift: 0, size: Math.max(w, d), baseRotation: GROUND_ROTATION };
     case "circle":
-      return { element: /* @__PURE__ */ jsxRuntime.jsx("circleGeometry", { args: [r, seg] }), lift: 0, size: r * 2 };
+      return { element: /* @__PURE__ */ jsxRuntime.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__namespace.FrontSide,
-  back: THREE10__namespace.BackSide,
-  double: THREE10__namespace.DoubleSide
+  front: THREE11__namespace.FrontSide,
+  back: THREE11__namespace.BackSide,
+  double: THREE11__namespace.DoubleSide
 };
 function meshMaterial(mat, opacity, ref) {
   const m = mat ?? {};
@@ -1160,6 +1385,53 @@ function meshMaterial(mat, opacity, ref) {
       );
   }
 }
+function SkinnedPolyhedron3D({
+  node,
+  skin,
+  geometry,
+  cellSize,
+  opacity
+}) {
+  const boneStore = React3.useContext(BoneRegistryContext);
+  const meshRef = React3.useRef(null);
+  const [registryTick, setRegistryTick] = React3.useState(0);
+  React3.useEffect(() => boneStore?.subscribe(() => setRegistryTick((t) => t + 1)), [boneStore]);
+  React3.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__namespace.Matrix4().fromArray(m);
+      mat.elements[12] *= cellSize;
+      mat.elements[13] *= cellSize;
+      mat.elements[14] *= cellSize;
+      return mat;
+    });
+    mesh.bind(new THREE11__namespace.Skeleton(bones, inverses), new THREE11__namespace.Matrix4());
+  }, [registryTick, skin, boneStore, geometry, cellSize]);
+  React3.useEffect(() => {
+    const mesh = meshRef.current;
+    return () => mesh?.skeleton?.dispose();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "skinnedMesh",
+    {
+      ref: meshRef,
+      geometry,
+      frustumCulled: false,
+      castShadow: node.castShadow ?? true,
+      receiveShadow: node.receiveShadow ?? true,
+      children: meshMaterial(node.material, opacity)
+    }
+  );
+}
 function Mesh3D({
   node,
   projector,
@@ -1172,6 +1444,10 @@ function Mesh3D({
   const validPos = isValidScenePos(node.position);
   const baseWorld = validPos ? projector.toWorld(node.position) : [0, 0, 0];
   const geo = React3.useMemo(() => meshGeometry(node, projector.cellSize), [node, projector.cellSize]);
+  React3.useEffect(() => {
+    const g = geo?.geometry;
+    return () => g?.dispose();
+  }, [geo]);
   fiber.useFrame(({ clock }) => {
     if (!animated || !groupRef.current) return;
     const state = applyMeshAnimation(node, clock.elapsedTime * 1e3);
@@ -1184,8 +1460,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) {
@@ -1202,13 +1483,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__ */ jsxRuntime.jsx("group", { position: baseWorld, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("group", { ref: groupRef, position: baseWorld, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "mesh",
       {
         ref: meshRef,
+        ...geometryProp,
         position: [0, lift, 0],
         rotation,
         castShadow: node.castShadow ?? true,
@@ -1219,13 +1515,13 @@ function Mesh3D({
         ]
       }
     ),
-    node.outline && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, lift, 0], rotation, scale: outlineScale, children: [
+    node.outline && !geo.geometry && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, lift, 0], rotation, scale: outlineScale, children: [
       geo.element,
       /* @__PURE__ */ jsxRuntime.jsx(
         "meshBasicMaterial",
         {
           color: node.outline.color ?? "#101014",
-          side: THREE10__namespace.BackSide,
+          side: THREE11__namespace.BackSide,
           transparent: opacity < 1,
           opacity
         }
@@ -1240,7 +1536,7 @@ function Drawable3D({ node, projector, groupOpacity = 1 }) {
     case "draw-shape":
       return /* @__PURE__ */ jsxRuntime.jsx(Shape3D, { node, projector, groupOpacity });
     case "draw-text":
-      return /* @__PURE__ */ jsxRuntime.jsx(Text3D, { node, projector });
+      return /* @__PURE__ */ jsxRuntime.jsx(Text3D, { node, projector, groupOpacity });
     case "draw-mesh":
       return /* @__PURE__ */ jsxRuntime.jsx(Mesh3D, { node, projector, groupOpacity });
     case "draw-sprite-layer":
@@ -1248,18 +1544,57 @@ function Drawable3D({ node, projector, groupOpacity = 1 }) {
     case "draw-shape-layer":
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Shape3D, { node: item, projector, groupOpacity }, i)) });
     case "draw-text-layer":
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Text3D, { node: item, projector }, i)) });
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("group", { position: world, rotation: [0, -(node.rotate ?? 0), 0], scale: [s, s, s], children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node: item, projector: inner, groupOpacity: opacity }, i)) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Group3D, { node, projector, groupOpacity });
     }
   }
 }
+function Group3D({
+  node,
+  projector,
+  groupOpacity
+}) {
+  const ref = React3.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 = React3.useContext(BoneRegistryContext);
+  const scopedStore = React3.useMemo(() => node.skeleton ? new BoneStore() : null, [node.skeleton]);
+  const boneStore = scopedStore ?? parentStore;
+  const boneObject = React3.useMemo(() => node.bone ? new THREE11__namespace.Bone() : null, [node.bone]);
+  React3.useEffect(() => {
+    if (!node.bone || !boneStore || !boneObject) return;
+    return boneStore.register(node.bone, boneObject);
+  }, [node.bone, boneStore, boneObject]);
+  fiber.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__ */ jsxRuntime.jsxs("group", { ref, position: world, rotation: baseRotation, scale: [s, s, s], children: [
+    boneObject && /* @__PURE__ */ jsxRuntime.jsx("primitive", { object: boneObject }),
+    node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node: item, projector: inner, groupOpacity: opacity }, i))
+  ] });
+  return scopedStore ? /* @__PURE__ */ jsxRuntime.jsx(BoneRegistryContext.Provider, { value: scopedStore, children }) : children;
+}
 
 // lib/drawable/three/game3dTheme.ts
 var GRID_COLORS_3D = {
@@ -1272,6 +1607,20 @@ function cn(...inputs) {
 }
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1};
+function RoomEnvironment3D() {
+  const { gl, scene } = fiber.useThree(({ gl: gl2, scene: scene2 }) => ({ gl: gl2, scene: scene2 }));
+  React3.useEffect(() => {
+    const pmremGenerator = new THREE11__namespace.PMREMGenerator(gl);
+    const envTexture = pmremGenerator.fromScene(new RoomEnvironment_js.RoomEnvironment(), 0.04).texture;
+    scene.environment = envTexture;
+    return () => {
+      scene.environment = null;
+      envTexture.dispose();
+      pmremGenerator.dispose();
+    };
+  }, [gl, scene]);
+  return null;
+}
 var Canvas3DHost = React3.forwardRef(
   ({
     cameraMode = "isometric",
@@ -1297,6 +1646,8 @@ var Canvas3DHost = React3.forwardRef(
     keyUpMap,
     pixelsPerUnit,
     fov,
+    lighting,
+    post,
     children,
     drawables
   }, ref) => {
@@ -1305,6 +1656,7 @@ var Canvas3DHost = React3.forwardRef(
     const [internalError, setInternalError] = React3.useState(null);
     const eventBus = useEventBus();
     const keysRef = React3.useRef(/* @__PURE__ */ new Set());
+    const allDrawables = React3.useMemo(() => drawables ?? [], [drawables]);
     React3.useEffect(() => {
       if (!keyMap && !keyUpMap) return;
       const down = (e) => {
@@ -1338,7 +1690,7 @@ var Canvas3DHost = React3.forwardRef(
       unitAnimationEvent,
       cameraChangeEvent
     });
-    const drawnItems = React3.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
+    const drawnItems = React3.useMemo(() => collectDrawnItems(allDrawables), [allDrawables]);
     const scenePositions = React3.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
     const hitIndex = React3.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
     const gridBounds = React3.useMemo(() => {
@@ -1374,6 +1726,7 @@ var Canvas3DHost = React3.forwardRef(
       }),
       [gridBounds, cellSize]
     );
+    const boneStore = React3.useMemo(() => new BoneStore(), []);
     const drawableProjector = React3.useMemo(
       () => create3DProjector({
         cellSize: gridConfig.cellSize,
@@ -1386,7 +1739,7 @@ var Canvas3DHost = React3.forwardRef(
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
-          return new THREE10__namespace.Vector3(pos.x, pos.y, pos.z);
+          return new THREE11__namespace.Vector3(pos.x, pos.y, pos.z);
         }
         return null;
       },
@@ -1431,6 +1784,8 @@ var Canvas3DHost = React3.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":
@@ -1497,6 +1852,7 @@ var Canvas3DHost = React3.forwardRef(
               fiber.Canvas,
               {
                 shadows,
+                flat: lighting?.toneMapping === "none",
                 camera: {
                   position: cameraConfig.position,
                   fov: cameraConfig.fov,
@@ -1520,9 +1876,19 @@ var Canvas3DHost = React3.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__ */ jsxRuntime.jsx(RoomEnvironment3D, {}),
                   showGrid && /* @__PURE__ */ jsxRuntime.jsx(
                     drei.Grid,
                     {
@@ -1545,7 +1911,7 @@ var Canvas3DHost = React3.forwardRef(
                       fadeStrength: 1
                     }
                   ),
-                  drawables && drawables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
+                  allDrawables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BoneRegistryContext.Provider, { value: boneStore, children: /* @__PURE__ */ jsxRuntime.jsx("group", { children: allDrawables.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node, projector: drawableProjector }, i)) }) }),
                   (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxRuntime.jsxs(
                     "mesh",
                     {
@@ -1570,7 +1936,7 @@ var Canvas3DHost = React3.forwardRef(
                       ]
                     }
                   ),
-                  children,
+                  post && (post.bloom || post.vignette) ? /* @__PURE__ */ jsxRuntime.jsx(Effects3D, { post }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     drei.OrbitControls,
                     {
@@ -1581,7 +1947,7 @@ var Canvas3DHost = React3.forwardRef(
                       dampingFactor: 0.05,
                       enableZoom: true,
                       enablePan: true,
-                      touches: { ONE: THREE10__namespace.TOUCH.ROTATE, TWO: THREE10__namespace.TOUCH.DOLLY_PAN },
+                      touches: { ONE: THREE11__namespace.TOUCH.ROTATE, TWO: THREE11__namespace.TOUCH.DOLLY_PAN },
                       minDistance: 2,
                       maxDistance: 100,
                       maxPolarAngle: Math.PI / 2 - 0.1
@@ -1604,15 +1970,15 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
-      scene.background = new THREE10__namespace.Color(background);
+      scene.background = new THREE11__namespace.Color(background);
     } else {
-      const loader = new THREE10__namespace.TextureLoader();
+      const loader = new THREE11__namespace.TextureLoader();
       loader.load(background, (texture) => {
         scene.background = texture;
       });
     }
     if (fog) {
-      scene.fog = new THREE10__namespace.Fog(fog.color, fog.near, fog.far);
+      scene.fog = new THREE11__namespace.Fog(fog.color, fog.near, fog.far);
     }
     return () => {
       scene.background = null;
@@ -1635,14 +2001,14 @@ var Camera3D = React3.forwardRef(
   }, ref) => {
     const { camera, set, viewport } = fiber.useThree();
     const controlsRef = React3.useRef(null);
-    const initialPosition = React3.useRef(new THREE10__namespace.Vector3(...position));
-    const initialTarget = React3.useRef(new THREE10__namespace.Vector3(...target));
+    const initialPosition = React3.useRef(new THREE11__namespace.Vector3(...position));
+    const initialTarget = React3.useRef(new THREE11__namespace.Vector3(...target));
     React3.useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
         const size = 10 / zoom;
-        newCamera = new THREE10__namespace.OrthographicCamera(
+        newCamera = new THREE11__namespace.OrthographicCamera(
           -size * aspect,
           size * aspect,
           size,
@@ -1651,7 +2017,7 @@ var Camera3D = React3.forwardRef(
           1e3
         );
       } else {
-        newCamera = new THREE10__namespace.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
+        newCamera = new THREE11__namespace.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
       }
       newCamera.position.copy(initialPosition.current);
       newCamera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
@@ -1692,8 +2058,8 @@ var Camera3D = React3.forwardRef(
         }
       },
       getViewBounds: () => {
-        const min = new THREE10__namespace.Vector3(-10, -10, -10);
-        const max = new THREE10__namespace.Vector3(10, 10, 10);
+        const min = new THREE11__namespace.Vector3(-10, -10, -10);
+        const max = new THREE11__namespace.Vector3(10, 10, 10);
         return { min, max };
       }
     }));
@@ -1735,7 +2101,7 @@ var AssetLoader = class {
     __publicField(this, "textureCache");
     __publicField(this, "loadingPromises");
     this.objLoader = new OBJLoader_js.OBJLoader();
-    this.textureLoader = new THREE10__namespace.TextureLoader();
+    this.textureLoader = new THREE11__namespace.TextureLoader();
     this.modelCache = /* @__PURE__ */ new Map();
     this.textureCache = /* @__PURE__ */ new Map();
     this.loadingPromises = /* @__PURE__ */ new Map();
@@ -1809,7 +2175,7 @@ var AssetLoader = class {
       return this.loadingPromises.get(`texture:${url}`);
     }
     const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE10__namespace.SRGBColorSpace;
+      texture.colorSpace = THREE11__namespace.SRGBColorSpace;
       this.textureCache.set(url, texture);
       this.loadingPromises.delete(`texture:${url}`);
       return texture;
@@ -1883,7 +2249,7 @@ var AssetLoader = class {
     });
     this.modelCache.forEach((model) => {
       model.scene.traverse((child) => {
-        if (child instanceof THREE10__namespace.Mesh) {
+        if (child instanceof THREE11__namespace.Mesh) {
           child.geometry.dispose();
           if (Array.isArray(child.material)) {
             child.material.forEach((m) => m.dispose());
@@ -1920,7 +2286,7 @@ var DEFAULT_OPTIONS = {
   gridSize: 20,
   assetLoader: new AssetLoader()
 };
-function useThree4(options = {}) {
+function useThree5(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
   const containerRef = React3.useRef(null);
   const canvasRef = React3.useRef(null);
@@ -1933,21 +2299,21 @@ function useThree4(options = {}) {
   const [isReady, setIsReady] = React3.useState(false);
   const [dimensions, setDimensions] = React3.useState({ width: 0, height: 0 });
   const initialCameraPosition = React3.useMemo(
-    () => new THREE10__namespace.Vector3(...opts.cameraPosition),
+    () => new THREE11__namespace.Vector3(...opts.cameraPosition),
     []
   );
   React3.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
-    const scene = new THREE10__namespace.Scene();
-    scene.background = new THREE10__namespace.Color(opts.backgroundColor);
+    const scene = new THREE11__namespace.Scene();
+    scene.background = new THREE11__namespace.Color(opts.backgroundColor);
     sceneRef.current = scene;
     let camera;
     const aspect = clientWidth / clientHeight;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      camera = new THREE10__namespace.OrthographicCamera(
+      camera = new THREE11__namespace.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -1956,11 +2322,11 @@ function useThree4(options = {}) {
         1e3
       );
     } else {
-      camera = new THREE10__namespace.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      camera = new THREE11__namespace.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     camera.position.copy(initialCameraPosition);
     cameraRef.current = camera;
-    const renderer = new THREE10__namespace.WebGLRenderer({
+    const renderer = new THREE11__namespace.WebGLRenderer({
       antialias: true,
       alpha: true,
       canvas: canvasRef.current || void 0
@@ -1968,7 +2334,7 @@ function useThree4(options = {}) {
     renderer.setSize(clientWidth, clientHeight);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.shadowMap.enabled = opts.shadows;
-    renderer.shadowMap.type = THREE10__namespace.PCFSoftShadowMap;
+    renderer.shadowMap.type = THREE11__namespace.PCFSoftShadowMap;
     rendererRef.current = renderer;
     const controls = new OrbitControls_js.OrbitControls(camera, renderer.domElement);
     controls.enableDamping = true;
@@ -1977,16 +2343,16 @@ function useThree4(options = {}) {
     controls.maxDistance = 100;
     controls.maxPolarAngle = Math.PI / 2 - 0.1;
     controlsRef.current = controls;
-    const ambientLight = new THREE10__namespace.AmbientLight(16777215, 0.6);
+    const ambientLight = new THREE11__namespace.AmbientLight(16777215, 0.6);
     scene.add(ambientLight);
-    const directionalLight = new THREE10__namespace.DirectionalLight(16777215, 0.8);
+    const directionalLight = new THREE11__namespace.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__namespace.GridHelper(
+      const gridHelper = new THREE11__namespace.GridHelper(
         opts.gridSize,
         opts.gridSize,
         4473924,
@@ -2004,10 +2370,10 @@ function useThree4(options = {}) {
     const handleResize = () => {
       const { clientWidth: width, clientHeight: height } = container;
       setDimensions({ width, height });
-      if (camera instanceof THREE10__namespace.PerspectiveCamera) {
+      if (camera instanceof THREE11__namespace.PerspectiveCamera) {
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
-      } else if (camera instanceof THREE10__namespace.OrthographicCamera) {
+      } else if (camera instanceof THREE11__namespace.OrthographicCamera) {
         const aspect2 = width / height;
         const size = 10;
         camera.left = -size * aspect2;
@@ -2038,7 +2404,7 @@ function useThree4(options = {}) {
     let newCamera;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      newCamera = new THREE10__namespace.OrthographicCamera(
+      newCamera = new THREE11__namespace.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -2047,7 +2413,7 @@ function useThree4(options = {}) {
         1e3
       );
     } else {
-      newCamera = new THREE10__namespace.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      newCamera = new THREE11__namespace.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     newCamera.position.copy(currentPos);
     cameraRef.current = newCamera;
@@ -2377,8 +2743,8 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React3.useRef(new THREE10__namespace.Raycaster());
-  const mouse = React3.useRef(new THREE10__namespace.Vector2());
+  const raycaster = React3.useRef(new THREE11__namespace.Raycaster());
+  const mouse = React3.useRef(new THREE11__namespace.Vector2());
   const clientToNDC = React3.useCallback(
     (clientX, clientY) => {
       if (!canvas) {
@@ -2448,8 +2814,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__namespace.Plane(new THREE10__namespace.Vector3(0, 1, 0), 0);
-      const target = new THREE10__namespace.Vector3();
+      const plane = new THREE11__namespace.Plane(new THREE11__namespace.Vector3(0, 1, 0), 0);
+      const target = new THREE11__namespace.Vector3();
       const intersection = raycaster.current.ray.intersectPlane(plane, target);
       if (intersection) {
         const gridX = Math.round((target.x - offsetX) / cellSize);
@@ -2487,7 +2853,7 @@ function useRaycaster(options) {
         return {
           gridX: gridCoords.x,
           gridZ: gridCoords.z,
-          worldPosition: new THREE10__namespace.Vector3(
+          worldPosition: new THREE11__namespace.Vector3(
             gridCoords.x * cellSize + offsetX,
             0,
             gridCoords.z * cellSize + offsetZ
@@ -2517,7 +2883,7 @@ var DEFAULT_CONFIG = {
 };
 function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
   const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE10__namespace.Vector3(
+  return new THREE11__namespace.Vector3(
     gridX * opts.cellSize + opts.offsetX,
     opts.elevation,
     gridZ * opts.cellSize + opts.offsetZ
@@ -2531,17 +2897,17 @@ function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
   };
 }
 function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE10__namespace.Raycaster();
-  const mouse = new THREE10__namespace.Vector2(mouseX, mouseY);
+  const raycaster = new THREE11__namespace.Raycaster();
+  const mouse = new THREE11__namespace.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE10__namespace.Plane(new THREE10__namespace.Vector3(0, 1, 0), -planeY);
-  const target = new THREE10__namespace.Vector3();
+  const plane = new THREE11__namespace.Plane(new THREE11__namespace.Vector3(0, 1, 0), -planeY);
+  const target = new THREE11__namespace.Vector3();
   const intersection = raycaster.ray.intersectPlane(plane, target);
   return intersection ? target : null;
 }
 function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE10__namespace.Raycaster();
-  const mouse = new THREE10__namespace.Vector2(mouseX, mouseY);
+  const raycaster = new THREE11__namespace.Raycaster();
+  const mouse = new THREE11__namespace.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
   const intersects = raycaster.intersectObjects(objects, true);
   return intersects.length > 0 ? intersects[0] : null;
@@ -2593,14 +2959,14 @@ function getCellsInRadius(centerX, centerZ, radius) {
   return cells;
 }
 function createGridHighlight(color = 16776960, opacity = 0.3) {
-  const geometry = new THREE10__namespace.PlaneGeometry(0.95, 0.95);
-  const material = new THREE10__namespace.MeshBasicMaterial({
+  const geometry = new THREE11__namespace.PlaneGeometry(0.95, 0.95);
+  const material = new THREE11__namespace.MeshBasicMaterial({
     color,
     transparent: true,
     opacity,
-    side: THREE10__namespace.DoubleSide
+    side: THREE11__namespace.DoubleSide
   });
-  const mesh = new THREE10__namespace.Mesh(geometry, material);
+  const mesh = new THREE11__namespace.Mesh(geometry, material);
   mesh.rotation.x = -Math.PI / 2;
   mesh.position.y = 0.01;
   return mesh;
@@ -2613,31 +2979,31 @@ function normalizeMouseCoordinates(clientX, clientY, element) {
   };
 }
 function isInFrustum(position, camera, padding = 0) {
-  const frustum = new THREE10__namespace.Frustum();
-  const projScreenMatrix = new THREE10__namespace.Matrix4();
+  const frustum = new THREE11__namespace.Frustum();
+  const projScreenMatrix = new THREE11__namespace.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
-  const sphere = new THREE10__namespace.Sphere(position, padding);
+  const sphere = new THREE11__namespace.Sphere(position, padding);
   return frustum.intersectsSphere(sphere);
 }
 function filterByFrustum(positions, camera, padding = 0) {
-  const frustum = new THREE10__namespace.Frustum();
-  const projScreenMatrix = new THREE10__namespace.Matrix4();
+  const frustum = new THREE11__namespace.Frustum();
+  const projScreenMatrix = new THREE11__namespace.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   return positions.filter((position) => {
-    const sphere = new THREE10__namespace.Sphere(position, padding);
+    const sphere = new THREE11__namespace.Sphere(position, padding);
     return frustum.intersectsSphere(sphere);
   });
 }
 function getVisibleIndices(positions, camera, padding = 0) {
-  const frustum = new THREE10__namespace.Frustum();
-  const projScreenMatrix = new THREE10__namespace.Matrix4();
+  const frustum = new THREE11__namespace.Frustum();
+  const projScreenMatrix = new THREE11__namespace.Matrix4();
   const visible = /* @__PURE__ */ new Set();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   positions.forEach((position, index) => {
-    const sphere = new THREE10__namespace.Sphere(position, padding);
+    const sphere = new THREE11__namespace.Sphere(position, padding);
     if (frustum.intersectsSphere(sphere)) {
       visible.add(index);
     }
@@ -2661,7 +3027,7 @@ function updateInstanceLOD(instancedMesh, positions, camera, lodDistances) {
   return lodIndices;
 }
 function cullInstancedMesh(instancedMesh, positions, visibleIndices) {
-  const dummy = new THREE10__namespace.Object3D();
+  const dummy = new THREE11__namespace.Object3D();
   let visibleCount = 0;
   positions.forEach((position, index) => {
     if (visibleIndices.has(index)) {
@@ -3828,25 +4194,25 @@ function orbitRingPositions(count, radius, tilt) {
   return positions;
 }
 function arcCurve3D(from, to, offset) {
-  const start = new THREE10.Vector3(...from);
-  const end = new THREE10.Vector3(...to);
-  const mid = new THREE10.Vector3().addVectors(start, end).multiplyScalar(0.5);
-  const dir = new THREE10.Vector3().subVectors(end, start).normalize();
-  const up = new THREE10.Vector3(0, 1, 0);
-  const perp = new THREE10.Vector3().crossVectors(dir, up).normalize();
+  const start = new THREE11.Vector3(...from);
+  const end = new THREE11.Vector3(...to);
+  const mid = new THREE11.Vector3().addVectors(start, end).multiplyScalar(0.5);
+  const dir = new THREE11.Vector3().subVectors(end, start).normalize();
+  const up = new THREE11.Vector3(0, 1, 0);
+  const perp = new THREE11.Vector3().crossVectors(dir, up).normalize();
   if (perp.length() < 1e-3) {
-    perp.crossVectors(dir, new THREE10.Vector3(1, 0, 0)).normalize();
+    perp.crossVectors(dir, new THREE11.Vector3(1, 0, 0)).normalize();
   }
   const control = mid.clone().add(perp.multiplyScalar(offset));
   control.y += Math.abs(offset) * 0.3;
-  return new THREE10.QuadraticBezierCurve3(start, control, end);
+  return new THREE11.QuadraticBezierCurve3(start, control, end);
 }
 function selfLoopCurve3D(position, loopRadius) {
-  const base = new THREE10.Vector3(...position);
-  const start = base.clone().add(new THREE10.Vector3(-loopRadius * 0.3, 0, 0));
-  const end = base.clone().add(new THREE10.Vector3(loopRadius * 0.3, 0, 0));
-  const control = base.clone().add(new THREE10.Vector3(0, loopRadius, 0));
-  return new THREE10.QuadraticBezierCurve3(start, control, end);
+  const base = new THREE11.Vector3(...position);
+  const start = base.clone().add(new THREE11.Vector3(-loopRadius * 0.3, 0, 0));
+  const end = base.clone().add(new THREE11.Vector3(loopRadius * 0.3, 0, 0));
+  const control = base.clone().add(new THREE11.Vector3(0, loopRadius, 0));
+  return new THREE11.QuadraticBezierCurve3(start, control, end);
 }
 function treeLayout3D(node, origin, horizontalSpacing, verticalSpacing = 2) {
   const results = [];
@@ -4013,7 +4379,7 @@ var Avl3DOrbitalNode = ({
     if (!groupRef.current) return;
     groupRef.current.rotation.y += delta * (hovered ? 0.4 : 0.2);
     groupRef.current.rotation.x += delta * 0.05;
-    currentScale.current = THREE10.MathUtils.damp(currentScale.current, targetScale, 6, delta);
+    currentScale.current = THREE11.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
   const baseBrightness = 0.3 + Math.min(pageCount, 5) * 0.05;
   const emissiveIntensity = hovered ? 0.8 : baseBrightness;
@@ -4655,7 +5021,7 @@ var Avl3DStateNode = ({
   const targetScale = hovered ? 1.08 : 1;
   const currentScale = React3.useRef(1);
   fiber.useFrame((_, delta) => {
-    currentScale.current = THREE10.MathUtils.damp(currentScale.current, targetScale, 6, delta);
+    currentScale.current = THREE11.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
   const scale = currentScale.current;
   return /* @__PURE__ */ jsxRuntime.jsxs("group", { position, children: [
@@ -4835,9 +5201,9 @@ var Avl3DTransitionArc = ({
     const guardPt = curve.getPoint(0.3);
     const arrowPt = curve.getPoint(0.9);
     const arrowTangent = curve.getTangent(0.9);
-    const upVec = new THREE10.Vector3(0, 1, 0);
-    const tangentVec = new THREE10.Vector3(arrowTangent.x, arrowTangent.y, arrowTangent.z).normalize();
-    const quat = new THREE10.Quaternion().setFromUnitVectors(upVec, tangentVec);
+    const upVec = new THREE11.Vector3(0, 1, 0);
+    const tangentVec = new THREE11.Vector3(arrowTangent.x, arrowTangent.y, arrowTangent.z).normalize();
+    const quat = new THREE11.Quaternion().setFromUnitVectors(upVec, tangentVec);
     const effectPositions2 = [];
     for (let ei = 0; ei < 4; ei++) {
       const t = 0.7 + ei * 0.05;
@@ -5061,14 +5427,14 @@ function operatorColor(label) {
   return "#4A90D9";
 }
 function edgeGeometry(parent, child) {
-  const p = new THREE10.Vector3(parent.x, parent.y, parent.z);
-  const c = new THREE10.Vector3(child.x, child.y, child.z);
-  const mid = new THREE10.Vector3().addVectors(p, c).multiplyScalar(0.5);
-  const dir = new THREE10.Vector3().subVectors(c, p);
+  const p = new THREE11.Vector3(parent.x, parent.y, parent.z);
+  const c = new THREE11.Vector3(child.x, child.y, child.z);
+  const mid = new THREE11.Vector3().addVectors(p, c).multiplyScalar(0.5);
+  const dir = new THREE11.Vector3().subVectors(c, p);
   const length = dir.length();
-  const yAxis = new THREE10.Vector3(0, 1, 0);
+  const yAxis = new THREE11.Vector3(0, 1, 0);
   const angle = yAxis.angleTo(dir.normalize());
-  const axis = new THREE10.Vector3().crossVectors(yAxis, dir).normalize();
+  const axis = new THREE11.Vector3().crossVectors(yAxis, dir).normalize();
   if (axis.length() < 1e-3) {
     return {
       position: [mid.x, mid.y, mid.z],
@@ -5444,12 +5810,12 @@ function useAvl3DConfig() {
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
-  const targetPosVec = React3.useRef(new THREE10__namespace.Vector3(...targetPosition));
-  const targetLookVec = React3.useRef(new THREE10__namespace.Vector3(...targetLookAt));
+  const targetPosVec = React3.useRef(new THREE11__namespace.Vector3(...targetPosition));
+  const targetLookVec = React3.useRef(new THREE11__namespace.Vector3(...targetLookAt));
   const isAnimating = React3.useRef(false);
   React3.useEffect(() => {
-    const newTarget = new THREE10__namespace.Vector3(...targetPosition);
-    const newLookAt = new THREE10__namespace.Vector3(...targetLookAt);
+    const newTarget = new THREE11__namespace.Vector3(...targetPosition);
+    const newLookAt = new THREE11__namespace.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
       targetPosVec.current.copy(newTarget);
       targetLookVec.current.copy(newLookAt);
@@ -5464,9 +5830,9 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   fiber.useFrame((_, delta) => {
     if (!isAnimating.current) return;
     const speed = 3;
-    camera.position.x = THREE10__namespace.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
-    camera.position.y = THREE10__namespace.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
-    camera.position.z = THREE10__namespace.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    camera.position.x = THREE11__namespace.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE11__namespace.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE11__namespace.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) {
@@ -5481,7 +5847,7 @@ function SceneFade({ animating, children }) {
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
-    opacityRef.current = THREE10__namespace.MathUtils.damp(opacityRef.current, target, 5, delta);
+    opacityRef.current = THREE11__namespace.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);
@@ -5781,5 +6147,5 @@ exports.useAvl3DConfig = useAvl3DConfig;
 exports.useGameCanvas3DEvents = useGameCanvas3DEvents;
 exports.useRaycaster = useRaycaster;
 exports.useSceneGraph = useSceneGraph;
-exports.useThree = useThree4;
+exports.useThree = useThree5;
 exports.worldToGrid = worldToGrid;