@almadar/ui 4.54.6 → 4.54.7

package/dist/avl/index.cjs

@@ -57854,6 +57854,11 @@ function orbitalToTraitGraph(schema, orbitalName, _mockData) {
         transitions,
         emits,
         listens,
+        // `_fullSchema` carries the parsed schema to `TraitCardNode` so it
+        // can run `parseTraitLevel(...)` and render the ELK-laid-out
+        // state-machine flow chart inside the card. Mirrors the same
+        // convention `OrbPreviewNode` uses for its embedded UI preview.
+        _fullSchema: schema,
         // Required fields on PreviewNodeData — keep empty for trait cards.
         patterns: [],
         eventSources: []
@@ -61920,14 +61925,133 @@ init_Typography();
 init_Box();
 init_Stack();
 init_Typography();
-init_Button();
 init_Badge();
+
+// components/organisms/avl/AvlTraitScene.tsx
+init_AvlState();
+init_AvlTransitionLane();
+init_AvlSwimLane();
+init_types();
+init_avl_elk_layout();
+var log19 = logger.createLogger("almadar:ui:avl:trait-scene");
+var SWIM_GUTTER2 = 120;
+var CENTER_W2 = 360;
+var AvlTraitScene = ({
+  data,
+  color = "var(--color-primary)",
+  onTransitionClick
+}) => {
+  const [layout, setLayout] = React96.useState(null);
+  const dataKey = React96.useMemo(() => JSON.stringify(data), [data]);
+  React96.useEffect(() => {
+    computeTraitLayout(data).then(setLayout).catch((error) => {
+      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+    });
+  }, [dataKey]);
+  if (!layout) {
+    return /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: "Computing layout..." }) });
+  }
+  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
+  const machineOffsetX = hasExternal ? 0 : 30;
+  const padding = 20;
+  const availW = CENTER_W2 - padding * 2;
+  const availH = 300;
+  const scale = Math.min(1, availW / layout.width, availH / layout.height);
+  const scaledW = layout.width * scale;
+  const scaledH = layout.height * scale;
+  const offsetX = padding + (availW - scaledW) / 2;
+  const offsetY = 50 + (availH - scaledH) / 2;
+  const machineHeight = scaledH + 100;
+  const renderMachine = /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
+      "linked to ",
+      data.linkedEntity
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: exports.CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: exports.CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
+      layout.edges.map((edge) => {
+        const conn = edge.isSelf ? exports.CONNECTION_COLORS.selfLoop : edge.isBackward ? exports.CONNECTION_COLORS.backward : exports.CONNECTION_COLORS.forward;
+        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
+        return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: edgePath(edge.points),
+              fill: "none",
+              stroke: conn.color,
+              strokeWidth: conn.width,
+              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
+              opacity: 0.5,
+              markerEnd: marker
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.AvlTransitionLane,
+            {
+              x: edge.labelX,
+              y: edge.labelY,
+              event: edge.event,
+              guard: edge.guardExpr,
+              effects: edge.effects.map((e) => ({ type: e.type })),
+              width: edge.labelW,
+              isBackward: edge.isBackward,
+              isSelfLoop: edge.isSelf,
+              color,
+              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
+                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
+                y: edge.labelY + offsetY
+              }) : void 0
+            }
+          )
+        ] }, edge.id);
+      }),
+      layout.nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        exports.AvlState,
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          name: node.id,
+          isInitial: node.isInitial,
+          isTerminal: node.isTerminal,
+          role: node.role,
+          transitionCount: node.transitionCount,
+          color
+        }
+      ) }, node.id))
+    ] })
+  ] });
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.AvlSwimLane,
+    {
+      listenedEvents: data.listenedEvents,
+      emittedEvents: data.emittedEvents,
+      centerWidth: CENTER_W2,
+      height: machineHeight,
+      color,
+      children: renderMachine
+    }
+  );
+};
+AvlTraitScene.displayName = "AvlTraitScene";
+
+// components/molecules/avl/TraitCardNode.tsx
+init_avl_schema_parser();
 var TraitCardSelectionContext = React96.createContext({
   selectTransition: () => {
   }
 });
-var CARD_WIDTH = 360;
-var CARD_MIN_HEIGHT = 200;
+var CARD_WIDTH = 540;
+var SCENE_WIDTH = 600;
+var SCENE_HEIGHT = 400;
 var TraitCardNodeInner = (props) => {
   const data = props.data;
   const { selectTransition } = React96.useContext(TraitCardSelectionContext);
@@ -61937,11 +62061,16 @@ var TraitCardNodeInner = (props) => {
   const transitions = data.transitions ?? [];
   const emits = data.emits ?? [];
   const listens = data.listens ?? [];
+  const fullSchema = data._fullSchema;
+  const traitLevelData = React96.useMemo(() => {
+    if (!fullSchema) return null;
+    return parseTraitLevel(fullSchema, orbitalName, traitName);
+  }, [fullSchema, orbitalName, traitName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       className: "bg-card border-2 border-border rounded-lg shadow-md p-4",
-      style: { width: CARD_WIDTH, minHeight: CARD_MIN_HEIGHT, position: "relative" },
+      style: { width: CARD_WIDTH, position: "relative" },
       children: [
         listens.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
           react.Handle,
@@ -61970,34 +62099,31 @@ var TraitCardNodeInner = (props) => {
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", weight: "semibold", children: traitName }),
             linkedEntity ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: linkedEntity }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "xs", children: transitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", children: "No transitions" }) : transitions.map((t, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
+          traitLevelData ? /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
             {
-              variant: "ghost",
-              size: "sm",
-              onClick: (e) => {
-                e.stopPropagation();
-                selectTransition({
-                  orbitalName,
-                  traitName,
-                  transitionEvent: t.event,
-                  fromState: t.fromState,
-                  toState: t.toState,
-                  index: idx
-                });
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "semibold", children: t.event }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", color: "muted", children: [
-                  " \xB7 ",
-                  t.fromState,
-                  " \u2192 ",
-                  t.toState
-                ] })
-              ]
-            },
-            `${t.event}-${t.fromState}-${t.toState}-${idx}`
-          )) })
+              viewBox: `0 0 ${SCENE_WIDTH} ${SCENE_HEIGHT}`,
+              style: { width: "100%", height: "auto", display: "block" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                AvlTraitScene,
+                {
+                  data: traitLevelData,
+                  onTransitionClick: (idx) => {
+                    const t = transitions[idx];
+                    if (!t) return;
+                    selectTransition({
+                      orbitalName,
+                      traitName,
+                      transitionEvent: t.event,
+                      fromState: t.fromState,
+                      toState: t.toState,
+                      index: idx
+                    });
+                  }
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", children: "No state machine" })
         ] })
       ]
     }
@@ -63425,122 +63551,6 @@ var AvlOrbitalsCosmicZoom = ({
   );
 };
 AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
