@almadar/ui 5.87.0 → 5.89.0

package/dist/components/game/2d/molecules/StateGraph.d.ts

@@ -0,0 +1,38 @@
+/**
+ * StateGraph (molecule)
+ *
+ * Dumb visual renderer for a state-machine graph: lays states out on a circle,
+ * draws the player's transitions as SVG arrows, and emits a node-click event.
+ * All state (which transitions exist, the pending "from" selection, test results)
+ * lives in the .lolo FSM — this molecule only renders and reports clicks.
+ */
+import * as React from 'react';
+import type { EventKey } from '@almadar/core';
+export interface StateGraphTransition {
+    from: string;
+    to: string;
+    event: string;
+    guardHint?: string;
+}
+export interface StateGraphProps {
+    /** All states in the machine (node labels). */
+    states: string[];
+    /** Player-built transitions rendered as arrows. */
+    transitions?: StateGraphTransition[];
+    /** State highlighted as current (test playback / initial). */
+    currentState?: string;
+    /** State the player has selected (first click). */
+    selectedState?: string;
+    /** When set, the graph is in "pick a target" mode from this state. */
+    addingFrom?: string;
+    /** The machine's initial state (ring-marked). */
+    initialState?: string;
+    /** Graph canvas width. */
+    width?: number;
+    /** Graph canvas height. */
+    height?: number;
+    /** Emits UI:{nodeClickEvent} with { stateId } when a node is clicked. */
+    nodeClickEvent?: EventKey;
+    className?: string;
+}
+export declare function StateGraph({ states, transitions, currentState, selectedState, addingFrom, initialState, width, height, nodeClickEvent, className, }: StateGraphProps): React.JSX.Element;

package/dist/components/game/2d/molecules/index.d.ts

@@ -32,6 +32,7 @@ export { InventoryGrid, type InventoryGridProps, type InventoryGridItem } from '
 export { ResourceBar, type ResourceBarProps, type ResourceBarResource } from './ResourceBar';
 export { GameHud, type GameHudProps, type GameHudStat, type GameHudElement } from './GameHud';
 export { GameMenu, type GameMenuProps, type MenuOption } from './GameMenu';
+export { StateGraph, type StateGraphProps, type StateGraphTransition } from './StateGraph';
 export { Canvas2D, type Canvas2DProps, type Projection, type CameraMode, type Platform, type SidePlayer, type TileCoord, } from './Canvas2D';
 export { useUnitSpriteAtlas } from '../../shared/hooks/useUnitSpriteAtlas';
 export { GameAudioProvider, GameAudioContext, useGameAudioContext, type GameAudioProviderProps, type GameAudioContextValue, } from '../../shared/providers/GameAudioProvider';

package/dist/components/index.cjs

@@ -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/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 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)];
@@ -29582,130 +29790,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,
@@ -29791,7 +29875,7 @@ var init_StateJsonView = __esm({
     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 +29943,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) {
@@ -31305,6 +31389,7 @@ var init_molecules = __esm({
     init_ResourceBar();
     init_GameHud();
     init_GameMenu();
+    init_StateGraph();
     init_Canvas2D();
     init_useUnitSpriteAtlas();
     init_GameAudioProvider();
@@ -48007,6 +48092,7 @@ var init_component_registry_generated = __esm({
     init_StatCard();
     init_StatDisplay();
     init_StateArchitectBoard();
+    init_StateGraph();
     init_StateIndicator();
     init_StateMachineView();
     init_StatsGrid();
@@ -48318,6 +48404,7 @@ var init_component_registry_generated = __esm({
       "StatCard": exports.StatCard,
       "StatDisplay": exports.StatDisplay,
       "StateArchitectBoard": StateArchitectBoard,
+      "StateGraph": StateGraph,
       "StateIndicator": StateIndicator,
       "StateMachineView": exports.StateMachineView,
       "StatsGrid": exports.StatsGrid,
@@ -51675,6 +51762,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;