@almadar/ui 4.54.8 → 4.54.9

package/dist/avl/index.js

@@ -62623,246 +62623,91 @@ 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;
-function flattenEffect(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";
+// 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`;
 }
-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];
+function flattenEffect(node) {
+  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 = data.effects.length > 0;
+  const hasEffects = 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}`);
-        })
-      ] });
-    })()
-  ] });
+  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}`)) })
+    ] })
+  ] }) }) });
 };
-AvlTransitionScene.displayName = "AvlTransitionScene";
+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;
+  }
+}
 
 // components/organisms/avl/AvlOrbitalsCosmicZoom.tsx
 init_Box();
@@ -63424,83 +63269,31 @@ var AvlOrbitalsCosmicZoom = ({
               paddingRight: 24
             },
             children: /* @__PURE__ */ jsx(
-              FlowCanvas,
-              {
-                schema: scopedSchema,
-                initialLevel: "trait-expanded",
-                initialOrbital: state.selectedOrbital,
-                onNodeClick: handleCanvasNodeClick,
-                width: "100%",
-                height: "100%"
-              }
-            )
-          }
-        ),
-        state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsx(
-          Box,
-          {
-            position: "absolute",
-            style: {
-              inset: 0,
-              paddingTop: 56,
-              paddingBottom: 24,
-              paddingLeft: 24,
-              paddingRight: 24
-            },
-            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
-                      }
-                    ) })
-                  }
-                )
+              FlowCanvas,
+              {
+                schema: scopedSchema,
+                initialLevel: "trait-expanded",
+                initialOrbital: state.selectedOrbital,
+                onNodeClick: handleCanvasNodeClick,
+                width: "100%",
+                height: "100%"
               }
             )
           }
         ),
-        state.level === "transition" && /* @__PURE__ */ jsxs(
+        state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsx(
           Box,
           {
             position: "absolute",
             style: {
-              top: 12,
-              right: 12,
-              display: "flex",
-              flexDirection: "column",
-              gap: 4,
-              zIndex: 30
+              inset: 0,
+              paddingTop: 56,
+              paddingBottom: 24,
+              paddingLeft: 24,
+              paddingRight: 24,
+              overflowY: "auto"
             },
-            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 +63301,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,