@almadar/ui 2.45.0 → 2.46.1

package/dist/avl/index.cjs

@@ -3225,6 +3225,7 @@ var init_Box = __esm({
         action,
         actionPayload,
         hoverEvent,
+        maxWidth,
         onClick,
         onMouseEnter,
         onMouseLeave,
@@ -3289,6 +3290,7 @@ var init_Box = __esm({
             onClick: isClickable ? handleClick : void 0,
             onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
             onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+            style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
             ...rest,
             children
           }
@@ -12877,12 +12879,12 @@ function findCrossLinks(orbitals) {
   }
   return links;
 }
-function schemaToOverviewGraph(schema, mockData) {
+function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint) {
   const orbitals = getOrbitals(schema);
   const nodes = [];
   const edges = [];
   const count = orbitals.length;
-  const cols = Math.ceil(Math.sqrt(count));
+  const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
   for (let i = 0; i < orbitals.length; i++) {
     const orb = orbitals[i];
     const entityInfo = getEntityInfo(orb);
@@ -12921,6 +12923,22 @@ function schemaToOverviewGraph(schema, mockData) {
       }
     }
     const eventSources = collectEventSources(initPatterns);
+    for (const source of eventSources) {
+      for (const trait of traits2) {
+        const sm = getStateMachine2(trait);
+        if (!sm) continue;
+        const smEvents = trait.stateMachine?.events ?? [];
+        const matchingEvent = smEvents.find((ev) => ev.key === source.event);
+        if (matchingEvent?.payload && Array.isArray(matchingEvent.payload)) {
+          source.payloadFields = matchingEvent.payload.map((p2) => ({
+            name: String(p2.name ?? ""),
+            type: String(p2.type ?? "string"),
+            ...p2.required ? { required: true } : {}
+          }));
+          break;
+        }
+      }
+    }
     const col = i % cols;
     const row = Math.floor(i / cols);
     nodes.push({
@@ -12932,6 +12950,7 @@ function schemaToOverviewGraph(schema, mockData) {
         patterns: initPatterns,
         eventSources,
         effectTypes: initEffectTypes,
+        layer: behaviorMeta?.[orb.name]?.layer,
         stateRole: "initial",
         entityName: entityInfo.name,
         persistence: entityInfo.persistence,
@@ -47194,6 +47213,43 @@ OrbPreview.displayName = "OrbPreview";
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_useEventBus();
+
+// components/molecules/avl/wire-validation.ts
+function validateWire(sourcePayload, targetPayload) {
+  const warnings = [];
+  if (!sourcePayload?.length && !targetPayload?.length) {
+    return { valid: true, warnings };
+  }
+  if (sourcePayload?.length && !targetPayload?.length) {
+    return { valid: true, warnings };
+  }
+  if (!sourcePayload?.length && targetPayload?.length) {
+    const requiredFields = targetPayload.filter((f3) => f3.required);
+    if (requiredFields.length > 0) {
+      warnings.push(`Missing required fields: ${requiredFields.map((f3) => f3.name).join(", ")}`);
+    }
+    return { valid: warnings.length === 0, warnings };
+  }
+  const sourceFields = new Map(sourcePayload.map((f3) => [f3.name, f3]));
+  for (const targetField of targetPayload) {
+    const sourceField = sourceFields.get(targetField.name);
+    if (!sourceField) {
+      if (targetField.required) {
+        warnings.push(`Missing required field: ${targetField.name} (${targetField.type})`);
+      }
+    } else if (sourceField.type !== targetField.type) {
+      warnings.push(`Type mismatch: ${targetField.name} (source: ${sourceField.type}, target: ${targetField.type})`);
+    }
+  }
+  return { valid: warnings.length === 0, warnings };
+}
+function formatPayloadTooltip(fields) {
+  if (fields.length === 0) return "";
+  const parts = fields.map(
+    (f3) => `${f3.name}: ${f3.type}${f3.required ? " (req)" : ""}`
+  );
+  return `{ ${parts.join(", ")} }`;
+}
 var ScreenSizeContext = React125.createContext("tablet");
 var PatternSelectionContext = React125.createContext({ selected: null, select: () => {
 } });
@@ -47204,6 +47260,15 @@ var ROLE_COLORS = {
   error: { border: "#D97706", dot: "#F59E0B" },
   default: { border: "var(--color-border)", dot: "#6B7280" }
 };
+var LAYER_COLORS = {
+  Infrastructure: "#3B82F6",
+  Services: "#F59E0B",
+  "UI Patterns": "#8B5CF6",
+  Game: "#22C55E",
+  ML: "#EC4899",
+  Domain: "#6366F1",
+  Community: "#6B7280"
+};
 var TARGET_HANDLE_STYLE = {
   background: "var(--color-primary)",
   width: 8,
@@ -47306,6 +47371,7 @@ var OrbPreviewNodeInner = (props) => {
   const role = data.stateRole ?? "default";
   const colors = ROLE_COLORS[role] ?? ROLE_COLORS.default;
   const eventSources = data.eventSources ?? [];
+  const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
   const isExpanded = Boolean(data.traitName);
   const label = isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
   const sublabel = isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
@@ -47447,6 +47513,13 @@ var OrbPreviewNodeInner = (props) => {
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: SELECTION_STYLES }),
+        layerColor && /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            style: { height: 3, backgroundColor: layerColor },
+            title: data.layer
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Box,
@@ -47468,7 +47541,7 @@ var OrbPreviewNodeInner = (props) => {
                 color: "#F97316",
                 border: "1px solid #F9731630"
               },
-              title: `${src.label ?? src.patternType} \u2192 ${src.event}`,
+              title: `${src.label ?? src.patternType} \u2192 ${src.event}${src.payloadFields?.length ? ` ${formatPayloadTooltip(src.payloadFields)}` : ""}`,
               children: src.label ?? src.event
             },
             src.event
@@ -47502,7 +47575,7 @@ var OrbPreviewNodeInner = (props) => {
             type: "source",
             position: react.Position.Right,
             style: eventHandleStyle(src),
-            title: `${src.label ?? src.patternType}: ${src.event}`
+            title: `${src.label ?? src.patternType}: ${src.event}${src.payloadFields?.length ? ` ${formatPayloadTooltip(src.payloadFields)}` : ""}`
           },
           `event-${src.event}`
         ))
@@ -47590,6 +47663,211 @@ var EventFlowEdgeInner = (props) => {
 var EventFlowEdge = React125__namespace.default.memo(EventFlowEdgeInner);
 EventFlowEdge.displayName = "EventFlowEdge";
 
+// components/molecules/avl/BehaviorComposeNode.tsx
+init_Box();
+init_Typography();
+var LAYER_COLORS2 = {
+  Infrastructure: "#3B82F6",
+  Services: "#F59E0B",
+  "UI Patterns": "#8B5CF6",
+  Game: "#22C55E",
+  ML: "#EC4899",
+  Domain: "#6366F1",
+  Community: "#6B7280"
+};
+var NODE_WIDTH = 220;
+var TARGET_HANDLE_STYLE2 = {
+  background: "var(--color-primary)",
+  width: 8,
+  height: 8,
+  border: "2px solid var(--color-card)"
+};
+function eventHandleStyle2(source) {
+  return {
+    background: "#F97316",
+    width: 10,
+    height: 10,
+    border: "2px solid var(--color-card)",
+    top: `${source.positionHint * 100}%`,
+    right: -5
+  };
+}
+var BehaviorComposeNodeInner = (props) => {
+  const data = props.data;
+  const [hovered, setHovered] = React125.useState(false);
+  const handleMouseEnter = React125.useCallback(() => setHovered(true), []);
+  const handleMouseLeave = React125.useCallback(() => setHovered(false), []);
+  const layerColor = data.layer ? LAYER_COLORS2[data.layer] : void 0;
+  const connectableEvents = data.connectableEvents ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      className: "rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden",
+      style: {
+        borderColor: hovered ? "var(--color-primary)" : "var(--color-border)",
+        borderWidth: "1.5px",
+        width: NODE_WIDTH
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        layerColor && /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            style: { height: 3, backgroundColor: layerColor },
+            title: data.layer
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold truncate leading-tight text-[12px]", children: data.behaviorName }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-[10px] leading-tight", children: data.entityName })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "neutral", className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[9px] text-inherit", children: data.level }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+          AvlBehaviorGlyph,
+          {
+            name: data.behaviorName,
+            level: data.level,
+            domain: data.domain,
+            stateCount: data.stateCount,
+            fieldCount: data.fieldCount,
+            persistence: data.persistence,
+            effectTypes: data.effectTypes,
+            children: data.children,
+            connections: data.connections,
+            size: "sm",
+            showLabels: false
+          }
+        ) }),
+        connectableEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-wrap gap-0.5 px-2 pb-2", children: [
+          connectableEvents.slice(0, 4).map((ev) => /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: "rounded-full px-1.5 py-0 text-[8px] font-medium leading-tight",
+              style: {
+                backgroundColor: "#F9731615",
+                color: "#F97316",
+                border: "1px solid #F9731630"
+              },
+              title: `${ev.event}${ev.payloadFields?.length ? ` ${formatPayloadTooltip(ev.payloadFields)}` : ""}`,
+              children: ev.event
+            },
+            ev.event
+          )),
+          connectableEvents.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs(
+            Box,
+            {
+              className: "rounded-full px-1.5 py-0 text-[8px] font-medium leading-tight",
+              style: { color: "var(--color-muted-foreground)" },
+              children: [
+                "+",
+                connectableEvents.length - 4
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between px-2 pb-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[9px]", children: [
+            data.stateCount,
+            " states"
+          ] }),
+          data.layer && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "neutral", className: "text-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[8px] text-inherit", children: data.layer }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Handle,
+          {
+            type: "target",
+            position: react.Position.Left,
+            style: TARGET_HANDLE_STYLE2
+          }
+        ),
+        connectableEvents.map((ev) => /* @__PURE__ */ jsxRuntime.jsx(
+          react.Handle,
+          {
+            id: `event-${ev.event}`,
+            type: "source",
+            position: react.Position.Right,
+            style: eventHandleStyle2(ev),
+            title: `${ev.event}${ev.payloadFields?.length ? ` ${formatPayloadTooltip(ev.payloadFields)}` : ""}`
+          },
+          `event-${ev.event}`
+        ))
+      ]
+    }
+  );
+};
+var BehaviorComposeNode = React125__namespace.default.memo(BehaviorComposeNodeInner);
+BehaviorComposeNode.displayName = "BehaviorComposeNode";
+
+// components/molecules/avl/avl-behavior-compose-converter.ts
+var COMPOSE_SPACING = 320;
+function behaviorsToComposeGraph(entries, wires, layoutHint) {
+  const nodes = [];
+  const edges = [];
+  const count = entries.length;
+  const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    nodes.push({
+      id: entry.behaviorName,
+      type: "behaviorCompose",
+      position: { x: col * COMPOSE_SPACING, y: row * COMPOSE_SPACING },
+      data: {
+        behaviorName: entry.behaviorName,
+        level: entry.level,
+        domain: entry.domain,
+        layer: entry.layer,
+        entityName: entry.entityName,
+        stateCount: entry.stateCount,
+        fieldCount: entry.fieldCount,
+        persistence: entry.persistence,
+        effectTypes: entry.effectTypes,
+        children: entry.children,
+        connections: entry.connections,
+        connectableEvents: entry.connectableEvents,
+        composableWith: entry.composableWith,
+        orbitalNames: entry.orbitalNames
+      }
+    });
+  }
+  for (const wire of wires) {
+    edges.push({
+      id: `bw-${wire.sourceBehavior}-${wire.targetBehavior}-${wire.event}`,
+      source: wire.sourceBehavior,
+      target: wire.targetBehavior,
+      sourceHandle: `event-${wire.event}`,
+      type: "eventFlow",
+      data: wire
+    });
+  }
+  return { nodes, edges };
+}
+function registryEntryToCanvasEntry(entry, orbitalNames) {
+  const events2 = entry.connectableEvents;
+  const connectableEvents = events2.map((eventName, i) => ({
+    event: eventName,
+    payloadFields: entry.eventPayloads[eventName],
+    positionHint: events2.length > 1 ? 0.1 + i * 0.8 / (events2.length - 1) : 0.5
+  }));
+  return {
+    behaviorName: entry.name,
+    level: entry.level,
+    domain: entry.family,
+    layer: entry.layer,
+    entityName: entry.defaultEntity.name,
+    stateCount: entry.complexity.states,
+    fieldCount: entry.defaultEntity.fields.length,
+    persistence: entry.defaultEntity.persistence,
+    connectableEvents,
+    composableWith: entry.composableWith,
+    orbitalNames
+  };
+}
+
 // components/molecules/avl/index.ts
 init_Avl3DOrbitalNode();
 init_Avl3DCrossWire();
@@ -47702,6 +47980,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
   const effectTypes = node.effectTypes ?? [];
   const guard = node.guard;
   const isExpanded = Boolean(traitName);
+  const hasRenderUi = effectTypes.includes("render-ui");
   const patternType = selectedPattern?.patternType;
   const patternDef = React125.useMemo(() => patternType ? patterns.getPatternDefinition(patternType) : null, [patternType]);
   const isEntityPattern = patternType ? patterns.isEntityAwarePattern(patternType) : false;
@@ -47901,6 +48180,42 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             }
           )
         ] }),
+        editable && !selectedPattern && !isExpanded && node.layer === "Services" && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Service Mode") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: hasRenderUi ? "primary" : "ghost",
+                size: "sm",
+                className: "flex-1 text-[11px]",
+                onClick: () => {
+                  if (!hasRenderUi) eventBus.emit("UI:SERVICE_MODE_TOGGLE", { orbitalName: node.orbitalName, standalone: true });
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "monitor", size: "xs", className: "mr-1" }),
+                  t("Standalone")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: hasRenderUi ? "ghost" : "primary",
+                size: "sm",
+                className: "flex-1 text-[11px]",
+                onClick: () => {
+                  if (hasRenderUi) eventBus.emit("UI:SERVICE_MODE_TOGGLE", { orbitalName: node.orbitalName, standalone: false });
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "cpu", size: "xs", className: "mr-1" }),
+                  t("Embedded")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] mt-1", children: hasRenderUi ? t("Renders its own UI") : t("Headless, wired to other behaviors") })
+        ] }),
         !selectedPattern && !isExpanded && traits2.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Traits" }),
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t2) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
@@ -48049,8 +48364,10 @@ OrbInspector.displayName = "OrbInspector";
 // components/organisms/avl/FlowCanvas.tsx
 init_Box();
 init_Typography();
+init_useEventBus();
 var NODE_TYPES = {
-  preview: OrbPreviewNode
+  preview: OrbPreviewNode,
+  behaviorCompose: BehaviorComposeNode
 };
 var EDGE_TYPES = {
   eventFlow: EventFlowEdge
@@ -48072,7 +48389,13 @@ function FlowCanvasInner({
   editable,
   onSchemaChange,
   onPatternDelete,
-  onEventWire
+  onEventWire,
+  behaviorMeta,
+  layoutHint,
+  onNodeSelect,
+  composeLevel,
+  behaviorEntries,
+  behaviorWires
 }) {
   const parsedSchema = React125.useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -48094,18 +48417,22 @@ function FlowCanvasInner({
       if (p2) setSelectedNode(p2.nodeData);
     }
   }), [selectedPattern]);
-  const { overviewNodes, overviewEdges, expandedNodes, expandedEdges } = React125.useMemo(() => {
-    const overview = schemaToOverviewGraph(parsedSchema, mockData);
+  const [atBehaviorLevel, setAtBehaviorLevel] = React125.useState(composeLevel === "behavior");
+  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = React125.useMemo(() => {
+    const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
+    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
     return {
+      composeNodes: compose.nodes,
+      composeEdges: compose.edges,
       overviewNodes: overview.nodes,
       overviewEdges: overview.edges,
       expandedNodes: expanded.nodes,
       expandedEdges: expanded.edges
     };
-  }, [parsedSchema, expandedOrbital]);
-  const activeNodes = level === "overview" ? overviewNodes : expandedNodes;
-  const activeEdges = level === "overview" ? overviewEdges : expandedEdges;
+  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires]);
+  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
+  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = react.useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = react.useEdgesState(activeEdges);
   const reactFlow = react.useReactFlow();
@@ -48117,13 +48444,23 @@ function FlowCanvasInner({
     });
   }, [activeNodes, activeEdges, setNodes, setEdges, reactFlow]);
   const handleNodeDoubleClick = React125.useCallback((_, node) => {
+    if (atBehaviorLevel && composeLevel === "behavior") {
+      const d = node.data;
+      if (d.orbitalNames?.length) {
+        setExpandedOrbital(d.orbitalNames[0]);
+      }
+      setAtBehaviorLevel(false);
+      setLevel("overview");
+      onLevelChange?.("overview", d.behaviorName);
+      return;
+    }
     if (level === "overview") {
       const d = node.data;
       setExpandedOrbital(d.orbitalName ?? node.id);
       setLevel("expanded");
       onLevelChange?.("expanded", d.orbitalName ?? node.id);
     }
-  }, [level, onLevelChange]);
+  }, [level, onLevelChange, atBehaviorLevel, composeLevel]);
   const handleNodeClick = React125.useCallback((_, node) => {
     const nodeData = node.data;
     if (level === "expanded") {
@@ -48139,6 +48476,7 @@ function FlowCanvasInner({
         level: "overview",
         orbital: nodeData.orbitalName ?? node.id
       });
+      onNodeSelect?.(nodeData.orbitalName ?? node.id);
     }
   }, [level, expandedOrbital, onNodeClick]);
   const handleClosePanel = React125.useCallback(() => {
@@ -48152,6 +48490,9 @@ function FlowCanvasInner({
         setLevel("overview");
         setExpandedOrbital(void 0);
         onLevelChange?.("overview");
+      } else if (level === "overview" && composeLevel === "behavior" && !atBehaviorLevel) {
+        setAtBehaviorLevel(true);
+        setExpandedOrbital(void 0);
       }
     } else if (e.key === "Delete" || e.key === "Backspace") {
       const target = e.target;
@@ -48174,8 +48515,13 @@ function FlowCanvasInner({
       setExpandedOrbital(void 0);
       setSelectedNode(null);
       onLevelChange?.("overview");
+    } else if (level === "overview" && composeLevel === "behavior" && !atBehaviorLevel) {
+      setAtBehaviorLevel(true);
+      setExpandedOrbital(void 0);
+      setSelectedNode(null);
     }
-  }, [level, onLevelChange, selectedNode]);
+  }, [level, onLevelChange, selectedNode, composeLevel, atBehaviorLevel]);
+  const eventBus = useEventBus();
   const handleConnect = React125.useCallback((connection) => {
     if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;
     const eventName = connection.sourceHandle.replace("event-", "");
@@ -48184,6 +48530,19 @@ function FlowCanvasInner({
     if (!sourceNode || !targetNode) return;
     const srcData = sourceNode.data;
     const tgtData = targetNode.data;
+    const sourceEventSource = srcData.eventSources?.find((es) => es.event === eventName);
+    const sourcePayload = sourceEventSource?.payloadFields;
+    const targetEventSource = tgtData.eventSources?.find((es) => es.event === eventName);
+    const targetPayload = targetEventSource?.payloadFields;
+    const validation = validateWire(sourcePayload, targetPayload);
+    if (validation.warnings.length > 0) {
+      eventBus.emit("UI:WIRE_VALIDATION_WARNING", {
+        eventName,
+        sourceOrbital: srcData.orbitalName,
+        targetOrbital: tgtData.orbitalName,
+        warnings: validation.warnings
+      });
+    }
     onEventWire({
       eventName,
       sourceOrbital: srcData.orbitalName ?? "",
@@ -48191,7 +48550,7 @@ function FlowCanvasInner({
       sourceTraitName: srcData.traitName,
       targetTraitName: tgtData.traitName
     });
-  }, [nodes, onEventWire]);
+  }, [nodes, onEventWire, eventBus]);
   const screenSizeKeys = ["mobile", "tablet", "desktop"];
   return /* @__PURE__ */ jsxRuntime.jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsxRuntime.jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
@@ -48878,6 +49237,7 @@ exports.AvlTransition = AvlTransition;
 exports.AvlTransitionEdge = AvlTransitionEdge;
 exports.AvlTransitionLane = AvlTransitionLane;
 exports.AvlTransitionScene = AvlTransitionScene;
+exports.BehaviorComposeNode = BehaviorComposeNode;
 exports.BehaviorView = BehaviorView;
 exports.DOMAIN_COLORS = DOMAIN_COLORS;
 exports.DetailView = DetailView;
@@ -48893,6 +49253,7 @@ exports.ZoomBandContext = ZoomBandContext;
 exports.ZoomBreadcrumb = ZoomBreadcrumb;
 exports.ZoomLegend = ZoomLegend;
 exports.arcPath = arcPath;
+exports.behaviorsToComposeGraph = behaviorsToComposeGraph;
 exports.computeTraitLayout = computeTraitLayout;
 exports.computeZoomBand = computeZoomBand;
 exports.curveControlPoint = curveControlPoint;
@@ -48905,6 +49266,7 @@ exports.parseOrbitalLevel = parseOrbitalLevel;
 exports.parseTraitLevel = parseTraitLevel;
 exports.parseTransitionLevel = parseTransitionLevel;
 exports.radialPositions = radialPositions;
+exports.registryEntryToCanvasEntry = registryEntryToCanvasEntry;
 exports.ringPositions = ringPositions;
 exports.schemaToFlowGraph = schemaToFlowGraph;
 exports.schemaToOverviewGraph = schemaToOverviewGraph;