@almadar/ui 2.45.0 → 2.46.1

package/dist/avl/index.js

@@ -3178,6 +3178,7 @@ var init_Box = __esm({
         action,
         actionPayload,
         hoverEvent,
+        maxWidth,
         onClick,
         onMouseEnter,
         onMouseLeave,
@@ -3242,6 +3243,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
           }
@@ -12830,12 +12832,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);
@@ -12874,6 +12876,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({
@@ -12885,6 +12903,7 @@ function schemaToOverviewGraph(schema, mockData) {
         patterns: initPatterns,
         eventSources,
         effectTypes: initEffectTypes,
+        layer: behaviorMeta?.[orb.name]?.layer,
         stateRole: "initial",
         entityName: entityInfo.name,
         persistence: entityInfo.persistence,
@@ -47147,6 +47166,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 = createContext("tablet");
 var PatternSelectionContext = createContext({ selected: null, select: () => {
 } });
@@ -47157,6 +47213,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,
@@ -47259,6 +47324,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 ?? "";
@@ -47400,6 +47466,13 @@ var OrbPreviewNodeInner = (props) => {
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsx("style", { children: SELECTION_STYLES }),
+        layerColor && /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: { height: 3, backgroundColor: layerColor },
+            title: data.layer
+          }
+        ),
         /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
           /* @__PURE__ */ jsx(
             Box,
@@ -47421,7 +47494,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
@@ -47455,7 +47528,7 @@ var OrbPreviewNodeInner = (props) => {
             type: "source",
             position: 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}`
         ))
@@ -47543,6 +47616,211 @@ var EventFlowEdgeInner = (props) => {
 var EventFlowEdge = React125__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] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const layerColor = data.layer ? LAYER_COLORS2[data.layer] : void 0;
+  const connectableEvents = data.connectableEvents ?? [];
+  return /* @__PURE__ */ 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__ */ jsx(
+          Box,
+          {
+            style: { height: 3, backgroundColor: layerColor },
+            title: data.layer
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold truncate leading-tight text-[12px]", children: data.behaviorName }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-[10px] leading-tight", children: data.entityName })
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "shrink-0", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[9px] text-inherit", children: data.level }) })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ 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__ */ jsxs(Box, { className: "flex flex-wrap gap-0.5 px-2 pb-2", children: [
+          connectableEvents.slice(0, 4).map((ev) => /* @__PURE__ */ 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__ */ 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__ */ jsxs(Box, { className: "flex items-center justify-between px-2 pb-1.5", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[9px]", children: [
+            data.stateCount,
+            " states"
+          ] }),
+          data.layer && /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "text-[8px]", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[8px] text-inherit", children: data.layer }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            style: TARGET_HANDLE_STYLE2
+          }
+        ),
+        connectableEvents.map((ev) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: `event-${ev.event}`,
+            type: "source",
+            position: Position.Right,
+            style: eventHandleStyle2(ev),
+            title: `${ev.event}${ev.payloadFields?.length ? ` ${formatPayloadTooltip(ev.payloadFields)}` : ""}`
+          },
+          `event-${ev.event}`
+        ))
+      ]
+    }
+  );
+};
+var BehaviorComposeNode = React125__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();
@@ -47655,6 +47933,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 = useMemo(() => patternType ? getPatternDefinition(patternType) : null, [patternType]);
   const isEntityPattern = patternType ? isEntityAwarePattern(patternType) : false;
@@ -47854,6 +48133,42 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             }
           )
         ] }),
+        editable && !selectedPattern && !isExpanded && node.layer === "Services" && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Service Mode") }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+            /* @__PURE__ */ 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__ */ jsx(Icon, { name: "monitor", size: "xs", className: "mr-1" }),
+                  t("Standalone")
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(Icon, { name: "cpu", size: "xs", className: "mr-1" }),
+                  t("Embedded")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ 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__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Traits" }),
           /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t2) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
@@ -48002,8 +48317,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
@@ -48025,7 +48342,13 @@ function FlowCanvasInner({
   editable,
   onSchemaChange,
   onPatternDelete,
-  onEventWire
+  onEventWire,
+  behaviorMeta,
+  layoutHint,
+  onNodeSelect,
+  composeLevel,
+  behaviorEntries,
+  behaviorWires
 }) {
   const parsedSchema = useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -48047,18 +48370,22 @@ function FlowCanvasInner({
       if (p2) setSelectedNode(p2.nodeData);
     }
   }), [selectedPattern]);
-  const { overviewNodes, overviewEdges, expandedNodes, expandedEdges } = useMemo(() => {
-    const overview = schemaToOverviewGraph(parsedSchema, mockData);
+  const [atBehaviorLevel, setAtBehaviorLevel] = useState(composeLevel === "behavior");
+  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = 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] = useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(activeEdges);
   const reactFlow = useReactFlow();
@@ -48070,13 +48397,23 @@ function FlowCanvasInner({
     });
   }, [activeNodes, activeEdges, setNodes, setEdges, reactFlow]);
   const handleNodeDoubleClick = 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 = useCallback((_, node) => {
     const nodeData = node.data;
     if (level === "expanded") {
@@ -48092,6 +48429,7 @@ function FlowCanvasInner({
         level: "overview",
         orbital: nodeData.orbitalName ?? node.id
       });
+      onNodeSelect?.(nodeData.orbitalName ?? node.id);
     }
   }, [level, expandedOrbital, onNodeClick]);
   const handleClosePanel = useCallback(() => {
@@ -48105,6 +48443,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;
@@ -48127,8 +48468,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 = useCallback((connection) => {
     if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;
     const eventName = connection.sourceHandle.replace("event-", "");
@@ -48137,6 +48483,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 ?? "",
@@ -48144,7 +48503,7 @@ function FlowCanvasInner({
       sourceTraitName: srcData.traitName,
       targetTraitName: tgtData.traitName
     });
-  }, [nodes, onEventWire]);
+  }, [nodes, onEventWire, eventBus]);
   const screenSizeKeys = ["mobile", "tablet", "desktop"];
   return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxs(
     Box,
@@ -48794,4 +49153,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, 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, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, 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, 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/atoms/Box.d.ts

@@ -49,6 +49,10 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
     actionPayload?: Record<string, unknown>;
     /** Declarative hover event — emits UI:{hoverEvent} with { hovered: true/false } on mouseEnter/mouseLeave */
     hoverEvent?: string;
+    /** Maximum width (CSS value, e.g., "550px", "80rem") */
+    maxWidth?: string;
+    /** Children elements */
+    children?: React.ReactNode;
 }
 /**
  * Box - Versatile container component with design tokens

package/dist/components/index.cjs

@@ -1089,6 +1089,7 @@ var Box = React90__namespace.default.forwardRef(
     action,
     actionPayload,
     hoverEvent,
+    maxWidth,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -1153,6 +1154,7 @@ var Box = React90__namespace.default.forwardRef(
         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
       }

package/dist/components/index.js

@@ -1043,6 +1043,7 @@ var Box = React90__default.forwardRef(
     action,
     actionPayload,
     hoverEvent,
+    maxWidth,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -1107,6 +1108,7 @@ var Box = React90__default.forwardRef(
         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
       }

package/dist/components/molecules/avl/BehaviorComposeNode.d.ts

@@ -0,0 +1,13 @@
+/**
+ * BehaviorComposeNode
+ *
+ * React Flow custom node for behavior-level composition.
+ * Shows AvlBehaviorGlyph instead of live UI (OrbPreview).
+ * Each behavior is one compact node with event handles for wiring.
+ *
+ * This is the compose-level node. Double-clicking drills into
+ * the orbital-level view (OrbPreviewNode).
+ */
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+export declare const BehaviorComposeNode: React.NamedExoticComponent<NodeProps>;

package/dist/components/molecules/avl/avl-behavior-compose-converter.d.ts

@@ -0,0 +1,53 @@
+/**
+ * AVL Behavior Compose Converter
+ *
+ * Converts BehaviorCanvasEntry[] to React Flow nodes and edges
+ * for the behavior-level composition canvas.
+ *
+ * Parallel to avl-preview-converter.ts which works at the orbital level.
+ * This works one level higher: each node is a behavior (not an orbital).
+ */
+import type { Node, Edge } from '@xyflow/react';
+import type { BehaviorCanvasEntry, BehaviorComposeNodeData, BehaviorWireEdgeData } from './avl-behavior-compose-types';
+/**
+ * Build a React Flow graph for behavior-level composition.
+ * Each behavior entry becomes one BehaviorComposeNode.
+ */
+export declare function behaviorsToComposeGraph(entries: BehaviorCanvasEntry[], wires: BehaviorWireEdgeData[], layoutHint?: 'pipeline' | 'grid'): {
+    nodes: Node<BehaviorComposeNodeData>[];
+    edges: Edge<BehaviorWireEdgeData>[];
+};
+/** Registry record shape (matches behaviors-registry.json entries). */
+export interface BehaviorRegistryRecord {
+    name: string;
+    level: 'atom' | 'molecule' | 'organism';
+    family: string;
+    layer: string;
+    description: string;
+    complexity: {
+        states: number;
+        events: number;
+        transitions: number;
+    };
+    defaultEntity: {
+        name: string;
+        persistence?: string;
+        fields: Array<{
+            name: string;
+            type: string;
+            required?: boolean;
+        }>;
+    };
+    connectableEvents: string[];
+    eventPayloads: Record<string, Array<{
+        name: string;
+        type: string;
+        required?: boolean;
+    }>>;
+    composableWith: string[];
+}
+/**
+ * Convert a registry entry to a BehaviorCanvasEntry.
+ * Maps connectableEvents + eventPayloads into typed ConnectableEvent[].
+ */
+export declare function registryEntryToCanvasEntry(entry: BehaviorRegistryRecord, orbitalNames: string[]): BehaviorCanvasEntry;