@cytario/design 1.15.0 → 1.17.0

package/dist/index.js

@@ -837,12 +837,26 @@ var variantConfig = {
     iconClass: "text-[var(--color-text-info)]"
   }
 };
+var PlacementContext = createContext2("bottom-right");
+var exitAnimationByPlacement = {
+  "top-center": "-translate-y-full opacity-0",
+  "top-right": "translate-x-full opacity-0",
+  "bottom-center": "translate-y-full opacity-0",
+  "bottom-right": "translate-x-full opacity-0"
+};
+var enterAnimationByPlacement = {
+  "top-center": "translate-y-0 opacity-100 animate-in slide-in-from-top",
+  "top-right": "translate-x-0 opacity-100 animate-in slide-in-from-right",
+  "bottom-center": "translate-y-0 opacity-100 animate-in slide-in-from-bottom",
+  "bottom-right": "translate-x-0 opacity-100 animate-in slide-in-from-right"
+};
 function ToastItem({
   toast,
   onRemove
 }) {
   const [isExiting, setIsExiting] = useState(false);
   const timerRef = useRef(null);
+  const placement = useContext2(PlacementContext);
   const config = variantConfig[toast.variant];
   const IconComponent = config.icon;
   const dismiss = useCallback(() => {
@@ -865,7 +879,7 @@ function ToastItem({
         "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)] shadow-md",
         "min-w-[320px] max-w-[420px]",
         "transition-all duration-200",
-        isExiting ? "translate-x-full opacity-0" : "translate-x-0 opacity-100 animate-in slide-in-from-right",
+        isExiting ? exitAnimationByPlacement[placement] : enterAnimationByPlacement[placement],
         config.containerClass
       ].join(" "),
       children: [
@@ -885,10 +899,20 @@ function ToastItem({
     }
   );
 }
-function ToastContainer({ toasts, removeToast }) {
+var containerPositionStyles = {
+  "top-center": "fixed top-4 left-1/2 -translate-x-1/2 z-50 flex flex-col-reverse gap-2 items-center",
+  "top-right": "fixed top-4 right-4 z-50 flex flex-col-reverse gap-2",
+  "bottom-center": "fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex flex-col gap-2 items-center",
+  "bottom-right": "fixed bottom-4 right-4 z-50 flex flex-col gap-2"
+};
+function ToastContainer({
+  toasts,
+  removeToast,
+  placement = "bottom-right"
+}) {
   if (toasts.length === 0) return null;
   return createPortal(
-    /* @__PURE__ */ jsx10("div", { className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2", children: toasts.map((toast) => /* @__PURE__ */ jsx10(ToastItem, { toast, onRemove: removeToast }, toast.id)) }),
+    /* @__PURE__ */ jsx10(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx10("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx10(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -906,7 +930,7 @@ function createToastBridge() {
     }
   };
 }
-function ToastProvider({ children, bridge }) {
+function ToastProvider({ children, bridge, placement = "bottom-right" }) {
   const [toasts, setToasts] = useState([]);
   const addToast = useCallback((toast) => {
     const id = `toast-${++toastCounter}`;
@@ -921,7 +945,7 @@ function ToastProvider({ children, bridge }) {
   }, [bridge, addToast]);
   return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx10(ToastContainer, { toasts, removeToast })
+    /* @__PURE__ */ jsx10(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -1592,6 +1616,78 @@ function ToggleButton({
   );
 }
 
+// src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import {
+  RadioGroup as AriaRadioGroup2,
+  Radio as AriaRadio2
+} from "react-aria-components";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var ToggleButtonGroupContext = createContext3({
+  size: "md"
+});
+var sizeStyles5 = {
+  sm: "px-2.5 py-1 text-xs gap-1",
+  md: "px-3 py-1.5 text-sm gap-1.5",
+  lg: "px-4 py-2 text-base gap-2"
+};
+var iconOnlySizeStyles = {
+  sm: "p-1",
+  md: "p-1.5",
+  lg: "p-2"
+};
+function ToggleButtonGroup({
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx25(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx25(
+    AriaRadioGroup2,
+    {
+      ...props,
+      orientation: "horizontal",
+      className: twMerge5(
+        "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function ToggleButtonGroupItem({
+  children,
+  isIconOnly,
+  className,
+  ...props
+}) {
+  const { size } = useContext3(ToggleButtonGroupContext);
+  return /* @__PURE__ */ jsx25(
+    AriaRadio2,
+    {
+      ...props,
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge5(
+        // Base layout
+        "inline-flex items-center justify-center",
+        "rounded-[var(--border-radius-md)]",
+        "font-[var(--font-weight-medium)]",
+        "outline-none transition-colors cursor-pointer",
+        // Focus ring
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
+        // Disabled
+        isDisabled && "opacity-50 pointer-events-none",
+        // Size
+        isIconOnly ? iconOnlySizeStyles[size] : sizeStyles5[size],
+        // Selected state
+        isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
+        className
+      ),
+      children
+    }
+  );
+}
+
 // src/components/Menu/Menu.tsx
 import {
   MenuTrigger,
@@ -1599,29 +1695,42 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-function Menu({ items, children, className }) {
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+var popoverStyles = [
+  "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
+  "shadow-lg border border-[var(--color-border-default)]",
+  "py-1 min-w-48",
+  "entering:animate-in entering:fade-in entering:zoom-in-95",
+  "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
+].join(" ");
+function Menu({
+  items,
+  content,
+  children,
+  onAction,
+  selectionMode,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  className
+}) {
+  const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       Popover2,
       {
-        className: [
-          "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
-          "shadow-lg border border-[var(--color-border-default)]",
-          "py-1 min-w-48",
-          "entering:animate-in entering:fade-in entering:zoom-in-95",
-          "exiting:animate-out exiting:fade-out exiting:zoom-out-95",
-          className
-        ].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx25(
+        className: [popoverStyles, className].filter(Boolean).join(" "),
+        children: items ? /* @__PURE__ */ jsx26(
           AriaMenu,
           {
             items,
             onAction: (key) => {
               const item = items.find((i) => i.id === key);
               item?.onAction?.();
+              onAction?.(key);
             },
+            ...selectionProps,
             className: "outline-none",
             children: (item) => /* @__PURE__ */ jsxs18(
               AriaMenuItem,
@@ -1639,18 +1748,157 @@ function Menu({ items, children, className }) {
                   item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
                 ].filter(Boolean).join(" "),
                 children: [
-                  item.icon && /* @__PURE__ */ jsx25(Icon, { icon: item.icon, size: "sm" }),
-                  item.label
+                  item.icon && /* @__PURE__ */ jsx26(Icon, { icon: item.icon, size: "sm" }),
+                  /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
+                  item.endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: item.endContent })
                 ]
               }
             )
           }
+        ) : /* @__PURE__ */ jsx26(
+          AriaMenu,
+          {
+            onAction: (key) => onAction?.(key),
+            ...selectionProps,
+            className: "outline-none",
+            children: content
+          }
         )
       }
     )
   ] });
 }
 
+// src/components/Menu/MenuItem.tsx
+import { MenuItem as AriaMenuItem2 } from "react-aria-components";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+function MenuItem({
+  id,
+  children,
+  icon,
+  endContent,
+  onAction,
+  href,
+  target,
+  isDisabled,
+  isDanger,
+  textValue,
+  className
+}) {
+  return /* @__PURE__ */ jsxs19(
+    AriaMenuItem2,
+    {
+      id,
+      href,
+      target,
+      isDisabled,
+      onAction,
+      textValue,
+      className: [
+        "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
+        "transition-colors",
+        "focus:bg-[var(--color-surface-muted)]",
+        "hover:bg-[var(--color-surface-muted)]",
+        "disabled:opacity-50 disabled:pointer-events-none",
+        isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx27(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx27("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: endContent })
+      ]
+    }
+  );
+}
+
+// src/components/Menu/MenuCheckboxItem.tsx
+import { MenuItem as AriaMenuItem3 } from "react-aria-components";
+import { Check as Check2 } from "lucide-react";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+function MenuCheckboxItem({
+  id,
+  children,
+  textValue,
+  isDisabled,
+  className
+}) {
+  return /* @__PURE__ */ jsx28(
+    AriaMenuItem3,
+    {
+      id,
+      textValue,
+      isDisabled,
+      className: ({ isSelected }) => [
+        "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
+        "transition-colors",
+        "focus:bg-[var(--color-surface-muted)]",
+        "hover:bg-[var(--color-surface-muted)]",
+        "disabled:opacity-50 disabled:pointer-events-none",
+        "text-[var(--color-text-primary)]",
+        isSelected ? "font-[number:var(--font-weight-medium)]" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
+        /* @__PURE__ */ jsx28("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx28(Check2, { size: 14, className: "text-[var(--color-action-primary)]", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx28("span", { className: "flex-1", children })
+      ] })
+    }
+  );
+}
+
+// src/components/Menu/MenuSection.tsx
+import {
+  MenuSection as AriaMenuSection,
+  Header
+} from "react-aria-components";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+function MenuSection({
+  header,
+  children,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx29(
+      Header,
+      {
+        className: [
+          "px-3 py-1.5",
+          "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-semibold)]",
+          "text-[var(--color-text-secondary)]",
+          "uppercase tracking-wider",
+          "select-none"
+        ].join(" "),
+        children: header
+      }
+    ),
+    children
+  ] });
+}
+
+// src/components/Menu/MenuHeader.tsx
+import { Header as Header2 } from "react-aria-components";
+import { jsx as jsx30 } from "react/jsx-runtime";
+function MenuHeader({ children, className }) {
+  return /* @__PURE__ */ jsx30(Header2, { className, children });
+}
+
+// src/components/Menu/MenuSeparator.tsx
+import { Separator } from "react-aria-components";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function MenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx31(
+    Separator,
+    {
+      className: [
+        "border-t border-[var(--color-border-default)] my-1",
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+
 // src/components/Popover/Popover.tsx
 import {
   DialogTrigger,
@@ -1658,12 +1906,12 @@ import {
   Dialog as AriaDialog2,
   Button as AriaButton3
 } from "react-aria-components";
-import { Fragment as Fragment7, jsx as jsx26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx32 } from "react/jsx-runtime";
 function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx26(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx32(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx32(
     AriaButton3,
     {
       className: [
@@ -1681,7 +1929,7 @@ function PopoverContent({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx32(
     AriaPopover,
     {
       placement,
@@ -1698,26 +1946,26 @@ function PopoverContent({
         "entering:placement-right:slide-in-from-left-1",
         className
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx26(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx26(Fragment7, { children: typeof children === "function" ? children({ close }) : children }) })
+      children: /* @__PURE__ */ jsx32(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx32(Fragment8, { children: typeof children === "function" ? children({ close }) : children }) })
     }
   );
 }
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge5 } from "tailwind-merge";
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { twMerge as twMerge6 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var TabsContext = createContext3({
+import { jsx as jsx33 } from "react/jsx-runtime";
+var TabsContext = createContext4({
   variant: "underline",
   size: "md"
 });
-var sizeStyles5 = {
+var sizeStyles6 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
   lg: "px-6 py-3 text-lg"
@@ -1730,12 +1978,12 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx33(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx33(
     AriaTabs,
     {
       ...props,
       orientation,
-      className: twMerge5(
+      className: twMerge6(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -1747,14 +1995,14 @@ function TabList({
   className,
   ...props
 }) {
-  const { variant } = useContext3(TabsContext);
+  const { variant } = useContext4(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx33(
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge5(
+      className: ({ orientation }) => twMerge6(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -1763,21 +2011,21 @@ function TabList({
   );
 }
 function Tab({ className, ...props }) {
-  const { variant, size } = useContext3(TabsContext);
-  return /* @__PURE__ */ jsx27(
+  const { variant, size } = useContext4(TabsContext);
+  return /* @__PURE__ */ jsx33(
     AriaTab,
     {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge5(
+          return twMerge6(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge5(
+        return twMerge6(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-[var(--font-weight-medium)]",
@@ -1786,7 +2034,7 @@ function Tab({ className, ...props }) {
           // Disabled
           isDisabled ? "opacity-50 pointer-events-none" : "",
           // Size
-          sizeStyles5[size],
+          sizeStyles6[size],
           ...getTabVariantStyles(variant, {
             isSelected,
             isHovered,
@@ -1820,12 +2068,12 @@ function getTabVariantStyles(variant, state) {
   ];
 }
 function TabPanel({ className, ...props }) {
-  const { variant } = useContext3(TabsContext);
-  return /* @__PURE__ */ jsx27(
+  const { variant } = useContext4(TabsContext);
+  return /* @__PURE__ */ jsx33(
     AriaTabPanel,
     {
       ...props,
-      className: twMerge5(
+      className: twMerge6(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -1845,8 +2093,8 @@ import {
 import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
 import { Tree as ArboristTree } from "react-arborist";
 import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
-import { Check as Check2 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Check as Check3 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var rowHeightMap = {
   compact: 32,
   comfortable: 40
@@ -1869,7 +2117,7 @@ function NodeRenderer({
   const isSelected = node.isSelected && !isCheckbox;
   const isCompact = size === "compact";
   const IconComponent = data.icon ? data.icon : node.isInternal ? Folder : File;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ref: dragHandle,
@@ -1904,7 +2152,7 @@ function NodeRenderer({
         }
       },
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             type: "button",
@@ -1922,7 +2170,7 @@ function NodeRenderer({
             },
             tabIndex: -1,
             "aria-label": node.isOpen ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx34(
               ChevronRight2,
               {
                 size: 14,
@@ -1934,7 +2182,7 @@ function NodeRenderer({
             )
           }
         ),
-        isCheckbox && /* @__PURE__ */ jsx28(
+        isCheckbox && /* @__PURE__ */ jsx34(
           "div",
           {
             className: [
@@ -1945,8 +2193,8 @@ function NodeRenderer({
             role: "checkbox",
             "aria-checked": isChecked,
             "aria-label": `Select ${data.name}`,
-            children: isChecked && /* @__PURE__ */ jsx28(
-              Check2,
+            children: isChecked && /* @__PURE__ */ jsx34(
+              Check3,
               {
                 className: "w-3 h-3 text-[var(--color-text-inverse)]",
                 strokeWidth: 3
@@ -1954,7 +2202,7 @@ function NodeRenderer({
             )
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx34(
           IconComponent,
           {
             size: 16,
@@ -1962,7 +2210,7 @@ function NodeRenderer({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx28("span", { className: "truncate", children: data.name })
+        /* @__PURE__ */ jsx34("span", { className: "truncate", children: data.name })
       ]
     }
   );
@@ -2028,13 +2276,13 @@ function Tree({
   );
   const arboristSearchMatch = searchMatch ? (node, term) => searchMatch(node.data, term) : void 0;
   const selectionProp = selectionMode === "single" && selectedIds && selectedIds.size > 0 ? [...selectedIds][0] : void 0;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       role: "tree",
       "aria-label": ariaLabel,
       className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx34(
         ArboristTree,
         {
           ref: internalRef,
@@ -2053,7 +2301,7 @@ function Tree({
           onSelect: handleSelect,
           onActivate: handleActivate,
           disableEdit: true,
-          children: (props) => /* @__PURE__ */ jsx28(
+          children: (props) => /* @__PURE__ */ jsx34(
             NodeRenderer,
             {
               ...props,
@@ -2072,17 +2320,17 @@ function Tree({
 }
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-import { twMerge as twMerge6 } from "tailwind-merge";
+import { createContext as createContext5, useContext as useContext5 } from "react";
+import { twMerge as twMerge7 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var SegmentedControlContext = createContext4({
+import { jsx as jsx35 } from "react/jsx-runtime";
+var SegmentedControlContext = createContext5({
   size: "md"
 });
-var sizeStyles6 = {
+var sizeStyles7 = {
   sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-sm",
   lg: "px-4 py-2 text-base"
@@ -2098,7 +2346,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx29(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx35(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx35(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2106,7 +2354,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge6(
+      className: twMerge7(
         "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
         className
       ),
@@ -2118,12 +2366,12 @@ function SegmentedControlItem({
   className,
   ...props
 }) {
-  const { size } = useContext4(SegmentedControlContext);
-  return /* @__PURE__ */ jsx29(
+  const { size } = useContext5(SegmentedControlContext);
+  return /* @__PURE__ */ jsx35(
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge6(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-[var(--border-radius-md)]",
@@ -2134,7 +2382,7 @@ function SegmentedControlItem({
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
-        sizeStyles6[size],
+        sizeStyles7[size],
         // Selected state
         isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
         className
@@ -2153,7 +2401,7 @@ import {
   Info as Info2,
   Microscope
 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function getFileIcon(type, extension) {
   if (type === "directory") return Folder2;
   const ext = (extension ?? "").toLowerCase();
@@ -2179,7 +2427,7 @@ function FileIcon({
   size = 16
 }) {
   const IconComponent = getFileIcon(type, extension);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx36(
     IconComponent,
     {
       size,
@@ -2224,14 +2472,14 @@ function FileCard({
     },
     [onPress]
   );
-  const cardContent = /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    /* @__PURE__ */ jsxs20(
+  const cardContent = /* @__PURE__ */ jsxs23(Fragment9, { children: [
+    /* @__PURE__ */ jsxs23(
       "div",
       {
         className: `shrink-0 relative overflow-hidden bg-[var(--color-neutral-900)] ${thumbnailClass}`,
         children: [
-          children ? /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx30("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx30(IconComponent, { size: iconSize, className: iconColor }) }),
-          onInfo && /* @__PURE__ */ jsx30(
+          children ? /* @__PURE__ */ jsx36("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx36("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx36(IconComponent, { size: iconSize, className: iconColor }) }),
+          onInfo && /* @__PURE__ */ jsx36(
             "div",
             {
               className: [
@@ -2239,7 +2487,7 @@ function FileCard({
                 "transition-opacity duration-150",
                 compact ? "bottom-1.5 right-1.5" : "bottom-2 right-2"
               ].join(" "),
-              children: /* @__PURE__ */ jsx30(
+              children: /* @__PURE__ */ jsx36(
                 "span",
                 {
                   onClick: handleInfoClick,
@@ -2249,7 +2497,7 @@ function FileCard({
                     }
                   },
                   role: "presentation",
-                  children: /* @__PURE__ */ jsx30(
+                  children: /* @__PURE__ */ jsx36(
                     IconButton,
                     {
                       icon: Info2,
@@ -2267,7 +2515,7 @@ function FileCard({
         ]
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx36(
       "div",
       {
         className: [
@@ -2275,12 +2523,12 @@ function FileCard({
           "bg-[var(--color-surface-default)]",
           compact ? "px-2 py-1.5 rounded-b-[var(--border-radius-md)]" : "gap-0.5 px-3 py-2 rounded-b-[var(--border-radius-lg)]"
         ].join(" "),
-        children: compact ? /* @__PURE__ */ jsx30("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs20(Fragment8, { children: [
-          /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx30(FileIcon, { type, extension, size: 16 }),
-            /* @__PURE__ */ jsx30("span", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name })
+        children: compact ? /* @__PURE__ */ jsx36("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
+          /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx36(FileIcon, { type, extension, size: 16 }),
+            /* @__PURE__ */ jsx36("span", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name })
           ] }),
-          size && /* @__PURE__ */ jsx30("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
+          size && /* @__PURE__ */ jsx36("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
         ] })
       }
     )
@@ -2296,7 +2544,7 @@ function FileCard({
     className
   ].filter(Boolean).join(" ");
   if (href) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx36(
       "a",
       {
         href,
@@ -2307,7 +2555,7 @@ function FileCard({
     );
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx36(
       "div",
       {
         role: "button",
@@ -2320,17 +2568,17 @@ function FileCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx30("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx36("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
 import { useCallback as useCallback4 } from "react";
 import { AlertCircle, Database, Info as Info3 } from "lucide-react";
-import { twMerge as twMerge9 } from "tailwind-merge";
+import { twMerge as twMerge10 } from "tailwind-merge";
 
 // src/components/Pill/Pill.tsx
-import { twMerge as twMerge7 } from "tailwind-merge";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var HASH_PALETTE = [
   "teal",
   // sky
@@ -2381,10 +2629,10 @@ function resolveColor(color, name) {
 }
 function Pill({ children, color, name, className }) {
   const resolved = resolveColor(color, name);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx37(
     "span",
     {
-      className: twMerge7(
+      className: twMerge8(
         "inline-flex items-center rounded-full",
         "px-2 py-0.5",
         "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
@@ -2397,8 +2645,8 @@ function Pill({ children, color, name, className }) {
 }
 
 // src/components/Pill/GroupPill.tsx
-import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function GroupPill({
   path,
   visibleCount = 3,
@@ -2409,10 +2657,10 @@ function GroupPill({
   const hiddenCount = Math.max(0, segments.length - visibleCount);
   const hiddenSegments = segments.slice(0, hiddenCount);
   const visibleSegments = segments.slice(hiddenCount);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24(
     "span",
     {
-      className: twMerge8(
+      className: twMerge9(
         "inline-flex items-center gap-1",
         className
       ),
@@ -2420,10 +2668,10 @@ function GroupPill({
       children: [
         hiddenSegments.map((segment, index) => {
           const color = pillColorFromName(segment);
-          return /* @__PURE__ */ jsx32(
+          return /* @__PURE__ */ jsx38(
             "span",
             {
-              className: twMerge8(
+              className: twMerge9(
                 "inline-block size-2 shrink-0 rounded-full",
                 dotColorStyles[color]
               ),
@@ -2433,14 +2681,14 @@ function GroupPill({
             `dot-${index}-${segment}`
           );
         }),
-        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx32(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
+        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx38(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
       ]
     }
   );
 }
 
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-[var(--color-status-success)]",
   error: "border-2 border-[var(--color-status-danger)] bg-transparent",
@@ -2456,7 +2704,7 @@ function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
   const color = config?.color ?? "neutral";
-  return /* @__PURE__ */ jsx33(Pill, { color, children: label });
+  return /* @__PURE__ */ jsx39(Pill, { color, children: label });
 }
 function PreviewArea({
   status = "connected",
@@ -2464,11 +2712,11 @@ function PreviewArea({
   children
 }) {
   if (status === "loading") {
-    return /* @__PURE__ */ jsx33("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx33(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+    return /* @__PURE__ */ jsx39("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx39(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs22("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
-      /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsxs25("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
+      /* @__PURE__ */ jsx39(
         Icon,
         {
           icon: AlertCircle,
@@ -2476,13 +2724,13 @@ function PreviewArea({
           className: "text-[var(--color-text-danger)]"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx33("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx39("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
     ] });
   }
   if (children) {
-    return /* @__PURE__ */ jsx33("div", { className: "h-full w-full overflow-hidden", children });
+    return /* @__PURE__ */ jsx39("div", { className: "h-full w-full overflow-hidden", children });
   }
-  return /* @__PURE__ */ jsx33("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx39("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx39(
     Icon,
     {
       icon: Database,
@@ -2524,22 +2772,22 @@ function StorageConnectionCard({
     },
     [onPress]
   );
-  const cardContent = /* @__PURE__ */ jsxs22(Fragment9, { children: [
-    /* @__PURE__ */ jsx33("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx33(PreviewArea, { status, errorMessage, children }) }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
-      /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-2", children: [
-        status && /* @__PURE__ */ jsx33(
+  const cardContent = /* @__PURE__ */ jsxs25(Fragment10, { children: [
+    /* @__PURE__ */ jsx39("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx39(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-2", children: [
+        status && /* @__PURE__ */ jsx39(
           "span",
           {
-            className: twMerge9(
+            className: twMerge10(
               "mt-1.5 h-2 w-2 shrink-0 rounded-full",
               statusDotStyles[status]
             ),
             "aria-label": `Status: ${status}`
           }
         ),
-        /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
-        onInfo && /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx39("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
+        onInfo && /* @__PURE__ */ jsx39(
           "span",
           {
             onClick: handleInfoPress,
@@ -2549,7 +2797,7 @@ function StorageConnectionCard({
               }
             },
             role: "presentation",
-            children: /* @__PURE__ */ jsx33(
+            children: /* @__PURE__ */ jsx39(
               IconButton,
               {
                 icon: Info3,
@@ -2563,10 +2811,10 @@ function StorageConnectionCard({
           }
         )
       ] }),
-      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs22("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: [
-        provider && /* @__PURE__ */ jsx33(ProviderBadge, { provider }),
-        provider && region && /* @__PURE__ */ jsx33("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
-        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs22("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]", children: [
+      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs25("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: [
+        provider && /* @__PURE__ */ jsx39(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx39("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]", children: [
           imageCount,
           " ",
           imageCount === 1 ? "image" : "images"
@@ -2574,7 +2822,7 @@ function StorageConnectionCard({
       ] })
     ] })
   ] });
-  const baseStyles = twMerge9(
+  const baseStyles = twMerge10(
     "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
     "border border-[var(--color-border-default)]",
     "shadow-sm transition-all",
@@ -2583,10 +2831,10 @@ function StorageConnectionCard({
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx33("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx39("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         role: "button",
@@ -2598,12 +2846,12 @@ function StorageConnectionCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx33("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx39("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge10 } from "tailwind-merge";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
   purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
@@ -2613,7 +2861,7 @@ var variantStyles4 = {
   green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
   amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
 };
-var sizeStyles7 = {
+var sizeStyles8 = {
   sm: "px-1.5 py-0.5",
   md: "px-2 py-0.5"
 };
@@ -2628,18 +2876,18 @@ function Badge({
   icon: IconComponent,
   className
 }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs26(
     "span",
     {
-      className: twMerge10(
+      className: twMerge11(
         "inline-flex items-center gap-1 rounded-[var(--border-radius-full)]",
         "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
         variantStyles4[variant],
-        sizeStyles7[size],
+        sizeStyles8[size],
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx34(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx40(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2648,8 +2896,8 @@ function Badge({
 
 // src/components/Card/Card.tsx
 import { useCallback as useCallback5 } from "react";
-import { twMerge as twMerge11 } from "tailwind-merge";
-import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2667,7 +2915,7 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge11(
+  const containerClass = twMerge12(
     "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
     isInteractive && "transition-all hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
@@ -2682,22 +2930,22 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs24(Fragment10, { children: [
-    header && /* @__PURE__ */ jsx35(
+  const content = /* @__PURE__ */ jsxs27(Fragment11, { children: [
+    header && /* @__PURE__ */ jsx41(
       "div",
       {
-        className: twMerge11(
+        className: twMerge12(
           "border-b border-[var(--color-border-default)]",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx41("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx41(
       "div",
       {
-        className: twMerge11(
+        className: twMerge12(
           "border-t border-[var(--color-border-default)]",
           paddingStyles[padding]
         ),
@@ -2706,10 +2954,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx35("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx41("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx41(
       "div",
       {
         role: "button",
@@ -2721,13 +2969,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx35("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx41("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2780,16 +3028,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs28(
       "span",
       {
-        className: twMerge12(
+        className: twMerge13(
           "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
           "text-[var(--color-text-tertiary)]",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          label && /* @__PURE__ */ jsx42("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2819,10 +3067,10 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28(
     "span",
     {
-      className: twMerge12(
+      className: twMerge13(
         "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
         colorStyles2,
         isPill && [
@@ -2833,8 +3081,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
-        /* @__PURE__ */ jsx36(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx42("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+        /* @__PURE__ */ jsx42(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2842,8 +3090,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-[var(--color-progress-fill)]",
   success: "bg-[var(--color-progress-fill-success)]",
@@ -2851,7 +3099,7 @@ var fillStyles = {
   danger: "bg-[var(--color-progress-fill-danger)]",
   neutral: "bg-[var(--color-text-secondary)]"
 };
-var sizeStyles8 = {
+var sizeStyles9 = {
   sm: "h-1.5",
   md: "h-3",
   lg: "h-4"
@@ -2866,12 +3114,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs26("div", { className: twMerge13("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx37("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
-      /* @__PURE__ */ jsx37("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs29("div", { className: twMerge14("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx43(
       "div",
       {
         role: "progressbar",
@@ -2879,14 +3127,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge13(
+        className: twMerge14(
           "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
-          sizeStyles8[size]
+          sizeStyles9[size]
         ),
-        children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx43(
           "div",
           {
-            className: twMerge13(
+            className: twMerge14(
               "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2907,8 +3155,8 @@ import {
   CheckCircle2,
   X as X3
 } from "lucide-react";
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info4,
@@ -2952,40 +3200,40 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       role: config.role,
-      className: twMerge14(
+      className: twMerge15(
         "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)]",
         "text-[length:var(--font-size-sm)]",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx44(
           IconComponent,
           {
             size: 20,
-            className: twMerge14("shrink-0 mt-0.5", config.iconClass),
+            className: twMerge15("shrink-0 mt-0.5", config.iconClass),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs27("span", { className: "font-[number:var(--font-weight-medium)]", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs30("span", { className: "font-[number:var(--font-weight-medium)]", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx38(
+        dismissible && /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx38(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx44(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -2994,8 +3242,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { Fragment as Fragment12, jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3017,59 +3265,59 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge15(
+  const containerClass = twMerge16(
     "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs28(Fragment11, { children: [
-    /* @__PURE__ */ jsx39("div", { className: twMerge15(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
-    /* @__PURE__ */ jsx39(
+  const content = /* @__PURE__ */ jsxs31(Fragment12, { children: [
+    /* @__PURE__ */ jsx45("div", { className: twMerge16(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
+    /* @__PURE__ */ jsx45(
       "div",
       {
-        className: twMerge15(
+        className: twMerge16(
           config.valueClass,
           "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx39("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx45("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx39("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx45("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx39("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx45("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
-      className: twMerge16(
+      className: twMerge17(
         "flex flex-wrap items-center gap-[var(--spacing-3)] py-[var(--spacing-4)]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40(H2, { children: title }),
-        children && /* @__PURE__ */ jsx40("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
+        /* @__PURE__ */ jsx46(H2, { children: title }),
+        children && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
       ]
     }
   );
 }
 
 // src/components/FormWizard/FormWizard.tsx
-import { createContext as createContext5, useContext as useContext5, useCallback as useCallback6, useMemo } from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var FormWizardContext = createContext5({
+import { createContext as createContext6, useContext as useContext6, useCallback as useCallback6, useMemo } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var FormWizardContext = createContext6({
   currentStep: 0,
   totalSteps: 1,
   canGoBack: false,
@@ -3078,7 +3326,7 @@ var FormWizardContext = createContext5({
   isLastStep: true
 });
 function useFormWizard() {
-  return useContext5(FormWizardContext);
+  return useContext6(FormWizardContext);
 }
 function FormWizard({
   currentStep,
@@ -3103,13 +3351,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx41(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx47(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx48(
     "svg",
     {
       "aria-hidden": "true",
@@ -3120,24 +3368,24 @@ function CheckIcon2() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx42("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx48("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx42("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx42("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx48("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx48("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs33(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs30("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsxs33("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx48(
               "div",
               {
                 "aria-hidden": "true",
@@ -3146,8 +3394,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx42("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx42(
+            ) : /* @__PURE__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx48(
               "div",
               {
                 className: [
@@ -3159,10 +3407,10 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-[var(--color-border-default)] bg-[var(--color-surface-default)] text-[var(--color-text-tertiary)]" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx42(CheckIcon2, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx48(CheckIcon2, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx42(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx48(
               "div",
               {
                 "aria-hidden": "true",
@@ -3171,9 +3419,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx42("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx48(
             "span",
             {
               className: [
@@ -3191,15 +3439,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
-    canGoBack && /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
+    canGoBack && /* @__PURE__ */ jsx49(
       Button,
       {
         variant: "secondary",
@@ -3209,7 +3457,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx49(
       Button,
       {
         variant: "primary",
@@ -3654,6 +3902,11 @@ export {
   LineHeightTight,
   Link,
   Menu,
+  MenuCheckboxItem,
+  MenuHeader,
+  MenuItem,
+  MenuSection,
+  MenuSeparator,
   MetricCard,
   Pill,
   Popover3 as Popover,
@@ -3689,6 +3942,8 @@ export {
   Tabs,
   ToastProvider,
   ToggleButton,
+  ToggleButtonGroup,
+  ToggleButtonGroupItem,
   Tooltip,
   Tree,
   Tab2 as UnstyledTab,