@ai-matrx/design-system 0.8.0 → 0.10.0

package/dist/index.js

@@ -708,6 +708,45 @@ var Button = React5.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/motion.ts
+var MOTION_OVERLAY = "matrx-motion-overlay";
+var MOTION_DIALOG = "matrx-motion-dialog";
+var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
+var MOTION_POPPER = "matrx-motion-popper";
+var MOTION_SHEET = {
+  top: "matrx-motion-sheet-top",
+  bottom: "matrx-motion-sheet-bottom",
+  left: "matrx-motion-sheet-left",
+  right: "matrx-motion-sheet-right",
+  center: "matrx-motion-sheet-center"
+};
+var MOTION_PULSE = "matrx-pulse";
+var MOTION_SPIN = "matrx-spin";
+var ALL_MOTION_CLASSES = [
+  MOTION_OVERLAY,
+  MOTION_DIALOG,
+  MOTION_BOTTOM_SHEET,
+  MOTION_POPPER,
+  ...Object.values(MOTION_SHEET),
+  MOTION_PULSE,
+  MOTION_SPIN
+];
+var FORBIDDEN_HOST_MOTION_UTILITIES = [
+  "animate-in",
+  "animate-out",
+  "fade-in",
+  "fade-out",
+  "zoom-in",
+  "zoom-out",
+  "slide-in-from",
+  "slide-out-to",
+  "animate-accordion",
+  "animate-slide-down",
+  "animate-slide-up",
+  "animate-pulse",
+  "animate-spin"
+];
+
 // src/portal-container.tsx
 import * as React6 from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -746,7 +785,8 @@ var AlertDialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /*
     ref,
     "data-slot": "alert-dialog-overlay",
     className: cn(
-      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)]",
+      MOTION_OVERLAY,
       className
     ),
     ...props
@@ -765,7 +805,7 @@ var AlertDialogDescription = React7.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogContent = React7.forwardRef(({ className, children, container, ...props }, ref) => {
+var AlertDialogContent = React7.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
   const hasDescription = treeContainsComponent2(children, AlertDialogDescription) || treeContainsComponent2(children, AlertDialogPrimitive.Description);
   return /* @__PURE__ */ jsxs5(AlertDialogPortal, { container, children: [
     /* @__PURE__ */ jsx10(AlertDialogOverlay, {}),
@@ -775,11 +815,12 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, ..
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
+          "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
           // Ruling 3 — never taller than the viewport, always scrollable, and
           // the footer stays reachable via --dialog-pad like Dialog's.
           "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
-          "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",
+          "sm:rounded-lg",
+          animated && MOTION_DIALOG,
           className
         ),
         ...props,
@@ -1053,22 +1094,36 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 // src/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as React11 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+var CollapsibleContent2 = React11.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ jsx14(
+  CollapsiblePrimitive.CollapsibleContent,
+  {
+    ref,
+    "data-slot": "collapsible-content",
+    className: cn(
+      animated && "matrx-collapsible-content overflow-hidden",
+      className
+    ),
+    ...props
+  }
+));
+CollapsibleContent2.displayName = "CollapsibleContent";
 
 // src/command.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
-import * as React12 from "react";
+import * as React13 from "react";
 
 // src/use-is-mobile.ts
-import * as React11 from "react";
+import * as React12 from "react";
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React11.useState(false);
-  const [hasMounted, setHasMounted] = React11.useState(false);
-  React11.useEffect(() => {
+  const [isMobile, setIsMobile] = React12.useState(false);
+  const [hasMounted, setHasMounted] = React12.useState(false);
+  React12.useEffect(() => {
     setHasMounted(true);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -1088,8 +1143,8 @@ function useIsMobile() {
 }
 
 // src/command.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var Command = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
   CommandPrimitive,
   {
     ref,
@@ -1101,18 +1156,21 @@ var Command = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 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_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 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 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 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 = React12.forwardRef(({ className, children, container, ...props }, ref) => {
+var CommandDialogContent = React13.forwardRef(({ className, children, container, ...props }, ref) => {
   const isMobile = useIsMobile();
   const isModal = useRadixDialogModal();
   const portalContainer = usePortalContainer(container);
   return /* @__PURE__ */ jsxs6(DialogPrimitive.Portal, { container: portalContainer, children: [
-    isModal ? /* @__PURE__ */ jsx14(
+    isModal ? /* @__PURE__ */ jsx15(
       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"
+        className: cn(
+          "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)]",
+          MOTION_OVERLAY
+        )
       }
     ) : null,
     /* @__PURE__ */ jsxs6(
@@ -1123,6 +1181,7 @@ var CommandDialogContent = React12.forwardRef(({ className, children, container,
         "aria-describedby": void 0,
         className: cn(
           isMobile ? DIALOG_MOBILE_SHEET_CLASSES : DIALOG_DESKTOP_CLASSES,
+          isMobile ? MOTION_BOTTOM_SHEET : MOTION_DIALOG,
           className,
           isMobile && DIALOG_MOBILE_SHEET_OVERRIDE,
           !isModal && "z-[900]"
@@ -1131,8 +1190,8 @@ var CommandDialogContent = React12.forwardRef(({ className, children, container,
         children: [
           children,
           /* @__PURE__ */ jsxs6(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__ */ jsx14(XIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
+            /* @__PURE__ */ jsx15(XIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -1146,21 +1205,21 @@ var CommandDialog = ({
   ...props
 }) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx14(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx14(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx15(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx15(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs6(
     CommandDialogContent,
     {
       className: "overflow-hidden p-0",
       ...container !== void 0 ? { container } : {},
       children: [
-        /* @__PURE__ */ jsx14(DialogPrimitive.Title, { className: "sr-only" }),
-        /* @__PURE__ */ jsx14(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__ */ jsx15(DialogPrimitive.Title, { className: "sr-only" }),
+        /* @__PURE__ */ jsx15(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 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx14(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx14(
+var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx15(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx15(
     CommandPrimitive.Input,
     {
       ref,
@@ -1173,7 +1232,7 @@ var CommandInput = React12.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
   CommandPrimitive.List,
   {
     ref,
@@ -1182,7 +1241,7 @@ var CommandList = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React12.forwardRef((props, ref) => /* @__PURE__ */ jsx14(
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx15(
   CommandPrimitive.Empty,
   {
     ref,
@@ -1191,7 +1250,7 @@ var CommandEmpty = React12.forwardRef((props, ref) => /* @__PURE__ */ jsx14(
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
   CommandPrimitive.Group,
   {
     ref,
@@ -1203,7 +1262,7 @@ var CommandGroup = React12.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
   CommandPrimitive.Separator,
   {
     ref,
@@ -1212,7 +1271,7 @@ var CommandSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
   CommandPrimitive.Item,
   {
     ref,
@@ -1228,7 +1287,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "span",
     {
       className: cn(
@@ -1243,8 +1302,8 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/context-menu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import * as React13 from "react";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import * as React14 from "react";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
@@ -1252,10 +1311,9 @@ 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 = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var ContextMenuSubTrigger = React14.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -1268,35 +1326,35 @@ var ContextMenuSubTrigger = React13.forwardRef(({ className, inset, children, ..
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx15(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx16(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuSubContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
   ContextMenuPrimitive.SubContent,
   {
     ref,
     "data-slot": "context-menu-sub-content",
-    className: cn(SURFACE_CLASS, "shadow-lg", MOTION_CLASS, className),
+    className: cn(SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
     ...props
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React13.forwardRef(({ className, container, ...props }, ref) => {
+var ContextMenuContent = React14.forwardRef(({ className, container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx15(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx16(
     ContextMenuPrimitive.Content,
     {
       ref,
       "data-slot": "context-menu-content",
-      className: cn(SURFACE_CLASS, "shadow-md", MOTION_CLASS, className),
+      className: cn(SURFACE_CLASS, "shadow-md", MOTION_POPPER, className),
       ...props
     }
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuItem = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -1311,7 +1369,7 @@ var ContextMenuItem = React13.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var ContextMenuCheckboxItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -1319,13 +1377,13 @@ var ContextMenuCheckboxItem = React13.forwardRef(({ className, children, ...prop
     className: cn(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(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var ContextMenuRadioItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -1333,13 +1391,13 @@ var ContextMenuRadioItem = React13.forwardRef(({ className, children, ...props }
     className: cn(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(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuLabel = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -1353,7 +1411,7 @@ var ContextMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -1366,7 +1424,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsx16(
   "span",
   {
     "data-slot": "context-menu-shortcut",
@@ -1384,15 +1442,22 @@ import {
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React14 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React14.forwardRef(
-  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
+var PopoverContent = React15.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
     const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx17(
       PopoverPrimitive.Content,
       {
         ref,
@@ -1405,7 +1470,8 @@ var PopoverContent = React14.forwardRef(
           // z, DOM portal order decides, so a dialog opened FROM a popover stacks
           // above it, and a popover opened from a dialog still stacks above the
           // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
           className
         ),
         ...props
@@ -1416,7 +1482,7 @@ var PopoverContent = React14.forwardRef(
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/creatable-picker.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function article(noun) {
   return /^[aeiou]/i.test(noun.trim()) ? `an ${noun}` : `a ${noun}`;
 }
@@ -1492,7 +1558,7 @@ function CreatablePicker({
     }
   };
   return /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
-    /* @__PURE__ */ jsx17(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx18(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -1506,12 +1572,12 @@ function CreatablePicker({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
-          /* @__PURE__ */ jsx17(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+          /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx18("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
+          /* @__PURE__ */ jsx18(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx17(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx18(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs8(
       Command,
       {
         filter: (itemValue, search, keywords) => {
@@ -1519,7 +1585,7 @@ function CreatablePicker({
           return haystack.includes(search.toLowerCase()) ? 1 : 0;
         },
         children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             CommandInput,
             {
               ref: inputRef,
@@ -1532,8 +1598,8 @@ function CreatablePicker({
             }
           ),
           /* @__PURE__ */ jsxs8(CommandList, { children: [
-            /* @__PURE__ */ jsx17(CommandEmpty, { children: emptyLabel }),
-            groups.map((group) => /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(CommandEmpty, { children: emptyLabel }),
+            groups.map((group) => /* @__PURE__ */ jsx18(
               CommandGroup,
               {
                 ...group.heading === void 0 ? {} : { heading: group.heading },
@@ -1548,7 +1614,7 @@ function CreatablePicker({
                     },
                     className: "gap-2 text-xs",
                     children: [
-                      /* @__PURE__ */ jsx17(
+                      /* @__PURE__ */ jsx18(
                         LucideCheckIcon,
                         {
                           className: cn(
@@ -1557,8 +1623,8 @@ function CreatablePicker({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
-                      option.hint ? /* @__PURE__ */ jsx17("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
+                      /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
+                      option.hint ? /* @__PURE__ */ jsx18("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
                     ]
                   },
                   option.value
@@ -1568,7 +1634,7 @@ function CreatablePicker({
             ))
           ] }),
           canCreate ? /* @__PURE__ */ jsxs8("div", { className: "space-y-1 border-t border-border p-1", children: [
-            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx17("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
+            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx18("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
             /* @__PURE__ */ jsxs8(
               "button",
               {
@@ -1577,8 +1643,8 @@ 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__ */ jsx17(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx17(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx17("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
+                  busy ? /* @__PURE__ */ jsx18(Loader2Icon, { className: "size-3.5 shrink-0 matrx-spin" }) : /* @__PURE__ */ jsx18(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
                 ]
               }
             ),
@@ -1602,12 +1668,12 @@ 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__ */ jsx17(Icon2, { className: "size-3.5 shrink-0" }) : null,
-                      /* @__PURE__ */ jsx17("span", { className: "min-w-0 truncate", children: action.label })
+                      Icon2 ? /* @__PURE__ */ jsx18(Icon2, { className: "size-3.5 shrink-0" }) : null,
+                      /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: action.label })
                     ]
                   }
                 ),
-                action.note ? /* @__PURE__ */ jsx17("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
+                action.note ? /* @__PURE__ */ jsx18("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
               ] }, action.label);
             }),
             manageAction ? /* @__PURE__ */ jsxs8(
@@ -1619,16 +1685,16 @@ 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__ */ jsx17(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx17("span", { className: "min-w-0 truncate", children: manageAction.label })
+                  /* @__PURE__ */ jsx18(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: manageAction.label })
                 ]
               }
             ) : null
           ] }) : null,
           lockedNote ? /* @__PURE__ */ jsxs8("div", { className: "space-y-1 border-t border-border p-2", children: [
             /* @__PURE__ */ jsxs8("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
-              /* @__PURE__ */ jsx17(LockIcon, { className: "mt-px size-3 shrink-0" }),
-              /* @__PURE__ */ jsx17("span", { children: lockedNote })
+              /* @__PURE__ */ jsx18(LockIcon, { className: "mt-px size-3 shrink-0" }),
+              /* @__PURE__ */ jsx18("span", { children: lockedNote })
             ] }),
             lockedAction ? /* @__PURE__ */ jsxs8(
               "button",
@@ -1640,8 +1706,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__ */ jsx17(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx17("span", { className: "min-w-0 truncate", children: lockedAction.label })
+                  /* @__PURE__ */ jsx18(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: lockedAction.label })
                 ]
               }
             ) : null
@@ -1656,14 +1722,14 @@ function CreatablePicker({
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import * as VisuallyHidden2 from "@radix-ui/react-visually-hidden";
 import { treeContainsComponent as treeContainsComponent3 } from "@ai-matrx/kit/react-tree";
-import * as React15 from "react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as React16 from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Dialog = ({
   children,
   ...props
 }) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx18(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx18(DialogPrimitive2.Root, { ...props, modal, children }) });
+  return /* @__PURE__ */ jsx19(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx19(DialogPrimitive2.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
 var DialogTrigger = DialogPrimitive2.Trigger;
@@ -1673,12 +1739,12 @@ var DialogPortal = ({
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ jsx18(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ jsx19(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
 };
 DialogPortal.displayName = "DialogPortal";
-var DialogContainerContext = React15.createContext(null);
-var useDialogContainer = () => React15.useContext(DialogContainerContext);
-var DialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var DialogContainerContext = React16.createContext(null);
+var useDialogContainer = () => React16.useContext(DialogContainerContext);
+var DialogOverlay = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -1686,16 +1752,17 @@ var DialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__P
     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",
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)]",
+      MOTION_OVERLAY,
       className
     ),
     ...props
   }
 ));
 DialogOverlay.displayName = DialogPrimitive2.Overlay.displayName;
-var DialogContentPrimitive = React15.forwardRef((props, ref) => {
+var DialogContentPrimitive = React16.forwardRef((props, ref) => {
   const isModal = useRadixDialogModal();
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     DialogPrimitive2.Content,
     {
       ...props,
@@ -1705,14 +1772,15 @@ var DialogContentPrimitive = React15.forwardRef((props, ref) => {
   );
 });
 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_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 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 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 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 = React15.forwardRef(
+var DialogContent = React16.forwardRef(
   ({
     className,
     children,
     mobileSheet = true,
+    animated = true,
     showCloseButton = true,
     container,
     ...props
@@ -1721,10 +1789,10 @@ var DialogContent = React15.forwardRef(
     const isModal = useRadixDialogModal();
     const injectedContainer = usePortalContainer(container);
     const asSheet = mobileSheet && isMobile;
-    const [containerEl, setContainerEl] = React15.useState(
+    const [containerEl, setContainerEl] = React16.useState(
       null
     );
-    const mergedRef = React15.useCallback(
+    const mergedRef = React16.useCallback(
       (node) => {
         setContainerEl(node);
         if (typeof ref === "function") ref(node);
@@ -1736,7 +1804,7 @@ var DialogContent = React15.forwardRef(
     const hasTitle = treeContainsComponent3(children, DialogTitle) || treeContainsComponent3(children, DialogPrimitive2.Title);
     const hasDescription = treeContainsComponent3(children, DialogDescription) || treeContainsComponent3(children, DialogPrimitive2.Description);
     return /* @__PURE__ */ jsxs9(DialogPortal, { container, children: [
-      isModal ? /* @__PURE__ */ jsx18(DialogOverlay, {}) : null,
+      isModal ? /* @__PURE__ */ jsx19(DialogOverlay, {}) : null,
       /* @__PURE__ */ jsxs9(
         DialogContentPrimitive,
         {
@@ -1744,6 +1812,7 @@ var DialogContent = React15.forwardRef(
           "data-slot": "dialog-content",
           className: cn(
             asSheet ? DIALOG_MOBILE_SHEET_CLASSES2 : DIALOG_DESKTOP_CLASSES2,
+            animated && (asSheet ? MOTION_BOTTOM_SHEET : MOTION_DIALOG),
             className,
             asSheet && DIALOG_MOBILE_SHEET_OVERRIDE2,
             // A non-modal dialog is the coexistence contract for content that
@@ -1755,8 +1824,8 @@ var DialogContent = React15.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            hasTitle ? null : /* @__PURE__ */ jsx18(VisuallyHidden2.Root, { children: /* @__PURE__ */ jsx18(DialogPrimitive2.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ jsx18(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx18(
+            hasTitle ? null : /* @__PURE__ */ jsx19(VisuallyHidden2.Root, { children: /* @__PURE__ */ jsx19(DialogPrimitive2.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ jsx19(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx19(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
@@ -1770,8 +1839,8 @@ var DialogContent = React15.forwardRef(
                 "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__ */ jsx18(XIcon, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+                  /* @__PURE__ */ jsx19(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Close" })
                 ]
               }
             ) : null
@@ -1785,7 +1854,7 @@ DialogContent.displayName = DialogPrimitive2.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx19(
   "div",
   {
     "data-slot": "dialog-header",
@@ -1802,7 +1871,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx19(
   "div",
   {
     "data-slot": "dialog-footer",
@@ -1816,7 +1885,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var DialogTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   DialogPrimitive2.Title,
   {
     ref,
@@ -1826,7 +1895,7 @@ var DialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive2.Title.displayName;
-var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var DialogDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   DialogPrimitive2.Description,
   {
     ref,
@@ -1839,8 +1908,8 @@ DialogDescription.displayName = DialogPrimitive2.Description.displayName;
 
 // src/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as React16 from "react";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import * as React17 from "react";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -1848,10 +1917,9 @@ 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 = React16.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
+var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -1864,24 +1932,24 @@ var DropdownMenuSubTrigger = React16.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx19(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx20(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
     "data-slot": "dropdown-menu-sub-content",
-    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MENU_MOTION_CLASS, className),
+    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
     ...props
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx20(
     DropdownMenuPrimitive.Content,
     {
       ref,
@@ -1890,7 +1958,7 @@ var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, conta
       className: cn(
         MENU_SURFACE_CLASS,
         "shadow-md",
-        MENU_MOTION_CLASS,
+        MOTION_POPPER,
         className
       ),
       ...props
@@ -1898,7 +1966,7 @@ var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, conta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx20(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1908,7 +1976,7 @@ var DropdownMenuItem = React16.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
+var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -1916,13 +1984,13 @@ var DropdownMenuCheckboxItem = React16.forwardRef(({ className, children, ...pro
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx19(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx20("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx20(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
+var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -1930,13 +1998,13 @@ var DropdownMenuRadioItem = React16.forwardRef(({ className, children, ...props
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx19(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx20("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx20(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx20(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1946,7 +2014,7 @@ var DropdownMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -1959,7 +2027,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx19(
+}) => /* @__PURE__ */ jsx20(
   "span",
   {
     "data-slot": "dropdown-menu-shortcut",
@@ -1971,7 +2039,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/editable-label.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function EditableLabel({
   value,
   onCommit,
@@ -2079,7 +2147,7 @@ function EditableLabel({
   ]);
   if (editing) {
     return /* @__PURE__ */ jsxs11("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21(
         "input",
         {
           ref: inputRef,
@@ -2119,12 +2187,12 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ jsx20(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
-      error && /* @__PURE__ */ jsx20("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+      busy && /* @__PURE__ */ jsx21(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 matrx-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ jsx21("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
   if (controlled) return null;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -2158,8 +2226,8 @@ function EditableLabel({
 }
 
 // src/input.tsx
-import * as React17 from "react";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import * as React18 from "react";
+import { jsx as jsx22, jsxs as jsxs12 } 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 file:text-foreground placeholder:text-muted-foreground
@@ -2187,9 +2255,9 @@ var getVariantStyles = (variant = "default") => {
       return baseStyles;
   }
 };
-var Input = React17.forwardRef(
+var Input = React18.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       "input",
       {
         type,
@@ -2201,7 +2269,7 @@ var Input = React17.forwardRef(
   }
 );
 Input.displayName = "Input";
-var EnterInput = React17.forwardRef(
+var EnterInput = React18.forwardRef(
   ({ onEnter, ...props }, ref) => {
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && onEnter) {
@@ -2209,7 +2277,7 @@ var EnterInput = React17.forwardRef(
         onEnter();
       }
     };
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       Input,
       {
         ...props,
@@ -2225,11 +2293,11 @@ var EnterInput = React17.forwardRef(
   }
 );
 EnterInput.displayName = "EnterInput";
-var BasicInput = React17.forwardRef(
+var BasicInput = React18.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__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       "input",
       {
         type,
@@ -2244,10 +2312,10 @@ var BasicInput = React17.forwardRef(
   }
 );
 BasicInput.displayName = "BasicInput";
-var InputWithPrefix = React17.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+var InputWithPrefix = React18.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
   return /* @__PURE__ */ jsxs12("div", { className: cn("relative", wrapperClassName), children: [
-    prefix && /* @__PURE__ */ jsx21("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
-    /* @__PURE__ */ jsx21(
+    prefix && /* @__PURE__ */ jsx22("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ jsx22(
       Input,
       {
         ref,
@@ -2261,9 +2329,9 @@ InputWithPrefix.displayName = "InputWithPrefix";
 
 // src/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React18 from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Label3 = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+import * as React19 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Label3 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
   LabelPrimitive.Root,
   {
     ref,
@@ -2278,7 +2346,7 @@ Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/overflow-toolbar.tsx
 import { useLayoutEffect, useMemo, useRef as useRef3, useState as useState5 } from "react";
-import { Fragment, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var GAP_PX = 6;
 var TONE = {
   default: "border border-border bg-background hover:bg-accent text-foreground",
@@ -2301,15 +2369,15 @@ function ToolbarButton({
     TONE[tone]
   );
   const inner = /* @__PURE__ */ jsxs13(Fragment, { children: [
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Icon2,
       {
-        className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
+        className: cn("w-3.5 h-3.5 shrink-0", action.running && "matrx-spin")
       }
     ),
-    showLabel && /* @__PURE__ */ jsx23("span", { children: text })
+    showLabel && /* @__PURE__ */ jsx24("span", { children: text })
   ] });
-  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx23(
+  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx24(
     "a",
     {
       href: action.href,
@@ -2319,7 +2387,7 @@ function ToolbarButton({
       "aria-label": action.label,
       children: inner
     }
-  ) : /* @__PURE__ */ jsx23(
+  ) : /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
@@ -2331,12 +2399,12 @@ function ToolbarButton({
     }
   );
   if (enableTooltip && action.hideLabel && renderTooltip) {
-    return /* @__PURE__ */ jsx23(Fragment, { children: renderTooltip(control, action.label) });
+    return /* @__PURE__ */ jsx24(Fragment, { children: renderTooltip(control, action.label) });
   }
   return control;
 }
 function OverflowTrigger({ ariaLabel }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
@@ -2347,7 +2415,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__ */ jsx23(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+      children: /* @__PURE__ */ jsx24(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
     }
   );
 }
@@ -2415,14 +2483,14 @@ function OverflowToolbar({
         "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__ */ jsx23(ToolbarButton, { action: a }, a.id)),
-          /* @__PURE__ */ jsx23(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+          visibleActions.map((a) => /* @__PURE__ */ jsx24(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ jsx24(OverflowTrigger, { ariaLabel: overflowAriaLabel })
         ]
       }
     ),
     /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-end gap-1.5", children: [
-      leading != null && /* @__PURE__ */ jsx23("span", { ref: leadingRef, className: "shrink-0", children: leading }),
-      shown.map((a) => /* @__PURE__ */ jsx23(
+      leading != null && /* @__PURE__ */ jsx24("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ jsx24(
         ToolbarButton,
         {
           action: a,
@@ -2433,7 +2501,7 @@ function OverflowToolbar({
       )),
       hidden.length > 0 && renderOverflowMenu({
         actions: hidden,
-        trigger: /* @__PURE__ */ jsx23(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        trigger: /* @__PURE__ */ jsx24(OverflowTrigger, { ariaLabel: overflowAriaLabel })
       })
     ] })
   ] });
@@ -2441,20 +2509,20 @@ function OverflowToolbar({
 
 // src/progress.tsx
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React20 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import * as React21 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var PROGRESS_TONES = {
   default: "bg-primary",
   success: "bg-success",
   warning: "bg-warning",
   destructive: "bg-destructive"
 };
-var Progress = React20.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
+var Progress = React21.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__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     ProgressPrimitive.Root,
     {
       ref,
@@ -2464,7 +2532,7 @@ var Progress = React20.forwardRef(({ className, tone = "default", indicatorClass
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx25(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -2484,9 +2552,9 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React21 from "react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var ScrollArea = React21.forwardRef(
+import * as React22 from "react";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var ScrollArea = React22.forwardRef(
   ({
     className,
     children,
@@ -2503,7 +2571,7 @@ var ScrollArea = React21.forwardRef(
       className: cn("relative overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           ScrollAreaPrimitive.Viewport,
           {
             ref: viewportRef,
@@ -2512,14 +2580,14 @@ var ScrollArea = React21.forwardRef(
             children
           }
         ),
-        /* @__PURE__ */ jsx25(ScrollBar, { orientation, className: scrollBarClassName }),
-        /* @__PURE__ */ jsx25(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx26(ScrollBar, { orientation, className: scrollBarClassName }),
+        /* @__PURE__ */ jsx26(ScrollAreaPrimitive.Corner, {})
       ]
     }
   )
 );
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React21.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx25(
+var ScrollBar = React22.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx26(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -2532,7 +2600,7 @@ var ScrollBar = React21.forwardRef(({ className, orientation = "vertical", ...pr
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx25(
+    children: /* @__PURE__ */ jsx26(
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         "data-slot": "scroll-area-thumb",
@@ -2544,7 +2612,7 @@ var ScrollBar = React21.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/score-ring.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_SCORE_THRESHOLDS = {
   good: 75,
   warning: 50
@@ -2587,7 +2655,7 @@ function ScoreRing({
       "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
       children: [
         /* @__PURE__ */ jsxs15("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "circle",
             {
               cx: "50",
@@ -2598,7 +2666,7 @@ function ScoreRing({
               fill: "none"
             }
           ),
-          pct !== null ? /* @__PURE__ */ jsx26(
+          pct !== null ? /* @__PURE__ */ jsx27(
             "circle",
             {
               cx: "50",
@@ -2618,7 +2686,7 @@ function ScoreRing({
           ) : null
         ] }),
         /* @__PURE__ */ jsxs15("div", { className: "absolute flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             "span",
             {
               className: cn(
@@ -2628,7 +2696,7 @@ function ScoreRing({
               children: pct === null ? "\u2014" : `${pct}${suffix}`
             }
           ),
-          label ? /* @__PURE__ */ jsx26("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+          label ? /* @__PURE__ */ jsx27("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
         ] })
       ]
     }
@@ -2636,7 +2704,7 @@ function ScoreRing({
 }
 
 // src/segmented-control.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onValueChange,
@@ -2651,7 +2719,7 @@ function SegmentedControl({
     md: "h-9 text-sm",
     lg: "h-10 text-base"
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn(
@@ -2662,7 +2730,7 @@ function SegmentedControl({
       role: "tablist",
       children: data.map((option) => {
         const isActive = value === option.value;
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "button",
           {
             type: "button",
@@ -2689,8 +2757,8 @@ function SegmentedControl({
 // src/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cva as cva4 } from "class-variance-authority";
-import * as React22 from "react";
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React23 from "react";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -2709,7 +2777,7 @@ var selectTriggerVariants = cva4(
     }
   }
 );
-var SelectTrigger = React22.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs16(
+var SelectTrigger = React23.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs16(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2717,12 +2785,12 @@ var SelectTrigger = React22.forwardRef(({ className, children, hideArrow = false
     ...props,
     children: [
       children,
-      !hideArrow && /* @__PURE__ */ jsx28(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx28(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+      !hideArrow && /* @__PURE__ */ jsx29(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx29(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var SelectScrollUpButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -2731,11 +2799,11 @@ var SelectScrollUpButton = React22.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx28(RadixChevronUpIcon, {})
+    children: /* @__PURE__ */ jsx29(RadixChevronUpIcon, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -2744,42 +2812,52 @@ var SelectScrollDownButton = React22.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx28(RadixChevronDownIcon, {})
+    children: /* @__PURE__ */ jsx29(RadixChevronDownIcon, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React22.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
-  const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx28(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs16(
-    SelectPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      ),
-      position,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx28(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx28(
-          SelectPrimitive.Viewport,
-          {
-            className: cn(
-              "p-0.5 overflow-y-auto",
-              position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
-            ),
-            children
-          }
+var SelectContent = React23.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ jsx29(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs16(
+      SelectPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          animated && MOTION_POPPER,
+          position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
         ),
-        /* @__PURE__ */ jsx28(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-});
+        position,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx29(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx29(
+            SelectPrimitive.Viewport,
+            {
+              className: cn(
+                "p-0.5 overflow-y-auto",
+                position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx29(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SelectPrimitive.Label,
   {
     ref,
@@ -2788,7 +2866,7 @@ var SelectLabel = React22.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React22.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs16(
+var SelectItem = React23.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs16(
   SelectPrimitive.Item,
   {
     ref,
@@ -2799,14 +2877,14 @@ var SelectItem = React22.forwardRef(({ className, children, description, ...prop
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx28("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx28(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx28(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx28(SelectPrimitive.ItemText, { children }),
-      description ? /* @__PURE__ */ jsx28("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsx29("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx29(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx29(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ jsx29("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var SelectSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2818,9 +2896,9 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React23 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Separator4 = React23.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx29(
+import * as React24 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Separator4 = React24.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx30(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -2840,11 +2918,11 @@ Separator4.displayName = SeparatorPrimitive.Root.displayName;
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { treeContainsComponent as treeContainsComponent4 } from "@ai-matrx/kit/react-tree";
 import { cva as cva5 } from "class-variance-authority";
-import * as React24 from "react";
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
-var SheetContentBase = React24.forwardRef(({ ...props }, ref) => {
+import * as React25 from "react";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var SheetContentBase = React25.forwardRef(({ ...props }, ref) => {
   const isModal = useRadixDialogModal();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     SheetPrimitive.Content,
     {
       ...props,
@@ -2854,19 +2932,20 @@ var SheetContentBase = React24.forwardRef(({ ...props }, ref) => {
   );
 });
 SheetContentBase.displayName = "SheetContentBase";
-var Sheet = React24.forwardRef(({ children, ...props }, _ref) => {
+var Sheet = React25.forwardRef(({ children, ...props }, _ref) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx30(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx30(SheetPrimitive.Root, { ...props, modal, children }) });
+  return /* @__PURE__ */ jsx31(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx31(SheetPrimitive.Root, { ...props, modal, children }) });
 });
 Sheet.displayName = "Sheet";
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var SheetOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   SheetPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)]",
+      MOTION_OVERLAY,
       className
     ),
     ...props,
@@ -2875,15 +2954,22 @@ var SheetOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva5(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  // Motion is NOT stated here (0.10.0). The `data-[state=*]:animate-in/out`
+  // + `slide-in-from-*` pairs this base and its side variants used to carry
+  // came from the `tailwindcss-animate` HOST plugin, which three of four
+  // consumers never loaded — every sheet in them slammed open with no
+  // animation and no error. `SheetContent` now applies the package-owned
+  // `MOTION_SHEET[side]` class alongside these variants; the keyframes,
+  // durations and reduced-motion handling all live in `styles.css`.
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-        center: "inset-0 m-auto max-h-full max-w-full border rounded-lg data-[state=closed]:fade-out data-[state=open]:fade-in"
+        top: "inset-x-0 top-0 border-b",
+        bottom: "inset-x-0 bottom-0 border-t",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+        center: "inset-0 m-auto max-h-full max-w-full border rounded-lg"
       }
     },
     defaultVariants: {
@@ -2891,7 +2977,7 @@ var sheetVariants = cva5(
     }
   }
 );
-var SheetDescription = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var SheetDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   SheetPrimitive.Description,
   {
     ref,
@@ -2900,7 +2986,7 @@ var SheetDescription = React24.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-var SheetContent = React24.forwardRef(
+var SheetContent = React25.forwardRef(
   ({
     side = "right",
     className,
@@ -2908,22 +2994,27 @@ var SheetContent = React24.forwardRef(
     hideCloseButton = false,
     hideOverlay = false,
     overlayClassName,
+    animated = true,
     ...props
   }, ref) => {
     const hasDescription = treeContainsComponent4(children, SheetDescription) || treeContainsComponent4(children, SheetPrimitive.Description);
     return /* @__PURE__ */ jsxs17(SheetPortal, { children: [
-      !hideOverlay && /* @__PURE__ */ jsx30(SheetOverlay, { className: overlayClassName }),
+      !hideOverlay && /* @__PURE__ */ jsx31(SheetOverlay, { className: overlayClassName }),
       /* @__PURE__ */ jsxs17(
         SheetContentBase,
         {
           ref,
-          className: cn(sheetVariants({ side }), className),
+          className: cn(
+            sheetVariants({ side }),
+            animated && MOTION_SHEET[side ?? "right"],
+            className
+          ),
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
             !hideCloseButton && /* @__PURE__ */ jsxs17(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__ */ jsx30(Cross2Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx30("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx31(Cross2Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Close" })
             ] }),
             children
           ]
@@ -2936,7 +3027,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx30(
+}) => /* @__PURE__ */ jsx31(
   "div",
   {
     className: cn(
@@ -2950,7 +3041,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx30(
+}) => /* @__PURE__ */ jsx31(
   "div",
   {
     className: cn(
@@ -2961,7 +3052,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var SheetTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   SheetPrimitive.Title,
   {
     ref,
@@ -2972,15 +3063,17 @@ var SheetTitle = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/skeleton.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-function Skeleton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx31(
+import { jsx as jsx32 } from "react/jsx-runtime";
+function Skeleton({ className, animated = true, ...props }) {
+  return /* @__PURE__ */ jsx32(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-primary/10", className),
+      "data-slot": "skeleton",
+      className: cn(
+        "rounded-md bg-primary/10",
+        animated && MOTION_PULSE,
+        className
+      ),
       ...props
     }
   );
@@ -2988,8 +3081,8 @@ function Skeleton({
 
 // src/switch.tsx
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React25 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SWITCH_SIZES = {
   sm: {
     root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
@@ -3000,7 +3093,7 @@ var SWITCH_SIZES = {
     thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
   }
 };
-var Switch = React25.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx32(
+var Switch = React26.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx33(
   SwitchPrimitives.Root,
   {
     ref,
@@ -3011,7 +3104,7 @@ var Switch = React25.forwardRef(({ className, size = "md", ...props }, ref) => /
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx32(
+    children: /* @__PURE__ */ jsx33(
       SwitchPrimitives.Thumb,
       {
         "data-slot": "switch-thumb",
@@ -3027,7 +3120,7 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/tabbed-bottom-sheet.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function TabbedBottomSheet({
   open,
   onOpenChange,
@@ -3041,7 +3134,7 @@ function TabbedBottomSheet({
     if (open) setSelectedTabId(null);
   }
   const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     BottomSheet,
     {
       open,
@@ -3049,7 +3142,7 @@ function TabbedBottomSheet({
       title,
       size: "full",
       children: /* @__PURE__ */ jsxs18("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           BottomSheetHeader,
           {
             title: selectedTab ? selectedTab.label : title,
@@ -3057,19 +3150,19 @@ function TabbedBottomSheet({
             onBack: () => setSelectedTabId(null)
           }
         ),
-        selectedTab ? /* @__PURE__ */ jsx33("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx33(BottomSheetBody, { children: /* @__PURE__ */ jsx33("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+        selectedTab ? /* @__PURE__ */ jsx34("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx34(BottomSheetBody, { children: /* @__PURE__ */ jsx34("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
           const Icon2 = tab.icon;
-          return /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsxs18(
+          return /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsxs18(
             "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__ */ jsx33(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
-                /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                Icon2 ? /* @__PURE__ */ jsx34(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ jsx34("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
                 tab.trailing,
-                /* @__PURE__ */ jsx33(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+                /* @__PURE__ */ jsx34(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
               ]
             }
           ) }, tab.id);
@@ -3080,19 +3173,19 @@ function TabbedBottomSheet({
 }
 
 // src/table.tsx
-import * as React26 from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var TABLE_SIZES = {
   sm: { head: "px-2", cell: "p-2" },
   md: { head: "px-3", cell: "p-3" }
 };
-var TableSizeContext = React26.createContext("md");
+var TableSizeContext = React27.createContext("md");
 function useTableSize() {
-  return React26.useContext(TableSizeContext);
+  return React27.useContext(TableSizeContext);
 }
-var Table = React26.forwardRef(
+var Table = React27.forwardRef(
   ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
-    const table = /* @__PURE__ */ jsx34(
+    const table = /* @__PURE__ */ jsx35(
       "table",
       {
         ref,
@@ -3102,7 +3195,7 @@ var Table = React26.forwardRef(
         ...props
       }
     );
-    return /* @__PURE__ */ jsx34(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ jsx35(
       "div",
       {
         "data-slot": "table-wrapper",
@@ -3113,7 +3206,7 @@ var Table = React26.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React26.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableHeader = React27.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx35(
   "thead",
   {
     ref,
@@ -3127,7 +3220,7 @@ var TableHeader = React26.forwardRef(({ className, sticky = false, ...props }, r
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableBody = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   "tbody",
   {
     ref,
@@ -3137,7 +3230,7 @@ var TableBody = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableFooter = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   "tfoot",
   {
     ref,
@@ -3150,7 +3243,7 @@ var TableFooter = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableRow = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   "tr",
   {
     ref,
@@ -3163,9 +3256,9 @@ var TableRow = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React26.forwardRef(({ className, ...props }, ref) => {
+var TableHead = React27.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "th",
     {
       ref,
@@ -3180,9 +3273,9 @@ var TableHead = React26.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React26.forwardRef(({ className, ...props }, ref) => {
+var TableCell = React27.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "td",
     {
       ref,
@@ -3197,7 +3290,7 @@ var TableCell = React26.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableCaption = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   "caption",
   {
     ref,
@@ -3210,11 +3303,11 @@ TableCaption.displayName = "TableCaption";
 
 // src/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React27 from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx36 } 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 = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var TabsList = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   TabsPrimitive.List,
   {
     ref,
@@ -3227,7 +3320,7 @@ var TabsList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var TabsTrigger = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3241,7 +3334,7 @@ var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsTriggerCore = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var TabsTriggerCore = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3251,7 +3344,7 @@ var TabsTriggerCore = React27.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 TabsTriggerCore.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var TabsContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   TabsPrimitive.Content,
   {
     ref,
@@ -3267,8 +3360,8 @@ var TabsContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/textarea.tsx
-import * as React28 from "react";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx37, jsxs as jsxs19 } 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) {
@@ -3281,7 +3374,7 @@ function getStretchClasses(className) {
 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) {
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (!autoGrow || !ref.current) return;
     const textarea = ref.current;
     textarea.style.height = "auto";
@@ -3297,8 +3390,8 @@ function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
   }, [value, autoGrow, minHeight, maxHeight, ref]);
 }
 function useMergedTextareaRef(forwarded) {
-  const internal = React28.useRef(null);
-  const callback = React28.useCallback(
+  const internal = React29.useRef(null);
+  const callback = React29.useCallback(
     (node) => {
       internal.current = node;
       if (typeof forwarded === "function") forwarded(node);
@@ -3315,13 +3408,13 @@ function boxStyle(minHeight, maxHeight) {
     maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
 }
-var Textarea = React28.forwardRef(
+var Textarea = React29.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__ */ jsx36(
+    const textarea = /* @__PURE__ */ jsx37(
       "textarea",
       {
         ref: callback,
@@ -3337,15 +3430,15 @@ var Textarea = React28.forwardRef(
       }
     );
     if (!needsWrapper) return textarea;
-    return /* @__PURE__ */ jsx36("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
+    return /* @__PURE__ */ jsx37("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
   }
 );
 Textarea.displayName = "Textarea";
-var BasicTextarea = React28.forwardRef(
+var BasicTextarea = React29.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "textarea",
       {
         ref: callback,
@@ -3363,7 +3456,7 @@ var BasicTextarea = React28.forwardRef(
   }
 );
 BasicTextarea.displayName = "BasicTextarea";
-var TextareaWithPrefix = React28.forwardRef(
+var TextareaWithPrefix = React29.forwardRef(
   ({
     prefix,
     className,
@@ -3380,8 +3473,8 @@ var TextareaWithPrefix = React28.forwardRef(
       {
         className: cn("relative", getStretchClasses(className), wrapperClassName),
         children: [
-          prefix ? /* @__PURE__ */ jsx36("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
-          /* @__PURE__ */ jsx36(
+          prefix ? /* @__PURE__ */ jsx37("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
+          /* @__PURE__ */ jsx37(
             "textarea",
             {
               ref: callback,
@@ -3460,34 +3553,37 @@ function useScrollFade() {
 
 // src/hover-card.tsx
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React29 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import * as React30 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React29.forwardRef(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
-  const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ jsx37(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx37(
-    HoverCardPrimitive.Content,
-    {
-      ref,
-      "data-slot": "hover-card-content",
-      align,
-      sideOffset,
-      className: cn(
-        "z-[10001] w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
-        className
-      ),
-      ...props
-    }
-  ) });
-});
+var HoverCardContent = React30.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, animated = true, ...props }, ref) => {
+    const resolved = usePortalContainer(container);
+    return /* @__PURE__ */ jsx38(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx38(
+      HoverCardPrimitive.Content,
+      {
+        ref,
+        "data-slot": "hover-card-content",
+        align,
+        sideOffset,
+        className: cn(
+          "z-[10001] w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import * as React30 from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var RadioGroupSizeContext = React30.createContext("md");
+import * as React31 from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var RadioGroupSizeContext = React31.createContext("md");
 var CONTROL_CLASSES = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4",
@@ -3498,7 +3594,7 @@ var DOT_CLASSES = {
   md: "h-1.5 w-1.5",
   lg: "h-2 w-2"
 };
-var RadioGroup3 = React30.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx38(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx38(
+var RadioGroup3 = React31.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx39(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx39(
   RadioGroupPrimitive.Root,
   {
     ref,
@@ -3508,10 +3604,10 @@ var RadioGroup3 = React30.forwardRef(({ className, size = "md", ...props }, ref)
   }
 ) }));
 RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React30.forwardRef(({ className, size, ...props }, ref) => {
-  const groupSize = React30.useContext(RadioGroupSizeContext);
+var RadioGroupItem = React31.forwardRef(({ className, size, ...props }, ref) => {
+  const groupSize = React31.useContext(RadioGroupSizeContext);
   const resolved = size ?? groupSize;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -3528,7 +3624,7 @@ var RadioGroupItem = React30.forwardRef(({ className, size, ...props }, ref) =>
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx38(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx39(
         "div",
         {
           className: cn("rounded-full bg-primary-foreground", DOT_CLASSES[resolved])
@@ -3541,7 +3637,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/resizable.tsx
 import { Group as Group4, Panel, Separator as Separator5 } from "react-resizable-panels";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var HANDLE_SIZES = {
   xs: "w-0.5 [&[aria-orientation=horizontal]]:h-0.5 [&[aria-orientation=horizontal]]:w-full",
   sm: "w-1 [&[aria-orientation=horizontal]]:h-1 [&[aria-orientation=horizontal]]:w-full",
@@ -3555,7 +3651,7 @@ var HANDLE_SIZES = {
 var ResizablePanelGroup = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx39(
+}) => /* @__PURE__ */ jsx40(
   Group4,
   {
     "data-slot": "resizable-group",
@@ -3570,7 +3666,7 @@ var ResizableHandle = ({
   size = "xs",
   className,
   ...props
-}) => /* @__PURE__ */ jsx39(
+}) => /* @__PURE__ */ jsx40(
   Separator5,
   {
     "data-slot": "resizable-handle",
@@ -3590,15 +3686,15 @@ var ResizableHandle = ({
       className
     ),
     ...props,
-    children: withHandle ? /* @__PURE__ */ jsx39("div", { className: "z-10 flex h-8 w-4 items-center justify-center rounded-sm border bg-border group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8", children: /* @__PURE__ */ jsx39(DragHandleDots2Icon, { className: "h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90" }) }) : null
+    children: withHandle ? /* @__PURE__ */ jsx40("div", { className: "z-10 flex h-8 w-4 items-center justify-center rounded-sm border bg-border group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8", children: /* @__PURE__ */ jsx40(DragHandleDots2Icon, { className: "h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90" }) }) : null
   }
 );
 ResizableHandle.displayName = "ResizableHandle";
 
 // src/slider.tsx
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React31 from "react";
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import * as React32 from "react";
+import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
 var TRACK_CLASSES = {
   sm: "h-1",
   md: "h-1.5",
@@ -3609,7 +3705,7 @@ var THUMB_CLASSES = {
   md: "h-4 w-4",
   lg: "h-5 w-5"
 };
-var Slider = React31.forwardRef(({ className, size = "md", ...props }, ref) => {
+var Slider = React32.forwardRef(({ className, size = "md", ...props }, ref) => {
   const thumbCount = Math.max(
     1,
     (props.value ?? props.defaultValue ?? [0]).length
@@ -3626,7 +3722,7 @@ var Slider = React31.forwardRef(({ className, size = "md", ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
@@ -3635,7 +3731,7 @@ var Slider = React31.forwardRef(({ className, size = "md", ...props }, ref) => {
               TRACK_CLASSES[size],
               "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ jsx40(
+            children: /* @__PURE__ */ jsx41(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -3644,7 +3740,7 @@ var Slider = React31.forwardRef(({ className, size = "md", ...props }, ref) => {
             )
           }
         ),
-        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx40(
+        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx41(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -3671,8 +3767,8 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva6 } from "class-variance-authority";
-import * as React32 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import * as React33 from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var toggleVariants = cva6(
   "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -3693,7 +3789,7 @@ var toggleVariants = cva6(
     }
   }
 );
-var Toggle = React32.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx41(
+var Toggle = React33.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx42(
   TogglePrimitive.Root,
   {
     ref,
@@ -3703,21 +3799,21 @@ var Toggle = React32.forwardRef(({ className, variant, size, ...props }, ref) =>
   }
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React32.createContext({ size: "default", variant: "default" });
-var ToggleGroup = React32.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx41(
+var ToggleGroupContext = React33.createContext({ size: "default", variant: "default" });
+var ToggleGroup = React33.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx42(
   ToggleGroupPrimitive.Root,
   {
     ref,
     "data-slot": "toggle-group",
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx41(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx42(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React32.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React32.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx41(
+var ToggleGroupItem = React33.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React33.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx42(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -3738,21 +3834,22 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React33 from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import * as React34 from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+var TooltipContent = React34.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx43(
     TooltipPrimitive.Content,
     {
       ref,
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md",
+        animated && MOTION_POPPER,
         className
       ),
       ...props
@@ -3761,6 +3858,7 @@ var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, container,
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export {
+  ALL_MOTION_CLASSES,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -3868,6 +3966,7 @@ export {
   DropdownMenuTrigger,
   EditableLabel,
   EnterInput,
+  FORBIDDEN_HOST_MOTION_UTILITIES,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -3875,6 +3974,13 @@ export {
   InputWithPrefix,
   Label3 as Label,
   MOBILE_BREAKPOINT,
+  MOTION_BOTTOM_SHEET,
+  MOTION_DIALOG,
+  MOTION_OVERLAY,
+  MOTION_POPPER,
+  MOTION_PULSE,
+  MOTION_SHEET,
+  MOTION_SPIN,
   OverflowToolbar,
   Popover,
   PopoverAnchor,