@almadar/ui 2.31.0 → 2.33.2

package/dist/avl/index.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useCallback, useContext, useMemo, useState, useEffect, useReducer, useRef } from 'react';
+import React8, { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
 import '@react-three/drei';
+import ELK from 'elkjs/lib/elk.bundled.js';
+import { Handle, Position, getBezierPath, BaseEdge, EdgeLabelRenderer, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
 import '@react-three/fiber';
 import 'three';
-import ELK from 'elkjs/lib/elk.bundled.js';
 
 // components/atoms/avl/types.ts
 var AVL_OPERATOR_COLORS = {
@@ -685,7 +686,7 @@ var AvlEffect = ({
   className,
   showBackground = false
 }) => {
-  const category = EFFECT_TYPE_TO_CATEGORY[effectType];
+  const category = EFFECT_TYPE_TO_CATEGORY[effectType] ?? "control";
   const catColors = EFFECT_CATEGORY_COLORS[category];
   const iconColor = showBackground ? catColors.color : color;
   return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
@@ -3596,113 +3597,6 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-foreground",
-  h2: "text-3xl font-bold tracking-tight text-foreground",
-  h3: "text-2xl font-bold text-foreground",
-  h4: "text-xl font-bold text-foreground",
-  h5: "text-lg font-bold text-foreground",
-  h6: "text-base font-bold text-foreground",
-  heading: "text-2xl font-bold text-foreground",
-  subheading: "text-lg font-semibold text-foreground",
-  body1: "text-base font-normal text-foreground",
-  body2: "text-sm font-normal text-foreground",
-  body: "text-base font-normal text-foreground",
-  caption: "text-xs font-normal text-muted-foreground",
-  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
-  small: "text-sm font-normal text-foreground",
-  large: "text-lg font-medium text-foreground",
-  label: "text-sm font-medium text-foreground"
-};
-var colorStyles = {
-  primary: "text-foreground",
-  secondary: "text-muted-foreground",
-  muted: "text-muted-foreground",
-  error: "text-error",
-  success: "text-success",
-  warning: "text-warning",
-  inherit: "text-inherit"
-};
-var weightStyles = {
-  light: "font-light",
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-var defaultElements = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  heading: "h2",
-  subheading: "h3",
-  body1: "p",
-  body2: "p",
-  body: "p",
-  caption: "span",
-  overline: "span",
-  small: "span",
-  large: "p",
-  label: "span"
-};
-var typographySizeStyles = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg",
-  xl: "text-xl",
-  "2xl": "text-2xl",
-  "3xl": "text-3xl"
-};
-var overflowStyles = {
-  visible: "overflow-visible",
-  hidden: "overflow-hidden",
-  wrap: "break-words overflow-hidden",
-  "clamp-2": "overflow-hidden line-clamp-2",
-  "clamp-3": "overflow-hidden line-clamp-3"
-};
-var Typography = ({
-  variant: variantProp,
-  level,
-  color = "primary",
-  align,
-  weight,
-  size,
-  truncate = false,
-  overflow,
-  as,
-  id,
-  className,
-  style,
-  content,
-  children
-}) => {
-  const variant = variantProp ?? (level ? `h${level}` : "body1");
-  const Component = as || defaultElements[variant];
-  const Comp = Component;
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      id,
-      className: cn(
-        variantStyles[variant],
-        colorStyles[color],
-        weight && weightStyles[weight],
-        size && typographySizeStyles[size],
-        align && `text-${align}`,
-        truncate && "truncate overflow-hidden text-ellipsis",
-        overflow && overflowStyles[overflow],
-        className
-      ),
-      style,
-      children: children ?? content
-    }
-  );
-};
-Typography.displayName = "Typography";
 var EventBusContext = createContext(null);
 
 // hooks/useEventBus.ts
@@ -3972,83 +3866,6 @@ var Box = React8.forwardRef(
   }
 );
 Box.displayName = "Box";
-var gapStyles = {
-  none: "gap-0",
-  xs: "gap-1",
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8",
-  "2xl": "gap-12"
-};
-var alignStyles = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var justifyStyles = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-var Stack = ({
-  direction = "vertical",
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  wrap = false,
-  reverse = false,
-  flex = false,
-  className,
-  style,
-  children,
-  as: Component = "div",
-  onClick,
-  onKeyDown,
-  role,
-  tabIndex,
-  action,
-  actionPayload,
-  responsive = false
-}) => {
-  const eventBus = useEventBus();
-  const handleClick = (e) => {
-    if (action) {
-      eventBus.emit(`UI:${action}`, actionPayload ?? {});
-    }
-    onClick?.(e);
-  };
-  const isHorizontal = direction === "horizontal";
-  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  const Comp = Component;
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: cn(
-        "flex",
-        directionClass,
-        gapStyles[gap],
-        alignStyles[align],
-        justifyStyles[justify],
-        wrap && "flex-wrap",
-        flex && "flex-1",
-        className
-      ),
-      style,
-      onClick: action || onClick ? handleClick : void 0,
-      onKeyDown,
-      role,
-      tabIndex,
-      children
-    }
-  );
-};
-var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
 
 // components/molecules/avl/avl-layout.ts
 function ringPositions(cx, cy, r2, count, startAngle = -Math.PI / 2) {
@@ -5600,6 +5417,31 @@ var AvlBehaviorGlyph = ({
 };
 AvlBehaviorGlyph.displayName = "AvlBehaviorGlyph";
 
+// components/molecules/avl/avl-canvas-types.ts
+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);
+}
+
 // components/organisms/avl/avl-schema-parser.ts
 function getEntity(orbital) {
   const entity = orbital.entity;
@@ -5851,508 +5693,57 @@ function parseTransitionLevel(schema, orbitalName, traitName, transitionIndex) {
   };
 }
 
-// components/organisms/avl/avl-zoom-state.ts
-var initialZoomState = {
-  level: "application",
-  selectedOrbital: null,
-  selectedTrait: null,
-  selectedTransition: null,
-  animating: false,
-  animationDirection: "in",
-  animationTarget: null
-};
-function zoomReducer(state, action) {
-  switch (action.type) {
-    case "ZOOM_INTO_ORBITAL": {
-      if (state.level !== "application" || state.animating) return state;
-      return {
-        ...state,
-        animating: true,
-        animationDirection: "in",
-        animationTarget: { x: action.targetPosition.x, y: action.targetPosition.y, scale: 3 },
-        selectedOrbital: action.orbital
-      };
-    }
-    case "ZOOM_INTO_TRAIT": {
-      if (state.level !== "orbital" || state.animating) return state;
-      return {
-        ...state,
-        animating: true,
-        animationDirection: "in",
-        animationTarget: { x: action.targetPosition.x, y: action.targetPosition.y, scale: 3 },
-        selectedTrait: action.trait
-      };
-    }
-    case "ZOOM_INTO_TRANSITION": {
-      if (state.level !== "trait" || state.animating) return state;
-      return {
-        ...state,
-        animating: true,
-        animationDirection: "in",
-        animationTarget: { x: action.targetPosition.x, y: action.targetPosition.y, scale: 3 },
-        selectedTransition: action.transitionIndex
-      };
-    }
-    case "ZOOM_OUT": {
-      if (state.level === "application" || state.animating) return state;
-      return {
-        ...state,
-        animating: true,
-        animationDirection: "out",
-        animationTarget: { x: 300, y: 200, scale: 0.3 }
-      };
+// components/molecules/avl/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;
     }
-    case "ANIMATION_COMPLETE": {
-      if (!state.animating) return state;
-      if (state.animationDirection === "in") {
-        const nextLevel = state.level === "application" ? "orbital" : state.level === "orbital" ? "trait" : "transition";
-        return {
-          ...state,
-          level: nextLevel,
-          animating: false,
-          animationTarget: null
-        };
-      }
-      if (state.level === "transition") {
-        return {
-          ...state,
-          level: "trait",
-          selectedTransition: null,
-          animating: false,
-          animationTarget: null
-        };
-      }
-      if (state.level === "trait") {
-        return {
-          ...state,
-          level: "orbital",
-          selectedTrait: null,
-          animating: false,
-          animationTarget: null
-        };
-      }
-      if (state.level === "orbital") {
-        return {
-          ...state,
-          level: "application",
-          selectedOrbital: null,
-          animating: false,
-          animationTarget: null
-        };
+    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
       }
-      return state;
-    }
-    case "SWITCH_TRAIT": {
-      if (state.level !== "trait" || state.animating) return state;
-      return {
-        ...state,
-        selectedTrait: action.trait,
-        selectedTransition: null
-      };
-    }
-    case "RESET": {
-      return initialZoomState;
-    }
-    default:
-      return state;
-  }
-}
-function getBreadcrumbs(state) {
-  const crumbs = [{ label: "Application", level: "application" }];
-  if (state.selectedOrbital) {
-    crumbs.push({ label: state.selectedOrbital, level: "orbital" });
-  }
-  if (state.selectedTrait) {
-    crumbs.push({ label: state.selectedTrait, level: "trait" });
-  }
-  if (state.selectedTransition !== null) {
-    crumbs.push({ label: `Transition #${state.selectedTransition}`, level: "transition" });
+    });
   }
-  return crumbs;
-}
-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
+  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,
+        toTrait: link.listenerTrait
       }
-    )
-  ] });
-};
-AvlClickTarget.displayName = "AvlClickTarget";
-var ORBITAL_R = 60;
-var ENTITY_R = 14;
-function bundleCrossLinks(links) {
-  const bundles = /* @__PURE__ */ new Map();
-  for (const link of links) {
-    const key = [link.emitterOrbital, link.listenerOrbital].sort().join("::");
-    if (!bundles.has(key)) bundles.set(key, []);
-    bundles.get(key).push(link);
+    });
   }
-  return bundles;
+  return { nodes, edges };
 }
-var AvlApplicationScene = ({
-  data,
-  color = "var(--color-primary)",
-  onOrbitalClick
-}) => {
-  const posMap = /* @__PURE__ */ new Map();
-  data.orbitals.forEach((o) => posMap.set(o.name, o.position));
-  const bundles = bundleCrossLinks(data.crossLinks);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    Array.from(bundles.entries()).map(([key, links]) => {
-      const first = links[0];
-      const fromPos = posMap.get(first.emitterOrbital);
-      const toPos = posMap.get(first.listenerOrbital);
-      if (!fromPos || !toPos) return null;
-      const cp = curveControlPoint(fromPos.x, fromPos.y, toPos.x, toPos.y, 40);
-      const midX = cp.cpx;
-      const midY = cp.cpy;
-      return /* @__PURE__ */ jsxs("g", { opacity: 0.5, children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: `M${fromPos.x},${fromPos.y} Q${midX},${midY} ${toPos.x},${toPos.y}`,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 1.5,
-            strokeDasharray: "6 3",
-            markerEnd: "url(#cosmicArrow)"
-          }
-        ),
-        links.map((link, i) => /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            AvlEffect,
-            {
-              x: midX - 12,
-              y: midY - 10 + i * 16,
-              effectType: "emit",
-              size: 8,
-              color
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: midX + 2,
-              y: midY - 6 + i * 16,
-              fill: color,
-              fontSize: 7,
-              opacity: 0.7,
-              children: link.eventName
-            }
-          )
-        ] }, `${key}-${i}`))
-      ] }, key);
-    }),
-    data.orbitals.map((orbital) => {
-      const { x, y } = orbital.position;
-      const traitAngleStart = -60;
-      const traitAngleStep = orbital.traitNames.length > 1 ? 120 / (orbital.traitNames.length - 1) : 0;
-      const pageAngleStart = -Math.PI / 3;
-      const pageAngleStep = orbital.pageNames.length > 1 ? Math.PI * 0.8 / (orbital.pageNames.length - 1) : 0;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(AvlOrbital, { cx: x, cy: y, r: ORBITAL_R, label: orbital.name, color }),
-        orbital.traitNames.map((trait, i) => /* @__PURE__ */ jsx(
-          AvlTrait,
-          {
-            cx: x,
-            cy: y,
-            rx: 25 + i * 10,
-            ry: 12 + i * 4,
-            rotation: traitAngleStart + i * traitAngleStep,
-            color,
-            opacity: 0.4
-          },
-          trait
-        )),
-        /* @__PURE__ */ jsx(
-          AvlEntity,
-          {
-            x,
-            y,
-            r: ENTITY_R,
-            fieldCount: orbital.fieldCount,
-            persistence: orbital.persistence,
-            color
-          }
-        ),
-        orbital.pageNames.map((page, i) => {
-          const angle = pageAngleStart + i * pageAngleStep;
-          const px = x + (ORBITAL_R + 12) * Math.cos(angle);
-          const py = y + (ORBITAL_R + 12) * Math.sin(angle);
-          return /* @__PURE__ */ jsx(AvlPage, { x: px, y: py, size: 6, label: page, color }, page);
-        }),
-        onOrbitalClick && /* @__PURE__ */ jsx(
-          AvlClickTarget,
-          {
-            x: x - ORBITAL_R,
-            y: y - ORBITAL_R,
-            width: ORBITAL_R * 2,
-            height: ORBITAL_R * 2,
-            onClick: () => onOrbitalClick(orbital.name, { x, y }),
-            label: `Orbital: ${orbital.name} (${orbital.traitNames.length} traits, ${orbital.pageNames.length} pages)`,
-            glowColor: color,
-            children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 0, height: 0, fill: "transparent" })
-          }
-        )
-      ] }, orbital.name);
-    }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "cosmicArrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: color, opacity: 0.5 }) }) })
-  ] });
-};
-AvlApplicationScene.displayName = "AvlApplicationScene";
-var CX = 300;
-var CY = 200;
-var VIEWBOX_H = 400;
-var ORBITAL_R2 = 130;
-var ENTITY_R2 = 24;
-var AvlOrbitalScene = ({
-  data,
-  color = "var(--color-primary)",
-  highlightedTrait,
-  onTraitClick,
-  onTraitHighlight
-}) => {
-  const traitAngleStart = -Math.PI / 3;
-  const traitAngleStep = data.traits.length > 1 ? Math.PI * 1.2 / (data.traits.length - 1) : 0;
-  const pageAngleStart = -Math.PI / 3;
-  const pageAngleStep = data.pages.length > 1 ? Math.PI * 0.8 / (data.pages.length - 1) : 0;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(AvlOrbital, { cx: CX, cy: CY, r: ORBITAL_R2, label: data.name, color }),
-    data.traits.map((trait, i) => {
-      const rotation = traitAngleStart + i * traitAngleStep;
-      const rotationDeg = rotation * 180 / Math.PI;
-      const baseRx = 55 + i * 20;
-      const baseRy = 24 + i * 8;
-      const labelX = CX - baseRx - 10;
-      const labelY = CY;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          AvlTrait,
-          {
-            cx: CX,
-            cy: CY,
-            rx: baseRx,
-            ry: baseRy,
-            rotation: rotationDeg,
-            label: trait.name,
-            color,
-            opacity: highlightedTrait ? highlightedTrait === trait.name ? 1 : 0.25 : 0.7
-          }
-        ),
-        onTraitClick && /* @__PURE__ */ jsx(
-          AvlClickTarget,
-          {
-            x: CX - baseRx,
-            y: CY - baseRy,
-            width: baseRx * 2,
-            height: baseRy * 2,
-            onClick: () => onTraitClick(trait.name, { x: CX, y: CY }),
-            label: `Trait: ${trait.name} (${trait.stateCount} states)`,
-            glowColor: color,
-            children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 0, height: 0, fill: "transparent" })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "text",
-          {
-            x: labelX - 20,
-            y: labelY + 12,
-            textAnchor: "end",
-            fill: color,
-            fontSize: 7,
-            opacity: 0.4,
-            transform: `rotate(${-rotationDeg},${labelX - 20},${labelY + 12})`,
-            children: [
-              trait.stateCount,
-              "s ",
-              trait.eventCount,
-              "e"
-            ]
-          }
-        )
-      ] }, trait.name);
-    }),
-    /* @__PURE__ */ jsx(
-      AvlEntity,
-      {
-        x: CX,
-        y: CY,
-        r: ENTITY_R2,
-        fieldCount: data.entity.fields.length,
-        persistence: data.entity.persistence,
-        color
-      }
-    ),
-    /* @__PURE__ */ jsx("text", { x: CX, y: CY + ENTITY_R2 + 16, textAnchor: "middle", fill: color, fontSize: 10, fontWeight: "bold", children: data.entity.name }),
-    data.entity.fields.slice(0, 8).map((field, i) => {
-      const angle = -Math.PI / 2 + Math.PI * 2 * i / Math.min(data.entity.fields.length, 8);
-      const fx = CX + (ENTITY_R2 + 30) * Math.cos(angle);
-      const fy = CY + (ENTITY_R2 + 30) * Math.sin(angle);
-      return /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: fx,
-          y: fy,
-          textAnchor: "middle",
-          dominantBaseline: "central",
-          fill: color,
-          fontSize: 7,
-          opacity: 0.5,
-          children: field.name
-        },
-        field.name
-      );
-    }),
-    data.pages.map((page, i) => {
-      const angle = pageAngleStart + i * pageAngleStep;
-      const px = CX + (ORBITAL_R2 + 15) * Math.cos(angle);
-      const py = CY + (ORBITAL_R2 + 15) * Math.sin(angle);
-      return /* @__PURE__ */ jsx(AvlPage, { x: px, y: py, label: page.route, color }, page.name);
-    }),
-    data.traits.length > 1 && /* @__PURE__ */ jsx("g", { children: data.traits.map((trait, i) => {
-      const pillW = 70;
-      const gap = 8;
-      const totalW = data.traits.length * pillW + (data.traits.length - 1) * gap;
-      const startX = CX - totalW / 2;
-      const px = startX + i * (pillW + gap);
-      const py = VIEWBOX_H - 30;
-      const isHighlighted = highlightedTrait === trait.name;
-      return /* @__PURE__ */ jsxs(
-        "g",
-        {
-          style: { cursor: "pointer" },
-          onClick: () => onTraitClick?.(trait.name, { x: CX, y: CY }),
-          onMouseEnter: () => onTraitHighlight?.(trait.name),
-          onMouseLeave: () => onTraitHighlight?.(null),
-          children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: px,
-                y: py,
-                width: pillW,
-                height: 22,
-                rx: 11,
-                fill: isHighlighted ? color : "transparent",
-                stroke: color,
-                strokeWidth: isHighlighted ? 1.5 : 0.8,
-                opacity: isHighlighted ? 0.15 : 0.3
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: px + pillW / 2,
-                y: py + 14,
-                textAnchor: "middle",
-                fill: color,
-                fontSize: 8,
-                fontWeight: isHighlighted ? "bold" : "normal",
-                opacity: isHighlighted ? 1 : 0.6,
-                children: trait.name.length > 10 ? trait.name.slice(0, 9) + "\u2026" : trait.name
-              }
-            )
-          ]
-        },
-        `tab-${trait.name}`
-      );
-    }) }),
-    data.externalLinks.map((link, i) => {
-      const isOut = link.direction === "out";
-      const edgeX = isOut ? 580 : 20;
-      const y = 50 + i * 24;
-      return /* @__PURE__ */ jsxs("g", { opacity: 0.3, children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: isOut ? CX + ORBITAL_R2 + 10 : edgeX,
-            y1: y,
-            x2: isOut ? edgeX : CX - ORBITAL_R2 - 10,
-            y2: y,
-            stroke: color,
-            strokeWidth: 1,
-            strokeDasharray: "6 3"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "text",
-          {
-            x: isOut ? 585 : 5,
-            y: y + 4,
-            textAnchor: isOut ? "start" : "start",
-            fill: color,
-            fontSize: 7,
-            opacity: 0.7,
-            children: [
-              isOut ? "emit" : "listen",
-              ": ",
-              link.eventName,
-              " (",
-              link.targetOrbital,
-              ")"
-            ]
-          }
-        )
-      ] }, `ext-${i}`);
-    })
-  ] });
-};
-AvlOrbitalScene.displayName = "AvlOrbitalScene";
 function stateWidth(transitionCount) {
   if (transitionCount >= 5) return 160;
   if (transitionCount >= 3) return 130;
@@ -6360,7 +5751,7 @@ function stateWidth(transitionCount) {
 }
 var STATE_H = 40;
 var elk = new ELK();
-async function computeLayout(data) {
+async function computeTraitLayout(data) {
   const transitionCounts = {};
   for (const s of data.states) transitionCounts[s.name] = 0;
   for (const t of data.transitions) {
@@ -6483,17 +5874,898 @@ function edgePath(points) {
   for (let i = 1; i < points.length; i++) d += ` L ${points[i].x},${points[i].y}`;
   return d;
 }
-var SWIM_GUTTER = 120;
-var CENTER_W = 360;
-var AvlTraitScene = ({
-  data,
-  color = "var(--color-primary)",
-  onTransitionClick
-}) => {
-  const [layout, setLayout] = useState(null);
+function toFieldKind(type) {
+  const normalized = type.toLowerCase();
+  if (["string", "number", "boolean", "date", "enum", "object", "array"].includes(normalized)) {
+    return normalized;
+  }
+  return "string";
+}
+var SystemNode = ({ data }) => {
+  const { orbitalName, fields, traits, pages, persistence } = data;
+  const allStates = traits.flatMap((t) => {
+    const detail = data.traitDetails[t.name];
+    if (!detail) return [];
+    return detail.states;
+  });
+  const fieldDots = fields.slice(0, 8);
+  const stateChain = allStates.slice(0, 6);
+  const pageDots = pages.slice(0, 3);
+  const transitionCounts = {};
+  for (const t of traits) {
+    const detail = data.traitDetails[t.name];
+    if (!detail) continue;
+    for (const s of detail.states) transitionCounts[s.name] = 0;
+    for (const tr of detail.transitions) {
+      transitionCounts[tr.from] = (transitionCounts[tr.from] ?? 0) + 1;
+      transitionCounts[tr.to] = (transitionCounts[tr.to] ?? 0) + 1;
+    }
+  }
+  const maxTC = Math.max(...Object.values(transitionCounts), 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] px-3 py-2 shadow-sm",
+      style: { minWidth: 160, maxWidth: 220 },
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2 !h-2 !bg-orange-400" }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2 !h-2 !bg-orange-400" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [
+          /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEntity, { x: 10, y: 10, r: 8, persistence }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-[var(--color-foreground)] truncate flex-1", children: orbitalName })
+        ] }),
+        fieldDots.length > 0 && /* @__PURE__ */ jsx("svg", { width: fieldDots.length * 10 + 2, height: 10, viewBox: `0 0 ${fieldDots.length * 10 + 2} 10`, className: "mb-1", children: fieldDots.map((f, i) => /* @__PURE__ */ jsx(AvlFieldType, { x: i * 10 + 5, y: 5, kind: toFieldKind(f.type), size: 4 }, f.name)) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          stateChain.length > 0 && /* @__PURE__ */ jsx("svg", { width: stateChain.length * 14 + 2, height: 10, viewBox: `0 0 ${stateChain.length * 14 + 2} 10`, children: stateChain.map((s, i) => {
+            const tc = transitionCounts[s.name] ?? 0;
+            const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
+            return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+              /* @__PURE__ */ jsx(AvlState, { x: i * 14 + 1, y: 1, width: 10, height: 8, name: "", role, isInitial: s.isInitial, isTerminal: s.isTerminal }),
+              i < stateChain.length - 1 && /* @__PURE__ */ jsx("line", { x1: i * 14 + 12, y1: 5, x2: i * 14 + 15, y2: 5, stroke: "var(--color-border)", strokeWidth: 0.5 })
+            ] }, s.name);
+          }) }),
+          pageDots.length > 0 && /* @__PURE__ */ jsx("svg", { width: pageDots.length * 10, height: 10, viewBox: `0 0 ${pageDots.length * 10} 10`, children: pageDots.map((p, i) => /* @__PURE__ */ jsx(AvlPage, { x: i * 10 + 4, y: 4, size: 5 }, p.name)) })
+        ] })
+      ]
+    }
+  );
+};
+SystemNode.displayName = "SystemNode";
+var NODE_W = 24;
+var NODE_H = 16;
+var GAP = 8;
+var ARROW_W = 16;
+var MiniStateMachine = ({ data, className }) => {
+  const states = data.states;
+  if (states.length === 0) return null;
+  const transitionCounts = {};
+  for (const s of states) transitionCounts[s.name] = 0;
+  for (const t of data.transitions) {
+    transitionCounts[t.from] = (transitionCounts[t.from] ?? 0) + 1;
+    transitionCounts[t.to] = (transitionCounts[t.to] ?? 0) + 1;
+  }
+  const maxTC = Math.max(...Object.values(transitionCounts), 0);
+  const effectTypes = /* @__PURE__ */ new Set();
+  for (const t of data.transitions) {
+    for (const e of t.effects) effectTypes.add(e.type);
+  }
+  const effectList = Array.from(effectTypes).slice(0, 6);
+  const totalW = states.length * NODE_W + (states.length - 1) * (GAP + ARROW_W + GAP);
+  const svgW = Math.max(totalW + 4, 60);
+  const svgH = NODE_H + (effectList.length > 0 ? 18 : 4);
+  return /* @__PURE__ */ jsxs("svg", { width: svgW, height: svgH, viewBox: `0 0 ${svgW} ${svgH}`, className, children: [
+    states.map((s, i) => {
+      const x = 2 + i * (NODE_W + GAP + ARROW_W + GAP);
+      const tc = transitionCounts[s.name] ?? 0;
+      const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
+      return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          AvlState,
+          {
+            x,
+            y: 0,
+            width: NODE_W,
+            height: NODE_H,
+            name: "",
+            role,
+            isInitial: s.isInitial,
+            isTerminal: s.isTerminal
+          }
+        ),
+        i < states.length - 1 && /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x + NODE_W + GAP,
+              y1: NODE_H / 2,
+              x2: x + NODE_W + GAP + ARROW_W - 3,
+              y2: NODE_H / 2,
+              stroke: "var(--color-muted-foreground)",
+              strokeWidth: 1,
+              opacity: 0.4
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `${x + NODE_W + GAP + ARROW_W - 3},${NODE_H / 2 - 2.5} ${x + NODE_W + GAP + ARROW_W},${NODE_H / 2} ${x + NODE_W + GAP + ARROW_W - 3},${NODE_H / 2 + 2.5}`,
+              fill: "var(--color-muted-foreground)",
+              opacity: 0.4
+            }
+          )
+        ] })
+      ] }, s.name);
+    }),
+    effectList.length > 0 && /* @__PURE__ */ jsx("g", { children: effectList.map((et, i) => /* @__PURE__ */ jsx(
+      AvlEffect,
+      {
+        x: 2 + i * 14,
+        y: NODE_H + 4,
+        effectType: et,
+        size: 10,
+        showBackground: true
+      },
+      et
+    )) })
+  ] });
+};
+MiniStateMachine.displayName = "MiniStateMachine";
+function toFieldKind2(type) {
+  const normalized = type.toLowerCase();
+  if (["string", "number", "boolean", "date", "enum", "object", "array"].includes(normalized)) {
+    return normalized;
+  }
+  return "string";
+}
+var PERSISTENCE_BORDER = {
+  persistent: "border-l-[3px] border-l-blue-500 border-solid",
+  runtime: "border-l-[3px] border-l-blue-500 border-dashed",
+  singleton: "border-l-[3px] border-l-blue-500 border-double",
+  instance: "border-l-[3px] border-l-blue-500 border-dotted"
+};
+var PERSISTENCE_ICON = {
+  persistent: "\u26C1",
+  // ⛁ cylinder
+  runtime: "\u27F3",
+  // ⟳ cycle
+  singleton: "\u25CE",
+  // ◎ double ring
+  instance: "\u22A1"
+  // ⊡ box
+};
+var ModuleCard = ({ data }) => {
+  const {
+    orbitalName,
+    entityName,
+    persistence,
+    fields,
+    traits,
+    pages,
+    traitDetails,
+    externalLinks
+  } = data;
+  const cols = Math.min(3, Math.max(2, Math.ceil(fields.length / 3)));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden",
+      style: { minWidth: 280, maxWidth: 400 },
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
+        /* @__PURE__ */ jsxs("div", { className: `px-3 py-2 border-b border-[var(--color-border)] ${PERSISTENCE_BORDER[persistence] ?? ""}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
+            /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEntity, { x: 10, y: 10, r: 8, persistence }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-[var(--color-foreground)]", children: entityName }),
+            /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] opacity-50", title: persistence, children: PERSISTENCE_ICON[persistence] ?? "" })
+          ] }),
+          fields.length > 0 && /* @__PURE__ */ jsx("div", { className: `grid gap-x-3 gap-y-0.5`, style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: fields.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(AvlFieldType, { x: 8, y: 8, kind: toFieldKind2(f.type), size: 6 }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--color-muted-foreground)] truncate", children: f.name })
+          ] }, f.name)) })
+        ] }),
+        traits.map((trait) => {
+          const detail = traitDetails[trait.name];
+          const traitEmits = externalLinks.filter((l) => l.direction === "out" && l.traitName === trait.name);
+          const traitListens = externalLinks.filter((l) => l.direction === "in" && l.traitName === trait.name);
+          return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[12px] font-semibold text-[var(--color-foreground)] mb-1", children: trait.name }),
+            detail && /* @__PURE__ */ jsx(MiniStateMachine, { data: detail, className: "mb-1" }),
+            (traitEmits.length > 0 || traitListens.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[9px] mt-1", children: [
+              traitListens.map((l) => /* @__PURE__ */ jsxs("span", { style: { color: CONNECTION_COLORS.emitListen.color }, children: [
+                "\u25C0~~",
+                " ",
+                l.eventName
+              ] }, l.eventName)),
+              traitListens.length > 0 && traitEmits.length > 0 && /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              traitEmits.map((l) => /* @__PURE__ */ jsxs("span", { style: { color: CONNECTION_COLORS.emitListen.color }, className: "ml-auto", children: [
+                l.eventName,
+                " ",
+                "~~\u25B6"
+              ] }, l.eventName))
+            ] })
+          ] }, trait.name);
+        }),
+        pages.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 flex items-center gap-2 flex-wrap", children: pages.map((p) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx("svg", { width: 10, height: 10, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx(AvlPage, { x: 6, y: 6, size: 5 }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-[var(--color-muted-foreground)]", children: p.route })
+        ] }, p.name)) })
+      ]
+    }
+  );
+};
+ModuleCard.displayName = "ModuleCard";
+var SWIM_GUTTER = 120;
+var CENTER_W = 360;
+var BehaviorView = ({ data }) => {
+  const [layout, setLayout] = useState(null);
+  const traitName = data.traits[0]?.name;
+  const traitData = traitName ? data.traitDetails[traitName] : void 0;
+  const dataKey = useMemo(() => JSON.stringify(traitData), [traitData]);
+  useEffect(() => {
+    if (!traitData) return;
+    computeTraitLayout(traitData).then(setLayout).catch(console.error);
+  }, [dataKey]);
+  if (!traitData) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-4 text-center text-[var(--color-muted-foreground)] text-sm", children: "No trait data" });
+  }
+  if (!layout) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-4 text-center text-[var(--color-muted-foreground)] text-sm", children: "Computing layout..." });
+  }
+  const hasExternal = traitData.listenedEvents.length > 0 || traitData.emittedEvents.length > 0;
+  const viewW = hasExternal ? SWIM_GUTTER + CENTER_W + SWIM_GUTTER : CENTER_W + 60;
+  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 scaledH = layout.height * scale;
+  const scaledW = layout.width * 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: "var(--color-foreground)", fontSize: 18, fontWeight: "700", fontFamily: "inherit", children: traitData.name }),
+    /* @__PURE__ */ jsxs("text", { x: CENTER_W / 2, y: 36, textAnchor: "middle", fill: "var(--color-muted-foreground)", fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
+      "on ",
+      traitData.linkedEntity
+    ] }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("marker", { id: "bvArrow", 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: "bvArrowBack", 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(#bvArrowBack)" : "url(#bvArrow)";
+        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
+            }
+          )
+        ] }, edge.id);
+      }),
+      layout.nodes.map((node) => /* @__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
+        },
+        node.id
+      ))
+    ] })
+  ] });
+  const svgH = machineHeight + 20;
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] overflow-hidden", children: /* @__PURE__ */ jsx("svg", { width: viewW, height: svgH, viewBox: `0 0 ${viewW} ${svgH}`, children: /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] overflow-hidden", children: /* @__PURE__ */ jsx("svg", { width: viewW, height: svgH, viewBox: `0 0 ${viewW} ${svgH}`, children: /* @__PURE__ */ jsx(
+    AvlSwimLane,
+    {
+      listenedEvents: traitData.listenedEvents,
+      emittedEvents: traitData.emittedEvents,
+      centerWidth: CENTER_W,
+      height: machineHeight,
+      children: renderMachine
+    }
+  ) }) });
+};
+BehaviorView.displayName = "BehaviorView";
+var DetailView = ({ data }) => {
+  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: "No transition data" });
+  }
+  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 t of traitData.transitions) {
+    transitionCounts[t.from] = (transitionCounts[t.from] ?? 0) + 1;
+    transitionCounts[t.to] = (transitionCounts[t.to] ?? 0) + 1;
+  }
+  const maxTC = Math.max(...Object.values(transitionCounts), 0);
+  const fromRole = getStateRole(transition.from, fromState?.isInitial, fromState?.isTerminal, transitionCounts[transition.from] ?? 0, maxTC);
+  const toRole = getStateRole(transition.to, toState?.isInitial, toState?.isTerminal, 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, isTerminal: fromState?.isTerminal }) }),
+      /* @__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, isTerminal: toState?.isTerminal }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "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-[14px] font-semibold text-[var(--color-foreground)]", children: transition.event })
+        ] })
+      ] }),
+      hasGuard && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "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-[11px] 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-[10px] uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "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-[10px] 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-[11px] text-[var(--color-foreground)]", children: effect.type })
+        ] }, i)) })
+      ] })
+    ] })
+  ] });
+};
+DetailView.displayName = "DetailView";
+var AvlOrbitalNode = (props) => {
+  const band = useZoomBand();
+  const data = props.data;
+  switch (band) {
+    case "system":
+      return /* @__PURE__ */ jsx(SystemNode, { data });
+    case "module":
+      return /* @__PURE__ */ jsx(ModuleCard, { data });
+    case "behavior":
+      return /* @__PURE__ */ jsx(BehaviorView, { data });
+    case "detail":
+      return /* @__PURE__ */ jsx(DetailView, { data });
+  }
+};
+AvlOrbitalNode.displayName = "AvlOrbitalNode";
+var AvlTransitionEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  style
+}) => {
+  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-amber-500 bg-amber-500/10 shrink-0", title: "Guard" }),
+          /* @__PURE__ */ jsx("div", { className: "px-2 py-0.5 text-[10px] 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-violet-500/80 shrink-0", title: "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 : "#EF4444";
+  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-[10px] font-medium rounded-full border truncate max-w-[180px]",
+            style: {
+              color: wireColor,
+              borderColor: wireColor,
+              backgroundColor: `${wireColor}14`
+            },
+            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 = "#64748B";
+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 = "#8B5CF6";
+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_LABELS = {
+  system: "System",
+  module: "Module",
+  behavior: "Behavior",
+  detail: "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 segments = [];
+  if (applicationName) {
+    segments.push({ icon: "\u25C9", label: applicationName });
+  }
+  segments.push({ icon: BAND_ICONS[band], label: BAND_LABELS[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-[var(--color-card)]/90 border border-[var(--color-border)] text-[11px] text-[var(--color-muted-foreground)] backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React8.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", label: "Entity" },
+    { icon: "\u25CF\u25B2\u25A0\u25C6", label: "Field types" },
+    { icon: "\u25CF\u2501\u25CF", label: "State chain" },
+    { icon: "\u25A0", label: "Page" },
+    { icon: "\u2500 \u2500", label: "Event wire" }
+  ],
+  module: [
+    { icon: "\u25C9", label: "Entity" },
+    { icon: "\u26C1", label: "Persistence" },
+    { icon: "\u25CF\u25B2\u25A0\u25C6\u25CB\u2B21\u2261", label: "Field types" },
+    { icon: "\u2501\u25CF\u2501", label: "State machine" },
+    { icon: "\u229E\u270E\u26C1\u{1F4E1}", label: "Effects" },
+    { icon: "\u25A0", label: "Page" },
+    { icon: "\u25C0\u301C\u301C / \u301C\u301C\u25B6", label: "Emit/Listen" }
+  ],
+  behavior: [
+    { icon: "\u25CF green", label: "Initial state" },
+    { icon: "\u25CF red", label: "Terminal state" },
+    { icon: "\u25CF blue", label: "Hub state" },
+    { icon: "\u26A1", label: "Event" },
+    { icon: "\u25C7", label: "Guard" },
+    { icon: "\u229E\u270E\u26C1\u{1F4E1}\u{1F514}", label: "Effects" },
+    { icon: "\u2500 \u2500 orange", label: "Emit/Listen" }
+  ],
+  detail: [
+    { icon: "\u26A1", label: "Trigger event" },
+    { icon: "\u25C7", label: "Guard diamond" },
+    { icon: "\u229E", label: "render-ui" },
+    { icon: "\u270E", label: "set" },
+    { icon: "\u26C1", label: "persist" },
+    { icon: "\u{1F4E1}", label: "emit" },
+    { icon: "@", label: "Binding" },
+    { icon: "\u25CF\u25B2\u25A0", label: "Field types" }
+  ]
+};
+var ZoomLegend = ({ band }) => {
+  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-[10px] rounded-md bg-[var(--color-card)]/90 border border-[var(--color-border)] text-[var(--color-muted-foreground)] backdrop-blur-sm cursor-pointer hover:bg-[var(--color-card)]",
+        children: collapsed ? "Legend" : "Hide"
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 px-2 py-1.5 rounded-md bg-[var(--color-card)]/95 border border-[var(--color-border)] backdrop-blur-sm space-y-0.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-[var(--color-muted-foreground)]", children: [
+      /* @__PURE__ */ jsx("span", { className: "opacity-70 w-6 text-center", children: item.icon }),
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }, i)) })
+  ] });
+};
+ZoomLegend.displayName = "ZoomLegend";
+var NODE_TYPES = {
+  orbital: AvlOrbitalNode
+};
+var EDGE_TYPES = {
+  transition: AvlTransitionEdge,
+  eventWire: AvlEventWireEdge,
+  backward: AvlBackwardEdge,
+  page: AvlPageEdge,
+  binding: AvlBindingEdge
+};
+function bandToZoomLevel(band) {
+  switch (band) {
+    case "system":
+      return "application";
+    case "module":
+      return "orbital";
+    case "behavior":
+      return "trait";
+    case "detail":
+      return "transition";
+  }
+}
+function FlowCanvasInner({
+  schema: schemaProp,
+  className,
+  color = "var(--color-primary)",
+  width = "100%",
+  height = 500,
+  onZoomChange,
+  focusTarget,
+  initialOrbital
+}) {
+  const parsedSchema = useMemo(() => {
+    if (typeof schemaProp === "string") return JSON.parse(schemaProp);
+    return schemaProp;
+  }, [schemaProp]);
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => schemaToFlowGraph(parsedSchema),
+    [parsedSchema]
+  );
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
+  const [band, setBand] = useState("module");
+  const reactFlow = useReactFlow();
+  const handleViewportChange = useCallback((viewport) => {
+    const newBand = computeZoomBand(viewport.zoom);
+    setBand((prev) => {
+      if (prev !== newBand) {
+        onZoomChange?.(bandToZoomLevel(newBand), {});
+        return newBand;
+      }
+      return prev;
+    });
+  }, [onZoomChange]);
+  useEffect(() => {
+    if (!focusTarget) return;
+    const targetNode = nodes.find(
+      (n) => focusTarget.type === "orbital" && n.id === focusTarget.name
+    );
+    if (targetNode) {
+      reactFlow.fitView({ nodes: [targetNode], duration: 500, padding: 0.5 });
+    }
+  }, [focusTarget, nodes, reactFlow]);
+  useEffect(() => {
+    if (!initialOrbital) return;
+    const targetNode = nodes.find((n) => n.id === initialOrbital);
+    if (targetNode) {
+      requestAnimationFrame(() => {
+        reactFlow.fitView({ nodes: [targetNode], duration: 0, padding: 0.3 });
+      });
+    }
+  }, [initialOrbital]);
+  return /* @__PURE__ */ jsx(ZoomBandContext.Provider, { value: band, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `relative ${className ?? ""}`,
+      style: { width, height, "--avl-color": color },
+      children: [
+        /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes: NODE_TYPES,
+            edgeTypes: EDGE_TYPES,
+            onNodesChange,
+            onEdgesChange,
+            onViewportChange: handleViewportChange,
+            minZoom: 0.1,
+            maxZoom: 5,
+            fitView: true,
+            nodesDraggable: true,
+            elementsSelectable: true,
+            proOptions: { hideAttribution: true },
+            style: { background: "var(--color-background)" },
+            children: [
+              /* @__PURE__ */ jsx(
+                Controls,
+                {
+                  showInteractive: false,
+                  style: {
+                    background: "var(--color-card)",
+                    border: "1px solid var(--color-border)",
+                    borderRadius: "var(--radius-md)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Background,
+                {
+                  variant: BackgroundVariant.Dots,
+                  gap: 20,
+                  size: 1,
+                  color: "var(--color-border)"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ZoomBreadcrumb, { band }),
+        /* @__PURE__ */ jsx(ZoomLegend, { band })
+      ]
+    }
+  ) });
+}
+var FlowCanvas = (props) => {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowCanvasInner, { ...props }) });
+};
+FlowCanvas.displayName = "FlowCanvas";
+var AvlCosmicZoom = (props) => {
+  return /* @__PURE__ */ jsx(
+    FlowCanvas,
+    {
+      schema: props.schema,
+      className: props.className,
+      color: props.color,
+      animated: props.animated,
+      width: props.width,
+      height: props.height ?? 400,
+      onZoomChange: props.onZoomChange,
+      focusTarget: props.focusTarget,
+      initialOrbital: props.initialOrbital,
+      initialTrait: props.initialTrait,
+      stateCoverage: props.stateCoverage
+    }
+  );
+};
+AvlCosmicZoom.displayName = "AvlCosmicZoom";
+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(() => {
-    computeLayout(data).then(setLayout).catch(console.error);
+    computeTraitLayout(data).then(setLayout).catch(console.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..." }) });
@@ -6501,7 +6773,7 @@ var AvlTraitScene = ({
   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 availW = CENTER_W2 - padding * 2;
   const availH = 300;
   const scale = Math.min(1, availW / layout.width, availH / layout.height);
   const scaledW = layout.width * scale;
@@ -6510,8 +6782,8 @@ var AvlTraitScene = ({
   const offsetY = 50 + (availH - scaledH) / 2;
   const machineHeight = scaledH + 100;
   const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("text", { x: CENTER_W / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
-    /* @__PURE__ */ jsxs("text", { x: CENTER_W / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
+    /* @__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
     ] }),
@@ -6549,7 +6821,7 @@ var AvlTraitScene = ({
               isSelfLoop: edge.isSelf,
               color,
               onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
-                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER : machineOffsetX),
+                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
                 y: edge.labelY + offsetY
               }) : void 0
             }
@@ -6581,7 +6853,7 @@ var AvlTraitScene = ({
     {
       listenedEvents: data.listenedEvents,
       emittedEvents: data.emittedEvents,
-      centerWidth: CENTER_W,
+      centerWidth: CENTER_W2,
       height: machineHeight,
       color,
       children: renderMachine
@@ -6589,9 +6861,9 @@ var AvlTraitScene = ({
   );
 };
 AvlTraitScene.displayName = "AvlTraitScene";
-var CX2 = 300;
+var CX = 300;
 var CARD_W = 440;
-var CARD_X = CX2 - CARD_W / 2;
+var CARD_X = CX - CARD_W / 2;
 var SECTION_LEFT = CARD_X + 16;
 var CONTENT_LEFT = CARD_X + 24;
 function flattenEffect(node) {
@@ -6708,7 +6980,7 @@ var AvlTransitionScene = ({
     /* @__PURE__ */ jsx(
       "text",
       {
-        x: CX2,
+        x: CX,
         y: cardY + 32,
         textAnchor: "middle",
         fill: color,
@@ -6826,397 +7098,68 @@ var AvlTransitionScene = ({
   ] });
 };
 AvlTransitionScene.displayName = "AvlTransitionScene";
-var APPLICATION_ITEMS = [
-  {
-    label: "Orbital",
-    render: (x, y, c) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 8, fill: "none", stroke: c, strokeWidth: 1.5 })
-  },
-  {
-    label: "Entity",
-    render: (x, y, c) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: c, opacity: 0.2 }),
-      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: "none", stroke: c, strokeWidth: 1.5 })
-    ] })
-  },
-  {
-    label: "Trait",
-    render: (x, y, c) => /* @__PURE__ */ jsx("ellipse", { cx: x, cy: y, rx: 10, ry: 5, fill: "none", stroke: c, strokeWidth: 1, strokeDasharray: "3 1.5" })
-  },
-  {
-    label: "Page",
-    render: (x, y, c) => /* @__PURE__ */ jsx("rect", { x: x - 3, y: y - 3, width: 6, height: 6, fill: c, opacity: 0.3, stroke: c, strokeWidth: 1 })
-  },
-  {
-    label: "Event flow",
-    render: (x, y, c) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("line", { x1: x - 10, y1: y, x2: x + 10, y2: y, stroke: c, strokeWidth: 1, strokeDasharray: "4 2" }),
-      /* @__PURE__ */ jsx("polygon", { points: `${x + 10},${y} ${x + 6},${y - 3} ${x + 6},${y + 3}`, fill: c, opacity: 0.5 })
-    ] })
-  }
-];
-var ORBITAL_ITEMS = [
-  {
-    label: "Orbital boundary",
-    render: (x, y, c) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 8, fill: "none", stroke: c, strokeWidth: 1.5 })
-  },
-  {
-    label: "Entity (nucleus)",
-    render: (x, y, c) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: c, opacity: 0.15 }),
-      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: "none", stroke: c, strokeWidth: 2 }),
-      /* @__PURE__ */ jsx("line", { x1: x, y1: y - 7, x2: x, y2: y - 9, stroke: c, strokeWidth: 0.8, opacity: 0.5 })
-    ] })
-  },
-  {
-    label: "Trait ring",
-    render: (x, y, c) => /* @__PURE__ */ jsx("ellipse", { cx: x, cy: y, rx: 10, ry: 5, fill: "none", stroke: c, strokeWidth: 1, strokeDasharray: "3 1.5" })
-  },
-  {
-    label: "Page",
-    render: (x, y, c) => /* @__PURE__ */ jsx("rect", { x: x - 3, y: y - 3, width: 6, height: 6, fill: c, opacity: 0.3, stroke: c, strokeWidth: 1 })
-  },
-  {
-    label: "External link",
-    render: (x, y, c) => /* @__PURE__ */ jsx("line", { x1: x - 8, y1: y, x2: x + 8, y2: y, stroke: c, strokeWidth: 1, strokeDasharray: "4 2", opacity: 0.4 })
-  }
-];
-var TRAIT_ITEMS = [
-  {
-    label: "State",
-    render: (x, y, c) => /* @__PURE__ */ jsx("rect", { x: x - 12, y: y - 6, width: 24, height: 12, rx: 6, fill: "none", stroke: c, strokeWidth: 1.5 })
-  },
-  {
-    label: "Initial state",
-    render: (x, y, c) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("circle", { cx: x - 10, cy: y, r: 3, fill: c }),
-      /* @__PURE__ */ jsx("rect", { x: x - 4, y: y - 6, width: 20, height: 12, rx: 6, fill: "none", stroke: c, strokeWidth: 1.5 })
-    ] })
-  },
-  {
-    label: "Transition",
-    render: (x, y, c) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("line", { x1: x - 10, y1: y, x2: x + 8, y2: y, stroke: c, strokeWidth: 1.2, opacity: 0.5 }),
-      /* @__PURE__ */ jsx("polygon", { points: `${x + 10},${y} ${x + 6},${y - 3} ${x + 6},${y + 3}`, fill: c, opacity: 0.5 })
-    ] })
-  },
-  {
-    label: "Event + effects",
-    render: (x, y, c) => /* @__PURE__ */ jsx("rect", { x: x - 14, y: y - 7, width: 28, height: 14, rx: 3, fill: "var(--color-surface, white)", stroke: c, strokeWidth: 0.8 })
-  },
-  {
-    label: "Emit (external)",
-    render: (x, y, c) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 3, fill: c, opacity: 0.5, children: /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "2;4;2", dur: "1.5s", repeatCount: "indefinite" }) })
-  }
-];
-var TRANSITION_ITEMS = [
-  {
-    label: "State",
-    render: (x, y, c) => /* @__PURE__ */ jsx("rect", { x: x - 12, y: y - 6, width: 24, height: 12, rx: 6, fill: "none", stroke: c, strokeWidth: 1.5 })
-  },
-  {
-    label: "Effect",
-    render: (x, y, c) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: c, opacity: 0.15 }),
-      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: "none", stroke: c, strokeWidth: 1 })
-    ] })
-  },
-  {
-    label: "Slot target",
-    render: (x, y, c) => /* @__PURE__ */ jsx("rect", { x: x - 10, y: y - 5, width: 20, height: 10, rx: 2, fill: c, opacity: 0.1, stroke: c, strokeWidth: 0.8 })
-  },
-  {
-    label: "Binding (@path)",
-    render: (x, y, c) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: "none", stroke: c, strokeWidth: 1, strokeDasharray: "2 1.5", opacity: 0.6 })
-  }
-];
-var ITEMS_BY_LEVEL = {
-  application: APPLICATION_ITEMS,
-  orbital: ORBITAL_ITEMS,
-  trait: TRAIT_ITEMS,
-  transition: TRANSITION_ITEMS
-};
-var AvlLegend = ({
-  level,
-  color = "var(--color-primary)",
-  x = 10,
-  y = 360
+var AvlClickTarget = ({
+  x,
+  y,
+  width,
+  height,
+  onClick,
+  onHover,
+  cursor = "pointer",
+  glowColor = "var(--color-primary)",
+  label,
+  children
 }) => {
-  const items = ITEMS_BY_LEVEL[level];
-  const itemSpacing = 16;
-  const legendH = items.length * itemSpacing + 16;
-  return /* @__PURE__ */ jsxs("g", { opacity: 0.6, 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: y - legendH + 10,
-        width: 130,
-        height: legendH,
-        rx: 6,
-        fill: "var(--color-surface, white)",
-        stroke: color,
-        strokeWidth: 0.5,
-        opacity: 0.8
+        y,
+        width,
+        height,
+        fill: "transparent",
+        style: { cursor },
+        pointerEvents: "all",
+        onClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": label
       }
-    ),
-    items.map((item, i) => {
-      const iy = y - legendH + 22 + i * itemSpacing;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        item.render(x + 18, iy, color),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: x + 35,
-            y: iy + 4,
-            fill: color,
-            fontSize: 8,
-            opacity: 0.8,
-            children: item.label
-          }
-        )
-      ] }, item.label);
-    })
+    )
   ] });
 };
-AvlLegend.displayName = "AvlLegend";
-var VIEWBOX_W = 600;
-var VIEWBOX_H2 = 400;
-var ANIMATION_DURATION = 600;
-var AvlCosmicZoom = ({
-  schema: schemaProp,
-  className,
-  color = "var(--color-primary)",
-  animated = true,
-  initialOrbital,
-  initialTrait,
-  onZoomChange,
-  width = "100%",
-  height = 400,
-  stateCoverage
-}) => {
-  const schema = useMemo(() => {
-    if (typeof schemaProp === "string") {
-      try {
-        return JSON.parse(schemaProp);
-      } catch {
-        return { name: "Error", orbitals: [] };
-      }
-    }
-    return schemaProp;
-  }, [schemaProp]);
-  const [state, dispatch] = useReducer(zoomReducer, initialZoomState);
-  const sceneRef = useRef(null);
-  const [transitionStyle, setTransitionStyle] = useState({});
-  useEffect(() => {
-    if (initialOrbital) {
-      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
-      setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
-      if (initialTrait) {
-        setTimeout(() => {
-          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
-          setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
-        }, 10);
-      }
-    }
-  }, [initialOrbital, initialTrait]);
-  useEffect(() => {
-    onZoomChange?.(state.level, {
-      orbital: state.selectedOrbital ?? void 0,
-      trait: state.selectedTrait ?? void 0
-    });
-  }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
-  useEffect(() => {
-    if (!state.animating || !animated) {
-      if (state.animating) {
-        dispatch({ type: "ANIMATION_COMPLETE" });
-      }
-      setTransitionStyle({});
-      return;
-    }
-    const target = state.animationTarget;
-    if (!target) return;
-    if (state.animationDirection === "in") {
-      setTransitionStyle({
-        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H2 / 2)}px)`,
-        transformOrigin: `${target.x}px ${target.y}px`,
-        transition: `transform ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${ANIMATION_DURATION}ms ease`,
-        opacity: 0.3
-      });
-    } else {
-      setTransitionStyle({
-        transform: `scale(${target.scale})`,
-        transformOrigin: "center center",
-        transition: `transform ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${ANIMATION_DURATION}ms ease`,
-        opacity: 0.3
-      });
-    }
-    const timer = setTimeout(() => {
-      dispatch({ type: "ANIMATION_COMPLETE" });
-      setTransitionStyle({});
-    }, ANIMATION_DURATION);
-    return () => clearTimeout(timer);
-  }, [state.animating, state.animationDirection, state.animationTarget, animated]);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Escape") {
-      dispatch({ type: "ZOOM_OUT" });
-    }
-  }, []);
-  const handleOrbitalClick = useCallback((name, pos) => {
-    dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: pos });
-  }, []);
-  const handleTraitClick = useCallback((name, pos) => {
-    dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: pos });
-  }, []);
-  const handleTraitSwitch = useCallback((name) => {
-    dispatch({ type: "SWITCH_TRAIT", trait: name });
-  }, []);
-  const [highlightedTrait, setHighlightedTrait] = React8.useState(null);
-  const handleTransitionClick = useCallback((index, pos) => {
-    dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: pos });
-  }, []);
-  const handleBreadcrumbClick = useCallback((targetLevel) => {
-    const levelOrder = ["application", "orbital", "trait", "transition"];
-    const currentIdx = levelOrder.indexOf(state.level);
-    const targetIdx = levelOrder.indexOf(targetLevel);
-    if (targetIdx < currentIdx) {
-      dispatch({ type: "ZOOM_OUT" });
-    }
-  }, [state.level]);
-  const sceneContent = useMemo(() => {
-    switch (state.level) {
-      case "application": {
-        const data = parseApplicationLevel(schema);
-        return /* @__PURE__ */ jsx(
-          AvlApplicationScene,
-          {
-            data,
-            color,
-            onOrbitalClick: handleOrbitalClick
-          }
-        );
-      }
-      case "orbital": {
-        if (!state.selectedOrbital) return null;
-        const data = parseOrbitalLevel(schema, state.selectedOrbital);
-        if (!data) return null;
-        return /* @__PURE__ */ jsx(
-          AvlOrbitalScene,
-          {
-            data,
-            color,
-            highlightedTrait,
-            onTraitClick: handleTraitClick,
-            onTraitHighlight: setHighlightedTrait
-          }
-        );
-      }
-      case "trait": {
-        if (!state.selectedOrbital || !state.selectedTrait) return null;
-        const data = parseTraitLevel(schema, state.selectedOrbital, state.selectedTrait);
-        if (!data) return null;
-        return /* @__PURE__ */ jsx(
-          AvlTraitScene,
-          {
-            data,
-            color,
-            onTransitionClick: handleTransitionClick
-          }
-        );
-      }
-      case "transition": {
-        if (!state.selectedOrbital || !state.selectedTrait || state.selectedTransition === null) return null;
-        const data = parseTransitionLevel(schema, state.selectedOrbital, state.selectedTrait, state.selectedTransition);
-        if (!data) return null;
-        return /* @__PURE__ */ jsx(
-          AvlTransitionScene,
-          {
-            data,
-            color
-          }
-        );
-      }
-      default:
-        return null;
-    }
-  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick, highlightedTrait, setHighlightedTrait]);
-  const breadcrumbs = getBreadcrumbs(state);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: `relative ${className ?? ""}`,
-      style: { width, height: typeof height === "number" ? `${height}px` : height },
-      onKeyDown: handleKeyDown,
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          HStack,
-          {
-            gap: "xs",
-            align: "center",
-            className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
-              i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
-              i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
-                Box,
-                {
-                  as: "span",
-                  className: "cursor-pointer hover:underline",
-                  onClick: () => handleBreadcrumbClick(crumb.level),
-                  children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: crumb.label })
-                }
-              ) : /* @__PURE__ */ jsx(Typography, { variant: "small", color: "primary", className: "font-bold", children: crumb.label })
-            ] }, crumb.level))
-          }
-        ),
-        state.level === "trait" && state.selectedOrbital && (() => {
-          const orbData = parseOrbitalLevel(schema, state.selectedOrbital);
-          if (!orbData || orbData.traits.length <= 1) return null;
-          return /* @__PURE__ */ jsx(
-            HStack,
-            {
-              gap: "xs",
-              align: "center",
-              className: "absolute top-2 right-2 z-10 bg-surface/80 backdrop-blur rounded-md px-1.5 py-1",
-              children: orbData.traits.map((t) => /* @__PURE__ */ jsx(
-                Box,
-                {
-                  as: "button",
-                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-surface"}`,
-                  onClick: () => handleTraitSwitch(t.name),
-                  children: t.name
-                },
-                t.name
-              ))
-            }
-          );
-        })(),
-        state.level !== "application" && /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "small",
-            color: "muted",
-            className: "absolute bottom-2 right-2 z-10 bg-surface/60 backdrop-blur rounded px-2 py-1",
-            children: "Press Esc to zoom out"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H2}`,
-            xmlns: "http://www.w3.org/2000/svg",
-            className: "w-full h-full",
-            role: "img",
-            "aria-label": `${schema.name} orbital visualization - ${state.level} level`,
-            children: [
-              /* @__PURE__ */ jsx("g", { ref: sceneRef, style: transitionStyle, children: sceneContent }),
-              /* @__PURE__ */ jsx(AvlLegend, { level: state.level, color })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-AvlCosmicZoom.displayName = "AvlCosmicZoom";
+AvlClickTarget.displayName = "AvlClickTarget";
 
-export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlApplicationScene, AvlBehaviorGlyph, AvlBinding, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalScene, AvlOrbitalUnit, AvlPage, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionLane, AvlTransitionScene, CONNECTION_COLORS, DOMAIN_COLORS, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, STATE_COLORS, arcPath, curveControlPoint, getStateRole, gridPositions, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions };
+export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalNode, AvlOrbitalUnit, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, FlowCanvas, MiniStateMachine, ModuleCard, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions, schemaToFlowGraph, useZoomBand, zoomProgress };