@almadar/ui 5.104.0 → 5.105.0

package/dist/avl/index.cjs

@@ -11249,7 +11249,7 @@ function screenToIso(screenX, screenY, scale, baseOffsetX, layout = "isometric")
   const tileY = (screenY / (scaledFloorHeight / 2) - adjustedX / (scaledTileWidth / 2)) / 2;
   return { x: Math.round(tileX), y: Math.round(tileY) };
 }
-var TILE_WIDTH, TILE_HEIGHT, FLOOR_HEIGHT, DIAMOND_TOP_Y, FEATURE_COLORS;
+var TILE_WIDTH, TILE_HEIGHT, FLOOR_HEIGHT, DIAMOND_TOP_Y, FEATURE_COLORS, TERRAIN_COLORS, TEAM_COLORS, TEAM_SHADOW_COLORS, HIGHLIGHT_COLORS, SELECTION_RING_COLOR, GRID_STROKE_COLOR, BACKGROUND_FALLBACK_COLOR, MINIMAP_TERRAIN_COLORS, MINIMAP_UNIT_COLORS, UNIT_LABEL_BG_COLORS, SIDE_PLATFORM_COLORS, SIDE_PLAYER_COLOR, SIDE_PLAYER_EYE_COLOR, SIDE_SKY_GRADIENT_TOP, SIDE_SKY_GRADIENT_BOTTOM, SIDE_GRID_COLOR, SIDE_FX_COLOR, SIDE_PLATFORM_BEVEL_COLOR, SIDE_PLATFORM_SHADOW_COLOR, SIDE_HAZARD_STRIPE_COLOR, SIDE_GOAL_GLOW_COLOR, DEFAULT_BG_COLOR;
 var init_isometric = __esm({
   "components/game/shared/isometric.ts"() {
     TILE_WIDTH = 256;
@@ -11266,14 +11266,79 @@ var init_isometric = __esm({
       mountain: "#78716c",
       default: "#9ca3af"
     };
+    TERRAIN_COLORS = {
+      water: "#3b82f6",
+      mountain: "#78716c",
+      stone: "#9ca3af",
+      default: "#4ade80"
+    };
+    TEAM_COLORS = {
+      player: "#3b82f6",
+      enemy: "#ef4444",
+      neutral: "#6b7280",
+      default: "#6b7280"
+    };
+    TEAM_SHADOW_COLORS = {
+      player: "rgba(0,150,255,0.6)",
+      default: "rgba(255,50,50,0.6)"
+    };
+    HIGHLIGHT_COLORS = {
+      hover: "rgba(255,255,255,0.15)",
+      validMove: "rgba(74,222,128,0.25)",
+      attack: "rgba(239,68,68,0.35)"
+    };
+    SELECTION_RING_COLOR = "rgba(0,200,255,0.8)";
+    GRID_STROKE_COLOR = "rgba(0,0,0,0.2)";
+    BACKGROUND_FALLBACK_COLOR = "#1a1a2e";
+    MINIMAP_TERRAIN_COLORS = {
+      water: "#3b82f6",
+      mountain: "#78716c",
+      default: "#4ade80"
+    };
+    MINIMAP_UNIT_COLORS = {
+      player: "#60a5fa",
+      enemy: "#f87171",
+      neutral: "#9ca3af",
+      default: "#9ca3af"
+    };
+    UNIT_LABEL_BG_COLORS = {
+      player: "rgba(59,130,246,0.9)",
+      enemy: "rgba(239,68,68,0.9)",
+      neutral: "rgba(107,114,128,0.9)",
+      default: "rgba(107,114,128,0.9)"
+    };
+    SIDE_PLATFORM_COLORS = {
+      ground: "#4a7c59",
+      platform: "#7c6b4a",
+      hazard: "#c0392b",
+      goal: "#f1c40f"
+    };
+    SIDE_PLAYER_COLOR = "#3498db";
+    SIDE_PLAYER_EYE_COLOR = "#ffffff";
+    SIDE_SKY_GRADIENT_TOP = "#1a1a2e";
+    SIDE_SKY_GRADIENT_BOTTOM = "#16213e";
+    SIDE_GRID_COLOR = "rgba(255, 255, 255, 0.03)";
+    SIDE_FX_COLOR = "#ffe066";
+    SIDE_PLATFORM_BEVEL_COLOR = "rgba(255,255,255,0.15)";
+    SIDE_PLATFORM_SHADOW_COLOR = "rgba(0,0,0,0.3)";
+    SIDE_HAZARD_STRIPE_COLOR = "#e74c3c";
+    SIDE_GOAL_GLOW_COLOR = "rgba(241, 196, 15, 0.5)";
+    DEFAULT_BG_COLOR = "#5c94fc";
   }
 });
 
 // components/game/shared/spriteSheetConstants.ts
-var SHEET_COLUMNS;
+var SHEET_COLUMNS, SPRITE_SHEET_LAYOUT;
 var init_spriteSheetConstants = __esm({
   "components/game/shared/spriteSheetConstants.ts"() {
     SHEET_COLUMNS = 8;
+    SPRITE_SHEET_LAYOUT = {
+      idle: { row: 0, frames: 4, frameRate: 6, loop: true },
+      walk: { row: 1, frames: 8, frameRate: 10, loop: true },
+      attack: { row: 2, frames: 6, frameRate: 12, loop: false },
+      hit: { row: 3, frames: 3, frameRate: 8, loop: false },
+      death: { row: 4, frames: 6, frameRate: 8, loop: false }
+    };
   }
 });
 
@@ -14006,7 +14071,7 @@ var init_useUnitSpriteAtlas = __esm({
 function normalizeBackdrop(bg) {
   return typeof bg === "string" ? { url: bg, role: "decoration", category: "background" } : bg;
 }
-function SideView({
+function SideCanvas2D({
   player,
   platforms,
   worldWidth,
@@ -14027,24 +14092,18 @@ function SideView({
   const canvasRef = React105.useRef(null);
   const eventBus = useEventBus();
   const keysRef = React105.useRef(/* @__PURE__ */ new Set());
-  const imageCache2 = React105.useRef(/* @__PURE__ */ new Map());
-  const [loadedImages, setLoadedImages] = React105.useState(/* @__PURE__ */ new Set());
-  const loadImage = React105.useCallback((url) => {
-    if (!url) return null;
-    const cached = imageCache2.current.get(url);
-    if (cached?.complete && cached.naturalWidth > 0) {
-      if (!loadedImages.has(url)) setLoadedImages((prev) => new Set(prev).add(url));
-      return cached;
-    }
-    if (!cached) {
-      const img = new Image();
-      img.crossOrigin = "anonymous";
-      img.src = url;
-      img.onload = () => setLoadedImages((prev) => new Set(prev).add(url));
-      imageCache2.current.set(url, img);
+  const spriteUrls = React105.useMemo(() => {
+    const urls = [];
+    if (backgroundImage?.url) urls.push(backgroundImage.url);
+    if (playerSprite?.url) urls.push(playerSprite.url);
+    if (tileSprites) {
+      for (const asset of Object.values(tileSprites)) {
+        if (asset?.url) urls.push(asset.url);
+      }
     }
-    return null;
-  }, [loadedImages]);
+    return urls;
+  }, [backgroundImage, playerSprite, tileSprites]);
+  const { getImage } = useImageCache(spriteUrls);
   React105.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -14157,7 +14216,7 @@ function SideView({
         camX = Math.max(0, Math.min(px - cw / 2, ww - cw));
         camY = Math.max(0, Math.min(py - ch / 2 - 50, wh - ch));
       }
-      const bgImage = bgImg ? loadImage(bgImg.url) : null;
+      const bgImage = bgImg ? getImage(bgImg.url) : void 0;
       const bgSrc = bgImage ? resolveAssetSource(bgImage, bgImg, NOOP) : null;
       if (bgSrc) {
         blit(ctx, bgSrc, 0, 0, cw, ch);
@@ -14168,12 +14227,12 @@ function SideView({
         ctx.fillRect(0, 0, cw, ch);
       } else {
         const grad = ctx.createLinearGradient(0, 0, 0, ch);
-        grad.addColorStop(0, SKY_GRADIENT_TOP);
-        grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
+        grad.addColorStop(0, SIDE_SKY_GRADIENT_TOP);
+        grad.addColorStop(1, SIDE_SKY_GRADIENT_BOTTOM);
         ctx.fillStyle = grad;
         ctx.fillRect(0, 0, cw, ch);
       }
-      ctx.strokeStyle = GRID_COLOR;
+      ctx.strokeStyle = SIDE_GRID_COLOR;
       ctx.lineWidth = 1;
       const gridSize = 32;
       for (let gx = -camX % gridSize; gx < cw; gx += gridSize) {
@@ -14193,7 +14252,7 @@ function SideView({
         const platY = plat.y - camY;
         const platType = plat.type ?? "ground";
         const spriteAsset = tSprites?.[platType];
-        const tileImg = spriteAsset ? loadImage(spriteAsset.url) : null;
+        const tileImg = spriteAsset ? getImage(spriteAsset.url) : void 0;
         const tileSrc = tileImg ? resolveAssetSource(tileImg, spriteAsset, NOOP) : null;
         if (tileSrc) {
           const originX = tileSrc.rect ? tileSrc.rect.sx : 0;
@@ -14208,15 +14267,15 @@ function SideView({
             ctx.drawImage(tileImg, originX, originY, srcW, tileH, platX + tx, platY, drawW, plat.height);
           }
         } else {
-          const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
+          const color = SIDE_PLATFORM_COLORS[platType] ?? SIDE_PLATFORM_COLORS.ground;
           ctx.fillStyle = color;
           ctx.fillRect(platX, platY, plat.width, plat.height);
-          ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
+          ctx.fillStyle = SIDE_PLATFORM_BEVEL_COLOR;
           ctx.fillRect(platX, platY, plat.width, 3);
-          ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+          ctx.fillStyle = SIDE_PLATFORM_SHADOW_COLOR;
           ctx.fillRect(platX, platY + plat.height - 2, plat.width, 2);
           if (platType === "hazard") {
-            ctx.strokeStyle = "#e74c3c";
+            ctx.strokeStyle = SIDE_HAZARD_STRIPE_COLOR;
             ctx.lineWidth = 2;
             for (let sx = platX; sx < platX + plat.width; sx += 12) {
               ctx.beginPath();
@@ -14226,7 +14285,7 @@ function SideView({
             }
           }
           if (platType === "goal") {
-            ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
+            ctx.fillStyle = SIDE_GOAL_GLOW_COLOR;
             ctx.beginPath();
             ctx.arc(platX + plat.width / 2, platY - 10, 8, 0, Math.PI * 2);
             ctx.fill();
@@ -14238,7 +14297,7 @@ function SideView({
       const ppx = px - camX;
       const ppy = py - camY;
       const facingRight = auth.facingRight ?? true;
-      const playerImg = pSprite ? loadImage(pSprite.url) : null;
+      const playerImg = pSprite ? getImage(pSprite.url) : void 0;
       const playerSrc = playerImg ? resolveAssetSource(playerImg, pSprite, NOOP) : null;
       if (playerSrc) {
         ctx.save();
@@ -14251,7 +14310,7 @@ function SideView({
         }
         ctx.restore();
       } else {
-        ctx.fillStyle = PLAYER_COLOR;
+        ctx.fillStyle = SIDE_PLAYER_COLOR;
         const radius = Math.min(pw, ph) * 0.25;
         ctx.beginPath();
         ctx.moveTo(ppx + radius, ppy);
@@ -14267,7 +14326,7 @@ function SideView({
         const eyeY = ppy + ph * 0.3;
         const eyeSize = 3;
         const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
-        ctx.fillStyle = PLAYER_EYE_COLOR;
+        ctx.fillStyle = SIDE_PLAYER_EYE_COLOR;
         ctx.beginPath();
         ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
         ctx.fill();
@@ -14281,7 +14340,7 @@ function SideView({
         const alpha = Math.min(1, fx.ttl / 4);
         const prev = ctx.globalAlpha;
         ctx.globalAlpha = alpha;
-        ctx.fillStyle = "#ffe066";
+        ctx.fillStyle = SIDE_FX_COLOR;
         ctx.beginPath();
         ctx.arc(fxScreenX, fxScreenY, 12, 0, Math.PI * 2);
         ctx.fill();
@@ -14289,7 +14348,7 @@ function SideView({
       }
     };
     return interp.startLoop(drawFrame);
-  }, [interp.startLoop, loadImage]);
+  }, [interp.startLoop, getImage]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -14301,6 +14360,33 @@ function SideView({
     }
   );
 }
+var NOOP;
+var init_SideCanvas2D = __esm({
+  "components/game/2d/molecules/SideCanvas2D.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_useImageCache();
+    init_atlasSlice();
+    init_useRenderInterpolation();
+    init_verificationRegistry();
+    init_isometric();
+    NOOP = () => {
+    };
+    SideCanvas2D.displayName = "SideCanvas2D";
+  }
+});
+function normalizeBackdrop2(bg) {
+  return typeof bg === "string" ? { url: bg, role: "decoration", category: "background" } : bg;
+}
+function resolveTileFallbackColor(tile) {
+  const override = tile.color;
+  return override ?? TERRAIN_COLORS[tile.terrain ?? ""] ?? TERRAIN_COLORS.default;
+}
+function resolveUnitTeamColor(unit) {
+  const override = unit.tint;
+  return override ?? TEAM_COLORS[unit.team ?? ""] ?? TEAM_COLORS.default;
+}
 function Canvas2D({
   // Closed-circuit
   className,
@@ -14350,13 +14436,13 @@ function Canvas2D({
   // Side-view asset resolution
   playerSprite,
   tileSprites,
-  bgColor = "#5c94fc",
+  bgColor = DEFAULT_BG_COLOR,
   worldWidth = 800,
   worldHeight = 400,
   // Remote asset loading
   assetManifest
 }) {
-  const backgroundImage = normalizeBackdrop(backgroundImageRaw);
+  const backgroundImage = normalizeBackdrop2(backgroundImageRaw);
   const isSide = projection === "side";
   const isFree = projection === "free";
   const flatLike = projection === "hex" || projection === "flat" || isFree;
@@ -14540,7 +14626,7 @@ function Canvas2D({
     return sortedTiles.map((t2) => ({
       x: t2.x,
       y: t2.y,
-      color: t2.terrain === "water" ? "#3b82f6" : t2.terrain === "mountain" ? "#78716c" : "#4ade80"
+      color: MINIMAP_TERRAIN_COLORS[t2.terrain ?? ""] ?? MINIMAP_TERRAIN_COLORS.default
     }));
   }, [showMinimap, sortedTiles]);
   const miniMapUnits = React105.useMemo(() => {
@@ -14548,7 +14634,7 @@ function Canvas2D({
     return units.filter((u) => u.position).map((u) => ({
       x: u.position.x,
       y: u.position.y,
-      color: u.team === "player" ? "#60a5fa" : u.team === "enemy" ? "#f87171" : "#9ca3af",
+      color: MINIMAP_UNIT_COLORS[u.team ?? ""] ?? MINIMAP_UNIT_COLORS.default,
       isPlayer: u.team === "player"
     }));
   }, [showMinimap, units]);
@@ -14585,7 +14671,7 @@ function Canvas2D({
         }
       }
     } else {
-      ctx.fillStyle = "#1a1a2e";
+      ctx.fillStyle = BACKGROUND_FALLBACK_COLOR;
       ctx.fillRect(0, 0, viewportSize.width, viewportSize.height);
     }
     if (sortedTiles.length === 0 && units.length === 0 && features.length === 0) return;
@@ -14615,15 +14701,15 @@ function Canvas2D({
       } else if (img && img.naturalWidth === 0) {
         ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
       } else if (squareGrid) {
-        ctx.fillStyle = tile.terrain === "water" ? "#3b82f6" : tile.terrain === "mountain" ? "#78716c" : tile.terrain === "stone" ? "#9ca3af" : "#4ade80";
+        ctx.fillStyle = resolveTileFallbackColor(tile);
         ctx.fillRect(pos.x, pos.y, scaledTileWidth, scaledTileWidth);
-        ctx.strokeStyle = "rgba(0,0,0,0.2)";
+        ctx.strokeStyle = GRID_STROKE_COLOR;
         ctx.lineWidth = 1;
         ctx.strokeRect(pos.x, pos.y, scaledTileWidth, scaledTileWidth);
       } else {
         const centerX = pos.x + scaledTileWidth / 2;
         const topY = pos.y + scaledDiamondTopY;
-        ctx.fillStyle = tile.terrain === "water" ? "#3b82f6" : tile.terrain === "mountain" ? "#78716c" : tile.terrain === "stone" ? "#9ca3af" : "#4ade80";
+        ctx.fillStyle = resolveTileFallbackColor(tile);
         ctx.beginPath();
         ctx.moveTo(centerX, topY);
         ctx.lineTo(pos.x + scaledTileWidth, topY + scaledFloorHeight / 2);
@@ -14631,7 +14717,7 @@ function Canvas2D({
         ctx.lineTo(pos.x, topY + scaledFloorHeight / 2);
         ctx.closePath();
         ctx.fill();
-        ctx.strokeStyle = "rgba(0,0,0,0.2)";
+        ctx.strokeStyle = GRID_STROKE_COLOR;
         ctx.lineWidth = 1;
         ctx.stroke();
       }
@@ -14652,11 +14738,11 @@ function Canvas2D({
         ctx.fill();
       };
       if (hoveredTile && hoveredTile.x === tile.x && hoveredTile.y === tile.y) {
-        drawHighlight("rgba(255, 255, 255, 0.15)");
+        drawHighlight(HIGHLIGHT_COLORS.hover);
       }
       const tileKey = `${tile.x},${tile.y}`;
-      if (validMoveSet.has(tileKey)) drawHighlight("rgba(74, 222, 128, 0.25)");
-      if (attackTargetSet.has(tileKey)) drawHighlight("rgba(239, 68, 68, 0.35)");
+      if (validMoveSet.has(tileKey)) drawHighlight(HIGHLIGHT_COLORS.validMove);
+      if (attackTargetSet.has(tileKey)) drawHighlight(HIGHLIGHT_COLORS.attack);
       if (debug2) {
         const centerX = pos.x + scaledTileWidth / 2;
         const centerY = squareGrid ? pos.y + scaledTileWidth / 2 : pos.y + scaledFloorHeight / 2 + scaledDiamondTopY;
@@ -14730,9 +14816,9 @@ function Canvas2D({
       const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
       const unitIsSheet = unit.spriteSheet?.url !== void 0;
       const unitSrc = img && !unitIsSheet ? resolveAssetSource(img, unitAsset, bumpAtlas) : null;
-      const SHEET_ROWS = 5;
       const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
-      const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
+      const sheetFrameH = img ? img.naturalHeight / LEGACY_SHEET_ROWS : 0;
+      const legacyFrame = frameRect(0, 0, SHEET_COLUMNS, sheetFrameW, sheetFrameH);
       const frameW = unitIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
       const frameH = unitIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
       const ar = unitIsSheet ? sheetFrameW / (sheetFrameH || 1) : unitSrc ? unitSrc.aspect : frameW / (frameH || 1);
@@ -14750,17 +14836,16 @@ function Canvas2D({
         ctx.globalAlpha = 0.25;
         if (img) {
           if (unitIsSheet) {
-            ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
+            ctx.drawImage(img, legacyFrame.sx, legacyFrame.sy, legacyFrame.sw, legacyFrame.sh, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           } else if (unitSrc) {
             blit(ctx, unitSrc, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           } else {
             ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           }
         } else {
-          const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
           ctx.beginPath();
           ctx.arc(ghostCenterX, ghostGroundY - 16 * scale, 20 * scale, 0, Math.PI * 2);
-          ctx.fillStyle = color;
+          ctx.fillStyle = resolveUnitTeamColor(unit);
           ctx.fill();
         }
         ctx.restore();
@@ -14768,7 +14853,7 @@ function Canvas2D({
       if (isSelected) {
         ctx.beginPath();
         ctx.ellipse(centerX, groundY, drawW / 2 + 4 * scale, 12 * scale, 0, 0, Math.PI * 2);
-        ctx.strokeStyle = "rgba(0, 200, 255, 0.8)";
+        ctx.strokeStyle = SELECTION_RING_COLOR;
         ctx.lineWidth = 3;
         ctx.stroke();
       }
@@ -14785,7 +14870,7 @@ function Canvas2D({
         const spriteY = groundY - fDrawH - (frame.applyBreathing ? breatheOffset : 0);
         ctx.save();
         if (unit.team) {
-          ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
+          ctx.shadowColor = TEAM_SHADOW_COLORS[unit.team] ?? TEAM_SHADOW_COLORS.default;
           ctx.shadowBlur = 12 * scale;
         }
         if (frame.flipX) {
@@ -14800,7 +14885,7 @@ function Canvas2D({
         const spriteY = groundY - drawH - breatheOffset;
         const drawUnit = (x) => {
           if (unitIsSheet) {
-            ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
+            ctx.drawImage(img, legacyFrame.sx, legacyFrame.sy, legacyFrame.sw, legacyFrame.sh, x, spriteY, drawW, drawH);
           } else if (unitSrc) {
             blit(ctx, unitSrc, x, spriteY, drawW, drawH);
           } else {
@@ -14809,7 +14894,7 @@ function Canvas2D({
         };
         if (unit.team) {
           ctx.save();
-          ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
+          ctx.shadowColor = TEAM_SHADOW_COLORS[unit.team] ?? TEAM_SHADOW_COLORS.default;
           ctx.shadowBlur = 12 * scale;
           drawUnit(centerX - drawW / 2);
           ctx.restore();
@@ -14817,10 +14902,9 @@ function Canvas2D({
           drawUnit(centerX - drawW / 2);
         }
       } else {
-        const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
         ctx.beginPath();
         ctx.arc(centerX, groundY - 20 * scale - breatheOffset, 20 * scale, 0, Math.PI * 2);
-        ctx.fillStyle = color;
+        ctx.fillStyle = resolveUnitTeamColor(unit);
         ctx.fill();
         ctx.strokeStyle = "rgba(255,255,255,0.8)";
         ctx.lineWidth = 2;
@@ -15059,7 +15143,7 @@ function Canvas2D({
   }
   if (isSide) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref: containerRef, className: cn("relative overflow-hidden w-full h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-      SideView,
+      SideCanvas2D,
       {
         player,
         platforms: platforms && platforms.length ? platforms : DEFAULT_PLATFORMS,
@@ -15157,7 +15241,7 @@ function Canvas2D({
                 {
                   as: "span",
                   className: "text-white text-xs font-bold px-1.5 py-0.5 rounded mb-0.5 whitespace-nowrap block",
-                  style: { background: unit.team === "player" ? "rgba(59,130,246,0.9)" : unit.team === "enemy" ? "rgba(239,68,68,0.9)" : "rgba(107,114,128,0.9)" },
+                  style: { background: UNIT_LABEL_BG_COLORS[unit.team ?? ""] ?? UNIT_LABEL_BG_COLORS.default },
                   children: unit.name
                 }
               ),
@@ -15181,7 +15265,7 @@ function Canvas2D({
     }
   );
 }
-var PLATFORM_COLORS, NOOP, PLAYER_COLOR, PLAYER_EYE_COLOR, SKY_GRADIENT_TOP, SKY_GRADIENT_BOTTOM, GRID_COLOR, DEFAULT_PLATFORMS;
+var LEGACY_SHEET_ROWS, DEFAULT_PLATFORMS;
 var init_Canvas2D = __esm({
   "components/game/2d/molecules/Canvas2D.tsx"() {
     "use client";
@@ -15203,19 +15287,9 @@ var init_Canvas2D = __esm({
     init_verificationRegistry();
     init_isometric();
     init_spriteSheetConstants();
-    PLATFORM_COLORS = {
-      ground: "#4a7c59",
-      platform: "#7c6b4a",
-      hazard: "#c0392b",
-      goal: "#f1c40f"
-    };
-    NOOP = () => {
-    };
-    PLAYER_COLOR = "#3498db";
-    PLAYER_EYE_COLOR = "#ffffff";
-    SKY_GRADIENT_TOP = "#1a1a2e";
-    SKY_GRADIENT_BOTTOM = "#16213e";
-    GRID_COLOR = "rgba(255, 255, 255, 0.03)";
+    init_spriteAnimation();
+    init_SideCanvas2D();
+    LEGACY_SHEET_ROWS = Object.keys(SPRITE_SHEET_LAYOUT).length;
     DEFAULT_PLATFORMS = [
       { x: 0, y: 368, width: 800, height: 32, type: "ground" },
       { x: 150, y: 280, width: 160, height: 16, type: "platform" },
@@ -33301,13 +33375,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect71, useRef: useRef68, useCallback: useCallback104, useState: useState105 } = React105__namespace.default;
+      const { useEffect: useEffect72, useRef: useRef69, useCallback: useCallback105, useState: useState105 } = React105__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef68({ centerLat, centerLng, zoom });
-        useEffect71(() => {
+        const prevRef = useRef69({ centerLat, centerLng, zoom });
+        useEffect72(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -33318,7 +33392,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect71(() => {
+        useEffect72(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -33347,7 +33421,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState105(null);
-        const handleMapClick = useCallback104((lat, lng) => {
+        const handleMapClick = useCallback105((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -33356,7 +33430,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback104((marker) => {
+        const handleMarkerClick = useCallback105((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });