@ai-matrx/design-system 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -38,6 +38,16 @@ __export(src_exports, {
   BottomSheetFooter: () => BottomSheetFooter,
   BottomSheetHeader: () => BottomSheetHeader,
   Button: () => Button,
+  Command: () => Command,
+  CommandDialog: () => CommandDialog,
+  CommandEmpty: () => CommandEmpty,
+  CommandGroup: () => CommandGroup,
+  CommandInput: () => CommandInput,
+  CommandItem: () => CommandItem,
+  CommandList: () => CommandList,
+  CommandSeparator: () => CommandSeparator,
+  CommandShortcut: () => CommandShortcut,
+  CreatablePicker: () => CreatablePicker,
   DEFAULT_SCORE_THRESHOLDS: () => DEFAULT_SCORE_THRESHOLDS,
   EditableLabel: () => EditableLabel,
   EnterInput: () => EnterInput,
@@ -53,7 +63,17 @@ __export(src_exports, {
   RadixDialogModalProvider: () => RadixDialogModalProvider,
   ScoreRing: () => ScoreRing,
   SegmentedControl: () => SegmentedControl,
-  Separator: () => Separator,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  Separator: () => Separator2,
   Sheet: () => Sheet,
   SheetClose: () => SheetClose,
   SheetContent: () => SheetContent,
@@ -71,6 +91,7 @@ __export(src_exports, {
   cn: () => cn,
   scoreAccentBgClasses: () => scoreAccentBgClasses,
   scoreRingColorClasses: () => scoreRingColorClasses,
+  selectTriggerVariants: () => selectTriggerVariants,
   sheetVariants: () => sheetVariants,
   usePortalContainer: () => usePortalContainer,
   useRadixDialogModal: () => useRadixDialogModal,
@@ -151,6 +172,95 @@ function MoreHorizontalIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
   ] });
 }
+function LucideCheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function ChevronsUpDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function ExternalLinkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 14 21 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  ] });
+}
+function PlusIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5v14" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
+  ] });
+}
+function radixProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 15 15",
+    width: 15,
+    height: 15,
+    fill: "none",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function MagnifyingGlassIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "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",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "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",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function RadixChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "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",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function RadixChevronUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "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",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
 function Cross2Icon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
@@ -351,9 +461,480 @@ var Button = React3.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/editable-label.tsx
-var import_react = require("react");
+// src/command.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_cmdk = require("cmdk");
+var React5 = __toESM(require("react"), 1);
+
+// src/portal-container.tsx
+var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var PortalContainerContext = React4.createContext(
+  void 0
+);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(explicit) {
+  const injected = React4.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/command.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = import_cmdk.Command.displayName;
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React5.useState(false);
+  const [hasMounted, setHasMounted] = React5.useState(false);
+  React5.useEffect(() => {
+    setHasMounted(true);
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  if (!hasMounted) {
+    return false;
+  }
+  return isMobile;
+}
+var DIALOG_DESKTOP_CLASSES = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
+var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
+var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
+var CommandDialogContent = React5.forwardRef(({ className, children, container, ...props }, ref) => {
+  const isMobile = useIsMobile();
+  const isModal = useRadixDialogModal();
+  const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DialogPrimitive.Portal, { container: portalContainer, children: [
+    isModal ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DialogPrimitive.Overlay,
+      {
+        className: "fixed inset-0 z-[10000] bg-black/20 dark:bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "aria-modal": isModal || void 0,
+        "aria-describedby": void 0,
+        className: cn(
+          isMobile ? DIALOG_MOBILE_SHEET_CLASSES : DIALOG_DESKTOP_CLASSES,
+          className,
+          isMobile && DIALOG_MOBILE_SHEET_OVERRIDE,
+          !isModal && "z-[900]"
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(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__ */ (0, import_jsx_runtime7.jsx)(XIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+CommandDialogContent.displayName = "CommandDialogContent";
+var CommandDialog = ({
+  children,
+  container,
+  ...props
+}) => {
+  const modal = props.modal ?? true;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    CommandDialogContent,
+    {
+      className: "overflow-hidden p-0",
+      ...container !== void 0 ? { container } : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogPrimitive.Title, { className: "sr-only" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+      ]
+    }
+  ) }) });
+};
+var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_cmdk.Command.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = import_cmdk.Command.Input.displayName;
+var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = import_cmdk.Command.List.displayName;
+var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
+var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = import_cmdk.Command.Group.displayName;
+var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
+var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = import_cmdk.Command.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// src/creatable-picker.tsx
+var import_react = require("react");
+
+// src/popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React6.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        className: cn(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/creatable-picker.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function article(noun) {
+  return /^[aeiou]/i.test(noun.trim()) ? `an ${noun}` : `a ${noun}`;
+}
+function CreatablePicker({
+  value,
+  options,
+  onSelect,
+  placeholder,
+  searchPlaceholder,
+  noun,
+  onCreate,
+  onCreateRequiresMore,
+  disabled,
+  loading,
+  className,
+  triggerClassName,
+  emptyLabel = "No match.",
+  ariaLabel,
+  lockedNote,
+  lockedAction,
+  createExtra,
+  manageAction,
+  footerActions,
+  renderSelected,
+  size = "sm"
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const [needsName, setNeedsName] = (0, import_react.useState)(false);
+  const selected = options.find((option) => option.value === value) ?? null;
+  const groups = [];
+  for (const option of options) {
+    const last = groups[groups.length - 1];
+    if (last && last.heading === option.group) last.options.push(option);
+    else
+      groups.push(
+        option.group === void 0 ? { options: [option] } : { heading: option.group, options: [option] }
+      );
+  }
+  const typed = query.trim();
+  const exactMatch = options.some(
+    (option) => option.label.toLowerCase() === typed.toLowerCase()
+  );
+  const canCreate = Boolean(onCreate ?? onCreateRequiresMore) && !lockedNote;
+  const close = () => {
+    setOpen(false);
+    setQuery("");
+    setNeedsName(false);
+  };
+  const create = async (text) => {
+    const name = text.trim();
+    if (busy) return;
+    if (onCreateRequiresMore) {
+      close();
+      onCreateRequiresMore(name);
+      return;
+    }
+    if (!onCreate) return;
+    if (!name) {
+      setNeedsName(true);
+      inputRef.current?.focus();
+      return;
+    }
+    setBusy(true);
+    try {
+      const next = await onCreate(name);
+      if (next) onSelect(next);
+      close();
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-label": ariaLabel ?? placeholder,
+        className: cn(
+          "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 text-left shadow-xs transition-colors",
+          "hover:border-primary/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          size === "sm" ? "h-8 text-xs" : "h-9 text-sm",
+          className,
+          triggerClassName
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      Command,
+      {
+        filter: (itemValue, search, keywords) => {
+          const haystack = `${itemValue} ${keywords?.join(" ") ?? ""}`.toLowerCase();
+          return haystack.includes(search.toLowerCase()) ? 1 : 0;
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            CommandInput,
+            {
+              ref: inputRef,
+              value: query,
+              onValueChange: (next) => {
+                setQuery(next);
+                if (next.trim()) setNeedsName(false);
+              },
+              placeholder: searchPlaceholder ?? `Search or add ${article(noun)}\u2026`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CommandList, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CommandEmpty, { children: emptyLabel }),
+            groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              CommandGroup,
+              {
+                ...group.heading === void 0 ? {} : { heading: group.heading },
+                children: group.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  CommandItem,
+                  {
+                    value: option.label,
+                    ...option.keywords ? { keywords: [option.keywords] } : {},
+                    onSelect: () => {
+                      onSelect(option.value);
+                      close();
+                    },
+                    className: "gap-2 text-xs",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        LucideCheckIcon,
+                        {
+                          className: cn(
+                            "size-3.5 shrink-0",
+                            option.value === value ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
+                      option.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
+                    ]
+                  },
+                  option.value
+                ))
+              },
+              group.heading ?? "__ungrouped__"
+            ))
+          ] }),
+          canCreate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 border-t border-border p-1", children: [
+            createExtra && typed && !exactMatch ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                type: "button",
+                disabled: busy,
+                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__ */ (0, import_jsx_runtime9.jsx)(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
+                ]
+              }
+            ),
+            needsName ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-0.5 border-t border-border p-1", children: [
+            footerActions?.map((action) => {
+              const Icon2 = action.icon;
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      close();
+                      action.onSelect();
+                    },
+                    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__ */ (0, import_jsx_runtime9.jsx)(Icon2, { className: "size-3.5 shrink-0" }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: action.label })
+                    ]
+                  }
+                ),
+                action.note ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
+              ] }, action.label);
+            }),
+            manageAction ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "a",
+              {
+                href: manageAction.href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                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__ */ (0, import_jsx_runtime9.jsx)(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: manageAction.label })
+                ]
+              }
+            ) : null
+          ] }) : null,
+          lockedNote ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 border-t border-border p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LockIcon, { className: "mt-px size-3 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: lockedNote })
+            ] }),
+            lockedAction ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  close();
+                  lockedAction.onSelect();
+                },
+                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__ */ (0, import_jsx_runtime9.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: lockedAction.label })
+                ]
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/editable-label.tsx
+var import_react2 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function EditableLabel({
   value,
   onCommit,
@@ -373,22 +954,22 @@ function EditableLabel({
   inputClassName
 }) {
   const controlled = activation === "controlled";
-  const [internalEditing, setInternalEditing] = (0, import_react.useState)(false);
+  const [internalEditing, setInternalEditing] = (0, import_react2.useState)(false);
   const editing = controlled ? !!editingProp : internalEditing;
-  const [draft, setDraft] = (0, import_react.useState)(value);
-  const [error, setError] = (0, import_react.useState)(null);
-  const [busy, setBusy] = (0, import_react.useState)(false);
-  const inputRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react2.useState)(value);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  const inputRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
     if (!editing) setDraft(value);
   }, [value, editing]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
       if (selectOnEdit) inputRef.current.select();
     }
   }, [editing, selectOnEdit]);
-  const setEditing = (0, import_react.useCallback)(
+  const setEditing = (0, import_react2.useCallback)(
     (next) => {
       if (controlled) {
         onEditingChange?.(next);
@@ -399,18 +980,18 @@ function EditableLabel({
     },
     [controlled, onEditingChange]
   );
-  const startEdit = (0, import_react.useCallback)(() => {
+  const startEdit = (0, import_react2.useCallback)(() => {
     setDraft(value);
     setError(null);
     setEditing(true);
   }, [value, setEditing]);
-  const cancel = (0, import_react.useCallback)(() => {
+  const cancel = (0, import_react2.useCallback)(() => {
     setDraft(value);
     setError(null);
     setBusy(false);
     setEditing(false);
   }, [value, setEditing]);
-  const commit = (0, import_react.useCallback)(() => {
+  const commit = (0, import_react2.useCallback)(() => {
     if (busy) return;
     const trimmed = draft.trim();
     const next = trimmed || emptyFallback;
@@ -460,8 +1041,8 @@ function EditableLabel({
     setEditing
   ]);
   if (editing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "input",
         {
           ref: inputRef,
@@ -501,12 +1082,12 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+      busy && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
   if (controlled) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       type: "button",
@@ -540,8 +1121,8 @@ function EditableLabel({
 }
 
 // src/input.tsx
-var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var getVariantStyles = (variant = "default") => {
   const baseStyles = `flex h-10 w-full border border-border bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
     file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600
@@ -569,9 +1150,9 @@ var getVariantStyles = (variant = "default") => {
       return baseStyles;
   }
 };
-var Input = React4.forwardRef(
+var Input = React7.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
         type,
@@ -583,7 +1164,7 @@ var Input = React4.forwardRef(
   }
 );
 Input.displayName = "Input";
-var EnterInput = React4.forwardRef(
+var EnterInput = React7.forwardRef(
   ({ onEnter, ...props }, ref) => {
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && onEnter) {
@@ -591,7 +1172,7 @@ var EnterInput = React4.forwardRef(
         onEnter();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Input,
       {
         ...props,
@@ -607,11 +1188,11 @@ var EnterInput = React4.forwardRef(
   }
 );
 EnterInput.displayName = "EnterInput";
-var BasicInput = React4.forwardRef(
+var BasicInput = React7.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__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
         type,
@@ -626,10 +1207,10 @@ var BasicInput = React4.forwardRef(
   }
 );
 BasicInput.displayName = "BasicInput";
-var InputWithPrefix = React4.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
-    prefix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var InputWithPrefix = React7.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Input,
       {
         ref,
@@ -643,9 +1224,9 @@ InputWithPrefix.displayName = "InputWithPrefix";
 
 // src/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -659,8 +1240,8 @@ var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/overflow-toolbar.tsx
-var import_react2 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var GAP_PX = 6;
 var TONE = {
   default: "border border-border bg-background hover:bg-accent text-foreground",
@@ -673,7 +1254,7 @@ function ToolbarButton({
   renderTooltip
 }) {
   const tone = action.tone ?? "default";
-  const Icon = action.running ? Loader2Icon : action.icon;
+  const Icon2 = action.running ? Loader2Icon : action.icon;
   const showLabel = !action.hideLabel || action.running && action.runningLabel;
   const text = action.running && action.runningLabel ? action.runningLabel : action.label;
   const className = cn(
@@ -682,16 +1263,16 @@ function ToolbarButton({
     action.hideLabel && !action.running ? "w-7 justify-center px-0" : "px-2",
     TONE[tone]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Icon,
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Icon2,
       {
         className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: text })
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: text })
   ] });
-  const control = action.href && !action.disabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const control = action.href && !action.disabled ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "a",
     {
       href: action.href,
@@ -701,7 +1282,7 @@ function ToolbarButton({
       "aria-label": action.label,
       children: inner
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       type: "button",
@@ -713,12 +1294,12 @@ function ToolbarButton({
     }
   );
   if (enableTooltip && action.hideLabel && renderTooltip) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: renderTooltip(control, action.label) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: renderTooltip(control, action.label) });
   }
   return control;
 }
 function OverflowTrigger({ ariaLabel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       type: "button",
@@ -729,7 +1310,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__ */ (0, import_jsx_runtime9.jsx)(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
     }
   );
 }
@@ -741,18 +1322,18 @@ function OverflowToolbar({
   renderOverflowMenu,
   renderTooltip
 }) {
-  const visibleActions = (0, import_react2.useMemo)(
+  const visibleActions = (0, import_react3.useMemo)(
     () => actions.filter((a) => !a.hidden),
     [actions]
   );
-  const containerRef = (0, import_react2.useRef)(null);
-  const ghostRef = (0, import_react2.useRef)(null);
-  const leadingRef = (0, import_react2.useRef)(null);
-  const [visibleCount, setVisibleCount] = (0, import_react2.useState)(visibleActions.length);
+  const containerRef = (0, import_react3.useRef)(null);
+  const ghostRef = (0, import_react3.useRef)(null);
+  const leadingRef = (0, import_react3.useRef)(null);
+  const [visibleCount, setVisibleCount] = (0, import_react3.useState)(visibleActions.length);
   const signature = visibleActions.map(
     (a) => `${a.id}:${a.hideLabel ? 1 : 0}:${a.running ? 1 : 0}:${a.runningLabel ?? ""}:${a.label}`
   ).join("|");
-  (0, import_react2.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     const container = containerRef.current;
     const ghost = ghostRef.current;
     if (!container || !ghost) return void 0;
@@ -789,22 +1370,22 @@ function OverflowToolbar({
   }, [signature, leading != null]);
   const shown = visibleActions.slice(0, visibleCount);
   const hidden = visibleActions.slice(visibleCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "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__ */ (0, import_jsx_runtime9.jsx)(ToolbarButton, { action: a }, a.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+          visibleActions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
-      leading != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ref: leadingRef, className: "shrink-0", children: leading }),
-      shown.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
+      leading != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ToolbarButton,
         {
           action: a,
@@ -815,69 +1396,14 @@ function OverflowToolbar({
       )),
       hidden.length > 0 && renderOverflowMenu({
         actions: hidden,
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
       })
     ] })
   ] });
 }
 
-// src/popover.tsx
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var React8 = __toESM(require("react"), 1);
-
-// src/portal-container.tsx
-var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var PortalContainerContext = React7.createContext(
-  void 0
-);
-function PortalContainerProvider({
-  container,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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;
-}
-
-// src/popover.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React8.forwardRef(
-  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
-    const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      PopoverPrimitive.Content,
-      {
-        ref,
-        align,
-        sideOffset,
-        className: cn(
-          // Cap to the viewport space Radix measured and scroll — a popover taller
-          // than the screen must never trap the user with unreachable content.
-          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
-          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
-          // above it, and a popover opened from a dialog still stacks above the
-          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        ),
-        ...props
-      }
-    ) });
-  }
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
 // src/score-ring.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_SCORE_THRESHOLDS = {
   good: 75,
   warning: 50
@@ -908,7 +1434,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__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: cn(
@@ -919,8 +1445,8 @@ function ScoreRing({
       role: "img",
       "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "circle",
             {
               cx: "50",
@@ -931,7 +1457,7 @@ function ScoreRing({
               fill: "none"
             }
           ),
-          pct !== null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          pct !== null ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "circle",
             {
               cx: "50",
@@ -950,8 +1476,8 @@ function ScoreRing({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: cn(
@@ -961,7 +1487,7 @@ function ScoreRing({
               children: pct === null ? "\u2014" : `${pct}${suffix}`
             }
           ),
-          label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+          label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
         ] })
       ]
     }
@@ -969,7 +1495,7 @@ function ScoreRing({
 }
 
 // src/segmented-control.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function SegmentedControl({
   value,
   onValueChange,
@@ -984,7 +1510,7 @@ function SegmentedControl({
     md: "h-9 text-sm",
     lg: "h-10 text-base"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: cn(
@@ -995,7 +1521,7 @@ function SegmentedControl({
       role: "tablist",
       children: data.map((option) => {
         const isActive = value === option.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -1019,11 +1545,141 @@ function SegmentedControl({
   );
 }
 
+// src/select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_class_variance_authority3 = require("class-variance-authority");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var selectTriggerVariants = (0, import_class_variance_authority3.cva)(
+  "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: {
+      size: {
+        sm: "h-7 px-2 py-1 text-xs",
+        default: "h-9 px-3 py-1",
+        lg: "h-10 px-3 py-2"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var SelectTrigger = React10.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React10.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    SelectPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-0.5 overflow-y-auto",
+              position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React10.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      description ? "flex-col items-start gap-0.5 py-1.5" : "items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
 // src/separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var React9 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Separator = React9.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Separator2 = React11.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -1037,17 +1693,17 @@ var Separator = React9.forwardRef(({ className, orientation = "horizontal", deco
     ...props
   }
 ));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/sheet.tsx
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react_tree = require("@ai-matrx/kit/react-tree");
-var import_class_variance_authority3 = require("class-variance-authority");
-var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var SheetContentBase = React10.forwardRef(({ ...props }, ref) => {
+var import_class_variance_authority4 = require("class-variance-authority");
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SheetContentBase = React12.forwardRef(({ ...props }, ref) => {
   const isModal = useRadixDialogModal();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     SheetPrimitive.Content,
     {
       ...props,
@@ -1057,15 +1713,15 @@ var SheetContentBase = React10.forwardRef(({ ...props }, ref) => {
   );
 });
 SheetContentBase.displayName = "SheetContentBase";
-var Sheet = React10.forwardRef(({ children, ...props }, _ref) => {
+var Sheet = React12.forwardRef(({ children, ...props }, _ref) => {
   const modal = props.modal ?? true;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetPrimitive.Root, { ...props, modal, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SheetPrimitive.Root, { ...props, modal, children }) });
 });
 Sheet.displayName = "Sheet";
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var SheetOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -1077,7 +1733,7 @@ var SheetOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var sheetVariants = (0, import_class_variance_authority3.cva)(
+var sheetVariants = (0, import_class_variance_authority4.cva)(
   "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: {
@@ -1094,7 +1750,7 @@ var sheetVariants = (0, import_class_variance_authority3.cva)(
     }
   }
 );
-var SheetDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var SheetDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   SheetPrimitive.Description,
   {
     ref,
@@ -1103,7 +1759,7 @@ var SheetDescription = React10.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-var SheetContent = React10.forwardRef(
+var SheetContent = React12.forwardRef(
   ({
     side = "right",
     className,
@@ -1114,9 +1770,9 @@ var SheetContent = React10.forwardRef(
     ...props
   }, ref) => {
     const hasDescription = (0, import_react_tree.treeContainsComponent)(children, SheetDescription) || (0, import_react_tree.treeContainsComponent)(children, SheetPrimitive.Description);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SheetPortal, { children: [
-      !hideOverlay && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SheetPortal, { children: [
+      !hideOverlay && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         SheetContentBase,
         {
           ref,
@@ -1124,9 +1780,9 @@ var SheetContent = React10.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(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__ */ (0, import_jsx_runtime15.jsx)(Cross2Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sr-only", children: "Close" })
+            !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(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__ */ (0, import_jsx_runtime18.jsx)(Cross2Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "Close" })
             ] }),
             children
           ]
@@ -1139,7 +1795,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     className: cn(
@@ -1153,7 +1809,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     className: cn(
@@ -1164,7 +1820,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var SheetTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   SheetPrimitive.Title,
   {
     ref,
@@ -1175,12 +1831,12 @@ var SheetTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/skeleton.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-primary/10", className),
@@ -1190,30 +1846,30 @@ function Skeleton({
 }
 
 // src/tabbed-bottom-sheet.tsx
-var import_react3 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function TabbedBottomSheet({
   open,
   onOpenChange,
   title,
   tabs
 }) {
-  const [selectedTabId, setSelectedTabId] = (0, import_react3.useState)(null);
-  const [wasOpen, setWasOpen] = (0, import_react3.useState)(open);
+  const [selectedTabId, setSelectedTabId] = (0, import_react4.useState)(null);
+  const [wasOpen, setWasOpen] = (0, import_react4.useState)(open);
   if (open !== wasOpen) {
     setWasOpen(open);
     if (open) setSelectedTabId(null);
   }
   const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     BottomSheet,
     {
       open,
       onOpenChange,
       title,
       size: "full",
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           BottomSheetHeader,
           {
             title: selectedTab ? selectedTab.label : title,
@@ -1221,19 +1877,19 @@ function TabbedBottomSheet({
             onBack: () => setSelectedTabId(null)
           }
         ),
-        selectedTab ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BottomSheetBody, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
-          const Icon = tab.icon;
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        selectedTab ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BottomSheetBody, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+          const Icon2 = tab.icon;
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "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: [
-                Icon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
                 tab.trailing,
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
               ]
             }
           ) }, tab.id);
@@ -1244,16 +1900,16 @@ function TabbedBottomSheet({
 }
 
 // src/use-scroll-fade.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var EPSILON = 2;
 function useScrollFade() {
-  const [state, setState] = (0, import_react4.useState)({
+  const [state, setState] = (0, import_react5.useState)({
     top: false,
     bottom: false
   });
-  const nodeRef = (0, import_react4.useRef)(null);
-  const cleanupRef = (0, import_react4.useRef)(null);
-  const measure = (0, import_react4.useCallback)(() => {
+  const nodeRef = (0, import_react5.useRef)(null);
+  const cleanupRef = (0, import_react5.useRef)(null);
+  const measure = (0, import_react5.useCallback)(() => {
     const el = nodeRef.current;
     if (!el) return;
     const overflowing = el.scrollHeight - el.clientHeight > EPSILON;
@@ -1265,7 +1921,7 @@ function useScrollFade() {
       (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
     );
   }, []);
-  const ref = (0, import_react4.useCallback)(
+  const ref = (0, import_react5.useCallback)(
     (node) => {
       cleanupRef.current?.();
       cleanupRef.current = null;
@@ -1285,7 +1941,7 @@ function useScrollFade() {
     },
     [measure]
   );
-  (0, import_react4.useEffect)(() => () => cleanupRef.current?.(), []);
+  (0, import_react5.useEffect)(() => () => cleanupRef.current?.(), []);
   return {
     ref,
     state,