@ship-it-ui/ui 0.0.1

package/dist/index.cjs

@@ -0,0 +1,3581 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var react = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+var RadixCheckbox = require('@radix-ui/react-checkbox');
+var RadixRadio = require('@radix-ui/react-radio-group');
+var RadixSelect = require('@radix-ui/react-select');
+var RadixSlider = require('@radix-ui/react-slider');
+var RadixSwitch = require('@radix-ui/react-switch');
+var RadixAvatar = require('@radix-ui/react-avatar');
+var RadixContext = require('@radix-ui/react-context-menu');
+var RadixDialog = require('@radix-ui/react-dialog');
+var RadixAlert = require('@radix-ui/react-alert-dialog');
+var RadixMenu = require('@radix-ui/react-dropdown-menu');
+var RadixHoverCard = require('@radix-ui/react-hover-card');
+var RadixPopover = require('@radix-ui/react-popover');
+var RadixToast = require('@radix-ui/react-toast');
+var RadixTooltip = require('@radix-ui/react-tooltip');
+var RadixMenubar = require('@radix-ui/react-menubar');
+var RadixTabs = require('@radix-ui/react-tabs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
+var RadixRadio__namespace = /*#__PURE__*/_interopNamespace(RadixRadio);
+var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
+var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
+var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
+var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
+var RadixContext__namespace = /*#__PURE__*/_interopNamespace(RadixContext);
+var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
+var RadixAlert__namespace = /*#__PURE__*/_interopNamespace(RadixAlert);
+var RadixMenu__namespace = /*#__PURE__*/_interopNamespace(RadixMenu);
+var RadixHoverCard__namespace = /*#__PURE__*/_interopNamespace(RadixHoverCard);
+var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
+var RadixToast__namespace = /*#__PURE__*/_interopNamespace(RadixToast);
+var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
+var RadixMenubar__namespace = /*#__PURE__*/_interopNamespace(RadixMenubar);
+var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const valueRef = react.useRef(value);
+  valueRef.current = value;
+  const setValue = react.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] = react.useState(initial);
+  const onOpen = react.useCallback(() => setOpen(true), []);
+  const onClose = react.useCallback(() => setOpen(false), []);
+  const onToggle = react.useCallback(() => setOpen((o) => !o), []);
+  return { open, onOpen, onClose, onToggle, setOpen };
+}
+function useEscape(handler, enabled = true) {
+  react.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] = react.useState(defaultCursor);
+  const move = react.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 = react.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) {
+  react.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] = react.useState(() => {
+    if (typeof document === "undefined") return "dark";
+    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  });
+  const setTheme = react.useCallback((next) => {
+    if (next === "light") {
+      document.documentElement.setAttribute("data-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+    setThemeState(next);
+  }, []);
+  const toggle = react.useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+  react.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 = classVarianceAuthority.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__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      {
+        ref,
+        "aria-busy": loading || void 0,
+        "aria-disabled": isDisabled || void 0,
+        "data-disabled": isDisabled ? "" : void 0,
+        className: composedClassName,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      className: composedClassName,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: iconPx }) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: icon }) : null,
+        children,
+        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex opacity-60", children: trailing })
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var iconButtonStyles = classVarianceAuthority.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 = react.forwardRef(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      className: cn(iconButtonStyles({ variant, size }), className),
+      ...props,
+      children: icon
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+var ButtonGroup = react.forwardRef(function ButtonGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
+  const items = react.Children.toArray(children).filter(react.isValidElement);
+  return /* @__PURE__ */ jsxRuntime.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 react.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 = react.forwardRef(function SplitButton2({ variant = "primary", size = "md", onClick, onMenu, disabled, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant,
+        size,
+        onClick,
+        disabled,
+        className: "rounded-r-none border-r border-r-black/20",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant,
+        size,
+        onClick: onMenu,
+        disabled,
+        "aria-label": "More actions",
+        className: "rounded-l-none px-2",
+        children: "\u25BE"
+      }
+    )
+  ] });
+});
+SplitButton.displayName = "SplitButton";
+var FAB = react.forwardRef(function FAB2({ icon = "\u2726", type, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = react.useId();
+  const id = idProp ?? `cb-${reactId}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        props.disabled && "cursor-not-allowed opacity-40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixCheckbox__namespace.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__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-[6px]", className), ...props, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: "text-text-muted text-[11px] font-medium", children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-err ml-1", children: "*" })
+    ] }),
+    children({
+      id,
+      "aria-describedby": describedBy,
+      "aria-invalid": error ? true : void 0
+    }),
+    hint && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: hintId, className: "text-text-dim text-[11px]", children: hint }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-err text-[11px]", children: error })
+  ] });
+}
+var inputWrapperStyles = classVarianceAuthority.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 = react.forwardRef(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
+  const computedTone = error ? "error" : tone;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(inputWrapperStyles({ size, tone: computedTone }), className),
+      style: { width, ...style },
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim leading-none", children: icon }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-dim text-[11px]", children: trailing })
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+var SearchInput = react.forwardRef(function SearchInput2({ shortcut = "\u2318K", width = 360, className, style, placeholder = "Search\u2026", ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-dim leading-none", children: "\u2315" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
+  const baseId = react.useId();
+  const refs = react.useRef([]);
+  const [values, setValues] = react.useState(
+    () => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
+  );
+  react.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__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", className), children: values.map((c, i) => /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function RadioGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixRadio__namespace.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
+});
+RadioGroup.displayName = "RadioGroup";
+var Radio = react.forwardRef(function Radio2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = react.useId();
+  const id = idProp ?? `radio-${reactId}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        props.disabled && "cursor-not-allowed opacity-40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixRadio__namespace.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__ */ jsxRuntime.jsx(RadixRadio__namespace.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+      ]
+    }
+  );
+});
+Radio.displayName = "Radio";
+var SelectRoot = RadixSelect__namespace.Root;
+var SelectValue = RadixSelect__namespace.Value;
+var SelectGroup = RadixSelect__namespace.Group;
+var SelectLabel = RadixSelect__namespace.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 = react.forwardRef(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadixSelect__namespace.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__ */ jsxRuntime.jsx(RadixSelect__namespace.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = react.forwardRef(
+  function SelectContent2({ className, children, position = "popper", sideOffset = 6, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixSelect__namespace.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__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { children })
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = react.forwardRef(
+  function SelectItem2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixSelect__namespace.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__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children })
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+function Select({
+  options,
+  placeholder = "Select\u2026",
+  size,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectTrigger,
+      {
+        size,
+        className,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((opt) => {
+      const value = typeof opt === "string" ? opt : opt.value;
+      const label = typeof opt === "string" ? opt : opt.label;
+      return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value, children: label }, value);
+    }) })
+  ] });
+}
+var Slider = react.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__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-[10px]", className),
+      style: { width },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          RadixSlider__namespace.Root,
+          {
+            value: arrValue,
+            defaultValue: arrDefault,
+            className: "relative flex h-4 flex-1 touch-none items-center select-none",
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSlider__namespace.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(RadixSlider__namespace.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RadixSlider__namespace.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__ */ jsxRuntime.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 = react.forwardRef(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
+  const reactId = react.useId();
+  const id = idProp ?? `sw-${reactId}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        props.disabled && "cursor-not-allowed opacity-40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixSwitch__namespace.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__ */ jsxRuntime.jsx(
+              RadixSwitch__namespace.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__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+      ]
+    }
+  );
+});
+Switch.displayName = "Switch";
+var textareaStyles = classVarianceAuthority.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 = react.forwardRef(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      className: cn("relative inline-block", className),
+      style: { width: dim, height: dim, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          RadixAvatar__namespace.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__ */ jsxRuntime.jsx(RadixAvatar__namespace.Image, { src, alt: name, className: "h-full w-full object-cover" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RadixAvatar__namespace.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__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    visible.map((n, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: n, size }) }, `${n}-${i}`)),
+    rest > 0 && /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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 = react.forwardRef(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
+    dot && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn("inline-block rounded-full", dotSize[size], dotColorClass[variant])
+      }
+    ),
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex leading-none", children: icon }),
+    children
+  ] });
+});
+Badge.displayName = "Badge";
+var cardStyles = classVarianceAuthority.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 = react.forwardRef(function Card2({
+  variant,
+  interactive,
+  title,
+  description,
+  actions,
+  footer,
+  className,
+  children,
+  onClick,
+  ...props
+}, ref) {
+  const isInteractive = interactive ?? Boolean(onClick);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-[14px] font-medium", children: title }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: actions })
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
+        children,
+        footer && /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn("bg-panel border-border rounded-base block border p-[18px]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[10px] flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim text-[14px]", children: icon })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
+        delta !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
+          trendArrows[trend],
+          " ",
+          delta
+        ] })
+      ]
+    }
+  );
+});
+StatCard.displayName = "StatCard";
+var Chip = react.forwardRef(function Chip2({ icon, removable, onRemove, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
+        children,
+        removable && /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Kbd2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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 = react.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__ */ jsxRuntime.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 = react.forwardRef(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-muted text-[12px]", children: label })
+      ]
+    }
+  );
+});
+StatusDot.displayName = "StatusDot";
+var Tag = react.forwardRef(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-dim inline-flex", children: icon }),
+        children,
+        onRemove && /* @__PURE__ */ jsxRuntime.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__namespace.Root;
+var ContextMenuTrigger = RadixContext__namespace.Trigger;
+var ContextMenuPortal = RadixContext__namespace.Portal;
+var ContextMenuContent = react.forwardRef(
+  function ContextMenuContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixContext__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixContext__namespace.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 = react.forwardRef(
+  function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixContext__namespace.Item,
+      {
+        ref,
+        className: cn(itemBase, destructive ? "text-err" : "text-text", className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+          trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        ]
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuSeparator = react.forwardRef(function ContextMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixContext__namespace.Separator,
+    {
+      ref,
+      className: cn("bg-border my-1 h-[1px]", className),
+      ...props
+    }
+  );
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+var ContextMenu = RadixContext__namespace.Root;
+var DialogRoot = RadixDialog__namespace.Root;
+var DialogTrigger = RadixDialog__namespace.Trigger;
+var DialogClose = RadixDialog__namespace.Close;
+var DialogPortal = RadixDialog__namespace.Portal;
+var DialogOverlay = react.forwardRef(
+  function DialogOverlay2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixDialog__namespace.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 = react.forwardRef(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadixDialog__namespace.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__ */ jsxRuntime.jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { width, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(
+      RadixDialog__namespace.Title,
+      {
+        className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+    children,
+    footer && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] font-medium", children: title }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDialog__namespace.Close,
+    {
+      onClick: onClose,
+      "aria-label": "Close",
+      className: "text-text-dim hover:text-text p-1 text-[18px] leading-none",
+      children: "\xD7"
+    }
+  )
+] });
+var Drawer = react.forwardRef(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixDialog__namespace.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__ */ jsxRuntime.jsx(DrawerHeader, { title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto p-5", children })
+        ]
+      }
+    )
+  ] }) });
+});
+Drawer.displayName = "Drawer";
+var Sheet = react.forwardRef(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixDialog__namespace.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__ */ jsxRuntime.jsx("div", { className: "bg-border mx-auto mb-[14px] h-1 w-9 rounded-full", "aria-hidden": true }),
+          title && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { className: "mb-1 text-[15px] font-medium", children: title }),
+          children
+        ]
+      }
+    )
+  ] }) });
+});
+Sheet.displayName = "Sheet";
+var AlertDialogRoot = RadixAlert__namespace.Root;
+var AlertDialogTrigger = RadixAlert__namespace.Trigger;
+var AlertDialogAction = RadixAlert__namespace.Action;
+var AlertDialogCancel = RadixAlert__namespace.Cancel;
+var AlertDialog = react.forwardRef(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixAlert__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadixAlert__namespace.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+          "data-[state=open]:animate-[ship-fade-in_150ms_ease]"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixAlert__namespace.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__ */ jsxRuntime.jsx(
+            RadixAlert__namespace.Title,
+            {
+              className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(RadixAlert__namespace.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          children,
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+        ]
+      }
+    )
+  ] }) });
+});
+AlertDialog.displayName = "AlertDialog";
+var DropdownMenuRoot = RadixMenu__namespace.Root;
+var DropdownMenuTrigger = RadixMenu__namespace.Trigger;
+var DropdownMenuPortal = RadixMenu__namespace.Portal;
+var DropdownMenuGroup = RadixMenu__namespace.Group;
+var DropdownMenuLabel = RadixMenu__namespace.Label;
+var DropdownMenuRadioGroup = RadixMenu__namespace.RadioGroup;
+var DropdownMenuContent = react.forwardRef(
+  function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixMenu__namespace.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 = react.forwardRef(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadixMenu__namespace.Item,
+    {
+      ref,
+      className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+      ]
+    }
+  );
+});
+MenuItem.displayName = "MenuItem";
+var MenuCheckboxItem = react.forwardRef(
+  function MenuCheckboxItem2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixMenu__namespace.CheckboxItem,
+      {
+        ref,
+        className: cn(itemBase2, "text-text relative pl-[26px]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
+          children
+        ]
+      }
+    );
+  }
+);
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+var MenuSeparator = react.forwardRef(
+  function MenuSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixMenu__namespace.Separator,
+      {
+        ref,
+        className: cn("bg-border my-1 h-[1px]", className),
+        ...props
+      }
+    );
+  }
+);
+MenuSeparator.displayName = "MenuSeparator";
+var DropdownMenu = RadixMenu__namespace.Root;
+var HoverCardRoot = RadixHoverCard__namespace.Root;
+var HoverCardTrigger = RadixHoverCard__namespace.Trigger;
+var HoverCardPortal = RadixHoverCard__namespace.Portal;
+var HoverCardContent = react.forwardRef(
+  function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixHoverCard__namespace.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__ */ jsxRuntime.jsxs(RadixHoverCard__namespace.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(HoverCardContent, { children: content })
+  ] });
+}
+var PopoverRoot = RadixPopover__namespace.Root;
+var PopoverTrigger = RadixPopover__namespace.Trigger;
+var PopoverAnchor = RadixPopover__namespace.Anchor;
+var PopoverPortal = RadixPopover__namespace.Portal;
+var PopoverClose = RadixPopover__namespace.Close;
+var PopoverArrow = RadixPopover__namespace.Arrow;
+var PopoverContent = react.forwardRef(
+  function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixPopover__namespace.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__namespace.Root;
+var ToastContext = react.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] = react.useState([]);
+  const toast = react.useCallback((t) => {
+    const id = t.id ?? Math.random().toString(36).slice(2);
+    setToasts((prev) => [...prev, { ...t, id }]);
+    return id;
+  }, []);
+  const dismiss = react.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const value = react.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixToast__namespace.Provider, { swipeDirection: "right", children: [
+    children,
+    toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.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 = react.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
+  return ctx;
+}
+var ToastCard = react.forwardRef(function ToastCard2({ toast, onDismiss }, ref) {
+  const variant = toast.variant ?? "default";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadixToast__namespace.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__ */ jsxRuntime.jsx("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: toast.action })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixToast__namespace.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__namespace.Provider;
+var TooltipRoot = RadixTooltip__namespace.Root;
+var TooltipTrigger = RadixTooltip__namespace.Trigger;
+var TooltipPortal = RadixTooltip__namespace.Portal;
+var TooltipArrow = RadixTooltip__namespace.Arrow;
+var TooltipContent = react.forwardRef(
+  function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixTooltip__namespace.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__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side, children: content })
+  ] }) });
+}
+var alertStyles = classVarianceAuthority.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 = react.forwardRef(function Alert2({ variant = "info", title, description, icon, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: variant === "err" || variant === "warn" ? "alert" : "status",
+      className: cn(alertStyles({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[variant]),
+            children: icon ?? defaultGlyph[variant]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
+          children
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-1 shrink-0", children: action })
+      ]
+    }
+  );
+});
+Alert.displayName = "Alert";
+var bannerStyles = classVarianceAuthority.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 = react.forwardRef(function Banner2({ variant = "info", sticky, icon, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: variant === "err" || variant === "warn" ? "alert" : "status",
+      className: cn(bannerStyles({ variant, sticky }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[variant] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: action })
+      ]
+    }
+  );
+});
+Banner.displayName = "Banner";
+var Breadcrumbs = react.forwardRef(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
+  const crumbs = react.Children.toArray(children).filter(react.isValidElement);
+  const last = crumbs.length - 1;
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
+    const isCurrent = i === last;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "inline-flex items-center gap-[6px]", children: [
+      isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(Crumb, { ...crumb.props, current: true }) : crumb,
+      !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
+    ] }, i);
+  }) }) });
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+var Crumb = react.forwardRef(function Crumb2({ current, className, href, children, ...props }, ref) {
+  if (current) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", className: cn("text-text", className), children });
+  }
+  return /* @__PURE__ */ jsxRuntime.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 = react.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 = react.useId();
+  const listboxId = `${id ?? reactId}-listbox`;
+  const inputId = id ?? `${reactId}-input`;
+  const normalized = react.useMemo(() => options.map(normalize), [options]);
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const initialQuery = react.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] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  useOutsideClick(wrapperRef, () => setOpen(false));
+  const filtered = react.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);
+    }
+  });
+  react.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__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: option.label }),
+                option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim text-[11px]", children: option.description })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    ),
+    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ?? "", readOnly: true })
+  ] });
+});
+Combobox.displayName = "Combobox";
+function flatItems(groups) {
+  return groups.flatMap((g) => g.items);
+}
+var CommandPalette = react.forwardRef(
+  function CommandPalette2({
+    open,
+    onOpenChange,
+    query,
+    onQueryChange,
+    groups,
+    onSelect,
+    placeholder = "Search\u2026",
+    footer,
+    emptyState,
+    width = 540
+  }, ref) {
+    const flat = react.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);
+      }
+    });
+    react.useEffect(() => {
+      setCursor(0);
+    }, [query, groups, setCursor]);
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RadixDialog__namespace.Overlay,
+        {
+          className: cn(
+            "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+            "data-[state=open]:animate-[ship-fade-in_150ms_ease]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        RadixDialog__namespace.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__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { className: "sr-only", children: "Command palette" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsxRuntime.jsx(
+              CommandGroups,
+              {
+                groups,
+                cursor,
+                setCursor,
+                onSelect
+              }
+            ) }),
+            footer && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groups.map((group, gIdx) => {
+    if (group.items.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      group.label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "font-mono text-[12px]",
+                    isActive ? "text-accent" : "text-text-muted"
+                  ),
+                  children: item.glyph
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[13px]", children: item.label }),
+                item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
+              ] }),
+              item.trailing && /* @__PURE__ */ jsxRuntime.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 = react.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const c of columns) if (c.accessor) m.set(c.key, c);
+    return m;
+  }, [columns]);
+  const sortedData = react.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 = react.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 = react.useRef(null);
+  react.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__ */ jsxRuntime.jsxs("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+    caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("bg-panel-2", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" })
+            ]
+          },
+          col.key
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+      sortedData.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.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] = react.useState(initialMonth);
+  const [internalYear, setInternalYear] = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
+            MONTHS[month],
+            " ",
+            year
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                size: "sm",
+                variant: "ghost",
+                icon: "\u2039",
+                "aria-label": "Previous month",
+                onClick: goPrev
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-[2px]", children: [
+          DAYS.map((d, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.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] = react.useState(false);
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixPopover__namespace.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: "z-40 outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            selected: value,
+            defaultMonth: value?.getMonth(),
+            defaultYear: value?.getFullYear(),
+            onSelect: (date) => {
+              setValue(date);
+              setOpen(false);
+            },
+            isDateDisabled
+          }
+        )
+      }
+    ) }),
+    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+var Dots = react.forwardRef(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
+  const interactive = typeof onChange === "function";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: sharedClass }, i);
+      })
+    }
+  );
+});
+Dots.displayName = "Dots";
+var plateStyles = classVarianceAuthority.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 = react.forwardRef(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: plateStyles({ tone }), children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-medium", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
+        chips && chips.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[12px] font-medium", children: name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+            size,
+            showProgress && !isComplete && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              " \xB7 ",
+              Math.round(progress),
+              "%"
+            ] })
+          ] }),
+          showProgress && !isComplete && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixMenubar__namespace.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__namespace.Menu;
+var MenubarTrigger = react.forwardRef(
+  function MenubarTrigger2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixMenubar__namespace.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 = react.forwardRef(
+  function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixMenubar__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixMenubar__namespace.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 = react.forwardRef(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadixMenubar__namespace.Item,
+    {
+      ref,
+      className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+      ]
+    }
+  );
+});
+MenubarItem.displayName = "MenubarItem";
+var MenubarSeparator = react.forwardRef(
+  function MenubarSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixMenubar__namespace.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 = react.forwardRef(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+  const items = buildRange(page, total, siblings);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ref,
+      "aria-label": "Pagination",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = classVarianceAuthority.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 = classVarianceAuthority.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 = react.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__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+        display,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "block h-full w-[40%] rounded-full",
+              fillStyles({ tone }),
+              "animate-[ship-indeterminate_1.4s_linear_infinite]"
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r,
+                fill: "none",
+                strokeWidth: thickness,
+                className: "stroke-panel-2"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function NavItem2({ icon, label, active, badge, href, disabled, className, onClick, ...props }, ref) {
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
+    badge != null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref,
+        href,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": disabled || void 0,
+        className: baseClass,
+        onClick,
+        ...props,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function NavSection2({ label, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-dim flex items-center px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: label }),
+      action
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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 = react.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 } = react.useMemo(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("inline-block", className),
+      ...props,
+      children: [
+        fill && /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+  const s = sizes[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": label,
+      className: cn("inline-block", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": state === "current" ? "step" : void 0,
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
+              ]
+            }
+          ),
+          i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("mx-3 h-px flex-1", connectorActive ? "bg-accent" : "bg-border")
+            }
+          )
+        ] }, label);
+      })
+    }
+  );
+});
+Stepper.displayName = "Stepper";
+var TabsVariantContext = react.createContext("underline");
+var tabsListStyles = classVarianceAuthority.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 = classVarianceAuthority.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 = react.forwardRef(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RadixTabs__namespace.Root,
+    {
+      ref,
+      className: cn("flex flex-col", variant === "underline" && "gap-3", className),
+      ...props
+    }
+  ) });
+});
+Tabs.displayName = "Tabs";
+var TabsList = react.forwardRef(function TabsList2({ className, ...props }, ref) {
+  const variant = react.useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+});
+TabsList.displayName = "TabsList";
+var Tab = react.forwardRef(function Tab2({ className, ...props }, ref) {
+  const variant = react.useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixTabs__namespace.Trigger,
+    {
+      ref,
+      className: cn(tabsTriggerStyles({ variant }), className),
+      ...props
+    }
+  );
+});
+Tab.displayName = "Tab";
+var TabsContent = react.forwardRef(
+  function TabsContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixTabs__namespace.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 = react.forwardRef(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+    }
+  );
+});
+Timeline.displayName = "Timeline";
+var TimelineItem = react.forwardRef(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+  ] });
+});
+TimelineItem.displayName = "TimelineItem";
+var Topbar = react.forwardRef(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-[13px] font-medium", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: actions }),
+        children
+      ]
+    }
+  );
+});
+Topbar.displayName = "Topbar";
+var Tree = react.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 = react.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__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref,
+      role: "tree",
+      className: cn("flex flex-col gap-px text-[12px]", className),
+      ...props,
+      children: items.map((item) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { role: "none", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+          item.trailing
+        ]
+      }
+    ),
+    hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className: "flex flex-col gap-px", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      TreeItemRow,
+      {
+        item: child,
+        level: level + 1,
+        expanded,
+        selected,
+        onToggle,
+        onSelect
+      },
+      child.id
+    )) })
+  ] });
+}
+
+exports.Alert = Alert;
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogRoot = AlertDialogRoot;
+exports.AlertDialogTrigger = AlertDialogTrigger;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.Badge = Badge;
+exports.Banner = Banner;
+exports.Breadcrumbs = Breadcrumbs;
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.Calendar = Calendar;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.Chip = Chip;
+exports.Combobox = Combobox;
+exports.CommandPalette = CommandPalette;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuPortal = ContextMenuPortal;
+exports.ContextMenuRoot = ContextMenuRoot;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.Crumb = Crumb;
+exports.DataTable = DataTable;
+exports.DatePicker = DatePicker;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogRoot = DialogRoot;
+exports.DialogTrigger = DialogTrigger;
+exports.Dots = Dots;
+exports.Drawer = Drawer;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRoot = DropdownMenuRoot;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EmptyState = EmptyState;
+exports.FAB = FAB;
+exports.Field = Field;
+exports.FileChip = FileChip;
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardPortal = HoverCardPortal;
+exports.HoverCardRoot = HoverCardRoot;
+exports.HoverCardTrigger = HoverCardTrigger;
+exports.IconButton = IconButton;
+exports.Input = Input;
+exports.Kbd = Kbd;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuItem = MenuItem;
+exports.MenuSeparator = MenuSeparator;
+exports.Menubar = Menubar;
+exports.MenubarContent = MenubarContent;
+exports.MenubarItem = MenubarItem;
+exports.MenubarMenu = MenubarMenu;
+exports.MenubarSeparator = MenubarSeparator;
+exports.MenubarTrigger = MenubarTrigger;
+exports.NavItem = NavItem;
+exports.NavSection = NavSection;
+exports.OTP = OTP;
+exports.Pagination = Pagination;
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverArrow = PopoverArrow;
+exports.PopoverClose = PopoverClose;
+exports.PopoverContent = PopoverContent;
+exports.PopoverPortal = PopoverPortal;
+exports.PopoverRoot = PopoverRoot;
+exports.PopoverTrigger = PopoverTrigger;
+exports.Progress = Progress;
+exports.RadialProgress = RadialProgress;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.SearchInput = SearchInput;
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectRoot = SelectRoot;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
+exports.Sheet = Sheet;
+exports.Sidebar = Sidebar;
+exports.Skeleton = Skeleton;
+exports.Slider = Slider;
+exports.Sparkline = Sparkline;
+exports.Spinner = Spinner2;
+exports.SplitButton = SplitButton;
+exports.StatCard = StatCard;
+exports.StatusDot = StatusDot;
+exports.Stepper = Stepper;
+exports.Switch = Switch;
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.Tag = Tag;
+exports.Textarea = Textarea;
+exports.Timeline = Timeline;
+exports.TimelineItem = TimelineItem;
+exports.ToastCard = ToastCard;
+exports.ToastProvider = ToastProvider;
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipContent = TooltipContent;
+exports.TooltipPortal = TooltipPortal;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipRoot = TooltipRoot;
+exports.TooltipTrigger = TooltipTrigger;
+exports.Topbar = Topbar;
+exports.Tree = Tree;
+exports.badgeStyles = badgeStyles;
+exports.buttonStyles = buttonStyles;
+exports.cardStyles = cardStyles;
+exports.cn = cn;
+exports.filterCommandItems = filterCommandItems;
+exports.iconButtonStyles = iconButtonStyles;
+exports.useControllableState = useControllableState;
+exports.useDisclosure = useDisclosure;
+exports.useEscape = useEscape;
+exports.useKeyboardList = useKeyboardList;
+exports.useOutsideClick = useOutsideClick;
+exports.useTheme = useTheme;
+exports.useToast = useToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map