@almadar/ui 2.10.0 → 2.11.0

package/dist/components/index.js

@@ -1,9 +1,9 @@
-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-7M2KEJTF.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';
@@ -11,12 +11,13 @@ export { EntityDataProvider, I18nProvider, createTranslate, entityDataKeys, pars
 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-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 * 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';
@@ -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 });
@@ -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,
           {
@@ -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,
       {
@@ -7993,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;
@@ -8028,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;
@@ -8065,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 };
     }
@@ -8096,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,
     {
@@ -8193,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) => {
@@ -8334,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) => ({
@@ -9401,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,
@@ -10322,4 +11393,4 @@ function WorldMapTemplate({
 }
 WorldMapTemplate.displayName = "WorldMapTemplate";
 
-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, 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 };
+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 };