@octaviaflow/core 3.0.17-beta.0 → 3.0.18-beta.0

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   applyEdgeChanges,
   applyNodeChanges,
   buildEdgePath
-} from "./chunk-LSDAQCUJ.js";
+} from "./chunk-2RD5OERK.js";
 import {
   __export,
   cn
@@ -182,6 +182,7 @@ function ActionsDrawer({
                       "aria-controls": `${uid}-group-${group.id}`,
                       children: [
                         /* @__PURE__ */ jsx(ChevronIcon, { open: !isCollapsed }),
+                        group.icon && /* @__PURE__ */ jsx("span", { className: "ods-actions-drawer__group-icon", "aria-hidden": "true", children: group.icon }),
                         /* @__PURE__ */ jsx("span", { className: "ods-actions-drawer__group-label", children: group.label }),
                         /* @__PURE__ */ jsx("span", { className: "ods-actions-drawer__group-count", children: group.items.length })
                       ]
@@ -4068,13 +4069,15 @@ function ConditionBuilder({
 import { AnimatePresence, motion as motion3 } from "framer-motion";
 import { useRef as useRef8 } from "react";
 import { useButton as useButton2 } from "react-aria";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function ConfigPanel({
   open = false,
   onClose,
   title = "Configure",
   icon,
   children,
+  customRender,
+  customFooter,
   onSave,
   onCancel,
   className
@@ -4091,6 +4094,7 @@ function ConfigPanel({
   const safeCloseProps = stripMotionConflicts(closeProps);
   const safeSaveProps = stripMotionConflicts(saveProps);
   const safeCancelProps = stripMotionConflicts(cancelProps);
+  const bodyContent = customRender ?? children;
   return /* @__PURE__ */ jsx21(AnimatePresence, { children: open && /* @__PURE__ */ jsxs20(
     motion3.div,
     {
@@ -4119,8 +4123,8 @@ function ConfigPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx21("div", { className: "ods-config-panel__body", "data-testid": "config-panel-body", children }),
-        /* @__PURE__ */ jsxs20("div", { className: "ods-config-panel__footer", children: [
+        /* @__PURE__ */ jsx21("div", { className: "ods-config-panel__body", "data-testid": "config-panel-body", children: bodyContent }),
+        /* @__PURE__ */ jsx21("div", { className: "ods-config-panel__footer", children: customFooter ?? /* @__PURE__ */ jsxs20(Fragment5, { children: [
           /* @__PURE__ */ jsx21(
             "button",
             {
@@ -4141,7 +4145,7 @@ function ConfigPanel({
               children: "Save"
             }
           )
-        ] })
+        ] }) })
       ]
     }
   ) });
@@ -4153,7 +4157,7 @@ function stripMotionConflicts(props) {
 
 // src/components/DataMapper/DataMapper.tsx
 import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef9, useState as useState7 } from "react";
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var TYPE_CLASSES = {
   string: "string",
   integer: "integer",
@@ -4693,7 +4697,7 @@ function DataMapper({
                   " mapped"
                 ] })
               ] }),
-              requiredUnmapped > 0 && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+              requiredUnmapped > 0 && /* @__PURE__ */ jsxs21(Fragment6, { 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 }),
@@ -5459,7 +5463,7 @@ import { AnimatePresence as AnimatePresence2, motion as motion4 } from "framer-m
 import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef10, useState as useState8 } from "react";
 import { HiddenSelect, useButton as useButton3, useListBox, useOption, useSelect } from "react-aria";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function ListBox(props) {
   const ref = useRef10(null);
   const { listBoxRef = ref, state, showCheckmark } = props;
@@ -5681,7 +5685,7 @@ function Select({
             "aria-required": required || void 0,
             className: cn("ods-select__trigger", state.isOpen && "ods-select__trigger--open"),
             children: [
-              /* @__PURE__ */ jsx23("span", { className: "ods-select__value", children: selectedOption ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
+              /* @__PURE__ */ jsx23("span", { className: "ods-select__value", children: selectedOption ? /* @__PURE__ */ jsxs22(Fragment7, { children: [
                 selectedOption.icon && /* @__PURE__ */ jsx23("span", { className: "ods-select__value-icon", children: selectedOption.icon }),
                 selectedOption.label
               ] }) : /* @__PURE__ */ jsx23("span", { className: "ods-select__placeholder", children: placeholder }) }),
@@ -5750,7 +5754,7 @@ function Select({
 }
 
 // src/components/DataTable/DataTable.tsx
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function readValue(row, col) {
   if (typeof col.accessor === "function") return col.accessor(row);
   const k = col.accessor ?? col.key;
@@ -6219,7 +6223,7 @@ function DataTable(props) {
   const showBulkBar = selectable && selectedCount > 0;
   const wrapperClass = cn("ods-datatable", `ods-datatable--${density}`, className);
   return /* @__PURE__ */ jsxs23("div", { className: wrapperClass, role: "region", "aria-label": "Data table", children: [
-    /* @__PURE__ */ jsx24("div", { className: "ods-datatable__toolbar", children: showBulkBar ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    /* @__PURE__ */ jsx24("div", { className: "ods-datatable__toolbar", children: showBulkBar ? /* @__PURE__ */ jsxs23(Fragment8, { children: [
       /* @__PURE__ */ jsxs23("div", { className: "ods-datatable__bulk-summary", children: [
         /* @__PURE__ */ jsx24("span", { className: "ods-datatable__bulk-count", children: selectedCount }),
         /* @__PURE__ */ jsx24("span", { children: "selected" }),
@@ -6253,7 +6257,7 @@ function DataTable(props) {
         },
         i
       )) })
-    ] }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    ] }) : /* @__PURE__ */ jsxs23(Fragment8, { children: [
       /* @__PURE__ */ jsxs23("div", { className: "ods-datatable__title-block", children: [
         title && /* @__PURE__ */ jsxs23("h2", { className: "ods-datatable__title", children: [
           title,
@@ -6523,7 +6527,7 @@ function Row({
 }) {
   const [menuOpen, setMenuOpen] = useState9(false);
   const triggerRef = useRef11(null);
-  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
     /* @__PURE__ */ jsxs23(
       "tr",
       {
@@ -6951,7 +6955,7 @@ function Dialog(props) {
 }
 
 // src/components/DonutChart/DonutChart.tsx
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
 function DonutChart({
   data,
   size = 160,
@@ -7002,7 +7006,7 @@ function DonutChart({
           i
         )) })
       ] }),
-      /* @__PURE__ */ jsx28("div", { className: "ods-donut__center", children: centerLabel ?? /* @__PURE__ */ jsxs27(Fragment8, { children: [
+      /* @__PURE__ */ jsx28("div", { className: "ods-donut__center", children: centerLabel ?? /* @__PURE__ */ jsxs27(Fragment9, { children: [
         /* @__PURE__ */ jsx28("div", { className: "ods-donut__value", children: total }),
         /* @__PURE__ */ jsx28("div", { className: "ods-donut__small", children: "total" })
       ] }) })
@@ -7073,7 +7077,7 @@ import { AnimatePresence as AnimatePresence4, motion as motion6 } from "framer-m
 import { useEffect as useEffect7, useRef as useRef14 } from "react";
 import { useButton as useButton4, useMenu, useMenuItem, useMenuTrigger } from "react-aria";
 import { createPortal as createPortal4 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 function MenuItemComponent({ item, state, onAction }) {
   const ref = useRef14(null);
   const { menuItemProps } = useMenuItem({ key: item.key, onAction }, state, ref);
@@ -7227,7 +7231,7 @@ function DropdownMenu({
   });
   const { buttonProps } = useButton4({ ...menuTriggerProps, ...ariaNameProps }, triggerRef);
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeTriggerProps } = buttonProps;
-  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment10, { children: [
     /* @__PURE__ */ jsx30(
       "button",
       {
@@ -7266,7 +7270,7 @@ function EmptyState({ icon, title, description, action, className }) {
 // src/components/ExecutionConsole/ExecutionConsole.tsx
 import { motion as motion7 } from "framer-motion";
 import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef15, useState as useState11 } from "react";
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 var iconProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
@@ -7324,6 +7328,7 @@ function ExecutionConsole({
   showNodeFilter = true,
   exportable = true,
   expandedHeight = DEFAULT_EXPANDED_HEIGHT,
+  height,
   toolbar,
   emptyState,
   className
@@ -7430,12 +7435,16 @@ function ExecutionConsole({
   }, [logs]);
   const showNodeChrome = showNodeFilter && nodeOptions.length > 0;
   const hasFilterChrome = searchable || showLevelFilter || showNodeChrome;
+  const useFlexFill = height === "fill" || height === "100%";
+  const explicitHeightStyle = useFlexFill ? { flex: "1 1 auto", minHeight: 0, height: "100%" } : height !== void 0 ? { height: typeof height === "number" ? `${height}px` : height } : void 0;
+  const motionAnimate = explicitHeightStyle ? false : { height: open ? expandedHeight : COLLAPSED_HEIGHT };
   return /* @__PURE__ */ jsxs31(
     motion7.div,
     {
       className: cn("ods-console", open && "ods-console--open", className),
-      animate: { height: open ? expandedHeight : COLLAPSED_HEIGHT },
+      animate: motionAnimate,
       transition: { type: "spring", stiffness: 300, damping: 30 },
+      style: explicitHeightStyle,
       "data-testid": "execution-console",
       children: [
         /* @__PURE__ */ jsxs31("div", { className: "ods-console__bar", "data-testid": "console-bar", children: [
@@ -7554,7 +7563,7 @@ function ExecutionConsole({
                 children: /* @__PURE__ */ jsx32(TrashIcon2, {})
               }
             ),
-            toolbar && /* @__PURE__ */ jsxs31(Fragment10, { children: [
+            toolbar && /* @__PURE__ */ jsxs31(Fragment11, { children: [
               /* @__PURE__ */ jsx32("span", { className: "ods-console__action-separator", "aria-hidden": "true" }),
               toolbar
             ] })
@@ -7683,7 +7692,7 @@ function q(query, text) {
   const lc = text.toLowerCase();
   const idx = lc.indexOf(trimmed.toLowerCase());
   if (idx < 0) return text;
-  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
     text.slice(0, idx),
     /* @__PURE__ */ jsx32("mark", { className: "ods-console__match", children: text.slice(idx, idx + trimmed.length) }),
     text.slice(idx + trimmed.length)
@@ -7820,7 +7829,7 @@ function sanitizeHref(url) {
 }
 
 // src/components/FileDropzone/FileDropzone.tsx
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 var UPLOAD_ICON = /* @__PURE__ */ jsx34("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx34(
   "path",
   {
@@ -8217,7 +8226,7 @@ function FileDropzone({
                         children: CHECK_ICON
                       }
                     ),
-                    status === "error" && /* @__PURE__ */ jsxs33(Fragment11, { children: [
+                    status === "error" && /* @__PURE__ */ jsxs33(Fragment12, { children: [
                       /* @__PURE__ */ jsx34(
                         "span",
                         {
@@ -8973,7 +8982,13 @@ function FlowCanvas2({
 }
 
 // src/components/FlowMinimap/FlowMinimap.tsx
-import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
+import {
+  useCallback as useCallback9,
+  useEffect as useEffect11,
+  useMemo as useMemo9,
+  useRef as useRef19,
+  useState as useState15
+} from "react";
 import { jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
 var MINIMAP_WIDTH = 140;
 var MINIMAP_HEIGHT = 100;
@@ -8981,6 +8996,7 @@ function FlowMinimap({
   nodes = [],
   edges = [],
   viewportRect,
+  viewport,
   totalWidth = 2e3,
   totalHeight = 1500,
   onViewportChange,
@@ -9016,72 +9032,200 @@ function FlowMinimap({
       height: viewportRect.height * scaleY
     };
   }, [viewportRect, scaleX, scaleY]);
-  const handleClick = useCallback9(
-    (e) => {
+  const reportViewportChange = useCallback9(
+    (worldX, worldY) => {
       if (!onViewportChange) return;
+      if (onViewportChange.length <= 1) {
+        onViewportChange({
+          x: worldX,
+          y: worldY,
+          zoom: viewport?.zoom
+        });
+      } else {
+        onViewportChange(worldX, worldY);
+      }
+    },
+    [onViewportChange, viewport?.zoom]
+  );
+  const handleSvgClick = useCallback9(
+    (e) => {
+      if (dragRef.current.dragging) return;
       const rect = e.currentTarget.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
       const clickY = e.clientY - rect.top;
-      const worldX = clickX / scaleX;
-      const worldY = clickY / scaleY;
-      onViewportChange(worldX, worldY);
+      let worldX = clickX / scaleX;
+      let worldY = clickY / scaleY;
+      if (viewportRect) {
+        worldX -= viewportRect.width / 2;
+        worldY -= viewportRect.height / 2;
+      }
+      reportViewportChange(worldX, worldY);
+    },
+    [scaleX, scaleY, viewportRect, reportViewportChange]
+  );
+  const dragRef = useRef19({
+    dragging: false,
+    pointerId: -1,
+    startX: 0,
+    startY: 0,
+    startWorldX: 0,
+    startWorldY: 0
+  });
+  const [isDragging, setIsDragging] = useState15(false);
+  const onViewportPointerDown = useCallback9(
+    (e) => {
+      if (!viewportRect) return;
+      e.stopPropagation();
+      e.preventDefault();
+      const svg = e.currentTarget.ownerSVGElement ?? e.currentTarget;
+      svg.setPointerCapture?.(e.pointerId);
+      dragRef.current = {
+        dragging: true,
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        startWorldX: viewportRect.x,
+        startWorldY: viewportRect.y
+      };
+      setIsDragging(true);
     },
-    [onViewportChange, scaleX, scaleY]
+    [viewportRect]
   );
-  return /* @__PURE__ */ jsx38("div", { className: cn("ods-flow-minimap", className), "data-testid": "flow-minimap", children: /* @__PURE__ */ jsxs37(
+  const onSvgPointerMove = useCallback9(
+    (e) => {
+      const d = dragRef.current;
+      if (!d.dragging || d.pointerId !== e.pointerId) return;
+      const dx = (e.clientX - d.startX) / scaleX;
+      const dy = (e.clientY - d.startY) / scaleY;
+      reportViewportChange(d.startWorldX + dx, d.startWorldY + dy);
+    },
+    [scaleX, scaleY, reportViewportChange]
+  );
+  const onSvgPointerUp = useCallback9((e) => {
+    const d = dragRef.current;
+    if (d.dragging && d.pointerId === e.pointerId) {
+      d.dragging = false;
+      d.pointerId = -1;
+      setIsDragging(false);
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+    }
+  }, []);
+  useEffect11(
+    () => () => {
+      dragRef.current.dragging = false;
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx38(
+    "div",
+    {
+      className: cn("ods-flow-minimap", isDragging && "ods-flow-minimap--dragging", className),
+      "data-testid": "flow-minimap",
+      children: /* @__PURE__ */ jsxs37(
+        "svg",
+        {
+          width: MINIMAP_WIDTH,
+          height: MINIMAP_HEIGHT,
+          viewBox: `0 0 ${MINIMAP_WIDTH} ${MINIMAP_HEIGHT}`,
+          onClick: handleSvgClick,
+          onPointerMove: onSvgPointerMove,
+          onPointerUp: onSvgPointerUp,
+          onPointerCancel: onSvgPointerUp,
+          "data-testid": "flow-minimap-svg",
+          children: [
+            scaledEdges.map((e, i) => /* @__PURE__ */ jsx38(
+              "line",
+              {
+                x1: e.x1,
+                y1: e.y1,
+                x2: e.x2,
+                y2: e.y2,
+                className: "ods-flow-minimap__edge"
+              },
+              i
+            )),
+            scaledNodes.map((n) => /* @__PURE__ */ jsx38(
+              "rect",
+              {
+                x: n.sx,
+                y: n.sy,
+                width: n.sw,
+                height: n.sh,
+                rx: 1,
+                fill: n.color || "var(--ods-color-brand-500, #3b5bff)",
+                className: "ods-flow-minimap__node",
+                "data-testid": `minimap-node-${n.id}`
+              },
+              n.id
+            )),
+            scaledViewport && /* @__PURE__ */ jsx38(
+              "rect",
+              {
+                x: scaledViewport.x,
+                y: scaledViewport.y,
+                width: scaledViewport.width,
+                height: scaledViewport.height,
+                className: "ods-flow-minimap__viewport",
+                "data-testid": "minimap-viewport",
+                onPointerDown: onViewportPointerDown,
+                style: { cursor: viewportRect ? "grab" : "default" }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/FlowToolbar/FlowToolbar.tsx
+import { useEffect as useEffect12, useRef as useRef20, useState as useState16 } from "react";
+
+// src/components/Spinner/Spinner.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+var sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48
+};
+function Spinner({
+  size = "md",
+  color = "var(--ods-color-brand-500)",
+  className
+}) {
+  const px = sizeMap[size];
+  return /* @__PURE__ */ jsx39(
     "svg",
     {
-      width: MINIMAP_WIDTH,
-      height: MINIMAP_HEIGHT,
-      viewBox: `0 0 ${MINIMAP_WIDTH} ${MINIMAP_HEIGHT}`,
-      onClick: handleClick,
-      "data-testid": "flow-minimap-svg",
-      children: [
-        scaledEdges.map((e, i) => /* @__PURE__ */ jsx38(
-          "line",
-          {
-            x1: e.x1,
-            y1: e.y1,
-            x2: e.x2,
-            y2: e.y2,
-            className: "ods-flow-minimap__edge"
-          },
-          i
-        )),
-        scaledNodes.map((n) => /* @__PURE__ */ jsx38(
-          "rect",
-          {
-            x: n.sx,
-            y: n.sy,
-            width: n.sw,
-            height: n.sh,
-            rx: 1,
-            fill: n.color || "var(--ods-color-brand-500, #3b5bff)",
-            className: "ods-flow-minimap__node",
-            "data-testid": `minimap-node-${n.id}`
-          },
-          n.id
-        )),
-        scaledViewport && /* @__PURE__ */ jsx38(
-          "rect",
-          {
-            x: scaledViewport.x,
-            y: scaledViewport.y,
-            width: scaledViewport.width,
-            height: scaledViewport.height,
-            className: "ods-flow-minimap__viewport",
-            "data-testid": "minimap-viewport"
-          }
-        )
-      ]
+      className: cn("ods-spinner", `ods-spinner--${size}`, className),
+      width: px,
+      height: px,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: "status",
+      "aria-label": "Loading",
+      style: { color },
+      children: /* @__PURE__ */ jsx39(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeDasharray: "31.4 31.4",
+          className: "ods-spinner__circle"
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/components/FlowToolbar/FlowToolbar.tsx
-import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
 function FlowToolbar({ children, placement = "left", className }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: cn("ods-flow-toolbar", `ods-flow-toolbar--${placement}`, className),
@@ -9104,7 +9248,7 @@ function FlowToolbarButton({
 }) {
   const hoverLabel = tooltip ?? label;
   const title = shortcut ? `${hoverLabel} (${shortcut})` : hoverLabel;
-  return /* @__PURE__ */ jsx39("span", { className: "ods-flow-toolbar__btn-wrapper", "data-tooltip": title, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40("span", { className: "ods-flow-toolbar__btn-wrapper", "data-tooltip": title, children: /* @__PURE__ */ jsx40(
     "button",
     {
       type: "button",
@@ -9119,12 +9263,12 @@ function FlowToolbarButton({
       "aria-label": label,
       "aria-pressed": active,
       title,
-      children: /* @__PURE__ */ jsx39("span", { className: "ods-flow-toolbar__btn-icon", children: icon })
+      children: /* @__PURE__ */ jsx40("span", { className: "ods-flow-toolbar__btn-icon", children: icon })
     }
   ) });
 }
 function FlowToolbarDivider({ className }) {
-  return /* @__PURE__ */ jsx39("span", { className: cn("ods-flow-toolbar__divider", className), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx40("span", { className: cn("ods-flow-toolbar__divider", className), "aria-hidden": "true" });
 }
 var SVG_BASE = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -9136,112 +9280,323 @@ var SVG_BASE = {
   strokeLinejoin: "round",
   "aria-hidden": true
 };
-var mkIcon = (children) => /* @__PURE__ */ jsx39("svg", { ...SVG_BASE, width: "16", height: "16", children });
+var mkIcon = (children) => /* @__PURE__ */ jsx40("svg", { ...SVG_BASE, width: "16", height: "16", children });
 var FlowToolbarIcons = {
   save: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "17 21 17 13 7 13 7 21" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "7 3 7 8 15 8" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "17 21 17 13 7 13 7 21" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "7 3 7 8 15 8" })
     ] })
   ),
-  run: mkIcon(/* @__PURE__ */ jsx39("polygon", { points: "6 4 20 12 6 20 6 4", fill: "currentColor", stroke: "none" })),
-  stop: mkIcon(/* @__PURE__ */ jsx39("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1" })),
+  run: mkIcon(/* @__PURE__ */ jsx40("polygon", { points: "6 4 20 12 6 20 6 4", fill: "currentColor", stroke: "none" })),
+  stop: mkIcon(/* @__PURE__ */ jsx40("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1" })),
   lock: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
-      /* @__PURE__ */ jsx39("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
     ] })
   ),
   unlock: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
-      /* @__PURE__ */ jsx39("path", { d: "M8 11V7a4 4 0 0 1 8 0" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M8 11V7a4 4 0 0 1 8 0" })
     ] })
   ),
   reset: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("polyline", { points: "1 4 1 10 7 10" }),
-      /* @__PURE__ */ jsx39("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("polyline", { points: "1 4 1 10 7 10" }),
+      /* @__PURE__ */ jsx40("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
     ] })
   ),
   undo: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("path", { d: "M3 7v6h6" }),
-      /* @__PURE__ */ jsx39("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-7.07 3.43L3 13" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("path", { d: "M3 7v6h6" }),
+      /* @__PURE__ */ jsx40("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-7.07 3.43L3 13" })
     ] })
   ),
   redo: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("path", { d: "M21 7v6h-6" }),
-      /* @__PURE__ */ jsx39("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 7.07 3.43L21 13" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("path", { d: "M21 7v6h-6" }),
+      /* @__PURE__ */ jsx40("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 7.07 3.43L21 13" })
     ] })
   ),
   drawerOpen: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-      /* @__PURE__ */ jsx39("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "13 9 16 12 13 15" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx40("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "13 9 16 12 13 15" })
     ] })
   ),
   drawerClose: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-      /* @__PURE__ */ jsx39("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "16 9 13 12 16 15" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx40("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "16 9 13 12 16 15" })
     ] })
   ),
   settings: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "3" }),
-      /* @__PURE__ */ jsx39("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" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("circle", { cx: "12", cy: "12", r: "3" }),
+      /* @__PURE__ */ jsx40("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__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("path", { d: "M22 12A10 10 0 1 1 12 2" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "22 2 22 8 16 8" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "12 7 12 12 15 15" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("path", { d: "M22 12A10 10 0 1 1 12 2" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "22 2 22 8 16 8" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "12 7 12 12 15 15" })
     ] })
   ),
   debug: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("polyline", { points: "4 17 10 11 4 5" }),
-      /* @__PURE__ */ jsx39("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("polyline", { points: "4 17 10 11 4 5" }),
+      /* @__PURE__ */ jsx40("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
     ] })
   ),
   zoomIn: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("circle", { cx: "11", cy: "11", r: "7" }),
-      /* @__PURE__ */ jsx39("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-      /* @__PURE__ */ jsx39("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
-      /* @__PURE__ */ jsx39("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx40("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+      /* @__PURE__ */ jsx40("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+      /* @__PURE__ */ jsx40("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
     ] })
   ),
   zoomOut: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("circle", { cx: "11", cy: "11", r: "7" }),
-      /* @__PURE__ */ jsx39("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-      /* @__PURE__ */ jsx39("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx40("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+      /* @__PURE__ */ jsx40("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
     ] })
   ),
   zoomReset: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("circle", { cx: "11", cy: "11", r: "7" }),
-      /* @__PURE__ */ jsx39("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-      /* @__PURE__ */ jsx39("polyline", { points: "8 9 8 13 12 13" }),
-      /* @__PURE__ */ jsx39("path", { d: "M14 8a4 4 0 0 1 0 6" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx40("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+      /* @__PURE__ */ jsx40("polyline", { points: "8 9 8 13 12 13" }),
+      /* @__PURE__ */ jsx40("path", { d: "M14 8a4 4 0 0 1 0 6" })
     ] })
   ),
   fit: mkIcon(
-    /* @__PURE__ */ jsxs38(Fragment12, { children: [
-      /* @__PURE__ */ jsx39("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-      /* @__PURE__ */ jsx39("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-      /* @__PURE__ */ jsx39("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ jsx39("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" })
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" })
+    ] })
+  ),
+  /**
+   * Auto-layout glyph — a small directed-graph diagram (three connected
+   * nodes) that reads as "graph layout". Lives inside this barrel so the
+   * `<FlowToolbarAutoLayout>` button doesn't need an icon-pack import.
+   * If the design system later adds a canonical icon to `@octaviaflow/icons`,
+   * this can be swapped without breaking consumers.
+   */
+  autoLayout: mkIcon(
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("rect", { x: "2", y: "3", width: "6", height: "4", rx: "0.5" }),
+      /* @__PURE__ */ jsx40("rect", { x: "9", y: "10", width: "6", height: "4", rx: "0.5" }),
+      /* @__PURE__ */ jsx40("rect", { x: "16", y: "3", width: "6", height: "4", rx: "0.5" }),
+      /* @__PURE__ */ jsx40("rect", { x: "9", y: "17", width: "6", height: "4", rx: "0.5" }),
+      /* @__PURE__ */ jsx40("path", { d: "M5 7v3a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M19 7v3a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx40("path", { d: "M12 14v3" })
+    ] })
+  ),
+  /** Checkmark — short-lived success indicator on the save button. */
+  check: mkIcon(/* @__PURE__ */ jsx40("polyline", { points: "5 12 10 17 19 7" })),
+  /** Filled exclamation — error indicator on the save button. */
+  error: mkIcon(
+    /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      /* @__PURE__ */ jsx40("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx40("line", { x1: "12", y1: "8", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx40("circle", { cx: "12", cy: "16.5", r: "0.6", fill: "currentColor", stroke: "none" })
     ] })
   )
 };
+function FlowToolbarSave({
+  state,
+  loading,
+  lastSavedAt,
+  error,
+  successDisplayMs = 1500,
+  onSave,
+  label = "Save",
+  shortcut,
+  showLabel = false,
+  className
+}) {
+  const [inferred, setInferred] = useState16("idle");
+  const prevSavedAt = useRef20(lastSavedAt);
+  const prevLoading = useRef20(loading);
+  useEffect12(() => {
+    if (state !== void 0) return;
+    if (error) {
+      setInferred("error");
+      return;
+    }
+    if (loading) {
+      setInferred("saving");
+      prevLoading.current = true;
+      return;
+    }
+    const becameSaved = prevLoading.current && !loading;
+    const newSavedAt = lastSavedAt !== prevSavedAt.current && lastSavedAt !== void 0;
+    if (becameSaved || newSavedAt) {
+      setInferred("success");
+      prevSavedAt.current = lastSavedAt;
+      prevLoading.current = loading;
+      const t = setTimeout(() => setInferred("idle"), successDisplayMs);
+      return () => clearTimeout(t);
+    }
+    prevLoading.current = loading;
+  }, [state, loading, lastSavedAt, error, successDisplayMs]);
+  const resolved = state ?? inferred;
+  const disabled = resolved === "saving";
+  const icon = resolved === "saving" ? /* @__PURE__ */ jsx40(Spinner, { size: "sm" }) : resolved === "success" ? FlowToolbarIcons.check : resolved === "error" ? FlowToolbarIcons.error : FlowToolbarIcons.save;
+  const tooltip = resolved === "saving" ? "Saving\u2026" : resolved === "success" ? "Saved" : resolved === "error" ? typeof error === "string" ? error : "Save failed" : label;
+  return /* @__PURE__ */ jsx40(
+    "span",
+    {
+      className: "ods-flow-toolbar__btn-wrapper",
+      "data-tooltip": shortcut ? `${tooltip} (${shortcut})` : tooltip,
+      children: /* @__PURE__ */ jsxs38(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "ods-flow-toolbar__btn",
+            `ods-flow-toolbar__btn--save-${resolved}`,
+            resolved === "error" && "ods-flow-toolbar__btn--danger",
+            className
+          ),
+          onClick: disabled ? void 0 : onSave,
+          disabled,
+          "aria-label": tooltip,
+          "aria-busy": resolved === "saving",
+          title: shortcut ? `${tooltip} (${shortcut})` : tooltip,
+          children: [
+            /* @__PURE__ */ jsx40("span", { className: "ods-flow-toolbar__btn-icon", children: icon }),
+            showLabel && /* @__PURE__ */ jsx40("span", { className: "ods-flow-toolbar__btn-label", children: resolved === "saving" ? "Saving\u2026" : label })
+          ]
+        }
+      )
+    }
+  );
+}
+function FlowToolbarRun({
+  running = false,
+  disabled = false,
+  onRun,
+  onStop,
+  shortcut,
+  className
+}) {
+  return /* @__PURE__ */ jsx40(
+    FlowToolbarButton,
+    {
+      icon: running ? FlowToolbarIcons.stop : FlowToolbarIcons.run,
+      label: running ? "Stop" : "Run",
+      onClick: running ? onStop : onRun,
+      disabled,
+      danger: running,
+      shortcut,
+      className
+    }
+  );
+}
+function FlowToolbarUndo({
+  canUndo = true,
+  onUndo,
+  shortcut = "\u2318Z",
+  className
+}) {
+  return /* @__PURE__ */ jsx40(
+    FlowToolbarButton,
+    {
+      icon: FlowToolbarIcons.undo,
+      label: "Undo",
+      onClick: onUndo,
+      disabled: !canUndo,
+      shortcut,
+      className
+    }
+  );
+}
+function FlowToolbarRedo({
+  canRedo = true,
+  onRedo,
+  shortcut = "\u2318\u21E7Z",
+  className
+}) {
+  return /* @__PURE__ */ jsx40(
+    FlowToolbarButton,
+    {
+      icon: FlowToolbarIcons.redo,
+      label: "Redo",
+      onClick: onRedo,
+      disabled: !canRedo,
+      shortcut,
+      className
+    }
+  );
+}
+function FlowToolbarAutoLayout({
+  onAutoLayout,
+  disabled = false,
+  shortcut,
+  className
+}) {
+  return /* @__PURE__ */ jsx40(
+    FlowToolbarButton,
+    {
+      icon: FlowToolbarIcons.autoLayout,
+      label: "Auto-layout",
+      tooltip: "Tidy the graph (auto-layout)",
+      onClick: onAutoLayout,
+      disabled,
+      shortcut,
+      className
+    }
+  );
+}
+function FlowToolbarFitView({
+  onFit,
+  disabled = false,
+  shortcut = "\u2318.",
+  className
+}) {
+  return /* @__PURE__ */ jsx40(
+    FlowToolbarButton,
+    {
+      icon: FlowToolbarIcons.fit,
+      label: "Fit to view",
+      onClick: onFit,
+      disabled,
+      shortcut,
+      className
+    }
+  );
+}
+function FlowToolbarReset({
+  onReset,
+  disabled = false,
+  shortcut = "\u23180",
+  className
+}) {
+  return /* @__PURE__ */ jsx40(
+    FlowToolbarButton,
+    {
+      icon: FlowToolbarIcons.zoomReset,
+      label: "Reset zoom",
+      tooltip: "Reset zoom to 100%",
+      onClick: onReset,
+      disabled,
+      shortcut,
+      className
+    }
+  );
+}
 function FlowToolbarZoom({
   zoom,
   onZoomIn,
@@ -9251,7 +9606,7 @@ function FlowToolbarZoom({
   className
 }) {
   return /* @__PURE__ */ jsxs38("div", { className: cn("ods-flow-toolbar__zoom", className), children: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       FlowToolbarButton,
       {
         icon: FlowToolbarIcons.zoomIn,
@@ -9260,7 +9615,7 @@ function FlowToolbarZoom({
         shortcut: "\u2318+"
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       FlowToolbarButton,
       {
         icon: FlowToolbarIcons.zoomOut,
@@ -9269,7 +9624,7 @@ function FlowToolbarZoom({
         shortcut: "\u2318\u2212"
       }
     ),
-    onReset && /* @__PURE__ */ jsx39(
+    onReset && /* @__PURE__ */ jsx40(
       FlowToolbarButton,
       {
         icon: FlowToolbarIcons.zoomReset,
@@ -9279,7 +9634,7 @@ function FlowToolbarZoom({
         shortcut: "\u23180"
       }
     ),
-    onFit && /* @__PURE__ */ jsx39(
+    onFit && /* @__PURE__ */ jsx40(
       FlowToolbarButton,
       {
         icon: FlowToolbarIcons.fit,
@@ -9304,7 +9659,7 @@ function FlowToolbarZoom({
 }
 
 // src/components/FormSection/FormSection.tsx
-import { jsx as jsx40, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs39 } from "react/jsx-runtime";
 function FormSection({
   title,
   description,
@@ -9315,18 +9670,18 @@ function FormSection({
 }) {
   return /* @__PURE__ */ jsxs39("section", { className: cn("ods-form-section", divided && "ods-form-section--divided", className), children: [
     (title || description) && /* @__PURE__ */ jsxs39("header", { className: "ods-form-section__head", children: [
-      title && /* @__PURE__ */ jsx40("h3", { className: "ods-form-section__title", children: title }),
-      description && /* @__PURE__ */ jsx40("p", { className: "ods-form-section__desc", children: description })
+      title && /* @__PURE__ */ jsx41("h3", { className: "ods-form-section__title", children: title }),
+      description && /* @__PURE__ */ jsx41("p", { className: "ods-form-section__desc", children: description })
     ] }),
-    /* @__PURE__ */ jsx40("div", { className: "ods-form-section__body", children }),
-    footer && /* @__PURE__ */ jsx40("footer", { className: "ods-form-section__footer", children: footer })
+    /* @__PURE__ */ jsx41("div", { className: "ods-form-section__body", children }),
+    footer && /* @__PURE__ */ jsx41("footer", { className: "ods-form-section__footer", children: footer })
   ] });
 }
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback10, useEffect as useEffect11, useLayoutEffect as useLayoutEffect2, useRef as useRef19, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect13, useLayoutEffect as useLayoutEffect2, useRef as useRef21, useState as useState17 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs40 } from "react/jsx-runtime";
 function computePosition(rect, panelRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
@@ -9350,12 +9705,12 @@ function HoverCard({
   children,
   className
 }) {
-  const [open, setOpen] = useState15(false);
-  const triggerRef = useRef19(null);
-  const panelRef = useRef19(null);
-  const openTimer = useRef19(null);
-  const closeTimer = useRef19(null);
-  const [coords, setCoords] = useState15(null);
+  const [open, setOpen] = useState17(false);
+  const triggerRef = useRef21(null);
+  const panelRef = useRef21(null);
+  const openTimer = useRef21(null);
+  const closeTimer = useRef21(null);
+  const [coords, setCoords] = useState17(null);
   const clearTimers = () => {
     if (openTimer.current) {
       clearTimeout(openTimer.current);
@@ -9366,7 +9721,7 @@ function HoverCard({
       closeTimer.current = null;
     }
   };
-  useEffect11(() => () => clearTimers(), []);
+  useEffect13(() => () => clearTimers(), []);
   const show = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setOpen(true), openDelay);
@@ -9387,7 +9742,7 @@ function HoverCard({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!open) return;
     const h = () => reposition();
     window.addEventListener("scroll", h, true);
@@ -9397,7 +9752,7 @@ function HoverCard({
       window.removeEventListener("resize", h);
     };
   }, [open, reposition]);
-  const triggerEl = /* @__PURE__ */ jsx41(
+  const triggerEl = /* @__PURE__ */ jsx42(
     "span",
     {
       ref: triggerRef,
@@ -9410,7 +9765,7 @@ function HoverCard({
     }
   );
   const portal = typeof document !== "undefined" && open ? createPortal5(
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       "div",
       {
         ref: panelRef,
@@ -9431,14 +9786,14 @@ function HoverCard({
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs40(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment14, { children: [
     triggerEl,
     portal
   ] });
 }
 
 // src/components/IconCard/IconCard.tsx
-import { jsx as jsx42, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs41 } from "react/jsx-runtime";
 function IconCard({
   variant = "default",
   icon,
@@ -9462,12 +9817,12 @@ function IconCard({
       role: interactive ? "button" : void 0,
       tabIndex: interactive ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsx42("span", { className: "ods-icon-card__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx43("span", { className: "ods-icon-card__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsxs41("div", { className: "ods-icon-card__body", children: [
-          /* @__PURE__ */ jsx42("div", { className: "ods-icon-card__title", children: title }),
-          description && /* @__PURE__ */ jsx42("div", { className: "ods-icon-card__description", children: description })
+          /* @__PURE__ */ jsx43("div", { className: "ods-icon-card__title", children: title }),
+          description && /* @__PURE__ */ jsx43("div", { className: "ods-icon-card__description", children: description })
         ] }),
-        action && /* @__PURE__ */ jsx42("div", { className: "ods-icon-card__action", children: action })
+        action && /* @__PURE__ */ jsx43("div", { className: "ods-icon-card__action", children: action })
       ]
     }
   );
@@ -9478,10 +9833,10 @@ import {
   forwardRef as forwardRef2,
   useId as useId6,
   useImperativeHandle,
-  useRef as useRef20
+  useRef as useRef22
 } from "react";
-import { jsx as jsx43, jsxs as jsxs42 } from "react/jsx-runtime";
-var CLEAR_GLYPH = /* @__PURE__ */ jsx43("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx43("path", { d: "m3 3 6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) });
+import { jsx as jsx44, jsxs as jsxs42 } from "react/jsx-runtime";
+var CLEAR_GLYPH = /* @__PURE__ */ jsx44("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx44("path", { d: "m3 3 6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) });
 var Input = forwardRef2(
   ({
     type = "text",
@@ -9503,7 +9858,7 @@ var Input = forwardRef2(
     onChange,
     ...props
   }, forwardedRef) => {
-    const innerRef = useRef20(null);
+    const innerRef = useRef22(null);
     useImperativeHandle(forwardedRef, () => innerRef.current);
     const reactId = useId6();
     const inputId = id ?? `${reactId}-input`;
@@ -9539,10 +9894,10 @@ var Input = forwardRef2(
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx43("label", { htmlFor: inputId, className: "ods-input__label", children: label }),
+          label && /* @__PURE__ */ jsx44("label", { htmlFor: inputId, className: "ods-input__label", children: label }),
           /* @__PURE__ */ jsxs42("div", { className: "ods-input__wrapper", children: [
-            leftIcon && /* @__PURE__ */ jsx43("span", { className: "ods-input__icon--left", "aria-hidden": "true", children: leftIcon }),
-            /* @__PURE__ */ jsx43(
+            leftIcon && /* @__PURE__ */ jsx44("span", { className: "ods-input__icon--left", "aria-hidden": "true", children: leftIcon }),
+            /* @__PURE__ */ jsx44(
               "input",
               {
                 ...props,
@@ -9564,7 +9919,7 @@ var Input = forwardRef2(
               }
             ),
             /* @__PURE__ */ jsxs42("span", { className: "ods-input__right", children: [
-              showClear && /* @__PURE__ */ jsx43(
+              showClear && /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -9575,12 +9930,12 @@ var Input = forwardRef2(
                   children: CLEAR_GLYPH
                 }
               ),
-              shortcutHint && !showClear && /* @__PURE__ */ jsx43("span", { className: "ods-input__kbd", "aria-hidden": "true", children: shortcutHint }),
-              rightIcon && !showClear && !shortcutHint && /* @__PURE__ */ jsx43("span", { className: "ods-input__icon--right", "aria-hidden": "true", children: rightIcon })
+              shortcutHint && !showClear && /* @__PURE__ */ jsx44("span", { className: "ods-input__kbd", "aria-hidden": "true", children: shortcutHint }),
+              rightIcon && !showClear && !shortcutHint && /* @__PURE__ */ jsx44("span", { className: "ods-input__icon--right", "aria-hidden": "true", children: rightIcon })
             ] })
           ] }),
-          error && errorMessage && /* @__PURE__ */ jsx43("div", { id: errorId, className: "ods-input__error-message", role: "alert", children: errorMessage }),
-          !error && helperText && /* @__PURE__ */ jsx43("div", { id: helperId, className: "ods-input__helper", children: helperText })
+          error && errorMessage && /* @__PURE__ */ jsx44("div", { id: errorId, className: "ods-input__error-message", role: "alert", children: errorMessage }),
+          !error && helperText && /* @__PURE__ */ jsx44("div", { id: helperId, className: "ods-input__helper", children: helperText })
         ]
       }
     );
@@ -9589,8 +9944,8 @@ var Input = forwardRef2(
 Input.displayName = "Input";
 
 // src/components/JsonViewer/JsonViewer.tsx
-import { useMemo as useMemo10, useState as useState16 } from "react";
-import { Fragment as Fragment14, jsx as jsx44, jsxs as jsxs43 } from "react/jsx-runtime";
+import { useMemo as useMemo10, useState as useState18 } from "react";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs43 } from "react/jsx-runtime";
 var VARIANT = {
   string: "string",
   number: "number",
@@ -9609,10 +9964,10 @@ function JsonViewer({
 }) {
   return /* @__PURE__ */ jsxs43("div", { className: cn("ods-json-viewer", className), children: [
     (title || status) && /* @__PURE__ */ jsxs43("div", { className: "ods-json-viewer__head", children: [
-      title && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__title", children: title }),
-      status && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__status", children: status })
+      title && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__title", children: title }),
+      status && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__status", children: status })
     ] }),
-    /* @__PURE__ */ jsx44("div", { className: "ods-json-viewer__body", children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("div", { className: "ods-json-viewer__body", children: /* @__PURE__ */ jsx45(
       JsonNode,
       {
         value: data,
@@ -9635,24 +9990,24 @@ function JsonNode({
   truncateAt,
   isLast = true
 }) {
-  const [open, setOpen] = useState16(depth < defaultExpandDepth);
+  const [open, setOpen] = useState18(depth < defaultExpandDepth);
   const isObject = value !== null && typeof value === "object" && !Array.isArray(value);
   const isArray = Array.isArray(value);
   const isContainer = isObject || isArray;
   const renderKey = useMemo10(() => {
     if (name === void 0) return null;
     if (typeof name === "number") {
-      return showIndexes ? /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__key ods-json-viewer__key--index", children: name }) : null;
+      return showIndexes ? /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__key ods-json-viewer__key--index", children: name }) : null;
     }
-    return /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__key", children: `"${name}"` });
+    return /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__key", children: `"${name}"` });
   }, [name, showIndexes]);
   if (!isContainer) {
     return /* @__PURE__ */ jsxs43("div", { className: "ods-json-viewer__row", style: { paddingLeft: depth * 14 }, children: [
-      /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__caret-spacer" }),
+      /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__caret-spacer" }),
       renderKey,
-      renderKey != null && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__colon", children: ":" }),
-      /* @__PURE__ */ jsx44(Leaf, { value, truncateAt, copyable }),
-      !isLast && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__comma", children: "," })
+      renderKey != null && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__colon", children: ":" }),
+      /* @__PURE__ */ jsx45(Leaf, { value, truncateAt, copyable }),
+      !isLast && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__comma", children: "," })
     ] });
   }
   const entries = isArray ? value.map((v, i) => [i, v]) : Object.entries(value);
@@ -9666,7 +10021,7 @@ function JsonNode({
         style: { paddingLeft: depth * 14 },
         onClick: () => setOpen((o) => !o),
         children: [
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx45(
             "button",
             {
               type: "button",
@@ -9677,7 +10032,7 @@ function JsonNode({
                 e.stopPropagation();
                 setOpen((o) => !o);
               },
-              children: /* @__PURE__ */ jsx44("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx44(
+              children: /* @__PURE__ */ jsx45("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx45(
                 "path",
                 {
                   d: "M3 2 5 4 3 6",
@@ -9690,18 +10045,18 @@ function JsonNode({
             }
           ),
           renderKey,
-          renderKey != null && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__colon", children: ":" }),
-          /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__bracket", children: openBracket }),
-          !open && /* @__PURE__ */ jsxs43(Fragment14, { children: [
-            /* @__PURE__ */ jsx44("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__ */ jsx44("span", { className: "ods-json-viewer__bracket", children: closeBracket })
+          renderKey != null && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__colon", children: ":" }),
+          /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__bracket", children: openBracket }),
+          !open && /* @__PURE__ */ jsxs43(Fragment15, { children: [
+            /* @__PURE__ */ jsx45("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__ */ jsx45("span", { className: "ods-json-viewer__bracket", children: closeBracket })
           ] }),
-          !isLast && !open && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__comma", children: "," })
+          !isLast && !open && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__comma", children: "," })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs43(Fragment14, { children: [
-      entries.map(([k, v], i) => /* @__PURE__ */ jsx44(
+    open && /* @__PURE__ */ jsxs43(Fragment15, { children: [
+      entries.map(([k, v], i) => /* @__PURE__ */ jsx45(
         JsonNode,
         {
           name: isArray ? k : k,
@@ -9721,9 +10076,9 @@ function JsonNode({
           className: "ods-json-viewer__row ods-json-viewer__row--close",
           style: { paddingLeft: depth * 14 },
           children: [
-            /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__caret-spacer" }),
-            /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__bracket", children: closeBracket }),
-            !isLast && /* @__PURE__ */ jsx44("span", { className: "ods-json-viewer__comma", children: "," })
+            /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__caret-spacer" }),
+            /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__bracket", children: closeBracket }),
+            !isLast && /* @__PURE__ */ jsx45("span", { className: "ods-json-viewer__comma", children: "," })
           ]
         }
       )
@@ -9762,8 +10117,8 @@ function Leaf({
     }
   };
   return /* @__PURE__ */ jsxs43("span", { className: cn("ods-json-viewer__value", `ods-json-viewer__value--${VARIANT[variant]}`), children: [
-    /* @__PURE__ */ jsx44("span", { children: display }),
-    copyable && /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("span", { children: display }),
+    copyable && /* @__PURE__ */ jsx45(
       "button",
       {
         type: "button",
@@ -9774,8 +10129,8 @@ function Leaf({
         },
         "aria-label": "Copy value",
         children: /* @__PURE__ */ jsxs43("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx44("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1", stroke: "currentColor", strokeWidth: "1.2" }),
-          /* @__PURE__ */ jsx44("path", { d: "M3.5 0.5h5v5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+          /* @__PURE__ */ jsx45("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1", stroke: "currentColor", strokeWidth: "1.2" }),
+          /* @__PURE__ */ jsx45("path", { d: "M3.5 0.5h5v5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
         ] })
       }
     )
@@ -9783,7 +10138,7 @@ function Leaf({
 }
 
 // src/components/KanbanCard/KanbanCard.tsx
-import { jsx as jsx45, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs44 } from "react/jsx-runtime";
 function KanbanCard({
   title,
   tag,
@@ -9808,8 +10163,8 @@ function KanbanCard({
       ),
       children: [
         tag && /* @__PURE__ */ jsxs44("div", { className: "ods-kanban-card__head", children: [
-          /* @__PURE__ */ jsx45("span", { className: "ods-kanban-card__tag", children: tag }),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46("span", { className: "ods-kanban-card__tag", children: tag }),
+          /* @__PURE__ */ jsx46(
             "button",
             {
               type: "button",
@@ -9817,19 +10172,19 @@ function KanbanCard({
               "aria-label": "More options",
               onClick: (e) => e.stopPropagation(),
               children: /* @__PURE__ */ jsxs44("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx45("circle", { cx: "3", cy: "7", r: "1.2", fill: "currentColor" }),
-                /* @__PURE__ */ jsx45("circle", { cx: "7", cy: "7", r: "1.2", fill: "currentColor" }),
-                /* @__PURE__ */ jsx45("circle", { cx: "11", cy: "7", r: "1.2", fill: "currentColor" })
+                /* @__PURE__ */ jsx46("circle", { cx: "3", cy: "7", r: "1.2", fill: "currentColor" }),
+                /* @__PURE__ */ jsx46("circle", { cx: "7", cy: "7", r: "1.2", fill: "currentColor" }),
+                /* @__PURE__ */ jsx46("circle", { cx: "11", cy: "7", r: "1.2", fill: "currentColor" })
               ] })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx45("div", { className: "ods-kanban-card__title", children: title }),
+        /* @__PURE__ */ jsx46("div", { className: "ods-kanban-card__title", children: title }),
         /* @__PURE__ */ jsxs44("div", { className: "ods-kanban-card__footer", children: [
           /* @__PURE__ */ jsxs44("div", { className: "ods-kanban-card__meta", children: [
             date && /* @__PURE__ */ jsxs44("span", { className: "ods-kanban-card__date", children: [
               /* @__PURE__ */ jsxs44("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx45(
+                /* @__PURE__ */ jsx46(
                   "rect",
                   {
                     x: "1.5",
@@ -9841,7 +10196,7 @@ function KanbanCard({
                     strokeWidth: "1.2"
                   }
                 ),
-                /* @__PURE__ */ jsx45(
+                /* @__PURE__ */ jsx46(
                   "path",
                   {
                     d: "M3.5 1.5v2M7.5 1.5v2M1.5 4.5h8",
@@ -9854,7 +10209,7 @@ function KanbanCard({
               date
             ] }),
             typeof comments === "number" && /* @__PURE__ */ jsxs44("span", { className: "ods-kanban-card__comments", children: [
-              /* @__PURE__ */ jsx45("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx46("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx46(
                 "path",
                 {
                   d: "M2 3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H6l-2 2v-2H3a1 1 0 0 1-1-1V3z",
@@ -9865,7 +10220,7 @@ function KanbanCard({
               comments
             ] })
           ] }),
-          assignee && /* @__PURE__ */ jsx45("div", { className: "ods-kanban-card__assignee", children: assignee })
+          assignee && /* @__PURE__ */ jsx46("div", { className: "ods-kanban-card__assignee", children: assignee })
         ] })
       ]
     }
@@ -9873,19 +10228,19 @@ function KanbanCard({
 }
 
 // src/components/Kbd/Kbd.tsx
-import { jsx as jsx46, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs45 } from "react/jsx-runtime";
 function Kbd({ size = "md", children, className }) {
-  return /* @__PURE__ */ jsx46("kbd", { className: cn("ods-kbd", `ods-kbd--${size}`, className), children });
+  return /* @__PURE__ */ jsx47("kbd", { className: cn("ods-kbd", `ods-kbd--${size}`, className), children });
 }
 function KbdGroup({ size = "md", separator = "+", keys, className }) {
-  return /* @__PURE__ */ jsx46("span", { className: cn("ods-kbd-group", className), children: keys.map((k, i) => /* @__PURE__ */ jsxs45("span", { className: "ods-kbd-group__item", children: [
-    /* @__PURE__ */ jsx46(Kbd, { size, children: k }),
-    i < keys.length - 1 && /* @__PURE__ */ jsx46("span", { className: "ods-kbd-group__sep", "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsx47("span", { className: cn("ods-kbd-group", className), children: keys.map((k, i) => /* @__PURE__ */ jsxs45("span", { className: "ods-kbd-group__item", children: [
+    /* @__PURE__ */ jsx47(Kbd, { size, children: k }),
+    i < keys.length - 1 && /* @__PURE__ */ jsx47("span", { className: "ods-kbd-group__sep", "aria-hidden": "true", children: separator })
   ] }, i)) });
 }
 
 // src/components/LineChart/LineChart.tsx
-import { jsx as jsx47, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs46 } from "react/jsx-runtime";
 function buildPath(points, smooth) {
   if (points.length === 0) return "";
   if (!smooth) {
@@ -9931,8 +10286,8 @@ function LineChart({
   const areaPath = fill && pts.length ? `${path} L${pts[pts.length - 1][0]},${H - pad2} L${pts[0][0]},${H - pad2} Z` : null;
   return /* @__PURE__ */ jsxs46("div", { className: cn("ods-line-chart", className), children: [
     (title || total) && /* @__PURE__ */ jsxs46("div", { className: "ods-line-chart__head", children: [
-      title && /* @__PURE__ */ jsx47("div", { className: "ods-line-chart__title", children: title }),
-      total && /* @__PURE__ */ jsx47("div", { className: "ods-line-chart__total", children: total })
+      title && /* @__PURE__ */ jsx48("div", { className: "ods-line-chart__title", children: title }),
+      total && /* @__PURE__ */ jsx48("div", { className: "ods-line-chart__total", children: total })
     ] }),
     /* @__PURE__ */ jsxs46(
       "svg",
@@ -9942,8 +10297,8 @@ function LineChart({
         preserveAspectRatio: "none",
         style: { height },
         children: [
-          areaPath && /* @__PURE__ */ jsx47("path", { d: areaPath, fill }),
-          /* @__PURE__ */ jsx47(
+          areaPath && /* @__PURE__ */ jsx48("path", { d: areaPath, fill }),
+          /* @__PURE__ */ jsx48(
             "path",
             {
               d: path,
@@ -9961,7 +10316,7 @@ function LineChart({
 }
 
 // src/components/LinkButton/LinkButton.tsx
-import { jsx as jsx48, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs47 } from "react/jsx-runtime";
 function LinkButton({
   variant = "primary",
   size = "md",
@@ -9984,9 +10339,9 @@ function LinkButton({
         className
       ),
       children: [
-        leftIcon && /* @__PURE__ */ jsx48("span", { className: "ods-link-btn__icon ods-link-btn__icon--left", "aria-hidden": "true", children: leftIcon }),
-        /* @__PURE__ */ jsx48("span", { className: "ods-link-btn__label", children }),
-        rightIcon && /* @__PURE__ */ jsx48("span", { className: "ods-link-btn__icon ods-link-btn__icon--right", "aria-hidden": "true", children: rightIcon })
+        leftIcon && /* @__PURE__ */ jsx49("span", { className: "ods-link-btn__icon ods-link-btn__icon--left", "aria-hidden": "true", children: leftIcon }),
+        /* @__PURE__ */ jsx49("span", { className: "ods-link-btn__label", children }),
+        rightIcon && /* @__PURE__ */ jsx49("span", { className: "ods-link-btn__icon ods-link-btn__icon--right", "aria-hidden": "true", children: rightIcon })
       ]
     }
   );
@@ -9996,14 +10351,14 @@ function LinkButton({
 import { AnimatePresence as AnimatePresence6, motion as motion9 } from "framer-motion";
 import {
   useCallback as useCallback11,
-  useEffect as useEffect12,
+  useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
-  useRef as useRef21,
-  useState as useState17
+  useRef as useRef23,
+  useState as useState19
 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { jsx as jsx49, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs48 } from "react/jsx-runtime";
 var RESERVED_TAIL_PX = 64;
 var TAGS_GAP = 6;
 function MultiSelect({
@@ -10023,17 +10378,17 @@ function MultiSelect({
   maxTags,
   className
 }) {
-  const [internalValue, setInternalValue] = useState17(defaultValue ?? []);
+  const [internalValue, setInternalValue] = useState19(defaultValue ?? []);
   const selectedValues = controlledValue ?? internalValue;
-  const [open, setOpen] = useState17(false);
-  const [query, setQuery] = useState17("");
-  const [activeIdx, setActiveIdx] = useState17(0);
-  const [dropdownPos, setDropdownPos] = useState17({ top: 0, left: 0, width: 0 });
-  const wrapRef = useRef21(null);
-  const tagsRowRef = useRef21(null);
-  const searchRef = useRef21(null);
-  const dropdownRef = useRef21(null);
-  const chipRefs = useRef21([]);
+  const [open, setOpen] = useState19(false);
+  const [query, setQuery] = useState19("");
+  const [activeIdx, setActiveIdx] = useState19(0);
+  const [dropdownPos, setDropdownPos] = useState19({ top: 0, left: 0, width: 0 });
+  const wrapRef = useRef23(null);
+  const tagsRowRef = useRef23(null);
+  const searchRef = useRef23(null);
+  const dropdownRef = useRef23(null);
+  const chipRefs = useRef23([]);
   const commit = useCallback11(
     (next) => {
       if (controlledValue === void 0) setInternalValue(next);
@@ -10058,7 +10413,7 @@ function MultiSelect({
     const rect = wrapRef.current.getBoundingClientRect();
     setDropdownPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
   }, []);
-  useEffect12(() => {
+  useEffect14(() => {
     if (!open) return;
     updatePosition();
     window.addEventListener("scroll", updatePosition, true);
@@ -10068,7 +10423,7 @@ function MultiSelect({
       window.removeEventListener("resize", updatePosition);
     };
   }, [open, updatePosition]);
-  useEffect12(() => {
+  useEffect14(() => {
     if (!open) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -10080,14 +10435,14 @@ function MultiSelect({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect12(() => {
+  useEffect14(() => {
     if (open && showSearch) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
   }, [open, showSearch]);
-  useEffect12(() => setActiveIdx(0), [query, open]);
-  const [fitCount, setFitCount] = useState17(selectedValues.length);
-  const [tick, setTick] = useState17(0);
+  useEffect14(() => setActiveIdx(0), [query, open]);
+  const [fitCount, setFitCount] = useState19(selectedValues.length);
+  const [tick, setTick] = useState19(0);
   useLayoutEffect3(() => {
     if (maxVisibleTags !== void 0) {
       setFitCount(Math.min(selectedValues.length, maxVisibleTags));
@@ -10114,7 +10469,7 @@ function MultiSelect({
     if (count < selectedValues.length && count > 0) count = Math.max(1, count - 1);
     setFitCount(count);
   }, [tick, selectedValues, maxVisibleTags]);
-  useEffect12(() => {
+  useEffect14(() => {
     if (typeof ResizeObserver === "undefined") return;
     const row = tagsRowRef.current;
     if (!row) return;
@@ -10186,7 +10541,7 @@ function MultiSelect({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx49("label", { className: "ods-multiselect__label", children: label }),
+        label && /* @__PURE__ */ jsx50("label", { className: "ods-multiselect__label", children: label }),
         /* @__PURE__ */ jsxs48(
           "div",
           {
@@ -10199,7 +10554,7 @@ function MultiSelect({
             onClick: () => !disabled && setOpen(true),
             children: [
               /* @__PURE__ */ jsxs48("div", { ref: tagsRowRef, className: "ods-multiselect__tags", children: [
-                /* @__PURE__ */ jsx49("div", { className: "ods-multiselect__measure", "aria-hidden": "true", children: selectedValues.map((val, i) => /* @__PURE__ */ jsxs48(
+                /* @__PURE__ */ jsx50("div", { className: "ods-multiselect__measure", "aria-hidden": "true", children: selectedValues.map((val, i) => /* @__PURE__ */ jsxs48(
                   "span",
                   {
                     ref: (el) => {
@@ -10207,17 +10562,17 @@ function MultiSelect({
                     },
                     className: "ods-multiselect__tag",
                     children: [
-                      getIcon(val) && /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__tag-icon", children: getIcon(val) }),
-                      /* @__PURE__ */ jsx49("span", { children: getLabel(val) }),
-                      /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__tag-remove-spacer", "aria-hidden": "true" })
+                      getIcon(val) && /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__tag-icon", children: getIcon(val) }),
+                      /* @__PURE__ */ jsx50("span", { children: getLabel(val) }),
+                      /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__tag-remove-spacer", "aria-hidden": "true" })
                     ]
                   },
                   val
                 )) }),
                 visibleChips.map((val) => /* @__PURE__ */ jsxs48("span", { className: "ods-multiselect__tag", children: [
-                  getIcon(val) && /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__tag-icon", children: getIcon(val) }),
-                  /* @__PURE__ */ jsx49("span", { children: getLabel(val) }),
-                  /* @__PURE__ */ jsx49(
+                  getIcon(val) && /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__tag-icon", children: getIcon(val) }),
+                  /* @__PURE__ */ jsx50("span", { children: getLabel(val) }),
+                  /* @__PURE__ */ jsx50(
                     "button",
                     {
                       type: "button",
@@ -10228,7 +10583,7 @@ function MultiSelect({
                       },
                       "aria-label": `Remove ${getLabel(val)}`,
                       tabIndex: -1,
-                      children: /* @__PURE__ */ jsx49("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx49(
+                      children: /* @__PURE__ */ jsx50("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx50(
                         "path",
                         {
                           d: "M3 3L9 9M9 3L3 9",
@@ -10251,9 +10606,9 @@ function MultiSelect({
                     ]
                   }
                 ),
-                selectedValues.length === 0 && /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__placeholder", children: placeholder })
+                selectedValues.length === 0 && /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__placeholder", children: placeholder })
               ] }),
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(
                 "svg",
                 {
                   width: "16",
@@ -10262,7 +10617,7 @@ function MultiSelect({
                   fill: "none",
                   "aria-hidden": "true",
                   className: cn("ods-multiselect__chevron", open && "ods-multiselect__chevron--open"),
-                  children: /* @__PURE__ */ jsx49(
+                  children: /* @__PURE__ */ jsx50(
                     "path",
                     {
                       d: "M4 6l4 4 4-4",
@@ -10274,7 +10629,7 @@ function MultiSelect({
                   )
                 }
               ),
-              selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx49(
+              selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx50(
                 "button",
                 {
                   type: "button",
@@ -10292,7 +10647,7 @@ function MultiSelect({
           }
         ),
         typeof document !== "undefined" && createPortal6(
-          /* @__PURE__ */ jsx49(AnimatePresence6, { children: open && /* @__PURE__ */ jsxs48(
+          /* @__PURE__ */ jsx50(AnimatePresence6, { children: open && /* @__PURE__ */ jsxs48(
             motion9.div,
             {
               ref: dropdownRef,
@@ -10312,8 +10667,8 @@ function MultiSelect({
               children: [
                 showSearch && /* @__PURE__ */ jsxs48("div", { className: "ods-multiselect__search", children: [
                   /* @__PURE__ */ jsxs48("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-                    /* @__PURE__ */ jsx49("circle", { cx: "6", cy: "6", r: "4.5", stroke: "currentColor", strokeWidth: "1.4" }),
-                    /* @__PURE__ */ jsx49(
+                    /* @__PURE__ */ jsx50("circle", { cx: "6", cy: "6", r: "4.5", stroke: "currentColor", strokeWidth: "1.4" }),
+                    /* @__PURE__ */ jsx50(
                       "path",
                       {
                         d: "m12 12-2.5-2.5",
@@ -10323,7 +10678,7 @@ function MultiSelect({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx50(
                     "input",
                     {
                       ref: searchRef,
@@ -10338,7 +10693,7 @@ function MultiSelect({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx49("div", { className: "ods-multiselect__list", children: availableOptions.length > 0 ? availableOptions.map((opt, idx) => /* @__PURE__ */ jsxs48(
+                /* @__PURE__ */ jsx50("div", { className: "ods-multiselect__list", children: availableOptions.length > 0 ? availableOptions.map((opt, idx) => /* @__PURE__ */ jsxs48(
                   "div",
                   {
                     className: cn(
@@ -10350,21 +10705,21 @@ function MultiSelect({
                     onClick: () => addValue(opt.value),
                     onMouseEnter: () => setActiveIdx(idx),
                     children: [
-                      opt.icon && /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__option-icon", children: opt.icon }),
+                      opt.icon && /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__option-icon", children: opt.icon }),
                       /* @__PURE__ */ jsxs48("span", { className: "ods-multiselect__option-text", children: [
-                        /* @__PURE__ */ jsx49("span", { children: opt.label }),
-                        opt.description && /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__option-desc", children: opt.description })
+                        /* @__PURE__ */ jsx50("span", { children: opt.label }),
+                        opt.description && /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__option-desc", children: opt.description })
                       ] })
                     ]
                   },
                   opt.value
-                )) : /* @__PURE__ */ jsx49("div", { className: "ods-multiselect__empty", children: "No results" }) })
+                )) : /* @__PURE__ */ jsx50("div", { className: "ods-multiselect__empty", children: "No results" }) })
               ]
             }
           ) }),
           document.body
         ),
-        error && errorMessage && /* @__PURE__ */ jsx49("span", { className: "ods-multiselect__error", children: errorMessage })
+        error && errorMessage && /* @__PURE__ */ jsx50("span", { className: "ods-multiselect__error", children: errorMessage })
       ]
     }
   );
@@ -10372,7 +10727,7 @@ function MultiSelect({
 
 // src/components/NumberInput/NumberInput.tsx
 import { useCallback as useCallback12 } from "react";
-import { jsx as jsx50, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs49 } from "react/jsx-runtime";
 function NumberInput({
   label,
   value,
@@ -10415,9 +10770,9 @@ function NumberInput({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx50("label", { className: "ods-num__label", children: label }),
+        label && /* @__PURE__ */ jsx51("label", { className: "ods-num__label", children: label }),
         /* @__PURE__ */ jsxs49("div", { className: "ods-num__field", children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "button",
             {
               type: "button",
@@ -10425,11 +10780,11 @@ function NumberInput({
               onClick: dec,
               disabled: disabled || typeof min === "number" && value <= min,
               "aria-label": "Decrease",
-              children: /* @__PURE__ */ jsx50("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx50("path", { d: "M3 7h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+              children: /* @__PURE__ */ jsx51("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx51("path", { d: "M3 7h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
             }
           ),
-          prefix && /* @__PURE__ */ jsx50("span", { className: "ods-num__prefix", children: prefix }),
-          /* @__PURE__ */ jsx50(
+          prefix && /* @__PURE__ */ jsx51("span", { className: "ods-num__prefix", children: prefix }),
+          /* @__PURE__ */ jsx51(
             "input",
             {
               type: "number",
@@ -10444,8 +10799,8 @@ function NumberInput({
               "aria-label": props["aria-label"]
             }
           ),
-          suffix && /* @__PURE__ */ jsx50("span", { className: "ods-num__suffix", children: suffix }),
-          /* @__PURE__ */ jsx50(
+          suffix && /* @__PURE__ */ jsx51("span", { className: "ods-num__suffix", children: suffix }),
+          /* @__PURE__ */ jsx51(
             "button",
             {
               type: "button",
@@ -10453,11 +10808,11 @@ function NumberInput({
               onClick: inc,
               disabled: disabled || typeof max === "number" && value >= max,
               "aria-label": "Increase",
-              children: /* @__PURE__ */ jsx50("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx50("path", { d: "M7 3v8M3 7h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+              children: /* @__PURE__ */ jsx51("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx51("path", { d: "M7 3v8M3 7h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
             }
           )
         ] }),
-        error ? /* @__PURE__ */ jsx50("div", { className: "ods-num__hint ods-num__hint--error", children: error }) : helperText ? /* @__PURE__ */ jsx50("div", { className: "ods-num__hint", children: helperText }) : null
+        error ? /* @__PURE__ */ jsx51("div", { className: "ods-num__hint ods-num__hint--error", children: error }) : helperText ? /* @__PURE__ */ jsx51("div", { className: "ods-num__hint", children: helperText }) : null
       ]
     }
   );
@@ -10466,9 +10821,9 @@ function NumberInput({
 // src/components/OTPInput/OTPInput.tsx
 import {
   useCallback as useCallback13,
-  useRef as useRef22
+  useRef as useRef24
 } from "react";
-import { jsx as jsx51, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs50 } from "react/jsx-runtime";
 function OTPInput({
   label,
   length = 6,
@@ -10482,7 +10837,7 @@ function OTPInput({
   autoFocus = false,
   className
 }) {
-  const refs = useRef22([]);
+  const refs = useRef24([]);
   const pattern = type === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
   const setCharAt = useCallback13(
     (idx, ch) => {
@@ -10521,8 +10876,8 @@ function OTPInput({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx51("label", { className: "ods-otp__label", children: label }),
-        /* @__PURE__ */ jsx51(
+        label && /* @__PURE__ */ jsx52("label", { className: "ods-otp__label", children: label }),
+        /* @__PURE__ */ jsx52(
           "div",
           {
             className: "ods-otp__row",
@@ -10530,7 +10885,7 @@ function OTPInput({
             "aria-label": typeof label === "string" ? label : "One-time passcode",
             children: Array.from({ length }).map((_, i) => {
               const ch = value[i] ?? "";
-              return /* @__PURE__ */ jsx51(
+              return /* @__PURE__ */ jsx52(
                 "input",
                 {
                   ref: (el) => {
@@ -10553,14 +10908,14 @@ function OTPInput({
             })
           }
         ),
-        error && /* @__PURE__ */ jsx51("div", { className: "ods-otp__hint", children: error })
+        error && /* @__PURE__ */ jsx52("div", { className: "ods-otp__hint", children: error })
       ]
     }
   );
 }
 
 // src/components/PageHeader/PageHeader.tsx
-import { jsx as jsx52, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs51 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -10571,9 +10926,9 @@ function PageHeader({
 }) {
   return /* @__PURE__ */ jsxs51("header", { className: cn("ods-page-header", className), children: [
     /* @__PURE__ */ jsxs51("div", { className: "ods-page-header__main", children: [
-      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx52("nav", { className: "ods-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((c, i) => /* @__PURE__ */ jsxs51("span", { className: "ods-page-header__crumb", children: [
-        c.href ? /* @__PURE__ */ jsx52("a", { href: c.href, onClick: c.onClick, children: c.label }) : c.onClick ? /* @__PURE__ */ jsx52("button", { type: "button", onClick: c.onClick, children: c.label }) : /* @__PURE__ */ jsx52("span", { children: c.label }),
-        i < breadcrumbs.length - 1 && /* @__PURE__ */ jsx52("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx52(
+      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx53("nav", { className: "ods-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((c, i) => /* @__PURE__ */ jsxs51("span", { className: "ods-page-header__crumb", children: [
+        c.href ? /* @__PURE__ */ jsx53("a", { href: c.href, onClick: c.onClick, children: c.label }) : c.onClick ? /* @__PURE__ */ jsx53("button", { type: "button", onClick: c.onClick, children: c.label }) : /* @__PURE__ */ jsx53("span", { children: c.label }),
+        i < breadcrumbs.length - 1 && /* @__PURE__ */ jsx53("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx53(
           "path",
           {
             d: "m4.5 3 3 3-3 3",
@@ -10584,17 +10939,17 @@ function PageHeader({
           }
         ) })
       ] }, i)) }),
-      /* @__PURE__ */ jsx52("h1", { className: "ods-page-header__title", children: title }),
-      description && /* @__PURE__ */ jsx52("p", { className: "ods-page-header__description", children: description }),
-      meta && /* @__PURE__ */ jsx52("div", { className: "ods-page-header__meta", children: meta })
+      /* @__PURE__ */ jsx53("h1", { className: "ods-page-header__title", children: title }),
+      description && /* @__PURE__ */ jsx53("p", { className: "ods-page-header__description", children: description }),
+      meta && /* @__PURE__ */ jsx53("div", { className: "ods-page-header__meta", children: meta })
     ] }),
-    actions && /* @__PURE__ */ jsx52("div", { className: "ods-page-header__actions", children: actions })
+    actions && /* @__PURE__ */ jsx53("div", { className: "ods-page-header__actions", children: actions })
   ] });
 }
 
 // src/components/PasswordInput/PasswordInput.tsx
-import { useState as useState18 } from "react";
-import { jsx as jsx53, jsxs as jsxs52 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { jsx as jsx54, jsxs as jsxs52 } from "react/jsx-runtime";
 var strengthLabels = ["Very weak", "Weak", "Fair", "Strong", "Very strong"];
 function PasswordInput({
   label,
@@ -10610,7 +10965,7 @@ function PasswordInput({
   className,
   ...rest
 }) {
-  const [shown, setShown] = useState18(false);
+  const [shown, setShown] = useState20(false);
   const handle = (e) => onChange?.(e.target.value);
   return /* @__PURE__ */ jsxs52(
     "div",
@@ -10623,10 +10978,10 @@ function PasswordInput({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx53("label", { className: "ods-pwd__label", children: label }),
+        label && /* @__PURE__ */ jsx54("label", { className: "ods-pwd__label", children: label }),
         /* @__PURE__ */ jsxs52("div", { className: "ods-pwd__field", children: [
-          leftIcon && /* @__PURE__ */ jsx53("span", { className: "ods-pwd__icon", "aria-hidden": "true", children: leftIcon }),
-          /* @__PURE__ */ jsx53(
+          leftIcon && /* @__PURE__ */ jsx54("span", { className: "ods-pwd__icon", "aria-hidden": "true", children: leftIcon }),
+          /* @__PURE__ */ jsx54(
             "input",
             {
               ...rest,
@@ -10637,7 +10992,7 @@ function PasswordInput({
               className: "ods-pwd__input"
             }
           ),
-          showToggle && /* @__PURE__ */ jsx53(
+          showToggle && /* @__PURE__ */ jsx54(
             "button",
             {
               type: "button",
@@ -10646,7 +11001,7 @@ function PasswordInput({
               "aria-label": shown ? "Hide password" : "Show password",
               disabled,
               children: shown ? /* @__PURE__ */ jsxs52("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "path",
                   {
                     d: "M2 8c1.5-2.6 3.6-4 6-4s4.5 1.4 6 4c-1.5 2.6-3.6 4-6 4s-4.5-1.4-6-4z",
@@ -10654,8 +11009,8 @@ function PasswordInput({
                     strokeWidth: "1.3"
                   }
                 ),
-                /* @__PURE__ */ jsx53("circle", { cx: "8", cy: "8", r: "1.8", stroke: "currentColor", strokeWidth: "1.3" }),
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54("circle", { cx: "8", cy: "8", r: "1.8", stroke: "currentColor", strokeWidth: "1.3" }),
+                /* @__PURE__ */ jsx54(
                   "path",
                   {
                     d: "M2 2l12 12",
@@ -10665,7 +11020,7 @@ function PasswordInput({
                   }
                 )
               ] }) : /* @__PURE__ */ jsxs52("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "path",
                   {
                     d: "M2 8c1.5-2.6 3.6-4 6-4s4.5 1.4 6 4c-1.5 2.6-3.6 4-6 4s-4.5-1.4-6-4z",
@@ -10673,24 +11028,24 @@ function PasswordInput({
                     strokeWidth: "1.3"
                   }
                 ),
-                /* @__PURE__ */ jsx53("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.3" })
+                /* @__PURE__ */ jsx54("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.3" })
               ] })
             }
           )
         ] }),
         typeof strength === "number" && /* @__PURE__ */ jsxs52("div", { className: "ods-pwd__strength", "data-level": strength, children: [
-          /* @__PURE__ */ jsx53("span", { className: "ods-pwd__meter", children: /* @__PURE__ */ jsx53("span", { className: cn("ods-pwd__bar", `ods-pwd__bar--${strength}`) }) }),
-          /* @__PURE__ */ jsx53("span", { className: "ods-pwd__strength-label", children: strengthLabels[strength] })
+          /* @__PURE__ */ jsx54("span", { className: "ods-pwd__meter", children: /* @__PURE__ */ jsx54("span", { className: cn("ods-pwd__bar", `ods-pwd__bar--${strength}`) }) }),
+          /* @__PURE__ */ jsx54("span", { className: "ods-pwd__strength-label", children: strengthLabels[strength] })
         ] }),
-        error ? /* @__PURE__ */ jsx53("div", { className: "ods-pwd__hint ods-pwd__hint--error", children: error }) : helperText ? /* @__PURE__ */ jsx53("div", { className: "ods-pwd__hint", children: helperText }) : null
+        error ? /* @__PURE__ */ jsx54("div", { className: "ods-pwd__hint ods-pwd__hint--error", children: error }) : helperText ? /* @__PURE__ */ jsx54("div", { className: "ods-pwd__hint", children: helperText }) : null
       ]
     }
   );
 }
 
 // src/components/PhoneInput/PhoneInput.tsx
-import { useState as useState19 } from "react";
-import { jsx as jsx54, jsxs as jsxs53 } from "react/jsx-runtime";
+import { useState as useState21 } from "react";
+import { jsx as jsx55, jsxs as jsxs53 } from "react/jsx-runtime";
 var DEFAULT_COUNTRIES = [
   { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
   { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
@@ -10715,7 +11070,7 @@ function PhoneInput({
   helperText,
   className
 }) {
-  const [open, setOpen] = useState19(false);
+  const [open, setOpen] = useState21(false);
   const country = countries.find((c) => c.code === countryCode) ?? countries[0];
   const onInput = (e) => onChange?.(e.target.value);
   return /* @__PURE__ */ jsxs53(
@@ -10729,7 +11084,7 @@ function PhoneInput({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx54("label", { className: "ods-phone__label", children: label }),
+        label && /* @__PURE__ */ jsx55("label", { className: "ods-phone__label", children: label }),
         /* @__PURE__ */ jsxs53("div", { className: "ods-phone__field", children: [
           /* @__PURE__ */ jsxs53(
             "button",
@@ -10741,9 +11096,9 @@ function PhoneInput({
               "aria-haspopup": "listbox",
               "aria-expanded": open,
               children: [
-                /* @__PURE__ */ jsx54("span", { className: "ods-phone__flag", "aria-hidden": "true", children: country.flag }),
-                /* @__PURE__ */ jsx54("span", { className: "ods-phone__dial", children: country.dialCode }),
-                /* @__PURE__ */ jsx54("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx54(
+                /* @__PURE__ */ jsx55("span", { className: "ods-phone__flag", "aria-hidden": "true", children: country.flag }),
+                /* @__PURE__ */ jsx55("span", { className: "ods-phone__dial", children: country.dialCode }),
+                /* @__PURE__ */ jsx55("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx55(
                   "path",
                   {
                     d: "M3 4.5L6 7.5L9 4.5",
@@ -10756,7 +11111,7 @@ function PhoneInput({
               ]
             }
           ),
-          /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx55(
             "input",
             {
               type: "tel",
@@ -10768,7 +11123,7 @@ function PhoneInput({
               "aria-label": typeof label === "string" ? `${label} number` : "Phone number"
             }
           ),
-          open && /* @__PURE__ */ jsx54("ul", { className: "ods-phone__menu", role: "listbox", "aria-label": "Country", children: countries.map((c) => /* @__PURE__ */ jsx54("li", { children: /* @__PURE__ */ jsxs53(
+          open && /* @__PURE__ */ jsx55("ul", { className: "ods-phone__menu", role: "listbox", "aria-label": "Country", children: countries.map((c) => /* @__PURE__ */ jsx55("li", { children: /* @__PURE__ */ jsxs53(
             "button",
             {
               type: "button",
@@ -10783,23 +11138,23 @@ function PhoneInput({
                 setOpen(false);
               },
               children: [
-                /* @__PURE__ */ jsx54("span", { className: "ods-phone__flag", "aria-hidden": "true", children: c.flag }),
-                /* @__PURE__ */ jsx54("span", { className: "ods-phone__menu-name", children: c.name }),
-                /* @__PURE__ */ jsx54("span", { className: "ods-phone__menu-dial", children: c.dialCode })
+                /* @__PURE__ */ jsx55("span", { className: "ods-phone__flag", "aria-hidden": "true", children: c.flag }),
+                /* @__PURE__ */ jsx55("span", { className: "ods-phone__menu-name", children: c.name }),
+                /* @__PURE__ */ jsx55("span", { className: "ods-phone__menu-dial", children: c.dialCode })
               ]
             }
           ) }, c.code)) })
         ] }),
-        error ? /* @__PURE__ */ jsx54("div", { className: "ods-phone__hint ods-phone__hint--error", children: error }) : helperText ? /* @__PURE__ */ jsx54("div", { className: "ods-phone__hint", children: helperText }) : null
+        error ? /* @__PURE__ */ jsx55("div", { className: "ods-phone__hint ods-phone__hint--error", children: error }) : helperText ? /* @__PURE__ */ jsx55("div", { className: "ods-phone__hint", children: helperText }) : null
       ]
     }
   );
 }
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback14, useEffect as useEffect13, useLayoutEffect as useLayoutEffect4, useRef as useRef23, useState as useState20 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useLayoutEffect as useLayoutEffect4, useRef as useRef25, useState as useState22 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment15, jsx as jsx55, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx56, jsxs as jsxs54 } from "react/jsx-runtime";
 function computePosition2(rect, popRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
@@ -10828,7 +11183,7 @@ function Popover({
   children,
   className
 }) {
-  const [openState, setOpenState] = useState20(defaultOpen);
+  const [openState, setOpenState] = useState22(defaultOpen);
   const open = openProp ?? openState;
   const setOpen = useCallback14(
     (v) => {
@@ -10837,9 +11192,9 @@ function Popover({
     },
     [openProp, onOpenChange]
   );
-  const triggerRef = useRef23(null);
-  const popRef = useRef23(null);
-  const [coords, setCoords] = useState20(null);
+  const triggerRef = useRef25(null);
+  const popRef = useRef25(null);
+  const [coords, setCoords] = useState22(null);
   const reposition = useCallback14(() => {
     if (!triggerRef.current || !popRef.current) return;
     const trigRect = triggerRef.current.getBoundingClientRect();
@@ -10852,7 +11207,7 @@ function Popover({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition, content]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!open) return;
     const onScroll = () => reposition();
     window.addEventListener("scroll", onScroll, true);
@@ -10862,7 +11217,7 @@ function Popover({
       window.removeEventListener("resize", onScroll);
     };
   }, [open, reposition]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!open || !closeOnClickOutside) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -10873,7 +11228,7 @@ function Popover({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open, closeOnClickOutside, setOpen]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -10881,7 +11236,7 @@ function Popover({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, closeOnEsc, setOpen]);
-  const triggerEl = /* @__PURE__ */ jsx55(
+  const triggerEl = /* @__PURE__ */ jsx56(
     "span",
     {
       ref: triggerRef,
@@ -10911,20 +11266,20 @@ function Popover({
         },
         children: [
           content,
-          arrow && /* @__PURE__ */ jsx55("span", { className: "ods-popover__arrow", "aria-hidden": "true" })
+          arrow && /* @__PURE__ */ jsx56("span", { className: "ods-popover__arrow", "aria-hidden": "true" })
         ]
       }
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs54(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs54(Fragment16, { children: [
     triggerEl,
     portal
   ] });
 }
 
 // src/components/PricingCard/PricingCard.tsx
-import { jsx as jsx56, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs55 } from "react/jsx-runtime";
 function PricingCard({
   name,
   description,
@@ -10938,17 +11293,17 @@ function PricingCard({
 }) {
   return /* @__PURE__ */ jsxs55("div", { className: cn("ods-pricing", highlighted && "ods-pricing--highlighted", className), children: [
     /* @__PURE__ */ jsxs55("div", { className: "ods-pricing__head", children: [
-      badge && /* @__PURE__ */ jsx56("span", { className: "ods-pricing__badge", children: badge }),
-      /* @__PURE__ */ jsx56("h3", { className: "ods-pricing__name", children: name }),
-      description && /* @__PURE__ */ jsx56("p", { className: "ods-pricing__desc", children: description })
+      badge && /* @__PURE__ */ jsx57("span", { className: "ods-pricing__badge", children: badge }),
+      /* @__PURE__ */ jsx57("h3", { className: "ods-pricing__name", children: name }),
+      description && /* @__PURE__ */ jsx57("p", { className: "ods-pricing__desc", children: description })
     ] }),
     /* @__PURE__ */ jsxs55("div", { className: "ods-pricing__price", children: [
-      /* @__PURE__ */ jsx56("span", { className: "ods-pricing__amount", children: price }),
-      pricePeriod && /* @__PURE__ */ jsx56("span", { className: "ods-pricing__period", children: pricePeriod })
+      /* @__PURE__ */ jsx57("span", { className: "ods-pricing__amount", children: price }),
+      pricePeriod && /* @__PURE__ */ jsx57("span", { className: "ods-pricing__period", children: pricePeriod })
     ] }),
-    /* @__PURE__ */ jsx56("hr", { className: "ods-pricing__sep" }),
-    /* @__PURE__ */ jsx56("ul", { className: "ods-pricing__features", children: features.map((f, i) => /* @__PURE__ */ jsxs55("li", { className: "ods-pricing__feature", children: [
-      /* @__PURE__ */ jsx56("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57("hr", { className: "ods-pricing__sep" }),
+    /* @__PURE__ */ jsx57("ul", { className: "ods-pricing__features", children: features.map((f, i) => /* @__PURE__ */ jsxs55("li", { className: "ods-pricing__feature", children: [
+      /* @__PURE__ */ jsx57("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx57(
         "path",
         {
           d: "m3 8.5 3 3 7-7",
@@ -10958,14 +11313,14 @@ function PricingCard({
           strokeLinejoin: "round"
         }
       ) }),
-      /* @__PURE__ */ jsx56("span", { children: f })
+      /* @__PURE__ */ jsx57("span", { children: f })
     ] }, i)) }),
-    cta && /* @__PURE__ */ jsx56("div", { className: "ods-pricing__cta", children: cta })
+    cta && /* @__PURE__ */ jsx57("div", { className: "ods-pricing__cta", children: cta })
   ] });
 }
 
 // src/components/ProductCard/ProductCard.tsx
-import { jsx as jsx57, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs56 } from "react/jsx-runtime";
 function ProductCard({
   image,
   tag,
@@ -10977,22 +11332,22 @@ function ProductCard({
   className
 }) {
   return /* @__PURE__ */ jsxs56("div", { className: cn("ods-product-card", className), children: [
-    /* @__PURE__ */ jsx57("div", { className: "ods-product-card__image", children: image }),
-    tag && /* @__PURE__ */ jsx57("span", { className: "ods-product-card__tag", children: tag }),
-    /* @__PURE__ */ jsx57("div", { className: "ods-product-card__name", children: name }),
-    description && /* @__PURE__ */ jsx57("div", { className: "ods-product-card__desc", children: description }),
+    /* @__PURE__ */ jsx58("div", { className: "ods-product-card__image", children: image }),
+    tag && /* @__PURE__ */ jsx58("span", { className: "ods-product-card__tag", children: tag }),
+    /* @__PURE__ */ jsx58("div", { className: "ods-product-card__name", children: name }),
+    description && /* @__PURE__ */ jsx58("div", { className: "ods-product-card__desc", children: description }),
     /* @__PURE__ */ jsxs56("div", { className: "ods-product-card__footer", children: [
       /* @__PURE__ */ jsxs56("div", { className: "ods-product-card__price-group", children: [
-        /* @__PURE__ */ jsx57("span", { className: "ods-product-card__price", children: price }),
-        originalPrice && /* @__PURE__ */ jsx57("span", { className: "ods-product-card__strike", children: originalPrice })
+        /* @__PURE__ */ jsx58("span", { className: "ods-product-card__price", children: price }),
+        originalPrice && /* @__PURE__ */ jsx58("span", { className: "ods-product-card__strike", children: originalPrice })
       ] }),
-      action && /* @__PURE__ */ jsx57("div", { className: "ods-product-card__action", children: action })
+      action && /* @__PURE__ */ jsx58("div", { className: "ods-product-card__action", children: action })
     ] })
   ] });
 }
 
 // src/components/ProgressRing/ProgressRing.tsx
-import { jsx as jsx58, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs57 } from "react/jsx-runtime";
 var VARIANT_COLORS = {
   primary: "#6c5ce7",
   success: "#16a34a",
@@ -11033,7 +11388,7 @@ function ProgressRing({
       "aria-valuenow": indeterminate ? void 0 : value,
       children: [
         /* @__PURE__ */ jsxs57("svg", { className: "ods-progress-ring__svg", width: size, height: size, children: [
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             "circle",
             {
               className: "ods-progress-ring__track",
@@ -11045,7 +11400,7 @@ function ProgressRing({
               strokeWidth
             }
           ),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             "circle",
             {
               className: "ods-progress-ring__fill",
@@ -11062,7 +11417,7 @@ function ProgressRing({
             }
           )
         ] }),
-        !indeterminate && (label || showValue) && /* @__PURE__ */ jsx58("div", { className: "ods-progress-ring__center", children: label ?? /* @__PURE__ */ jsxs57("span", { className: "ods-progress-ring__value", children: [
+        !indeterminate && (label || showValue) && /* @__PURE__ */ jsx59("div", { className: "ods-progress-ring__center", children: label ?? /* @__PURE__ */ jsxs57("span", { className: "ods-progress-ring__value", children: [
           Math.round(pct * 100),
           "%"
         ] }) })
@@ -11074,12 +11429,12 @@ function ProgressRing({
 // src/components/PromptInput/PromptInput.tsx
 import {
   useCallback as useCallback15,
-  useEffect as useEffect14,
-  useRef as useRef24,
-  useState as useState21
+  useEffect as useEffect16,
+  useRef as useRef26,
+  useState as useState23
 } from "react";
-import { jsx as jsx59, jsxs as jsxs58 } from "react/jsx-runtime";
-var ATTACH_GLYPH = /* @__PURE__ */ jsx59("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(
+import { jsx as jsx60, jsxs as jsxs58 } from "react/jsx-runtime";
+var ATTACH_GLYPH = /* @__PURE__ */ jsx60("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx60(
   "path",
   {
     d: "M10.5 7 6.4 11.1a2 2 0 1 1-2.8-2.8L8.3 3.6a3 3 0 0 1 4.2 4.2l-5.6 5.6",
@@ -11089,7 +11444,7 @@ var ATTACH_GLYPH = /* @__PURE__ */ jsx59("svg", { width: "14", height: "14", vie
     strokeLinejoin: "round"
   }
 ) });
-var SEND_GLYPH = /* @__PURE__ */ jsx59("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(
+var SEND_GLYPH = /* @__PURE__ */ jsx60("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx60(
   "path",
   {
     d: "m2 7 10-5-4 10-1.5-3.5L2 7Z",
@@ -11100,7 +11455,7 @@ var SEND_GLYPH = /* @__PURE__ */ jsx59("svg", { width: "14", height: "14", viewB
     fillOpacity: "0.15"
   }
 ) });
-var STOP_GLYPH = /* @__PURE__ */ jsx59("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx59("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }) });
+var STOP_GLYPH = /* @__PURE__ */ jsx60("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx60("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }) });
 function PromptInput({
   value,
   defaultValue = "",
@@ -11128,14 +11483,14 @@ function PromptInput({
   className,
   ariaLabel = "Prompt"
 }) {
-  const taRef = useRef24(null);
-  const [internal, setInternal] = useState21(defaultValue);
+  const taRef = useRef26(null);
+  const [internal, setInternal] = useState23(defaultValue);
   const v = value ?? internal;
   const isControlled = value !== void 0;
-  const [suggestionsOpen, setSuggestionsOpen] = useState21(false);
-  const [suggestionIndex, setSuggestionIndex] = useState21(0);
-  const [isDragOver, setIsDragOver] = useState21(false);
-  const [historyIdx, setHistoryIdx] = useState21(null);
+  const [suggestionsOpen, setSuggestionsOpen] = useState23(false);
+  const [suggestionIndex, setSuggestionIndex] = useState23(0);
+  const [isDragOver, setIsDragOver] = useState23(false);
+  const [historyIdx, setHistoryIdx] = useState23(null);
   const setValue = useCallback15(
     (next) => {
       if (!isControlled) setInternal(next);
@@ -11143,7 +11498,7 @@ function PromptInput({
     },
     [isControlled, onChange]
   );
-  useEffect14(() => {
+  useEffect16(() => {
     const el = taRef.current;
     if (!el) return;
     const computed = window.getComputedStyle(el);
@@ -11298,7 +11653,7 @@ function PromptInput({
       onDrop: handleDrop,
       children: [
         isDragOver && /* @__PURE__ */ jsxs58("div", { className: "ods-prompt-input__drop-overlay", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx59("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx60("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx60(
             "path",
             {
               d: "M10 3v9M6 7l4-4 4 4M3 15h14",
@@ -11308,22 +11663,22 @@ function PromptInput({
               strokeLinejoin: "round"
             }
           ) }),
-          /* @__PURE__ */ jsx59("span", { children: "Drop files to attach" })
+          /* @__PURE__ */ jsx60("span", { children: "Drop files to attach" })
         ] }),
-        attachments.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ods-prompt-input__attachments", children: attachments.map((a) => {
+        attachments.length > 0 && /* @__PURE__ */ jsx60("div", { className: "ods-prompt-input__attachments", children: attachments.map((a) => {
           const safePreview = sanitizeImageUrl(a.previewUrl);
           return /* @__PURE__ */ jsxs58("span", { className: "ods-prompt-input__chip", title: a.name, children: [
-            /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__chip-glyph", "aria-hidden": "true", children: safePreview ? /* @__PURE__ */ jsx59("img", { src: safePreview, alt: "", className: "ods-prompt-input__chip-thumb" }) : ATTACH_GLYPH }),
-            /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__chip-label", children: a.name }),
-            a.size != null && /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__chip-size", children: fmtSize2(a.size) }),
-            onRemoveAttachment && /* @__PURE__ */ jsx59(
+            /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__chip-glyph", "aria-hidden": "true", children: safePreview ? /* @__PURE__ */ jsx60("img", { src: safePreview, alt: "", className: "ods-prompt-input__chip-thumb" }) : ATTACH_GLYPH }),
+            /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__chip-label", children: a.name }),
+            a.size != null && /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__chip-size", children: fmtSize2(a.size) }),
+            onRemoveAttachment && /* @__PURE__ */ jsx60(
               "button",
               {
                 type: "button",
                 className: "ods-prompt-input__chip-remove",
                 onClick: () => onRemoveAttachment(a.id),
                 "aria-label": `Remove ${a.name}`,
-                children: /* @__PURE__ */ jsx59("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(
+                children: /* @__PURE__ */ jsx60("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx60(
                   "path",
                   {
                     d: "m2.5 2.5 5 5M7.5 2.5l-5 5",
@@ -11337,7 +11692,7 @@ function PromptInput({
           ] }, a.id);
         }) }),
         /* @__PURE__ */ jsxs58("div", { className: "ods-prompt-input__field", children: [
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx60(
             "textarea",
             {
               ref: taRef,
@@ -11358,7 +11713,7 @@ function PromptInput({
               maxLength
             }
           ),
-          visibleSuggestions.length > 0 && /* @__PURE__ */ jsx59("ul", { className: "ods-prompt-input__suggestions", role: "listbox", children: visibleSuggestions.map((s, i) => /* @__PURE__ */ jsxs58(
+          visibleSuggestions.length > 0 && /* @__PURE__ */ jsx60("ul", { className: "ods-prompt-input__suggestions", role: "listbox", children: visibleSuggestions.map((s, i) => /* @__PURE__ */ jsxs58(
             "li",
             {
               role: "option",
@@ -11376,10 +11731,10 @@ function PromptInput({
               },
               onMouseEnter: () => setSuggestionIndex(i),
               children: [
-                s.icon && /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__suggestion-icon", children: s.icon }),
+                s.icon && /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__suggestion-icon", children: s.icon }),
                 /* @__PURE__ */ jsxs58("span", { className: "ods-prompt-input__suggestion-text", children: [
-                  /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__suggestion-label", children: s.label }),
-                  s.description && /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__suggestion-desc", children: s.description })
+                  /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__suggestion-label", children: s.label }),
+                  s.description && /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__suggestion-desc", children: s.description })
                 ] })
               ]
             },
@@ -11387,9 +11742,9 @@ function PromptInput({
           )) })
         ] }),
         /* @__PURE__ */ jsxs58("div", { className: "ods-prompt-input__toolbar", children: [
-          /* @__PURE__ */ jsx59("div", { className: "ods-prompt-input__toolbar-left", children: leftActions }),
+          /* @__PURE__ */ jsx60("div", { className: "ods-prompt-input__toolbar-left", children: leftActions }),
           /* @__PURE__ */ jsxs58("div", { className: "ods-prompt-input__toolbar-right", children: [
-            showCharCounter && /* @__PURE__ */ jsx59(
+            showCharCounter && /* @__PURE__ */ jsx60(
               "span",
               {
                 className: cn(
@@ -11409,10 +11764,10 @@ function PromptInput({
                 "aria-label": "Stop generating",
                 children: [
                   STOP_GLYPH,
-                  /* @__PURE__ */ jsx59("span", { children: "Stop" })
+                  /* @__PURE__ */ jsx60("span", { children: "Stop" })
                 ]
               }
-            ) : showSend && /* @__PURE__ */ jsx59(
+            ) : showSend && /* @__PURE__ */ jsx60(
               "button",
               {
                 type: "button",
@@ -11428,7 +11783,7 @@ function PromptInput({
             )
           ] })
         ] }),
-        quickActions && quickActions.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ods-prompt-input__quick-actions", role: "toolbar", "aria-label": "Quick prompts", children: quickActions.map((q2) => /* @__PURE__ */ jsxs58(
+        quickActions && quickActions.length > 0 && /* @__PURE__ */ jsx60("div", { className: "ods-prompt-input__quick-actions", role: "toolbar", "aria-label": "Quick prompts", children: quickActions.map((q2) => /* @__PURE__ */ jsxs58(
           "button",
           {
             type: "button",
@@ -11439,20 +11794,20 @@ function PromptInput({
               requestAnimationFrame(() => taRef.current?.focus());
             },
             children: [
-              q2.icon && /* @__PURE__ */ jsx59("span", { className: "ods-prompt-input__quick-action-icon", children: q2.icon }),
-              /* @__PURE__ */ jsx59("span", { children: q2.label })
+              q2.icon && /* @__PURE__ */ jsx60("span", { className: "ods-prompt-input__quick-action-icon", children: q2.icon }),
+              /* @__PURE__ */ jsx60("span", { children: q2.label })
             ]
           },
           q2.id
         )) }),
-        hint && /* @__PURE__ */ jsx59("div", { className: "ods-prompt-input__hint", children: hint })
+        hint && /* @__PURE__ */ jsx60("div", { className: "ods-prompt-input__hint", children: hint })
       ]
     }
   );
 }
 
 // src/components/Quote/Quote.tsx
-import { jsx as jsx60, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs59 } from "react/jsx-runtime";
 function Quote({
   variant = "default",
   author,
@@ -11466,11 +11821,11 @@ function Quote({
     {
       className: cn("ods-quote", `ods-quote--${variant}`, `ods-quote--${size}`, className),
       children: [
-        /* @__PURE__ */ jsx60("span", { className: "ods-quote__mark", "aria-hidden": "true", children: '"' }),
-        /* @__PURE__ */ jsx60("p", { className: "ods-quote__text", children }),
+        /* @__PURE__ */ jsx61("span", { className: "ods-quote__mark", "aria-hidden": "true", children: '"' }),
+        /* @__PURE__ */ jsx61("p", { className: "ods-quote__text", children }),
         (author || attribution) && /* @__PURE__ */ jsxs59("footer", { className: "ods-quote__footer", children: [
-          author && /* @__PURE__ */ jsx60("cite", { className: "ods-quote__author", children: author }),
-          attribution && /* @__PURE__ */ jsx60("span", { className: "ods-quote__attribution", children: attribution })
+          author && /* @__PURE__ */ jsx61("cite", { className: "ods-quote__author", children: author }),
+          attribution && /* @__PURE__ */ jsx61("span", { className: "ods-quote__attribution", children: attribution })
         ] })
       ]
     }
@@ -11478,13 +11833,13 @@ function Quote({
 }
 
 // src/components/Radio/Radio.tsx
-import { useRef as useRef26 } from "react";
+import { useRef as useRef28 } from "react";
 import { useRadio } from "react-aria";
 
 // src/components/Radio/RadioGroup.tsx
-import { createContext, useContext, useRef as useRef25 } from "react";
+import { createContext, useContext, useRef as useRef27 } from "react";
 import { useRadioGroup } from "react-aria";
-import { jsx as jsx61, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs60 } from "react/jsx-runtime";
 var RadioGroupContext = createContext(null);
 function useRadioGroupContext() {
   const context = useContext(RadioGroupContext);
@@ -11523,7 +11878,7 @@ function RadioGroup({
     "aria-describedby": ariaDescribedBy
   };
   const state = $384704861d32dbed$export$bca9d026f8e704eb(ariaProps);
-  const ref = useRef25(null);
+  const ref = useRef27(null);
   const { radioGroupProps, labelProps } = useRadioGroup(ariaProps, state);
   return /* @__PURE__ */ jsxs60(
     "div",
@@ -11538,18 +11893,18 @@ function RadioGroup({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx61("span", { ...labelProps, className: "ods-radio-group__label", children: label }),
-        /* @__PURE__ */ jsx61(RadioGroupContext.Provider, { value: state, children: /* @__PURE__ */ jsx61("div", { className: "ods-radio-group__items", children }) })
+        label && /* @__PURE__ */ jsx62("span", { ...labelProps, className: "ods-radio-group__label", children: label }),
+        /* @__PURE__ */ jsx62(RadioGroupContext.Provider, { value: state, children: /* @__PURE__ */ jsx62("div", { className: "ods-radio-group__items", children }) })
       ]
     }
   );
 }
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx62, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs61 } from "react/jsx-runtime";
 function Radio({ value, label, disabled = false, className, ...props }) {
   const state = useRadioGroupContext();
-  const ref = useRef26(null);
+  const ref = useRef28(null);
   const ariaNameProps = resolveAccessibleName({
     label,
     ariaLabel: props["aria-label"],
@@ -11585,7 +11940,7 @@ function Radio({ value, label, disabled = false, className, ...props }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           "input",
           {
             ...passthroughProps,
@@ -11594,15 +11949,15 @@ function Radio({ value, label, disabled = false, className, ...props }) {
             className: "ods-radio__input"
           }
         ),
-        /* @__PURE__ */ jsx62("div", { className: "ods-radio__circle", "aria-hidden": "true", children: /* @__PURE__ */ jsx62("div", { className: cn("ods-radio__dot", isSelected && "ods-radio__dot--visible") }) }),
-        label && /* @__PURE__ */ jsx62("span", { className: "ods-radio__label", children: label })
+        /* @__PURE__ */ jsx63("div", { className: "ods-radio__circle", "aria-hidden": "true", children: /* @__PURE__ */ jsx63("div", { className: cn("ods-radio__dot", isSelected && "ods-radio__dot--visible") }) }),
+        label && /* @__PURE__ */ jsx63("span", { className: "ods-radio__label", children: label })
       ]
     }
   );
 }
 
 // src/components/RangeSlider/RangeSlider.tsx
-import { jsx as jsx63, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs62 } from "react/jsx-runtime";
 function RangeSlider({
   label,
   value,
@@ -11640,7 +11995,7 @@ function RangeSlider({
       ),
       children: [
         (label || showValue) && /* @__PURE__ */ jsxs62("div", { className: "ods-range-slider__head", children: [
-          label && /* @__PURE__ */ jsx63("span", { className: "ods-range-slider__label", children: label }),
+          label && /* @__PURE__ */ jsx64("span", { className: "ods-range-slider__label", children: label }),
           showValue && /* @__PURE__ */ jsxs62("span", { className: "ods-range-slider__value", children: [
             fmt(lo),
             " \u2013 ",
@@ -11648,14 +12003,14 @@ function RangeSlider({
           ] })
         ] }),
         /* @__PURE__ */ jsxs62("div", { className: "ods-range-slider__track", children: [
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             "span",
             {
               className: "ods-range-slider__fill",
               style: { left: `${loPct}%`, right: `${100 - hiPct}%` }
             }
           ),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             "input",
             {
               type: "range",
@@ -11669,7 +12024,7 @@ function RangeSlider({
               "aria-label": "Minimum"
             }
           ),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             "input",
             {
               type: "range",
@@ -11690,16 +12045,16 @@ function RangeSlider({
 }
 
 // src/components/Rating/Rating.tsx
-import { useState as useState22 } from "react";
-import { jsx as jsx64, jsxs as jsxs63 } from "react/jsx-runtime";
+import { useState as useState24 } from "react";
+import { jsx as jsx65, jsxs as jsxs63 } from "react/jsx-runtime";
 function StarIcon({ fill }) {
   const pathId = `r-${Math.random().toString(36).slice(2)}`;
   return /* @__PURE__ */ jsxs63("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx64("defs", { children: /* @__PURE__ */ jsxs63("linearGradient", { id: pathId, x1: "0", x2: "1", y1: "0", y2: "0", children: [
-      /* @__PURE__ */ jsx64("stop", { offset: `${fill * 100}%`, stopColor: "#f59e0b" }),
-      /* @__PURE__ */ jsx64("stop", { offset: `${fill * 100}%`, stopColor: "#e1e5eb" })
+    /* @__PURE__ */ jsx65("defs", { children: /* @__PURE__ */ jsxs63("linearGradient", { id: pathId, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+      /* @__PURE__ */ jsx65("stop", { offset: `${fill * 100}%`, stopColor: "#f59e0b" }),
+      /* @__PURE__ */ jsx65("stop", { offset: `${fill * 100}%`, stopColor: "#e1e5eb" })
     ] }) }),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       "path",
       {
         d: "M11 2l2.6 5.4 6 .9-4.3 4.2 1 6-5.3-2.8-5.3 2.8 1-6L2 8.3l6-.9L11 2z",
@@ -11714,11 +12069,11 @@ function StarIcon({ fill }) {
 function HeartIcon({ fill }) {
   const pathId = `h-${Math.random().toString(36).slice(2)}`;
   return /* @__PURE__ */ jsxs63("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx64("defs", { children: /* @__PURE__ */ jsxs63("linearGradient", { id: pathId, x1: "0", x2: "1", y1: "0", y2: "0", children: [
-      /* @__PURE__ */ jsx64("stop", { offset: `${fill * 100}%`, stopColor: "#ec4899" }),
-      /* @__PURE__ */ jsx64("stop", { offset: `${fill * 100}%`, stopColor: "#e1e5eb" })
+    /* @__PURE__ */ jsx65("defs", { children: /* @__PURE__ */ jsxs63("linearGradient", { id: pathId, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+      /* @__PURE__ */ jsx65("stop", { offset: `${fill * 100}%`, stopColor: "#ec4899" }),
+      /* @__PURE__ */ jsx65("stop", { offset: `${fill * 100}%`, stopColor: "#e1e5eb" })
     ] }) }),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       "path",
       {
         d: "M11 18s-6-4-6-8.5A3.5 3.5 0 0 1 11 6a3.5 3.5 0 0 1 6 3.5c0 4.5-6 8.5-6 8.5z",
@@ -11743,7 +12098,7 @@ function Rating({
   icon = "star",
   className
 }) {
-  const [hover, setHover] = useState22(null);
+  const [hover, setHover] = useState24(null);
   const display = hover ?? value;
   const interactive = !readOnly && !disabled;
   const Icon = icon === "heart" ? HeartIcon : StarIcon;
@@ -11777,7 +12132,7 @@ function Rating({
               onMouseLeave: () => setHover(null),
               className: "ods-rating__item",
               children: [
-                /* @__PURE__ */ jsx64(
+                /* @__PURE__ */ jsx65(
                   "span",
                   {
                     className: "ods-rating__half ods-rating__half--left",
@@ -11785,7 +12140,7 @@ function Rating({
                     onClick: () => click(i, allowHalf)
                   }
                 ),
-                /* @__PURE__ */ jsx64(
+                /* @__PURE__ */ jsx65(
                   "span",
                   {
                     className: "ods-rating__half ods-rating__half--right",
@@ -11793,13 +12148,13 @@ function Rating({
                     onClick: () => click(i, false)
                   }
                 ),
-                /* @__PURE__ */ jsx64(Icon, { fill })
+                /* @__PURE__ */ jsx65(Icon, { fill })
               ]
             },
             i
           );
         }),
-        showLabel && /* @__PURE__ */ jsx64("span", { className: "ods-rating__label", children: typeof label === "string" || label ? label : `${value.toFixed(allowHalf ? 1 : 0)}/${max}` })
+        showLabel && /* @__PURE__ */ jsx65("span", { className: "ods-rating__label", children: typeof label === "string" || label ? label : `${value.toFixed(allowHalf ? 1 : 0)}/${max}` })
       ]
     }
   );
@@ -11808,11 +12163,11 @@ function Rating({
 // src/components/Resizable/Resizable.tsx
 import {
   useCallback as useCallback16,
-  useEffect as useEffect15,
-  useRef as useRef27,
-  useState as useState23
+  useEffect as useEffect17,
+  useRef as useRef29,
+  useState as useState25
 } from "react";
-import { jsx as jsx65, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs64 } from "react/jsx-runtime";
 function Resizable({
   direction = "horizontal",
   children,
@@ -11826,8 +12181,8 @@ function Resizable({
   className,
   ariaLabel = "Resize panels"
 }) {
-  const wrapRef = useRef27(null);
-  const [internalSplit, setInternalSplit] = useState23(() => {
+  const wrapRef = useRef29(null);
+  const [internalSplit, setInternalSplit] = useState25(() => {
     if (typeof window === "undefined" || !storageKey) return null;
     const stored = window.localStorage.getItem(storageKey);
     if (stored != null) {
@@ -11836,20 +12191,20 @@ function Resizable({
     }
     return null;
   });
-  const draggingRef = useRef27(false);
-  const [isDragging, setDragging] = useState23(false);
+  const draggingRef = useRef29(false);
+  const [isDragging, setDragging] = useState25(false);
   const computeFromDefault = useCallback16(() => {
     const el = wrapRef.current;
     if (!el) return 240;
     const total = direction === "horizontal" ? el.offsetWidth : el.offsetHeight;
     return defaultSplit > 0 && defaultSplit < 1 ? total * defaultSplit : defaultSplit;
   }, [direction, defaultSplit]);
-  const [split, setSplit] = useState23(() => {
+  const [split, setSplit] = useState25(() => {
     if (splitProp != null) return splitProp;
     if (internalSplit != null) return internalSplit;
     return defaultSplit > 0 && defaultSplit < 1 ? 0 : defaultSplit;
   });
-  useEffect15(() => {
+  useEffect17(() => {
     if (splitProp != null) {
       setSplit(splitProp);
       return;
@@ -11882,7 +12237,7 @@ function Resizable({
     draggingRef.current = true;
     setDragging(true);
   };
-  useEffect15(() => {
+  useEffect17(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const el = wrapRef.current;
@@ -11941,7 +12296,7 @@ function Resizable({
       ),
       style,
       children: [
-        /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66(
           "div",
           {
             className: "ods-resizable__panel ods-resizable__panel--first",
@@ -11949,7 +12304,7 @@ function Resizable({
             children: children[0]
           }
         ),
-        /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66(
           "div",
           {
             role: "separator",
@@ -11961,10 +12316,10 @@ function Resizable({
             className: "ods-resizable__handle",
             onMouseDown,
             onKeyDown,
-            children: /* @__PURE__ */ jsx65("span", { className: "ods-resizable__grip", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx66("span", { className: "ods-resizable__grip", "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx65("div", { className: "ods-resizable__panel ods-resizable__panel--second", children: children[1] })
+        /* @__PURE__ */ jsx66("div", { className: "ods-resizable__panel ods-resizable__panel--second", children: children[1] })
       ]
     }
   );
@@ -11978,18 +12333,18 @@ function ResizablePanel({
   children,
   className
 }) {
-  const [internal, setInternal] = useState23(sizeProp ?? defaultSize);
+  const [internal, setInternal] = useState25(sizeProp ?? defaultSize);
   const size = sizeProp ?? internal;
-  const draggingRef = useRef27(false);
-  const [isDragging, setDragging] = useState23(false);
-  const startRef = useRef27({ x: 0, size });
+  const draggingRef = useRef29(false);
+  const [isDragging, setDragging] = useState25(false);
+  const startRef = useRef29({ x: 0, size });
   const onMouseDown = (e) => {
     e.preventDefault();
     draggingRef.current = true;
     setDragging(true);
     startRef.current = { x: e.clientX, size };
   };
-  useEffect15(() => {
+  useEffect17(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const dx = e.clientX - startRef.current.x;
@@ -12018,8 +12373,8 @@ function ResizablePanel({
       ),
       style: { width: size },
       children: [
-        /* @__PURE__ */ jsx65("div", { className: "ods-resizable-panel__content", children }),
-        /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66("div", { className: "ods-resizable-panel__content", children }),
+        /* @__PURE__ */ jsx66(
           "div",
           {
             role: "separator",
@@ -12027,7 +12382,7 @@ function ResizablePanel({
             "aria-label": "Resize panel",
             className: "ods-resizable-panel__handle",
             onMouseDown,
-            children: /* @__PURE__ */ jsx65("span", { className: "ods-resizable-panel__grip", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx66("span", { className: "ods-resizable-panel__grip", "aria-hidden": "true" })
           }
         )
       ]
@@ -12036,7 +12391,7 @@ function ResizablePanel({
 }
 
 // src/components/Ribbon/Ribbon.tsx
-import { jsx as jsx66, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs65 } from "react/jsx-runtime";
 function Ribbon({
   variant = "primary",
   icon,
@@ -12045,13 +12400,13 @@ function Ribbon({
   className
 }) {
   return /* @__PURE__ */ jsxs65("span", { className: cn("ods-ribbon", `ods-ribbon--${variant}`, `ods-ribbon--${size}`, className), children: [
-    icon && /* @__PURE__ */ jsx66("span", { className: "ods-ribbon__icon", "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsx66("span", { className: "ods-ribbon__label", children })
+    icon && /* @__PURE__ */ jsx67("span", { className: "ods-ribbon__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx67("span", { className: "ods-ribbon__label", children })
   ] });
 }
 
 // src/components/SettingsRow/SettingsRow.tsx
-import { jsx as jsx67, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs66 } from "react/jsx-runtime";
 function SettingsRow({
   title,
   description,
@@ -12061,20 +12416,20 @@ function SettingsRow({
   className
 }) {
   return /* @__PURE__ */ jsxs66("div", { className: cn("ods-settings-row", `ods-settings-row--${align}`, className), children: [
-    icon && /* @__PURE__ */ jsx67("span", { className: "ods-settings-row__icon", "aria-hidden": "true", children: icon }),
+    icon && /* @__PURE__ */ jsx68("span", { className: "ods-settings-row__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsxs66("div", { className: "ods-settings-row__body", children: [
-      /* @__PURE__ */ jsx67("div", { className: "ods-settings-row__title", children: title }),
-      description && /* @__PURE__ */ jsx67("div", { className: "ods-settings-row__desc", children: description })
+      /* @__PURE__ */ jsx68("div", { className: "ods-settings-row__title", children: title }),
+      description && /* @__PURE__ */ jsx68("div", { className: "ods-settings-row__desc", children: description })
     ] }),
-    control && /* @__PURE__ */ jsx67("div", { className: "ods-settings-row__control", children: control })
+    control && /* @__PURE__ */ jsx68("div", { className: "ods-settings-row__control", children: control })
   ] });
 }
 
 // src/components/Sheet/Sheet.tsx
 import { AnimatePresence as AnimatePresence7, motion as motion10 } from "framer-motion";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
-import { Fragment as Fragment16, jsx as jsx68, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx69, 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%" } },
@@ -12107,7 +12462,7 @@ function Sheet({
   dragHandle = true,
   className
 }) {
-  useEffect16(() => {
+  useEffect18(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -12118,8 +12473,8 @@ function Sheet({
   const variant = slideVariants[side];
   const resolved = resolveSize(side, size);
   const isVertical = side === "left" || side === "right";
-  const content = /* @__PURE__ */ jsx68(AnimatePresence7, { children: open && /* @__PURE__ */ jsxs67(Fragment16, { children: [
-    /* @__PURE__ */ jsx68(
+  const content = /* @__PURE__ */ jsx69(AnimatePresence7, { children: open && /* @__PURE__ */ jsxs67(Fragment17, { children: [
+    /* @__PURE__ */ jsx69(
       motion10.div,
       {
         className: "ods-sheet__backdrop",
@@ -12143,13 +12498,13 @@ function Sheet({
         exit: variant.exit,
         transition: { type: "tween", ease: [0.32, 0.72, 0, 1], duration: 0.28 },
         children: [
-          (side === "bottom" || side === "top") && dragHandle && /* @__PURE__ */ jsx68("div", { className: "ods-sheet__handle", "aria-hidden": "true" }),
+          (side === "bottom" || side === "top") && dragHandle && /* @__PURE__ */ jsx69("div", { className: "ods-sheet__handle", "aria-hidden": "true" }),
           (title || description) && /* @__PURE__ */ jsxs67("header", { className: "ods-sheet__head", children: [
-            title && /* @__PURE__ */ jsx68("h2", { className: "ods-sheet__title", children: title }),
-            description && /* @__PURE__ */ jsx68("p", { className: "ods-sheet__desc", children: description })
+            title && /* @__PURE__ */ jsx69("h2", { className: "ods-sheet__title", children: title }),
+            description && /* @__PURE__ */ jsx69("p", { className: "ods-sheet__desc", children: description })
           ] }),
-          /* @__PURE__ */ jsx68("div", { className: "ods-sheet__body", children }),
-          footer && /* @__PURE__ */ jsx68("footer", { className: "ods-sheet__footer", children: footer })
+          /* @__PURE__ */ jsx69("div", { className: "ods-sheet__body", children }),
+          footer && /* @__PURE__ */ jsx69("footer", { className: "ods-sheet__footer", children: footer })
         ]
       }
     )
@@ -12159,8 +12514,8 @@ function Sheet({
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback17, useEffect as useEffect17, useRef as useRef28, useState as useState24 } from "react";
-import { Fragment as Fragment17, jsx as jsx69, jsxs as jsxs68 } from "react/jsx-runtime";
+import { useCallback as useCallback17, useEffect as useEffect19, useRef as useRef30, useState as useState26 } from "react";
+import { Fragment as Fragment18, jsx as jsx70, jsxs as jsxs68 } from "react/jsx-runtime";
 function Sidebar({
   variant = "expanded",
   brand,
@@ -12181,8 +12536,8 @@ function Sidebar({
   className
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
-  const [internalPinned, setInternalPinned] = useState24(defaultPinned);
-  useEffect17(() => {
+  const [internalPinned, setInternalPinned] = useState26(defaultPinned);
+  useEffect19(() => {
     if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
@@ -12204,9 +12559,9 @@ function Sidebar({
     },
     [pinnedProp, pinStorageKey, onPinnedChange]
   );
-  const [hoverOpen, setHoverOpen] = useState24(false);
-  const openTimer = useRef28(null);
-  const closeTimer = useRef28(null);
+  const [hoverOpen, setHoverOpen] = useState26(false);
+  const openTimer = useRef30(null);
+  const closeTimer = useRef30(null);
   const clearTimers = () => {
     if (openTimer.current) {
       clearTimeout(openTimer.current);
@@ -12217,7 +12572,7 @@ function Sidebar({
       closeTimer.current = null;
     }
   };
-  useEffect17(() => () => clearTimers(), []);
+  useEffect19(() => () => clearTimers(), []);
   const handleEnter = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setHoverOpen(true), hoverOpenDelay);
@@ -12229,7 +12584,7 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
-  useEffect17(() => {
+  useEffect19(() => {
     if (!overlayOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -12255,7 +12610,7 @@ function Sidebar({
       onMouseEnter: autoMode && !pinned ? handleEnter : void 0,
       onMouseLeave: autoMode && !pinned ? handleLeave : void 0,
       children: [
-        showAsRail ? /* @__PURE__ */ jsx69(
+        showAsRail ? /* @__PURE__ */ jsx70(
           RailLayout,
           {
             logo,
@@ -12266,7 +12621,7 @@ function Sidebar({
             tooltipDelay,
             suppressTooltips: overlayOpen
           }
-        ) : /* @__PURE__ */ jsx69(
+        ) : /* @__PURE__ */ jsx70(
           ExpandedLayout,
           {
             logo,
@@ -12279,7 +12634,7 @@ function Sidebar({
             onPinToggle: autoMode ? () => setPinned(!pinned) : void 0
           }
         ),
-        overlayOpen && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__overlay", onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: /* @__PURE__ */ jsx69(
+        overlayOpen && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__overlay", onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: /* @__PURE__ */ jsx70(
           ExpandedLayout,
           {
             logo,
@@ -12305,16 +12660,16 @@ function RailLayout({
   tooltipDelay,
   suppressTooltips
 }) {
-  return /* @__PURE__ */ jsxs68(Fragment17, { children: [
-    logo && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__logo-rail", children: logo }),
-    onToggle && /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsxs68(Fragment18, { children: [
+    logo && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__logo-rail", children: logo }),
+    onToggle && /* @__PURE__ */ jsx70(
       "button",
       {
         type: "button",
         className: "ods-sidebar__expand-rail",
         onClick: onToggle,
         "aria-label": "Expand sidebar",
-        children: /* @__PURE__ */ jsx69("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx69(
+        children: /* @__PURE__ */ jsx70("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx70(
           "path",
           {
             d: "M13 3v10M5 5l3 3-3 3",
@@ -12326,7 +12681,7 @@ function RailLayout({
         ) })
       }
     ),
-    /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__nav-rail", children: sections.flatMap((s) => s.items).map((item) => /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__nav-rail", children: sections.flatMap((s) => s.items).map((item) => /* @__PURE__ */ jsx70(
       RailItem,
       {
         item,
@@ -12335,8 +12690,8 @@ function RailLayout({
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__spacer" }),
-    footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__footer-rail", children: footerItems.map((item) => /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__spacer" }),
+    footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__footer-rail", children: footerItems.map((item) => /* @__PURE__ */ jsx70(
       RailItem,
       {
         item,
@@ -12345,14 +12700,14 @@ function RailLayout({
       },
       item.id
     )) }),
-    user && /* @__PURE__ */ jsx69(SidebarUserRail, { user })
+    user && /* @__PURE__ */ jsx70(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() : "?") });
+  const avatar = user.avatar ?? /* @__PURE__ */ jsx70("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") });
   if (user.menu && user.menu.length > 0) {
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx70(
       DropdownMenu,
       {
         trigger: avatar,
@@ -12363,7 +12718,7 @@ function SidebarUserRail({ user }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "button",
     {
       type: "button",
@@ -12379,8 +12734,8 @@ function RailItem({
   tooltipDelay,
   suppressTooltip
 }) {
-  const [open, setOpen] = useState24(false);
-  const timerRef = useRef28(null);
+  const [open, setOpen] = useState26(false);
+  const timerRef = useRef30(null);
   const hasChildren = !!(item.children && item.children.length > 0);
   const clear = () => {
     if (timerRef.current) {
@@ -12388,7 +12743,7 @@ function RailItem({
       timerRef.current = null;
     }
   };
-  useEffect17(() => () => clear(), []);
+  useEffect19(() => () => clear(), []);
   const show = () => {
     if (suppressTooltip) return;
     clear();
@@ -12409,7 +12764,7 @@ function RailItem({
       onFocus: show,
       onBlur: hide,
       children: [
-        /* @__PURE__ */ jsx69(
+        /* @__PURE__ */ jsx70(
           Comp,
           {
             type: item.href ? void 0 : "button",
@@ -12424,13 +12779,13 @@ function RailItem({
             "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 })
+            children: /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-icon", children: item.icon })
           }
         ),
-        open && labelText && hasChildren && /* @__PURE__ */ jsx69(RailFlyout, { title: labelText, items: item.children ?? [] }),
+        open && labelText && hasChildren && /* @__PURE__ */ jsx70(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 })
+          /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-tooltip-label", children: labelText }),
+          item.shortcut && /* @__PURE__ */ jsx70("kbd", { className: "ods-sidebar__rail-kbd", children: item.shortcut })
         ] })
       ]
     }
@@ -12438,10 +12793,10 @@ 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) => {
+    /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__rail-flyout-header", children: /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-flyout-title", children: title }) }),
+    /* @__PURE__ */ jsx70("ul", { className: "ods-sidebar__rail-flyout-list", children: items.map((child) => {
       const ChildComp = child.href ? "a" : "button";
-      return /* @__PURE__ */ jsx69("li", { children: /* @__PURE__ */ jsxs68(
+      return /* @__PURE__ */ jsx70("li", { children: /* @__PURE__ */ jsxs68(
         ChildComp,
         {
           type: child.href ? void 0 : "button",
@@ -12454,10 +12809,10 @@ function RailFlyout({ title, items }) {
           ),
           "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 })
+            /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-flyout-icon", children: child.icon }),
+            /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-flyout-label", children: child.label }),
+            child.tag && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-flyout-tag", children: child.tag }),
+            child.badge && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__rail-flyout-badge", children: child.badge })
           ]
         }
       ) }, child.id);
@@ -12475,21 +12830,21 @@ function ExpandedLayout({
   onPinToggle
 }) {
   const hasFooterControl = Boolean(onPinToggle || onToggle);
-  return /* @__PURE__ */ jsxs68(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment18, { children: [
     (logo || brand) && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__header", children: [
-      logo && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__logo", children: logo }),
+      logo && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__logo", children: logo }),
       brand && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__brand", children: [
-        /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__brand-name", children: brand.name }),
-        brand.subtitle && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__brand-sub", children: brand.subtitle })
+        /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__brand-name", children: brand.name }),
+        brand.subtitle && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__brand-sub", children: brand.subtitle })
       ] })
     ] }),
-    /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__body", children: sections.map((section, sIdx) => /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__section", children: [
-      section.label && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__section-label", children: section.label }),
-      section.items.map((item) => /* @__PURE__ */ jsx69(ExpandedItem, { item, level: 0 }, item.id))
+    /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__body", children: sections.map((section, sIdx) => /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__section", children: [
+      section.label && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__section-label", children: section.label }),
+      section.items.map((item) => /* @__PURE__ */ jsx70(ExpandedItem, { item, level: 0 }, item.id))
     ] }, section.id ?? sIdx)) }),
     (footerItems || user || hasFooterControl) && /* @__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)) }),
-      hasFooterControl && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__footer-control", children: onPinToggle ? /* @__PURE__ */ jsxs68(
+      footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__footer-list", children: footerItems.map((item) => /* @__PURE__ */ jsx70(ExpandedItem, { item, level: 0 }, item.id)) }),
+      hasFooterControl && /* @__PURE__ */ jsx70("div", { className: "ods-sidebar__footer-control", children: onPinToggle ? /* @__PURE__ */ jsxs68(
         "button",
         {
           type: "button",
@@ -12498,8 +12853,8 @@ function ExpandedLayout({
           "aria-label": pinned ? "Unpin sidebar" : "Pin sidebar",
           "aria-pressed": pinned,
           children: [
-            /* @__PURE__ */ jsx69(PinIcon, { pinned: !!pinned }),
-            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__pin-label", children: pinned ? "Unpin" : "Pin sidebar" })
+            /* @__PURE__ */ jsx70(PinIcon, { pinned: !!pinned }),
+            /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__pin-label", children: pinned ? "Unpin" : "Pin sidebar" })
           ]
         }
       ) : /* @__PURE__ */ jsxs68(
@@ -12510,7 +12865,7 @@ function ExpandedLayout({
           onClick: onToggle,
           "aria-label": "Collapse sidebar",
           children: [
-            /* @__PURE__ */ jsx69("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx69(
+            /* @__PURE__ */ jsx70("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx70(
               "path",
               {
                 d: "M3 3v10M11 5l-3 3 3 3",
@@ -12520,11 +12875,11 @@ function ExpandedLayout({
                 strokeLinejoin: "round"
               }
             ) }),
-            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__pin-label", children: "Collapse" })
+            /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__pin-label", children: "Collapse" })
           ]
         }
       ) }),
-      user && /* @__PURE__ */ jsx69(SidebarUserCard, { user })
+      user && /* @__PURE__ */ jsx70(SidebarUserCard, { user })
     ] })
   ] });
 }
@@ -12542,19 +12897,19 @@ function PinIcon({ pinned }) {
       strokeLinecap: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx69("path", { d: "M10.5 1.5 14.5 5.5 11.5 8.5 11 11 5 5 7.5 4.5z" }),
-        /* @__PURE__ */ jsx69("path", { d: "M5 5 1.5 14.5" })
+        /* @__PURE__ */ jsx70("path", { d: "M10.5 1.5 14.5 5.5 11.5 8.5 11 11 5 5 7.5 4.5z" }),
+        /* @__PURE__ */ jsx70("path", { d: "M5 5 1.5 14.5" })
       ]
     }
   );
 }
 function ExpandedItem({ item, level }) {
   const hasChildren = !!(item.children && item.children.length > 0);
-  const [open, setOpen] = useState24(
+  const [open, setOpen] = useState26(
     item.defaultExpanded ?? (hasChildren && hasActiveDescendant(item))
   );
   if (hasChildren) {
-    return /* @__PURE__ */ jsxs68(Fragment17, { children: [
+    return /* @__PURE__ */ jsxs68(Fragment18, { children: [
       /* @__PURE__ */ jsxs68(
         "button",
         {
@@ -12572,11 +12927,11 @@ function ExpandedItem({ item, level }) {
           },
           "aria-expanded": open,
           children: [
-            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__icon", children: item.icon }),
-            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__label", children: item.label }),
-            item.tag && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__tag", children: item.tag }),
-            item.badge && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__badge", children: item.badge }),
-            /* @__PURE__ */ jsx69(
+            /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__icon", children: item.icon }),
+            /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__label", children: item.label }),
+            item.tag && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__tag", children: item.tag }),
+            item.badge && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__badge", children: item.badge }),
+            /* @__PURE__ */ jsx70(
               "svg",
               {
                 className: cn("ods-sidebar__chevron", open && "ods-sidebar__chevron--open"),
@@ -12585,7 +12940,7 @@ function ExpandedItem({ item, level }) {
                 viewBox: "0 0 12 12",
                 fill: "none",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx69(
+                children: /* @__PURE__ */ jsx70(
                   "path",
                   {
                     d: "M4.5 3l3 3-3 3",
@@ -12600,14 +12955,14 @@ function ExpandedItem({ item, level }) {
           ]
         }
       ),
-      open && /* @__PURE__ */ jsx69(
+      open && /* @__PURE__ */ jsx70(
         "div",
         {
           className: cn(
             "ods-sidebar__subtree",
             `ods-sidebar__subtree--l${Math.min(level + 1, 3)}`
           ),
-          children: item.children.map((child) => /* @__PURE__ */ jsx69(ExpandedItem, { item: child, level: level + 1 }, child.id))
+          children: item.children.map((child) => /* @__PURE__ */ jsx70(ExpandedItem, { item: child, level: level + 1 }, child.id))
         }
       )
     ] });
@@ -12626,30 +12981,30 @@ function ExpandedItem({ item, level }) {
       ),
       "aria-current": item.active ? "page" : void 0,
       children: [
-        /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__icon", children: item.icon }),
-        /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__label", children: item.label }),
-        item.tag && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__tag", children: item.tag }),
-        item.badge && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__badge", children: item.badge })
+        /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__icon", children: item.icon }),
+        /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__label", children: item.label }),
+        item.tag && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__tag", children: item.tag }),
+        item.badge && /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__badge", children: item.badge })
       ]
     }
   );
 }
 function SidebarUserCard({ user }) {
   const labelText = typeof user.name === "string" ? user.name : "User";
-  const body = /* @__PURE__ */ jsxs68(Fragment17, { 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() : "?") }) }),
+  const body = /* @__PURE__ */ jsxs68(Fragment18, { children: [
+    /* @__PURE__ */ jsx70("span", { className: "ods-sidebar__user-avatar", children: user.avatar ?? /* @__PURE__ */ jsx70("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__ */ jsx70("span", { className: "ods-sidebar__user-name", children: user.name }),
+      user.email && /* @__PURE__ */ jsx70("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" })
+      /* @__PURE__ */ jsx70("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ jsx70("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ jsx70("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
     ] })
   ] });
   if (user.menu && user.menu.length > 0) {
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx70(
       DropdownMenu,
       {
         trigger: body,
@@ -12660,7 +13015,7 @@ function SidebarUserCard({ user }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx69("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, children: body });
+  return /* @__PURE__ */ jsx70("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, children: body });
 }
 function hasActiveDescendant(item) {
   if (!item.children) return false;
@@ -12672,12 +13027,12 @@ function hasActiveDescendant(item) {
 }
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 function Skeleton({ variant = "text", width, height, lines = 1, className }) {
   const resolvedWidth = typeof width === "number" ? `${width}px` : width;
   const resolvedHeight = typeof height === "number" ? `${height}px` : height;
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ jsx70("div", { className: cn("ods-skeleton__group", className), role: "status", "aria-label": "Loading", children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx71("div", { className: cn("ods-skeleton__group", className), role: "status", "aria-label": "Loading", children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx71(
       "div",
       {
         className: cn("ods-skeleton", "ods-skeleton--text"),
@@ -12689,7 +13044,7 @@ function Skeleton({ variant = "text", width, height, lines = 1, className }) {
       i
     )) });
   }
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       className: cn("ods-skeleton", `ods-skeleton--${variant}`, className),
@@ -12705,10 +13060,10 @@ function Skeleton({ variant = "text", width, height, lines = 1, className }) {
 
 // src/components/SlideoutPanel/SlideoutPanel.tsx
 import { AnimatePresence as AnimatePresence8, motion as motion11 } from "framer-motion";
-import { useRef as useRef29 } from "react";
+import { useRef as useRef31 } from "react";
 import { FocusScope as FocusScope2, OverlayProvider as OverlayProvider2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
 import { createPortal as createPortal9 } from "react-dom";
-import { Fragment as Fragment18, jsx as jsx71, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx72, jsxs as jsxs69 } from "react/jsx-runtime";
 var slideVariants2 = {
   left: {
     initial: { x: "-100%" },
@@ -12731,8 +13086,8 @@ function SlideoutContent({
   footer,
   className
 }) {
-  const overlayRef = useRef29(null);
-  const panelRef = useRef29(null);
+  const overlayRef = useRef31(null);
+  const panelRef = useRef31(null);
   const { overlayProps } = useOverlay2(
     {
       isOpen: open,
@@ -12746,8 +13101,8 @@ function SlideoutContent({
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeOverlayProps } = overlayProps;
   const variant = slideVariants2[position];
   const panelWidth = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsx71(AnimatePresence8, { children: open && /* @__PURE__ */ jsxs69(Fragment18, { children: [
-    /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(AnimatePresence8, { children: open && /* @__PURE__ */ jsxs69(Fragment19, { children: [
+    /* @__PURE__ */ jsx72(
       motion11.div,
       {
         className: "ods-slideout__backdrop",
@@ -12760,7 +13115,7 @@ function SlideoutContent({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx71(FocusScope2, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs69(
+    /* @__PURE__ */ jsx72(FocusScope2, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs69(
       motion11.div,
       {
         ...safeOverlayProps,
@@ -12778,20 +13133,20 @@ function SlideoutContent({
         transition: { type: "tween", ease: [0.32, 0.72, 0, 1], duration: 0.28 },
         children: [
           title && /* @__PURE__ */ jsxs69("div", { className: "ods-slideout__header", children: [
-            /* @__PURE__ */ jsx71("h2", { ...titleProps, className: "ods-slideout__title", children: title }),
-            /* @__PURE__ */ jsx71(
+            /* @__PURE__ */ jsx72("h2", { ...titleProps, className: "ods-slideout__title", children: title }),
+            /* @__PURE__ */ jsx72(
               "button",
               {
                 className: "ods-slideout__close",
                 onClick: onClose,
                 "aria-label": "Close panel",
                 type: "button",
-                children: /* @__PURE__ */ jsx71("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx71("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+                children: /* @__PURE__ */ jsx72("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx72("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx71("div", { className: "ods-slideout__body", children }),
-          footer && /* @__PURE__ */ jsx71("div", { className: "ods-slideout__footer", children: footer })
+          /* @__PURE__ */ jsx72("div", { className: "ods-slideout__body", children }),
+          footer && /* @__PURE__ */ jsx72("div", { className: "ods-slideout__footer", children: footer })
         ]
       }
     ) })
@@ -12800,13 +13155,13 @@ function SlideoutContent({
 function SlideoutPanel(props) {
   if (typeof document === "undefined") return null;
   return createPortal9(
-    /* @__PURE__ */ jsx71(OverlayProvider2, { children: /* @__PURE__ */ jsx71(SlideoutContent, { ...props }) }),
+    /* @__PURE__ */ jsx72(OverlayProvider2, { children: /* @__PURE__ */ jsx72(SlideoutContent, { ...props }) }),
     document.body
   );
 }
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx72, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs70 } from "react/jsx-runtime";
 function Slider({
   label,
   value,
@@ -12837,12 +13192,12 @@ function Slider({
       ),
       children: [
         (label || showValue) && /* @__PURE__ */ jsxs70("div", { className: "ods-slider__head", children: [
-          label && /* @__PURE__ */ jsx72("span", { className: "ods-slider__label", children: label }),
-          showValue && /* @__PURE__ */ jsx72("span", { className: "ods-slider__value", children: display })
+          label && /* @__PURE__ */ jsx73("span", { className: "ods-slider__label", children: label }),
+          showValue && /* @__PURE__ */ jsx73("span", { className: "ods-slider__value", children: display })
         ] }),
         /* @__PURE__ */ jsxs70("div", { className: "ods-slider__track", children: [
-          /* @__PURE__ */ jsx72("span", { className: "ods-slider__fill", style: { width: `${pct}%` } }),
-          /* @__PURE__ */ jsx72(
+          /* @__PURE__ */ jsx73("span", { className: "ods-slider__fill", style: { width: `${pct}%` } }),
+          /* @__PURE__ */ jsx73(
             "input",
             {
               type: "range",
@@ -12863,7 +13218,7 @@ function Slider({
 }
 
 // src/components/SocialButton/SocialButton.tsx
-import { jsx as jsx73, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs71 } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   google: "Continue with Google",
   github: "Continue with GitHub",
@@ -12871,28 +13226,28 @@ var DEFAULT_LABELS = {
   twitter: "Continue with X"
 };
 var GoogleIcon = () => /* @__PURE__ */ jsxs71("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx73(
+  /* @__PURE__ */ jsx74(
     "path",
     {
       d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.79 2.72v2.26h2.9c1.69-1.56 2.69-3.85 2.69-6.62z",
       fill: "#4285F4"
     }
   ),
-  /* @__PURE__ */ jsx73(
+  /* @__PURE__ */ jsx74(
     "path",
     {
       d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.26c-.8.54-1.84.86-3.06.86-2.34 0-4.33-1.58-5.04-3.71H.96v2.33A9 9 0 0 0 9 18z",
       fill: "#34A853"
     }
   ),
-  /* @__PURE__ */ jsx73(
+  /* @__PURE__ */ jsx74(
     "path",
     {
       d: "M3.96 10.71A5.38 5.38 0 0 1 3.68 9c0-.6.1-1.18.28-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04l3-2.33z",
       fill: "#FBBC05"
     }
   ),
-  /* @__PURE__ */ jsx73(
+  /* @__PURE__ */ jsx74(
     "path",
     {
       d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96l3 2.33C4.67 5.16 6.66 3.58 9 3.58z",
@@ -12900,21 +13255,21 @@ var GoogleIcon = () => /* @__PURE__ */ jsxs71("svg", { width: "18", height: "18"
     }
   )
 ] });
-var GitHubIcon = () => /* @__PURE__ */ jsx73("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(
+var GitHubIcon = () => /* @__PURE__ */ jsx74("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx74(
   "path",
   {
     d: "M9 .2a9 9 0 0 0-2.85 17.55c.45.08.62-.2.62-.43v-1.5c-2.5.54-3.04-1.2-3.04-1.2-.41-1.05-1-1.33-1-1.33-.82-.56.06-.55.06-.55.9.06 1.38.93 1.38.93.8 1.38 2.11.98 2.63.75.08-.58.31-.98.57-1.2-2-.23-4.1-1-4.1-4.44 0-.98.35-1.78.93-2.41-.1-.23-.4-1.15.09-2.4 0 0 .76-.25 2.48.92a8.6 8.6 0 0 1 4.5 0c1.72-1.17 2.48-.92 2.48-.92.49 1.25.18 2.17.09 2.4.58.63.93 1.43.93 2.4 0 3.45-2.1 4.21-4.1 4.44.32.28.6.82.6 1.67v2.47c0 .24.17.52.63.43A9 9 0 0 0 9 .2z",
     fill: "#ffffff"
   }
 ) });
-var AppleIcon = () => /* @__PURE__ */ jsx73("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(
+var AppleIcon = () => /* @__PURE__ */ jsx74("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx74(
   "path",
   {
     d: "M13.4 9.5c0-1.7 1.4-2.5 1.5-2.6-.8-1.2-2.1-1.3-2.5-1.3-1.1-.1-2.1.6-2.6.6-.6 0-1.4-.6-2.3-.6-1.2 0-2.3.7-2.9 1.8-1.2 2.1-.3 5.3.9 7 .6.9 1.3 1.8 2.2 1.8.9 0 1.2-.6 2.3-.6s1.4.6 2.3.6 1.5-.9 2.1-1.8c.7-1 1-2 1-2.1 0 0-1.9-.7-2-2.8zM11.5 4.5c.5-.6.8-1.4.7-2.2-.7 0-1.5.5-2 1.1-.4.5-.8 1.3-.7 2.1.8.1 1.6-.4 2-1z",
     fill: "#ffffff"
   }
 ) });
-var TwitterIcon = () => /* @__PURE__ */ jsx73("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(
+var TwitterIcon = () => /* @__PURE__ */ jsx74("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx74(
   "path",
   {
     d: "M13.8 1.3h2.6l-5.7 6.5L17.4 16h-5.2l-4.1-5.3L3.4 16H.8l6-6.9L.5 1.3h5.4l3.7 4.9 4.2-4.9z",
@@ -12952,8 +13307,8 @@ function SocialButton({
         className
       ),
       children: [
-        resolvedIcon && /* @__PURE__ */ jsx73("span", { className: "ods-social-btn__icon", "aria-hidden": "true", children: resolvedIcon }),
-        /* @__PURE__ */ jsx73("span", { className: "ods-social-btn__label", children: resolvedLabel })
+        resolvedIcon && /* @__PURE__ */ jsx74("span", { className: "ods-social-btn__icon", "aria-hidden": "true", children: resolvedIcon }),
+        /* @__PURE__ */ jsx74("span", { className: "ods-social-btn__label", children: resolvedLabel })
       ]
     }
   );
@@ -12962,11 +13317,11 @@ function SocialButton({
 // src/components/Sortable/Sortable.tsx
 import {
   useCallback as useCallback18,
-  useEffect as useEffect18,
-  useRef as useRef30,
-  useState as useState25
+  useEffect as useEffect20,
+  useRef as useRef32,
+  useState as useState27
 } from "react";
-import { jsx as jsx74, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs72 } from "react/jsx-runtime";
 var DT_TYPE = "application/x-ods-sortable";
 function Sortable({
   items,
@@ -12978,13 +13333,13 @@ function Sortable({
   autoScrollEdge = 48,
   className
 }) {
-  const containerRef = useRef30(null);
-  const itemRefs = useRef30(/* @__PURE__ */ new Map());
-  const originalOrderRef = useRef30(null);
-  const scrollTimerRef = useRef30(null);
-  const [draggingId, setDraggingId] = useState25(null);
-  const [dropPos, setDropPos] = useState25(null);
-  const [kbActiveId, setKbActiveId] = useState25(null);
+  const containerRef = useRef32(null);
+  const itemRefs = useRef32(/* @__PURE__ */ new Map());
+  const originalOrderRef = useRef32(null);
+  const scrollTimerRef = useRef32(null);
+  const [draggingId, setDraggingId] = useState27(null);
+  const [dropPos, setDropPos] = useState27(null);
+  const [kbActiveId, setKbActiveId] = useState27(null);
   const isVertical = direction === "vertical";
   const onDragStart = useCallback18(
     (id) => (e) => {
@@ -13045,7 +13400,7 @@ function Sortable({
     },
     [items, onChange]
   );
-  useEffect18(() => {
+  useEffect20(() => {
     if (!autoScroll || !draggingId) return;
     const container = containerRef.current;
     if (!container) return;
@@ -13095,7 +13450,7 @@ function Sortable({
       }
     };
   }, [autoScroll, autoScrollEdge, draggingId, isVertical]);
-  useEffect18(() => {
+  useEffect20(() => {
     if (!draggingId) return;
     const onKey = (e) => {
       if (e.key === "Escape") cancelDrag();
@@ -13197,7 +13552,7 @@ function Sortable({
               ),
               onDragOver: onItemDragOver(item.id),
               children: [
-                /* @__PURE__ */ jsx74(
+                /* @__PURE__ */ jsx75(
                   "span",
                   {
                     className: "ods-sortable__indicator ods-sortable__indicator--before",
@@ -13205,7 +13560,7 @@ function Sortable({
                   }
                 ),
                 renderItem(item, idx, dragProps),
-                /* @__PURE__ */ jsx74(
+                /* @__PURE__ */ jsx75(
                   "span",
                   {
                     className: "ods-sortable__indicator ods-sortable__indicator--after",
@@ -13217,7 +13572,7 @@ function Sortable({
             item.id
           );
         }),
-        /* @__PURE__ */ jsx74("span", { className: "ods-sortable__sr", "aria-live": "polite", "aria-atomic": "true", children: kbActiveId ? `Item picked up. Use arrow keys to reorder, Space or Enter to drop, Escape to cancel.` : "" })
+        /* @__PURE__ */ jsx75("span", { className: "ods-sortable__sr", "aria-live": "polite", "aria-atomic": "true", children: kbActiveId ? `Item picked up. Use arrow keys to reorder, Space or Enter to drop, Escape to cancel.` : "" })
       ]
     }
   );
@@ -13228,7 +13583,7 @@ function DragHandle({
   ariaLabel = "Drag to reorder",
   dragProps
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "span",
     {
       "data-ods-sortable-handle": "true",
@@ -13237,19 +13592,19 @@ function DragHandle({
       style,
       ...dragProps,
       children: /* @__PURE__ */ jsxs72("svg", { width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx74("circle", { cx: "2", cy: "3", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx74("circle", { cx: "6", cy: "3", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx74("circle", { cx: "2", cy: "7", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx74("circle", { cx: "6", cy: "7", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx74("circle", { cx: "2", cy: "11", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx74("circle", { cx: "6", cy: "11", r: "1", fill: "currentColor" })
+        /* @__PURE__ */ jsx75("circle", { cx: "2", cy: "3", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx75("circle", { cx: "6", cy: "3", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx75("circle", { cx: "2", cy: "7", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx75("circle", { cx: "6", cy: "7", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx75("circle", { cx: "2", cy: "11", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx75("circle", { cx: "6", cy: "11", r: "1", fill: "currentColor" })
       ] })
     }
   );
 }
 
 // src/components/Sparkline/Sparkline.tsx
-import { jsx as jsx75, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs73 } from "react/jsx-runtime";
 function Sparkline({
   data,
   width = 80,
@@ -13297,8 +13652,8 @@ function Sparkline({
       role: "img",
       "aria-label": ariaLabel,
       children: [
-        area && /* @__PURE__ */ jsx75("path", { d: area, fill }),
-        /* @__PURE__ */ jsx75(
+        area && /* @__PURE__ */ jsx76("path", { d: area, fill }),
+        /* @__PURE__ */ jsx76(
           "path",
           {
             d: path,
@@ -13314,47 +13669,6 @@ function Sparkline({
   );
 }
 
-// src/components/Spinner/Spinner.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
-var sizeMap = {
-  sm: 16,
-  md: 24,
-  lg: 32,
-  xl: 48
-};
-function Spinner({
-  size = "md",
-  color = "var(--ods-color-brand-500)",
-  className
-}) {
-  const px = sizeMap[size];
-  return /* @__PURE__ */ jsx76(
-    "svg",
-    {
-      className: cn("ods-spinner", `ods-spinner--${size}`, className),
-      width: px,
-      height: px,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      role: "status",
-      "aria-label": "Loading",
-      style: { color },
-      children: /* @__PURE__ */ jsx76(
-        "circle",
-        {
-          cx: "12",
-          cy: "12",
-          r: "10",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeDasharray: "31.4 31.4",
-          className: "ods-spinner__circle"
-        }
-      )
-    }
-  );
-}
-
 // src/components/Stat/Stat.tsx
 import { jsx as jsx77, jsxs as jsxs74 } from "react/jsx-runtime";
 function Stat({
@@ -13386,7 +13700,7 @@ function Stat({
 }
 
 // src/components/Switch/Switch.tsx
-import { useRef as useRef31 } from "react";
+import { useRef as useRef33 } from "react";
 import { useSwitch } from "react-aria";
 import { jsx as jsx78, jsxs as jsxs75 } from "react/jsx-runtime";
 function Switch({
@@ -13399,7 +13713,7 @@ function Switch({
   className,
   ...props
 }) {
-  const ref = useRef31(null);
+  const ref = useRef33(null);
   const state = $fd3c5e01e837dc20$export$8042c6c013fd5226({
     isSelected: checked,
     defaultSelected: defaultChecked,
@@ -13457,8 +13771,8 @@ function Switch({
 }
 
 // src/components/Table/Table.tsx
-import { useCallback as useCallback19, useState as useState26 } from "react";
-import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs76 } from "react/jsx-runtime";
+import { useCallback as useCallback19, useState as useState28 } from "react";
+import { Fragment as Fragment20, jsx as jsx79, jsxs as jsxs76 } from "react/jsx-runtime";
 function Table({
   columns,
   data,
@@ -13580,8 +13894,8 @@ function TableRow({
   totalCols
 }) {
   const isSelected = selectedRows?.has(rowIndex) ?? false;
-  const [expanded, setExpanded] = useState26(false);
-  return /* @__PURE__ */ jsxs76(Fragment19, { children: [
+  const [expanded, setExpanded] = useState28(false);
+  return /* @__PURE__ */ jsxs76(Fragment20, { children: [
     /* @__PURE__ */ jsxs76(
       "tr",
       {
@@ -13617,11 +13931,15 @@ function TableRow({
 
 // src/components/Tabs/Tabs.tsx
 import { motion as motion12 } from "framer-motion";
-import { useMemo as useMemo12, useRef as useRef32, useState as useState27 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect21, useId as useId7, useMemo as useMemo12, useRef as useRef34, useState as useState29 } 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 = useRef32(null);
+function TabButton({
+  item,
+  state,
+  indicatorLayoutId
+}) {
+  const ref = useRef34(null);
   const { tabProps } = useTab({ key: item.key }, state, ref);
   const isSelected = state.selectedKey === item.key;
   const isDisabled = state.disabledKeys.has(item.key);
@@ -13642,7 +13960,7 @@ function TabButton({ item, state }) {
           motion12.div,
           {
             className: "ods-tabs__indicator",
-            layoutId: "ods-tabs-indicator",
+            layoutId: indicatorLayoutId,
             transition: { type: "spring", damping: 30, stiffness: 400 }
           }
         )
@@ -13651,10 +13969,12 @@ function TabButton({ item, state }) {
   );
 }
 function TabPanelContent({ state, panelContent, ...props }) {
-  const ref = useRef32(null);
+  const ref = useRef34(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   return /* @__PURE__ */ jsx80("div", { ...tabPanelProps, ref, className: "ods-tabs__panel", children: panelContent });
 }
+var SCROLL_EDGE_EPSILON = 1;
+var SCROLL_STEP_PX = 200;
 function Tabs({
   items,
   value,
@@ -13663,7 +13983,9 @@ function Tabs({
   orientation = "horizontal",
   className
 }) {
-  const [internalValue, setInternalValue] = useState27(defaultValue || items[0]?.value);
+  const reactId = useId7();
+  const indicatorLayoutId = `ods-tabs-indicator-${reactId}`;
+  const [internalValue, setInternalValue] = useState29(defaultValue || items[0]?.value);
   const selectedKey = value ?? internalValue;
   const handleSelectionChange = (key) => {
     const keyStr = String(key);
@@ -13687,17 +14009,103 @@ function Tabs({
     disabledKeys: items.filter((i) => i.disabled).map((i) => i.value)
   };
   const state = $caeb030f09a278a1$export$4ba071daf4e486(stateProps);
-  const ref = useRef32(null);
+  const ref = useRef34(null);
   const { tabListProps } = useTabList({ ...stateProps, orientation }, state, ref);
+  const scrollContainerRef = useRef34(null);
+  const [canScrollLeft, setCanScrollLeft] = useState29(false);
+  const [canScrollRight, setCanScrollRight] = useState29(false);
+  const measureOverflow = useCallback20(() => {
+    const el = scrollContainerRef.current;
+    if (!el || orientation !== "horizontal") {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+    const max = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > SCROLL_EDGE_EPSILON);
+    setCanScrollRight(el.scrollLeft < max - SCROLL_EDGE_EPSILON);
+  }, [orientation]);
+  useEffect21(() => {
+    measureOverflow();
+    const el = scrollContainerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => measureOverflow());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [items, measureOverflow]);
+  const onScroll = () => measureOverflow();
+  const scrollBy = (dir) => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * SCROLL_STEP_PX, behavior: "smooth" });
+  };
   const currentPanelContent = panelContentMap.get(String(selectedKey));
   return /* @__PURE__ */ jsxs77("div", { className: cn("ods-tabs", `ods-tabs--${orientation}`, className), children: [
-    /* @__PURE__ */ jsx80("div", { ...tabListProps, ref, className: "ods-tabs__list", children: [...state.collection].map((item) => /* @__PURE__ */ jsx80(TabButton, { item, state }, item.key)) }),
+    /* @__PURE__ */ jsxs77("div", { className: "ods-tabs__list-wrap", children: [
+      orientation === "horizontal" && canScrollLeft && /* @__PURE__ */ jsx80(
+        "button",
+        {
+          type: "button",
+          className: "ods-tabs__scroll-btn ods-tabs__scroll-btn--left",
+          onClick: () => scrollBy(-1),
+          "aria-label": "Scroll tabs left",
+          tabIndex: -1,
+          children: /* @__PURE__ */ jsx80(ChevronSvg, { dir: "left" })
+        }
+      ),
+      /* @__PURE__ */ jsx80(
+        "div",
+        {
+          className: "ods-tabs__scroller",
+          ref: scrollContainerRef,
+          onScroll: orientation === "horizontal" ? onScroll : void 0,
+          children: /* @__PURE__ */ jsx80("div", { ...tabListProps, ref, className: "ods-tabs__list", children: [...state.collection].map((item) => /* @__PURE__ */ jsx80(
+            TabButton,
+            {
+              item,
+              state,
+              indicatorLayoutId
+            },
+            item.key
+          )) })
+        }
+      ),
+      orientation === "horizontal" && canScrollRight && /* @__PURE__ */ jsx80(
+        "button",
+        {
+          type: "button",
+          className: "ods-tabs__scroll-btn ods-tabs__scroll-btn--right",
+          onClick: () => scrollBy(1),
+          "aria-label": "Scroll tabs right",
+          tabIndex: -1,
+          children: /* @__PURE__ */ jsx80(ChevronSvg, { dir: "right" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx80(TabPanelContent, { state, panelContent: currentPanelContent }, state.selectedKey)
   ] });
 }
+function ChevronSvg({ dir }) {
+  const d = dir === "left" ? "M11 4L5 10l6 6" : "M9 4l6 6-6 6";
+  return /* @__PURE__ */ jsx80(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx80("path", { d })
+    }
+  );
+}
 
 // src/components/TagsInput/TagsInput.tsx
-import { useState as useState28 } from "react";
+import { useState as useState30 } from "react";
 import { jsx as jsx81, jsxs as jsxs78 } from "react/jsx-runtime";
 function TagsInput({
   label,
@@ -13713,7 +14121,7 @@ function TagsInput({
   separators = ["Enter", ","],
   className
 }) {
-  const [draft, setDraft] = useState28("");
+  const [draft, setDraft] = useState30("");
   const addTag = (raw) => {
     const tag = raw.trim();
     if (!tag) return;
@@ -13841,7 +14249,7 @@ function TestimonialCard({
 }
 
 // src/components/Textarea/Textarea.tsx
-import { useId as useId7, useRef as useRef33, useState as useState29 } from "react";
+import { useId as useId8, useRef as useRef35, useState as useState31 } from "react";
 import { useTextField } from "react-aria";
 import { jsx as jsx83, jsxs as jsxs80 } from "react/jsx-runtime";
 function Textarea({
@@ -13859,9 +14267,9 @@ function Textarea({
   onChange,
   ...props
 }) {
-  const ref = useRef33(null);
-  const errorId = useId7();
-  const [charCount, setCharCount] = useState29(() => String(value ?? defaultValue ?? "").length);
+  const ref = useRef35(null);
+  const errorId = useId8();
+  const [charCount, setCharCount] = useState31(() => String(value ?? defaultValue ?? "").length);
   const ariaNameProps = resolveAccessibleName({
     label,
     ariaLabel: props["aria-label"],
@@ -13958,13 +14366,13 @@ function Timeline({ items, size = "md", className }) {
 
 // src/components/TimePicker/TimePicker.tsx
 import {
-  Fragment as Fragment20,
-  useCallback as useCallback20,
-  useEffect as useEffect19,
-  useRef as useRef34,
-  useState as useState30
+  Fragment as Fragment21,
+  useCallback as useCallback21,
+  useEffect as useEffect22,
+  useRef as useRef36,
+  useState as useState32
 } from "react";
-import { Fragment as Fragment21, jsx as jsx85, jsxs as jsxs82 } from "react/jsx-runtime";
+import { Fragment as Fragment22, 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)}` : ""}`;
@@ -13991,15 +14399,15 @@ function TimePicker({
   helperText,
   className
 }) {
-  const [open, setOpen] = useState30(false);
-  const [activeSeg, setActiveSeg] = useState30(null);
-  const draftRef = useRef34("");
-  const wrapRef = useRef34(null);
-  const hoursRef = useRef34(null);
-  const minutesRef = useRef34(null);
-  const secondsRef = useRef34(null);
+  const [open, setOpen] = useState32(false);
+  const [activeSeg, setActiveSeg] = useState32(null);
+  const draftRef = useRef36("");
+  const wrapRef = useRef36(null);
+  const hoursRef = useRef36(null);
+  const minutesRef = useRef36(null);
+  const secondsRef = useRef36(null);
   const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
-  useEffect19(() => {
+  useEffect22(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -14010,7 +14418,7 @@ function TimePicker({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  const commit = useCallback20(
+  const commit = useCallback21(
     (seg, n) => {
       const next = { ...value, [seg]: clampSeg(seg, n, use24h) };
       if (showSeconds && next.seconds === void 0) next.seconds = 0;
@@ -14173,7 +14581,7 @@ function TimePicker({
               segButton("hours", value.hours),
               /* @__PURE__ */ jsx85("span", { className: "ods-timepicker__display-sep", children: ":" }),
               segButton("minutes", value.minutes),
-              showSeconds && /* @__PURE__ */ jsxs82(Fragment21, { children: [
+              showSeconds && /* @__PURE__ */ jsxs82(Fragment22, { children: [
                 /* @__PURE__ */ jsx85("span", { className: "ods-timepicker__display-sep", children: ":" }),
                 segButton("seconds", value.seconds ?? 0)
               ] })
@@ -14205,7 +14613,7 @@ function TimePicker({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx85("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ jsxs82(Fragment20, { children: [
+          /* @__PURE__ */ jsx85("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ jsxs82(Fragment21, { 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(
@@ -14260,8 +14668,8 @@ function TimePicker({
 }
 
 // src/components/TimezonePicker/TimezonePicker.tsx
-import { useEffect as useEffect20, useMemo as useMemo13, useRef as useRef35, useState as useState31 } from "react";
-import { Fragment as Fragment22, jsx as jsx86, jsxs as jsxs83 } from "react/jsx-runtime";
+import { useEffect as useEffect23, useMemo as useMemo13, useRef as useRef37, useState as useState33 } from "react";
+import { Fragment as Fragment23, 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" },
@@ -14288,10 +14696,10 @@ function TimezonePicker({
   placeholder = "Select timezone",
   className
 }) {
-  const [open, setOpen] = useState31(false);
-  const [query, setQuery] = useState31("");
-  const wrapRef = useRef35(null);
-  const inputRef = useRef35(null);
+  const [open, setOpen] = useState33(false);
+  const [query, setQuery] = useState33("");
+  const wrapRef = useRef37(null);
+  const inputRef = useRef37(null);
   const selected = options.find((o) => o.iana === value);
   const filtered = useMemo13(() => {
     if (!query.trim()) return options;
@@ -14300,7 +14708,7 @@ function TimezonePicker({
       (o) => o.iana.toLowerCase().includes(q2) || o.label.toLowerCase().includes(q2) || o.offset.toLowerCase().includes(q2) || o.region?.toLowerCase().includes(q2)
     );
   }, [options, query]);
-  useEffect20(() => {
+  useEffect23(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -14311,7 +14719,7 @@ function TimezonePicker({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect20(() => {
+  useEffect23(() => {
     if (open) requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
   const select = (iana) => {
@@ -14354,7 +14762,7 @@ function TimezonePicker({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx86("span", { className: "ods-tzpicker__info", children: selected ? /* @__PURE__ */ jsxs83(Fragment22, { children: [
+              /* @__PURE__ */ jsx86("span", { className: "ods-tzpicker__info", children: selected ? /* @__PURE__ */ jsxs83(Fragment23, { 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, " "),
@@ -14466,14 +14874,14 @@ function TimezonePicker({
 import { AnimatePresence as AnimatePresence9, motion as motion13 } from "framer-motion";
 import {
   createContext as createContext2,
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext2,
   useMemo as useMemo14,
-  useRef as useRef36,
-  useState as useState32
+  useRef as useRef38,
+  useState as useState34
 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
-import { Fragment as Fragment23, jsx as jsx87, jsxs as jsxs84 } from "react/jsx-runtime";
+import { Fragment as Fragment24, 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(
@@ -14564,9 +14972,9 @@ var defaultIcons = {
 var ToastContext = createContext2(null);
 function ToastBody({ item, onDismiss }) {
   const dismiss = () => onDismiss(item.id);
-  if (item.render) return /* @__PURE__ */ jsx87(Fragment23, { children: item.render({ id: item.id, dismiss }) });
+  if (item.render) return /* @__PURE__ */ jsx87(Fragment24, { children: item.render({ id: item.id, dismiss }) });
   const title = item.title ?? item.message;
-  return /* @__PURE__ */ jsxs84(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs84(Fragment24, { 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 }),
@@ -14597,8 +15005,8 @@ function ToastBody({ item, onDismiss }) {
   ] });
 }
 function PositionStack({ items, position, onDismiss, maxStack }) {
-  const [hovered, setHovered] = useState32(false);
-  const [pinned, setPinned] = useState32(false);
+  const [hovered, setHovered] = useState34(false);
+  const [pinned, setPinned] = useState34(false);
   const expanded = hovered || pinned;
   const ordered = useMemo14(() => [...items].reverse(), [items]);
   const isBottom = position.startsWith("bottom");
@@ -14698,10 +15106,10 @@ function ToastProvider({
   defaultPosition = "bottom-right",
   maxStack = 3
 }) {
-  const [toasts, setToasts] = useState32([]);
-  const timers = useRef36(/* @__PURE__ */ new Map());
-  const idCounter2 = useRef36(0);
-  const dismiss = useCallback21((id) => {
+  const [toasts, setToasts] = useState34([]);
+  const timers = useRef38(/* @__PURE__ */ new Map());
+  const idCounter2 = useRef38(0);
+  const dismiss = useCallback22((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timers.current.get(id);
     if (timer) {
@@ -14709,7 +15117,7 @@ function ToastProvider({
       timers.current.delete(id);
     }
   }, []);
-  const dismissAll = useCallback21((position) => {
+  const dismissAll = useCallback22((position) => {
     setToasts((prev) => {
       const remaining = position ? prev.filter((t) => t.position !== position) : [];
       for (const t of prev) {
@@ -14724,7 +15132,7 @@ function ToastProvider({
       return remaining;
     });
   }, []);
-  const toast = useCallback21(
+  const toast = useCallback22(
     (options) => {
       const id = `toast-${++idCounter2.current}`;
       const item = {
@@ -14762,7 +15170,7 @@ function ToastProvider({
     return out;
   }, [toasts]);
   const ctx = { toast, dismiss, dismissAll };
-  const containers = /* @__PURE__ */ jsx87(Fragment23, { children: POSITIONS.map((pos) => {
+  const containers = /* @__PURE__ */ jsx87(Fragment24, { children: POSITIONS.map((pos) => {
     const list = groups[pos];
     if (list.length === 0) return null;
     return /* @__PURE__ */ jsx87(
@@ -15020,15 +15428,15 @@ function ToolCard({
 import { AnimatePresence as AnimatePresence10, motion as motion14 } from "framer-motion";
 import {
   cloneElement,
-  useCallback as useCallback22,
-  useEffect as useEffect21,
+  useCallback as useCallback23,
+  useEffect as useEffect24,
   useLayoutEffect as useLayoutEffect5,
-  useRef as useRef37,
-  useState as useState33
+  useRef as useRef39,
+  useState as useState35
 } from "react";
 import { useTooltip, useTooltipTrigger } from "react-aria";
 import { createPortal as createPortal11 } from "react-dom";
-import { Fragment as Fragment24, jsx as jsx91, jsxs as jsxs88 } from "react/jsx-runtime";
+import { Fragment as Fragment25, 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;
@@ -15058,9 +15466,9 @@ function TooltipContent({
   offset
 }) {
   const { tooltipProps } = useTooltip({ isOpen: state.isOpen }, state);
-  const tipRef = useRef37(null);
-  const [coords, setCoords] = useState33(null);
-  const reposition = useCallback22(() => {
+  const tipRef = useRef39(null);
+  const [coords, setCoords] = useState35(null);
+  const reposition = useCallback23(() => {
     if (!triggerRef.current || !tipRef.current) return;
     const trigRect = triggerRef.current.getBoundingClientRect();
     const tipRect = tipRef.current.getBoundingClientRect();
@@ -15072,7 +15480,7 @@ function TooltipContent({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [state.isOpen, reposition]);
-  useEffect21(() => {
+  useEffect24(() => {
     if (!state.isOpen) return;
     const handler = () => reposition();
     window.addEventListener("scroll", handler, true);
@@ -15128,10 +15536,10 @@ function Tooltip({
   children,
   className
 }) {
-  const triggerRef = useRef37(null);
+  const triggerRef = useRef39(null);
   const state = $3834487504f4fc00$export$4d40659c25ecb50b({ delay });
   const { triggerProps } = useTooltipTrigger({ delay }, state, triggerRef);
-  return /* @__PURE__ */ jsxs88(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment25, { children: [
     cloneElement(children, {
       ...triggerProps,
       ref: triggerRef
@@ -15232,7 +15640,7 @@ function TopBar({
 }
 
 // src/components/TraceStep/TraceStep.tsx
-import { useState as useState34 } from "react";
+import { useState as useState36 } from "react";
 import { jsx as jsx93, jsxs as jsxs90 } from "react/jsx-runtime";
 var KIND_GLYPH = {
   thought: /* @__PURE__ */ jsx93("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx93(
@@ -15293,7 +15701,7 @@ function TraceStep({
   isLast = false,
   className
 }) {
-  const [open, setOpen] = useState34(defaultOpen);
+  const [open, setOpen] = useState36(defaultOpen);
   const canExpand = !!children;
   return /* @__PURE__ */ jsxs90(
     "div",
@@ -15412,10 +15820,10 @@ function UserCard({ name, role, avatar, initial, stats, action, className }) {
 }
 
 // src/components/WorkflowEditor/WorkflowEditor.tsx
-import { useCallback as useCallback24, useMemo as useMemo16, useState as useState35 } from "react";
+import { useCallback as useCallback25, useMemo as useMemo16, useState as useState37 } from "react";
 
 // src/hooks/useWorkflow.ts
-import { useCallback as useCallback23, useMemo as useMemo15, useReducer } from "react";
+import { useCallback as useCallback24, useMemo as useMemo15, useReducer } from "react";
 
 // src/workflow/types.ts
 var types_exports = {};
@@ -15929,11 +16337,11 @@ function useWorkflow(options = {}) {
     []
   );
   const [workflow, dispatch] = useReducer(reducer, initial);
-  const addNode = useCallback23(
+  const addNode = useCallback24(
     (node) => dispatch({ type: "ADD_NODE", payload: node }),
     []
   );
-  const createNode = useCallback23(
+  const createNode = useCallback24(
     (partial) => {
       const id = partial.id ?? genId("node");
       const ports = partial.ports ?? {
@@ -15982,27 +16390,27 @@ function useWorkflow(options = {}) {
     },
     []
   );
-  const updateNode = useCallback23(
+  const updateNode = useCallback24(
     (id, updates) => dispatch({ type: "UPDATE_NODE", payload: { id, updates } }),
     []
   );
-  const deleteNode = useCallback23(
+  const deleteNode = useCallback24(
     (id) => dispatch({ type: "DELETE_NODE", payload: id }),
     []
   );
-  const deleteNodes = useCallback23(
+  const deleteNodes = useCallback24(
     (ids) => dispatch({ type: "DELETE_NODES", payload: ids }),
     []
   );
-  const replaceNodes = useCallback23(
+  const replaceNodes = useCallback24(
     (nodes) => dispatch({ type: "REPLACE_NODES", payload: nodes }),
     []
   );
-  const addEdge = useCallback23(
+  const addEdge = useCallback24(
     (edge) => dispatch({ type: "ADD_EDGE", payload: edge }),
     []
   );
-  const createEdge = useCallback23(
+  const createEdge = useCallback24(
     (source, sourcePort, target, targetPort) => {
       const edge = {
         id: genId("edge"),
@@ -16020,20 +16428,20 @@ function useWorkflow(options = {}) {
     },
     []
   );
-  const deleteEdge = useCallback23(
+  const deleteEdge = useCallback24(
     (id) => dispatch({ type: "DELETE_EDGE", payload: id }),
     []
   );
-  const replaceEdges = useCallback23(
+  const replaceEdges = useCallback24(
     (edges) => dispatch({ type: "REPLACE_EDGES", payload: edges }),
     []
   );
-  const startConnecting = useCallback23(
+  const startConnecting = useCallback24(
     (nodeId, portId, portType) => dispatch({ type: "START_CONNECTING", payload: { nodeId, portId, portType } }),
     []
   );
-  const endConnecting = useCallback23(() => dispatch({ type: "END_CONNECTING" }), []);
-  const selectNode = useCallback23(
+  const endConnecting = useCallback24(() => dispatch({ type: "END_CONNECTING" }), []);
+  const selectNode = useCallback24(
     (id, multi = false) => {
       if (multi) {
         const current = workflow.canvas.selectedNodes;
@@ -16045,36 +16453,36 @@ function useWorkflow(options = {}) {
     },
     [workflow.canvas.selectedNodes]
   );
-  const selectNodes = useCallback23(
+  const selectNodes = useCallback24(
     (ids) => dispatch({ type: "SELECT_NODES", payload: ids }),
     []
   );
-  const selectEdge = useCallback23(
+  const selectEdge = useCallback24(
     (id) => dispatch({ type: "SELECT_EDGE", payload: id }),
     []
   );
-  const deselectAll = useCallback23(() => dispatch({ type: "DESELECT_ALL" }), []);
-  const zoomIn = useCallback23(() => {
+  const deselectAll = useCallback24(() => dispatch({ type: "DESELECT_ALL" }), []);
+  const zoomIn = useCallback24(() => {
     const z = Math.min(workflow.canvas.viewport.zoom * 1.2, 2);
     dispatch({ type: "UPDATE_VIEWPORT", payload: { zoom: z } });
   }, [workflow.canvas.viewport.zoom]);
-  const zoomOut = useCallback23(() => {
+  const zoomOut = useCallback24(() => {
     const z = Math.max(workflow.canvas.viewport.zoom / 1.2, 0.25);
     dispatch({ type: "UPDATE_VIEWPORT", payload: { zoom: z } });
   }, [workflow.canvas.viewport.zoom]);
-  const resetViewport = useCallback23(
+  const resetViewport = useCallback24(
     () => dispatch({ type: "UPDATE_VIEWPORT", payload: { x: 0, y: 0, zoom: 1 } }),
     []
   );
-  const setViewport = useCallback23(
+  const setViewport = useCallback24(
     (viewport) => dispatch({ type: "UPDATE_VIEWPORT", payload: viewport }),
     []
   );
-  const undo = useCallback23(() => dispatch({ type: "UNDO" }), []);
-  const redo = useCallback23(() => dispatch({ type: "REDO" }), []);
+  const undo = useCallback24(() => dispatch({ type: "UNDO" }), []);
+  const redo = useCallback24(() => dispatch({ type: "REDO" }), []);
   const canUndo = workflow.canvas.history.past.length > 0;
   const canRedo = workflow.canvas.history.future.length > 0;
-  const validate = useCallback23(() => workflow.validation, [workflow.validation]);
+  const validate = useCallback24(() => workflow.validation, [workflow.validation]);
   return {
     workflow,
     dispatch,
@@ -16180,35 +16588,35 @@ function WorkflowEditor({
 }) {
   const wf = useWorkflow(options);
   const { workflow, dispatch, canUndo, canRedo, undo, redo } = wf;
-  const [uncontrolledLock, setUncontrolledLock] = useState35(false);
-  const [uncontrolledDrawer, setUncontrolledDrawer] = useState35(!!drawer);
-  const [uncontrolledHistory, setUncontrolledHistory] = useState35(false);
-  const [uncontrolledDebug, setUncontrolledDebug] = useState35(false);
+  const [uncontrolledLock, setUncontrolledLock] = useState37(false);
+  const [uncontrolledDrawer, setUncontrolledDrawer] = useState37(!!drawer);
+  const [uncontrolledHistory, setUncontrolledHistory] = useState37(false);
+  const [uncontrolledDebug, setUncontrolledDebug] = useState37(false);
   const isLockMode = controlledLockMode ?? uncontrolledLock;
   const isDrawerOpen = controlledDrawerOpen ?? uncontrolledDrawer;
   const isHistoryOpen = controlledHistoryOpen ?? uncontrolledHistory;
   const isDebugOpen = controlledDebugOpen ?? uncontrolledDebug;
-  const toggleLock = useCallback24(() => {
+  const toggleLock = useCallback25(() => {
     const next = !isLockMode;
     if (controlledLockMode === void 0) setUncontrolledLock(next);
     onToggleLockMode?.(next);
   }, [isLockMode, controlledLockMode, onToggleLockMode]);
-  const toggleDrawer = useCallback24(() => {
+  const toggleDrawer = useCallback25(() => {
     const next = !isDrawerOpen;
     if (controlledDrawerOpen === void 0) setUncontrolledDrawer(next);
     onToggleDrawer?.(next);
   }, [isDrawerOpen, controlledDrawerOpen, onToggleDrawer]);
-  const toggleHistory = useCallback24(() => {
+  const toggleHistory = useCallback25(() => {
     const next = !isHistoryOpen;
     if (controlledHistoryOpen === void 0) setUncontrolledHistory(next);
     onToggleHistory?.(next);
   }, [isHistoryOpen, controlledHistoryOpen, onToggleHistory]);
-  const toggleDebug = useCallback24(() => {
+  const toggleDebug = useCallback25(() => {
     const next = !isDebugOpen;
     if (controlledDebugOpen === void 0) setUncontrolledDebug(next);
     onToggleDebug?.(next);
   }, [isDebugOpen, controlledDebugOpen, onToggleDebug]);
-  const handleReset = useCallback24(() => {
+  const handleReset = useCallback25(() => {
     if (onReset) onReset();
     else dispatch({ type: "RESET" });
   }, [onReset, dispatch]);
@@ -16217,7 +16625,7 @@ function WorkflowEditor({
     [workflow.canvas.nodes]
   );
   const nextEdges = useMemo16(() => workflow.canvas.edges.map(toNextEdge), [workflow.canvas.edges]);
-  const onNodesChange = useCallback24(
+  const onNodesChange = useCallback25(
     (changes) => {
       const reduced = applyNodeChanges(
         nextNodes,
@@ -16258,7 +16666,7 @@ function WorkflowEditor({
     },
     [nextNodes, workflow.canvas.nodes, wf, onNodeSelect]
   );
-  const onEdgesChange = useCallback24(
+  const onEdgesChange = useCallback25(
     (changes) => {
       const reduced = applyEdgeChanges(nextEdges, changes);
       const byId = new Map(reduced.map((e) => [e.id, e]));
@@ -16268,18 +16676,18 @@ function WorkflowEditor({
     },
     [nextEdges, workflow.canvas.edges, wf]
   );
-  const onConnect = useCallback24(
+  const onConnect = useCallback25(
     (c) => {
       wf.createEdge(c.source, c.sourceHandle ?? "default", c.target, c.targetHandle ?? "default");
     },
     [wf]
   );
-  const [canvasSize, setCanvasSize] = useState35({ w: 0, h: 0 });
-  const handleCanvasRef = useCallback24((node) => {
+  const [canvasSize, setCanvasSize] = useState37({ w: 0, h: 0 });
+  const handleCanvasRef = useCallback25((node) => {
     if (!node) return;
     setCanvasSize({ w: node.clientWidth, h: node.clientHeight });
   }, []);
-  const fitToView = useCallback24(() => {
+  const fitToView = useCallback25(() => {
     const nodes = workflow.canvas.nodes;
     if (nodes.length === 0) return;
     let minX = Infinity;
@@ -16513,8 +16921,8 @@ function DefaultEmptyState() {
 }
 
 // src/components/XmlViewer/XmlViewer.tsx
-import { useMemo as useMemo17, useState as useState36 } from "react";
-import { Fragment as Fragment25, jsx as jsx96, jsxs as jsxs93 } from "react/jsx-runtime";
+import { useMemo as useMemo17, useState as useState38 } from "react";
+import { Fragment as Fragment26, jsx as jsx96, jsxs as jsxs93 } from "react/jsx-runtime";
 function parseXml(src) {
   if (typeof window !== "undefined" && typeof window.DOMParser !== "undefined") {
     try {
@@ -16595,7 +17003,7 @@ function XmlNodeRow({
   showAttributes,
   truncateAt
 }) {
-  const [open, setOpen] = useState36(depth < defaultExpandDepth);
+  const [open, setOpen] = useState38(depth < defaultExpandDepth);
   const pad2 = depth * 14;
   if (node.type === "text") {
     const t = (node.text ?? "").trim();
@@ -16664,9 +17072,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(Fragment25, { children: [
+          isSelfClosing ? /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__bracket", children: " />" }) : /* @__PURE__ */ jsxs93(Fragment26, { children: [
             /* @__PURE__ */ jsx96("span", { className: "ods-xml-viewer__bracket", children: ">" }),
-            !open && /* @__PURE__ */ jsxs93(Fragment25, { children: [
+            !open && /* @__PURE__ */ jsxs93(Fragment26, { children: [
               /* @__PURE__ */ jsxs93("span", { className: "ods-xml-viewer__preview", children: [
                 children.length,
                 " child",
@@ -16680,7 +17088,7 @@ function XmlNodeRow({
         ]
       }
     ),
-    !isSelfClosing && open && /* @__PURE__ */ jsxs93(Fragment25, { children: [
+    !isSelfClosing && open && /* @__PURE__ */ jsxs93(Fragment26, { children: [
       children.map((c, i) => /* @__PURE__ */ jsx96(
         XmlNodeRow,
         {
@@ -16703,8 +17111,8 @@ function XmlNodeRow({
 }
 
 // src/components/YamlViewer/YamlViewer.tsx
-import { useMemo as useMemo18, useState as useState37 } from "react";
-import { Fragment as Fragment26, jsx as jsx97, jsxs as jsxs94 } from "react/jsx-runtime";
+import { useMemo as useMemo18, useState as useState39 } from "react";
+import { Fragment as Fragment27, jsx as jsx97, jsxs as jsxs94 } from "react/jsx-runtime";
 function toYaml(value, indent = 0) {
   const pad2 = "  ".repeat(indent);
   if (value === null) return "null";
@@ -16849,7 +17257,7 @@ function YamlViewer({
     }
   }, [data]);
   const tokens = useMemo18(() => tokenizeYaml(text), [text]);
-  const [collapsed, setCollapsed] = useState37(() => {
+  const [collapsed, setCollapsed] = useState39(() => {
     const s = /* @__PURE__ */ new Set();
     tokens.forEach((t) => {
       if (t.hasChildren && t.depth >= defaultExpandDepth) s.add(t.index);
@@ -16930,7 +17338,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(Fragment26, { children: [
+            t.kind === "key" && /* @__PURE__ */ jsxs94(Fragment27, { 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: ":" }),
@@ -16949,7 +17357,7 @@ function YamlViewer({
               ),
               isCollapsed && /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__preview", children: " \u2026" })
             ] }),
-            t.kind === "sequence" && /* @__PURE__ */ jsxs94(Fragment26, { children: [
+            t.kind === "sequence" && /* @__PURE__ */ jsxs94(Fragment27, { children: [
               /* @__PURE__ */ jsx97("span", { className: "ods-yaml-viewer__dash", children: "- " }),
               /* @__PURE__ */ jsx97(
                 "span",
@@ -16983,13 +17391,13 @@ function YamlViewer({
 
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect22, useMemo as useMemo19 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect25, useMemo as useMemo19 } 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 = useMemo19(() => resolveConfig(userConfig), [userConfig]);
-  useEffect22(() => {
+  useEffect25(() => {
     const cssVarsBlock = generateCssVars(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {
@@ -17276,9 +17684,16 @@ export {
   FlowMinimap,
   FlowNode,
   FlowToolbar,
+  FlowToolbarAutoLayout,
   FlowToolbarButton,
   FlowToolbarDivider,
+  FlowToolbarFitView,
   FlowToolbarIcons,
+  FlowToolbarRedo,
+  FlowToolbarReset,
+  FlowToolbarRun,
+  FlowToolbarSave,
+  FlowToolbarUndo,
   FlowToolbarZoom,
   FormSection,
   HoverCard,