@almadar/ui 5.96.0 → 5.97.0

package/dist/components/game/3d/index.cjs

@@ -328,6 +328,36 @@ var Canvas3DErrorBoundary = class extends React8.Component {
   }
 };
 var log2 = logger.createLogger("almadar:ui:game:model-loader");
+var gltfCache = /* @__PURE__ */ new Map();
+function loadGltfCached(url, assetRoot) {
+  const key = `${assetRoot}|${url}`;
+  let entry = gltfCache.get(key);
+  if (!entry) {
+    const pending = {
+      promise: new Promise((resolveDone) => {
+        const loader = new GLTFLoader.GLTFLoader();
+        loader.setResourcePath(assetRoot);
+        loader.load(
+          url,
+          (gltf) => {
+            log2.debug("Loaded", { url, clips: gltf.animations.length });
+            pending.gltf = { scene: gltf.scene, animations: gltf.animations };
+            resolveDone();
+          },
+          void 0,
+          (err) => {
+            log2.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
+            pending.error = err instanceof Error ? err : new Error(String(err));
+            resolveDone();
+          }
+        );
+      })
+    };
+    entry = pending;
+    gltfCache.set(key, entry);
+  }
+  return entry;
+}
 function detectAssetRoot(modelUrl) {
   const idx = modelUrl.indexOf("/3d/");
   if (idx !== -1) {
@@ -335,45 +365,30 @@ function detectAssetRoot(modelUrl) {
   }
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
+function stateFromEntry(entry) {
+  if (!entry) return { model: null, clips: [], isLoading: false, error: null };
+  if (entry.gltf) return { model: entry.gltf.scene, clips: entry.gltf.animations, isLoading: false, error: null };
+  return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
+}
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React8.useState({
-    model: null,
-    clips: [],
-    isLoading: false,
-    error: null
-  });
+  const [state, setState] = React8.useState(
+    () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
+  );
   React8.useEffect(() => {
     if (!url) {
       setState({ model: null, clips: [], isLoading: false, error: null });
       return;
     }
-    log2.debug("Loading", { url });
-    setState((prev) => ({ ...prev, isLoading: true, error: null }));
-    const assetRoot = resourceBasePath || detectAssetRoot(url);
-    const loader = new GLTFLoader.GLTFLoader();
-    loader.setResourcePath(assetRoot);
-    loader.load(
-      url,
-      (gltf) => {
-        log2.debug("Loaded", { url, clips: gltf.animations.length });
-        setState({
-          model: gltf.scene,
-          clips: gltf.animations,
-          isLoading: false,
-          error: null
-        });
-      },
-      void 0,
-      (err) => {
-        log2.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
-        setState({
-          model: null,
-          clips: [],
-          isLoading: false,
-          error: err instanceof Error ? err : new Error(String(err))
-        });
-      }
-    );
+    const entry = loadGltfCached(url, resourceBasePath || detectAssetRoot(url));
+    setState(stateFromEntry(entry));
+    if (entry.gltf || entry.error) return;
+    let cancelled = false;
+    void entry.promise.then(() => {
+      if (!cancelled) setState(stateFromEntry(entry));
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [url, resourceBasePath]);
   return state;
 }
@@ -390,21 +405,28 @@ function ModelLoader({
   castShadow = true,
   receiveShadow = true,
   resourceBasePath,
-  animation
+  animation,
+  tint
 }) {
   const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React8.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
+    const tintColor = tint ? new THREE6__namespace.Color(tint) : null;
     cloned.traverse((child) => {
       if (child instanceof THREE6__namespace.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
+        if (tintColor && child.material instanceof THREE6__namespace.MeshStandardMaterial) {
+          const mat = child.material.clone();
+          mat.color.multiply(tintColor);
+          child.material = mat;
+        }
       }
     });
     return cloned;
-  }, [loadedModel, castShadow, receiveShadow]);
+  }, [loadedModel, castShadow, receiveShadow, tint]);
   const mixer = React8.useMemo(() => model ? new THREE6__namespace.AnimationMixer(model) : null, [model]);
   React8.useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
@@ -1781,7 +1803,10 @@ function SideScene({
   ppu,
   playerSprite,
   tileSprites,
-  interpolate
+  interpolate,
+  features = [],
+  events = [],
+  assetManifest
 }) {
   const pw = player.width ?? 32;
   const ph = player.height ?? 48;
@@ -1813,6 +1838,21 @@ function SideScene({
         `plat-${i}`
       );
     }),
+    features.map((feature, i) => {
+      const model = feature.assetUrl ?? assetManifest?.features?.[feature.type];
+      const fx = feature.x / ppu;
+      const fy = (worldHeight - feature.y) / ppu;
+      if (!model?.url) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [fx, fy, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model.url, scale: 0.6, tint: feature.color, fallbackGeometry: "sphere", castShadow: true }) }, feature.id ?? `sfeat-${i}`);
+    }),
+    events.map((ev, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      EventMarker,
+      {
+        event: ev,
+        position: [ev.x / ppu, (worldHeight - (ev.y ?? 0)) / ppu + 0.8, 0.2]
+      },
+      ev.id ?? `sev-${i}`
+    )),
     /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup, { target: playerPos, enabled: interpolate, children: playerSprite?.url ? /* @__PURE__ */ jsxRuntime.jsx("group", { position: [0, playerH / 2, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
       ModelLoader,
       {
@@ -1829,6 +1869,245 @@ function SideScene({
     ] }) })
   ] });
 }
+var UNIT_BASE_MODEL_SCALE = 0.5;
+var UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
+var UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
+var EVENT_COLORS = {
+  hit: "#ff5544",
+  damage: "#ff5544",
+  attack: "#ff8844",
+  heal: "#44dd66",
+  pickup: "#ffcc33",
+  score: "#ffcc33",
+  death: "#aa3333",
+  win: "#66ff88",
+  lose: "#ff6666"
+};
+function EventMarker({
+  event,
+  position
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position, children: /* @__PURE__ */ jsxRuntime.jsx(
+    drei.Text,
+    {
+      fontSize: 0.32,
+      color: EVENT_COLORS[event.type] ?? "#ffffff",
+      outlineWidth: 0.02,
+      outlineColor: "#000000",
+      anchorX: "center",
+      anchorY: "middle",
+      children: event.message ?? event.type
+    }
+  ) });
+}
+function DefaultTile({
+  tile,
+  position,
+  model,
+  isSelected,
+  isHovered,
+  isValidMove,
+  isAttackTarget,
+  onTileClick,
+  onTileHover
+}) {
+  let color = 8421504;
+  if (tile.type === "water") color = 4491468;
+  else if (tile.type === "grass") color = 4500036;
+  else if (tile.type === "sand") color = 14535816;
+  else if (tile.type === "rock") color = 8947848;
+  else if (tile.type === "snow") color = 15658734;
+  let emissive = 0;
+  if (isSelected) emissive = 4473924;
+  else if (isAttackTarget) emissive = 4456448;
+  else if (isValidMove) emissive = 17408;
+  else if (isHovered) emissive = 2236962;
+  if (model?.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "group",
+      {
+        position,
+        onClick: (e) => onTileClick(tile, e),
+        onPointerEnter: (e) => onTileHover(tile, e),
+        onPointerLeave: (e) => onTileHover(null, e),
+        userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ModelLoader,
+          {
+            url: model.url,
+            scale: 0.95,
+            rotation: [0, tile.rotation ?? 0, 0],
+            fallbackGeometry: "box",
+            castShadow: true,
+            receiveShadow: true
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "mesh",
+    {
+      position,
+      onClick: (e) => onTileClick(tile, e),
+      onPointerEnter: (e) => onTileHover(tile, e),
+      onPointerLeave: (e) => onTileHover(null, e),
+      userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
+        /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color, emissive })
+      ]
+    }
+  );
+}
+function DefaultUnit({
+  unit,
+  position,
+  model,
+  isSelected,
+  unitScale,
+  cellSize,
+  resolveUnitFrame,
+  onUnitClick
+}) {
+  const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+  const hasAtlas = unitAtlasUrl(unit) !== null;
+  const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
+  const modelScale = UNIT_BASE_MODEL_SCALE * unitScale * cellSize;
+  const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale * cellSize;
+  const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale * cellSize;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "group",
+    {
+      position,
+      onClick: (e) => onUnitClick(unit, e),
+      userData: { type: "unit", unitId: unit.id },
+      children: [
+        isSelected && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
+          /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
+        ] }),
+        hasAtlas && initialFrame ? (
+          /* Animated sprite-sheet billboard — single cropped frame, by state */
+          /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            UnitSpriteBillboard,
+            {
+              sheetUrl: initialFrame.sheetUrl,
+              resolveFrame: () => resolveUnitFrame(unit.id),
+              height: billboardHeight
+            }
+          ) })
+        ) : model?.url ? (
+          /* GLB unit model — LOLO's `animation` field drives the named clip */
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ModelLoader,
+            {
+              url: model.url,
+              scale: modelScale,
+              animation: unit.animation ?? "idle",
+              fallbackGeometry: "box",
+              castShadow: true
+            }
+          )
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [primitiveRadius, primitiveRadius, primitiveRadius * 0.33, 8] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 2, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [primitiveRadius * 0.67, primitiveRadius * 1.33, 4, 8] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 3, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [primitiveRadius * 0.4, 8, 8] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+          ] })
+        ] }),
+        unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, billboardHeight, 0], children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.25, 0, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5, 0.05] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: 3355443 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "mesh",
+            {
+              position: [
+                -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
+                0,
+                0.01
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "meshBasicMaterial",
+                  {
+                    color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function DefaultFeature({
+  feature,
+  position,
+  model,
+  onFeatureClick
+}) {
+  if (model?.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ModelLoader,
+      {
+        url: model.url,
+        position,
+        scale: 0.5,
+        rotation: [0, feature.rotation ?? 0, 0],
+        tint: feature.color,
+        onClick: () => onFeatureClick(feature, null),
+        fallbackGeometry: "box"
+      }
+    );
+  }
+  if (feature.type === "tree") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "group",
+      {
+        position,
+        onClick: (e) => onFeatureClick(feature, e),
+        userData: { type: "feature", featureId: feature.id },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.4, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 9127187 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 2263842 })
+          ] })
+        ]
+      }
+    );
+  }
+  if (feature.type === "rock") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "mesh",
+      {
+        position: [position[0], position[1] + 0.3, position[2]],
+        onClick: (e) => onFeatureClick(feature, e),
+        userData: { type: "feature", featureId: feature.id },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [0.3, 0] }),
+          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 8421504 })
+        ]
+      }
+    );
+  }
+  return null;
+}
 var GameCanvas3D = React8.forwardRef(
   ({
     tiles = [],
@@ -2115,216 +2394,6 @@ var GameCanvas3D = React8.forwardRef(
       }
       return cameraTarget;
     }, [player, pixelsPerUnit, worldHeight, units, selectedUnitId, gridBounds, gridConfig, cameraTarget]);
-    const DefaultTileRenderer = React8.useCallback(
-      ({ tile, position }) => {
-        const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
-        const isHovered = hoveredTile?.id === tile.id;
-        const isValidMove = validMoves.some(
-          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
-        );
-        const isAttackTarget = attackTargets.some(
-          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
-        );
-        let color = 8421504;
-        if (tile.type === "water") color = 4491468;
-        else if (tile.type === "grass") color = 4500036;
-        else if (tile.type === "sand") color = 14535816;
-        else if (tile.type === "rock") color = 8947848;
-        else if (tile.type === "snow") color = 15658734;
-        let emissive = 0;
-        if (isSelected) emissive = 4473924;
-        else if (isAttackTarget) emissive = 4456448;
-        else if (isValidMove) emissive = 17408;
-        else if (isHovered) emissive = 2236962;
-        const tileModel = tile.modelUrl ?? assetManifest?.terrains?.[tile.terrain ?? tile.type ?? ""];
-        if (tileModel?.url) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "group",
-            {
-              position,
-              onClick: (e) => handleTileClick(tile, e),
-              onPointerEnter: (e) => handleTileHover(tile, e),
-              onPointerLeave: (e) => handleTileHover(null, e),
-              userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ModelLoader,
-                {
-                  url: tileModel.url,
-                  scale: 0.95,
-                  fallbackGeometry: "box",
-                  castShadow: true,
-                  receiveShadow: true
-                }
-              )
-            }
-          );
-        }
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "mesh",
-          {
-            position,
-            onClick: (e) => handleTileClick(tile, e),
-            onPointerEnter: (e) => handleTileHover(tile, e),
-            onPointerLeave: (e) => handleTileHover(null, e),
-            userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
-              /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color, emissive })
-            ]
-          }
-        );
-      },
-      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover, assetManifest]
-    );
-    const UNIT_BASE_MODEL_SCALE = 0.5;
-    const UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
-    const UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
-    const DefaultUnitRenderer = React8.useCallback(
-      ({ unit, position }) => {
-        const isSelected = selectedUnitId === unit.id;
-        const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
-        const hasAtlas = unitAtlasUrl(unit) !== null;
-        const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
-        const unitModel = unit.modelUrl ?? assetManifest?.units?.[unit.unitType ?? ""];
-        const modelScale = UNIT_BASE_MODEL_SCALE * unitScale * gridConfig.cellSize;
-        const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale * gridConfig.cellSize;
-        const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale * gridConfig.cellSize;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "group",
-          {
-            position,
-            onClick: (e) => handleUnitClick(unit, e),
-            userData: { type: "unit", unitId: unit.id },
-            children: [
-              isSelected && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-                /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-                /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-              ] }),
-              hasAtlas && initialFrame ? (
-                /* Animated sprite-sheet billboard — single cropped frame, by state */
-                /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  UnitSpriteBillboard,
-                  {
-                    sheetUrl: initialFrame.sheetUrl,
-                    resolveFrame: () => resolveUnitFrame(unit.id),
-                    height: billboardHeight
-                  }
-                ) })
-              ) : unitModel?.url ? (
-                /* GLB unit model — LOLO's `animation` field drives the named clip */
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ModelLoader,
-                  {
-                    url: unitModel.url,
-                    scale: modelScale,
-                    animation: unit.animation ?? "idle",
-                    fallbackGeometry: "box",
-                    castShadow: true
-                  }
-                )
-              ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [primitiveRadius, primitiveRadius, primitiveRadius * 0.33, 8] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 2, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [primitiveRadius * 0.67, primitiveRadius * 1.33, 4, 8] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 3, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [primitiveRadius * 0.4, 8, 8] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
-                ] })
-              ] }),
-              unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, billboardHeight, 0], children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.25, 0, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5, 0.05] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: 3355443 })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "mesh",
-                  {
-                    position: [
-                      -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
-                      0,
-                      0.01
-                    ],
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "meshBasicMaterial",
-                        {
-                          color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        );
-      },
-      [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale, gridConfig, assetManifest]
-    );
-    const DefaultFeatureRenderer = React8.useCallback(
-      ({
-        feature,
-        position
-      }) => {
-        const featureModel = feature.assetUrl ?? assetManifest?.features?.[feature.type];
-        if (featureModel?.url) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ModelLoader,
-            {
-              url: featureModel.url,
-              position,
-              scale: 0.5,
-              rotation: [0, feature.rotation ?? 0, 0],
-              onClick: () => handleFeatureClick(feature, null),
-              fallbackGeometry: "box"
-            },
-            feature.id
-          );
-        }
-        if (feature.type === "tree") {
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "group",
-            {
-              position,
-              onClick: (e) => handleFeatureClick(feature, e),
-              userData: { type: "feature", featureId: feature.id },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.4, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 9127187 })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 2263842 })
-                ] })
-              ]
-            }
-          );
-        }
-        if (feature.type === "rock") {
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "mesh",
-            {
-              position: [position[0], position[1] + 0.3, position[2]],
-              onClick: (e) => handleFeatureClick(feature, e),
-              userData: { type: "feature", featureId: feature.id },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [0.3, 0] }),
-                /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 8421504 })
-              ]
-            }
-          );
-        }
-        return null;
-      },
-      [handleFeatureClick, assetManifest]
-    );
     if (externalLoading || assetsLoading && preloadAssets.length > 0) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Canvas3DLoadingState,
@@ -2430,7 +2499,10 @@ var GameCanvas3D = React8.forwardRef(
                           ppu: pixelsPerUnit,
                           playerSprite,
                           tileSprites,
-                          interpolate: interpolateUnits
+                          interpolate: interpolateUnits,
+                          features,
+                          events,
+                          assetManifest
                         }
                       )
                     ) : /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
@@ -2440,8 +2512,25 @@ var GameCanvas3D = React8.forwardRef(
                           tile.z ?? tile.y ?? 0,
                           tile.elevation ?? 0
                         );
-                        const Renderer = CustomTileRenderer || DefaultTileRenderer;
-                        return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
+                        const key = tile.id ?? `tile-${index}`;
+                        if (CustomTileRenderer) {
+                          return /* @__PURE__ */ jsxRuntime.jsx(CustomTileRenderer, { tile, position }, key);
+                        }
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          DefaultTile,
+                          {
+                            tile,
+                            position,
+                            model: tile.modelUrl ?? assetManifest?.terrains?.[tile.terrain ?? tile.type ?? ""],
+                            isSelected: tile.id ? selectedTileIds.includes(tile.id) : false,
+                            isHovered: hoveredTile?.id === tile.id,
+                            isValidMove: validMoves.some((m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)),
+                            isAttackTarget: attackTargets.some((m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)),
+                            onTileClick: handleTileClick,
+                            onTileHover: handleTileHover
+                          },
+                          key
+                        );
                       }),
                       features.map((feature, index) => {
                         const position = gridToWorld2(
@@ -2449,8 +2538,20 @@ var GameCanvas3D = React8.forwardRef(
                           feature.z ?? feature.y ?? 0,
                           (feature.elevation ?? 0) + 0.5
                         );
-                        const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
-                        return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
+                        const key = feature.id ?? `feature-${index}`;
+                        if (CustomFeatureRenderer) {
+                          return /* @__PURE__ */ jsxRuntime.jsx(CustomFeatureRenderer, { feature, position }, key);
+                        }
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          DefaultFeature,
+                          {
+                            feature,
+                            position,
+                            model: feature.assetUrl ?? assetManifest?.features?.[feature.type],
+                            onFeatureClick: handleFeatureClick
+                          },
+                          key
+                        );
                       }),
                       units.map((unit) => {
                         const position = gridToWorld2(
@@ -2458,8 +2559,30 @@ var GameCanvas3D = React8.forwardRef(
                           unit.z ?? unit.y ?? unit.position?.y ?? 0,
                           (unit.elevation ?? 0) + 0.5
                         );
-                        const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
-                        return /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup, { target: position, enabled: interpolateUnits, children: /* @__PURE__ */ jsxRuntime.jsx(Renderer, { unit, position: [0, 0, 0] }) }, unit.id);
+                        return /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup, { target: position, enabled: interpolateUnits, children: CustomUnitRenderer ? /* @__PURE__ */ jsxRuntime.jsx(CustomUnitRenderer, { unit, position: [0, 0, 0] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                          DefaultUnit,
+                          {
+                            unit,
+                            position: [0, 0, 0],
+                            model: unit.modelUrl ?? assetManifest?.units?.[unit.unitType ?? ""],
+                            isSelected: selectedUnitId === unit.id,
+                            unitScale,
+                            cellSize: gridConfig.cellSize,
+                            resolveUnitFrame,
+                            onUnitClick: handleUnitClick
+                          }
+                        ) }, unit.id);
+                      }),
+                      events.map((ev, i) => {
+                        const position = gridToWorld2(ev.x, ev.z ?? ev.y ?? 0, 0);
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          EventMarker,
+                          {
+                            event: ev,
+                            position: [position[0], position[1] + 1.4, position[2]]
+                          },
+                          ev.id ?? `ev-${i}`
+                        );
                       })
                     ] }),
                     children,