@tutti-os/ui-system 0.0.1

package/dist/chunk-2AUYRRDG.js

@@ -0,0 +1,3078 @@
+import {
+  AgentSessionsIcon,
+  AppWindowIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CloseIcon,
+  FailedFilledIcon,
+  FileIcon,
+  FolderFilledIcon,
+  IssueIcon,
+  LoadingIcon,
+  SuccessFilledIcon,
+  WarningFilledIcon,
+  WarningLinedIcon
+} from "./chunk-UTUVPSKL.js";
+import {
+  cn
+} from "./chunk-DGPY4WP3.js";
+
+// src/components/badge/badge.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[4px] border border-transparent px-1 py-0.5 text-[0.72rem] font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--transparency-block)] text-[var(--text-secondary)] [a]:hover:bg-[var(--transparency-hover)]",
+        accent: "bg-[var(--accent-bg)] text-[var(--accent)] [a]:hover:bg-[var(--accent-bg)]",
+        success: "bg-[color-mix(in_srgb,var(--state-success)_10%,transparent)] text-[var(--state-success)] [a]:hover:bg-[color-mix(in_srgb,var(--state-success)_14%,transparent)]",
+        warning: "bg-[color-mix(in_srgb,var(--state-warning)_12%,transparent)] text-[var(--state-warning)] [a]:hover:bg-[color-mix(in_srgb,var(--state-warning)_16%,transparent)]",
+        pending: "bg-[color-mix(in_srgb,var(--rich-text-mention-issue)_12%,transparent)] text-[var(--rich-text-mention-issue)] [a]:hover:bg-[color-mix(in_srgb,var(--rich-text-mention-issue)_16%,transparent)]",
+        muted: "bg-[color-mix(in_srgb,var(--transparency-block)_72%,transparent)] text-[var(--text-tertiary)] [a]:hover:bg-[var(--transparency-hover)]",
+        secondary: "bg-[var(--transparency-block)] text-[var(--text-secondary)] [a]:hover:bg-[var(--transparency-hover)]",
+        destructive: "bg-[var(--on-danger)] text-[var(--state-danger)] focus-visible:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] [a]:hover:bg-[var(--on-danger-hover)]",
+        outline: "border-border bg-card/90 text-foreground [a]:hover:bg-muted [a]:hover:text-foreground",
+        ghost: "hover:bg-accent/80 hover:text-accent-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/bare-icon-button/bare-icon-button.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var bareIconButtonVariants = cva2(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent bg-transparent p-0 text-[var(--text-tertiary)] transition-[color,opacity,box-shadow] duration-150 outline-none select-none hover:border-transparent hover:bg-transparent hover:text-[var(--text-primary)] active:bg-transparent active:text-[var(--text-primary)] aria-expanded:bg-transparent aria-expanded:text-[var(--text-primary)] focus-visible:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-[var(--text-disabled)] disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      size: {
+        md: "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-4",
+        sm: "size-5 rounded-[3px] [&_svg:not([class*='size-'])]:size-3.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function BareIconButton({
+  className,
+  size = "md",
+  asChild = false,
+  type = "button",
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "bare-icon-button",
+      "data-size": size,
+      type,
+      className: cn(bareIconButtonVariants({ size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/button/button.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { Slot as Slot3 } from "radix-ui";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva3(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--text-primary)] text-[var(--text-inverted)] shadow-none hover:bg-[var(--text-primary-hover)]",
+        outline: "border-border bg-card text-foreground hover:bg-muted/80 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-transparency-block text-[var(--text-primary)] hover:bg-transparency-hover aria-expanded:bg-transparency-hover aria-expanded:text-[var(--text-primary)]",
+        ghost: "bg-transparent text-[var(--text-primary)] hover:bg-transparency-hover aria-expanded:bg-transparency-hover aria-expanded:text-[var(--text-primary)]",
+        chrome: "border border-transparent bg-transparent text-[var(--text-tertiary)] shadow-none hover:border-transparent hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] active:bg-[var(--transparency-active)] active:text-[var(--text-primary)] aria-expanded:border-transparent aria-expanded:bg-[var(--transparency-block)] aria-expanded:text-[var(--text-primary)] disabled:pointer-events-auto disabled:cursor-not-allowed disabled:opacity-45",
+        destructive: "bg-[var(--state-danger)] text-[var(--white-stationary)] hover:bg-[var(--state-danger-hover)] focus-visible:border-[var(--state-danger)] focus-visible:ring-[color-mix(in_srgb,var(--state-danger)_25%,transparent)]",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-[6px] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        dialog: "h-8 gap-[6px] rounded-md px-3 text-sm font-normal leading-5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 rounded-sm px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-sm px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-2 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-sm in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    },
+    compoundVariants: [
+      {
+        variant: "chrome",
+        size: "icon-sm",
+        class: "rounded-[4px]"
+      }
+    ]
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot3.Root : "button";
+  return /* @__PURE__ */ jsx3(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/card/card.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-lg border border-border/70 bg-card py-4 text-sm text-card-foreground shadow-none has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:border-border/70 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm leading-[1.3] text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "flex items-center rounded-b-lg border-t border-border/70 bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/checkbox/checkbox.tsx
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--transparency-block)] text-[var(--text-inverted)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] disabled:cursor-not-allowed disabled:border-[var(--border-1)] disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-inverted)] disabled:opacity-100 data-disabled:border-[var(--border-1)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] disabled:data-[state=checked]:border-[var(--border-1)] disabled:data-[state=checked]:bg-[var(--text-disabled)] data-disabled:data-[state=checked]:border-[var(--border-1)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx5(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3",
+          children: /* @__PURE__ */ jsx5(CheckIcon, { size: 14 })
+        }
+      )
+    }
+  );
+}
+
+// src/components/dialog/dialog.tsx
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+var dialogCloseDurationMs = 150;
+var DialogMotionContext = React.createContext({
+  open: false
+});
+function Dialog({
+  defaultOpen,
+  onOpenChange,
+  open,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen ?? false
+  );
+  const currentOpen = open ?? uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (nextOpen) => {
+      if (open === void 0) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange, open]
+  );
+  return /* @__PURE__ */ jsx6(DialogMotionContext.Provider, { value: { open: currentOpen }, children: /* @__PURE__ */ jsx6(
+    DialogPrimitive.Root,
+    {
+      "data-slot": "dialog",
+      open: currentOpen,
+      onOpenChange: handleOpenChange,
+      ...props
+    }
+  ) });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate bg-[var(--backdrop)] duration-150 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      style: { zIndex: "var(--z-dialog-overlay)", ...style },
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  overlayClassName,
+  portaled = true,
+  showCloseButton = true,
+  style,
+  ...props
+}) {
+  const { open } = React.useContext(DialogMotionContext);
+  const [mounted, setMounted] = React.useState(open);
+  React.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return void 0;
+    }
+    const timeout = window.setTimeout(() => {
+      setMounted(false);
+    }, dialogCloseDurationMs);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [open]);
+  if (!mounted) {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, { className: overlayClassName, forceMount: true }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        forceMount: true,
+        className: cn(
+          portaled ? "fixed" : "absolute",
+          "pointer-events-none top-1/2 left-1/2 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 origin-center gap-3 rounded-[16px] border border-border-1 bg-[var(--background-panel)] p-[18px] text-sm text-foreground shadow-panel outline-none ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[transform,opacity] sm:max-w-[360px] data-[state=closed]:!pointer-events-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.96] data-[state=closed]:duration-[150ms] data-[state=open]:pointer-events-auto data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.96] data-[state=open]:duration-[250ms] motion-reduce:animate-none",
+          className
+        ),
+        style: { zIndex: "var(--z-dialog)", ...style },
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "absolute top-3 right-3",
+              size: "icon-sm",
+              children: [
+                /* @__PURE__ */ jsx6(CloseIcon, {}),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+  if (!portaled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx6(DialogPortal, { forceMount: true, children: content });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 pr-8", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end sm:gap-2.5",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "dialog", children: "Close" }) })
+      ]
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-base leading-[1.35] font-semibold tracking-normal text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-sm font-[400] leading-[1.3] text-text-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/confirmation-dialog/confirmation-dialog.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function confirmToneClassName(tone) {
+  if (tone === "destructive") {
+    return "shadow-none";
+  }
+  return void 0;
+}
+function ConfirmationDialog({
+  cancelLabel,
+  children,
+  className,
+  confirmBusy = false,
+  confirmDisabled = false,
+  confirmLabel,
+  description,
+  disableCloseWhileBusy = true,
+  footer,
+  hideConfirmButton = false,
+  onCancel,
+  onConfirm,
+  onOpenChange,
+  open,
+  overlayClassName,
+  portaled = true,
+  tone = "default",
+  title
+}) {
+  const isCloseDisabled = disableCloseWhileBusy && confirmBusy;
+  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
+    DialogContent,
+    {
+      className: cn(
+        "max-w-[calc(100%-2rem)] text-left sm:max-w-[360px]",
+        className
+      ),
+      overlayClassName: cn(overlayClassName),
+      portaled,
+      showCloseButton: false,
+      onEscapeKeyDown: (event) => {
+        if (isCloseDisabled) {
+          event.preventDefault();
+        }
+      },
+      onInteractOutside: (event) => {
+        if (isCloseDisabled) {
+          event.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(DialogHeader, { children: [
+          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+          description ? /* @__PURE__ */ jsx7(DialogDescription, { children: description }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx7("div", { className: "text-sm leading-[1.3] text-text-secondary", children }) : null,
+        footer ?? /* @__PURE__ */ jsxs2(DialogFooter, { children: [
+          /* @__PURE__ */ jsx7(
+            Button,
+            {
+              disabled: confirmBusy,
+              size: "dialog",
+              type: "button",
+              variant: "ghost",
+              onClick: () => {
+                onCancel?.();
+                onOpenChange(false);
+              },
+              children: cancelLabel
+            }
+          ),
+          hideConfirmButton ? null : /* @__PURE__ */ jsx7(
+            Button,
+            {
+              disabled: confirmBusy || confirmDisabled,
+              size: "dialog",
+              type: "button",
+              variant: tone === "default" ? "default" : "destructive",
+              className: cn("shadow-none", confirmToneClassName(tone)),
+              onClick: () => {
+                onConfirm?.();
+              },
+              children: confirmLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/date-picker/date-picker.tsx
+import * as React2 from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultLabels = {
+  placeholder: "Year / Month / Day",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  clear: "Clear",
+  today: "Today",
+  weekdayLabels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+};
+var DATE_PICKER_POPOVER_WIDTH_PX = 264;
+var DATE_PICKER_POPOVER_HEIGHT_PX = 336;
+var DATE_PICKER_POPOVER_GAP_PX = 6;
+var DATE_PICKER_VIEWPORT_MARGIN_PX = 8;
+function parseDateValue(value) {
+  if (!value) {
+    return null;
+  }
+  const [year, month, day] = value.split("-").map(Number);
+  if (!year || !month || !day) {
+    return null;
+  }
+  return new Date(year, month - 1, day);
+}
+function formatDateValue(date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function defaultDisplayValueFormatter(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(date);
+}
+function defaultMonthLabelFormatter(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "long"
+  }).format(date);
+}
+function isSameDate(left, right) {
+  return Boolean(
+    left && right && left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate()
+  );
+}
+function buildMonthGrid(monthDate) {
+  const firstOfMonth = new Date(
+    monthDate.getFullYear(),
+    monthDate.getMonth(),
+    1
+  );
+  const gridStart = new Date(firstOfMonth);
+  gridStart.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(gridStart);
+    date.setDate(gridStart.getDate() + index);
+    return date;
+  });
+}
+function resolvePopoverPosition(rect) {
+  const width = Math.max(rect.width, DATE_PICKER_POPOVER_WIDTH_PX);
+  const maxLeft = window.innerWidth - width - DATE_PICKER_VIEWPORT_MARGIN_PX;
+  const left = Math.max(
+    DATE_PICKER_VIEWPORT_MARGIN_PX,
+    Math.min(rect.left, Math.max(DATE_PICKER_VIEWPORT_MARGIN_PX, maxLeft))
+  );
+  const belowTop = rect.bottom + DATE_PICKER_POPOVER_GAP_PX;
+  const aboveTop = rect.top - DATE_PICKER_POPOVER_GAP_PX - DATE_PICKER_POPOVER_HEIGHT_PX;
+  const canOpenBelow = belowTop + DATE_PICKER_POPOVER_HEIGHT_PX <= window.innerHeight - DATE_PICKER_VIEWPORT_MARGIN_PX;
+  const top = canOpenBelow ? belowTop : Math.max(DATE_PICKER_VIEWPORT_MARGIN_PX, aboveTop);
+  return { top, left, width };
+}
+function subscribeScrollableAncestors(trigger, onScrollLike) {
+  const cleanups = [];
+  let element = trigger.parentElement;
+  while (element && element !== document.documentElement) {
+    const { overflowX, overflowY } = window.getComputedStyle(element);
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay" || overflowX === "auto" || overflowX === "scroll" || overflowX === "overlay") {
+      element.addEventListener("scroll", onScrollLike, { passive: true });
+      const current = element;
+      cleanups.push(() => current.removeEventListener("scroll", onScrollLike));
+    }
+    element = element.parentElement;
+  }
+  return () => cleanups.forEach((dispose) => dispose());
+}
+var DatePicker = React2.forwardRef(
+  ({
+    className,
+    value,
+    onValueChange,
+    onClick,
+    disabled,
+    labels,
+    formatDisplayValue = defaultDisplayValueFormatter,
+    formatMonthLabel = defaultMonthLabelFormatter,
+    ...props
+  }, ref) => {
+    const resolvedLabels = {
+      ...defaultLabels,
+      ...labels,
+      weekdayLabels: labels?.weekdayLabels ?? defaultLabels.weekdayLabels
+    };
+    const triggerRef = React2.useRef(null);
+    const popoverRef = React2.useRef(null);
+    const selectedDate = React2.useMemo(() => parseDateValue(value), [value]);
+    const [isOpen, setIsOpen] = React2.useState(false);
+    const [visibleMonth, setVisibleMonth] = React2.useState(
+      () => selectedDate ?? /* @__PURE__ */ new Date()
+    );
+    const [popoverPosition, setPopoverPosition] = React2.useState(null);
+    React2.useEffect(() => {
+      if (selectedDate) {
+        setVisibleMonth(selectedDate);
+      }
+    }, [selectedDate]);
+    const openPopover = React2.useCallback(() => {
+      const trigger = triggerRef.current;
+      if (!trigger) {
+        return;
+      }
+      setPopoverPosition(
+        resolvePopoverPosition(trigger.getBoundingClientRect())
+      );
+      setIsOpen(true);
+    }, []);
+    React2.useLayoutEffect(() => {
+      if (!isOpen) {
+        return;
+      }
+      const sync = () => {
+        const element = triggerRef.current;
+        if (!element) {
+          return;
+        }
+        setPopoverPosition(
+          resolvePopoverPosition(element.getBoundingClientRect())
+        );
+      };
+      sync();
+      const rafId = window.requestAnimationFrame(sync);
+      return () => window.cancelAnimationFrame(rafId);
+    }, [isOpen]);
+    React2.useEffect(() => {
+      if (!isOpen) {
+        return void 0;
+      }
+      const ac = new AbortController();
+      const { signal } = ac;
+      const handlePointerDown = (event) => {
+        const target = event.target;
+        if (target && (triggerRef.current?.contains(target) || popoverRef.current?.contains(target))) {
+          return;
+        }
+        setIsOpen(false);
+      };
+      const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+          setIsOpen(false);
+          triggerRef.current?.focus();
+        }
+      };
+      const updatePosition = () => {
+        const element = triggerRef.current;
+        if (!element) {
+          return;
+        }
+        setPopoverPosition(
+          resolvePopoverPosition(element.getBoundingClientRect())
+        );
+      };
+      document.addEventListener("pointerdown", handlePointerDown, { signal });
+      document.addEventListener("keydown", handleKeyDown, { signal });
+      window.addEventListener("resize", updatePosition, { signal });
+      document.addEventListener(
+        "wheel",
+        () => window.requestAnimationFrame(updatePosition),
+        {
+          capture: true,
+          passive: true,
+          signal
+        }
+      );
+      const unsubAncestors = triggerRef.current ? subscribeScrollableAncestors(triggerRef.current, updatePosition) : () => {
+      };
+      return () => {
+        ac.abort();
+        unsubAncestors();
+      };
+    }, [isOpen]);
+    const today = React2.useMemo(() => /* @__PURE__ */ new Date(), []);
+    const monthGrid = React2.useMemo(
+      () => buildMonthGrid(visibleMonth),
+      [visibleMonth]
+    );
+    const displayValue = selectedDate ? formatDisplayValue(selectedDate) : resolvedLabels.placeholder;
+    const selectDate = (date) => {
+      onValueChange?.(formatDateValue(date));
+      setIsOpen(false);
+      triggerRef.current?.focus();
+    };
+    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          ref: (node) => {
+            triggerRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          "data-slot": "date-picker",
+          disabled,
+          type: "button",
+          className: cn(
+            "inline-flex h-8 min-h-8 w-full items-center justify-start rounded-md border border-transparent bg-[var(--workbench-field-bg)] px-3 text-left text-sm text-foreground transition-[background-color,border-color,box-shadow,color] outline-none hover:bg-muted/60 focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+            !selectedDate && "text-muted-foreground",
+            className
+          ),
+          onClick: (event) => {
+            onClick?.(event);
+            if (disabled) {
+              return;
+            }
+            if (isOpen) {
+              setIsOpen(false);
+            } else {
+              openPopover();
+            }
+          },
+          ...props,
+          children: /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: displayValue })
+        }
+      ),
+      isOpen && popoverPosition ? createPortal(
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            ref: popoverRef,
+            "data-slot": "date-picker-content",
+            className: "fixed z-50 flex min-w-[264px] max-w-[min(100vw-16px,320px)] flex-col overflow-hidden rounded-xl border border-border/70 bg-popover p-3 text-popover-foreground shadow-soft",
+            style: {
+              top: popoverPosition.top,
+              left: popoverPosition.left,
+              width: popoverPosition.width,
+              zIndex: "var(--z-popover)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx8(
+                    "button",
+                    {
+                      "aria-label": resolvedLabels.previousMonth,
+                      className: "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      type: "button",
+                      onClick: () => setVisibleMonth(
+                        (current) => new Date(
+                          current.getFullYear(),
+                          current.getMonth() - 1,
+                          1
+                        )
+                      ),
+                      children: /* @__PURE__ */ jsx8(ArrowLeftIcon, { size: 16 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8(
+                    "button",
+                    {
+                      "aria-label": resolvedLabels.nextMonth,
+                      className: "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      type: "button",
+                      onClick: () => setVisibleMonth(
+                        (current) => new Date(
+                          current.getFullYear(),
+                          current.getMonth() + 1,
+                          1
+                        )
+                      ),
+                      children: /* @__PURE__ */ jsx8(ArrowRightIcon, { size: 16 })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-7 gap-1 text-center text-xs font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx8("div", { className: "py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "mt-1 grid grid-cols-7 justify-items-center gap-1",
+                  role: "grid",
+                  children: monthGrid.map((date) => {
+                    const isSelected = isSameDate(date, selectedDate);
+                    const isToday = isSameDate(date, today);
+                    const inCurrentMonth = date.getMonth() === visibleMonth.getMonth();
+                    return /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        "aria-pressed": isSelected,
+                        className: cn(
+                          "inline-flex h-8 w-8 items-center justify-center rounded-sm text-sm transition-[background-color,color,box-shadow] hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+                          inCurrentMonth ? "text-foreground" : "text-muted-foreground",
+                          isToday && "bg-primary/10 text-primary shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]",
+                          isSelected && "bg-primary text-primary-foreground hover:bg-primary"
+                        ),
+                        role: "gridcell",
+                        type: "button",
+                        onClick: () => selectDate(date),
+                        children: date.getDate()
+                      },
+                      formatDateValue(date)
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    className: "inline-flex min-h-8 items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    type: "button",
+                    onClick: () => {
+                      onValueChange?.("");
+                      setIsOpen(false);
+                      triggerRef.current?.focus();
+                    },
+                    children: resolvedLabels.clear
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    className: "inline-flex min-h-8 items-center justify-center rounded-sm bg-primary px-3 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
+                    type: "button",
+                    onClick: () => selectDate(today),
+                    children: resolvedLabels.today
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        document.body
+      ) : null
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/components/drawer/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DrawerPrimitive.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "fixed inset-0 isolate bg-[var(--backdrop)] duration-150 supports-backdrop-filter:backdrop-blur-sm data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0",
+        className
+      ),
+      style: { zIndex: "var(--z-dialog-overlay)", ...style },
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  portalContainer,
+  showOverlay = true,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
+    showOverlay ? /* @__PURE__ */ jsx9(DrawerOverlay, {}) : null,
+    /* @__PURE__ */ jsxs4(
+      DrawerPrimitive.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content fixed flex h-auto flex-col border-[var(--border-1)] bg-background-fronted text-sm text-foreground shadow-panel outline-none",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b",
+          className
+        ),
+        style: { zIndex: "var(--z-dialog)", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DrawerPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn(
+        "text-base font-medium leading-[1.35] text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DrawerPrimitive.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/dropdown-menu/dropdown-menu.tsx
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+// src/components/menu-surface/menu-surface.tsx
+import * as React3 from "react";
+import { Slot as Slot4 } from "radix-ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var menuSurfaceClassName = "t-dropdown flex flex-col gap-0.5 rounded-[8px] border border-[var(--border-1)] bg-[var(--background-fronted)] p-1 text-sm text-[var(--text-primary)] shadow-panel outline-none";
+var menuItemClassName = "relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] focus:bg-[var(--transparency-hover)] focus:text-[var(--text-primary)] data-[highlighted]:bg-[var(--transparency-hover)] data-[highlighted]:text-[var(--text-primary)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
+var menuItemWithIndicatorClassName = `${menuItemClassName} pr-8`;
+var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-[var(--accent)]";
+var MenuSurface = React3.forwardRef(
+  ({
+    asChild = false,
+    className,
+    "data-state": dataState,
+    state = "open",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot4.Root : "div";
+    return /* @__PURE__ */ jsx10(
+      Comp,
+      {
+        ...props,
+        ref,
+        className: cn(menuSurfaceClassName, className),
+        "data-state": dataState ?? state
+      }
+    );
+  }
+);
+MenuSurface.displayName = "MenuSurface";
+
+// src/components/dropdown-menu/dropdown-menu.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  children,
+  align = "start",
+  sideOffset = 4,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.Content,
+    {
+      asChild: true,
+      "data-slot": "dropdown-menu-content",
+      align,
+      sideOffset,
+      ...props,
+      children: /* @__PURE__ */ jsx11(
+        MenuSurface,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn(
+            "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+            className
+          ),
+          style: { zIndex: "var(--z-popover)", ...style },
+          children
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.Group,
+    {
+      "data-slot": "dropdown-menu-group",
+      className: cn("flex flex-col gap-0.5", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-inset": inset,
+      "data-slot": "dropdown-menu-item",
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item",
+        menuItemClassName,
+        "data-inset:pl-7 data-[variant=destructive]:text-[var(--state-danger)] data-[variant=destructive]:focus:bg-[color-mix(in_srgb,var(--state-danger)_10%,transparent)] data-[variant=destructive]:focus:text-[var(--state-danger)] data-[variant=destructive]:hover:bg-[color-mix(in_srgb,var(--state-danger)_10%,transparent)] data-[variant=destructive]:hover:text-[var(--state-danger)] data-[variant=destructive]:*:[svg]:text-[var(--state-danger)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      checked,
+      "data-inset": inset,
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        menuItemWithIndicatorClassName,
+        "data-inset:pl-7",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: menuItemIndicatorClassName,
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      className: cn("flex flex-col gap-0.5", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-inset": inset,
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        menuItemWithIndicatorClassName,
+        "data-inset:pl-7",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: menuItemIndicatorClassName,
+            "data-slot": "dropdown-menu-radio-item-indicator",
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-inset": inset,
+      "data-slot": "dropdown-menu-label",
+      className: cn(
+        "px-1.5 py-1 text-xs font-medium text-[var(--text-secondary)] data-inset:pl-7",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("mx-2 my-0.5 h-px bg-[var(--border-1)]", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-[var(--text-secondary)] group-focus/dropdown-menu-item:text-[var(--text-primary)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-inset": inset,
+      "data-slot": "dropdown-menu-sub-trigger",
+      className: cn(
+        menuItemClassName,
+        "data-inset:pl-7 data-open:bg-[var(--transparency-block)] data-open:text-[var(--text-primary)]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx11(ArrowRightIcon, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    DropdownMenuPrimitive.SubContent,
+    {
+      asChild: true,
+      "data-slot": "dropdown-menu-sub-content",
+      ...props,
+      children: /* @__PURE__ */ jsx11(
+        MenuSurface,
+        {
+          "data-slot": "dropdown-menu-sub-content",
+          className: cn(
+            "z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+            className
+          ),
+          style: { zIndex: "var(--z-popover)", ...style },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/input/input.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var inputVariantClassNames = {
+  default: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
+  lg: "h-12 rounded-[8px] px-4 py-3 text-base leading-[1.3]",
+  md: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
+  sm: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
+  otp: "h-12 w-12 rounded-[4px] px-0 text-center text-xl font-medium sm:h-14 sm:w-14 sm:text-2xl"
+};
+function Input({
+  className,
+  size = "default",
+  type,
+  variant,
+  ...props
+}) {
+  const resolvedVariant = variant ?? (size === "sm" ? "sm" : "default");
+  return /* @__PURE__ */ jsx12(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      "data-size": size,
+      "data-variant": resolvedVariant,
+      className: cn(
+        "w-full min-w-0 border border-transparent bg-[var(--transparency-block)] font-normal text-[var(--text-primary)] shadow-none transition-colors duration-200 outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--text-primary)] placeholder:text-[var(--text-placeholder)] hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none",
+        inputVariantClassNames[resolvedVariant],
+        !variant && size === "sm" && "h-7 rounded-[4px] px-2 text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/mention-pill/mention-pill.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var mentionPillTokenByKind = {
+  app: "var(--rich-text-folder)",
+  issue: "var(--rich-text-mention-issue)",
+  session: "var(--rich-text-mention-session)",
+  file: "var(--folder)"
+};
+var mentionPillDataKindByKind = {
+  app: "app",
+  issue: "task",
+  session: "session",
+  file: "file"
+};
+function MentionPill({
+  className,
+  fileKind = "file",
+  iconUrl,
+  kind,
+  label,
+  removable = kind === "file",
+  removeButtonProps,
+  style,
+  summary,
+  ...props
+}) {
+  const isFile = kind === "file";
+  const Icon = isFile ? fileKind === "folder" ? FolderFilledIcon : FileIcon : kind === "app" ? AppWindowIcon : kind === "issue" ? IssueIcon : AgentSessionsIcon;
+  const color = isFile && fileKind === "folder" ? "var(--folder)" : mentionPillTokenByKind[kind];
+  const dataKind = mentionPillDataKindByKind[kind];
+  const normalizedIconUrl = iconUrl?.trim() ?? "";
+  const iconSizeClassName = "size-4";
+  const iconShellClassName = isFile ? "size-4" : "size-[18px]";
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      className: cn(
+        "group relative top-[3px] inline-flex max-w-full cursor-default items-center overflow-hidden rounded-[4px] border border-transparent bg-transparent py-0.5 align-baseline text-sm font-medium leading-5 no-underline transition-colors hover:border-transparent hover:bg-[color-mix(in_srgb,currentColor_12%,transparent)]",
+        isFile ? "gap-1.5 px-1.5" : "gap-1 px-1",
+        className
+      ),
+      "data-agent-file-mention": "true",
+      "data-agent-mention-kind": dataKind,
+      "data-slot": "mention-pill",
+      style: {
+        color,
+        ...style
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "span",
+          {
+            "aria-hidden": removable ? void 0 : true,
+            className: cn(
+              "relative grid shrink-0 place-items-center",
+              iconShellClassName
+            ),
+            children: [
+              normalizedIconUrl ? /* @__PURE__ */ jsx13(
+                "img",
+                {
+                  src: normalizedIconUrl,
+                  alt: "",
+                  className: cn(
+                    "size-full rounded-[3px] object-cover transition-opacity",
+                    removable && "group-hover:opacity-0 group-focus-within:opacity-0"
+                  ),
+                  decoding: "async",
+                  loading: "lazy",
+                  draggable: false
+                }
+              ) : /* @__PURE__ */ jsx13(
+                Icon,
+                {
+                  className: cn(
+                    "text-current transition-opacity",
+                    removable && "group-hover:opacity-0 group-focus-within:opacity-0",
+                    iconSizeClassName
+                  )
+                }
+              ),
+              removable ? /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  "aria-label": removeButtonProps?.["aria-label"],
+                  type: "button",
+                  ...removeButtonProps,
+                  className: cn(
+                    "absolute top-1/2 left-1/2 inline-flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-sm text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-transparency-block hover:text-[var(--text-primary)] focus-visible:opacity-100",
+                    removeButtonProps?.className
+                  ),
+                  children: /* @__PURE__ */ jsx13(CloseIcon, { className: "size-3.5" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx13("span", { children: label }),
+          summary ? /* @__PURE__ */ jsxs6("span", { className: "text-current", children: [
+            " ",
+            summary
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/popover/popover.tsx
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+}
+function PopoverClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(PopoverPortal, { children: /* @__PURE__ */ jsx14(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "t-dropdown z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg border border-[var(--border-1)] bg-[var(--background-fronted)] p-3 text-sm text-popover-foreground shadow-soft outline-hidden",
+        className
+      ),
+      style: { zIndex: "var(--z-popover)" },
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+
+// src/components/resizable/resizable.tsx
+import * as ResizablePrimitive from "react-resizable-panels";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ResizablePanelGroup({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    ResizablePrimitive.Group,
+    {
+      "data-orientation": orientation,
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "flex h-full w-full data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      orientation
+    }
+  );
+}
+function ResizablePanel(props) {
+  return /* @__PURE__ */ jsx15(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({
+  className,
+  withHandle,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    ResizablePrimitive.Separator,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "group relative flex items-center justify-center bg-transparent outline-none after:absolute after:bg-border/70 after:transition-colors hover:after:bg-border focus-visible:after:bg-ring aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-px aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=vertical]:h-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:cursor-col-resize aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:left-1/2 aria-[orientation=vertical]:after:w-px aria-[orientation=vertical]:after:-translate-x-1/2",
+        className
+      ),
+      ...props,
+      children: withHandle ? /* @__PURE__ */ jsx15("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 opacity-0 transition-[background-color,opacity] group-hover:bg-border group-hover:opacity-100 group-focus-visible:bg-border group-focus-visible:opacity-100 group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
+    }
+  );
+}
+
+// src/components/scroll-area/scroll-area.tsx
+import * as React4 from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+function ScrollArea({
+  className,
+  children,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs7(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("group/scroll-area relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs7(
+          ScrollAreaPrimitive.Viewport,
+          {
+            ...viewportProps,
+            "data-slot": "scroll-area-viewport",
+            "data-testid": viewportTestId,
+            ref: viewportRef,
+            className: cn(
+              "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+              viewportClassName
+            ),
+            children: [
+              viewportContentStyle ? /* @__PURE__ */ jsx16(ScrollAreaViewportContentStyleBridge, { style: viewportContentStyle }) : null,
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx16(ScrollBar, {}),
+        /* @__PURE__ */ jsx16(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollAreaViewportContentStyleBridge({
+  style
+}) {
+  const markerRef = React4.useRef(null);
+  React4.useLayoutEffect(() => {
+    const contentElement = markerRef.current?.parentElement;
+    if (!contentElement) {
+      return;
+    }
+    const previousValues = /* @__PURE__ */ new Map();
+    for (const [property, value] of Object.entries(style)) {
+      const cssProperty = toCssPropertyName(property);
+      previousValues.set(cssProperty, {
+        value: contentElement.style.getPropertyValue(cssProperty),
+        priority: contentElement.style.getPropertyPriority(cssProperty)
+      });
+      if (value === void 0 || value === null) {
+        contentElement.style.removeProperty(cssProperty);
+      } else {
+        contentElement.style.setProperty(cssProperty, String(value));
+      }
+    }
+    return () => {
+      for (const [cssProperty, previous] of previousValues) {
+        if (previous.value) {
+          contentElement.style.setProperty(
+            cssProperty,
+            previous.value,
+            previous.priority
+          );
+        } else {
+          contentElement.style.removeProperty(cssProperty);
+        }
+      }
+    };
+  }, [style]);
+  return /* @__PURE__ */ jsx16("span", { ref: markerRef, "data-slot": "scroll-area-content-style-bridge", hidden: true });
+}
+function toCssPropertyName(property) {
+  return property.startsWith("--") ? property : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "group/scrollbar absolute z-10 flex touch-none p-[2px] opacity-0 transition-opacity duration-150 select-none group-hover/scroll-area:opacity-100 group-focus-within/scroll-area:opacity-100 data-[orientation=horizontal]:right-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:top-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:bottom-0 data-[orientation=vertical]:w-2",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx16(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-[var(--transparency-block)] transition-colors duration-150 group-hover/scrollbar:bg-[var(--transparency-hover)]"
+        }
+      )
+    }
+  );
+}
+
+// src/components/select/select.tsx
+import { Select as SelectPrimitive } from "radix-ui";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    SelectPrimitive.Group,
+    {
+      "data-slot": "select-group",
+      className: cn("flex flex-col gap-0.5 scroll-my-1 p-1", className),
+      ...props
+    }
+  );
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  variant = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs8(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      "data-variant": variant,
+      className: cn(
+        variant === "button" ? buttonVariants({ variant: "default", size }) : "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-transparent bg-[var(--transparency-block)] py-2 pr-2 pl-2.5 text-sm text-[var(--text-primary)] whitespace-nowrap transition-colors outline-none select-none hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none data-placeholder:text-[var(--text-placeholder)] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "[&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform [&>svg]:duration-200",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx17(
+          ChevronDownIcon,
+          {
+            className: cn("pointer-events-none size-4", "text-current")
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+    SelectPrimitive.Content,
+    {
+      asChild: true,
+      "data-slot": "select-content",
+      "data-align-trigger": position === "item-aligned",
+      position,
+      align,
+      ...props,
+      children: /* @__PURE__ */ jsxs8(
+        MenuSurface,
+        {
+          "data-slot": "select-content",
+          className: cn(
+            "relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
+            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
+          ),
+          style: { zIndex: "var(--z-popover)", ...style },
+          children: [
+            /* @__PURE__ */ jsx17(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx17(
+              SelectPrimitive.Viewport,
+              {
+                "data-position": position,
+                className: cn(
+                  "flex flex-col gap-0.5 data-[position=popper]:w-full data-[position=popper]:[min-width:var(--nextop-select-content-min-width,var(--radix-select-trigger-width))]"
+                ),
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx17(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    SelectPrimitive.Label,
+    {
+      "data-slot": "select-label",
+      className: cn(
+        "px-1.5 py-1 text-xs font-normal text-[var(--text-secondary)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectSplitLayout({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      "data-slot": "select-split-layout",
+      className: cn(
+        "grid h-full min-h-0 grid-cols-[minmax(0,1fr)_1px_minmax(104px,132px)] gap-1 overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectSplitColumn({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      "data-slot": "select-split-column",
+      className: cn("flex h-full min-h-0 min-w-0 flex-col", className),
+      ...props
+    }
+  );
+}
+function SelectSplitColumnLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      "data-slot": "select-split-column-label",
+      className: cn(
+        "shrink-0 px-2 pt-1 pb-2 text-xs font-normal leading-[18px] text-[var(--text-secondary)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectSplitColumnItems({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      "data-slot": "select-split-column-items",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto overscroll-contain",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectSplitDivider({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "select-split-divider",
+      className: cn(
+        "self-stretch bg-[var(--border-2,var(--border-1))]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  forceSelectedIndicator = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs8(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn("w-full", menuItemWithIndicatorClassName, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx17("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx17(
+          CheckIcon,
+          {
+            className: "pointer-events-none",
+            "data-slot": "select-item-forced-indicator"
+          }
+        ) : /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn(
+        "pointer-events-none mx-2 my-0.5 h-px bg-[var(--border-1)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "z-10 flex cursor-pointer items-center justify-center bg-[var(--background-fronted)] py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx17(ChevronUpIcon, {})
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "z-10 flex cursor-pointer items-center justify-center bg-[var(--background-fronted)] py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx17(ChevronDownIcon, {})
+    }
+  );
+}
+
+// src/components/separator/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx18(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/section-tabs/section-tabs.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+function SectionTabs({
+  tabs,
+  value,
+  onValueChange,
+  ariaLabel,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn("flex min-w-0 items-center gap-5", className),
+      "data-slot": "section-tabs",
+      "data-testid": testId,
+      role: "tablist",
+      children: tabs.map((tab) => {
+        const isActive = value === tab.value;
+        return /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            "aria-selected": isActive,
+            className: cn(
+              "relative inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap border-0 bg-transparent p-0 text-[15px] font-semibold leading-5 tracking-[0] text-[var(--text-secondary)] transition-colors duration-150 hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]",
+              isActive && "text-[var(--text-primary)]"
+            ),
+            "data-active": isActive ? "true" : "false",
+            "data-slot": "section-tabs-tab",
+            "data-testid": tab.testId,
+            role: "tab",
+            type: "button",
+            onClick: () => onValueChange(tab.value),
+            children: [
+              /* @__PURE__ */ jsx19("span", { className: "min-w-0 truncate", children: tab.label }),
+              tab.count !== void 0 ? /* @__PURE__ */ jsx19("span", { className: "text-[15px] font-semibold leading-5 text-[inherit]", children: tab.count }) : null
+            ]
+          },
+          tab.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/shortcut-badge/shortcut-badge.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ShortcutBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    "kbd",
+    {
+      "data-slot": "shortcut-badge",
+      className: cn(
+        "inline-flex h-5 min-w-0 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-[color-mix(in_srgb,var(--transparency-block)_72%,transparent)] px-1.5 py-1 font-[inherit] text-[11px] leading-none font-semibold whitespace-nowrap text-[var(--text-tertiary)] not-italic [font-variant:normal] [text-overflow:ellipsis]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/sonner/sonner.tsx
+import {
+  Toaster as SonnerToaster,
+  toast
+} from "sonner";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Toaster({ toastOptions, style, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    SonnerToaster,
+    {
+      closeButton: true,
+      expand: false,
+      gap: 8,
+      position: "top-right",
+      visibleToasts: 4,
+      icons: {
+        error: /* @__PURE__ */ jsx21(FailedFilledIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx21(WarningLinedIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx21(LoadingIcon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx21(SuccessFilledIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx21(WarningFilledIcon, { className: "size-4" })
+      },
+      style: {
+        "--normal-bg": "var(--background-fronted)",
+        "--normal-border": "var(--line-2)",
+        "--normal-text": "var(--text-primary)",
+        "--border-radius": "8px",
+        zIndex: "var(--z-toast)",
+        ...style
+      },
+      toastOptions: {
+        ...toastOptions,
+        classNames: {
+          toast: "group pointer-events-auto min-h-14 rounded-[8px] border border-[var(--line-2)] bg-[var(--background-fronted)] px-3.5 py-3 text-[var(--text-primary)] shadow-[0_14px_40px_var(--shadow-elevated)]",
+          title: "text-sm font-semibold leading-5 text-[var(--text-primary)]",
+          description: "mt-0.5 text-xs leading-5 text-[var(--text-secondary)]",
+          actionButton: "h-7 rounded-[6px] bg-[var(--text-primary)] px-2.5 text-xs font-normal text-[var(--text-inverted)] transition-colors hover:bg-[var(--text-primary-hover)]",
+          cancelButton: "h-7 rounded-[6px] bg-[var(--transparency-block)] px-2.5 text-xs font-normal text-[var(--text-primary)] transition-colors hover:bg-[var(--transparency-hover)]",
+          closeButton: "border-[var(--line-2)] bg-[var(--background-fronted)] text-[var(--text-secondary)] hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)]",
+          icon: "text-[var(--accent)]",
+          ...toastOptions?.classNames
+        }
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/spinner/spinner.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Spinner({
+  className,
+  size = 16,
+  strokeWidth = 2,
+  style,
+  testId,
+  trackColor
+}) {
+  return /* @__PURE__ */ jsx22(
+    LoadingIcon,
+    {
+      "data-slot": "spinner",
+      "data-testid": testId,
+      "aria-hidden": "true",
+      className: cn(
+        "inline-block shrink-0 animate-spin text-primary",
+        className
+      ),
+      size,
+      style,
+      strokeWidth,
+      trackColor
+    }
+  );
+}
+
+// src/components/status-dot/status-dot.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
+  variants: {
+    tone: {
+      neutral: "bg-muted-foreground/70",
+      green: "bg-emerald-500",
+      blue: "bg-sky-500",
+      amber: "bg-amber-500",
+      red: "bg-destructive"
+    },
+    size: {
+      xs: "size-1.5",
+      sm: "size-2",
+      md: "size-2.5"
+    },
+    pulse: {
+      true: "animate-pulse",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    tone: "neutral",
+    size: "sm",
+    pulse: false
+  }
+});
+function StatusDot({
+  tone = "neutral",
+  size = "sm",
+  pulse = false,
+  ariaLabel,
+  title,
+  className
+}) {
+  return /* @__PURE__ */ jsx23(
+    "span",
+    {
+      "aria-hidden": ariaLabel ? void 0 : true,
+      "aria-label": ariaLabel,
+      className: cn(statusDotVariants({ tone, size, pulse }), className),
+      "data-pulse": pulse ? "true" : void 0,
+      "data-size": size,
+      "data-slot": "status-dot",
+      "data-tone": tone,
+      role: ariaLabel ? "img" : void 0,
+      title
+    }
+  );
+}
+
+// src/components/switch/switch.tsx
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx24(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-[state=checked]:bg-[var(--accent)] data-[state=unchecked]:bg-[var(--text-disabled)] data-disabled:cursor-not-allowed data-disabled:opacity-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx24(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block rounded-full bg-[var(--white-stationary)] ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px] group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0"
+        }
+      )
+    }
+  );
+}
+
+// src/components/textarea/textarea.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-20 w-full rounded-[6px] border border-transparent bg-[var(--transparency-block)] px-3 py-3 text-sm font-normal leading-[1.3] text-[var(--text-primary)] transition-[background-color,border-color,color] outline-none shadow-none placeholder:text-[var(--text-placeholder)] hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/toast/toast.tsx
+import * as React5 from "react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var toastDefaultDurationMs = 3e3;
+function ToastProvider({
+  duration = toastDefaultDurationMs,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(ToastPrimitive.Provider, { duration, ...props });
+}
+var ToastVisualContext = React5.createContext(null);
+var toastStatusIconByVariant = {
+  destructive: FailedFilledIcon,
+  success: SuccessFilledIcon
+};
+function hasToastStatusIcon(variant) {
+  return variant === "destructive" || variant === "success";
+}
+function stripToastTrailingSentencePunctuation(value) {
+  let nextValue = value.replace(/\s+$/u, "");
+  while (nextValue.length > 0) {
+    const last = nextValue.at(-1);
+    if (last === "." || last === "\u3002" || last === "\uFF0E") {
+      nextValue = nextValue.slice(0, -1).replace(/\s+$/u, "");
+    } else {
+      break;
+    }
+  }
+  return nextValue;
+}
+function formatToastText(children) {
+  if (typeof children === "string") {
+    return stripToastTrailingSentencePunctuation(children);
+  }
+  const flatChildren = React5.Children.toArray(children);
+  if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
+    return stripToastTrailingSentencePunctuation(flatChildren[0]);
+  }
+  return children;
+}
+var toastVariants = cva5(
+  "group pointer-events-auto relative flex min-h-8 min-w-0 max-w-[min(92vw,420px)] items-center justify-center rounded-[8px] px-3 py-1.5 text-center text-sm font-normal leading-normal shadow-none transition-all data-closed:fade-out-80 data-closed:slide-out-to-top-full data-open:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+  {
+    variants: {
+      variant: {
+        default: "border border-[var(--toast-neutral-border)] bg-[var(--toast-neutral-bg)] text-[var(--toast-neutral-fg)]",
+        destructive: "border-0 bg-[var(--state-danger)] text-[var(--white-stationary)]",
+        success: "border-0 bg-[var(--state-success)] text-[var(--text-inverted)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ToastRoot({
+  className,
+  variant,
+  busy = false,
+  anchor = "viewport",
+  nodeInsetTopPx = 16,
+  children,
+  style,
+  ...props
+}) {
+  const isDestructive = variant === "destructive";
+  return /* @__PURE__ */ jsx26(
+    ToastPrimitive.Root,
+    {
+      "aria-busy": busy,
+      "aria-live": isDestructive ? "assertive" : "polite",
+      "data-slot": "toast",
+      className: cn(
+        toastVariants({ variant }),
+        anchor === "node" && "absolute left-1/2 -translate-x-1/2",
+        className
+      ),
+      role: isDestructive ? "alert" : "status",
+      style: {
+        ...anchor === "node" ? { top: `${nodeInsetTopPx}px` } : {},
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx26(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx26("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+    }
+  );
+}
+function ToastTitle({
+  className,
+  children,
+  ...props
+}) {
+  const toastVisual = React5.useContext(ToastVisualContext);
+  const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
+  return /* @__PURE__ */ jsxs10(
+    ToastPrimitive.Title,
+    {
+      "data-slot": "toast-title",
+      className: cn(
+        "inline-flex max-w-full items-center justify-center gap-[6px] text-center text-sm font-normal leading-normal",
+        className
+      ),
+      ...props,
+      children: [
+        toastVisual?.busy ? /* @__PURE__ */ jsx26(
+          Spinner,
+          {
+            className: "shrink-0 text-current",
+            size: 16,
+            strokeWidth: 2,
+            trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
+          }
+        ) : StatusIcon ? /* @__PURE__ */ jsx26(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx26("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+      ]
+    }
+  );
+}
+function ToastDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(
+    ToastPrimitive.Description,
+    {
+      "data-slot": "toast-description",
+      className: cn(
+        "box-border w-full px-2 text-xs font-normal leading-[1.3] text-current opacity-75 [overflow-wrap:anywhere]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastClose({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(
+    ToastPrimitive.Close,
+    {
+      "data-slot": "toast-close",
+      className: cn(
+        "absolute right-1.5 top-1.5 inline-flex size-5 items-center justify-center rounded-[4px] text-current opacity-65 transition-[background-color,opacity] hover:bg-[color-mix(in_srgb,currentColor_10%,transparent)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,currentColor_28%,transparent)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx26(CloseIcon, { className: "size-4" })
+    }
+  );
+}
+function ToastViewport({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(
+    ToastPrimitive.Viewport,
+    {
+      "data-slot": "toast-viewport",
+      className: cn(
+        "fixed left-1/2 top-3 flex max-h-screen w-auto -translate-x-1/2 flex-col items-center gap-2 p-0",
+        className
+      ),
+      style: { zIndex: "var(--z-toast)", ...style },
+      ...props
+    }
+  );
+}
+
+// src/components/tooltip/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 8,
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(TooltipPortal, { children: /* @__PURE__ */ jsx27(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-2 rounded-md border border-[var(--border-1)] bg-[var(--background-fronted)] px-2 py-1 text-sm leading-[1.3] text-popover-foreground shadow-soft outline-none 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 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      style: { zIndex: "var(--z-tooltip, 100700)", ...style },
+      ...props,
+      children
+    }
+  ) });
+}
+
+// src/components/underline-tabs/underline-tabs.tsx
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+function UnderlineTabs({
+  tabs,
+  value,
+  onValueChange,
+  ariaLabel,
+  className,
+  testId,
+  viewportTestId,
+  scrollLeftLabel = "Scroll left",
+  scrollRightLabel = "Scroll right",
+  scrollLeftTestId,
+  scrollRightTestId,
+  preventMouseDownDefault = false
+}) {
+  const viewportRef = useRef3(null);
+  const rowRef = useRef3(null);
+  const buttonRefs = useRef3({});
+  const [indicatorStyle, setIndicatorStyle] = useState3({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState3({
+    canScrollLeft: false,
+    canScrollRight: false
+  });
+  useLayoutEffect3(() => {
+    const row = rowRef.current;
+    const button = buttonRefs.current[value];
+    if (!row || !button) {
+      setIndicatorStyle(
+        (current) => current.left === 0 && current.width === 0 ? current : { left: 0, width: 0 }
+      );
+      return;
+    }
+    const nextStyle = {
+      left: button.offsetLeft,
+      width: button.offsetWidth
+    };
+    setIndicatorStyle(
+      (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
+    );
+  }, [tabs, value]);
+  useEffect3(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      return;
+    }
+    const syncOverflow = () => {
+      const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
+      setOverflow((current) => {
+        const next = {
+          canScrollLeft: viewport.scrollLeft > 1,
+          canScrollRight: viewport.scrollLeft < maxScrollLeft - 1
+        };
+        return current.canScrollLeft === next.canScrollLeft && current.canScrollRight === next.canScrollRight ? current : next;
+      });
+    };
+    syncOverflow();
+    viewport.addEventListener("scroll", syncOverflow, { passive: true });
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(syncOverflow);
+      resizeObserver.observe(viewport);
+      if (rowRef.current) {
+        resizeObserver.observe(rowRef.current);
+      }
+    }
+    window.addEventListener("resize", syncOverflow);
+    return () => {
+      viewport.removeEventListener("scroll", syncOverflow);
+      window.removeEventListener("resize", syncOverflow);
+      resizeObserver?.disconnect();
+    };
+  }, [tabs]);
+  const scrollTabs = (direction) => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      return;
+    }
+    const delta = Math.max(120, viewport.clientWidth * 0.72);
+    viewport.scrollBy({
+      left: direction === "left" ? -delta : delta,
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "group relative box-border h-[33px] min-w-0 border-b border-[var(--border-1)] px-4",
+        className
+      ),
+      "data-slot": "underline-tabs",
+      "data-testid": testId,
+      role: "tablist",
+      children: [
+        /* @__PURE__ */ jsx28(
+          "div",
+          {
+            ref: viewportRef,
+            className: cn(
+              "h-8 overflow-x-auto overflow-y-hidden [scrollbar-gutter:stable] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+              overflow.canScrollLeft && !overflow.canScrollRight && "[mask-image:linear-gradient(90deg,transparent_0,black_28px,black_100%)] [-webkit-mask-image:linear-gradient(90deg,transparent_0,black_28px,black_100%)]",
+              !overflow.canScrollLeft && overflow.canScrollRight && "[mask-image:linear-gradient(90deg,black_0,black_calc(100%_-_28px),transparent_100%)] [-webkit-mask-image:linear-gradient(90deg,black_0,black_calc(100%_-_28px),transparent_100%)]",
+              overflow.canScrollLeft && overflow.canScrollRight && "[mask-image:linear-gradient(90deg,transparent_0,black_28px,black_calc(100%_-_28px),transparent_100%)] [-webkit-mask-image:linear-gradient(90deg,transparent_0,black_28px,black_calc(100%_-_28px),transparent_100%)]"
+            ),
+            "data-can-scroll-left": overflow.canScrollLeft ? "true" : "false",
+            "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
+            "data-slot": "underline-tabs-viewport",
+            "data-testid": viewportTestId,
+            children: /* @__PURE__ */ jsxs11(
+              "div",
+              {
+                ref: rowRef,
+                className: "relative flex h-8 w-max min-w-full items-center gap-[14px] pb-2",
+                children: [
+                  tabs.map((tab) => {
+                    const isActive = value === tab.value;
+                    return /* @__PURE__ */ jsxs11(
+                      "button",
+                      {
+                        ref: (element) => {
+                          if (element) {
+                            buttonRefs.current[tab.value] = element;
+                          } else {
+                            delete buttonRefs.current[tab.value];
+                          }
+                        },
+                        "aria-selected": isActive,
+                        className: cn(
+                          "relative inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap border-0 bg-transparent p-0 text-[13px] font-semibold leading-6 text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none",
+                          isActive && "text-[var(--accent)]"
+                        ),
+                        "data-active": isActive ? "true" : "false",
+                        "data-slot": "underline-tabs-tab",
+                        "data-testid": tab.testId,
+                        role: "tab",
+                        type: "button",
+                        onClick: () => onValueChange(tab.value),
+                        onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
+                        children: [
+                          /* @__PURE__ */ jsx28("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold leading-6 text-[inherit]", children: tab.count }) : null
+                        ]
+                      },
+                      tab.value
+                    );
+                  }),
+                  /* @__PURE__ */ jsx28(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: "absolute bottom-0 left-0 z-[1] h-0.5 rounded-[1px] bg-[var(--accent)] transition-[transform,width] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none",
+                      "data-slot": "underline-tabs-indicator",
+                      style: {
+                        transform: `translateX(${indicatorStyle.left}px)`,
+                        width: indicatorStyle.width
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          "button",
+          {
+            "aria-label": scrollLeftLabel,
+            className: "pointer-events-none absolute left-4 top-3 z-[3] inline-flex size-6 translate-y-[-50%] scale-[0.94] items-center justify-center rounded-full border-0 bg-[var(--background-fronted)] p-0 text-[var(--text-secondary)] opacity-0 shadow-[0_4px_16px_rgba(15,23,42,0.12)] transition-[opacity,transform,background-color,color] duration-[160ms] ease-in-out hover:bg-[var(--background-fronted)] hover:text-[var(--text-primary)] focus-visible:bg-[var(--background-fronted)] focus-visible:text-[var(--text-primary)] group-hover:data-[visible=true]:pointer-events-auto group-hover:data-[visible=true]:scale-100 group-hover:data-[visible=true]:opacity-100 group-focus-within:data-[visible=true]:pointer-events-auto group-focus-within:data-[visible=true]:scale-100 group-focus-within:data-[visible=true]:opacity-100 disabled:pointer-events-none",
+            "data-slot": "underline-tabs-scroll-left",
+            "data-testid": scrollLeftTestId,
+            "data-visible": overflow.canScrollLeft ? "true" : "false",
+            disabled: !overflow.canScrollLeft,
+            type: "button",
+            onClick: () => scrollTabs("left"),
+            children: /* @__PURE__ */ jsx28(ArrowLeftIcon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          "button",
+          {
+            "aria-label": scrollRightLabel,
+            className: "pointer-events-none absolute right-4 top-3 z-[3] inline-flex size-6 translate-y-[-50%] scale-[0.94] items-center justify-center rounded-full border-0 bg-[var(--background-fronted)] p-0 text-[var(--text-secondary)] opacity-0 shadow-[0_4px_16px_rgba(15,23,42,0.12)] transition-[opacity,transform,background-color,color] duration-[160ms] ease-in-out hover:bg-[var(--background-fronted)] hover:text-[var(--text-primary)] focus-visible:bg-[var(--background-fronted)] focus-visible:text-[var(--text-primary)] group-hover:data-[visible=true]:pointer-events-auto group-hover:data-[visible=true]:scale-100 group-hover:data-[visible=true]:opacity-100 group-focus-within:data-[visible=true]:pointer-events-auto group-focus-within:data-[visible=true]:scale-100 group-focus-within:data-[visible=true]:opacity-100 disabled:pointer-events-none",
+            "data-slot": "underline-tabs-scroll-right",
+            "data-testid": scrollRightTestId,
+            "data-visible": overflow.canScrollRight ? "true" : "false",
+            disabled: !overflow.canScrollRight,
+            type: "button",
+            onClick: () => scrollTabs("right"),
+            children: /* @__PURE__ */ jsx28(ArrowRightIcon, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/viewport-menu-surface/viewport-menu-surface.tsx
+import * as React6 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var VIEWPORT_MENU_PADDING = 12;
+var MENU_BOUNDARY_PADDING = 8;
+function clampMenuCoordinate(origin, size, viewportExtent, padding) {
+  return Math.max(
+    padding,
+    Math.min(origin, Math.max(padding, viewportExtent - padding - size))
+  );
+}
+function resolveAlignedCoordinate(options) {
+  const { origin, size, viewportExtent, padding, alignment } = options;
+  const startCoordinate = origin;
+  const endCoordinate = origin - size;
+  if (alignment === "start") {
+    return clampMenuCoordinate(startCoordinate, size, viewportExtent, padding);
+  }
+  if (alignment === "end") {
+    return clampMenuCoordinate(endCoordinate, size, viewportExtent, padding);
+  }
+  const startFits = startCoordinate + size <= viewportExtent - padding;
+  const endFits = endCoordinate >= padding;
+  if (startFits || !endFits) {
+    return clampMenuCoordinate(startCoordinate, size, viewportExtent, padding);
+  }
+  return clampMenuCoordinate(endCoordinate, size, viewportExtent, padding);
+}
+function placeViewportMenuAtPoint(options) {
+  const padding = options.padding ?? VIEWPORT_MENU_PADDING;
+  return {
+    left: resolveAlignedCoordinate({
+      origin: options.point.x,
+      size: options.menuSize.width,
+      viewportExtent: options.viewport.width,
+      padding,
+      alignment: options.alignX ?? "start"
+    }),
+    top: resolveAlignedCoordinate({
+      origin: options.point.y,
+      size: options.menuSize.height,
+      viewportExtent: options.viewport.height,
+      padding,
+      alignment: options.alignY ?? "start"
+    })
+  };
+}
+function viewportBoundary() {
+  return {
+    left: 0,
+    top: 0,
+    width: typeof window === "undefined" ? 1280 : window.innerWidth,
+    height: typeof window === "undefined" ? 720 : window.innerHeight
+  };
+}
+function rectToBoundary(rect) {
+  return {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function resolveMenuBoundaryFromPoint(point) {
+  if (typeof document === "undefined" || !document.elementsFromPoint) {
+    return {
+      element: null,
+      rect: viewportBoundary()
+    };
+  }
+  const selector = '[data-slot="viewport-menu-boundary"]';
+  for (const element of document.elementsFromPoint(point.x, point.y)) {
+    const boundaryElement = element.closest(selector);
+    if (boundaryElement) {
+      return {
+        element: boundaryElement,
+        rect: rectToBoundary(boundaryElement.getBoundingClientRect())
+      };
+    }
+  }
+  return {
+    element: null,
+    rect: viewportBoundary()
+  };
+}
+function clampMenuPositionToBoundary(options) {
+  const padding = options.padding ?? MENU_BOUNDARY_PADDING;
+  const minLeft = options.boundary.left + padding;
+  const minTop = options.boundary.top + padding;
+  const maxLeft = Math.max(
+    minLeft,
+    options.boundary.left + options.boundary.width - padding - options.width
+  );
+  const maxTop = Math.max(
+    minTop,
+    options.boundary.top + options.boundary.height - padding - options.height
+  );
+  return {
+    left: Math.max(minLeft, Math.min(options.left, maxLeft)),
+    top: Math.max(minTop, Math.min(options.top, maxTop))
+  };
+}
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}
+function callHandler(handler, event) {
+  handler?.(event);
+}
+var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
+  open,
+  placement,
+  children,
+  onDismiss,
+  dismissOnPointerDownOutside = false,
+  dismissOnEscape = false,
+  dismissOnScroll = false,
+  dismissIgnoreRefs = [],
+  stopEventPropagation = true,
+  style,
+  onMouseDown,
+  onClick,
+  className,
+  ...rest
+}, forwardedRef) {
+  const surfaceRef = React6.useRef(null);
+  const [measuredSize, setMeasuredSize] = React6.useState(null);
+  const setRefs = React6.useCallback(
+    (node) => {
+      surfaceRef.current = node;
+      assignRef(forwardedRef, node);
+    },
+    [forwardedRef]
+  );
+  React6.useLayoutEffect(() => {
+    if (!open) {
+      setMeasuredSize(null);
+      return;
+    }
+    const element = surfaceRef.current;
+    if (!element) {
+      setMeasuredSize(null);
+      return;
+    }
+    const updateMeasuredSize = () => {
+      const rect = element.getBoundingClientRect();
+      setMeasuredSize(
+        (previous) => previous && Math.abs(previous.width - rect.width) < 0.5 && Math.abs(previous.height - rect.height) < 0.5 ? previous : { width: rect.width, height: rect.height }
+      );
+    };
+    updateMeasuredSize();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(updateMeasuredSize);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [open, placement]);
+  React6.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (!onDismiss || !dismissOnPointerDownOutside && !dismissOnEscape && !dismissOnScroll) {
+      return;
+    }
+    const shouldIgnoreTarget = (target) => {
+      if (!(target instanceof Node)) {
+        return false;
+      }
+      if (surfaceRef.current?.contains(target)) {
+        return true;
+      }
+      return dismissIgnoreRefs.some(
+        (ref) => ref.current?.contains(target) ?? false
+      );
+    };
+    const handlePointerDown = (event) => {
+      if (!dismissOnPointerDownOutside) {
+        return;
+      }
+      if (shouldIgnoreTarget(event.target)) {
+        return;
+      }
+      onDismiss();
+    };
+    const handleKeyDown = (event) => {
+      if (!dismissOnEscape || event.key !== "Escape") {
+        return;
+      }
+      onDismiss();
+    };
+    const handleScroll = () => {
+      if (dismissOnScroll) {
+        onDismiss();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    window.addEventListener("keydown", handleKeyDown, true);
+    window.addEventListener("scroll", handleScroll, {
+      capture: true,
+      passive: true
+    });
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      window.removeEventListener("keydown", handleKeyDown, true);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [
+    dismissIgnoreRefs,
+    dismissOnEscape,
+    dismissOnPointerDownOutside,
+    dismissOnScroll,
+    onDismiss,
+    open
+  ]);
+  const resolvedPlacement = React6.useMemo(() => {
+    if (placement.type === "absolute") {
+      const boundary2 = resolveMenuBoundaryFromPoint({
+        x: placement.left,
+        y: placement.top
+      });
+      const menuSize2 = measuredSize ?? { width: 0, height: 0 };
+      return {
+        portalTarget: boundary2.element,
+        position: clampMenuPositionToBoundary({
+          left: placement.left,
+          top: placement.top,
+          width: menuSize2.width,
+          height: menuSize2.height,
+          boundary: boundary2.rect
+        })
+      };
+    }
+    const boundary = resolveMenuBoundaryFromPoint(placement.point);
+    const menuSize = measuredSize ?? placement.estimatedSize ?? { width: 0, height: 0 };
+    const relativePoint = {
+      x: placement.point.x - boundary.rect.left,
+      y: placement.point.y - boundary.rect.top
+    };
+    const relativePosition = placeViewportMenuAtPoint({
+      point: relativePoint,
+      menuSize,
+      viewport: { width: boundary.rect.width, height: boundary.rect.height },
+      padding: placement.padding,
+      alignX: placement.alignX,
+      alignY: placement.alignY
+    });
+    return {
+      portalTarget: boundary.element,
+      position: {
+        left: boundary.rect.left + relativePosition.left,
+        top: boundary.rect.top + relativePosition.top
+      }
+    };
+  }, [measuredSize, placement]);
+  if (!open || typeof document === "undefined" || !document.body) {
+    return null;
+  }
+  const portalTarget = resolvedPlacement.portalTarget ?? document.body;
+  return createPortal2(
+    /* @__PURE__ */ jsx29(
+      MenuSurface,
+      {
+        ...rest,
+        ref: setRefs,
+        className,
+        "data-slot": "viewport-menu-surface",
+        style: {
+          ...style,
+          position: "fixed",
+          top: resolvedPlacement.position.top,
+          left: resolvedPlacement.position.left,
+          zIndex: "var(--z-popover)"
+        },
+        onClick: (event) => {
+          if (stopEventPropagation) {
+            event.stopPropagation();
+          }
+          callHandler(onClick, event);
+        },
+        onMouseDown: (event) => {
+          if (stopEventPropagation) {
+            event.stopPropagation();
+          }
+          callHandler(onMouseDown, event);
+        },
+        children
+      }
+    ),
+    portalTarget
+  );
+});
+
+export {
+  badgeVariants,
+  Badge,
+  BareIconButton,
+  buttonVariants,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+  Checkbox,
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  ConfirmationDialog,
+  DatePicker,
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  menuSurfaceClassName,
+  menuItemClassName,
+  menuItemWithIndicatorClassName,
+  menuItemIndicatorClassName,
+  MenuSurface,
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  Input,
+  MentionPill,
+  Popover,
+  PopoverTrigger,
+  PopoverPortal,
+  PopoverClose,
+  PopoverContent,
+  PopoverAnchor,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+  ScrollArea,
+  ScrollBar,
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectSplitLayout,
+  SelectSplitColumn,
+  SelectSplitColumnLabel,
+  SelectSplitColumnItems,
+  SelectSplitDivider,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  Separator2 as Separator,
+  SectionTabs,
+  ShortcutBadge,
+  toast,
+  Toaster,
+  Spinner,
+  statusDotVariants,
+  StatusDot,
+  Switch,
+  Textarea,
+  ToastProvider,
+  toastVariants,
+  ToastRoot,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastViewport,
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  UnderlineTabs,
+  ViewportMenuSurface
+};
+//# sourceMappingURL=chunk-2AUYRRDG.js.map