@almadar/ui 2.22.1 → 2.23.0

package/dist/avl/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React8, { createContext, useCallback, useContext, useState, useMemo, useEffect, useReducer, useRef } from 'react';
 import '@react-three/drei';
 import '@react-three/fiber';
@@ -25,6 +25,48 @@ var AVL_FIELD_TYPE_SHAPES = {
   object: "hexagon",
   array: "bars"
 };
+var STATE_COLORS = {
+  initial: { fill: "#22C55E1F", border: "#16A34A" },
+  terminal: { fill: "#EF44441F", border: "#DC2626" },
+  hub: { fill: "#3B82F61F", border: "#2563EB" },
+  error: { fill: "#F59E0B1F", border: "#D97706" },
+  default: { fill: "#6B72801F", border: "#4B5563" }
+};
+var EFFECT_CATEGORY_COLORS = {
+  ui: { color: "#8B5CF6", bg: "#8B5CF614" },
+  data: { color: "#3B82F6", bg: "#3B82F614" },
+  communication: { color: "#F97316", bg: "#F9731614" },
+  lifecycle: { color: "#10B981", bg: "#10B98114" },
+  control: { color: "#6B7280", bg: "#6B728014" }
+};
+var EFFECT_TYPE_TO_CATEGORY = {
+  "render-ui": "ui",
+  "navigate": "ui",
+  "set": "data",
+  "persist": "data",
+  "fetch": "data",
+  "emit": "communication",
+  "notify": "communication",
+  "call-service": "communication",
+  "spawn": "lifecycle",
+  "despawn": "lifecycle",
+  "do": "control",
+  "if": "control",
+  "log": "control"
+};
+var CONNECTION_COLORS = {
+  forward: { color: "#1E293B", width: 2, dash: "none" },
+  backward: { color: "#94A3B8", width: 1.5, dash: "6 3" },
+  selfLoop: { color: "#CBD5E1", width: 1, dash: "3 2" },
+  emitListen: { color: "#F97316", width: 1.5, dash: "4 3" }
+};
+function getStateRole(name, isInitial, isTerminal, transitionCount, maxTransitionCount) {
+  if (isInitial) return "initial";
+  if (isTerminal) return "terminal";
+  if (/error|fail|invalid/i.test(name)) return "error";
+  if (transitionCount != null && maxTransitionCount != null && transitionCount === maxTransitionCount && transitionCount >= 3) return "hub";
+  return "default";
+}
 var AvlOrbital = ({
   cx = 0,
   cy = 0,
@@ -296,19 +338,33 @@ var AvlApplication = ({
   ] });
 };
 AvlApplication.displayName = "AvlApplication";
