@ship-it-ui/ui 0.0.1

package/dist/index.js

@@ -0,0 +1,3410 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { forwardRef, Children, isValidElement, cloneElement, useId, useRef, useState, useImperativeHandle, createContext, useMemo, useEffect, Fragment as Fragment$1, useContext, useCallback } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as RadixRadio from '@radix-ui/react-radio-group';
+import * as RadixSelect from '@radix-ui/react-select';
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import * as RadixContext from '@radix-ui/react-context-menu';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixAlert from '@radix-ui/react-alert-dialog';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixToast from '@radix-ui/react-toast';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixMenubar from '@radix-ui/react-menubar';
+import * as RadixTabs from '@radix-ui/react-tabs';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const setValue = useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(valueRef.current) : next;
+      if (!isControlled) {
+        setUncontrolledValue(resolved);
+      }
+      if (resolved !== valueRef.current) {
+        onChangeRef.current?.(resolved);
+      }
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+function useDisclosure(initial = false) {
+  const [open, setOpen] = useState(initial);
+  const onOpen = useCallback(() => setOpen(true), []);
+  const onClose = useCallback(() => setOpen(false), []);
+  const onToggle = useCallback(() => setOpen((o) => !o), []);
+  return { open, onOpen, onClose, onToggle, setOpen };
+}
+function useEscape(handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handler();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [handler, enabled]);
+}
+function useKeyboardList({
+  count,
+  loop = true,
+  defaultCursor = 0,
+  onSelect
+}) {
+  const [cursor, setCursor] = useState(defaultCursor);
+  const move = useCallback(
+    (delta) => {
+      if (count <= 0) return;
+      setCursor((c) => {
+        const next = c + delta;
+        if (loop) return (next % count + count) % count;
+        return Math.max(0, Math.min(count - 1, next));
+      });
+    },
+    [count, loop]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (count <= 0) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          move(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          move(-1);
+          break;
+        case "Home":
+          event.preventDefault();
+          setCursor(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setCursor(count - 1);
+          break;
+        case "Enter":
+          if (onSelect) {
+            event.preventDefault();
+            onSelect(cursor);
+          }
+          break;
+      }
+    },
+    [count, cursor, move, onSelect]
+  );
+  const safeCursor = count > 0 ? Math.min(cursor, count - 1) : 0;
+  return { cursor: safeCursor, setCursor, onKeyDown };
+}
+function useOutsideClick(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const onDown = (e) => {
+      const el = ref.current;
+      if (el && e.target instanceof Node && !el.contains(e.target)) handler();
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [ref, handler, enabled]);
+}
+function useTheme() {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof document === "undefined") return "dark";
+    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  });
+  const setTheme = useCallback((next) => {
+    if (next === "light") {
+      document.documentElement.setAttribute("data-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+    setThemeState(next);
+  }, []);
+  const toggle = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const attr = document.documentElement.getAttribute("data-theme");
+      setThemeState(attr === "light" ? "light" : "dark");
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return { theme, setTheme, toggle };
+}
+var buttonStyles = cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap",
+    "font-medium transition-[background,filter,box-shadow,color] duration-(--duration-micro)",
+    "outline-none",
+    "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+    "disabled:cursor-not-allowed disabled:opacity-40"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-accent text-on-accent border border-accent hover:brightness-110 active:brightness-95",
+        secondary: "bg-panel-2 text-text border border-border hover:bg-[color-mix(in_oklab,var(--color-panel-2),white_4%)]",
+        ghost: "bg-transparent text-text border border-transparent hover:bg-panel-2",
+        outline: "bg-transparent text-text border border-border-strong hover:bg-panel-2",
+        destructive: "bg-err text-on-accent border border-err hover:brightness-110 active:brightness-95",
+        success: "bg-ok text-on-accent border border-ok hover:brightness-110 active:brightness-95",
+        link: "bg-transparent text-accent border border-transparent underline underline-offset-[3px] hover:brightness-110"
+      },
+      size: {
+        sm: "h-[26px] px-[10px] text-[11px] gap-[5px] rounded-[5px]",
+        md: "h-[32px] px-3 text-[12px] gap-[6px] rounded-md",
+        lg: "h-[38px] px-4 text-[13px] gap-[7px] rounded-[7px]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
+function Spinner({ size }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "inline-block animate-[ship-spin_0.7s_linear_infinite] rounded-full border-[1.5px] border-current border-t-transparent",
+      style: { width: size, height: size }
+    }
+  );
+}
+var iconSize = { sm: 11, md: 12, lg: 13 };
+var Button = forwardRef(function Button2({
+  variant,
+  size,
+  fullWidth,
+  icon,
+  trailing,
+  loading = false,
+  disabled,
+  asChild = false,
+  type,
+  className,
+  children,
+  ...props
+}, ref) {
+  const isDisabled = disabled || loading;
+  const iconPx = iconSize[size ?? "md"];
+  const composedClassName = cn(buttonStyles({ variant, size, fullWidth }), className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        "aria-busy": loading || void 0,
+        "aria-disabled": isDisabled || void 0,
+        "data-disabled": isDisabled ? "" : void 0,
+        className: composedClassName,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      className: composedClassName,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: iconPx }) : icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex", children: icon }) : null,
+        children,
+        trailing && /* @__PURE__ */ jsx("span", { className: "inline-flex opacity-60", children: trailing })
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var iconButtonStyles = cva(
+  [
+    "inline-grid place-items-center transition-[background,filter,color] duration-(--duration-micro)",
+    "outline-none focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+    "disabled:cursor-not-allowed disabled:opacity-40"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-accent text-on-accent border border-accent hover:brightness-110",
+        secondary: "bg-panel-2 text-text-muted border border-border hover:bg-[color-mix(in_oklab,var(--color-panel-2),white_4%)]",
+        ghost: "bg-transparent text-text-muted border border-transparent hover:bg-panel-2 hover:text-text",
+        outline: "bg-transparent text-text-muted border border-border-strong hover:bg-panel-2 hover:text-text"
+      },
+      size: {
+        sm: "h-[26px] w-[26px] text-[12px] rounded-[5px]",
+        md: "h-[32px] w-[32px] text-[13px] rounded-md",
+        lg: "h-[38px] w-[38px] text-[15px] rounded-[7px]"
+      }
+    },
+    defaultVariants: { variant: "secondary", size: "md" }
+  }
+);
+var IconButton = forwardRef(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      className: cn(iconButtonStyles({ variant, size }), className),
+      ...props,
+      children: icon
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+var ButtonGroup = forwardRef(function ButtonGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
+  const items = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: cn(
+        "border-border inline-flex overflow-hidden rounded-md border",
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        className
+      ),
+      ...props,
+      children: items.map((child, i) => {
+        const isFirst = i === 0;
+        const childProps = child.props ?? {};
+        return cloneElement(child, {
+          key: i,
+          className: cn(
+            childProps.className,
+            "rounded-none border-none",
+            !isFirst && (orientation === "horizontal" ? "border-l border-l-border" : "border-t border-t-border")
+          )
+        });
+      })
+    }
+  );
+});
+ButtonGroup.displayName = "ButtonGroup";
+var SplitButton = forwardRef(function SplitButton2({ variant = "primary", size = "md", onClick, onMenu, disabled, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size,
+        onClick,
+        disabled,
+        className: "rounded-r-none border-r border-r-black/20",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size,
+        onClick: onMenu,
+        disabled,
+        "aria-label": "More actions",
+        className: "rounded-l-none px-2",
+        children: "\u25BE"
+      }
+    )
+  ] });
+});
+SplitButton.displayName = "SplitButton";
+var FAB = forwardRef(function FAB2({ icon = "\u2726", type, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      className: cn(
+        "grid h-12 w-12 place-items-center rounded-full",
+        "bg-accent text-on-accent text-lg font-semibold",
+        "shadow-[0_10px_30px_var(--color-accent-glow),0_2px_6px_rgba(0,0,0,0.4)]",
+        "transition-[transform,box-shadow] duration-200",
+        "hover:-translate-y-px hover:shadow-[0_14px_36px_var(--color-accent-glow),0_4px_10px_rgba(0,0,0,0.45)]",
+        "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        className
+      ),
+      style,
+      ...props,
+      children: icon
+    }
+  );
+});
+FAB.displayName = "FAB";
+var Checkbox = forwardRef(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = useId();
+  const id = idProp ?? `cb-${reactId}`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        props.disabled && "cursor-not-allowed opacity-40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          RadixCheckbox.Root,
+          {
+            ref,
+            id,
+            className: cn(
+              "grid h-4 w-4 place-items-center rounded-xs",
+              "bg-panel border-border-strong border",
+              "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+              "data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent",
+              "transition-[background,border-color] duration-(--duration-micro)",
+              "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
+          }
+        ),
+        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+function Field({ label, hint, error, required, className, children, ...props }) {
+  const reactId = useId();
+  const id = `field-${reactId}`;
+  const hintId = hint && !error ? `${id}-hint` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = errorId ?? hintId;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-[6px]", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-text-muted text-[11px] font-medium", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-err ml-1", children: "*" })
+    ] }),
+    children({
+      id,
+      "aria-describedby": describedBy,
+      "aria-invalid": error ? true : void 0
+    }),
+    hint && !error && /* @__PURE__ */ jsx("div", { id: hintId, className: "text-text-dim text-[11px]", children: hint }),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-err text-[11px]", children: error })
+  ] });
+}
+var inputWrapperStyles = cva(
+  [
+    "flex items-center gap-[6px] font-sans transition-[border-color,box-shadow] duration-(--duration-micro)",
+    "border focus-within:ring-[3px]",
+    "has-[:disabled]:opacity-50 has-[:disabled]:bg-panel-2"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 text-[12px] rounded-md",
+        md: "h-[34px] px-[10px] text-[13px] rounded-md",
+        lg: "h-10 px-3 text-[14px] rounded-md"
+      },
+      tone: {
+        default: "bg-panel border-border focus-within:border-accent focus-within:ring-accent-dim",
+        error: "bg-panel border-err focus-within:border-err focus-within:ring-[oklch(0.55_0.18_30/0.18)]"
+      }
+    },
+    defaultVariants: { size: "md", tone: "default" }
+  }
+);
+var Input = forwardRef(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
+  const computedTone = error ? "error" : tone;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(inputWrapperStyles({ size, tone: computedTone }), className),
+      style: { width, ...style },
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "text-text-dim leading-none", children: icon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            disabled,
+            "aria-invalid": error || void 0,
+            className: cn(
+              "text-text min-w-0 flex-1 border-none bg-transparent font-sans outline-none",
+              "placeholder:text-text-dim",
+              "disabled:cursor-not-allowed"
+            ),
+            ...props
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim text-[11px]", children: trailing })
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+var SearchInput = forwardRef(function SearchInput2({ shortcut = "\u2318K", width = 360, className, style, placeholder = "Search\u2026", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-base flex h-9 items-center gap-2 px-3 font-sans",
+        "bg-panel-2 border-border border",
+        "focus-within:border-accent focus-within:ring-accent-dim focus-within:ring-[3px]",
+        "transition-[border-color,box-shadow] duration-(--duration-micro)",
+        className
+      ),
+      style: { width, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-text-dim leading-none", children: "\u2315" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "search",
+            placeholder,
+            className: "text-text placeholder:text-text-dim min-w-0 flex-1 border-none bg-transparent text-[13px] outline-none",
+            ...props
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
+      ]
+    }
+  );
+});
+SearchInput.displayName = "SearchInput";
+var OTP = forwardRef(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
+  const baseId = useId();
+  const refs = useRef([]);
+  const [values, setValues] = useState(
+    () => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
+  );
+  useImperativeHandle(ref, () => ({
+    focus: () => refs.current[0]?.focus(),
+    reset: () => {
+      setValues(Array(length).fill(""));
+      refs.current[0]?.focus();
+    }
+  }));
+  const writeAt = (i, char) => {
+    if (!/^\d?$/.test(char)) return;
+    setValues((prev) => {
+      const next = [...prev];
+      next[i] = char;
+      const joined = next.join("");
+      onChange?.(joined);
+      if (joined.length === length && next.every((c) => c)) onComplete?.(joined);
+      return next;
+    });
+    if (char && i < length - 1) refs.current[i + 1]?.focus();
+  };
+  const onKey = (i, e) => {
+    if (e.key === "Backspace" && !values[i] && i > 0) {
+      refs.current[i - 1]?.focus();
+    } else if (e.key === "ArrowLeft" && i > 0) {
+      refs.current[i - 1]?.focus();
+    } else if (e.key === "ArrowRight" && i < length - 1) {
+      refs.current[i + 1]?.focus();
+    }
+  };
+  const onPaste = (e) => {
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    e.preventDefault();
+    const next = Array.from({ length }, (_, i) => pasted[i] ?? "");
+    setValues(next);
+    const joined = next.join("");
+    onChange?.(joined);
+    if (joined.length === length) onComplete?.(joined);
+    refs.current[Math.min(pasted.length, length - 1)]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children: values.map((c, i) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: `${baseId}-${i}`,
+      ref: (el) => {
+        refs.current[i] = el;
+      },
+      inputMode: "numeric",
+      autoComplete: "one-time-code",
+      maxLength: 1,
+      value: c,
+      disabled,
+      "aria-label": `${ariaLabel} ${i + 1} of ${length}`,
+      onChange: (e) => writeAt(i, e.target.value),
+      onKeyDown: (e) => onKey(i, e),
+      onFocus: (e) => e.target.select(),
+      onPaste: i === 0 ? onPaste : void 0,
+      className: cn(
+        "text-text bg-panel h-12 w-10 rounded-md text-center font-mono text-[20px] font-medium",
+        "border-border border transition-[border-color,box-shadow] duration-(--duration-micro) outline-none",
+        "focus:border-accent focus:ring-accent-dim focus:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      )
+    },
+    i
+  )) });
+});
+OTP.displayName = "OTP";
+var RadioGroup = forwardRef(function RadioGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixRadio.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
+});
+RadioGroup.displayName = "RadioGroup";
+var Radio = forwardRef(function Radio2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = useId();
+  const id = idProp ?? `radio-${reactId}`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        props.disabled && "cursor-not-allowed opacity-40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          RadixRadio.Item,
+          {
+            ref,
+            id,
+            className: cn(
+              "grid h-4 w-4 place-items-center rounded-full",
+              "bg-panel border-border-strong border",
+              "data-[state=checked]:border-accent",
+              "transition-[border-color] duration-(--duration-micro)",
+              "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx(RadixRadio.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
+          }
+        ),
+        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+      ]
+    }
+  );
+});
+Radio.displayName = "Radio";
+var SelectRoot = RadixSelect.Root;
+var SelectValue = RadixSelect.Value;
+var SelectGroup = RadixSelect.Group;
+var SelectLabel = RadixSelect.Label;
+var triggerClasses = {
+  sm: "h-7 px-2 text-[12px]",
+  md: "h-[34px] px-[10px] text-[13px]",
+  lg: "h-10 px-3 text-[14px]"
+};
+var SelectTrigger = forwardRef(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixSelect.Trigger,
+    {
+      ref,
+      className: cn(
+        "text-text bg-panel border-border inline-flex items-center justify-between gap-2 rounded-md border font-sans",
+        "data-[state=open]:border-accent",
+        "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+        "data-[disabled]:bg-panel-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        "transition-[border-color,box-shadow] duration-(--duration-micro)",
+        triggerClasses[size],
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(RadixSelect.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = forwardRef(
+  function SelectContent2({ className, children, position = "popper", sideOffset = 6, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(
+      RadixSelect.Content,
+      {
+        ref,
+        position,
+        sideOffset,
+        className: cn(
+          "bg-panel border-border z-50 min-w-[var(--radix-select-trigger-width)] rounded-md border p-1 shadow",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { children })
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef(
+  function SelectItem2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixSelect.Item,
+      {
+        ref,
+        className: cn(
+          "relative flex cursor-pointer items-center rounded-sm px-2 py-[6px] text-[13px] outline-none",
+          "data-[highlighted]:bg-accent-dim data-[highlighted]:text-accent",
+          "data-[state=checked]:font-medium",
+          "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+function Select({
+  options,
+  placeholder = "Select\u2026",
+  size,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsxs(RadixSelect.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        size,
+        className,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => {
+      const value = typeof opt === "string" ? opt : opt.value;
+      const label = typeof opt === "string" ? opt : opt.label;
+      return /* @__PURE__ */ jsx(SelectItem, { value, children: label }, value);
+    }) })
+  ] });
+}
+var Slider = forwardRef(function Slider2({ showValue, width = 240, className, value, defaultValue, ...props }, ref) {
+  const arrValue = Array.isArray(value) ? value : value !== void 0 ? [value] : void 0;
+  const arrDefault = Array.isArray(defaultValue) ? defaultValue : defaultValue !== void 0 ? [defaultValue] : void 0;
+  const display = arrValue?.[0] ?? arrDefault?.[0] ?? props.min ?? 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-[10px]", className),
+      style: { width },
+      children: [
+        /* @__PURE__ */ jsxs(
+          RadixSlider.Root,
+          {
+            value: arrValue,
+            defaultValue: arrDefault,
+            className: "relative flex h-4 flex-1 touch-none items-center select-none",
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(RadixSlider.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
+              /* @__PURE__ */ jsx(
+                RadixSlider.Thumb,
+                {
+                  className: cn(
+                    "bg-text border-accent block h-[14px] w-[14px] rounded-full border-2 shadow",
+                    "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+                    "cursor-grab active:cursor-grabbing"
+                  ),
+                  "aria-label": "Value"
+                }
+              )
+            ]
+          }
+        ),
+        showValue && /* @__PURE__ */ jsx("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+var trackClasses = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9"
+};
+var thumbClasses = {
+  sm: "h-3 w-3 data-[state=checked]:translate-x-3",
+  md: "h-4 w-4 data-[state=checked]:translate-x-4"
+};
+var Switch = forwardRef(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
+  const reactId = useId();
+  const id = idProp ?? `sw-${reactId}`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        props.disabled && "cursor-not-allowed opacity-40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          RadixSwitch.Root,
+          {
+            ref,
+            id,
+            className: cn(
+              "relative inline-flex shrink-0 cursor-pointer rounded-full border transition-colors duration-(--duration-micro)",
+              "bg-panel-2 border-border data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+              "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+              "disabled:cursor-not-allowed",
+              trackClasses[size]
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx(
+              RadixSwitch.Thumb,
+              {
+                className: cn(
+                  "bg-text absolute top-1/2 left-[1px] -translate-y-1/2 rounded-full shadow-sm",
+                  "data-[state=checked]:bg-on-accent transition-transform duration-(--duration-micro)",
+                  thumbClasses[size]
+                )
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+      ]
+    }
+  );
+});
+Switch.displayName = "Switch";
+var textareaStyles = cva(
+  [
+    "w-full font-sans text-text bg-panel rounded-md p-[10px]",
+    "border outline-none transition-[border-color,box-shadow] duration-(--duration-micro)",
+    "placeholder:text-text-dim resize-y",
+    "focus-visible:ring-[3px]",
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-panel-2"
+  ],
+  {
+    variants: {
+      tone: {
+        default: "border-border focus-visible:border-accent focus-visible:ring-accent-dim",
+        error: "border-err focus-visible:border-err focus-visible:ring-[oklch(0.55_0.18_30/0.18)]"
+      }
+    },
+    defaultVariants: { tone: "default" }
+  }
+);
+var Textarea = forwardRef(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      rows,
+      "aria-invalid": error || void 0,
+      className: cn(textareaStyles({ tone: error ? "error" : tone }), className),
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var sizePx = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
+var statusBg = {
+  ok: "bg-ok",
+  warn: "bg-warn",
+  err: "bg-err",
+  off: "bg-text-dim"
+};
+function initialsFor(name) {
+  return (name || "?").split(/\s+/).map((p) => p[0] ?? "").join("").slice(0, 2).toUpperCase();
+}
+function hashHue(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
+  return h;
+}
+var Avatar = forwardRef(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
+  const dim = sizePx[size];
+  const hue = hashHue(name);
+  const computedInitials = initials ?? initialsFor(name);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("relative inline-block", className),
+      style: { width: dim, height: dim, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          RadixAvatar.Root,
+          {
+            className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
+            style: { background: src ? void 0 : `oklch(0.4 0.1 ${hue})` },
+            children: [
+              src && /* @__PURE__ */ jsx(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
+              /* @__PURE__ */ jsx(
+                RadixAvatar.Fallback,
+                {
+                  className: "flex h-full w-full items-center justify-center font-sans font-semibold text-white",
+                  style: { fontSize: dim * 0.38 },
+                  children: computedInitials
+                }
+              )
+            ]
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "img",
+            "aria-label": `status: ${status}`,
+            className: cn(
+              "border-bg absolute right-0 bottom-0 rounded-full border-[2px]",
+              statusBg[status]
+            ),
+            style: { width: dim * 0.3, height: dim * 0.3 }
+          }
+        )
+      ]
+    }
+  );
+});
+Avatar.displayName = "Avatar";
+var sizePx2 = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
+var AvatarGroup = forwardRef(function AvatarGroup2({ names, max = 3, size = "md", className, ...props }, ref) {
+  const dim = sizePx2[size];
+  const visible = names.slice(0, max);
+  const rest = names.length - visible.length;
+  const overlap = -dim * 0.35;
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    visible.map((n, i) => /* @__PURE__ */ jsx("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ jsx(Avatar, { name: n, size }) }, `${n}-${i}`)),
+    rest > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "aria-label": `+${rest} more`,
+        className: "bg-panel-2 border-border text-text-muted grid place-items-center rounded-full border font-mono",
+        style: {
+          width: dim,
+          height: dim,
+          marginLeft: overlap,
+          fontSize: dim * 0.35
+        },
+        children: [
+          "+",
+          rest
+        ]
+      }
+    )
+  ] });
+});
+AvatarGroup.displayName = "AvatarGroup";
+var badgeStyles = cva("inline-flex items-center font-sans leading-none whitespace-nowrap", {
+  variants: {
+    variant: {
+      neutral: "bg-panel-2 text-text-muted border border-border",
+      accent: "bg-accent-dim text-accent border border-transparent",
+      ok: "bg-[color-mix(in_oklab,var(--color-ok),transparent_85%)] text-ok border border-transparent",
+      warn: "bg-[color-mix(in_oklab,var(--color-warn),transparent_85%)] text-warn border border-transparent",
+      err: "bg-[color-mix(in_oklab,var(--color-err),transparent_85%)] text-err border border-transparent",
+      purple: "bg-[color-mix(in_oklab,var(--color-purple),transparent_85%)] text-purple border border-transparent",
+      pink: "bg-[color-mix(in_oklab,var(--color-pink),transparent_85%)] text-pink border border-transparent",
+      outline: "bg-transparent text-text border border-border-strong",
+      solid: "bg-text text-bg border border-text"
+    },
+    size: {
+      sm: "h-[18px] px-[6px] py-[1px] text-[10px] gap-1 rounded-full",
+      md: "h-[22px] px-2 py-[2px] text-[11px] gap-[5px] rounded-full",
+      lg: "h-[26px] px-[10px] py-[3px] text-[12px] gap-[6px] rounded-full"
+    }
+  },
+  defaultVariants: { variant: "neutral", size: "md" }
+});
+var dotColorClass = {
+  neutral: "bg-text-dim",
+  accent: "bg-accent",
+  ok: "bg-ok",
+  warn: "bg-warn",
+  err: "bg-err",
+  purple: "bg-purple",
+  pink: "bg-pink",
+  outline: "bg-text-muted",
+  solid: "bg-bg"
+};
+var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
+var Badge = forwardRef(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
+    dot && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn("inline-block rounded-full", dotSize[size], dotColorClass[variant])
+      }
+    ),
+    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex leading-none", children: icon }),
+    children
+  ] });
+});
+Badge.displayName = "Badge";
+var cardStyles = cva(
+  "block bg-panel border border-border rounded-base transition-[border-color,transform,box-shadow] duration-(--duration-step)",
+  {
+    variants: {
+      variant: {
+        default: "",
+        ghost: "bg-transparent",
+        elevated: "shadow"
+      },
+      interactive: {
+        true: "cursor-pointer hover:border-border-strong hover:-translate-y-px hover:shadow",
+        false: ""
+      }
+    },
+    defaultVariants: { variant: "default", interactive: false }
+  }
+);
+var Card = forwardRef(function Card2({
+  variant,
+  interactive,
+  title,
+  description,
+  actions,
+  footer,
+  className,
+  children,
+  onClick,
+  ...props
+}, ref) {
+  const isInteractive = interactive ?? Boolean(onClick);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onClick,
+      onKeyDown: isInteractive && onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick(e);
+        }
+      } : void 0,
+      role: isInteractive ? "button" : void 0,
+      tabIndex: isInteractive ? 0 : void 0,
+      className: cn(cardStyles({ variant, interactive: isInteractive }), "p-[18px]", className),
+      ...props,
+      children: [
+        (title || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
+          title && /* @__PURE__ */ jsx("div", { className: "flex-1 text-[14px] font-medium", children: title }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: actions })
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
+        children,
+        footer && /* @__PURE__ */ jsx("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
+      ]
+    }
+  );
+});
+Card.displayName = "Card";
+var trendClasses = {
+  up: "text-ok",
+  down: "text-err",
+  flat: "text-text-dim"
+};
+var trendArrows = { up: "\u2191", down: "\u2193", flat: "\u2192" };
+var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("bg-panel border-border rounded-base block border p-[18px]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-[10px] flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
+          icon && /* @__PURE__ */ jsx("div", { className: "text-text-dim text-[14px]", children: icon })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
+        delta !== void 0 && /* @__PURE__ */ jsxs("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
+          trendArrows[trend],
+          " ",
+          delta
+        ] })
+      ]
+    }
+  );
+});
+StatCard.displayName = "StatCard";
+var Chip = forwardRef(function Chip2({ icon, removable, onRemove, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex h-[26px] items-center gap-[6px] py-[4px] pr-1 pl-[10px] font-sans text-[12px]",
+        "bg-panel-2 text-text border-border rounded-full border",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
+        children,
+        removable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": "Remove",
+            className: "bg-panel text-text-dim hover:text-text grid h-[18px] w-[18px] place-items-center rounded-full text-[10px] leading-none",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+});
+Chip.displayName = "Chip";
+var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      className: cn(
+        "text-text-muted inline-flex items-center font-mono text-[10px] font-medium",
+        "bg-panel border-border rounded-xs border px-[6px] py-[2px]",
+        "border-b-border border-b-[2px]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+Kbd.displayName = "Kbd";
+var skeletonStyles = cva("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
+  variants: {
+    shape: {
+      line: "rounded-xs",
+      block: "rounded-md",
+      circle: "rounded-full"
+    }
+  },
+  defaultVariants: { shape: "line" }
+});
+var defaultHeight = { line: 14, block: 80, circle: 40 };
+var Skeleton = forwardRef(function Skeleton2({ shape = "line", width = "100%", height, className, style, ...props }, ref) {
+  const h = height ?? defaultHeight[shape];
+  const w = shape === "circle" ? h : width;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      className: cn(skeletonStyles({ shape }), className),
+      style: { width: w, height: h, ...style },
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var stateColor = {
+  ok: "bg-ok",
+  warn: "bg-warn",
+  err: "bg-err",
+  off: "bg-text-dim",
+  sync: "bg-accent",
+  accent: "bg-accent"
+};
+var stateText = {
+  ok: "text-ok",
+  warn: "text-warn",
+  err: "text-err",
+  off: "text-text-dim",
+  sync: "text-accent",
+  accent: "text-accent"
+};
+var StatusDot = forwardRef(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: label ? "status" : "img",
+      "aria-label": !label && typeof state === "string" ? state : void 0,
+      className: cn("inline-flex items-center gap-[6px]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-block rounded-full",
+              stateColor[state],
+              pulse && "animate-[ship-pulse-ring_1.6s_infinite]",
+              stateText[state]
+            ),
+            style: { width: size, height: size }
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "text-text-muted text-[12px]", children: label })
+      ]
+    }
+  );
+});
+StatusDot.displayName = "StatusDot";
+var Tag = forwardRef(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px]",
+        "bg-panel-2 text-text border-border rounded-xs border",
+        className
+      ),
+      style: { height: size },
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "text-text-dim inline-flex", children: icon }),
+        children,
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": "Remove",
+            className: "text-text-dim hover:text-text px-[2px] leading-none",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+});
+Tag.displayName = "Tag";
+var ContextMenuRoot = RadixContext.Root;
+var ContextMenuTrigger = RadixContext.Trigger;
+var ContextMenuPortal = RadixContext.Portal;
+var ContextMenuContent = forwardRef(
+  function ContextMenuContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixContext.Portal, { children: /* @__PURE__ */ jsx(
+      RadixContext.Content,
+      {
+        ref,
+        className: cn(
+          "bg-panel border-border-strong z-40 min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+ContextMenuContent.displayName = "ContextMenuContent";
+var itemBase = cn(
+  "flex items-center gap-2 px-[10px] py-[6px] rounded-sm text-[12px] cursor-pointer outline-none",
+  "data-[highlighted]:bg-panel-2",
+  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
+);
+var ContextMenuItem = forwardRef(
+  function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      RadixContext.Item,
+      {
+        ref,
+        className: cn(itemBase, destructive ? "text-err" : "text-text", className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+          trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        ]
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuSeparator = forwardRef(function ContextMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixContext.Separator,
+    {
+      ref,
+      className: cn("bg-border my-1 h-[1px]", className),
+      ...props
+    }
+  );
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+var ContextMenu = RadixContext.Root;
+var DialogRoot = RadixDialog.Root;
+var DialogTrigger = RadixDialog.Trigger;
+var DialogClose = RadixDialog.Close;
+var DialogPortal = RadixDialog.Portal;
+var DialogOverlay = forwardRef(
+  function DialogOverlay2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Overlay,
+      {
+        ref,
+        className: cn(
+          "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+          "data-[state=open]:animate-[ship-fade-in_150ms_ease]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = forwardRef(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      {
+        ref,
+        className: cn(
+          "fixed top-1/2 left-1/2 z-[51] w-[calc(100%-40px)] -translate-x-1/2 -translate-y-1/2 p-6",
+          "bg-panel border-border-strong rounded-lg border shadow-lg",
+          "data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]",
+          "outline-none",
+          className
+        ),
+        style: { maxWidth: width, ...style },
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+DialogContent.displayName = "DialogContent";
+function Dialog({ title, description, footer, width, children, ...rootProps }) {
+  return /* @__PURE__ */ jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(DialogContent, { width, children: [
+    title && /* @__PURE__ */ jsx(
+      RadixDialog.Title,
+      {
+        className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+    children,
+    footer && /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+  ] }) });
+}
+var sideClasses = {
+  left: "left-0 border-r border-border-strong data-[state=open]:animate-[ship-slide-in-left_220ms_var(--easing-out)]",
+  right: "right-0 border-l border-border-strong data-[state=open]:animate-[ship-slide-in-right_220ms_var(--easing-out)]"
+};
+var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
+  /* @__PURE__ */ jsx("span", { className: "text-[14px] font-medium", children: title }),
+  /* @__PURE__ */ jsx(
+    RadixDialog.Close,
+    {
+      onClick: onClose,
+      "aria-label": "Close",
+      className: "text-text-dim hover:text-text p-1 text-[18px] leading-none",
+      children: "\xD7"
+    }
+  )
+] });
+var Drawer = forwardRef(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      RadixDialog.Content,
+      {
+        ref,
+        className: cn(
+          "bg-panel fixed top-0 bottom-0 z-[51] flex flex-col shadow-lg outline-none",
+          sideClasses[side]
+        ),
+        style: { width },
+        children: [
+          title && /* @__PURE__ */ jsx(DrawerHeader, { title }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-5", children })
+        ]
+      }
+    )
+  ] }) });
+});
+Drawer.displayName = "Drawer";
+var Sheet = forwardRef(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      RadixDialog.Content,
+      {
+        ref,
+        className: cn(
+          "fixed bottom-0 left-1/2 z-[51] -translate-x-1/2 p-5",
+          "bg-panel border-border-strong rounded-tl-lg rounded-tr-lg border-t shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-slide-in-bottom_220ms_var(--easing-out)]"
+        ),
+        style: { width },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-border mx-auto mb-[14px] h-1 w-9 rounded-full", "aria-hidden": true }),
+          title && /* @__PURE__ */ jsx(RadixDialog.Title, { className: "mb-1 text-[15px] font-medium", children: title }),
+          children
+        ]
+      }
+    )
+  ] }) });
+});
+Sheet.displayName = "Sheet";
+var AlertDialogRoot = RadixAlert.Root;
+var AlertDialogTrigger = RadixAlert.Trigger;
+var AlertDialogAction = RadixAlert.Action;
+var AlertDialogCancel = RadixAlert.Cancel;
+var AlertDialog = forwardRef(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsx(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(RadixAlert.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      RadixAlert.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+          "data-[state=open]:animate-[ship-fade-in_150ms_ease]"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadixAlert.Content,
+      {
+        ref,
+        style: { maxWidth: width },
+        className: cn(
+          "fixed top-1/2 left-1/2 z-[51] w-[calc(100%-40px)] -translate-x-1/2 -translate-y-1/2 p-6",
+          "bg-panel border-border-strong rounded-lg border shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixAlert.Title,
+            {
+              className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          children,
+          footer && /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+        ]
+      }
+    )
+  ] }) });
+});
+AlertDialog.displayName = "AlertDialog";
+var DropdownMenuRoot = RadixMenu.Root;
+var DropdownMenuTrigger = RadixMenu.Trigger;
+var DropdownMenuPortal = RadixMenu.Portal;
+var DropdownMenuGroup = RadixMenu.Group;
+var DropdownMenuLabel = RadixMenu.Label;
+var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
+var DropdownMenuContent = forwardRef(
+  function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixMenu.Portal, { children: /* @__PURE__ */ jsx(
+      RadixMenu.Content,
+      {
+        ref,
+        sideOffset,
+        align,
+        className: cn(
+          "bg-panel border-border-strong z-40 min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var itemBase2 = cn(
+  "flex items-center gap-2 px-[10px] py-[6px] rounded-sm text-[12px] cursor-pointer outline-none",
+  "data-[highlighted]:bg-panel-2",
+  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
+);
+var MenuItem = forwardRef(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixMenu.Item,
+    {
+      ref,
+      className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+      ]
+    }
+  );
+});
+MenuItem.displayName = "MenuItem";
+var MenuCheckboxItem = forwardRef(
+  function MenuCheckboxItem2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      RadixMenu.CheckboxItem,
+      {
+        ref,
+        className: cn(itemBase2, "text-text relative pl-[26px]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
+          children
+        ]
+      }
+    );
+  }
+);
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+var MenuSeparator = forwardRef(
+  function MenuSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenu.Separator,
+      {
+        ref,
+        className: cn("bg-border my-1 h-[1px]", className),
+        ...props
+      }
+    );
+  }
+);
+MenuSeparator.displayName = "MenuSeparator";
+var DropdownMenu = RadixMenu.Root;
+var HoverCardRoot = RadixHoverCard.Root;
+var HoverCardTrigger = RadixHoverCard.Trigger;
+var HoverCardPortal = RadixHoverCard.Portal;
+var HoverCardContent = forwardRef(
+  function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(
+      RadixHoverCard.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "rounded-base bg-panel border-border-strong z-40 border p-[14px] shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+HoverCardContent.displayName = "HoverCardContent";
+function HoverCard({ trigger, content, ...rootProps }) {
+  return /* @__PURE__ */ jsxs(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
+    /* @__PURE__ */ jsx(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(HoverCardContent, { children: content })
+  ] });
+}
+var PopoverRoot = RadixPopover.Root;
+var PopoverTrigger = RadixPopover.Trigger;
+var PopoverAnchor = RadixPopover.Anchor;
+var PopoverPortal = RadixPopover.Portal;
+var PopoverClose = RadixPopover.Close;
+var PopoverArrow = RadixPopover.Arrow;
+var PopoverContent = forwardRef(
+  function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        className: cn(
+          "bg-panel border-border-strong z-40 rounded-md border p-[6px] shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var Popover = RadixPopover.Root;
+var ToastContext = createContext(null);
+var variantIcon = {
+  default: "\u25CF",
+  info: "\u2139",
+  ok: "\u2713",
+  warn: "!",
+  err: "\xD7"
+};
+var variantTextColor = {
+  default: "text-text-dim",
+  info: "text-accent",
+  ok: "text-ok",
+  warn: "text-warn",
+  err: "text-err"
+};
+var variantBorderLeft = {
+  default: "border-l-border",
+  info: "border-l-accent",
+  ok: "border-l-ok",
+  warn: "border-l-warn",
+  err: "border-l-err"
+};
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const toast = useCallback((t) => {
+    const id = t.id ?? Math.random().toString(36).slice(2);
+    setToasts((prev) => [...prev, { ...t, id }]);
+    return id;
+  }, []);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: "right", children: [
+    children,
+    toasts.map((t) => /* @__PURE__ */ jsx(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
+    /* @__PURE__ */ jsx(RadixToast.Viewport, { className: "fixed right-5 bottom-5 z-[70] flex w-[380px] max-w-[calc(100vw-40px)] flex-col gap-2 outline-none" })
+  ] }) });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
+  return ctx;
+}
+var ToastCard = forwardRef(function ToastCard2({ toast, onDismiss }, ref) {
+  const variant = toast.variant ?? "default";
+  return /* @__PURE__ */ jsxs(
+    RadixToast.Root,
+    {
+      ref,
+      duration: toast.duration ?? 4e3,
+      onOpenChange: (open) => {
+        if (!open) onDismiss();
+      },
+      className: cn(
+        "bg-panel border-border pointer-events-auto rounded-md border border-l-[2px] p-3 shadow-lg",
+        "flex items-start gap-[10px]",
+        "data-[state=open]:animate-[ship-toast-in_220ms_var(--easing-out)]",
+        variantBorderLeft[variant]
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: toast.action })
+        ] }),
+        /* @__PURE__ */ jsx(
+          RadixToast.Close,
+          {
+            "aria-label": "Dismiss",
+            className: "text-text-dim hover:text-text -mt-px text-[15px] leading-none",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+});
+ToastCard.displayName = "ToastCard";
+var TooltipProvider = RadixTooltip.Provider;
+var TooltipRoot = RadixTooltip.Root;
+var TooltipTrigger = RadixTooltip.Trigger;
+var TooltipPortal = RadixTooltip.Portal;
+var TooltipArrow = RadixTooltip.Arrow;
+var TooltipContent = forwardRef(
+  function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx(
+      RadixTooltip.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "pointer-events-none z-[60] rounded-sm px-2 py-[5px] text-[11px] whitespace-nowrap",
+          "bg-text text-bg",
+          "data-[state=delayed-open]:animate-[ship-pop-in_120ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = "TooltipContent";
+function Tooltip({ content, children, side = "top", delayDuration = 400 }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, children: content })
+  ] }) });
+}
+var alertStyles = cva("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
+  variants: {
+    variant: {
+      info: "border-border border-l-2 border-l-accent",
+      ok: "border-border border-l-2 border-l-ok",
+      warn: "border-border border-l-2 border-l-warn",
+      err: "border-border border-l-2 border-l-err"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var iconColorClass = {
+  info: "text-accent",
+  ok: "text-ok",
+  warn: "text-warn",
+  err: "text-err"
+};
+var defaultGlyph = {
+  info: "\u2139",
+  ok: "\u2713",
+  warn: "!",
+  err: "\xD7"
+};
+var Alert = forwardRef(function Alert2({ variant = "info", title, description, icon, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: variant === "err" || variant === "warn" ? "alert" : "status",
+      className: cn(alertStyles({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[variant]),
+            children: icon ?? defaultGlyph[variant]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
+          children
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "ml-1 shrink-0", children: action })
+      ]
+    }
+  );
+});
+Alert.displayName = "Alert";
+var bannerStyles = cva(
+  "flex items-center gap-[10px] border-b border-border px-[14px] py-2 text-[12px]",
+  {
+    variants: {
+      variant: {
+        info: "bg-[color-mix(in_oklab,var(--color-accent),transparent_82%)] text-accent",
+        ok: "bg-[color-mix(in_oklab,var(--color-ok),transparent_82%)] text-ok",
+        warn: "bg-[color-mix(in_oklab,var(--color-warn),transparent_82%)] text-warn",
+        err: "bg-[color-mix(in_oklab,var(--color-err),transparent_82%)] text-err"
+      },
+      sticky: {
+        true: "sticky top-0 z-30",
+        false: ""
+      }
+    },
+    defaultVariants: { variant: "info", sticky: false }
+  }
+);
+var defaultGlyph2 = {
+  info: "\u2726",
+  ok: "\u2713",
+  warn: "!",
+  err: "\xD7"
+};
+var Banner = forwardRef(function Banner2({ variant = "info", sticky, icon, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: variant === "err" || variant === "warn" ? "alert" : "status",
+      className: cn(bannerStyles({ variant, sticky }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[variant] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+        action && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: action })
+      ]
+    }
+  );
+});
+Banner.displayName = "Banner";
+var Breadcrumbs = forwardRef(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
+  const crumbs = Children.toArray(children).filter(isValidElement);
+  const last = crumbs.length - 1;
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
+    const isCurrent = i === last;
+    return /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center gap-[6px]", children: [
+      isCurrent ? /* @__PURE__ */ jsx(Crumb, { ...crumb.props, current: true }) : crumb,
+      !isCurrent && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
+    ] }, i);
+  }) }) });
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+var Crumb = forwardRef(function Crumb2({ current, className, href, children, ...props }, ref) {
+  if (current) {
+    return /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn("text-text", className), children });
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      href: href ?? "#",
+      className: cn("hover:text-text transition-colors duration-(--duration-micro)", className),
+      ...props,
+      children
+    }
+  );
+});
+Crumb.displayName = "Crumb";
+function normalize(option) {
+  if (typeof option === "string") {
+    return { value: option, label: option, searchText: option.toLowerCase() };
+  }
+  const labelString = typeof option.label === "string" ? option.label : typeof option.label === "undefined" ? option.value : "";
+  const descriptionString = typeof option.description === "string" ? option.description : "";
+  return {
+    value: option.value,
+    label: option.label ?? option.value,
+    description: option.description,
+    searchText: `${labelString} ${descriptionString}`.toLowerCase(),
+    disabled: option.disabled
+  };
+}
+var defaultFilter = (option, query) => option.searchText.includes(query.toLowerCase());
+var Combobox = forwardRef(function Combobox2({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  query: queryProp,
+  defaultQuery,
+  onQueryChange,
+  placeholder,
+  filter = defaultFilter,
+  emptyState,
+  width = 260,
+  disabled,
+  name,
+  id,
+  "aria-label": ariaLabel
+}, ref) {
+  const reactId = useId();
+  const listboxId = `${id ?? reactId}-listbox`;
+  const inputId = id ?? `${reactId}-input`;
+  const normalized = useMemo(() => options.map(normalize), [options]);
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const initialQuery = useMemo(() => {
+    if (defaultQuery !== void 0) return defaultQuery;
+    if (defaultValue !== void 0) {
+      const opt = normalized.find((o) => o.value === defaultValue);
+      if (opt && typeof opt.label === "string") return opt.label;
+    }
+    return "";
+  }, [defaultQuery, defaultValue, normalized]);
+  const [query, setQuery] = useControllableState({
+    value: queryProp,
+    defaultValue: initialQuery,
+    onChange: onQueryChange
+  });
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  useOutsideClick(wrapperRef, () => setOpen(false));
+  const filtered = useMemo(
+    () => query ? normalized.filter((o) => filter(o, query)) : normalized,
+    [normalized, query, filter]
+  );
+  const { cursor, setCursor, onKeyDown } = useKeyboardList({
+    count: filtered.length,
+    defaultCursor: 0,
+    onSelect: (i) => {
+      const item = filtered[i];
+      if (item && !item.disabled) commit(item);
+    }
+  });
+  useEffect(() => {
+    setCursor(0);
+  }, [query, setCursor]);
+  function commit(option) {
+    setValue(option.value);
+    if (typeof option.label === "string") setQuery(option.label);
+    setOpen(false);
+  }
+  const handleKey = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      setOpen(true);
+    }
+    onKeyDown(event);
+  };
+  const handleBlur = (event) => {
+    if (wrapperRef.current && !wrapperRef.current.contains(event.relatedTarget)) {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: inputId,
+        name,
+        type: "text",
+        role: "combobox",
+        autoComplete: "off",
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        "aria-activedescendant": open && filtered.length > 0 ? `${listboxId}-option-${cursor}` : void 0,
+        "aria-label": ariaLabel,
+        disabled,
+        placeholder,
+        value: query ?? "",
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+          if (value !== void 0) setValue("");
+        },
+        onFocus: () => setOpen(true),
+        onBlur: handleBlur,
+        onKeyDown: handleKey,
+        className: cn(
+          "border-border bg-panel text-text block w-full rounded-md border px-3 py-2 text-[13px] outline-none",
+          "transition-[border,box-shadow] duration-(--duration-micro)",
+          "placeholder:text-text-dim",
+          "focus-visible:border-accent focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          "disabled:cursor-not-allowed disabled:opacity-40"
+        )
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": ariaLabel ?? "Suggestions",
+        className: cn(
+          "absolute top-full right-0 left-0 z-30 mt-1 max-h-[220px] overflow-auto",
+          "border-border bg-panel rounded-md border p-1 shadow-lg"
+        ),
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "text-text-dim px-2 py-3 text-center text-[12px]", role: "presentation", children: emptyState ?? "No matches" }) : filtered.map((option, i) => {
+          const isActive = i === cursor;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              id: `${listboxId}-option-${i}`,
+              role: "option",
+              "aria-selected": isActive,
+              "aria-disabled": option.disabled || void 0,
+              onMouseEnter: () => setCursor(i),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                if (!option.disabled) commit(option);
+              },
+              className: cn(
+                "text-text cursor-pointer rounded-sm px-[10px] py-2 text-[12px]",
+                isActive && "bg-accent-dim text-accent",
+                option.disabled && "pointer-events-none opacity-40"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx("div", { className: "text-text-dim text-[11px]", children: option.description })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    ),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", readOnly: true })
+  ] });
+});
+Combobox.displayName = "Combobox";
+function flatItems(groups) {
+  return groups.flatMap((g) => g.items);
+}
+var CommandPalette = forwardRef(
+  function CommandPalette2({
+    open,
+    onOpenChange,
+    query,
+    onQueryChange,
+    groups,
+    onSelect,
+    placeholder = "Search\u2026",
+    footer,
+    emptyState,
+    width = 540
+  }, ref) {
+    const flat = useMemo(() => flatItems(groups), [groups]);
+    const { cursor, setCursor, onKeyDown } = useKeyboardList({
+      count: flat.length,
+      defaultCursor: 0,
+      onSelect: (i) => {
+        const item = flat[i];
+        if (item) onSelect(item.id);
+      }
+    });
+    useEffect(() => {
+      setCursor(0);
+    }, [query, groups, setCursor]);
+    return /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        RadixDialog.Overlay,
+        {
+          className: cn(
+            "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+            "data-[state=open]:animate-[ship-fade-in_150ms_ease]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        RadixDialog.Content,
+        {
+          ref,
+          "aria-label": "Command palette",
+          "aria-describedby": void 0,
+          style: { width },
+          className: cn(
+            "fixed top-[20%] left-1/2 z-[51] max-w-[calc(100%-40px)] -translate-x-1/2",
+            "border-border-strong bg-panel overflow-hidden rounded-xl border shadow-lg",
+            "outline-none data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
+          ),
+          onKeyDown,
+          children: [
+            /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: "Command palette" }),
+            /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  autoFocus: true,
+                  type: "text",
+                  value: query,
+                  onChange: (e) => onQueryChange(e.target.value),
+                  placeholder,
+                  "aria-label": "Search",
+                  "aria-autocomplete": "list",
+                  className: "text-text placeholder:text-text-dim flex-1 border-0 bg-transparent text-[14px] outline-none"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsx(
+              CommandGroups,
+              {
+                groups,
+                cursor,
+                setCursor,
+                onSelect
+              }
+            ) }),
+            footer && /* @__PURE__ */ jsx("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+CommandPalette.displayName = "CommandPalette";
+function CommandGroups({ groups, cursor, setCursor, onSelect }) {
+  let runningIndex = 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, gIdx) => {
+    if (group.items.length === 0) return null;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      group.label && /* @__PURE__ */ jsxs("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+        group.label,
+        " \xB7 ",
+        group.items.length
+      ] }),
+      group.items.map((item) => {
+        const myIndex = runningIndex++;
+        const isActive = cursor === myIndex;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": isActive,
+            onClick: () => onSelect(item.id),
+            onMouseEnter: () => setCursor(myIndex),
+            className: cn(
+              "flex w-full cursor-pointer items-center gap-[10px] rounded-md border-0 bg-transparent px-[10px] py-2 text-left outline-none",
+              isActive ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
+            ),
+            children: [
+              item.glyph != null && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "font-mono text-[12px]",
+                    isActive ? "text-accent" : "text-text-muted"
+                  ),
+                  children: item.glyph
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px]", children: item.label }),
+                item.description && /* @__PURE__ */ jsx("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
+              ] }),
+              item.trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
+            ]
+          },
+          item.id
+        );
+      })
+    ] }, gIdx);
+  }) });
+}
+function filterCommandItems(query, groups) {
+  const q = query.trim().toLowerCase();
+  if (!q) return groups.map((g) => ({ ...g, items: [...g.items] }));
+  return groups.map((g) => ({
+    ...g,
+    items: g.items.filter((item) => {
+      const haystack = item.searchText ?? `${typeof item.label === "string" ? item.label : ""} ${typeof item.description === "string" ? item.description : ""}`;
+      return haystack.toLowerCase().includes(q);
+    })
+  })).filter((g) => g.items.length > 0);
+}
+var alignClass = {
+  left: "text-left",
+  right: "text-right",
+  center: "text-center"
+};
+function DataTable(props) {
+  const {
+    data,
+    columns,
+    rowKey,
+    sort: sortProp,
+    defaultSort,
+    onSortChange,
+    selectable,
+    selected: selectedProp,
+    defaultSelected,
+    onSelectionChange,
+    emptyState,
+    stickyHeader,
+    caption,
+    className,
+    ref
+  } = props;
+  const [sort, setSort] = useControllableState({
+    value: sortProp,
+    defaultValue: defaultSort ?? null,
+    onChange: onSortChange
+  });
+  const [selected, setSelected] = useControllableState({
+    value: selectedProp instanceof Set ? selectedProp : selectedProp,
+    defaultValue: new Set(defaultSelected ?? []),
+    onChange: onSelectionChange
+  });
+  const sortableMap = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const c of columns) if (c.accessor) m.set(c.key, c);
+    return m;
+  }, [columns]);
+  const sortedData = useMemo(() => {
+    if (!sort) return [...data];
+    const col = sortableMap.get(sort.key);
+    if (!col || !col.accessor) return [...data];
+    const factor = sort.direction === "asc" ? 1 : -1;
+    return [...data].sort((a, b) => {
+      const av = col.accessor(a);
+      const bv = col.accessor(b);
+      if (typeof av === "number" && typeof bv === "number") return (av - bv) * factor;
+      return String(av).localeCompare(String(bv)) * factor;
+    });
+  }, [data, sort, sortableMap]);
+  const allIds = useMemo(() => sortedData.map(rowKey), [sortedData, rowKey]);
+  const allSelected = allIds.length > 0 && allIds.every((id) => selected.has(id));
+  const someSelected = !allSelected && allIds.some((id) => selected.has(id));
+  const headerCheckRef = useRef(null);
+  useEffect(() => {
+    if (headerCheckRef.current) headerCheckRef.current.indeterminate = someSelected;
+  }, [someSelected]);
+  const toggleSort = (key) => {
+    const col = sortableMap.get(key);
+    if (!col) return;
+    setSort((prev) => {
+      if (prev?.key !== key) return { key, direction: "asc" };
+      if (prev.direction === "asc") return { key, direction: "desc" };
+      return null;
+    });
+  };
+  const toggleAll = () => {
+    setSelected((prev) => {
+      const next = new Set(prev ?? []);
+      if (allSelected) {
+        for (const id of allIds) next.delete(id);
+      } else {
+        for (const id of allIds) next.add(id);
+      }
+      return next;
+    });
+  };
+  const toggleRow = (id) => {
+    setSelected((prev) => {
+      const next = new Set(prev ?? []);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+    caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsx("thead", { className: cn("bg-panel-2", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { children: [
+      selectable && /* @__PURE__ */ jsx("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: headerCheckRef,
+          type: "checkbox",
+          "aria-label": "Select all rows",
+          checked: allSelected,
+          onChange: toggleAll,
+          className: "cursor-pointer accent-[var(--color-accent)]"
+        }
+      ) }),
+      columns.map((col) => {
+        const sortable = !!col.accessor;
+        const isSorted = sort?.key === col.key;
+        const ariaSort = !sortable ? void 0 : isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : "none";
+        const align = col.align ?? "left";
+        return /* @__PURE__ */ jsxs(
+          "th",
+          {
+            scope: "col",
+            "aria-sort": ariaSort,
+            onClick: sortable ? () => toggleSort(col.key) : void 0,
+            style: col.width != null ? { width: col.width } : void 0,
+            className: cn(
+              "border-border border-b px-3 py-2 font-mono text-[10px] font-medium tracking-[1.4px] uppercase select-none",
+              alignClass[align],
+              sortable && "cursor-pointer",
+              isSorted ? "text-accent" : "text-text-dim"
+            ),
+            children: [
+              col.header,
+              sortable && isSorted && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" })
+            ]
+          },
+          col.key
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      sortedData.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: columns.length + (selectable ? 1 : 0),
+          className: "text-text-dim px-3 py-8 text-center",
+          children: emptyState ?? "No data"
+        }
+      ) }),
+      sortedData.map((row) => {
+        const id = rowKey(row);
+        const isSelected = selected.has(id);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            "data-state": isSelected ? "selected" : void 0,
+            className: cn(
+              "border-border border-b transition-colors duration-(--duration-micro) last:border-0",
+              isSelected ? "bg-accent-dim/50" : "hover:bg-panel-2"
+            ),
+            children: [
+              selectable && /* @__PURE__ */ jsx("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  "aria-label": `Select row ${id}`,
+                  checked: isSelected,
+                  onChange: () => toggleRow(id),
+                  className: "cursor-pointer accent-[var(--color-accent)]"
+                }
+              ) }),
+              columns.map((col) => /* @__PURE__ */ jsx("td", { className: cn("px-3 py-[10px]", alignClass[col.align ?? "left"]), children: col.cell ? col.cell(row) : col.accessor ? String(col.accessor(row)) : null }, col.key))
+            ]
+          },
+          id
+        );
+      })
+    ] })
+  ] });
+}
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "April",
+  "May",
+  "June",
+  "July",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var DAYS = ["S", "M", "T", "W", "T", "F", "S"];
+function isSameDay(a, b) {
+  if (!a) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+var Calendar = forwardRef(function Calendar2({
+  selected,
+  defaultSelected,
+  onSelect,
+  month: monthProp,
+  year: yearProp,
+  defaultMonth,
+  defaultYear,
+  onVisibleMonthChange,
+  isDateDisabled,
+  className,
+  ...props
+}, ref) {
+  const today = /* @__PURE__ */ new Date();
+  const [selectedDate, setSelectedDate] = useControllableState({
+    value: selected,
+    defaultValue: defaultSelected,
+    onChange: onSelect
+  });
+  const initialMonth = defaultMonth ?? defaultSelected?.getMonth() ?? today.getMonth();
+  const initialYear = defaultYear ?? defaultSelected?.getFullYear() ?? today.getFullYear();
+  const [internalMonth, setInternalMonth] = useState(initialMonth);
+  const [internalYear, setInternalYear] = useState(initialYear);
+  const month = monthProp ?? internalMonth;
+  const year = yearProp ?? internalYear;
+  const isControlled = monthProp !== void 0 && yearProp !== void 0;
+  const setVisible = (m, y) => {
+    if (!isControlled) {
+      setInternalMonth(m);
+      setInternalYear(y);
+    }
+    onVisibleMonthChange?.({ month: m, year: y });
+  };
+  const goPrev = () => {
+    const m = month === 0 ? 11 : month - 1;
+    const y = month === 0 ? year - 1 : year;
+    setVisible(m, y);
+  };
+  const goNext = () => {
+    const m = month === 11 ? 0 : month + 1;
+    const y = month === 11 ? year + 1 : year;
+    setVisible(m, y);
+  };
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": `${MONTHS[month]} ${year}`,
+      className: cn(
+        "rounded-base border-border bg-panel w-[280px] border p-4 shadow-lg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
+            MONTHS[month],
+            " ",
+            year
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                variant: "ghost",
+                icon: "\u2039",
+                "aria-label": "Previous month",
+                onClick: goPrev
+              }
+            ),
+            /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-[2px]", children: [
+          DAYS.map((d, i) => /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "text-text-dim p-1 text-center font-mono text-[10px]", children: d }, i)),
+          Array.from({ length: firstDayOfMonth }).map((_, i) => /* @__PURE__ */ jsx("div", { "aria-hidden": true }, `pad-${i}`)),
+          Array.from({ length: daysInMonth }).map((_, i) => {
+            const d = i + 1;
+            const date = new Date(year, month, d);
+            const isSelected = isSameDay(selectedDate, date);
+            const isToday = isSameDay(today, date);
+            const disabled = isDateDisabled?.(date) ?? false;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled,
+                "aria-pressed": isSelected,
+                "aria-current": isToday ? "date" : void 0,
+                "aria-label": date.toDateString(),
+                onClick: () => setSelectedDate(date),
+                className: cn(
+                  "cursor-pointer rounded-xs border-0 bg-transparent py-[6px] text-center text-[12px] outline-none",
+                  "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+                  "disabled:cursor-not-allowed disabled:opacity-30",
+                  !isSelected && !disabled && "text-text hover:bg-panel-2",
+                  isSelected && "bg-accent text-on-accent font-semibold",
+                  !isSelected && isToday && "border-border-strong border"
+                ),
+                children: d
+              },
+              d
+            );
+          })
+        ] })
+      ]
+    }
+  );
+});
+Calendar.displayName = "Calendar";
+var defaultFormat = (d) => d.toLocaleDateString();
+var DatePicker = forwardRef(function DatePicker2({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Pick a date",
+  format = defaultFormat,
+  isDateDisabled,
+  width = 200,
+  disabled,
+  emptyLabel,
+  "aria-label": ariaLabel,
+  id,
+  name
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        id,
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel ?? placeholder,
+        className: cn(
+          "border-border bg-panel text-text flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-left text-[13px] outline-none",
+          "transition-[border,box-shadow] duration-(--duration-micro)",
+          "hover:bg-panel-2",
+          "focus-visible:border-accent focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          "disabled:cursor-not-allowed disabled:opacity-40"
+        ),
+        style: { width },
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: "z-40 outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            selected: value,
+            defaultMonth: value?.getMonth(),
+            defaultYear: value?.getFullYear(),
+            onSelect: (date) => {
+              setValue(date);
+              setOpen(false);
+            },
+            isDateDisabled
+          }
+        )
+      }
+    ) }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+var Dots = forwardRef(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
+  const interactive = typeof onChange === "function";
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: cn("inline-flex items-center gap-[6px]", className),
+      ...props,
+      children: Array.from({ length: total }).map((_, i) => {
+        const isActive = i === current;
+        const sharedClass = cn(
+          "h-[6px] rounded-full transition-[width,background] duration-(--duration-micro)",
+          isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
+        );
+        if (interactive) {
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Go to slide ${i + 1}`,
+              "aria-current": isActive ? "true" : void 0,
+              onClick: () => onChange?.(i),
+              className: cn(
+                sharedClass,
+                "cursor-pointer outline-none",
+                "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+                !isActive && "hover:bg-border-strong"
+              )
+            },
+            i
+          );
+        }
+        return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: sharedClass }, i);
+      })
+    }
+  );
+});
+Dots.displayName = "Dots";
+var plateStyles = cva("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
+  variants: {
+    tone: {
+      accent: "bg-accent-dim text-accent",
+      danger: "bg-[color-mix(in_oklab,var(--color-err),transparent_85%)] text-err",
+      muted: "bg-panel-2 text-text-muted"
+    }
+  },
+  defaultVariants: { tone: "accent" }
+});
+var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-base border-border bg-panel flex flex-col items-center gap-[10px] border border-dashed p-6 text-center",
+        className
+      ),
+      ...props,
+      children: [
+        icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: plateStyles({ tone }), children: icon }),
+        /* @__PURE__ */ jsx("div", { className: "text-[14px] font-medium", children: title }),
+        description && /* @__PURE__ */ jsx("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
+        chips && chips.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: c.onClick,
+            className: cn(
+              "border-border bg-panel-2 text-text-muted cursor-pointer rounded-md border px-[10px] py-[6px] text-[11px]",
+              "hover:border-border-strong hover:text-text outline-none",
+              "focus-visible:ring-accent-dim focus-visible:ring-[3px]"
+            ),
+            children: c.label
+          },
+          i
+        )) }),
+        action
+      ]
+    }
+  );
+});
+EmptyState.displayName = "EmptyState";
+function deriveExt(name) {
+  const dot = name.lastIndexOf(".");
+  if (dot < 0) return "FILE";
+  return name.slice(dot + 1).slice(0, 4).toUpperCase();
+}
+var FileChip = forwardRef(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
+  const ext = deriveExt(name);
+  const showProgress = typeof progress === "number";
+  const isComplete = showProgress && progress >= 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "border-border bg-panel-2 flex max-w-[320px] items-center gap-[10px] rounded-md border px-3 py-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "border-border bg-panel text-text-dim grid h-6 w-6 shrink-0 place-items-center rounded-xs border font-mono text-[9px]",
+            children: icon ?? ext
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium", children: name }),
+          /* @__PURE__ */ jsxs("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+            size,
+            showProgress && !isComplete && /* @__PURE__ */ jsxs("span", { children: [
+              " \xB7 ",
+              Math.round(progress),
+              "%"
+            ] })
+          ] }),
+          showProgress && !isComplete && /* @__PURE__ */ jsx("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-full transition-[width] duration-(--duration-step)",
+                failed ? "bg-err" : "bg-accent"
+              ),
+              style: { width: `${Math.max(0, Math.min(100, progress))}%` }
+            }
+          ) })
+        ] }),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${name}`,
+            onClick: onRemove,
+            className: cn(
+              "text-text-dim cursor-pointer border-0 bg-transparent p-0 text-[14px] leading-none",
+              "hover:text-text focus-visible:ring-accent-dim rounded-xs outline-none focus-visible:ring-[3px]"
+            ),
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+});
+FileChip.displayName = "FileChip";
+var Menubar = forwardRef(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixMenubar.Root,
+    {
+      ref,
+      className: cn(
+        "border-border bg-panel flex h-[30px] items-center gap-[2px] border-b px-3",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Menubar.displayName = "Menubar";
+var MenubarMenu = RadixMenubar.Menu;
+var MenubarTrigger = forwardRef(
+  function MenubarTrigger2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Trigger,
+      {
+        ref,
+        className: cn(
+          "text-text cursor-pointer rounded-xs border-0 bg-transparent px-[10px] py-1 text-[12px] outline-none",
+          "transition-colors duration-(--duration-micro)",
+          "data-[state=open]:bg-panel-2 hover:bg-panel-2",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+MenubarTrigger.displayName = "MenubarTrigger";
+var MenubarContent = forwardRef(
+  function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixMenubar.Portal, { children: /* @__PURE__ */ jsx(
+      RadixMenubar.Content,
+      {
+        ref,
+        sideOffset,
+        align,
+        className: cn(
+          "border-border-strong bg-panel z-40 min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+MenubarContent.displayName = "MenubarContent";
+var itemBase3 = cn(
+  "flex items-center gap-2 rounded-sm px-[10px] py-[6px] text-[12px] cursor-pointer outline-none",
+  "data-[highlighted]:bg-panel-2",
+  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
+);
+var MenubarItem = forwardRef(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixMenubar.Item,
+    {
+      ref,
+      className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+      ]
+    }
+  );
+});
+MenubarItem.displayName = "MenubarItem";
+var MenubarSeparator = forwardRef(
+  function MenubarSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Separator,
+      {
+        ref,
+        className: cn("bg-border my-1 h-px", className),
+        ...props
+      }
+    );
+  }
+);
+MenubarSeparator.displayName = "MenubarSeparator";
+function buildRange(page, total, siblings) {
+  if (total <= 0) return [];
+  const items = [];
+  const left = Math.max(2, page - siblings);
+  const right = Math.min(total - 1, page + siblings);
+  items.push(1);
+  if (left > 2) items.push("start-ellipsis");
+  for (let i = left; i <= right; i++) items.push(i);
+  if (right < total - 1) items.push("end-ellipsis");
+  if (total > 1) items.push(total);
+  return items;
+}
+var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+  const items = buildRange(page, total, siblings);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref,
+      "aria-label": "Pagination",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            icon: "\u2039",
+            "aria-label": "Previous page",
+            disabled: page <= 1,
+            onClick: () => onPageChange(Math.max(1, page - 1))
+          }
+        ),
+        items.map((item, i) => {
+          if (item === "start-ellipsis" || item === "end-ellipsis") {
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "text-text-dim grid h-[26px] min-w-[26px] place-items-center px-2 font-mono text-[12px]",
+                children: "\u2026"
+              },
+              `ellipsis-${i}`
+            );
+          }
+          const isActive = item === page;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Go to page ${item}`,
+              "aria-current": isActive ? "page" : void 0,
+              onClick: () => onPageChange(item),
+              className: cn(
+                "h-[26px] min-w-[26px] rounded-[5px] px-2 font-mono text-[12px] outline-none",
+                "cursor-pointer transition-colors duration-(--duration-micro)",
+                "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+                isActive ? "bg-accent-dim text-accent border-accent border" : "text-text-muted hover:bg-panel-2 hover:text-text border border-transparent"
+              ),
+              children: item
+            },
+            item
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            icon: "\u203A",
+            "aria-label": "Next page",
+            disabled: page >= total,
+            onClick: () => onPageChange(Math.min(total, page + 1))
+          }
+        )
+      ]
+    }
+  );
+});
+Pagination.displayName = "Pagination";
+var trackStyles = cva("w-full rounded-full bg-panel-2 overflow-hidden", {
+  variants: {
+    size: {
+      sm: "h-[3px]",
+      md: "h-[4px]",
+      lg: "h-[6px]"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var fillStyles = cva("h-full rounded-full transition-[width] duration-(--duration-step)", {
+  variants: {
+    tone: {
+      accent: "bg-accent",
+      ok: "bg-ok",
+      warn: "bg-warn",
+      err: "bg-err"
+    }
+  },
+  defaultVariants: { tone: "accent" }
+});
+var Progress = forwardRef(function Progress2({
+  value = 0,
+  max = 100,
+  indeterminate = false,
+  label,
+  showValue = true,
+  tone,
+  size,
+  className,
+  ...props
+}, ref) {
+  const clamped = Math.min(max, Math.max(0, value));
+  const pct = max > 0 ? clamped / max * 100 : 0;
+  const display = Math.round(pct);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ jsxs("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+        display,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": indeterminate ? void 0 : display,
+        "aria-label": typeof label === "string" ? label : void 0,
+        className: trackStyles({ size }),
+        children: indeterminate ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "block h-full w-[40%] rounded-full",
+              fillStyles({ tone }),
+              "animate-[ship-indeterminate_1.4s_linear_infinite]"
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+      }
+    )
+  ] });
+});
+Progress.displayName = "Progress";
+var toneStrokeClass = {
+  accent: "stroke-accent",
+  ok: "stroke-ok",
+  warn: "stroke-warn",
+  err: "stroke-err"
+};
+var RadialProgress = forwardRef(
+  function RadialProgress2({
+    value,
+    max = 100,
+    size = 64,
+    thickness = 4,
+    tone,
+    children,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) {
+    const clamped = Math.min(max, Math.max(0, value));
+    const pct = max > 0 ? clamped / max * 100 : 0;
+    const r = (size - thickness) / 2;
+    const c = 2 * Math.PI * r;
+    const dash = pct / 100 * c;
+    const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": Math.round(pct),
+        "aria-label": ariaLabel ?? `${Math.round(pct)}%`,
+        className: cn("relative inline-grid place-items-center", className),
+        style: { width: size, height: size },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r,
+                fill: "none",
+                strokeWidth: thickness,
+                className: "stroke-panel-2"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r,
+                fill: "none",
+                strokeWidth: thickness,
+                strokeLinecap: "round",
+                strokeDasharray: `${dash} ${c}`,
+                transform: `rotate(-90 ${size / 2} ${size / 2})`,
+                className: cn(
+                  "transition-[stroke-dasharray] duration-(--duration-step)",
+                  toneStrokeClass[resolvedTone]
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
+        ]
+      }
+    );
+  }
+);
+RadialProgress.displayName = "RadialProgress";
+var Sidebar = forwardRef(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      ref,
+      style: { width, ...style },
+      className: cn(
+        "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Sidebar.displayName = "Sidebar";
+var NavItem = forwardRef(function NavItem2({ icon, label, active, badge, href, disabled, className, onClick, ...props }, ref) {
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label }),
+    badge != null && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "rounded-xs px-[6px] py-px font-mono text-[10px]",
+          active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
+        ),
+        children: badge
+      }
+    )
+  ] });
+  const baseClass = cn(
+    "flex cursor-pointer items-center gap-[10px] rounded-xs px-2 py-[6px] text-[13px] outline-none",
+    "transition-colors duration-(--duration-micro)",
+    "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+    active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+    disabled && "opacity-50 pointer-events-none",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": disabled || void 0,
+        className: baseClass,
+        onClick,
+        ...props,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      className: baseClass,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+      },
+      ...props,
+      children: inner
+    }
+  );
+});
+NavItem.displayName = "NavItem";
+var NavSection = forwardRef(function NavSection2({ label, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-text-dim flex items-center px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children: label }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children })
+  ] });
+});
+NavSection.displayName = "NavSection";
+function buildPath(values, w, h) {
+  if (values.length === 0) return { line: "", area: "" };
+  const pad = 2;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  const stepX = values.length === 1 ? 0 : (w - pad * 2) / (values.length - 1);
+  const points = values.map((v, i) => {
+    const x = pad + i * stepX;
+    const y = pad + (1 - (v - min) / range) * (h - pad * 2);
+    return `${x.toFixed(2)},${y.toFixed(2)}`;
+  });
+  const line = `M${points.join(" L")}`;
+  const area = `${line} L${(pad + (values.length - 1) * stepX).toFixed(2)},${(h - pad).toFixed(
+    2
+  )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
+  return { line, area };
+}
+var Sparkline = forwardRef(function Sparkline2({
+  values,
+  width = 160,
+  height = 32,
+  stroke = "currentColor",
+  strokeWidth = 1.5,
+  fill = false,
+  className,
+  "aria-label": ariaLabel = "Trend",
+  ...props
+}, ref) {
+  const { line, area } = useMemo(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("inline-block", className),
+      ...props,
+      children: [
+        fill && /* @__PURE__ */ jsx("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: line,
+            fill: "none",
+            stroke,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+});
+Sparkline.displayName = "Sparkline";
+var sizes = {
+  sm: { box: "h-3 w-3", border: "border-[2px]" },
+  md: { box: "h-4 w-4", border: "border-[2px]" },
+  lg: { box: "h-5 w-5", border: "border-[2px]" }
+};
+var Spinner2 = forwardRef(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+  const s = sizes[size];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": label,
+      className: cn("inline-block", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "border-panel-2 border-t-accent block animate-[ship-spin_0.7s_linear_infinite] rounded-full",
+            s.box,
+            s.border
+          )
+        }
+      )
+    }
+  );
+});
+Spinner2.displayName = "Spinner";
+var dotBase = "h-6 w-6 rounded-full grid place-items-center text-[11px] font-mono font-semibold border";
+var dotStateClass = {
+  done: "bg-accent text-on-accent border-accent",
+  current: "bg-accent-dim text-accent border-accent",
+  upcoming: "bg-panel text-text-dim border-border"
+};
+var labelStateClass = {
+  done: "text-text",
+  current: "text-text font-medium",
+  upcoming: "text-text-dim"
+};
+function stateFor(index, current) {
+  if (index < current) return "done";
+  if (index === current) return "current";
+  return "upcoming";
+}
+var Stepper = forwardRef(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "list",
+      "aria-label": "Progress",
+      className: cn("flex w-full items-center", className),
+      ...props,
+      children: steps.map((label, i) => {
+        const state = stateFor(i, current);
+        const connectorActive = i < current;
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": state === "current" ? "step" : void 0,
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ jsx("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
+              ]
+            }
+          ),
+          i < steps.length - 1 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("mx-3 h-px flex-1", connectorActive ? "bg-accent" : "bg-border")
+            }
+          )
+        ] }, label);
+      })
+    }
+  );
+});
+Stepper.displayName = "Stepper";
+var TabsVariantContext = createContext("underline");
+var tabsListStyles = cva("", {
+  variants: {
+    variant: {
+      underline: "flex gap-6 border-b border-border",
+      pill: "inline-flex gap-1 rounded-base border border-border bg-panel-2 p-[3px]"
+    }
+  }
+});
+var tabsTriggerStyles = cva(
+  "cursor-pointer outline-none transition-colors duration-(--duration-micro) focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+  {
+    variants: {
+      variant: {
+        underline: cn(
+          "relative -mb-px inline-flex items-center px-[2px] py-2 text-[13px]",
+          "border-b-2 border-transparent text-text-muted",
+          "hover:text-text",
+          "data-[state=active]:border-accent data-[state=active]:text-text data-[state=active]:font-medium"
+        ),
+        pill: cn(
+          "inline-flex items-center rounded-sm px-[14px] py-[6px] text-[12px] font-normal",
+          "text-text-muted hover:text-text",
+          "data-[state=active]:bg-panel data-[state=active]:text-text data-[state=active]:font-medium",
+          "data-[state=active]:shadow-sm"
+        )
+      }
+    }
+  }
+);
+var Tabs = forwardRef(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+    RadixTabs.Root,
+    {
+      ref,
+      className: cn("flex flex-col", variant === "underline" && "gap-3", className),
+      ...props
+    }
+  ) });
+});
+Tabs.displayName = "Tabs";
+var TabsList = forwardRef(function TabsList2({ className, ...props }, ref) {
+  const variant = useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsx(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+});
+TabsList.displayName = "TabsList";
+var Tab = forwardRef(function Tab2({ className, ...props }, ref) {
+  const variant = useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsx(
+    RadixTabs.Trigger,
+    {
+      ref,
+      className: cn(tabsTriggerStyles({ variant }), className),
+      ...props
+    }
+  );
+});
+Tab.displayName = "Tab";
+var TabsContent = forwardRef(
+  function TabsContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixTabs.Content,
+      {
+        ref,
+        className: cn(
+          "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+var ringClass = {
+  accent: "border-accent",
+  ok: "border-ok",
+  warn: "border-warn",
+  err: "border-err",
+  muted: "border-text-dim"
+};
+var Timeline = forwardRef(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "relative pl-6",
+        "before:bg-border before:absolute before:top-[6px] before:bottom-[6px] before:left-[7px] before:w-px",
+        className
+      ),
+      ...props,
+      children: events ? events.map((e, i) => /* @__PURE__ */ jsx(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+    }
+  );
+});
+Timeline.displayName = "Timeline";
+var TimelineItem = forwardRef(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "bg-bg absolute top-[4px] -left-6 h-[14px] w-[14px] rounded-full border-2",
+          ringClass[tone]
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ jsx("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ jsx("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+  ] });
+});
+TimelineItem.displayName = "TimelineItem";
+var Topbar = forwardRef(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cn(
+        "border-border bg-panel flex h-[52px] items-center gap-4 border-b px-5",
+        className
+      ),
+      ...props,
+      children: [
+        leading,
+        title && /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: actions }),
+        children
+      ]
+    }
+  );
+});
+Topbar.displayName = "Topbar";
+var Tree = forwardRef(function Tree2({
+  items,
+  expanded: expandedProp,
+  defaultExpanded,
+  onExpandedChange,
+  selected: selectedProp,
+  defaultSelected,
+  onSelect,
+  className,
+  ...props
+}, ref) {
+  const [expanded, setExpanded] = useControllableState({
+    value: expandedProp instanceof Set ? expandedProp : expandedProp,
+    defaultValue: defaultExpanded ? new Set(defaultExpanded) : /* @__PURE__ */ new Set(),
+    onChange: onExpandedChange
+  });
+  const [selected, setSelected] = useControllableState({
+    value: selectedProp,
+    defaultValue: defaultSelected,
+    onChange: onSelect
+  });
+  const toggle = useCallback(
+    (id) => {
+      setExpanded((prev) => {
+        const next = new Set(prev ?? []);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    },
+    [setExpanded]
+  );
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      role: "tree",
+      className: cn("flex flex-col gap-px text-[12px]", className),
+      ...props,
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        TreeItemRow,
+        {
+          item,
+          level: 1,
+          expanded: expanded ?? /* @__PURE__ */ new Set(),
+          selected,
+          onToggle: toggle,
+          onSelect: (id) => setSelected(id)
+        },
+        item.id
+      ))
+    }
+  );
+});
+Tree.displayName = "Tree";
+function TreeItemRow({ item, level, expanded, selected, onToggle, onSelect }) {
+  const hasChildren = !!item.children && item.children.length > 0;
+  const isExpanded = hasChildren && expanded.has(item.id);
+  const isSelected = selected === item.id;
+  return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "treeitem",
+        "aria-level": level,
+        "aria-expanded": hasChildren ? isExpanded : void 0,
+        "aria-selected": isSelected,
+        tabIndex: isSelected ? 0 : -1,
+        onClick: () => {
+          onSelect(item.id);
+          if (hasChildren) onToggle(item.id);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect(item.id);
+            if (hasChildren) onToggle(item.id);
+          } else if (e.key === "ArrowRight" && hasChildren && !isExpanded) {
+            e.preventDefault();
+            onToggle(item.id);
+          } else if (e.key === "ArrowLeft" && hasChildren && isExpanded) {
+            e.preventDefault();
+            onToggle(item.id);
+          }
+        },
+        style: { paddingLeft: 4 + (level - 1) * 16 },
+        className: cn(
+          "flex cursor-pointer items-center gap-[6px] rounded-xs py-[5px] pr-2 outline-none",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
+          item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+          item.trailing
+        ]
+      }
+    ),
+    hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "flex flex-col gap-px", children: item.children.map((child) => /* @__PURE__ */ jsx(
+      TreeItemRow,
+      {
+        item: child,
+        level: level + 1,
+        expanded,
+        selected,
+        onToggle,
+        onSelect
+      },
+      child.id
+    )) })
+  ] });
+}
+
+export { Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogRoot, AlertDialogTrigger, Avatar, AvatarGroup, Badge, Banner, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Checkbox, Chip, Combobox, CommandPalette, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger, Dots, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, EmptyState, FAB, Field, FileChip, HoverCard, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, IconButton, Input, Kbd, MenuCheckboxItem, MenuItem, MenuSeparator, Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger, NavItem, NavSection, OTP, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, RadialProgress, Radio, RadioGroup, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValue, Sheet, Sidebar, Skeleton, Slider, Sparkline, Spinner2 as Spinner, SplitButton, StatCard, StatusDot, Stepper, Switch, Tab, Tabs, TabsContent, TabsList, Tag, Textarea, Timeline, TimelineItem, ToastCard, ToastProvider, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, Tree, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, iconButtonStyles, useControllableState, useDisclosure, useEscape, useKeyboardList, useOutsideClick, useTheme, useToast };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map