@almadar/ui 2.6.0 → 2.8.1

package/dist/components/index.js

@@ -2,23 +2,22 @@ import { useAuthContext } from '../chunk-2QM732NQ.js';
 export { ENTITY_EVENTS, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity as useEntityById, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePinchZoom, usePlayer, usePreview, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-2QM732NQ.js';
 import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments } from '../chunk-N6DJVKZ6.js';
 import '../chunk-3HJHHULT.js';
-import { VStack, HStack, Typography, Button, Icon, Box, Card, Avatar, Badge, SearchInput, Checkbox, Menu as Menu$1, Pagination, LoadingState, EmptyState, Modal, ErrorState, QuizBlock, CodeBlock, ScaledDiagram, MarkdownContent, Divider, ProgressBar, Stack, StatBadge, Select, Drawer, Toast, Tabs, Input, ThemeToggle, EntityDisplayEvents, StateIndicator, Container } from '../chunk-LEWQP2UP.js';
-export { Accordion, ActionButtons, Card2 as ActionCard, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, ChartLegend, Checkbox, CodeBlock, ConditionalWrapper, ConfettiEffect, Container, ControlButton, DPad, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GraphView, Grid, HStack, Heading, HealthBar, Icon, InfiniteScrollSentinel, Input, InputGroup, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Modal, NumberStepper, Overlay, PageHeader, Pagination, Popover, ProgressBar, ProgressDots, PullToRefresh, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StateIndicator, StatusDot, SwipeableRow, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Toast, Tooltip, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite } from '../chunk-LEWQP2UP.js';
+import { VStack, HStack, Typography, Button, Icon, Box, Card, Avatar, Badge, SearchInput, Checkbox, Menu as Menu$1, Pagination, LoadingState, EmptyState, Modal, ErrorState, QuizBlock, CodeBlock, ScaledDiagram, MarkdownContent, Divider, ProgressBar, isoToScreen, IsometricCanvas_default, Stack, Select, Drawer, Toast, Tabs, Input, ThemeToggle, TILE_WIDTH, EntityDisplayEvents, StateIndicator, Container } from '../chunk-NES4SBB7.js';
+export { Accordion, ActionButton, ActionButtons, Card2 as ActionCard, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, ChartLegend, Checkbox, ChoiceButton, CodeBlock, CombatLog, ComboCounter, ConditionalWrapper, ConfettiEffect, Container, ControlButton, CraftingRecipe, DIAMOND_TOP_Y, DPad, DamageNumber, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, DialogueBox, DialogueBubble, Divider, Drawer, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FLOOR_HEIGHT, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GraphView, Grid, HStack, Heading, HealthBar, HealthPanel, Icon, InfiniteScrollSentinel, Input, InputGroup, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Meter, MiniMap, Modal, NumberStepper, Overlay, PageHeader, Pagination, PlatformerCanvas, Popover, PowerupSlots, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateIndicator, StatusDot, StatusEffect, SwipeableRow, Switch, TILE_HEIGHT, TILE_WIDTH, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, TimerDisplay, Toast, Tooltip, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UnitCommandBar, UploadDropZone, VStack, ViolationAlert, WaypointMarker, WizardNavigation, WizardProgress, XPBar, drawSprite, isoToScreen, screenToIso, useCamera, useImageCache } from '../chunk-NES4SBB7.js';
 import '../chunk-DKQN5FVU.js';
 import { useTranslate } from '../chunk-WGJIL4YR.js';
 export { EntityDataProvider, I18nProvider, createTranslate, entityDataKeys, parseQueryBinding, useDragReorder, useEntity, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntitySuspense, useInfiniteScroll, useLongPress, usePullToRefresh, useQuerySingleton, useSwipeGesture, useTranslate } from '../chunk-WGJIL4YR.js';
 import { useEventBus, useEventListener } from '../chunk-YXZM3WCF.js';
 export { useEmitEvent, useEventBus, useEventListener } from '../chunk-YXZM3WCF.js';
 export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-3JGAROCW.js';
-import { cn, getNestedValue } from '../chunk-KKCVDUK7.js';
-export { cn } from '../chunk-KKCVDUK7.js';
+import { cn, getNestedValue, bindCanvasCapture } from '../chunk-A5J5CNCU.js';
+export { cn } from '../chunk-A5J5CNCU.js';
 import '../chunk-TSETXL2E.js';
 import '../chunk-K2D5D3WK.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
 import { __publicField } from '../chunk-PKBMQBKP.js';
-import * as React from 'react';
-import React__default, { createContext, useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
-import { ChevronDown, X, Menu, ChevronRight, ChevronLeft, ArrowUp, ArrowDown, MoreVertical, Package, Check, AlertTriangle, Trash2, List as List$1, Printer, CheckCircle, XCircle, Play, RotateCcw, Send, Wrench, Bug, ArrowRight, Pause, SkipForward, Zap, Sword, Move, Heart, Shield, AlertCircle, Circle, Clock, CheckCircle2, Image as Image$1, Upload, ZoomIn, Eraser, FileText, ZoomOut, Download, Code, WrapText, Copy, Settings, Search, Bell, LogOut, Calendar, Pencil, Eye, MoreHorizontal, Minus, Plus } from 'lucide-react';
+import React, { createContext, useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
+import { ChevronDown, X, Menu, ChevronRight, ChevronLeft, ArrowUp, ArrowDown, MoreVertical, Package, Check, AlertTriangle, Trash2, List as List$1, Printer, CheckCircle, XCircle, Play, RotateCcw, Send, Wrench, Bug, ArrowRight, Pause, SkipForward, AlertCircle, Circle, Clock, CheckCircle2, Image as Image$1, Upload, ZoomIn, Eraser, FileText, ZoomOut, Download, Code, WrapText, Copy, Settings, Search, Bell, LogOut, Calendar, Pencil, Eye, MoreHorizontal, Minus, Plus } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { useLocation, Link, Outlet } from 'react-router-dom';
@@ -33,7 +32,7 @@ var FormSection = ({
   columns = 1,
   className
 }) => {
-  const [collapsed, setCollapsed] = React__default.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
   const { t } = useTranslate();
   const eventBus = useEventBus();
   const gridClass = {
@@ -41,7 +40,7 @@ var FormSection = ({
     2: "grid-cols-1 md:grid-cols-2",
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
   }[columns];
-  React__default.useCallback(() => {
+  React.useCallback(() => {
     if (collapsible) {
       setCollapsed((prev) => !prev);
       eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -1013,7 +1012,7 @@ var List = ({
     if (entity && typeof entity === "object" && "id" in entity) return [entity];
     return [];
   }, [entity]);
-  const getItemActions = React__default.useCallback(
+  const getItemActions = React.useCallback(
     (item) => {
       if (!itemActions) return [];
       if (typeof itemActions === "function") {
@@ -1518,7 +1517,7 @@ var WizardContainer = ({
           const isCompleted = index < currentStep;
           const stepKey = step.id ?? step.tabId ?? `step-${index}`;
           const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-          return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -2742,7 +2741,7 @@ var StateMachineView = ({
             style: { top: title ? 30 : 0 },
             children: [
               entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                 StateNode,
                 {
                   state,
@@ -3746,1048 +3745,6 @@ var TabbedContainer = ({
   );
 };
 TabbedContainer.displayName = "TabbedContainer";
-function useImageCache(urls) {
-  const cacheRef = useRef(/* @__PURE__ */ new Map());
-  const loadingRef = useRef(/* @__PURE__ */ new Set());
-  const [pendingCount, setPendingCount] = useState(0);
-  useEffect(() => {
-    const cache = cacheRef.current;
-    const loading = loadingRef.current;
-    let cancelled = false;
-    const newUrls = urls.filter((url) => url && !cache.has(url) && !loading.has(url));
-    if (newUrls.length === 0) return;
-    setPendingCount((prev) => prev + newUrls.length);
-    for (const url of newUrls) {
-      loading.add(url);
-      const img = new Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        if (cancelled) return;
-        cache.set(url, img);
-        loading.delete(url);
-        setPendingCount((prev) => Math.max(0, prev - 1));
-      };
-      img.onerror = () => {
-        if (cancelled) return;
-        loading.delete(url);
-        setPendingCount((prev) => Math.max(0, prev - 1));
-      };
-      img.src = url;
-    }
-    return () => {
-      cancelled = true;
-    };
-  }, [urls.join(",")]);
-  const getImage = useCallback((url) => {
-    return cacheRef.current.get(url);
-  }, []);
-  return {
-    getImage,
-    isLoaded: pendingCount === 0,
-    pendingCount
-  };
-}
-function useCamera() {
-  const cameraRef = useRef({ x: 0, y: 0, zoom: 1 });
-  const targetCameraRef = useRef(null);
-  const isDraggingRef = useRef(false);
-  const dragDistanceRef = useRef(0);
-  const lastMouseRef = useRef({ x: 0, y: 0 });
-  const handleMouseDown = useCallback((e) => {
-    isDraggingRef.current = true;
-    dragDistanceRef.current = 0;
-    lastMouseRef.current = { x: e.clientX, y: e.clientY };
-    if (e.button === 1 || e.button === 2) {
-      e.preventDefault();
-    }
-  }, []);
-  const handleMouseUp = useCallback(() => {
-    isDraggingRef.current = false;
-  }, []);
-  const handleMouseMove = useCallback((e, drawFn) => {
-    if (!isDraggingRef.current) return false;
-    const dx = e.clientX - lastMouseRef.current.x;
-    const dy = e.clientY - lastMouseRef.current.y;
-    dragDistanceRef.current += Math.abs(dx) + Math.abs(dy);
-    cameraRef.current.x -= dx;
-    cameraRef.current.y -= dy;
-    lastMouseRef.current = { x: e.clientX, y: e.clientY };
-    targetCameraRef.current = null;
-    drawFn?.();
-    return dragDistanceRef.current > 5;
-  }, []);
-  const handleMouseLeave = useCallback(() => {
-    isDraggingRef.current = false;
-  }, []);
-  const handleWheel = useCallback((e, drawFn) => {
-    e.preventDefault();
-    const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
-    cameraRef.current.zoom = Math.max(0.5, Math.min(3, cameraRef.current.zoom * zoomDelta));
-    drawFn?.();
-  }, []);
-  const screenToWorld = useCallback((clientX, clientY, canvas, viewportSize) => {
-    const rect = canvas.getBoundingClientRect();
-    const screenX = clientX - rect.left;
-    const screenY = clientY - rect.top;
-    const cam = cameraRef.current;
-    const worldX = (screenX - viewportSize.width / 2) / cam.zoom + viewportSize.width / 2 + cam.x;
-    const worldY = (screenY - viewportSize.height / 2) / cam.zoom + viewportSize.height / 2 + cam.y;
-    return { x: worldX, y: worldY };
-  }, []);
-  const lerpToTarget = useCallback((t = 0.08) => {
-    if (!targetCameraRef.current) return false;
-    const cam = cameraRef.current;
-    cam.x += (targetCameraRef.current.x - cam.x) * t;
-    cam.y += (targetCameraRef.current.y - cam.y) * t;
-    if (Math.abs(cam.x - targetCameraRef.current.x) < 0.5 && Math.abs(cam.y - targetCameraRef.current.y) < 0.5) {
-      cam.x = targetCameraRef.current.x;
-      cam.y = targetCameraRef.current.y;
-      targetCameraRef.current = null;
-    }
-    return true;
-  }, []);
-  return {
-    cameraRef,
-    targetCameraRef,
-    isDragging: () => isDraggingRef.current,
-    dragDistance: () => dragDistanceRef.current,
-    handleMouseDown,
-    handleMouseUp,
-    handleMouseMove,
-    handleMouseLeave,
-    handleWheel,
-    screenToWorld,
-    lerpToTarget
-  };
-}
-
-// components/organisms/game/utils/isometric.ts
-var TILE_WIDTH = 256;
-var TILE_HEIGHT = 512;
-var FLOOR_HEIGHT = 128;
-var DIAMOND_TOP_Y = 374;
-var FEATURE_COLORS = {
-  goldMine: "#fbbf24",
-  resonanceCrystal: "#a78bfa",
-  traitCache: "#60a5fa",
-  salvageYard: "#6b7280",
-  portal: "#c084fc",
-  castle: "#f59e0b",
-  mountain: "#78716c",
-  default: "#9ca3af"
-};
-function isoToScreen(tileX, tileY, scale, baseOffsetX) {
-  const scaledTileWidth = TILE_WIDTH * scale;
-  const scaledFloorHeight = FLOOR_HEIGHT * scale;
-  const screenX = (tileX - tileY) * (scaledTileWidth / 2) + baseOffsetX;
-  const screenY = (tileX + tileY) * (scaledFloorHeight / 2);
-  return { x: screenX, y: screenY };
-}
-function screenToIso(screenX, screenY, scale, baseOffsetX) {
-  const scaledTileWidth = TILE_WIDTH * scale;
-  const scaledFloorHeight = FLOOR_HEIGHT * scale;
-  const adjustedX = screenX - baseOffsetX;
-  const tileX = (adjustedX / (scaledTileWidth / 2) + screenY / (scaledFloorHeight / 2)) / 2;
-  const tileY = (screenY / (scaledFloorHeight / 2) - adjustedX / (scaledTileWidth / 2)) / 2;
-  return { x: Math.round(tileX), y: Math.round(tileY) };
-}
-function IsometricCanvas({
-  // Closed-circuit
-  className,
-  isLoading = false,
-  error = null,
-  entity,
-  // Grid data
-  tiles: tilesProp = [],
-  units = [],
-  features = [],
-  // Interaction state
-  selectedUnitId = null,
-  validMoves = [],
-  attackTargets = [],
-  hoveredTile = null,
-  // Event handlers
-  onTileClick,
-  onUnitClick,
-  onTileHover,
-  onTileLeave,
-  // Declarative event props
-  tileClickEvent,
-  unitClickEvent,
-  tileHoverEvent,
-  tileLeaveEvent,
-  // Rendering options
-  scale = 0.4,
-  debug = false,
-  backgroundImage,
-  showMinimap = true,
-  enableCamera = true,
-  unitScale = 1,
-  // Asset resolution
-  getTerrainSprite,
-  getFeatureSprite,
-  getUnitSprite,
-  resolveUnitFrame,
-  effectSpriteUrls = [],
-  onDrawEffects,
-  hasActiveEffects: hasActiveEffects2 = false,
-  // Tuning
-  diamondTopY: diamondTopYProp,
-  // Remote asset loading
-  assetBaseUrl,
-  assetManifest
-}) {
-  const eventBus = useEventBus();
-  const { t } = useTranslate();
-  const canvasRef = useRef(null);
-  const containerRef = useRef(null);
-  const minimapRef = useRef(null);
-  const animTimeRef = useRef(0);
-  const rafIdRef = useRef(0);
-  const [viewportSize, setViewportSize] = useState({ width: 800, height: 600 });
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        setViewportSize({
-          width: entry.contentRect.width || 800,
-          height: entry.contentRect.height || 600
-        });
-      }
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  const sortedTiles = useMemo(() => {
-    const tiles = [...tilesProp];
-    tiles.sort((a, b) => {
-      const depthA = a.x + a.y;
-      const depthB = b.x + b.y;
-      return depthA !== depthB ? depthA - depthB : a.y - b.y;
-    });
-    return tiles;
-  }, [tilesProp]);
-  const gridWidth = useMemo(() => {
-    if (sortedTiles.length === 0) return 0;
-    return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
-  }, [sortedTiles]);
-  const gridHeight = useMemo(() => {
-    if (sortedTiles.length === 0) return 0;
-    return Math.max(...sortedTiles.map((t2) => t2.y)) + 1;
-  }, [sortedTiles]);
-  const scaledTileWidth = TILE_WIDTH * scale;
-  const scaledTileHeight = TILE_HEIGHT * scale;
-  const scaledFloorHeight = FLOOR_HEIGHT * scale;
-  const effectiveDiamondTopY = diamondTopYProp ?? DIAMOND_TOP_Y;
-  const scaledDiamondTopY = effectiveDiamondTopY * scale;
-  const baseOffsetX = useMemo(() => {
-    return (gridHeight - 1) * (scaledTileWidth / 2);
-  }, [gridHeight, scaledTileWidth]);
-  const validMoveSet = useMemo(() => {
-    return new Set(validMoves.map((p2) => `${p2.x},${p2.y}`));
-  }, [validMoves]);
-  const attackTargetSet = useMemo(() => {
-    return new Set(attackTargets.map((p2) => `${p2.x},${p2.y}`));
-  }, [attackTargets]);
-  const resolveManifestUrl = useCallback((relativePath) => {
-    if (!relativePath) return void 0;
-    if (assetBaseUrl) return `${assetBaseUrl.replace(/\/$/, "")}${relativePath.startsWith("/") ? "" : "/"}${relativePath}`;
-    return relativePath;
-  }, [assetBaseUrl]);
-  const spriteUrls = useMemo(() => {
-    const urls = [];
-    for (const tile of sortedTiles) {
-      if (tile.terrainSprite) urls.push(tile.terrainSprite);
-      else if (getTerrainSprite) {
-        const url = getTerrainSprite(tile.terrain ?? "");
-        if (url) urls.push(url);
-      } else {
-        const url = resolveManifestUrl(assetManifest?.terrains?.[tile.terrain ?? ""]);
-        if (url) urls.push(url);
-      }
-    }
-    for (const feature of features) {
-      if (feature.sprite) urls.push(feature.sprite);
-      else if (getFeatureSprite) {
-        const url = getFeatureSprite(feature.type);
-        if (url) urls.push(url);
-      } else {
-        const url = resolveManifestUrl(assetManifest?.features?.[feature.type]);
-        if (url) urls.push(url);
-      }
-    }
-    for (const unit of units) {
-      if (unit.sprite) urls.push(unit.sprite);
-      else if (getUnitSprite) {
-        const url = getUnitSprite(unit);
-        if (url) urls.push(url);
-      } else if (unit.unitType) {
-        const url = resolveManifestUrl(assetManifest?.units?.[unit.unitType]);
-        if (url) urls.push(url);
-      }
-    }
-    if (assetManifest?.effects) {
-      for (const path of Object.values(assetManifest.effects)) {
-        const url = resolveManifestUrl(path);
-        if (url) urls.push(url);
-      }
-    }
-    urls.push(...effectSpriteUrls);
-    if (backgroundImage) urls.push(backgroundImage);
-    return [...new Set(urls.filter(Boolean))];
-  }, [sortedTiles, features, units, getTerrainSprite, getFeatureSprite, getUnitSprite, effectSpriteUrls, backgroundImage, assetManifest, resolveManifestUrl]);
-  const { getImage } = useImageCache(spriteUrls);
-  const {
-    cameraRef,
-    targetCameraRef,
-    isDragging,
-    dragDistance,
-    handleMouseDown,
-    handleMouseUp,
-    handleMouseMove,
-    handleMouseLeave,
-    handleWheel,
-    screenToWorld,
-    lerpToTarget
-  } = useCamera();
-  const resolveTerrainSpriteUrl = useCallback((tile) => {
-    return tile.terrainSprite || getTerrainSprite?.(tile.terrain ?? "") || resolveManifestUrl(assetManifest?.terrains?.[tile.terrain ?? ""]);
-  }, [getTerrainSprite, assetManifest, resolveManifestUrl]);
-  const resolveFeatureSpriteUrl = useCallback((featureType) => {
-    return getFeatureSprite?.(featureType) || resolveManifestUrl(assetManifest?.features?.[featureType]);
-  }, [getFeatureSprite, assetManifest, resolveManifestUrl]);
-  const resolveUnitSpriteUrl = useCallback((unit) => {
-    return unit.sprite || getUnitSprite?.(unit) || (unit.unitType ? resolveManifestUrl(assetManifest?.units?.[unit.unitType]) : void 0);
-  }, [getUnitSprite, assetManifest, resolveManifestUrl]);
-  const drawMinimap = useCallback(() => {
-    if (!showMinimap) return;
-    const miniCanvas = minimapRef.current;
-    if (!miniCanvas || sortedTiles.length === 0) return;
-    const mCtx = miniCanvas.getContext("2d");
-    if (!mCtx) return;
-    const mW = 150;
-    const mH = 100;
-    miniCanvas.width = mW;
-    miniCanvas.height = mH;
-    mCtx.clearRect(0, 0, mW, mH);
-    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX));
-    const minX = Math.min(...allScreenPos.map((p2) => p2.x));
-    const maxX = Math.max(...allScreenPos.map((p2) => p2.x + scaledTileWidth));
-    const minY = Math.min(...allScreenPos.map((p2) => p2.y));
-    const maxY = Math.max(...allScreenPos.map((p2) => p2.y + scaledTileHeight));
-    const worldW = maxX - minX;
-    const worldH = maxY - minY;
-    const scaleM = Math.min(mW / worldW, mH / worldH) * 0.9;
-    const offsetMx = (mW - worldW * scaleM) / 2;
-    const offsetMy = (mH - worldH * scaleM) / 2;
-    for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
-      const mx = (pos.x - minX) * scaleM + offsetMx;
-      const my = (pos.y - minY) * scaleM + offsetMy;
-      const mTileW = scaledTileWidth * scaleM;
-      const mFloorH = scaledFloorHeight * scaleM;
-      mCtx.fillStyle = tile.terrain === "water" ? "#3b82f6" : tile.terrain === "mountain" ? "#78716c" : "#4ade80";
-      mCtx.beginPath();
-      mCtx.moveTo(mx + mTileW / 2, my);
-      mCtx.lineTo(mx + mTileW, my + mFloorH / 2);
-      mCtx.lineTo(mx + mTileW / 2, my + mFloorH);
-      mCtx.lineTo(mx, my + mFloorH / 2);
-      mCtx.closePath();
-      mCtx.fill();
-    }
-    for (const unit of units) {
-      if (!unit.position) continue;
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
-      const mx = (pos.x + scaledTileWidth / 2 - minX) * scaleM + offsetMx;
-      const my = (pos.y + scaledTileHeight / 2 - minY) * scaleM + offsetMy;
-      mCtx.fillStyle = unit.team === "player" ? "#60a5fa" : unit.team === "enemy" ? "#f87171" : "#9ca3af";
-      mCtx.beginPath();
-      mCtx.arc(mx, my, 3, 0, Math.PI * 2);
-      mCtx.fill();
-    }
-    const cam = cameraRef.current;
-    const vLeft = (cam.x - minX) * scaleM + offsetMx;
-    const vTop = (cam.y - minY) * scaleM + offsetMy;
-    const vW = viewportSize.width / cam.zoom * scaleM;
-    const vH = viewportSize.height / cam.zoom * scaleM;
-    mCtx.strokeStyle = "rgba(255, 255, 255, 0.8)";
-    mCtx.lineWidth = 1;
-    mCtx.strokeRect(vLeft, vTop, vW, vH);
-  }, [showMinimap, sortedTiles, units, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
-  const draw = useCallback((animTime) => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = viewportSize.width * dpr;
-    canvas.height = viewportSize.height * dpr;
-    ctx.scale(dpr, dpr);
-    ctx.clearRect(0, 0, viewportSize.width, viewportSize.height);
-    if (backgroundImage) {
-      const bgImg = getImage(backgroundImage);
-      if (bgImg) {
-        const cam2 = cameraRef.current;
-        const patW = bgImg.naturalWidth;
-        const patH = bgImg.naturalHeight;
-        const startX = -(cam2.x % patW + patW) % patW;
-        const startY = -(cam2.y % patH + patH) % patH;
-        for (let y = startY - patH; y < viewportSize.height; y += patH) {
-          for (let x = startX - patW; x < viewportSize.width; x += patW) {
-            ctx.drawImage(bgImg, x, y);
-          }
-        }
-      }
-    } else {
-      ctx.fillStyle = "#1a1a2e";
-      ctx.fillRect(0, 0, viewportSize.width, viewportSize.height);
-    }
-    if (sortedTiles.length === 0) return;
-    ctx.save();
-    const cam = cameraRef.current;
-    ctx.translate(viewportSize.width / 2, viewportSize.height / 2);
-    ctx.scale(cam.zoom, cam.zoom);
-    ctx.translate(-viewportSize.width / 2 - cam.x, -viewportSize.height / 2 - cam.y);
-    const visLeft = cam.x - viewportSize.width / cam.zoom;
-    const visRight = cam.x + viewportSize.width * 2 / cam.zoom;
-    const visTop = cam.y - viewportSize.height / cam.zoom;
-    const visBottom = cam.y + viewportSize.height * 2 / cam.zoom;
-    for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
-      if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
-        continue;
-      }
-      const spriteUrl = resolveTerrainSpriteUrl(tile);
-      const img = spriteUrl ? getImage(spriteUrl) : null;
-      if (img) {
-        ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
-      } 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.beginPath();
-        ctx.moveTo(centerX, topY);
-        ctx.lineTo(pos.x + scaledTileWidth, topY + scaledFloorHeight / 2);
-        ctx.lineTo(centerX, topY + scaledFloorHeight);
-        ctx.lineTo(pos.x, topY + scaledFloorHeight / 2);
-        ctx.closePath();
-        ctx.fill();
-        ctx.strokeStyle = "rgba(0,0,0,0.2)";
-        ctx.lineWidth = 1;
-        ctx.stroke();
-      }
-      if (hoveredTile && hoveredTile.x === tile.x && hoveredTile.y === tile.y) {
-        const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + scaledDiamondTopY;
-        ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
-        ctx.beginPath();
-        ctx.moveTo(centerX, topY);
-        ctx.lineTo(pos.x + scaledTileWidth, topY + scaledFloorHeight / 2);
-        ctx.lineTo(centerX, topY + scaledFloorHeight);
-        ctx.lineTo(pos.x, topY + scaledFloorHeight / 2);
-        ctx.closePath();
-        ctx.fill();
-      }
-      const tileKey = `${tile.x},${tile.y}`;
-      if (validMoveSet.has(tileKey)) {
-        const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + scaledDiamondTopY;
-        const pulse = 0.15 + 0.1 * Math.sin(animTime * 4e-3);
-        ctx.fillStyle = `rgba(74, 222, 128, ${pulse})`;
-        ctx.beginPath();
-        ctx.moveTo(centerX, topY);
-        ctx.lineTo(pos.x + scaledTileWidth, topY + scaledFloorHeight / 2);
-        ctx.lineTo(centerX, topY + scaledFloorHeight);
-        ctx.lineTo(pos.x, topY + scaledFloorHeight / 2);
-        ctx.closePath();
-        ctx.fill();
-      }
-      if (attackTargetSet.has(tileKey)) {
-        const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + scaledDiamondTopY;
-        const pulse = 0.2 + 0.15 * Math.sin(animTime * 5e-3);
-        ctx.fillStyle = `rgba(239, 68, 68, ${pulse})`;
-        ctx.beginPath();
-        ctx.moveTo(centerX, topY);
-        ctx.lineTo(pos.x + scaledTileWidth, topY + scaledFloorHeight / 2);
-        ctx.lineTo(centerX, topY + scaledFloorHeight);
-        ctx.lineTo(pos.x, topY + scaledFloorHeight / 2);
-        ctx.closePath();
-        ctx.fill();
-      }
-      if (debug) {
-        const centerX = pos.x + scaledTileWidth / 2;
-        const centerY = pos.y + scaledFloorHeight / 2 + scaledDiamondTopY;
-        ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
-        ctx.font = `${12 * scale * 2}px monospace`;
-        ctx.textAlign = "center";
-        ctx.fillText(`${tile.x},${tile.y}`, centerX, centerY + 4);
-      }
-    }
-    const sortedFeatures = [...features].sort((a, b) => {
-      const depthA = a.x + a.y;
-      const depthB = b.x + b.y;
-      return depthA !== depthB ? depthA - depthB : a.y - b.y;
-    });
-    for (const feature of sortedFeatures) {
-      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX);
-      if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
-        continue;
-      }
-      const spriteUrl = feature.sprite || resolveFeatureSpriteUrl(feature.type);
-      const img = spriteUrl ? getImage(spriteUrl) : null;
-      const centerX = pos.x + scaledTileWidth / 2;
-      const featureGroundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
-      const isCastle = feature.type === "castle";
-      const featureDrawH = isCastle ? scaledFloorHeight * 3.5 : scaledFloorHeight * 1.6;
-      const maxFeatureW = isCastle ? scaledTileWidth * 1.8 : scaledTileWidth * 0.7;
-      if (img) {
-        const ar = img.naturalWidth / img.naturalHeight;
-        let drawH = featureDrawH;
-        let drawW = featureDrawH * ar;
-        if (drawW > maxFeatureW) {
-          drawW = maxFeatureW;
-          drawH = maxFeatureW / ar;
-        }
-        const drawX = centerX - drawW / 2;
-        const drawY = featureGroundY - drawH;
-        ctx.drawImage(img, drawX, drawY, drawW, drawH);
-      } else {
-        const color = FEATURE_COLORS[feature.type] || FEATURE_COLORS.default;
-        ctx.beginPath();
-        ctx.arc(centerX, featureGroundY - 8 * scale, 16 * scale, 0, Math.PI * 2);
-        ctx.fillStyle = color;
-        ctx.fill();
-        ctx.strokeStyle = "rgba(0,0,0,0.5)";
-        ctx.lineWidth = 2;
-        ctx.stroke();
-      }
-    }
-    const unitsWithPosition = units.filter((u) => !!u.position);
-    const sortedUnits = [...unitsWithPosition].sort((a, b) => {
-      const depthA = a.position.x + a.position.y;
-      const depthB = b.position.x + b.position.y;
-      return depthA !== depthB ? depthA - depthB : a.position.y - b.position.y;
-    });
-    for (const unit of sortedUnits) {
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
-      if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
-        continue;
-      }
-      const isSelected = unit.id === selectedUnitId;
-      const centerX = pos.x + scaledTileWidth / 2;
-      const groundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
-      const breatheOffset = 0.8 * scale * (1 + Math.sin(animTime * 2e-3 + (unit.position.x * 3.7 + unit.position.y * 5.3)));
-      const unitSpriteUrl = resolveUnitSpriteUrl(unit);
-      const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
-      const unitDrawH = scaledFloorHeight * 1.5 * unitScale;
-      const maxUnitW = scaledTileWidth * 0.6 * unitScale;
-      const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
-      let drawH = unitDrawH;
-      let drawW = unitDrawH * ar;
-      if (drawW > maxUnitW) {
-        drawW = maxUnitW;
-        drawH = maxUnitW / ar;
-      }
-      if (unit.previousPosition && (unit.previousPosition.x !== unit.position.x || unit.previousPosition.y !== unit.position.y)) {
-        const ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX);
-        const ghostCenterX = ghostPos.x + scaledTileWidth / 2;
-        const ghostGroundY = ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
-        ctx.save();
-        ctx.globalAlpha = 0.25;
-        if (img) {
-          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.fill();
-        }
-        ctx.restore();
-      }
-      if (isSelected) {
-        const ringAlpha = 0.6 + 0.3 * Math.sin(animTime * 4e-3);
-        ctx.beginPath();
-        ctx.ellipse(centerX, groundY, drawW / 2 + 4 * scale, 12 * scale, 0, 0, Math.PI * 2);
-        ctx.strokeStyle = `rgba(0, 200, 255, ${ringAlpha})`;
-        ctx.lineWidth = 3;
-        ctx.stroke();
-      }
-      const frame = resolveUnitFrame?.(unit.id) ?? null;
-      const frameImg = frame ? getImage(frame.sheetUrl) : null;
-      if (frame && frameImg) {
-        const frameAr = frame.sw / frame.sh;
-        let fDrawH = unitDrawH;
-        let fDrawW = unitDrawH * frameAr;
-        if (fDrawW > maxUnitW) {
-          fDrawW = maxUnitW;
-          fDrawH = maxUnitW / frameAr;
-        }
-        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.shadowBlur = 12 * scale;
-        }
-        if (frame.flipX) {
-          ctx.translate(centerX, 0);
-          ctx.scale(-1, 1);
-          ctx.drawImage(frameImg, frame.sx, frame.sy, frame.sw, frame.sh, -fDrawW / 2, spriteY, fDrawW, fDrawH);
-        } else {
-          ctx.drawImage(frameImg, frame.sx, frame.sy, frame.sw, frame.sh, centerX - fDrawW / 2, spriteY, fDrawW, fDrawH);
-        }
-        ctx.restore();
-      } else if (img) {
-        const spriteY = groundY - drawH - breatheOffset;
-        if (unit.team) {
-          ctx.save();
-          ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
-          ctx.shadowBlur = 12 * scale;
-          ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
-          ctx.restore();
-        } else {
-          ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
-        }
-      } 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.fill();
-        ctx.strokeStyle = "rgba(255,255,255,0.8)";
-        ctx.lineWidth = 2;
-        ctx.stroke();
-      }
-      if (unit.name) {
-        const labelBg = unit.team === "player" ? "rgba(59, 130, 246, 0.9)" : unit.team === "enemy" ? "rgba(239, 68, 68, 0.9)" : "rgba(107, 114, 128, 0.9)";
-        ctx.font = `bold ${10 * scale * 2.5}px system-ui`;
-        ctx.textAlign = "center";
-        const textWidth = ctx.measureText(unit.name).width;
-        const labelY = groundY + 14 * scale - breatheOffset;
-        ctx.fillStyle = labelBg;
-        ctx.beginPath();
-        ctx.roundRect(centerX - textWidth / 2 - 6 * scale, labelY - 8 * scale, textWidth + 12 * scale, 16 * scale, 4 * scale);
-        ctx.fill();
-        ctx.fillStyle = "white";
-        ctx.fillText(unit.name, centerX, labelY + 4 * scale);
-      }
-      if (unit.health !== void 0 && unit.maxHealth !== void 0) {
-        const barWidth = 40 * scale;
-        const barHeight = 6 * scale;
-        const barX = centerX - barWidth / 2;
-        const barY = groundY - drawH - 2 * scale - breatheOffset;
-        const healthRatio = unit.health / unit.maxHealth;
-        const barRadius = barHeight / 2;
-        ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
-        ctx.beginPath();
-        ctx.roundRect(barX, barY, barWidth, barHeight, barRadius);
-        ctx.fill();
-        if (healthRatio > 0) {
-          const fillWidth = barWidth * healthRatio;
-          const gradient = ctx.createLinearGradient(barX, barY, barX, barY + barHeight);
-          if (healthRatio > 0.6) {
-            gradient.addColorStop(0, "#4ade80");
-            gradient.addColorStop(1, "#22c55e");
-          } else if (healthRatio > 0.3) {
-            gradient.addColorStop(0, "#fde047");
-            gradient.addColorStop(1, "#eab308");
-          } else {
-            gradient.addColorStop(0, "#f87171");
-            gradient.addColorStop(1, "#ef4444");
-          }
-          ctx.fillStyle = gradient;
-          ctx.save();
-          ctx.beginPath();
-          ctx.roundRect(barX, barY, fillWidth, barHeight, barRadius);
-          ctx.clip();
-          ctx.fillRect(barX, barY, fillWidth, barHeight);
-          ctx.restore();
-        }
-        ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.roundRect(barX, barY, barWidth, barHeight, barRadius);
-        ctx.stroke();
-      }
-    }
-    onDrawEffects?.(ctx, animTime, getImage);
-    ctx.restore();
-    drawMinimap();
-  }, [
-    sortedTiles,
-    units,
-    features,
-    selectedUnitId,
-    scale,
-    debug,
-    resolveTerrainSpriteUrl,
-    resolveFeatureSpriteUrl,
-    resolveUnitSpriteUrl,
-    resolveUnitFrame,
-    getImage,
-    gridWidth,
-    gridHeight,
-    baseOffsetX,
-    scaledTileWidth,
-    scaledTileHeight,
-    scaledFloorHeight,
-    scaledDiamondTopY,
-    validMoveSet,
-    attackTargetSet,
-    hoveredTile,
-    viewportSize,
-    drawMinimap,
-    onDrawEffects,
-    backgroundImage,
-    cameraRef,
-    unitScale
-  ]);
-  useEffect(() => {
-    if (!selectedUnitId) return;
-    const unit = units.find((u) => u.id === selectedUnitId);
-    if (!unit?.position) return;
-    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
-    const centerX = pos.x + scaledTileWidth / 2;
-    const centerY = pos.y + scaledDiamondTopY + scaledFloorHeight / 2;
-    targetCameraRef.current = {
-      x: centerX - viewportSize.width / 2,
-      y: centerY - viewportSize.height / 2
-    };
-  }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
-  useEffect(() => {
-    const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2;
-    draw(animTimeRef.current);
-    if (!hasAnimations) return;
-    let running = true;
-    const animate = (timestamp) => {
-      if (!running) return;
-      animTimeRef.current = timestamp;
-      lerpToTarget();
-      draw(timestamp);
-      rafIdRef.current = requestAnimationFrame(animate);
-    };
-    rafIdRef.current = requestAnimationFrame(animate);
-    return () => {
-      running = false;
-      cancelAnimationFrame(rafIdRef.current);
-    };
-  }, [draw, units.length, validMoves.length, attackTargets.length, selectedUnitId, hasActiveEffects2, lerpToTarget, targetCameraRef]);
-  const handleMouseMoveWithCamera = useCallback((e) => {
-    if (enableCamera) {
-      const wasPanning = handleMouseMove(e, () => draw(animTimeRef.current));
-      if (wasPanning) return;
-    }
-    if (!onTileHover && !tileHoverEvent || !canvasRef.current) return;
-    const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
-    const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
-    const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
-    if (tileExists) {
-      if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
-      onTileHover?.(isoPos.x, isoPos.y);
-    }
-  }, [enableCamera, handleMouseMove, draw, onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
-  const handleMouseLeaveWithCamera = useCallback(() => {
-    handleMouseLeave();
-    if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
-    onTileLeave?.();
-  }, [handleMouseLeave, onTileLeave, tileLeaveEvent, eventBus]);
-  const handleWheelWithCamera = useCallback((e) => {
-    if (enableCamera) {
-      handleWheel(e, () => draw(animTimeRef.current));
-    }
-  }, [enableCamera, handleWheel, draw]);
-  const handleClick = useCallback((e) => {
-    if (dragDistance() > 5) return;
-    if (!canvasRef.current) return;
-    const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
-    const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
-    const clickedUnit = units.find((u) => u.position?.x === isoPos.x && u.position?.y === isoPos.y);
-    if (clickedUnit && (onUnitClick || unitClickEvent)) {
-      if (unitClickEvent) eventBus.emit(`UI:${unitClickEvent}`, { unitId: clickedUnit.id });
-      onUnitClick?.(clickedUnit.id);
-    } else if (onTileClick || tileClickEvent) {
-      const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
-      if (tileExists) {
-        if (tileClickEvent) eventBus.emit(`UI:${tileClickEvent}`, { x: isoPos.x, y: isoPos.y });
-        onTileClick?.(isoPos.x, isoPos.y);
-      }
-    }
-  }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
-  if (error) {
-    return /* @__PURE__ */ jsx(ErrorState, { title: t("canvas.errorTitle"), message: error.message, className });
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(LoadingState, { className });
-  }
-  if (sortedTiles.length === 0) {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: cn("relative w-full overflow-hidden rounded-lg", className),
-        style: { height: viewportSize.height },
-        "data-testid": "game-canvas-empty",
-        children: /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center h-full bg-slate-800 rounded-lg", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
-          /* @__PURE__ */ jsx(Icon, { name: "map", size: "xl" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-slate-400", children: t("canvas.emptyMessage") || "No map data loaded" })
-        ] }) })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref: containerRef,
-      className: cn("relative overflow-hidden w-full h-full", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "canvas",
-          {
-            ref: canvasRef,
-            "data-testid": "game-canvas",
-            onClick: handleClick,
-            onMouseDown: enableCamera ? handleMouseDown : void 0,
-            onMouseMove: handleMouseMoveWithCamera,
-            onMouseUp: enableCamera ? handleMouseUp : void 0,
-            onMouseLeave: handleMouseLeaveWithCamera,
-            onWheel: handleWheelWithCamera,
-            onContextMenu: (e) => e.preventDefault(),
-            className: "cursor-pointer",
-            style: {
-              width: viewportSize.width,
-              height: viewportSize.height
-            }
-          }
-        ),
-        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxs("div", { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
-          tileClickEvent && /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-event": tileClickEvent,
-              "data-x": "0",
-              "data-y": "0",
-              onClick: () => eventBus.emit(`UI:${tileClickEvent}`, { x: 0, y: 0 }),
-              children: tileClickEvent
-            }
-          ),
-          unitClickEvent && units && units.length > 0 && /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-event": unitClickEvent,
-              "data-unit-id": units[0].id,
-              onClick: () => eventBus.emit(`UI:${unitClickEvent}`, { unitId: units[0].id }),
-              children: unitClickEvent
-            }
-          )
-        ] }),
-        showMinimap && /* @__PURE__ */ jsx(
-          "canvas",
-          {
-            ref: minimapRef,
-            className: "absolute bottom-2 right-2 border border-border rounded bg-background/80 pointer-events-none",
-            style: { width: 150, height: 100, zIndex: 10 }
-          }
-        )
-      ]
-    }
-  );
-}
-IsometricCanvas.displayName = "IsometricCanvas";
-var IsometricCanvas_default = IsometricCanvas;
-var PLATFORM_COLORS = {
-  ground: "#4a7c59",
-  platform: "#7c6b4a",
-  hazard: "#c0392b",
-  goal: "#f1c40f"
-};
-var PLAYER_COLOR = "#3498db";
-var PLAYER_EYE_COLOR = "#ffffff";
-var SKY_GRADIENT_TOP = "#1a1a2e";
-var SKY_GRADIENT_BOTTOM = "#16213e";
-var GRID_COLOR = "rgba(255, 255, 255, 0.03)";
-function PlatformerCanvas({
-  player,
-  platforms = [],
-  worldWidth = 800,
-  worldHeight = 400,
-  canvasWidth = 800,
-  canvasHeight = 400,
-  followCamera = true,
-  bgColor,
-  leftEvent = "MOVE_LEFT",
-  rightEvent = "MOVE_RIGHT",
-  jumpEvent = "JUMP",
-  stopEvent = "STOP",
-  className,
-  entity
-}) {
-  const canvasRef = useRef(null);
-  const eventBus = useEventBus();
-  const keysRef = useRef(/* @__PURE__ */ new Set());
-  const resolvedPlayer = player ?? {
-    x: entity?.x ?? 50,
-    y: entity?.y ?? 300,
-    width: entity?.width ?? 24,
-    height: entity?.height ?? 32,
-    vx: entity?.vx ?? 0,
-    vy: entity?.vy ?? 0,
-    grounded: entity?.grounded ?? false,
-    facingRight: entity?.facingRight ?? true
-  };
-  const handleKeyDown = useCallback((e) => {
-    if (keysRef.current.has(e.code)) return;
-    keysRef.current.add(e.code);
-    switch (e.code) {
-      case "ArrowLeft":
-      case "KeyA":
-        eventBus.emit(`UI:${leftEvent}`, { direction: -1 });
-        break;
-      case "ArrowRight":
-      case "KeyD":
-        eventBus.emit(`UI:${rightEvent}`, { direction: 1 });
-        break;
-      case "ArrowUp":
-      case "KeyW":
-      case "Space":
-        eventBus.emit(`UI:${jumpEvent}`, {});
-        e.preventDefault();
-        break;
-    }
-  }, [eventBus, leftEvent, rightEvent, jumpEvent]);
-  const handleKeyUp = useCallback((e) => {
-    keysRef.current.delete(e.code);
-    switch (e.code) {
-      case "ArrowLeft":
-      case "KeyA":
-      case "ArrowRight":
-      case "KeyD":
-        eventBus.emit(`UI:${stopEvent}`, {});
-        break;
-    }
-  }, [eventBus, stopEvent]);
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keyup", handleKeyUp);
-    };
-  }, [handleKeyDown, handleKeyUp]);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = canvasWidth * dpr;
-    canvas.height = canvasHeight * dpr;
-    ctx.scale(dpr, dpr);
-    let camX = 0;
-    let camY = 0;
-    if (followCamera) {
-      camX = Math.max(0, Math.min(resolvedPlayer.x - canvasWidth / 2, worldWidth - canvasWidth));
-      camY = Math.max(0, Math.min(resolvedPlayer.y - canvasHeight / 2 - 50, worldHeight - canvasHeight));
-    }
-    if (bgColor) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    } else {
-      const grad = ctx.createLinearGradient(0, 0, 0, canvasHeight);
-      grad.addColorStop(0, SKY_GRADIENT_TOP);
-      grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
-      ctx.fillStyle = grad;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    }
-    ctx.strokeStyle = GRID_COLOR;
-    ctx.lineWidth = 1;
-    const gridSize = 32;
-    for (let gx = -camX % gridSize; gx < canvasWidth; gx += gridSize) {
-      ctx.beginPath();
-      ctx.moveTo(gx, 0);
-      ctx.lineTo(gx, canvasHeight);
-      ctx.stroke();
-    }
-    for (let gy = -camY % gridSize; gy < canvasHeight; gy += gridSize) {
-      ctx.beginPath();
-      ctx.moveTo(0, gy);
-      ctx.lineTo(canvasWidth, gy);
-      ctx.stroke();
-    }
-    for (const plat of platforms) {
-      const px = plat.x - camX;
-      const py = plat.y - camY;
-      const color = PLATFORM_COLORS[plat.type ?? "ground"] ?? PLATFORM_COLORS.ground;
-      ctx.fillStyle = color;
-      ctx.fillRect(px, py, plat.width, plat.height);
-      ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
-      ctx.fillRect(px, py, plat.width, 3);
-      ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
-      ctx.fillRect(px, py + plat.height - 2, plat.width, 2);
-      if (plat.type === "hazard") {
-        ctx.strokeStyle = "#e74c3c";
-        ctx.lineWidth = 2;
-        for (let sx = px; sx < px + plat.width; sx += 12) {
-          ctx.beginPath();
-          ctx.moveTo(sx, py);
-          ctx.lineTo(sx + 6, py + plat.height);
-          ctx.stroke();
-        }
-      }
-      if (plat.type === "goal") {
-        ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
-        ctx.beginPath();
-        ctx.arc(px + plat.width / 2, py - 10, 8, 0, Math.PI * 2);
-        ctx.fill();
-      }
-    }
-    const pw = resolvedPlayer.width ?? 24;
-    const ph = resolvedPlayer.height ?? 32;
-    const ppx = resolvedPlayer.x - camX;
-    const ppy = resolvedPlayer.y - camY;
-    ctx.fillStyle = PLAYER_COLOR;
-    const radius = Math.min(pw, ph) * 0.25;
-    ctx.beginPath();
-    ctx.moveTo(ppx + radius, ppy);
-    ctx.lineTo(ppx + pw - radius, ppy);
-    ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
-    ctx.lineTo(ppx + pw, ppy + ph - radius);
-    ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
-    ctx.lineTo(ppx + radius, ppy + ph);
-    ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
-    ctx.lineTo(ppx, ppy + radius);
-    ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
-    ctx.fill();
-    const eyeY = ppy + ph * 0.3;
-    const eyeSize = 3;
-    const facingRight = resolvedPlayer.facingRight ?? true;
-    const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
-    ctx.fillStyle = PLAYER_EYE_COLOR;
-    ctx.beginPath();
-    ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
-    ctx.fill();
-  });
-  return /* @__PURE__ */ jsx(
-    "canvas",
-    {
-      ref: canvasRef,
-      style: { width: canvasWidth, height: canvasHeight },
-      className: cn("block rounded-lg border border-white/10", className),
-      "data-testid": "platformer-canvas",
-      tabIndex: 0
-    }
-  );
-}
-PlatformerCanvas.displayName = "PlatformerCanvas";
 
 // components/organisms/game/types/effects.ts
 var EMPTY_EFFECT_STATE = {
@@ -6745,717 +5702,94 @@ var PhysicsManager = class {
   /**
    * Reset all physics state
    */
-  reset() {
-    this.entities.clear();
-  }
-};
-
-// components/organisms/game/hooks/usePhysics2D.ts
-function usePhysics2D(options = {}) {
-  const physicsManagerRef = useRef(null);
-  const collisionCallbacksRef = useRef(/* @__PURE__ */ new Set());
-  if (!physicsManagerRef.current) {
-    physicsManagerRef.current = new PhysicsManager({
-      gravity: options.gravity,
-      friction: options.friction,
-      airResistance: options.airResistance,
-      maxVelocityY: options.maxVelocityY,
-      groundY: options.groundY
-    });
-  }
-  const manager = physicsManagerRef.current;
-  useEffect(() => {
-    if (options.onCollision) {
-      collisionCallbacksRef.current.add(options.onCollision);
-    }
-    return () => {
-      if (options.onCollision) {
-        collisionCallbacksRef.current.delete(options.onCollision);
-      }
-    };
-  }, [options.onCollision]);
-  const registerUnit = useCallback((unitId, initialState = {}) => {
-    manager.registerEntity(unitId, initialState);
-  }, [manager]);
-  const unregisterUnit = useCallback((unitId) => {
-    manager.unregisterEntity(unitId);
-  }, [manager]);
-  const getPosition = useCallback((unitId) => {
-    const state = manager.getState(unitId);
-    if (!state) return null;
-    return { x: state.x, y: state.y };
-  }, [manager]);
-  const getState = useCallback((unitId) => {
-    return manager.getState(unitId);
-  }, [manager]);
-  const applyForce = useCallback((unitId, fx, fy) => {
-    manager.applyForce(unitId, fx, fy);
-  }, [manager]);
-  const setVelocity = useCallback((unitId, vx, vy) => {
-    manager.setVelocity(unitId, vx, vy);
-  }, [manager]);
-  const setPosition = useCallback((unitId, x, y) => {
-    manager.setPosition(unitId, x, y);
-  }, [manager]);
-  const tick = useCallback((deltaTime = 16) => {
-    manager.tick(deltaTime);
-  }, [manager]);
-  const checkCollision = useCallback((unitIdA, unitIdB, boundsA, boundsB) => {
-    return manager.checkCollision(unitIdA, unitIdB, boundsA, boundsB);
-  }, [manager]);
-  const resolveCollision = useCallback((unitIdA, unitIdB) => {
-    manager.resolveCollision(unitIdA, unitIdB);
-    collisionCallbacksRef.current.forEach((callback) => {
-      callback(unitIdA, unitIdB);
-    });
-  }, [manager]);
-  const setFrozen = useCallback((unitId, frozen) => {
-    manager.setFrozen(unitId, frozen);
-  }, [manager]);
-  const getAllUnits = useCallback(() => {
-    return manager.getAllEntities();
-  }, [manager]);
-  const reset = useCallback(() => {
-    manager.reset();
-  }, [manager]);
-  return {
-    registerUnit,
-    unregisterUnit,
-    getPosition,
-    getState,
-    applyForce,
-    setVelocity,
-    setPosition,
-    tick,
-    checkCollision,
-    resolveCollision,
-    setFrozen,
-    getAllUnits,
-    reset
-  };
-}
-var positionMap = {
-  top: "top-0 left-0 right-0 flex justify-between items-start p-4",
-  bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
-  corners: "inset-0 pointer-events-none"
-};
-function convertElementsToStats(elements) {
-  return elements.map((el) => {
-    const [source, field] = el.bind?.split(".") ?? [];
-    const labelMap = {
-      "health-bar": "Health",
-      "score-display": "Score",
-      lives: "Lives",
-      timer: "Time"
-    };
-    return {
-      label: el.label || labelMap[el.type ?? ""] || el.type || "",
-      source,
-      field,
-      // Pass through direct values from compiled render-ui effects
-      ...el.value !== void 0 && { value: el.value },
-      ...el.icon !== void 0 && { icon: el.icon },
-      ...el.format !== void 0 && { format: el.format },
-      ...el.max !== void 0 && { max: el.max }
-    };
-  });
-}
-function GameHud({
-  position: propPosition,
-  stats: propStats,
-  items,
-  elements,
-  size = "md",
-  className,
-  transparent = true
-}) {
-  const rawStats = propStats ?? items ?? (elements && Array.isArray(elements) ? convertElementsToStats(elements) : []);
-  const stats = Array.isArray(rawStats) ? rawStats : [];
-  const position = propPosition ?? "corners";
-  if (position === "corners") {
-    const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
-    const rightStats = stats.slice(Math.ceil(stats.length / 2));
-    return /* @__PURE__ */ jsxs("div", { className: cn("absolute", positionMap[position], className), children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
-      /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
-    ] });
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "absolute z-10",
-        positionMap[position],
-        transparent && "bg-gradient-to-b from-black/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-black/50 to-transparent",
-        className
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
-    }
-  );
-}
-GameHud.displayName = "GameHud";
-var variantMap = {
-  primary: "bg-blue-600 hover:bg-blue-500 text-white border-blue-400 shadow-lg shadow-blue-500/25",
-  secondary: "bg-gray-700 hover:bg-gray-600 text-white border-gray-500",
-  ghost: "bg-transparent hover:bg-white/10 text-white border-white/20"
-};
-function GameMenu({
-  title,
-  subtitle,
-  options,
-  menuItems,
-  onSelect,
-  eventBus: eventBusProp,
-  background,
-  logo,
-  className
-}) {
-  const resolvedOptions = options ?? menuItems ?? [];
-  let eventBusFromHook = null;
-  try {
-    eventBusFromHook = useEventBus();
-  } catch {
-  }
-  const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React.useCallback(
-    (option) => {
-      if (option.event && eventBus) {
-        eventBus.emit(`UI:${option.event}`, { option });
-      }
-      if (onSelect) {
-        onSelect(option);
-      }
-      if (option.navigatesTo && eventBus) {
-        eventBus.emit("UI:NAVIGATE", { url: option.navigatesTo, option });
-      }
-    },
-    [eventBus, onSelect]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "min-h-screen w-full flex flex-col items-center justify-center p-8",
-        className
-      ),
-      style: {
-        background: background ?? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
-          logo && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: logo,
-              alt: title,
-              className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: "text-5xl md:text-7xl font-bold text-white tracking-tight",
-              style: {
-                textShadow: "0 4px 12px rgba(0,0,0,0.5)"
-              },
-              children: title
-            }
-          ),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 text-lg text-gray-400 tracking-widest uppercase", children: subtitle })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => handleOptionClick(option),
-            disabled: option.disabled,
-            className: cn(
-              "w-full py-4 px-8 rounded-xl border-2 font-bold text-lg",
-              "transition-all duration-200 transform",
-              "hover:scale-105 active:scale-95",
-              "focus:outline-none focus:ring-4 focus:ring-white/25",
-              variantMap[option.variant ?? "secondary"] ?? variantMap.secondary,
-              option.disabled && "opacity-50 cursor-not-allowed hover:scale-100"
-            ),
-            style: {
-              animationDelay: `${index * 100}ms`
-            },
-            children: option.label
-          },
-          index
-        )) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" })
-        ] })
-      ]
-    }
-  );
-}
-GameMenu.displayName = "GameMenu";
-var variantColors = {
-  victory: {
-    bg: "from-green-900/90 to-emerald-950/90",
-    title: "text-green-400",
-    accent: "border-green-500"
-  },
-  defeat: {
-    bg: "from-red-900/90 to-gray-950/90",
-    title: "text-red-400",
-    accent: "border-red-500"
-  },
-  neutral: {
-    bg: "from-gray-900/90 to-gray-950/90",
-    title: "text-white",
-    accent: "border-gray-500"
-  }
-};
-var buttonVariants = {
-  primary: "bg-blue-600 hover:bg-blue-500 text-white border-blue-400",
-  secondary: "bg-gray-700 hover:bg-gray-600 text-white border-gray-500",
-  ghost: "bg-transparent hover:bg-white/10 text-white border-white/20"
-};
-function formatTime(ms) {
-  const seconds = Math.floor(ms / 1e3);
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
-}
-function GameOverScreen({
-  title,
-  message,
-  stats = [],
-  actions,
-  menuItems,
-  onAction,
-  eventBus: eventBusProp,
-  variant = "neutral",
-  highScore,
-  currentScore,
-  className
-}) {
-  const resolvedActions = actions ?? menuItems ?? [];
-  let eventBusFromHook = null;
-  try {
-    eventBusFromHook = useEventBus();
-  } catch {
-  }
-  const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React.useCallback(
-    (action) => {
-      if (action.event && eventBus) {
-        eventBus.emit(`UI:${action.event}`, { action });
-      }
-      if (onAction) {
-        onAction(action);
-      }
-    },
-    [eventBus, onAction]
-  );
-  const colors = variantColors[variant];
-  const numericCurrentScore = typeof currentScore === "string" ? parseFloat(currentScore) : currentScore;
-  const numericHighScore = typeof highScore === "string" ? parseFloat(highScore) : highScore;
-  const isNewHighScore = numericHighScore !== void 0 && numericCurrentScore !== void 0 && !isNaN(numericCurrentScore) && !isNaN(numericHighScore) && numericCurrentScore > numericHighScore;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "min-h-screen w-full flex flex-col items-center justify-center p-8",
-        "bg-gradient-to-b",
-        colors.bg,
-        className
-      ),
-      children: [
-        variant === "victory" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.2),transparent_70%)]" }) }),
-        /* @__PURE__ */ jsx(
-          "h1",
-          {
-            className: cn(
-              "text-6xl md:text-8xl font-bold mb-4 tracking-tight animate-bounce-once",
-              colors.title
-            ),
-            style: { textShadow: "0 4px 20px rgba(0,0,0,0.5)" },
-            children: title
-          }
-        ),
-        message && /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-300 mb-8 text-center max-w-md", children: message }),
-        isNewHighScore && /* @__PURE__ */ jsx("div", { className: "mb-6 px-6 py-2 bg-yellow-500/20 border-2 border-yellow-500 rounded-full animate-pulse", children: /* @__PURE__ */ jsx("span", { className: "text-yellow-400 font-bold text-lg tracking-wide", children: "\u{1F3C6} NEW HIGH SCORE! \u{1F3C6}" }) }),
-        stats.length > 0 && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "mb-8 p-6 rounded-xl border-2 bg-black/30",
-              colors.accent
-            ),
-            children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: stats.map((stat, index) => {
-              let displayValue = stat.value ?? 0;
-              if (stat.format === "time" && typeof displayValue === "number") {
-                displayValue = formatTime(displayValue);
-              }
-              return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("div", { className: "text-gray-400 text-sm mb-1", children: stat.label }),
-                /* @__PURE__ */ jsxs("div", { className: "text-white text-2xl font-bold flex items-center justify-center gap-2", children: [
-                  stat.icon && /* @__PURE__ */ jsx("span", { children: stat.icon }),
-                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: displayValue })
-                ] })
-              ] }, index);
-            }) })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row gap-4", children: resolvedActions.map((action, index) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => handleActionClick(action),
-            className: cn(
-              "px-8 py-4 rounded-xl border-2 font-bold text-lg",
-              "transition-all duration-200",
-              "hover:scale-105 active:scale-95",
-              "focus:outline-none focus:ring-4 focus:ring-white/25",
-              buttonVariants[action.variant ?? "secondary"]
-            ),
-            children: action.label
-          },
-          index
-        )) })
-      ]
-    }
-  );
-}
-GameOverScreen.displayName = "GameOverScreen";
-function InventoryPanel({
-  items,
-  slots,
-  columns,
-  selectedSlot,
-  onSelectSlot,
-  onUseItem,
-  onDropItem,
-  selectSlotEvent,
-  useItemEvent,
-  dropItemEvent,
-  showTooltips = true,
-  className,
-  slotSize = 48
-}) {
-  const eventBus = useEventBus();
-  const [hoveredSlot, setHoveredSlot] = useState(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const safeItems = Array.isArray(items) ? items : [];
-  const safeSlots = typeof slots === "number" && slots > 0 ? slots : 0;
-  const safeColumns = typeof columns === "number" && columns > 0 ? columns : 1;
-  const slotArray = Array.from({ length: safeSlots }, (_, index) => {
-    return safeItems[index] ?? null;
-  });
-  const rows = Math.ceil(safeSlots / safeColumns);
-  const handleSlotClick = useCallback((index) => {
-    if (selectSlotEvent) eventBus.emit(`UI:${selectSlotEvent}`, { index });
-    onSelectSlot?.(index);
-  }, [onSelectSlot, selectSlotEvent, eventBus]);
-  const handleSlotDoubleClick = useCallback((index) => {
-    const item = slotArray[index];
-    if (item) {
-      if (useItemEvent) eventBus.emit(`UI:${useItemEvent}`, { item });
-      onUseItem?.(item);
-    }
-  }, [slotArray, onUseItem, useItemEvent, eventBus]);
-  const handleKeyDown = useCallback((e, index) => {
-    const item = slotArray[index];
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        if (item) {
-          e.preventDefault();
-          if (useItemEvent) eventBus.emit(`UI:${useItemEvent}`, { item });
-          onUseItem?.(item);
-        }
-        break;
-      case "Delete":
-      case "Backspace":
-        if (item) {
-          e.preventDefault();
-          if (dropItemEvent) eventBus.emit(`UI:${dropItemEvent}`, { item });
-          onDropItem?.(item);
-        }
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        onSelectSlot?.(Math.min(index + 1, safeSlots - 1));
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        onSelectSlot?.(Math.max(index - 1, 0));
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        onSelectSlot?.(Math.min(index + safeColumns, safeSlots - 1));
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        onSelectSlot?.(Math.max(index - safeColumns, 0));
-        break;
-    }
-  }, [slotArray, onUseItem, onDropItem, onSelectSlot, safeColumns, safeSlots, useItemEvent, dropItemEvent, eventBus]);
-  const handleMouseEnter = useCallback((e, index) => {
-    if (showTooltips && slotArray[index]) {
-      setHoveredSlot(index);
-      setTooltipPosition({
-        x: e.clientX + 10,
-        y: e.clientY + 10
-      });
-    }
-  }, [showTooltips, slotArray]);
-  const handleMouseLeave = useCallback(() => {
-    setHoveredSlot(null);
-  }, []);
-  const hoveredItem = hoveredSlot !== null ? slotArray[hoveredSlot] : null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "grid gap-1 bg-gray-900 p-2 rounded-lg border border-gray-700",
-        style: {
-          gridTemplateColumns: `repeat(${safeColumns}, ${slotSize}px)`,
-          gridTemplateRows: `repeat(${rows}, ${slotSize}px)`
-        },
-        children: slotArray.map((item, index) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "relative flex items-center justify-center",
-              "bg-gray-800 border rounded transition-colors",
-              "hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500",
-              selectedSlot === index ? "border-yellow-400 bg-gray-700" : "border-gray-600"
-            ),
-            style: { width: slotSize, height: slotSize },
-            onClick: () => handleSlotClick(index),
-            onDoubleClick: () => handleSlotDoubleClick(index),
-            onKeyDown: (e) => handleKeyDown(e, index),
-            onMouseEnter: (e) => handleMouseEnter(e, index),
-            onMouseLeave: handleMouseLeave,
-            tabIndex: 0,
-            "aria-label": item ? `${item.name || item.type}, quantity: ${item.quantity}` : `Empty slot ${index + 1}`,
-            children: item && /* @__PURE__ */ jsxs(Fragment, { children: [
-              item.sprite ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: item.sprite,
-                  alt: item.name || item.type,
-                  className: "w-8 h-8 object-contain",
-                  style: { imageRendering: "pixelated" }
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-gray-600 rounded flex items-center justify-center text-xs text-gray-300", children: item.type.charAt(0).toUpperCase() }),
-              item.quantity > 1 && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 bg-black bg-opacity-70 text-white text-xs px-1 rounded-tl", children: item.quantity })
-            ] })
-          },
-          index
-        ))
-      }
-    ),
-    showTooltips && hoveredItem && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "fixed z-50 bg-gray-900 border border-gray-600 rounded-lg p-2 shadow-lg pointer-events-none",
-        style: {
-          left: tooltipPosition.x,
-          top: tooltipPosition.y,
-          maxWidth: 200
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "font-semibold text-white", children: hoveredItem.name || hoveredItem.type }),
-          hoveredItem.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-400 mt-1", children: hoveredItem.description }),
-          /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
-            "Quantity: ",
-            hoveredItem.quantity
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function DialogueBox({
-  dialogue,
-  typewriterSpeed = 30,
-  position = "bottom",
-  onComplete,
-  onChoice,
-  onAdvance,
-  completeEvent,
-  choiceEvent,
-  advanceEvent,
-  className
-}) {
-  const eventBus = useEventBus();
-  const [displayedText, setDisplayedText] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-  const [selectedChoice, setSelectedChoice] = useState(0);
-  const textRef = useRef(dialogue.text);
-  const charIndexRef = useRef(0);
-  const autoAdvanceTimerRef = useRef(null);
+  reset() {
+    this.entities.clear();
+  }
+};
+
+// components/organisms/game/hooks/usePhysics2D.ts
+function usePhysics2D(options = {}) {
+  const physicsManagerRef = useRef(null);
+  const collisionCallbacksRef = useRef(/* @__PURE__ */ new Set());
+  if (!physicsManagerRef.current) {
+    physicsManagerRef.current = new PhysicsManager({
+      gravity: options.gravity,
+      friction: options.friction,
+      airResistance: options.airResistance,
+      maxVelocityY: options.maxVelocityY,
+      groundY: options.groundY
+    });
+  }
+  const manager = physicsManagerRef.current;
   useEffect(() => {
-    textRef.current = dialogue.text;
-    charIndexRef.current = 0;
-    setDisplayedText("");
-    setSelectedChoice(0);
-    if (typewriterSpeed === 0) {
-      setDisplayedText(dialogue.text);
-      setIsTyping(false);
-      if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
-      onComplete?.();
-    } else {
-      setIsTyping(true);
+    if (options.onCollision) {
+      collisionCallbacksRef.current.add(options.onCollision);
     }
     return () => {
-      if (autoAdvanceTimerRef.current) {
-        clearTimeout(autoAdvanceTimerRef.current);
+      if (options.onCollision) {
+        collisionCallbacksRef.current.delete(options.onCollision);
       }
     };
-  }, [dialogue, typewriterSpeed, onComplete]);
-  useEffect(() => {
-    if (!isTyping || typewriterSpeed === 0) return;
-    const interval = setInterval(() => {
-      if (charIndexRef.current < textRef.current.length) {
-        charIndexRef.current++;
-        setDisplayedText(textRef.current.slice(0, charIndexRef.current));
-      } else {
-        setIsTyping(false);
-        clearInterval(interval);
-        if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
-        onComplete?.();
-        if (dialogue.autoAdvance && !dialogue.choices?.length) {
-          autoAdvanceTimerRef.current = setTimeout(() => {
-            if (advanceEvent) eventBus.emit(`UI:${advanceEvent}`, {});
-            onAdvance?.();
-          }, dialogue.autoAdvance);
-        }
-      }
-    }, typewriterSpeed);
-    return () => clearInterval(interval);
-  }, [isTyping, typewriterSpeed, dialogue.autoAdvance, dialogue.choices, onComplete, onAdvance]);
-  const skipTypewriter = useCallback(() => {
-    if (isTyping) {
-      charIndexRef.current = textRef.current.length;
-      setDisplayedText(textRef.current);
-      setIsTyping(false);
-      if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
-      onComplete?.();
-    }
-  }, [isTyping, onComplete, completeEvent, eventBus]);
-  const handleClick = useCallback(() => {
-    if (isTyping) {
-      skipTypewriter();
-    } else if (!dialogue.choices?.length) {
-      if (advanceEvent) eventBus.emit(`UI:${advanceEvent}`, {});
-      onAdvance?.();
-    }
-  }, [isTyping, skipTypewriter, dialogue.choices, onAdvance, advanceEvent, eventBus]);
-  const handleKeyDown = useCallback((e) => {
-    if (isTyping) {
-      if (e.key === " " || e.key === "Enter") {
-        e.preventDefault();
-        skipTypewriter();
-      }
-      return;
-    }
-    if (dialogue.choices?.length) {
-      const enabledChoices2 = dialogue.choices.filter((c) => !c.disabled);
-      switch (e.key) {
-        case "ArrowUp":
-          e.preventDefault();
-          setSelectedChoice((prev) => Math.max(0, prev - 1));
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          setSelectedChoice((prev) => Math.min(enabledChoices2.length - 1, prev + 1));
-          break;
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          const choice = enabledChoices2[selectedChoice];
-          if (choice) {
-            if (choiceEvent) eventBus.emit(`UI:${choiceEvent}`, { choice });
-            onChoice?.(choice);
-          }
-          break;
-        case "1":
-        case "2":
-        case "3":
-        case "4":
-          const choiceIndex = parseInt(e.key) - 1;
-          if (choiceIndex < enabledChoices2.length) {
-            e.preventDefault();
-            if (choiceEvent) eventBus.emit(`UI:${choiceEvent}`, { choice: enabledChoices2[choiceIndex] });
-            onChoice?.(enabledChoices2[choiceIndex]);
-          }
-          break;
-      }
-    } else {
-      if (e.key === " " || e.key === "Enter") {
-        e.preventDefault();
-        if (advanceEvent) eventBus.emit(`UI:${advanceEvent}`, {});
-        onAdvance?.();
-      }
-    }
-  }, [isTyping, skipTypewriter, dialogue.choices, selectedChoice, onChoice, onAdvance, choiceEvent, advanceEvent, eventBus]);
-  const enabledChoices = dialogue.choices?.filter((c) => !c.disabled) ?? [];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "fixed left-0 right-0 z-40",
-        position === "top" ? "top-0" : "bottom-0",
-        className
-      ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      tabIndex: 0,
-      role: "dialog",
-      "aria-label": "Dialogue",
-      children: /* @__PURE__ */ jsx("div", { className: "mx-4 my-4 bg-gray-900 bg-opacity-95 border-2 border-gray-600 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-        dialogue.portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-4 border-r border-gray-700", children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: dialogue.portrait,
-            alt: dialogue.speaker,
-            className: "w-24 h-24 object-contain",
-            style: { imageRendering: "pixelated" }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-yellow-400 font-bold mb-2", children: dialogue.speaker }),
-          /* @__PURE__ */ jsxs("div", { className: "text-white text-lg leading-relaxed min-h-[60px]", children: [
-            displayedText,
-            isTyping && /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "\u258C" })
-          ] }),
-          !isTyping && enabledChoices.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: enabledChoices.map((choice, index) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "block w-full text-left px-4 py-2 rounded transition-colors",
-                "hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400",
-                selectedChoice === index ? "bg-gray-700 text-yellow-400" : "bg-gray-800 text-white"
-              ),
-              onClick: (e) => {
-                e.stopPropagation();
-                if (choiceEvent) eventBus.emit(`UI:${choiceEvent}`, { choice });
-                onChoice?.(choice);
-              },
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-gray-500 mr-2", children: [
-                  index + 1,
-                  "."
-                ] }),
-                choice.text
-              ]
-            },
-            index
-          )) }),
-          !isTyping && !dialogue.choices?.length && /* @__PURE__ */ jsx("div", { className: "mt-4 text-gray-500 text-sm animate-pulse", children: "Press SPACE or click to continue..." })
-        ] })
-      ] }) })
-    }
-  );
+  }, [options.onCollision]);
+  const registerUnit = useCallback((unitId, initialState = {}) => {
+    manager.registerEntity(unitId, initialState);
+  }, [manager]);
+  const unregisterUnit = useCallback((unitId) => {
+    manager.unregisterEntity(unitId);
+  }, [manager]);
+  const getPosition = useCallback((unitId) => {
+    const state = manager.getState(unitId);
+    if (!state) return null;
+    return { x: state.x, y: state.y };
+  }, [manager]);
+  const getState = useCallback((unitId) => {
+    return manager.getState(unitId);
+  }, [manager]);
+  const applyForce = useCallback((unitId, fx, fy) => {
+    manager.applyForce(unitId, fx, fy);
+  }, [manager]);
+  const setVelocity = useCallback((unitId, vx, vy) => {
+    manager.setVelocity(unitId, vx, vy);
+  }, [manager]);
+  const setPosition = useCallback((unitId, x, y) => {
+    manager.setPosition(unitId, x, y);
+  }, [manager]);
+  const tick = useCallback((deltaTime = 16) => {
+    manager.tick(deltaTime);
+  }, [manager]);
+  const checkCollision = useCallback((unitIdA, unitIdB, boundsA, boundsB) => {
+    return manager.checkCollision(unitIdA, unitIdB, boundsA, boundsB);
+  }, [manager]);
+  const resolveCollision = useCallback((unitIdA, unitIdB) => {
+    manager.resolveCollision(unitIdA, unitIdB);
+    collisionCallbacksRef.current.forEach((callback) => {
+      callback(unitIdA, unitIdB);
+    });
+  }, [manager]);
+  const setFrozen = useCallback((unitId, frozen) => {
+    manager.setFrozen(unitId, frozen);
+  }, [manager]);
+  const getAllUnits = useCallback(() => {
+    return manager.getAllEntities();
+  }, [manager]);
+  const reset = useCallback(() => {
+    manager.reset();
+  }, [manager]);
+  return {
+    registerUnit,
+    unregisterUnit,
+    getPosition,
+    getState,
+    applyForce,
+    setVelocity,
+    setPosition,
+    tick,
+    checkCollision,
+    resolveCollision,
+    setFrozen,
+    getAllUnits,
+    reset
+  };
 }
 function BattleBoard({
   entity,
@@ -8316,7 +6650,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -8970,7 +7304,7 @@ function SequenceBar({
     onSlotRemove(index);
   }, [onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -10841,20 +9175,27 @@ function SimulationCanvas({
     bodiesRef.current = structuredClone(preset.bodies);
   }, [preset]);
   const step = useCallback(() => {
-    const dt = 1 / 60 * speed;
+    const dt = Math.min(1 / 60 * speed, 1 / 15);
     const gx = preset.gravity?.x ?? 0;
     const gy = preset.gravity?.y ?? 9.81;
     const bodies = bodiesRef.current;
+    const maxVel = Math.max(width, height) * 5;
     for (const body of bodies) {
       if (body.fixed) continue;
       body.vx += gx * dt;
       body.vy += gy * dt;
+      body.vx = Math.max(-maxVel, Math.min(maxVel, body.vx));
+      body.vy = Math.max(-maxVel, Math.min(maxVel, body.vy));
       body.x += body.vx * dt;
       body.y += body.vy * dt;
       if (body.y + body.radius > height) {
         body.y = height - body.radius;
         body.vy = -body.vy * 0.8;
       }
+      if (body.y - body.radius < 0) {
+        body.y = body.radius;
+        body.vy = -body.vy * 0.8;
+      }
       if (body.x + body.radius > width) {
         body.x = width - body.radius;
         body.vx = -body.vx * 0.8;
@@ -10940,7 +9281,24 @@ function SimulationCanvas({
   useEffect(() => {
     draw();
   }, [draw]);
-  return /* @__PURE__ */ jsx(Box, { className, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width, height, className: "rounded-md" }) });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    return () => {
+      bindCanvasCapture(() => null);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Box, { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      width,
+      height,
+      className: "rounded-md block max-w-full h-auto"
+    }
+  ) });
 }
 SimulationCanvas.displayName = "SimulationCanvas";
 function SimulationControls({
@@ -11060,84 +9418,6 @@ function SimulationGraph({
   ] }) });
 }
 SimulationGraph.displayName = "SimulationGraph";
-var eventIcons = {
-  attack: Sword,
-  defend: Shield,
-  heal: Heart,
-  move: Move,
-  special: Zap,
-  death: Sword,
-  spawn: Zap
-};
-var eventColors = {
-  attack: "text-error",
-  defend: "text-info",
-  heal: "text-success",
-  move: "text-primary",
-  special: "text-warning",
-  death: "text-muted-foreground",
-  spawn: "text-accent"
-};
-var eventBadgeVariants = {
-  attack: "danger",
-  defend: "primary",
-  heal: "success",
-  move: "warning",
-  special: "secondary",
-  death: "secondary",
-  spawn: "secondary"
-};
-function CombatLog({
-  events,
-  maxVisible = 50,
-  autoScroll = true,
-  showTimestamps = false,
-  className,
-  title = "Combat Log"
-}) {
-  const scrollRef = useRef(null);
-  useEffect(() => {
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [events, autoScroll]);
-  const visibleEvents = events.slice(-maxVisible);
-  return /* @__PURE__ */ jsxs(Card, { variant: "default", className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx(Box, { padding: "sm", border: true, className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)]", children: /* @__PURE__ */ jsxs(Box, { display: "flex", className: "items-center justify-between", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-bold", children: title }),
-      /* @__PURE__ */ jsxs(Badge, { variant: "neutral", size: "sm", children: [
-        events.length,
-        " events"
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(Box, { ref: scrollRef, overflow: "auto", className: "flex-1 max-h-64", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx(Box, { padding: "md", className: "text-center opacity-50", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "No events yet" }) }) : /* @__PURE__ */ jsx(Box, { padding: "xs", className: "space-y-1", children: visibleEvents.map((event) => {
-      const EventIcon = eventIcons[event.type];
-      const colorClass = eventColors[event.type];
-      return /* @__PURE__ */ jsxs(
-        Box,
-        {
-          display: "flex",
-          padding: "xs",
-          rounded: "sm",
-          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", event.type === "death" && "opacity-60"),
-          children: [
-            /* @__PURE__ */ jsx(Box, { className: cn("flex-shrink-0 mt-0.5", colorClass), children: /* @__PURE__ */ jsx(EventIcon, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxs(Box, { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "block", children: event.message }),
-              event.value !== void 0 && /* @__PURE__ */ jsxs(Badge, { variant: eventBadgeVariants[event.type], size: "sm", className: "mt-1", children: [
-                event.type === "heal" ? "+" : event.type === "attack" ? "-" : "",
-                event.value
-              ] })
-            ] }),
-            (event.turn || showTimestamps) && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "opacity-40", children: event.turn ? `T${event.turn}` : "" }) })
-          ]
-        },
-        event.id
-      );
-    }) }) })
-  ] });
-}
-CombatLog.displayName = "CombatLog";
 
 // components/organisms/game/types/game.ts
 function createInitialGameState(width, height, units, defaultTerrain = "floorStone") {
@@ -11278,7 +9558,7 @@ function generateCombatMessage(event) {
   return event.message;
 }
 function extractTitle(children) {
-  if (!React__default.isValidElement(children)) return void 0;
+  if (!React.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -11313,7 +9593,7 @@ var ModalSlot = ({
 };
 ModalSlot.displayName = "ModalSlot";
 function extractTitle2(children) {
-  if (!React__default.isValidElement(children)) return void 0;
+  if (!React.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -11350,7 +9630,7 @@ var DrawerSlot = ({
 };
 DrawerSlot.displayName = "DrawerSlot";
 function extractToastProps(children) {
-  if (!React__default.isValidElement(children)) {
+  if (!React.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -11381,7 +9661,7 @@ var ToastSlot = ({
     eventBus.emit("UI:CLOSE");
   };
   if (!isVisible) return null;
-  const isCustomContent = React__default.isValidElement(children) && !message;
+  const isCustomContent = React.isValidElement(children) && !message;
   return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
     Toast,
     {
@@ -11698,209 +9978,6 @@ var Chart = ({
   ] }) });
 };
 Chart.displayName = "Chart";
-var DEFAULT_THRESHOLDS = [
-  { value: 30, color: "var(--color-error)" },
-  { value: 70, color: "var(--color-warning)" },
-  { value: 100, color: "var(--color-success)" }
-];
-function getColorForValue(value, max, thresholds) {
-  const percentage = value / max * 100;
-  for (const threshold of thresholds) {
-    if (percentage <= threshold.value) {
-      return threshold.color;
-    }
-  }
-  return thresholds[thresholds.length - 1]?.color ?? "var(--color-primary)";
-}
-var radialSizes = {
-  sm: { size: 80, stroke: 6, fontSize: "12px" },
-  md: { size: 120, stroke: 8, fontSize: "16px" },
-  lg: { size: 160, stroke: 10, fontSize: "20px" }
-};
-var Meter = ({
-  value,
-  min = 0,
-  max = 100,
-  label,
-  unit,
-  variant = "linear",
-  thresholds = DEFAULT_THRESHOLDS,
-  segments = 5,
-  showValue = true,
-  size = "md",
-  actions,
-  entity,
-  isLoading = false,
-  error,
-  className
-}) => {
-  const eventBus = useEventBus();
-  const handleAction = useCallback(
-    (action) => {
-      if (action.event) {
-        eventBus.emit(`UI:${action.event}`, { value });
-      }
-    },
-    [eventBus, value]
-  );
-  const percentage = useMemo(() => {
-    const range = max - min;
-    if (range <= 0) return 0;
-    return Math.min(Math.max((value - min) / range * 100, 0), 100);
-  }, [value, min, max]);
-  const activeColor = useMemo(
-    () => getColorForValue(value, max, thresholds),
-    [value, max, thresholds]
-  );
-  const displayValue = useMemo(() => {
-    const formatted = Number.isInteger(value) ? value : value.toFixed(1);
-    return unit ? `${formatted}${unit}` : `${formatted}`;
-  }, [value, unit]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(LoadingState, { message: "Loading meter...", className });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(
-      ErrorState,
-      {
-        title: "Meter error",
-        message: error.message,
-        className
-      }
-    );
-  }
-  if (variant === "radial") {
-    const dims = radialSizes[size];
-    const radius = (dims.size - dims.stroke * 2) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference - percentage / 100 * circumference;
-    const center = dims.size / 2;
-    return /* @__PURE__ */ jsx(Card, { className: cn("p-4", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", children: [
-      label && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
-      /* @__PURE__ */ jsxs(Box, { className: "relative inline-flex items-center justify-center", children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            width: dims.size,
-            height: dims.size,
-            viewBox: `0 0 ${dims.size} ${dims.size}`,
-            className: "transform -rotate-90",
-            children: [
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: center,
-                  cy: center,
-                  r: radius,
-                  fill: "none",
-                  stroke: "var(--color-muted)",
-                  strokeWidth: dims.stroke
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: center,
-                  cy: center,
-                  r: radius,
-                  fill: "none",
-                  stroke: activeColor,
-                  strokeWidth: dims.stroke,
-                  strokeDasharray: circumference,
-                  strokeDashoffset: offset,
-                  strokeLinecap: "round",
-                  className: "transition-all duration-500 ease-out"
-                }
-              )
-            ]
-          }
-        ),
-        showValue && /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "h5",
-            weight: "bold",
-            className: "tabular-nums",
-            style: { fontSize: dims.fontSize },
-            children: displayValue
-          }
-        ) })
-      ] }),
-      actions && actions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-        Badge,
-        {
-          variant: "default",
-          className: "cursor-pointer hover:opacity-80 transition-opacity",
-          onClick: () => handleAction(action),
-          children: action.label
-        },
-        idx
-      )) })
-    ] }) });
-  }
-  if (variant === "segmented") {
-    const activeSegments = Math.round(percentage / 100 * segments);
-    return /* @__PURE__ */ jsx(Card, { className: cn("p-4", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
-      (label || showValue) && /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
-        label && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
-        showValue && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "bold", className: "tabular-nums", children: displayValue })
-      ] }),
-      /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "w-full", children: Array.from({ length: segments }).map((_, idx) => {
-        const isActive = idx < activeSegments;
-        const segColor = isActive ? getColorForValue((idx + 1) / segments * max, max, thresholds) : void 0;
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            className: cn(
-              "h-2 flex-1 rounded-[var(--radius-sm)] transition-all duration-300",
-              !isActive && "bg-[var(--color-muted)]"
-            ),
-            style: isActive ? { backgroundColor: segColor } : void 0
-          },
-          idx
-        );
-      }) }),
-      thresholds.some((t) => t.label) && /* @__PURE__ */ jsx(HStack, { justify: "between", className: "w-full", children: thresholds.map((t, idx) => /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: t.label || "" }, idx)) })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(Card, { className: cn("p-4", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
-    (label || showValue) && /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
-      label && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
-      showValue && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "bold", className: "tabular-nums", children: displayValue })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { className: "w-full h-3 bg-[var(--color-muted)] rounded-[var(--radius-full)] overflow-hidden", children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: "h-full rounded-[var(--radius-full)] transition-all duration-500 ease-out",
-        style: {
-          width: `${percentage}%`,
-          backgroundColor: activeColor
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(HStack, { justify: "between", className: "w-full", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
-        min,
-        unit ? ` ${unit}` : ""
-      ] }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
-        max,
-        unit ? ` ${unit}` : ""
-      ] })
-    ] }),
-    actions && actions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-      Badge,
-      {
-        variant: "default",
-        className: "cursor-pointer hover:opacity-80 transition-opacity",
-        onClick: () => handleAction(action),
-        children: action.label
-      },
-      idx
-    )) })
-  ] }) });
-};
-Meter.displayName = "Meter";
 var STATUS_STYLES3 = {
   complete: {
     dotColor: "text-[var(--color-success)]",
@@ -11935,7 +10012,7 @@ var Timeline = ({
 }) => {
   const { t } = useTranslate();
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React__default.useMemo(() => {
+  const items = React.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => {
@@ -12076,7 +10153,7 @@ var MediaGallery = ({
     [selectable, selectedItems, selectionEvent, eventBus]
   );
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React__default.useMemo(() => {
+  const items = React.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => ({
@@ -12647,7 +10724,7 @@ var GraphCanvas = ({
   const handleNodeClick = useCallback(
     (node) => {
       if (nodeClickEvent) {
-        eventBus.emit(`UI:${nodeClickEvent}`, { row: node });
+        eventBus.emit(`UI:${nodeClickEvent}`, { id: node.id, row: node });
       }
       onNodeClick?.(node);
     },
@@ -14064,4 +12141,4 @@ function WorldMapTemplate({
 }
 WorldMapTemplate.displayName = "WorldMapTemplate";
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, ActionPalette, ActionTile, AuthLayout, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, BuilderBoard, CanvasEffect, CastleBoard, CastleTemplate, Chart, ClassifierBoard, CodeView, CodeViewer, CollapsibleSection, CombatLog, ConfirmDialog, ContentRenderer, CounterTemplate, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DebuggerBoard, DialogueBox, DocumentViewer, StateMachineView as DomStateMachineVisualizer, DrawerSlot, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FormActions, FormLayout, FormSection, GameAudioContext, GameAudioProvider, GameAudioToggle, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GraphCanvas, Header, IDENTITY_BOOK_FIELDS, InventoryPanel, IsometricCanvas, JazariStateMachine, List, MediaGallery, Meter, ModalSlot, Navigation, NegotiatorBoard, NotifyListener, ObjectRulePanel, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, PhysicsManager, PlatformerCanvas, RuleEditor, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, Section, SequenceBar, SequencerBoard, Sidebar, SignaturePad, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Split, SplitPane, StateArchitectBoard, StateMachineView, StateNode2 as StateNode, StatusBar, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, TerrainPalette, Timeline, ToastSlot, TraitSlot, TraitStateViewer, TransitionArrow, UncontrolledBattleBoard, VariablePanel, WizardContainer, WorldMapBoard, WorldMapTemplate, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, generateCombatMessage, getCurrentFrame, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, transitionAnimation, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, ActionPalette, ActionTile, AuthLayout, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, BuilderBoard, CanvasEffect, CastleBoard, CastleTemplate, Chart, ClassifierBoard, CodeView, CodeViewer, CollapsibleSection, ConfirmDialog, ContentRenderer, CounterTemplate, DashboardGrid, DashboardLayout, DebuggerBoard, DocumentViewer, StateMachineView as DomStateMachineVisualizer, DrawerSlot, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EventHandlerBoard, EventLog, FEATURE_TYPES, FormActions, FormLayout, FormSection, GameAudioContext, GameAudioProvider, GameAudioToggle, GameShell, GameTemplate, GenericAppTemplate, GraphCanvas, Header, IDENTITY_BOOK_FIELDS, JazariStateMachine, List, MediaGallery, ModalSlot, Navigation, NegotiatorBoard, NotifyListener, ObjectRulePanel, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, PhysicsManager, RuleEditor, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, Section, SequenceBar, SequencerBoard, Sidebar, SignaturePad, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Split, SplitPane, StateArchitectBoard, StateMachineView, StateNode2 as StateNode, StatusBar, TERRAIN_COLORS, TabbedContainer, Table, TerrainPalette, Timeline, ToastSlot, TraitSlot, TraitStateViewer, TransitionArrow, UncontrolledBattleBoard, VariablePanel, WizardContainer, WorldMapBoard, WorldMapTemplate, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, generateCombatMessage, getCurrentFrame, inferDirection, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, springOscillator, tickAnimationState, transitionAnimation, useBattleState, useGameAudio, useGameAudioContext, usePhysics2D, useSpriteAnimations };