+function computeWidth(explicit, transitionCount) {
+  if (explicit != null) return explicit;
+  if (transitionCount == null) return 100;
+  if (transitionCount >= 5) return 160;
+  if (transitionCount >= 3) return 130;
+  return 100;
+}
 var AvlState = ({
   x = 0,
   y = 0,
   name,
   isInitial = false,
   isTerminal = false,
-  width = 100,
+  width: explicitWidth,
   height = 40,
   color = "var(--color-primary)",
   opacity = 1,
-  className
+  className,
+  role,
+  transitionCount
 }) => {
+  const width = computeWidth(explicitWidth, transitionCount);
   const rx = height / 2;
+  const roleColors = role ? STATE_COLORS[role] : null;
+  const fillColor = roleColors ? roleColors.fill : "none";
+  const strokeColor = roleColors ? roleColors.border : color;
+  const textColor = roleColors ? roleColors.border : color;
   return /* @__PURE__ */ jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
     isInitial && /* @__PURE__ */ jsx(
       "circle",
@@ -316,7 +372,7 @@ var AvlState = ({
         cx: -16,
         cy: height / 2,
         r: 6,
-        fill: color
+        fill: strokeColor
       }
     ),
     isTerminal && /* @__PURE__ */ jsx(
@@ -329,7 +385,7 @@ var AvlState = ({
         rx: rx + 4,
         ry: rx + 4,
         fill: "none",
-        stroke: color,
+        stroke: strokeColor,
         strokeWidth: 1,
         opacity: 0.5
       }
@@ -343,8 +399,8 @@ var AvlState = ({
         height,
         rx,
         ry: rx,
-        fill: "none",
-        stroke: color,
+        fill: fillColor,
+        stroke: strokeColor,
         strokeWidth: 2
       }
     ),
@@ -355,8 +411,9 @@ var AvlState = ({
         y: height / 2,
         textAnchor: "middle",
         dominantBaseline: "central",
-        fill: color,
-        fontSize: 11,
+        fill: textColor,
+        fontSize: role ? 14 : 11,
+        fontWeight: role ? 600 : 400,
         fontFamily: "inherit",
         children: name
       }
@@ -625,18 +682,27 @@ var AvlEffect = ({
   label,
   color = "var(--color-primary)",
   opacity = 1,
-  className
+  className,
+  showBackground = false
 }) => {
+  const category = EFFECT_TYPE_TO_CATEGORY[effectType];
+  const catColors = EFFECT_CATEGORY_COLORS[category];
+  const iconColor = showBackground ? catColors.color : color;
   return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-    effectIcon(effectType, x, y, size, color),
+    showBackground && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: catColors.bg }),
+      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: "none", stroke: catColors.color, strokeWidth: 0.5, opacity: 0.3 })
+    ] }),
+    effectIcon(effectType, x, y, size, iconColor),
     label && /* @__PURE__ */ jsx(
       "text",
       {
         x,
         y: y + size + 10,
         textAnchor: "middle",
-        fill: color,
-        fontSize: 8,
+        fill: iconColor,
+        fontSize: 11,
+        fontWeight: 500,
         fontFamily: "inherit",
         opacity: 0.7,
         children: label
@@ -4064,7 +4130,7 @@ var AvlStateMachine = ({
   const cx = 300;
   const cy = 200;
   const r2 = 150;
-  const stateWidth = 90;
+  const stateWidth2 = 90;
   const stateHeight = 36;
   const positions = ringPositions(cx, cy, r2, states.length);
   const stateIndex = new Map(states.map((s, i) => [s.name, i]));
@@ -4145,9 +4211,9 @@ var AvlStateMachine = ({
       const seenIdx = pairSeen.get(pairKey) ?? 0;
       pairSeen.set(pairKey, seenIdx + 1);
       const pairOffset = totalForPair > 1 ? (seenIdx - (totalForPair - 1) / 2) * 24 : 0;
-      const x1 = fp.x + nx * (stateWidth / 2 + 4);
+      const x1 = fp.x + nx * (stateWidth2 / 2 + 4);
       const y1 = fp.y + ny * (stateHeight / 2 + 4);
-      const x2 = tp.x - nx * (stateWidth / 2 + 8);
+      const x2 = tp.x - nx * (stateWidth2 / 2 + 8);
       const y2 = tp.y - ny * (stateHeight / 2 + 8);
       const t = 0.3;
       const labelX = x1 * (1 - t) + x2 * t;
@@ -4225,9 +4291,9 @@ var AvlStateMachine = ({
       return /* @__PURE__ */ jsx(
         AvlState,
         {
-          x: pos.x - stateWidth / 2,
+          x: pos.x - stateWidth2 / 2,
           y: pos.y - stateHeight / 2,
-          width: stateWidth,
+          width: stateWidth2,
           height: stateHeight,
           name: state.name,
           isInitial: state.isInitial,
@@ -4843,6 +4909,288 @@ var AvlExprTree = ({
   ] });
 };
 AvlExprTree.displayName = "AvlExprTree";
+var MAX_VISIBLE_EFFECTS = 6;
+var AvlTransitionLane = ({
+  event,
+  guard,
+  effects,
+  width,
+  x = 0,
+  y = 0,
+  isBackward = false,
+  isSelfLoop = false,
+  color = "var(--color-primary)",
+  onTransitionClick
+}) => {
+  const rowHeight = 22;
+  const padding = 8;
+  const eventRow = padding;
+  const guardRow = guard ? eventRow + rowHeight : eventRow;
+  const effectsRow = guard ? guardRow + rowHeight : eventRow + rowHeight;
+  const totalHeight = effectsRow + (effects.length > 0 ? rowHeight + padding : padding);
+  const connStyle = isSelfLoop ? CONNECTION_COLORS.selfLoop : isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
+  const visibleEffects = effects.slice(0, MAX_VISIBLE_EFFECTS);
+  const overflow = effects.length - MAX_VISIBLE_EFFECTS;
+  const effectSpacing = 28;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `translate(${x},${y})`,
+      style: { cursor: onTransitionClick ? "pointer" : "default" },
+      onClick: onTransitionClick,
+      role: onTransitionClick ? "button" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width,
+            height: totalHeight,
+            rx: 6,
+            fill: connStyle.color,
+            fillOpacity: 0.03,
+            stroke: connStyle.color,
+            strokeWidth: 0.5,
+            strokeOpacity: 0.15,
+            strokeDasharray: connStyle.dash === "none" ? void 0 : connStyle.dash
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: padding + 14,
+            y: eventRow + rowHeight * 0.65,
+            fontSize: 14,
+            fontWeight: 600,
+            fill: color,
+            fontFamily: "inherit",
+            children: event
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: padding + 4,
+            y: eventRow + rowHeight * 0.65,
+            fontSize: 10,
+            fill: color,
+            opacity: 0.5,
+            children: "\u26A1"
+          }
+        ),
+        guard && /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `${padding + 6},${guardRow + rowHeight * 0.35} ${padding + 10},${guardRow + rowHeight * 0.15} ${padding + 14},${guardRow + rowHeight * 0.35} ${padding + 10},${guardRow + rowHeight * 0.55}`,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 1,
+              opacity: 0.5
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: padding + 20,
+              y: guardRow + rowHeight * 0.6,
+              fontSize: 12,
+              fontWeight: 400,
+              fill: color,
+              opacity: 0.6,
+              fontFamily: "inherit",
+              children: guard
+            }
+          )
+        ] }),
+        visibleEffects.length > 0 && /* @__PURE__ */ jsxs("g", { children: [
+          visibleEffects.map((eff, i) => /* @__PURE__ */ jsx(
+            AvlEffect,
+            {
+              x: padding + 12 + i * effectSpacing,
+              y: effectsRow + rowHeight * 0.5,
+              effectType: eff.type,
+              size: 10,
+              showBackground: true
+            },
+            i
+          )),
+          overflow > 0 && /* @__PURE__ */ jsxs(
+            "text",
+            {
+              x: padding + 12 + visibleEffects.length * effectSpacing,
+              y: effectsRow + rowHeight * 0.6,
+              fontSize: 10,
+              fill: color,
+              opacity: 0.5,
+              fontFamily: "inherit",
+              children: [
+                "+",
+                overflow
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+AvlTransitionLane.displayName = "AvlTransitionLane";
+var GUTTER_WIDTH = 120;
+var EVENT_SPACING = 24;
+var HEADER_Y = 16;
+var EVENT_START_Y = 36;
+var AvlSwimLane = ({
+  listenedEvents,
+  emittedEvents,
+  centerWidth,
+  height,
+  color = "var(--color-primary)",
+  children
+}) => {
+  const rightX = GUTTER_WIDTH + centerWidth;
+  const totalWidth = rightX + GUTTER_WIDTH;
+  const emitColor = CONNECTION_COLORS.emitListen.color;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    listenedEvents.length > 0 && /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: 8,
+          y: HEADER_Y,
+          fontSize: 10,
+          fontWeight: 600,
+          fill: color,
+          opacity: 0.4,
+          fontFamily: "inherit",
+          children: "LISTENS"
+        }
+      ),
+      listenedEvents.map((evt, i) => {
+        const ey = EVENT_START_Y + i * EVENT_SPACING;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `${4},${ey} ${12},${ey - 5} ${12},${ey + 5}`,
+              fill: emitColor,
+              opacity: 0.6
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: 16,
+              y: ey + 4,
+              fontSize: 11,
+              fontWeight: 500,
+              fill: color,
+              opacity: 0.6,
+              fontFamily: "inherit",
+              children: evt
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: GUTTER_WIDTH - 4,
+              y1: ey,
+              x2: GUTTER_WIDTH,
+              y2: ey,
+              stroke: emitColor,
+              strokeWidth: 1,
+              strokeDasharray: "3 2",
+              opacity: 0.4
+            }
+          )
+        ] }, evt + i);
+      })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: GUTTER_WIDTH,
+        y1: 0,
+        x2: GUTTER_WIDTH,
+        y2: height,
+        stroke: color,
+        strokeWidth: 0.5,
+        strokeDasharray: "4 3",
+        opacity: 0.12
+      }
+    ),
+    /* @__PURE__ */ jsx("g", { transform: `translate(${GUTTER_WIDTH}, 0)`, children }),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: rightX,
+        y1: 0,
+        x2: rightX,
+        y2: height,
+        stroke: color,
+        strokeWidth: 0.5,
+        strokeDasharray: "4 3",
+        opacity: 0.12
+      }
+    ),
+    emittedEvents.length > 0 && /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: rightX + 8,
+          y: HEADER_Y,
+          fontSize: 10,
+          fontWeight: 600,
+          fill: color,
+          opacity: 0.4,
+          fontFamily: "inherit",
+          children: "EMITS"
+        }
+      ),
+      emittedEvents.map((evt, i) => {
+        const ey = EVENT_START_Y + i * EVENT_SPACING;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: rightX + 8,
+              y: ey + 4,
+              fontSize: 11,
+              fontWeight: 500,
+              fill: color,
+              opacity: 0.6,
+              fontFamily: "inherit",
+              children: evt
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `${totalWidth - 4},${ey} ${totalWidth - 12},${ey - 5} ${totalWidth - 12},${ey + 5}`,
+              fill: emitColor,
+              opacity: 0.6
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: rightX,
+              y1: ey,
+              x2: rightX + 4,
+              y2: ey,
+              stroke: emitColor,
+              strokeWidth: 1,
+              strokeDasharray: "3 2",
+              opacity: 0.4
+            }
+          )
+        ] }, evt + i);
+      })
+    ] })
+  ] });
+};
+AvlSwimLane.displayName = "AvlSwimLane";
 
 // components/organisms/avl/avl-schema-parser.ts
 function getEntity(orbital) {
@@ -5597,39 +5945,52 @@ var AvlOrbitalScene = ({
   ] });
 };
 AvlOrbitalScene.displayName = "AvlOrbitalScene";
-var STATE_W = 110;
-var STATE_H = 38;
-var LABEL_W = 90;
-var LABEL_H = 20;
+function stateWidth(transitionCount) {
+  if (transitionCount >= 5) return 160;
+  if (transitionCount >= 3) return 130;
+  return 110;
+}
+var STATE_H = 40;
 var elk = new ELK();
 async function computeLayout(data) {
+  const transitionCounts = {};
+  for (const s of data.states) transitionCounts[s.name] = 0;
+  for (const t of data.transitions) {
+    transitionCounts[t.from] = (transitionCounts[t.from] ?? 0) + 1;
+    transitionCounts[t.to] = (transitionCounts[t.to] ?? 0) + 1;
+  }
+  const maxTC = Math.max(...Object.values(transitionCounts), 0);
+  const LABEL_BASE_W = 100;
+  const LABEL_H = 44;
   const elkGraph = {
     id: "root",
     layoutOptions: {
       "elk.algorithm": "layered",
-      "elk.direction": "DOWN",
-      "elk.spacing.nodeNode": "50",
+      "elk.direction": "RIGHT",
+      "elk.spacing.nodeNode": "80",
       "elk.spacing.edgeNode": "30",
-      "elk.spacing.edgeEdge": "20",
-      "elk.spacing.edgeLabel": "8",
-      "elk.spacing.labelLabel": "6",
-      "elk.layered.spacing.nodeNodeBetweenLayers": "60",
+      "elk.spacing.edgeEdge": "24",
+      "elk.spacing.edgeLabel": "10",
+      "elk.spacing.labelLabel": "8",
+      "elk.layered.spacing.nodeNodeBetweenLayers": "100",
       "elk.edgeLabels.placement": "CENTER",
       "elk.layered.mergeEdges": "false",
       "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX"
     },
-    children: data.states.map((s) => ({
-      id: s.name,
-      width: STATE_W,
-      height: STATE_H,
-      labels: [{ text: s.name, width: STATE_W - 10, height: 14 }]
-    })),
+    children: data.states.map((s) => {
+      const tc = transitionCounts[s.name] ?? 0;
+      const w = stateWidth(tc);
+      return {
+        id: s.name,
+        width: w,
+        height: STATE_H,
+        labels: [{ text: s.name, width: w - 10, height: 14 }]
+      };
+    }),
     edges: data.transitions.map((t, i) => {
-      const hasEffects = t.effects.length > 0;
-      const labelH = hasEffects ? 38 : LABEL_H;
-      const textW = Math.max(t.event.length * 7, 40);
-      const iconsW = Math.min(t.effects.length, 4) * 14;
-      const labelW = Math.max(textW, iconsW, LABEL_W) + 20;
+      const textW = Math.max(t.event.length * 8, 60);
+      const iconsW = Math.min(t.effects.length, 6) * 28 + 20;
+      const labelW = Math.max(textW, iconsW, LABEL_BASE_W);
       return {
         id: `e${i}`,
         sources: [t.from],
@@ -5637,7 +5998,7 @@ async function computeLayout(data) {
         labels: [{
           text: t.event,
           width: labelW,
-          height: labelH
+          height: LABEL_H
         }]
       };
     })
@@ -5645,15 +6006,26 @@ async function computeLayout(data) {
   const layout = await elk.layout(elkGraph);
   const layoutChildren = layout.children ?? [];
   const layoutEdges = layout.edges ?? [];
-  const nodes = layoutChildren.map((n) => ({
-    id: n.id,
-    x: n.x ?? 0,
-    y: n.y ?? 0,
-    width: n.width ?? STATE_W,
-    height: n.height ?? STATE_H,
-    isInitial: data.states.find((s) => s.name === n.id)?.isInitial,
-    isTerminal: data.states.find((s) => s.name === n.id)?.isTerminal
-  }));
+  const nodeXMap = {};
+  for (const n of layoutChildren) {
+    nodeXMap[n.id] = n.x ?? 0;
+  }
+  const nodes = layoutChildren.map((n) => {
+    const name = n.id;
+    const stateInfo = data.states.find((s) => s.name === name);
+    const tc = transitionCounts[name] ?? 0;
+    return {
+      id: name,
+      x: n.x ?? 0,
+      y: n.y ?? 0,
+      width: n.width ?? 110,
+      height: n.height ?? STATE_H,
+      isInitial: stateInfo?.isInitial,
+      isTerminal: stateInfo?.isTerminal,
+      role: getStateRole(name, stateInfo?.isInitial, stateInfo?.isTerminal, tc, maxTC),
+      transitionCount: tc
+    };
+  });
   const edges = layoutEdges.map((e, i) => {
     const t = data.transitions[i];
     const labels = e.labels ?? [];
@@ -5665,11 +6037,13 @@ async function computeLayout(data) {
       const endPoint = section.endPoint;
       const bendPoints = section.bendPoints ?? [];
       points.push({ x: startPoint.x, y: startPoint.y });
-      for (const bp of bendPoints) {
-        points.push({ x: bp.x, y: bp.y });
-      }
+      for (const bp of bendPoints) points.push({ x: bp.x, y: bp.y });
       points.push({ x: endPoint.x, y: endPoint.y });
     }
+    const isSelf = t.from === t.to;
+    const isBackward = !isSelf && (nodeXMap[t.to] ?? 0) <= (nodeXMap[t.from] ?? 0);
+    const lw = label?.width ?? LABEL_BASE_W;
+    const lh = label?.height ?? LABEL_H;
     return {
       id: e.id,
       from: t.from,
@@ -5677,11 +6051,15 @@ async function computeLayout(data) {
       event: t.event,
       effects: t.effects,
       guard: !!t.guard,
+      guardExpr: typeof t.guard === "string" ? t.guard : void 0,
       index: t.index,
-      labelX: (label?.x ?? 0) + (label?.width ?? 0) / 2,
-      labelY: (label?.y ?? 0) + (label?.height ?? 0) / 2,
+      labelX: label?.x ?? 0,
+      labelY: label?.y ?? 0,
+      labelW: lw,
+      labelH: lh,
       points,
-      isSelf: t.from === t.to
+      isSelf,
+      isBackward
     };
   });
   return {
@@ -5694,25 +6072,11 @@ async function computeLayout(data) {
 function edgePath(points) {
   if (points.length === 0) return "";
   let d = `M ${points[0].x},${points[0].y}`;
-  for (let i = 1; i < points.length; i++) {
-    d += ` L ${points[i].x},${points[i].y}`;
-  }
+  for (let i = 1; i < points.length; i++) d += ` L ${points[i].x},${points[i].y}`;
   return d;
 }
-function mapEffectType(label) {
-  const map = {
-    "render-ui": "render-ui",
-    set: "set",
-    persist: "persist",
-    fetch: "fetch",
-    emit: "emit",
-    navigate: "navigate",
-    notify: "notify",
-    "call-service": "call-service",
-    log: "log"
-  };
-  return map[label] ?? "log";
-}
+var SWIM_GUTTER = 120;
+var CENTER_W = 360;
 var AvlTraitScene = ({
   data,
   color = "var(--color-primary)",
@@ -5726,113 +6090,60 @@ var AvlTraitScene = ({
   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 padding = 30;
-  const availW = 600 - padding * 2;
-  const availH = 340;
+  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
+  const machineOffsetX = hasExternal ? 0 : 30;
+  const padding = 20;
+  const availW = CENTER_W - 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 = 60 + (availH - scaledH) / 2;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("text", { x: 300, y: 24, textAnchor: "middle", fill: color, fontSize: 16, fontWeight: "bold", children: data.name }),
-    /* @__PURE__ */ jsxs("text", { x: 300, y: 42, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, children: [
+  const offsetY = 50 + (availH - scaledH) / 2;
+  const machineHeight = scaledH + 100;
+  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("text", { x: CENTER_W / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
+    /* @__PURE__ */ jsxs("text", { x: CENTER_W / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
       "linked to ",
       data.linkedEntity
     ] }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "traitArrow", 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: color, opacity: 0.6 }) }) }),
+    /* @__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 hasEmit = edge.effects.some((e) => e.type === "emit");
+        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: color,
-              strokeWidth: 1.5,
-              opacity: 0.4,
-              markerEnd: "url(#traitArrow)"
+              stroke: conn.color,
+              strokeWidth: conn.width,
+              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
+              opacity: 0.5,
+              markerEnd: marker
             }
           ),
-          (() => {
-            const visibleEffects = edge.effects.slice(0, 4);
-            const textW = Math.max(edge.event.length * 7, 40);
-            const iconsW = visibleEffects.length * 14;
-            const cardW = Math.max(textW, iconsW) + 20;
-            const hasEffects = visibleEffects.length > 0;
-            const cardH = hasEffects ? 34 : 20;
-            const cardX = edge.labelX - cardW / 2;
-            const cardY = edge.labelY - 10;
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: cardX,
-                  y: cardY,
-                  width: cardW,
-                  height: cardH,
-                  rx: 5,
-                  fill: "var(--color-surface, white)",
-                  stroke: color,
-                  strokeWidth: 0.8,
-                  opacity: 0.95
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: edge.labelX,
-                  y: cardY + 13,
-                  textAnchor: "middle",
-                  fill: color,
-                  fontSize: 11,
-                  fontWeight: "600",
-                  children: edge.event
-                }
-              ),
-              hasEffects && /* @__PURE__ */ jsx("g", { children: visibleEffects.map((eff, ei) => {
-                const iconX = edge.labelX - (visibleEffects.length - 1) * 7 + ei * 14;
-                return /* @__PURE__ */ jsx(
-                  AvlEffect,
-                  {
-                    x: iconX,
-                    y: cardY + 25,
-                    effectType: mapEffectType(eff.type),
-                    size: 9,
-                    color
-                  },
-                  `${edge.id}-eff-${ei}`
-                );
-              }) }),
-              edge.guard && /* @__PURE__ */ jsx(
-                AvlGuard,
-                {
-                  x: cardX + cardW - 10,
-                  y: cardY + 10,
-                  label: "",
-                  color,
-                  size: 6
-                }
-              ),
-              hasEmit && /* @__PURE__ */ jsxs("circle", { cx: cardX - 8, cy: cardY + cardH / 2, r: 3, fill: color, opacity: 0.5, children: [
-                /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "2;5;2", dur: "1.5s", repeatCount: "indefinite" }),
-                /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.5;0.15;0.5", dur: "1.5s", repeatCount: "indefinite" })
-              ] })
-            ] });
-          })(),
-          onTransitionClick && /* @__PURE__ */ jsx(
-            AvlClickTarget,
+          /* @__PURE__ */ jsx(
+            AvlTransitionLane,
             {
-              x: edge.labelX - 50,
-              y: edge.labelY - 15,
-              width: 100,
-              height: 30,
-              onClick: () => onTransitionClick(edge.index, { x: edge.labelX + offsetX, y: edge.labelY + offsetY }),
-              label: `${edge.event}: ${edge.from} -> ${edge.to}`,
-              glowColor: color,
-              children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 0, height: 0, fill: "transparent" })
+              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_GUTTER : machineOffsetX),
+                y: edge.labelY + offsetY
+              }) : void 0
             }
           )
         ] }, edge.id);
