@almadar/ui 2.9.4 → 2.11.0

package/dist/components/index.js

@@ -1,23 +1,24 @@
-import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments } from '../chunk-N6DJVKZ6.js';
+import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments, isDebugEnabled, onDebugToggle, subscribeToTraitChanges, subscribeToTickChanges, subscribeToGuardChanges, subscribeToDebugEvents, getEntitySnapshot, getDebugEvents, getGuardHistory, getAllTicks, getAllTraits } from '../chunk-3E73CE7J.js';
 import { useAuthContext } from '../chunk-GTIAVPI5.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-GTIAVPI5.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.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, isoToScreen, IsometricCanvas_default, Stack, Select, Drawer, Toast, Tabs, Input, ThemeToggle, TILE_WIDTH, EntityDisplayEvents, StateIndicator, Container } from '../chunk-P6NZVIE5.js';
-export { Accordion, ActionButton, ActionButtons, Card2 as ActionCard, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, CanvasEffect, 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-P6NZVIE5.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, Accordion, ButtonGroup, Container } from '../chunk-7M2KEJTF.js';
+export { ALL_PRESETS, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, Chart, 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, SimulationCanvas, SimulationControls, SimulationGraph, 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, pendulum, projectileMotion, screenToIso, springOscillator, useCamera, useImageCache } from '../chunk-7M2KEJTF.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, bindCanvasCapture } from '../chunk-6D5QMEUS.js';
-export { cn } from '../chunk-6D5QMEUS.js';
 import '../chunk-TSETXL2E.js';
+import { cn, getNestedValue, subscribeToVerification, getSummary, getBridgeHealth, getTransitions, getAllChecks } from '../chunk-6D5QMEUS.js';
+export { cn } from '../chunk-6D5QMEUS.js';
 import '../chunk-K2D5D3WK.js';
 import { __publicField } from '../chunk-PKBMQBKP.js';
-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 * as React44 from 'react';
+import React44__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, AlertCircle, Circle, Clock, CheckCircle2, Image as Image$1, Upload, ZoomIn, Eraser, FileText, ZoomOut, Download, Code, WrapText, Copy, Settings, Search, Bell, LogOut, Pause, 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';
@@ -32,7 +33,7 @@ var FormSection = ({
   columns = 1,
   className
 }) => {
-  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React44__default.useState(defaultCollapsed);
   const { t } = useTranslate();
   const eventBus = useEventBus();
   const gridClass = {
@@ -40,7 +41,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.useCallback(() => {
+  React44__default.useCallback(() => {
     if (collapsible) {
       setCollapsed((prev) => !prev);
       eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -415,7 +416,7 @@ var Section = ({
 };
 Section.displayName = "Section";
 var SidebarNavItem = ({ item, collapsed }) => {
-  const Icon3 = item.icon;
+  const Icon2 = item.icon;
   const isActive = item.active ?? item.isActive;
   return /* @__PURE__ */ jsxs(
     Button,
@@ -437,8 +438,8 @@ var SidebarNavItem = ({ item, collapsed }) => {
       ),
       title: collapsed ? item.label : void 0,
       children: [
-        Icon3 && /* @__PURE__ */ jsx(
-          Icon3,
+        Icon2 && /* @__PURE__ */ jsx(
+          Icon2,
           {
             size: 20,
             className: cn(
@@ -1012,7 +1013,7 @@ var List = ({
     if (entity && typeof entity === "object" && "id" in entity) return [entity];
     return [];
   }, [entity]);
-  const getItemActions = React.useCallback(
+  const getItemActions = React44__default.useCallback(
     (item) => {
       if (!itemActions) return [];
       if (typeof itemActions === "function") {
@@ -1517,7 +1518,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.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React44__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -2741,7 +2742,7 @@ var StateMachineView = ({
             style: { top: title ? 30 : 0 },
             children: [
               entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React44__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                 StateNode,
                 {
                   state,
@@ -5410,7 +5411,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.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React44__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -5828,7 +5829,7 @@ var FEATURE_TYPES = [
   "castle"
 ];
 function CollapsibleSection({ title, expanded, onToggle, children, className }) {
-  const Icon3 = expanded ? ChevronDown : ChevronRight;
+  const Icon2 = expanded ? ChevronDown : ChevronRight;
   return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className, children: [
     /* @__PURE__ */ jsx(
       Button,
@@ -5838,7 +5839,7 @@ function CollapsibleSection({ title, expanded, onToggle, children, className })
         onClick: onToggle,
         className: "w-full justify-start text-left",
         children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-          /* @__PURE__ */ jsx(Icon3, { size: 14 }),
+          /* @__PURE__ */ jsx(Icon2, { size: 14 }),
           /* @__PURE__ */ jsx(Typography, { variant: "label", weight: "semibold", children: title })
         ] })
       }
@@ -6064,7 +6065,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.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React44__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -7854,331 +7855,6 @@ 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(
-    (p) => p.id === preset || p.id.includes(needle) || p.name.toLowerCase().includes(needle)
-  ) ?? projectileMotion;
-}
-function SimulationCanvas({
-  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 = 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;
-      }
-      if (body.x - body.radius < 0) {
-        body.x = body.radius;
-        body.vx = -body.vx * 0.8;
-      }
-    }
-    if (preset.constraints) {
-      for (const c of preset.constraints) {
-        const a = bodies[c.bodyA];
-        const b = bodies[c.bodyB];
-        if (!a || !b) continue;
-        const dx = b.x - a.x;
-        const dy = b.y - a.y;
-        const dist = Math.sqrt(dx * dx + dy * dy) || 1e-3;
-        const diff = (dist - c.length) / dist;
-        const fx = dx * diff * c.stiffness;
-        const fy = dy * diff * c.stiffness;
-        if (!a.fixed) {
-          a.vx += fx * dt;
-          a.vy += fy * dt;
-        }
-        if (!b.fixed) {
-          b.vx -= fx * dt;
-          b.vy -= fy * dt;
-        }
-      }
-    }
-  }, [preset, width, height, speed]);
-  const draw = useCallback(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const bodies = bodiesRef.current;
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = preset.backgroundColor ?? "#1a1a2e";
-    ctx.fillRect(0, 0, width, height);
-    if (preset.constraints) {
-      for (const c of preset.constraints) {
-        const a = bodies[c.bodyA];
-        const b = bodies[c.bodyB];
-        if (a && b) {
-          ctx.beginPath();
-          ctx.moveTo(a.x, a.y);
-          ctx.lineTo(b.x, b.y);
-          ctx.strokeStyle = "#533483";
-          ctx.lineWidth = 1;
-          ctx.setLineDash([4, 4]);
-          ctx.stroke();
-          ctx.setLineDash([]);
-        }
-      }
-    }
-    for (const body of bodies) {
-      ctx.beginPath();
-      ctx.arc(body.x, body.y, body.radius, 0, Math.PI * 2);
-      ctx.fillStyle = body.color ?? "#e94560";
-      ctx.fill();
-      if (preset.showVelocity) {
-        ctx.beginPath();
-        ctx.moveTo(body.x, body.y);
-        ctx.lineTo(body.x + body.vx * 0.1, body.y + body.vy * 0.1);
-        ctx.strokeStyle = "#16213e";
-        ctx.lineWidth = 2;
-        ctx.stroke();
-      }
-    }
-  }, [width, height, preset]);
-  useEffect(() => {
-    if (!running) return;
-    let raf;
-    const loop = () => {
-      step();
-      draw();
-      raf = requestAnimationFrame(loop);
-    };
-    raf = requestAnimationFrame(loop);
-    return () => cancelAnimationFrame(raf);
-  }, [running, step, draw]);
-  useEffect(() => {
-    draw();
-  }, [draw]);
-  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({
-  running,
-  speed,
-  parameters,
-  onPlay,
-  onPause,
-  onStep,
-  onReset,
-  onSpeedChange,
-  onParameterChange,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(VStack, { gap: "md", className, children: [
-    /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
-      running ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onPause, icon: Pause, children: "Pause" }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", onClick: onPlay, icon: Play, children: "Play" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onStep, icon: SkipForward, disabled: running, children: "Step" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onReset, icon: RotateCcw, children: "Reset" })
-    ] }),
-    /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
-        "Speed: ",
-        speed.toFixed(1),
-        "x"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: 0.1,
-          max: 5,
-          step: 0.1,
-          value: speed,
-          onChange: (e) => onSpeedChange(parseFloat(e.target.value)),
-          className: "w-full"
-        }
-      )
-    ] }),
-    Object.entries(parameters).map(([name, param]) => /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
-        param.label,
-        ": ",
-        param.value.toFixed(2)
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: param.min,
-          max: param.max,
-          step: param.step,
-          value: param.value,
-          onChange: (e) => onParameterChange(name, parseFloat(e.target.value)),
-          className: "w-full"
-        }
-      )
-    ] }, name))
-  ] });
-}
-SimulationControls.displayName = "SimulationControls";
-function SimulationGraph({
-  label,
-  unit,
-  data,
-  maxPoints = 200,
-  width = 300,
-  height = 120,
-  color = "#e94560",
-  className
-}) {
-  const canvasRef = useRef(null);
-  const visibleData = data.slice(-maxPoints);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || visibleData.length < 2) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = "#0f0f23";
-    ctx.fillRect(0, 0, width, height);
-    ctx.strokeStyle = "#1a1a3e";
-    ctx.lineWidth = 0.5;
-    for (let i = 0; i < 5; i++) {
-      const y = height / 5 * i;
-      ctx.beginPath();
-      ctx.moveTo(0, y);
-      ctx.lineTo(width, y);
-      ctx.stroke();
-    }
-    let minVal = Infinity;
-    let maxVal = -Infinity;
-    for (const pt of visibleData) {
-      if (pt.value < minVal) minVal = pt.value;
-      if (pt.value > maxVal) maxVal = pt.value;
-    }
-    const range = maxVal - minVal || 1;
-    const pad = height * 0.1;
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    for (let i = 0; i < visibleData.length; i++) {
-      const x = i / (maxPoints - 1) * width;
-      const y = pad + (maxVal - visibleData[i].value) / range * (height - 2 * pad);
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-    ctx.stroke();
-    const last = visibleData[visibleData.length - 1];
-    ctx.fillStyle = color;
-    ctx.font = "12px monospace";
-    ctx.fillText(`${last.value.toFixed(2)} ${unit}`, width - 80, 16);
-  }, [visibleData, width, height, color, unit, maxPoints]);
-  return /* @__PURE__ */ jsx(Card, { padding: "sm", className, children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "bold", children: label }),
-    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width, height, className: "rounded" })
-  ] }) });
-}
-SimulationGraph.displayName = "SimulationGraph";
-
 // components/organisms/game/types/game.ts
 function createInitialGameState(width, height, units, defaultTerrain = "floorStone") {
   const board = Array.from(
@@ -8318,7 +7994,7 @@ function generateCombatMessage(event) {
   return event.message;
 }
 function extractTitle(children) {
-  if (!React.isValidElement(children)) return void 0;
+  if (!React44__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -8353,7 +8029,7 @@ var ModalSlot = ({
 };
 ModalSlot.displayName = "ModalSlot";
 function extractTitle2(children) {
-  if (!React.isValidElement(children)) return void 0;
+  if (!React44__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -8390,7 +8066,7 @@ var DrawerSlot = ({
 };
 DrawerSlot.displayName = "DrawerSlot";
 function extractToastProps(children) {
-  if (!React.isValidElement(children)) {
+  if (!React44__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -8421,7 +8097,7 @@ var ToastSlot = ({
     eventBus.emit("UI:CLOSE");
   };
   if (!isVisible) return null;
-  const isCustomContent = React.isValidElement(children) && !message;
+  const isCustomContent = React44__default.isValidElement(children) && !message;
   return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
     Toast,
     {
@@ -8484,260 +8160,6 @@ function NotifyListener() {
   );
 }
 NotifyListener.displayName = "NotifyListener";
-var CHART_COLORS = [
-  "var(--color-primary)",
-  "var(--color-success)",
-  "var(--color-warning)",
-  "var(--color-error)",
-  "var(--color-info)",
-  "var(--color-accent)"
-];
-var BarChart = ({ data, height, showValues }) => {
-  const maxValue = Math.max(...data.map((d) => d.value), 1);
-  return /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "end", className: "w-full", style: { height }, children: data.map((point, idx) => {
-    const barHeight = point.value / maxValue * 100;
-    const color = point.color || CHART_COLORS[idx % CHART_COLORS.length];
-    return /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "center", flex: true, className: "min-w-0", children: [
-      showValues && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: point.value }),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: cn(
-            "w-full rounded-t-[var(--radius-sm)] transition-all duration-500 ease-out min-h-[4px]"
-          ),
-          style: {
-            height: `${barHeight}%`,
-            backgroundColor: color
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "caption",
-          color: "secondary",
-          className: "truncate w-full text-center",
-          children: point.label
-        }
-      )
-    ] }, point.label);
-  }) });
-};
-var PieChart = ({ data, height, showValues, donut = false }) => {
-  const total = data.reduce((sum, d) => sum + d.value, 0);
-  const size = Math.min(height, 200);
-  const radius = size / 2 - 8;
-  const innerRadius = donut ? radius * 0.6 : 0;
-  const center = size / 2;
-  const segments = useMemo(() => {
-    let currentAngle = -Math.PI / 2;
-    return data.map((point, idx) => {
-      const angle = point.value / total * 2 * Math.PI;
-      const startAngle = currentAngle;
-      const endAngle = currentAngle + angle;
-      currentAngle = endAngle;
-      const largeArc = angle > Math.PI ? 1 : 0;
-      const x1 = center + radius * Math.cos(startAngle);
-      const y1 = center + radius * Math.sin(startAngle);
-      const x2 = center + radius * Math.cos(endAngle);
-      const y2 = center + radius * Math.sin(endAngle);
-      let d;
-      if (innerRadius > 0) {
-        const ix1 = center + innerRadius * Math.cos(startAngle);
-        const iy1 = center + innerRadius * Math.sin(startAngle);
-        const ix2 = center + innerRadius * Math.cos(endAngle);
-        const iy2 = center + innerRadius * Math.sin(endAngle);
-        d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
-      } else {
-        d = `M ${center} ${center} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
-      }
-      return {
-        d,
-        color: point.color || CHART_COLORS[idx % CHART_COLORS.length],
-        label: point.label,
-        value: point.value,
-        percentage: (point.value / total * 100).toFixed(1)
-      };
-    });
-  }, [data, total, radius, innerRadius, center]);
-  return /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", justify: "center", className: "w-full", children: [
-    /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-      segments.map((seg, idx) => /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: seg.d,
-          fill: seg.color,
-          stroke: "var(--color-card)",
-          strokeWidth: "2",
-          className: "transition-opacity duration-200 hover:opacity-80"
-        },
-        idx
-      )),
-      donut && /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: center,
-          y: center,
-          textAnchor: "middle",
-          dominantBaseline: "middle",
-          fill: "var(--color-foreground)",
-          fontSize: "14",
-          fontWeight: "bold",
-          children: total
-        }
-      )
-    ] }),
-    showValues && /* @__PURE__ */ jsx(VStack, { gap: "xs", children: segments.map((seg, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: "w-3 h-3 rounded-[var(--radius-sm)] flex-shrink-0",
-          style: { backgroundColor: seg.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "truncate", children: [
-        seg.label,
-        ": ",
-        seg.percentage,
-        "%"
-      ] })
-    ] }, idx)) })
-  ] });
-};
-var LineChart2 = ({ data, height, showValues, fill = false }) => {
-  const maxValue = Math.max(...data.map((d) => d.value), 1);
-  const width = 400;
-  const padding = { top: 20, right: 20, bottom: 30, left: 40 };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
-  const points = useMemo(() => {
-    return data.map((point, idx) => ({
-      x: padding.left + idx / Math.max(data.length - 1, 1) * chartWidth,
-      y: padding.top + chartHeight - point.value / maxValue * chartHeight,
-      ...point
-    }));
-  }, [data, maxValue, chartWidth, chartHeight, padding]);
-  const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-  const areaPath = `${linePath} L ${points[points.length - 1]?.x ?? 0} ${padding.top + chartHeight} L ${padding.left} ${padding.top + chartHeight} Z`;
-  return /* @__PURE__ */ jsxs("svg", { width: "100%", height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((frac) => {
-      const y = padding.top + chartHeight * (1 - frac);
-      return /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: padding.left,
-          y1: y,
-          x2: width - padding.right,
-          y2: y,
-          stroke: "var(--color-border)",
-          strokeDasharray: "4 4",
-          opacity: 0.5
-        },
-        frac
-      );
-    }),
-    fill && /* @__PURE__ */ jsx("path", { d: areaPath, fill: "var(--color-primary)", opacity: 0.1 }),
-    /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: "var(--color-primary)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-    points.map((p, idx) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("circle", { cx: p.x, cy: p.y, r: "4", fill: "var(--color-card)", stroke: "var(--color-primary)", strokeWidth: "2" }),
-      showValues && /* @__PURE__ */ jsx("text", { x: p.x, y: p.y - 10, textAnchor: "middle", fill: "var(--color-foreground)", fontSize: "10", fontWeight: "500", children: p.value }),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: p.x,
-          y: height - 8,
-          textAnchor: "middle",
-          fill: "var(--color-muted-foreground)",
-          fontSize: "9",
-          children: p.label
-        }
-      )
-    ] }, idx))
-  ] });
-};
-var Chart = ({
-  title,
-  subtitle,
-  chartType = "bar",
-  series,
-  data: simpleData,
-  height = 200,
-  showLegend = true,
-  showValues = false,
-  actions,
-  entity,
-  isLoading = false,
-  error,
-  className
-}) => {
-  const eventBus = useEventBus();
-  const { t } = useTranslate();
-  const handleAction = useCallback(
-    (action) => {
-      if (action.event) {
-        eventBus.emit(`UI:${action.event}`, {});
-      }
-    },
-    [eventBus]
-  );
-  const normalizedData = useMemo(() => {
-    if (simpleData) return simpleData;
-    if (series && series.length > 0) return series[0].data;
-    return [];
-  }, [simpleData, series]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(LoadingState, { message: "Loading chart...", className });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(
-      ErrorState,
-      {
-        title: "Chart error",
-        message: error.message,
-        className
-      }
-    );
-  }
-  if (normalizedData.length === 0) {
-    return /* @__PURE__ */ jsx(EmptyState, { title: t("empty.noData"), description: t("empty.noData"), className });
-  }
-  return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
-    (title || subtitle || actions && actions.length > 0) && /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "start", children: [
-      /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-        title && /* @__PURE__ */ jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
-        subtitle && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle })
-      ] }),
-      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
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { className: "w-full", children: [
-      chartType === "bar" && /* @__PURE__ */ jsx(BarChart, { data: normalizedData, height, showValues }),
-      chartType === "line" && /* @__PURE__ */ jsx(LineChart2, { data: normalizedData, height, showValues }),
-      chartType === "area" && /* @__PURE__ */ jsx(LineChart2, { data: normalizedData, height, showValues, fill: true }),
-      chartType === "pie" && /* @__PURE__ */ jsx(PieChart, { data: normalizedData, height, showValues: showLegend }),
-      chartType === "donut" && /* @__PURE__ */ jsx(PieChart, { data: normalizedData, height, showValues: showLegend, donut: true })
-    ] }),
-    showLegend && series && series.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", justify: "center", wrap: true, children: series.map((s, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: "w-3 h-3 rounded-[var(--radius-full)] flex-shrink-0",
-          style: { backgroundColor: s.color || CHART_COLORS[idx % CHART_COLORS.length] }
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: s.name })
-    ] }, idx)) })
-  ] }) });
-};
-Chart.displayName = "Chart";
 var STATUS_STYLES3 = {
   complete: {
     dotColor: "text-[var(--color-success)]",
@@ -8772,7 +8194,7 @@ var Timeline = ({
 }) => {
   const { t } = useTranslate();
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React.useMemo(() => {
+  const items = React44__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => {
@@ -8913,7 +8335,7 @@ var MediaGallery = ({
     [selectable, selectedItems, selectionEvent, eventBus]
   );
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React.useMemo(() => {
+  const items = React44__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => ({
@@ -9980,6 +9402,1076 @@ var CodeViewer = ({
   ] }) });
 };
 CodeViewer.displayName = "CodeViewer";
+function useDebugData() {
+  const [data, setData] = React44.useState(() => ({
+    traits: [],
+    ticks: [],
+    guards: [],
+    events: [],
+    entitySnapshot: null,
+    verification: {
+      checks: [],
+      transitions: [],
+      bridge: null,
+      summary: { totalChecks: 0, passed: 0, failed: 0, warnings: 0, pending: 0 }
+    },
+    lastUpdate: Date.now()
+  }));
+  React44.useEffect(() => {
+    const updateData = () => {
+      setData({
+        traits: getAllTraits(),
+        ticks: getAllTicks(),
+        guards: getGuardHistory(),
+        events: getDebugEvents(),
+        entitySnapshot: getEntitySnapshot(),
+        verification: {
+          checks: getAllChecks(),
+          transitions: getTransitions(),
+          bridge: getBridgeHealth(),
+          summary: getSummary()
+        },
+        lastUpdate: Date.now()
+      });
+    };
+    updateData();
+    const unsubTraits = subscribeToTraitChanges(updateData);
+    const unsubTicks = subscribeToTickChanges(updateData);
+    const unsubGuards = subscribeToGuardChanges(updateData);
+    const unsubEvents = subscribeToDebugEvents(updateData);
+    const unsubVerification = subscribeToVerification(updateData);
+    const pollInterval = setInterval(() => {
+      setData((prev) => ({
+        ...prev,
+        entitySnapshot: getEntitySnapshot(),
+        lastUpdate: Date.now()
+      }));
+    }, 500);
+    return () => {
+      unsubTraits();
+      unsubTicks();
+      unsubGuards();
+      unsubEvents();
+      unsubVerification();
+      clearInterval(pollInterval);
+    };
+  }, []);
+  return data;
+}
+function TraitsTab({ traits }) {
+  if (traits.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No active traits",
+        description: "Traits will appear when components using them are mounted",
+        className: "py-8"
+      }
+    );
+  }
+  const accordionItems = traits.map((trait) => ({
+    id: trait.id,
+    header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-purple-600 dark:text-purple-400", children: trait.name }),
+      /* @__PURE__ */ jsx(Badge, { variant: "success", size: "sm", children: trait.currentState }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: [
+        trait.transitionCount,
+        " transitions"
+      ] })
+    ] }),
+    content: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: "States" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: trait.states.map((state) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: state === trait.currentState ? "success" : "default",
+            size: "sm",
+            children: state
+          },
+          state
+        )) })
+      ] }),
+      trait.transitions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: "Transitions" }),
+        /* @__PURE__ */ jsx(Stack, { gap: "xs", children: trait.transitions.map((t, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono", children: [
+          t.from,
+          " \u2192 ",
+          t.to,
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+            "(",
+            t.event,
+            ")"
+          ] }),
+          t.guard && /* @__PURE__ */ jsxs("span", { className: "text-amber-500", children: [
+            " [",
+            t.guard,
+            "]"
+          ] })
+        ] }, i)) })
+      ] }),
+      trait.guards.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: "Guards" }),
+        /* @__PURE__ */ jsx(Stack, { gap: "xs", children: trait.guards.map((g, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "small", children: g.name }),
+          /* @__PURE__ */ jsx(Badge, { variant: g.lastResult === true ? "success" : g.lastResult === false ? "danger" : "default", size: "sm", children: g.lastResult === void 0 ? "?" : g.lastResult ? "\u2713" : "\u2717" })
+        ] }, i)) })
+      ] })
+    ] })
+  }));
+  return /* @__PURE__ */ jsx("div", { className: "debug-tab debug-tab--traits", children: /* @__PURE__ */ jsx(Accordion, { items: accordionItems, multiple: true }) });
+}
+TraitsTab.displayName = "TraitsTab";
+function TicksTab({ ticks }) {
+  const activeTicks = ticks.filter((t) => t.active);
+  const inactiveTicks = ticks.filter((t) => !t.active);
+  if (ticks.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No ticks registered",
+        description: "Ticks will appear when trait tick handlers are running",
+        className: "py-8"
+      }
+    );
+  }
+  const formatTime = (ms) => {
+    if (ms === 0) return "never";
+    const seconds = Math.floor((Date.now() - ms) / 1e3);
+    if (seconds < 1) return "just now";
+    if (seconds < 60) return `${seconds}s ago`;
+    return `${Math.floor(seconds / 60)}m ago`;
+  };
+  const TickCard = ({ tick, active }) => /* @__PURE__ */ jsxs(Card, { className: `p-3 ${!active ? "opacity-50" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-green-500" : "bg-gray-400"}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: tick.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: tick.traitName })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        tick.interval,
+        "ms"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        tick.runCount,
+        " runs"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        tick.executionTime.toFixed(1),
+        "ms exec"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: formatTime(tick.lastRun) })
+    ] }),
+    tick.guardName && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs(Badge, { variant: tick.guardPassed ? "success" : "danger", size: "sm", children: [
+      tick.guardName,
+      ": ",
+      tick.guardPassed ? "\u2713" : "\u2717"
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--ticks", children: [
+    activeTicks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: [
+        "Active (",
+        activeTicks.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { gap: "sm", children: activeTicks.map((tick) => /* @__PURE__ */ jsx(TickCard, { tick, active: true }, tick.id)) })
+    ] }),
+    inactiveTicks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-400 mb-2", children: [
+        "Inactive (",
+        inactiveTicks.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { gap: "sm", children: inactiveTicks.map((tick) => /* @__PURE__ */ jsx(TickCard, { tick, active: false }, tick.id)) })
+    ] })
+  ] });
+}
+TicksTab.displayName = "TicksTab";
+function EntitiesTab({ snapshot }) {
+  if (!snapshot) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No entity data",
+        description: "Debug mode may not be enabled",
+        className: "py-8"
+      }
+    );
+  }
+  const singletonEntries = Object.entries(snapshot.singletons);
+  const runtimeEntities = snapshot.runtime;
+  const persistentEntries = Object.entries(snapshot.persistent);
+  if (singletonEntries.length === 0 && runtimeEntities.length === 0 && persistentEntries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No entities",
+        description: "Entities will appear when spawned",
+        className: "py-8"
+      }
+    );
+  }
+  const singletonItems = singletonEntries.map(([name, data]) => ({
+    id: `singleton-${name}`,
+    header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: "Singleton" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: name })
+    ] }),
+    content: /* @__PURE__ */ jsx("pre", { className: "text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(data, null, 2) })
+  }));
+  const runtimeItems = runtimeEntities.slice(0, 20).map((entity) => ({
+    id: entity.id,
+    header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: entity.type }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500", children: [
+        "#",
+        entity.id.slice(0, 8)
+      ] })
+    ] }),
+    content: /* @__PURE__ */ jsx("pre", { className: "text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(entity.data, null, 2) })
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--entities", children: [
+    singletonItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: [
+        "Singletons (",
+        singletonItems.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Accordion, { items: singletonItems, multiple: true })
+    ] }),
+    runtimeItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: [
+        "Runtime (",
+        runtimeEntities.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Accordion, { items: runtimeItems, multiple: true }),
+      runtimeEntities.length > 20 && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400 text-center mt-2", children: [
+        "+",
+        runtimeEntities.length - 20,
+        " more entities"
+      ] })
+    ] }),
+    persistentEntries.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: "Persistent" }),
+      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: persistentEntries.map(([type, info]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", children: type }),
+        /* @__PURE__ */ jsx(Badge, { variant: info.loaded ? "success" : "default", size: "sm", children: info.loaded ? `${info.count} loaded` : "not loaded" })
+      ] }, type)) })
+    ] })
+  ] });
+}
+EntitiesTab.displayName = "EntitiesTab";
+var TYPE_BADGES = {
+  trait: { variant: "primary", icon: "\u{1F504}" },
+  tick: { variant: "warning", icon: "\u23F1\uFE0F" },
+  guard: { variant: "warning", icon: "\u{1F6E1}\uFE0F" },
+  entity: { variant: "info", icon: "\u{1F4E6}" },
+  event: { variant: "success", icon: "\u26A1" },
+  state: { variant: "danger", icon: "\u{1F4CA}" }
+};
+function EventFlowTab({ events }) {
+  const [filter, setFilter] = React44.useState("all");
+  const containerRef = React44.useRef(null);
+  const [autoScroll, setAutoScroll] = React44.useState(true);
+  React44.useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [events.length, autoScroll]);
+  const filteredEvents = React44.useMemo(() => {
+    if (filter === "all") return events;
+    return events.filter((e) => e.type === filter);
+  }, [events, filter]);
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }) + "." + String(date.getMilliseconds()).padStart(3, "0");
+  };
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No events yet",
+        description: "Events will appear as traits, ticks, and other systems execute",
+        className: "py-8"
+      }
+    );
+  }
+  const eventTypes = Object.keys(TYPE_BADGES).filter(
+    (type) => events.some((e) => e.type === type)
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--events", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3 flex-wrap", children: [
+      /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: filter === "all" ? "primary" : "secondary",
+            onClick: () => setFilter("all"),
+            children: [
+              "All (",
+              events.length,
+              ")"
+            ]
+          }
+        ),
+        eventTypes.map((type) => {
+          const count = events.filter((e) => e.type === type).length;
+          const { icon } = TYPE_BADGES[type];
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              variant: filter === type ? "primary" : "secondary",
+              onClick: () => setFilter(type),
+              children: [
+                icon,
+                " ",
+                count
+              ]
+            },
+            type
+          );
+        })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 ml-auto cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: autoScroll,
+            onChange: (e) => setAutoScroll(e.target.checked)
+          }
+        ),
+        "Auto-scroll"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "max-h-64 overflow-y-auto space-y-1 bg-gray-50 dark:bg-gray-800 rounded p-2",
+        children: filteredEvents.slice(-100).map((event) => {
+          const { variant, icon } = TYPE_BADGES[event.type] || { variant: "default", icon: "\u2022" };
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-start gap-2 text-xs py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded px-1",
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime(event.timestamp) }),
+                /* @__PURE__ */ jsx("span", { children: icon }),
+                /* @__PURE__ */ jsx(Badge, { variant, size: "sm", className: "min-w-[60px] justify-center", children: event.source }),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-600 dark:text-gray-400", children: event.message })
+              ]
+            },
+            event.id
+          );
+        })
+      }
+    )
+  ] });
+}
+EventFlowTab.displayName = "EventFlowTab";
+function GuardsPanel({ guards }) {
+  const [filter, setFilter] = React44.useState("all");
+  if (guards.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No guard evaluations",
+        description: "Guard evaluations will appear when transitions or ticks with guards execute",
+        className: "py-8"
+      }
+    );
+  }
+  const passedCount = guards.filter((g) => g.result).length;
+  const failedCount = guards.length - passedCount;
+  const filteredGuards = React44.useMemo(() => {
+    if (filter === "all") return guards;
+    if (filter === "passed") return guards.filter((g) => g.result);
+    return guards.filter((g) => !g.result);
+  }, [guards, filter]);
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  };
+  const accordionItems = filteredGuards.slice(-50).reverse().map((guard) => ({
+    id: guard.id,
+    header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: guard.result ? "success" : "danger", size: "sm", children: guard.result ? "\u2713" : "\u2717" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: guard.guardName }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: formatTime(guard.timestamp) })
+    ] }),
+    content: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: "Expression" }),
+        /* @__PURE__ */ jsx("code", { className: "block mt-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded", children: guard.expression })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: "Inputs" }),
+        /* @__PURE__ */ jsx("pre", { className: "mt-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-24", children: JSON.stringify(guard.inputs, null, 2) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: "Trait" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", children: guard.context.traitName })
+      ] })
+    ] })
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--guards", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
+          "\u2713 ",
+          passedCount
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "danger", size: "sm", children: [
+          "\u2717 ",
+          failedCount
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: filter === "all" ? "primary" : "secondary", onClick: () => setFilter("all"), children: "All" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: filter === "passed" ? "primary" : "secondary", onClick: () => setFilter("passed"), children: "Passed" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: filter === "failed" ? "primary" : "secondary", onClick: () => setFilter("failed"), children: "Failed" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: /* @__PURE__ */ jsx(Accordion, { items: accordionItems }) })
+  ] });
+}
+GuardsPanel.displayName = "GuardsPanel";
+var STATUS_CONFIG = {
+  pass: { variant: "success", icon: "\u2713", label: "PASS" },
+  fail: { variant: "danger", icon: "\u2717", label: "FAIL" },
+  warn: { variant: "warning", icon: "!", label: "WARN" },
+  pending: { variant: "default", icon: "?", label: "PENDING" }
+};
+function VerificationTab({ checks, summary }) {
+  if (checks.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No verification checks yet",
+        description: "Checks will appear as the app executes transitions and effects",
+        className: "py-8"
+      }
+    );
+  }
+  const sortOrder = { fail: 0, warn: 1, pending: 2, pass: 3 };
+  const sorted = [...checks].sort(
+    (a, b) => (sortOrder[a.status] ?? 4) - (sortOrder[b.status] ?? 4)
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--verification", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-gray-50 dark:bg-gray-800 rounded", children: [
+      /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
+        summary.passed,
+        " passed"
+      ] }),
+      summary.failed > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "danger", size: "sm", children: [
+        summary.failed,
+        " failed"
+      ] }),
+      summary.warnings > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "warning", size: "sm", children: [
+        summary.warnings,
+        " warnings"
+      ] }),
+      summary.pending > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "default", size: "sm", children: [
+        summary.pending,
+        " pending"
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: [
+        summary.totalChecks,
+        " total checks"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto space-y-1", children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: sorted.map((check) => {
+      const config = STATUS_CONFIG[check.status] || STATUS_CONFIG.pending;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800",
+          children: [
+            /* @__PURE__ */ jsx(Badge, { variant: config.variant, size: "sm", className: "min-w-[20px] justify-center mt-0.5", children: config.icon }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: check.label }),
+              check.details && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 break-words", children: check.details })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono text-[10px] shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
+              hour12: false,
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit"
+            }) })
+          ]
+        },
+        check.id
+      );
+    }) }) })
+  ] });
+}
+VerificationTab.displayName = "VerificationTab";
+var EFFECT_STATUS_VARIANT = {
+  executed: "success",
+  failed: "danger",
+  skipped: "warning"
+};
+function EffectBadge({ effect }) {
+  const variant = EFFECT_STATUS_VARIANT[effect.status] || "default";
+  const icon = effect.status === "executed" ? "\u2713" : effect.status === "failed" ? "\u2717" : "-";
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] font-mono bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5", children: [
+    /* @__PURE__ */ jsx(Badge, { variant, size: "sm", className: "!text-[9px] !px-1 !py-0", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: effect.type }),
+    effect.error && /* @__PURE__ */ jsx("span", { className: "text-red-500 truncate max-w-[120px]", title: effect.error, children: effect.error })
+  ] });
+}
+function TransitionTimeline({ transitions }) {
+  const containerRef = React44.useRef(null);
+  const [autoScroll, setAutoScroll] = React44.useState(true);
+  const [expandedId, setExpandedId] = React44.useState(null);
+  React44.useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [transitions.length, autoScroll]);
+  if (transitions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No transitions recorded",
+        description: "Transitions will appear as the state machine processes events",
+        className: "py-8"
+      }
+    );
+  }
+  const formatTime = (ts) => {
+    const d = new Date(ts);
+    return d.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }) + "." + String(d.getMilliseconds()).padStart(3, "0");
+  };
+  const sorted = [...transitions].reverse();
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--timeline", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500", children: [
+        transitions.length,
+        " transitions recorded"
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: autoScroll,
+            onChange: (e) => setAutoScroll(e.target.checked)
+          }
+        ),
+        "Auto-scroll"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "max-h-80 overflow-y-auto space-y-0",
+        children: sorted.map((trace, idx) => {
+          const isExpanded = expandedId === trace.id;
+          const hasFailedEffects = trace.effects.some((e) => e.status === "failed");
+          const allPassed = trace.effects.length > 0 && trace.effects.every((e) => e.status === "executed");
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `
+                                relative pl-6 pb-3 border-l-2 cursor-pointer
+                                hover:bg-gray-50 dark:hover:bg-gray-800 rounded-r
+                                ${hasFailedEffects ? "border-red-300 dark:border-red-700" : "border-gray-200 dark:border-gray-700"}
+                            `,
+              onClick: () => setExpandedId(isExpanded ? null : trace.id),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: `
+                                absolute left-[-5px] top-1 w-2 h-2 rounded-full
+                                ${hasFailedEffects ? "bg-red-500" : allPassed ? "bg-green-500" : "bg-gray-400"}
+                            ` }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs py-1 px-2", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime(trace.timestamp) }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", className: "min-w-[60px] justify-center", children: trace.traitName }),
+                  /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-gray-600 dark:text-gray-400", children: [
+                    trace.from,
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u2192" }),
+                    " ",
+                    trace.to
+                  ] }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: trace.event }),
+                  trace.guardResult !== void 0 && /* @__PURE__ */ jsxs(
+                    Badge,
+                    {
+                      variant: trace.guardResult ? "success" : "danger",
+                      size: "sm",
+                      children: [
+                        "guard: ",
+                        trace.guardResult ? "\u2713" : "\u2717"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: [
+                    trace.effects.length,
+                    " effects"
+                  ] })
+                ] }),
+                isExpanded && trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-2 mt-1 mb-2 pl-2 border-l border-gray-200 dark:border-gray-700 space-y-1", children: trace.effects.map((effect, eIdx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(EffectBadge, { effect }),
+                  effect.args.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono text-[10px] truncate max-w-[200px]", children: JSON.stringify(effect.args) }),
+                  effect.durationMs !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400 text-[10px]", children: [
+                    effect.durationMs,
+                    "ms"
+                  ] })
+                ] }, eIdx)) })
+              ]
+            },
+            trace.id
+          );
+        })
+      }
+    )
+  ] });
+}
+TransitionTimeline.displayName = "TransitionTimeline";
+function StatRow({ label, value, variant }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-800 last:border-b-0", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: label }),
+    variant ? /* @__PURE__ */ jsx(Badge, { variant, size: "sm", children: String(value) }) : /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "font-mono", children: String(value) })
+  ] });
+}
+function ServerBridgeTab({ bridge }) {
+  if (!bridge) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No bridge data",
+        description: "The ServerBridge has not been initialized. Bridge health will appear once the runtime connects to the server.",
+        className: "py-8"
+      }
+    );
+  }
+  const formatTime = (ts) => {
+    if (ts === 0) return "Never";
+    const d = new Date(ts);
+    return d.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: "debug-tab debug-tab--bridge", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Card, { className: "p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+        /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-green-500 animate-pulse" : "bg-red-500"}` }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: bridge.connected ? "Connected" : "Disconnected" })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(
+          StatRow,
+          {
+            label: "Status",
+            value: bridge.connected ? "Connected" : "Disconnected",
+            variant: bridge.connected ? "success" : "danger"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StatRow,
+          {
+            label: "Events Forwarded (Client \u2192 Server)",
+            value: bridge.eventsForwarded
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StatRow,
+          {
+            label: "Events Received (Server \u2192 Client)",
+            value: bridge.eventsReceived
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StatRow,
+          {
+            label: "Last Heartbeat",
+            value: formatTime(bridge.lastHeartbeat)
+          }
+        )
+      ] })
+    ] }),
+    bridge.lastError && /* @__PURE__ */ jsxs(Card, { className: "p-3 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "text-red-600 dark:text-red-400 mb-1", children: "Last Error" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-500 font-mono break-all", children: bridge.lastError })
+    ] }),
+    bridge.connected && /* @__PURE__ */ jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+      bridge.eventsForwarded + bridge.eventsReceived,
+      " total events processed"
+    ] }) })
+  ] }) });
+}
+ServerBridgeTab.displayName = "ServerBridgeTab";
+function extractPayloadFields(schema, eventName) {
+  if (!schema) return [];
+  const orbitals = schema.orbitals;
+  if (!orbitals) return [];
+  for (const orbital of orbitals) {
+    const traits = orbital.traits ?? [];
+    for (const trait of traits) {
+      const sm = trait.stateMachine;
+      if (!sm) continue;
+      const events = sm.events ?? [];
+      for (const evt of events) {
+        if (evt.name !== eventName) continue;
+        const payload = evt.payload ?? [];
+        return payload.map((f) => ({
+          name: f.name,
+          type: f.type ?? "string"
+        }));
+      }
+    }
+  }
+  return [];
+}
+function buildAutoPayload(fields) {
+  const payload = {};
+  for (const field of fields) {
+    switch (field.type) {
+      case "number":
+      case "integer":
+      case "float":
+        payload[field.name] = 1;
+        break;
+      case "boolean":
+        payload[field.name] = true;
+        break;
+      default:
+        payload[field.name] = `test-${field.name}`;
+        break;
+    }
+  }
+  return payload;
+}
+function getAvailableEvents(traits) {
+  const eventMap = /* @__PURE__ */ new Map();
+  for (const trait of traits) {
+    for (const t of trait.transitions) {
+      if (t.from !== trait.currentState) continue;
+      const existing = eventMap.get(t.event);
+      if (existing) {
+        existing.traits.add(trait.name);
+        existing.transitions.push({ ...t, traitName: trait.name });
+      } else {
+        eventMap.set(t.event, {
+          traits: /* @__PURE__ */ new Set([trait.name]),
+          transitions: [{ ...t, traitName: trait.name }]
+        });
+      }
+    }
+  }
+  return Array.from(eventMap.entries()).map(([event, data]) => ({
+    event,
+    traits: Array.from(data.traits),
+    transitions: data.transitions
+  }));
+}
+function getAllEvents(traits) {
+  const all = /* @__PURE__ */ new Set();
+  for (const trait of traits) {
+    for (const t of trait.transitions) {
+      all.add(t.event);
+    }
+  }
+  return all;
+}
+function EventDispatcherTab({ traits, schema }) {
+  const eventBus = useEventBus();
+  const [log, setLog] = React44.useState([]);
+  const prevStatesRef = React44.useRef(/* @__PURE__ */ new Map());
+  React44.useEffect(() => {
+    for (const trait of traits) {
+      const prev = prevStatesRef.current.get(trait.id);
+      if (prev && prev !== trait.currentState) {
+        setLog((l) => [
+          { traitName: trait.name, event: "?", from: prev, to: trait.currentState, timestamp: Date.now() },
+          ...l
+        ].slice(0, 5));
+      }
+      prevStatesRef.current.set(trait.id, trait.currentState);
+    }
+  }, [traits]);
+  if (traits.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No active traits",
+        description: "Traits will appear when the state machine initializes",
+        className: "py-8"
+      }
+    );
+  }
+  const availableEvents = getAvailableEvents(traits);
+  const allEvents = getAllEvents(traits);
+  const unavailableEvents = Array.from(allEvents).filter(
+    (e) => !availableEvents.some((ae) => ae.event === e)
+  );
+  const handleFireEvent = (eventName) => {
+    const payloadFields = extractPayloadFields(schema, eventName);
+    const payload = payloadFields.length > 0 ? buildAutoPayload(payloadFields) : {};
+    eventBus.emit(`UI:${eventName}`, payload);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--dispatch", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Active States" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: traits.map((trait) => /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
+        trait.name,
+        ": ",
+        trait.currentState
+      ] }, trait.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Available Events" }),
+      availableEvents.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 italic", children: "No transitions from current state" }) : /* @__PURE__ */ jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => handleFireEvent(event),
+            variant: "primary",
+            size: "sm",
+            className: "font-mono text-xs",
+            children: event
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: transitions.map((t) => `${t.from} -> ${t.to}`).join(", ") }),
+        transitions.some((t) => t.guard) && /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", children: "guarded" })
+      ] }, event)) })
+    ] }),
+    unavailableEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Other Events (not available from current state)" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
+    ] }),
+    log.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Recent Transitions" }),
+      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-purple-400", children: entry.traitName }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: entry.from }),
+        " -> ",
+        /* @__PURE__ */ jsx("span", { className: "text-green-400", children: entry.to })
+      ] }, i)) })
+    ] })
+  ] });
+}
+EventDispatcherTab.displayName = "EventDispatcherTab";
+function RuntimeDebugger({
+  position = "bottom-right",
+  defaultCollapsed = true,
+  className,
+  mode = "floating",
+  defaultTab,
+  schema
+}) {
+  const [isCollapsed, setIsCollapsed] = React44.useState(defaultCollapsed);
+  const [isVisible, setIsVisible] = React44.useState(mode === "inline" || isDebugEnabled());
+  const debugData = useDebugData();
+  React44.useEffect(() => {
+    if (mode === "inline") return;
+    return onDebugToggle((enabled) => {
+      setIsVisible(enabled);
+      if (enabled) {
+        setIsCollapsed(false);
+      }
+    });
+  }, [mode]);
+  React44.useEffect(() => {
+    if (mode === "inline") return;
+    const handleKeyDown = (e) => {
+      if (e.key === "`" && isVisible) {
+        const target = e.target;
+        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+        setIsCollapsed((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible, mode]);
+  if (!isVisible) {
+    return null;
+  }
+  const positionClasses = {
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4"
+  };
+  const { verification } = debugData;
+  const failedChecks = verification.summary.failed;
+  const tabItems = [
+    {
+      id: "dispatch",
+      label: "Dispatch",
+      badge: debugData.traits.length || void 0,
+      content: /* @__PURE__ */ jsx(EventDispatcherTab, { traits: debugData.traits, schema })
+    },
+    {
+      id: "verify",
+      label: failedChecks > 0 ? "Verify (!)" : "Verify",
+      badge: verification.summary.totalChecks || void 0,
+      content: /* @__PURE__ */ jsx(VerificationTab, { checks: verification.checks, summary: verification.summary })
+    },
+    {
+      id: "timeline",
+      label: "Timeline",
+      badge: verification.transitions.length || void 0,
+      content: /* @__PURE__ */ jsx(TransitionTimeline, { transitions: verification.transitions })
+    },
+    {
+      id: "bridge",
+      label: "Bridge",
+      badge: verification.bridge?.connected ? void 0 : 1,
+      content: /* @__PURE__ */ jsx(ServerBridgeTab, { bridge: verification.bridge })
+    },
+    {
+      id: "traits",
+      label: "Traits",
+      badge: debugData.traits.length || void 0,
+      content: /* @__PURE__ */ jsx(TraitsTab, { traits: debugData.traits })
+    },
+    {
+      id: "ticks",
+      label: "Ticks",
+      badge: debugData.ticks.filter((t) => t.active).length || void 0,
+      content: /* @__PURE__ */ jsx(TicksTab, { ticks: debugData.ticks })
+    },
+    {
+      id: "entities",
+      label: "Entities",
+      badge: debugData.entitySnapshot?.runtime.length || void 0,
+      content: /* @__PURE__ */ jsx(EntitiesTab, { snapshot: debugData.entitySnapshot })
+    },
+    {
+      id: "events",
+      label: "Events",
+      badge: debugData.events.length > 0 ? debugData.events.length : void 0,
+      content: /* @__PURE__ */ jsx(EventFlowTab, { events: debugData.events })
+    },
+    {
+      id: "guards",
+      label: "Guards",
+      badge: debugData.guards.filter((g) => !g.result).length || void 0,
+      content: /* @__PURE__ */ jsx(GuardsPanel, { guards: debugData.guards })
+    }
+  ];
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "runtime-debugger",
+          "runtime-debugger--inline",
+          className
+        ),
+        "data-testid": "debugger-inline",
+        children: /* @__PURE__ */ jsxs(Card, { className: "runtime-debugger__panel runtime-debugger__panel--inline", children: [
+          /* @__PURE__ */ jsx("div", { className: "runtime-debugger__header", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Debugger" }),
+            failedChecks > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "danger", size: "sm", children: [
+              failedChecks,
+              " failed"
+            ] }) : debugData.traits.length > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
+              debugData.traits.length,
+              " traits"
+            ] }) : /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: "Idle" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "runtime-debugger__content", children: /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              items: tabItems,
+              defaultActiveTab: defaultTab,
+              variant: "pills",
+              className: "runtime-debugger__tabs"
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "runtime-debugger",
+        "fixed z-[9999]",
+        positionClasses[position],
+        isCollapsed ? "runtime-debugger--collapsed" : "runtime-debugger--expanded",
+        className
+      ),
+      "data-testid": isCollapsed ? "debugger-collapsed" : "debugger-expanded",
+      children: isCollapsed ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setIsCollapsed(false),
+          variant: "secondary",
+          size: "sm",
+          className: "runtime-debugger__toggle",
+          title: "Open Debugger (`)",
+          children: failedChecks > 0 ? /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+            /* @__PURE__ */ jsx("span", { children: "V" }),
+            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-red-500 rounded-full" })
+          ] }) : /* @__PURE__ */ jsx("span", { children: "V" })
+        }
+      ) : /* @__PURE__ */ jsxs(Card, { className: "runtime-debugger__panel", children: [
+        /* @__PURE__ */ jsxs("div", { className: "runtime-debugger__header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg", children: "V" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "KFlow Verifier" }),
+            failedChecks > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "danger", size: "sm", children: [
+              failedChecks,
+              " failed"
+            ] }) : verification.summary.totalChecks > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "success", size: "sm", children: "All passing" }) : /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: "Runtime" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => setIsCollapsed(true),
+              variant: "ghost",
+              size: "sm",
+              title: "Close (`)",
+              children: "x"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "runtime-debugger__content", children: /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            items: tabItems,
+            defaultActiveTab: defaultTab,
+            variant: "pills",
+            className: "runtime-debugger__tabs"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "runtime-debugger__footer", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: "Press ` to toggle | window.__orbitalVerification for automation" }) })
+      ] })
+    }
+  );
+}
+RuntimeDebugger.displayName = "RuntimeDebugger";
 var DashboardLayout = ({
   appName = "{{APP_TITLE}}",
   logo,
@@ -10247,7 +10739,7 @@ var NavLink = ({
   currentPath
 }) => {
   const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
-  const Icon3 = item.icon;
+  const Icon2 = item.icon;
   return /* @__PURE__ */ jsxs(
     Link,
     {
@@ -10257,8 +10749,8 @@ var NavLink = ({
         isActive ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--shadow-sm)]" : "text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]"
       ),
       children: [
-        Icon3 && /* @__PURE__ */ jsx(
-          Icon3,
+        Icon2 && /* @__PURE__ */ jsx(
+          Icon2,
           {
             className: cn(
               "h-5 w-5",
@@ -10901,4 +11393,4 @@ function WorldMapTemplate({
 }
 WorldMapTemplate.displayName = "WorldMapTemplate";
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, ActionPalette, ActionTile, AuthLayout, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, BuilderBoard, 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 };
+export { AR_BOOK_FIELDS, ActionPalette, ActionTile, AuthLayout, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, BuilderBoard, CastleBoard, CastleTemplate, 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, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, Section, SequenceBar, SequencerBoard, Sidebar, SignaturePad, 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, resolveFieldMap, resolveFrame, resolveSheetDirection, tickAnimationState, transitionAnimation, useBattleState, useGameAudio, useGameAudioContext, usePhysics2D, useSpriteAnimations };