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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce.js';
 import { resolveThemeTokens, buildApplicationHandoffUrl } from '@inf-monkeys-tech/monkeys/runtime';
-import * as React2 from 'react';
-import React2__default, { forwardRef, useId, useState, useRef, useEffect, createElement, createContext, useCallback, useMemo, useContext, Children, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import * as React4 from 'react';
+import React4__default, { forwardRef, useId, useState, useRef, useEffect, createElement, createContext, useCallback, useMemo, useContext, Children, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import { twMerge } from 'tailwind-merge';
@@ -17467,7 +17467,7 @@ function NavigationLayout({
     }
   );
 }
-var AccordionItem = React2.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React4.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -17480,7 +17480,7 @@ var AccordionItem = React2.forwardRef(({ className, style, ...props }, ref) => /
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -17502,7 +17502,7 @@ var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -17512,7 +17512,7 @@ var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref
   }
 ));
 AccordionContent.displayName = "AccordionContent";
-var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -17547,7 +17547,7 @@ var buttonVariants = cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Button = React2.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -17561,7 +17561,7 @@ var Button = React2.forwardRef(
   }
 );
 Button.displayName = "Button";
-var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React4.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -17575,7 +17575,7 @@ var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffse
   }
 ) }));
 PopoverContent.displayName = "PopoverContent";
-var ScrollArea = React2.forwardRef(
+var ScrollArea = React4.forwardRef(
   ({
     className,
     children,
@@ -17619,7 +17619,7 @@ var ScrollArea = React2.forwardRef(
   )
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React4.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -17635,7 +17635,7 @@ var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...pro
   }
 ));
 ScrollBar.displayName = "ScrollBar";
-var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitive.Root,
   {
     ref,
@@ -17648,9 +17648,9 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Switch.displayName = "Switch";
-var Tabs = React2.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, "data-variant": variant, ...props }));
+var Tabs = React4.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, "data-variant": variant, ...props }));
 Tabs.displayName = "Tabs";
-var TabsList = React2.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React4.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -17663,7 +17663,7 @@ var TabsList = React2.forwardRef(({ className, gap, style, ...props }, ref) => /
   }
 ));
 TabsList.displayName = "TabsList";
-var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -17675,7 +17675,7 @@ var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -17687,7 +17687,7 @@ var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsContent.displayName = "TabsContent";
-var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip2.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip2.Portal, { children: /* @__PURE__ */ jsx(
   Tooltip2.Content,
   {
     ref,
@@ -17700,65 +17700,213 @@ var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, ...props },
   }
 ) }));
 TooltipContent.displayName = "TooltipContent";
+var Input = React4.forwardRef(({ className, appearance = "standard", type, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(({ className, appearance = "standard", ...props }, ref) => /* @__PURE__ */ 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__ */ 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 = 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__ */ 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 = 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__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+var InputGroupInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ 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.Root;
 var DropdownMenuTrigger = DropdownMenu2.Trigger;
-var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
+var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
   children,
   /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ml-auto" })
 ] }));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React2.forwardRef(
+var DropdownMenuSubContent = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuContent = React2.forwardRef(
+var DropdownMenuContent = React4.forwardRef(
   ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu2.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React2.forwardRef(
+var DropdownMenuItem = React4.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Item, { ref, className: cn(menuItemClassName, inset && "pl-8", className), ...props })
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React2.forwardRef(
+var DropdownMenuCheckboxItem = React4.forwardRef(
   ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.CheckboxItem, { ref, className: cn(menuItemClassName, "pl-8", className), checked, ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }),
     children
   ] })
 );
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React2.forwardRef(
+var DropdownMenuRadioItem = React4.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.RadioItem, { ref, className: cn(menuItemClassName, "pl-8", className), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }) }) }),
     children
   ] })
 );
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React2.forwardRef(
+var DropdownMenuLabel = React4.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })
 );
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React2.forwardRef(
+var DropdownMenuSeparator = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var SelectTrigger = React2.forwardRef(
-  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.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.forwardRef(
+  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.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__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 opacity-50", iconClassName) }) })
   ] })
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectScrollUpButton = React2.forwardRef(
+var SelectScrollUpButton = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollUpButton.displayName = "SelectScrollUpButton";
-var SelectScrollDownButton = React2.forwardRef(
+var SelectScrollDownButton = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
-var SelectContent = React2.forwardRef(
+var SelectContent = React4.forwardRef(
   ({ className, children, position = "popper", viewportClassName, disableTriggerViewportSizing = false, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.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__ */ jsx(SelectScrollUpButton, {}),
     /* @__PURE__ */ jsx(SelectPrimitive.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 }),
@@ -17766,11 +17914,11 @@ var SelectContent = React2.forwardRef(
   ] }) })
 );
 SelectContent.displayName = "SelectContent";
-var SelectLabel = React2.forwardRef(
+var SelectLabel = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })
 );
 SelectLabel.displayName = "SelectLabel";
-var SelectItem = React2.forwardRef(
+var SelectItem = React4.forwardRef(
   ({ className, children, indicatorClassName, itemText, hideIndicator = false, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, { ref, className: cn(menuItemClassName, "w-full", hideIndicator ? "px-2" : "pl-8 pr-2", className), ...props, children: [
     !hideIndicator ? /* @__PURE__ */ jsx("span", { className: cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", indicatorClassName), children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }) : null,
     itemText ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -17780,7 +17928,7 @@ var SelectItem = React2.forwardRef(
   ] })
 );
 SelectItem.displayName = "SelectItem";
-var SelectSeparator = React2.forwardRef(
+var SelectSeparator = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
@@ -17831,7 +17979,7 @@ function CollectionState({
   if (status === "error") {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-8 text-center", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", role: "alert", children: error }),
-      /* @__PURE__ */ jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary", onClick: onRetry, children: [
+      /* @__PURE__ */ 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__ */ jsx(RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
         messages.retry
       ] })
@@ -17863,7 +18011,7 @@ function SessionActions({
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   if (!capabilities.renameSessions && !capabilities.deleteSessions) return null;
   return /* @__PURE__ */ jsxs(DropdownMenu4, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "flex size-8 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.actions, children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", "aria-label": messages.actions, children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
       capabilities.renameSessions ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => onIntent?.({ type: "rename-session", sessionId: item.id, title: item.title }), children: [
         /* @__PURE__ */ jsx(Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }),
@@ -17939,12 +18087,13 @@ function AgentWorkbenchSidebar({
         /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(SessionAvatar, { item }) }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ 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),
@@ -17974,7 +18123,7 @@ function AgentWorkbenchSidebar({
           percent,
           "%"
         ] }) : /* @__PURE__ */ jsx(StatusIndicator, { status: item.status }),
-        viewModel.capabilities.pinSessions ? /* @__PURE__ */ 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__ */ 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__ */ jsx(Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
@@ -17992,17 +18141,17 @@ function AgentWorkbenchSidebar({
       className: "flex h-full min-h-0 flex-col bg-background text-foreground",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "shrink-0 space-y-3 p-4 pb-2", children: [
-          /* @__PURE__ */ 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__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
+            /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { className: "size-4", "aria-hidden": "true" }) }),
             /* @__PURE__ */ 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;
@@ -18011,7 +18160,7 @@ function AgentWorkbenchSidebar({
                 }
               }
             ),
-            viewModel.searchQuery ? /* @__PURE__ */ 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__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" })
+            viewModel.searchQuery ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(InputGroupButton, { size: "icon-xs", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
           ] }),
           !sessionsOnly || headerActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             !sessionsOnly ? /* @__PURE__ */ jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
@@ -18022,7 +18171,7 @@ function AgentWorkbenchSidebar({
           ] }) : null
         ] }),
         !sessionsOnly ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
             messages.newAgent
           ] }) : null,
@@ -18043,11 +18192,13 @@ function AgentWorkbenchSidebar({
                 ] }),
                 item.builtIn ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 py-1 text-[10px] text-foreground", children: messages.builtIn }) : null,
                 viewModel.capabilities.pinAgents ? /* @__PURE__ */ 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 });
@@ -18068,11 +18219,11 @@ function AgentWorkbenchSidebar({
           )) })
         ] }) : null,
         /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(SquarePen, { className: "size-4", "aria-hidden": "true" }),
             messages.newSession
           ] }) : null,
-          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ 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__ */ 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__ */ jsx(Blocks, { className: "size-4", "aria-hidden": "true" }),
             messages.capabilities
           ] }) : null,
@@ -18089,7 +18240,7 @@ function AgentWorkbenchSidebar({
             renderSessionItems(items)
           ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
         ] }),
-        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ 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__ */ jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ 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__ */ jsx(Settings, { className: "size-4", "aria-hidden": "true" }),
           messages.settings
         ] }) }) : null
@@ -18500,10 +18651,11 @@ function AgentWorkbenchActivity({
                   event.payload.requestedAction !== void 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(JsonValue2, { value: event.payload.requestedAction }) }) : null,
                   requested ? /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
                     /* @__PURE__ */ 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,
@@ -18513,10 +18665,12 @@ function AgentWorkbenchActivity({
                       }
                     ),
                     /* @__PURE__ */ 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,
@@ -18548,10 +18702,12 @@ function AgentWorkbenchActivity({
                   /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: messages.artifact[event.payload.status] })
                 ] }),
                 event.payload.url ? /* @__PURE__ */ 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
                     }),
@@ -18819,20 +18975,23 @@ function SummaryPanel({
       error ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
         retryable ? /* @__PURE__ */ 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__ */ 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
@@ -18842,10 +19001,12 @@ function SummaryPanel({
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "flex flex-wrap gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground", children: [
       canContinueInNewTask ? /* @__PURE__ */ 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: [
@@ -18855,10 +19016,12 @@ function SummaryPanel({
         }
       ) : null,
       canEditAndRerun ? /* @__PURE__ */ 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: [
@@ -18868,10 +19031,12 @@ function SummaryPanel({
         }
       ) : null,
       /* @__PURE__ */ 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: [
@@ -18885,10 +19050,12 @@ function SummaryPanel({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: messages.summary }),
         summary?.payload.text ? /* @__PURE__ */ 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?.({
@@ -18903,10 +19070,12 @@ function SummaryPanel({
       summary?.payload.status === "failed" ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive-text", role: "alert", children: messages.summaryFailed }),
         /* @__PURE__ */ 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: [
@@ -19043,16 +19212,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__ */ jsxs(
     "aside",
     {
@@ -19069,54 +19228,71 @@ function AgentWorkbenchTaskDetails({
             /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: messages.description })
           ] }),
           onIntent ? /* @__PURE__ */ 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__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ 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__ */ jsxs(
-          "button",
+        /* @__PURE__ */ 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__ */ jsx("span", { className: "truncate", children: tab.label }),
-              /* @__PURE__ */ jsx(Count, { value: tab.count })
+              /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "truncate", children: tab.label }),
+                        /* @__PURE__ */ jsx(Count, { value: tab.count })
+                      ]
+                    },
+                    tab.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TabsContent,
+                {
+                  value: "summary",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsx(SummaryPanel, { model, onIntent })
+                }
+              ),
+              workspaceAvailable ? /* @__PURE__ */ jsx(
+                TabsContent,
+                {
+                  value: "workspace",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsx(
+                    WorkspacePanel,
+                    {
+                      model,
+                      sectionClassName: classNames?.section,
+                      codeClassName: classNames?.code
+                    }
+                  )
+                }
+              ) : null
             ]
-          },
-          tab.id
-        )) }),
-        /* @__PURE__ */ 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__ */ jsx(SummaryPanel, { model, onIntent }) : /* @__PURE__ */ jsx(
-              WorkspacePanel,
-              {
-                model,
-                sectionClassName: classNames?.section,
-                codeClassName: classNames?.code
-              }
-            )
           }
         )
       ]
@@ -19340,7 +19516,7 @@ function LoginPage({
         ]
       }
     );
-    return /* @__PURE__ */ jsx(React2__default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
+    return /* @__PURE__ */ jsx(React4__default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
   };
   return /* @__PURE__ */ jsxs(
     "main",