@almadar/ui 4.54.4 → 4.54.6

package/dist/avl/index.js

@@ -13241,36 +13241,37 @@ var init_Popover = __esm({
           ...triggerProps
         }
       );
+      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: popoverRef,
+          className: cn(
+            "fixed z-50 p-4",
+            "bg-card border-2 border-border shadow-lg",
+            positionClasses2[position],
+            className
+          ),
+          style: computePopoverStyle(position, triggerRect, popoverWidth),
+          role: "dialog",
+          onMouseEnter: trigger === "hover" ? handleOpen : void 0,
+          onMouseLeave: trigger === "hover" ? handleClose : void 0,
+          children: [
+            typeof content === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body", children: content }) : content,
+            showArrow && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute w-0 h-0 border-4",
+                  arrowClasses2[position]
+                )
+              }
+            )
+          ]
+        }
+      ) : null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         triggerElement,
-        isOpen && triggerRect && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: popoverRef,
-            className: cn(
-              "fixed z-50 p-4",
-              "bg-card border-2 border-border shadow-lg",
-              positionClasses2[position],
-              className
-            ),
-            style: computePopoverStyle(position, triggerRect, popoverWidth),
-            role: "dialog",
-            onMouseEnter: trigger === "hover" ? handleOpen : void 0,
-            onMouseLeave: trigger === "hover" ? handleClose : void 0,
-            children: [
-              typeof content === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body", children: content }) : content,
-              showArrow && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "absolute w-0 h-0 border-4",
-                    arrowClasses2[position]
-                  )
-                }
-              )
-            ]
-          }
-        )
+        panel && typeof document !== "undefined" ? createPortal(panel, document.body) : panel
       ] });
     };
     Popover.displayName = "Popover";
@@ -50993,6 +50994,22 @@ function zoomReducer(state, action) {
         selectedTransition: action.transitionIndex
       };
     }
+    case "JUMP_TO_TRAIT_CIRCUIT": {
+      if (state.level !== "application" || state.animating) return state;
+      return {
+        ...state,
+        level: "trait",
+        selectedOrbital: action.orbital,
+        selectedTrait: null,
+        selectedTransition: null,
+        animating: false,
+        animationDirection: "in",
+        animationTarget: null
+      };
+    }
+    case "SELECT_TRAIT": {
+      return { ...state, selectedTrait: action.trait };
+    }
     case "ZOOM_OUT": {
       if (state.level === "application" || state.animating) return state;
       return {
@@ -51025,7 +51042,8 @@ function zoomReducer(state, action) {
       if (state.level === "trait") {
         return {
           ...state,
-          level: "orbital",
+          level: "application",
+          selectedOrbital: null,
           selectedTrait: null,
           animating: false,
           animationTarget: null
@@ -57417,8 +57435,8 @@ function isBackwardTransition(from, to, states) {
   if (fromIdx === -1 || toIdx === -1) return false;
   return toIdx < fromIdx;
 }
-function findCrossLinks(orbitals) {
-  const links = [];
+function extractTraitWires(orbitals, scope) {
+  const wires = [];
   const emitters = [];
   const listeners6 = [];
   for (const orb of orbitals) {
@@ -57434,11 +57452,14 @@ function findCrossLinks(orbitals) {
   const seen = /* @__PURE__ */ new Set();
   for (const em of emitters) {
     for (const li of listeners6) {
-      if (em.event !== li.event || em.orbital === li.orbital) continue;
-      const key = `${em.orbital}\u241F${li.orbital}\u241F${em.event}`;
+      if (em.event !== li.event) continue;
+      if (scope === "cross-orbital" && em.orbital === li.orbital) continue;
+      if (scope === "intra-orbital" && em.orbital !== li.orbital) continue;
+      if (scope === "intra-orbital" && em.trait === li.trait) continue;
+      const key = scope === "cross-orbital" ? `${em.orbital}\u241F${li.orbital}\u241F${em.event}` : `${em.orbital}\u241F${em.trait}\u241F${li.trait}\u241F${em.event}`;
       if (seen.has(key)) continue;
       seen.add(key);
-      links.push({
+      wires.push({
         emitterOrbital: em.orbital,
         listenerOrbital: li.orbital,
         event: em.event,
@@ -57447,7 +57468,10 @@ function findCrossLinks(orbitals) {
       });
     }
   }
-  return links;
+  return wires;
+}
+function findCrossLinks(orbitals) {
+  return extractTraitWires(orbitals, "cross-orbital");
 }
 function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus) {
   const orbitals = getOrbitals(schema);
@@ -57747,6 +57771,66 @@ function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
     mockData
   );
 }
+var TRAIT_CARD_SPACING_X = 480;
+var TRAIT_CARD_SPACING_Y = 380;
+function orbitalToTraitGraph(schema, orbitalName, _mockData) {
+  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
+  if (!orbital) return { nodes: [], edges: [] };
+  const traits2 = getTraits2(orbital);
+  const nodes = [];
+  const count = traits2.length;
+  const cols = Math.max(1, Math.ceil(Math.sqrt(count)));
+  for (let i = 0; i < traits2.length; i++) {
+    const trait = traits2[i];
+    const sm = getStateMachine2(trait);
+    const transitions = (sm?.transitions ?? []).map((t) => ({
+      event: t.event,
+      fromState: Array.isArray(t.from) ? t.from.join("|") : t.from,
+      toState: t.to
+    }));
+    const emits = getEmits2(trait);
+    const listens = getListens2(trait);
+    const linkedEntity = trait.linkedEntity ?? "";
+    const row = Math.floor(i / cols);
+    const col = i % cols;
+    nodes.push({
+      id: `trait-${orbitalName}-${trait.name}`,
+      type: "traitCard",
+      position: {
+        x: col * TRAIT_CARD_SPACING_X,
+        y: row * TRAIT_CARD_SPACING_Y
+      },
+      data: {
+        kind: "trait-card",
+        orbitalName,
+        traitName: trait.name,
+        linkedEntity,
+        transitions,
+        emits,
+        listens,
+        // Required fields on PreviewNodeData — keep empty for trait cards.
+        patterns: [],
+        eventSources: []
+      }
+    });
+  }
+  const wires = extractTraitWires([orbital], "intra-orbital");
+  const edges = wires.map((w) => ({
+    id: `wire-${orbitalName}-${w.emitterTrait}-${w.listenerTrait}-${w.event}`,
+    source: `trait-${orbitalName}-${w.emitterTrait}`,
+    target: `trait-${orbitalName}-${w.listenerTrait}`,
+    sourceHandle: `emit-${w.event}`,
+    targetHandle: `listen-${w.event}`,
+    type: "eventFlow",
+    data: {
+      event: w.event,
+      isCrossOrbital: false,
+      fromTrait: w.emitterTrait,
+      toTrait: w.listenerTrait
+    }
+  }));
+  return { nodes, edges };
+}
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_Box();
@@ -61785,11 +61869,104 @@ function TokenRow({ group, tokenKey, value, isColor, onPropChange }) {
 // components/organisms/avl/FlowCanvas.tsx
 init_Box();
 init_Typography();
+
+// components/molecules/avl/TraitCardNode.tsx
+init_Box();
+init_Stack();
+init_Typography();
+init_Button();
+init_Badge();
+var TraitCardSelectionContext = createContext({
+  selectTransition: () => {
+  }
+});
+var CARD_WIDTH = 360;
+var CARD_MIN_HEIGHT = 200;
+var TraitCardNodeInner = (props) => {
+  const data = props.data;
+  const { selectTransition } = useContext(TraitCardSelectionContext);
+  const orbitalName = data.orbitalName;
+  const traitName = data.traitName ?? "";
+  const linkedEntity = data.linkedEntity ?? "";
+  const transitions = data.transitions ?? [];
+  const emits = data.emits ?? [];
+  const listens = data.listens ?? [];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "bg-card border-2 border-border rounded-lg shadow-md p-4",
+      style: { width: CARD_WIDTH, minHeight: CARD_MIN_HEIGHT, position: "relative" },
+      children: [
+        listens.map((event, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            id: `listen-${event}`,
+            style: { top: `${(i + 1) / (listens.length + 1) * 100}%` },
+            "aria-label": `listens for ${event}`
+          },
+          `listen-${event}`
+        )),
+        emits.map((event, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Right,
+            id: `emit-${event}`,
+            style: { top: `${(i + 1) / (emits.length + 1) * 100}%` },
+            "aria-label": `emits ${event}`
+          },
+          `emit-${event}`
+        )),
+        /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+          /* @__PURE__ */ jsxs(HStack, { gap: "xs", justify: "between", align: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", weight: "semibold", children: traitName }),
+            linkedEntity ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: linkedEntity }) : null
+          ] }),
+          /* @__PURE__ */ jsx(VStack, { gap: "xs", children: transitions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "No transitions" }) : transitions.map((t, idx) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: (e) => {
+                e.stopPropagation();
+                selectTransition({
+                  orbitalName,
+                  traitName,
+                  transitionEvent: t.event,
+                  fromState: t.fromState,
+                  toState: t.toState,
+                  index: idx
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", children: t.event }),
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", color: "muted", children: [
+                  " \xB7 ",
+                  t.fromState,
+                  " \u2192 ",
+                  t.toState
+                ] })
+              ]
+            },
+            `${t.event}-${t.fromState}-${t.toState}-${idx}`
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+var TraitCardNode = React96__default.memo(TraitCardNodeInner);
+TraitCardNode.displayName = "TraitCardNode";
+
+// components/organisms/avl/FlowCanvas.tsx
 init_useEventBus();
 var flowCanvasLog = createLogger("almadar:ui:flow-canvas");
 var NODE_TYPES = {
   preview: OrbPreviewNode,
-  behaviorCompose: BehaviorComposeNode
+  behaviorCompose: BehaviorComposeNode,
+  traitCard: TraitCardNode
 };
 flowCanvasLog.debug("node-type-registry", () => ({
   registered: Object.keys(NODE_TYPES),
@@ -61830,7 +62007,8 @@ function FlowCanvasInner({
 }) {
   const NODE_TYPES2 = useMemo(() => ({
     preview: OrbPreviewNode,
-    behaviorCompose: BehaviorComposeNode
+    behaviorCompose: BehaviorComposeNode,
+    traitCard: TraitCardNode
   }), []);
   const EDGE_TYPES_LOCAL = useMemo(() => ({
     eventFlow: EventFlowEdge
@@ -61878,17 +62056,19 @@ function FlowCanvasInner({
     }
   }), [selectedPattern]);
   const [atBehaviorLevel, setAtBehaviorLevel] = useState(composeLevel === "behavior");
-  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges } = useMemo(() => {
+  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges, traitExpandedNodes, traitExpandedEdges } = useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
     const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
     const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData) : { nodes: [], edges: [] };
+    const traitExpanded = expandedOrbital ? orbitalToTraitGraph(parsedSchema, expandedOrbital) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
       overviewNodes: overview.nodes.length,
       expandedNodes: expanded.nodes.length,
       behaviorExpandedNodes: behaviorExpanded.nodes.length,
+      traitExpandedNodes: traitExpanded.nodes.length,
       orbitalCount: parsedSchema.orbitals?.length ?? 0
     });
     return {
@@ -61899,11 +62079,13 @@ function FlowCanvasInner({
       expandedNodes: expanded.nodes,
       expandedEdges: expanded.edges,
       behaviorExpandedNodes: behaviorExpanded.nodes,
-      behaviorExpandedEdges: behaviorExpanded.edges
+      behaviorExpandedEdges: behaviorExpanded.edges,
+      traitExpandedNodes: traitExpanded.nodes,
+      traitExpandedEdges: traitExpanded.edges
     };
   }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
-  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : expandedNodes;
-  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : expandedEdges;
+  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : level === "trait-expanded" ? traitExpandedNodes : expandedNodes;
+  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : level === "trait-expanded" ? traitExpandedEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(activeEdges);
   const reactFlow = useReactFlow();
@@ -62060,7 +62242,17 @@ function FlowCanvasInner({
     });
   }, [nodes, onEventWire, eventBus]);
   const screenSizeKeys = ["mobile", "tablet", "laptop", "wide"];
-  return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxs(
+  const traitCardSelectionValue = useMemo(() => ({
+    selectTransition: (sel) => {
+      onNodeClick?.({
+        level: "transition",
+        orbital: sel.orbitalName,
+        trait: sel.traitName,
+        transition: sel.transitionEvent
+      });
+    }
+  }), [onNodeClick]);
+  return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsx(TraitCardSelectionContext.Provider, { value: traitCardSelectionValue, children: /* @__PURE__ */ jsxs(
     Box,
     {
       className: `flex h-full ${className ?? ""}`,
@@ -62178,7 +62370,7 @@ function FlowCanvasInner({
         ] })
       ]
     }
-  ) }) });
+  ) }) }) });
 }
 var FlowCanvas = (props) => {
   return /* @__PURE__ */ jsx(Profiler, { id: "flow-canvas", onRender: profilerOnRender, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowCanvasInner, { ...props }) }) });
