@almadar/ui 5.141.0 → 5.142.0

package/dist/lib/drawable/three/index.d.ts

@@ -1,179 +1,12 @@
+import { C as CanvasPointLightConfig, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-DAs12kxP.js';
+export { d as Canvas3DHost, e as Canvas3DHostHandle, f as Canvas3DHostProps, d as GameCanvas3D, U as UnitAnimationState } from '../../../avl-schema-parser-DAs12kxP.js';
 import * as React$1 from 'react';
 import React__default, { Component, ReactNode, ErrorInfo } from 'react';
-import { ScenePos, EventEmit, JsonObject, OrbitalSchema } from '@almadar/core';
 import * as THREE from 'three';
 import { QuadraticBezierCurve3 } from 'three';
-import { D as DrawableNode } from '../../../paintDispatch-BQn5Lyx1.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import { I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-B8Onmfsu.js';
-export { U as UnitAnimationState } from '../../../avl-schema-parser-B8Onmfsu.js';
-
-/**
- * Canvas3DHost — the thin 3D draw-host: the `canvas` host's 3D painter backend
- * (the R3F "vessel" behind the neutral drawables), the exact 3D analogue of the
- * 2D `Painter2D` seam. Reached only via the lazy `@almadar/ui/.../game/three`
- * subpath so three.js never enters a 2D bundle.
- *
- * The 3D twin of Canvas2D: the board authors a `drawables` list (the neutral
- * `draw-*` children) and this host maps each descriptor through `Drawable3D` to a
- * three.js mesh (a raw descriptor NEVER reaches `<group>{children}` — R3F throws).
- * It owns NO game data — tiles, units, features, selection, health bars and labels
- * are all `draw-*` children composed in `.lolo`, not props here. Only view state
- * (camera, error boundary) is local.
- *
- * Camera: `isometric`/`perspective`/`top-down` frame the scene bounds (derived from
- * the drawn descriptors); `follow`/`chase` track the neutral core `Camera.target`
- * (forwarded as `followTarget`), falling back to the scene centre.
- *
- * Interaction: keyboard maps to semantic events (device-agnostic input). Pointer
- * click/hover on neutral drawables needs a per-entity id + a scene-space raycast
- * the descriptors don't yet carry — that hit-test is a tracked fork
- * (docs/Almadar_Std_Game_V2_PLAN.md); the click/hover event props are accepted but
- * not yet emitted from a raycast.
- *
- * @packageDocumentation
- */
-
-/** Camera mode for 3D view.
- *  - `follow` tracks `followTarget` (the neutral `Camera.target`) from a fixed offset.
- *  - `chase` sits behind + above the target. */
-type CameraMode$2 = 'isometric' | 'perspective' | 'top-down' | 'follow' | 'chase';
-/** Map orientation */
-type MapOrientation = 'standard' | 'rotated';
-/** Overlay control */
-type OverlayControl = 'default' | 'hidden' | 'minimap';
-/** Props for GameCanvas3D component */
-interface Canvas3DHostProps {
-    /** Additional CSS classes */
-    className?: string;
-    /** Children to render inside the 3D canvas (e.g., physics objects, custom meshes) */
-    children?: React__default.ReactNode;
-    /** Neutral drawable descriptors — the same `children` vocabulary as Canvas2D. The
-     *  host maps each through `Drawable3D` to a mesh. */
-    drawables?: DrawableNode[];
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Error state */
-    error?: string | null;
-    /** Fog of war data (accepted for API parity; presentation-only). */
-    fogOfWar?: boolean[][];
-    /** Map orientation (data attribute). */
-    orientation?: MapOrientation;
-    /** Camera mode */
-    cameraMode?: CameraMode$2;
-    /** Follow-camera target in scene space (the neutral core `Camera.target`). */
-    followTarget?: ScenePos;
-    /** Show grid */
-    showGrid?: boolean;
-    /** Show coordinates overlay (accepted for API parity). */
-    showCoordinates?: boolean;
-    /** Show tile information (accepted for API parity). */
-    showTileInfo?: boolean;
-    /** Overlay control mode (data attribute). */
-    overlay?: OverlayControl;
-    /** Enable shadows */
-    shadows?: boolean;
-    /** Background color */
-    backgroundColor?: string;
-    /** Declarative event: tile click. Emitted from a ground-plane raycast → scene cell
-     *  `{ x, z }` (the FSM validates the cell). `tileId` is optional — the neutral host
-     *  has no per-tile id, and the board FSMs key off the coordinate. */
-    tileClickEvent?: EventEmit<{
-        x: number;
-        z: number;
-        tileId?: string;
-        type?: string;
-        terrain?: string;
-        elevation?: number;
-    }>;
-    /** Declarative event: unit click. Emitted `{ unitId, x, z }` when the raycast lands on a
-     *  cell whose descriptor carries an `id` (a tagged unit sprite). */
-    unitClickEvent?: EventEmit<{
-        unitId: string;
-        x: number;
-        z: number;
-        unitType?: string;
-        name?: string;
-        team?: string;
-        faction?: string;
-        health?: number;
-        maxHealth?: number;
-    }>;
-    /** Declarative event: feature click. Accepted; not yet emitted (see `tileClickEvent`). */
-    featureClickEvent?: EventEmit<{
-        featureId: string;
-        x: number;
-        z: number;
-        type?: string;
-        elevation?: number;
-    }>;
-    /** Declarative event: canvas (background) click. */
-    canvasClickEvent?: EventEmit<{
-        clientX: number;
-        clientY: number;
-        button: number;
-    }>;
-    /** Declarative event: tile hover. Accepted; not yet emitted (see `tileClickEvent`). */
-    tileHoverEvent?: EventEmit<{
-        tileId: string;
-        x: number;
-        z: number;
-        type?: string;
-    }>;
-    /** Declarative event: tile leave. */
-    tileLeaveEvent?: EventEmit<Record<string, never>>;
-    /** Declarative event: unit animation. */
-    unitAnimationEvent?: EventEmit<{
-        unitId: string;
-        state: string;
-        timestamp: number;
-    }>;
-    /** Declarative event: camera change. */
-    cameraChangeEvent?: EventEmit<{
-        position: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        timestamp: number;
-    }>;
-    /** Loading message */
-    loadingMessage?: string;
-    /** Unit draw-size multiplier (accepted for API parity; sizing is drawable-authored). */
-    unitScale?: number;
-    /** Board zoom (accepted for API parity; 3D zoom is camera-driven, not group-scaled). */
-    scale?: number;
-    /** Maps a keydown `e.code` → the board's SEMANTIC event (device-agnostic input). */
-    keyMap?: Record<string, string>;
-    /** Maps a keyup `e.code` → the board's SEMANTIC event. */
-    keyUpMap?: Record<string, string>;
-    /** Side-view world size in pixels (accepted for API parity). */
-    worldWidth?: number;
-    /** Side-view world size in pixels (accepted for API parity). */
-    worldHeight?: number;
-    /** Pixel→world-unit divisor for pixel-authored (side-view) scenes: world size =
-     *  scene size ÷ `pixelsPerUnit`. Omitted → 1 world unit per scene unit (grid boards). */
-    pixelsPerUnit?: number;
-    /** Perspective field of view in degrees — the neutral `Camera.fov`. Default 45. */
-    fov?: number;
-}
-/** Imperative handle for GameCanvas3D */
-interface Canvas3DHostHandle {
-    /** Get current camera position */
-    getCameraPosition: () => THREE.Vector3 | null;
-    /** Set camera position */
-    setCameraPosition: (x: number, y: number, z: number) => void;
-    /** Look at a specific point */
-    lookAt: (x: number, y: number, z: number) => void;
-    /** Reset camera to default position */
-    resetCamera: () => void;
-    /** Take a screenshot */
-    screenshot: () => string | null;
-}
-/**
- * Canvas3DHost — thin 3D draw-host. Walks `drawables` through `Drawable3D`.
- */
-declare const Canvas3DHost: React__default.ForwardRefExoticComponent<Canvas3DHostProps & React__default.RefAttributes<Canvas3DHostHandle>>;
+import { JsonObject, EventEmit, OrbitalSchema } from '@almadar/core';
+import '../../../paintDispatch-BQn5Lyx1.js';
 
 /**
  * Scene3D
@@ -291,6 +124,14 @@ interface Lighting3DProps {
     directionalColor?: string;
     /** Directional light position */
     directionalPosition?: [number, number, number];
+    /** Hemisphere (sky/ground) light intensity */
+    hemisphereIntensity?: number;
+    /** Hemisphere sky color */
+    hemisphereColor?: string;
+    /** Hemisphere ground color */
+    hemisphereGroundColor?: string;
+    /** Additional point lights, authored as data */
+    points?: CanvasPointLightConfig[];
     /** Enable shadows */
     shadows?: boolean;
     /** Shadow map size */
@@ -324,7 +165,7 @@ interface Lighting3DProps {
  * </Canvas>
  * ```
  */
-declare function Lighting3D({ ambientIntensity, ambientColor, directionalIntensity, directionalColor, directionalPosition, shadows, shadowMapSize, shadowCameraSize, shadowBias, shadowNormalBias, shadowCameraNear, shadowCameraFar, showHelpers, }: Lighting3DProps): React__default.JSX.Element;
+declare function Lighting3D({ ambientIntensity, ambientColor, directionalIntensity, directionalColor, directionalPosition, hemisphereIntensity, hemisphereColor, hemisphereGroundColor, points, shadows, shadowMapSize, shadowCameraSize, shadowBias, shadowNormalBias, shadowCameraNear, shadowCameraFar, showHelpers, }: Lighting3DProps): React__default.JSX.Element;
 
 /**
  * Canvas3DLoadingState
@@ -1485,4 +1326,4 @@ declare const CAMERA_POSITIONS: {
     };
 };
 
-export { AVL_3D_COLORS, AssetLoader, type AssetLoadingState, Avl3DApplicationScene, type Avl3DApplicationSceneProps, type Avl3DConfig, Avl3DContext, Avl3DEffects, type Avl3DEffectsProps, type Avl3DModelOverrides, Avl3DOrbitalScene, type Avl3DOrbitalSceneProps, Avl3DTraitScene, type Avl3DTraitSceneProps, Avl3DTransitionScene, type Avl3DTransitionSceneProps, Avl3DViewer, type Avl3DViewerProps, CAMERA_POSITIONS, Camera3D, type Camera3DHandle, type Camera3DProps, type CameraMode$1 as CameraMode, Canvas3DErrorBoundary, type Canvas3DErrorBoundaryProps, type Canvas3DErrorBoundaryState, Canvas3DHost, type Canvas3DHostHandle, type Canvas3DHostProps, Canvas3DLoadingState, type Canvas3DLoadingStateProps, type CullingOptions, Canvas3DHost as GameCanvas3D, type GameCanvas3DEventConfig, type Grid3DConfig, type GridCoordinate, type GridHit, type LODConfig, type LODLevel, Lighting3D, type Lighting3DProps, type LoadedModel, ModelLoader, type ModelLoaderProps, type NodeType, type Position3D, type RaycastHit, Scene3D, type Scene3DProps, type SceneGraphNode, SpatialHashGrid, type UseAssetLoaderOptions, type UseAssetLoaderReturn, type UseGameCanvas3DEventsOptions, type UseGameCanvas3DEventsReturn, type UseRaycasterOptions, type UseRaycasterReturn, type UseSceneGraphReturn, type UseThreeOptions, type UseThreeReturn, 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, useThree, worldToGrid };
+export { AVL_3D_COLORS, AssetLoader, type AssetLoadingState, Avl3DApplicationScene, type Avl3DApplicationSceneProps, type Avl3DConfig, Avl3DContext, Avl3DEffects, type Avl3DEffectsProps, type Avl3DModelOverrides, Avl3DOrbitalScene, type Avl3DOrbitalSceneProps, Avl3DTraitScene, type Avl3DTraitSceneProps, Avl3DTransitionScene, type Avl3DTransitionSceneProps, Avl3DViewer, type Avl3DViewerProps, CAMERA_POSITIONS, Camera3D, type Camera3DHandle, type Camera3DProps, type CameraMode$1 as CameraMode, Canvas3DErrorBoundary, type Canvas3DErrorBoundaryProps, type Canvas3DErrorBoundaryState, Canvas3DLoadingState, type Canvas3DLoadingStateProps, type CullingOptions, type GameCanvas3DEventConfig, type Grid3DConfig, type GridCoordinate, type GridHit, type LODConfig, type LODLevel, Lighting3D, type Lighting3DProps, type LoadedModel, ModelLoader, type ModelLoaderProps, type NodeType, type Position3D, type RaycastHit, Scene3D, type Scene3DProps, type SceneGraphNode, SpatialHashGrid, type UseAssetLoaderOptions, type UseAssetLoaderReturn, type UseGameCanvas3DEventsOptions, type UseGameCanvas3DEventsReturn, type UseRaycasterOptions, type UseRaycasterReturn, type UseSceneGraphReturn, type UseThreeOptions, type UseThreeReturn, 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, useThree, worldToGrid };

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 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;
@@ -450,6 +451,10 @@ function Lighting3D({
   directionalIntensity = 0.8,
   directionalColor = "#ffffff",
   directionalPosition = [10, 20, 10],
+  hemisphereIntensity = 0.3,
+  hemisphereColor = "#87ceeb",
+  hemisphereGroundColor = "#362d1d",
+  points,
   shadows = true,
   shadowMapSize = 2048,
   shadowCameraSize = 20,
@@ -482,11 +487,22 @@ 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",
       {
@@ -498,6 +514,36 @@ function Lighting3D({
     ) })
   ] });
 }
+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
 }) {
@@ -540,6 +586,77 @@ function create3DProjector(opts = {}) {
     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();
@@ -941,8 +1058,27 @@ function Sprite3D({ node, projector, groupOpacity = 1 }) {
   return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize, groupOpacity });
 }
 function Shape3D({ node, projector, groupOpacity = 1 }) {
-  if (!isValidScenePos(node.position)) return null;
-  const world = projector.toWorld(node.position);
+  const groupRef = React3.useRef(null);
+  const materialRef = React3.useRef(null);
+  const animated = isAnimatedShape(node);
+  const validPos = isValidScenePos(node.position);
+  const world = validPos ? projector.toWorld(node.position) : [0, 0, 0];
+  useFrame(({ clock }) => {
+    if (!animated || !groupRef.current) return;
+    const view = applyShapeAnimation(node, clock.elapsedTime * 1e3);
+    groupRef.current.position.set(
+      world[0] + (view.offsetX ?? 0) * projector.cellSize,
+      world[1] + 0.02,
+      world[2] + (view.offsetY ?? 0) * projector.cellSize
+    );
+    groupRef.current.rotation.y = -(view.rotate ?? 0);
+    const mat = materialRef.current;
+    if (mat) {
+      mat.opacity = (view.opacity ?? node.opacity ?? 1) * groupOpacity;
+      if (view.fill) mat.color.set(view.fill);
+    }
+  });
+  if (!validPos) return null;
   const color = node.fill ?? node.stroke ?? "#ffffff";
   let geometry;
   switch (node.shape) {
@@ -976,12 +1112,12 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
     default:
       return null;
   }
-  return /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
+  return /* @__PURE__ */ jsx("group", { ref: groupRef, position: [world[0], world[1] + 0.02, world[2]], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
     geometry,
-    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE10.DoubleSide })
-  ] });
+    /* @__PURE__ */ jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: 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(
@@ -993,6 +1129,8 @@ function Text3D({ node, projector }) {
       anchorY: "middle",
       outlineWidth: 0.02,
       outlineColor: "#000000",
+      fillOpacity: groupOpacity,
+      outlineOpacity: groupOpacity,
       children: node.text
     }
   ) });
@@ -1005,8 +1143,8 @@ function clampSegments(segments) {
 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 = [
+var lerp2 = (a, b, k) => a + (b - a) * k;
+var NUMERIC_TRACKS2 = [
   "offsetX",
   "offsetY",
   "offsetZ",
@@ -1038,11 +1176,11 @@ function applyMeshAnimation(node, timeMs) {
     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);
+    if (typeof a === "number" && typeof b === "number") return lerp2(a, b, k);
     return a;
   };
   const num = {};
-  for (const key of NUMERIC_TRACKS) {
+  for (const key of NUMERIC_TRACKS2) {
     const v = trackValue(key);
     if (v !== void 0) num[key] = v;
   }
@@ -1216,7 +1354,7 @@ function Drawable3D({ node, projector, groupOpacity = 1 }) {
     case "draw-shape":
       return /* @__PURE__ */ jsx(Shape3D, { node, projector, groupOpacity });
     case "draw-text":
-      return /* @__PURE__ */ jsx(Text3D, { node, projector });
+      return /* @__PURE__ */ jsx(Text3D, { node, projector, groupOpacity });
     case "draw-mesh":
       return /* @__PURE__ */ jsx(Mesh3D, { node, projector, groupOpacity });
     case "draw-sprite-layer":
@@ -1224,7 +1362,7 @@ function Drawable3D({ node, projector, groupOpacity = 1 }) {
     case "draw-shape-layer":
       return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector, groupOpacity }, i)) });
     case "draw-text-layer":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector }, i)) });
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector, groupOpacity }, i)) });
     case "draw-group": {
       if (!isValidScenePos(node.position) || !Array.isArray(node.items)) return null;
       if (node.clip) warnUnsupported3d("draw-group:clip");
@@ -1248,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",
@@ -1273,6 +1425,8 @@ var Canvas3DHost = forwardRef(
     keyUpMap,
     pixelsPerUnit,
     fov,
+    lighting,
+    post,
     children,
     drawables
   }, ref) => {
@@ -1281,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) => {
@@ -1314,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(() => {
@@ -1496,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,
                     {
@@ -1521,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",
                     {
@@ -1546,7 +1711,7 @@ var Canvas3DHost = forwardRef(
                       ]
                     }
                   ),
-                  children,
+                  post && (post.bloom || post.vignette) ? /* @__PURE__ */ jsx(Effects3D, { post }) : null,
                   /* @__PURE__ */ jsx(
                     OrbitControls,
                     {
@@ -1896,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);
@@ -5710,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 };