@ai-matrx/design-system 0.6.0 → 0.7.0

package/dist/index.js

@@ -39,11 +39,187 @@ function Badge({ className, variant, ...props }) {
 
 // src/bottom-sheet.tsx
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { Drawer as DrawerPrimitive2 } from "vaul";
+
+// src/drawer.tsx
+import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
 import * as React2 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
+// src/radix-dialog-modal-context.tsx
+import * as React from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var RadixDialogModalContext = React.createContext(true);
+function RadixDialogModalProvider({
+  children,
+  modal
+}) {
+  return /* @__PURE__ */ jsx2(RadixDialogModalContext.Provider, { value: modal, children });
+}
+function useRadixDialogModal() {
+  return React.useContext(RadixDialogModalContext);
+}
+
+// src/drawer.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DrawerDirectionContext = React2.createContext("bottom");
+var useDrawerDirection = () => React2.useContext(DrawerDirectionContext);
+var Drawer = ({
+  children,
+  shouldScaleBackground = true,
+  ...props
+}) => {
+  const direction = props.direction ?? "bottom";
+  return /* @__PURE__ */ jsx3(RadixDialogModalProvider, { modal: true, children: /* @__PURE__ */ jsx3(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(
+    DrawerPrimitive.Root,
+    {
+      modal: true,
+      shouldScaleBackground,
+      ...props,
+      direction,
+      children
+    }
+  ) }) });
+};
+Drawer.displayName = "Drawer";
+var DrawerTrigger = DrawerPrimitive.Trigger;
+var DrawerPortal = DrawerPrimitive.Portal;
+var DrawerClose = DrawerPrimitive.Close;
+var DrawerOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  DrawerPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "drawer-overlay",
+    className: cn(
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)]",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+var DrawerDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  DrawerPrimitive.Description,
+  {
+    ref,
+    "data-slot": "drawer-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+var DrawerContentPrimitive = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx3(DrawerPrimitive.Content, { ...props, ref, "aria-modal": "true" }));
+DrawerContentPrimitive.displayName = "DrawerContentPrimitive";
+var DIRECTION_CLASSES = {
+  bottom: "inset-x-0 bottom-0 mt-24 flex-col rounded-t-[10px] border-t pb-safe",
+  top: "inset-x-0 top-0 mb-24 flex-col rounded-b-[10px] border-b pt-safe",
+  left: "inset-y-0 left-0 mr-24 flex-row rounded-r-[10px] border-r",
+  right: "inset-y-0 right-0 ml-24 flex-row rounded-l-[10px] border-l"
+};
+var SIZE_CLASSES = {
+  bottom: { adaptive: "h-auto max-h-[90dvh]", full: "h-[92dvh]" },
+  top: { adaptive: "h-auto max-h-[90dvh]", full: "h-[92dvh]" },
+  left: { adaptive: "w-auto max-w-[92vw]", full: "h-dvh w-[92vw] max-w-sm" },
+  right: { adaptive: "w-auto max-w-[92vw]", full: "h-dvh w-[92vw] max-w-sm" }
+};
+var DrawerContent = React2.forwardRef(({ className, children, size = "adaptive", showHandle, ...props }, ref) => {
+  const direction = useDrawerDirection();
+  const hasDescription = treeContainsComponent(children, DrawerDescription) || treeContainsComponent(children, DrawerPrimitive.Description);
+  const withHandle = showHandle ?? (direction === "bottom" || direction === "top");
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx3(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DrawerContentPrimitive,
+      {
+        ref,
+        "data-slot": "drawer-content",
+        "data-direction": direction,
+        className: cn(
+          "fixed z-[10000] flex min-w-0 border bg-background",
+          DIRECTION_CLASSES[direction],
+          SIZE_CLASSES[direction][size],
+          className
+        ),
+        ...hasDescription ? {} : { "aria-describedby": void 0 },
+        ...props,
+        children: [
+          withHandle ? (
+            // Rule 3: the pill is 4px; the TARGET is 44px.
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "aria-hidden": true,
+                "data-slot": "drawer-handle",
+                className: cn(
+                  "flex min-h-11 w-full shrink-0 cursor-grab items-center justify-center active:cursor-grabbing",
+                  direction === "top" && "order-last"
+                ),
+                children: /* @__PURE__ */ jsx3("div", { className: "h-1 w-[100px] rounded-full bg-muted" })
+              }
+            )
+          ) : null,
+          children
+        ]
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    "data-slot": "drawer-header",
+    className: cn(
+      "grid shrink-0 gap-1.5 p-4 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    "data-slot": "drawer-body",
+    className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-4", className),
+    ...props
+  }
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    "data-slot": "drawer-footer",
+    className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pb-safe", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  DrawerPrimitive.Title,
+  {
+    ref,
+    "data-slot": "drawer-title",
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
 // src/icons.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function lucideProps(props) {
   return {
     xmlns: "http://www.w3.org/2000/svg",
@@ -58,53 +234,53 @@ function lucideProps(props) {
   };
 }
 function Loader2Icon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+  return /* @__PURE__ */ jsx4("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
 function ChevronLeftIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" }) });
+  return /* @__PURE__ */ jsx4("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx4("path", { d: "m15 18-6-6 6-6" }) });
 }
 function ChevronRightIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }) });
+  return /* @__PURE__ */ jsx4("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }) });
 }
 function MoreHorizontalIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "19", cy: "12", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1" })
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "12", r: "1" })
   ] });
 }
 function LucideCheckIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }) });
+  return /* @__PURE__ */ jsx4("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" }) });
 }
 function ChevronsUpDownIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ jsx2("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ jsx2("path", { d: "m7 9 5-5 5 5" })
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ jsx4("path", { d: "m7 9 5-5 5 5" })
   ] });
 }
 function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ jsx2("path", { d: "M15 3h6v6" }),
-    /* @__PURE__ */ jsx2("path", { d: "M10 14 21 3" }),
-    /* @__PURE__ */ jsx2("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ jsx4("path", { d: "M10 14 21 3" }),
+    /* @__PURE__ */ jsx4("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
   ] });
 }
 function LockIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ jsx2("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
   ] });
 }
 function PlusIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ jsx2("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx2("path", { d: "M12 5v14" })
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx4("path", { d: "M12 5v14" })
   ] });
 }
 function XIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
   ] });
 }
 function radixProps(props) {
@@ -119,7 +295,7 @@ function radixProps(props) {
   };
 }
 function MagnifyingGlassIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z",
@@ -130,7 +306,7 @@ function MagnifyingGlassIcon(props) {
   ) });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -141,7 +317,7 @@ function CheckIcon(props) {
   ) });
 }
 function DividerHorizontalIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z",
@@ -152,7 +328,7 @@ function DividerHorizontalIcon(props) {
   ) });
 }
 function DotFilledIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z",
@@ -161,7 +337,7 @@ function DotFilledIcon(props) {
   ) });
 }
 function RadixChevronRightIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
@@ -172,7 +348,7 @@ function RadixChevronRightIcon(props) {
   ) });
 }
 function RadixChevronDownIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
@@ -183,7 +359,7 @@ function RadixChevronDownIcon(props) {
   ) });
 }
 function RadixChevronUpIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
@@ -194,7 +370,7 @@ function RadixChevronUpIcon(props) {
   ) });
 }
 function Cross2Icon(props) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -202,7 +378,7 @@ function Cross2Icon(props) {
       fill: "none",
       "aria-hidden": true,
       ...props,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx4(
         "path",
         {
           d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
@@ -214,39 +390,20 @@ function Cross2Icon(props) {
     }
   );
 }
-
-// src/radix-dialog-modal-context.tsx
-import * as React from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var RadixDialogModalContext = React.createContext(true);
-function RadixDialogModalProvider({
-  children,
-  modal
-}) {
-  return /* @__PURE__ */ jsx3(RadixDialogModalContext.Provider, { value: modal, children });
-}
-function useRadixDialogModal() {
-  return React.useContext(RadixDialogModalContext);
+function DragHandleDots2Icon(props) {
+  return /* @__PURE__ */ jsx4("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      d: "M4.5 2.5C5.05228 2.5 5.5 2.05228 5.5 1.5C5.5 0.947715 5.05228 0.5 4.5 0.5C3.94772 0.5 3.5 0.947715 3.5 1.5C3.5 2.05228 3.94772 2.5 4.5 2.5ZM4.5 6.5C5.05228 6.5 5.5 6.05229 5.5 5.5C5.5 4.94771 5.05228 4.5 4.5 4.5C3.94772 4.5 3.5 4.94771 3.5 5.5C3.5 6.05229 3.94772 6.5 4.5 6.5ZM5.5 9.5C5.5 10.0523 5.05228 10.5 4.5 10.5C3.94772 10.5 3.5 10.0523 3.5 9.5C3.5 8.94771 3.94772 8.5 4.5 8.5C5.05228 8.5 5.5 8.94771 5.5 9.5ZM4.5 14.5C5.05228 14.5 5.5 14.0523 5.5 13.5C5.5 12.9477 5.05228 12.5 4.5 12.5C3.94772 12.5 3.5 12.9477 3.5 13.5C3.5 14.0523 3.94772 14.5 4.5 14.5ZM11.5 1.5C11.5 2.05228 11.0523 2.5 10.5 2.5C9.94771 2.5 9.5 2.05228 9.5 1.5C9.5 0.947715 9.94771 0.5 10.5 0.5C11.0523 0.5 11.5 0.947715 11.5 1.5ZM10.5 6.5C11.0523 6.5 11.5 6.05229 11.5 5.5C11.5 4.94771 11.0523 4.5 10.5 4.5C9.94771 4.5 9.5 4.94771 9.5 5.5C9.5 6.05229 9.94771 6.5 10.5 6.5ZM11.5 9.5C11.5 10.0523 11.0523 10.5 10.5 10.5C9.94771 10.5 9.5 10.0523 9.5 9.5C9.5 8.94771 9.94771 8.5 10.5 8.5C11.0523 8.5 11.5 8.94771 11.5 9.5ZM10.5 14.5C11.0523 14.5 11.5 14.0523 11.5 13.5C11.5 12.9477 11.0523 12.5 10.5 12.5C9.94771 12.5 9.5 12.9477 9.5 13.5C9.5 14.0523 9.94771 14.5 10.5 14.5Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
 }
 
 // src/bottom-sheet.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var DrawerRoot = ({
-  children,
-  shouldScaleBackground = true,
-  ...props
-}) => /* @__PURE__ */ jsx4(RadixDialogModalProvider, { modal: true, children: /* @__PURE__ */ jsx4(
-  DrawerPrimitive.Root,
-  {
-    modal: true,
-    shouldScaleBackground,
-    ...props,
-    children
-  }
-) });
-DrawerRoot.displayName = "DrawerRoot";
-var DrawerContentPrimitive = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx4(DrawerPrimitive.Content, { ...props, ref, "aria-modal": "true" }));
-DrawerContentPrimitive.displayName = "DrawerContentPrimitive";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function BottomSheet({
   open,
   onOpenChange,
@@ -256,15 +413,15 @@ function BottomSheet({
   contentClassName,
   children
 }) {
-  return /* @__PURE__ */ jsx4(DrawerRoot, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(DrawerPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx4(
-      DrawerPrimitive.Overlay,
+  return /* @__PURE__ */ jsx5(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(DrawerPrimitive2.Portal, { children: [
+    /* @__PURE__ */ jsx5(
+      DrawerPrimitive2.Overlay,
       {
         className: cn("fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)]", "fixed inset-0 z-50"),
         style: { background: "var(--matrx-overlay-scrim-drawer)" }
       }
     ),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       DrawerContentPrimitive,
       {
         className: cn(
@@ -281,11 +438,11 @@ function BottomSheet({
           borderBottom: "none"
         } : void 0,
         children: [
-          /* @__PURE__ */ jsxs2(VisuallyHidden, { children: [
-            /* @__PURE__ */ jsx4(DrawerPrimitive.Title, { children: title }),
-            /* @__PURE__ */ jsx4(DrawerPrimitive.Description, { children: "Bottom sheet panel." })
+          /* @__PURE__ */ jsxs3(VisuallyHidden, { children: [
+            /* @__PURE__ */ jsx5(DrawerPrimitive2.Title, { children: title }),
+            /* @__PURE__ */ jsx5(DrawerPrimitive2.Description, { children: "Bottom sheet panel." })
           ] }),
-          /* @__PURE__ */ jsx4("div", { className: "mx-auto mt-3 mb-1 h-1.5 w-10 rounded-full bg-muted-foreground/30 flex-shrink-0" }),
+          /* @__PURE__ */ jsx5("div", { className: "mx-auto mt-3 mb-1 h-1.5 w-10 rounded-full bg-muted-foreground/30 flex-shrink-0" }),
           children
         ]
       }
@@ -298,8 +455,8 @@ function BottomSheetHeader({
   onBack,
   trailing
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center px-2 pt-1 pb-2 flex-shrink-0 min-h-[44px]", children: [
-    /* @__PURE__ */ jsx4("div", { className: "min-w-[44px] flex items-center justify-start", children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center px-2 pt-1 pb-2 flex-shrink-0 min-h-[44px]", children: [
+    /* @__PURE__ */ jsx5("div", { className: "min-w-[44px] flex items-center justify-start", children: /* @__PURE__ */ jsx5(
       "button",
       {
         onClick: onBack,
@@ -309,15 +466,15 @@ function BottomSheetHeader({
         ),
         "aria-hidden": !showBack,
         tabIndex: showBack ? 0 : -1,
-        children: /* @__PURE__ */ jsx4(ChevronLeftIcon, { className: "h-4 w-4 text-foreground" })
+        children: /* @__PURE__ */ jsx5(ChevronLeftIcon, { className: "h-4 w-4 text-foreground" })
       }
     ) }),
-    /* @__PURE__ */ jsx4("span", { className: "text-[17px] font-semibold flex-1 text-center truncate", children: title }),
-    /* @__PURE__ */ jsx4("div", { className: "min-w-[44px] flex items-center justify-end", children: trailing })
+    /* @__PURE__ */ jsx5("span", { className: "text-[17px] font-semibold flex-1 text-center truncate", children: title }),
+    /* @__PURE__ */ jsx5("div", { className: "min-w-[44px] flex items-center justify-end", children: trailing })
   ] });
 }
 function BottomSheetBody({ children, className }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: cn(
@@ -334,7 +491,7 @@ function BottomSheetFooter({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: cn(
@@ -346,12 +503,73 @@ function BottomSheetFooter({
   );
 }
 
-// src/button.tsx
-import { Slot } from "@radix-ui/react-slot";
+// src/alert.tsx
 import { cva as cva2 } from "class-variance-authority";
 import * as React3 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var buttonVariants = cva2(
+import { jsx as jsx6 } from "react/jsx-runtime";
+var alertVariants = cva2(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground [&>svg]:text-foreground",
+        destructive: "border-destructive/50 bg-destructive/5 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        warning: "border-warning/50 bg-warning/5 text-warning dark:border-warning [&>svg]:text-warning",
+        success: "border-success/50 bg-success/5 text-success dark:border-success [&>svg]:text-success",
+        info: "border-info/50 bg-info/5 text-info dark:border-info [&>svg]:text-info"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Alert = React3.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      role: "alert",
+      "data-slot": "alert",
+      "data-variant": variant ?? "default",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  )
+);
+Alert.displayName = "Alert";
+var AlertTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "h5",
+  {
+    ref,
+    "data-slot": "alert-title",
+    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    ...props
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    ref,
+    "data-slot": "alert-description",
+    className: cn("text-sm [&_p]:leading-relaxed", className),
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
+
+// src/alert-dialog.tsx
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { treeContainsComponent as treeContainsComponent2 } from "@ai-matrx/kit/react-tree";
+import * as React6 from "react";
+
+// src/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva3 } from "class-variance-authority";
+import * as React4 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var buttonVariants = cva3(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
@@ -402,10 +620,10 @@ var buttonVariants = cva2(
     }
   }
 );
-var Button = React3.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx7(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -417,16 +635,166 @@ var Button = React3.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/portal-container.tsx
+import * as React5 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PortalContainerContext = React5.createContext(
+  void 0
+);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx8(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(explicit) {
+  const injected = React5.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/alert-dialog.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = ({
+  container,
+  ...props
+}) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx9(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
+};
+AlertDialogPortal.displayName = "AlertDialogPortal";
+var AlertDialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AlertDialogPrimitive.Overlay,
+  {
+    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",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContentPrimitive = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx9(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true" }));
+AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
+var AlertDialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "alert-dialog-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogContent = React6.forwardRef(({ className, children, container, ...props }, ref) => {
+  const hasDescription = treeContainsComponent2(children, AlertDialogDescription) || treeContainsComponent2(children, AlertDialogPrimitive.Description);
+  return /* @__PURE__ */ jsxs4(AlertDialogPortal, { container, children: [
+    /* @__PURE__ */ jsx9(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxs4(
+      AlertDialogContentPrimitive,
+      {
+        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",
+          // 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",
+          className
+        ),
+        ...props,
+        children: [
+          hasDescription ? null : /* @__PURE__ */ jsx9(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
+          children
+        ]
+      }
+    )
+  ] });
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx9(
+  "div",
+  {
+    "data-slot": "alert-dialog-header",
+    className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx9(
+  "div",
+  {
+    "data-slot": "alert-dialog-footer",
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
+      // through under the actions, and safe-area padded on a phone.
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] mb-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "alert-dialog-title",
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogAction = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    "data-slot": "alert-dialog-action",
+    className: cn(buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    "data-slot": "alert-dialog-cancel",
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
 // src/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as React4 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import * as React7 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var AVATAR_SIZES = {
   sm: "h-8 w-8 text-[11px]",
   md: "h-9 w-9 text-xs",
   lg: "h-10 w-10 text-sm"
 };
-var Avatar = React4.forwardRef(({ className, size = "lg", ...props }, ref) => /* @__PURE__ */ jsx6(
+var Avatar = React7.forwardRef(({ className, size = "lg", ...props }, ref) => /* @__PURE__ */ jsx10(
   AvatarPrimitive.Root,
   {
     ref,
@@ -440,7 +808,7 @@ var Avatar = React4.forwardRef(({ className, size = "lg", ...props }, ref) => /*
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   AvatarPrimitive.Image,
   {
     ref,
@@ -450,7 +818,7 @@ var AvatarImage = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -465,8 +833,8 @@ var AvatarFallback = React4.forwardRef(({ className, ...props }, ref) => /* @__P
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/card.tsx
-import * as React5 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import * as React8 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var CARD_SIZES = {
   sm: {
     root: "rounded-xl border bg-card text-card-foreground shadow",
@@ -484,12 +852,12 @@ var CARD_SIZES = {
     padTopless: "p-6 pt-0"
   }
 };
-var CardSizeContext = React5.createContext("md");
+var CardSizeContext = React8.createContext("md");
 function useCardSize() {
-  return React5.useContext(CardSizeContext);
+  return React8.useContext(CardSizeContext);
 }
-var Card = React5.forwardRef(
-  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx7(CardSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx7(
+var Card = React8.forwardRef(
+  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx11(CardSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx11(
     "div",
     {
       ref,
@@ -501,9 +869,9 @@ var Card = React5.forwardRef(
   ) })
 );
 Card.displayName = "Card";
-var CardHeader = React5.forwardRef(({ className, ...props }, ref) => {
+var CardHeader = React8.forwardRef(({ className, ...props }, ref) => {
   const size = useCardSize();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       ref,
@@ -518,7 +886,7 @@ var CardHeader = React5.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   "h3",
   {
     ref,
@@ -528,7 +896,7 @@ var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CardDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   "p",
   {
     ref,
@@ -538,7 +906,7 @@ var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var CardAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   "div",
   {
     ref,
@@ -548,9 +916,9 @@ var CardAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardAction.displayName = "CardAction";
-var CardContent = React5.forwardRef(({ className, ...props }, ref) => {
+var CardContent = React8.forwardRef(({ className, ...props }, ref) => {
   const size = useCardSize();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       ref,
@@ -561,9 +929,9 @@ var CardContent = React5.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React5.forwardRef(({ className, ...props }, ref) => {
+var CardFooter = React8.forwardRef(({ className, ...props }, ref) => {
   const size = useCardSize();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       ref,
@@ -581,13 +949,13 @@ CardFooter.displayName = "CardFooter";
 
 // src/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import * as React6 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var CHECKBOX_SIZES = {
   sm: { root: "h-3.5 w-3.5 rounded-xs", glyph: "h-3 w-3" },
   md: { root: "h-4 w-4 rounded-sm", glyph: "h-3.5 w-3.5" }
 };
-var Checkbox = React6.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx8(
+var Checkbox = React9.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx12(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -598,12 +966,12 @@ var Checkbox = React6.forwardRef(({ className, size = "md", ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx12(
       CheckboxPrimitive.Indicator,
       {
         "data-slot": "checkbox-indicator",
         className: "flex items-center justify-center text-current",
-        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx8(DividerHorizontalIcon, { className: CHECKBOX_SIZES[size].glyph }) : /* @__PURE__ */ jsx8(CheckIcon, { className: CHECKBOX_SIZES[size].glyph })
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx12(DividerHorizontalIcon, { className: CHECKBOX_SIZES[size].glyph }) : /* @__PURE__ */ jsx12(CheckIcon, { className: CHECKBOX_SIZES[size].glyph })
       }
     )
   }
@@ -619,35 +987,15 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // src/command.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
-import * as React9 from "react";
-
-// src/portal-container.tsx
-import * as React7 from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var PortalContainerContext = React7.createContext(
-  void 0
-);
-function PortalContainerProvider({
-  container,
-  children
-}) {
-  return /* @__PURE__ */ jsx9(PortalContainerContext.Provider, { value: container ?? void 0, children });
-}
-function usePortalContainer(explicit) {
-  const injected = React7.useContext(PortalContainerContext);
-  if (explicit !== void 0) {
-    return explicit ?? void 0;
-  }
-  return injected ?? void 0;
-}
+import * as React11 from "react";
 
 // src/use-is-mobile.ts
-import * as React8 from "react";
+import * as React10 from "react";
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React8.useState(false);
-  const [hasMounted, setHasMounted] = React8.useState(false);
-  React8.useEffect(() => {
+  const [isMobile, setIsMobile] = React10.useState(false);
+  const [hasMounted, setHasMounted] = React10.useState(false);
+  React10.useEffect(() => {
     setHasMounted(true);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -667,8 +1015,8 @@ function useIsMobile() {
 }
 
 // src/command.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var Command = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var Command = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   CommandPrimitive,
   {
     ref,
@@ -683,18 +1031,18 @@ Command.displayName = CommandPrimitive.displayName;
 var DIALOG_DESKTOP_CLASSES = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var CommandDialogContent = React9.forwardRef(({ className, children, container, ...props }, ref) => {
+var CommandDialogContent = React11.forwardRef(({ className, children, container, ...props }, ref) => {
   const isMobile = useIsMobile();
   const isModal = useRadixDialogModal();
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { container: portalContainer, children: [
-    isModal ? /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs5(DialogPrimitive.Portal, { container: portalContainer, children: [
+    isModal ? /* @__PURE__ */ jsx13(
       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"
       }
     ) : null,
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs5(
       DialogPrimitive.Content,
       {
         ref,
@@ -709,9 +1057,9 @@ var CommandDialogContent = React9.forwardRef(({ className, children, container,
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs3(DialogPrimitive.Close, { className: "absolute right-2 top-4 flex h-10 w-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4", children: [
-            /* @__PURE__ */ jsx10(XIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsxs5(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__ */ jsx13(XIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -725,21 +1073,21 @@ var CommandDialog = ({
   ...props
 }) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx10(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx10(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx13(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx13(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs5(
     CommandDialogContent,
     {
       className: "overflow-hidden p-0",
       ...container !== void 0 ? { container } : {},
       children: [
-        /* @__PURE__ */ jsx10(DialogPrimitive.Title, { className: "sr-only" }),
-        /* @__PURE__ */ jsx10(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+        /* @__PURE__ */ jsx13(DialogPrimitive.Title, { className: "sr-only" }),
+        /* @__PURE__ */ jsx13(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 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx10(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx10(
+var CommandInput = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx13(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx13(
     CommandPrimitive.Input,
     {
       ref,
@@ -752,7 +1100,7 @@ var CommandInput = React9.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandList = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   CommandPrimitive.List,
   {
     ref,
@@ -761,7 +1109,7 @@ var CommandList = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React9.forwardRef((props, ref) => /* @__PURE__ */ jsx10(
+var CommandEmpty = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx13(
   CommandPrimitive.Empty,
   {
     ref,
@@ -770,7 +1118,7 @@ var CommandEmpty = React9.forwardRef((props, ref) => /* @__PURE__ */ jsx10(
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandGroup = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   CommandPrimitive.Group,
   {
     ref,
@@ -782,7 +1130,7 @@ var CommandGroup = React9.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   CommandPrimitive.Separator,
   {
     ref,
@@ -791,7 +1139,7 @@ var CommandSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandItem = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   CommandPrimitive.Item,
   {
     ref,
@@ -807,7 +1155,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(
     "span",
     {
       className: cn(
@@ -822,8 +1170,8 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/context-menu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import * as React10 from "react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
@@ -834,7 +1182,7 @@ var SURFACE_CLASS = "z-50 min-w-[8rem] max-h-[var(--radix-context-menu-content-a
 var MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var ContextMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+var ContextMenuSubTrigger = React12.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -847,12 +1195,12 @@ var ContextMenuSubTrigger = React10.forwardRef(({ className, inset, children, ..
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx11(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx14(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var ContextMenuSubContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -862,9 +1210,9 @@ var ContextMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React10.forwardRef(({ className, container, ...props }, ref) => {
+var ContextMenuContent = React12.forwardRef(({ className, container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx11(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx14(
     ContextMenuPrimitive.Content,
     {
       ref,
@@ -875,7 +1223,7 @@ var ContextMenuContent = React10.forwardRef(({ className, container, ...props },
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+var ContextMenuItem = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx14(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -890,7 +1238,7 @@ var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+var ContextMenuCheckboxItem = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -898,13 +1246,13 @@ var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, ...prop
     className: cn(INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx14("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx14(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+var ContextMenuRadioItem = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -912,13 +1260,13 @@ var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }
     className: cn(INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx14("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx14(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+var ContextMenuLabel = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx14(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -932,7 +1280,7 @@ var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var ContextMenuSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -945,7 +1293,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx11(
+}) => /* @__PURE__ */ jsx14(
   "span",
   {
     "data-slot": "context-menu-shortcut",
@@ -963,15 +1311,15 @@ import {
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React11 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React11.forwardRef(
+var PopoverContent = React13.forwardRef(
   ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
     const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx15(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx15(
       PopoverPrimitive.Content,
       {
         ref,
@@ -995,7 +1343,7 @@ var PopoverContent = React11.forwardRef(
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/creatable-picker.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function article(noun) {
   return /^[aeiou]/i.test(noun.trim()) ? `an ${noun}` : `a ${noun}`;
 }
@@ -1070,8 +1418,8 @@ function CreatablePicker({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
-    /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
+    /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -1085,12 +1433,12 @@ function CreatablePicker({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
-          /* @__PURE__ */ jsx13(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+          /* @__PURE__ */ jsx16("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx16("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
+          /* @__PURE__ */ jsx16(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx13(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx16(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs7(
       Command,
       {
         filter: (itemValue, search, keywords) => {
@@ -1098,7 +1446,7 @@ function CreatablePicker({
           return haystack.includes(search.toLowerCase()) ? 1 : 0;
         },
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             CommandInput,
             {
               ref: inputRef,
@@ -1110,13 +1458,13 @@ function CreatablePicker({
               placeholder: searchPlaceholder ?? `Search or add ${article(noun)}\u2026`
             }
           ),
-          /* @__PURE__ */ jsxs5(CommandList, { children: [
-            /* @__PURE__ */ jsx13(CommandEmpty, { children: emptyLabel }),
-            groups.map((group) => /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs7(CommandList, { children: [
+            /* @__PURE__ */ jsx16(CommandEmpty, { children: emptyLabel }),
+            groups.map((group) => /* @__PURE__ */ jsx16(
               CommandGroup,
               {
                 ...group.heading === void 0 ? {} : { heading: group.heading },
-                children: group.options.map((option) => /* @__PURE__ */ jsxs5(
+                children: group.options.map((option) => /* @__PURE__ */ jsxs7(
                   CommandItem,
                   {
                     value: option.label,
@@ -1127,7 +1475,7 @@ function CreatablePicker({
                     },
                     className: "gap-2 text-xs",
                     children: [
-                      /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx16(
                         LucideCheckIcon,
                         {
                           className: cn(
@@ -1136,8 +1484,8 @@ function CreatablePicker({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
-                      option.hint ? /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
+                      /* @__PURE__ */ jsx16("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
+                      option.hint ? /* @__PURE__ */ jsx16("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
                     ]
                   },
                   option.value
@@ -1146,9 +1494,9 @@ function CreatablePicker({
               group.heading ?? "__ungrouped__"
             ))
           ] }),
-          canCreate ? /* @__PURE__ */ jsxs5("div", { className: "space-y-1 border-t border-border p-1", children: [
-            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx13("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
-            /* @__PURE__ */ jsxs5(
+          canCreate ? /* @__PURE__ */ jsxs7("div", { className: "space-y-1 border-t border-border p-1", children: [
+            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx16("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
+            /* @__PURE__ */ jsxs7(
               "button",
               {
                 type: "button",
@@ -1156,22 +1504,22 @@ function CreatablePicker({
                 onClick: () => void create(typed),
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50",
                 children: [
-                  busy ? /* @__PURE__ */ jsx13(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx13(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
+                  busy ? /* @__PURE__ */ jsx16(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx16(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx16("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
                 ]
               }
             ),
-            needsName ? /* @__PURE__ */ jsxs5("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
+            needsName ? /* @__PURE__ */ jsxs7("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
               "Type the name of the ",
               noun,
               " you want to add \u2014 then this creates it."
             ] }) : null
           ] }) : null,
-          footerActions?.length || manageAction ? /* @__PURE__ */ jsxs5("div", { className: "space-y-0.5 border-t border-border p-1", children: [
+          footerActions?.length || manageAction ? /* @__PURE__ */ jsxs7("div", { className: "space-y-0.5 border-t border-border p-1", children: [
             footerActions?.map((action) => {
               const Icon2 = action.icon;
-              return /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsxs5(
+              return /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsxs7(
                   "button",
                   {
                     type: "button",
@@ -1181,15 +1529,15 @@ function CreatablePicker({
                     },
                     className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                     children: [
-                      Icon2 ? /* @__PURE__ */ jsx13(Icon2, { className: "size-3.5 shrink-0" }) : null,
-                      /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: action.label })
+                      Icon2 ? /* @__PURE__ */ jsx16(Icon2, { className: "size-3.5 shrink-0" }) : null,
+                      /* @__PURE__ */ jsx16("span", { className: "min-w-0 truncate", children: action.label })
                     ]
                   }
                 ),
-                action.note ? /* @__PURE__ */ jsx13("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
+                action.note ? /* @__PURE__ */ jsx16("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
               ] }, action.label);
             }),
-            manageAction ? /* @__PURE__ */ jsxs5(
+            manageAction ? /* @__PURE__ */ jsxs7(
               "a",
               {
                 href: manageAction.href,
@@ -1198,18 +1546,18 @@ function CreatablePicker({
                 onClick: close,
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                 children: [
-                  /* @__PURE__ */ jsx13(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: manageAction.label })
+                  /* @__PURE__ */ jsx16(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx16("span", { className: "min-w-0 truncate", children: manageAction.label })
                 ]
               }
             ) : null
           ] }) : null,
-          lockedNote ? /* @__PURE__ */ jsxs5("div", { className: "space-y-1 border-t border-border p-2", children: [
-            /* @__PURE__ */ jsxs5("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
-              /* @__PURE__ */ jsx13(LockIcon, { className: "mt-px size-3 shrink-0" }),
-              /* @__PURE__ */ jsx13("span", { children: lockedNote })
+          lockedNote ? /* @__PURE__ */ jsxs7("div", { className: "space-y-1 border-t border-border p-2", children: [
+            /* @__PURE__ */ jsxs7("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
+              /* @__PURE__ */ jsx16(LockIcon, { className: "mt-px size-3 shrink-0" }),
+              /* @__PURE__ */ jsx16("span", { children: lockedNote })
             ] }),
-            lockedAction ? /* @__PURE__ */ jsxs5(
+            lockedAction ? /* @__PURE__ */ jsxs7(
               "button",
               {
                 type: "button",
@@ -1219,8 +1567,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__ */ jsx13(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: lockedAction.label })
+                  /* @__PURE__ */ jsx16(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx16("span", { className: "min-w-0 truncate", children: lockedAction.label })
                 ]
               }
             ) : null
@@ -1234,15 +1582,15 @@ function CreatablePicker({
 // src/dialog.tsx
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import * as VisuallyHidden2 from "@radix-ui/react-visually-hidden";
-import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
-import * as React12 from "react";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { treeContainsComponent as treeContainsComponent3 } from "@ai-matrx/kit/react-tree";
+import * as React14 from "react";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var Dialog = ({
   children,
   ...props
 }) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx14(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx14(DialogPrimitive2.Root, { ...props, modal, children }) });
+  return /* @__PURE__ */ jsx17(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx17(DialogPrimitive2.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
 var DialogTrigger = DialogPrimitive2.Trigger;
@@ -1252,12 +1600,12 @@ var DialogPortal = ({
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ jsx14(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ jsx17(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
 };
 DialogPortal.displayName = "DialogPortal";
-var DialogContainerContext = React12.createContext(null);
-var useDialogContainer = () => React12.useContext(DialogContainerContext);
-var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var DialogContainerContext = React14.createContext(null);
+var useDialogContainer = () => React14.useContext(DialogContainerContext);
+var DialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -1272,9 +1620,9 @@ var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive2.Overlay.displayName;
-var DialogContentPrimitive = React12.forwardRef((props, ref) => {
+var DialogContentPrimitive = React14.forwardRef((props, ref) => {
   const isModal = useRadixDialogModal();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     DialogPrimitive2.Content,
     {
       ...props,
@@ -1287,7 +1635,7 @@ DialogContentPrimitive.displayName = "DialogContentPrimitive";
 var DIALOG_DESKTOP_CLASSES2 = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var DialogContent = React12.forwardRef(
+var DialogContent = React14.forwardRef(
   ({
     className,
     children,
@@ -1300,10 +1648,10 @@ var DialogContent = React12.forwardRef(
     const isModal = useRadixDialogModal();
     const injectedContainer = usePortalContainer(container);
     const asSheet = mobileSheet && isMobile;
-    const [containerEl, setContainerEl] = React12.useState(
+    const [containerEl, setContainerEl] = React14.useState(
       null
     );
-    const mergedRef = React12.useCallback(
+    const mergedRef = React14.useCallback(
       (node) => {
         setContainerEl(node);
         if (typeof ref === "function") ref(node);
@@ -1312,11 +1660,11 @@ var DialogContent = React12.forwardRef(
       },
       [ref]
     );
-    const hasTitle = treeContainsComponent(children, DialogTitle) || treeContainsComponent(children, DialogPrimitive2.Title);
-    const hasDescription = treeContainsComponent(children, DialogDescription) || treeContainsComponent(children, DialogPrimitive2.Description);
-    return /* @__PURE__ */ jsxs6(DialogPortal, { container, children: [
-      isModal ? /* @__PURE__ */ jsx14(DialogOverlay, {}) : null,
-      /* @__PURE__ */ jsxs6(
+    const hasTitle = treeContainsComponent3(children, DialogTitle) || treeContainsComponent3(children, DialogPrimitive2.Title);
+    const hasDescription = treeContainsComponent3(children, DialogDescription) || treeContainsComponent3(children, DialogPrimitive2.Description);
+    return /* @__PURE__ */ jsxs8(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ jsx17(DialogOverlay, {}) : null,
+      /* @__PURE__ */ jsxs8(
         DialogContentPrimitive,
         {
           ref: mergedRef,
@@ -1334,23 +1682,23 @@ var DialogContent = React12.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            hasTitle ? null : /* @__PURE__ */ jsx14(VisuallyHidden2.Root, { children: /* @__PURE__ */ jsx14(DialogPrimitive2.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ jsx14(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx14(
+            hasTitle ? null : /* @__PURE__ */ jsx17(VisuallyHidden2.Root, { children: /* @__PURE__ */ jsx17(DialogPrimitive2.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ jsx17(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx17(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
             ) }),
-            showCloseButton ? /* @__PURE__ */ jsxs6(
+            showCloseButton ? /* @__PURE__ */ jsxs8(
               DialogPrimitive2.Close,
               {
                 "data-slot": "dialog-close",
                 "aria-label": "Close",
                 className: "absolute right-2 top-4 flex h-11 w-11 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4 lg:h-10 lg:w-10",
                 children: [
-                  /* @__PURE__ */ jsx14(XIcon, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
+                  /* @__PURE__ */ jsx17(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Close" })
                 ]
               }
             ) : null
@@ -1364,7 +1712,7 @@ DialogContent.displayName = DialogPrimitive2.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx14(
+}) => /* @__PURE__ */ jsx17(
   "div",
   {
     "data-slot": "dialog-header",
@@ -1381,7 +1729,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx14(
+}) => /* @__PURE__ */ jsx17(
   "div",
   {
     "data-slot": "dialog-footer",
@@ -1395,7 +1743,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var DialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive2.Title,
   {
     ref,
@@ -1405,7 +1753,7 @@ var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive2.Title.displayName;
-var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive2.Description,
   {
     ref,
@@ -1418,8 +1766,8 @@ DialogDescription.displayName = DialogPrimitive2.Description.displayName;
 
 // src/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as React13 from "react";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -1430,7 +1778,7 @@ var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-men
 var MENU_MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var DropdownMenuSubTrigger = React15.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -1443,12 +1791,12 @@ var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx15(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx18(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -1458,9 +1806,9 @@ var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+var DropdownMenuContent = React15.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx18(
     DropdownMenuPrimitive.Content,
     {
       ref,
@@ -1477,7 +1825,7 @@ var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, conta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+var DropdownMenuItem = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1487,7 +1835,7 @@ var DropdownMenuItem = React13.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var DropdownMenuCheckboxItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -1495,13 +1843,13 @@ var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, ...pro
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var DropdownMenuRadioItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -1509,13 +1857,13 @@ var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+var DropdownMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1525,7 +1873,7 @@ var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var DropdownMenuSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -1538,7 +1886,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsx18(
   "span",
   {
     "data-slot": "dropdown-menu-shortcut",
@@ -1550,7 +1898,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 jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function EditableLabel({
   value,
   onCommit,
@@ -1657,8 +2005,8 @@ function EditableLabel({
     setEditing
   ]);
   if (editing) {
-    return /* @__PURE__ */ jsxs8("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
-      /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs10("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
+      /* @__PURE__ */ jsx19(
         "input",
         {
           ref: inputRef,
@@ -1698,12 +2046,12 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ jsx16(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
-      error && /* @__PURE__ */ jsx16("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+      busy && /* @__PURE__ */ jsx19(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ jsx19("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
   if (controlled) return null;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -1737,8 +2085,8 @@ function EditableLabel({
 }
 
 // src/input.tsx
-import * as React14 from "react";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as React16 from "react";
+import { jsx as jsx20, jsxs as jsxs11 } 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
@@ -1766,9 +2114,9 @@ var getVariantStyles = (variant = "default") => {
       return baseStyles;
   }
 };
-var Input = React14.forwardRef(
+var Input = React16.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx20(
       "input",
       {
         type,
@@ -1780,7 +2128,7 @@ var Input = React14.forwardRef(
   }
 );
 Input.displayName = "Input";
-var EnterInput = React14.forwardRef(
+var EnterInput = React16.forwardRef(
   ({ onEnter, ...props }, ref) => {
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && onEnter) {
@@ -1788,7 +2136,7 @@ var EnterInput = React14.forwardRef(
         onEnter();
       }
     };
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx20(
       Input,
       {
         ...props,
@@ -1804,11 +2152,11 @@ var EnterInput = React14.forwardRef(
   }
 );
 EnterInput.displayName = "EnterInput";
-var BasicInput = React14.forwardRef(
+var BasicInput = React16.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__ */ jsx17(
+    return /* @__PURE__ */ jsx20(
       "input",
       {
         type,
@@ -1823,10 +2171,10 @@ var BasicInput = React14.forwardRef(
   }
 );
 BasicInput.displayName = "BasicInput";
-var InputWithPrefix = React14.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs9("div", { className: cn("relative", wrapperClassName), children: [
-    prefix && /* @__PURE__ */ jsx17("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
-    /* @__PURE__ */ jsx17(
+var InputWithPrefix = React16.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs11("div", { className: cn("relative", wrapperClassName), children: [
+    prefix && /* @__PURE__ */ jsx20("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ jsx20(
       Input,
       {
         ref,
@@ -1840,9 +2188,9 @@ InputWithPrefix.displayName = "InputWithPrefix";
 
 // src/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React15 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Label3 = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+import * as React17 from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Label3 = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
   LabelPrimitive.Root,
   {
     ref,
@@ -1857,7 +2205,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 jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var GAP_PX = 6;
 var TONE = {
   default: "border border-border bg-background hover:bg-accent text-foreground",
@@ -1879,16 +2227,16 @@ function ToolbarButton({
     action.hideLabel && !action.running ? "w-7 justify-center px-0" : "px-2",
     TONE[tone]
   );
-  const inner = /* @__PURE__ */ jsxs10(Fragment, { children: [
-    /* @__PURE__ */ jsx19(
+  const inner = /* @__PURE__ */ jsxs12(Fragment, { children: [
+    /* @__PURE__ */ jsx22(
       Icon2,
       {
         className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
       }
     ),
-    showLabel && /* @__PURE__ */ jsx19("span", { children: text })
+    showLabel && /* @__PURE__ */ jsx22("span", { children: text })
   ] });
-  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx19(
+  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx22(
     "a",
     {
       href: action.href,
@@ -1898,7 +2246,7 @@ function ToolbarButton({
       "aria-label": action.label,
       children: inner
     }
-  ) : /* @__PURE__ */ jsx19(
+  ) : /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -1910,12 +2258,12 @@ function ToolbarButton({
     }
   );
   if (enableTooltip && action.hideLabel && renderTooltip) {
-    return /* @__PURE__ */ jsx19(Fragment, { children: renderTooltip(control, action.label) });
+    return /* @__PURE__ */ jsx22(Fragment, { children: renderTooltip(control, action.label) });
   }
   return control;
 }
 function OverflowTrigger({ ariaLabel }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -1926,7 +2274,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__ */ jsx19(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+      children: /* @__PURE__ */ jsx22(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
     }
   );
 }
@@ -1986,22 +2334,22 @@ function OverflowToolbar({
   }, [signature, leading != null]);
   const shown = visibleActions.slice(0, visibleCount);
   const hidden = visibleActions.slice(visibleCount);
-  return /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ jsxs12(
       "div",
       {
         ref: ghostRef,
         "aria-hidden": true,
         className: "pointer-events-none absolute left-0 top-0 flex items-center gap-1.5 opacity-0",
         children: [
-          visibleActions.map((a) => /* @__PURE__ */ jsx19(ToolbarButton, { action: a }, a.id)),
-          /* @__PURE__ */ jsx19(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+          visibleActions.map((a) => /* @__PURE__ */ jsx22(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ jsx22(OverflowTrigger, { ariaLabel: overflowAriaLabel })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-1.5", children: [
-      leading != null && /* @__PURE__ */ jsx19("span", { ref: leadingRef, className: "shrink-0", children: leading }),
-      shown.map((a) => /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-1.5", children: [
+      leading != null && /* @__PURE__ */ jsx22("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ jsx22(
         ToolbarButton,
         {
           action: a,
@@ -2012,7 +2360,7 @@ function OverflowToolbar({
       )),
       hidden.length > 0 && renderOverflowMenu({
         actions: hidden,
-        trigger: /* @__PURE__ */ jsx19(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        trigger: /* @__PURE__ */ jsx22(OverflowTrigger, { ariaLabel: overflowAriaLabel })
       })
     ] })
   ] });
@@ -2020,20 +2368,20 @@ function OverflowToolbar({
 
 // src/progress.tsx
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React17 from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var PROGRESS_TONES = {
   default: "bg-primary",
   success: "bg-success",
   warning: "bg-warning",
   destructive: "bg-destructive"
 };
-var Progress = React17.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
+var Progress = React19.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
   const { value, max } = props;
   const ceiling = max ?? 100;
   const isIndeterminate = value === null || value === void 0;
   const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / ceiling * 100));
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23(
     ProgressPrimitive.Root,
     {
       ref,
@@ -2043,7 +2391,7 @@ var Progress = React17.forwardRef(({ className, tone = "default", indicatorClass
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx23(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -2063,9 +2411,9 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React18 from "react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var ScrollArea = React18.forwardRef(
+import * as React20 from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+var ScrollArea = React20.forwardRef(
   ({
     className,
     children,
@@ -2074,7 +2422,7 @@ var ScrollArea = React18.forwardRef(
     scrollBarClassName,
     orientation = "vertical",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs11(
+  }, ref) => /* @__PURE__ */ jsxs13(
     ScrollAreaPrimitive.Root,
     {
       ref,
@@ -2082,7 +2430,7 @@ var ScrollArea = React18.forwardRef(
       className: cn("relative overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx24(
           ScrollAreaPrimitive.Viewport,
           {
             ref: viewportRef,
@@ -2091,14 +2439,14 @@ var ScrollArea = React18.forwardRef(
             children
           }
         ),
-        /* @__PURE__ */ jsx21(ScrollBar, { orientation, className: scrollBarClassName }),
-        /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx24(ScrollBar, { orientation, className: scrollBarClassName }),
+        /* @__PURE__ */ jsx24(ScrollAreaPrimitive.Corner, {})
       ]
     }
   )
 );
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React18.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx21(
+var ScrollBar = React20.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx24(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -2111,7 +2459,7 @@ var ScrollBar = React18.forwardRef(({ className, orientation = "vertical", ...pr
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx21(
+    children: /* @__PURE__ */ jsx24(
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         "data-slot": "scroll-area-thumb",
@@ -2123,7 +2471,7 @@ var ScrollBar = React18.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/score-ring.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_SCORE_THRESHOLDS = {
   good: 75,
   warning: 50
@@ -2154,7 +2502,7 @@ function ScoreRing({
   const circumference = 2 * Math.PI * radius;
   const boundedPct = pct === null ? 0 : Math.max(0, Math.min(100, pct));
   const dashOffset = circumference * (1 - boundedPct / 100);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn(
@@ -2165,8 +2513,8 @@ function ScoreRing({
       role: "img",
       "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
       children: [
-        /* @__PURE__ */ jsxs12("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-          /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ jsx25(
             "circle",
             {
               cx: "50",
@@ -2177,7 +2525,7 @@ function ScoreRing({
               fill: "none"
             }
           ),
-          pct !== null ? /* @__PURE__ */ jsx22(
+          pct !== null ? /* @__PURE__ */ jsx25(
             "circle",
             {
               cx: "50",
@@ -2196,8 +2544,8 @@ function ScoreRing({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "absolute flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs14("div", { className: "absolute flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx25(
             "span",
             {
               className: cn(
@@ -2207,7 +2555,7 @@ function ScoreRing({
               children: pct === null ? "\u2014" : `${pct}${suffix}`
             }
           ),
-          label ? /* @__PURE__ */ jsx22("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+          label ? /* @__PURE__ */ jsx25("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
         ] })
       ]
     }
@@ -2215,7 +2563,7 @@ function ScoreRing({
 }
 
 // src/segmented-control.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onValueChange,
@@ -2230,7 +2578,7 @@ function SegmentedControl({
     md: "h-9 text-sm",
     lg: "h-10 text-base"
   };
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
@@ -2241,7 +2589,7 @@ function SegmentedControl({
       role: "tablist",
       children: data.map((option) => {
         const isActive = value === option.value;
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
@@ -2267,13 +2615,13 @@ function SegmentedControl({
 
 // src/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { cva as cva3 } from "class-variance-authority";
-import * as React19 from "react";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { cva as cva4 } from "class-variance-authority";
+import * as React21 from "react";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var selectTriggerVariants = cva3(
+var selectTriggerVariants = cva4(
   "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground transition-colors hover:bg-accent hover:border-accent-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
   {
     variants: {
@@ -2288,7 +2636,7 @@ var selectTriggerVariants = cva3(
     }
   }
 );
-var SelectTrigger = React19.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var SelectTrigger = React21.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs15(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2296,12 +2644,12 @@ var SelectTrigger = React19.forwardRef(({ className, children, hideArrow = false
     ...props,
     children: [
       children,
-      !hideArrow && /* @__PURE__ */ jsx24(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx24(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+      !hideArrow && /* @__PURE__ */ jsx27(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx27(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var SelectScrollUpButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -2310,11 +2658,11 @@ var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx24(RadixChevronUpIcon, {})
+    children: /* @__PURE__ */ jsx27(RadixChevronUpIcon, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var SelectScrollDownButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -2323,13 +2671,13 @@ var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx24(RadixChevronDownIcon, {})
+    children: /* @__PURE__ */ jsx27(RadixChevronDownIcon, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React19.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
+var SelectContent = React21.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ jsx24(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx27(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs15(
     SelectPrimitive.Content,
     {
       ref,
@@ -2341,8 +2689,8 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
       position,
       ...props,
       children: [
-        /* @__PURE__ */ jsx24(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx27(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx27(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -2352,13 +2700,13 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
             children
           }
         ),
-        /* @__PURE__ */ jsx24(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx27(SelectScrollDownButton, {})
       ]
     }
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   SelectPrimitive.Label,
   {
     ref,
@@ -2367,7 +2715,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React19.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var SelectItem = React21.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs15(
   SelectPrimitive.Item,
   {
     ref,
@@ -2378,14 +2726,14 @@ var SelectItem = React19.forwardRef(({ className, children, description, ...prop
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx24("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx24(SelectPrimitive.ItemText, { children }),
-      description ? /* @__PURE__ */ jsx24("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsx27("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx27(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx27(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx27(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ jsx27("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var SelectSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2397,9 +2745,9 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React20 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var Separator4 = React20.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx25(
+import * as React22 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Separator4 = React22.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx28(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -2417,13 +2765,13 @@ Separator4.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { treeContainsComponent as treeContainsComponent2 } from "@ai-matrx/kit/react-tree";
-import { cva as cva4 } from "class-variance-authority";
-import * as React21 from "react";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
-var SheetContentBase = React21.forwardRef(({ ...props }, ref) => {
+import { treeContainsComponent as treeContainsComponent4 } from "@ai-matrx/kit/react-tree";
+import { cva as cva5 } from "class-variance-authority";
+import * as React23 from "react";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var SheetContentBase = React23.forwardRef(({ ...props }, ref) => {
   const isModal = useRadixDialogModal();
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     SheetPrimitive.Content,
     {
       ...props,
@@ -2433,15 +2781,15 @@ var SheetContentBase = React21.forwardRef(({ ...props }, ref) => {
   );
 });
 SheetContentBase.displayName = "SheetContentBase";
-var Sheet = React21.forwardRef(({ children, ...props }, _ref) => {
+var Sheet = React23.forwardRef(({ children, ...props }, _ref) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx26(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx26(SheetPrimitive.Root, { ...props, modal, children }) });
+  return /* @__PURE__ */ jsx29(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx29(SheetPrimitive.Root, { ...props, modal, children }) });
 });
 Sheet.displayName = "Sheet";
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var SheetOverlay = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -2453,7 +2801,7 @@ var SheetOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var sheetVariants = cva4(
+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",
   {
     variants: {
@@ -2470,7 +2818,7 @@ var sheetVariants = cva4(
     }
   }
 );
-var SheetDescription = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var SheetDescription = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SheetPrimitive.Description,
   {
     ref,
@@ -2479,7 +2827,7 @@ var SheetDescription = React21.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-var SheetContent = React21.forwardRef(
+var SheetContent = React23.forwardRef(
   ({
     side = "right",
     className,
@@ -2489,10 +2837,10 @@ var SheetContent = React21.forwardRef(
     overlayClassName,
     ...props
   }, ref) => {
-    const hasDescription = treeContainsComponent2(children, SheetDescription) || treeContainsComponent2(children, SheetPrimitive.Description);
-    return /* @__PURE__ */ jsxs14(SheetPortal, { children: [
-      !hideOverlay && /* @__PURE__ */ jsx26(SheetOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ jsxs14(
+    const hasDescription = treeContainsComponent4(children, SheetDescription) || treeContainsComponent4(children, SheetPrimitive.Description);
+    return /* @__PURE__ */ jsxs16(SheetPortal, { children: [
+      !hideOverlay && /* @__PURE__ */ jsx29(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs16(
         SheetContentBase,
         {
           ref,
@@ -2500,9 +2848,9 @@ var SheetContent = React21.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            !hideCloseButton && /* @__PURE__ */ jsxs14(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-              /* @__PURE__ */ jsx26(Cross2Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
+            !hideCloseButton && /* @__PURE__ */ jsxs16(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__ */ jsx29(Cross2Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Close" })
             ] }),
             children
           ]
@@ -2515,7 +2863,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx26(
+}) => /* @__PURE__ */ jsx29(
   "div",
   {
     className: cn(
@@ -2529,7 +2877,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx26(
+}) => /* @__PURE__ */ jsx29(
   "div",
   {
     className: cn(
@@ -2540,7 +2888,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var SheetTitle = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SheetPrimitive.Title,
   {
     ref,
@@ -2551,12 +2899,12 @@ var SheetTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/skeleton.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-primary/10", className),
@@ -2567,8 +2915,8 @@ function Skeleton({
 
 // src/switch.tsx
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React22 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import * as React24 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SWITCH_SIZES = {
   sm: {
     root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
@@ -2579,7 +2927,7 @@ var SWITCH_SIZES = {
     thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
   }
 };
-var Switch = React22.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx28(
+var Switch = React24.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx31(
   SwitchPrimitives.Root,
   {
     ref,
@@ -2590,7 +2938,7 @@ var Switch = React22.forwardRef(({ className, size = "md", ...props }, ref) => /
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx31(
       SwitchPrimitives.Thumb,
       {
         "data-slot": "switch-thumb",
@@ -2606,7 +2954,7 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/tabbed-bottom-sheet.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function TabbedBottomSheet({
   open,
   onOpenChange,
@@ -2620,15 +2968,15 @@ function TabbedBottomSheet({
     if (open) setSelectedTabId(null);
   }
   const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     BottomSheet,
     {
       open,
       onOpenChange,
       title,
       size: "full",
-      children: /* @__PURE__ */ jsxs15("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsxs17("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx32(
           BottomSheetHeader,
           {
             title: selectedTab ? selectedTab.label : title,
@@ -2636,19 +2984,19 @@ function TabbedBottomSheet({
             onBack: () => setSelectedTabId(null)
           }
         ),
-        selectedTab ? /* @__PURE__ */ jsx29("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx29(BottomSheetBody, { children: /* @__PURE__ */ jsx29("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+        selectedTab ? /* @__PURE__ */ jsx32("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx32(BottomSheetBody, { children: /* @__PURE__ */ jsx32("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
           const Icon2 = tab.icon;
-          return /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs15(
+          return /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsxs17(
             "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__ */ jsx29(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
-                /* @__PURE__ */ jsx29("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                Icon2 ? /* @__PURE__ */ jsx32(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ jsx32("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
                 tab.trailing,
-                /* @__PURE__ */ jsx29(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+                /* @__PURE__ */ jsx32(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
               ]
             }
           ) }, tab.id);
@@ -2659,19 +3007,19 @@ function TabbedBottomSheet({
 }
 
 // src/table.tsx
-import * as React23 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import * as React25 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var TABLE_SIZES = {
   sm: { head: "px-2", cell: "p-2" },
   md: { head: "px-3", cell: "p-3" }
 };
-var TableSizeContext = React23.createContext("md");
+var TableSizeContext = React25.createContext("md");
 function useTableSize() {
-  return React23.useContext(TableSizeContext);
+  return React25.useContext(TableSizeContext);
 }
-var Table = React23.forwardRef(
+var Table = React25.forwardRef(
   ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
-    const table = /* @__PURE__ */ jsx30(
+    const table = /* @__PURE__ */ jsx33(
       "table",
       {
         ref,
@@ -2681,7 +3029,7 @@ var Table = React23.forwardRef(
         ...props
       }
     );
-    return /* @__PURE__ */ jsx30(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx33(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ jsx33(
       "div",
       {
         "data-slot": "table-wrapper",
@@ -2692,7 +3040,7 @@ var Table = React23.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React23.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx30(
+var TableHeader = React25.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx33(
   "thead",
   {
     ref,
@@ -2706,7 +3054,7 @@ var TableHeader = React23.forwardRef(({ className, sticky = false, ...props }, r
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var TableBody = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "tbody",
   {
     ref,
@@ -2716,7 +3064,7 @@ var TableBody = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var TableFooter = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "tfoot",
   {
     ref,
@@ -2729,7 +3077,7 @@ var TableFooter = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var TableRow = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "tr",
   {
     ref,
@@ -2742,9 +3090,9 @@ var TableRow = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React23.forwardRef(({ className, ...props }, ref) => {
+var TableHead = React25.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33(
     "th",
     {
       ref,
@@ -2759,9 +3107,9 @@ var TableHead = React23.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React23.forwardRef(({ className, ...props }, ref) => {
+var TableCell = React25.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33(
     "td",
     {
       ref,
@@ -2776,7 +3124,7 @@ var TableCell = React23.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var TableCaption = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "caption",
   {
     ref,
@@ -2789,11 +3137,11 @@ TableCaption.displayName = "TableCaption";
 
 // src/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React24 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
 var TABS_TRIGGER_BASE = "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
-var TabsList = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsList = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   TabsPrimitive.List,
   {
     ref,
@@ -2806,7 +3154,7 @@ var TabsList = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsTrigger = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -2820,7 +3168,7 @@ var TabsTrigger = React24.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsTriggerCore = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsTriggerCore = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -2830,7 +3178,7 @@ var TabsTriggerCore = React24.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 TabsTriggerCore.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   TabsPrimitive.Content,
   {
     ref,
@@ -2846,8 +3194,8 @@ var TabsContent = React24.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/textarea.tsx
-import * as React25 from "react";
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { jsx as jsx35, jsxs as jsxs18 } 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) {
@@ -2860,7 +3208,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) {
-  React25.useEffect(() => {
+  React27.useEffect(() => {
     if (!autoGrow || !ref.current) return;
     const textarea = ref.current;
     textarea.style.height = "auto";
@@ -2876,8 +3224,8 @@ function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
   }, [value, autoGrow, minHeight, maxHeight, ref]);
 }
 function useMergedTextareaRef(forwarded) {
-  const internal = React25.useRef(null);
-  const callback = React25.useCallback(
+  const internal = React27.useRef(null);
+  const callback = React27.useCallback(
     (node) => {
       internal.current = node;
       if (typeof forwarded === "function") forwarded(node);
@@ -2894,13 +3242,13 @@ function boxStyle(minHeight, maxHeight) {
     maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
 }
-var Textarea = React25.forwardRef(
+var Textarea = React27.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, wrapperClassName, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     const stretchClasses = getStretchClasses(className);
     const needsWrapper = Boolean(wrapperClassName || stretchClasses);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    const textarea = /* @__PURE__ */ jsx32(
+    const textarea = /* @__PURE__ */ jsx35(
       "textarea",
       {
         ref: callback,
@@ -2916,15 +3264,15 @@ var Textarea = React25.forwardRef(
       }
     );
     if (!needsWrapper) return textarea;
-    return /* @__PURE__ */ jsx32("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
+    return /* @__PURE__ */ jsx35("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
   }
 );
 Textarea.displayName = "Textarea";
-var BasicTextarea = React25.forwardRef(
+var BasicTextarea = React27.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx35(
       "textarea",
       {
         ref: callback,
@@ -2942,7 +3290,7 @@ var BasicTextarea = React25.forwardRef(
   }
 );
 BasicTextarea.displayName = "BasicTextarea";
-var TextareaWithPrefix = React25.forwardRef(
+var TextareaWithPrefix = React27.forwardRef(
   ({
     prefix,
     className,
@@ -2954,13 +3302,13 @@ var TextareaWithPrefix = React25.forwardRef(
   }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         className: cn("relative", getStretchClasses(className), wrapperClassName),
         children: [
-          prefix ? /* @__PURE__ */ jsx32("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
-          /* @__PURE__ */ jsx32(
+          prefix ? /* @__PURE__ */ jsx35("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
+          /* @__PURE__ */ jsx35(
             "textarea",
             {
               ref: callback,
@@ -3036,7 +3384,325 @@ function useScrollFade() {
     }
   };
 }
+
+// src/hover-card.tsx
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React28 from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React28.forwardRef(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx36(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx36(
+    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
+    }
+  ) });
+});
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+// src/radio-group.tsx
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React29 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var RadioGroupSizeContext = React29.createContext("md");
+var CONTROL_CLASSES = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var DOT_CLASSES = {
+  sm: "h-1 w-1",
+  md: "h-1.5 w-1.5",
+  lg: "h-2 w-2"
+};
+var RadioGroup3 = React29.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx37(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx37(
+  RadioGroupPrimitive.Root,
+  {
+    ref,
+    "data-slot": "radio-group",
+    className: cn("grid gap-2", className),
+    ...props
+  }
+) }));
+RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React29.forwardRef(({ className, size, ...props }, ref) => {
+  const groupSize = React29.useContext(RadioGroupSizeContext);
+  const resolved = size ?? groupSize;
+  return /* @__PURE__ */ jsx37(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      "data-slot": "radio-group-item",
+      className: cn(
+        "relative aspect-square shrink-0 rounded-full border border-primary shadow",
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
+        // Ruling 2 — invisible 44px target on touch, layout untouched.
+        "after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']",
+        "pointer-coarse:after:h-11 pointer-coarse:after:w-11",
+        CONTROL_CLASSES[resolved],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx37(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx37(
+        "div",
+        {
+          className: cn("rounded-full bg-primary-foreground", DOT_CLASSES[resolved])
+        }
+      ) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+// src/resizable.tsx
+import { Group as Group4, Panel, Separator as Separator5 } from "react-resizable-panels";
+import { jsx as jsx38 } 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",
+  md: "w-1.5 [&[aria-orientation=horizontal]]:h-1.5 [&[aria-orientation=horizontal]]:w-full",
+  lg: "w-2 [&[aria-orientation=horizontal]]:h-2 [&[aria-orientation=horizontal]]:w-full",
+  xl: "w-3 [&[aria-orientation=horizontal]]:h-3 [&[aria-orientation=horizontal]]:w-full",
+  "2xl": "w-4 [&[aria-orientation=horizontal]]:h-4 [&[aria-orientation=horizontal]]:w-full",
+  "3xl": "w-6 [&[aria-orientation=horizontal]]:h-6 [&[aria-orientation=horizontal]]:w-full",
+  "4xl": "w-8 [&[aria-orientation=horizontal]]:h-8 [&[aria-orientation=horizontal]]:w-full"
+};
+var ResizablePanelGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx38(
+  Group4,
+  {
+    "data-slot": "resizable-group",
+    className: cn("flex h-full w-full", className),
+    ...props
+  }
+);
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+var ResizablePanel = Panel;
+var ResizableHandle = ({
+  withHandle,
+  size = "sm",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx38(
+  Separator5,
+  {
+    "data-slot": "resizable-handle",
+    className: cn(
+      "group/handle relative flex shrink-0 items-center justify-center bg-border transition-colors",
+      // Invisible hit target centered on the line; wider still on touch.
+      "after:absolute after:inset-y-0 after:left-1/2 after:w-1.5 after:-translate-x-1/2 after:content-['']",
+      "pointer-coarse:after:w-11",
+      "[&[aria-orientation=horizontal]]:after:inset-x-0 [&[aria-orientation=horizontal]]:after:left-0 [&[aria-orientation=horizontal]]:after:top-1/2 [&[aria-orientation=horizontal]]:after:h-1.5 [&[aria-orientation=horizontal]]:after:w-full [&[aria-orientation=horizontal]]:after:-translate-x-0 [&[aria-orientation=horizontal]]:after:-translate-y-1/2",
+      "pointer-coarse:[&[aria-orientation=horizontal]]:after:h-11",
+      // The drag-outline bug: suppress for ALL focus, restore for keyboard.
+      "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+      // Library-driven state feedback.
+      "data-[separator=hover]:bg-primary data-[separator=active]:bg-primary",
+      HANDLE_SIZES[size],
+      "cursor-col-resize [&[aria-orientation=horizontal]]:cursor-row-resize",
+      className
+    ),
+    ...props,
+    children: withHandle ? /* @__PURE__ */ jsx38("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__ */ jsx38(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 React30 from "react";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+var TRACK_CLASSES = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2.5"
+};
+var THUMB_CLASSES = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var Slider = React30.forwardRef(({ className, size = "md", ...props }, ref) => {
+  const thumbCount = Math.max(
+    1,
+    (props.value ?? props.defaultValue ?? [0]).length
+  );
+  return /* @__PURE__ */ jsxs19(
+    SliderPrimitive.Root,
+    {
+      ref,
+      "data-slot": "slider",
+      className: cn(
+        "relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx39(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "relative w-full grow overflow-hidden rounded-full bg-primary/20",
+              TRACK_CLASSES[size],
+              "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx39(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: "absolute h-full bg-primary data-[orientation=vertical]:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx39(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: cn(
+              "relative block cursor-grab rounded-full border border-primary/50 bg-background shadow transition-colors active:cursor-grabbing",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+              // Ruling 1 — invisible 44px target, coarse pointers only, so a
+              // dense desktop row keeps its exact hit behaviour.
+              "after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']",
+              "pointer-coarse:after:h-11 pointer-coarse:after:w-11",
+              THUMB_CLASSES[size]
+            )
+          },
+          index
+        ))
+      ]
+    }
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+// src/toggle.tsx
+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 React31 from "react";
+import { jsx as jsx40 } 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 min-w-9 px-3",
+        sm: "h-8 min-w-8 px-2",
+        lg: "h-10 min-w-10 px-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = React31.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx40(
+  TogglePrimitive.Root,
+  {
+    ref,
+    "data-slot": "toggle",
+    className: cn(toggleVariants({ variant, size }), className),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+var ToggleGroupContext = React31.createContext({ size: "default", variant: "default" });
+var ToggleGroup = React31.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx40(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    "data-slot": "toggle-group",
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx40(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React31.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React31.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx40(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      "data-slot": "toggle-group-item",
+      className: cn(
+        toggleVariants({
+          variant: context.variant ?? variant,
+          size: context.size ?? size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+// src/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React32 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React32.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx41(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx41(
+    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",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export {
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogContentPrimitive,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertTitle,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -3096,6 +3762,18 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerContentPrimitive,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -3113,6 +3791,9 @@ export {
   DropdownMenuTrigger,
   EditableLabel,
   EnterInput,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
   Input,
   InputWithPrefix,
   Label3 as Label,
@@ -3124,7 +3805,12 @@ export {
   PopoverTrigger,
   PortalContainerProvider,
   Progress,
+  RadioGroup3 as RadioGroup,
+  RadioGroupItem,
   RadixDialogModalProvider,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
   ScoreRing,
   ScrollArea,
   ScrollBar,
@@ -3151,6 +3837,7 @@ export {
   SheetTitle,
   SheetTrigger,
   Skeleton,
+  Slider,
   Switch,
   TabbedBottomSheet,
   Table,
@@ -3168,6 +3855,14 @@ export {
   TabsTriggerCore,
   Textarea,
   TextareaWithPrefix,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  alertVariants,
   badgeVariants,
   buttonVariants,
   cn,
@@ -3175,8 +3870,10 @@ export {
   scoreRingColorClasses,
   selectTriggerVariants,
   sheetVariants,
+  toggleVariants,
   useCardSize,
   useDialogContainer,
+  useDrawerDirection,
   useIsMobile,
   usePortalContainer,
   useRadixDialogModal,