@octaviaflow/core 3.0.11 → 3.0.12

package/dist/index.js

@@ -6343,7 +6343,7 @@ function Drawer({
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion6 } from "framer-motion";
-import { useRef as useRef13 } from "react";
+import { useEffect as useEffect6, useRef as useRef13 } from "react";
 import { useButton as useButton3, useMenu, useMenuItem, useMenuTrigger } from "react-aria";
 import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -6374,9 +6374,37 @@ function MenuPopup({
   menuItems,
   triggerRef,
   align,
-  className
+  className,
+  closeOnOutsideClick,
+  closeOnEscape
 }) {
   const menuRef = useRef13(null);
+  useEffect6(() => {
+    if (!state.isOpen || !closeOnOutsideClick) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const insideMenu = menuRef.current?.contains(target);
+      const insideTrigger = triggerRef.current?.contains(target);
+      if (!insideMenu && !insideTrigger) {
+        state.close();
+      }
+    };
+    document.addEventListener("mousedown", handler, true);
+    return () => document.removeEventListener("mousedown", handler, true);
+  }, [state.isOpen, closeOnOutsideClick]);
+  useEffect6(() => {
+    if (!state.isOpen || !closeOnEscape) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        state.close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [state.isOpen, closeOnEscape]);
   const nonSepItems = menuItems.filter((i) => !i.separator);
   const children = nonSepItems.map((item, idx) => /* @__PURE__ */ jsx29($05678f3aee5e7d1a$export$6d08773d2e66f8f2, { textValue: item.label, children: item.label }, idx));
   const treeState = $6b915bde6cd300dd$export$728d6ba534403756({
@@ -6456,6 +6484,8 @@ function DropdownMenu({
   align = "start",
   className,
   triggerClassName,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
@@ -6490,7 +6520,9 @@ function DropdownMenu({
         menuItems: items,
         triggerRef,
         align,
-        className
+        className,
+        closeOnOutsideClick,
+        closeOnEscape
       }
     )
   ] });
@@ -6509,7 +6541,7 @@ function EmptyState({ icon, title, description, action, className }) {
 
 // src/components/ExecutionConsole/ExecutionConsole.tsx
 import { motion as motion7 } from "framer-motion";
-import { useEffect as useEffect6, useRef as useRef14 } from "react";
+import { useEffect as useEffect7, useRef as useRef14 } from "react";
 import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 var iconProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -6556,7 +6588,7 @@ function ExecutionConsole({
       void navigator.clipboard.writeText(text);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (open && logEndRef.current) {
       logEndRef.current.scrollIntoView?.({ behavior: "smooth" });
     }
@@ -6722,7 +6754,7 @@ function FeatureCard({
 // src/components/FileDropzone/FileDropzone.tsx
 import {
   useCallback as useCallback4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useId as useId3,
   useRef as useRef15,
   useState as useState9
@@ -6908,7 +6940,7 @@ function FileDropzone({
     },
     [disabled, onFiles, validate]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!files) return;
     const next = {};
     const created = [];
@@ -6925,7 +6957,7 @@ function FileDropzone({
       created.forEach((u) => URL.revokeObjectURL(u));
     };
   }, [files]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!pasteEnabled || disabled) return;
     const onPaste = (e) => {
       const active = document.activeElement;
@@ -7210,7 +7242,7 @@ import { motion as motion8 } from "framer-motion";
 import {
   forwardRef,
   useCallback as useCallback5,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useRef as useRef16,
   useState as useState10
 } from "react";
@@ -7326,7 +7358,7 @@ var FlowNode = forwardRef(function FlowNode2({
     },
     [isLockMode]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isDragging) return;
     const applyDelta = (clientX, clientY) => {
       const start = dragStartRef.current;
@@ -8067,7 +8099,7 @@ function FormSection({
 }
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect, useRef as useRef18, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useLayoutEffect, useRef as useRef18, useState as useState11 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs39 } from "react/jsx-runtime";
 function computePosition(rect, panelRect, placement, offset) {
@@ -8109,7 +8141,7 @@ function HoverCard({
       closeTimer.current = null;
     }
   };
-  useEffect9(() => () => clearTimers(), []);
+  useEffect10(() => () => clearTimers(), []);
   const show = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setOpen(true), openDelay);
@@ -8130,7 +8162,7 @@ function HoverCard({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const h = () => reposition();
     window.addEventListener("scroll", h, true);
@@ -8741,7 +8773,7 @@ function LinkButton({
 import { AnimatePresence as AnimatePresence6, motion as motion9 } from "framer-motion";
 import {
   useCallback as useCallback9,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo9,
   useRef as useRef20,
@@ -8803,7 +8835,7 @@ function MultiSelect({
     const rect = wrapRef.current.getBoundingClientRect();
     setDropdownPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!open) return;
     updatePosition();
     window.addEventListener("scroll", updatePosition, true);
@@ -8813,7 +8845,7 @@ function MultiSelect({
       window.removeEventListener("resize", updatePosition);
     };
   }, [open, updatePosition]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!open) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -8825,12 +8857,12 @@ function MultiSelect({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (open && showSearch) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
   }, [open, showSearch]);
-  useEffect10(() => setActiveIdx(0), [query, open]);
+  useEffect11(() => setActiveIdx(0), [query, open]);
   const [fitCount, setFitCount] = useState13(selectedValues.length);
   const [tick, setTick] = useState13(0);
   useLayoutEffect2(() => {
@@ -8859,7 +8891,7 @@ function MultiSelect({
     if (count < selectedValues.length && count > 0) count = Math.max(1, count - 1);
     setFitCount(count);
   }, [tick, selectedValues, maxVisibleTags]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (typeof ResizeObserver === "undefined") return;
     const row = tagsRowRef.current;
     if (!row) return;
@@ -9542,7 +9574,7 @@ function PhoneInput({
 }
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback12, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState16 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect12, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState16 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs53 } from "react/jsx-runtime";
 function computePosition2(rect, popRect, placement, offset) {
@@ -9597,7 +9629,7 @@ function Popover({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition, content]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open) return;
     const onScroll = () => reposition();
     window.addEventListener("scroll", onScroll, true);
@@ -9607,7 +9639,7 @@ function Popover({
       window.removeEventListener("resize", onScroll);
     };
   }, [open, reposition]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !closeOnClickOutside) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -9618,7 +9650,7 @@ function Popover({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open, closeOnClickOutside, setOpen]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -9819,7 +9851,7 @@ function ProgressRing({
 // src/components/PromptInput/PromptInput.tsx
 import {
   useCallback as useCallback13,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef23,
   useState as useState17
 } from "react";
@@ -9888,7 +9920,7 @@ function PromptInput({
     },
     [isControlled, onChange]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     const el = taRef.current;
     if (!el) return;
     const computed = window.getComputedStyle(el);
@@ -10551,7 +10583,7 @@ function Rating({
 // src/components/Resizable/Resizable.tsx
 import {
   useCallback as useCallback14,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useRef as useRef26,
   useState as useState19
 } from "react";
@@ -10592,7 +10624,7 @@ function Resizable({
     if (internalSplit != null) return internalSplit;
     return defaultSplit > 0 && defaultSplit < 1 ? 0 : defaultSplit;
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (splitProp != null) {
       setSplit(splitProp);
       return;
@@ -10625,7 +10657,7 @@ function Resizable({
     draggingRef.current = true;
     setDragging(true);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const el = wrapRef.current;
@@ -10732,7 +10764,7 @@ function ResizablePanel({
     setDragging(true);
     startRef.current = { x: e.clientX, size };
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const dx = e.clientX - startRef.current.x;
@@ -10795,7 +10827,7 @@ function Ribbon({
 
 // src/components/Select/Select.tsx
 import { AnimatePresence as AnimatePresence7, motion as motion10 } from "framer-motion";
-import { useCallback as useCallback15, useEffect as useEffect14, useMemo as useMemo10, useRef as useRef27, useState as useState20 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect15, useMemo as useMemo10, useRef as useRef27, useState as useState20 } from "react";
 import { HiddenSelect, useButton as useButton4, useListBox, useOption, useSelect } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
 import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs65 } from "react/jsx-runtime";
@@ -10951,7 +10983,7 @@ function Select({
       width: rect.width
     });
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.isOpen) {
       updatePosition();
       window.addEventListener("scroll", updatePosition, true);
@@ -10962,7 +10994,7 @@ function Select({
       };
     }
   }, [state.isOpen, updatePosition]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.isOpen && searchable && searchRef.current) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
@@ -11076,7 +11108,7 @@ function SettingsRow({
 
 // src/components/Sheet/Sheet.tsx
 import { AnimatePresence as AnimatePresence8, motion as motion11 } from "framer-motion";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs67 } from "react/jsx-runtime";
 var slideVariants = {
@@ -11111,7 +11143,7 @@ function Sheet({
   dragHandle = true,
   className
 }) {
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -11163,7 +11195,7 @@ function Sheet({
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef28, useState as useState21 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect17, useRef as useRef28, useState as useState21 } from "react";
 import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs68 } from "react/jsx-runtime";
 function Sidebar({
   variant = "expanded",
@@ -11186,7 +11218,7 @@ function Sidebar({
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
   const [internalPinned, setInternalPinned] = useState21(defaultPinned);
-  useEffect16(() => {
+  useEffect17(() => {
     if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
@@ -11221,7 +11253,7 @@ function Sidebar({
       closeTimer.current = null;
     }
   };
-  useEffect16(() => () => clearTimers(), []);
+  useEffect17(() => () => clearTimers(), []);
   const handleEnter = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setHoverOpen(true), hoverOpenDelay);
@@ -11233,7 +11265,7 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
-  useEffect16(() => {
+  useEffect17(() => {
     if (!overlayOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -11383,23 +11415,24 @@ function RailItem({
   tooltipDelay,
   suppressTooltip
 }) {
-  const [tipOpen, setTipOpen] = useState21(false);
+  const [open, setOpen] = useState21(false);
   const timerRef = useRef28(null);
+  const hasChildren = !!(item.children && item.children.length > 0);
   const clear = () => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   };
-  useEffect16(() => () => clear(), []);
+  useEffect17(() => () => clear(), []);
   const show = () => {
     if (suppressTooltip) return;
     clear();
-    timerRef.current = setTimeout(() => setTipOpen(true), tooltipDelay);
+    timerRef.current = setTimeout(() => setOpen(true), tooltipDelay);
   };
   const hide = () => {
     clear();
-    setTipOpen(false);
+    setOpen(false);
   };
   const Comp = item.href ? "a" : "button";
   const labelText = typeof item.label === "string" ? item.label : void 0;
@@ -11418,13 +11451,20 @@ function RailItem({
             type: item.href ? void 0 : "button",
             href: item.href,
             onClick: item.onClick,
-            className: cn("ods-sidebar__rail-item", item.active && "ods-sidebar__rail-item--active"),
+            className: cn(
+              "ods-sidebar__rail-item",
+              hasChildren && "ods-sidebar__rail-item--parent",
+              item.active && "ods-sidebar__rail-item--active"
+            ),
             "aria-current": item.active ? "page" : void 0,
             "aria-label": labelText,
+            "aria-haspopup": hasChildren ? "menu" : void 0,
+            "aria-expanded": hasChildren ? open : void 0,
             children: /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-icon", children: item.icon })
           }
         ),
-        tipOpen && labelText && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
+        open && labelText && hasChildren && /* @__PURE__ */ jsx69(RailFlyout, { title: labelText, items: item.children ?? [] }),
+        open && labelText && !hasChildren && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
           /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-tooltip-label", children: labelText }),
           item.shortcut && /* @__PURE__ */ jsx69("kbd", { className: "ods-sidebar__rail-kbd", children: item.shortcut })
         ] })
@@ -11432,6 +11472,34 @@ function RailItem({
     }
   );
 }
+function RailFlyout({ title, items }) {
+  return /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-flyout", role: "menu", children: [
+    /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__rail-flyout-header", children: /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-title", children: title }) }),
+    /* @__PURE__ */ jsx69("ul", { className: "ods-sidebar__rail-flyout-list", children: items.map((child) => {
+      const ChildComp = child.href ? "a" : "button";
+      return /* @__PURE__ */ jsx69("li", { children: /* @__PURE__ */ jsxs68(
+        ChildComp,
+        {
+          type: child.href ? void 0 : "button",
+          href: child.href,
+          onClick: child.onClick,
+          role: "menuitem",
+          className: cn(
+            "ods-sidebar__rail-flyout-item",
+            child.active && "ods-sidebar__rail-flyout-item--active"
+          ),
+          "aria-current": child.active ? "page" : void 0,
+          children: [
+            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-icon", children: child.icon }),
+            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-label", children: child.label }),
+            child.tag && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-tag", children: child.tag }),
+            child.badge && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-badge", children: child.badge })
+          ]
+        }
+      ) }, child.id);
+    }) })
+  ] });
+}
 function ExpandedLayout({
   logo,
   brand,
@@ -11913,7 +11981,7 @@ function SocialButton({
 // src/components/Sortable/Sortable.tsx
 import {
   useCallback as useCallback17,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useRef as useRef30,
   useState as useState22
 } from "react";
@@ -11996,7 +12064,7 @@ function Sortable({
     },
     [items, onChange]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!autoScroll || !draggingId) return;
     const container = containerRef.current;
     if (!container) return;
@@ -12046,7 +12114,7 @@ function Sortable({
       }
     };
   }, [autoScroll, autoScrollEdge, draggingId, isVertical]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!draggingId) return;
     const onKey = (e) => {
       if (e.key === "Escape") cancelDrag();
@@ -12899,7 +12967,7 @@ function Timeline({ items, size = "md", className }) {
 import {
   Fragment as Fragment18,
   useCallback as useCallback19,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useRef as useRef34,
   useState as useState27
 } from "react";
@@ -12938,7 +13006,7 @@ function TimePicker({
   const minutesRef = useRef34(null);
   const secondsRef = useRef34(null);
   const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
-  useEffect18(() => {
+  useEffect19(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -13199,7 +13267,7 @@ function TimePicker({
 }
 
 // src/components/TimezonePicker/TimezonePicker.tsx
-import { useEffect as useEffect19, useMemo as useMemo12, useRef as useRef35, useState as useState28 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo12, useRef as useRef35, useState as useState28 } from "react";
 import { Fragment as Fragment20, jsx as jsx86, jsxs as jsxs83 } from "react/jsx-runtime";
 var DEFAULT_TZS = [
   { iana: "America/Los_Angeles", label: "Pacific Time", offset: "UTC\u22128" },
@@ -13239,7 +13307,7 @@ function TimezonePicker({
       (o) => o.iana.toLowerCase().includes(q) || o.label.toLowerCase().includes(q) || o.offset.toLowerCase().includes(q) || o.region?.toLowerCase().includes(q)
     );
   }, [options, query]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -13250,7 +13318,7 @@ function TimezonePicker({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (open) requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
   const select = (iana) => {
@@ -13871,7 +13939,7 @@ import { AnimatePresence as AnimatePresence11, motion as motion15 } from "framer
 import {
   cloneElement,
   useCallback as useCallback21,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useLayoutEffect as useLayoutEffect4,
   useRef as useRef37,
   useState as useState30
@@ -13922,7 +13990,7 @@ function TooltipContent({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [state.isOpen, reposition]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!state.isOpen) return;
     const handler = () => reposition();
     window.addEventListener("scroll", handler, true);
@@ -15702,13 +15770,13 @@ function YamlViewer({
 
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect21, useMemo as useMemo18 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect22, useMemo as useMemo18 } from "react";
 import { OverlayProvider as OverlayProvider3 } from "react-aria";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var OdsContext = createContext3(null);
 function OdsProvider({ config: userConfig, children }) {
   const resolved = useMemo18(() => resolveConfig(userConfig), [userConfig]);
-  useEffect21(() => {
+  useEffect22(() => {
     const cssVarsBlock = generateCssVars(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {