@almadar/ui 2.52.0 → 2.54.0

package/dist/avl/index.js

@@ -22086,6 +22086,26 @@ var CodeBlock = React125__default.memo(
     const codeRef = useRef(null);
     const savedScrollLeftRef = useRef(0);
     const [copied, setCopied] = useState(false);
+    const [editableValue, setEditableValue] = useState(code);
+    const [editableTextareaKey, setEditableTextareaKey] = useState(0);
+    const lastPropCodeRef = useRef(code);
+    const editableTextareaRef = useRef(null);
+    const editableOverlayRef = useRef(null);
+    useEffect(() => {
+      if (code !== lastPropCodeRef.current) {
+        lastPropCodeRef.current = code;
+        setEditableValue(code);
+        setEditableTextareaKey((k) => k + 1);
+      }
+    }, [code]);
+    const handleEditableScroll = useCallback(() => {
+      const ta = editableTextareaRef.current;
+      const ov = editableOverlayRef.current;
+      if (ta && ov) {
+        ov.scrollTop = ta.scrollTop;
+        ov.scrollLeft = ta.scrollLeft;
+      }
+    }, []);
     const isFoldable = foldableProp ?? (language === "orb" || language === "json");
     const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
     const foldRegions = useMemo(
@@ -22246,33 +22266,106 @@ var CodeBlock = React125__default.memo(
         }
       ),
       editable ? (
-        /* GAP-51: editable mode — composes the Textarea atom. Plain text editing,
-           no Prism highlighting overlay (follow-up). The textarea is uncontrolled
-           on the value side: we pass `code` as the initial value and forward
-           every keystroke via onChange — the consumer is responsible for
-           debouncing and re-deriving `code` only after the user stops typing
-           so the cursor doesn't fight a re-render. */
-        /* @__PURE__ */ jsx(
-          Textarea,
+        /* GAP-77: editable mode = transparent Textarea on top + Prism-highlighted
+                     overlay underneath. The textarea is uncontrolled (defaultValue + key)
+                     to avoid cursor jumps; the overlay reads `editableValue` which is
+                     mirrored from the textarea via onChange. Both elements share IDENTICAL
+                     font / line-height / padding so the highlighted text aligns with the
+                     textarea's invisible glyphs.
+        
+                     Scroll sync: the overlay has `pointer-events: none` and the textarea
+                     scrolls; `handleEditableScroll` keeps the overlay's scroll matched. */
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            defaultValue: code,
-            onChange: (e) => onChange?.(e.target.value),
-            spellCheck: false,
             style: {
-              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
-              fontSize: "13px",
-              lineHeight: "1.5",
+              position: "relative",
               backgroundColor: "#1e1e1e",
-              color: "#e6e6e6",
               borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
-              border: "none",
-              padding: "1rem",
-              resize: "none",
               minHeight: "160px",
               maxHeight,
-              width: "100%",
-              outline: "none"
-            }
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: editableOverlayRef,
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "hidden",
+                    pointerEvents: "none",
+                    maxHeight
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    SyntaxHighlighter,
+                    {
+                      PreTag: "div",
+                      language,
+                      style: activeStyle,
+                      customStyle: {
+                        backgroundColor: "transparent",
+                        borderRadius: 0,
+                        padding: "1rem",
+                        margin: 0,
+                        whiteSpace: "pre",
+                        minWidth: "100%",
+                        minHeight: "160px",
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                        fontSize: "13px",
+                        lineHeight: "1.5"
+                      },
+                      codeTagProps: {
+                        style: {
+                          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                          fontSize: "13px",
+                          lineHeight: "1.5"
+                        }
+                      },
+                      children: editableValue || " "
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ref: editableTextareaRef,
+                  defaultValue: code,
+                  onChange: (e) => {
+                    setEditableValue(e.target.value);
+                    onChange?.(e.target.value);
+                  },
+                  onScroll: handleEditableScroll,
+                  spellCheck: false,
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                    fontSize: "13px",
+                    lineHeight: "1.5",
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: "#e6e6e6",
+                    borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+                    border: "none",
+                    padding: "1rem",
+                    resize: "none",
+                    minHeight: "160px",
+                    maxHeight,
+                    width: "100%",
+                    height: "100%",
+                    outline: "none",
+                    whiteSpace: "pre",
+                    overflowWrap: "normal",
+                    overflow: "auto"
+                  }
+                },
+                editableTextareaKey
+              )
+            ]
           }
         )
       ) : /* @__PURE__ */ jsx(
@@ -48403,7 +48496,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
                   onBlur: (e) => handlePropChange(propName, e.target.value)
                 }
               ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
-                displayValue || (ps.types?.join(" | ") ?? "string"),
+                displayValue || "\u2014",
                 ps.required ? " *" : ""
               ] })
             ] }, propName);
@@ -49094,545 +49187,103 @@ 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
+init_avl_zoom_state();
+init_types();
+var SWIM_GUTTER2 = 120;
+var CENTER_W2 = 360;
+var AvlTraitScene = ({
+  data,
+  color = "var(--color-primary)",
+  onTransitionClick
 }) => {
-  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,
-  highlightedOrbital,
-  onOrbitalSelect,
-  minZoom = 0.4,
-  maxZoom = 3
-}) => {
-  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);
-      onOrbitalSelect?.(name);
-    },
-    [onOrbitalSelect]
-  );
-  const selectedView = orbitalViews.find((o) => o.name === selected);
-  const [zoom, setZoom] = useState(1);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const dragStateRef = useRef(null);
-  const transformWrapperRef = useRef(null);
-  const clampZoom = useCallback(
-    (z) => Math.max(minZoom, Math.min(maxZoom, z)),
-    [minZoom, maxZoom]
-  );
-  const handlePointerDown = useCallback((e) => {
-    if (e.target.closest("[data-orbital-tile]")) return;
-    dragStateRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      panX: pan.x,
-      panY: pan.y
-    };
-    e.target.setPointerCapture(e.pointerId);
-  }, [pan]);
-  const handlePointerMove = useCallback((e) => {
-    const drag = dragStateRef.current;
-    if (!drag) return;
-    setPan({
-      x: drag.panX + (e.clientX - drag.startX),
-      y: drag.panY + (e.clientY - drag.startY)
-    });
-  }, []);
-  const handlePointerUp = useCallback((e) => {
-    if (!dragStateRef.current) return;
-    dragStateRef.current = null;
-    try {
-      e.target.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-  }, []);
-  const panRef = useRef(pan);
-  const zoomRef = useRef(zoom);
-  useEffect(() => {
-    panRef.current = pan;
-  }, [pan]);
-  useEffect(() => {
-    zoomRef.current = zoom;
-  }, [zoom]);
-  useEffect(() => {
-    const wrapper = transformWrapperRef.current;
-    if (!wrapper) return;
-    const wheelListener = (e) => {
-      e.preventDefault();
-      const rect = wrapper.getBoundingClientRect();
-      const cursorX = e.clientX - rect.left;
-      const cursorY = e.clientY - rect.top;
-      const currentZoom = zoomRef.current;
-      const currentPan = panRef.current;
-      const worldX = (cursorX - currentPan.x) / currentZoom;
-      const worldY = (cursorY - currentPan.y) / currentZoom;
-      const delta = e.deltaY > 0 ? -0.1 : 0.1;
-      const nextZoom = clampZoom(currentZoom * (1 + delta));
-      const nextPanX = cursorX - worldX * nextZoom;
-      const nextPanY = cursorY - worldY * nextZoom;
-      setZoom(nextZoom);
-      setPan({ x: nextPanX, y: nextPanY });
-    };
-    wrapper.addEventListener("wheel", wheelListener, { passive: false });
-    return () => wrapper.removeEventListener("wheel", wheelListener);
-  }, [clampZoom]);
-  const zoomIn = useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
-  const zoomOut = useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
-  const resetZoom = useCallback(() => {
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className,
-      position: "relative",
-      overflow: "visible",
-      style: { width, height: containerH },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: transformWrapperRef,
-            onPointerDown: handlePointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
-            onPointerCancel: handlePointerUp,
-            style: {
-              position: "absolute",
-              inset: 0,
-              overflow: "hidden",
-              cursor: dragStateRef.current ? "grabbing" : "grab",
-              touchAction: "none"
-            },
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  transformOrigin: "0 0"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    EventWireOverlay,
-                    {
-                      orbitalViews,
-                      crossLinks,
-                      color,
-                      animated,
-                      containerW,
-                      containerH
-                    }
-                  ),
-                  orbitalViews.map((view) => {
-                    const isHighlighted = view.name === highlightedOrbital;
-                    return /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        role: "button",
-                        tabIndex: 0,
-                        "data-orbital-tile": "true",
-                        onClick: () => handleSelect(view.name),
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter" || e.key === " ") handleSelect(view.name);
-                        },
-                        "aria-label": `Orbital: ${view.name}${isHighlighted ? " (highlighted)" : ""}`,
-                        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, box-shadow 0.3s ease",
-                          transform: selected === view.name ? "scale(1.05)" : "scale(1)",
-                          filter: selected && selected !== view.name ? "opacity(0.5)" : "none",
-                          // GAP-52: persistent highlight ring (independent from user selection)
-                          boxShadow: isHighlighted ? `0 0 0 3px ${color}, 0 0 24px 4px ${color}` : "none",
-                          borderRadius: isHighlighted ? "12px" : void 0,
-                          zIndex: isHighlighted ? 11 : 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 || isHighlighted)
-                          }
-                        )
-                      },
-                      view.name
-                    );
-                  }),
-                  selectedView && /* @__PURE__ */ jsx(
-                    InfoPanel,
-                    {
-                      view: selectedView,
-                      crossLinks,
-                      color
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            position: "absolute",
-            style: {
-              top: 12,
-              right: 12,
-              display: "flex",
-              flexDirection: "column",
-              gap: 4,
-              zIndex: 30
-            },
-            children: [
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" }) }),
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: "sm" }) }),
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: "sm" }) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
-init_types();
-var SWIM_GUTTER2 = 120;
-var CENTER_W2 = 360;
-var AvlTraitScene = ({
-  data,
-  color = "var(--color-primary)",
-  onTransitionClick
-}) => {
-  const [layout, setLayout] = useState(null);
-  const dataKey = useMemo(() => JSON.stringify(data), [data]);
-  useEffect(() => {
-    computeTraitLayout(data).then(setLayout).catch(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..." }) });
-  }
-  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
-  const machineOffsetX = hasExternal ? 0 : 30;
-  const padding = 20;
-  const availW = CENTER_W2 - padding * 2;
-  const availH = 300;
-  const scale = Math.min(1, availW / layout.width, availH / layout.height);
-  const scaledW = layout.width * scale;
-  const scaledH = layout.height * scale;
-  const offsetX = padding + (availW - scaledW) / 2;
-  const offsetY = 50 + (availH - scaledH) / 2;
-  const machineHeight = scaledH + 100;
-  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
-    /* @__PURE__ */ jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
-      "linked to ",
-      data.linkedEntity
-    ] }),
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
-      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
-    ] }),
-    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
-      layout.edges.map((edge) => {
-        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
-        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: edgePath(edge.points),
-              fill: "none",
-              stroke: conn.color,
-              strokeWidth: conn.width,
-              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
-              opacity: 0.5,
-              markerEnd: marker
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AvlTransitionLane,
-            {
-              x: edge.labelX,
-              y: edge.labelY,
-              event: edge.event,
-              guard: edge.guardExpr,
-              effects: edge.effects.map((e) => ({ type: e.type })),
-              width: edge.labelW,
-              isBackward: edge.isBackward,
-              isSelfLoop: edge.isSelf,
-              color,
-              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
-                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
-                y: edge.labelY + offsetY
-              }) : void 0
-            }
-          )
-        ] }, edge.id);
-      }),
-      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-        AvlState,
-        {
-          x: node.x,
-          y: node.y,
-          width: node.width,
-          height: node.height,
-          name: node.id,
-          isInitial: node.isInitial,
-          isTerminal: node.isTerminal,
-          role: node.role,
-          transitionCount: node.transitionCount,
-          color
-        }
-      ) }, node.id))
-    ] })
-  ] });
-  if (!hasExternal) {
-    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
-  }
-  return /* @__PURE__ */ jsx(
-    AvlSwimLane,
+  const [layout, setLayout] = useState(null);
+  const dataKey = useMemo(() => JSON.stringify(data), [data]);
+  useEffect(() => {
+    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..." }) });
+  }
+  const hasExternal = data.listenedEvents.length > 0 || data.emittedEvents.length > 0;
+  const machineOffsetX = hasExternal ? 0 : 30;
+  const padding = 20;
+  const availW = CENTER_W2 - padding * 2;
+  const availH = 300;
+  const scale = Math.min(1, availW / layout.width, availH / layout.height);
+  const scaledW = layout.width * scale;
+  const scaledH = layout.height * scale;
+  const offsetX = padding + (availW - scaledW) / 2;
+  const offsetY = 50 + (availH - scaledH) / 2;
+  const machineHeight = scaledH + 100;
+  const renderMachine = /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("text", { x: CENTER_W2 / 2, y: 20, textAnchor: "middle", fill: color, fontSize: 20, fontWeight: "700", fontFamily: "inherit", children: data.name }),
+    /* @__PURE__ */ jsxs("text", { x: CENTER_W2 / 2, y: 38, textAnchor: "middle", fill: color, fontSize: 11, opacity: 0.5, fontFamily: "inherit", children: [
+      "linked to ",
+      data.linkedEntity
+    ] }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowV2", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.forward.color, opacity: 0.7 }) }),
+      /* @__PURE__ */ jsx("marker", { id: "traitArrowBack", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: CONNECTION_COLORS.backward.color, opacity: 0.5 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX},${offsetY}) scale(${scale})`, children: [
+      layout.edges.map((edge) => {
+        const conn = edge.isSelf ? CONNECTION_COLORS.selfLoop : edge.isBackward ? CONNECTION_COLORS.backward : CONNECTION_COLORS.forward;
+        const marker = edge.isBackward || edge.isSelf ? "url(#traitArrowBack)" : "url(#traitArrowV2)";
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: edgePath(edge.points),
+              fill: "none",
+              stroke: conn.color,
+              strokeWidth: conn.width,
+              strokeDasharray: conn.dash === "none" ? void 0 : conn.dash,
+              opacity: 0.5,
+              markerEnd: marker
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AvlTransitionLane,
+            {
+              x: edge.labelX,
+              y: edge.labelY,
+              event: edge.event,
+              guard: edge.guardExpr,
+              effects: edge.effects.map((e) => ({ type: e.type })),
+              width: edge.labelW,
+              isBackward: edge.isBackward,
+              isSelfLoop: edge.isSelf,
+              color,
+              onTransitionClick: onTransitionClick ? () => onTransitionClick(edge.index, {
+                x: edge.labelX + offsetX + (hasExternal ? SWIM_GUTTER2 : machineOffsetX),
+                y: edge.labelY + offsetY
+              }) : void 0
+            }
+          )
+        ] }, edge.id);
+      }),
+      layout.nodes.map((node) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        AvlState,
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          name: node.id,
+          isInitial: node.isInitial,
+          isTerminal: node.isTerminal,
+          role: node.role,
+          transitionCount: node.transitionCount,
+          color
+        }
+      ) }, node.id))
+    ] })
+  ] });
+  if (!hasExternal) {
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${machineOffsetX}, 0)`, children: renderMachine });
+  }
+  return /* @__PURE__ */ jsx(
+    AvlSwimLane,
     {
       listenedEvents: data.listenedEvents,
       emittedEvents: data.emittedEvents,
@@ -49827,63 +49478,670 @@ var AvlTransitionScene = ({
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "GUARD" }),
         /* @__PURE__ */ jsx(
-          "polygon",
+          "polygon",
+          {
+            points: `${CONTENT_LEFT + 6},${secY + 22} ${CONTENT_LEFT + 2},${secY + 26} ${CONTENT_LEFT + 6},${secY + 30} ${CONTENT_LEFT + 10},${secY + 26}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.5
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 18, y: secY + 29, fill: color, fontSize: 12, fontWeight: 400, opacity: 0.6, fontFamily: "inherit", children: data.guard.label })
+      ] });
+    })(),
+    hasEffects && (() => {
+      const secY = cardY + headerH + sectionGap + triggerH + guardH;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "EFFECTS" }),
+        effects.map((eff, i) => {
+          const rowY = secY + 22 + i * effectRowH;
+          const effectType = mapEffectType(eff.type);
+          const argsText = eff.args.length > 0 ? eff.args.join(" \xB7 ") : "";
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              AvlEffect,
+              {
+                x: CONTENT_LEFT + 10,
+                y: rowY + 6,
+                effectType,
+                size: 10,
+                showBackground: true
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 28, y: rowY + 10, fill: color, fontSize: 12, fontWeight: 500, opacity: 0.8, fontFamily: "inherit", children: eff.type }),
+            argsText && /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 28 + eff.type.length * 7 + 8, y: rowY + 10, fill: color, fontSize: 10, fontWeight: 400, opacity: 0.5, fontFamily: "monospace", children: argsText })
+          ] }, `eff-${i}`);
+        })
+      ] });
+    })(),
+    hasSlots && (() => {
+      const secY = cardY + headerH + sectionGap + triggerH + guardH + effectsH;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "SLOTS" }),
+        data.slotTargets.map((slot, i) => {
+          const rowY = secY + 22 + i * 22;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("rect", { x: CONTENT_LEFT, y: rowY - 4, width: CARD_W - 56, height: 18, rx: 4, fill: color, fillOpacity: 0.04 }),
+            /* @__PURE__ */ jsxs("text", { x: CONTENT_LEFT + 8, y: rowY + 8, fill: color, fontSize: 11, fontFamily: "inherit", children: [
+              slot.name,
+              ": ",
+              slot.pattern
+            ] })
+          ] }, `slot-${i}`);
+        })
+      ] });
+    })()
+  ] });
+};
+AvlTransitionScene.displayName = "AvlTransitionScene";
+
+// components/organisms/avl/AvlOrbitalsCosmicZoom.tsx
+init_Box();
+init_Stack();
+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 AvlOrbitalsCosmicZoom = ({
+  schema: schemaProp,
+  className,
+  color = "var(--color-primary, #4A90D9)",
+  animated = true,
+  width = "100%",
+  height = 450,
+  highlightedOrbital,
+  onOrbitalSelect,
+  minZoom = 0.4,
+  maxZoom = 3
+}) => {
+  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 [state, dispatch] = useReducer(zoomReducer, initialZoomState);
+  const drilledForHighlightRef = useRef(false);
+  useEffect(() => {
+    if (!highlightedOrbital) return;
+    if (drilledForHighlightRef.current) return;
+    drilledForHighlightRef.current = true;
+    dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: highlightedOrbital, targetPosition: { x: 0, y: 0 } });
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, [highlightedOrbital]);
+  const breadcrumbs = useMemo(() => getBreadcrumbs(state), [state]);
+  const handleSelect = useCallback(
+    (name) => {
+      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
+      Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+      onOrbitalSelect?.(name);
+    },
+    [onOrbitalSelect]
+  );
+  const handleTraitSelect = useCallback((traitName) => {
+    dispatch({ type: "ZOOM_INTO_TRAIT", trait: traitName, targetPosition: { x: 0, y: 0 } });
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, []);
+  const handleTransitionSelect = useCallback((transitionIndex) => {
+    dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex, targetPosition: { x: 0, y: 0 } });
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, []);
+  const handleZoomOut = useCallback(() => {
+    dispatch({ type: "ZOOM_OUT" });
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, []);
+  const handleBreadcrumbClick = useCallback((targetLevel) => {
+    const order = ["application", "orbital", "trait", "transition"];
+    const currentIdx = order.indexOf(state.level);
+    const targetIdx = order.indexOf(targetLevel);
+    const steps = currentIdx - targetIdx;
+    for (let i = 0; i < steps; i++) {
+      dispatch({ type: "ZOOM_OUT" });
+    }
+    Promise.resolve().then(() => dispatch({ type: "ANIMATION_COMPLETE" }));
+  }, [state.level]);
+  useEffect(() => {
+    if (state.level === "application") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handleZoomOut();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [handleZoomOut, state.level]);
+  const orbitalLevelData = useMemo(() => {
+    if (!state.selectedOrbital) return null;
+    return parseOrbitalLevel(parsedSchema, state.selectedOrbital);
+  }, [parsedSchema, state.selectedOrbital]);
+  const traitLevelData = useMemo(() => {
+    if (!state.selectedOrbital || !state.selectedTrait) return null;
+    return parseTraitLevel(parsedSchema, state.selectedOrbital, state.selectedTrait);
+  }, [parsedSchema, state.selectedOrbital, state.selectedTrait]);
+  const transitionLevelData = useMemo(() => {
+    if (!state.selectedOrbital || !state.selectedTrait || state.selectedTransition === null) return null;
+    return parseTransitionLevel(
+      parsedSchema,
+      state.selectedOrbital,
+      state.selectedTrait,
+      state.selectedTransition
+    );
+  }, [parsedSchema, state.selectedOrbital, state.selectedTrait, state.selectedTransition]);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const dragStateRef = useRef(null);
+  const transformWrapperRef = useRef(null);
+  const clampZoom = useCallback(
+    (z) => Math.max(minZoom, Math.min(maxZoom, z)),
+    [minZoom, maxZoom]
+  );
+  const handlePointerDown = useCallback((e) => {
+    if (e.target.closest("[data-orbital-tile]")) return;
+    dragStateRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      panX: pan.x,
+      panY: pan.y
+    };
+    e.target.setPointerCapture(e.pointerId);
+  }, [pan]);
+  const handlePointerMove = useCallback((e) => {
+    const drag = dragStateRef.current;
+    if (!drag) return;
+    setPan({
+      x: drag.panX + (e.clientX - drag.startX),
+      y: drag.panY + (e.clientY - drag.startY)
+    });
+  }, []);
+  const handlePointerUp = useCallback((e) => {
+    if (!dragStateRef.current) return;
+    dragStateRef.current = null;
+    try {
+      e.target.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }, []);
+  const panRef = useRef(pan);
+  const zoomRef = useRef(zoom);
+  useEffect(() => {
+    panRef.current = pan;
+  }, [pan]);
+  useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+  useEffect(() => {
+    const wrapper = transformWrapperRef.current;
+    if (!wrapper) return;
+    const wheelListener = (e) => {
+      e.preventDefault();
+      const rect = wrapper.getBoundingClientRect();
+      const cursorX = e.clientX - rect.left;
+      const cursorY = e.clientY - rect.top;
+      const currentZoom = zoomRef.current;
+      const currentPan = panRef.current;
+      const worldX = (cursorX - currentPan.x) / currentZoom;
+      const worldY = (cursorY - currentPan.y) / currentZoom;
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      const nextZoom = clampZoom(currentZoom * (1 + delta));
+      const nextPanX = cursorX - worldX * nextZoom;
+      const nextPanY = cursorY - worldY * nextZoom;
+      setZoom(nextZoom);
+      setPan({ x: nextPanX, y: nextPanY });
+    };
+    wrapper.addEventListener("wheel", wheelListener, { passive: false });
+    return () => wrapper.removeEventListener("wheel", wheelListener);
+  }, [clampZoom]);
+  const zoomIn = useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
+  const zoomOut = useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
+  const resetZoom = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      position: "relative",
+      overflow: "visible",
+      style: { width, height: containerH },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
           {
-            points: `${CONTENT_LEFT + 6},${secY + 22} ${CONTENT_LEFT + 2},${secY + 26} ${CONTENT_LEFT + 6},${secY + 30} ${CONTENT_LEFT + 10},${secY + 26}`,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 1,
-            opacity: 0.5
+            position: "absolute",
+            style: {
+              top: 12,
+              left: 12,
+              zIndex: 30,
+              background: "var(--color-card, rgba(255,255,255,0.92))",
+              padding: "4px 12px",
+              borderRadius: 6,
+              border: `1px solid ${color}`
+            },
+            children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", style: { opacity: 0.5, color }, children: "/" }),
+              i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  onClick: () => handleBreadcrumbClick(crumb.level),
+                  style: { cursor: "pointer" },
+                  children: /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "small",
+                      style: { color, textDecoration: "underline" },
+                      children: crumb.label
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "bold", style: { color }, children: crumb.label })
+            ] }, crumb.level)) })
           }
         ),
-        /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 18, y: secY + 29, fill: color, fontSize: 12, fontWeight: 400, opacity: 0.6, fontFamily: "inherit", children: data.guard.label })
-      ] });
-    })(),
-    hasEffects && (() => {
-      const secY = cardY + headerH + sectionGap + triggerH + guardH;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "EFFECTS" }),
-        effects.map((eff, i) => {
-          const rowY = secY + 22 + i * effectRowH;
-          const effectType = mapEffectType(eff.type);
-          const argsText = eff.args.length > 0 ? eff.args.join(" \xB7 ") : "";
-          return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx(
-              AvlEffect,
+        state.level !== "application" && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            style: {
+              bottom: 12,
+              right: 12,
+              zIndex: 30,
+              background: "var(--color-card, rgba(255,255,255,0.85))",
+              padding: "2px 8px",
+              borderRadius: 4,
+              opacity: 0.8
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "small", style: { color }, children: "Press Esc to zoom out" })
+          }
+        ),
+        state.level === "application" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: transformWrapperRef,
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              style: {
+                position: "absolute",
+                inset: 0,
+                overflow: "hidden",
+                cursor: dragStateRef.current ? "grabbing" : "grab",
+                touchAction: "none"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                    transformOrigin: "0 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      EventWireOverlay,
+                      {
+                        orbitalViews,
+                        crossLinks,
+                        color,
+                        animated,
+                        containerW,
+                        containerH
+                      }
+                    ),
+                    orbitalViews.map((view) => {
+                      const isHighlighted = view.name === highlightedOrbital;
+                      return /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          role: "button",
+                          tabIndex: 0,
+                          "data-orbital-tile": "true",
+                          onClick: () => handleSelect(view.name),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") handleSelect(view.name);
+                          },
+                          "aria-label": `Orbital: ${view.name}${isHighlighted ? " (highlighted)" : ""}`,
+                          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, box-shadow 0.3s ease",
+                            // GAP-52: persistent highlight ring (independent from user selection)
+                            boxShadow: isHighlighted ? `0 0 0 3px ${color}, 0 0 24px 4px ${color}` : "none",
+                            borderRadius: isHighlighted ? "12px" : void 0,
+                            zIndex: isHighlighted ? 11 : 1
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            AvlOrbitalUnit,
+                            {
+                              entityName: view.entityName,
+                              fields: view.fieldCount,
+                              persistence: view.persistence,
+                              traits: view.traits,
+                              pages: view.pages,
+                              color,
+                              animated: animated && isHighlighted
+                            }
+                          )
+                        },
+                        view.name
+                      );
+                    })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              position: "absolute",
+              style: {
+                top: 12,
+                right: 12,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                zIndex: 30
+              },
+              children: [
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: "sm" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: "sm" }) })
+              ]
+            }
+          )
+        ] }),
+        state.level === "orbital" && orbitalLevelData && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            position: "absolute",
+            style: {
+              inset: 0,
+              paddingTop: 56,
+              paddingBottom: 24,
+              paddingLeft: 24,
+              paddingRight: 24,
+              display: "flex",
+              alignItems: "stretch",
+              justifyContent: "center",
+              gap: 24
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { style: { flex: 1, maxWidth: 720, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+                AvlOrbitalUnit,
+                {
+                  entityName: orbitalLevelData.entity.name,
+                  fields: orbitalLevelData.entity.fields.length,
+                  persistence: orbitalLevelData.entity.persistence || "persistent",
+                  traits: orbitalLevelData.traits.map((t) => ({ name: t.name })),
+                  pages: orbitalLevelData.pages.map((p2) => ({ name: p2.name })),
+                  color,
+                  animated
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  style: {
+                    width: 220,
+                    padding: 12,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8,
+                    borderLeft: `1px solid ${color}`,
+                    opacity: 0.95
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "semibold", style: { color, marginBottom: 4 }, children: [
+                      "Traits (",
+                      orbitalLevelData.traits.length,
+                      ")"
+                    ] }),
+                    orbitalLevelData.traits.length === 0 && /* @__PURE__ */ jsx(Text, { variant: "small", style: { opacity: 0.6, color }, children: "No traits" }),
+                    orbitalLevelData.traits.map((trait) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => handleTraitSelect(trait.name),
+                        action: "COSMIC_DRILL_TRAIT",
+                        children: trait.name
+                      },
+                      trait.name
+                    )),
+                    orbitalLevelData.pages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "semibold", style: { color, marginTop: 12 }, children: [
+                        "Pages (",
+                        orbitalLevelData.pages.length,
+                        ")"
+                      ] }),
+                      orbitalLevelData.pages.map((page) => /* @__PURE__ */ jsx(Text, { variant: "small", style: { opacity: 0.7, color }, children: page.name }, page.name))
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        state.level === "trait" && traitLevelData && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            style: {
+              inset: 0,
+              paddingTop: 56,
+              paddingBottom: 24,
+              paddingLeft: 24,
+              paddingRight: 24
+            },
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+              AvlTraitScene,
               {
-                x: CONTENT_LEFT + 10,
-                y: rowY + 6,
-                effectType,
-                size: 10,
-                showBackground: true
+                data: traitLevelData,
+                color,
+                onTransitionClick: (idx) => handleTransitionSelect(idx)
               }
-            ),
-            /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 28, y: rowY + 10, fill: color, fontSize: 12, fontWeight: 500, opacity: 0.8, fontFamily: "inherit", children: eff.type }),
-            argsText && /* @__PURE__ */ jsx("text", { x: CONTENT_LEFT + 28 + eff.type.length * 7 + 8, y: rowY + 10, fill: color, fontSize: 10, fontWeight: 400, opacity: 0.5, fontFamily: "monospace", children: argsText })
-          ] }, `eff-${i}`);
-        })
-      ] });
-    })(),
-    hasSlots && (() => {
-      const secY = cardY + headerH + sectionGap + triggerH + guardH + effectsH;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("text", { x: SECTION_LEFT, y: secY + 12, fill: color, fontSize: 10, fontWeight: 600, opacity: 0.4, fontFamily: "inherit", children: "SLOTS" }),
-        data.slotTargets.map((slot, i) => {
-          const rowY = secY + 22 + i * 22;
-          return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx("rect", { x: CONTENT_LEFT, y: rowY - 4, width: CARD_W - 56, height: 18, rx: 4, fill: color, fillOpacity: 0.04 }),
-            /* @__PURE__ */ jsxs("text", { x: CONTENT_LEFT + 8, y: rowY + 8, fill: color, fontSize: 11, fontFamily: "inherit", children: [
-              slot.name,
-              ": ",
-              slot.pattern
-            ] })
-          ] }, `slot-${i}`);
-        })
-      ] });
-    })()
-  ] });
+            ) })
+          }
+        ),
+        state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            style: {
+              inset: 0,
+              paddingTop: 56,
+              paddingBottom: 24,
+              paddingLeft: 24,
+              paddingRight: 24
+            },
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+              AvlTransitionScene,
+              {
+                data: transitionLevelData,
+                color
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
 };
-AvlTransitionScene.displayName = "AvlTransitionScene";
+AvlOrbitalsCosmicZoom.displayName = "AvlOrbitalsCosmicZoom";
 var AvlClickTarget = ({
   x,
   y,