@ai-matrx/design-system 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,17 +1,17 @@
 "use client";
-import { cva } from 'class-variance-authority';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 // src/badge.tsx
+import { cva } from "class-variance-authority";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/badge.tsx
+import { jsx } from "react/jsx-runtime";
 var badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0",
   {
@@ -36,7 +36,291 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var buttonVariants = cva(
+
+// src/bottom-sheet.tsx
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import * as React2 from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+// src/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function lucideProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...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" }) });
+}
+function ChevronLeftIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx2("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" }) });
+}
+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" })
+  ] });
+}
+function LucideCheckIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx2("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" })
+  ] });
+}
+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" })
+  ] });
+}
+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" })
+  ] });
+}
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx2("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx2("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" })
+  ] });
+}
+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__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx2(
+        "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",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+
+// 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);
+}
+
+// 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";
+function BottomSheet({
+  open,
+  onOpenChange,
+  title = "Bottom Sheet",
+  size = "adaptive",
+  surface = "glass",
+  contentClassName,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(DrawerRoot, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(DrawerPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx4(
+      DrawerPrimitive.Overlay,
+      {
+        className: cn("fixed inset-0 z-50 bg-black/80", "fixed inset-0 z-50"),
+        style: { background: "rgba(0, 0, 0, 0.08)" }
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      DrawerContentPrimitive,
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex flex-col rounded-t-2xl overflow-hidden",
+          size === "full" ? "h-[92dvh]" : "min-h-[60dvh] max-h-[90dvh]",
+          surface === "solid" && "border border-b-0 border-border bg-background shadow-2xl",
+          contentClassName
+        ),
+        style: surface === "glass" ? {
+          background: "var(--matrx-glass-bg)",
+          backdropFilter: "blur(20px) saturate(180%)",
+          WebkitBackdropFilter: "blur(20px) saturate(180%)",
+          border: "1px solid var(--matrx-glass-border-color)",
+          borderBottom: "none"
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs2(VisuallyHidden, { children: [
+            /* @__PURE__ */ jsx4(DrawerPrimitive.Title, { children: title }),
+            /* @__PURE__ */ jsx4(DrawerPrimitive.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" }),
+          children
+        ]
+      }
+    )
+  ] }) });
+}
+function BottomSheetHeader({
+  title,
+  showBack = false,
+  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(
+      "button",
+      {
+        onClick: onBack,
+        className: cn(
+          "h-8 w-8 rounded-full matrx-glass-thin-border flex items-center justify-center transition-all active:scale-95",
+          showBack ? "opacity-100" : "opacity-0 pointer-events-none"
+        ),
+        "aria-hidden": !showBack,
+        tabIndex: showBack ? 0 : -1,
+        children: /* @__PURE__ */ jsx4(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 })
+  ] });
+}
+function BottomSheetBody({ children, className }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        // min-h-0 is load-bearing: without it a flex child's min-height:auto
+        // floors it at content height and the body grows instead of scrolling.
+        "min-h-0 flex-1 overflow-y-auto overscroll-contain pb-safe",
+        className
+      ),
+      children
+    }
+  );
+}
+function BottomSheetFooter({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "flex-shrink-0 px-4 py-3 pb-safe border-t border-white/[0.06]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import * as React3 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var buttonVariants = cva2(
   "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: {
@@ -63,10 +347,10 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React.forwardRef(
+var Button = React3.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx5(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -77,7 +361,776 @@ var Button = React.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+
+// src/command.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import * as React5 from "react";
+
+// src/portal-container.tsx
+import * as React4 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PortalContainerContext = React4.createContext(
+  void 0
+);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx6(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
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+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__ */ jsxs3(DialogPrimitive.Portal, { container: portalContainer, children: [
+    isModal ? /* @__PURE__ */ jsx7(
+      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__ */ jsxs3(
+      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__ */ jsxs3(DialogPrimitive.Close, { className: "absolute right-2 top-4 flex h-10 w-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4", children: [
+            /* @__PURE__ */ jsx7(XIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+CommandDialogContent.displayName = "CommandDialogContent";
+var CommandDialog = ({
+  children,
+  container,
+  ...props
+}) => {
+  const modal = props.modal ?? true;
+  return /* @__PURE__ */ jsx7(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx7(DialogPrimitive.Root, { ...props, modal, children: /* @__PURE__ */ jsxs3(
+    CommandDialogContent,
+    {
+      className: "overflow-hidden p-0",
+      ...container !== void 0 ? { container } : {},
+      children: [
+        /* @__PURE__ */ jsx7(DialogPrimitive.Title, { className: "sr-only" }),
+        /* @__PURE__ */ jsx7(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+      ]
+    }
+  ) }) });
+};
+var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx7(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx7(
+    CommandPrimitive.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 = CommandPrimitive.Input.displayName;
+var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.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 = CommandPrimitive.Group.displayName;
+var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.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 = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// src/creatable-picker.tsx
+import {
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React6 from "react";
+import { jsx as jsx8 } from "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__ */ jsx8(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx8(
+      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
+import { jsx as jsx9, jsxs as jsxs4 } from "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] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const [busy, setBusy] = useState2(false);
+  const inputRef = useRef(null);
+  const [needsName, setNeedsName] = useState2(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__ */ jsxs4(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
+    /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs4(
+      "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__ */ jsx9("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
+          /* @__PURE__ */ jsx9(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs4(
+      Command,
+      {
+        filter: (itemValue, search, keywords) => {
+          const haystack = `${itemValue} ${keywords?.join(" ") ?? ""}`.toLowerCase();
+          return haystack.includes(search.toLowerCase()) ? 1 : 0;
+        },
+        children: [
+          /* @__PURE__ */ jsx9(
+            CommandInput,
+            {
+              ref: inputRef,
+              value: query,
+              onValueChange: (next) => {
+                setQuery(next);
+                if (next.trim()) setNeedsName(false);
+              },
+              placeholder: searchPlaceholder ?? `Search or add ${article(noun)}\u2026`
+            }
+          ),
+          /* @__PURE__ */ jsxs4(CommandList, { children: [
+            /* @__PURE__ */ jsx9(CommandEmpty, { children: emptyLabel }),
+            groups.map((group) => /* @__PURE__ */ jsx9(
+              CommandGroup,
+              {
+                ...group.heading === void 0 ? {} : { heading: group.heading },
+                children: group.options.map((option) => /* @__PURE__ */ jsxs4(
+                  CommandItem,
+                  {
+                    value: option.label,
+                    ...option.keywords ? { keywords: [option.keywords] } : {},
+                    onSelect: () => {
+                      onSelect(option.value);
+                      close();
+                    },
+                    className: "gap-2 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsx9(
+                        LucideCheckIcon,
+                        {
+                          className: cn(
+                            "size-3.5 shrink-0",
+                            option.value === value ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
+                      option.hint ? /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
+                    ]
+                  },
+                  option.value
+                ))
+              },
+              group.heading ?? "__ungrouped__"
+            ))
+          ] }),
+          canCreate ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1 border-t border-border p-1", children: [
+            createExtra && typed && !exactMatch ? /* @__PURE__ */ jsx9("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
+            /* @__PURE__ */ jsxs4(
+              "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__ */ jsx9(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx9(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
+                ]
+              }
+            ),
+            needsName ? /* @__PURE__ */ jsxs4("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
+              "Type the name of the ",
+              noun,
+              " you want to add \u2014 then this creates it."
+            ] }) : null
+          ] }) : null,
+          footerActions?.length || manageAction ? /* @__PURE__ */ jsxs4("div", { className: "space-y-0.5 border-t border-border p-1", children: [
+            footerActions?.map((action) => {
+              const Icon2 = action.icon;
+              return /* @__PURE__ */ jsxs4("div", { children: [
+                /* @__PURE__ */ jsxs4(
+                  "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__ */ jsx9(Icon2, { className: "size-3.5 shrink-0" }) : null,
+                      /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: action.label })
+                    ]
+                  }
+                ),
+                action.note ? /* @__PURE__ */ jsx9("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
+              ] }, action.label);
+            }),
+            manageAction ? /* @__PURE__ */ jsxs4(
+              "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__ */ jsx9(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: manageAction.label })
+                ]
+              }
+            ) : null
+          ] }) : null,
+          lockedNote ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1 border-t border-border p-2", children: [
+            /* @__PURE__ */ jsxs4("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
+              /* @__PURE__ */ jsx9(LockIcon, { className: "mt-px size-3 shrink-0" }),
+              /* @__PURE__ */ jsx9("span", { children: lockedNote })
+            ] }),
+            lockedAction ? /* @__PURE__ */ jsxs4(
+              "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__ */ jsx9(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: lockedAction.label })
+                ]
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/editable-label.tsx
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function EditableLabel({
+  value,
+  onCommit,
+  commitMode = "optimistic",
+  validate,
+  emptyFallback,
+  maxLength = 120,
+  activation = "click",
+  editing: editingProp,
+  onEditingChange,
+  selectOnEdit = true,
+  placeholder,
+  ariaLabel = "Name",
+  truncate = true,
+  className,
+  displayClassName,
+  inputClassName
+}) {
+  const controlled = activation === "controlled";
+  const [internalEditing, setInternalEditing] = useState3(false);
+  const editing = controlled ? !!editingProp : internalEditing;
+  const [draft, setDraft] = useState3(value);
+  const [error, setError] = useState3(null);
+  const [busy, setBusy] = useState3(false);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (!editing) setDraft(value);
+  }, [value, editing]);
+  useEffect2(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      if (selectOnEdit) inputRef.current.select();
+    }
+  }, [editing, selectOnEdit]);
+  const setEditing = useCallback(
+    (next) => {
+      if (controlled) {
+        onEditingChange?.(next);
+      } else {
+        setInternalEditing(next);
+        onEditingChange?.(next);
+      }
+    },
+    [controlled, onEditingChange]
+  );
+  const startEdit = useCallback(() => {
+    setDraft(value);
+    setError(null);
+    setEditing(true);
+  }, [value, setEditing]);
+  const cancel = useCallback(() => {
+    setDraft(value);
+    setError(null);
+    setBusy(false);
+    setEditing(false);
+  }, [value, setEditing]);
+  const commit = useCallback(() => {
+    if (busy) return;
+    const trimmed = draft.trim();
+    const next = trimmed || emptyFallback;
+    if (next === void 0) {
+      cancel();
+      return;
+    }
+    const validationError = validate?.(next) ?? null;
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+    if (next === value) {
+      setEditing(false);
+      setError(null);
+      return;
+    }
+    if (commitMode === "await") {
+      const result2 = onCommit(next);
+      if (result2 instanceof Promise) {
+        setBusy(true);
+        result2.then(() => {
+          setBusy(false);
+          setEditing(false);
+        }).catch(() => {
+          setBusy(false);
+        });
+        return;
+      }
+      setEditing(false);
+      return;
+    }
+    setEditing(false);
+    setError(null);
+    const result = onCommit(next);
+    if (result instanceof Promise) result.catch(() => {
+    });
+  }, [
+    busy,
+    draft,
+    emptyFallback,
+    validate,
+    value,
+    commitMode,
+    onCommit,
+    cancel,
+    setEditing
+  ]);
+  if (editing) {
+    return /* @__PURE__ */ jsxs5("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: draft,
+          disabled: busy,
+          placeholder,
+          onChange: (e) => {
+            setDraft(e.target.value);
+            if (error) setError(null);
+          },
+          onBlur: commit,
+          onClick: (e) => e.stopPropagation(),
+          onDoubleClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              commit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              cancel();
+            } else if (e.key === " ") {
+              e.stopPropagation();
+            }
+          },
+          maxLength,
+          "aria-label": ariaLabel,
+          "aria-invalid": error ? true : void 0,
+          className: cn(
+            "w-full min-w-0 rounded-sm bg-transparent px-1 outline-none",
+            "text-base md:text-sm",
+            "focus:bg-background focus:ring-1 focus:ring-ring",
+            busy && "opacity-60",
+            inputClassName
+          )
+        }
+      ),
+      busy && /* @__PURE__ */ jsx10(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ jsx10("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+    ] });
+  }
+  if (controlled) return null;
+  return /* @__PURE__ */ jsx10(
+    "button",
+    {
+      type: "button",
+      onClick: activation === "click" ? (e) => {
+        e.stopPropagation();
+        startEdit();
+      } : void 0,
+      onDoubleClick: activation === "doubleClick" ? (e) => {
+        e.stopPropagation();
+        startEdit();
+      } : void 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          startEdit();
+        }
+      },
+      title: activation === "doubleClick" ? "Double-click to rename" : "Click to rename",
+      "aria-label": `Rename ${ariaLabel.toLowerCase()}: ${value}`,
+      className: cn(
+        "min-w-0 max-w-full rounded-sm px-1 text-left transition-colors",
+        "hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        truncate && "block truncate",
+        className,
+        displayClassName
+      ),
+      children: value || placeholder || ""
+    }
+  );
+}
+
+// src/input.tsx
+import * as React7 from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "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
+    focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-600
+    disabled:cursor-not-allowed disabled:opacity-50
+    dark:shadow-[0px_0px_1px_1px_var(--neutral-700)]
+    transition duration-400
+    [&:-webkit-autofill]:bg-background [&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill]:[caret-color:currentColor]
+    dark:[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] dark:[&:-webkit-autofill]:[-webkit-text-fill-color:white]
+    [&:-webkit-autofill:hover]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:focus]:shadow-[0_0_0_1000px_hsl(var(--background))_inset]`;
+  switch (variant) {
+    case "destructive":
+      return `${baseStyles} bg-destructive text-destructive-foreground`;
+    case "outline":
+      return `${baseStyles} border-2`;
+    case "secondary":
+      return `${baseStyles} bg-secondary text-secondary-foreground`;
+    case "ghost":
+      return `${baseStyles} bg-transparent shadow-none`;
+    case "link":
+      return `${baseStyles} bg-transparent underline-offset-4 hover:underline`;
+    case "primary":
+      return `${baseStyles} bg-primary text-primary-foreground`;
+    default:
+      return baseStyles;
+  }
+};
+var Input = React7.forwardRef(
+  ({ className, type, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type,
+        className: cn(getVariantStyles(variant), className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var EnterInput = React7.forwardRef(
+  ({ onEnter, ...props }, ref) => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && onEnter) {
+        e.preventDefault();
+        onEnter();
+      }
+    };
+    return /* @__PURE__ */ jsx11(
+      Input,
+      {
+        ...props,
+        ref,
+        onKeyDown: (e) => {
+          handleKeyDown(e);
+          if (props.onKeyDown) {
+            props.onKeyDown(e);
+          }
+        }
+      }
+    );
+  }
+);
+EnterInput.displayName = "EnterInput";
+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__ */ jsx11(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+BasicInput.displayName = "BasicInput";
+var InputWithPrefix = React7.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("relative", wrapperClassName), children: [
+    prefix && /* @__PURE__ */ jsx11("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ jsx11(
+      Input,
+      {
+        ref,
+        className: cn(prefix && "pl-10", className),
+        ...props
+      }
+    )
+  ] });
+});
+InputWithPrefix.displayName = "InputWithPrefix";
+
+// src/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React8 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   LabelPrimitive.Root,
   {
     ref,
@@ -89,7 +1142,448 @@ var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+
+// src/overflow-toolbar.tsx
+import { useLayoutEffect, useMemo, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var GAP_PX = 6;
+var TONE = {
+  default: "border border-border bg-background hover:bg-accent text-foreground",
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  destructive: "border border-destructive/40 text-destructive hover:bg-destructive/10"
+};
+function ToolbarButton({
+  action,
+  enableTooltip = false,
+  renderTooltip
+}) {
+  const tone = action.tone ?? "default";
+  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(
+    "inline-flex items-center gap-1 h-7 rounded-md text-[11px] font-medium transition-colors whitespace-nowrap",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    action.hideLabel && !action.running ? "w-7 justify-center px-0" : "px-2",
+    TONE[tone]
+  );
+  const inner = /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx13(
+      Icon2,
+      {
+        className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx13("span", { children: text })
+  ] });
+  const control = action.href && !action.disabled ? /* @__PURE__ */ jsx13(
+    "a",
+    {
+      href: action.href,
+      target: action.target,
+      rel: action.target === "_blank" ? "noopener noreferrer" : void 0,
+      className,
+      "aria-label": action.label,
+      children: inner
+    }
+  ) : /* @__PURE__ */ jsx13(
+    "button",
+    {
+      type: "button",
+      onClick: action.onSelect,
+      disabled: action.disabled,
+      className,
+      "aria-label": action.label,
+      children: inner
+    }
+  );
+  if (enableTooltip && action.hideLabel && renderTooltip) {
+    return /* @__PURE__ */ jsx13(Fragment, { children: renderTooltip(control, action.label) });
+  }
+  return control;
+}
+function OverflowTrigger({ ariaLabel }) {
+  return /* @__PURE__ */ jsx13(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-haspopup": "menu",
+      title: "More actions",
+      className: cn(
+        "inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
+        "border border-border bg-background hover:bg-accent text-foreground"
+      ),
+      children: /* @__PURE__ */ jsx13(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+    }
+  );
+}
+function OverflowToolbar({
+  actions,
+  leading,
+  overflowAriaLabel = "More actions",
+  className,
+  renderOverflowMenu,
+  renderTooltip
+}) {
+  const visibleActions = useMemo(
+    () => actions.filter((a) => !a.hidden),
+    [actions]
+  );
+  const containerRef = useRef3(null);
+  const ghostRef = useRef3(null);
+  const leadingRef = useRef3(null);
+  const [visibleCount, setVisibleCount] = useState4(visibleActions.length);
+  const signature = visibleActions.map(
+    (a) => `${a.id}:${a.hideLabel ? 1 : 0}:${a.running ? 1 : 0}:${a.runningLabel ?? ""}:${a.label}`
+  ).join("|");
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const ghost = ghostRef.current;
+    if (!container || !ghost) return void 0;
+    const compute = () => {
+      const available = container.clientWidth;
+      const n = visibleActions.length;
+      const children = Array.from(ghost.children);
+      const hasLeading = leading != null;
+      const leadingW = hasLeading ? leadingRef.current?.offsetWidth ?? 0 : 0;
+      const itemW = (i) => children[i]?.offsetWidth ?? 0;
+      const kebabW = children[n]?.offsetWidth ?? 28;
+      const base = leadingW + (hasLeading && n > 0 ? GAP_PX : 0);
+      let totalAll = base;
+      for (let i = 0; i < n; i++) totalAll += itemW(i) + (i > 0 ? GAP_PX : 0);
+      if (totalAll <= available) {
+        setVisibleCount(n);
+        return;
+      }
+      let used = base;
+      let count = 0;
+      for (let i = 0; i < n; i++) {
+        const add = itemW(i) + (count > 0 ? GAP_PX : 0);
+        if (used + add + GAP_PX + kebabW <= available) {
+          used += add;
+          count += 1;
+        } else break;
+      }
+      setVisibleCount(count);
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [signature, leading != null]);
+  const shown = visibleActions.slice(0, visibleCount);
+  const hidden = visibleActions.slice(visibleCount);
+  return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: ghostRef,
+        "aria-hidden": true,
+        className: "pointer-events-none absolute left-0 top-0 flex items-center gap-1.5 opacity-0",
+        children: [
+          visibleActions.map((a) => /* @__PURE__ */ jsx13(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ jsx13(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-1.5", children: [
+      leading != null && /* @__PURE__ */ jsx13("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ jsx13(
+        ToolbarButton,
+        {
+          action: a,
+          enableTooltip: true,
+          renderTooltip
+        },
+        a.id
+      )),
+      hidden.length > 0 && renderOverflowMenu({
+        actions: hidden,
+        trigger: /* @__PURE__ */ jsx13(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+      })
+    ] })
+  ] });
+}
+
+// src/score-ring.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_SCORE_THRESHOLDS = {
+  good: 75,
+  warning: 50
+};
+function scoreRingColorClasses(pct, thresholds = DEFAULT_SCORE_THRESHOLDS) {
+  if (pct === null) return "text-muted-foreground";
+  if (pct >= thresholds.good) return "text-green-500";
+  if (pct >= thresholds.warning) return "text-orange-500";
+  return "text-red-500";
+}
+function scoreAccentBgClasses(pct, thresholds = DEFAULT_SCORE_THRESHOLDS) {
+  if (pct === null) return "bg-muted-foreground/30";
+  if (pct >= thresholds.good) return "bg-green-500";
+  if (pct >= thresholds.warning) return "bg-orange-500";
+  return "bg-red-500";
+}
+function ScoreRing({
+  pct,
+  size = 112,
+  strokeWidth = 8,
+  label,
+  valueClassName,
+  className,
+  thresholds = DEFAULT_SCORE_THRESHOLDS,
+  suffix = "%"
+}) {
+  const radius = 50 - strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+  const boundedPct = pct === null ? 0 : Math.max(0, Math.min(100, pct));
+  const dashOffset = circumference * (1 - boundedPct / 100);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "relative flex shrink-0 items-center justify-center",
+        className
+      ),
+      style: { width: size, height: size },
+      role: "img",
+      "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
+      children: [
+        /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ jsx14(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: radius,
+              className: "stroke-muted",
+              strokeWidth,
+              fill: "none"
+            }
+          ),
+          pct !== null ? /* @__PURE__ */ jsx14(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: radius,
+              className: cn(
+                "transition-[stroke-dashoffset] duration-700 ease-out",
+                scoreRingColorClasses(pct, thresholds)
+              ),
+              stroke: "currentColor",
+              strokeWidth,
+              strokeLinecap: "round",
+              fill: "none",
+              strokeDasharray: circumference,
+              strokeDashoffset: dashOffset
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "absolute flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx14(
+            "span",
+            {
+              className: cn(
+                "font-bold tabular-nums text-foreground",
+                valueClassName ?? "text-2xl"
+              ),
+              children: pct === null ? "\u2014" : `${pct}${suffix}`
+            }
+          ),
+          label ? /* @__PURE__ */ jsx14("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/segmented-control.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function SegmentedControl({
+  value,
+  onValueChange,
+  data,
+  name: _name,
+  className,
+  fullWidth = false,
+  size = "md"
+}) {
+  const sizeClasses = {
+    sm: "h-7 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-10 text-base"
+  };
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn(
+        "inline-flex p-0.5 bg-muted rounded-md",
+        fullWidth && "w-full",
+        className
+      ),
+      role: "tablist",
+      children: data.map((option) => {
+        const isActive = value === option.value;
+        return /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            disabled: option.disabled,
+            onClick: () => onValueChange(option.value),
+            className: cn(
+              "relative flex items-center justify-center rounded-[0.2rem] px-3 py-1.5 transition-all",
+              sizeClasses[size],
+              fullWidth && "flex-1",
+              isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+              option.disabled && "opacity-50 cursor-not-allowed"
+            ),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+// src/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva as cva3 } from "class-variance-authority";
+import * as React10 from "react";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var selectTriggerVariants = cva3(
+  "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__ */ jsxs9(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx16(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx16(RadixChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React10.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs9(
+    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__ */ jsx16(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx16(
+          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__ */ jsx16(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  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__ */ jsxs9(
+  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__ */ jsx16("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ jsx16("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React11 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Separator2 = React11.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx17(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -103,8 +1597,330 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
     ...props
   }
 ));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Badge, Button, Label, Separator, badgeVariants, buttonVariants, cn };
-//# sourceMappingURL=index.js.map
+// src/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
+import { cva as cva4 } from "class-variance-authority";
+import * as React12 from "react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var SheetContentBase = React12.forwardRef(({ ...props }, ref) => {
+  const isModal = useRadixDialogModal();
+  return /* @__PURE__ */ jsx18(
+    SheetPrimitive.Content,
+    {
+      ...props,
+      ref,
+      "aria-modal": isModal || void 0
+    }
+  );
+});
+SheetContentBase.displayName = "SheetContentBase";
+var Sheet = React12.forwardRef(({ children, ...props }, _ref) => {
+  const modal = props.modal ?? true;
+  return /* @__PURE__ */ jsx18(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx18(SheetPrimitive.Root, { ...props, modal, children }) });
+});
+Sheet.displayName = "Sheet";
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva4(
+  "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: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        center: "inset-0 m-auto max-h-full max-w-full border rounded-lg data-[state=closed]:fade-out data-[state=open]:fade-in"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+var SheetContent = React12.forwardRef(
+  ({
+    side = "right",
+    className,
+    children,
+    hideCloseButton = false,
+    hideOverlay = false,
+    overlayClassName,
+    ...props
+  }, ref) => {
+    const hasDescription = treeContainsComponent(children, SheetDescription) || treeContainsComponent(children, SheetPrimitive.Description);
+    return /* @__PURE__ */ jsxs10(SheetPortal, { children: [
+      !hideOverlay && /* @__PURE__ */ jsx18(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs10(
+        SheetContentBase,
+        {
+          ref,
+          className: cn(sheetVariants({ side }), className),
+          ...hasDescription ? {} : { "aria-describedby": void 0 },
+          ...props,
+          children: [
+            !hideCloseButton && /* @__PURE__ */ jsxs10(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+              /* @__PURE__ */ jsx18(Cross2Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+            ] }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx18(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx18(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+// src/skeleton.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-primary/10", className),
+      ...props
+    }
+  );
+}
+
+// src/tabbed-bottom-sheet.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+function TabbedBottomSheet({
+  open,
+  onOpenChange,
+  title,
+  tabs
+}) {
+  const [selectedTabId, setSelectedTabId] = useState5(null);
+  const [wasOpen, setWasOpen] = useState5(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setSelectedTabId(null);
+  }
+  const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
+  return /* @__PURE__ */ jsx20(
+    BottomSheet,
+    {
+      open,
+      onOpenChange,
+      title,
+      size: "full",
+      children: /* @__PURE__ */ jsxs11("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx20(
+          BottomSheetHeader,
+          {
+            title: selectedTab ? selectedTab.label : title,
+            showBack: !!selectedTab,
+            onBack: () => setSelectedTabId(null)
+          }
+        ),
+        selectedTab ? /* @__PURE__ */ jsx20("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ jsx20(BottomSheetBody, { children: /* @__PURE__ */ jsx20("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+          const Icon2 = tab.icon;
+          return /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSelectedTabId(tab.id),
+              className: "flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-muted/60 active:bg-muted",
+              children: [
+                Icon2 ? /* @__PURE__ */ jsx20(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ jsx20("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                tab.trailing,
+                /* @__PURE__ */ jsx20(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+              ]
+            }
+          ) }, tab.id);
+        }) }) })
+      ] })
+    }
+  );
+}
+
+// src/use-scroll-fade.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef4, useState as useState6 } from "react";
+var EPSILON = 2;
+function useScrollFade() {
+  const [state, setState] = useState6({
+    top: false,
+    bottom: false
+  });
+  const nodeRef = useRef4(null);
+  const cleanupRef = useRef4(null);
+  const measure = useCallback2(() => {
+    const el = nodeRef.current;
+    if (!el) return;
+    const overflowing = el.scrollHeight - el.clientHeight > EPSILON;
+    const next = {
+      top: overflowing && el.scrollTop > EPSILON,
+      bottom: overflowing && el.scrollTop + el.clientHeight < el.scrollHeight - EPSILON
+    };
+    setState(
+      (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
+    );
+  }, []);
+  const ref = useCallback2(
+    (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+      nodeRef.current = node;
+      if (!node) return;
+      node.addEventListener("scroll", measure, { passive: true });
+      const ro = new ResizeObserver(measure);
+      ro.observe(node);
+      const mo = new MutationObserver(measure);
+      mo.observe(node, { childList: true, subtree: true });
+      cleanupRef.current = () => {
+        node.removeEventListener("scroll", measure);
+        ro.disconnect();
+        mo.disconnect();
+      };
+      requestAnimationFrame(measure);
+    },
+    [measure]
+  );
+  useEffect3(() => () => cleanupRef.current?.(), []);
+  return {
+    ref,
+    state,
+    fadeProps: {
+      "data-fade-top": state.top ? "" : void 0,
+      "data-fade-bottom": state.bottom ? "" : void 0,
+      className: "matrx-scroll-fade"
+    }
+  };
+}
+export {
+  Badge,
+  BasicInput,
+  BottomSheet,
+  BottomSheetBody,
+  BottomSheetFooter,
+  BottomSheetHeader,
+  Button,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  CreatablePicker,
+  DEFAULT_SCORE_THRESHOLDS,
+  EditableLabel,
+  EnterInput,
+  Input,
+  InputWithPrefix,
+  Label,
+  OverflowToolbar,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  PortalContainerProvider,
+  RadixDialogModalProvider,
+  ScoreRing,
+  SegmentedControl,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator2 as Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+  TabbedBottomSheet,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  scoreAccentBgClasses,
+  scoreRingColorClasses,
+  selectTriggerVariants,
+  sheetVariants,
+  usePortalContainer,
+  useRadixDialogModal,
+  useScrollFade
+};
 //# sourceMappingURL=index.js.map