@almadar/ui 5.12.1 → 5.13.3

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) : [],
@@ -17637,6 +17640,7 @@ function CalendarGrid({
   swipeRightEvent,
   dayWindow = "auto"
 }) {
+  const evs = Array.isArray(events2) ? events2 : events2 ? [events2] : [];
   const eventBus = useEventBus();
   const longPressTimer = useRef(null);
   const resolvedWeekStart = useMemo(
@@ -17685,7 +17689,7 @@ function CalendarGrid({
     [onEventClick]
   );
   const eventsForDayCount = useCallback(
-    (day) => events2.filter(
+    (day) => evs.filter(
       (ev) => new Date(ev.startTime).toDateString() === day.toDateString()
     ).length,
     [events2]
@@ -17800,7 +17804,7 @@ function CalendarGrid({
                   }
                 ) }),
                 visibleDays.map((day) => {
-                  const slotEvents = events2.filter(
+                  const slotEvents = evs.filter(
                     (ev) => eventInSlot(ev, day, time)
                   );
                   const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
@@ -29874,7 +29878,7 @@ function useSafeEventBus10() {
   }
 }
 function SortableListInner({
-  items: initialItems = EMPTY_ITEMS,
+  items: initialItemsProp = EMPTY_ITEMS,
   renderItem,
   reorderEvent,
   reorderPayload,
@@ -29882,6 +29886,7 @@ function SortableListInner({
   className
 }) {
   const eventBus = useSafeEventBus10();
+  const initialItems = Array.isArray(initialItemsProp) ? initialItemsProp : initialItemsProp ? [initialItemsProp] : [];
   const handleReorder = useCallback(
     (fromIndex, toIndex, item) => {
       eventBus.emit(`UI:${reorderEvent}`, {
@@ -33313,9 +33318,10 @@ var init_ReplyTree = __esm({
       showActions = true,
       className
     }) => {
+      const nodeList = Array.isArray(nodes) ? nodes : nodes ? [nodes] : [];
       const [collapsedSet, setCollapsedSet] = useState(() => {
         const acc = /* @__PURE__ */ new Set();
-        collectInitiallyCollapsed(nodes, acc);
+        collectInitiallyCollapsed(nodeList, acc);
         return acc;
       });
       const toggleCollapse = useCallback((id) => {
@@ -33329,10 +33335,10 @@ var init_ReplyTree = __esm({
           return next;
         });
       }, []);
-      if (nodes.length === 0) {
+      if (nodeList.length === 0) {
         return /* @__PURE__ */ jsx(Box, { className: cn("text-sm text-muted-foreground", className), children: "No replies yet." });
       }
-      return /* @__PURE__ */ jsx(Box, { className: cn("flex flex-col gap-2 min-w-0", className), children: nodes.map((node) => /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { className: cn("flex flex-col gap-2 min-w-0", className), children: nodeList.map((node) => /* @__PURE__ */ jsx(
         ReplyTreeNode,
         {
           node,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.12.1",
+  "version": "5.13.3",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -129,10 +129,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@almadar/core": "^9.0.0",
+    "@almadar/core": ">=9.8.0",
     "@almadar/evaluator": ">=2.9.2",
     "@almadar/logger": "^1.3.0",
-    "@almadar/patterns": "^2.26.0",
+    "@almadar/patterns": ">=2.35.0",
     "@almadar/runtime": "^6.7.0",
     "@almadar/std": ">=6.4.1",
     "@almadar/syntax": ">=1.3.1",
@@ -232,5 +232,8 @@
       "@types/react": "^19.0.0",
       "@types/react-dom": "^19.0.0"
     }
+  },
+  "overrides": {
+    "@almadar/core": "$@almadar/core"
   }
 }

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: {