@octaviaflow/core 3.0.18-beta.45 → 3.0.18-beta.47

package/dist/index.js

@@ -11873,12 +11873,99 @@ function ChevronRightSmall() {
 import { CalendarIcon, ChevronDownIcon as ChevronDownIcon5 } from "@octaviaflow/icons";
 import {
   forwardRef as forwardRef36,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useId as useId21,
   useImperativeHandle as useImperativeHandle7,
   useRef as useRef21,
+  useState as useState22
+} from "react";
+import { createPortal as createPortal9 } from "react-dom";
+
+// src/utils/useAnchoredPopover.ts
+import {
+  useCallback as useCallback19,
+  useEffect as useEffect17,
   useState as useState21
 } from "react";
+function computeAnchoredPosition({
+  anchor,
+  viewport,
+  popoverWidth,
+  gap,
+  margin,
+  preferredMinHeight
+}) {
+  const spaceBelow = viewport.height - anchor.bottom - gap - margin;
+  const spaceAbove = anchor.top - gap - margin;
+  const openUp = spaceBelow < preferredMinHeight && spaceAbove > spaceBelow;
+  const popW = popoverWidth && popoverWidth > 0 ? popoverWidth : anchor.width;
+  const maxLeft = viewport.width - popW - margin;
+  let left = anchor.left;
+  if (left > maxLeft) left = maxLeft;
+  if (left < margin) left = margin;
+  return {
+    ...openUp ? { bottom: viewport.height - anchor.top + gap } : { top: anchor.bottom + gap },
+    left,
+    width: anchor.width,
+    maxHeight: Math.max(120, openUp ? spaceAbove : spaceBelow),
+    direction: openUp ? "up" : "down"
+  };
+}
+function useAnchoredPopover(anchorRef, open, options = {}) {
+  const { gap = 4, margin = 8, preferredMinHeight = 200, popoverRef } = options;
+  const [pos, setPos] = useState21({
+    top: -9999,
+    left: -9999,
+    width: 0,
+    maxHeight: 320,
+    direction: "down"
+  });
+  const update = useCallback19(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const popoverWidth = popoverRef?.current?.offsetWidth;
+    setPos(
+      computeAnchoredPosition({
+        anchor: {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          width: rect.width
+        },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        popoverWidth,
+        gap,
+        margin,
+        preferredMinHeight
+      })
+    );
+  }, [anchorRef, popoverRef, gap, margin, preferredMinHeight]);
+  useEffect17(() => {
+    if (!open) return;
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, update]);
+  return pos;
+}
+function anchoredPopoverStyle(pos, extra) {
+  return {
+    position: "fixed",
+    ...pos.top !== void 0 ? { top: pos.top } : {},
+    ...pos.bottom !== void 0 ? { bottom: pos.bottom } : {},
+    left: pos.left,
+    minWidth: pos.width,
+    maxHeight: pos.maxHeight,
+    ...extra
+  };
+}
+
+// src/components/DatePicker/DatePicker.tsx
 import { jsx as jsx39, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultFormat2 = (d) => d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
 function toIsoDate(d) {
@@ -11911,22 +11998,36 @@ var DatePicker = forwardRef36(
     className,
     ...rest
   }, forwardedRef) {
-    const [open, setOpen] = useState21(false);
+    const [open, setOpen] = useState22(false);
     const wrapRef = useRef21(null);
     const triggerRef = useRef21(null);
+    const popoverRef = useRef21(null);
+    const popoverPos = useAnchoredPopover(triggerRef, open, { popoverRef });
     useImperativeHandle7(forwardedRef, () => triggerRef.current);
     const reactId = useId21();
     const baseId = id ?? `ods-dp-${reactId}`;
     const helperId = error || helperText ? `${baseId}-helper` : void 0;
     const ariaLabelForDialog = popoverAriaLabel ?? (typeof label === "string" ? `${label} calendar` : "Date picker");
-    useEffect17(() => {
+    useEffect18(() => {
       if (!open) return;
       const onDoc = (e) => {
-        if (!wrapRef.current?.contains(e.target)) setOpen(false);
+        const target = e.target;
+        if (!wrapRef.current?.contains(target) && !popoverRef.current?.contains(target))
+          setOpen(false);
+      };
+      const onKey = (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          setOpen(false);
+          triggerRef.current?.focus();
+        }
       };
       document.addEventListener("mousedown", onDoc);
-      return () => document.removeEventListener("mousedown", onDoc);
-    }, [open]);
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDoc);
+        document.removeEventListener("keydown", onKey);
+      };
+    }, [open, closeOnEsc]);
     const handleKeyDown = (e) => {
       if (closeOnEsc && e.key === "Escape" && open) {
         e.stopPropagation();
@@ -11992,30 +12093,35 @@ var DatePicker = forwardRef36(
               required
             }
           ),
-          open && /* @__PURE__ */ jsx39(
-            "div",
-            {
-              className: "ods-datepicker__popover",
-              role: "dialog",
-              "aria-modal": "false",
-              "aria-label": ariaLabelForDialog,
-              children: /* @__PURE__ */ jsx39(
-                Calendar,
-                {
-                  mode: "single",
-                  value,
-                  onChange: (d) => {
-                    onChange?.(d);
-                    setOpen(false);
-                    triggerRef.current?.focus();
-                  },
-                  minDate,
-                  maxDate,
-                  locale,
-                  autoFocus: true
-                }
-              )
-            }
+          open && typeof document !== "undefined" && createPortal9(
+            /* @__PURE__ */ jsx39(
+              "div",
+              {
+                ref: popoverRef,
+                className: "ods-datepicker__popover",
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-label": ariaLabelForDialog,
+                style: anchoredPopoverStyle(popoverPos),
+                children: /* @__PURE__ */ jsx39(
+                  Calendar,
+                  {
+                    mode: "single",
+                    value,
+                    onChange: (d) => {
+                      onChange?.(d);
+                      setOpen(false);
+                      triggerRef.current?.focus();
+                    },
+                    minDate,
+                    maxDate,
+                    locale,
+                    autoFocus: true
+                  }
+                )
+              }
+            ),
+            document.body
           ),
           (error || helperText) && /* @__PURE__ */ jsx39(
             "div",
@@ -12376,9 +12482,9 @@ Drawer.displayName = "Drawer";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { AnimatePresence as AnimatePresence13, motion as motion19 } from "framer-motion";
-import { useEffect as useEffect18, useMemo as useMemo14, useRef as useRef22 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo14, useRef as useRef22 } from "react";
 import { useButton as useButton4, useMenu, useMenuItem, useMenuTrigger } from "react-aria";
-import { createPortal as createPortal9 } from "react-dom";
+import { createPortal as createPortal10 } from "react-dom";
 import { Fragment as Fragment22, jsx as jsx44, jsxs as jsxs43 } from "react/jsx-runtime";
 function MenuItemComponent({ item, state, onAction }) {
   const ref = useRef22(null);
@@ -12414,7 +12520,7 @@ function MenuPopup({
   ariaNameProps
 }) {
   const menuRef = useRef22(null);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!state.isOpen || !closeOnOutsideClick) return;
     const handler = (e) => {
       const target = e.target;
@@ -12428,7 +12534,7 @@ function MenuPopup({
     document.addEventListener("mousedown", handler, true);
     return () => document.removeEventListener("mousedown", handler, true);
   }, [state.isOpen, closeOnOutsideClick]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!state.isOpen || !closeOnEscape) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -12542,7 +12648,7 @@ function MenuPopup({
     }
   ) });
   if (typeof document !== "undefined") {
-    return createPortal9(portalContent, document.body);
+    return createPortal10(portalContent, document.body);
   }
   return null;
 }
@@ -12639,7 +12745,7 @@ EmptyState.displayName = "EmptyState";
 
 // src/components/ExecutionConsole/ExecutionConsole.tsx
 import { motion as motion20 } from "framer-motion";
-import { useEffect as useEffect19, useMemo as useMemo15, useRef as useRef23, useState as useState22 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo15, useRef as useRef23, useState as useState23 } from "react";
 import { Fragment as Fragment23, jsx as jsx46, jsxs as jsxs45 } from "react/jsx-runtime";
 var iconProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -12712,12 +12818,12 @@ function ExecutionConsole({
   const logEndRef = useRef23(null);
   const logsRef = useRef23(null);
   const lastScrollTopRef = useRef23(0);
-  const [query, setQuery] = useState22("");
-  const [activeLevels, setActiveLevels] = useState22(() => new Set(ALL_LEVELS));
-  const [activeNode, setActiveNode] = useState22("all");
-  const [autoScroll, setAutoScroll] = useState22(running);
-  const [expandedLines, setExpandedLines] = useState22(/* @__PURE__ */ new Set());
-  const [exportMenuOpen, setExportMenuOpen] = useState22(false);
+  const [query, setQuery] = useState23("");
+  const [activeLevels, setActiveLevels] = useState23(() => new Set(ALL_LEVELS));
+  const [activeNode, setActiveNode] = useState23("all");
+  const [autoScroll, setAutoScroll] = useState23(running);
+  const [expandedLines, setExpandedLines] = useState23(/* @__PURE__ */ new Set());
+  const [exportMenuOpen, setExportMenuOpen] = useState23(false);
   const nodeOptions = useMemo15(() => {
     const seen = /* @__PURE__ */ new Map();
     for (const log of logs) {
@@ -12740,13 +12846,13 @@ function ExecutionConsole({
     });
   }, [logs, query, activeLevels, activeNode]);
   const prevRunningRef = useRef23(running);
-  useEffect19(() => {
+  useEffect20(() => {
     if (prevRunningRef.current !== running) {
       setAutoScroll(running);
       prevRunningRef.current = running;
     }
   }, [running]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open || !autoScroll) return;
     const el = logEndRef.current;
     if (el && typeof el.scrollIntoView === "function") {
@@ -13226,12 +13332,12 @@ import {
 } from "@octaviaflow/icons";
 import {
   forwardRef as forwardRef43,
-  useCallback as useCallback19,
-  useEffect as useEffect20,
+  useCallback as useCallback20,
+  useEffect as useEffect21,
   useId as useId24,
   useImperativeHandle as useImperativeHandle8,
   useRef as useRef24,
-  useState as useState23
+  useState as useState24
 } from "react";
 
 // src/utils/sanitizeUrl.ts
@@ -13359,10 +13465,10 @@ var FileDropzone = forwardRef43(
     const dropzoneRef = useRef24(null);
     useImperativeHandle8(forwardedRef, () => dropzoneRef.current);
     const inputId = useId24();
-    const [isOver, setOver] = useState23(false);
-    const [error, setError] = useState23(null);
-    const [autoPreviews, setAutoPreviews] = useState23({});
-    const validate = useCallback19(
+    const [isOver, setOver] = useState24(false);
+    const [error, setError] = useState24(null);
+    const [autoPreviews, setAutoPreviews] = useState24({});
+    const validate = useCallback20(
       (list) => {
         if (maxFiles && list.length > maxFiles) {
           return { ok: [], error: `Too many files \u2014 max ${maxFiles}` };
@@ -13391,7 +13497,7 @@ var FileDropzone = forwardRef43(
       },
       [accept, maxFiles, maxSize]
     );
-    const handleFiles = useCallback19(
+    const handleFiles = useCallback20(
       (incoming) => {
         if (disabled) return;
         const { ok, error: error2 } = validate(incoming);
@@ -13400,7 +13506,7 @@ var FileDropzone = forwardRef43(
       },
       [disabled, onFiles, validate]
     );
-    useEffect20(() => {
+    useEffect21(() => {
       if (!files) return;
       const next = {};
       const created = [];
@@ -13417,7 +13523,7 @@ var FileDropzone = forwardRef43(
         for (const u of created) URL.revokeObjectURL(u);
       };
     }, [files]);
-    useEffect20(() => {
+    useEffect21(() => {
       if (!pasteEnabled || disabled) return;
       const onPaste = (e) => {
         const active = document.activeElement;
@@ -13675,10 +13781,10 @@ FileDropzone.displayName = "FileDropzone";
 
 // src/components/FlowCanvas/FlowCanvas.tsx
 import { AnimatePresence as AnimatePresence14 } from "framer-motion";
-import { useCallback as useCallback21, useRef as useRef26 } from "react";
+import { useCallback as useCallback22, useRef as useRef26 } from "react";
 
 // src/components/FlowEdge/FlowEdge.tsx
-import { useId as useId25, useState as useState24 } from "react";
+import { useId as useId25, useState as useState25 } from "react";
 import { jsx as jsx49, jsxs as jsxs48 } from "react/jsx-runtime";
 var DEFAULT_NODE_WIDTH = 368;
 var DEFAULT_NODE_HEIGHT = 96;
@@ -13722,7 +13828,7 @@ function FlowEdge({
 }) {
   const uid = useId25();
   const markerId = `ods-flow-edge-arrow-${uid.replace(/:/g, "")}`;
-  const [hovered, setHovered] = useState24(false);
+  const [hovered, setHovered] = useState25(false);
   const sourceNode = nodes.find((n) => n.id === edge.source);
   const targetNode = nodes.find((n) => n.id === edge.target);
   if (!sourceNode || !targetNode) return null;
@@ -13862,10 +13968,10 @@ function FlowEdge({
 import { motion as motion21 } from "framer-motion";
 import {
   forwardRef as forwardRef44,
-  useCallback as useCallback20,
-  useEffect as useEffect21,
+  useCallback as useCallback21,
+  useEffect as useEffect22,
   useRef as useRef25,
-  useState as useState25
+  useState as useState26
 } from "react";
 import { jsx as jsx50, jsxs as jsxs49 } from "react/jsx-runtime";
 var DRAG_THRESHOLD_PX = 5;
@@ -13926,11 +14032,11 @@ var FlowNode = forwardRef44(function FlowNode2({
   className,
   style
 }, ref) {
-  const [isDragging, setIsDragging] = useState25(false);
-  const [wasDragged, setWasDragged] = useState25(false);
+  const [isDragging, setIsDragging] = useState26(false);
+  const [wasDragged, setWasDragged] = useState26(false);
   const dragStartRef = useRef25(null);
   const zoom = viewport?.zoom ?? 1;
-  const handleClick = useCallback20(
+  const handleClick = useCallback21(
     (e) => {
       e.stopPropagation();
       if (wasDragged) {
@@ -13941,7 +14047,7 @@ var FlowNode = forwardRef44(function FlowNode2({
     },
     [node.id, onSelect, wasDragged]
   );
-  const handleDelete = useCallback20(
+  const handleDelete = useCallback21(
     (e) => {
       e.stopPropagation();
       if (isLockMode) return;
@@ -13949,7 +14055,7 @@ var FlowNode = forwardRef44(function FlowNode2({
     },
     [node.id, onDelete, isLockMode]
   );
-  const handleMouseDown = useCallback20(
+  const handleMouseDown = useCallback21(
     (e) => {
       if (isLockMode) return;
       const target = e.target;
@@ -13962,7 +14068,7 @@ var FlowNode = forwardRef44(function FlowNode2({
     },
     [isLockMode]
   );
-  const handleTouchStart = useCallback20(
+  const handleTouchStart = useCallback21(
     (e) => {
       if (isLockMode) return;
       if (e.touches.length !== 1) return;
@@ -13979,7 +14085,7 @@ var FlowNode = forwardRef44(function FlowNode2({
     },
     [isLockMode]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     if (!isDragging) return;
     const applyDelta = (clientX, clientY) => {
       const start = dragStartRef.current;
@@ -14024,7 +14130,7 @@ var FlowNode = forwardRef44(function FlowNode2({
       document.removeEventListener("touchcancel", onTouchEnd);
     };
   }, [isDragging, zoom, node.id, node.position.x, node.position.y, onPositionChange]);
-  const handlePortMouseDown = useCallback20(
+  const handlePortMouseDown = useCallback21(
     (e, portId, portType) => {
       e.stopPropagation();
       if (isLockMode) return;
@@ -14034,7 +14140,7 @@ var FlowNode = forwardRef44(function FlowNode2({
     },
     [connectingFrom, isLockMode, node.id, onStartConnecting]
   );
-  const handlePortMouseUp = useCallback20(
+  const handlePortMouseUp = useCallback21(
     (e, portId, portType) => {
       e.stopPropagation();
       if (isLockMode) return;
@@ -14043,7 +14149,7 @@ var FlowNode = forwardRef44(function FlowNode2({
     },
     [connectingFrom, isLockMode, node.id, onEndConnecting]
   );
-  const isPortEdgeSelected = useCallback20(
+  const isPortEdgeSelected = useCallback21(
     (portId, portType) => edges.some(
       (edge) => edge.selected && (portType === "input" ? edge.target === node.id && edge.targetPort === portId : edge.source === node.id && edge.sourcePort === portId)
     ),
@@ -14278,7 +14384,7 @@ function FlowCanvas2({
 }) {
   const canvasRef = useRef26(null);
   const isEmpty = nodes.length === 0 && edges.length === 0;
-  const handleCanvasClick = useCallback21(
+  const handleCanvasClick = useCallback22(
     (e) => {
       const target = e.target;
       if (target === canvasRef.current) {
@@ -14370,12 +14476,12 @@ function FlowCanvas2({
 
 // src/components/FlowMinimap/FlowMinimap.tsx
 import {
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext,
-  useEffect as useEffect22,
+  useEffect as useEffect23,
   useMemo as useMemo16,
   useRef as useRef27,
-  useState as useState26,
+  useState as useState27,
   useSyncExternalStore
 } from "react";
 import { jsx as jsx52, jsxs as jsxs51 } from "react/jsx-runtime";
@@ -14408,8 +14514,8 @@ function FlowMinimap(props) {
     [store]
   );
   const liveSnapshot = useSyncExternalStore(sub, snap, snap);
-  const [registryVersion, setRegistryVersion] = useState26(0);
-  useEffect22(() => {
+  const [registryVersion, setRegistryVersion] = useState27(0);
+  useEffect23(() => {
     if (!handleRegistry) return;
     return handleRegistry.subscribe(() => setRegistryVersion((v) => v + 1));
   }, [handleRegistry]);
@@ -14463,8 +14569,8 @@ function FlowMinimap(props) {
     });
   }, [edgesProp, liveSnapshot, handleRegistry, registryVersion]);
   const minimapRef = useRef27(null);
-  const [canvasSize, setCanvasSize] = useState26(null);
-  useEffect22(() => {
+  const [canvasSize, setCanvasSize] = useState27(null);
+  useEffect23(() => {
     if (!liveSnapshot) return;
     const el = minimapRef.current?.closest(".ods-flow-canvas-v2");
     if (!el) return;
@@ -14518,7 +14624,7 @@ function FlowMinimap(props) {
       h: maxY - minY + bounds_padding * 2
     };
   }, [totalWidthProp, totalHeightProp, contentBounds, bounds_padding]);
-  const clampWorldTopLeft = useCallback22(
+  const clampWorldTopLeft = useCallback23(
     (worldX, worldY, vw, vh) => {
       if (!contentBounds) return { x: worldX, y: worldY };
       const minTLX = viewBox.x;
@@ -14531,7 +14637,7 @@ function FlowMinimap(props) {
     },
     [contentBounds, viewBox.x, viewBox.y, viewBox.w, viewBox.h]
   );
-  const reportViewportChange = useCallback22(
+  const reportViewportChange = useCallback23(
     (worldX, worldY) => {
       if (effectiveViewportRect) {
         const clamped = clampWorldTopLeft(
@@ -14567,7 +14673,7 @@ function FlowMinimap(props) {
     [onViewportChange, viewportProp?.zoom, instance, liveSnapshot, effectiveViewportRect, clampWorldTopLeft]
   );
   const svgRef = useRef27(null);
-  const pointToWorld = useCallback22(
+  const pointToWorld = useCallback23(
     (clientX, clientY) => {
       const svg = svgRef.current;
       if (!svg) return null;
@@ -14593,8 +14699,8 @@ function FlowMinimap(props) {
     startClientY: 0
   });
   const suppressNextClickRef = useRef27(false);
-  const [isDragging, setIsDragging] = useState26(false);
-  const onViewportPointerDown = useCallback22(
+  const [isDragging, setIsDragging] = useState27(false);
+  const onViewportPointerDown = useCallback23(
     (e) => {
       if (!effectiveViewportRect) return;
       e.stopPropagation();
@@ -14616,7 +14722,7 @@ function FlowMinimap(props) {
     },
     [effectiveViewportRect, pointToWorld]
   );
-  const onSvgPointerMove = useCallback22(
+  const onSvgPointerMove = useCallback23(
     (e) => {
       const d = dragRef.current;
       if (!d.dragging || d.pointerId !== e.pointerId) return;
@@ -14632,7 +14738,7 @@ function FlowMinimap(props) {
     },
     [pointToWorld, reportViewportChange]
   );
-  const onSvgPointerUp = useCallback22((e) => {
+  const onSvgPointerUp = useCallback23((e) => {
     const d = dragRef.current;
     if (d.dragging && d.pointerId === e.pointerId) {
       d.dragging = false;
@@ -14641,7 +14747,7 @@ function FlowMinimap(props) {
       e.currentTarget.releasePointerCapture?.(e.pointerId);
     }
   }, []);
-  const handleSvgClick = useCallback22(
+  const handleSvgClick = useCallback23(
     (e) => {
       if (suppressNextClickRef.current) {
         suppressNextClickRef.current = false;
@@ -14659,7 +14765,7 @@ function FlowMinimap(props) {
     },
     [pointToWorld, effectiveViewportRect, reportViewportChange]
   );
-  const handleWheel = useCallback22(
+  const handleWheel = useCallback23(
     (e) => {
       if (!zoomOnScroll) return;
       if (!instance || !liveSnapshot) return;
@@ -14685,7 +14791,7 @@ function FlowMinimap(props) {
     },
     [zoomOnScroll, instance, liveSnapshot, canvasSize, pointToWorld, clampWorldTopLeft]
   );
-  useEffect22(
+  useEffect23(
     () => () => {
       dragRef.current.dragging = false;
     },
@@ -14785,7 +14891,7 @@ import {
   ZoomInIcon,
   ZoomOutIcon
 } from "@octaviaflow/icons";
-import { useEffect as useEffect23, useRef as useRef28, useState as useState27 } from "react";
+import { useEffect as useEffect24, useRef as useRef28, useState as useState28 } from "react";
 
 // src/components/Spinner/Spinner.tsx
 import {
@@ -14939,10 +15045,10 @@ function FlowToolbarSave({
   showLabel = false,
   className
 }) {
-  const [inferred, setInferred] = useState27("idle");
+  const [inferred, setInferred] = useState28("idle");
   const prevSavedAt = useRef28(lastSavedAt);
   const prevLoading = useRef28(loading);
-  useEffect23(() => {
+  useEffect24(() => {
     if (state !== void 0) return;
     if (error) {
       setInferred("error");
@@ -15581,10 +15687,10 @@ var Grid2 = Object.assign(GridBase, { Item: GridItem });
 import { AnimatePresence as AnimatePresence15, motion as motion23 } from "framer-motion";
 import {
   forwardRef as forwardRef48,
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   useId as useId27,
   useMemo as useMemo18,
-  useState as useState28
+  useState as useState29
 } from "react";
 import { jsx as jsx58, jsxs as jsxs55 } from "react/jsx-runtime";
 var DEFAULT_SCALE2 = [
@@ -15657,15 +15763,15 @@ var Heatmap = forwardRef48(
       () => domainMax ?? (data.length ? Math.max(...data.map((d) => d.value)) : 1),
       [domainMax, data]
     );
-    const [hovered, setHovered] = useState28(null);
-    const fire = useCallback23(
+    const [hovered, setHovered] = useState29(null);
+    const fire = useCallback24(
       (cell) => {
         setHovered(cell);
         onCellHover?.(cell);
       },
       [onCellHover]
     );
-    const handleKey = useCallback23(
+    const handleKey = useCallback24(
       (e, cell) => {
         if (!onCellClick) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -15838,8 +15944,8 @@ var Heatmap = forwardRef48(
 Heatmap.displayName = "Heatmap";
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback24, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6, useRef as useRef29, useState as useState29 } from "react";
-import { createPortal as createPortal10 } from "react-dom";
+import { useCallback as useCallback25, useEffect as useEffect25, useLayoutEffect as useLayoutEffect6, useRef as useRef29, useState as useState30 } from "react";
+import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment25, jsx as jsx59, jsxs as jsxs56 } from "react/jsx-runtime";
 function computePosition3(rect, panelRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
@@ -15864,12 +15970,12 @@ function HoverCard({
   children,
   className
 }) {
-  const [open, setOpen] = useState29(false);
+  const [open, setOpen] = useState30(false);
   const triggerRef = useRef29(null);
   const panelRef = useRef29(null);
   const openTimer = useRef29(null);
   const closeTimer = useRef29(null);
-  const [coords, setCoords] = useState29(null);
+  const [coords, setCoords] = useState30(null);
   const clearTimers = () => {
     if (openTimer.current) {
       clearTimeout(openTimer.current);
@@ -15880,7 +15986,7 @@ function HoverCard({
       closeTimer.current = null;
     }
   };
-  useEffect24(() => () => clearTimers(), []);
+  useEffect25(() => () => clearTimers(), []);
   const show = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setOpen(true), openDelay);
@@ -15889,7 +15995,7 @@ function HoverCard({
     clearTimers();
     closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
   };
-  const reposition = useCallback24(() => {
+  const reposition = useCallback25(() => {
     if (!triggerRef.current || !panelRef.current) return;
     const trigRect = triggerRef.current.getBoundingClientRect();
     const panelRect = panelRef.current.getBoundingClientRect();
@@ -15901,7 +16007,7 @@ function HoverCard({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!open) return;
     const h = () => reposition();
     window.addEventListener("scroll", h, true);
@@ -15923,7 +16029,7 @@ function HoverCard({
       children
     }
   );
-  const portal = typeof document !== "undefined" && open ? createPortal10(
+  const portal = typeof document !== "undefined" && open ? createPortal11(
     /* @__PURE__ */ jsx59(
       "div",
       {
@@ -16413,9 +16519,9 @@ IntegrationCard.displayName = "IntegrationCard";
 import { CheckmarkIcon as CheckmarkIcon8, ChevronRightIcon as ChevronRightIcon3, CopyIcon as CopyIcon4 } from "@octaviaflow/icons";
 import {
   forwardRef as forwardRef52,
-  useEffect as useEffect25,
+  useEffect as useEffect26,
   useMemo as useMemo19,
-  useState as useState30
+  useState as useState31
 } from "react";
 import { Fragment as Fragment28, jsx as jsx63, jsxs as jsxs60 } from "react/jsx-runtime";
 var JsonViewer = forwardRef52(
@@ -16466,7 +16572,7 @@ function JsonNode({
   truncateAt,
   isLast = true
 }) {
-  const [open, setOpen] = useState30(depth < defaultExpandDepth);
+  const [open, setOpen] = useState31(depth < defaultExpandDepth);
   const isObject = value !== null && typeof value === "object" && !Array.isArray(value);
   const isArray = Array.isArray(value);
   const isContainer = isObject || isArray;
@@ -16557,7 +16663,7 @@ function Leaf({
   truncateAt,
   copyable
 }) {
-  const [copied, setCopied] = useState30(false);
+  const [copied, setCopied] = useState31(false);
   let display;
   let variant;
   if (value === null) {
@@ -16643,8 +16749,8 @@ function JsonEditBody({ data, onChange, onValidate }) {
       return "{}";
     }
   }, []);
-  const [text, setText] = useState30(initial);
-  const [parseError, setParseError] = useState30(null);
+  const [text, setText] = useState31(initial);
+  const [parseError, setParseError] = useState31(null);
   const validate = (next) => {
     try {
       JSON.parse(next);
@@ -16661,7 +16767,7 @@ function JsonEditBody({ data, onChange, onValidate }) {
     onChange?.(next);
     validate(next);
   };
-  useEffect25(() => {
+  useEffect26(() => {
     validate(initial);
   }, []);
   return /* @__PURE__ */ jsxs60("div", { className: "ods-json-viewer__edit", children: [
@@ -16893,12 +16999,12 @@ KbdGroup.displayName = "KbdGroup";
 import { AnimatePresence as AnimatePresence16, motion as motion24 } from "framer-motion";
 import {
   forwardRef as forwardRef55,
-  useCallback as useCallback25,
-  useEffect as useEffect26,
+  useCallback as useCallback26,
+  useEffect as useEffect27,
   useId as useId32,
   useMemo as useMemo20,
   useRef as useRef31,
-  useState as useState31
+  useState as useState32
 } from "react";
 import { jsx as jsx66, jsxs as jsxs63 } from "react/jsx-runtime";
 var defaultFormat5 = (n) => {
@@ -16976,7 +17082,7 @@ var LineChart = forwardRef55(
         }
       ];
     }, [series, data, stroke, fill]);
-    const [zoom, setZoom] = useState31(
+    const [zoom, setZoom] = useState32(
       null
     );
     const totalX = allLines[0]?.data.length ?? 0;
@@ -17017,11 +17123,11 @@ var LineChart = forwardRef55(
       () => buildTicks2(lo, hi, Math.max(2, yTicks)),
       [lo, hi, yTicks]
     );
-    const [hoveredIdx, setHoveredIdx] = useState31(null);
-    const [pointerPct, setPointerPct] = useState31(null);
+    const [hoveredIdx, setHoveredIdx] = useState32(null);
+    const [pointerPct, setPointerPct] = useState32(null);
     const plotRef = useRef31(null);
-    const [brush, setBrush] = useState31(null);
-    const indexFromPct = useCallback25(
+    const [brush, setBrush] = useState32(null);
+    const indexFromPct = useCallback26(
       (pct) => {
         if (xCount === 0) return 0;
         return Math.max(
@@ -17031,7 +17137,7 @@ var LineChart = forwardRef55(
       },
       [xCount]
     );
-    const handlePlotMove = useCallback25(
+    const handlePlotMove = useCallback26(
       (e) => {
         if (xCount === 0) return;
         const rect = plotRef.current?.getBoundingClientRect();
@@ -17060,12 +17166,12 @@ var LineChart = forwardRef55(
         visibleRange.start
       ]
     );
-    const handlePlotLeave = useCallback25(() => {
+    const handlePlotLeave = useCallback26(() => {
       setHoveredIdx(null);
       setPointerPct(null);
       onPointHover?.(null, null, null);
     }, [onPointHover]);
-    const handlePlotDown = useCallback25(
+    const handlePlotDown = useCallback26(
       (e) => {
         if (!zoomable) return;
         const rect = plotRef.current?.getBoundingClientRect();
@@ -17078,7 +17184,7 @@ var LineChart = forwardRef55(
       },
       [zoomable]
     );
-    useEffect26(() => {
+    useEffect27(() => {
       if (!brush) return;
       const onUp = () => {
         const a = Math.min(brush.startPct, brush.currentPct);
@@ -17099,12 +17205,12 @@ var LineChart = forwardRef55(
       window.addEventListener("mouseup", onUp);
       return () => window.removeEventListener("mouseup", onUp);
     }, [brush, indexFromPct, visibleRange.start, onZoomChange]);
-    const handleDoubleClick = useCallback25(() => {
+    const handleDoubleClick = useCallback26(() => {
       if (!zoomable || !zoom) return;
       setZoom(null);
       onZoomChange?.(null);
     }, [zoomable, zoom, onZoomChange]);
-    const handlePlotClick = useCallback25(() => {
+    const handlePlotClick = useCallback26(() => {
       if (hoveredIdx === null || !onPointClick) return;
       const s = lines[0];
       const p = s?.data[hoveredIdx];
@@ -17124,11 +17230,11 @@ var LineChart = forwardRef55(
     const showX = showAxis === "x" || showAxis === "both";
     const isMulti = (series?.length ?? 0) > 0;
     const tooltipPoint = hoveredIdx !== null ? lines[0]?.data[hoveredIdx] : void 0;
-    const dataXPct = useCallback25(
+    const dataXPct = useCallback26(
       (i) => (PAD + i * stepX) / W * 100,
       [stepX]
     );
-    const dataYPct = useCallback25(
+    const dataYPct = useCallback26(
       (v) => (PAD + (1 - (v - lo) / (hi - lo)) * (H - PAD * 2)) / H * 100,
       [lo, hi]
     );
@@ -17520,9 +17626,9 @@ import {
 // src/components/CountUp/CountUp.tsx
 import {
   forwardRef as forwardRef57,
-  useEffect as useEffect27,
+  useEffect as useEffect28,
   useRef as useRef32,
-  useState as useState32
+  useState as useState33
 } from "react";
 import { jsxs as jsxs65 } from "react/jsx-runtime";
 var easeLinear = (t) => t;
@@ -17545,9 +17651,9 @@ var CountUp = forwardRef57(
     className,
     ...rest
   }, ref) {
-    const [n, setN] = useState32(disableAnimation ? value : from);
+    const [n, setN] = useState33(disableAnimation ? value : from);
     const lastRendered = useRef32(disableAnimation ? value : from);
-    useEffect27(() => {
+    useEffect28(() => {
       const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
       if (disableAnimation || reduced) {
         setN(value);
@@ -18153,15 +18259,15 @@ MetricCard.displayName = "MetricCard";
 import { AnimatePresence as AnimatePresence17, motion as motion26 } from "framer-motion";
 import {
   forwardRef as forwardRef60,
-  useCallback as useCallback26,
-  useEffect as useEffect28,
+  useCallback as useCallback27,
+  useEffect as useEffect29,
   useId as useId35,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo22,
   useRef as useRef33,
-  useState as useState33
+  useState as useState34
 } from "react";
-import { createPortal as createPortal11 } from "react-dom";
+import { createPortal as createPortal12 } from "react-dom";
 import {
   ChevronDownIcon as ChevronDownIcon6,
   CloseIcon as CloseIcon11,
@@ -18205,14 +18311,14 @@ var MultiSelect = forwardRef60(
   }, ref) {
     const reactId = useId35();
     const baseId = providedId ?? `ods-multiselect-${reactId}`;
-    const [internalValue, setInternalValue] = useState33(
+    const [internalValue, setInternalValue] = useState34(
       defaultValue ?? []
     );
     const selectedValues = controlledValue ?? internalValue;
-    const [open, setOpen] = useState33(false);
-    const [query, setQuery] = useState33("");
-    const [activeIdx, setActiveIdx] = useState33(0);
-    const [dropdownPos, setDropdownPos] = useState33({
+    const [open, setOpen] = useState34(false);
+    const [query, setQuery] = useState34("");
+    const [activeIdx, setActiveIdx] = useState34(0);
+    const [dropdownPos, setDropdownPos] = useState34({
       top: 0,
       left: 0,
       width: 0
@@ -18222,7 +18328,7 @@ var MultiSelect = forwardRef60(
     const searchRef = useRef33(null);
     const dropdownRef = useRef33(null);
     const chipRefs = useRef33([]);
-    const commit = useCallback26(
+    const commit = useCallback27(
       (next) => {
         if (controlledValue === void 0) setInternalValue(next);
         onChange?.(next);
@@ -18244,7 +18350,7 @@ var MultiSelect = forwardRef60(
     const showSearch = searchable ?? options.length > 6;
     const getLabel = (v) => options.find((o) => o.value === v)?.label ?? v;
     const getIcon = (v) => options.find((o) => o.value === v)?.icon;
-    const updatePosition = useCallback26(() => {
+    const updatePosition = useCallback27(() => {
       if (!wrapRef.current) return;
       const rect = wrapRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -18253,7 +18359,7 @@ var MultiSelect = forwardRef60(
         width: rect.width
       });
     }, []);
-    useEffect28(() => {
+    useEffect29(() => {
       if (!open) return;
       updatePosition();
       window.addEventListener("scroll", updatePosition, true);
@@ -18263,7 +18369,7 @@ var MultiSelect = forwardRef60(
         window.removeEventListener("resize", updatePosition);
       };
     }, [open, updatePosition]);
-    useEffect28(() => {
+    useEffect29(() => {
       if (!open) return;
       const onDoc = (e) => {
         const t = e.target;
@@ -18275,14 +18381,14 @@ var MultiSelect = forwardRef60(
       document.addEventListener("mousedown", onDoc);
       return () => document.removeEventListener("mousedown", onDoc);
     }, [open]);
-    useEffect28(() => {
+    useEffect29(() => {
       if (open && showSearch) {
         requestAnimationFrame(() => searchRef.current?.focus());
       }
     }, [open, showSearch]);
-    useEffect28(() => setActiveIdx(0), [query, open]);
-    const [fitCount, setFitCount] = useState33(selectedValues.length);
-    const [tick, setTick] = useState33(0);
+    useEffect29(() => setActiveIdx(0), [query, open]);
+    const [fitCount, setFitCount] = useState34(selectedValues.length);
+    const [tick, setTick] = useState34(0);
     useLayoutEffect7(() => {
       if (maxVisibleTags !== void 0) {
         setFitCount(Math.min(selectedValues.length, maxVisibleTags));
@@ -18310,7 +18416,7 @@ var MultiSelect = forwardRef60(
         count = Math.max(1, count - 1);
       setFitCount(count);
     }, [tick, selectedValues, maxVisibleTags]);
-    useEffect28(() => {
+    useEffect29(() => {
       if (typeof ResizeObserver === "undefined") return;
       const row = tagsRowRef.current;
       if (!row) return;
@@ -18318,7 +18424,7 @@ var MultiSelect = forwardRef60(
       ro.observe(row);
       return () => ro.disconnect();
     }, []);
-    const addValue = useCallback26(
+    const addValue = useCallback27(
       (val) => {
         if (maxTags && selectedValues.length >= maxTags) return;
         commit([...selectedValues, val]);
@@ -18328,13 +18434,13 @@ var MultiSelect = forwardRef60(
       },
       [selectedValues, maxTags, commit]
     );
-    const removeValue = useCallback26(
+    const removeValue = useCallback27(
       (val) => {
         commit(selectedValues.filter((v) => v !== val));
       },
       [selectedValues, commit]
     );
-    const toggleValue = useCallback26(
+    const toggleValue = useCallback27(
       (val) => {
         if (selectedSet.has(val)) {
           removeValue(val);
@@ -18344,11 +18450,11 @@ var MultiSelect = forwardRef60(
       },
       [selectedSet, addValue, removeValue]
     );
-    const clearAll = useCallback26(() => {
+    const clearAll = useCallback27(() => {
       commit([]);
       setQuery("");
     }, [commit]);
-    const handleSearchKey = useCallback26(
+    const handleSearchKey = useCallback27(
       (e) => {
         if (e.key === "Escape") {
           setOpen(false);
@@ -18533,7 +18639,7 @@ var MultiSelect = forwardRef60(
               ]
             }
           ),
-          typeof document !== "undefined" && createPortal11(
+          typeof document !== "undefined" && createPortal12(
             /* @__PURE__ */ jsx70(AnimatePresence17, { children: open && /* @__PURE__ */ jsxs68(
               motion26.div,
               {
@@ -18713,7 +18819,7 @@ MultiSelect.displayName = "MultiSelect";
 // src/components/NumberInput/NumberInput.tsx
 import {
   forwardRef as forwardRef61,
-  useCallback as useCallback27,
+  useCallback as useCallback28,
   useId as useId36
 } from "react";
 import { AddIcon as AddIcon2, SubtractIcon as SubtractIcon2 } from "@octaviaflow/icons";
@@ -18735,16 +18841,19 @@ var NumberInput = forwardRef61(
     id: providedId,
     className,
     wrapperClassName,
+    hideControls = false,
+    align,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": consumerDescribedBy,
     ...rest
   }, ref) {
+    const resolvedAlign = align ?? (hideControls ? "left" : "center");
     const reactId = useId36();
     const inputId = providedId ?? `ods-num-${reactId}`;
     const labelId = label ? `${inputId}-label` : void 0;
     const hintId = error || helperText ? `${inputId}-hint` : void 0;
-    const clamp = useCallback27(
+    const clamp = useCallback28(
       (v) => {
         if (typeof min === "number") v = Math.max(min, v);
         if (typeof max === "number") v = Math.min(max, v);
@@ -18769,6 +18878,8 @@ var NumberInput = forwardRef61(
           `ods-num--${size}`,
           disabled && "ods-num--disabled",
           error && "ods-num--error",
+          hideControls && "ods-num--no-controls",
+          resolvedAlign === "left" && "ods-num--align-left",
           wrapperClassName
         ),
         children: [
@@ -18782,7 +18893,7 @@ var NumberInput = forwardRef61(
             }
           ),
           /* @__PURE__ */ jsxs69("div", { className: "ods-num__field", children: [
-            /* @__PURE__ */ jsx71(
+            !hideControls && /* @__PURE__ */ jsx71(
               "button",
               {
                 type: "button",
@@ -18816,7 +18927,7 @@ var NumberInput = forwardRef61(
               }
             ),
             suffix && /* @__PURE__ */ jsx71("span", { className: "ods-num__suffix", "aria-hidden": "true", children: suffix }),
-            /* @__PURE__ */ jsx71(
+            !hideControls && /* @__PURE__ */ jsx71(
               "button",
               {
                 type: "button",
@@ -18848,7 +18959,7 @@ NumberInput.displayName = "NumberInput";
 // src/components/OTPInput/OTPInput.tsx
 import {
   forwardRef as forwardRef62,
-  useCallback as useCallback28,
+  useCallback as useCallback29,
   useId as useId37,
   useImperativeHandle as useImperativeHandle10,
   useRef as useRef34
@@ -18895,7 +19006,7 @@ var OTPInput = forwardRef62(
       }),
       [value, length, onChange]
     );
-    const setCharAt = useCallback28(
+    const setCharAt = useCallback29(
       (idx, ch) => {
         const cleaned = ch.replace(pattern, "").slice(0, 1);
         const chars = value.split("");
@@ -19036,10 +19147,10 @@ import {
 } from "@octaviaflow/icons";
 import {
   forwardRef as forwardRef63,
-  useCallback as useCallback29,
+  useCallback as useCallback30,
   useId as useId38,
   useMemo as useMemo23,
-  useState as useState34
+  useState as useState35
 } from "react";
 import { jsx as jsx74, jsxs as jsxs72 } from "react/jsx-runtime";
 function buildPageRange(totalPages, current, siblingCount, boundaryCount) {
@@ -19115,7 +19226,7 @@ var Pagination = forwardRef63(
       1,
       Math.ceil(Math.max(0, totalItems) / Math.max(1, pageSize))
     );
-    const [internalPage, setInternalPage] = useState34(
+    const [internalPage, setInternalPage] = useState35(
       Math.min(Math.max(1, defaultPage), totalPages)
     );
     const isControlled = controlledPage !== void 0;
@@ -19123,7 +19234,7 @@ var Pagination = forwardRef63(
       totalPages,
       Math.max(1, isControlled ? controlledPage : internalPage)
     );
-    const goTo = useCallback29(
+    const goTo = useCallback30(
       (next) => {
         const clamped = Math.min(totalPages, Math.max(1, next));
         if (clamped === currentPage) return;
@@ -19139,7 +19250,7 @@ var Pagination = forwardRef63(
     const from = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
     const to = Math.min(totalItems, currentPage * pageSize);
     const totalContent = formatTotal ? formatTotal({ from, to, total: totalItems }) : `Showing ${from.toLocaleString()}\u2013${to.toLocaleString()} of ${totalItems.toLocaleString()}`;
-    const [jumpValue, setJumpValue] = useState34("");
+    const [jumpValue, setJumpValue] = useState35("");
     const commitJump = (raw) => {
       const parsed = Number.parseInt(raw, 10);
       if (Number.isFinite(parsed)) goTo(parsed);
@@ -19323,7 +19434,7 @@ Pagination.displayName = "Pagination";
 import {
   forwardRef as forwardRef64,
   useId as useId39,
-  useState as useState35
+  useState as useState36
 } from "react";
 import { CheckmarkIcon as CheckmarkIcon9, ViewIcon, ViewOffIcon } from "@octaviaflow/icons";
 
@@ -19400,7 +19511,7 @@ var PasswordInput = forwardRef64(
     const inputId = providedId ?? `ods-pwd-${reactId}`;
     const labelId = label ? `${inputId}-label` : void 0;
     const hintId = error || helperText ? `${inputId}-hint` : void 0;
-    const [shown, setShown] = useState35(false);
+    const [shown, setShown] = useState36(false);
     const handle = (e) => onChange?.(e.target.value);
     const derived = usePasswordStrength(value, strengthRules ?? []);
     const ruleDriven = (strengthRules?.length ?? 0) > 0;
@@ -19542,11 +19653,11 @@ PasswordInput.displayName = "PasswordInput";
 // src/components/PhoneInput/PhoneInput.tsx
 import {
   forwardRef as forwardRef65,
-  useCallback as useCallback30,
-  useEffect as useEffect29,
+  useCallback as useCallback31,
+  useEffect as useEffect30,
   useId as useId40,
   useRef as useRef35,
-  useState as useState36
+  useState as useState37
 } from "react";
 import { ChevronDownIcon as ChevronDownIcon7, SearchIcon as SearchIcon9 } from "@octaviaflow/icons";
 import { jsx as jsx76, jsxs as jsxs74 } from "react/jsx-runtime";
@@ -19590,9 +19701,9 @@ var PhoneInput = forwardRef65(
     const hintId = error || helperText ? `${baseId}-hint` : void 0;
     const listboxId = `${baseId}-listbox`;
     const countryBtnId = `${baseId}-country`;
-    const [open, setOpen] = useState36(false);
-    const [activeIdx, setActiveIdx] = useState36(0);
-    const [query, setQuery] = useState36("");
+    const [open, setOpen] = useState37(false);
+    const [activeIdx, setActiveIdx] = useState37(0);
+    const [query, setQuery] = useState37("");
     const fieldRef = useRef35(null);
     const menuRef = useRef35(null);
     const listRef = useRef35(null);
@@ -19606,7 +19717,7 @@ var PhoneInput = forwardRef65(
         (c) => c.name.toLowerCase().includes(q2) || c.dialCode.includes(q2) || c.code.toLowerCase().includes(q2)
       );
     })();
-    useEffect29(() => {
+    useEffect30(() => {
       if (!open) return;
       const onDocMouseDown = (e) => {
         const t = e.target;
@@ -19624,7 +19735,7 @@ var PhoneInput = forwardRef65(
         document.removeEventListener("keydown", onDocKey);
       };
     }, [open]);
-    useEffect29(() => {
+    useEffect30(() => {
       if (!open) {
         setQuery("");
         return;
@@ -19632,10 +19743,10 @@ var PhoneInput = forwardRef65(
       const idx = countries.findIndex((c) => c.code === country.code);
       setActiveIdx(idx === -1 ? 0 : idx);
     }, [open, countries, country.code]);
-    useEffect29(() => {
+    useEffect30(() => {
       setActiveIdx(0);
     }, [query]);
-    const handleTriggerKey = useCallback30(
+    const handleTriggerKey = useCallback31(
       (e) => {
         if (disabled) return;
         if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
@@ -19645,7 +19756,7 @@ var PhoneInput = forwardRef65(
       },
       [disabled]
     );
-    const handleNavKey = useCallback30(
+    const handleNavKey = useCallback31(
       (e) => {
         if (e.key === "ArrowDown") {
           e.preventDefault();
@@ -19672,7 +19783,7 @@ var PhoneInput = forwardRef65(
       },
       [filteredCountries, activeIdx, onCountryChange]
     );
-    useEffect29(() => {
+    useEffect30(() => {
       if (!open) return;
       if (showSearch) searchRef.current?.focus();
       else listRef.current?.focus();
@@ -20536,8 +20647,8 @@ var PipelineCard = forwardRef66(
 PipelineCard.displayName = "PipelineCard";
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback31, useEffect as useEffect30, useLayoutEffect as useLayoutEffect8, useRef as useRef36, useState as useState37 } from "react";
-import { createPortal as createPortal12 } from "react-dom";
+import { useCallback as useCallback32, useEffect as useEffect31, useLayoutEffect as useLayoutEffect8, useRef as useRef36, useState as useState38 } from "react";
+import { createPortal as createPortal13 } from "react-dom";
 import { Fragment as Fragment34, jsx as jsx78, jsxs as jsxs76 } from "react/jsx-runtime";
 function computePosition4(rect, popRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
@@ -20568,9 +20679,9 @@ function Popover({
   children,
   className
 }) {
-  const [openState, setOpenState] = useState37(defaultOpen);
+  const [openState, setOpenState] = useState38(defaultOpen);
   const open = openProp ?? openState;
-  const setOpen = useCallback31(
+  const setOpen = useCallback32(
     (v) => {
       if (openProp === void 0) setOpenState(v);
       onOpenChange?.(v);
@@ -20579,8 +20690,8 @@ function Popover({
   );
   const triggerRef = useRef36(null);
   const popRef = useRef36(null);
-  const [coords, setCoords] = useState37(null);
-  const reposition = useCallback31(() => {
+  const [coords, setCoords] = useState38(null);
+  const reposition = useCallback32(() => {
     if (!triggerRef.current || !popRef.current) return;
     const trigRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -20592,7 +20703,7 @@ function Popover({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition, content]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!open) return;
     const onScroll = () => reposition();
     window.addEventListener("scroll", onScroll, true);
@@ -20602,7 +20713,7 @@ function Popover({
       window.removeEventListener("resize", onScroll);
     };
   }, [open, reposition]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!open || !closeOnClickOutside) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -20613,7 +20724,7 @@ function Popover({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open, closeOnClickOutside, setOpen]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -20634,7 +20745,7 @@ function Popover({
       children
     }
   );
-  const portal = typeof document !== "undefined" && open ? createPortal12(
+  const portal = typeof document !== "undefined" && open ? createPortal13(
     /* @__PURE__ */ jsxs76(
       "div",
       {
@@ -21099,12 +21210,12 @@ ProgressRing.displayName = "ProgressRing";
 // src/components/PromptInput/PromptInput.tsx
 import {
   forwardRef as forwardRef71,
-  useCallback as useCallback32,
-  useEffect as useEffect31,
+  useCallback as useCallback33,
+  useEffect as useEffect32,
   useId as useId45,
   useImperativeHandle as useImperativeHandle11,
   useRef as useRef37,
-  useState as useState38
+  useState as useState39
 } from "react";
 import {
   AttachmentIcon,
@@ -21156,14 +21267,14 @@ var PromptInput = forwardRef71(
     const suggestionsId = `${baseId}-suggestions`;
     const counterId = `${baseId}-counter`;
     const taRef = useRef37(null);
-    const [internal, setInternal] = useState38(defaultValue);
+    const [internal, setInternal] = useState39(defaultValue);
     const v = value ?? internal;
     const isControlled = value !== void 0;
-    const [suggestionsOpen, setSuggestionsOpen] = useState38(false);
-    const [suggestionIndex, setSuggestionIndex] = useState38(0);
-    const [isDragOver, setIsDragOver] = useState38(false);
-    const [historyIdx, setHistoryIdx] = useState38(null);
-    const setValue = useCallback32(
+    const [suggestionsOpen, setSuggestionsOpen] = useState39(false);
+    const [suggestionIndex, setSuggestionIndex] = useState39(0);
+    const [isDragOver, setIsDragOver] = useState39(false);
+    const [historyIdx, setHistoryIdx] = useState39(null);
+    const setValue = useCallback33(
       (next) => {
         if (!isControlled) setInternal(next);
         onChange?.(next);
@@ -21204,7 +21315,7 @@ var PromptInput = forwardRef71(
       // biome-ignore lint/correctness/useExhaustiveDependencies: handleSubmit closes over up-to-date locals each render.
       [v, setValue]
     );
-    useEffect31(() => {
+    useEffect32(() => {
       const el = taRef.current;
       if (!el) return;
       const computed = window.getComputedStyle(el);
@@ -21961,7 +22072,7 @@ RangeSlider.displayName = "RangeSlider";
 // src/components/Rating/Rating.tsx
 import {
   forwardRef as forwardRef76,
-  useState as useState39
+  useState as useState40
 } from "react";
 import {
   FavoriteFilledIcon,
@@ -21988,7 +22099,7 @@ var Rating = forwardRef76(function Rating2({
   "aria-label": ariaLabel,
   ...rest
 }, ref) {
-  const [hover, setHover] = useState39(null);
+  const [hover, setHover] = useState40(null);
   const display = hover ?? value;
   const interactive = !readOnly && !disabled;
   const Empty = icon === "heart" ? FavoriteIcon : StarIcon2;
@@ -22216,11 +22327,11 @@ function BinaryButton({
 // src/components/Resizable/Resizable.tsx
 import {
   forwardRef as forwardRef78,
-  useCallback as useCallback33,
-  useEffect as useEffect32,
+  useCallback as useCallback34,
+  useEffect as useEffect33,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef40,
-  useState as useState40
+  useState as useState41
 } from "react";
 import { jsx as jsx90, jsxs as jsxs88 } from "react/jsx-runtime";
 function setDragOverlay(direction) {
@@ -22254,9 +22365,9 @@ var Resizable = forwardRef78(
   }, ref) {
     const wrapRef = useRef40(null);
     const draggingRef = useRef40(false);
-    const [isDragging, setIsDragging] = useState40(false);
-    const [split, setSplit] = useState40(0);
-    const [total, setTotal] = useState40(0);
+    const [isDragging, setIsDragging] = useState41(false);
+    const [split, setSplit] = useState41(0);
+    const [total, setTotal] = useState41(0);
     const setRef = (node) => {
       wrapRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -22286,7 +22397,7 @@ var Resizable = forwardRef78(
       }
       setSplit(defaultSplit >= 1 ? defaultSplit : t * defaultSplit);
     }, []);
-    useEffect32(() => {
+    useEffect33(() => {
       const el = wrapRef.current;
       if (!el || typeof ResizeObserver === "undefined") return;
       const ro = new ResizeObserver(() => {
@@ -22300,7 +22411,7 @@ var Resizable = forwardRef78(
       ro.observe(el);
       return () => ro.disconnect();
     }, [direction, minSecond]);
-    const persist = useCallback33(
+    const persist = useCallback34(
       (next) => {
         onSplitChange?.(next);
         if (storageKey && typeof window !== "undefined" && total > 0) {
@@ -22319,7 +22430,7 @@ var Resizable = forwardRef78(
       setIsDragging(true);
       setDragOverlay(direction);
     };
-    useEffect32(() => {
+    useEffect33(() => {
       const onMove = (e) => {
         if (!draggingRef.current) return;
         const el = wrapRef.current;
@@ -22448,10 +22559,10 @@ var ResizablePanel = forwardRef78(
     ...rest
   }, ref) {
     const isVertical = side === "bottom";
-    const [internal, setInternal] = useState40(sizeProp ?? defaultSize);
+    const [internal, setInternal] = useState41(sizeProp ?? defaultSize);
     const size = sizeProp ?? internal;
     const draggingRef = useRef40(false);
-    const [isDragging, setIsDragging] = useState40(false);
+    const [isDragging, setIsDragging] = useState41(false);
     const startRef = useRef40({ at: 0, size });
     const onPointerDown = (e) => {
       e.preventDefault();
@@ -22464,7 +22575,7 @@ var ResizablePanel = forwardRef78(
       };
       setDragOverlay(isVertical ? "vertical" : "horizontal");
     };
-    useEffect32(() => {
+    useEffect33(() => {
       const onMove = (e) => {
         if (!draggingRef.current) return;
         const delta = (isVertical ? e.clientY : e.clientX) - startRef.current.at;
@@ -22636,8 +22747,8 @@ function SettingsRow({
 
 // src/components/Sheet/Sheet.tsx
 import { AnimatePresence as AnimatePresence18, motion as motion28 } from "framer-motion";
-import { useEffect as useEffect33 } from "react";
-import { createPortal as createPortal13 } from "react-dom";
+import { useEffect as useEffect34 } from "react";
+import { createPortal as createPortal14 } from "react-dom";
 import { Fragment as Fragment37, jsx as jsx94, jsxs as jsxs91 } from "react/jsx-runtime";
 var slideVariants = {
   top: { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } },
@@ -22671,7 +22782,7 @@ function Sheet({
   dragHandle = true,
   className
 }) {
-  useEffect33(() => {
+  useEffect34(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -22720,7 +22831,7 @@ function Sheet({
     )
   ] }) });
   if (typeof document === "undefined") return null;
-  return createPortal13(content, document.body);
+  return createPortal14(content, document.body);
 }
 
 // src/components/Show/Show.tsx
@@ -22740,7 +22851,7 @@ function Show({ above, below, children, ...rest }) {
 Show.displayName = "Show";
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback34, useEffect as useEffect34, useRef as useRef41, useState as useState41 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect35, useRef as useRef41, useState as useState42 } from "react";
 import { Fragment as Fragment38, jsx as jsx96, jsxs as jsxs92 } from "react/jsx-runtime";
 function Sidebar({
   variant = "expanded",
@@ -22760,8 +22871,8 @@ function Sidebar({
   className
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
-  const [internalPinned, setInternalPinned] = useState41(defaultPinned);
-  useEffect34(() => {
+  const [internalPinned, setInternalPinned] = useState42(defaultPinned);
+  useEffect35(() => {
     if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
@@ -22772,7 +22883,7 @@ function Sidebar({
     }
   }, []);
   const pinned = pinnedProp ?? internalPinned;
-  const setPinned = useCallback34(
+  const setPinned = useCallback35(
     (p) => {
       if (pinnedProp === void 0) setInternalPinned(p);
       try {
@@ -22783,7 +22894,7 @@ function Sidebar({
     },
     [pinnedProp, pinStorageKey, onPinnedChange]
   );
-  const [hoverOpen, setHoverOpen] = useState41(false);
+  const [hoverOpen, setHoverOpen] = useState42(false);
   const openTimer = useRef41(null);
   const closeTimer = useRef41(null);
   const clearTimers = () => {
@@ -22796,7 +22907,7 @@ function Sidebar({
       closeTimer.current = null;
     }
   };
-  useEffect34(() => () => clearTimers(), []);
+  useEffect35(() => () => clearTimers(), []);
   const handleEnter = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setHoverOpen(true), hoverOpenDelay);
@@ -22808,7 +22919,7 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
-  useEffect34(() => {
+  useEffect35(() => {
     if (!overlayOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -22942,7 +23053,7 @@ function RailItem({
   tooltipDelay,
   suppressTooltip
 }) {
-  const [open, setOpen] = useState41(false);
+  const [open, setOpen] = useState42(false);
   const timerRef = useRef41(null);
   const hasChildren = !!(item.children && item.children.length > 0);
   const clear = () => {
@@ -22951,7 +23062,7 @@ function RailItem({
       timerRef.current = null;
     }
   };
-  useEffect34(() => () => clear(), []);
+  useEffect35(() => () => clear(), []);
   const show = () => {
     if (suppressTooltip) return;
     clear();
@@ -23095,7 +23206,7 @@ function SidebarToggleIcon({ collapsed }) {
 }
 function ExpandedItem({ item, level }) {
   const hasChildren = !!(item.children && item.children.length > 0);
-  const [open, setOpen] = useState41(
+  const [open, setOpen] = useState42(
     item.defaultExpanded ?? (hasChildren && hasActiveDescendant(item))
   );
   if (hasChildren) {
@@ -23355,7 +23466,7 @@ SkeletonGroup.displayName = "SkeletonGroup";
 import { AnimatePresence as AnimatePresence19, motion as motion29 } from "framer-motion";
 import { useRef as useRef42 } from "react";
 import { FocusScope as FocusScope2, OverlayProvider as OverlayProvider2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
-import { createPortal as createPortal14 } from "react-dom";
+import { createPortal as createPortal15 } from "react-dom";
 import { Fragment as Fragment39, jsx as jsx98, jsxs as jsxs93 } from "react/jsx-runtime";
 var slideVariants2 = {
   left: {
@@ -23447,7 +23558,7 @@ function SlideoutContent({
 }
 function SlideoutPanel(props) {
   if (typeof document === "undefined") return null;
-  return createPortal14(
+  return createPortal15(
     /* @__PURE__ */ jsx98(OverlayProvider2, { children: /* @__PURE__ */ jsx98(SlideoutContent, { ...props }) }),
     document.body
   );
@@ -23700,10 +23811,10 @@ SocialButton.displayName = "SocialButton";
 // src/components/Sortable/Sortable.tsx
 import {
   forwardRef as forwardRef84,
-  useCallback as useCallback35,
-  useEffect as useEffect35,
+  useCallback as useCallback36,
+  useEffect as useEffect36,
   useRef as useRef43,
-  useState as useState42
+  useState as useState43
 } from "react";
 import { DraggableIcon } from "@octaviaflow/icons";
 import { jsx as jsx101, jsxs as jsxs96 } from "react/jsx-runtime";
@@ -23723,11 +23834,11 @@ function Sortable({
   const itemRefs = useRef43(/* @__PURE__ */ new Map());
   const originalOrderRef = useRef43(null);
   const scrollTimerRef = useRef43(null);
-  const [draggingId, setDraggingId] = useState42(null);
-  const [dropPos, setDropPos] = useState42(null);
-  const [kbActiveId, setKbActiveId] = useState42(null);
+  const [draggingId, setDraggingId] = useState43(null);
+  const [dropPos, setDropPos] = useState43(null);
+  const [kbActiveId, setKbActiveId] = useState43(null);
   const isVertical = direction === "vertical";
-  const onDragStart = useCallback35(
+  const onDragStart = useCallback36(
     (id) => (e) => {
       if (disabled) return;
       e.dataTransfer.effectAllowed = "move";
@@ -23738,7 +23849,7 @@ function Sortable({
     },
     [disabled, items]
   );
-  const cancelDrag = useCallback35(() => {
+  const cancelDrag = useCallback36(() => {
     setDraggingId(null);
     setDropPos(null);
     originalOrderRef.current = null;
@@ -23747,7 +23858,7 @@ function Sortable({
       scrollTimerRef.current = null;
     }
   }, []);
-  const onDragEnd = useCallback35(() => {
+  const onDragEnd = useCallback36(() => {
     cancelDrag();
   }, [cancelDrag]);
   const onItemDragOver = (id) => (e) => {
@@ -23772,7 +23883,7 @@ function Sortable({
     if (sourceId === target.id) return;
     commitMove(sourceId, target.id, target.edge);
   };
-  const commitMove = useCallback35(
+  const commitMove = useCallback36(
     (sourceId, targetId, edge) => {
       const from = items.findIndex((i) => i.id === sourceId);
       let to = items.findIndex((i) => i.id === targetId);
@@ -23786,7 +23897,7 @@ function Sortable({
     },
     [items, onChange]
   );
-  useEffect35(() => {
+  useEffect36(() => {
     if (!autoScroll || !draggingId) return;
     const container = containerRef.current;
     if (!container) return;
@@ -23836,7 +23947,7 @@ function Sortable({
       }
     };
   }, [autoScroll, autoScrollEdge, draggingId, isVertical]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!draggingId) return;
     const onKey = (e) => {
       if (e.key === "Escape") cancelDrag();
@@ -24080,13 +24191,13 @@ VStack.displayName = "VStack";
 import { AnimatePresence as AnimatePresence20, motion as motion30, useReducedMotion as useReducedMotion13 } from "framer-motion";
 import {
   forwardRef as forwardRef86,
-  useCallback as useCallback36,
-  useEffect as useEffect36,
+  useCallback as useCallback37,
+  useEffect as useEffect37,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo25,
-  useState as useState43
+  useState as useState44
 } from "react";
-import { createPortal as createPortal15 } from "react-dom";
+import { createPortal as createPortal16 } from "react-dom";
 import { jsx as jsx103, jsxs as jsxs97 } from "react/jsx-runtime";
 var Spotlight = forwardRef86(
   function Spotlight2({
@@ -24105,8 +24216,8 @@ var Spotlight = forwardRef86(
     ...rest
   }, ref) {
     const reducedMotion = useReducedMotion13();
-    const [rect, setRect] = useState43(null);
-    const [viewport, setViewport] = useState43(() => ({
+    const [rect, setRect] = useState44(null);
+    const [viewport, setViewport] = useState44(() => ({
       width: typeof window !== "undefined" ? window.innerWidth : 0,
       height: typeof window !== "undefined" ? window.innerHeight : 0
     }));
@@ -24114,7 +24225,7 @@ var Spotlight = forwardRef86(
       () => `ods-spotlight-${Math.random().toString(36).slice(2, 9)}`,
       []
     );
-    const measure = useCallback36(() => {
+    const measure = useCallback37(() => {
       if (!open) return;
       const el = target.current;
       if (!el) return;
@@ -24127,7 +24238,7 @@ var Spotlight = forwardRef86(
     useLayoutEffect10(() => {
       measure();
     }, [measure]);
-    useEffect36(() => {
+    useEffect37(() => {
       if (!open) return;
       const handler = () => measure();
       window.addEventListener("resize", handler);
@@ -24137,7 +24248,7 @@ var Spotlight = forwardRef86(
         window.removeEventListener("scroll", handler, true);
       };
     }, [open, measure]);
-    useEffect36(() => {
+    useEffect37(() => {
       if (!open || !onDismiss) return;
       const onKey = (e) => {
         if (e.key === "Escape") onDismiss();
@@ -24153,7 +24264,7 @@ var Spotlight = forwardRef86(
       width: rect.width + padding * 2,
       height: rect.height + padding * 2
     } : null;
-    return createPortal15(
+    return createPortal16(
       /* @__PURE__ */ jsx103(AnimatePresence20, { children: open && /* @__PURE__ */ jsxs97(
         motion30.div,
         {
@@ -24285,10 +24396,10 @@ Stat.displayName = "Stat";
 import { motion as motion31 } from "framer-motion";
 import {
   forwardRef as forwardRef88,
-  useCallback as useCallback37,
+  useCallback as useCallback38,
   useId as useId49,
   useMemo as useMemo26,
-  useState as useState44
+  useState as useState45
 } from "react";
 import { jsx as jsx105, jsxs as jsxs99 } from "react/jsx-runtime";
 var STATUS_COLORS = {
@@ -24329,8 +24440,8 @@ var StatusTiles = forwardRef88(
       () => max < data.length ? data.slice(data.length - max) : data,
       [data, max]
     );
-    const [hoveredIdx, setHoveredIdx] = useState44(null);
-    const fire = useCallback37(
+    const [hoveredIdx, setHoveredIdx] = useState45(null);
+    const fire = useCallback38(
       (idx) => {
         setHoveredIdx(idx);
         if (idx === null) {
@@ -24342,7 +24453,7 @@ var StatusTiles = forwardRef88(
       },
       [onTileHover, visible]
     );
-    const handleKey = useCallback37(
+    const handleKey = useCallback38(
       (e, idx) => {
         if (!onTileClick) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -24605,10 +24716,10 @@ Stepper.displayName = "Stepper";
 import { motion as motion32 } from "framer-motion";
 import {
   forwardRef as forwardRef90,
-  useCallback as useCallback38,
+  useCallback as useCallback39,
   useId as useId51,
   useMemo as useMemo27,
-  useState as useState45
+  useState as useState46
 } from "react";
 import { jsx as jsx107, jsxs as jsxs101 } from "react/jsx-runtime";
 var defaultFormat7 = (n) => {
@@ -24803,23 +24914,23 @@ var Sankey = forwardRef90(function Sankey2({
     }
     return out;
   }, [links, layoutNodes, nodeWidth, scale]);
-  const [hoveredNode, setHoveredNode] = useState45(null);
-  const [hoveredLink, setHoveredLink] = useState45(null);
-  const fireNode = useCallback38(
+  const [hoveredNode, setHoveredNode] = useState46(null);
+  const [hoveredLink, setHoveredLink] = useState46(null);
+  const fireNode = useCallback39(
     (n) => {
       setHoveredNode(n);
       onNodeHover?.(n);
     },
     [onNodeHover]
   );
-  const fireLink = useCallback38(
+  const fireLink = useCallback39(
     (l) => {
       setHoveredLink(l);
       onLinkHover?.(l);
     },
     [onLinkHover]
   );
-  const handleNodeKey = useCallback38(
+  const handleNodeKey = useCallback39(
     (e, n) => {
       if (!onNodeClick) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -25057,8 +25168,8 @@ Switch.displayName = "Switch";
 // src/components/Table/Table.tsx
 import {
   forwardRef as forwardRef92,
-  useCallback as useCallback39,
-  useState as useState46
+  useCallback as useCallback40,
+  useState as useState47
 } from "react";
 import {
   CaretDownIcon as CaretDownIcon2,
@@ -25084,7 +25195,7 @@ function TableInner({
   "aria-label": ariaLabel = "Data table",
   ...rest
 }, ref) {
-  const handleSort = useCallback39(
+  const handleSort = useCallback40(
     (key) => {
       if (!onSort) return;
       const col = columns.find((c) => c.key === key);
@@ -25094,7 +25205,7 @@ function TableInner({
     },
     [columns, onSort, sortKey, sortDirection]
   );
-  const handleSelectAll = useCallback39(() => {
+  const handleSelectAll = useCallback40(() => {
     if (!onSelectionChange) return;
     const allSelected = selectedRows?.size === data.length;
     if (allSelected) {
@@ -25103,7 +25214,7 @@ function TableInner({
       onSelectionChange(new Set(data.map((_, i) => i)));
     }
   }, [data, onSelectionChange, selectedRows]);
-  const handleSelectRow = useCallback39(
+  const handleSelectRow = useCallback40(
     (index) => {
       if (!onSelectionChange || !selectedRows) return;
       const next = new Set(selectedRows);
@@ -25199,7 +25310,7 @@ function TableRow({
   totalCols
 }) {
   const isSelected = selectedRows?.has(rowIndex) ?? false;
-  const [expanded, setExpanded] = useState46(false);
+  const [expanded, setExpanded] = useState47(false);
   return /* @__PURE__ */ jsxs103(Fragment41, { children: [
     /* @__PURE__ */ jsxs103(
       "tr",
@@ -25237,7 +25348,7 @@ function TableRow({
 
 // src/components/Tabs/Tabs.tsx
 import { motion as motion33 } from "framer-motion";
-import { useCallback as useCallback40, useEffect as useEffect37, useId as useId52, useMemo as useMemo28, useRef as useRef45, useState as useState47 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect38, useId as useId52, useMemo as useMemo28, useRef as useRef45, useState as useState48 } from "react";
 import { useTab, useTabList, useTabPanel } from "react-aria";
 import { jsx as jsx110, jsxs as jsxs104 } from "react/jsx-runtime";
 function TabButton({
@@ -25291,7 +25402,7 @@ function Tabs({
 }) {
   const reactId = useId52();
   const indicatorLayoutId = `ods-tabs-indicator-${reactId}`;
-  const [internalValue, setInternalValue] = useState47(defaultValue || items[0]?.value);
+  const [internalValue, setInternalValue] = useState48(defaultValue || items[0]?.value);
   const selectedKey = value ?? internalValue;
   const handleSelectionChange = (key) => {
     const keyStr = String(key);
@@ -25318,9 +25429,9 @@ function Tabs({
   const ref = useRef45(null);
   const { tabListProps } = useTabList({ ...stateProps, orientation }, state, ref);
   const scrollContainerRef = useRef45(null);
-  const [canScrollLeft, setCanScrollLeft] = useState47(false);
-  const [canScrollRight, setCanScrollRight] = useState47(false);
-  const measureOverflow = useCallback40(() => {
+  const [canScrollLeft, setCanScrollLeft] = useState48(false);
+  const [canScrollRight, setCanScrollRight] = useState48(false);
+  const measureOverflow = useCallback41(() => {
     const el = scrollContainerRef.current;
     if (!el || orientation !== "horizontal") {
       setCanScrollLeft(false);
@@ -25331,7 +25442,7 @@ function Tabs({
     setCanScrollLeft(el.scrollLeft > SCROLL_EDGE_EPSILON);
     setCanScrollRight(el.scrollLeft < max - SCROLL_EDGE_EPSILON);
   }, [orientation]);
-  useEffect37(() => {
+  useEffect38(() => {
     measureOverflow();
     const el = scrollContainerRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -25414,7 +25525,7 @@ function ChevronSvg({ dir }) {
 import {
   forwardRef as forwardRef93,
   useId as useId53,
-  useState as useState48
+  useState as useState49
 } from "react";
 import { CloseIcon as CloseIcon14 } from "@octaviaflow/icons";
 import { jsx as jsx111, jsxs as jsxs105 } from "react/jsx-runtime";
@@ -25439,7 +25550,7 @@ var TagsInput = forwardRef93(
     "aria-describedby": consumerDescribedBy,
     ...rest
   }, ref) {
-    const [draft, setDraft] = useState48("");
+    const [draft, setDraft] = useState49("");
     const reactId = useId53();
     const inputId = providedId ?? `ods-tags-${reactId}`;
     const labelId = label ? `${inputId}-label` : void 0;
@@ -25887,22 +25998,22 @@ TestimonialCard.displayName = "TestimonialCard";
 // src/components/Textarea/Textarea.tsx
 import {
   forwardRef as forwardRef96,
-  useEffect as useEffect40,
+  useEffect as useEffect41,
   useId as useId56,
   useRef as useRef48,
-  useState as useState51
+  useState as useState52
 } from "react";
 import { useTextField } from "react-aria";
-import { createPortal as createPortal16 } from "react-dom";
+import { createPortal as createPortal17 } from "react-dom";
 import { CopyIcon as CopyIcon5, CutIcon } from "@octaviaflow/icons";
 
 // src/hooks/useTextareaCommands.ts
 import {
-  useCallback as useCallback41,
-  useEffect as useEffect38,
+  useCallback as useCallback42,
+  useEffect as useEffect39,
   useMemo as useMemo29,
   useRef as useRef46,
-  useState as useState49
+  useState as useState50
 } from "react";
 function findOpenTrigger(value, caret, trigger) {
   let i = caret - 1;
@@ -25981,11 +26092,11 @@ function useTextareaCommands({
   openOnEmptyTrigger = true,
   maxItems = 8
 }) {
-  const [isOpen, setIsOpen] = useState49(false);
-  const [query, setQuery] = useState49("");
-  const [activeIndex, setActiveIndex] = useState49(0);
-  const [triggerIndex, setTriggerIndex] = useState49(null);
-  const [caretRect, setCaretRect] = useState49(null);
+  const [isOpen, setIsOpen] = useState50(false);
+  const [query, setQuery] = useState50("");
+  const [activeIndex, setActiveIndex] = useState50(0);
+  const [triggerIndex, setTriggerIndex] = useState50(null);
+  const [caretRect, setCaretRect] = useState50(null);
   const dismissedAtRef = useRef46(
     null
   );
@@ -26002,7 +26113,7 @@ function useTextareaCommands({
       return hay.includes(q2);
     }).slice(0, maxItems);
   }, [commands, query, maxItems]);
-  useEffect38(() => {
+  useEffect39(() => {
     const ta = textareaRef.current;
     if (!ta) return;
     const caret = ta.selectionStart ?? 0;
@@ -26025,7 +26136,7 @@ function useTextareaCommands({
       setCaretRect(getCaretRect(ta, caret));
     }
   }, [value, trigger, openOnEmptyTrigger, isOpen, textareaRef]);
-  const commit = useCallback41(
+  const commit = useCallback42(
     (cmd) => {
       const ta = textareaRef.current;
       if (!ta || triggerIndex == null) return;
@@ -26049,7 +26160,7 @@ function useTextareaCommands({
     },
     [textareaRef, triggerIndex, query, value, onChange]
   );
-  const dismiss = useCallback41(() => {
+  const dismiss = useCallback42(() => {
     const ta = textareaRef.current;
     dismissedAtRef.current = {
       value,
@@ -26058,7 +26169,7 @@ function useTextareaCommands({
     setIsOpen(false);
     setTriggerIndex(null);
   }, [textareaRef, value]);
-  const onKeyDown = useCallback41(
+  const onKeyDown = useCallback42(
     (e) => {
       if (!isOpen) return false;
       if (e.key === "ArrowDown") {
@@ -26101,7 +26212,7 @@ function useTextareaCommands({
 }
 
 // src/hooks/useTextareaSelection.ts
-import { useCallback as useCallback42, useEffect as useEffect39, useState as useState50 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect40, useState as useState51 } from "react";
 function getSelectionRect(textarea, start, end) {
   if (typeof document === "undefined") return null;
   if (start === end) return null;
@@ -26163,10 +26274,10 @@ function useTextareaSelection({
   value,
   onChange
 }) {
-  const [start, setStart] = useState50(0);
-  const [end, setEnd] = useState50(0);
-  const [rect, setRect] = useState50(null);
-  useEffect39(() => {
+  const [start, setStart] = useState51(0);
+  const [end, setEnd] = useState51(0);
+  const [rect, setRect] = useState51(null);
+  useEffect40(() => {
     if (typeof document === "undefined") return;
     const handler = () => {
       const ta = textareaRef.current;
@@ -26187,7 +26298,7 @@ function useTextareaSelection({
   }, [textareaRef]);
   const active = start !== end;
   const text = active ? value.slice(start, end) : "";
-  const writeToClipboard = useCallback42(
+  const writeToClipboard = useCallback43(
     async (str) => {
       try {
         if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
@@ -26212,11 +26323,11 @@ function useTextareaSelection({
     },
     []
   );
-  const copy = useCallback42(async () => {
+  const copy = useCallback43(async () => {
     if (!active) return false;
     return writeToClipboard(text);
   }, [active, text, writeToClipboard]);
-  const replace = useCallback42(
+  const replace = useCallback43(
     (str) => {
       const ta = textareaRef.current;
       if (!ta) return;
@@ -26230,13 +26341,13 @@ function useTextareaSelection({
     },
     [textareaRef, value, start, end, onChange]
   );
-  const cut = useCallback42(async () => {
+  const cut = useCallback43(async () => {
     if (!active) return false;
     const ok = await writeToClipboard(text);
     if (ok) replace("");
     return ok;
   }, [active, text, writeToClipboard, replace]);
-  const wrap = useCallback42(
+  const wrap = useCallback43(
     (open, close) => {
       const ta = textareaRef.current;
       if (!ta) return;
@@ -26282,7 +26393,7 @@ import {
   TextStrikethroughIcon,
   UndoIcon as UndoIcon2
 } from "@octaviaflow/icons";
-import { useCallback as useCallback43, useMemo as useMemo30, useRef as useRef47 } from "react";
+import { useCallback as useCallback44, useMemo as useMemo30, useRef as useRef47 } from "react";
 import { jsx as jsx114 } from "react/jsx-runtime";
 function useTextareaTools({
   textareaRef,
@@ -26394,7 +26505,7 @@ function useTextareaTools({
     () => tools.filter((t) => t.isVisible ? t.isVisible(helpers) : true),
     [tools, helpers]
   );
-  const runTool = useCallback43(
+  const runTool = useCallback44(
     async (id) => {
       const tool = tools.find((t) => t.id === id);
       if (!tool || tool.kind === "divider") return;
@@ -26542,7 +26653,7 @@ var Textarea = forwardRef96(
     const reactId = useId56();
     const baseId = providedId ?? `ods-textarea-${reactId}`;
     const hintId = error && errorMessage || helperText ? `${baseId}-hint` : void 0;
-    const [charCount, setCharCount] = useState51(
+    const [charCount, setCharCount] = useState52(
       () => String(value ?? defaultValue ?? "").length
     );
     const ariaNameProps = resolveAccessibleName({
@@ -26572,10 +26683,10 @@ var Textarea = forwardRef96(
       setCharCount(e.target.value.length);
       onChange?.(e);
     };
-    const [liveValue, setLiveValue] = useState51(
+    const [liveValue, setLiveValue] = useState52(
       String(value ?? defaultValue ?? "")
     );
-    useEffect40(() => {
+    useEffect41(() => {
       if (value != null) setLiveValue(String(value));
     }, [value]);
     const handleChangeWithMirror = (e) => {
@@ -26618,7 +26729,7 @@ var Textarea = forwardRef96(
       }
       props.onKeyDown?.(e);
     };
-    useEffect40(() => {
+    useEffect41(() => {
       if (!autoResize) return;
       const el = innerRef.current;
       if (!el) return;
@@ -26703,7 +26814,7 @@ var Textarea = forwardRef96(
                 "aria-activedescendant": cmdEnabled && cmdPalette.isOpen && cmdPalette.items[cmdPalette.activeIndex] ? `${baseId}-cmd-${cmdPalette.items[cmdPalette.activeIndex].id}` : void 0
               }
             ),
-            cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && createPortal16(
+            cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && createPortal17(
               /* @__PURE__ */ jsx115(
                 "ul",
                 {
@@ -26746,7 +26857,7 @@ var Textarea = forwardRef96(
               ),
               document.body
             ),
-            selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && createPortal16(
+            selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && createPortal17(
               /* @__PURE__ */ jsxs108(
                 "div",
                 {
@@ -26959,12 +27070,13 @@ Timeline.displayName = "Timeline";
 import {
   forwardRef as forwardRef98,
   Fragment as Fragment43,
-  useCallback as useCallback44,
-  useEffect as useEffect41,
+  useCallback as useCallback45,
+  useEffect as useEffect42,
   useId as useId57,
   useRef as useRef49,
-  useState as useState52
+  useState as useState53
 } from "react";
+import { createPortal as createPortal18 } from "react-dom";
 import {
   CaretDownIcon as CaretDownIcon3,
   CaretUpIcon as CaretUpIcon3,
@@ -27009,14 +27121,14 @@ var TimePicker = forwardRef98(
     const labelId = label ? `${baseId}-label` : void 0;
     const hintId = error || helperText ? `${baseId}-hint` : void 0;
     const describedBy = [consumerDescribedBy, hintId].filter(Boolean).join(" ") || void 0;
-    const [open, setOpen] = useState52(false);
-    const [activeSeg, setActiveSeg] = useState52(null);
+    const [open, setOpen] = useState53(false);
+    const [activeSeg, setActiveSeg] = useState53(null);
     const COMMIT_TIMEOUT_MS = 1500;
-    const [draft, setDraft] = useState52(
+    const [draft, setDraft] = useState53(
       null
     );
     const draftRef = useRef49(null);
-    const setDraftBoth = useCallback44(
+    const setDraftBoth = useCallback45(
       (next) => {
         draftRef.current = next;
         setDraft(next);
@@ -27033,11 +27145,14 @@ var TimePicker = forwardRef98(
       else if (forwardedRef)
         forwardedRef.current = node;
     };
+    const triggerRef = useRef49(null);
+    const popoverRef = useRef49(null);
+    const popoverPos = useAnchoredPopover(triggerRef, open, { popoverRef });
     const hoursRef = useRef49(null);
     const minutesRef = useRef49(null);
     const secondsRef = useRef49(null);
     const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
-    const commit = useCallback44(
+    const commit = useCallback45(
       (seg, n) => {
         const base = valueRef.current;
         const next = { ...base, [seg]: clampSeg(seg, n, use24h) };
@@ -27069,13 +27184,13 @@ var TimePicker = forwardRef98(
       valueRef.current = next;
       onChange?.(next);
     };
-    const clearCommitTimer = useCallback44(() => {
+    const clearCommitTimer = useCallback45(() => {
       if (commitTimerRef.current != null) {
         clearTimeout(commitTimerRef.current);
         commitTimerRef.current = null;
       }
     }, []);
-    const commitDraft = useCallback44(
+    const commitDraft = useCallback45(
       (seg, digits) => {
         clearCommitTimer();
         const n = parseInt(digits || "0", 10);
@@ -27087,11 +27202,11 @@ var TimePicker = forwardRef98(
       },
       [clearCommitTimer, commit, use24h, setDraftBoth]
     );
-    const flushDraft = useCallback44(() => {
+    const flushDraft = useCallback45(() => {
       const d = draftRef.current;
       if (d) commitDraft(d.seg, d.digits);
     }, [commitDraft]);
-    const focusSegment = useCallback44(
+    const focusSegment = useCallback45(
       (seg) => {
         const d = draftRef.current;
         if (d && d.seg !== seg) commitDraft(d.seg, d.digits);
@@ -27100,17 +27215,18 @@ var TimePicker = forwardRef98(
       },
       [commitDraft]
     );
-    useEffect41(() => {
+    useEffect42(() => {
       if (!open) {
         clearCommitTimer();
         setDraftBoth(null);
       }
       return clearCommitTimer;
     }, [open, clearCommitTimer, setDraftBoth]);
-    useEffect41(() => {
+    useEffect42(() => {
       if (!open) return;
       const onDoc = (e) => {
-        if (!wrapRef.current?.contains(e.target)) {
+        const target = e.target;
+        if (!wrapRef.current?.contains(target) && !popoverRef.current?.contains(target)) {
           flushDraft();
           setOpen(false);
           setActiveSeg(null);
@@ -27233,6 +27349,7 @@ var TimePicker = forwardRef98(
             "button",
             {
               type: "button",
+              ref: triggerRef,
               id: baseId,
               className: "ods-timepicker__trigger",
               onClick: () => !disabled && setOpen((o) => !o),
@@ -27260,81 +27377,86 @@ var TimePicker = forwardRef98(
               ]
             }
           ),
-          open && /* @__PURE__ */ jsxs110(
-            "div",
-            {
-              className: "ods-timepicker__popover",
-              role: "dialog",
-              "aria-label": "Select time",
-              children: [
-                /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__head", children: [
-                  /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__display", children: [
-                    segButton("hours", value.hours),
-                    /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__display-sep", children: ":" }),
-                    segButton("minutes", value.minutes),
-                    showSeconds && /* @__PURE__ */ jsxs110(Fragment44, { children: [
+          open && typeof document !== "undefined" && createPortal18(
+            /* @__PURE__ */ jsxs110(
+              "div",
+              {
+                ref: popoverRef,
+                className: "ods-timepicker__popover",
+                role: "dialog",
+                "aria-label": "Select time",
+                style: anchoredPopoverStyle(popoverPos),
+                children: [
+                  /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__head", children: [
+                    /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__display", children: [
+                      segButton("hours", value.hours),
                       /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__display-sep", children: ":" }),
-                      segButton("seconds", value.seconds ?? 0)
+                      segButton("minutes", value.minutes),
+                      showSeconds && /* @__PURE__ */ jsxs110(Fragment44, { children: [
+                        /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__display-sep", children: ":" }),
+                        segButton("seconds", value.seconds ?? 0)
+                      ] })
+                    ] }),
+                    !use24h && /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__period", children: [
+                      /* @__PURE__ */ jsx117(
+                        "button",
+                        {
+                          type: "button",
+                          className: cn(
+                            "ods-timepicker__period-btn",
+                            value.period === "AM" && "ods-timepicker__period-btn--active"
+                          ),
+                          onClick: () => setPeriod("AM"),
+                          children: "AM"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx117(
+                        "button",
+                        {
+                          type: "button",
+                          className: cn(
+                            "ods-timepicker__period-btn",
+                            value.period === "PM" && "ods-timepicker__period-btn--active"
+                          ),
+                          onClick: () => setPeriod("PM"),
+                          children: "PM"
+                        }
+                      )
                     ] })
                   ] }),
-                  !use24h && /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__period", children: [
-                    /* @__PURE__ */ jsx117(
-                      "button",
-                      {
-                        type: "button",
-                        className: cn(
-                          "ods-timepicker__period-btn",
-                          value.period === "AM" && "ods-timepicker__period-btn--active"
-                        ),
-                        onClick: () => setPeriod("AM"),
-                        children: "AM"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx117(
-                      "button",
-                      {
-                        type: "button",
-                        className: cn(
-                          "ods-timepicker__period-btn",
-                          value.period === "PM" && "ods-timepicker__period-btn--active"
-                        ),
-                        onClick: () => setPeriod("PM"),
-                        children: "PM"
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx117("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ jsxs110(Fragment43, { children: [
-                  /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__col", children: [
-                    /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__col-lbl", children: seg === "hours" ? "HOUR" : seg === "minutes" ? "MIN" : "SEC" }),
-                    /* @__PURE__ */ jsx117(
-                      "button",
-                      {
-                        type: "button",
-                        className: "ods-timepicker__step",
-                        onClick: () => stepBy(seg, 1),
-                        "aria-label": `${seg} up`,
-                        children: /* @__PURE__ */ jsx117(CaretUpIcon3, { size: "xs" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__col-val", children: pad(
-                      seg === "hours" ? value.hours : seg === "minutes" ? value.minutes : value.seconds ?? 0
-                    ) }),
-                    /* @__PURE__ */ jsx117(
-                      "button",
-                      {
-                        type: "button",
-                        className: "ods-timepicker__step",
-                        onClick: () => stepBy(seg, -1),
-                        "aria-label": `${seg} down`,
-                        children: /* @__PURE__ */ jsx117(CaretDownIcon3, { size: "xs" })
-                      }
-                    )
-                  ] }),
-                  i < arr.length - 1 && /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__sep", children: ":" })
-                ] }, seg)) })
-              ]
-            }
+                  /* @__PURE__ */ jsx117("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ jsxs110(Fragment43, { children: [
+                    /* @__PURE__ */ jsxs110("div", { className: "ods-timepicker__col", children: [
+                      /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__col-lbl", children: seg === "hours" ? "HOUR" : seg === "minutes" ? "MIN" : "SEC" }),
+                      /* @__PURE__ */ jsx117(
+                        "button",
+                        {
+                          type: "button",
+                          className: "ods-timepicker__step",
+                          onClick: () => stepBy(seg, 1),
+                          "aria-label": `${seg} up`,
+                          children: /* @__PURE__ */ jsx117(CaretUpIcon3, { size: "xs" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__col-val", children: pad(
+                        seg === "hours" ? value.hours : seg === "minutes" ? value.minutes : value.seconds ?? 0
+                      ) }),
+                      /* @__PURE__ */ jsx117(
+                        "button",
+                        {
+                          type: "button",
+                          className: "ods-timepicker__step",
+                          onClick: () => stepBy(seg, -1),
+                          "aria-label": `${seg} down`,
+                          children: /* @__PURE__ */ jsx117(CaretDownIcon3, { size: "xs" })
+                        }
+                      )
+                    ] }),
+                    i < arr.length - 1 && /* @__PURE__ */ jsx117("span", { className: "ods-timepicker__sep", children: ":" })
+                  ] }, seg)) })
+                ]
+              }
+            ),
+            document.body
           ),
           error ? /* @__PURE__ */ jsx117(
             "div",
@@ -27355,12 +27477,12 @@ TimePicker.displayName = "TimePicker";
 // src/components/TimezonePicker/TimezonePicker.tsx
 import {
   forwardRef as forwardRef99,
-  useCallback as useCallback45,
-  useEffect as useEffect42,
+  useCallback as useCallback46,
+  useEffect as useEffect43,
   useId as useId58,
   useMemo as useMemo31,
   useRef as useRef50,
-  useState as useState53
+  useState as useState54
 } from "react";
 import {
   CheckmarkIcon as CheckmarkIcon12,
@@ -27407,9 +27529,9 @@ var TimezonePicker = forwardRef99(
     const listboxId = `${baseId}-listbox`;
     const hintId = error || helperText ? `${baseId}-hint` : void 0;
     const describedBy = [consumerDescribedBy, hintId].filter(Boolean).join(" ") || void 0;
-    const [open, setOpen] = useState53(false);
-    const [query, setQuery] = useState53("");
-    const [activeIndex, setActiveIndex] = useState53(0);
+    const [open, setOpen] = useState54(false);
+    const [query, setQuery] = useState54("");
+    const [activeIndex, setActiveIndex] = useState54(0);
     const wrapRef = useRef50(null);
     const triggerRef = useRef50(null);
     const inputRef = useRef50(null);
@@ -27431,16 +27553,16 @@ var TimezonePicker = forwardRef99(
         (o) => o.iana.toLowerCase().includes(q2) || o.label.toLowerCase().includes(q2) || o.offset.toLowerCase().includes(q2) || o.region?.toLowerCase().includes(q2)
       );
     }, [options, query]);
-    useEffect42(() => {
+    useEffect43(() => {
       if (activeIndex >= filtered.length) setActiveIndex(0);
     }, [filtered.length, activeIndex]);
-    useEffect42(() => {
+    useEffect43(() => {
       if (!open) return;
       const idx = filtered.findIndex((o) => o.iana === value);
       setActiveIndex(idx >= 0 ? idx : 0);
       inputRef.current?.focus();
     }, [open]);
-    useEffect42(() => {
+    useEffect43(() => {
       if (!open) return;
       const onDoc = (e) => {
         if (!wrapRef.current?.contains(e.target)) {
@@ -27451,7 +27573,7 @@ var TimezonePicker = forwardRef99(
       document.addEventListener("mousedown", onDoc);
       return () => document.removeEventListener("mousedown", onDoc);
     }, [open]);
-    useEffect42(() => {
+    useEffect43(() => {
       if (!open) return;
       const list = listRef.current;
       if (!list) return;
@@ -27460,7 +27582,7 @@ var TimezonePicker = forwardRef99(
       );
       active?.scrollIntoView?.({ block: "nearest" });
     }, [activeIndex, open]);
-    const select = useCallback45(
+    const select = useCallback46(
       (iana) => {
         onChange?.(iana);
         setOpen(false);
@@ -27469,7 +27591,7 @@ var TimezonePicker = forwardRef99(
       },
       [onChange]
     );
-    const handlePopoverKey = useCallback45(
+    const handlePopoverKey = useCallback46(
       (e) => {
         if (e.key === "ArrowDown") {
           e.preventDefault();
@@ -27665,13 +27787,13 @@ TimezonePicker.displayName = "TimezonePicker";
 import { AnimatePresence as AnimatePresence22, motion as motion35 } from "framer-motion";
 import {
   createContext as createContext2,
-  useCallback as useCallback46,
+  useCallback as useCallback47,
   useContext as useContext3,
   useMemo as useMemo32,
   useRef as useRef51,
-  useState as useState54
+  useState as useState55
 } from "react";
-import { createPortal as createPortal17 } from "react-dom";
+import { createPortal as createPortal19 } from "react-dom";
 import { Fragment as Fragment46, jsx as jsx119, jsxs as jsxs112 } from "react/jsx-runtime";
 var defaultIcons = {
   success: /* @__PURE__ */ jsxs112("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
@@ -27818,8 +27940,8 @@ function ToastBody({ item, onDismiss }) {
   ] });
 }
 function PositionStack({ items, position, onDismiss, maxStack }) {
-  const [hovered, setHovered] = useState54(false);
-  const [pinned, setPinned] = useState54(false);
+  const [hovered, setHovered] = useState55(false);
+  const [pinned, setPinned] = useState55(false);
   const expanded = hovered || pinned;
   const ordered = useMemo32(() => [...items].reverse(), [items]);
   const isBottom = position.startsWith("bottom");
@@ -27919,10 +28041,10 @@ function ToastProvider({
   defaultPosition = "bottom-right",
   maxStack = 3
 }) {
-  const [toasts, setToasts] = useState54([]);
+  const [toasts, setToasts] = useState55([]);
   const timers = useRef51(/* @__PURE__ */ new Map());
   const idCounter2 = useRef51(0);
-  const dismiss = useCallback46((id) => {
+  const dismiss = useCallback47((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timers.current.get(id);
     if (timer) {
@@ -27930,7 +28052,7 @@ function ToastProvider({
       timers.current.delete(id);
     }
   }, []);
-  const dismissAll = useCallback46((position) => {
+  const dismissAll = useCallback47((position) => {
     setToasts((prev) => {
       const remaining = position ? prev.filter((t) => t.position !== position) : [];
       for (const t of prev) {
@@ -27945,7 +28067,7 @@ function ToastProvider({
       return remaining;
     });
   }, []);
-  const toast = useCallback46(
+  const toast = useCallback47(
     (options) => {
       const id = `toast-${++idCounter2.current}`;
       const item = {
@@ -28001,7 +28123,7 @@ function ToastProvider({
   }) });
   return /* @__PURE__ */ jsxs112(ToastContext.Provider, { value: ctx, children: [
     children,
-    typeof document !== "undefined" && createPortal17(containers, document.body)
+    typeof document !== "undefined" && createPortal19(containers, document.body)
   ] });
 }
 function useToast() {
@@ -28020,7 +28142,7 @@ function useToast() {
 
 // src/components/Toggle/Toggle.tsx
 import {
-  useCallback as useCallback47,
+  useCallback as useCallback48,
   useId as useId59,
   useRef as useRef52
 } from "react";
@@ -28051,7 +28173,7 @@ function Toggle({
   const groupLabelledBy = ariaLabelledBy ?? labelId;
   const groupAriaLabel = !groupLabelledBy ? ariaLabel ?? "Toggle group" : void 0;
   const buttonRefs = useRef52([]);
-  const findNextEnabled = useCallback47(
+  const findNextEnabled = useCallback48(
     (from, dir) => {
       if (options.length === 0) return -1;
       let i = from;
@@ -28064,11 +28186,11 @@ function Toggle({
     },
     [options, disabled]
   );
-  const focusIndex = useCallback47((i) => {
+  const focusIndex = useCallback48((i) => {
     if (i < 0) return;
     buttonRefs.current[i]?.focus();
   }, []);
-  const handleKey = useCallback47(
+  const handleKey = useCallback48(
     (e, idx) => {
       if (e.key === "ArrowRight" || e.key === "ArrowDown") {
         e.preventDefault();
@@ -28436,9 +28558,9 @@ function TopBar({
 import { AnimatePresence as AnimatePresence23, motion as motion36 } from "framer-motion";
 import {
   forwardRef as forwardRef101,
-  useCallback as useCallback48,
+  useCallback as useCallback49,
   useId as useId61,
-  useState as useState55
+  useState as useState56
 } from "react";
 import {
   BuildToolIcon,
@@ -28484,11 +28606,11 @@ var TraceStep = forwardRef101(
     const baseId = providedId ?? `ods-trace-step-${reactId}`;
     const headId = `${baseId}-head`;
     const contentId = `${baseId}-content`;
-    const [uncontrolledOpen, setUncontrolledOpen] = useState55(defaultOpen);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState56(defaultOpen);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : uncontrolledOpen;
     const canExpand = !!children;
-    const toggle = useCallback48(() => {
+    const toggle = useCallback49(() => {
       if (!canExpand) return;
       const next = !open;
       if (!isControlled) setUncontrolledOpen(next);
@@ -28630,11 +28752,11 @@ import { ChevronRightIcon as ChevronRightIcon5 } from "@octaviaflow/icons";
 import { motion as motion37, useReducedMotion as useReducedMotion14 } from "framer-motion";
 import {
   forwardRef as forwardRef102,
-  useCallback as useCallback49,
-  useEffect as useEffect43,
+  useCallback as useCallback50,
+  useEffect as useEffect44,
   useId as useId62,
   useMemo as useMemo33,
-  useState as useState56
+  useState as useState57
 } from "react";
 import { jsx as jsx125, jsxs as jsxs118 } from "react/jsx-runtime";
 function buildVisibleList(nodes, expanded, out = [], level = 0, parentId = null) {
@@ -28666,17 +28788,17 @@ var TreeView = forwardRef102(
     const reactId = useId62();
     const baseId = providedId ?? `ods-tree-${reactId}`;
     const reducedMotion = useReducedMotion14();
-    const [internalSelected, setInternalSelected] = useState56(defaultSelectedId);
+    const [internalSelected, setInternalSelected] = useState57(defaultSelectedId);
     const isSelectedControlled = controlledSelected !== void 0;
     const selectedId = isSelectedControlled ? controlledSelected : internalSelected;
-    const [internalExpanded, setInternalExpanded] = useState56(
+    const [internalExpanded, setInternalExpanded] = useState57(
       () => new Set(defaultExpandedIds ?? [])
     );
     const isExpandedControlled = controlledExpanded !== void 0;
     const expandedSet = isExpandedControlled ? controlledExpanded : internalExpanded;
-    const [loaded, setLoaded] = useState56({});
-    const [loading, setLoading] = useState56(/* @__PURE__ */ new Set());
-    const resolveChildren = useCallback49(
+    const [loaded, setLoaded] = useState57({});
+    const [loading, setLoading] = useState57(/* @__PURE__ */ new Set());
+    const resolveChildren = useCallback50(
       (node) => node.children ?? loaded[node.id],
       [loaded]
     );
@@ -28692,14 +28814,14 @@ var TreeView = forwardRef102(
       () => buildVisibleList(resolvedNodes, expandedSet),
       [resolvedNodes, expandedSet]
     );
-    const setExpanded = useCallback49(
+    const setExpanded = useCallback50(
       (next) => {
         if (!isExpandedControlled) setInternalExpanded(new Set(next));
         onExpandedChange?.(new Set(next));
       },
       [isExpandedControlled, onExpandedChange]
     );
-    const toggleExpand = useCallback49(
+    const toggleExpand = useCallback50(
       async (node) => {
         const next = new Set(expandedSet);
         const isOpen = next.has(node.id);
@@ -28728,7 +28850,7 @@ var TreeView = forwardRef102(
       },
       [expandedSet, setExpanded, onLoadChildren, loaded, loading]
     );
-    const handleSelect = useCallback49(
+    const handleSelect = useCallback50(
       (node) => {
         if (node.disabled || disabled) return;
         if (!isSelectedControlled) setInternalSelected(node.id);
@@ -28903,7 +29025,7 @@ var TreeView = forwardRef102(
       );
     };
     const visibleIdxCursor = { value: 0 };
-    useEffect43(() => {
+    useEffect44(() => {
     }, [tabStopId]);
     return /* @__PURE__ */ jsx125(
       "ul",
@@ -29053,10 +29175,10 @@ var UserCard = forwardRef103(
 UserCard.displayName = "UserCard";
 
 // src/components/WorkflowEditor/WorkflowEditor.tsx
-import { useCallback as useCallback51, useMemo as useMemo35, useState as useState57 } from "react";
+import { useCallback as useCallback52, useMemo as useMemo35, useState as useState58 } from "react";
 
 // src/hooks/useWorkflow.ts
-import { useCallback as useCallback50, useMemo as useMemo34, useReducer } from "react";
+import { useCallback as useCallback51, useMemo as useMemo34, useReducer } from "react";
 
 // src/workflow/types.ts
 var types_exports = {};
@@ -29570,11 +29692,11 @@ function useWorkflow(options = {}) {
     []
   );
   const [workflow, dispatch] = useReducer(reducer, initial);
-  const addNode = useCallback50(
+  const addNode = useCallback51(
     (node) => dispatch({ type: "ADD_NODE", payload: node }),
     []
   );
-  const createNode = useCallback50(
+  const createNode = useCallback51(
     (partial) => {
       const id = partial.id ?? genId("node");
       const ports = partial.ports ?? {
@@ -29623,27 +29745,27 @@ function useWorkflow(options = {}) {
     },
     []
   );
-  const updateNode = useCallback50(
+  const updateNode = useCallback51(
     (id, updates) => dispatch({ type: "UPDATE_NODE", payload: { id, updates } }),
     []
   );
-  const deleteNode = useCallback50(
+  const deleteNode = useCallback51(
     (id) => dispatch({ type: "DELETE_NODE", payload: id }),
     []
   );
-  const deleteNodes = useCallback50(
+  const deleteNodes = useCallback51(
     (ids) => dispatch({ type: "DELETE_NODES", payload: ids }),
     []
   );
-  const replaceNodes = useCallback50(
+  const replaceNodes = useCallback51(
     (nodes) => dispatch({ type: "REPLACE_NODES", payload: nodes }),
     []
   );
-  const addEdge = useCallback50(
+  const addEdge = useCallback51(
     (edge) => dispatch({ type: "ADD_EDGE", payload: edge }),
     []
   );
-  const createEdge = useCallback50(
+  const createEdge = useCallback51(
     (source, sourcePort, target, targetPort) => {
       const edge = {
         id: genId("edge"),
@@ -29661,20 +29783,20 @@ function useWorkflow(options = {}) {
     },
     []
   );
-  const deleteEdge = useCallback50(
+  const deleteEdge = useCallback51(
     (id) => dispatch({ type: "DELETE_EDGE", payload: id }),
     []
   );
-  const replaceEdges = useCallback50(
+  const replaceEdges = useCallback51(
     (edges) => dispatch({ type: "REPLACE_EDGES", payload: edges }),
     []
   );
-  const startConnecting = useCallback50(
+  const startConnecting = useCallback51(
     (nodeId, portId, portType) => dispatch({ type: "START_CONNECTING", payload: { nodeId, portId, portType } }),
     []
   );
-  const endConnecting = useCallback50(() => dispatch({ type: "END_CONNECTING" }), []);
-  const selectNode = useCallback50(
+  const endConnecting = useCallback51(() => dispatch({ type: "END_CONNECTING" }), []);
+  const selectNode = useCallback51(
     (id, multi = false) => {
       if (multi) {
         const current = workflow.canvas.selectedNodes;
@@ -29686,36 +29808,36 @@ function useWorkflow(options = {}) {
     },
     [workflow.canvas.selectedNodes]
   );
-  const selectNodes = useCallback50(
+  const selectNodes = useCallback51(
     (ids) => dispatch({ type: "SELECT_NODES", payload: ids }),
     []
   );
-  const selectEdge = useCallback50(
+  const selectEdge = useCallback51(
     (id) => dispatch({ type: "SELECT_EDGE", payload: id }),
     []
   );
-  const deselectAll = useCallback50(() => dispatch({ type: "DESELECT_ALL" }), []);
-  const zoomIn = useCallback50(() => {
+  const deselectAll = useCallback51(() => dispatch({ type: "DESELECT_ALL" }), []);
+  const zoomIn = useCallback51(() => {
     const z = Math.min(workflow.canvas.viewport.zoom * 1.2, 2);
     dispatch({ type: "UPDATE_VIEWPORT", payload: { zoom: z } });
   }, [workflow.canvas.viewport.zoom]);
-  const zoomOut = useCallback50(() => {
+  const zoomOut = useCallback51(() => {
     const z = Math.max(workflow.canvas.viewport.zoom / 1.2, 0.25);
     dispatch({ type: "UPDATE_VIEWPORT", payload: { zoom: z } });
   }, [workflow.canvas.viewport.zoom]);
-  const resetViewport = useCallback50(
+  const resetViewport = useCallback51(
     () => dispatch({ type: "UPDATE_VIEWPORT", payload: { x: 0, y: 0, zoom: 1 } }),
     []
   );
-  const setViewport = useCallback50(
+  const setViewport = useCallback51(
     (viewport) => dispatch({ type: "UPDATE_VIEWPORT", payload: viewport }),
     []
   );
-  const undo = useCallback50(() => dispatch({ type: "UNDO" }), []);
-  const redo = useCallback50(() => dispatch({ type: "REDO" }), []);
+  const undo = useCallback51(() => dispatch({ type: "UNDO" }), []);
+  const redo = useCallback51(() => dispatch({ type: "REDO" }), []);
   const canUndo = workflow.canvas.history.past.length > 0;
   const canRedo = workflow.canvas.history.future.length > 0;
-  const validate = useCallback50(() => workflow.validation, [workflow.validation]);
+  const validate = useCallback51(() => workflow.validation, [workflow.validation]);
   return {
     workflow,
     dispatch,
@@ -29821,35 +29943,35 @@ function WorkflowEditor({
 }) {
   const wf = useWorkflow(options);
   const { workflow, dispatch, canUndo, canRedo, undo, redo } = wf;
-  const [uncontrolledLock, setUncontrolledLock] = useState57(false);
-  const [uncontrolledDrawer, setUncontrolledDrawer] = useState57(!!drawer);
-  const [uncontrolledHistory, setUncontrolledHistory] = useState57(false);
-  const [uncontrolledDebug, setUncontrolledDebug] = useState57(false);
+  const [uncontrolledLock, setUncontrolledLock] = useState58(false);
+  const [uncontrolledDrawer, setUncontrolledDrawer] = useState58(!!drawer);
+  const [uncontrolledHistory, setUncontrolledHistory] = useState58(false);
+  const [uncontrolledDebug, setUncontrolledDebug] = useState58(false);
   const isLockMode = controlledLockMode ?? uncontrolledLock;
   const isDrawerOpen = controlledDrawerOpen ?? uncontrolledDrawer;
   const isHistoryOpen = controlledHistoryOpen ?? uncontrolledHistory;
   const isDebugOpen = controlledDebugOpen ?? uncontrolledDebug;
-  const toggleLock = useCallback51(() => {
+  const toggleLock = useCallback52(() => {
     const next = !isLockMode;
     if (controlledLockMode === void 0) setUncontrolledLock(next);
     onToggleLockMode?.(next);
   }, [isLockMode, controlledLockMode, onToggleLockMode]);
-  const toggleDrawer = useCallback51(() => {
+  const toggleDrawer = useCallback52(() => {
     const next = !isDrawerOpen;
     if (controlledDrawerOpen === void 0) setUncontrolledDrawer(next);
     onToggleDrawer?.(next);
   }, [isDrawerOpen, controlledDrawerOpen, onToggleDrawer]);
-  const toggleHistory = useCallback51(() => {
+  const toggleHistory = useCallback52(() => {
     const next = !isHistoryOpen;
     if (controlledHistoryOpen === void 0) setUncontrolledHistory(next);
     onToggleHistory?.(next);
   }, [isHistoryOpen, controlledHistoryOpen, onToggleHistory]);
-  const toggleDebug = useCallback51(() => {
+  const toggleDebug = useCallback52(() => {
     const next = !isDebugOpen;
     if (controlledDebugOpen === void 0) setUncontrolledDebug(next);
     onToggleDebug?.(next);
   }, [isDebugOpen, controlledDebugOpen, onToggleDebug]);
-  const handleReset = useCallback51(() => {
+  const handleReset = useCallback52(() => {
     if (onReset) onReset();
     else dispatch({ type: "RESET" });
   }, [onReset, dispatch]);
@@ -29858,7 +29980,7 @@ function WorkflowEditor({
     [workflow.canvas.nodes]
   );
   const nextEdges = useMemo35(() => workflow.canvas.edges.map(toNextEdge), [workflow.canvas.edges]);
-  const onNodesChange = useCallback51(
+  const onNodesChange = useCallback52(
     (changes) => {
       const reduced = applyNodeChanges(
         nextNodes,
@@ -29899,7 +30021,7 @@ function WorkflowEditor({
     },
     [nextNodes, workflow.canvas.nodes, wf, onNodeSelect]
   );
-  const onEdgesChange = useCallback51(
+  const onEdgesChange = useCallback52(
     (changes) => {
       const reduced = applyEdgeChanges(nextEdges, changes);
       const byId = new Map(reduced.map((e) => [e.id, e]));
@@ -29909,18 +30031,18 @@ function WorkflowEditor({
     },
     [nextEdges, workflow.canvas.edges, wf]
   );
-  const onConnect = useCallback51(
+  const onConnect = useCallback52(
     (c) => {
       wf.createEdge(c.source, c.sourceHandle ?? "default", c.target, c.targetHandle ?? "default");
     },
     [wf]
   );
-  const [canvasSize, setCanvasSize] = useState57({ w: 0, h: 0 });
-  const handleCanvasRef = useCallback51((node) => {
+  const [canvasSize, setCanvasSize] = useState58({ w: 0, h: 0 });
+  const handleCanvasRef = useCallback52((node) => {
     if (!node) return;
     setCanvasSize({ w: node.clientWidth, h: node.clientHeight });
   }, []);
-  const fitToView = useCallback51(() => {
+  const fitToView = useCallback52(() => {
     const nodes = workflow.canvas.nodes;
     if (nodes.length === 0) return;
     let minX = Infinity;
@@ -30163,7 +30285,7 @@ import {
 } from "@octaviaflow/icons";
 
 // src/hooks/useRelativeTime.ts
-import { useEffect as useEffect44, useState as useState58 } from "react";
+import { useEffect as useEffect45, useState as useState59 } from "react";
 function toMs(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -30182,8 +30304,8 @@ function formatRelativeTime(when, now2 = Date.now()) {
 }
 function useRelativeTime(date, options = {}) {
   const { intervalMs = 3e4 } = options;
-  const [now2, setNow] = useState58(() => Date.now());
-  useEffect44(() => {
+  const [now2, setNow] = useState59(() => Date.now());
+  useEffect45(() => {
     if (typeof window === "undefined") return;
     const id = window.setInterval(() => setNow(Date.now()), intervalMs);
     return () => window.clearInterval(id);
@@ -30192,7 +30314,7 @@ function useRelativeTime(date, options = {}) {
 }
 
 // src/hooks/useWorkflowRuntime.ts
-import { useEffect as useEffect45, useState as useState59 } from "react";
+import { useEffect as useEffect46, useState as useState60 } from "react";
 function toMs2(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -30206,8 +30328,8 @@ function formatWorkflowRuntime(ms) {
   return h > 0 ? `${h}:${pad2(m)}:${pad2(sec)}` : `${pad2(m)}:${pad2(sec)}`;
 }
 function useWorkflowRuntime(startedAt, active) {
-  const [, force] = useState59(0);
-  useEffect45(() => {
+  const [, force] = useState60(0);
+  useEffect46(() => {
     if (!active || startedAt == null) return;
     if (typeof window === "undefined") return;
     const id = window.setInterval(() => force((n) => n + 1), 1e3);
@@ -30576,11 +30698,11 @@ import {
 import { XMLValidator } from "fast-xml-parser";
 import {
   forwardRef as forwardRef104,
-  useCallback as useCallback52,
-  useEffect as useEffect46,
+  useCallback as useCallback53,
+  useEffect as useEffect47,
   useId as useId64,
   useMemo as useMemo36,
-  useState as useState60
+  useState as useState61
 } from "react";
 import { Fragment as Fragment50, jsx as jsx130, jsxs as jsxs123 } from "react/jsx-runtime";
 function parseXml(src) {
@@ -30711,8 +30833,8 @@ var XmlViewer = forwardRef104(
 );
 XmlViewer.displayName = "XmlViewer";
 function XmlEditBody({ text: initial, onChange, onValidate }) {
-  const [text, setText] = useState60(initial);
-  const [parseError, setParseError] = useState60(null);
+  const [text, setText] = useState61(initial);
+  const [parseError, setParseError] = useState61(null);
   const validate = (next) => {
     const result = XMLValidator.validate(next);
     if (result === true) {
@@ -30734,7 +30856,7 @@ function XmlEditBody({ text: initial, onChange, onValidate }) {
     onChange?.(next);
     validate(next);
   };
-  useEffect46(() => {
+  useEffect47(() => {
     validate(initial);
   }, []);
   return /* @__PURE__ */ jsxs123("div", { className: "ods-xml-viewer__edit", children: [
@@ -30775,10 +30897,10 @@ function XmlNodeRow({
   truncateAt,
   copyable
 }) {
-  const [open, setOpen] = useState60(depth < defaultExpandDepth);
-  const [copied, setCopied] = useState60(false);
+  const [open, setOpen] = useState61(depth < defaultExpandDepth);
+  const [copied, setCopied] = useState61(false);
   const pad2 = depth * 14;
-  const onCopy = useCallback52(
+  const onCopy = useCallback53(
     (e) => {
       e.stopPropagation();
       const text = serializeNode(node);
@@ -30962,11 +31084,11 @@ import {
 } from "@octaviaflow/icons";
 import {
   forwardRef as forwardRef105,
-  useCallback as useCallback53,
-  useEffect as useEffect47,
+  useCallback as useCallback54,
+  useEffect as useEffect48,
   useId as useId65,
   useMemo as useMemo37,
-  useState as useState61
+  useState as useState62
 } from "react";
 import YAML from "yaml";
 import { Fragment as Fragment51, jsx as jsx131, jsxs as jsxs124 } from "react/jsx-runtime";
@@ -31123,14 +31245,14 @@ var YamlViewer = forwardRef105(
       }
     }, [data]);
     const tokens = useMemo37(() => tokenizeYaml(text), [text]);
-    const [collapsed, setCollapsed] = useState61(() => {
+    const [collapsed, setCollapsed] = useState62(() => {
       const s = /* @__PURE__ */ new Set();
       tokens.forEach((t) => {
         if (t.hasChildren && t.depth >= defaultExpandDepth) s.add(t.index);
       });
       return s;
     });
-    const toggle = useCallback53((idx) => {
+    const toggle = useCallback54((idx) => {
       setCollapsed((prev) => {
         const next = new Set(prev);
         if (next.has(idx)) next.delete(idx);
@@ -31153,8 +31275,8 @@ var YamlViewer = forwardRef105(
       }
       return hide;
     }, [tokens, collapsed]);
-    const [copied, setCopied] = useState61(false);
-    const onCopy = useCallback53(() => {
+    const [copied, setCopied] = useState62(false);
+    const onCopy = useCallback54(() => {
       if (!navigator?.clipboard?.writeText) return;
       navigator.clipboard.writeText(text).then(
         () => {
@@ -31320,8 +31442,8 @@ function extractYamlErrorPosition(err, text) {
   return { line: 1, col: 1, message };
 }
 function YamlEditBody({ text: initial, onChange, onValidate }) {
-  const [text, setText] = useState61(initial);
-  const [parseError, setParseError] = useState61(null);
+  const [text, setText] = useState62(initial);
+  const [parseError, setParseError] = useState62(null);
   const validate = (next) => {
     try {
       YAML.parse(next);
@@ -31338,7 +31460,7 @@ function YamlEditBody({ text: initial, onChange, onValidate }) {
     onChange?.(next);
     validate(next);
   };
-  useEffect47(() => {
+  useEffect48(() => {
     validate(initial);
   }, []);
   return /* @__PURE__ */ jsxs124("div", { className: "ods-yaml-viewer__edit", children: [
@@ -31373,29 +31495,29 @@ function YamlEditBody({ text: initial, onChange, onValidate }) {
 }
 
 // src/hooks/useBanner.ts
-import { useCallback as useCallback54, useEffect as useEffect48, useRef as useRef53, useState as useState62 } from "react";
+import { useCallback as useCallback55, useEffect as useEffect49, useRef as useRef53, useState as useState63 } from "react";
 function useBanner(options = {}) {
   const { defaultOpen = false, autoDismissAfter, onDismiss } = options;
-  const [open, setOpen] = useState62(defaultOpen);
+  const [open, setOpen] = useState63(defaultOpen);
   const timerRef = useRef53(null);
   const onDismissRef = useRef53(onDismiss);
-  useEffect48(() => {
+  useEffect49(() => {
     onDismissRef.current = onDismiss;
   }, [onDismiss]);
-  const clearTimer = useCallback54(() => {
+  const clearTimer = useCallback55(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const hide = useCallback54(() => {
+  const hide = useCallback55(() => {
     clearTimer();
     setOpen((wasOpen) => {
       if (wasOpen) onDismissRef.current?.();
       return false;
     });
   }, [clearTimer]);
-  const show = useCallback54(() => {
+  const show = useCallback55(() => {
     clearTimer();
     setOpen(true);
     if (typeof autoDismissAfter === "number" && Number.isFinite(autoDismissAfter) && autoDismissAfter > 0) {
@@ -31406,11 +31528,11 @@ function useBanner(options = {}) {
       }, autoDismissAfter);
     }
   }, [autoDismissAfter, clearTimer]);
-  const toggle = useCallback54(() => {
+  const toggle = useCallback55(() => {
     if (open) hide();
     else show();
   }, [open, show, hide]);
-  useEffect48(() => () => clearTimer(), [clearTimer]);
+  useEffect49(() => () => clearTimer(), [clearTimer]);
   return {
     open,
     show,
@@ -31421,7 +31543,7 @@ function useBanner(options = {}) {
 }
 
 // src/hooks/useCallout.ts
-import { useCallback as useCallback55, useEffect as useEffect49, useState as useState63 } from "react";
+import { useCallback as useCallback56, useEffect as useEffect50, useState as useState64 } from "react";
 var STORAGE_PREFIX = "ods:callout:dismissed:";
 function readPersisted(key) {
   if (!key || typeof window === "undefined") return false;
@@ -31444,13 +31566,13 @@ function writePersisted(key, value) {
 }
 function useCallout(options = {}) {
   const { defaultOpen = true, persistKey, onDismiss } = options;
-  const [open, setOpen] = useState63(defaultOpen);
-  useEffect49(() => {
+  const [open, setOpen] = useState64(defaultOpen);
+  useEffect50(() => {
     if (persistKey && readPersisted(persistKey)) {
       setOpen(false);
     }
   }, []);
-  const dismiss = useCallback55(() => {
+  const dismiss = useCallback56(() => {
     setOpen((wasOpen) => {
       if (wasOpen) {
         writePersisted(persistKey, true);
@@ -31459,10 +31581,10 @@ function useCallout(options = {}) {
       return false;
     });
   }, [persistKey, onDismiss]);
-  const show = useCallback55(() => {
+  const show = useCallback56(() => {
     setOpen(true);
   }, []);
-  const toggle = useCallback55(() => {
+  const toggle = useCallback56(() => {
     setOpen((prev) => {
       const next = !prev;
       if (!next) {
@@ -31472,7 +31594,7 @@ function useCallout(options = {}) {
       return next;
     });
   }, [persistKey, onDismiss]);
-  const reset = useCallback55(() => {
+  const reset = useCallback56(() => {
     writePersisted(persistKey, false);
     setOpen(true);
   }, [persistKey]);
@@ -31545,7 +31667,7 @@ function breakpointMinWidth(name) {
 }
 
 // src/hooks/useRating.ts
-import { useCallback as useCallback56, useState as useState64 } from "react";
+import { useCallback as useCallback57, useState as useState65 } from "react";
 function useRating({
   value: controlled,
   defaultValue = 0,
@@ -31553,14 +31675,14 @@ function useRating({
   step = 1,
   onChange
 } = {}) {
-  const [internal, setInternal] = useState64(defaultValue);
+  const [internal, setInternal] = useState65(defaultValue);
   const value = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const clamp = useCallback56(
+  const clamp = useCallback57(
     (v) => Math.max(0, Math.min(max, v)),
     [max]
   );
-  const set = useCallback56(
+  const set = useCallback57(
     (next) => {
       const clamped = clamp(next);
       if (!isControlled) setInternal(clamped);
@@ -31582,10 +31704,10 @@ function useBinaryRating({
   defaultValue = null,
   onChange
 } = {}) {
-  const [internal, setInternal] = useState64(defaultValue);
+  const [internal, setInternal] = useState65(defaultValue);
   const value = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const set = useCallback56(
+  const set = useCallback57(
     (next) => {
       if (!isControlled) setInternal(next);
       onChange?.(next);
@@ -31604,30 +31726,30 @@ function useBinaryRating({
 }
 
 // src/hooks/useTimeline.ts
-import { useCallback as useCallback57, useState as useState65 } from "react";
+import { useCallback as useCallback58, useState as useState66 } from "react";
 function useTimeline({
   items: controlled,
   defaultItems = [],
   onChange
 } = {}) {
-  const [internal, setInternal] = useState65(defaultItems);
+  const [internal, setInternal] = useState66(defaultItems);
   const items = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const commit = useCallback57(
+  const commit = useCallback58(
     (next) => {
       if (!isControlled) setInternal(next);
       onChange?.(next);
     },
     [isControlled, onChange]
   );
-  const add = useCallback57(
+  const add = useCallback58(
     (item) => {
       if (items.some((i) => i.id === item.id)) return;
       commit([...items, item]);
     },
     [items, commit]
   );
-  const insert = useCallback57(
+  const insert = useCallback58(
     (index, item) => {
       if (items.some((i) => i.id === item.id)) return;
       const at = Math.max(0, Math.min(items.length, index));
@@ -31637,7 +31759,7 @@ function useTimeline({
     },
     [items, commit]
   );
-  const remove = useCallback57(
+  const remove = useCallback58(
     (id) => {
       const next = items.filter((i) => i.id !== id);
       if (next.length === items.length) return;
@@ -31645,7 +31767,7 @@ function useTimeline({
     },
     [items, commit]
   );
-  const update = useCallback57(
+  const update = useCallback58(
     (id, patch) => {
       let changed = false;
       const next = items.map((i) => {
@@ -31670,7 +31792,7 @@ function useTimeline({
 }
 
 // src/hooks/useTraceTimeline.ts
-import { useCallback as useCallback58, useRef as useRef54, useState as useState66 } from "react";
+import { useCallback as useCallback59, useRef as useRef54, useState as useState67 } from "react";
 var GLOBAL_SEQ = 0;
 var generateId = () => `ods-trace-${Date.now().toString(36)}-${(GLOBAL_SEQ++).toString(36)}`;
 function useTraceTimeline({
@@ -31678,12 +31800,12 @@ function useTraceTimeline({
   defaultSteps = [],
   onChange
 } = {}) {
-  const [internal, setInternal] = useState66(defaultSteps);
+  const [internal, setInternal] = useState67(defaultSteps);
   const steps = controlled ?? internal;
   const isControlled = controlled !== void 0;
   const stepsRef = useRef54(steps);
   stepsRef.current = steps;
-  const commit = useCallback58(
+  const commit = useCallback59(
     (next) => {
       stepsRef.current = next;
       if (!isControlled) setInternal(next);
@@ -31691,7 +31813,7 @@ function useTraceTimeline({
     },
     [isControlled, onChange]
   );
-  const start = useCallback58(
+  const start = useCallback59(
     (input) => {
       const id = input.id ?? generateId();
       const record = {
@@ -31711,7 +31833,7 @@ function useTraceTimeline({
     },
     [commit]
   );
-  const update = useCallback58(
+  const update = useCallback59(
     (id, patch) => {
       let changed = false;
       const next = stepsRef.current.map((s) => {
@@ -31723,19 +31845,19 @@ function useTraceTimeline({
     },
     [commit]
   );
-  const complete = useCallback58(
+  const complete = useCallback59(
     (id, patch = {}) => {
       update(id, { ...patch, status: "success" });
     },
     [update]
   );
-  const fail = useCallback58(
+  const fail = useCallback59(
     (id, patch = {}) => {
       update(id, { ...patch, status: "failed" });
     },
     [update]
   );
-  const remove = useCallback58(
+  const remove = useCallback59(
     (id) => {
       const next = stepsRef.current.filter((s) => s.id !== id);
       if (next.length === stepsRef.current.length) return;
@@ -31761,13 +31883,13 @@ function useTraceTimeline({
 
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
-import { createContext as createContext3, useContext as useContext4, useEffect as useEffect50, useMemo as useMemo38 } from "react";
+import { createContext as createContext3, useContext as useContext4, useEffect as useEffect51, useMemo as useMemo38 } from "react";
 import { OverlayProvider as OverlayProvider3 } from "react-aria";
 import { jsx as jsx132 } from "react/jsx-runtime";
 var OdsContext = createContext3(null);
 function OdsProvider({ config: userConfig, children }) {
   const resolved = useMemo38(() => resolveConfig(userConfig), [userConfig]);
-  useEffect50(() => {
+  useEffect51(() => {
     const cssVarsBlock = generateCssVars(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {
@@ -32263,12 +32385,14 @@ export {
   WorkflowHeaderExpanded,
   XmlViewer,
   YamlViewer,
+  anchoredPopoverStyle,
   applyHorizontalLayout,
   applyLayout,
   applyVerticalLayout,
   breakpointMinWidth,
   cn,
   codeToFlag,
+  computeAnchoredPosition,
   easeLinear,
   easeOutCubic,
   easeOutExpo,
@@ -32287,6 +32411,7 @@ export {
   sanitizeHref,
   sanitizeImageUrl,
   textareaTools,
+  useAnchoredPopover,
   useBanner,
   useBinaryRating,
   useBreakpoint,