@almadar/ui 5.140.0 → 5.142.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, { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, useCallback, createContext, 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 THREE9 from 'three';
+import * as THREE10 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;
@@ -165,6 +166,7 @@ function collectDrawnItems(nodes) {
       case "draw-shape":
       case "draw-text":
       case "draw-group":
+      case "draw-mesh":
         if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id });
         break;
       case "draw-sprite-layer":
@@ -449,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,
@@ -481,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 THREE9.DirectionalLight(directionalColor, directionalIntensity),
+          new THREE10.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
 }) {
@@ -517,8 +564,8 @@ function FollowCamera3D({
   offset
 }) {
   const { camera } = useThree();
-  const look = useRef(new THREE9.Vector3(target[0], target[1], target[2]));
-  const goal = useRef(new THREE9.Vector3());
+  const look = useRef(new THREE10.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE10.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]);
@@ -529,6 +576,88 @@ function FollowCamera3D({
   return null;
 }
 
+// lib/drawable/projector3d.ts
+function create3DProjector(opts = {}) {
+  const cellSize = opts.cellSize ?? 1;
+  const offsetX = opts.offsetX ?? 0;
+  const offsetZ = opts.offsetZ ?? 0;
+  return {
+    cellSize,
+    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
+  };
+}
+var NUMERIC_TRACKS = [
+  "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 lerp = (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 lerp(a, b, k);
+    return a;
+  };
+  for (const key of NUMERIC_TRACKS) {
+    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: lerp(prevSh.shadow.blur, nextSh.shadow.blur, k) };
+      } else {
+        out.shadow = sh;
+      }
+    }
+  }
+  return out;
+}
+
 // lib/atlasSlice.ts
 var atlasCache = /* @__PURE__ */ new Map();
 function isTilesheet(a) {
@@ -663,12 +792,12 @@ function ModelLoader({
     if (!loadedModel) return null;
     const cloned = clone(loadedModel);
     cloned.updateMatrixWorld(true);
-    const tintColor = tint ? new THREE9.Color(tint) : null;
+    const tintColor = tint ? new THREE10.Color(tint) : null;
     cloned.traverse((child) => {
-      if (child instanceof THREE9.Mesh) {
+      if (child instanceof THREE10.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
-        if (tintColor && child.material instanceof THREE9.MeshStandardMaterial) {
+        if (tintColor && child.material instanceof THREE10.MeshStandardMaterial) {
           const mat = child.material.clone();
           mat.color.multiply(tintColor);
           child.material = mat;
@@ -677,7 +806,7 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = useMemo(() => model ? new THREE9.AnimationMixer(model) : null, [model]);
+  const mixer = useMemo(() => model ? new THREE10.AnimationMixer(model) : null, [model]);
   useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
@@ -694,8 +823,8 @@ function ModelLoader({
   });
   const normFactor = useMemo(() => {
     if (!model) return 1;
-    const box = new THREE9.Box3().setFromObject(model);
-    const size = new THREE9.Vector3();
+    const box = new THREE10.Box3().setFromObject(model);
+    const size = new THREE10.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
@@ -785,7 +914,7 @@ var warnUnsupported3d = (kind) => {
   warnedUnsupported.add(kind);
   mesh3dLog.warn("unsupported drawable kind on the 3D backend \u2014 skipped", { kind });
 };
-var CrossOriginTextureLoader = class extends THREE9.TextureLoader {
+var CrossOriginTextureLoader = class extends THREE10.TextureLoader {
   constructor() {
     super();
     this.crossOrigin = "anonymous";
@@ -803,7 +932,7 @@ function useBillboardTexture(url) {
       url,
       (texture) => {
         if (!active) return;
-        texture.colorSpace = THREE9.SRGBColorSpace;
+        texture.colorSpace = THREE10.SRGBColorSpace;
         setState({ texture, error: false });
       },
       void 0,
@@ -835,7 +964,7 @@ function useAtlasFrame(asset) {
     return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
   }, [asset, tick]);
 }
-function SpriteBillboard({ node, world, cellSize = 1 }) {
+function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
   const { texture, error: textureError } = useBillboardTexture(node.asset.url);
   const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
   const frame = node.frame ?? atlasFrame;
@@ -856,7 +985,7 @@ function SpriteBillboard({ node, world, cellSize = 1 }) {
   }, [texture, frame, node.height, node.width, anchor, cellSize]);
   const groundGeometry = React3.useMemo(() => {
     if (anchor !== "top-left" || !texture || !atlasReady) return null;
-    const g = new THREE9.PlaneGeometry(size.width, size.height);
+    const g = new THREE10.PlaneGeometry(size.width, size.height);
     g.rotateX(-Math.PI / 2);
     return g;
   }, [anchor, texture, atlasReady, size.width, size.height]);
@@ -864,15 +993,15 @@ function SpriteBillboard({ node, world, cellSize = 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: THREE9.DoubleSide })
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE10.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: THREE9.DoubleSide })
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE10.DoubleSide })
     ] }) });
   }
-  texture.magFilter = texture.minFilter = THREE9.NearestFilter;
+  texture.magFilter = texture.minFilter = THREE10.NearestFilter;
   texture.needsUpdate = true;
   if (frame) {
     texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
@@ -885,8 +1014,8 @@ function SpriteBillboard({ node, world, cellSize = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE9.DoubleSide,
-        opacity: node.opacity ?? 1
+        side: THREE10.DoubleSide,
+        opacity: (node.opacity ?? 1) * groupOpacity
       }
     ) }) });
   }
