@almadar/ui 5.87.0 → 5.91.0

package/dist/components/index.cjs

@@ -8148,7 +8148,7 @@ function ActionTile({
 }
 var DRAG_MIME, SIZE_CONFIG;
 var init_ActionTile = __esm({
-  "components/game/2d/organisms/ActionTile.tsx"() {
+  "components/game/2d/molecules/ActionTile.tsx"() {
     init_atoms();
     init_cn();
     DRAG_MIME = "application/x-almadar-slot-item";
@@ -8185,7 +8185,7 @@ function ActionPalette({
   ] });
 }
 var init_ActionPalette = __esm({
-  "components/game/2d/organisms/ActionPalette.tsx"() {
+  "components/game/2d/molecules/ActionPalette.tsx"() {
     init_atoms();
     init_cn();
     init_ActionTile();
@@ -27838,6 +27838,214 @@ var init_GameMenu = __esm({
     GameMenu.displayName = "GameMenu";
   }
 });
+function StateNode2({
+  name,
+  isCurrent = false,
+  isSelected = false,
+  isInitial = false,
+  position,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Box,
+    {
+      position: "absolute",
+      display: "flex",
+      className: cn(
+        "items-center justify-center rounded-pill border-3 transition-all cursor-pointer select-none",
+        "min-w-[80px] h-[80px] px-3",
+        isCurrent && "bg-primary/20 border-primary shadow-lg shadow-primary/30 scale-110",
+        isSelected && !isCurrent && "bg-accent/20 border-accent ring-2 ring-accent/50",
+        !isCurrent && !isSelected && "bg-card border-border hover:border-muted-foreground hover:scale-105",
+        className
+      ),
+      style: {
+        left: position.x,
+        top: position.y,
+        transform: "translate(-50%, -50%)"
+      },
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "text-center", children: [
+        isInitial && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-muted-foreground text-xs block", children: "\u25B6 start" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Typography,
+          {
+            variant: "body2",
+            className: cn(
+              "font-bold whitespace-nowrap",
+              isCurrent ? "text-primary" : "text-foreground"
+            ),
+            children: name
+          }
+        )
+      ] })
+    }
+  );
+}
+var init_StateNode = __esm({
+  "components/game/2d/molecules/StateNode.tsx"() {
+    init_atoms();
+    init_cn();
+    StateNode2.displayName = "StateNode";
+  }
+});
+function TransitionArrow({
+  from,
+  to,
+  eventLabel,
+  guardHint,
+  isActive = false,
+  onClick,
+  className
+}) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist === 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  const nx = dx / dist;
+  const ny = dy / dist;
+  const startX = from.x + nx * NODE_RADIUS;
+  const startY = from.y + ny * NODE_RADIUS;
+  const endX = to.x - nx * NODE_RADIUS;
+  const endY = to.y - ny * NODE_RADIUS;
+  const midX = (startX + endX) / 2;
+  const midY = (startY + endY) / 2;
+  const perpX = -ny * 20;
+  const perpY = nx * 20;
+  const ctrlX = midX + perpX;
+  const ctrlY = midY + perpY;
+  const path = `M ${startX} ${startY} Q ${ctrlX} ${ctrlY} ${endX} ${endY}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: cn("cursor-pointer", className), onClick, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: isActive ? "var(--color-primary)" : "var(--color-border)",
+        strokeWidth: isActive ? 3 : 2,
+        markerEnd: isActive ? "url(#arrowhead-active)" : "url(#arrowhead)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: ctrlX,
+        y: ctrlY - 8,
+        textAnchor: "middle",
+        fill: isActive ? "var(--color-primary)" : "var(--color-foreground)",
+        fontSize: 12,
+        fontWeight: isActive ? "bold" : "normal",
+        className: "select-none",
+        children: eventLabel
+      }
+    ),
+    guardHint && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: ctrlX,
+        y: ctrlY + 6,
+        textAnchor: "middle",
+        fill: "var(--color-warning)",
+        fontSize: 10,
+        className: "select-none",
+        children: "\u26A0 " + guardHint
+      }
+    )
+  ] });
+}
+var NODE_RADIUS;
+var init_TransitionArrow = __esm({
+  "components/game/2d/molecules/TransitionArrow.tsx"() {
+    init_cn();
+    NODE_RADIUS = 40;
+    TransitionArrow.displayName = "TransitionArrow";
+  }
+});
+function layoutStates(states, width, height) {
+  const cx = width / 2;
+  const cy = height / 2;
+  const radius = Math.min(cx, cy) - 60;
+  const positions = {};
+  states.forEach((state, i) => {
+    const angle = 2 * Math.PI * i / Math.max(states.length, 1) - Math.PI / 2;
+    positions[state] = { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
+  });
+  return positions;
+}
+function StateGraph({
+  states,
+  transitions = [],
+  currentState,
+  selectedState,
+  addingFrom,
+  initialState,
+  width = 500,
+  height = 400,
+  nodeClickEvent,
+  className
+}) {
+  const eventBus = useEventBus();
+  const nodes = states ?? [];
+  const positions = React74__namespace.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.Box,
+    {
+      position: "relative",
+      className: cn("rounded-container border border-border bg-background overflow-hidden", className),
+      style: { width, height },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width, height, className: "absolute inset-0", style: { pointerEvents: "none" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--color-border)" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "arrowhead-active", markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--color-primary)" }) })
+          ] }),
+          transitions.map((tr, i) => {
+            const fromPos = positions[tr.from];
+            const toPos = positions[tr.to];
+            if (!fromPos || !toPos) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TransitionArrow,
+              {
+                from: fromPos,
+                to: toPos,
+                eventLabel: tr.event,
+                guardHint: tr.guardHint,
+                isActive: tr.from === currentState
+              },
+              `${tr.from}-${tr.event}-${tr.to}-${i}`
+            );
+          })
+        ] }),
+        nodes.map((state) => {
+          const pos = positions[state];
+          if (!pos) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            StateNode2,
+            {
+              name: state,
+              position: pos,
+              isCurrent: state === currentState,
+              isSelected: state === selectedState || state === addingFrom,
+              isInitial: state === initialState,
+              onClick: nodeClickEvent ? () => eventBus.emit(`UI:${nodeClickEvent}`, { stateId: state }) : void 0
+            },
+            state
+          );
+        })
+      ]
+    }
+  );
+}
+var init_StateGraph = __esm({
+  "components/game/2d/molecules/StateGraph.tsx"() {
+    init_atoms();
+    init_cn();
+    init_useEventBus();
+    init_StateNode();
+    init_TransitionArrow();
+  }
+});
 function pickPath(entry) {
   if (Array.isArray(entry.path)) {
     return entry.path[Math.floor(Math.random() * entry.path.length)];
@@ -28412,7 +28620,7 @@ function TraitStateViewer({
 }
 var SIZE_CONFIG2;
 var init_TraitStateViewer = __esm({
-  "components/game/2d/organisms/TraitStateViewer.tsx"() {
+  "components/game/2d/molecules/TraitStateViewer.tsx"() {
     "use client";
     init_cn();
     init_Box();
@@ -28445,7 +28653,8 @@ function TraitSlot({
   onClick,
   onRemove,
   clickEvent,
-  removeEvent
+  removeEvent,
+  dropEvent
 }) {
   const { emit } = useEventBus();
   const [isHovered, setIsHovered] = React74.useState(false);
@@ -28477,29 +28686,30 @@ function TraitSlot({
     onDragStart?.(equippedItem);
   }, [equippedItem, draggable, onDragStart]);
   const handleDragOver = React74.useCallback((e) => {
-    if (locked || !onItemDrop) return;
+    if (locked || !onItemDrop && !dropEvent) return;
     if (e.dataTransfer.types.includes(DRAG_MIME2)) {
       e.preventDefault();
       const allowed = e.dataTransfer.effectAllowed;
       e.dataTransfer.dropEffect = allowed === "copy" ? "copy" : "move";
       setIsDragOver(true);
     }
-  }, [locked, onItemDrop]);
+  }, [locked, onItemDrop, dropEvent]);
   const handleDragLeave = React74.useCallback(() => {
     setIsDragOver(false);
   }, []);
   const handleDrop = React74.useCallback((e) => {
     e.preventDefault();
     setIsDragOver(false);
-    if (locked || !onItemDrop) return;
+    if (locked || !onItemDrop && !dropEvent) return;
     const raw = e.dataTransfer.getData(DRAG_MIME2);
     if (!raw) return;
     try {
       const item = JSON.parse(raw);
-      onItemDrop(item);
+      if (dropEvent) emit(`UI:${dropEvent}`, { slotNumber, itemId: item.id });
+      else onItemDrop?.(item);
     } catch {
     }
-  }, [locked, onItemDrop]);
+  }, [locked, onItemDrop, dropEvent, emit, slotNumber]);
   const getTooltipStyle = () => {
     if (!slotRef.current) return {};
     const rect = slotRef.current.getBoundingClientRect();
@@ -28619,7 +28829,7 @@ function TraitSlot({
 }
 var SIZE_CONFIG3, DRAG_MIME2;
 var init_TraitSlot = __esm({
-  "components/game/2d/organisms/TraitSlot.tsx"() {
+  "components/game/2d/molecules/TraitSlot.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
@@ -29189,7 +29399,7 @@ function RuleEditor({
   ] });
 }
 var init_RuleEditor = __esm({
-  "components/game/2d/organisms/RuleEditor.tsx"() {
+  "components/game/2d/molecules/RuleEditor.tsx"() {
     init_atoms();
     init_cn();
     RuleEditor.displayName = "RuleEditor";
@@ -29230,7 +29440,7 @@ function EventLog({
 }
 var STATUS_STYLES, STATUS_DOTS;
 var init_EventLog = __esm({
-  "components/game/2d/organisms/EventLog.tsx"() {
+  "components/game/2d/molecules/EventLog.tsx"() {
     init_atoms();
     init_cn();
     STATUS_STYLES = {
@@ -29285,10 +29495,12 @@ var init_puzzleObject = __esm({
 function ObjectRulePanel({
   object,
   onRulesChange,
+  rulesChangeEvent,
   disabled = false,
   className
 }) {
   const { t } = hooks.useTranslate();
+  const { emit } = useEventBus();
   const id = objId(object);
   const name = objName(object);
   const icon = objIcon(object);
@@ -29299,15 +29511,19 @@ function ObjectRulePanel({
   const rules = objRules(object);
   const maxRules = objMaxRules(object);
   const canAdd = rules.length < maxRules;
+  const emitRules = React74.useCallback((newRules) => {
+    if (rulesChangeEvent) emit(`UI:${rulesChangeEvent}`, { objectId: id, rules: newRules });
+    else onRulesChange?.(id, newRules);
+  }, [rulesChangeEvent, emit, id, onRulesChange]);
   const handleRuleChange = React74.useCallback((index, updatedRule) => {
     const newRules = [...rules];
     newRules[index] = updatedRule;
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleRuleRemove = React74.useCallback((index) => {
     const newRules = rules.filter((_, i) => i !== index);
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleAddRule = React74.useCallback(() => {
     if (!canAdd || disabled) return;
     const firstEvent = availableEvents[0]?.value || "";
@@ -29317,8 +29533,8 @@ function ObjectRulePanel({
       whenEvent: firstEvent,
       thenAction: firstAction
     };
-    onRulesChange(id, [...rules, newRule]);
-  }, [canAdd, disabled, id, rules, availableEvents, availableActions, onRulesChange]);
+    emitRules([...rules, newRule]);
+  }, [canAdd, disabled, rules, availableEvents, availableActions, emitRules]);
   const machine = {
     name,
     states,
@@ -29358,9 +29574,10 @@ function ObjectRulePanel({
 }
 var nextRuleId;
 var init_ObjectRulePanel = __esm({
-  "components/game/2d/organisms/ObjectRulePanel.tsx"() {
+  "components/game/2d/molecules/ObjectRulePanel.tsx"() {
     init_atoms();
     init_cn();
+    init_useEventBus();
     init_TraitStateViewer();
     init_RuleEditor();
     init_puzzleObject();
@@ -29582,130 +29799,6 @@ var init_EventHandlerBoard = __esm({
     EventHandlerBoard.displayName = "EventHandlerBoard";
   }
 });
-function StateNode2({
-  name,
-  isCurrent = false,
-  isSelected = false,
-  isInitial = false,
-  position,
-  onClick,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    exports.Box,
-    {
-      position: "absolute",
-      display: "flex",
-      className: cn(
-        "items-center justify-center rounded-pill border-3 transition-all cursor-pointer select-none",
-        "min-w-[80px] h-[80px] px-3",
-        isCurrent && "bg-primary/20 border-primary shadow-lg shadow-primary/30 scale-110",
-        isSelected && !isCurrent && "bg-accent/20 border-accent ring-2 ring-accent/50",
-        !isCurrent && !isSelected && "bg-card border-border hover:border-muted-foreground hover:scale-105",
-        className
-      ),
-      style: {
-        left: position.x,
-        top: position.y,
-        transform: "translate(-50%, -50%)"
-      },
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "text-center", children: [
-        isInitial && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-muted-foreground text-xs block", children: "\u25B6 start" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Typography,
-          {
-            variant: "body2",
-            className: cn(
-              "font-bold whitespace-nowrap",
-              isCurrent ? "text-primary" : "text-foreground"
-            ),
-            children: name
-          }
-        )
-      ] })
-    }
-  );
-}
-var init_StateNode = __esm({
-  "components/game/2d/organisms/StateNode.tsx"() {
-    init_atoms();
-    init_cn();
-    StateNode2.displayName = "StateNode";
-  }
-});
-function TransitionArrow({
-  from,
-  to,
-  eventLabel,
-  guardHint,
-  isActive = false,
-  onClick,
-  className
-}) {
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const dist = Math.sqrt(dx * dx + dy * dy);
-  if (dist === 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const nx = dx / dist;
-  const ny = dy / dist;
-  const startX = from.x + nx * NODE_RADIUS;
-  const startY = from.y + ny * NODE_RADIUS;
-  const endX = to.x - nx * NODE_RADIUS;
-  const endY = to.y - ny * NODE_RADIUS;
-  const midX = (startX + endX) / 2;
-  const midY = (startY + endY) / 2;
-  const perpX = -ny * 20;
-  const perpY = nx * 20;
-  const ctrlX = midX + perpX;
-  const ctrlY = midY + perpY;
-  const path = `M ${startX} ${startY} Q ${ctrlX} ${ctrlY} ${endX} ${endY}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: cn("cursor-pointer", className), onClick, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: path,
-        fill: "none",
-        stroke: isActive ? "var(--color-primary)" : "var(--color-border)",
-        strokeWidth: isActive ? 3 : 2,
-        markerEnd: isActive ? "url(#arrowhead-active)" : "url(#arrowhead)"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
-      {
-        x: ctrlX,
-        y: ctrlY - 8,
-        textAnchor: "middle",
-        fill: isActive ? "var(--color-primary)" : "var(--color-foreground)",
-        fontSize: 12,
-        fontWeight: isActive ? "bold" : "normal",
-        className: "select-none",
-        children: eventLabel
-      }
-    ),
-    guardHint && /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
-      {
-        x: ctrlX,
-        y: ctrlY + 6,
-        textAnchor: "middle",
-        fill: "var(--color-warning)",
-        fontSize: 10,
-        className: "select-none",
-        children: "\u26A0 " + guardHint
-      }
-    )
-  ] });
-}
-var NODE_RADIUS;
-var init_TransitionArrow = __esm({
-  "components/game/2d/organisms/TransitionArrow.tsx"() {
-    init_cn();
-    NODE_RADIUS = 40;
-    TransitionArrow.displayName = "TransitionArrow";
-  }
-});
 function VariablePanel({
   entityName,
   variables,
@@ -29714,61 +29807,35 @@ function VariablePanel({
   const { t } = hooks.useTranslate();
   return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body2", className: "text-muted-foreground font-medium", children: t("stateArchitect.variables", { name: entityName }) }),
-    variables.map((v) => {
-      const name = v.name == null ? "" : String(v.name);
-      const value = numField(v.value);
-      const max = numField(v.max, 100);
-      const min = numField(v.min, 0);
-      const unit = v.unit == null ? "" : String(v.unit);
-      const pct = Math.round((value - min) / (max - min) * 100);
-      const isHigh = pct > 80;
-      const isLow = pct < 20;
-      return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-foreground font-medium", children: name }),
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", className: cn(
-            isHigh ? "text-error" : isLow ? "text-warning" : "text-foreground"
-          ), children: [
-            value,
-            unit,
-            " / ",
-            max,
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.ProgressBar,
-          {
-            value: pct,
-            color: isHigh ? "danger" : isLow ? "warning" : "primary",
-            size: "sm"
-          }
-        )
-      ] }, name);
-    })
+    (variables ?? []).map((v) => /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-foreground font-medium", children: v.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-accent font-mono", children: v.value })
+    ] }, v.name))
   ] });
 }
-var numField;
 var init_VariablePanel = __esm({
-  "components/game/2d/organisms/VariablePanel.tsx"() {
+  "components/game/2d/molecules/VariablePanel.tsx"() {
     init_atoms();
     init_cn();
-    numField = (v, fallback = 0) => {
-      const n = Number(v);
-      return Number.isFinite(n) ? n : fallback;
-    };
     VariablePanel.displayName = "VariablePanel";
   }
 });
 function StateJsonView({
-  data,
+  name,
+  initialState,
+  states,
+  transitions,
   label,
   defaultExpanded = false,
   className
 }) {
   const { t } = hooks.useTranslate();
   const [expanded, setExpanded] = React74.useState(defaultExpanded);
-  const jsonString = JSON.stringify(data, null, 2);
+  const jsonString = JSON.stringify(
+    { name, initialState, states: states ?? [], transitions: transitions ?? [] },
+    null,
+    2
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { className: cn("rounded-lg border border-border overflow-hidden", className), gap: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "items-center justify-between p-2 bg-muted", gap: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: label ?? t("stateArchitect.viewCode") }),
@@ -29785,13 +29852,13 @@ function StateJsonView({
   ] });
 }
 var init_StateJsonView = __esm({
-  "components/game/2d/organisms/StateJsonView.tsx"() {
+  "components/game/2d/molecules/StateJsonView.tsx"() {
     init_atoms();
     init_cn();
     StateJsonView.displayName = "StateJsonView";
   }
 });
-function layoutStates(states, width, height) {
+function layoutStates2(states, width, height) {
   const cx = width / 2;
   const cy = height / 2;
   const radius = Math.min(cx, cy) - 60;
@@ -29859,7 +29926,7 @@ function StateArchitectBoard({
   }, []);
   const GRAPH_W = 500;
   const GRAPH_H = 400;
-  const positions = React74.useMemo(() => layoutStates(entityStates, GRAPH_W, GRAPH_H), [entityStates]);
+  const positions = React74.useMemo(() => layoutStates2(entityStates, GRAPH_W, GRAPH_H), [entityStates]);
   const handleStateClick = React74.useCallback((state) => {
     if (isTesting) return;
     if (addingFrom) {
@@ -29954,7 +30021,7 @@ function StateArchitectBoard({
     setAddingFrom(null);
     if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   }, [initialState, entityVariables, playAgainEvent, emit]);
-  const codeData = React74.useMemo(() => ({
+  React74.useMemo(() => ({
     name: entityName,
     states: entityStates,
     initialState,
@@ -30089,7 +30156,7 @@ function StateArchitectBoard({
               VariablePanel,
               {
                 entityName,
-                variables
+                variables: variables.map((v) => ({ name: String(v.name ?? ""), value: String(v.value ?? "") }))
               }
             ),
             testResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { className: "p-3 rounded-container bg-card border border-border", gap: "xs", children: [
@@ -30100,7 +30167,16 @@ function StateArchitectBoard({
                 !r.passed && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-error", children: t("stateArchitect.gotState", { state: r.actualState }) })
               ] }, i))
             ] }),
-            resolved.showCodeView !== false && /* @__PURE__ */ jsxRuntime.jsx(StateJsonView, { data: codeData, label: "View Code" })
+            resolved.showCodeView !== false && /* @__PURE__ */ jsxRuntime.jsx(
+              StateJsonView,
+              {
+                name: entityName,
+                initialState,
+                states: entityStates,
+                transitions: transitions.map((tr) => ({ from: tr.from, to: tr.to, event: tr.event })),
+                label: "View Code"
+              }
+            )
           ] })
         ] }),
         isSuccess && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
@@ -31305,6 +31381,7 @@ var init_molecules = __esm({
     init_ResourceBar();
     init_GameHud();
     init_GameMenu();
+    init_StateGraph();
     init_Canvas2D();
     init_useUnitSpriteAtlas();
     init_GameAudioProvider();
@@ -47946,6 +48023,7 @@ var init_component_registry_generated = __esm({
     init_Navigation();
     init_NegotiatorBoard();
     init_NumberStepper();
+    init_ObjectRulePanel();
     init_OptionConstraintGroup();
     init_OrbitalVisualization();
     init_Overlay();
@@ -48007,7 +48085,9 @@ var init_component_registry_generated = __esm({
     init_StatCard();
     init_StatDisplay();
     init_StateArchitectBoard();
+    init_StateGraph();
     init_StateIndicator();
+    init_StateJsonView();
     init_StateMachineView();
     init_StatsGrid();
     init_StatsOrganism();
@@ -48054,6 +48134,7 @@ var init_component_registry_generated = __esm({
     init_Typography();
     init_UISlotRenderer();
     init_UploadDropZone();
+    init_VariablePanel();
     init_VersionDiff();
     init_ViolationAlert();
     init_VoteStack();
@@ -48254,6 +48335,7 @@ var init_component_registry_generated = __esm({
       "Navigation": exports.Navigation,
       "NegotiatorBoard": NegotiatorBoard,
       "NumberStepper": exports.NumberStepper,
+      "ObjectRulePanel": ObjectRulePanel,
       "OptionConstraintGroup": exports.OptionConstraintGroup,
       "OrbitalVisualization": exports.OrbitalVisualization,
       "Overlay": exports.Overlay,
@@ -48318,7 +48400,9 @@ var init_component_registry_generated = __esm({
       "StatCard": exports.StatCard,
       "StatDisplay": exports.StatDisplay,
       "StateArchitectBoard": StateArchitectBoard,
+      "StateGraph": StateGraph,
       "StateIndicator": StateIndicator,
+      "StateJsonView": StateJsonView,
       "StateMachineView": exports.StateMachineView,
       "StatsGrid": exports.StatsGrid,
       "StatsOrganism": exports.StatsOrganism,
@@ -48366,6 +48450,7 @@ var init_component_registry_generated = __esm({
       "UISlotRenderer": UISlotRenderer,
       "UploadDropZone": exports.UploadDropZone,
       "VStack": exports.VStack,
+      "VariablePanel": VariablePanel,
       "VersionDiff": exports.VersionDiff,
       "ViolationAlert": exports.ViolationAlert,
       "VoteStack": exports.VoteStack,
@@ -51675,6 +51760,7 @@ exports.SlotContentRenderer = SlotContentRenderer;
 exports.Sprite = Sprite;
 exports.StatBadge = StatBadge;
 exports.StateArchitectBoard = StateArchitectBoard;
+exports.StateGraph = StateGraph;
 exports.StateIndicator = StateIndicator;
 exports.StateJsonView = StateJsonView;
 exports.StateNode = StateNode2;