@almadar/ui 5.104.0 → 5.105.0

package/dist/components/index.js

@@ -16315,7 +16315,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;
@@ -16332,12 +16332,70 @@ 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";
   }
 });
 function normalizeBackdrop(bg) {
   return typeof bg === "string" ? { url: bg, role: "decoration", category: "background" } : bg;
 }
-function SideView({
+function SideCanvas2D({
   player,
   platforms,
   worldWidth,
@@ -16358,24 +16416,18 @@ function SideView({
   const canvasRef = useRef(null);
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
-  const imageCache2 = useRef(/* @__PURE__ */ new Map());
-  const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
-  const loadImage = 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 = 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);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -16488,7 +16540,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);
@@ -16499,12 +16551,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) {
@@ -16524,7 +16576,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;
@@ -16539,15 +16591,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();
@@ -16557,7 +16609,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();
@@ -16569,7 +16621,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();
@@ -16582,7 +16634,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);
@@ -16598,7 +16650,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();
@@ -16612,7 +16664,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();
@@ -16620,7 +16672,7 @@ function SideView({
       }
     };
     return interp.startLoop(drawFrame);
-  }, [interp.startLoop, loadImage]);
+  }, [interp.startLoop, getImage]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -16632,6 +16684,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,
@@ -16681,13 +16760,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;
@@ -16871,7 +16950,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 = useMemo(() => {
@@ -16879,7 +16958,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]);
@@ -16916,7 +16995,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;
@@ -16946,15 +17025,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);
@@ -16962,7 +17041,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();
       }
@@ -16983,11 +17062,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;
@@ -17061,9 +17140,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);
@@ -17081,17 +17160,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();
@@ -17099,7 +17177,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();
       }
@@ -17116,7 +17194,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) {
@@ -17131,7 +17209,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 {
@@ -17140,7 +17218,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();
@@ -17148,10 +17226,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;
@@ -17390,7 +17467,7 @@ function Canvas2D({
   }
   if (isSide) {
     return /* @__PURE__ */ jsx(Box, { ref: containerRef, className: cn("relative overflow-hidden w-full h-full", className), children: /* @__PURE__ */ jsx(
-      SideView,
+      SideCanvas2D,
       {
         player,
         platforms: platforms && platforms.length ? platforms : DEFAULT_PLATFORMS,
@@ -17488,7 +17565,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
                 }
               ),
@@ -17512,7 +17589,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";
@@ -17534,19 +17611,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" },
@@ -29354,7 +29421,7 @@ function TerrainPalette({ terrains, selectedTerrain, onSelect, className }) {
     {
       onClick: () => onSelect(terrain),
       className: `w-8 h-8 rounded cursor-pointer border-2 transition-all ${selectedTerrain === terrain ? "border-foreground scale-110 shadow-lg" : "border-muted hover:border-muted-foreground"}`,
-      style: { backgroundColor: TERRAIN_COLORS[terrain] || "var(--color-muted)" },
+      style: { backgroundColor: TERRAIN_COLORS2[terrain] || "var(--color-muted)" },
       title: terrain
     },
     terrain
@@ -29373,7 +29440,7 @@ function EditorToolbar({ mode, onModeChange, className }) {
     m
   )) });
 }
-var TERRAIN_COLORS, FEATURE_TYPES, MODE_LABELS;
+var TERRAIN_COLORS2, FEATURE_TYPES, MODE_LABELS;
 var init_editorUtils = __esm({
   "components/game/shared/lib/editorUtils.tsx"() {
     init_Box();
@@ -29382,7 +29449,7 @@ var init_editorUtils = __esm({
     init_Button();
     init_Badge();
     init_GameIcon();
-    TERRAIN_COLORS = {
+    TERRAIN_COLORS2 = {
       grass: "#4a7c3f",
       dirt: "#8b6c42",
       stone: "#7a7a7a",
@@ -32168,13 +32235,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect70, useRef: useRef66, useCallback: useCallback113, useState: useState108 } = React75__default;
+      const { useEffect: useEffect71, useRef: useRef67, useCallback: useCallback114, useState: useState108 } = React75__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 = useRef66({ centerLat, centerLng, zoom });
-        useEffect70(() => {
+        const prevRef = useRef67({ centerLat, centerLng, zoom });
+        useEffect71(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -32185,7 +32252,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect70(() => {
+        useEffect71(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -32214,7 +32281,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState108(null);
-        const handleMapClick = useCallback113((lat, lng) => {
+        const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -32223,7 +32290,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback113((marker) => {
+        const handleMarkerClick = useCallback114((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -51918,4 +51985,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EMPTY_EFFECT_STATE, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCard, GameHud, GameIcon, GameMenu, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateGraph, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, drawSprite, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSwipeGesture, useTapReveal, useTraitListens, useTranslate127 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EMPTY_EFFECT_STATE, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCard, GameHud, GameIcon, GameMenu, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateGraph, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS2 as TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, drawSprite, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSwipeGesture, useTapReveal, useTraitListens, useTranslate127 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };