@almadar/ui 2.6.0 → 2.7.0

package/dist/components/index.js

@@ -2,16 +2,16 @@ 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, 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-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, updateAssetStatus, bindCanvasCapture } from '../chunk-RPYMP7ZC.js';
+export { cn } from '../chunk-RPYMP7ZC.js';
 import '../chunk-TSETXL2E.js';
 import '../chunk-K2D5D3WK.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
@@ -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",
@@ -10841,20 +10917,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 +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({
@@ -11698,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)]",
@@ -12647,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);
     },
@@ -14064,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 };

package/dist/lib/index.d.ts

@@ -353,6 +353,14 @@ declare function getBridgeHealth(): BridgeHealth | null;
 declare function getSummary(): VerificationSummary;
 declare function getSnapshot(): VerificationSnapshot;
 declare function subscribeToVerification(listener: ChangeListener): () => void;
+/** Asset load status for canvas verification */
+type AssetLoadStatus = "loaded" | "failed" | "pending";
+/** Event bus log entry for verification */
+interface EventLogEntry {
+    type: string;
+    payload?: Record<string, unknown>;
+    timestamp: number;
+}
 /** Exposed on window for Playwright to query */
 interface OrbitalVerificationAPI {
     getSnapshot: () => VerificationSnapshot;
@@ -366,6 +374,14 @@ interface OrbitalVerificationAPI {
     sendEvent?: (event: string, payload?: Record<string, unknown>) => void;
     /** Get current trait state */
     getTraitState?: (traitName: string) => string | undefined;
+    /** Capture a canvas frame as PNG data URL. Registered by game organisms. */
+    captureFrame?: () => string | null;
+    /** Asset load status map. Registered by game organisms. */
+    assetStatus?: Record<string, AssetLoadStatus>;
+    /** Event bus log. Records all emit() calls for verification. */
+    eventLog?: EventLogEntry[];
+    /** Clear the event log. */
+    clearEventLog?: () => void;
 }
 declare global {
     interface Window {
@@ -378,16 +394,31 @@ declare global {
  */
 declare function waitForTransition(event: string, timeoutMs?: number): Promise<TransitionTrace | null>;
 /**
- * Bind the EventBus so automation can send events.
+ * Bind the EventBus so automation can send events and log emissions.
  * Call this during app initialization.
  */
 declare function bindEventBus(eventBus: {
     emit: (type: string, payload?: Record<string, unknown>) => void;
+    onAny?: (listener: (event: {
+        type: string;
+        payload?: Record<string, unknown>;
+    }) => void) => () => void;
 }): void;
 /**
  * Bind a trait state getter so automation can query current states.
  */
 declare function bindTraitStateGetter(getter: (traitName: string) => string | undefined): void;
+/**
+ * Register a canvas frame capture function.
+ * Called by game organisms (IsometricCanvas, PlatformerCanvas, SimulationCanvas)
+ * so the verifier can snapshot canvas content at checkpoints.
+ */
+declare function bindCanvasCapture(captureFn: () => string | null): void;
+/**
+ * Update asset load status for canvas verification.
+ * Game organisms call this when images load or fail.
+ */
+declare function updateAssetStatus(url: string, status: AssetLoadStatus): void;
 declare function clearVerification(): void;
 
 /**
@@ -424,4 +455,4 @@ declare function getNestedValue(obj: Record<string, unknown> | null | undefined,
  */
 declare function formatNestedFieldLabel(path: string): string;
 
-export { ApiError, type BridgeHealth, type CheckStatus, type DebugEvent, type DebugEventType, type EffectTrace, type EntitySnapshot, type EntityState, type GuardContext, type GuardEvaluation, type PersistentEntityInfo, type RuntimeEntity, type TickExecution, type TraitDebugInfo, type TraitGuard, type TraitTransition, type TransitionTrace, type VerificationCheck, type VerificationSnapshot, type VerificationSummary, apiClient, bindEventBus, bindTraitStateGetter, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, clearVerification, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, formatNestedFieldLabel, getAllChecks, getAllTicks, getAllTraits, getBridgeHealth, getDebugEvents, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getNestedValue, getRecentEvents, getRecentGuardEvaluations, getSnapshot, getSummary, getTick, getTrait, getTransitions, getTransitionsForTrait, initDebugShortcut, isDebugEnabled, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, onDebugToggle, recordGuardEvaluation, recordTransition, registerCheck, registerTick, registerTrait, setDebugEnabled, setEntityProvider, setTickActive, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, subscribeToVerification, toggleDebug, unregisterTick, unregisterTrait, updateBridgeHealth, updateCheck, updateGuardResult, updateTickExecution, updateTraitState, waitForTransition };
+export { ApiError, type AssetLoadStatus, type BridgeHealth, type CheckStatus, type DebugEvent, type DebugEventType, type EffectTrace, type EntitySnapshot, type EntityState, type EventLogEntry, type GuardContext, type GuardEvaluation, type PersistentEntityInfo, type RuntimeEntity, type TickExecution, type TraitDebugInfo, type TraitGuard, type TraitTransition, type TransitionTrace, type VerificationCheck, type VerificationSnapshot, type VerificationSummary, apiClient, bindCanvasCapture, bindEventBus, bindTraitStateGetter, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, clearVerification, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, formatNestedFieldLabel, getAllChecks, getAllTicks, getAllTraits, getBridgeHealth, getDebugEvents, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getNestedValue, getRecentEvents, getRecentGuardEvaluations, getSnapshot, getSummary, getTick, getTrait, getTransitions, getTransitionsForTrait, initDebugShortcut, isDebugEnabled, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, onDebugToggle, recordGuardEvaluation, recordTransition, registerCheck, registerTick, registerTrait, setDebugEnabled, setEntityProvider, setTickActive, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, subscribeToVerification, toggleDebug, unregisterTick, unregisterTrait, updateAssetStatus, updateBridgeHealth, updateCheck, updateGuardResult, updateTickExecution, updateTraitState, waitForTransition };

package/dist/lib/index.js

@@ -1,7 +1,6 @@
 export { DEFAULT_CONFIG, extractOutputsFromTransitions, extractStateMachine, formatGuard, getEffectSummary, parseContentSegments, parseMarkdownWithCodeBlocks, renderStateMachineToDomData, renderStateMachineToSvg } from '../chunk-N6DJVKZ6.js';
 export { ApiError, apiClient } from '../chunk-3HJHHULT.js';
-export { bindEventBus, bindTraitStateGetter, clearVerification, getAllChecks, getBridgeHealth, getSnapshot, getSummary, getTransitions, getTransitionsForTrait, recordTransition, registerCheck, subscribeToVerification, updateBridgeHealth, updateCheck, waitForTransition } from '../chunk-45CTDYBT.js';
-export { cn, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, formatNestedFieldLabel, getNestedValue, isDebugEnabled } from '../chunk-KKCVDUK7.js';
+export { bindCanvasCapture, bindEventBus, bindTraitStateGetter, clearVerification, cn, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, formatNestedFieldLabel, getAllChecks, getBridgeHealth, getNestedValue, getSnapshot, getSummary, getTransitions, getTransitionsForTrait, isDebugEnabled, recordTransition, registerCheck, subscribeToVerification, updateAssetStatus, updateBridgeHealth, updateCheck, waitForTransition } from '../chunk-RPYMP7ZC.js';
 import '../chunk-PKBMQBKP.js';
 
 // lib/debugUtils.ts

package/dist/providers/index.js

@@ -1,12 +1,11 @@
-import { SuspenseConfigProvider } from '../chunk-LEWQP2UP.js';
+import { SuspenseConfigProvider } from '../chunk-VJP2HCLY.js';
 import { ThemeProvider } from '../chunk-DKQN5FVU.js';
 import { SelectionProvider, EntityDataProvider } from '../chunk-WGJIL4YR.js';
 export { SelectionContext, SelectionProvider, useSelection, useSelectionOptional } from '../chunk-WGJIL4YR.js';
 import { useEventBus, EventBusProvider } from '../chunk-YXZM3WCF.js';
 export { EventBusContext, EventBusProvider } from '../chunk-YXZM3WCF.js';
 import '../chunk-3JGAROCW.js';
-import { recordTransition, registerCheck, bindEventBus, bindTraitStateGetter } from '../chunk-45CTDYBT.js';
-import '../chunk-KKCVDUK7.js';
+import { recordTransition, registerCheck, bindEventBus, bindTraitStateGetter } from '../chunk-RPYMP7ZC.js';
 import '../chunk-TSETXL2E.js';
 import { useOfflineExecutor } from '../chunk-K2D5D3WK.js';
 import '../chunk-PKBMQBKP.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",