@almadar/ui 2.49.0 → 2.50.0

package/dist/avl/index.cjs

@@ -19388,7 +19388,7 @@ var MapViewImpl = React125.lazy(async () => {
     shadowSize: [41, 41]
   });
   L.Marker.prototype.options.icon = defaultIcon;
-  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback123, useState: useState123 } = React125__namespace.default;
+  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback124, useState: useState124 } = React125__namespace.default;
   const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
   const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
   function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -19432,8 +19432,8 @@ var MapViewImpl = React125.lazy(async () => {
     showAttribution = true
   }) {
     const eventBus = useEventBus3();
-    const [clickedPosition, setClickedPosition] = useState123(null);
-    const handleMapClick = useCallback123((lat, lng) => {
+    const [clickedPosition, setClickedPosition] = useState124(null);
+    const handleMapClick = useCallback124((lat, lng) => {
       if (showClickedPin) {
         setClickedPosition({ lat, lng });
       }
@@ -19442,7 +19442,7 @@ var MapViewImpl = React125.lazy(async () => {
         eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
       }
     }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-    const handleMarkerClick = useCallback123((marker) => {
+    const handleMarkerClick = useCallback124((marker) => {
       onMarkerClick?.(marker);
       if (markerClickEvent) {
         eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -49040,6 +49040,319 @@ var AvlCosmicZoom = (props) => {
   );
 };
 AvlCosmicZoom.displayName = "AvlCosmicZoom";
+
+// components/organisms/avl/AvlOrbitalsCosmicZoom.tsx
+init_avl_schema_parser();
+init_Box();
+init_Typography();
+var UNIT_DISPLAY_W = 240;
+var UNIT_DISPLAY_H = 160;
+function layoutOrbitals(count, containerW, containerH) {
+  if (count === 0) return [];
+  if (count === 1) return [{ cx: containerW / 2, cy: containerH / 2 }];
+  const cols = Math.min(count, Math.ceil(Math.sqrt(count)));
+  const rows = Math.ceil(count / cols);
+  const cellW = containerW / (cols + 0.3);
+  const cellH = containerH / (rows + 0.3);
+  const originX = (containerW - cols * cellW) / 2 + cellW / 2;
+  const originY = (containerH - rows * cellH) / 2 + cellH / 2;
+  return Array.from({ length: count }, (_, i) => ({
+    cx: originX + i % cols * cellW,
+    cy: originY + Math.floor(i / cols) * cellH
+  }));
+}
+var avlOczWireId = 0;
+var EventWireOverlay = ({
+  orbitalViews,
+  crossLinks,
+  color,
+  animated,
+  containerW,
+  containerH
+}) => {
+  const ids = React125__namespace.default.useMemo(() => {
+    avlOczWireId += 1;
+    return { arrow: `avl-ocz-wire-${avlOczWireId}-arrow` };
+  }, []);
+  const posMap = React125.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const ov of orbitalViews) m.set(ov.name, { cx: ov.cx, cy: ov.cy });
+    return m;
+  }, [orbitalViews]);
+  const wiresByPair = React125.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const link of crossLinks) {
+      const key = `${link.emitterOrbital}__${link.listenerOrbital}`;
+      const arr = map.get(key) ?? [];
+      arr.push(link);
+      map.set(key, arr);
+    }
+    return map;
+  }, [crossLinks]);
+  const orbitalR = UNIT_DISPLAY_W * 0.38;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      viewBox: `0 0 ${containerW} ${containerH}`,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "marker",
+          {
+            id: ids.arrow,
+            markerWidth: "8",
+            markerHeight: "6",
+            refX: "7",
+            refY: "3",
+            orient: "auto",
+            markerUnits: "strokeWidth",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+          }
+        ) }),
+        animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes avl-ocz-flow {
+            from { stroke-dashoffset: 20; }
+            to { stroke-dashoffset: 0; }
+          }
+        ` }),
+        Array.from(wiresByPair.entries()).map(
+          ([pairKey, links]) => links.map((link, wireIdx) => {
+            const fromPos = posMap.get(link.emitterOrbital);
+            const toPos = posMap.get(link.listenerOrbital);
+            if (!fromPos || !toPos) return null;
+            const dx = toPos.cx - fromPos.cx;
+            const dy = toPos.cy - fromPos.cy;
+            const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+            const nx = dx / dist;
+            const ny = dy / dist;
+            const x1 = fromPos.cx + nx * orbitalR;
+            const y1 = fromPos.cy + ny * orbitalR;
+            const x2 = toPos.cx - nx * (orbitalR + 6);
+            const y2 = toPos.cy - ny * (orbitalR + 6);
+            const offset = 25 + wireIdx * 18;
+            const { cpx, cpy } = curveControlPoint(x1, y1, x2, y2, offset);
+            const pathD = `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}`;
+            const t = 0.5;
+            const lx = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * cpx + t * t * x2;
+            const ly = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * cpy + t * t * y2;
+            const labelW = link.eventName.length * 5.5 + 12;
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: pathD,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: 1.2,
+                  strokeDasharray: animated ? "6 4" : "4 3",
+                  markerEnd: `url(#${ids.arrow})`,
+                  opacity: 0.5,
+                  style: animated ? { animation: "avl-ocz-flow 1.5s linear infinite" } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: lx - labelW / 2,
+                  y: ly - 8,
+                  width: labelW,
+                  height: 14,
+                  rx: 3,
+                  fill: "var(--color-background, #fff)",
+                  stroke: color,
+                  strokeWidth: 0.5,
+                  opacity: 0.9
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  x: lx,
+                  y: ly + 3,
+                  textAnchor: "middle",
+                  fill: color,
+                  fontSize: 7,
+                  fontWeight: 600,
+                  fontFamily: "monospace",
+                  opacity: 0.8,
+                  children: link.eventName
+                }
+              )
+            ] }, `${pairKey}-${wireIdx}`);
+          })
+        )
+      ]
+    }
+  );
+};
+var InfoPanel = ({ view, crossLinks, color }) => {
+  const emitsOut = crossLinks.filter((l) => l.emitterOrbital === view.name);
+  const listensIn = crossLinks.filter((l) => l.listenerOrbital === view.name);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      position: "absolute",
+      rounded: "lg",
+      paddingX: "md",
+      paddingY: "sm",
+      bg: "overlay",
+      style: {
+        left: view.cx - 120,
+        top: view.cy + UNIT_DISPLAY_H / 2 + 4,
+        width: 240,
+        border: `1px solid ${color}`,
+        zIndex: 20,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { weight: "semibold", style: { marginBottom: 4, color }, children: view.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Entity: ",
+          view.entityName,
+          " (",
+          view.fieldCount,
+          " fields, ",
+          view.persistence,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Traits: ",
+          view.traits.map((t) => t.name).join(", ") || "none"
+        ] }),
+        view.pages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Pages: ",
+          view.pages.map((p2) => p2.name).join(", ")
+        ] }),
+        emitsOut.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Emits \u2192 ",
+          emitsOut.map((l) => `${l.eventName} \u2192 ${l.listenerOrbital}`).join(", ")
+        ] }),
+        listensIn.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Listens \u2190 ",
+          listensIn.map((l) => `${l.eventName} \u2190 ${l.emitterOrbital}`).join(", ")
+        ] })
+      ]
+    }
+  );
+};
+var AvlOrbitalsCosmicZoom = ({
+  schema: schemaProp,
+  className,
+  color = "var(--color-primary, #4A90D9)",
+  animated = true,
+  width = "100%",
+  height = 450
+}) => {
+  const parsedSchema = React125.useMemo(() => {
+    if (typeof schemaProp === "string") return JSON.parse(schemaProp);
+    return schemaProp;
+  }, [schemaProp]);
+  const { orbitals, crossLinks } = React125.useMemo(
+    () => parseApplicationLevel(parsedSchema),
+    [parsedSchema]
+  );
+  const containerW = typeof width === "number" ? width : 800;
+  const containerH = typeof height === "number" ? height : 450;
+  const positions = React125.useMemo(
+    () => layoutOrbitals(orbitals.length, containerW, containerH),
+    [orbitals.length, containerW, containerH]
+  );
+  const orbitalViews = React125.useMemo(
+    () => orbitals.map((o, i) => ({
+      name: o.name,
+      entityName: o.entityName,
+      fieldCount: o.fieldCount,
+      persistence: o.persistence || "persistent",
+      traits: o.traitNames.map((n) => ({ name: n })),
+      pages: o.pageNames.map((n) => ({ name: n })),
+      cx: positions[i]?.cx ?? 0,
+      cy: positions[i]?.cy ?? 0
+    })),
+    [orbitals, positions]
+  );
+  const [selected, setSelected] = React125.useState(null);
+  const handleSelect = React125.useCallback(
+    (name) => setSelected((prev) => prev === name ? null : name),
+    []
+  );
+  const selectedView = orbitalViews.find((o) => o.name === selected);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      className,
+      position: "relative",
+      overflow: "visible",
+      style: { width, height: containerH },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EventWireOverlay,
+          {
+            orbitalViews,
+            crossLinks,
+            color,
+            animated,
+            containerW,
+            containerH
+          }
+        ),
+        orbitalViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => handleSelect(view.name),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") handleSelect(view.name);
+            },
+            "aria-label": `Orbital: ${view.name}`,
+            position: "absolute",
+            style: {
+              left: view.cx - UNIT_DISPLAY_W / 2,
+              top: view.cy - UNIT_DISPLAY_H / 2,
+              width: UNIT_DISPLAY_W,
+              height: UNIT_DISPLAY_H,
+              cursor: "pointer",
+              transition: "transform 0.2s ease, filter 0.2s ease",
+              transform: selected === view.name ? "scale(1.05)" : "scale(1)",
+              filter: selected && selected !== view.name ? "opacity(0.5)" : "none",
+              zIndex: selected === view.name ? 10 : 1
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              AvlOrbitalUnit,
+              {
+                entityName: view.entityName,
+                fields: view.fieldCount,
+                persistence: view.persistence,
+                traits: view.traits,
+                pages: view.pages,
+                color,
+                animated: animated && selected === view.name
+              }
+            )
+          },
+          view.name
+        )),
+        selectedView && /* @__PURE__ */ jsxRuntime.jsx(
+          InfoPanel,
+          {
+            view: selectedView,
+            crossLinks,
+            color
+          }
+        )
+      ]
+    }
+  );
+};
+AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
 init_types();
 var SWIM_GUTTER2 = 120;
 var CENTER_W2 = 360;
@@ -49478,6 +49791,7 @@ exports.AvlOperator = AvlOperator;
 exports.AvlOrbital = AvlOrbital;
 exports.AvlOrbitalNode = AvlOrbitalNode;
 exports.AvlOrbitalUnit = AvlOrbitalUnit;
+exports.AvlOrbitalsCosmicZoom = AvlOrbitalsCosmicZoom;
 exports.AvlPage = AvlPage;
 exports.AvlPageEdge = AvlPageEdge;
 exports.AvlPersistence = AvlPersistence;

package/dist/avl/index.d.cts

@@ -1340,6 +1340,37 @@ interface AvlCosmicZoomProps {
 }
 declare const AvlCosmicZoom: React__default.FC<AvlCosmicZoomProps>;
 
+/**
+ * AvlOrbitalsCosmicZoom — Orbital Interaction Visualization
+ *
+ * Composed organism: renders AvlOrbitalUnit molecules positioned on a canvas,
+ * connected by cross-orbital event wire arrows. No React Flow dependency.
+ * Designed for documentation use.
+ *
+ * Composition:
+ *   - AvlOrbitalUnit (molecule) for each orbital
+ *   - SVG overlay for event wires between orbitals
+ *   - Click to select an orbital and show info panel
+ *
+ * @packageDocumentation
+ */
+
+interface AvlOrbitalsCosmicZoomProps {
+    /** The orbital schema (parsed object or JSON string) */
+    schema: OrbitalSchema | string;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Primary color for the visualization */
+    color?: string;
+    /** Enable animations (default: true) */
+    animated?: boolean;
+    /** Container width */
+    width?: number | string;
+    /** Container height */
+    height?: number | string;
+}
+declare const AvlOrbitalsCosmicZoom: React__default.FC<AvlOrbitalsCosmicZoomProps>;
+
 /**
  * AvlTraitScene V2 - Zoom Level 3
  *
@@ -1402,4 +1433,4 @@ interface AvlClickTargetProps {
 }
 declare const AvlClickTarget: React__default.FC<AvlClickTargetProps>;
 
-export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, type ApplicationLevelData, AvlApplication, type AvlApplicationProps, AvlBackwardEdge, type AvlBaseProps, AvlBehaviorGlyph, type AvlBehaviorGlyphProps, AvlBinding, AvlBindingEdge, type AvlBindingProps, AvlBindingRef, type AvlBindingRefProps, AvlClickTarget, type AvlClickTargetProps, AvlClosedCircuit, type AvlClosedCircuitProps, type AvlClosedCircuitState, type AvlClosedCircuitTransition, AvlCosmicZoom, type AvlCosmicZoomProps, type AvlEdgeData, AvlEffect, type AvlEffectProps, type AvlEffectType, AvlEmitListen, type AvlEmitListenProps, AvlEntity, type AvlEntityProps, AvlEvent, type AvlEventProps, AvlEventWireEdge, type AvlEventWireEdgeData, AvlExprTree, type AvlExprTreeNode, type AvlExprTreeProps, AvlField, type AvlFieldProps, AvlFieldType, type AvlFieldTypeKind, type AvlFieldTypeProps, AvlGuard, type AvlGuardProps, AvlLiteral, type AvlLiteralProps, type AvlNodeData, AvlOperator, type AvlOperatorNamespace, type AvlOperatorProps, AvlOrbital, AvlOrbitalNode, type AvlOrbitalProps, AvlOrbitalUnit, type AvlOrbitalUnitPage, type AvlOrbitalUnitProps, type AvlOrbitalUnitTrait, AvlPage, AvlPageEdge, type AvlPageProps, AvlPersistence, type AvlPersistenceKind, type AvlPersistenceProps, AvlSExpr, type AvlSExprProps, AvlSlotMap, type AvlSlotMapProps, type AvlSlotMapSlot, AvlState, AvlStateMachine, type AvlStateMachineProps, type AvlStateMachineState, type AvlStateMachineTransition, type AvlStateProps, AvlSwimLane, type AvlSwimLaneProps, AvlTrait, type AvlTraitProps, AvlTraitScene, type AvlTraitSceneProps, AvlTransition, AvlTransitionEdge, type AvlTransitionEdgeData, AvlTransitionLane, type AvlTransitionLaneProps, type AvlTransitionProps, AvlTransitionScene, type AvlTransitionSceneProps, type BehaviorCanvasEntry, BehaviorComposeNode, type BehaviorComposeNodeData, type BehaviorGlyphChild, type BehaviorGlyphConnection, type BehaviorLevel, type BehaviorRegistryRecord, BehaviorView, type BehaviorWireEdgeData, CONNECTION_COLORS, type ComposeViewLevel, type ConnectableEvent, type CrossLink, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, type EffectCategory, type ElkLayout, type EventEdgeData, EventFlowEdge, FlowCanvas, type FlowCanvasProps, type GlyphSize, type LayoutEdge, type LayoutNode, MiniStateMachine, ModuleCard, OrbInspector, type OrbInspectorProps, OrbPreviewNode, type OrbitalLevelData, type PatternEventSource, type PreviewNodeData, type RenderUIEntry, STATE_COLORS, type StateRole, SystemNode, type TraitLevelData, type TransitionLevelData, type ViewLevel, ZOOM_BAND_THRESHOLDS, type ZoomBand, ZoomBandContext, ZoomBreadcrumb, type ZoomBreadcrumbProps, ZoomLegend, type ZoomLegendProps, type ZoomLevel, arcPath, behaviorsToComposeGraph, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, registryEntryToCanvasEntry, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };
+export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, type ApplicationLevelData, AvlApplication, type AvlApplicationProps, AvlBackwardEdge, type AvlBaseProps, AvlBehaviorGlyph, type AvlBehaviorGlyphProps, AvlBinding, AvlBindingEdge, type AvlBindingProps, AvlBindingRef, type AvlBindingRefProps, AvlClickTarget, type AvlClickTargetProps, AvlClosedCircuit, type AvlClosedCircuitProps, type AvlClosedCircuitState, type AvlClosedCircuitTransition, AvlCosmicZoom, type AvlCosmicZoomProps, type AvlEdgeData, AvlEffect, type AvlEffectProps, type AvlEffectType, AvlEmitListen, type AvlEmitListenProps, AvlEntity, type AvlEntityProps, AvlEvent, type AvlEventProps, AvlEventWireEdge, type AvlEventWireEdgeData, AvlExprTree, type AvlExprTreeNode, type AvlExprTreeProps, AvlField, type AvlFieldProps, AvlFieldType, type AvlFieldTypeKind, type AvlFieldTypeProps, AvlGuard, type AvlGuardProps, AvlLiteral, type AvlLiteralProps, type AvlNodeData, AvlOperator, type AvlOperatorNamespace, type AvlOperatorProps, AvlOrbital, AvlOrbitalNode, type AvlOrbitalProps, AvlOrbitalUnit, type AvlOrbitalUnitPage, type AvlOrbitalUnitProps, type AvlOrbitalUnitTrait, AvlOrbitalsCosmicZoom, type AvlOrbitalsCosmicZoomProps, AvlPage, AvlPageEdge, type AvlPageProps, AvlPersistence, type AvlPersistenceKind, type AvlPersistenceProps, AvlSExpr, type AvlSExprProps, AvlSlotMap, type AvlSlotMapProps, type AvlSlotMapSlot, AvlState, AvlStateMachine, type AvlStateMachineProps, type AvlStateMachineState, type AvlStateMachineTransition, type AvlStateProps, AvlSwimLane, type AvlSwimLaneProps, AvlTrait, type AvlTraitProps, AvlTraitScene, type AvlTraitSceneProps, AvlTransition, AvlTransitionEdge, type AvlTransitionEdgeData, AvlTransitionLane, type AvlTransitionLaneProps, type AvlTransitionProps, AvlTransitionScene, type AvlTransitionSceneProps, type BehaviorCanvasEntry, BehaviorComposeNode, type BehaviorComposeNodeData, type BehaviorGlyphChild, type BehaviorGlyphConnection, type BehaviorLevel, type BehaviorRegistryRecord, BehaviorView, type BehaviorWireEdgeData, CONNECTION_COLORS, type ComposeViewLevel, type ConnectableEvent, type CrossLink, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, type EffectCategory, type ElkLayout, type EventEdgeData, EventFlowEdge, FlowCanvas, type FlowCanvasProps, type GlyphSize, type LayoutEdge, type LayoutNode, MiniStateMachine, ModuleCard, OrbInspector, type OrbInspectorProps, OrbPreviewNode, type OrbitalLevelData, type PatternEventSource, type PreviewNodeData, type RenderUIEntry, STATE_COLORS, type StateRole, SystemNode, type TraitLevelData, type TransitionLevelData, type ViewLevel, ZOOM_BAND_THRESHOLDS, type ZoomBand, ZoomBandContext, ZoomBreadcrumb, type ZoomBreadcrumbProps, ZoomLegend, type ZoomLegendProps, type ZoomLevel, arcPath, behaviorsToComposeGraph, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, registryEntryToCanvasEntry, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };

package/dist/avl/index.d.ts

@@ -59,4 +59,4 @@ export { type ComposeViewLevel, type BehaviorComposeNodeData, type BehaviorWireE
 export { BehaviorComposeNode } from '../components/molecules/avl/BehaviorComposeNode';
 export { behaviorsToComposeGraph, registryEntryToCanvasEntry, type BehaviorRegistryRecord } from '../components/molecules/avl/avl-behavior-compose-converter';
 export { OrbInspector, type OrbInspectorProps } from '../components/organisms/avl/OrbInspector';
-export { FlowCanvas, type FlowCanvasProps, ZoomBreadcrumb, type ZoomBreadcrumbProps, ZoomLegend, type ZoomLegendProps, AvlCosmicZoom, type AvlCosmicZoomProps, AvlTraitScene, type AvlTraitSceneProps, AvlTransitionScene, type AvlTransitionSceneProps, AvlClickTarget, type AvlClickTargetProps, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, type ApplicationLevelData, type OrbitalLevelData, type TraitLevelData, type TransitionLevelData, type CrossLink, type ZoomLevel, } from '../components/organisms/avl';
+export { FlowCanvas, type FlowCanvasProps, ZoomBreadcrumb, type ZoomBreadcrumbProps, ZoomLegend, type ZoomLegendProps, AvlCosmicZoom, type AvlCosmicZoomProps, AvlOrbitalsCosmicZoom, type AvlOrbitalsCosmicZoomProps, AvlTraitScene, type AvlTraitSceneProps, AvlTransitionScene, type AvlTransitionSceneProps, AvlClickTarget, type AvlClickTargetProps, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, type ApplicationLevelData, type OrbitalLevelData, type TraitLevelData, type TransitionLevelData, type CrossLink, type ZoomLevel, } from '../components/organisms/avl';

package/dist/avl/index.js

@@ -19342,7 +19342,7 @@ var MapViewImpl = lazy(async () => {
     shadowSize: [41, 41]
   });
   L.Marker.prototype.options.icon = defaultIcon;
-  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback123, useState: useState123 } = React125__default;
+  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback124, useState: useState124 } = React125__default;
   const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
   const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
   function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -19386,8 +19386,8 @@ var MapViewImpl = lazy(async () => {
     showAttribution = true
   }) {
     const eventBus = useEventBus3();
-    const [clickedPosition, setClickedPosition] = useState123(null);
-    const handleMapClick = useCallback123((lat, lng) => {
+    const [clickedPosition, setClickedPosition] = useState124(null);
+    const handleMapClick = useCallback124((lat, lng) => {
       if (showClickedPin) {
         setClickedPosition({ lat, lng });
       }
@@ -19396,7 +19396,7 @@ var MapViewImpl = lazy(async () => {
         eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
       }
     }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-    const handleMarkerClick = useCallback123((marker) => {
+    const handleMarkerClick = useCallback124((marker) => {
       onMarkerClick?.(marker);
       if (markerClickEvent) {
         eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -48994,6 +48994,319 @@ var AvlCosmicZoom = (props) => {
   );
 };
 AvlCosmicZoom.displayName = "AvlCosmicZoom";
+
+// components/organisms/avl/AvlOrbitalsCosmicZoom.tsx
+init_avl_schema_parser();
+init_Box();
+init_Typography();
+var UNIT_DISPLAY_W = 240;
+var UNIT_DISPLAY_H = 160;
+function layoutOrbitals(count, containerW, containerH) {
+  if (count === 0) return [];
+  if (count === 1) return [{ cx: containerW / 2, cy: containerH / 2 }];
+  const cols = Math.min(count, Math.ceil(Math.sqrt(count)));
+  const rows = Math.ceil(count / cols);
+  const cellW = containerW / (cols + 0.3);
+  const cellH = containerH / (rows + 0.3);
+  const originX = (containerW - cols * cellW) / 2 + cellW / 2;
+  const originY = (containerH - rows * cellH) / 2 + cellH / 2;
+  return Array.from({ length: count }, (_, i) => ({
+    cx: originX + i % cols * cellW,
+    cy: originY + Math.floor(i / cols) * cellH
+  }));
+}
+var avlOczWireId = 0;
+var EventWireOverlay = ({
+  orbitalViews,
+  crossLinks,
+  color,
+  animated,
+  containerW,
+  containerH
+}) => {
+  const ids = React125__default.useMemo(() => {
+    avlOczWireId += 1;
+    return { arrow: `avl-ocz-wire-${avlOczWireId}-arrow` };
+  }, []);
+  const posMap = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const ov of orbitalViews) m.set(ov.name, { cx: ov.cx, cy: ov.cy });
+    return m;
+  }, [orbitalViews]);
+  const wiresByPair = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const link of crossLinks) {
+      const key = `${link.emitterOrbital}__${link.listenerOrbital}`;
+      const arr = map.get(key) ?? [];
+      arr.push(link);
+      map.set(key, arr);
+    }
+    return map;
+  }, [crossLinks]);
+  const orbitalR = UNIT_DISPLAY_W * 0.38;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      viewBox: `0 0 ${containerW} ${containerH}`,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: ids.arrow,
+            markerWidth: "8",
+            markerHeight: "6",
+            refX: "7",
+            refY: "3",
+            orient: "auto",
+            markerUnits: "strokeWidth",
+            children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+          }
+        ) }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-ocz-flow {
+            from { stroke-dashoffset: 20; }
+            to { stroke-dashoffset: 0; }
+          }
+        ` }),
+        Array.from(wiresByPair.entries()).map(
+          ([pairKey, links]) => links.map((link, wireIdx) => {
+            const fromPos = posMap.get(link.emitterOrbital);
+            const toPos = posMap.get(link.listenerOrbital);
+            if (!fromPos || !toPos) return null;
+            const dx = toPos.cx - fromPos.cx;
+            const dy = toPos.cy - fromPos.cy;
+            const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+            const nx = dx / dist;
+            const ny = dy / dist;
+            const x1 = fromPos.cx + nx * orbitalR;
+            const y1 = fromPos.cy + ny * orbitalR;
+            const x2 = toPos.cx - nx * (orbitalR + 6);
+            const y2 = toPos.cy - ny * (orbitalR + 6);
+            const offset = 25 + wireIdx * 18;
+            const { cpx, cpy } = curveControlPoint(x1, y1, x2, y2, offset);
+            const pathD = `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}`;
+            const t = 0.5;
+            const lx = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * cpx + t * t * x2;
+            const ly = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * cpy + t * t * y2;
+            const labelW = link.eventName.length * 5.5 + 12;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: pathD,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: 1.2,
+                  strokeDasharray: animated ? "6 4" : "4 3",
+                  markerEnd: `url(#${ids.arrow})`,
+                  opacity: 0.5,
+                  style: animated ? { animation: "avl-ocz-flow 1.5s linear infinite" } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: lx - labelW / 2,
+                  y: ly - 8,
+                  width: labelW,
+                  height: 14,
+                  rx: 3,
+                  fill: "var(--color-background, #fff)",
+                  stroke: color,
+                  strokeWidth: 0.5,
+                  opacity: 0.9
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: lx,
+                  y: ly + 3,
+                  textAnchor: "middle",
+                  fill: color,
+                  fontSize: 7,
+                  fontWeight: 600,
+                  fontFamily: "monospace",
+                  opacity: 0.8,
+                  children: link.eventName
+                }
+              )
+            ] }, `${pairKey}-${wireIdx}`);
+          })
+        )
+      ]
+    }
+  );
+};
+var InfoPanel = ({ view, crossLinks, color }) => {
+  const emitsOut = crossLinks.filter((l) => l.emitterOrbital === view.name);
+  const listensIn = crossLinks.filter((l) => l.listenerOrbital === view.name);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      position: "absolute",
+      rounded: "lg",
+      paddingX: "md",
+      paddingY: "sm",
+      bg: "overlay",
+      style: {
+        left: view.cx - 120,
+        top: view.cy + UNIT_DISPLAY_H / 2 + 4,
+        width: 240,
+        border: `1px solid ${color}`,
+        zIndex: 20,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { weight: "semibold", style: { marginBottom: 4, color }, children: view.name }),
+        /* @__PURE__ */ jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Entity: ",
+          view.entityName,
+          " (",
+          view.fieldCount,
+          " fields, ",
+          view.persistence,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Traits: ",
+          view.traits.map((t) => t.name).join(", ") || "none"
+        ] }),
+        view.pages.length > 0 && /* @__PURE__ */ jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Pages: ",
+          view.pages.map((p2) => p2.name).join(", ")
+        ] }),
+        emitsOut.length > 0 && /* @__PURE__ */ jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Emits \u2192 ",
+          emitsOut.map((l) => `${l.eventName} \u2192 ${l.listenerOrbital}`).join(", ")
+        ] }),
+        listensIn.length > 0 && /* @__PURE__ */ jsxs(Text, { variant: "small", style: { opacity: 0.7, color }, children: [
+          "Listens \u2190 ",
+          listensIn.map((l) => `${l.eventName} \u2190 ${l.emitterOrbital}`).join(", ")
+        ] })
+      ]
+    }
+  );
+};
+var AvlOrbitalsCosmicZoom = ({
+  schema: schemaProp,
+  className,
+  color = "var(--color-primary, #4A90D9)",
+  animated = true,
+  width = "100%",
+  height = 450
+}) => {
+  const parsedSchema = useMemo(() => {
+    if (typeof schemaProp === "string") return JSON.parse(schemaProp);
+    return schemaProp;
+  }, [schemaProp]);
+  const { orbitals, crossLinks } = useMemo(
+    () => parseApplicationLevel(parsedSchema),
+    [parsedSchema]
+  );
+  const containerW = typeof width === "number" ? width : 800;
+  const containerH = typeof height === "number" ? height : 450;
+  const positions = useMemo(
+    () => layoutOrbitals(orbitals.length, containerW, containerH),
+    [orbitals.length, containerW, containerH]
+  );
+  const orbitalViews = useMemo(
+    () => orbitals.map((o, i) => ({
+      name: o.name,
+      entityName: o.entityName,
+      fieldCount: o.fieldCount,
+      persistence: o.persistence || "persistent",
+      traits: o.traitNames.map((n) => ({ name: n })),
+      pages: o.pageNames.map((n) => ({ name: n })),
+      cx: positions[i]?.cx ?? 0,
+      cy: positions[i]?.cy ?? 0
+    })),
+    [orbitals, positions]
+  );
+  const [selected, setSelected] = useState(null);
+  const handleSelect = useCallback(
+    (name) => setSelected((prev) => prev === name ? null : name),
+    []
+  );
+  const selectedView = orbitalViews.find((o) => o.name === selected);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      position: "relative",
+      overflow: "visible",
+      style: { width, height: containerH },
+      children: [
+        /* @__PURE__ */ jsx(
+          EventWireOverlay,
+          {
+            orbitalViews,
+            crossLinks,
+            color,
+            animated,
+            containerW,
+            containerH
+          }
+        ),
+        orbitalViews.map((view) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => handleSelect(view.name),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") handleSelect(view.name);
+            },
+            "aria-label": `Orbital: ${view.name}`,
+            position: "absolute",
+            style: {
+              left: view.cx - UNIT_DISPLAY_W / 2,
+              top: view.cy - UNIT_DISPLAY_H / 2,
+              width: UNIT_DISPLAY_W,
+              height: UNIT_DISPLAY_H,
+              cursor: "pointer",
+              transition: "transform 0.2s ease, filter 0.2s ease",
+              transform: selected === view.name ? "scale(1.05)" : "scale(1)",
+              filter: selected && selected !== view.name ? "opacity(0.5)" : "none",
+              zIndex: selected === view.name ? 10 : 1
+            },
+            children: /* @__PURE__ */ jsx(
+              AvlOrbitalUnit,
+              {
+                entityName: view.entityName,
+                fields: view.fieldCount,
+                persistence: view.persistence,
+                traits: view.traits,
+                pages: view.pages,
+                color,
+                animated: animated && selected === view.name
+              }
+            )
+          },
+          view.name
+        )),
+        selectedView && /* @__PURE__ */ jsx(
+          InfoPanel,
+          {
+            view: selectedView,
+            crossLinks,
+            color
+          }
+        )
+      ]
+    }
+  );
+};
+AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
 init_types();
 var SWIM_GUTTER2 = 120;
 var CENTER_W2 = 360;
@@ -49409,4 +49722,4 @@ AvlClickTarget.displayName = "AvlClickTarget";
 init_avl_schema_parser();
 init_avl_zoom_state();
 
-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, BehaviorComposeNode, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, EventFlowEdge, FlowCanvas, MiniStateMachine, ModuleCard, OrbInspector, OrbPreviewNode, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, behaviorsToComposeGraph, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, registryEntryToCanvasEntry, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };
+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, AvlOrbitalsCosmicZoom, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, BehaviorComposeNode, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, EventFlowEdge, FlowCanvas, MiniStateMachine, ModuleCard, OrbInspector, OrbPreviewNode, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, behaviorsToComposeGraph, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, registryEntryToCanvasEntry, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };

package/dist/components/organisms/avl/AvlOrbitalsCosmicZoom.d.ts

@@ -0,0 +1,31 @@
+/**
+ * AvlOrbitalsCosmicZoom — Orbital Interaction Visualization
+ *
+ * Composed organism: renders AvlOrbitalUnit molecules positioned on a canvas,
+ * connected by cross-orbital event wire arrows. No React Flow dependency.
+ * Designed for documentation use.
+ *
+ * Composition:
+ *   - AvlOrbitalUnit (molecule) for each orbital
+ *   - SVG overlay for event wires between orbitals
+ *   - Click to select an orbital and show info panel
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+import type { OrbitalSchema } from '@almadar/core';
+export interface AvlOrbitalsCosmicZoomProps {
+    /** The orbital schema (parsed object or JSON string) */
+    schema: OrbitalSchema | string;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Primary color for the visualization */
+    color?: string;
+    /** Enable animations (default: true) */
+    animated?: boolean;
+    /** Container width */
+    width?: number | string;
+    /** Container height */
+    height?: number | string;
+}
+export declare const AvlOrbitalsCosmicZoom: React.FC<AvlOrbitalsCosmicZoomProps>;

package/dist/components/organisms/avl/index.d.ts

@@ -10,6 +10,7 @@ export { OrbInspector, type OrbInspectorProps } from './OrbInspector';
 export { ZoomBreadcrumb, type ZoomBreadcrumbProps } from './ZoomBreadcrumb';
 export { ZoomLegend, type ZoomLegendProps } from './ZoomLegend';
 export { AvlCosmicZoom, type AvlCosmicZoomProps } from './AvlCosmicZoom';
+export { AvlOrbitalsCosmicZoom, type AvlOrbitalsCosmicZoomProps } from './AvlOrbitalsCosmicZoom';
 export { AvlTraitScene, type AvlTraitSceneProps } from './AvlTraitScene';
 export { AvlTransitionScene, type AvlTransitionSceneProps } from './AvlTransitionScene';
 export { AvlClickTarget, type AvlClickTargetProps } from './AvlClickTarget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.49.0",
+  "version": "2.50.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",