@almadar/ui 4.54.10 → 4.54.12

package/dist/avl/index.cjs

@@ -57651,24 +57651,26 @@ function collectUITransitions(orbital, filter) {
 function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
   const nodes = [];
   const edges = [];
-  const stateNodeMap = /* @__PURE__ */ new Map();
+  const stateRepresentativeMap = /* @__PURE__ */ new Map();
   for (const entry of transitions) {
     const key = `${entry.traitName}:${entry.transition.to}`;
-    const existing = stateNodeMap.get(key);
+    const existing = stateRepresentativeMap.get(key);
     if (!existing || entry.patterns.length > existing.patterns.length) {
-      stateNodeMap.set(key, entry);
+      stateRepresentativeMap.set(key, entry);
     }
   }
-  const transitionEntries = Array.from(stateNodeMap.values());
+  const transitionEntries = transitions;
   const totalCards = transitionEntries.length + groupedBehaviors.length;
   if (totalCards === 0) return { nodes, edges };
   const cols = Math.min(totalCards, 3);
   const nodeIdMap = /* @__PURE__ */ new Map();
   transitionEntries.forEach((entry, i) => {
     const t = entry.transition;
-    const nodeId = `${orbitalName}-${entry.traitName}-${t.event}-${t.to}`;
+    const nodeId = `${orbitalName}-${entry.traitName}-${t.event}-${t.from}-${t.to}`;
     const stateKey = `${entry.traitName}:${t.to}`;
-    nodeIdMap.set(stateKey, nodeId);
+    if (stateRepresentativeMap.get(stateKey) === entry) {
+      nodeIdMap.set(stateKey, nodeId);
+    }
     const col = i % cols;
     const row = Math.floor(i / cols);
     nodes.push({
@@ -57737,7 +57739,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
     if (!sourceNodeId || !targetNodeId) continue;
     if (sourceNodeId === targetNodeId) continue;
     const backward = isBackwardTransition(t.from, t.to, entry.states);
-    const sourceEntry = stateNodeMap.get(sourceKey);
+    const sourceEntry = stateRepresentativeMap.get(sourceKey);
     const triggerSource = sourceEntry?.eventSources.find((s) => s.event === t.event);
     edges.push({
       id: `ef-${entry.traitName}-${t.event}-${t.from}-${t.to}`,
@@ -60840,7 +60842,26 @@ var OrbPreviewNodeInner = (props) => {
             ref: setContentRef,
             className: `orb-preview-live nodrag${dragActive || l2IsOver ? " drag-active" : ""}`,
             onClick: handleContentClick,
-            children: orbitalSchema ? /* @__PURE__ */ jsxRuntime.jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: orbitalSchema ? isExpanded ? (
+              // L2 transition card: OrbPreview's `<Box style={{height}}>` is the
+              // only positioned ancestor with a resolved height inside the
+              // runtime tree. When the synthesized transition's render-ui
+              // targets `modal`/`drawer`/`overlay`, UISlotRenderer paints them
+              // via `renderContainedPortal` as `absolute inset-0` — which
+              // collapses to 0 when the parent chain is `height: auto` →
+              // `min-h-full` (no resolved height to inherit). Forcing a real
+              // pixel height here gives the contained modal a real card to
+              // fill, so the L2 preview shows the modal panel sized to the
+              // card instead of a tiny floating rectangle.
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BrowserPlayground,
+                {
+                  schema: orbitalSchema,
+                  mode: "mock",
+                  height: `${preset.minHeight}px`
+                }
+              )
+            ) : /* @__PURE__ */ jsxRuntime.jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
               BrowserPlayground,
               {
                 schema: orbitalSchema,

package/dist/avl/index.js

@@ -57605,24 +57605,26 @@ function collectUITransitions(orbital, filter) {
 function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
   const nodes = [];
   const edges = [];
-  const stateNodeMap = /* @__PURE__ */ new Map();
+  const stateRepresentativeMap = /* @__PURE__ */ new Map();
   for (const entry of transitions) {
     const key = `${entry.traitName}:${entry.transition.to}`;
-    const existing = stateNodeMap.get(key);
+    const existing = stateRepresentativeMap.get(key);
     if (!existing || entry.patterns.length > existing.patterns.length) {
-      stateNodeMap.set(key, entry);
+      stateRepresentativeMap.set(key, entry);
     }
   }
-  const transitionEntries = Array.from(stateNodeMap.values());
+  const transitionEntries = transitions;
   const totalCards = transitionEntries.length + groupedBehaviors.length;
   if (totalCards === 0) return { nodes, edges };
   const cols = Math.min(totalCards, 3);
   const nodeIdMap = /* @__PURE__ */ new Map();
   transitionEntries.forEach((entry, i) => {
     const t = entry.transition;
-    const nodeId = `${orbitalName}-${entry.traitName}-${t.event}-${t.to}`;
+    const nodeId = `${orbitalName}-${entry.traitName}-${t.event}-${t.from}-${t.to}`;
     const stateKey = `${entry.traitName}:${t.to}`;
-    nodeIdMap.set(stateKey, nodeId);
+    if (stateRepresentativeMap.get(stateKey) === entry) {
+      nodeIdMap.set(stateKey, nodeId);
+    }
     const col = i % cols;
     const row = Math.floor(i / cols);
     nodes.push({
@@ -57691,7 +57693,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
     if (!sourceNodeId || !targetNodeId) continue;
     if (sourceNodeId === targetNodeId) continue;
     const backward = isBackwardTransition(t.from, t.to, entry.states);
-    const sourceEntry = stateNodeMap.get(sourceKey);
+    const sourceEntry = stateRepresentativeMap.get(sourceKey);
     const triggerSource = sourceEntry?.eventSources.find((s) => s.event === t.event);
     edges.push({
       id: `ef-${entry.traitName}-${t.event}-${t.from}-${t.to}`,
@@ -60794,7 +60796,26 @@ var OrbPreviewNodeInner = (props) => {
             ref: setContentRef,
             className: `orb-preview-live nodrag${dragActive || l2IsOver ? " drag-active" : ""}`,
             onClick: handleContentClick,
-            children: orbitalSchema ? /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
+            children: orbitalSchema ? isExpanded ? (
+              // L2 transition card: OrbPreview's `<Box style={{height}}>` is the
+              // only positioned ancestor with a resolved height inside the
+              // runtime tree. When the synthesized transition's render-ui
+              // targets `modal`/`drawer`/`overlay`, UISlotRenderer paints them
+              // via `renderContainedPortal` as `absolute inset-0` — which
+              // collapses to 0 when the parent chain is `height: auto` →
+              // `min-h-full` (no resolved height to inherit). Forcing a real
+              // pixel height here gives the contained modal a real card to
+              // fill, so the L2 preview shows the modal panel sized to the
+              // card instead of a tiny floating rectangle.
+              /* @__PURE__ */ jsx(
+                BrowserPlayground,
+                {
+                  schema: orbitalSchema,
+                  mode: "mock",
+                  height: `${preset.minHeight}px`
+                }
+              )
+            ) : /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
               BrowserPlayground,
               {
                 schema: orbitalSchema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.54.10",
+  "version": "4.54.12",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [