@octaviaflow/core 3.0.11 → 3.0.13

package/dist/index.js

@@ -196,30 +196,95 @@ function AgentCard({
 
 // src/components/AuthCard/AuthCard.tsx
 import { useId, useRef as useRef2, useState } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AuthCard({
   logo,
   title,
   description,
   scope,
+  header,
+  headerExtra,
+  error,
+  success,
+  align = "center",
+  width,
   children,
   divider,
   footer,
   className
 }) {
-  return /* @__PURE__ */ jsxs3("div", { className: cn("ods-auth-card", className), children: [
-    logo && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__logo", children: logo }),
-    /* @__PURE__ */ jsxs3("div", { className: "ods-auth-card__head", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "ods-auth-card__title-row", children: [
-        /* @__PURE__ */ jsx3("h1", { className: "ods-auth-card__title", children: title }),
-        scope && /* @__PURE__ */ jsx3("span", { className: "ods-auth-card__scope", children: scope })
-      ] }),
-      description && /* @__PURE__ */ jsx3("p", { className: "ods-auth-card__desc", children: description })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__body", children }),
-    divider && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__divider", children: divider }),
-    footer && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__footer", children: footer })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "ods-auth-card",
+        align === "left" && "ods-auth-card--left",
+        className
+      ),
+      style: width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0,
+      children: [
+        header ?? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          logo && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__logo", children: logo }),
+          (title || description || scope) && /* @__PURE__ */ jsxs3("div", { className: "ods-auth-card__head", children: [
+            (title || scope) && /* @__PURE__ */ jsxs3("div", { className: "ods-auth-card__title-row", children: [
+              title && /* @__PURE__ */ jsx3("h1", { className: "ods-auth-card__title", children: title }),
+              scope && /* @__PURE__ */ jsx3("span", { className: "ods-auth-card__scope", children: scope })
+            ] }),
+            description && /* @__PURE__ */ jsx3("p", { className: "ods-auth-card__desc", children: description })
+          ] })
+        ] }),
+        headerExtra && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__header-extra", children: headerExtra }),
+        (error || success) && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "ods-auth-card__messages",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "var(--ods-space-2)"
+            },
+            children: [
+              error && /* @__PURE__ */ jsx3(AutoBanner, { variant: "error", children: error }),
+              success && /* @__PURE__ */ jsx3(AutoBanner, { variant: "success", children: success })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__body", children }),
+        divider && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__divider", children: divider }),
+        footer && /* @__PURE__ */ jsx3("div", { className: "ods-auth-card__footer", children: footer })
+      ]
+    }
+  );
+}
+function AutoBanner({
+  variant,
+  children
+}) {
+  const tone = variant === "error" ? {
+    bg: "var(--ods-status-error-bg)",
+    fg: "var(--ods-status-error-fg)",
+    bd: "var(--ods-status-error-bd)"
+  } : {
+    bg: "var(--ods-status-success-bg)",
+    fg: "var(--ods-status-success-fg)",
+    bd: "var(--ods-status-success-bd)"
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: variant === "error" ? "alert" : "status",
+      style: {
+        padding: "10px 12px",
+        background: tone.bg,
+        color: tone.fg,
+        border: `1px solid ${tone.bd}`,
+        borderRadius: "var(--ods-radius-1)",
+        fontSize: 13,
+        lineHeight: 1.45
+      },
+      children
+    }
+  );
 }
 function AuthDivider({ children = "OR", className }) {
   return /* @__PURE__ */ jsxs3("div", { className: cn("ods-auth-divider", className), children: [
@@ -585,14 +650,14 @@ function BlogCard({
 // src/components/Breadcrumb/Breadcrumb.tsx
 import { useRef as useRef3 } from "react";
 import { useBreadcrumbItem, useBreadcrumbs } from "react-aria";
-import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function BreadcrumbItem({ item, isCurrent }) {
   const ref = useRef3(null);
   const { itemProps } = useBreadcrumbItem(
     { children: item.label, isCurrent, elementType: item.href ? "a" : "span" },
     ref
   );
-  const content = /* @__PURE__ */ jsxs9(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs9(Fragment2, { children: [
     item.icon && /* @__PURE__ */ jsx9("span", { className: "ods-breadcrumb__icon", children: item.icon }),
     /* @__PURE__ */ jsx9("span", { children: item.label })
   ] });
@@ -2749,7 +2814,7 @@ function ChoiceCard({
 
 // src/components/CodeEditor/CodeEditor.tsx
 import { useEffect, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var COMMENT_PREFIX = {
   sql: "-- ",
   json: "// ",
@@ -3263,7 +3328,7 @@ ${indent}`;
           /* @__PURE__ */ jsxs17("span", { className: "ods-code-editor__pos", children: [
             "Ln ",
             activeLine,
-            selectionLen > 0 && /* @__PURE__ */ jsxs17(Fragment2, { children: [
+            selectionLen > 0 && /* @__PURE__ */ jsxs17(Fragment3, { children: [
               " ",
               "\xB7 ",
               selectionLen,
@@ -3281,7 +3346,7 @@ ${indent}`;
             /* @__PURE__ */ jsx18("span", { className: "ods-code-editor__sep", children: "\xB7" }),
             /* @__PURE__ */ jsx18("kbd", { className: "ods-code-editor__kbd", children: "\u2325\u2191\u2193" }),
             " move",
-            searchable && /* @__PURE__ */ jsxs17(Fragment2, { children: [
+            searchable && /* @__PURE__ */ jsxs17(Fragment3, { children: [
               /* @__PURE__ */ jsx18("span", { className: "ods-code-editor__sep", children: "\xB7" }),
               /* @__PURE__ */ jsx18("kbd", { className: "ods-code-editor__kbd", children: "\u2318F" }),
               " find"
@@ -3826,7 +3891,7 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var TYPE_CLASSES = {
   string: "string",
   integer: "integer",
@@ -4381,7 +4446,7 @@ function DataMapper({
                   " mapped"
                 ] })
               ] }),
-              requiredUnmapped > 0 && /* @__PURE__ */ jsxs21(Fragment3, { children: [
+              requiredUnmapped > 0 && /* @__PURE__ */ jsxs21(Fragment4, { children: [
                 /* @__PURE__ */ jsx22("span", { className: "ods-data-mapper__stat-sep", children: "\xB7" }),
                 /* @__PURE__ */ jsxs21("span", { className: "ods-data-mapper__stat ods-data-mapper__stat--warn", children: [
                   /* @__PURE__ */ jsx22("span", { className: "ods-data-mapper__stat-value", children: requiredUnmapped }),
@@ -5148,7 +5213,7 @@ import {
   useRef as useRef10,
   useState as useState7
 } from "react";
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function readValue(row, col) {
   if (typeof col.accessor === "function") return col.accessor(row);
   const k = col.accessor ?? col.key;
@@ -5429,7 +5494,7 @@ function DataTable(props) {
     className
   );
   return /* @__PURE__ */ jsxs22("div", { className: wrapperClass, role: "region", "aria-label": "Data table", children: [
-    /* @__PURE__ */ jsx23("div", { className: "ods-datatable__toolbar", children: showBulkBar ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+    /* @__PURE__ */ jsx23("div", { className: "ods-datatable__toolbar", children: showBulkBar ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
       /* @__PURE__ */ jsxs22("div", { className: "ods-datatable__bulk-summary", children: [
         /* @__PURE__ */ jsx23("span", { className: "ods-datatable__bulk-count", children: selectedCount }),
         /* @__PURE__ */ jsx23("span", { children: "selected" }),
@@ -5463,7 +5528,7 @@ function DataTable(props) {
         },
         i
       )) })
-    ] }) : /* @__PURE__ */ jsxs22(Fragment4, { children: [
+    ] }) : /* @__PURE__ */ jsxs22(Fragment5, { children: [
       /* @__PURE__ */ jsxs22("div", { className: "ods-datatable__title-block", children: [
         title && /* @__PURE__ */ jsxs22("h2", { className: "ods-datatable__title", children: [
           title,
@@ -5806,7 +5871,7 @@ function Row({
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, [menuOpen]);
-  return /* @__PURE__ */ jsxs22(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
     /* @__PURE__ */ jsxs22(
       "tr",
       {
@@ -6224,7 +6289,7 @@ function Dialog(props) {
 }
 
 // src/components/DonutChart/DonutChart.tsx
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function DonutChart({
   data,
   size = 160,
@@ -6275,7 +6340,7 @@ function DonutChart({
           i
         )) })
       ] }),
-      /* @__PURE__ */ jsx27("div", { className: "ods-donut__center", children: centerLabel ?? /* @__PURE__ */ jsxs26(Fragment5, { children: [
+      /* @__PURE__ */ jsx27("div", { className: "ods-donut__center", children: centerLabel ?? /* @__PURE__ */ jsxs26(Fragment6, { children: [
         /* @__PURE__ */ jsx27("div", { className: "ods-donut__value", children: total }),
         /* @__PURE__ */ jsx27("div", { className: "ods-donut__small", children: "total" })
       ] }) })
@@ -6343,10 +6408,10 @@ function Drawer({
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion6 } from "framer-motion";
-import { useRef as useRef13 } from "react";
+import { useEffect as useEffect6, useRef as useRef13 } from "react";
 import { useButton as useButton3, useMenu, useMenuItem, useMenuTrigger } from "react-aria";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
 function MenuItemComponent({ item, state, onAction }) {
   const ref = useRef13(null);
   const { menuItemProps } = useMenuItem({ key: item.key, onAction }, state, ref);
@@ -6374,9 +6439,37 @@ function MenuPopup({
   menuItems,
   triggerRef,
   align,
-  className
+  className,
+  closeOnOutsideClick,
+  closeOnEscape
 }) {
   const menuRef = useRef13(null);
+  useEffect6(() => {
+    if (!state.isOpen || !closeOnOutsideClick) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const insideMenu = menuRef.current?.contains(target);
+      const insideTrigger = triggerRef.current?.contains(target);
+      if (!insideMenu && !insideTrigger) {
+        state.close();
+      }
+    };
+    document.addEventListener("mousedown", handler, true);
+    return () => document.removeEventListener("mousedown", handler, true);
+  }, [state.isOpen, closeOnOutsideClick]);
+  useEffect6(() => {
+    if (!state.isOpen || !closeOnEscape) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        state.close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [state.isOpen, closeOnEscape]);
   const nonSepItems = menuItems.filter((i) => !i.separator);
   const children = nonSepItems.map((item, idx) => /* @__PURE__ */ jsx29($05678f3aee5e7d1a$export$6d08773d2e66f8f2, { textValue: item.label, children: item.label }, idx));
   const treeState = $6b915bde6cd300dd$export$728d6ba534403756({
@@ -6456,6 +6549,8 @@ function DropdownMenu({
   align = "start",
   className,
   triggerClassName,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
@@ -6473,7 +6568,7 @@ function DropdownMenu({
     triggerRef
   );
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeTriggerProps } = buttonProps;
-  return /* @__PURE__ */ jsxs28(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment7, { children: [
     /* @__PURE__ */ jsx29(
       "button",
       {
@@ -6490,7 +6585,9 @@ function DropdownMenu({
         menuItems: items,
         triggerRef,
         align,
-        className
+        className,
+        closeOnOutsideClick,
+        closeOnEscape
       }
     )
   ] });
@@ -6509,8 +6606,8 @@ function EmptyState({ icon, title, description, action, className }) {
 
 // src/components/ExecutionConsole/ExecutionConsole.tsx
 import { motion as motion7 } from "framer-motion";
-import { useEffect as useEffect6, useRef as useRef14 } from "react";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef14 } from "react";
+import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 var iconProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
@@ -6556,7 +6653,7 @@ function ExecutionConsole({
       void navigator.clipboard.writeText(text);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (open && logEndRef.current) {
       logEndRef.current.scrollIntoView?.({ behavior: "smooth" });
     }
@@ -6651,7 +6748,7 @@ function ExecutionConsole({
                 children: /* @__PURE__ */ jsx31(TrashIcon2, {})
               }
             ),
-            toolbar && /* @__PURE__ */ jsxs30(Fragment7, { children: [
+            toolbar && /* @__PURE__ */ jsxs30(Fragment8, { children: [
               /* @__PURE__ */ jsx31("span", { className: "ods-console__action-separator", "aria-hidden": "true" }),
               toolbar
             ] })
@@ -6722,7 +6819,7 @@ function FeatureCard({
 // src/components/FileDropzone/FileDropzone.tsx
 import {
   useCallback as useCallback4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useId as useId3,
   useRef as useRef15,
   useState as useState9
@@ -6794,7 +6891,7 @@ function sanitizeHref(url) {
 }
 
 // src/components/FileDropzone/FileDropzone.tsx
-import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 var UPLOAD_ICON = /* @__PURE__ */ jsx33("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx33(
   "path",
   {
@@ -6908,7 +7005,7 @@ function FileDropzone({
     },
     [disabled, onFiles, validate]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!files) return;
     const next = {};
     const created = [];
@@ -6925,7 +7022,7 @@ function FileDropzone({
       created.forEach((u) => URL.revokeObjectURL(u));
     };
   }, [files]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!pasteEnabled || disabled) return;
     const onPaste = (e) => {
       const active = document.activeElement;
@@ -7114,7 +7211,7 @@ function FileDropzone({
                         children: CHECK_ICON
                       }
                     ),
-                    status === "error" && /* @__PURE__ */ jsxs32(Fragment8, { children: [
+                    status === "error" && /* @__PURE__ */ jsxs32(Fragment9, { children: [
                       /* @__PURE__ */ jsx33(
                         "span",
                         {
@@ -7210,7 +7307,7 @@ import { motion as motion8 } from "framer-motion";
 import {
   forwardRef,
   useCallback as useCallback5,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useRef as useRef16,
   useState as useState10
 } from "react";
@@ -7326,7 +7423,7 @@ var FlowNode = forwardRef(function FlowNode2({
     },
     [isLockMode]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isDragging) return;
     const applyDelta = (clientX, clientY) => {
       const start = dragStartRef.current;
@@ -7822,7 +7919,7 @@ function FlowMinimap({
 }
 
 // src/components/FlowToolbar/FlowToolbar.tsx
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
 function FlowToolbar({ children, placement = "left", className }) {
   return /* @__PURE__ */ jsx38(
     "div",
@@ -7882,7 +7979,7 @@ var SVG_BASE = {
 var mkIcon = (children) => /* @__PURE__ */ jsx38("svg", { ...SVG_BASE, width: "16", height: "16", children });
 var FlowToolbarIcons = {
   save: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
       /* @__PURE__ */ jsx38("polyline", { points: "17 21 17 13 7 13 7 21" }),
       /* @__PURE__ */ jsx38("polyline", { points: "7 3 7 8 15 8" })
@@ -7891,70 +7988,70 @@ var FlowToolbarIcons = {
   run: mkIcon(/* @__PURE__ */ jsx38("polygon", { points: "6 4 20 12 6 20 6 4", fill: "currentColor", stroke: "none" })),
   stop: mkIcon(/* @__PURE__ */ jsx38("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1" })),
   lock: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
       /* @__PURE__ */ jsx38("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
     ] })
   ),
   unlock: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
       /* @__PURE__ */ jsx38("path", { d: "M8 11V7a4 4 0 0 1 8 0" })
     ] })
   ),
   reset: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("polyline", { points: "1 4 1 10 7 10" }),
       /* @__PURE__ */ jsx38("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
     ] })
   ),
   undo: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("path", { d: "M3 7v6h6" }),
       /* @__PURE__ */ jsx38("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-7.07 3.43L3 13" })
     ] })
   ),
   redo: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("path", { d: "M21 7v6h-6" }),
       /* @__PURE__ */ jsx38("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 7.07 3.43L21 13" })
     ] })
   ),
   drawerOpen: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
       /* @__PURE__ */ jsx38("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
       /* @__PURE__ */ jsx38("polyline", { points: "13 9 16 12 13 15" })
     ] })
   ),
   drawerClose: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
       /* @__PURE__ */ jsx38("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
       /* @__PURE__ */ jsx38("polyline", { points: "16 9 13 12 16 15" })
     ] })
   ),
   settings: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "3" }),
       /* @__PURE__ */ jsx38("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
     ] })
   ),
   history: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("path", { d: "M22 12A10 10 0 1 1 12 2" }),
       /* @__PURE__ */ jsx38("polyline", { points: "22 2 22 8 16 8" }),
       /* @__PURE__ */ jsx38("polyline", { points: "12 7 12 12 15 15" })
     ] })
   ),
   debug: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("polyline", { points: "4 17 10 11 4 5" }),
       /* @__PURE__ */ jsx38("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
     ] })
   ),
   zoomIn: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("circle", { cx: "11", cy: "11", r: "7" }),
       /* @__PURE__ */ jsx38("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
       /* @__PURE__ */ jsx38("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
@@ -7962,14 +8059,14 @@ var FlowToolbarIcons = {
     ] })
   ),
   zoomOut: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("circle", { cx: "11", cy: "11", r: "7" }),
       /* @__PURE__ */ jsx38("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
       /* @__PURE__ */ jsx38("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
     ] })
   ),
   zoomReset: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("circle", { cx: "11", cy: "11", r: "7" }),
       /* @__PURE__ */ jsx38("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
       /* @__PURE__ */ jsx38("polyline", { points: "8 9 8 13 12 13" }),
@@ -7977,7 +8074,7 @@ var FlowToolbarIcons = {
     ] })
   ),
   fit: mkIcon(
-    /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsxs37(Fragment10, { children: [
       /* @__PURE__ */ jsx38("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
       /* @__PURE__ */ jsx38("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
       /* @__PURE__ */ jsx38("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
@@ -8067,9 +8164,9 @@ function FormSection({
 }
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect, useRef as useRef18, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useLayoutEffect, useRef as useRef18, useState as useState11 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs39 } from "react/jsx-runtime";
 function computePosition(rect, panelRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
@@ -8109,7 +8206,7 @@ function HoverCard({
       closeTimer.current = null;
     }
   };
-  useEffect9(() => () => clearTimers(), []);
+  useEffect10(() => () => clearTimers(), []);
   const show = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setOpen(true), openDelay);
@@ -8130,7 +8227,7 @@ function HoverCard({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const h = () => reposition();
     window.addEventListener("scroll", h, true);
@@ -8174,7 +8271,7 @@ function HoverCard({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs39(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs39(Fragment11, { children: [
     triggerEl,
     portal
   ] });
@@ -8333,7 +8430,7 @@ Input.displayName = "Input";
 
 // src/components/JsonViewer/JsonViewer.tsx
 import { useMemo as useMemo8, useState as useState12 } from "react";
-import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs42 } from "react/jsx-runtime";
 var VARIANT = {
   string: "string",
   number: "number",
@@ -8435,7 +8532,7 @@ function JsonNode({
           renderKey,
           renderKey != null && /* @__PURE__ */ jsx43("span", { className: "ods-json-viewer__colon", children: ":" }),
           /* @__PURE__ */ jsx43("span", { className: "ods-json-viewer__bracket", children: openBracket }),
-          !open && /* @__PURE__ */ jsxs42(Fragment11, { children: [
+          !open && /* @__PURE__ */ jsxs42(Fragment12, { children: [
             /* @__PURE__ */ jsx43("span", { className: "ods-json-viewer__preview", children: isArray ? entries.length === 0 ? "" : `${entries.length} item${entries.length === 1 ? "" : "s"}` : entries.length === 0 ? "" : `${entries.length} key${entries.length === 1 ? "" : "s"}` }),
             /* @__PURE__ */ jsx43("span", { className: "ods-json-viewer__bracket", children: closeBracket })
           ] }),
@@ -8443,7 +8540,7 @@ function JsonNode({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs42(Fragment11, { children: [
+    open && /* @__PURE__ */ jsxs42(Fragment12, { children: [
       entries.map(([k, v], i) => /* @__PURE__ */ jsx43(
         JsonNode,
         {
@@ -8741,7 +8838,7 @@ function LinkButton({
 import { AnimatePresence as AnimatePresence6, motion as motion9 } from "framer-motion";
 import {
   useCallback as useCallback9,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo9,
   useRef as useRef20,
@@ -8803,7 +8900,7 @@ function MultiSelect({
     const rect = wrapRef.current.getBoundingClientRect();
     setDropdownPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!open) return;
     updatePosition();
     window.addEventListener("scroll", updatePosition, true);
@@ -8813,7 +8910,7 @@ function MultiSelect({
       window.removeEventListener("resize", updatePosition);
     };
   }, [open, updatePosition]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!open) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -8825,12 +8922,12 @@ function MultiSelect({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (open && showSearch) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
   }, [open, showSearch]);
-  useEffect10(() => setActiveIdx(0), [query, open]);
+  useEffect11(() => setActiveIdx(0), [query, open]);
   const [fitCount, setFitCount] = useState13(selectedValues.length);
   const [tick, setTick] = useState13(0);
   useLayoutEffect2(() => {
@@ -8859,7 +8956,7 @@ function MultiSelect({
     if (count < selectedValues.length && count > 0) count = Math.max(1, count - 1);
     setFitCount(count);
   }, [tick, selectedValues, maxVisibleTags]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (typeof ResizeObserver === "undefined") return;
     const row = tagsRowRef.current;
     if (!row) return;
@@ -9542,9 +9639,9 @@ function PhoneInput({
 }
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback12, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState16 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect12, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState16 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx54, jsxs as jsxs53 } from "react/jsx-runtime";
 function computePosition2(rect, popRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
@@ -9597,7 +9694,7 @@ function Popover({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition, content]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open) return;
     const onScroll = () => reposition();
     window.addEventListener("scroll", onScroll, true);
@@ -9607,7 +9704,7 @@ function Popover({
       window.removeEventListener("resize", onScroll);
     };
   }, [open, reposition]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !closeOnClickOutside) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -9618,7 +9715,7 @@ function Popover({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open, closeOnClickOutside, setOpen]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -9662,7 +9759,7 @@ function Popover({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs53(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment13, { children: [
     triggerEl,
     portal
   ] });
@@ -9819,7 +9916,7 @@ function ProgressRing({
 // src/components/PromptInput/PromptInput.tsx
 import {
   useCallback as useCallback13,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef23,
   useState as useState17
 } from "react";
@@ -9888,7 +9985,7 @@ function PromptInput({
     },
     [isControlled, onChange]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     const el = taRef.current;
     if (!el) return;
     const computed = window.getComputedStyle(el);
@@ -10551,7 +10648,7 @@ function Rating({
 // src/components/Resizable/Resizable.tsx
 import {
   useCallback as useCallback14,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useRef as useRef26,
   useState as useState19
 } from "react";
@@ -10592,7 +10689,7 @@ function Resizable({
     if (internalSplit != null) return internalSplit;
     return defaultSplit > 0 && defaultSplit < 1 ? 0 : defaultSplit;
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (splitProp != null) {
       setSplit(splitProp);
       return;
@@ -10625,7 +10722,7 @@ function Resizable({
     draggingRef.current = true;
     setDragging(true);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const el = wrapRef.current;
@@ -10732,7 +10829,7 @@ function ResizablePanel({
     setDragging(true);
     startRef.current = { x: e.clientX, size };
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const dx = e.clientX - startRef.current.x;
@@ -10795,10 +10892,10 @@ function Ribbon({
 
 // src/components/Select/Select.tsx
 import { AnimatePresence as AnimatePresence7, motion as motion10 } from "framer-motion";
-import { useCallback as useCallback15, useEffect as useEffect14, useMemo as useMemo10, useRef as useRef27, useState as useState20 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect15, useMemo as useMemo10, useRef as useRef27, useState as useState20 } from "react";
 import { HiddenSelect, useButton as useButton4, useListBox, useOption, useSelect } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx66, jsxs as jsxs65 } from "react/jsx-runtime";
 function ListBox(props) {
   const ref = useRef27(null);
   const { listBoxRef = ref, state } = props;
@@ -10951,7 +11048,7 @@ function Select({
       width: rect.width
     });
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.isOpen) {
       updatePosition();
       window.addEventListener("scroll", updatePosition, true);
@@ -10962,7 +11059,7 @@ function Select({
       };
     }
   }, [state.isOpen, updatePosition]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.isOpen && searchable && searchRef.current) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
@@ -10995,7 +11092,7 @@ function Select({
             "aria-required": required || void 0,
             className: cn("ods-select__trigger", state.isOpen && "ods-select__trigger--open"),
             children: [
-              /* @__PURE__ */ jsx66("span", { className: "ods-select__value", children: selectedOption ? /* @__PURE__ */ jsxs65(Fragment13, { children: [
+              /* @__PURE__ */ jsx66("span", { className: "ods-select__value", children: selectedOption ? /* @__PURE__ */ jsxs65(Fragment14, { children: [
                 selectedOption.icon && /* @__PURE__ */ jsx66("span", { className: "ods-select__value-icon", children: selectedOption.icon }),
                 selectedOption.label
               ] }) : /* @__PURE__ */ jsx66("span", { className: "ods-select__placeholder", children: placeholder }) }),
@@ -11076,9 +11173,9 @@ function SettingsRow({
 
 // src/components/Sheet/Sheet.tsx
 import { AnimatePresence as AnimatePresence8, motion as motion11 } from "framer-motion";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx68, jsxs as jsxs67 } from "react/jsx-runtime";
 var slideVariants = {
   top: { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } },
   bottom: { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } },
@@ -11111,7 +11208,7 @@ function Sheet({
   dragHandle = true,
   className
 }) {
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -11122,7 +11219,7 @@ function Sheet({
   const variant = slideVariants[side];
   const resolved = resolveSize(side, size);
   const isVertical = side === "left" || side === "right";
-  const content = /* @__PURE__ */ jsx68(AnimatePresence8, { children: open && /* @__PURE__ */ jsxs67(Fragment14, { children: [
+  const content = /* @__PURE__ */ jsx68(AnimatePresence8, { children: open && /* @__PURE__ */ jsxs67(Fragment15, { children: [
     /* @__PURE__ */ jsx68(
       motion11.div,
       {
@@ -11163,8 +11260,8 @@ function Sheet({
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef28, useState as useState21 } from "react";
-import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs68 } from "react/jsx-runtime";
+import { useCallback as useCallback16, useEffect as useEffect17, useRef as useRef28, useState as useState21 } from "react";
+import { Fragment as Fragment16, jsx as jsx69, jsxs as jsxs68 } from "react/jsx-runtime";
 function Sidebar({
   variant = "expanded",
   brand,
@@ -11186,7 +11283,7 @@ function Sidebar({
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
   const [internalPinned, setInternalPinned] = useState21(defaultPinned);
-  useEffect16(() => {
+  useEffect17(() => {
     if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
@@ -11221,7 +11318,7 @@ function Sidebar({
       closeTimer.current = null;
     }
   };
-  useEffect16(() => () => clearTimers(), []);
+  useEffect17(() => () => clearTimers(), []);
   const handleEnter = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setHoverOpen(true), hoverOpenDelay);
@@ -11233,7 +11330,7 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
-  useEffect16(() => {
+  useEffect17(() => {
     if (!overlayOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -11309,7 +11406,7 @@ function RailLayout({
   tooltipDelay,
   suppressTooltips
 }) {
-  return /* @__PURE__ */ jsxs68(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
     logo && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__logo-rail", children: logo }),
     onToggle && /* @__PURE__ */ jsx69(
       "button",
@@ -11383,23 +11480,24 @@ function RailItem({
   tooltipDelay,
   suppressTooltip
 }) {
-  const [tipOpen, setTipOpen] = useState21(false);
+  const [open, setOpen] = useState21(false);
   const timerRef = useRef28(null);
+  const hasChildren = !!(item.children && item.children.length > 0);
   const clear = () => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   };
-  useEffect16(() => () => clear(), []);
+  useEffect17(() => () => clear(), []);
   const show = () => {
     if (suppressTooltip) return;
     clear();
-    timerRef.current = setTimeout(() => setTipOpen(true), tooltipDelay);
+    timerRef.current = setTimeout(() => setOpen(true), tooltipDelay);
   };
   const hide = () => {
     clear();
-    setTipOpen(false);
+    setOpen(false);
   };
   const Comp = item.href ? "a" : "button";
   const labelText = typeof item.label === "string" ? item.label : void 0;
@@ -11418,13 +11516,20 @@ function RailItem({
             type: item.href ? void 0 : "button",
             href: item.href,
             onClick: item.onClick,
-            className: cn("ods-sidebar__rail-item", item.active && "ods-sidebar__rail-item--active"),
+            className: cn(
+              "ods-sidebar__rail-item",
+              hasChildren && "ods-sidebar__rail-item--parent",
+              item.active && "ods-sidebar__rail-item--active"
+            ),
             "aria-current": item.active ? "page" : void 0,
             "aria-label": labelText,
+            "aria-haspopup": hasChildren ? "menu" : void 0,
+            "aria-expanded": hasChildren ? open : void 0,
             children: /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-icon", children: item.icon })
           }
         ),
-        tipOpen && labelText && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
+        open && labelText && hasChildren && /* @__PURE__ */ jsx69(RailFlyout, { title: labelText, items: item.children ?? [] }),
+        open && labelText && !hasChildren && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
           /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-tooltip-label", children: labelText }),
           item.shortcut && /* @__PURE__ */ jsx69("kbd", { className: "ods-sidebar__rail-kbd", children: item.shortcut })
         ] })
@@ -11432,6 +11537,34 @@ function RailItem({
     }
   );
 }
+function RailFlyout({ title, items }) {
+  return /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-flyout", role: "menu", children: [
+    /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__rail-flyout-header", children: /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-title", children: title }) }),
+    /* @__PURE__ */ jsx69("ul", { className: "ods-sidebar__rail-flyout-list", children: items.map((child) => {
+      const ChildComp = child.href ? "a" : "button";
+      return /* @__PURE__ */ jsx69("li", { children: /* @__PURE__ */ jsxs68(
+        ChildComp,
+        {
+          type: child.href ? void 0 : "button",
+          href: child.href,
+          onClick: child.onClick,
+          role: "menuitem",
+          className: cn(
+            "ods-sidebar__rail-flyout-item",
+            child.active && "ods-sidebar__rail-flyout-item--active"
+          ),
+          "aria-current": child.active ? "page" : void 0,
+          children: [
+            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-icon", children: child.icon }),
+            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-label", children: child.label }),
+            child.tag && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-tag", children: child.tag }),
+            child.badge && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-badge", children: child.badge })
+          ]
+        }
+      ) }, child.id);
+    }) })
+  ] });
+}
 function ExpandedLayout({
   logo,
   brand,
@@ -11442,7 +11575,7 @@ function ExpandedLayout({
   pinned,
   onPinToggle
 }) {
-  return /* @__PURE__ */ jsxs68(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
     /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__header", children: [
       logo && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__logo", children: logo }),
       brand && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__brand", children: [
@@ -11505,7 +11638,7 @@ function ExpandedItem({ item, level }) {
     item.defaultExpanded ?? (hasChildren && hasActiveDescendant(item))
   );
   if (hasChildren) {
-    return /* @__PURE__ */ jsxs68(Fragment15, { children: [
+    return /* @__PURE__ */ jsxs68(Fragment16, { children: [
       /* @__PURE__ */ jsxs68(
         "button",
         {
@@ -11587,7 +11720,7 @@ function ExpandedItem({ item, level }) {
 }
 function SidebarUserCard({ user }) {
   const labelText = typeof user.name === "string" ? user.name : "User";
-  const body = /* @__PURE__ */ jsxs68(Fragment15, { children: [
+  const body = /* @__PURE__ */ jsxs68(Fragment16, { children: [
     /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-avatar", children: user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") }) }),
     /* @__PURE__ */ jsxs68("span", { className: "ods-sidebar__user-info", children: [
       /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-name", children: user.name }),
@@ -11659,7 +11792,7 @@ import { AnimatePresence as AnimatePresence9, motion as motion12 } from "framer-
 import { useRef as useRef29 } from "react";
 import { FocusScope as FocusScope2, OverlayProvider as OverlayProvider2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
 import { createPortal as createPortal8 } from "react-dom";
-import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx71, jsxs as jsxs69 } from "react/jsx-runtime";
 var slideVariants2 = {
   left: {
     initial: { x: "-100%" },
@@ -11697,7 +11830,7 @@ function SlideoutContent({
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeOverlayProps } = overlayProps;
   const variant = slideVariants2[position];
   const panelWidth = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsx71(AnimatePresence9, { children: open && /* @__PURE__ */ jsxs69(Fragment16, { children: [
+  return /* @__PURE__ */ jsx71(AnimatePresence9, { children: open && /* @__PURE__ */ jsxs69(Fragment17, { children: [
     /* @__PURE__ */ jsx71(
       motion12.div,
       {
@@ -11913,7 +12046,7 @@ function SocialButton({
 // src/components/Sortable/Sortable.tsx
 import {
   useCallback as useCallback17,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useRef as useRef30,
   useState as useState22
 } from "react";
@@ -11996,7 +12129,7 @@ function Sortable({
     },
     [items, onChange]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!autoScroll || !draggingId) return;
     const container = containerRef.current;
     if (!container) return;
@@ -12046,7 +12179,7 @@ function Sortable({
       }
     };
   }, [autoScroll, autoScrollEdge, draggingId, isVertical]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!draggingId) return;
     const onKey = (e) => {
       if (e.key === "Escape") cancelDrag();
@@ -12397,7 +12530,7 @@ function Switch({
 
 // src/components/Table/Table.tsx
 import { useCallback as useCallback18, useState as useState23 } from "react";
-import { Fragment as Fragment17, jsx as jsx79, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx79, jsxs as jsxs76 } from "react/jsx-runtime";
 function Table({
   columns,
   data,
@@ -12520,7 +12653,7 @@ function TableRow({
 }) {
   const isSelected = selectedRows?.has(rowIndex) ?? false;
   const [expanded, setExpanded] = useState23(false);
-  return /* @__PURE__ */ jsxs76(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs76(Fragment18, { children: [
     /* @__PURE__ */ jsxs76(
       "tr",
       {
@@ -12897,13 +13030,13 @@ function Timeline({ items, size = "md", className }) {
 
 // src/components/TimePicker/TimePicker.tsx
 import {
-  Fragment as Fragment18,
+  Fragment as Fragment19,
   useCallback as useCallback19,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useRef as useRef34,
   useState as useState27
 } from "react";
-import { Fragment as Fragment19, jsx as jsx85, jsxs as jsxs82 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx85, jsxs as jsxs82 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
 function format(v, use24h, showSeconds) {
   const base = `${pad(v.hours)}:${pad(v.minutes)}${showSeconds ? `:${pad(v.seconds ?? 0)}` : ""}`;
@@ -12938,7 +13071,7 @@ function TimePicker({
   const minutesRef = useRef34(null);
   const secondsRef = useRef34(null);
   const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
-  useEffect18(() => {
+  useEffect19(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -13112,7 +13245,7 @@ function TimePicker({
               segButton("hours", value.hours),
               /* @__PURE__ */ jsx85("span", { className: "ods-timepicker__display-sep", children: ":" }),
               segButton("minutes", value.minutes),
-              showSeconds && /* @__PURE__ */ jsxs82(Fragment19, { children: [
+              showSeconds && /* @__PURE__ */ jsxs82(Fragment20, { children: [
                 /* @__PURE__ */ jsx85("span", { className: "ods-timepicker__display-sep", children: ":" }),
                 segButton("seconds", value.seconds ?? 0)
               ] })
@@ -13144,7 +13277,7 @@ function TimePicker({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx85("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ jsxs82(Fragment18, { children: [
+          /* @__PURE__ */ jsx85("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ jsxs82(Fragment19, { children: [
             /* @__PURE__ */ jsxs82("div", { className: "ods-timepicker__col", children: [
               /* @__PURE__ */ jsx85("span", { className: "ods-timepicker__col-lbl", children: seg === "hours" ? "HOUR" : seg === "minutes" ? "MIN" : "SEC" }),
               /* @__PURE__ */ jsx85(
@@ -13199,8 +13332,8 @@ function TimePicker({
 }
 
 // src/components/TimezonePicker/TimezonePicker.tsx
-import { useEffect as useEffect19, useMemo as useMemo12, useRef as useRef35, useState as useState28 } from "react";
-import { Fragment as Fragment20, jsx as jsx86, jsxs as jsxs83 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useMemo as useMemo12, useRef as useRef35, useState as useState28 } from "react";
+import { Fragment as Fragment21, jsx as jsx86, jsxs as jsxs83 } from "react/jsx-runtime";
 var DEFAULT_TZS = [
   { iana: "America/Los_Angeles", label: "Pacific Time", offset: "UTC\u22128" },
   { iana: "America/Denver", label: "Mountain Time", offset: "UTC\u22127" },
@@ -13239,7 +13372,7 @@ function TimezonePicker({
       (o) => o.iana.toLowerCase().includes(q) || o.label.toLowerCase().includes(q) || o.offset.toLowerCase().includes(q) || o.region?.toLowerCase().includes(q)
     );
   }, [options, query]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -13250,7 +13383,7 @@ function TimezonePicker({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (open) requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
   const select = (iana) => {
@@ -13293,7 +13426,7 @@ function TimezonePicker({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx86("span", { className: "ods-tzpicker__info", children: selected ? /* @__PURE__ */ jsxs83(Fragment20, { children: [
+              /* @__PURE__ */ jsx86("span", { className: "ods-tzpicker__info", children: selected ? /* @__PURE__ */ jsxs83(Fragment21, { children: [
                 /* @__PURE__ */ jsx86("span", { className: "ods-tzpicker__name", children: selected.label }),
                 /* @__PURE__ */ jsxs83("span", { className: "ods-tzpicker__meta", children: [
                   selected.iana.split("/").pop()?.replace(/_/g, " "),
@@ -13412,7 +13545,7 @@ import {
   useState as useState29
 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
-import { Fragment as Fragment21, jsx as jsx87, jsxs as jsxs84 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx87, jsxs as jsxs84 } from "react/jsx-runtime";
 var defaultIcons = {
   success: /* @__PURE__ */ jsxs84("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx87("circle", { cx: "8", cy: "8", r: "7", fill: "var(--ods-status-success-bg)", stroke: "var(--ods-status-success-bd)" }),
@@ -13467,9 +13600,9 @@ var defaultIcons = {
 var ToastContext = createContext2(null);
 function ToastBody({ item, onDismiss }) {
   const dismiss = () => onDismiss(item.id);
-  if (item.render) return /* @__PURE__ */ jsx87(Fragment21, { children: item.render({ id: item.id, dismiss }) });
+  if (item.render) return /* @__PURE__ */ jsx87(Fragment22, { children: item.render({ id: item.id, dismiss }) });
   const title = item.title ?? item.message;
-  return /* @__PURE__ */ jsxs84(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs84(Fragment22, { children: [
     /* @__PURE__ */ jsx87("span", { className: "ods-toast__icon", "aria-hidden": "true", children: item.icon ?? defaultIcons[item.variant] }),
     /* @__PURE__ */ jsxs84("div", { className: "ods-toast__body", children: [
       title && /* @__PURE__ */ jsx87("div", { className: "ods-toast__title", children: title }),
@@ -13665,7 +13798,7 @@ function ToastProvider({
     return out;
   }, [toasts]);
   const ctx = { toast, dismiss, dismissAll };
-  const containers = /* @__PURE__ */ jsx87(Fragment21, { children: POSITIONS.map((pos) => {
+  const containers = /* @__PURE__ */ jsx87(Fragment22, { children: POSITIONS.map((pos) => {
     const list = groups[pos];
     if (list.length === 0) return null;
     return /* @__PURE__ */ jsx87(
@@ -13871,14 +14004,14 @@ import { AnimatePresence as AnimatePresence11, motion as motion15 } from "framer
 import {
   cloneElement,
   useCallback as useCallback21,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useLayoutEffect as useLayoutEffect4,
   useRef as useRef37,
   useState as useState30
 } from "react";
 import { useTooltip, useTooltipTrigger } from "react-aria";
 import { createPortal as createPortal10 } from "react-dom";
-import { Fragment as Fragment22, jsx as jsx91, jsxs as jsxs88 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx91, jsxs as jsxs88 } from "react/jsx-runtime";
 function computePosition3(rect, tipRect, position, offset) {
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
@@ -13922,7 +14055,7 @@ function TooltipContent({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [state.isOpen, reposition]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!state.isOpen) return;
     const handler = () => reposition();
     window.addEventListener("scroll", handler, true);
@@ -13981,7 +14114,7 @@ function Tooltip({
   const triggerRef = useRef37(null);
   const state = $3834487504f4fc00$export$4d40659c25ecb50b({ delay });
   const { triggerProps } = useTooltipTrigger({ delay }, state, triggerRef);
-  return /* @__PURE__ */ jsxs88(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment23, { children: [
     cloneElement(children, {
       ...triggerProps,
       ref: triggerRef
@@ -15251,7 +15384,7 @@ function DefaultEmptyState() {
 
 // src/components/XmlViewer/XmlViewer.tsx
 import { useMemo as useMemo16, useState as useState33 } from "react";
-import { Fragment as Fragment23, jsx as jsx96, jsxs as jsxs93 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx96, jsxs as jsxs93 } from "react/jsx-runtime";
 function parseXml(src) {
   if (typeof window !== "undefined" && typeof window.DOMParser !== "undefined") {
     try {
@@ -15392,9 +15525,9 @@ function XmlNodeRow({
             /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__attr-eq", children: "=" }),
             /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__attr-value", children: `"${v}"` })
           ] }, k)),
-          isSelfClosing ? /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__bracket", children: " />" }) : /* @__PURE__ */ jsxs93(Fragment23, { children: [
+          isSelfClosing ? /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__bracket", children: " />" }) : /* @__PURE__ */ jsxs93(Fragment24, { children: [
             /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__bracket", children: ">" }),
-            !open && /* @__PURE__ */ jsxs93(Fragment23, { children: [
+            !open && /* @__PURE__ */ jsxs93(Fragment24, { children: [
               /* @__PURE__ */ jsxs93("span", { className: "ods-xml-viewer__preview", children: [
                 children.length,
                 " child",
@@ -15408,7 +15541,7 @@ function XmlNodeRow({
         ]
       }
     ),
-    !isSelfClosing && open && /* @__PURE__ */ jsxs93(Fragment23, { children: [
+    !isSelfClosing && open && /* @__PURE__ */ jsxs93(Fragment24, { children: [
       children.map((c, i) => /* @__PURE__ */ jsx96(
         XmlNodeRow,
         {
@@ -15432,7 +15565,7 @@ function XmlNodeRow({
 
 // src/components/YamlViewer/YamlViewer.tsx
 import { useMemo as useMemo17, useState as useState34 } from "react";
-import { Fragment as Fragment24, jsx as jsx97, jsxs as jsxs94 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx97, jsxs as jsxs94 } from "react/jsx-runtime";
 function toYaml(value, indent = 0) {
   const pad2 = "  ".repeat(indent);
   if (value === null) return "null";
@@ -15649,7 +15782,7 @@ function YamlViewer({
               }
             ) : /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__caret-spacer" }),
             t.kind === "comment" && /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__comment", children: t.raw.trim() }),
-            t.kind === "key" && /* @__PURE__ */ jsxs94(Fragment24, { children: [
+            t.kind === "key" && /* @__PURE__ */ jsxs94(Fragment25, { children: [
               t.raw.trim().startsWith("-") && /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__dash", children: "- " }),
               /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__key", children: t.key }),
               /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__colon", children: ":" }),
@@ -15668,7 +15801,7 @@ function YamlViewer({
               ),
               isCollapsed && /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__preview", children: " \u2026" })
             ] }),
-            t.kind === "sequence" && /* @__PURE__ */ jsxs94(Fragment24, { children: [
+            t.kind === "sequence" && /* @__PURE__ */ jsxs94(Fragment25, { children: [
               /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__dash", children: "- " }),
               /* @__PURE__ */ jsx97(
                 "span",
@@ -15702,13 +15835,13 @@ function YamlViewer({
 
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect21, useMemo as useMemo18 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect22, useMemo as useMemo18 } from "react";
 import { OverlayProvider as OverlayProvider3 } from "react-aria";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var OdsContext = createContext3(null);
 function OdsProvider({ config: userConfig, children }) {
   const resolved = useMemo18(() => resolveConfig(userConfig), [userConfig]);
-  useEffect21(() => {
+  useEffect22(() => {
     const cssVarsBlock = generateCssVars(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {