@almadar/ui 5.140.0 → 5.141.0

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

@@ -2,7 +2,7 @@ import React3, { forwardRef, useRef, useState, useEffect, useMemo, useImperative
 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 { Grid, OrbitControls, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -165,6 +165,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":
@@ -490,7 +491,7 @@ function Lighting3D({
       "directionalLightHelper",
       {
         args: [
-          new THREE9.DirectionalLight(directionalColor, directionalIntensity),
+          new THREE10.DirectionalLight(directionalColor, directionalIntensity),
           5
         ]
       }
@@ -517,8 +518,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 +530,17 @@ 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]
+  };
+}
+
 // lib/atlasSlice.ts
 var atlasCache = /* @__PURE__ */ new Map();
 function isTilesheet(a) {
@@ -663,12 +675,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 +689,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 +706,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 +797,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 +815,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 +847,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 +868,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 +876,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 +897,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 +910,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 +930,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,9 +938,9 @@ 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 }) {
+function Shape3D({ node, projector, groupOpacity = 1 }) {
   if (!isValidScenePos(node.position)) return null;
   const world = projector.toWorld(node.position);
   const color = node.fill ?? node.stroke ?? "#ffffff";
@@ -948,7 +960,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);
@@ -966,7 +978,7 @@ function Shape3D({ node, projector }) {
   }
   return /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
     geometry,
-    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: node.opacity ?? 1, side: THREE9.DoubleSide })
+    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE10.DoubleSide })
   ] });
 }
 function Text3D({ node, projector }) {
@@ -985,37 +997,246 @@ function Text3D({ node, projector }) {
     }
   ) });
 }
-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 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")
+  };
+}
+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 });
+    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;
+    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",
@@ -1051,6 +1272,7 @@ var Canvas3DHost = forwardRef(
     keyMap,
     keyUpMap,
     pixelsPerUnit,
+    fov,
     children,
     drawables
   }, ref) => {
@@ -1140,7 +1362,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 +1401,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;
@@ -1334,7 +1557,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 +1580,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 +1611,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 +1627,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 +1668,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 +1711,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 +1785,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 +1859,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());
@@ -1686,21 +1909,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 +1932,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 +1944,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 +1953,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 +1980,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 +2014,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 +2023,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 +2353,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 +2424,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 +2463,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 +2493,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 +2507,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 +2569,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 +2589,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 +2637,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 +5420,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 +5440,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 +5457,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);