@almadar/ui 2.5.2 → 2.7.0

package/dist/components/index.js

@@ -1,20 +1,20 @@
-import { useAuthContext } from '../chunk-2UMN2BLO.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, usePlayer, usePreview, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-2UMN2BLO.js';
+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';
-export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.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-AL6BLHMG.js';
-export { Accordion, ActionButtons, Card2 as ActionCard, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, ChartLegend, Checkbox, CodeBlock, ConditionalWrapper, 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, Input, InputGroup, Label, LawReferenceTooltip, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, ProgressDots, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatBadge, StatCard, StateIndicator, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite } from '../chunk-AL6BLHMG.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-VJP2HCLY.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, Meter, 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, StatDisplay, 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-VJP2HCLY.js';
 import '../chunk-DKQN5FVU.js';
-import { useTranslate } from '../chunk-GOZKH7QW.js';
-export { EntityDataProvider, I18nProvider, createTranslate, entityDataKeys, parseQueryBinding, useEntity, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntitySuspense, useQuerySingleton, useTranslate } from '../chunk-GOZKH7QW.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, updateAssetStatus, bindCanvasCapture } from '../chunk-RPYMP7ZC.js';
+export { cn } from '../chunk-RPYMP7ZC.js';
 import '../chunk-TSETXL2E.js';
-import { cn, getNestedValue } from '../chunk-KKCVDUK7.js';
-export { cn } from '../chunk-KKCVDUK7.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';
@@ -3766,12 +3766,15 @@ function useImageCache(urls) {
         cache.set(url, img);
         loading.delete(url);
         setPendingCount((prev) => Math.max(0, prev - 1));
+        updateAssetStatus(url, "loaded");
       };
       img.onerror = () => {
         if (cancelled) return;
         loading.delete(url);
         setPendingCount((prev) => Math.max(0, prev - 1));
+        updateAssetStatus(url, "failed");
       };
+      updateAssetStatus(url, "pending");
       img.src = url;
     }
     return () => {
@@ -4040,6 +4043,15 @@ function IsometricCanvas({
     return [...new Set(urls.filter(Boolean))];
   }, [sortedTiles, features, units, getTerrainSprite, getFeatureSprite, getUnitSprite, effectSpriteUrls, backgroundImage, assetManifest, resolveManifestUrl]);
   const { getImage } = useImageCache(spriteUrls);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    return () => {
+      bindCanvasCapture(() => null);
+    };
+  }, []);
   const {
     cameraRef,
     targetCameraRef,
@@ -4621,6 +4633,10 @@ function PlatformerCanvas({
   canvasHeight = 400,
   followCamera = true,
   bgColor,
+  playerSprite,
+  tileSprites,
+  backgroundImage,
+  assetBaseUrl = "",
   leftEvent = "MOVE_LEFT",
   rightEvent = "MOVE_RIGHT",
   jumpEvent = "JUMP",
@@ -4631,6 +4647,35 @@ function PlatformerCanvas({
   const canvasRef = useRef(null);
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
+  const imageCache = useRef(/* @__PURE__ */ new Map());
+  const loadImage = useCallback((url) => {
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const cached = imageCache.current.get(fullUrl);
+    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (!cached) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = fullUrl;
+      img.onload = () => {
+        updateAssetStatus(fullUrl, "loaded");
+      };
+      img.onerror = () => {
+        updateAssetStatus(fullUrl, "failed");
+      };
+      imageCache.current.set(fullUrl, img);
+      updateAssetStatus(fullUrl, "pending");
+    }
+    return null;
+  }, [assetBaseUrl]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    return () => {
+      bindCanvasCapture(() => null);
+    };
+  }, []);
   const resolvedPlayer = player ?? {
     x: entity?.x ?? 50,
     y: entity?.y ?? 300,
@@ -4695,7 +4740,10 @@ function PlatformerCanvas({
       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) {
+    const bgImg = backgroundImage ? loadImage(backgroundImage) : null;
+    if (bgImg) {
+      ctx.drawImage(bgImg, 0, 0, canvasWidth, canvasHeight);
+    } else if (bgColor) {
       ctx.fillStyle = bgColor;
       ctx.fillRect(0, 0, canvasWidth, canvasHeight);
     } else {
@@ -4723,58 +4771,86 @@ function PlatformerCanvas({
     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) {
+      const platType = plat.type ?? "ground";
+      const spriteUrl = tileSprites?.[platType];
+      const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
+      if (tileImg) {
+        const tileW = tileImg.naturalWidth;
+        const tileH = tileImg.naturalHeight;
+        const scaleH = plat.height / tileH;
+        const scaledW = tileW * scaleH;
+        for (let tx = 0; tx < plat.width; tx += scaledW) {
+          const drawW = Math.min(scaledW, plat.width - tx);
+          const srcW = drawW / scaleH;
+          ctx.drawImage(tileImg, 0, 0, srcW, tileH, px + tx, py, drawW, plat.height);
+        }
+      } else {
+        const color = PLATFORM_COLORS[platType] ?? 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 (platType === "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 (platType === "goal") {
+          ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
           ctx.beginPath();
-          ctx.moveTo(sx, py);
-          ctx.lineTo(sx + 6, py + plat.height);
-          ctx.stroke();
+          ctx.arc(px + plat.width / 2, py - 10, 8, 0, Math.PI * 2);
+          ctx.fill();
         }
       }
-      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();
+    const playerImg = playerSprite ? loadImage(playerSprite) : null;
+    if (playerImg) {
+      ctx.save();
+      if (!facingRight) {
+        ctx.translate(ppx + pw, ppy);
+        ctx.scale(-1, 1);
+        ctx.drawImage(playerImg, 0, 0, pw, ph);
+      } else {
+        ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+      }
+      ctx.restore();
+    } else {
+      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 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",
@@ -10759,34 +10835,109 @@ function NegotiatorBoard({
   );
 }
 NegotiatorBoard.displayName = "NegotiatorBoard";
+
+// components/organisms/game/physics-sim/presets/mechanics.ts
+var projectileMotion = {
+  id: "mechanics-projectile",
+  name: "Projectile Motion",
+  description: "Launch a ball and observe parabolic trajectory under gravity.",
+  domain: "natural",
+  gravity: { x: 0, y: 9.81 },
+  bodies: [
+    { id: "ball", x: 50, y: 350, vx: 80, vy: -120, mass: 1, radius: 10, color: "#e94560", fixed: false },
+    { id: "ground", x: 300, y: 390, vx: 0, vy: 0, mass: 1e3, radius: 400, color: "#333", fixed: true }
+  ],
+  showVelocity: true,
+  parameters: {
+    angle: { value: 45, min: 0, max: 90, step: 1, label: "Launch angle (deg)" },
+    velocity: { value: 100, min: 10, max: 200, step: 5, label: "Initial velocity (m/s)" },
+    gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
+  }
+};
+var pendulum = {
+  id: "mechanics-pendulum",
+  name: "Simple Pendulum",
+  description: "A mass on a string swinging under gravity.",
+  domain: "natural",
+  gravity: { x: 0, y: 9.81 },
+  bodies: [
+    { id: "pivot", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 5, color: "#888", fixed: true },
+    { id: "bob", x: 400, y: 200, vx: 0, vy: 0, mass: 5, radius: 15, color: "#e94560", fixed: false }
+  ],
+  constraints: [{ bodyA: 0, bodyB: 1, length: 180, stiffness: 1 }],
+  parameters: {
+    length: { value: 180, min: 50, max: 300, step: 10, label: "String length (px)" },
+    mass: { value: 5, min: 1, max: 20, step: 0.5, label: "Mass (kg)" },
+    gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
+  }
+};
+var springOscillator = {
+  id: "mechanics-spring",
+  name: "Spring Oscillator",
+  description: "A mass bouncing on a spring \u2014 simple harmonic motion.",
+  domain: "natural",
+  gravity: { x: 0, y: 0 },
+  bodies: [
+    { id: "anchor", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 8, color: "#888", fixed: true },
+    { id: "mass", x: 300, y: 250, vx: 0, vy: 0, mass: 2, radius: 20, color: "#0f3460", fixed: false }
+  ],
+  constraints: [{ bodyA: 0, bodyB: 1, length: 150, stiffness: 0.5 }],
+  parameters: {
+    stiffness: { value: 0.5, min: 0.1, max: 2, step: 0.05, label: "Spring stiffness (k)" },
+    mass: { value: 2, min: 0.5, max: 10, step: 0.5, label: "Mass (kg)" },
+    damping: { value: 0, min: 0, max: 0.5, step: 0.01, label: "Damping" }
+  }
+};
+
+// components/organisms/game/physics-sim/presets/index.ts
+var ALL_PRESETS = [
+  projectileMotion,
+  pendulum,
+  springOscillator
+];
+function resolvePreset(preset) {
+  if (typeof preset !== "string") return preset;
+  const needle = preset.toLowerCase();
+  return ALL_PRESETS.find(
+    (p2) => p2.id === preset || p2.id.includes(needle) || p2.name.toLowerCase().includes(needle)
+  ) ?? projectileMotion;
+}
 function SimulationCanvas({
-  preset,
+  preset: presetProp,
   width = 600,
   height = 400,
   running,
   speed = 1,
   className
 }) {
+  const preset = useMemo(() => resolvePreset(presetProp), [presetProp]);
   const canvasRef = useRef(null);
   const bodiesRef = useRef(structuredClone(preset.bodies));
   useEffect(() => {
     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;
@@ -10872,7 +11023,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({
@@ -10992,66 +11160,6 @@ function SimulationGraph({
   ] }) });
 }
 SimulationGraph.displayName = "SimulationGraph";
-
-// components/organisms/game/physics-sim/presets/mechanics.ts
-var projectileMotion = {
-  id: "mechanics-projectile",
-  name: "Projectile Motion",
-  description: "Launch a ball and observe parabolic trajectory under gravity.",
-  domain: "natural",
-  gravity: { x: 0, y: 9.81 },
-  bodies: [
-    { id: "ball", x: 50, y: 350, vx: 80, vy: -120, mass: 1, radius: 10, color: "#e94560", fixed: false },
-    { id: "ground", x: 300, y: 390, vx: 0, vy: 0, mass: 1e3, radius: 400, color: "#333", fixed: true }
-  ],
-  showVelocity: true,
-  parameters: {
-    angle: { value: 45, min: 0, max: 90, step: 1, label: "Launch angle (deg)" },
-    velocity: { value: 100, min: 10, max: 200, step: 5, label: "Initial velocity (m/s)" },
-    gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
-  }
-};
-var pendulum = {
-  id: "mechanics-pendulum",
-  name: "Simple Pendulum",
-  description: "A mass on a string swinging under gravity.",
-  domain: "natural",
-  gravity: { x: 0, y: 9.81 },
-  bodies: [
-    { id: "pivot", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 5, color: "#888", fixed: true },
-    { id: "bob", x: 400, y: 200, vx: 0, vy: 0, mass: 5, radius: 15, color: "#e94560", fixed: false }
-  ],
-  constraints: [{ bodyA: 0, bodyB: 1, length: 180, stiffness: 1 }],
-  parameters: {
-    length: { value: 180, min: 50, max: 300, step: 10, label: "String length (px)" },
-    mass: { value: 5, min: 1, max: 20, step: 0.5, label: "Mass (kg)" },
-    gravity: { value: 9.81, min: 0, max: 20, step: 0.1, label: "Gravity (m/s\xB2)" }
-  }
-};
-var springOscillator = {
-  id: "mechanics-spring",
-  name: "Spring Oscillator",
-  description: "A mass bouncing on a spring \u2014 simple harmonic motion.",
-  domain: "natural",
-  gravity: { x: 0, y: 0 },
-  bodies: [
-    { id: "anchor", x: 300, y: 50, vx: 0, vy: 0, mass: 1e3, radius: 8, color: "#888", fixed: true },
-    { id: "mass", x: 300, y: 250, vx: 0, vy: 0, mass: 2, radius: 20, color: "#0f3460", fixed: false }
-  ],
-  constraints: [{ bodyA: 0, bodyB: 1, length: 150, stiffness: 0.5 }],
-  parameters: {
-    stiffness: { value: 0.5, min: 0.1, max: 2, step: 0.05, label: "Spring stiffness (k)" },
-    mass: { value: 2, min: 0.5, max: 10, step: 0.5, label: "Mass (kg)" },
-    damping: { value: 0, min: 0, max: 0.5, step: 0.01, label: "Damping" }
-  }
-};
-
-// components/organisms/game/physics-sim/presets/index.ts
-var ALL_PRESETS = [
-  projectileMotion,
-  pendulum,
-  springOscillator
-];
 var eventIcons = {
   attack: Sword,
   defend: Shield,
@@ -11690,209 +11798,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)]",
@@ -12639,7 +12544,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);
     },
@@ -14056,4 +13961,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, 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, 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 };