@@ -62302,122 +62494,6 @@ AvlCosmicZoom.displayName = "AvlCosmicZoom";
 init_avl_schema_parser();
 init_avl_zoom_state();
 
-// components/organisms/avl/AvlTraitScene.tsx
-init_AvlState();
-init_AvlTransitionLane();
-init_AvlSwimLane();
-init_types();
-init_avl_elk_layout();
-var log19 = createLogger("almadar:ui:avl:trait-scene");
-var SWIM_GUTTER2 = 120;
-var CENTER_W2 = 360;
-var AvlTraitScene = ({
-  data,
-  color = "var(--color-primary)",
-  onTransitionClick
-}) => {
-  const [layout, setLayout] = useState(null);
-  const dataKey = useMemo(() => JSON.stringify(data), [data]);
-  useEffect(() => {
-    computeTraitLayout(data).then(setLayout).catch((error) => {
-      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
-    });
-  }, [dataKey]);
-  if (!layout) {
-    return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: "Computing layout..." }) });
-  }
-  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
-  const machineOffsetX = hasExternal ? 0 : 30;
-  const padding = 20;
-  const availW = CENTER_W2 - padding * 2;
-  const availH = 300;
-  const scale = Math.min(1, availW / layout.width, availH / layout.height);
-  const scaledW = layout.width * scale;
-  const scaledH = layout.height * scale;
-  const offsetX = padding + (availW - scaledW) / 2;
-  const offsetY = 50 + (availH - scaledH) / 2;
-  const machineHeight = scaledH + 100;
-  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
-    /* @__PURE__ */ jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
-      "linked to ",
-      data.linkedEntity
-    ] }),
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
-      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
-    ] }),
-    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
-      layout.edges.map((edge) => {
-        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
-        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: edgePath(edge.points),
-              fill: "none",
-              stroke: conn.color,
-              strokeWidth: conn.width,
-              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
-              opacity: 0.5,
-              markerEnd: marker
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AvlTransitionLane,
-            {
-              x: edge.labelX,
-              y: edge.labelY,
-              event: edge.event,
-              guard: edge.guardExpr,
-              effects: edge.effects.map((e) => ({ type: e.type })),
-              width: edge.labelW,
-              isBackward: edge.isBackward,
-              isSelfLoop: edge.isSelf,
-              color,
-              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
-                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
-                y: edge.labelY + offsetY
-              }) : void 0
-            }
-          )
-        ] }, edge.id);
-      }),
-      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-        AvlState,
-        {
-          x: node.x,
-          y: node.y,
-          width: node.width,
-          height: node.height,
-          name: node.id,
-          isInitial: node.isInitial,
-          isTerminal: node.isTerminal,
-          role: node.role,
-          transitionCount: node.transitionCount,
-          color
-        }
-      ) }, node.id))
-    ] })
-  ] });
-  if (!hasExternal) {
-    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
-  }
-  return /* @__PURE__ */ jsx(
-    AvlSwimLane,
-    {
-      listenedEvents: data.listenedEvents,
-      emittedEvents: data.emittedEvents,
-      centerWidth: CENTER_W2,
-      height: machineHeight,
-      color,
-      children: renderMachine
-    }
-  );
-};
-AvlTraitScene.displayName = "AvlTraitScene";
-
 // components/organisms/avl/AvlTransitionScene.tsx
 init_AvlEffect();
 init_types();
@@ -62904,26 +62980,34 @@ var AvlOrbitalsCosmicZoom = ({
     if (!highlightedOrbital) return;
     if (drilledForHighlightRef.current) return;
     drilledForHighlightRef.current = true;
-    dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: highlightedOrbital, targetPosition: { x: 0, y: 0 } });
-    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+    dispatch({ type: "JUMP_TO_TRAIT_CIRCUIT", orbital: highlightedOrbital });
   }, [highlightedOrbital]);
   const breadcrumbs = useMemo(() => getBreadcrumbs(state), [state]);
   const handleSelect = useCallback(
     (name) => {
-      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
-      Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+      dispatch({ type: "JUMP_TO_TRAIT_CIRCUIT", orbital: name });
       onOrbitalSelect?.(name);
     },
     [onOrbitalSelect]
   );
-  const handleTraitSelect = useCallback((traitName) => {
-    dispatch({ type: "ZOOM_INTO_TRAIT", trait: traitName, targetPosition: { x: 0, y: 0 } });
-    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
-  }, []);
-  const handleTransitionSelect = useCallback((transitionIndex) => {
+  useCallback((transitionIndex) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex, targetPosition: { x: 0, y: 0 } });
     Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
   }, []);
+  const handleCanvasNodeClick = useCallback(
+    (ctx) => {
+      if (ctx.level !== "transition" || !ctx.trait || !ctx.transition) return;
+      const orbital = parsedSchema.orbitals?.find((o) => o.name === ctx.orbital);
+      const traitRef = orbital?.traits?.find((t) => isInlineTrait(t) && t.name === ctx.trait);
+      if (!traitRef || !isInlineTrait(traitRef)) return;
+      const idx = traitRef.stateMachine?.transitions?.findIndex((t) => t.event === ctx.transition) ?? -1;
+      if (idx < 0) return;
+      dispatch({ type: "SELECT_TRAIT", trait: ctx.trait });
+      dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: idx, targetPosition: { x: 0, y: 0 } });
+      Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+    },
+    [parsedSchema]
+  );
   const handleZoomOut = useCallback(() => {
     dispatch({ type: "ZOOM_OUT" });
     Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
@@ -62946,14 +63030,6 @@ var AvlOrbitalsCosmicZoom = ({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [handleZoomOut, state.level]);
-  const orbitalLevelData = useMemo(() => {
-    if (!state.selectedOrbital) return null;
-    return parseOrbitalLevel(parsedSchema, state.selectedOrbital);
-  }, [parsedSchema, state.selectedOrbital]);
-  const traitLevelData = useMemo(() => {
-    if (!state.selectedOrbital || !state.selectedTrait) return null;
-    return parseTraitLevel(parsedSchema, state.selectedOrbital, state.selectedTrait);
-  }, [parsedSchema, state.selectedOrbital, state.selectedTrait]);
   const transitionLevelData = useMemo(() => {
     if (!state.selectedOrbital || !state.selectedTrait || state.selectedTransition === null) return null;
     return parseTransitionLevel(
@@ -62963,6 +63039,12 @@ var AvlOrbitalsCosmicZoom = ({
       state.selectedTransition
     );
   }, [parsedSchema, state.selectedOrbital, state.selectedTrait, state.selectedTransition]);
+  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]);
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const dragStateRef = useRef(null);
@@ -63010,6 +63092,7 @@ var AvlOrbitalsCosmicZoom = ({
     zoomRef.current = zoom;
   }, [zoom]);
   useEffect(() => {
+    if (state.level !== "application") return;
     const wrapper = transformWrapperRef.current;
     if (!wrapper) return;
     const wheelListener = (e) => {
@@ -63200,81 +63283,7 @@ var AvlOrbitalsCosmicZoom = ({
             }
           )
         ] }),
-        state.level === "orbital" && orbitalLevelData && /* @__PURE__ */ jsxs(
-          Box,
-          {
-            position: "absolute",
-            style: {
-              inset: 0,
-              paddingTop: 56,
-              paddingBottom: 24,
-              paddingLeft: 24,
-              paddingRight: 24,
-              display: "flex",
-              alignItems: "stretch",
-              justifyContent: "center",
-              gap: 24
-            },
-            children: [
-              /* @__PURE__ */ jsx(Box, { style: { flex: 1, maxWidth: 720, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
-                AvlOrbitalUnit,
-                {
-                  entityName: orbitalLevelData.entity.name,
-                  fields: orbitalLevelData.entity.fields.length,
-                  persistence: orbitalLevelData.entity.persistence || "persistent",
-                  traits: orbitalLevelData.traits.map((t) => ({ name: t.name })),
-                  pages: orbitalLevelData.pages.map((p2) => ({ name: p2.name })),
-                  color,
-                  animated
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  style: {
-                    width: 220,
-                    padding: 12,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 8,
-                    borderLeft: `1px solid ${color}`,
-                    opacity: 0.95,
-                    overflowY: "auto",
-                    minHeight: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "semibold", style: { color, marginBottom: 4 }, children: [
-                      "Traits (",
-                      orbitalLevelData.traits.length,
-                      ")"
-                    ] }),
-                    orbitalLevelData.traits.length === 0 && /* @__PURE__ */ jsx(Text, { variant: "small", style: { opacity: 0.6, color }, children: "No traits" }),
-                    orbitalLevelData.traits.map((trait) => /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: () => handleTraitSelect(trait.name),
-                        action: "COSMIC_DRILL_TRAIT",
-                        children: trait.name
-                      },
-                      trait.name
-                    )),
-                    orbitalLevelData.pages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "semibold", style: { color, marginTop: 12 }, children: [
-                        "Pages (",
-                        orbitalLevelData.pages.length,
-                        ")"
-                      ] }),
-                      orbitalLevelData.pages.map((page) => /* @__PURE__ */ jsx(Text, { variant: "small", style: { opacity: 0.7, color }, children: page.name }, page.name))
-                    ] })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        state.level === "trait" && traitLevelData && /* @__PURE__ */ jsx(
+        state.level === "trait" && scopedSchema && state.selectedOrbital && /* @__PURE__ */ jsx(
           Box,
           {
             position: "absolute",
@@ -63286,39 +63295,14 @@ var AvlOrbitalsCosmicZoom = ({
               paddingRight: 24
             },
             children: /* @__PURE__ */ jsx(
-              Box,
+              FlowCanvas,
               {
-                ref: transformWrapperRef,
-                position: "relative",
-                onPointerDown: handlePointerDown,
-                onPointerMove: handlePointerMove,
-                onPointerUp: handlePointerUp,
-                onPointerCancel: handlePointerUp,
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  cursor: dragStateRef.current ? "grabbing" : "grab",
-                  overflow: "hidden"
-                },
-                children: /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    position: "absolute",
-                    style: {
-                      inset: 0,
-                      transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                      transformOrigin: "0 0"
-                    },
-                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-                      AvlTraitScene,
-                      {
-                        data: traitLevelData,
-                        color,
-                        onTransitionClick: (idx) => handleTransitionSelect(idx)
-                      }
-                    ) })
-                  }
-                )
+                schema: scopedSchema,
+                initialLevel: "trait-expanded",
+                initialOrbital: state.selectedOrbital,
+                onNodeClick: handleCanvasNodeClick,
+                width: "100%",
+                height: "100%"
               }
             )
           }
@@ -63371,7 +63355,7 @@ var AvlOrbitalsCosmicZoom = ({
             )
           }
         ),
-        (state.level === "trait" || state.level === "transition") && /* @__PURE__ */ jsxs(
+        state.level === "transition" && /* @__PURE__ */ jsxs(
           Box,
           {
             position: "absolute",
@@ -63395,6 +63379,122 @@ var AvlOrbitalsCosmicZoom = ({
   );
 };
 AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
+
+// components/organisms/avl/AvlTraitScene.tsx
+init_AvlState();
+init_AvlTransitionLane();
+init_AvlSwimLane();
+init_types();
+init_avl_elk_layout();
+var log19 = createLogger("almadar:ui:avl:trait-scene");
+var SWIM_GUTTER2 = 120;
+var CENTER_W2 = 360;
+var AvlTraitScene = ({
+  data,
+  color = "var(--color-primary)",
+  onTransitionClick
+}) => {
+  const [layout, setLayout] = useState(null);
+  const dataKey = useMemo(() => JSON.stringify(data), [data]);
+  useEffect(() => {
+    computeTraitLayout(data).then(setLayout).catch((error) => {
+      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+    });
+  }, [dataKey]);
+  if (!layout) {
+    return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("text", { x: 300, y: 200, textAnchor: "middle", fill: color, fontSize: 12, opacity: 0.5, children: "Computing layout..." }) });
+  }
+  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
+  const machineOffsetX = hasExternal ? 0 : 30;
+  const padding = 20;
+  const availW = CENTER_W2 - padding * 2;
+  const availH = 300;
+  const scale = Math.min(1, availW / layout.width, availH / layout.height);
+  const scaledW = layout.width * scale;
+  const scaledH = layout.height * scale;
+  const offsetX = padding + (availW - scaledW) / 2;
+  const offsetY = 50 + (availH - scaledH) / 2;
+  const machineHeight = scaledH + 100;
+  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
+    /* @__PURE__ */ jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
+      "linked to ",
+      data.linkedEntity
+    ] }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
+      layout.edges.map((edge) => {
+        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
+        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: edgePath(edge.points),
+              fill: "none",
+              stroke: conn.color,
+              strokeWidth: conn.width,
+              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
+              opacity: 0.5,
+              markerEnd: marker
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AvlTransitionLane,
+            {
+              x: edge.labelX,
+              y: edge.labelY,
+              event: edge.event,
+              guard: edge.guardExpr,
+              effects: edge.effects.map((e) => ({ type: e.type })),
+              width: edge.labelW,
+              isBackward: edge.isBackward,
+              isSelfLoop: edge.isSelf,
+              color,
+              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
+                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
+                y: edge.labelY + offsetY
+              }) : void 0
+            }
+          )
+        ] }, edge.id);
+      }),
+      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        AvlState,
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          name: node.id,
+          isInitial: node.isInitial,
+          isTerminal: node.isTerminal,
+          role: node.role,
+          transitionCount: node.transitionCount,
+          color
+        }
+      ) }, node.id))
+    ] })
+  ] });
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
+  }
+  return /* @__PURE__ */ jsx(
+    AvlSwimLane,
+    {
+      listenedEvents: data.listenedEvents,
+      emittedEvents: data.emittedEvents,
+      centerWidth: CENTER_W2,
+      height: machineHeight,
+      color,
+      children: renderMachine
+    }
+  );
+};
+AvlTraitScene.displayName = "AvlTraitScene";
 var AvlClickTarget = ({
   x,
   y,