-
-// components/organisms/avl/AvlTraitScene.tsx
-init_AvlState();
-init_AvlTransitionLane();
-init_AvlSwimLane();
-init_types();
-init_avl_elk_layout();
-var log19 = logger.createLogger("almadar:ui:avl:trait-scene");
-var SWIM_GUTTER2 = 120;
-var CENTER_W2 = 360;
-var AvlTraitScene = ({
-  data,
-  color = "var(--color-primary)",
-  onTransitionClick
-}) => {
-  const [layout, setLayout] = React96.useState(null);
-  const dataKey = React96.useMemo(() => JSON.stringify(data), [data]);
-  React96.useEffect(() => {
-    computeTraitLayout(data).then(setLayout).catch((error) => {
-      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
-    });
-  }, [dataKey]);
-  if (!layout) {
-    return /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: "Computing layout..." }) });
-  }
-  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
-  const machineOffsetX = hasExternal ? 0 : 30;
-  const padding = 20;
-  const availW = CENTER_W2 - padding * 2;
-  const availH = 300;
-  const scale = Math.min(1, availW / layout.width, availH / layout.height);
-  const scaledW = layout.width * scale;
-  const scaledH = layout.height * scale;
-  const offsetX = padding + (availW - scaledW) / 2;
-  const offsetY = 50 + (availH - scaledH) / 2;
-  const machineHeight = scaledH + 100;
-  const renderMachine = /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
-      "linked to ",
-      data.linkedEntity
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: exports.CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: exports.CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
-      layout.edges.map((edge) => {
-        const conn = edge.isSelf ? exports.CONNECTION_COLORS.selfLoop : edge.isBackward ? exports.CONNECTION_COLORS.backward : exports.CONNECTION_COLORS.forward;
-        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
-        return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: edgePath(edge.points),
-              fill: "none",
-              stroke: conn.color,
-              strokeWidth: conn.width,
-              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
-              opacity: 0.5,
-              markerEnd: marker
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            exports.AvlTransitionLane,
-            {
-              x: edge.labelX,
-              y: edge.labelY,
-              event: edge.event,
-              guard: edge.guardExpr,
-              effects: edge.effects.map((e) => ({ type: e.type })),
-              width: edge.labelW,
-              isBackward: edge.isBackward,
-              isSelfLoop: edge.isSelf,
-              color,
-              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
-                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
-                y: edge.labelY + offsetY
-              }) : void 0
-            }
-          )
-        ] }, edge.id);
-      }),
-      layout.nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        exports.AvlState,
-        {
-          x: node.x,
-          y: node.y,
-          width: node.width,
-          height: node.height,
-          name: node.id,
-          isInitial: node.isInitial,
-          isTerminal: node.isTerminal,
-          role: node.role,
-          transitionCount: node.transitionCount,
-          color
-        }
-      ) }, node.id))
-    ] })
-  ] });
-  if (!hasExternal) {
-    return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    exports.AvlSwimLane,
-    {
-      listenedEvents: data.listenedEvents,
-      emittedEvents: data.emittedEvents,
-      centerWidth: CENTER_W2,
-      height: machineHeight,
-      color,
-      children: renderMachine
-    }
-  );
-};
-AvlTraitScene.displayName = "AvlTraitScene";
 var AvlClickTarget = ({
   x,
   y,

package/dist/avl/index.js

@@ -57808,6 +57808,11 @@ function orbitalToTraitGraph(schema, orbitalName, _mockData) {
         transitions,
         emits,
         listens,
+        // `_fullSchema` carries the parsed schema to `TraitCardNode` so it
+        // can run `parseTraitLevel(...)` and render the ELK-laid-out
+        // state-machine flow chart inside the card. Mirrors the same
+        // convention `OrbPreviewNode` uses for its embedded UI preview.
+        _fullSchema: schema,
         // Required fields on PreviewNodeData — keep empty for trait cards.
         patterns: [],
         eventSources: []
@@ -61874,14 +61879,133 @@ init_Typography();
 init_Box();
 init_Stack();
 init_Typography();
-init_Button();
 init_Badge();
+
+// components/organisms/avl/AvlTraitScene.tsx
+init_AvlState();
+init_AvlTransitionLane();
+init_AvlSwimLane();
+init_types();
+init_avl_elk_layout();
+var log19 = createLogger("almadar:ui:avl:trait-scene");
+var SWIM_GUTTER2 = 120;
+var CENTER_W2 = 360;
+var AvlTraitScene = ({
+  data,
+  color = "var(--color-primary)",
+  onTransitionClick
+}) => {
+  const [layout, setLayout] = useState(null);
+  const dataKey = useMemo(() => JSON.stringify(data), [data]);
+  useEffect(() => {
+    computeTraitLayout(data).then(setLayout).catch((error) => {
+      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+    });
+  }, [dataKey]);
+  if (!layout) {
+    return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: "Computing layout..." }) });
+  }
+  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
+  const machineOffsetX = hasExternal ? 0 : 30;
+  const padding = 20;
+  const availW = CENTER_W2 - padding * 2;
+  const availH = 300;
+  const scale = Math.min(1, availW / layout.width, availH / layout.height);
+  const scaledW = layout.width * scale;
+  const scaledH = layout.height * scale;
+  const offsetX = padding + (availW - scaledW) / 2;
+  const offsetY = 50 + (availH - scaledH) / 2;
+  const machineHeight = scaledH + 100;
+  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
+    /* @__PURE__ */ jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
+      "linked to ",
+      data.linkedEntity
+    ] }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
+      layout.edges.map((edge) => {
+        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
+        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: edgePath(edge.points),
+              fill: "none",
+              stroke: conn.color,
+              strokeWidth: conn.width,
+              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
+              opacity: 0.5,
+              markerEnd: marker
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AvlTransitionLane,
+            {
+              x: edge.labelX,
+              y: edge.labelY,
+              event: edge.event,
+              guard: edge.guardExpr,
+              effects: edge.effects.map((e) => ({ type: e.type })),
+              width: edge.labelW,
+              isBackward: edge.isBackward,
+              isSelfLoop: edge.isSelf,
+              color,
+              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
+                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
+                y: edge.labelY + offsetY
+              }) : void 0
+            }
+          )
+        ] }, edge.id);
+      }),
+      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        AvlState,
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          name: node.id,
+          isInitial: node.isInitial,
+          isTerminal: node.isTerminal,
+          role: node.role,
+          transitionCount: node.transitionCount,
+          color
+        }
+      ) }, node.id))
+    ] })
+  ] });
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
+  }
+  return /* @__PURE__ */ jsx(
+    AvlSwimLane,
+    {
+      listenedEvents: data.listenedEvents,
+      emittedEvents: data.emittedEvents,
+      centerWidth: CENTER_W2,
+      height: machineHeight,
+      color,
+      children: renderMachine
+    }
+  );
+};
+AvlTraitScene.displayName = "AvlTraitScene";
+
+// components/molecules/avl/TraitCardNode.tsx
+init_avl_schema_parser();
 var TraitCardSelectionContext = createContext({
   selectTransition: () => {
   }
 });
-var CARD_WIDTH = 360;
-var CARD_MIN_HEIGHT = 200;
+var CARD_WIDTH = 540;
+var SCENE_WIDTH = 600;
+var SCENE_HEIGHT = 400;
 var TraitCardNodeInner = (props) => {
   const data = props.data;
   const { selectTransition } = useContext(TraitCardSelectionContext);
@@ -61891,11 +62015,16 @@ var TraitCardNodeInner = (props) => {
   const transitions = data.transitions ?? [];
   const emits = data.emits ?? [];
   const listens = data.listens ?? [];
+  const fullSchema = data._fullSchema;
+  const traitLevelData = useMemo(() => {
+    if (!fullSchema) return null;
+    return parseTraitLevel(fullSchema, orbitalName, traitName);
+  }, [fullSchema, orbitalName, traitName]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
       className: "bg-card border-2 border-border rounded-lg shadow-md p-4",
-      style: { width: CARD_WIDTH, minHeight: CARD_MIN_HEIGHT, position: "relative" },
+      style: { width: CARD_WIDTH, position: "relative" },
       children: [
         listens.map((event, i) => /* @__PURE__ */ jsx(
           Handle,
@@ -61924,34 +62053,31 @@ var TraitCardNodeInner = (props) => {
             /* @__PURE__ */ jsx(Typography, { variant: "h6", weight: "semibold", children: traitName }),
             linkedEntity ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: linkedEntity }) : null
           ] }),
-          /* @__PURE__ */ jsx(VStack, { gap: "xs", children: transitions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "No transitions" }) : transitions.map((t, idx) => /* @__PURE__ */ jsxs(
-            Button,
+          traitLevelData ? /* @__PURE__ */ jsx(
+            "svg",
             {
-              variant: "ghost",
-              size: "sm",
-              onClick: (e) => {
-                e.stopPropagation();
-                selectTransition({
-                  orbitalName,
-                  traitName,
-                  transitionEvent: t.event,
-                  fromState: t.fromState,
-                  toState: t.toState,
-                  index: idx
-                });
-              },
-              children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", children: t.event }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", color: "muted", children: [
-                  " \xB7 ",
-                  t.fromState,
-                  " \u2192 ",
-                  t.toState
-                ] })
-              ]
-            },
-            `${t.event}-${t.fromState}-${t.toState}-${idx}`
-          )) })
+              viewBox: `0 0 ${SCENE_WIDTH} ${SCENE_HEIGHT}`,
+              style: { width: "100%", height: "auto", display: "block" },
+              children: /* @__PURE__ */ jsx(
+                AvlTraitScene,
+                {
+                  data: traitLevelData,
+                  onTransitionClick: (idx) => {
+                    const t = transitions[idx];
+                    if (!t) return;
+                    selectTransition({
+                      orbitalName,
+                      traitName,
+                      transitionEvent: t.event,
+                      fromState: t.fromState,
+                      toState: t.toState,
+                      index: idx
+                    });
+                  }
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "No state machine" })
         ] })
       ]
     }
@@ -63379,122 +63505,6 @@ var AvlOrbitalsCosmicZoom = ({
   );
 };
 AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
-
-// components/organisms/avl/AvlTraitScene.tsx
-init_AvlState();
-init_AvlTransitionLane();
-init_AvlSwimLane();
-init_types();
-init_avl_elk_layout();
-var log19 = createLogger("almadar:ui:avl:trait-scene");
-var SWIM_GUTTER2 = 120;
-var CENTER_W2 = 360;
-var AvlTraitScene = ({
-  data,
-  color = "var(--color-primary)",
-  onTransitionClick
-}) => {
-  const [layout, setLayout] = useState(null);
-  const dataKey = useMemo(() => JSON.stringify(data), [data]);
-  useEffect(() => {
-    computeTraitLayout(data).then(setLayout).catch((error) => {
-      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
-    });
-  }, [dataKey]);
-  if (!layout) {
-    return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: "Computing layout..." }) });
-  }
-  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
-  const machineOffsetX = hasExternal ? 0 : 30;
-  const padding = 20;
-  const availW = CENTER_W2 - padding * 2;
-  const availH = 300;
-  const scale = Math.min(1, availW / layout.width, availH / layout.height);
-  const scaledW = layout.width * scale;
-  const scaledH = layout.height * scale;
-  const offsetX = padding + (availW - scaledW) / 2;
-  const offsetY = 50 + (availH - scaledH) / 2;
-  const machineHeight = scaledH + 100;
-  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
-    /* @__PURE__ */ jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
-      "linked to ",
-      data.linkedEntity
-    ] }),
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
-      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
-    ] }),
-    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
-      layout.edges.map((edge) => {
-        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
-        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: edgePath(edge.points),
-              fill: "none",
-              stroke: conn.color,
-              strokeWidth: conn.width,
-              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
-              opacity: 0.5,
-              markerEnd: marker
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AvlTransitionLane,
-            {
-              x: edge.labelX,
-              y: edge.labelY,
-              event: edge.event,
-              guard: edge.guardExpr,
-              effects: edge.effects.map((e) => ({ type: e.type })),
-              width: edge.labelW,
-              isBackward: edge.isBackward,
-              isSelfLoop: edge.isSelf,
-              color,
-              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
-                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
-                y: edge.labelY + offsetY
-              }) : void 0
-            }
-          )
-        ] }, edge.id);
-      }),
-      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-        AvlState,
-        {
-          x: node.x,
-          y: node.y,
-          width: node.width,
-          height: node.height,
-          name: node.id,
-          isInitial: node.isInitial,
-          isTerminal: node.isTerminal,
-          role: node.role,
-          transitionCount: node.transitionCount,
-          color
-        }
-      ) }, node.id))
-    ] })
-  ] });
-  if (!hasExternal) {
-    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
-  }
-  return /* @__PURE__ */ jsx(
-    AvlSwimLane,
-    {
-      listenedEvents: data.listenedEvents,
-      emittedEvents: data.emittedEvents,
-      centerWidth: CENTER_W2,
-      height: machineHeight,
-      color,
-      children: renderMachine
-    }
-  );
-};
-AvlTraitScene.displayName = "AvlTraitScene";
 var AvlClickTarget = ({
   x,
   y,

package/dist/components/molecules/avl/TraitCardNode.d.ts

@@ -1,15 +1,17 @@
 /**
  * TraitCardNode — React Flow node for the `trait-expanded` view level.
  *
- * Renders one card per trait of a single orbital. Header shows the trait
- * name + linked entity badge; body lists the trait's transitions as
- * clickable rows that drill into L4 transition detail; left edge has
- * one target handle per `listens[]` event; right edge has one source
- * handle per `emits[]` event. The edges produced by
+ * Renders one card per trait of a single orbital. The card body shows
+ * the trait's state-machine flow chart (states + transitions, laid out
+ * by ELK) via the existing `AvlTraitScene` organism. Clicking a
+ * transition arc drills into L4 transition detail.
+ *
+ * Left edge has one target handle per `listens[]` event; right edge
+ * has one source handle per `emits[]` event. Edges produced by
  * `orbitalToTraitGraph` connect emit handles to listen handles where
- * the event names match.
+ * the event names match within the same orbital.
  *
- * Transition-row clicks bubble through `TraitCardSelectionContext`
+ * Transition clicks bubble through `TraitCardSelectionContext`
  * (mirrors `PatternSelectionContext` in `OrbPreviewNode`). FlowCanvas
  * wraps the canvas in a provider that translates the context callback
  * into its `onNodeClick({ level: 'transition', ... })` prop.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.54.6",
+  "version": "4.54.7",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [