@almadar/ui 4.53.7 → 4.54.1

package/dist/avl/index.cjs

@@ -57600,46 +57600,46 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbit
   }
   return { nodes, edges };
 }
-function orbitalToExpandedGraph(schema, orbitalName, mockData) {
-  const nodes = [];
-  const edges = [];
-  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
-  if (!orbital) return { nodes, edges };
-  const entityInfo = getEntityInfo(orbital);
-  const traits2 = getTraits2(orbital);
-  const uiTransitions = [];
-  for (const trait of traits2) {
+function collectUITransitions(orbital, filter) {
+  const out = [];
+  for (const trait of getTraits2(orbital)) {
+    if (!filter(trait)) continue;
     const sm = getStateMachine2(trait);
     if (!sm) continue;
     for (const t of sm.transitions) {
       if (!t.effects) continue;
       const patterns = extractRenderUI(t.effects);
-      if (patterns.length > 0) {
-        uiTransitions.push({
-          traitName: trait.name,
-          transition: t,
-          patterns,
-          eventSources: collectEventSources(patterns),
-          states: sm.states,
-          allTransitions: sm.transitions
-        });
-      }
+      if (patterns.length === 0) continue;
+      out.push({
+        trait,
+        traitName: trait.name,
+        transition: t,
+        patterns,
+        eventSources: collectEventSources(patterns),
+        states: sm.states,
+        allTransitions: sm.transitions
+      });
     }
   }
-  if (uiTransitions.length === 0) return { nodes, edges };
+  return out;
+}
+function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
+  const nodes = [];
+  const edges = [];
   const stateNodeMap = /* @__PURE__ */ new Map();
-  for (const entry of uiTransitions) {
+  for (const entry of transitions) {
     const key = `${entry.traitName}:${entry.transition.to}`;
     const existing = stateNodeMap.get(key);
     if (!existing || entry.patterns.length > existing.patterns.length) {
       stateNodeMap.set(key, entry);
     }
   }
-  const entries = Array.from(stateNodeMap.values());
-  const cols = Math.min(entries.length, 3);
+  const transitionEntries = Array.from(stateNodeMap.values());
+  const totalCards = transitionEntries.length + groupedBehaviors.length;
+  if (totalCards === 0) return { nodes, edges };
+  const cols = Math.min(totalCards, 3);
   const nodeIdMap = /* @__PURE__ */ new Map();
-  for (let i = 0; i < entries.length; i++) {
-    const entry = entries[i];
+  transitionEntries.forEach((entry, i) => {
     const t = entry.transition;
     const nodeId = `${orbitalName}-${entry.traitName}-${t.event}-${t.to}`;
     const stateKey = `${entry.traitName}:${t.to}`;
@@ -57662,13 +57662,48 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
         stateRole: detectStateRole(t.to, entry.states, entry.allTransitions),
         effectTypes: t.effects ? extractEffectTypes(t.effects) : [],
         guard: t.guard,
-        entityName: entityInfo.name,
+        entityName,
         _fullSchema: schema,
         _mockData: mockData
       }
     });
-  }
-  for (const entry of uiTransitions) {
+  });
+  groupedBehaviors.forEach((group, i) => {
+    const t = group.representative.transition;
+    const nodeId = `${orbitalName}-behavior-${group.alias}`;
+    const idx = transitionEntries.length + i;
+    const col = idx % cols;
+    const row = Math.floor(idx / cols);
+    nodes.push({
+      id: nodeId,
+      type: "preview",
+      position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
+      data: {
+        orbitalName,
+        traitName: group.representative.traitName,
+        stateName: t.to,
+        transitionEvent: t.event,
+        fromState: t.from,
+        toState: t.to,
+        patterns: group.representative.patterns,
+        eventSources: group.representative.eventSources,
+        stateRole: detectStateRole(
+          t.to,
+          group.representative.states,
+          group.representative.allTransitions
+        ),
+        effectTypes: t.effects ? extractEffectTypes(t.effects) : [],
+        guard: t.guard,
+        entityName,
+        _fullSchema: schema,
+        _mockData: mockData,
+        behaviorAlias: group.alias,
+        behaviorName: group.behaviorName,
+        transitionCount: group.transitionCount
+      }
+    });
+  });
+  for (const entry of transitions) {
     const t = entry.transition;
     const sourceKey = `${entry.traitName}:${t.from}`;
     const targetKey = `${entry.traitName}:${t.to}`;
@@ -57697,6 +57732,66 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
   }
   return { nodes, edges };
 }
+function orbitalToExpandedGraph(schema, orbitalName, mockData) {
+  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
+  if (!orbital) return { nodes: [], edges: [] };
+  const entityInfo = getEntityInfo(orbital);
+  const organismTransitions = collectUITransitions(
+    orbital,
+    (trait) => trait.sourceBehavior === void 0
+  );
+  const aliasBuckets = /* @__PURE__ */ new Map();
+  const importedTransitions = collectUITransitions(
+    orbital,
+    (trait) => trait.sourceBehavior !== void 0
+  );
+  for (const entry of importedTransitions) {
+    const sb = entry.trait.sourceBehavior;
+    if (!sb) continue;
+    const bucket = aliasBuckets.get(sb.alias);
+    if (bucket) {
+      bucket.transitions.push(entry);
+    } else {
+      aliasBuckets.set(sb.alias, {
+        behaviorName: sb.behavior,
+        transitions: [entry]
+      });
+    }
+  }
+  const groupedBehaviors = Array.from(aliasBuckets.entries()).map(
+    ([alias, bucket]) => ({
+      alias,
+      behaviorName: bucket.behaviorName,
+      representative: bucket.transitions[0],
+      transitionCount: bucket.transitions.length
+    })
+  );
+  return buildScreenGraph(
+    schema,
+    orbitalName,
+    entityInfo.name,
+    organismTransitions,
+    groupedBehaviors,
+    mockData
+  );
+}
+function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
+  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
+  if (!orbital) return { nodes: [], edges: [] };
+  const entityInfo = getEntityInfo(orbital);
+  const transitions = collectUITransitions(
+    orbital,
+    (trait) => trait.sourceBehavior?.alias === alias
+  );
+  return buildScreenGraph(
+    schema,
+    orbitalName,
+    entityInfo.name,
+    transitions,
+    [],
+    mockData
+  );
+}
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_Box();
@@ -59371,6 +59466,25 @@ function buildMockData(schema) {
     );
     result[entityName] = rows;
   }
+  for (const orbital of schema.orbitals) {
+    for (const traitRef of orbital.traits ?? []) {
+      if (typeof traitRef === "string") continue;
+      if (!("stateMachine" in traitRef)) continue;
+      const trait = traitRef;
+      const sourceEntity = trait.sourceEntityDefinition;
+      if (!sourceEntity || core.isEntityCall(sourceEntity)) continue;
+      const sourceName = sourceEntity.name;
+      if (!sourceName || result[sourceName]) continue;
+      if (sourceEntity.instances && sourceEntity.instances.length > 0) {
+        result[sourceName] = sourceEntity.instances;
+        continue;
+      }
+      result[sourceName] = Array.from(
+        { length: 10 },
+        (_, i) => generateEntityRow(sourceEntity, i + 1)
+      );
+    }
+  }
   perfEnd("build-mock-data", t, { orbitalCount: schema.orbitals.length, entityCount: Object.keys(result).length });
   return result;
 }
@@ -60336,12 +60450,13 @@ var OrbPreviewNodeInner = (props) => {
   const eventSources = data.eventSources ?? [];
   const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
   const isExpanded = Boolean(data.traitName);
+  const isImportedGroup = Boolean(data.behaviorAlias);
   const status = data.status ?? "idle";
   const isRunning = status === "running";
   const isSuccess = status === "success";
   const isError = status === "error";
-  const label = isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
-  const sublabel = isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
+  const label = isImportedGroup ? data.behaviorAlias ?? "" : isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
+  const sublabel = isImportedGroup ? `${data.behaviorName ?? ""}${typeof data.transitionCount === "number" && data.transitionCount > 1 ? ` \xB7 ${data.transitionCount} screens` : ""}` : isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
   const orbitalSchema = React96.useMemo(() => {
     const fullSchema = data._fullSchema;
     if (!fullSchema) return void 0;
@@ -61760,6 +61875,7 @@ function FlowCanvasInner({
   const [expandedOrbital, setExpandedOrbital] = React96.useState(
     initialOrbital
   );
+  const [expandedBehaviorAlias, setExpandedBehaviorAlias] = React96.useState(void 0);
   const screenSizeUserOverrideRef = React96__namespace.default.useRef(false);
   const [screenSize, setScreenSize] = React96.useState(
     () => typeof window === "undefined" ? "laptop" : detectScreenSize(window.innerWidth)
@@ -61787,15 +61903,17 @@ function FlowCanvasInner({
     }
   }), [selectedPattern]);
   const [atBehaviorLevel, setAtBehaviorLevel] = React96.useState(composeLevel === "behavior");
-  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = React96.useMemo(() => {
+  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges } = React96.useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
     const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
+    const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
       overviewNodes: overview.nodes.length,
       expandedNodes: expanded.nodes.length,
+      behaviorExpandedNodes: behaviorExpanded.nodes.length,
       orbitalCount: parsedSchema.orbitals?.length ?? 0
     });
     return {
@@ -61804,11 +61922,13 @@ function FlowCanvasInner({
       overviewNodes: overview.nodes,
       overviewEdges: overview.edges,
       expandedNodes: expanded.nodes,
-      expandedEdges: expanded.edges
+      expandedEdges: expanded.edges,
+      behaviorExpandedNodes: behaviorExpanded.nodes,
+      behaviorExpandedEdges: behaviorExpanded.edges
     };
-  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
-  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
-  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
+  }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
+  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : expandedNodes;
+  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = react.useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = react.useEdgesState(activeEdges);
   const reactFlow = react.useReactFlow();
@@ -61847,6 +61967,15 @@ function FlowCanvasInner({
       onLevelChange?.("expanded", orbitalName);
       return;
     }
+    if (level === "expanded") {
+      const d = node.data;
+      if (d.behaviorAlias && d.orbitalName) {
+        setExpandedBehaviorAlias(d.behaviorAlias);
+        setLevel("behavior-expanded");
+        onLevelChange?.("behavior-expanded", d.orbitalName);
+        return;
+      }
+    }
     if (level === "expanded") {
       const d = node.data;
       const orbitalName = d.orbitalName ?? node.id;
@@ -61881,6 +62010,10 @@ function FlowCanvasInner({
     if (e.key === "Escape") {
       if (selectedNode) {
         setSelectedNode(null);
+      } else if (level === "behavior-expanded") {
+        setLevel("expanded");
+        setExpandedBehaviorAlias(void 0);
+        onLevelChange?.("expanded", expandedOrbital);
       } else if (level === "expanded") {
         setLevel("overview");
         setExpandedOrbital(void 0);
@@ -61897,7 +62030,7 @@ function FlowCanvasInner({
         setSelectedPattern(null);
       }
     }
-  }, [level, onLevelChange, selectedNode, selectedPattern, onPatternDelete]);
+  }, [level, onLevelChange, selectedNode, selectedPattern, onPatternDelete, atBehaviorLevel, composeLevel, expandedOrbital]);
   React96.useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
@@ -61905,6 +62038,11 @@ function FlowCanvasInner({
   const handleGoBack = React96.useCallback(() => {
     if (selectedNode) {
       setSelectedNode(null);
+    } else if (level === "behavior-expanded") {
+      setLevel("expanded");
+      setExpandedBehaviorAlias(void 0);
+      setSelectedNode(null);
+      onLevelChange?.("expanded", expandedOrbital);
     } else if (level === "expanded") {
       setLevel("overview");
       setExpandedOrbital(void 0);
@@ -61915,7 +62053,7 @@ function FlowCanvasInner({
       setExpandedOrbital(void 0);
       setSelectedNode(null);
     }
-  }, [level, onLevelChange, selectedNode, composeLevel, atBehaviorLevel]);
+  }, [level, onLevelChange, selectedNode, composeLevel, atBehaviorLevel, expandedOrbital]);
   const eventBus = useEventBus();
   const handleConnect = React96.useCallback((connection) => {
     if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;

package/dist/avl/index.d.cts

@@ -830,8 +830,18 @@ declare const AvlBindingEdge: React__default.FC<EdgeProps>;
  * Uses @almadar/core types for schema-level constructs.
  */
 
-/** The two navigation levels of the FlowCanvas. */
-type ViewLevel = 'overview' | 'expanded';
+/**
+ * The navigation levels of the FlowCanvas.
+ *
+ * - `overview` (L1) — one card per orbital, showing the orbital's composed
+ *   render-ui at INIT.
+ * - `expanded` (L2) — one card per organism-authored transition + one
+ *   grouped card per imported-behavior alias.
+ * - `behavior-expanded` (L3) — drilled into a single imported behavior at
+ *   L2: one card per transition of THAT behavior. Used to inspect what an
+ *   import contributes without leaving the canvas.
+ */
+type ViewLevel = 'overview' | 'expanded' | 'behavior-expanded';
 /**
  * An interactive element inside a render-ui pattern that fires an event.
  * For example, a button with `event: "CHECKOUT"` is an event source.
@@ -923,6 +933,27 @@ interface PreviewNodeData extends Record<string, unknown> {
      * "project schema".
      */
     sourceSchemaName?: string;
+    /**
+     * Set when this L2 card represents a grouped imported-behavior bucket
+     * (one card per `uses[]` alias instead of one per transition). The alias
+     * comes from `Trait.sourceBehavior.alias` populated by the inline phase.
+     * Double-clicking such a card drills into L3 (`behavior-expanded`) to
+     * see that alias's transitions.
+     *
+     * Absent on organism-authored transition cards and L1 overview cards.
+     */
+    behaviorAlias?: string;
+    /**
+     * Human-readable behavior name for a grouped imported-behavior card
+     * (e.g. `'std/behaviors/std-stat-card'`). Comes from
+     * `Trait.sourceBehavior.behavior`. Renderer surfaces it as a label.
+     */
+    behaviorName?: string;
+    /**
+     * How many transitions are collapsed into this grouped imported-behavior
+     * card. Renderer can surface it as a "+N screens" badge.
+     */
+    transitionCount?: number;
 }
 /** Data for event flow edges. */
 interface EventEdgeData extends Record<string, unknown> {
@@ -975,10 +1006,15 @@ declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<
     edges: Edge<EventEdgeData>[];
 };
 /**
- * Build a React Flow graph for the expanded level.
- * Each transition with a render-ui effect gets a node.
- * Edges connect from the specific button/pattern that fires the event
- * to the target screen node.
+ * Build a React Flow graph for the L2 (expanded) level.
+ *
+ * Organism-authored traits (no `sourceBehavior` metadata) emit one
+ * transition card per render-ui-bearing transition (the historical
+ * behavior). Imported traits (cloned by the inline phase from `uses[]`)
+ * collapse into one grouped card per `sourceBehavior.alias`, so the user
+ * sees `Stats`, `Graphs`, `Layout`, etc. as single cards rather than 9
+ * anonymous `INIT` peers (STUDIO-1). Drill into a grouped card to reach
+ * L3 (`orbitalAliasToExpandedGraph`).
  */
 declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>): {
     nodes: Node<PreviewNodeData>[];

package/dist/avl/index.js

@@ -57554,46 +57554,46 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbit
   }
   return { nodes, edges };
 }
-function orbitalToExpandedGraph(schema, orbitalName, mockData) {
-  const nodes = [];
-  const edges = [];
-  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
-  if (!orbital) return { nodes, edges };
-  const entityInfo = getEntityInfo(orbital);
-  const traits2 = getTraits2(orbital);
-  const uiTransitions = [];
-  for (const trait of traits2) {
+function collectUITransitions(orbital, filter) {
+  const out = [];
+  for (const trait of getTraits2(orbital)) {
+    if (!filter(trait)) continue;
     const sm = getStateMachine2(trait);
     if (!sm) continue;
     for (const t of sm.transitions) {
       if (!t.effects) continue;
       const patterns = extractRenderUI(t.effects);
-      if (patterns.length > 0) {
-        uiTransitions.push({
-          traitName: trait.name,
-          transition: t,
-          patterns,
-          eventSources: collectEventSources(patterns),
-          states: sm.states,
-          allTransitions: sm.transitions
-        });
-      }
+      if (patterns.length === 0) continue;
+      out.push({
+        trait,
+        traitName: trait.name,
+        transition: t,
+        patterns,
+        eventSources: collectEventSources(patterns),
+        states: sm.states,
+        allTransitions: sm.transitions
+      });
     }
   }
-  if (uiTransitions.length === 0) return { nodes, edges };
+  return out;
+}
+function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
+  const nodes = [];
+  const edges = [];
   const stateNodeMap = /* @__PURE__ */ new Map();
-  for (const entry of uiTransitions) {
+  for (const entry of transitions) {
     const key = `${entry.traitName}:${entry.transition.to}`;
     const existing = stateNodeMap.get(key);
     if (!existing || entry.patterns.length > existing.patterns.length) {
       stateNodeMap.set(key, entry);
     }
   }
-  const entries = Array.from(stateNodeMap.values());
-  const cols = Math.min(entries.length, 3);
+  const transitionEntries = Array.from(stateNodeMap.values());
+  const totalCards = transitionEntries.length + groupedBehaviors.length;
+  if (totalCards === 0) return { nodes, edges };
+  const cols = Math.min(totalCards, 3);
   const nodeIdMap = /* @__PURE__ */ new Map();
-  for (let i = 0; i < entries.length; i++) {
-    const entry = entries[i];
+  transitionEntries.forEach((entry, i) => {
     const t = entry.transition;
     const nodeId = `${orbitalName}-${entry.traitName}-${t.event}-${t.to}`;
     const stateKey = `${entry.traitName}:${t.to}`;
@@ -57616,13 +57616,48 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
         stateRole: detectStateRole(t.to, entry.states, entry.allTransitions),
         effectTypes: t.effects ? extractEffectTypes(t.effects) : [],
         guard: t.guard,
-        entityName: entityInfo.name,
+        entityName,
         _fullSchema: schema,
         _mockData: mockData
       }
     });
-  }
-  for (const entry of uiTransitions) {
+  });
+  groupedBehaviors.forEach((group, i) => {
+    const t = group.representative.transition;
+    const nodeId = `${orbitalName}-behavior-${group.alias}`;
+    const idx = transitionEntries.length + i;
+    const col = idx % cols;
+    const row = Math.floor(idx / cols);
+    nodes.push({
+      id: nodeId,
+      type: "preview",
+      position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
+      data: {
+        orbitalName,
+        traitName: group.representative.traitName,
+        stateName: t.to,
+        transitionEvent: t.event,
+        fromState: t.from,
+        toState: t.to,
+        patterns: group.representative.patterns,
+        eventSources: group.representative.eventSources,
+        stateRole: detectStateRole(
+          t.to,
+          group.representative.states,
+          group.representative.allTransitions
+        ),
+        effectTypes: t.effects ? extractEffectTypes(t.effects) : [],
+        guard: t.guard,
+        entityName,
+        _fullSchema: schema,
+        _mockData: mockData,
+        behaviorAlias: group.alias,
+        behaviorName: group.behaviorName,
+        transitionCount: group.transitionCount
+      }
+    });
+  });
+  for (const entry of transitions) {
     const t = entry.transition;
     const sourceKey = `${entry.traitName}:${t.from}`;
     const targetKey = `${entry.traitName}:${t.to}`;
@@ -57651,6 +57686,66 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
   }
   return { nodes, edges };
 }
+function orbitalToExpandedGraph(schema, orbitalName, mockData) {
+  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
+  if (!orbital) return { nodes: [], edges: [] };
+  const entityInfo = getEntityInfo(orbital);
+  const organismTransitions = collectUITransitions(
+    orbital,
+    (trait) => trait.sourceBehavior === void 0
+  );
+  const aliasBuckets = /* @__PURE__ */ new Map();
+  const importedTransitions = collectUITransitions(
+    orbital,
+    (trait) => trait.sourceBehavior !== void 0
+  );
+  for (const entry of importedTransitions) {
+    const sb = entry.trait.sourceBehavior;
+    if (!sb) continue;
+    const bucket = aliasBuckets.get(sb.alias);
+    if (bucket) {
+      bucket.transitions.push(entry);
+    } else {
+      aliasBuckets.set(sb.alias, {
+        behaviorName: sb.behavior,
+        transitions: [entry]
+      });
+    }
+  }
+  const groupedBehaviors = Array.from(aliasBuckets.entries()).map(
+    ([alias, bucket]) => ({
+      alias,
+      behaviorName: bucket.behaviorName,
+      representative: bucket.transitions[0],
+      transitionCount: bucket.transitions.length
+    })
+  );
+  return buildScreenGraph(
+    schema,
+    orbitalName,
+    entityInfo.name,
+    organismTransitions,
+    groupedBehaviors,
+    mockData
+  );
+}
+function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
+  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
+  if (!orbital) return { nodes: [], edges: [] };
+  const entityInfo = getEntityInfo(orbital);
+  const transitions = collectUITransitions(
+    orbital,
+    (trait) => trait.sourceBehavior?.alias === alias
+  );
+  return buildScreenGraph(
+    schema,
+    orbitalName,
+    entityInfo.name,
+    transitions,
+    [],
+    mockData
+  );
+}
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_Box();
@@ -59325,6 +59420,25 @@ function buildMockData(schema) {
     );
     result[entityName] = rows;
   }
+  for (const orbital of schema.orbitals) {
+    for (const traitRef of orbital.traits ?? []) {
+      if (typeof traitRef === "string") continue;
+      if (!("stateMachine" in traitRef)) continue;
+      const trait = traitRef;
+      const sourceEntity = trait.sourceEntityDefinition;
+      if (!sourceEntity || isEntityCall(sourceEntity)) continue;
+      const sourceName = sourceEntity.name;
+      if (!sourceName || result[sourceName]) continue;
+      if (sourceEntity.instances && sourceEntity.instances.length > 0) {
+        result[sourceName] = sourceEntity.instances;
+        continue;
+      }
+      result[sourceName] = Array.from(
+        { length: 10 },
+        (_, i) => generateEntityRow(sourceEntity, i + 1)
+      );
+    }
+  }
   perfEnd("build-mock-data", t, { orbitalCount: schema.orbitals.length, entityCount: Object.keys(result).length });
   return result;
 }
@@ -60290,12 +60404,13 @@ var OrbPreviewNodeInner = (props) => {
   const eventSources = data.eventSources ?? [];
   const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
   const isExpanded = Boolean(data.traitName);
+  const isImportedGroup = Boolean(data.behaviorAlias);
   const status = data.status ?? "idle";
   const isRunning = status === "running";
   const isSuccess = status === "success";
   const isError = status === "error";
-  const label = isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
-  const sublabel = isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
+  const label = isImportedGroup ? data.behaviorAlias ?? "" : isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
+  const sublabel = isImportedGroup ? `${data.behaviorName ?? ""}${typeof data.transitionCount === "number" && data.transitionCount > 1 ? ` \xB7 ${data.transitionCount} screens` : ""}` : isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
   const orbitalSchema = useMemo(() => {
     const fullSchema = data._fullSchema;
     if (!fullSchema) return void 0;
@@ -61714,6 +61829,7 @@ function FlowCanvasInner({
   const [expandedOrbital, setExpandedOrbital] = useState(
     initialOrbital
   );
+  const [expandedBehaviorAlias, setExpandedBehaviorAlias] = useState(void 0);
   const screenSizeUserOverrideRef = React96__default.useRef(false);
   const [screenSize, setScreenSize] = useState(
     () => typeof window === "undefined" ? "laptop" : detectScreenSize(window.innerWidth)
@@ -61741,15 +61857,17 @@ function FlowCanvasInner({
     }
   }), [selectedPattern]);
   const [atBehaviorLevel, setAtBehaviorLevel] = useState(composeLevel === "behavior");
-  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = useMemo(() => {
+  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges } = useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
     const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
+    const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
       overviewNodes: overview.nodes.length,
       expandedNodes: expanded.nodes.length,
+      behaviorExpandedNodes: behaviorExpanded.nodes.length,
       orbitalCount: parsedSchema.orbitals?.length ?? 0
     });
     return {
@@ -61758,11 +61876,13 @@ function FlowCanvasInner({
       overviewNodes: overview.nodes,
       overviewEdges: overview.edges,
       expandedNodes: expanded.nodes,
-      expandedEdges: expanded.edges
+      expandedEdges: expanded.edges,
+      behaviorExpandedNodes: behaviorExpanded.nodes,
+      behaviorExpandedEdges: behaviorExpanded.edges
     };
-  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
-  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
-  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
+  }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
+  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : expandedNodes;
+  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(activeEdges);
   const reactFlow = useReactFlow();
@@ -61801,6 +61921,15 @@ function FlowCanvasInner({
       onLevelChange?.("expanded", orbitalName);
       return;
     }
+    if (level === "expanded") {
+      const d = node.data;
+      if (d.behaviorAlias && d.orbitalName) {
+        setExpandedBehaviorAlias(d.behaviorAlias);
+        setLevel("behavior-expanded");
+        onLevelChange?.("behavior-expanded", d.orbitalName);
+        return;
+      }
+    }
     if (level === "expanded") {
       const d = node.data;
       const orbitalName = d.orbitalName ?? node.id;
@@ -61835,6 +61964,10 @@ function FlowCanvasInner({
     if (e.key === "Escape") {
       if (selectedNode) {
         setSelectedNode(null);
+      } else if (level === "behavior-expanded") {
+        setLevel("expanded");
+        setExpandedBehaviorAlias(void 0);
+        onLevelChange?.("expanded", expandedOrbital);
       } else if (level === "expanded") {
         setLevel("overview");
         setExpandedOrbital(void 0);
@@ -61851,7 +61984,7 @@ function FlowCanvasInner({
         setSelectedPattern(null);
       }
     }
-  }, [level, onLevelChange, selectedNode, selectedPattern, onPatternDelete]);
+  }, [level, onLevelChange, selectedNode, selectedPattern, onPatternDelete, atBehaviorLevel, composeLevel, expandedOrbital]);
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
@@ -61859,6 +61992,11 @@ function FlowCanvasInner({
   const handleGoBack = useCallback(() => {
     if (selectedNode) {
       setSelectedNode(null);
+    } else if (level === "behavior-expanded") {
+      setLevel("expanded");
+      setExpandedBehaviorAlias(void 0);
+      setSelectedNode(null);
+      onLevelChange?.("expanded", expandedOrbital);
     } else if (level === "expanded") {
       setLevel("overview");
       setExpandedOrbital(void 0);
@@ -61869,7 +62007,7 @@ function FlowCanvasInner({
       setExpandedOrbital(void 0);
       setSelectedNode(null);
     }
-  }, [level, onLevelChange, selectedNode, composeLevel, atBehaviorLevel]);
+  }, [level, onLevelChange, selectedNode, composeLevel, atBehaviorLevel, expandedOrbital]);
   const eventBus = useEventBus();
   const handleConnect = useCallback((connection) => {
     if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;

package/dist/components/molecules/avl/avl-preview-converter.d.ts

@@ -26,12 +26,28 @@ export declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?:
     edges: Edge<EventEdgeData>[];
 };
 /**
- * Build a React Flow graph for the expanded level.
- * Each transition with a render-ui effect gets a node.
- * Edges connect from the specific button/pattern that fires the event
- * to the target screen node.
+ * Build a React Flow graph for the L2 (expanded) level.
+ *
+ * Organism-authored traits (no `sourceBehavior` metadata) emit one
+ * transition card per render-ui-bearing transition (the historical
+ * behavior). Imported traits (cloned by the inline phase from `uses[]`)
+ * collapse into one grouped card per `sourceBehavior.alias`, so the user
+ * sees `Stats`, `Graphs`, `Layout`, etc. as single cards rather than 9
+ * anonymous `INIT` peers (STUDIO-1). Drill into a grouped card to reach
+ * L3 (`orbitalAliasToExpandedGraph`).
  */
 export declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };
+/**
+ * Build a React Flow graph for the L3 (`behavior-expanded`) level: drill
+ * into one imported-behavior alias on an orbital and show ITS render-ui
+ * transitions as individual cards. Same converter logic as
+ * `orbitalToExpandedGraph` but scoped to traits where
+ * `sourceBehavior.alias === alias`. STUDIO-1.
+ */
+export declare function orbitalAliasToExpandedGraph(schema: OrbitalSchema, orbitalName: string, alias: string, mockData?: Record<string, unknown[]>): {
+    nodes: Node<PreviewNodeData>[];
+    edges: Edge<EventEdgeData>[];
+};

package/dist/components/molecules/avl/avl-preview-types.d.ts

@@ -8,8 +8,18 @@
  * Uses @almadar/core types for schema-level constructs.
  */
 import type { Expression, UISlot } from '@almadar/core';
-/** The two navigation levels of the FlowCanvas. */
-export type ViewLevel = 'overview' | 'expanded';
+/**
+ * The navigation levels of the FlowCanvas.
+ *
+ * - `overview` (L1) — one card per orbital, showing the orbital's composed
+ *   render-ui at INIT.
+ * - `expanded` (L2) — one card per organism-authored transition + one
+ *   grouped card per imported-behavior alias.
+ * - `behavior-expanded` (L3) — drilled into a single imported behavior at
+ *   L2: one card per transition of THAT behavior. Used to inspect what an
+ *   import contributes without leaving the canvas.
+ */
+export type ViewLevel = 'overview' | 'expanded' | 'behavior-expanded';
 /**
  * Screen size preset for OrbPreview rendering inside nodes.
  *
@@ -131,6 +141,27 @@ export interface PreviewNodeData extends Record<string, unknown> {
      * "project schema".
      */
     sourceSchemaName?: string;
+    /**
+     * Set when this L2 card represents a grouped imported-behavior bucket
+     * (one card per `uses[]` alias instead of one per transition). The alias
+     * comes from `Trait.sourceBehavior.alias` populated by the inline phase.
+     * Double-clicking such a card drills into L3 (`behavior-expanded`) to
+     * see that alias's transitions.
+     *
+     * Absent on organism-authored transition cards and L1 overview cards.
+     */
+    behaviorAlias?: string;
+    /**
+     * Human-readable behavior name for a grouped imported-behavior card
+     * (e.g. `'std/behaviors/std-stat-card'`). Comes from
+     * `Trait.sourceBehavior.behavior`. Renderer surfaces it as a label.
+     */
+    behaviorName?: string;
+    /**
+     * How many transitions are collapsed into this grouped imported-behavior
+     * card. Renderer can surface it as a "+N screens" badge.
+     */
+    transitionCount?: number;
 }
 /** Data for event flow edges. */
 export interface EventEdgeData extends Record<string, unknown> {

package/dist/runtime/index.cjs

@@ -47255,6 +47255,25 @@ function buildMockData(schema) {
     );
     result[entityName] = rows;
   }
+  for (const orbital of schema.orbitals) {
+    for (const traitRef of orbital.traits ?? []) {
+      if (typeof traitRef === "string") continue;
+      if (!("stateMachine" in traitRef)) continue;
+      const trait = traitRef;
+      const sourceEntity = trait.sourceEntityDefinition;
+      if (!sourceEntity || core.isEntityCall(sourceEntity)) continue;
+      const sourceName = sourceEntity.name;
+      if (!sourceName || result[sourceName]) continue;
+      if (sourceEntity.instances && sourceEntity.instances.length > 0) {
+        result[sourceName] = sourceEntity.instances;
+        continue;
+      }
+      result[sourceName] = Array.from(
+        { length: 10 },
+        (_, i) => generateEntityRow(sourceEntity, i + 1)
+      );
+    }
+  }
   perfEnd("build-mock-data", t, { orbitalCount: schema.orbitals.length, entityCount: Object.keys(result).length });
   return result;
 }

package/dist/runtime/index.js

@@ -47209,6 +47209,25 @@ function buildMockData(schema) {
     );
     result[entityName] = rows;
   }
+  for (const orbital of schema.orbitals) {
+    for (const traitRef of orbital.traits ?? []) {
+      if (typeof traitRef === "string") continue;
+      if (!("stateMachine" in traitRef)) continue;
+      const trait = traitRef;
+      const sourceEntity = trait.sourceEntityDefinition;
+      if (!sourceEntity || isEntityCall(sourceEntity)) continue;
+      const sourceName = sourceEntity.name;
+      if (!sourceName || result[sourceName]) continue;
+      if (sourceEntity.instances && sourceEntity.instances.length > 0) {
+        result[sourceName] = sourceEntity.instances;
+        continue;
+      }
+      result[sourceName] = Array.from(
+        { length: 10 },
+        (_, i) => generateEntityRow(sourceEntity, i + 1)
+      );
+    }
+  }
   perfEnd("build-mock-data", t, { orbitalCount: schema.orbitals.length, entityCount: Object.keys(result).length });
   return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.53.7",
+  "version": "4.54.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -129,7 +129,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@almadar/core": ">=7.13.0",
+    "@almadar/core": "^7.16.0",
     "@almadar/evaluator": ">=2.9.2",
     "@almadar/logger": "^1.3.0",
     "@almadar/patterns": "^2.26.0",
@@ -167,7 +167,6 @@
   },
   "devDependencies": {
     "@almadar/eslint-plugin": ">=2.3.0",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
     "@react-three/postprocessing": "3.0.4",
@@ -176,6 +175,7 @@
     "@storybook/addon-themes": "^10.2.6",
     "@storybook/react": "^10.2.6",
     "@storybook/react-vite": "^10.2.6",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-query": "^5.0.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.2.0",