@@ -898,13 +1027,13 @@ function SpriteBillboard({ node, world, cellSize = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE9.DoubleSide,
+        side: THREE10.DoubleSide,
         opacity: node.opacity ?? 1
       }
     )
   ] }) });
 }
-function Sprite3D({ node, projector }) {
+function Sprite3D({ node, projector, groupOpacity = 1 }) {
   const asset = node.asset;
   if (!asset?.url || !isValidScenePos(node.position)) return null;
   if (asset.dimension === "3d") {
@@ -918,7 +1047,7 @@ function Sprite3D({ node, projector }) {
       {
         url: asset.url,
         scale,
-        rotation: [0, node.rotation ?? 0, 0],
+        rotation: [0, (node.rotation ?? 0) * 180 / Math.PI, 0],
         animation: node.animation,
         fallbackGeometry: "box",
         castShadow: true,
@@ -926,11 +1055,30 @@ function Sprite3D({ node, projector }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize });
+  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize, groupOpacity });
 }
-function Shape3D({ node, projector }) {
-  if (!isValidScenePos(node.position)) return null;
-  const world = projector.toWorld(node.position);
+function Shape3D({ node, projector, groupOpacity = 1 }) {
+  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) {
@@ -948,7 +1096,7 @@ function Shape3D({ node, projector }) {
     }
     case "poly": {
       if (!node.points || node.points.length === 0) return null;
-      const s = new THREE9.Shape();
+      const s = new THREE10.Shape();
       node.points.forEach((p, i) => {
         if (i === 0) s.moveTo(p.x, p.y);
         else s.lineTo(p.x, p.y);
@@ -964,12 +1112,12 @@ function Shape3D({ node, projector }) {
     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, side: THREE9.DoubleSide })
-  ] });
+    /* @__PURE__ */ jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE10.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(
@@ -981,41 +1129,252 @@ function Text3D({ node, projector }) {
       anchorY: "middle",
       outlineWidth: 0.02,
       outlineColor: "#000000",
+      fillOpacity: groupOpacity,
+      outlineOpacity: groupOpacity,
       children: node.text
     }
   ) });
 }
-function Drawable3D({ node, projector }) {
+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 lerp2 = (a, b, k) => a + (b - a) * k;
+var NUMERIC_TRACKS2 = [
+  "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 lerp2(a, b, k);
+    return a;
+  };
+  const num = {};
+  for (const key of NUMERIC_TRACKS2) {
+    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")
+  };
+}
+function meshGeometry(node, cellSize) {
+  const seg = clampSegments(node.segments);
+  const r = (node.radius ?? 0.4) * cellSize;
+  const w = (node.width ?? 1) * cellSize;
+  const h = (node.height ?? 1) * cellSize;
+  const d = (node.depth ?? node.width ?? 1) * cellSize;
+  switch (node.shape) {
+    case "box":
+      return { element: /* @__PURE__ */ jsx("boxGeometry", { args: [w, h, d] }), lift: h / 2, size: Math.max(w, h, d) };
+    case "sphere":
+      return { element: /* @__PURE__ */ jsx("sphereGeometry", { args: [r, seg, seg] }), lift: r, size: r * 2 };
+    case "capsule":
+      return { element: /* @__PURE__ */ jsx("capsuleGeometry", { args: [r, h, Math.max(2, Math.round(seg / 2)), seg] }), lift: h / 2 + r, size: h + r * 2 };
+    case "cylinder":
+      return {
+        element: /* @__PURE__ */ jsx("cylinderGeometry", { args: [(node.radiusTop ?? node.radius ?? 0.4) * cellSize, (node.radiusBottom ?? node.radius ?? 0.4) * cellSize, h, seg] }),
+        lift: h / 2,
+        size: Math.max(h, r * 2)
+      };
+    case "cone":
+      return { element: /* @__PURE__ */ jsx("coneGeometry", { args: [r, h, seg] }), lift: h / 2, size: Math.max(h, r * 2) };
+    case "torus": {
+      const tube = (node.tube ?? (node.radius ?? 0.4) / 3) * 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) };
+    case "circle":
+      return { element: /* @__PURE__ */ jsx("circleGeometry", { args: [r, seg] }), lift: 0, size: r * 2 };
+    default:
+      return null;
+  }
+}
+var SIDE_MAP = {
+  front: THREE10.FrontSide,
+  back: THREE10.BackSide,
+  double: THREE10.DoubleSide
+};
+function meshMaterial(mat, opacity, ref) {
+  const m = mat ?? {};
+  const common = {
+    ref,
+    color: m.color ?? "#ffffff",
+    transparent: opacity < 1,
+    opacity,
+    side: SIDE_MAP[m.side ?? "front"]
+  };
+  const emissive = m.emissive ? { emissive: m.emissive, emissiveIntensity: m.emissiveIntensity ?? 1 } : {};
+  switch (m.kind ?? "standard") {
+    case "basic":
+      return /* @__PURE__ */ jsx("meshBasicMaterial", { ...common });
+    case "toon":
+      return /* @__PURE__ */ jsx("meshToonMaterial", { ...common, ...emissive });
+    case "physical":
+      return /* @__PURE__ */ jsx(
+        "meshPhysicalMaterial",
+        {
+          ...common,
+          ...emissive,
+          metalness: m.metalness ?? 0,
+          roughness: m.roughness ?? 0.5,
+          transmission: m.transmission ?? 0,
+          ior: m.ior ?? 1.5,
+          flatShading: m.flatShading ?? false
+        }
+      );
+    case "standard":
+    default:
+      return /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          ...common,
+          ...emissive,
+          metalness: m.metalness ?? 0,
+          roughness: m.roughness ?? 0.5,
+          flatShading: m.flatShading ?? false
+        }
+      );
+  }
+}
+function Mesh3D({
+  node,
+  projector,
+  groupOpacity = 1
+}) {
+  const groupRef = useRef(null);
+  const meshRef = useRef(null);
+  const materialRef = useRef(null);
+  const animated = isAnimatedMesh(node);
+  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]);
+  useFrame(({ clock }) => {
+    if (!animated || !groupRef.current) return;
+    const state = applyMeshAnimation(node, clock.elapsedTime * 1e3);
+    if (!state) return;
+    const [wx, wy, wz] = baseWorld;
+    groupRef.current.position.set(
+      wx + state.offset[0] * projector.cellSize,
+      wy + state.offset[2] * projector.cellSize,
+      wz + state.offset[1] * projector.cellSize
+    );
+    groupRef.current.scale.setScalar(state.scale);
+    if (meshRef.current) {
+      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]);
+    }
+    const mat = materialRef.current;
+    if (mat) {
+      const effective = (state.opacity ?? node.opacity ?? 1) * (node.material?.opacity ?? 1) * groupOpacity;
+      mat.opacity = effective;
+      mat.transparent = effective < 1;
+      if (state.color && mat.color) mat.color.set(state.color);
+      if (state.emissive && mat.emissive) mat.emissive.set(state.emissive);
+      if (state.emissiveIntensity !== void 0 && mat.emissiveIntensity !== void 0) {
+        mat.emissiveIntensity = state.emissiveIntensity;
+      }
+    }
+  });
+  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];
+  const outlineScale = geo.size > 0 ? 1 + (node.outline?.width ?? 0.05) * projector.cellSize / geo.size : 1;
+  return /* @__PURE__ */ jsxs("group", { ref: groupRef, position: baseWorld, children: [
+    /* @__PURE__ */ jsxs(
+      "mesh",
+      {
+        ref: meshRef,
+        position: [0, lift, 0],
+        rotation,
+        castShadow: node.castShadow ?? true,
+        receiveShadow: node.receiveShadow ?? true,
+        children: [
+          geo.element,
+          meshMaterial(node.material, opacity, materialRef)
+        ]
+      }
+    ),
+    node.outline && /* @__PURE__ */ jsxs("mesh", { position: [0, lift, 0], rotation, scale: outlineScale, children: [
+      geo.element,
+      /* @__PURE__ */ jsx(
+        "meshBasicMaterial",
+        {
+          color: node.outline.color ?? "#101014",
+          side: THREE10.BackSide,
+          transparent: opacity < 1,
+          opacity
+        }
+      )
+    ] })
+  ] });
+}
+function Drawable3D({ node, projector, groupOpacity = 1 }) {
   switch (node.type) {
     case "draw-sprite":
-      return /* @__PURE__ */ jsx(Sprite3D, { node, projector });
+      return /* @__PURE__ */ jsx(Sprite3D, { node, projector, groupOpacity });
     case "draw-shape":
-      return /* @__PURE__ */ jsx(Shape3D, { node, projector });
+      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":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Sprite3D, { node: item, projector }, i)) });
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Sprite3D, { node: item, projector, groupOpacity }, i)) });
     case "draw-shape-layer":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector }, i)) });
+      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)) });
-    case "draw-group":
-      warnUnsupported3d("draw-group");
-      return null;
+      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)) });
+    }
   }
 }
 
-// lib/drawable/projector3d.ts
-function create3DProjector(opts = {}) {
-  const cellSize = opts.cellSize ?? 1;
-  const offsetX = opts.offsetX ?? 0;
-  const offsetZ = opts.offsetZ ?? 0;
-  return {
-    cellSize,
-    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
-  };
-}
-
 // lib/drawable/three/game3dTheme.ts
 var GRID_COLORS_3D = {
   cell: "#444444",
@@ -1027,6 +1386,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 THREE10.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",
@@ -1051,6 +1424,9 @@ var Canvas3DHost = forwardRef(
     keyMap,
     keyUpMap,
     pixelsPerUnit,
+    fov,
+    lighting,
+    post,
     children,
     drawables
   }, ref) => {
@@ -1059,6 +1435,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) => {
@@ -1092,7 +1469,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(() => {
@@ -1140,7 +1517,7 @@ var Canvas3DHost = forwardRef(
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
-          return new THREE9.Vector3(pos.x, pos.y, pos.z);
+          return new THREE10.Vector3(pos.x, pos.y, pos.z);
         }
         return null;
       },
@@ -1179,18 +1556,19 @@ var Canvas3DHost = forwardRef(
       const cx = cameraTarget[0];
       const cz = cameraTarget[2];
       const d = size * 1;
+      const fovDeg = fov ?? 45;
       switch (cameraMode) {
         case "isometric":
-          return { position: [cx + d, d * 0.8, cz + d], fov: 45 };
+          return { position: [cx + d, d * 0.8, cz + d], fov: fovDeg };
         case "top-down":
-          return { position: [cx, d * 2, cz + d * 0.35], fov: 45 };
+          return { position: [cx, d * 2, cz + d * 0.35], fov: fovDeg };
         case "follow":
-          return { position: [cx, d * 0.5, cz + d], fov: 45 };
+          return { position: [cx, d * 0.5, cz + d], fov: fovDeg };
         case "perspective":
         default:
-          return { position: [cx + d, d, cz + d], fov: 45 };
+          return { position: [cx + d, d, cz + d], fov: fovDeg };
       }
-    }, [cameraMode, gridBounds, cellSize, cameraTarget]);
+    }, [cameraMode, gridBounds, cellSize, cameraTarget, fov]);
     const followWorld = useMemo(() => {
       if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
@@ -1273,9 +1651,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,
                     {
@@ -1298,7 +1686,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("group", { children: allDrawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
                   (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxs(
                     "mesh",
                     {
@@ -1323,7 +1711,7 @@ var Canvas3DHost = forwardRef(
                       ]
                     }
                   ),
-                  children,
+                  post && (post.bloom || post.vignette) ? /* @__PURE__ */ jsx(Effects3D, { post }) : null,
                   /* @__PURE__ */ jsx(
                     OrbitControls,
                     {
@@ -1334,7 +1722,7 @@ var Canvas3DHost = forwardRef(
                       dampingFactor: 0.05,
                       enableZoom: true,
                       enablePan: true,
-                      touches: { ONE: THREE9.TOUCH.ROTATE, TWO: THREE9.TOUCH.DOLLY_PAN },
+                      touches: { ONE: THREE10.TOUCH.ROTATE, TWO: THREE10.TOUCH.DOLLY_PAN },
                       minDistance: 2,
                       maxDistance: 100,
                       maxPolarAngle: Math.PI / 2 - 0.1
@@ -1357,15 +1745,15 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
-      scene.background = new THREE9.Color(background);
+      scene.background = new THREE10.Color(background);
     } else {
-      const loader = new THREE9.TextureLoader();
+      const loader = new THREE10.TextureLoader();
       loader.load(background, (texture) => {
         scene.background = texture;
       });
     }
     if (fog) {
-      scene.fog = new THREE9.Fog(fog.color, fog.near, fog.far);
+      scene.fog = new THREE10.Fog(fog.color, fog.near, fog.far);
     }
     return () => {
       scene.background = null;
@@ -1388,14 +1776,14 @@ var Camera3D = forwardRef(
   }, ref) => {
     const { camera, set, viewport } = useThree();
     const controlsRef = useRef(null);
-    const initialPosition = useRef(new THREE9.Vector3(...position));
-    const initialTarget = useRef(new THREE9.Vector3(...target));
+    const initialPosition = useRef(new THREE10.Vector3(...position));
+    const initialTarget = useRef(new THREE10.Vector3(...target));
     useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
         const size = 10 / zoom;
-        newCamera = new THREE9.OrthographicCamera(
+        newCamera = new THREE10.OrthographicCamera(
           -size * aspect,
           size * aspect,
           size,
@@ -1404,7 +1792,7 @@ var Camera3D = forwardRef(
           1e3
         );
       } else {
-        newCamera = new THREE9.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
+        newCamera = new THREE10.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
       }
       newCamera.position.copy(initialPosition.current);
       newCamera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
@@ -1445,8 +1833,8 @@ var Camera3D = forwardRef(
         }
       },
       getViewBounds: () => {
-        const min = new THREE9.Vector3(-10, -10, -10);
-        const max = new THREE9.Vector3(10, 10, 10);
+        const min = new THREE10.Vector3(-10, -10, -10);
+        const max = new THREE10.Vector3(10, 10, 10);
         return { min, max };
       }
     }));
@@ -1488,7 +1876,7 @@ var AssetLoader = class {
     __publicField(this, "textureCache");
     __publicField(this, "loadingPromises");
     this.objLoader = new OBJLoader();
-    this.textureLoader = new THREE9.TextureLoader();
+    this.textureLoader = new THREE10.TextureLoader();
     this.modelCache = /* @__PURE__ */ new Map();
     this.textureCache = /* @__PURE__ */ new Map();
     this.loadingPromises = /* @__PURE__ */ new Map();
@@ -1562,7 +1950,7 @@ var AssetLoader = class {
       return this.loadingPromises.get(`texture:${url}`);
     }
     const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE9.SRGBColorSpace;
+      texture.colorSpace = THREE10.SRGBColorSpace;
       this.textureCache.set(url, texture);
       this.loadingPromises.delete(`texture:${url}`);
       return texture;
@@ -1636,7 +2024,7 @@ var AssetLoader = class {
     });
     this.modelCache.forEach((model) => {
       model.scene.traverse((child) => {
-        if (child instanceof THREE9.Mesh) {
+        if (child instanceof THREE10.Mesh) {
           child.geometry.dispose();
           if (Array.isArray(child.material)) {
             child.material.forEach((m) => m.dispose());
@@ -1673,7 +2061,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);
@@ -1686,21 +2074,21 @@ function useThree4(options = {}) {
   const [isReady, setIsReady] = useState(false);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const initialCameraPosition = useMemo(
-    () => new THREE9.Vector3(...opts.cameraPosition),
+    () => new THREE10.Vector3(...opts.cameraPosition),
     []
   );
   useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
-    const scene = new THREE9.Scene();
-    scene.background = new THREE9.Color(opts.backgroundColor);
+    const scene = new THREE10.Scene();
+    scene.background = new THREE10.Color(opts.backgroundColor);
     sceneRef.current = scene;
     let camera;
     const aspect = clientWidth / clientHeight;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      camera = new THREE9.OrthographicCamera(
+      camera = new THREE10.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -1709,11 +2097,11 @@ function useThree4(options = {}) {
         1e3
       );
     } else {
-      camera = new THREE9.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      camera = new THREE10.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     camera.position.copy(initialCameraPosition);
     cameraRef.current = camera;
-    const renderer = new THREE9.WebGLRenderer({
+    const renderer = new THREE10.WebGLRenderer({
       antialias: true,
       alpha: true,
       canvas: canvasRef.current || void 0
@@ -1721,7 +2109,7 @@ function useThree4(options = {}) {
     renderer.setSize(clientWidth, clientHeight);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.shadowMap.enabled = opts.shadows;
-    renderer.shadowMap.type = THREE9.PCFSoftShadowMap;
+    renderer.shadowMap.type = THREE10.PCFSoftShadowMap;
     rendererRef.current = renderer;
     const controls = new OrbitControls$1(camera, renderer.domElement);
     controls.enableDamping = true;
@@ -1730,16 +2118,16 @@ function useThree4(options = {}) {
     controls.maxDistance = 100;
     controls.maxPolarAngle = Math.PI / 2 - 0.1;
     controlsRef.current = controls;
-    const ambientLight = new THREE9.AmbientLight(16777215, 0.6);
+    const ambientLight = new THREE10.AmbientLight(16777215, 0.6);
     scene.add(ambientLight);
-    const directionalLight = new THREE9.DirectionalLight(16777215, 0.8);
+    const directionalLight = new THREE10.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 THREE9.GridHelper(
+      const gridHelper = new THREE10.GridHelper(
         opts.gridSize,
         opts.gridSize,
         4473924,
@@ -1757,10 +2145,10 @@ function useThree4(options = {}) {
     const handleResize = () => {
       const { clientWidth: width, clientHeight: height } = container;
       setDimensions({ width, height });
-      if (camera instanceof THREE9.PerspectiveCamera) {
+      if (camera instanceof THREE10.PerspectiveCamera) {
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
-      } else if (camera instanceof THREE9.OrthographicCamera) {
+      } else if (camera instanceof THREE10.OrthographicCamera) {
         const aspect2 = width / height;
         const size = 10;
         camera.left = -size * aspect2;
@@ -1791,7 +2179,7 @@ function useThree4(options = {}) {
     let newCamera;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      newCamera = new THREE9.OrthographicCamera(
+      newCamera = new THREE10.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -1800,7 +2188,7 @@ function useThree4(options = {}) {
         1e3
       );
     } else {
-      newCamera = new THREE9.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      newCamera = new THREE10.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     newCamera.position.copy(currentPos);
     cameraRef.current = newCamera;
@@ -2130,8 +2518,8 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = useRef(new THREE9.Raycaster());
-  const mouse = useRef(new THREE9.Vector2());
+  const raycaster = useRef(new THREE10.Raycaster());
+  const mouse = useRef(new THREE10.Vector2());
   const clientToNDC = useCallback(
     (clientX, clientY) => {
       if (!canvas) {
@@ -2201,8 +2589,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 THREE9.Plane(new THREE9.Vector3(0, 1, 0), 0);
-      const target = new THREE9.Vector3();
+      const plane = new THREE10.Plane(new THREE10.Vector3(0, 1, 0), 0);
+      const target = new THREE10.Vector3();
       const intersection = raycaster.current.ray.intersectPlane(plane, target);
       if (intersection) {
         const gridX = Math.round((target.x - offsetX) / cellSize);
@@ -2240,7 +2628,7 @@ function useRaycaster(options) {
         return {
           gridX: gridCoords.x,
           gridZ: gridCoords.z,
-          worldPosition: new THREE9.Vector3(
+          worldPosition: new THREE10.Vector3(
             gridCoords.x * cellSize + offsetX,
             0,
             gridCoords.z * cellSize + offsetZ
@@ -2270,7 +2658,7 @@ var DEFAULT_CONFIG = {
 };
 function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
   const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE9.Vector3(
+  return new THREE10.Vector3(
     gridX * opts.cellSize + opts.offsetX,
     opts.elevation,
     gridZ * opts.cellSize + opts.offsetZ
@@ -2284,17 +2672,17 @@ function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
   };
 }
 function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE9.Raycaster();
-  const mouse = new THREE9.Vector2(mouseX, mouseY);
+  const raycaster = new THREE10.Raycaster();
+  const mouse = new THREE10.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE9.Plane(new THREE9.Vector3(0, 1, 0), -planeY);
-  const target = new THREE9.Vector3();
+  const plane = new THREE10.Plane(new THREE10.Vector3(0, 1, 0), -planeY);
+  const target = new THREE10.Vector3();
   const intersection = raycaster.ray.intersectPlane(plane, target);
   return intersection ? target : null;
 }
 function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE9.Raycaster();
-  const mouse = new THREE9.Vector2(mouseX, mouseY);
+  const raycaster = new THREE10.Raycaster();
+  const mouse = new THREE10.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
   const intersects = raycaster.intersectObjects(objects, true);
   return intersects.length > 0 ? intersects[0] : null;
@@ -2346,14 +2734,14 @@ function getCellsInRadius(centerX, centerZ, radius) {
   return cells;
 }
 function createGridHighlight(color = 16776960, opacity = 0.3) {
-  const geometry = new THREE9.PlaneGeometry(0.95, 0.95);
-  const material = new THREE9.MeshBasicMaterial({
+  const geometry = new THREE10.PlaneGeometry(0.95, 0.95);
+  const material = new THREE10.MeshBasicMaterial({
     color,
     transparent: true,
     opacity,
-    side: THREE9.DoubleSide
+    side: THREE10.DoubleSide
   });
-  const mesh = new THREE9.Mesh(geometry, material);
+  const mesh = new THREE10.Mesh(geometry, material);
   mesh.rotation.x = -Math.PI / 2;
   mesh.position.y = 0.01;
   return mesh;
@@ -2366,31 +2754,31 @@ function normalizeMouseCoordinates(clientX, clientY, element) {
   };
 }
 function isInFrustum(position, camera, padding = 0) {
-  const frustum = new THREE9.Frustum();
-  const projScreenMatrix = new THREE9.Matrix4();
+  const frustum = new THREE10.Frustum();
+  const projScreenMatrix = new THREE10.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
-  const sphere = new THREE9.Sphere(position, padding);
+  const sphere = new THREE10.Sphere(position, padding);
   return frustum.intersectsSphere(sphere);
 }
 function filterByFrustum(positions, camera, padding = 0) {
-  const frustum = new THREE9.Frustum();
-  const projScreenMatrix = new THREE9.Matrix4();
+  const frustum = new THREE10.Frustum();
+  const projScreenMatrix = new THREE10.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   return positions.filter((position) => {
-    const sphere = new THREE9.Sphere(position, padding);
+    const sphere = new THREE10.Sphere(position, padding);
     return frustum.intersectsSphere(sphere);
   });
 }
 function getVisibleIndices(positions, camera, padding = 0) {
-  const frustum = new THREE9.Frustum();
-  const projScreenMatrix = new THREE9.Matrix4();
+  const frustum = new THREE10.Frustum();
+  const projScreenMatrix = new THREE10.Matrix4();
   const visible = /* @__PURE__ */ new Set();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   positions.forEach((position, index) => {
-    const sphere = new THREE9.Sphere(position, padding);
+    const sphere = new THREE10.Sphere(position, padding);
     if (frustum.intersectsSphere(sphere)) {
       visible.add(index);
     }
@@ -2414,7 +2802,7 @@ function updateInstanceLOD(instancedMesh, positions, camera, lodDistances) {
   return lodIndices;
 }
 function cullInstancedMesh(instancedMesh, positions, visibleIndices) {
-  const dummy = new THREE9.Object3D();
+  const dummy = new THREE10.Object3D();
   let visibleCount = 0;
   positions.forEach((position, index) => {
     if (visibleIndices.has(index)) {
@@ -5197,12 +5585,12 @@ function useAvl3DConfig() {
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = useThree();
-  const targetPosVec = useRef(new THREE9.Vector3(...targetPosition));
-  const targetLookVec = useRef(new THREE9.Vector3(...targetLookAt));
+  const targetPosVec = useRef(new THREE10.Vector3(...targetPosition));
+  const targetLookVec = useRef(new THREE10.Vector3(...targetLookAt));
   const isAnimating = useRef(false);
   useEffect(() => {
-    const newTarget = new THREE9.Vector3(...targetPosition);
-    const newLookAt = new THREE9.Vector3(...targetLookAt);
+    const newTarget = new THREE10.Vector3(...targetPosition);
+    const newLookAt = new THREE10.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
       targetPosVec.current.copy(newTarget);
       targetLookVec.current.copy(newLookAt);
@@ -5217,9 +5605,9 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   useFrame((_, delta) => {
     if (!isAnimating.current) return;
     const speed = 3;
-    camera.position.x = THREE9.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
-    camera.position.y = THREE9.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
-    camera.position.z = THREE9.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    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.lookAt(targetLookVec.current);
     const dist = camera.position.distanceTo(targetPosVec.current);
     if (dist < 0.05) {
@@ -5234,7 +5622,7 @@ function SceneFade({ animating, children }) {
   useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
-    opacityRef.current = THREE9.MathUtils.damp(opacityRef.current, target, 5, delta);
+    opacityRef.current = THREE10.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);
@@ -5487,4 +5875,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 };