@@ -5847,223 +6158,263 @@ var AvlTraitScene = ({
           name: node.id,
           isInitial: node.isInitial,
           isTerminal: node.isTerminal,
+          role: node.role,
+          transitionCount: node.transitionCount,
           color
         }
       ) }, node.id))
-    ] }),
-    data.emittedEvents.map((evt, i) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("line", { x1: 450, y1: 55 + i * 22, x2: 585, y2: 55 + i * 22, stroke: color, strokeWidth: 1, strokeDasharray: "4 3", opacity: 0.3 }),
-      /* @__PURE__ */ jsxs("text", { x: 588, y: 59 + i * 22, fill: color, fontSize: 10, opacity: 0.5, children: [
-        "emit: ",
-        evt
-      ] })
-    ] }, `emit-${i}`)),
-    data.listenedEvents.map((evt, i) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("line", { x1: 15, y1: 55 + i * 22, x2: 150, y2: 55 + i * 22, stroke: color, strokeWidth: 1, strokeDasharray: "4 3", opacity: 0.3 }),
-      /* @__PURE__ */ jsxs("text", { x: 5, y: 59 + i * 22, fill: color, fontSize: 10, opacity: 0.5, children: [
-        "listen: ",
-        evt
-      ] })
-    ] }, `listen-${i}`))
+    ] })
   ] });
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
+  }
+  return /* @__PURE__ */ jsx(
+    AvlSwimLane,
+    {
+      listenedEvents: data.listenedEvents,
+      emittedEvents: data.emittedEvents,
+      centerWidth: CENTER_W,
+      height: machineHeight,
+      color,
+      children: renderMachine
+    }
+  );
 };
 AvlTraitScene.displayName = "AvlTraitScene";
 var CX2 = 300;
