@ai-matrx/design-system 0.4.2 → 0.5.1

package/dist/index.js

@@ -140,6 +140,37 @@ function CheckIcon(props) {
     }
   ) });
 }
+function DividerHorizontalIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function DotFilledIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function RadixChevronRightIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
 function RadixChevronDownIcon(props) {
   return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
     "path",
@@ -362,56 +393,246 @@ var Button = React3.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React4 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var AVATAR_SIZES = {
+  sm: "h-8 w-8 text-[11px]",
+  md: "h-9 w-9 text-xs",
+  lg: "h-10 w-10 text-sm"
+};
+var Avatar = React4.forwardRef(({ className, size = "lg", ...props }, ref) => /* @__PURE__ */ jsx6(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    "data-slot": "avatar",
+    className: cn(
+      "relative flex shrink-0 overflow-hidden rounded-full",
+      AVATAR_SIZES[size],
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    "data-slot": "avatar-image",
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    "data-slot": "avatar-fallback",
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/card.tsx
+import * as React5 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CARD_SIZES = {
+  sm: {
+    root: "rounded-xl border bg-card text-card-foreground shadow",
+    pad: "p-2",
+    padTopless: "p-2 pt-0"
+  },
+  md: {
+    root: "rounded-lg border bg-card text-card-foreground shadow-sm",
+    pad: "p-4",
+    padTopless: "p-4 pt-0"
+  },
+  lg: {
+    root: "rounded-lg border bg-card text-card-foreground shadow-sm",
+    pad: "p-6",
+    padTopless: "p-6 pt-0"
+  }
+};
+var CardSizeContext = React5.createContext("md");
+function useCardSize() {
+  return React5.useContext(CardSizeContext);
+}
+var Card = React5.forwardRef(
+  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx7(CardSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(CARD_SIZES[size].root, className),
+      ...props
+    }
+  ) })
+);
+Card.displayName = "Card";
+var CardHeader = React5.forwardRef(({ className, ...props }, ref) => {
+  const size = useCardSize();
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      "data-slot": "card-header",
+      className: cn(
+        "flex flex-col space-y-1.5 rounded-t-[inherit]",
+        CARD_SIZES[size].pad,
+        className
+      ),
+      ...props
+    }
+  );
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  "h3",
+  {
+    ref,
+    "data-slot": "card-title",
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  "p",
+  {
+    ref,
+    "data-slot": "card-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    ref,
+    "data-slot": "card-action",
+    className: cn("ml-auto self-start", className),
+    ...props
+  }
+));
+CardAction.displayName = "CardAction";
+var CardContent = React5.forwardRef(({ className, ...props }, ref) => {
+  const size = useCardSize();
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      "data-slot": "card-content",
+      className: cn(CARD_SIZES[size].padTopless, className),
+      ...props
+    }
+  );
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React5.forwardRef(({ className, ...props }, ref) => {
+  const size = useCardSize();
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      "data-slot": "card-footer",
+      className: cn(
+        "flex items-center rounded-b-[inherit]",
+        CARD_SIZES[size].padTopless,
+        className
+      ),
+      ...props
+    }
+  );
+});
+CardFooter.displayName = "CardFooter";
+
+// src/checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React6 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CHECKBOX_SIZES = {
+  sm: { root: "h-3.5 w-3.5 rounded-xs", glyph: "h-3 w-3" },
+  md: { root: "h-4 w-4 rounded-sm", glyph: "h-3.5 w-3.5" }
+};
+var Checkbox = React6.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx8(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    "data-slot": "checkbox",
+    className: cn(
+      "peer shrink-0 cursor-pointer border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      CHECKBOX_SIZES[size].root,
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(
+      CheckboxPrimitive.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "flex items-center justify-center text-current",
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx8(DividerHorizontalIcon, { className: CHECKBOX_SIZES[size].glyph }) : /* @__PURE__ */ jsx8(CheckIcon, { className: CHECKBOX_SIZES[size].glyph })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
 // src/command.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
-import * as React5 from "react";
+import * as React9 from "react";
 
 // src/portal-container.tsx
-import * as React4 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var PortalContainerContext = React4.createContext(
+import * as React7 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PortalContainerContext = React7.createContext(
   void 0
 );
 function PortalContainerProvider({
   container,
   children
 }) {
-  return /* @__PURE__ */ jsx6(PortalContainerContext.Provider, { value: container ?? void 0, children });
+  return /* @__PURE__ */ jsx9(PortalContainerContext.Provider, { value: container ?? void 0, children });
 }
 function usePortalContainer(explicit) {
-  const injected = React4.useContext(PortalContainerContext);
+  const injected = React7.useContext(PortalContainerContext);
   if (explicit !== void 0) {
     return explicit ?? void 0;
   }
   return injected ?? void 0;
 }
 
-// src/command.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
-  CommandPrimitive,
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    ),
-    ...props
-  }
-));
-Command.displayName = CommandPrimitive.displayName;
+// src/use-is-mobile.ts
+import * as React8 from "react";
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React5.useState(false);
-  const [hasMounted, setHasMounted] = React5.useState(false);
-  React5.useEffect(() => {
+  const [isMobile, setIsMobile] = React8.useState(false);
+  const [hasMounted, setHasMounted] = React8.useState(false);
+  React8.useEffect(() => {
     setHasMounted(true);
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
     onChange();
+    if (typeof window.matchMedia !== "function") {
+      return void 0;
+    }
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     mql.addEventListener("change", onChange);
     return () => mql.removeEventListener("change", onChange);
   }, []);
@@ -420,15 +641,30 @@ function useIsMobile() {
   }
   return isMobile;
 }
+
+// src/command.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var Command = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
 var DIALOG_DESKTOP_CLASSES = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain 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]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var CommandDialogContent = React5.forwardRef(({ className, children, container, ...props }, ref) => {
+var CommandDialogContent = React9.forwardRef(({ className, children, container, ...props }, ref) => {
   const isMobile = useIsMobile();
   const isModal = useRadixDialogModal();
   const portalContainer = usePortalContainer(container);
   return /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { container: portalContainer, children: [
-    isModal ? /* @__PURE__ */ jsx7(
+    isModal ? /* @__PURE__ */ jsx10(
       DialogPrimitive.Overlay,
       {
         className: "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
@@ -450,8 +686,8 @@ var CommandDialogContent = React5.forwardRef(({ className, children, container,
         children: [
           children,
           /* @__PURE__ */ jsxs3(DialogPrimitive.Close, { className: "absolute right-2 top-4 flex h-10 w-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4", children: [
-            /* @__PURE__ */ jsx7(XIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
+            /* @__PURE__ */ jsx10(XIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -465,21 +701,21 @@ var CommandDialog = ({
   ...props
 }) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx7(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx7(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx10(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx10(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs3(
     CommandDialogContent,
     {
       className: "overflow-hidden p-0",
       ...container !== void 0 ? { container } : {},
       children: [
-        /* @__PURE__ */ jsx7(DialogPrimitive.Title, { className: "sr-only" }),
-        /* @__PURE__ */ jsx7(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+        /* @__PURE__ */ jsx10(DialogPrimitive.Title, { className: "sr-only" }),
+        /* @__PURE__ */ jsx10(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
       ]
     }
   ) }) });
 };
-var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx7(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx7(
+var CommandInput = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx10(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx10(
     CommandPrimitive.Input,
     {
       ref,
@@ -492,7 +728,7 @@ var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CommandList = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.List,
   {
     ref,
@@ -501,7 +737,7 @@ var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ jsx7(
+var CommandEmpty = React9.forwardRef((props, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Empty,
   {
     ref,
@@ -510,7 +746,7 @@ var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ jsx7(
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CommandGroup = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Group,
   {
     ref,
@@ -522,7 +758,7 @@ var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CommandSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Separator,
   {
     ref,
@@ -531,7 +767,7 @@ var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CommandItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Item,
   {
     ref,
@@ -547,7 +783,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       className: cn(
@@ -560,6 +796,141 @@ var CommandShortcut = ({
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+// src/context-menu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as React10 from "react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var SURFACE_CLASS = "z-50 min-w-[8rem] max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
+var MOTION_CLASS = "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 ITEM_CLASS = "relative flex cursor-default select-none items-center 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";
+var INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var ContextMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    "data-slot": "context-menu-sub-trigger",
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx11(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  ContextMenuPrimitive.SubContent,
+  {
+    ref,
+    "data-slot": "context-menu-sub-content",
+    className: cn(SURFACE_CLASS, "shadow-lg", MOTION_CLASS, className),
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React10.forwardRef(({ className, container, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ jsx11(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx11(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      "data-slot": "context-menu-content",
+      className: cn(SURFACE_CLASS, "shadow-md", MOTION_CLASS, className),
+      ...props
+    }
+  ) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    "data-slot": "context-menu-item",
+    className: cn(
+      ITEM_CLASS,
+      "gap-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "context-menu-checkbox-item",
+    className: cn(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "context-menu-radio-item",
+    className: cn(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    "data-slot": "context-menu-label",
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "context-menu-separator",
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx11(
+  "span",
+  {
+    "data-slot": "context-menu-shortcut",
+    className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+    ...props
+  }
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
 // src/creatable-picker.tsx
 import {
   useRef,
@@ -568,15 +939,15 @@ import {
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React6 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import * as React11 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React6.forwardRef(
+var PopoverContent = React11.forwardRef(
   ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
     const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(
       PopoverPrimitive.Content,
       {
         ref,
@@ -600,7 +971,7 @@ var PopoverContent = React6.forwardRef(
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/creatable-picker.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function article(noun) {
   return /^[aeiou]/i.test(noun.trim()) ? `an ${noun}` : `a ${noun}`;
 }
@@ -675,8 +1046,8 @@ function CreatablePicker({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
-    /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
+    /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
@@ -690,12 +1061,12 @@ function CreatablePicker({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
-          /* @__PURE__ */ jsx9(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+          /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
+          /* @__PURE__ */ jsx13(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx9(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx13(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs5(
       Command,
       {
         filter: (itemValue, search, keywords) => {
@@ -703,7 +1074,7 @@ function CreatablePicker({
           return haystack.includes(search.toLowerCase()) ? 1 : 0;
         },
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx13(
             CommandInput,
             {
               ref: inputRef,
@@ -715,13 +1086,13 @@ function CreatablePicker({
               placeholder: searchPlaceholder ?? `Search or add ${article(noun)}\u2026`
             }
           ),
-          /* @__PURE__ */ jsxs4(CommandList, { children: [
-            /* @__PURE__ */ jsx9(CommandEmpty, { children: emptyLabel }),
-            groups.map((group) => /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs5(CommandList, { children: [
+            /* @__PURE__ */ jsx13(CommandEmpty, { children: emptyLabel }),
+            groups.map((group) => /* @__PURE__ */ jsx13(
               CommandGroup,
               {
                 ...group.heading === void 0 ? {} : { heading: group.heading },
-                children: group.options.map((option) => /* @__PURE__ */ jsxs4(
+                children: group.options.map((option) => /* @__PURE__ */ jsxs5(
                   CommandItem,
                   {
                     value: option.label,
@@ -732,7 +1103,7 @@ function CreatablePicker({
                     },
                     className: "gap-2 text-xs",
                     children: [
-                      /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx13(
                         LucideCheckIcon,
                         {
                           className: cn(
@@ -741,8 +1112,8 @@ function CreatablePicker({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
-                      option.hint ? /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
+                      /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
+                      option.hint ? /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
                     ]
                   },
                   option.value
@@ -751,9 +1122,9 @@ function CreatablePicker({
               group.heading ?? "__ungrouped__"
             ))
           ] }),
-          canCreate ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1 border-t border-border p-1", children: [
-            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx9("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
-            /* @__PURE__ */ jsxs4(
+          canCreate ? /* @__PURE__ */ jsxs5("div", { className: "space-y-1 border-t border-border p-1", children: [
+            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx13("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
@@ -761,22 +1132,22 @@ function CreatablePicker({
                 onClick: () => void create(typed),
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50",
                 children: [
-                  busy ? /* @__PURE__ */ jsx9(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx9(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
+                  busy ? /* @__PURE__ */ jsx13(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx13(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
                 ]
               }
             ),
-            needsName ? /* @__PURE__ */ jsxs4("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
+            needsName ? /* @__PURE__ */ jsxs5("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
               "Type the name of the ",
               noun,
               " you want to add \u2014 then this creates it."
             ] }) : null
           ] }) : null,
-          footerActions?.length || manageAction ? /* @__PURE__ */ jsxs4("div", { className: "space-y-0.5 border-t border-border p-1", children: [
+          footerActions?.length || manageAction ? /* @__PURE__ */ jsxs5("div", { className: "space-y-0.5 border-t border-border p-1", children: [
             footerActions?.map((action) => {
               const Icon2 = action.icon;
-              return /* @__PURE__ */ jsxs4("div", { children: [
-                /* @__PURE__ */ jsxs4(
+              return /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsxs5(
                   "button",
                   {
                     type: "button",
@@ -786,15 +1157,15 @@ function CreatablePicker({
                     },
                     className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                     children: [
-                      Icon2 ? /* @__PURE__ */ jsx9(Icon2, { className: "size-3.5 shrink-0" }) : null,
-                      /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: action.label })
+                      Icon2 ? /* @__PURE__ */ jsx13(Icon2, { className: "size-3.5 shrink-0" }) : null,
+                      /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: action.label })
                     ]
                   }
                 ),
-                action.note ? /* @__PURE__ */ jsx9("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
+                action.note ? /* @__PURE__ */ jsx13("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
               ] }, action.label);
             }),
-            manageAction ? /* @__PURE__ */ jsxs4(
+            manageAction ? /* @__PURE__ */ jsxs5(
               "a",
               {
                 href: manageAction.href,
@@ -803,18 +1174,18 @@ function CreatablePicker({
                 onClick: close,
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                 children: [
-                  /* @__PURE__ */ jsx9(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: manageAction.label })
+                  /* @__PURE__ */ jsx13(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: manageAction.label })
                 ]
               }
             ) : null
           ] }) : null,
-          lockedNote ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1 border-t border-border p-2", children: [
-            /* @__PURE__ */ jsxs4("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
-              /* @__PURE__ */ jsx9(LockIcon, { className: "mt-px size-3 shrink-0" }),
-              /* @__PURE__ */ jsx9("span", { children: lockedNote })
+          lockedNote ? /* @__PURE__ */ jsxs5("div", { className: "space-y-1 border-t border-border p-2", children: [
+            /* @__PURE__ */ jsxs5("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
+              /* @__PURE__ */ jsx13(LockIcon, { className: "mt-px size-3 shrink-0" }),
+              /* @__PURE__ */ jsx13("span", { children: lockedNote })
             ] }),
-            lockedAction ? /* @__PURE__ */ jsxs4(
+            lockedAction ? /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
@@ -824,8 +1195,8 @@ function CreatablePicker({
                 },
                 className: "flex w-full items-center gap-2 rounded-sm px-1 py-1 text-left text-xs font-medium text-primary transition-colors hover:bg-accent",
                 children: [
-                  /* @__PURE__ */ jsx9(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: lockedAction.label })
+                  /* @__PURE__ */ jsx13(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: lockedAction.label })
                 ]
               }
             ) : null
@@ -836,9 +1207,326 @@ function CreatablePicker({
   ] });
 }
 
+// src/dialog.tsx
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import * as VisuallyHidden2 from "@radix-ui/react-visually-hidden";
+import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
+import * as React12 from "react";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var Dialog = ({
+  children,
+  ...props
+}) => {
+  const modal = props.modal ?? true;
+  return /* @__PURE__ */ jsx14(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx14(DialogPrimitive2.Root, { ...props, modal, children }) });
+};
+Dialog.displayName = "Dialog";
+var DialogTrigger = DialogPrimitive2.Trigger;
+var DialogClose = DialogPrimitive2.Close;
+var DialogPortal = ({
+  container,
+  ...props
+}) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx14(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
+};
+DialogPortal.displayName = "DialogPortal";
+var DialogContainerContext = React12.createContext(null);
+var useDialogContainer = () => React12.useContext(DialogContainerContext);
+var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn(
+      // Page context behind the modal stays readable; separation comes from a
+      // light token scrim, not a blur.
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive2.Overlay.displayName;
+var DialogContentPrimitive = React12.forwardRef((props, ref) => {
+  const isModal = useRadixDialogModal();
+  return /* @__PURE__ */ jsx14(
+    DialogPrimitive2.Content,
+    {
+      ...props,
+      ref,
+      "aria-modal": isModal || void 0
+    }
+  );
+});
+DialogContentPrimitive.displayName = "DialogContentPrimitive";
+var DIALOG_DESKTOP_CLASSES2 = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
+var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain 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]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
+var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
+var DialogContent = React12.forwardRef(
+  ({
+    className,
+    children,
+    mobileSheet = true,
+    showCloseButton = true,
+    container,
+    ...props
+  }, ref) => {
+    const isMobile = useIsMobile();
+    const isModal = useRadixDialogModal();
+    const injectedContainer = usePortalContainer(container);
+    const asSheet = mobileSheet && isMobile;
+    const [containerEl, setContainerEl] = React12.useState(
+      null
+    );
+    const mergedRef = React12.useCallback(
+      (node) => {
+        setContainerEl(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const hasTitle = treeContainsComponent(children, DialogTitle) || treeContainsComponent(children, DialogPrimitive2.Title);
+    const hasDescription = treeContainsComponent(children, DialogDescription) || treeContainsComponent(children, DialogPrimitive2.Description);
+    return /* @__PURE__ */ jsxs6(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ jsx14(DialogOverlay, {}) : null,
+      /* @__PURE__ */ jsxs6(
+        DialogContentPrimitive,
+        {
+          ref: mergedRef,
+          "data-slot": "dialog-content",
+          className: cn(
+            asSheet ? DIALOG_MOBILE_SHEET_CLASSES2 : DIALOG_DESKTOP_CLASSES2,
+            className,
+            asSheet && DIALOG_MOBILE_SHEET_OVERRIDE2,
+            // A non-modal dialog is the coexistence contract for content that
+            // can sit beside a host's floating window manager (which starts at
+            // z=1000); staying below that boundary makes a newly focused window
+            // usable without coupling the two systems.
+            !isModal && "z-[900]"
+          ),
+          ...hasDescription ? {} : { "aria-describedby": void 0 },
+          ...props,
+          children: [
+            hasTitle ? null : /* @__PURE__ */ jsx14(VisuallyHidden2.Root, { children: /* @__PURE__ */ jsx14(DialogPrimitive2.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ jsx14(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx14(
+              PortalContainerProvider,
+              {
+                container: containerEl ?? injectedContainer ?? null,
+                children
+              }
+            ) }),
+            showCloseButton ? /* @__PURE__ */ jsxs6(
+              DialogPrimitive2.Close,
+              {
+                "data-slot": "dialog-close",
+                "aria-label": "Close",
+                className: "absolute right-2 top-4 flex h-11 w-11 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4 lg:h-10 lg:w-10",
+                children: [
+                  /* @__PURE__ */ jsx14(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive2.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx14(
+  "div",
+  {
+    "data-slot": "dialog-header",
+    className: cn(
+      // DialogContent owns an absolute close control. Reserve its hit area in
+      // every header so trailing actions never render underneath it.
+      "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx14(
+  "div",
+  {
+    "data-slot": "dialog-footer",
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] mb-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+  DialogPrimitive2.Title,
+  {
+    ref,
+    "data-slot": "dialog-title",
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive2.Title.displayName;
+var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+  DialogPrimitive2.Description,
+  {
+    ref,
+    "data-slot": "dialog-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive2.Description.displayName;
+
+// src/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React13 from "react";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
+var MENU_MOTION_CLASS = "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 MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center 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";
+var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    "data-slot": "dropdown-menu-sub-trigger",
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx15(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    "data-slot": "dropdown-menu-sub-content",
+    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MENU_MOTION_CLASS, className),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx15(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        MENU_SURFACE_CLASS,
+        "shadow-md",
+        MENU_MOTION_CLASS,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    "data-slot": "dropdown-menu-item",
+    className: cn(MENU_ITEM_CLASS, inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    "data-slot": "dropdown-menu-label",
+    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "dropdown-menu-separator",
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx15(
+  "span",
+  {
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
 // src/editable-label.tsx
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function EditableLabel({
   value,
   onCommit,
@@ -858,11 +1546,11 @@ function EditableLabel({
   inputClassName
 }) {
   const controlled = activation === "controlled";
-  const [internalEditing, setInternalEditing] = useState3(false);
+  const [internalEditing, setInternalEditing] = useState4(false);
   const editing = controlled ? !!editingProp : internalEditing;
-  const [draft, setDraft] = useState3(value);
-  const [error, setError] = useState3(null);
-  const [busy, setBusy] = useState3(false);
+  const [draft, setDraft] = useState4(value);
+  const [error, setError] = useState4(null);
+  const [busy, setBusy] = useState4(false);
   const inputRef = useRef2(null);
   useEffect2(() => {
     if (!editing) setDraft(value);
@@ -873,7 +1561,7 @@ function EditableLabel({
       if (selectOnEdit) inputRef.current.select();
     }
   }, [editing, selectOnEdit]);
-  const setEditing = useCallback(
+  const setEditing = useCallback2(
     (next) => {
       if (controlled) {
         onEditingChange?.(next);
@@ -884,18 +1572,18 @@ function EditableLabel({
     },
     [controlled, onEditingChange]
   );
-  const startEdit = useCallback(() => {
+  const startEdit = useCallback2(() => {
     setDraft(value);
     setError(null);
     setEditing(true);
   }, [value, setEditing]);
-  const cancel = useCallback(() => {
+  const cancel = useCallback2(() => {
     setDraft(value);
     setError(null);
     setBusy(false);
     setEditing(false);
   }, [value, setEditing]);
-  const commit = useCallback(() => {
+  const commit = useCallback2(() => {
     if (busy) return;
     const trimmed = draft.trim();
     const next = trimmed || emptyFallback;
@@ -945,8 +1633,8 @@ function EditableLabel({
     setEditing
   ]);
   if (editing) {
-    return /* @__PURE__ */ jsxs5("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
-      /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs8("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
+      /* @__PURE__ */ jsx16(
         "input",
         {
           ref: inputRef,
@@ -986,12 +1674,12 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ jsx10(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
-      error && /* @__PURE__ */ jsx10("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+      busy && /* @__PURE__ */ jsx16(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ jsx16("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
   if (controlled) return null;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -1025,11 +1713,11 @@ function EditableLabel({
 }
 
 // src/input.tsx
-import * as React7 from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import * as React14 from "react";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var getVariantStyles = (variant = "default") => {
   const baseStyles = `flex h-10 w-full border border-border bg-background text-foreground shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
-    file:text-sm file:font-medium placeholder:text-muted-foreground
+    file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground
     focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
     dark:shadow-none
@@ -1054,9 +1742,9 @@ var getVariantStyles = (variant = "default") => {
       return baseStyles;
   }
 };
-var Input = React7.forwardRef(
+var Input = React14.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx17(
       "input",
       {
         type,
@@ -1068,7 +1756,7 @@ var Input = React7.forwardRef(
   }
 );
 Input.displayName = "Input";
-var EnterInput = React7.forwardRef(
+var EnterInput = React14.forwardRef(
   ({ onEnter, ...props }, ref) => {
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && onEnter) {
@@ -1076,7 +1764,7 @@ var EnterInput = React7.forwardRef(
         onEnter();
       }
     };
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx17(
       Input,
       {
         ...props,
@@ -1092,16 +1780,16 @@ var EnterInput = React7.forwardRef(
   }
 );
 EnterInput.displayName = "EnterInput";
-var BasicInput = React7.forwardRef(
+var BasicInput = React14.forwardRef(
   // `variant` is accepted (prop-compatible with Input) but intentionally
   // unused — and destructured so it never leaks onto the DOM element.
   ({ className, type, variant: _variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx17(
       "input",
       {
         type,
         className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -1111,10 +1799,10 @@ var BasicInput = React7.forwardRef(
   }
 );
 BasicInput.displayName = "BasicInput";
-var InputWithPrefix = React7.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("relative", wrapperClassName), children: [
-    prefix && /* @__PURE__ */ jsx11("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
-    /* @__PURE__ */ jsx11(
+var InputWithPrefix = React14.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs9("div", { className: cn("relative", wrapperClassName), children: [
+    prefix && /* @__PURE__ */ jsx17("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ jsx17(
       Input,
       {
         ref,
@@ -1128,9 +1816,9 @@ InputWithPrefix.displayName = "InputWithPrefix";
 
 // src/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React8 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+import * as React15 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Label3 = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   LabelPrimitive.Root,
   {
     ref,
@@ -1141,11 +1829,11 @@ var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-Label.displayName = LabelPrimitive.Root.displayName;
+Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/overflow-toolbar.tsx
-import { useLayoutEffect, useMemo, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef as useRef3, useState as useState5 } from "react";
+import { Fragment, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var GAP_PX = 6;
 var TONE = {
   default: "border border-border bg-background hover:bg-accent text-foreground",
@@ -1167,16 +1855,16 @@ function ToolbarButton({
     action.hideLabel && !action.running ? "w-7 justify-center px-0" : "px-2",
     TONE[tone]
   );
-  const inner = /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx13(
+  const inner = /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsx19(
       Icon2,
       {
         className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
       }
     ),
-    showLabel && /* @__PURE__ */ jsx13("span", { children: text })
+    showLabel && /* @__PURE__ */ jsx19("span", { children: text })
   ] });
-  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx13(
+  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx19(
     "a",
     {
       href: action.href,
@@ -1186,7 +1874,7 @@ function ToolbarButton({
       "aria-label": action.label,
       children: inner
     }
-  ) : /* @__PURE__ */ jsx13(
+  ) : /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -1198,12 +1886,12 @@ function ToolbarButton({
     }
   );
   if (enableTooltip && action.hideLabel && renderTooltip) {
-    return /* @__PURE__ */ jsx13(Fragment, { children: renderTooltip(control, action.label) });
+    return /* @__PURE__ */ jsx19(Fragment, { children: renderTooltip(control, action.label) });
   }
   return control;
 }
 function OverflowTrigger({ ariaLabel }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -1214,7 +1902,7 @@ function OverflowTrigger({ ariaLabel }) {
         "inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
         "border border-border bg-background hover:bg-accent text-foreground"
       ),
-      children: /* @__PURE__ */ jsx13(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+      children: /* @__PURE__ */ jsx19(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
     }
   );
 }
@@ -1233,7 +1921,7 @@ function OverflowToolbar({
   const containerRef = useRef3(null);
   const ghostRef = useRef3(null);
   const leadingRef = useRef3(null);
-  const [visibleCount, setVisibleCount] = useState4(visibleActions.length);
+  const [visibleCount, setVisibleCount] = useState5(visibleActions.length);
   const signature = visibleActions.map(
     (a) => `${a.id}:${a.hideLabel ? 1 : 0}:${a.running ? 1 : 0}:${a.runningLabel ?? ""}:${a.label}`
   ).join("|");
@@ -1274,22 +1962,22 @@ function OverflowToolbar({
   }, [signature, leading != null]);
   const shown = visibleActions.slice(0, visibleCount);
   const hidden = visibleActions.slice(visibleCount);
-  return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ jsxs10(
       "div",
       {
         ref: ghostRef,
         "aria-hidden": true,
         className: "pointer-events-none absolute left-0 top-0 flex items-center gap-1.5 opacity-0",
         children: [
-          visibleActions.map((a) => /* @__PURE__ */ jsx13(ToolbarButton, { action: a }, a.id)),
-          /* @__PURE__ */ jsx13(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+          visibleActions.map((a) => /* @__PURE__ */ jsx19(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ jsx19(OverflowTrigger, { ariaLabel: overflowAriaLabel })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-1.5", children: [
-      leading != null && /* @__PURE__ */ jsx13("span", { ref: leadingRef, className: "shrink-0", children: leading }),
-      shown.map((a) => /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-1.5", children: [
+      leading != null && /* @__PURE__ */ jsx19("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ jsx19(
         ToolbarButton,
         {
           action: a,
@@ -1300,14 +1988,118 @@ function OverflowToolbar({
       )),
       hidden.length > 0 && renderOverflowMenu({
         actions: hidden,
-        trigger: /* @__PURE__ */ jsx13(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        trigger: /* @__PURE__ */ jsx19(OverflowTrigger, { ariaLabel: overflowAriaLabel })
       })
     ] })
   ] });
 }
 
+// src/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React17 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var PROGRESS_TONES = {
+  default: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive"
+};
+var Progress = React17.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
+  const { value, max } = props;
+  const ceiling = max ?? 100;
+  const isIndeterminate = value === null || value === void 0;
+  const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / ceiling * 100));
+  return /* @__PURE__ */ jsx20(
+    ProgressPrimitive.Root,
+    {
+      ref,
+      "data-slot": "progress",
+      className: cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx20(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: cn(
+            "h-full w-full flex-1 transition-all",
+            PROGRESS_TONES[tone],
+            isIndeterminate && "matrx-progress-indeterminate",
+            indicatorClassName
+          ),
+          style: isIndeterminate ? void 0 : { transform: `translateX(-${100 - pct}%)` }
+        }
+      )
+    }
+  );
+});
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/scroll-area.tsx
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React18 from "react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var ScrollArea = React18.forwardRef(
+  ({
+    className,
+    children,
+    viewportClassName,
+    viewportRef,
+    scrollBarClassName,
+    orientation = "vertical",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs11(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      "data-slot": "scroll-area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx21(
+          ScrollAreaPrimitive.Viewport,
+          {
+            ref: viewportRef,
+            "data-slot": "scroll-area-viewport",
+            className: cn("h-full w-full rounded-[inherit]", viewportClassName),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx21(ScrollBar, { orientation, className: scrollBarClassName }),
+        /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  )
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React18.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx21(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    "data-slot": "scroll-area-scrollbar",
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx21(
+      ScrollAreaPrimitive.ScrollAreaThumb,
+      {
+        "data-slot": "scroll-area-thumb",
+        className: "relative flex-1 rounded-full bg-border"
+      }
+    )
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
 // src/score-ring.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_SCORE_THRESHOLDS = {
   good: 75,
   warning: 50
@@ -1338,7 +2130,7 @@ function ScoreRing({
   const circumference = 2 * Math.PI * radius;
   const boundedPct = pct === null ? 0 : Math.max(0, Math.min(100, pct));
   const dashOffset = circumference * (1 - boundedPct / 100);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -1349,8 +2141,8 @@ function ScoreRing({
       role: "img",
       "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
       children: [
-        /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs12("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ jsx22(
             "circle",
             {
               cx: "50",
@@ -1361,7 +2153,7 @@ function ScoreRing({
               fill: "none"
             }
           ),
-          pct !== null ? /* @__PURE__ */ jsx14(
+          pct !== null ? /* @__PURE__ */ jsx22(
             "circle",
             {
               cx: "50",
@@ -1380,8 +2172,8 @@ function ScoreRing({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "absolute flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs12("div", { className: "absolute flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx22(
             "span",
             {
               className: cn(
@@ -1391,7 +2183,7 @@ function ScoreRing({
               children: pct === null ? "\u2014" : `${pct}${suffix}`
             }
           ),
-          label ? /* @__PURE__ */ jsx14("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+          label ? /* @__PURE__ */ jsx22("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
         ] })
       ]
     }
@@ -1399,7 +2191,7 @@ function ScoreRing({
 }
 
 // src/segmented-control.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onValueChange,
@@ -1414,7 +2206,7 @@ function SegmentedControl({
     md: "h-9 text-sm",
     lg: "h-10 text-base"
   };
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn(
@@ -1425,7 +2217,7 @@ function SegmentedControl({
       role: "tablist",
       children: data.map((option) => {
         const isActive = value === option.value;
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx23(
           "button",
           {
             type: "button",
@@ -1452,8 +2244,8 @@ function SegmentedControl({
 // src/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cva as cva3 } from "class-variance-authority";
-import * as React10 from "react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -1472,7 +2264,7 @@ var selectTriggerVariants = cva3(
     }
   }
 );
-var SelectTrigger = React10.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs9(
+var SelectTrigger = React19.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs13(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -1480,12 +2272,12 @@ var SelectTrigger = React10.forwardRef(({ className, children, hideArrow = false
     ...props,
     children: [
       children,
-      !hideArrow && /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+      !hideArrow && /* @__PURE__ */ jsx24(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx24(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -1494,11 +2286,11 @@ var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx16(RadixChevronUpIcon, {})
+    children: /* @__PURE__ */ jsx24(RadixChevronUpIcon, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -1507,13 +2299,13 @@ var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx16(RadixChevronDownIcon, {})
+    children: /* @__PURE__ */ jsx24(RadixChevronDownIcon, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React10.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
+var SelectContent = React19.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx24(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs13(
     SelectPrimitive.Content,
     {
       ref,
@@ -1525,8 +2317,8 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
       position,
       ...props,
       children: [
-        /* @__PURE__ */ jsx16(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx24(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx24(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -1536,13 +2328,13 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
             children
           }
         ),
-        /* @__PURE__ */ jsx16(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx24(SelectScrollDownButton, {})
       ]
     }
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.Label,
   {
     ref,
@@ -1551,7 +2343,7 @@ var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React10.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs9(
+var SelectItem = React19.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs13(
   SelectPrimitive.Item,
   {
     ref,
@@ -1562,14 +2354,14 @@ var SelectItem = React10.forwardRef(({ className, children, description, ...prop
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx16("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { children }),
-      description ? /* @__PURE__ */ jsx16("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsx24("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx24(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ jsx24("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.Separator,
   {
     ref,
@@ -1581,9 +2373,9 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React11 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Separator2 = React11.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx17(
+import * as React20 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Separator4 = React20.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx25(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -1597,17 +2389,17 @@ var Separator2 = React11.forwardRef(({ className, orientation = "horizontal", de
     ...props
   }
 ));
-Separator2.displayName = SeparatorPrimitive.Root.displayName;
+Separator4.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
+import { treeContainsComponent as treeContainsComponent2 } from "@ai-matrx/kit/react-tree";
 import { cva as cva4 } from "class-variance-authority";
-import * as React12 from "react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-var SheetContentBase = React12.forwardRef(({ ...props }, ref) => {
+import * as React21 from "react";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var SheetContentBase = React21.forwardRef(({ ...props }, ref) => {
   const isModal = useRadixDialogModal();
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx26(
     SheetPrimitive.Content,
     {
       ...props,
@@ -1617,15 +2409,15 @@ var SheetContentBase = React12.forwardRef(({ ...props }, ref) => {
   );
 });
 SheetContentBase.displayName = "SheetContentBase";
-var Sheet = React12.forwardRef(({ children, ...props }, _ref) => {
+var Sheet = React21.forwardRef(({ children, ...props }, _ref) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx18(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx18(SheetPrimitive.Root, { ...props, modal, children }) });
+  return /* @__PURE__ */ jsx26(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx26(SheetPrimitive.Root, { ...props, modal, children }) });
 });
 Sheet.displayName = "Sheet";
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var SheetOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -1654,7 +2446,7 @@ var sheetVariants = cva4(
     }
   }
 );
-var SheetDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var SheetDescription = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   SheetPrimitive.Description,
   {
     ref,
@@ -1663,7 +2455,7 @@ var SheetDescription = React12.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-var SheetContent = React12.forwardRef(
+var SheetContent = React21.forwardRef(
   ({
     side = "right",
     className,
@@ -1673,10 +2465,10 @@ var SheetContent = React12.forwardRef(
     overlayClassName,
     ...props
   }, ref) => {
-    const hasDescription = treeContainsComponent(children, SheetDescription) || treeContainsComponent(children, SheetPrimitive.Description);
-    return /* @__PURE__ */ jsxs10(SheetPortal, { children: [
-      !hideOverlay && /* @__PURE__ */ jsx18(SheetOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ jsxs10(
+    const hasDescription = treeContainsComponent2(children, SheetDescription) || treeContainsComponent2(children, SheetPrimitive.Description);
+    return /* @__PURE__ */ jsxs14(SheetPortal, { children: [
+      !hideOverlay && /* @__PURE__ */ jsx26(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs14(
         SheetContentBase,
         {
           ref,
@@ -1684,9 +2476,9 @@ var SheetContent = React12.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            !hideCloseButton && /* @__PURE__ */ jsxs10(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-              /* @__PURE__ */ jsx18(Cross2Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+            !hideCloseButton && /* @__PURE__ */ jsxs14(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+              /* @__PURE__ */ jsx26(Cross2Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
             ] }),
             children
           ]
@@ -1699,7 +2491,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx26(
   "div",
   {
     className: cn(
@@ -1713,7 +2505,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx26(
   "div",
   {
     className: cn(
@@ -1724,7 +2516,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var SheetTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   SheetPrimitive.Title,
   {
     ref,
@@ -1735,12 +2527,12 @@ var SheetTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/skeleton.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-primary/10", className),
@@ -1749,31 +2541,70 @@ function Skeleton({
   );
 }
 
+// src/switch.tsx
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React22 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SWITCH_SIZES = {
+  sm: {
+    root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 border border-primary data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  },
+  md: {
+    root: "h-5 w-9 border-transparent data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  }
+};
+var Switch = React22.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx28(
+  SwitchPrimitives.Root,
+  {
+    ref,
+    "data-slot": "switch",
+    className: cn(
+      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
+      SWITCH_SIZES[size].root,
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx28(
+      SwitchPrimitives.Thumb,
+      {
+        "data-slot": "switch-thumb",
+        className: cn(
+          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+          SWITCH_SIZES[size].thumb
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
 // src/tabbed-bottom-sheet.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 function TabbedBottomSheet({
   open,
   onOpenChange,
   title,
   tabs
 }) {
-  const [selectedTabId, setSelectedTabId] = useState5(null);
-  const [wasOpen, setWasOpen] = useState5(open);
+  const [selectedTabId, setSelectedTabId] = useState6(null);
+  const [wasOpen, setWasOpen] = useState6(open);
   if (open !== wasOpen) {
     setWasOpen(open);
     if (open) setSelectedTabId(null);
   }
   const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx29(
     BottomSheet,
     {
       open,
       onOpenChange,
       title,
       size: "full",
-      children: /* @__PURE__ */ jsxs11("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsxs15("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx29(
           BottomSheetHeader,
           {
             title: selectedTab ? selectedTab.label : title,
@@ -1781,19 +2612,19 @@ function TabbedBottomSheet({
             onBack: () => setSelectedTabId(null)
           }
         ),
-        selectedTab ? /* @__PURE__ */ jsx20("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx20(BottomSheetBody, { children: /* @__PURE__ */ jsx20("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+        selectedTab ? /* @__PURE__ */ jsx29("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx29(BottomSheetBody, { children: /* @__PURE__ */ jsx29("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
           const Icon2 = tab.icon;
-          return /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsxs11(
+          return /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs15(
             "button",
             {
               type: "button",
               onClick: () => setSelectedTabId(tab.id),
               className: "flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-muted/60 active:bg-muted",
               children: [
-                Icon2 ? /* @__PURE__ */ jsx20(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
-                /* @__PURE__ */ jsx20("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                Icon2 ? /* @__PURE__ */ jsx29(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ jsx29("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
                 tab.trailing,
-                /* @__PURE__ */ jsx20(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+                /* @__PURE__ */ jsx29(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
               ]
             }
           ) }, tab.id);
@@ -1803,17 +2634,342 @@ function TabbedBottomSheet({
   );
 }
 
+// src/table.tsx
+import * as React23 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var TABLE_SIZES = {
+  sm: { head: "px-2", cell: "p-2" },
+  md: { head: "px-3", cell: "p-3" }
+};
+var TableSizeContext = React23.createContext("md");
+function useTableSize() {
+  return React23.useContext(TableSizeContext);
+}
+var Table = React23.forwardRef(
+  ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
+    const table = /* @__PURE__ */ jsx30(
+      "table",
+      {
+        ref,
+        "data-slot": "table",
+        "data-size": size,
+        className: cn("w-full caption-bottom text-sm", className),
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsx30(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ jsx30(
+      "div",
+      {
+        "data-slot": "table-wrapper",
+        className: cn("relative w-full overflow-auto", wrapperClassName),
+        children: table
+      }
+    ) : table });
+  }
+);
+Table.displayName = "Table";
+var TableHeader = React23.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "thead",
+  {
+    ref,
+    "data-slot": "table-header",
+    className: cn(
+      "[&_tr]:border-b",
+      sticky && "sticky top-0 z-10 bg-background",
+      className
+    ),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "tbody",
+  {
+    ref,
+    "data-slot": "table-body",
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "tfoot",
+  {
+    ref,
+    "data-slot": "table-footer",
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "tr",
+  {
+    ref,
+    "data-slot": "table-row",
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React23.forwardRef(({ className, ...props }, ref) => {
+  const size = useTableSize();
+  return /* @__PURE__ */ jsx30(
+    "th",
+    {
+      ref,
+      "data-slot": "table-head",
+      className: cn(
+        "h-10 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        TABLE_SIZES[size].head,
+        className
+      ),
+      ...props
+    }
+  );
+});
+TableHead.displayName = "TableHead";
+var TableCell = React23.forwardRef(({ className, ...props }, ref) => {
+  const size = useTableSize();
+  return /* @__PURE__ */ jsx30(
+    "td",
+    {
+      ref,
+      "data-slot": "table-cell",
+      className: cn(
+        "align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        TABLE_SIZES[size].cell,
+        className
+      ),
+      ...props
+    }
+  );
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "caption",
+  {
+    ref,
+    "data-slot": "table-caption",
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+// src/tabs.tsx
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React24 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TABS_TRIGGER_BASE = "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
+var TabsList = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+  TabsPrimitive.List,
+  {
+    ref,
+    "data-slot": "tabs-list",
+    className: cn(
+      "inline-flex h-9 items-center justify-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "tabs-trigger",
+    className: cn(
+      TABS_TRIGGER_BASE,
+      "text-muted-foreground hover:text-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsTriggerCore = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "tabs-trigger",
+    className: cn(TABS_TRIGGER_BASE, className),
+    ...props
+  }
+));
+TabsTriggerCore.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+  TabsPrimitive.Content,
+  {
+    ref,
+    "data-slot": "tabs-content",
+    className: cn(
+      "data-[state=inactive]:hidden",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/textarea.tsx
+import * as React25 from "react";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+var FILL_HEIGHT_REGEX = /(?:^|\s)(h-full|h-dvh|flex-1|grow)(?:\s|$)/;
+var FILL_WIDTH_REGEX = /(?:^|\s)(w-full|w-screen)(?:\s|$)/;
+function getStretchClasses(className) {
+  if (!className) return void 0;
+  const fills = [];
+  if (FILL_HEIGHT_REGEX.test(className)) fills.push("h-full min-h-0");
+  if (FILL_WIDTH_REGEX.test(className)) fills.push("w-full");
+  return fills.length ? fills.join(" ") : void 0;
+}
+var TEXTAREA_ELEVATED_CLASS = "flex h-auto w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-textarea transition duration-400 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var TEXTAREA_CONTROL_CLASS = "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
+  React25.useEffect(() => {
+    if (!autoGrow || !ref.current) return;
+    const textarea = ref.current;
+    textarea.style.height = "auto";
+    let newHeight = textarea.scrollHeight;
+    if (minHeight) newHeight = Math.max(newHeight, minHeight);
+    if (maxHeight && newHeight >= maxHeight) {
+      textarea.style.height = `${maxHeight}px`;
+      textarea.style.overflowY = "auto";
+    } else {
+      textarea.style.height = `${newHeight}px`;
+      textarea.style.overflowY = "hidden";
+    }
+  }, [value, autoGrow, minHeight, maxHeight, ref]);
+}
+function useMergedTextareaRef(forwarded) {
+  const internal = React25.useRef(null);
+  const callback = React25.useCallback(
+    (node) => {
+      internal.current = node;
+      if (typeof forwarded === "function") forwarded(node);
+      else if (forwarded) forwarded.current = node;
+    },
+    [forwarded]
+  );
+  return { ref: internal, callback };
+}
+function boxStyle(minHeight, maxHeight) {
+  if (minHeight === void 0 && maxHeight === void 0) return void 0;
+  return {
+    minHeight: minHeight ? `${minHeight}px` : void 0,
+    maxHeight: maxHeight ? `${maxHeight}px` : void 0
+  };
+}
+var Textarea = React25.forwardRef(
+  ({ className, autoGrow, minHeight, maxHeight, wrapperClassName, ...props }, forwarded) => {
+    const { ref, callback } = useMergedTextareaRef(forwarded);
+    const stretchClasses = getStretchClasses(className);
+    const needsWrapper = Boolean(wrapperClassName || stretchClasses);
+    useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
+    const textarea = /* @__PURE__ */ jsx32(
+      "textarea",
+      {
+        ref: callback,
+        "data-slot": "textarea",
+        className: cn(
+          TEXTAREA_ELEVATED_CLASS,
+          autoGrow && "resize-none",
+          stretchClasses,
+          className
+        ),
+        style: boxStyle(minHeight, maxHeight),
+        ...props
+      }
+    );
+    if (!needsWrapper) return textarea;
+    return /* @__PURE__ */ jsx32("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
+  }
+);
+Textarea.displayName = "Textarea";
+var BasicTextarea = React25.forwardRef(
+  ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
+    const { ref, callback } = useMergedTextareaRef(forwarded);
+    useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
+    return /* @__PURE__ */ jsx32(
+      "textarea",
+      {
+        ref: callback,
+        "data-slot": "textarea",
+        className: cn(
+          TEXTAREA_CONTROL_CLASS,
+          "h-auto min-h-[60px]",
+          autoGrow && "resize-none",
+          className
+        ),
+        style: boxStyle(minHeight, maxHeight),
+        ...props
+      }
+    );
+  }
+);
+BasicTextarea.displayName = "BasicTextarea";
+var TextareaWithPrefix = React25.forwardRef(
+  ({
+    prefix,
+    className,
+    wrapperClassName,
+    autoGrow,
+    minHeight,
+    maxHeight,
+    ...props
+  }, forwarded) => {
+    const { ref, callback } = useMergedTextareaRef(forwarded);
+    useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        className: cn("relative", getStretchClasses(className), wrapperClassName),
+        children: [
+          prefix ? /* @__PURE__ */ jsx32("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
+          /* @__PURE__ */ jsx32(
+            "textarea",
+            {
+              ref: callback,
+              "data-slot": "textarea",
+              className: cn(
+                TEXTAREA_CONTROL_CLASS,
+                "resize-y",
+                prefix && "pl-10",
+                autoGrow && "resize-none",
+                className
+              ),
+              style: boxStyle(minHeight, maxHeight),
+              ...props
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TextareaWithPrefix.displayName = "TextareaWithPrefix";
+
 // src/use-scroll-fade.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef4, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef5, useState as useState7 } from "react";
 var EPSILON = 2;
 function useScrollFade() {
-  const [state, setState] = useState6({
+  const [state, setState] = useState7({
     top: false,
     bottom: false
   });
-  const nodeRef = useRef4(null);
-  const cleanupRef = useRef4(null);
-  const measure = useCallback2(() => {
+  const nodeRef = useRef5(null);
+  const cleanupRef = useRef5(null);
+  const measure = useCallback4(() => {
     const el = nodeRef.current;
     if (!el) return;
     const overflowing = el.scrollHeight - el.clientHeight > EPSILON;
@@ -1825,7 +2981,7 @@ function useScrollFade() {
       (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
     );
   }, []);
-  const ref = useCallback2(
+  const ref = useCallback4(
     (node) => {
       cleanupRef.current?.();
       cleanupRef.current = null;
@@ -1845,7 +3001,7 @@ function useScrollFade() {
     },
     [measure]
   );
-  useEffect3(() => () => cleanupRef.current?.(), []);
+  useEffect4(() => () => cleanupRef.current?.(), []);
   return {
     ref,
     state,
@@ -1857,13 +3013,28 @@ function useScrollFade() {
   };
 }
 export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
   Badge,
   BasicInput,
+  BasicTextarea,
   BottomSheet,
   BottomSheetBody,
   BottomSheetFooter,
   BottomSheetHeader,
   Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent2 as CollapsibleContent,
+  CollapsibleTrigger2 as CollapsibleTrigger,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -1873,21 +3044,66 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
   CreatablePicker,
   DEFAULT_SCORE_THRESHOLDS,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogContentPrimitive,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   EditableLabel,
   EnterInput,
   Input,
   InputWithPrefix,
-  Label,
+  Label3 as Label,
+  MOBILE_BREAKPOINT,
   OverflowToolbar,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
   PortalContainerProvider,
+  Progress,
   RadixDialogModalProvider,
   ScoreRing,
+  ScrollArea,
+  ScrollBar,
   SegmentedControl,
   Select,
   SelectContent,
@@ -1899,7 +3115,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-  Separator2 as Separator,
+  Separator4 as Separator,
   Sheet,
   SheetClose,
   SheetContent,
@@ -1911,7 +3127,23 @@ export {
   SheetTitle,
   SheetTrigger,
   Skeleton,
+  Switch,
   TabbedBottomSheet,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsTriggerCore,
+  Textarea,
+  TextareaWithPrefix,
   badgeVariants,
   buttonVariants,
   cn,
@@ -1919,8 +3151,12 @@ export {
   scoreRingColorClasses,
   selectTriggerVariants,
   sheetVariants,
+  useCardSize,
+  useDialogContainer,
+  useIsMobile,
   usePortalContainer,
   useRadixDialogModal,
-  useScrollFade
+  useScrollFade,
+  useTableSize
 };
 //# sourceMappingURL=index.js.map