@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/avl/index.js

@@ -0,0 +1,2693 @@
+export { AvlTransitionExplainer } from '../chunk-TESBIVUA.js';
+export { LayersPanel, parseLayerId, schemaToLayerItems } from '../chunk-GKIFONTE.js';
+import { AvlTransitionDetail } from '../chunk-SGM3FASH.js';
+export { AvlCircuit, AvlTransitionDetail } from '../chunk-SGM3FASH.js';
+import { zoomReducer, initialZoomState, getBreadcrumbs } from '../chunk-DJ433ET5.js';
+export { BehaviorView } from '../chunk-DLZF4PVE.js';
+export { MiniStateMachine, ModuleCard } from '../chunk-2PY54Z44.js';
+import '../chunk-U6QRZASX.js';
+import '../chunk-EOWMARUB.js';
+import { FlowCanvas, layeredGraph } from '../chunk-GYTPOFVC.js';
+export { AVL_GRAPH_NODE_TYPES, AvlGraphCanvas, CANVAS_TOOLS, CanvasDndProvider, CanvasVerifyContext, DependencyColumnNode, DependencyNode, EDITABLE, ElementEditAccessContext, EventFlowEdge, FlowCanvas, KnobField, KnobSettingRow, LIVE_STATE, OrbInspector, OrbPreviewNode, SystemBandNode, SystemMapContext, SystemNode, canvasViewGraph, dependencyReach, deriveEditFocusFromElement, dropBusEvent, flowNeighbors, hasCanvasTool, initialStateOf, layeredGraph, optionForPlayedStep, propAccessAt, schemaToDependencyGraph, schemaToOverviewGraph, stateOptionsOf, traitFlowGraph, useCanvasDraggable, useCanvasDroppable, useInlineTextEdit } from '../chunk-GYTPOFVC.js';
+import '../chunk-YDNJLLG6.js';
+export { AvlStateMachine } from '../chunk-KVQS4GXU.js';
+import { AvlOrbital, AvlTrait, AvlEvent, AvlGuard } from '../chunk-L677XGY3.js';
+export { AVL_GLYPH_KINDS, AvlApplication, AvlBinding, AvlBindingRef, AvlEvent, AvlField, AvlGlyph, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlPersistence, AvlSExpr, AvlTrait, AvlTransition } from '../chunk-L677XGY3.js';
+import { AvlEntity, AvlPage, AvlState } from '../chunk-FP3WIKTC.js';
+export { AvlEntity, AvlFieldType, AvlPage, AvlState, FIELD_TYPE_SHAPES } from '../chunk-FP3WIKTC.js';
+import { transitionPlayback } from '../chunk-42FY4RYA.js';
+export { armPosition, armsOf, firedTransition, stateMachinePlayback, transitionPlayback } from '../chunk-42FY4RYA.js';
+import '../chunk-FAJDTHWC.js';
+import { computeTraitLayout, edgePath } from '../chunk-GAR5TQ5B.js';
+export { computeTraitLayout, edgePath } from '../chunk-GAR5TQ5B.js';
+export { AvlEffectChip } from '../chunk-SJGJJKBY.js';
+import { AvlEffect } from '../chunk-DZ42OJQC.js';
+export { AvlEffect } from '../chunk-DZ42OJQC.js';
+import '../chunk-P4LNHAFI.js';
+import '../chunk-TZZBINQY.js';
+import '../chunk-PC7K4SK7.js';
+import { parseApplicationLevel, parseOrbitalLevel, parseTraitLevel } from '../chunk-VFF5OO47.js';
+export { parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, traitLevelFromTrait } from '../chunk-VFF5OO47.js';
+import { avlSeries, CONNECTION_COLORS, getStateRole, avlTint, STATE_COLORS, effectCategoryOf, EFFECT_CATEGORY_COLORS } from '../chunk-DFNZUYX4.js';
+export { CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, effectCategoryOf, getStateRole } from '../chunk-DFNZUYX4.js';
+import '../chunk-B4BU77LT.js';
+import '../chunk-6P3MWXYE.js';
+import '../chunk-DYEKAA4L.js';
+import '../chunk-R5O5AUPI.js';
+import '../chunk-L2DEKY4J.js';
+import '../chunk-AILY3XPS.js';
+import '../chunk-3BBUBJFF.js';
+import '../chunk-YHMRX6YA.js';
+import { useTranslate, cn, Box, HStack, Typography, pressableProps, Button, RangeSlider } from '../chunk-MBQAMMSE.js';
+import '../chunk-A2LR6VQQ.js';
+import '../chunk-P4ZFUQFF.js';
+import '../chunk-G7DCAZ22.js';
+import React4, { createContext, useMemo, useContext, useState, useReducer, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { getBezierPath, BaseEdge, EdgeLabelRenderer } from '@xyflow/react';
+import { createLogger } from '@almadar/logger';
+import { SExprDataSchema, PatternObjectSchema } from '@almadar/core';
+
+var avlOuId = 0;
+var AvlOrbitalUnit = ({
+  entityName,
+  fields = 4,
+  persistence = "persistent",
+  traits,
+  pages,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React4.useMemo(() => {
+    avlOuId += 1;
+    const base = `avl-ou-${avlOuId}`;
+    return { glow: `${base}-glow`, grad: `${base}-grad` };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const entityR = 24;
+  const orbitalR = 130;
+  const traitBaseRx = 55;
+  const traitBaseRy = 24;
+  const traitRxStep = 20;
+  const traitRyStep = 8;
+  const traitAngleStep = traits.length > 1 ? 120 / (traits.length - 1) : 0;
+  const traitAngleStart = traits.length > 1 ? -60 : 0;
+  const pageAngleStart = -Math.PI / 3;
+  const pageAngleStep = pages.length > 1 ? Math.PI * 0.8 / (pages.length - 1) : 0;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
+        /* @__PURE__ */ jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("radialGradient", { id: ids.grad, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-ou-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        ` }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitalR + 20, fill: `url(#${ids.grad})` }),
+    /* @__PURE__ */ jsx(AvlOrbital, { cx, cy, r: orbitalR, label: entityName, color }),
+    traits.map((trait, i) => {
+      const rotation = traitAngleStart + i * traitAngleStep;
+      const traitColor = trait.color ?? color;
+      return /* @__PURE__ */ jsx(
+        AvlTrait,
+        {
+          cx,
+          cy,
+          rx: traitBaseRx + i * traitRxStep,
+          ry: traitBaseRy + i * traitRyStep,
+          rotation,
+          label: trait.name,
+          color: traitColor,
+          opacity: 0.7
+        },
+        trait.name
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      AvlEntity,
+      {
+        x: cx,
+        y: cy,
+        r: entityR,
+        fieldCount: fields,
+        persistence,
+        color
+      }
+    ),
+    pages.map((page, i) => {
+      const angle = pageAngleStart + i * pageAngleStep;
+      const px = cx + orbitalR * Math.cos(angle);
+      const py = cy + orbitalR * Math.sin(angle);
+      return /* @__PURE__ */ jsx(
+        AvlPage,
+        {
+          x: px,
+          y: py,
+          size: 10,
+          label: page.name,
+          color
+        },
+        page.name
+      );
+    })
+  ] });
+};
+AvlOrbitalUnit.displayName = "AvlOrbitalUnit";
+
+// src/lib/avl-layout.ts
+function ringPositions(cx, cy, r, count, startAngle = -Math.PI / 2) {
+  if (count === 0) return [];
+  if (count === 1) {
+    return [{ x: cx, y: cy, angle: 0 }];
+  }
+  if (count === 2) {
+    return [
+      { x: cx - r * 0.7, y: cy, angle: Math.PI },
+      { x: cx + r * 0.7, y: cy, angle: 0 }
+    ];
+  }
+  return Array.from({ length: count }, (_, i) => {
+    const angle = startAngle + Math.PI * 2 * i / count;
+    return {
+      x: cx + r * Math.cos(angle),
+      y: cy + r * Math.sin(angle),
+      angle
+    };
+  });
+}
+function arcPath(cx, cy, r, startAngle, endAngle) {
+  const x1 = cx + r * Math.cos(startAngle);
+  const y1 = cy + r * Math.sin(startAngle);
+  const x2 = cx + r * Math.cos(endAngle);
+  const y2 = cy + r * Math.sin(endAngle);
+  const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+  return `M${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2}`;
+}
+function radialPositions(cx, cy, innerR, outerR, count, startAngle = -Math.PI / 2) {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = startAngle + Math.PI * 2 * i / count;
+    return {
+      x1: cx + innerR * Math.cos(angle),
+      y1: cy + innerR * Math.sin(angle),
+      x2: cx + outerR * Math.cos(angle),
+      y2: cy + outerR * Math.sin(angle),
+      angle
+    };
+  });
+}
+function gridPositions(startX, startY, cols, cellWidth, cellHeight, count) {
+  return Array.from({ length: count }, (_, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    return {
+      x: startX + col * cellWidth,
+      y: startY + row * cellHeight,
+      col,
+      row
+    };
+  });
+}
+function curveControlPoint(x1, y1, x2, y2, offset) {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  return {
+    cpx: mx + -dy / len * offset,
+    cpy: my + dx / len * offset
+  };
+}
+var avlCcId = 0;
+var AvlClosedCircuit = ({
+  states,
+  transitions,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React4.useMemo(() => {
+    avlCcId += 1;
+    const base = `avl-cc-${avlCcId}`;
+    return { glow: `${base}-glow`, grad: `${base}-grad`, arrow: `${base}-arrow` };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const r = 120;
+  const stateW = 80;
+  const stateH = 32;
+  const positions = ringPositions(cx, cy, r, states.length);
+  const stateIndex = new Map(states.map((s, i) => [s.name, i]));
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+        /* @__PURE__ */ jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+        /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "marker",
+        {
+          id: ids.arrow,
+          markerWidth: "8",
+          markerHeight: "6",
+          refX: "7",
+          refY: "3",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+        }
+      )
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-cc-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: r + 30, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.06 }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: 50, fill: "none", stroke: color, strokeWidth: 0.5, opacity: 0.08 }),
+    transitions.map((tr, i) => {
+      const fromIdx = stateIndex.get(tr.from);
+      const toIdx = stateIndex.get(tr.to);
+      if (fromIdx === void 0 || toIdx === void 0) return null;
+      const fp = positions[fromIdx];
+      const tp = positions[toIdx];
+      const dx = tp.x - fp.x;
+      const dy = tp.y - fp.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      const nx = dx / dist;
+      const ny = dy / dist;
+      const x1 = fp.x + nx * (stateW / 2 + 4);
+      const y1 = fp.y + ny * (stateH / 2 + 4);
+      const x2 = tp.x - nx * (stateW / 2 + 8);
+      const y2 = tp.y - ny * (stateH / 2 + 8);
+      const mx = (x1 + x2) / 2;
+      const my = (y1 + y2) / 2;
+      const curvature = dist * 0.25;
+      let perpX = -ny;
+      let perpY = nx;
+      const testX = mx + perpX * curvature;
+      const testY = my + perpY * curvature;
+      const distTest = Math.sqrt((testX - cx) ** 2 + (testY - cy) ** 2);
+      const distMid = Math.sqrt((mx - cx) ** 2 + (my - cy) ** 2);
+      if (distTest < distMid) {
+        perpX = -perpX;
+        perpY = -perpY;
+      }
+      const cpx = mx + perpX * curvature;
+      const cpy = my + perpY * curvature;
+      const d = `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}`;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: `url(#${ids.grad})`,
+            strokeWidth: 1.5,
+            strokeDasharray: animated ? "8 6" : void 0,
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: "avl-cc-flow 1.5s linear infinite" } : void 0
+          }
+        ),
+        tr.event && /* @__PURE__ */ jsx(
+          AvlEvent,
+          {
+            x: cpx,
+            y: cpy - 14,
+            size: 8,
+            label: tr.event,
+            color,
+            opacity: 0.8
+          }
+        ),
+        tr.guard && /* @__PURE__ */ jsx(
+          AvlGuard,
+          {
+            x: mx,
+            y: my - 8,
+            size: 10,
+            label: tr.guard,
+            color,
+            opacity: 0.6
+          }
+        ),
+        tr.effects?.map((eff, j) => /* @__PURE__ */ jsx(
+          AvlEffect,
+          {
+            x: mx + (j - ((tr.effects?.length ?? 1) - 1) / 2) * 14,
+            y: my + 14,
+            effectType: eff,
+            size: 5,
+            color,
+            opacity: 0.7
+          },
+          j
+        ))
+      ] }, `cc-tr-${i}`);
+    }),
+    states.map((state, i) => {
+      const pos = positions[i];
+      return /* @__PURE__ */ jsx(
+        AvlState,
+        {
+          x: pos.x - stateW / 2,
+          y: pos.y - stateH / 2,
+          width: stateW,
+          height: stateH,
+          name: state.name,
+          color
+        },
+        state.name
+      );
+    }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color, opacity: 0.4 })
+  ] });
+};
+AvlClosedCircuit.displayName = "AvlClosedCircuit";
+var avlElId = 0;
+var AvlEmitListen = ({
+  emitter,
+  listener,
+  eventName,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React4.useMemo(() => {
+    avlElId += 1;
+    const base = `avl-el-${avlElId}`;
+    return { arrow: `${base}-arrow`, grad: `${base}-grad` };
+  }, []);
+  const leftCx = 180;
+  const rightCx = 420;
+  const cy = 200;
+  const orbR = 80;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(
+        "marker",
+        {
+          id: ids.arrow,
+          markerWidth: "8",
+          markerHeight: "6",
+          refX: "7",
+          refY: "3",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-el-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsx(AvlOrbital, { cx: leftCx, cy, r: orbR, label: emitter.name, color }),
+    /* @__PURE__ */ jsx(AvlEntity, { x: leftCx, y: cy, r: 18, fieldCount: emitter.fields ?? 3, color }),
+    /* @__PURE__ */ jsx(AvlOrbital, { cx: rightCx, cy, r: orbR, label: listener.name, color }),
+    /* @__PURE__ */ jsx(AvlEntity, { x: rightCx, y: cy, r: 18, fieldCount: listener.fields ?? 3, color }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M${leftCx + orbR + 4},${cy} L${rightCx - orbR - 8},${cy}`,
+        fill: "none",
+        stroke: `url(#${ids.grad})`,
+        strokeWidth: 2,
+        strokeDasharray: "6 4",
+        markerEnd: `url(#${ids.arrow})`,
+        style: animated ? { animation: "avl-el-dash 1s linear infinite" } : void 0
+      }
+    ),
+    eventName && /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: 300,
+        y: cy - 22,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        opacity: 0.8,
+        children: [
+          "~",
+          eventName
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AvlEffect,
+      {
+        x: 300,
+        y: cy - 46,
+        effectType: "emit",
+        size: 7,
+        color,
+        opacity: 0.6
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: 300,
+        y: cy + 18,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 12,
+        fontFamily: "inherit",
+        opacity: 0.3,
+        letterSpacing: 4,
+        children: "~ ~ ~"
+      }
+    )
+  ] });
+};
+AvlEmitListen.displayName = "AvlEmitListen";
+var SLOT_PRESETS = {
+  header: { x: 10, y: 5, width: 340, height: 35 },
+  main: { x: 120, y: 50, width: 230, height: 195 },
+  sidebar: { x: 10, y: 50, width: 100, height: 195 },
+  modal: { x: 80, y: 60, width: 200, height: 140 },
+  drawer: { x: 220, y: 50, width: 130, height: 195 },
+  toast: { x: 220, y: 210, width: 130, height: 35 },
+  footer: { x: 10, y: 220, width: 340, height: 30 },
+  center: { x: 60, y: 50, width: 240, height: 195 },
+  "hud-top": { x: 10, y: 5, width: 340, height: 30 },
+  "hud-bottom": { x: 10, y: 220, width: 340, height: 30 }
+};
+function resolveSlot(slot, fallbackIdx) {
+  if (slot.x !== void 0 && slot.y !== void 0 && slot.width !== void 0 && slot.height !== void 0) {
+    return slot;
+  }
+  const preset = SLOT_PRESETS[slot.name];
+  if (preset) {
+    return {
+      name: slot.name,
+      x: slot.x ?? preset.x,
+      y: slot.y ?? preset.y,
+      width: slot.width ?? preset.width,
+      height: slot.height ?? preset.height
+    };
+  }
+  const col = fallbackIdx % 2;
+  const row = Math.floor(fallbackIdx / 2);
+  return {
+    name: slot.name,
+    x: 10 + col * 175,
+    y: 50 + row * 100,
+    width: 165,
+    height: 90
+  };
+}
+var AvlSlotMap = ({
+  slots,
+  pageWidth = 360,
+  pageHeight = 280,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const { t } = useTranslate();
+  const ox = (600 - pageWidth) / 2;
+  const oy = (400 - pageHeight) / 2;
+  let unknownIdx = 0;
+  const resolvedSlots = slots.map((slot) => {
+    const isUnknown = !SLOT_PRESETS[slot.name] && (slot.x === void 0 || slot.y === void 0);
+    const resolved = resolveSlot(slot, isUnknown ? unknownIdx : 0);
+    if (isUnknown) unknownIdx++;
+    return resolved;
+  });
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
+        ` }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: ox,
+        y: oy,
+        width: pageWidth,
+        height: pageHeight,
+        rx: 4,
+        ry: 4,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: ox,
+        y: oy,
+        width: pageWidth,
+        height: 24,
+        rx: 4,
+        ry: 4,
+        fill: color,
+        opacity: 0.1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: ox + pageWidth / 2,
+        y: oy + 16,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: t("avl.pageLayout")
+      }
+    ),
+    resolvedSlots.map((slot) => {
+      const isOverlay = ["modal", "drawer", "toast"].includes(slot.name);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        isOverlay && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: ox + slot.x + 3,
+            y: oy + 24 + slot.y + 3,
+            width: slot.width,
+            height: slot.height,
+            rx: 3,
+            ry: 3,
+            fill: "var(--color-foreground)",
+            opacity: 0.06
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: ox + slot.x,
+            y: oy + 24 + slot.y,
+            width: slot.width,
+            height: slot.height,
+            rx: 3,
+            ry: 3,
+            fill: isOverlay ? "var(--color-surface)" : color,
+            opacity: isOverlay ? 0.9 : 0.08,
+            stroke: color,
+            strokeWidth: isOverlay ? 1.5 : 1,
+            strokeDasharray: isOverlay ? "6 3" : "4 2",
+            style: animated ? { animation: "avl-slot-pulse 2s ease-in-out infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: ox + slot.x + slot.width / 2,
+            y: oy + 24 + slot.y + slot.height / 2,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fill: color,
+            fontSize: 9,
+            fontFamily: "inherit",
+            opacity: 0.6,
+            children: [
+              slot.name,
+              isOverlay ? ` ${t("avl.overlaySuffix")}` : ""
+            ]
+          }
+        )
+      ] }, slot.name);
+    })
+  ] });
+};
+AvlSlotMap.displayName = "AvlSlotMap";
+var avlEtId = 0;
+function layoutTree(node, x, y, hSpacing, vSpacing) {
+  const children = node.children ?? [];
+  if (children.length === 0) {
+    return { label: node.label, type: node.type, x, y, children: [] };
+  }
+  const totalWidth = (children.length - 1) * hSpacing;
+  const startX = x - totalWidth / 2;
+  const layoutChildren = children.map(
+    (child, i) => layoutTree(child, startX + i * hSpacing, y + vSpacing, hSpacing * 0.85, vSpacing)
+  );
+  return { label: node.label, type: node.type, x, y, children: layoutChildren };
+}
+function nodeColor(type, baseColor) {
+  switch (type) {
+    case "operator":
+      return baseColor;
+    case "literal":
+      return baseColor;
+    case "binding":
+      return baseColor;
+  }
+}
+function renderNode(node, color, glowId) {
+  const labelLen = node.label.length;
+  const baseR = node.type === "operator" ? 20 : 16;
+  const r = Math.max(baseR, labelLen * 3.5 + 6);
+  const nc = nodeColor(node.type, color);
+  return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+    node.children.map((child, i) => {
+      const childR = Math.max(
+        child.type === "operator" ? 20 : 16,
+        child.label.length * 3.5 + 6
+      );
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: node.x,
+          y1: node.y + (node.type === "operator" ? r * 0.7 : r),
+          x2: child.x,
+          y2: child.y - (child.type === "operator" ? childR * 0.7 : childR),
+          stroke: color,
+          strokeWidth: 1,
+          opacity: 0.3
+        },
+        `line-${i}`
+      );
+    }),
+    node.type === "operator" ? /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: node.x - r,
+        y: node.y - r * 0.6,
+        width: r * 2,
+        height: r * 1.2,
+        rx: 4,
+        ry: 4,
+        fill: color,
+        fillOpacity: 0.15,
+        stroke: nc,
+        strokeWidth: 1.5
+      }
+    ) : node.type === "binding" ? /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r, fill: "none", stroke: nc, strokeWidth: 1.5, strokeDasharray: "3 2" }) : /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r, fill: "none", stroke: nc, strokeWidth: 1, opacity: 0.5 }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: node.x,
+        y: node.y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: nc,
+        fontSize: node.type === "operator" ? 11 : 10,
+        fontFamily: "inherit",
+        fontWeight: node.type === "operator" ? "bold" : "normal",
+        children: node.type === "binding" && !node.label.startsWith("@") ? `@${node.label}` : node.label
+      }
+    ),
+    node.children.map((child) => renderNode(child, color))
+  ] }, `${node.label}-${node.x}-${node.y}`);
+}
+var AvlExprTree = ({
+  expression,
+  className,
+  color = "var(--color-primary)"
+}) => {
+  const ids = React4.useMemo(() => {
+    avlEtId += 1;
+    return { glow: `avl-et-${avlEtId}-glow` };
+  }, []);
+  const layout = layoutTree(expression, 400, 60, 280, 100);
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 800 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }) }),
+    renderNode(layout, color, ids.glow)
+  ] });
+};
+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 { t, locale } = useTranslate();
+  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: t("avlSwimLane.listens").toLocaleUpperCase(locale)
+        }
+      ),
+      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: t("avlSwimLane.emits").toLocaleUpperCase(locale)
+        }
+      ),
+      emittedEvents.map((evt, i) => {
+        const ey = EVENT_START_Y + i * EVENT_SPACING;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: totalWidth - 18,
+              y: ey + 4,
+              fontSize: 11,
+              fontWeight: 500,
+              fill: color,
+              opacity: 0.6,
+              fontFamily: "inherit",
+              textAnchor: "end",
+              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";
+var DOMAIN_ORDER = [
+  "commerce",
+  "healthcare",
+  "education",
+  "finance",
+  "scheduling",
+  "workflow",
+  "social",
+  "media",
+  "gaming",
+  "iot",
+  "crm",
+  "analytics",
+  "communication",
+  "content",
+  "location",
+  "hr",
+  "legal",
+  "real-estate"
+];
+var DOMAIN_COLORS = Object.fromEntries(DOMAIN_ORDER.map((domain, i) => [domain, avlSeries(i)]));
+var SIZE_MAP = {
+  xs: 32,
+  sm: 48,
+  md: 120,
+  lg: 200,
+  xl: 300
+};
+function PersistenceCore({ cx, cy, r, persistence, color }) {
+  switch (persistence) {
+    case "runtime":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: "none", stroke: color, strokeWidth: 1.5, strokeDasharray: "4 2", opacity: 0.9 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: r * 0.4, fill: color, opacity: 0.3, children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;0.6;0.3", dur: "2s", repeatCount: "indefinite" }) })
+      ] });
+    case "persistent":
+    default:
+      return /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: color, fillOpacity: 0.15, stroke: color, strokeWidth: 2 });
+  }
+}
+function FieldSpokes({ cx, cy, innerR, outerR, count, color }) {
+  if (count === 0) return null;
+  const spokes = Array.from({ length: count }, (_, i) => {
+    const angle = Math.PI * 2 * i / count - Math.PI / 2;
+    return /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: cx + innerR * Math.cos(angle),
+        y1: cy + innerR * Math.sin(angle),
+        x2: cx + outerR * Math.cos(angle),
+        y2: cy + outerR * Math.sin(angle),
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.5
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: spokes });
+}
+function StateRings({ cx, cy, baseR, count, color, animated }) {
+  if (count === 0) return null;
+  const ringCount = Math.min(count, 5);
+  const ringSpacing = baseR * 0.25;
+  const rings = Array.from({ length: ringCount }, (_, i) => {
+    const r = baseR + (i + 1) * ringSpacing;
+    const opacity = 0.6 - i * 0.1;
+    const width = i === 0 ? 1.5 : 1;
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: "none",
+        stroke: color,
+        strokeWidth: width,
+        opacity,
+        children: animated && /* @__PURE__ */ jsx(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: `0 ${cx} ${cy}`,
+            to: `${i % 2 === 0 ? 360 : -360} ${cx} ${cy}`,
+            dur: `${8 + i * 4}s`,
+            repeatCount: "indefinite"
+          }
+        )
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: rings });
+}
+function EffectMarkers({ cx, cy, r, effectTypes, baseColor }) {
+  if (effectTypes.length === 0) return null;
+  const seen = /* @__PURE__ */ new Set();
+  const categories = [];
+  for (const t of effectTypes) {
+    const cat = effectCategoryOf(t);
+    if (cat !== null && !seen.has(cat)) {
+      seen.add(cat);
+      categories.push({ type: t, category: cat });
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: categories.map(({ type, category }, i) => {
+    const angle = Math.PI * 2 * i / categories.length - Math.PI / 2;
+    const mx = cx + r * Math.cos(angle);
+    const my = cy + r * Math.sin(angle);
+    const markerColor = EFFECT_CATEGORY_COLORS[category].color;
+    const s = r * 0.12;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("circle", { cx: mx, cy: my, r: s + 1, fill: markerColor, fillOpacity: 0.2 }),
+      /* @__PURE__ */ jsx("circle", { cx: mx, cy: my, r: s * 0.6, fill: markerColor })
+    ] }, type);
+  }) });
+}
+function AtomGlyph({ cx, cy, radius, fieldCount, stateCount, persistence, effectTypes, color, animated, showLabels, name }) {
+  const coreR = radius * 0.25;
+  const spokeInner = coreR + 2;
+  const spokeOuter = coreR + radius * 0.15;
+  const ringBase = coreR + radius * 0.18;
+  const markerR = ringBase + Math.min(stateCount, 5) * (radius * 0.25) * 0.25 + radius * 0.08;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(PersistenceCore, { cx, cy, r: coreR, persistence, color }),
+    /* @__PURE__ */ jsx(FieldSpokes, { cx, cy, innerR: spokeInner, outerR: spokeOuter, count: fieldCount, color }),
+    /* @__PURE__ */ jsx(StateRings, { cx, cy, baseR: ringBase, count: stateCount, color, animated }),
+    /* @__PURE__ */ jsx(EffectMarkers, { cx, cy, r: markerR, effectTypes, baseColor: color }),
+    showLabels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + radius + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: radius * 0.14,
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 500,
+        opacity: 0.8,
+        children: name
+      }
+    )
+  ] });
+}
+function MoleculeGlyph({ cx, cy, radius, children, color, animated, showLabels, name }) {
+  const count = children.length || 1;
+  const childR = radius / (count <= 3 ? 2.8 : 3.5);
+  const orbitR = radius * 0.5;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitR, fill: "none", stroke: color, strokeWidth: 0.8, strokeDasharray: "3 2", opacity: 0.3 }),
+    children.map((child, i) => {
+      const angle = Math.PI * 2 * i / count - Math.PI / 2;
+      const childCx = cx + orbitR * Math.cos(angle);
+      const childCy = cy + orbitR * Math.sin(angle);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: cx, y1: cy, x2: childCx, y2: childCy, stroke: color, strokeWidth: 0.5, opacity: 0.2 }),
+        /* @__PURE__ */ jsx(
+          AtomGlyph,
+          {
+            cx: childCx,
+            cy: childCy,
+            radius: childR,
+            fieldCount: child.fieldCount ?? 3,
+            stateCount: child.stateCount ?? 2,
+            persistence: child.persistence ?? "persistent",
+            effectTypes: child.effectTypes ?? ["render-ui"],
+            color,
+            animated,
+            showLabels: false,
+            name: child.name
+          }
+        )
+      ] }, child.name);
+    }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: radius * 0.04, fill: color, opacity: 0.5 }),
+    showLabels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + radius + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: radius * 0.12,
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 500,
+        opacity: 0.8,
+        children: name
+      }
+    )
+  ] });
+}
+function OrganismGlyph({ cx, cy, radius, children, connections, color, animated, showLabels, name }) {
+  const count = children.length || 1;
+  const childR = radius / (count <= 3 ? 3 : 4);
+  const spreadX = radius * 0.6;
+  const positions = children.map((_, i) => {
+    const offset = (i - (count - 1) / 2) * (spreadX * 2 / Math.max(count - 1, 1));
+    return { x: cx + offset, y: cy };
+  });
+  const nameToIdx = {};
+  children.forEach((c, i) => {
+    nameToIdx[c.name] = i;
+  });
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: cx - radius,
+        y: cy - radius * 0.7,
+        width: radius * 2,
+        height: radius * 1.4,
+        rx: radius * 0.08,
+        fill: color,
+        fillOpacity: 0.03,
+        stroke: color,
+        strokeWidth: 0.8,
+        strokeDasharray: "6 3",
+        opacity: 0.4
+      }
+    ),
+    connections.map((conn, i) => {
+      const fromIdx = nameToIdx[conn.from];
+      const toIdx = nameToIdx[conn.to];
+      if (fromIdx == null || toIdx == null) return null;
+      const from = positions[fromIdx];
+      const to = positions[toIdx];
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: from.x + childR,
+            y1: from.y,
+            x2: to.x - childR,
+            y2: to.y,
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.4,
+            markerEnd: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${to.x - childR - 4},${to.y - 3} ${to.x - childR},${to.y} ${to.x - childR - 4},${to.y + 3}`,
+            fill: color,
+            opacity: 0.5
+          }
+        ),
+        showLabels && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: (from.x + to.x) / 2,
+            y: from.y - childR - 4,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: radius * 0.06,
+            fontFamily: "Inter, sans-serif",
+            opacity: 0.5,
+            children: conn.event
+          }
+        )
+      ] }, i);
+    }),
+    children.map((child, i) => {
+      const pos = positions[i];
+      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        AtomGlyph,
+        {
+          cx: pos.x,
+          cy: pos.y,
+          radius: childR,
+          fieldCount: child.fieldCount ?? 3,
+          stateCount: child.stateCount ?? 2,
+          persistence: child.persistence ?? "persistent",
+          effectTypes: child.effectTypes ?? ["render-ui"],
+          color,
+          animated,
+          showLabels,
+          name: child.name
+        }
+      ) }, child.name);
+    }),
+    showLabels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + radius * 0.7 + 14,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: radius * 0.1,
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 600,
+        opacity: 0.8,
+        children: name
+      }
+    )
+  ] });
+}
+var AvlBehaviorGlyph = ({
+  name,
+  level = "atom",
+  domain,
+  color: colorOverride,
+  fieldCount = 4,
+  stateCount = 2,
+  persistence = "persistent",
+  effectTypes = [],
+  children: childBehaviors,
+  connections = [],
+  size = "md",
+  showLabels = false,
+  animated = false,
+  className,
+  onClick
+}) => {
+  const { t } = useTranslate();
+  const resolvedColor = colorOverride ?? (domain ? DOMAIN_COLORS[domain] ?? "var(--color-primary)" : "var(--color-primary)");
+  const dim = SIZE_MAP[size];
+  const radius = dim * 0.4;
+  const cx = dim / 2;
+  const cy = dim / 2;
+  const vb = level === "organism" ? `0 0 ${dim * 1.5} ${dim}` : `0 0 ${dim} ${dim}`;
+  const svgW = level === "organism" ? dim * 1.5 : dim;
+  const glyphId = useMemo(() => `avl-bg-${Math.random().toString(36).slice(2, 8)}`, []);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: vb,
+      width: svgW,
+      height: dim,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("inline-block", onClick && "cursor-pointer", className),
+      onClick,
+      role: onClick ? "button" : void 0,
+      "aria-label": t("avlBehaviorGlyph.ariaLabel", { name }),
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: `${glyphId}-bg`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: resolvedColor, stopOpacity: 0.06 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: resolvedColor, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx("circle", { cx: level === "organism" ? dim * 0.75 : cx, cy, r: radius * 1.3, fill: `url(#${glyphId}-bg)` }),
+        level === "atom" && /* @__PURE__ */ jsx(
+          AtomGlyph,
+          {
+            cx,
+            cy,
+            radius,
+            fieldCount,
+            stateCount,
+            persistence,
+            effectTypes,
+            color: resolvedColor,
+            animated,
+            showLabels,
+            name
+          }
+        ),
+        level === "molecule" && /* @__PURE__ */ jsx(
+          MoleculeGlyph,
+          {
+            cx,
+            cy,
+            radius,
+            children: childBehaviors ?? [],
+            color: resolvedColor,
+            animated,
+            showLabels,
+            name
+          }
+        ),
+        level === "organism" && /* @__PURE__ */ jsx(
+          OrganismGlyph,
+          {
+            cx: dim * 0.75,
+            cy,
+            radius: radius * 1.5,
+            children: childBehaviors ?? [],
+            connections,
+            color: resolvedColor,
+            animated,
+            showLabels,
+            name
+          }
+        )
+      ]
+    }
+  );
+};
+AvlBehaviorGlyph.displayName = "AvlBehaviorGlyph";
+var ZOOM_BAND_THRESHOLDS = {
+  system: [0.1, 0.4],
+  module: [0.4, 1],
+  behavior: [1, 2.5],
+  detail: [2.5, 5]
+};
+function computeZoomBand(zoom) {
+  if (zoom < ZOOM_BAND_THRESHOLDS.module[0]) return "system";
+  if (zoom < ZOOM_BAND_THRESHOLDS.behavior[0]) return "module";
+  if (zoom < ZOOM_BAND_THRESHOLDS.detail[0]) return "behavior";
+  return "detail";
+}
+function zoomProgress(zoom, band) {
+  const [min, max] = ZOOM_BAND_THRESHOLDS[band];
+  const clamped = Math.max(min, Math.min(max, zoom));
+  const range = max - min;
+  if (range === 0) return 1;
+  return (clamped - min) / range;
+}
+var ZoomBandContext = createContext("module");
+function useZoomBand() {
+  return useContext(ZoomBandContext);
+}
+
+// src/lib/avl-flow-converter.ts
+var NODE_SPACING = 350;
+function schemaToFlowGraph(schema) {
+  const appData = parseApplicationLevel(schema);
+  const nodes = [];
+  const edges = [];
+  const count = appData.orbitals.length;
+  const cols = Math.ceil(Math.sqrt(count));
+  for (let i = 0; i < appData.orbitals.length; i++) {
+    const orb = appData.orbitals[i];
+    const orbitalDetail = parseOrbitalLevel(schema, orb.name);
+    if (!orbitalDetail) continue;
+    const traitDetails = {};
+    for (const traitName of orb.traitNames) {
+      const td = parseTraitLevel(schema, orb.name, traitName);
+      if (td) traitDetails[traitName] = td;
+    }
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    nodes.push({
+      id: orb.name,
+      type: "orbital",
+      position: { x: col * NODE_SPACING, y: row * NODE_SPACING },
+      data: {
+        orbitalName: orb.name,
+        entityName: orb.entityName,
+        persistence: orb.persistence,
+        fields: orbitalDetail.entity.fields,
+        traits: orbitalDetail.traits,
+        pages: orbitalDetail.pages,
+        traitDetails,
+        externalLinks: orbitalDetail.externalLinks
+      }
+    });
+  }
+  for (const link of appData.crossLinks) {
+    edges.push({
+      id: `ew-${link.emitterOrbital}-${link.listenerOrbital}-${link.eventName}`,
+      source: link.emitterOrbital,
+      target: link.listenerOrbital,
+      type: "eventWire",
+      data: {
+        edgeKind: "eventWire",
+        event: link.eventName,
+        fromTrait: link.emitterTrait ?? null,
+        toTrait: link.listenerTrait ?? null
+      }
+    });
+  }
+  return { nodes, edges };
+}
+var DetailView = ({ data }) => {
+  const { t } = useTranslate();
+  const traitName = data.traits[0]?.name;
+  const traitData = traitName ? data.traitDetails[traitName] : void 0;
+  if (!traitData || traitData.transitions.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-[var(--color-border)] bg-[var(--color-card)] p-4 text-center text-[var(--color-muted-foreground)] text-sm", children: t("detailView.noTransitionData") });
+  }
+  const transition = traitData.transitions[0];
+  const fromState = traitData.states.find((s) => s.name === transition.from);
+  const toState = traitData.states.find((s) => s.name === transition.to);
+  const transitionCounts = {};
+  for (const s of traitData.states) transitionCounts[s.name] = 0;
+  for (const t2 of traitData.transitions) {
+    transitionCounts[t2.from] = (transitionCounts[t2.from] ?? 0) + 1;
+    transitionCounts[t2.to] = (transitionCounts[t2.to] ?? 0) + 1;
+  }
+  const maxTC = Math.max(...Object.values(transitionCounts), 0);
+  const fromRole = getStateRole(fromState?.isInitial ?? void 0, fromState?.isTerminal ?? void 0, transitionCounts[transition.from] ?? 0, maxTC);
+  const toRole = getStateRole(toState?.isInitial ?? void 0, toState?.isTerminal ?? void 0, transitionCounts[transition.to] ?? 0, maxTC);
+  const hasGuard = transition.guard != null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-[var(--color-border)] bg-[var(--color-card)] overflow-hidden", style: { minWidth: 380, maxWidth: 500 }, children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-[var(--color-border)] bg-[var(--color-background)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("svg", { width: 90, height: 32, viewBox: "0 0 90 32", children: /* @__PURE__ */ jsx(AvlState, { x: 0, y: 0, width: 80, height: 28, name: transition.from, role: fromRole, isInitial: fromState?.isInitial ?? void 0, isTerminal: fromState?.isTerminal ?? void 0 }) }),
+      /* @__PURE__ */ jsxs("svg", { width: 24, height: 16, viewBox: "0 0 24 16", children: [
+        /* @__PURE__ */ jsx("line", { x1: 0, y1: 8, x2: 18, y2: 8, stroke: "var(--color-muted-foreground)", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("polygon", { points: "18,4 24,8 18,12", fill: "var(--color-muted-foreground)" })
+      ] }),
+      /* @__PURE__ */ jsx("svg", { width: 90, height: 32, viewBox: "0 0 90 32", children: /* @__PURE__ */ jsx(AvlState, { x: 0, y: 0, width: 80, height: 28, name: transition.to, role: toRole, isInitial: toState?.isInitial ?? void 0, isTerminal: toState?.isTerminal ?? void 0 }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: t("avl.trigger") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(AvlEvent, { x: 8, y: 8, size: 7 }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--color-foreground)]", children: transition.event })
+        ] })
+      ] }),
+      hasGuard && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: t("avl.guard") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", children: /* @__PURE__ */ jsx(AvlGuard, { x: 7, y: 7, size: 6 }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--color-muted-foreground)] opacity-60", children: typeof transition.guard === "string" ? transition.guard : JSON.stringify(transition.guard) })
+        ] })
+      ] }),
+      transition.effects.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: t("avl.effects") }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: transition.effects.map((effect, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--color-muted-foreground)] w-3 text-right mt-0.5", children: [
+            i + 1,
+            "."
+          ] }),
+          /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEffect, { x: 10, y: 10, effectType: effect.type, size: 8, showBackground: true }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-foreground)]", children: effect.type })
+        ] }, i)) })
+      ] })
+    ] })
+  ] });
+};
+DetailView.displayName = "DetailView";
+var AvlTransitionEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  style
+}) => {
+  const { t } = useTranslate();
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+  const isBackward = targetX < sourceX;
+  const connStyle = isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path,
+        markerEnd,
+        style: {
+          stroke: connStyle.color,
+          strokeWidth: connStyle.width,
+          strokeDasharray: connStyle.dash,
+          ...style
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute pointer-events-all nodrag nopan flex items-center gap-1",
+        style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
+        children: [
+          data?.hasGuard && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rotate-45 border border-warning bg-warning/10 shrink-0", title: t("avl.guard") }),
+          /* @__PURE__ */ jsx("div", { className: "px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-foreground)] truncate max-w-[160px]", children: data?.event ?? "" }),
+          data?.hasEffects && /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-primary shrink-0", title: t("avl.effects") })
+        ]
+      }
+    ) })
+  ] });
+};
+AvlTransitionEdge.displayName = "AvlTransitionEdge";
+var AvlEventWireEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  style
+}) => {
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+  const isCompatible = data?.compatible !== false;
+  const wireColor = isCompatible ? CONNECTION_COLORS.emitListen.color : "var(--color-error)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path,
+        markerEnd,
+        style: {
+          stroke: wireColor,
+          strokeWidth: CONNECTION_COLORS.emitListen.width,
+          strokeDasharray: CONNECTION_COLORS.emitListen.dash,
+          ...style
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute pointer-events-all nodrag nopan",
+        style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "px-2 py-0.5 text-xs font-medium rounded-full border truncate max-w-[180px]",
+            style: {
+              color: wireColor,
+              borderColor: wireColor,
+              backgroundColor: avlTint(wireColor, 8)
+            },
+            children: data?.event ?? ""
+          }
+        )
+      }
+    ) })
+  ] });
+};
+AvlEventWireEdge.displayName = "AvlEventWireEdge";
+var AvlBackwardEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style
+}) => {
+  const [path] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      path,
+      markerEnd,
+      style: {
+        stroke: CONNECTION_COLORS.backward.color,
+        strokeWidth: CONNECTION_COLORS.backward.width,
+        strokeDasharray: CONNECTION_COLORS.backward.dash,
+        ...style
+      }
+    }
+  );
+};
+AvlBackwardEdge.displayName = "AvlBackwardEdge";
+var PAGE_EDGE_COLOR = "var(--color-muted-foreground)";
+var AvlPageEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style
+}) => {
+  const [path] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      path,
+      markerEnd,
+      style: {
+        stroke: PAGE_EDGE_COLOR,
+        strokeWidth: 1,
+        ...style
+      }
+    }
+  );
+};
+AvlPageEdge.displayName = "AvlPageEdge";
+var BINDING_COLOR = "var(--color-accent)";
+var AvlBindingEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style
+}) => {
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path,
+        markerEnd,
+        style: {
+          stroke: BINDING_COLOR,
+          strokeWidth: 1,
+          strokeDasharray: "3 2",
+          ...style
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute pointer-events-none nodrag nopan",
+        style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[9px] font-mono font-medium",
+            style: { color: BINDING_COLOR },
+            children: "@"
+          }
+        )
+      }
+    ) })
+  ] });
+};
+AvlBindingEdge.displayName = "AvlBindingEdge";
+var BAND_LABEL_KEYS = {
+  system: "zoomBreadcrumb.system",
+  module: "zoomBreadcrumb.module",
+  behavior: "zoomBreadcrumb.behavior",
+  detail: "zoomBreadcrumb.detail"
+};
+var BAND_ICONS = {
+  system: "\u25C9",
+  // ◉ filled circle
+  module: "\u25C9",
+  // ◉ filled circle
+  behavior: "\u25CE",
+  // ◎ double circle
+  detail: "\u26A1"
+  // ⚡ lightning
+};
+var ZoomBreadcrumb = ({
+  band,
+  applicationName,
+  orbitalName,
+  traitName,
+  eventName
+}) => {
+  const { t } = useTranslate();
+  const segments = [];
+  if (applicationName) {
+    segments.push({ icon: "\u25C9", label: applicationName });
+  }
+  segments.push({ icon: BAND_ICONS[band], label: t(BAND_LABEL_KEYS[band]) });
+  if (orbitalName && (band === "module" || band === "behavior" || band === "detail")) {
+    segments.push({ icon: "\u25C9", label: orbitalName });
+  }
+  if (traitName && (band === "behavior" || band === "detail")) {
+    segments.push({ icon: "\u25CE", label: traitName });
+  }
+  if (eventName && band === "detail") {
+    segments.push({ icon: "\u26A1", label: eventName });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-card/90 border border-border text-xs text-muted-foreground backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-40", children: ">" }),
+    /* @__PURE__ */ jsx("span", { className: "opacity-60", children: seg.icon }),
+    /* @__PURE__ */ jsx("span", { children: seg.label })
+  ] }, i)) });
+};
+ZoomBreadcrumb.displayName = "ZoomBreadcrumb";
+var BAND_LEGENDS = {
+  system: [
+    { icon: "\u25C9", labelKey: "avl.glyph.entity" },
+    { icon: "\u25CF\u25B2\u25A0\u25C6", labelKey: "zoomLegend.fieldTypes" },
+    { icon: "\u25CF\u2501\u25CF", labelKey: "zoomLegend.stateChain" },
+    { icon: "\u25A0", labelKey: "avl.glyph.page" },
+    { icon: "\u2500 \u2500", labelKey: "zoomLegend.eventWire" }
+  ],
+  module: [
+    { icon: "\u25C9", labelKey: "avl.glyph.entity" },
+    { icon: "\u26C1", labelKey: "avl.glyph.persistence" },
+    { icon: "\u25CF\u25B2\u25A0\u25C6\u25CB\u2B21\u2261", labelKey: "zoomLegend.fieldTypes" },
+    { icon: "\u2501\u25CF\u2501", labelKey: "zoomLegend.stateMachine" },
+    { icon: "\u229E\u270E\u26C1\u{1F4E1}", labelKey: "avl.effects" },
+    { icon: "\u25A0", labelKey: "avl.glyph.page" },
+    { icon: "\u25C0\u301C\u301C / \u301C\u301C\u25B6", labelKey: "zoomLegend.emitListen" }
+  ],
+  behavior: [
+    { icon: "\u25CF", tint: "var(--color-success)", labelKey: "avlLegend.initialState" },
+    { icon: "\u25CF", tint: "var(--color-error)", labelKey: "zoomLegend.terminalState" },
+    { icon: "\u25CF", tint: "var(--color-info)", labelKey: "zoomLegend.hubState" },
+    { icon: "\u26A1", labelKey: "avl.glyph.event" },
+    { icon: "\u25C7", labelKey: "avl.glyph.guard" },
+    { icon: "\u229E\u270E\u26C1\u{1F4E1}\u{1F514}", labelKey: "avl.effects" },
+    { icon: "\u2500 \u2500", tint: "var(--color-warning)", labelKey: "zoomLegend.emitListen" }
+  ],
+  detail: [
+    { icon: "\u26A1", labelKey: "zoomLegend.triggerEvent" },
+    { icon: "\u25C7", labelKey: "zoomLegend.guardDiamond" },
+    { icon: "\u229E", code: "render-ui" },
+    { icon: "\u270E", code: "set" },
+    { icon: "\u26C1", code: "persist" },
+    { icon: "\u{1F4E1}", code: "emit" },
+    { icon: "@", labelKey: "avl.glyph.binding" },
+    { icon: "\u25CF\u25B2\u25A0", labelKey: "zoomLegend.fieldTypes" }
+  ]
+};
+var ZoomLegend = ({ band }) => {
+  const { t } = useTranslate();
+  const [collapsed, setCollapsed] = useState(true);
+  const items = BAND_LEGENDS[band];
+  return /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 left-2 z-10", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setCollapsed(!collapsed),
+        className: "px-2 py-1 text-xs rounded-md bg-card/90 border border-border text-muted-foreground backdrop-blur-sm cursor-pointer hover:bg-card",
+        children: collapsed ? t("zoomLegend.legend") : t("zoomLegend.hide")
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 px-2 py-1.5 rounded-md bg-card/95 border border-border backdrop-blur-sm space-y-0.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "opacity-70 w-6 text-center", style: item.tint ? { color: item.tint } : void 0, children: item.icon }),
+      /* @__PURE__ */ jsx("span", { children: item.labelKey ? t(item.labelKey) : item.code })
+    ] }, i)) })
+  ] });
+};
+ZoomLegend.displayName = "ZoomLegend";
+var AvlCosmicZoom = (props) => {
+  return /* @__PURE__ */ jsx(
+    FlowCanvas,
+    {
+      schema: props.schema,
+      className: props.className,
+      width: props.width,
+      height: props.height ?? 400,
+      initialOrbital: props.initialOrbital
+    }
+  );
+};
+AvlCosmicZoom.displayName = "AvlCosmicZoom";
+var LEVEL_BOX = { inset: 0, paddingTop: 56, paddingBottom: 24, paddingLeft: 24, paddingRight: 24 };
+var AvlOrbitalsCosmicZoom = ({
+  schema: schemaProp,
+  className,
+  color = "var(--color-primary)",
+  width = "100%",
+  height = 450,
+  highlightedOrbital,
+  onOrbitalSelect,
+  renderOrbitalPreview,
+  openCodeEvent,
+  previewEvent,
+  dependencies,
+  openBehaviorEvent,
+  scene,
+  stepEvent,
+  playEvent,
+  pauseEvent,
+  stopEvent,
+  playing = false
+}) => {
+  const { t } = useTranslate();
+  const parsedSchema = useMemo(() => {
+    if (typeof schemaProp === "string") return JSON.parse(schemaProp);
+    return schemaProp;
+  }, [schemaProp]);
+  const [state, dispatch] = useReducer(zoomReducer, initialZoomState);
+  const [traitView, setTraitView] = useState({ lens: "flow", filter: null });
+  useEffect(() => setTraitView({ lens: "flow", filter: null }), [state.selectedOrbital]);
+  const breadcrumbs = useMemo(() => getBreadcrumbs(state), [state]);
+  const handleSelect = useCallback(
+    (name) => {
+      dispatch({ type: "JUMP_TO_TRAIT_CIRCUIT", orbital: name });
+      onOrbitalSelect?.(name);
+    },
+    [onOrbitalSelect]
+  );
+  const systemMap = useMemo(() => ({
+    openTraits: handleSelect,
+    ...renderOrbitalPreview ? { renderPreview: renderOrbitalPreview } : {},
+    ...openCodeEvent ? { openCodeEvent } : {},
+    ...previewEvent ? { previewEvent } : {},
+    ...highlightedOrbital ? { highlighted: highlightedOrbital } : {}
+  }), [handleSelect, renderOrbitalPreview, openCodeEvent, previewEvent, highlightedOrbital]);
+  const handleCanvasNodeClick = useCallback(
+    (ctx) => {
+      if (ctx.level !== "transition" || !ctx.trait || ctx.transitionIndex === void 0) return;
+      dispatch({ type: "SELECT_TRAIT", trait: ctx.trait });
+      dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: ctx.transitionIndex, targetPosition: { x: 0, y: 0 } });
+      Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+    },
+    []
+  );
+  const handleZoomOut = useCallback(() => {
+    dispatch({ type: "ZOOM_OUT" });
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, []);
+  const handleBreadcrumbClick = useCallback((targetLevel) => {
+    const order = ["application", "orbital", "trait", "transition"];
+    const currentIdx = order.indexOf(state.level);
+    const targetIdx = order.indexOf(targetLevel);
+    const steps2 = currentIdx - targetIdx;
+    for (let i = 0; i < steps2; i++) {
+      dispatch({ type: "ZOOM_OUT" });
+    }
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, [state.level]);
+  useEffect(() => {
+    if (state.level === "application") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handleZoomOut();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [handleZoomOut, state.level]);
+  const selectedTrait = useMemo(() => {
+    if (!state.selectedOrbital || !state.selectedTrait) return null;
+    return parseTraitLevel(parsedSchema, state.selectedOrbital, state.selectedTrait);
+  }, [parsedSchema, state.selectedOrbital, state.selectedTrait]);
+  const selectedTransition = state.selectedTransition === null ? void 0 : selectedTrait?.transitions[state.selectedTransition];
+  const steps = useMemo(() => scene ?? [], [scene]);
+  const [cursor, setCursor] = useState(steps.length - 1);
+  useEffect(() => setCursor(steps.length - 1), [steps.length]);
+  const sceneView = useMemo(() => ({ steps, cursor }), [steps, cursor]);
+  const selectedPlayback = useMemo(
+    () => selectedTrait && selectedTransition && state.selectedOrbital ? transitionPlayback(selectedTrait, state.selectedOrbital, selectedTransition, steps, cursor) : void 0,
+    [selectedTrait, selectedTransition, state.selectedOrbital, steps, cursor]
+  );
+  const playTarget = state.selectedOrbital && state.selectedTrait ? { orbital: state.selectedOrbital, trait: state.selectedTrait } : null;
+  const showSceneBar = (state.level === "trait" || state.level === "transition") && (steps.length > 0 || playTarget !== null && playEvent !== void 0 && state.level === "transition");
+  const scopedSchema = useMemo(() => {
+    if (!state.selectedOrbital) return null;
+    const orbital = parsedSchema.orbitals?.find((o) => o.name === state.selectedOrbital);
+    if (!orbital) return null;
+    return { ...parsedSchema, orbitals: [orbital] };
+  }, [parsedSchema, state.selectedOrbital]);
+  return /* @__PURE__ */ jsxs(Box, { className, position: "relative", overflow: "visible", style: { width, height }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        style: {
+          top: 12,
+          left: 12,
+          zIndex: 30,
+          background: "var(--color-card)",
+          padding: "4px 12px",
+          borderRadius: 6,
+          border: `1px solid ${color}`
+        },
+        children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", style: { opacity: 0.5, color }, children: "/" }),
+          i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "span",
+              ...pressableProps(() => handleBreadcrumbClick(crumb.level)),
+              style: { cursor: "pointer" },
+              children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "small",
+                  style: { color, textDecoration: "underline" },
+                  children: crumb.labelKey ? t(crumb.labelKey, crumb.labelParams) : crumb.label
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "bold", style: { color }, children: crumb.labelKey ? t(crumb.labelKey, crumb.labelParams) : crumb.label })
+        ] }, crumb.level)) })
+      }
+    ),
+    state.level !== "application" && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        style: {
+          bottom: 12,
+          right: 12,
+          zIndex: 30,
+          background: "var(--color-card)",
+          padding: "2px 8px",
+          borderRadius: 4,
+          opacity: 0.8
+        },
+        children: /* @__PURE__ */ jsx(Typography, { variant: "small", style: { color }, children: t("avl.pressEscToZoomOut") })
+      }
+    ),
+    state.level === "application" && /* @__PURE__ */ jsx(Box, { position: "absolute", style: LEVEL_BOX, children: /* @__PURE__ */ jsx(
+      FlowCanvas,
+      {
+        schema: parsedSchema,
+        initialLevel: "system",
+        systemMap,
+        ...dependencies ? { systemDependencies: dependencies } : {},
+        ...openBehaviorEvent ? { openBehaviorEvent } : {},
+        width: "100%",
+        height: "100%"
+      }
+    ) }),
+    state.level === "trait" && scopedSchema && state.selectedOrbital && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        style: {
+          inset: 0,
+          paddingTop: 56,
+          paddingBottom: 24,
+          paddingLeft: 24,
+          paddingRight: 24
+        },
+        children: /* @__PURE__ */ jsx(
+          FlowCanvas,
+          {
+            schema: scopedSchema,
+            initialLevel: "trait-expanded",
+            initialOrbital: state.selectedOrbital,
+            onNodeClick: handleCanvasNodeClick,
+            scene: sceneView,
+            ...dependencies ? { systemDependencies: dependencies } : {},
+            traitView,
+            onTraitViewChange: setTraitView,
+            width: "100%",
+            height: "100%"
+          }
+        )
+      }
+    ),
+    state.level === "transition" && selectedTransition && state.selectedOrbital && state.selectedTrait && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        style: {
+          inset: 0,
+          paddingTop: 56,
+          paddingBottom: showSceneBar ? 72 : 24,
+          paddingLeft: 24,
+          paddingRight: 24,
+          overflowY: "auto"
+        },
+        children: /* @__PURE__ */ jsx(
+          AvlTransitionDetail,
+          {
+            orbital: state.selectedOrbital,
+            trait: state.selectedTrait,
+            transition: selectedTransition,
+            playback: selectedPlayback,
+            stepEvent
+          }
+        )
+      }
+    ),
+    showSceneBar && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        "data-testid": "avl-scene-bar",
+        className: "bg-card border border-border rounded-md shadow-sm",
+        style: { left: "50%", transform: "translateX(-50%)", bottom: 12, zIndex: 30, padding: "6px 12px", width: "min(560px, calc(100% - 320px))" },
+        children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+          playTarget && playEvent && state.level === "transition" ? playing && pauseEvent ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", action: pauseEvent, actionPayload: playTarget, leftIcon: "pause", title: t("avl.play.pause"), "data-testid": "avl-scene-pause" }) : /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", action: playEvent, actionPayload: playTarget, leftIcon: "play", title: t("avl.play.play"), "data-testid": "avl-scene-play" }) : null,
+          playTarget && stopEvent && steps.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", action: stopEvent, actionPayload: playTarget, leftIcon: "stop", title: t("avl.play.stop"), "data-testid": "avl-scene-stop" }) : null,
+          steps.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(RangeSlider, { min: 0, max: Math.max(0, steps.length - 1), step: 1, value: Math.max(0, cursor), onChange: setCursor, size: "sm", "aria-label": t("avl.play.scene") }) }),
+            /* @__PURE__ */ jsx(Box, { "data-testid": "avl-scene-position", children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: t("avl.play.sceneStep", { n: cursor + 1, total: steps.length }) }) })
+          ] }) : null
+        ] })
+      }
+    )
+  ] });
+};
+AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
+var log = createLogger("almadar:ui:avl:trait-scene");
+var SWIM_GUTTER = 120;
+var CENTER_W = 360;
+var AvlTraitScene = ({
+  data,
+  color = "var(--color-primary)",
+  onTransitionClick
+}) => {
+  const { t } = useTranslate();
+  const [layout, setLayout] = useState(null);
+  const dataKey = useMemo(() => JSON.stringify(data), [data]);
+  useEffect(() => {
+    computeTraitLayout(data).then(setLayout).catch((error) => {
+      log.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+    });
+  }, [dataKey]);
+  if (!layout) {
+    return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: t("avl.computingLayout") }) });
+  }
+  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 = 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__ */ jsx("text", { x: CENTER_W / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: t("avl.linkedTo", { entity: data.linkedEntity }) }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
+      layout.edges.map((edge) => {
+        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
+        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: edgePath(edge.points),
+              fill: "none",
+              stroke: conn.color,
+              strokeWidth: conn.width,
+              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
+              opacity: 0.5,
+              markerEnd: marker
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AvlTransitionLane,
+            {
+              x: edge.labelX,
+              y: edge.labelY,
+              event: edge.event,
+              guard: edge.guardExpr,
+              effects: edge.effects.map((e) => ({ type: e.type })),
+              width: edge.labelW,
+              isBackward: edge.isBackward,
+              isSelfLoop: edge.isSelf,
+              color,
+              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
+                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER : machineOffsetX),
+                y: edge.labelY + offsetY
+              }) : void 0
+            }
+          )
+        ] }, edge.id);
+      }),
+      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        AvlState,
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          name: node.id,
+          isInitial: node.isInitial,
+          isTerminal: node.isTerminal,
+          role: node.role,
+          transitionCount: node.transitionCount,
+          color
+        }
+      ) }, node.id))
+    ] })
+  ] });
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
+  }
+  return /* @__PURE__ */ jsx(
+    AvlSwimLane,
+    {
+      listenedEvents: data.listenedEvents,
+      emittedEvents: data.emittedEvents,
+      centerWidth: CENTER_W,
+      height: machineHeight,
+      color,
+      children: renderMachine
+    }
+  );
+};
+AvlTraitScene.displayName = "AvlTraitScene";
+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",
+    "call-service",
+    "spawn",
+    "despawn",
+    "do",
+    "if",
+    "log"
+  ];
+  return valid.includes(label) ? label : "log";
+}
+var AvlTransitionScene = ({
+  data,
+  color = "var(--color-primary)"
+}) => {
+  const { t, locale } = useTranslate();
+  const fromRole = getStateRole();
+  const toRole = getStateRole();
+  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: t("avl.trigger").toLocaleUpperCase(locale) }),
+        /* @__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: t("avl.guard").toLocaleUpperCase(locale) }),
+        /* @__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: t("avl.effects").toLocaleUpperCase(locale) }),
+        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: t("avlTransitionScene.slots").toLocaleUpperCase(locale) }),
+        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,
+  width,
+  height,
+  onClick,
+  onHover,
+  cursor = "pointer",
+  glowColor = "var(--color-primary)",
+  label,
+  children
+}) => {
+  const [hovering, setHovering] = useState(false);
+  const handleMouseEnter = useCallback(() => {
+    setHovering(true);
+    onHover?.(true);
+  }, [onHover]);
+  const handleMouseLeave = useCallback(() => {
+    setHovering(false);
+    onHover?.(false);
+  }, [onHover]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick();
+    }
+  }, [onClick]);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    hovering && /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: x - 4,
+        y: y - 4,
+        width: width + 8,
+        height: height + 8,
+        rx: 8,
+        fill: glowColor,
+        opacity: 0.08
+      }
+    ),
+    children,
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        fill: "transparent",
+        style: { cursor },
+        pointerEvents: "all",
+        onClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": label
+      }
+    )
+  ] });
+};
+AvlClickTarget.displayName = "AvlClickTarget";
+
+// src/lib/avl-deployment-graph.ts
+var COLUMNS = ["client", "host", "service", "store", "external"];
+var WIDTH = { client: 160, host: 220, service: 200, store: 200, external: 200 };
+var DEPLOYMENT_ROW = { height: 26, gap: 8, columnGap: 160, headerHeight: 30 };
+function deploymentGraph(input) {
+  return layeredGraph({
+    columns: COLUMNS.map((id) => ({ id, width: WIDTH[id] ?? 200 })),
+    units: input.units,
+    edges: input.edges,
+    row: DEPLOYMENT_ROW,
+    handles: "facing"
+  });
+}
+var STATE_ROLES = ["initial", "terminal", "hub", "default"];
+var STATUSES = ["idle", "running", "success", "error"];
+var FOCUS_LEVELS = ["node", "slot", "field", "effect", "trait", "page", "orbital"];
+function fail(what) {
+  throw new Error(`Invalid AVL prop value: ${what}`);
+}
+function isList(value) {
+  return Array.isArray(value);
+}
+function record(value, what) {
+  if (value === null || value === void 0 || typeof value !== "object" || value instanceof Date || isList(value)) {
+    fail(`${what} must be an object`);
+  }
+  return value;
+}
+function list(value, what) {
+  if (!isList(value)) fail(`${what} must be a list`);
+  return value;
+}
+function str(o, key) {
+  const v = o[key];
+  if (typeof v !== "string") fail(`${key} must be a string`);
+  return v;
+}
+function optStr(o, key) {
+  const v = o[key];
+  if (v === void 0 || v === null) return void 0;
+  if (typeof v !== "string") fail(`${key} must be a string`);
+  return v;
+}
+function num(o, key) {
+  const v = o[key];
+  if (typeof v !== "number") fail(`${key} must be a number`);
+  return v;
+}
+function optNum(o, key) {
+  const v = o[key];
+  if (v === void 0 || v === null) return void 0;
+  if (typeof v !== "number") fail(`${key} must be a number`);
+  return v;
+}
+function optStrList(o, key) {
+  const v = o[key];
+  if (v === void 0 || v === null) return void 0;
+  return list(v, key).map((item) => {
+    if (typeof item !== "string") fail(`${key} must hold strings`);
+    return item;
+  });
+}
+function oneOf(o, key, allowed) {
+  const v = optStr(o, key);
+  if (v === void 0) return void 0;
+  const hit = allowed.find((a) => a === v);
+  if (hit === void 0) fail(`${key} must be one of ${allowed.join(", ")}`);
+  return hit;
+}
+function renderUIEntry(value) {
+  const o = record(value, "pattern entry");
+  return { slot: str(o, "slot"), pattern: PatternObjectSchema.parse(o.pattern) };
+}
+function eventSource(value) {
+  const o = record(value, "event source");
+  const fields = o.payloadFields;
+  return {
+    event: str(o, "event"),
+    patternType: str(o, "patternType"),
+    label: optStr(o, "label"),
+    path: str(o, "path"),
+    positionHint: num(o, "positionHint"),
+    payloadFields: fields === void 0 || fields === null ? void 0 : list(fields, "payloadFields").map((f) => {
+      const p = record(f, "payload field");
+      const required = p.required;
+      if (required !== void 0 && required !== null && typeof required !== "boolean") fail("required must be a boolean");
+      return { name: str(p, "name"), type: str(p, "type"), required: typeof required === "boolean" ? required : void 0 };
+    })
+  };
+}
+function decodePreviewNodeData(value) {
+  const o = record(value, "node");
+  const label = oneOf(o, "cardLabel", ["screen"]);
+  const guard = o.guard;
+  return {
+    orbitalName: str(o, "orbitalName"),
+    traitName: optStr(o, "traitName"),
+    stateName: optStr(o, "stateName"),
+    transitionEvent: optStr(o, "transitionEvent"),
+    fromState: optStr(o, "fromState"),
+    toState: optStr(o, "toState"),
+    cardWidth: optNum(o, "cardWidth"),
+    cardLabel: label,
+    enteredBy: optStrList(o, "enteredBy"),
+    patterns: list(o.patterns, "patterns").map(renderUIEntry),
+    eventSources: list(o.eventSources, "eventSources").map(eventSource),
+    layer: optStr(o, "layer"),
+    stateRole: oneOf(o, "stateRole", STATE_ROLES),
+    effectTypes: optStrList(o, "effectTypes"),
+    guard: guard === void 0 ? void 0 : guard === null ? null : SExprDataSchema.parse(guard),
+    entityName: optStr(o, "entityName"),
+    persistence: optStr(o, "persistence"),
+    fieldCount: optNum(o, "fieldCount"),
+    traitCount: optNum(o, "traitCount"),
+    pageRoutes: optStrList(o, "pageRoutes"),
+    status: oneOf(o, "status", STATUSES)
+  };
+}
+function offsetInParent(value) {
+  const o = record(value, "offsetInParent");
+  return {
+    left: num(o, "left"),
+    top: num(o, "top"),
+    right: num(o, "right"),
+    bottom: num(o, "bottom"),
+    parentWidth: num(o, "parentWidth"),
+    parentHeight: num(o, "parentHeight")
+  };
+}
+function editFocus(value) {
+  const o = record(value, "focus");
+  const level = oneOf(o, "level", FOCUS_LEVELS);
+  if (level === void 0) fail("level is required");
+  return {
+    level,
+    orbital: str(o, "orbital"),
+    trait: optStr(o, "trait"),
+    transition: optStr(o, "transition"),
+    state: optStr(o, "state"),
+    slot: optStr(o, "slot"),
+    path: optStr(o, "path"),
+    patternType: optStr(o, "patternType"),
+    entity: optStr(o, "entity"),
+    source: optStr(o, "source"),
+    label: str(o, "label")
+  };
+}
+function decodeSelectedPattern(value) {
+  const o = record(value, "selected pattern");
+  const rect = o.rect;
+  const offset = o.offsetInParent;
+  return {
+    patternType: str(o, "patternType"),
+    patternId: optStr(o, "patternId"),
+    nodeData: decodePreviewNodeData(o.nodeData),
+    sourceTrait: optStr(o, "sourceTrait"),
+    rect: rect === void 0 || rect === null ? void 0 : (() => {
+      const r = record(rect, "rect");
+      return { top: num(r, "top"), left: num(r, "left"), width: num(r, "width"), height: num(r, "height") };
+    })(),
+    selection: optStrList(o, "selection"),
+    offsetInParent: offset === void 0 || offset === null ? void 0 : offsetInParent(offset),
+    focus: o.focus === void 0 || o.focus === null ? void 0 : editFocus(o.focus),
+    elements: o.elements === void 0 || o.elements === null ? void 0 : list(o.elements, "elements").map(editFocus)
+  };
+}
+function decodeNodePlacements(value) {
+  const o = record(value, "nodePositions");
+  const out = {};
+  for (const [id, placement] of Object.entries(o)) {
+    const p = record(placement, `nodePositions.${id}`);
+    out[id] = { x: num(p, "x"), y: num(p, "y"), width: optNum(p, "width") };
+  }
+  return out;
+}
+
+export { AvlBackwardEdge, AvlBehaviorGlyph, AvlBindingEdge, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEmitListen, AvlEventWireEdge, AvlExprTree, AvlOrbitalUnit, AvlOrbitalsCosmicZoom, AvlPageEdge, AvlSlotMap, AvlSwimLane, AvlTraitScene, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, DEPLOYMENT_ROW, DOMAIN_COLORS, DetailView, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, computeZoomBand, curveControlPoint, decodeNodePlacements, decodePreviewNodeData, decodeSelectedPattern, deploymentGraph, gridPositions, radialPositions, ringPositions, schemaToFlowGraph, useZoomBand, zoomProgress };