-var STATE_W2 = 120;
-var STATE_H2 = 40;
-var CARD_W = 140;
-function mapEffectType2(label) {
-  const map = {
-    "render-ui": "render-ui",
-    set: "set",
-    persist: "persist",
-    fetch: "fetch",
-    emit: "emit",
-    navigate: "navigate",
-    notify: "notify",
-    "call-service": "call-service",
-    log: "log"
-  };
-  return map[label] ?? "log";
-}
-function EffectNode({ node, x, y, color, id }) {
-  if (node.type === "operator") {
-    const children = node.children ?? [];
-    const maxLabelLen = Math.max(...children.map((c) => c.label.length), 4);
-    const childSpacing = Math.max(90, maxLabelLen * 8 + 20);
-    const totalW = (children.length - 1) * childSpacing;
-    const startX = x - totalW / 2;
-    return /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("rect", { x: x - 30, y: y - 10, width: 60, height: 20, rx: 4, fill: "var(--color-surface, white)", stroke: color, strokeWidth: 0.8 }),
-      /* @__PURE__ */ jsx(AvlEffect, { x: x - 16, y, effectType: mapEffectType2(node.label), size: 10, color }),
-      /* @__PURE__ */ jsx("text", { x: x + 2, y: y + 4, fill: color, fontSize: 9, fontWeight: "500", children: node.label }),
-      children.map((child, i) => {
-        const cx = startX + i * childSpacing;
-        const cy = y + 40;
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx("line", { x1: x, y1: y + 10, x2: cx, y2: cy - 10, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
-          /* @__PURE__ */ jsx(EffectNode, { node: child, x: cx, y: cy, color, id: `${id}-${i}` })
-        ] }, `${id}-${i}`);
-      })
-    ] });
+var CARD_W = 440;
+var CARD_X = CX2 - CARD_W / 2;
+var SECTION_LEFT = CARD_X + 16;
+var CONTENT_LEFT = CARD_X + 24;
+function flattenEffect(node) {
+  const args = [];
+  for (const child of node.children ?? []) {
+    args.push(child.label);
   }
-  const isBinding = node.type === "binding";
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx: x,
-        cy: y,
-        r: isBinding ? 6 : 5,
-        fill: isBinding ? "none" : color,
-        opacity: isBinding ? 1 : 0.15,
-        stroke: color,
-        strokeWidth: 1,
-        strokeDasharray: isBinding ? "2 1.5" : "none"
-      }
-    ),
-    /* @__PURE__ */ jsx("text", { x, y: y + 16, textAnchor: "middle", fill: color, fontSize: 8, opacity: 0.7, children: node.label })
-  ] });
+  return { type: node.label, args };
+}
+function mapEffectType(label) {
+  const valid = [
+    "render-ui",
+    "set",
+    "persist",
+    "fetch",
+    "emit",
+    "navigate",
+    "notify",
+    "call-service",
+    "spawn",
+    "despawn",
+    "do",
+    "if",
+    "log"
+  ];
+  return valid.includes(label) ? label : "log";
 }
 var AvlTransitionScene = ({
   data,
   color = "var(--color-primary)"
 }) => {
-  let curY = 30;
-  const fromY = curY;
-  curY += STATE_H2;
-  curY += 15;
-  const eventY = curY;
-  const eventH = 24;
-  curY += eventH + 8;
-  const guardY = curY;
+  const fromRole = getStateRole(data.from, true);
+  const toRole = getStateRole(data.to, false, false);
+  const fromColors = STATE_COLORS[fromRole];
+  const toColors = STATE_COLORS[toRole];
   const hasGuard = !!data.guard;
-  if (hasGuard) {
-    curY += 24 + 8;
-  }
-  curY += 15;
-  const effectsY = curY;
   const hasEffects = data.effects.length > 0;
-  const effectsH = hasEffects ? 80 : 0;
-  if (hasEffects) curY += effectsH + 8;
-  const slotsY = curY;
   const hasSlots = data.slotTargets.length > 0;
-  const slotsH = hasSlots ? 30 : 0;
-  if (hasSlots) curY += slotsH + 8;
-  curY += 15;
-  const toY = curY;
-  curY += STATE_H2;
-  const totalH = curY;
-  const offsetY = Math.max(0, (400 - totalH) / 2);
-  return /* @__PURE__ */ jsxs("g", { transform: `translate(0,${offsetY})`, children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "transArrow", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: color, opacity: 0.5 }) }) }),
-    /* @__PURE__ */ jsx(AvlState, { x: CX2 - STATE_W2 / 2, y: fromY, width: STATE_W2, height: STATE_H2, name: data.from, isInitial: true, color }),
-    /* @__PURE__ */ jsx("line", { x1: CX2, y1: fromY + STATE_H2, x2: CX2, y2: eventY - 2, stroke: color, strokeWidth: 1.5, opacity: 0.4, markerEnd: "url(#transArrow)" }),
+  const effects = data.effects.map(flattenEffect);
+  const headerH = 52;
+  const sectionGap = 8;
+  const triggerH = 34;
+  const guardH = hasGuard ? 30 + sectionGap : 0;
+  const effectRowH = 28;
+  const effectsH = hasEffects ? 24 + effects.length * effectRowH + sectionGap : 0;
+  const slotsH = hasSlots ? 24 + data.slotTargets.length * 22 + sectionGap : 0;
+  const cardH = headerH + triggerH + guardH + effectsH + slotsH + 16;
+  const cardY = Math.max(20, (400 - cardH) / 2);
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
       {
-        x: CX2 - CARD_W / 2,
-        y: eventY,
+        x: CARD_X,
+        y: cardY,
         width: CARD_W,
-        height: eventH,
-        rx: 5,
+        height: cardH,
+        rx: 12,
         fill: "var(--color-surface, white)",
+        fillOpacity: 0.97,
         stroke: color,
-        strokeWidth: 1
+        strokeWidth: 0.8,
+        strokeOpacity: 0.2
       }
     ),
-    /* @__PURE__ */ jsx("text", { x: CX2, y: eventY + 15, textAnchor: "middle", fill: color, fontSize: 13, fontWeight: "700", children: data.event }),
-    hasGuard && data.guard && /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("line", { x1: CX2, y1: eventY + eventH, x2: CX2, y2: guardY - 2, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: CX2 - 50,
-          y: guardY,
-          width: 100,
-          height: 20,
-          rx: 4,
-          fill: "var(--color-surface, white)",
-          stroke: color,
-          strokeWidth: 0.8,
-          opacity: 0.9
-        }
-      ),
-      /* @__PURE__ */ jsx("text", { x: CX2 - 6, y: guardY + 14, textAnchor: "middle", fill: color, fontSize: 10, children: data.guard.label }),
-      /* @__PURE__ */ jsx(
-        "polygon",
-        {
-          points: `${CX2 - 40},${guardY + 10} ${CX2 - 46},${guardY + 10 - 5} ${CX2 - 40},${guardY + 10 - 10} ${CX2 - 34},${guardY + 10 - 5}`,
-          fill: color,
-          opacity: 0.2,
-          stroke: color,
-          strokeWidth: 0.8
-        }
-      )
-    ] }),
     /* @__PURE__ */ jsx(
-      "line",
+      "rect",
       {
-        x1: CX2,
-        y1: hasGuard ? guardY + 20 : eventY + eventH,
-        x2: CX2,
-        y2: hasEffects ? effectsY - 8 : hasSlots ? slotsY - 8 : toY - 2,
-        stroke: color,
-        strokeWidth: 1.5,
+        x: CARD_X,
+        y: cardY,
+        width: CARD_W,
+        height: headerH,
+        rx: 12,
+        fill: color,
+        fillOpacity: 0.03
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: CARD_X,
+        y: cardY + headerH - 12,
+        width: CARD_W,
+        height: 12,
+        fill: color,
+        fillOpacity: 0.03
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: CARD_X + 20,
+        y: cardY + 12,
+        width: 140,
+        height: 30,
+        rx: 15,
+        fill: fromColors.fill,
+        stroke: fromColors.border,
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: CARD_X + 90,
+        y: cardY + 31,
+        textAnchor: "middle",
+        fill: fromColors.border,
+        fontSize: 14,
+        fontWeight: 600,
+        fontFamily: "inherit",
+        children: data.from
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: CX2,
+        y: cardY + 32,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 16,
         opacity: 0.4,
-        markerEnd: "url(#transArrow)"
+        fontFamily: "inherit",
+        children: "\u2192"
       }
     ),
-    hasEffects && /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("text", { x: CX2, y: effectsY - 2, textAnchor: "middle", fill: color, fontSize: 9, fontWeight: "600", opacity: 0.5, children: "EFFECTS" }),
-      data.effects.map((effect, i) => {
-        const effectSpacing = 130;
-        const effectX = CX2 - (data.effects.length - 1) * effectSpacing / 2 + i * effectSpacing;
-        return /* @__PURE__ */ jsx(EffectNode, { node: effect, x: effectX, y: effectsY + 20, color, id: `eff-${i}` }, `eff-${i}`);
-      })
-    ] }),
-    hasSlots && /* @__PURE__ */ jsxs("g", { children: [
-      hasEffects && /* @__PURE__ */ jsx("line", { x1: CX2, y1: effectsY + effectsH - 10, x2: CX2, y2: slotsY - 4, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-      /* @__PURE__ */ jsx("text", { x: CX2, y: slotsY - 2, textAnchor: "middle", fill: color, fontSize: 9, fontWeight: "600", opacity: 0.5, children: "SLOTS" }),
-      data.slotTargets.map((slot, i) => {
-        const sx = CX2 - (data.slotTargets.length - 1) * 90 / 2 + i * 90;
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: sx - 35,
-              y: slotsY + 4,
-              width: 70,
-              height: 20,
-              rx: 4,
-              fill: color,
-              opacity: 0.08,
-              stroke: color,
-              strokeWidth: 0.8
-            }
-          ),
-          /* @__PURE__ */ jsxs("text", { x: sx, y: slotsY + 17, textAnchor: "middle", fill: color, fontSize: 9, children: [
-            slot.name,
-            ": ",
-            slot.pattern
-          ] })
-        ] }, `slot-${i}`);
-      })
-    ] }),
-    (hasEffects || hasSlots) && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: CARD_X + CARD_W - 160,
+        y: cardY + 12,
+        width: 140,
+        height: 30,
+        rx: 15,
+        fill: toColors.fill,
+        stroke: toColors.border,
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: CARD_X + CARD_W - 90,
+        y: cardY + 31,
+        textAnchor: "middle",
+        fill: toColors.border,
+        fontSize: 14,
+        fontWeight: 600,
+        fontFamily: "inherit",
+        children: data.to
+      }
+    ),
+    /* @__PURE__ */ jsx(
       "line",
       {
-        x1: CX2,
-        y1: hasSlots ? slotsY + slotsH : effectsY + effectsH - 10,
-        x2: CX2,
-        y2: toY - 2,
+        x1: CARD_X + 12,
+        y1: cardY + headerH,
+        x2: CARD_X + CARD_W - 12,
+        y2: cardY + headerH,
         stroke: color,
-        strokeWidth: 1.5,
-        opacity: 0.4,
-        markerEnd: "url(#transArrow)"
+        strokeWidth: 0.5,
+        opacity: 0.1
       }
     ),
-    /* @__PURE__ */ jsx(AvlState, { x: CX2 - STATE_W2 / 2, y: toY, width: STATE_W2, height: STATE_H2, name: data.to, color })
+    (() => {
+      const secY = cardY + headerH + sectionGap;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "TRIGGER" }),
+        /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 14, y: secY + 28, fill: color, fontSize: 14, fontWeight: 600, fontFamily: "inherit", children: data.event }),
+        /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 4, y: secY + 28, fill: color, fontSize: 10, opacity: 0.5, children: "\u26A1" })
+      ] });
+    })(),
+    hasGuard && data.guard && (() => {
+      const secY = cardY + headerH + sectionGap + triggerH;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "GUARD" }),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${CONTENT_LEFT + 6},${secY + 22} ${CONTENT_LEFT + 2},${secY + 26} ${CONTENT_LEFT + 6},${secY + 30} ${CONTENT_LEFT + 10},${secY + 26}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.5
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 18, y: secY + 29, fill: color, fontSize: 12, fontWeight: 400, opacity: 0.6, fontFamily: "inherit", children: data.guard.label })
+      ] });
+    })(),
+    hasEffects && (() => {
+      const secY = cardY + headerH + sectionGap + triggerH + guardH;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "EFFECTS" }),
+        effects.map((eff, i) => {
+          const rowY = secY + 22 + i * effectRowH;
+          const effectType = mapEffectType(eff.type);
+          const argsText = eff.args.length > 0 ? eff.args.join(" \xB7 ") : "";
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              AvlEffect,
+              {
+                x: CONTENT_LEFT + 10,
+                y: rowY + 6,
+                effectType,
+                size: 10,
+                showBackground: true
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 28, y: rowY + 10, fill: color, fontSize: 12, fontWeight: 500, opacity: 0.8, fontFamily: "inherit", children: eff.type }),
+            argsText && /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 28 + eff.type.length * 7 + 8, y: rowY + 10, fill: color, fontSize: 10, fontWeight: 400, opacity: 0.5, fontFamily: "monospace", children: argsText })
+          ] }, `eff-${i}`);
+        })
+      ] });
+    })(),
+    hasSlots && (() => {
+      const secY = cardY + headerH + sectionGap + triggerH + guardH + effectsH;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "SLOTS" }),
+        data.slotTargets.map((slot, i) => {
+          const rowY = secY + 22 + i * 22;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("rect", { x: CONTENT_LEFT, y: rowY - 4, width: CARD_W - 56, height: 18, rx: 4, fill: color, fillOpacity: 0.04 }),
+            /* @__PURE__ */ jsxs("text", { x: CONTENT_LEFT + 8, y: rowY + 8, fill: color, fontSize: 11, fontFamily: "inherit", children: [
+              slot.name,
+              ": ",
+              slot.pattern
+            ] })
+          ] }, `slot-${i}`);
+        })
+      ] });
+    })()
   ] });
 };
 AvlTransitionScene.displayName = "AvlTransitionScene";
@@ -6460,4 +6811,4 @@ var AvlCosmicZoom = ({
 };
 AvlCosmicZoom.displayName = "AvlCosmicZoom";
 
-export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlApplicationScene, AvlBinding, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalScene, AvlOrbitalUnit, AvlPage, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionScene, arcPath, curveControlPoint, gridPositions, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions };
+export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlApplicationScene, AvlBinding, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalScene, AvlOrbitalUnit, AvlPage, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionScene, CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, STATE_COLORS, arcPath, curveControlPoint, getStateRole, gridPositions, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions };