@inf-monkeys-tech/monkeys-design 1.0.49 → 1.0.52

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var debounce = require('lodash/debounce.js');
 var runtime = require('@inf-monkeys-tech/monkeys/runtime');
-var React2 = require('react');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
 var tailwindMerge = require('tailwind-merge');
@@ -44,7 +44,7 @@ function _interopNamespace(e) {
 }
 
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
 var ContextMenu__namespace = /*#__PURE__*/_interopNamespace(ContextMenu);
 var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
@@ -3798,17 +3798,17 @@ var MONKEYS_PROVIDER_CONTEXTS_KEY = /* @__PURE__ */ Symbol.for(
 );
 function createMonkeysProviderContexts() {
   return Object.freeze({
-    locale: React2.createContext({
+    locale: React4.createContext({
       ...defaultMonkeysLocale,
       provided: false
     }),
-    theme: React2.createContext({
+    theme: React4.createContext({
       provided: false
     }),
-    direction: React2.createContext({
+    direction: React4.createContext({
       provided: false
     }),
-    environment: React2.createContext({
+    environment: React4.createContext({
       provided: false,
       environment: EMPTY_ENVIRONMENT,
       portal: EMPTY_PORTAL
@@ -3844,49 +3844,49 @@ function mergeAppearance(inherited, explicit) {
   };
 }
 function useMonkeysLocale() {
-  return React2.useContext(MonkeysLocaleContext);
+  return React4.useContext(MonkeysLocaleContext);
 }
 function useMonkeysLocaleMessages() {
-  return React2.useContext(MonkeysLocaleContext).messages;
+  return React4.useContext(MonkeysLocaleContext).messages;
 }
 function useMonkeysResolvedTheme() {
-  return React2.useContext(MonkeysThemeContext).resolvedTheme;
+  return React4.useContext(MonkeysThemeContext).resolvedTheme;
 }
 function useMonkeysBaseAppearance(explicit) {
-  const inherited = React2.useContext(MonkeysThemeContext).baseAppearance;
-  return React2.useMemo(
+  const inherited = React4.useContext(MonkeysThemeContext).baseAppearance;
+  return React4.useMemo(
     () => mergeAppearance(inherited, explicit),
     [explicit, inherited]
   );
 }
 function useMonkeysDataExplorerAppearance(explicit) {
-  const inherited = React2.useContext(MonkeysThemeContext).dataExplorerAppearance;
-  return React2.useMemo(
+  const inherited = React4.useContext(MonkeysThemeContext).dataExplorerAppearance;
+  return React4.useMemo(
     () => mergeAppearance(inherited, explicit),
     [explicit, inherited]
   );
 }
 function useMonkeysStatusStates() {
-  return React2.useContext(MonkeysThemeContext).statusStates ?? {};
+  return React4.useContext(MonkeysThemeContext).statusStates ?? {};
 }
 function useMonkeysListFooter() {
-  return React2.useContext(MonkeysThemeContext).listFooter ?? {};
+  return React4.useContext(MonkeysThemeContext).listFooter ?? {};
 }
 function useMonkeysDirection() {
-  return React2.useContext(MonkeysDirectionContext).direction;
+  return React4.useContext(MonkeysDirectionContext).direction;
 }
 function useMonkeysEnvironment() {
-  return React2.useContext(MonkeysEnvironmentContext).environment;
+  return React4.useContext(MonkeysEnvironmentContext).environment;
 }
 function useMonkeysPortalOptions() {
-  return React2.useContext(MonkeysEnvironmentContext).portal;
+  return React4.useContext(MonkeysEnvironmentContext).portal;
 }
 function useMonkeysComponentAttributes() {
-  const locale = React2.useContext(MonkeysLocaleContext);
-  const theme = React2.useContext(MonkeysThemeContext);
-  const direction = React2.useContext(MonkeysDirectionContext);
+  const locale = React4.useContext(MonkeysLocaleContext);
+  const theme = React4.useContext(MonkeysThemeContext);
+  const direction = React4.useContext(MonkeysDirectionContext);
   const providerActive = locale.provided || theme.provided || direction.provided;
-  return React2.useMemo(
+  return React4.useMemo(
     () => providerActive ? {
       dir: direction.direction,
       "data-monkeys-direction": direction.direction,
@@ -3961,22 +3961,22 @@ function MonkeysProvider({
   statusStates,
   listFooter
 }) {
-  const parentLocale = React2.useContext(MonkeysLocaleContext);
-  const parentTheme = React2.useContext(MonkeysThemeContext);
-  const parentDirection = React2.useContext(MonkeysDirectionContext);
-  const parentEnvironment = React2.useContext(MonkeysEnvironmentContext);
+  const parentLocale = React4.useContext(MonkeysLocaleContext);
+  const parentTheme = React4.useContext(MonkeysThemeContext);
+  const parentDirection = React4.useContext(MonkeysDirectionContext);
+  const parentEnvironment = React4.useContext(MonkeysEnvironmentContext);
   validateDirection(direction);
   validateEnvironment(environment);
   validatePortal(portal);
-  const resolvedLocale = React2.useMemo(
+  const resolvedLocale = React4.useMemo(
     () => resolveMonkeysLocale(locale, messages, parentLocale),
     [locale, messages, parentLocale]
   );
-  const localeValue = React2.useMemo(
+  const localeValue = React4.useMemo(
     () => ({ ...resolvedLocale, provided: true }),
     [resolvedLocale]
   );
-  const resolvedTheme = React2.useMemo(
+  const resolvedTheme = React4.useMemo(
     () => resolveProviderTheme(
       theme,
       colorMode,
@@ -3985,7 +3985,7 @@ function MonkeysProvider({
     ),
     [colorMode, density, parentTheme.resolvedTheme, theme]
   );
-  const themeValue = React2.useMemo(
+  const themeValue = React4.useMemo(
     () => ({
       provided: true,
       resolvedTheme,
@@ -4044,14 +4044,14 @@ function MonkeysProvider({
       themeId
     ]
   );
-  const directionValue = React2.useMemo(
+  const directionValue = React4.useMemo(
     () => ({
       provided: true,
       direction: direction ?? parentDirection.direction ?? "ltr"
     }),
     [direction, parentDirection.direction]
   );
-  const environmentValue = React2.useMemo(
+  const environmentValue = React4.useMemo(
     () => ({
       provided: true,
       environment: {
@@ -5768,7 +5768,7 @@ function getDomIdFragments(items) {
     return fragment;
   });
 }
-var BaseAccordion = React2.forwardRef(
+var BaseAccordion = React4.forwardRef(
   function BaseAccordion2({
     items = [],
     value,
@@ -5795,19 +5795,19 @@ var BaseAccordion = React2.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const rootId = id ?? generatedId;
-    const [uncontrolledValue, setUncontrolledValue] = React2.useState(defaultValue);
-    const [focusedValue, setFocusedValue] = React2.useState();
-    const triggerRefs = React2.useRef(/* @__PURE__ */ new Map());
-    const ownsTriggerFocusRef = React2.useRef(false);
+    const [uncontrolledValue, setUncontrolledValue] = React4.useState(defaultValue);
+    const [focusedValue, setFocusedValue] = React4.useState();
+    const triggerRefs = React4.useRef(/* @__PURE__ */ new Map());
+    const ownsTriggerFocusRef = React4.useRef(false);
     const isControlled = value !== void 0;
     const openValue = isControlled ? value : uncontrolledValue;
     const idFragments = getDomIdFragments(items);
     const enabledItems = items.filter((item) => !item.disabled);
     const openItem = items.find((item) => item.value === openValue);
     const layerDirection = typeof accordionProps.dir === "string" ? accordionProps.dir : componentAttributes.dir;
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!ownsTriggerFocusRef.current || focusedValue === void 0) return;
       const focusedItem = items.find((item) => item.value === focusedValue);
       if (focusedItem && !focusedItem.disabled) return;
@@ -5902,7 +5902,7 @@ var BaseAccordion = React2.forwardRef(
           const panelId = `${rootId}-${itemId}-panel`;
           const open = item.value === openValue;
           const state = open ? "open" : "closed";
-          return /* @__PURE__ */ React2.createElement(
+          return /* @__PURE__ */ React4.createElement(
             "div",
             {
               ...componentAttributes,
@@ -6007,7 +6007,7 @@ function getInitials(name) {
   if (!words.length) return void 0;
   return words.slice(0, 2).map((word) => word[0]?.toUpperCase()).join("");
 }
-var BaseAvatar = React2.forwardRef(
+var BaseAvatar = React4.forwardRef(
   function BaseAvatar2({
     src,
     alt,
@@ -6030,14 +6030,14 @@ var BaseAvatar = React2.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const [failedSrc, setFailedSrc] = React2.useState();
+    const [failedSrc, setFailedSrc] = React4.useState();
     const imageFailed = Boolean(src && failedSrc === src);
     const showImage = Boolean(src) && !imageFailed;
     const generatedInitials = getInitials(name);
     const fallbackKind = hasRenderableNode(children) ? "children" : hasRenderableNode(initials) ? "initials" : hasRenderableNode(generatedInitials) ? "name" : hasRenderableNode(icon) ? "icon" : "default";
     const fallback = hasRenderableNode(children) ? children : hasRenderableNode(initials) ? initials : hasRenderableNode(generatedInitials) ? generatedInitials : hasRenderableNode(icon) ? icon : "?";
     const statusKind = isStatusPreset(status) ? status : hasRenderableNode(status) ? "custom" : void 0;
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       setFailedSrc(void 0);
     }, [src]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6124,7 +6124,7 @@ function resolveAspectRatio(value) {
   }
   return String(value);
 }
-var BaseAspectRatio = React2.forwardRef(function BaseAspectRatio2({
+var BaseAspectRatio = React4.forwardRef(function BaseAspectRatio2({
   children,
   ratio = 16 / 9,
   appearance,
@@ -6155,7 +6155,7 @@ var BaseAspectRatio = React2.forwardRef(function BaseAspectRatio2({
     }
   );
 });
-var BaseBadge = React2.forwardRef(
+var BaseBadge = React4.forwardRef(
   function BaseBadge2({
     children,
     label,
@@ -6368,7 +6368,7 @@ function LoadingIcon() {
     }
   );
 }
-var BaseButton = React2.forwardRef(
+var BaseButton = React4.forwardRef(
   function BaseButton2({
     children,
     label,
@@ -6562,17 +6562,17 @@ function resolveBaseFieldValidationResult(result) {
     "BaseField validate must return a non-empty error string or null."
   );
 }
-var BaseFieldContext = React2.createContext(
+var BaseFieldContext = React4.createContext(
   null
 );
 function useBaseFieldControl() {
-  const context = React2.useContext(BaseFieldContext);
-  const controlKeyRef = React2.useRef(null);
+  const context = React4.useContext(BaseFieldContext);
+  const controlKeyRef = React4.useRef(null);
   if (controlKeyRef.current === null) {
     controlKeyRef.current = /* @__PURE__ */ Symbol("BaseFieldControl");
   }
   const registerControl = context?.registerControl;
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!registerControl || controlKeyRef.current === null) return void 0;
     return registerControl(controlKeyRef.current);
   }, [registerControl]);
@@ -6580,11 +6580,11 @@ function useBaseFieldControl() {
   const notifyChange = context?.notifyChange;
   return {
     invalid: context?.invalid ?? false,
-    notifyBlur: React2.useCallback(
+    notifyBlur: React4.useCallback(
       (value) => notifyBlur?.(value),
       [notifyBlur]
     ),
-    notifyChange: React2.useCallback(
+    notifyChange: React4.useCallback(
       (value) => notifyChange?.(value),
       [notifyChange]
     )
@@ -6610,7 +6610,7 @@ function setRefs(element, ...refs) {
     ref.current = element;
   }
 }
-var BaseCheckbox = React2.forwardRef(
+var BaseCheckbox = React4.forwardRef(
   function BaseCheckbox2({
     label,
     description,
@@ -6650,17 +6650,17 @@ var BaseCheckbox = React2.forwardRef(
     const resolvedInvalid = invalid || fieldControl.invalid;
     const hasLabel = hasRenderableNode(label);
     const hasDescription = hasNonEmptyRenderableNode(description);
-    const inputRef = React2.useRef(null);
-    const indeterminateRef = React2.useRef(indeterminate);
+    const inputRef = React4.useRef(null);
+    const indeterminateRef = React4.useRef(indeterminate);
     indeterminateRef.current = indeterminate;
-    const [uncontrolledChecked, setUncontrolledChecked] = React2.useState(
+    const [uncontrolledChecked, setUncontrolledChecked] = React4.useState(
       defaultChecked ?? false
     );
     const isControlled = checked !== void 0;
     const resolvedChecked = Boolean(isControlled ? checked : uncontrolledChecked);
     const active = indeterminate || resolvedChecked;
     const state = indeterminate ? "mixed" : resolvedChecked ? "checked" : "unchecked";
-    const setInputRef = React2.useCallback(
+    const setInputRef = React4.useCallback(
       (element) => {
         inputRef.current = element;
         if (element) element.indeterminate = indeterminateRef.current;
@@ -6668,7 +6668,7 @@ var BaseCheckbox = React2.forwardRef(
       },
       [forwardedRef]
     );
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = indeterminate;
       }
@@ -6799,7 +6799,7 @@ var BaseCheckbox = React2.forwardRef(
     );
   }
 );
-var BaseCode = React2.forwardRef(function BaseCode2({
+var BaseCode = React4.forwardRef(function BaseCode2({
   children,
   display = "inline",
   appearance,
@@ -6863,7 +6863,7 @@ var BaseCode = React2.forwardRef(function BaseCode2({
     }
   );
 });
-var BaseContainer = React2.forwardRef(
+var BaseContainer = React4.forwardRef(
   function BaseContainer2({
     children,
     maxWidth = "80rem",
@@ -6950,8 +6950,8 @@ function resolveBasePortalContainer({
 function BasePortal(props) {
   const environment = useMonkeysEnvironment();
   const portalOptions = useMonkeysPortalOptions();
-  const [mounted, setMounted] = React2.useState(false);
-  React2.useEffect(() => {
+  const [mounted, setMounted] = React4.useState(false);
+  React4.useEffect(() => {
     setMounted(true);
   }, []);
   if (props.disabled !== void 0 && typeof props.disabled !== "boolean") {
@@ -7021,8 +7021,8 @@ function getDefaultDocument() {
 function useBaseOverlayPortal(options = {}) {
   const environment = useMonkeysEnvironment();
   const portalOptions = useMonkeysPortalOptions();
-  const [mounted, setMounted] = React2.useState(false);
-  React2.useEffect(() => {
+  const [mounted, setMounted] = React4.useState(false);
+  React4.useEffect(() => {
     setMounted(true);
   }, []);
   return resolveBaseOverlayPortalState({
@@ -7175,7 +7175,7 @@ function BaseContextMenu({
     }
   );
 }
-var BaseContextMenuTrigger = React2.forwardRef(function BaseContextMenuTrigger2({
+var BaseContextMenuTrigger = React4.forwardRef(function BaseContextMenuTrigger2({
   children,
   disabled = false,
   asChild = false,
@@ -7210,7 +7210,7 @@ var BaseContextMenuTrigger = React2.forwardRef(function BaseContextMenuTrigger2(
     }
   );
 });
-var BaseContextMenuContent = React2.forwardRef(function BaseContextMenuContent2({
+var BaseContextMenuContent = React4.forwardRef(function BaseContextMenuContent2({
   children,
   appearance,
   className,
@@ -7240,7 +7240,7 @@ var BaseContextMenuContent = React2.forwardRef(function BaseContextMenuContent2(
   );
   return portal.shouldPortal ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenu__namespace.Portal, { ...portal.radixPortalProps, children: content }) : content;
 });
-var BaseContextMenuLabel = React2.forwardRef(function BaseContextMenuLabel2({ children, appearance, className, style, ...labelProps }, ref) {
+var BaseContextMenuLabel = React4.forwardRef(function BaseContextMenuLabel2({ children, appearance, className, style, ...labelProps }, ref) {
   const resolvedAppearance = useMonkeysBaseAppearance(appearance);
   const componentAttributes = useMonkeysComponentAttributes();
   const theme = resolveBaseAppearance(resolvedAppearance);
@@ -7258,7 +7258,7 @@ var BaseContextMenuLabel = React2.forwardRef(function BaseContextMenuLabel2({ ch
     }
   );
 });
-var BaseContextMenuSeparator = React2.forwardRef(function BaseContextMenuSeparator2({ appearance, className, style, ...separatorProps }, ref) {
+var BaseContextMenuSeparator = React4.forwardRef(function BaseContextMenuSeparator2({ appearance, className, style, ...separatorProps }, ref) {
   const resolvedAppearance = useMonkeysBaseAppearance(appearance);
   const componentAttributes = useMonkeysComponentAttributes();
   const theme = resolveBaseAppearance(resolvedAppearance);
@@ -7275,7 +7275,7 @@ var BaseContextMenuSeparator = React2.forwardRef(function BaseContextMenuSeparat
     }
   );
 });
-var BaseContextMenuItem = React2.forwardRef(function BaseContextMenuItem2({
+var BaseContextMenuItem = React4.forwardRef(function BaseContextMenuItem2({
   children,
   label,
   icon,
@@ -7341,7 +7341,7 @@ var BaseContextMenuItem = React2.forwardRef(function BaseContextMenuItem2({
     }
   );
 });
-var BaseContextMenuCheckboxItem = React2.forwardRef(function BaseContextMenuCheckboxItem2({
+var BaseContextMenuCheckboxItem = React4.forwardRef(function BaseContextMenuCheckboxItem2({
   children,
   label,
   icon,
@@ -7436,7 +7436,7 @@ function BaseContextMenuRadioGroup({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ContextMenu__namespace.RadioGroup, { value, onValueChange, children });
 }
-var BaseContextMenuRadioItem = React2.forwardRef(function BaseContextMenuRadioItem2({
+var BaseContextMenuRadioItem = React4.forwardRef(function BaseContextMenuRadioItem2({
   children,
   label,
   icon,
@@ -7534,7 +7534,7 @@ function BaseContextMenuSub({
     }
   );
 }
-var BaseContextMenuSubTrigger = React2.forwardRef(function BaseContextMenuSubTrigger2({
+var BaseContextMenuSubTrigger = React4.forwardRef(function BaseContextMenuSubTrigger2({
   children,
   label,
   icon,
@@ -7617,7 +7617,7 @@ var BaseContextMenuSubTrigger = React2.forwardRef(function BaseContextMenuSubTri
     }
   );
 });
-var BaseContextMenuSubContent = React2.forwardRef(function BaseContextMenuSubContent2({
+var BaseContextMenuSubContent = React4.forwardRef(function BaseContextMenuSubContent2({
   children,
   appearance,
   className,
@@ -7773,7 +7773,7 @@ function renderTrigger({
     }
   );
 }
-var BaseDialog = React2.forwardRef(
+var BaseDialog = React4.forwardRef(
   function BaseDialog2({
     open,
     defaultOpen = false,
@@ -7831,9 +7831,9 @@ var BaseDialog = React2.forwardRef(
     const resolvedCloseLabel = closeLabel === void 0 ? messages.close : closeLabel;
     const theme = resolveBaseAppearance(resolvedAppearance);
     const overlayPortal = useBaseOverlayPortal({ disabled: !portal });
-    const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen);
-    const panelRef = React2.useRef(null);
-    const returnFocusRef = React2.useRef(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(defaultOpen);
+    const panelRef = React4.useRef(null);
+    const returnFocusRef = React4.useRef(null);
     const isControlled = open !== void 0;
     const isOpen = isControlled ? open : uncontrolledOpen;
     const portalState = portal && overlayPortal.shouldPortal ? "portaled" : "inline";
@@ -7851,7 +7851,7 @@ var BaseDialog = React2.forwardRef(
       }
       onOpenChange?.(nextOpen);
     };
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!isOpen || !keepMounted) return void 0;
       const panel = panelRef.current;
       const ownerDocument = panel?.ownerDocument;
@@ -8128,7 +8128,7 @@ var BaseDialog = React2.forwardRef(
     );
   }
 );
-var BaseDivider = React2.forwardRef(
+var BaseDivider = React4.forwardRef(
   function BaseDivider2({
     orientation = "horizontal",
     label,
@@ -8323,7 +8323,7 @@ function renderTrigger2({
     }
   );
 }
-var BaseDropdownMenu = React2.forwardRef(function BaseDropdownMenu2({
+var BaseDropdownMenu = React4.forwardRef(function BaseDropdownMenu2({
   items = [],
   label,
   trigger,
@@ -8360,7 +8360,7 @@ var BaseDropdownMenu = React2.forwardRef(function BaseDropdownMenu2({
   const messages = useMonkeysLocaleMessages().dropdownMenu;
   const theme = resolveBaseAppearance(resolvedAppearance);
   const overlayPortal = useBaseOverlayPortal({ disabled: !portal });
-  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolledOpen;
   const resolvedTriggerLabel = triggerLabel === void 0 ? messages.actions : triggerLabel;
@@ -8609,7 +8609,7 @@ function DefaultEmptyIcon() {
     }
   );
 }
-var BaseEmptyState = React2.forwardRef(
+var BaseEmptyState = React4.forwardRef(
   function BaseEmptyState2({
     icon = /* @__PURE__ */ jsxRuntime.jsx(DefaultEmptyIcon, {}),
     title,
@@ -8708,7 +8708,7 @@ function resolveOptionalId(value, fallback, name) {
   }
   return value;
 }
-var BaseField = React2.forwardRef(
+var BaseField = React4.forwardRef(
   function BaseField2({
     label,
     description,
@@ -8745,33 +8745,33 @@ var BaseField = React2.forwardRef(
         'BaseField validationMode must be "onBlur" or "onChange".'
       );
     }
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
     const hasDescription = hasRenderableNode(description);
-    const [internalError, setInternalError] = React2.useState(null);
-    const registeredControlsRef = React2.useRef(/* @__PURE__ */ new Set());
-    const validateRef = React2.useRef(validate);
-    const validationModeRef = React2.useRef(validationMode);
-    const disabledRef = React2.useRef(disabled);
+    const [internalError, setInternalError] = React4.useState(null);
+    const registeredControlsRef = React4.useRef(/* @__PURE__ */ new Set());
+    const validateRef = React4.useRef(validate);
+    const validationModeRef = React4.useRef(validationMode);
+    const disabledRef = React4.useRef(disabled);
     validateRef.current = validate;
     validationModeRef.current = validationMode;
     disabledRef.current = disabled;
     const hasValidator = validate !== void 0;
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!hasValidator || disabled) {
         setInternalError(null);
       }
     }, [disabled, hasValidator]);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (hasValidator && registeredControlsRef.current.size !== 1) {
         throw new TypeError(
           "BaseField with validate must contain exactly one compatible Base control."
         );
       }
     }, [hasValidator]);
-    const registerControl = React2.useCallback((controlKey) => {
+    const registerControl = React4.useCallback((controlKey) => {
       const registeredControls = registeredControlsRef.current;
       if (validateRef.current !== void 0 && !registeredControls.has(controlKey) && registeredControls.size > 0) {
         throw new TypeError(
@@ -8783,7 +8783,7 @@ var BaseField = React2.forwardRef(
         registeredControls.delete(controlKey);
       };
     }, []);
-    const runValidation = React2.useCallback(
+    const runValidation = React4.useCallback(
       (mode, value) => {
         const currentValidate = validateRef.current;
         if (disabledRef.current || currentValidate === void 0 || validationModeRef.current !== mode) {
@@ -8798,11 +8798,11 @@ var BaseField = React2.forwardRef(
       },
       []
     );
-    const notifyBlur = React2.useCallback(
+    const notifyBlur = React4.useCallback(
       (value) => runValidation("onBlur", value),
       [runValidation]
     );
-    const notifyChange = React2.useCallback(
+    const notifyChange = React4.useCallback(
       (value) => runValidation("onChange", value),
       [runValidation]
     );
@@ -8832,7 +8832,7 @@ var BaseField = React2.forwardRef(
       disabled: disabled || void 0
     };
     const renderedChildren = typeof children === "function" ? children(controlProps) : children;
-    const fieldContextValue = React2.useMemo(
+    const fieldContextValue = React4.useMemo(
       () => ({
         invalid: hasError,
         registerControl,
@@ -8952,7 +8952,7 @@ function resolveOptionalId2(value, fallback, name) {
   }
   return value;
 }
-var BaseFieldset = React2.forwardRef(
+var BaseFieldset = React4.forwardRef(
   function BaseFieldset2({
     children,
     legend,
@@ -8969,7 +8969,7 @@ var BaseFieldset = React2.forwardRef(
     "aria-errormessage": ariaErrorMessage,
     ...fieldsetProps
   }, ref) {
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
@@ -9053,7 +9053,7 @@ var BaseFieldset = React2.forwardRef(
 function isHeadingLevel(value) {
   return typeof value === "number" && Number.isInteger(value) && value >= 1 && value <= 6;
 }
-var BaseHeading = React2.forwardRef(
+var BaseHeading = React4.forwardRef(
   function BaseHeading2({
     level = 2,
     children,
@@ -9071,7 +9071,7 @@ var BaseHeading = React2.forwardRef(
     if (!isHeadingLevel(level)) {
       throw new RangeError("BaseHeading level must be an integer from 1 to 6.");
     }
-    return React2.createElement(
+    return React4.createElement(
       `h${level}`,
       {
         ...componentAttributes,
@@ -9098,7 +9098,7 @@ var BaseHeading = React2.forwardRef(
     );
   }
 );
-var BaseGrid = React2.forwardRef(
+var BaseGrid = React4.forwardRef(
   function BaseGrid2({
     children,
     columns = 1,
@@ -9145,7 +9145,7 @@ var controlSizeClassNames = {
   md: "h-9 px-3 text-sm",
   lg: "h-10 px-3.5 text-base"
 };
-var BaseInput = React2.forwardRef(
+var BaseInput = React4.forwardRef(
   function BaseInput2({
     icon,
     trailing,
@@ -9254,7 +9254,7 @@ var BaseInput = React2.forwardRef(
     );
   }
 );
-var BaseInputGroup = React2.forwardRef(function BaseInputGroup2({
+var BaseInputGroup = React4.forwardRef(function BaseInputGroup2({
   children,
   startElement,
   endElement,
@@ -9371,7 +9371,7 @@ var BaseInputGroup = React2.forwardRef(function BaseInputGroup2({
     }
   );
 });
-var BaseInline = React2.forwardRef(
+var BaseInline = React4.forwardRef(
   function BaseInline2({
     children,
     gap,
@@ -9416,7 +9416,7 @@ var BaseInline = React2.forwardRef(
     );
   }
 );
-var BaseKbd = React2.forwardRef(function BaseKbd2({
+var BaseKbd = React4.forwardRef(function BaseKbd2({
   children,
   appearance,
   className,
@@ -9534,7 +9534,7 @@ function setPointerCaptureIfAvailable(target, pointerId) {
     throw error;
   }
 }
-var BaseLayout = React2.forwardRef(
+var BaseLayout = React4.forwardRef(
   function BaseLayout2({
     header,
     sidebar,
@@ -9664,7 +9664,7 @@ var BaseLayout = React2.forwardRef(
     );
   }
 );
-var BaseLayoutPane = React2.forwardRef(
+var BaseLayoutPane = React4.forwardRef(
   function BaseLayoutPane2({
     as = "div",
     scrollable = false,
@@ -9712,7 +9712,7 @@ var BaseLayoutPane = React2.forwardRef(
     );
   }
 );
-var BaseLayoutResizeHandle = React2.forwardRef(function BaseLayoutResizeHandle2({
+var BaseLayoutResizeHandle = React4.forwardRef(function BaseLayoutResizeHandle2({
   orientation = "horizontal",
   resizable = false,
   disabled = false,
@@ -9794,7 +9794,7 @@ var BaseLayoutResizeHandle = React2.forwardRef(function BaseLayoutResizeHandle2(
     }
   );
 });
-var BaseLayoutSplit = React2.forwardRef(
+var BaseLayoutSplit = React4.forwardRef(
   function BaseLayoutSplit2({
     orientation = "horizontal",
     primary,
@@ -9830,9 +9830,9 @@ var BaseLayoutSplit = React2.forwardRef(
       bounds.min,
       bounds.max
     );
-    const [uncontrolledSize, setUncontrolledSize] = React2.useState(initialSize);
-    const rootRef = React2.useRef(null);
-    const cleanupRef = React2.useRef(null);
+    const [uncontrolledSize, setUncontrolledSize] = React4.useState(initialSize);
+    const rootRef = React4.useRef(null);
+    const cleanupRef = React4.useRef(null);
     const controlled = size !== void 0;
     const interactive = resizable && !disabled;
     const renderedSize = resolveSplitSize(
@@ -9843,14 +9843,14 @@ var BaseLayoutSplit = React2.forwardRef(
       bounds.max
     );
     const resolvedDirection = splitProps.dir ?? componentAttributes.dir;
-    const setRootRef = React2.useCallback(
+    const setRootRef = React4.useCallback(
       (node) => {
         rootRef.current = node;
         assignRef(ref, node);
       },
       [ref]
     );
-    const commitSize = React2.useCallback(
+    const commitSize = React4.useCallback(
       (nextSize) => {
         const clampedSize = clamp(nextSize, bounds.min, bounds.max);
         if (!controlled) {
@@ -9860,7 +9860,7 @@ var BaseLayoutSplit = React2.forwardRef(
       },
       [bounds.max, bounds.min, controlled, onSizeChange]
     );
-    const updateFromPointer = React2.useCallback(
+    const updateFromPointer = React4.useCallback(
       (event) => {
         const root = rootRef.current;
         if (!root) return;
@@ -9872,12 +9872,12 @@ var BaseLayoutSplit = React2.forwardRef(
       },
       [commitSize, orientation]
     );
-    const stopResize = React2.useCallback(() => {
+    const stopResize = React4.useCallback(() => {
       const cleanup = cleanupRef.current;
       cleanupRef.current = null;
       cleanup?.();
     }, []);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!interactive) stopResize();
       return stopResize;
     }, [interactive, stopResize]);
@@ -10027,7 +10027,7 @@ var variantClassNames = {
   block: "h-24 w-full",
   circle: "aspect-square h-10 rounded-full"
 };
-var BaseSkeleton = React2.forwardRef(
+var BaseSkeleton = React4.forwardRef(
   function BaseSkeleton2({
     variant = "line",
     animated = true,
@@ -10107,7 +10107,7 @@ function DefaultLoadingIcon({ className }) {
     }
   );
 }
-var BaseLoadingState = React2.forwardRef(function BaseLoadingState2({
+var BaseLoadingState = React4.forwardRef(function BaseLoadingState2({
   icon,
   title,
   description,
@@ -10200,7 +10200,7 @@ var BaseLoadingState = React2.forwardRef(function BaseLoadingState2({
     }
   );
 });
-var BaseLink = React2.forwardRef(
+var BaseLink = React4.forwardRef(
   function BaseLink2({
     children,
     size = "md",
@@ -10240,7 +10240,7 @@ var BaseLink = React2.forwardRef(
     );
   }
 );
-var BaseList = React2.forwardRef(function BaseList2({
+var BaseList = React4.forwardRef(function BaseList2({
   ordered = false,
   marker = "auto",
   spacing = "default",
@@ -10277,7 +10277,7 @@ var BaseList = React2.forwardRef(function BaseList2({
   };
   return ordered ? /* @__PURE__ */ jsxRuntime.jsx("ol", { ...sharedProps, ref }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { ...sharedProps, ref });
 });
-var BaseListItem = React2.forwardRef(
+var BaseListItem = React4.forwardRef(
   function BaseListItem2({
     children,
     appearance,
@@ -10412,7 +10412,7 @@ function getOptionText(option) {
 function toDomId2(value) {
   return value.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-var BaseMultiSelect = React2.forwardRef(
+var BaseMultiSelect = React4.forwardRef(
   function BaseMultiSelect2({
     options,
     value,
@@ -10454,46 +10454,46 @@ var BaseMultiSelect = React2.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const multiSelectId = id ?? generatedId;
     const controlId = `${multiSelectId}-control`;
     const listboxId = `${multiSelectId}-listbox`;
-    const rootRef = React2.useRef(null);
-    const controlRef = React2.useRef(null);
-    const composingRef = React2.useRef(false);
-    const typeaheadBufferRef = React2.useRef("");
-    const typeaheadTimerRef = React2.useRef(null);
+    const rootRef = React4.useRef(null);
+    const controlRef = React4.useRef(null);
+    const composingRef = React4.useRef(false);
+    const typeaheadBufferRef = React4.useRef("");
+    const typeaheadTimerRef = React4.useRef(null);
     const optionList = options ?? [];
     const optionIds = optionList.map(
       (option, index) => `${multiSelectId}-option-${index}-${toDomId2(option.value)}`
     );
     const forceOpen = openForPreview;
-    const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(false);
+    const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(false);
     const open = forceOpen || uncontrolledOpen;
-    const initialDefaultValueRef = React2.useRef(normalizeValues(defaultValue));
-    const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => [
+    const initialDefaultValueRef = React4.useRef(normalizeValues(defaultValue));
+    const [uncontrolledValue, setUncontrolledValue] = React4.useState(() => [
       ...initialDefaultValueRef.current
     ]);
-    const [activeIndex, setActiveIndex] = React2.useState(
+    const [activeIndex, setActiveIndex] = React4.useState(
       () => getBoundaryEnabledIndex(optionList, "first")
     );
     const isControlled = value !== void 0;
-    const selectedValues = React2.useMemo(
+    const selectedValues = React4.useMemo(
       () => normalizeValues(isControlled ? value : uncontrolledValue),
       [isControlled, uncontrolledValue, value]
     );
-    const selectedValueSet = React2.useMemo(
+    const selectedValueSet = React4.useMemo(
       () => new Set(selectedValues),
       [selectedValues]
     );
-    const optionByValue = React2.useMemo(() => {
+    const optionByValue = React4.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       optionList.forEach((option) => {
         if (!map.has(option.value)) map.set(option.value, option);
       });
       return map;
     }, [optionList]);
-    const selectedOptions = React2.useMemo(
+    const selectedOptions = React4.useMemo(
       () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
         (option) => option !== void 0
       ),
@@ -10623,7 +10623,7 @@ var BaseMultiSelect = React2.forwardRef(
         handleTypeahead(event, event.key);
       }
     };
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!open || forceOpen) return void 0;
       const ownerDocument = rootRef.current?.ownerDocument;
       if (!ownerDocument) return void 0;
@@ -10635,7 +10635,7 @@ var BaseMultiSelect = React2.forwardRef(
       ownerDocument.addEventListener("pointerdown", handlePointerDown);
       return () => ownerDocument.removeEventListener("pointerdown", handlePointerDown);
     }, [forceOpen, open]);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (isControlled) return void 0;
       const form = rootRef.current?.closest("form");
       if (!form) return void 0;
@@ -10647,7 +10647,7 @@ var BaseMultiSelect = React2.forwardRef(
       form.addEventListener("reset", handleReset);
       return () => form.removeEventListener("reset", handleReset);
     }, [forceOpen, isControlled, optionList]);
-    React2.useEffect(
+    React4.useEffect(
       () => () => {
         if (typeaheadTimerRef.current) {
           typeaheadTimerRef.current.ownerWindow.clearTimeout(
@@ -10848,7 +10848,7 @@ var BaseMultiSelect = React2.forwardRef(
               )
             }
           ),
-          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ React2.createElement(
+          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ React4.createElement(
             "input",
             {
               ...componentAttributes,
@@ -10882,7 +10882,7 @@ var BaseMultiSelect = React2.forwardRef(
                 const selected = selectedValueSet.has(option.value);
                 const active = index === resolvedActiveIndex;
                 const optionState = option.disabled ? "disabled" : active ? "active" : selected ? "selected" : "idle";
-                return /* @__PURE__ */ React2.createElement(
+                return /* @__PURE__ */ React4.createElement(
                   "button",
                   {
                     ...componentAttributes,
@@ -11027,7 +11027,7 @@ function validateLabel(name, value) {
 function isInRange(value, min5, max5) {
   return value !== null && (min5 === void 0 || value >= min5) && (max5 === void 0 || value <= max5);
 }
-var BaseNumberInput = React2.forwardRef(function BaseNumberInput2({
+var BaseNumberInput = React4.forwardRef(function BaseNumberInput2({
   value,
   defaultValue = "",
   min: min5,
@@ -11080,7 +11080,7 @@ var BaseNumberInput = React2.forwardRef(function BaseNumberInput2({
   const resolvedDecrementLabel = decrementLabel ?? messages.numberInput.decrement;
   validateLabel("incrementLabel", resolvedIncrementLabel);
   validateLabel("decrementLabel", resolvedDecrementLabel);
-  const [uncontrolledValue, setUncontrolledValue] = React2.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = React4.useState(defaultValue);
   const isControlled = value !== void 0;
   const rawValue = isControlled ? value : uncontrolledValue;
   const parsedValue = parseBaseNumberInputValue(rawValue);
@@ -11404,7 +11404,7 @@ function validateLabel2(name, value) {
     throw new TypeError(`BasePasswordInput ${name} must be a non-empty string.`);
   }
 }
-var BasePasswordInput = React2.forwardRef(function BasePasswordInput2({
+var BasePasswordInput = React4.forwardRef(function BasePasswordInput2({
   visible,
   defaultVisible = false,
   onVisibleChange,
@@ -11438,8 +11438,8 @@ var BasePasswordInput = React2.forwardRef(function BasePasswordInput2({
   const resolvedHideLabel = hidePasswordLabel ?? messages.passwordInput.hidePassword;
   validateLabel2("showPasswordLabel", resolvedShowLabel);
   validateLabel2("hidePasswordLabel", resolvedHideLabel);
-  const inputRef = React2.useRef(null);
-  const [uncontrolledVisible, setUncontrolledVisible] = React2.useState(defaultVisible);
+  const inputRef = React4.useRef(null);
+  const [uncontrolledVisible, setUncontrolledVisible] = React4.useState(defaultVisible);
   const isControlled = visible !== void 0;
   const resolvedVisible = isControlled ? visible : uncontrolledVisible;
   const resolvedAppearance = useMonkeysBaseAppearance(appearance);
@@ -11608,7 +11608,7 @@ function getPageItems(currentPage, pageCount, boundaryCount, siblingCount) {
   });
   return items;
 }
-var BasePagination = React2.forwardRef(
+var BasePagination = React4.forwardRef(
   function BasePagination2({
     page,
     defaultPage,
@@ -11639,7 +11639,7 @@ var BasePagination = React2.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const [uncontrolledPage, setUncontrolledPage] = React2.useState(
+    const [uncontrolledPage, setUncontrolledPage] = React4.useState(
       () => defaultPage ?? 1
     );
     if (page !== void 0) assertPositiveInteger(page, "page");
@@ -11871,7 +11871,7 @@ function BaseListFooter({ total = 0, loadedStart, loadedEnd, selectedCount, page
 function clamp2(value, min5, max5) {
   return Math.min(Math.max(value, min5), max5);
 }
-var BaseProgress = React2.forwardRef(
+var BaseProgress = React4.forwardRef(
   function BaseProgress2({
     value = 0,
     max: max5 = 100,
@@ -11886,7 +11886,7 @@ var BaseProgress = React2.forwardRef(
     "aria-labelledby": nativeAriaLabelledBy,
     ...progressProps
   }, ref) {
-    const generatedLabelId = `${React2.useId()}-label`;
+    const generatedLabelId = `${React4.useId()}-label`;
     if (typeof max5 !== "number" || !Number.isFinite(max5) || max5 <= 0) {
       throw new TypeError("BaseProgress max must be a positive finite number.");
     }
@@ -12000,7 +12000,7 @@ var indicatorSizeClassNames2 = {
   md: "h-2 w-2",
   lg: "h-2.5 w-2.5"
 };
-var BaseRadioGroup = React2.forwardRef(function BaseRadioGroup2({
+var BaseRadioGroup = React4.forwardRef(function BaseRadioGroup2({
   options = [],
   value,
   defaultValue,
@@ -12072,10 +12072,10 @@ var BaseRadioGroup = React2.forwardRef(function BaseRadioGroup2({
   const resolvedAppearance = useMonkeysBaseAppearance(appearance);
   const componentAttributes = useMonkeysComponentAttributes();
   const theme = resolveBaseAppearance(resolvedAppearance);
-  const generatedId = React2.useId();
+  const generatedId = React4.useId();
   const rootId = id ?? generatedId;
   const resolvedName = name ?? rootId;
-  const [uncontrolledValue, setUncontrolledValue] = React2.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = React4.useState(defaultValue);
   const isControlled = value !== void 0;
   const selectedValue = isControlled ? value : uncontrolledValue;
   const handleSelect = (event, optionDisabled) => {
@@ -12251,7 +12251,7 @@ function resolveOverflow(axis) {
   }
   throw new TypeError('BaseScrollArea axis must be "x", "y", or "both".');
 }
-var BaseScrollArea = React2.forwardRef(
+var BaseScrollArea = React4.forwardRef(
   function BaseScrollArea2({
     children,
     axis = "y",
@@ -12395,7 +12395,7 @@ function getOptionText2(option) {
 function toDomId4(value) {
   return value.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-var BaseSelect = React2.forwardRef(
+var BaseSelect = React4.forwardRef(
   function BaseSelect2({
     options,
     placeholder,
@@ -12439,29 +12439,29 @@ var BaseSelect = React2.forwardRef(
     const theme = resolveBaseAppearance(resolvedAppearance);
     const fieldControl = useBaseFieldControl();
     const resolvedInvalid = invalid || fieldControl.invalid;
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const selectId = id ?? generatedId;
     const triggerId = `${selectId}-button`;
     const listboxId = `${selectId}-listbox`;
-    const rootRef = React2.useRef(null);
-    const triggerRef = React2.useRef(null);
-    const selectRef = React2.useRef(null);
-    const optionRefs = React2.useRef([]);
-    const composingRef = React2.useRef(false);
-    const typeaheadBufferRef = React2.useRef("");
-    const typeaheadTimerRef = React2.useRef(null);
+    const rootRef = React4.useRef(null);
+    const triggerRef = React4.useRef(null);
+    const selectRef = React4.useRef(null);
+    const optionRefs = React4.useRef([]);
+    const composingRef = React4.useRef(false);
+    const typeaheadBufferRef = React4.useRef("");
+    const typeaheadTimerRef = React4.useRef(null);
     const optionList = options ?? [];
     const isCustomSelect = optionList.length > 0;
     const forceOpen = openForPreview;
-    const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(false);
+    const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(false);
     const open = forceOpen || uncontrolledOpen;
-    const [uncontrolledValue, setUncontrolledValue] = React2.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React4.useState(
       () => normalizeValue(defaultValue)
     );
     const isControlled = value !== void 0;
     const selectedValue = isControlled ? normalizeValue(value) : uncontrolledValue;
     const selectedOption = findOption(optionList, selectedValue);
-    const [activeIndex, setActiveIndex] = React2.useState(
+    const [activeIndex, setActiveIndex] = React4.useState(
       () => getInitialActiveIndex(optionList, selectedValue)
     );
     const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : getInitialActiveIndex(optionList, selectedValue);
@@ -12633,7 +12633,7 @@ var BaseSelect = React2.forwardRef(
       event.preventDefault();
       triggerRef.current?.focus();
     };
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!isCustomSelect || !open || forceOpen) return void 0;
       const ownerDocument = rootRef.current?.ownerDocument;
       if (!ownerDocument) return void 0;
@@ -12647,13 +12647,13 @@ var BaseSelect = React2.forwardRef(
         ownerDocument.removeEventListener("pointerdown", handlePointerDown);
       };
     }, [forceOpen, isCustomSelect, open, optionList, selectedValue]);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!isCustomSelect || !open || resolvedActiveIndex < 0) return;
       optionRefs.current[resolvedActiveIndex]?.scrollIntoView?.({
         block: "nearest"
       });
     }, [isCustomSelect, open, resolvedActiveIndex]);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!isCustomSelect || isControlled) return void 0;
       const selectElement = selectRef.current;
       const form = selectElement?.form;
@@ -12670,7 +12670,7 @@ var BaseSelect = React2.forwardRef(
       form.addEventListener("reset", handleReset);
       return () => form.removeEventListener("reset", handleReset);
     }, [defaultValue, forceOpen, isControlled, isCustomSelect, optionList]);
-    React2.useEffect(
+    React4.useEffect(
       () => () => {
         if (typeaheadTimerRef.current) {
           typeaheadTimerRef.current.ownerWindow.clearTimeout(
@@ -12896,7 +12896,7 @@ var BaseSelect = React2.forwardRef(
                 const selected = option.value === selectedValue;
                 const active = index === resolvedActiveIndex;
                 const optionState = option.disabled ? "disabled" : active ? "active" : selected ? "selected" : "idle";
-                return /* @__PURE__ */ React2.createElement(
+                return /* @__PURE__ */ React4.createElement(
                   "button",
                   {
                     ...componentAttributes,
@@ -13021,7 +13021,7 @@ function BaseSegmentedControl({
   ...controlProps
 }) {
   const theme = resolveBaseAppearance(appearance);
-  const [uncontrolledValue, setUncontrolledValue] = React2.useState(
+  const [uncontrolledValue, setUncontrolledValue] = React4.useState(
     () => getInitialSegmentValue(options, defaultValue)
   );
   const isControlled = value !== void 0;
@@ -13095,7 +13095,7 @@ function BaseSegmentedControl({
     }
   );
 }
-var BaseSpinner = React2.forwardRef(
+var BaseSpinner = React4.forwardRef(
   function BaseSpinner2({
     decorative = false,
     label,
@@ -13151,7 +13151,7 @@ var BaseSpinner = React2.forwardRef(
     );
   }
 );
-var BaseStack = React2.forwardRef(
+var BaseStack = React4.forwardRef(
   function BaseStack2({
     children,
     gap,
@@ -13331,7 +13331,7 @@ function getIndicatorClassName(status, slots) {
     status === "error" && slots.stepsIndicatorError
   );
 }
-var BaseSteps = React2.forwardRef(
+var BaseSteps = React4.forwardRef(
   function BaseSteps2({
     items,
     orientation = "horizontal",
@@ -13345,7 +13345,7 @@ var BaseSteps = React2.forwardRef(
     "aria-labelledby": ariaLabelledBy,
     ...stepsProps
   }, ref) {
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const messages = useMonkeysLocaleMessages().steps;
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
@@ -13556,7 +13556,7 @@ var densitySize = {
   default: "md",
   comfortable: "lg"
 };
-var BaseSwitch = React2.forwardRef(
+var BaseSwitch = React4.forwardRef(
   function BaseSwitch2({
     label,
     description,
@@ -13584,7 +13584,7 @@ var BaseSwitch = React2.forwardRef(
     const theme = resolveBaseAppearance(resolvedAppearance);
     const hasLabel = hasRenderableNode(label);
     const hasDescription = hasNonEmptyRenderableNode(description);
-    const [uncontrolledChecked, setUncontrolledChecked] = React2.useState(
+    const [uncontrolledChecked, setUncontrolledChecked] = React4.useState(
       defaultChecked ?? false
     );
     const isControlled = checked !== void 0;
@@ -13743,7 +13743,7 @@ function SystemStateIcon({ kind }) {
     }
   );
 }
-var BaseSystemState = React2.forwardRef(
+var BaseSystemState = React4.forwardRef(
   function BaseSystemState2({
     kind = "fallback",
     icon,
@@ -14002,9 +14002,9 @@ function setPointerCaptureIfAvailable2(target, pointerId) {
     throw error;
   }
 }
-var BaseTableContext = React2.createContext(null);
+var BaseTableContext = React4.createContext(null);
 function useBaseTableContext(appearance) {
-  const context = React2.useContext(BaseTableContext);
+  const context = React4.useContext(BaseTableContext);
   const providerAppearance = useMonkeysBaseAppearance(appearance);
   if (context) {
     const resolvedAppearance = appearance === void 0 ? context.appearance : providerAppearance;
@@ -14025,8 +14025,8 @@ function useBaseTableContext(appearance) {
 }
 function hasSplitScrollTable(children) {
   let found = false;
-  React2.Children.forEach(children, (child) => {
-    if (found || !React2.isValidElement(child)) return;
+  React4.Children.forEach(children, (child) => {
+    if (found || !React4.isValidElement(child)) return;
     const childProps = child.props;
     if (childProps.layout === "split-scroll") {
       found = true;
@@ -14189,7 +14189,7 @@ function DragHandleIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" })
   ] });
 }
-var BaseTableContainer = React2.forwardRef(function BaseTableContainer2({
+var BaseTableContainer = React4.forwardRef(function BaseTableContainer2({
   appearance,
   attachedFooter = false,
   children,
@@ -14233,7 +14233,7 @@ var BaseTableContainer = React2.forwardRef(function BaseTableContainer2({
     }
   );
 });
-var BaseTable = React2.forwardRef(
+var BaseTable = React4.forwardRef(
   function BaseTable2({
     appearance,
     className,
@@ -14263,9 +14263,9 @@ var BaseTable = React2.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const [draggingColumnId, setDraggingColumnId] = React2.useState();
-    const splitHeaderRef = React2.useRef(null);
-    const splitFooterRef = React2.useRef(null);
+    const [draggingColumnId, setDraggingColumnId] = React4.useState();
+    const splitHeaderRef = React4.useRef(null);
+    const splitFooterRef = React4.useRef(null);
     const isSplitScroll = layout === "split-scroll";
     const columnTemplate = isSplitScroll ? buildSplitColumnTemplate(columns, columnSizes) : void 0;
     const contextValue = {
@@ -14313,7 +14313,7 @@ var BaseTable = React2.forwardRef(
     ) });
   }
 );
-var BaseTableHeader = React2.forwardRef(function BaseTableHeader2({ appearance, className, classNames, style, ...headerProps }, ref) {
+var BaseTableHeader = React4.forwardRef(function BaseTableHeader2({ appearance, className, classNames, style, ...headerProps }, ref) {
   const { layout, splitHeaderRef, theme } = useBaseTableContext(appearance);
   const isSplitScroll = layout === "split-scroll";
   const setHeaderRef = (node) => {
@@ -14340,7 +14340,7 @@ var BaseTableHeader = React2.forwardRef(function BaseTableHeader2({ appearance,
     }
   );
 });
-var BaseTableBody = React2.forwardRef(function BaseTableBody2({ appearance, className, classNames, onScroll, style, ...bodyProps }, ref) {
+var BaseTableBody = React4.forwardRef(function BaseTableBody2({ appearance, className, classNames, onScroll, style, ...bodyProps }, ref) {
   const {
     bodyClassName,
     bodyMaxHeight,
@@ -14383,7 +14383,7 @@ var BaseTableBody = React2.forwardRef(function BaseTableBody2({ appearance, clas
     }
   );
 });
-var BaseTableFooter = React2.forwardRef(function BaseTableFooter2({ appearance, className, classNames, style, ...footerProps }, ref) {
+var BaseTableFooter = React4.forwardRef(function BaseTableFooter2({ appearance, className, classNames, style, ...footerProps }, ref) {
   const { layout, splitFooterRef, theme } = useBaseTableContext(appearance);
   const isSplitScroll = layout === "split-scroll";
   const setFooterRef = (node) => {
@@ -14410,7 +14410,7 @@ var BaseTableFooter = React2.forwardRef(function BaseTableFooter2({ appearance,
     }
   );
 });
-var BaseTableRow = React2.forwardRef(
+var BaseTableRow = React4.forwardRef(
   function BaseTableRow2({
     interactive,
     selected,
@@ -14452,7 +14452,7 @@ var BaseTableRow = React2.forwardRef(
     );
   }
 );
-var BaseTableHead = React2.forwardRef(function BaseTableHead2({
+var BaseTableHead = React4.forwardRef(function BaseTableHead2({
   columnId,
   align,
   verticalAlign,
@@ -14517,10 +14517,10 @@ var BaseTableHead = React2.forwardRef(function BaseTableHead2({
   const isSplitScroll = tableContext.layout === "split-scroll";
   const resolvedAlign = align ?? (isSplitScroll ? "center" : "left");
   const resolvedVerticalAlign = verticalAlign ?? "middle";
-  const headRef = React2.useRef(null);
-  const resizeCleanupRef = React2.useRef(() => {
+  const headRef = React4.useRef(null);
+  const resizeCleanupRef = React4.useRef(() => {
   });
-  const [measuredWidth, setMeasuredWidth] = React2.useState();
+  const [measuredWidth, setMeasuredWidth] = React4.useState();
   const setHeadRef = (node) => {
     headRef.current = node;
     assignRef2(forwardedRef, node);
@@ -14759,7 +14759,7 @@ var BaseTableHead = React2.forwardRef(function BaseTableHead2({
       }
     );
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (typeof controlledWidth === "number") {
       setMeasuredWidth(void 0);
       return;
@@ -14772,7 +14772,7 @@ var BaseTableHead = React2.forwardRef(function BaseTableHead2({
       );
     }
   }, [controlledWidth, minWidth, maxWidth, canResize]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!canResize) resizeCleanupRef.current();
     return () => resizeCleanupRef.current();
   }, [canResize, columnId, tableContext.onColumnSizeChange]);
@@ -14831,7 +14831,7 @@ var BaseTableHead = React2.forwardRef(function BaseTableHead2({
     }
   );
 });
-var BaseTableCell = React2.forwardRef(
+var BaseTableCell = React4.forwardRef(
   function BaseTableCell2({
     align = "left",
     appearance,
@@ -14866,7 +14866,7 @@ var BaseTableCell = React2.forwardRef(
     );
   }
 );
-var BaseTableCaption = React2.forwardRef(function BaseTableCaption2({ appearance, className, classNames, style, ...captionProps }, ref) {
+var BaseTableCaption = React4.forwardRef(function BaseTableCaption2({ appearance, className, classNames, style, ...captionProps }, ref) {
   const { theme } = useBaseTableContext(appearance);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "caption",
@@ -14882,7 +14882,7 @@ var BaseTableCaption = React2.forwardRef(function BaseTableCaption2({ appearance
     }
   );
 });
-var BaseTableEmpty = React2.forwardRef(
+var BaseTableEmpty = React4.forwardRef(
   function BaseTableEmpty2({
     colSpan,
     icon,
@@ -15034,7 +15034,7 @@ function BaseTableLoading({
     rowIndex
   )) });
 }
-var BaseTableFooterBar = React2.forwardRef(function BaseTableFooterBar2({
+var BaseTableFooterBar = React4.forwardRef(function BaseTableFooterBar2({
   appearance,
   leading,
   actions,
@@ -15159,7 +15159,7 @@ function getHorizontalStep(event, key) {
   if (key === "ArrowRight") return rtl ? -1 : 1;
   return rtl ? 1 : -1;
 }
-var BaseTabs = React2.forwardRef(
+var BaseTabs = React4.forwardRef(
   function BaseTabs2({
     items = [],
     value,
@@ -15186,16 +15186,16 @@ var BaseTabs = React2.forwardRef(
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
-    const generatedId = React2.useId();
+    const generatedId = React4.useId();
     const rootId = id ?? generatedId;
     const initialCandidate = value !== void 0 ? value : defaultValue;
-    const [uncontrolledValue, setUncontrolledValue] = React2.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React4.useState(
       () => getResolvedValue(items, defaultValue)
     );
-    const [focusedValue, setFocusedValue] = React2.useState(
+    const [focusedValue, setFocusedValue] = React4.useState(
       () => getResolvedValue(items, initialCandidate)
     );
-    const triggerRefs = React2.useRef([]);
+    const triggerRefs = React4.useRef([]);
     const isControlled = value !== void 0;
     const selectedValue = getResolvedValue(
       items,
@@ -15301,7 +15301,7 @@ var BaseTabs = React2.forwardRef(
                 const itemId = idFragments[index];
                 const selected = index === selectedIndex;
                 const state = item.disabled ? "disabled" : selected ? "active" : "inactive";
-                return /* @__PURE__ */ React2.createElement(
+                return /* @__PURE__ */ React4.createElement(
                   "button",
                   {
                     ...componentAttributes,
@@ -15371,7 +15371,7 @@ var controlSizeClassNames2 = {
   md: "min-h-24 px-3 py-2 text-sm leading-6",
   lg: "min-h-28 px-3.5 py-2.5 text-base leading-7"
 };
-var BaseTextarea = React2.forwardRef(
+var BaseTextarea = React4.forwardRef(
   function BaseTextarea2({
     invalid = false,
     disabled = false,
@@ -15449,7 +15449,7 @@ var BaseTextarea = React2.forwardRef(
     );
   }
 );
-var BaseText = React2.forwardRef(function BaseText2({
+var BaseText = React4.forwardRef(function BaseText2({
   as = "p",
   children,
   size = "md",
@@ -15463,7 +15463,7 @@ var BaseText = React2.forwardRef(function BaseText2({
   const resolvedAppearance = useMonkeysBaseAppearance(appearance);
   const componentAttributes = useMonkeysComponentAttributes();
   const theme = resolveBaseAppearance(resolvedAppearance);
-  return React2.createElement(
+  return React4.createElement(
     as,
     {
       ...componentAttributes,
@@ -15501,12 +15501,12 @@ function validatePlacement2(value) {
   }
 }
 function normalizeTrigger(children, disabled) {
-  if (React2.isValidElement(children) && children.type !== React2.Fragment) {
+  if (React4.isValidElement(children) && children.type !== React4.Fragment) {
     return children;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { tabIndex: !disabled && hasRenderableNode(children) ? 0 : void 0, children });
 }
-var BaseTooltip = React2.forwardRef(
+var BaseTooltip = React4.forwardRef(
   function BaseTooltip2({
     content,
     children,
@@ -15531,7 +15531,7 @@ var BaseTooltip = React2.forwardRef(
     const componentAttributes = useMonkeysComponentAttributes();
     const theme = resolveBaseAppearance(resolvedAppearance);
     const overlayPortal = useBaseOverlayPortal({ disabled: !portal });
-    const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen);
+    const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(defaultOpen);
     const isControlled = open !== void 0;
     const canShow = !disabled && hasRenderableNode(content);
     const requestedOpen = isControlled ? open : uncontrolledOpen;
@@ -15672,7 +15672,7 @@ function BaseToolbar({
     }
   );
 }
-var BaseVisuallyHidden = React2.forwardRef(function BaseVisuallyHidden2({
+var BaseVisuallyHidden = React4.forwardRef(function BaseVisuallyHidden2({
   children,
   focusable = false,
   appearance,
@@ -15731,7 +15731,7 @@ var footerTokenStyles = {
   background: "var(--monkeys-component-app-shell-sidebar-footer-background, hsl(var(--muted) / 0.22))",
   borderColor: "var(--monkeys-component-app-shell-sidebar-footer-border-color, hsl(var(--border)))"
 };
-var AppShellSidebar = React2.forwardRef(
+var AppShellSidebar = React4.forwardRef(
   function AppShellSidebar2({
     navigation,
     header,
@@ -16349,15 +16349,15 @@ function SidebarNavList({
   onNavigate,
   defaultExpandedGroups
 }) {
-  const [expanded, setExpanded] = React2.useState(() => {
+  const [expanded, setExpanded] = React4.useState(() => {
     const map = {};
     (defaultExpandedGroups ?? items.map((i) => i.id)).forEach((id) => {
       map[id] = true;
     });
     return map;
   });
-  const [localActiveItemId, setLocalActiveItemId] = React2.useState(activeItemId);
-  React2.useEffect(() => {
+  const [localActiveItemId, setLocalActiveItemId] = React4.useState(activeItemId);
+  React4.useEffect(() => {
     if (activeItemId !== void 0) {
       setLocalActiveItemId(activeItemId);
     }
@@ -16675,8 +16675,8 @@ function SidebarNavigationList({
   onNavigate,
   revealRequest
 }) {
-  const navRef = React2.useRef(null);
-  const [expandedByRoot, setExpandedByRoot] = React2.useState(
+  const navRef = React4.useRef(null);
+  const [expandedByRoot, setExpandedByRoot] = React4.useState(
     {}
   );
   const canReveal = revealRequest ? items.some(
@@ -16689,7 +16689,7 @@ function SidebarNavigationList({
       [id]: !current[id]
     }));
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!revealRequest || !canReveal) return;
     setExpandedByRoot((current) => ({
       ...current,
@@ -16968,10 +16968,10 @@ function HeadbarNavMenuItem({
   onNavigate,
   useTokenRadius
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React4.useState(false);
   const isOpen = !item.disabled && open;
-  const closeTimerRef = React2.useRef(null);
-  const wasOpenOnPointerDownRef = React2.useRef(false);
+  const closeTimerRef = React4.useRef(null);
+  const wasOpenOnPointerDownRef = React4.useRef(false);
   const clearCloseTimer = () => {
     if (!closeTimerRef.current) return;
     clearTimeout(closeTimerRef.current);
@@ -16996,7 +16996,7 @@ function HeadbarNavMenuItem({
     onNavigate?.(firstEnabledChild.id);
     return true;
   };
-  React2.useEffect(() => clearCloseTimer, []);
+  React4.useEffect(() => clearCloseTimer, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenu2__namespace.Root,
     {
@@ -17162,7 +17162,7 @@ function NavigationHeadbarMenu({
       }
     );
     if (!hasSecondaryAction) {
-      return /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: primaryAction }, item.id);
+      return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: primaryAction }, item.id);
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -17330,21 +17330,21 @@ function NavigationLayout({
   switchToHeadbarLabel = "Switch to headbar",
   switchToSidebarLabel = "Switch to sidebar"
 }) {
-  const [uncontrolledMode, setUncontrolledMode] = React2.useState(defaultMode);
-  const [uncontrolledSidebarCollapsed, setUncontrolledSidebarCollapsed] = React2.useState(defaultSidebarCollapsed);
-  const [revealRequest, setRevealRequest] = React2.useState(null);
+  const [uncontrolledMode, setUncontrolledMode] = React4.useState(defaultMode);
+  const [uncontrolledSidebarCollapsed, setUncontrolledSidebarCollapsed] = React4.useState(defaultSidebarCollapsed);
+  const [revealRequest, setRevealRequest] = React4.useState(null);
   const isModeControlled = mode !== void 0;
   const isSidebarCollapsedControlled = controlledSidebarCollapsed !== void 0;
   const navigationMode = isModeControlled ? mode : uncontrolledMode;
   const sidebarCollapsed = isSidebarCollapsedControlled ? controlledSidebarCollapsed : uncontrolledSidebarCollapsed;
   const isHeadbarMode = navigationMode === "headbar";
   const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!isModeControlled) {
       setUncontrolledMode(defaultMode);
     }
   }, [defaultMode, isModeControlled]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!isSidebarCollapsedControlled) {
       setUncontrolledSidebarCollapsed(defaultSidebarCollapsed);
     }
@@ -17502,7 +17502,7 @@ function NavigationLayout({
     }
   );
 }
-var AccordionItem = React2__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionItem = React4__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Item,
   {
     ref,
@@ -17515,7 +17515,7 @@ var AccordionItem = React2__namespace.forwardRef(({ className, style, ...props }
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
@@ -17537,7 +17537,7 @@ var AccordionTrigger = React2__namespace.forwardRef(({ className, children, ...p
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionContent = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Content,
   {
     ref,
@@ -17547,7 +17547,7 @@ var AccordionContent = React2__namespace.forwardRef(({ className, children, ...p
   }
 ));
 AccordionContent.displayName = "AccordionContent";
-var Checkbox = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Checkbox = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
     ref,
@@ -17582,7 +17582,7 @@ var buttonVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Button = React2__namespace.forwardRef(
+var Button = React4__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17596,7 +17596,7 @@ var Button = React2__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var PopoverContent = React2__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React4__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -17610,7 +17610,7 @@ var PopoverContent = React2__namespace.forwardRef(({ className, align = "center"
   }
 ) }));
 PopoverContent.displayName = "PopoverContent";
-var ScrollArea = React2__namespace.forwardRef(
+var ScrollArea = React4__namespace.forwardRef(
   ({
     className,
     children,
@@ -17654,7 +17654,7 @@ var ScrollArea = React2__namespace.forwardRef(
   )
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollBar = React2__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React4__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -17670,7 +17670,7 @@ var ScrollBar = React2__namespace.forwardRef(({ className, orientation = "vertic
   }
 ));
 ScrollBar.displayName = "ScrollBar";
-var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Switch = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitive__namespace.Root,
   {
     ref,
@@ -17683,9 +17683,9 @@ var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Switch.displayName = "Switch";
-var Tabs = React2__namespace.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, "data-variant": variant, ...props }));
+var Tabs = React4__namespace.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, "data-variant": variant, ...props }));
 Tabs.displayName = "Tabs";
-var TabsList = React2__namespace.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React4__namespace.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -17698,7 +17698,7 @@ var TabsList = React2__namespace.forwardRef(({ className, gap, style, ...props }
   }
 ));
 TabsList.displayName = "TabsList";
-var TabsTrigger = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -17710,7 +17710,7 @@ var TabsTrigger = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsContent = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Content,
   {
     ref,
@@ -17722,7 +17722,7 @@ var TabsContent = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TabsContent.displayName = "TabsContent";
-var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React4__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   Tooltip2__namespace.Content,
   {
     ref,
@@ -17735,65 +17735,213 @@ var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 4,
   }
 ) }));
 TooltipContent.displayName = "TooltipContent";
+var Input = React4__namespace.forwardRef(({ className, appearance = "standard", type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "input",
+  {
+    ref,
+    type,
+    className: cn(
+      "flex w-full border border-input bg-control-surface px-3 text-foreground ring-offset-control-surface transition-[border-color,background-color,color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      appearance === "compact" ? "h-9 rounded-md py-1 text-sm shadow-sm" : "h-10 rounded-md py-2 text-sm shadow-sm",
+      appearance === "shadow" && "rounded-lg shadow-sm shadow-black/[0.02] dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none",
+      className
+    ),
+    ...props
+  }
+));
+Input.displayName = "Input";
+var Textarea = React4__namespace.forwardRef(({ className, appearance = "standard", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "textarea",
+  {
+    ref,
+    className: cn(
+      "flex w-full border border-input bg-control-surface px-3 py-2 text-foreground ring-offset-control-surface placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      appearance === "compact" ? "min-h-[60px] rounded-md text-sm shadow-sm" : "min-h-[80px] rounded-md text-sm",
+      appearance === "shadow" && "shadow-sm shadow-black/[0.02] dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none",
+      className
+    ),
+    ...props
+  }
+));
+Textarea.displayName = "Textarea";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group shadow-xs relative flex w-full items-center rounded-md border border-input outline-none transition-[color,box-shadow] dark:bg-input/30",
+        "h-9 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = classVarianceAuthority.cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = classVarianceAuthority.cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+var InputGroupInput = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Input,
+  {
+    ref,
+    "data-slot": "input-group-control",
+    className: cn(
+      "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
+InputGroupInput.displayName = "InputGroupInput";
+var InputGroupTextarea = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Textarea,
+  {
+    ref,
+    "data-slot": "input-group-control",
+    className: cn(
+      "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
 var menuItemClassName = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
 var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var DropdownMenu4 = DropdownMenu2__namespace.Root;
 var DropdownMenuTrigger = DropdownMenu2__namespace.Trigger;
-var DropdownMenuSubTrigger = React2__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
+var DropdownMenuSubTrigger = React4__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
   children,
   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "ml-auto" })
 ] }));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React2__namespace.forwardRef(
+var DropdownMenuSubContent = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuContent = React2__namespace.forwardRef(
+var DropdownMenuContent = React4__namespace.forwardRef(
   ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React2__namespace.forwardRef(
+var DropdownMenuItem = React4__namespace.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Item, { ref, className: cn(menuItemClassName, inset && "pl-8", className), ...props })
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React2__namespace.forwardRef(
+var DropdownMenuCheckboxItem = React4__namespace.forwardRef(
   ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.CheckboxItem, { ref, className: cn(menuItemClassName, "pl-8", className), checked, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }),
     children
   ] })
 );
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React2__namespace.forwardRef(
+var DropdownMenuRadioItem = React4__namespace.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.RadioItem, { ref, className: cn(menuItemClassName, "pl-8", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }) }) }),
     children
   ] })
 );
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React2__namespace.forwardRef(
+var DropdownMenuLabel = React4__namespace.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })
 );
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React2__namespace.forwardRef(
+var DropdownMenuSeparator = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var SelectTrigger = React2__namespace.forwardRef(
-  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
+var SelectTrigger = React4__namespace.forwardRef(
+  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm text-foreground shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 opacity-50", iconClassName) }) })
   ] })
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectScrollUpButton = React2__namespace.forwardRef(
+var SelectScrollUpButton = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollUpButton.displayName = "SelectScrollUpButton";
-var SelectScrollDownButton = React2__namespace.forwardRef(
+var SelectScrollDownButton = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
-var SelectContent = React2__namespace.forwardRef(
+var SelectContent = React4__namespace.forwardRef(
   ({ className, children, position = "popper", viewportClassName, disableTriggerViewportSizing = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Content, { ref, position, className: cn(menuContentClassName, "relative max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
     /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", position === "popper" && !disableTriggerViewportSizing && "h-[var(--radix-select-trigger-height)]", viewportClassName), children }),
@@ -17801,11 +17949,11 @@ var SelectContent = React2__namespace.forwardRef(
   ] }) })
 );
 SelectContent.displayName = "SelectContent";
-var SelectLabel = React2__namespace.forwardRef(
+var SelectLabel = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })
 );
 SelectLabel.displayName = "SelectLabel";
-var SelectItem = React2__namespace.forwardRef(
+var SelectItem = React4__namespace.forwardRef(
   ({ className, children, indicatorClassName, itemText, hideIndicator = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Item, { ref, className: cn(menuItemClassName, "w-full", hideIndicator ? "px-2" : "pl-8 pr-2", className), ...props, children: [
     !hideIndicator ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", indicatorClassName), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }) : null,
     itemText ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -17815,12 +17963,12 @@ var SelectItem = React2__namespace.forwardRef(
   ] })
 );
 SelectItem.displayName = "SelectItem";
-var SelectSeparator = React2__namespace.forwardRef(
+var SelectSeparator = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
 function ItemAvatar({ item }) {
-  const [failed, setFailed] = React2.useState(false);
+  const [failed, setFailed] = React4.useState(false);
   if (item.iconUrl && !failed) {
     return /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconUrl, alt: "", className: "size-full object-cover", onError: () => setFailed(true) });
   }
@@ -17828,7 +17976,7 @@ function ItemAvatar({ item }) {
   return initial ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: initial }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: "size-4" });
 }
 function SessionAvatar({ item }) {
-  const [failed, setFailed] = React2.useState(false);
+  const [failed, setFailed] = React4.useState(false);
   if (item.thumbnailUrl && !failed) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
@@ -17866,7 +18014,7 @@ function CollectionState({
   if (status === "error") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-8 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", role: "alert", children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary", onClick: onRetry, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5 px-0 text-sm text-primary hover:text-primary", onClick: onRetry, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
         messages.retry
       ] })
@@ -17898,7 +18046,7 @@ function SessionActions({
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   if (!capabilities.renameSessions && !capabilities.deleteSessions) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu4, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "flex size-8 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.actions, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", "aria-label": messages.actions, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", children: [
       capabilities.renameSessions ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: () => onIntent?.({ type: "rename-session", sessionId: item.id, title: item.title }), children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }),
@@ -17922,22 +18070,22 @@ function AgentWorkbenchSidebar({
   const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   const sessionsOnly = navigationMode === "sessions-only";
-  const searchRef = React2.useRef(null);
-  const renameInputRef = React2.useRef(null);
-  const [editingSessionId, setEditingSessionId] = React2.useState();
-  const [editingTitle, setEditingTitle] = React2.useState("");
+  const searchRef = React4.useRef(null);
+  const renameInputRef = React4.useRef(null);
+  const [editingSessionId, setEditingSessionId] = React4.useState();
+  const [editingTitle, setEditingTitle] = React4.useState("");
   const query = viewModel.searchQuery.trim().toLocaleLowerCase();
-  const agents = React2.useMemo(
+  const agents = React4.useMemo(
     () => viewModel.agents.items.filter((item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)),
     [query, viewModel.agents.items]
   );
-  const sessions = React2.useMemo(
+  const sessions = React4.useMemo(
     () => viewModel.sessions.items.filter((item) => !query || item.title.toLocaleLowerCase().includes(query)),
     [query, viewModel.sessions.items]
   );
-  const chatbotSessions = React2.useMemo(() => sessions.filter((item) => item.mode !== "work"), [sessions]);
-  const agentSessions = React2.useMemo(() => sessions.filter((item) => item.mode === "work"), [sessions]);
-  React2.useEffect(() => {
+  const chatbotSessions = React4.useMemo(() => sessions.filter((item) => item.mode !== "work"), [sessions]);
+  const agentSessions = React4.useMemo(() => sessions.filter((item) => item.mode === "work"), [sessions]);
+  React4.useEffect(() => {
     const handleShortcut = (event) => {
       if (!(event.ctrlKey || event.metaKey) || event.key.toLocaleLowerCase() !== "k") return;
       event.preventDefault();
@@ -17947,7 +18095,7 @@ function AgentWorkbenchSidebar({
     window.addEventListener("keydown", handleShortcut);
     return () => window.removeEventListener("keydown", handleShortcut);
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!editingSessionId) return;
     renameInputRef.current?.focus();
     renameInputRef.current?.select();
@@ -17974,12 +18122,13 @@ function AgentWorkbenchSidebar({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(SessionAvatar, { item }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+            Input,
             {
               ref: renameInputRef,
               value: editingTitle,
               "aria-label": messages.rename,
-              className: "h-6 w-full rounded border border-primary bg-background px-1.5 text-sm font-medium outline-none",
+              appearance: "compact",
+              className: "h-6 w-full border-primary px-1.5 text-sm font-medium",
               onChange: (event) => setEditingTitle(event.target.value),
               onClick: (event) => event.stopPropagation(),
               onBlur: () => saveRenameSession(item),
@@ -18009,7 +18158,7 @@ function AgentWorkbenchSidebar({
           percent,
           "%"
         ] }) : /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status: item.status }),
-        viewModel.capabilities.pinSessions ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": item.pinned ? messages.unpin : messages.pin, className: cn2("flex size-8 items-center justify-center rounded-md text-muted-foreground opacity-0 hover:bg-muted group-hover:opacity-100", item.pinned && "text-primary opacity-100"), onClick: (event) => {
+        viewModel.capabilities.pinSessions ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": item.pinned ? messages.unpin : messages.pin, className: cn2("size-8 text-muted-foreground opacity-0 group-hover:opacity-100", item.pinned && "text-primary opacity-100"), onClick: (event) => {
           event.stopPropagation();
           onIntent?.({ type: "toggle-session-pin", sessionId: item.id, pinned: !item.pinned });
         }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
@@ -18027,17 +18176,17 @@ function AgentWorkbenchSidebar({
       className: "flex h-full min-h-0 flex-col bg-background text-foreground",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 space-y-3 p-4 pb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn2("flex h-10 items-center gap-2 rounded-lg border border-border bg-card px-3 focus-within:ring-2 focus-within:ring-ring", classNames?.search), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4", "aria-hidden": "true" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              InputGroupInput,
               {
                 ref: searchRef,
                 type: "search",
                 value: viewModel.searchQuery,
                 "aria-label": sessionsOnly ? messages.searchSessions : messages.search,
                 placeholder: sessionsOnly ? messages.searchSessions : messages.search,
-                className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+                className: "min-w-0 [&::-webkit-search-cancel-button]:hidden",
                 onChange: (event) => onIntent?.({ type: "change-search", query: event.target.value }),
                 onKeyDown: (event) => {
                   if (event.key !== "Escape") return;
@@ -18046,7 +18195,7 @@ function AgentWorkbenchSidebar({
                 }
               }
             ),
-            viewModel.searchQuery ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "flex size-6 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" })
+            viewModel.searchQuery ? /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(InputGroupButton, { size: "icon-xs", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
           ] }),
           !sessionsOnly || headerActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             !sessionsOnly ? /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
@@ -18057,7 +18206,7 @@ function AgentWorkbenchSidebar({
           ] }) : null
         ] }),
         !sessionsOnly ? /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "agents", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
-          viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "create-agent" }), children: [
+          viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-agent" }), children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4", "aria-hidden": "true" }),
             messages.newAgent
           ] }) : null,
@@ -18078,11 +18227,13 @@ function AgentWorkbenchSidebar({
                 ] }),
                 item.builtIn ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 py-1 text-[10px] text-foreground", children: messages.builtIn }) : null,
                 viewModel.capabilities.pinAgents ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  Button,
                   {
                     type: "button",
+                    variant: "ghost",
+                    size: "icon",
                     "aria-label": item.pinned ? messages.unpin : messages.pin,
-                    className: cn2("flex size-8 items-center justify-center rounded-md text-muted-foreground opacity-0 hover:bg-muted group-hover:opacity-100", item.pinned && "text-primary opacity-100"),
+                    className: cn2("size-8 text-muted-foreground opacity-0 group-hover:opacity-100", item.pinned && "text-primary opacity-100"),
                     onClick: (event) => {
                       event.stopPropagation();
                       onIntent?.({ type: "toggle-agent-pin", itemId: item.id, pinned: !item.pinned });
@@ -18103,11 +18254,11 @@ function AgentWorkbenchSidebar({
           )) })
         ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "sessions", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
-          viewModel.capabilities.createSession ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "create-session" }), children: [
+          viewModel.capabilities.createSession ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-session" }), children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
             messages.newSession
           ] }) : null,
-          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
+          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Blocks, { className: "size-4", "aria-hidden": "true" }),
             messages.capabilities
           ] }) : null,
@@ -18124,7 +18275,7 @@ function AgentWorkbenchSidebar({
             renderSessionItems(items)
           ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
         ] }),
-        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex h-10 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
+        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "h-10 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4", "aria-hidden": "true" }),
           messages.settings
         ] }) }) : null
@@ -18261,7 +18412,7 @@ function AgentWorkbenchTool({
   onExpandedChange
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench.tool;
-  const [uncontrolledExpanded, setUncontrolledExpanded] = React2.useState(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = React4.useState(defaultExpanded);
   const isControlled = expanded !== void 0;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const status = event.payload.status;
@@ -18535,10 +18686,11 @@ function AgentWorkbenchActivity({
                   event.payload.requestedAction !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(JsonValue2, { value: event.payload.requestedAction }) }) : null,
                   requested ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                      Button,
                       {
                         type: "button",
-                        className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                        size: "sm",
+                        className: "h-auto px-3 py-1.5 text-sm",
                         disabled: !onApprovalDecision,
                         onClick: () => onApprovalDecision?.({
                           approvalId: event.payload.approvalId,
@@ -18548,10 +18700,12 @@ function AgentWorkbenchActivity({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                      Button,
                       {
                         type: "button",
-                        className: "rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                        variant: "outline",
+                        size: "sm",
+                        className: "h-auto px-3 py-1.5 text-sm",
                         disabled: !onApprovalDecision,
                         onClick: () => onApprovalDecision?.({
                           approvalId: event.payload.approvalId,
@@ -18583,10 +18737,12 @@ function AgentWorkbenchActivity({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: messages.artifact[event.payload.status] })
                 ] }),
                 event.payload.url ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  Button,
                   {
                     type: "button",
-                    className: "rounded-md p-2 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "text-muted-foreground hover:text-foreground",
                     "aria-label": messages.artifact.open({
                       name: event.payload.name
                     }),
@@ -18854,20 +19010,23 @@ function SummaryPanel({
       error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 rounded-md border border-destructive/30 bg-destructive/5 p-2.5 text-sm text-destructive-text", role: "alert", children: error.payload.message }) : null,
       retryable || canResume ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
         retryable ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+            variant: "outline",
+            size: "sm",
+            className: "h-auto px-2.5 py-1.5 text-xs",
             disabled: !onIntent,
             onClick: () => onIntent?.({ type: "retry", eventId: error.eventId }),
             children: messages.actions.retry
           }
         ) : null,
         canResume ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring",
+            size: "sm",
+            className: "h-auto px-2.5 py-1.5 text-xs",
             disabled: !onIntent,
             onClick: () => onIntent?.({ type: "resume", sessionId: model.sessionId }),
             children: messages.actions.resume
@@ -18877,10 +19036,12 @@ function SummaryPanel({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-wrap gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground", children: [
       canContinueInNewTask ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        Button,
         {
           type: "button",
-          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+          variant: "outline",
+          size: "sm",
+          className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
           disabled: !onIntent,
           onClick: () => onIntent?.({ type: "continue-in-new-task", sessionId: model.sessionId }),
           children: [
@@ -18890,10 +19051,12 @@ function SummaryPanel({
         }
       ) : null,
       canEditAndRerun ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        Button,
         {
           type: "button",
-          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+          variant: "outline",
+          size: "sm",
+          className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
           disabled: !onIntent,
           onClick: () => onIntent?.({ type: "edit-and-rerun", sessionId: model.sessionId }),
           children: [
@@ -18903,10 +19066,12 @@ function SummaryPanel({
         }
       ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        Button,
         {
           type: "button",
-          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+          variant: "outline",
+          size: "sm",
+          className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
           disabled: !onIntent,
           onClick: () => onIntent?.({ type: "export", sessionId: model.sessionId }),
           children: [
@@ -18920,10 +19085,12 @@ function SummaryPanel({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: messages.summary }),
         summary?.payload.text ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded-md p-1.5 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            variant: "ghost",
+            size: "icon",
+            className: "size-8 text-muted-foreground hover:text-foreground",
             "aria-label": messages.actions.copySummary,
             disabled: !onIntent,
             onClick: () => onIntent?.({
@@ -18938,10 +19105,12 @@ function SummaryPanel({
       summary?.payload.status === "failed" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive-text", role: "alert", children: messages.summaryFailed }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          Button,
           {
             type: "button",
-            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+            variant: "outline",
+            size: "sm",
+            className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
             disabled: !onIntent,
             onClick: () => onIntent?.({ type: "retry-summary", eventId: summary.eventId }),
             children: [
@@ -19078,16 +19247,6 @@ function AgentWorkbenchTaskDetails({
     { id: "summary", label: messages.tabs.summary, count: model.summary ? 1 : 0 },
     ...workspaceAvailable ? [{ id: "workspace", label: messages.tabs.workspace, count: workspaceCount }] : []
   ];
-  const tabId = (tab) => `agent-workbench-details-${viewModel.sessionId}-${tab}`.replace(
-    /[^a-zA-Z0-9_-]/g,
-    "-"
-  );
-  const onTabKeyDown = (event, index) => {
-    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
-    event.preventDefault();
-    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
-    onActiveTabChange?.(tabs[nextIndex].id);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
@@ -19104,54 +19263,71 @@ function AgentWorkbenchTaskDetails({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: messages.description })
           ] }),
           onIntent ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            Button,
             {
               type: "button",
-              className: "rounded-md p-2 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+              variant: "ghost",
+              size: "icon",
+              className: "text-muted-foreground hover:text-foreground",
               "aria-label": messages.actions.close,
               onClick: () => onIntent({ type: "close" }),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", "aria-hidden": "true" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("flex shrink-0 gap-1 border-b border-border px-3 py-2", classNames?.tabs), role: "tablist", "aria-label": messages.tabs.label, children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Tabs,
           {
-            id: tabId(tab.id),
-            type: "button",
-            role: "tab",
-            "aria-selected": resolvedTab === tab.id,
-            "aria-controls": `${tabId(tab.id)}-panel`,
-            tabIndex: resolvedTab === tab.id ? 0 : -1,
-            className: cn2(
-              "inline-flex min-w-0 flex-1 items-center justify-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              resolvedTab === tab.id ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
-            ),
-            onClick: () => onActiveTabChange?.(tab.id),
-            onKeyDown: (event) => onTabKeyDown(event, index),
+            value: resolvedTab,
+            className: "flex min-h-0 flex-1 flex-col",
+            onValueChange: (tab) => onActiveTabChange?.(tab),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(Count, { value: tab.count })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TabsList,
+                {
+                  "aria-label": messages.tabs.label,
+                  className: cn2(
+                    "flex h-auto shrink-0 gap-1 rounded-none border-b border-border bg-transparent px-3 py-2",
+                    classNames?.tabs
+                  ),
+                  children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    TabsTrigger,
+                    {
+                      value: tab.id,
+                      className: "min-w-0 flex-1 gap-1 px-2 py-1.5 text-xs shadow-none data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.label }),
+                        /* @__PURE__ */ jsxRuntime.jsx(Count, { value: tab.count })
+                      ]
+                    },
+                    tab.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TabsContent,
+                {
+                  value: "summary",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(SummaryPanel, { model, onIntent })
+                }
+              ),
+              workspaceAvailable ? /* @__PURE__ */ jsxRuntime.jsx(
+                TabsContent,
+                {
+                  value: "workspace",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    WorkspacePanel,
+                    {
+                      model,
+                      sectionClassName: classNames?.section,
+                      codeClassName: classNames?.code
+                    }
+                  )
+                }
+              ) : null
             ]
-          },
-          tab.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            id: `${tabId(resolvedTab)}-panel`,
-            role: "tabpanel",
-            "aria-labelledby": tabId(resolvedTab),
-            tabIndex: 0,
-            className: cn2("min-h-0 flex-1 overflow-y-auto p-3 outline-none", classNames?.body),
-            children: resolvedTab === "summary" ? /* @__PURE__ */ jsxRuntime.jsx(SummaryPanel, { model, onIntent }) : /* @__PURE__ */ jsxRuntime.jsx(
-              WorkspacePanel,
-              {
-                model,
-                sectionClassName: classNames?.section,
-                codeClassName: classNames?.code
-              }
-            )
           }
         )
       ]
@@ -19329,9 +19505,9 @@ function LoginPage({
   externalPanel,
   callout
 }) {
-  const availableMethods = React2.useMemo(() => methods.filter((method) => !method.hidden), [methods]);
+  const availableMethods = React4.useMemo(() => methods.filter((method) => !method.hidden), [methods]);
   const fallbackMethodId = defaultMethodId ?? availableMethods[0]?.id;
-  const [internalMethodId, setInternalMethodId] = React2.useState(fallbackMethodId);
+  const [internalMethodId, setInternalMethodId] = React4.useState(fallbackMethodId);
   const currentMethodId = activeMethodId ?? internalMethodId;
   const activeMethod = availableMethods.find((method) => method.id === currentMethodId) ?? availableMethods[0];
   const hasTabs = availableMethods.length > 1;
@@ -19343,7 +19519,7 @@ function LoginPage({
   const { lightUrl: logoLightUrl, darkUrl: logoDarkUrl } = resolveLogoUrls(logo);
   const hasLogo = Boolean(logoLightUrl || logoDarkUrl);
   const usesSeparateModeLogos = Boolean(logoLightUrl && logoDarkUrl && logoLightUrl !== logoDarkUrl);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!availableMethods.length) {
       setInternalMethodId(void 0);
       return;
@@ -19375,7 +19551,7 @@ function LoginPage({
         ]
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(React2__namespace.default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
+    return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "main",
@@ -19660,7 +19836,7 @@ function readStoredLayout(storageKey, options) {
     return fallback;
   }
 }
-var WorkbenchResizableSidebar = React2.forwardRef(
+var WorkbenchResizableSidebar = React4.forwardRef(
   function WorkbenchResizableSidebar2({
     title,
     items,
@@ -19689,7 +19865,7 @@ var WorkbenchResizableSidebar = React2.forwardRef(
     classNames,
     style
   }, ref) {
-    const initialLayoutRef = React2.useRef(null);
+    const initialLayoutRef = React4.useRef(null);
     if (!initialLayoutRef.current) {
       initialLayoutRef.current = readStoredLayout(storageKey, {
         defaultCollapsed,
@@ -19698,10 +19874,10 @@ var WorkbenchResizableSidebar = React2.forwardRef(
         maxWidth
       });
     }
-    const sidebarRef = React2.useRef(null);
-    const [internalCollapsed, setInternalCollapsed] = React2.useState(initialLayoutRef.current.collapsed);
-    const [internalWidth, setInternalWidth] = React2.useState(initialLayoutRef.current.width);
-    const [isResizing, setIsResizing] = React2.useState(false);
+    const sidebarRef = React4.useRef(null);
+    const [internalCollapsed, setInternalCollapsed] = React4.useState(initialLayoutRef.current.collapsed);
+    const [internalWidth, setInternalWidth] = React4.useState(initialLayoutRef.current.width);
+    const [isResizing, setIsResizing] = React4.useState(false);
     const resolvedCollapsed = collapsed ?? internalCollapsed;
     const resolvedWidth = width ?? internalWidth;
     const isCollapsedControlled = collapsed !== void 0;
@@ -19749,14 +19925,14 @@ var WorkbenchResizableSidebar = React2.forwardRef(
         updateWidth(resolvedWidth + 24);
       }
     };
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (typeof window === "undefined" || !storageKey) return;
       window.localStorage.setItem(storageKey, JSON.stringify({
         collapsed: resolvedCollapsed,
         width: clampWidth2(resolvedWidth, minWidth, maxWidth)
       }));
     }, [maxWidth, minWidth, resolvedCollapsed, resolvedWidth, storageKey]);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!isResizing) return void 0;
       const handlePointerMove = (event) => {
         const sidebarNode = sidebarRef.current;
@@ -19909,7 +20085,7 @@ function shouldRenderBodyWrapper(props) {
     props.header || props.footer || props.bodyAs || props.bodyClassName || props.bodyProps || props.classNames?.body
   );
 }
-var WorkbenchContentPane = React2.forwardRef(
+var WorkbenchContentPane = React4.forwardRef(
   function WorkbenchContentPane2({
     as: Component = "section",
     bodyAs: BodyComponent = "div",
@@ -20325,9 +20501,9 @@ function WorkbenchGallerySettingsButton({
   ...panelProps
 }) {
   const resolvedLabels = { ...defaultLabels, ...labels };
-  const rootRef = React2.useRef(null);
-  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen);
-  const [popoverStyle, setPopoverStyle] = React2.useState({});
+  const rootRef = React4.useRef(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(defaultOpen);
+  const [popoverStyle, setPopoverStyle] = React4.useState({});
   const isControlled = open !== void 0;
   const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;
   const setOpen = (nextOpen) => {
@@ -20336,7 +20512,7 @@ function WorkbenchGallerySettingsButton({
     }
     onOpenChange?.(nextOpen);
   };
-  React2.useLayoutEffect(() => {
+  React4.useLayoutEffect(() => {
     if (!isOpen) return void 0;
     const updatePopoverPosition = () => {
       const triggerRect = rootRef.current?.getBoundingClientRect();
@@ -20482,11 +20658,11 @@ function WorkbenchContentToolbarViewModeControl({
   onValueChange,
   classNames
 }) {
-  const rootRef = React2.useRef(null);
-  const [open, setOpen] = React2.useState(false);
+  const rootRef = React4.useRef(null);
+  const [open, setOpen] = React4.useState(false);
   const activeOption = options.find((option) => option.value === value) || options.find((option) => !option.disabled) || options[0];
   const activeIcon = activeOption ? getViewModeOptionIcon(activeOption) : null;
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!open) return void 0;
     const handlePointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) {
@@ -20563,7 +20739,7 @@ function WorkbenchContentToolbarViewModeControl({
     ) : null
   ] });
 }
-var WorkbenchContentToolbar = React2.forwardRef(
+var WorkbenchContentToolbar = React4.forwardRef(
   function WorkbenchContentToolbar2({
     as: Component = "div",
     children,
@@ -20656,7 +20832,7 @@ function hasRenderableChildren(children) {
   if (children === null || children === void 0 || typeof children === "boolean") return false;
   if (typeof children === "string") return children.trim().length > 0;
   if (Array.isArray(children)) return children.some(hasRenderableChildren);
-  const childList = React2.Children.toArray(children);
+  const childList = React4.Children.toArray(children);
   if (!childList.length) return false;
   return childList.some((child) => typeof child === "string" ? child.trim().length > 0 : true);
 }
@@ -20695,7 +20871,7 @@ function getMediaDisplayData(value) {
     const isImageUrl = /\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i.test(value);
     return isDataImage || isImageUrl ? { src: value } : null;
   }
-  if (typeof value !== "object" || React2.isValidElement(value)) return null;
+  if (typeof value !== "object" || React4.isValidElement(value)) return null;
   const media = value;
   const src = media.src || media.url || media.thumbnail || media.preview || media.image;
   return src ? {
@@ -20719,7 +20895,7 @@ function renderMaybeFieldIcon(icon, className) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-sm text-[10px] font-semibold text-primary", className), children: icon });
   }
   if (typeof icon === "boolean") return null;
-  if (React2.isValidElement(icon)) return icon;
+  if (React4.isValidElement(icon)) return icon;
   const IconComponent = icon;
   return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: cn("h-3.5 w-3.5 shrink-0 text-primary", className) });
 }
@@ -20747,7 +20923,7 @@ function WorkbenchDetailSidebarMediaValue({
 }
 function getDefaultDetailDisplayValue(value, emptyValue, field, classNames) {
   if (isEmptyDetailValue(value)) return emptyValue;
-  if (React2.isValidElement(value)) return value;
+  if (React4.isValidElement(value)) return value;
   if (shouldRenderAsMedia(field, value)) {
     const media = getMediaDisplayData(value);
     if (media) return /* @__PURE__ */ jsxRuntime.jsx(WorkbenchDetailSidebarMediaValue, { media, classNames });
@@ -20842,7 +21018,7 @@ function WorkbenchDetailSidebarAutoContent({
     ] }, sectionKey);
   }) });
 }
-var WorkbenchDetailSidebar = React2.forwardRef(
+var WorkbenchDetailSidebar = React4.forwardRef(
   function WorkbenchDetailSidebar2({
     as: Component = "aside",
     bodyAs: BodyComponent = "div",
@@ -20933,11 +21109,11 @@ var WorkbenchDetailSidebar = React2.forwardRef(
 );
 function isWorkbenchIconComponent(icon) {
   if (typeof icon === "function") return true;
-  return typeof icon === "object" && icon !== null && !React2.isValidElement(icon) && "$$typeof" in icon;
+  return typeof icon === "object" && icon !== null && !React4.isValidElement(icon) && "$$typeof" in icon;
 }
 function renderWorkbenchIcon(icon, className) {
   if (!icon) return null;
-  if (React2.isValidElement(icon)) return icon;
+  if (React4.isValidElement(icon)) return icon;
   if (isWorkbenchIconComponent(icon)) {
     const Icon2 = icon;
     return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className });
@@ -21069,22 +21245,22 @@ function WorkbenchTableView({
   hiddenRowsMessage
 }) {
   const columnKeySignature = columns.map((column) => column.key).join("
");
-  const defaultColumnOrder = React2.useMemo(() => columnKeySignature ? columnKeySignature.split("
") : [], [columnKeySignature]);
-  const [internalColumnOrder, setInternalColumnOrder] = React2.useState(defaultColumnOrder);
-  const [internalColumnSizes, setInternalColumnSizes] = React2.useState({});
-  React2.useEffect(() => {
+  const defaultColumnOrder = React4.useMemo(() => columnKeySignature ? columnKeySignature.split("
") : [], [columnKeySignature]);
+  const [internalColumnOrder, setInternalColumnOrder] = React4.useState(defaultColumnOrder);
+  const [internalColumnSizes, setInternalColumnSizes] = React4.useState({});
+  React4.useEffect(() => {
     setInternalColumnOrder((current) => normalizeColumnOrder(defaultColumnOrder, current));
   }, [defaultColumnOrder]);
   const resolvedColumnOrder = columnOrder ? normalizeColumnOrder(defaultColumnOrder, columnOrder) : internalColumnOrder;
   const resolvedColumnSizes = columnSizes ?? internalColumnSizes;
-  const handleColumnOrderChange = React2.useCallback((nextOrder, detail) => {
+  const handleColumnOrderChange = React4.useCallback((nextOrder, detail) => {
     const normalizedOrder = normalizeColumnOrder(defaultColumnOrder, nextOrder);
     if (!columnOrder) {
       setInternalColumnOrder(normalizedOrder);
     }
     onColumnOrderChange?.(normalizedOrder, detail);
   }, [columnOrder, defaultColumnOrder, onColumnOrderChange]);
-  const handleColumnSizeChange = React2.useCallback((columnId, width, detail) => {
+  const handleColumnSizeChange = React4.useCallback((columnId, width, detail) => {
     if (!columnSizes) {
       setInternalColumnSizes((current) => ({
         ...current,
@@ -21481,29 +21657,29 @@ function InteractiveTable({
 }) {
   const internalLabels = useMonkeysLocaleMessages().workbench.interactiveTable;
   const columnKeySignature = columns.map((column) => column.key).join("
");
-  const defaultOrder = React2.useMemo(
+  const defaultOrder = React4.useMemo(
     () => columnKeySignature ? columnKeySignature.split("
") : [],
     [columnKeySignature]
   );
-  const defaultSizes = React2.useMemo(
+  const defaultSizes = React4.useMemo(
     () => buildDefaultColumnSizes(columns, defaultColumnSizes),
     [columns, defaultColumnSizes]
   );
-  const [internalColumnOrder, setInternalColumnOrder] = React2.useState(defaultOrder);
-  const [internalColumnSizes, setInternalColumnSizes] = React2.useState(() => loadStoredColumnSizes(columnStorageKey, defaultSizes));
-  const [internalFrozenColumnCount, setInternalFrozenColumnCount] = React2.useState(() => loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
-  const [internalFrozenEndColumnCount, setInternalFrozenEndColumnCount] = React2.useState(() => loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
-  React2.useEffect(() => {
+  const [internalColumnOrder, setInternalColumnOrder] = React4.useState(defaultOrder);
+  const [internalColumnSizes, setInternalColumnSizes] = React4.useState(() => loadStoredColumnSizes(columnStorageKey, defaultSizes));
+  const [internalFrozenColumnCount, setInternalFrozenColumnCount] = React4.useState(() => loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
+  const [internalFrozenEndColumnCount, setInternalFrozenEndColumnCount] = React4.useState(() => loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
+  React4.useEffect(() => {
     setInternalColumnOrder((current) => normalizeColumnOrder2(defaultOrder, current));
   }, [defaultOrder]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (columnSizes) return;
     setInternalColumnSizes(loadStoredColumnSizes(columnStorageKey, defaultSizes));
   }, [columnSizes, columnStorageKey, defaultSizes]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setInternalFrozenColumnCount(loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
   }, [columnStorageKey, columns.length, frozenColumnCount]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setInternalFrozenEndColumnCount(loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
   }, [columnStorageKey, columns.length, frozenEndColumnCount]);
   const resolvedColumnOrder = columnOrder ? normalizeColumnOrder2(defaultOrder, columnOrder) : internalColumnOrder;
@@ -21526,14 +21702,14 @@ function InteractiveTable({
     resetColumnWidth: columnMenuLabels?.resetColumnWidth ?? internalLabels.resetColumnWidth,
     frozenColumnTitle: columnMenuLabels?.frozenColumnTitle ?? internalLabels.frozenColumnTitle
   };
-  const handleColumnOrderChange = React2.useCallback((nextOrder, detail) => {
+  const handleColumnOrderChange = React4.useCallback((nextOrder, detail) => {
     const normalizedOrder = normalizeColumnOrder2(defaultOrder, nextOrder);
     if (!columnOrder) {
       setInternalColumnOrder(normalizedOrder);
     }
     onColumnOrderChange?.(normalizedOrder, detail);
   }, [columnOrder, defaultOrder, onColumnOrderChange]);
-  const handleColumnSizeChange = React2.useCallback((columnId, width, detail) => {
+  const handleColumnSizeChange = React4.useCallback((columnId, width, detail) => {
     const column = columns.find((item) => item.key === columnId);
     const minWidth = column?.minWidth;
     const maxWidth = column?.maxWidth;
@@ -21551,7 +21727,7 @@ function InteractiveTable({
     persistColumnSizes(columnStorageKey, nextSizes);
     onColumnSizeChange?.(columnId, nextWidth, detail);
   }, [columnSizes, columnStorageKey, columns, onColumnSizeChange, resolvedColumnSizes]);
-  const handleResetColumnSize = React2.useCallback((column) => {
+  const handleResetColumnSize = React4.useCallback((column) => {
     const nextWidth = defaultSizes[column.key] ?? getColumnDefaultSize(column);
     const previousWidth = getColumnNumericWidth(column, resolvedColumnSizes);
     const nextSizes = {
@@ -21570,13 +21746,13 @@ function InteractiveTable({
     });
     onResetColumnSizes?.(nextSizes);
   }, [columnSizes, columnStorageKey, defaultSizes, onColumnSizeChange, onResetColumnSizes, resolvedColumnSizes]);
-  const setFrozenColumnCount = React2.useCallback((nextCount) => {
+  const setFrozenColumnCount = React4.useCallback((nextCount) => {
     const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenEndColumnCount));
     setInternalFrozenColumnCount(normalizedCount);
     persistFrozenColumnCount(columnStorageKey, normalizedCount);
     onFrozenColumnCountChange?.(normalizedCount);
   }, [columnStorageKey, onFrozenColumnCountChange, orderedColumns.length, resolvedFrozenEndColumnCount]);
-  const setFrozenEndColumnCount = React2.useCallback((nextCount) => {
+  const setFrozenEndColumnCount = React4.useCallback((nextCount) => {
     const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenColumnCount));
     setInternalFrozenEndColumnCount(normalizedCount);
     persistFrozenEndColumnCount(columnStorageKey, normalizedCount);
@@ -21829,11 +22005,11 @@ function InteractiveTableEditableTextCell({
   onCommit
 }) {
   const initialValue = String(value || "");
-  const [draft, setDraft] = React2.useState(initialValue);
-  React2.useEffect(() => {
+  const [draft, setDraft] = React4.useState(initialValue);
+  React4.useEffect(() => {
     setDraft(initialValue);
   }, [initialValue]);
-  const commit = React2.useCallback(async () => {
+  const commit = React4.useCallback(async () => {
     const nextValue = String(draft || "").trim();
     const previousValue = String(initialValue || "").trim();
     if (nextValue === previousValue) return;
@@ -22252,7 +22428,7 @@ var DEFAULT_MASONRY_GAP_PX = 12;
 var DEFAULT_MASONRY_ROW_HEIGHT_PX = 8;
 var DEFAULT_MASONRY_COLUMN_WIDTH_PX = 280;
 var DEFAULT_MASONRY_ITEM_HEIGHT_PX = 240;
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? React2.useEffect : React2.useLayoutEffect;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React4.useEffect : React4.useLayoutEffect;
 function clamp3(value, min5, max5) {
   return Math.min(Math.max(value, min5), max5);
 }
@@ -22365,17 +22541,17 @@ function WorkbenchMasonryLayout({
   getItemProps,
   className
 }) {
-  const containerRef = React2.useRef(null);
-  const itemNodesRef = React2.useRef(/* @__PURE__ */ new Map());
-  const itemObserverRef = React2.useRef(null);
-  const [containerWidth, setContainerWidth] = React2.useState(0);
-  const [measuredHeights, setMeasuredHeights] = React2.useState({});
-  const itemKeys = React2.useMemo(
+  const containerRef = React4.useRef(null);
+  const itemNodesRef = React4.useRef(/* @__PURE__ */ new Map());
+  const itemObserverRef = React4.useRef(null);
+  const [containerWidth, setContainerWidth] = React4.useState(0);
+  const [measuredHeights, setMeasuredHeights] = React4.useState({});
+  const itemKeys = React4.useMemo(
     () => items.map((item, index) => String(getItemKey(item, index))),
     [getItemKey, items]
   );
   const itemKeysSignature = itemKeys.join("|");
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const node = containerRef.current;
     if (!node) return void 0;
     const updateWidth = () => {
@@ -22391,7 +22567,7 @@ function WorkbenchMasonryLayout({
     window.addEventListener("resize", updateWidth);
     return () => window.removeEventListener("resize", updateWidth);
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setMeasuredHeights((prev) => {
       const currentItemKeys = new Set(itemKeys);
       const next = Object.fromEntries(
@@ -22414,7 +22590,7 @@ function WorkbenchMasonryLayout({
     gap
   });
   const resolvedColumnWidth = containerWidth > 0 ? (containerWidth - gap * Math.max(columnCount - 1, 0)) / columnCount : resolvedTargetColumnWidth;
-  const layoutItems = React2.useMemo(() => items.map((item, index) => {
+  const layoutItems = React4.useMemo(() => items.map((item, index) => {
     const key = itemKeys[index];
     const size = typeof getItemSize === "function" ? getItemSize(item, {
       columnCount,
@@ -22467,7 +22643,7 @@ function WorkbenchMasonryLayout({
       return areMeasurementMapsEqual(prev, merged) ? prev : merged;
     });
   }, [columnCount, isDensePlacement, itemKeysSignature, resolvedColumnWidth]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (typeof ResizeObserver !== "function") return void 0;
     const observer = new ResizeObserver((entries) => {
       setMeasuredHeights((prev) => {
@@ -22713,7 +22889,7 @@ function WorkbenchCollectionSkeleton({
   const count = resolveSkeletonCount({ columnCount, config, phase });
   const aspectRatios = resolveAspectRatios(mode, config?.aspectRatios);
   const animated = config?.animated ?? true;
-  const items = React2.useMemo(
+  const items = React4.useMemo(
     () => Array.from({ length: count }, (_, index) => ({
       aspectRatio: aspectRatios[index % aspectRatios.length],
       key: `${phase}-${index}`
@@ -22953,21 +23129,21 @@ function WorkbenchCollection({
   const componentAttributes = useMonkeysComponentAttributes();
   const localeMessages = useMonkeysLocaleMessages().workbench.collection;
   const statusStates = useMonkeysStatusStates();
-  const componentId = React2.useId().replace(/:/g, "");
-  const rootRef = React2.useRef(null);
-  const itemsRef = React2.useRef(null);
-  const loadMoreRef = React2.useRef(null);
-  const lastSelectedIndexRef = React2.useRef(null);
-  const loadMoreLockedRef = React2.useRef(false);
-  const layoutReadyRef = React2.useRef(false);
-  const [containerWidth, setContainerWidth] = React2.useState(0);
-  const [itemsNode, setItemsNode] = React2.useState(null);
-  const [internalSelectedKeys, setInternalSelectedKeys] = React2.useState(
+  const componentId = React4.useId().replace(/:/g, "");
+  const rootRef = React4.useRef(null);
+  const itemsRef = React4.useRef(null);
+  const loadMoreRef = React4.useRef(null);
+  const lastSelectedIndexRef = React4.useRef(null);
+  const loadMoreLockedRef = React4.useRef(false);
+  const layoutReadyRef = React4.useRef(false);
+  const [containerWidth, setContainerWidth] = React4.useState(0);
+  const [itemsNode, setItemsNode] = React4.useState(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = React4.useState(
     () => new Set(config.selection?.defaultSelectedKeys ?? [])
   );
-  const callbacksRef = React2.useRef(callbacks);
+  const callbacksRef = React4.useRef(callbacks);
   callbacksRef.current = callbacks;
-  const registerItemsNode = React2.useCallback((node) => {
+  const registerItemsNode = React4.useCallback((node) => {
     itemsRef.current = node;
     setItemsNode(node);
   }, []);
@@ -22978,11 +23154,11 @@ function WorkbenchCollection({
   const gap = normalizeGap(config.layout.gap);
   const rowHeight = normalizeRowHeight(config.layout.rowHeight);
   const getItemKey = config.getItemKey ?? getDefaultItemKey;
-  const normalizedItems = React2.useMemo(() => items.map((item, index) => {
+  const normalizedItems = React4.useMemo(() => items.map((item, index) => {
     const key = getItemKey(item, index);
     return { item, index, key, stringKey: String(key) };
   }), [getItemKey, items]);
-  const keys = React2.useMemo(
+  const keys = React4.useMemo(
     () => normalizedItems.map(({ key }) => key),
     [normalizedItems]
   );
@@ -22993,14 +23169,14 @@ function WorkbenchCollection({
   const hasMore = state?.hasMore === true;
   const loadingVariant = resolveWorkbenchCollectionLoadingVariant(config.loading?.variant);
   const layoutItemCount = loading && normalizedItems.length === 0 && loadingVariant === "skeleton" ? resolveWorkbenchCollectionSkeletonCapacity(config.loading?.skeleton) : normalizedItems.length;
-  React2.useEffect(() => warnOnDuplicateKeys(keys), [keys, keysSignature]);
+  React4.useEffect(() => warnOnDuplicateKeys(keys), [keys, keysSignature]);
   const selectionMode = config.selection?.mode ?? "none";
   const controlledSelection = config.selection?.selectedKeys !== void 0;
-  const selectedKeys = React2.useMemo(
+  const selectedKeys = React4.useMemo(
     () => selectionMode === "none" ? /* @__PURE__ */ new Set() : controlledSelection ? new Set(config.selection?.selectedKeys ?? []) : internalSelectedKeys,
     [config.selection?.selectedKeys, controlledSelection, internalSelectedKeys, selectionMode]
   );
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (controlledSelection) return;
     const availableKeys = new Set(keys);
     setInternalSelectedKeys((previous) => {
@@ -23008,7 +23184,7 @@ function WorkbenchCollection({
       return setsEqual(previous, next) ? previous : next;
     });
   }, [controlledSelection, keys, keysSignature]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const node = itemsNode;
     if (!node) return void 0;
     const updateWidth = () => {
@@ -23043,7 +23219,7 @@ function WorkbenchCollection({
     itemsRef.current
   );
   const placementStrategy = config.layout.placementStrategy ?? (mode === "dense" ? "dense" : mode === "masonry" ? "shortest" : "shelf");
-  const labels = React2.useMemo(() => ({
+  const labels = React4.useMemo(() => ({
     collection: config.labels?.collection ?? localeMessages.label,
     loading: config.labels?.loading ?? localeMessages.loading,
     empty: config.labels?.empty ?? localeMessages.empty,
@@ -23055,7 +23231,7 @@ function WorkbenchCollection({
     offline: config.labels?.offline ?? localeMessages.offline,
     requestAccess: config.labels?.requestAccess ?? localeMessages.requestAccess
   }), [config.labels, localeMessages]);
-  const virtualizationError = React2.useMemo(() => {
+  const virtualizationError = React4.useMemo(() => {
     const virtualization = config.virtualization;
     if (virtualization?.enabled !== true || virtualization.fallback !== "error") return null;
     if (!virtualization.adapter) {
@@ -23066,7 +23242,7 @@ function WorkbenchCollection({
     }
     return null;
   }, [config.virtualization, mode]);
-  const layoutSnapshot = React2.useMemo(() => ({
+  const layoutSnapshot = React4.useMemo(() => ({
     mode,
     columnCount,
     columnWidth,
@@ -23074,23 +23250,23 @@ function WorkbenchCollection({
     gap,
     itemCount: normalizedItems.length
   }), [columnCount, columnWidth, containerWidth, gap, mode, normalizedItems.length]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     callbacksRef.current?.onLayoutChange?.(layoutSnapshot);
     if (containerWidth > 0 && !layoutReadyRef.current) {
       layoutReadyRef.current = true;
       callbacksRef.current?.onLayoutReady?.(layoutSnapshot);
     }
   }, [layoutSnapshot, containerWidth]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     layoutReadyRef.current = false;
   }, [mode]);
-  const resolveScrollOwner = React2.useCallback(() => {
+  const resolveScrollOwner = React4.useCallback(() => {
     const requestedOwner = config.layout.scrollOwner;
     if (requestedOwner && requestedOwner !== "self" && requestedOwner !== "parent") return requestedOwner;
     if (requestedOwner === "parent") return getParentScrollOwner(rootRef.current);
     return rootRef.current;
   }, [config.layout.scrollOwner]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const restorationKey = config.scrollRestorationKey?.trim();
     if (!restorationKey || typeof window === "undefined") return void 0;
     const owner = resolveScrollOwner();
@@ -23115,10 +23291,10 @@ function WorkbenchCollection({
   }, [config.scrollRestorationKey, resolveScrollOwner]);
   const canLoadMore = typeof callbacks?.onLoadMore === "function";
   const effectiveError = state?.error ?? virtualizationError;
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!loadingMore || !hasMore) loadMoreLockedRef.current = false;
   }, [hasMore, loadingMore, normalizedItems.length, keysSignature]);
-  const requestLoadMore = React2.useCallback(() => {
+  const requestLoadMore = React4.useCallback(() => {
     if (!canLoadMore || !hasMore || loadingMore || loadMoreLockedRef.current) return;
     loadMoreLockedRef.current = true;
     try {
@@ -23133,7 +23309,7 @@ function WorkbenchCollection({
       throw error;
     }
   }, [canLoadMore, hasMore, loadingMore]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const sentinel = loadMoreRef.current;
     if (!sentinel || !canLoadMore || !hasMore || loadingMore) return void 0;
     if (typeof IntersectionObserver !== "function") return void 0;
@@ -23149,7 +23325,7 @@ function WorkbenchCollection({
     observer.observe(sentinel);
     return () => observer.disconnect();
   }, [canLoadMore, config.loading?.rootMargin, config.loading?.threshold, hasMore, keysSignature, loadingMore, normalizedItems.length, requestLoadMore, resolveScrollOwner]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!config.loading?.autoFill || !canLoadMore || !hasMore || loadingMore) return;
     const sentinel = loadMoreRef.current;
     if (!sentinel) return;
@@ -23167,7 +23343,7 @@ function WorkbenchCollection({
     requestLoadMore,
     resolveScrollOwner
   ]);
-  const groups = React2.useMemo(() => {
+  const groups = React4.useMemo(() => {
     if (!config.grouping) {
       return [{ key: "__all__", stringKey: "__all__", items: normalizedItems }];
     }
@@ -23189,7 +23365,7 @@ function WorkbenchCollection({
     });
     return Array.from(grouped.values());
   }, [config.grouping, normalizedItems]);
-  const setSelection = React2.useCallback((entry, behavior = config.selection?.behavior ?? (selectionMode === "multiple" ? "toggle" : "replace")) => {
+  const setSelection = React4.useCallback((entry, behavior = config.selection?.behavior ?? (selectionMode === "multiple" ? "toggle" : "replace")) => {
     if (selectionMode === "none" || config.selection?.isItemDisabled?.(entry.item, entry.index)) return;
     const current = new Set(selectedKeys);
     const next = /* @__PURE__ */ new Set();
@@ -23213,7 +23389,7 @@ function WorkbenchCollection({
     if (!controlledSelection) setInternalSelectedKeys(next);
     callbacks?.onSelectionChange?.(next, { item: entry.item, key: entry.key, behavior });
   }, [callbacks, config.selection, controlledSelection, normalizedItems, selectedKeys, selectionMode]);
-  const createItemContext = React2.useCallback((entry, layout) => {
+  const createItemContext = React4.useCallback((entry, layout) => {
     const disabled = config.selection?.isItemDisabled?.(entry.item, entry.index) ?? false;
     const context = {
       item: entry.item,
@@ -23235,7 +23411,7 @@ function WorkbenchCollection({
     };
     return context;
   }, [callbacks, config.getItemStatus, config.selection, selectedKeys, selectionMode, setSelection, slots?.item]);
-  const getItemInteractionProps = React2.useCallback((entry, context) => {
+  const getItemInteractionProps = React4.useCallback((entry, context) => {
     const handleKeyboard = (event) => {
       if (event.target !== event.currentTarget || event.key !== "Enter" && event.key !== " ") return;
       event.preventDefault();
@@ -23283,7 +23459,7 @@ function WorkbenchCollection({
       onDrop: (event) => callbacks?.onItemDrop?.(entry.item, context, event)
     };
   }, [callbacks, classNames?.item, componentId, config.appearance, config.item?.title?.visibility, selectionMode]);
-  const renderItemContent2 = React2.useCallback((entry, context) => {
+  const renderItemContent2 = React4.useCallback((entry, context) => {
     const content = renderItem(entry.item, context);
     const titleConfig = config.item?.title;
     const visibility = titleConfig?.visibility ?? "always";
@@ -23363,13 +23539,13 @@ function WorkbenchCollection({
       }
     );
   }, [classNames?.itemActions, classNames?.itemContent, classNames?.itemTitle, config.item, renderItem]);
-  const renderEntry = React2.useCallback((entry, layout, includeShell = true) => {
+  const renderEntry = React4.useCallback((entry, layout, includeShell = true) => {
     const context = createItemContext(entry, layout);
     const content = renderItemContent2(entry, context);
     if (!includeShell) return content;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...getItemInteractionProps(entry, context), children: content });
   }, [createItemContext, getItemInteractionProps, renderItemContent2]);
-  const baseLayoutContext = React2.useMemo(() => ({
+  const baseLayoutContext = React4.useMemo(() => ({
     mode,
     columnCount,
     columnWidth,
@@ -23395,7 +23571,7 @@ function WorkbenchCollection({
         scrollOwner: resolveScrollOwner(),
         renderItem: (item, localIndex, layout) => {
           const entry = group.items[localIndex];
-          return entry ? /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: renderEntry(entry, layout) }, entry.stringKey) : null;
+          return entry ? /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: renderEntry(entry, layout) }, entry.stringKey) : null;
         }
       });
     }
@@ -23446,7 +23622,7 @@ function WorkbenchCollection({
           "aria-multiselectable": selectionMode === "multiple" || void 0,
           className: cn("grid min-w-0 grid-flow-col items-start overflow-x-auto", classNames?.layout),
           style: { gap, gridAutoColumns: typeof cardWidth === "number" ? `${cardWidth}px` : cardWidth },
-          children: group.items.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: renderEntry(entry, baseLayoutContext) }, entry.stringKey))
+          children: group.items.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: renderEntry(entry, baseLayoutContext) }, entry.stringKey))
         }
       );
     }
@@ -24103,17 +24279,17 @@ function WorkbenchLaneView({
   classNames,
   style
 }) {
-  const [activeRowId, setActiveRowId] = React2.useState(null);
+  const [activeRowId, setActiveRowId] = React4.useState(null);
   const sensors = core.useSensors(core.useSensor(core.PointerSensor, { activationConstraint: { distance: activationDistance } }));
-  const columnMap = React2.useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
-  const rowEntries = React2.useMemo(() => rows.map((row, rowIndex) => ({
+  const columnMap = React4.useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+  const rowEntries = React4.useMemo(() => rows.map((row, rowIndex) => ({
     row,
     rowIndex,
     rowId: getRowId(row, rowIndex),
     columnId: getColumnId(row, rowIndex)
   })), [getColumnId, getRowId, rows]);
   const activeEntry = activeRowId ? rowEntries.find((entry) => entry.rowId === activeRowId) : void 0;
-  const rowsByColumn = React2.useMemo(() => {
+  const rowsByColumn = React4.useMemo(() => {
     const next = /* @__PURE__ */ new Map();
     columns.forEach((column) => next.set(column.id, []));
     rowEntries.forEach(({ row, rowIndex, rowId, columnId }) => {
@@ -24122,10 +24298,10 @@ function WorkbenchLaneView({
     return next;
   }, [columns, rowEntries]);
   const activeColumn = activeEntry ? columnMap.get(activeEntry.columnId) : void 0;
-  const handleDragStart = React2.useCallback((event) => {
+  const handleDragStart = React4.useCallback((event) => {
     setActiveRowId(String(event.active.id));
   }, []);
-  const handleDragEnd = React2.useCallback((event) => {
+  const handleDragEnd = React4.useCallback((event) => {
     setActiveRowId(null);
     const rowId = String(event.active.id);
     const nextColumnId = String(event.over?.id ?? "");
@@ -24133,7 +24309,7 @@ function WorkbenchLaneView({
     if (!activeRow || !columnMap.has(nextColumnId) || activeRow.columnId === nextColumnId) return;
     onMoveRow?.(rowId, nextColumnId, activeRow.row);
   }, [columnMap, onMoveRow, rowEntries]);
-  const handleDragCancel = React2.useCallback(() => {
+  const handleDragCancel = React4.useCallback(() => {
     setActiveRowId(null);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [
@@ -25513,7 +25689,7 @@ function cn3(...classNames) {
   return classNames.filter(Boolean).join(" ");
 }
 function isToastInput(input) {
-  if (!input || typeof input !== "object" || React2.isValidElement(input)) {
+  if (!input || typeof input !== "object" || React4.isValidElement(input)) {
     return false;
   }
   return "title" in input || "description" in input || "variant" in input;
@@ -25648,10 +25824,10 @@ function MonkeysToastProvider({ children, toasterProps }) {
   ] });
 }
 function useToastOnValue(value, options = {}) {
-  const previousSignatureRef = React2.useRef(null);
+  const previousSignatureRef = React4.useRef(null);
   const localeMessages = useMonkeysLocaleMessages().toast;
   const translate = options.translate;
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!value) {
       previousSignatureRef.current = null;
       return;
@@ -25704,10 +25880,10 @@ function useToastOnValue(value, options = {}) {
   ]);
 }
 function useToastFeed(items, options = {}) {
-  const previousVisibleSignaturesRef = React2.useRef(/* @__PURE__ */ new Set());
+  const previousVisibleSignaturesRef = React4.useRef(/* @__PURE__ */ new Set());
   const localeMessages = useMonkeysLocaleMessages().toast;
   const translate = options.translate;
-  const emitItem = React2.useCallback(
+  const emitItem = React4.useCallback(
     (item, index, visibleSignatures) => {
       const variant = item.variant ?? "info";
       const title = translateMessage(
@@ -25740,7 +25916,7 @@ function useToastFeed(items, options = {}) {
     },
     [localeMessages, options.messages, translate]
   );
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const visibleSignatures = /* @__PURE__ */ new Set();
     items.forEach((item, index) => {
       if (item) {
@@ -25926,55 +26102,55 @@ function RenderNodeHost({
   ...props
 }) {
   const Component = as;
-  const hostRef = React2.useRef(null);
-  const [viewportWidth, setViewportWidth] = React2.useState(() => typeof window === "undefined" ? void 0 : window.innerWidth);
-  const [mountedNodeId, setMountedNodeId] = React2.useState(() => shouldMountNode(node, active, visible) ? node.nodeId : void 0);
+  const hostRef = React4.useRef(null);
+  const [viewportWidth, setViewportWidth] = React4.useState(() => typeof window === "undefined" ? void 0 : window.innerWidth);
+  const [mountedNodeId, setMountedNodeId] = React4.useState(() => shouldMountNode(node, active, visible) ? node.nodeId : void 0);
   const policyMounted = shouldMountNode(node, active, visible);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (node.responsive.length === 0 || typeof window === "undefined") return void 0;
     const handleResize = () => setViewportWidth(window.innerWidth);
     handleResize();
     window.addEventListener("resize", handleResize, { passive: true });
     return () => window.removeEventListener("resize", handleResize);
   }, [node.responsive.length]);
-  const resolvedLayout = React2.useMemo(() => resolveRenderNodeLayout(node, viewportWidth), [node, viewportWidth]);
-  React2.useEffect(() => {
+  const resolvedLayout = React4.useMemo(() => resolveRenderNodeLayout(node, viewportWidth), [node, viewportWidth]);
+  React4.useEffect(() => {
     if (!active || !visible || !node.lifecycle.deepLink || !["page", "record"].includes(node.kind)) return;
     const element = hostRef.current;
     if (!element || element.style.display === "contents") return;
     element.focus({ preventScroll: true });
   }, [active, node.kind, node.lifecycle.deepLink, node.nodeId, visible]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (policyMounted) setMountedNodeId(node.nodeId);
     else if (!node.lifecycle.retainOnDeactivate) setMountedNodeId(void 0);
   }, [node.lifecycle.retainOnDeactivate, node.nodeId, policyMounted]);
-  const policyState = React2.useMemo(() => resolveRenderNodePolicyState(node, {
+  const policyState = React4.useMemo(() => resolveRenderNodePolicyState(node, {
     active,
     visible,
     manualQueryEnabled,
     previouslyMounted: mountedNodeId === node.nodeId
   }), [active, manualQueryEnabled, mountedNodeId, node, visible]);
-  const activate = React2.useCallback(() => {
+  const activate = React4.useCallback(() => {
     onActivate?.(node.activation, node);
   }, [node, onActivate]);
-  const setManualQueryEnabled = React2.useCallback((enabled) => {
+  const setManualQueryEnabled = React4.useCallback((enabled) => {
     onManualQueryEnabledChange?.(enabled, node);
   }, [node, onManualQueryEnabledChange]);
-  const runtimeState = React2.useMemo(() => ({
+  const runtimeState = React4.useMemo(() => ({
     ...policyState,
     activate,
     setManualQueryEnabled
   }), [activate, policyState, setManualQueryEnabled]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     onRuntimeStateChange?.(policyState, node);
   }, [node, onRuntimeStateChange, policyState]);
-  const setHostRef = React2.useCallback((value) => {
+  const setHostRef = React4.useCallback((value) => {
     hostRef.current = value;
     assignRef4(elementRef, value);
   }, [elementRef]);
   const scrollAdapter = scrollRestoration === false ? void 0 : scrollRestoration;
   const restoresHostScroll = scrollAdapter !== void 0 && node.scroll.owner !== "provider" && !node.scroll.virtualizationBoundary && node.scroll.axis !== "none" && node.scroll.restoreKey !== void 0;
-  const readPosition = React2.useCallback(() => {
+  const readPosition = React4.useCallback(() => {
     const element = hostRef.current;
     if (!element) return { x: 0, y: 0 };
     return {
@@ -25982,7 +26158,7 @@ function RenderNodeHost({
       y: node.scroll.axis === "x" ? 0 : element.scrollTop
     };
   }, [node.scroll.axis]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!policyState.mounted || !restoresHostScroll || !scrollAdapter) return void 0;
     const key = node.scroll.restoreKey;
     const element = hostRef.current;
@@ -26122,10 +26298,10 @@ function OverlayNodeHost({
   onRuntimeStateChange,
   onOpenChange
 }) {
-  const historyEntryOwnedRef = React2.useRef(false);
-  const initializedUrlRef = React2.useRef(false);
+  const historyEntryOwnedRef = React4.useRef(false);
+  const initializedUrlRef = React4.useRef(false);
   const zIndex = getOverlayZIndex(node.zIndexLane);
-  const syncUrl = React2.useCallback((nextOpen) => {
+  const syncUrl = React4.useCallback((nextOpen) => {
     if (!node.renderNode.lifecycle.deepLink || historyAdapter === false) return;
     const currentUrl = historyAdapter.getCurrentUrl();
     if (isOverlayUrlActive(node, currentUrl) === nextOpen) return;
@@ -26148,11 +26324,11 @@ function OverlayNodeHost({
       historyEntryOwnedRef.current = false;
     }
   }, [historyAdapter, node]);
-  const requestOpenChange = React2.useCallback((nextOpen) => {
+  const requestOpenChange = React4.useCallback((nextOpen) => {
     syncUrl(nextOpen);
     onOpenChange(nextOpen);
   }, [onOpenChange, syncUrl]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!node.renderNode.lifecycle.deepLink || historyAdapter === false) return void 0;
     const urlOpen = isOverlayUrlActive(node, historyAdapter.getCurrentUrl());
     if (!initializedUrlRef.current) {
@@ -26168,12 +26344,12 @@ function OverlayNodeHost({
       if (nextOpen !== open) onOpenChange(nextOpen);
     });
   }, [historyAdapter, node, onOpenChange, open, syncUrl]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!open || !node.renderNode.lifecycle.focusReturn || typeof document === "undefined") return void 0;
     const target = focusReturnRef?.current ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
     return () => scheduleFocus(focusReturnRef?.current ?? target);
   }, [focusReturnRef, node.renderNode.lifecycle.focusReturn, open]);
-  const renderNodeAttributes = React2.useMemo(
+  const renderNodeAttributes = React4.useMemo(
     () => getRenderNodeDataAttributes(node.renderNode),
     [node.renderNode]
   );
@@ -26782,7 +26958,7 @@ function LoadingIcon3() {
     }
   );
 }
-var DataExplorerButton = React2.forwardRef(function DataExplorerButton2({
+var DataExplorerButton = React4.forwardRef(function DataExplorerButton2({
   children,
   label,
   icon,
@@ -27808,7 +27984,7 @@ function DataExplorerDisplayActionMenu({
   className,
   classNames
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React4.useState(false);
   const theme = resolveDataExplorerAppearance(appearance);
   const context = {
     itemId,
@@ -28469,13 +28645,13 @@ function DataExplorerViewCollection({
   );
   const measuredGridGap = resolveNonNegativeNumber(measuredGridOptions?.gap, 8);
   const measuredGridMinColumnWidth = measuredGridOptions?.minColumnWidth ?? "220px";
-  const measuredElementsRef = React2.useRef(/* @__PURE__ */ new Map());
-  const measuredCallbacksRef = React2.useRef(/* @__PURE__ */ new Map());
-  const measuredSpansRef = React2.useRef(/* @__PURE__ */ new Map());
-  const resizeObserverRef = React2.useRef(null);
-  const [, setMeasuredLayoutVersion] = React2.useState(0);
+  const measuredElementsRef = React4.useRef(/* @__PURE__ */ new Map());
+  const measuredCallbacksRef = React4.useRef(/* @__PURE__ */ new Map());
+  const measuredSpansRef = React4.useRef(/* @__PURE__ */ new Map());
+  const resizeObserverRef = React4.useRef(null);
+  const [, setMeasuredLayoutVersion] = React4.useState(0);
   const resolveItemStyle = typeof itemStyle === "function" ? (props) => itemStyle(props) : () => itemStyle;
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!measuredGridEnabled || typeof ResizeObserver === "undefined") {
       return void 0;
     }
@@ -28511,7 +28687,7 @@ function DataExplorerViewCollection({
       }
     };
   }, [measuredGridEnabled, measuredGridGap, measuredGridRowHeight]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!measuredGridEnabled) {
       measuredElementsRef.current.clear();
       measuredCallbacksRef.current.clear();
@@ -28538,7 +28714,7 @@ function DataExplorerViewCollection({
       setMeasuredLayoutVersion((version2) => version2 + 1);
     }
   }, [measuredGridEnabled, resolvedItems, resolveItemId]);
-  const getMeasuredRef = React2.useCallback((itemId) => {
+  const getMeasuredRef = React4.useCallback((itemId) => {
     const cached = measuredCallbacksRef.current.get(itemId);
     if (cached) return cached;
     const callback = (node) => {
@@ -28649,7 +28825,7 @@ function DataExplorerViewCollection({
               } : resolvedStyle;
               if (!wrapItems) {
                 if (!measuredGridEnabled) {
-                  return /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: renderedItem }, itemId);
+                  return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: renderedItem }, itemId);
                 }
                 return /* @__PURE__ */ jsxRuntime.jsx("div", { className: itemClassName, style: measuredStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: getMeasuredRef(itemId), children: renderedItem }) }, itemId);
               }
@@ -28901,21 +29077,21 @@ function DataExplorerImagePreview({
     appearance ?? { background: "dark-stage" }
   );
   const imageSrc = typeof src === "string" ? src.trim() : "";
-  const stageRef = React2.useRef(null);
-  const stageSizeRef = React2.useRef(null);
-  const viewRef = React2.useRef({ scale: 1, translateX: stagePadding, translateY: stagePadding });
-  const draggingRef = React2.useRef(void 0);
-  const [naturalSize, setNaturalSize] = React2.useState(null);
-  const [dragging, setDragging] = React2.useState(false);
-  const [{ scale: scale3, translateX, translateY }, setView] = React2.useState(() => ({
+  const stageRef = React4.useRef(null);
+  const stageSizeRef = React4.useRef(null);
+  const viewRef = React4.useRef({ scale: 1, translateX: stagePadding, translateY: stagePadding });
+  const draggingRef = React4.useRef(void 0);
+  const [naturalSize, setNaturalSize] = React4.useState(null);
+  const [dragging, setDragging] = React4.useState(false);
+  const [{ scale: scale3, translateX, translateY }, setView] = React4.useState(() => ({
     scale: 1,
     translateX: stagePadding,
     translateY: stagePadding
   }));
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     viewRef.current = { scale: scale3, translateX, translateY };
   }, [scale3, translateX, translateY]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setNaturalSize(null);
     setView({ scale: 1, translateX: stagePadding, translateY: stagePadding });
   }, [imageSrc, stagePadding]);
@@ -28923,7 +29099,7 @@ function DataExplorerImagePreview({
   const normalizedMaxScale = Number.isFinite(maxScale) ? Math.max(normalizedMinScale, maxScale) : MAX_SAFE_SCALE;
   const normalizedZoomStep = Number.isFinite(zoomStep) && zoomStep > 1 ? zoomStep : DEFAULT_ZOOM_STEP;
   const normalizedStagePadding = Number.isFinite(stagePadding) && stagePadding >= 0 ? stagePadding : DEFAULT_STAGE_PADDING;
-  const resetView = React2.useCallback(
+  const resetView = React4.useCallback(
     (nextNaturalSize) => {
       const stage = stageRef.current;
       const size = nextNaturalSize ?? naturalSize;
@@ -28958,7 +29134,7 @@ function DataExplorerImagePreview({
     },
     [naturalSize, normalizedMaxScale, normalizedMinScale, normalizedStagePadding]
   );
-  const compensateStageResize = React2.useCallback((width, height) => {
+  const compensateStageResize = React4.useCallback((width, height) => {
     if (!Number.isFinite(width) || !Number.isFinite(height)) return;
     if (width <= 0 || height <= 0) return;
     const previous = stageSizeRef.current;
@@ -28973,7 +29149,7 @@ function DataExplorerImagePreview({
       translateY: current.translateY + deltaY
     }));
   }, [imageSrc]);
-  React2.useLayoutEffect(() => {
+  React4.useLayoutEffect(() => {
     const stage = stageRef.current;
     if (!stage) return;
     compensateStageResize(stage.clientWidth, stage.clientHeight);
@@ -28992,7 +29168,7 @@ function DataExplorerImagePreview({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [compensateStageResize]);
-  const zoomAtPoint = React2.useCallback(
+  const zoomAtPoint = React4.useCallback(
     (factor, stageX, stageY) => {
       if (!Number.isFinite(factor) || factor === 1) return;
       if (!Number.isFinite(stageX) || !Number.isFinite(stageY)) return;
@@ -29015,7 +29191,7 @@ function DataExplorerImagePreview({
     },
     [normalizedMaxScale, normalizedMinScale]
   );
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const stage = stageRef.current;
     if (!stage || !imageSrc || !naturalSize) return;
     const handleWheel = (event) => {
@@ -29030,7 +29206,7 @@ function DataExplorerImagePreview({
     stage.addEventListener("wheel", handleWheel, { passive: false });
     return () => stage.removeEventListener("wheel", handleWheel);
   }, [imageSrc, naturalSize, normalizedZoomStep, zoomAtPoint]);
-  const handlePointerDown = React2.useCallback(
+  const handlePointerDown = React4.useCallback(
     (event) => {
       if (event.button !== 0) return;
       if (!imageSrc || !naturalSize) return;
@@ -29050,7 +29226,7 @@ function DataExplorerImagePreview({
     },
     [imageSrc, naturalSize]
   );
-  const handlePointerMove = React2.useCallback((event) => {
+  const handlePointerMove = React4.useCallback((event) => {
     const drag = draggingRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     event.preventDefault();
@@ -29060,7 +29236,7 @@ function DataExplorerImagePreview({
       translateY: drag.startTranslateY + event.clientY - drag.startClientY
     });
   }, []);
-  const endDrag = React2.useCallback((event) => {
+  const endDrag = React4.useCallback((event) => {
     const drag = draggingRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     draggingRef.current = void 0;
@@ -29070,7 +29246,7 @@ function DataExplorerImagePreview({
       stage.releasePointerCapture(event.pointerId);
     }
   }, []);
-  const handleDoubleClick = React2.useCallback(
+  const handleDoubleClick = React4.useCallback(
     (event) => {
       if (!imageSrc || !naturalSize) return;
       if (isNoDragTarget(event.target)) return;
@@ -29078,7 +29254,7 @@ function DataExplorerImagePreview({
     },
     [imageSrc, naturalSize, resetView]
   );
-  const handleZoomButtonClick = React2.useCallback(
+  const handleZoomButtonClick = React4.useCallback(
     (factor) => {
       const stage = stageRef.current;
       if (!stage || !naturalSize) return;
@@ -29954,7 +30130,7 @@ function DataExplorerViewTree({
   const loadingContent = loadingNode ?? labels?.loading ?? internalLabels.loading;
   const emptyContent = empty ?? labels?.empty ?? internalLabels.empty;
   const hasExplicitGroups = Array.isArray(groups);
-  const resolvedGroups = React2.useMemo(
+  const resolvedGroups = React4.useMemo(
     () => {
       if (hasExplicitGroups) {
         return groups;
@@ -29970,19 +30146,19 @@ function DataExplorerViewTree({
     },
     [groups, hasExplicitGroups, nodes]
   );
-  const flattenedNodeMap = React2.useMemo(
+  const flattenedNodeMap = React4.useMemo(
     () => buildFlattenedNodeMap(resolvedGroups),
     [resolvedGroups]
   );
-  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = React2.useState(
+  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = React4.useState(
     () => buildDefaultNodeExpandedSet(resolvedGroups, defaultExpandedNodeIds)
   );
-  const [internalExpandedGroupIds, setInternalExpandedGroupIds] = React2.useState(
+  const [internalExpandedGroupIds, setInternalExpandedGroupIds] = React4.useState(
     () => buildDefaultGroupExpandedSet(resolvedGroups, defaultExpandedGroupIds)
   );
-  const [draggingNodeId, setDraggingNodeId] = React2.useState();
-  const [dragOverNodeId, setDragOverNodeId] = React2.useState();
-  React2.useEffect(() => {
+  const [draggingNodeId, setDraggingNodeId] = React4.useState();
+  const [dragOverNodeId, setDragOverNodeId] = React4.useState();
+  React4.useEffect(() => {
     setInternalExpandedNodeIds(
       buildDefaultNodeExpandedSet(resolvedGroups, defaultExpandedNodeIds)
     );
@@ -30811,19 +30987,19 @@ function applyClass(resolved) {
   }
 }
 function useDarkMode() {
-  const [mode, setModeState] = React2.useState(getStoredMode);
-  const [resolvedMode, setResolvedMode] = React2.useState(() => resolve(mode));
-  const setMode = React2.useCallback((next) => {
+  const [mode, setModeState] = React4.useState(getStoredMode);
+  const [resolvedMode, setResolvedMode] = React4.useState(() => resolve(mode));
+  const setMode = React4.useCallback((next) => {
     localStorage.setItem(STORAGE_KEY, next);
     setModeState(next);
     const r = resolve(next);
     setResolvedMode(r);
     applyClass(r);
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     applyClass(resolvedMode);
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (mode !== "auto") return;
     const mql = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {