@almadar/ui 5.13.2 → 5.13.3

package/dist/runtime/index.cjs

@@ -10,9 +10,9 @@ var LucideIcons2 = require('lucide-react');
 var PhosphorIcons = require('@phosphor-icons/react');
 var TablerIcons = require('@tabler/icons-react');
 var FaIcons = require('react-icons/fa');
+var reactDom = require('react-dom');
 var evaluator = require('@almadar/evaluator');
 var context = require('@almadar/ui/context');
-var reactDom = require('react-dom');
 var reactRouterDom = require('react-router-dom');
 var ELK = require('elkjs/lib/elk.bundled.js');
 var ReactMarkdown = require('react-markdown');
@@ -2276,7 +2276,7 @@ var init_Modal = __esm({
           document.body.style.overflow = "";
         };
       }, [isOpen]);
-      if (!isOpen) return null;
+      if (!isOpen || typeof document === "undefined") return null;
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -2286,124 +2286,127 @@ var init_Modal = __esm({
           handleClose();
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Overlay,
-          {
-            isVisible: isOpen,
-            onClick: handleOverlayClick,
-            className: "z-40"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            className: cn(
-              "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
-              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              Dialog,
-              {
-                ref: modalRef,
-                open: true,
-                className: cn(
-                  // Reset browser-default dialog chrome — we own styling. `static`
-                  // overrides the user-agent `position: absolute` so the parent
-                  // flex container's `justify-center` actually centers the dialog
-                  // (without this, the dialog drops out of flex flow and `m-0`
-                  // kills the user-agent's `margin: auto` centering, pinning the
-                  // dialog to top-left).
-                  "static m-0 p-0 border-0 bg-transparent",
-                  // Pre-existing dialog frame
-                  "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
-                  // Desktop sizing + viewport-aware floor.
-                  sizeClasses2[size],
-                  minWidthClasses[size],
-                  "max-h-[80vh]",
-                  // Mobile: take the entire screen. Override desktop max-w cap,
-                  // full height, no rounded corners, no min-width.
-                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
-                  lookStyles[look],
-                  className
-                ),
-                style: dragY > 0 ? {
-                  transform: `translateY(${dragY}px)`,
-                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                } : void 0,
-                ...title && { "aria-labelledby": "modal-title" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Box,
-                    {
-                      className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
-                      onPointerDown: (e) => {
-                        if (!swipeDownToClose) return;
-                        dragStartY.current = e.clientY;
-                        isDragging.current = true;
-                        e.target.setPointerCapture(e.pointerId);
-                      },
-                      onPointerMove: (e) => {
-                        if (!isDragging.current) return;
-                        const dy = Math.max(0, e.clientY - dragStartY.current);
-                        setDragY(dy);
-                      },
-                      onPointerUp: () => {
-                        if (!isDragging.current) return;
-                        isDragging.current = false;
-                        if (dragY > 100) {
-                          handleClose();
-                        }
-                        setDragY(0);
-                      },
-                      onPointerCancel: () => {
-                        isDragging.current = false;
-                        setDragY(0);
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
-                    }
+      return reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Overlay,
+            {
+              isVisible: isOpen,
+              onClick: handleOverlayClick,
+              className: "z-[1000]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: cn(
+                "fixed inset-0 z-[1001] pointer-events-none",
+                "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+                "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Dialog,
+                {
+                  ref: modalRef,
+                  open: true,
+                  className: cn(
+                    // Reset browser-default dialog chrome — we own styling. `static`
+                    // overrides the user-agent `position: absolute` so the parent
+                    // flex container's `justify-center` actually centers the dialog
+                    // (without this, the dialog drops out of flex flow and `m-0`
+                    // kills the user-agent's `margin: auto` centering, pinning the
+                    // dialog to top-left).
+                    "static m-0 p-0 border-0 bg-transparent",
+                    // Pre-existing dialog frame
+                    "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
+                    // Desktop sizing + viewport-aware floor.
+                    sizeClasses2[size],
+                    minWidthClasses[size],
+                    "max-h-[80vh]",
+                    // Mobile: take the entire screen. Override desktop max-w cap,
+                    // full height, no rounded corners, no min-width.
+                    "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
+                    lookStyles[look],
+                    className
                   ),
-                  (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
-                    Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 flex items-center justify-between",
-                        "border-b-[length:var(--border-width)] border-border"
-                      ),
-                      children: [
-                        title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
-                        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            icon: "x",
-                            onClick: handleClose,
-                            "data-event": "CLOSE",
-                            "aria-label": "Close modal"
+                  style: dragY > 0 ? {
+                    transform: `translateY(${dragY}px)`,
+                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                  } : void 0,
+                  ...title && { "aria-labelledby": "modal-title" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Box,
+                      {
+                        className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
+                        onPointerDown: (e) => {
+                          if (!swipeDownToClose) return;
+                          dragStartY.current = e.clientY;
+                          isDragging.current = true;
+                          e.target.setPointerCapture(e.pointerId);
+                        },
+                        onPointerMove: (e) => {
+                          if (!isDragging.current) return;
+                          const dy = Math.max(0, e.clientY - dragStartY.current);
+                          setDragY(dy);
+                        },
+                        onPointerUp: () => {
+                          if (!isDragging.current) return;
+                          isDragging.current = false;
+                          if (dragY > 100) {
+                            handleClose();
                           }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
-                  footer && /* @__PURE__ */ jsxRuntime.jsx(
-                    Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 bg-muted",
-                        "border-t-[length:var(--border-width)] border-border"
-                      ),
-                      children: footer
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ] });
+                          setDragY(0);
+                        },
+                        onPointerCancel: () => {
+                          isDragging.current = false;
+                          setDragY(0);
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
+                      }
+                    ),
+                    (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
+                      Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 flex items-center justify-between",
+                          "border-b-[length:var(--border-width)] border-border"
+                        ),
+                        children: [
+                          title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
+                          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              icon: "x",
+                              onClick: handleClose,
+                              "data-event": "CLOSE",
+                              "aria-label": "Close modal"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
+                    footer && /* @__PURE__ */ jsxRuntime.jsx(
+                      Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 bg-muted",
+                          "border-t-[length:var(--border-width)] border-border"
+                        ),
+                        children: footer
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        document.body
+      );
     };
     Modal.displayName = "Modal";
   }
@@ -13864,7 +13867,7 @@ var init_CodeBlock = __esm({
             };
           };
         }, [errorLines]);
-        const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+        const isFoldable = foldableProp ?? true;
         const [collapsed, setCollapsed] = React85.useState(() => /* @__PURE__ */ new Set());
         const foldRegions = React85.useMemo(
           () => isFoldable ? computeFoldRegions(code) : [],

package/dist/runtime/index.js

@@ -10,9 +10,9 @@ import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil
 import * as PhosphorIcons from '@phosphor-icons/react';
 import * as TablerIcons from '@tabler/icons-react';
 import * as FaIcons from 'react-icons/fa';
+import { createPortal } from 'react-dom';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { useUISlots, UISlotProvider } from '@almadar/ui/context';
-import { createPortal } from 'react-dom';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import ReactMarkdown from 'react-markdown';
@@ -2227,7 +2227,7 @@ var init_Modal = __esm({
           document.body.style.overflow = "";
         };
       }, [isOpen]);
-      if (!isOpen) return null;
+      if (!isOpen || typeof document === "undefined") return null;
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -2237,124 +2237,127 @@ var init_Modal = __esm({
           handleClose();
         }
       };
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Overlay,
-          {
-            isVisible: isOpen,
-            onClick: handleOverlayClick,
-            className: "z-40"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            className: cn(
-              "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
-              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
-            ),
-            children: /* @__PURE__ */ jsxs(
-              Dialog,
-              {
-                ref: modalRef,
-                open: true,
-                className: cn(
-                  // Reset browser-default dialog chrome — we own styling. `static`
-                  // overrides the user-agent `position: absolute` so the parent
-                  // flex container's `justify-center` actually centers the dialog
-                  // (without this, the dialog drops out of flex flow and `m-0`
-                  // kills the user-agent's `margin: auto` centering, pinning the
-                  // dialog to top-left).
-                  "static m-0 p-0 border-0 bg-transparent",
-                  // Pre-existing dialog frame
-                  "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
-                  // Desktop sizing + viewport-aware floor.
-                  sizeClasses2[size],
-                  minWidthClasses[size],
-                  "max-h-[80vh]",
-                  // Mobile: take the entire screen. Override desktop max-w cap,
-                  // full height, no rounded corners, no min-width.
-                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
-                  lookStyles[look],
-                  className
-                ),
-                style: dragY > 0 ? {
-                  transform: `translateY(${dragY}px)`,
-                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                } : void 0,
-                ...title && { "aria-labelledby": "modal-title" },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Box,
-                    {
-                      className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
-                      onPointerDown: (e) => {
-                        if (!swipeDownToClose) return;
-                        dragStartY.current = e.clientY;
-                        isDragging.current = true;
-                        e.target.setPointerCapture(e.pointerId);
-                      },
-                      onPointerMove: (e) => {
-                        if (!isDragging.current) return;
-                        const dy = Math.max(0, e.clientY - dragStartY.current);
-                        setDragY(dy);
-                      },
-                      onPointerUp: () => {
-                        if (!isDragging.current) return;
-                        isDragging.current = false;
-                        if (dragY > 100) {
-                          handleClose();
-                        }
-                        setDragY(0);
-                      },
-                      onPointerCancel: () => {
-                        isDragging.current = false;
-                        setDragY(0);
-                      },
-                      children: /* @__PURE__ */ jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
-                    }
+      return createPortal(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Overlay,
+            {
+              isVisible: isOpen,
+              onClick: handleOverlayClick,
+              className: "z-[1000]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "fixed inset-0 z-[1001] pointer-events-none",
+                "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+                "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
+              ),
+              children: /* @__PURE__ */ jsxs(
+                Dialog,
+                {
+                  ref: modalRef,
+                  open: true,
+                  className: cn(
+                    // Reset browser-default dialog chrome — we own styling. `static`
+                    // overrides the user-agent `position: absolute` so the parent
+                    // flex container's `justify-center` actually centers the dialog
+                    // (without this, the dialog drops out of flex flow and `m-0`
+                    // kills the user-agent's `margin: auto` centering, pinning the
+                    // dialog to top-left).
+                    "static m-0 p-0 border-0 bg-transparent",
+                    // Pre-existing dialog frame
+                    "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
+                    // Desktop sizing + viewport-aware floor.
+                    sizeClasses2[size],
+                    minWidthClasses[size],
+                    "max-h-[80vh]",
+                    // Mobile: take the entire screen. Override desktop max-w cap,
+                    // full height, no rounded corners, no min-width.
+                    "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
+                    lookStyles[look],
+                    className
                   ),
-                  (title || showCloseButton) && /* @__PURE__ */ jsxs(
-                    Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 flex items-center justify-between",
-                        "border-b-[length:var(--border-width)] border-border"
-                      ),
-                      children: [
-                        title && /* @__PURE__ */ jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
-                        showCloseButton && /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            icon: "x",
-                            onClick: handleClose,
-                            "data-event": "CLOSE",
-                            "aria-label": "Close modal"
+                  style: dragY > 0 ? {
+                    transform: `translateY(${dragY}px)`,
+                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                  } : void 0,
+                  ...title && { "aria-labelledby": "modal-title" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
+                        onPointerDown: (e) => {
+                          if (!swipeDownToClose) return;
+                          dragStartY.current = e.clientY;
+                          isDragging.current = true;
+                          e.target.setPointerCapture(e.pointerId);
+                        },
+                        onPointerMove: (e) => {
+                          if (!isDragging.current) return;
+                          const dy = Math.max(0, e.clientY - dragStartY.current);
+                          setDragY(dy);
+                        },
+                        onPointerUp: () => {
+                          if (!isDragging.current) return;
+                          isDragging.current = false;
+                          if (dragY > 100) {
+                            handleClose();
                           }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
-                  footer && /* @__PURE__ */ jsx(
-                    Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 bg-muted",
-                        "border-t-[length:var(--border-width)] border-border"
-                      ),
-                      children: footer
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ] });
+                          setDragY(0);
+                        },
+                        onPointerCancel: () => {
+                          isDragging.current = false;
+                          setDragY(0);
+                        },
+                        children: /* @__PURE__ */ jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
+                      }
+                    ),
+                    (title || showCloseButton) && /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 flex items-center justify-between",
+                          "border-b-[length:var(--border-width)] border-border"
+                        ),
+                        children: [
+                          title && /* @__PURE__ */ jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
+                          showCloseButton && /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              icon: "x",
+                              onClick: handleClose,
+                              "data-event": "CLOSE",
+                              "aria-label": "Close modal"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
+                    footer && /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 bg-muted",
+                          "border-t-[length:var(--border-width)] border-border"
+                        ),
+                        children: footer
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        document.body
+      );
     };
     Modal.displayName = "Modal";
   }
@@ -13815,7 +13818,7 @@ var init_CodeBlock = __esm({
             };
           };
         }, [errorLines]);
-        const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+        const isFoldable = foldableProp ?? true;
         const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
         const foldRegions = useMemo(
           () => isFoldable ? computeFoldRegions(code) : [],

package/package.json

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

package/tailwind-preset.cjs

@@ -242,6 +242,8 @@ module.exports = {
   'w-[480px]',
   'w-[640px]',
   'will-change-[opacity,transform]',
+  'z-[1000]',
+  'z-[1001]',
   'z-[60]',
 ],
   theme: {