@almadar/ui 6.19.0 → 6.21.0

package/dist/components/index.cjs

@@ -6505,6 +6505,36 @@ var init_resolve_render_bindings = __esm({
     evaluatorResolvedData = /* @__PURE__ */ new WeakSet();
   }
 });
+
+// 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"() {
+  }
+});
 var sizeClasses6, minWidthClasses, lookStyles2; exports.Modal = void 0;
 var init_Modal = __esm({
   "components/core/molecules/Modal.tsx"() {
@@ -6514,6 +6544,7 @@ var init_Modal = __esm({
     init_Dialog();
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     init_Presence();
     sizeClasses6 = {
@@ -6724,7 +6755,7 @@ var init_Modal = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     exports.Modal.displayName = "Modal";
@@ -16298,6 +16329,7 @@ var init_StateMachineView = __esm({
     init_Icon();
     init_useEventBus();
     init_cn();
+    init_portalRoot();
     StateNode = ({ state, config }) => {
       const { t } = hooks.useTranslate();
       const size = state.radius * 2;
@@ -16814,7 +16846,7 @@ var init_StateMachineView = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     EntityBox = ({ entity, config }) => {
@@ -25293,7 +25325,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,
@@ -25380,6 +25412,7 @@ var init_Menu = __esm({
     init_Typography();
     init_Badge();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     MENU_GAP = 4;
     menuContainerStyles = cn(
@@ -25516,7 +25549,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
       ] });
     };
     exports.Menu.displayName = "Menu";
@@ -29571,6 +29604,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",
@@ -29730,7 +29764,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
       ] });
     };
     exports.Popover.displayName = "Popover";
@@ -29811,6 +29845,7 @@ var init_Coachmark = __esm({
     init_Button();
     init_Icon();
     init_cn();
+    init_portalRoot();
     GAP = 10;
     EDGE = 8;
     exports.Coachmark = ({
@@ -29913,7 +29948,7 @@ var init_Coachmark = __esm({
           beacon,
           card
         ] }),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     exports.Coachmark.displayName = "Coachmark";
@@ -29925,6 +29960,7 @@ var init_OnboardingSpotlight = __esm({
     "use client";
     init_Coachmark();
     init_cn();
+    init_portalRoot();
     DIM = "fixed z-[45] bg-black/60";
     exports.OnboardingSpotlight = ({
       steps,
@@ -29952,7 +29988,7 @@ var init_OnboardingSpotlight = __esm({
         ] });
       })() : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DIM, "inset-0") });
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        reactDom.createPortal(backdrop, document.body),
+        reactDom.createPortal(backdrop, getOrCreatePortalRoot()),
         /* @__PURE__ */ jsxRuntime.jsxs(
           exports.Coachmark,
           {
@@ -30486,6 +30522,7 @@ var init_Tooltip = __esm({
     "use client";
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useTapReveal();
     TRIGGER_GAP2 = 8;
     arrowClasses2 = {
@@ -30591,7 +30628,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
       ] });
     };
     exports.Tooltip.displayName = "Tooltip";
@@ -44508,6 +44545,7 @@ var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
     init_cn();
+    init_portalRoot();
     init_atoms();
     init_Stack();
     init_LoadingState();
@@ -45219,7 +45257,7 @@ var init_GraphCanvas = __esm({
                 children: hoveredObj?.label
               }
             ),
-            document.body
+            getOrCreatePortalRoot()
           )
         ] }),
         groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
@@ -46609,6 +46647,7 @@ var init_DetailPanel = __esm({
     init_ErrorState();
     init_EmptyState();
     init_cn();
+    init_portalRoot();
     init_format();
     init_getNestedValue();
     init_relationLabel();
@@ -47028,7 +47067,7 @@ var init_DetailPanel = __esm({
         return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className, children: content });
       }
       const panel = /* @__PURE__ */ jsxRuntime.jsx(exports.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());
     };
     exports.DetailPanel.displayName = "DetailPanel";
   }
@@ -53919,24 +53958,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] = React79.useState(null);
   const slotsBus = context.useUISlots();
@@ -54559,6 +54580,7 @@ var init_UISlotRenderer = __esm({
     init_slot_types();
     init_cn();
     init_format();
+    init_portalRoot();
     init_ErrorBoundary();
     init_Skeleton();
     init_renderer();

package/dist/components/index.d.cts

@@ -4965,7 +4965,7 @@ declare const Popover: React__default.FC<PopoverProps>;
  * Popover (uncontrolled, wraps its own trigger), a Coachmark is driven by
  * `open` and points at an element it does not own — a tab button, the persona
  * menu, a canvas node — resolved from a ref, a CSS selector, or a DOMRect.
- * Portals to document.body so it escapes the canvas/preview transform contexts.
+ * Portals into the shared portal root so it escapes the canvas/preview transform contexts.
  */
 
 type CoachmarkPlacement = "top" | "bottom" | "left" | "right";

package/dist/components/index.d.ts

@@ -4965,7 +4965,7 @@ declare const Popover: React__default.FC<PopoverProps>;
  * Popover (uncontrolled, wraps its own trigger), a Coachmark is driven by
  * `open` and points at an element it does not own — a tab button, the persona
  * menu, a canvas node — resolved from a ref, a CSS selector, or a DOMRect.
- * Portals to document.body so it escapes the canvas/preview transform contexts.
+ * Portals into the shared portal root so it escapes the canvas/preview transform contexts.
  */
 
 type CoachmarkPlacement = "top" | "bottom" | "left" | "right";

package/dist/components/index.js

@@ -6430,6 +6430,36 @@ var init_resolve_render_bindings = __esm({
     evaluatorResolvedData = /* @__PURE__ */ new WeakSet();
   }
 });
+
+// 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"() {
+  }
+});
 var sizeClasses6, minWidthClasses, lookStyles2, Modal;
 var init_Modal = __esm({
   "components/core/molecules/Modal.tsx"() {
@@ -6439,6 +6469,7 @@ var init_Modal = __esm({
     init_Dialog();
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     init_Presence();
     sizeClasses6 = {
@@ -6649,7 +6680,7 @@ var init_Modal = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     Modal.displayName = "Modal";
@@ -16223,6 +16254,7 @@ var init_StateMachineView = __esm({
     init_Icon();
     init_useEventBus();
     init_cn();
+    init_portalRoot();
     StateNode = ({ state, config }) => {
       const { t } = useTranslate();
       const size = state.radius * 2;
@@ -16739,7 +16771,7 @@ var init_StateMachineView = __esm({
             )
           }
         ),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     EntityBox = ({ entity, config }) => {
@@ -25218,7 +25250,7 @@ function SubMenu({
       })
     }
   );
-  return typeof document !== "undefined" ? createPortal(panel, document.body) : panel;
+  return typeof document !== "undefined" ? createPortal(panel, getOrCreatePortalRoot()) : panel;
 }
 function MenuItemRow({
   item,
@@ -25305,6 +25337,7 @@ var init_Menu = __esm({
     init_Typography();
     init_Badge();
     init_cn();
+    init_portalRoot();
     init_useEventBus();
     MENU_GAP = 4;
     menuContainerStyles = cn(
@@ -25441,7 +25474,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";
@@ -29496,6 +29529,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",
@@ -29655,7 +29689,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";
@@ -29736,6 +29770,7 @@ var init_Coachmark = __esm({
     init_Button();
     init_Icon();
     init_cn();
+    init_portalRoot();
     GAP = 10;
     EDGE = 8;
     Coachmark = ({
@@ -29838,7 +29873,7 @@ var init_Coachmark = __esm({
           beacon,
           card
         ] }),
-        document.body
+        getOrCreatePortalRoot()
       );
     };
     Coachmark.displayName = "Coachmark";
@@ -29850,6 +29885,7 @@ var init_OnboardingSpotlight = __esm({
     "use client";
     init_Coachmark();
     init_cn();
+    init_portalRoot();
     DIM = "fixed z-[45] bg-black/60";
     OnboardingSpotlight = ({
       steps,
@@ -29877,7 +29913,7 @@ var init_OnboardingSpotlight = __esm({
         ] });
       })() : /* @__PURE__ */ jsx("div", { className: cn(DIM, "inset-0") });
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        createPortal(backdrop, document.body),
+        createPortal(backdrop, getOrCreatePortalRoot()),
         /* @__PURE__ */ jsxs(
           Coachmark,
           {
@@ -30411,6 +30447,7 @@ var init_Tooltip = __esm({
     "use client";
     init_Typography();
     init_cn();
+    init_portalRoot();
     init_useTapReveal();
     TRIGGER_GAP2 = 8;
     arrowClasses2 = {
@@ -30516,7 +30553,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";
@@ -44433,6 +44470,7 @@ var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
     init_cn();
+    init_portalRoot();
     init_atoms();
     init_Stack();
     init_LoadingState();
@@ -45144,7 +45182,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: [
@@ -46534,6 +46572,7 @@ var init_DetailPanel = __esm({
     init_ErrorState();
     init_EmptyState();
     init_cn();
+    init_portalRoot();
     init_format();
     init_getNestedValue();
     init_relationLabel();
@@ -46953,7 +46992,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";
   }
@@ -53844,24 +53883,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();
@@ -54484,6 +54505,7 @@ var init_UISlotRenderer = __esm({
     init_slot_types();
     init_cn();
     init_format();
+    init_portalRoot();
     init_ErrorBoundary();
     init_Skeleton();
     init_renderer();