@almadar/ui 4.54.8 → 4.54.10

package/dist/avl/index.js

@@ -62053,30 +62053,39 @@ var TraitCardNodeInner = (props) => {
             /* @__PURE__ */ jsx(Typography, { variant: "h6", weight: "semibold", children: traitName }),
             linkedEntity ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: linkedEntity }) : null
           ] }),
-          traitLevelData ? /* @__PURE__ */ jsx(
-            "svg",
-            {
-              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
-                    });
+          traitLevelData ? (
+            // `nodrag` + `nowheel` tell xyflow to skip its drag/wheel
+            // handlers on this element, so transition-arc clicks inside
+            // the SVG actually reach React's onClick handlers instead of
+            // being swallowed by the node-drag behavior. `nopan` keeps the
+            // ReactFlow canvas from panning when the user scrolls or
+            // pans within the trait card.
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: `0 0 ${SCENE_WIDTH} ${SCENE_HEIGHT}`,
+                className: "nodrag nopan nowheel",
+                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" })
         ] })
       ]
@@ -62623,287 +62632,132 @@ AvlCosmicZoom.displayName = "AvlCosmicZoom";
 init_avl_schema_parser();
 init_avl_zoom_state();
 
-// components/organisms/avl/AvlTransitionScene.tsx
-init_AvlEffect();
-init_types();
-var CX = 300;
-var CARD_W = 440;
-var CARD_X = CX - CARD_W / 2;
-var SECTION_LEFT = CARD_X + 16;
-var CONTENT_LEFT = CARD_X + 24;
+// components/organisms/avl/AvlTransitionDetail.tsx
+init_Card();
+init_Box();
+init_Stack();
+init_Typography();
+init_Badge();
+init_Accordion();
+init_CodeBlock();
+function summarizeArg(node) {
+  const label = node.label;
+  if (label.length <= 32) return label;
+  return `${label.slice(0, 30)}\u2026`;
+}
 function flattenEffect(node) {
-  const args = [];
-  for (const child of node.children ?? []) {
-    args.push(child.label);
+  const args = node.children ?? [];
+  const argSummary = args.slice(0, 2).map(summarizeArg).join(" \xB7 ");
+  return { type: node.label, args, argSummary };
+}
+var AvlTransitionDetail = ({ data }) => {
+  const effects = useMemo(() => data.effects.map(flattenEffect), [data.effects]);
+  const accordionItems = useMemo(() => {
+    return effects.map((eff, i) => {
+      const code = JSON.stringify(
+        [eff.type, ...eff.args.map((a) => safeParseLabel(a.label))],
+        null,
+        2
+      );
+      return {
+        id: `effect-${i}`,
+        header: /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: eff.type }),
+          eff.argSummary ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: eff.argSummary }) : null
+        ] }),
+        content: /* @__PURE__ */ jsx(CodeBlock, { code, language: "json", maxHeight: "320px" })
+      };
+    });
+  }, [effects]);
+  const hasGuard = !!data.guard;
+  const hasEffects = effects.length > 0;
+  const hasSlots = data.slotTargets.length > 0;
+  return /* @__PURE__ */ jsx(Card, { className: "w-full max-w-3xl mx-auto", shadow: "md", children: /* @__PURE__ */ jsx(Box, { className: "p-6", children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "md", justify: "center", align: "center", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "success", size: "lg", children: data.from }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "muted", children: "\u2192" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "lg", children: data.to })
+    ] }),
+    /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: "TRIGGER" }),
+      /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: /* @__PURE__ */ jsxs(Typography, { variant: "body1", weight: "semibold", children: [
+        "\u26A1 ",
+        data.event
+      ] }) })
+    ] }),
+    hasGuard && data.guard && /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: "GUARD" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "muted", children: data.guard.label })
+    ] }),
+    hasEffects && /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "overline", color: "muted", children: [
+        "EFFECTS (",
+        effects.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Accordion, { items: accordionItems, multiple: true })
+    ] }),
+    hasSlots && /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: "SLOTS" }),
+      /* @__PURE__ */ jsx(VStack, { gap: "xs", children: data.slotTargets.map((slot, i) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: slot.name }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: slot.pattern })
+      ] }, `slot-${i}`)) })
+    ] })
+  ] }) }) });
+};
+AvlTransitionDetail.displayName = "AvlTransitionDetail";
+function safeParseLabel(label) {
+  if (typeof label !== "string") return label;
+  const trimmed = label.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return label;
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return 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";
+
+// components/organisms/avl/AvlOrbitalsCosmicZoom.tsx
+init_Box();
+init_Stack();
+init_Typography();
+init_Button();
+init_Icon();
+var UNIT_DISPLAY_W = 240;
+var UNIT_DISPLAY_H = 160;
+function layoutOrbitals(count, containerW, containerH) {
+  if (count === 0) return [];
+  if (count === 1) return [{ cx: containerW / 2, cy: containerH / 2 }];
+  const cols = Math.min(count, Math.ceil(Math.sqrt(count)));
+  const rows = Math.ceil(count / cols);
+  const edgePad = 24;
+  const fitMinCx = UNIT_DISPLAY_W / 2 + edgePad;
+  const fitMinCy = UNIT_DISPLAY_H / 2 + edgePad;
+  const fitMaxCx = Math.max(fitMinCx, containerW - UNIT_DISPLAY_W / 2 - edgePad);
+  const fitMaxCy = Math.max(fitMinCy, containerH - UNIT_DISPLAY_H / 2 - edgePad);
+  const fitStepX = cols > 1 ? (fitMaxCx - fitMinCx) / (cols - 1) : 0;
+  const fitStepY = rows > 1 ? (fitMaxCy - fitMinCy) / (rows - 1) : 0;
+  const stepX = Math.min(fitStepX, UNIT_DISPLAY_W * 3.5);
+  const stepY = Math.min(fitStepY, UNIT_DISPLAY_H * 3.5);
+  const gridW = (cols - 1) * stepX;
+  const gridH = (rows - 1) * stepY;
+  const originX = (containerW - gridW) / 2;
+  const originY = (containerH - gridH) / 2;
+  return Array.from({ length: count }, (_, i) => ({
+    cx: originX + i % cols * stepX,
+    cy: originY + Math.floor(i / cols) * stepY
+  }));
 }
-var AvlTransitionScene = ({
-  data,
-  color = "var(--color-primary)"
-}) => {
-  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;
-  const hasEffects = data.effects.length > 0;
-  const hasSlots = data.slotTargets.length > 0;
-  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: CARD_X,
-        y: cardY,
-        width: CARD_W,
-        height: cardH,
-        rx: 12,
-        fill: "var(--color-surface, white)",
-        fillOpacity: 0.97,
-        stroke: color,
-        strokeWidth: 0.8,
-        strokeOpacity: 0.2
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        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: CX,
-        y: cardY + 32,
-        textAnchor: "middle",
-        fill: color,
-        fontSize: 16,
-        opacity: 0.4,
-        fontFamily: "inherit",
-        children: "\u2192"
-      }
-    ),
-    /* @__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: CARD_X + 12,
-        y1: cardY + headerH,
-        x2: CARD_X + CARD_W - 12,
-        y2: cardY + headerH,
-        stroke: color,
-        strokeWidth: 0.5,
-        opacity: 0.1
-      }
-    ),
-    (() => {
-      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.map((a) => typeof a === "string" ? a : JSON.stringify(a)).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";
-
-// components/organisms/avl/AvlOrbitalsCosmicZoom.tsx
-init_Box();
-init_Stack();
-init_Typography();
-init_Button();
-init_Icon();
-var UNIT_DISPLAY_W = 240;
-var UNIT_DISPLAY_H = 160;
-function layoutOrbitals(count, containerW, containerH) {
-  if (count === 0) return [];
-  if (count === 1) return [{ cx: containerW / 2, cy: containerH / 2 }];
-  const cols = Math.min(count, Math.ceil(Math.sqrt(count)));
-  const rows = Math.ceil(count / cols);
-  const edgePad = 24;
-  const fitMinCx = UNIT_DISPLAY_W / 2 + edgePad;
-  const fitMinCy = UNIT_DISPLAY_H / 2 + edgePad;
-  const fitMaxCx = Math.max(fitMinCx, containerW - UNIT_DISPLAY_W / 2 - edgePad);
-  const fitMaxCy = Math.max(fitMinCy, containerH - UNIT_DISPLAY_H / 2 - edgePad);
-  const fitStepX = cols > 1 ? (fitMaxCx - fitMinCx) / (cols - 1) : 0;
-  const fitStepY = rows > 1 ? (fitMaxCy - fitMinCy) / (rows - 1) : 0;
-  const stepX = Math.min(fitStepX, UNIT_DISPLAY_W * 3.5);
-  const stepY = Math.min(fitStepY, UNIT_DISPLAY_H * 3.5);
-  const gridW = (cols - 1) * stepX;
-  const gridH = (rows - 1) * stepY;
-  const originX = (containerW - gridW) / 2;
-  const originY = (containerH - gridH) / 2;
-  return Array.from({ length: count }, (_, i) => ({
-    cx: originX + i % cols * stepX,
-    cy: originY + Math.floor(i / cols) * stepY
-  }));
-}
-var avlOczWireId = 0;
-var cosmicWireLog = createLogger("almadar:ui:nan-coord");
-var EventWireOverlay = ({
-  orbitalViews,
-  crossLinks,
-  color,
-  animated,
-  containerW,
-  containerH
+var avlOczWireId = 0;
+var cosmicWireLog = createLogger("almadar:ui:nan-coord");
+var EventWireOverlay = ({
+  orbitalViews,
+  crossLinks,
+  color,
+  animated,
+  containerW,
+  containerH
 }) => {
   const ids = React96__default.useMemo(() => {
     avlOczWireId += 1;
@@ -63445,62 +63299,10 @@ var AvlOrbitalsCosmicZoom = ({
               paddingTop: 56,
               paddingBottom: 24,
               paddingLeft: 24,
-              paddingRight: 24
+              paddingRight: 24,
+              overflowY: "auto"
             },
-            children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                ref: transformWrapperRef,
-                position: "relative",
-                onPointerDown: handlePointerDown,
-                onPointerMove: handlePointerMove,
-                onPointerUp: handlePointerUp,
-                onPointerCancel: handlePointerUp,
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  cursor: dragStateRef.current ? "grabbing" : "grab",
-                  overflow: "hidden"
-                },
-                children: /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    position: "absolute",
-                    style: {
-                      inset: 0,
-                      transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                      transformOrigin: "0 0"
-                    },
-                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-                      AvlTransitionScene,
-                      {
-                        data: transitionLevelData,
-                        color
-                      }
-                    ) })
-                  }
-                )
-              }
-            )
-          }
-        ),
-        state.level === "transition" && /* @__PURE__ */ jsxs(
-          Box,
-          {
-            position: "absolute",
-            style: {
-              top: 12,
-              right: 12,
-              display: "flex",
-              flexDirection: "column",
-              gap: 4,
-              zIndex: 30
-            },
-            children: [
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" }) }),
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: "sm" }) }),
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: "sm" }) })
-            ]
+            children: /* @__PURE__ */ jsx(AvlTransitionDetail, { data: transitionLevelData })
           }
         )
       ]
@@ -63508,6 +63310,247 @@ var AvlOrbitalsCosmicZoom = ({
   );
 };
 AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
+
+// components/organisms/avl/AvlTransitionScene.tsx
+init_AvlEffect();
+init_types();
+var CX = 300;
+var CARD_W = 440;
+var CARD_X = CX - CARD_W / 2;
+var SECTION_LEFT = CARD_X + 16;
+var CONTENT_LEFT = CARD_X + 24;
+function flattenEffect2(node) {
+  const args = [];
+  for (const child of node.children ?? []) {
+    args.push(child.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)"
+}) => {
+  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;
+  const hasEffects = data.effects.length > 0;
+  const hasSlots = data.slotTargets.length > 0;
+  const effects = data.effects.map(flattenEffect2);
+  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: CARD_X,
+        y: cardY,
+        width: CARD_W,
+        height: cardH,
+        rx: 12,
+        fill: "var(--color-surface, white)",
+        fillOpacity: 0.97,
+        stroke: color,
+        strokeWidth: 0.8,
+        strokeOpacity: 0.2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        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: CX,
+        y: cardY + 32,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 16,
+        opacity: 0.4,
+        fontFamily: "inherit",
+        children: "\u2192"
+      }
+    ),
+    /* @__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: CARD_X + 12,
+        y1: cardY + headerH,
+        x2: CARD_X + CARD_W - 12,
+        y2: cardY + headerH,
+        stroke: color,
+        strokeWidth: 0.5,
+        opacity: 0.1
+      }
+    ),
+    (() => {
+      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.map((a) => typeof a === "string" ? a : JSON.stringify(a)).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";
 var AvlClickTarget = ({
   x,
   y,