@almadar/ui 6.20.0 → 6.22.0

package/dist/avl/index.cjs

@@ -5398,6 +5398,36 @@ var init_Dialog = __esm({
     Dialog.displayName = "Dialog";
   }
 });
+
+// lib/portalRoot.ts
+function lastThemedElement(selector, portalRoot) {
+  const matches = Array.from(document.querySelectorAll(selector)).filter(
+    (el) => el !== document.documentElement && el !== portalRoot
+  );
+  return matches[matches.length - 1] ?? null;
+}
+function getOrCreatePortalRoot() {
+  let root = document.getElementById("ui-slot-portal-root");
+  if (!root) {
+    root = document.createElement("div");
+    root.id = "ui-slot-portal-root";
+    root.style.position = "relative";
+    root.style.zIndex = "9999";
+    document.body.appendChild(root);
+  }
+  const themed = lastThemedElement('[data-theme*="-"]', root) ?? lastThemedElement("[data-theme]", root);
+  if (themed) {
+    const theme = themed.getAttribute("data-theme");
+    if (theme && root.getAttribute("data-theme") !== theme) {
+      root.setAttribute("data-theme", theme);
+    }
+  }
+  return root;
+}
+var init_portalRoot = __esm({
+  "lib/portalRoot.ts"() {
+  }
+});
 function isMotionEnabled() {
   if (typeof document === "undefined") return true;
   if (motionEnabledCache !== null) return motionEnabledCache;
@@ -5478,6 +5508,7 @@ var init_Modal = __esm({
     init_Dialog();
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     init_Presence();
     sizeClasses2 = {
@@ -5688,7 +5719,7 @@ var init_Modal = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     Modal.displayName = "Modal";
@@ -23054,6 +23085,7 @@ var init_StateMachineView = __esm({
     init_Icon();
     init_useEventBus();
     init_cn();
+    init_portalRoot();
     StateNode2 = ({ state, config }) => {
       const { t } = hooks.useTranslate();
       const size = state.radius * 2;
@@ -23570,7 +23602,7 @@ var init_StateMachineView = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     EntityBox = ({ entity, config }) => {
@@ -30211,7 +30243,7 @@ function SubMenu({
       })
     }
   );
-  return typeof document !== "undefined" ? reactDom.createPortal(panel, document.body) : panel;
+  return typeof document !== "undefined" ? reactDom.createPortal(panel, getOrCreatePortalRoot()) : panel;
 }
 function MenuItemRow({
   item,
@@ -30298,6 +30330,7 @@ var init_Menu = __esm({
     init_Typography();
     init_Badge();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     MENU_GAP = 4;
     menuContainerStyles = cn(
@@ -30434,7 +30467,7 @@ var init_Menu = __esm({
       ) : null;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         triggerElement,
-        panel && typeof document !== "undefined" ? reactDom.createPortal(panel, document.body) : panel
+        panel && typeof document !== "undefined" ? reactDom.createPortal(panel, getOrCreatePortalRoot()) : panel
       ] });
     };
     Menu.displayName = "Menu";
@@ -33818,6 +33851,7 @@ var init_Popover = __esm({
     init_Typography();
     init_Presence();
     init_cn();
+    init_portalRoot();
     init_useTapReveal();
     arrowClasses = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -33977,7 +34011,7 @@ var init_Popover = __esm({
       ) : null;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         triggerElement,
-        panel && typeof document !== "undefined" ? reactDom.createPortal(panel, document.body) : panel
+        panel && typeof document !== "undefined" ? reactDom.createPortal(panel, getOrCreatePortalRoot()) : panel
       ] });
     };
     Popover.displayName = "Popover";
@@ -34483,6 +34517,7 @@ var init_Tooltip = __esm({
     "use client";
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useTapReveal();
     TRIGGER_GAP2 = 8;
     arrowClasses2 = {
@@ -34588,7 +34623,7 @@ var init_Tooltip = __esm({
       ) : null;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         trigger,
-        typeof window !== "undefined" && tooltipContent ? reactDom.createPortal(tooltipContent, document.body) : tooltipContent
+        typeof window !== "undefined" && tooltipContent ? reactDom.createPortal(tooltipContent, getOrCreatePortalRoot()) : tooltipContent
       ] });
     };
     Tooltip.displayName = "Tooltip";
@@ -45599,6 +45634,7 @@ var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
     init_cn();
+    init_portalRoot();
     init_atoms();
     init_Stack();
     init_LoadingState();
@@ -46310,7 +46346,7 @@ var init_GraphCanvas = __esm({
                 children: hoveredObj?.label
               }
             ),
-            document.body
+            getOrCreatePortalRoot()
           )
         ] }),
         groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -47471,6 +47507,7 @@ var init_DetailPanel = __esm({
     init_ErrorState();
     init_EmptyState();
     init_cn();
+    init_portalRoot();
     init_format();
     init_getNestedValue();
     init_relationLabel();
@@ -47890,7 +47927,7 @@ var init_DetailPanel = __esm({
         return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
       }
       const panel = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
-      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, getOrCreatePortalRoot());
     };
     DetailPanel.displayName = "DetailPanel";
   }
@@ -54800,24 +54837,6 @@ function UISlotComponentInner({
     }
   );
 }
-function getOrCreatePortalRoot() {
-  let root = document.getElementById("ui-slot-portal-root");
-  if (!root) {
-    root = document.createElement("div");
-    root.id = "ui-slot-portal-root";
-    root.style.position = "relative";
-    root.style.zIndex = "9999";
-    document.body.appendChild(root);
-  }
-  const themed = document.querySelector('[data-theme*="-"]') ?? document.querySelector("[data-theme]");
-  if (themed) {
-    const theme = themed.getAttribute("data-theme");
-    if (theme && root.getAttribute("data-theme") !== theme) {
-      root.setAttribute("data-theme", theme);
-    }
-  }
-  return root;
-}
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React96.useState(null);
   const slotsBus = context.useUISlots();
@@ -55440,6 +55459,7 @@ var init_UISlotRenderer = __esm({
     init_slot_types();
     init_cn();
     init_format();
+    init_portalRoot();
     init_ErrorBoundary();
     init_Skeleton();
     init_renderer();
@@ -60529,7 +60549,7 @@ function NavStackRefBridge({ apiRef }) {
   }, [api, apiRef]);
   return null;
 }
-function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onNavigateBack, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, callsiteCaptureChildrenByTrait, serverActiveTraits, children }) {
+function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onNavigateBack, onLocalFallback, localFallbackTimeoutMs, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, callsiteCaptureChildrenByTrait, serverActiveTraits, children }) {
   const bridge = providers.useServerBridge();
   const activeTraitNames = React96.useMemo(
     () => new Set(traits2.map((b) => b.trait.name).filter((n) => !!n)),
@@ -60596,9 +60616,9 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
         sendEvent("INIT", routeParams);
         onLocalFallback?.();
       }
-    }, 5e3);
+    }, localFallbackTimeoutMs ?? 5e3);
     return () => clearTimeout(fallback);
-  }, [traits2, orbitalNames, sendEvent, onLocalFallback, routeParams]);
+  }, [traits2, orbitalNames, sendEvent, onLocalFallback, localFallbackTimeoutMs, routeParams]);
   React96.useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
@@ -60652,7 +60672,7 @@ function FitToBox({ children }) {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: outerRef, className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, style: { transform: `scale(${scale})`, transformOrigin: "top left", width: "fit-content" }, children }) });
 }
-function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, persistence }) {
+function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, localFallbackTimeoutMs, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = React96.useMemo(() => {
     let base;
@@ -60815,6 +60835,7 @@ function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData,
           onNavigate,
           onNavigateBack,
           onLocalFallback,
+          localFallbackTimeoutMs,
           persistence,
           children: /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-full min-h-full overflow-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
         }
@@ -60838,7 +60859,8 @@ function OrbPreview({
   initialPagePath,
   isolated = false,
   fit = false,
-  user = null
+  user = null,
+  localFallbackTimeoutMs
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -61020,6 +61042,7 @@ function OrbPreview({
                   onNavigate: handleNavigateEffect,
                   onNavigateBack: handleNavigateBack,
                   onLocalFallback: handleLocalFallback,
+                  localFallbackTimeoutMs,
                   persistence
                 }
               ) }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -61035,6 +61058,7 @@ function OrbPreview({
                   onNavigate: handleNavigateEffect,
                   onNavigateBack: handleNavigateBack,
                   onLocalFallback: handleLocalFallback,
+                  localFallbackTimeoutMs,
                   persistence
                 }
               ) }) })

package/dist/avl/index.js

@@ -5322,6 +5322,36 @@ var init_Dialog = __esm({
     Dialog.displayName = "Dialog";
   }
 });
+
+// lib/portalRoot.ts
+function lastThemedElement(selector, portalRoot) {
+  const matches = Array.from(document.querySelectorAll(selector)).filter(
+    (el) => el !== document.documentElement && el !== portalRoot
+  );
+  return matches[matches.length - 1] ?? null;
+}
+function getOrCreatePortalRoot() {
+  let root = document.getElementById("ui-slot-portal-root");
+  if (!root) {
+    root = document.createElement("div");
+    root.id = "ui-slot-portal-root";
+    root.style.position = "relative";
+    root.style.zIndex = "9999";
+    document.body.appendChild(root);
+  }
+  const themed = lastThemedElement('[data-theme*="-"]', root) ?? lastThemedElement("[data-theme]", root);
+  if (themed) {
+    const theme = themed.getAttribute("data-theme");
+    if (theme && root.getAttribute("data-theme") !== theme) {
+      root.setAttribute("data-theme", theme);
+    }
+  }
+  return root;
+}
+var init_portalRoot = __esm({
+  "lib/portalRoot.ts"() {
+  }
+});
 function isMotionEnabled() {
   if (typeof document === "undefined") return true;
   if (motionEnabledCache !== null) return motionEnabledCache;
@@ -5402,6 +5432,7 @@ var init_Modal = __esm({
     init_Dialog();
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     init_Presence();
     sizeClasses2 = {
@@ -5612,7 +5643,7 @@ var init_Modal = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     Modal.displayName = "Modal";
@@ -22978,6 +23009,7 @@ var init_StateMachineView = __esm({
     init_Icon();
     init_useEventBus();
     init_cn();
+    init_portalRoot();
     StateNode2 = ({ state, config }) => {
       const { t } = useTranslate();
       const size = state.radius * 2;
@@ -23494,7 +23526,7 @@ var init_StateMachineView = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     EntityBox = ({ entity, config }) => {
@@ -30135,7 +30167,7 @@ function SubMenu({
       })
     }
   );
-  return typeof document !== "undefined" ? createPortal(panel, document.body) : panel;
+  return typeof document !== "undefined" ? createPortal(panel, getOrCreatePortalRoot()) : panel;
 }
 function MenuItemRow({
   item,
@@ -30222,6 +30254,7 @@ var init_Menu = __esm({
     init_Typography();
     init_Badge();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     MENU_GAP = 4;
     menuContainerStyles = cn(
@@ -30358,7 +30391,7 @@ var init_Menu = __esm({
       ) : null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         triggerElement,
-        panel && typeof document !== "undefined" ? createPortal(panel, document.body) : panel
+        panel && typeof document !== "undefined" ? createPortal(panel, getOrCreatePortalRoot()) : panel
       ] });
     };
     Menu.displayName = "Menu";
@@ -33742,6 +33775,7 @@ var init_Popover = __esm({
     init_Typography();
     init_Presence();
     init_cn();
+    init_portalRoot();
     init_useTapReveal();
     arrowClasses = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -33901,7 +33935,7 @@ var init_Popover = __esm({
       ) : null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         triggerElement,
-        panel && typeof document !== "undefined" ? createPortal(panel, document.body) : panel
+        panel && typeof document !== "undefined" ? createPortal(panel, getOrCreatePortalRoot()) : panel
       ] });
     };
     Popover.displayName = "Popover";
@@ -34407,6 +34441,7 @@ var init_Tooltip = __esm({
     "use client";
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useTapReveal();
     TRIGGER_GAP2 = 8;
     arrowClasses2 = {
@@ -34512,7 +34547,7 @@ var init_Tooltip = __esm({
       ) : null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         trigger,
-        typeof window !== "undefined" && tooltipContent ? createPortal(tooltipContent, document.body) : tooltipContent
+        typeof window !== "undefined" && tooltipContent ? createPortal(tooltipContent, getOrCreatePortalRoot()) : tooltipContent
       ] });
     };
     Tooltip.displayName = "Tooltip";
@@ -45523,6 +45558,7 @@ var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
     init_cn();
+    init_portalRoot();
     init_atoms();
     init_Stack();
     init_LoadingState();
@@ -46234,7 +46270,7 @@ var init_GraphCanvas = __esm({
                 children: hoveredObj?.label
               }
             ),
-            document.body
+            getOrCreatePortalRoot()
           )
         ] }),
         groups.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -47395,6 +47431,7 @@ var init_DetailPanel = __esm({
     init_ErrorState();
     init_EmptyState();
     init_cn();
+    init_portalRoot();
     init_format();
     init_getNestedValue();
     init_relationLabel();
@@ -47814,7 +47851,7 @@ var init_DetailPanel = __esm({
         return /* @__PURE__ */ jsx(Box, { className, children: content });
       }
       const panel = /* @__PURE__ */ jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
-      return typeof document === "undefined" ? panel : createPortal(panel, document.body);
+      return typeof document === "undefined" ? panel : createPortal(panel, getOrCreatePortalRoot());
     };
     DetailPanel.displayName = "DetailPanel";
   }
@@ -54724,24 +54761,6 @@ function UISlotComponentInner({
     }
   );
 }
-function getOrCreatePortalRoot() {
-  let root = document.getElementById("ui-slot-portal-root");
-  if (!root) {
-    root = document.createElement("div");
-    root.id = "ui-slot-portal-root";
-    root.style.position = "relative";
-    root.style.zIndex = "9999";
-    document.body.appendChild(root);
-  }
-  const themed = document.querySelector('[data-theme*="-"]') ?? document.querySelector("[data-theme]");
-  if (themed) {
-    const theme = themed.getAttribute("data-theme");
-    if (theme && root.getAttribute("data-theme") !== theme) {
-      root.setAttribute("data-theme", theme);
-    }
-  }
-  return root;
-}
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
   const slotsBus = useUISlots();
@@ -55364,6 +55383,7 @@ var init_UISlotRenderer = __esm({
     init_slot_types();
     init_cn();
     init_format();
+    init_portalRoot();
     init_ErrorBoundary();
     init_Skeleton();
     init_renderer();
@@ -60453,7 +60473,7 @@ function NavStackRefBridge({ apiRef }) {
   }, [api, apiRef]);
   return null;
 }
-function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onNavigateBack, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, callsiteCaptureChildrenByTrait, serverActiveTraits, children }) {
+function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onNavigateBack, onLocalFallback, localFallbackTimeoutMs, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, callsiteCaptureChildrenByTrait, serverActiveTraits, children }) {
   const bridge = useServerBridge();
   const activeTraitNames = useMemo(
     () => new Set(traits2.map((b) => b.trait.name).filter((n) => !!n)),
@@ -60520,9 +60540,9 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
         sendEvent("INIT", routeParams);
         onLocalFallback?.();
       }
-    }, 5e3);
+    }, localFallbackTimeoutMs ?? 5e3);
     return () => clearTimeout(fallback);
-  }, [traits2, orbitalNames, sendEvent, onLocalFallback, routeParams]);
+  }, [traits2, orbitalNames, sendEvent, onLocalFallback, localFallbackTimeoutMs, routeParams]);
   useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
@@ -60576,7 +60596,7 @@ function FitToBox({ children }) {
   }, []);
   return /* @__PURE__ */ jsx("div", { ref: outerRef, className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { ref: innerRef, style: { transform: `scale(${scale})`, transformOrigin: "top left", width: "fit-content" }, children }) });
 }
-function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, persistence }) {
+function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, localFallbackTimeoutMs, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = useMemo(() => {
     let base;
@@ -60739,6 +60759,7 @@ function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData,
           onNavigate,
           onNavigateBack,
           onLocalFallback,
+          localFallbackTimeoutMs,
           persistence,
           children: /* @__PURE__ */ jsx(OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsx(Box, { className: "h-full min-h-full overflow-auto p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
         }
@@ -60762,7 +60783,8 @@ function OrbPreview({
   initialPagePath,
   isolated = false,
   fit = false,
-  user = null
+  user = null,
+  localFallbackTimeoutMs
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -60944,6 +60966,7 @@ function OrbPreview({
                   onNavigate: handleNavigateEffect,
                   onNavigateBack: handleNavigateBack,
                   onLocalFallback: handleLocalFallback,
+                  localFallbackTimeoutMs,
                   persistence
                 }
               ) }) : /* @__PURE__ */ jsx(
@@ -60959,6 +60982,7 @@ function OrbPreview({
                   onNavigate: handleNavigateEffect,
                   onNavigateBack: handleNavigateBack,
                   onLocalFallback: handleLocalFallback,
+                  localFallbackTimeoutMs,
                   persistence
                 }
               ) }) })