krts.ui 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2334 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AlertDialog: () => AlertDialog,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardHeader: () => CardHeader,
+  CheckIcon: () => CheckIcon,
+  Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
+  ChevronDownIcon: () => ChevronDownIcon,
+  ChevronRightIcon: () => ChevronRightIcon,
+  CopyButton: () => CopyButton,
+  CopyIcon: () => CopyIcon,
+  Description: () => Description,
+  Dialog: () => Dialog,
+  DialogTrigger: () => DialogTrigger,
+  Disclosure: () => Disclosure,
+  Drawer: () => Drawer,
+  DropdownButton: () => DropdownButton,
+  FieldError: () => FieldError,
+  GestureArea: () => GestureArea,
+  HoldButton: () => HoldButton,
+  Input: () => Input,
+  KRTS_EVENTS: () => KRTS_EVENTS,
+  Kbd: () => Kbd,
+  KrtsProvider: () => KrtsProvider,
+  Label: () => Label,
+  Link: () => Link,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  MenuSection: () => MenuSection,
+  MenuSeparator: () => MenuSeparator,
+  MenuTrigger: () => MenuTrigger,
+  Meter: () => Meter,
+  MinusIcon: () => MinusIcon,
+  Modal: () => Modal,
+  NumberField: () => NumberField,
+  PlusIcon: () => PlusIcon,
+  Popover: () => Popover,
+  ProgressBar: () => ProgressBar,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  SearchField: () => SearchField,
+  SearchIcon: () => SearchIcon,
+  Segment: () => Segment,
+  SegmentedControl: () => SegmentedControl,
+  Select: () => Select,
+  SelectItem: () => SelectItem,
+  Separator: () => Separator2,
+  Skeleton: () => Skeleton,
+  Slider: () => Slider,
+  Spinner: () => Spinner,
+  SplitButton: () => SplitButton,
+  SubmenuTrigger: () => SubmenuTrigger,
+  Switch: () => Switch,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Tabs: () => Tabs,
+  TextAreaField: () => TextAreaField,
+  TextField: () => TextField,
+  Toaster: () => Toaster,
+  ToggleButton: () => ToggleButton,
+  Tooltip: () => Tooltip,
+  TooltipTrigger: () => TooltipTrigger,
+  WithTooltip: () => WithTooltip,
+  XIcon: () => XIcon,
+  buttonStyles: () => buttonStyles,
+  cn: () => cn,
+  composeTw: () => composeTw,
+  dispatchKrtsEvent: () => dispatchKrtsEvent,
+  floatingMotion: () => floatingMotion,
+  floatingSurface: () => floatingSurface,
+  focusRing: () => focusRing,
+  inputFrame: () => inputFrame,
+  toast: () => toast,
+  useAnimatedWidth: () => useAnimatedWidth,
+  useGesture: () => useGesture,
+  useGestureHandlers: () => useGestureHandlers,
+  useKrtsConfig: () => useKrtsConfig,
+  usePerceivedProgress: () => usePerceivedProgress,
+  usePrefersReducedMotion: () => usePrefersReducedMotion,
+  useSmoothPending: () => useSmoothPending
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_react_aria_components = require("react-aria-components");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+function composeTw(className, tw) {
+  return (0, import_react_aria_components.composeRenderProps)(
+    className,
+    (cls, state) => cn(typeof tw === "function" ? tw(state) : tw, cls)
+  );
+}
+var focusRing = "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+
+// src/lib/dom-events.ts
+var KRTS_EVENTS = {
+  singleTap: "krts:singletap",
+  doubleTap: "krts:doubletap",
+  multiTap: "krts:multitap",
+  holdStart: "krts:holdstart",
+  hold: "krts:hold",
+  holdTick: "krts:holdtick",
+  holdEnd: "krts:holdend",
+  holdCancel: "krts:holdcancel",
+  swipe: "krts:swipe",
+  confirm: "krts:confirm"
+};
+function dispatchKrtsEvent(target, name, detail) {
+  if (!target || typeof CustomEvent === "undefined") return;
+  target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+}
+
+// src/lib/config.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaults = { menuAnimation: "fade" };
+var KrtsContext = (0, import_react.createContext)(defaults);
+function KrtsProvider({ children, ...config }) {
+  const parent = (0, import_react.useContext)(KrtsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KrtsContext.Provider, { value: { ...parent, ...config }, children });
+}
+function useKrtsConfig() {
+  return (0, import_react.useContext)(KrtsContext);
+}
+
+// src/hooks/useGesture.ts
+var import_react2 = require("react");
+var import_react_aria = require("react-aria");
+var now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+function useGestureHandlers(options) {
+  const opts = (0, import_react2.useRef)(options);
+  opts.current = options;
+  const s = (0, import_react2.useRef)({
+    taps: 0,
+    tapTimer: void 0,
+    lastTarget: null,
+    lastPointer: "mouse",
+    pressStart: 0,
+    holdTimer: void 0,
+    tickTimer: void 0,
+    raf: void 0,
+    holdFired: false,
+    holdSettled: false,
+    pressActive: false,
+    moved: false,
+    pointerId: null,
+    origin: null
+  }).current;
+  const [state, setState] = (0, import_react2.useState)({ isPressed: false, isHolding: false, didHold: false });
+  const holdEvent = (0, import_react2.useCallback)(
+    (type) => {
+      const duration = s.pressStart ? now() - s.pressStart : 0;
+      const holdDuration = opts.current.holdDuration ?? 500;
+      return {
+        type,
+        duration,
+        seconds: Math.floor(duration / 1e3),
+        progress: Math.min(1, duration / holdDuration),
+        pointerType: s.lastPointer,
+        target: s.lastTarget
+      };
+    },
+    [s]
+  );
+  const emit2 = (0, import_react2.useCallback)(
+    (name, detail) => {
+      if (opts.current.dispatchDomEvents === false) return;
+      dispatchKrtsEvent(s.lastTarget, name, detail);
+    },
+    [s]
+  );
+  const stopHoldTimers = (0, import_react2.useCallback)(() => {
+    clearTimeout(s.holdTimer);
+    clearInterval(s.tickTimer);
+    if (s.raf !== void 0) cancelAnimationFrame(s.raf);
+    s.holdTimer = void 0;
+    s.tickTimer = void 0;
+    s.raf = void 0;
+  }, [s]);
+  const resolveTaps = (0, import_react2.useCallback)(() => {
+    clearTimeout(s.tapTimer);
+    s.tapTimer = void 0;
+    const count = s.taps;
+    s.taps = 0;
+    if (count === 0 || !s.lastTarget) return;
+    const o = opts.current;
+    const base = { count, pointerType: s.lastPointer, target: s.lastTarget };
+    if (count === 1 && o.onSingleTap) {
+      const e = { ...base, type: "singletap" };
+      o.onSingleTap(e);
+      emit2(KRTS_EVENTS.singleTap, e);
+    } else if (count === 1) {
+      emit2(KRTS_EVENTS.singleTap, { ...base, type: "singletap" });
+    }
+    if (count === 2) {
+      const e = { ...base, type: "doubletap" };
+      o.onDoubleTap?.(e);
+      emit2(KRTS_EVENTS.doubleTap, e);
+    }
+    const multi = { ...base, type: "multitap" };
+    o.onMultiTap?.(multi);
+    emit2(KRTS_EVENTS.multiTap, multi);
+  }, [s, emit2]);
+  const maxTaps = () => {
+    const o = opts.current;
+    if (o.onMultiTap) return Math.max(2, o.maxTaps ?? 3);
+    if (o.onDoubleTap) return 2;
+    return 1;
+  };
+  const cancelHold = (0, import_react2.useCallback)(
+    (fireCancel) => {
+      const wasActive = s.pressActive;
+      stopHoldTimers();
+      if (wasActive && fireCancel && !s.holdFired && !s.holdSettled) {
+        s.holdSettled = true;
+        const e = holdEvent("holdcancel");
+        opts.current.onHoldCancel?.(e);
+        emit2(KRTS_EVENTS.holdCancel, e);
+      }
+      opts.current.onHoldProgress?.(0);
+      setState((p) => p.isHolding ? { ...p, isHolding: false } : p);
+    },
+    [s, stopHoldTimers, holdEvent, emit2]
+  );
+  const onPressStart = (0, import_react2.useCallback)(
+    (e) => {
+      if (opts.current.isDisabled) return;
+      const o = opts.current;
+      clearTimeout(s.tapTimer);
+      s.tapTimer = void 0;
+      s.lastTarget = e.target;
+      s.lastPointer = e.pointerType;
+      s.pressStart = now();
+      s.holdFired = false;
+      s.holdSettled = false;
+      s.pressActive = true;
+      s.moved = false;
+      setState({ isPressed: true, isHolding: true, didHold: false });
+      const startEvt = holdEvent("holdstart");
+      o.onHoldStart?.(startEvt);
+      emit2(KRTS_EVENTS.holdStart, startEvt);
+      const holdDuration = o.holdDuration ?? 500;
+      s.holdTimer = setTimeout(() => {
+        s.holdFired = true;
+        s.taps = 0;
+        const he = holdEvent("hold");
+        opts.current.onHold?.(he);
+        emit2(KRTS_EVENTS.hold, he);
+        setState((p) => ({ ...p, didHold: true }));
+      }, holdDuration);
+      const tickInterval = o.holdTickInterval ?? 1e3;
+      let ticks = 0;
+      s.tickTimer = setInterval(() => {
+        ticks += 1;
+        const te = { ...holdEvent("holdtick"), seconds: Math.floor(ticks * tickInterval / 1e3) };
+        opts.current.onHoldTick?.(te);
+        emit2(KRTS_EVENTS.holdTick, te);
+      }, tickInterval);
+      if (o.onHoldProgress && typeof requestAnimationFrame !== "undefined") {
+        const loop = () => {
+          const p = Math.min(1, (now() - s.pressStart) / (opts.current.holdDuration ?? 500));
+          opts.current.onHoldProgress?.(p);
+          s.raf = p < 1 ? requestAnimationFrame(loop) : void 0;
+        };
+        s.raf = requestAnimationFrame(loop);
+      }
+    },
+    [s, holdEvent, emit2]
+  );
+  const onPressEnd = (0, import_react2.useCallback)(
+    (_e) => {
+      if (!s.pressActive) return;
+      if (s.holdFired) {
+        const e = holdEvent("holdend");
+        opts.current.onHoldEnd?.(e);
+        emit2(KRTS_EVENTS.holdEnd, e);
+      }
+      cancelHold(true);
+      s.pressActive = false;
+      setState((p) => ({ ...p, isPressed: false, isHolding: false }));
+      if (s.taps > 0 && !s.tapTimer) {
+        s.tapTimer = setTimeout(resolveTaps, opts.current.multiTapDelay ?? 250);
+      }
+    },
+    [s, holdEvent, emit2, cancelHold, resolveTaps]
+  );
+  const onPress = (0, import_react2.useCallback)(
+    (e) => {
+      if (opts.current.isDisabled || s.holdFired || s.moved) return;
+      s.lastTarget = e.target;
+      s.lastPointer = e.pointerType;
+      s.taps += 1;
+      clearTimeout(s.tapTimer);
+      if (s.taps >= maxTaps()) resolveTaps();
+      else s.tapTimer = setTimeout(resolveTaps, opts.current.multiTapDelay ?? 250);
+    },
+    [s, resolveTaps]
+  );
+  const onPointerDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (opts.current.isDisabled || !e.isPrimary) return;
+      if (s.pointerId !== null) return;
+      s.pointerId = e.pointerId;
+      s.origin = { x: e.clientX, y: e.clientY, t: now() };
+    },
+    [s]
+  );
+  const onPointerMove = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.pointerId !== s.pointerId || !s.origin) return;
+      const dx = e.clientX - s.origin.x;
+      const dy = e.clientY - s.origin.y;
+      if (!s.moved && Math.hypot(dx, dy) > (opts.current.moveTolerance ?? 10)) {
+        s.moved = true;
+        if (!s.holdFired) cancelHold(true);
+      }
+    },
+    [s, cancelHold]
+  );
+  const endPointer = (0, import_react2.useCallback)(
+    (e, cancelled) => {
+      if (e.pointerId !== s.pointerId || !s.origin) return;
+      const origin = s.origin;
+      s.pointerId = null;
+      s.origin = null;
+      const o = opts.current;
+      if (cancelled || !o.onSwipe) return;
+      const dx = e.clientX - origin.x;
+      const dy = e.clientY - origin.y;
+      const horizontal = Math.abs(dx) >= Math.abs(dy);
+      const distance = Math.abs(horizontal ? dx : dy);
+      const elapsed = Math.max(1, now() - origin.t);
+      const velocity = distance / elapsed;
+      if (distance >= (o.swipeThreshold ?? 40) || distance > 10 && velocity > (o.swipeVelocity ?? 0.11)) {
+        const direction = horizontal ? dx > 0 ? "right" : "left" : dy > 0 ? "down" : "up";
+        const se = { type: "swipe", direction, distance, velocity, target: e.currentTarget };
+        o.onSwipe(se);
+        if (o.dispatchDomEvents !== false) dispatchKrtsEvent(e.currentTarget, KRTS_EVENTS.swipe, se);
+      }
+    },
+    [s]
+  );
+  const pointerProps = (0, import_react2.useMemo)(
+    () => ({
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: (e) => endPointer(e, false),
+      onPointerCancel: (e) => endPointer(e, true),
+      onContextMenu: (e) => {
+        const o = opts.current;
+        if ((o.onHold || o.onHoldTick) && s.lastPointer === "touch") e.preventDefault();
+      },
+      "data-krts-gesture": ""
+    }),
+    [onPointerDown, onPointerMove, endPointer, s]
+  );
+  const pressHandlers = (0, import_react2.useMemo)(
+    () => ({ onPressStart, onPressEnd, onPress }),
+    [onPressStart, onPressEnd, onPress]
+  );
+  (0, import_react2.useEffect)(
+    () => () => {
+      clearTimeout(s.tapTimer);
+      stopHoldTimers();
+    },
+    [s, stopHoldTimers]
+  );
+  return { pressHandlers, pointerProps, state };
+}
+function useGesture(options) {
+  const { pressHandlers, pointerProps, state } = useGestureHandlers(options);
+  const { pressProps } = (0, import_react_aria.usePress)({ ...pressHandlers, isDisabled: options.isDisabled });
+  return {
+    gestureProps: (0, import_react_aria.mergeProps)(pressProps, pointerProps),
+    isPressed: state.isPressed,
+    isHolding: state.isHolding,
+    didHold: state.didHold
+  };
+}
+
+// src/hooks/usePerceived.ts
+var import_react3 = require("react");
+function useSmoothPending(isPending, { delay = 150, minDuration = 500 } = {}) {
+  const [shown, setShown] = (0, import_react3.useState)(false);
+  const shownAt = (0, import_react3.useRef)(0);
+  (0, import_react3.useEffect)(() => {
+    if (isPending && !shown) {
+      const t = setTimeout(() => {
+        shownAt.current = Date.now();
+        setShown(true);
+      }, delay);
+      return () => clearTimeout(t);
+    }
+    if (!isPending && shown) {
+      const remaining = Math.max(0, minDuration - (Date.now() - shownAt.current));
+      const t = setTimeout(() => setShown(false), remaining);
+      return () => clearTimeout(t);
+    }
+    return void 0;
+  }, [isPending, shown, delay, minDuration]);
+  return shown;
+}
+function usePerceivedProgress(isRunning, isDone, { expectedDuration = 3e3, ceiling = 92 } = {}) {
+  const [value, setValue] = (0, import_react3.useState)(0);
+  const start = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (isDone) {
+      setValue(100);
+      start.current = null;
+      return void 0;
+    }
+    if (!isRunning) {
+      setValue(0);
+      start.current = null;
+      return void 0;
+    }
+    start.current = typeof performance !== "undefined" ? performance.now() : Date.now();
+    let raf = 0;
+    const tick = () => {
+      const t = (performance.now() - (start.current ?? 0)) / expectedDuration;
+      setValue(ceiling * (1 - Math.exp(-2.2 * t)));
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [isRunning, isDone, expectedDuration, ceiling]);
+  return value;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (typeof matchMedia === "undefined") return void 0;
+    const mq = matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const on = () => setReduced(mq.matches);
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  return reduced;
+}
+
+// src/hooks/useAnimatedWidth.ts
+var import_react4 = require("react");
+var useIsoLayoutEffect = typeof window !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
+function useAnimatedWidth({ enabled = true, duration = 250 } = {}) {
+  const contentRef = (0, import_react4.useRef)(null);
+  const [width, setWidth] = (0, import_react4.useState)(void 0);
+  const [ready, setReady] = (0, import_react4.useState)(false);
+  const reduced = usePrefersReducedMotion();
+  const measure = (0, import_react4.useCallback)(() => {
+    const content = contentRef.current;
+    const host = content?.parentElement;
+    if (!content || !host) return;
+    const cs = getComputedStyle(host);
+    const chrome = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight) + parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
+    const next = Math.ceil(content.getBoundingClientRect().width + chrome);
+    setWidth((prev) => prev === next ? prev : next);
+  }, []);
+  useIsoLayoutEffect(() => {
+    if (!enabled) {
+      setWidth(void 0);
+      return void 0;
+    }
+    const content = contentRef.current;
+    if (!content || typeof ResizeObserver === "undefined") return void 0;
+    measure();
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(content);
+    return () => ro.disconnect();
+  }, [enabled, measure]);
+  (0, import_react4.useEffect)(() => {
+    if (!enabled || width === void 0 || ready) return void 0;
+    let cancelled = false;
+    const fonts = typeof document !== "undefined" && document.fonts ? document.fonts.ready : Promise.resolve();
+    fonts.then(() => {
+      requestAnimationFrame(() => {
+        if (!cancelled) setReady(true);
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, width, ready]);
+  const style = enabled && width !== void 0 ? { width } : void 0;
+  return {
+    contentRef,
+    /** Spread into the host's `style`. */
+    widthStyle: style,
+    /** Append to the host's `transition` list. */
+    widthTransition: enabled && ready && !reduced ? `width ${duration}ms var(--ease-out)` : ""
+  };
+}
+
+// src/components/Button.tsx
+var import_react5 = require("react");
+var import_react_aria_components2 = require("react-aria-components");
+var import_react_aria2 = require("react-aria");
+
+// src/components/Spinner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Spinner({ size = 16, className, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      role: label ? "progressbar" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn(
+        "inline-block shrink-0 animate-krts-spin rounded-full border-2 border-current border-r-transparent opacity-80",
+        className
+      ),
+      style: { width: size, height: size }
+    }
+  );
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var variants = {
+  primary: "bg-primary border-primary-line text-primary-fg hover:bg-primary-hover pressed:bg-primary-pressed shadow-control",
+  secondary: "bg-surface border-line text-fg hover:bg-surface-hover pressed:bg-surface-pressed pressed:border-line-strong shadow-control",
+  danger: "bg-danger border-danger-line text-danger-fg hover:bg-danger-hover pressed:bg-danger-pressed shadow-control",
+  ghost: "bg-transparent border-transparent text-fg/80 hover:bg-surface/70 hover:text-fg pressed:bg-surface-pressed/60 pressed:text-fg"
+};
+var sizes = {
+  xs: "h-7 px-2.5 text-[13px] gap-1.5 rounded-[6px]",
+  sm: "h-9 px-3.5 text-sm gap-2",
+  md: "h-12 px-[18px] text-base gap-2.5"
+};
+var iconSizes = { xs: "size-7 px-0", sm: "size-9 px-0", md: "size-12 px-0" };
+function buttonStyles({
+  variant = "secondary",
+  size = "md",
+  isIconOnly = false,
+  className
+} = {}) {
+  return cn(
+    "group/button relative isolate inline-flex select-none items-center justify-center whitespace-nowrap rounded-control border font-sans font-normal leading-none",
+    "cursor-default [-webkit-tap-highlight-color:transparent] touch-manipulation",
+    // Press feedback comes from the pressed colours (Figma "Pressed" row) — no scaling.
+    "transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-out",
+    "disabled:cursor-not-allowed disabled:opacity-45 disabled:shadow-none",
+    focusRing,
+    variants[variant],
+    sizes[size],
+    isIconOnly && iconSizes[size],
+    className
+  );
+}
+var gestureKeys = [
+  "onSingleTap",
+  "onDoubleTap",
+  "onMultiTap",
+  "onHoldStart",
+  "onHold",
+  "onHoldTick",
+  "onHoldProgress",
+  "onHoldEnd",
+  "onHoldCancel",
+  "onSwipe"
+];
+var BASE_TRANSITION = "background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), opacity 150ms var(--ease-out)";
+var Button = (0, import_react5.forwardRef)(function Button2(props, ref) {
+  const {
+    variant = "secondary",
+    size = "md",
+    isIconOnly,
+    className,
+    children,
+    startContent,
+    endContent,
+    isPending,
+    maxTaps,
+    multiTapDelay,
+    holdDuration,
+    holdTickInterval,
+    animateWidth = !isIconOnly,
+    style,
+    ...rest
+  } = props;
+  const gestureOpts = { maxTaps, multiTapDelay, holdDuration, holdTickInterval };
+  const racProps = {};
+  let hasGestures = false;
+  for (const [k, v] of Object.entries(rest)) {
+    if (gestureKeys.includes(k)) {
+      gestureOpts[k] = v;
+      if (v) hasGestures = true;
+    } else racProps[k] = v;
+  }
+  gestureOpts.isDisabled = !!props.isDisabled || !!isPending;
+  const { pressHandlers, pointerProps } = useGestureHandlers(gestureOpts);
+  const showSpinner = useSmoothPending(!!isPending);
+  const { contentRef, widthStyle, widthTransition } = useAnimatedWidth({ enabled: animateWidth });
+  const merged = hasGestures ? (0, import_react_aria2.mergeProps)(racProps, pressHandlers, pointerProps) : racProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_aria_components2.Button,
+    {
+      ...merged,
+      ref,
+      isPending,
+      "data-spinner": showSpinner || void 0,
+      className: (0, import_react_aria_components2.composeRenderProps)(
+        className,
+        (cls) => buttonStyles({ variant, size, isIconOnly, className: cn(animateWidth && "shrink-0 overflow-hidden", cls) })
+      ),
+      style: (0, import_react_aria_components2.composeRenderProps)(style, (s) => ({
+        ...widthStyle,
+        ...widthTransition ? { transition: `${BASE_TRANSITION}, ${widthTransition}` } : null,
+        ...s
+      })),
+      children: (0, import_react_aria_components2.composeRenderProps)(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "span",
+          {
+            ref: contentRef,
+            className: cn(
+              "inline-flex shrink-0 items-center justify-center gap-[inherit] self-stretch transition-[opacity,filter] duration-200 ease-out",
+              showSpinner && "opacity-0 blur-[2px]"
+            ),
+            children: [
+              startContent,
+              child,
+              endContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 flex items-center justify-center transition-[opacity,filter] duration-200 ease-out",
+              showSpinner ? "opacity-100 blur-0" : "opacity-0 blur-[2px]"
+            ),
+            children: showSpinner && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: size === "md" ? 18 : 14 })
+          }
+        )
+      ] }))
+    }
+  );
+});
+
+// src/components/HoldButton.tsx
+var import_react6 = require("react");
+var import_react_aria_components3 = require("react-aria-components");
+var import_react_aria3 = require("react-aria");
+
+// src/components/icons.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Svg({ size = 16, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var ChevronDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 6 6 6-6 6" }) });
+var CheckIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Svg, { strokeWidth: 2.5, ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+var MinusIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Svg, { strokeWidth: 2.5, ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }) });
+var XIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var SearchIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m20 20-3.5-3.5" })
+] });
+var CopyIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+] });
+var PlusIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+
+// src/components/HoldButton.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var fills = {
+  danger: "bg-danger text-danger-fg",
+  primary: "bg-primary text-primary-fg",
+  secondary: "bg-surface-pressed text-fg"
+};
+var bases = {
+  danger: "bg-surface border-line text-danger hover:bg-danger-soft",
+  primary: "bg-surface border-line text-fg hover:bg-surface-hover",
+  secondary: "bg-surface border-line text-fg hover:bg-surface-hover"
+};
+var HoldButton = (0, import_react6.forwardRef)(function HoldButton2({
+  children,
+  onConfirm,
+  holdDuration = 2e3,
+  onHoldProgress,
+  onHoldCancel,
+  hint = "Hold to confirm",
+  confirmedContent,
+  resetAfter = 1600,
+  variant = "danger",
+  size = "md",
+  className,
+  isDisabled,
+  animateWidth = true,
+  ...rest
+}, ref) {
+  const [phase, setPhase] = (0, import_react6.useState)("idle");
+  const timer = (0, import_react6.useRef)(void 0);
+  const hintId = (0, import_react6.useId)();
+  (0, import_react6.useEffect)(() => () => clearTimeout(timer.current), []);
+  const settle = (next, ms) => {
+    setPhase(next);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setPhase("idle"), ms);
+  };
+  const { pressHandlers, pointerProps } = useGestureHandlers({
+    holdDuration,
+    isDisabled: isDisabled || phase === "confirmed",
+    onHoldStart: (e) => {
+      if (e.pointerType === "virtual") return;
+      clearTimeout(timer.current);
+      setPhase("holding");
+    },
+    onHold: (e) => {
+      settle("confirmed", resetAfter);
+      dispatchKrtsEvent(e.target, KRTS_EVENTS.confirm, e);
+      onConfirm(e);
+    },
+    onHoldCancel: (e) => {
+      onHoldCancel?.(e);
+      if (e.duration < 350 && hint) settle("hint", 1400);
+      else setPhase("idle");
+    },
+    onHoldProgress
+  });
+  const onPress = (e) => {
+    if (e.pointerType === "virtual" && phase !== "confirmed") {
+      settle("confirmed", resetAfter);
+      onConfirm({ type: "virtual" });
+    }
+  };
+  const { contentRef, widthStyle, widthTransition } = useAnimatedWidth({ enabled: animateWidth });
+  const holding = phase === "holding";
+  const confirmed = phase === "confirmed";
+  const label = phase === "hint" ? hint : confirmed && confirmedContent !== null ? confirmedContent ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, { size: 16 }),
+    " Done"
+  ] }) : children;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center gap-2 transition-[opacity,filter] duration-200 ease-out starting:opacity-0 starting:blur-[2px]", children: label }, phase === "hint" ? "hint" : confirmed ? "done" : "label");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react_aria_components3.Button,
+    {
+      ...(0, import_react_aria3.mergeProps)(rest, pressHandlers, pointerProps, { onPress }),
+      ref,
+      isDisabled,
+      "aria-describedby": hintId,
+      "data-holding": holding || void 0,
+      "data-confirmed": confirmed || void 0,
+      className: cn(
+        "group/hold relative isolate inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap rounded-control border font-sans leading-none shadow-control",
+        "cursor-default touch-manipulation [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]",
+        "transition-[background-color,border-color,color] duration-150 ease-out",
+        "disabled:cursor-not-allowed disabled:opacity-45",
+        focusRing,
+        size === "md" ? "h-12 px-[18px] text-base" : "h-9 px-3.5 text-sm",
+        animateWidth && "shrink-0",
+        bases[variant],
+        className
+      ),
+      style: {
+        ...widthStyle,
+        ...widthTransition ? { transition: `background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), ${widthTransition}` } : null
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { ref: contentRef, className: "relative inline-flex shrink-0 items-center gap-2", children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 flex items-center justify-center",
+              fills[variant],
+              // Release: snap back fast. Press: slow, linear, deliberate.
+              "[clip-path:inset(0_100%_0_0)] [transition:clip-path_200ms_var(--ease-out)]",
+              "group-data-[holding]/hold:[clip-path:inset(0_0_0_0)] group-data-[holding]/hold:[transition:clip-path_var(--hold-ms)_linear]",
+              "group-data-[confirmed]/hold:[clip-path:inset(0_0_0_0)]"
+            ),
+            style: { "--hold-ms": `${holdDuration}ms` },
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center gap-2", children: content })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { id: hintId, className: "sr-only", children: [
+          "Press and hold for ",
+          Math.round(holdDuration / 100) / 10,
+          " seconds to confirm."
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/CopyButton.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CopyButton({ value, label = "Copy", copiedLabel = "Copied", onCopy, isIconOnly = true, size = "sm", variant = "secondary", ...props }) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const t = (0, import_react7.useRef)(void 0);
+  (0, import_react7.useEffect)(() => () => clearTimeout(t.current), []);
+  const icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "relative grid size-4 place-items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      CopyIcon,
+      {
+        size: 16,
+        className: cn("absolute transition-[opacity,filter] duration-200 ease-out", copied ? "opacity-0 blur-[2px]" : "opacity-100")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      CheckIcon,
+      {
+        size: 16,
+        className: cn("absolute transition-[opacity,filter] duration-200 ease-out", copied ? "opacity-100" : "opacity-0 blur-[2px]")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Button,
+    {
+      ...props,
+      size,
+      variant,
+      isIconOnly,
+      "aria-label": isIconOnly ? copied ? copiedLabel : label : void 0,
+      onPress: () => {
+        const text = typeof value === "function" ? value() : value;
+        void navigator.clipboard?.writeText(text).catch(() => setCopied(false));
+        setCopied(true);
+        onCopy?.(text);
+        clearTimeout(t.current);
+        t.current = setTimeout(() => setCopied(false), 1600);
+      },
+      children: [
+        icon,
+        !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: copied ? copiedLabel : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { role: "status", className: "sr-only", children: copied ? copiedLabel : "" })
+      ]
+    }
+  );
+}
+
+// src/components/GestureArea.tsx
+var import_react8 = require("react");
+var import_react_aria4 = require("react-aria");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var GestureArea = (0, import_react8.forwardRef)(function GestureArea2(props, ref) {
+  const {
+    onSingleTap,
+    onDoubleTap,
+    onMultiTap,
+    maxTaps,
+    multiTapDelay,
+    onHoldStart,
+    onHold,
+    onHoldTick,
+    onHoldProgress,
+    onHoldEnd,
+    onHoldCancel,
+    holdDuration,
+    holdTickInterval,
+    onSwipe,
+    swipeThreshold,
+    swipeVelocity,
+    moveTolerance,
+    dispatchDomEvents,
+    isDisabled,
+    className,
+    ...rest
+  } = props;
+  const { gestureProps, isPressed, isHolding, didHold } = useGesture({
+    onSingleTap,
+    onDoubleTap,
+    onMultiTap,
+    maxTaps,
+    multiTapDelay,
+    onHoldStart,
+    onHold,
+    onHoldTick,
+    onHoldProgress,
+    onHoldEnd,
+    onHoldCancel,
+    holdDuration,
+    holdTickInterval,
+    onSwipe,
+    swipeThreshold,
+    swipeVelocity,
+    moveTolerance,
+    dispatchDomEvents,
+    isDisabled
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      ref,
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": isDisabled || void 0,
+      ...(0, import_react_aria4.mergeProps)(rest, gestureProps),
+      "data-pressed": isPressed || void 0,
+      "data-holding": isPressed && isHolding && !didHold || void 0,
+      "data-held": didHold || void 0,
+      className: cn("touch-manipulation select-none [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent]", focusRing, className)
+    }
+  );
+});
+
+// src/components/ToggleButton.tsx
+var import_react_aria_components4 = require("react-aria-components");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ToggleButton({ size = "sm", isIconOnly, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_aria_components4.ToggleButton,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        (rp) => buttonStyles({
+          variant: rp.isSelected ? "primary" : "secondary",
+          size,
+          isIconOnly
+        })
+      )
+    }
+  );
+}
+function SegmentedControl({ size = "sm", className, selectionMode = "single", disallowEmptySelection = true, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_aria_components4.ToggleButtonGroup,
+    {
+      ...props,
+      selectionMode,
+      disallowEmptySelection,
+      "data-size": size,
+      className: composeTw(
+        className,
+        "group/seg inline-flex w-fit gap-0.5 rounded-[10px] border border-line bg-surface p-[3px] shadow-control"
+      )
+    }
+  );
+}
+function Segment({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react_aria_components4.ToggleButton,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        cn(
+          "relative inline-flex cursor-default items-center justify-center gap-2 rounded-[7px] px-3.5 whitespace-nowrap outline-none select-none",
+          "text-fg-muted transition-colors duration-200 ease-out hover:text-fg selected:text-fg disabled:opacity-40",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+          "h-8 text-[14px] group-data-[size=md]/seg:h-10 group-data-[size=md]/seg:text-[15px]"
+        )
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components4.SelectionIndicator, { className: "absolute inset-0 rounded-[7px] bg-bg shadow-control transition-[translate,width] duration-250 ease-out motion-reduce:transition-none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "relative z-10 inline-flex items-center gap-2", children })
+      ]
+    }
+  );
+}
+
+// src/components/Menu.tsx
+var import_react_aria_components6 = require("react-aria-components");
+
+// src/components/Popover.tsx
+var import_react_aria_components5 = require("react-aria-components");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var floatingSurface = cn(
+  "rounded-menu border border-line-subtle bg-overlay text-fg shadow-float outline-none"
+);
+var floatingMotion = {
+  fade: cn("transition-opacity duration-120 ease-out", "entering:opacity-0 exiting:opacity-0 exiting:duration-100"),
+  scale: cn(
+    "origin-(--trigger-anchor-point) will-change-transform",
+    "transition-[opacity,transform] duration-200 ease-out",
+    "entering:opacity-0 entering:scale-[0.96]",
+    "exiting:opacity-0 exiting:scale-[0.98] exiting:duration-120",
+    "motion-reduce:entering:scale-100 motion-reduce:exiting:scale-100"
+  ),
+  none: ""
+};
+function Popover({ className, offset = 6, animation, ...props }) {
+  const { menuAnimation } = useKrtsConfig();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_aria_components5.Popover,
+    {
+      offset,
+      ...props,
+      "data-animation": animation ?? menuAnimation,
+      className: composeTw(className, cn(floatingSurface, floatingMotion[animation ?? menuAnimation], "min-w-(--trigger-width)"))
+    }
+  );
+}
+
+// src/components/Menu.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function MenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.MenuTrigger, { ...props });
+}
+function SubmenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.SubmenuTrigger, { ...props });
+}
+function Menu({ placement = "bottom start", withPopover = true, popoverClassName, animation, className, ...props }) {
+  const menu = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_aria_components6.Menu,
+    {
+      ...props,
+      className: composeTw(className, "max-h-[inherit] min-w-[13rem] overflow-auto p-1.5 outline-none")
+    }
+  );
+  if (!withPopover) return menu;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Popover, { placement, animation, className: popoverClassName, children: menu });
+}
+function MenuItem({ children, description, icon, shortcut, variant = "default", className, ...props }) {
+  const textValue = props.textValue ?? (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_aria_components6.MenuItem,
+    {
+      textValue,
+      ...props,
+      className: composeTw(
+        className,
+        cn(
+          // Hovered/focused items change instantly: menus are used too often to animate.
+          "group relative flex min-h-9 cursor-default items-center gap-2.5 rounded-control px-2.5 py-1.5 text-[15px] outline-none select-none",
+          "disabled:opacity-40",
+          variant === "danger" ? "text-danger focus:bg-danger-soft" : "text-fg focus:bg-surface-hover pressed:bg-surface-pressed"
+        )
+      ),
+      children: ({ hasSubmenu, isSelected, selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        selectionMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "grid size-4 shrink-0 place-items-center", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIcon, { size: 14 }) }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "grid size-4 shrink-0 place-items-center text-fg-muted group-focus:text-current", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Text, { slot: "label", className: "truncate", children }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Text, { slot: "description", className: "truncate text-[13px] text-fg-muted", children: description })
+        ] }),
+        shortcut && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Keyboard, { className: "font-sans text-[12px] tracking-wide text-fg-subtle", children: shortcut }),
+        hasSubmenu && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRightIcon, { size: 14, className: "text-fg-subtle" })
+      ] })
+    }
+  );
+}
+function MenuSection({ title, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_aria_components6.MenuSection, { ...props, className: cn("flex flex-col", className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Header, { className: "px-2.5 pt-2 pb-1 text-[12px] font-medium text-fg-subtle", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Collection, { items: props.items, children })
+  ] });
+}
+function MenuSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Separator, { className: "mx-1 my-1.5 h-px bg-line-subtle" });
+}
+
+// src/components/DropdownButton.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function DropdownButton({
+  label,
+  children,
+  variant = "primary",
+  size = "md",
+  isDisabled,
+  placement = "bottom start",
+  className,
+  ...menuProps
+}) {
+  const divider = variant === "primary" ? "bg-primary-line" : variant === "danger" ? "bg-danger-line" : "bg-line";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Button, { variant, size, isDisabled, className: cn("group gap-0 pr-0", size === "md" ? "pl-6" : "pl-3.5", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": true, className: cn("w-px self-stretch", size === "md" ? "ml-3" : "ml-2.5", divider) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("grid place-items-center", size === "md" ? "w-11" : size === "sm" ? "w-9" : "w-7"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ChevronDownIcon,
+        {
+          size: size === "md" ? 20 : 16,
+          className: "transition-transform duration-200 ease-out group-aria-expanded:rotate-180"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Menu, { placement, ...menuProps, children })
+  ] });
+}
+function SplitButton({
+  label,
+  children,
+  variant = "primary",
+  size = "md",
+  isDisabled,
+  placement = "bottom end",
+  onAction,
+  onMenuAction,
+  menuLabel = "More options",
+  className,
+  ...menuProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("inline-flex", className), role: "group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant, size, isDisabled, onPress: onAction, className: "rounded-r-none border-r-0", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(MenuTrigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Button,
+        {
+          variant,
+          size,
+          isDisabled,
+          isIconOnly: true,
+          "aria-label": menuLabel,
+          className: cn(
+            "group rounded-l-none",
+            variant === "primary" ? "border-l-primary-line" : variant === "danger" ? "border-l-danger-line" : "border-l-line"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDownIcon, { size: size === "md" ? 20 : 16, className: "transition-transform duration-200 ease-out group-aria-expanded:rotate-180" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Menu, { placement, onAction: onMenuAction, ...menuProps, children })
+    ] })
+  ] });
+}
+
+// src/components/Tooltip.tsx
+var import_react_aria_components7 = require("react-aria-components");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Tooltip({ children, shortcut, showArrow = false, offset = 8, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react_aria_components7.Tooltip,
+    {
+      offset,
+      ...props,
+      className: composeTw(
+        className,
+        cn(
+          "group z-50 flex max-w-64 items-center gap-2 rounded-lg bg-primary px-2.5 py-1.5 text-[13px] leading-snug text-primary-fg shadow-float",
+          "origin-(--trigger-anchor-point) will-change-transform",
+          "transition-[opacity,transform] duration-125 ease-out",
+          "entering:scale-[0.97] entering:opacity-0 exiting:scale-[0.97] exiting:opacity-0",
+          "motion-reduce:entering:scale-100 motion-reduce:exiting:scale-100"
+        )
+      ),
+      children: [
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.OverlayArrow, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", className: "fill-primary group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children }),
+        shortcut && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { className: "rounded border border-primary-fg/20 px-1 font-sans text-[11px] text-primary-fg/70", children: shortcut })
+      ]
+    }
+  );
+}
+function TooltipTrigger({ delay = 600, closeDelay = 300, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.TooltipTrigger, { delay, closeDelay, ...props });
+}
+function WithTooltip({
+  content,
+  children,
+  placement,
+  shortcut,
+  delay
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TooltipTrigger, { delay, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { placement, shortcut, children: content })
+  ] });
+}
+
+// src/components/Field.tsx
+var import_react9 = require("react");
+var import_react_aria_components8 = require("react-aria-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Label(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Label, { ...props, className: cn("text-sm font-medium text-fg select-none", props.className) });
+}
+function Description(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Text, { ...props, slot: "description", className: cn("text-[13px] text-fg-muted", props.className) });
+}
+function FieldError(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_aria_components8.FieldError,
+    {
+      ...props,
+      className: composeTw(
+        props.className,
+        // Errors appear mid-form; ease them in so the layout change isn't jarring.
+        "text-[13px] text-danger transition-[opacity,translate] duration-200 ease-out starting:-translate-y-1 starting:opacity-0 motion-reduce:starting:translate-y-0"
+      )
+    }
+  );
+}
+var inputFrame = cn(
+  "flex w-full items-center rounded-control border bg-surface text-fg shadow-control",
+  "border-line transition-[border-color,box-shadow,background-color] duration-150 ease-out",
+  "hover:border-line-strong",
+  "focus-within:border-line-strong focus-within:ring-2 focus-within:ring-focus/15",
+  "has-[[data-invalid]]:border-danger has-[[aria-invalid=true]]:border-danger",
+  "has-[[data-disabled]]:opacity-50 has-[[data-disabled]]:cursor-not-allowed"
+);
+var inputSizes = { sm: "h-9 text-sm", md: "h-12 text-base" };
+var Input = (0, import_react9.forwardRef)(function Input2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_aria_components8.Input,
+    {
+      ref,
+      ...props,
+      className: composeTw(
+        props.className,
+        "min-w-0 flex-1 bg-transparent px-3.5 font-sans text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden"
+      )
+    }
+  );
+});
+function TextField({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  size = "md",
+  startContent,
+  endContent,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.TextField, { ...props, className: composeTw(className, "group flex flex-col gap-1.5"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn(inputFrame, inputSizes[size]), children: [
+      startContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pl-3.5 text-fg-subtle [&+input]:pl-2", children: startContent }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { placeholder }),
+      endContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pr-3.5 text-fg-subtle", children: endContent })
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Description, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldError, { children: errorMessage })
+  ] });
+}
+function TextAreaField({ label, description, errorMessage, placeholder, rows = 4, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.TextField, { ...props, className: composeTw(className, "group flex flex-col gap-1.5"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(inputFrame, "items-stretch"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react_aria_components8.TextArea,
+      {
+        rows,
+        placeholder,
+        className: "min-h-0 w-full resize-y bg-transparent px-3.5 py-3 font-sans text-base text-fg outline-none placeholder:text-fg-subtle"
+      }
+    ) }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Description, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldError, { children: errorMessage })
+  ] });
+}
+function SearchField({ label, description, errorMessage, placeholder = "Search\u2026", size = "md", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.SearchField, { ...props, className: composeTw(className, "group flex flex-col gap-1.5"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn(inputFrame, inputSizes[size]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SearchIcon, { className: "ml-3.5 shrink-0 text-fg-subtle" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { placeholder, className: "pl-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_aria_components8.Button,
+        {
+          className: cn(
+            "mr-2 grid size-7 place-items-center rounded-md text-fg-subtle outline-none",
+            "transition-[opacity,background-color] duration-150 ease-out hover:bg-surface-hover pressed:bg-surface-pressed",
+            "focus-visible:ring-2 focus-visible:ring-focus/40 group-data-[empty]:pointer-events-none group-data-[empty]:opacity-0"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(XIcon, { size: 14 })
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Description, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldError, { children: errorMessage })
+  ] });
+}
+var stepper = cn(
+  "grid h-full w-10 shrink-0 place-items-center text-fg-muted outline-none",
+  "transition-[background-color,color] duration-150 ease-out hover:bg-surface-hover hover:text-fg pressed:bg-surface-pressed",
+  "disabled:opacity-40 focus-visible:bg-surface-hover"
+);
+function NumberField({ label, description, errorMessage, placeholder, size = "md", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.NumberField, { ...props, className: composeTw(className, "group flex flex-col gap-1.5"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.Group, { className: cn(inputFrame, inputSizes[size], "overflow-hidden"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Button, { slot: "decrement", className: cn(stepper, "border-r border-line"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MinusIcon, { size: 14 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { placeholder, className: "text-center tabular-nums" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Button, { slot: "increment", className: cn(stepper, "border-l border-line"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlusIcon, { size: 14 }) })
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Description, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldError, { children: errorMessage })
+  ] });
+}
+
+// src/components/Checkbox.tsx
+var import_react_aria_components9 = require("react-aria-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Checkbox({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_aria_components9.Checkbox,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        "group flex items-center gap-2.5 text-base text-fg select-none disabled:opacity-50 [-webkit-tap-highlight-color:transparent]"
+      ),
+      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "span",
+          {
+            className: cn(
+              "grid size-6 shrink-0 place-items-center rounded-[7px] border shadow-control",
+              "transition-[background-color,border-color] duration-150 ease-out",
+              "group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-focus",
+              isSelected || isIndeterminate ? "border-primary-line bg-primary text-primary-fg group-hover:bg-primary-hover" : "border-line bg-surface group-hover:border-line-strong",
+              "group-invalid:border-danger"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M4 8h8" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "path",
+              {
+                d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                pathLength: 1,
+                className: "transition-[stroke-dashoffset] duration-200 ease-out [stroke-dasharray:1]",
+                style: { strokeDashoffset: isSelected ? 0 : 1 }
+              }
+            ) })
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
+function CheckboxGroup({ label, description, errorMessage, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_aria_components9.CheckboxGroup, { ...props, className: composeTw(className, "flex flex-col gap-2.5"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label, { children: label }),
+    children,
+    description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Description, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldError, { children: errorMessage })
+  ] });
+}
+
+// src/components/Radio.tsx
+var import_react_aria_components10 = require("react-aria-components");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function RadioGroup({ label, description, errorMessage, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_react_aria_components10.RadioGroup,
+    {
+      ...props,
+      className: composeTw(className, "group flex flex-col gap-2.5"),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex gap-x-5 gap-y-2.5 group-orientation-vertical:flex-col group-orientation-horizontal:flex-wrap", children }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Description, { children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FieldError, { children: errorMessage })
+      ]
+    }
+  );
+}
+function Radio({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_aria_components10.Radio,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        "group flex items-center gap-2.5 text-base text-fg select-none disabled:opacity-50 [-webkit-tap-highlight-color:transparent]"
+      ),
+      children: (rp) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "span",
+          {
+            className: cn(
+              "relative grid size-6 shrink-0 place-items-center rounded-full border shadow-control",
+              "transition-[background-color,border-color] duration-150 ease-out",
+              "group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-focus",
+              rp.isSelected ? "border-primary-line bg-primary group-hover:bg-primary-hover" : "border-line bg-surface group-hover:border-line-strong"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "span",
+              {
+                className: cn(
+                  "size-3 rounded-full bg-primary-fg shadow-hairline transition-[transform,opacity] duration-200 ease-out",
+                  rp.isSelected ? "scale-100 opacity-100" : "scale-50 opacity-0"
+                )
+              }
+            )
+          }
+        ),
+        typeof children === "function" ? children(rp) : children
+      ] })
+    }
+  );
+}
+
+// src/components/Switch.tsx
+var import_react_aria_components11 = require("react-aria-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Switch({ children, size = "md", className, ...props }) {
+  const md = size === "md";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_react_aria_components11.Switch,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        "group flex items-center gap-2.5 text-base text-fg select-none disabled:opacity-50 [-webkit-tap-highlight-color:transparent]"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            className: cn(
+              "relative shrink-0 rounded-full border shadow-control",
+              "transition-[background-color,border-color] duration-200 ease-out",
+              "border-line bg-surface group-hover:border-line-strong",
+              "group-selected:border-primary-line group-selected:bg-primary",
+              "group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-focus",
+              md ? "h-8 w-16" : "h-6 w-11"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "span",
+              {
+                className: cn(
+                  "absolute top-[1px] rounded-full bg-white group-selected:bg-primary-fg shadow-[0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.12)]",
+                  "transition-[left,width,background-color] duration-250 ease-out motion-reduce:transition-none",
+                  md ? "left-[1px] size-7 group-pressed:w-9 group-selected:left-[calc(100%-29px)] group-selected:group-pressed:left-[calc(100%-37px)]" : "left-[1px] size-5 group-pressed:w-6 group-selected:left-[calc(100%-21px)] group-selected:group-pressed:left-[calc(100%-25px)]"
+                )
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Slider.tsx
+var import_react10 = require("react");
+var import_react_aria_components12 = require("react-aria-components");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Slider({
+  label,
+  showValue = !!label,
+  showFill = true,
+  thumbLabels,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_aria_components12.Slider,
+    {
+      ...props,
+      className: composeTw(className, "group flex w-full flex-col gap-2 select-none disabled:opacity-50"),
+      children: [
+        (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { children: label }),
+          showValue && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.SliderOutput, { className: "text-sm tabular-nums text-fg-muted", children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.SliderTrack, { className: "group/track relative h-7 w-full touch-none", children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TrackContents, { state, showFill, thumbLabels }) })
+      ]
+    }
+  );
+}
+function TrackContents({ state, showFill, thumbLabels }) {
+  const pcts = state.values.map((_, i) => state.getThumbPercent(i) * 100);
+  const dragging = state.values.map((_, i) => state.isThumbDragging(i));
+  const wasDragging = (0, import_react10.useRef)(dragging);
+  (0, import_react10.useLayoutEffect)(() => {
+    wasDragging.current = dragging;
+  });
+  const glide = dragging.map((d, i) => !d || !wasDragging.current[i]);
+  const anyTracking = dragging.some((d, i) => d && !glide[i]);
+  const start = pcts.length > 1 ? pcts[0] : 0;
+  const end = pcts.length > 1 ? pcts[pcts.length - 1] : pcts[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-surface shadow-hairline" }),
+    showFill && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: cn(
+          "absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary",
+          !anyTracking && "transition-[left,width] duration-200 ease-out motion-reduce:transition-none"
+        ),
+        style: { left: `${start}%`, width: `${end - start}%` }
+      }
+    ),
+    state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_aria_components12.SliderThumb,
+      {
+        index: i,
+        "aria-label": thumbLabels?.[i],
+        className: cn(
+          "top-1/2 size-7 rounded-full border border-surface bg-white",
+          "shadow-[0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.15),0_0_0_0_rgb(0_0_0/0)]",
+          // Halo instead of scaling: grows on hover, stronger while dragging.
+          "hover:shadow-[0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.15),0_0_0_5px_rgb(0_0_0/0.06)]",
+          "dragging:shadow-[0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.15),0_0_0_7px_rgb(0_0_0/0.08)]",
+          "dark:hover:shadow-[0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.15),0_0_0_5px_rgb(255_255_255/0.1)]",
+          "dark:dragging:shadow-[0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.15),0_0_0_7px_rgb(255_255_255/0.14)]",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+          glide[i] ? "transition-[left,box-shadow] duration-200 ease-out motion-reduce:transition-[box-shadow]" : "transition-[box-shadow] duration-200 ease-out"
+        )
+      },
+      i
+    ))
+  ] });
+}
+
+// src/components/Select.tsx
+var import_react_aria_components13 = require("react-aria-components");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Select({
+  label,
+  description,
+  errorMessage,
+  children,
+  items,
+  size = "md",
+  animation,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.Select, { ...props, className: composeTw(className, "group flex flex-col gap-1.5"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_react_aria_components13.Button,
+      {
+        className: cn(
+          "flex w-full items-center justify-between gap-2 rounded-control border border-line bg-surface px-3.5 text-left text-fg shadow-control",
+          "transition-[border-color,background-color] duration-150 ease-out hover:border-line-strong pressed:bg-surface-hover",
+          "group-invalid:border-danger disabled:opacity-50",
+          focusRing,
+          inputSizes[size]
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.SelectValue, { className: "truncate data-[placeholder]:text-fg-subtle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronDownIcon, { size: 18, className: "shrink-0 text-fg-muted transition-transform duration-200 ease-out group-open:rotate-180" })
+        ]
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Description, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldError, { children: errorMessage }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover, { placement: "bottom start", animation, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.ListBox, { items, className: "max-h-72 overflow-auto p-1.5 outline-none", children }) })
+  ] });
+}
+function SelectItem(props) {
+  const textValue = props.textValue ?? (typeof props.children === "string" ? props.children : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_aria_components13.ListBoxItem,
+    {
+      ...props,
+      textValue,
+      className: composeTw(
+        props.className,
+        "group flex h-9 cursor-default items-center gap-2 rounded-control px-2.5 text-[15px] text-fg outline-none select-none focus:bg-surface-hover pressed:bg-surface-pressed disabled:opacity-40"
+      ),
+      children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "flex-1 truncate", children: props.children }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckIcon, { size: 14 })
+      ] })
+    }
+  );
+}
+
+// src/components/Dialog.tsx
+var import_react_aria_components14 = require("react-aria-components");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DialogTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.DialogTrigger, { ...props });
+}
+var overlayMotion = cn(
+  "fixed inset-0 z-50 bg-black/35 backdrop-blur-[2px]",
+  "transition-opacity duration-200 ease-out entering:opacity-0 exiting:opacity-0 exiting:duration-150"
+);
+function Modal({ size = "md", className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.ModalOverlay, { ...props, className: overlayMotion, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex min-h-full items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_aria_components14.Modal,
+    {
+      className: composeTw(
+        className,
+        cn(
+          "w-full rounded-[16px] border border-line-subtle bg-bg text-fg shadow-float outline-none",
+          "transition-[opacity,transform] duration-250 ease-out",
+          "entering:translate-y-2 entering:scale-[0.97] entering:opacity-0",
+          "exiting:scale-[0.98] exiting:opacity-0 exiting:duration-150",
+          "motion-reduce:entering:translate-y-0 motion-reduce:entering:scale-100 motion-reduce:exiting:scale-100",
+          size === "sm" ? "max-w-sm" : size === "lg" ? "max-w-2xl" : "max-w-md"
+        )
+      ),
+      children
+    }
+  ) }) });
+}
+function Dialog({ title, description, children, footer, showClose = true, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Dialog, { ...props, className: cn("relative flex flex-col gap-4 p-6 outline-none", className), children: (rp) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-1.5 pr-8", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Heading, { slot: "title", className: "text-lg font-semibold leading-tight text-fg", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[15px] leading-relaxed text-fg-muted", children: description })
+    ] }),
+    typeof children === "function" ? children(rp) : children,
+    footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-2 flex flex-wrap justify-end gap-2", children: footer(rp.close) }),
+    showClose && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "xs",
+        isIconOnly: true,
+        "aria-label": "Close",
+        onPress: rp.close,
+        className: "absolute top-4 right-4",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(XIcon, { size: 16 })
+      }
+    )
+  ] }) });
+}
+function AlertDialog({
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  variant = "primary",
+  onConfirm,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Dialog,
+    {
+      role: "alertdialog",
+      showClose: false,
+      ...props,
+      footer: (close) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: "sm", variant: "secondary", onPress: close, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Button,
+          {
+            size: "sm",
+            variant,
+            autoFocus: true,
+            onPress: async () => {
+              await onConfirm?.();
+              close();
+            },
+            children: confirmLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+function Drawer({ side = "right", className, children, ...props }) {
+  const pos = side === "bottom" ? "inset-x-0 bottom-0 max-h-[85vh] rounded-t-[20px] entering:translate-y-full exiting:translate-y-full" : side === "left" ? "inset-y-0 left-0 w-[min(24rem,90vw)] entering:-translate-x-full exiting:-translate-x-full" : "inset-y-0 right-0 w-[min(24rem,90vw)] entering:translate-x-full exiting:translate-x-full";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.ModalOverlay, { ...props, className: overlayMotion, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react_aria_components14.Modal,
+    {
+      className: composeTw(
+        className,
+        cn(
+          "fixed flex flex-col overflow-auto border-line-subtle bg-bg text-fg shadow-float outline-none",
+          "transition-transform duration-400 ease-drawer exiting:duration-250",
+          "motion-reduce:transition-opacity motion-reduce:entering:translate-0 motion-reduce:exiting:translate-0 motion-reduce:entering:opacity-0",
+          side === "bottom" ? "border-t" : side === "left" ? "border-r" : "border-l",
+          pos
+        )
+      ),
+      children: [
+        side === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "aria-hidden": true, className: "mx-auto mt-2.5 h-1 w-10 shrink-0 rounded-full bg-line" }),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/components/Tabs.tsx
+var import_react_aria_components15 = require("react-aria-components");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Tabs, { ...props, className: composeTw(className, "flex gap-4 orientation-horizontal:flex-col") });
+}
+function TabList({ variant = "pill", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react_aria_components15.TabList,
+    {
+      ...props,
+      "data-variant": variant,
+      className: composeTw(
+        className,
+        cn(
+          "group/tablist relative flex",
+          variant === "pill" ? "w-fit gap-0.5 rounded-[10px] border border-line bg-surface p-[3px] shadow-control" : "gap-5 border-b border-line-subtle"
+        )
+      )
+    }
+  );
+}
+function Tab({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    import_react_aria_components15.Tab,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        cn(
+          "group relative flex cursor-default items-center justify-center gap-2 text-[15px] whitespace-nowrap outline-none select-none",
+          "text-fg-muted transition-colors duration-200 ease-out hover:text-fg selected:text-fg disabled:opacity-40",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+          "group-data-[variant=pill]/tablist:h-9 group-data-[variant=pill]/tablist:rounded-[7px] group-data-[variant=pill]/tablist:px-3.5",
+          "group-data-[variant=underline]/tablist:h-10 group-data-[variant=underline]/tablist:px-0.5"
+        )
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react_aria_components15.SelectionIndicator,
+          {
+            className: cn(
+              "absolute -z-0 transition-[translate,width,height] duration-250 ease-out motion-reduce:transition-none",
+              "group-data-[variant=pill]/tablist:inset-0 group-data-[variant=pill]/tablist:rounded-[7px] group-data-[variant=pill]/tablist:bg-bg group-data-[variant=pill]/tablist:shadow-control",
+              "group-data-[variant=underline]/tablist:inset-x-0 group-data-[variant=underline]/tablist:-bottom-px group-data-[variant=underline]/tablist:h-0.5 group-data-[variant=underline]/tablist:bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "relative z-10 inline-flex items-center gap-2", children })
+      ]
+    }
+  );
+}
+function TabPanel({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react_aria_components15.TabPanel,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        "rounded-control outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+      )
+    }
+  );
+}
+
+// src/components/Progress.tsx
+var import_react_aria_components16 = require("react-aria-components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ProgressBar({ label, showValue = !!label, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components16.ProgressBar, { ...props, className: composeTw(className, "flex w-full flex-col gap-2"), children: ({ percentage, valueText, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-between gap-4", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { children: label }),
+      showValue && !isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm tabular-nums text-fg-muted", children: valueText })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative h-2 w-full overflow-hidden rounded-full bg-surface shadow-hairline", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-y-0 left-0 w-full origin-left animate-krts-indeterminate rounded-full bg-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        className: "absolute inset-y-0 left-0 w-full origin-left rounded-full bg-primary transition-transform duration-300 ease-linear",
+        style: { transform: `scaleX(${(percentage ?? 0) / 100})` }
+      }
+    ) })
+  ] }) });
+}
+function Meter({ label, thresholds = { warning: 0.7, danger: 0.9 }, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components16.Meter, { ...props, className: composeTw(className, "flex w-full flex-col gap-2"), children: ({ percentage, valueText }) => {
+    const f = percentage / 100;
+    const tone = f >= thresholds.danger ? "bg-danger" : f >= thresholds.warning ? "bg-warning" : "bg-success";
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-between gap-4", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm tabular-nums text-fg-muted", children: valueText })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative h-2 w-full overflow-hidden rounded-full bg-surface shadow-hairline", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          className: cn("absolute inset-y-0 left-0 w-full origin-left rounded-full transition-[transform,background-color] duration-300 ease-out", tone),
+          style: { transform: `scaleX(${f})` }
+        }
+      ) })
+    ] });
+  } });
+}
+
+// src/components/Disclosure.tsx
+var import_react_aria_components17 = require("react-aria-components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Disclosure({ title, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components17.Disclosure, { ...props, className: composeTw(className, "group border-b border-line-subtle"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.Heading, { className: "m-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      import_react_aria_components17.Button,
+      {
+        slot: "trigger",
+        className: cn(
+          "flex w-full items-center justify-between gap-4 py-3.5 text-left text-[15px] font-medium text-fg outline-none",
+          "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+        ),
+        children: [
+          title,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronDownIcon, { size: 18, className: "shrink-0 text-fg-muted transition-transform duration-250 ease-out group-expanded:rotate-180" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react_aria_components17.DisclosurePanel,
+      {
+        className: cn(
+          "h-(--disclosure-panel-height) overflow-clip motion-safe:transition-[height] duration-250 ease-out"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pb-4 text-[15px] leading-relaxed text-fg-muted opacity-0 transition-opacity duration-200 ease-out group-expanded:opacity-100", children })
+      }
+    )
+  ] });
+}
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.DisclosureGroup, { ...props, className: composeTw(className, "flex flex-col border-t border-line-subtle") });
+}
+
+// src/components/Toast.tsx
+var import_react11 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var toasts = [];
+var counter = 0;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((l) => l());
+var subscribe = (l) => {
+  listeners.add(l);
+  return () => listeners.delete(l);
+};
+function upsert(title, type, opts = {}) {
+  const id = opts.id ?? ++counter;
+  const existing = toasts.find((t) => t.id === id);
+  if (existing) {
+    toasts = toasts.map((t) => t.id === id ? { ...t, ...opts, title, type, createdAt: Date.now(), removing: false } : t);
+  } else {
+    toasts = [...toasts, { ...opts, id, title, type, createdAt: Date.now() }];
+  }
+  emit();
+  return id;
+}
+function dismiss(id) {
+  toasts = toasts.map((t) => id === void 0 || t.id === id ? { ...t, removing: true } : t);
+  emit();
+}
+function remove(id) {
+  const t = toasts.find((x) => x.id === id);
+  toasts = toasts.filter((x) => x.id !== id);
+  t?.onDismiss?.();
+  emit();
+}
+var toast = Object.assign((title, opts) => upsert(title, "default", opts), {
+  success: (title, opts) => upsert(title, "success", opts),
+  error: (title, opts) => upsert(title, "error", opts),
+  loading: (title, opts) => upsert(title, "loading", opts),
+  dismiss,
+  promise(promise, msgs, opts) {
+    const id = upsert(msgs.loading, "loading", opts);
+    promise.then(
+      (v) => upsert(typeof msgs.success === "function" ? msgs.success(v) : msgs.success, "success", { ...opts, id }),
+      (e) => upsert(typeof msgs.error === "function" ? msgs.error(e) : msgs.error, "error", { ...opts, id })
+    );
+    return promise;
+  }
+});
+var GAP = 10;
+function Toaster({ position = "bottom-right", visibleToasts = 3, expand = false }) {
+  const list = (0, import_react11.useSyncExternalStore)(subscribe, () => toasts, () => toasts);
+  const [hovered, setHovered] = (0, import_react11.useState)(false);
+  const [heights, setHeights] = (0, import_react11.useState)({});
+  const isTop = position.startsWith("top");
+  const expanded = expand || hovered;
+  const [docHidden, setDocHidden] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    const on = () => setDocHidden(document.hidden);
+    document.addEventListener("visibilitychange", on);
+    return () => document.removeEventListener("visibilitychange", on);
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (list.length === 0) setHovered(false);
+  }, [list.length]);
+  const ordered = [...list].reverse();
+  const visible = ordered.filter((t) => !t.removing);
+  const frontHeight = heights[String(visible[0]?.id)] ?? 56;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "section",
+    {
+      "aria-label": "Notifications",
+      tabIndex: -1,
+      className: cn(
+        "pointer-events-none fixed z-[100] w-[min(360px,calc(100vw-32px))]",
+        isTop ? "top-4" : "bottom-4",
+        position.endsWith("right") ? "right-4" : position.endsWith("left") ? "left-4" : "left-1/2 -translate-x-1/2"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "ol",
+        {
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          className: "pointer-events-auto relative",
+          style: {
+            height: expanded ? visible.reduce((sum, t) => sum + (heights[String(t.id)] ?? 56) + GAP, 0) : list.length ? frontHeight : 0
+          },
+          children: ordered.map((t) => {
+            const index = visible.indexOf(t);
+            const offset = expanded ? visible.slice(0, Math.max(0, index)).reduce((sum, x) => sum + (heights[String(x.id)] ?? 56) + GAP, 0) : Math.max(0, index) * 12;
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              ToastItem,
+              {
+                toast: t,
+                index,
+                isTop,
+                expanded,
+                offset,
+                hiddenInStack: index >= visibleToasts,
+                collapsedHeight: frontHeight,
+                paused: hovered || docHidden,
+                onHeight: (h) => setHeights((p) => p[String(t.id)] === h ? p : { ...p, [String(t.id)]: h })
+              },
+              t.id
+            );
+          })
+        }
+      )
+    }
+  );
+}
+var typeIcon = {
+  default: null,
+  success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "grid size-5 place-items-center rounded-full bg-success text-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CheckIcon, { size: 12 }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "grid size-5 place-items-center rounded-full bg-danger text-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(XIcon, { size: 12 }) }),
+  loading: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Spinner, { size: 16, className: "text-fg-muted" })
+};
+function ToastItem({
+  toast: t,
+  index,
+  isTop,
+  expanded,
+  offset,
+  hiddenInStack,
+  collapsedHeight,
+  paused,
+  onHeight
+}) {
+  const ref = (0, import_react11.useRef)(null);
+  const [mounted, setMounted] = (0, import_react11.useState)(false);
+  const drag = (0, import_react11.useRef)(null);
+  const removing = !!t.removing;
+  (0, import_react11.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const prev = el.style.height;
+    el.style.height = "auto";
+    onHeight(el.getBoundingClientRect().height);
+    el.style.height = prev;
+  }, [t.title, t.description, t.action, t.type]);
+  (0, import_react11.useEffect)(() => {
+    const r = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(r);
+  }, []);
+  const remaining = (0, import_react11.useRef)(t.duration ?? (t.type === "loading" ? Infinity : 4e3));
+  (0, import_react11.useEffect)(() => {
+    remaining.current = t.duration ?? (t.type === "loading" ? Infinity : 4e3);
+  }, [t.createdAt, t.duration, t.type]);
+  (0, import_react11.useEffect)(() => {
+    if (removing || paused || !Number.isFinite(remaining.current)) return;
+    const start = Date.now();
+    const timer = setTimeout(() => dismiss(t.id), remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current -= Date.now() - start;
+    };
+  }, [paused, removing, t.id, t.createdAt]);
+  (0, import_react11.useEffect)(() => {
+    if (!removing) return;
+    const timer = setTimeout(() => remove(t.id), 200);
+    return () => clearTimeout(timer);
+  }, [removing, t.id]);
+  const dir = isTop ? 1 : -1;
+  const visible = mounted && !removing && !hiddenInStack;
+  const scale = expanded || index <= 0 ? 1 : Math.max(0.8, 1 - index * 0.05);
+  const transform = `translateY(${!mounted || removing ? `${isTop ? -100 : 100}%` : `${dir * offset}px`}) scale(${scale})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "li",
+    {
+      ref,
+      role: t.type === "error" ? "alert" : "status",
+      "aria-live": t.type === "error" ? "assertive" : "polite",
+      "aria-atomic": true,
+      tabIndex: 0,
+      "data-front": index === 0 || void 0,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") dismiss(t.id);
+      },
+      onPointerDown: (e) => {
+        if (e.target.closest("button")) return;
+        if (drag.current) return;
+        drag.current = { x: e.clientX, y: e.clientY, t: Date.now(), id: e.pointerId };
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: (e) => {
+        const d = drag.current;
+        if (!d || d.id !== e.pointerId || !ref.current) return;
+        const dx = e.clientX - d.x;
+        ref.current.style.transition = "none";
+        ref.current.style.transform = `translateY(${dir * offset}px) translateX(${dx}px)`;
+        ref.current.style.opacity = String(Math.max(0, 1 - Math.abs(dx) / 260));
+      },
+      onPointerUp: (e) => {
+        const d = drag.current;
+        drag.current = null;
+        if (!d || !ref.current) return;
+        const dx = e.clientX - d.x;
+        const velocity = Math.abs(dx) / Math.max(1, Date.now() - d.t);
+        ref.current.style.transition = "";
+        ref.current.style.opacity = "";
+        if (Math.abs(dx) > 80 || velocity > 0.11) {
+          ref.current.style.transform = `translateX(${dx > 0 ? 120 : -120}%)`;
+          ref.current.style.opacity = "0";
+          dismiss(t.id);
+        } else {
+          ref.current.style.transform = "";
+        }
+      },
+      onPointerCancel: () => {
+        drag.current = null;
+        if (ref.current) {
+          ref.current.style.transition = "";
+          ref.current.style.transform = "";
+          ref.current.style.opacity = "";
+        }
+      },
+      className: cn(
+        "absolute inset-x-0 flex touch-none items-start gap-3 overflow-hidden rounded-[12px] border border-line-subtle bg-overlay p-3.5 text-fg shadow-float outline-none select-none",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+        // Transitions, not keyframes: toasts arrive in bursts and must retarget smoothly.
+        "transition-[transform,opacity,height] duration-400 ease-[ease] motion-reduce:transition-opacity",
+        isTop ? "top-0 origin-bottom" : "bottom-0 origin-top"
+      ),
+      style: {
+        transform,
+        opacity: visible ? 1 : 0,
+        zIndex: 100 - Math.max(0, index),
+        height: !expanded && index > 0 ? collapsedHeight : void 0,
+        pointerEvents: hiddenInStack ? "none" : void 0
+      },
+      children: [
+        typeIcon[t.type] && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "mt-px shrink-0", children: typeIcon[t.type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col gap-0.5 transition-opacity duration-200",
+              !expanded && index > 0 && "opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-[14.5px] font-medium leading-snug", children: t.title }),
+              t.description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-[13.5px] leading-snug text-fg-muted", children: t.description })
+            ]
+          }
+        ),
+        t.action && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              t.action.onPress();
+              dismiss(t.id);
+            },
+            className: "h-7 shrink-0 rounded-md bg-primary px-2.5 text-[13px] font-medium text-primary-fg transition-opacity duration-150 ease-out outline-none hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+            children: t.action.label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss notification",
+            onClick: () => dismiss(t.id),
+            className: "-mt-0.5 -mr-1 grid size-6 shrink-0 place-items-center rounded-md text-fg-subtle outline-none transition-colors duration-150 hover:bg-surface-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-focus",
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(XIcon, { size: 13 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Display.tsx
+var import_react12 = require("react");
+var import_react_aria_components18 = require("react-aria-components");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Skeleton({ circle, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      ...props,
+      className: cn(
+        "relative isolate overflow-hidden bg-surface-hover",
+        circle ? "rounded-full" : "rounded-md",
+        "after:absolute after:inset-0 after:-translate-x-full after:animate-krts-shimmer after:bg-gradient-to-r after:from-transparent after:via-bg/60 after:to-transparent",
+        "motion-reduce:after:hidden",
+        className
+      )
+    }
+  );
+}
+var badgeTones = {
+  neutral: "bg-surface text-fg border-line",
+  solid: "bg-primary text-primary-fg border-primary-line",
+  danger: "bg-danger-soft text-danger border-danger/25",
+  success: "bg-success/10 text-success border-success/25",
+  warning: "bg-warning/10 text-warning border-warning/25"
+};
+function Badge({ tone = "neutral", dot, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "span",
+    {
+      ...props,
+      className: cn(
+        "inline-flex h-6 items-center gap-1.5 rounded-full border px-2.5 text-[12.5px] font-medium leading-none whitespace-nowrap",
+        badgeTones[tone],
+        className
+      ),
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-current" }),
+        children
+      ]
+    }
+  );
+}
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "kbd",
+    {
+      ...props,
+      className: cn(
+        "inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-line border-b-2 bg-surface px-1.5 font-sans text-[12px] text-fg-muted",
+        className
+      )
+    }
+  );
+}
+function Avatar({ src, alt, name = "", size = 36, className, ...props }) {
+  const [loadedSrc, setLoadedSrc] = (0, import_react12.useState)(null);
+  const loaded = !!src && loadedSrc === src;
+  const initials = name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "span",
+    {
+      ...props,
+      role: "img",
+      "aria-label": alt ?? name,
+      className: cn(
+        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border border-line bg-surface font-medium text-fg-muted select-none",
+        className
+      ),
+      style: { width: size, height: size, fontSize: size * 0.38, ...props.style },
+      children: [
+        (!src || !loaded) && initials,
+        src && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "img",
+          {
+            src,
+            alt: "",
+            draggable: false,
+            onLoad: () => setLoadedSrc(src),
+            className: cn("absolute inset-0 size-full object-cover transition-opacity duration-300 ease-out", loaded ? "opacity-100" : "opacity-0")
+          }
+        )
+      ]
+    }
+  );
+}
+var Card = (0, import_react12.forwardRef)(function Card2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      ref,
+      ...props,
+      className: cn("rounded-[14px] border border-line-subtle bg-bg p-5 text-fg shadow-control", className)
+    }
+  );
+});
+function CardHeader({ title, description, action }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-4 flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "text-base font-semibold leading-tight text-fg", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-fg-muted", children: description })
+    ] }),
+    action
+  ] });
+}
+function Separator2({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react_aria_components18.Separator,
+    {
+      ...props,
+      className: cn(
+        "shrink-0 bg-line-subtle",
+        props.orientation === "vertical" ? "w-px self-stretch" : "h-px w-full",
+        className
+      )
+    }
+  );
+}
+function Link({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react_aria_components18.Link,
+    {
+      ...props,
+      className: composeTw(
+        className,
+        cn(
+          "rounded-sm text-fg underline decoration-line-strong underline-offset-[3px] transition-[text-decoration-color] duration-150 ease-out hover:decoration-fg",
+          focusRing
+        )
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AlertDialog,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardHeader,
+  CheckIcon,
+  Checkbox,
+  CheckboxGroup,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CopyButton,
+  CopyIcon,
+  Description,
+  Dialog,
+  DialogTrigger,
+  Disclosure,
+  Drawer,
+  DropdownButton,
+  FieldError,
+  GestureArea,
+  HoldButton,
+  Input,
+  KRTS_EVENTS,
+  Kbd,
+  KrtsProvider,
+  Label,
+  Link,
+  Menu,
+  MenuItem,
+  MenuSection,
+  MenuSeparator,
+  MenuTrigger,
+  Meter,
+  MinusIcon,
+  Modal,
+  NumberField,
+  PlusIcon,
+  Popover,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  SearchField,
+  SearchIcon,
+  Segment,
+  SegmentedControl,
+  Select,
+  SelectItem,
+  Separator,
+  Skeleton,
+  Slider,
+  Spinner,
+  SplitButton,
+  SubmenuTrigger,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextAreaField,
+  TextField,
+  Toaster,
+  ToggleButton,
+  Tooltip,
+  TooltipTrigger,
+  WithTooltip,
+  XIcon,
+  buttonStyles,
+  cn,
+  composeTw,
+  dispatchKrtsEvent,
+  floatingMotion,
+  floatingSurface,
+  focusRing,
+  inputFrame,
+  toast,
+  useAnimatedWidth,
+  useGesture,
+  useGestureHandlers,
+  useKrtsConfig,
+  usePerceivedProgress,
+  usePrefersReducedMotion,
+  useSmoothPending
+});
+//# sourceMappingURL=index.cjs.map