@octaviaflow/core 3.0.9 → 3.0.11

package/dist/index.js

@@ -195,7 +195,7 @@ function AgentCard({
 }
 
 // src/components/AuthCard/AuthCard.tsx
-import { useState } from "react";
+import { useId, useRef as useRef2, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AuthCard({
   logo,
@@ -245,24 +245,61 @@ function AuthTabs({ tabs, defaultTab, value, onChange, className }) {
     onChange?.(id);
   };
   const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];
+  const scopeId = useId();
+  const tabRefs = useRef2({});
+  const handleKeyDown = (e) => {
+    const ids = tabs.map((t) => t.id);
+    const currentIdx = ids.indexOf(active);
+    if (currentIdx === -1) return;
+    let nextIdx = null;
+    if (e.key === "ArrowRight") nextIdx = (currentIdx + 1) % ids.length;
+    else if (e.key === "ArrowLeft") nextIdx = (currentIdx - 1 + ids.length) % ids.length;
+    else if (e.key === "Home") nextIdx = 0;
+    else if (e.key === "End") nextIdx = ids.length - 1;
+    if (nextIdx === null) return;
+    e.preventDefault();
+    const nextId = ids[nextIdx];
+    select(nextId);
+    tabRefs.current[nextId]?.focus();
+  };
   return /* @__PURE__ */ jsxs3("div", { className: cn("ods-auth-tabs", className), children: [
-    /* @__PURE__ */ jsx3("div", { className: "ods-auth-tabs__list", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ jsxs3(
-      "button",
+    /* @__PURE__ */ jsx3("div", { className: "ods-auth-tabs__list", role: "tablist", children: tabs.map((t) => {
+      const isActive2 = t.id === active;
+      return /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[t.id] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${scopeId}-tab-${t.id}`,
+          "aria-selected": isActive2,
+          "aria-controls": `${scopeId}-panel-${t.id}`,
+          tabIndex: isActive2 ? 0 : -1,
+          className: cn("ods-auth-tabs__tab", isActive2 && "ods-auth-tabs__tab--active"),
+          onClick: () => select(t.id),
+          onKeyDown: handleKeyDown,
+          children: [
+            t.icon && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__icon", children: t.icon }),
+            /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__label", children: t.label }),
+            t.description && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__desc", children: t.description })
+          ]
+        },
+        t.id
+      );
+    }) }),
+    activeTab && /* @__PURE__ */ jsx3(
+      "div",
       {
-        type: "button",
-        role: "tab",
-        "aria-selected": t.id === active,
-        className: cn("ods-auth-tabs__tab", t.id === active && "ods-auth-tabs__tab--active"),
-        onClick: () => select(t.id),
-        children: [
-          t.icon && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__icon", children: t.icon }),
-          /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__label", children: t.label }),
-          t.description && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__desc", children: t.description })
-        ]
-      },
-      t.id
-    )) }),
-    activeTab && /* @__PURE__ */ jsx3("div", { className: "ods-auth-tabs__panel", children: activeTab.content })
+        role: "tabpanel",
+        id: `${scopeId}-panel-${activeTab.id}`,
+        "aria-labelledby": `${scopeId}-tab-${activeTab.id}`,
+        tabIndex: 0,
+        className: "ods-auth-tabs__panel",
+        children: activeTab.content
+      }
+    )
   ] });
 }
 function AuthBadge({ tone = "neutral", children, className }) {
@@ -546,11 +583,11 @@ function BlogCard({
 }
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import { useBreadcrumbItem, useBreadcrumbs } from "react-aria";
 import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function BreadcrumbItem({ item, isCurrent }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const { itemProps } = useBreadcrumbItem(
     { children: item.label, isCurrent, elementType: item.href ? "a" : "span" },
     ref
@@ -605,7 +642,7 @@ function Breadcrumb({
 
 // src/components/Button/Button.tsx
 import { motion as motion2 } from "framer-motion";
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 import { useButton } from "react-aria";
 
 // src/utils/a11y.ts
@@ -649,7 +686,7 @@ function Button({
   style,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const isDisabled = disabled || loading;
   const hasAction = Boolean(props.onClick) || type === "submit" || type === "reset" || Boolean(props.href);
   const resolvedCursor = cursor ?? (disabled ? "not-allowed" : loading ? "progress" : hasAction ? "pointer" : "default");
@@ -962,7 +999,7 @@ function ChatBubble({
 }
 
 // src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { useCheckbox } from "react-aria";
 
 // ../../node_modules/react-stately/dist/private/utils/useControlledState.mjs
@@ -2492,7 +2529,7 @@ function Checkbox({
   className,
   ...props
 }) {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const state = $fd3c5e01e837dc20$export$8042c6c013fd5226({
     isSelected: checked,
     defaultSelected: defaultChecked,
@@ -2711,7 +2748,7 @@ function ChoiceCard({
 }
 
 // src/components/CodeEditor/CodeEditor.tsx
-import { useEffect, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
+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";
 var COMMENT_PREFIX = {
   sql: "-- ",
@@ -2763,8 +2800,8 @@ function CodeEditor({
   showCounter = true,
   searchable = true
 }) {
-  const taRef = useRef5(null);
-  const gutterRef = useRef5(null);
+  const taRef = useRef6(null);
+  const gutterRef = useRef6(null);
   const [activeLine, setActiveLine] = useState3(1);
   const [copied, setCopied] = useState3(false);
   const [internalWrap, setInternalWrap] = useState3(wordWrapProp ?? false);
@@ -2774,7 +2811,7 @@ function CodeEditor({
   const [findOpen, setFindOpen] = useState3(false);
   const [findQuery, setFindQuery] = useState3("");
   const [findIndex, setFindIndex] = useState3(0);
-  const findInputRef = useRef5(null);
+  const findInputRef = useRef6(null);
   const lines = value.split("\n");
   const lineCount = lines.length;
   const matches = useMemo3(() => {
@@ -3370,9 +3407,9 @@ function ColorPicker({
 import {
   useCallback,
   useEffect as useEffect2,
-  useId,
+  useId as useId2,
   useMemo as useMemo4,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState5
 } from "react";
 import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -3388,10 +3425,10 @@ function OptionDropdown({
   const [open, setOpen] = useState5(false);
   const [query, setQuery] = useState5("");
   const [activeIdx, setActiveIdx] = useState5(0);
-  const triggerRef = useRef6(null);
-  const panelRef = useRef6(null);
-  const inputRef = useRef6(null);
-  const listboxId = useId();
+  const triggerRef = useRef7(null);
+  const panelRef = useRef7(null);
+  const inputRef = useRef7(null);
+  const listboxId = useId2();
   const showSearch = searchable === true || searchable === "auto" && options.length > 8;
   const selected = options.find((o) => o.value === value);
   const filtered = useMemo4(() => {
@@ -3696,7 +3733,7 @@ function ConditionBuilder({
 
 // src/components/ConfigPanel/ConfigPanel.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion4 } from "framer-motion";
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { useButton as useButton2 } from "react-aria";
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function ConfigPanel({
@@ -3709,9 +3746,9 @@ function ConfigPanel({
   onCancel,
   className
 }) {
-  const closeRef = useRef7(null);
-  const saveRef = useRef7(null);
-  const cancelRef = useRef7(null);
+  const closeRef = useRef8(null);
+  const saveRef = useRef8(null);
+  const cancelRef = useRef8(null);
   const { buttonProps: closeProps } = useButton2(
     { onPress: onClose, "aria-label": "Close panel" },
     closeRef
@@ -3786,7 +3823,7 @@ import {
   useCallback as useCallback2,
   useEffect as useEffect3,
   useMemo as useMemo5,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState6
 } from "react";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -4139,8 +4176,8 @@ function DataMapper({
   const [display, setDisplay] = useState6(defaultDisplay);
   const [sidebarOpen, setSidebarOpen] = useState6(defaultSidebarOpen);
   const [sidebarTab, setSidebarTab] = useState6("schema");
-  const editorRef = useRef8(null);
-  const rootRef = useRef8(null);
+  const editorRef = useRef9(null);
+  const rootRef = useRef9(null);
   useEffect3(() => {
     if (!selectedTarget) return;
     const handler = (e) => {
@@ -4864,8 +4901,8 @@ function ExpressionEditor({
   readDragSnippet,
   editorRef
 }) {
-  const lastEmittedRef = useRef8(value);
-  const isMountedRef = useRef8(false);
+  const lastEmittedRef = useRef9(value);
+  const isMountedRef = useRef9(false);
   useEffect3(() => {
     const el = editorRef.current;
     if (!el || isMountedRef.current) return;
@@ -5108,7 +5145,7 @@ import {
   useCallback as useCallback3,
   useEffect as useEffect4,
   useMemo as useMemo6,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState7
 } from "react";
 import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -5760,7 +5797,7 @@ function Row({
   clickable
 }) {
   const [menuOpen, setMenuOpen] = useState7(false);
-  const menuRef = useRef9(null);
+  const menuRef = useRef10(null);
   useEffect4(() => {
     if (!menuOpen) return;
     const close = (e) => {
@@ -5899,7 +5936,7 @@ function ChevronRightSmall() {
 }
 
 // src/components/DatePicker/DatePicker.tsx
-import { useEffect as useEffect5, useRef as useRef10, useState as useState8 } from "react";
+import { useEffect as useEffect5, useRef as useRef11, useState as useState8 } from "react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultFormat = (d) => d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
 function DatePicker({
@@ -5917,7 +5954,7 @@ function DatePicker({
   className
 }) {
   const [open, setOpen] = useState8(false);
-  const wrapRef = useRef10(null);
+  const wrapRef = useRef11(null);
   useEffect5(() => {
     if (!open) return;
     const onDoc = (e) => {
@@ -6059,7 +6096,7 @@ function DescriptionList({
 
 // src/components/Dialog/Dialog.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion5 } from "framer-motion";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { FocusScope, OverlayProvider, useDialog, useModal, useOverlay } from "react-aria";
 import { createPortal } from "react-dom";
 
@@ -6113,8 +6150,8 @@ function DialogContent({
   footer,
   className
 }) {
-  const overlayRef = useRef11(null);
-  const dialogRef = useRef11(null);
+  const overlayRef = useRef12(null);
+  const dialogRef = useRef12(null);
   const { overlayProps, underlayProps } = useOverlay(
     {
       isOpen: open,
@@ -6306,12 +6343,12 @@ function Drawer({
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion6 } from "framer-motion";
-import { useRef as useRef12 } from "react";
+import { 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";
 function MenuItemComponent({ item, state, onAction }) {
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const { menuItemProps } = useMenuItem({ key: item.key, onAction }, state, ref);
   const menuItem = item.value;
   const isDisabled = state.disabledKeys.has(item.key);
@@ -6339,7 +6376,7 @@ function MenuPopup({
   align,
   className
 }) {
-  const menuRef = useRef12(null);
+  const menuRef = useRef13(null);
   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({
@@ -6418,10 +6455,11 @@ function DropdownMenu({
   items,
   align = "start",
   className,
+  triggerClassName,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
-  const triggerRef = useRef12(null);
+  const triggerRef = useRef13(null);
   const state = $e3403870bfb691da$export$79fefeb1c2091ac3({});
   const { menuTriggerProps } = useMenuTrigger({}, state, triggerRef);
   const ariaNameProps = resolveAccessibleName({
@@ -6436,7 +6474,15 @@ function DropdownMenu({
   );
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeTriggerProps } = buttonProps;
   return /* @__PURE__ */ jsxs28(Fragment6, { children: [
-    /* @__PURE__ */ jsx29("button", { ...safeTriggerProps, ref: triggerRef, className: "ods-dropdown__trigger", children: trigger }),
+    /* @__PURE__ */ jsx29(
+      "button",
+      {
+        ...safeTriggerProps,
+        ref: triggerRef,
+        className: triggerClassName ?? "ods-dropdown__trigger",
+        children: trigger
+      }
+    ),
     /* @__PURE__ */ jsx29(
       MenuPopup,
       {
@@ -6463,7 +6509,7 @@ function EmptyState({ icon, title, description, action, className }) {
 
 // src/components/ExecutionConsole/ExecutionConsole.tsx
 import { motion as motion7 } from "framer-motion";
-import { useEffect as useEffect6, useRef as useRef13 } from "react";
+import { useEffect as useEffect6, useRef as useRef14 } from "react";
 import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 var iconProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -6499,7 +6545,7 @@ function ExecutionConsole({
   toolbar,
   className
 }) {
-  const logEndRef = useRef13(null);
+  const logEndRef = useRef14(null);
   const handleCopy = () => {
     if (onCopy) {
       onCopy();
@@ -6677,8 +6723,8 @@ function FeatureCard({
 import {
   useCallback as useCallback4,
   useEffect as useEffect7,
-  useId as useId2,
-  useRef as useRef14,
+  useId as useId3,
+  useRef as useRef15,
   useState as useState9
 } from "react";
 
@@ -6818,9 +6864,9 @@ function FileDropzone({
   compact = false,
   className
 }) {
-  const inputRef = useRef14(null);
-  const dropzoneRef = useRef14(null);
-  const inputId = useId2();
+  const inputRef = useRef15(null);
+  const dropzoneRef = useRef15(null);
+  const inputId = useId3();
   const [isOver, setOver] = useState9(false);
   const [error, setError] = useState9(null);
   const [autoPreviews, setAutoPreviews] = useState9({});
@@ -7120,7 +7166,7 @@ function FileDropzone({
 
 // src/components/FlowCanvas/FlowCanvas.tsx
 import { AnimatePresence as AnimatePresence5 } from "framer-motion";
-import { useCallback as useCallback6, useRef as useRef16 } from "react";
+import { useCallback as useCallback6, useRef as useRef17 } from "react";
 
 // src/components/FlowEdge/FlowEdge.tsx
 import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -7165,7 +7211,7 @@ import {
   forwardRef,
   useCallback as useCallback5,
   useEffect as useEffect8,
-  useRef as useRef15,
+  useRef as useRef16,
   useState as useState10
 } from "react";
 import { jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -7229,7 +7275,7 @@ var FlowNode = forwardRef(function FlowNode2({
 }, ref) {
   const [isDragging, setIsDragging] = useState10(false);
   const [wasDragged, setWasDragged] = useState10(false);
-  const dragStartRef = useRef15(null);
+  const dragStartRef = useRef16(null);
   const zoom = viewport?.zoom ?? 1;
   const handleClick = useCallback5(
     (e) => {
@@ -7577,7 +7623,7 @@ function FlowCanvas({
   className,
   ...props
 }) {
-  const canvasRef = useRef16(null);
+  const canvasRef = useRef17(null);
   const isEmpty = nodes.length === 0 && edges.length === 0;
   const handleCanvasClick = useCallback6(
     (e) => {
@@ -8021,7 +8067,7 @@ function FormSection({
 }
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect, useRef as useRef17, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect, useRef as useRef18, useState as useState11 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs39 } from "react/jsx-runtime";
 function computePosition(rect, panelRect, placement, offset) {
@@ -8048,10 +8094,10 @@ function HoverCard({
   className
 }) {
   const [open, setOpen] = useState11(false);
-  const triggerRef = useRef17(null);
-  const panelRef = useRef17(null);
-  const openTimer = useRef17(null);
-  const closeTimer = useRef17(null);
+  const triggerRef = useRef18(null);
+  const panelRef = useRef18(null);
+  const openTimer = useRef18(null);
+  const closeTimer = useRef18(null);
   const [coords, setCoords] = useState11(null);
   const clearTimers = () => {
     if (openTimer.current) {
@@ -8173,9 +8219,9 @@ function IconCard({
 // src/components/Input/Input.tsx
 import {
   forwardRef as forwardRef2,
-  useId as useId3,
+  useId as useId4,
   useImperativeHandle,
-  useRef as useRef18
+  useRef as useRef19
 } from "react";
 import { jsx as jsx42, jsxs as jsxs41 } from "react/jsx-runtime";
 var CLEAR_GLYPH = /* @__PURE__ */ jsx42("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx42("path", { d: "m3 3 6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) });
@@ -8200,9 +8246,9 @@ var Input = forwardRef2(
     onChange,
     ...props
   }, forwardedRef) => {
-    const innerRef = useRef18(null);
+    const innerRef = useRef19(null);
     useImperativeHandle(forwardedRef, () => innerRef.current);
-    const reactId = useId3();
+    const reactId = useId4();
     const inputId = id ?? `${reactId}-input`;
     const errorId = `${reactId}-err`;
     const helperId = `${reactId}-help`;
@@ -8698,7 +8744,7 @@ import {
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo9,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState13
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
@@ -8728,11 +8774,11 @@ function MultiSelect({
   const [query, setQuery] = useState13("");
   const [activeIdx, setActiveIdx] = useState13(0);
   const [dropdownPos, setDropdownPos] = useState13({ top: 0, left: 0, width: 0 });
-  const wrapRef = useRef19(null);
-  const tagsRowRef = useRef19(null);
-  const searchRef = useRef19(null);
-  const dropdownRef = useRef19(null);
-  const chipRefs = useRef19([]);
+  const wrapRef = useRef20(null);
+  const tagsRowRef = useRef20(null);
+  const searchRef = useRef20(null);
+  const dropdownRef = useRef20(null);
+  const chipRefs = useRef20([]);
   const commit = useCallback9(
     (next) => {
       if (controlledValue === void 0) setInternalValue(next);
@@ -9165,7 +9211,7 @@ function NumberInput({
 // src/components/OTPInput/OTPInput.tsx
 import {
   useCallback as useCallback11,
-  useRef as useRef20
+  useRef as useRef21
 } from "react";
 import { jsx as jsx50, jsxs as jsxs49 } from "react/jsx-runtime";
 function OTPInput({
@@ -9181,7 +9227,7 @@ function OTPInput({
   autoFocus = false,
   className
 }) {
-  const refs = useRef20([]);
+  const refs = useRef21([]);
   const pattern = type === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
   const setCharAt = useCallback11(
     (idx, ch) => {
@@ -9496,7 +9542,7 @@ function PhoneInput({
 }
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback12, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef21, useState as useState16 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState16 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs53 } from "react/jsx-runtime";
 function computePosition2(rect, popRect, placement, offset) {
@@ -9536,8 +9582,8 @@ function Popover({
     },
     [openProp, onOpenChange]
   );
-  const triggerRef = useRef21(null);
-  const popRef = useRef21(null);
+  const triggerRef = useRef22(null);
+  const popRef = useRef22(null);
   const [coords, setCoords] = useState16(null);
   const reposition = useCallback12(() => {
     if (!triggerRef.current || !popRef.current) return;
@@ -9774,7 +9820,7 @@ function ProgressRing({
 import {
   useCallback as useCallback13,
   useEffect as useEffect12,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState17
 } from "react";
 import { jsx as jsx58, jsxs as jsxs57 } from "react/jsx-runtime";
@@ -9827,7 +9873,7 @@ function PromptInput({
   className,
   ariaLabel = "Prompt"
 }) {
-  const taRef = useRef22(null);
+  const taRef = useRef23(null);
   const [internal, setInternal] = useState17(defaultValue);
   const v = value ?? internal;
   const isControlled = value !== void 0;
@@ -10169,11 +10215,11 @@ function Quote({
 }
 
 // src/components/Radio/Radio.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import { useRadio } from "react-aria";
 
 // src/components/Radio/RadioGroup.tsx
-import { createContext, useContext, useRef as useRef23 } from "react";
+import { createContext, useContext, useRef as useRef24 } from "react";
 import { useRadioGroup } from "react-aria";
 import { jsx as jsx60, jsxs as jsxs59 } from "react/jsx-runtime";
 var RadioGroupContext = createContext(null);
@@ -10214,7 +10260,7 @@ function RadioGroup({
     "aria-describedby": ariaDescribedBy
   };
   const state = $384704861d32dbed$export$bca9d026f8e704eb(ariaProps);
-  const ref = useRef23(null);
+  const ref = useRef24(null);
   const { radioGroupProps, labelProps } = useRadioGroup(ariaProps, state);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -10246,7 +10292,7 @@ function Radio({
   ...props
 }) {
   const state = useRadioGroupContext();
-  const ref = useRef24(null);
+  const ref = useRef25(null);
   const ariaNameProps = resolveAccessibleName({
     label,
     ariaLabel: props["aria-label"],
@@ -10506,7 +10552,7 @@ function Rating({
 import {
   useCallback as useCallback14,
   useEffect as useEffect13,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx64, jsxs as jsxs63 } from "react/jsx-runtime";
@@ -10523,7 +10569,7 @@ function Resizable({
   className,
   ariaLabel = "Resize panels"
 }) {
-  const wrapRef = useRef25(null);
+  const wrapRef = useRef26(null);
   const [internalSplit, setInternalSplit] = useState19(() => {
     if (typeof window === "undefined" || !storageKey) return null;
     const stored = window.localStorage.getItem(storageKey);
@@ -10533,7 +10579,7 @@ function Resizable({
     }
     return null;
   });
-  const draggingRef = useRef25(false);
+  const draggingRef = useRef26(false);
   const [isDragging, setDragging] = useState19(false);
   const computeFromDefault = useCallback14(() => {
     const el = wrapRef.current;
@@ -10677,9 +10723,9 @@ function ResizablePanel({
 }) {
   const [internal, setInternal] = useState19(sizeProp ?? defaultSize);
   const size = sizeProp ?? internal;
-  const draggingRef = useRef25(false);
+  const draggingRef = useRef26(false);
   const [isDragging, setDragging] = useState19(false);
-  const startRef = useRef25({ x: 0, size });
+  const startRef = useRef26({ x: 0, size });
   const onMouseDown = (e) => {
     e.preventDefault();
     draggingRef.current = true;
@@ -10749,18 +10795,18 @@ 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 useRef26, useState as useState20 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect14, 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";
 function ListBox(props) {
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { listBoxRef = ref, state } = props;
   const { listBoxProps } = useListBox(props, state, listBoxRef);
   return /* @__PURE__ */ jsx66("ul", { ...listBoxProps, ref: listBoxRef, className: "ods-select__options", children: [...state.collection].map((item) => /* @__PURE__ */ jsx66(Option, { item, state }, item.key)) });
 }
 function Option({ item, state }) {
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { optionProps, isSelected, isFocused, isDisabled } = useOption(
     { key: item.key },
     state,
@@ -10844,9 +10890,9 @@ function Select({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy
 }) {
-  const triggerRef = useRef26(null);
-  const listBoxRef = useRef26(null);
-  const searchRef = useRef26(null);
+  const triggerRef = useRef27(null);
+  const listBoxRef = useRef27(null);
+  const searchRef = useRef27(null);
   const [searchQuery, setSearchQuery] = useState20("");
   const [dropdownPos, setDropdownPos] = useState20({ top: 0, left: 0, width: 0 });
   const filteredOptions = useMemo10(() => {
@@ -11117,7 +11163,7 @@ function Sheet({
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef27, useState as useState21 } from "react";
+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";
 function Sidebar({
   variant = "expanded",
@@ -11139,15 +11185,17 @@ function Sidebar({
   className
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
-  const [internalPinned, setInternalPinned] = useState21(() => {
-    if (typeof window === "undefined") return defaultPinned;
+  const [internalPinned, setInternalPinned] = useState21(defaultPinned);
+  useEffect16(() => {
+    if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
-      if (stored !== null) return stored === "true";
+      if (stored !== null && stored !== String(internalPinned)) {
+        setInternalPinned(stored === "true");
+      }
     } catch {
     }
-    return defaultPinned;
-  });
+  }, []);
   const pinned = pinnedProp ?? internalPinned;
   const setPinned = useCallback16(
     (p) => {
@@ -11161,8 +11209,8 @@ function Sidebar({
     [pinnedProp, pinStorageKey, onPinnedChange]
   );
   const [hoverOpen, setHoverOpen] = useState21(false);
-  const openTimer = useRef27(null);
-  const closeTimer = useRef27(null);
+  const openTimer = useRef28(null);
+  const closeTimer = useRef28(null);
   const clearTimers = () => {
     if (openTimer.current) {
       clearTimeout(openTimer.current);
@@ -11185,6 +11233,17 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
+  useEffect16(() => {
+    if (!overlayOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        clearTimers();
+        setHoverOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [overlayOpen]);
   return /* @__PURE__ */ jsxs68(
     "nav",
     {
@@ -11290,17 +11349,34 @@ function RailLayout({
       },
       item.id
     )) }),
-    user && /* @__PURE__ */ jsx69(
-      "button",
+    user && /* @__PURE__ */ jsx69(SidebarUserRail, { user })
+  ] });
+}
+function SidebarUserRail({ user }) {
+  const labelText = typeof user.name === "string" ? user.name : "User";
+  const avatar = user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") });
+  if (user.menu && user.menu.length > 0) {
+    return /* @__PURE__ */ jsx69(
+      DropdownMenu,
       {
-        type: "button",
-        className: "ods-sidebar__user-rail",
-        onClick: user.onClick,
-        "aria-label": typeof user.name === "string" ? user.name : "User",
-        children: user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") })
+        trigger: avatar,
+        items: user.menu,
+        align: "end",
+        "aria-label": labelText,
+        triggerClassName: "ods-sidebar__user-rail"
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsx69(
+    "button",
+    {
+      type: "button",
+      className: "ods-sidebar__user-rail",
+      onClick: user.onClick,
+      "aria-label": labelText,
+      children: avatar
+    }
+  );
 }
 function RailItem({
   item,
@@ -11308,7 +11384,7 @@ function RailItem({
   suppressTooltip
 }) {
   const [tipOpen, setTipOpen] = useState21(false);
-  const timerRef = useRef27(null);
+  const timerRef = useRef28(null);
   const clear = () => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
@@ -11419,18 +11495,7 @@ function ExpandedLayout({
     ] }, section.id ?? sIdx)) }),
     (footerItems || user) && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__footer", children: [
       footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__footer-list", children: footerItems.map((item) => /* @__PURE__ */ jsx69(ExpandedItem, { item, level: 0 }, item.id)) }),
-      user && /* @__PURE__ */ jsxs68("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, 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 }),
-          user.email && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-email", children: user.email })
-        ] }),
-        /* @__PURE__ */ jsxs68("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
-          /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
-          /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
-        ] })
-      ] })
+      user && /* @__PURE__ */ jsx69(SidebarUserCard, { user })
     ] })
   ] });
 }
@@ -11520,6 +11585,34 @@ function ExpandedItem({ item, level }) {
     }
   );
 }
+function SidebarUserCard({ user }) {
+  const labelText = typeof user.name === "string" ? user.name : "User";
+  const body = /* @__PURE__ */ jsxs68(Fragment15, { 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 }),
+      user.email && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-email", children: user.email })
+    ] }),
+    /* @__PURE__ */ jsxs68("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
+    ] })
+  ] });
+  if (user.menu && user.menu.length > 0) {
+    return /* @__PURE__ */ jsx69(
+      DropdownMenu,
+      {
+        trigger: body,
+        items: user.menu,
+        align: "end",
+        "aria-label": labelText,
+        triggerClassName: "ods-sidebar__user-card"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx69("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, children: body });
+}
 function hasActiveDescendant(item) {
   if (!item.children) return false;
   for (const c of item.children) {
@@ -11563,7 +11656,7 @@ function Skeleton({ variant = "text", width, height, lines = 1, className }) {
 
 // src/components/SlideoutPanel/SlideoutPanel.tsx
 import { AnimatePresence as AnimatePresence9, motion as motion12 } from "framer-motion";
-import { useRef as useRef28 } from "react";
+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";
@@ -11589,8 +11682,8 @@ function SlideoutContent({
   footer,
   className
 }) {
-  const overlayRef = useRef28(null);
-  const panelRef = useRef28(null);
+  const overlayRef = useRef29(null);
+  const panelRef = useRef29(null);
   const { overlayProps } = useOverlay2(
     {
       isOpen: open,
@@ -11821,7 +11914,7 @@ function SocialButton({
 import {
   useCallback as useCallback17,
   useEffect as useEffect17,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState22
 } from "react";
 import { jsx as jsx74, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -11836,10 +11929,10 @@ function Sortable({
   autoScrollEdge = 48,
   className
 }) {
-  const containerRef = useRef29(null);
-  const itemRefs = useRef29(/* @__PURE__ */ new Map());
-  const originalOrderRef = useRef29(null);
-  const scrollTimerRef = useRef29(null);
+  const containerRef = useRef30(null);
+  const itemRefs = useRef30(/* @__PURE__ */ new Map());
+  const originalOrderRef = useRef30(null);
+  const scrollTimerRef = useRef30(null);
   const [draggingId, setDraggingId] = useState22(null);
   const [dropPos, setDropPos] = useState22(null);
   const [kbActiveId, setKbActiveId] = useState22(null);
@@ -12232,7 +12325,7 @@ function Stat({
 }
 
 // src/components/Switch/Switch.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import { useSwitch } from "react-aria";
 import { jsx as jsx78, jsxs as jsxs75 } from "react/jsx-runtime";
 function Switch({
@@ -12245,7 +12338,7 @@ function Switch({
   className,
   ...props
 }) {
-  const ref = useRef30(null);
+  const ref = useRef31(null);
   const state = $fd3c5e01e837dc20$export$8042c6c013fd5226({
     isSelected: checked,
     defaultSelected: defaultChecked,
@@ -12463,11 +12556,11 @@ function TableRow({
 
 // src/components/Tabs/Tabs.tsx
 import { motion as motion13 } from "framer-motion";
-import { useMemo as useMemo11, useRef as useRef31, useState as useState24 } from "react";
+import { useMemo as useMemo11, useRef as useRef32, useState as useState24 } from "react";
 import { useTab, useTabList, useTabPanel } from "react-aria";
 import { jsx as jsx80, jsxs as jsxs77 } from "react/jsx-runtime";
 function TabButton({ item, state }) {
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabProps } = useTab({ key: item.key }, state, ref);
   const isSelected = state.selectedKey === item.key;
   const isDisabled = state.disabledKeys.has(item.key);
@@ -12497,7 +12590,7 @@ function TabButton({ item, state }) {
   );
 }
 function TabPanelContent({ state, panelContent, ...props }) {
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   return /* @__PURE__ */ jsx80("div", { ...tabPanelProps, ref, className: "ods-tabs__panel", children: panelContent });
 }
@@ -12533,7 +12626,7 @@ function Tabs({
     disabledKeys: items.filter((i) => i.disabled).map((i) => i.value)
   };
   const state = $caeb030f09a278a1$export$4ba071daf4e486(stateProps);
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabListProps } = useTabList({ ...stateProps, orientation }, state, ref);
   const currentPanelContent = panelContentMap.get(String(selectedKey));
   return /* @__PURE__ */ jsxs77("div", { className: cn("ods-tabs", `ods-tabs--${orientation}`, className), children: [
@@ -12687,7 +12780,7 @@ function TestimonialCard({
 }
 
 // src/components/Textarea/Textarea.tsx
-import { useId as useId4, useRef as useRef32, useState as useState26 } from "react";
+import { useId as useId5, useRef as useRef33, useState as useState26 } from "react";
 import { useTextField as useTextField2 } from "react-aria";
 import { jsx as jsx83, jsxs as jsxs80 } from "react/jsx-runtime";
 function Textarea({
@@ -12705,8 +12798,8 @@ function Textarea({
   onChange,
   ...props
 }) {
-  const ref = useRef32(null);
-  const errorId = useId4();
+  const ref = useRef33(null);
+  const errorId = useId5();
   const [charCount, setCharCount] = useState26(() => String(value ?? defaultValue ?? "").length);
   const ariaNameProps = resolveAccessibleName({
     label,
@@ -12807,7 +12900,7 @@ import {
   Fragment as Fragment18,
   useCallback as useCallback19,
   useEffect as useEffect18,
-  useRef as useRef33,
+  useRef as useRef34,
   useState as useState27
 } from "react";
 import { Fragment as Fragment19, jsx as jsx85, jsxs as jsxs82 } from "react/jsx-runtime";
@@ -12839,11 +12932,11 @@ function TimePicker({
 }) {
   const [open, setOpen] = useState27(false);
   const [activeSeg, setActiveSeg] = useState27(null);
-  const draftRef = useRef33("");
-  const wrapRef = useRef33(null);
-  const hoursRef = useRef33(null);
-  const minutesRef = useRef33(null);
-  const secondsRef = useRef33(null);
+  const draftRef = useRef34("");
+  const wrapRef = useRef34(null);
+  const hoursRef = useRef34(null);
+  const minutesRef = useRef34(null);
+  const secondsRef = useRef34(null);
   const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
   useEffect18(() => {
     if (!open) return;
@@ -13106,7 +13199,7 @@ function TimePicker({
 }
 
 // src/components/TimezonePicker/TimezonePicker.tsx
-import { useEffect as useEffect19, useMemo as useMemo12, useRef as useRef34, useState as useState28 } from "react";
+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";
 var DEFAULT_TZS = [
   { iana: "America/Los_Angeles", label: "Pacific Time", offset: "UTC\u22128" },
@@ -13136,8 +13229,8 @@ function TimezonePicker({
 }) {
   const [open, setOpen] = useState28(false);
   const [query, setQuery] = useState28("");
-  const wrapRef = useRef34(null);
-  const inputRef = useRef34(null);
+  const wrapRef = useRef35(null);
+  const inputRef = useRef35(null);
   const selected = options.find((o) => o.iana === value);
   const filtered = useMemo12(() => {
     if (!query.trim()) return options;
@@ -13315,7 +13408,7 @@ import {
   useCallback as useCallback20,
   useContext as useContext2,
   useMemo as useMemo13,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState29
 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
@@ -13509,8 +13602,8 @@ function ToastProvider({
   maxStack = 3
 }) {
   const [toasts, setToasts] = useState29([]);
-  const timers = useRef35(/* @__PURE__ */ new Map());
-  const idCounter2 = useRef35(0);
+  const timers = useRef36(/* @__PURE__ */ new Map());
+  const idCounter2 = useRef36(0);
   const dismiss = useCallback20((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timers.current.get(id);
@@ -13780,7 +13873,7 @@ import {
   useCallback as useCallback21,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef36,
+  useRef as useRef37,
   useState as useState30
 } from "react";
 import { useTooltip, useTooltipTrigger } from "react-aria";
@@ -13815,7 +13908,7 @@ function TooltipContent({
   offset
 }) {
   const { tooltipProps } = useTooltip({ isOpen: state.isOpen }, state);
-  const tipRef = useRef36(null);
+  const tipRef = useRef37(null);
   const [coords, setCoords] = useState30(null);
   const reposition = useCallback21(() => {
     if (!triggerRef.current || !tipRef.current) return;
@@ -13885,7 +13978,7 @@ function Tooltip({
   children,
   className
 }) {
-  const triggerRef = useRef36(null);
+  const triggerRef = useRef37(null);
   const state = $3834487504f4fc00$export$4d40659c25ecb50b({ delay });
   const { triggerProps } = useTooltipTrigger({ delay }, state, triggerRef);
   return /* @__PURE__ */ jsxs88(Fragment22, { children: [