@almadar/ui 5.87.0 → 5.91.0

package/dist/components/index.js

@@ -8102,7 +8102,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";
@@ -8139,7 +8139,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();
@@ -27792,6 +27792,214 @@ var init_GameMenu = __esm({
     GameMenu.displayName = "GameMenu";
   }
 });
+function StateNode2({
+  name,
+  isCurrent = false,
+  isSelected = false,
+  isInitial = false,
+  position,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs(Box, { className: "text-center", children: [
+        isInitial && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground text-xs block", children: "\u25B6 start" }),
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(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__ */ jsxs("g", { className: cn("cursor-pointer", className), onClick, children: [
+    /* @__PURE__ */ 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__ */ 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__ */ 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.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      position: "relative",
+      className: cn("rounded-container border border-border bg-background overflow-hidden", className),
+      style: { width, height },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width, height, className: "absolute inset-0", style: { pointerEvents: "none" }, children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: /* @__PURE__ */ jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--color-border)" }) }),
+            /* @__PURE__ */ jsx("marker", { id: "arrowhead-active", markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: /* @__PURE__ */ 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__ */ 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__ */ 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)];
@@ -28366,7 +28574,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();
@@ -28399,7 +28607,8 @@ function TraitSlot({
   onClick,
   onRemove,
   clickEvent,
-  removeEvent
+  removeEvent,
+  dropEvent
 }) {
   const { emit } = useEventBus();
   const [isHovered, setIsHovered] = useState(false);
@@ -28431,29 +28640,30 @@ function TraitSlot({
     onDragStart?.(equippedItem);
   }, [equippedItem, draggable, onDragStart]);
   const handleDragOver = 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 = useCallback(() => {
     setIsDragOver(false);
   }, []);
   const handleDrop = 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();
@@ -28573,7 +28783,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();
@@ -29143,7 +29353,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";
@@ -29184,7 +29394,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 = {
@@ -29239,10 +29449,12 @@ var init_puzzleObject = __esm({
 function ObjectRulePanel({
   object,
   onRulesChange,
+  rulesChangeEvent,
   disabled = false,
   className
 }) {
   const { t } = useTranslate();
+  const { emit } = useEventBus();
   const id = objId(object);
   const name = objName(object);
   const icon = objIcon(object);
@@ -29253,15 +29465,19 @@ function ObjectRulePanel({
   const rules = objRules(object);
   const maxRules = objMaxRules(object);
   const canAdd = rules.length < maxRules;
+  const emitRules = useCallback((newRules) => {
+    if (rulesChangeEvent) emit(`UI:${rulesChangeEvent}`, { objectId: id, rules: newRules });
+    else onRulesChange?.(id, newRules);
+  }, [rulesChangeEvent, emit, id, onRulesChange]);
   const handleRuleChange = useCallback((index, updatedRule) => {
     const newRules = [...rules];
     newRules[index] = updatedRule;
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleRuleRemove = useCallback((index) => {
     const newRules = rules.filter((_, i) => i !== index);
-    onRulesChange(id, newRules);
-  }, [id, rules, onRulesChange]);
+    emitRules(newRules);
+  }, [rules, emitRules]);
   const handleAddRule = useCallback(() => {
     if (!canAdd || disabled) return;
     const firstEvent = availableEvents[0]?.value || "";
@@ -29271,8 +29487,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,
@@ -29312,9 +29528,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();
@@ -29536,130 +29753,6 @@ var init_EventHandlerBoard = __esm({
     EventHandlerBoard.displayName = "EventHandlerBoard";
   }
 });
-function StateNode2({
-  name,
-  isCurrent = false,
-  isSelected = false,
-  isInitial = false,
-  position,
-  onClick,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    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__ */ jsxs(Box, { className: "text-center", children: [
-        isInitial && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground text-xs block", children: "\u25B6 start" }),
-        /* @__PURE__ */ jsx(
-          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__ */ jsx(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__ */ jsxs("g", { className: cn("cursor-pointer", className), onClick, children: [
-    /* @__PURE__ */ 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__ */ 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__ */ 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,
@@ -29668,61 +29761,35 @@ function VariablePanel({
   const { t } = useTranslate();
   return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsx(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__ */ jsxs(VStack, { gap: "none", children: [
-        /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-foreground font-medium", children: name }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: cn(
-            isHigh ? "text-error" : isLow ? "text-warning" : "text-foreground"
-          ), children: [
-            value,
-            unit,
-            " / ",
-            max,
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          ProgressBar,
-          {
-            value: pct,
-            color: isHigh ? "danger" : isLow ? "warning" : "primary",
-            size: "sm"
-          }
-        )
-      ] }, name);
-    })
+    (variables ?? []).map((v) => /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-foreground font-medium", children: v.name }),
+      /* @__PURE__ */ jsx(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 } = useTranslate();
   const [expanded, setExpanded] = useState(defaultExpanded);
-  const jsonString = JSON.stringify(data, null, 2);
+  const jsonString = JSON.stringify(
+    { name, initialState, states: states ?? [], transitions: transitions ?? [] },
+    null,
+    2
+  );
   return /* @__PURE__ */ jsxs(VStack, { className: cn("rounded-lg border border-border overflow-hidden", className), gap: "none", children: [
     /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between p-2 bg-muted", gap: "sm", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: label ?? t("stateArchitect.viewCode") }),
@@ -29739,13 +29806,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;
@@ -29813,7 +29880,7 @@ function StateArchitectBoard({
   }, []);
   const GRAPH_W = 500;
   const GRAPH_H = 400;
-  const positions = useMemo(() => layoutStates(entityStates, GRAPH_W, GRAPH_H), [entityStates]);
+  const positions = useMemo(() => layoutStates2(entityStates, GRAPH_W, GRAPH_H), [entityStates]);
   const handleStateClick = useCallback((state) => {
     if (isTesting) return;
     if (addingFrom) {
@@ -29908,7 +29975,7 @@ function StateArchitectBoard({
     setAddingFrom(null);
     if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   }, [initialState, entityVariables, playAgainEvent, emit]);
-  const codeData = useMemo(() => ({
+  useMemo(() => ({
     name: entityName,
     states: entityStates,
     initialState,
@@ -30043,7 +30110,7 @@ function StateArchitectBoard({
               VariablePanel,
               {
                 entityName,
-                variables
+                variables: variables.map((v) => ({ name: String(v.name ?? ""), value: String(v.value ?? "") }))
               }
             ),
             testResults.length > 0 && /* @__PURE__ */ jsxs(VStack, { className: "p-3 rounded-container bg-card border border-border", gap: "xs", children: [
@@ -30054,7 +30121,16 @@ function StateArchitectBoard({
                 !r.passed && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-error", children: t("stateArchitect.gotState", { state: r.actualState }) })
               ] }, i))
             ] }),
-            resolved.showCodeView !== false && /* @__PURE__ */ jsx(StateJsonView, { data: codeData, label: "View Code" })
+            resolved.showCodeView !== false && /* @__PURE__ */ 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__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
@@ -31259,6 +31335,7 @@ var init_molecules = __esm({
     init_ResourceBar();
     init_GameHud();
     init_GameMenu();
+    init_StateGraph();
     init_Canvas2D();
     init_useUnitSpriteAtlas();
     init_GameAudioProvider();
@@ -47900,6 +47977,7 @@ var init_component_registry_generated = __esm({
     init_Navigation();
     init_NegotiatorBoard();
     init_NumberStepper();
+    init_ObjectRulePanel();
     init_OptionConstraintGroup();
     init_OrbitalVisualization();
     init_Overlay();
@@ -47961,7 +48039,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();
@@ -48008,6 +48088,7 @@ var init_component_registry_generated = __esm({
     init_Typography();
     init_UISlotRenderer();
     init_UploadDropZone();
+    init_VariablePanel();
     init_VersionDiff();
     init_ViolationAlert();
     init_VoteStack();
@@ -48208,6 +48289,7 @@ var init_component_registry_generated = __esm({
       "Navigation": Navigation,
       "NegotiatorBoard": NegotiatorBoard,
       "NumberStepper": NumberStepper,
+      "ObjectRulePanel": ObjectRulePanel,
       "OptionConstraintGroup": OptionConstraintGroup,
       "OrbitalVisualization": OrbitalVisualization,
       "Overlay": Overlay,
@@ -48272,7 +48354,9 @@ var init_component_registry_generated = __esm({
       "StatCard": StatCard,
       "StatDisplay": StatDisplay,
       "StateArchitectBoard": StateArchitectBoard,
+      "StateGraph": StateGraph,
       "StateIndicator": StateIndicator,
+      "StateJsonView": StateJsonView,
       "StateMachineView": StateMachineView,
       "StatsGrid": StatsGrid,
       "StatsOrganism": StatsOrganism,
@@ -48320,6 +48404,7 @@ var init_component_registry_generated = __esm({
       "UISlotRenderer": UISlotRenderer,
       "UploadDropZone": UploadDropZone,
       "VStack": VStack,
+      "VariablePanel": VariablePanel,
       "VersionDiff": VersionDiff,
       "ViolationAlert": ViolationAlert,
       "VoteStack": VoteStack,
@@ -51563,4 +51648,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EMPTY_EFFECT_STATE, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCard, GameHud, GameIcon, GameMenu, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSwipeGesture, useTapReveal, useTraitListens, useTranslate127 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EMPTY_EFFECT_STATE, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCard, GameHud, GameIcon, GameMenu, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateGraph, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSwipeGesture, useTapReveal, useTraitListens, useTranslate127 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };